:root{
    --bg:#f5f4ed; --surface:#faf9f5; --surface-warm:#e8e6dc;
    --fg:#141413; --fg-2:#3d3d3a; --muted:#5e5d59; --meta:#87867f;
    --border:#f0eee6; --border-soft:#e8e6dc;
    --accent:#c96442; --accent-on:#faf9f5;
    --accent-hover:color-mix(in oklab, var(--accent), black 8%);
    --accent-active:color-mix(in oklab, var(--accent), black 14%);
    --coral:#d97757; /* lighter brand variant for links/accents on dark surfaces */
    --success:#17a34a; --warn:#eab308; --danger:#b53333;
    --font-display:"Lora","Anthropic Serif",Georgia,"Times New Roman",serif;
    --font-body:"Be Vietnam Pro","Anthropic Sans",Arial,system-ui,-apple-system,sans-serif;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:9999px;
    --elev-ring:0 0 0 1px var(--border);
    --elev-raised:rgba(0,0,0,.05) 0 4px 24px;
    --focus-ring:0 0 0 3px rgba(56,152,236,.3);
    --container-max:1200px;
    --section-y:clamp(64px,9vw,120px);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg); color:var(--fg);
    font-family:var(--font-body); font-size:17px; line-height:1.6;
    font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  ::selection{background:var(--accent); color:var(--accent-on)}
  h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; line-height:1.1; letter-spacing:-.01em}
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}

  .wrap{max-width:var(--container-max); margin:0 auto; padding:0 24px}
  @media(max-width:600px){.wrap{padding:0 18px}}

  .eyebrow{
    font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent); display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6}

  /* ── Header ───────────────────────────────────────────── */
  header.site{
    position:sticky; top:0; z-index:50;
    background:color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
    transition:background .3s, border-color .3s;
  }
  header.site.scrolled{background:color-mix(in oklab,var(--bg) 95%, transparent)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:70px}
  .brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:21px}
  .brand .moon{width:26px;height:26px;flex:none;color:var(--accent)}
  .brand b{font-weight:600}
  .brand i{font-style:italic; color:var(--muted); font-size:18px}
  .nav-links{display:flex; gap:30px; list-style:none; align-items:center}
  .nav-links a{font-size:15px; font-weight:500; color:var(--fg-2); position:relative; padding:4px 0; transition:color .2s}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .25s ease}
  .nav-links a:hover,.nav-links a.active{color:var(--fg)}
  .nav-links a.active::after,.nav-links a:hover::after{right:0}
  .nav-cta{
    font-size:14px; font-weight:600; color:var(--accent-on); background:var(--accent);
    padding:9px 18px; border-radius:var(--radius-md); box-shadow:0 0 0 1px var(--accent);
    transition:background .2s, transform .1s;
  }
  .nav-cta:hover{background:var(--accent-hover)}
  .nav-cta:active{transform:translateY(1px)}
  .burger{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:6px}
  .burger svg{width:26px;height:26px}
  @media(max-width:860px){
    .nav-links,.nav-cta{display:none}
    .nav-links.open{
      display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
      gap:0; background:var(--bg); border-bottom:1px solid var(--border-soft); padding:8px 24px 18px;
    }
    .nav-links.open a{padding:13px 0; border-bottom:1px solid var(--border); width:100%}
    .nav-links.open a::after{display:none}
    .burger{display:block}
  }

  /* ── Hero (dark — the night) ──────────────────────────── */
  .hero{
    position:relative; background:#141413; color:#faf9f5; overflow:hidden;
    padding:clamp(80px,13vw,150px) 0 0;
  }
  .hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
  .hero-bg .glow{
    position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
  }
  .hero-bg .g1{width:520px;height:520px;top:-160px;right:-90px;
    background:radial-gradient(circle, #c96442, transparent 70%)}
  .hero-bg .g2{width:440px;height:440px;bottom:-180px;left:-120px;
    background:radial-gradient(circle, #4d6b57, transparent 70%); opacity:.35}
  .hero-bg .grain{position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:3px 3px}
  .hero .wrap{position:relative; z-index:2}
  .hero-eyebrow{color:var(--coral)}
  .hero h1{
    font-size:clamp(42px,8.2vw,92px); line-height:1.02; letter-spacing:-.025em;
    margin:22px 0 0; max-width:14ch;
  }
  .hero h1 em{font-style:italic; color:var(--coral)}
  .hero .lede{
    font-size:clamp(17px,2.2vw,21px); color:#b0aea5; max-width:54ch; margin:26px 0 0; line-height:1.55;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 0}
  .btn{
    display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
    padding:13px 22px; border-radius:var(--radius-md); cursor:pointer; transition:transform .1s, background .2s, box-shadow .2s;
  }
  .btn svg{width:17px;height:17px}
  .btn-primary{background:var(--accent); color:var(--accent-on); box-shadow:0 0 0 1px var(--accent)}
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-ghost{background:transparent; color:#faf9f5; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
  .btn:active{transform:translateY(1px)}

  /* hero skyline + stats strip */
  .hero-strip{
    position:relative; z-index:2; margin-top:clamp(48px,7vw,84px);
    border-top:1px solid rgba(255,255,255,.12);
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .hero-strip .stat{padding:26px 22px 30px; border-left:1px solid rgba(255,255,255,.12)}
  .hero-strip .stat:first-child{border-left:0; padding-left:0}
  .hero-strip .num{font-family:var(--font-display); font-size:clamp(30px,4vw,46px); color:#faf9f5; line-height:1}
  .hero-strip .lbl{font-size:13px; color:#87867f; margin-top:9px; letter-spacing:.02em}
  @media(max-width:760px){
    .hero-strip{grid-template-columns:repeat(2,1fr)}
    .hero-strip .stat{border-left:1px solid rgba(255,255,255,.12); padding:22px 16px}
    .hero-strip .stat:first-child{padding-left:16px}
    .hero-strip .stat:nth-child(odd){border-left:0; padding-left:0}
  }
  .skyline{display:block;width:100%;height:auto;color:#1f1f1d;margin-top:-2px;position:relative;z-index:1}

  /* ── Section scaffolding ──────────────────────────────── */
  section.band{padding:var(--section-y) 0}
  .band.dark{background:#141413; color:#faf9f5}
  .band.dark .s-sub{color:#b0aea5}
  .s-head{max-width:760px; margin-bottom:clamp(40px,5vw,64px)}
  .s-head h2{font-size:clamp(30px,4.4vw,54px); margin:18px 0 0; letter-spacing:-.02em}
  .band.dark .s-head h2{color:#faf9f5}
  .s-sub{font-size:clamp(16px,2vw,19px); color:var(--muted); margin:18px 0 0; max-width:60ch; line-height:1.55}

  /* intro / curation manifesto (parchment) */
  .intro-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,90px); align-items:start}
  @media(max-width:860px){.intro-grid{grid-template-columns:1fr; gap:40px}}
  .intro-lead{font-family:var(--font-display); font-size:clamp(22px,3vw,30px); line-height:1.4; color:var(--fg)}
  .intro-lead span{color:var(--accent)}
  .intro-body p{color:var(--muted); margin-top:18px}
  .legend{display:flex; flex-direction:column; gap:2px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface)}
  .legend .row{display:flex; gap:16px; padding:20px 22px; align-items:flex-start; border-bottom:1px solid var(--border)}
  .legend .row:last-child{border-bottom:0}
  .legend .ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface-warm);color:var(--accent)}
  .legend .ic svg{width:20px;height:20px}
  .legend h4{font-size:18px;font-weight:600}
  .legend p{font-size:14.5px;color:var(--muted);margin-top:3px}

  /* ── Venue list (editorial rows) ──────────────────────── */
  .venues{display:flex; flex-direction:column}
  .venue{
    display:grid; grid-template-columns:88px 1fr 250px; gap:28px; align-items:start;
    padding:34px 0; border-top:1px solid var(--border-soft);
  }
  .band.dark .venue{border-top-color:rgba(255,255,255,.13)}
  .venue:last-child{border-bottom:1px solid var(--border-soft)}
  .band.dark .venue:last-child{border-bottom-color:rgba(255,255,255,.13)}
  .v-num{font-family:var(--font-display); font-size:42px; color:var(--accent); line-height:1; font-weight:500}
  .band.dark .v-num{color:var(--coral)}
  .v-main h3{font-size:clamp(23px,2.8vw,30px); letter-spacing:-.015em}
  .v-tags{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px}
  .tag{
    font-size:12px; font-weight:500; letter-spacing:.02em; padding:5px 12px; border-radius:var(--radius-pill);
    background:var(--surface-warm); color:var(--fg-2);
  }
  .band.dark .tag{background:rgba(255,255,255,.08); color:#d8d6cd}
  .tag.hot{background:color-mix(in oklab,var(--accent) 16%, transparent); color:var(--accent)}
  .band.dark .tag.hot{background:rgba(217,119,87,.18); color:var(--coral)}
  .v-desc{color:var(--muted); max-width:56ch}
  .band.dark .v-desc{color:#b0aea5}
  .v-sig{
    margin-top:14px; font-family:var(--font-display); font-style:italic; font-size:17px; color:var(--fg-2);
    display:flex; gap:10px; align-items:baseline;
  }
  .band.dark .v-sig{color:#cfcdc4}
  .v-sig::before{content:"Gọi ngay"; font-style:normal; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); flex:none}
  .band.dark .v-sig::before{color:var(--coral)}
  .v-meta{font-size:14.5px; display:flex; flex-direction:column; gap:11px}
  .v-meta .mrow{display:flex; gap:11px; align-items:flex-start; color:var(--fg-2)}
  .band.dark .v-meta .mrow{color:#cfcdc4}
  .v-meta .mrow svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--meta)}
  .band.dark .v-meta .mrow svg{color:#87867f}
  @media(max-width:900px){
    .venue{grid-template-columns:60px 1fr; gap:18px 20px}
    .v-num{font-size:34px}
    .v-meta{grid-column:1/-1; padding-top:6px; border-top:1px dashed var(--border); margin-top:4px; flex-flow:row wrap; gap:16px}
    .band.dark .v-meta{border-top-color:rgba(255,255,255,.13)}
  }
  @media(max-width:520px){
    .venue{grid-template-columns:1fr}
    .v-num{font-size:30px}
  }

  /* ── Tips ─────────────────────────────────────────────── */
  .tips-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  @media(max-width:860px){.tips-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.tips-grid{grid-template-columns:1fr}}
  .tip{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:26px 24px 28px; box-shadow:var(--elev-raised);
  }
  .tip .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--surface-warm);color:var(--accent);margin-bottom:16px}
  .tip .ic svg{width:22px;height:22px}
  .tip h4{font-size:20px;font-weight:600}
  .tip p{color:var(--muted); font-size:15.5px; margin-top:8px}

  /* ── CTA + footer ─────────────────────────────────────── */
  .closer{background:#141413; color:#faf9f5; text-align:center; padding:var(--section-y) 0}
  .closer h2{font-size:clamp(30px,5vw,58px); letter-spacing:-.02em; max-width:18ch; margin:0 auto}
  .closer h2 em{font-style:italic;color:var(--coral)}
  .closer p{color:#b0aea5; max-width:50ch; margin:22px auto 0}
  .closer .hero-actions{justify-content:center}
  footer.site{background:#0f0f0e; color:#87867f; padding:40px 0; border-top:1px solid rgba(255,255,255,.08)}
  .foot{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; font-size:13.5px}
  .foot .brand{color:#faf9f5;font-size:18px}
  .foot .disc{max-width:60ch; line-height:1.5}

  /* reveal */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}