/* ============================================================
   BẢN CỐC BA VÌ — Khu nghỉ dưỡng văn hoá & thiền
   Design system. Ngôn ngữ thị giác: điện ảnh full-bleed, serif
   nhẹ thanh thoát, bảng màu rừng sâu / vàng kim / kem đá.
   (Học quy ước thiết kế nghỉ dưỡng cao cấp; nội dung & ảnh riêng.)
   ============================================================ */

/* ---------- Fonts (self-host, có dấu tiếng Việt) ---------- */
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'BeVietnam'; src:url('/assets/fonts/bevn-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'BeVietnam'; src:url('/assets/fonts/bevn-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'BeVietnam'; src:url('/assets/fonts/bevn-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'BeVietnam'; src:url('/assets/fonts/bevn-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --cream:#f4efe5; --paper:#faf6ee; --stone:#e7decd;
  --ink:#20251a; --ink-soft:#5c624f; --ink-faint:#8a8f7d;
  --forest:#1f2716; --forest-2:#2c3720; --moss:#6d7b4d;
  --gold:#ab8a4d; --gold-soft:#c8ac76; --gold-bright:#d9bd80;
  --line:rgba(32,37,26,.13); --line-light:rgba(244,239,229,.16);
  --serif:'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:'BeVietnam', system-ui, -apple-system, sans-serif;
  --w: min(1280px, 92vw);
  --w-wide: min(1480px, 95vw);
  --ease: cubic-bezier(.22,1,.36,1);
  --pad-y: clamp(5rem, 11vw, 11rem);
}

/* ---------- Reset / base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--sans); font-weight:400; color:var(--ink);
  background:var(--cream); line-height:1.65; font-size:clamp(.95rem,1.02vw,1.04rem);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--gold); color:#fff; }

/* ---------- Type ---------- */
.display{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.012em; }
.d-hero{ font-size:clamp(2.9rem, 8.2vw, 7.4rem); font-weight:300; letter-spacing:-.02em; line-height:.98; }
.d-1{ font-size:clamp(2.2rem, 5vw, 4.4rem); }
.d-2{ font-size:clamp(1.8rem, 3.6vw, 3.1rem); }
.d-3{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.75; color:var(--ink-soft); font-weight:300; }
.eyebrow{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before{ content:''; width:1.8rem; height:1px; background:var(--gold); opacity:.7; }
.muted{ color:var(--ink-soft); }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---------- Layout ---------- */
.wrap{ width:var(--w); margin-inline:auto; }
.wrap-wide{ width:var(--w-wide); margin-inline:auto; }
section{ position:relative; }
.band{ padding-block:var(--pad-y); }
.band-dark{ background:var(--forest); color:var(--cream); }
.band-dark .lead,.band-dark .muted{ color:rgba(244,239,229,.72); }
.band-dark .eyebrow{ color:var(--gold-soft); }
.band-dark .eyebrow::before{ background:var(--gold-soft); }
.band-cream{ background:var(--cream); }
.band-paper{ background:var(--paper); }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans); font-weight:500;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; padding:1.05rem 2.2rem;
  border-radius:2px; transition:.45s var(--ease); }
.btn-solid{ background:var(--ink); color:var(--cream); }
.btn-solid:hover{ background:var(--gold); color:#fff; }
.btn-gold{ background:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--ink); }
.btn-out{ border:1px solid currentColor; color:var(--ink); }
.btn-out:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.band-dark .btn-out{ color:var(--cream); }
.band-dark .btn-out:hover{ background:var(--cream); color:var(--forest); border-color:var(--cream); }
.arrow{ width:3.2rem; height:3.2rem; border-radius:50%; border:1px solid currentColor; display:inline-flex;
  align-items:center; justify-content:center; transition:.45s var(--ease); flex:none; }
.arrow:hover{ background:var(--gold); border-color:var(--gold); color:#fff; transform:translateX(4px); }

/* ---------- Header / nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:60; padding:1.5rem 0; transition:.5s var(--ease);
  color:var(--cream); }
.nav__in{ width:var(--w-wide); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav:not(.is-solid){ text-shadow:0 1px 18px rgba(18,22,12,.4); }
.nav.is-solid{ background:rgba(28,33,21,.93); backdrop-filter:blur(10px); padding:.95rem 0; box-shadow:0 1px 0 var(--line-light); text-shadow:none; }
.nav__logo{ font-family:var(--serif); font-weight:500; font-size:1.5rem; letter-spacing:.02em; line-height:1; }
.nav__logo small{ display:block; font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; opacity:.8; margin-top:.35rem; }
.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__links a{ font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400; opacity:.92; transition:.3s; position:relative; padding:.3rem 0; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-soft); transition:.4s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; border:1px solid rgba(244,239,229,.4); padding:.7rem 1.4rem; border-radius:2px; transition:.4s var(--ease); }
.nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.nav__burger{ display:none; width:2.4rem; height:2.4rem; flex-direction:column; justify-content:center; gap:6px; }
.nav__burger span{ height:1.5px; background:currentColor; transition:.3s; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:70; background:var(--forest); color:var(--cream); padding:6rem 2rem 2rem;
  transform:translateY(-100%); transition:.6s var(--ease); display:flex; flex-direction:column; }
.drawer.is-open{ transform:none; }
.drawer a{ font-family:var(--serif); font-size:2rem; font-weight:300; padding:.5rem 0; border-bottom:1px solid var(--line-light); }
.drawer__close{ position:absolute; top:1.7rem; right:1.7rem; font-size:1.6rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; height:100svh; min-height:560px; display:grid; place-items:center; overflow:hidden; color:var(--cream); text-align:center; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,25,14,.45) 0%, rgba(20,25,14,.18) 38%, rgba(20,25,14,.5) 100%); }
.hero__in{ position:relative; z-index:2; padding:0 1.5rem; max-width:1100px; }
.hero__eyebrow{ font-size:.74rem; letter-spacing:.4em; text-transform:uppercase; font-weight:500; color:var(--gold-soft); margin-bottom:1.6rem; }
.hero__title{ overflow:hidden; }
.hero__sub{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.1rem,2vw,1.6rem); margin-top:1.4rem; color:rgba(244,239,229,.92); }
.hero__scroll{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(244,239,229,.8); display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.hero__scroll i{ width:1px; height:3.2rem; background:linear-gradient(rgba(244,239,229,.7),transparent); animation:scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- Intro split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; }
.split__media img{ width:100%; height:100%; object-fit:cover; transition:1.4s var(--ease); }
.split__media:hover img{ transform:scale(1.05); }
.split__media .tag{ position:absolute; bottom:1.4rem; left:1.4rem; background:rgba(28,33,21,.82); color:var(--cream); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:.6rem 1rem; backdrop-filter:blur(4px); }
.split__body .eyebrow{ margin-bottom:1.6rem; }
.split__body .d-1{ margin-bottom:1.6rem; }
.split__body .lead+.lead{ margin-top:1.1rem; }
.split__body .btn,.split__body .more{ margin-top:2.2rem; }
.more{ display:inline-flex; align-items:center; gap:1rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.more:hover .arrow{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ---------- Editorial tiles ---------- */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.tile{ position:relative; min-height:clamp(420px,52vh,640px); overflow:hidden; display:flex; align-items:flex-end; color:var(--cream); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:1.6s var(--ease); z-index:0; }
.tile::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,25,14,.1) 0%, rgba(20,25,14,.12) 40%, rgba(20,25,14,.78) 100%); transition:.6s; }
.tile:hover img{ transform:scale(1.06); }
.tile__body{ position:relative; z-index:2; padding:clamp(1.8rem,3.5vw,3rem); width:100%; }
.tile__eyebrow{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; }
.tile__title{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.4vw,3rem); line-height:1.02; margin:.6rem 0 .8rem; }
.tile__desc{ font-size:.92rem; color:rgba(244,239,229,.82); font-weight:300; max-width:40ch; }
.tile__more{ display:inline-flex; align-items:center; gap:.9rem; margin-top:1.5rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.tile:hover .tile__more .arrow{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ---------- Stats / Nguồn lực ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem) clamp(1rem,2vw,2rem); margin-top:clamp(3rem,6vw,5rem); }
.stat{ text-align:center; padding:1rem 0; border-top:1px solid var(--line-light); }
.stat b{ display:block; font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; color:var(--gold-soft); letter-spacing:-.01em; }
.stat span{ display:block; margin-top:.7rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,229,.72); }
.stat small{ display:block; font-size:.68rem; color:rgba(244,239,229,.5); margin-top:.3rem; letter-spacing:.06em; text-transform:none; }

/* ---------- Room/feature cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); margin-top:clamp(2.5rem,5vw,4rem); }
.card{ background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:.5s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -28px rgba(32,37,26,.4); }
.card__img{ aspect-ratio:3/2.1; overflow:hidden; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:1.2s var(--ease); }
.card:hover .card__img img{ transform:scale(1.06); }
.card__body{ padding:1.6rem 1.5rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.card__body h3{ font-family:var(--serif); font-weight:400; font-size:1.55rem; }
.card__body .num{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:.6rem; }
.card__body p{ font-size:.9rem; color:var(--ink-soft); margin-top:.6rem; font-weight:300; }
.card__meta{ margin-top:auto; padding-top:1.2rem; font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em; border-top:1px solid var(--line); margin-top:1.3rem; }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.5rem,1vw,1rem); }
.gallery figure{ overflow:hidden; position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:1.4s var(--ease); }
.gallery figure:hover img{ transform:scale(1.07); }
.g-a{ grid-column:span 5; aspect-ratio:4/5; }
.g-b{ grid-column:span 7; aspect-ratio:16/10; }
.g-c{ grid-column:span 4; aspect-ratio:1/1; }
.g-d{ grid-column:span 4; aspect-ratio:1/1; }
.g-e{ grid-column:span 4; aspect-ratio:1/1; }

/* ---------- CTA band ---------- */
.cta{ position:relative; overflow:hidden; color:var(--cream); text-align:center; }
.cta__bg{ position:absolute; inset:0; z-index:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta__bg::after{ content:''; position:absolute; inset:0; background:rgba(20,25,14,.62); }
.cta__in{ position:relative; z-index:2; padding-block:clamp(5rem,12vw,9rem); }

/* ---------- Footer ---------- */
.foot{ background:var(--forest); color:rgba(244,239,229,.72); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.foot__logo{ font-family:var(--serif); font-size:1.9rem; font-weight:500; color:var(--cream); }
.foot__logo small{ display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.4em; text-transform:uppercase; margin-top:.4rem; opacity:.8; }
.foot h4{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin-bottom:1.3rem; }
.foot ul{ list-style:none; display:grid; gap:.7rem; }
.foot a:hover{ color:var(--cream); }
.foot__bottom{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.8rem; border-top:1px solid var(--line-light); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.74rem; letter-spacing:.04em; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; } .reveal-d3{ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero__scroll i{ animation:none; } }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav__links{ display:none; } .nav__cta{ display:none; } .nav__burger{ display:flex; }
  .split{ grid-template-columns:1fr; gap:2.2rem; } .split--rev .split__media{ order:0; }
  .split__media{ aspect-ratio:16/11; }
  .tiles{ grid-template-columns:1fr; } .tile{ min-height:62vh; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .gallery{ grid-template-columns:repeat(2,1fr); } .g-a,.g-b,.g-c,.g-d,.g-e{ grid-column:span 1; aspect-ratio:4/5; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; } .foot__grid{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
}

/* ============================================================
   AYANA-BALI FIDELITY — components bổ sung (intro serif, big-stat,
   highlights N°, horizontal strip, scroll progress, menu overlay)
   ============================================================ */

/* ---- italic connector "của/giữa/of" ---- */
.con{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---- scroll progress (mép phải) ---- */
.progress{ position:fixed; top:0; right:0; width:2px; height:100vh; z-index:55; background:transparent; pointer-events:none; }
.progress i{ position:absolute; top:0; right:0; width:100%; height:0; background:linear-gradient(var(--gold-soft),var(--gold)); transition:height .1s linear; }

/* ---- nav tối giản: menu trigger + Reserve ---- */
.nav__menu{ display:inline-flex; align-items:center; gap:.7rem; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; }
.nav__menu .dots{ display:grid; grid-template-columns:repeat(2,4px); gap:3px; }
.nav__menu .dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; display:block; }

/* full-screen menu overlay */
.menu{ position:fixed; inset:0; z-index:80; overflow:hidden; background:var(--forest); color:var(--cream); transform:translateY(-100%); transition:transform .8s var(--ease); display:grid; grid-template-columns:1.1fr 1fr; }
.menu.is-open{ transform:none; }
.menu__media{ position:relative; overflow:hidden; }
.menu__media img{ width:100%; height:100%; object-fit:cover; }
.menu__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(31,39,22,.4),rgba(31,39,22,.1)); }
.menu__nav{ padding:clamp(4rem,9vw,7rem) clamp(2rem,6vw,6rem); display:flex; flex-direction:column; justify-content:center; }
.menu__nav a{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.5; color:var(--cream); display:flex; align-items:baseline; gap:1rem; transition:.4s var(--ease); }
.menu__nav a .n{ font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; color:var(--gold-soft); }
.menu__nav a:hover{ color:var(--gold-soft); padding-left:.6rem; }
.menu__foot{ margin-top:2.5rem; font-size:.8rem; letter-spacing:.04em; color:rgba(244,239,229,.6); display:flex; gap:2rem; flex-wrap:wrap; }
.menu__close{ position:absolute; top:1.7rem; right:2rem; font-size:1.4rem; color:var(--cream); z-index:2; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; }

/* ---- intro serif (căn giữa, copy serif lớn) ---- */
.intro{ text-align:center; }
.intro .div{ font-size:1.1rem; color:var(--gold); margin:0 auto clamp(1.6rem,3vw,2.4rem); }
.intro p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.5vw,2.05rem); line-height:1.55; color:var(--ink); max-width:24ch; margin:0 auto; letter-spacing:-.005em; }
.intro p + p{ margin-top:clamp(1.4rem,2.6vw,2rem); }
.intro .small{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ink-soft); max-width:48ch; }
.band-dark .intro p{ color:var(--cream); }

/* ---- big stat (số liệu lớn trên ảnh full-bleed) ---- */
.bigstat{ position:relative; min-height:92svh; display:grid; place-items:center; text-align:center; color:var(--cream); overflow:hidden; }
.bigstat__bg{ position:absolute; inset:0; z-index:0; }
.bigstat__bg img,.bigstat__bg video{ width:100%; height:100%; object-fit:cover; }
.bigstat__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,25,14,.5),rgba(20,25,14,.34) 45%,rgba(20,25,14,.6)); }
.bigstat__in{ position:relative; z-index:2; padding:0 1.5rem; }
.bigstat__eyebrow{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.1rem,2vw,1.6rem); color:rgba(244,239,229,.92); margin-bottom:1rem; }
.bigstat__num{ font-family:var(--serif); font-weight:300; font-size:clamp(5rem,17vw,15rem); line-height:.9; letter-spacing:-.02em; display:inline-flex; align-items:baseline; gap:.2em; }
.bigstat__num small{ font-size:.22em; font-weight:400; letter-spacing:.04em; }
.bigstat__cap{ margin-top:1.4rem; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,239,229,.7); }

/* ---- highlights N° ---- */
.hl__head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.hl__head .eyebrow{ justify-content:center; }
.hl{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem) clamp(2rem,4vw,4rem); }
.hl__item{ border-top:1px solid var(--line); padding-top:1.2rem; display:block; transition:.4s var(--ease); }
.band-dark .hl__item{ border-top-color:var(--line-light); }
.hl__item:hover{ border-top-color:var(--gold); }
.hl__top{ display:flex; align-items:center; justify-content:space-between; }
.hl__n{ font-family:var(--serif); font-size:1.4rem; }
.hl__n sup{ font-family:var(--sans); font-size:.5rem; letter-spacing:.1em; vertical-align:.9em; margin-right:.2em; color:var(--gold); }
.hl__arrow{ width:2.1rem; height:2.1rem; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:.8rem; transition:.4s var(--ease); }
.band-dark .hl__arrow{ border-color:var(--line-light); }
.hl__item:hover .hl__arrow{ background:var(--gold); border-color:var(--gold); color:#fff; }
.hl__desc{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--ink-soft); margin:1.1rem 0 .4rem; min-height:2.6em; }
.band-dark .hl__desc{ color:rgba(244,239,229,.6); }
.hl__title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.04; }

/* ---- horizontal image strip ---- */
.hstrip{ overflow:hidden; }
.hstrip__track{ display:flex; gap:clamp(.6rem,1.2vw,1.1rem); width:max-content; will-change:transform; }
.hstrip__track figure{ flex:none; width:clamp(280px,34vw,520px); aspect-ratio:4/3; overflow:hidden; }
.hstrip__track img{ width:100%; height:100%; object-fit:cover; }

/* ---- subpage hero (nhỏ hơn) ---- */
.subhero{ position:relative; height:74svh; min-height:460px; display:grid; place-items:center; text-align:center; color:var(--cream); overflow:hidden; }
.subhero__bg{ position:absolute; inset:0; z-index:0; }
.subhero__bg img,.subhero__bg video{ width:100%; height:100%; object-fit:cover; }
.subhero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,25,14,.4),rgba(20,25,14,.3) 50%,rgba(20,25,14,.55)); }
.subhero__in{ position:relative; z-index:2; padding:0 1.5rem; }

@media (max-width:980px){
  .menu{ grid-template-columns:1fr; } .menu__media{ display:none; }
  .hl{ grid-template-columns:1fr; gap:0; } .hl__item{ padding:1.2rem 0; }
  .hl__desc{ min-height:0; }
}

/* ---------- Astro: image-mask + split-text reveal (chất Ayana) ---------- */
.reveal-mask{ clip-path: inset(0% 0% 100% 0%); }
.js [data-split]{ visibility:hidden; }          /* JS sẽ hé lộ; no-JS vẫn hiện */
[data-split] .word{ display:inline-block; }
/* page transition: fade nhẹ giữa các trang (View Transitions) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vt-out .35s var(--ease) both; }
  ::view-transition-new(root){ animation:vt-in .45s var(--ease) both; }
  @keyframes vt-out{ to{ opacity:0; } }
  @keyframes vt-in{ from{ opacity:0; } }
}