@font-face{font-family:'Rounded';font-weight:500;font-display:swap;src:url(/fonts/RoundedMplus1c-Medium.woff) format('woff')}
@font-face{font-family:'Rounded';font-weight:700;font-display:swap;src:url(/fonts/RoundedMplus1c-Bold.woff) format('woff')}
@font-face{font-family:'Rounded';font-weight:800;font-display:swap;src:url(/fonts/RoundedMplus1c-ExtraBold.woff) format('woff')}
@font-face{font-family:'Rounded';font-weight:900;font-display:swap;src:url(/fonts/RoundedMplus1c-Black.woff) format('woff')}
:root{--bg:#FFF6EC;--soft:#FFE3C8;--p:#FF8A3D;--pd:#D3661F;--acc:#7E57C2;--accd:#5B3FA0;--ink:#3A2F4A;--ink2:#5B4E6B;--muted:#8A7A96;--line:#F0E3D8;--card:#fff;--gold:#FFC21A;--ok:#1FB865;--red:#FF5252;--h1:#FF9D52;--h2:#FF7A2E}
.fridgy{--bg:#EEF6FF;--soft:#DCEBFF;--p:#2F8CFF;--pd:#1C64C4;--acc:#FFB02E;--accd:#C98410;--ink:#17324D;--ink2:#3B5873;--muted:#6B8299;--line:#D5E4F5;--h1:#5BA8FF;--h2:#2F8CFF}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:500 17px/1.65 'Rounded',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:clip}
h1,h2,h3{font-family:'Rounded',ui-rounded,system-ui,sans-serif;font-weight:900;line-height:1.05;letter-spacing:-.01em}
a{color:var(--pd)}.wrap{max-width:1120px;margin:0 auto;padding:0 22px}.ic{display:block;flex:none}
b,strong{font-weight:800}
/* ---- nút kiểu game (viền dưới dày, lún khi nhấn) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--p);color:#fff!important;padding:15px 28px;border-radius:22px;font-weight:900;font-size:19px;line-height:1.1;text-decoration:none;border-bottom:6px solid var(--pd);box-shadow:0 12px 24px -10px rgba(120,50,0,.45);transition:transform .12s,border-width .12s,margin .12s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(4px);border-bottom-width:2px}
.btn.purple{background:var(--acc);border-bottom-color:var(--accd);box-shadow:0 12px 24px -10px rgba(50,20,110,.55)}
.btn.white{background:#fff;color:var(--ink)!important;border-bottom-color:#E4D6C8}
.btn.sm{padding:11px 20px;font-size:16px;border-radius:18px;border-bottom-width:5px}
/* ---- thanh trên ---- */
.nav{position:absolute;inset:0 0 auto 0;z-index:20}.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font:900 24px 'Rounded',sans-serif;text-shadow:0 3px 0 rgba(150,60,0,.35)}
.brand img,.brand .mark{width:42px;height:42px;border-radius:13px;box-shadow:0 4px 0 rgba(150,60,0,.3)}.mark{display:grid;place-items:center;background:#fff;color:var(--p)}
.nav nav{display:flex;gap:22px;align-items:center}.nav nav a:not(.btn){color:#fff;text-decoration:none;font-weight:800;font-size:16px;text-shadow:0 2px 0 rgba(150,60,0,.3)}
.nav.solid{position:static;background:#fff;border-bottom:2px solid var(--line)}.nav.solid .brand{color:var(--ink);text-shadow:none}.nav.solid nav a:not(.btn){color:var(--ink2);text-shadow:none}
/* ---- hero ---- */
.hero{position:relative;background:radial-gradient(1200px 520px at 80% 10%,rgba(255,255,255,.28),transparent 60%),linear-gradient(180deg,var(--h1),var(--h2));color:#fff;padding:132px 0 150px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.22) 0 90px,transparent 91px),radial-gradient(circle at 92% 78%,rgba(255,255,255,.16) 0 140px,transparent 141px),radial-gradient(circle at 60% 6%,rgba(255,255,255,.14) 0 60px,transparent 61px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:99px;font-weight:800;font-size:15px;margin-bottom:20px;backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(50px,8.2vw,98px);color:#fff;text-shadow:0 7px 0 var(--pd),0 16px 28px rgba(110,40,0,.35)}.hero h1 span{display:block}.hero h1 .y{color:#FFE27A}
.hero .lead{font-size:clamp(18px,2vw,22px);font-weight:700;margin:26px 0 30px;max-width:520px;text-shadow:0 2px 0 rgba(150,60,0,.25)}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.stats{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.stat{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5);border-radius:20px;padding:10px 18px;text-align:center;min-width:104px}.stat b{display:block;font:900 30px/1 'Rounded';text-shadow:0 3px 0 rgba(150,60,0,.3)}.stat span{font-size:13px;font-weight:800;opacity:.95}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:2}.wave path{fill:var(--bg)}
/* ---- mockup điện thoại (dựng từ giao diện thật của app) ---- */
.stage{position:relative;display:grid;place-items:center;padding:10px 0}
.phone{font-size:clamp(11px,3.4vw,14.5px);width:22em;height:45.5em;border-radius:3.6em;background:#1b1424;padding:.85em;box-shadow:0 3.4em 5em rgba(70,25,0,.5),inset 0 0 0 .18em #43355a;transform:rotate(3deg);position:relative;color:var(--ink)}
.screen{position:relative;height:100%;border-radius:2.9em;overflow:hidden;background:#FFB57A url(/assets/app-bg.jpg) center top/cover}
.screen::before{content:"";position:absolute;top:.7em;left:50%;transform:translateX(-50%);width:6em;height:1.5em;border-radius:1em;background:#1b1424;z-index:6}
.sbar{position:absolute;top:3em;left:.9em;right:.9em;display:flex;align-items:center;gap:.5em;z-index:4}
.sp{display:flex;align-items:center;gap:.5em;background:rgba(255,255,255,.94);border:.14em solid var(--line);border-radius:2em;padding:.28em .8em .28em .28em;box-shadow:0 .3em .8em rgba(80,30,0,.2)}
.sp img{width:2.5em;height:2.5em;border-radius:50%;border:.2em solid var(--p);object-fit:cover}.sp b{display:block;font-size:1.05em;line-height:1.1}.sp small{white-space:nowrap;display:flex;align-items:center;gap:.2em;font-weight:800;font-size:.82em;color:var(--ink2)}
.sc{white-space:nowrap;display:flex;align-items:center;gap:.4em;background:#fff;border:.14em solid var(--line);border-radius:1.4em;padding:.3em .8em .3em .35em;font-weight:900;font-size:1.05em;box-shadow:0 .3em .8em rgba(80,30,0,.2)}
.sbtn{width:2.6em;height:2.6em;border-radius:.9em;background:#fff;border:.14em solid var(--line);border-bottom-width:.26em;display:grid;place-items:center}
.mascot{position:absolute;left:50%;bottom:15.2em;height:22.5em;transform:translateX(-50%);filter:drop-shadow(0 .8em .8em rgba(70,25,0,.28));animation:bob 3.4s ease-in-out infinite;z-index:2}
.toy{position:absolute;width:3.5em;height:3.5em;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 .3em .7em rgba(60,20,0,.22);z-index:3;animation:bob 3s ease-in-out infinite}
.panel{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);border-radius:2.4em 2.4em 0 0;padding:.7em 1em 1.2em;z-index:5;box-shadow:0 -.6em 1.6em rgba(60,20,0,.2)}
.grab{width:3.2em;height:.36em;border-radius:1em;background:var(--line);margin:0 auto .6em}.ph{display:flex;align-items:center;gap:.4em;margin-bottom:.6em}.ph b{flex:1;font:900 1.35em 'Rounded'}
.chip{display:flex;align-items:center;gap:.25em;height:2em;padding:0 .6em;border-radius:1em;background:#FFF3CC;border:.14em solid #FFE29A;font-weight:900;font-size:.85em;color:#8A5A00}.chip.o{width:2em;padding:0;justify-content:center;background:#F1F5F9;border-color:#E2E8F0;color:var(--ink)}
.rooms{display:flex;gap:.6em;margin-bottom:.8em}.room{flex:1;border-radius:1.4em;background:#fff;border:.18em solid var(--line);border-bottom-width:.34em;overflow:hidden;position:relative}.room.cur{border-color:var(--p);border-bottom-color:var(--pd)}
.rt{height:5.4em;display:grid;place-items:center;position:relative}.rt .n{position:absolute;left:.4em;top:.4em;min-width:1.6em;height:1.6em;border-radius:1em;background:#fff;display:grid;place-items:center;font-weight:900;font-size:.9em}
.rt .ck{position:absolute;right:.4em;top:.4em;width:1.5em;height:1.5em;border-radius:50%;background:var(--ok);border:.14em solid #fff;display:grid;place-items:center}
.rb{padding:.35em .2em .5em;text-align:center;font-weight:800;font-size:.82em;line-height:1.2}.rb .tag{display:inline-block;background:var(--p);color:#fff;border-radius:.6em;padding:.05em .55em;font-size:.78em;font-weight:900;margin-top:.15em}
.play{display:flex;align-items:center;justify-content:center;gap:.8em;height:4.7em;border-radius:1.8em;background:var(--p);border-bottom:.5em solid var(--pd);color:#fff;box-shadow:0 .8em 1.4em -.4em rgba(180,80,10,.5)}.play .pc{width:2.9em;height:2.9em;border-radius:50%;background:#fff;display:grid;place-items:center;padding-left:.15em}
.play b{display:block;font:900 1.7em/1 'Rounded';text-shadow:0 .09em 0 rgba(0,0,0,.2)}.play small{display:block;font-weight:800;font-size:.82em;opacity:.95}
.badge{color:var(--ink);white-space:nowrap;position:absolute;z-index:8;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:1.4em;padding:.55em 1em;font:900 1.05em 'Rounded';box-shadow:0 .9em 1.8em rgba(70,25,0,.3);border-bottom:.28em solid var(--line);animation:bob 4s ease-in-out infinite}
.b1{left:-1.2em;top:15em;color:#E5484D;animation-delay:-1s}.b2{right:-1.6em;top:8em;animation-delay:-2s}.b3{right:-.6em;bottom:12em;animation-delay:-.5s}.b3 .ic{margin-right:-.15em}
.stars{display:inline-flex;gap:2px;justify-content:center}
.spark{position:absolute;z-index:7;color:#FFE27A;animation:tw 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) translateX(var(--tx,0))}50%{transform:translateY(-.7em) translateX(var(--tx,0))}}.mascot{--tx:-50%}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
/* ---- dải phòng ---- */
.ribbon{background:var(--ink);padding:16px 0;overflow:hidden;transform:rotate(-1.2deg);width:104%;margin:-34px -2% 0;position:relative;z-index:3;box-shadow:0 14px 30px rgba(40,20,60,.25)}
.track{display:flex;gap:14px;width:max-content;animation:slide 38s linear infinite}.ribbon:hover .track{animation-play-state:paused}
.rchip{display:flex;align-items:center;gap:10px;border-radius:16px;padding:9px 18px;font-weight:900;font-size:17px;color:var(--ink);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---- sections ---- */
section{padding:88px 0;position:relative}section.tight{padding:64px 0}.eyebrow{display:inline-block;font-weight:900;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--pd);background:var(--soft);padding:6px 14px;border-radius:99px;margin-bottom:14px}
h2{font-size:clamp(34px,5vw,56px)}h2 em{font-style:normal;color:var(--p)}.sub{color:var(--ink2);font-size:19px;max-width:620px;margin:14px 0 40px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{background:var(--card);border:2px solid var(--line);border-bottom-width:7px;border-radius:28px;padding:28px;transition:transform .15s}.card:hover{transform:translateY(-4px)}
.card h3{font-size:24px;margin:18px 0 8px}.card p{color:var(--ink2);font-size:16px;font-weight:600}
.tile{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;box-shadow:inset 0 -5px 0 rgba(0,0,0,.08)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;counter-reset:s}
.step{position:relative;background:#fff;border:2px solid var(--line);border-bottom-width:7px;border-radius:28px;padding:34px 28px 28px}
.step .num{position:absolute;top:-26px;left:26px;width:58px;height:58px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font:900 30px/1 'Rounded';border-bottom:5px solid var(--pd);box-shadow:0 10px 20px -8px rgba(180,80,10,.6)}
.step h3{font-size:24px;margin:14px 0 8px}.step p{color:var(--ink2);font-weight:600}
.dark{background:var(--ink);color:#fff;overflow:hidden}.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 10% 0,rgba(255,138,61,.25),transparent),radial-gradient(500px 300px at 100% 100%,rgba(126,87,194,.4),transparent);pointer-events:none}
.dark .wrap{position:relative}.dark h2{color:#fff}.dark .sub{color:#D9CFE6}.dark .eyebrow{background:rgba(255,255,255,.14);color:#FFE27A}
.ups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.up{display:flex;gap:16px;align-items:center;background:#fff;color:var(--ink);border-radius:24px;padding:16px;border-bottom:6px solid #E4D6C8;transition:transform .15s}.up:hover{transform:translateY(-4px) rotate(-.6deg)}
.up .tile{width:58px;height:58px;border-radius:18px}.up h3{font-size:19px;margin-bottom:2px}.up p{font-size:14px;font-weight:700;color:var(--muted);line-height:1.3;margin-bottom:6px}
.pips{display:flex;gap:4px}.pips i{width:18px;height:7px;border-radius:4px;background:#E3E8EF}
.premium{background:linear-gradient(135deg,#FFE27A,#FFC21A);border-radius:36px;border-bottom:9px solid #E0A000;padding:48px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;box-shadow:0 30px 60px -30px rgba(190,120,0,.6);color:#4A2F00}
.premium h2{color:#4A2F00}.premium .big{width:130px;height:130px;border-radius:38px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 -8px 0 rgba(0,0,0,.08),0 14px 24px -10px rgba(120,70,0,.5);transform:rotate(-6deg)}
.premium ul{list-style:none;margin:16px 0 24px;display:grid;gap:8px}.premium li{display:flex;gap:10px;align-items:center;font-weight:800}.premium li .ic{background:var(--ok);border-radius:50%;padding:3px;color:#fff}
.cta{background:linear-gradient(180deg,var(--h1),var(--h2));color:#fff;text-align:center;overflow:hidden;padding:96px 0 90px}.cta h2{color:#fff;text-shadow:0 5px 0 var(--pd);font-size:clamp(38px,6vw,70px)}.cta p{font-size:20px;font-weight:700;margin:14px auto 30px;max-width:560px}
.cta .m{position:absolute;bottom:-20px;height:340px;opacity:.95}.cta .m.l{left:2%}.cta .wrap{position:relative;z-index:2}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.gcard{display:block;background:#fff;border:2px solid var(--line);border-bottom-width:8px;border-radius:32px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s}.gcard:hover{transform:translateY(-6px)}
.gtop{height:200px;display:grid;place-items:center;position:relative;background:linear-gradient(160deg,#FFB36B,#FF7A2E)}.gcard.fr .gtop{background:linear-gradient(160deg,#6CB2FF,#2F8CFF)}
.gtop img{height:100%;filter:drop-shadow(0 10px 10px rgba(70,25,0,.3))}.gbody{padding:24px 26px 28px}.gbody h3{font-size:28px}.gbody small{color:var(--muted);font-weight:800}.gbody p{margin:10px 0 18px;color:var(--ink2);font-weight:600}
.soon{position:absolute;top:16px;right:16px;background:#fff;color:var(--ink);font-weight:900;font-size:13px;padding:5px 12px;border-radius:99px}
.fridge-art{display:grid;place-items:center;position:relative;min-height:440px}.fridge-art .big{width:250px;height:330px;border-radius:44px;background:linear-gradient(160deg,#fff,#D8E9FF);border-bottom:12px solid #9CC4F3;display:grid;place-items:center;color:#2F8CFF;box-shadow:0 40px 60px -20px rgba(10,50,120,.5);transform:rotate(3deg)}
.fl{position:absolute;width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 16px 24px -10px rgba(10,50,120,.45);animation:bob 3.6s ease-in-out infinite}
/* ---- trang tài liệu ---- */
.docwrap{max-width:820px;margin:0 auto;padding:46px 22px 90px}.doc{background:#fff;border:2px solid var(--line);border-bottom-width:8px;border-radius:32px;padding:44px 48px}
.doc h1{font-size:clamp(36px,5vw,52px);margin-bottom:8px}.doc h2{font-size:26px;margin:36px 0 10px;color:var(--ink)}.doc p,.doc li{color:var(--ink2);margin-bottom:10px;font-weight:600}.doc ul{padding-left:22px}.meta{color:var(--muted);font-weight:700;margin-bottom:18px}
footer{background:var(--ink);color:#C9BFD8;padding:40px 0;font-size:15px;font-weight:700}footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}footer a{color:#fff;margin-left:22px;text-decoration:none}
footer .brand{color:#fff;font-size:20px;text-shadow:none}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}.js .rv.in{opacity:1;transform:none}
@media(max-width:900px){.hero{padding:110px 0 120px}.hero .wrap{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.row,.stats{justify-content:center}.nav nav a:not(.btn){display:none}.premium{grid-template-columns:1fr;text-align:center;padding:34px 26px}.premium .big{margin:0 auto}.premium li{justify-content:center}.cta .m{display:none}.doc{padding:30px 24px}.ribbon{margin-top:-24px}.stage{padding-top:30px}}
@media(max-width:560px){.b1{left:-.1em}.b2{right:-.2em}.b3{right:-.1em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}