/* =============================================================================
 * HOME — các section sau hero. Figma "Home-001" (node 336:7199), khổ 1920.
 *
 * Cùng quy ước với hero: `--u` = 1px thiết kế theo bề rộng trang (100cqw / 1920),
 * mọi toạ độ là số px của Figma nhân --u, nên bố cục co giãn y như bản vẽ.
 * Chữ to (display) cũng tính theo --u để giữ đúng chỗ xuống dòng; chữ nhỏ dùng
 * rem như phần còn lại của site.
 *
 * Toạ độ y trong từng section = y trên trang Figma - mép trên của section.
 * File phải nạp ở CẢ BA trang (Barba không thay <head>).
 * ========================================================================== */
.page{container-type:inline-size}
.hs{--u:calc(100cqw / 1920); position:relative; overflow:clip}
.hs img{display:block}
.hs .abs{position:absolute}

/* Chữ dùng chung */
.d106{font-weight:700; font-size:calc(106 * var(--u)); line-height:.78; letter-spacing:-.04em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.d48{font-weight:700; font-size:calc(48 * var(--u)); line-height:.78; letter-spacing:-.02em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.b16{font-weight:500; font-size:1rem; line-height:.98; letter-spacing:-.02em; text-transform:uppercase}
.mono{font-family:'Geist Mono',ui-monospace,monospace; font-weight:500; line-height:.96; letter-spacing:-.02em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.dash{height:1px; background:repeating-linear-gradient(90deg, var(--dash, rgba(0,0,0,.15)) 0 4px, transparent 4px 8px)}

/* Viên thuốc (nút / tab) */
.pills{display:flex; gap:2px}
.pill{display:grid; place-items:center; width:calc(144 * var(--u)); min-width:7rem; height:calc(56 * var(--u)); min-height:2.6rem;
  border-radius:99px; font-size:.875rem; text-decoration:none; color:var(--ink); background:var(--cream); border:0; cursor:pointer}
.pill--lime{background:var(--lime)}
.pill--green{background:#236c3c; color:#f5f0e3}
.pill--off{background:#f5f0e3}
.pills--static .pill{cursor:default; user-select:none}
/* hover nút viên (link): màu mới quét trái -> phải đổ đầy nút, chữ đổi màu theo */
a.pill{--fill:var(--ink); --on:var(--lime); background-image:linear-gradient(var(--fill), var(--fill)); background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  transition:background-size .45s cubic-bezier(.65, 0, .35, 1), color .3s ease}
a.pill--green{--fill:var(--lime); --on:var(--ink)}
a.pill--lime{--fill:#0f1513; --on:var(--lime)}
a.pill:hover, a.pill:focus-visible{background-size:100% 100%; color:var(--on)}

/* Dải viên thuốc chạy ngang (marquee) — chỉ dịch transform, không đụng layout */
.pillrun{overflow:hidden}
.pillrun__track{display:flex; gap:2px; width:max-content; animation:hs-pills 2.92s linear infinite}
.pillrun__track > i{flex:none; width:calc(144 * var(--u)); height:calc(56 * var(--u)); border-radius:99px; background:#f5f0e3}
.pillrun__track > i:nth-child(even){background:var(--lime)}
.pillrun--sm .pillrun__track{gap:calc(1.188 * var(--u))}
.pillrun--sm .pillrun__track > i{width:calc(85.5 * var(--u)); height:calc(33.25 * var(--u))}
@keyframes hs-pills{from{transform:translateX(calc(-292 * var(--u)))} to{transform:none}}
.pillrun--sm .pillrun__track{animation-name:hs-pills-sm}
@keyframes hs-pills-m{from{transform:translateX(calc(-219 * 100vw / 375))} to{transform:none}} /* mobile: 2 viên × (108 + 1.5) */
@keyframes hs-pills-sm{from{transform:translateX(calc(-173.38 * var(--u)))} to{transform:none}}
@keyframes hs-pills-ag{from{transform:translateX(calc(-146 * 100vw / 375))} to{transform:none}} /* agenda mobile: 2 viên × (72 + 1) */

/* Dải tròn đen/trắng chạy ngang — chu kỳ 2 hình tròn = 332 */
.dotrun{overflow:hidden}
.dotrun__track{height:100%; width:calc(100% + 332 * var(--u));
  /* Ô lặp 332 × 164: tròn tối ở cx 82, tròn trắng ở cx 248, bán kính 82 —
     đúng số đo trong dots-band.svg (chu kỳ 2 hình tròn). */
  --r:calc(82 * var(--u));
  background:
    radial-gradient(circle at calc(82 * var(--u)) 50%, var(--dot-a, #112020) calc(var(--r) - .5px), transparent var(--r)),
    radial-gradient(circle at calc(248 * var(--u)) 50%, var(--dot-b, #fff) calc(var(--r) - .5px), transparent var(--r));
  background-size:calc(332 * var(--u)) 100%;
  background-repeat:repeat-x;
  animation:hs-dots 3.32s linear infinite}
@keyframes hs-dots{from{transform:translateX(calc(-332 * var(--u)))} to{transform:none}}
/* Ngoài màn hình thì dừng marquee (chande-home.js gắn .is-off) */
.is-off .pillrun__track, .is-off .dotrun__track{animation-play-state:paused}

/* ---------------------------------------------------------------- 1. INTRO */
.hs-intro{height:calc(675 * var(--u))}
.hs-intro__a{left:calc(492 * var(--u)); top:calc(328 * var(--u)); width:calc(861 * var(--u)); margin:0; color:#000}
.hs-intro__a span{display:block; white-space:nowrap}
.hs-intro__a span:last-child{padding-left:calc(216 * var(--u))}
.hs-intro__b{left:calc(1426 * var(--u)); top:calc(494 * var(--u)); margin:0; color:#000; white-space:nowrap}
.hs-intro__b span{display:block}
.chip{position:absolute; height:calc(74 * var(--u)); border-radius:999px}
.chip::after{content:''; position:absolute; inset:calc(10 * var(--u)) calc(12 * var(--u)); border-radius:999px; background:var(--cream)}
.chip--green{left:calc(492 * var(--u)); top:calc(577 * var(--u)); width:calc(208 * var(--u)); background:var(--lime)}
.chip--yellow{left:calc(995 * var(--u)); top:calc(494 * var(--u)); width:calc(302 * var(--u)); background:#fab700}
.chip--orange{left:calc(1669 * var(--u)); top:calc(494 * var(--u)); width:calc(128 * var(--u)); background:#f65500}
.hs-intro__eye{left:calc(1698 * var(--u)); top:calc(510 * var(--u)); width:calc(70 * var(--u)); height:calc(42 * var(--u)); overflow:hidden; z-index:1}

/* ---------------------------------------------------------------- 2. STORY */
/* Cụm ảnh + cột chữ luôn cao đúng 1 màn trừ thanh menu (--sh). Bên trong khung ảnh
   đo theo --k = --sh / 1028 (chiều cao Figma), canh theo tâm ngang khung nên màn
   thấp / cao thì cả cụm co giãn đều, không bị cắt. */
.hs-story{--sh:calc(100svh - var(--bar)); --k:calc(var(--sh) / 1028); height:calc(280 * var(--u) + var(--sh)); color:#fff}
.hs-story__band{left:calc(492 * var(--u)); right:0; top:0; height:calc(280 * var(--u)); background:#171717} /* sáng hơn #121212 một chút */
.hs-story__band::before{content:''; position:absolute; left:0; top:0; bottom:0; width:calc(936 * var(--u)); background:#182220}
.hs-story__media{left:calc(492 * var(--u)); top:calc(280 * var(--u)); width:calc(936 * var(--u)); height:var(--sh); background:#0f1513; overflow:hidden}
.hs-story__photo{left:0; top:0; width:100%; height:100%; object-fit:cover} /* phủ kín khung 936 — 933 như Figma để hở 3u lộ nền tối thành vạch đen cạnh cột chữ */
.hs-story.is-zoom{height:calc(280 * var(--u) + var(--sh) + var(--story-pin, 0px))}
.hs-story.is-zoom .hs-story__col{top:calc(280 * var(--u)); bottom:auto}
.hs-story__media, .hs-story__col{will-change:transform}
/* Ảnh nổi giữa chỉ dành cho mobile: màn rộng thì ẩn LUÔN, không chờ JS gắn .is-cells — trước đây
   lúc JS chưa chạy / lúc rời trang (destroy() gỡ .is-cells khi trang cũ còn hiện dưới màn chuyển
   trang) ảnh này lòi ra giữa khung */
.hs-story__cell{display:contents}
.hs-story__band-c{position:absolute; visibility:hidden; z-index:1; pointer-events:none}
.hs-story.is-cells .hs-story__cell{display:block; position:absolute; overflow:hidden}
.hs-story.is-cells .hs-story__cell > img{left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
/* KHÔNG will-change trên ảnh: Chrome sẽ vẽ sẵn ảnh ở cỡ gốc rồi phóng lớp đó lên (scale 1.2 của zoom) -> ảnh mờ;
   để trình duyệt vẽ lại đúng cỡ đang hiện cho nét */
.hs-story__small{left:calc(50% - 19 * var(--k)); top:calc(473 * var(--k)); width:calc(62 * var(--k)); height:calc(83 * var(--k)); object-fit:cover; object-position:33% 50%}
.hs-story__col{right:0; bottom:0; width:calc(492 * var(--u))}
.hs-story__panel{position:relative; height:calc(var(--sh) / 2); padding:calc(40 * var(--u)) calc(32 * var(--u)); display:flex; flex-direction:column; justify-content:space-between}
/* Như ô dưới: tiêu đề trên, cụm chữ bám đáy (đệm dưới 40) — trước để gap cố định
   218 từ tiêu đề nên ở màn < 1920 chữ (cỡ rem) tràn xuống, mất đệm dưới. */
.hs-story__panel:first-child{background:#161d1d}
.hs-story__panel:last-child{background:#192423}
.hs-story__panel h3{margin:0; color:#5c6161; transition:color .35s ease; cursor:default}
.hs-story__panel h3:hover{color:#f4f3eb} /* rê chuột vào tiêu đề (06 years / Chande.) thì sáng lên */
.hs-story__text{width:calc(360 * var(--u)); min-width:16rem; min-height:calc(216 * var(--u)); display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem}
/* mờ bằng màu (không dùng opacity) để link bên trong hover sáng neon được */
.hs-story__text p{margin:0; font-size:1rem; color:rgba(255,255,255,.3)}
.hs-story__text div{display:flex; flex-direction:column; gap:calc(32 * var(--u))}
.hs-story__text a{color:inherit; text-decoration:underline; text-underline-offset:.15em; transition:color .25s}
.hs-story__text a:hover{color:var(--lime)}
/* đã có gạch chân sẵn -> bỏ gạch chân chạy của [data-scramble] cho khỏi hai vạch */
.hs-story__text a[data-scramble]{background:none}

/* --------------------------------------------------------- 3. SCHEME (đảo) */
.scheme{display:flex; flex-direction:column}
.scheme > i{height:calc(60 * var(--u))}
.scheme > i:nth-child(1){background:#000}
.scheme > i:nth-child(2){background:#0d1712}
.scheme > i:nth-child(3){background:#1c2e22}
.scheme > i:nth-child(4){background:#2e4a39}
.scheme > i:nth-child(5){background:#3f6b4c}
.scheme > i:nth-child(6){background:#97a180}
.scheme > i:nth-child(7){background:#dad0a7}
.scheme > i:nth-child(8){background:#e9e2c8}
.scheme > i:nth-child(9){background:#f5f0e3}
.scheme--rev{flex-direction:column-reverse}
.hs-scheme{height:calc(540 * var(--u))}
.hs-scheme .scheme{position:absolute; left:calc(492 * var(--u)); right:0; top:0}

/* ---------------------------------------------------------------- 4. STRIP */
.hs-strip{height:calc(96 * var(--u))} /* vừa đúng dải — không chừa khoảng kem trước phong cảnh */
.strip{position:absolute; left:0; right:0; height:calc(96 * var(--u)); display:flex}
.strip__field{width:50%; height:100%}
.strip__run{width:50%; height:100%; background:#1b2524; position:relative}
.strip__run .pillrun{position:absolute; left:calc(24 * var(--u)); top:calc(20 * var(--u)); width:calc(911 * var(--u)); height:calc(56 * var(--u))}

/* ---------------------------------------------------------------- 5. LAND */
.hs-land{height:calc(1028 * var(--u)); overflow:visible; z-index:1}
.hs-land__bg{inset:0; width:100%; height:100%; object-fit:cover}
.hs-land .hs-land__bg--m{display:none} /* nền riêng cho mobile (ảnh dọc) — bật ở khổ < 900px */
/* trong lúc ảnh nền tải: bản thu nhỏ 32px (nhoè) thay cho nền trắng — ảnh thật phủ lên khi xong */
.hs-land__bg{background:#4a3520 url("data:image/webp;base64,UklGRuwAAABXRUJQVlA4IOAAAABQBgCdASogABIAPu1mqk2ppaQiMAgBMB2JQBWDat23/ugA2YB5PdlQ3LdfycTmg2Frvb8OICxNt5zOAAD+7qFPAKbgvVlk+8Ea+lGRfQ+8ao/IZuJLKpHIbIUvLdYro8qxXzBDJJd3JakAXi6Bh1RrznDHVaNZBsS+juPco9IGWy9IcGqeaibAyUSwgm7l47fCvDl5/Qgnpni3e8K4i+luP+GT03gMFEv4H5ZNSn1ckM7X8mNNLJC4msrpT/MzrkF4kzQN2zvgdCYj8LIW72z8N8KRX3qaCXCLShN29BwAAA==") center / cover no-repeat}
/* Ghim 1 màn (chande-home.js gắn .is-staged khi chạy được): section dài thêm
   (số món + 1) nhịp --land-step; khối trong dính ở đỉnh, cao đúng 1 màn. Nhịp đầu
   chỉ ảnh nền, mỗi nhịp sau dán thêm 1 món (data-land-step, trái -> phải), nhịp
   cuối giữ đủ 3 món. Bố cục các món giữ số đo Figma trong khung 1028 đặt giữa màn. */
.hs-land.is-staged{--land-step:55svh; height:calc(100svh + 4 * var(--land-step) + 100svh); overflow:clip}
/* +100svh cuối: phong cảnh (đủ 3 món) đứng yên, section About ngay sau TRỒI LÊN
   phủ lên nó (kéo ngược 100svh, nằm lớp trên, nền kem); About phủ kín màn thì
   phong cảnh mới được thả. */
.hs-land.is-staged + .hs-about{margin-top:-100svh; position:relative; z-index:2; background:var(--cream)}
.hs-land.is-staged .hs-land__pin{position:sticky; top:0; height:100svh; overflow:hidden}
.hs-land__frame{position:absolute; inset:0}
.hs-land.is-staged .hs-land__frame{inset:auto 0; top:50%; height:calc(1028 * var(--u)); transform:translateY(-50%)}
/* Dán sticker: rơi xuống từ to + nghiêng, nảy nhẹ về đúng chỗ */
.hs-land.is-staged [data-land-step]{opacity:0; transform:translate3d(0, calc(-30 * var(--u)), 0) scale(1.22) rotate(-5deg);
  transition:opacity .22s ease, transform .6s cubic-bezier(.2, 1.45, .35, 1)}
.hs-land.is-staged [data-land-step="2"]{transform:translate3d(0, calc(-30 * var(--u)), 0) scale(1.22) rotate(6deg)}
.hs-land.is-staged [data-land-step].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .hs-land.is-staged [data-land-step]{transition:opacity .2s ease; transform:none} }
/* 3 món: x, y = góc trên trái ảnh (chưa xoay), w = bề rộng (cao theo tỉ lệ ảnh), r = độ xoay quanh tâm —
   số đo khổ 1920 (--u); mobile dùng --mx … (khổ 375, --s). Sửa bằng land-edit.html. Xoay đặt ở ảnh (rotate),
   khung ngoài để dành transform cho nhịp dán. */
.hs-land__piece{left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u)); width:calc(var(--w) * var(--u))}
.hs-land__piece > img{display:block; width:100%; height:auto; max-width:none; rotate:calc(var(--r) * 1deg)}
/* Vòng % — tiến độ cuộn trang (chande-home.js ghi số) */

/* ---------------------------------------------------------------- 6. ABOUT */
.hs-about{height:calc(3090 * var(--u)); color:#0e1813}
.hs-about__statement{left:calc(32 * var(--u)); top:calc(40 * var(--u)); width:calc(1629 * var(--u)); margin:0; color:#000;
  font-size:calc(106.699 * var(--u)); line-height:.8}
/* Mỗi câu là một đoạn, tự xuống dòng trong bề rộng 1629 như Figma (chữ và khung
   cùng theo --u nên chỗ xuống dòng giữ nguyên ở mọi khổ). */
.hs-about__statement span{display:block}
.hs-about__statement .gap{height:.8em}
@media (min-width:900px){ .hs-about__statement br.m{display:none} } /* xuống dòng chỉ ở mobile */
.hs-about__grass{left:calc(960 * var(--u)); top:calc(721 * var(--u)); width:calc(359 * var(--u)); height:calc(269 * var(--u)); object-fit:cover}
.hs-about img.hs-about__grass--m{display:none} /* ảnh dọc riêng cho mobile */
.hs-about__note{left:calc(1662 * var(--u)); top:calc(942 * var(--u)); margin:0; white-space:nowrap}
.hs-about__note span{display:block}
.hs-about .dash{position:absolute; left:calc(24 * var(--u)); width:calc(1872 * var(--u))}
.circles{left:calc(24 * var(--u)); top:calc(1030 * var(--u)); width:calc(1872 * var(--u)); display:flex; justify-content:space-between}
.circles > div{display:flex}
.circle{position:relative; width:calc(468 * var(--u)); height:calc(468 * var(--u))}
.circle img{position:absolute}
.circle .ring{inset:0; width:100%; height:100%}
.circle .tex{left:calc(8 * var(--u)); top:calc(8 * var(--u)); width:calc(452 * var(--u)); height:calc(452 * var(--u))}
/* .tex--dim: ảnh vạch vòng 2 / 3 đã có sẵn độ đậm ~20% (alpha tối đa 51) như Figma — KHÔNG
   làm mờ thêm (opacity .2 chồng lên thì vạch chỉ còn ~4%, gần như không thấy) */
.circle .core{left:calc(72 * var(--u)); top:calc(72 * var(--u)); width:calc(324 * var(--u)); height:calc(324 * var(--u))}
.circle .peek{display:none} /* ảnh nguồn (CMS) — vẽ thành lưới ô lên .peek-cv (chande-circles.js) */
.circle .peek-cv{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; pointer-events:none}
.circle__t{display:none} /* chữ giữa vòng 2 / 3 — chỉ bản mobile */
/* Đoạn chữ trái / ảnh giữa / danh sách vai trò: BẰNG ĐÁY nhau, cách đường kẻ đứt
   (top 1930) 16 -> đáy ở 1914 = bottom 3090 − 1914 = 1176. Neo theo đáy nên chữ
   (cỡ rem, không co theo màn) dài ra thì mọc lên trên, không lấn qua đường kẻ. */
.hs-about__who{left:calc(492 * var(--u)); top:calc(1538 * var(--u)); margin:0; white-space:nowrap}
.hs-about__who span{display:block}
.hs-about__friends{left:calc(492 * var(--u)); top:calc(1603 * var(--u)); width:calc(234 * var(--u)); height:calc(311 * var(--u)); object-fit:cover}
.hs-about__roots{left:calc(24 * var(--u)); top:auto; bottom:calc(1176 * var(--u)); width:calc(234 * var(--u)); margin:0; font-size:1rem; color:#000; opacity:.3}
.hs-about__roles{left:calc(960 * var(--u)); top:auto; bottom:calc(1176 * var(--u)); width:calc(368 * var(--u)); margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0} /* sát nhau như Figma: 10 dòng × .78em ≈ 374u, vừa khoảng 1538 → 1914 */
.hs-about__roles li{position:relative; white-space:nowrap; width:fit-content; cursor:default}
/* "All you need is passion": mép phải theo đường nét đứt, đáy ngang đáy danh sách vai trò */
.hs-about__passion{left:auto; right:calc(24 * var(--u)); top:auto; bottom:calc(1176 * var(--u)); margin:0; text-align:right}
.hs-about__passion span{display:block; white-space:nowrap}
.hs-about__pills{left:calc(492 * var(--u)); top:calc(2310 * var(--u) - 24px - 56px)} /* nút cao 56px, đáy cách ảnh đá (top 2310) đúng 24px */
/* 2 nút Gallery / About us: đúng cỡ Figma 144 × 56 px, không co theo màn */
.hs-about__pills .pill{width:144px; height:56px}
.hs-about__pills .pill--green{width:auto; padding-inline:44px; white-space:nowrap} /* chữ dài (Explore Gallery): rộng theo chữ, cao giữ 56 */
/* nút "Explore Gallery": giữ đúng đệm 2 bên của nút "Gallery" cũ (rộng 144 với 7 ký tự mono = (144u − 7ch) / 2 mỗi bên) -> nút dài ra theo chữ */
/* +1px chui dưới ảnh đá (ảnh vẽ sau, nằm trên): hai mép trùng ở toạ độ lẻ thì
   điểm ảnh mép phủ không đủ, lộ nền kem thành vạch sáng 1px. */
.hs-about__scheme{left:0; top:calc(2310 * var(--u)); width:calc(492 * var(--u) + 1px)}
.hs-about__rock{left:calc(492 * var(--u)); top:calc(2310 * var(--u)); width:calc(468 * var(--u)); height:calc(540 * var(--u)); object-fit:cover; object-position:50% 50%}
.hs-about__field{right:0; top:calc(2310 * var(--u)); width:calc(960 * var(--u)); height:calc(540 * var(--u))}
.hs-about__band{left:0; right:0; top:calc(2850 * var(--u)); height:calc(240 * var(--u)); background:#112020; display:flex; align-items:center; gap:calc(32 * var(--u))}
.hs-about__band .dotrun{position:relative; width:calc(960 * var(--u)); height:100%; background:var(--lime)}
.hs-about__band .dotrun__track{position:absolute; left:calc(48 * var(--u)); top:calc(38 * var(--u)); height:calc(164 * var(--u))}
.hs-about__band h2{margin:0; color:#fffef8; width:calc(723 * var(--u))}
.hs-about__band h2 span{display:block}

/* --------------------------------------------------------------- 7. POSTER */
.hs-poster{height:calc(1080 * var(--u)); background:#fffef8; border-bottom:1px solid #e1e1e1}
.hs-poster__pin{height:100%}
.hs-poster img{width:100%; height:100%; object-fit:cover}
/* ảnh tĩnh dự phòng: ẩn sẵn — trước đây lộ ra trong lúc chồng poster 3D đang nạp; chỉ hiện khi
   chande-poster.js báo không dựng được (is-fallback: không WebGL / danh sách rỗng) */
.hs-poster__pin > img{visibility:hidden}
.hs-poster.is-fallback .hs-poster__pin > img{visibility:visible}
/* chande-poster.js chạy được (có WebGL, ảnh đã nạp): section dài thêm đủ quãng cuộn
   cho từng tờ, khối trong dính ngay dưới header và giữ đúng một màn. Runtime đọc
   `top` của khối dính để khớp quãng cuộn — đổi `top` ở đây không cần sửa JS.
   Canvas bị runtime gắn `display:block` inline nên phải !important mới ẩn được. */
.hs-poster:not(.is-live) canvas{display:none !important}
.hs-poster.is-sized{height:calc(var(--poster-scroll) + 100svh - var(--bar))}
.hs-poster.is-sized .hs-poster__pin{position:sticky; top:var(--bar); height:calc(100svh - var(--bar));
  display:grid; place-items:center}
.hs-poster.is-live .hs-poster__pin > img{display:none}

/* Poster đứng yên, Agenda trồi lên phủ (index.html: div.stack-over bọc 2 section).
   Poster dính với top = 100svh − chiều cao của nó -> dừng đúng lúc đáy chạm đáy
   màn, khối dính bên trong (pin) lúc đó vẫn ở đúng chỗ dính dưới header nên hình
   không nhảy, và runtime paper-stack đọc tiến độ = 100% (tờ cuối đã đáp). Hết
   .stack-over (đáy Agenda chạm đáy màn) thì Poster được thả, cuộn đi cùng. */
/* +1px: viền dưới 1px của .hs-poster — không bù thì khối dính nhảy lên 1px lúc
   chuyển từ "pin dính trong section" sang "cả section dính". */
.stack-over > .hs-poster{position:sticky; top:calc(100svh - 1080 * var(--u) + 1px); z-index:0}
.stack-over > .hs-poster.is-sized{top:calc(var(--bar) - var(--poster-scroll) + 1px)}
.stack-over > .hs-agenda{z-index:1}
/* Nền tối khi cụm ngày dính chạm ảnh của một ngày (chande-home.js .is-dark) */
.hs-agenda{transition:background-color .5s ease, color .5s ease}
.hs-agenda.is-dark, .stack-over > .hs-poster.is-live + .hs-agenda.is-dark{background:#0f1513; color:#f4f3eb}
/* Agenda không đợi outro (vòng màu) phủ kín màn kem mới lên: nó gối lên quãng
   cuộn cuối của Poster một đoạn --agenda-overlap, nên trồi lên trong lúc outro
   vẫn chạy bên dưới. Nền Agenda TRONG SUỐT để không che các vòng — chỉ chữ / ảnh
   nổi lên trên; phía sau nó luôn là khối poster đang đứng yên, outro kết thúc
   bằng màu kem #FDFBF4 nên đọc vẫn như nền sáng cũ. Chỉ áp khi chồng poster chạy
   thật — bản ảnh tĩnh dự phòng giữ nền trắng, không gối. */
.stack-over > .hs-poster.is-sized + .hs-agenda{margin-top:calc(-1 * var(--agenda-overlap, 70svh)); background:transparent}

/* --------------------------------------------------------------- 8. AGENDA */
.hs-agenda{height:calc(3160 * var(--u)); background:#fff; color:#112020; overflow:visible}
.agenda{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(48 * var(--u)); padding-top:calc(24 * var(--u))}
.agenda__head{margin:0; text-align:center; white-space:nowrap}
.agenda__head span{display:block}
.agenda__head .hot{color:var(--lime)}
/* phần chỉ có ở bản mobile (Figma 695:53878): nhãn ngày, dòng tách khác, ảnh đêm ngày 3 */
.agenda__day, .agenda__night, .agenda__head .only-m{display:none}
.agenda__head--wrap{white-space:normal; width:calc(723 * var(--u))}
.agenda__shot{position:relative; width:calc(685 * var(--u)); margin:0}
.agenda__night{margin:0}
.agenda__shot > img:first-child{width:100%; height:calc(576 * var(--u)); object-fit:cover}
.agenda__shot > .field{height:calc(136 * var(--u))}
/* thanh process tự đổi ảnh ngày 1 (chande-home.js): vạch neon mép trên ảnh */
.agenda__prog{position:absolute; left:0; top:0; width:100%; height:max(2px, calc(4 * var(--u))); z-index:3; pointer-events:none}
.agenda__prog b{display:block; width:100%; height:100%; background:var(--lime); transform:scaleX(0); transform-origin:0 50%}
.agenda__pair{position:relative; display:flex; width:calc(1255 * var(--u))}
.agenda__house{position:relative; width:calc(570 * var(--u)); height:calc(712 * var(--u)); overflow:hidden}
.agenda__house > img{width:100%; height:100%; object-fit:cover; object-position:35% 50%}
.agenda__house .bar{position:absolute; left:0; top:0; right:0; height:calc(57 * var(--u)); background:#1b2524}
.agenda__house .pillrun{position:absolute; left:calc(14.25 * var(--u)); top:calc(11.88 * var(--u)); width:calc(540.9 * var(--u)); height:calc(33.25 * var(--u))}
.agenda__stamp{position:absolute; left:calc(613 * var(--u)); top:calc(356 * var(--u)); width:calc(144 * var(--u)); height:calc(144 * var(--u)); z-index:1}
/* top: lúc chưa dính, đáy cụm ngày (baseline dòng 2) thẳng baseline dòng 3 của
   tiêu đề ngày 1 (đo: 591.24 − 563 = 28.24u thấp hơn bản −380 cũ). */
.agenda__dates{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(-351.76 * var(--u)); bottom:0; pointer-events:none}
.agenda__dates > div{position:sticky; top:0; height:calc(752 * var(--u))}
.agenda__dates p{position:absolute; top:calc(563 * var(--u)); margin:0; white-space:nowrap}
.agenda__dates p span{display:block}
.agenda__dates p:last-child{right:0; text-align:right}
.agenda__nav{bottom:0; width:calc(64 * var(--u)); height:calc(64 * var(--u)); min-width:2.5rem; min-height:2.5rem; display:grid; place-items:center;
  background-color:#f5f0e3; border:0; cursor:pointer; z-index:2}
.agenda__nav img{width:37.5%; height:37.5%}
.agenda__nav--prev{right:calc(100% - 1px)}
.agenda__nav--prev img{transform:rotate(180deg)}
.agenda__nav--next{left:calc(100% - 1px)}
.agenda__nav, .hs-quote__nav{transition:opacity .2s, background-size .35s cubic-bezier(.65,0,.35,1); --fill:#b4ff1f;
  background-image:linear-gradient(var(--fill), var(--fill)); background-repeat:no-repeat; background-position:left center; background-size:0% 100%}
.agenda__nav--prev, .hs-quote__nav--prev{background-position:right center}
.agenda__nav img, .hs-quote__nav img{transition:translate .35s cubic-bezier(.65,0,.35,1)}
/* hover: nền neon quét vào theo hướng mũi tên, mũi tên nhích theo hướng */
.agenda__nav:hover, .agenda__nav:focus-visible, .hs-quote__nav:hover, .hs-quote__nav:focus-visible{background-size:100% 100%}
.agenda__nav--next:hover img, .hs-quote__nav--next:hover img{translate:calc(4 * var(--u)) 0}
.agenda__nav--prev:hover img, .hs-quote__nav--prev:hover img{translate:calc(-4 * var(--u)) 0}
@media (prefers-reduced-motion:reduce){.agenda__nav, .hs-quote__nav, .agenda__nav img, .hs-quote__nav img{transition:none}}
.agenda__nav[aria-disabled=true], .hs-quote__nav[aria-disabled=true]{opacity:.3; pointer-events:none}
/* Cụm ngày = khối hộp lật khi đổi ngày (chande-home.js dựng .dc) */
.agenda__dates p{perspective:420px; perspective-origin:50% 50%}
.dc{display:block; position:relative; transform-style:preserve-3d; transform:translateZ(calc(var(--dh, 0px) / -2))}
/* Chỉ chữ, không nền: chiều sâu đến từ phối cảnh gần + mặt quay đi mờ dần / mặt
   quay ra rõ dần (chande-home.js) để hai lớp chữ không đè nhau lúc lật. */
.dc__f, .dc__b{display:block; backface-visibility:hidden; text-box:trim-both cap alphabetic; --tb:1}
.dc__f{transform:translateZ(calc(var(--dh, 0px) / 2))}
.dc__b{position:absolute; inset:0}
/* mặt sau rộng theo CHỮ MỚI, neo đúng mép của cụm (trái / phải) — trước bó trong bề rộng chữ cũ: chữ mới dài hơn tràn
   sang phải rồi lật xong nhảy về chỗ (cụm phải "D-1 12-20" thò ra thụt vào khi cuộn ngược) */
.agenda__dates p .dc__b{width:max-content; right:auto}
.agenda__dates p:last-child .dc__b{left:auto; right:0}
.dc__b.is-down{transform:rotateX(-90deg) translateZ(calc(var(--dh, 0px) / 2))}
.dc__b.is-up{transform:rotateX(90deg) translateZ(calc(var(--dh, 0px) / 2))}

/* ----------------------------------------------------------------- 9. WALL */
.hs-wall{height:calc(1556 * var(--u)); background:#000}
.hs-wall .dotrun{left:0; right:0; top:0; height:calc(240 * var(--u)); background:#40ce00}
.hs-wall .dotrun__track{position:absolute; left:calc(48 * var(--u)); top:calc(38 * var(--u)); height:calc(164 * var(--u))}
.hs-wall__line{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:1px; --dash:rgba(244,243,235,.3)}
/* Lưới nét đứt 96 × 96 (#212121, nét 4 cách 4 — như Line 22/23 của Figma):
   một ô SVG lặp lại, nét trên + nét trái. */
.hs-wall__grid{left:0; right:0; top:calc(322 * var(--u)); bottom:calc(96 * var(--u));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 .5H96M.5 0V96' stroke='%23212121' stroke-dasharray='4 4'/%3E%3C/svg%3E") 0 0 / calc(96 * var(--u)) calc(96 * var(--u))}
/* bảng collage kéo thả (chande-wall.js): toạ độ mảnh theo px bản 1920 (× --u) tính từ đỉnh section */
.hs-wall__board{inset:0; z-index:1}
.wall__piece{position:absolute; display:block; height:auto; max-width:none; transform-origin:50% 50%; user-select:none; -webkit-user-drag:none;
  left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u)); width:calc(var(--w) * var(--u)); rotate:calc(var(--r) * 1deg);
  transition:scale .2s cubic-bezier(.2,.7,.2,1), filter .2s ease}
@media (hover:hover) and (pointer:fine){ .wall__piece{cursor:grab} }
.wall__piece.is-drag{cursor:grabbing; scale:1.04; filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.hs-wall .strip{top:calc(1460 * var(--u))}

/* ---------------------------------------------------------------- 10. QUOTE */
/* Cả cụm + menu = 1 màn: cao 100svh − menu; thanh + nút neo đáy, tên người nói
   giữ khoảng cách cũ tới đáy, thẻ ảnh canh giữa dọc. */
.hs-quote{height:calc(100svh - var(--bar)); min-height:calc(640 * var(--u)); background:#000; color:#fffef8}
.hs-quote__strip{left:0; top:0; width:calc(492 * var(--u)); height:100%; object-fit:cover; transform:scaleX(-1)}
.hs-quote__text{left:calc(540 * var(--u)); top:calc(120 * var(--u)); width:calc(1340 * var(--u)); margin:0;
  font-weight:700; font-size:calc(80 * var(--u)); line-height:.78; letter-spacing:-.02em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.hs-quote__card{left:calc(57 * var(--u)); top:calc(50% - 218.58 * var(--u)); width:calc(377.48 * var(--u))}
.hs-quote__card img{width:100%; height:calc(437.16 * var(--u)); object-fit:cover}
/* viền trắng 2px quanh ảnh thẻ — lớp phủ trên cùng nên shape đổi ảnh / parallax vẫn nằm dưới viền */
.hs-quote__card::after{content:''; position:absolute; inset:0; border:2px solid #fff; pointer-events:none; z-index:2}
/* line reveal (SplitText mask): chừa đỉnh / chân chữ khỏi bị mask cắt (dòng đặt sát) */
/* bù cả về margin-bottom: hai margin âm trên / dưới của khung liền nhau bị GỘP
   (margin collapsing) chỉ trừ được .2em -> dòng giãn .12em lúc tách, khựng lúc gộp lại */
.hs-quote .text-line-mask{overflow:clip; padding-block:.12em .2em; margin-bottom:-.32em}
.hs-quote .text-line{display:block}
.hs-quote .text-line-mask:first-child{margin-top:-.12em}
.hs-quote .text-line-mask:last-child{margin-bottom:-.2em}
/* dòng đã tách không được tự xuống dòng lại (dòng vừa khít bề ngang lệch dưới 1px
   là rớt chữ cuối, ví dụ "for me." của Huy Phan) */
.hs-quote .text-line{white-space:nowrap}
.hs-quote .is-out{pointer-events:none}
/* chữ ký viết tay trên tên (Figma: Herr Von Muellerhoff 71.9, trắng 64%) —
   chande-sign.js vẽ SVG vào; đáy neo cách đáy section như cụm tên */
.hs-quote__sign{left:calc(540 * var(--u)); bottom:calc(176 * var(--u)); /* 104 đáy cụm tên + 40 cao cụm tên + 32 hở */ --sign-size:calc(71.927 * var(--u)); color:#fff; opacity:.64; pointer-events:none}
.hs-quote__by{left:calc(540 * var(--u)); bottom:calc(104 * var(--u)); display:flex; align-items:center; gap:calc(24 * var(--u))}
.hs-quote__by::before{content:''; width:2px; height:calc(40 * var(--u)); min-height:1.5rem; background:rgba(255,255,255,.3)}
/* vạch lime chồng lên rãnh xám, chạy từ dưới lên: khi hover cụm tên và khi cụm tên
   mới vào (đổi người — .is-enter, chande-home.js). Lúc nghỉ đầy rãnh. */
.hs-quote__by::after{content:''; position:absolute; left:0; top:50%; width:2px; height:max(calc(40 * var(--u)), 1.5rem);
  translate:0 -50%; background:var(--lime); transform-origin:50% 100%}
.hs-quote__by.is-enter::after{animation:hs-line-in .9s cubic-bezier(.77,0,.18,1) .45s both}
.hs-quote__by:hover::after{animation:hs-line-grow .7s cubic-bezier(.77,0,.18,1) both}
@keyframes hs-line-grow{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes hs-line-in{from{transform:scaleY(0)} to{transform:scaleY(1)}}
/* khối tên CŨ còn nằm đúng chỗ tới khi chữ cũ trượt hết: vạch cũ rút lên mất ngay
   (không che vạch mới đang chạy từ dưới lên), rãnh cũ ẩn (không chồng đậm rãnh mới) */
.hs-quote__by.is-out::before{opacity:0}
.hs-quote__by.is-out::after{transform-origin:50% 0; animation:hs-line-out .4s cubic-bezier(.77,0,.18,1) both}
@keyframes hs-line-out{from{transform:scaleY(1)} to{transform:scaleY(0)}}
.hs-quote__by div{display:flex; flex-direction:column; gap:12px}
.hs-quote__by p{margin:0; font-size:1rem; color:#fff; opacity:.3}
/* Tên người nói: link website cá nhân (CMS: url). Hover cả cụm: tên sáng neon +
   gạch chân chạy trái -> phải; hai dòng chạy hiệu ứng chữ code (chande-home.js). */
.hs-quote__by p{transition:opacity .25s, color .25s}
.hs-quote__name{color:inherit; text-decoration:none; padding-bottom:2px;
  background:linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.hs-quote__by:hover p:first-child{opacity:1; color:var(--lime)}
.hs-quote__by:hover .hs-quote__name{background-size:100% 1px}
.hs-quote__name[href]{cursor:pointer}
/* chồng 1px lên dải ảnh: dải bị lật (scaleX(-1)) nên mép phải lẻ px bị khử răng
   cưa, lộ vạch nền đen ở một số khổ màn */
.hs-quote__bar{left:calc(492 * var(--u) - 1px); bottom:0; width:calc(1316 * var(--u) + 1px); height:calc(56 * var(--u)); background:#1c2e22; overflow:hidden}
.hs-quote__bar span{position:absolute; inset:0; background:var(--lime); transform-origin:0 50%; animation:hs-bar 9s linear infinite}
@keyframes hs-bar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
/* chờ tới lần đầu section Cảm nhận vào màn (chande-home.js gắn .is-run), sau đó chạy luôn */
.hs-quote__bar span{animation-play-state:paused}
.hs-quote__bar.is-run span{animation-play-state:running}
.hs-quote__nav{bottom:0; width:calc(56 * var(--u)); height:calc(56 * var(--u)); display:grid; place-items:center; background-color:var(--lime); border:0; cursor:pointer}
.hs-quote__nav img{width:calc(24 * var(--u)); height:calc(24 * var(--u)); min-width:14px; min-height:14px}
.hs-quote__nav--prev{left:calc(1807 * var(--u))}
.hs-quote__nav--prev img{transform:rotate(180deg)}
.hs-quote__nav--next{left:calc(1864 * var(--u))}
/* đổi cảm nhận: chữ + thẻ mờ đi, đổi nội dung, hiện lại */
.hs-quote__text, .hs-quote__by{transition:opacity .35s ease, transform .35s ease}
.hs-quote.is-swap .hs-quote__text, .hs-quote.is-swap .hs-quote__by{opacity:0; transform:translateY(calc(24 * var(--u)))}
/* ảnh thẻ không mờ / trượt nữa — đổi bằng đoàn shape như hero (chande-home.js) */
.hs-quote.is-single .hs-quote__bar span{animation:none; transform:scaleX(1)}

/* --------------------------------------------------------------- 11. COLORS */
.hs-colors .scheme > i{height:calc(60 * var(--u))}
/* [data-flip3d] (chande-home.js gắn .is-3d): mỗi vạch là khối hộp — mặt trước màu
   của nó (--cf), mặt DƯỚI màu của vạch đối xứng (--cb). Xoay rotateX(--t × 90°):
   khối lăn lên, mặt dưới ra trước -> cả dải đảo thứ tự màu. --h = cao một vạch. */
/* overflow clip: đang lăn, khối nghiêng cao √2 lần -> vạch trên / dưới cùng nhô
   ra khỏi khung dải; cắt lại để dải không "đội" lên / thò xuống. */
.scheme.is-3d{perspective:1600px; perspective-origin:50% 50%; overflow:clip}
.scheme.is-3d > i{position:relative; background:none !important; transform-style:preserve-3d;
  /* --k = p / (p + h/2): mặt trước nhô h/2 về phía người xem nên phối cảnh phóng
     to p/(p − z) — thu cả khối lại để lúc đứng yên mặt trước khớp đúng mép cũ
     (không thì dải tràn ra hai bên vài px, lệch với ảnh / lưới phía trên). */
  transform:scale3d(var(--k, 1), var(--k, 1), var(--k, 1)) rotateX(calc(var(--t, 0) * 90deg))}
/* inset -1px dọc: mặt chồm 1px lên khối kề để mép khử răng cưa không lộ vạch mảnh */
.scheme.is-3d > i::before, .scheme.is-3d > i::after{content:''; position:absolute; inset:-1px 0; backface-visibility:hidden}
.scheme.is-3d > i::before{background:var(--cf); transform:translateZ(calc(var(--h) / 2))}
.scheme.is-3d > i::after{background:var(--cb); transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
/* Vạch nằm lệch tâm nhìn để lộ mép mặt đã lăn đi (đúng 3D) -> lúc đã lật xong /
   chưa lật thì tắt hẳn mặt không dùng (chỉ 2% cuối/đầu của cú lăn). */
.scheme.is-3d > i::before{opacity:clamp(0, (1 - var(--t, 0)) * 50, 1)}
.scheme.is-3d > i::after{opacity:clamp(0, var(--t, 0) * 50, 1)}

/* --------------------------------------------------------------- 12. FOOTER */
.hs-foot{height:calc(1080 * var(--u)); background:#000; color:#838b89}
.names{display:flex; flex-direction:column; gap:calc(4.788 * var(--u)); width:calc(441.7 * var(--u)); margin:0;
  font-weight:600; font-size:calc(19.153 * var(--u)); line-height:.9; letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap}
.names span{display:block; text-box:trim-both cap alphabetic; --tb:1}
.hs-foot__n1{left:calc(32 * var(--u)); top:calc(32 * var(--u))}
.hs-foot__n2{left:calc(30 * var(--u)); top:calc(157 * var(--u)); gap:calc(20.11 * var(--u))}
.hs-foot__n2 .pair{display:flex; justify-content:space-between; width:calc(303.8 * var(--u))}
.hs-foot__n2 > div{display:flex; flex-direction:column; gap:calc(4.788 * var(--u))}
.hs-foot__n3{left:calc(32 * var(--u)); top:calc(660 * var(--u))}
.hs-foot__face{left:calc(32 * var(--u)); top:calc(356 * var(--u)); width:calc(235 * var(--u)); height:calc(272 * var(--u)); overflow:hidden;
  clip-path:inset(100% 0 0 0); transition:clip-path .45s cubic-bezier(.76,0,.24,1)}
.hs-foot__face.is-on{clip-path:inset(0)}
/* relative để chứa lớp shape khi đổi ảnh — left/top của bản abs cũ phải bỏ, không
   thì relative đẩy khung lệch xuống đè cụm tên dưới */
.hs-foot__col > .hs-foot__face{position:relative; left:auto; top:auto}
.hs-foot__face img{width:100%; height:100%; object-fit:cover}
/* Tên hover được (chande-home.js bọc từng tên thành .nm) */
.names .nm{display:inline; cursor:default; transition:color .15s, background-size .4s cubic-bezier(.65,0,.35,1);
  background:linear-gradient(currentColor, currentColor) right 100% / 0% 1px no-repeat}
/* trỏ vào tên: gạch chân chạy trái -> phải */
.names .nm:hover, .names .nm.is-active{background-size:100% 1px; background-position:left 100%}
.names .nm:hover, .names .nm.is-active{color:#fff}
.hs-foot__logo{left:calc(1018 * var(--u)); top:calc(28 * var(--u)); width:calc(870 * var(--u)); height:auto}
.hs-foot__field{left:0; top:calc(752 * var(--u)); width:calc(726 * var(--u)); height:calc(328 * var(--u))}
/* panel chồm trái 1px đè mép mảng xanh: hai mép trùng ở toạ độ lẻ thì điểm ảnh mép
   không phủ kín, lộ ô xanh của canvas (nới ra cho ô dạt) thành vạch xanh lẻ loi */
.hs-foot__panel{left:calc(726 * var(--u) - 1px); top:calc(752 * var(--u)); right:0; height:calc(328 * var(--u)); background:#192121}
.cta{display:flex; align-items:center; height:calc(92 * var(--u)); color:#fff; text-decoration:none; font-weight:600; font-size:max(.875rem, calc(20 * var(--u))); line-height:.9; text-transform:uppercase}
/* 2 hàng chấm (SVG 20×6, chấm ở x 3 và 17) cách nhau 8 -> tâm cách 14 cả ngang lẫn dọc = 4 chấm thành hình vuông như Figma */
.cta i{flex:none; width:calc(92 * var(--u)); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--lime)}
.cta i svg{display:block; width:20px; height:6px; overflow:visible}
/* hover: 4 chấm toả nhẹ ra 4 góc chéo (hàng trên lên, hàng dưới xuống, hai bên giãn) */
.cta i circle{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cta:hover i svg:first-child circle:first-child{transform:translate(-2px, -2px)}
.cta:hover i svg:first-child circle:last-child{transform:translate(2px, -2px)}
.cta:hover i svg:last-child circle:first-child{transform:translate(-2px, 2px)}
.cta:hover i svg:last-child circle:last-child{transform:translate(2px, 2px)}
.cta span{display:flex; flex-direction:column; gap:4px; padding-left:calc(24 * var(--u)); white-space:nowrap}
.cta span small{font-size:1em; font-feature-settings:"numr" 1}
/* Hover: nền nút tối đi (bóng inset phủ trên nền, dưới chữ; ô chấm neon nằm trên nên giữ màu).
   Không gạch chân nhãn. */
.cta{transition:box-shadow .25s}
.cta:hover{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.18)} /* ô chấm neon giữ nguyên màu */
.cta__t{font-style:normal}
.hs-foot__cta1{left:calc(726 * var(--u)); top:calc(660 * var(--u)); width:calc(597 * var(--u)); background:#236c3c}
.hs-foot__cta2{left:calc(1323 * var(--u)); top:calc(660 * var(--u)); width:calc(597 * var(--u)); background:#2c3a38}
.links{display:flex; justify-content:space-between; width:calc(533 * var(--u)); font-size:.875rem}
.links .mono{color:rgba(255,255,255,.3); margin:0; white-space:nowrap}
.links ul{margin:calc(32 * var(--u)) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.links a{color:#5e6464; text-decoration:none; font-weight:500; line-height:.98; letter-spacing:-.02em; text-transform:uppercase}
.links a:hover, .links .mono a:hover{color:var(--lime); opacity:1}
.links .mono a{color:inherit; text-decoration:none}
.hs-foot__social{left:calc(758 * var(--u)); top:calc(784 * var(--u))}
.hs-foot__index{left:calc(1355 * var(--u)); top:calc(784 * var(--u))}
/* cột phải: Back to top ở trên, dòng ghi công model 3D (CC BY 4.0) dồn xuống đáy, thẳng hàng CONTACT */
.hs-foot__end{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; text-align:right}
.hs-foot__credit{line-height:1.5}
.hs-foot__credits{display:none} /* khối ghi công riêng — chỉ bản mobile */
.hs-foot__lumen{display:none} /* chỉ bản mobile (Figma 688:53584) */
.hs-foot__hr{left:calc(726 * var(--u)); right:0; top:calc(1021 * var(--u)); height:1px; background:rgba(255,255,255,.08)}
.hs-foot__vr{left:calc(1323 * var(--u)); top:calc(752 * var(--u)); width:1px; height:calc(269 * var(--u)); background:rgba(255,255,255,.08)}
.hs-foot__legal{left:calc(758 * var(--u)); top:calc(1045 * var(--u)); width:calc(1130 * var(--u)); display:flex; justify-content:space-between; font-size:.875rem; color:#fff}
.hs-foot__legal p{margin:0; color:rgba(255,255,255,.3)}
/* credit hover: sáng neon như link footer (chữ code + gạch chân: chande-scramble.js) */
.hs-foot__legal a{color:inherit; text-decoration:none}
.hs-foot__legal [data-scramble]:hover{color:var(--lime)}
/* Ask AI: 4 logo chatbot giữa hàng bản quyền — mờ như chữ bên cạnh, rê vào sáng lime */
.hs-foot__ai{display:flex; align-items:center; gap:14px}
.hs-foot__ai span{margin-right:2px}
.hs-foot__ai a{display:grid; place-items:center; width:16px; height:16px; color:rgba(255,255,255,.3); transition:color .2s, transform .2s}
.hs-foot__ai a:hover, .hs-foot__ai a:focus-visible{color:var(--lime); transform:translateY(-2px)}
.hs-foot__ai svg{display:block; width:100%; height:100%; fill:currentColor}

/* Chân trang vừa ĐÚNG 1 màn hình, tính cả thanh menu 80px đè lên trên cùng:
   - cụm dưới (CTA, effect, panel link, bản quyền) bám ĐÁY, giữ nguyên số đo Figma
     (đổi top:Y thành top:100% − (1080 − Y));
   - phần trên nằm giữa mép dưới thanh menu và mép trên cụm dưới, cách đều 32:
     logo co theo chiều cao khoảng đó (neo mép phải), cột tên + ô ảnh xếp dọc,
     ô ảnh co lại (giữ tỉ lệ 235:272) nếu thiếu chỗ.
   min-height: màn quá thấp thì không ép bể bố cục, cho cuộn thêm. */
.hs-foot{--foot-bottom:calc(420 * var(--u)); height:100svh; min-height:calc(var(--bar) + 880 * var(--u))}
.hs-foot__col{left:calc(32 * var(--u)); top:calc(var(--bar) + 32 * var(--u)); bottom:calc(var(--foot-bottom) + 32 * var(--u));
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(32 * var(--u))}
.hs-foot__col > .hs-foot__n2{margin-left:calc(-2 * var(--u))}
.hs-foot__col > .hs-foot__face{flex:1 1 0; min-height:0; max-height:calc(272 * var(--u)); width:auto; height:auto; aspect-ratio:235 / 272}
.hs-foot__logo{left:auto; right:calc(32 * var(--u)); top:calc(var(--bar) + 32 * var(--u));
  height:calc(100% - var(--bar) - var(--foot-bottom) - 64 * var(--u)); width:auto; max-width:calc(870 * var(--u));
  object-fit:contain; object-position:right top} /* khung bị chặn rộng (màn cao / tablet): logo giữ đúng tỉ lệ, không kéo dãn */
.hs-foot__n3{top:calc(100% - 420 * var(--u))}
.hs-foot__cta1, .hs-foot__cta2{top:calc(100% - 420 * var(--u))}
/* 2 nút footer: bỏ số, chữ căn giữa theo chiều dọc, cách ô chấm 32 */
/* ô neon: mũi tên ↗ ghép 7 chấm (cùng hình mũi tên ở menu), rê vào nhích lên phải */
.cta i svg.cta__arr{width:20px; height:20px}
/* rê vào: mũi tên đang có trượt ra góc trên phải, đồng thời bản thứ hai trượt vào từ góc dưới trái
   (cùng lúc, cùng đường cong — liền mạch, không giật); rời chuột thì trượt ngược lại. Ô neon cắt phần tràn.
   Chấm đứng yên (đè hiệu ứng giãn 4 chấm của .cta) */
.cta:has(.cta__arr) i{position:relative; overflow:hidden; container-type:size}
.cta i svg.cta__arr circle, .cta:hover i svg.cta__arr circle{transform:none !important}
.cta i svg.cta__arr{transition:translate .55s cubic-bezier(.65,0,.35,1)}
/* mũi tên chờ / mũi tên đã bay đi nằm HẲN ngoài ô: lệch nửa ô + nửa icon (+ 4 px). Lệch cố định 64 px thì ô rộng
   (màn lớn: ô co theo --u) còn lọt một chấm ở góc. cqw / cqh = cỡ ô (container); dòng px là dự phòng. */
.cta i svg.cta__arr--in{position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px; translate:-64px 64px;
  translate:calc(-50cqw - 14px) calc(50cqh + 14px)}
.cta:hover i svg.cta__arr{translate:64px -64px; translate:calc(50cqw + 14px) calc(-50cqh - 14px)}
.cta:hover i svg.cta__arr--in{translate:0 0}
@media (prefers-reduced-motion:reduce){ .cta i svg.cta__arr{transition:none} }
.hs-foot__cta1 span, .hs-foot__cta2 span{justify-content:center; padding-left:calc(32 * var(--u))}
.hs-foot__field, .hs-foot__panel, .hs-foot__vr{top:calc(100% - 328 * var(--u))}
.hs-foot__social, .hs-foot__index{top:calc(100% - 296 * var(--u))}
.hs-foot__hr{top:calc(100% - 59 * var(--u))}
.hs-foot__legal{top:calc(100% - 35 * var(--u))}
/* iPad / tablet ngang (900–1365): CHỮ NHỎ không dưới 14px cho đọc được (chỉ nâng chữ nhỏ —
   tiêu đề lớn giữ nguyên cỡ, nâng cả gốc rem thì tiêu đề hero to ra đè lên ảnh) */
@media (min-width:900px) and (max-width:1365px){
  .names{font-size:max(14px, calc(19.153 * var(--u)))}
  .b16, .mono, .pill, .cta, .links, .hs-foot__legal, .hero-card__cap, .hero__scroll, .hero__recap,
  .hero__intro-text, .hs-quote__name, .hs-about__roots, .hero__recap figcaption, .hs-story__text p, .hs-quote__by p{font-size:14px}
  /* 14px rộng hơn cột 234: KHÔNG xuống dòng thêm (chỉ ngắt ở <br> như Figma) mà cho khối chữ rộng ra quá cột (tới
     ~392u ở 900px, vẫn trong mảng tối 492u, không đè nội dung các section nó trôi qua) — trước đây chữ vỡ 9 dòng,
     khối cao lên đụng thanh process ở màn thấp (khung xem trước Muzli 1196 × 538–718) */
  .hero__intro-text{width:max-content}
}
/* tablet / iPad (900–1365): hàng chân quá chật -> bỏ dòng credit (Made by Lumen · Design by Kaixa),
   các ô còn lại không xuống dòng */
@media (min-width:900px) and (max-width:1365px){
  .hs-foot__legal{align-items:center; gap:24px}
  .hs-foot__legal > p:last-child{display:none}
  .hs-foot__legal > p{white-space:nowrap}
  .hs-foot__ai > span{display:none} /* chỉ giữ 4 icon AI */
  /* chữ to hơn (≥ 14px): ghi chú About neo mép phải; cột Site index giữ khung, phần ghi công
     model 3D bên phải được xuống dòng (căn phải) thay vì tràn mép */
  .hs-about__note{left:auto; right:calc(32 * var(--u))}
  /* chữ 14px cao hơn khoảng 942 -> 1006 (vạch đứt) của thiết kế: neo ĐÁY chữ cách vạch như Figma (17u, ít nhất
     12px) thay vì neo đỉnh — không thì chữ đè lên vạch (khung Muzli 1196) */
  .hs-about__note{top:calc(1006 * var(--u) - max(12px, 17 * var(--u))); translate:0 -100%}
  .hs-foot__index{gap:1rem}
  .hs-foot__end{min-width:0; flex:1 1 auto}
  .hs-foot__end .hs-foot__credit{white-space:normal}
}

/* -------------------------------------------------------------- Responsive */
/* Dưới 900px Figma chưa có bản — giữ bố cục desktop co theo bề rộng, chỉ nới
   chữ nhỏ cho đọc được (rem đã có sàn 10–11px ở site.css). */
@media (max-width:899px){
  .hs-about__statement span, .agenda__head, .hs-intro__a span{white-space:normal}
}

/* -------------------------------------------- Mobile / tablet dọc (≤ 899px) */
/* Figma chỉ có bản 1920: các section chỉ có hình (dải màu, dải pill, phong cảnh,
   poster, agenda, tường collage) vẫn co theo --u. Năm section trộn chữ cỡ rem với
   khung co theo màn (Intro, Story, About, Quote, Footer) thì ở đây XẾP DỌC THEO
   LUỒNG: con trực tiếp .abs về relative, bỏ toạ độ, chữ display to theo bề ngang. */
@media (max-width:899px){
  .hs-intro, .hs-about, .hs-quote, .hs-foot{height:auto; min-height:0}
  .hs-intro > .abs, .hs-about > .abs, .hs-quote > .abs, .hs-foot > .abs, .hs-foot__col > *{
    position:relative; left:auto; right:auto; top:auto; bottom:auto}
  .hs-intro .d106, .hs-about .d106{font-size:clamp(2.1rem, 9.4vw, 4.4rem); line-height:.82}
  .hs-about .d48{font-size:clamp(1.6rem, 6.6vw, 2.8rem)}


  /* 1. Intro */
  /* 1. Intro — Figma mobile (688:53370, khổ 375, cao 284): tiêu đề 40 / .76 cách đầu 120; "Show" cùng hàng
     "Listen & share" (canh phải), "(The love)" dưới; hàng 3 viên màu 48 × 26 (cam có con mắt) ngay dưới chữ */
  .hs-intro{--q:calc(100vw / 375); display:block; height:calc(284 * var(--q)); padding:0}
  .hs-intro > .hs-intro__a, .hs-intro > .hs-intro__b{position:absolute; margin:0; font-size:calc(40 * var(--q)); line-height:.76; letter-spacing:-.04em;
    text-box:trim-both cap alphabetic; --tb:1}
  .hs-intro > .hs-intro__a{left:12px; top:calc(120 * var(--q)); width:auto}
  .hs-intro__a span, .hs-intro__a span:last-child{white-space:nowrap; padding-left:0}
  .hs-intro > .hs-intro__b{right:12px; top:calc(210 * var(--q)); text-align:right; white-space:nowrap}
  .hs-intro .chip{display:block; top:calc(242 * var(--q)); width:calc(48 * var(--q)); height:calc(26 * var(--q))}
  .hs-intro .chip::after{inset:calc(4 * var(--q))}
  .hs-intro .chip--orange{left:12px}
  .hs-intro .chip--yellow{left:calc(12px + 50 * var(--q))}
  .hs-intro .chip--green{left:calc(12px + 100 * var(--q))}
  /* icon trong viên (sóng ở viên vàng, miệng ở viên xanh — chande-chips.js) hiện luôn như trang chủ desktop, vừa lòng viên */
  .hs-intro .chip .chip__icon{display:block; opacity:1; left:calc(4 * var(--q)); top:calc(4 * var(--q)); width:calc(100% - 8 * var(--q)); height:calc(100% - 8 * var(--q))}
  .hs-intro > .hs-intro__eye{position:absolute; display:block; left:calc(12px + 11 * var(--q)); top:calc(247 * var(--q)); width:calc(27 * var(--q)); height:calc(16 * var(--q))}
  .hs-intro > .hs-intro__eye .hs-eye{opacity:1} /* thắng style chande-chips.js chèn sau (ẩn mắt khi chưa vào nền tối) */

  /* 2. Story — Figma Section 3 mobile (620:13441, khổ 375): ảnh 413 tràn ngang (ảnh 2 vẫn nở từ
     góc dưới trái khi cuộn — chande-story.js dính ảnh ngay dưới header), dưới là 2 khung chữ 335
     xếp dọc (tiêu đề 40, chữ mono 14), rồi dải màu 9 × 60 (section Scheme, đen trên → kem dưới). */
  /* --v = 1px chiều cao Figma (748 = màn thấy được dưới header, đã trừ thanh trình duyệt): ảnh 413 +
     khung chữ 1 (335) = đúng một màn */
  /* Figma mobile 688:53370: xếp thẳng ảnh 412 · khung 06 years 345 · ảnh 412 · khung Chande. 375 (không dính /
     nở ảnh — chande-story.js tắt zoom dưới 900px). Khung ảnh + cột chữ thành display:contents để 2 ảnh và 2
     khung chữ xen kẽ trong một lưới. */
  .hs-story, .hs-story.is-zoom{--q:calc(100vw / 375); --v:calc((var(--vp) - var(--bar)) / 748); --sh:calc(413 * var(--v)); height:auto; padding:0;
    display:grid; grid-template-columns:100%}
  .hs-story > .abs{position:relative; left:auto; right:auto; top:auto; bottom:auto}
  .hs-story__band, .hs-story__band-c{display:none}
  .hs-story__media, .hs-story.is-zoom .hs-story__col, .hs-story__col{display:contents}
  .hs-story .hs-story__photo, .hs-story .hs-story__small{position:relative; left:auto; top:auto; width:100%; height:calc(412 * var(--q));
    object-fit:cover; object-position:50% 69%; transform:none}
  .hs-story .hs-story__photo{grid-row:1}
  .hs-story__panel:first-child{grid-row:2}
  .hs-story .hs-story__small{grid-row:3; object-position:50% 50%}
  .hs-story__panel:last-child{grid-row:4}
  .hs-story__panel{height:auto; min-height:calc(345 * var(--v)); padding:calc(20 * var(--s)) 12px calc(20 * var(--s)); background:#161d1d !important}
  .hs-story__panel:last-child{min-height:calc(375 * var(--v))} /* Figma: khung Chande. cao 375 */
  .hs-story .hs-story__panel h3{font-size:calc(40 * var(--s)); line-height:.78; letter-spacing:-.02em; text-box:trim-both cap alphabetic; --tb:1}
  .hs-story__panel{justify-content:flex-start} /* Figma: chữ canh trên, cách đầu khung 144 */
  .hs-story__text{width:75%; max-width:none; min-width:0; min-height:0; gap:calc(24 * var(--s)); margin-top:calc(93 * var(--s))} /* chữ thân = 3/4 lưới 4 cột (12 → 363 ở khổ 375 -> 263) */
  .hs-story__text div{gap:calc(24 * var(--s))}
  .hs-story__text p{font-size:max(10px, calc(14 * var(--s))); line-height:.96; letter-spacing:-.02em; text-box:trim-both cap alphabetic; --tb:1}
  .hs-story__panel:last-child .hs-story__text div p:last-child{font-size:max(11px, calc(16 * var(--s)))} /* Figma: đoạn Chande. 16 */
  /* 3–4. Figma mobile (688:53370): gạch neon 94 -> dải màu 9 × 44.44 -> hàng viên thuốc 72. Gạch neon thuộc
     section Strip (ngay sau) -> chừa 94 ở đầu dải màu rồi kéo gạch neon của Strip lên lấp vào */
  .hs-scheme{height:auto; padding-top:calc(94 * 100vw / 375)}
  .hs-scheme .scheme{position:relative; left:0; flex-direction:column}
  .hs-scheme .scheme > i{height:calc(400 / 9 * 100vw / 375)}

  /* 4–5. Strip + Land — Figma mobile (628:46260, khổ 375). Strip: mảng gạch neon 94 trên, hàng viên
     thuốc 108 × 42 (nền tối, cao 72) dưới. Land: khung ngay dưới header (cao = màn − header), 3 món dán
     theo land-edit.html (chế độ Mobile, khung 375 × 580 = tỉ lệ vùng thấy được của iPhone thật — khung
     748 của Figma cao hơn màn thật nên bị thu nhỏ, hở 2 bên); --s = 1px khổ 375 nhưng không quá khung cao
     580 (màn thấp hơn thì cả cụm thu lại, canh giữa ngang). Hiệu ứng dán từng món khi cuộn giữ nguyên. */
  .hs-strip{--q:calc(100vw / 375); height:calc(72 * var(--q)); overflow:visible}
  .strip{flex-direction:column; height:auto}
  .strip__field{width:100%; height:calc(94 * var(--q))}
  .hs-strip .strip__field{position:absolute; left:0; top:calc(-494 * var(--q))}
  .strip__run{width:100%; height:calc(72 * var(--q))}
  .strip__run .pillrun{left:0; right:0; width:auto; top:calc(15 * var(--q)); height:calc(42 * var(--q))}
  .strip__run .pillrun__track{gap:calc(1.5 * var(--q)); animation-name:hs-pills-m}
  .strip__run .pillrun__track > i{width:calc(108 * var(--q)); height:calc(42 * var(--q))}
  .hs-land.is-staged .hs-land__frame{--s:min(calc(100vw / 375), calc((var(--vp) - var(--bar)) / 580)); inset:var(--bar) 0 0; top:var(--bar); height:auto;
    transform:none; overflow:hidden}
  .hs-land .hs-land__bg--m{display:block}
  .hs-land .hs-land__bg:not(.hs-land__bg--m){display:none}
  .hs-land__piece{left:calc(50% + (var(--mx) - 187.5) * var(--s)); top:calc(var(--my) * var(--s)); width:calc(var(--mw) * var(--s))}
  .hs-land__piece > img{rotate:calc(var(--mr) * 1deg)}
  .hs-land__piece[data-land-key="atom"]{z-index:2} /* khung 580 chật hơn Figma: tem vịt nằm TRÊN cụm sticker, chữ "46 designers" không bị ảnh đè */

  /* 7. Poster — bản mobile TĨNH (chande-poster.js không dựng chồng giấy 3D dưới 900px): các tờ là ảnh
     đặt theo khung 375 × 748·n (n = data-m-screens, mặc định 2), co theo BỀ NGANG (--mq = 1px khổ 375) để
     sát mép y như trình sửa — màn thật thấp hơn 748 nên section dài hơn n màn một chút.
     Sửa ở poster-edit.html, chế độ Mobile. */
  .hs-poster{--n:2; --mq:calc(100vw / 375); height:calc(748 * var(--n) * var(--mq)); overflow:hidden; background:#fffef8 var(--poster-bg, none) 50% 50% / cover no-repeat}
  .hs-poster[data-m-screens="3"]{--n:3}
  .hs-poster .hs-poster__pin{display:none}
  .hs-poster__m{position:absolute; inset:0}
  .hs-poster img.poster__m{position:absolute; display:block; left:calc(var(--mx) * var(--mq)); top:calc(var(--my) * var(--mq));
    width:calc(var(--mw) * var(--mq)); height:auto; max-width:none; object-fit:fill; rotate:calc(var(--mr) * 1deg);
    filter:drop-shadow(0 calc(3 * var(--mq)) calc(6 * var(--mq)) rgba(40,30,10,.16))}
  /* Agenda vẫn trồi lên phủ: poster dính khi đáy chạm đáy vùng thấy được */
  .stack-over > .hs-poster{top:calc(var(--vp) - 748 * var(--n) * var(--mq) + 1px)}

  /* 8. Agenda — Figma mobile 695:53878 (khổ 375, --q = 1px khổ 375): một cột 351 giữa, mỗi ngày =
     nhãn "Day 0x / giờ" (52) · cách 48 · danh sách (52) · cách 32 · ảnh. Nút Agenda | Bootcamp 144 × 56
     cách đầu section 96. Ngày 1: ảnh tự đổi + dải effect (như desktop); ngày 2: chỉ ảnh phải của cặp
     (351 × 403) + thanh tối 48 có dải viên 72 × 28; ngày 3: ảnh đêm tràn ngang + dải effect 96.
     Bỏ cụm ngày dính, nút ‹ ›, con tem, ảnh trái của cặp, nền tối khi cuộn (chande-home.js). */
  .hs-agenda{--q:calc(100vw / 375); height:auto; padding-top:calc(96 * var(--q))}
  .hs-agenda .agenda__dates{display:none}
  .hs-agenda .agenda{gap:0; padding-top:0}
  .agenda .pills .pill{width:calc(144 * var(--q)); height:calc(56 * var(--q)); min-width:0; min-height:0; font-size:max(14px, calc(14 * var(--q))); letter-spacing:-.02em}
  .hs-agenda .agenda__day{display:block; margin:calc(32 * var(--q)) 0 0; font-size:calc(52 * var(--q)); text-align:center; white-space:nowrap}
  .hs-agenda .pills + .agenda__day{margin-top:calc(16 * var(--q))}
  .agenda__day span{display:block}
  .hs-agenda .agenda__head, .hs-agenda .agenda__head--wrap{width:calc(351 * var(--q)); margin-top:calc(48 * var(--q)); font-size:calc(52 * var(--q)); white-space:normal}
  .agenda__head .only-d{display:none}
  .agenda__head .only-m{display:block}
  .hs-agenda .agenda__shot{width:calc(351 * var(--q)); margin-top:calc(32 * var(--q))}
  .hs-agenda .agenda__shot > img:first-child{height:auto; aspect-ratio:1709 / 1436}
  .hs-agenda .agenda__shot > .field{height:auto; aspect-ratio:685 / 136}
  .hs-agenda .agenda__pair{width:calc(351 * var(--q)); margin-top:calc(32 * var(--q)); display:block}
  .agenda__pair > .agenda__shot, .agenda__pair > .agenda__stamp{display:none}
  /* nút ‹ › đổi ảnh (Figma 697:54117 / 697:54070): ô kem 32, mũi tên 12 — ngày 2 ở 2 góc dưới ảnh (ngay trên thanh viên
     thuốc), ngày 3 ở 2 góc trên dải effect. Ngày 2 dùng lại nút đổi cặp ảnh của desktop. */
  .hs-agenda .agenda__pair > .agenda__nav, .agenda__nnav{position:absolute; top:calc(371 * var(--q)); bottom:auto; width:calc(32 * var(--q)); height:calc(32 * var(--q));
    min-width:0; min-height:0; display:grid; place-items:center; padding:0; border:0; background:#f5f0e3; cursor:pointer; z-index:3}
  .hs-agenda .agenda__pair > .agenda__nav--prev, .agenda__nnav--prev{left:0; right:auto}
  .hs-agenda .agenda__pair > .agenda__nav--next, .agenda__nnav--next{right:0; left:auto}
  .agenda__nnav{top:calc(100% - 96 * var(--q))}
  .agenda__nnav img{width:37.5%; height:37.5%}
  .agenda__nnav--prev img{transform:rotate(180deg)}
  .hs-agenda .agenda__nav:hover img, .agenda__nnav img{translate:none}
  .hs-agenda .agenda__house{width:100%; height:auto}
  .hs-agenda .agenda__house > img{height:calc(403 * var(--q)); object-position:50% 50%}
  .agenda__house .bar{position:relative; height:calc(48 * var(--q)); background:#1b2524}
  .hs-agenda .agenda__house .pillrun{left:0; right:0; width:auto; top:calc(413 * var(--q)); height:calc(28 * var(--q))}
  .agenda__house .pillrun__track{gap:1px; animation-name:hs-pills-ag}
  .agenda__house .pillrun--sm .pillrun__track > i, .agenda__house .pillrun__track > i{width:calc(72 * var(--q)); height:calc(28 * var(--q))}
  .hs-agenda .agenda__night{display:block; position:relative; width:100%; margin-top:calc(32 * var(--q))}
  .agenda__night > img{width:100%; height:auto; aspect-ratio:375 / 316; object-fit:cover}
  .agenda__night > .field{height:calc(96 * var(--q))}

  /* 9. Kỷ niệm (wall) — bản mobile TĨNH, không kéo thả (wall-edit.html, chế độ Mobile). Khung 375 × 748·n
     (n = data-m-screens, 2 hoặc 3), co theo BỀ NGANG (--q) để sát mép y như trình sửa: dải chấm 96 trên cùng
     (Agenda kết thúc ngay trên nó — Figma 695:53878), lưới 8 cột, dải đáy 166 (gạch neon 94 + viên thuốc 72
     như dải Strip mobile); mảnh đặt theo mx / my / mw / mr. */
  .hs-wall{--q:calc(100vw / 375); --n:2; height:calc(748 * var(--n) * var(--q)); overflow:hidden}
  .hs-wall[data-m-screens="3"]{--n:3}
  .hs-wall .dotrun{--u:calc(66 * var(--q) / 164); height:calc(96 * var(--q))}
  .hs-wall__grid{top:calc(96 * var(--q)); bottom:calc(166 * var(--q)); background-size:calc(375 / 8 * var(--q)) calc(375 / 8 * var(--q)); background-position:0 0}
  .hs-wall .strip{top:auto; bottom:0}
  .hs-wall .wall__piece{left:calc(var(--mx) * var(--q)); top:calc(var(--my) * var(--q)); width:calc(var(--mw) * var(--q));
    rotate:calc(var(--mr) * 1deg); transition:none; cursor:auto}
  .hs-wall .wall__piece[data-nom]{display:none}

  /* 6. About — Figma Section-Poster mobile (628:610, khổ 375; --q = 1px khổ 375, co theo bề ngang).
     Một cột giữa, xếp lại thứ tự bằng `order` (các khối vẫn là con trực tiếp; .circles / nav pills
     `display: contents` để từng vòng tròn / từng nút vào thẳng cột):
       đoạn chữ · ảnh khung bướm (tràn ngang 660, ảnh dọc riêng) · vòng 1 + câu "We don't say…" nằm giữa vòng ·
       gạch đứt · đoạn mono · gạch đứt · ảnh "who" 211 + chú thích · danh sách vai trò + nút About us ·
       vòng 2 + vòng 3 cạnh nhau (176) · dải màu 9 × 44.4 · ảnh gốm 440 + nút Explore gallery đè góc dưới trái ·
       mảng gạch neon 212 · dải tròn lime 96 · thanh tối "(12) Events at bootcamp". */
  .hs-about{--q:calc(100vw / 375); display:flex; flex-direction:column; align-items:center; gap:0; padding:calc(16 * var(--q)) calc(12 * var(--q)) 0}
  .hs-about > *, .hs-about .circle{flex:none}
  .hs-about .circles, .hs-about .circles > div:not(.circle), .hs-about__pills{display:contents}
  .hs-about .hs-about__statement{order:1; align-self:stretch; width:auto; font-size:calc(36 * var(--q)); line-height:.8; letter-spacing:-.02em; color:#0d0d0d}
  .hs-about__grass{order:2; width:100vw; height:calc(660 * var(--q)); margin-top:calc(27 * var(--q)); aspect-ratio:auto}
  .hs-about img.hs-about__grass--m{display:block}
  .hs-about img.hs-about__grass:not(.hs-about__grass--m){display:none}
  /* vòng tròn: 351 (vạch 339 lệch 6, lõi 243 lệch 54 — đúng tỉ lệ bản desktop 468 / 452 / 324) */
  .hs-about .circle{width:calc(351 * var(--q)); height:calc(351 * var(--q))}
  .hs-about .circle .tex{left:1.71%; top:1.71%; width:96.58%; height:96.58%}
  .hs-about .circle .core{left:15.38%; top:15.38%; width:69.23%; height:69.23%}
  .hs-about .circle[data-creature="butterfly"]{order:3; margin-top:calc(16 * var(--q))}
  /* câu chữ nằm giữa lõi vòng 1: kéo lên nửa vòng + nửa cao khối chữ (3 dòng × 14 × .98 ≈ 41) */
  .hs-about__note{order:4; position:relative; z-index:2; height:42px; margin:calc(-175.5 * var(--q) - 21px) 0 0; align-self:center;
    color:#fffef8; font-weight:500; font-size:14px; line-height:.98; letter-spacing:-.02em; text-align:center; white-space:nowrap}
  .hs-about .dash{position:relative; top:auto !important; left:auto; width:100%}
  .hs-about .dash:nth-of-type(1){display:none}
  .hs-about .dash:nth-of-type(2){order:5; margin-top:calc(175.5 * var(--q) - 21px + 96 * var(--q))}
  .hs-about__roots{order:6; width:calc(294 * var(--q)); margin:40px 0; font-size:14px; line-height:.96; letter-spacing:-.02em;
    text-align:center; text-transform:uppercase; color:#000; opacity:1; text-box:trim-both cap alphabetic; --tb:1}
  .hs-about .dash:nth-of-type(3){order:7}
  .hs-about__roots span{display:none} /* "[ For everyone ]" chỉ có ở desktop */
  .hs-about__friends{order:8; width:calc(211 * var(--q)); height:auto; aspect-ratio:2909 / 3878; margin-top:calc(94 * var(--q))}
  .hs-about__who{order:9; margin-top:12px; font-family:'Geist Mono',ui-monospace,monospace; font-weight:500; font-size:14px; line-height:.96;
    letter-spacing:-.02em; text-align:center; white-space:nowrap}
  .hs-about__roles{order:10; width:auto; align-items:center; gap:4px; margin-top:calc(92 * var(--q))}
  .hs-about__roles li{font-size:calc(40 * var(--q)); line-height:.78; letter-spacing:-.02em; text-align:center; white-space:nowrap; text-box:trim-both cap alphabetic; --tb:1}
  .hs-about__pills .pill--lime{order:11; width:144px; height:52px; margin-top:12px}
  .hs-about__pills .pill{font-size:14px; letter-spacing:-.02em; min-height:0}
  /* vòng 2 + 3 đứng cạnh nhau, mỗi vòng 176 (hàng 352), cách nút About us 120 (Figma 697:53991) */
  .hs-about .circles > div:not(.circle){display:flex; order:12; width:calc(352 * var(--q)); justify-content:space-between; margin-top:calc(120 * var(--q))}
  .hs-about .circle[data-creature="koi"], .hs-about .circle[data-creature="frog"]{width:calc(176 * var(--q)); height:calc(176 * var(--q)); margin:0}
  .hs-about .circle__t{position:absolute; inset:0; display:grid; place-items:center; font-family:'Geist Mono',ui-monospace,monospace; font-weight:500;
    font-size:13px; line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:#0f1513; pointer-events:none}
  .hs-about .hs-about__passion{display:none} /* Figma mobile không có câu "All you need is passion" */
  /* phần dưới tràn hết bề ngang */
  .hs-about__scheme{order:13; width:100vw; margin-top:calc(8 * var(--q))}
  .hs-about__scheme .scheme > i, .hs-about__scheme > i{height:calc(400 / 9 * var(--q))} /* 9 hàng = 400 */
  /* ảnh gốm 440 + gạch neon 212 + dải chấm 96 = 748 = đúng một màn thấy được dưới header (--v) */
  .hs-about{--v:calc((var(--vp) - var(--bar)) / 748)}
  .hs-about__rock{order:14; width:100vw; height:calc(440 * var(--v)); aspect-ratio:auto}
  .hs-about__pills .pill--green{order:15; display:flex; align-items:center; position:relative; z-index:2; align-self:flex-start; width:auto; height:52px; padding:0 32px;
    margin:calc(-52px - 12 * var(--q)) 0 calc(12 * var(--q))}
  .hs-about__field{order:16; width:100vw; height:calc(212 * var(--v))}
  .hs-about__band{order:17; width:100vw; height:auto; flex-direction:column; align-items:stretch; gap:0; padding:0}
  .hs-about__band .dotrun{--u:calc(66 * var(--v) / 164); width:100%; height:calc(96 * var(--v))}
  .hs-about__band .dotrun__track{left:0; top:calc(15 * var(--v))}
  .hs-about .hs-about__band h2{width:auto; padding:16px 12px; font-size:calc(40 * var(--q)); line-height:.78; letter-spacing:-.04em}

  /* 10. Quote — Figma Testimonial mobile (623:14309, khổ 375; cỡ co theo bề ngang): một màn dưới
     header. Lưới: lời cảm nhận trên cùng, cụm tên dồn xuống đáy phần chữ, hàng ảnh (thẻ 150 | ảnh
     nền 225, cao 174), đáy là thanh chạy + nút ‹ ›. Khối chữ cũ / mới lúc đổi người nằm CÙNG ô lưới
     nên chồng khít nhau (như abs ở desktop). */
  .hs-quote{--q:calc(100vw / 375); height:auto; min-height:calc(var(--vp) - var(--bar)); display:grid; /* lời dài + màn thấp: cao thêm, không chồng chữ */
    grid-template-columns:40% 1fr 57px 56px; grid-template-rows:auto 1fr auto calc(174 * var(--q)) 56px;
    grid-template-areas:"t t t t" ". . . ." "b b b b" "c s s s" "bar bar p n"}
  .hs-quote > .abs{position:relative}
  /* cỡ chữ: 36 ở khổ 375 theo bề ngang; màn thấp thì chande-home.js ghi --qfs nhỏ lại cho vừa một màn */
  .hs-quote__text{grid-area:t; width:auto; padding:16px 12px 0; font-size:var(--qfs, calc(36 * var(--q)))}
  .hs-quote__by{grid-area:b; margin:0; padding:24px 12px 16px; gap:12px; align-self:end}
  .hs-quote__by::before{height:29px; min-height:0}
  .hs-quote__by::after{left:12px; top:calc(50% + 4px); height:29px} /* tâm phần chữ: padding trên 24 / dưới 16 */
  .hs-quote__by div{gap:8px}
  .hs-quote__by p{font-size:14px; line-height:.96; letter-spacing:-.02em}
  .hs-quote__sign{display:none}
  .hs-quote__card{grid-area:c; width:auto; height:100%; margin:0; top:auto; left:auto}
  .hs-quote__card img{height:100%; aspect-ratio:auto}
  .hs-quote__card::after{display:none}
  .hs-quote__strip{grid-area:s; width:100%; height:100%}
  .hs-quote > .hs-quote__bar{grid-area:bar; position:relative; left:auto; bottom:auto; width:auto; height:56px}
  .hs-quote > .hs-quote__nav{position:relative; left:auto; right:auto; bottom:auto; width:56px; height:56px}
  .hs-quote > .hs-quote__nav--prev{grid-area:p}
  .hs-quote > .hs-quote__nav--next{grid-area:n}
  .hs-quote__nav img{width:24px; height:24px}

  /* 11. Dải màu — Figma mobile (688:53773): 9 vạch × 44.44 = 400 ở khổ 375 */
  .hs-colors .scheme > i{height:calc(400 / 9 * var(--q, 100vw / 375))}
  .hs-colors{--q:calc(100vw / 375)}

  /* 12. Footer — Figma mobile (688:53584, khổ 375). Lưới 1 cột (.hs-foot__col display: contents):
       phần trên (khổ --q) — mảng gạch neon 96 · nút Become a partner 64 (ô chấm trái) · nút Register 64
               (ô chấm phải) · Social (+ Made by Lumen. phải) · kẻ 12–363 · Site index (+ Back to top phải),
               kẻ ngang hết bề rộng
       phần dưới = ĐÚNG MỘT MÀN dưới header (--V, Figma "1 viewport"; khổ --s co theo màn thấp): logo 351 ·
               cụm tên 1 · cụm tên 2 · (giãn) · ảnh mặt 117 × 135 · cụm tên 3 · kẻ · bản quyền
     Phần trên Figma cao 628 -> min-height = 628q + V để phần dưới tròn một màn. */
  .hs-foot{--q:calc(100vw / 375); --V:calc(var(--vp) - var(--bar)); display:grid; grid-template-columns:100%; gap:0; padding:0;
    min-height:calc(var(--foot-top, calc(628 * var(--q))) + var(--V)); /* --foot-top: đỉnh hàng logo, chande-home.js đo -> cuộn hết trang thì logo cách header đúng 12px */
    grid-template-rows:calc(96 * var(--q)) calc(64 * var(--q)) calc(64 * var(--q)) auto auto auto auto auto auto minmax(calc(12 * var(--s)), 1fr) auto auto auto}
  .hs-foot__col{display:contents}
  .hs-foot > *, .hs-foot__col > *{margin:0; grid-column:1}
  .hs-foot__field{grid-row:1; width:100%; height:100%}
  .cta{width:100% !important; height:calc(64 * var(--q)); font-size:max(14px, calc(16 * var(--q, .875px)))} /* chữ nút mobile không dưới 14px (trang không có --q, màn 320) */
  .cta i{width:calc(64 * var(--q)); gap:6px}
  .cta span{padding-left:calc(24 * var(--q)); gap:3px}
  .cta span small{font-size:max(9px, calc(11 * var(--q)))}
  /* ô chấm: 7 chấm mũi tên dồn thành 4 chấm 2 × 2 như Figma (rê / chạm thì vẫn bay mũi tên như desktop) */
  .hs-foot__cta1{grid-row:2}
  .hs-foot__cta2{grid-row:3; flex-direction:row-reverse; justify-content:space-between}
  .hs-foot__panel{grid-row:5 / 7; width:100%; height:auto; background:none; border-bottom:1px solid rgba(255,255,255,.08)}
  .hs-foot__hr, .hs-foot__vr{display:none}
  .links{width:auto; justify-content:space-between; align-items:flex-end; gap:1rem}
  .links ul{margin-top:calc(24 * var(--q)); gap:calc(8 * var(--q)); font-size:calc(14 * var(--q)); line-height:.98} /* mỗi dòng 14 như Figma */
  .links a{font-size:calc(14 * var(--q)); color:#5e6464}
  .links ul a{margin-bottom:-2px} /* bù 2px đệm gạch chân của [data-scramble] -> mỗi dòng đúng 14 như Figma */
  .links .mono{font-size:calc(14 * var(--q)); line-height:.96; text-box:trim-both cap alphabetic} /* cắt như Figma: [ Social ] cao đúng chữ hoa */
  .hs-foot__social, .hs-foot__index{position:relative; z-index:1; margin:0 12px}
  /* Figma 697:55460: khối ghi công (nền xám mờ, 3 dòng mono) ngay dưới 2 nút · Social: (Made by Lumen) cùng hàng tiêu đề, canh phải ·
     Site index: [ Back to top ][ → ] cùng hàng tiêu đề, canh phải */
  .hs-foot .hs-foot__credits{grid-row:4; display:flex; flex-direction:column; gap:4px; position:relative; z-index:1; margin:0; padding:32px 12px;
    background:rgba(217,217,217,.12); font-size:14px; line-height:.96; letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap}
  .hs-foot__credits p{margin:0; text-box:trim-both cap alphabetic; --tb:1}
  .hs-foot__credits a{color:rgba(255,255,255,.3); text-decoration:none}
  .hs-foot__end .hs-foot__credit{display:none}
  .hs-foot__social, .hs-foot__index{align-items:flex-start}
  .hs-foot__social{grid-row:5; padding:calc(32 * var(--q)) 0 calc(48 * var(--q))}
  .hs-foot__social > p:not(.hs-foot__lumen){display:none} /* Figma mobile: bên phải là credit Lumen thay Patreon */
  .hs-foot__lumen{display:block !important; margin:0; white-space:nowrap}
  .hs-foot__index{grid-row:6; padding:calc(32 * var(--q)) 0 calc(64 * var(--q)); border-top:1px solid rgba(255,255,255,.08)}
  .hs-foot__end{flex-direction:column; justify-content:flex-start; gap:calc(16 * var(--q)); align-self:flex-start} /* [ Back to top ] cùng hàng tiêu đề (Figma 697:55460) */
  .hs-foot__end .hs-foot__credit{white-space:normal; font-size:max(9px, calc(10 * var(--q))); line-height:1.4; text-box:none} /* ghi công model 3D (CC BY 4.0) */
  .hs-foot__end .hs-foot__credit a{font-size:inherit}
  .hs-foot__logo{grid-row:7; justify-self:center; width:calc(100% - 24px); max-width:none; height:auto; margin:12px 12px 0} /* logo luôn đủ bề ngang (trước co theo chiều cao màn để cả cụm vừa một màn -> iPhone thấp thì logo hẹp) */
  /* tên co theo BỀ NGANG (--q) như logo -> dòng dài nhất dài đúng bằng logo ở mọi máy; không dưới 14px */
  .names{width:auto; gap:calc(4 * var(--q)); font-size:12px; line-height:.9; letter-spacing:-.02em; white-space:nowrap; color:#838b89} /* Kaixa: tên 12px */
  .hs-foot__n1{grid-row:8; margin:calc(16 * var(--q)) 12px 0}
  .hs-foot__n2, .hs-foot__col > .hs-foot__n2{grid-row:9; margin:calc(32 * var(--q)) 12px 0; gap:calc(16 * var(--q))}
  .hs-foot__n2 .pair{width:calc(237.6 * var(--q)); justify-content:space-between}
  .hs-foot__n2 > div{gap:calc(4 * var(--q))}
  .hs-foot__col > .hs-foot__face{grid-row:11; justify-self:start; width:calc(117 * var(--s)); height:calc(135 * var(--s)); max-height:none; aspect-ratio:auto; flex:none;
    margin:0 12px !important; clip-path:none} /* !important: thẻ có style="margin:0" */
  .hs-foot__n3{grid-row:12; margin:calc(12 * var(--q)) 12px 0}
  .hs-foot__legal{grid-row:13; position:relative; z-index:1; width:auto; margin:12px 0 0; padding:20px 12px;
    border-top:1px solid rgba(255,255,255,.08); font-size:12px} /* Kaixa: dòng bản quyền 12px */
  .hs-foot__legal > p:not(:first-child){display:none} /* Figma mobile: chỉ dòng bản quyền (credit Lumen ở khối Social) */
  /* màn rất hẹp (< 360, vd. iPhone SE đời đầu): 14px thì vài dòng tên dài hơn màn -> cho xuống dòng ở chỗ " / " */
  @media (max-width:359px){ .hs-foot .names, .hs-foot .names span{white-space:normal} }
}
@media (prefers-reduced-motion:reduce){
  .pillrun__track, .dotrun__track, .hs-quote__bar span{animation:none}
}

/* =============================================================================
 * TRANG ABOUT — Hero (Figma node 594:47170, khổ 1920×1080)
 * `--u` = 1px bản thiết kế khổ 1920 (theo bề rộng .page). Hai hàng cao bằng nhau,
 * mỗi hàng nửa phần viewport dưới header (500 ở 1080), không thấp hơn 360u:
 *   trên  [0..960] ảnh nhà sàn (trên nền tối) | [960..1920] mảng tối,
 *         chữ giới thiệu ở cột 1428, chân cách đáy hàng 40
 *   dưới  [0..960] mảng kem, tiêu đề + (©26) chân cách đáy 24
 *         | [960..1920] mảng gạch neon
 * Các mảng là 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 thẻ ở about.html, chande-hero.js gắn tile); gạch neon do chande-field.js (cả stage là
 * một field-root: một canvas).
 * ========================================================================== */
.ab-hero{background:var(--cream)}
.ab-hero__stage{
  --u:calc(100cqw / 1920);
  --band:max(calc((100svh - var(--bar)) / 2), calc(360 * var(--u)));
  position:relative; height:calc(2 * var(--band));
}
.ab-hero__photo, .ab-hero__dark, .ab-hero__cream, .ab-hero__field{position:absolute; height:var(--band)}
.ab-hero__photo{left:0; top:0; width:calc(960 * var(--u)); overflow:hidden; background-color:#182220}
.ab-hero__photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
/* thanh tối 57 + dải viên nhỏ ở đầu mảng kem, ngay dưới ảnh (kiểu .agenda__house) */
.ab-hero__bar{position:absolute; left:0; right:0; top:0; height:calc(57 * var(--u)); background:#1b2524}
.ab-hero__bar .pillrun{position:absolute; left:calc(14.25 * var(--u)); right:calc(14.25 * var(--u)); top:calc(11.88 * var(--u)); height:calc(33.25 * var(--u))}
.ab-hero__dark{left:calc(960 * var(--u)); right:0; top:0; background-color:#131313}
.ab-hero__cream{left:0; top:var(--band); width:calc(960 * var(--u)); background-color:#f4f3eb}
.ab-hero__field{left:calc(960 * var(--u)); right:0; top:var(--band)}

.ab-hero__intro{
  position:absolute; left:calc(468 * var(--u)); bottom:calc(32 * var(--u)); width:calc(234 * var(--u));
  display:flex; flex-direction:column; gap:1.5rem;
  color:#f4f3eb; font-weight:500; font-size:1rem; line-height:calc(.98em + 2px); letter-spacing:-.02em;
  white-space:nowrap;
}
/* cắt sát đỉnh cap / chân chữ: đáy khối = chân dòng cuối -> thẳng hàng chân chữ "Scroll more" */
.ab-hero__intro p{margin:0; text-box:trim-both cap alphabetic; --tb:1}
/* số năm góc phải: cùng kiểu chữ, chân chữ thẳng chân dòng cuối của khối giới thiệu */
.ab-hero__years{position:absolute; right:calc(32 * var(--u)); bottom:calc(32 * var(--u)); margin:0;
  color:#f4f3eb; font-weight:500; font-size:1rem; line-height:calc(.98em + 2px); letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap;
  text-box:trim-both cap alphabetic; --tb:1}
/* Scroll more (kiểu .hero__scroll trang chủ), không nền: cách lề phải 24, chân chữ
   thẳng chân dòng cuối chữ giới thiệu (cùng cách đáy hàng 40, cả hai cắt sát chân chữ) */
.ab-hero__scroll{
  position:absolute; right:calc(24 * var(--u)); bottom:calc(40 * var(--u));
}
.ab-hero__scroll .hero__scroll{position:static}

/* Tiêu đề 3 dòng + (©26): cùng kiểu chữ tiêu đề hero trang chủ, chân chữ cách đáy 24 */
.ab-hero__title, .ab-hero__year{
  position:absolute; bottom:calc(24 * var(--u)); margin:0;
  color:#000; font-weight:700; font-size:calc(106 * var(--u)); line-height:.72; letter-spacing:-.04em; /* 106 khổ 1920 — co giãn cùng chữ câu chuyện bên dưới */
  text-box:trim-both cap alphabetic; --tb:1;
}
.ab-hero__title{left:calc(24 * var(--u)); width:calc(708 * var(--u)); white-space:nowrap} /* đúng 3 dòng như Figma (<br>) */
.ab-hero__year{right:calc(24 * var(--u)); white-space:nowrap}
.ab-hero__year span{font-family:'Google Sans Flex','Phudu',sans-serif; font-size:.645em; letter-spacing:0; vertical-align:.37em}

@media (min-width:900px){ .ab-hero__title br.m{display:none} } /* xuống dòng chỉ ở mobile */
/* Màn hẹp — Figma About mobile 659:42992 (khổ 375, --q = 1px khổ 375), cả cụm = một màn thấy được dưới header:
   mảng trắng (tiêu đề 4 dòng cỡ 56 sát trên, (©26) góc dưới phải, thanh tối 48 + dải viên 72 × 28 ở đáy) co giãn
   theo chiều cao màn · khối tối 266 (ảnh 176 × 96 góc trên trái, 2 cụm chữ + "2020 – 2026" sát đáy) · gạch neon 32. */
@media (max-width:899px){
  .ab-hero{background:#fff}
  /* --hq = 1px khổ 375 nhưng không quá (màn thấy được − header) / 577 (577 = phần tối thiểu: tiêu đề + (©26) + thanh 48 +
     khối tối 266 + gạch neon 32) -> màn thấp (iPhone 11 Safari ~540) thì cả cụm nhỏ lại chút cho vừa đúng một màn */
  .ab-hero__stage{--hq:min(calc(100vw / 375), calc((var(--vp, 100svh) - var(--bar)) / 577)); height:auto; min-height:calc(var(--vp, 100svh) - var(--bar)); display:flex; flex-direction:column}
  .ab-hero__photo, .ab-hero__dark, .ab-hero__cream, .ab-hero__field{position:relative; left:auto; right:auto; top:auto; width:auto}
  .ab-hero__cream{order:1; flex:1 0 auto; height:auto; display:flex; flex-direction:column; gap:0;
    padding:calc(12 * var(--hq)) calc(12 * var(--hq)) 0; background:#fff !important} /* Figma: nền trắng */
  .ab-hero__title{order:1}
  .ab-hero__year{order:2; margin:auto 0 calc(11 * var(--hq)); padding-top:calc(8 * var(--hq))}
  /* thanh tối + dải viên chạy ở đáy mảng trắng, ngay trên khối tối (Figma 697:54815, như ảnh ngày 2 Agenda) */
  .ab-hero__bar{order:3; position:relative; flex:none; align-self:auto; margin:0 calc(-12 * var(--hq)); height:calc(48 * var(--hq)); overflow:hidden}
  .ab-hero__bar .pillrun{left:0; right:0; top:calc(10 * var(--hq)); height:calc(28 * var(--hq))}
  .ab-hero__bar .pillrun__track{gap:1px; animation-name:hs-pills-ag}
  .ab-hero__bar .pillrun__track > i, .ab-hero__bar .pillrun--sm .pillrun__track > i{width:calc(72 * var(--hq)); height:calc(28 * var(--hq))}
  .ab-hero__title, .ab-hero__year{position:static; font-size:calc(56 * var(--hq))}
  .ab-hero__title{width:auto}
  .ab-hero__title br.d{display:none}
  .ab-hero__year{align-self:flex-end}
  /* ảnh nằm TRONG khối tối: vào luồng trước khối tối, khối tối kéo lên phủ phía sau (12 + 96) */
  .ab-hero__photo{order:2; z-index:1; width:calc(176 * var(--hq)); height:calc(96 * var(--hq)); margin:calc(12 * var(--hq)) 0 0 calc(12 * var(--hq))}
  .ab-hero__dark{order:3; height:calc(266 * var(--hq)); margin-top:calc(-108 * var(--hq)); padding:0 calc(12 * var(--hq)) calc(13 * var(--hq));
    display:flex; flex-direction:column; justify-content:flex-end}
  .ab-hero__intro{position:static; width:auto; gap:calc(24 * var(--hq)); font-size:calc(16 * var(--hq))}
  .ab-hero__intro p{text-box:none}
  .ab-hero__years{position:absolute; right:calc(12 * var(--hq)); bottom:calc(13 * var(--hq)); font-size:calc(16 * var(--hq)); text-box:none}
  .ab-hero__scroll{display:none}
  .ab-hero__field{order:4; height:calc(32 * var(--hq))}
}

/* =============================================================================
 * TRANG ABOUT — phần dưới hero (Figma About 581:41898, khổ 1920). --u = 1px thiết kế,
 * toạ độ tính từ đỉnh từng section.
 *   .ab-story (đen, 4063): dải chấm tròn 240 · đoạn chữ lớn 1 (24, 272) + 2 (726, 690) cỡ 106 xen 3
 *     viên thuốc trang trí (vàng / lime / cam + con mắt) · ảnh người sáng lập 234 × 324 · 2 vòng tròn
 *     468 · 2 cột 936: [sọc 4 màu · khung Visual focus 400 · gạch neon 144] [dải viên thuốc 56 ·
 *     gạch neon 144 · khung Sharing & learning 400] · ảnh lớn 1872 × 900 · dải màu 9 × 60
 *   .ab-events (kem, 1080): khung tối 960 × 540 "Memorable events (05)" | gạch neon · chữ mono ·
 *     ảnh 468 × 262 · danh sách sự kiện cỡ 48, năm canh phải
 * ========================================================================== */
.ab-story{height:calc(4063 * var(--u)); background:#000; color:#fff}
.ab-story > .dotrun{position:absolute; left:0; right:0; top:0; height:calc(240 * var(--u)); background:#40ce00}
.ab-story > .dotrun .dotrun__track{position:absolute; left:calc(48 * var(--u)); top:calc(38 * var(--u)); height:calc(164 * var(--u))}
.ab-say{margin:0; font-weight:700; font-size:calc(106 * var(--u)); line-height:.78; letter-spacing:-.04em; text-box:trim-both cap alphabetic; --tb:1}
.ab-say span{display:block}
.ab-say__in{padding-left:calc(323 * var(--u))}
.ab-say__gap{height:.78em}
.ab-say--1{left:calc(24 * var(--u)); top:calc(272 * var(--u)); width:calc(1872 * var(--u))}
.ab-say--2{left:calc(726 * var(--u)); top:calc(690 * var(--u)); width:calc(1170 * var(--u))}
/* viên thuốc trang trí: viền màu dày 10, lòng đen; viên cam có con mắt */
.ab-pill{height:calc(74 * var(--u)); border-radius:999px; display:grid; place-items:center}
.ab-pill::after{content:''; position:absolute; inset:calc(10 * var(--u)); border-radius:999px; background:#000}
.ab-pill--1{left:calc(118 * var(--u)); top:calc(355 * var(--u)); width:calc(208 * var(--u)); background:#fab700}
.ab-pill--2{left:calc(1162 * var(--u)); top:calc(690 * var(--u)); width:calc(208 * var(--u)); background:var(--lime)}
.ab-pill--3{left:calc(1370 * var(--u)); top:calc(1105 * var(--u)); width:calc(128 * var(--u)); background:#f65500}
.ab-eye{position:relative; z-index:1; width:calc(70 * var(--u)); height:calc(42 * var(--u)); overflow:hidden} /* khung con mắt (chande-eye.js) */
.ab-pill img{display:block; width:100%; height:100%; object-fit:cover}
/* ảnh người sáng lập: sticky top (cách thanh menu 24px), dừng khi chân ảnh ngang chân 2 vòng tròn (1679) */
.ab-founder__pin{left:calc(24 * var(--u)); top:calc(855 * var(--u)); width:calc(234 * var(--u)); height:calc((1679 - 855) * var(--u))}
.ab-founder{position:sticky; top:calc(var(--bar) + 24px); display:block; width:100%; height:calc(324 * var(--u)); object-fit:cover}
.ab-circles{left:calc(726 * var(--u)); top:calc(1211 * var(--u)); display:flex}
.ab-cols{left:calc(24 * var(--u)); top:calc(1999 * var(--u)); width:calc(1872 * var(--u)); display:flex}
.ab-col{width:50%; display:flex; flex-direction:column}
.ab-stripes{display:flex; flex-direction:column}
.ab-stripes i{height:calc(14 * var(--u))}
.ab-stripes i:nth-child(1){background:var(--lime)}
.ab-stripes i:nth-child(2){background:#245535}
.ab-stripes i:nth-child(3){background:#182220}
.ab-stripes i:nth-child(4){background:#d6c59b}
.ab-run{position:relative; height:calc(56 * var(--u)); background:#182220}
.ab-run .pillrun{position:absolute; left:calc(16 * var(--u)); right:calc(16 * var(--u)); top:calc(11 * var(--u)); height:calc(33.25 * var(--u))}
.ab-field{height:calc(144 * var(--u))}
.ab-panel{position:relative; height:calc(400 * var(--u))}
.ab-panel--a{background:#182220}
.ab-panel--b{background:#181818}
.ab-panel__t{position:absolute; left:calc(32 * var(--u)); top:calc(32 * var(--u)); margin:0; color:#5c6161; font-weight:700; font-size:calc(48 * var(--u)); line-height:.78; letter-spacing:-.02em; white-space:nowrap; text-box:trim-both cap alphabetic; --tb:1}
.ab-panel__text{position:absolute; left:calc(32 * var(--u)); top:calc(238 * var(--u)); display:flex; flex-direction:column; gap:calc(32 * var(--u))}
/* Figma: nhãn [ … ] một dòng; đoạn chữ rộng 462 (panel trái) / 452 (panel phải) */
.ab-panel__text p:first-child{white-space:nowrap}
.ab-panel__text p:last-child{width:calc(462 * var(--u)); min-width:15rem}
.ab-panel--b .ab-panel__text p:last-child{width:calc(452 * var(--u))}
.ab-panel__text p{margin:0; font-size:max(11px, calc(16 * var(--u))); line-height:.96; letter-spacing:-.02em; color:rgba(255,255,255,.3); text-box:trim-both cap alphabetic; --tb:1}
.ab-group{left:calc(24 * var(--u)); top:calc(2599 * var(--u)); width:calc(1872 * var(--u)); height:calc(900 * var(--u)); object-fit:cover}
.ab-scheme{left:calc(24 * var(--u)); top:calc(3499 * var(--u)); width:calc(1872 * var(--u))}

/* --vx: màn sự kiện (từ đáy khung tối tới đáy ảnh sticky) = đúng 1 viewport dưới thanh menu. Figma
   1920 × 1080: cao 1000 -> --vx = 0; màn cao hơn / thấp hơn thì mọi thứ từ danh sách trở xuống dời
   theo (chặn dưới −300 cho màn quá dẹt khỏi đè tiêu đề). */
.ab-events{--vx:max(-300 * var(--u), 100svh - var(--bar) - 1000 * var(--u)); height:calc(4416 * var(--u) + var(--vx)); background:#fffef8; color:#0e1813; overflow:visible; z-index:2}
.ab-events__dark{left:0; top:0; width:calc(960 * var(--u)); height:calc(540 * var(--u)); background:#112020}
.ab-events__logo{position:absolute; left:calc(24 * var(--u)); top:calc(24 * var(--u)); width:calc(104 * var(--u)); height:auto; filter:invert(1)}
.ab-events__t{position:absolute; left:calc(24 * var(--u)); top:calc(359 * var(--u)); margin:0; color:#fff; font-weight:700; font-size:calc(106 * var(--u)); line-height:.78; letter-spacing:-.04em; white-space:nowrap; text-box:trim-both cap alphabetic; --tb:1}
.ab-events__t span{display:block}
.ab-events__t span{white-space:pre} /* Figma: "EVENTS      (07)" — 6 dấu cách */
.ab-events__t em{font-style:normal}
.ab-events__field{right:0; top:0; width:calc(960 * var(--u)); height:calc(540 * var(--u))}
/* chữ mono "Every year…" (Figma 648:47416): lề 24, sticky top cách thanh menu 24px. Khung ghim kết
   thúc cách đỉnh vị trí cuối của khối ảnh 24px -> ảnh dừng là chữ cũng dừng, cùng trôi lên (ảnh "đẩy"
   chữ, luôn hở 24px). Đỉnh cuối khối ảnh = đáy khung ảnh (1027 + 1902) − khối ảnh (484 + chữ hoa chú
   thích) -> cao khung = 2929 − 484 − 540 = 1905 − chữ hoa − 24px − 24px. */
.ab-events__notepin{left:calc(24 * var(--u)); top:calc(540 * var(--u) + 24px); width:calc(234 * var(--u)); min-width:12rem; height:calc(1905 * var(--u) + var(--vx) - .71 * max(11px, 16 * var(--u)) - 48px)}
.ab-events__note{position:sticky; top:calc(var(--bar) + 24px); margin:0; font-size:max(11px, calc(16 * var(--u))); line-height:.96; letter-spacing:-.02em; color:#0e1813; text-box:trim-both cap alphabetic; --tb:1}
.ab-events__note p{margin:0}
.ab-events__note p + p{margin-top:.96em}
.ab-events__chande{position:absolute; right:0; bottom:0} /* "(Chande)" cuối dòng chót */
/* ảnh sticky đáy: đứng ngang danh sách (Figma 639:47353 — đỉnh 1027), cuộn thì ghim cách đáy màn 24px,
   dừng ngang đáy đoạn Vision / Mission (2929) */
.ab-events__pin{left:calc(24 * var(--u)); top:calc(1027 * var(--u) + var(--vx)); width:calc(468 * var(--u)); height:calc(1902 * var(--u)); display:flex; flex-direction:column; justify-content:flex-end} /* ảnh nằm cuối khung -> sticky bottom kéo nó lên đáy màn, chặn ở đỉnh khung */
.ab-events__stick{position:sticky; bottom:24px; flex:none; display:flex; flex-direction:column; gap:calc(16 * var(--u))}
.ab-events__cap{display:flex; justify-content:space-between; gap:1rem; margin:0; font-size:max(11px, calc(16 * var(--u))); color:#0e1813}
.ab-events__cap span{text-box:trim-both cap alphabetic; --tb:1} /* flex: cắt ở từng mục, dòng cao đúng chữ hoa như Figma */
.ab-events__img{position:relative; display:block; width:100%; height:calc(468 * var(--u)); overflow:hidden} /* vuông */
/* đổi ảnh: đoàn shape màu từ góc dưới trái (chande-steps.js + chande-reveal.js); dự phòng khi
   không có đoàn shape: ảnh mới loang ra từ góc dưới trái (vòng tròn clip-path phình) đè lên ảnh cũ (is-prev,
   giữ nguyên bên dưới); ảnh khác ẩn ngay, không chạy hiệu ứng */
.ab-events__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:circle(0% at 0% 100%); z-index:0}
.ab-events__img img.is-prev{clip-path:circle(150% at 0% 100%); z-index:1}
.ab-events__img img.is-on{clip-path:circle(150% at 0% 100%); z-index:2; transition:clip-path .8s cubic-bezier(.65, 0, .35, 1)}
.ab-events__img.no-anim img{transition:none} /* đoàn shape (chande-steps.js) đã lo phần chuyển */
.ab-events__ach{left:calc(960 * var(--u)); top:calc(564 * var(--u)); margin:0; color:#0e1813}
/* danh sách 7 sự kiện + năm (cột năm rộng 95 sát mép phải), 32 dưới là 4 sọc màu */
.ab-events__listbox{left:calc(960 * var(--u)); top:calc(1027 * var(--u) + var(--vx)); width:calc(936 * var(--u)); display:flex; flex-direction:column; gap:calc(32 * var(--u))}
.ab-events__list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:calc(4 * var(--u));
  font-weight:700; font-size:calc(48 * var(--u)); line-height:.78; letter-spacing:-.02em}
.ab-events__list li{position:relative; text-box:trim-both cap alphabetic; --tb:1} /* khối thường (flex không cắt sát chữ) -> dòng sát như Figma */
.ab-events__list li span{position:absolute; left:calc(841 * var(--u)); top:0}
.ab-stripes--thin i{height:calc(8 * var(--u))}
.ab-stripes--rev{flex-direction:column-reverse}

/* vòng "Key members" (Figma 648:47453, 936): nền neon · vạch 904 · lõi 648 · nội dung giữa lõi */
.ab-member{left:calc(960 * var(--u)); top:calc(1365 * var(--u) + var(--vx)); width:calc(936 * var(--u)); height:calc(936 * var(--u)); border-radius:50%; background:var(--lime)}
.ab-member__tex{position:absolute; left:calc(16 * var(--u)); top:calc(16 * var(--u)); width:calc(904 * var(--u)); height:calc(904 * var(--u))}
.ab-member__core{position:absolute; left:calc(144 * var(--u)); top:calc(144 * var(--u)); width:calc(648 * var(--u)); height:calc(648 * var(--u)); border-radius:50%; background:#21392a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(96 * var(--u)); color:#fffef8}
.ab-member p{margin:0; font-size:max(10px, calc(14 * var(--u))); white-space:pre; text-box:trim-both cap alphabetic; --tb:1}
.ab-member__row{display:grid; grid-template-columns:repeat(3, calc(216 * var(--u))); align-items:center; width:calc(648 * var(--u))} /* Figma: 3 ô 216 hết bề ngang lõi — tên (mép lõi -> mép ảnh) · ảnh · vai trò; chữ căn giữa ô -> ảnh luôn đúng tâm */
.ab-member__face{flex:none}
.ab-member__row > p{justify-self:center; text-align:center}
/* bubble (chande-circles.js): ảnh lõi = ảnh thành viên; .peek = ảnh lộ qua bubble; .tex = vòng vạch xoay */
.ab-member .peek{display:none}
.ab-member .peek-cv{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; pointer-events:none; z-index:2}
.ab-member__face{position:relative; width:calc(216 * var(--u)); height:calc(216 * var(--u))}
.ab-member__face img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover}
/* cung neon quanh ảnh = thanh tiến trình (chande-members.js đặt stroke-dashoffset 100 -> 0), bắt đầu từ đỉnh */
.ab-member__face{overflow:visible}
.ab-member__face img{position:relative}
.ab-member__arc{position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); pointer-events:none}
.ab-member__arc circle{fill:none; stroke:var(--lime); stroke-width:2; stroke-dasharray:100 100; stroke-dashoffset:100; stroke-linecap:round} /* không dùng non-scaling-stroke: nó tính nét đứt theo px màn -> thanh 'đầy' vẫn hụt một đoạn */
.ab-member__shape{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; z-index:1} /* canvas lớp màu toả từ tâm khi đổi ảnh (chande-members.js) */
.ab-member__arc{z-index:2}

/* Vision / Mission (Figma 648:47439): 4 sọc · 32 · chữ 702 + "(Vision)" cạnh phải dòng 1, "(Our mission)" ở chân */
.ab-vision{left:calc(960 * var(--u)); top:calc(2313 * var(--u) + var(--vx)); width:calc(936 * var(--u)); display:flex; flex-direction:column; gap:calc(32 * var(--u))}
.ab-vision__box{position:relative; text-transform:uppercase; color:#0e1813} /* cao theo chữ (cắt sát chữ hoa / chân chữ) -> nhãn ở đáy thẳng chân dòng cuối */
.ab-vision__text{width:calc(702 * var(--u))}
.ab-vision__text p:first-child{max-width:calc(690 * var(--u))} /* đoạn 1: dòng đầu vừa khít 701 -> Figma xuống dòng; hẹp chút cho ngắt giống (không thì "too." rơi dòng riêng) */
.ab-vision__text p{margin:0}
.ab-vision__text p + p{margin-top:.78em}
.ab-vision__tag{position:absolute; white-space:nowrap; text-box:trim-both cap alphabetic; --tb:1}
.ab-vision__tag--v{left:calc(793 * var(--u)); top:0}
.ab-vision__tag--m{left:calc(530 * var(--u)); bottom:0}
/* gạch đứt mảnh hết bề ngang (Figma 648:47419) */
.ab-events__hr{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(2945 * var(--u) + var(--vx)); height:1px; /* cách chân đoạn Vision / Mission 16 (Figma) */
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 4px, transparent 4px 8px)}
/* "An exciting journey" (Figma 648:47511): chú thích ở x 960, dải ảnh 234 × 175 tràn hết bề ngang — chạy ngang vô tận */
.ab-journey{left:0; right:0; top:calc(3281 * var(--u) + var(--vx))} /* cách gạch đứt 336 (Figma 240 · Kaixa: gấp đôi rồi bớt 30%) */
.ab-journey__cap{display:flex; justify-content:space-between; width:calc(468 * var(--u)); margin:0 0 0 calc(960 * var(--u)); font-size:max(11px, calc(16 * var(--u))); color:#0e1813}
.ab-journey__cap span{text-box:trim-both cap alphabetic; --tb:1}
.ab-journey__run{margin-top:calc(27 * var(--u) - .71 * max(11px, 16 * var(--u))); overflow:hidden}
.ab-journey__track{display:flex; width:max-content; animation:ab-journey var(--loop-dur, 60s) linear infinite} /* chande-members.js nhân bản ảnh cho đủ dài + nối đuôi, đặt --loop-dur theo độ dài */
.is-off .ab-journey__track{animation-play-state:paused}
.ab-journey__track img{display:block; flex:none; width:calc(234 * var(--u)); height:calc(175 * var(--u)); object-fit:cover}
@keyframes ab-journey{to{transform:translateX(-50%)}}
.ab-journey:hover .ab-journey__track{animation-play-state:paused}
/* câu lớn (Figma 639:47375): 106.7, dòng .8, rộng 1404 */
.ab-aim{left:calc(24 * var(--u)); top:calc(3515 * var(--u) + var(--vx)); width:calc(1404 * var(--u)); margin:0; color:#000; font-weight:700; font-size:calc(106.7 * var(--u)); line-height:.8; letter-spacing:-.04em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.ab-aim p{margin:0}
.ab-stamp{left:calc(1678 * var(--u)); top:calc(4130 * var(--u) + var(--vx)); width:calc(218 * var(--u)); height:auto}
.ab-events__cta{left:calc(24 * var(--u)); top:calc(4328 * var(--u) + var(--vx)); display:flex; gap:2px}
.ab-events__cta .pill{width:auto; padding-inline:calc(40 * var(--u)); white-space:nowrap}

/* chữ cạnh 2 vòng tròn (Figma 648:47558): ngay sau vòng phải (x 1662), chân thẳng chân vòng (1679 trong câu chuyện).
   z-index trên lớp bubble (10000): bubble sát mép vòng phải không khúc xạ làm méo chữ */
.ab-note{z-index:10001; left:calc(1662 * var(--u)); bottom:calc((4063 - 1679) * var(--u)); display:flex; align-items:flex-end; gap:calc(22 * var(--u)); margin:0; font-weight:500; font-size:max(11px, calc(16 * var(--u))); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:#fff; white-space:nowrap}
.ab-note p{margin:0}
.ab-note__in{padding-left:2.3em} /* Figma: 10 dấu cách đầu dòng (≈ 2.3em) */

/* ALWAYS A COMMUNITY (780): dải màu 492 | ảnh 468 | gạch neon 960 — cao 540; dải chấm + tiêu đề 240 */
.ab-comm{height:calc(780 * var(--u)); background:#112020}
.ab-comm__scheme{left:0; top:0; width:calc(492 * var(--u) + 1px)}
.ab-comm__img{left:calc(492 * var(--u)); top:0; width:calc(468 * var(--u)); height:calc(540 * var(--u)); object-fit:cover}
.ab-comm__field{right:0; top:0; width:calc(960 * var(--u)); height:calc(540 * var(--u))}
.ab-comm__band{left:0; right:0; top:calc(540 * var(--u)); height:calc(240 * var(--u)); background:#112020; display:flex; align-items:center; gap:calc(32 * var(--u))}
.ab-comm__band .dotrun{position:relative; flex:none; width:calc(960 * var(--u)); height:100%; background:var(--lime)}
.ab-comm__band .dotrun__track{position:absolute; left:calc(48 * var(--u)); top:calc(38 * var(--u)); height:calc(164 * var(--u))}
.ab-comm__band h2{margin:0; color:#fffef8; width:calc(723 * var(--u))}

/* 2 ảnh lớn nửa màn */
.ab-pics{height:calc(1080 * var(--u)); background:#000}
.ab-pics img{top:0; width:50%; height:100%; object-fit:cover}
.ab-pics__l{left:0}
.ab-pics__r{right:0}

/* Màn hẹp: chưa có design mobile — xếp dọc theo luồng, cỡ theo bề ngang */
@media (max-width:899px){
  .ab-story, .ab-events{--q:calc(100vw / 375); height:auto; display:flex; flex-direction:column; gap:calc(24 * var(--q)); padding:0 12px calc(24 * var(--q))}
  .ab-story > .abs, .ab-events > .abs{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto}
  .ab-story > .dotrun{position:relative; margin:0 calc(-12 * var(--q)); height:calc(96 * var(--q))}
  .ab-story > .dotrun .dotrun__track{--u:calc(66 * var(--q) / 164); left:0; top:calc(15 * var(--q))}
  .ab-say{font-size:calc(32 * var(--q)); margin-top:calc(24 * var(--q))}
  .ab-say__in{padding-left:0}
  .ab-pill{display:none}
  .ab-story .ab-founder__pin{width:50%; height:auto}
  .ab-story .ab-founder{position:static; height:auto; aspect-ratio:234 / 324}
  .ab-circles .circle{width:50%; height:auto; aspect-ratio:1}
  .ab-circles .circle .tex{left:1.71%; top:1.71%; width:96.58%; height:96.58%}
  .ab-circles .circle .core{left:15.38%; top:15.38%; width:69.23%; height:69.23%}
  .ab-story .ab-cols{flex-direction:column; margin:0 -12px}
  .ab-col{width:100%}
  .ab-stripes i{height:calc(8 * var(--q))}
  .ab-run{height:calc(56 * var(--q))}
  .ab-run .pillrun{--u:calc(100vw / 1100)}
  .ab-field{height:calc(96 * var(--q))}
  .ab-panel{height:auto; padding:20px 12px; display:flex; flex-direction:column; gap:calc(60 * var(--q))}
  .ab-panel__t, .ab-panel__text{position:static; width:auto; min-width:0}
  .ab-panel__t{font-size:calc(32 * var(--q))}
  .ab-panel__text{gap:20px}
  .ab-panel__text p:first-child{white-space:normal}
  .ab-panel__text p:last-child, .ab-panel--b .ab-panel__text p:last-child{width:auto; min-width:0}
  .ab-panel__text p{font-size:13px}
  .ab-story .ab-group{margin:0 -12px; width:100vw; height:calc(240 * var(--q))}
  .ab-story .ab-scheme{margin:0 -12px; width:100vw}
  .ab-scheme .scheme > i{height:calc(40 * var(--q))}
  .ab-events{gap:24px}
  .ab-events .ab-events__dark{margin:0 calc(-12 * var(--q)); width:auto; height:calc(320 * var(--q))} /* lề = đúng padding section (12q, không phải 12px) -> hết hở 1px mép trái ở màn rộng */
  .ab-events__logo{width:calc(46 * var(--q))}
  .ab-events__t{left:12px; top:auto; bottom:16px; font-size:calc(48 * var(--q))}
  .ab-events .ab-events__field{margin:0 calc(-12 * var(--q)); width:auto; height:calc(160 * var(--q))}
  .ab-events .ab-events__notepin{height:auto; min-width:0}
  .ab-events__note{position:static; font-size:13px}
  .ab-events .ab-events__pin{height:auto; display:block}
  .ab-events .ab-events__img{position:relative; width:100%; height:auto; aspect-ratio:1}
  .ab-events__list{width:auto; font-size:calc(28 * var(--q))}
  .ab-events .ab-events__ach{font-size:calc(28 * var(--q))}
  /* phần sự kiện mới: xếp dọc */
  .ab-events .ab-events__list li span{left:auto; right:0}
  .ab-events .ab-member{width:100%; height:auto; aspect-ratio:1}
  .ab-member__tex{left:1.71%; top:1.71%; width:96.58%; height:96.58%}
  .ab-member__core{left:15.38%; top:15.38%; width:69.23%; height:69.23%; gap:calc(24 * var(--q))}
  .ab-member__row{width:100%; grid-template-columns:1fr auto 1fr; gap:calc(8 * var(--q))}
  .ab-member__face{width:calc(72 * var(--q)); height:calc(72 * var(--q))}
  .ab-member p{font-size:9px}
  .ab-events .ab-events__list li{padding-right:3.4em} /* tên dài xuống dòng trước cột năm */
  .ab-vision__box{height:auto; font-size:calc(24 * var(--q)); line-height:.86; display:flex; flex-direction:column; gap:12px}
  .ab-vision__text, .ab-vision__text p:first-child{width:auto; max-width:none}
  .ab-vision__tag{position:static}
  .ab-events .ab-events__hr{width:auto; height:1px}
  .ab-events .ab-journey{margin:0 calc(-12 * var(--q)); width:auto}
  .ab-journey__cap{width:auto; margin:0 12px; font-size:12px}
  .ab-journey__run{margin-top:12px}
  .ab-journey__track img{width:calc(117 * var(--q)); height:calc(88 * var(--q))}
  .ab-events .ab-aim{font-size:calc(36 * var(--q))}
  .ab-events .ab-stamp{width:calc(120 * var(--q)); align-self:flex-end}
  .ab-events .ab-events__cta{display:flex}
  .ab-events__cta .pill{font-size:14px; padding-inline:20px; min-height:44px}
  .ab-note{flex-direction:column; align-items:flex-start; gap:8px; font-size:12px}
  .ab-events .ab-events__stick{position:static}
  .ab-comm{--q:calc(100vw / 375); height:auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .ab-comm > .abs{position:relative; left:auto; right:auto; top:auto; width:auto}
  .ab-comm .ab-comm__scheme > i{height:calc(30 * var(--q))}
  .ab-comm .ab-comm__img{width:100%; height:calc(270 * var(--q))}
  .ab-comm .ab-comm__field{grid-column:1 / -1; height:calc(96 * var(--q))}
  .ab-comm .ab-comm__band{grid-column:1 / -1; height:auto; flex-direction:column; align-items:stretch; gap:calc(20 * var(--q)); padding-bottom:calc(24 * var(--q))}
  .ab-comm__band .dotrun{--u:calc(66 * var(--q) / 164); width:100%; height:calc(96 * var(--q))}
  .ab-comm__band .dotrun__track{left:0; top:calc(15 * var(--q))}
  .ab-comm__band h2{width:auto; padding:0 12px; font-size:calc(48 * var(--q))}
  .ab-pics{--q:calc(100vw / 375); height:auto; display:flex; flex-direction:column}
  .ab-pics img{position:relative; width:100%; height:auto; aspect-ratio:960 / 1080}
}

/* About mobile — phần sự kiện → hết trang (Figma 697:54814 "Update about mobile", khổ 375, --q = 1px khổ 375).
   Màn sự kiện (cập nhật theo 697:55017): chữ mono "Every year…" · [năm] [tên] + ảnh vuông 351 (tự đổi lần lượt 7 sự kiện —
   chande-steps.js) · tiêu đề "What we have achieved (together)" · danh sách 7 sự kiện (20, kẻ đứt) · sọc 4 màu ·
   vòng Key members 350 · sọc · (Vision & Mission) + đoạn chữ 32 · [2020-2026] [an exciting journey] + dải ảnh 224 × 168 ·
   câu lớn 48 · tem 176 + nút Become a partner · dải màu 400 · dải chấm · "Always a community." · gạch neon 96 · 2 ảnh 422. */
.ab-vision__title, .ab-vision__m, .ab-journey__cap .only-m{display:none}
@media (min-width:900px){ .ab-aim br.m{display:none} } /* xuống dòng chỉ ở mobile */
@media (max-width:899px){
  .ab-events{gap:0; padding:0 calc(12 * var(--q)) calc(16 * var(--q))}
  .ab-events .ab-events__dark{order:1} .ab-events .ab-events__field{order:2}
  /* Màn sự kiện (Figma 697:55017, không ép vừa một màn): 16 · chữ mono 14 (rộng 234, "(Chande)" cuối dòng chót, mép phải 293) ·
     (co giãn) · [năm] [tên] · 12 · ảnh (tự đổi lần lượt — chande-steps.js) · 12 + 16 · tiêu đề 32 · 120 · danh sách 20 kẻ đứt */
  /* chữ mono + [năm] [tên] + ảnh = đúng MỘT màn thấy được dưới header (tiêu đề nằm ngay dưới, ngoài màn): khoảng trống giữa
     chữ và ảnh co giãn (min-height khối chữ); ảnh vuông 351, màn thấp thì thấp lại (chừa ≥ 48 dưới chữ), cách đáy màn 12 */
  .ab-events{--ev-img:min(calc(351 * var(--q)), calc(var(--vp, 100svh) - var(--bar) - 200 * var(--q)))}
  .ab-events .ab-events__notepin{order:3; margin-top:calc(16 * var(--q)); min-height:calc(var(--vp, 100svh) - var(--bar) - 51 * var(--q) - var(--ev-img))}
  .ab-events .ab-events__pin{order:4} .ab-events .ab-events__ach{order:5} .ab-events .ab-events__listbox{order:6}
  .ab-events .ab-member{order:7} .ab-events .ab-vision{order:8} .ab-events .ab-journey{order:9}
  .ab-events .ab-aim{order:10} .ab-events .ab-stamp{order:11} .ab-events .ab-events__cta{order:12}
  .ab-events .ab-events__hr{display:none}
  .ab-events__note{position:relative; top:auto; width:calc(234 * var(--q)); font:500 calc(14 * var(--q))/.96 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase}
  .ab-events__note p:first-of-type{margin-bottom:.96em} /* dòng trống sau "Every year," */
  .ab-events__note .ab-events__chande{position:absolute; left:auto; right:calc(-59 * var(--q)); bottom:0; white-space:nowrap; text-box:trim-both cap alphabetic}
  .ab-events .ab-events__pin{margin-top:0}
  .ab-events .ab-events__stick{gap:calc(12 * var(--q))}
  .ab-events .ab-events__img{height:var(--ev-img); aspect-ratio:auto}
  .ab-events .ab-events__cap{font:500 calc(14 * var(--q))/.96 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase}
  .ab-events .ab-events__ach{margin-top:calc(28 * var(--q)); font-size:calc(32 * var(--q)); line-height:.78; letter-spacing:-.02em}
  /* danh sách: chữ 20, tên rộng 263 trái · năm phải, kẻ đứt trên mỗi dòng + dưới dòng cuối, cách chữ 16 */
  /* màn 2 = tiêu đề + danh sách + sọc vừa đúng MỘT màn thấy được: 16 · tiêu đề 47 · (co giãn) · danh sách 341 · 16 ·
     sọc 32 · 12 -> khoảng co giãn = màn − 464, tối thiểu 24 (cỡ chữ đều theo --q nên các số này đúng ở mọi bề ngang) */
  .ab-events .ab-events__listbox{margin-top:max(calc(24 * var(--q)), calc(var(--vp, 100svh) - var(--bar) - 464 * var(--q))); gap:calc(16 * var(--q))}
  .ab-events .ab-events__list{gap:0; font-size:calc(20 * var(--q)); line-height:.78; letter-spacing:-.02em; border-bottom:1px dashed rgba(0,0,0,.08)}
  .ab-events .ab-events__list li{display:grid; grid-template-columns:calc(263 * var(--q)) 1fr; align-items:end; padding:calc(16 * var(--q)) 0;
    border-top:1px dashed rgba(0,0,0,.08)}
  .ab-events .ab-events__list li span{position:static; justify-self:end}
  .ab-events .ab-stripes--thin i{height:calc(8 * var(--q))}
  .ab-events .ab-stripes--rev{flex-direction:column} /* Figma mobile: cả 2 dải sọc cùng chiều (neon trên cùng) */
  .ab-events .ab-member{margin-top:calc(8 * var(--q)); width:calc(350 * var(--q))}
  /* Vision & Mission: sọc · tiêu đề 32 · cách 120 · đoạn chữ 32 */
  .ab-events .ab-vision{margin-top:calc(12 * var(--q)); gap:0}
  .ab-vision__title{display:block; margin:calc(12 * var(--q)) 0 0; font-weight:700; font-size:calc(32 * var(--q)); line-height:.78; letter-spacing:-.02em;
    text-transform:uppercase; color:#0e1813; text-box:trim-both cap alphabetic; --tb:1}
  .ab-vision__box{margin-top:calc(120 * var(--q)); font-size:calc(32 * var(--q)); line-height:.78; letter-spacing:-.02em; gap:0}
  .ab-vision__text p + p{margin-top:.78em}
  .ab-vision__tag{display:none}
  /* hành trình: chú thích mono 16 · dải ảnh 224 × 168 */
  .ab-events .ab-journey{margin-top:calc(120 * var(--q))}
  .ab-journey__cap{margin:0 calc(12 * var(--q)); font:500 calc(16 * var(--q))/.96 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase}
  .ab-journey__run{margin-top:calc(12 * var(--q))}
  .ab-journey__track img{width:calc(224 * var(--q)); height:calc(168 * var(--q))}
  .ab-events .ab-aim{margin-top:calc(12 * var(--q)); width:auto; font-size:calc(48 * var(--q)); line-height:.8; letter-spacing:-.04em}
  .ab-events .ab-stamp{margin-top:calc(117 * var(--q)); width:calc(176 * var(--q)); align-self:flex-start}
  .ab-events .ab-events__cta{margin-top:calc(12 * var(--q))}
  .ab-events__cta .pill--lime{display:none} /* Figma mobile chỉ có Become a partner */
  .ab-events__cta .pill--green{width:calc(219 * var(--q)); height:calc(56 * var(--q)); min-height:0; padding:0; justify-content:center; background:#236c3c; color:#f5f0e3}
  /* Always a community: dải màu 400 · dải chấm neon 96 · tiêu đề 56 giữa trên nền tối · gạch neon 96 (bỏ ảnh giữa) */
  .ab-comm{display:flex; flex-direction:column}
  .ab-comm .ab-comm__scheme{order:1}
  .ab-comm .ab-comm__scheme > i{height:calc(400 / 9 * var(--q))}
  .ab-comm .ab-comm__band{order:2; gap:0; padding:0}
  .ab-comm__band h2{padding:calc(32 * var(--q)); font-size:calc(56 * var(--q)); line-height:.78; letter-spacing:-.04em; text-align:center}
  .ab-comm .ab-comm__field{display:none} /* Figma 697:55254: gạch neon nằm GIỮA 2 ảnh lớn (.ab-pics__field) */
  .ab-comm .ab-comm__img{display:none}
  .ab-pics > .abs{position:relative} /* .hs .abs (absolute) thắng .ab-pics img -> 2 ảnh từng chồng lên nhau, section cao 0 */
  .ab-pics img{aspect-ratio:auto; height:calc(422 * var(--q))}
  .ab-pics .ab-pics__r{object-position:50% 97%}
  .ab-pics .ab-pics__field{display:block; position:relative; height:calc(96 * var(--q))}
}

/* About mobile — CÂU CHUYỆN (Figma 659:43221, khổ 375, --q = 1px khổ 375). Lưới một cột (.ab-cols / .ab-col display: contents
   để từng khối vào thẳng lưới): dải chấm 96 · đoạn chữ 1 (32, dòng 2 thụt 3.05em) · đoạn chữ 2 (rộng 293) · ảnh người sáng lập
   117 × 162 + ghi chú (Talent) 14 cùng hàng (chân thẳng nhau) · 2 vòng 176 có chữ Visual / Effort · sọc 4 màu · khung "06 years"
   345 · thanh viên thuốc 48 · gạch neon 96 · khung "Sharing & learning" 375 · ảnh cả nhóm 320 · dải màu 400. Rồi khung tối
   "Memorable events (07)" 199 + gạch neon 96 (section Sự kiện). */
.ab-panel__t .only-m, .ab-panel__text .only-m, .ab-pics__field{display:none}
@media (min-width:900px){ .ab-panel__t br.m{display:none} }
@media (max-width:899px){
  .ab-story{display:grid; grid-template-columns:minmax(0, 1fr); gap:0; padding:0 calc(12 * var(--q))}
  .ab-story .ab-cols, .ab-story .ab-col{display:contents}
  .ab-story > *, .ab-story .ab-col > *{min-width:0; grid-column:1} /* cột cố định: 2 khối cùng hàng (ảnh + ghi chú) chồng vào một ô, không đẻ thêm cột */
  .ab-story > .dotrun{grid-row:1; margin:0 calc(-12 * var(--q))}
  .ab-say{margin:0; font-size:calc(32 * var(--q)); line-height:.78; letter-spacing:-.04em}
  /* Figma 697:55120: đoạn chữ 1 · đoạn chữ 2 · ảnh + ghi chú = đúng MỘT màn thấy được (12 trên, 12 dưới); khoảng giữa 2 đoạn
     co giãn = màn − 587 (12 + đoạn 1 222 + đoạn 2 147 + 32 + ảnh 162 + 12, chữ theo --q nên đúng ở mọi bề ngang), tối thiểu 32 */
  /* màn thấp không đủ 619 (587 + khoảng tối thiểu 32): cả cụm này thu theo chiều cao (--q riêng cho 2 đoạn chữ + ảnh + ghi chú) */
  .ab-story .ab-say, .ab-story .ab-founder__pin, .ab-story .ab-note{--q:min(calc(100vw / 375), calc((var(--vp, 100svh) - var(--bar)) / 619))}
  .ab-story .ab-say--1{grid-row:2; margin-top:calc(12 * var(--q)); width:calc(333 * var(--q))}
  .ab-say--1 .ab-say__in{padding-left:3.05em}
  .ab-story .ab-say--2{grid-row:3; margin-top:max(calc(32 * var(--q)), calc(var(--vp, 100svh) - var(--bar) - 587 * var(--q))); width:calc(293 * var(--q))}
  /* ảnh + ghi chú cùng một ô lưới: ảnh trái, ghi chú phải, chân thẳng nhau */
  .ab-story .ab-founder__pin{grid-row:4; justify-self:start; width:calc(117 * var(--q)); height:auto; margin-top:calc(32 * var(--q))}
  .ab-story .ab-founder{position:static; width:100%; height:calc(162 * var(--q)); aspect-ratio:auto}
  .ab-story .ab-note{grid-row:4; justify-self:end; align-self:end; z-index:2; width:calc(175 * var(--q)); flex-direction:row; justify-content:space-between;
    align-items:flex-end; gap:0; font-weight:500; font-size:max(12px, calc(14 * var(--q))); line-height:.98; letter-spacing:-.02em; text-transform:uppercase;
    color:#fff; white-space:nowrap}
  .ab-note__in{padding-left:0}
  .ab-story .ab-circles{grid-row:5; display:flex; justify-content:space-between; width:calc(352 * var(--q)); margin-top:calc(84 * var(--q))} /* 12 hết màn + 72 */
  .ab-circles .circle{width:calc(176 * var(--q)); height:calc(176 * var(--q)); aspect-ratio:auto}
  .ab-circles .circle__t{position:absolute; inset:0; display:grid; place-items:center; font-family:'Geist Mono',ui-monospace,monospace; font-weight:500;
    font-size:13px; line-height:1; letter-spacing:-.02em; text-transform:uppercase; pointer-events:none}
  .ab-circles .circle[data-creature="bird"] .circle__t{color:var(--lime)}
  .ab-circles .circle[data-creature="flower"] .circle__t{color:#3f6b4c}
  /* sọc · khung 06 years · thanh viên · gạch neon · khung Sharing & learning: tràn ngang */
  .ab-story .ab-stripes, .ab-story .ab-panel, .ab-story .ab-run, .ab-story .ab-field, .ab-story .ab-group, .ab-story .ab-scheme{margin:0 calc(-12 * var(--q))}
  .ab-story .ab-col:first-child > .ab-stripes{grid-row:6; margin-top:calc(12 * var(--q))}
  .ab-story .ab-stripes i{height:calc(8 * var(--q))}
  .ab-story .ab-panel--a{grid-row:7; height:calc(345 * var(--q))}
  .ab-story .ab-col:first-child > .ab-field{display:none}
  .ab-story .ab-run{grid-row:8; height:calc(48 * var(--q))}
  .ab-story .ab-run .pillrun{left:0; right:0; top:calc(10 * var(--q)); height:calc(28 * var(--q))}
  .ab-story .ab-run .pillrun__track{gap:1px; animation-name:hs-pills-ag}
  .ab-story .ab-run .pillrun__track > i{width:calc(72 * var(--q)); height:calc(28 * var(--q))}
  .ab-story .ab-col:last-child > .ab-field{grid-row:9; height:calc(96 * var(--q))}
  .ab-story .ab-panel--b{grid-row:10; height:calc(375 * var(--q))}
  .ab-story .ab-panel{display:block; padding:0}
  .ab-story .ab-panel__t{position:absolute; left:calc(12 * var(--q)); top:calc(20 * var(--q)); font-size:calc(40 * var(--q)); line-height:.78; letter-spacing:-.02em}
  .ab-panel__t .only-d, .ab-panel__text .only-d{display:none} .ab-panel__t .only-m, .ab-panel__text .only-m{display:inline}
  .ab-story .ab-panel__text{position:absolute; left:calc(12 * var(--q)); top:calc(191 * var(--q)); width:calc(292 * var(--q)); gap:calc(24 * var(--q))} /* Figma 697:55166 */
  .ab-story .ab-panel--b .ab-panel__text{top:calc(221 * var(--q)); width:calc(293 * var(--q))}
  .ab-story .ab-panel__text p{font-size:max(12px, calc(14 * var(--q))); line-height:.96; text-transform:uppercase}
  .ab-story .ab-panel__text p:last-child{width:100%}
  .ab-story .ab-panel--b .ab-panel__text p:last-child{width:auto}
  .ab-story .ab-group{grid-row:11; width:calc(100% + 24 * var(--q)); max-width:none; height:calc(320 * var(--q))}
  .ab-story .ab-scheme{grid-row:12; width:auto}
  .ab-story .ab-scheme .scheme > i{height:calc(400 / 9 * var(--q))}
  /* khung tối Memorable events (07): 199, logo 59 × 40, cách 64, tiêu đề 48 */
  .ab-events .ab-events__dark{height:calc(199 * var(--q))}
  .ab-events__logo{left:calc(12 * var(--q)); top:calc(12 * var(--q)); width:calc(59 * var(--q))}
  .ab-events__t{left:calc(12 * var(--q)); top:calc(116 * var(--q)); bottom:auto; font-size:calc(48 * var(--q)); line-height:.78; letter-spacing:-.04em}
  .ab-events .ab-events__field{height:calc(96 * var(--q))}
}

/* About mobile — Vision & Mission → nút partner (Figma 697:54406): sọc · (Vision & Mission) 24 · 120 · khối chữ 24 rộng 293 ·
   khối chữ 24 rộng 234 lệch phải (x 129) · 68 · [ 2020-2026 - An exciting journey ] · dải ảnh 224 × 168 · 16 · câu lớn 36 ·
   tem 117 · 12 · nút Become a partner tràn ngang 56 (hết section, không chừa đáy) */
@media (max-width:899px){
  .ab-events{padding-bottom:0}
  .ab-vision__title{font-size:calc(24 * var(--q))}
  .ab-vision__box{display:none}
  .ab-vision__m{display:block; margin-top:calc(120 * var(--q)); color:#0e1813; font-weight:700; font-size:calc(24 * var(--q)); line-height:.78;
    letter-spacing:-.02em; text-transform:uppercase}
  .ab-vision__m p{margin:0; text-box:trim-both cap alphabetic; --tb:1}
  .ab-vision__m1{width:calc(293 * var(--q))}
  .ab-vision__m2{width:calc(234 * var(--q)); margin:calc(31 * var(--q)) 0 0 calc(117 * var(--q)) !important}
  .ab-journey__cap .only-d{display:none} .ab-journey__cap .only-m{display:inline}
  .ab-events .ab-journey{margin-top:calc(64 * var(--q))}
  .ab-events .ab-aim{margin-top:calc(16 * var(--q)); font-size:calc(36 * var(--q)); line-height:.8; letter-spacing:-.04em}
  .ab-events .ab-stamp{margin-top:calc(48 * var(--q)); width:calc(117 * var(--q))}
  .ab-events .ab-events__cta{margin:calc(12 * var(--q)) calc(-12 * var(--q)) 0; width:auto}
  .ab-events__cta .pill--green{width:100%; height:calc(56 * var(--q)); border-radius:0; justify-content:center; font-size:14px}
}

/* About · iPad / tablet ngang (900–1365): chữ nhỏ không dưới 14px (đặt cuối file để đè các cỡ
   max(11px, …) của About); ghi chú (Talent) neo mép phải cho khỏi tràn */
@media (min-width:900px) and (max-width:1365px){
  .ab-hero__intro, .ab-hero__intro *, .ab-hero__years, .ab-note, .ab-note p, .ab-note span, .ab-panel__text, .ab-panel__text p,
  .ab-events__note, .ab-events__note *, .ab-events__cap, .ab-events__cap *, .ab-member__t, .ab-member .mono,
  .ab-journey__cap, .ab-journey__cap *{font-size:14px}
  .ab-note{left:auto; right:calc(24 * var(--u))}
  .ab-member .mono{white-space:normal}
  /* 2 khung Visual focus / Sharing & learning (cao 400u theo bề ngang): chữ 14px trong cột 462u vỡ nhiều dòng, tràn
     xuống gạch neon (khung Muzli 1196). Giữ đúng 5 dòng như Figma (16px / 462 -> 14px / 404px) và neo ĐÁY cách đáy
     khung 46u như bản 1920 */
  .ab-panel__text{top:auto; bottom:calc(46 * var(--u))}
  .ab-panel__text p:last-child{width:max(calc(462 * var(--u)), 404px)}
  .ab-panel--b .ab-panel__text p:last-child{width:max(calc(452 * var(--u)), 396px)}
  /* [ 2020-2026 ] … [ An exciting journey ]: 14px không vừa khung 468u -> mỗi nhãn vỡ 2 dòng; giữ một dòng, khung
     rộng ra theo chữ khi cần */
  .ab-journey__cap{min-width:max-content; gap:24px}
  .ab-journey__cap span{white-space:nowrap}
}

/* dải ảnh hành trình About: rê vào chữ chỉ chạy hiệu ứng code, không gạch chân */
.ab-journey__cap [data-scramble], .ab-journey__cap [data-scramble]:hover{background:none}