:root {
  --ink: #23324d;
  --ink-soft: #5b6b88;
  --sky-top: #8fd3ff;
  --sky-bottom: #e6f7ff;
  --card: #ffffff;
  --line: #e3ecf7;
  --sun: #ffc93c;
  --good: #22c55e;
  --bad: #ff6b6b;
  --primary: #ff8a5b;
  --primary-dark: #e86a3a;
  --blue: #4fb3ff;
  --radius: 28px;
  --shadow: 0 6px 0 rgba(35, 50, 77, .12), 0 12px 28px rgba(35, 50, 77, .10);
  --gutter: max(16px, env(safe-area-inset-left));
  font-family: 'Baloo 2', 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%, #fff7e0 100%) fixed;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  font-size: clamp(17px, 1.6vw + 10px, 22px);
  line-height: 1.35;
}
img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
input { font: inherit; }

/* Mây trôi nền */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.cloud { position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 60px; opacity: .85; animation: drift 60s linear infinite; --s: 1; transform: translateX(0) scale(var(--s)); }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 80px; height: 80px; top: -40px; left: 28px; }
.cloud::after { width: 60px; height: 60px; top: -28px; left: 90px; }
.c1 { top: 8%; left: -200px; }
/* Trôi bằng transform (không đổi left mỗi khung hình để iPad cũ khỏi tính lại bố cục) */
.c2 { top: 26%; left: -200px; --s: .7; animation-duration: 85s; animation-delay: -30s; }
.c3 { top: 55%; left: -200px; --s: .55; animation-duration: 110s; animation-delay: -70s; opacity: .6; }
@keyframes drift { to { transform: translateX(calc(100vw + 400px)) scale(var(--s)); } }

#app {
  position: relative; z-index: 1;
  min-height: 100%;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) max(18px, env(safe-area-inset-bottom));
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.screen { flex: 1; display: flex; flex-direction: column; animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

/* Nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 64px; padding: 0 1.4em;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 1.15em;
  border-radius: 999px; box-shadow: 0 6px 0 var(--primary-dark);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--primary-dark); }
.btn.blue { background: var(--blue); box-shadow: 0 6px 0 #2b8fd9; }
.btn.blue:active { box-shadow: 0 1px 0 #2b8fd9; }
.btn.green { background: var(--good); box-shadow: 0 6px 0 #169947; }
.btn.green:active { box-shadow: 0 1px 0 #169947; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 6px 0 var(--line); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--line); }
.btn.big { min-height: 84px; font-size: 1.5em; padding: 0 1.8em; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.icon-btn {
  width: 60px; height: 60px; flex: none;
  display: grid; place-items: center;
  background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line);
  font-size: 28px; line-height: 1;
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.icon-btn img { width: 40px; height: 40px; }

/* Thanh trên */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.topbar h1 { flex: 1; margin: 0; font-size: 1.6em; line-height: 1.1; text-align: center; text-shadow: 0 2px 0 #fff; }
.topbar .spacer { flex: 0 0 60px; display: flex; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px; padding: 6px 16px 6px 8px;
  font-weight: 800; box-shadow: 0 4px 0 var(--line);
}
.pill img { width: 34px; height: 34px; }

/* Màn bắt đầu */
.start { align-items: center; justify-content: center; text-align: center; gap: 18px; }
.logo { font-size: clamp(54px, 9vw, 96px); font-weight: 800; line-height: 1; margin: 0;
  color: #fff; text-shadow: 0 5px 0 var(--primary), 0 10px 22px rgba(232, 106, 58, .35); letter-spacing: .01em; }
.logo span { color: var(--sun); text-shadow: 0 5px 0 #e0a800, 0 10px 22px rgba(224, 168, 0, .3); }
.tagline { margin: 0; font-size: 1.2em; color: var(--ink-soft); font-weight: 600; }
.parade { display: flex; gap: clamp(8px, 2vw, 24px); justify-content: center; margin: 10px 0 18px; }
.parade img { width: clamp(80px, 13vw, 150px); height: auto; animation: hop 1.6s ease-in-out infinite; }
.parade img:nth-child(2) { animation-delay: .2s; }
.parade img:nth-child(3) { animation-delay: .4s; }
.parade img:nth-child(4) { animation-delay: .6s; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } 60% { transform: translateY(-10px) rotate(3deg); } }

/* Thẻ chung */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Chọn bé */
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); gap: 18px; margin: 10px 0 22px; }
.kid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px 16px; }
.kid img { width: 110px; height: 110px; }
.kid .name { font-size: 1.35em; font-weight: 800; }
.kid .stars { color: var(--ink-soft); font-weight: 700; }
.kid.add { border: 4px dashed #c4d7ee; background: rgba(255,255,255,.6); box-shadow: none; justify-content: center; min-height: 200px; font-size: 1.2em; font-weight: 800; color: var(--ink-soft); }
.kid.add b { font-size: 3em; line-height: 1; }
.kid:active { transform: scale(.97); }

/* Tạo hồ sơ */
.name-input {
  width: min(520px, 100%); min-height: 80px; padding: 0 28px;
  font-size: 1.7em; font-weight: 800; text-align: center; color: var(--ink);
  border: 4px solid #fff; border-radius: 999px; outline: none;
  background: #fff; box-shadow: var(--shadow);
  -webkit-user-select: text; user-select: text;
}
.name-input:focus { border-color: var(--blue); }
.mascots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 28vw), 1fr)); gap: 14px; width: 100%; }
.mascot {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 12px 6px 8px; background: #fff; border-radius: 24px;
  box-shadow: 0 5px 0 var(--line); border: 4px solid transparent;
  font-weight: 700; font-size: .9em; line-height: 1.15; text-align: center;
}
.mascot img { width: 84%; max-width: 110px; height: auto; aspect-ratio: 1; }
.mascot.on { border-color: var(--primary); background: #fff4ee; transform: scale(1.04); }
.mascot.locked img { filter: grayscale(1) brightness(1.1); opacity: .4; }
.mascot .need { position: absolute; top: 8px; right: 8px; background: var(--sun); color: #6b4c00; border-radius: 999px; padding: 0 9px; font-size: .85em; font-weight: 800; }
.center-col { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.title { margin: 0; font-size: 1.7em; line-height: 1.15; text-shadow: 0 2px 0 #fff; }

/* Bản đồ đảo */
.hello { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.hello .avatar { width: 72px; height: 72px; flex: none; background: #fff; border-radius: 24px; padding: 6px; box-shadow: 0 5px 0 var(--line); }
.hello .avatar img { width: 100%; height: 100%; }
.hello .who { font-size: 1.45em; font-weight: 800; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hello .sub { color: var(--ink-soft); font-weight: 600; font-size: .9em; }
.islands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); margin-top: 8px; }
@media (max-width: 820px) { .islands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.island {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  aspect-ratio: 1 / 1.05; min-width: 0; padding: 12px; border-radius: 34px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), transparent 60%), var(--c);
  box-shadow: 0 8px 0 rgba(0,0,0,.14), 0 14px 26px rgba(35,50,77,.15);
  color: #fff; font-weight: 800; font-size: 1.3em; text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .1s;
}
.island img { width: 62%; height: auto; margin-bottom: auto; margin-top: 6%; filter: drop-shadow(0 8px 6px rgba(0,0,0,.18)); animation: bob 3s ease-in-out infinite; }
.island:nth-child(2n) img { animation-delay: -1.5s; }
.island:active { transform: scale(.96); }
.island .prog { font-size: .62em; font-weight: 700; opacity: .95; }
.island.soon { filter: saturate(.35); opacity: .75; }
.island.soon::after { content: attr(data-soon); position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--ink-soft); font-size: .5em; padding: 2px 10px; border-radius: 999px; text-shadow: none; }
@media (max-width: 600px) {
  .topbar.home { flex-wrap: wrap; justify-content: flex-end; }
  .topbar.home .hello { flex-basis: 100%; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Danh sách bài */
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 40vw), 1fr)); gap: 18px; margin-top: 10px; }
.level {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 10px 14px; background: #fff; border-radius: 28px; box-shadow: 0 6px 0 var(--line);
}
.level .num {
  width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: 50%; background: var(--c); color: #fff; font-size: 1.7em; font-weight: 800;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.15);
}
.level .num img { width: 54px; height: 54px; }
.level .lname { font-weight: 800; font-size: 1.1em; text-align: center; line-height: 1.15; min-height: 1.2em; }
.level .lstars { font-size: 1.15em; letter-spacing: 2px; color: #d9e2ee; }
.level .lstars b { color: var(--sun); font-weight: 400; }
.level.locked { opacity: .55; }
.level.locked .num { background: #c9d5e3; }
.level.next { animation: pulse 1.4s ease-in-out infinite; }
.level:active { transform: scale(.96); }
@keyframes pulse { 0%, 100% { box-shadow: 0 6px 0 var(--line); } 50% { box-shadow: 0 6px 0 var(--line), 0 0 0 8px rgba(255, 201, 60, .55); } }

/* Màn chơi */
.game { gap: 10px; }
.progress { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.progress i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.progress i.done { background: var(--good); }
.progress i.now { background: var(--sun); transform: scale(1.25); }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3vh, 30px); position: relative; }
.prompt-btn { display: flex; align-items: center; gap: 12px; padding: 10px 26px 10px 12px; background: #fff; border-radius: 999px; box-shadow: 0 6px 0 var(--line); font-weight: 800; font-size: 1.15em; }
.prompt-btn .spk { width: 54px; height: 54px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 26px; }
.prompt-btn.talking .spk { animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scale(1.12); } }
.choices { display: grid; gap: clamp(12px, 2.5vw, 26px); width: 100%; max-width: 900px; grid-template-columns: repeat(var(--n, 3), 1fr); }
@media (max-width: 560px) { .choices.n4 { --n: 2; } }
.choice {
  aspect-ratio: 1; display: grid; place-items: center;
  background: #fff; border-radius: 32px; box-shadow: 0 8px 0 var(--line);
  font-size: clamp(64px, 11vw, 132px); font-weight: 700; line-height: 1;
  transition: transform .1s, opacity .2s;
}
.choice:active { transform: scale(.95); }
.choice img { width: 72%; height: auto; }
.choice .swatch { width: 70%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12), 0 0 0 4px #eef2f7; }
.choice.right { background: #e7fbe9; box-shadow: 0 8px 0 #9fe3b0; animation: pop .4s; }
.choice.wrong { animation: shake .45s; opacity: .35; pointer-events: none; }
@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }

.reward {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  background: rgba(230, 247, 255, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadein .2s;
}
.reward .card { display: flex; flex-direction: column; align-items: center; padding: 24px 40px; gap: 4px; animation: pop .45s; }
.reward img { width: clamp(140px, 22vw, 220px); height: auto; }
.reward .big { font-size: clamp(44px, 7vw, 80px); font-weight: 800; line-height: 1.05; }
.reward .small { font-size: 1.4em; font-weight: 700; color: var(--ink-soft); }
@keyframes fadein { from { opacity: 0; } }

/* Đếm */
.count-board { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.6vw, 18px); max-width: min(760px, 100%); padding: 18px; }
.count-item { position: relative; width: clamp(68px, 11vw, 110px); aspect-ratio: 1; border-radius: 24px; background: rgba(255,255,255,.7); display: grid; place-items: center; transition: transform .15s; }
.count-item img { width: 82%; }
.count-item.counted { background: #fff7d6; transform: scale(1.06); box-shadow: 0 0 0 4px var(--sun); }
.count-item .tag { position: absolute; top: -10px; right: -8px; min-width: 38px; height: 38px; border-radius: 19px; background: var(--primary); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.05em; animation: pop .3s; }
.choices.nums .choice { font-size: clamp(56px, 9vw, 110px); aspect-ratio: 1.2; color: var(--ink); }

/* Lật thẻ */
.memory { display: grid; gap: clamp(10px, 2vw, 18px); width: min(100%, 760px); grid-template-columns: repeat(var(--cols), 1fr); perspective: 900px; }
.mcard { aspect-ratio: 1; position: relative; transform-style: preserve-3d; transition: transform .45s; }
.mcard.open, .mcard.done { transform: rotateY(180deg); }
.mcard .face { position: absolute; inset: 0; border-radius: 24px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.1); }
.mcard .back { background: radial-gradient(circle at 30% 25%, #ffd27a, #ffb02e 60%); }
.mcard .back img { width: 46%; opacity: .95; }
.mcard .front { background: #fff; transform: rotateY(180deg); }
.mcard .front img { width: 74%; }
.mcard.done .front { background: #e7fbe9; box-shadow: 0 6px 0 #9fe3b0; }
.mcard.done { animation: matched .5s .2s; }
@keyframes matched { 50% { transform: rotateY(180deg) scale(1.08); } }

/* Linh vật trong trận */
.buddy { position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); width: clamp(70px, 10vw, 120px); z-index: 4; pointer-events: none; transition: transform .2s; }
.buddy.cheer { animation: cheer .7s; }
.buddy.sad { animation: sad .6s; }
@keyframes cheer { 30% { transform: translateY(-40px) rotate(-10deg); } 60% { transform: translateY(-20px) rotate(8deg); } }
@keyframes sad { 25%, 75% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (max-height: 640px) and (orientation: landscape) { .buddy { display: none; } }

/* Kết quả */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(35, 50, 77, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein .25s; }
.panel { width: min(560px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 36px; padding: 28px 24px 26px; text-align: center; box-shadow: 0 14px 0 rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.25); animation: pop .4s; }
.panel h2 { margin: 0 0 6px; font-size: 1.8em; line-height: 1.1; }
.panel .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.bigstars { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.bigstars img { width: clamp(70px, 14vw, 100px); filter: grayscale(1) opacity(.25); transform: scale(.7); transition: all .35s cubic-bezier(.3, 1.6, .6, 1); }
.bigstars img.lit { filter: none; transform: scale(1); }
.prize { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; padding: 12px; border-radius: 24px; background: #fff7e0; font-weight: 700; }
.prize img { width: 76px; height: 76px; animation: hop 1.6s infinite; }

/* Album */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 26vw), 1fr)); gap: 14px; }
.sticker { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 24px; box-shadow: 0 5px 0 var(--line); }
.sticker img { width: 78%; }
.sticker.missing img { filter: brightness(0) opacity(.12); }

/* Góc bố mẹ */
.parent { gap: 16px; font-size: .9em; }
.section { padding: 18px 20px; }
.section h3 { margin: 0 0 10px; font-size: 1.25em; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 2px solid var(--line); flex-wrap: wrap; }
.opt:first-of-type { border-top: 0; }
.seg { display: inline-flex; background: #eef3f9; border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 46px; padding: 0 16px; border-radius: 999px; font-weight: 700; color: var(--ink-soft); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.kidstat { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 2px solid var(--line); flex-wrap: wrap; }
.kidstat:first-of-type { border-top: 0; }
.kidstat > img { width: 64px; height: 64px; }
.kidstat .info { flex: 1; min-width: 200px; }
.kidstat .info b { font-size: 1.2em; }
.kidstat .meta { color: var(--ink-soft); font-size: .92em; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 6px; }
.bars span { flex: 1; max-width: 28px; background: var(--blue); border-radius: 6px 6px 2px 2px; min-height: 3px; position: relative; }
.bars span::after { content: attr(data-d); position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--ink-soft); }
.small-btn { min-height: 46px; padding: 0 16px; border-radius: 999px; background: #eef3f9; font-weight: 700; }
.small-btn.danger { color: #c03030; }
a.small-btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.note { color: var(--ink-soft); font-size: .92em; margin: 6px 0 0; }

/* Khóa bố mẹ */
.gate .q { font-size: 2.4em; font-weight: 800; margin: 6px 0; }
.gate .ans { min-height: 64px; font-size: 2em; font-weight: 800; background: #eef3f9; border-radius: 20px; display: grid; place-items: center; margin-bottom: 12px; letter-spacing: 4px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button { min-height: 64px; border-radius: 20px; background: #f3f6fb; font-size: 1.6em; font-weight: 800; box-shadow: 0 4px 0 var(--line); }
.keypad button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.keypad .ok { background: var(--good); color: #fff; box-shadow: 0 4px 0 #169947; }

/* Nghỉ mắt */
.rest { align-items: center; justify-content: center; text-align: center; gap: 16px; }
.rest img.zz { width: clamp(150px, 25vw, 240px); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }

/* Banner cài đặt */
.install { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-top: auto; background: rgba(255,255,255,.92); border-radius: 22px; font-size: .85em; font-weight: 600; box-shadow: 0 4px 0 var(--line); }
.install b { font-size: 1.6em; }
.install .x { margin-left: auto; font-size: 1.4em; padding: 4px 10px; color: var(--ink-soft); }
.steps { text-align: left; margin: 10px 0 0; padding-left: 1.3em; }
.steps li { margin: 6px 0; }

/* Pháo giấy */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; z-index: 40; animation: fadein .2s; max-width: calc(100% - 32px); text-align: center; }

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

/* ===== M1 ===== */
.island.special { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.5), transparent 60%), linear-gradient(135deg, #845ef7, #ff6fae); }
@media (min-width: 821px) {
  .islands { grid-template-columns: repeat(4, 1fr); }
  .island { aspect-ratio: 1.35 / 1; font-size: 1.15em; padding: 8px 10px 10px; }
  .island img { width: 46%; margin-top: 2%; }
}

/* Ghép vần */
.word-row { display: flex; align-items: center; gap: clamp(12px, 3vw, 30px); }
.word-pic img { width: clamp(110px, 18vw, 180px); height: auto; filter: drop-shadow(0 8px 8px rgba(0,0,0,.12)); }
.stage > .word-pic img { width: clamp(120px, 20vw, 200px); }
.word-show { font-size: clamp(64px, 11vw, 120px); font-weight: 800; line-height: 1; background: #fff; border-radius: 28px; padding: 12px 28px; box-shadow: 0 6px 0 var(--line); }
.word-show .blank { display: inline-block; min-width: .7em; color: #c7d3e3; border-bottom: 6px dashed #c7d3e3; text-align: center; margin: 0 2px; }
.choices.syll .choice { font-size: clamp(48px, 8vw, 96px); aspect-ratio: 1.25; }
.choices.syll.n6 .choice { aspect-ratio: 1.6; }

/* Toán */
.mathbox { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.groups { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.group { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(46vw, 330px); padding: 10px; background: rgba(255,255,255,.75); border-radius: 22px; }
.gi { position: relative; width: clamp(40px, 6.4vw, 62px); aspect-ratio: 1; }
.gi img { width: 100%; }
.gi.gone img { opacity: .3; filter: grayscale(1); }
.gi.gone::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bad); font-size: 1.9em; font-weight: 800; }
.op { font-size: clamp(40px, 6vw, 64px); color: var(--primary); }
.eq { font-size: clamp(44px, 7.5vw, 84px); font-weight: 800; line-height: 1.05; background: #fff; border-radius: 24px; padding: 6px 26px; box-shadow: 0 6px 0 var(--line); }
.cmp { display: flex; align-items: center; gap: clamp(10px, 3vw, 30px); }
.cmp .side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cmp .eq.q { color: #c7d3e3; }
.frames { display: flex; flex-direction: column; gap: 12px; }
.frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 5px 0 var(--line); }
.frame i { width: clamp(34px, 6vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 3px dashed #d9e2ee; }
.frame i.on { background: radial-gradient(circle at 35% 30%, #ff9f80, #ff6b6b); border: 0; }
.clock { width: clamp(180px, 30vw, 260px); height: auto; }
.reward .clock { width: clamp(150px, 22vw, 200px); }
.clock .rim { fill: #fff; stroke: var(--blue); stroke-width: 8; }
.clock .cn { font: 800 18px 'Baloo 2', sans-serif; fill: var(--ink); }
.clock .mh { stroke: var(--ink-soft); stroke-width: 5; stroke-linecap: round; }
.clock .hh { stroke: var(--primary); stroke-width: 8; stroke-linecap: round; }
.clock .hub { fill: var(--ink); }
.choice .hour { font-size: .45em; }
.choice svg.shape, .reward svg.shape { width: 72%; height: auto; }
.reward svg.shape { width: clamp(130px, 20vw, 190px); }

/* Tư duy */
.shadow img { width: clamp(150px, 24vw, 230px); filter: brightness(0) opacity(.78); }
.seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.seq span { width: clamp(52px, 8.5vw, 92px); aspect-ratio: 1; background: rgba(255,255,255,.8); border-radius: 18px; display: grid; place-items: center; }
.seq span img { width: 80%; }
.seq .q { border: 4px dashed var(--sun); font-size: 2em; font-weight: 800; color: #e0a800; background: #fff; }
.maze-wrap { width: min(92vw, 70vh, 640px); }
.maze { width: 100%; height: auto; touch-action: none; display: block; }
.maze .floor { fill: #fff; }
.maze .wall { stroke: #5b6b88; stroke-width: 9; stroke-linecap: round; }
.maze .trail { fill: none; stroke: #ffd43b; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.maze .me { transition: x .12s, y .12s; }
.sudoku-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sudoku { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(86vw, 52vh, 460px); padding: 10px; background: #5b6b88; border-radius: 24px; }
.sudoku .cell { aspect-ratio: 1; background: #fff; border-radius: 14px; display: grid; place-items: center; }
.sudoku .cell.rb { margin-bottom: 6px; } .sudoku .cell.cb { margin-right: 6px; }
.sudoku .cell img { width: 78%; }
.sudoku .cell.empty { background: #eef6ff; }
.sudoku .cell.sel { box-shadow: inset 0 0 0 5px var(--sun); background: #fff9db; }
.sudoku .cell.filled { background: #e7fbe9; animation: pop .35s; }
.sudoku .cell.given { background: #f8fafc; }
.shake { animation: shake .45s; }
.sudoku-pal { display: flex; gap: 12px; }
.sudoku-pal .pal { width: clamp(70px, 14vw, 100px); aspect-ratio: 1; background: #fff; border-radius: 22px; box-shadow: 0 6px 0 var(--line); display: grid; place-items: center; }
.sudoku-pal .pal img { width: 78%; }
.sudoku-pal .pal:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }

/* Âm nhạc */
.music { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.song-title { font-size: 1.4em; font-weight: 800; background: #fff; padding: 4px 22px; border-radius: 999px; box-shadow: 0 4px 0 var(--line); }
.xylo { display: flex; align-items: center; gap: clamp(4px, 1vw, 10px); width: min(100%, 900px); height: min(46vh, 380px); padding: 16px; background: linear-gradient(#a0522d, #7a3e1d); border-radius: 26px; box-shadow: 0 10px 0 #5c2e14; }
.xkey { flex: 1; height: var(--h); background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%), var(--c); border-radius: 14px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 4px 0 rgba(0,0,0,.25); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; color: #fff; font-weight: 800; font-size: clamp(14px, 2vw, 22px); text-shadow: 0 2px 0 rgba(0,0,0,.25); touch-action: none; position: relative; }
.xkey::before, .xkey::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(255,255,255,.7); }
.xkey::before { top: 12px; } .xkey::after { bottom: 44px; }
.xkey.hit { animation: hit .25s; }
.xkey.next { outline: 6px solid #fff; outline-offset: 3px; animation: glow 1s ease-in-out infinite; }
.xkey.nope { animation: shake .4s; }
@keyframes hit { 50% { transform: scaleY(.94) translateY(4px); filter: brightness(1.25); } }
@keyframes glow { 50% { outline-color: var(--sun); transform: translateY(-6px); } }
.simon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.5vw, 22px); width: min(86vw, 58vh, 520px); }
.pad { aspect-ratio: 1; background: var(--c); border-radius: 32px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.18); opacity: .55; transition: opacity .1s, transform .1s; touch-action: none; }
.pad.lit { opacity: 1; transform: scale(1.05); box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 0 30px var(--c); }

/* Tô màu */
.art { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.canvas-box { width: min(100%, 860px, 112vh); aspect-ratio: 4 / 3; background: #fff; border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.canvas-box.draw { aspect-ratio: 16 / 10; width: min(100%, 980px, 100vh); }
.cpage { width: 100%; height: 100%; display: block; }
.cpage .region { stroke: #2b2d42; stroke-width: 3; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.cpage .deco { stroke: #2b2d42; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.drawc { width: 100%; height: 100%; display: block; touch-action: none; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.sw { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.15); font-size: 24px; display: grid; place-items: center; background: #fff; }
.sw.on { transform: scale(1.2); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 4px var(--ink); }
.art-tools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.sizes { display: flex; gap: 8px; }
.size { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); }
.size i { background: var(--ink); border-radius: 50%; }
.size.on { box-shadow: 0 0 0 3px var(--ink); }
.stamps { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px; }
.stamp { flex: none; width: 54px; height: 54px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); }
.stamp img { width: 80%; }
.stamp.on { box-shadow: 0 0 0 3px var(--primary); background: #fff4ee; }
.art .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.art .btn { min-height: 56px; font-size: 1em; }

/* Khám phá */
.sort { display: grid; grid-template-columns: 1fr minmax(150px, 1fr) 1fr; gap: clamp(10px, 2vw, 24px); width: 100%; align-items: stretch; min-height: 50vh; }
@media (max-width: 640px) { .sort { grid-template-columns: 1fr 1fr; } .sort-slot { grid-column: 1 / -1; order: -1; } }
.basket { display: flex; flex-direction: column; background: rgba(255,255,255,.85); border-radius: 28px; padding: 12px; border: 5px dashed #c7d3e3; transition: transform .15s, border-color .15s; cursor: pointer; }
.basket.over { border-color: var(--good); transform: scale(1.04); background: #f0fff4; }
.bhead { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 1.2em; text-align: center; line-height: 1.1; }
.bhead img { width: clamp(60px, 9vw, 90px); }
.bin { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.mini img { width: 40px; animation: pop .35s; }
.sort-slot { display: grid; place-items: center; }
.sort-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 20px; background: #fff; border-radius: 28px; box-shadow: var(--shadow); font-weight: 800; font-size: 1.15em; text-align: center; touch-action: none; cursor: grab; position: relative; z-index: 3; }
.sort-card img { width: clamp(100px, 16vw, 160px); }
.sort-card.drag { box-shadow: 0 20px 40px rgba(0,0,0,.25); transition: none; }
.sort-card.fly { opacity: 0; transform: scale(.3) !important; transition: all .3s; }

/* Tập viết */
.trace-wrap { display: grid; place-items: center; }
.trace-svg { width: min(88vw, 47vh); height: auto; background: #fff; border-radius: 26px; box-shadow: var(--shadow); touch-action: none; }
.trace-svg .ol { stroke-width: .8; }
.trace-svg .l0 { stroke: #ff8fab; stroke-width: 1.4; }
.trace-svg .l1 { stroke: #a5c8f0; }
.trace-svg .l2 { stroke: #d6e4f5; stroke-dasharray: 3 3; }
.trace-svg .guide { fill: none; stroke: #edf2f8; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .guide.now { stroke: #dfe9f6; }
.trace-svg .dash { fill: none; stroke: #c3d0e0; stroke-width: 1.6; stroke-dasharray: 3 4; stroke-linecap: round; }
.trace-svg .dash.now { stroke: #8fa3bf; }
.trace-svg .ink { fill: none; stroke: #ff6b3d; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .start { fill: #22c55e; stroke: #fff; stroke-width: 2.5; animation: beacon 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.trace-svg .start.moving { animation: none; }
.trace-svg .start.hint { animation: beacon .3s 3; }
.trace-svg .snum { font: 800 9px 'Baloo 2', sans-serif; fill: #22a04f; }
.trace-svg.done .ink { stroke: #22c55e; transition: stroke .3s; }
@keyframes beacon { 50% { transform: scale(1.45); } }

/* Bố con thi tài */
.duel-screen { position: relative; }
.duel-vs { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 6px 0 4px; font-size: 2.4em; font-weight: 800; color: var(--primary); }
.duel-vs img { width: clamp(64px, 10vw, 100px); }
.duel-topics { max-width: 820px; margin: 0 auto; width: 100%; }
.duel { flex: 1; display: flex; gap: 10px; min-height: calc(100vh - 40px); }
.dside { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 30px; background: rgba(255,255,255,.55); transition: background .2s; }
.dside.s0 { background: rgba(132, 94, 247, .14); }
.dside.s1 { background: rgba(255, 138, 91, .16); }
.dside.win { background: rgba(34, 197, 94, .28); }
.dside.lock { opacity: .45; }
@media (orientation: portrait) { .duel { flex-direction: column; } .dside.s0 { transform: rotate(180deg); } }
.dhead { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2em; }
.dav img { width: 48px; }
.dscore { min-width: 56px; height: 56px; border-radius: 18px; background: #fff; display: grid; place-items: center; font-size: 1.6em; box-shadow: 0 4px 0 var(--line); }
.dvis { flex: 1; display: grid; place-items: center; }
.dgroup { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 320px; }
.dgroup img { width: clamp(34px, 5vw, 50px); }
.dear { font-size: 64px; }
.deq { font-size: clamp(48px, 8vw, 80px); font-weight: 800; }
.dchoices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.dch { min-height: clamp(70px, 12vh, 110px); background: #fff; border-radius: 22px; box-shadow: 0 6px 0 var(--line); font-size: clamp(36px, 6vw, 60px); font-weight: 800; touch-action: none; }
.dch.right { background: #22c55e; color: #fff; }
.dch.wrong { background: #ffd6d6; }
.dquit { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 48px; height: 48px; font-size: 20px; }
.duel-final { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 2.6em; font-weight: 800; }
.duel-final img { width: 54px; }
.duel-final span { display: flex; align-items: center; gap: 6px; }

/* ===== M2 ===== */
@media (min-width: 821px) { .island { aspect-ratio: 1.55 / 1; } .island img { width: 40%; } }

/* Linh vật mặc đồ */
.dressed { position: relative; display: block; border-radius: 22px; }
.dressed .dm { width: 100%; height: auto; display: block; }
.dressed .o-hat { position: absolute; top: -34%; left: 18%; width: 64%; }
.dressed .o-eyes { position: absolute; top: 24%; left: 20%; width: 60%; }
.dressed .o-hand { position: absolute; right: -22%; bottom: -8%; width: 50%; }
.hello .avatar { overflow: visible; }
.hello .avatar .dressed { width: 100%; height: 100%; }
.buddy.dressed { position: fixed; }

/* Thử thách hằng ngày */
.daily { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin: -4px 0 12px; background: rgba(255,255,255,.88); border-radius: 22px; box-shadow: 0 4px 0 var(--line); font-weight: 800; }
.daily.claimed { background: #e7fbe9; }
.dtasks { display: flex; gap: 8px; }
.dtask { position: relative; width: 50px; height: 50px; border-radius: 16px; background: var(--c); display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.dtask img { width: 72%; }
.dtask.done img { opacity: .5; }
.dtask b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.streak { margin-left: auto; color: #e8590c; }

/* Huy hiệu */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 28vw), 1fr)); gap: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: #fff; border-radius: 22px; box-shadow: 0 5px 0 var(--line); font-weight: 700; font-size: .85em; text-align: center; line-height: 1.15; }
.badge img { width: 64px; }
.badge.missing img { filter: grayscale(1) opacity(.3); }
.badge.missing { color: var(--ink-soft); }

/* Phòng của bé */
.roomwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .roomwrap { grid-template-columns: 1fr; } }
.stagebox { display: grid; place-items: center; padding: 70px 20px 30px; background: rgba(255,255,255,.7); border-radius: 32px; box-shadow: var(--shadow); }
.dressed.big { width: min(260px, 60vw); padding: 10px; }
.shopbox { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.shopbox .seg button { font-size: 26px; min-height: 56px; padding: 0 20px; }
.wardrobe { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; width: 100%; }
.ward { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: #fff; border-radius: 22px; box-shadow: 0 5px 0 var(--line); font-weight: 700; font-size: .85em; border: 4px solid transparent; }
.ward img { width: 64px; }
.ward.on { border-color: var(--good); background: #f0fff4; }
.wprice { color: #b07d00; font-weight: 800; }
.wtag { color: var(--good); font-weight: 800; }

/* Bóng bay */
.barena { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; }
.bprompt { position: relative; z-index: 3; }
.bsky { position: relative; width: 100%; flex: 1; min-height: 60vh; overflow: hidden; border-radius: 28px; touch-action: none; }
.balloon { position: absolute; left: 0; top: 0; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 28%), var(--c); box-shadow: inset -8px -10px 0 rgba(0,0,0,.12); display: grid; place-items: center; touch-action: none; will-change: transform; }
.balloon::after { content: ''; position: absolute; bottom: -38px; left: 50%; width: 2px; height: 40px; background: rgba(0,0,0,.25); }
.balloon::before { content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--c); filter: brightness(.9); }
.balloon .bl { color: #fff; font-weight: 800; font-size: clamp(32px, 5vw, 50px); text-shadow: 0 2px 0 rgba(0,0,0,.25); line-height: 1; }
.balloon .bl img { width: 66%; display: block; margin: 0 auto; }
.balloon.popped { animation: burst .3s forwards; pointer-events: none; }
@keyframes burst { to { opacity: 0; scale: 1.6; } }

/* Đua xe */
.race { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.track { position: relative; width: 100%; max-width: 1000px; background: #495057; border-radius: 24px; padding: 10px 0; box-shadow: inset 0 0 0 6px #343a40; }
.lane { position: relative; height: clamp(70px, 11vh, 100px); border-bottom: 3px dashed rgba(255,255,255,.5); }
.lane:last-of-type { border-bottom: 0; }
.finish { position: absolute; top: 0; bottom: 0; right: 4%; width: 18px; background: repeating-conic-gradient(#fff 0 25%, #212529 0 50%) 0 0 / 18px 18px; }
.car { position: absolute; top: 50%; transform: translateY(-50%) scaleX(-1); width: clamp(80px, 12vw, 120px); transition: left .35s ease-out; }
.car > img:first-child { width: 100%; }
.car .driver { position: absolute; width: 30%; top: 22%; left: 40%; transform: scaleX(-1); }
.car.kid { width: clamp(100px, 15vw, 150px); }
.car.boost { animation: boost .35s; }
@keyframes boost { 50% { transform: translateY(-60%) scaleX(-1); } }
.rq { font-size: clamp(54px, 9vw, 96px); }

/* Truyện */
.storypage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 900px; }
.stitle { margin: 0; font-size: 1.6em; }
.simgs { display: flex; gap: 20px; justify-content: center; }
.simgs img { width: clamp(120px, 20vw, 200px); filter: drop-shadow(0 10px 10px rgba(0,0,0,.15)); animation: bob 3s ease-in-out infinite; }
.stext { background: #fff; border-radius: 26px; padding: 14px 26px; box-shadow: var(--shadow); width: 100%; }
.sline { margin: 6px 0; font-size: clamp(26px, 4vw, 40px); font-weight: 700; line-height: 1.45; }
.sw-word { font: inherit; padding: 0 3px; border-radius: 10px; transition: background .12s, color .12s; }
.sw-word.read { color: #1c7ed6; }
.sw-word.hl { background: var(--sun); color: var(--ink); }
.storypage .row { display: flex; gap: 12px; }
.tword { font-size: .5em; }

/* Nghe – viết */
.dict { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.dslots { display: flex; gap: 10px; }
.dslot { min-width: 90px; height: 90px; padding: 0 14px; border-radius: 22px; background: #fff; display: grid; place-items: center; font-size: 48px; font-weight: 800; color: #c7d3e3; box-shadow: 0 5px 0 var(--line); cursor: pointer; }
.dslot.tone { font-size: 22px; }
.dslot.on { color: var(--ink); }
.dslot.bad { background: #ffe3e3; animation: shake .45s; }
.dword { font-size: clamp(48px, 8vw, 80px); font-weight: 800; min-height: 1.1em; line-height: 1.1; }
.dstep { font-weight: 800; color: var(--ink-soft); }
.dkeys { display: grid; gap: 8px; width: 100%; max-width: 900px; grid-template-columns: repeat(8, 1fr); }
.dkeys.k-v { grid-template-columns: repeat(6, 1fr); }
.dkeys.k-t { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 600px) { .dkeys { grid-template-columns: repeat(5, 1fr); } .dkeys.k-v, .dkeys.k-t { grid-template-columns: repeat(4, 1fr); } }
.dkey { min-height: 64px; background: #fff; border-radius: 18px; box-shadow: 0 5px 0 var(--line); font-size: 32px; font-weight: 800; }
.dkey:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }

/* Đọc to */
.aloud { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aword { display: flex; align-items: center; gap: 20px; background: #fff; padding: 14px 30px; border-radius: 30px; box-shadow: var(--shadow); }
.aword img { width: clamp(100px, 16vw, 150px); }
.aword span { font-size: clamp(64px, 11vw, 110px); font-weight: 800; }
.mic { width: 110px; height: 110px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 52px; box-shadow: 0 8px 0 #c92a2a; }
.mic.on { animation: pulse 1s infinite; background: var(--good); box-shadow: 0 8px 0 #169947; }
.astatus { min-height: 1.4em; font-weight: 700; color: var(--ink-soft); text-align: center; max-width: 520px; }
.acheck { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: rgba(255,255,255,.8); padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.small-btn.good { background: #d3f9d8; color: #1b7a35; }

/* Siêu thị */
.shop { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 900px; }
.customer { display: flex; align-items: center; gap: 14px; }
.cust img { width: clamp(80px, 12vw, 120px); }
.bubble { position: relative; display: flex; gap: 12px; padding: 12px 20px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); font-size: 40px; }
.bubble::before { content: ''; position: absolute; left: -14px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right: 14px solid #fff; }
.oitem { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 44px; }
.oitem img { width: 56px; }
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; padding: 14px; background: linear-gradient(#e9c79a, #d4a373); border-radius: 24px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.sitem { aspect-ratio: 1; background: rgba(255,255,255,.75); border-radius: 20px; display: grid; place-items: center; }
.sitem img { width: 72%; }
.sitem:active { transform: scale(.94); }
.basket-row { display: flex; align-items: center; gap: 14px; width: 100%; }
.basket2 { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 84px; padding: 8px 14px; background: #fff; border-radius: 24px; border: 4px dashed #c7d3e3; }
.basket2 .cart { width: 56px; }
.basket-items { display: flex; flex-wrap: wrap; gap: 4px; }
.bitem img { width: 44px; animation: pop .3s; }

/* Đo, cân, tháp */
.choices.pencils { max-width: 700px; }
.choices.pencils .choice { aspect-ratio: auto; min-height: 70px; padding: 12px; justify-items: start; }
.pencil-svg { max-width: 100%; height: auto; }
.choices.towers .choice { aspect-ratio: .8; align-items: end; padding-bottom: 14px; }
.tower { display: flex; flex-direction: column-reverse; gap: 3px; }
.tower i { display: block; width: clamp(36px, 6vw, 56px); height: clamp(18px, 3vh, 26px); border-radius: 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.scale-wrap { display: grid; place-items: center; height: clamp(200px, 32vh, 280px); }
.scale { position: relative; width: min(560px, 88vw); height: 100%; }
.scale .post { position: absolute; left: 50%; bottom: 0; width: 18px; margin-left: -9px; height: 70%; background: #868e96; border-radius: 8px 8px 0 0; }
.scale .post::after { content: ''; position: absolute; bottom: 0; left: -50px; width: 118px; height: 16px; background: #495057; border-radius: 8px; }
.scale .beam { position: absolute; left: 6%; right: 6%; top: 30%; height: 12px; background: #495057; border-radius: 6px; transition: transform .6s cubic-bezier(.3, 1.4, .6, 1); z-index: 1; }
.scale .pan { position: absolute; top: 6px; width: 34%; height: 90px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 8px solid #adb5bd; border-radius: 0 0 60px 60px; transition: transform .6s; transform-origin: top center; }
.scale .pan img { width: 70%; margin-bottom: 2px; }
.scale .pan.left { left: -4%; } .scale .pan.right { right: -4%; }
.measure { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; background: rgba(255,255,255,.8); border-radius: 22px; max-width: 100%; overflow-x: auto; }
.clips { display: flex; }
.clip { width: 56px; height: auto; }
.ruled .pen-on-ruler { padding-left: 15px; }
.ruler { max-width: none; }
.choices.nums .choice span:only-child { line-height: 1; }

/* Thứ trong tuần, lịch */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: 100%; max-width: 900px; }
.day { aspect-ratio: .8; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: clamp(20px, 3.4vw, 34px); font-weight: 800; }
.day img { width: 50%; }
.day.today { background: #fff3bf; box-shadow: 0 5px 0 #ffd43b; }
.day.wkend b { color: var(--bad); }
.day.right { background: #d3f9d8; box-shadow: 0 5px 0 #8ce99a; }
.cal { width: min(100%, 640px); background: #fff; border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.calhead { background: var(--bad); color: #fff; font-weight: 800; font-size: 1.3em; text-align: center; padding: 8px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px; }
.cw { text-align: center; font-weight: 800; color: var(--ink-soft); padding: 4px 0; border-radius: 10px; }
.cw.wkend { color: var(--bad); }
.cw.hl { background: var(--sun); color: var(--ink); }
.cd { aspect-ratio: 1.1; border-radius: 12px; background: #f3f6fb; font-weight: 800; font-size: clamp(16px, 2.6vw, 24px); }
.cd.wkend { color: var(--bad); }
.cd.now { box-shadow: inset 0 0 0 3px var(--blue); }
.cd.right { background: var(--good); color: #fff; }

/* Ghép tranh */
.jigsaw { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.jwrap { position: relative; width: min(100%, 620px, 74vh * 1.333); aspect-ratio: 4 / 3; }
.jghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .18; border-radius: 18px; }
.jboard { position: absolute; inset: 0; display: grid; gap: 3px; background: rgba(255,255,255,.5); border-radius: 18px; padding: 3px; border: 3px dashed #a5c8f0; }
.jboard.done { gap: 0; border-style: solid; border-color: var(--good); padding: 0; }
.jslot { border-radius: 8px; overflow: hidden; }
.jslot svg { width: 100%; height: 100%; display: block; }
.jslot.ok { animation: pop .35s; }
.jtray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jpiece { width: var(--pw); aspect-ratio: 4 / 3; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.18); touch-action: none; position: relative; z-index: 2; }
.jpiece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.jpiece.drag { z-index: 10; box-shadow: 0 18px 30px rgba(0,0,0,.3); }
.jpiece.sel { outline: 5px solid var(--sun); }

/* Trình tự */
.seqgame { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.stitle2 { font-size: 1.4em; font-weight: 800; background: #fff; padding: 4px 22px; border-radius: 999px; box-shadow: 0 4px 0 var(--line); }
.qslots, .qtray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 860px; }
.qtray { min-height: 140px; }
.qslot { position: relative; aspect-ratio: .9; border: 4px dashed #c7d3e3; border-radius: 22px; background: rgba(255,255,255,.6); display: grid; place-items: center; }
.qslot > b { position: absolute; top: 6px; left: 10px; color: #a5b4c8; font-size: 1.2em; }
.qslot.ok { border-color: var(--good); background: #e7fbe9; }
.qcard { width: 100%; height: 100%; aspect-ratio: .9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); font-weight: 800; font-size: .85em; text-align: center; line-height: 1.1; padding: 6px; }
.qcard img { width: 66%; }

/* Tìm điểm khác */
.spot { display: flex; gap: 14px; width: 100%; justify-content: center; }
@media (orientation: portrait) { .spot { flex-direction: column; align-items: center; } }
.spic { flex: 1; max-width: 560px; width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
@media (orientation: portrait) { .spic { flex: none; width: min(100%, 44vh * 1.333); } }
.spic svg { width: 100%; height: 100%; display: block; }
.cpage.done .region { cursor: pointer; }
.cpage .ring { fill: none; stroke: #e03131; stroke-width: 5; animation: pop .35s; pointer-events: none; }

/* ===== Khu vui chơi ===== */
.funbar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; margin: -4px 0 14px; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #7048e8, #f03e3e 60%, #f59f00); box-shadow: 0 6px 0 rgba(0,0,0,.15); text-align: left; }
.funbar > img { width: 54px; animation: bob 2s ease-in-out infinite; }
.funbar .ft { font-weight: 800; font-size: 1.3em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.funbar .fsub { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.92); color: var(--ink); padding: 2px 12px 2px 6px; border-radius: 999px; font-weight: 800; }
.funbar .fsub img { width: 30px; }
.funbar .fgames { margin-left: auto; display: flex; gap: 4px; }
.funbar .fgames img { width: 44px; }
@media (max-width: 560px) { .funbar .fgames { display: none; } }
.prize.ticket { background: #f3f0ff; }
.fungames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
@media (max-width: 700px) { .fungames { grid-template-columns: 1fr; } }
.fungame { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px; border-radius: 32px; color: #fff; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.45), transparent 60%), var(--c); box-shadow: 0 8px 0 rgba(0,0,0,.18); }
.fungame img { width: clamp(110px, 16vw, 160px); filter: drop-shadow(0 10px 8px rgba(0,0,0,.25)); animation: bob 2.6s ease-in-out infinite; }
.fungame b { font-size: 1.35em; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.fungame span { background: rgba(255,255,255,.9); color: var(--ink); border-radius: 999px; padding: 2px 14px; font-weight: 800; }
.fungame:active { transform: scale(.97); }
.funplay { position: fixed; inset: 0; z-index: 10; padding: 0; }
.funbox { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.funcv { display: block; touch-action: none; }
.funquit { position: absolute; z-index: 15; top: max(70px, env(safe-area-inset-top)); left: 12px; width: 48px; height: 48px; font-size: 20px; opacity: .85; }
.funscore { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 3em; font-weight: 800; }
.funscore img { width: 64px; }

/* ===== Game trí tuệ ===== */
.funsec { margin: 18px 0 4px; font-size: 1.35em; }
.funplay .lg { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #e7f5ff, #fff9db); padding: max(14px, env(safe-area-inset-top)) 16px 16px; overflow: auto; }
.lg-head { display: flex; align-items: center; gap: 14px; justify-content: center; padding-left: 60px; font-size: 1.3em; flex-wrap: wrap; }
.lg-prog { display: flex; gap: 6px; }
.lg-prog i { width: 16px; height: 16px; border-radius: 50%; background: #dee2e6; }
.lg-prog i.done { background: var(--good); } .lg-prog i.now { background: var(--sun); }
.lg-area { flex: 1; display: grid; place-items: center; padding: 10px 0; }
/* Lập trình robot */
.coding { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.cg-wrap { width: min(92vw, 62vh, 560px); }
.cg { position: relative; display: grid; gap: 4px; padding: 6px; background: #b2f2bb; border-radius: 20px; }
.cgc { aspect-ratio: 1; background: #ebfbee; border-radius: 10px; display: grid; place-items: center; position: relative; }
.cgc img { width: 76%; } .cgc .goal { animation: bob 1.6s infinite; } .cgc .coin { width: 50%; transition: opacity .2s; }
.bot { position: absolute; width: calc((100% - 12px) / var(--n)); left: calc(6px + (100% - 12px) / var(--n) * var(--x)); top: calc(6px + (100% - 12px) / var(--n) * var(--y)); padding: 2px; transition: left .35s, top .35s; pointer-events: none; z-index: 2; }
.bot.bump { animation: shake .4s; } .bot.win { animation: cheer .7s 2; }
.cside { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; }
.cprog { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cslot { width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 3px dashed #ced4da; font-size: 26px; display: grid; place-items: center; }
.cslot.on { border-style: solid; border-color: #40c057; }
.cslot.run { background: #fff3bf; transform: scale(1.12); }
.cpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cbtn { width: 76px; height: 76px; border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--line); font-size: 40px; }
.cbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
/* Nối dây */
.flow { width: min(92vw, 70vh, 600px); }
.fg { display: grid; gap: 3px; padding: 6px; background: #343a40; border-radius: 18px; touch-action: none; }
.fg.solved { box-shadow: 0 0 0 6px var(--good); }
.fgc { position: relative; aspect-ratio: 1; background: #212529; border-radius: 8px; }
.fgc .dot { position: absolute; inset: 16%; border-radius: 50%; z-index: 2; box-shadow: inset 0 -5px 0 rgba(0,0,0,.2); }
.fgc .bar { position: absolute; z-index: 1; }
.fgc .bar.l { left: 0; right: 50%; top: 36%; bottom: 36%; } .fgc .bar.r { left: 50%; right: 0; top: 36%; bottom: 36%; }
.fgc .bar.u { top: 0; bottom: 50%; left: 36%; right: 36%; } .fgc .bar.d { top: 50%; bottom: 0; left: 36%; right: 36%; }
.fgc .bar.l, .fgc .bar.r, .fgc .bar.u, .fgc .bar.d { border-radius: 0; }
/* Dẫn nước */
.pipes { position: relative; width: min(84vw, 66vh, 560px); padding: 0 46px; }
.pg { display: grid; gap: 4px; padding: 8px; background: #e9c79a; border-radius: 18px; }
.pg.solved { box-shadow: 0 0 0 6px #4dabf7; }
.pgc { aspect-ratio: 1; background: #fff4e6; border-radius: 10px; padding: 0; }
.pgc svg { width: 100%; height: 100%; transform: rotate(var(--r)); transition: transform .2s; display: block; }
.pgc .pb { stroke: #868e96; stroke-width: 34; stroke-linecap: round; fill: none; }
.pgc .pw { stroke: #e9ecef; stroke-width: 18; stroke-linecap: round; fill: none; transition: stroke .2s; }
.pgc .pj { fill: #868e96; }
.pgc.wet .pj { fill: #1c7ed6; }
.pgc.wet .pw { stroke: #4dabf7; }
.psrc, .pdst { position: absolute; width: 48px; } .psrc { left: 0; } .pdst { right: -4px; width: 56px; }
.psrc img, .pdst img { width: 100%; }
/* Bảng số */
.schulte { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.srow { display: flex; gap: 20px; align-items: center; font-size: 1.4em; font-weight: 800; }
.snext b { display: inline-block; min-width: 1.6em; text-align: center; background: var(--sun); border-radius: 12px; padding: 0 8px; }
.stimer { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sg { display: grid; gap: 8px; width: min(92vw, 66vh, 560px); }
.sgc { aspect-ratio: 1; background: var(--c); border-radius: 18px; font-size: clamp(28px, 6vw, 52px); font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }
.sgc.hit { opacity: .25; transform: scale(.9); }
.parentfun { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 4px 0; font-weight: 800; }
.parentfun.on { background: #fff3bf; border-radius: 999px; padding: 6px 8px 6px 18px; width: fit-content; margin: 4px auto; }
.lg-lvl { background: var(--sun); color: #5c4400; font-weight: 800; padding: 0 12px; border-radius: 999px; font-size: .8em; }
.lvup { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; background: #fff; padding: 16px 34px; border-radius: 30px; font-size: 2em; font-weight: 800; color: #e67700; box-shadow: var(--shadow); animation: pop .4s; }

/* ===== Thú cưng ===== */
.bars2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: -4px 0 14px; }
@media (max-width: 700px) { .bars2 { grid-template-columns: 1fr; } }
.bars2 .funbar { margin: 0; }
.petbar { background: linear-gradient(120deg, #ff8787, #f783ac 55%, #ffa94d); }
.petscreen { gap: 10px; }
.pet-bars { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pbar { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.9); padding: 4px 10px 4px 6px; border-radius: 999px; box-shadow: 0 3px 0 var(--line); }
.pbar img { width: 30px; }
.pbar i { display: block; width: clamp(54px, 9vw, 90px); height: 12px; border-radius: 6px; background: #e9ecef; overflow: hidden; }
.pbar b { display: block; height: 100%; background: linear-gradient(90deg, #51cf66, #94d82d); border-radius: 6px; transition: width .4s; }
.pbar.low b { background: linear-gradient(90deg, #ff6b6b, #ffa94d); }
.pbar.low { animation: pulse 1.4s infinite; }
.pbar.xp b { background: linear-gradient(90deg, #fab005, #ffd43b); }
.pet-lv { color: #e67700; font-size: .7em; }
.petroom { position: relative; flex: 1; min-height: 46vh; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); touch-action: none; background: #fff0f6; transition: filter .6s; }
.petroom .wall { position: absolute; inset: 0 0 32% 0; background: repeating-linear-gradient(90deg, #ffe3ec 0 40px, #ffd8e4 40px 80px); }
.petroom .floor { position: absolute; inset: 68% 0 0 0; background: repeating-linear-gradient(90deg, #e8c39e 0 70px, #dfb48a 70px 140px); }
.petroom .win { position: absolute; left: 8%; top: 12%; width: clamp(70px, 12vw, 120px); }
.petroom .pic { position: absolute; right: 9%; top: 14%; width: clamp(60px, 10vw, 100px); }
.petroom .plant { position: absolute; right: 5%; bottom: 20%; width: clamp(60px, 10vw, 100px); }
.petroom.night { filter: brightness(.55) saturate(.8); }
.petroom.bath .wall { background: repeating-linear-gradient(0deg, #d0ebff 0 34px, #e7f5ff 34px 36px), #e7f5ff; }
.petroom.bath .floor { background: repeating-linear-gradient(90deg, #a5d8ff 0 50px, #d0ebff 50px 100px); }
.petroom.bath .plant, .petroom.bath .pic { display: none; }
.pet { position: absolute; left: 50%; bottom: 10%; width: min(54%, 360px); transform: translateX(-50%) scale(var(--s, .8)); transform-origin: bottom center; transition: transform .5s; z-index: 2; }
.pet-img { width: 100%; display: block; animation: breathe 2.6s ease-in-out infinite; filter: drop-shadow(0 14px 10px rgba(0,0,0,.18)); }
.pet.sad .pet-img { animation-duration: 4s; filter: drop-shadow(0 14px 10px rgba(0,0,0,.18)) saturate(.75); }
.pet.dirty::after { content: ''; position: absolute; inset: 20% 15%; background: radial-gradient(circle at 25% 40%, rgba(120,72,36,.55) 0 7%, transparent 8%), radial-gradient(circle at 70% 30%, rgba(120,72,36,.5) 0 6%, transparent 7%), radial-gradient(circle at 55% 70%, rgba(120,72,36,.5) 0 8%, transparent 9%), radial-gradient(circle at 30% 75%, rgba(120,72,36,.45) 0 5%, transparent 6%); pointer-events: none; }
.pet.jump { animation: pjump .7s; } .pet.chomp .pet-img { animation: chomp .45s 3; } .pet.drink .pet-img { animation: drink 1.2s; }
.pet.wiggle .pet-img { animation: wiggle .5s; } .pet.no .pet-img { animation: shake .5s; }
@keyframes pjump { 40% { transform: translateX(-50%) translateY(-90px) scale(var(--s)) rotate(-12deg); } 70% { transform: translateX(-50%) translateY(-40px) scale(var(--s)) rotate(10deg); } }
@keyframes chomp { 50% { transform: scaleY(.88) scaleX(1.08); } }
@keyframes drink { 30%, 70% { transform: rotate(14deg) translateY(10px); } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.pet-acc img { position: absolute; }
.pet-acc .a-hat { width: 52%; left: 24%; top: -26%; }
.pet-acc .a-eyes { width: 56%; left: 22%; top: 30%; }
.pet-acc .a-neck { width: 30%; left: 35%; bottom: 2%; }
.pet-think { position: absolute; right: -30%; top: -30%; width: 48%; pointer-events: none; }
.pet-think .tb { width: 100%; animation: bob 2s infinite; }
.pet-think .ti { position: absolute; width: 48%; left: 26%; top: 18%; animation: bob 2s infinite; }
.pet-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.floaty { position: absolute; width: 40px; animation: floatup 1.2s ease-out forwards; }
@keyframes floatup { to { transform: translateY(-80px) scale(1.3); opacity: 0; } }
.flyfood { position: absolute; width: 60px; transition: all .5s cubic-bezier(.3, -.3, .6, 1.3); }
.bowl { position: absolute; width: 70px; }
.tub { position: absolute; z-index: -1; opacity: .95; }
.suds { position: absolute; animation: pop .3s; }
.showerhead { position: absolute; top: 2%; width: 90px; transform: rotate(-20deg); }
.thrown { position: absolute; width: 60px; transition: left .5s ease-out, top .5s cubic-bezier(.2, -.8, .6, 1); }
.thrown.go { left: 48%; top: 40%; }
.pet-tray { display: flex; gap: 12px; justify-content: center; align-items: center; min-height: 70px; flex-wrap: wrap; }
.food, .toy, .witem { width: 72px; height: 72px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--line); display: grid; place-items: center; position: relative; }
.food img, .toy img, .witem img { width: 74%; }
.food:active, .toy:active { transform: scale(.92); }
.witem.on { box-shadow: 0 0 0 4px var(--good); } .witem.locked img { filter: grayscale(1) opacity(.4); }
.wlock { position: absolute; bottom: -6px; font-size: .75em; font-weight: 800; background: var(--sun); border-radius: 999px; padding: 0 6px; }
.sponge-tip { display: flex; align-items: center; gap: 6px; font-weight: 800; background: #fff; padding: 6px 16px; border-radius: 999px; }
.sponge-tip img { width: 44px; }
.pet-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 600px) { .pet-actions { grid-template-columns: repeat(3, 1fr); } }
.pact { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); font-weight: 800; font-size: .85em; }
.pact img { width: 44px; }
.pact.on { background: #fff3bf; box-shadow: 0 5px 0 #ffd43b; }
.adopt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 700px) { .adopt { grid-template-columns: repeat(2, 1fr); } }
.adopt-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px; background: #fff; border-radius: 30px; box-shadow: var(--shadow); font-size: 1.2em; }
.adopt-card img { width: 80%; max-width: 160px; animation: bob 2.4s infinite; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ===== Số đến 100: khối chục và đơn vị ===== */
.blocks { display: flex; gap: 22px; align-items: flex-end; justify-content: center; flex-wrap: wrap; padding: 14px 20px; background: rgba(255,255,255,.85); border-radius: 22px; box-shadow: 0 5px 0 var(--line); }
.blocks .tens { display: flex; gap: 8px; flex-wrap: wrap; }
.blocks .rod { display: flex; flex-direction: column; gap: 2px; padding: 3px; background: #1c7ed6; border-radius: 6px; }
.blocks .rod i { display: block; width: clamp(14px, 2.6vw, 22px); height: clamp(9px, 1.7vw, 14px); background: #74c0fc; border-radius: 3px; }
.blocks .ones { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; }
.blocks .cube { display: block; width: clamp(14px, 2.6vw, 22px); height: clamp(14px, 2.6vw, 22px); background: #ffa94d; border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.reward .blocks { padding: 6px 10px; gap: 10px; }

/* Cấp học (Mầm / Chồi / Lớp 1) */
.tierpill { color: var(--ink); border: 3px solid var(--c); padding: 3px 14px 3px 6px; white-space: nowrap; }
.tierpill img { width: 30px; height: 30px; }
.tierov .panel { width: min(760px, 100%); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 6px; }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } }
.tiercard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 28px; color: #fff;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.45), transparent 60%), var(--c); box-shadow: 0 7px 0 rgba(0,0,0,.16); }
.tiercard img { width: clamp(70px, 12vw, 100px); filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); animation: bob 3s ease-in-out infinite; }
.tiercard b { font-size: 1.6em; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.tiercard .age { background: rgba(255,255,255,.92); color: var(--ink); border-radius: 999px; padding: 1px 12px; font-weight: 800; }
.tiercard .what { font-size: .85em; font-weight: 600; line-height: 1.25; opacity: .95; }
.tiercard.on { outline: 5px solid var(--sun); outline-offset: 3px; }
.tiercard:active { transform: scale(.97); }
@media (max-width: 640px) { .tiercard { flex-direction: row; flex-wrap: wrap; text-align: left; } .tiercard img { width: 60px; } .tiercard .what { flex-basis: 100%; } }
.tiertabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: -4px 0 10px; }
.tiertabs button { display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.8);
  box-shadow: 0 4px 0 var(--line); color: var(--ink); border: 3px solid transparent; }
.tiertabs button img { width: 38px; height: 38px; }
.tiertabs button b { font-size: 1.15em; }
.tiertabs button span { font-size: .8em; font-weight: 700; color: var(--ink-soft); }
.tiertabs button.on { background: var(--c); color: #fff; border-color: rgba(255,255,255,.9); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.tiertabs button.on span { color: #fff; }
@media (max-width: 520px) { .tiertabs button span { display: none; } }
.tierprog { position: relative; height: 26px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 2px 0 rgba(0,0,0,.06); overflow: hidden; max-width: 520px; width: 100%; margin: 0 auto 4px; }
.tierprog i { position: absolute; inset: 0 auto 0 0; background: var(--c); border-radius: 999px; transition: width .5s; }
.tierprog span { position: relative; display: block; text-align: center; font-weight: 800; line-height: 26px; font-size: .9em; text-shadow: 0 1px 0 #fff; }
.level.done::after { content: '✓'; position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .9em; }

/* Lớp 1 nâng cao: lời văn, tính dọc, đọc từ, xếp câu */
.wordprob { display: flex; align-items: center; gap: 16px; max-width: 760px; background: #fff; border-radius: 28px; padding: 14px 22px; box-shadow: 0 6px 0 var(--line); }
.wordprob img { width: clamp(64px, 10vw, 96px); flex: none; }
.wordprob p { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.35; text-align: left; }
.vcol { display: inline-grid; justify-items: end; font-size: clamp(54px, 9vw, 90px); font-weight: 800; line-height: 1.05; background: #fff; border-radius: 28px; padding: 10px 34px 10px 24px; box-shadow: 0 6px 0 var(--line); font-variant-numeric: tabular-nums; }
.vcol span { display: flex; gap: 18px; align-items: center; }
.vcol span i { font-style: normal; color: var(--primary); }
.vcol span:nth-child(2) { border-bottom: 6px solid var(--ink); padding-bottom: 4px; }
.vcol .q { color: #c7d3e3; }
.prompt-btn.readword { font-size: clamp(44px, 9vw, 84px); padding: 8px 36px; border-radius: 30px; }
.sent { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: clamp(30px, 5vw, 54px); font-weight: 800; background: #fff; border-radius: 26px; padding: 12px 22px; box-shadow: 0 6px 0 var(--line); max-width: 760px; }
.sent .blank { min-width: 1.6em; color: #c7d3e3; border-bottom: 5px dashed #c7d3e3; text-align: center; }
.choices.syll.words .choice { font-size: clamp(30px, 5vw, 52px); aspect-ratio: auto; min-height: 96px; }
.sent-done { font-size: clamp(34px, 6vw, 60px) !important; }
.tierov .note { margin-top: 14px; }
@media (max-width: 600px) {
  .topbar.home { gap: 8px; }
  .topbar.home .icon-btn { width: 48px; height: 48px; }
  .topbar.home .icon-btn img { width: 30px; height: 30px; }
  .topbar.home .pill { padding: 4px 10px 4px 6px; }
  .topbar.home .pill img { width: 26px; height: 26px; }
  .tiertabs { gap: 6px; flex-wrap: nowrap; }
  .tiertabs button { padding: 4px 12px 4px 6px; gap: 4px; }
  .tiertabs button img { width: 28px; height: 28px; }
  .tiertabs button b { font-size: 1em; white-space: nowrap; }
}
@media (max-width: 600px) { .funbar .fsub { font-size: .85em; white-space: nowrap; } }

/* Phòng thú cưng động */
.petroom.live { background: #fff0f6; min-height: 52vh; }
.petcv { position: absolute; inset: 0; display: block; touch-action: none; }
.pettip { font-weight: 700; text-align: center; }
.adopt-cv { width: 100%; max-width: 220px; height: auto; aspect-ratio: 32 / 26; }
.adopt-cv.big { max-width: 300px; }

/* Đua xe: chọn xe */
.carpick { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 70px 16px 16px; background: linear-gradient(#8ce99a, #69db7c); overflow: auto; }
.carpick h2 { margin: 0; color: #fff; font-size: 2em; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.carpick .cars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(860px, 100%); }
@media (max-width: 640px) { .carpick .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 14px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.15); border: 4px solid var(--c); }
.carcard canvas { width: 100%; max-width: 130px; height: auto; }
.carcard b { font-size: 1.25em; color: var(--c); }
.carcard span { font-weight: 700; color: var(--ink-soft); font-size: .9em; }
.carcard:active { transform: scale(.96); }
.carhelp { margin: 0; max-width: 640px; text-align: center; color: #fff; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.2); }

/* Vị trí trên/dưới/trái/phải, đọc câu */
.posgrid { display: grid; grid-template-columns: repeat(3, clamp(46px, 8vw, 80px)); grid-template-rows: repeat(3, clamp(46px, 8vw, 80px)); gap: 6px; background: #fff; border-radius: 28px; padding: 10px; box-shadow: 0 6px 0 var(--line); }
.posgrid span { display: grid; place-items: center; }
.posgrid img { width: 86%; }
.posgrid .p-top { grid-area: 1 / 2; } .posgrid .p-left { grid-area: 2 / 1; } .posgrid .p-center { grid-area: 2 / 2; }
.posgrid .p-right { grid-area: 2 / 3; } .posgrid .p-bottom { grid-area: 3 / 2; }
.posgrid .p-center img { width: 100%; }
.prompt-btn.readsent { font-size: clamp(28px, 5vw, 48px); padding: 10px 30px; border-radius: 28px; max-width: 900px; text-align: center; line-height: 1.25; }

/* Ảnh chụp thật trong bài học */
img.ph { aspect-ratio: 1; object-fit: cover; border-radius: 18%; filter: none !important; box-shadow: 0 4px 10px rgba(35,50,77,.18); background: #eef2f7; }
.choice img.ph { width: 86%; }
.group img.ph, .count-item img.ph { border-radius: 22%; }
.stage.imgwait .choices, .stage.imgwait img { opacity: 0; }
.stage .choices, .stage img { transition: opacity .2s; }
/* Bố cục: câu dài trên điện thoại xuống dòng, thanh thú cưng không gãy chữ */
.choices.words { display: flex; flex-wrap: wrap; justify-content: center; }
.choices.words .choice { flex: 0 1 auto; min-width: 22%; padding: 0 18px; }
.funbar .fsub { white-space: nowrap; }
@media (max-width: 900px) and (orientation: portrait) {
  .stage > .word-pic img, .word-pic img { width: clamp(150px, 30vw, 260px); }
  .sort-card img { width: clamp(120px, 22vw, 200px); }
}
.funbar { min-width: 0; overflow: hidden; }
@media (max-width: 960px) { .funbar .fgames { display: none; } }
.credits ul { max-height: 260px; overflow: auto; font-size: .8em; padding-left: 18px; }
.credits summary { cursor: pointer; font-weight: 700; }
.choices > .choice { min-width: 0; }
@media (max-width: 560px) { .choices.syll .choice { font-size: clamp(30px, 9vw, 48px); } }
@media (max-width: 560px) { .choices.words .choice { min-height: 84px; padding: 0 22px; font-size: clamp(30px, 8vw, 44px); } }

/* Đợt 10: hình bài học to và rõ hơn */
.choices { max-width: 1000px; }
.choice img { width: 80%; }
.choice img.ph { width: 90%; }
.count-item { width: clamp(80px, 13vw, 130px); }
.bhead img { width: clamp(80px, 11vw, 120px); }
.sort-card img { width: clamp(130px, 19vw, 190px); }
.simgs img { width: clamp(150px, 22vw, 240px) !important; }
.wordprob img { width: clamp(90px, 13vw, 130px); }
.stage > .word-pic img { width: clamp(160px, 24vw, 260px); }
.stage.imgwait::after { content: ''; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%;
  border: 7px solid rgba(255,255,255,.7); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .simgs img { width: clamp(120px, 38vw, 170px) !important; } }
.prompt-btn.upper { font-size: clamp(56px, 9vw, 96px); padding: 4px 34px 4px 12px; }
/* Trí nhớ nhiều thẻ: co theo chiều cao màn hình để không tràn; đếm trên 10 hình nhỏ lại */
.memory { width: min(100%, 760px, calc((100vh - 190px) / var(--rows, 2) * var(--cols) * .92)); }
.count-board.many { padding: 8px; }
.count-board.many .count-item { width: clamp(52px, 8vw, 84px); }
/* Đếm theo chục */
.tens-board { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; max-width: min(980px, 100%); }
.tens-total { position: absolute; top: -6px; right: -70px; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 32px; background: var(--primary); color: #fff; font-weight: 800; font-size: 34px; display: grid; place-items: center; }
.tens-total.pop { animation: pop .3s; }
.ten-bars { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 14px; }
.ten-bar { display: flex; gap: 2px; padding: 5px 8px; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: 0 4px 0 var(--line); transition: transform .15s; }
.ten-bar img { width: clamp(20px, 3.1vw, 36px); }
.ten-bar.counted { background: #fff7d6; box-shadow: 0 0 0 4px var(--sun); }
.ten-bar.hint { animation: shake .45s; }
.ten-ones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.count-item.one { width: clamp(44px, 6vw, 64px); }
@media (max-width: 700px) { .ten-bars { grid-template-columns: 1fr; gap: 4px; } .ten-bar img { width: clamp(18px, 6.4vw, 30px); } .tens-total { right: 0; top: -60px; } }
@media (max-width: 700px) { .tens-total { position: static; min-width: 56px; height: 52px; font-size: 28px; } }
.adopt { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .adopt { grid-template-columns: repeat(2, 1fr); } }
/* Game đối kháng: chọn chế độ */
.vspick { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 70px 16px 16px; background: linear-gradient(#4dabf7, #845ef7); }
.vspick h2 { margin: 0; color: #fff; font-size: 2.2em; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.vsmodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(640px, 100%); }
.vsmode { min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; border-radius: 30px; background: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.15); font-size: 1.15em; }
.vsmode .vsico { font-size: 64px; line-height: 1; }
.vsmode > * { min-width: 0; max-width: 100%; }
.vsmode b { font-size: 1.3em; }
.vsmode.vs-bot { box-shadow: 0 8px 0 #1971c2; } .vsmode.vs-pvp { box-shadow: 0 8px 0 #c92a2a; }
.vsmode:active { transform: translateY(4px); }

/* ---------- Thế giới phiêu lưu (đợt 13) ---------- */
.rpgbar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; margin: 4px 0 6px; border-radius: 26px; color: #fff; text-align: left;
  background: linear-gradient(120deg, #5f3dc4, #c92a2a 55%, #e8590c); box-shadow: 0 7px 0 rgba(0,0,0,.18); }
.rpgbar > img { width: 64px; flex: none; animation: bob 2s ease-in-out infinite; }
.rpgbar > span:first-of-type { display: flex; flex-direction: column; min-width: 0; }
.rpgbar b { font-size: 1.45em; line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.rpgbar em { font-style: normal; font-weight: 700; opacity: .95; }
.rpgbar .rpgimgs { margin-left: auto; display: flex; gap: 4px; flex: none; }
.rpgbar .rpgimgs img { width: 50px; }
@media (max-width: 600px) { .rpgbar .rpgimgs { display: none; } .rpgbar b { font-size: 1.2em; } .rpgbar > img { width: 50px; } }
.rpghero { display: flex; gap: 18px; align-items: center; padding: 16px 18px; margin-bottom: 12px; }
.rpgava { position: relative; flex: none; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff9db, #ffe066); }
.rpgava > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.rpgava .wp { position: absolute; right: -10px; bottom: 6px; width: 58px; transform: rotate(-20deg); }
.rpgava .pt { position: absolute; left: -12px; bottom: -4px; width: 50px; animation: bob 2s ease-in-out infinite; }
.rpginfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rpglv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rpglv b { font-size: 1.5em; color: #5f3dc4; }
.xpbar { position: relative; flex: 1; min-width: 160px; height: 26px; border-radius: 13px; background: #e9ecef; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd43b, #fab005); border-radius: 13px; }
.xpbar em { position: relative; display: block; text-align: center; font-style: normal; font-weight: 800; font-size: .85em; line-height: 26px; }
.rpgchips { display: flex; gap: 8px; flex-wrap: wrap; }
.rpgchip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 12px; border-radius: 999px; background: var(--c); font-weight: 800; font-size: 1.1em; }
.rpgchip img { width: 26px; }
.rpgbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.rpgbtns .btn { min-height: 54px; font-size: 1.05em; padding: 0 1.1em; }
@media (max-width: 600px) { .rpghero { flex-direction: column; text-align: center; } .rpglv, .rpgchips, .rpgbtns { justify-content: center; } .rpgava { width: 110px; height: 110px; } }
.rpgnpc { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.rpgnpc img { width: 64px; flex: none; }
.rpgnpc .say { position: relative; background: #fff; border-radius: 18px; padding: 10px 14px; font-weight: 700; box-shadow: var(--shadow); }
.rpgmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 900px) { .rpgmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rpgmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rpgzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 6px 10px; border-radius: 24px; background: #fff; border: 4px solid var(--c); box-shadow: 0 6px 0 var(--c); }
.rpgzone img { width: 64px; height: 64px; }
.rpgzone b { font-size: 1.05em; line-height: 1.15; text-align: center; }
.rpgzone .zn { position: absolute; top: 6px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; line-height: 26px; }
.rpgzone .zrec { font-size: .8em; font-weight: 700; color: #868e96; }
.rpgzone .zdots { display: flex; gap: 3px; margin-top: 4px; }
.rpgzone .zdots i { width: 14px; height: 14px; border-radius: 50%; background: #e9ecef; font-style: normal; font-size: 9px; line-height: 14px; }
.rpgzone .zdots i.on { background: var(--c); }
.rpgzone.locked { filter: grayscale(1); opacity: .55; box-shadow: 0 6px 0 #ced4da; border-color: #ced4da; }
.rpgstages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 4px; }
.rpgst { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; border-radius: 22px; background: #e7f5ff; box-shadow: 0 6px 0 #a5d8ff; font-weight: 800; }
.rpgst b { font-size: 2em; line-height: 1; color: #1971c2; }
.rpgst img { width: 50px; }
.rpgst.done { background: #ebfbee; box-shadow: 0 6px 0 #8ce99a; }
.rpgst.boss { background: #fff0f6; box-shadow: 0 6px 0 #faa2c1; }
.rpgst.locked { opacity: .45; }
.rpgst i { position: absolute; top: 6px; right: 10px; font-style: normal; }
.rpgshop { text-align: center; }
.rpgtabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.rpgtabs button { padding: 8px 14px; border-radius: 999px; background: #eef3f9; font-weight: 800; }
.rpgtabs button.on { background: #5f3dc4; color: #fff; }
.rpglist { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rpgitem { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 18px; background: #f8f9fa; }
.rpgitem.using { background: #fff3bf; }
.rpgitem > img { width: 52px; height: 52px; flex: none; }
.rpgitem .it { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rpgitem .it span { font-size: .9em; color: #495057; font-weight: 600; }
.rpgitem .tag { font-weight: 800; color: #e67700; white-space: nowrap; }
.rpgitem .buy { display: inline-flex; align-items: center; gap: 4px; background: #ffe066; white-space: nowrap; }
.rpgitem .buy img { width: 24px; }
.rpgitem .buy.poor { opacity: .5; }
.rpgreward { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 10px 0; font-weight: 800; font-size: 1.3em; }
.rpgreward span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: #fff9db; }
.rpgreward img { width: 34px; }
/* Đợt 14: nhân vật người que trong thẻ làng / chọn đồng đội */
.rpgava .fig { width: 100%; height: 100%; }
.rpgava .pt { position: absolute; left: -16px; bottom: -6px; width: 70px; }
.rpgnpc .npcfig { width: 76px; flex: none; }
.rpgitem .petfig { width: 56px; height: 56px; flex: none; }
.prize canvas { width: 76px; }
/* đợt 15 bố mẹ: Báo cáo của con, ôn tập, mốc tiến bộ, bằng khen */
.rp-open { background: #d0ebff; color: #1864ab; }
.report .section { width: 100%; max-width: 900px; margin: 0 auto; }
.rp-hero { background: linear-gradient(135deg, #fff 0%, #fff9e6 100%); }
.rp-who { display: flex; gap: 14px; align-items: center; }
.rp-who .rp-ava { width: 78px; flex: none; padding: 6px; }
.rp-sum { font-size: 1.22em; font-weight: 800; line-height: 1.25; }
.rp-sub { color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.rp-goal { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 999px; background: #fff3bf; font-weight: 800; color: #8a5a00; }
.rp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.rp-grp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 22px; background: #f1f7ff; }
.rp-grp + .rp-grp { background: #effaf2; }
.rp-gt { grid-column: 1 / -1; font-weight: 800; color: var(--ink-soft); font-size: .92em; }
.rp-tile { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; background: #fff; border-radius: 16px; box-shadow: 0 3px 0 var(--line); min-width: 0; }
.rp-tile .ic { font-size: 1.1em; }
.rp-tile b { font-size: 1.7em; line-height: 1; }
.rp-tile span:last-child { font-size: .85em; color: var(--ink-soft); font-weight: 700; }
.rp-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.rp-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.rp-col .bar { width: 100%; max-width: 46px; height: 120px; background: #f1f5fa; border-radius: 12px; display: flex; align-items: flex-end; overflow: hidden; }
.rp-col .bar i { display: block; width: 100%; min-height: 3px; background: linear-gradient(180deg, #74c0fc, #339af0); border-radius: 12px 12px 4px 4px; }
.rp-col.today .bar i { background: linear-gradient(180deg, #ffd43b, #ff922b); }
.rp-col .v { font-size: .8em; font-weight: 800; color: var(--ink-soft); min-height: 1.2em; }
.rp-col .wd { font-weight: 800; }
.rp-col .les { font-size: .78em; color: var(--ink-soft); white-space: nowrap; }
.rp-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-skill { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 20px; background: #f8fafc; border-left: 6px solid var(--c); min-width: 0; }
.rp-skill > img { width: 48px; height: 48px; flex: none; }
.rp-sk { flex: 1; min-width: 0; }
.rp-sk-top { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.rp-sk-top .acc { font-size: .8em; color: var(--ink-soft); font-weight: 700; }
.rp-main { font-weight: 800; font-size: 1.08em; color: #1c3d6e; }
.rp-bar { height: 10px; border-radius: 99px; background: #e6edf5; margin-top: 6px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.rp-extra { font-size: .85em; color: var(--ink-soft); font-weight: 700; margin-top: 4px; }
.rp-weak { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff0f0; border: 2px solid #ffc9c9; min-height: 46px; }
.rp-chip img { width: 32px; height: 32px; }
.rp-chip b { font-size: 1.15em; }
.rp-chip span { font-size: .8em; color: #c92a2a; font-weight: 700; }
.rp-chip.conf { background: #fff4e6; border-color: #ffd8a8; padding-left: 14px; }
.rp-chip.nokey { cursor: default; }
.rp-practice { margin-top: 12px; min-height: 58px; font-size: 1.1em; }
.rp-ms { display: flex; flex-direction: column; gap: 8px; }
.rp-msi { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 20px; background: #fff9db; text-align: left; }
.rp-msi img { width: 46px; height: 46px; flex: none; }
.rp-msi > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.rp-msi em { font-style: normal; font-size: .85em; color: var(--ink-soft); }
.rp-msi .go { font-size: 1.5em; }
@media (max-width: 640px) {
  .rp-tiles, .rp-skills { grid-template-columns: 1fr; }
  .rp-who .rp-ava { width: 60px; }
  .rp-sum { font-size: 1.08em; }
  .rp-col .bar { height: 96px; }
  .report .topbar h1 { font-size: 1.25em; }
}
/* Ôn tập trên bản đồ và sau bài */
.dreview { padding: 6px 14px; border-radius: 999px; background: #845ef7; color: #fff; font-weight: 800; box-shadow: 0 4px 0 #5f3dc4; }
.dreview b { display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #fff; color: #5f3dc4; }
.revbtn { display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: 22px; background: #f3f0ff; color: #5f3dc4; font-weight: 800; font-size: 1.05em; border: 3px dashed #b197fc; }
.revpill { background: #f3f0ff; color: #5f3dc4; font-weight: 800; }
.msprize { width: 100%; background: linear-gradient(90deg, #fff3bf, #ffe8cc); border: 3px solid #ffd43b; font-size: 1.05em; }
/* Mốc tiến bộ */
.msov .panel { background: radial-gradient(circle at 50% 0%, #fff3bf, #fff 60%); }
.ms-burst { position: relative; height: 150px; display: grid; place-items: center; }
.ms-burst::before { content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: repeating-conic-gradient(#ffe066 0 10deg, #fff9db 10deg 20deg); animation: spin 8s linear infinite; }
.ms-trophy { position: relative; width: 120px; animation: hop 1.4s infinite; }
.ms-pic { position: absolute; right: calc(50% - 110px); bottom: 0; width: 64px; }
.ms-title { color: #e8590c; }
.ms-line { font-size: 1.3em; font-weight: 800; margin: 6px 0; }
/* Bằng khen */
.certov .panel { width: min(640px, 100%); padding: 18px; background: #fffdf5; }
.cert { padding: 10px; border-radius: 26px; background: linear-gradient(135deg, #f59f00, #ffd43b 30%, #f59f00 50%, #ffe066 75%, #e67700); }
.cert-in { position: relative; padding: 24px 18px 18px; border-radius: 18px; background: #fffdf3; border: 3px double #e9b949; text-align: center; }
.cert-rib img { width: 70px; margin-top: -8px; }
.cert-top { font-size: 2.3em; font-weight: 800; letter-spacing: .12em; color: #c2410c; line-height: 1; text-shadow: 0 2px 0 #ffe8cc; }
.cert-to { margin-top: 8px; font-weight: 700; color: var(--ink-soft); }
.cert-name { font-size: 2.6em; font-weight: 800; color: #1c3d6e; line-height: 1.1; margin: 2px 0 6px; overflow-wrap: anywhere; }
.cert-art { display: flex; justify-content: center; align-items: flex-end; gap: 12px; }
.cert-art .cert-kid { width: 96px; padding: 4px; }
.cert-pic { width: 76px; }
.cert-ach { font-size: 1.35em; font-weight: 800; color: #2b8a3e; margin: 10px 0 12px; }
.cert-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--ink-soft); font-size: .92em; }
.cert-foot .seal { padding: 6px 12px; border-radius: 999px; border: 2px solid #e03131; color: #e03131; transform: rotate(-6deg); font-weight: 800; }
@media (max-width: 480px) { .cert-top { font-size: 1.8em; } .cert-name { font-size: 2em; } .cert-ach { font-size: 1.15em; } }
/* ===== đợt 15 giao diện: bộ khung chung, chuyển cảnh, chạm rõ, bố cục 3 cỡ màn ===== */
:root { --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --ink-2: #33456a; --press: translateY(4px) scale(.98); }
/* Nền: đồi xanh nhạt dưới đáy (CSS thuần, không tải thêm gì) */
.sky::before, .sky::after { content: ''; position: absolute; bottom: -8vh; border-radius: 50% 50% 0 0; pointer-events: none; }
.sky::before { left: -20%; width: 85%; height: 24vh; background: #d3f2c9; opacity: .75; }
.sky::after { right: -25%; width: 90%; height: 20vh; background: #c2ebb6; opacity: .7; }
.screen { animation: enter .3s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes enter { from { opacity: 0; transform: translateY(16px) scale(.99); } }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

/* Nút: bóng sáng phía trên, nhấn lún rõ */
.btn { background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); text-shadow: 0 2px 0 rgba(0,0,0,.12); letter-spacing: .01em; }
.btn:active { filter: brightness(.97); }
.btn.ghost { background-color: #fff; text-shadow: none; }
.panel .btn.ghost { background-color: #eef3fa; box-shadow: 0 6px 0 #d3deec; }
.panel .btn.ghost:active { box-shadow: 0 1px 0 #d3deec; }
.icon-btn { color: var(--ink-2); transition: transform .08s, box-shadow .08s; }
.icon-btn .ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .ico-back { stroke-width: 3.2; }
.funquit .ico, .dquit .ico { width: 24px; height: 24px; }
.pill { min-height: 48px; color: var(--ink-2); }
.topbar { min-height: 60px; }
.topbar h1 { color: var(--ink-2); font-size: clamp(22px, 2.4vw + 10px, 36px); text-wrap: balance; overflow-wrap: anywhere; }
.title { color: var(--ink-2); }
.seg button, .small-btn { min-height: 48px; }
.sw, .size { width: 48px; height: 48px; }
.tiertabs button { min-height: 52px; }
/* Phần tử xuất hiện lần lượt (lưới đảo, bài, game, bé, linh vật, hình dán) */
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.islands > *, .levels > *, .fungames > *, .kids > *, .mascots > *, .album > *, .badges > *, .wardrobe > *, .tiers > * { animation: rise .42s var(--ease-pop) backwards; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(2) { animation-delay: .03s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(3) { animation-delay: .06s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(4) { animation-delay: .09s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(5) { animation-delay: .12s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(6) { animation-delay: .15s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(7) { animation-delay: .18s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(8) { animation-delay: .21s; }
:is(.islands, .levels, .fungames, .kids, .mascots, .album, .badges, .wardrobe, .tiers) > :nth-child(n+9) { animation-delay: .24s; }

/* Màn Bắt đầu */
.start .logo { animation: logoIn .7s var(--ease-pop) backwards; }
@keyframes logoIn { from { opacity: 0; transform: scale(.6) rotate(-4deg); } }
.start .tagline { font-size: 1.35em; color: var(--ink-2); background: rgba(255,255,255,.7); padding: 2px 20px; border-radius: 999px; }
.start .btn.big { min-width: min(320px, 80vw); animation: ctaPulse 2.2s ease-in-out 1s infinite; }
.start .btn.big[disabled] { animation: none; }
@keyframes ctaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.parade img { filter: drop-shadow(0 10px 8px rgba(35,50,77,.18)); }

/* Chọn bé */
.kids { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 24px); margin: 4vh auto 22px; width: 100%; max-width: 980px; }
.kids > .kid { width: clamp(150px, 26vw, 220px); }
@media (max-width: 480px) { .kids { gap: 14px; } .kids > .kid { width: calc(50% - 7px); } }
.kid { padding: 18px 12px 16px; gap: 6px; min-width: 0; transition: transform .1s; }
.kid > img { width: clamp(84px, 14vw, 120px); height: auto; aspect-ratio: 1; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #e8f4ff 70%); box-shadow: inset 0 -4px 0 rgba(35,50,77,.06); }
.kid .name { color: var(--ink-2); line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kid .stars { background: #fff7d6; color: #8a6100; padding: 0 12px; border-radius: 999px; font-weight: 800; }
.kid.add { min-height: 0; border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.45); }
.kid.add b { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 2.4em; box-shadow: 0 5px 0 var(--primary-dark); }

/* Tạo hồ sơ, chọn linh vật */
.mascots { max-width: 980px; }
.mascot { min-height: 48px; transition: transform .12s var(--ease-pop), border-color .12s; color: var(--ink-2); }
.mascot:active { transform: scale(.95); }
.mascot.on { box-shadow: 0 5px 0 #ffc3a8; animation: pickPop .35s var(--ease-pop); }
@keyframes pickPop { 50% { transform: scale(1.1); } }

/* Bản đồ */
.hello .avatar { background: radial-gradient(circle at 50% 35%, #fff, #e8f4ff 75%); }
.hello .who { color: var(--ink-2); }
.daily { min-height: 64px; }
.dtask { width: 52px; height: 52px; transition: transform .1s; }
.dtask:active { transform: scale(.92); }
.island { overflow: hidden; isolation: isolate; text-shadow: 0 2px 0 rgba(0,0,0,.2); transition: transform .12s var(--ease-pop); }
.island::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(0,0,0,.08)); }
.island::after { content: ''; position: absolute; left: 50%; top: 10%; width: 54%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255,255,255,.22); z-index: -1; }
.island.soon::after { content: attr(data-soon); left: auto; top: 12px; width: auto; aspect-ratio: auto; transform: none; z-index: 1; }
.island:active { transform: scale(.95); }
.island .iname { line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.island .prog { display: flex; align-items: center; gap: 6px; width: 78%; max-width: 170px; margin-top: 4px; font-size: .58em; justify-content: center; }
.island .ibar { flex: 1; height: 9px; border-radius: 99px; background: rgba(0,0,0,.18); overflow: hidden; }
.island .ibar i { display: block; height: 100%; min-width: 0; border-radius: 99px; background: #fff; }
.island .inum { flex: none; }
.island.full .ibar i { background: #ffe066; }
.island.full::before { box-shadow: inset 0 0 0 5px rgba(255, 224, 102, .9); border-radius: inherit; }
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  .islands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .island { aspect-ratio: 1 / 1.02; font-size: 1.2em; }
  .island img { width: 58%; }
}
@media (max-width: 599px) { .island { aspect-ratio: 1 / .92; font-size: 1.15em; padding: 10px 8px; } .island img { width: 54%; margin-top: 4%; } }
.funbar { min-height: 64px; transition: transform .1s; }
.funbar:active { transform: scale(.98); }
.funbar .ft { flex: none; }
.funbar .fsub { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.funbar > img { flex: none; }
@media (max-width: 900px) { .bars2 .funbar .ft { font-size: 1.15em; } .bars2 .funbar .fsub { font-size: .8em; } }

/* Danh sách bài */
.levels { grid-template-columns: repeat(auto-fill, minmax(min(160px, 42vw), 1fr)); gap: clamp(12px, 2vw, 20px); }
.level { min-width: 0; padding: 16px 10px 12px; border: 3px solid transparent; transition: transform .12s var(--ease-pop); }
.level .num { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), transparent 45%), var(--c); box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 4px 0 rgba(35,50,77,.08); text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.level .lname { color: var(--ink-2); font-size: 1.05em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; overflow-wrap: anywhere; }
.level .lstars { font-size: 1.3em; letter-spacing: 3px; line-height: 1; }
.level.done { border-color: #c9f2d3; }
.level.next { border-color: var(--sun); }
.level:active { transform: scale(.95); }
.tierprog { height: 30px; box-shadow: inset 0 2px 0 rgba(0,0,0,.06), 0 3px 0 rgba(255,255,255,.6); }
.tierprog i { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%), var(--c); }
.tierprog span { line-height: 30px; color: var(--ink-2); }

/* Màn chơi: thanh tiến độ liền mạch thay cho chấm nhỏ */
.game .topbar .progress { flex: 1; flex-wrap: nowrap; gap: 4px; max-width: 520px; margin: 0 auto; padding: 5px; background: rgba(255,255,255,.75); border-radius: 999px; box-shadow: inset 0 2px 0 rgba(35,50,77,.06); }
.game .topbar .progress i { flex: 1; width: auto; height: 16px; border-radius: 99px; background: #e6edf6; box-shadow: none; transition: background .3s; }
.game .topbar .progress i:first-child { border-radius: 99px 4px 4px 99px; }
.game .topbar .progress i:last-child { border-radius: 4px 99px 99px 4px; }
.game .topbar .progress i:not(:first-child):not(:last-child) { border-radius: 4px; }
.game .topbar .progress i.done { background: linear-gradient(180deg, #6ee79a, var(--good)); }
.game .topbar .progress i.now { background: linear-gradient(180deg, #ffe08a, var(--sun)); transform: none; animation: nowGlow 1.2s ease-in-out infinite; }
@keyframes nowGlow { 50% { box-shadow: 0 0 0 3px rgba(255, 201, 60, .35); } }
.prompt-btn { min-height: 64px; color: var(--ink-2); max-width: 100%; animation: rise .35s var(--ease-pop) backwards; }
.prompt-btn .spk { flex: none; width: 56px; height: 56px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.prompt-btn:active { transform: var(--press); box-shadow: 0 2px 0 var(--line); }
.prompt-btn.talking .spk { animation: talk .5s ease-in-out infinite alternate, ring 1s ease-out infinite; }
@keyframes ring { from { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(79,179,255,.5); } to { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 16px rgba(79,179,255,0); } }
.choice { color: var(--ink-2); border: 3px solid #eef3fa; position: relative; transition: transform .1s, opacity .2s, box-shadow .1s; animation: cardIn .38s var(--ease-pop) backwards; }
.choices > .choice:nth-child(2) { animation-delay: .05s; } .choices > .choice:nth-child(3) { animation-delay: .1s; }
.choices > .choice:nth-child(4) { animation-delay: .15s; } .choices > .choice:nth-child(n+5) { animation-delay: .2s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.choice:active { transform: translateY(5px) scale(.97); box-shadow: 0 3px 0 var(--line); }
.choice.right { border-color: #6ee79a; animation: pop .4s; }
.choice.right::after { content: '✓'; position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; border-radius: 50%; background: var(--good); color: #fff; font-size: 28px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 0 #169947; animation: pop .35s; }
.choice.wrong { border-color: #ffc9c9; background: #fff5f5; }
/* Màn dọc: 4 lựa chọn xếp 2×2 cho thẻ to, dễ chạm */
@media (orientation: portrait) and (max-width: 900px) {
  .choices.n4:not(.nums):not(.syll) { --n: 2 !important; max-width: min(100%, 560px); }
  .choices.n4.nums { --n: 2 !important; max-width: min(100%, 520px); }
  .choices.n4.nums .choice { aspect-ratio: 1.5; }
}
@media (max-width: 480px) {
  .choices { gap: 12px; }
  .choice { border-radius: 26px; }
  .choices.n3:not(.syll) .choice { font-size: clamp(54px, 15vw, 80px); }
}
/* Thẻ thưởng: vòng tia sáng xoay phía sau */
.reward::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(80vw, 520px); aspect-ratio: 1; margin: calc(min(80vw, 520px) / -2) 0 0 calc(min(80vw, 520px) / -2);
  border-radius: 50%; background: repeating-conic-gradient(rgba(255, 224, 102, .45) 0 12deg, transparent 12deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: spin 14s linear infinite; pointer-events: none; }
.reward .card { position: relative; animation: rewardIn .45s var(--ease-pop); border: 4px solid #fff3bf; }
@keyframes rewardIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.reward .big { color: var(--ink-2); }
.buddy { filter: drop-shadow(0 8px 6px rgba(35,50,77,.18)); }

/* Bảng kết quả */
.overlay { animation: fadein .2s; }
.panel { animation: panelIn .42s var(--ease-pop); border: 4px solid rgba(255,255,255,.9); }
@keyframes panelIn { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.panel h2 { color: var(--ink-2); }
.resultov .panel { background: radial-gradient(circle at 50% -10%, #fff6d0 0, #fff 55%); }
.resultov .panel h2 { font-size: 2.1em; color: var(--primary-dark); text-shadow: 0 3px 0 #ffe2d4; animation: titleBounce .6s var(--ease-pop) .1s backwards; }
@keyframes titleBounce { from { transform: scale(.3); opacity: 0; } }
.bigstars img:nth-child(2) { transform: scale(.7) translateY(-10px); }
.bigstars img.lit { animation: starIn .55s var(--ease-pop); filter: drop-shadow(0 6px 8px rgba(224, 168, 0, .45)); }
.bigstars img:nth-child(2).lit { transform: scale(1.12) translateY(-10px); }
@keyframes starIn { 0% { transform: scale(2.4) rotate(-90deg); opacity: 0; } 60% { opacity: 1; } }
.prize { animation: slideIn .4s var(--ease-pop) backwards; text-align: left; justify-content: flex-start; padding: 10px 16px; }
.prize img { width: 64px; height: 64px; flex: none; }
.panel > .prize:nth-of-type(2) { animation-delay: .5s; } .panel > .prize:nth-of-type(3) { animation-delay: .62s; }
.panel > .prize:nth-of-type(4) { animation-delay: .74s; } .panel > .prize:nth-of-type(n+5) { animation-delay: .86s; }
.panel > .prize:nth-of-type(1) { animation-delay: .38s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } }
.resultov .row { flex-wrap: wrap; gap: 14px 12px; }
.resultov .row .btn { flex: 1 1 0; padding: 0 .8em; white-space: nowrap; min-width: 0; }
.resultov .row .btn.green { flex-basis: 100%; order: -1; min-height: 72px; font-size: 1.3em; }
@media (max-width: 480px) { .panel { padding: 22px 16px 20px; border-radius: 30px; } .resultov .row .btn { font-size: 1.05em; } }

/* Album, huy hiệu */
.sticker { transition: transform .12s var(--ease-pop); }
.sticker:not(.missing) { background: radial-gradient(circle at 50% 40%, #fff, #fff6dc); box-shadow: 0 5px 0 #f3dfa6; }
.sticker:active { transform: scale(.92) rotate(-4deg); }
.sticker.missing { background: rgba(255,255,255,.6); box-shadow: 0 5px 0 rgba(227,236,247,.8); }
.badge:not(.missing) { background: radial-gradient(circle at 50% 30%, #fff, #fff4d6); box-shadow: 0 5px 0 #f3dfa6; color: var(--ink-2); }

/* Phòng của bé: màn dọc xếp một cột */
@media (max-width: 900px) and (orientation: portrait) {
  .roomwrap { grid-template-columns: 1fr; }
  .stagebox { padding: 60px 20px 24px; }
  .dressed.big { width: min(220px, 50vw); }
}
.stagebox { background: radial-gradient(circle at 50% 40%, #fff, rgba(255,255,255,.7) 70%); }
.ward { min-height: 120px; transition: transform .12s var(--ease-pop); color: var(--ink-2); }
.ward:active { transform: scale(.94); }

/* Khu vui chơi */
.funsec { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 18px; margin: 22px 0 2px; background: rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 4px 0 var(--line); font-size: 1.2em; }
.fungames { grid-template-columns: repeat(auto-fill, minmax(min(220px, 42vw), 1fr)); gap: clamp(12px, 2vw, 18px); }
.fungame { min-width: 0; padding: 18px 10px 14px; border-radius: 28px; transition: transform .12s var(--ease-pop); }
.fungame img { width: clamp(76px, 12vw, 130px); animation: none; }
.fungame:active img { animation: hop .6s; }
.fungame b { line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.fungame span { font-size: .85em; white-space: nowrap; }
@media (max-width: 480px) { .fungame b { font-size: 1.1em; } .fungame span { font-size: .75em; padding: 1px 10px; } }
.rpgbar { min-height: 72px; }

/* Góc bố mẹ */
.section h3 { color: var(--ink-2); }
.parent .section, .report .section { border: 3px solid rgba(255,255,255,.8); }
@media (max-width: 480px) { .opt { gap: 8px; } .seg button { padding: 0 12px; } }
.keypad button { min-height: 68px; }

@media (prefers-reduced-motion: reduce) { .start .btn.big, .game .topbar .progress i.now, .reward::before { animation: none; } }
/* đợt 15 giọng: đề đang đọc thì từ/hình nhún theo; chữ bay ghép vào ô trống; thẻ đánh vần sáng lần lượt; chuỗi đúng liên tiếp */
.stage.saying .word-show, .stage.saying .word-pic img { animation: sayBob .55s ease-in-out infinite alternate; }
@keyframes sayBob { to { transform: translateY(-6px) scale(1.04); } }
.word-show .filled { display: inline-block; color: #2b8a3e; }
.word-show.merge, .sent.merge { animation: mergePop .45s; }
@keyframes mergePop { 40% { transform: scale(1.12); } 70% { transform: scale(.97); } }
.fly-chip { position: fixed; z-index: 50; transform: translate(-50%, -50%); font-weight: 800; line-height: 1; color: #2b8a3e;
  background: #e7fbe9; border-radius: 18px; padding: 4px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.18); pointer-events: none; }
.reward .card { cursor: pointer; }
.reward img.sp-img { width: clamp(110px, 17vw, 170px); }
.spell-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; max-width: min(92vw, 640px); margin-top: 6px; }
.spell-line .sp { font-size: clamp(28px, 7.4vw, 56px); font-weight: 800; line-height: 1.1; padding: 2px 10px; border-radius: 14px; background: #f1f5fb; color: #5c6b80; }
.spell-line .sp-on { color: #1971c2; }
.spell-line .sp-rime { color: #e8590c; }
.spell-line .sp-tone { font-size: clamp(20px, 4.6vw, 38px); color: #9c36b5; }
.spell-line .sp-word { font-size: clamp(44px, 11vw, 88px); color: var(--ink, #1c3d6e); background: #fff9db; }
.spell-line .sp-sep { font-style: normal; font-weight: 800; font-size: clamp(18px, 4vw, 32px); color: #adb5bd; }
.spell-line .sp, .spell-line .sp-sep { opacity: .28; transform: scale(.9); transition: opacity .15s, transform .2s, background .2s; }
.spell-line .sp.lit, .spell-line .sp-sep.lit { opacity: 1; transform: scale(1); }
.spell-line .sp.lit { animation: spLit .32s; background: #e7fbe9; }
.spell-line .sp-word.lit { background: #ffe066; animation: spWord .45s; }
@keyframes spLit { 50% { transform: scale(1.22); } }
@keyframes spWord { 40% { transform: scale(1.3) rotate(-3deg); } }
.combo { position: absolute; top: 6px; right: 10px; z-index: 6; padding: 6px 14px; border-radius: 999px; background: #fff3bf; color: #e8590c;
  font-weight: 800; font-size: 1.3em; box-shadow: 0 4px 0 #ffd43b; animation: comboIn .4s; pointer-events: none; }
.combo.big { font-size: 1.7em; background: #ffe066; animation: comboIn .4s, hop .9s .4s 1; }
@keyframes comboIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@media (max-width: 480px) { .reward .card { padding: 18px 16px; } .spell-line { gap: 3px 4px; } .spell-line .sp { padding: 2px 7px; } }
@media (prefers-reduced-motion: reduce) { .stage.saying .word-show, .stage.saying .word-pic img, .spell-line .sp.lit, .combo { animation: none; } }

/* ---------- Đợt 16: đảo Lập trình (games/code.js) ---------- */
.cdg { display: flex; gap: clamp(14px, 3vw, 28px); align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.cd-board { width: min(92vw, 56vh, 520px); flex: none; }
.cd-grid { position: relative; display: grid; gap: 4px; padding: 6px; background: #8ce99a; border-radius: 22px; box-shadow: 0 6px 0 #69db7c; }
.cd-cell { aspect-ratio: 1; background: #d3f9d8; border-radius: 10px; display: grid; place-items: center; position: relative; }
.cd-cell.alt { background: #c3f0ca; }
.cd-cell > img { width: 74%; grid-area: 1 / 1; }
.cd-cell .cd-log { width: 92%; transform: rotate(-12deg); }
.cd-cell.cd-start::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 3px dashed #40c057; }
.cd-sprout { animation: bob 2s infinite; } .cd-sprout.wet { animation: none; }
.cd-drop { position: absolute; width: 46% !important; top: 4%; z-index: 3; pointer-events: none; }
.cd-bot { position: absolute; z-index: 2; pointer-events: none; width: calc((100% - 12px) / var(--n)); aspect-ratio: 1;
  left: calc(6px + (100% - 12px) / var(--n) * var(--x)); top: calc(6px + (100% - 12px) / var(--n) * var(--y)); transition: left .35s, top .35s; }
.cd-bot canvas { width: 100%; height: 100%; display: block; }
.cd-head { position: absolute; inset: -6%; transform: rotate(var(--dir, 90deg)); transition: transform .3s; }
.cd-head::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border: 0 solid transparent; border-width: 0 9px 13px; border-bottom-color: #2f9e44; filter: drop-shadow(0 1px 0 #fff); }
.cd-bot.win { animation: cheer .7s 2; }
.cd-cell.cd-guess { background: #fff3bf; box-shadow: inset 0 0 0 4px #fab005; }
.cd-cell.cd-ok { background: #b2f2bb; box-shadow: inset 0 0 0 4px #2f9e44; }
.cd-cell.cd-no { background: #ffe3e3; box-shadow: inset 0 0 0 4px #fa5252; }
.cd-trace .cd-cell { cursor: pointer; }
.cd-side { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; min-width: 0; }
.cd-ask { font-size: 40px; line-height: 1; animation: bob 1.6s infinite; }
.cd-meter { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 320px; }
.cd-meter i { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #ced4da; }
.cd-meter i.on { background: #40c057; box-shadow: none; }
.cd-prog { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 64px; padding: 8px; background: #fff; border-radius: 20px; box-shadow: 0 5px 0 var(--line); width: 100%; }
.cd-prog.locked { pointer-events: none; }
.cd-card { width: 56px; height: 56px; padding: 6px; border-radius: 16px; background: #fff; border: 3px solid #dee2e6; display: grid; place-items: center; flex: none; transition: transform .15s; }
.cd-card .cd-ico { width: 100%; height: 100%; display: block; } .cd-card .cd-ico svg { width: 100%; height: 100%; display: block; }
.cd-prog .cd-card.run { background: #fff3bf; border-color: #fab005; transform: scale(1.14); }
.cd-prog .cd-card.sel { border-color: #fa5252; background: #fff5f5; transform: scale(1.1); }
.cd-card.cd-hint { animation: wiggle .4s 5; border-color: #fa5252; }
.cd-caret { width: 4px; height: 44px; border-radius: 2px; background: #4dabf7; animation: pulse 1s infinite; }
.cd-block { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 18px; background: #fff0f6; border: 3px solid #f783ac; }
.cd-block.tgt { border-color: #e64980; box-shadow: 0 0 0 4px #fcc2d7; }
.cd-block.run { background: #ffdeeb; }
.cd-bhead { width: 46px; height: 46px; padding: 4px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.cd-bhead .cd-ico, .cd-bhead svg { width: 100%; height: 100%; display: block; }
.cd-chip { min-width: 44px; height: 36px; padding: 0 8px; border-radius: 18px; background: #e64980; color: #fff; font-weight: 800; font-size: 20px; }
.cd-body { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 52px; min-height: 52px; padding: 2px 4px; border-radius: 12px; background: rgba(255,255,255,.7); }
.cd-body .cd-card { width: 48px; height: 48px; }
.cd-kill { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; background: #fa5252; color: #fff; font-size: 14px; font-weight: 800; }
.cd-pad { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cd-pad .cd-card { width: 72px; height: 72px; padding: 9px; border-radius: 22px; border: 0; box-shadow: 0 6px 0 var(--line); }
.cd-pad .cd-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.cd-pad .c-REP { background: #fff0f6; }
.cd-btns .btn { min-width: 84px; font-size: 26px; }
.cd-shake { animation: shake .4s; }
@media (max-width: 599px) {
  .cd-board { width: min(94vw, 46vh); }
  .cd-card { width: 46px; height: 46px; padding: 5px; } .cd-body .cd-card { width: 40px; height: 40px; }
  .cd-pad .cd-card { width: 58px; height: 58px; padding: 7px; }
  .cd-prog { min-height: 54px; }
}

/* Đợt 17: game hay lên đầu, game khác gập */
.fungames.hot .fungame { padding: 26px 12px; box-shadow: 0 8px 0 rgba(0,0,0,.18), 0 0 0 4px #ffd43b inset; }
.funmore { display: block; margin: 22px auto 8px; font-size: 1.2em; }

/* ---------- Đợt 18: Học cùng lớp ---------- */
.cls .clstabs { margin-bottom: 4px; }
.clsh { margin: 10px 0 6px; font-size: 1.25em; text-align: center; }
.clslist { display: grid; gap: 14px; max-width: 900px; width: 100%; margin: 0 auto; }
.clscard { background: rgba(255,255,255,.92); border-radius: 22px; padding: 12px 14px 14px; box-shadow: 0 5px 0 rgba(0,0,0,.08); border: 3px solid transparent; min-width: 0; }
.clscard.now { border-color: #3d8bfd; box-shadow: 0 5px 0 #a5c8ff; }
.clscard.done { background: #ebfbee; }
.clshead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.clshead b { font-size: 1.15em; color: #3d8bfd; white-space: nowrap; }
.clshead span { font-weight: 800; font-size: 1.1em; min-width: 0; overflow-wrap: anywhere; }
.clsok { margin-left: auto; font-style: normal; font-weight: 900; color: #2b8a3e; font-size: 1.3em; }
.clsthin, .clsnote { font-size: .88em; color: #6c7a89; margin-top: 4px; }
.clsnote.big { font-size: 1em; text-align: center; background: rgba(255,255,255,.8); border-radius: 16px; padding: 14px; max-width: 600px; margin: 0 auto; }
.clsacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 38vw), 1fr)); gap: 10px; margin-top: 10px; }
.clsact { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 18px; border: 0; background: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 45%, #fff), inset 0 0 0 3px color-mix(in srgb, var(--c) 30%, #fff); font: inherit; cursor: pointer; min-width: 0; }
.clsact img { width: 44px; height: 44px; }
.clsact span { font-weight: 800; font-size: .92em; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.clsact em { font-style: normal; color: #d9e2ee; letter-spacing: 2px; }
.clsact em b { color: var(--sun); font-weight: 400; }
.clsact.ok { background: #f4fff6; }
.clsact:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 45%, #fff); }
.clsfold { max-width: 900px; width: 100%; margin: 14px auto 0; }
.clsmore { font: inherit; font-weight: 800; background: rgba(255,255,255,.75); border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; margin-bottom: 10px; }
.clsfoot { max-width: 700px; margin: 22px auto 10px; text-align: center; font-size: .85em; color: #5c6b7a; }
.clsfoot p { margin: 0 0 10px; }
.clsov .clsweeks { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; text-align: left; margin: 10px 0; }
.clsweeks button { font: inherit; display: flex; gap: 10px; align-items: baseline; border: 0; border-radius: 14px; background: #f1f5fb; padding: 8px 12px; cursor: pointer; text-align: left; }
.clsweeks button.on { background: #d0e4ff; }
.clsweeks b { white-space: nowrap; }
.clsweeks span { font-size: .85em; color: #5c6b7a; min-width: 0; overflow-wrap: anywhere; }
.sync .syncrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sync .synccode { font-family: ui-monospace, Menlo, monospace; font-size: 1.15em; letter-spacing: 1px; background: #f1f5fb; padding: 6px 12px; border-radius: 10px; overflow-wrap: anywhere; }
.joinfam { margin-top: 18px; }

/* Màn Bắt đầu: link nhỏ tới trang giới thiệu và ghi công (công khai 2026-10-12) */
.startlinks { margin: 4px 0 0; font-size: .9em; color: var(--ink-soft); }
.startlinks a { color: inherit; text-decoration: underline; padding: 8px 4px; }

/* Công khai 2026-10-12: chọn nhân vật bé trai/bé gái, Thế giới phiêu lưu là một thẻ trong lưới game */
.lookcard { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 6px 0 4px; }
.lookcard .lookfig { width: 110px; height: 110px; flex: none; background: radial-gradient(circle at 50% 70%, #e7f5ff, transparent 70%); border-radius: 24px; }
.lookopts { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.lookopts > b { font-size: 1.15em; }
.lookrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lookrow .swatch { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.lookrow .swatch.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.lookrow .hatbtn { width: 46px; height: 46px; border-radius: 14px; background: #eef3f9; display: grid; place-items: center; font-weight: 800; color: var(--ink-soft); }
.lookrow .hatbtn img { width: 34px; height: 34px; }
.lookrow .hatbtn.on { background: #fff; box-shadow: 0 0 0 3px var(--ink); }
@media (max-width: 480px) { .lookcard { align-items: flex-start; padding: 10px; gap: 10px; } .lookcard .lookfig { width: 84px; height: 84px; } .lookrow .swatch { width: 32px; height: 32px; } .lookrow .hatbtn { width: 42px; height: 42px; } }
.fungame.rpgcard { background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.4), transparent 60%), linear-gradient(135deg, #7048e8, #c2255c); }
.icon-btn.parentbtn { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; font-size: 1em; font-weight: 800; color: var(--ink); }
.icon-btn.parentbtn .ico { stroke-width: 2.1; }
.icon-btn.parentbtn span { font-size: 1.05em; white-space: nowrap; }
.topbar.home .icon-btn.parentbtn { width: auto; }
.topbar .spacer:has(.parentbtn) { flex: 0 0 auto; }
/* Thẻ cuối kéo dài cho kín hàng: bày ngang (hình trái, chữ phải) */
.fungame.wide { flex-direction: row; justify-content: center; gap: clamp(12px, 3vw, 28px); text-align: left; }
.fungame.wide b { text-align: left; }
.fungame.wide > b, .fungame.wide > span { align-self: center; }
.fungame.wide { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: clamp(12px, 3vw, 28px); row-gap: 6px; }
.fungame.wide > img { grid-row: 1 / span 2; }
.fungame.wide > b { align-self: end; }
.fungame.wide > span { align-self: start; justify-self: start; }
/* Dấu thanh vẽ bằng SVG thay tên dấu (ui.js toneMark) */
.tmark { display: inline-block; width: 1em; height: .92em; vertical-align: -.1em; }
.tmark svg { width: 100%; height: 100%; display: block; }
.spell-line .sp-tone { font-size: clamp(30px, 7.4vw, 56px); }

/* Ủng hộ cà phê (Góc bố mẹ, 2026-10-14) */
.cafe details summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none}
.cafe details summary::-webkit-details-marker{display:none}
.cafe .cafeqr{display:block;width:100%;max-width:280px;height:auto;margin:12px 0 6px;border-radius:16px;background:#fff}
.cafe .cafeqr{-webkit-touch-callout:default;pointer-events:auto;-webkit-user-select:auto;user-select:auto}
.cafe{background:linear-gradient(135deg,#fff7e6,#ffe8c2);border:2px solid #f5b85c}
.cafe h3{color:#8a4b00}
.cafe details summary.small-btn{background:#f08c00;color:#fff;font-weight:700}
.mutehint { margin: 10px 0 0; font-size: .85em; color: var(--ink-soft); }
/* Chia sẻ (2026-10-14) */
.certname { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; cursor: pointer; }
.certname input { width: 22px; height: 22px; accent-color: #2f9e44; }

/* 2026-10-16 giữ chân: hộp quà mỗi ngày, chuỗi ngày học, lời mời cài app */
.giftbtn { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; background: #fff4e6; color: #d9480f; font-weight: 800; box-shadow: 0 4px 0 #ffd8a8; }
.giftbtn img { width: 40px; height: 40px; }
.giftbtn.ready { background: #ff922b; color: #fff; box-shadow: 0 4px 0 #e8590c; animation: giftwiggle 1.6s ease-in-out infinite; }
.giftbtn:not(.ready) { opacity: .75; }
@keyframes giftwiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-8deg) scale(1.06); } 85% { transform: rotate(8deg) scale(1.06); } 92% { transform: rotate(-4deg); } }
.giftov .giftbox { width: 150px; height: 150px; margin: 6px auto; display: block; animation: giftshake .35s ease-in-out infinite; }
.giftov .giftbox.open { animation: giftpop .5s ease-out forwards; }
@keyframes giftshake { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes giftpop { 0% { transform: scale(1); } 50% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(.9); } }
.giftov .giftprize { display: none; }
.giftov.opened .giftprize { display: block; animation: giftin .4s ease-out; }
@keyframes giftin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.giftnext { margin: 10px 0 0; font-weight: 800; color: #d9480f; }
.instov .panel { max-width: 560px; }
.instov .carry { background: #fff9db; border-radius: 14px; padding: 10px 12px; text-align: left; }
.inapphint { max-width: 520px; text-align: center; }
.linkbtn { color: #1c7ed6; font-weight: 800; text-decoration: underline; padding: 0 2px; }
@media (prefers-reduced-motion: reduce) { .giftbtn.ready, .giftov .giftbox { animation: none; } }