/* =====================================================================
   Du Học OnKo – Landing v2 (editorial premium)
   Self-contained stylesheet: the page does not load style.css
   ===================================================================== */
/* Be Vietnam Pro 400–800, self-hosted (latin + vietnamese subsets) */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/be-vietnam-pro-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/be-vietnam-pro-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#0B1426; --navy:#0A1B38; --navy-2:#11284F; --deep:#050C1A;
  --orange:#FF6B1A; --orange-2:#FF8A3D; --amber:#FFB14E; --sand:#FBF6EF;
  --text:#465066; --muted:#7D8799; --line:#E6E9EF; --bg:#F4F6FA; --white:#fff;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}/* anchors (#dangky...) stop below the fixed header */
body{margin:0;font-family:var(--font);color:var(--text);background:#fff;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);letter-spacing:-.025em;line-height:1.12}
button,input,select,textarea{font-family:var(--font)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.kicker i{font-style:normal;color:var(--muted);font-weight:600}
.display{font-size:clamp(34px,4.6vw,60px);font-weight:800;line-height:1.06;letter-spacing:-.035em}
.display em{font-style:normal;color:var(--orange)}
.lead{font-size:18px;line-height:1.75}
.grad{background:linear-gradient(100deg,var(--orange) 0%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-o{background:var(--orange);color:#fff;box-shadow:0 18px 36px -14px rgba(255,107,26,.75)}
.btn-o:hover{background:#FF5A00}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--orange);padding-bottom:4px}
.link .ar{transition:transform .25s var(--ease)}
.link:hover .ar{transform:translateX(4px)}

/* reveal (content stays visible without JS) */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}.js .rv.d4{transition-delay:.4s}
.js .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.js .clip.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.js .rv,.js .clip{opacity:1;transform:none;clip-path:none;transition:none}html{scroll-behavior:auto}}

/* ---------- announcement + header ---------- */
.annc{background:var(--deep);color:#AFC0DA;font-size:13px;text-align:center;padding:9px 16px;overflow:hidden}
.annc b{color:var(--amber)}
.annc .tag{display:inline-block;background:var(--amber);color:var(--deep);padding:1px 6px;border-radius:4px;font-size:11px;font-weight:800;margin:0 3px}
.annc-rotator{position:relative;height:20px;display:flex;align-items:center;justify-content:center}
.annc-msg{position:absolute;opacity:0;transform:translateY(12px);transition:all .45s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;pointer-events:none}
.annc-msg.active{opacity:1;transform:translateY(0);pointer-events:auto}
@media (max-width:768px){
  .annc-rotator{height:18px}
  .annc-msg{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
.hdr{position:absolute;left:0;right:0;z-index:50;transition:background .35s,box-shadow .35s}
.hdr-in{display:flex;align-items:center;gap:32px;height:84px}
.hdr.solid{position:fixed;top:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(11,20,38,.06)}
.hdr.solid .hdr-in{height:72px}
.logo{position:relative;display:block;flex-shrink:0;height:40px}
.logo img{height:40px;width:auto;transition:opacity .3s}
.logo .on-light{position:absolute;left:0;top:0;opacity:0}
.hdr.solid .logo .on-dark{opacity:0}.hdr.solid .logo .on-light{opacity:1}
.logo-txt{font-size:20px;font-weight:800;color:#fff}.hdr.solid .logo-txt{color:var(--navy)}
.nav{display:flex;gap:34px;margin-left:auto}
.nav a{color:rgba(255,255,255,.82);font-weight:500;font-size:15px;position:relative;padding:6px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(1)}
.hdr.solid .nav a{color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:22px}
.hdr-phone{display:flex;flex-direction:column;line-height:1.2;color:#fff;font-weight:700;font-size:15px}
.hdr-phone small{font-size:11px;font-weight:500;color:rgba(255,255,255,.6);letter-spacing:.04em}
.hdr.solid .hdr-phone{color:var(--ink)}.hdr.solid .hdr-phone small{color:var(--muted)}
.hdr .btn{height:46px;padding:0 22px;font-size:14.5px}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:22px;padding:8px;cursor:pointer}
.hdr.solid .burger{color:var(--ink)}
.mnav{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;color:#fff;overflow:hidden;background:var(--deep);display:flex;align-items:center}
.hero-bg{position:absolute;inset:-6% 0 0;background-size:cover;background-position:center 55%;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(5,12,26,.97) 0%,rgba(5,12,26,.88) 34%,rgba(5,12,26,.45) 66%,rgba(5,12,26,.7) 100%),linear-gradient(0deg,rgba(5,12,26,1) 0%,rgba(5,12,26,0) 30%)}
.hero-glow{position:absolute;z-index:1;width:760px;height:760px;left:-260px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,26,.24),rgba(255,107,26,0) 62%);pointer-events:none}
.hero-ko{position:absolute;z-index:1;left:40%;bottom:4%;font-size:min(26vw,360px);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.07);pointer-events:none;user-select:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:56px;align-items:center;padding-top:140px;padding-bottom:80px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:13.5px;color:#DCE5F3;backdrop-filter:blur(6px)}
.pill .flag{width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.pill .flag svg{width:20px;height:20px}
.hero h1{color:#fff;font-size:clamp(42px,5.2vw,74px);font-weight:800;line-height:1.02;letter-spacing:-.045em;margin:26px 0 24px}
.hero h1 .grad{white-space:nowrap}
.hero .sub{font-size:19px;line-height:1.7;color:#B9C6DB;max-width:540px}
.hero .sub b{color:#fff;font-weight:600}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-facts{display:flex;margin-top:52px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;max-width:560px}
.hero-facts div{flex:1;padding-right:20px}
.hero-facts div+div{padding-left:24px;border-left:1px solid rgba(255,255,255,.12)}
.hero-facts b{display:block;font-size:30px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1}
.hero-facts span{font-size:13.5px;color:#93A4C0}

/* registration form */
.form{background:#fff;color:var(--ink);border-radius:28px;padding:28px 28px 22px;box-shadow:0 50px 100px -40px rgba(0,0,0,.75)}
.form-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.form h3,.form .form-t{font-size:22px;font-weight:800;letter-spacing:-.02em}
.form-h p{font-size:13.5px;color:var(--muted);margin-top:4px}
.form-h p b{color:#15A35A}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#15A35A;background:#E9F8EF;padding:6px 10px;border-radius:999px;white-space:nowrap}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#15A35A;animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(21,163,90,.5)}70%{box-shadow:0 0 0 7px rgba(21,163,90,0)}100%{box-shadow:0 0 0 0 rgba(21,163,90,0)}}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.fgrid .full{grid-column:1/-1}
.f label{display:block;font-size:12.5px;font-weight:600;color:#2A3448;margin-bottom:5px}
.f label i{font-style:normal;color:var(--orange)}
.f input,.f select,.f textarea{width:100%;height:46px;border:0;border-radius:12px;background:#F2F4F8;padding:0 14px;font-size:14.5px;color:var(--ink);transition:box-shadow .2s,background .2s;appearance:none;outline:0}
.f textarea{height:62px;padding:12px 14px;resize:vertical}
.f select{background:#F2F4F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237D8799' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:34px}
.f input:focus,.f select:focus,.f textarea:focus{background:#fff;box-shadow:0 0 0 2px var(--orange)}
.f input::placeholder,.f textarea::placeholder{color:#A3ACBB}
.form .btn{width:100%;margin-top:14px;border-radius:14px}
.fnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:12px;text-align:center}
.fnote span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fnote i{font-size:13px;line-height:1;color:#22A06B}
@media (max-width:380px){.fnote .dot{display:none}.fnote{column-gap:12px}}
.done{display:none;text-align:center;padding:40px 10px}
.done>i{font-size:54px;color:#15A35A}
.done h4,.done .done-t{font-size:24px;margin:14px 0 8px}

/* partner logos */
.logos{position:relative;padding:52px 0 48px;overflow:hidden;background:#fff radial-gradient(42% 46% at 50% 0%,rgba(255,107,26,.09),rgba(255,107,26,0) 100%) no-repeat;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos p{display:flex;align-items:center;justify-content:center;gap:16px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 auto 28px;padding:0 20px;max-width:760px}
.logos p::before,.logos p::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,107,26,0),var(--orange))}
.logos p::after{background:linear-gradient(-90deg,rgba(255,107,26,0),var(--orange))}
/* edge fade via mask so it works on the tinted background */
.logos-fade{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos-track{display:flex;width:max-content;animation:marq 60s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
.logos-track a,.logos-track span{display:flex;align-items:center;justify-content:center;height:68px;padding:0 30px}
/* multiply + slight brighten hides white/light-gray backgrounds and frames baked into uploaded logos */
.logos-track img{display:block;height:68px;max-width:190px;width:auto;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.08) contrast(1.12);transition:transform .3s var(--ease)}
.logos-track a:hover img,.logos-track span:hover img{transform:scale(1.08)}
@media (max-width:760px){.logos{padding:38px 0 34px}.logos p{font-size:11.5px;letter-spacing:.12em;gap:10px;margin-bottom:20px}.logos-track a,.logos-track span{height:52px;padding:0 18px}.logos-track img{height:52px;max-width:140px}}
@media (max-width:380px){.logos-track a,.logos-track span{height:62px;padding:0 14px}.logos-track img{height:62px;max-width:170px}}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:140px 0}
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:end;margin-bottom:72px}
.head .display{margin-top:18px}

/* WHY: editorial list + collage */
.why .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center}
.why-list{margin-top:44px}
.why-item{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:26px 0;border-top:1px solid var(--line)}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item .no{grid-row:span 2;font-size:15px;font-weight:700;color:var(--orange);padding-top:5px}
.why-item h3{font-size:22px;font-weight:700}
.why-item p{font-size:16px}
.collage{position:relative;height:640px}
.collage .c1,.collage .c2{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,20,38,.5)}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.collage div:hover img{transform:scale(1.05)}
.collage .c1{left:0;top:0;width:72%;height:78%}
.collage .c2{right:0;bottom:0;width:52%;height:52%;border:8px solid #fff}
.collage .stat{position:absolute;left:-28px;bottom:70px;background:var(--ink);color:#fff;border-radius:20px;padding:22px 26px;box-shadow:0 30px 60px -30px rgba(11,20,38,.8)}
.collage .stat b{display:block;font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1}
.collage .stat span{font-size:13px;color:#9FB0CC}

/* PRICE */
.price{position:relative;background:var(--deep);color:#fff;overflow:hidden;padding:150px 0}
.price-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;filter:saturate(.8)}
.price::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 600px at 85% 20%,rgba(255,107,26,.28),transparent 60%),linear-gradient(180deg,rgba(5,12,26,.55),rgba(5,12,26,.95))}
.price .wrap{position:relative;z-index:1}
.price .kicker i{color:#7F92B3}
.price-top{display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:end}
.count{font-size:clamp(140px,22vw,300px);font-weight:900;line-height:.78;letter-spacing:-.07em;background:linear-gradient(170deg,#fff 15%,var(--amber) 55%,var(--orange) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.price-top .unit{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:700;color:#fff;letter-spacing:-.02em;margin-top:18px}
.price-top h2{color:#fff;font-size:clamp(28px,3.2vw,42px);margin:18px 0 16px}
.price-top p{color:#A9B8D0;font-size:17.5px;max-width:520px}
.incl{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid rgba(255,255,255,.14)}
.incl > div{padding:28px 28px 28px 0;display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.14)}
.incl > div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}
.incl i{color:var(--orange);font-size:20px;margin-top:2px;width:24px;text-align:center}
.incl b{display:block;color:#fff;font-size:17px;font-weight:600}
.incl span{color:#93A4C0;font-size:14.5px}
.price-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:48px}
.price-cta small{color:#8597B6;font-size:14px;margin-left:8px}

/* PROGRAMS: interactive tabs */
.prog-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:stretch}
.tabs{display:flex;flex-direction:column}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:28px 0 28px 28px;border-left:2px solid var(--line);transition:border-color .3s}
.tab .v{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);transition:color .3s}
.tab h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;margin:6px 0 0;color:#B4BCCB;transition:color .3s}
.tab .tb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.tab .tb > div{overflow:hidden}
.tab p{font-size:16px;margin-top:12px;max-width:440px}
.tab ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tab li{font-size:13.5px;font-weight:600;color:var(--ink);background:var(--bg);padding:7px 12px;border-radius:999px}
.tab .link{margin-top:18px}
.tab.on{border-left-color:var(--orange)}
.tab.on .v{color:var(--orange)}.tab.on h3{color:var(--ink)}
.tab.on .tb{grid-template-rows:1fr}
.tab:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.stage{position:relative;border-radius:28px;overflow:hidden;min-height:560px;background:var(--bg)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.stage img.on{opacity:1;transform:scale(1)}
.stage .cap{position:absolute;left:24px;bottom:24px;z-index:1;background:rgba(255,255,255,.95);border-radius:16px;padding:14px 18px;font-size:14px;color:var(--ink);font-weight:600;display:flex;gap:10px;align-items:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.stage .cap i{color:var(--orange)}

/* TIỆN ÍCH */
.tools{background:var(--sand)}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.tool{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:28px;overflow:hidden;padding:40px;color:#fff;isolation:isolate}
.tool .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform 1.4s var(--ease)}
.tool::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,12,26,.96) 0%,rgba(5,12,26,.55) 55%,rgba(5,12,26,.15) 100%)}
.tool:hover .bg{transform:scale(1.06)}
.tool .tag{position:absolute;top:28px;left:28px;font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.tool .tag.gold{background:var(--orange);box-shadow:none}
.tool h3{color:#fff;font-size:clamp(26px,2.6vw,34px);font-weight:800;max-width:460px}
.tool p{color:#C4CFE0;margin:12px 0 26px;max-width:460px}
.tool .btn{align-self:flex-start}
.tools-note{margin-top:28px;display:flex;gap:12px;align-items:center;justify-content:center;font-size:15px;color:var(--text);text-align:center}
.tools-note i{color:var(--orange)}

/* PROCESS: timeline that fills on scroll */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding-top:56px}
.steps-line{position:absolute;top:21px;left:0;right:0;height:2px;background:var(--line)}
.steps-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--amber));transition:width 2.2s var(--ease)}
.steps.in .steps-line span{width:100%}
.step{position:relative}
.step .dot{position:absolute;top:-56px;left:0;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);font-size:15px;transition:all .5s var(--ease)}
.steps.in .step .dot{box-shadow:inset 0 0 0 2px var(--orange);color:var(--orange)}
.steps.in .step:first-child .dot{background:var(--orange);color:#fff}
.step h3{font-size:20px;font-weight:700;margin:22px 0 8px}
.step p{font-size:15px}
.step small{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--orange)}
.step-link{display:inline-block;margin-top:6px;padding:10px 0;line-height:1.5;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .2s var(--ease)}
.step-link span{display:inline-block;margin-left:2px;transition:transform .2s var(--ease)}
.step-link:hover{text-decoration-thickness:3px}
.step-link:hover span{transform:translateX(3px)}
.step-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.step-link span{transition:none}}

/* STORIES */
.stories{background:var(--ink);color:#fff;overflow:hidden}
.stories .kicker i{color:#7F92B3}
.stories .display{color:#fff;max-width:720px;margin-top:18px}
.st-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.st-count{font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.st-count b{font-size:72px;font-weight:800;letter-spacing:-.04em;color:var(--orange)}
.st-count span{font-size:20px;color:#7F92B3;margin-left:6px}
.st-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:30px;overflow:hidden;background:#0F1C33;box-shadow:0 50px 100px -50px rgba(0,0,0,.8);min-height:540px}
.st-photo{position:relative;overflow:hidden;min-height:540px}
.st-photo figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease)}
.st-photo figure.on{opacity:1}
.st-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 7s linear}
.st-photo figure.on img{transform:scale(1)}
.st-photo figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,28,51,0) 55%,rgba(15,28,51,.9) 100%),linear-gradient(0deg,rgba(5,12,26,.55),rgba(5,12,26,0) 40%)}
.st-photo figcaption{position:absolute;left:24px;bottom:24px;z-index:1;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:rgba(255,255,255,.95);color:var(--ink);padding:10px 16px;border-radius:999px;transform:translateY(12px);opacity:0;transition:transform .7s var(--ease) .3s,opacity .7s .3s}
.st-photo figcaption i{color:var(--orange)}
.st-photo figure.on figcaption{transform:none;opacity:1}
.st-card{position:relative;padding:56px 52px 96px;display:grid}
.st-slide{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.st-slide.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.st-prog{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:rgba(255,177,78,.12);padding:7px 14px;border-radius:999px}
.st-slide blockquote{margin:26px 0 30px;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.5;letter-spacing:-.015em;color:#fff;position:relative}
.st-slide blockquote::before{content:"“";position:absolute;left:-6px;top:-54px;font-size:110px;line-height:1;color:var(--orange);opacity:.9;font-weight:800}
.st-who{display:flex;align-items:center;gap:14px}
.st-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--amber));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;box-shadow:0 0 0 4px rgba(255,107,26,.2)}
.st-who b{display:block;font-size:17px}
.st-who span{color:#93A4C0;font-size:14px}
.st-wins{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.st-wins li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#E3EAF5;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:9px 14px;border-radius:12px}
.st-wins i{color:#3DD68C}
.st-arrows{position:absolute;right:52px;bottom:40px;display:flex;gap:10px}
.st-arrows button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;cursor:pointer;font-size:15px;transition:background .25s,border-color .25s}
.st-arrows button:hover{background:var(--orange);border-color:var(--orange)}
.st-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.st-pick{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:background .3s,border-color .3s}
.st-pick:hover{background:rgba(255,255,255,.08)}
.st-pick.on{background:rgba(255,255,255,.1);border-color:rgba(255,177,78,.45)}
.st-pick:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.st-pt{width:48px;height:48px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0;filter:grayscale(.7);opacity:.7;transition:filter .3s,opacity .3s}
.st-pick.on .st-pt{filter:none;opacity:1}
.st-pn{display:flex;flex-direction:column;min-width:0}
.st-pn b{font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-pn small{font-size:12.5px;color:#8FA1BF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.st-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--amber))}
.st-pick.on .st-bar span{width:100%}
.st-pick.run .st-bar span{width:0;animation:stbar 6.5s linear forwards}
.st-pick.paused .st-bar span{animation-play-state:paused}
@keyframes stbar{to{width:100%}}
@media (max-width:1180px){.st-main{grid-template-columns:1fr}.st-photo{min-height:380px}.st-photo figure::after{background:linear-gradient(0deg,rgba(15,28,51,.9),rgba(15,28,51,0) 50%)}.st-nav{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .st-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .st-count b{font-size:48px}
  .st-photo{min-height:300px}
  .st-card{padding:40px 22px 92px}
  .st-arrows{right:22px;bottom:26px}
  .st-nav{grid-template-columns:1fr 1fr;gap:10px}
  .st-pick{padding:10px;gap:10px}
  .st-pt{width:40px;height:40px}
  .st-pn small{display:none}
}
.gallery-wrap{overflow:hidden;margin-top:90px}
.gallery{display:flex;gap:18px;width:max-content;animation:marq 70s linear infinite}
.gallery:hover{animation-play-state:paused}
.gallery figure{width:320px;height:220px;border-radius:18px;overflow:hidden;flex-shrink:0;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:12px;bottom:12px;font-size:12.5px;font-weight:600;background:rgba(5,12,26,.7);backdrop-filter:blur(6px);padding:6px 10px;border-radius:10px}

/* KB editorial */
.kb-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}
.kb-main{position:relative;display:block;border-radius:28px;overflow:hidden;min-height:520px;color:#fff;isolation:isolate}
.kb-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.kb-main::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,12,26,.95) 5%,rgba(5,12,26,.2) 70%)}
.kb-main:hover img{transform:scale(1.05)}
.kb-main .in{position:absolute;left:36px;right:36px;bottom:36px}
.kb-main h3{color:#fff;font-size:clamp(24px,2.4vw,32px);font-weight:800;margin:12px 0}
.kb-main p{color:#C4CFE0}
.kb-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.kb-list a{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.kb-list a:first-child{padding-top:0}
.kb-list img{width:150px;height:110px;object-fit:cover;border-radius:16px;transition:transform .6s var(--ease)}
.kb-list a:hover img{transform:scale(1.04)}
.kb-list h3{font-size:19px;font-weight:700;line-height:1.35;transition:color .2s}
.kb-list a:hover h3{color:var(--orange)}
.kb-list .kb-tag{color:var(--orange);display:block;margin-bottom:6px}
.kb-more{margin-top:28px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:96px}
.faq-side{position:sticky;top:120px;align-self:start}
.faq-side .display{margin:18px 0 20px}
.help{margin-top:36px;display:flex;gap:16px;align-items:center;padding-top:28px;border-top:1px solid var(--line)}
.help .ic{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.help b{display:block;color:var(--ink);font-size:17px}
.help a{color:var(--orange);font-weight:700}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:19px;font-weight:600;line-height:1.45;transition:color .2s}
.qa summary:hover h3{color:var(--orange)}
.qa .pm{position:relative;flex-shrink:0;width:20px;height:20px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--ink);transition:transform .35s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa[open] .pm::after{transform:rotate(0)}
.qa .ans{padding:0 48px 28px 0;font-size:16.5px;line-height:1.8}
.qa .ans strong{color:var(--ink)}

/* CTA */
.cta{position:relative;padding:170px 0;color:#fff;overflow:hidden;background:var(--deep)}
.cta .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,12,26,.95) 0%,rgba(5,12,26,.6) 60%,rgba(5,12,26,.3) 100%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:#fff;font-size:clamp(38px,5.4vw,76px);font-weight:800;letter-spacing:-.045em;line-height:1.02;max-width:900px;margin:22px 0}
.cta p{font-size:19px;color:#B9C6DB;max-width:560px}
.cta .hero-btns{margin-top:40px}

/* footer */
.ftr{background:var(--deep);color:#8FA0BC;padding:90px 0 30px;font-size:14.5px}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px}
.ftr .logo{height:40px;margin-bottom:22px}
.ftr h4,.ftr .ftr-h,.ftr .ftr-name{color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.ftr a{display:block;padding:6px 0;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr p{line-height:1.75}
.ftr-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(255,255,255,.08);margin-top:64px;padding-top:26px;font-size:13px}

/* floating */
.fab{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.fab a,.fab button{width:56px;height:56px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:21px;cursor:pointer;box-shadow:0 16px 30px -12px rgba(5,12,26,.55);transition:transform .25s var(--ease)}
.fab a:hover,.fab button:hover{transform:scale(1.06)}
.fab .call{background:var(--orange)}.fab .zalo{background:#0068FF;font-size:13px;font-weight:800}
.mbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero .wrap{grid-template-columns:1fr;padding-top:130px}
  .form{max-width:640px}
  .nav,.hdr-cta{display:none}.burger{display:block}
  .why .wrap,.prog-wrap,.kb-grid,.faq-grid{grid-template-columns:1fr;gap:56px}
  .head{grid-template-columns:1fr;gap:20px}
  .faq-side{position:static}
  .price-top{grid-template-columns:1fr;gap:20px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:64px}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .wrap{padding:0 20px}
  .annc{font-size:12px}
  .hdr-in{height:68px}
  .logo,.logo img{height:32px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:110px;padding-bottom:56px;gap:40px}
  .hero h1{margin:20px 0 16px}
  .hero .sub{font-size:16.5px}
  .hero-btns .btn{flex:1 1 100%}
  /* mobile: 3 equal glass tiles so uneven label wrapping doesn't look ragged */
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:32px;padding-top:0;border-top:0;max-width:none}
  .hero-facts div,.hero-facts div+div{padding:14px 6px 13px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
  .hero-facts b{font-size:22px;white-space:nowrap}
  .hero-facts span{font-size:11.5px;line-height:1.35;color:#B4C2D9;text-wrap:balance}
  .hero-ko{font-size:200px;left:auto;right:-30px;bottom:auto;top:80px}
  .form{padding:22px 18px 18px;border-radius:22px}
  .fgrid{grid-template-columns:1fr}
  .sec{padding:96px 0}
  .head{margin-bottom:44px}
  .collage{height:440px}
  .collage .stat{left:0;bottom:24px;padding:16px 20px}
  .collage .stat b{font-size:32px}
  .price{padding:100px 0}
  .incl{grid-template-columns:1fr;margin-top:48px}
  .incl > div,.incl > div:not(:nth-child(3n+1)){padding:20px 0;border-left:0}
  .tab{padding:22px 0 22px 20px}
  .stage{min-height:340px}
  .tools-grid{grid-template-columns:1fr}
  .tool{min-height:380px;padding:28px}
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:64px;row-gap:36px}
  .steps-line{top:0;bottom:0;left:21px;right:auto;width:2px;height:auto}
  .steps-line span{width:100%;height:0;transition:height 2.2s var(--ease)}
  .steps.in .steps-line span{height:100%;width:100%}
  .step .dot{top:0;left:-64px}
  .step h3{margin-top:6px}
  .gallery figure{width:220px;height:160px}
  .gallery-wrap{margin-top:70px}
  .kb-main{min-height:420px}
  .kb-main .in{left:24px;right:24px;bottom:24px}
  .kb-list a{grid-template-columns:110px 1fr;gap:16px}
  .kb-list img{width:110px;height:84px}
  .qa .ans{padding-right:0}
  .cta{padding:110px 0}
  .ftr-top{grid-template-columns:1fr;gap:36px}
  .fab{display:none}
  .onko-ai-widget{bottom:92px !important;left:12px !important}
}
.mnav.open{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:68px;z-index:80;background:#fff;padding:12px 20px 24px;box-shadow:0 30px 50px -20px rgba(5,12,26,.4)}
.mnav a{padding:15px 4px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.mnav .btn{margin-top:16px}

/* ---------- Tiện ích du học (always visible) ---------- */
/* desktop: dock centred at the bottom, between the AI button (left) and call/Zalo (right) */
.qk{position:fixed;left:50%;bottom:22px;z-index:58;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-radius:20px;padding:8px 8px 8px 18px;box-shadow:0 26px 60px -22px rgba(5,12,26,.5),0 0 0 1px rgba(11,20,38,.06);transform:translate(-50%,140%);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.qk.show{transform:translate(-50%,0);opacity:1}
.qk.min{transform:translate(-50%,140%);opacity:0;pointer-events:none}
.qk-h{display:flex;align-items:center;gap:10px;padding-right:8px;margin-right:2px;border-right:1px solid var(--line)}
.qk-h span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.25;white-space:nowrap}
.qk-h span i{color:var(--orange);margin-right:4px}
.qk-min{order:-1;width:26px;height:26px;border-radius:50%;border:0;background:var(--bg);color:var(--muted);cursor:pointer;font-size:11px;flex-shrink:0}
.qk-min:hover{background:var(--line);color:var(--ink)}
.qk-i{display:grid;grid-template-columns:44px auto 16px;gap:10px;align-items:center;padding:6px 12px 6px 6px;border-radius:14px;transition:background .25s}
.qk-i:hover{background:var(--bg)}
.qk-th{width:44px;height:44px;border-radius:12px;background-size:cover;background-position:center}
.qk-t small{display:block;font-size:10.5px;font-weight:700;color:var(--orange);letter-spacing:.05em;text-transform:uppercase}
.qk-t b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink);white-space:nowrap}
.qk-i > i{color:var(--muted);font-size:12px;transition:transform .25s var(--ease),color .25s}
.qk-i:hover > i{color:var(--orange);transform:translateX(3px)}
.qk-i.gold{background:linear-gradient(120deg,#FFF4EA,#FFE6CF)}
.qk-i.gold:hover{background:linear-gradient(120deg,#FFEBD9,#FFDDC2)}
.qk-tab{position:fixed;left:50%;bottom:0;z-index:58;transform:translate(-50%,100%);display:flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:14px 14px 0 0;background:var(--ink);color:#fff;cursor:pointer;font-weight:700;font-size:13px;box-shadow:0 -10px 30px -16px rgba(5,12,26,.6);transition:transform .45s var(--ease)}
.qk-tab i{color:var(--amber)}
.qk-tab.on.show{transform:translate(-50%,0)}
@media (max-width:1500px){.qk-h{display:none}.qk{padding-left:8px}}
@media (max-width:760px){
  .qk{bottom:84px;left:12px;right:12px;padding:8px;border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:6px;transform:translateY(20px)}
  .qk.show{transform:none}
  .qk.min{transform:translateY(20px);opacity:0}
  .qk-t b{white-space:normal}
  .qk-h{display:none}
  .qk-i{grid-template-columns:40px 1fr;gap:8px;padding:6px;border-radius:12px}
  .qk-i + .qk-i{margin-top:0}
  .qk-th{width:40px;height:40px;border-radius:10px}
  .qk-t small{font-size:10px}
  .qk-t b{font-size:12.5px;line-height:1.3}
  .qk-i > i{display:none}
  .qk-tab{display:none}
  .onko-ai-widget{bottom:170px !important}
}

/* --- fixes: 180 clipping, hero badge, hotline colour --- */
/* gradient text is clipped to its box: give the last glyph room */
.count{display:inline-block;letter-spacing:-.05em;padding:.04em .12em .06em 0;line-height:.85}
.pill{padding:8px 18px;gap:12px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,177,78,.18);flex-shrink:0}
.hdr-phone{flex-direction:row;align-items:center;gap:12px}
.hdr-phone .ph-ic{width:40px;height:40px;border-radius:50%;background:rgba(255,107,26,.16);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:background .25s,color .25s}
.hdr-phone:hover .ph-ic{background:var(--orange);color:#fff}
.hdr-phone .ph-tx{display:flex;flex-direction:column;line-height:1.2}
.hdr-phone .ph-tx b{color:var(--amber);font-size:16px;font-weight:800;letter-spacing:.01em}
.hdr.solid .hdr-phone .ph-tx b{color:var(--orange)}
.hdr-cta{gap:18px;padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.hdr.solid .hdr-cta{border-left-color:var(--line)}

/* --- header: never wrap menu items --- */
.nav{gap:28px}
.nav a,.hdr-phone small,.hdr-phone b{white-space:nowrap}
@media (max-width:1360px){.nav{gap:22px}.nav a{font-size:14.5px}.hdr-cta{gap:14px;padding-left:16px}.hdr-phone small{display:none}}

/* --- WHY: bigger collage, light stat card --- */
.why .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px}
.collage{height:760px}
.collage .c1{width:78%;height:80%}
.collage .c2{width:56%;height:52%}
.collage .stat{left:-36px;bottom:90px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -25px rgba(11,20,38,.45);border:1px solid var(--line);display:flex;align-items:center;gap:16px;max-width:300px}
.collage .stat::before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;width:52px;height:52px;border-radius:16px;background:#FFF1E6;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.collage .stat b{color:var(--orange)}
.collage .stat span{color:var(--text);font-size:13.5px;line-height:1.45;display:block;margin-top:4px}

/* --- PRICE: content clearly readable above the photo --- */
.price-bg{opacity:.14}
.price::before{background:radial-gradient(900px 520px at 85% 15%,rgba(255,107,26,.22),transparent 60%),linear-gradient(180deg,rgba(5,12,26,.82),rgba(5,12,26,.97))}
.price-top h2{color:#fff}
.price-top p{color:#D2DBEA}
.price-top .unit{color:var(--amber)}
.incl{gap:16px;border-top:0;margin-top:72px}
.incl > div,.incl > div:not(:nth-child(3n+1)){padding:24px;border:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.incl > div:hover{background:rgba(255,255,255,.1);border-color:rgba(255,177,78,.5);transform:translateY(-3px)}
.incl i{width:46px;height:46px;border-radius:14px;background:rgba(255,107,26,.16);display:flex;align-items:center;justify-content:center;font-size:19px;margin-top:0;flex-shrink:0}
.incl b{font-size:17.5px}
.incl span{color:#C2CEE1;font-size:14.5px}
.price-cta small{color:#B5C3D9}
@media (max-width:760px){
  .collage{height:520px}
  .collage .stat{left:0;bottom:30px;max-width:260px}
  .incl{gap:12px}
  .incl > div,.incl > div:not(:nth-child(3n+1)){padding:18px}
}
.qk-tab:not(.on){visibility:hidden}
.st-slide blockquote{margin-top:56px}
.st-slide blockquote::before{top:-62px;left:-4px;font-size:96px}


/* =====================================================================
   ROUND 5 – fluid sizing, fixed header, mobile bars, FAQ, lighter shadows
   ===================================================================== */
html,body{overflow-x:clip}
:root{--pad:clamp(16px,4.2vw,24px);--sec:clamp(72px,9vw + 30px,140px);--fs:clamp(15px,.25vw + 14px,16px)}
body{font-size:var(--fs)}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:var(--sec) 0}
.price{padding:calc(var(--sec) + 10px) 0}
.cta{padding:clamp(96px,10vw + 50px,170px) 0}
.display{font-size:clamp(30px,3.4vw + 16px,60px)}
.lead{font-size:clamp(16px,.4vw + 14.5px,18px)}
.hero h1{font-size:clamp(36px,4.6vw + 16px,74px)}
.hero .sub{font-size:clamp(16px,.5vw + 14px,19px)}
.head{margin-bottom:clamp(40px,5vw,72px);gap:clamp(16px,4vw,64px)}
.why .wrap{gap:clamp(40px,6vw,72px)}

/* lighter shadows (less visual noise) */
.btn-o{box-shadow:0 8px 20px -12px rgba(255,107,26,.55)}
.btn-o:hover{box-shadow:0 12px 24px -12px rgba(255,107,26,.6)}
.form{box-shadow:0 30px 60px -36px rgba(0,0,0,.55)}
.collage .c1,.collage .c2{box-shadow:0 24px 50px -34px rgba(11,20,38,.45)}
.collage .stat{box-shadow:0 18px 40px -26px rgba(11,20,38,.35)}
.st-main{box-shadow:none}
.kbc:hover{box-shadow:0 18px 40px -30px rgba(11,20,38,.35)}

/* ---------- header: fixed from first paint, announcement slides away ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;transform:translate3d(0,0,0)}
.hdr .annc{position:relative}
.hdr.solid{position:fixed;transform:translate3d(0,calc(-1 * var(--annc-h,36px)),0);background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(11,20,38,.06)}
.ready .hdr{transition:transform .35s var(--ease),background .3s,box-shadow .3s}
.hdr-in,.hdr.solid .hdr-in{height:clamp(64px,5vw + 44px,80px)}
.hero .wrap{padding-top:clamp(124px,8vw + 90px,170px)}
.mnav.open{left:0;right:0;z-index:59}

/* ---------- hero: brighter photo ---------- */
.hero-bg{background-position:center 40%}
.hero::before{background:
  linear-gradient(95deg,rgba(5,12,26,.9) 0%,rgba(5,12,26,.74) 34%,rgba(5,12,26,.28) 62%,rgba(5,12,26,.08) 100%),
  linear-gradient(0deg,rgba(5,12,26,.75) 0%,rgba(5,12,26,0) 28%),
  linear-gradient(180deg,rgba(5,12,26,.55) 0%,rgba(5,12,26,0) 22%)}
.hero-glow{opacity:.6}
.hero-ko{-webkit-text-stroke-color:rgba(255,255,255,.12)}
@media (max-width:1180px){.hero::before{background:linear-gradient(180deg,rgba(5,12,26,.82) 0%,rgba(5,12,26,.7) 45%,rgba(5,12,26,.92) 100%)}}

/* ---------- desktop call / Zalo: vibrant brand colors + pulse + label ---------- */
.fab{gap:14px}
.fab a{
  position:relative;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  text-decoration:none;
  transition:transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s;
}
.fab a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:-1;
  animation:fabPulse 2.4s ease-out infinite;
}
.fab .call{
  background:linear-gradient(135deg, #FF8A3D 0%, #EA580C 100%);
  color:#ffffff;
  font-size:22px;
  border:none;
  box-shadow:0 10px 24px -4px rgba(234, 88, 12, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.fab .call::before{background:rgba(234, 88, 12, 0.4)}
.fab .call i{animation:ring 2.4s ease-in-out infinite}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%,75%,85%{transform:rotate(-14deg)}70%,80%{transform:rotate(14deg)}}

.fab .zalo{
  background:#ffffff;
  border-radius:50%;
  border:2px solid rgba(0, 104, 255, 0.16);
  box-shadow:0 10px 24px -4px rgba(0, 104, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.fab .zalo::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:-1;
  background:rgba(0, 104, 255, 0.35);
  animation:fabPulse 2.4s ease-out infinite;
  animation-delay:1.2s;
}
.fab .zalo img{
  width:36px;
  height:36px;
  display:block;
  transition:transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.fab .zalo:hover img{transform:scale(1.08)}
@keyframes fabPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

.fab .tip{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translate(10px,-50%);
  white-space:nowrap;
  background:rgba(15,23,42,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#FFFFFF;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.2px;
  text-transform:none;
  padding:8px 16px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 12px 28px -4px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.06);
  opacity:0;
  pointer-events:none;
  transition:all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.fab .tip i{
  font-size:12px;
}
.fab .call .tip i{
  color:#FFB14E;
}
.fab .zalo .tip i{
  color:#60A5FA;
}
.fab .tip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:rgba(15,23,42,0.92);
}
.fab a:hover .tip{
  opacity:1;
  transform:translate(0,-50%);
}
.fab a:hover{
  transform:translateY(-3px) scale(1.05);
}
@media (prefers-reduced-motion:reduce){.fab a::before,.fab .call i{animation:none}}

/* ---------- FAQ ---------- */
.faq{background:var(--bg)}
.faq-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,80px)}
.faq-side{top:110px}
.faq-card{margin-top:34px;background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.faq-img{height:200px;background-size:cover;background-position:center;position:relative}
.faq-img span{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px}
.faq-img span i{color:#15A35A}
.faq-cta{padding:24px}
.faq-cta b{display:block;font-size:19px;color:var(--ink);margin-bottom:6px}
.faq-cta p{font-size:15px;margin-bottom:18px}
.faq-btns{display:flex;flex-wrap:wrap;gap:10px}
.faq-btns .btn{height:48px;padding:0 20px;font-size:15px;flex:1 1 auto}
.btn-zalo{background:#0068FF;color:#fff}
.btn-zalo:hover{background:#0057D6}
.faq-list{display:flex;flex-direction:column;gap:12px}
.qa,.qa:last-child{background:#fff;border:1px solid var(--line);border-radius:20px;transition:border-color .3s,box-shadow .3s}
.qa:hover{border-color:#D5DBE5}
.qa[open]{border-color:rgba(255,107,26,.4);box-shadow:0 20px 44px -34px rgba(11,20,38,.4)}
.qa summary{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 24px}
.qa .qn{font-size:14px;font-weight:800;color:#B5BDCB;font-variant-numeric:tabular-nums;transition:color .3s}
.qa[open] .qn{color:var(--orange)}
.qa summary h3{font-size:clamp(16px,.3vw + 15px,18px)}
.qa .pm{width:36px;height:36px;border-radius:50%;background:var(--bg);transition:background .3s,transform .35s var(--ease)}
.qa .pm::before,.qa .pm::after{left:11px;right:11px;top:17px;background:var(--ink)}
.qa[open] .pm{background:var(--orange);transform:rotate(180deg)}
.qa[open] .pm::before,.qa[open] .pm::after{background:#fff}
.qa .ans{padding:0 24px 24px 58px;font-size:16px;line-height:1.8;animation:ansIn .45s var(--ease)}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:1180px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}
@media (max-width:760px){
  .hdr .annc{font-size:11.5px;padding:7px 12px}
  .collage{height:clamp(380px,110vw,520px)}
  .collage .stat{left:12px;right:12px;bottom:20px;max-width:none}
  .collage .c1{width:84%;height:72%}
  .collage .c2{width:60%;height:46%}
  .qa summary{padding:18px 18px;gap:12px}
  .qa .ans{padding:0 18px 20px 18px;font-size:15.5px}
  .faq-img{height:170px}

  /* bottom contact bar: iPhone Frosted Dark Gray Glassmorphism dock */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .mbar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    height:68px;
    padding:0 6px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    background:rgba(28, 31, 38, 0.82);
    backdrop-filter:blur(30px) saturate(190%);
    -webkit-backdrop-filter:blur(30px) saturate(190%);
    border:1px solid rgba(255, 255, 255, 0.16);
    border-radius:28px;
    box-shadow:0 18px 40px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.14);
    box-sizing:border-box;
    z-index:75;
  }
  .mbar-tab{
    position:relative;
    height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    padding:0 0 5px;
    border:0;
    border-radius:20px;
    background:transparent;
    font-family:var(--font);
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s var(--ease),background .2s;
  }
  .mbar-tab:active{transform:scale(.92);background:rgba(255,255,255,.08)}
  .mbar-tab:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
  .mbar-tab .mb-ic{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  .mbar-tab .mb-ic svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35))}
  .mbar-tab .mb-lb{
    font-size:11.5px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    letter-spacing:-0.2px;
    color:rgba(255, 255, 255, 0.88);
    transition:color .2s;
  }

  /* Hotline animation */
  .mbar-tab.c .mb-ic{animation:mbRing 3s ease-in-out infinite}
  @keyframes mbRing{0%,70%,100%{transform:none}74%,82%{transform:rotate(-12deg)}78%,86%{transform:rotate(12deg)}}

  /* AI – Apple Intelligence style raised center action */
  .mbar-tab.ai .ai-circle{
    position:absolute;
    top:-22px;
    left:50%;
    width:54px;
    height:54px;
    margin-left:-27px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #FF7828 0%, #EA580C 50%, #E11D48 100%);
    color:#fff;
    font-size:20px;
    border:0;
    box-shadow:0 8px 24px -2px rgba(234, 88, 12, 0.5), inset 0 1px 1px rgba(255,255,255,0.4);
  }
  .mbar-tab.ai .ai-circle::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(234, 88, 12, 0.45);
    animation:mbPulse 2.4s ease-out infinite;
    pointer-events:none;
  }
  @keyframes mbPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.3);opacity:0}}
  .mbar-tab.ai .ai-circle i{
    color:#FFF9C4;
    filter:drop-shadow(0 0 3px rgba(255,249,196,0.8));
  }
  .mbar-tab.ai .mb-lb{color:#FF8A3D;font-weight:700}

  /* Tiện ích active state */
  .mbar-tab.qk-btn.on{background:rgba(255, 159, 10, 0.2)}
  .mbar-tab.qk-btn.on .mb-lb{color:#FFB340;font-weight:700}

  @media (prefers-reduced-motion:reduce){
    .mbar-tab.c .mb-ic,.mbar-tab.ai .ai-circle::after{animation:none}
  }

  /* Hide old floating quick tab */
  .qk-tab{
    display:none !important;
  }

  /* Tiện ích bottom sheet popup */
  .qk{
    position:fixed;
    bottom:calc(86px + env(safe-area-inset-bottom));
    left:12px;
    right:12px;
    padding:14px;
    border-radius:22px;
    display:none;
    grid-template-columns:1fr;
    gap:10px;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:0 16px 48px -8px rgba(11,20,38,.35),0 0 0 1px rgba(11,20,38,.08);
    z-index:80;
    animation:qkSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qk.open{
    display:grid;
  }
  @keyframes qkSlideUp{
    from{transform:translateY(24px) scale(0.96);opacity:0}
    to{transform:none;opacity:1}
  }
  .qk-h{display:flex;grid-column:1/-1;border:0;padding:0 4px 4px;margin:0;justify-content:space-between;align-items:center}
  .qk-h span{font-size:12.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
  .qk-h span i{color:var(--orange)}
  .qk-min{order:0;width:28px;height:28px;border-radius:50%;background:#F1F5F9;border:0;display:flex;align-items:center;justify-content:center;color:#64748B;cursor:pointer;font-size:13px}
  .qk-i{grid-template-columns:40px 1fr 20px;gap:10px;padding:8px 10px;border-radius:14px;background:#F8FAFC;border:1px solid rgba(0,0,0,0.04);display:grid;align-items:center}
  .qk-i.gold{background:linear-gradient(120deg,#FFF7ED,#FFEDD5);border-color:rgba(234,88,12,0.15)}
  .qk-th{width:40px;height:40px;border-radius:10px}
  .qk-t small{font-size:10px;color:#64748B;font-weight:600}
  .qk-t b{font-size:13px;white-space:normal;line-height:1.3;color:var(--ink)}
  .qk-i i{color:var(--muted);font-size:13px}
  .qk-i.gold i{color:var(--orange)}

  /* Hide standalone floating AI button on mobile to let mbar's integrated AI shine */
  .onko-ai-trigger{
    display:none !important;
  }
}
@media (max-width:380px){
  .mbar{left:6px;right:6px;padding:0 2px}
  .mbar-tab .mb-ic,.mbar-tab .mb-ic svg{width:32px;height:32px}
  .mbar-tab .mb-lb{font-size:10.5px}
  .mbar-tab.ai .ai-circle{width:48px;height:48px;margin-left:-24px;font-size:17px}
}


/* =====================================================================
   ROUND 6 – stat card, motion, 10 stories
   ===================================================================== */
/* 98.6% card: compact, one line */
.collage .stat{display:inline-flex;align-items:center;gap:14px;max-width:none;width:auto;padding:16px 22px 16px 16px;border-radius:18px}
.collage .stat::before{content:none}
.collage .st-ic{width:48px;height:48px;border-radius:14px;background:#FFF1E6;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.collage .stat b{font-size:34px;line-height:1;white-space:nowrap}
.collage .stat span:not(.st-ic){display:block;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
@media (max-width:760px){.collage .stat{left:12px;right:auto;bottom:16px;padding:12px 18px 12px 12px}.collage .stat b{font-size:28px}.collage .st-ic{width:42px;height:42px;font-size:18px}}

/* words of headings rise one by one; replays with the reveal */
.js .split .w{display:inline-block;transform:translateY(.6em);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.js .split.in .w,.js .in .split .w{transform:none;opacity:1}
.js h2.split.rv{opacity:1;transform:none;filter:none}
/* reveal a bit more expressive */
.js .rv{transform:translateY(40px) scale(.985);filter:blur(4px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js .rv.in{filter:none}
.js .why-item.rv{transform:translateX(-30px)}
.js .why-item.rv.in{transform:none}
.js .incl > div.rv{transform:translateY(40px) scale(.96)}
.js .incl > div.rv.in{transform:none}
.collage img,.price-bg,.cta .bg{will-change:transform}
.price-bg,.cta .bg{inset:-10% 0}
.tool,.kb-main,.incl > div{transition:transform .35s var(--ease),background .3s,border-color .3s}
@media (prefers-reduced-motion:reduce){.js .split .w{transform:none;opacity:1}}

/* stories: 10 students — compact picker */
.st-nav{grid-template-columns:repeat(5,1fr);gap:12px}
.st-pick{padding:10px 12px;gap:12px}
.st-pt{position:relative;width:44px;height:44px;border-radius:50%;filter:none;opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.st-pt i{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0B1426}
.st-pick.on .st-pt{box-shadow:0 0 0 2px var(--orange)}
.st-pn b{font-size:14px}
.st-pn small{font-size:12px}
@media (max-width:1180px){.st-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .st-nav{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}
  .st-nav::-webkit-scrollbar{display:none}
  .st-pick{flex:0 0 auto;scroll-snap-align:start;width:auto;padding:8px 14px 8px 8px}
  .st-pn small{display:none}
  .st-pt{width:38px;height:38px}
}
/* desktop two-column rules above must not leak into tablet / mobile */
@media (max-width:1180px){.why .wrap,.faq-grid,.prog-wrap,.kb-grid{grid-template-columns:minmax(0,1fr)}}
/* stat icon: beat the older ".collage .stat span" rule */
.collage .stat .st-ic{display:flex;width:48px;height:48px;margin:0;border-radius:14px;background:#FFF1E6;color:var(--orange);font-size:21px;align-items:center;justify-content:center}
.collage .stat .st-ic i{font-size:21px;line-height:1}
@media (max-width:760px){.collage .stat .st-ic{width:42px;height:42px;font-size:18px}.collage .stat .st-ic i{font-size:18px}}

/* stories: fit one screen */
.stories.sec{padding:clamp(64px,6vw + 20px,100px) 0}
.st-head{margin-bottom:clamp(20px,2.5vw,32px)}
.stories .display{font-size:clamp(26px,2.2vw + 14px,44px);margin-top:12px}
.st-count b{font-size:clamp(36px,3vw + 10px,52px)}
.st-count span{font-size:16px}
.st-main{min-height:0;border-radius:24px}
.st-photo{min-height:clamp(260px,26vw,400px)}
.st-card{padding:clamp(28px,3vw,40px) clamp(22px,3vw,40px) 84px}
.st-prog{font-size:11.5px;padding:6px 12px}
.st-slide blockquote{margin:38px 0 20px;font-size:clamp(16px,.6vw + 13px,20px);line-height:1.55}
.st-slide blockquote::before{top:-48px;font-size:76px}
.st-av{width:44px;height:44px;font-size:17px}
.st-who b{font-size:15.5px}
.st-who span{font-size:13px}
.st-wins{margin-top:16px;gap:8px}
.st-wins li{font-size:13px;padding:7px 11px}
.st-arrows{bottom:24px;right:clamp(22px,3vw,40px)}
.st-arrows button{width:44px;height:44px;font-size:14px}
.st-nav{margin-top:14px;gap:10px}
.st-pick{padding:8px 10px;gap:10px;border-radius:14px}
.st-pt{width:36px;height:36px}
.st-pt i{width:17px;height:17px;font-size:9.5px}
.st-pn b{font-size:13px}
.st-pn small{font-size:11.5px}
.gallery-wrap{margin-top:clamp(48px,5vw,72px)}
.gallery figure{width:clamp(200px,18vw,280px);height:clamp(140px,12vw,190px)}
@media (max-width:760px){.st-photo{min-height:220px}.st-card{padding:26px 20px 76px}.st-slide blockquote{margin-top:34px}}

/* mobile Tiện ích strip: compact cards, AI button parked above it */
@media (max-width:760px){
  .qk{padding:8px;gap:6px}
  .qk-h{padding:0 2px 0 4px}
  .qk-i{grid-template-columns:34px minmax(0,1fr);gap:8px;padding:6px 8px 6px 6px;align-items:center}
  .qk-th{width:34px;height:34px;border-radius:9px}
  .qk-t{min-width:0}
  .qk-t small{font-size:9px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qk-t b{font-size:12px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .onko-ai-widget{bottom:calc(84px + var(--qk-h,0px) + env(safe-area-inset-bottom)) !important;transition:bottom .45s var(--ease)}
}
@media (max-width:400px){
  .qk-i{grid-template-columns:minmax(0,1fr);padding:8px 10px}
  .qk-th{display:none}
}

/* stories: whole block (title + card + pickers) inside one laptop screen */
@media (min-width:1001px){
  .stories.sec{padding:clamp(48px,4vw,72px) 0}
  .st-head{margin-bottom:18px;align-items:flex-end}
  .stories .display{font-size:clamp(26px,1.6vw + 12px,38px);margin-top:8px}
  .st-count b{font-size:clamp(34px,2vw + 12px,46px)}
  .st-photo{min-height:clamp(240px,22vw,340px)}
  .st-card{padding:26px 34px 72px}
  .st-slide blockquote{margin:30px 0 16px;font-size:clamp(15.5px,.4vw + 12px,18px);line-height:1.55}
  .st-slide blockquote::before{top:-40px;font-size:62px}
  .st-wins{margin-top:12px}
  .st-arrows{bottom:18px}
  .st-arrows button{width:40px;height:40px}
  .st-nav{margin-top:12px}
  .st-pick{padding:6px 10px}
  .st-pt{width:32px;height:32px}
}
@media (min-width:1001px) and (max-height:820px){
  .stories .display br{display:none}
  .st-photo{min-height:230px}
  .st-slide blockquote{font-size:15.5px;margin-top:26px}
}
@media (min-width:1001px){
  .st-nav{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
  .st-nav::-webkit-scrollbar{display:none}
  .st-pick{flex:0 0 calc((100% - 40px) / 5);scroll-snap-align:start}
}

/* =====================================================================
   Icons: only the Font Awesome Free 6.4 glyphs this page uses (CC BY 4.0),
   drawn as CSS masks so the page doesn't load the 250 KB icon font
   ===================================================================== */
.fa-solid,.fa-regular{display:inline-block;font-style:normal;line-height:1}
.fa-solid::before,.fa-regular::before{content:"";display:inline-block;width:var(--faw,1em);height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:var(--fa) center/contain no-repeat;mask:var(--fa) center/contain no-repeat}
.fa-arrow-left{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-arrow-right{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-arrow-up-right-from-square{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-bars{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-bed{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M32 32c17.7 0 32 14.3 32 32V320H288V160c0-17.7 14.3-32 32-32H544c53 0 96 43 96 96V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V416H352 320 64v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-bolt{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.5L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.5L349.4 44.6z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-building-columns{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-chevron-down{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-circle{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-circle-check{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-comment-dots{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-file-signature{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V428.7c-2.7 1.1-5.4 2-8.2 2.7l-60.1 15c-3 .7-6 1.2-9 1.4c-.9 .1-1.8 .2-2.7 .2H240c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L144 381l-9.8 32.8c-6.1 20.3-24.8 34.2-46 34.2H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.8 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8h8.9c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7L384 203.6V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM549.8 139.7c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM311.9 321c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L512.1 262.7l-71-71L311.9 321z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-gift{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-headset{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.1 48 48 141.1 48 256v40c0 13.3-10.7 24-24 24s-24-10.7-24-24V256C0 114.6 114.6 0 256 0S512 114.6 512 256V400.1c0 48.6-39.4 88-88.1 88L313.6 488c-8.3 14.3-23.8 24-41.6 24H240c-26.5 0-48-21.5-48-48s21.5-48 48-48h32c17.8 0 33.3 9.7 41.6 24l110.4 .1c22.1 0 40-17.9 40-40V256c0-114.9-93.1-208-208-208zM144 208h16c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H144c-35.3 0-64-28.7-64-64V272c0-35.3 28.7-64 64-64zm224 0c35.3 0 64 28.7 64 64v48c0 35.3-28.7 64-64 64H352c-17.7 0-32-14.3-32-32V240c0-17.7 14.3-32 32-32h16z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-heart{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-language{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-location-dot{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");--faw:0.75em}
.fa-paper-plane{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-phone{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-phone-volume{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-plane-arrival{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M.3 166.9L0 68C0 57.7 9.5 50.1 19.5 52.3l35.6 7.9c10.6 2.3 19.2 9.9 23 20L96 128l127.3 37.6L181.8 20.4C178.9 10.2 186.6 0 197.2 0h40.1c11.6 0 22.2 6.2 27.9 16.3l109 193.8 107.2 31.7c15.9 4.7 30.8 12.5 43.7 22.8l34.4 27.6c24 19.2 18.1 57.3-10.7 68.2c-41.2 15.6-86.2 18.1-128.8 7L121.7 289.8c-11.1-2.9-21.2-8.7-29.3-16.9L9.5 189.4c-5.9-6-9.3-14-9.3-22.5zM32 448H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm96-80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128-16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-rotate-right{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-shield-halved{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-user-check{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-wand-magic-sparkles{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-xmark{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");--faw:0.75em}
.fa-play{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");--faw:0.75em}
.fa-clock{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");--faw:1.0em}
.fa-regular.fa-lightbulb{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z'/%3E%3C/svg%3E");--faw:0.75em}

/* hero photo is an <img> (srcset, high priority) instead of a CSS background */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}

/* video + visa interview */
.vid{padding-top:0}
.vid-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:24px;overflow:hidden;background:#0B1426;cursor:pointer;color:#fff}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.yt:hover img{transform:scale(1.03)}
button.yt::after{content:"";position:absolute;inset:0;background:rgba(5,12,26,.12)}
.yt-play{position:absolute;z-index:1;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 0 0 10px rgba(255,107,26,.25);transition:transform .25s var(--ease)}
.yt-play i::before{margin-left:4px}
.yt:hover .yt-play{transform:scale(1.08)}
.yt:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-side h2{margin:16px 0 14px;font-size:clamp(30px,2.6vw,42px)}
.vid-side p{margin-bottom:24px}
.vid-link{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;transition:border-color .25s,transform .25s var(--ease)}
.vid-link:hover{border-color:var(--orange);transform:translateY(-2px)}
.vid-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.vid-link .ic{width:46px;height:46px;border-radius:14px;background:#FFF1E6;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.vid-link b{display:block;color:var(--ink);font-size:16.5px;line-height:1.3}
.vid-link small{color:var(--muted);font-size:13.5px}
.vid-link > i{margin-left:auto;color:var(--orange)}
@media (max-width:1000px){.vid-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:760px){.yt{border-radius:18px}.yt-play{width:64px;height:64px;margin:-32px 0 0 -32px;font-size:22px}}

/* hero: visible from the first paint (it is the LCP), only a short rise, no JS needed */
.hin{animation:hin .6s cubic-bezier(.22,1,.36,1) both}
.hin.d1{animation-delay:.05s}.hin.d2{animation-delay:.1s}.hin.d3{animation-delay:.15s}.hin.d4{animation-delay:.2s}
@keyframes hin{from{transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.hin{animation:none}}

/* ---- rendering cost (PageSpeed: 2 s of style & layout on a mid phone) ---- */
/* sections below the hero are laid out only when they come near the screen */
main > section:not(.hero),.ftr{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* reveal = opacity + transform only (blur filters on dozens of elements were the costliest paint) */
.js .rv{filter:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* first screen on phones: no backdrop blur behind the hero chips */
@media (max-width:760px){.pill,.hero-facts div,.hero-facts div+div{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.08)}}

/* =====================================================================
   Lead form v2: 5 fields, chip choice, inline errors, phone-first
   ===================================================================== */
.f .opt{font-weight:500;color:var(--muted)}
.ferr{display:block;min-height:0;font-size:12.5px;line-height:1.35;color:#D93025;margin-top:4px}
.ferr:empty{display:none}
.f input.bad,.f select.bad{background:#FFF4F2;box-shadow:0 0 0 1.5px #E5484D}
.chips{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips legend{grid-column:1/-1;float:left;width:100%;padding:0;font-size:12.5px;font-weight:600;color:#2A3448;margin-bottom:5px}
.chips legend i{font-style:normal;color:var(--orange)}
.chips .ferr{grid-column:1/-1;margin-top:0}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:6px 8px;border-radius:12px;background:#F2F4F8;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink);transition:background .15s,box-shadow .15s,color .15s}
.chip:hover span{background:#E9EDF4}
.chip input:checked+span{background:#FFF1E6;color:#C2410C;box-shadow:0 0 0 2px var(--orange)}
.chip input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.chips.bad .chip span{box-shadow:0 0 0 1.5px #E5484D}
.form .btn.sending{opacity:.85;cursor:progress}
.form .btn.sending .ar{animation:spin .8s linear infinite}
.form .btn.sending .ar::before{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 64a192 192 0 1 0 192 192h-48a144 144 0 1 1-144-144V64z'/%3E%3C/svg%3E");--faw:1em}
@keyframes spin{to{transform:rotate(360deg)}}
.form-err{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#FFF4F2;color:#B42318;font-size:13.5px;line-height:1.45}
.form-err a{color:inherit;font-weight:700;text-decoration:underline}
.form-alt{margin-top:14px;text-align:center}
.form-alt > span{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.form-alt > span::before,.form-alt > span::after{content:"";flex:1;height:1px;background:var(--line)}
.form-alt > div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.form-alt a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;font-size:14px;font-weight:700;transition:background .2s,transform .2s var(--ease)}
.form-alt a:active{transform:scale(.98)}
.alt-zalo{background:#E8F1FF;color:#0060F0}
.alt-zalo:hover{background:#D6E6FF}
.alt-call{background:#EAF8EF;color:#15803D}
.alt-call:hover{background:#D7F2E1}
.form-alt a:focus-visible,.done .btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.done .btn{width:auto;margin-top:18px;height:50px;font-size:15px}
.done:focus{outline:0}

/* one-column hero (tablets, phones): form right under the headline; inputs >= 16px so iOS doesn't zoom */
@media (max-width:1180px){
  .f input,.f select{font-size:16px;height:50px}
  .hero .wrap{gap:0}
  .hero .wrap > div:first-child{display:contents}
  .hero .pill{order:1;justify-self:start}
  .hero h1{order:2}
  .hero .sub{order:3}
  .hero .form{order:4;margin-top:26px}
  .hero .hero-facts{order:5}
  .hero .hero-btns{order:6;margin-top:16px}
  .hero .hero-btns .btn-o{display:none}
}
@media (max-width:760px){
  .chips{grid-template-columns:1fr 1fr}
  .chip span{min-height:48px;font-size:14px}
  .form .btn{height:54px}
  .form-h{margin-bottom:12px}
  .form h3,.form .form-t{font-size:20px}
}
@media (max-width:380px){.form-alt > div{grid-template-columns:1fr}}

/* contrast (WCAG AA) */
.tab .v{color:#5B6578}
.tab.on .v{color:#C2410C}
.tab h3{color:#6B7588}
.tab.on h3{color:var(--ink)}
.ftr-bot{color:#A9B6CC}
/* footer: tiny, keep it out of content-visibility so its dark background is always computed */
.ftr{content-visibility:visible}

/* TOPIK & visa-interview software card */
.tool .tool-list{list-style:none;padding:0;margin:-12px 0 26px;max-width:500px;display:grid;gap:10px}
.tool .tool-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:#D3DCEA}
.tool .tool-list li b{color:#fff;font-weight:700}
.tool .tool-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:760px){.tool .tool-list li{font-size:14.5px}}
/* the tag sits on top of the card: keep the text below it when the card has more content */
.tool{padding-top:88px}
@media (max-width:760px){.tool{padding-top:76px}}

/* story photo: lighter shade, only a narrow fade into the quote panel */
.st-photo figure::after{background:linear-gradient(90deg,rgba(15,28,51,0) 72%,rgba(15,28,51,.5) 100%),linear-gradient(0deg,rgba(5,12,26,.35),rgba(5,12,26,0) 35%)}
@media (max-width:1180px){.st-photo figure::after{background:linear-gradient(0deg,rgba(15,28,51,.55),rgba(15,28,51,0) 45%)}}
.tool-btns{display:flex;gap:12px;max-width:460px}
.tool-btns .btn{flex:1 1 0;min-width:0;padding:0 18px}
.tool-btns .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){.tool-btns{gap:8px}.tool-btns .btn{height:50px;padding:0 10px;font-size:15px;gap:8px}}
/* the software card is text-heavy: keep its whole height dark enough for white text */
.tool:has(.tool-list)::before{background:linear-gradient(0deg,rgba(5,12,26,.96) 0%,rgba(5,12,26,.82) 60%,rgba(5,12,26,.62) 100%)}
/* both perk cards: title + 3 short points + buttons, same rhythm */
.tool .tool-list{margin:16px 0 28px;gap:12px}
.tool .tool-list li{font-size:16px}
@media (max-width:760px){.tool .tool-list li{font-size:15px}}
@media (max-width:420px){.tool-btns .btn{font-size:14.5px;padding:0 8px}.tool-btns .btn .ar{display:none}}