/* ===== Hồ Đôi Vọng Nguyệt — Living Heritage ===== */

:root{
  --black: #07080c;
  --ink: #0c0e14;
  --ink-soft: #12141c;
  --panel: #14161f;
  --gold: #b0814e;
  --gold-soft: #d4a876;
  --gold-deep: #7c5a35;
  --text: #ece7db;
  --text-dim: #a8a69c;
  --line: rgba(176,129,78,0.18);
  --serif: 'Playfair Display', 'Georgia', serif;
  --sans: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:1180px; margin:0 auto; padding:0 28px;}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--gold); color:var(--black);}

/* ---------- Typography helpers ---------- */
.section-tag{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.2;
  color:var(--text);
  max-width:720px;
}
.section-head{margin-bottom:56px;}
.section-head.light h2, .section-head.light .section-sub{color:#fff;}
.section-sub{
  margin-top:16px;
  color:var(--text-dim);
  max-width:560px;
  font-size:1.02rem;
  font-weight:300;
}

.btn-gold, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 38px;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .4s var(--ease);
  cursor:pointer;
  border:1px solid var(--gold);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  color:#1a1305;
  font-weight:600;
}
.btn-gold:hover{filter:brightness(1.12); transform:translateY(-2px);}
.btn-ghost{
  color:var(--gold-soft);
  background:transparent;
}
.btn-ghost:hover{background:rgba(176,129,78,0.08); transform:translateY(-2px);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Nav ---------- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:17px 0;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:rgba(7,8,12,0.86);
  backdrop-filter:blur(14px);
  border-color:var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:center;
}
.nav-links{
  display:flex; align-items:center; gap:34px;
  list-style:none;
}
.nav-links a{
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--text-dim);
  transition:color .3s;
  position:relative;
}
.nav-links a:not(.nav-cta):after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover{color:var(--gold-soft);}
.nav-links a:not(.nav-cta):hover:after{transform:scaleX(1);}
.nav-cta{
  border:1px solid var(--gold);
  color:var(--gold-soft) !important;
  padding:9px 20px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.74rem !important;
}
.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:1px; background:var(--gold-soft); display:block;}

/* ---------- Hero ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hero{
  position:relative;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--black);
}
.hero-picture{
  display:block; width:100%; line-height:0;
}
.hero-img{
  display:block; width:100%; height:auto;
}
.hero-footer{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:30px 28px 26px;
  background:radial-gradient(ellipse at 50% 0%, rgba(176,129,78,0.06), transparent 70%), var(--black);
}
.moon{
  position:absolute; top:10%; right:9%;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fdf4df 0%, var(--gold-soft) 38%, var(--gold) 70%, var(--gold-deep) 100%);
  box-shadow:0 0 90px 10px rgba(176,129,78,0.35), 0 0 220px 60px rgba(176,129,78,0.1);
  opacity:.9;
  animation:moonFloat 12s ease-in-out infinite;
}
@keyframes moonFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);}}
.moon-alt{top:-60px; right:14%; width:160px; height:160px; opacity:.5;}

.scroll-cue{
  width:26px; height:44px; border:1px solid var(--line); border-radius:20px;
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{width:3px; height:8px; border-radius:2px; background:var(--gold); animation:cueMove 1.8s infinite;}
@keyframes cueMove{0%{opacity:0; transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0; transform:translateY(14px);}}

/* ---------- Program / Chapters ---------- */
.program{padding:0 0 100px; background:var(--ink);}
.program-banner{
  position:relative; overflow:hidden;
  margin-bottom:56px;
  padding:22px 20px;
  text-align:center;
  background:linear-gradient(100deg, #0a0a0a 0%, var(--gold-deep) 22%, var(--gold-soft) 40%, var(--gold) 58%, #0a0a0a 100%);
}
.program-banner::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 16px);
  mix-blend-mode:overlay;
}
.program-banner h2{
  position:relative;
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing:.28em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.chapters{display:flex; flex-direction:column; gap:64px;}
.chapter-top{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start;}
.chapter-media{
  width:100%; overflow:hidden; border-radius:2px;
  border:1px solid var(--line);
}
.chapter-media img{width:100%; height:auto; display:block; filter:grayscale(.3) contrast(1.05);}
.chapter-head{display:flex; flex-direction:column;}
.chapter-eyebrow{color:#fff; font-weight:700; font-size:1.02rem; margin-bottom:2px;}
.chapter-head h3{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  color:var(--gold-soft); line-height:1.3; margin-bottom:16px;
}
.chapter-head h3 em{color:var(--gold-soft); font-style:normal;}
.chapter-credits{display:flex; flex-direction:column; gap:4px; font-size:.92rem;}
.chapter-credits div{color:var(--text-dim);}
.chapter-credits dt{display:inline; font-weight:700; color:#fff;}
.chapter-credits dd{display:inline; margin:0; color:var(--text-dim);}
.chapter-text{margin-top:24px; color:var(--text-dim); font-size:.95rem; line-height:1.75;}
.chapter-text p{margin-bottom:14px;}
.chapter-text p:last-child{margin-bottom:0;}

/* ---------- Stage ---------- */
.stage{padding:110px 0; background:var(--ink-soft); position:relative;}
.stage-grid{
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:18px;
}
.stage-main{grid-row:1/3; height:100%; object-fit:cover; aspect-ratio:auto;}
.stage-grid img{width:100%; height:100%; object-fit:cover; border-radius:2px; border:1px solid var(--line);}

/* ---------- Gallery ---------- */
.gallery{padding:90px 0;}
.gallery-collage{display:flex; gap:16px; align-items:flex-start;}
.gallery-col{flex:1; display:flex; flex-direction:column; gap:16px; min-width:0;}
.gallery-col-offset-1{margin-top:48px;}
.gallery-col-offset-2{margin-top:16px;}
.gallery-col-offset-3{margin-top:64px;}
.gallery-col img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  background:#111; border:1px solid var(--line);
  filter:grayscale(1) brightness(.95); cursor:pointer;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.gallery-col img:hover{transform:scale(1.03); filter:grayscale(0) brightness(1); z-index:2; position:relative;}

/* ---------- Artists ---------- */
.artists{padding:110px 0 130px; background:linear-gradient(180deg, transparent, rgba(176,129,78,0.04), transparent);}
.artist-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  border:1px solid var(--line);
}
.artist-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer;
  border:1px solid transparent;
  outline:none;
}
.artist-card.is-lead{grid-column:span 1; grid-row:span 1;}
.artist-photo{position:absolute; inset:0;}
.artist-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.55) brightness(.75); transition:filter .5s var(--ease), transform .7s var(--ease);}
.artist-card:hover .artist-photo img, .artist-card:focus .artist-photo img{filter:grayscale(0) brightness(.9); transform:scale(1.05);}
.artist-face{
  position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
  background:linear-gradient(0deg, rgba(5,6,9,0.92), rgba(5,6,9,0) 85%);
  transition:opacity .4s var(--ease);
}
.artist-face h3{font-family:var(--serif); font-size:1.15rem; color:#fff; margin-bottom:4px;}
.artist-face span{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft);}
.artist-bio{
  position:absolute; inset:0; padding:28px 26px;
  background:rgba(6,7,11,0.95);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  overflow-y:auto;
}
.artist-card:hover .artist-bio, .artist-card:focus .artist-bio, .artist-card.open .artist-bio{
  opacity:1; transform:translateY(0);
}
.artist-card:hover .artist-face, .artist-card:focus .artist-face, .artist-card.open .artist-face{opacity:0; pointer-events:none;}
.artist-bio h3{font-family:var(--serif); font-size:1.15rem; color:var(--gold-soft);}
.artist-bio .role{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.artist-bio p{font-size:.84rem; color:var(--text-dim); line-height:1.6;}

/* ---------- Tickets ---------- */
.tickets{
  position:relative; padding:140px 0; text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(176,129,78,0.1), transparent 60%), var(--black);
  overflow:hidden;
}
.tickets-inner{display:flex; flex-direction:column; align-items:center; gap:22px;}
.tickets h2{font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:600; color:#fff; max-width:680px;}
.ticket-meta{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; margin:18px 0 10px; text-align:left;}
.ticket-meta > div{display:flex; flex-direction:column; gap:6px;}
.ticket-contacts{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:18px;}

/* ---------- Footer ---------- */
.site-footer{
  padding:56px 0 32px; border-top:1px solid var(--line); background:var(--black);
}
.footer-brands{
  display:grid; grid-template-columns:repeat(2, auto);
  justify-content:center; align-items:center;
  gap:24px 64px;
  padding-bottom:40px; margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.footer-brand-logo{height:40px; width:auto; max-width:180px; object-fit:contain; opacity:.95; justify-self:center;}
.footer-brand-logo--akh{height:80px;}
.footer-brand-qr{width:96px; height:96px; object-fit:contain; justify-self:center;}
.footer-brand-text{text-align:center; justify-self:center; font-size:.8rem;}
.footer-brand-text a{color:var(--gold-soft); transition:color .3s;}
.footer-brand-text a:hover{color:var(--gold);}
.footer-brand-text p{color:var(--text-dim); margin-top:4px;}
.footer-inner{display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;}
.footer-presenter{font-size:.78rem; color:var(--text-dim); letter-spacing:.04em;}
.footer-series{font-family:var(--serif); color:var(--gold-soft); font-size:1rem; margin-top:4px;}
.footer-copy{width:100%; text-align:center; font-size:.72rem; color:var(--text-dim); opacity:.6; margin-top:18px;}

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .chapter-top{grid-template-columns:1fr;}
  .chapter-media{max-width:320px;}
  .stage-grid{grid-template-columns:1fr; grid-template-rows:auto;}
  .stage-main{grid-row:auto; aspect-ratio:16/9;}
  .stage-grid img{aspect-ratio:16/9;}
  .artist-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 720px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:72vw; max-width:320px;
    background:rgba(7,8,12,0.98); backdrop-filter:blur(16px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    padding:40px 32px; transform:translateX(100%); transition:transform .4s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .hero-footer{padding:24px 20px 22px; gap:18px;}
  .program-banner{padding:18px 16px;}
  .chapter-media{max-width:100%;}
  .chapter-credits dt{display:block;}
  .artist-grid{grid-template-columns:1fr;}
  .gallery-collage{flex-wrap:wrap; gap:10px;}
  .gallery-col{flex:1 1 calc(50% - 5px); margin-top:0 !important; gap:10px;}
  .moon{width:120px; height:120px; top:6%; right:4%;}
  .ticket-meta{flex-direction:column; gap:16px; align-items:center; text-align:center;}
}