/* =============================================================================
 * chande-www — CSS dùng chung cho 3 trang demo
 * Thang đo giống hệt file hiệu ứng: px của bản thiết kế khổ 1920 ÷ 16 = rem,
 * vì :root đặt font-size = clamp(1440px, 100vw, 1920px) / 120.
 * ========================================================================== */
:root{
  --cream:#f4f3eb;
  --panel:#1b2625;
  --green:#245535;
  --lime:#68f12b;
  --ink:#0f1513;
  --bar:5rem;                 /* 80px của bản thiết kế khổ 1920 */
  font-size:calc(clamp(1440px, 100vw, 1920px) / 120);
}
*{box-sizing:border-box}
/* Khoá chiều ngang: trên iPhone phần tử nào lọt ra ngoài mép là cả trang kéo sang hai bên được.
   clip (không phải hidden): không biến html / body thành khung cuộn -> sticky + Lenis vẫn chạy theo
   cửa sổ. text-size-adjust: Safari iOS không tự phóng chữ khi xoay ngang. */
html, body{overflow-x:clip; overscroll-behavior-x:none; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--green);
  font-family:'Phudu',ui-sans-serif,system-ui,sans-serif; font-weight:600;
  text-transform:uppercase; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
/* chỉ cho trình đọc màn hình + máy tìm kiếm (tiêu đề / mô tả trang không hiện trên giao diện) */
.sr-only{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
/* CMS "Xoá ảnh" gắn thuộc tính hidden — thắng mọi display:block riêng của ảnh */
[hidden]{display:none !important}

/* ---- Thử nghiệm "nền tối khi 4 ảnh thành hàng" ----
   chande-hero.js gắn html.hero-row-dark khi 4 ảnh hero dính thành một hàng (chỉ
   khi bật CONFIG.darkOnRow). Nền kem -> tối, chữ tối -> kem; cụm chữ trôi giữ
   màu sáng. Đổi màu có chuyển tiếp nên không giật.
   CHỈ phủ .travel (hero → hết dải màu kem→đen), KHÔNG đổi nền body: các section
   từ dải effect trở xuống giữ nền kem như cũ. */
.travel, .hero{transition:background-color .6s ease}
.hs-intro__a, .hs-intro__b, .hero__title, .hero__year, .hero__sub, .hero__intro-text{transition:color .6s ease}
.chip::after{transition:background-color .6s ease}
.hero__mark{transition:filter .6s ease}
html.hero-row-dark .travel, html.hero-row-dark .hero{background-color:#0f1513}
html.hero-row-dark .hs-intro__a, html.hero-row-dark .hs-intro__b,
html.hero-row-dark .hero__title, html.hero-row-dark .hero__year{color:var(--cream)}
html.hero-row-dark .hero__sub{color:#c9d1cc}
html.hero-row-dark .chip::after{background-color:#0f1513}
html.hero-row-dark .hero__mark{filter:invert(1)}
html.hero-row-dark .travel__col.is-on-light .hero__intro-text{color:#e1e0d8}

/* Trang bắt đầu ngay dưới thanh header (thanh do chande-loading.js dựng). */
.page{min-height:100vh; padding-top:var(--bar)}

/* ---- Font riêng của hero ----
   Phudu SemiBold / Bold do hai file hiệu ứng tự khai báo; hero cần thêm Medium
   (500), Geist Mono cho nhãn VIDEO RECAP, và Google Sans Flex chỉ cho ký tự ©
   (file đã cắt subset còn đúng một glyph). */
/* Dấu cho bản vá text-box (chande-textbox.js): phần tử nào có `text-box:trim-both cap alphabetic`
   thì kèm --tb:1. Không kế thừa xuống con. Trình duyệt chưa hiểu text-box (Safari < 18.2) thì JS
   đọc dấu này và bù margin âm cho đúng phần lẽ ra bị cắt. */
@property --tb{syntax:'*'; inherits:false}
@font-face{font-family:'Phudu';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Phudu-Medium-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Phudu';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Phudu-Medium-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Phudu';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Phudu-Medium-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
/* Phudu SemiBold (thanh menu) + Bold (mọi tiêu đề lớn): trước đây CHỈ do JS chèn lúc chạy (chande-loading.js /
   chande-transition.js) -> trình duyệt biết cần tải muộn, mạng chậm là tiêu đề hiện font dự phòng (Medium in đậm
   giả) hoặc trắng chữ tới 3 s ("có lúc không nhận font"). Khai báo ở đây + preload bản latin trong <head> mỗi
   trang; khai báo trong JS giữ nguyên (y hệt, không xung đột). */
@font-face{font-family:'Phudu';font-style:normal;font-weight:600;font-display:block;
  src:url('../fonts/Phudu-SemiBold-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Phudu';font-style:normal;font-weight:600;font-display:block;
  src:url('../fonts/Phudu-SemiBold-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Phudu';font-style:normal;font-weight:600;font-display:block;
  src:url('../fonts/Phudu-SemiBold-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Phudu';font-style:normal;font-weight:700;font-display:block;
  src:url('../fonts/Phudu-Bold-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Phudu';font-style:normal;font-weight:700;font-display:block;
  src:url('../fonts/Phudu-Bold-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Phudu';font-style:normal;font-weight:700;font-display:block;
  src:url('../fonts/Phudu-Bold-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/GeistMono-Medium-latin.woff2') format('woff2')}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/GoogleSansFlex-Bold-copyright.woff2') format('woff2'); unicode-range:U+00A9}

/* =============================================================================
 * HERO — Figma node 513:33865 ("Full Hero" 1920×1277, "1 Viewport" 1920×1080)
 *
 * Hình học: `--u` = 1px của bản thiết kế khổ 1920, tính theo bề rộng hero
 * (100cqw), nên các cột luôn thẳng hàng với 4 ô header vốn chia theo %.
 * Chữ vẫn dùng rem như phần còn lại của site.
 * Toạ độ y ở đây = y Figma - 80 (stage bắt đầu ngay dưới header).
 *
 *   cột   0 ─ 258 ─ 492 ─ 726 ─ 960 ─ 1194 ──────── 1920   (lưới 8 cột, lề 24)
 *   MỌI mép dọc đi theo đúng lưới này và trùng mép 4 ô header (492/960/1428);
 *   Figma lẫn 493 / 961 / 235 / 233 do làm tròn — dùng số đó là lệch 1–2px.
 *   ảnh 1 [258..492]  y 0      ảnh H + tên 56      (H = --img % viewport, 25% = 270)
 *   ảnh 2 [492..726]  y H      = mép trên thanh tên ảnh 1
 *   ảnh 3 [726..960]  y 2H     = mép trên thanh tên ảnh 2
 *   ảnh 4 [960..1194] y 3H     = mép trên thanh tên ảnh 3
 *   (cùng một rule cho cả 4 ảnh; mảng xanh phải + đáy nửa kem bám mép trên ảnh 4)
 * H chỉnh được trong bảng setting (phím H) -> tab Hero home.
 * ========================================================================== */
/* KHÔNG đặt container-type / position ở .hero: containment biến .hero thành khung
   chứa của mọi con absolute, cụm chữ (.travel__col) sẽ không trôi ra khỏi hero
   được. --u tính theo .page (cùng bề rộng). */
.hero{background:var(--cream)}
.hero__stage{
  --u:calc(100cqw / 1920);
  --fold:calc(100svh - var(--bar));       /* phần hero lộ ra ở viewport đầu */
  /* Chiều cao ẢNH (không tính thanh tên 56), chung cho cả 4 ô, tính bằng % chiều
     cao viewport đầu. 25% = 270 / 1080 như Figma. chande-hero.js ghi đè từ
     CONFIG.imageHeight; mọi vị trí bên dưới đều suy ra từ số này. */
  --img:25; --cap:56;
  --hi:calc(var(--img) * 1svh);
  --y3:calc(2 * var(--hi));   /* mép trên ảnh 3 + nền tối + thanh process */
  --y4:calc(3 * var(--hi));   /* mép trên ảnh 4 + mảng xanh phải */
  position:relative;
  /* Ít nhất đủ chỗ cho ảnh 4; thường thì cao hơn viewport đầu đúng 197 như Figma. */
  height:max(
    calc(4 * var(--hi) + var(--cap) * var(--u)),
    calc(var(--fold) + 197 * var(--u)));
}
.hero img{display:block}

/* ---- Nền ---- */
/* ---- Effect xanh (chande-field.js) ----
   Canvas WebGL vẽ preset gradient-studio. Ảnh tĩnh làm nền dự phòng khi không có
   WebGL: luôn khớp BỀ RỘNG (đủ 7 cột), chỉ lặp/cắt theo chiều dọc. */
.field{
  position:relative; overflow:hidden;
  background:#000 url('../img/home/field-tile.webp') center top / 100% auto repeat-y;
}
.field__gl{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}
/* Gộp canvas: một canvas phủ cả root, vẽ mọi vùng [data-field] bên trong. Khi
   canvas đã chạy, các vùng thành ô trong suốt để lộ canvas phía dưới. */
.field-root.is-live .field{background:none}
/* Vùng đứng lẻ (tự làm root của chính nó — dải strip, footer…): lớp is-live gắn lên CHÍNH
   nó nên quy tắc trên không bắt. Canvas phóng từ độ phân giải thấp hơn + mép phải / dưới
   cố ý vẽ hụt (không lấn khối bên cạnh) -> điểm ảnh mép hơi trong: để ảnh dự phòng xanh
   thì thành vạch xanh, để trống thì thành vạch nền kem. Nền đen = màu khe giữa các viên
   -> mép liền với khe, không thấy vạch. */
.field.is-live{background:#000}

.hero__field{position:absolute}
.hero__field--a{left:0; top:0; width:calc(492 * var(--u)); height:var(--y3)}
.hero__field--b{left:calc(492 * var(--u)); top:0; width:calc(468 * var(--u)); height:var(--y3)}
/* Mảng xanh phải: từ mép trên ảnh 4, cao ĐÚNG bằng ảnh 4 (ảnh + thanh tên) — nằm
   dưới ảnh nên ảnh 4 sticky đi lên thì chỗ nó để lại vẫn là effect xanh. */
.hero__field--c{left:calc(960 * var(--u)); right:0; top:var(--y4); height:calc(var(--hi) + var(--cap) * var(--u))}
/* Dải viên thuốc (pillrun như section Strip — kiểu viên ở home.css) lấp phần dưới
   ảnh 4 + mảng xanh phải, tới đáy hero. Cao theo khoảng trống đó (đổi theo màn),
   hàng viên căn giữa dọc, chạy sát hai mép (không đệm trái / phải che viên). */
.hero__pills{position:absolute; left:calc(960 * var(--u)); right:0;
  top:calc(var(--y4) + var(--hi) + var(--cap) * var(--u)); bottom:0;
  display:flex; align-items:center; background:#1b2524; overflow:hidden}
.hero__pills .pillrun{flex:1; min-width:0; height:calc(56 * var(--u))}
/* Mảng B lật dọc như node Figma. */
.hero__field--b{transform:scaleY(-1)}

/* Hai mảng tối: màu phẳng (Kaixa 2026-10-16 tắt Dither — muốn bật lại thì thêm data-hero-dither="#màu"
   data-levels="8" vào 2 thẻ ở index.html, chande-hero.js gắn tile; nhớ trả lại image-rendering:pixelated
   + will-change:transform cho tile khỏi nháy khi cuộn) */
.hero__dark{
  position:absolute; left:0; top:var(--y3); bottom:0; width:calc(960 * var(--u));
  background-color:#182220;
}
.hero__dark--col{width:calc(492 * var(--u)); background-color:#131313}

/* ---- Cột sticky ----
   Mỗi cột chạy từ chỗ của nó tới đáy hero; con bên trong `sticky`, nên khi cuộn
   4 ảnh bậc thang lần lượt dừng dưới header thành một hàng, rồi theo đáy hero
   đi ra. */
.hero__col{position:absolute; bottom:0; pointer-events:none}
.hero__col > *{pointer-events:auto}
.hero__col--1{left:calc(258 * var(--u)); width:calc(234 * var(--u)); top:0}
.hero__col--2{left:calc(492 * var(--u)); width:calc(234 * var(--u)); top:var(--hi)}
.hero__col--3{left:calc(726 * var(--u)); width:calc(234 * var(--u)); top:var(--y3)}
.hero__col--4{left:calc(960 * var(--u)); width:calc(234 * var(--u)); top:var(--y4)}
.hero__col--1 > *, .hero__col--2 > *, .hero__col--3 > *, .hero__col--4 > *{position:sticky; top:var(--bar)}

/* ---- Ô ảnh ---- */
.hero-card{margin:0; --cap-bg:#236c3c; --cap-ink:#e9e2c8}
.hero__col--1 .hero-card{--cap-bg:#182220}
.hero__col--3 .hero-card{--cap-bg:#68f12b; --cap-ink:#102a19}
.hero-card__media{position:relative; height:var(--hi); overflow:hidden; background:#fff}
/* ô 4 (cột 4): mép trên / mép phải hay rơi vào nửa pixel -> mảng gạch xanh phía sau lộ thành
   một đường mảnh. Nới khung ảnh 1px lên trên + sang phải để phủ kín (không đổi bố cục). */
@media (min-width:900px){ .hero__col--4 .hero-card__media{margin:-1px -1px 0 0; height:calc(var(--hi) + 1px)} } /* chỉ desktop: mobile ô ảnh cao theo lưới 2×2, không có --hi */
.hero-card__media > img,
.hero-card__media > canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-card__cap{
  display:flex; align-items:center; gap:calc(16 * var(--u));
  height:calc(var(--cap) * var(--u)); padding:0 calc(26 * var(--u));
  background:var(--cap-bg); color:var(--cap-ink);
  font-weight:500; font-size:.875rem; line-height:.98; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden;
  /* Mép dưới ảnh hay rơi vào nửa pixel (--hi lẻ) -> trình duyệt pha mép ảnh với
     nền trắng của khung thành một đường kẻ mảnh. Thanh tên phủ lên 1px cuối của
     ảnh bằng chính màu của nó (bóng không chiếm chỗ, bố cục không xê dịch). */
  position:relative; z-index:1; box-shadow:0 -1px 0 var(--cap-bg);
}
.hero-card__cap > span{display:block}
/* Block reveal khi đổi người (chande-hero.js swapCaption): khối lime như màn
   loading; trên thanh tên nền lime thì khối dùng màu chữ tối cho thấy được. */
.cap-w{position:relative}
.cap-w__b{position:absolute; inset:-.18em -.12em; background:var(--cap-block, var(--lime)); transform:scaleX(0); pointer-events:none}
.hero__col--3 .hero-card{--cap-block:#102a19}

/* ---- Thanh process: nằm yên ở mép trên nền tối, cuộn theo trang (không sticky) ---- */
.hero__col--progress{left:0; top:var(--y3); bottom:auto; width:calc(492 * var(--u))}
.hero__progress{
  position:relative;
  height:calc(56 * var(--u)); background:#1c2e22; overflow:hidden;
}
.hero__progress > span{
  position:absolute; inset:0; background:var(--lime);
  transform-origin:0 50%; transform:scaleX(.8171);   /* 402 / 492 như Figma */
}

/* ---- Cụm chữ trái + video recap: trôi theo đáy viewport ----
   .travel bọc hero → hết dải màu kem → đen. Cột chạy suốt khung, cụm dồn đáy cột
   và `sticky; bottom: 24`: lúc đầu bám đáy viewport cách 24, cuộn tới khi đáy
   khung lên tới nơi thì dừng ở đáy dải màu, vẫn cách 24. */
.travel{position:relative}
.travel__col{--u:calc(100cqw / 1920);
  position:absolute; left:calc(24 * var(--u)); top:0; bottom:0; width:calc(234 * var(--u)); z-index:5;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:calc(24 * var(--u));
  pointer-events:none}
.travel__intro{position:sticky; bottom:calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(52 * var(--u)); pointer-events:auto}
.hero__intro-text{
  display:flex; flex-direction:column; gap:1.5rem;
  /* Figma dùng mix-blend difference trên nền #131313 phẳng = đúng màu #e1e0d8.
     Ghi thẳng màu đó, khỏi tốn một lớp hoà trộn phải ghép lại mỗi khung cuộn. */
  color:#e1e0d8; transition:color .25s ease;
  font-weight:500; font-size:1rem; line-height:calc(.98em + 2px); letter-spacing:-.02em;
  white-space:nowrap;
}
.hero__intro-text p{margin:0; text-box:trim-both cap alphabetic; --tb:1}
/* màn thấp: cụm chữ sẽ đè thanh process -> ẩn dòng ngày · địa điểm (chande-home.js gắn .is-short) */
.travel__col.is-short .hero__intro-text p:first-child{display:none}
/* Hai lớp chữ chồng khít (chande-home.js dựng): lớp sáng giữ phần TRÊN mép
   dưới hero (--split, px tính từ đỉnh khối chữ), lớp tối giữ phần DƯỚI -> chữ
   đổi màu đúng ranh giới nền, kể cả giữa một dòng. */
.hero__intro-text{position:relative}
.hero__intro-text > .it-light, .hero__intro-text > .it-dark{display:flex; flex-direction:column; gap:1.5rem}
.hero__intro-text > .it-light{color:#e1e0d8; clip-path:inset(0 0 calc(100% - var(--split, 100%)) 0)}
.hero__intro-text > .it-dark{position:absolute; inset:0; color:#0e1813; clip-path:inset(var(--split, 100%) 0 0 0); pointer-events:none}
.hero__recap{position:relative; width:100%; height:calc(140 * var(--u)); margin:0; overflow:hidden}
.hero__recap img, .hero__recap video{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 33%}
.hero__recap figcaption{
  position:absolute; left:0; bottom:0; padding:.5rem;
  background:var(--lime); color:var(--ink);
  font-family:'Geist Mono',ui-monospace,monospace; font-weight:500;
  font-size:.875rem; line-height:.96; letter-spacing:-.02em;
  text-box:trim-both cap alphabetic; --tb:1;
  transition:background-color .25s ease, color .25s ease;
}
/* hover / bấm: nhãn đảo màu (nền mực, chữ lime) như nút; ảnh video tối nhẹ */
.hero__recap{cursor:pointer}
.hero__recap video, .hero__recap img{transition:filter .3s ease}
.hero__recap:hover figcaption{background:var(--ink); color:var(--lime)}
.hero__recap:hover video, .hero__recap:hover img{filter:brightness(.85)}
.hero__recap:active figcaption{background:#000}

/* ---- SCROLL MORE: bám đáy viewport cách 24px cho tới khi hết hero ---- */
.hero__col--scroll{
  left:calc(726 * var(--u)); top:var(--y3);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:calc(24 * var(--u));
}
.hero__scroll{
  position:sticky; bottom:calc(24 * var(--u));
  display:flex; align-items:center; gap:1rem;
  color:var(--cream); font-weight:500; font-size:1rem; line-height:.98; letter-spacing:-.02em;
  white-space:nowrap;
}
.hero__scroll > span:first-child{text-box:trim-both cap alphabetic; --tb:1}
.hero__dots{
  display:flex; align-items:center; gap:.5rem; height:calc(.6875rem + 2px); margin-block:-1px; padding:0 .5rem; /* cao thêm 1px trên + 1px dưới; margin âm giữ nguyên cao hàng -> chữ Scroll more không bị đẩy lệch */
  border:1px solid rgba(244,243,235,.2); border-radius:999px;
}
.hero__dots img{width:.25rem; height:.25rem; animation:hero-dot 1.6s ease-in-out infinite}
.hero__dots img:nth-child(2){animation-delay:.2s}
.hero__dots img:nth-child(3){animation-delay:.4s}
@keyframes hero-dot{0%,60%,100%{opacity:1} 30%{opacity:.25}}

/* ---- Nửa phải: logo + tiêu đề, padding 32 ---- */
.hero__panel{
  position:absolute; left:calc(960 * var(--u)); right:0; top:0; height:var(--y4);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(40 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
}
.hero__mark{width:calc(104 * var(--u)); height:auto}
/* Khối tiêu đề chạy từ mép trên ảnh 3 (--y3) tới mép trên ảnh 4 (--y4), lưới 2 hàng:
     hàng 1 — tiêu đề: đỉnh cap của chữ trùng đúng mép trên ảnh 3 (text-box trim)
     hàng 2 — phần còn lại tới ảnh 4: dòng phụ căn GIỮA khoảng này; ©26 giữ chỗ
              cũ, chân chữ cách ảnh 4 đúng 32
   Div bọc tiêu đề + dòng phụ để `display: contents` cho cả hai vào thẳng lưới. */
.hero__headline{
  position:absolute; left:calc(32 * var(--u)); right:calc(32 * var(--u)); top:var(--y3); height:var(--hi);
  display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr;
}
.hero__headline > div{display:contents}
.hero__title{grid-column:1; grid-row:1}
.hero__sub{grid-column:1; grid-row:2; align-self:center}
/* (©26) giữ chỗ cũ, tách khỏi lưới: chân chữ cách mép trên ảnh 4 đúng 32, mép
   phải 32 (padding cũ của panel). Tách ra để tiêu đề cao cỡ nào nó cũng không bị
   lưới đẩy lệch. */
.hero__year{position:absolute; right:0; bottom:calc(32 * var(--u))}
.hero__title,
.hero__year{
  margin:0; color:#000; font-weight:700;
  /* màn thấp (khung tiêu đề = --hi, 25% chiều cao màn): 3 dòng tiêu đề cao 2.14em (đỉnh cap -> chân dòng cuối)
     tràn xuống ảnh 4 / mảng gạch -> co chữ cho chân dòng cuối cách đáy khung đúng lề trái (32u); màn đủ cao
     giữ cỡ cũ. (©26) co theo để cùng cỡ. Mobile đặt cỡ riêng bên dưới. */
  font-size:min(6.6687rem, calc((var(--hi) - 32 * var(--u)) / 2.14));
  line-height:.72; letter-spacing:-.04em;
  text-box:trim-both cap alphabetic; --tb:1;
}
.hero__year{white-space:nowrap}
.hero__year span{
  font-family:'Google Sans Flex','Phudu',sans-serif; font-size:.645em; letter-spacing:0;
  /* © nằm treo: đỉnh glyph (ascent .73 của cỡ nhỏ) chạm đỉnh cap của số 26
     (.712em cỡ lớn) -> nâng (.712 - .645 × .733) / .645 ≈ .37em */
  vertical-align:.37em;
}
.hero__org{display:none}
.hero__sub{
  margin:0; color:#102a19;
  font-weight:500; font-size:1rem; line-height:.98; letter-spacing:-.02em;
  text-box:trim-both cap alphabetic; --tb:1;
}
/* Màn ≤ 1920: tiêu đề hero to theo khổ màn còn khoảng trống dưới nó thấp đi -> dòng phụ
   chồng lên tiêu đề / ảnh 4. Ẩn hẳn (chỉ hiện ở màn rộng hơn khổ thiết kế). */
@media (max-width:1920px){ .hero__sub{display:none} }
/* MacBook 16" (bề rộng mặc định 1728px) trở xuống: khung tiêu đề thấp, dòng phụ
   dính sát mép dưới -> ẩn. */
@media (max-width:1728px){
  .hero__sub{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero__dots img{animation:none}
}

/* ---- Page A / Page B: khung ảnh demo ---- */
/* Ảnh do bảng devtools nạp vào, ghi lên hai biến này ở :root nên sống sót qua
   mọi lần Barba swap container. */
.shot{
  min-height:calc(100vh - var(--bar));
  background:var(--panel) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.shot--a{background-image:var(--shot-a, none)}
.shot--b{background-image:var(--shot-b, none); background-color:var(--cream)}
/* Nhãn chỉ hiện khi CHƯA nạp ảnh. Cờ đặt ở <html> nên sống sót qua Barba swap. */
.shot__ph{
  font-size:3rem; line-height:1; letter-spacing:-.01em; opacity:.35;
  padding:1.5rem; text-align:center;
}
.shot--a .shot__ph{color:#f5f0e3}
.shot--b .shot__ph{color:var(--green)}
[data-shot-a] .shot--a .shot__ph,
[data-shot-b] .shot--b .shot__ph{display:none}

/* ---- Responsive cơ bản, cùng mốc với hiệu ứng: 900 / 600 ---- */
@media (max-width:899px){
  :root{font-size:11px; --bar:64px; /* thanh header mobile cao 64 (chande-loading.js) */
    /* --vp = chiều cao THẤY ĐƯỢC của màn: trừ thanh địa chỉ / thanh công cụ trình duyệt mobile.
       100svh là vùng nhỏ nhất theo trình duyệt; --ih = innerHeight lúc trang mở (chande-loading.js
       ghi, chỉ đổi khi xoay máy) — Safari iOS thanh nổi có lúc svh vẫn tính cả phần dưới thanh,
       lấy cái nhỏ hơn. Mọi section mobile "một màn" = --vp − header. */
    --vp:min(100svh, var(--ih, 100svh));
    /* --s = 1px của design mobile (khung 375 × 748 dưới header), co theo cạnh BÓ hơn: bề ngang / 375
       hoặc chiều cao thấy được / 748. iPhone SE (thanh Safari hiện, ~375 × 548) -> nhỏ lại theo chiều
       cao; Pro Max -> to theo bề ngang nhưng không quá màn. Mọi khối "một màn" đo bằng --s. */
    --s:min(calc(100vw / 375), calc((var(--vp) - var(--bar)) / 748))}
  .shot__ph{font-size:2rem}

  /* Hero mobile — Figma node 620:12593 (khổ 375). Section 1: lưới 2×2 ảnh (216 + thanh tên 48)
     ngay dưới header, rồi logo + tiêu đề trên nền kem. Section 2 (nền #182220): dải gạch neon
     168 trên cùng (hero__field--c), dòng "Special event…", chữ giới thiệu, video recap. Bỏ sticky,
     hai mảng xanh trên, mảng tối, thanh process, scroll more. */
  .hero__stage{height:auto; display:grid; grid-template-columns:1fr 1fr; background:#182220}
  .hero__stage > *{position:relative; inset:auto; width:auto; height:auto}
  /* Canvas effect xanh (chande-field.js) phải nằm NGOÀI luồng lưới: nó vẽ theo
     cỡ khung, khung lại cao theo nó -> vòng lặp tới 16.7 triệu px (đã dính). */
  .hero__stage > .field__gl{position:absolute; inset:0; width:100%; height:100%}
  .hero__stage > *{min-width:0}
  .hero__field--a, .hero__field--b, .hero__dark, .hero__col--scroll, .hero__pills, .hero__col--progress{display:none}
  .hero__col{position:relative; top:auto; bottom:auto; left:auto; width:auto; height:auto; order:1}
  .hero__col > *{position:static}
  /* Section 1 = đúng một màn: header + 2 hàng ảnh (ảnh + thanh tên 48) + khối tiêu đề. Màn = 100svh
     (vùng nhìn thấy KHI thanh địa chỉ / thanh công cụ trình duyệt mobile đang hiện). Khối tiêu đề
     co theo bề ngang như Figma khổ 375 (220 cao, chữ 56) -> máy rộng hơn chữ to theo, ảnh lấy phần còn lại */
  .hero{--hp:calc(220 * var(--s)); --capH:max(34px, calc(48 * var(--s)))}
  .hero-card__media{aspect-ratio:auto; height:max(60px, calc((var(--vp) - var(--bar) - var(--hp)) / 2 - var(--capH)))}
  .hero-card__cap{height:var(--capH); padding:0 calc(16 * var(--s)); gap:calc(16 * var(--s)); font-size:max(11px, calc(14 * var(--s)))}
  .hero-card__cap > span:first-child{width:calc(20 * var(--s)); flex:none}
  .hero__panel{grid-column:1 / -1; order:2; height:var(--hp); background:var(--cream); gap:0; padding:calc(16 * var(--s)) 12px}
  .hero__mark{width:calc(46.4 * var(--s))}
  .hero__headline{position:static; height:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px}
  .hero__headline > div{display:block}
  .hero__sub{display:none}
  .hero__year{position:static}
  .hero__title, .hero__year{font-size:calc(56 * var(--s))}
  html.is-safari .hero__title{line-height:.78} /* Safari mobile: dòng thoáng hơn (.72) cho khỏi dính nhau */
  /* Màn THẤP (iPhone SE / mini khi thanh Safari đang hiện, vùng thấy được < ~620): ưu tiên tiêu đề sự
     kiện ở cỡ đủ (theo bề ngang như Figma) — bỏ thanh tên dưới ảnh, 4 ảnh lấy phần còn lại */
  @media (max-height:620px){
    .hero{--hp:calc(220 * 100vw / 375)}
    .hero-card__cap{display:none}
    .hero-card__media{height:max(60px, calc((var(--vp) - var(--bar) - var(--hp)) / 2))}
    .hero__mark{width:calc(46.4 * 100vw / 375)}
    .hero__panel{padding:16px 12px}
    .hero__title, .hero__year{font-size:calc(56 * 100vw / 375)}
  }
  .hero__field--c{grid-column:1 / -1; order:3; height:calc(168 * var(--s))}
  /* Section 2 = đúng một màn DƯỚI thanh header dính (header che 64 trên cùng): dải neon 168 + phần còn lại; dòng "Special event…" sát dưới dải,
     chữ giới thiệu + video recap dồn đáy màn */
  .travel__col{position:static; width:auto; min-height:calc(var(--vp) - var(--bar) - 168 * var(--s)); padding:calc(16 * var(--s)) 12px 12px; background:#182220} /* đáy video cách mép bằng 2 bên (12px; trước 12 × --s, máy thấp chỉ còn ~10) */
  .travel__intro{position:static; flex:1; gap:calc(24 * var(--s))}
  .hero__org{display:block; margin:0 0 auto; padding-bottom:calc(24 * var(--s)); color:#f4f3eb; font-weight:500; font-size:max(11px, calc(16 * var(--s))); line-height:.98; letter-spacing:-.02em;
    text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
  .hero__intro-text{font-size:max(11px, calc(16 * var(--s))); gap:calc(24 * var(--s)); color:#f4f3eb}
  .hero__intro-text p{text-box:none; --tb:0} /* Figma không cắt sát chữ ở khối này */
  /* nền tối suốt -> chỉ lớp chữ sáng (lớp tối cắt theo mép hero chỉ dùng ở desktop) */
  .hero__intro-text > .it-light{clip-path:none; color:#f4f3eb; gap:calc(24 * var(--s))}
  .hero__intro-text > .it-dark{display:none}
  .hero__recap{width:100%; height:calc(204 * var(--s)); aspect-ratio:auto}
  .hero__recap figcaption{padding:calc(11.7 * var(--s)) calc(16 * var(--s)); font-size:max(11px, calc(14 * var(--s)))}
}
@media (max-width:599px){ :root{font-size:10px} }

/* =============================================================================
 * MENU (nút 4 chấm trên thanh header) — Figma node 603:47667. chande-menu.js dựng.
 * Lưới 12 × 6 ô dưới thanh header (lề 24 hai bên); nằm DƯỚI thanh header (9998).
 * ========================================================================== */
.cmenu{position:fixed; inset:0; z-index:9997; background:#000; color:#f4f3eb; container-type:inline-size;
  clip-path:inset(0 0 100% 0); transition:clip-path .65s cubic-bezier(.76,0,.24,1); overflow:hidden}
.cmenu.is-open{clip-path:inset(0 0 0 0)}
.cmenu__grid{--u:calc(100cqw / 1920); position:absolute; left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:var(--bar); bottom:0;
  display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:repeat(6, 1fr)}
.cmenu__lines{border-left:1px solid rgba(233,226,200,.05); border-top:1px solid rgba(233,226,200,.05); pointer-events:none}
.cmenu__lines i{border-right:1px solid rgba(233,226,200,.05); border-bottom:1px solid rgba(233,226,200,.05)}
.cmenu a{color:inherit; text-decoration:none}

/* ô member: rê vào thì một ĐOÀN DẢI MÀU (bảng màu shape reveal đổi ảnh ở hero) chạy từ dưới
   lên như ở hero — cả đoàn CHUNG một nhịp, các lớp cách nhau đều 14% chiều cao ô nên luôn
   thấy rõ từng băng màu; các dải đi trước trôi ra khỏi mép trên, ẢNH CHÂN DUNG CỦA ĐÚNG
   NGƯỜI ĐÓ là toa cuối, dừng lại phủ kín ô (thu nhẹ 1.12 -> 1). Tên ẩn.
   Mỗi lớp: --y0 (dưới đáy, chưa thấy) -> --y1 (vị trí cuối); quãng đường mọi lớp bằng nhau.
   Trạng thái do chande-menu.js gắn (.is-on), KHÔNG dùng :hover: chuột lướt qua rồi đi thì
   animation vẫn chạy trọn (giữ .is-on tới hết 0.9s + đọng 1s), xong mới TUA NGƯỢC (ảnh
   trượt xuống, dải màu chạy ngược về đáy) -> lướt qua nhiều ô để lại một vệt ảnh nối đuôi. */
.cmenu__member{position:relative; overflow:hidden; margin:1px 0 0 1px}
.cmenu__fx{position:absolute; inset:0; opacity:0; transition:opacity 0s linear .9s}
/* lúc gỡ .is-on: TUA NGƯỢC đúng animation xuất hiện (cùng nhịp, cùng đường cong) — ảnh trượt
   xuống trước, đoàn dải màu chạy ngược xuống theo; xong (.9s) khối mới ẩn */
.cmenu__fx > *{position:absolute; inset:0; width:100%; height:100%; transform:translateY(var(--y0));
  transition:transform .9s cubic-bezier(.65,0,.35,1), scale .9s cubic-bezier(.65,0,.35,1)}
.cmenu__fx > i:nth-child(1){background:#68f12b; --y0:100%; --y1:-70%}
.cmenu__fx > i:nth-child(2){background:#f4f3eb; --y0:114%; --y1:-56%}
.cmenu__fx > i:nth-child(3){background:#236c3c; --y0:128%; --y1:-42%}
.cmenu__fx > i:nth-child(4){background:#c4ff6b; --y0:142%; --y1:-28%}
.cmenu__fx > i:nth-child(5){background:#182220; --y0:156%; --y1:-14%}
.cmenu__fx img{object-fit:cover; --y0:170%; --y1:0%; scale:1.12}
.cmenu__member.is-on .cmenu__fx{opacity:1; transition:opacity 0s}
.cmenu__member.is-on .cmenu__fx > *{transform:translateY(var(--y1)); scale:1;
  transition:transform .9s cubic-bezier(.65,0,.35,1) .15s, scale 1.1s cubic-bezier(.2,.7,.2,1) .5s} /* .15s: ô sáng lên trước rồi mới chạy dải */
.cmenu__member span{position:absolute; left:calc(20 * var(--u)); bottom:calc(20 * var(--u)); color:#838b89;
  font-weight:600; font-size:.875rem; line-height:.9; letter-spacing:-.02em; white-space:nowrap; text-box:trim-both cap alphabetic; --tb:1;
  transition:opacity .35s ease .65s} /* tên hiện lại lúc ảnh đã tua ngược gần hết */
.cmenu__member.is-on span{opacity:0; transition:opacity .1s ease}
/* ô trống: không có ảnh -> đoàn dải màu chỉ quét QUA rồi ra hẳn mép trên, không đọng lớp màu nào thay ảnh */
.cmenu__member--empty .cmenu__fx > i{--y1:calc(var(--y0) - 280%)}

.cmenu__num{align-self:start; padding:calc(15 * var(--u)) calc(16 * var(--u)); color:#fff;
  font-weight:600; font-size:1.25rem; line-height:.9; font-feature-settings:"ornm" 1, "numr" 1; text-box:trim-both cap alphabetic; --tb:1}
/* Become a partner / Register: cả ô 4 cột là nút. Rê vào: nền lime quét từ trái phủ kín ô (chừa
   1px đường kẻ), chữ chuyển đen, 4 chấm 2×2 hiện ở góc trên phải */
.cmenu__big{position:relative; display:flex; align-items:center; margin:1px 0 0 1px; padding:0 calc(20 * var(--u));
  color:#fff; white-space:nowrap; font-weight:700; line-height:.74; letter-spacing:-.04em; transition:color .3s ease;
  /* 96px ở 1920 × 1080; màn hẹp / thấp hơn (iPad ngang, khung xem trước Muzli 1196 × 538–718) thì co theo bề ngang
     (96u) VÀ theo chiều cao ô lưới (ô 1/6 phần dưới header: 96 / 166.7) — cỡ cố định thì chữ tràn sang ô tên */
  font-size:min(6rem, calc(96 * var(--u)), calc((100vh - var(--bar)) * .096));
  font-size:min(6rem, calc(96 * var(--u)), calc((100dvh - var(--bar)) * .096))}
.cmenu__big::before, .cmenu__contact::before{content:''; position:absolute; inset:0; background:var(--lime); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.65,0,.35,1)}
.cmenu__bt{position:relative; text-box:trim-both cap alphabetic; --tb:1}
.cmenu__ln, .cmenu__ln > i{display:block; font-style:normal}
/* rê vào: từng dòng trồi lên lại từ sau mép cắt, dòng sau trễ hơn (cùng kiểu lúc mở menu) */
.cmenu.is-open .cmenu__big:hover .cmenu__ln > i, .cmenu.is-open .cmenu__contact:hover .cmenu__ln > i{animation:cmenu-ln .7s cubic-bezier(.16,1,.3,1) calc(var(--l) * .07s) both}
@keyframes cmenu-ln{from{clip-path:inset(0 -10% 100% -10%); translate:0 60%} to{clip-path:inset(-40% -10% -40% -10%); translate:0 0}}
.cmenu__big .cmenu__arr, .cmenu__contact .cmenu__arr{position:absolute; top:calc(18 * var(--u)); right:calc(18 * var(--u)); width:calc(22 * var(--u)); height:calc(22 * var(--u)); min-width:14px; min-height:14px;
  opacity:0; transition:opacity .2s ease}
.cmenu__ink{position:absolute; inset:0; display:inherit; flex-direction:inherit; align-items:inherit; justify-content:inherit;
  gap:inherit; padding:inherit; color:#000; clip-path:inset(0 100% 0 0); transition:clip-path .45s cubic-bezier(.65,0,.35,1); pointer-events:none}
.cmenu__big:hover .cmenu__ink, .cmenu__contact:hover .cmenu__ink{clip-path:inset(0 0 0 0)}
.cmenu__big:hover::before, .cmenu__contact:hover::before{transform:none}
.cmenu__big:hover .cmenu__arr, .cmenu__contact:hover .cmenu__arr{opacity:1; transition:opacity .3s ease .2s}
.cmenu__social{display:flex; flex-direction:column; justify-content:space-between; padding:calc(26 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  font-weight:600; font-size:1rem; line-height:.9; letter-spacing:-.02em; transition:color .25s}
.cmenu__social > span:last-child{text-box:trim-both cap alphabetic; --tb:1}
/* icon mạng xã hội: 4 chấm 2×2 -> rê vào thành mũi tên ↗ bằng chấm (chande-menu.js ARROW) */
.cmenu__arr{display:block; width:calc(20 * var(--u)); height:calc(20 * var(--u)); min-width:14px; min-height:14px; overflow:visible}
.cmenu__arr circle{transform:translate(var(--dx), var(--dy)); transition:transform .4s cubic-bezier(.3,1.3,.5,1) calc(var(--i) * 25ms)}
.cmenu__social:hover .cmenu__arr circle{transform:none}
.cmenu__contact{position:relative; display:flex; flex-direction:column; justify-content:space-between; margin:1px 0 0 1px;
  padding:calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); color:#fff; transition:color .3s ease}
.cmenu__contact .cmenu__num{position:relative; padding:0; color:inherit}
.cmenu__huge{position:relative; font-weight:700; font-size:min(6.6687rem, calc(106.7 * var(--u)), calc((100dvh - var(--bar)) * .1067)); /* co như .cmenu__big */ line-height:.72; letter-spacing:-.04em; text-box:trim-both cap alphabetic; --tb:1}
.cmenu__social:hover{color:var(--lime)}
/* ô credit (cột 5 hàng cuối): chữ mono mờ như dòng credit ở footer, rê vào neon + giải mã */
.cmenu__credit{display:flex; align-items:flex-end; margin:0; padding:calc(26 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); font-size:.875rem; line-height:1.2; color:rgba(255,255,255,.3)}
.cmenu__credit a{color:inherit; text-decoration:none; transition:color .25s}
.cmenu__credit a:hover{color:var(--lime)}

/* nội dung hiện theo sau lúc lưới trượt mở */
.cmenu__items > *{opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.cmenu.is-open .cmenu__items > *{opacity:1; transform:none; transition-delay:.3s}
.cmenu.is-open .cmenu__items > .cmenu__member{transition-delay:.35s}
/* TIÊU ĐỀ LỚN (Become a partner / Register / Contact): không mờ dần như phần còn lại mà TRỒI LÊN
   từ sau một mép cắt (clip-path + translate), lần lượt — như tiêu đề hero trang chủ. Dùng thuộc
   tính translate riêng để không đụng transform. */
.cmenu .cmenu__items > .cmenu__big{opacity:1; transform:none}
.cmenu .cmenu__ln{clip-path:inset(0 -10% 100% -10%); translate:0 60%; transition:clip-path .35s ease, translate .35s ease}
.cmenu.is-open .cmenu__ln{clip-path:inset(-40% -10% -40% -10%); translate:0 0;
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d, .35s), translate 1.1s cubic-bezier(.16,1,.3,1) var(--d, .35s)}
.cmenu.is-open .cmenu__ln{transition-delay:calc(var(--d) + var(--l) * .1s)} /* từng dòng trồi lên lần lượt */
/* ĐƯỜNG KẺ LƯỚI: mở menu thì từng ô kẻ quét ra từ trái (clip-path), lần lượt theo đường chéo
   trên-trái -> dưới-phải (--ld do chande-menu.js ghi). Nền sáng khi rê chuột (pixel trail) đi qua
   biến --la (đăng ký @property để transition được) -> không giẫm transition của clip-path. */
@property --la{syntax:'<number>'; inherits:false; initial-value:0}
.cmenu__lines{border-color:transparent; transition:border-color .3s ease}
.cmenu.is-open .cmenu__lines{border-color:rgba(233,226,200,.05); transition:border-color .6s ease .25s}
.cmenu__lines i{--la:0; background-color:rgba(28,28,28,var(--la)); clip-path:inset(0 100% 0 0);
  transition:clip-path .3s ease, --la var(--lt, 0s) linear}
.cmenu.is-open .cmenu__lines i{clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.65,0,.35,1) var(--ld, .2s), --la var(--lt, 0s) linear}
/* rê vào ô (MỌI ô của lưới: member, ô trống, ô chữ / nút): nền đen sáng lên một chút ngay, trước
   khi dải màu + ảnh trồi lên (ô member). Rời ô thì tối dần đều ~2.8s -> vệt sáng: ô càng xa / rời
   càng lâu càng nhạt. Sáng ở lớp ô kẻ (.cmenu__lines i) nằm dưới nội dung — chande-menu.js đánh sáng
   từng ô theo toạ độ chuột (style inline: đánh tức thì, đọng, rồi tối dần) */


.cmenu__m{display:none}
/* Mobile (Figma 688:53293, khổ 375): bản riêng — chữ lớn Home / Gallery / About / Contact + Become a partner
   dồn xuống dưới (khoảng trống phía trên co giãn theo chiều cao máy), ô kẻ 2 cột mạng xã hội | Register,
   dòng credit ở đáy. Lưới desktop (ô member, nút lớn) ẩn. Màn thấp (máy ngang) thì cuộn được. */
@media (max-width:899px){
  .cmenu{background:#121212; overflow:auto; overscroll-behavior:contain}
  .cmenu__lines, .cmenu__items{display:none}
  .cmenu__m{display:flex; flex-direction:column; min-height:var(--mvh, var(--vp, 100svh)); padding-top:var(--bar)}
  .cmenu__mmain{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:42px; padding:40px 24px 40px}
  .cmenu__mlinks{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none}
  .cmenu__mlinks a, .cmenu__mpartner{display:block; width:max-content; max-width:100%; color:#f4f3eb; text-decoration:none;
    font-weight:700; font-size:clamp(40px, 12.8vw, 64px); line-height:.78; letter-spacing:-.02em; text-transform:uppercase;
    text-box:trim-both cap alphabetic; transition:color .2s ease; -webkit-tap-highlight-color:transparent}
  .cmenu__mlinks a:active, .cmenu__mpartner:active{color:var(--lime)}
  @media (hover:hover){ .cmenu__mlinks a:hover, .cmenu__mpartner:hover{color:var(--lime)} }
  .cmenu__mgrid{display:grid; grid-template-columns:1fr 1fr; border-block:1px solid rgba(255,255,255,.12)}
  .cmenu__msocial{display:flex; flex-direction:column; gap:16px; margin:0; padding:24px; list-style:none}
  .cmenu__msocial a, .cmenu__mreg, .cmenu__mfoot a{color:#fff; text-decoration:none; -webkit-tap-highlight-color:transparent;
    font-family:'Geist Mono',ui-monospace,monospace; font-weight:500; font-size:14px; line-height:.96; letter-spacing:-.02em; text-transform:uppercase}
  .cmenu__msocial a{display:block; width:max-content; opacity:.3; transition:opacity .2s ease, color .2s ease}
  .cmenu__msocial span, .cmenu__mreg > span{display:block; text-box:trim-both cap alphabetic}
  .cmenu__mreg{display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:24px 20px;
    border-left:1px solid rgba(255,255,255,.12)}
  .cmenu__mreg > span{opacity:.3; transition:opacity .2s ease, color .2s ease}
  .cmenu__mreg .cmenu__arr{width:14px; height:14px; min-width:0; min-height:0; color:#595959; transition:color .2s ease}
  .cmenu__mfoot{display:flex; justify-content:space-between; gap:16px; padding:32px 24px calc(32px + env(safe-area-inset-bottom, 0px))}
  .cmenu__mfoot a{opacity:.3; white-space:nowrap; text-box:trim-both cap alphabetic; transition:opacity .2s ease, color .2s ease}
  .cmenu__msocial a:active, .cmenu__mfoot a:active, .cmenu__mreg:active > span{opacity:1; color:var(--lime)}
  .cmenu__mreg:active .cmenu__arr{color:var(--lime)}
  .cmenu__mreg:active .cmenu__arr circle{transform:none} /* chạm: 4 chấm toả thành mũi tên */
  @media (hover:hover){
    .cmenu__msocial a:hover, .cmenu__mfoot a:hover, .cmenu__mreg:hover > span{opacity:1; color:var(--lime)}
    .cmenu__mreg:hover .cmenu__arr{color:var(--lime)}
    .cmenu__mreg:hover .cmenu__arr circle{transform:none}
  }
  /* mở menu: chữ lớn trồi lên từng dòng (.cmenu__ln — cùng kiểu desktop, trễ theo --d); ô kẻ + credit hiện sau */
  .cmenu__mgrid, .cmenu__mfoot{opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .cmenu.is-open .cmenu__mgrid{opacity:1; transform:none; transition-delay:.6s}
  .cmenu.is-open .cmenu__mfoot{opacity:1; transform:none; transition-delay:.7s}
  /* thanh header lúc mở menu: ô thương hiệu nền tối, chữ kem. Nền ô do animation dock (chande-loading.js) ghi
     — Chrome tô animation màu nền trên GPU, bỏ qua !important -> phủ màu bằng bóng inset (như hover ô nav) */
  .cl.is-done .cl__cell--brand{transition:box-shadow .3s ease}
  .cl.is-done .cl__cell--brand .cl__row{transition:color .3s ease}
  html.menu-open .cl.is-done .cl__cell--brand{box-shadow:inset 0 0 0 100vmax #192423; outline:1px solid #192423; outline-offset:-1px}
  /* chữ + logo kem: đặt ở .cl__row (con, không bị animation) — Safari để animation màu chữ của ô thắng cả !important */
  html.menu-open .cl.is-done .cl__cell--brand .cl__row{color:#f4f3eb}
}

/* khung xem video đầy đủ (chande-home.js — bấm ô có data-video) */
.vbox{position:fixed; inset:0; z-index:10010; display:grid; place-items:center; padding:max(16px, 4vw);
  background:rgba(15,21,19,.94); opacity:0; transition:opacity .35s ease}
.vbox.is-open{opacity:1}
.vbox__frame{width:min(100%, calc((100svh - 2 * max(16px, 4vw)) * 16 / 9)); aspect-ratio:16 / 9; background:#000;
  transform:scale(.96); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.vbox.is-open .vbox__frame{transform:none}
.vbox__frame iframe{display:block; width:100%; height:100%; border:0}
.vbox__close{position:absolute; top:0; right:0; width:var(--bar, 64px); height:var(--bar, 64px); display:grid; place-items:center;
  border:0; padding:0; background:var(--lime); color:#0f1513; cursor:pointer}
.vbox__close svg{width:22px; height:22px; transition:rotate .35s cubic-bezier(.65,0,.35,1)}
.vbox__close:hover svg{rotate:90deg}
.vbox__close:focus-visible{outline:2px solid #fff; outline-offset:-6px}
@media (prefers-reduced-motion:reduce){ .vbox, .vbox__frame, .vbox__close svg{transition:none} }