@font-face{font-family:"SVN-Instrument Serif";src:local("SVN-Instrument Serif"),url(assets/fonts/SVN-InstrumentSerif-Regular.otf) format("opentype");font-display:swap}
@font-face{font-family:"Abelard";src:local("Abelard"),url(assets/fonts/Abelard-Regular.otf) format("opentype");font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/Manrope-VariableFont_wght.ttf) format("truetype");font-weight:200 800;font-display:swap}

:root{
  --paper:#fafafa;
  --ink:#070707;
  --mute:#8d8d8d;
  --red:#a43333;
  --brown:#3f2419;
  --gold:#ffe0ae;
  --line:rgba(0,0,0,.18);
  --serif:"SVN-Instrument Serif","Instrument Serif",Georgia,serif;
  --body:"Abelard",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Figma artboard = 2000px: N px thiết kế = calc(N * var(--u)) */
  --u:calc(100vw / 2000);
  /* hero: chữ fit cả chiều cao 1294 */
  --hu:min(100vw / 2000, 100vh / 1294);
  --fs:clamp(15px, calc(19 * var(--u)), 20px);
  --fs-fr:clamp(14px, calc(18 * var(--u)), 19px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink)}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}
figure{margin:0}
em{font-style:normal}
button{font:inherit;color:inherit}

/* ================= HERO: đám mây ảnh 3D, cuộn để bay xuyên qua ================= */
.story{position:relative}
/* cao đúng 1 màn hình: ảnh tự bay vòng lặp, tiêu đề đứng yên ở giữa */
.hero{position:relative;height:100vh;height:100svh;background:var(--paper);z-index:0}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-cloud{position:absolute;inset:0;pointer-events:none}
/* ảnh định vị bằng JS (chiếu phối cảnh): left/top = 0, transform = vị trí + tỉ lệ */
.cp{position:absolute;left:0;top:0;width:var(--cw,260px);aspect-ratio:3/2;margin:calc(var(--cw,260px) / -3) 0 0 calc(var(--cw,260px) / -2);
  will-change:transform,opacity;opacity:0}
/* ảnh dọc 3:4 xen kẽ, cùng chiều cao với ảnh ngang */
.cp.tall{width:calc(var(--cw,260px) * .75);aspect-ratio:3/4;margin:calc(var(--cw,260px) / -2) 0 0 calc(var(--cw,260px) * -.375)}
.cp-in{width:100%;height:100%;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.cp img{width:100%;height:100%;object-fit:cover;display:block}

.hero-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;z-index:2}
.hero-title h1{font-family:var(--serif);font-weight:400;font-size:calc(181.353 * var(--hu));line-height:.88;letter-spacing:-.01em}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln-in{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease-out)}
.ln:nth-child(2) .ln-in{transition-delay:.1s}
.hl{color:var(--red)}
.hero-sub{margin-top:calc(46 * var(--hu));font-family:var(--body);font-size:calc(31.228 * var(--hu));line-height:1.2;letter-spacing:-.02em}
.hero-sub span{display:block;opacity:0;transform:translateY(.6em);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.hero-sub span:nth-child(1){transition-delay:.35s}
.hero-sub span:nth-child(2){transition-delay:.45s}
.show-title .ln-in,.show-title .hero-sub span{transform:none;opacity:1}
/* gợi ý cuộn: mờ dần khi bắt đầu cuộn */
.hero-hint{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:opacity .4s}
.hero-hint span{width:1px;height:36px;background:linear-gradient(var(--mute),transparent);animation:hint 1.8s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero.scrolled .hero-hint{opacity:0}

/* ================= KHUNG TRANG ================= */
.page{position:relative;z-index:1;background:var(--paper)}
/* dải nền sáng / nâu, lề 50 */
.band{position:relative;padding:calc(110 * var(--u)) calc(50 * var(--u))}
.band.dark{background:var(--brown);color:#fff}
/* số ở x=50, tiêu đề ở x=208, chữ ở x=1060 rộng 728 */
.split{display:grid;grid-template-columns:calc(158 * var(--u)) calc(852 * var(--u)) calc(728 * var(--u));align-items:start}
.split>.prose:only-child{grid-column:3}
.split+.split{margin-top:calc(60 * var(--u))}
.sec-num{font-family:var(--serif);font-size:calc(64 * var(--u));line-height:1;letter-spacing:-.02em;color:var(--mute)}
.dark .sec-num{color:var(--gold)}
.sec-title{font-family:var(--serif);font-weight:400;font-size:calc(72 * var(--u));line-height:1;letter-spacing:-.015em}
.sec-title em{color:var(--red)}
.dark .sec-title .mute{color:var(--mute)}
.prose{font-family:var(--body);font-size:var(--fs);line-height:1.35;letter-spacing:-.02em}
.prose p+p{margin-top:.95em}
.dark .prose{color:#fff}

/* ================= ALBUM tràn viền ================= */
.slider{position:relative;width:100%;aspect-ratio:2000/1078;overflow:hidden;background:#111;outline:none}
.slider:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.sl-stage{position:absolute;inset:0;cursor:grab}
.sl-img{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.sl-img img{width:100%;height:100%;object-fit:cover}
.sl-img.on{visibility:visible}
.sl-img.tall img{object-fit:contain;position:relative}
.sl-bg{position:absolute;inset:-40px;background:center/cover;filter:blur(30px) brightness(.55)}
.sl-img.top{z-index:2;animation:wipe 1.15s var(--ease) both}
.sl-img.top img{animation:zoom 1.6s var(--ease-out) both}
.sl-img.top.back{animation-name:wipe-back}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes wipe-back{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes zoom{from{transform:scale(1.18)}to{transform:none}}
.sl-thumbs{position:absolute;z-index:3;left:50%;bottom:calc(42 * var(--u));transform:translateX(-50%);display:flex;gap:calc(4 * var(--u))}
.sl-th{display:block;width:calc(91 * var(--u));min-width:38px;aspect-ratio:3/2;padding:0;border:1px solid rgba(255,255,255,.9);
  background:#222;cursor:pointer;overflow:hidden;animation:th-in .7s var(--ease-out) both;animation-delay:calc(var(--k) * 45ms)}
.sl-th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.sl-th:hover img{transform:scale(1.12)}
.sl-th:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes th-in{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:none}}
.sl-arrow{position:absolute;z-index:4;top:50%;width:calc(64 * var(--u));height:calc(64 * var(--u));min-width:40px;min-height:40px;
  margin-top:calc(-32 * var(--u));padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:rgba(0,0,0,.25);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s,transform .4s var(--ease-out)}
.sl-arrow svg{width:45%;height:45%}
.sl-arrow.prev{left:calc(40 * var(--u))}
.sl-arrow.next{right:calc(40 * var(--u))}
.sl-arrow:hover{background:rgba(0,0,0,.5)}
.sl-arrow.prev:hover{transform:translateX(-3px)}
.sl-arrow.next:hover{transform:translateX(3px)}
.sl-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sl-bar{position:absolute;z-index:3;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.85);transform-origin:left;transform:scaleX(0)}
.slider.play .sl-bar{animation:bar var(--dur,5s) linear both}
@keyframes bar{to{transform:scaleX(1)}}

/* ================= KHUNG CHUYỂN THEO CUỘN (Section 1 & 4) ================= */
.frames{position:relative;height:calc(var(--n,4) * 100vh)}
.fr-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.fr-light .fr-pin{background:var(--paper)}
/* Section 1: khung nâu nối liền dải chữ phía trên, ảnh cao trọn màn hình → một khối cuộn liền mạch */
.fr-dark{background:var(--brown)}
.fr-dark .fr-pin{background:var(--brown)}
.fr-dark .fr-stage{height:100vh;height:100svh}
.fr-stage{position:relative;width:100%;height:calc(835 * var(--u))}
/* nền nâu bắt đầu ở x=268, nằm sau ảnh (Figma 1516:1001) */
.fr-dark .fr-stage::before{content:"";position:absolute;top:0;bottom:0;left:calc(268 * var(--u));right:0;background:var(--brown)}
.fr-photos{position:absolute;left:0;top:0;bottom:0;width:calc(990 * var(--u));overflow:hidden;z-index:1}
.fr-ph{position:absolute;inset:0;visibility:hidden;transition:visibility 0s 1.1s}
.fr-ph img{width:100%;height:100%;object-fit:cover}
.fr-ph.on{visibility:visible;z-index:1;transition:none;animation:wipe 1.1s var(--ease) both}
.fr-ph.on.back{animation-name:wipe-back}
.fr-ph.on img{animation:zoom 1.6s var(--ease-out) both}
.fr-items{position:absolute;inset:0}
.fr-item{position:absolute;top:0;bottom:0;left:calc(1060 * var(--u));width:calc(730 * var(--u));
  opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity .5s var(--ease-out),transform .9s var(--ease-out)}
.fr-item.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
.fr-m{display:none}
.fr-head{display:flex;justify-content:space-between;align-items:flex-start}
.fr-label{font-family:var(--sans);font-weight:500;font-size:clamp(9px, calc(12 * var(--u)), 12px);line-height:1.35;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.fr-title{font-family:var(--serif);font-weight:400;font-size:calc(52 * var(--u));line-height:1;letter-spacing:-.01em;width:calc(574 * var(--u))}
.fr-sub{font-family:var(--sans);font-weight:500;font-size:clamp(9px, calc(12 * var(--u)), 12px);line-height:1.35;letter-spacing:-.01em;text-transform:uppercase;color:var(--mute)}
.fr-body{display:grid;grid-template-columns:calc(156 * var(--u)) calc(561 * var(--u));align-items:start}
.fr-body>.fr-text:only-child{grid-column:2}
.fr-mark{font-family:var(--serif);font-size:calc(48 * var(--u));line-height:.75;color:var(--red)}
.fr-text{font-family:var(--body);font-size:var(--fs-fr);line-height:1.35;letter-spacing:-.02em}
.fr-text p+p{margin-top:calc(20 * var(--u))}
/* nâu: nhãn + tiêu đề vàng nhạt, chữ trắng; cách nhau 176 */
.fr-dark .fr-item{display:flex;flex-direction:column;justify-content:center;gap:calc(176 * var(--u));color:#fff}
.fr-dark .fr-head,.fr-dark .fr-mark{color:var(--gold)}
/* sáng: tiêu đề + phụ đề ở trên (y=68), trích dẫn ở y=555 */
/* Section 4: 2 vạch phân chia chạy hết bề ngang ở mép trên và mép dưới khung */
.fr-light .fr-stage{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fr-light .fr-head{flex-direction:column;gap:calc(15 * var(--u));margin:calc(68 * var(--u)) 0 0 calc(156 * var(--u));width:calc(574 * var(--u))}
.fr-light .fr-body{position:absolute;left:0;top:calc(555 * var(--u))}
/* bộ đếm khung: góc dưới ảnh, chữ trắng */
.fr-nav{position:absolute;z-index:2;left:calc(50 * var(--u));bottom:calc(40 * var(--u));display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.fr-cur{color:#fff}
/* desktop: khối ảnh + chữ chỉ hiện khi khung đã ghim lên đỉnh, tránh lộ nửa ảnh dưới đoạn chữ phía trên */
@media (min-width:1100px){
  .frames .fr-photos{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease)}
  .frames.live .fr-photos{clip-path:inset(0)}
  .frames .fr-items,.frames .fr-nav{opacity:0;transform:translateY(40px);transition:opacity .5s var(--ease-out),transform .9s var(--ease-out)}
  .frames.live .fr-items,.frames.live .fr-nav{opacity:1;transform:none;transition-delay:.35s}
}
.fr-bar{position:relative;width:calc(160 * var(--u));min-width:64px;height:1px;background:currentColor;opacity:.5}
.fr-bar i{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(var(--p,0))}

/* ================= ẢNH DÀN TRẢI (Section 2) ================= */
/* khung cao 1170 được ghim giữa màn hình trong lúc cuộn thêm ~1.2 màn hình */
.field-wrap{position:relative;height:calc(1170 * var(--u) + 120vh);margin:calc(110 * var(--u)) calc(-50 * var(--u)) 0}
.field{position:sticky;top:calc(50vh - 585 * var(--u));height:calc(1170 * var(--u))}
.field-photos{position:absolute;inset:0}
.sc{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:3/2;will-change:transform}
.sc.tall{aspect-ratio:2/3}
.sc-in{width:100%;height:100%;overflow:hidden;opacity:0;transform:scale(.6) translateY(40px);filter:blur(10px);
  transition:opacity 1s var(--ease-out) var(--d),transform 1.4s var(--ease-out) var(--d),filter 1s var(--ease-out) var(--d)}
.sc img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.field.in .sc-in{opacity:1;transform:none;filter:none}
.fp-dots{display:none}
.field-text{position:absolute;left:calc(623 * var(--u));top:calc(585 * var(--u));transform:translateY(-50%);width:calc(744 * var(--u));
  padding-left:calc(77 * var(--u));border-left:1px solid var(--line);display:grid}
.field-text.rv{transform:translateY(calc(-50% + 32px))}
.field-text.rv.in{transform:translateY(-50%)}
/* vạch bên trái đầy dần theo tiến độ cuộn */
.field-text::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;background:var(--ink);transform-origin:top;transform:scaleY(var(--p,0))}
.ft-step{grid-area:1/1;align-self:center;opacity:0;transform:translateY(36px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .9s var(--ease-out)}
.ft-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.ft-step.past{transform:translateY(-36px)}

/* ảnh tràn viền giữa 02 và 03 */
.bleed{width:100%;aspect-ratio:2000/1082;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}

/* ================= BA TRỤ CỘT: thẻ nâu lần lượt trồi lên ================= */
.pillars-wrap{position:relative;height:calc(738 * var(--u) + 110vh);margin-top:calc(80 * var(--u))}
.pillars{position:sticky;top:calc(50vh - 369 * var(--u));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(20 * var(--u))}
.pillar{display:flex;flex-direction:column;background:var(--brown);color:#fff;height:calc(738 * var(--u));overflow:hidden;
  padding:calc(58 * var(--u)) calc(58 * var(--u)) 0;will-change:transform,opacity}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:calc(52 * var(--u));line-height:1;letter-spacing:-.01em;color:var(--gold);margin-bottom:calc(32 * var(--u))}
.pillar p{font-family:var(--body);font-size:var(--fs-fr);line-height:1.35;letter-spacing:-.02em}
.pillar-img{margin:auto calc(-58 * var(--u)) 0;padding-top:calc(30 * var(--u))}
.pillar-img img{width:100%;aspect-ratio:620/412;height:auto;object-fit:cover}

/* ================= BĂNG ẢNH cuối bài ================= */
.wall{background:var(--brown);padding:calc(16 * var(--u)) 0;display:flex;flex-direction:column;gap:calc(16 * var(--u));overflow:hidden}
.wall-row{overflow:hidden}
.wall-track{display:flex;gap:calc(20 * var(--u));padding-right:calc(20 * var(--u));width:max-content;
  animation:wall-loop var(--dur,60s) linear infinite}
.wall-row.rev .wall-track{animation-direction:reverse}
.wall:hover .wall-track{animation-play-state:paused}
.wall-item{--wb:calc(437 * var(--u));flex:0 0 var(--wb);aspect-ratio:437/290;overflow:hidden}
.wall-item.tall{flex-basis:calc(var(--wb) * 290 / 437 * 2 / 3);aspect-ratio:2/3}
.wall-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.wall-item:hover img{transform:scale(1.06)}
@keyframes wall-loop{to{transform:translateX(calc(-100% / 3))}}

/* ================= REVEAL + PARALLAX ================= */
.rv{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.split .rv.in:nth-child(2){transition-delay:.08s}
.split .rv.in:nth-child(3){transition-delay:.16s}
.par img{transform:translate3d(0,var(--py,0px),0) scale(1.14);will-change:transform}

/* ================= NAV ================= */
.secnav{position:fixed;top:24px;left:50%;z-index:20;display:flex;align-items:center;gap:10px;transform:translate(-50%,-20px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.secnav.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.secnav a{color:inherit;text-decoration:none}
.secnav-home{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#bebebe;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.secnav-home:hover{color:var(--ink)}
.secnav-pill{display:flex;gap:4px;background:#fff;border-radius:64px;padding:3px 10px;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.secnav-pill a{font-family:var(--sans);font-size:15px;line-height:1;color:#bebebe;padding:7px 8px;transition:color .3s}
.secnav-pill a:hover,.secnav-pill a.on{color:#000}
.secnav-pill a:focus-visible,.secnav-home:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:20px}

/* noise toàn trang như Figma (soft-light 10%) */
.noise{position:fixed;inset:0;pointer-events:none;z-index:10;background:url(assets/img/noise.png) 0 0/96px 54px;
  mix-blend-mode:soft-light;opacity:.1}

/* ================= TABLET / MOBILE: chữ căn giữa, xếp dọc ================= */
@media (max-width:1099px){
  :root{--fs:17px;--fs-fr:16px}
  .band{padding:64px 20px;text-align:left}
  .split{display:flex;flex-direction:column;align-items:flex-start}
  .split+.split{margin-top:28px}
  .sec-num{font-size:32px;margin-bottom:14px}
  .sec-title{font-size:clamp(34px,8.6vw,52px);max-width:16em;margin-bottom:28px}
  .prose{max-width:36em;text-align:left}

  .slider{aspect-ratio:4/3}
  .sl-thumbs{bottom:12px;gap:3px}
  .sl-th{width:14vw;max-width:72px}
  .sl-arrow{width:36px;height:36px;min-width:0;min-height:0;margin-top:-18px}
  .sl-arrow.prev{left:10px}
  .sl-arrow.next{right:10px}

  /* khung chuyển → thẻ có ảnh, xếp dọc */
  .frames{height:auto;padding:0 20px 64px;background:var(--paper)}
  .frames.fr-dark{background:var(--brown);padding-top:0}
  .fr-pin{position:static;height:auto;display:block;overflow:visible;background:none!important}
  .fr-stage,.fr-dark .fr-stage{height:auto}
  .fr-light .fr-stage{border:0}
  .fr-stage::before,.fr-photos,.fr-nav{display:none}
  .fr-items{position:static;display:grid;gap:20px;max-width:640px;margin:0 auto}
  .fr-item{position:static;width:auto;opacity:1;transform:none;pointer-events:auto;text-align:left;
    display:flex!important;flex-direction:column;gap:0!important;padding:0!important;background:#fff;overflow:hidden}
  .fr-dark .fr-item{background:#4b2d21}
  .fr-m{display:block;aspect-ratio:4/3;overflow:hidden}
  .fr-m img{width:100%;height:100%;object-fit:cover}
  .fr-head{flex-direction:column!important;align-items:flex-start;gap:12px!important;margin:0!important;width:auto!important;padding:26px 22px 0}
  .fr-label{white-space:normal;font-size:10px;order:2}
  .fr-title{width:auto;font-size:clamp(28px,7vw,38px)}
  .fr-sub{font-size:10px}
  .fr-body{position:static!important;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 22px 28px}
  .fr-mark{font-size:44px;line-height:.6}
  .fr-text p+p{margin-top:14px}

  .field-wrap{height:auto;margin:40px 0 0}
  .field{position:static;height:auto;display:flex;flex-direction:column;gap:28px}
  .field-text,.field-text.rv.in{position:static;transform:none;width:auto;max-width:36em;margin:0;padding:0;border:0;display:block}
  .field-text.rv:not(.in){transform:translateY(32px)}
  .field-text::before{display:none}
  /* mobile: cụm chữ 1 → album ảnh → cụm chữ 2 (khối chữ "mở" ra để 2 cụm xếp xen với album) */
  .field-text,.field-text.rv.in,.field-text.rv:not(.in){display:contents}
  .ft-step{opacity:1;transform:none;pointer-events:auto;max-width:36em}
  .ft-step:first-child{order:1}
  .ft-step:last-child{order:3}
  /* mobile: album lưới ảnh đều nhau */
  /* mobile: album thành dải trượt ngang, ảnh cao bằng nhau, vuốt dừng đúng giữa ảnh */
  .field-photos{position:static;order:2;display:flex;gap:8px;margin:0 -20px;padding:0 20px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .field-photos::-webkit-scrollbar{display:none}
  .sc{position:static;flex:0 0 auto;width:auto;height:min(52vw,400px);transform:none!important;scroll-snap-align:center}
  .sc.deco{display:none}
  .fp-dots{order:2;display:flex;justify-content:center;gap:6px;margin-top:-16px}
  .fp-dots i{width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.25;transition:width .3s,opacity .3s}
  .fp-dots i.on{width:18px;opacity:.8}
  .sc-in{transition-delay:calc(var(--k) * 60ms)}

  .pillars-wrap{height:auto;margin:36px auto 0;max-width:640px}
  /* thẻ dính chồng lên nhau khi cuộn */
  .pillars{position:static;display:flex;flex-direction:column;gap:16px}
  .pillar{position:sticky;top:calc(70px + var(--k) * 16px);height:auto;padding:30px 22px 0;text-align:left;box-shadow:0 -10px 30px rgba(0,0,0,.12)}
  .pillar h3{font-size:36px;margin-bottom:16px}
  .pillar-img{margin:0 -22px;padding-top:24px}

  .wall{gap:8px;padding:8px 0}
  .wall-track{gap:8px;padding-right:8px}
  .wall-item{--wb:44vw}

  .secnav{top:12px}
  .secnav-pill a{padding:7px 6px;font-size:14px}
}
@media (max-width:767px){
  :root{--hu:calc(100vw / 820)}
  .hero{height:100svh}
  .hero-title{padding:0 16px}
  .hero-title h1{font-size:15.4vw;line-height:.88}
  .hero-sub{margin-top:5vw;font-size:4.3vw}
  .sec-title br{display:none}
  .wall-item{--wb:58vw}
}

@media (prefers-reduced-motion:reduce){
  .cp-in{animation:none!important}
  .ln-in,.hero-sub span,.sc-in{transition:none!important}
  .rv{transition:none!important;opacity:1!important;transform:none!important}
  .sl-img.top,.sl-img.top img,.fr-ph.on,.fr-ph.on img,.sl-th{animation:none!important}
  .par img{transform:scale(1.04)!important}
  .fr-item{transition:none!important}
  .wall-track{animation:none}
  .wall-row{overflow-x:auto}
}