@font-face{font-family:Be Vietnam;src:url('/assets/regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Be Vietnam;src:url('/assets/bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Be Vietnam;src:url('/assets/extrabold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--blue:#2443db;--blue-deep:#1a31b8;--blue-soft:#eef1ff;--yellow:#f5bb00;--yellow-soft:#fff4cc;--red:#cf4330;--teal:#0d7a6c;--ink:#16171d;--muted:#5d6072;--paper:#f6f4ef;--card:#fff;--line:#e6e3da;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.7 'Be Vietnam',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}html{overflow-x:clip}a{color:inherit;text-underline-offset:4px}img{display:block;max-width:100%;height:auto}p{color:var(--muted)}
.wrap{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
.skip{position:absolute;left:12px;top:-100px;background:#fff;color:var(--ink);padding:10px 14px;border-radius:8px;z-index:10}.skip:focus{top:12px}:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:6px}

/* Nav (shared with legal pages) */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;text-decoration:none;white-space:nowrap;letter-spacing:-.3px}.brand img{border-radius:12px}.nav nav{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:700}.nav nav a{text-decoration:none;opacity:.85}.nav nav a:hover{opacity:1}.nav-cta{background:#fff;color:var(--ink);border:1px solid var(--line);padding:10px 20px;border-radius:100px;opacity:1!important}.on-blue{color:#fff}.on-blue .nav-cta{border-color:transparent;color:var(--blue)}.on-blue .nav-cta:hover{background:var(--yellow);color:var(--ink)}.on-blue .brand img{box-shadow:0 0 0 2px #ffffff40}

/* Shared type */
.eyebrow{display:block;font-size:13px;letter-spacing:1.6px;font-weight:800;color:var(--blue);text-transform:uppercase}h1,h2,h3{color:var(--ink);text-wrap:balance}h2{font-size:clamp(30px,3.6vw,46px);line-height:1.18;letter-spacing:-1.4px;font-weight:800;margin:14px 0 18px}h3{font-size:21px;line-height:1.3;margin:22px 0 8px;letter-spacing:-.3px}

/* Hero */
.hero-band{position:relative;background:var(--blue);color:#fff;background-image:radial-gradient(#ffffff1a 1.2px,transparent 1.2px),radial-gradient(1200px 600px at 85% 30%,#3d5cff 0%,transparent 60%);background-size:22px 22px,auto}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding-top:40px;padding-bottom:110px}
.pill{display:inline-flex;align-items:center;gap:10px;background:#ffffff1f;border:1px solid #ffffff33;border-radius:100px;padding:7px 16px;font-size:14px;font-weight:700}.signal{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #f5bb0040}
.hero h1{color:#fff;font-size:clamp(46px,6.4vw,84px);line-height:1.06;letter-spacing:-3px;font-weight:800;margin:26px 0 24px}.hero h1 em{font-style:normal;color:var(--yellow);white-space:nowrap}
.lead{color:#dfe4ff;font-size:19px;max-width:500px;margin:0 0 34px}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;gap:18px;align-items:center;background:var(--yellow);color:var(--ink);border-radius:16px;padding:17px 26px;text-decoration:none;font-size:16px;font-weight:800;box-shadow:0 10px 0 -4px #b88900,0 18px 30px #0f1a6a55;transition:transform .15s}.button:hover{transform:translateY(-2px);color:var(--ink)}.button span{font-size:18px}
.ghost{padding:16px 22px;border-radius:16px;border:1.5px solid #ffffff55;text-decoration:none;font-weight:700;font-size:16px}.ghost:hover{background:#ffffff14;color:#fff}
.modes{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:38px 0 0}.modes li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:8px 15px;border-radius:100px;border:1px solid #ffffff40}.modes svg,.way-icon svg,.timer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-art{position:relative;display:flex;justify-content:center;padding:20px 0}
.blob{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--yellow);opacity:.95;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(0);box-shadow:inset 0 0 0 40px #ffd54a}
.phone{position:relative;width:290px;padding:10px;background:#121318;border-radius:46px;box-shadow:0 40px 70px #0b145066,inset 0 0 0 2px #2e3040}.phone img{border-radius:37px;width:100%}
.hero .phone{transform:rotate(-4deg)}
.answer-chip{position:absolute;right:-6px;bottom:70px;width:250px;background:var(--yellow);color:var(--ink);border-radius:22px;padding:16px 18px;border:3px solid #fff;box-shadow:0 24px 40px #0b145055;transform:rotate(4deg)}
.chip-top{display:flex;justify-content:space-between;font-size:12px}.chip-main{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:800;margin:8px 0 12px}.letter{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--ink);color:var(--yellow);font-size:22px}.bar{height:8px;border-radius:9px;background:#00000024}.bar i{display:block;height:100%;border-radius:9px;background:var(--ink)}
.sticker{position:absolute;left:-10px;top:36px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;padding:12px 18px;border-radius:16px;transform:rotate(-7deg);box-shadow:0 18px 30px #0b145040}
.hero-curve{position:absolute;bottom:-1px;left:0;width:100%;height:70px;fill:var(--paper)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* Sections */
.section{padding-top:110px;padding-bottom:110px}.section-heading{max-width:640px;margin-bottom:52px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading p{font-size:18px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ways article{position:relative;padding:34px 30px 30px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:transform .2s,box-shadow .2s;overflow:hidden}.ways article:hover{transform:translateY(-4px);box-shadow:0 22px 40px #1a1d3a14}
.num{position:absolute;right:22px;top:14px;font-size:64px;font-weight:800;color:#f1efe8;letter-spacing:-3px;line-height:1}
.way-icon{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--blue);color:#fff}.way-icon svg{width:26px;height:26px}
.ways article:nth-child(2) .way-icon{background:var(--yellow);color:var(--ink)}.ways article:nth-child(3) .way-icon{background:var(--teal)}
.ways p{font-size:16px;margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.split-copy>p{font-size:18px}.art{position:relative;display:flex;justify-content:center}
.answer-section{background:var(--card);padding:110px 0;border-block:1px solid var(--line)}
.answer-section .art:before{content:'';position:absolute;inset:8% 6%;border-radius:40px;background:var(--blue);transform:rotate(4deg)}
.tilt-left{transform:rotate(-3deg)}.tilt-right{transform:rotate(3deg)}
mark{background:linear-gradient(transparent 58%,var(--yellow-soft) 58%);color:var(--blue);padding:0 2px}
.probs{display:grid;gap:12px;margin:28px 0;padding:22px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}.prob{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:15px}.prob b{font-weight:800}.prob i{grid-column:1/-1;height:8px;border-radius:8px;background:#e4e2da;overflow:hidden}.prob i:before{content:'';display:block;height:100%;width:var(--w);min-width:6px;border-radius:8px;background:#b9bccb;transform-origin:left}.prob.top span{font-weight:700;color:var(--ink)}.prob.top i:before{background:var(--blue)}
.checks{list-style:none;padding:0;margin:0 0 26px;font-size:16px}.checks li{display:flex;gap:12px;margin:10px 0}.checks li:before{content:'✓';display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:13px}
.ai-note{font-size:14px;line-height:1.6;border-radius:14px;padding:14px 18px;color:#6b5200;background:var(--yellow-soft)}

.quiz-section{background:var(--ink);color:#fff;padding:110px 0}.quiz-section h2{color:#fff}.quiz-section p{color:#b5b8c8}.quiz-section .eyebrow{color:var(--yellow)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0;max-width:460px}.tiles span{display:flex;flex-direction:column;justify-content:space-between;min-height:84px;padding:12px 16px;border-radius:16px;font-weight:800;font-size:18px}.tiles small{font-size:13px;opacity:.8}.t-a{background:var(--blue)}.t-b{background:var(--yellow);color:var(--ink)}.t-c{background:var(--red)}.t-d{background:var(--teal)}
.quiz-extra{border-top:1px solid #ffffff1f;padding-top:22px;font-size:16px!important}
.timer{position:absolute;z-index:1;top:40px;right:14%;display:flex;align-items:center;gap:8px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:20px;padding:10px 18px;border-radius:100px;transform:rotate(6deg);box-shadow:0 14px 30px #0006}.timer svg{width:22px;height:22px}
.quiz-section .phone{box-shadow:0 40px 80px #000a,inset 0 0 0 2px #3a3c4c}

.langs{text-align:center;padding-top:90px}.langs p{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;font-size:clamp(24px,3.4vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.8px}.langs i{font-style:normal;color:var(--yellow);font-size:.6em}

.faq{max-width:860px;padding-top:90px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:12px;padding:0 24px;transition:box-shadow .2s}.faq details[open]{box-shadow:0 14px 30px #1a1d3a0f}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;font-size:17px;cursor:pointer}.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:22px;font-weight:700;transition:transform .2s}.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 0 22px;font-size:16px}.faq a{color:var(--blue);font-weight:700}

.download{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;background:var(--blue);color:#fff;border-radius:36px;padding:52px 56px;max-width:1116px;overflow:hidden;background-image:radial-gradient(#ffffff1a 1.2px,transparent 1.2px);background-size:22px 22px}
.cta-owl{width:112px;border-radius:28px;box-shadow:0 0 0 6px #ffffff2a;transform:rotate(-6deg)}
.download .eyebrow{color:var(--yellow)}.download h2{color:#fff;font-size:clamp(28px,3vw,40px);margin:10px 0}.download p{color:#dfe4ff;margin:0;font-size:17px}
.store{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:16px;padding:14px 24px;font-size:12px;line-height:1.3;text-decoration:none;flex-shrink:0;border:1px solid #ffffff2a;transition:transform .15s}.store svg{grid-row:span 2;color:var(--yellow)}.store b{font-size:21px}a.store:hover{color:#fff;transform:translateY(-2px)}
.design-caption{font-size:13px;margin-top:22px;text-align:center}

.site-foot{display:flex;justify-content:space-between;gap:30px;padding-top:50px;padding-bottom:40px;margin-top:60px;border-top:1px solid var(--line);font-size:14px}.site-foot .brand{font-size:18px}.site-foot p{margin:10px 0 0}.site-foot>div:last-child{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
a:hover{color:var(--blue)}.on-blue a:hover,.hero a:hover{color:inherit}

/* Legal pages */
.footer{display:flex;justify-content:space-between;gap:30px;padding-top:40px;padding-bottom:30px;margin-top:40px;border-top:1px solid var(--line);font-size:14px}
.legal{max-width:850px;padding-top:45px;padding-bottom:60px}.legal h1{font-size:43px;line-height:1.2;letter-spacing:-1.7px}.legal h2{font-size:24px;letter-spacing:-.5px;margin-top:38px}.legal h3{font-size:18px}.legal p,.legal li{font-size:15px}.legal ul{padding-left:24px}.legal a{color:var(--blue);overflow-wrap:anywhere}.legal .notice{background:var(--yellow-soft);padding:16px 20px;border-radius:12px}.legal table{border-collapse:collapse;width:100%;font-size:13px;background:#fff}.legal td,.legal th{padding:13px;border:1px solid var(--line);text-align:left}.legal th{background:var(--blue-soft)}.legal .toc{display:flex;gap:15px;flex-wrap:wrap;padding:18px 0;border-block:1px solid var(--line)}.legal .toc a{font-size:13px}.legal .meta{font-size:13px}.legal .english{margin-top:55px;border-top:1px solid var(--line);padding-top:25px}


/* Motion */
.in{animation:rise .8s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.hero-art .blob{animation:pop .9s cubic-bezier(.3,1.4,.5,1) .15s both,breathe 8s ease-in-out 1s infinite}
.hero-art .phone{animation:phone-in 1s cubic-bezier(.2,.9,.3,1.15) .3s both,float 7s ease-in-out 1.3s infinite}
.answer-chip{animation:chip-in .8s cubic-bezier(.3,1.5,.5,1) .9s both,float 7s ease-in-out 2s infinite}
.answer-chip .bar i{animation:grow 1.4s cubic-bezier(.2,.8,.2,1) 1.4s both;transform-origin:left}
.sticker{animation:chip-in .7s cubic-bezier(.3,1.5,.5,1) 1.1s both,wiggle 5s ease-in-out 2.5s infinite}
.signal{animation:ping 2s ease-out infinite}
.button{position:relative;overflow:hidden}.button:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff8c 50%,transparent 65%);translate:-120% 0;animation:shine 4.5s ease-in-out 2s infinite}
.marquee{overflow:hidden;background:var(--ink);color:#fff;padding:16px 0;rotate:-1.5deg;margin:-6px -20px 0;position:relative;z-index:1}.track{display:flex;gap:28px;width:max-content;font-weight:800;font-size:18px;white-space:nowrap;animation:marquee 32s linear infinite}.track i{font-style:normal;color:var(--yellow)}.marquee:hover .track{animation-play-state:paused}
.way-icon{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}.ways article:hover .way-icon{transform:rotate(-8deg) scale(1.1)}
.timer{animation:tick 1s steps(2) infinite}
.tiles span{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}.tiles span:hover{transform:translateY(-4px) rotate(-2deg)}
.langs p span{animation:glow 8s ease-in-out infinite}.langs p span:nth-of-type(2){animation-delay:2s}.langs p span:nth-of-type(3){animation-delay:4s}.langs p span:nth-of-type(4){animation-delay:6s}
.cta-owl{animation:bob 4s ease-in-out infinite}
@keyframes rise{from{opacity:0;translate:0 28px}}
@keyframes pop{from{opacity:0;scale:.4}}
@keyframes breathe{50%{scale:1.05}}
@keyframes phone-in{from{opacity:0;translate:0 80px;rotate:8deg}}
@keyframes chip-in{from{opacity:0;scale:.5}}
@keyframes grow{from{scale:0 1}}
@keyframes wiggle{0%,86%,100%{rotate:0deg}90%{rotate:-5deg}94%{rotate:4deg}}
@keyframes ping{0%{box-shadow:0 0 0 0 #f5bb00aa}100%{box-shadow:0 0 0 10px #f5bb0000}}
@keyframes shine{0%,70%{translate:-120% 0}100%{translate:120% 0}}
@keyframes marquee{to{translate:-50% 0}}
@keyframes tick{50%{scale:1.06}}
@keyframes glow{0%,20%,100%{color:var(--ink)}8%,14%{color:var(--blue)}}
@keyframes bob{50%{translate:0 -8px;rotate:4deg}}
@keyframes reveal{from{opacity:0;translate:0 50px;scale:.97}}
@keyframes fill{from{scale:0 1}}
@supports (animation-timeline:view()){
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.ways article:nth-child(2){animation-range:entry 10% entry 80%}.ways article:nth-child(3){animation-range:entry 20% entry 90%}
.faq details:nth-of-type(2){animation-range:entry 10% entry 80%}.faq details:nth-of-type(3){animation-range:entry 20% entry 90%}
.prob i:before{animation:fill linear both;animation-timeline:view();animation-range:entry 40% entry 100%}
.tiles span{animation:reveal linear both;animation-timeline:view();animation-range:entry 10% entry 85%}.tiles span:nth-child(2){animation-range:entry 15% entry 90%}.tiles span:nth-child(3){animation-range:entry 20% entry 95%}.tiles span:nth-child(4){animation-range:entry 25% entry 100%}
}
@media(max-width:960px){.hero{grid-template-columns:1fr;gap:30px;padding-bottom:100px}.hero-copy{max-width:640px}.split{gap:50px}.download{grid-template-columns:auto 1fr}.download .store{grid-column:2;width:max-content}}
@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}.nav nav>a:not(.nav-cta){display:none}.brand{font-size:19px}.brand img{width:38px;height:38px}.nav-cta{font-size:14px;padding:9px 16px}
.hero{padding-top:18px}.hero h1{letter-spacing:-2px}.lead{font-size:17px}.button,.ghost{flex:1 1 auto;justify-content:center;text-align:center}.modes{margin-top:28px}
.hero-art{padding:10px 0 0}.blob{width:300px;height:300px;box-shadow:inset 0 0 0 28px #ffd54a}.phone{width:230px;border-radius:38px;padding:8px}.phone img{border-radius:31px}.answer-chip{width:200px;right:0;bottom:40px;padding:12px 14px}.chip-main{font-size:21px}.letter{width:34px;height:34px;font-size:18px}.sticker{left:0;top:30px;font-size:13px;padding:9px 13px}
.section{padding-top:70px;padding-bottom:70px}.section-heading{margin-bottom:34px}.section-heading p,.split-copy>p{font-size:16px}.ways{grid-template-columns:1fr;gap:14px}.ways article{padding:26px 24px}
.split{grid-template-columns:1fr;gap:44px}.answer-section,.quiz-section{padding:70px 0}.answer-section .art{order:2}.timer{right:4%;top:10px;font-size:17px}
.langs{padding-top:60px}.faq{padding-top:60px}.faq details{padding:0 18px}.faq summary{font-size:16px}
.download{grid-template-columns:1fr;margin-left:16px;margin-right:16px;padding:34px 26px;border-radius:28px;gap:22px}.cta-owl{width:84px;border-radius:22px}.download .store{grid-column:auto}
.site-foot,.footer{display:block}.site-foot>div:last-child{justify-content:flex-start;margin-top:22px}.footer a{display:block;margin:6px 0}
.legal h1{font-size:32px}.legal td,.legal th{padding:8px}.legal table{font-size:12px}.legal{padding-top:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}