/* Ngô Băng AI · hệ thiết kế bản 3 (18/10/2026)
   Theo mẫu anh Huyền gửi: nền đen sâu, quầng đỏ cam, ảnh nhuộm cam, tiêu đề chữ không chân mảnh
   chen 1 chữ nghiêng có chân, thẻ kính mờ ngả cam, chữ chìm khổng lồ, nút đỏ cam + vòng tròn mũi tên trắng.
   Ruột riêng của Băng: khung kéo trước/sau có timecode, nhãn phim, bộ đồ nghề làm phim AI. */

:root{
  /* Bản 4 (19/10/2026): học hệ màu, font của higgsfield.ai. Nền xanh than gần đen, xanh chanh neon làm điểm nhấn. */
  --bg:#0F1113; --bg-2:#131518; --card:#1C1E21; --card-2:#23262A; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#F7F7F8; --ink-2:#898A8B; --muted:#A8A8A8; --faint:#5E6166;
  --lime:#D1FE17; --lime-2:#C2EE00; --lime-soft:rgba(209,254,23,.14); --on-lime:#0F1113;
  --red:#FF3B5C; --orange:#D1FE17; --amber:#E4FF6B;
  --grad:linear-gradient(180deg,#DAFF3F 0%,#D1FE17 55%,#C2EE00 100%);
  --glass:linear-gradient(160deg,rgba(209,254,23,.10),rgba(255,255,255,.03));
  --glass-line:rgba(209,254,23,.28);
  --ok:#3ddc84; --err:#FF5A5F;
  --sans:"Space Grotesk","Inter",system-ui,sans-serif;
  --body:"Inter","Space Grotesk",system-ui,sans-serif;
  --serif:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --r:16px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(209,254,23,.45)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:480px){.container{padding:0 16px}}

/* ===== Chữ ===== */
h1,h2,h3{font-family:var(--sans);font-weight:300;letter-spacing:-.045em;line-height:1.02;margin:0}
h1{font-size:clamp(46px,7.2vw,92px)}
h2{font-size:clamp(34px,4.8vw,60px);line-height:1.06}
h3{font-size:clamp(20px,2vw,24px);font-weight:400;letter-spacing:-.025em;line-height:1.2}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.dim{color:var(--ink-2)}
p{margin:0}
.lead{font-size:clamp(16.5px,1.6vw,18.5px);color:var(--muted);max-width:560px}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);font-weight:500}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.eyebrow.hot:before{background:var(--orange);box-shadow:0 0 12px var(--orange)}
.tc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== Đầu trang ===== */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 0;transition:background .35s,backdrop-filter .35s,padding .35s}
.site-head.scrolled{background:rgba(15,17,19,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:10px 0;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.03em}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 18px rgba(209,254,23,0.248)}
.logo-mark i{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28)}
.nav{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);padding:8px 14px;border-radius:999px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.nav a:hover,.nav a.on{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
.head-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--ink);font-size:18px;cursor:pointer}
.nav .only-m{display:none}
@media (max-width:900px){
  .menu-btn{display:grid;place-items:center}
  .head-cta .btn-white{display:none}
  .nav{position:fixed;top:72px;left:12px;right:12px;flex-direction:column;align-items:stretch;border-radius:22px;padding:10px;background:rgba(14,11,10,.96);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:14px 16px;font-size:16.5px}
  .nav .only-m{display:block;text-align:center;margin-top:6px;background:var(--grad);color:#fff;border-color:transparent}
}

/* ===== Nút ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-family:var(--sans);font-weight:500;font-size:15.5px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:999px;padding:12px 22px;transition:transform .18s var(--ease),box-shadow .3s,background .25s,border-color .25s,color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px rgba(209,254,23,0.358)}
.btn-grad:hover{box-shadow:0 14px 36px -8px rgba(209,254,23,0.468)}
.btn-white{background:#fff;color:#0F1113}
.btn-white:hover{background:#ECFFA8}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-sm{padding:9px 16px;font-size:14px}
/* nút đỏ cam kèm vòng tròn mũi tên trắng */
.btn-arrow{padding:6px 6px 6px 24px}
.btn-arrow .arr{width:38px;height:38px;border-radius:50%;background:#fff;color:#0F1113;display:grid;place-items:center;transition:transform .3s var(--ease)}
.btn-arrow:hover .arr{transform:translateX(3px) rotate(-45deg)}
.arr svg{width:16px;height:16px}

/* ===== Hero ===== */
.hero{position:relative;margin:10px;border-radius:30px;overflow:hidden;min-height:min(880px,96vh);background:#0F1113;isolation:isolate}
@media (max-width:640px){.hero{margin:6px;border-radius:22px;min-height:0}}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:28% 30%;transform:scaleX(-1) scale(1.04);animation:heroIn 1.8s var(--ease) both}
@keyframes heroIn{from{transform:scaleX(-1) scale(1.12);opacity:.3}to{transform:scaleX(-1) scale(1.04);opacity:1}}
.hero-bg:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(15,17,19,.92) 0%,rgba(15,17,19,.62) 38%,rgba(15,17,19,.08) 70%),
  linear-gradient(0deg,rgba(15,17,19,.9) 0%,transparent 34%),
  radial-gradient(60% 60% at 75% 25%,rgba(209,254,23,0.138),transparent 70%)}
.hero-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,transparent calc(25% - .5px),rgba(255,255,255,.07) 25%,transparent calc(25% + .5px),
  transparent calc(50% - .5px),rgba(255,255,255,.05) 50%,transparent calc(50% + .5px),
  transparent calc(75% - .5px),rgba(255,255,255,.07) 75%,transparent calc(75% + .5px))}
.hero-ghost{position:absolute;left:-1vw;bottom:-3.2vw;z-index:-1;font-family:var(--sans);font-weight:200;font-size:clamp(90px,19vw,280px);letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);white-space:nowrap;pointer-events:none;user-select:none}
.hero-in{position:relative;padding:150px 44px 44px;display:grid;grid-template-columns:minmax(0,740px) 1fr;gap:24px;min-height:inherit}
.hero h1{font-size:clamp(46px,6.6vw,86px)}
.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.video-grid{grid-template-columns:1fr}}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;padding:120px 22px 28px}}
.hero-tag{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.35;max-width:240px}
.hero-tag .globe{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto}
.hero-tag .globe:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:rec 1.8s infinite}
@keyframes rec{50%{opacity:.35}}
.hero h1{margin:26px 0 22px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;animation:rise 1s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.08s}.hero h1 .ln:nth-child(3)>span{animation-delay:.16s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{margin-bottom:30px}
.proof{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);line-height:1.35}
.avatars{display:flex}
.avatars img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #1C1E21;margin-left:-10px}
.avatars img:first-child{margin-left:0}
.proof b{color:var(--ink);font-weight:600;display:block}
.stat-row{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-md);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stat{position:relative;width:196px;padding:16px 18px 14px}
.stat:after{content:"✳";position:absolute;top:10px;right:14px;font-size:15px;color:rgba(255,255,255,.75)}
.stat b{display:block;font-family:var(--sans);font-weight:300;font-size:40px;letter-spacing:-.05em;line-height:1}
.stat span{display:block;margin-top:26px;font-size:12.5px;color:rgba(247,247,248,.82);line-height:1.35}
@media (max-width:480px){.stat{width:calc(50% - 6px)}.stat b{font-size:32px}}
.hero-side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:24px}
.hero-chip{padding:12px 14px;border-radius:14px;background:rgba(10,8,7,.45);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;gap:6px;min-width:220px}
.hero-chip .tcv{font-size:22px;letter-spacing:.04em;color:var(--ink);font-weight:600}
.hero-chip .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.hero-chip .bar i{display:block;height:100%;width:46%;background:var(--grad);animation:tcbar 6s linear infinite}
@keyframes tcbar{from{width:4%}to{width:100%}}
.tools{text-align:right}
.tools .k{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.tools ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px;padding:0;margin:0;max-width:520px}
.tools li{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.02em;color:#E9EAEC}
.tools li i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;opacity:.85}
.tools li:nth-child(2n) i{border-radius:50%}
.tools li:nth-child(3n) i{transform:rotate(45deg);border-radius:3px}
@media (max-width:900px){.hero-side{align-items:flex-start}.hero-chip{display:none}.tools{text-align:left;margin-top:12px}.tools ul{justify-content:flex-start}}

/* ===== Khối trang ===== */
.sec{padding:120px 0;position:relative}
@media (max-width:640px){.sec{padding:80px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.sec-head .eyebrow{margin-bottom:22px}
.center{text-align:center}
.center .lead{margin:18px auto 0}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);transition:background .25s,color .25s,transform .2s}
.socials a:hover{background:#fff;color:#0F1113;transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .35s var(--ease),border-color .35s,background .35s}
.card.lift:hover{transform:translateY(-4px);border-color:rgba(209,254,23,.3);background:var(--card-2)}
.card p{margin-top:8px}
.card .tc{display:block;margin-bottom:12px}

/* Vì sao học ở đây */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
@media (max-width:900px){.why{grid-template-columns:1fr;gap:32px}}
.photo{border-radius:var(--r);overflow:hidden;position:relative;background:#1C1E21}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo .cap{position:absolute;left:16px;bottom:16px;right:16px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,247,248,.85)}
.why-photo{aspect-ratio:4/5}
.statement{font-family:var(--sans);font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.35;letter-spacing:-.025em;text-align:right;color:var(--ink-2)}
.statement b{font-weight:400;color:var(--ink)}
@media (max-width:900px){.statement{text-align:left}}
.meta-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0 28px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.meta-row .ico{display:flex;align-items:center;gap:10px;line-height:1.4}
.meta-row .ico i{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:14px}
.pill-list{display:flex;flex-wrap:wrap;gap:6px}
.pill-list span{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.duo{grid-template-columns:1fr}}
.big-num{font-family:var(--sans);font-weight:300;font-size:clamp(46px,5vw,64px);letter-spacing:-.06em;line-height:1}
.mini-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin:22px 0;font-size:12.5px;color:var(--muted)}
.mini-tools span{display:flex;align-items:center;gap:6px}
.mini-tools span:before{content:"";width:8px;height:8px;border-radius:2px;border:1.5px solid var(--muted)}
.fact{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:#1C1E21}
.fact img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:0;opacity:.75;filter:blur(1.5px)}
.fact:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(209,254,23,0.303),rgba(120,10,0,.25) 50%,rgba(20,4,2,.85))}
.fact>*{position:relative;z-index:2}
.fact-top{display:flex;justify-content:space-between;font-size:12.5px;color:#E9EAEC}
.fact .big-num{color:#fff}
.fact p{font-size:13.5px;color:#E9EAEC;margin-top:8px;max-width:240px;min-height:42px}
.fact .swap{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fact .swap.out{opacity:0;transform:translateY(8px)}

/* Khung dựng trước/sau */
.scrub{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 40px 90px -40px rgba(209,254,23,0.248)}
.scrub-top{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.scrub-top .rec{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.scrub-top .rec:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:rec 1.8s infinite}
.ba{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.5)}
.ba .handle:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140d0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");background-size:20px;background-position:center;background-repeat:no-repeat}
.ba .lab{position:absolute;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.ba .lab.l{left:12px}.ba .lab.r{right:12px;background:var(--grad)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.timeline{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 6px 2px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.timeline .track{position:relative;height:22px;border-radius:6px;background:repeating-linear-gradient(90deg,#23262A 0 10px,#131518 10px 11px);border:1px solid var(--line);overflow:hidden}
.timeline .track:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--pos,50%);background:linear-gradient(90deg,rgba(209,254,23,0.138),rgba(209,254,23,.4))}
.timeline .head{position:absolute;top:-2px;bottom:-2px;left:var(--pos,50%);width:2px;background:var(--amber);transform:translateX(-50%)}
.timeline .tcode{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

/* Thẻ video */
.vcard{display:flex;flex-direction:column;text-decoration:none;padding:0;overflow:hidden}
.vcard .thumb{aspect-ratio:16/9;background:#000;position:relative;overflow:hidden}
.vcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vcard:hover .thumb img{transform:scale(1.05)}
.vcard .dur{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.78);color:#fff;padding:3px 7px;border-radius:6px}
.vcard .new{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:600;background:var(--grad);color:#fff;padding:4px 10px;border-radius:999px}
.vcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.vcard .body .tc{margin:0}
.vcard .go{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:500;color:var(--amber)}

/* Thẻ skill tặng */
.skill{position:relative;overflow:hidden;padding:30px}
.skill:before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(209,254,23,0.248),transparent 65%);pointer-events:none}
.skill .ic{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:20px;margin-bottom:22px;box-shadow:0 10px 26px -8px rgba(209,254,23,0.385)}
.skill ul{margin:16px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.skill li{margin:4px 0}
.skill .src{display:block;margin-top:18px;font-size:13px;color:var(--ink-2)}
.skill .src a{color:var(--amber);text-decoration:none}

/* Các bước (đúng là trình tự) */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.step .no{font-family:var(--sans);font-weight:300;font-size:46px;letter-spacing:-.05em;line-height:1;margin-bottom:26px;color:var(--ink-2)}
.step .price{display:inline-block;margin-top:16px;font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2)}

/* Khóa Zero */
.course{position:relative;border-radius:30px;padding:56px;overflow:hidden;background:radial-gradient(80% 120% at 100% 0%,rgba(209,254,23,0.176),transparent 60%),var(--card);border:1px solid var(--line)}
@media (max-width:640px){.course{padding:30px 22px;border-radius:22px}}
.course-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
@media (max-width:900px){.course-grid{grid-template-columns:1fr}}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:520px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{padding:16px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.fig b{display:block;font-family:var(--sans);font-weight:300;font-size:38px;letter-spacing:-.05em;line-height:1}
.fig span{display:block;margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ===== Form đăng ký ===== */
.signup-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
@media (max-width:900px){.signup-wrap{grid-template-columns:1fr;gap:28px}}
.gets{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.gets li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.gets li:before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--grad) center/12px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),var(--grad)}
.gets b{color:var(--ink);font-weight:500}
.form-card{position:relative;border-radius:var(--r);padding:32px;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(160deg,rgba(209,254,23,.5),rgba(255,255,255,.06) 40%,rgba(209,254,23,0.275)) border-box;border:1px solid transparent;box-shadow:0 40px 100px -50px rgba(209,254,23,0.33)}
@media (max-width:520px){.form-card{padding:22px}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label,.field .lbl{font-size:14px;font-weight:500;color:var(--ink)}
.field label .req{color:var(--orange)}
.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--ink);background:#131518;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px 15px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:#6B6E73}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(209,254,23,.2);background:#16181B}
.field.bad input,.field.bad textarea{border-color:var(--err)}
.field .hint{font-size:12.5px;color:var(--err);min-height:0}
.note-toggle{background:none;border:0;color:var(--amber);font:inherit;font-size:14.5px;font-weight:500;padding:4px 0 14px;cursor:pointer}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5;margin:6px 0 12px;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;border-radius:6px;border:1.5px solid var(--line-2);background:#131518;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.check input:checked{background:var(--grad);border-color:transparent}
.check input:checked:after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.check.bad input{border-color:var(--err)}
.check a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form-card .btn-grad{width:100%;margin-top:8px;padding:16px 22px;font-size:16px}
.form-card .btn-arrow{justify-content:space-between}
.f-msg{margin-top:12px;font-size:14px;font-weight:500}
.f-msg.ok{color:var(--ok)}.f-msg.err{color:var(--err)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.success{animation:pop .6s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.success .ok-ic{width:54px;height:54px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin-bottom:18px;box-shadow:0 12px 30px -8px rgba(209,254,23,0.385)}
.success .ok-ic svg{width:24px;height:24px}
.dl{display:grid;gap:10px;margin:22px 0}
.dl a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;text-decoration:none;background:var(--glass);border:1px solid var(--glass-line);transition:transform .2s var(--ease)}
.dl a:hover{transform:translateY(-2px)}
.dl a b{font-weight:500;display:block}
.dl a small{color:rgba(247,247,248,.75);font-size:12.5px}
.dl .arr{width:34px;height:34px;border-radius:50%;background:#fff;color:#0F1113;display:grid;place-items:center;flex:0 0 auto}
.install{margin:6px 0 0;padding-left:20px;color:var(--muted);font-size:14.5px}
.install li{margin:5px 0}
.install code,.k-code{font-family:var(--mono);font-size:13px;background:#23262A;border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:var(--ink)}
.status{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;border:1px solid var(--line-2);color:var(--muted)}
.status.ok{border-color:rgba(61,220,132,.35);color:#c8f5dc;background:rgba(61,220,132,.06)}
.status.warn{border-color:rgba(209,254,23,.4);color:#ECFFA8;background:rgba(209,254,23,.07)}

/* Lộ trình khóa */
.part{margin-bottom:12px;padding:22px 26px}
.part summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.part summary::-webkit-details-marker{display:none}
.part summary .ph{display:block;font-size:12.5px;color:var(--amber);margin-bottom:4px}
.part summary b{font-family:var(--sans);font-weight:400;font-size:21px;letter-spacing:-.03em}
.part summary:after{content:"+";font-size:26px;font-weight:300;color:var(--muted);transition:transform .3s var(--ease);flex:0 0 auto}
.part[open] summary:after{transform:rotate(45deg)}
.lesson{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.lesson:first-of-type{margin-top:16px}
.lesson .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);padding-top:3px}
.lesson b{display:block;font-weight:500}
.lesson .muted{display:block;margin-top:2px}
.lesson .t{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;padding-top:3px}
@media (max-width:520px){.lesson{grid-template-columns:54px 1fr}.lesson .t{grid-column:2}}
.callout{border-left:2px solid var(--orange);background:linear-gradient(90deg,rgba(209,254,23,.1),transparent);border-radius:0 14px 14px 0;padding:18px 20px;margin:24px 0}

/* Trang con: đầu trang gọn */
.page-hero{position:relative;padding:150px 0 70px;overflow:hidden}
.page-hero:before{content:"";position:absolute;width:900px;height:600px;right:-260px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(209,254,23,0.154),transparent 62%);pointer-events:none}
.page-hero h1{font-size:clamp(42px,6vw,78px);margin:22px 0 22px}

/* Bài tài liệu */
.article{max-width:780px;margin:0 auto}
.article h2{font-size:clamp(28px,3.6vw,40px);margin:64px 0 18px}
.article p,.article li{font-size:17.5px;color:#D7D9DC}
.article p+p{margin-top:14px}
.article ol,.article ul{padding-left:22px}
.article li{margin:6px 0}
.article b{color:var(--ink);font-weight:600}
.article .video{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;margin:36px 0;box-shadow:0 40px 90px -40px rgba(209,254,23,0.275)}
.article .video iframe{width:100%;height:100%;border:0}
.prompt{position:relative;background:#131518;color:#E9EAEC;border:1px solid var(--line-2);border-radius:16px;padding:48px 20px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.75;white-space:pre-wrap;margin:18px 0}
.prompt .copy{position:absolute;top:10px;right:10px;font:inherit;font-size:11.5px;font-weight:700;background:var(--grad);color:#fff;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.toc-box{border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin:30px 0;background:var(--card)}
.toc-box ol{margin:10px 0 0}
.toc-box a{text-decoration:none}
.toc-box a:hover{color:var(--amber)}
.legal h2{font-size:clamp(24px,3vw,30px);margin:44px 0 12px}
.legal p,.legal li{color:#D7D9DC}

/* Câu hỏi hay gặp */
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:20px;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--muted);font-size:24px;font-weight:300;transition:transform .3s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{margin-top:10px;color:var(--muted)}

/* Chân trang */
.site-foot{position:relative;padding:90px 0 30px;border-top:1px solid var(--line);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-foot ul{list-style:none;padding:0;margin:12px 0 0}
.site-foot li{margin:8px 0;font-size:15px}
.site-foot a{text-decoration:none;color:var(--muted)}
.site-foot a:hover{color:var(--ink)}
.foot-ghost{font-family:var(--sans);font-weight:200;font-size:clamp(64px,15vw,210px);letter-spacing:-.07em;line-height:.85;margin-top:70px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;user-select:none}
.foot-bottom{margin-top:26px;font-size:13px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Chuyển động */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* Thuộc tính hidden luôn thắng các lớp display */
[hidden]{display:none!important}

/* Điện thoại: ảnh hero thành dải trên, mặt Băng không bị chữ đè (đặt cuối file để thắng các quy tắc trước) */
@media (max-width:640px){
  .hero{background:#0F1113}
  .hero-bg{bottom:auto;height:min(118vw,520px)}
  .hero-bg img{object-position:24% 22%}
  .hero-bg:after{background:linear-gradient(180deg,rgba(15,17,19,.1) 0%,rgba(15,17,19,.25) 50%,#0F1113 100%),radial-gradient(70% 50% at 70% 25%,rgba(209,254,23,0.138),transparent 70%)}
  .hero-in{padding-top:min(86vw,360px)}
  .hero-ghost{display:none}
  .hero-tag{display:none}
  .scrub-top span:last-child{display:none}
}

/* TẠM ẨN mục Thuê làm phim (anh chốt 18/10/2026). Muốn hiện lại: xóa dòng dưới, rồi đổi ?v= ở các trang */
.nb-hire{display:none!important}

/* ===== Pop-up cảm ơn sau khi đăng ký (18/10/2026) ===== */
@property --nb-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.nb-lock{overflow:hidden}
.nb-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;overflow-y:auto}
.nb-backdrop{position:fixed;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(209,254,23,0.105),transparent 70%),rgba(15,17,19,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .4s var(--ease)}
.nb-modal.open .nb-backdrop{opacity:1}
.nb-modal.closing .nb-backdrop{opacity:0;transition-duration:.25s}
.nb-card{position:relative;width:min(100%,470px);border-radius:28px;padding:40px 30px 28px;text-align:center;
  background:linear-gradient(#16181B,#16181B) padding-box,conic-gradient(from var(--nb-ang),#D1FE17,#E4FF6B,rgba(255,255,255,.06) 35%,rgba(255,255,255,.06) 65%,#D1FE17) border-box;
  border:1.5px solid transparent;box-shadow:0 50px 140px -40px rgba(209,254,23,0.413);
  opacity:0;transform:translateY(34px) scale(.9);transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .35s var(--ease);
  animation:nbSpin 7s linear infinite}
.nb-card:before{content:"";position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(50% 60% at 50% 60%,rgba(209,254,23,0.176),transparent 70%);pointer-events:none;animation:nbGlow 3.2s ease-in-out infinite}
.nb-modal.open .nb-card{opacity:1;transform:none}
.nb-modal.closing .nb-card{opacity:0;transform:translateY(14px) scale(.96);transition:transform .25s var(--ease),opacity .25s var(--ease)}
@keyframes nbSpin{to{--nb-ang:360deg}}
@keyframes nbGlow{50%{opacity:.55;transform:scale(1.08)}}
.nb-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-size:14px;transition:background .2s,color .2s,transform .2s}
.nb-x:hover{background:#fff;color:#0F1113;transform:rotate(90deg)}
/* Biểu tượng: lõi nảy ra, 2 vòng sóng lan, dấu tick tự vẽ nét, tia lửa bắn ra */
.nb-ic{position:relative;width:92px;height:92px;margin:0 auto 24px}
.nb-ic .core{position:absolute;inset:0;border-radius:50%;background:var(--grad);transform:scale(0);box-shadow:0 16px 44px -10px rgba(209,254,23,0.495);animation:nbPop .65s .12s cubic-bezier(.34,1.56,.64,1) forwards}
.nb-ic .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(209,254,23,.65);opacity:0;animation:nbRipple 2s .5s ease-out infinite}
.nb-ic .ring.r2{animation-delay:1.5s}
.nb-ic>svg{position:absolute;inset:24px;width:44px;height:44px;z-index:1}
.nb-ic>svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:nbDraw .5s .55s cubic-bezier(.65,0,.35,1) forwards}
.tone-err .nb-ic .core,.tone-wait .nb-ic .core{background:linear-gradient(135deg,#E4FF6B,#C2EE00)}
@keyframes nbPop{to{transform:scale(1)}}
@keyframes nbRipple{0%{transform:scale(1);opacity:.85}100%{transform:scale(2);opacity:0}}
@keyframes nbDraw{to{stroke-dashoffset:0}}
.nb-burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
.nb-burst i{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:0;box-shadow:0 0 10px var(--c);animation:nbBurst 1.05s var(--dl) cubic-bezier(.15,.75,.25,1) forwards}
.nb-burst i.st{border-radius:2px;width:calc(var(--s) * 1.6);height:3px}
@keyframes nbBurst{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1)}75%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.2)}}
/* Chữ hiện lần lượt */
.nb-up{opacity:0;transform:translateY(14px);animation:nbUp .55s var(--ease) forwards}
.nb-up.d1{animation-delay:.5s}.nb-up.d2{animation-delay:.6s}.nb-up.d3{animation-delay:.72s}.nb-up.d4{animation-delay:.84s}.nb-up.d5{animation-delay:.96s}.nb-up.d6{animation-delay:1.08s}
@keyframes nbUp{to{opacity:1;transform:none}}
.nb-card h3{font-size:clamp(28px,6vw,36px);font-weight:300;letter-spacing:-.04em;line-height:1.1}
.nb-sub{margin-top:6px;font-size:22px;color:var(--ink-2)}
.nb-sub .it{color:var(--amber)}
/* Chip email: phong bì bay vào, vệt sáng quét qua */
.nb-chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;max-width:100%;margin-top:22px;padding:11px 18px 11px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);text-align:left}
.nb-chip .env{flex:0 0 auto;width:26px;height:26px;color:#fff;animation:nbFly .9s .95s cubic-bezier(.34,1.56,.64,1) both}
.nb-chip span{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.nb-chip small{font-size:12px;color:rgba(247,247,248,.8)}
.nb-chip b{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-chip:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:nbShine 1.3s 1.25s ease-out forwards}
@keyframes nbFly{from{opacity:0;transform:translate(-34px,10px) rotate(-18deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes nbShine{to{left:140%}}
.nb-msg{margin-top:16px;color:var(--muted);font-size:15px}
.nb-list{list-style:none;padding:0;margin:18px auto 0;display:grid;gap:8px;max-width:340px;text-align:left}
.nb-list li{display:flex;gap:10px;font-size:14px;color:#D7D9DC}
.nb-list li:before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--grad) center/10px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),var(--grad)}
.nb-tip{margin-top:16px;font-size:13px;color:var(--faint)}
.nb-tip b{color:var(--muted);font-weight:500}
.nb-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media (max-width:480px){.nb-card{padding:36px 20px 22px;border-radius:24px}.nb-actions .btn{flex:1 1 100%}}
/* Nút gửi đang chạy: vòng tròn mũi tên thành vòng quay */
.btn-arrow.loading .arr svg{display:none}
.btn-arrow.loading .arr:after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #0F1113;border-right-color:transparent;animation:nbRot .7s linear infinite}
@keyframes nbRot{to{transform:rotate(360deg)}}
/* Thẻ "đã nhận đăng ký" thay chỗ form */
.done-card{text-align:center;animation:nbUp .6s var(--ease) both}
.done-card .done-ic{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(209,254,23,0.44)}
.done-card .done-ic svg{width:26px;height:26px}
.done-card h3{font-size:26px}
.done-card p{margin:10px auto 18px;max-width:380px}
/* Người dùng tắt hiệu ứng: hiện thẳng, không để phần tử nào bị ẩn */
@media (prefers-reduced-motion:reduce){
  .nb-card,.nb-backdrop{opacity:1!important;transform:none!important}
  .nb-up,.done-card{opacity:1!important;transform:none!important}
  .nb-ic .core{transform:none!important}
  .nb-ic>svg path{stroke-dashoffset:0!important}
  .nb-burst,.nb-ic .ring{display:none}
}


/* ===================================================================
   GIAO DIỆN BẢN 4 (19/10/2026): theo hệ màu, font của higgsfield.ai
   Space Grotesk đậm viết hoa cho tiêu đề, Inter cho chữ đọc, Space Mono cho nhãn.
   Nền #0F1113, thẻ #1C1E21 / #23262A, xanh chanh #D1FE17 làm điểm nhấn, chữ trên nền chanh màu đen.
   =================================================================== */
body{font-family:var(--body);font-size:16px;background:var(--bg)}
::selection{background:rgba(209,254,23,.35);color:#fff}
:focus-visible{outline-color:var(--lime)}
h1,h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.04em}
h1{line-height:.96}
h2{line-height:1}
h3{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.it{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--lime)}
.dim{color:#5E6166}
.dim .it{color:var(--lime)}
.lead{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.eyebrow.hot{color:var(--lime)}
.eyebrow:before{border-radius:2px}
.eyebrow.hot:before{background:var(--lime);box-shadow:0 0 12px rgba(209,254,23,.8)}
.tc{font-family:var(--mono);letter-spacing:.06em}
.grad-text{background:none;color:var(--lime)}
/* Đầu trang */
.site-head.scrolled{background:rgba(15,17,19,.82)}
.logo{font-family:var(--sans);font-weight:700;letter-spacing:-.03em}
.logo-mark{background:var(--lime);box-shadow:0 6px 18px rgba(209,254,23,.35)}
.logo-mark i{background:var(--on-lime);box-shadow:0 0 0 4px rgba(15,17,19,.18)}
.nav{background:rgba(28,30,33,.7)}
.nav a.on,.nav a:hover{color:var(--lime);background:rgba(209,254,23,.08);border-color:rgba(209,254,23,.18)}
.nav .only-m{background:var(--lime);color:var(--on-lime)}
/* Nút: xanh chanh chữ đen, đáy đậm như nút bấm thật */
.btn{font-family:var(--body);font-weight:600;border-radius:12px}
.btn-grad{background:var(--lime);color:var(--on-lime);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 12px 30px -14px rgba(209,254,23,.7)}
.btn-grad:hover{background:#DCFF45;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 16px 36px -14px rgba(209,254,23,.9)}
.btn-grad:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.btn-white{background:#fff;color:var(--on-lime);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-white:hover{background:#ECFFA8}
.btn-ghost{background:#1C1E21;border-color:var(--line-2)}
.btn-ghost:hover{background:#23262A;border-color:rgba(209,254,23,.35)}
.btn-arrow{padding:6px 6px 6px 22px;border-radius:14px}
.btn-arrow .arr{background:var(--on-lime);color:var(--lime);border-radius:10px}
.btn-arrow.loading .arr:after{border-color:var(--lime);border-right-color:transparent}
/* Hero: ảnh màu tự nhiên, phủ tối, không nhuộm */
.hero{border-radius:20px;background:#0F1113}
.hero-bg img{filter:saturate(1.05) contrast(1.05)}
.hero-bg:after{background:linear-gradient(90deg,rgba(15,17,19,.94) 0%,rgba(15,17,19,.7) 38%,rgba(15,17,19,.15) 72%),linear-gradient(0deg,rgba(15,17,19,.95) 0%,transparent 36%),radial-gradient(50% 50% at 78% 22%,rgba(209,254,23,.10),transparent 70%)}
.hero-ghost{font-family:var(--sans);font-weight:700;letter-spacing:-.05em;-webkit-text-stroke:1px rgba(255,255,255,.1)}
.hero-tag .globe:after{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.glass{background:rgba(28,30,33,.72);border-color:var(--line-2);border-radius:14px}
.stat:after{color:var(--lime)}
.stat b{font-family:var(--sans);font-weight:700;letter-spacing:-.04em}
.stat span{color:var(--muted)}
.hero-chip{border-radius:12px;background:rgba(15,17,19,.6)}
.hero-chip .bar i{background:var(--lime)}
.tools li{font-family:var(--sans);font-weight:600}
.tools li i{color:var(--lime)}
/* Thẻ, số liệu */
.card{border-radius:16px}
.card.lift:hover{border-color:rgba(209,254,23,.35)}
.big-num,.fig b,.step .no{font-family:var(--sans);font-weight:700;letter-spacing:-.05em}
.fig{border-radius:14px;background:#1C1E21}
.step .no{color:#3A3E44}
.card.step:hover .no{color:var(--lime)}
.pill-list span{border-radius:8px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.mini-tools span:before{border-color:var(--lime)}
.fact{background:#1C1E21}
.fact:before{background:linear-gradient(180deg,rgba(15,17,19,.25),rgba(15,17,19,.55) 50%,rgba(15,17,19,.95))}
.fact .big-num{color:var(--lime)}
.fact .fact-top,.fact p{color:#E9EAEC}
.photo{border-radius:16px}
.photo .cap{font-family:var(--mono)}
.course{border-radius:20px;background:radial-gradient(70% 120% at 100% 0%,rgba(209,254,23,.12),transparent 60%),#1C1E21}
.skill:before{background:radial-gradient(circle,rgba(209,254,23,.22),transparent 65%)}
.skill .ic{background:var(--lime);border-radius:12px;box-shadow:0 10px 26px -10px rgba(209,254,23,.7)}
.vcard .new{background:var(--lime);color:var(--on-lime);border-radius:6px;font-family:var(--mono);text-transform:uppercase;font-size:10.5px}
.vcard .go,.link-arrow,.skill .src a{color:var(--lime)}
.socials a:hover{background:var(--lime);color:var(--on-lime)}
.part summary .ph{color:var(--lime);font-family:var(--mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.06em}
.part summary b{font-family:var(--sans);font-weight:600}
.callout{border-left-color:var(--lime);background:linear-gradient(90deg,rgba(209,254,23,.08),transparent)}
.prompt{border-radius:12px}
.prompt .copy{background:var(--lime);color:var(--on-lime);border-radius:8px}
.toc-box a:hover,.faq summary:hover{color:var(--lime)}
/* Khung dựng trước/sau */
.scrub{border-radius:18px;box-shadow:0 40px 90px -50px rgba(209,254,23,.35)}
.ba .lab{border-radius:6px}
.ba .lab.r{background:var(--lime);color:var(--on-lime)}
.timeline .track:before{background:linear-gradient(90deg,rgba(209,254,23,.18),rgba(209,254,23,.38))}
.timeline .head{background:var(--lime)}
/* Form */
.form-card{border-radius:18px;background:linear-gradient(#1C1E21,#1C1E21) padding-box,linear-gradient(160deg,rgba(209,254,23,.55),rgba(255,255,255,.06) 40%,rgba(209,254,23,.25)) border-box;box-shadow:0 40px 100px -60px rgba(209,254,23,.55)}
.field input,.field textarea,.field select{background:#131518;border-radius:10px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(209,254,23,.18);background:#15171A}
.note-toggle{color:var(--lime)}
.check input:checked{background:var(--lime)}
.check input:checked:after{border-color:var(--on-lime)}
.field label .req,.check .req{color:var(--lime)!important}
.gets li:before,.nb-list li:before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1113' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.done-card .done-ic{background:var(--lime);box-shadow:0 14px 34px -12px rgba(209,254,23,.8)}
.done-card .done-ic svg path{stroke:var(--on-lime)}
.done-card h3{text-transform:uppercase;font-weight:700}
/* Pop-up cảm ơn */
.nb-backdrop{background:radial-gradient(60% 50% at 50% 40%,rgba(209,254,23,.08),transparent 70%),rgba(15,17,19,.8)}
.nb-card{border-radius:20px;background:linear-gradient(#16181B,#16181B) padding-box,conic-gradient(from var(--nb-ang),#D1FE17,#F7F7F8 12%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,#D1FE17) border-box;box-shadow:0 50px 140px -50px rgba(209,254,23,.55)}
.nb-card:before{background:radial-gradient(50% 60% at 50% 60%,rgba(209,254,23,.16),transparent 70%)}
.nb-card h3{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
.nb-sub .it{color:var(--lime)}
.nb-ic .core{background:var(--lime);box-shadow:0 16px 44px -12px rgba(209,254,23,.9)}
.nb-ic .ring{border-color:rgba(209,254,23,.6)}
.nb-ic>svg path{stroke:var(--on-lime)}
.tone-err .nb-ic .core,.tone-wait .nb-ic .core{background:#F7F7F8}
.nb-chip{background:#23262A;border-color:rgba(209,254,23,.28);border-radius:12px}
.nb-chip .env{color:var(--lime)}
.nb-chip small{color:var(--muted);font-family:var(--mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em}
.nb-x:hover{background:var(--lime);color:var(--on-lime)}
.status.warn{border-color:rgba(209,254,23,.35);color:#ECFFA8;background:rgba(209,254,23,.06)}
/* Chân trang */
.site-foot{background:#0C0D0F}
.foot-ghost{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;background:linear-gradient(180deg,rgba(209,254,23,.22),rgba(209,254,23,0));-webkit-background-clip:text;background-clip:text}
@media (max-width:640px){
  .hero-bg:after{background:linear-gradient(180deg,rgba(15,17,19,.05) 0%,rgba(15,17,19,.3) 50%,#0F1113 100%)}
  h1{font-size:clamp(40px,11.5vw,56px)}
}