/* Chase Trading
   Hệ thiết kế: một theme cho cả trang (Tối hoặc Sáng, mặc định theo máy), font Be Vietnam Pro,
   một màu nhấn vàng (mắt sư tử). Bo góc: khung ngoài 28px, lõi 22px, nút dạng viên thuốc, ô nhập 14px.
   Lớp z: nội dung 0, nav 40, nút liên hệ 45, form 50, hạt nhiễu 60. */
:root{
  --font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --r-shell:28px;--r-core:22px;--r-in:14px;
  --accent:#e8b53a;--accent-2:#f3c85f;--on-accent:#111113;
  --up:#30d158;--down:#ff453a;
}
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0c0e;--bg-2:#111114;--surface:#17171a;--surface-2:#1e1e22;--shell:rgba(255,255,255,.035);
  --text:#f2f2f4;--text-2:#a1a1aa;--text-3:#71717a;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --accent-text:#e8b53a;--glow:rgba(232,181,58,.14);--hi:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 30px 80px -40px rgba(0,0,0,.8);--nav:rgba(23,23,26,.68);
  --up-text:#34d15c;--down-text:#ff6259;
  /* token cho form */
  --panel:#17171a;--field:#0f0f11;--fg:#f2f2f4;--muted:#a1a1aa;--line2:rgba(255,255,255,.18);--gold:#e8b53a;--gold2:#f3c85f;--goldbg:rgba(232,181,58,.12);--r:18px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f6f7;--bg-2:#efeff1;--surface:#ffffff;--surface-2:#f4f4f5;--shell:rgba(17,17,19,.035);
  --text:#111113;--text-2:#52525b;--text-3:#8a8a93;--line:rgba(17,17,19,.08);--line-2:rgba(17,17,19,.14);
  --accent-text:#9a6a04;--glow:rgba(232,181,58,.18);--hi:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow:0 30px 70px -40px rgba(40,40,60,.35);--nav:rgba(255,255,255,.7);
  --up-text:#1a8f40;--down-text:#d4312a;
  --panel:#ffffff;--field:#f4f4f5;--fg:#111113;--muted:#52525b;--line2:rgba(17,17,19,.2);--goldbg:rgba(232,181,58,.16);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;transition:background-color .5s var(--ease),color .5s var(--ease)}
img,canvas,svg{max-width:100%}
img,canvas{display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:70;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
/* hạt nhiễu cố định, không chặn chuột */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Thanh điều hướng nổi ---------- */
.nav{position:fixed;left:0;right:0;top:12px;z-index:40;display:flex;justify-content:center;align-items:center;gap:8px;padding:0 10px;pointer-events:none}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:var(--nav);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:0 0 0 1px var(--line),var(--hi),0 16px 40px -24px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:9px;padding:0 12px 0 4px;font-weight:700;font-size:14px;letter-spacing:.12em}
.brand img{width:30px;height:30px;border-radius:50%}
.tabs{position:relative;display:flex;background:var(--shell);border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--line)}
.tabs button{position:relative;z-index:1;font:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:none;border:0;padding:7px 16px;border-radius:999px;cursor:pointer;transition:color .3s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--on-accent)}
.tabs .pill{position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--accent);transition:transform .55s var(--ease),width .55s var(--ease)}
.nav-links{display:flex;gap:2px}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-2);padding:8px 12px;border-radius:999px;transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--text);background:var(--shell)}
.nav-cta{font-size:14px;font-weight:600;color:var(--on-accent);background:var(--accent);padding:8px 16px;border-radius:999px;transition:transform .2s var(--ease),background-color .2s}
.nav-cta:hover{background:var(--accent-2)}
.nav-cta:active,.btn:active,.tabs button:active{transform:scale(.97)}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:560px){.brand span{display:none}.brand{padding:0 4px}.nav-cta{display:none}.tabs button{padding:7px 12px}.nav{gap:6px}}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:16px;font-weight:600;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background-color .25s,box-shadow .25s}
.btn-primary{background:var(--accent);color:var(--on-accent);padding:7px 7px 7px 24px;box-shadow:0 14px 34px -16px rgba(232,181,58,.7)}
.btn-primary:hover{background:var(--accent-2)}
.btn .ico{width:38px;height:38px;border-radius:50%;background:rgba(17,17,19,.12);display:grid;place-items:center;transition:transform .35s var(--ease)}
.btn .ico svg{width:16px;height:16px}
.btn:hover .ico{transform:translate(2px,-1px) scale(1.05)}
.btn-quiet{background:var(--surface);color:var(--text);padding:14px 22px;box-shadow:0 0 0 1px var(--line)}
.btn-quiet:hover{background:var(--surface-2)}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text);padding:12px 4px}
.tlink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}

/* ---------- Khung 2 lớp (bezel) ---------- */
.bezel{padding:6px;border-radius:var(--r-shell);background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.core{border-radius:var(--r-core);background:var(--surface);box-shadow:var(--hi),0 0 0 1px var(--line);overflow:hidden}

/* ---------- Chữ ---------- */
.display{font-size:clamp(44px,6.4vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.h2{font-size:clamp(34px,4.4vw,58px);line-height:1.06;letter-spacing:-.038em}
.h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--text-2);max-width:44ch}
.body{color:var(--text-2);max-width:60ch}
.accent{color:var(--accent-text)}
.label{align-self:flex-start;display:inline-block;font-size:13px;font-weight:600;color:var(--text-2);padding:6px 12px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.label b{color:var(--accent-text);font-weight:600}

/* ---------- Tab nội dung ---------- */
.view{animation:viewIn .7s var(--ease-out) both}
@keyframes viewIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
section{position:relative}
.sec{padding:clamp(96px,12vw,160px) 0 clamp(110px,13vw,176px)}

/* ---------- Hero ---------- */
.hero{padding:clamp(110px,13vh,140px) 0 clamp(60px,8vw,96px);min-height:min(100dvh,980px);display:flex;align-items:center;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-20%;width:70%;height:90%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero-copy .lead{margin-top:-4px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hero{min-height:0}}

/* Biểu đồ tương tác */
.chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px 20px}
.chart-head b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.chart-head small{display:block;font-size:12.5px;color:var(--text-3)}
.ctl{display:flex;align-items:center;gap:8px}
.seg{position:relative;display:flex;background:var(--shell);border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{position:relative;z-index:1;font:inherit;font-size:13px;font-weight:600;color:var(--text-2);background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer;transition:color .3s var(--ease)}
.seg button[aria-pressed="true"]{color:#fff}
.seg .pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--up);transition:transform .5s var(--ease),width .5s var(--ease),background-color .4s}
.seg[data-side="-1"] .pill{background:var(--down)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:0;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),background-color .2s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.92) rotate(-30deg)}
.icon-btn svg{width:15px;height:15px}
.chart-canvas{position:relative;cursor:crosshair;touch-action:pan-y}
.chart-canvas canvas{width:100%;height:auto;aspect-ratio:16/10.5}
@media (max-width:600px){.chart-canvas canvas{aspect-ratio:4/5}}
.chart-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 20px 14px;font-size:12.5px;color:var(--text-3)}
.legend{display:flex;gap:16px;white-space:nowrap}
@media (max-width:600px){.chart-foot>span{display:none}}
.legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}

/* ---------- Số liệu ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:40px 28px 36px;border-left:1px solid var(--line);position:relative}
.stat:first-child{border-left:0;padding-left:0}
.stat .v{display:inline-flex;align-items:baseline;font-size:clamp(52px,6vw,88px);line-height:1;letter-spacing:-.055em;font-weight:700;position:relative}
.stat .v small{font-size:.42em;letter-spacing:-.02em;margin-left:4px;color:var(--text-2)}
.stat .v::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out)}
.stat.done .v::after{transform:scaleX(1)}
.stat.done .v{animation:statGlow 1.6s var(--ease-out)}
@keyframes statGlow{0%{text-shadow:0 0 0 rgba(232,181,58,0)}30%{text-shadow:0 0 34px rgba(232,181,58,.55)}100%{text-shadow:0 0 0 rgba(232,181,58,0)}}
.stat p{margin-top:22px;font-size:15px;color:var(--text-2);max-width:22ch}
.stat.key .v{color:var(--accent-text)}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat{padding:30px 18px}.stat:nth-child(3){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- Kể chuyện theo cuộn (ghim) ---------- */
.story{height:340vh}
.story-pin{position:sticky;top:0;height:100dvh;display:flex;align-items:center;padding-top:60px}
.story-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,56px);align-items:center}
.story .h2{font-size:clamp(32px,3.6vw,50px)}
.steps{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{position:relative;padding:14px 18px 14px 22px;border-radius:16px;color:var(--text-3);transition:color .5s var(--ease),background-color .5s var(--ease)}
.steps li b{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em;color:inherit}
.steps li span{display:block;font-size:15px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s var(--ease)}
.steps li::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:2px;background:var(--line-2)}
.steps li::after{content:"";position:absolute;left:0;top:16px;width:3px;height:calc(100% - 32px);border-radius:2px;background:var(--accent);transform:scaleY(var(--p,0));transform-origin:top}
.steps li.on{color:var(--text);background:var(--shell)}
.steps li.on span{max-height:90px;opacity:1;color:var(--text-2);margin-top:4px}
.fig-3d .iso{font-family:var(--font)}
.fig-3d .iso-plate{border-radius:var(--r-core)!important}
.fig-3d .iso-plate-corner{font-family:var(--font)!important;text-transform:none!important;letter-spacing:-.01em!important;font-size:13px!important}
.fig-3d [data-readout]{font-family:var(--font)!important;font-weight:600;color:var(--text)!important}
.fig-3d .iso-legend,.fig-3d .iso-caption{display:none}
.iso[data-theme="light"]{--anatomy-card:#fff}
.iso[data-theme="dark"]{--anatomy-card:#141417}
@media (max-width:980px){
  .story{height:auto}.story-pin{position:static;height:auto;padding:0}
  .story-grid{grid-template-columns:1fr}
  .steps li span{max-height:none;opacity:1}
  .steps li{color:var(--text)}
}

/* ---------- Bento tính năng ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:56px}
.tile{grid-column:span 6;position:relative}
.tile.w7{grid-column:span 7}.tile.w5{grid-column:span 5}.tile.w4{grid-column:span 4}.tile.w8{grid-column:span 8}
.tile .core{height:100%;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;min-height:340px;position:relative}
.tile .core::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,181,58,.13),transparent 60%)}
.tile:hover .core::before{opacity:1}
.tile .body{font-size:16px}
.tile .art{margin-top:auto;padding-top:22px;position:relative}
.tile.tint .core{background:radial-gradient(120% 90% at 100% 0%,rgba(232,181,58,.16),transparent 60%),var(--surface)}
.tile.ink .core{background:linear-gradient(160deg,#18181b,#0e0e10);color:#f2f2f4}
.tile.ink .body{color:#a1a1aa}
[data-theme="light"] .tile.ink .core{background:linear-gradient(160deg,#1c1c1f,#111113)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.tile,.tile.w7,.tile.w5,.tile.w4,.tile.w8{grid-column:auto}.tile .core{min-height:0}}

/* hình động trong từng ô: chạy khi ô vào khung nhìn (.play) */
.mini-chart{width:100%;height:auto}
.mini-chart .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out)}
.mini-chart .fast{stroke:var(--accent)}.mini-chart .base{stroke:var(--text-3);stroke-width:2.2;transition-delay:.15s}
.mini-chart .dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1) 1.2s}
.mini-chart .ring{fill:none;stroke:var(--up);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.mini-chart .tag{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1) 1.35s}
.play .mini-chart .ln{stroke-dashoffset:0}
.play .mini-chart .dot,.play .mini-chart .tag{transform:scale(1)}
.play .mini-chart .ring{animation:ring 1.4s var(--ease-out) 1.3s}
@keyframes ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
.lvls{display:flex;flex-direction:column;gap:14px;font-size:13px;font-weight:600}
.lvls div{display:grid;grid-template-columns:52px 1fr 54px;align-items:center;gap:10px}
.lvls i{height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.lvls span:last-child{text-align:right;color:var(--text-2);opacity:0;transition:opacity .5s}
.play .lvls i{transform:scaleX(1)}.play .lvls span:last-child{opacity:1}
.lvls div:nth-child(2) i,.lvls div:nth-child(2) span:last-child{transition-delay:.12s}.lvls div:nth-child(3) i,.lvls div:nth-child(3) span:last-child{transition-delay:.24s}.lvls div:nth-child(4) i,.lvls div:nth-child(4) span:last-child{transition-delay:.36s}
.bars{display:grid;grid-template-columns:2.4fr 1fr 1fr;gap:10px;align-items:end;height:150px}
.bars div{position:relative;height:100%;display:flex;align-items:flex-end}
.bars i{display:block;width:100%;border-radius:12px 12px 6px 6px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--ease-out)}
.bars div:first-child i{background:var(--accent);box-shadow:none}
.bars b{position:absolute;left:12px;bottom:10px;font-size:15px;z-index:1}
.bars div:first-child b{color:var(--on-accent)}
.play .bars i{transform:scaleY(1)}
.bars div:nth-child(2) i{transition-delay:.15s}.bars div:nth-child(3) i{transition-delay:.3s}
.bars small{position:absolute;left:12px;top:-24px;font-size:12px;color:var(--text-3);font-weight:600}
.tbl{border-radius:var(--r-in);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);padding:4px 16px;font-size:14px}
.tbl div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease-out)}
.tbl div:first-child{border-top:0}
.play .tbl div{opacity:1;transform:none}
.tbl div:nth-child(2){transition-delay:.1s}.tbl div:nth-child(3){transition-delay:.2s}.tbl div:nth-child(4){transition-delay:.3s}
.tbl i{display:inline-block;width:72px;height:9px;border-radius:5px;background:var(--line-2)}
.closing{display:flex;align-items:flex-end;gap:14px;height:140px}
.closing .c{position:relative;width:26px;height:100%}
.closing .c .w{position:absolute;left:12px;width:2px;background:var(--up);top:18%;bottom:12%}
.closing .c .bd{position:absolute;left:3px;right:3px;bottom:22%;height:46%;border-radius:4px;background:var(--up);transform-origin:bottom}
.closing .c.dn .w,.closing .c.dn .bd{background:var(--down)}
.closing .live .bd{animation:forming 2.4s var(--ease) infinite paused}
.play .closing .live .bd{animation-play-state:running;animation-iteration-count:2;animation-fill-mode:forwards}
@keyframes forming{0%{transform:scaleY(.15)}35%{transform:scaleY(.8)}55%{transform:scaleY(.45)}100%{transform:scaleY(1)}}
.lock{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);opacity:0;transform:translateY(6px);transition:opacity .5s 4.6s,transform .6s var(--ease-out) 4.6s}
.lock svg{width:14px;height:14px;color:var(--up-text)}
.play .lock{opacity:1;transform:none}
.notes{display:flex;flex-direction:column;gap:10px}
.note{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px);opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .5s,transform .7s cubic-bezier(.34,1.3,.64,1)}
.note img{width:36px;height:36px;border-radius:10px;flex:none}
.note b{display:block;font-size:14px}.note span{display:block;font-size:13px;color:#a1a1aa}
.note time{margin-left:auto;font-size:12px;color:#71717a;align-self:flex-start}
.play .note{opacity:1;transform:none}
.play .note:nth-child(2){transition-delay:.9s}.play .note:nth-child(3){transition-delay:1.8s}

/* ---------- Slide ---------- */
.gal{position:relative;margin-top:48px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gal.drag{cursor:grabbing}
.gal-track{position:relative;height:calc(min(900px,84vw) * 9 / 16)}
.gal-track figure{position:absolute;left:50%;top:0;margin:0;width:min(900px,84vw);will-change:transform;border-radius:var(--r-core);overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--shadow);transform-origin:50% 50%}
.gal-track img{width:100%;height:auto;aspect-ratio:16/9;pointer-events:none}
.gal-ui{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:28px}
.dots{display:flex;gap:8px}
.dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:background-color .3s,width .45s var(--ease)}
.dots button[aria-current="true"]{background:var(--text);width:26px}

/* ---------- Cộng đồng ---------- */
.comm-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.comm-head{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.clist a{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:var(--r-core);background:var(--surface);box-shadow:var(--hi),0 0 0 1px var(--line);overflow:hidden;transition:transform .5s var(--ease),box-shadow .3s,background-color .3s}
.clist a::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--glow),transparent 70%);transform:translateX(-100%);transition:transform .6s var(--ease)}
.clist a:hover{transform:translateX(6px);box-shadow:var(--hi),0 0 0 1px var(--line-2)}
.clist a:hover::before{transform:none}
.clist img{position:relative;width:52px;height:52px;border-radius:16px;transition:transform .5s var(--ease)}
.clist a:hover img{transform:rotate(-6deg) scale(1.06)}
.clist b{position:relative;display:block;font-size:17px;font-weight:600;letter-spacing:-.015em}
.clist small{position:relative;display:block;font-size:14px;color:var(--text-3)}
.clist .go{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),background-color .3s,color .3s}
.clist a:hover .go{background:var(--accent);color:var(--on-accent);transform:rotate(-45deg)}
.clist .go svg{width:15px;height:15px}
.clist .kind{position:relative;font-size:12px;font-weight:600;color:var(--accent-text);margin-left:8px}
@media (max-width:900px){.comm-grid{grid-template-columns:1fr}.comm-head{position:static}}

/* ---------- Khóa học ---------- */
.class-card .core{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.open-now{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-2)}
.open-now i{width:8px;height:8px;border-radius:50%;background:var(--up);animation:live 2s var(--ease) infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.5)}50%{box-shadow:0 0 0 7px rgba(48,209,88,0)}}
.display.sm{font-size:clamp(38px,4.4vw,62px)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:12.5px;text-align:center}
.cal span{padding:8px 0;border-radius:10px;color:var(--text-3)}
.cal .h{font-weight:600;color:var(--text-2)}
.cal .d{background:var(--shell)}
.cal .on{background:var(--accent);color:var(--on-accent);font-weight:700;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,181,58,.5)}50%{box-shadow:0 0 0 8px rgba(232,181,58,0)}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts div{padding:14px 16px;border-radius:var(--r-in);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.facts b{display:block;font-size:16px}.facts span{font-size:13.5px;color:var(--text-3)}
.mods{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px)}
.mods-head{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:18px}
.mod{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.mod:last-child{border-bottom:1px solid var(--line)}
.mod .n{font-size:15px;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;padding-top:3px}
.mod p{color:var(--text-2);margin-top:6px;max-width:56ch}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;counter-reset:f}
.flow .core{padding:26px 24px;height:100%;display:flex;flex-direction:column;gap:8px}
.flow svg{width:26px;height:26px;color:var(--accent-text);margin-bottom:14px}
.flow p{color:var(--text-2);font-size:15px}
@media (max-width:900px){.mods{grid-template-columns:1fr}.mods-head{position:static}.flow{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}
.cta-band .core{padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:radial-gradient(90% 140% at 100% 100%,rgba(232,181,58,.18),transparent 60%),var(--surface)}
@media (max-width:760px){.cta-band .core{grid-template-columns:1fr}}

/* ---------- Chân trang ---------- */
footer{padding:40px 0 110px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer a:hover{color:var(--text)}
.fine{font-size:12px;line-height:1.55;color:var(--text-3);max-width:70ch}

/* ---------- Liên hệ nổi ---------- */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.fabm{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:10px;opacity:0;transform:translateY(12px) scale(.96);transform-origin:bottom right;visibility:hidden;transition:opacity .25s,transform .45s var(--ease),visibility 0s .45s}
.fab:hover .fabm,.fab:focus-within .fabm,.fab.open .fabm{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.fabm a{display:flex;align-items:center;gap:10px;background:var(--nav);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-radius:999px;padding:6px 18px 6px 6px;font-weight:600;font-size:14px;box-shadow:0 0 0 1px var(--line),0 12px 30px -14px rgba(0,0,0,.5)}
.fabm small{display:block;color:var(--text-3);font-weight:500;font-size:12px;line-height:1.2}
.fabm img{width:32px;height:32px;border-radius:10px}
.fabb{pointer-events:auto;font:inherit;font-weight:600;font-size:15px;color:var(--on-accent);background:var(--accent);border:0;border-radius:999px;padding:13px 22px;cursor:pointer;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.fabb:active{transform:scale(.95)}

/* ---------- Hiện dần khi cuộn ---------- */
.rv{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.js .rv.pre{opacity:0;transform:translateY(40px);filter:blur(8px)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;transition-delay:0s!important}
  .js .rv.pre{transform:none;filter:none}
  .story{height:auto}.story-pin{position:static;height:auto}
}
@media (prefers-reduced-transparency:reduce){.nav-in,.fabm a{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (max-width:480px){.clist .kind{display:none}}

/* Nền chấm sư tử */
#lionbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}
.hero::before{z-index:0}

/* Nút đổi giao diện (pill trượt mặt trời / mặt trăng) và nút đổi ngôn ngữ (cờ) */
.tools{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:var(--nav);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:0 0 0 1px var(--line),var(--hi),0 16px 40px -24px rgba(0,0,0,.5)}
.tsw{--w:64px;--k:30px;position:relative;width:var(--w);height:38px;flex:none;border:0;padding:0;border-radius:999px;cursor:pointer;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3);-webkit-tap-highlight-color:transparent}
.tsw-bg{position:absolute;top:50%;width:15px;height:15px;margin-top:-7.5px;transition:opacity .3s,transform .5s var(--ease)}
.tsw-bg.sun{left:11px}.tsw-bg.moon{right:11px}
.tsw-knob{position:absolute;top:4px;left:4px;width:var(--k);height:var(--k);border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 12px -3px rgba(232,181,58,.55),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .6s cubic-bezier(.34,1.45,.5,1),width .25s var(--ease);display:grid;place-items:center;overflow:hidden}
.tsw-knob svg{grid-area:1/1;width:16px;height:16px;transition:transform .6s var(--ease),opacity .35s}
[data-theme="dark"] .tsw-knob{transform:translateX(calc(var(--w) - var(--k) - 8px))}
[data-theme="dark"] .tsw-knob .sun,[data-theme="light"] .tsw-knob .moon{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="dark"] .tsw-bg.moon,[data-theme="light"] .tsw-bg.sun{opacity:0}
.tsw:hover .tsw-bg{color:var(--text-2)}
.tsw:active .tsw-knob{width:36px}
[data-theme="dark"] .tsw:active .tsw-knob{transform:translateX(calc(var(--w) - 36px - 8px))}
.tsw:focus-visible,.lsw a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lsw{position:relative;display:flex;height:38px;padding:3px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.lsw a{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:0 12px 0 5px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--text-2);transition:color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.lsw a[aria-current="true"]{color:var(--text)}
.lsw img{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2);transition:transform .5s var(--ease),filter .3s}
.lsw a:not([aria-current="true"]) img{filter:opacity(.6)}
.lsw a:hover img{filter:none;transform:scale(1.08)}
.lsw-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2),0 4px 12px -6px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.34,1.3,.5,1),width .5s var(--ease)}
[data-theme="light"] .lsw-pill{background:#fff}
@media (max-width:560px){.lsw a{padding:0 5px}.lsw a span{display:none}.tsw{--w:56px;--k:30px}.tools{padding:5px;gap:4px}}
@media (max-width:360px){.brand{display:none}}
/* Hiệu ứng đổi giao diện: vòng tròn lan ra từ nút (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.vt,.vt *:not(.tsw-knob):not(.tsw-knob svg):not(.tsw-bg),.vt *::before,.vt *::after{transition:none!important}

/* Đánh giá: thẻ rải trên bảng, kéo thả được, nút xáo lại */
.rw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rw-head .h2{margin-top:14px}
.rw-score{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 20px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--hi)}
.rw-score>b{font-size:40px;line-height:1;letter-spacing:-.03em}
.rw-score small{display:block;font-size:13px;color:var(--text-3)}
.stars{color:var(--accent);letter-spacing:2px;font-size:15px}
.rw-board{position:relative;height:clamp(460px,40vw,540px);margin-top:36px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rcard{position:absolute;left:0;top:0;width:var(--cw,300px);padding:20px 20px 16px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--hi),0 24px 50px -28px rgba(0,0,0,.55);cursor:grab;will-change:transform;touch-action:pan-y}
[data-theme="light"] .rcard{box-shadow:0 0 0 1px var(--line),var(--hi),0 24px 50px -30px rgba(40,40,60,.35)}
.rcard.hold{cursor:grabbing;box-shadow:0 0 0 1px var(--line-2),var(--hi),0 40px 70px -30px rgba(0,0,0,.6)}
.rcard .rc-top{display:flex;align-items:center;gap:11px}
.rcard .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:#111113;background:hsl(var(--h,42) 75% 62%);overflow:hidden}
.rcard .av img{width:100%;height:100%;object-fit:cover}
.rcard .rc-top b{display:block;font-size:15px;line-height:1.3}
.rcard .rc-top small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.3}
.rcard .rc-top>div{min-width:0;flex:1}
.rcard .rc-top>div *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard .src{flex:none;width:20px;height:20px;opacity:.9}
.rcard .stars{display:block;margin:14px 0 8px}
.rcard p{font-size:15px;line-height:1.55;color:var(--text);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rcard .rc-date{margin-top:12px;font-size:12px;color:var(--text-3)}
.rw-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;font-size:14px;color:var(--text-3)}
.rw-ui span{display:flex;align-items:center;gap:8px}
.rw-ui svg{width:16px;height:16px}
.rw-shuffle{font:inherit;font-size:14px;font-weight:600;color:var(--text);background:var(--surface);border:0;border-radius:999px;padding:9px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 0 0 1px var(--line-2),var(--hi);transition:transform .2s var(--ease)}
.rw-shuffle:hover{box-shadow:0 0 0 1px var(--accent),var(--hi)}
.rw-shuffle:active{transform:scale(.96)}
@media (max-width:600px){.rw-board{height:560px}.rcard{padding:18px 18px 14px}.rw-score>b{font-size:32px}}