/* Giao diện trò chơi ôn tập Global Success 4. Phần đầu chép từ 08_TRO-CHOI-ON-TAP/chung/tro-choi.css (bản 12/10/2026, giao diện lớp 1 chị đã duyệt); phần riêng lớp 4 ở khối cuối "LỚP 4". */
: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}

/* ============ 6 BẢNG MÀU XOAY VÒNG THEO BUỔI (12/10/2026) ============
   Chị dặn: "tránh lặp lại game, giao diện nhiều lần". Vẫn là nền vũ trụ (chuẩn đã chốt), mỗi buổi đổi màu trời + màu điểm nhấn.
   UNIT.theme (0–5) do lich-game.js xếp; máy chạy gắn lớp th-N vào <body>. th-0 = giao diện gốc. */
body.th-1{--pink:#14B8A6;--pink-dk:#0E8C7E;--accent:#FFC23D;background-color:#0E3B4F;background-image:radial-gradient(ellipse at 20% 0%,#1C7A8C 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#1F5FA8 0,transparent 55%),linear-gradient(180deg,#0B2A45 0%,#12466A 55%,#1A6A86 100%)}
body.th-2{--pink:#F97316;--pink-dk:#C2560C;--accent:#FFD43B;background-color:#2B1446;background-image:radial-gradient(ellipse at 20% 0%,#7A2E8E 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#C2410C 0,transparent 50%),linear-gradient(180deg,#24103F 0%,#4A1D5E 55%,#7A2E5E 100%)}
body.th-3{--pink:#2F6FED;--pink-dk:#1E4FB8;--accent:#FFB020;background-color:#0D1B4C;background-image:radial-gradient(ellipse at 15% 0%,#2E4FC4 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#0EA5E9 0,transparent 50%),linear-gradient(180deg,#081440 0%,#122A78 55%,#1D3FA0 100%)}
body.th-4{--pink:#22C55E;--pink-dk:#15803D;--accent:#FDE047;background-color:#0F2E2A;background-image:radial-gradient(ellipse at 20% 0%,#16815F 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#3F6212 0,transparent 50%),linear-gradient(180deg,#0B2422 0%,#134236 55%,#1E5C3F 100%)}
body.th-5{--pink:#E11D74;--pink-dk:#A8145A;--accent:#FFB4D6;background-color:#3A0F3F;background-image:radial-gradient(ellipse at 20% 0%,#9D2A8F 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#5B21B6 0,transparent 55%),linear-gradient(180deg,#2A0B33 0%,#5A1A5E 55%,#7E2A86 100%)}
body.th-1 .hero h1{background:linear-gradient(90deg,var(--pink),#3B82F6)}
body.th-2 .hero h1{background:linear-gradient(90deg,var(--pink),#E11D74)}
body.th-3 .hero h1{background:linear-gradient(90deg,var(--pink),#8B5CF6)}
body.th-4 .hero h1{background:linear-gradient(90deg,var(--pink),#0EA5E9)}
body.th-5 .hero h1{background:linear-gradient(90deg,var(--pink),#F97316)}
body[class*="th-"] .coach .bubble{border-color:var(--accent)}
body[class*="th-"] .pic{border-color:color-mix(in srgb,var(--pink) 35%,#fff)}

/* ===================== LỚP 4 (Global Success 4, 12/10/2026) ===================== */
.g4vi{font-size:15px!important;opacity:.9}
.emo{font-size:clamp(64px,34vw,150px);line-height:1;display:block;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.grid2 .emo{font-size:clamp(46px,20vw,84px)}
.pic .flag{width:92%;height:auto}
.pic .clock{width:100%;height:100%}
.g4card{display:grid;place-items:center}
.bigword{font-family:"Andika",sans-serif;font-weight:700;font-size:clamp(34px,11vw,60px);color:var(--purple);text-align:center;line-height:1.1;padding:10px}
body.g4 .word{font-size:clamp(30px,10vw,48px)}
body.g4 .ex{font-size:22px}
body.g4 .opt{font-size:21px;line-height:1.25;padding:12px 8px}
.g4pat{display:flex;flex-direction:column;gap:10px;width:100%;background:#fff;border-radius:22px;padding:16px;border:4px solid #BFE6FF;box-shadow:var(--shadow);text-align:left}
.g4pat .pq,.g4pat .pa{font-size:24px;font-weight:700;padding:10px 14px;border-radius:18px;max-width:88%;color:var(--ink)}
.g4pat .pq{background:#FFF0F6;border:3px solid #FFC2DD;border-bottom-left-radius:4px}
.g4pat .pa{background:#E8F6FF;border:3px solid #A9DCFF;align-self:flex-end;border-bottom-right-radius:4px}
.gap{display:inline-block;min-width:54px;padding:0 8px;border-bottom:4px solid #FFE27A;color:#7CF0A8;text-align:center}
.gap.empty{color:#FFE27A}
.g4chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0}
.g4chips span{background:#F1ECFF;border-radius:999px;padding:3px 12px;font-weight:700;font-size:16px}
.sd-spk{background:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;box-shadow:0 3px 0 rgba(0,0,0,.2);flex:none}

/* Bắn tên lửa điền từ */
.sh-scene{position:relative;border-radius:22px;overflow:hidden;padding:10px 8px 96px;border:4px solid #7C6CFF;
  background:radial-gradient(circle at 20% 15%,rgba(124,203,255,.35) 0 2px,transparent 3px) 0 0/46px 46px,radial-gradient(circle at 70% 60%,rgba(255,255,255,.5) 0 1.5px,transparent 2.5px) 0 0/38px 38px,linear-gradient(180deg,#120B3A,#2B1A6E 70%,#3B2A8F)}
.sh-top{display:flex;justify-content:flex-end;font-size:20px}
.sh-sent{background:#fff;color:var(--ink);border-radius:16px;padding:10px 12px;font-size:23px;font-weight:700;text-align:center;line-height:1.35;margin:4px 0 12px;box-shadow:0 4px 0 #B79CFF}
.sh-sent .gap{color:var(--good);border-bottom-color:#FFB020}
.sh-sent .gap.empty{color:#FF8C42}
.sh-sent.done{box-shadow:0 4px 0 var(--good)}
.sh-row{display:flex;justify-content:space-around;gap:6px;align-items:flex-start;min-height:170px}
.sh-rk{flex:1;max-width:33%;display:flex;flex-direction:column;align-items:center;animation:sh-bob 2.2s ease-in-out infinite;animation-delay:var(--d);touch-action:manipulation}
.sh-body{width:46px;display:block}
.sh-body svg{width:100%;height:auto;display:block}
.sh-lbl{margin-top:-4px;background:#FFE27A;color:var(--ink);border:3px solid #fff;border-radius:14px;padding:6px 8px;font-weight:700;font-size:19px;line-height:1.15;box-shadow:0 4px 0 rgba(0,0,0,.3);word-break:break-word}
.sh-rk.no{background:none!important;border:0!important}
.sh-rk.no .sh-lbl{background:var(--bad-soft);border-color:var(--bad);animation:shake .4s}
.sh-rk.boom{animation:sh-boom .7s forwards}
@keyframes sh-bob{50%{transform:translateY(-10px)}}
@keyframes sh-boom{0%{transform:scale(1)}40%{transform:scale(1.25);filter:brightness(1.6)}100%{transform:scale(.2) translateY(-60px);opacity:0}}
.sh-ship{position:absolute;left:50%;bottom:6px;width:96px;transform:translateX(-50%)}
.sh-ship svg{width:100%;height:auto;display:block}
.sh-laser{position:absolute;height:5px;border-radius:5px;background:linear-gradient(90deg,#7CF0FF,#fff,#FF6FAE);transform-origin:0 50%;opacity:0;pointer-events:none;box-shadow:0 0 10px #7CF0FF}
.sh-laser.on{animation:sh-zap .35s ease-out}
@keyframes sh-zap{0%{opacity:1}100%{opacity:0}}

/* Nhắn tin hỏi – đáp */
.ch-phone{background:#1B1B2F;border-radius:34px;padding:12px 10px 12px;border:4px solid #3A3A5C;box-shadow:0 8px 0 rgba(0,0,0,.3)}
.ch-head{display:flex;align-items:center;gap:8px;background:#fff;border-radius:22px 22px 10px 10px;padding:8px 12px;color:var(--ink)}
.ch-head small{color:var(--good);font-weight:700;margin-left:auto;font-size:13px}
.ch-av{font-size:26px;line-height:1;flex:none}
.ch-avb{font-size:32px}
.ch-list{background:#EAF2FF;height:min(30vh,250px);overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.ch-msg{display:flex;align-items:flex-end;gap:6px}
.ch-msg.me{justify-content:flex-end}
.ch-b{background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:8px 12px;font-size:20px;font-weight:700;max-width:82%;box-shadow:0 2px 0 rgba(0,0,0,.08);animation:popb .3s}
.ch-msg.me .ch-b{background:#2BC46B;color:#fff;border-radius:18px 18px 4px 18px}
.ch-b i{font-style:normal;font-size:12px;margin-left:6px;opacity:.85}
.ch-typing{display:inline-flex;gap:4px;padding:12px 14px}
.ch-typing i{width:8px;height:8px;border-radius:50%;background:#9AA8C2;animation:twinkle 1s infinite;margin:0}
.ch-typing i:nth-child(2){animation-delay:.2s}.ch-typing i:nth-child(3){animation-delay:.4s}
.ch-reply{display:grid;gap:8px;background:#fff;border-radius:10px 10px 22px 22px;padding:10px}
.ch-reply.sent{opacity:.45;pointer-events:none}
.ch-opt{background:#F3F6FF;border:3px solid #BFD3FF;border-radius:16px;padding:10px 12px;font-size:20px;font-weight:700;text-align:left;color:var(--ink);box-shadow:0 3px 0 #BFD3FF}
.ch-opt.no{background:var(--bad-soft);border-color:var(--bad);animation:shake .4s}
.ch-phone .row.tight{margin-top:8px}

/* Sắp xếp câu */
.od-scene{background:linear-gradient(180deg,#FFF7DB,#FFE9B8);border:4px solid #FFD66B;border-radius:22px;padding:12px 10px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.od-line{min-height:78px;background:#fff;border:3px dashed #F5B800;border-radius:16px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--ink)}
.od-line.ok{border-style:solid;border-color:var(--good);background:var(--good-soft)}
.od-line.no{animation:shake .4s;border-color:var(--bad)}
.od-ph{color:#B8A36A;font-weight:700}
.od-p{font-size:26px;font-weight:800;color:var(--ink)}
.od-done{font-size:24px;font-weight:700;color:#157048}
.od-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.od-tile{--c:#7CCBFF;background:#fff;border:3px solid var(--c);box-shadow:0 4px 0 var(--c);border-radius:14px;padding:8px 12px;font-size:22px;font-weight:700;color:var(--ink);min-height:50px}
.od-tile:active{transform:translateY(3px);box-shadow:none}
.od-tile.used{visibility:hidden}

/* Đoán bóng */
.sd-scene{border-radius:22px;padding:12px 10px 14px;border:4px solid #fff;background:radial-gradient(circle at 85% 12%,#FFF3B0 0 22px,transparent 23px),linear-gradient(180deg,#6A5AE0,#9C7BFF 60%,#C7B5FF);box-shadow:0 6px 0 rgba(0,0,0,.18)}
.sd-sign{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--ink);border-radius:18px;padding:8px 12px;font-size:30px;font-weight:700;margin:0 auto 12px;max-width:94%;box-shadow:0 4px 0 #4B3BB5}
.sd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sd-cell{background:rgba(255,255,255,.88);border-radius:18px;aspect-ratio:1;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.sd-cell .emo{font-size:clamp(40px,15vw,70px);filter:brightness(0);opacity:.82;transition:filter .5s,opacity .5s}
.sd-cell.lit{background:#FFFBE6;border-color:#FFD43B}
.sd-cell.lit .emo{filter:none;opacity:1}
.sd-cell.pop{animation:pop .5s}
.sd-cell.no{animation:shake .4s;border-color:var(--bad)}

/* Đánh vần */
.dv-card{background:#fff;border-radius:22px;padding:10px;border:4px solid #A6EBC2;box-shadow:var(--shadow);color:var(--ink)}
.dv-card .vi{color:var(--muted);font-weight:700;font-size:20px}
.dv-pic .flag,.dv-pic .clock{width:100%;height:auto}
.dv-pic{width:min(46vw,180px);margin:0 auto;padding:6px 0 2px}
.dv-pic .emo{font-size:clamp(56px,22vw,92px);line-height:1.15}
.dv-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:14px 0 6px}
.dv-slots.ok .dv-slot{background:var(--good-soft);border-color:var(--good)}
.dv-slots.no{animation:shake .4s}
.dv-slot{width:36px;height:46px;border-radius:10px;background:#fff;border:3px solid #BFE6FF;display:grid;place-items:center;font-size:26px;font-weight:700;color:var(--ink)}
.dv-slot.on{border-color:#7CCBFF;background:#E8F6FF}
.dv-slot.fix{border-color:transparent;background:transparent;color:#fff;width:14px}
.dv-gap{width:14px}
.dv-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.dv-tile{width:50px;height:54px;border-radius:14px;background:#FFF7DB;border:3px solid #FFD66B;box-shadow:0 4px 0 #F5B800;font-size:28px;font-weight:700;color:var(--ink)}
.dv-tile.used{visibility:hidden}
.dv-tile:active{transform:translateY(3px);box-shadow:none}

/* Đúng hay sai */
.tf-card{position:relative;background:#fff;border-radius:22px;padding:14px;border:4px solid #BFE6FF;box-shadow:var(--shadow);text-align:center;color:var(--ink)}
.tf-card .sd-spk{position:absolute;right:10px;top:10px;background:#E8F6FF}
.tf-pic{width:min(56vw,220px);margin:0 auto}
.tf-pic .emo{font-size:clamp(70px,30vw,130px)}
.tf-q{font-size:22px;font-weight:700;color:var(--purple);margin:6px 34px 8px}
.tf-s{font-size:25px;font-weight:700;margin-top:8px}
.tf-fix{margin-top:10px;background:var(--good-soft);border-radius:12px;padding:6px 10px;font-size:21px;font-weight:700;color:#157048}
.tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tf-b{border-radius:22px;padding:12px 6px;font-size:40px;font-weight:800;color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1}
.tf-b span{font-size:20px;margin-top:4px}
.tf-b.yes{background:#2BC46B;box-shadow:0 6px 0 #1E9A52}
.tf-b.no2{background:#FF5A5F;box-shadow:0 6px 0 #C93B40}
.tf-b.ok{outline:5px solid #FFE27A}
.tf-b.no{animation:shake .4s}

/* Kéo co */
.tg-scene{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#9BE7FF 0 45%,#7ED957 45%);border:4px solid #fff;border-radius:22px;padding:14px 8px;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.tg-team{font-size:40px;text-align:center;line-height:1;flex:none;width:68px}
.tg-team small{display:block;font-size:13px;font-weight:800;color:#1B4E1B;margin-top:4px}
.tg-rope{flex:1;height:10px;border-radius:6px;background:repeating-linear-gradient(45deg,#C68B48 0 8px,#9C6A33 8px 16px);position:relative;display:grid;place-items:center}
.tg-knot{font-style:normal;font-size:30px;margin-top:-30px;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.tg-q{background:#fff;color:var(--ink);border-radius:18px;padding:12px;font-size:23px;font-weight:700;text-align:center;margin-top:12px;box-shadow:var(--shadow)}
.tg-q .gap{color:var(--good);border-bottom-color:#FFB020}
.tg-q .gap.empty{color:#FF8C42}
.tg-big{font-size:80px}
.talk .say .gap{color:var(--purple);border-bottom-color:var(--purple)}
.opt.ok{background:var(--good-soft);border-color:var(--good);--oc:var(--good)}
.opt.no{animation:shake .4s;border-color:var(--bad);--oc:var(--bad)}

/* ===================== LỚP 4 · ĐỢT 2 (12/10/2026): nhạc nền, gõ đáp án, 8 dạng chơi mới ===================== */
.mus{background:#fff;border-radius:999px;width:40px;height:40px;font-size:20px;box-shadow:0 3px 0 rgba(0,0,0,.2);flex:none;margin-left:auto;margin-right:6px}
/* ô gõ đáp án */
.ty-box{display:flex;gap:8px;margin:14px 0 4px}
.ty-in{flex:1;min-width:0;font-size:24px;font-weight:700;padding:10px 14px;border-radius:16px;border:4px solid #FFD66B;background:#fff;color:var(--ink);outline:none;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.ty-in:focus{border-color:#1EA7FD}
.ty-in.ok{border-color:var(--good);background:var(--good-soft)}
.ty-in.no{animation:shake .4s;border-color:var(--bad)}
.ty-go{flex:none;width:62px;border-radius:16px;background:var(--good);color:#fff;font-size:28px;font-weight:800;box-shadow:0 5px 0 var(--good-dk)}
.ty-go:active{transform:translateY(3px);box-shadow:none}
.ty-hint{min-height:22px;text-align:center;color:#FFE27A;font-weight:700;font-size:17px;margin:2px 0}
.ty-hint b{color:#7CF0A8}
/* bắn tên lửa: gợi ý + vòng 2 */
.sh-top{justify-content:space-between;align-items:center}
.sh-badge{background:rgba(255,255,255,.15);color:#FFE27A;font-weight:800;font-size:13px;border-radius:999px;padding:2px 10px}
.sh-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;font-size:18px;margin:-4px 0 8px}
.sh-hp{width:46px;height:46px;display:grid;place-items:center;background:#fff;border-radius:12px}
.sh-hp .emo{font-size:32px}.sh-hp svg{width:100%;height:auto}
.sh-row.one{justify-content:center;min-height:120px}
.sh-rk.big{max-width:none;flex:none}
.sh-rk.big .sh-body{width:60px}
.sh-scene.r2{border-color:#FFB020}
.sh-scene .ty-box{margin:4px 0}
.sh-scene .ty-hint{color:#FFE27A}
.sh-scene.r2{padding-bottom:104px}
/* viết lên bảng */
.cb-board{position:relative;background:linear-gradient(160deg,#2F6B4F,#245740);border:12px solid #B9772F;border-radius:14px;padding:18px 14px 30px;box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 6px 0 #8A5320;color:#F4FFF4;min-height:170px}
.cb-tally{position:absolute;right:10px;top:4px;font-size:14px;color:#CFEFD6;letter-spacing:2px}
.cb-sent{font-family:"Andika",sans-serif;font-size:26px;line-height:1.45;text-align:center;text-shadow:0 0 1px #fff}
.cb-sent .gap{color:#FFE27A;border-bottom-color:#fff}
.cb-sent .gap.empty{color:#FFB3C7}
.cb-board.done .cb-sent .gap{color:#9CFFB8}
.cb-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-weight:700;color:#FFE9A8;font-size:18px}
.cb-hint.gr{color:#CFEFD6;font-size:15px}
.cb-hp{width:48px;height:48px;background:#fff;border-radius:12px;display:grid;place-items:center}
.cb-hp .emo{font-size:34px}.cb-hp svg{width:100%;height:auto}
.cb-chalk{position:absolute;left:14px;bottom:-4px;width:46px;height:9px;background:#fff;border-radius:3px;box-shadow:58px 0 0 #FFB3C7,108px 0 0 #FFE27A}
/* nghe và gõ */
.dc-radio{background:linear-gradient(180deg,#FF8C42,#F06A2A);border-radius:26px;padding:16px 12px 12px;border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.dc-wave{display:flex;justify-content:center;align-items:center;gap:6px;height:70px;background:#2B1A6E;border-radius:16px;margin-bottom:10px}
.dc-wave i{width:8px;height:14px;border-radius:4px;background:#7CF0A8}
.dc-radio.on .dc-wave i{animation:dc-bar .5s ease-in-out infinite alternate}
.dc-wave i:nth-child(2){animation-delay:.1s}.dc-wave i:nth-child(3){animation-delay:.2s}.dc-wave i:nth-child(4){animation-delay:.3s}.dc-wave i:nth-child(5){animation-delay:.15s}.dc-wave i:nth-child(6){animation-delay:.25s}.dc-wave i:nth-child(7){animation-delay:.05s}
@keyframes dc-bar{to{height:52px}}
.dc-tip{min-height:10px;text-align:center;color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
.dc-pic{width:52px;height:52px;background:#fff;border-radius:12px;display:grid;place-items:center}
.dc-pic .emo{font-size:36px}.dc-pic svg{width:100%;height:auto}
/* bóng bay */
.bl-sky{position:relative;overflow:hidden;border-radius:22px;padding:14px 10px 10px;border:4px solid #fff;background:linear-gradient(180deg,#7FD3FF,#CFF0FF 70%,#E9FFF0)}
.bl-cloud{position:absolute;background:#fff;border-radius:99px;height:22px;opacity:.9}
.bl-cloud.c1{width:90px;left:6%;top:18px;animation:tr-drift 16s linear infinite alternate}
.bl-cloud.c2{width:70px;right:8%;top:60px;animation:tr-drift 12s linear infinite alternate-reverse}
@keyframes tr-drift{to{transform:translateX(30px)}}
.bl-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:6px 6px 26px}
.bl-b{position:relative;aspect-ratio:.86;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75) 0 10%,transparent 11%),var(--c);box-shadow:inset -10px -12px 0 rgba(0,0,0,.12),0 6px 0 rgba(0,0,0,.1);animation:bl-bob 2.6s ease-in-out infinite;animation-delay:var(--d);display:grid;place-items:center;touch-action:manipulation}
.bl-b::after{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-7px;border:7px solid transparent;border-top:9px solid var(--c)}
.bl-str{position:absolute;bottom:-34px;left:50%;width:2px;height:28px;background:#7A869C}
.bl-in{width:62%;aspect-ratio:1;background:rgba(255,255,255,.92);border-radius:50%;display:grid;place-items:center;padding:6px;color:var(--ink)}
.bl-in .emo{font-size:clamp(34px,13vw,58px)}.bl-in svg{width:100%;height:auto}
.bl-in.txt{width:84%;aspect-ratio:auto;border-radius:16px;font-size:19px;font-weight:700;padding:8px 6px;line-height:1.15}
.bl-b.no{animation:shake .4s}
.bl-b.pop{animation:bl-pop .45s forwards}
@keyframes bl-bob{50%{transform:translateY(-10px)}}
@keyframes bl-pop{40%{transform:scale(1.25)}100%{transform:scale(.1);opacity:0}}
.bl-sky .row.tight{margin-top:16px}
/* rung chuông vàng */
.qz-stage{position:relative;border-radius:22px;padding:14px 12px;border:4px solid #FFD43B;color:#fff;
  background:radial-gradient(ellipse at 20% 0%,rgba(255,236,150,.35),transparent 45%),radial-gradient(ellipse at 80% 0%,rgba(255,236,150,.3),transparent 45%),linear-gradient(180deg,#7A0F2E,#3E0A26)}
.qz-bell{position:absolute;right:10px;top:4px;font-size:40px;transform-origin:50% 10%}
.qz-bell.ring{animation:qz-ring .15s ease-in-out 6 alternate}
@keyframes qz-ring{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.qz-score{font-weight:800;color:#FFE27A;font-size:16px}
.qz-time{height:12px;background:rgba(255,255,255,.2);border-radius:8px;overflow:hidden;margin:8px 52px 12px 0}
.qz-time i{display:block;height:100%;background:linear-gradient(90deg,#2BC46B,#FFD43B,#FF5A5F);animation:qz-t linear forwards;transform-origin:left}
.qz-time.stop i{animation-play-state:paused}
@keyframes qz-t{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.qz-q{background:#fff;color:var(--ink);border-radius:16px;padding:12px;font-size:22px;font-weight:700;text-align:center;line-height:1.35}
.qz-q small{display:block;color:var(--purple);font-size:16px}
.qz-q .gap{color:var(--good);border-bottom-color:#FFB020}.qz-q .gap.empty{color:#FF8C42}
.qz-opts{display:grid;gap:10px;margin-top:12px}
.qz-o{display:flex;align-items:center;gap:10px;text-align:left;background:#1B2A6B;color:#fff;border:3px solid #FFD43B;border-radius:999px;padding:10px 14px;font-size:20px;font-weight:700}
.qz-o b{flex:none;width:32px;height:32px;border-radius:50%;background:#FFD43B;color:#3E0A26;display:grid;place-items:center;font-family:"Baloo 2",sans-serif}
.qz-o.ok{background:#1E9A52;border-color:#9CFFB8}
.qz-o.no{animation:shake .4s;background:#A8182E}
/* cứu phi hành gia */
.hm-scene{position:relative;border-radius:22px;padding:12px;border:4px solid #7C6CFF;min-height:250px;overflow:hidden;
  background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.6) 0 1.5px,transparent 2.5px) 0 0/40px 40px,linear-gradient(180deg,#0E0A2E,#24186A)}
.hm-station{position:absolute;left:10px;top:8px;font-size:44px}
.hm-astro{position:absolute;left:70px;top:46px;width:60px;transition:transform .6s}
.hm-astro svg{width:100%;height:auto}
.hm-astro.home{transform:translate(-50px,-30px) scale(.7)!important}
.hm-oxy{position:absolute;right:10px;top:12px;display:flex;gap:4px}
.hm-oxy i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#7CCBFF);box-shadow:0 0 6px #7CCBFF}
.hm-oxy i.out{background:rgba(255,255,255,.12);box-shadow:none}
.hm-clue{display:flex;align-items:center;justify-content:center;gap:8px;margin:118px 0 8px;color:#FFE27A;font-size:21px;font-weight:700}
.hm-pic{width:50px;height:50px;background:#fff;border-radius:12px;display:grid;place-items:center}
.hm-pic .emo{font-size:34px}.hm-pic svg{width:100%;height:auto}
.hm-word{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.hm-s{width:30px;height:40px;border-bottom:4px solid #fff;display:grid;place-items:center;font-size:26px;font-weight:700;color:#fff}
.hm-s.fix{border-bottom-color:transparent;width:12px}
.hm-gap{width:14px}
.hm-keys{margin-top:12px;display:grid;gap:6px}
.hm-keys>div{display:flex;justify-content:center;gap:4px}
.hm-k{width:calc((100% - 36px)/10);max-width:40px;height:46px;border-radius:10px;background:#fff;color:var(--ink);font-size:21px;font-weight:700;box-shadow:0 3px 0 #9AA8C2}
.hm-k.ok{background:var(--good);color:#fff;box-shadow:none}
.hm-k.bad{background:#5A5F7A;color:#AEB4CC;box-shadow:none}
/* tìm từ ẩn */
.ws-wrap{background:linear-gradient(180deg,#E9F9D6,#C9EDA6);border:4px solid #6FBF4A;border-radius:20px;padding:8px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.ws-grid{display:grid;gap:3px}
.ws-c{aspect-ratio:1;border-radius:8px;background:#fff;color:#2D4A1E;font-weight:800;font-size:clamp(15px,4.6vw,22px);display:grid;place-items:center;padding:0}
.ws-c.sel{background:#FFE27A;transform:scale(1.12)}
.ws-c.got{background:var(--c);color:#fff}
.ws-c.hint{animation:ws-blink .5s 4}
@keyframes ws-blink{50%{background:#FF6FAE;color:#fff}}
.ws-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.ws-it{background:#fff;color:var(--ink);border-radius:999px;padding:4px 12px;font-weight:700;font-size:15px}
.ws-it.got{background:var(--good-soft);text-decoration:none;color:#157048}
/* lật thẻ */
.mm-table{background:radial-gradient(circle at 50% 40%,#2FA36B,#1B6E47);border:6px solid #8A5320;border-radius:24px;padding:10px;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mm-c{position:relative;aspect-ratio:.82;border-radius:14px;perspective:600px;padding:0;background:none}
.mm-back,.mm-front{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .4s;padding:4px}
.mm-back{background:repeating-linear-gradient(45deg,#FF6FAE 0 10px,#FF8FC0 10px 20px);border:3px solid #fff;font-size:28px}
.mm-front{background:#fff;border:3px solid #FFD66B;transform:rotateY(180deg);color:var(--ink);text-align:center}
.mm-front.en b{font-size:15px;line-height:1.1;word-break:break-word}
.mm-front.vi span{font-size:12px;font-weight:700;line-height:1.15}
.mm-front i{font-style:normal;font-size:26px}
.mm-c.open .mm-back{transform:rotateY(180deg)}
.mm-c.open .mm-front{transform:rotateY(0)}
.mm-c.ok .mm-front{border-color:var(--good);background:var(--good-soft)}

/* ===================== LỚP 4 · ĐỢT 3 (12/10/2026): dạng bài kiểu IOE, 4 kỹ năng ===================== */
.skt{font-style:normal;display:inline-block;background:var(--k);color:#fff;border-radius:999px;padding:0 7px;font-size:11px;font-weight:800;letter-spacing:.5px;margin-right:2px;vertical-align:1px}
/* nghe và điền */
.lf-card{position:relative;background:linear-gradient(180deg,#E6F4FF,#C9E8FF);border:4px solid #fff;border-radius:22px;padding:16px 12px 12px;box-shadow:0 6px 0 rgba(0,0,0,.18);color:var(--ink)}
.lf-ear{position:absolute;right:10px;top:-14px;font-size:38px}
.lf-sent{font-size:24px;font-weight:700;text-align:center;line-height:1.5;margin-bottom:6px}
.gap.lf{color:#1B4E7A;letter-spacing:2px;border-bottom:0;font-family:monospace}
.lf-sent .gap.ok{color:var(--good)}
/* đọc hiểu */
.rd-paper{background:#FFFDF4;border-radius:14px;padding:14px 14px 10px;color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.18);border-left:10px solid #FF8C42;
  background-image:repeating-linear-gradient(180deg,transparent 0 29px,#E8E2CC 29px 30px)}
.rd-title{font-weight:800;font-size:20px;color:#C2560C;margin-bottom:4px}
.rd-text{font-size:19px;line-height:30px}
.rd-q{background:#fff;border-radius:18px;padding:12px;margin-top:14px;color:var(--ink);border:3px solid #A6EBC2;box-shadow:var(--shadow)}
.rd-n{font-weight:800;color:var(--good-dk);font-size:14px}
.rd-qs{font-size:21px;font-weight:700;margin:4px 0 2px}
.rd-q .tf-b{font-size:30px;padding:8px 6px}
.rd-q .opts{margin-top:8px}
/* viết câu từ gợi ý */
.bd-card{background:linear-gradient(180deg,#FFF3E0,#FFE0B8);border:4px solid #fff;border-radius:22px;padding:16px 12px;box-shadow:0 6px 0 rgba(0,0,0,.18);color:var(--ink);text-align:center}
.bd-cues{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.bd-cues span{background:#fff;border:3px solid #FFB38A;border-radius:12px;padding:4px 10px;font-size:22px;font-weight:700}
.bd-cues i{font-style:normal;color:#C2560C;font-weight:800;font-size:20px}
.bd-tip{margin:10px 0 0;color:#8A4B1A;font-size:14px;font-weight:700}
.bd-ok{margin-top:10px;background:var(--good-soft);color:#157048;border-radius:12px;padding:6px 10px;font-size:21px;font-weight:700}
/* tìm lỗi sai */
.mk-scene{position:relative;background:linear-gradient(160deg,#3B2A8F,#5B3FD1);border-radius:22px;padding:22px 12px 16px;border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.mk-glass{position:absolute;right:8px;top:-18px;font-size:42px;transform:rotate(-15deg)}
.mk-sent{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mk-w{background:#fff;color:var(--ink);border-radius:12px;padding:6px 10px;font-size:22px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.mk-w.bad{background:var(--bad);color:#fff;text-decoration:line-through}
.mk-w.no{animation:shake .4s}
.mk-good{background:var(--good-soft);color:#157048;border-radius:12px;padding:6px 12px;font-size:23px;font-weight:700}
.mk-lbl{color:#fff;text-align:center;font-weight:700;margin:12px 0 0}
/* chọn từ khác loại */
.od2-shelf{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:linear-gradient(180deg,#C98A4B,#A86A30);border-radius:22px;padding:14px;border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.od2-c{background:#FFFBEA;border-radius:18px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 #7A4A1E;color:var(--ink)}
.od2-c i{font-style:normal;font-size:40px;line-height:1}
.od2-c b{font-size:21px}
.od2-c.out{animation:od2-out .8s forwards;background:#FFE27A}
.od2-c.no{animation:shake .4s}
@keyframes od2-out{30%{transform:scale(1.15) rotate(-6deg)}100%{transform:translateY(-14px) scale(1.05)}}
.od2-why{min-height:30px;color:#FFE27A;text-align:center;font-weight:700;font-size:18px;margin-top:12px}
/* luyện nói */
.sk-stage{background:radial-gradient(circle at 50% 0,#FFE9A8,transparent 60%),linear-gradient(180deg,#FF6FAE,#C2367A);border-radius:22px;padding:16px 12px 12px;border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.2);text-align:center}
.sk-mic{font-size:44px}
.sk-sent{background:#fff;color:var(--ink);border-radius:18px;padding:12px;font-size:25px;font-weight:700;line-height:1.35;margin:6px 0 10px}
.btn.rec{background:#FF5A5F;box-shadow:0 5px 0 #C93B40}
.sk-note{color:#FFF1F7;font-size:14px;font-weight:700;margin:8px 0 0}
/* vòng quay hỏi – đáp */
.wh-box{position:relative;width:min(78vw,300px);aspect-ratio:1;margin:6px auto 4px}
.wh-wheel{width:100%;height:100%;border-radius:50%;border:8px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.25);transition:transform 3s cubic-bezier(.15,.8,.2,1);position:relative}
.wh-wheel b{position:absolute;left:50%;top:50%;width:30px;margin:-15px 0 0 -15px;height:30px;text-align:center;color:#fff;font-size:22px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.3);transform-origin:50% 50%}
.wh-pin{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:34px;color:#FFE27A;z-index:2;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.wh-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#fff;color:#FF5A5F;font-weight:800;font-size:17px;box-shadow:0 4px 0 rgba(0,0,0,.25);border:4px solid #FFE27A}
.wh-card{background:#fff;border-radius:20px;padding:12px;margin-top:10px;color:var(--ink);text-align:center;box-shadow:var(--shadow)}
.wh-q{font-size:23px;font-weight:700;margin-bottom:6px}
.wh-a{font-size:21px;font-weight:700;color:var(--good-dk);background:var(--good-soft);border-radius:12px;padding:6px;margin-top:8px}