/* KidzMath — giao diện cho trẻ 5–8 tuổi, iPad ngang */
:root{
  --sky:#BFE9F4; --sky2:#DFF6E9; --grass:#8FCE8B; --grass2:#A8DCA0;
  --ink:#33475B; --muted:#7C93A3; --teal:#2AA5B8; --teal-dk:#1C7E8D;
  --coral:#FF6F59; --coral-dk:#D9503C; --sun:#FFC94D; --sun-dk:#D9A32A;
  --leaf:#58B368; --leaf-dk:#3E8A4E; --dora:#1E9FD4;
  --cream:#FFF6E5; --card:#FFFFFF; --lock:#B9C6CE;
  --shadow:0 4px 14px rgba(20,35,45,.14);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:var(--sky); color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  touch-action:manipulation;
}
#app{position:fixed; inset:0; height:100dvh}
button{font:inherit; color:inherit; border:none; background:none; padding:0; cursor:pointer}
input{font:inherit; color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--teal); outline-offset:2px}

.screen{position:absolute; inset:0; display:flex; flex-direction:column}

/* ===== Nút bấm chung ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:64px; padding:0 34px; border-radius:999px;
  font-size:24px; font-weight:800; color:#fff;
  background:var(--coral); box-shadow:0 5px 0 var(--coral-dk);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--coral-dk)}
.btn.teal{background:var(--teal); box-shadow:0 5px 0 var(--teal-dk)}
.btn.teal:active{box-shadow:0 1px 0 var(--teal-dk)}
.btn.leaf{background:var(--leaf); box-shadow:0 5px 0 var(--leaf-dk)}
.btn.leaf:active{box-shadow:0 1px 0 var(--leaf-dk)}
.btn.ghost{background:#fff; color:var(--ink); box-shadow:0 5px 0 #D8E4E8}
.btn.ghost:active{box-shadow:0 1px 0 #D8E4E8}
.btn.gold{background:var(--sun); color:#7A5A0E; box-shadow:0 5px 0 var(--sun-dk)}
.btn.gold:active{box-shadow:0 1px 0 var(--sun-dk)}
.btn.small{min-height:48px; padding:0 22px; font-size:18px}
.btn:disabled{
  background:#C7D4DB; color:#F2F7F9; box-shadow:0 5px 0 #A9BAC3;
  transform:none; cursor:default;
}
.iconbtn{
  width:56px; height:56px; border-radius:50%; background:#fff; font-size:26px;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(20,35,45,.18); flex:none;
}
.iconbtn:active{transform:scale(.92)}

/* ===== HUD ===== */
.hud{
  position:relative; z-index:20; display:flex; align-items:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;
}
.hud .grow{flex:1}
.hudchip{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.94);
  border-radius:999px; padding:6px 16px 6px 8px; font-size:19px; font-weight:800;
  box-shadow:0 3px 8px rgba(20,35,45,.14); min-height:52px;
}
.hudchip .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:var(--cream)}
.hudchip.plain{padding:6px 16px}
.langbtn{
  min-height:52px; border-radius:999px; background:rgba(255,255,255,.94); padding:6px 16px;
  font-size:18px; font-weight:800; box-shadow:0 3px 8px rgba(20,35,45,.14);
}
.langbtn .on{color:var(--teal)} .langbtn .off{color:var(--lock)}

/* ===== Splash ===== */
.splash{background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,var(--grass2) 70%,var(--grass) 100%);
  align-items:center; justify-content:center; gap:20px; text-align:center}
.splash h1{font-size:min(9vw,64px); margin:0; color:var(--ink); text-shadow:0 3px 0 #fff}
.splash .tagline{font-size:24px; font-weight:700; color:var(--teal-dk); margin:0}
.splash .dora-wrap{animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.tap-hint{animation:blink 1.4s ease-in-out infinite; font-size:20px; font-weight:700; color:var(--muted)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== Hồ sơ ===== */
.profiles{background:linear-gradient(180deg,var(--sky),var(--sky2)); align-items:center; justify-content:center; gap:26px}
.profiles h2, .pform h2{font-size:34px; margin:0}
.profile-grid{display:flex; gap:22px; flex-wrap:wrap; justify-content:center}
.pcardp{
  width:180px; min-height:190px; background:#fff; border-radius:24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px;
  border:4px solid transparent; transition:transform .1s;
}
.pcardp:active{transform:scale(.96)}
.pcardp .pav{width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:52px}
.pcardp .pname{font-size:24px; font-weight:800}
.pcardp .pstars{font-size:17px; font-weight:700; color:var(--sun-dk)}
.pcardp.add{border:4px dashed var(--teal); color:var(--teal); font-size:22px; font-weight:800; background:rgba(255,255,255,.7)}
.pcardp.add .plus{font-size:56px; line-height:1}
.pform{background:linear-gradient(180deg,var(--sky),var(--sky2)); align-items:center; justify-content:center; gap:18px}
.pform .name-input{
  font-size:32px; font-weight:800; text-align:center; width:min(420px,80vw);
  border:none; border-radius:18px; padding:14px; background:#fff; box-shadow:var(--shadow);
}
.avatar-grid{display:grid; grid-template-columns:repeat(6,68px); gap:12px}
.avatar-grid button{
  width:68px; height:68px; border-radius:50%; font-size:40px; background:#fff;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(20,35,45,.12); border:4px solid transparent;
}
.avatar-grid button.sel{border-color:var(--coral); transform:scale(1.08)}
.color-row{display:flex; gap:12px}
.color-row button{width:52px; height:52px; border-radius:50%; border:4px solid transparent; box-shadow:0 3px 8px rgba(20,35,45,.15)}
.color-row button.sel{border-color:var(--ink)}
.form-label{font-size:19px; font-weight:800; color:var(--muted); margin:4px 0 0}

/* ===== Bản đồ ===== */
.map-screen{background:var(--sky)}
.map-scroll{flex:1; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; position:relative}
.map-strip{display:flex; height:100%; min-width:max-content}
.world{position:relative; height:100%; flex:none; overflow:hidden}
.world .wlabel{
  position:absolute; top:14px; left:26px; z-index:6; background:rgba(255,255,255,.94);
  border-radius:16px; padding:8px 20px; font-weight:800; font-size:20px; box-shadow:var(--shadow);
}
.world .wlabel small{display:block; font-size:13px; font-weight:700; color:var(--muted)}
.world.w-village{background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 55%,var(--grass2) 55%,var(--grass) 100%)}
.world.w-forest{background:linear-gradient(180deg,#AEE3E9 0%,#CDEFDC 52%,#7BBE77 52%,#5EA663 100%)}
.world.w-soon{background:linear-gradient(180deg,#F2E8CF 0%,#F7F1DF 55%,#D9C88F 55%,#CBB56F 100%)}
.world svg.trail{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.deco{position:absolute; font-size:44px; pointer-events:none; filter:drop-shadow(0 3px 2px rgba(20,35,45,.18)); z-index:1; line-height:1}

/* Cảnh nền: mặt trời, mây trên trời — đồi, cỏ dưới đất */
.world .sun{
  position:absolute; top:26px; width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle, #FFF3C4 0%, #FFD34D 58%, rgba(255,211,77,0) 74%);
  box-shadow:0 0 48px 20px rgba(255,211,77,.5); z-index:0; pointer-events:none;
}
.cloudx{position:absolute; height:26px; background:#fff; border-radius:99px; opacity:.92; z-index:0; pointer-events:none}
.cloudx::before{content:""; position:absolute; left:18%; top:-58%; width:44%; height:130%; background:#fff; border-radius:50%}
.cloudx::after{content:""; position:absolute; right:14%; top:-36%; width:34%; height:112%; background:#fff; border-radius:50%}
.hill{position:absolute; bottom:44%; width:520px; height:120px; border-radius:50% 50% 0 0 / 100% 100% 0 0; z-index:0; pointer-events:none}
.hill.h2{width:660px; height:88px}
.w-village .hill.h1{background:#9CD897} .w-village .hill.h2{background:#AEE1A7}
.w-forest .hill.h1{background:#6FB273} .w-forest .hill.h2{background:#86C789}
.w-soon .hill.h1{background:#DCC98A} .w-soon .hill.h2{background:#E6D8A4}
/* Biome Phase 2 */
.world.w-farm{background:linear-gradient(180deg,#CFEFF7 0%,#EAF7DF 55%,#C9E5A2 55%,#B2D786 100%)}
.w-farm .hill.h1{background:#BCDF97} .w-farm .hill.h2{background:#CDE8AC}
.world.w-cave{background:linear-gradient(180deg,#6E7BB0 0%,#8B96C6 55%,#5D668F 55%,#4C5375 100%)}
.w-cave .hill.h1{background:#535B80} .w-cave .hill.h2{background:#646D99}
.world.w-city{background:linear-gradient(180deg,#BFE3F4 0%,#E2F1F8 55%,#C2CCD3 55%,#ADB8C1 100%)}
.w-city .hill.h1{background:#B5C1CA} .w-city .hill.h2{background:#C6D1D9}
.world.w-clocktower{background:linear-gradient(180deg,#FFDFAE 0%,#FFF1D6 55%,#E3C9A8 55%,#D3B48F 100%)}
.w-clocktower .hill.h1{background:#DDBF9C} .w-clocktower .hill.h2{background:#E8CFB0}
.world.w-island{background:linear-gradient(180deg,#AEE4FB 0%,#DDF4FE 42%,#66C7E8 42%,#58B5D8 60%,#FFE9AE 60%,#F5DB94 100%)}
.w-island .hill{bottom:38%}
.w-island .hill.h1{background:#F0D791} .w-island .hill.h2{background:#F7E4A8}
/* Biome Phase 3 */
.world.w-kingdom{background:linear-gradient(180deg,#E8D4F0 0%,#F5E9F7 55%,#C9A0D8 55%,#B689C9 100%)}
.w-kingdom .hill.h1{background:#BE96CF} .w-kingdom .hill.h2{background:#CEA9DC}
.world.w-toyshop{background:linear-gradient(180deg,#FFE0EA 0%,#FFF0F4 55%,#F0B4C8 55%,#E5A0B8 100%)}
.w-toyshop .hill.h1{background:#EBACC2} .w-toyshop .hill.h2{background:#F3BFD1}
.world.w-mountain{background:linear-gradient(180deg,#C7D8E8 0%,#E4EDF4 55%,#9FB2C2 55%,#8CA0B2 100%)}
.w-mountain .hill.h1{background:#96A9BB} .w-mountain .hill.h2{background:#A8BACA}
.world.w-market{background:linear-gradient(180deg,#FFE7C2 0%,#FFF4E0 55%,#E8C088 55%,#DDB077 100%)}
.w-market .hill.h1{background:#E2B681} .w-market .hill.h2{background:#ECC697}
.world.w-skycastle{background:linear-gradient(180deg,#D6E4FA 0%,#EFF5FE 55%,#B7C9EC 55%,#A5B9E2 100%)}
.w-skycastle .hill.h1{background:#AEC1E7} .w-skycastle .hill.h2{background:#C0D0EF}
.world.w-carnival{background:linear-gradient(180deg,#FFD9EC 0%,#FFEDF6 55%,#E8A0C8 55%,#DE8EBB 100%)}
.w-carnival .hill.h1{background:#E398C2} .w-carnival .hill.h2{background:#EDACD0}
.world.w-treasure{background:linear-gradient(180deg,#BFE9F4 0%,#E4F6FB 42%,#58B5D8 42%,#4AA5C8 58%,#F2DC9B 58%,#E8CB7E 100%)}
.w-treasure .hill{bottom:36%}
.w-treasure .hill.h1{background:#E3C378} .w-treasure .hill.h2{background:#EDD394}
.world::after{ /* vân cỏ trên mặt đất */
  content:""; position:absolute; left:0; right:0; bottom:0; height:45%; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 70px, rgba(30,80,40,.05) 70px 140px);
}
.node{
  position:absolute; width:76px; height:76px; border-radius:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; font-size:26px; font-weight:800; color:#fff; z-index:5;
  box-shadow:0 5px 0 rgba(20,35,45,.25);
}
.node.passed{background:var(--leaf)}
.node.open{background:var(--coral); animation:bob 1.6s ease-in-out infinite}
.node.locked{background:var(--lock); font-size:30px}
.node.plock{background:#8FA3B8}
.node .pbadge{
  position:absolute; top:-6px; right:-8px; width:30px; height:30px; border-radius:50%;
  background:#fff; display:grid; place-items:center; font-size:16px;
  box-shadow:0 2px 5px rgba(20,35,45,.25);
}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-52%) scale(1.06)}}
.node .nstars{
  position:absolute; top:100%; margin-top:4px; font-size:15px; letter-spacing:1px;
  color:var(--sun-dk); text-shadow:0 1px 0 #fff; white-space:nowrap;
}
.node .ntag{
  position:absolute; bottom:120%; background:#fff; color:var(--ink); font-size:16px; font-weight:800;
  padding:7px 14px; border-radius:12px; white-space:nowrap; box-shadow:var(--shadow);
}
.node .ntag::after{content:""; position:absolute; top:100%; left:50%; margin-left:-7px; border:7px solid transparent; border-top-color:#fff}
.node.wobble{animation:wobble .5s}
@keyframes wobble{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-8deg)}75%{transform:translate(-50%,-50%) rotate(8deg)}}
.gemslot{
  position:absolute; width:64px; height:64px; transform:translate(-50%,-50%); z-index:5;
  display:grid; place-items:center; font-size:44px; filter:grayscale(1) opacity(.5);
}
.gemslot.earned{filter:none; animation:gemglow 2.4s ease-in-out infinite}
@keyframes gemglow{0%,100%{filter:drop-shadow(0 0 4px #fff)}50%{filter:drop-shadow(0 0 16px #FFE59A)}}
.soon-lock{
  position:absolute; inset:0; display:grid; place-items:center; z-index:6;
}
.soon-lock .scard{background:rgba(255,255,255,.92); border-radius:20px; padding:18px 30px; text-align:center; font-weight:800; font-size:20px; box-shadow:var(--shadow)}
.soon-lock .scard small{display:block; color:var(--muted); font-size:15px; margin-top:4px}

/* ===== Modal chung ===== */
.overlay{
  position:fixed; inset:0; z-index:60; background:rgba(31,53,64,.45);
  display:grid; place-items:center; padding:20px;
}
.modal{
  background:#fff; border-radius:26px; padding:28px 32px; max-width:560px; width:100%;
  box-shadow:0 16px 44px rgba(20,35,45,.3); text-align:center;
}
.modal h3{font-size:26px; margin:0 0 6px}
.modal .goal{font-size:18px; color:var(--muted); font-weight:600; margin:0 0 20px; line-height:1.5}
.modal .mrow{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ===== Bài học: lý thuyết ===== */
.theory{background:linear-gradient(180deg,#CDEFDC,#EFF9F0)}
.lesson-title-chip{
  background:rgba(255,255,255,.94); border-radius:999px; padding:8px 22px;
  font-size:19px; font-weight:800; box-shadow:0 3px 8px rgba(20,35,45,.14); min-height:52px;
  display:flex; align-items:center;
}
.theory-stage{flex:1; display:flex; align-items:stretch; gap:14px; padding:6px 22px 10px; min-height:0}
.mascot-col{width:190px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; padding-bottom:6px}
.mascot-col .dora-wrap{animation:floaty 3.4s ease-in-out infinite}
.mascot-name{background:#fff; border-radius:999px; padding:4px 16px; font-size:16px; font-weight:800; color:var(--dora)}
.theory-main{flex:1; display:flex; flex-direction:column; gap:12px; min-width:0}
.bubble{
  position:relative; background:#fff; border-radius:20px; padding:16px 22px;
  font-size:clamp(19px,2.6vw,25px); font-weight:700; box-shadow:var(--shadow); line-height:1.45;
}
.bubble::before{content:""; position:absolute; top:38%; right:100%; border:12px solid transparent; border-right-color:#fff}
.board{
  flex:1; background:#fff; border-radius:22px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; padding:16px; min-height:0; overflow:auto;
}
.theory-bar{display:flex; align-items:center; gap:16px; padding:0 22px calc(14px + env(safe-area-inset-bottom))}
.scene-dots{display:flex; gap:8px; align-items:center}
.scene-dots i{width:12px; height:12px; border-radius:50%; background:#fff; opacity:.6}
.scene-dots i.on{opacity:1; background:var(--teal); transform:scale(1.2)}

/* ===== Bài học: thử thách ===== */
.quiz{background:linear-gradient(180deg,#D9F0F7,#F2FAF4)}
.trail{display:flex; align-items:center; justify-content:center; gap:8px; padding:2px 0 6px}
.trail i{width:13px; height:13px; border-radius:50%; background:#C7D8DF}
.trail i.d{background:var(--leaf)}
.trail i.c{width:19px; height:19px; background:var(--coral); box-shadow:0 0 0 5px rgba(255,111,89,.25)}
.trail .tlabel{font-size:16px; font-weight:800; color:var(--muted); margin-left:10px}
.quiz-stage{flex:1; display:flex; gap:16px; padding:4px 22px 12px; min-height:0}
.answer-zone{transition:opacity .3s; position:relative}
.answer-zone.locked{opacity:.4; pointer-events:none}
.cooldown{
  position:absolute; inset:-8px; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:rgba(244,250,251,.72); border-radius:20px; backdrop-filter:blur(1px);
}
.cooldown .cd-num{
  width:84px; height:84px; border-radius:50%; background:#fff; display:grid; place-items:center;
  font-size:42px; font-weight:800; color:var(--teal-dk); box-shadow:var(--shadow);
  animation:cdpulse 1s ease-in-out infinite;
}
.cooldown .cd-txt{font-size:16px; font-weight:800; color:var(--muted)}
@keyframes cdpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pressed{animation:presspop .22s ease-out}
@keyframes presspop{0%{transform:scale(1)}40%{transform:scale(.88)}100%{transform:scale(1)}}
/* Chế độ Test cho phụ huynh */
.testbadge{
  display:inline-flex; align-items:center; min-height:36px; padding:4px 14px;
  border-radius:999px; background:#FFE9A8; border:2px dashed var(--sun-dk);
  font-size:14px; font-weight:800; color:#8A6A12; letter-spacing:.06em;
}
.test-ans{
  background:#FFF6DA; border:2px dashed var(--sun-dk); border-radius:12px;
  padding:8px 14px; font-size:16px; font-weight:700; color:#8A6A12; white-space:nowrap;
}
.qcard{
  flex:1.4; background:#fff; border-radius:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px; min-width:0; overflow:auto; position:relative;
}
.qprompt{font-size:clamp(22px,3vw,30px); font-weight:800; text-align:center; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.qprompt .speakbtn{width:46px; height:46px; border-radius:50%; background:#EAF6F8; font-size:22px; display:grid; place-items:center; flex:none}
.qbig{font-size:clamp(34px,5vw,52px); font-weight:800; font-variant-numeric:tabular-nums}
.answer-zone{flex:1; display:flex; flex-direction:column; gap:12px; justify-content:center; min-width:0}
.choices{display:flex; flex-direction:column; gap:14px; justify-content:center}
.choices.rowmode{flex-direction:row; flex-wrap:wrap}
.choice{
  min-height:70px; border-radius:18px; background:#fff; font-size:26px; font-weight:800;
  box-shadow:0 4px 0 #D8E4E8; padding:8px 26px; transition:transform .08s;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
}
.choice .abc{
  width:36px; height:36px; border-radius:50%; background:#EAF6F8; color:var(--teal-dk);
  display:grid; place-items:center; font-size:19px; font-weight:800; flex:none;
}
.choice .abc:empty{display:none}
.choice.correct-mark .abc{background:rgba(255,255,255,.3); color:#fff}
.compare-row .choice .abc{display:none}
.choice:active{transform:translateY(3px); box-shadow:0 1px 0 #D8E4E8}
.choice.disabled{opacity:.4; pointer-events:none}
.choice.correct-mark{background:var(--leaf); color:#fff; box-shadow:0 4px 0 var(--leaf-dk)}
.compare-row{display:flex; gap:16px; justify-content:center}
.compare-row .choice{min-width:86px; font-size:34px}
.numpad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:center}
.numpad button{
  min-height:64px; border-radius:16px; background:#fff; font-size:28px; font-weight:800;
  box-shadow:0 4px 0 #D8E4E8;
}
.numpad button:active{transform:translateY(3px); box-shadow:0 1px 0 #D8E4E8}
.numpad button.ok{background:var(--leaf); color:#fff; box-shadow:0 4px 0 var(--leaf-dk)}
.numpad button.del{color:var(--muted)}
.ans-display{
  min-width:120px; text-align:center; border-bottom:6px solid var(--teal);
  font-size:44px; font-weight:800; color:var(--teal-dk); padding:0 12px 2px; margin:0 auto;
  font-variant-numeric:tabular-nums; min-height:58px;
}
.quiz-foot{display:flex; align-items:center; gap:14px; padding:0 22px calc(12px + env(safe-area-inset-bottom))}
.hint-box{
  background:#FFF6DA; border:2px solid var(--sun); border-radius:16px; padding:10px 16px;
  font-size:18px; font-weight:700; color:#8A6A12; display:flex; gap:10px; align-items:center;
}
.feedback{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:22px;
  background:rgba(255,255,255,.88); z-index:5; animation:fadein .18s;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.feedback .fbig{font-size:90px; animation:popin .35s}
@keyframes popin{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.feedback .ftxt{font-size:26px; font-weight:800}
.feedback.good .ftxt{color:var(--leaf-dk)}
.feedback.bad .ftxt{color:var(--coral-dk)}
.explain-panel{
  background:#EAF6F8; border:2px solid var(--teal); border-radius:16px; padding:12px 18px;
  font-size:19px; font-weight:700; color:var(--teal-dk); line-height:1.5;
}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ===== Kết quả ===== */
.result{background:linear-gradient(180deg,var(--sky),var(--sky2)); align-items:center; justify-content:center; gap:14px; text-align:center}
.result h2{font-size:38px; margin:0}
.result .rscore{font-size:24px; font-weight:800; color:var(--muted)}
.result-stars{display:flex; gap:18px; font-size:74px; height:100px; align-items:center}
.result-stars .rstar{opacity:.25; transform:scale(.7); transition:all .4s}
.result-stars .rstar.lit{opacity:1; transform:scale(1); filter:drop-shadow(0 4px 6px rgba(217,163,42,.5))}
.result .mrow{display:flex; gap:16px; margin-top:8px}
#confetti{position:absolute; inset:0; pointer-events:none; z-index:2}
.gem-banner{font-size:22px; font-weight:800; color:var(--teal-dk); background:#fff; padding:10px 24px; border-radius:999px; box-shadow:var(--shadow)}

/* ===== Khu phụ huynh ===== */
.parent{background:#EDF2F5}
.parent .pbar{
  display:flex; align-items:center; gap:14px; background:#fff; padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
  box-shadow:0 1px 6px rgba(20,35,45,.1); z-index:5;
}
.parent .pbar h2{font-size:22px; margin:0}
.parent-body{flex:1; display:flex; min-height:0}
.pnav{width:190px; flex:none; background:#fff; border-right:1px solid #E2E9EE; padding:14px 10px; display:flex; flex-direction:column; gap:6px}
.pnav button{font-size:17px; font-weight:700; padding:12px 16px; border-radius:12px; color:var(--muted); text-align:left}
.pnav button.a{background:#E3F2F5; color:var(--teal-dk)}
.pmain{flex:1; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; display:flex; flex-direction:column; gap:14px}
.ptiles{display:flex; gap:12px; flex-wrap:wrap}
.ptile{flex:1; min-width:140px; background:#fff; border-radius:14px; padding:14px 18px; box-shadow:0 1px 4px rgba(20,35,45,.08)}
.ptile .v{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.ptile .k{font-size:13px; color:var(--muted); font-weight:700}
.pcard{background:#fff; border-radius:14px; padding:16px 18px; box-shadow:0 1px 4px rgba(20,35,45,.08)}
.pcard .h{font-size:13px; font-weight:800; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px}
.pchart{display:flex; align-items:flex-end; gap:12px; height:110px; border-bottom:2px solid #E2E9EE; padding-top:18px}
.pbarwrap{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative}
.pbarwrap i{width:60%; max-width:30px; background:var(--teal); border-radius:5px 5px 0 0}
.pbarwrap em{position:absolute; top:-2px; font-size:12px; font-style:normal; font-weight:800; color:var(--teal-dk)}
.pbarwrap s{position:absolute; top:100%; margin-top:4px; font-size:12px; color:var(--muted); text-decoration:none; font-weight:700}
.pchart-pad{padding-bottom:22px}
.ptable{width:100%; border-collapse:collapse; font-size:15px}
.ptable th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:8px 10px; border-bottom:1px solid #E2E9EE}
.ptable td{padding:9px 10px; border-bottom:1px solid #EEF3F6; font-weight:600; font-variant-numeric:tabular-nums}
.ptable tr:last-child td{border-bottom:none}
.pstatus{display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:800}
.pstatus.passed{background:#E4F4E8; color:var(--leaf-dk)}
.pstatus.open{background:#FFEBE0; color:var(--coral-dk)}
.pstatus.locked{background:#EDF1F4; color:var(--muted)}
.prow{display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #EEF3F6; font-size:16px; font-weight:600; flex-wrap:wrap}
.prow:last-child{border-bottom:none}
.prow .grow{flex:1}
.prange{width:100%; max-width:340px; accent-color:var(--teal); height:34px}
.pval{font-size:20px; font-weight:800; color:var(--teal-dk); min-width:64px; font-variant-numeric:tabular-nums}
.pbtn{
  min-height:44px; padding:0 20px; border-radius:12px; background:var(--teal); color:#fff;
  font-size:15px; font-weight:800;
}
.pbtn.warn{background:var(--coral)}
.pbtn.ghost2{background:#EDF1F4; color:var(--ink)}
.pselect{
  font-size:15px; font-weight:600; padding:8px 10px; border-radius:10px;
  border:1px solid #D8E4E8; background:#fff; color:var(--ink); max-width:230px;
}
.pdate{
  font-size:14px; font-weight:600; padding:6px 8px; border-radius:10px;
  border:1px solid #D8E4E8; background:#fff; color:var(--ink);
}
.pchip-status{display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:800}
.pchip-status.open{background:#E4F4E8; color:var(--leaf-dk)}
.pchip-status.locked{background:#FFEBE0; color:var(--coral-dk)}
/* Công tắc khoá bài */
.tgl{
  width:56px; height:32px; border-radius:99px; background:#C7D2D9; position:relative;
  transition:background .2s; flex:none;
}
.tgl i{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(20,35,45,.25); transition:left .2s;
}
.tgl.on{background:var(--coral)}
.tgl.on i{left:27px}
/* Chọn linh vật */
.mopt{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:#F4F8FA; border:3px solid transparent; border-radius:16px;
  padding:10px 16px 8px; font-size:13px; font-weight:800; color:var(--muted);
}
.mopt.sel{border-color:var(--teal); background:#E3F2F5; color:var(--teal-dk)}
.pnote{font-size:13px; color:var(--muted); font-weight:600; line-height:1.5}
.gate-hold{
  width:130px; height:130px; border-radius:50%; background:var(--teal); color:#fff;
  font-size:17px; font-weight:800; position:relative; box-shadow:0 5px 0 var(--teal-dk);
}
.gate-hold .ring{position:absolute; inset:-9px; border-radius:50%; border:6px solid #D8E4E8}
.gate-hold.holding .ring{border-color:var(--sun); animation:none}

/* ===== Trực quan toán ===== */
.vis{display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; width:100%}
.counters{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:620px}
.counters .cnt{font-size:52px; line-height:1; transition:transform .12s}
.counters .cnt.tapd{transform:scale(1.18)}
.counters .cnt.poppable:active{transform:scale(1.25)}
.tf-grid{display:grid; grid-template-columns:repeat(5,60px); gap:9px; background:#F4FAFB; padding:12px; border-radius:14px}
.tf-cell{width:60px; height:60px; border-radius:11px; border:3px solid #D8E4E8; display:grid; place-items:center}
.tf-dot{width:38px; height:38px; border-radius:50%}
.tf-dot.o{background:var(--sun); border:3px solid var(--sun-dk)}
.tf-dot.t{background:#7FD6E4; border:3px solid var(--teal)}
.tf-extra{display:flex; gap:8px}
.tf-extra .tf-cell{background:#fff}
.crossed{position:relative}
.crossed::after{content:"✕"; position:absolute; inset:0; display:grid; place-items:center; color:var(--coral-dk); font-size:34px; font-weight:800}
.numline{max-width:100%}
.rods{display:flex; align-items:flex-end; gap:20px}
.rod-tens{display:flex; gap:8px}
.rod{width:26px; height:120px; border-radius:8px; background:var(--sun); border:3px solid var(--sun-dk); position:relative}
.rod::after{content:""; position:absolute; inset:6px 8px; background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(139,106,18,.35) 8px 10px); border-radius:4px}
.rod-ones{display:grid; grid-template-columns:repeat(3,26px); gap:6px}
.rod-one{width:26px; height:26px; border-radius:6px; background:#7FD6E4; border:3px solid var(--teal)}
.rods-label{font-size:18px; font-weight:800; color:var(--muted); display:flex; gap:34px}
.tworows{display:flex; flex-direction:column; gap:14px}
.tworows .trow{display:flex; align-items:center; gap:8px}
.tworows .trlabel{width:86px; font-size:19px; font-weight:800; text-align:right; margin-right:8px; flex:none}
.tworows .tritem{font-size:36px; line-height:1}
.colcalc{font-family:ui-monospace,Menlo,monospace; font-size:40px; font-weight:700; line-height:1.3; text-align:right; background:#F4FAFB; padding:14px 26px; border-radius:14px}
.colcalc .cline{border-top:4px solid var(--ink); margin-top:4px; padding-top:4px}
.bigeq{font-size:clamp(28px,4vw,40px); font-weight:800; text-align:center}
.bigeq .hl{color:var(--teal-dk)}
.labeledeq{display:flex; gap:8px; align-items:flex-start; justify-content:center; flex-wrap:wrap}
.labeledeq .tok{display:flex; flex-direction:column; align-items:center; gap:8px}
.labeledeq .tk{font-size:44px; font-weight:800}
.labeledeq .tl{font-size:15px; font-weight:800; color:#fff; padding:3px 12px; border-radius:999px; white-space:nowrap}
.factlist{display:flex; flex-direction:column; gap:10px}
.factlist .fact{background:#F4FAFB; border-radius:12px; padding:8px 22px; font-size:26px; font-weight:800; text-align:center}
.pyramid{display:flex; flex-direction:column; align-items:center; gap:8px}
.pyr-row{display:flex; gap:8px}
.pyr-cell{
  width:64px; height:64px; border-radius:50%; background:#F4FAFB; border:3px solid #7FD6E4;
  display:grid; place-items:center; font-size:27px; font-weight:800;
}
.pyr-cell.unk{background:#FFF6DA; border-color:#E89A28; color:#B4763B}
.shape-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:520px}
/* Nhóm bằng nhau (nhân/chia) */
.groups{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:620px}
.grp{
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center; align-items:center;
  background:#F4FAFB; border:3px dashed #7FD6E4; border-radius:16px; padding:10px 12px;
  max-width:150px; font-size:32px; line-height:1;
}
/* Khối số trăm–chục–đơn vị */
.blocks{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; justify-content:center}
.blk-grp{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; max-width:300px}
.blk-h{
  width:92px; height:92px; border-radius:8px; background:#FFB37E; border:3px solid #C77B3F;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7.6px, rgba(140,80,30,.35) 7.6px 9px),
    repeating-linear-gradient(90deg, transparent 0 7.6px, rgba(140,80,30,.35) 7.6px 9px);
}
/* Tiền Việt Nam: ảnh tờ tiền thật */
.money-row{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.note-img{display:flex; flex-direction:column; align-items:center; gap:6px}
.note-img img{
  width:170px; height:auto; border-radius:6px;
  box-shadow:0 3px 10px rgba(20,35,45,.3); border:1px solid rgba(0,0,0,.15);
}
.note-img small{font-size:14px; font-weight:800; color:var(--muted)}
/* Hình vật thật cỡ lớn */
.bigemoji{display:flex; flex-direction:column; align-items:center; gap:8px}
.bigemoji span{font-size:110px; line-height:1.1; filter:drop-shadow(0 4px 6px rgba(20,35,45,.2))}
.bigemoji small{font-size:18px; font-weight:800; color:var(--muted)}
/* So sánh độ dài thực tế */
.lencompare{display:flex; flex-direction:column; gap:14px; width:min(560px,100%)}
.lenrow{display:flex; align-items:center; gap:12px}
.lenrow-e{font-size:40px; line-height:1; width:52px; text-align:center; flex:none}
.lenrow-bar{flex:1; height:16px; background:#EDF3F5; border-radius:99px; overflow:hidden}
.lenrow-bar i{display:block; height:100%; background:linear-gradient(90deg,#7FD6E4,#2AA5B8); border-radius:99px}
.lenrow-l{width:200px; font-size:16px; font-weight:800; flex:none}
/* Biểu đồ tranh */
.pictograph{display:flex; flex-direction:column; gap:10px; background:#F4FAFB; border-radius:14px; padding:14px 18px}
.picto-row{display:flex; align-items:center; gap:12px}
.picto-label{width:130px; font-size:17px; font-weight:800; text-align:right; flex:none}
.picto-cells{display:flex; gap:6px; font-size:30px; line-height:1}
/* Hộp bóng (xác suất) */
.chancebox{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  background:#EADFC8; border:4px solid #B4763B; border-top-width:8px; border-radius:10px 10px 16px 16px;
  padding:20px 22px 14px; min-width:200px;
}
.chancebox .ball{width:40px; height:40px; border-radius:50%; box-shadow:inset -4px -5px 0 rgba(0,0,0,.15)}
/* Thẻ hình gắn phép tính */
.exprcards{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
.exprcard{
  display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
  background:#F4FAFB; border:3px solid #D8E4E8; border-radius:16px; padding:14px 20px 12px;
}
.exprcard .abc{
  position:absolute; top:-14px; left:-12px; width:32px; height:32px; border-radius:50%;
  background:var(--teal); color:#fff; display:grid; place-items:center; font-size:17px; font-weight:800;
  box-shadow:0 2px 5px rgba(20,35,45,.25);
}
.exprcard-e{font-size:42px; line-height:1}
.exprcard-x{font-size:24px; font-weight:800; font-variant-numeric:tabular-nums}
/* Tóm tắt đề bài (điền chỗ trống) */
.summarybox{
  background:#FFF9EC; border:3px solid var(--sun); border-radius:16px;
  padding:16px 26px; display:flex; flex-direction:column; gap:8px; max-width:520px;
}
.sum-line{font-size:clamp(19px,2.4vw,24px); font-weight:700; color:#6B4E12}
.sum-line:last-child{color:var(--coral-dk)}
/* Cân lệch */
.b2{transform-box:view-box; transform-origin:155px 62px}
.b2.tilt-l{transform:rotate(-8deg)}
.b2.tilt-r{transform:rotate(8deg)}
.board .exprcard{animation:popin .5s both}
.calendar{background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 2px 8px rgba(20,35,45,.1)}
.cal-title{font-size:19px; font-weight:800; text-align:center; margin-bottom:8px; color:var(--coral-dk)}
.cal-grid{display:grid; grid-template-columns:repeat(7,52px); gap:5px}
.cal-h{font-size:13px; font-weight:800; color:var(--muted); text-align:center; padding:2px 0}
.cal-h.cn{color:var(--coral-dk)}
.cal-c{
  height:40px; border-radius:9px; background:#F4FAFB; display:grid; place-items:center;
  font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;
}
.cal-c.cn{color:var(--coral-dk)}
.cal-c.empty{background:transparent}
.cal-c.hl{background:var(--sun); color:#7A5A0E; box-shadow:0 0 0 3px var(--sun-dk) inset}
.gemvis{font-size:100px; animation:gemglow 2s ease-in-out infinite}

/* ===== Toast & khác ===== */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:80;
  background:var(--ink); color:#fff; font-size:18px; font-weight:700;
  padding:12px 26px; border-radius:999px; box-shadow:0 6px 20px rgba(20,35,45,.3);
  animation:toastin .25s;
}
@keyframes toastin{from{opacity:0; transform:translate(-50%,16px)}to{opacity:1; transform:translate(-50%,0)}}

#rotate-overlay{display:none; position:fixed; inset:0; z-index:200; background:var(--sky); place-items:center}
.rotate-card{text-align:center; font-size:22px; font-weight:800; color:var(--ink)}
.rotate-card .rotate-icon{font-size:64px; margin-bottom:10px}
.rotate-card small{color:var(--muted); font-weight:600}
@media (orientation:portrait){ #rotate-overlay{display:grid} }

/* ===== Hoạt cảnh lý thuyết: minh hoạ chuyển động ===== */
.board .counters .cnt{animation:popin .5s both}
.board .tf-dot{animation:popin .45s both}
.board .tf-dot.t{animation:tfslide .7s both}
@keyframes tfslide{from{transform:translateX(70px) scale(.5); opacity:0}to{transform:none; opacity:1}}
.board .colcalc .cline{animation:popin .55s .5s both}
.board .rod,.board .rod-one{animation:popin .45s both}
.board .rockg{animation:rockbeam 3.2s ease-in-out infinite; transform-box:view-box; transform-origin:155px 62px}
@keyframes rockbeam{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}
.board .grp{animation:popin .5s both}
.board .gemvis svg{animation:gemglow 2s ease-in-out infinite}
.board .labeledeq .tl{animation:popin .5s .35s both}
.board .blk-h,.board .note-img,.board .ball,.board .lenrow{animation:popin .5s both}
.board .picto-row{animation:pictoslide .55s both}
@keyframes pictoslide{from{transform:translateX(40px); opacity:0}to{transform:none; opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}