/* VUA TIẾNG VIỆT — giao diện VuiSpace (tím VuiSpace, Baloo 2, thẻ bo tròn). Ảnh nền/ảnh minh họa đang vẽ bằng code: thay bằng assets trong /fans/vtv/assets/ sau. */
:root{--pri:#7C5CFF;--pri2:#5B3FD9;--pri3:#EFEAFF;--gold:#FFC93C;--ink:#1F1640;--mu:#6B6489;--ok:#2FB673;--bad:#F0475B;--yel:#F7B500;--blue:#2E7CF6;--card:#fff;--bg:#F6F3FF;--r:20px;
  --sky1:#7FD3FF;--sky2:#CFEFFF;--grass1:#7ED957;--grass2:#3FAE4A}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 'Be Vietnam Pro',system-ui,sans-serif}
body{min-height:100dvh}
h1,h2,h3,.fb{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;line-height:1.15;margin:.2em 0}
a{color:var(--pri2)}
button{font:inherit;cursor:pointer}
#app{max-width:980px;margin:0 auto;padding:0 14px 90px}
.boot{min-height:90vh;display:grid;place-items:center;align-content:center;gap:10px;color:var(--mu)}.boot img{width:180px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.top .logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--pri2);font:800 20px 'Baloo 2';white-space:nowrap}.top .logo img{height:34px}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid #E4DDFF;color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap;text-decoration:none;box-shadow:0 2px 6px rgba(91,63,217,.08)}
.chip.ic{padding:6px 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 20px;border:0;border-radius:14px;background:linear-gradient(180deg,#8E72FF,var(--pri2));color:#fff;font:800 15px 'Be Vietnam Pro';box-shadow:0 4px 0 #4027B5,0 8px 16px rgba(91,63,217,.25);text-decoration:none;transition:transform .1s;white-space:nowrap}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4027B5}
.btn.gold{background:linear-gradient(180deg,#FFD866,#FFB21E);color:#5A3600;box-shadow:0 4px 0 #C98300,0 8px 16px rgba(255,170,0,.25)}
.btn.green{background:linear-gradient(180deg,#5EE08A,#25A55A);box-shadow:0 4px 0 #17803F,0 8px 16px rgba(37,165,90,.25)}
.btn.ghost{background:#fff;color:var(--pri2);box-shadow:0 3px 0 #D9D0FF;border:1px solid #E4DDFF}
.btn.red{background:linear-gradient(180deg,#FF7B8A,#E0364C);box-shadow:0 4px 0 #A71D30}
.btn.sm{min-height:34px;padding:6px 14px;font-size:13px;border-radius:11px}
.btn.lg{min-height:56px;padding:14px 30px;font-size:18px}
.btn[disabled]{opacity:.5;pointer-events:none}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 6px 22px rgba(60,40,140,.08);border:1px solid #EEE9FF}
.mu{color:var(--mu)}.small{font-size:13px}.tiny{font-size:12px}.c{text-align:center}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grow{flex:1}
.grid{display:grid;gap:14px}
.seg{display:inline-flex;background:#fff;border:1px solid #E4DDFF;border-radius:14px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:8px 14px;border-radius:10px;font-weight:700;color:var(--mu)}
.seg button.on{background:var(--pri);color:#fff}
.in{width:100%;min-height:46px;padding:10px 14px;border:2px solid #E4DDFF;border-radius:14px;font:600 16px 'Be Vietnam Pro';background:#fff;color:var(--ink);outline:none}
.in:focus{border-color:var(--pri)}
.empty{padding:28px;text-align:center;color:var(--mu)}

/* hero + game cards */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:22px 20px 96px;background:linear-gradient(180deg,var(--sky1),var(--sky2) 62%,var(--grass1) 62%,var(--grass2));color:#fff;min-height:190px;box-shadow:0 10px 30px rgba(46,124,246,.25)}
.hero h1{font-size:clamp(30px,7vw,46px);color:#fff;text-shadow:0 3px 0 #5B3FD9,0 6px 18px rgba(0,0,0,.25);letter-spacing:.5px}
.hero p{margin:0;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero .hb{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 9%,rgba(255,255,255,.35) 10%,rgba(124,92,255,.55) 60%,rgba(91,63,217,.85));display:grid;place-items:center;color:#fff;font:800 13px 'Baloo 2';text-shadow:0 1px 2px #3a2390;animation:bob 3s ease-in-out infinite}
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media (max-width:720px){.gcards{grid-template-columns:1fr}}
.gcard{position:relative;display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:16px;color:#fff;text-decoration:none;min-height:150px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.12);transition:transform .15s}
.gcard:hover{transform:translateY(-3px)}
.gcard b{font:800 22px 'Baloo 2'}.gcard span{font-size:13px;opacity:.95}
.gcard .em{position:absolute;right:10px;bottom:4px;font-size:64px;opacity:.9;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.gcard .st{margin-top:auto;font-size:12px;font-weight:700;background:rgba(0,0,0,.18);padding:4px 10px;border-radius:99px;align-self:flex-start}
.g-nt{background:linear-gradient(135deg,#8E72FF,#5B3FD9)}.g-dt{background:linear-gradient(135deg,#FF8FB1,#F0475B)}.g-cc{background:linear-gradient(135deg,#5EE08A,#1F9E8F)}
.sect{margin-top:22px}.sect>h2{font-size:22px}

/* list rows */
.lb{list-style:none;margin:0;padding:0}.lb li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px dashed #EEE9FF}
.lb .rk{width:34px;text-align:center;font:800 18px 'Baloo 2';color:var(--mu)}.lb li:nth-child(1) .rk{color:#E0A100}.lb li:nth-child(2) .rk{color:#8C93A8}.lb li:nth-child(3) .rk{color:#C96A2B}
.av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--pri3);flex:none}
.lb .sc{font:800 18px 'Baloo 2';color:var(--pri2)}

/* shop */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px}
.item .ic{font-size:36px}.item .q{font-weight:800;color:var(--pri2)}

/* modal / toast */
#modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(31,22,64,.5);padding:16px}
#modal.on{display:grid}
#modal .box{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .25s}
#modal .cls{position:absolute;right:10px;top:10px;border:0;background:var(--pri3);width:34px;height:34px;border-radius:50%;font-weight:800;color:var(--pri2)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:grid;gap:8px;width:min(420px,92vw)}
#toast>div{background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:pop .2s}
#toast>div.err{background:var(--bad)}#toast>div.ok{background:var(--ok)}
.res-h{font:800 30px 'Baloo 2';text-align:center}.res-win{color:var(--ok)}.res-lose{color:var(--bad)}
.rw{display:flex;justify-content:center;gap:10px;margin:10px 0;flex-wrap:wrap}.rw span{background:#FFF6D6;color:#8A5A00;padding:6px 12px;border-radius:99px;font-weight:800}

/* ===== NỐI TỪ ===== */
.nt-wrap{display:grid;gap:12px}
.nt-head{display:flex;align-items:center;gap:10px}
.timer{position:relative;height:12px;border-radius:99px;background:#EEE9FF;overflow:hidden}.timer i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ok),var(--yel));border-radius:99px;transition:width .25s linear}
.timer.warn i{background:var(--bad)}
.chain{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:6px 2px;scroll-behavior:smooth}
.bub{max-width:78%;padding:10px 16px;border-radius:18px;font:800 18px 'Baloo 2';letter-spacing:.5px;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.bub small{display:block;font:600 11px 'Be Vietnam Pro';opacity:.75;letter-spacing:0}
.bub.me{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:6px}
.bub.op{align-self:flex-start;background:#fff;border:1px solid #EEE9FF;border-bottom-left-radius:6px}
.bub b.k{color:var(--gold)}.bub.op b.k{color:var(--pri2)}
.nt-input{display:flex;gap:8px}.nt-input .pre{display:grid;place-items:center;padding:0 14px;border-radius:14px;background:var(--pri3);color:var(--pri2);font:800 18px 'Baloo 2';white-space:nowrap}
.tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tool{position:relative;width:64px;height:64px;border-radius:20px;border:0;background:linear-gradient(180deg,#fff,#F1ECFF);box-shadow:0 4px 0 #D9D0FF,0 6px 14px rgba(91,63,217,.15);font-size:28px;display:grid;place-items:center}
.tool .n{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--ok);color:#fff;font:800 13px/24px 'Be Vietnam Pro';border:2px solid #fff}
.tool .n.z{background:var(--bad)}
.tool.lock{background:linear-gradient(180deg,#3B3270,#2A2257);color:#FFD866;box-shadow:0 4px 0 #19133d}.tool.lock small{position:absolute;bottom:-18px;left:0;right:0;font:800 11px 'Be Vietnam Pro';color:var(--ink)}
.tool:active{transform:translateY(3px)}
.pl-row{display:flex;gap:8px;overflow:auto;padding:4px 2px}
.pl{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px;padding:8px;border-radius:16px;background:#fff;border:2px solid #EEE9FF;font-size:12px;font-weight:700;text-align:center}
.pl.turn{border-color:var(--pri);box-shadow:0 0 0 4px rgba(124,92,255,.15)}.pl.dead{opacity:.45;filter:grayscale(1)}
.code{font:800 30px 'Baloo 2';letter-spacing:6px;color:var(--pri2)}

/* ===== ĐOÁN TỪ ===== */
.dt-hint{font-weight:700;font-size:16px;background:#FFF6D6;border-radius:16px;padding:12px 16px;color:#6B4A00}
.board{display:grid;gap:7px;justify-content:center;margin:6px 0}
.brow{display:flex;gap:5px;justify-content:center}
.cell{--s:clamp(28px,8.6vw,48px);width:var(--s);height:var(--s);border-radius:10px;display:grid;place-items:center;font:800 calc(var(--s)*.52) 'Baloo 2';background:#fff;border:2px solid #E4DDFF;color:var(--ink);text-transform:uppercase}
.cell.sp{width:calc(var(--s)*.4);border:0;background:none}
.cell.g{background:var(--blue);border-color:var(--blue);color:#fff}
.cell.y{background:var(--yel);border-color:var(--yel);color:#fff}
.cell.x{background:var(--bad);border-color:var(--bad);color:#fff}
.cell.typing{border-color:var(--pri);animation:pop .15s}
.cell.rv{background:#E6F0FF;border-color:var(--blue);color:var(--blue)}
.cell.flip{animation:flip .45s both}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.elim{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.elim span{padding:4px 10px;border-radius:8px;background:#EEE;color:#999;text-decoration:line-through;font-weight:800}
.legend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--mu)}.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.dist{display:grid;gap:4px}.dist div{display:flex;align-items:center;gap:6px;font-size:12px}.dist b{display:block;height:16px;background:var(--pri);border-radius:6px;color:#fff;font-size:11px;padding:0 6px;min-width:18px}

/* ===== CHẮP CÁNH TIẾNG VIỆT ===== */
body.cc{background:#7FD3FF}
body.cc #app{max-width:none;padding:0}
.cc-stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#5FC4FF 0%,#A8E2FF 38%,#DFF6FF 52%,#9BE36A 52.5%,#6CCB4A 70%,#3FAE4A 100%);touch-action:none;user-select:none}
.cc-stage .sun{position:absolute;right:8%;top:9%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#FFF6B8,#FFD84A 60%,rgba(255,216,74,0) 72%);filter:blur(.3px)}
.cloud{position:absolute;width:140px;height:46px;background:#fff;border-radius:40px;opacity:.9;animation:drift 60s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud::before{width:62px;height:62px;left:22px;top:-30px}.cloud::after{width:48px;height:48px;left:70px;top:-20px}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(110vw)}}
.hill{position:absolute;left:-10%;right:-10%;height:30%;bottom:28%;border-radius:50% 50% 0 0;background:#86DB5C;opacity:.55}
.flower{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #FFD84A inset}
.cc-hud{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none}
.cc-hud>*{pointer-events:auto}
.moves{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#BFE9FF 45%,#3A9BE0);border:5px solid #1F4E7A;display:grid;place-items:center;align-content:center;color:#1F3A5A;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.moves b{font:800 30px/1 'Baloo 2'}.moves small{font:800 11px 'Be Vietnam Pro'}
.lvl{display:grid;justify-items:center;gap:4px;margin-top:6px}.lvl b{background:linear-gradient(180deg,#B15CFF,#7B1FE0);color:#fff;font:800 18px 'Baloo 2';padding:2px 22px;border-radius:14px 14px 4px 4px}
.lvl span{background:#1F3A5A;color:#fff;font:800 13px 'Be Vietnam Pro';padding:3px 22px;border-radius:99px;min-width:120px;text-align:center}
.gear{width:50px;height:50px;border-radius:16px;border:0;background:rgba(255,255,255,.9);font-size:24px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.field{position:absolute;inset:0;z-index:2}
.bb{position:absolute;left:0;top:0;--d:84px;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;display:grid;place-items:center;text-align:center;padding:6px;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.35) 8% 16%,transparent 17%),radial-gradient(circle at 50% 55%,var(--c1),var(--c2) 72%,var(--c3));
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.4),0 8px 14px rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.55);
  color:#fff;font:800 calc(var(--d)*.17) 'Baloo 2';line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.3,1.4,.5,1),width .35s,height .35s,margin .35s,left .1s,top .1s;cursor:grab;will-change:transform}
.bb.c0{--c1:#7FA8FF;--c2:#3F6FE0;--c3:#2A4FB8}.bb.c1{--c1:#B48CFF;--c2:#7B4BE8;--c3:#5A2FC0}.bb.c2{--c1:#FF9AC8;--c2:#E85A9C;--c3:#C23A7C}.bb.c3{--c1:#FFC36B;--c2:#F2932A;--c3:#C96B10}.bb.c4{--c1:#7FE3A1;--c2:#2FB673;--c3:#1C8A52}.bb.c5{--c1:#FFE36B;--c2:#F2C21E;--c3:#C99A00}
.bb .t{max-width:92%;word-break:break-word;pointer-events:none}
.bb .cnt{position:absolute;bottom:-4px;right:-2px;background:#fff;color:var(--pri2);font:800 12px/20px 'Be Vietnam Pro';min-width:30px;height:20px;border-radius:99px;text-shadow:none;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.bb.sel{transform:scale(1.12);box-shadow:0 0 0 5px #fff,0 0 22px 6px rgba(255,255,255,.9)}
.bb.drag{transition:none;z-index:9;cursor:grabbing;transform:scale(1.1)}
.bb.hint{animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px #FFF59B,0 0 30px 12px #FFE14D}}
.bb.wrong{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.bb.drop{animation:fall .8s cubic-bezier(.3,1.5,.6,1) both}
@keyframes fall{from{transform:translateY(-110vh) scale(.8)}}
.bb.fly{animation:fly 1.8s ease-in both;z-index:8}
@keyframes fly{0%{transform:scale(1.15)}20%{transform:translateY(-20px) scale(1.2)}100%{transform:translateY(-120vh) scale(.9)}}
.bb .wing{position:absolute;top:22%;width:60%;height:52%;background:radial-gradient(ellipse at 30% 40%,#fff,#EAF6FF 60%,rgba(255,255,255,.4));border-radius:80% 10% 70% 30%;opacity:0;transition:opacity .2s;pointer-events:none}
.bb .wing.l{right:78%;transform-origin:right center;border-radius:80% 10% 70% 30%}.bb .wing.r{left:78%;transform-origin:left center;border-radius:10% 80% 30% 70%}
.bb.fly .wing{opacity:1;animation:flap .25s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-18deg) scaleY(.8)}to{transform:rotate(14deg) scaleY(1.05)}}
.bb.absorb{transition:left .3s ease-in,top .3s ease-in,transform .3s;transform:scale(.3);opacity:.6}
.gname{position:absolute;z-index:9;left:50%;transform:translateX(-50%);top:28%;background:#fff;color:var(--pri2);font:800 22px 'Baloo 2';padding:8px 22px;border-radius:99px;box-shadow:0 8px 20px rgba(0,0,0,.2);animation:gn 1.8s ease-out both;white-space:nowrap}
@keyframes gn{0%{opacity:0;transform:translate(-50%,20px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}
.cc-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:22px;padding:14px 12px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(23,60,40,.0),rgba(23,60,40,.55))}
.cc-bar .tool{width:72px;height:72px;font-size:32px}
.lvmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}
.lv{aspect-ratio:1;border-radius:50%;border:0;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 30%,#fff,#9CC8FF 50%,#3F6FE0);color:#fff;font:800 22px 'Baloo 2';text-shadow:0 2px 0 rgba(0,0,0,.25);box-shadow:0 6px 12px rgba(63,111,224,.3)}
.lv small{font-size:12px;letter-spacing:-1px;color:#FFE14D}
.lv.lock{background:radial-gradient(circle at 35% 30%,#eee,#C8C3DA 50%,#8E88A8);opacity:.7}
.lv.cur{animation:bob 1.6s ease-in-out infinite;background:radial-gradient(circle at 35% 30%,#fff,#C9A3FF 50%,#7B4BE8)}
.soon{min-height:70vh;display:grid;place-items:center;text-align:center;gap:10px;align-content:center}.soon img{width:220px}

@media (max-width:440px){.top .logo span{display:none}.top .hm{display:none}}

/* ===================== ASSETS (v3) ===================== */
body{background:#F6F3FF url(/fans/vtv/assets/bg-word.webp) center/cover fixed no-repeat}
@media (max-aspect-ratio:1/1){body{background-image:url(/fans/vtv/assets/bg-word-m.webp)}}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;flex:none;vertical-align:-3px;background:radial-gradient(circle at 35% 30%,#FFF4C2,#FFD45A 45%,#E6A100);box-shadow:inset 0 -2px 0 rgba(160,100,0,.35),0 2px 6px rgba(230,161,0,.35);position:relative}
.coin::after{content:"";position:absolute;inset:26%;border-radius:50%;border:2px solid rgba(255,255,255,.65)}
.top .logo img{height:42px}
.boot img,.soon img{width:min(320px,80vw);animation:bob 2s ease-in-out infinite}
.hero{background:#7FD3FF url(/fans/vtv/assets/hub-hero.webp) center/cover no-repeat;min-height:240px}
@media (max-width:640px){.hero{background-image:url(/fans/vtv/assets/hub-hero-m.webp);min-height:300px}}
.hero .hb{background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat;box-shadow:none}
.gcard{background-size:cover!important;background-position:center!important;min-height:170px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.gcard>span:not(.st){max-width:58%}
.g-nt{background-image:url(/fans/vtv/assets/tile-noitu.webp)!important}.g-dt{background-image:url(/fans/vtv/assets/tile-doantu.webp)!important}.g-cc{background-image:url(/fans/vtv/assets/tile-chapcanh.webp)!important}
.iimg{width:78%;height:78%;object-fit:contain;pointer-events:none}.iimg.big{width:64px;height:64px}
h2 .iimg.big{width:44px;height:44px}
.tool{overflow:visible}.tool .lockimg{filter:grayscale(1) brightness(.75);opacity:.6;position:absolute;inset:11%;width:78%;height:78%}.tool .lk{position:absolute;width:40%;height:40%;right:4%;bottom:4%}
.resimg{width:170px;height:170px;object-fit:contain;display:block;margin:-6px auto -4px;animation:pop .35s}
/* Đoán Từ — ô chữ */
.cell{background:url(/fans/vtv/assets/tile-empty.webp) center/100% 100% no-repeat;border:0!important;color:#3B2A7A;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.cell.typing{background-image:url(/fans/vtv/assets/tile-typing.webp)}
.cell.g{background:url(/fans/vtv/assets/tile-blue.webp) center/100% 100% no-repeat;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cell.y{background:url(/fans/vtv/assets/tile-yellow.webp) center/100% 100% no-repeat;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cell.x{background:url(/fans/vtv/assets/tile-red.webp) center/100% 100% no-repeat;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cell.rv{background:url(/fans/vtv/assets/tile-reveal.webp) center/100% 100% no-repeat;color:#1F5FBF}
.cell.sp{background:none}
.legend i{background-size:100% 100%!important}
/* Chắp Cánh */
.cc-stage{background:#7FD3FF url(/fans/vtv/assets/cc-bg-portrait.webp) center/cover no-repeat}
@media (min-aspect-ratio:1/1){.cc-stage{background-image:url(/fans/vtv/assets/cc-bg-landscape.webp)}}
.moves{background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;border:0;box-shadow:none;width:92px;height:92px}
.moves b{color:#3B2A7A;text-shadow:0 1px 0 #fff}.moves small{color:#5B3FD9}
.gear{background:none;box-shadow:none;width:58px;height:58px;padding:0}.gear img{width:100%;height:100%;object-fit:contain}
.bb{background:url(/fans/vtv/assets/bubble-blue.webp) center/100% 100% no-repeat!important;box-shadow:none!important;border:0!important;text-shadow:0 2px 3px rgba(0,0,0,.4)}
.bb.c0{background-image:url(/fans/vtv/assets/bubble-blue.webp)!important}.bb.c1{background-image:url(/fans/vtv/assets/bubble-purple.webp)!important}.bb.c2{background-image:url(/fans/vtv/assets/bubble-pink.webp)!important}
.bb.c3{background-image:url(/fans/vtv/assets/bubble-orange.webp)!important}.bb.c4{background-image:url(/fans/vtv/assets/bubble-green.webp)!important}.bb.c5{background-image:url(/fans/vtv/assets/bubble-yellow.webp)!important}
.bb.sel{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px rgba(255,255,255,.9))}
.bb .wing{position:absolute;top:-8%;width:88%;height:88%;background:none;border-radius:0;opacity:0;transition:opacity .2s;pointer-events:none;z-index:-1}
.bb .wing.l{right:62%;left:auto;transform-origin:100% 60%}.bb .wing.r{left:62%;right:auto;transform-origin:0% 60%}
.bb .wing img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bb .wing img+img{opacity:0}
.bb.fly .wing{opacity:1;animation:none}
.bb.fly .wing.l{animation:flapL .36s ease-in-out infinite}.bb.fly .wing.r{animation:flapR .36s ease-in-out infinite}
.bb.fly .wing img:first-child{animation:fA .36s steps(1) infinite}.bb.fly .wing img+img{animation:fB .36s steps(1) infinite}
@keyframes fA{0%{opacity:1}50%{opacity:0}}@keyframes fB{0%{opacity:0}50%{opacity:1}}
@keyframes flapL{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-14deg) scaleY(.92)}}
@keyframes flapR{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(14deg) scaleY(.92)}}
.bb .trail{position:absolute;left:50%;top:55%;width:80%;height:190%;transform:translateX(-50%);background:url(/fans/vtv/assets/fx-fly-trail.webp) center top/contain no-repeat;opacity:0;pointer-events:none;z-index:-2}
.bb.fly .trail{opacity:.95}
.gname{background:url(/fans/vtv/assets/ribbon-group.webp) center/100% 100% no-repeat;box-shadow:none;color:#fff;padding:22px 74px 26px;border-radius:0;text-shadow:0 2px 2px rgba(60,20,140,.6);font-size:24px}
.ccfx{position:absolute;pointer-events:none;z-index:7}
.ccfx.burst{animation:burst .8s ease-out both}@keyframes burst{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.ccfx.pop{animation:popfx .7s ease-out both}@keyframes popfx{0%{transform:scale(.5);opacity:0}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-10px)}}
.ccfx.dust{z-index:1;animation:dust .7s ease-out both}@keyframes dust{0%{transform:scaleX(.4);opacity:0}30%{opacity:1}100%{transform:scaleX(1.1);opacity:0}}
.lv{background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;box-shadow:none;color:#fff;position:relative;border:0;padding:0;cursor:pointer}
.lv b{font:800 22px 'Baloo 2';color:#5B3FD9;text-shadow:0 1px 0 #fff}.lv.cur b{color:#fff;text-shadow:0 2px 2px rgba(60,20,140,.6)}
.lv small{position:absolute;bottom:-4px;left:0;right:0;display:flex;justify-content:center;gap:1px}.lv small img{width:16px;height:16px}
.lv.lock{opacity:1}

/* v4: header full ngang, chữ cuối trang, thẻ game */
.top{margin:0 -14px;padding:10px 14px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(60,40,140,.08);margin-bottom:12px}
@media (min-width:1008px){.top{margin:0 calc((980px - 100vw)/2 - 0px);padding-left:calc((100vw - 980px)/2 + 14px);padding-right:calc((100vw - 980px)/2 + 14px)}}
.foot{margin:24px auto 0;max-width:560px;text-align:center;font-size:12px;color:#4A4170;background:rgba(255,255,255,.85);border-radius:14px;padding:8px 14px}
.gcard{isolation:isolate;padding:18px}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--gc) 0%,var(--gc) 38%,rgba(0,0,0,0) 66%)}
.gcard>span:not(.st){max-width:50%;font-size:13px;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.gcard b{text-shadow:0 2px 3px rgba(0,0,0,.3)}
.g-nt{--gc:rgba(91,63,217,.96)}.g-dt{--gc:rgba(224,54,86,.95)}.g-cc{--gc:rgba(24,140,110,.95)}
@media (max-width:420px){.gcard>span:not(.st){max-width:54%;font-size:12.5px}.gcard::before{background:linear-gradient(90deg,var(--gc) 0%,var(--gc) 44%,rgba(0,0,0,0) 72%)}}

.ccintro h1{margin:0 0 6px}.ccintro p{margin:0;color:#4A4366;font-size:14px;line-height:1.5}
.lvmap{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
.lv2{aspect-ratio:1;border-radius:14px;border:2px solid #E4DDFB;background:#F6F3FF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;padding:0}
.lv2 b{font:800 20px 'Baloo 2';color:#5B3FD9;line-height:1}
.lv2 small{font-size:11px;font-weight:700;color:#F5A300;letter-spacing:1px;min-height:13px}.lv2 small i{font-style:normal;color:#D9D3EA}
.lv2.done{background:#EAFBF1;border-color:#9EE2BC}.lv2.done b{color:#1E9E5A}
.lv2.cur{background:linear-gradient(135deg,#7B4BE8,#5B3FD9);border-color:#5B3FD9;box-shadow:0 6px 14px rgba(91,63,217,.35);animation:bob 1.6s ease-in-out infinite}.lv2.cur b,.lv2.cur small{color:#fff}
.lv2.lock{background:#F1F0F5;border-color:#E6E4EE;cursor:default;font-size:18px;opacity:.75}

.board{max-width:100%;overflow:hidden;gap:5px}
.brow{display:flex;justify-content:center;gap:3px;flex-wrap:nowrap}
.board .cell{--s:min(48px,calc((min(100vw,600px) - 44px - (var(--n,5) - 1)*3px)/var(--n,5)));border-radius:calc(var(--s)*.22);flex:none}

.rep-box{display:flex;flex-direction:column;align-items:center;gap:8px;background:#F6F3FF;border:1px dashed #C9BCF5;border-radius:14px;padding:10px 12px;margin:10px 0;text-align:center;font-size:14px}
.dt-hint>div+div{margin-top:4px}.dt-lock{font-size:12px;opacity:.7;font-weight:600}