/* Font Baloo 2 và Nunito (SIL Open Font License 1.1, tải từ Google Fonts), chép về hoc-tap/fonts/
 * để chạy offline. Cả hai là font biến thiên: mỗi tập con (subset) một file bao trọn các độ đậm.
 * Dùng URL tương đối vì trang được phục vụ cả qua http lẫn file:///android_asset/hoc-tap/. */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(../fonts/Baloo2-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(../fonts/Baloo2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(../fonts/Baloo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/Nunito-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/Nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/Nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Font Andika (SIL International, SIL Open Font License 1.1 — https://software.sil.org/andika/,
 * tải từ Google Fonts): thiết kế cho người mới tập đọc — chữ a, g một tầng như chữ viết ở trường,
 * phân biệt rõ b/d/p/q, I/l/1, đủ dấu tiếng Việt. Dùng cho NỘI DUNG bài học (đề, đáp án, gợi ý,
 * kết quả) qua biến --font-learn; khung app (header, nút, tiêu đề) vẫn dùng Baloo 2. */
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/Andika-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/Andika-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/Andika-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Andika-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Andika-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Andika-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================================
 * styles.css — HỆ THỐNG GIAO DIỆN (Design tokens theo SRS mục 7.2)
 * Phong cách cute, sáng, bo góc lớn, bóng mềm; tối ưu TV 16:9 + cảm ứng.
 * ==========================================================================*/

:root {
  /* --- Màu (SRS 7.2) --- */
  --bg: #FFF9F0;
  --blue: #53B8F5;
  --yellow: #FFD45C;
  --green: #70D6A3;
  --pink: #FF9EB5;
  --ink: #24445C;
  --ink-soft: #5A7088;
  --ink-sub: #4A5F75;    /* chữ phụ trên nền pastel (≥ 5:1), --ink-soft chỉ đạt ~4.3:1 trên pastel */
  --white: #FFFFFF;
  --blue-deep: #2A84D2;  /* nền nút chính: chữ trắng đọc được (≥ 4:1, chữ lớn) — --blue chỉ ~2.3:1 */
  --blue-edge: #1D66A8;  /* gờ dưới "đồ chơi" của nút chính */

  --radius: 1.75rem;     /* bo góc thẻ (≈26px ở 15px/rem) */
  --radius-sm: 1.2rem;
  --speed: 200ms;        /* chuyển động 150–250ms */
  --focus: #FF8A3D;      /* màu viền focus nổi bật, khác màu chủ đạo */
  --shadow: 0 .5rem 1.4rem rgba(36, 68, 92, .14);
  --shadow-lg: 0 1rem 2.4rem rgba(36, 68, 92, .20);
  --font-scale: 1;
  /* Chữ của bài học (bé đang tập đọc): Andika, thiếu glyph thì lùi về Baloo 2 */
  --font-learn: 'Andika', 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* ĐƠN VỊ GỐC (chế độ TV): 1rem = min(rộng/64, cao/36) px, tức mọi thứ tính theo rem được vẽ trên
 * một "khung thiết kế" 64rem × 36rem (16:9) rồi co vừa chiều bị giới hạn trước.
 * Vì sao không dùng vw thuần: vw chỉ bám chiều rộng nên màn thấp so với rộng (16:10 ngược lại là
 * 21:9, cửa sổ trình duyệt có thanh công cụ) bị tràn chiều cao. Với min(), nội dung vừa khung 64×36
 * thì vừa mọi tỉ lệ từ 16:10 đến 21:9 mà không cần cuộn. Thật trên TV: 960×540 CSS px -> 1rem = 15px.
 * --avail-h: chiều cao dùng được (trình duyệt trừ thanh xem thử; nhúng thì cả viewport). */
html {
  --avail-h: calc(100vh - 86px);
  font-size: calc(min(100vw / 64, var(--avail-h) / 36));
}
html.is-embedded { --avail-h: 100vh; }
/* Chế độ cảm ứng (chỉ trình duyệt): theo chiều rộng như cũ, có nhân hệ số cỡ chữ của người dùng.
 * Hệ số cỡ chữ KHÔNG áp ở chế độ TV: khung TV phải luôn vừa màn hình. */
html.touch { font-size: calc(clamp(15px, 1.55vw, 23px) * var(--font-scale)); }

body {
  margin: 0;
  font-family: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #2A3B49;              /* nền ngoài khung tối để thấy rõ letterbox TV */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============ THANH XEM THỬ ============ */
.preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 7px 14px; background: #1F2C38; color: #D7E3EE;
  font-size: 13px; font-weight: 700; /* px cố định: thanh này chiếm đúng phần 86px đã trừ khỏi khung TV */
}
.preview-title { opacity: .9; }
.preview-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preview-label { opacity: .7; margin-right: .2rem; }
.pv-btn {
  font: inherit; font-size: 13px; font-weight: 700;
  border: 2px solid #3C546A; background: #2A3B49; color: #D7E3EE;
  padding: 3px 11px; border-radius: 999px; cursor: pointer;
  transition: all var(--speed);
}
.pv-btn:hover { border-color: var(--blue); }
.pv-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pv-btn.danger.active, .pv-btn.danger:hover { border-color: #FF8A8A; color: #FFCFCF; }

/* ============ KHUNG THIẾT BỊ ============ */
.device { margin: 0 auto; background: var(--bg); position: relative; }

/* Chế độ TV 16:9: khung cố định tỷ lệ, letterbox vừa màn hình */
.device.mode-tv {
  aspect-ratio: 16 / 9;
  width: min(100vw, calc((100vh - 86px) * 16 / 9));
  max-height: calc(100vh - 86px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Hình emoji (UI.shape('emoji:…')): lấp đầy khung như hình SVG */
/* .ill.emoji-ill (2 lớp): thắng quy tắc .ill { display: block } khai báo phía dưới, nếu không emoji bị dồn góc trên trái */
.ill.emoji-ill { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: var(--emoji-size, 3.2rem); line-height: 1; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.obj { --emoji-size: 4.4rem; } .stem-ill { --emoji-size: 6rem; } .ans-ill { --emoji-size: 3.8rem; }

/* Chế độ nhúng trong app TV: bỏ thanh xem thử, khung phủ kín viewport, không viền/bo/bóng */
html.is-embedded, html.is-embedded body { height: 100%; margin: 0; overflow: hidden; }
html.is-embedded .preview-bar, html.is-embedded .remote-hint { display: none !important; }
html.is-embedded .device.mode-tv {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto;
  margin: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}

/* Chế độ cảm ứng: responsive toàn phần */
.device.mode-touch {
  width: 100%;
  min-height: calc(100vh - 86px);
}

.app {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  /* Nền: mây trắng, bong bóng, sao lấp lánh nhỏ ở mép (SVG tĩnh, không chuyển động),
     độ tương phản thấp để nội dung luôn nổi hơn */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Cg transform='translate(560 70) scale(0.62)'%3E%3Cellipse cx='0' cy='18' rx='96' ry='30'/%3E%3Ccircle cx='-42' cy='4' r='36'/%3E%3Ccircle cx='10' cy='-14' r='48'/%3E%3Ccircle cx='56' cy='8' r='30'/%3E%3C/g%3E%3Cg transform='translate(1110 62) scale(0.5)'%3E%3Cellipse cx='0' cy='18' rx='96' ry='30'/%3E%3Ccircle cx='-42' cy='4' r='36'/%3E%3Ccircle cx='10' cy='-14' r='48'/%3E%3Ccircle cx='56' cy='8' r='30'/%3E%3C/g%3E%3Cg transform='translate(1450 842) scale(0.95)'%3E%3Cellipse cx='0' cy='18' rx='96' ry='30'/%3E%3Ccircle cx='-42' cy='4' r='36'/%3E%3Ccircle cx='10' cy='-14' r='48'/%3E%3Ccircle cx='56' cy='8' r='30'/%3E%3C/g%3E%3Cg transform='translate(110 866) scale(0.75)'%3E%3Cellipse cx='0' cy='18' rx='96' ry='30'/%3E%3Ccircle cx='-42' cy='4' r='36'/%3E%3Ccircle cx='10' cy='-14' r='48'/%3E%3Ccircle cx='56' cy='8' r='30'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke-width='4' opacity='.75'%3E%3Ccircle cx='34' cy='420' r='22' stroke='%23BFE3FB'/%3E%3Ccircle cx='70' cy='478' r='10' stroke='%23FFC4D3'/%3E%3Ccircle cx='1572' cy='300' r='20' stroke='%23BDEBD3'/%3E%3Ccircle cx='1540' cy='350' r='9' stroke='%23FFDD7F'/%3E%3Ccircle cx='760' cy='878' r='14' stroke='%23D9CAFB'/%3E%3Ccircle cx='1586' cy='760' r='12' stroke='%23FFC4D3'/%3E%3C/g%3E%3Cg fill='%23FFD45C' opacity='.7'%3E%3Cpath transform='translate(30 230)' d='M0 -13C1.6 -3 3 -1.6 13 0C3 1.6 1.6 3 0 13C-1.6 3 -3 1.6 -13 0C-3 -1.6 -1.6 -3 0 -13Z'/%3E%3Cpath transform='translate(1572 600) scale(.8)' d='M0 -13C1.6 -3 3 -1.6 13 0C3 1.6 1.6 3 0 13C-1.6 3 -3 1.6 -13 0C-3 -1.6 -1.6 -3 0 -13Z'/%3E%3Cpath transform='translate(1574 170) scale(.7)' d='M0 -13C1.6 -3 3 -1.6 13 0C3 1.6 1.6 3 0 13C-1.6 3 -3 1.6 -13 0C-3 -1.6 -1.6 -3 0 -13Z'/%3E%3Cpath transform='translate(1000 880) scale(.9)' d='M0 -13C1.6 -3 3 -1.6 13 0C3 1.6 1.6 3 0 13C-1.6 3 -3 1.6 -13 0C-3 -1.6 -1.6 -3 0 -13Z'/%3E%3Cpath transform='translate(46 700) scale(.6)' d='M0 -13C1.6 -3 3 -1.6 13 0C3 1.6 1.6 3 0 13C-1.6 3 -3 1.6 -13 0C-3 -1.6 -1.6 -3 0 -13Z'/%3E%3C/g%3E%3C/svg%3E") center top / 100% auto no-repeat,
    radial-gradient(60% 55% at 12% -6%, #FFF0D6 0%, transparent 62%),
    radial-gradient(50% 60% at 100% 0%, #E3F3FF 0%, transparent 58%),
    radial-gradient(45% 50% at 0% 100%, #FDEBF1 0%, transparent 60%),
    radial-gradient(45% 55% at 100% 100%, #E6F8EF 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
.device.mode-touch .app { height: auto; min-height: calc(100vh - 86px); overflow: visible; }

/* ============ HEADER ============ */
.app-header {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .6rem; padding: .7rem 1.6rem; /* lề an toàn tránh overscan */
}
.hdr-slot { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hdr-left { justify-content: flex-start; }
.hdr-title { justify-content: center; }
.hdr-right { justify-content: flex-end; }
.hdr-title-text { font-weight: 800; font-size: 1.15rem; color: var(--ink-soft); }
.hdr-logo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: 1.15rem; color: var(--blue); }
.hdr-logo .ill { width: 1.6rem; height: 1.6rem; }
.hdr-avatar { width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover; border: .15rem solid #fff; box-shadow: 0 .15rem .4rem rgba(42, 132, 210, .3); }
.hdr-btn {
  font: inherit; font-weight: 700; font-size: .92rem;
  border: none; background: var(--white); color: var(--ink);
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 .2rem 0 rgba(36, 68, 92, .10), var(--shadow); transition: transform var(--speed);
  white-space: nowrap;
}

/* ============ VÙNG NỘI DUNG ============ */
.app-root { flex: 1 1 auto; overflow-y: auto; padding: .4rem 1.8rem 1.4rem; }
.device.mode-touch .app-root { overflow-y: visible; }
.screen { animation: fadeIn var(--speed) ease both; max-width: 1400px; margin: 0 auto; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.screen-title { font-size: 2rem; margin: .2rem 0; font-weight: 800; }
.screen-title.small { font-size: 1.5rem; }
.screen-lead { font-size: 1.15rem; color: var(--ink-soft); margin: .2rem 0 1rem; }
.section-label { font-size: 1.15rem; color: var(--ink-soft); margin: .4rem 0 .6rem; font-weight: 700; }

/* ============ NÚT CHUNG ============ */
.btn {
  font: inherit; font-weight: 800; border: none; cursor: pointer;
  border-radius: var(--radius-sm); padding: .7rem 1.3rem; font-size: 1.05rem;
  background: var(--white); color: var(--ink); box-shadow: 0 .22rem 0 rgba(36, 68, 92, .12), var(--shadow);
  transition: transform var(--speed);
}
.btn.primary { background: var(--blue-deep); color: #fff; box-shadow: 0 .3rem 0 var(--blue-edge), var(--shadow); }
.btn.soft { background: #FFF; color: var(--ink); }
.btn.ghost { background: rgba(255, 255, 255, .6); color: var(--ink-soft); box-shadow: none; }
.btn.big { padding: .9rem 1.6rem; font-size: 1.2rem; }
.btn.block { display: block; width: 100%; margin: .5rem 0; text-align: center; }
.btn.soft.block { background: #F3F8FC; }

/* ============ TRẠNG THÁI FOCUS (SRS 7.4 — viền dày, không chỉ dựa màu) ===== */
.is-focused {
  outline: none;
  /* Viền cam dày + quầng sáng cam mềm: nhìn rõ từ 3 m. Không có transition cho box-shadow
     (vẽ lại tốn trên TV) — viền hiện ngay, chỉ phần nhấc lên (transform) là chuyển động. */
  box-shadow: 0 0 0 .22rem var(--white), 0 0 0 .5rem var(--focus), 0 .6rem 1.8rem rgba(255, 138, 61, .45) !important;
  transform: translateY(-3px) scale(1.04);
  z-index: 5;
}
.hdr-btn.is-focused, .btn.is-focused { transform: translateY(-2px) scale(1.06); }
.answer-option.is-focused { transform: translateY(-.35rem) scale(1.05); }
/* Nút trải hết bề ngang (hộp thoại, khu phụ huynh): phóng ít hơn để không lòi ra khỏi khung */
.btn.block.is-focused, .dialog-actions .btn.is-focused { transform: translateY(-2px) scale(1.02); }

/* ============ HÌNH MINH HOẠ ============ */
.ill { display: block; width: 100%; height: 100%; }
.avatar-svg { width: 100%; height: 100%; }
.mascot { width: 7rem; height: 7.6rem; filter: drop-shadow(0 .4rem .5rem rgba(243, 183, 51, .4)); }
.mascot.small { width: 3.4rem; height: 3.7rem; }
.mascot.cheer { width: 9rem; height: 9.8rem; animation: bob 1.6s ease-in-out infinite; }
.mascot.wave { width: 6rem; height: 6.6rem; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* Sao thưởng */
.star-row { display: inline-flex; gap: .25rem; }
.star-slot { width: 1.8rem; height: 1.8rem; display: inline-block; }
.star-slot.off { filter: grayscale(1); opacity: .32; }
.result-stars.big .star-slot { width: 4.6rem; height: 4.6rem; }
.result-stars.big .star-row { gap: .6rem; align-items: flex-end; }
/* Ngôi sao giữa to hơn, như bục nhận giải */
.result-stars.big .star-slot:nth-child(2) { width: 5.6rem; height: 5.6rem; }
.result-stars.big .star-slot.on { animation: pop .5s ease both; }
.result-stars.big .star-slot:nth-child(2) { animation-delay: .15s; }
.result-stars.big .star-slot:nth-child(3) { animation-delay: .3s; }
@keyframes pop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ============ S01 — CHỌN HỒ SƠ ============ */
.screen-profiles { text-align: center; }
.welcome-head { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.profile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 1.2rem; }
.profile-card {
  --pc-bg: #FFE3EC; --pc-line: #FFC2D2; --pc-edge: #F29AB3;
  font: inherit; cursor: pointer; color: var(--ink); background: var(--pc-bg);
  width: 11rem; padding: 1.2rem 1rem; border-radius: var(--radius);
  border: .2rem solid var(--pc-line); border-bottom: .5rem solid var(--pc-edge);
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: .4rem;
  transition: transform var(--speed);
}
/* Mỗi bé một màu pastel (cùng bảng màu với ô đáp án) */
.profile-card:nth-child(4n+2) { --pc-bg: #DAF6EA; --pc-line: #A9E5C9; --pc-edge: #63C89D; }
.profile-card:nth-child(4n+3) { --pc-bg: #DDF0FF; --pc-line: #B0D9F8; --pc-edge: #72B6EA; }
.profile-card:nth-child(4n+4) { --pc-bg: #FFF4C7; --pc-line: #FFE28C; --pc-edge: #EBC03A; }
.profile-avatar { flex: 0 0 auto; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: #fff; padding: .4rem;
  box-shadow: inset 0 -.3rem 0 rgba(36, 68, 92, .06); }
/* Ảnh thật của bé: tròn, cắt vừa khung (ảnh không vuông vẫn không méo) */
.avatar-photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #EEF3F8; }
/* Tên dài (bố mẹ gõ tới 30 ký tự): tối đa 2 dòng rồi ba chấm */
.profile-name { font-weight: 800; font-size: 1.3rem; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.profile-years { font-size: 1.05rem; font-weight: 800; color: var(--ink-sub); line-height: 1.2; }
.profile-age { font-size: .9rem; color: var(--ink-sub); background: rgba(255, 255, 255, .8); padding: .15rem .7rem; border-radius: 999px; white-space: nowrap; }

/* ============ S02 — TRANG CHỦ ============ */
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.hero-text { flex: 1 1 auto; }
.hero-mascot { flex: 0 0 auto; }
/* Nút lớp đang học (mở hộp chọn lớp) — to, rõ, nằm cạnh lời chào */
.grade-chip {
  flex: 0 0 auto; font: inherit; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1.2rem .45rem .8rem; border-radius: 999px;
  border: .2rem solid var(--yellow); border-bottom: .45rem solid #E3B02A; background: #FFF6D2;
  box-shadow: var(--shadow);
  transition: transform var(--speed);
}
.grade-chip-icon { font-size: 2.2rem; line-height: 1; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.grade-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.grade-chip-name { font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.grade-chip-edit { font-size: .85rem; font-weight: 800; color: #8A5E00; }
.wave { display: inline-block; animation: bob 2s ease-in-out infinite; }
.subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card {
  font: inherit; cursor: pointer; border: none; text-align: left; color: var(--ink);
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform var(--speed);
}
/* Thẻ môn: nền pastel theo màu môn, viền dày, gờ dưới đậm như nút đồ chơi; hình emoji to
   trong một "đĩa" trắng. Biến --card-* do UI.tintVars() tính sẵn (không cần color-mix). */
.subject-card {
  padding: 1rem 1.1rem; display: flex; flex-direction: row; align-items: center; gap: 1rem;
  background: var(--card-tint, #fff);
  border: .22rem solid var(--card-soft, #E6ECF2); border-bottom: .55rem solid var(--card-edge, var(--blue));
}
.card-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.card-ill {
  flex: 0 0 auto; width: 4.6rem; height: 4.6rem; border-radius: 1.35rem;
  background: var(--card-tint, #EEF6FC);
  padding: .5rem;
}
.subject-card .card-ill {
  width: 5.8rem; height: 5.8rem; border-radius: 50%; background: #fff; padding: 0;
  --emoji-size: 3.9rem; box-shadow: inset 0 -.35rem 0 rgba(36, 68, 92, .06), 0 .2rem .5rem rgba(36, 68, 92, .08);
}
.card-ill.small { width: 3.8rem; height: 3.8rem; }
.card-title { font-weight: 800; font-size: 1.3rem; line-height: 1.25; }
.card-sub { font-size: .95rem; color: var(--ink-sub); line-height: 1.35; }

/* ============ S03 — DANH SÁCH BÀI HỌC ============ */
.lessons-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.subject-chip { flex: 0 0 auto; width: 4.6rem; height: 4.6rem; border-radius: 50%; padding: 0; --emoji-size: 3.2rem;
  background: var(--card-tint, #fff); border: .2rem solid var(--card-soft, #E6ECF2); border-bottom-width: .4rem;
  border-bottom-color: var(--card-edge, var(--blue)); box-shadow: var(--shadow); }
.lesson-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.lesson-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem;
  background: var(--card-wash, #fff);
  border: .2rem solid var(--card-soft, #E6ECF2); border-bottom: .5rem solid var(--card-edge, var(--blue));
}
.lesson-card .card-ill { flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: 50%; background: #fff; --emoji-size: 3.4rem;
  box-shadow: inset 0 0 0 .2rem var(--card-tint, #EEF6FC); }
.lesson-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.lesson-meta { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.level { font-size: .82rem; font-weight: 800; padding: .12rem .7rem; border-radius: 999px; }
.level-de, .level { background: #E3F6EC; color: #1C7A4F; }
.level-vua { background: #FFF2D6; color: #8A5B00; }
.level-kho { background: #FFE6EC; color: #A8355A; }
.badge { font-size: .8rem; font-weight: 800; padding: .12rem .7rem; border-radius: 999px; }
.badge-new { background: #E7F3FF; color: #1F6AAE; }
.badge-done { background: #E3F6EC; color: #1C7A4F; }
.badge-lock { background: #EDEFF2; color: #8A97A6; }
.lesson-stars { margin-top: .3rem; }
.lesson-card.is-locked { opacity: .62; cursor: default; filter: saturate(.6); }
.lesson-card.is-done { background: #F4FCF7; }
/* Nhiều bài (> 4): thẻ dọc gọn, 4 cột — tên/mô tả cắt ở 2 dòng để thẻ đều nhau */
.lesson-list.dense { grid-template-columns: repeat(4, 1fr); }
.lesson-list.dense .lesson-card { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .8rem .9rem; }
.lesson-list.dense .lesson-info { width: 100%; }
.lesson-list.dense .card-title, .lesson-list.dense .card-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lesson-list.dense .card-title { font-size: 1.12rem; line-height: 1.25; }
.lesson-list.dense .card-sub { font-size: .9rem; line-height: 1.3; -webkit-line-clamp: 1; }
.empty-note { grid-column: 1/-1; text-align: center; padding: 2rem; color: var(--ink-soft); font-weight: 700; }

/* ============ S04/S05 — BÀI TẬP ============ */
.quiz-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.pause-btn { flex: 0 0 auto; }
.quiz-top .btn { flex: 0 0 auto; }
.mode-touch .quiz-top { flex-wrap: wrap; }
.mode-touch .quiz-top .progress { flex: 1 1 12rem; }

/* Tiến độ dạng con đường: vạch đường + mỗi câu một trạm (sao vàng = xong, bạn Sao = đang làm) */
.progress-path { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; height: 2.8rem; }
.path-road { position: relative; flex: 1 1 auto; height: 100%; min-width: 0; }
/* Đường chạy từ tâm trạm đầu tới tâm trạm cuối (trạm rộng 2.4rem -> lề 1.2rem) */
.path-track { position: absolute; left: 1.2rem; right: 1.2rem; top: 50%; height: .6rem; margin-top: -.3rem;
  border-radius: 999px; background: #E4EBF2; box-shadow: inset 0 .12rem .2rem rgba(36, 68, 92, .12); }
.path-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFD45C, #FFB547); }
.path-stops { position: relative; list-style: none; margin: 0; padding: 0; height: 100%;
  display: flex; align-items: center; justify-content: space-between; }
.path-stop { position: relative; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; }
.path-num { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #fff; border: .18rem solid #D3DDE7;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--ink-sub); line-height: 1; }
.path-stop.done .ill { width: 2.1rem; height: 2.1rem; }
/* Trạm hiện tại: quầng sáng vàng tĩnh + bạn Sao to hơn, nhún nhẹ */
.path-stop.current::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 212, 92, .75) 0%, rgba(255, 212, 92, .3) 45%, rgba(255, 212, 92, 0) 70%); }
.path-stop.current .path-mascot { position: relative; width: 3rem; height: 3.25rem; margin-top: -.4rem; filter: none;
  animation: bob 2s ease-in-out infinite; }
.progress-label { flex: 0 0 auto; font-size: .95rem; font-weight: 800; color: var(--ink-sub);
  background: rgba(255, 255, 255, .85); border-radius: 999px; padding: .15rem .65rem; white-space: nowrap; }

.question-panel {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  border-bottom: .4rem solid #EDE4D3;
  padding: 1.2rem 1.4rem; text-align: center;
}
.q-prompt-row { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.q-prompt { font-family: var(--font-learn); font-size: 1.7rem; font-weight: 700; margin: .2rem 0 .6rem; line-height: 1.3; }
.q-stage { display: flex; justify-content: center; align-items: center; margin: .2rem auto .8rem; }
.count-stage { background: linear-gradient(180deg, #EAF6FF, #F6FBFF); border-radius: var(--radius-sm); padding: 1rem; width: 100%;
  box-shadow: inset 0 0 0 .18rem #DCEEFC; }
.object-field { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: center; align-items: center; }
.obj { width: 5.2rem; height: 5.2rem; display: inline-flex; animation: floaty 3s ease-in-out infinite; }
.object-field.two-rows { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: .5rem 1.2rem; justify-content: center; }
.obj:nth-child(even) { animation-delay: .4s; }
.obj:nth-child(3n) { animation-delay: .8s; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0)); } 50% { transform: translateY(-5px) rotate(var(--r,0)); } }
/* Hình đề đặt trên một "đĩa" pastel tròn cho nổi */
.stem-ill { width: 7rem; height: 7rem; }
.qp-stem .q-stage { background: radial-gradient(circle closest-side, #FFEDBE 0%, #FFF5D9 62%, rgba(255, 245, 217, 0) 100%); }
.stem-swatch { width: 7rem; height: 7rem; border-radius: 1.45rem; box-shadow: inset 0 0 0 .3rem rgba(255,255,255,.6), var(--shadow); }

/* --- Ô đáp án: mỗi vị trí một màu pastel (1 hồng · 2 bạc hà · 3 xanh trời · 4 vàng chanh),
 *     viền dày, gờ dưới đậm như nút đồ chơi, số thứ tự cùng tông đậm.
 *     Bảng màu (nền / viền / gờ / số):
 *       1 #FFE3EC / #FFB8CB / #F28DAA / #C2365F
 *       2 #DAF6EA / #9EE2C3 / #5CC499 / #1A7F57
 *       3 #DDF0FF / #A6D4F7 / #68B1E8 / #2A78C2
 *       4 #FFF4C7 / #FFDE7A / #E9BB2C / #8F6300
 *     Chữ đáp án (--ink #24445C) trên mọi nền ≥ 8.4:1; số trắng trên nền số ≥ 4.6:1. */
.answer-grid { display: grid; gap: 1rem; margin: .4rem auto 0; max-width: 65rem; }
.answer-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.answer-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.answer-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.answer-option {
  --opt-bg: #FFE3EC; --opt-line: #FFB8CB; --opt-edge: #F28DAA; --opt-badge: #C2365F;
  position: relative; font: inherit; cursor: pointer; color: var(--ink);
  background: var(--opt-bg); border: .22rem solid var(--opt-line); border-bottom: .55rem solid var(--opt-edge);
  border-radius: 1.4rem; padding: 1rem;
  min-height: 7rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .4rem .9rem rgba(36, 68, 92, .10);
  transition: transform var(--speed), opacity var(--speed);
}
.answer-option:nth-child(2) { --opt-bg: #DAF6EA; --opt-line: #9EE2C3; --opt-edge: #5CC499; --opt-badge: #1A7F57; }
.answer-option:nth-child(3) { --opt-bg: #DDF0FF; --opt-line: #A6D4F7; --opt-edge: #68B1E8; --opt-badge: #2A78C2; }
.answer-option:nth-child(4) { --opt-bg: #FFF4C7; --opt-line: #FFDE7A; --opt-edge: #E9BB2C; --opt-badge: #8F6300; }
.ans-inner { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ans-number { font-family: var(--font-learn); font-size: 3.4rem; font-weight: 700; color: var(--ink); line-height: 1; }
.ans-ill { width: 4.4rem; height: 4.4rem; }
.ans-swatch { width: 3.4rem; height: 3.4rem; border-radius: .9rem; box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.6), 0 .15rem .4rem rgba(36, 68, 92, .15); }
.ans-text { font-family: var(--font-learn); font-size: 1.3rem; font-weight: 700; }
.ans-text.big { font-size: 2.6rem; }
.ans-text.big.long { font-size: 1.9rem; line-height: 1.15; }
.ans-text.big.long2 { font-size: 1.5rem; line-height: 1.15; }
/* Số thứ tự đáp án: hình tròn đặc tông đậm của ô, viền trắng — khác hẳn kiểu chữ của đáp án */
.ans-num {
  position: absolute; top: .45rem; left: .45rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--opt-badge); color: #fff; font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800;
  font-size: 1.35rem; line-height: 1; box-shadow: 0 0 0 .18rem #fff, 0 .15rem .4rem rgba(36, 68, 92, .25);
}
/* Ô đang chọn: nhấc lên + nảy nhẹ một lần; viền cam + quầng cam lấy từ .is-focused */
.answer-option.is-focused { animation: focusHop .38s ease-out; }
.answer-option.is-focused .ans-num { background: #E0560B; }
@keyframes focusHop { 0% { transform: none; } 60% { transform: translateY(-.6rem) scale(1.07); } 100% { transform: translateY(-.35rem) scale(1.05); } }
.answer-option[aria-disabled="true"]:not(.is-correct) .ans-num { opacity: .45; }
.ans-mark { position: absolute; top: .4rem; right: .45rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; opacity: 0;
  display: flex; align-items: center; justify-content: center; transition: opacity var(--speed); }
/* ĐÚNG: xanh lá đậm, dấu ✓ vẽ bằng CSS (không phụ thuộc font), lấn át màu pastel */
.answer-option.is-correct { --opt-bg: #E2FAEC; --opt-line: #2DB56E; --opt-edge: #1F9157; --opt-badge: #1B8F55;
  box-shadow: 0 0 0 .35rem rgba(45, 181, 110, .28), 0 .4rem .9rem rgba(36, 68, 92, .10); animation: correctPop .45s ease-out; }
.answer-option.is-correct .ans-mark { opacity: 1; background: #1B8F55; box-shadow: 0 0 0 .18rem #fff; }
.answer-option.is-correct .ans-mark::after { content: ''; width: .6rem; height: 1.1rem; margin-top: -.25rem;
  border: solid #fff; border-width: 0 .3rem .3rem 0; transform: rotate(45deg); }
@keyframes correctPop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1.03); } }
.answer-grid.is-solved .answer-option.is-correct { transform: scale(1.03); }
/* SAI: xám nhạt + lắc nhẹ, nội dung mờ đi (không dùng màu đỏ, không lời tiêu cực) */
.answer-option.is-wrong { --opt-bg: #F1F3F6; --opt-line: #D6DDE5; --opt-edge: #BAC4CF; --opt-badge: #6E7C8C;
  box-shadow: none; animation: nudge .35s; }
.answer-option.is-wrong .ans-inner { opacity: .45; }
.answer-option.is-wrong .ans-mark { opacity: 1; background: #fff; box-shadow: 0 0 0 .18rem #D6DDE5; }
.answer-option.is-wrong .ans-mark::after { content: '🔁'; font-size: 1.3rem; line-height: 1; }
/* Đã giải xong: các ô còn lại lùi xuống để ô đúng nổi bật */
.answer-grid.is-solved .answer-option:not(.is-correct) { opacity: .45; }
.answer-option[aria-disabled="true"] { cursor: default; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.q-tools { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }

/* Phản hồi: chữ to, bạn Sao nhảy cẫng lên (2 lần, không lặp mãi), nút "Câu tiếp theo" to */
.feedback { display: none; margin-top: 1rem; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; font-size: 1.3rem; font-weight: 800; }
.feedback.show { display: flex; animation: fadeIn var(--speed) both; }
.feedback .fb-emoji { font-size: 2.6rem; line-height: 1; }
.feedback .fb-text { font-family: var(--font-learn); font-weight: 700; }
.feedback.good .fb-text { color: #1B8350; font-size: 2.3rem; line-height: 1.15; }
.feedback.bad .fb-text { color: #B83A64; font-size: 1.8rem; line-height: 1.2; }
.feedback.hint .fb-text { color: #8F5F00; font-size: 1.15rem; line-height: 1.35; }
.fb-mascot { display: inline-flex; }
.fb-star { width: 3.4rem; height: 3.7rem; filter: none; animation: cheerJump .55s ease-out 2; }
@keyframes cheerJump { 0%,100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-.9rem) rotate(-8deg) scale(1.08); } 70% { transform: translateY(-.2rem) rotate(6deg); } }
.next-btn { margin-left: .4rem; }
.btn.next-btn { font-size: 1.45rem; padding: .6rem 1.8rem; border-radius: 999px; }

/* ============ S06 — KẾT QUẢ ============ */
.screen-result { text-align: center; }
.result-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.6rem; max-width: 50rem; margin: .4rem auto;
  border: .22rem solid #FFE7A3; border-bottom: .55rem solid #F1C64A; }
/* Bạn Sao đứng giữa vầng sáng vàng */
.result-mascot { position: relative; display: inline-block; }
.result-mascot::before { content: ''; position: absolute; left: 50%; top: 45%; width: 150%; height: 150%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 212, 92, .55) 0%, rgba(255, 212, 92, .18) 45%, rgba(255, 212, 92, 0) 70%); }
.result-mascot .mascot { position: relative; }
.result-title { font-family: var(--font-learn); font-weight: 700; font-size: 2rem; margin: .4rem 0; }
.result-stars.big { margin: .6rem 0; }
.result-score { font-family: var(--font-learn); font-size: 1.25rem; color: var(--ink-soft); }
.result-yt { font-size: 1.2rem; font-weight: 800; color: #1B7F3B; margin: .6rem 0 0; }
.result-score b { color: var(--ink); }
.result-yt.locked { color: var(--ink-soft); font-weight: 700; }
.btn.yt { background: #E53935; color: #fff; box-shadow: 0 .3rem 0 #A82522, var(--shadow); }
.result-actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }

/* ============ XEM YOUTUBE — CHỌN CHỦ ĐỀ ============ */
.topics-head { text-align: center; margin-bottom: 1rem; }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.topic-card { --tc-bg: #FFE3EC; --tc-line: #FFC2D2; --tc-edge: #F29AB3;
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .9rem .6rem .8rem; text-align: center;
  background: var(--tc-bg); border: .2rem solid var(--tc-line); border-bottom: .5rem solid var(--tc-edge); }
/* Cùng bảng pastel với ô đáp án: hồng · bạc hà · xanh trời · vàng chanh (lặp lại ở hàng 2, lệch 2 để không trùng cột) */
.topic-card:nth-child(8n+2), .topic-card:nth-child(8n+8) { --tc-bg: #DAF6EA; --tc-line: #A9E5C9; --tc-edge: #63C89D; }
.topic-card:nth-child(8n+3), .topic-card:nth-child(8n+5) { --tc-bg: #DDF0FF; --tc-line: #B0D9F8; --tc-edge: #72B6EA; }
.topic-card:nth-child(8n+4), .topic-card:nth-child(8n+6) { --tc-bg: #FFF4C7; --tc-line: #FFE28C; --tc-edge: #EBC03A; }
.topic-card:nth-child(8n+7) { --tc-bg: #FFE3EC; --tc-line: #FFC2D2; --tc-edge: #F29AB3; }
.topic-img { width: 7rem; height: 7rem; display: block; }
.topic-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topic-label { font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.screen-topics-locked { text-align: center; }
.topics-locked .result-title { font-size: 1.9rem; }

/* ============ S07 — PHỤ HUYNH ============ */
.parent-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem minmax(0, 1.12fr); gap: 1.2rem; }
.panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
.panel h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.panel h3 { margin: 1rem 0 .4rem; font-size: 1.05rem; color: var(--ink-soft); }
.stat-row { display: flex; gap: 1rem; }
.stat { flex: 1; background: #F3F9FD; border-radius: var(--radius-sm); padding: 1rem; text-align: center; }
.stat-num { display: block; font-size: 2.4rem; font-weight: 800; color: var(--blue); }
.stat-lbl { font-size: .9rem; color: var(--ink-soft); }
.hist-list { list-style: none; margin: 0; padding: 0; }
.hist-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed #E6ECF2; }
.hist-name { font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hist-date { color: var(--ink-soft); font-size: .9rem; }
.hist-empty { color: var(--ink-soft); padding: .6rem 0; }
.privacy-note { font-size: .85rem; color: var(--ink-soft); background: #F3F9FD; border-radius: .95rem; padding: .6rem .8rem; margin-top: .8rem; }
/* Hồ sơ các con: mã QR bên trái, lời dặn + địa chỉ bên phải, danh sách bé bên dưới */
.qr-row { display: flex; align-items: flex-start; gap: .8rem; }
/* Mã QR: nền trắng, ô đen, lề trắng 4 ô có sẵn trong SVG; 10rem ≈ 19 cm trên TV 55" — quét được từ ~1 m */
.qr-box { flex: 0 0 auto; width: 10rem; height: 10rem; background: #fff; border-radius: .4rem;
  box-shadow: 0 0 0 .12rem #E6ECF2; }
.qr-box svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.qr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .8rem;
  text-align: center; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--ink-soft);
  background: #F3F9FD; border: .15rem dashed #C9D8E6; box-shadow: none; }
.qr-empty-icon { font-size: 2.4rem; line-height: 1; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.qr-text { flex: 1 1 auto; min-width: 0; }
.qr-lead { margin: 0; font-size: .95rem; line-height: 1.35; font-weight: 700; color: var(--ink); }
.qr-url { margin: .5rem 0 0; font-size: .72rem; line-height: 1.3; color: var(--ink-soft); word-break: break-all; }
.kid-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.kid-item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.kid-avatar { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #F3F9FD; }
.kid-avatar .avatar-svg { display: block; width: 100%; height: 100%; }
.kid-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.kid-name { font-weight: 800; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-age { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }

/* ============ S08 — CÀI ĐẶT ============ */
.settings-panel { max-width: 54rem; margin: 0 auto; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed #E6ECF2; flex-wrap: wrap; }
.set-label { font-weight: 700; font-size: 1.1rem; }
.toggle {
  position: relative; font: inherit; cursor: pointer; border: none;
  width: 8rem; height: 2.7rem; background: #E6ECF2; color: var(--ink);
  border-radius: 999px; transition: background var(--speed);
}
.toggle .knob { position: absolute; top: .45rem; left: .45rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: left var(--speed); }
.toggle .toggle-text { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-weight: 800; }
.toggle.on { background: var(--green); color: #fff; }
.toggle.on .knob { left: calc(100% - 2.25rem); }
.toggle.on .toggle-text { left: 1rem; }
.toggle.off .knob { left: .45rem; }
.toggle.off .toggle-text { right: 1rem; }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { font: inherit; cursor: pointer; border: .15rem solid #E6ECF2; background: #fff; color: var(--ink); font-weight: 800; padding: .45rem 1rem; border-radius: 999px; transition: all var(--speed); }
.chip.sel { background: var(--blue); border-color: var(--blue); color: #fff; }
.set-group-title { font-size: 1.15rem; margin: 1.2rem 0 .2rem; color: var(--blue); border-top: 1px dashed #E6ECF2; padding-top: 1rem; }
.voice-note { font-size: .9rem; color: var(--ink-soft); margin-top: 1rem; background: #F3F9FD; border-radius: .95rem; padding: .6rem .8rem; line-height: 1.5; }

/* ============ S09 — HỘP THOẠI ============ */
.dialog-layer { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(36, 68, 92, .62); z-index: 50; padding: 1rem; }
.dialog-layer.show { display: flex; animation: fadeIn var(--speed) both; }
.dialog { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.6rem 1.8rem; max-width: 41rem; width: 100%; text-align: center; animation: pop .3s ease both;
  border-bottom: .5rem solid #E7DCC8; }
.dialog h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.dialog p { color: var(--ink-soft); font-size: 1.1rem; margin: .3rem 0; }
.dialog-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; align-items: stretch; }
.dialog-actions .btn { width: 100%; }
/* Hộp chọn lớp: mỗi nhóm (Mầm non / Tiểu học / THCS) một hàng nút to, bấm D-pad dễ */
.grade-dialog { max-width: 56rem; }
.grade-groups { display: flex; flex-direction: column; gap: .8rem; margin: .9rem 0 1rem; }
.grade-group { display: grid; grid-template-columns: 6.6rem 1fr; align-items: center; gap: .8rem; text-align: left; }
.grade-group-name { font-weight: 800; font-size: 1.05rem; color: var(--ink-soft); }
.grade-row { display: flex; gap: .7rem; }
.grade-opt {
  flex: 1 1 0; min-width: 0; font: inherit; cursor: pointer; color: var(--ink);
  border: .2rem solid #DCE6EF; border-bottom: .42rem solid #C3D3E1; background: #F6FAFD; border-radius: var(--radius-sm);
  padding: .45rem .4rem; display: flex; flex-direction: column; align-items: center;
  transition: transform var(--speed);
}
.grade-opt-name { font-weight: 800; font-size: 1.3rem; line-height: 1.25; white-space: nowrap; }
.grade-opt-age { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.grade-opt.sel { background: var(--blue-deep); border-color: var(--blue-deep); border-bottom-color: var(--blue-edge); color: #fff; }
.grade-opt.sel .grade-opt-age { color: #fff; }
.gate-sum { font-size: 2.2rem; font-weight: 800; color: var(--ink); margin: .6rem 0; }
.gate-opts { display: flex; gap: .8rem; justify-content: center; margin: .8rem 0; }
.gate-opt { font: inherit; cursor: pointer; border: .2rem solid #E6ECF2; background: #fff; color: var(--ink); font-size: 2rem; font-weight: 800; width: 5rem; height: 5rem; border-radius: 1.35rem; transition: all var(--speed); }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } }

/* ============ HIỆU ỨNG ============ */
.pop-star { position: fixed; font-size: 1.6rem; pointer-events: none; z-index: 80; animation: popstar .9s ease-out forwards; }
@keyframes popstar { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); opacity: 0; } }
.confetti { position: fixed; top: -1.4rem; width: .8rem; height: 1.1rem; border-radius: .2rem; pointer-events: none; z-index: 70; animation: fall 2.4s linear forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: .9; } }

/* ============================================================================
 * CHẾ ĐỘ TV — MỌI MÀN HÌNH VỪA KHUNG 64rem × 36rem, KHÔNG CUỘN, KHÔNG CẮT
 * Ngân sách chiều cao (rem): header ≈3.3 + lề trên/dưới 2 -> nội dung còn ≈30.7.
 * Màn nào lệch thì sửa ở đây, đo lại bằng 960×540 (1rem = 15px). Không có giá trị px cố định:
 * tất cả theo rem nên co cùng tỉ lệ với đơn vị gốc ở đầu file. Chỉ áp cho .mode-tv; chế độ cảm ứng
 * (cuộn dọc) giữ nguyên.
 * ==========================================================================*/
.device.mode-tv .app-header { padding: .5rem 2.4rem; }
/* Lề ngang 2.4rem ≈ 36px (lề an toàn overscan) và chừa chỗ cho viền focus + phóng to (~1rem) */
.device.mode-tv .app-root { display: flex; flex-direction: column; padding: 1rem 2.4rem; }
/* Màn hình canh giữa theo chiều dọc: khung 16:10 còn dư chiều cao thì dư đều hai bên; nếu nội dung
 * cao hơn vùng chứa thì margin auto về 0 và app-root cuộn (lưới an toàn, không cắt đầu trang) */
.device.mode-tv .screen { flex: 0 0 auto; width: 100%; max-width: none; margin: auto 0; }
.device.mode-tv .screen-title { margin: .1rem 0; }
.device.mode-tv .screen-lead { margin: .1rem 0 .5rem; }

/* --- Hồ sơ --- */
.device.mode-tv .mascot.wave { width: 4.6rem; height: 5rem; }
.device.mode-tv .profile-grid { margin-top: 1rem; gap: 1.2rem; }
/* 5 thẻ một hàng: 5 × 10.4 + 4 × 1.2 = 56.8rem, vừa bề ngang 59.2rem còn chỗ cho viền focus */
.device.mode-tv .profile-card { width: 10.4rem; padding: .9rem .8rem; gap: .3rem; justify-content: flex-start; }
/* 6–9 hồ sơ (tối đa 8 bé + Khách): hai hàng thẻ gọn, bỏ bạn Sao và dòng mời cho đủ chỗ */
.device.mode-tv .screen-profiles.many .mascot.wave, .device.mode-tv .screen-profiles.many .screen-lead { display: none; }
.device.mode-tv .screen-profiles.many .profile-grid { margin: 1.1rem auto 0; gap: 1.1rem 1.2rem;
  max-width: calc(var(--cols) * 10.4rem + (var(--cols) - 1) * 1.2rem + .1rem); } /* chia đều hai hàng: 6 = 3+3, 9 = 5+4 */
.device.mode-tv .screen-profiles.many .profile-card { padding: .6rem .7rem .7rem; gap: .15rem; }
.device.mode-tv .screen-profiles.many .profile-avatar { width: 5rem; height: 5rem; padding: .3rem; }
.device.mode-tv .screen-profiles.many .profile-name { -webkit-line-clamp: 1; font-size: 1.2rem; }

/* --- Trang chủ: 6 môn = 3 cột × 2 hàng --- */
.device.mode-tv .home-hero { margin-bottom: 0; }
.device.mode-tv .home-hero .screen-title { font-size: 1.9rem; line-height: 1.3; }
/* Ảnh nhỏ của bé cạnh lời chào */
.greet-avatar { display: inline-block; width: 3rem; height: 3rem; margin-right: .6rem; vertical-align: middle;
  border-radius: 50%; background: #fff; padding: .15rem; box-shadow: 0 .15rem .4rem rgba(42, 132, 210, .3); }
.greet-avatar .avatar-svg { display: block; width: 100%; height: 100%; }
.device.mode-tv .home-hero .screen-lead { margin-bottom: .2rem; }
.device.mode-tv .hero-mascot .mascot { width: 4.4rem; height: 4.8rem; }
.device.mode-tv .section-label { margin: .1rem 0 .8rem; }
.device.mode-tv .subject-card { padding: .9rem 1.1rem; gap: .9rem; }
.device.mode-tv .subject-card .card-ill { width: 5.8rem; height: 5.8rem; --emoji-size: 3.9rem; }

/* --- Danh sách bài: 2 cột, tối đa ~6 thẻ không cuộn --- */
.device.mode-tv .lessons-head { margin-bottom: 1rem; gap: .9rem; } /* chừa chỗ cho viền focus của hàng thẻ đầu */
.device.mode-tv .subject-chip { width: 4.2rem; height: 4.2rem; --emoji-size: 2.9rem; }
.device.mode-tv .lessons-head .screen-lead { margin: 0; }
.device.mode-tv .lesson-list { gap: .8rem 1rem; }
.device.mode-tv .lesson-card { padding: .7rem 1rem; gap: .9rem; }
.device.mode-tv .lesson-card .card-ill { width: 4.6rem; height: 4.6rem; padding: 0; --emoji-size: 3.2rem; }
.device.mode-tv .lesson-info { gap: 0; }
.device.mode-tv .lesson-meta { margin-top: .1rem; }
.device.mode-tv .lesson-stars { margin-top: 0; }
.device.mode-tv .lesson-meta .star-slot { width: 1.4rem; height: 1.4rem; }
/* 8 bài = 2 hàng × 4 thẻ dọc */
.device.mode-tv .lesson-list.dense { gap: .9rem; }
.device.mode-tv .lesson-list.dense .lesson-card { padding: .6rem .9rem .7rem; gap: .3rem; }
.device.mode-tv .lesson-list.dense .card-ill { width: 3.7rem; height: 3.7rem; padding: 0; --emoji-size: 2.7rem; }
.device.mode-tv .lesson-list.dense .lesson-meta .star-slot { width: 1.2rem; height: 1.2rem; }

/* --- Bài tập: canh TRÊN (không canh giữa) và màn bài tập lấp đầy chiều cao còn lại.
 *     Phần dư dồn cho vùng hình đề (đếm / hình to) hoặc, nếu không có hình đề, cho ô đáp án.
 *     Cỡ hình/chữ theo bố cục câu hỏi (lớp qp-* do app.js gắn lên .question-panel). --- */
.device.mode-tv .screen-quiz { flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; }
.device.mode-tv .quiz-top { flex: 0 0 auto; margin-bottom: .55rem; gap: .8rem; }
.device.mode-tv .quiz-top .btn { padding: .45rem 1rem; font-size: 1rem; }
.device.mode-tv .question-panel { flex: 1 1 auto; display: flex; flex-direction: column; padding: .7rem 1.3rem .6rem; }
.device.mode-tv .q-prompt-row { flex: 0 0 auto; }
.device.mode-tv .q-prompt { margin: 0 0 .5rem; }
.device.mode-tv .q-stage { flex: 1 1 auto; width: 100%; margin: 0 0 .7rem; }
.device.mode-tv .count-stage { padding: .5rem 1rem; }
.device.mode-tv .answer-grid { flex: 0 0 auto; width: 100%; max-width: none; gap: .9rem; margin: 0; }
/* Không có hình đề:
 *  - đáp án là hình/màu: ô đáp án chiếm phần dư (hình trong ô to lên);
 *  - đáp án là chữ/số: chính câu hỏi là "sân khấu" — khung kem ấm chiếm phần dư, chữ đề to hơn,
 *    ô đáp án cao vừa phải (ô chữ cao cả màn nhìn trống trải). */
.device.mode-tv .qp-nostem.qp-ill .answer-grid, .device.mode-tv .qp-nostem.qp-swatch .answer-grid { flex: 1 1 auto; }
.device.mode-tv .qp-nostem.qp-text .q-prompt-row, .device.mode-tv .qp-nostem.qp-num .q-prompt-row {
  flex: 1 1 auto; margin-bottom: .8rem; padding: .6rem 1.4rem; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #FFF5D6, #FFFBEC); box-shadow: inset 0 0 0 .18rem #FBE7AE; }
.device.mode-tv .qp-nostem.qp-text .q-prompt, .device.mode-tv .qp-nostem.qp-num .q-prompt { font-size: 2.3rem; margin: 0; }
.device.mode-tv .qp-nostem.qp-text .answer-option, .device.mode-tv .qp-nostem.qp-num .answer-option { min-height: 7.4rem; }
.device.mode-tv .qp-nostem.qp-num .answer-option { padding: .4rem .9rem; }
/* Đếm 1 hàng (≤5 hình): hình to; 2 hàng (6–10 hình): vừa đủ để đề 2 dòng + đáp án + phản hồi lọt khung */
.device.mode-tv .obj { width: 7.4rem; height: 7.4rem; --emoji-size: 6.4rem; }
.device.mode-tv .two-rows .obj { width: 5rem; height: 5rem; --emoji-size: 4.4rem; }
.device.mode-tv .two-rows { gap: .2rem 1.4rem; }
/* Hình đề: to, đặt trên đĩa vàng nhạt (nền radial theo nửa chiều cao vùng hình, không tràn) */
.device.mode-tv .stem-ill, .device.mode-tv .stem-swatch { width: 8rem; height: 8rem; }
.device.mode-tv .stem-ill { --emoji-size: 7rem; }
.device.mode-tv .answer-option { min-height: 6rem; padding: .7rem .9rem; }
.device.mode-tv .ans-inner { gap: .2rem; }
/* line-height 1.5: hộp chữ (content area) của Andika cao ~1.45em; thấp hơn thì ô báo tràn dọc vài px */
.device.mode-tv .ans-number { font-size: 3.2rem; line-height: 1.5; }
.device.mode-tv .is-num .answer-option { min-height: 5.8rem; padding: .1rem .9rem; }
.device.mode-tv .ans-ill { width: 4.4rem; height: 4.4rem; --emoji-size: 3.8rem; }
.device.mode-tv .ans-text.big { font-size: 2.6rem; line-height: 1.2; }
.device.mode-tv .ans-text.big.long { font-size: 1.9rem; line-height: 1.15; }
.device.mode-tv .ans-text.big.long2 { font-size: 1.5rem; line-height: 1.15; }
/* Cỡ hình/số/chữ trong ô khi không có hình đề (ô hình/màu cao lên, ô số/chữ giữ cao vừa) */
.device.mode-tv .qp-nostem.qp-ill .ans-ill { width: 6.6rem; height: 6.6rem; --emoji-size: 5.8rem; }
.device.mode-tv .qp-nostem.qp-ill .ans-text { font-size: 1.9rem; }
.device.mode-tv .qp-nostem.qp-num .ans-number { font-size: 4.6rem; }
.device.mode-tv .qp-nostem.qp-swatch .ans-swatch { width: 5.4rem; height: 5.4rem; border-radius: 1.3rem; }
.device.mode-tv .qp-nostem.qp-swatch .ans-text { font-size: 1.6rem; }
.device.mode-tv .qp-nostem .cols-3 .ans-text.big:not(.long):not(.long2) { font-size: 3rem; }
/* Hàng phản hồi luôn giữ chỗ (visibility, không display) để đáp án không nhảy khi hiện lời khen/nút tiếp */
.device.mode-tv .feedback { flex: 0 0 auto; display: flex; visibility: hidden; margin-top: .45rem; min-height: 4rem; }
.device.mode-tv .feedback.show { visibility: visible; }
.device.mode-tv .next-btn { padding: .5rem 1.7rem; }

/* --- Kết quả --- */
.device.mode-tv .result-card { padding: 1rem 1.6rem 1.1rem; max-width: 57rem; margin: 0 auto; }
.device.mode-tv .mascot.cheer { width: 5.4rem; height: 5.9rem; }
.device.mode-tv .result-title { font-size: 2rem; margin: .1rem 0; }
.device.mode-tv .result-stars.big { margin: .2rem 0; }
.device.mode-tv .result-stars.big .star-slot { width: 4.2rem; height: 4.2rem; }
.device.mode-tv .result-stars.big .star-slot:nth-child(2) { width: 5.2rem; height: 5.2rem; }
.device.mode-tv .result-yt { margin-top: .4rem; }
.device.mode-tv .result-actions { margin-top: .8rem; gap: .7rem; }
.device.mode-tv .result-actions .btn.big { padding: .7rem 1.3rem; }

/* --- Chọn chủ đề YouTube: 4 × 2 thẻ ảnh --- */
.device.mode-tv .topics-head { margin-bottom: 1rem; }
.device.mode-tv .topic-grid { gap: 1rem 1.1rem; }
.device.mode-tv .topic-card { padding: .6rem .6rem .5rem; gap: .2rem; }
.device.mode-tv .topic-img { width: 6.6rem; height: 6.6rem; }

/* --- Phụ huynh --- */
.device.mode-tv .parent-grid { gap: 1rem; }
.device.mode-tv .panel { padding: 1rem 1.3rem; }
.device.mode-tv .panel h3 { margin: .6rem 0 .2rem; }
.device.mode-tv .stat { padding: .4rem .5rem; }
.device.mode-tv .stat-num { font-size: 2.2rem; line-height: 1.2; }
.device.mode-tv .hist-item { padding: .2rem 0; }
.device.mode-tv .hist-item .star-slot { width: 1.2rem; height: 1.2rem; }
.device.mode-tv .btn.block { margin: .4rem 0; padding: .6rem 1.3rem; }
/* Ba cột (tiến độ | hồ sơ + QR | cài đặt): nút cài đặt bớt lề để nhãn nằm một dòng */
.device.mode-tv .action-panel .btn.block { padding: .6rem .7rem; font-size: .98rem; }
.device.mode-tv .privacy-note { margin-top: .5rem; padding: .5rem .8rem; }

/* --- Cài đặt: hai cột (chung | giọng đọc) --- */
.device.mode-tv .settings-panel { max-width: none; }
/* Tiêu đề trong khung trùng với tiêu đề trên header ("Cài đặt"): ẩn bằng cách trực quan, vẫn còn cho trình đọc màn hình */
.device.mode-tv .settings-panel .screen-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.device.mode-tv .set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.device.mode-tv .set-row { padding: .4rem 0; gap: .5rem 1rem; }
.device.mode-tv .toggle { height: 2.5rem; }
.device.mode-tv .toggle .knob { top: .35rem; }
.device.mode-tv .chip { padding: .3rem .9rem; }
.device.mode-tv .set-group-title { margin: 0 0 .1rem; padding-top: 0; border-top: none; }
.device.mode-tv .set-voices .chip-row { max-height: 5.6rem; overflow-y: auto; padding: .4rem; margin: -.4rem; }
.device.mode-tv .voice-note { margin-top: .4rem; padding: .35rem .7rem; line-height: 1.4; }
.device.mode-tv .set-voices { gap: .2rem 1rem; }
.device.mode-tv .set-voices .set-label { flex: 1 1 100%; }

/* --- Hộp thoại --- */
.device.mode-tv .dialog { padding: 1.3rem 1.6rem; }
.device.mode-tv .dialog-actions { margin-top: .8rem; }
.device.mode-tv .gate-sum { margin: .3rem 0; }
.device.mode-tv .grade-dialog { padding: 1.1rem 1.6rem 1.2rem; }
.device.mode-tv .grade-groups { margin: .7rem 0 .8rem; }

/* ============ CHÚ THÍCH REMOTE ============ */
.remote-hint { text-align: center; color: #AEBDCB; font-size: 12px; padding: 6px 14px; }
.remote-hint b { color: #D7E3EE; }

/* ============ GIẢM CHUYỂN ĐỘNG ============ */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 1ms !important; }
}

/* ============ RESPONSIVE (cảm ứng / màn nhỏ) ============ */
/* Chỉ áp cho chế độ cảm ứng: chế độ TV luôn dùng bố cục 64×36 (không đổi cột theo bề rộng cửa sổ) */
@media (max-width: 820px) {
  .mode-touch .subject-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-touch .lesson-list { grid-template-columns: 1fr; }
  .mode-touch .lesson-list.dense { grid-template-columns: repeat(2, 1fr); }
  .mode-touch .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-touch .grade-group { grid-template-columns: 1fr; gap: .3rem; }
  .mode-touch .grade-row { flex-wrap: wrap; }
  .mode-touch .grade-opt { flex: 1 1 28%; }
  .mode-touch .parent-grid { grid-template-columns: 1fr; }
  .mode-touch .home-hero .hero-mascot { display: none; }
  .mode-touch .answer-grid.cols-3 { grid-template-columns: 1fr; }
  .mode-touch .answer-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .mode-touch .subject-grid { grid-template-columns: 1fr; }
  .mode-touch .profile-card { width: 44%; }
  .mode-touch .result-actions .btn, .mode-touch .q-tools .btn { flex: 1 1 100%; }
}

/* ============ KEYBOARD-FOCUS AN TOÀN ============ */
button:focus-visible { outline: none; }