/* ===== Toán Vui Lớp 1 – giao diện ===== */
:root {
  --bg: #fff8e7;
  --bg2: #ffe9b8;
  --ink: #3b2f2f;
  --muted: #8a7a6a;
  --primary: #ff8a3d;
  --primary-d: #e56a1a;
  --green: #3cc47c;
  --green-d: #25a262;
  --red: #ff5a5f;
  --blue: #4aa3ff;
  --purple: #9b6bff;
  --card: #ffffff;
  --shadow: 0 6px 0 rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.08);
  --radius: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 10%, #fffdf5 0, var(--bg) 40%, var(--bg2) 100%);
  color: var(--ink);
  overflow-x: hidden;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }

#app { max-width: 980px; margin: 0 auto; padding: 12px 16px 40px; min-height: 100%; }

/* ---------- thanh trên ---------- */
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.topbar .spacer { flex: 1; }
.pill {
  background: var(--card); border-radius: 999px; padding: 6px 14px;
  font-weight: 700; font-size: 20px; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 6px;
}
.icon-btn {
  width: 52px; height: 52px; border-radius: 16px; background: var(--card);
  font-size: 26px; box-shadow: var(--shadow);
}
.icon-btn:active { transform: translateY(3px); box-shadow: none; }

/* ---------- nút lớn ---------- */
.big-btn {
  font-size: 28px; font-weight: 800; color: #fff; padding: 16px 34px;
  border-radius: 999px; background: var(--primary); box-shadow: 0 7px 0 var(--primary-d);
  transition: transform .08s;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--primary-d); }
.big-btn.green { background: var(--green); box-shadow: 0 7px 0 var(--green-d); }
.big-btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 7px 0 #e4d7c3; }
.big-btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- màn hình chính ---------- */
.home { text-align: center; padding-top: 4vh; }
.home h1 { font-size: clamp(40px, 8vw, 72px); margin: 8px 0 0; color: var(--primary-d); letter-spacing: 1px; text-shadow: 0 4px 0 #ffd9a8; }
.home .sub { font-size: 22px; color: var(--muted); margin: 0 0 18px; }
.mascot { font-size: 120px; display: inline-block; animation: bob 2.4s ease-in-out infinite; }
.bubble {
  display: inline-block; background: #fff; border-radius: 24px; padding: 12px 20px; font-size: 24px;
  box-shadow: var(--shadow); margin: 6px auto 22px; max-width: 560px; position: relative;
}
.name-input {
  font-family: inherit; font-size: 28px; padding: 10px 18px; border-radius: 18px; border: 3px solid #f1dcc0;
  text-align: center; width: min(320px, 90%); margin-bottom: 16px; outline: none;
}
.home .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* ---------- bản đồ ---------- */
.world {
  background: linear-gradient(180deg, #d9f7d0, #bdeeb0); border-radius: 30px; padding: 18px 16px 26px;
  box-shadow: var(--shadow); margin-bottom: 18px; position: relative; overflow: hidden;
}
.world.w2 { background: linear-gradient(180deg, #d6ecff, #b9dcff); }
.world.w3 { background: linear-gradient(180deg, #ffe0ec, #ffc7dc); }
.world.w4 { background: linear-gradient(180deg, #efe1ff, #dcc6ff); }
.world.w5 { background: linear-gradient(180deg, #fff1c9, #ffe29a); }
.world h2 { margin: 0 0 4px; font-size: 28px; }
.world .wsub { margin: 0 0 12px; color: #4b5b45; font-size: 17px; }
.path { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.node {
  width: 138px; min-height: 150px; background: #fff; border-radius: 24px; padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow);
  text-align: center; position: relative;
}
.node .num { font-size: 15px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; padding: 0 10px; }
.node .ico { font-size: 44px; line-height: 1.2; }
.node .t { font-size: 16px; font-weight: 700; line-height: 1.15; }
.node .hint { font-size: 12.5px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.node .stars { font-size: 18px; letter-spacing: 1px; }
.node.locked { opacity: .55; filter: grayscale(.7); }
.node.locked .ico::after { content: " 🔒"; font-size: 22px; }
.node.soon { opacity: .5; }
.node.current { outline: 4px solid var(--primary); animation: pulse 1.6s infinite; }
.node:active:not(.locked):not(.soon) { transform: scale(.96); }
@keyframes pulse { 0%,100% { outline-color: var(--primary) } 50% { outline-color: #ffd0a8 } }

/* ---------- màn chơi ---------- */
.progress { flex: 1; height: 22px; background: #fff; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }
.progress > div { height: 100%; background: linear-gradient(90deg, #7be495, var(--green)); border-radius: 999px; transition: width .4s; }
.diff { font-size: 22px; }
.question {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin: 8px 0 14px;
}
.question .q-text { font-size: clamp(22px, 3.6vw, 30px); font-weight: 700; flex: 1; line-height: 1.25; }
.question .speak { flex: none; }
.review-tag { display: inline-block; background: var(--purple); color: #fff; font-size: 15px; border-radius: 999px; padding: 0 10px; margin-bottom: 4px; }
.stage { min-height: 320px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); max-width: 100%;
}
.item {
  font-size: clamp(44px, 8vw, 64px); line-height: 1; position: relative; display: inline-block;
  transition: transform .15s; cursor: pointer;
}
.item.small { font-size: clamp(30px, 5vw, 42px); }
.item:active { transform: scale(.9); }
.item.gray { filter: grayscale(1); opacity: .3; }
.item .badge {
  position: absolute; right: -6px; top: -6px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 800;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.scatter { position: relative; width: min(640px, 100%); height: 300px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.scatter .item { position: absolute; transform: translate(-50%, -50%); }
.scatter .item:active { transform: translate(-50%, -50%) scale(.9); }

.scene {
  position: relative; width: min(680px, 100%); height: 340px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: linear-gradient(180deg, #bfe6ff 0, #e3f5ff 45%, #9fdc83 46%, #7ccb62 100%);
}
.scene .item { position: absolute; transform: translate(-50%, -50%); font-size: clamp(34px, 6vw, 50px); }

.options { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.opt {
  min-width: 92px; height: 92px; padding: 0 18px; border-radius: 24px; background: #fff; font-size: 48px; font-weight: 800; color: var(--ink);
  box-shadow: 0 7px 0 #e4d7c3; transition: transform .08s;
}
.opt.word { font-size: 26px; height: 76px; }
.opt:active { transform: translateY(5px); box-shadow: 0 2px 0 #e4d7c3; }
.opt.right { background: var(--green); color: #fff; box-shadow: 0 7px 0 var(--green-d); }
.opt.wrong { background: #ffd4d5; animation: shake .35s; }
.opt.faded { opacity: .35; }

.groups { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.group {
  background: #fff; border-radius: var(--radius); padding: 12px; min-width: 150px; max-width: 280px; min-height: 120px;
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-content: center; box-shadow: 0 7px 0 #e4d7c3;
  border: 4px solid transparent;
}
.group .item { font-size: clamp(30px, 5vw, 40px); }
.group.right { border-color: var(--green); background: #eafff1; }
.group.wrong { border-color: var(--red); animation: shake .35s; }
.group.sel { border-color: var(--blue); background: #eef6ff; }

/* tàu hoả dãy số */
.train { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; justify-content: center; }
.train .engine { font-size: 70px; line-height: 1; }
.wagon {
  width: 72px; height: 72px; border-radius: 16px; background: #fff; box-shadow: 0 6px 0 #d8c7ae;
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; position: relative;
  border: 4px solid #f2e4cf;
}
.wagon::after { content: "● ●"; position: absolute; bottom: -22px; font-size: 16px; color: #666; letter-spacing: 12px; }
.wagon.blank { color: var(--red); background: #fff4e6; }
.wagon.active { border-color: var(--primary); animation: pulse2 1s infinite; }
.wagon.filled { color: var(--green-d); }
@keyframes pulse2 { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } }

/* thùng chứa / khay trứng */
.container {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; min-width: 280px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.container .label { font-size: 22px; font-weight: 700; color: var(--muted); }
.container .slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 72px; align-items: center; }
.tenframe { display: grid !important; grid-template-columns: repeat(5, 64px); gap: 6px; }
.tenframe .cell { width: 64px; height: 64px; border-radius: 12px; background: #f6ecdc; display: flex; align-items: center; justify-content: center; }
.tenframe .cell .item { font-size: 42px; }
.tray { background: #fff3df; border: 3px dashed #f0cf9e; border-radius: var(--radius); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 80px; max-width: 100%; }
.item.added { animation: pop .3s; }
.item.added::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 3px solid var(--blue); }
@keyframes pop { 0% { transform: scale(.3) } 80% { transform: scale(1.15) } 100% { transform: scale(1) } }

/* ghép đôi */
.pairs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.pcol { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.pcol .item { font-size: clamp(38px, 7vw, 54px); }
.pcol .link { width: 4px; height: 22px; background: transparent; border-radius: 2px; }
.pcol.paired .link { background: var(--blue); }
.pcol .slot { width: 60px; height: 60px; border-radius: 14px; border: 3px dashed #e8d8c0; display: flex; align-items: center; justify-content: center; }
.pcol.paired .slot { border-color: transparent; }
.pcol .slot .item { font-size: 44px; }
.pcol.tapme .item.top { animation: pulse2 1.2s infinite; }
.rows { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); }
.rows .r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rows .r .item { font-size: clamp(36px, 6vw, 50px); }

/* nối */
.match { display: grid; grid-template-columns: 1fr auto; gap: 12px 40px; align-items: center; }
.match .nums { display: flex; flex-direction: column; gap: 12px; }
.match .gs { display: flex; flex-direction: column; gap: 12px; }
.match .group { min-height: 70px; padding: 6px 10px; max-width: 360px; }
.match .opt { height: 74px; min-width: 74px; font-size: 40px; }
.opt.sel { background: #d9ecff; box-shadow: 0 7px 0 #a9cdf5; }
.done-a { background: #c9f5d9 !important; border-color: var(--green) !important; }

/* phản hồi */
.feedback {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); font-size: 110px;
  pointer-events: none; opacity: 0; transition: all .25s; z-index: 50; text-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.feedback.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; border-radius: 999px;
  padding: 10px 22px; font-size: 24px; font-weight: 700; box-shadow: var(--shadow); z-index: 60; transition: opacity .3s;
}
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }

/* kết quả */
.result { text-align: center; padding-top: 3vh; }
.result h2 { font-size: 44px; margin: 6px 0; color: var(--primary-d); }
.result .bigstars { font-size: 72px; letter-spacing: 6px; }
.result .bigstars span { display: inline-block; animation: pop .5s both; }
.result .bigstars span:nth-child(2) { animation-delay: .25s }
.result .bigstars span:nth-child(3) { animation-delay: .5s }
.chest { font-size: 120px; display: inline-block; cursor: pointer; animation: wiggle 1.2s infinite; }
.chest.open { animation: pop .5s; cursor: default; }
@keyframes wiggle { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
.reward-card { display: inline-flex; flex-direction: column; align-items: center; background: #fff; border-radius: 26px; padding: 14px 26px; box-shadow: var(--shadow); margin: 10px; }
.reward-card .s { font-size: 90px; line-height: 1.1; }
.stat { font-size: 22px; color: var(--muted); margin: 6px 0 14px; }

/* album */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.sticker { background: #fff; border-radius: 20px; box-shadow: var(--shadow); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sticker .s { font-size: 54px; }
.sticker .n { font-size: 14px; color: var(--muted); }
.sticker.no { background: #f3eadc; }
.sticker.no .s { filter: brightness(0); opacity: .15; }
h2.sec { font-size: 30px; margin: 10px 0; }

/* phụ huynh */
.panel { background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.panel h3 { margin: 0 0 8px; font-size: 24px; }
table.t { width: 100%; border-collapse: collapse; font-size: 17px; }
table.t th, table.t td { padding: 7px 6px; border-bottom: 1px solid #f0e6d6; text-align: left; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 6px 0; }
.switch input { width: 26px; height: 26px; }
.small-btn { background: #f3eadc; border-radius: 12px; padding: 8px 14px; font-size: 17px; font-weight: 700; margin: 4px 6px 4px 0; }
.small-btn.danger { background: #ffe0e0; color: #b3261e; }

/* pháo giấy */
.confetti { position: fixed; top: -40px; font-size: 30px; z-index: 70; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

@media (max-width: 560px) {
  .node { width: calc(50% - 8px); }
  .opt { min-width: 76px; height: 76px; font-size: 38px; }
  .wagon { width: 56px; height: 56px; font-size: 30px; }
  .train .engine { font-size: 52px; }
  .tenframe { grid-template-columns: repeat(5, 52px); }
  .tenframe .cell { width: 52px; height: 52px; }
  .match { gap: 10px 14px; }
}

/* ===== Tối ưu iPad: chạm, kéo thả ===== */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { -webkit-touch-callout: none; overscroll-behavior: none; }
.draggable { touch-action: none; cursor: grab; -webkit-user-drag: none; }
.dragging { opacity: .25; }
.drag-ghost {
  position: fixed !important; z-index: 100; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); cursor: grabbing;
  display: flex; align-items: center; justify-content: center;
}
.drop-hover { outline: 5px dashed var(--blue) !important; outline-offset: 3px; background-color: #eef6ff !important; }
.drag-help { font-size: 18px; color: var(--muted); }
.answer-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slot-line { display: flex; align-items: center; gap: 12px; font-size: 48px; }
.answer-slot {
  width: 104px; height: 104px; border-radius: 26px; border: 5px dashed #f0b87a; background: #fff8ee;
  display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: #e0a060;
  transition: transform .15s;
}
.answer-slot.filled { border-style: solid; border-color: var(--green); background: #eafff1; color: var(--green-d); animation: pop .3s; }
.answer-slot.wrong { animation: shake .35s; border-color: var(--red); }
.group { position: relative; }
.group-num {
  position: absolute; right: -10px; top: -14px; background: var(--green); color: #fff; font-weight: 800; font-size: 26px;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.wagon.drop-hover { transform: scale(1.12); }

/* Màn đã chơi / chưa chơi */
.node.played { background: #f1fff4; border: 3px solid #9fe3b6; }
.node .done-tag {
  position: absolute; top: -10px; right: -8px; background: var(--green); color: #fff; font-size: 14px; font-weight: 800;
  border-radius: 999px; padding: 2px 9px; box-shadow: 0 3px 0 var(--green-d);
}
.node .new-tag { font-size: 14px; color: var(--muted); }
.node .suggest-tag {
  position: absolute; top: -10px; left: -6px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 800;
  border-radius: 999px; padding: 2px 9px;
}
.world-progress { font-size: 17px; font-weight: 700; color: #3c6b3f; margin: -6px 0 12px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 17px; margin: 0 0 14px; color: var(--muted); }

/* iPad (768–1366px): nút và vật to hơn cho ngón tay */
@media (min-width: 740px) and (pointer: coarse), (min-width: 740px) and (max-width: 1366px) {
  .opt { min-width: 104px; height: 104px; font-size: 54px; border-radius: 28px; }
  .opt.word { font-size: 30px; height: 88px; }
  .options { gap: 18px; }
  .wagon { width: 84px; height: 84px; font-size: 46px; }
  .node { width: 150px; min-height: 164px; }
  .tray .item, .container .item { font-size: 62px; }
}

/* Chọn tài khoản */
.accounts { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 8px; }
.account {
  width: 170px; padding: 16px 10px; background: #fff; border-radius: 28px; box-shadow: 0 7px 0 #e4d7c3;
  display: flex; flex-direction: column; align-items: center; gap: 4px; border: 4px solid transparent;
}
.account:active { transform: translateY(5px); box-shadow: 0 2px 0 #e4d7c3; }
.account.last { border-color: #ffc38f; }
.account .av { font-size: 76px; line-height: 1.1; }
.account .nm { font-size: 28px; font-weight: 800; color: var(--ink); }
.account .sm { font-size: 16px; color: var(--muted); }

/* ===== Thế giới 3: cộng trừ ===== */
.eq {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius); padding: 12px 22px; box-shadow: var(--shadow);
  font-size: 50px; font-weight: 800;
}
.eq.big { font-size: 60px; }
.eq .op { color: var(--primary-d); min-width: 30px; text-align: center; }
.eq .num { min-width: 44px; text-align: center; }
.eq .ex { background: #f4f0ff; border-radius: 18px; padding: 0 14px; }
.eq .res { font-size: 28px; color: var(--purple); }
.blank-box {
  min-width: 86px; height: 86px; padding: 0 8px; border-radius: 22px; border: 5px dashed #f0b87a; background: #fff8ee;
  display: inline-flex; align-items: center; justify-content: center; color: #e0a060; font-weight: 800; font-size: 0.9em;
}
.blank-box.active { border-color: var(--primary); animation: pulse2 1.1s infinite; }
.blank-box.filled { border-style: solid; border-color: var(--green); background: #eafff1; color: var(--green-d); animation: pop .3s; }
.blank-box.filled-soft { border-style: solid; border-color: var(--blue); background: #eef6ff; color: var(--ink); }
.blank-box.opslot { min-width: 70px; }
.opt.sign { color: var(--primary-d); background: #fff4e6; }
.picgroups { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.picgroups .group { cursor: default; }
.bigop { font-size: 60px; font-weight: 800; color: var(--primary-d); }
.lbl-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lbl { font-size: 18px; font-weight: 700; color: var(--muted); }
.empty-note { font-size: 18px; color: var(--muted); }
.item.arrive { animation: arrive .7s both; }
@keyframes arrive { from { transform: translate(140px, -40px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.item.gone { opacity: .3; filter: grayscale(.6); }
.item.gone::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: .8em; font-weight: 800; opacity: 1; }
.gone-zone {
  min-width: 220px; min-height: 90px; border: 4px dashed #b8d4f5; border-radius: 26px; background: #f2f8ff;
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; flex-wrap: wrap; justify-content: center;
}
.gone-zone .zicon { font-size: 56px; }
.after-drag { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dots-hint { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; font-size: 26px; background: #fff; border-radius: 16px; padding: 4px 12px; box-shadow: var(--shadow); }
.dots-hint .plus { width: 16px; }
.dots-hint .gone { opacity: .25; text-decoration: line-through; }

/* tháp số */
.towers { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.tower { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #fff; padding: 12px; border-radius: 22px; box-shadow: var(--shadow); }
.tcell { width: 86px; height: 76px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; }
.tcell.top { grid-column: span 2; justify-self: center; background: #ffe7a8; }
.tcell.l { background: #ffd1dc; } .tcell.r { background: #cfe9ff; }
.blank-box.tcell { width: 86px; height: 76px; }

/* nhà số */
.house { display: flex; flex-direction: column; align-items: center; }
.roof { width: 260px; height: 90px; background: #ff9fb8; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 44px; font-weight: 800; color: #fff; }
.floors { background: #fff; border-radius: 0 0 20px 20px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; width: 210px; }
.floor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hcell { height: 72px; border-radius: 14px; background: #ffeef3; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; }
.blank-box.hcell { min-width: 0; }

/* đường đua */
.track { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; background: #ffe0d6; padding: 10px; border-radius: 24px; }
.tcell-road { position: relative; min-width: 104px; height: 84px; background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; padding: 0 8px; }
.tcell-road.start { background: #fff4c2; font-size: 18px; }
.tcell-road.finish { background: #d7f7df; font-size: 22px; }
.tcell-road.now { outline: 4px solid var(--primary); }
.tcell-road.ok { background: #eafff1; color: var(--green-d); }
.car { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 40px; }
.car.win { animation: pop .5s; }
.race-area { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ong và bông hoa */
.flower { position: relative; width: 320px; height: 320px; }
.flower .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 90px; }
.petal {
  position: absolute; transform: translate(-50%, -50%); width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe3ef, #ffb3cf); box-shadow: 0 5px 0 #f58cb3;
  display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; flex-wrap: wrap; cursor: pointer;
}
.petal .bee-dot { position: absolute; font-size: 22px; bottom: -6px; right: -4px; }
.bees { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bee { background: #fff3b0; border-radius: 999px; padding: 8px 18px 8px 10px; font-size: 32px; font-weight: 800; box-shadow: 0 6px 0 #e6c44d; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.bee .bi { font-size: 38px; }
.bee.sel { outline: 4px solid var(--blue); }
.bee.wrong { animation: shake .35s; }
.bee.done-a { opacity: .45; }
.bee .dots-hint { font-size: 16px; box-shadow: none; padding: 0 4px; }

/* cây bưởi */
.tree {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 620px; padding: 22px 18px;
  background: radial-gradient(ellipse at center, #8fdc7a, #5cb85c); border-radius: 50% 50% 44% 44% / 60% 60% 40% 40%;
}
.trunk { width: 44px; height: 40px; background: #8b5a2b; border-radius: 0 0 10px 10px; margin-top: -18px; }
.fruit {
  width: 108px; height: 96px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #f6ffc7, #c7e86a);
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; box-shadow: 0 5px 0 #98b949;
}
.fruit.picked { transform: scale(.7); opacity: .9; margin: -8px; }
.basket { min-width: 260px; min-height: 100px; background: #fff3df; border: 4px dashed #d8a25a; border-radius: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; }
.basket .bicon { font-size: 54px; }
.basket .bt { font-size: 20px; font-weight: 800; color: #9b6a2e; margin-right: 6px; }

/* chuỗi phép tính */
.chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: #fff; border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); font-size: 44px; font-weight: 800; }
.cstart { width: 80px; height: 80px; border-radius: 50%; background: #ffd66b; display: flex; align-items: center; justify-content: center; }
.carrow { display: flex; flex-direction: column; align-items: center; color: var(--primary-d); font-size: 40px; line-height: .9; }
.carrow small { font-size: 26px; }

/* BOSS */
.boss { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, #3f2a56, #6b3f8f); color: #fff; border-radius: 22px; padding: 8px 16px; margin: 6px 0; }
.boss .bicon { font-size: 52px; display: inline-block; }
.boss .bicon.hit { animation: shake .5s; }
.boss .hearts { font-size: 20px; letter-spacing: 1px; }

/* ===== Trang bài học (4 phần) ===== */
.lesson-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.lesson-head h2 { margin: 0; font-size: 30px; color: var(--primary-d); }
.lesson-head .book { color: var(--muted); font-size: 17px; }
.mascot.small { font-size: 72px; }
.lcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 640px) { .lcards { grid-template-columns: 1fr; } }
.lcard {
  display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border-radius: 26px; padding: 16px 18px;
  box-shadow: 0 7px 0 #e4d7c3; border: 4px solid transparent; font-family: inherit; color: var(--ink); min-height: 110px;
}
.lcard:active { transform: translateY(5px); box-shadow: 0 2px 0 #e4d7c3; }
.lcard.hl { border-color: var(--primary); animation: pulse 1.6s infinite; }
.lcard .li { font-size: 54px; }
.lcard .lt { flex: 1; display: flex; flex-direction: column; }
.lcard .lt b { font-size: 25px; }
.lcard .lt span { font-size: 16px; color: var(--muted); }
.lcard .lt .ls { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--primary-d); }
.stage-badges { display: flex; gap: 2px; font-size: 16px; }
.stage-badges .sb { opacity: .25; filter: grayscale(1); }
.stage-badges .sb.ok { opacity: 1; filter: none; }
.stage-pill { font-size: 22px; }

/* ===== Học hiểu ===== */
.step-dots { display: flex; gap: 8px; }
.step-dots .d { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #e4d7c3; }
.step-dots .d.done { background: var(--green); box-shadow: none; }
.step-dots .d.now { background: var(--primary); box-shadow: none; transform: scale(1.3); }
.explore-q .owl { font-size: 48px; }
.explore-next { display: flex; justify-content: center; margin: 18px 0 30px; }
.explore-res { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.big-caption { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: var(--purple); background: #f4efff; border-radius: 20px; padding: 8px 18px; text-align: center; }
.big-num { font-size: 110px; font-weight: 800; color: var(--primary-d); line-height: 1; animation: pop .4s; }
.counted-block { display: inline-flex; flex-direction: column; align-items: center; background: #fff4e0; border: 3px solid #ffc27a; border-radius: 18px; padding: 4px 10px; }
.counted-block .cb-items { font-size: 30px; letter-spacing: -4px; }
.counted-block b { font-size: 34px; color: var(--primary-d); }
.merge-box { min-width: 120px; }
.try-q { font-size: 24px; font-weight: 700; text-align: center; }
.story-deco { font-size: 90px; display: flex; align-items: center; gap: 10px; }
.story-deco .qmark { font-size: 60px; }

/* ===== Trang kế hoạch & nội dung ===== */
.muted { color: var(--muted); font-size: 15px; }
.clist { line-height: 1.9; font-size: 18px; }
.clist a { color: var(--primary-d); font-weight: 700; }
td.samples div { font-size: 14px; margin: 2px 0; }
details { margin: 8px 0; font-size: 16px; }
summary { cursor: pointer; font-weight: 700; }
.voice-sel { font-family: inherit; font-size: 17px; padding: 6px 10px; border-radius: 12px; border: 2px solid #f1dcc0; background: #fff; }
.node .boss-tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #3f2a56; color: #ffd84d; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }