@font-face {
  font-family: 'Nunito Game';
  src: url('../assets/fonts/nunito/Nunito-Variable.ttf') format('truetype-variations');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

/* =============================================================
 * THẾ GIỚI BÉ THÔNG MINH — Giao diện game 2D
 *
 * Hướng thiết kế: "thế giới truyện tranh" — panel giấy kem viền gỗ nâu,
 * nút bấm dày có gờ nổi 3D, tiêu đề viền đậm kiểu game, nền trời có
 * nắng/mây/đồi vẽ bằng CSS. Không dùng ảnh hay font tải từ mạng
 * (giữ nguyên nguyên tắc offline tuyệt đối).
 *
 * Nguyên tắc bắt buộc (Mục 6.1 tài liệu):
 *  - Nút bấm LỚN, khoảng cách rõ (nút lựa chọn ≥ 72px, nút chính ≥ 64px)
 *  - KHÔNG chỉ dùng màu để truyền đạt đúng/sai — luôn kèm ký hiệu ✔ / ✖
 *  - Bố cục co giãn: điện thoại, tablet, PC, kể cả tablet nằm ngang
 *  - Tôn trọng "giảm chuyển động": mọi animation đều tắt được
 *  - Viền focus rõ cho bé/phụ huynh dùng bàn phím
 *
 * Powered by DienNT | 0933934123
 * ============================================================= */

/* ======================= 1. TOKEN ======================= */
:root {
  /* Trời và nền */
  --sky-top:    #8fd6ff;
  --sky-mid:    #bfe9ff;
  --sky-bot:    #e8f7ff;
  --grass:      #7fd65f;
  --grass-dark: #52b23c;

  /* Giấy & gỗ — bộ khung chính của UI */
  --paper:      #fffdf3;
  --paper-2:    #fff7e2;
  --wood:       #7a5a3f;
  --wood-dark:  #5b4330;
  --wood-light: #a8805c;

  /* Mực */
  --ink:        #3b2f26;
  --ink-soft:   #7a6a5c;

  /* Màu chủ đề */
  --blue:       #3d93f5;  --blue-d:   #2168c4;
  --green:      #43c463;  --green-d:  #2a9648;
  --amber:      #ffc233;  --amber-d:  #d99200;
  --coral:      #ff7a6b;  --coral-d:  #d94b3c;
  --violet:     #a97bf0;  --violet-d: #7b4dc9;
  --teal:       #3fcfc0;  --teal-d:   #1f9c90;

  /* Trạng thái */
  --good:       #2a9648;  --good-bg:  #e6f9ea;  --good-br: #8fe0a3;
  --bad:        #d94b3c;  --bad-bg:   #fff0ed;  --bad-br:  #ffb8ae;
  --hint:       #a3700a;  --hint-bg:  #fff8e0;  --hint-br: #ffdf8e;
  --danger:     #d33d3d;

  --radius:     22px;
  --radius-sm:  14px;
  --tap:        56px;

  /* Khung panel kiểu game: gờ sáng bên trong + gờ gỗ bên dưới + bóng mềm */
  --panel-shadow:
      inset 0 3px 0 rgba(255,255,255,.9),
      inset 0 -5px 0 rgba(122,90,63,.10),
      0 6px 0 rgba(122,90,63,.22),
      0 14px 26px rgba(70,48,30,.16);

  --font: 'Nunito Game', Nunito, 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  background: var(--sky-mid);
  overscroll-behavior: none;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.big-text { font-size: 18px; }

/* ======================= 2. NỀN TRANG TRÍ ======================= */
#bg-decor {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 72%);
}
#bg-decor .sun {
  position: absolute; top: -70px; right: -70px; width: 290px; height: 290px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,239,170,.95) 0%, rgba(255,226,120,.55) 38%, rgba(255,226,120,0) 70%);
  animation: sunPulse 9s ease-in-out infinite;
}
#bg-decor .cloud {
  position: absolute; background: #fff; border-radius: 100px;
  box-shadow: 0 10px 22px rgba(120,160,190,.22);
  opacity: .95;
}
/* Cụm bông mây tạo bằng hai pseudo-element */
#bg-decor .cloud::before, #bg-decor .cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
#bg-decor .cloud::before { width: 60%; height: 190%; left: 8%;  top: -95%; }
#bg-decor .cloud::after  { width: 45%; height: 150%; right: 10%; top: -62%; }
#bg-decor .c1 { width: 150px; height: 42px; top: 11%;  left: -170px; animation: drift 68s linear infinite; }
#bg-decor .c2 { width: 110px; height: 32px; top: 23%;  left: -140px; animation: drift 92s linear infinite 9s; opacity: .8; }
#bg-decor .c3 { width: 190px; height: 50px; top: 5%;   left: -220px; animation: drift 120s linear infinite 24s; opacity: .7; }
#bg-decor .c4 { width:  90px; height: 26px; top: 33%;  left: -120px; animation: drift 78s linear infinite 42s; opacity: .55; }

#bg-decor .hill { position: absolute; left: -12%; right: -12%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
#bg-decor .h1 { bottom: 0;    height: 150px; background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%); }
#bg-decor .h2 { bottom: 55px; height: 170px; background: #6cc94f; opacity: .75; left: -28%; right: 32%; }
#bg-decor .h3 { bottom: 70px; height: 200px; background: #8fd977; opacity: .55; left: 30%; right: -30%; }

@keyframes drift   { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes sunPulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.07); opacity: 1; } }

#app {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto; min-height: 100vh;
  padding: 12px 16px 36px;
}

h1, h2, h3 { margin: 0 0 8px; line-height: 1.22; }
p { margin: 6px 0; }
ul { margin: 6px 0; padding-left: 20px; }
.center { text-align: center; }
.tiny { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.tiny.warn { color: var(--bad); font-weight: 700; }

.screen { display: block; }
.fade-in { animation: popIn .26s cubic-bezier(.2,.9,.3,1.2); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Giảm chuyển động: tắt mọi animation/transition, kể cả nền */
body.reduce-motion *, body.reduce-motion #bg-decor * {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.allow-motion) *, body:not(.allow-motion) #bg-decor * {
    animation: none !important; transition: none !important;
  }
}

/* Tiêu đề kiểu game: chữ trắng viền nâu dày */
.game-title, .splash-title, .summary h2 {
  color: #fff; font-weight: 900; letter-spacing: .5px;
  text-shadow:
     2px 0 0 var(--wood-dark), -2px 0 0 var(--wood-dark),
     0 2px 0 var(--wood-dark),  0 -2px 0 var(--wood-dark),
     2px 2px 0 var(--wood-dark), -2px 2px 0 var(--wood-dark),
     2px -2px 0 var(--wood-dark), -2px -2px 0 var(--wood-dark),
     0 7px 10px rgba(59,47,38,.35);
}

/* Khung panel giấy — dùng lại ở khắp nơi */
.panel, .psec, .prompt, .bubble, .wallet, .tray, .jig-tray, .pick-field, .show-field,
.summary, .skill-row, .daypart-card, .scene-text, .review-box, .seq-screen,
.addsub-visual, .break-banner, .resume-box, .modal, .item-card, .group-box {
  background: var(--paper);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}

/* ======================= 3. NÚT BẤM ======================= */
.btn {
  position: relative;
  font: inherit; font-weight: 800;
  min-height: var(--tap);
  padding: 13px 22px;
  border: 3px solid var(--wood-dark);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--wood-light),
              0 10px 16px rgba(70,48,30,.2);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.btn:hover { filter: brightness(1.04); }
/* Bấm vào thì nút lún xuống như nút thật */
.btn:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 1px 0 var(--wood-light),
              0 3px 7px rgba(70,48,30,.22);
}
.btn:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }

/* Nút màu: chữ trắng viền đậm + gờ dưới tối hơn */
.btn.primary, .btn.danger, .btn.key.go {
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.22);
  border-color: rgba(0,0,0,.18);
}
.btn.primary {
  background: linear-gradient(180deg, #6fb2ff 0%, var(--blue) 55%, var(--blue-d) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 var(--blue-d),
              0 12px 20px rgba(33,104,196,.34);
}
.btn.primary:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--blue-d), 0 4px 8px rgba(33,104,196,.3); }
.btn.danger {
  background: linear-gradient(180deg, #ff8d7f 0%, var(--danger) 60%, #a82e2e 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 #a82e2e, 0 12px 20px rgba(168,46,46,.3);
}
.btn.ghost {
  background: rgba(255,253,243,.92);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 4px 0 rgba(122,90,63,.3);
}
.btn.big   { min-height: 66px; font-size: 1.12rem; padding: 15px 30px; border-radius: 18px; }
.btn.huge  { min-height: 78px; font-size: 1.3rem;  padding: 18px 38px; border-radius: 22px; }
.btn.small { min-height: 42px; padding: 7px 14px; font-size: .88rem; border-width: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 rgba(122,90,63,.3); }
.btn.icon  { min-width: var(--tap); padding: 10px 14px; }

/* Chip bo tròn — chọn độ khó, chọn hồ sơ, gợi ý ôn tập */
.btn.chip {
  min-height: 46px; padding: 8px 18px; border-radius: 999px;
  font-size: .95rem; border-width: 3px;
}
.btn.chip.sel {
  background: linear-gradient(180deg, #6fb2ff, var(--blue-d));
  color: #fff; border-color: var(--blue-d); text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.btn.hint {
  background: linear-gradient(180deg, #ffe9a8, var(--amber));
  border-color: var(--amber-d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 var(--amber-d), 0 10px 16px rgba(217,146,0,.26);
}

/* ======================= 4. HEADER ======================= */
.app-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);
  border: 3px solid var(--wood-dark);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.14),
              0 6px 0 rgba(91,67,48,.5), 0 14px 24px rgba(70,48,30,.26);
}
.app-header .title {
  flex: 1 1 180px; font-size: 1.3rem; margin: 0;
  color: #fff; font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.14);
}
.app-header .btn { border-color: rgba(0,0,0,.25); }
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kid-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 3px solid var(--wood-dark); border-radius: 999px;
  padding: 5px 15px 5px 8px; cursor: pointer; font-weight: 800;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 rgba(0,0,0,.18);
}
.kid-chip:hover { filter: brightness(1.04); }
.kid-ava { font-size: 1.45rem; }

/* ======================= 5. THANH BẢN QUYỀN ======================= */
.brandbar {
  margin: 30px auto 6px; padding: 9px 20px;
  width: fit-content; max-width: 100%;
  text-align: center; font-size: .8rem; font-weight: 800; letter-spacing: .4px;
  color: var(--wood-dark);
  background: rgba(255,253,243,.86);
  border: 2px solid rgba(122,90,63,.45);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(122,90,63,.18);
}

/* ======================= 6. SPLASH ======================= */
.splash { text-align: center; padding: 20px 10px 6px; display: grid; gap: 14px; justify-items: center; }
.splash-logo {
  font-size: 5.4rem; line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(70,48,30,.3));
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.splash-title { font-size: 2.3rem; margin: 0; }
.splash-sub {
  color: var(--ink); font-weight: 700; margin-bottom: 6px;
  background: rgba(255,253,243,.9); border: 2px solid rgba(122,90,63,.35);
  padding: 7px 18px; border-radius: 999px; box-shadow: 0 3px 0 rgba(122,90,63,.16);
}
.splash-secondary-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.splash-secondary-actions .btn { min-width: 270px; margin: 0; }
.splash-note { font-size: .8rem; color: var(--wood-dark); font-weight: 700; margin-top: 8px; }
.splash-brand {
  font-weight: 900; letter-spacing: .5px; color: #fff; font-size: 1rem;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 2px solid var(--wood-dark); border-radius: 999px; padding: 8px 22px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 var(--wood-dark);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.splash-copy { font-size: .78rem; color: var(--wood-dark); font-weight: 600; }

/* ======================= 7. HỒ SƠ BÉ ======================= */
.profile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.profile-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.profile-actions .btn { min-width: 250px; margin: 0; }
.profile-card {
  font: inherit; cursor: pointer;
  display: grid; gap: 5px; justify-items: center; align-content: center;
  padding: 20px 10px; min-height: 165px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 4px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.profile-card:hover { transform: translateY(-4px); border-color: var(--blue-d); }
.profile-card:active { transform: translateY(2px); }
.profile-card:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.profile-card.add { border-style: dashed; background: rgba(255,253,243,.7); }
.profile-ava { font-size: 3.2rem; filter: drop-shadow(0 4px 6px rgba(70,48,30,.22)); }
.profile-name { font-weight: 900; font-size: 1.08rem; }
.profile-age { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }

.form { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; }
.field { display: grid; gap: 9px; }
.field > span:first-child {
  font-weight: 900; font-size: 1.02rem; color: var(--wood-dark);
}
.text-input, .gate-input {
  font: inherit; font-weight: 700; padding: 14px 16px; min-height: var(--tap);
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  background: #fff; width: 100%; color: var(--ink);
  box-shadow: inset 0 3px 6px rgba(122,90,63,.14);
}
.text-input:focus, .gate-input:focus { outline: 4px solid var(--amber); border-color: var(--blue-d); }

.ava-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ava-opt {
  font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 2px;
  padding: 11px 6px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 rgba(122,90,63,.25);
}
.ava-opt.sel {
  border-color: var(--blue-d);
  background: linear-gradient(180deg, #eaf4ff, #d3e8ff);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 var(--blue-d);
}
.ava-emo { font-size: 2.2rem; }

.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 11px; }
.band-opt {
  font: inherit; cursor: pointer; display: grid; gap: 3px; text-align: left;
  padding: 15px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,90,63,.25);
}
.band-opt strong { font-size: 1.05rem; }
.band-opt.sel {
  border-color: var(--blue-d);
  background: linear-gradient(180deg, #eaf4ff, #d3e8ff);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--blue-d);
}

/* ======================= 8. BẢN ĐỒ THẾ GIỚI ======================= */
.zone-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.zone-card {
  --card-color: var(--blue);
  position: relative; overflow: hidden;
  font: inherit; text-align: left; cursor: pointer;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 16px 16px; min-height: 142px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 4px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Dải màu đặc trưng của từng khu vực ở mép trên */
.zone-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 9px;
  background: var(--card-color);
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.zone-card:hover { transform: translateY(-5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 10px 0 rgba(122,90,63,.22), 0 20px 34px rgba(70,48,30,.22); }
.zone-card:active { transform: translateY(1px); }
.zone-card:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.zone-emoji {
  flex: none; width: 70px; height: 70px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; line-height: 1;
  background: var(--card-color);
  border: 3px solid rgba(0,0,0,.14); border-radius: 20px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.12),
              0 4px 0 rgba(0,0,0,.14);
}
.zone-body { flex: 1; display: grid; gap: 5px; min-width: 0; }
.zone-title { font-weight: 900; font-size: 1.1rem; color: var(--wood-dark); }
.zone-desc { font-size: .88rem; color: var(--ink-soft); font-weight: 600; }
.zone-meta { font-size: .8rem; color: var(--wood-dark); font-weight: 800; }

/* Thanh tiến độ bóng bẩy */
.pbar {
  height: 14px; border-radius: 999px; overflow: hidden; margin-top: 3px;
  background: #e7dcc9;
  border: 2px solid rgba(122,90,63,.4);
  box-shadow: inset 0 2px 4px rgba(122,90,63,.3);
}
.pbar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #7ce895 0%, var(--green) 55%, var(--green-d) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55);
  transition: width .45s cubic-bezier(.2,.9,.3,1.1);
}

.review-box { padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 10px; }
.review-cap { font-weight: 900; font-size: .95rem; color: var(--wood-dark); }
.review-chips { display: flex; gap: 9px; flex-wrap: wrap; }

.badge-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.badge {
  background: linear-gradient(180deg, #fff3c9, var(--amber));
  border: 3px solid var(--amber-d); border-radius: 999px;
  padding: 7px 16px; font-size: .85rem; font-weight: 900; color: #6b4a00;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--amber-d);
}
.badge.new {
  background: linear-gradient(180deg, #c8f7d4, var(--green));
  border-color: var(--green-d); color: #114a23;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--green-d);
  animation: pop .5s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes pop { 0% { transform: scale(.5); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.break-banner {
  display: grid; gap: 5px; padding: 16px 18px; margin-bottom: 16px;
  background: linear-gradient(180deg, #ecfbf0, #d7f5df);
  border-color: var(--green-d);
}
.break-banner strong { font-size: 1.08rem; color: #14512a; }

/* ======================= 9. KHU VỰC / NHIỆM VỤ ======================= */
.zone-intro { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.mascot {
  font-size: 3.4rem; flex: none;
  filter: drop-shadow(0 5px 7px rgba(70,48,30,.26));
  animation: bob 3.8s ease-in-out infinite;
}
/* Bong bóng thoại có đuôi nhọn trỏ về nhân vật */
.bubble { flex: 1; padding: 14px 16px; position: relative; font-weight: 600; }
.bubble::before, .bubble::after {
  content: ''; position: absolute; left: -15px; top: 26px;
  border: 12px solid transparent;
}
.bubble::before { border-right-color: var(--wood); left: -27px; }
.bubble::after  { border-right-color: var(--paper); }

.resume-box {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(180deg, #fffaea, #fff3cf);
  border-color: var(--amber-d);
}
.level-row { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }

.skill-list { display: grid; gap: 10px; }
.skill-row {
  display: grid; grid-template-columns: minmax(140px, 1.5fr) 1fr auto;
  gap: 12px; align-items: center; padding: 12px 14px;
  border-width: 2px; border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 rgba(122,90,63,.18);
}
.skill-name { display: grid; gap: 1px; font-weight: 800; font-size: .96rem; min-width: 0; }
.skill-state {
  font-size: .76rem; font-weight: 900; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: #ece2d2; color: var(--ink-soft); border: 2px solid rgba(122,90,63,.3);
}
.st-mastered   { background: var(--good-bg); color: var(--good); border-color: var(--good-br); }
.st-review_due { background: var(--hint-bg); color: var(--hint); border-color: var(--hint-br); }
.st-practicing { background: #e7f1ff; color: var(--blue-d); border-color: #a9cdfb; }
.st-learning   { background: #f2ece2; color: var(--ink-soft); }

/* ======================= 10. HUD TRONG MÀN CHƠI ======================= */
.hud {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 9px 14px;
  background: rgba(255,253,243,.9);
  border: 3px solid var(--wood); border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,90,63,.22);
}
.dots { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; }
.dot {
  width: 17px; height: 17px; border-radius: 50%; display: inline-block;
  background: #e2d6c3; border: 2px solid rgba(122,90,63,.35);
  box-shadow: inset 0 2px 3px rgba(122,90,63,.26);
}
.dot.now {
  background: linear-gradient(180deg, #8dc3ff, var(--blue));
  border-color: var(--blue-d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 5px rgba(61,147,245,.22);
  animation: beat 1.3s ease-in-out infinite;
}
@keyframes beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.dot.good { background: linear-gradient(180deg, #86eda2, var(--green)); border-color: var(--green-d); }
.dot.ok   { background: linear-gradient(180deg, #c3f3d0, #8fe0a3); border-color: var(--green-d); }
.dot.miss { background: linear-gradient(180deg, #ffd3cc, #ffb0a5); border-color: var(--bad); }
.hud-right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.level-chip {
  font-size: .78rem; font-weight: 900; white-space: nowrap;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 2px solid var(--wood); border-radius: 999px; padding: 6px 13px;
  box-shadow: 0 2px 0 rgba(122,90,63,.3);
}

/* Khung câu hỏi — bảng gỗ treo */
.prompt {
  font-size: 1.28rem; font-weight: 800; line-height: 1.42;
  padding: 17px 20px 17px 24px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.prompt::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 11px;
  background: linear-gradient(180deg, var(--amber), var(--amber-d));
  box-shadow: 2px 0 0 rgba(0,0,0,.1);
}
.stage {
  display: grid; gap: 16px; justify-items: center;
  width: 100%;
  /* minmax(0,1fr) là bắt buộc: nếu để cột tự co theo nội dung (max-content),
     khối .choices có width:100% sẽ nở rộng hơn màn hình và gây tràn ngang
     trên điện thoại. */
  grid-template-columns: minmax(0, 1fr);
}
.stage > * { max-width: 100%; min-width: 0; }
.stage-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ======================= 11. PHẢN HỒI ======================= */
.feedback { margin-top: 16px; min-height: 8px; }
.feedback.good, .feedback.bad, .feedback.hint {
  padding: 16px 18px; border: 3px solid; border-radius: var(--radius);
  position: relative;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.75), 0 5px 0 rgba(122,90,63,.16),
              0 12px 22px rgba(70,48,30,.14);
  animation: popIn .26s cubic-bezier(.2,.9,.3,1.2);
}
.feedback.good { background: linear-gradient(180deg, #f1fdf4, var(--good-bg)); border-color: var(--good-br); }
.feedback.bad  { background: linear-gradient(180deg, #fff7f5, var(--bad-bg));  border-color: var(--bad-br); }
.feedback.hint { background: linear-gradient(180deg, #fffdf2, var(--hint-bg)); border-color: var(--hint-br); }
.fb-main { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; font-size: 1.05rem; }
.fb-ico { font-size: 1.8rem; line-height: 1; flex: none; }
.feedback.good .fb-ico { animation: pop .5s cubic-bezier(.2,.9,.3,1.5); }
.fb-principle {
  margin-top: 10px; padding: 9px 13px; font-weight: 700;
  background: rgba(255,255,255,.72); border-radius: 12px;
  border: 2px dashed rgba(122,90,63,.3);
}
.fb-steps { margin: 10px 0 0; padding-left: 24px; font-weight: 600; }
.fb-steps li { margin: 4px 0; }
.hint-box { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.hint-ico { font-size: 1.4rem; flex: none; }
.hint-step { color: var(--ink-soft); font-weight: 600; }
/* Gợi ý hiển thị kèm BÊN DƯỚI lời giải thích, không ghi đè nó */
.feedback.with-hint .hint-box {
  margin-top: 12px; padding-top: 12px;
  border-top: 2px dashed rgba(122,90,63,.3);
}

/* ======================= 12. LỰA CHỌN ======================= */
.choices {
  display: grid; gap: 13px; width: 100%; max-width: 660px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.choices.numbers { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.choices.wide    { grid-template-columns: 1fr; }
.choice {
  font: inherit; font-weight: 900; cursor: pointer;
  min-height: 76px; padding: 15px 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-2) 100%);
  border: 4px solid var(--wood); border-radius: 20px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 0 5px 0 var(--wood-light),
              0 12px 20px rgba(70,48,30,.18);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: var(--ink);
  transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease;
}
.choices.numbers .choice { font-size: 1.7rem; }
.choices.wide .choice { justify-content: flex-start; text-align: left; font-size: 1.02rem; font-weight: 800; }
.choice:hover { transform: translateY(-3px); border-color: var(--blue-d); }
.choice:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 1px 0 var(--wood-light); }
.choice:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.choice-emoji { font-size: 2.1rem; flex: none; filter: drop-shadow(0 2px 3px rgba(70,48,30,.2)); }

/* Đúng/sai: dùng CẢ màu, viền VÀ ký hiệu — không chỉ dựa vào màu (Mục 6.1) */
.choice.pick-good {
  border-color: var(--good); background: linear-gradient(180deg, #f2fdf5, var(--good-bg));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 5px 0 var(--good), 0 0 0 5px rgba(42,150,72,.18);
}
.choice.pick-good::after { content: '✔'; color: var(--good); font-size: 1.5rem; font-weight: 900; }
.choice.pick-bad {
  border-color: var(--bad); background: linear-gradient(180deg, #fff6f4, var(--bad-bg));
  animation: shake .34s;
}
.choice.pick-bad::after { content: '✖'; color: var(--bad); font-size: 1.5rem; font-weight: 900; }
@keyframes shake { 20% { transform: translateX(-7px); } 60% { transform: translateX(7px); } 100% { transform: none; } }

/* ======================= 13. BÀN PHÍM SỐ ======================= */
.numpad { display: grid; gap: 13px; justify-items: center; }
.numpad-row { display: flex; align-items: baseline; gap: 10px; }
.numpad-display {
  min-width: 190px; text-align: center;
  font-size: 2.2rem; font-weight: 900; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 4px solid var(--wood); border-radius: var(--radius-sm);
  padding: 9px 20px;
  box-shadow: inset 0 4px 8px rgba(122,90,63,.18);
}
.numpad-unit { font-weight: 900; color: var(--wood-dark); font-size: 1.05rem; }
.numpad-keys { display: grid; grid-template-columns: repeat(3, min(82px, 22vw)); gap: 11px; }
.btn.key {
  min-height: 66px; font-size: 1.5rem; font-weight: 900; border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
}
.btn.key.sub {
  background: linear-gradient(180deg, #f6eee0, #e8dcc8);
}
.btn.key.go {
  background: linear-gradient(180deg, #7ce895 0%, var(--green) 55%, var(--green-d) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 var(--green-d), 0 12px 18px rgba(42,150,72,.3);
}
.btn.key.sm { min-height: 48px; min-width: 48px; font-size: 1.2rem; padding: 6px 12px; border-radius: 14px; }

/* ======================= 14. TOÁN: ĐẾM, CỘNG TRỪ ======================= */
.basket { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 900; }
.basket-ico { font-size: 2.5rem; filter: drop-shadow(0 3px 5px rgba(70,48,30,.26)); }
.basket-count {
  min-width: 58px; text-align: center; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 4px solid var(--wood); border-radius: var(--radius-sm); padding: 3px 12px;
  box-shadow: inset 0 3px 6px rgba(122,90,63,.18);
}
.pick-field, .show-field {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 660px; padding: 16px;
}
.pick-item {
  font: inherit; font-size: 2.3rem; line-height: 1; cursor: pointer;
  min-width: 66px; min-height: 66px;
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood); border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
  transition: transform .1s ease;
}
.pick-item:hover { transform: translateY(-3px); }
.pick-item.picked {
  border-color: var(--good);
  background: linear-gradient(180deg, #eefcf2, var(--good-bg));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--good);
  transform: translateY(3px) scale(.95);
}
.pick-item.picked::after { content: '✔'; display: block; font-size: .7rem; color: var(--good); font-weight: 900; margin-top: -4px; }
.show-item { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(70,48,30,.18)); }
.show-item.sm { font-size: 1.7rem; }
.equation {
  font-size: 2.3rem; font-weight: 900; letter-spacing: 2px; text-align: center;
  color: var(--wood-dark); text-shadow: 0 2px 0 rgba(255,255,255,.9);
}
.equation.small { font-size: 1.5rem; }
.addsub-visual {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 16px;
}
.addsub-visual .group { display: flex; flex-wrap: wrap; gap: 5px; max-width: 220px; justify-content: center; }
.addsub-visual .group.crossed { position: relative; opacity: .5; }
.addsub-visual .group.crossed::after {
  content: ''; position: absolute; inset: 45% 0 auto; height: 5px;
  background: var(--bad); border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,.14);
}
.addsub-visual .op { font-size: 2.3rem; font-weight: 900; color: var(--wood-dark); }

/* ======================= 15. CỬU CHƯƠNG — CÂY CẦU ======================= */
.bridge {
  display: flex; align-items: center; gap: 3px; justify-content: center;
  padding: 10px 14px; margin-bottom: 12px; overflow-x: auto; max-width: 100%;
  background: linear-gradient(180deg, #d7f0ff, #b4e2fb);
  border: 3px solid var(--wood); border-radius: 999px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 4px 0 rgba(122,90,63,.22);
}
.plank { font-size: 1.2rem; filter: grayscale(1); opacity: .42; transition: all .3s ease; }
.plank.built { filter: none; opacity: 1; transform: translateY(-2px); }
.bridge-bear, .bridge-flag { font-size: 1.7rem; flex: none; }
.bridge-bear { animation: bob 2.6s ease-in-out infinite; }
.groups { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.group-box {
  display: flex; flex-wrap: wrap; gap: 5px; max-width: 152px; justify-content: center;
  padding: 10px; border-color: var(--amber-d);
  background: linear-gradient(180deg, #fffaec, #fff1d2);
}

/* ======================= 16. ĐỒNG HỒ ======================= */
.clock-wrap { display: grid; gap: 12px; justify-items: center; }
.clockface {
  width: min(320px, 80vw); height: auto; touch-action: none;
  filter: drop-shadow(0 10px 18px rgba(70,48,30,.3));
}
.clockface.live { cursor: grab; }
.clockface.live.dragging { cursor: grabbing; }
.clock-num { font-size: 15px; font-weight: 900; fill: var(--wood-dark); font-family: var(--font); }
.hand.minute { stroke: var(--blue-d); stroke-width: 5.5; }
.hand.hour   { stroke: #c0392b; stroke-width: 9; }
.knob { fill: #fff; stroke-width: 3.5; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.knob.minute { stroke: var(--blue-d); }
.knob.hour   { stroke: #c0392b; }
.clock-controls { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cc-group {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 3px solid var(--wood); border-radius: 999px;
  padding: 5px 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,90,63,.22);
}
.cc-label { font-weight: 900; font-size: .92rem; color: var(--wood-dark); }
.cc-val { min-width: 50px; text-align: center; font-weight: 900; font-size: 1.2rem; color: var(--wood-dark); }
.readout {
  font-size: 2.4rem; font-weight: 900; letter-spacing: 3px; color: #fff;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 3px solid var(--wood-dark); border-radius: var(--radius-sm);
  padding: 4px 24px;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 5px 0 var(--wood-dark);
}
.daypart-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.daypart-emoji { font-size: 2.9rem; filter: drop-shadow(0 3px 5px rgba(70,48,30,.22)); }
.daypart-text { font-weight: 800; font-size: 1.15rem; }
.time-pair { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tp-item { display: grid; justify-items: center; gap: 6px; }
.tp-item .clockface { width: min(180px, 38vw); }
.tp-cap { font-weight: 900; font-size: .9rem; color: var(--wood-dark); }
.tp-arrow { font-size: 2.3rem; font-weight: 900; color: var(--wood-dark); }

/* ======================= 17. SIÊU THỊ ======================= */
.note-row, .tray, .wallet-notes { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.note {
  --note-bg: #ddd; --note-fg: #333;
  position: relative; overflow: hidden;
  font: inherit; cursor: pointer;
  display: grid; gap: 3px; align-content: center; justify-items: center;
  min-width: 126px; min-height: 76px; padding: 9px 13px;
  color: var(--note-fg);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 7px, rgba(255,255,255,0) 7px 14px),
    linear-gradient(180deg, color-mix(in srgb, var(--note-bg) 70%, #fff) 0%, var(--note-bg) 100%);
  border: 3px solid rgba(0,0,0,.25); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 rgba(0,0,0,.18),
              0 10px 16px rgba(70,48,30,.2);
  transition: transform .1s ease;
}
/* Dự phòng cho trình duyệt chưa hỗ trợ color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .note { background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)), var(--note-bg); }
}
.note:hover { transform: translateY(-3px); }
.note:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 1px 0 rgba(0,0,0,.18); }
.note::after {
  content: ''; position: absolute; inset: 4px; border-radius: 10px;
  border: 1px dashed rgba(0,0,0,.2); pointer-events: none;
}
.note-sim { font-size: .52rem; font-weight: 900; letter-spacing: .6px; opacity: .72; }
.note-val { font-size: 1.3rem; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.45); }

.tray-wrap, .jig-tray-wrap { width: 100%; max-width: 700px; }
.tray-cap { font-weight: 900; font-size: .92rem; margin-bottom: 8px; text-align: center; color: var(--wood-dark); }
.tray, .jig-tray { border-style: dashed; padding: 14px; }
.wallet { width: 100%; max-width: 700px; padding: 14px; display: grid; gap: 12px; }
.wallet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 900; }
.wallet-total, .budget-sum {
  font-size: 1.4rem; font-weight: 900; padding: 4px 16px; border-radius: 999px;
  background: #ece2d2; border: 3px solid rgba(122,90,63,.35); color: var(--wood-dark);
  box-shadow: inset 0 2px 3px rgba(122,90,63,.2);
}
.wallet-total.exact, .budget-sum.exact {
  background: var(--good-bg); color: var(--good); border-color: var(--good-br);
}
.wallet-total.over, .budget-sum.over {
  background: var(--bad-bg); color: var(--bad); border-color: var(--bad-br);
}
.bill {
  display: flex; gap: 12px; align-items: baseline; font-size: 1.18rem; font-weight: 700;
  background: rgba(255,253,243,.92); border: 3px solid var(--wood);
  border-radius: 999px; padding: 9px 22px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,90,63,.22);
}
.bill strong { font-size: 1.5rem; font-weight: 900; color: var(--wood-dark); }
.paid-row { display: flex; gap: 12px; align-items: center; font-weight: 800; }
.item-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.item-card {
  font: inherit; display: grid; justify-items: center; gap: 3px;
  min-width: 118px; padding: 12px 14px; border-width: 3px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
}
.item-row.pickable .item-card { cursor: pointer; transition: transform .1s ease; }
.item-row.pickable .item-card:hover { transform: translateY(-3px); }
.item-card.picked {
  border-color: var(--good); background: linear-gradient(180deg, #f1fdf4, var(--good-bg));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 var(--good);
}
.item-card.picked::before { content: '✔'; color: var(--good); font-weight: 900; font-size: 1rem; }
.item-emoji { font-size: 2.2rem; filter: drop-shadow(0 2px 3px rgba(70,48,30,.2)); }
.item-name { font-weight: 800; font-size: .94rem; }
.item-price { font-weight: 900; color: var(--blue-d); font-size: 1.02rem; }

/* ======================= 18. GHÉP TRANH ======================= */
.jig-progress {
  font-weight: 900; color: var(--wood-dark);
  background: rgba(255,253,243,.9); border: 2px solid rgba(122,90,63,.4);
  border-radius: 999px; padding: 6px 18px;
}
.jig-board {
  position: relative; touch-action: none; overflow: hidden;
  background: linear-gradient(180deg, #fffdf3, #f4ead8);
  border: 5px solid var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), inset 0 6px 14px rgba(122,90,63,.2),
              0 8px 0 rgba(122,90,63,.26), 0 18px 32px rgba(70,48,30,.22);
}
.jig-ghost { position: absolute; inset: 0; opacity: .15; background-repeat: no-repeat; }
.jig-grid { position: absolute; inset: 0; display: flex; flex-wrap: wrap; }
.jig-cell { box-sizing: border-box; border: 1px dashed rgba(122,90,63,.3); }
.jig-placed { position: absolute; inset: 0; }
.jig-piece {
  background-repeat: no-repeat; border-radius: 6px; cursor: grab;
  box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.35);
  touch-action: none;
}
.jig-piece.fixed { position: absolute; cursor: default; box-shadow: none; border-radius: 0; }
.jig-piece.lifted { opacity: .22; }
.jig-piece.dragging-ghost {
  position: fixed; z-index: 999; pointer-events: none;
  box-shadow: 0 14px 30px rgba(0,0,0,.42); transform: scale(1.06);
}
.jig-tray { min-height: 96px; display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; }
.jig-slot { position: relative; }
.btn.rot {
  position: absolute; right: -9px; top: -9px;
  min-height: 34px; min-width: 34px; padding: 2px 6px; font-size: .95rem;
  border-radius: 50%; border-width: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 var(--wood-light);
}
.jig-sample { max-width: 100%; border-radius: var(--radius-sm); display: block; border: 3px solid var(--wood); }

/* ======================= 19. TRÍ NHỚ ======================= */
.mem-info {
  font-weight: 900; color: var(--wood-dark);
  background: rgba(255,253,243,.9); border: 2px solid rgba(122,90,63,.4);
  border-radius: 999px; padding: 6px 18px;
}
.mem-grid {
  display: grid; gap: 12px;
  /* minmax(0,1fr) chứ không phải 1fr: với 1fr, mỗi thẻ không co nhỏ hơn
     min-height của nó nên bộ 20 thẻ sẽ tràn ra ngoài khung hẹp. */
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  width: 100%; max-width: 580px;
}
.mem-card {
  font: inherit; cursor: pointer; aspect-ratio: 1; padding: 0; border: none;
  background: transparent; perspective: 800px; min-height: 70px;
  /* Bắt buộc: ô lưới mặc định có min-width:auto, mà aspect-ratio kèm
     min-height khiến bề rộng tối thiểu bị đẩy lên 70px -> tràn lưới 5 cột
     trên màn hẹp. Cho phép thẻ co lại thay vì tràn. */
  min-width: 0;
}
.mem-card:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; border-radius: 18px; }
.mem-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.3,.8,.3,1.1);
}
.mem-card.open .mem-inner { transform: rotateY(180deg); }
.mem-front, .mem-back {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 18px; backface-visibility: hidden;
  border: 4px solid var(--wood);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 5px 0 rgba(122,90,63,.3),
              0 10px 18px rgba(70,48,30,.2);
}
/* Mặt sau có hoa văn chấm tròn, trông như thẻ chơi thật */
.mem-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0 3px, rgba(255,255,255,0) 4px) 0 0/16px 16px,
    linear-gradient(145deg, #7bb8ff 0%, var(--blue) 50%, var(--blue-d) 100%);
  color: #fff; font-size: 1.9rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.mem-front { background: linear-gradient(180deg, #fff, var(--paper-2)); transform: rotateY(180deg); }
.mem-emoji { font-size: 2.5rem; filter: drop-shadow(0 2px 3px rgba(70,48,30,.2)); }
.mem-label { font-weight: 900; font-size: .95rem; text-align: center; padding: 5px; color: var(--wood-dark); }
.mem-card.matched .mem-front {
  border-color: var(--good); background: linear-gradient(180deg, #f1fdf4, var(--good-bg));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 5px 0 var(--good);
}
.mem-card.matched { animation: pop .45s cubic-bezier(.2,.9,.3,1.5); }
body.reduce-motion .mem-inner { transition: none; }

.seq-screen {
  display: grid; justify-items: center; gap: 6px; min-height: 160px;
  width: 100%; max-width: 440px; align-content: center; padding: 14px;
  background: linear-gradient(180deg, #fffdf3, #f3e9d6);
}
.seq-screen.playing { border-color: var(--blue-d); box-shadow: var(--panel-shadow), 0 0 0 6px rgba(61,147,245,.18); }
.seq-big { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 5px 8px rgba(70,48,30,.24)); animation: pop .3s; }
.seq-big-sm { font-size: 2.1rem; line-height: 1; }
.seq-cap { font-weight: 900; color: var(--wood-dark); }
.seq-answer { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.seq-cell {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; border-radius: var(--radius-sm);
  background: rgba(255,253,243,.9); border: 3px dashed var(--wood);
  box-shadow: inset 0 2px 5px rgba(122,90,63,.16);
}
.seq-cell.filled {
  border-style: solid; border-color: var(--blue-d);
  background: linear-gradient(180deg, #fff, #eaf4ff);
}
.seq-palette { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; }
.seq-palette.disabled { opacity: .4; pointer-events: none; }
.btn.seq-btn { flex-direction: column; gap: 2px; min-height: 92px; min-width: 92px; padding: 10px; }

/* ======================= 20. GIAO THÔNG ======================= */
.scene { width: 100%; max-width: 660px; display: grid; gap: 10px; }
.street {
  width: 100%; height: auto; display: block;
  border: 4px solid var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.4), 0 6px 0 rgba(122,90,63,.26),
              0 16px 28px rgba(70,48,30,.2);
}
.scene-text { font-weight: 700; padding: 12px 16px; border-width: 2px; }

/* ======================= 21. TỔNG KẾT ======================= */
.summary {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 26px 20px;
  background: linear-gradient(180deg, #fffdf3 0%, #fff4df 100%);
}
.summary h2 { font-size: 1.5rem; }
.sum-emoji { font-size: 3.8rem; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 6px 9px rgba(70,48,30,.28)); }
.stars { font-size: 2.4rem; letter-spacing: 6px; filter: drop-shadow(0 3px 4px rgba(217,146,0,.4)); }
.praise {
  font-weight: 800; color: #14512a; max-width: 540px;
  background: var(--good-bg); border: 3px solid var(--good-br);
  border-radius: var(--radius); padding: 11px 18px;
}
.sum-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 11px; width: 100%; margin-top: 10px;
}
.stat {
  background: rgba(255,255,255,.8); border: 3px solid rgba(122,90,63,.3);
  border-radius: var(--radius-sm); padding: 12px 8px; display: grid; gap: 3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9);
}
.stat-val { font-size: 1.7rem; font-weight: 900; color: var(--wood-dark); }
.stat-lab { font-size: .76rem; color: var(--ink-soft); font-weight: 700; }

/* ======================= 22. KHU PHỤ HUYNH ======================= */
.p-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.p-picker { display: flex; gap: 9px; flex-wrap: wrap; }
.psec { padding: 18px; margin-bottom: 16px; }
.psec h3 {
  font-size: 1.15rem; font-weight: 900; color: var(--wood-dark);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 3px solid rgba(122,90,63,.22);
}
.trow {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 13px 0; border-top: 2px solid rgba(122,90,63,.14); flex-wrap: wrap;
}
.trow:first-of-type { border-top: none; }
.trow > span { display: grid; gap: 3px; }
.trow strong { font-size: 1rem; }
.trow input[type=checkbox] {
  width: 30px; height: 30px; accent-color: var(--blue); flex: none; cursor: pointer;
}
.bars { display: flex; gap: 9px; align-items: flex-end; height: 140px; padding: 10px 0; }
.bar-col { flex: 1; display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; height: 100%; gap: 3px; }
.bar {
  width: 76%; min-height: 4px; align-self: end; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #8dc3ff 0%, var(--blue) 60%, var(--blue-d) 100%);
  border: 2px solid var(--blue-d); border-bottom: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}
.bar-val { font-size: .74rem; color: var(--wood-dark); font-weight: 900; }
.bar-lab { font-size: .72rem; color: var(--ink-soft); font-weight: 700; }
.subj { margin-bottom: 16px; }
.subj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.subj-head strong { font-size: 1.05rem; color: var(--wood-dark); }
.review-state {
  display: grid; gap: 4px; border-radius: var(--radius-sm); padding: 12px 14px;
  margin-bottom: 10px; border: 3px solid;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7);
}
.review-state.ok   { background: var(--good-bg); border-color: var(--good-br); }
.review-state.warn { background: var(--hint-bg); border-color: var(--hint-br); }
.priv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 13px; }
.priv-col {
  background: rgba(255,247,226,.75); border: 2px solid rgba(122,90,63,.26);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.priv-col strong { color: var(--wood-dark); }
.priv-col ul { font-size: .88rem; font-weight: 600; }
.about { display: grid; gap: 4px; }
.about-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  border-bottom: 2px dotted rgba(122,90,63,.22); font-size: .96rem; font-weight: 600;
}
.about-brand {
  margin-top: 14px; font-weight: 900; text-align: center; color: #fff; font-size: 1rem;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 2px solid var(--wood-dark); border-radius: 999px; padding: 9px 20px;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.26), 0 4px 0 var(--wood-dark);
}
.about-copy { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: 6px; font-weight: 600; }

/* ======================= 23. MODAL / TOAST ======================= */
.overlay {
  position: fixed; inset: 0; z-index: 500; padding: 20px;
  background: rgba(59,47,38,.6);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; align-content: center; gap: 10px;
  animation: fadeOnly .2s ease-out;
}
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
.modal {
  padding: 24px; max-width: 480px; width: 100%;
  display: grid; gap: 12px; max-height: 84vh; overflow: auto;
  border-width: 4px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 8px 0 rgba(91,67,48,.4),
              0 26px 60px rgba(0,0,0,.42);
  animation: popIn .3s cubic-bezier(.2,.9,.3,1.3);
}
.modal h2 { font-size: 1.3rem; color: var(--wood-dark); font-weight: 900; }
.modal-actions { display: flex; gap: 11px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.gate-q {
  font-size: 2.3rem; font-weight: 900; text-align: center; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood); border-radius: var(--radius-sm); padding: 10px;
  box-shadow: inset 0 3px 7px rgba(122,90,63,.16);
}
.gate-msg { color: var(--bad); font-weight: 900; min-height: 22px; }
.overlay .brandbar { margin: 0; background: rgba(255,253,243,.2); color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.3); }
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  color: #fff; padding: 14px 26px; border-radius: 999px;
  border: 3px solid var(--wood-dark);
  font-weight: 900; z-index: 600; max-width: 90vw; text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.26), 0 6px 0 var(--wood-dark), 0 14px 30px rgba(0,0,0,.34);
  animation: toastIn .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translateX(-50%); } }
.toast.out { opacity: 0; transition: opacity .3s; }

/* ======================= 24. ĐIỆN THOẠI ======================= */
@media (max-width: 600px) {
  .splash-secondary-actions { width: 100%; flex-direction: column; gap: 10px; }
  .splash-secondary-actions .btn { width: 100%; min-width: 0; }
  html, body { font-size: 16px; }
  #app { padding: 10px 14px 28px; }
  .app-header { padding: 9px 12px; border-radius: 18px; }
  .app-header .title { font-size: 1.12rem; }
  .prompt { font-size: 1.1rem; padding: 14px 16px 14px 20px; }
  .equation { font-size: 1.75rem; }
  .numpad-keys { grid-template-columns: repeat(3, 72px); }
  .numpad-display { min-width: 160px; font-size: 1.9rem; }
  .splash-logo { font-size: 4.2rem; }
  .splash-title { font-size: 1.75rem; }
  .zone-grid { grid-template-columns: 1fr; }
  .zone-card { min-height: 0; padding: 16px 14px 14px; }
  .zone-emoji { width: 60px; height: 60px; font-size: 2.1rem; }
  /* Lưới thẻ trí nhớ: trên màn hẹp bỏ số cột cố định, tự xếp vừa bề ngang
     để bộ 10 cặp (20 thẻ) không bị tràn ra ngoài màn hình. */
  .mem-grid {
    max-width: 100%; gap: 9px;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
  .mem-card { min-height: 0; }
  .choices { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .choices.numbers { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .choices.numbers .choice { font-size: 1.45rem; min-height: 68px; }
  .groups { gap: 8px; }
  .group-box { max-width: 132px; }
  .note { min-width: 108px; min-height: 68px; }
  .bars { height: 120px; }
  .skill-row { grid-template-columns: 1fr auto; }
  .skill-row .pbar { grid-column: 1 / -1; }
  .readout { font-size: 2rem; }
  #bg-decor .sun { width: 200px; height: 200px; }
}

/* Tablet nằm ngang, màn thấp */
@media (max-height: 540px) and (orientation: landscape) {
  .clockface { width: min(230px, 36vh); }
  .splash { padding: 8px; gap: 9px; }
  .splash-logo { font-size: 2.8rem; }
  .splash-title { font-size: 1.5rem; }
  .btn.huge { min-height: 60px; font-size: 1.1rem; }
}

@media print { .btn, .brandbar, #bg-decor { display: none; } }

/* Lệnh terminal hiển thị trong màn phụ huynh */
code.cmd {
  display: inline-block; margin: 6px 0;
  font-family: Consolas, 'Courier New', monospace; font-size: .88rem; font-weight: 700;
  background: var(--wood-dark); color: #ffe9b8;
  padding: 7px 14px; border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
  user-select: all;
}

/* ======================= 25. ĐO LƯỜNG (MG-13) ======================= */

/* --- So sánh dài/ngắn: thanh tỉ lệ theo số đo thật --- */
.cmp-list { display: grid; gap: 14px; width: 100%; max-width: 620px; }
.cmp-item {
  font: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 4px solid var(--wood); border-radius: 20px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 0 5px 0 var(--wood-light),
              0 12px 20px rgba(70,48,30,.18);
  transition: transform .1s ease, border-color .15s ease;
}
.cmp-item:hover { transform: translateY(-3px); border-color: var(--blue-d); }
.cmp-item:active { transform: translateY(3px); }
.cmp-item:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.cmp-emoji { font-size: 2.3rem; grid-row: span 2; filter: drop-shadow(0 2px 3px rgba(70,48,30,.2)); }
.cmp-name { font-weight: 900; font-size: 1.05rem; }
.cmp-bar {
  height: 20px; border-radius: 999px; min-width: 14px;
  background: linear-gradient(180deg, #8dc3ff 0%, var(--blue) 60%, var(--blue-d) 100%);
  border: 2px solid var(--blue-d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}
.cmp-item.pick-good { border-color: var(--good); background: linear-gradient(180deg, #f2fdf5, var(--good-bg)); }
.cmp-item.pick-bad  { border-color: var(--bad);  background: linear-gradient(180deg, #fff6f4, var(--bad-bg)); animation: shake .34s; }

/* --- Thước kẻ --- */
.ruler { width: 100%; max-width: 640px; height: auto; touch-action: none; }
.ruler.live { cursor: pointer; }
.ruler-body { fill: #ffe9b8; stroke: var(--wood); stroke-width: 3; }
.ruler-bar  { fill: var(--teal); stroke: var(--teal-d); stroke-width: 3; }
.ruler-tick { stroke: var(--wood-dark); stroke-width: 1.5; }
.ruler-tick.big { stroke-width: 2.5; }
.ruler-num { font-size: 13px; font-weight: 800; fill: var(--wood-dark); font-family: var(--font); }
.ruler-marker polygon, .ruler-marker rect { fill: var(--coral); stroke: var(--coral-d); stroke-width: 2.5; }
.ruler-marker-num { font-size: 16px; font-weight: 900; fill: var(--coral-d); font-family: var(--font); }

/* --- Cân thăng bằng --- */
.balance { width: 100%; max-width: 420px; height: auto; }
.bal-base, .bal-stand { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 2.5; }
.bal-beam { fill: var(--wood-light); stroke: var(--wood-dark); stroke-width: 2.5; }
.bal-pan  { fill: #d9c4a3; stroke: var(--wood-dark); stroke-width: 2.5; }
.bal-rope { stroke: var(--wood-dark); stroke-width: 2.5; }
.bal-pivot { fill: var(--amber); stroke: var(--wood-dark); stroke-width: 2.5; }

/* --- Bản đồ đường đi --- */
.map-holder {
  width: 100%; max-width: 560px;
  background: linear-gradient(180deg, #eaf8e6, #d6f0cf);
  border: 4px solid var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 6px 0 rgba(122,90,63,.24),
              0 16px 28px rgba(70,48,30,.2);
  padding: 8px;
}
.routemap { width: 100%; height: auto; display: block; overflow: visible; }
.road { cursor: pointer; }
.road-line { stroke: #b9a888; stroke-width: 3.4; stroke-linecap: round; }
.road-hit  { stroke: transparent; stroke-width: 11; stroke-linecap: round; }
.road.sel .road-line { stroke: var(--coral); stroke-width: 5; }
.road:hover .road-line { stroke: var(--blue); }
.road:focus-visible { outline: none; }
.road:focus-visible .road-line { stroke: var(--amber-d); stroke-width: 5.5; }
.road-tags { pointer-events: none; }
.road-tagbg { fill: #fffdf3; stroke: rgba(122,90,63,.5); stroke-width: .7; }
.road-taggroup.sel .road-tagbg { fill: #ffe3de; stroke: var(--coral-d); stroke-width: 1; }
.road-tag { font-size: 5px; font-weight: 800; fill: var(--wood-dark); font-family: var(--font); }
.place-dot { fill: #fffdf3; stroke: var(--wood); stroke-width: 2; }
.place-namebg { fill: rgba(255,253,243,.92); stroke: rgba(122,90,63,.35); stroke-width: .5; }
.place-name { font-size: 4.4px; font-weight: 800; fill: var(--wood-dark); font-family: var(--font); }
/* Điểm xuất phát và đích phải nhìn là thấy ngay */
.place.start .place-dot { stroke: var(--green-d); stroke-width: 3; fill: #e9fbee; }
.place.goal  .place-dot { stroke: var(--coral-d); stroke-width: 3; fill: #fff0ee; }

/* --- Đổi đơn vị --- */
.convert-hint {
  font-weight: 800; color: var(--wood-dark);
  background: var(--hint-bg); border: 3px solid var(--hint-br);
  border-radius: 999px; padding: 7px 18px;
}
.unit-short {
  font-size: 1.5rem; font-weight: 900; color: var(--blue-d);
  background: #eaf4ff; border: 2px solid #a9cdfb; border-radius: 10px;
  padding: 2px 12px; margin-right: 4px;
}

@media (max-width: 600px) {
  .ruler-num { font-size: 15px; }
  .cmp-item { padding: 12px; gap: 3px 10px; }
  .road-tag { font-size: 5.6px; }
  .place-name { font-size: 5px; }
}

/* --- Cân đồng hồ và quả cân (MG-13, phần khối lượng) --- */
.dialscale { width: min(300px, 78vw); height: auto; filter: drop-shadow(0 8px 14px rgba(70,48,30,.26)); }
.dial-face { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 3; }
.dial-inner { fill: #fffdf3; stroke: rgba(122,90,63,.35); stroke-width: 2; }
.dial-tick { stroke: var(--wood-dark); stroke-width: 2.5; stroke-linecap: round; }
.dial-num { font-size: 13px; font-weight: 800; fill: var(--wood-dark); font-family: var(--font); }
.dial-needle { stroke: #c0392b; stroke-width: 5; stroke-linecap: round; }
.dial-pivot { fill: var(--amber); stroke: var(--wood-dark); stroke-width: 2.5; }
.dial-unit { font-size: 15px; font-weight: 900; fill: var(--wood-dark); font-family: var(--font); }
.bal-label { font-size: 15px; font-weight: 900; fill: var(--wood-dark); font-family: var(--font); }

.balance-holder { width: 100%; max-width: 440px; display: flex; justify-content: center; }
.weight-tray, .weight-chosen {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.weight-chosen { min-height: 44px; }
/* Quả cân: khối trụ có quai, nhìn là nhận ra ngay */
.weight {
  position: relative; font: inherit; cursor: pointer;
  display: grid; justify-items: center; gap: 2px;
  min-width: 74px; min-height: 68px; padding: 14px 10px 8px;
  background: linear-gradient(180deg, #b9c2cc 0%, #8d98a5 55%, #6d7883 100%);
  color: #fff; border: 3px solid #5a646e; border-radius: 10px 10px 14px 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 #4a535c, 0 10px 16px rgba(70,48,30,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  transition: transform .1s ease;
}
.weight:hover { transform: translateY(-3px); }
.weight:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #4a535c; }
.weight:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
/* Quai xách của quả cân */
.weight-top {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 16px; border: 4px solid #5a646e; border-bottom: none;
  border-radius: 16px 16px 0 0; background: transparent;
}
.weight-val { font-size: 1.05rem; font-weight: 900; }
.weight.small { min-width: 58px; min-height: 54px; padding: 11px 8px 6px; }
.weight.small .weight-val { font-size: .9rem; }
.weight.small .weight-top { width: 24px; height: 13px; top: -7px; }

/* Hướng dẫn khắc phục khi máy chưa có giọng tiếng Việt */
.fixlist { display: grid; gap: 12px; padding: 14px 0 4px; }
.fixstep {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  background: rgba(255,247,226,.7); border: 2px solid rgba(122,90,63,.26);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.fixstep > div { display: grid; gap: 4px; min-width: 0; }
.fixnum {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #6fb2ff, var(--blue-d));
  border: 2px solid var(--blue-d); border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.fixstep code.cmd { word-break: break-all; white-space: normal; }

/* Nút loa khi chưa có giọng: mờ đi để thấy ngay là đang tắt */
.btn.icon.muted { background: #ece2d2; opacity: .85; }

/* ======================= 26. LÀNG CHỮ VIỆT (MG-02) ======================= */
.wordpic {
  display: grid; justify-items: center; gap: 4px;
  padding: 14px 26px;
  background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}
.wordpic-emo { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(70,48,30,.22)); }
.wordpic-cap { font-weight: 800; color: var(--ink-soft); font-size: .95rem; }

/* Chữ cái: ô vuông to, rõ nét */
.choices.letters { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.choices.letters .choice { font-size: 1.9rem; letter-spacing: 1px; }
.choices.pics { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.pic-choice { font-size: 3rem; line-height: 1; }

/* Ghép âm đầu + vần */
.blend-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: 2rem; font-weight: 900; color: var(--wood-dark);
}
.blend-slot, .blend-part {
  min-width: 64px; text-align: center; padding: 6px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
}
.blend-slot { border-style: dashed; border-color: var(--blue-d); color: var(--blue-d); }
.blend-part.result { background: linear-gradient(180deg, #eaf4ff, #d3e8ff); border-color: var(--blue-d); }
.blend-plus, .blend-eq { font-size: 1.6rem; color: var(--ink-soft); }

/* Xếp chữ thành từ */
.spell-answer { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.spell-cell {
  font: inherit; cursor: pointer;
  width: 62px; height: 68px; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 900; color: var(--wood-dark);
  background: rgba(255,253,243,.9); border: 3px dashed var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 5px rgba(122,90,63,.16);
}
.spell-cell.filled {
  border-style: solid; border-color: var(--blue-d);
  background: linear-gradient(180deg, #fff, #eaf4ff);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 var(--blue-d);
}
.spell-tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.spell-tile {
  font: inherit; cursor: pointer;
  min-width: 62px; min-height: 66px;
  font-size: 1.9rem; font-weight: 900; color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--wood-light);
  transition: transform .1s ease;
}
.spell-tile:hover:not(:disabled) { transform: translateY(-3px); }
.spell-tile:active:not(:disabled) { transform: translateY(3px); }
.spell-tile:focus-visible, .spell-cell:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.spell-tile.used, .spell-tile:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }

/* Điền chữ còn thiếu */
.masked-word {
  font-size: 2.6rem; font-weight: 900; letter-spacing: 6px; color: var(--wood-dark);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 4px solid var(--wood); border-radius: var(--radius-sm);
  padding: 8px 28px; box-shadow: inset 0 3px 7px rgba(122,90,63,.16);
}

/* Câu đọc hiểu */
.sentence {
  font-size: 1.35rem; font-weight: 700; line-height: 1.6; text-align: center;
  max-width: 620px; padding: 18px 22px;
  background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}

@media (max-width: 600px) {
  .choices.letters { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
  .choices.letters .choice { font-size: 1.6rem; }
  .spell-cell { width: 52px; height: 58px; font-size: 1.6rem; }
  .spell-tile { min-width: 52px; min-height: 56px; font-size: 1.6rem; }
  .masked-word { font-size: 2rem; letter-spacing: 4px; padding: 7px 18px; }
  .sentence { font-size: 1.1rem; padding: 14px; }
  .blend-row { font-size: 1.5rem; gap: 7px; }
  .blend-slot, .blend-part { min-width: 52px; padding: 5px 11px; }
}

/* ======================= 27. THÀNH PHỐ TƯ DUY (MG-03) ======================= */
.maze {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
  width: min(430px, 86vw); aspect-ratio: 1;
  background: linear-gradient(180deg, #f3fbef, #e2f3dc);
  border: 5px solid var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 7px 0 rgba(122,90,63,.26),
              0 16px 28px rgba(70,48,30,.2);
  overflow: hidden;
}
.maze.bump { animation: shake .24s; }
/* Tường vẽ bằng viền ô, không cần ảnh */
.mcell { box-sizing: border-box; border: 0 solid var(--wood); }
.mcell.wn { border-top-width: 3px; }
.mcell.we { border-right-width: 3px; }
.mcell.ws { border-bottom-width: 3px; }
.mcell.ww { border-left-width: 3px; }
.mcell.goal { background: radial-gradient(circle, #ffe9a8 0%, rgba(255,233,168,0) 72%); }
.mgoal { font-size: 1.5rem; display: flex; width: 100%; height: 100%;
         align-items: center; justify-content: center; }
.mhero {
  position: absolute; width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; pointer-events: none;
  transition: left .16s ease, top .16s ease;
  filter: drop-shadow(0 2px 3px rgba(70,48,30,.3));
}
body.reduce-motion .mhero { transition: none; }
.maze-status {
  font-weight: 800; color: var(--wood-dark);
  background: rgba(255,253,243,.9); border: 2px solid rgba(122,90,63,.4);
  border-radius: 999px; padding: 5px 16px;
}
/* Bàn phím hướng hình chữ thập */
.dpad { display: grid; grid-template-columns: repeat(3, min(76px, 21vw)); gap: 8px; justify-content: center; }
.dpad-gap { display: block; }
.btn.dkey { min-height: 70px; font-size: 1.7rem; border-radius: 18px; }

/* Dãy quy luật */
.pattern-row {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;
  padding: 14px 16px; max-width: 640px;
  background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}
.pattern-item { font-size: 2.3rem; line-height: 1; }
.pattern-num {
  font-size: 1.8rem; font-weight: 900; color: var(--wood-dark);
  min-width: 56px; text-align: center; padding: 4px 10px; border-radius: 12px;
  background: linear-gradient(180deg, #fff, var(--paper-2)); border: 2px solid rgba(122,90,63,.4);
}
.pattern-item.blank, .pattern-num.blank {
  color: var(--blue-d); border: 3px dashed var(--blue-d); border-radius: 12px;
  padding: 2px 14px; background: #eaf4ff;
}
.count-groups { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.count-group {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center;
  max-width: 120px; min-width: 64px; min-height: 64px; padding: 9px;
  background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 var(--wood-light);
}
.count-group.blank {
  border-style: dashed; border-color: var(--blue-d); color: var(--blue-d);
  font-size: 2rem; font-weight: 900; background: #eaf4ff;
}

@media (max-width: 600px) {
  .maze { width: min(330px, 92vw); }
  .dpad { grid-template-columns: repeat(3, 64px); }
  .btn.dkey { min-height: 60px; font-size: 1.4rem; }
  .pattern-item { font-size: 1.9rem; }
}

/* ======================= 28. THIÊN NHIÊN · TIẾNG ANH · PHÂN LOẠI ======================= */
/* Khung hiển thị tiếng kêu con vật */
.soundbox {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: linear-gradient(180deg, #eafaf1, #d6f3e3);
  border: 3px solid var(--green-d); border-radius: var(--radius);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.8), 0 5px 0 rgba(42,150,72,.3);
}
.soundbox-ico { font-size: 2.3rem; }
.soundbox-text { font-size: 1.8rem; font-weight: 900; color: #14512a; letter-spacing: 1px; }

/* Từ tiếng Anh */
.choices.enwords { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choices.enwords .choice { font-size: 1.25rem; letter-spacing: .5px; }
.enword-big {
  font-size: 2.6rem; font-weight: 900; letter-spacing: 2px; color: var(--blue-d);
  background: linear-gradient(180deg, #fff, #eaf4ff);
  border: 4px solid var(--blue-d); border-radius: var(--radius);
  padding: 12px 34px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 5px 0 var(--blue-d);
}
.enword-big.hidden-word { font-size: 3rem; letter-spacing: 0; }

/* Phân loại: thùng và đồ vật */
.sort-bins { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }
.sort-bin {
  font: inherit; cursor: pointer; text-align: left;
  flex: 1 1 190px; min-width: 170px; max-width: 280px; min-height: 150px;
  display: grid; gap: 8px; align-content: start; padding: 12px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 4px dashed var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 rgba(122,90,63,.22);
  transition: border-color .15s ease, transform .1s ease;
}
.sort-bin.ready { border-style: solid; border-color: var(--blue-d); background: linear-gradient(180deg, #f3f9ff, #e3f0ff); }
.sort-bin.ready:hover { transform: translateY(-3px); }
.sort-bin:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.bin-head { display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--wood-dark); }
.bin-emoji { font-size: 1.7rem; }
.bin-name { font-size: .98rem; }
.bin-items { display: flex; gap: 7px; flex-wrap: wrap; }

.sort-tray-wrap { width: 100%; max-width: 700px; }
.sort-tray {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;
  min-height: 92px; padding: 12px;
  background: var(--paper); border: 2px dashed var(--line); border-radius: var(--radius);
  box-shadow: inset 0 2px 5px rgba(122,90,63,.1);
}
.sort-item {
  font: inherit; cursor: pointer;
  display: grid; justify-items: center; gap: 2px;
  min-width: 86px; padding: 9px 11px;
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
  transition: transform .1s ease;
}
.sort-item:hover { transform: translateY(-3px); }
.sort-item:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
/* Đồ vật đang được chọn: viền sáng rõ để bé biết mình đang cầm gì */
.sort-item.sel {
  border-color: var(--blue-d); background: linear-gradient(180deg, #eaf4ff, #cfe4ff);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--blue-d), 0 0 0 5px rgba(61,147,245,.25);
  transform: translateY(-4px);
}
.bin-items .sort-item { min-width: 64px; padding: 6px 8px; }
.sort-emoji { font-size: 1.8rem; line-height: 1; }
.bin-items .sort-emoji { font-size: 1.4rem; }
.sort-label { font-size: .78rem; font-weight: 700; text-align: center; }
.bin-items .sort-label { font-size: .68rem; }

@media (max-width: 600px) {
  .sort-bin { min-width: 140px; flex-basis: 140px; min-height: 128px; padding: 9px; }
  .sort-item { min-width: 74px; }
  .enword-big { font-size: 2rem; padding: 10px 22px; }
  .soundbox-text { font-size: 1.4rem; }
}

/* =====================================================================
 * 29. AURORA UI — HỆ THỐNG HÌNH ẢNH THƯƠNG MẠI 2026
 * Lớp này chủ động thay art direction cũ nhưng giữ nguyên toàn bộ cấu trúc,
 * logic, kích thước chạm và các trạng thái hỗ trợ tiếp cận của game.
 * ===================================================================== */
:root {
  --sky-top: #0d3f86;
  --sky-mid: #49c8ff;
  --sky-bot: #ddf7ff;
  --paper: #ffffff;
  --paper-2: #f5f9ff;
  --wood: #c8d8ef;
  --wood-dark: #17345f;
  --wood-light: #dce8f7;
  --ink: #152a49;
  --ink-soft: #61738e;
  --blue: #3478f6;
  --blue-d: #155ac8;
  --green: #38c48b;
  --green-d: #16855c;
  --amber: #ffc857;
  --amber-d: #dc921c;
  --coral: #ff7188;
  --coral-d: #d84961;
  --violet: #8a6ff5;
  --violet-d: #6045cc;
  --teal: #35c9c3;
  --teal-d: #168d89;
  --good: #16855c;
  --good-bg: #eafaf4;
  --good-br: #87ddbd;
  --bad: #d7445b;
  --bad-bg: #fff0f3;
  --bad-br: #ffb0bd;
  --hint: #9b6810;
  --hint-bg: #fff8df;
  --hint-br: #f4d27b;
  --line: #d8e4f3;
  --radius: 24px;
  --radius-sm: 15px;
  --panel-shadow: 0 18px 46px rgba(17, 55, 104, .13), 0 3px 8px rgba(17, 55, 104, .07);
  --font: 'Nunito Game', Nunito, 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
}

html, body {
  color: var(--ink);
  background: #bcecff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.58;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 43, 98, .06), rgba(216, 248, 255, .1)),
    url('../assets/art/learning-world-bg.png') center center / cover no-repeat;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(235,249,255,.16) 58%, rgba(237,251,255,.42) 100%);
}

#bg-decor { display: none; }

#app {
  max-width: 1120px;
  padding: 20px 24px 48px;
}

.screen { width: 100%; }
.fade-in { animation: auroraEnter .38s cubic-bezier(.2,.82,.25,1); }
@keyframes auroraEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

h1, h2, h3 {
  font-weight: 850;
  line-height: 1.26;
  letter-spacing: -.012em;
  text-wrap: balance;
}
p, li { line-height: 1.62; }
.tiny {
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.52;
  letter-spacing: .006em;
}

/* --- Surface language: crisp, light and consistent --- */
.panel, .psec, .prompt, .bubble, .wallet, .tray, .jig-tray, .pick-field, .show-field,
.summary, .skill-row, .daypart-card, .scene-text, .review-box, .seq-screen,
.addsub-visual, .break-banner, .resume-box, .modal, .item-card, .group-box,
.wordpic, .sentence, .pattern-row, .count-group {
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow), inset 0 0 0 1px rgba(185, 207, 234, .55);
  backdrop-filter: blur(14px);
}

/* --- Buttons --- */
.btn {
  min-height: var(--tap);
  padding: 13px 22px;
  color: var(--ink);
  border: 1px solid #c7d7ea;
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 18px rgba(24, 67, 121, .12), inset 0 1px 0 #fff;
  text-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: .002em;
}
.btn:hover { filter: none; transform: translateY(-2px); border-color: #8cb3e8; box-shadow: 0 11px 24px rgba(24,67,121,.16); }
.btn:active { transform: translateY(1px) scale(.99); box-shadow: 0 3px 9px rgba(24,67,121,.14); }
.btn:focus-visible, .choice:focus-visible, .zone-card:focus-visible { outline: 4px solid rgba(255,200,87,.95); outline-offset: 3px; }
.btn.primary, .btn.key.go {
  color: #fff;
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(135deg, #448eff 0%, #155ac8 100%);
  box-shadow: 0 10px 24px rgba(21,90,200,.3), inset 0 1px 0 rgba(255,255,255,.36);
  text-shadow: none;
}
.btn.primary:hover, .btn.key.go:hover { box-shadow: 0 14px 30px rgba(21,90,200,.38); }
.btn.primary:active { box-shadow: 0 5px 13px rgba(21,90,200,.28); }
.btn.danger {
  color: #fff; border-color: rgba(255,255,255,.2);
  background: linear-gradient(135deg, #ff7188, #cf3854);
  box-shadow: 0 10px 22px rgba(207,56,84,.26);
}
.btn.ghost { background: rgba(255,255,255,.82); box-shadow: 0 6px 16px rgba(24,67,121,.1); }
.btn.hint {
  color: #64440c; border-color: #f3c862;
  background: linear-gradient(135deg, #fff4bc, #ffc857);
  box-shadow: 0 8px 18px rgba(190,127,18,.2);
}
.btn.small { border-width: 1px; box-shadow: 0 5px 13px rgba(24,67,121,.1); }
.btn.chip { border-width: 1px; background: rgba(255,255,255,.9); }
.btn.chip.sel { border-color: transparent; background: linear-gradient(135deg, #448eff, #155ac8); box-shadow: 0 7px 18px rgba(21,90,200,.25); }

/* --- App chrome --- */
.app-header {
  position: sticky;
  top: 12px;
  z-index: 30;
  padding: 11px 14px;
  margin-bottom: 20px;
  color: var(--ink);
  background: rgba(248, 252, 255, .86);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: 0 15px 36px rgba(12,52,104,.16), inset 0 0 0 1px rgba(190,210,235,.52);
  backdrop-filter: blur(20px) saturate(1.18);
}
.app-header .title { color: var(--ink); font-size: 1.24rem; font-weight: 850; line-height: 1.25; text-shadow: none; }
.app-header .btn { border-color: #c7d7ea; }
.kid-chip {
  padding: 5px 14px 5px 7px;
  background: #edf5ff;
  border: 1px solid #c8daf0;
  box-shadow: none;
}
.kid-ava { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #fff; }

.brandbar {
  position: fixed;
  left: 50%;
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 80;
  width: max-content;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: 3px 9px;
  color: rgba(19,51,93,.62);
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(12,52,104,.07);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .015em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: .78;
}

/* --- Splash / identity --- */
.splash { min-height: calc(100vh - 68px); align-content: center; gap: 16px; padding: 26px 12px 54px; }
.splash-logo {
  position: relative;
  width: 132px;
  height: 116px;
  object-fit: contain;
  border-radius: 28px;
  font-size: 0;
  filter: drop-shadow(0 18px 25px rgba(9,52,112,.28));
  animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat { 50% { transform: translateY(-8px); } }
.splash-logo-orbit {
  position: absolute; inset: 5px 1px 14px;
  border: 3px solid rgba(255,255,255,.38); border-radius: 50%; transform: rotate(-18deg);
}
.splash-logo-orbit::after {
  content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  right: 8px; top: 4px; background: var(--amber); box-shadow: 0 0 0 5px rgba(255,200,87,.2);
}
.splash-logo-book { position: absolute; inset: 10px 6px 0; display: block; }
.splash-logo-book svg { width: 100%; height: 100%; overflow: visible; }
.splash-logo-book path:first-child { fill: #fff; stroke: #155ac8; stroke-width: 5; stroke-linejoin: round; }
.splash-logo-book path:nth-child(2) { fill: none; stroke: #47c8ff; stroke-width: 4; stroke-linecap: round; }
.splash-logo-book .logo-star { fill: var(--amber); stroke: #fff; stroke-width: 3; }
.splash-title, .game-title, .summary h2 {
  color: #fff;
  text-shadow: 0 3px 0 rgba(13,56,116,.28), 0 10px 28px rgba(7,42,93,.28);
}
.splash-title { font-size: clamp(2.15rem, 5.3vw, 3.45rem); font-weight: 900; line-height: 1.18; letter-spacing: -.022em; }
.splash-sub {
  color: #21446f;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 9px 25px rgba(17,55,104,.12);
  backdrop-filter: blur(12px);
}
.splash-brand {
  position: fixed;
  left: 50%;
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 80;
  width: max-content;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: 3px 9px;
  color: rgba(19,51,93,.62);
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(12,52,104,.07);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .015em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;
  transform: translateX(-50%);
  opacity: .78;
}
.splash-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.splash-note { color: #21446f; }

.voice-help { display: grid; gap: 12px; }
.voice-help .fixstep { margin: 0; }
.btn.muted { opacity: .78; border-color: #d99a20; background: #fff6d8; }

/* Modal có footer riêng ở phía trên lớp phủ; tránh hai dòng chồng lên nhau. */
body:has(.overlay) #app .brandbar,
body:has(.overlay) #app .splash-brand { opacity: 0; }
.overlay > .brandbar { z-index: 610; color: rgba(255,255,255,.72); background: rgba(10,35,70,.42); border-color: rgba(255,255,255,.18); }

/* --- Profiles and map cards --- */
.profile-grid { gap: 18px; }
.profile-card, .ava-opt, .band-opt {
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.98);
  box-shadow: 0 15px 35px rgba(17,55,104,.13), inset 0 0 0 1px #d4e1f1;
}
.profile-card { min-height: 174px; border-radius: 24px; }
.profile-card:hover { border-color: #67a3f6; transform: translateY(-5px); box-shadow: 0 20px 40px rgba(17,55,104,.18), inset 0 0 0 1px #67a3f6; }
.profile-card.add { background: rgba(239,247,255,.8); border: 2px dashed #94b7df; }
.profile-ava, .ava-emo { filter: drop-shadow(0 7px 10px rgba(17,55,104,.16)); }
.text-input, .gate-input { border: 1px solid #b9cde6; border-radius: 14px; box-shadow: inset 0 2px 6px rgba(35,74,124,.08); }
.text-input:focus, .gate-input:focus { border-color: #3478f6; outline: 4px solid rgba(52,120,246,.16); }
.band-opt.sel, .ava-opt.sel { border-color: #3478f6; background: #edf5ff; box-shadow: 0 0 0 3px rgba(52,120,246,.16); }

.zone-group-title {
  font-size: 1.12rem; font-weight: 850; color: var(--ink);
  margin: 22px 0 10px; padding: 0 4px;
  letter-spacing: -.005em;
}
.zone-group-title:first-of-type { margin-top: 8px; }

.daily-missions {
  background: linear-gradient(135deg, rgba(255,248,223,.92), rgba(255,240,206,.88));
  border: 1px solid rgba(220,146,28,.3);
  box-shadow: 0 12px 28px rgba(220,146,28,.1), inset 0 0 0 1px rgba(255,200,87,.3);
}
.daily-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.streak-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  background: linear-gradient(135deg, #ff922b, #e8590c); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
}
.daily-done-label {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  background: linear-gradient(135deg, #51cf66, #2b8a3e); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.chip-done {
  opacity: .6; text-decoration: line-through;
  pointer-events: none;
}
.daily-missions .progress-bar { margin: 8px 0 4px; }

.zone-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.zone-card {
  min-height: 154px;
  padding: 20px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 25px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 38px rgba(14,51,100,.14), inset 0 0 0 1px rgba(194,211,233,.65);
}
.zone-card::before { inset: 0 auto 0 0; width: 6px; height: auto; box-shadow: none; }
.zone-card::after {
  content: '';
  position: absolute;
  width: 130px; height: 130px; right: -62px; top: -58px;
  border-radius: 50%; background: var(--card-color); opacity: .08;
}
.zone-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--card-color) 55%, white); box-shadow: 0 23px 45px rgba(14,51,100,.2), inset 0 0 0 1px rgba(255,255,255,.8); }
.zone-emoji {
  width: 76px; height: 76px; margin: 0;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 76%, white), color-mix(in srgb, var(--card-color) 86%, #17345f));
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 23px;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--card-color) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.zone-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.zone-icon svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.zone-emoji-fallback { font-size: 2.35rem; }
.zone-body { gap: 6px; }
.zone-title { color: var(--ink); font-size: 1.08rem; font-weight: 850; line-height: 1.3; }
.zone-desc { color: var(--ink-soft); font-weight: 650; line-height: 1.45; }
.zone-meta { color: #466382; font-weight: 800; }
.pbar { height: 10px; border: 0; background: #e7eef7; box-shadow: inset 0 1px 2px rgba(29,65,113,.1); }
.pbar-fill { background: linear-gradient(90deg, #35c9c3, #38c48b); box-shadow: none; }
.badge { border: 1px solid #e7b53e; background: #fff4c9; box-shadow: 0 6px 15px rgba(174,112,8,.14); }

/* --- Zone detail and game shell --- */
.mascot { filter: drop-shadow(0 8px 12px rgba(17,55,104,.2)); }
.bubble::before { border-right-color: #d1deee; }
.bubble::after { border-right-color: #fff; }
.skill-row { border: 0; border-radius: 16px; box-shadow: 0 8px 22px rgba(18,57,106,.08), inset 0 0 0 1px #dbe6f3; }
.skill-state { border: 1px solid #d2deec; background: #eef3f8; }

.hud {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.94);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(14,51,100,.13), inset 0 0 0 1px rgba(190,210,235,.48);
  backdrop-filter: blur(16px);
}
.dot { width: 15px; height: 15px; border: 1px solid #bdcde0; background: #dce6f1; box-shadow: none; }
.dot.now { border-color: #3478f6; background: #3478f6; box-shadow: 0 0 0 5px rgba(52,120,246,.15); }
.dot.good, .dot.ok { border-color: #16855c; background: #38c48b; }
.dot.miss { border-color: #d7445b; background: #ff91a3; }
.level-chip { border: 1px solid #cbd9e9; background: #f1f6fc; box-shadow: none; }
.prompt {
  padding: 20px 24px 20px 30px;
  font-size: 1.24rem;
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: .002em;
}
.prompt::before { width: 7px; background: linear-gradient(180deg, #47c8ff, #3478f6); box-shadow: none; }
.stage { gap: 18px; }

.choice, .cmp-item, .spell-tile, .sort-item, .weight {
  border: 1px solid #c9d8e9;
  background: rgba(255,255,255,.96);
  box-shadow: 0 9px 22px rgba(18,57,106,.11), inset 0 1px 0 #fff;
}
.choice { border-radius: 18px; }
.choice { font-weight: 800; line-height: 1.38; }
.choice:hover, .cmp-item:hover { transform: translateY(-3px); border-color: #66a2f3; box-shadow: 0 14px 28px rgba(18,57,106,.16); }
.choice:active, .cmp-item:active { transform: translateY(1px); box-shadow: 0 4px 11px rgba(18,57,106,.12); }
.choice.pick-good, .cmp-item.pick-good { border: 2px solid var(--good); background: var(--good-bg); box-shadow: 0 0 0 5px rgba(22,133,92,.12); }
.choice.pick-bad, .cmp-item.pick-bad { border: 2px solid var(--bad); background: var(--bad-bg); }
.feedback.good, .feedback.bad, .feedback.hint { border-width: 1px; box-shadow: 0 12px 28px rgba(18,57,106,.1); }
.fb-principle { border-color: #cbd9e8; }

/* --- In-game illustrations inherit the new material system --- */
.clockface { filter: drop-shadow(0 14px 23px rgba(18,57,106,.17)); }
.clockface .face { fill: #fff; stroke: #afc4de; }
.map-holder, .maze {
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 36px rgba(18,57,106,.15), inset 0 0 0 1px #c9d9e9;
}
.scene { max-width: 760px; gap: 14px; }
.street {
  overflow: hidden;
  background: #dff6ff;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 26px;
  box-shadow: 0 20px 45px rgba(17,55,104,.18), inset 0 0 0 1px rgba(167,194,222,.6);
}
.scene-text {
  border: 0;
  padding: 14px 18px;
  font-weight: 750;
  line-height: 1.5;
  box-shadow: 0 10px 24px rgba(17,55,104,.1), inset 0 0 0 1px #d8e5f2;
}
.ruler-body { fill: #fff1b5; stroke: #bd8a20; }
.ruler-tick, .dial-tick { stroke: #294665; }
.dialscale { filter: drop-shadow(0 12px 20px rgba(18,57,106,.17)); }
.dial-face, .bal-base, .bal-stand { fill: #4a678d; stroke: #213d62; }
.dial-inner { fill: #fff; stroke: #b8cbe1; }
.bal-beam { fill: #7291b8; stroke: #213d62; }
.bal-pan { fill: #dce7f4; stroke: #496789; }
.summary { padding: clamp(24px, 5vw, 44px); }
.summary h2 { color: var(--ink); text-shadow: none; }
.sum-stat { background: #f2f7fd; border-color: #d6e2f0; }

/* --- Dialog and utility surfaces --- */
.overlay { background: rgba(8,28,56,.58); backdrop-filter: blur(8px); }
.modal { border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 80px rgba(4,25,58,.36), inset 0 0 0 1px #d4e2f1; }
.modal p, .psec p, .panel p { max-width: 74ch; }
.text-input, .gate-input { font-family: var(--font); font-weight: 700; letter-spacing: .01em; }
.toast { background: #17345f; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 34px rgba(4,25,58,.34); text-shadow: none; }
code.cmd { color: #dff4ff; background: #17345f; box-shadow: none; }
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .zone-card:hover { border-color: #9cb9da; }
  .zone-emoji { background: var(--card-color); box-shadow: 0 12px 24px rgba(18,57,106,.16); }
}

@media (max-width: 600px) {
  html, body { font-size: 16.5px; line-height: 1.56; }
  #app { padding: 10px 12px 30px; }
  body::before { background-position: 55% center; }
  .app-header { top: 6px; padding: 8px 10px; border-radius: 17px; margin-bottom: 14px; }
  .app-header .title { flex-basis: 130px; font-size: 1.04rem; }
  .header-right { gap: 5px; }
  .kid-chip { padding-right: 8px; }
  .splash { min-height: calc(100vh - 30px); padding-top: 14px; }
  .splash-logo { width: 104px; height: 92px; }
  .splash-title { font-size: 2rem; }
  .splash-sub { border-radius: 18px; }
  .zone-group-title { font-size: 1rem; margin: 16px 0 8px; }
  .zone-grid { grid-template-columns: 1fr; gap: 13px; }
  .zone-card { min-height: 124px; padding: 16px 15px; border-radius: 20px; }
  .zone-emoji { width: 62px; height: 62px; border-radius: 18px; }
  .zone-icon svg { width: 39px; height: 39px; }
  .zone-title { font-size: 1rem; }
  .prompt { padding: 16px 16px 16px 23px; }
  .modal { border-radius: 22px; }
  .brandbar, .splash-brand {
    bottom: max(4px, env(safe-area-inset-bottom));
    padding: 2px 8px;
    font-size: 9px;
    opacity: .7;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header, .hud, .panel, .modal { background: #fff; backdrop-filter: none; }
}

/* Mọi pictogram cũ được render từ SVG cục bộ, không còn phụ thuộc font emoji
 * của Windows/Android/iOS. Kích thước 1em giúp giữ nguyên toàn bộ layout cũ. */
img.emoji-svg {
  width: 1em;
  height: 1em;
  margin: 0 .06em;
  display: inline-block;
  vertical-align: -.14em;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.ui-icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.ui-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legacy-icon-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.zone-intro .mascot img.emoji-svg,
.profile-ava img.emoji-svg,
.ava-emo img.emoji-svg,
.sum-emoji img.emoji-svg { margin: 0; }

/* =============================================================
 * HỆ THỐNG HUY HIỆU VÀ GẮN VÀO AVATAR (BADGE SYSTEM)
 * Powered by DienNT | 0933934123
 * ============================================================= */
.skw-badge-svg {
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 4px 6px rgba(20, 50, 90, 0.22));
  transition: transform 0.2s ease;
}
.skw-badge-svg:hover {
  transform: scale(1.08) rotate(2deg);
}

/* --- Avatar kết hợp huy hiệu gắn góc --- */
.avatar-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #edf5ff 70%, #d0e4ff 100%);
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(17, 55, 104, 0.16);
  flex-shrink: 0;
  user-select: none;
}
.avatar-badge-wrap.sz-small,
.avatar-badge-wrap.small {
  width: 36px;
  height: 36px;
  font-size: 1.45rem;
}
.avatar-badge-wrap.sz-medium,
.avatar-badge-wrap.medium {
  width: 56px;
  height: 56px;
  font-size: 2.2rem;
  border-width: 3px;
}
.avatar-badge-wrap.sz-large,
.avatar-badge-wrap.large {
  width: 88px;
  height: 88px;
  font-size: 3.6rem;
  border-width: 4px;
  box-shadow: 0 10px 24px rgba(17, 55, 104, 0.22);
}
.avatar-badge-wrap .ava-face {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Huy hiệu ghim ở góc avatar */
.avatar-badge-wrap .badge-pin {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  z-index: 2;
  animation: badgePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.avatar-badge-wrap.sz-small .badge-pin {
  right: -5px;
  bottom: -5px;
}
.avatar-badge-wrap.sz-large .badge-pin {
  right: -6px;
  bottom: -6px;
}
.avatar-badge-wrap .badge-pin.emoji-pin {
  font-size: 1.25rem;
  background: #fff;
  border-radius: 50%;
  border: 1.5px solid #ffd43b;
  width: 24px;
  height: 24px;
}

@keyframes badgePop {
  0% { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Nút mở nhanh tủ huy hiệu trên thanh header */
.btn-badge-closet {
  background: linear-gradient(180deg, #fff7d6, #ffe066) !important;
  border-color: #f59f00 !important;
  color: #7a3a00 !important;
  box-shadow: 0 4px 8px rgba(245, 159, 0, 0.25) !important;
  font-size: 1.15rem !important;
}
.btn-badge-closet:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Danh hiệu huy hiệu trên thẻ hồ sơ của bé */
.profile-badge-tag {
  font-size: 0.76rem;
  font-weight: 800;
  color: #7950f2;
  background: #f3f0ff;
  border: 1px solid #d0bfff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 2px;
  box-shadow: 0 2px 4px rgba(121, 80, 242, 0.1);
}

/* Khối tủ huy hiệu trên bản đồ thế giới */
.worldmap-badge-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
  border: 2px solid #d0e2f5;
  border-radius: 24px;
  padding: 16px 20px;
  margin-top: 24px;
  box-shadow: 0 10px 25px rgba(17, 55, 104, 0.08);
}
.worldmap-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.badge.is-equipped {
  border-color: #f59f00 !important;
  background: linear-gradient(180deg, #fff9db, #ffec99) !important;
  box-shadow: 0 0 0 2px rgba(245, 159, 0, 0.3), 0 4px 10px rgba(217, 72, 15, 0.15) !important;
  font-weight: 900;
}

/* --- Tủ Huy Hiệu Modal & Modal mở rộng trên Desktop --- */
.modal.modal-wide,
.modal.modal-closet,
.modal:has(.badge-closet) {
  max-width: 860px !important;
  width: min(92vw, 860px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Ngăn scrollbar kép khó chịu bên ngoài modal */
  padding: 24px 28px;
}
.modal.modal-wide h2 {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 0 10px 0;
  flex-shrink: 0;
  color: #113768;
}
.modal.modal-wide .modal-actions {
  flex-shrink: 0;
  margin-top: 10px;
  justify-content: center;
}

.badge-closet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 100%;
  width: 100%;
  flex: 1;
  min-height: 0; /* Cho phép vùng con flex-1 scroll độc lập */
}
.closet-preview-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #e7f5ff 0%, #fff4e6 100%);
  border: 2px solid #bce2ff;
  border-radius: 20px;
  padding: 14px 20px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(28, 126, 214, 0.12);
}
.closet-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.closet-kid-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #1864ab;
}
.closet-badge-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #495057;
}

/* Tabs lọc trong tủ huy hiệu: wrap tự nhiên, không tràn ngang và không sinh scrollbar ngang */
.closet-tabs {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
  overflow: visible;
}
.closet-tab-btn {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 8px 16px;
  background: #f1f3f5;
  border: 2px solid #dee2e6;
  border-radius: 999px;
  cursor: pointer;
  color: #495057;
  transition: all 0.2s;
  white-space: nowrap;
}
.closet-tab-btn:hover {
  background: #e9ecef;
}
.closet-tab-btn.sel {
  background: #1971c2;
  border-color: #1864ab;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(25, 113, 194, 0.28);
}

/* Lưới thẻ huy hiệu: tự động chia 3 hoặc 2 cột trên desktop, cuộn mượt mà gọn gàng */
.closet-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 12px;
  min-height: 0;
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: #b5c7dc transparent;
}
.closet-grid::-webkit-scrollbar {
  width: 6px;
}
.closet-grid::-webkit-scrollbar-track {
  background: transparent;
}
.closet-grid::-webkit-scrollbar-thumb {
  background: #b5c7dc;
  border-radius: 999px;
}
.closet-grid::-webkit-scrollbar-thumb:hover {
  background: #8aa4c2;
}

.closet-badge-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

@media (max-width: 600px) {
  .modal.modal-wide,
  .modal.modal-closet,
  .modal:has(.badge-closet) {
    width: 96vw !important;
    padding: 16px 12px !important;
    max-height: 90vh;
  }
  .closet-preview-card {
    padding: 10px 14px;
    gap: 12px;
  }
  .closet-grid {
    grid-template-columns: 1fr;
    max-height: 48vh;
  }
}
.closet-badge-card.unlocked {
  border-color: #ffd43b;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
  box-shadow: 0 6px 16px rgba(245, 159, 0, 0.1);
}
.closet-badge-card.unlocked:hover {
  transform: translateY(-3px);
  border-color: #f59f00;
  box-shadow: 0 10px 20px rgba(245, 159, 0, 0.18);
}
.closet-badge-card.equipped {
  border-color: #2f9e44;
  background: linear-gradient(180deg, #f4fbf5 0%, #e6fcf5 100%);
  box-shadow: 0 0 0 2px #40c057, 0 8px 20px rgba(43, 138, 62, 0.15);
}
.closet-badge-card.locked {
  background: #f8f9fa;
  border-color: #e9ecef;
  opacity: 0.65;
}
.closet-badge-card .badge-svg-wrap {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-locked-mask {
  position: relative;
  filter: grayscale(0.9) contrast(0.7);
}
.badge-locked-mask .lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.closet-badge-card .badge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.closet-badge-card .badge-name {
  font-size: 0.95rem;
  color: #212529;
}
.closet-badge-card .badge-sub {
  font-size: 0.75rem;
  font-weight: 800;
  color: #1971c2;
}
.closet-badge-card .badge-desc {
  font-size: 0.78rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.3;
}
.closet-badge-card .badge-action {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
.tag-equipped {
  font-size: 0.8rem;
  font-weight: 900;
  color: #2b8a3e;
  background: #d3f9d8;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #8ce99a;
}
.tag-locked {
  font-size: 0.78rem;
  font-weight: 700;
  color: #868e96;
  background: #e9ecef;
  padding: 4px 10px;
  border-radius: 999px;
}

/* --- Khối chúc mừng huy hiệu mới ở màn hình Tổng kết (Summary) --- */
.summary-award-panel {
  background: linear-gradient(135deg, #fff9db 0%, #ffe8cc 50%, #ffe3e3 100%);
  border: 3px solid #f59f00;
  border-radius: 24px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 12px 30px rgba(245, 159, 0, 0.22);
  animation: awardPanelGlow 2s infinite alternate ease-in-out;
}
@keyframes awardPanelGlow {
  0% { box-shadow: 0 8px 24px rgba(245, 159, 0, 0.2); }
  100% { box-shadow: 0 14px 36px rgba(245, 159, 0, 0.4); }
}
.sum-award-header {
  margin: 0 0 14px 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #d9480f;
  text-align: center;
}
.summary-badges-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.summary-badge-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ffd43b;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.sum-badge-icon {
  flex-shrink: 0;
}
.sum-badge-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.sum-badge-title {
  font-size: 1.05rem;
  color: #212529;
}
.sum-badge-sub {
  font-size: 0.8rem;
  font-weight: 800;
  color: #e8590c;
}
.btn-equip-now {
  margin-top: 6px;
  background: linear-gradient(180deg, #ff922b, #f76707) !important;
  border-color: #d9480f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(247, 103, 7, 0.3) !important;
  font-weight: 900 !important;
}
.btn-equip-now.equipped {
  background: #40c057 !important;
  border-color: #2b8a3e !important;
  box-shadow: none !important;
}

/* =============================================================
 * NÚT NHẠC NỀN & BỘ CHỌN AVATAR HỌC SINH / PHỤ HUYNH
 * Powered by DienNT | 0933934123
 * ============================================================= */
.btn-music-toggle {
  background: linear-gradient(180deg, #e7f5ff, #d0ebff) !important;
  border-color: #339af0 !important;
  color: #1864ab !important;
  font-size: 1.15rem !important;
  box-shadow: 0 4px 8px rgba(24, 100, 171, 0.18) !important;
  padding: 8px 12px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-music-toggle:hover {
  transform: translateY(-2px) scale(1.05);
}
.btn-music-toggle .ui-icon {
  width: 1.3em;
  height: 1.3em;
}
.btn-music-toggle .ui-icon svg {
  stroke-width: 4.5;
}
.btn-music-toggle.is-muted {
  background: linear-gradient(180deg, #f8f9fa, #e9ecef) !important;
  border-color: #ced4da !important;
  color: #868e96 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  opacity: 0.88;
}

.skw-ava-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(17, 55, 104, 0.16));
}

.ava-uploaded-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* --- Hộp chọn Avatar đa dạng (Bé trai, Bé gái, Thú cưng, Upload) --- */
.avatar-picker-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 0;
}

.avatar-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px;
}

.avatar-opt-card {
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #ffffff;
  border: 2px solid #e9ecef;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(17, 55, 104, 0.06);
  transition: all 0.2s;
  text-align: center;
}
.avatar-opt-card:hover {
  transform: translateY(-3px);
  border-color: #339af0;
  box-shadow: 0 8px 18px rgba(24, 100, 171, 0.16);
}
.avatar-opt-card.sel {
  border-color: #228be6;
  background: linear-gradient(180deg, #edf7ff 0%, #dbeeff 100%);
  box-shadow: 0 0 0 2px #228be6, 0 8px 20px rgba(34, 139, 230, 0.2);
}

.ava-opt-visual {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ava-opt-visual .big-emoji {
  font-size: 3rem;
  line-height: 1;
}

.ava-opt-name {
  font-size: 0.9rem;
  color: #212529;
}
.ava-opt-sub {
  color: #6c757d;
  font-size: 0.74rem;
}

/* --- Khung tải ảnh tự chọn (Upload) --- */
.upload-card-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 2px dashed #b9d5f3;
  border-radius: 22px;
  padding: 24px 16px;
  text-align: center;
}
.upload-preview-circle {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #dbeeff);
  border: 3px solid #339af0;
  box-shadow: 0 8px 20px rgba(24, 100, 171, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ava-preview-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Thẻ hồ sơ phụ huynh */
.parent-profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border: 2px solid #d0e2f5;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 6px 16px rgba(17, 55, 104, 0.08);
}
.parent-ava-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.parent-ava-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Vùng chọn avatar khi tạo hồ sơ */
.ava-select-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ava-visual-wrap {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thông báo trạng thái đồng bộ trong màn phụ huynh */
.sync-msg {
  min-height: 20px; font-weight: 700; font-size: .92rem;
  padding: 8px 14px; border-radius: 12px;
}
.sync-msg:empty { padding: 0; }
.sync-msg.good { background: var(--good-bg); color: var(--good); border: 2px solid var(--good-br); }
.sync-msg.bad  { background: var(--bad-bg);  color: var(--bad);  border: 2px solid var(--bad-br); }

/* Ghi công tài sản bên thứ ba (Twemoji CC BY 4.0 bắt buộc hiển thị) */
.credits {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255,247,226,.6);
  border: 2px dashed rgba(122,90,63,.3); border-radius: var(--radius-sm);
}
.credits strong { display: block; margin-bottom: 4px; color: var(--wood-dark); }

/* =============================================================
 * 30. RESPONSIVE TOÀN DIỆN
 * Bổ sung các breakpoint còn thiếu: tablet (601-900px),
 * điện thoại nhỏ (≤380px), landscape phone, safe area insets.
 * ============================================================= */

/* --- Safe area: đệm cho iPhone notch / Dynamic Island --- */
#app {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}

/* --- Tablet: 601–900px — vẫn 2 cột nhưng gọn hơn --- */
@media (min-width: 601px) and (max-width: 900px) {
  #app { max-width: 800px; padding: 14px 18px 36px; }

  .zone-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .zone-card { min-height: 130px; padding: 16px; }
  .zone-emoji { width: 64px; height: 64px; }

  .profile-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }

  .choices { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .choices.numbers { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

  .summary { padding: 22px 18px; }
  .sum-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  .sort-bins { gap: 12px; }
  .sort-bin { flex-basis: 180px; min-width: 160px; }

  .priv-grid { grid-template-columns: 1fr; }

  .closet-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  .prompt { font-size: 1.16rem; }
}

/* --- Điện thoại nhỏ ≤380px (iPhone SE, Galaxy A03s…) --- */
@media (max-width: 380px) {
  html, body { font-size: 15px; }
  #app { padding: 8px 10px 24px; }

  .app-header { padding: 7px 8px; gap: 6px; border-radius: 15px; }
  .app-header .title { font-size: .95rem; flex-basis: 100px; }
  .kid-chip { padding: 3px 8px 3px 5px; font-size: .85rem; }

  .splash-logo { width: 84px; height: 74px; }
  .splash-title { font-size: 1.6rem; }
  .splash-sub { font-size: .88rem; padding: 6px 12px; }
  .btn.huge { min-height: 56px; font-size: 1rem; padding: 12px 24px; }
  .profile-actions { gap: 10px; margin-top: 16px; }
  .profile-actions .btn { width: 100%; min-width: 0; }

  .zone-card { padding: 12px; gap: 10px; }
  .zone-emoji { width: 52px; height: 52px; font-size: 1.8rem; border-radius: 15px; }
  .zone-title { font-size: .92rem; }
  .zone-desc { font-size: .82rem; }

  .prompt { font-size: 1rem; padding: 12px 14px 12px 18px; }

  .numpad-keys { grid-template-columns: repeat(3, 62px); gap: 8px; }
  .numpad-display { min-width: 130px; font-size: 1.6rem; padding: 7px 14px; }
  .btn.key { min-height: 56px; font-size: 1.3rem; }
  .btn.key.sm { min-height: 42px; font-size: 1rem; }

  .dpad { grid-template-columns: repeat(3, 56px); gap: 6px; }
  .btn.dkey { min-height: 52px; font-size: 1.25rem; }

  .choices { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .choices.numbers .choice { font-size: 1.3rem; min-height: 60px; padding: 10px; }
  .choice { min-height: 62px; padding: 10px 12px; font-size: .92rem; }

  .choices.letters { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); }
  .choices.letters .choice { font-size: 1.4rem; min-height: 58px; }
  .choices.enwords { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  .equation { font-size: 1.45rem; }
  .equation.small { font-size: 1.15rem; }

  .blend-row { font-size: 1.3rem; gap: 5px; }
  .blend-slot, .blend-part { min-width: 44px; padding: 4px 8px; font-size: 1.2rem; }

  .spell-cell { width: 44px; height: 50px; font-size: 1.4rem; }
  .spell-tile { min-width: 44px; min-height: 48px; font-size: 1.4rem; }
  .masked-word { font-size: 1.6rem; letter-spacing: 3px; padding: 6px 14px; }

  .enword-big { font-size: 1.6rem; padding: 8px 16px; }
  .soundbox { padding: 12px 16px; gap: 10px; }
  .soundbox-text { font-size: 1.2rem; }

  .maze { width: min(280px, 94vw); }

  .mem-grid { gap: 7px; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }

  .clockface { width: min(260px, 82vw); }
  .readout { font-size: 1.6rem; padding: 3px 16px; }
  .cc-group { padding: 4px 8px; }

  .note { min-width: 92px; min-height: 60px; }
  .note-val { font-size: 1.1rem; }

  .sort-bin { min-width: 120px; flex-basis: 120px; min-height: 110px; padding: 8px; }
  .sort-item { min-width: 62px; padding: 7px 8px; }
  .sort-emoji { font-size: 1.5rem; }

  .summary h2 { font-size: 1.2rem; }
  .sum-emoji { font-size: 2.8rem; }
  .stars { font-size: 1.8rem; letter-spacing: 4px; }
  .stat-val { font-size: 1.3rem; }

  .modal { padding: 16px; max-width: calc(100vw - 20px); }
  .gate-q { font-size: 1.8rem; }

  .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .profile-card { min-height: 140px; padding: 14px 8px; }
  .profile-ava { font-size: 2.6rem; }

  .hud { padding: 7px 10px; gap: 7px; }
  .dot { width: 12px; height: 12px; }

  .bridge { padding: 7px 10px; gap: 2px; }
  .plank { font-size: 1rem; }

  .weight { min-width: 60px; min-height: 56px; padding: 11px 8px 6px; }
  .weight-val { font-size: .9rem; }

  .cmp-item { padding: 10px; gap: 2px 8px; }
  .cmp-emoji { font-size: 1.8rem; }

  .jig-tray { min-height: 80px; gap: 8px; padding: 10px; }

  .brandbar, .splash-brand { font-size: 8px; padding: 2px 6px; }
}

/* --- Landscape phone: max-height nhỏ + orientation --- */
@media (max-height: 480px) and (orientation: landscape) {
  #app { padding-top: 6px; padding-bottom: 20px; }

  .app-header { position: relative; top: 0; margin-bottom: 10px; padding: 6px 10px; }

  .splash { min-height: auto; padding: 8px 12px 32px; gap: 10px; }
  .splash-logo { width: 64px; height: 56px; }
  .splash-title { font-size: 1.4rem; }

  .zone-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .zone-card { min-height: 100px; padding: 12px; }

  .prompt { font-size: 1.05rem; padding: 12px 14px 12px 20px; margin-bottom: 10px; }

  .clockface { width: min(200px, 34vh); }
  .maze { width: min(300px, 50vw); }
  .mem-grid { max-width: 90vw; }

  .summary { padding: 16px; }
  .sum-emoji { font-size: 2.6rem; }

  .modal { max-height: 92vh; }

  .hud { margin-bottom: 8px; }
  .feedback { margin-top: 10px; }
}

/* ======================= HỆ SINH THÁI HỌC TẬP ======================= */
.journey-panel {
  margin: 18px 0 24px; padding: 20px; border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,247,255,.86));
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(11,54,116,.12);
}
.journey-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.journey-heading h2, .library-title { margin:0 0 4px; color:#173f76; }
.journey-track { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.journey-card {
  min-height:110px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 10px;
  padding:14px; text-align:left; border:2px solid #d7e8ff; border-radius:18px;
  color:#244a79; background:#fff; box-shadow:0 5px 0 #c8ddf7; cursor:pointer;
}
.journey-card strong { line-height:1.25; }
.journey-card .tiny { grid-column:2; }
.journey-card.complete { border-color:#8ce99a; background:#f2fff5; box-shadow:0 5px 0 #69db7c; }
.journey-card.locked { opacity:.62; filter:saturate(.45); cursor:not-allowed; box-shadow:none; }
.journey-icon { grid-row:1/3; font-size:2rem; }
.library-title { margin:28px 0 8px; }
.learning-goal { display:grid; gap:6px; margin:12px auto 18px; max-width:920px; padding:15px 18px; border-radius:18px; background:#eef8ff; border:2px solid #b9e2ff; color:#21446f; }

.village-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:20px; align-items:center; }
.village-scene { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px; border-radius:28px; background:linear-gradient(#bfe9ff 0 54%,#9be27b 54%); min-height:300px; }
.village-decoration { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; min-height:110px; padding:10px; text-align:center; border-radius:18px; background:rgba(255,255,255,.76); box-shadow:0 6px 14px rgba(35,77,50,.12); }
.village-decoration > span { font-size:2.6rem; }
.village-decoration.is-locked { opacity:.6; filter:grayscale(.5); }
.village-copy { display:grid; gap:10px; color:#21446f; }
.village-copy h2 { margin:0; }
.village-complete { color:#25813c; }
.material-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; margin:22px 0; }
.material-card { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; padding:14px; border-radius:18px; background:rgba(255,255,255,.88); border:1px solid #d8e8fa; }
.material-card .material-icon { grid-row:1/3; font-size:2rem; }
.material-card strong { font-size:1.35rem; color:#174b88; }
.village-reward { display:flex; align-items:center; gap:14px; max-width:760px; margin:12px auto 18px; padding:13px 16px; border-radius:18px; background:#fff8d8; border:2px solid #ffd43b; color:#624900; }
.village-reward > div { display:grid; flex:1; }
.reward-icon { font-size:2.2rem; }

.assignment-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line,#dce5ef); }
.assignment-row > span:first-child { display:grid; }
.weekly-report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.report-stat { display:grid; justify-items:center; padding:14px 8px; border-radius:16px; background:#f1f7ff; color:#294e7a; text-align:center; }
.report-stat strong { font-size:1.65rem; color:#155ac8; }
.class-list { display:grid; gap:8px; }
.class-row { display:grid; grid-template-columns:44px minmax(150px,1.5fr) repeat(3,minmax(100px,1fr)); gap:12px; align-items:center; padding:12px; border-radius:16px; background:#f7faff; border:1px solid #dce8f6; }
.class-row > span:not(.class-avatar) { display:grid; }
.class-avatar { font-size:1.8rem; text-align:center; }

.certificate { max-width:900px; margin:18px auto; padding:46px; text-align:center; color:#173f76; background:#fffdf5; border:10px double #f2b632; border-radius:24px; box-shadow:0 18px 45px rgba(20,55,100,.18); }
.cert-logo { font-size:4rem; }
.cert-kicker { font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.certificate h1 { margin:10px 0 24px; color:#155ac8; letter-spacing:.04em; }
.certificate h2 { display:inline-block; min-width:55%; margin:4px 0 14px; padding:0 18px 8px; font-size:2.3rem; color:#e67700; border-bottom:2px solid #f2b632; }
.cert-lead { max-width:650px; margin:0 auto 24px; font-size:1.1rem; }
.cert-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }
.cert-stats > div { display:grid; padding:12px; border-radius:14px; background:#eef7ff; }
.cert-stats strong { font-size:1.55rem; }
.cert-note { font-weight:700; }
.cert-sign { display:flex; justify-content:space-between; margin:40px 20px 24px; }

@media (max-width:700px) {
  .journey-heading { align-items:stretch; flex-direction:column; }
  .journey-track { grid-template-columns:1fr; }
  .village-hero { grid-template-columns:1fr; }
  .village-scene { grid-template-columns:repeat(2,1fr); padding:12px; }
  .weekly-report-grid, .cert-stats { grid-template-columns:repeat(2,1fr); }
  .assignment-row { grid-template-columns:1fr; }
  .class-row { grid-template-columns:38px 1fr 1fr; }
  .class-row > span:nth-child(4), .class-row > span:nth-child(5) { grid-column:2/4; }
  .certificate { padding:24px 14px; }
  .certificate h1 { font-size:1.45rem; }
  .certificate h2 { font-size:1.8rem; }
}

@media print {
  body:has(.certificate) { background:#fff !important; }
  body:has(.certificate) #bg-decor, body:has(.certificate) .app-header,
  body:has(.certificate) .brandbar, body:has(.certificate) .no-print { display:none !important; }
  body:has(.certificate) #app { padding:0; }
  .certificate { margin:0; box-shadow:none; min-height:96vh; display:flex; flex-direction:column; justify-content:center; }
}

/* --- Landscape phone nhỏ --- */
@media (max-height: 380px) and (orientation: landscape) {
  .splash-logo { display: none; }
  .btn.huge { min-height: 50px; font-size: 1rem; padding: 10px 20px; }
  .zone-card { min-height: 80px; }
  .zone-emoji { width: 48px; height: 48px; }
}

/* --- Wide desktop: 1200px+ — tận dụng không gian --- */
@media (min-width: 1200px) {
  #app { max-width: 1200px; }
  .zone-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .summary-badges-container { grid-template-columns: repeat(3, 1fr); }
}

/* --- Touch coarse: tăng vùng bấm cho thiết bị cảm ứng --- */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn.small { min-height: 44px; }
  .choice { min-height: 72px; }
  .sort-item { min-height: 64px; }
  .spell-tile { min-height: 60px; }
  .cmp-item { min-height: 64px; }
}

/* --- High contrast / forced-colors: đảm bảo viền hiển thị --- */
@media (forced-colors: active) {
  .btn, .choice, .zone-card, .profile-card, .panel, .modal {
    border: 2px solid ButtonText;
  }
  .dot.now, .dot.good, .dot.miss { border: 2px solid Highlight; }
  .choice.pick-good::after, .choice.pick-bad::after { forced-color-adjust: none; }
}

/* =============================================================
 * 33. MOTION SYSTEM — chuyển động ngắn, có mục đích, không chặn thao tác
 * ============================================================= */
@keyframes screenFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes uiRise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uiDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes correctBounce {
  0% { transform: scale(1); }
  42% { transform: scale(1.055); }
  72% { transform: scale(.985); }
  100% { transform: scale(1); }
}
@keyframes softWobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  28% { transform: translateX(-5px) rotate(-1deg); }
  62% { transform: translateX(4px) rotate(1deg); }
}
@keyframes glowOnce {
  0%, 100% { filter: none; }
  45% { filter: drop-shadow(0 0 12px rgba(56,196,139,.48)); }
}
@keyframes hintSwing {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-12deg) scale(1.12); }
  70% { transform: rotate(9deg) scale(1.05); }
}
@keyframes starReveal {
  from { opacity: 0; transform: scale(.65) rotate(-4deg); letter-spacing: 1px; }
  65% { transform: scale(1.1) rotate(2deg); }
  to { opacity: 1; transform: scale(1); letter-spacing: 6px; }
}
@keyframes snapIn {
  0% { opacity: .25; transform: scale(1.18); }
  65% { opacity: 1; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes progressShine {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(360%) skewX(-18deg); }
}
@keyframes particleFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(0); }
  12% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx-x)), calc(-50% + var(--fx-y))) scale(.9) rotate(var(--fx-r)); }
}

.screen.fade-in { animation: screenFade .22s ease-out; }
.screen.fade-in > .app-header {
  animation: uiDrop .32s cubic-bezier(.2,.8,.25,1) backwards;
}
.screen.fade-in > .zone-intro,
.screen.fade-in > .review-box,
.screen.fade-in > .summary,
.screen.fade-in > .panel,
.screen.fade-in > .field,
.screen.fade-in > .psec {
  animation: uiRise .38s cubic-bezier(.2,.8,.25,1) .05s backwards;
}

/* Danh sách xuất hiện lần lượt để mắt bé dễ theo dõi. */
.screen.fade-in .profile-card,
.screen.fade-in .zone-card,
.screen.fade-in .choice,
.screen.fade-in .skill-row {
  animation: uiRise .38s cubic-bezier(.2,.85,.25,1) backwards;
}
.screen.fade-in :is(.profile-card,.zone-card,.choice,.skill-row):nth-child(2) { animation-delay: 45ms; }
.screen.fade-in :is(.profile-card,.zone-card,.choice,.skill-row):nth-child(3) { animation-delay: 90ms; }
.screen.fade-in :is(.profile-card,.zone-card,.choice,.skill-row):nth-child(4) { animation-delay: 135ms; }
.screen.fade-in :is(.profile-card,.zone-card,.choice,.skill-row):nth-child(5) { animation-delay: 180ms; }
.screen.fade-in :is(.profile-card,.zone-card,.choice,.skill-row):nth-child(n+6) { animation-delay: 220ms; }

/* Vi tương tác nút và thẻ. */
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(3px) scale(.985); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05) saturate(1.05); }
.zone-icon, .zone-emoji-fallback, .profile-ava, .ava-emo {
  transition: transform .24s cubic-bezier(.2,.85,.25,1.2), filter .24s ease;
}
.zone-card:hover .zone-icon,
.zone-card:hover .zone-emoji-fallback,
.profile-card:hover .profile-ava,
.ava-opt:hover .ava-emo { transform: translateY(-3px) rotate(-2deg) scale(1.06); }

/* Thanh tiến độ có một vệt sáng nhẹ, chỉ chạy một lần khi xuất hiện. */
.pbar { position: relative; overflow: hidden; }
.pbar-fill { position: relative; overflow: hidden; }
.pbar-fill::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: progressShine 1.15s ease-out .25s 1 both;
}

/* Câu hỏi và lựa chọn của mỗi lượt. */
.prompt { animation: uiRise .3s cubic-bezier(.2,.85,.25,1) backwards; }
.stage > * { animation: uiRise .3s cubic-bezier(.2,.85,.25,1) .04s backwards; }
.choice.pick-good, .cmp-item.pick-good { animation: correctBounce .48s cubic-bezier(.2,.8,.25,1.2); }
.stage.round-good { animation: glowOnce .72s ease-out; }
.stage.round-bad { animation: softWobble .32s ease-out; }
.feedback.good { animation: uiRise .28s cubic-bezier(.2,.85,.25,1), glowOnce .72s ease-out; }
.feedback.bad { animation: uiRise .24s ease-out, softWobble .34s ease-out; }
.feedback.bad .fb-ico { animation: softWobble .4s ease-out; }
.hint-box .hint-ico { animation: hintSwing .55s ease-out; transform-origin: 50% 80%; }

/* Tương tác đặc trưng của mini-game. */
.jig-piece { transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.jig-piece:not(.fixed):hover { filter: brightness(1.06) drop-shadow(0 7px 7px rgba(21,57,101,.18)); }
.jig-piece.fixed { animation: snapIn .34s cubic-bezier(.2,.9,.3,1.35); }
.mem-card:not(.matched):hover .mem-inner { transform: translateY(-3px); }
.mem-card.open:hover .mem-inner { transform: translateY(-3px) rotateY(180deg); }
.mem-card.matched .mem-front { animation: glowOnce .7s ease-out; }
.sort-item, .weight, .spell-tile, .cmp-item {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sort-item:hover, .weight:hover, .spell-tile:hover { transform: translateY(-3px) scale(1.02); }

/* Tổng kết và huy hiệu. */
.summary .sum-emoji { animation: correctBounce .68s cubic-bezier(.2,.85,.25,1.25), bob 3s ease-in-out .7s infinite; }
.summary .stars { animation: starReveal .72s cubic-bezier(.2,.85,.25,1.25) .18s backwards; }
.summary .praise { animation: uiRise .4s ease-out .28s backwards; }
.summary .stat { animation: uiRise .38s ease-out backwards; }
.summary .stat:nth-child(2) { animation-delay: 50ms; }
.summary .stat:nth-child(3) { animation-delay: 100ms; }
.summary .stat:nth-child(4) { animation-delay: 150ms; }
.summary .stat:nth-child(n+5) { animation-delay: 190ms; }
.summary-badge-card { animation: correctBounce .62s cubic-bezier(.2,.85,.25,1.25) backwards; }
.summary-badge-card:nth-child(2) { animation-delay: 100ms; }
.summary-badge-card:nth-child(3) { animation-delay: 180ms; }
.badge-pin { animation: correctBounce .55s cubic-bezier(.2,.85,.25,1.25); }

/* Hạt chúc mừng nằm trên cùng nhưng không thể nhận chuột/focus. */
.celebration-burst {
  position: fixed;
  width: 1px; height: 1px;
  z-index: 900;
  pointer-events: none;
}
.celebration-burst i {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 15px;
  border-radius: 2px;
  opacity: 0;
  animation: particleFly .9s cubic-bezier(.15,.7,.25,1) var(--fx-delay) forwards;
}
.celebration-burst i.round { width: 10px; height: 10px; border-radius: 50%; }

/* Bảo đảm hiệu ứng trang trí cũng biến mất hoàn toàn khi giảm chuyển động. */
body.reduce-motion .celebration-burst { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.allow-motion) .celebration-burst { display: none !important; }
}

/* =============================================================
 * 40. KHUNG DÙNG CHUNG CHO CÁC MINI-GAME MỚI (MG-14 trở đi)
 * minigames/kit.js: minh hoạ, xếp thứ tự, chọn nhiều, ô màu
 * ============================================================= */
.kit-visuals { display: grid; gap: 12px; justify-items: center; width: 100%; }
.kit-svg {
  width: min(100%, 300px); aspect-ratio: 1 / 1;
  padding: 10px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}
.kit-svg svg { display: block; width: 100%; height: 100%; }
.kit-svg.kit-shape { width: min(100%, 190px); }
.kit-svg.kit-wide { width: min(100%, 560px); aspect-ratio: auto; }
.kit-svg.kit-wide svg { height: auto; }
.kit-opt-svg { display: block; width: 76px; height: 76px; flex: none; }
.kit-opt-svg svg { display: block; width: 100%; height: 100%; }
.choices.pics .choice { flex-direction: column; gap: 4px; padding: 10px; }
.kit-swatch {
  display: inline-block; width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 3px solid var(--wood-dark);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 2px 0 rgba(255,255,255,.8);
}
.kit-scene {
  display: flex; gap: 14px; align-items: center; width: 100%; max-width: 660px;
  padding: 14px 18px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow); font-weight: 700; line-height: 1.45;
}
.kit-scene-emo { font-size: 2.6rem; line-height: 1; flex: none; letter-spacing: 2px; }
.kit-listen { justify-self: center; }

/* Truyện tranh nhiều khung */
.kit-panels {
  display: grid; gap: 10px; width: 100%; max-width: 760px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kit-panel {
  position: relative; display: grid; gap: 6px; justify-items: center; align-content: start;
  padding: 12px 10px 12px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius-sm);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
  text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.38;
}
.kit-panel-no {
  position: absolute; top: -10px; left: -8px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--wood-dark); font-weight: 900; font-size: .9rem;
}
.kit-panel-emo { font-size: 2.3rem; line-height: 1.1; letter-spacing: 2px; }
.kit-panels .kit-listen { grid-column: 1 / -1; }

/* Xếp thứ tự: hàng ô đích + khay thẻ */
.kit-slots, .kit-tray {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 760px;
}
.kit-tray {
  padding: 12px; min-height: 92px; align-items: center;
  background: var(--paper); border: 2px dashed var(--line); border-radius: var(--radius);
}
.kit-slot, .kit-order-item, .kit-multi-item {
  font: inherit; cursor: pointer; color: var(--ink);
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-width: 92px; min-height: 84px; padding: 8px 10px;
  border-radius: var(--radius-sm); text-align: center; font-weight: 800; font-size: .9rem;
  transition: transform .1s ease;
}
.kit-slot {
  position: relative; background: rgba(255,255,255,.55);
  border: 3px dashed var(--wood-light);
}
.kit-slot.filled { border-style: solid; border-color: var(--blue-d); background: linear-gradient(180deg, #f3f9ff, #e3f0ff); }
.kit-slot-no {
  position: absolute; top: 4px; left: 7px; font-size: .78rem; font-weight: 900; color: var(--ink-soft);
}
.kit-slot-in { display: grid; justify-items: center; gap: 2px; }
.kit-order-item, .kit-multi-item {
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--wood-light);
}
.kit-order-item:hover, .kit-multi-item:hover { transform: translateY(-3px); }
.kit-order-item:disabled { opacity: .35; cursor: default; transform: none; }
.kit-slot:focus-visible, .kit-order-item:focus-visible, .kit-multi-item:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.kit-slot .choice-emoji, .kit-order-item .choice-emoji, .kit-multi-item .choice-emoji { font-size: 2rem; }
.kit-slot .kit-opt-svg, .kit-order-item .kit-opt-svg { width: 60px; height: 60px; }

/* Chọn nhiều */
.kit-multi {
  display: grid; gap: 12px; width: 100%; max-width: 680px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.kit-multi-item { position: relative; }
.kit-multi-item.sel {
  border-color: var(--blue-d); background: linear-gradient(180deg, #eaf4ff, #cfe4ff);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--blue-d), 0 0 0 5px rgba(61,147,245,.25);
}
.kit-multi-item.sel::after {
  content: '✔'; position: absolute; top: 4px; right: 8px; color: var(--blue-d); font-weight: 900;
}
.kit-multi-item.reveal { border-color: var(--good); }

@media (max-width: 600px) {
  .kit-slot, .kit-order-item { min-width: 76px; min-height: 76px; padding: 6px; font-size: .8rem; }
  .kit-multi { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .kit-opt-svg { width: 64px; height: 64px; }
  .kit-scene { padding: 12px; }
  .kit-scene-emo { font-size: 2rem; }
}

/* ---------- 41. Xưởng Màu Sắc (MG-15) ---------- */
.paint-board {
  width: min(100%, 460px); padding: 10px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: var(--panel-shadow);
}
.paint-svg { display: block; width: 100%; height: auto; }
.paint-svg path { cursor: pointer; transition: fill .15s ease; }
.paint-palette { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; }
.paint-swatch {
  font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 3px;
  min-width: 70px; padding: 8px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 3px solid var(--wood); box-shadow: 0 4px 0 var(--wood-light);
}
.paint-swatch.sel { border-color: var(--blue-d); box-shadow: 0 4px 0 var(--blue-d), 0 0 0 5px rgba(61,147,245,.28); transform: translateY(-3px); }
.paint-swatch:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.paint-no { font-weight: 900; font-size: 1.1rem; }
.pc-boards { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; width: 100%; }
.pc-col { display: grid; gap: 6px; justify-items: center; }
.pc-cap { font-weight: 900; color: var(--ink-soft); font-size: .9rem; }
.pc-grid {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px;
  width: min(44vw, 210px); padding: 6px; background: var(--wood);
  border-radius: var(--radius-sm);
}
.pc-cell { aspect-ratio: 1 / 1; border: 0; border-radius: 6px; background: #fff; padding: 0; font: inherit; }
button.pc-cell { cursor: pointer; }
button.pc-cell:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.pc-cell.pc-wrong { box-shadow: inset 0 0 0 4px var(--bad); animation: shake .34s; }
@media (max-width: 600px) { .pc-grid { width: min(42vw, 170px); } .paint-swatch { min-width: 58px; padding: 6px; } }
.kit-many-wrap { display: grid; gap: 6px; justify-items: center; }
.kit-many {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px;
  padding: 12px 14px; background: var(--paper); border: 3px solid var(--wood);
  border-radius: var(--radius); box-shadow: var(--panel-shadow); font-size: 1.9rem; line-height: 1;
}
.kit-order-item { max-width: 230px; }
.kit-slot { max-width: 230px; }
.frac-pie path { cursor: pointer; transition: fill .12s ease; }
.frac-count { font-weight: 900; color: var(--ink-soft); }

/* ---------- 42. Trạm Thống Kê (MG-21) ---------- */
.sb-chart {
  display: flex; gap: 12px; justify-content: center; align-items: flex-end; flex-wrap: wrap;
  padding: 12px; background: var(--paper); border: 3px solid var(--wood);
  border-radius: var(--radius); box-shadow: var(--panel-shadow); max-width: 100%;
}
.sb-col { display: grid; gap: 5px; justify-items: center; }
.sb-num { font-weight: 900; font-size: 1.2rem; }
.sb-cells { display: grid; gap: 3px; width: 46px; }
.sb-cell { height: 15px; border-radius: 4px; background: #f1e7d4; border: 1px solid #e0cfae; }
.sb-cell.on { background: var(--blue); border-color: var(--blue-d); }
.sb-emo { font-size: 1.8rem; line-height: 1; }
.sb-btns { display: flex; gap: 4px; }
.sb-btns .btn { min-width: 40px; padding: 4px 10px; font-size: 1.2rem; font-weight: 900; }

/* ---------- 43. Sudoku Nhí (MG-23) ---------- */
.sdk-board {
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  width: min(100%, 360px); padding: 6px; gap: 3px;
  background: var(--wood-dark); border-radius: var(--radius-sm);
  box-shadow: var(--panel-shadow);
}
.sdk-cell {
  aspect-ratio: 1 / 1; border: 0; border-radius: 6px; font: inherit; cursor: pointer;
  font-size: 1.9rem; font-weight: 900; color: var(--blue-d); background: #fff;
  display: grid; place-items: center; padding: 0; line-height: 1;
}
.sdk-board.n6 .sdk-cell { font-size: 1.45rem; }
.sdk-cell.given { background: #f3ead8; color: var(--ink); cursor: default; }
.sdk-cell.edge-r { margin-right: 4px; }
.sdk-cell.edge-b { margin-bottom: 4px; }
.sdk-cell.sel { box-shadow: inset 0 0 0 4px var(--amber); background: #fffbe6; }
.sdk-cell.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 3px var(--bad-br); }
.sdk-cell:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.sdk-palette { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sdk-pick {
  font: inherit; cursor: pointer; min-width: 60px; min-height: 60px; font-size: 1.7rem; font-weight: 900;
  border-radius: var(--radius-sm); border: 3px solid var(--wood);
  background: linear-gradient(180deg, #fff, var(--paper-2)); box-shadow: 0 4px 0 var(--wood-light);
}
.sdk-pick.erase { color: var(--ink-soft); }
.sdk-pick:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
@media (max-width: 600px) { .sdk-pick { min-width: 50px; min-height: 50px; font-size: 1.4rem; } }

/* ---------- 44. Robot Lập Trình (MG-24) ---------- */
.rb-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  width: min(100%, 340px); aspect-ratio: 1 / 1; padding: 0; gap: 0;
  border: 4px solid var(--wood); border-radius: var(--radius-sm); overflow: hidden;
  background: #f8fbff; box-shadow: var(--panel-shadow);
}
.rb-cell { display: grid; place-items: center; border: 1px solid #d0ebff; background: #f8fbff; }
.rb-cell.alt { background: #e7f5ff; }
.rb-ico { font-size: clamp(1.1rem, 6vw, 1.9rem); line-height: 1; }
.rb-bot {
  position: absolute; display: grid; place-items: center; font-size: clamp(1.2rem, 6.5vw, 2rem);
  transition: left .24s ease, top .24s ease; pointer-events: none;
}
.rb-bot.crash { animation: shake .4s; filter: grayscale(.6); }
.rb-prog {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  min-height: 52px; width: 100%; max-width: 520px; padding: 8px 10px;
  background: #212529; border-radius: var(--radius-sm); color: #fff;
}
.rb-block { background: #343a40; border: 2px solid #868e96; border-radius: 8px; padding: 3px 7px; font-weight: 900; font-size: 1.15rem; }
.rb-empty { color: #adb5bd; font-weight: 700; font-size: .9rem; }
.rb-limit { margin-left: auto; color: #ffd43b; font-weight: 900; font-size: .85rem; }
.rb-pad, .rb-loops { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rb-key { min-width: 64px; font-size: 1.6rem; }

/* ---------- 45. Khám phá: bản đồ, cây, cơ thể (MG-25 → MG-30) ---------- */
.kit-svg.vn-map { width: min(100%, 380px); aspect-ratio: 326 / 350; padding: 6px; }
.kit-svg.plant-pic { width: min(100%, 210px); aspect-ratio: 4 / 5; }
.kit-svg.body-pic { width: min(100%, 220px); aspect-ratio: 200 / 260; }

/* ---------- 46. Nhạc Viện Tí Hon (MG-31) ---------- */
.mu-piano {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px;
  width: min(100%, 560px); padding: 10px; background: #3b2f26; border-radius: var(--radius-sm);
  box-shadow: var(--panel-shadow);
}
.mu-key {
  font: inherit; cursor: pointer; height: 150px; border: 0; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #fff 70%, #f1f3f5); position: relative;
  box-shadow: inset 0 -10px 0 var(--c), 0 4px 0 #000; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px; transition: transform .06s ease;
}
.mu-key:active, .mu-key.lit { transform: translateY(3px); background: var(--c); }
.mu-key.lit .mu-key-name { color: #fff; }
.mu-key-name { font-weight: 900; font-size: .9rem; color: var(--ink); }
.mu-key:focus-visible { outline: 4px solid var(--amber); outline-offset: 2px; }
.mu-mini .mu-key { height: 90px; cursor: default; }
.mu-dots { display: flex; gap: 8px; }
.mu-dot { width: 18px; height: 18px; border-radius: 50%; background: #e9dcc3; border: 2px solid var(--wood-light); }
.mu-dot.on { background: var(--blue); border-color: var(--blue-d); }
.mu-pitch { display: grid; gap: 4px; width: min(100%, 560px); }
.mu-marks { display: grid; grid-template-columns: repeat(8, 1fr); text-align: center; font-weight: 900; font-size: 1.3rem; color: var(--blue-d); padding: 0 10px; }
.mu-tempo { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.mu-drum { display: grid; justify-items: center; gap: 6px; padding: 12px 18px; background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius); }
.mu-drum-ico { font-size: 3rem; line-height: 1; animation: drumBeat 600ms ease-in-out infinite; display: inline-block; }
@keyframes drumBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .mu-drum-ico { animation-iteration-count: 4; } }
@media (max-width: 600px) { .mu-key { height: 120px; } .mu-key-name { font-size: .72rem; } .mu-piano { gap: 3px; padding: 6px; } }

/* ---------- 47. Bé Tập Viết (MG-32) ---------- */
.wr-board {
  width: min(100%, 300px); padding: 8px; background: var(--paper);
  border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: var(--panel-shadow);
}
.wr-svg { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.wr-stroke { opacity: .45; }
.wr-stroke.now { opacity: 1; }
.wr-stroke.done { opacity: .25; }
.wr-start { fill: #adb5bd; }
.wr-stroke.now .wr-start { fill: #2f9e44; animation: wrPulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wrPulse { 50% { transform: scale(1.35); } }
.wr-demo { stroke-dasharray: 400; stroke-dashoffset: 400; animation: wrDemo 2.4s ease forwards; }
@keyframes wrDemo { to { stroke-dashoffset: 0; } }

/* ---------- 48. Tìm Điểm Khác Nhau (MG-33) ---------- */
.sd-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 100%; }
.sd-col { display: grid; gap: 6px; justify-items: center; width: min(100%, 340px); }
.sd-cap { font-weight: 900; font-size: .88rem; color: var(--ink-soft); }
.sd-pic {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border: 4px solid var(--wood); border-radius: var(--radius-sm); box-shadow: var(--panel-shadow);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
}
.sd-slot { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent; font: inherit; }
button.sd-slot { cursor: pointer; }
button.sd-slot:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.sd-obj { position: absolute; transform: translate(-50%, -50%); line-height: 1; pointer-events: none; }
.sd-slot.found::after {
  content: ''; position: absolute; inset: 8%; border: 4px solid #e03131; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8); animation: popIn .3s ease;
}
.sd-slot.miss { animation: shake .34s; }
.sd-count { font-weight: 900; color: var(--blue-d); }


/* ---------- 49. Ô Chữ Vui (MG-34) ---------- */
.ws-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; }
.ws-chip {
  display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; font-weight: 900; letter-spacing: 1px;
  background: var(--paper); border: 3px solid var(--wood-light); border-radius: 999px;
}
.ws-chip.done { border-color: var(--good); background: var(--good-bg); text-decoration: line-through; text-decoration-thickness: 3px; }
.ws-clue { font-size: 1.5rem; line-height: 1; }
.ws-board {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px;
  width: min(100%, 420px); padding: 8px; background: var(--wood); border-radius: var(--radius-sm); box-shadow: var(--panel-shadow);
}
.ws-cell {
  aspect-ratio: 1 / 1; border: 0; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; padding: 0;
  font-weight: 900; font-size: clamp(1rem, 5vw, 1.55rem); color: var(--ink);
}
.ws-cell.sel { background: #fff3bf; box-shadow: inset 0 0 0 3px var(--amber-d); }
.ws-cell.hit { background: #d3f9d8; color: var(--good); }
.ws-cell.miss { background: var(--bad-bg); animation: shake .34s; }
.ws-cell:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }

/* ---------- 50. Siêu Thị: bé đóng vai người bán (MG-07 cấp 7) ---------- */
.sell-customer {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 12px 16px; background: var(--paper); border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: var(--panel-shadow); max-width: 100%;
}
.sell-who { font-size: 3.2rem; line-height: 1; }
.sell-say { display: grid; gap: 6px; font-weight: 800; }
.tray .note.used { opacity: .3; transform: none; }

/* ---------- Tài khoản gia đình & bé tự vào trên máy mới ---------- */
.kid-login { max-width: 720px; margin: 0 auto; }
.code-input { font-size: 2rem; text-align: center; letter-spacing: .3em; text-transform: uppercase; }
.kid-login-msg { text-align: center; font-weight: 800; min-height: 1.5em; color: var(--blue-d); }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 10px 0 16px; }
.pin-dot { width: 64px; height: 64px; border-radius: 50%; border: 3px dashed var(--wood);
  display: grid; place-items: center; font-size: 2.2rem; background: #fff; }
.pin-dot.on { border-style: solid; border-color: var(--blue-d); }
.pin-grid { display: grid; grid-template-columns: repeat(3, minmax(72px, 110px)); gap: 12px; justify-content: center; }
.pin-pic { font-size: 2.8rem; min-height: 96px; border-radius: var(--radius-sm); border: 3px solid var(--wood);
  background: #fff; cursor: pointer; }
.pin-pic:active { transform: translateY(2px); border-color: var(--blue-d); }
.pin-pic:focus-visible { outline: 4px solid var(--amber); outline-offset: 2px; }
.family-code { display: grid; gap: 4px; padding: 12px 14px; margin: 10px 0; border-radius: var(--radius-sm);
  border: 3px dashed var(--wood); background: #fff; text-align: center; }
.code-big { font-size: 2.2rem; letter-spacing: .25em; font-family: Consolas, 'Courier New', monospace; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Khu phụ huynh: dashboard rõ ràng, trưởng thành ---------- */
.parent-dashboard {
  --parent-navy: #16243b;
  --parent-blue: #2563eb;
  --parent-soft: #f4f7fb;
  --parent-line: #e0e8f2;
  color: var(--parent-navy);
}
.parent-dashboard::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 9% 0%, rgba(59,130,246,.11), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 52%, #eef3f8 100%);
}
.parent-dashboard > .app-header {
  background: rgba(255,255,255,.94);
  border-color: rgba(211,222,235,.9);
  box-shadow: 0 12px 30px rgba(27,55,92,.1);
}
.parent-dashboard > .app-header .title { color: var(--parent-navy); }
.parent-dashboard .p-head {
  position: relative;
  align-items: center;
  margin: 2px 0 18px;
  padding: 13px 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--parent-line);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(27,55,92,.045);
}
.parent-dashboard .p-head > .tiny {
  color: #64748b;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.parent-dashboard .btn.chip {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 11px;
  color: #42526a;
  border-color: #d8e2ef;
  box-shadow: none;
}
.parent-dashboard .btn.chip.sel {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 7px 16px rgba(37,99,235,.22);
}
.parent-dashboard .psec {
  position: relative;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(220,229,240,.95);
  border-radius: 19px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 30px rgba(30,64,105,.055);
  backdrop-filter: blur(12px);
}
.parent-dashboard .psec h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--parent-navy);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--parent-line);
}
.parent-dashboard .psec h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-left: auto;
  border-radius: 99px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}
.parent-dashboard .trow {
  min-height: 62px;
  padding: 13px 2px;
  border-top: 1px solid #e8eef5;
}
.parent-dashboard .trow strong { color: #24324a; font-size: .96rem; }
.parent-dashboard .trow input[type=checkbox] {
  width: 22px;
  height: 22px;
  accent-color: var(--parent-blue);
}
.parent-dashboard .review-state {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: none;
}
.parent-dashboard .review-state.ok { border-color: #bbf7d0; }
.parent-dashboard .review-state.warn { border-color: #f4d38b; }
.parent-dashboard .family-code {
  border: 1px dashed #93b4ed;
  border-radius: 13px;
  background: #f5f9ff;
}
.parent-dashboard .code-big { color: #1d4ed8; font-size: 1.85rem; }
.parent-dashboard .bars {
  height: 170px;
  gap: 12px;
  padding: 20px 8px 5px;
  border-radius: 13px;
  background: linear-gradient(to top, #edf2f8 1px, transparent 1px);
  background-size: 100% 33.33%;
}
.parent-dashboard .bar {
  width: min(68%, 42px);
  border: 0;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 5px 12px rgba(37,99,235,.18);
}
.parent-dashboard .bar-val { color: #334155; }
.parent-dashboard .subj {
  padding: 15px;
  border: 1px solid #e5ebf3;
  border-radius: 14px;
  background: #fafcff;
}
.parent-dashboard .subj-head { margin-bottom: 11px; }
.parent-dashboard .subj-head strong { color: #24324a; }
.parent-dashboard .skill-row {
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  box-shadow: none;
  background: #fff;
}
.parent-dashboard .priv-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
}
.parent-dashboard .priv-col strong { color: #24324a; }
.parent-dashboard .about-row { border-bottom: 1px solid #e6edf5; }
.parent-dashboard .stage-actions { gap: 9px; }
.parent-dashboard .stage-actions .btn { min-height: 43px; border-radius: 11px; }
@media (max-width: 620px) {
  .parent-dashboard .psec { padding: 17px 15px; border-radius: 16px; }
  .parent-dashboard .p-head { align-items: flex-start; }
  .parent-dashboard .p-picker { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .parent-dashboard .p-picker .btn { white-space: nowrap; }
  .parent-dashboard .bars { height: 140px; gap: 6px; padding-inline: 2px; }
  .parent-dashboard .trow { align-items: flex-start; }
  .parent-dashboard .trow .cc-group { margin-left: auto; }
  .parent-dashboard .stage-actions .btn,
  .parent-dashboard .stage-actions a.btn { flex: 1 1 180px; }
}

/* Nội dung SEO hiện ngay trong HTML trước khi router dựng màn hình game. */
.seo-intro {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 32px));
  margin: 8vh auto 0;
  padding: clamp(22px, 4vw, 40px);
  color: #16365d;
  text-align: center;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(20,67,115,.14);
  backdrop-filter: blur(12px);
}
.seo-intro h1 {
  margin: 0 0 16px;
  color: #0b3674;
  font-size: clamp(1.65rem, 4vw, 2.55rem);
  line-height: 1.15;
}
.seo-intro p { margin: 10px 0; line-height: 1.65; }