@font-face{font-family:"Serif";src:url("fonts/serif-b.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Serif";src:url("fonts/serif-r.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Serif";src:url("fonts/serif-i.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sans";src:url("fonts/sans-r.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Sans";src:url("fonts/sans-b.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Mono";src:url("fonts/mono.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  /* Bảng màu theo SOI.Pro Design DNA v1.3, chương 05. Hai màu thương hiệu lấy
     thẳng từ file logo gốc; navy và mọi sắc xanh đã bị loại khỏi hệ. Tỷ trọng
     mong muốn: ~70% warm white, ~20% charcoal, ~7% xám ấm, ~3% burgundy —
     burgundy không bao giờ làm nền mảng lớn. */
  --paper:#FBF9F7;                      /* warm white — nền mặc định */
  --card:#FFFFFF;                       /* trắng tinh — chỉ cho thẻ, ô logo */
  --tint:#F4EFF0;                       /* mảng phân vùng nhạt */
  --ink:#231F20;                        /* SOI Charcoal — tiêu đề, chữ chính */
  --body:#4A4243;                        /* chữ nội dung */
  --muted:#766F71;                      /* warm gray — phụ đề, chú thích */
  --hair:#E9E2E4; --hair2:#DDD4D6;      /* đường kẻ, viền thẻ */

  --crimson:#982A3F;                    /* SOI Burgundy — mã chính thức */
  --crimson-soft:#C9C0C2;               /* nhãn trên nền tối: DNA đổi sang xám sáng */
  --accent:#982A3F;
  --blue:#982A3F;                       /* tên cũ từ thời bảng màu xanh, nay là burgundy */
  --glow:#982A3F;                       /* nút chính trên nền tối */
  --glow-hi:#F4EFF0;
  --done:#4A4243;                       /* trạng thái "đã xong": charcoal, không phải màu nhấn */
  --sky:#F7F3F4;

  /* key visual "Vết nứt phát sáng": dải charcoal, ánh sáng xuyên lớp */
  --kv-1:#3A3234; --kv-2:#231F20; --kv-3:#151213;
  --grad-deep:radial-gradient(130% 120% at 18% 8%, var(--kv-1) 0%, var(--kv-2) 45%, var(--kv-3) 100%);
  --grad-cta:linear-gradient(120deg,#2E2728 0%,#231F20 55%,#151213 100%);
  --navy:#231F20; --navy-2:#3A3234; --navy-deep:#151213; --abyss:#0F0D0E;

  --ease:cubic-bezier(.22,1,.36,1);
  --navh:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--body);font-family:"Sans",system-ui,sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Serif",Georgia,serif;font-weight:700;color:var(--ink);line-height:1.12;letter-spacing:-.014em;text-wrap:balance}
p{margin:0} img{max-width:100%} a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:920px}
.lbl{font-family:"Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
.lbl.d{color:var(--crimson-soft)}
.tnum{font-variant-numeric:tabular-nums}
.serif{font-family:"Serif",serif}
.ital{font-family:"Serif",serif;font-style:italic}

/* bilingual */
html[lang="vi"] .en{display:none}
html[lang="en"] .vi{display:none}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);background:rgba(255,255,255,.86);border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.nav.solid{border-bottom-color:var(--hair)}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:var(--navh);gap:20px}
.nav .lg{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav .lg img{height:26px;width:auto;display:block}
.nav .lg .sp{width:1px;height:18px;background:var(--hair2)}
.nav .mn{display:flex;gap:26px;font-size:14.5px;color:var(--body)}
.nav .mn a{white-space:nowrap}
.nav .mn a:hover{color:var(--ink)}
.nav .rt{display:flex;align-items:center;gap:14px}
.langsw{display:flex;border:1px solid var(--hair2);border-radius:2px;overflow:hidden;font-family:"Mono",monospace;font-size:11px;letter-spacing:.1em}
.langsw button{background:none;border:0;padding:7px 12px;cursor:pointer;color:var(--muted);font:inherit;transition:background .3s var(--ease),color .3s var(--ease)}
.langsw button.on{background:var(--navy);color:#fff}
.nav .cta{font-size:14.5px;font-weight:700;color:#fff;background:var(--navy);border-radius:2px;padding:9px 20px;white-space:nowrap;transition:opacity .3s var(--ease)}
.nav .cta:hover{opacity:.85}
.nav .lg img.dk{display:none}
/* nav trên hero tối: chữ trắng, logo trắng, nền trong mờ */
.nav.ondark{background:rgba(36,31,32,.28)}
.nav.ondark.solid{border-bottom-color:rgba(255,255,255,.12)}
.nav.ondark .lg img.lt{display:none}
.nav.ondark .lg img.dk{display:block}
.nav.ondark .lg .sp{background:rgba(255,255,255,.3)}

.nav.ondark .mn{color:rgba(255,255,255,.78)}
.nav.ondark .mn a:hover{color:#fff}
.nav.ondark .langsw{border-color:rgba(255,255,255,.32)}
.nav.ondark .langsw button{color:rgba(255,255,255,.7)}
.nav.ondark .langsw button.on{background:#fff;color:var(--kv-3)}
.nav.ondark .cta{background:var(--glow);color:#fff}
.nav.ondark .burger i{background:#fff}

/* burger + drawer (mobile nav) */
.burger{display:none;width:42px;height:42px;flex:0 0 auto;border:0;background:none;cursor:pointer;padding:12px 9px;-webkit-tap-highlight-color:transparent}
.burger i{display:block;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .34s var(--ease),opacity .2s var(--ease)}
.burger i+i{margin-top:5px}
.burger.x i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}
.drawer{position:fixed;top:var(--navh);left:0;right:0;z-index:99;background:var(--paper);border-bottom:1px solid var(--hair);
  padding:4px 20px 26px;max-height:calc(100svh - var(--navh));overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s var(--ease);
  box-shadow:0 18px 40px -24px rgba(26,23,23,.4)}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a{display:block;padding:16px 0;border-bottom:1px solid var(--hair);font-size:17px;color:var(--ink)}
.drawer a.dcta{display:none;margin-top:22px;border-bottom:0;text-align:center}

/* ============ BUTTONS ============ */
.bt{display:inline-block;border-radius:2px;padding:15px 30px;font-size:16px;font-weight:700;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bt.p{background:var(--navy);color:#fff}
.bt.s{color:var(--navy);border:1px solid var(--hair2)}
.bt.w{background:var(--paper);color:var(--navy)}
.bt.ghost{color:#fff;border:1px solid rgba(255,255,255,.4)}
.bt.g{background:var(--glow);color:#fff;box-shadow:0 0 0 0 rgba(125,97,101,.0);transition:transform .3s var(--ease),box-shadow .5s var(--ease)}
.bt.g:hover{opacity:1;transform:translateY(-1px);box-shadow:0 12px 34px -10px rgba(125,97,101,.7)}
.bt.ghost:hover{opacity:1;border-color:rgba(255,255,255,.85)}
.bt:hover{opacity:.88}
.bt.s:hover{border-color:var(--navy)}
.bt:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}

/* ============ ACADEMIC BOOK ============ */
.desk{position:relative;border-radius:0;overflow:hidden;
  background:
    radial-gradient(75% 120% at 50% -20%, rgba(255,244,222,.16) 0%, rgba(255,244,222,0) 55%),
    linear-gradient(178deg,#241C15 0%,#1A140F 46%,#100C09 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.desk:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 60% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%)}
.desk .lamp{position:absolute;left:50%;top:-28%;width:78%;height:78%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,238,205,.20) 0%, rgba(255,238,205,0) 70%);pointer-events:none}
.bookstage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;perspective:2200px;padding:clamp(30px,3.6vw,52px) 0 clamp(38px,4.4vw,62px)}

.book{position:relative;width:var(--bw,320px);aspect-ratio:.74;transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,17deg)) rotateZ(var(--rz,-1deg));
  filter:drop-shadow(0 40px 44px rgba(0,0,0,.55))}
.book .cover{position:absolute;inset:0;border-radius:3px 6px 6px 3px;overflow:hidden;z-index:3;
  background:linear-gradient(148deg,var(--navy-2) 0%,var(--navy) 42%,var(--navy-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset -14px 0 26px -14px rgba(0,0,0,.5)}
/* fore-edge = thickness */
.book .edge{position:absolute;top:1.6%;bottom:1.6%;right:calc(var(--th,26px) * -1);width:var(--th,26px);z-index:2;
  border-radius:0 4px 4px 0;transform-origin:left center;transform:rotateY(62deg);
  background:repeating-linear-gradient(180deg,#FEFDFA 0 2px,#E7E2D6 2px 3.4px);
  box-shadow:inset -6px 0 12px -6px rgba(0,0,0,.45)}
.book .backcover{position:absolute;inset:0;border-radius:3px;z-index:1;transform:translateZ(-1px) translateX(calc(var(--th,26px) * .86)) translateY(4px);
  background:linear-gradient(148deg,#31292B,#191616);border-radius:4px}
.book .spinelight{position:absolute;left:0;top:0;bottom:0;width:11px;z-index:4;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0));border-radius:3px 0 0 3px}
/* cover content */
.bc{position:absolute;inset:0;padding:8.5% 9%;color:#fff;display:flex;flex-direction:column}
.bc .t{display:flex;justify-content:space-between;align-items:center}
.bc .t img{height:calc(var(--bw) * .042);width:auto;display:block}
/* CafeBiz là chữ trơn, cao bằng chiều cao chữ hoa — hạ xuống cho cân với dấu SOI */
.bc .t img[src*="cafebiz"]{height:calc(var(--bw) * .026)}
.bc .t .l{display:flex;gap:7px;align-items:center}
.bc .t .y{font-family:"Mono",monospace;font-size:calc(var(--bw) * .029);letter-spacing:.24em;color:#C88E99}
.bc .eb{margin-top:14%;font-family:"Mono",monospace;font-size:calc(var(--bw) * .027);letter-spacing:.18em;color:var(--crimson-soft);text-transform:uppercase;line-height:1.6}
.bc .h{font-family:"Serif",serif;font-weight:700;font-size:calc(var(--bw) * .125);line-height:1.03;margin-top:5%;letter-spacing:-.02em}
.bc .s{margin-top:6%;font-family:"Serif",serif;font-style:italic;font-size:calc(var(--bw) * .038);color:#E8C7CD;line-height:1.45}
.bc .rule{margin-top:auto;border-top:1px solid rgba(255,255,255,.24);padding-top:5%;display:flex;justify-content:space-between;gap:8px;font-family:"Mono",monospace;font-size:calc(var(--bw) * .024);letter-spacing:.1em;color:#C88E99;text-transform:uppercase}
.bc svg{position:absolute;inset:0;width:100%;height:100%}
/* stacked prior edition */
.book.prior{--bw:190px;--ry:22deg;--rx:9deg;--th:18px;position:absolute;left:6%;bottom:8%;opacity:.55;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5)) saturate(.5)}
.book.prior .cover{background:linear-gradient(148deg,#3C3335,#221D1E)}
.deskcap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:"Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34)}

/* ============ HERO — key visual "Vết nứt phát sáng" ============ */
.hero.kv{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--navh) + 40px) 0 72px;
  background:var(--grad-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero.kv>.wrap{width:100%;position:relative;z-index:4}
.hero.kv .hd{max-width:640px;padding-top:clamp(120px,22vh,220px)}
.hero.kv .lbl.d{color:#C9A2AC;font-family:"Mono",monospace;font-weight:400;letter-spacing:.26em;font-size:12.5px}
.hero.kv h1{margin-top:18px;color:#fff;font-size:clamp(46px,7vw,104px);line-height:.98;letter-spacing:-.03em;text-shadow:0 4px 60px rgba(36,31,32,.8)}
.hero.kv .sub{margin-top:20px;font-size:clamp(16.5px,1.55vw,20px);color:#E1DADB;max-width:46ch;line-height:1.55}
.hero.kv .btns{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.hero.kv .more{display:inline-block;margin-top:22px;font-family:"Mono",monospace;font-size:12px;letter-spacing:.06em;color:#E196A4;border-bottom:1px solid rgba(225,150,164,.35);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.hero.kv .more:hover{color:#fff;border-color:#fff}

/* vết nứt: ba lớp — quầng sáng rộng, lõi sáng, sợi trắng */
.hero.kv .fiss{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* SVG bị kéo giãn không đều (preserveAspectRatio=none) nên nét phải tính theo
   pixel màn hình (non-scaling-stroke), nếu không lõi trắng bị méo và nhoè. */
.hero.kv .fiss path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.9s var(--ease) .25s forwards}
.hero.kv .fiss .f1{stroke:#755A5F;stroke-width:70px;filter:blur(30px);opacity:.32}
.hero.kv .fiss .f2{stroke:#86676C;stroke-width:10px;filter:blur(5px);opacity:.85}
.hero.kv .fiss .f3{stroke:#FAF9F9;stroke-width:2.5px}
@keyframes draw{to{stroke-dashoffset:0}}
/* hơi thở của ánh sáng */
.hero.kv .fiss .f1{animation:draw 1.9s var(--ease) .25s forwards,breathe 5.5s ease-in-out 2.2s infinite}
@keyframes breathe{0%,100%{opacity:.33}50%{opacity:.5}}

/* chip số liệu trôi bên trái vết nứt */
.hero.kv .chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero.kv .chip{position:absolute;left:var(--x);top:var(--y);font-family:"Mono",monospace;font-size:13px;letter-spacing:.06em;white-space:nowrap;
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 14px;background:rgba(36,31,32,.25);
  transform:rotate(var(--r,0deg));opacity:0;animation:chipin .9s var(--ease) calc(1.1s + var(--d,0s) * -.12) forwards,float 7s ease-in-out var(--d,0s) infinite}
.hero.kv .chip.dim{color:rgba(255,255,255,.34);border-color:rgba(255,255,255,.1)}
.hero.kv .chip.hot{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.34);background:rgba(80,68,70,.45)}
@keyframes chipin{to{opacity:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ba câu hỏi chưa có lời đáp, bên phải vết nứt */
.hero.kv .outs{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero.kv .outs span{position:absolute;right:clamp(28px,5.5vw,96px);top:var(--y);font-family:"Serif",serif;font-size:clamp(20px,2.1vw,32px);color:#9E4253;white-space:nowrap;
  opacity:0;animation:chipin 1.2s var(--ease) 1.5s forwards}
.hero.kv .outs span:nth-child(2){animation-delay:1.75s}
.hero.kv .outs span:nth-child(3){animation-delay:2s}
.hero.kv .outs b{color:#E196A4;font-weight:700}

.scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;font-family:"Mono",monospace;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.45);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:7px}
.scrollhint i{width:1px;height:24px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .hero.kv .fiss path,.hero.kv .chip,.hero.kv .outs span{animation:none;stroke-dashoffset:0;opacity:1}
  .hero.kv .chip.dim{opacity:1}
}

/* credibility bar — hai dải logo: báo chí đã đưa tin ấn bản 2025, và đối tác đồng hành */
.credbar{margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(16px,1.9vw,22px);border-top:1px solid var(--hair)}
.credbar .crow{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.credbar .crow+.crow{margin-top:clamp(11px,1.2vw,15px);padding-top:clamp(11px,1.2vw,15px);border-top:1px solid var(--hair)}
.credbar .cl{font-family:"Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.credbar ul{list-style:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(20px,3.2vw,44px)}
.credbar img{display:block;height:calc(var(--lh,1) * clamp(17px,1.7vw,22px));width:auto;
  filter:grayscale(100%);opacity:.58;transition:opacity .45s var(--ease),filter .45s var(--ease)}
.credbar li:hover img{filter:none;opacity:1}
/* logo màu nhạt (vàng Cocoon): xám hoá xong còn quá mờ, nên tối thêm */
.credbar img.pale{filter:grayscale(100%) brightness(.62)}
.credbar li:hover img.pale{filter:none}

/* dưới hero: dải logo + kệ sách trên nền sáng */
.herobelow{background:var(--paper);padding:clamp(28px,3.4vw,44px) 0 0}
.herobelow .credbar{margin-top:0;padding-top:0;border-top:0}
.herobelow .desk{margin-top:clamp(22px,2.6vw,36px)}

/* page hero (sub-pages) */
/* trang con: hero nhỏ cùng tông key visual, vết nứt mảnh bên phải */
.phero{position:relative;overflow:hidden;isolation:isolate;padding:150px 0 clamp(54px,6.6vw,88px);background:var(--grad-deep);color:#fff}
.phero>.wrap{position:relative;z-index:2}
.phero .lbl{color:#C9A2AC;font-family:"Mono",monospace;font-weight:400;letter-spacing:.24em;font-size:12px}
.phero h1{font-size:clamp(36px,5.6vw,74px);margin-top:20px;max-width:20ch;color:#fff;letter-spacing:-.03em;text-shadow:0 4px 50px rgba(36,31,32,.8)}
.phero .sub{margin-top:20px;font-size:clamp(16.5px,1.6vw,20px);color:#E1DADB;max-width:52ch}
.phero .facts{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.phero .facts div{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:12px;padding:12px 16px;min-width:150px;backdrop-filter:blur(6px)}
.phero .facts b{display:block;font-family:"Mono",monospace;font-size:10px;letter-spacing:.18em;color:#E196A4;text-transform:uppercase;font-weight:400}
.phero .facts span{display:block;margin-top:5px;font-size:15.5px;color:#fff}
.phero .btns{margin-top:34px;display:flex;gap:13px;flex-wrap:wrap}
.phero .btns .bt.p{background:var(--glow);color:#fff}
.phero .btns .bt.p:hover{opacity:1;transform:translateY(-1px);box-shadow:0 12px 34px -10px rgba(125,97,101,.7)}
.phero .btns .bt.s{color:#fff;border-color:rgba(255,255,255,.4)}
.phero .btns .bt.s:hover{border-color:#fff}
.phero .fiss{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.phero .fiss path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.phero .fiss .f1{stroke:#755A5F;stroke-width:50px;filter:blur(24px);opacity:.28}
.phero .fiss .f2{stroke:#86676C;stroke-width:7px;filter:blur(4px);opacity:.8}
.phero .fiss .f3{stroke:#FAF9F9;stroke-width:2px}

/* ============ SECTION SHELL ============ */
.sec{padding:clamp(72px,9vw,124px) 0}
.sec.tight{padding-top:0}
.sec.dark{background:var(--abyss);color:#fff}
.sec.sky{background:var(--sky)}
.sec.dark h2,.sec.dark h3{color:#fff}
.secno{display:flex;align-items:baseline;gap:14px;border-top:3px solid var(--navy);padding-top:14px}
.sec.dark .secno{border-top-color:rgba(255,255,255,.45)}
.secno .n{font-family:"Sans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--crimson)}
.sec.dark .secno .n{color:#fff}
.secno .t{font-family:"Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sec h2{font-size:clamp(28px,3.5vw,48px);margin-top:20px;max-width:22ch}
.sec .lede{margin-top:16px;font-size:clamp(16.5px,1.5vw,19px);color:var(--body);max-width:56ch}
.sec.dark .lede{color:#C49AA2}
.fig{font-family:"Sans",sans-serif;font-size:12px;color:var(--muted);letter-spacing:.02em}
.exh{font-family:"Sans",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:8px;display:block}
.src{margin-top:12px;font-size:12px;color:var(--muted);padding-top:8px;border-top:1px solid var(--hair)}
.fn{font-size:13.5px;color:var(--muted);line-height:1.6}
sup{font-size:11px;color:var(--crimson)}

/* ============ STICKY STEPS ============ */
.steps{position:relative;background:linear-gradient(180deg,var(--sky),#fff)}
.steps .track{height:340svh}
.steps .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.stepwrap{position:relative;min-height:clamp(280px,40vw,440px);width:100%}
.step{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,76px);align-items:center;
  opacity:0;transform:translateY(26px) scale(.985);transition:opacity .75s var(--ease),transform .75s var(--ease);pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .num{font-family:"Serif",serif;font-weight:700;font-size:clamp(120px,19vw,280px);line-height:.82;letter-spacing:-.05em;color:var(--blue);text-align:right}
.step.hot .num{color:var(--crimson)}
.step .rt h3{font-size:clamp(21px,2.6vw,38px);line-height:1.2}
.step .rt p{margin-top:14px;font-size:clamp(15px,1.5vw,18px);color:var(--muted);max-width:34ch}
.step .meter{margin-top:22px;height:8px;border-radius:99px;background:var(--hair);max-width:330px;position:relative;overflow:hidden}
.step .meter i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),#DA8090);transition:width 1.1s var(--ease) .15s}
.step.hot .meter i{background:var(--crimson)}
.step.on .meter i{width:var(--w)}
.steps .dots{position:absolute;right:30px;top:50%;transform:translateY(-50%);display:grid;gap:11px}
.steps .dots b{width:6px;height:6px;border-radius:50%;background:var(--hair2);transition:background .5s var(--ease),transform .5s var(--ease)}
.steps .dots b.on{background:var(--crimson);transform:scale(1.5)}
.steps .cap{position:absolute;left:32px;bottom:52px;font-family:"Mono",monospace;font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.punchsec{padding:clamp(80px,11vw,150px) 0}
.punchgrid{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.punchsec p{font-family:"Serif",serif;font-size:clamp(26px,3.8vw,56px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
/* biểu đồ cột gãy — từ key visual B */
.bcol{position:relative;height:380px;width:300px}
.bcol .base{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hair2)}
.bcol .col{position:absolute;left:60px;width:170px;background:var(--navy);border-radius:6px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.bcol .col b{font-family:"Serif",serif;font-size:44px;line-height:1;letter-spacing:-.03em}
.bcol .col span{font-family:"Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#E1DADB;padding:0 8px}
.bcol .tall{bottom:2px;height:0;transition:height 1.2s var(--ease) .1s;overflow:hidden}
.bcol.in .tall{height:262px}
.bcol .cap{position:absolute;left:52px;width:186px;height:18px;background:var(--crimson);border-radius:4px;bottom:262px;transform-origin:left bottom;
  opacity:0;transform:rotate(0deg) translateY(10px);transition:opacity .5s var(--ease) 1.1s,transform .9s var(--ease) 1.1s}
.bcol.in .cap{opacity:1;transform:rotate(-7deg) translateY(-2px)}
.bcol .short{left:118px;width:150px;height:88px;bottom:300px;transform:rotate(14deg);background:var(--navy-2);
  opacity:0;translate:0 30px;transition:opacity .6s var(--ease) 1.4s,translate .9s var(--ease) 1.4s}
.bcol.in .short{opacity:1;translate:0 0}
.bcol .short b{color:var(--glow);font-size:40px}
.bcol .shard{position:absolute;background:var(--navy);border-radius:2px;opacity:0;transition:opacity .5s var(--ease) 1.7s,translate .9s var(--ease) 1.7s;translate:0 10px}
.bcol.in .shard{opacity:1;translate:0 0}
.bcol .s1{left:34px;bottom:296px;width:12px;height:6px;transform:rotate(-30deg)}
.bcol .s2{left:78px;bottom:310px;width:8px;height:8px;transform:rotate(20deg)}
.bcol .s3{left:250px;bottom:290px;width:10px;height:5px;transform:rotate(40deg)}
@media (prefers-reduced-motion:reduce){.bcol .tall,.bcol .cap,.bcol .short,.bcol .shard{transition:none}}
.punchsec em{font-style:normal;color:var(--crimson)}

/* ============ SCROLLYTELL ============ */
.inside{background:linear-gradient(180deg,var(--navy-deep) 0%,var(--abyss) 100%);color:#fff}
.inside .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.inside .grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,76px);align-items:center;width:100%}
.inside h2{color:#fff;font-size:clamp(26px,3.2vw,46px)}
.inside .cap2{margin-top:14px;font-size:clamp(15px,1.5vw,18px);color:#C49AA2;max-width:30ch}
.inside .figno{margin-top:24px;font-family:"Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:#ADA5A7;text-transform:uppercase}
.vizbox{position:relative;min-height:clamp(230px,30vw,380px);display:flex;align-items:center;justify-content:center}
.viz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.965);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.viz.on{opacity:1;transform:none;pointer-events:auto}
.txt{position:absolute;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.txt.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.hmwrap{width:min(100%,560px)}
.vmx{display:grid;gap:6px}
.hm-h,.hm-r{display:grid;grid-template-columns:34px repeat(6,1fr);gap:6px;align-items:center}
.hm-h b{font-family:"Mono",monospace;font-weight:400;font-size:9.5px;letter-spacing:.06em;color:#C9C0C2;text-align:center;text-transform:uppercase;line-height:1.2;padding-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-r .lv{font-family:"Mono",monospace;font-size:10.5px;color:#ADA5A7;text-align:center}
.vmx i{display:block;height:clamp(22px,2.7vw,38px);border-radius:6px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease)}
.vmx i:hover,.vmx i.on{transform:scale(1.08);box-shadow:0 0 0 2px #fff,0 8px 24px -8px rgba(125,97,101,.6);filter:brightness(1.12)}
.vmx .r5{background:#F7F3F4}.vmx .r4{background:#EBDADD}.vmx .r3{background:#D8B3BA}.vmx .r2{background:#BE7C8A;outline:1.5px dashed #F4EFF0;outline-offset:2px}.vmx .r1{background:#982A3F}
.vtip{margin-top:14px;min-height:22px;font-family:"Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:#C9C0C2}
.vtip b{color:#fff;font-weight:400}
.vtip u{text-decoration:none;color:#E8E1E3}
.vch{display:flex;align-items:center;gap:5px;width:min(100%,540px)}
.vch i{flex:1;height:clamp(34px,4.4vw,58px);border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(255,255,255,.04)}
.vch i.brk{border-color:var(--crimson-soft);background:rgba(192,130,146,.16)}
.vch em{flex:0 0 8px;height:2px;background:var(--crimson-soft);transform:rotate(26deg)}
.vgp{display:grid;gap:13px;width:min(100%,520px)}
.vgp .r{display:grid;grid-template-columns:1fr 104px 1fr;gap:11px;align-items:center}
.vgp .b{height:clamp(24px,2.8vw,38px);border-radius:3px}
.vgp .b.l{background:#862A3B}
.vgp .b.r{border:1.4px solid var(--crimson-soft)}
.vgp span{font-family:"Mono",monospace;font-size:9.5px;letter-spacing:.1em;color:#C9C0C2;text-align:center;text-transform:uppercase}
.vin{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:min(100%,540px)}
.vin i{border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:11px;font-style:normal;font-family:"Mono",monospace;font-size:10.5px;color:#C49AA2}
.vin i b{display:block;font-family:"Sans",sans-serif;font-size:13px;color:#fff;font-weight:400;margin-bottom:4px}
.vin i u{text-decoration:none;color:var(--crimson-soft)}

/* ============ TESTIMONIALS ============ */
.tst{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,60px);margin-top:clamp(38px,4.6vw,64px);align-items:start}
.quote{position:relative;background:var(--sky);border-radius:16px;padding:clamp(28px,3.4vw,44px);box-shadow:0 20px 50px -30px rgba(66,57,58,.35)}
.quote:before{content:"\201C";position:absolute;top:8px;right:26px;font-family:"Serif",serif;font-size:120px;line-height:1;color:rgba(203,78,101,.14)}
.quote p{font-family:"Serif",serif;font-size:clamp(18px,1.9vw,24px);line-height:1.55;color:var(--ink);position:relative}
.av{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;font-style:normal;font-family:"Sans",sans-serif;font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--blue),#CF586E)}
.av.sm{width:38px;height:38px;font-size:12.5px;background:linear-gradient(135deg,#BF3850,var(--blue))}
.voices .v:nth-child(2) .av{background:linear-gradient(135deg,var(--glow),#BF3850)}
.voices .v:nth-child(3) .av{background:linear-gradient(135deg,#CF586E,#E11D48)}
.quote p+p{margin-top:18px}
.quote .by{margin-top:20px;display:flex;align-items:center;gap:12px}
.quote .by b{font-family:"Serif",serif;font-size:17px;color:var(--ink);font-weight:700}
.quote .by span{font-size:14px;color:var(--muted)}
.voices{border-top:1px solid var(--hair)}
.voices .v{padding:16px 0;border-bottom:1px solid var(--hair);display:flex;gap:14px;align-items:center}
.voices .v b{display:block;font-family:"Serif",serif;font-size:17px;color:var(--ink)}
.voices .v span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.voices .note{margin-top:14px;font-size:13px;color:var(--muted)}

/* ============ CARDS / SURVEY ============ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(38px,4.6vw,62px)}
.card{background:#fff;border-radius:16px;padding:clamp(28px,3.2vw,44px);box-shadow:0 24px 60px -30px rgba(36,31,32,.5);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 70px -30px rgba(36,31,32,.6)}
.card .tag{font-family:"Sans",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.card h3{font-size:clamp(22px,2.4vw,31px);margin-top:11px}
.card .du{margin-top:9px;font-family:"Mono",monospace;font-size:12.5px;color:var(--muted)}
.card p{margin-top:13px;font-size:16px;color:var(--body);max-width:38ch}
.card .bt{margin-top:24px}

/* list blocks */
.qlist{margin-top:clamp(34px,4vw,54px);position:relative}
.qlist:before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--blue),var(--glow));border-radius:2px;opacity:.35}
.qlist .q{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:18px 0;align-items:start;position:relative}
.qlist .q .n{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--blue);
  font-family:"Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--blue);text-align:center;line-height:1.1;padding:0 3px}
.qlist .q b{font-family:"Serif",serif;font-size:clamp(18px,1.9vw,23px);color:var(--ink);font-weight:700;display:block}
.qlist .q p{margin-top:6px;font-size:15.5px;color:var(--muted);max-width:56ch}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,4.4vw,58px)}
.grid3 .c{padding:28px 28px 26px;background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:0 18px 40px -30px rgba(66,57,58,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.grid3 .c:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(66,57,58,.5)}
.grid3 .c .k{font-family:"Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--blue);text-transform:uppercase;font-weight:700}
.grid3 .c h3{font-size:clamp(19px,1.9vw,23px);margin-top:11px}
.grid3 .c p{margin-top:10px;font-size:15.5px;color:var(--body)}

/* stats */
.pst{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(38px,4.6vw,64px);border-top:1px solid var(--hair)}
.pst div{padding:28px 24px 26px 0;border-bottom:1px solid var(--hair)}
.pst div+div{padding-left:24px;border-left:1px solid var(--hair)}
.pst b{display:block;font-family:"Serif",serif;font-weight:700;font-size:clamp(42px,5.4vw,86px);line-height:1;color:var(--blue);letter-spacing:-.03em}
.pst span{display:block;margin-top:9px;font-size:14px;color:var(--muted)}

.pst em{display:block;margin-top:8px;font-family:"Mono",monospace;font-style:normal;font-size:11.5px;line-height:1.5;letter-spacing:.02em;color:#AC9398}

/* 2025 edition block */
.ed25{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,64px);margin-top:clamp(38px,4.4vw,62px);align-items:start}
.edq .big{font-family:"Serif",serif;font-size:clamp(19px,2.1vw,28px);line-height:1.45;color:var(--ink);border-left:3px solid var(--crimson);padding-left:26px}
.edq .big em{font-style:italic}
.edq .src{margin-top:12px;padding-left:29px;font-family:"Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.edband{margin-top:clamp(38px,4.4vw,62px);padding:clamp(22px,2.6vw,34px);border-radius:20px;
  background:linear-gradient(110deg,#EFECEC 0%,#F3F0F1 50%,#EEEAEB 100%)}
.edf{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.edf li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:22px 22px;background:#fff;border-radius:14px;
  box-shadow:0 18px 40px -26px rgba(66,57,58,.45);font-size:14.5px;color:var(--body);line-height:1.5}
.edf li b{display:block;font-family:"Serif",serif;font-weight:700;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--blue);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:6px}
.edf li b small{font-size:.5em;font-weight:700;margin-left:1px}
.ring{width:72px;height:72px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bg{stroke:#F5F2F3}
.ring .fg{stroke:var(--blue);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.rv.in .ring .fg{stroke-dashoffset:calc(100 - var(--p))}
@media (prefers-reduced-motion:reduce){.ring .fg{transition:none}}
/* hàng thẻ báo chí dưới khối trích dẫn + bìa */
.edcover{background:#fff;border-radius:16px;padding:16px;box-shadow:0 18px 40px -26px rgba(66,57,58,.4);display:flex;flex-direction:column;gap:16px}
.edcover img{width:100%;flex:1;min-height:200px;object-fit:cover;border-radius:10px}
.edcover .edcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.edcover .edcta .bt{flex:0 0 auto}
.edcover .edcta .fn{flex:1;min-width:180px;font-size:13px}
.edp{margin-top:20px}
.edp .k{font-family:"Sans",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.edp .prs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.edp .pr{display:block;padding:18px 18px 16px;background:#fff;border:1px solid var(--hair);border-radius:12px;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.edp a.pr:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(66,57,58,.45)}
.edp .pr b{display:block;font-family:"Serif",serif;font-weight:700;font-size:16.5px;color:var(--ink)}
.edp .pr span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.edp a.pr b{padding-right:22px}
.edp a.pr b:after{content:"↗";position:absolute;right:16px;top:18px;font-family:"Sans",sans-serif;font-size:13px;font-weight:400;
  color:var(--hair2);transition:color .3s var(--ease),transform .3s var(--ease)}
.edp a.pr:hover b{color:var(--blue)}
.edp a.pr:hover b:after{color:var(--blue);transform:translate(2px,-2px)}
.edp .pr.ev{background:#F7F6F6;border-color:#EDE9EA}
.edp .pr.ev b{color:var(--navy);font-size:11.5px;font-family:"Sans",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* team */
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px;margin-top:clamp(38px,4.6vw,62px)}
.tp img{width:84px;height:84px;border-radius:14px;object-fit:cover;filter:saturate(.85);transition:filter .5s var(--ease),transform .5s var(--ease)}
.tp:hover img{filter:saturate(1.05);transform:translateY(-3px)}
.tp b{display:block;margin-top:12px;font-family:"Serif",serif;font-size:16.5px;color:var(--ink)}
.tp span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* partners strip */
.ptns{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.ptn{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px 24px;min-width:0;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ptn:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(66,57,58,.45)}
.ptn i{display:flex;align-items:center;height:44px;margin-bottom:16px}
.ptn i img{max-height:calc(var(--ph,1) * 36px);max-width:100%;width:auto;
  filter:grayscale(100%);opacity:.7;transition:opacity .45s var(--ease),filter .45s var(--ease)}
.ptn:hover i img{filter:none;opacity:1}
.ptn b{display:block;font-family:"Serif",serif;font-weight:700;font-size:clamp(16px,1.5vw,19px);color:var(--ink)}
.ptn span{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.5}

/* roles (partner) */
.roles{margin-top:clamp(38px,4.6vw,62px);display:grid;gap:14px}
.role{display:grid;grid-template-columns:220px 1fr 130px;gap:24px;padding:26px 28px;align-items:start;background:#fff;border:1px solid var(--hair);border-radius:16px;
  box-shadow:0 18px 40px -30px rgba(66,57,58,.4);border-left:4px solid var(--blue)}
.role:first-child{border-left-color:var(--glow);background:linear-gradient(110deg,#FAF8F9,#FFFFFF 60%)}
.role h3{font-size:clamp(20px,2vw,26px)}
.role .slots{font-family:"Mono",monospace;font-size:11.5px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;margin-top:8px;font-weight:700}
.role ul{list-style:none}
.role li{font-size:15.5px;color:var(--body);padding:5px 0 5px 22px;position:relative}
.role li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:#EEEAEB;box-shadow:inset 0 0 0 3px var(--glow)}
.role .kind{justify-self:end;font-family:"Mono",monospace;font-size:10.5px;color:var(--navy);letter-spacing:.08em;text-transform:uppercase;background:#F7F6F6;border-radius:99px;padding:6px 12px;white-space:nowrap}

/* pledge / dark panel */
.pledge{border-radius:20px;padding:clamp(34px,4vw,58px);background:var(--grad-deep);color:#fff;margin-top:clamp(38px,4.6vw,62px);box-shadow:0 30px 70px -40px rgba(36,31,32,.7)}
.pledge h3{color:#fff;font-size:clamp(22px,2.4vw,32px)}
.pledge p{margin-top:16px;color:#E1DADB;font-size:16.5px;max-width:62ch}
.pledge .em{margin-top:18px;font-family:"Serif",serif;font-size:clamp(17px,1.7vw,21px);color:var(--glow);max-width:52ch}

/* CTA band */
.ctaband{position:relative;text-align:center;padding:clamp(72px,9vw,128px) 0;background:var(--grad-cta);color:#fff}
.ctaband:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--crimson) 22%,var(--crimson) 78%,transparent)}
.ctaband .lbl{color:rgba(255,255,255,.85)}
.ctaband h2{font-size:clamp(30px,4.6vw,66px);max-width:18ch;margin:18px auto 0;color:#fff}
.ctaband .l{margin:16px auto 0;font-size:clamp(16.5px,1.5vw,19px);color:rgba(255,255,255,.85);max-width:46ch}
.ctaband .btns{margin-top:32px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.ctaband .anon{margin-top:24px;font-size:13.5px;color:rgba(255,255,255,.75)}
.ctaband .card .bt.p{background:var(--blue)}
.ctaband>.wrap>.btns .bt.p{background:#fff;color:var(--navy)}
.ctaband>.wrap>.btns .bt.s{color:#fff;border-color:rgba(255,255,255,.55)}
.ctaband>.wrap>.btns .bt.s:hover{border-color:#fff}

/* close / footer */
.close{background:var(--grad-deep);color:#fff;padding:clamp(80px,10vw,140px) 0}
.close .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,66px);align-items:center}
.close h2{color:#fff;font-size:clamp(28px,3.4vw,48px)}
.close p{margin-top:16px;color:#C49AA2;font-size:16.5px;max-width:40ch}
.close ul{list-style:none;margin-top:22px}
.close li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15.5px;color:#DEC3C8}
.close li b{color:#fff;font-weight:400;font-family:"Serif",serif;font-size:17px}
.close .ev img{width:100%;height:clamp(210px,25vw,330px);object-fit:cover;border-radius:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
footer{background:var(--abyss);color:#A87A82;padding:0 0 42px}
footer .in{border-top:1px solid rgba(255,255,255,.14);padding-top:28px;display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center}
footer .lg{display:flex;gap:13px;align-items:center}
footer .lg img{height:24px;width:auto;display:block}
footer .lg .sp{width:1px;height:18px;background:rgba(255,255,255,.2)}
footer .c{font-size:14px;line-height:1.7}
footer .c b{color:#fff;font-weight:400}
footer .links{display:flex;gap:20px;font-size:13.5px}
footer .links a:hover{color:#fff}
footer .bar{margin-top:20px;font-family:"Mono",monospace;font-size:11px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:1000px){
  .nav .mn{display:none}
  .burger{display:block}
  .step{grid-template-columns:1fr;gap:12px;text-align:center}
  .step .num{text-align:center}
  .step .meter{margin-left:auto;margin-right:auto}
  .steps .dots{display:none}
  .inside .grid{grid-template-columns:1fr;gap:24px}
  .inside .pin{height:auto;position:relative;padding:64px 0}
  .vizbox{min-height:210px}
  .cards,.tst,.close .grid,.grid3,.pst,.ed25{grid-template-columns:1fr}
  .edp .prs{grid-template-columns:repeat(2,1fr)}
  .grid3 .c{border-left:none}
  .pst div+div{padding-left:0;border-left:none}
  .tg{grid-template-columns:1fr 1fr}
  .ptns{grid-template-columns:repeat(3,1fr)}
  .role{grid-template-columns:1fr;gap:10px}
  .role .kind{text-align:left;justify-self:start}
  .book.prior{display:none}

  /* "Inside the report": stack each caption with its own figure instead of
     cross-fading them in place — see #insideTrack.stk set by app.js */
  #insideTrack.stk .vizbox{display:none}
  #insideTrack.stk .txt,
  #insideTrack.stk .viz{position:static;opacity:1;transform:none;transition:none;pointer-events:auto}
  #insideTrack.stk .txt{margin-bottom:44px}
  #insideTrack.stk .txt:last-child{margin-bottom:0}
  #insideTrack.stk .viz{margin-top:22px;justify-content:flex-start}
}

/* ============ PHONE ============ */
@media (max-width:760px){
  :root{--navh:56px}
  .wrap{padding:0 20px}

  /* nav: logo + language + burger only — the CTA lives in the drawer */
  .nav .in{gap:10px}
  .nav .lg{gap:10px}
  .nav .lg img{height:22px}
  .nav .rt{gap:6px}
  .nav .cta{display:none}
  .langsw button{padding:10px 13px}
  .drawer a.dcta{display:block}

  /* hero: vết nứt dạt sang mép phải, chỉ giữ ba chip, nút xếp dọc */
  .hero.kv{min-height:0;padding:calc(var(--navh) + 24px) 0 44px}
  .hero.kv .hd{padding-top:150px;max-width:none}
  .hero.kv h1{font-size:clamp(40px,12.2vw,56px)}
  .hero.kv .sub{margin-top:14px;font-size:16px}
  .hero.kv .btns{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .hero.kv .btns .bt{width:100%;text-align:center}
  .hero.kv .fiss{left:auto;right:-30%;width:100%}
  /* inline style đặt --x/--y nên ở đây ghi đè thẳng left/top */
  .hero.kv .chip{font-size:11.5px;padding:7px 11px}
  .hero.kv .chip:nth-child(1){left:6%;top:76px}
  .hero.kv .chip:nth-child(3){left:46%;top:98px}
  .hero.kv .chip:nth-child(6){left:20%;top:134px}
  .hero.kv .chip:nth-child(2),.hero.kv .chip:nth-child(4),.hero.kv .chip:nth-child(5),.hero.kv .chip:nth-child(7),.hero.kv .chip:nth-child(8){display:none}
  .hero.kv .outs{display:none}
  .scrollhint{display:none}
  .herobelow{padding-top:26px}

  .phero{padding:calc(var(--navh) + 50px) 0 clamp(40px,7vw,58px)}
  .phero .facts{margin-top:26px;gap:8px}
  .phero .facts div{flex:1 1 calc(50% - 4px);min-width:0;padding:10px 12px}
  .phero .fiss{left:auto;right:-30%;width:100%}
  .grid3{grid-template-columns:1fr}
  .role{grid-template-columns:1fr;gap:12px;padding:22px}
  .role .kind{justify-self:start}
  .qlist:before{left:19px}
  .qlist .q{grid-template-columns:40px 1fr;gap:14px}
  .qlist .q .n{width:40px;height:40px;font-size:10px}
  .phero .facts span{font-size:15px}
  .phero .btns .bt{flex:1 1 100%;text-align:center}
  .close .bt,.ctaband .btns .bt{display:block;width:100%;text-align:center}
  .ctaband .btns{flex-direction:column;align-items:stretch;gap:10px}

  /* sticky steps: shorter scroll runway, caption out of the way */
  .steps .track{height:230svh}
  .steps .cap{left:20px;right:20px;bottom:34px;text-align:center;font-size:10px}
  .step .num{font-size:clamp(96px,26vw,120px)}

  .inside .pin{padding:52px 0}
  .vin{grid-template-columns:repeat(2,1fr)}
  .vgp .r{grid-template-columns:1fr 74px 1fr;gap:8px}

  .punchgrid{grid-template-columns:1fr;gap:34px}
  .bcol{width:240px;height:320px;margin:0 auto}
  .bcol .col{left:40px;width:150px}
  .bcol.in .tall{height:210px}
  .bcol .cap{left:32px;width:166px;bottom:210px}
  .bcol .short{left:96px;height:76px;bottom:246px;width:130px}
  .bcol .short b,.bcol .col b{font-size:34px}
  .bcol .s1{bottom:242px}.bcol .s2{bottom:256px}.bcol .s3{left:200px;bottom:238px}
  .edf{grid-template-columns:1fr}
  .edp .prs{grid-template-columns:1fr}
  .hm-h b{font-size:8px}
  .secno{flex-wrap:wrap;gap:8px 12px}
  .quote{padding-left:20px}
  .grid3 .c{padding:24px 22px}
  .pst div,.pst div+div{padding:24px 0}
  .edq .big{padding-left:20px}
  .edq .src{padding-left:23px}
  .edf li{grid-template-columns:86px 1fr;gap:14px}
  .tg{gap:26px 20px}
  .ptns{grid-template-columns:1fr 1fr;gap:10px}
  .ptn{padding:18px 16px}
  .ptn i{height:36px;margin-bottom:12px}
  .ptn i img{max-height:calc(var(--ph,1) * 28px)}
  .credbar{margin-top:22px;padding-top:16px}
  .credbar .crow{gap:14px}
  .credbar .crow+.crow{margin-top:14px;padding-top:14px}
  .credbar ul{gap:16px 15px}
  .credbar img{height:calc(var(--lh,1) * 17px)}
  .credbar .cl{font-size:9.5px;letter-spacing:.16em;width:100%;text-align:center}

  footer .in{flex-direction:column;align-items:flex-start;gap:18px}
  footer .links{flex-direction:column;gap:11px}
  footer .bar{flex-direction:column;gap:8px;line-height:1.7}
}

/* ============ BILINGUAL — must win over component selectors ============ */
html[lang="vi"] .en,
html[lang="en"] .vi{display:none !important}

/* Bên trong <b>, .vi/.en chỉ là lớp bọc ngôn ngữ chứ không phải một thành phần
   riêng — nếu không chặn, các rule dạng `.tp span`, `.phero .facts span` sẽ
   đè lên và làm chữ nhạt / sai cỡ (vd tên Thương Lê, TS Tom DeWitt). */
b > .vi,
b > .en{display:inline !important;margin:0 !important;font:inherit !important;
  color:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important}

/* đối tác đồng hành: hàng 3 thẻ */
.ptns.c3{grid-template-columns:repeat(3,1fr)}
.ptns.c4{grid-template-columns:repeat(4,1fr)}
/* chỗ đặt logo khi đối tác chưa có file logo — hiện tên bằng chữ */
.ptn i .wm{font-family:"Serif",serif;font-weight:700;font-size:23px;letter-spacing:-.01em;
  color:var(--ink);opacity:.55;transition:opacity .25s}
.ptn:hover i .wm{opacity:1}
@media (max-width:700px){.ptns.c3,.ptns.c4{grid-template-columns:1fr 1fr}
  .ptn i .wm{font-size:19px}}

/* ---------- mục 03: hai cột đồng tác giả ---------- */
/* Cột trái SOI.Pro, cột phải CafeBiz. Mỗi cột: logo, tiêu đề, đoạn giới thiệu,
   nút dẫn sang trang của họ, rồi tới người liên quan. Hai cột cao bằng nhau
   nhờ grid. Người bám ngay dưới nút chứ không đẩy xuống đáy thẻ: cột CafeBiz
   ngắn hơn, đẩy xuống thì hở một mảng trắng giữa thẻ, nhìn như thiếu nội dung. */
.coauth{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(34px,4vw,54px)}
.ca{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);
  border-radius:16px;padding:clamp(24px,2.6vw,34px)}
.ca-hd{display:flex;align-items:center;height:40px;margin-bottom:16px}
.ca-hd img{max-height:calc(var(--ch,1) * 32px);width:auto}
.ca h3{font-family:"Serif",serif;font-weight:700;font-size:clamp(20px,2vw,25px);color:var(--ink)}
.ca-tx{margin-top:12px}
.ca-tx p{font-size:14.5px;line-height:1.7;color:var(--body)}
.ca-tx p+p{margin-top:10px}
.ca-bt{align-self:flex-start;margin-top:20px;padding:11px 20px;font-size:14px}

/* Người liên quan nằm ngang, ba ô một hàng ở cả hai cột — cột CafeBiz chỉ có
   hai người thì ô thứ ba để trống chứ không giãn ra, để bề ngang mỗi ô hai bên
   bằng nhau. Khối này đẩy xuống đáy thẻ (margin-top:auto) và mỗi ô cao bằng
   nhau (min-height), nên hàng ảnh của hai cột nằm đúng một đường ngang. */
.ca-ppl{margin-top:auto;padding-top:clamp(26px,2.8vw,36px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);
  align-items:start;align-content:start;
  /* Đo theo phần nội dung, không tính padding: hai cột có cùng chiều cao dải
     người nên khi cùng bám đáy thẻ thì hàng ảnh hai bên trùng một đường. */
  box-sizing:content-box;min-height:190px}
.cp{display:flex;flex-direction:column;gap:10px;min-height:128px}
.cp img{width:56px;height:56px;flex:0 0 56px;border-radius:12px;object-fit:cover;filter:saturate(.85)}
.cp .cp-lg{width:56px;height:56px;flex:0 0 56px;border-radius:12px;border:1px solid var(--hair);
  background:var(--tint);display:flex;align-items:center;justify-content:center;padding:8px}
.cp .cp-lg img{width:auto;height:auto;max-width:100%;max-height:20px;border-radius:0;filter:none}
.cp b{display:block;font-family:"Serif",serif;font-size:15px;line-height:1.25;color:var(--ink)}
.cp span{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.45}
@media (max-width:860px){
  .coauth{grid-template-columns:1fr}
  .ca-ppl{margin-top:clamp(24px,2.6vw,34px);padding-top:0;min-height:0}
}
@media (max-width:460px){
  .ca-ppl{grid-template-columns:1fr 1fr}
  .cp{min-height:0}
}