/* Trò chơi ôn tập: giao diện dùng chung cho mọi Unit */
:root{
  --bg:#FFF7E6; --bg2:#FFEFCC; --card:#FFFFFF; --ink:#23314F; --muted:#5F6B85;
  --primary:#2F6FED; --primary-ink:#FFFFFF; --soft:#EAF2FF;
  --accent:#FFB020; --good:#1F9D63; --good-soft:#DFF6EA; --bad:#E5484D; --bad-soft:#FDE7E8;
  --line:#E4E0D6; --shadow:0 4px 0 rgba(35,49,79,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.45 "Baloo 2",system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(circle at 10% 0%,var(--bg2) 0 120px,transparent 121px),radial-gradient(circle at 100% 30%,var(--bg2) 0 90px,transparent 91px)}
#app{max-width:600px;margin:0 auto;padding:12px 16px calc(28px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.en{font-family:"Andika","Baloo 2",sans-serif}
h1,h2,h3{margin:0;line-height:1.15}

/* trang chủ */
.hero{display:flex;align-items:center;gap:12px;padding:8px 0 4px}
.hero .bee{width:84px;flex:none}
.hero h1{font-size:34px;font-weight:800;color:var(--primary)}
.hero p{margin:0;color:var(--muted);font-size:16px}
.hero p b{color:var(--bad);font-size:20px}
.card{background:var(--card);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow);border:2px solid var(--line)}
.namebox{display:flex;align-items:center;gap:10px;margin:12px 0}
.namebox label{font-weight:700;white-space:nowrap}
.namebox input{flex:1;min-width:0;font:inherit;font-size:18px;padding:8px 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.starbar{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 10px;font-weight:700}
.starbar .pill{font-size:20px}
.map{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stop{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow);transition:transform .1s}
.stop:active{transform:translateY(3px);box-shadow:none}
.stop .num{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--primary);font-weight:800}
.stop .ic{font-size:30px;flex:none}
.stop b{display:block;font-size:19px;line-height:1.1}
.stop small{color:var(--muted);font-size:14px}
.stop .tick{margin-left:auto;font-size:22px;color:var(--good);visibility:hidden}
.stop.done{border-color:var(--good)}
.stop.done .num{background:var(--good);color:#fff}
.stop.done .tick{visibility:visible}
.finished{margin:12px 0;text-align:center;background:var(--good-soft);border-color:var(--good)}
details.guide{margin-top:14px}
details.guide summary{font-weight:800;cursor:pointer;font-size:17px}
details.guide ol{padding-left:20px;margin:8px 0}
details.guide li{margin:4px 0}
.linkbtn{color:var(--bad);text-decoration:underline;font-size:15px;padding:6px 0}
.tip{background:var(--bad-soft);border:2px solid var(--bad);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:15px}

/* khung chơi */
.bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.back{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:4px 12px;font-weight:700;box-shadow:var(--shadow)}
.bt{flex:1;font-weight:800;font-size:18px;text-align:center;line-height:1.1}
.pill{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:2px 12px;font-weight:800;white-space:nowrap}
.pill.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.35)}}
.prog{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;margin-bottom:12px}
.prog i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
.ask{text-align:center;font-weight:800;font-size:20px;margin:6px 0 10px}
.ask small{display:block;font-weight:600;color:var(--muted);font-size:15px}

.pic{background:var(--card);border:3px solid var(--line);border-radius:22px;display:grid;place-items:center;box-shadow:var(--shadow);aspect-ratio:1;padding:10px}
.pic svg{width:100%;height:100%}
.big{width:min(76vw,400px);margin:0 auto;padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .pic{padding:6px}
.mid{width:min(72vw,340px);margin:0 auto}
button.pic:active{transform:scale(.97)}
.ok{border-color:var(--good)!important;background:var(--good-soft)!important}
.no{border-color:var(--bad)!important;background:var(--bad-soft)!important;animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

.word{font-family:"Andika",sans-serif;font-weight:700;font-size:56px;text-align:center;line-height:1.1;margin:12px 0 2px;letter-spacing:1px}
.word .b{color:var(--bad)}
.vi{text-align:center;color:var(--muted);font-size:18px;margin:0 0 2px}
.ex{text-align:center;font-size:24px;font-weight:700;margin:0 0 6px;color:var(--primary)}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.btn{background:var(--primary);color:var(--primary-ink);border-radius:16px;padding:10px 18px;font-weight:800;font-size:18px;box-shadow:0 4px 0 rgba(0,0,0,.2);min-height:52px}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.ghost{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:var(--shadow)}
.btn.star{background:var(--accent);color:#3A2A00}
.btn.good{background:var(--good);color:#fff}
.row.tight{gap:8px}
.row.tight .btn{padding:8px 12px;font-size:16px}
.btn[disabled]{opacity:.45;pointer-events:none}
.opts{display:grid;gap:10px;margin-top:14px}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opt{font-family:"Andika",sans-serif;font-weight:700;font-size:28px;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:10px 4px;box-shadow:var(--shadow)}
.opt:active{transform:translateY(3px);box-shadow:none}

.blur svg{filter:blur(18px);transition:filter 8s linear}
.blur.clear svg{filter:blur(0)}
.blur.now svg{transition:filter .3s;filter:blur(0)}

.tiles{display:flex;justify-content:center;gap:8px;margin:14px 0 4px}
.tile{font-family:"Andika",sans-serif;font-weight:700;font-size:44px;width:60px;height:72px;border-radius:14px;background:var(--card);border:3px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow)}
.tile.gap{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.tile.fill{border-style:solid;border-color:var(--good);background:var(--good-soft);color:var(--good)}

.sent{font-family:"Andika",sans-serif;font-size:30px;font-weight:700;text-align:center;margin:12px 0 0}
.sent .blank{display:inline-block;min-width:96px;border-bottom:4px dashed var(--accent);color:var(--good)}

.dots{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:6px}
.dot{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);background:var(--card);font-size:20px}
.dot.on{background:var(--accent);border-color:var(--accent)}

.talk{display:grid;gap:10px}
.line{display:flex;gap:10px;align-items:flex-start}
.line .who{font-size:34px;flex:none;width:44px;text-align:center}
.line .bub{flex:1;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:8px 12px;box-shadow:var(--shadow)}
.line.kid .bub{background:var(--soft)}
.line .role{font-size:14px;color:var(--muted);font-weight:700}
.line .say{font-family:"Andika",sans-serif;font-weight:700;font-size:24px;line-height:1.25}
.spk{font-size:22px;background:var(--card);border:2px solid var(--line);border-radius:12px;width:46px;height:46px;flex:none;align-self:center}
.hint{font-size:15px;color:var(--muted);text-align:center;margin:8px 0}
.chips{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:99px;padding:4px 14px;font-weight:700}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.smallpic{width:min(56vw,240px);margin:0 auto 8px}

.writewrap{background:#fff;border:3px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
canvas{display:block;width:100%;height:min(80vw,320px);touch-action:none}

.coach{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.coach .bee{width:46px;flex:none}
.coach .bubble{flex:1;min-height:40px;background:var(--card);border:2px solid var(--line);border-radius:4px 18px 18px 18px;padding:8px 12px;font-weight:700;box-shadow:var(--shadow);font-size:16px}
.coach.hop .bee{animation:hop .6s}
@keyframes hop{30%{transform:translateY(-14px) rotate(-8deg)}60%{transform:translateY(0)}}

.win{text-align:center}
.win .bee{width:140px;margin:0 auto}
.win h2{font-size:30px;color:var(--primary);margin-top:6px}
.win .stars{font-size:40px;margin:6px 0}
.cert{border:4px dashed var(--accent);border-radius:24px;padding:18px 14px;margin:12px 0;background:var(--card)}
.cf{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;z-index:9;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.hide{display:none!important}

/* ống nhòm */
.scope{position:relative;overflow:hidden}
.scope canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .6s;border-radius:inherit}

/* lật thẻ */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{position:relative;aspect-ratio:4/3;perspective:700px;padding:0;border:0;background:none}
.mcard .in{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.mcard.open .in{transform:rotateY(180deg)}
.mcard .face{position:absolute;inset:0;border-radius:16px;border:3px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mcard .back{background:var(--primary);font-size:40px;border-color:var(--primary)}
.mcard .front{background:var(--card);transform:rotateY(180deg);padding:8px}
.mcard .front svg{width:auto;height:100%;max-width:100%}
.mcard .mword{font-family:"Andika",sans-serif;font-weight:700;font-size:36px}
.mcard .mword .b{color:var(--bad)}
.mcard.ok .front{border-color:var(--good);background:var(--good-soft)}

/* đọc theo nhịp */
.beatnow{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 12px}
.beatnow .pic{width:min(36vw,160px);padding:8px}
.beatword{font-family:"Andika",sans-serif;font-weight:700;font-size:44px;min-width:110px;text-align:center;line-height:1.1}
.beatword.sm{font-size:26px;min-width:0;flex:1}
.beatword .b{color:var(--bad)}
.beatgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.beatgrid .pic{padding:5px;transition:transform .12s,border-color .12s}
.beatgrid .pic.on{border-color:var(--accent);background:var(--soft);transform:scale(1.1)}

/* ===================== MÀU VUI CHO TRẺ + LOGO SGROUP (chị dặn 09/10/2026) ===================== */
:root{color-scheme:light;
  --bg:#FFF6DA; --card:#FFFFFF; --ink:#2B2D5C; --muted:#6A6E9C;
  --primary:#1EA7FD; --primary-dk:#0B7BC6; --primary-ink:#FFFFFF; --soft:#E3F4FF;
  --accent:#FFC233; --accent-dk:#E0A100; --good:#2BC46B; --good-dk:#1E9A52; --good-soft:#DDF8E8;
  --bad:#FF5A5F; --bad-soft:#FFE3E4; --pink:#FF6FAE; --pink-dk:#D9467F; --purple:#8B5CF6;
  --line:#E6E1FA; --shadow:0 5px 0 rgba(43,45,92,.13)}
body{background-color:#FFF6DA;
  background-image:
    radial-gradient(circle at 8% 70px,#fff 0 24px,transparent 25px),radial-gradient(circle at 15% 58px,#fff 0 32px,transparent 33px),radial-gradient(circle at 22% 74px,#fff 0 22px,transparent 23px),
    radial-gradient(circle at 80% 40px,#fff 0 26px,transparent 27px),radial-gradient(circle at 87% 30px,#fff 0 34px,transparent 35px),
    linear-gradient(180deg,#8FD6FF 0,#C9EEFF 180px,#FFF6DA 420px);
  background-repeat:no-repeat}

/* logo + tên trường */
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.brandmark{display:inline-flex;align-items:center;background:#fff;border-radius:16px;padding:6px 12px;box-shadow:0 4px 0 rgba(11,123,198,.25);border:3px solid #fff}
.brandmark img{height:38px;width:auto;display:block}
.brandmark b{display:none;font-weight:800;font-size:22px;letter-spacing:1px;color:#123A8C}
.brandmark b i{font-style:normal;color:#FF8C42}
.brandmark.nologo img{display:none}
.brandmark.nologo b{display:inline}
.brandbar .tag{font-weight:800;color:#0B5A93;font-size:15px;text-align:right;line-height:1.15}

/* trang chủ */
.hero h1{display:inline-block;background:linear-gradient(90deg,var(--pink),#FF8C42);color:#fff;padding:2px 18px;border-radius:999px;box-shadow:0 4px 0 var(--pink-dk);font-size:32px}
.hero p{color:var(--ink);font-weight:700}
.hero p b{color:var(--pink);font-size:24px}
.card{border:3px solid var(--line)}
.namebox{border-color:#FFD66B}
.namebox input{border-color:#FFE7A3;background:#FFFBEA}
.namebox input:focus{outline:none;border-color:var(--accent)}
.stop{--c:var(--primary);border:3px solid var(--c);box-shadow:0 5px 0 var(--c);background:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,#fff),#fff 70%)}
.stop .num{background:var(--c);color:#fff;width:38px;height:38px;font-size:19px}
.stop .ic{font-size:34px}
.stop.done .num{background:var(--good)}
.finished{border-color:var(--good)}
details.guide{border-color:#C9EEFF}

/* khung chơi */
.back{border:3px solid var(--primary);color:var(--primary-dk);box-shadow:0 4px 0 #BFE3FA}
.bt{color:var(--primary-dk)}
.pill{background:#FFF3C4;border:3px solid var(--accent)}
.prog{height:14px;background:#fff;border:2px solid var(--line)}
.prog i{background:linear-gradient(90deg,var(--pink),var(--accent),var(--good),var(--primary))}
.coach .bubble{background:#FFFBEA;border:3px solid var(--accent)}
.pic{border:4px solid #BFE6FF}
.grid2 .pic:nth-child(4n+1){background:#FFF0F6;border-color:#FFC2DD}
.grid2 .pic:nth-child(4n+2){background:#E8F6FF;border-color:#A9DCFF}
.grid2 .pic:nth-child(4n+3){background:#FFF7DB;border-color:#FFE08A}
.grid2 .pic:nth-child(4n+4){background:#E9FBEF;border-color:#A6EBC2}
.grid2 .pic.ok{background:var(--good-soft)!important;border-color:var(--good)!important}
.grid2 .pic.no{background:var(--bad-soft)!important;border-color:var(--bad)!important}
.word{color:var(--ink)}
.word .b{color:var(--pink)}
.ex{color:var(--purple)}
.btn{background:var(--primary);box-shadow:0 5px 0 var(--primary-dk);border-radius:18px}
.btn.good{background:var(--good);box-shadow:0 5px 0 var(--good-dk)}
.btn.star{background:var(--accent);color:#5A3B00;box-shadow:0 5px 0 var(--accent-dk)}
.btn.ghost{background:#fff;color:var(--primary-dk);border:3px solid var(--primary);box-shadow:0 5px 0 #BFE3FA}
.opt{border-width:3px;box-shadow:0 5px 0 var(--oc,#BFE6FF);border-color:var(--oc,#BFE6FF);color:var(--ink)}
.opts .opt:nth-child(3n+1){--oc:#FF9CC8}
.opts .opt:nth-child(3n+2){--oc:#7CCBFF}
.opts .opt:nth-child(3n+3){--oc:#FFD66B}
.opt .b{color:var(--pink)}
.tile{border-color:#BFE6FF}
.dot{border-color:#FFE08A}
.dot.on{background:var(--accent);border-color:var(--accent-dk)}
.chip.on{background:var(--pink);border-color:var(--pink)}
.line .bub{border-color:#FFD0E5}
.line.kid .bub{background:#E8F6FF;border-color:#A9DCFF}
.writewrap{border:4px solid #BFE6FF}
.mcard .back{background:linear-gradient(135deg,var(--purple),var(--primary));border-color:#fff}
.mcard .front{border-color:#BFE6FF}
.beatgrid .pic.on{background:#FFF3C4;border-color:var(--accent)}
.win h2{color:var(--pink)}
.cert{border:5px dashed var(--accent);background:#FFFDF3}
.cert .brandmark{margin-bottom:8px}

/* ===================== NỀN VŨ TRỤ (chị dặn 09/10/2026) ===================== */
body{color:#fff;background:#24206B;background-image:radial-gradient(ellipse at 20% 0%,#3E3AA8 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#6A3FB5 0,transparent 55%),linear-gradient(180deg,#1A1B57 0%,#2C2477 50%,#4A2F92 100%);background-attachment:fixed}
#app{position:relative;z-index:1}
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.space .st{position:absolute;border-radius:50%;background:#fff;opacity:.85;animation:twinkle 2.6s ease-in-out infinite}
.space .st4{position:absolute;color:#FFE27A;line-height:1;animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25;transform:scale(.6)}}
.space .comet{position:absolute;top:12%;left:-20%;width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(18deg);animation:comet 9s linear infinite 2s}
@keyframes comet{0%{left:-20%;top:8%;opacity:0}5%{opacity:1}22%{left:110%;top:40%;opacity:0}100%{left:110%;top:40%;opacity:0}}
.space div{position:absolute}
.space svg{width:100%;height:auto;display:block;overflow:visible}
.sp-moon{top:2%;left:2%;width:clamp(56px,9vw,110px);animation:float 7s ease-in-out infinite}
.sp-saturn{top:4%;right:2%;width:clamp(80px,12vw,150px);animation:float 8s ease-in-out infinite 1s}
.sp-ufo{top:40%;right:1%;width:clamp(70px,10vw,130px);animation:bob 4s ease-in-out infinite}
.sp-astronaut{top:52%;left:1%;width:clamp(60px,8vw,110px);animation:drift 9s ease-in-out infinite}
.sp-rocket{bottom:3%;left:5%;width:clamp(42px,5vw,70px);animation:rocket 6s ease-in-out infinite}
.sp-earth{bottom:4%;right:4%;width:clamp(50px,7vw,90px);animation:float 10s ease-in-out infinite 2s}
.sp-rocket .flame{animation:flame .25s ease-in-out infinite alternate;transform-origin:40px 104px}
.sp-ufo .blink{animation:twinkle 1s steps(2) infinite}.sp-ufo .blink.b2{animation-delay:.5s}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes bob{50%{transform:translate(-10px,-14px) rotate(-4deg)}}
@keyframes drift{50%{transform:translate(10px,-18px) rotate(12deg)}}
@keyframes rocket{50%{transform:translateY(-22px) rotate(4deg)}}
@keyframes flame{to{transform:scaleY(1.25)}}
@media (prefers-reduced-motion:reduce){.space *{animation:none!important}}

/* chữ nằm trên nền tối: màu sáng */
.ask{color:#fff}
.ask small,.hint,.vi{color:#D8DBFF}
.word{color:#fff}
.ex{color:#FFE27A}
.sent,.beatword,.win > h2 + p,.win > p,.starbar > span:first-child,.chips > span{color:#fff}
.hero p{color:#fff}
.hero p b{color:#FFE27A}
.brandbar .tag{color:#CFE3FF}
.bt{color:#fff}
/* khung trắng giữ chữ tối */
.card,.stop,.pic,.opt,.tile,.back,.pill,.btn.ghost,.coach .bubble,.line .bub,.mcard .front,.cert,.dot,.chip,.namebox,.writewrap,details.guide{color:var(--ink)}
.stop small{color:var(--muted)}
.coach .bee{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.hero .bee,.win .bee{filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.prog{border-color:rgba(255,255,255,.5)}
.sent .blank{border-bottom-color:#FFE27A;color:#7CF0A8}

/* ảnh cô Ngọc An, góc phải trên cùng (chị dặn 09/10/2026) */
.teacher{display:flex;flex-direction:column;align-items:center;gap:2px}
.tph{width:72px;height:72px;border-radius:50%;border:4px solid #FFE27A;overflow:hidden;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,226,122,.3),0 4px 12px rgba(0,0,0,.35)}
.tph img{width:100%;height:100%;object-fit:cover;display:block}
.tph i{display:none;font-style:normal;font-size:40px;line-height:1}
.tph.noimg img{display:none}
.tph.noimg i{display:block}
.teacher b{font-size:14px;color:#FFE27A;white-space:nowrap}

/* ===================== 10 DẠNG CHƠI MỚI (09/10/2026) ===================== */
.opts.c2{grid-template-columns:repeat(2,1fr)}
/* ô cửa bí mật */
.reveal{position:relative;overflow:hidden}
.doors{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);border-radius:inherit;overflow:hidden}
.door{background:var(--d);border:2px solid #fff;color:#fff;font-weight:800;font-size:24px;transition:opacity .45s,transform .45s;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.door.open{opacity:0;transform:scale(.5) rotate(10deg);pointer-events:none}
/* cái gì biến mất */
.wmc{transition:background .3s}
.wmc.cover{background:linear-gradient(135deg,var(--purple),var(--primary))!important;border-color:#fff!important}
.wmc.cover svg{visibility:hidden}
.wmc.gone{border-style:dashed!important;background:#fff!important}
.qm{font-size:72px;font-weight:800;color:var(--muted);line-height:1}
/* nối hình với từ */
.match{position:relative;display:grid;grid-template-columns:min(32vw,130px) 1fr;column-gap:70px;row-gap:12px;align-items:center}
.mlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.mpic{padding:6px}
.mpic.sel{border-color:var(--accent)!important;transform:scale(1.06);box-shadow:0 0 0 4px rgba(255,194,51,.5)}
.mpic.ok,.mword.ok{border-color:var(--good)!important;background:var(--good-soft)!important}
.mword{font-size:26px;padding:14px 6px}
/* xếp hình */
.pzboard{position:relative;display:grid;grid-template-columns:repeat(2,1fr);width:min(72vw,300px);aspect-ratio:1;margin:0 auto 14px;background:#fff;border:4px solid #BFE6FF;border-radius:20px;overflow:hidden}
.pzboard.done{border-color:var(--good)}
.pzghost{position:absolute;inset:0;opacity:.13;pointer-events:none;padding:0}
.pzghost svg,.pz-in svg{width:100%;height:100%;display:block}
.pzslot{position:relative;border:2px dashed #C9D2E3;overflow:hidden;background:transparent;padding:0}
.pzslot.ok{border:0}
.pztray{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pzpiece{position:relative;width:min(20vw,84px);aspect-ratio:1;overflow:hidden;background:#fff;border:3px solid #FFD66B;border-radius:12px;padding:0;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.pzpiece.sel{border-color:var(--pink);transform:scale(1.1)}
.pz-in{position:absolute;width:200%;height:200%}
/* sắp chữ */
.tiles.pool{margin-top:6px}
.tile.sp{border:0!important;background:transparent!important;box-shadow:none;width:18px}
.tile.ltr{cursor:pointer;color:var(--ink)}
.tile.ltr.used{opacity:.25}
.tiles{flex-wrap:wrap}
.tiles.sm .tile{width:42px;height:54px;font-size:30px;border-radius:10px}
/* bắt chữ rơi */
.big-l{font-size:32px;color:#FFE27A}
.sky{position:relative;height:min(104vw,430px);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.07);border:3px dashed rgba(255,255,255,.35);touch-action:manipulation}
.cbub{position:absolute;top:0;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 18%,var(--bc) 70%);border:3px solid #fff;font-weight:700;font-size:34px;color:#2B2D5C;box-shadow:0 4px 12px rgba(0,0,0,.3);padding:0}
.cbub.pop{animation:popb .3s forwards}
@keyframes popb{to{transform:scale(1.8);opacity:0}}
.catchinfo{text-align:center;font-weight:800;font-size:20px;margin-top:8px;color:#fff}
/* bingo */
.callbox{display:flex;gap:14px;align-items:center;justify-content:center;margin-bottom:10px}
.callnow{font-weight:700;font-size:36px;color:#fff;min-width:110px;text-align:center}
.callnow .b{color:#FFE27A}
.bingos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bboard{background:#fff;border-radius:16px;padding:6px;color:var(--ink);border:3px solid #BFE6FF}
.bboard.win{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,194,51,.6)}
.bname{text-align:center;font-weight:800;margin-bottom:4px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.bcell{position:relative;aspect-ratio:1;border:2px solid var(--line);border-radius:10px;background:#fff;padding:3px;display:grid;place-items:center;font-size:clamp(11px,3.4vw,16px);font-weight:700;line-height:1.05;color:var(--ink);overflow:hidden}
.bcell svg{width:100%;height:100%}
.bgrid .bcell.on{background:#FFF3C4;border-color:var(--accent)}
.bgrid .bcell.on:not(.free)::after{content:'✔';position:absolute;right:2px;top:0;color:var(--good);font-size:18px;font-weight:800}
.bcell.free{font-size:26px}
/* vòng quay */
.wheelbox{position:relative;width:min(80vw,330px);aspect-ratio:1;margin:0 auto 12px}
.wheel{position:absolute;inset:0;border-radius:50%;border:6px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform 3.4s cubic-bezier(.15,.7,.2,1)}
.wslot{position:absolute;inset:0}
.wico{position:absolute;left:50%;top:5%;width:24%;transform:translateX(-50%)}
.wico svg{width:100%;height:auto}
.wpin{position:absolute;left:50%;top:-18px;transform:translateX(-50%);z-index:3;font-size:34px;color:#FF5A5F;text-shadow:0 2px 0 #fff}
.wgo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:28%;aspect-ratio:1;border-radius:50%;background:var(--pink);color:#fff;font-weight:800;font-size:clamp(14px,4vw,20px);border:5px solid #fff;box-shadow:0 5px 0 var(--pink-dk)}
.wres{text-align:center}
.wres .sent{color:var(--ink)}
/* đua tên lửa */
.track{background:#fff;border-radius:16px;padding:8px 10px;margin-bottom:10px;color:var(--ink)}
.lane{display:flex;align-items:center;gap:8px;margin:4px 0}
.lname{width:62px;font-weight:800;font-size:14px;flex:none}
.road{position:relative;flex:1;height:38px;background:repeating-linear-gradient(90deg,#E3F4FF 0 18px,#fff 18px 36px);border-radius:10px}
.rk{position:absolute;left:0;top:2px;font-size:28px;font-style:normal;transition:left .6s;transform:rotate(45deg)}
.fin{position:absolute;right:2px;top:4px;font-size:24px}
.rpanel{display:grid;grid-template-columns:34px repeat(3,1fr);gap:8px;align-items:center;background:rgba(255,255,255,.12);border-radius:16px;padding:8px;margin-bottom:8px}
.rpanel:empty{display:none}
.pwho{font-size:28px;text-align:center}
.rpic{padding:6px}
/* ong bay chọn hình */
.garden{position:relative;padding-bottom:110px}
.flowers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flower{padding:6px}
.flybee{position:absolute;left:50%;bottom:0;width:90px;margin-left:-45px;transition:transform .7s cubic-bezier(.3,1.4,.5,1);animation:hover 1.6s ease-in-out infinite}
@keyframes hover{50%{margin-bottom:8px}}

/* ảnh thật (ChatGPT) thay cho hình vẽ: nền trắng của ảnh hoà vào màu ô nhờ multiply */
img.photo{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;-webkit-user-drag:none;user-select:none}
.blur img.photo{filter:blur(18px);transition:filter 8s linear}
.blur.clear img.photo{filter:blur(0)}
.blur.now img.photo{transition:filter .3s;filter:blur(0)}
.wmc.cover img.photo{visibility:hidden}
.bcell img.photo,.wico img.photo,.pz-in img.photo,.pzghost img.photo,.mcard .front img.photo{width:100%;height:100%}
.wico img.photo{height:auto;aspect-ratio:1}

/* thẻ chữ cái (sửa 09/10/2026): chữ hoa + chữ thường + 4 từ của Unit */
.lettercard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.bigletter{font-family:"Andika",sans-serif;font-weight:700;font-size:min(30vw,130px);line-height:1;white-space:nowrap}
.bigletter .up{color:var(--pink)}
.bigletter .lo{color:var(--primary);margin-left:.08em}
.lwords{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.lwords span{font-family:"Andika",sans-serif;font-weight:700;font-size:20px;color:var(--ink);background:#FFF3C4;border-radius:999px;padding:2px 12px}
.lwords .b{color:var(--pink)}
.pic .word{color:var(--ink)}

/* đọc theo nhịp (bản 2): thanh lượt + số ô */
.turnbar{text-align:center;font-weight:800;font-size:20px;color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;margin:0 auto 10px;max-width:340px;transition:background .2s}
.turnbar.bee{background:var(--accent);color:#3A2A00}
.turnbar.kid{background:var(--good);color:#fff;animation:pop .4s}
.beatgrid.g4{grid-template-columns:repeat(4,1fr)}
.bcell{position:relative}
.bcell .bn{position:absolute;left:4px;top:2px;font-style:normal;font-size:12px;font-weight:800;color:var(--muted)}
.beatgrid .pic.on .bn{color:var(--pink)}

/* KHÔNG LỘ ĐÁP ÁN (sửa 09/10/2026): nút chọn đáp án, chữ trên thẻ/ô chơi không tô màu chữ cái đầu —
   nếu chỉ một từ bắt đầu bằng chữ của bài thì màu sẽ chỉ ra đáp án. Chỉ tô màu ở chỗ học (thẻ Học từ, chữ to). */
.opt .b,.opts .b,.mword .b,.bcell .b,.bgrid .b,.mcard .mword .b{color:inherit!important}