/**
 * SongAnh Kids — Bảng thiết kế & hiệu ứng
 * ============================================================
 * Toàn bộ theme màu (sáng/tối), font chữ, khung giao diện, hoạt
 * ảnh, nút bấm kiểu 3D/Neumorphism, linh vật gấu vẽ bằng CSS,
 * và layout ép chế độ ngang cho điện thoại.
 * Tailwind (nạp qua CDN trong index.html) đảm nhận các tiện ích
 * bố cục nhỏ ở màn hình Trắc nghiệm / Thành tích; mọi phần liên
 * quan tới màu sắc theo theme và hoạt ảnh vẫn nằm ở file này để
 * đảm bảo tương thích sáng/tối và hiệu ứng nhất quán.
 * ============================================================
 */

:root {
  --bg: #FFF8EC;
  --bg-card: #FFFFFF;
  --ink: #3A2E39;
  --ink-soft: #8A7A8D;
  --coral: #FF6F59;
  --coral-soft: #FFE4DE;
  --sky: #2A9BDB;
  --sky-soft: #DFF2FF;
  --sun: #F5A623;
  --sun-soft: #FFF1D6;
  --grass: #3FAE72;
  --grass-soft: #E1F7EA;
  --gold: #FFC93C;
  --border: rgba(58, 46, 57, 0.10);
  --shadow-rgb: 58, 46, 57;
  --surface-highlight: rgba(255, 255, 255, 0.75);
  --fur: #C08A5C;
  --fur-dark: #A16E42;
  --snout: #F6E3C8;
  --bunny-fur: #FBF3EA; --bunny-fur-dark: #E9DCC9; --bunny-ear-inner: #FFB8CC; --bunny-snout: #FFE3EA;
  --cat-fur: #F0A94E; --cat-fur-dark: #D98C2E; --cat-snout: #FFF1DC;
  --dino-scale: #7EC489; --dino-scale-dark: #5FA86C; --dino-belly: #E8F5DE;
  --dragon-scale: #4FAE7A; --dragon-scale-dark: #3D8F63; --dragon-belly: #FFE9A8; --dragon-horn: #FFC93C;
  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-pill: 999px;
  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #241B2E;
    --bg-card: #2F2438;
    --ink: #FBF3E7;
    --ink-soft: #C9BBD1;
    --coral: #FF8770;
    --coral-soft: #4A2E32;
    --sky: #5FC4FF;
    --sky-soft: #233A4A;
    --sun: #FFC257;
    --sun-soft: #4A3A1E;
    --grass: #5FCB93;
    --grass-soft: #1F3B2C;
    --gold: #FFD666;
    --border: rgba(251, 243, 231, 0.14);
    --shadow-rgb: 0, 0, 0;
    --surface-highlight: rgba(255, 255, 255, 0.06);
    --fur: #B98452;
    --fur-dark: #8D5F35;
    --snout: #E9D3AC;
    --bunny-fur: #E2D6C4; --bunny-fur-dark: #C9B89F; --bunny-ear-inner: #E28FA8; --bunny-snout: #E9C2CC;
    --cat-fur: #D6923D; --cat-fur-dark: #B8721F; --cat-snout: #E8D2AE;
    --dino-scale: #5FA86C; --dino-scale-dark: #468A54; --dino-belly: #C9E0BC;
    --dragon-scale: #3D8F63; --dragon-scale-dark: #2E7350; --dragon-belly: #D9BD6E; --dragon-horn: #E8B93C;
  }
}
:root[data-theme="dark"] {
  --bg: #241B2E;
  --bg-card: #2F2438;
  --ink: #FBF3E7;
  --ink-soft: #C9BBD1;
  --coral: #FF8770;
  --coral-soft: #4A2E32;
  --sky: #5FC4FF;
  --sky-soft: #233A4A;
  --sun: #FFC257;
  --sun-soft: #4A3A1E;
  --grass: #5FCB93;
  --grass-soft: #1F3B2C;
  --gold: #FFD666;
  --border: rgba(251, 243, 231, 0.14);
  --shadow-rgb: 0, 0, 0;
  --surface-highlight: rgba(255, 255, 255, 0.06);
  --fur: #B98452;
  --fur-dark: #8D5F35;
  --snout: #E9D3AC;
  --bunny-fur: #E2D6C4; --bunny-fur-dark: #C9B89F; --bunny-ear-inner: #E28FA8; --bunny-snout: #E9C2CC;
  --cat-fur: #D6923D; --cat-fur-dark: #B8721F; --cat-snout: #E8D2AE;
  --dino-scale: #5FA86C; --dino-scale-dark: #468A54; --dino-belly: #C9E0BC;
  --dragon-scale: #3D8F63; --dragon-scale-dark: #2E7350; --dragon-belly: #D9BD6E; --dragon-horn: #E8B93C;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
/* overflow-x: clip (không phải hidden): `hidden` biến html/body thành
   khung cuộn riêng -> MỌI position:sticky (topbar, ô tìm chủ đề) mất tác
   dụng (bug có từ lâu, phát hiện 2026-09-26). `clip` vẫn chặn cuộn ngang
   nhưng không tạo khung cuộn. Trình duyệt cũ không hiểu `clip` dùng lại
   `hidden` ở dòng trước (sticky không chạy, như trước đây). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg-custom, var(--bg));
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh; /* trình duyệt không hỗ trợ dvh tự bỏ qua dòng này, giữ 100vh làm fallback */
  overflow-x: hidden;
  overflow-x: clip; /* xem ghi chú ở rule html */
  touch-action: manipulation;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
button { font-family: inherit; touch-action: manipulation; }

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  position: relative;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 4px 12px;
  background: linear-gradient(to bottom, var(--bg-custom, var(--bg)) 78%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; }
.app-deco-badge {
  position: absolute; left: 34px; top: 30px; z-index: 1;
  font-size: 15px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.mascot {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.15);
  border: 3px solid var(--bg-card);
  background: var(--sun-soft);
}
.mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mascot { animation: floaty 3.2s ease-in-out infinite; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; min-width: 0; }
.brand-logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.brand-tag { font-size: 0.68rem; color: var(--ink-soft); font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.rewards-btn {
  flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--bg-card);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.15), -2px -2px 6px var(--surface-highlight);
}
.rewards-btn:active { box-shadow: inset 3px 3px 6px rgba(var(--shadow-rgb), 0.25), inset -2px -2px 5px var(--surface-highlight); transform: scale(0.96); }

.star-chip {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.12);
}
.star-chip .star-icon { font-size: 1.15rem; }
.star-chip.pop { animation: starPop .45s ease; }
@keyframes starPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28) rotate(-6deg); }
  65% { transform: scale(0.95) rotate(4deg); }
  100% { transform: scale(1); }
}

/* ---------- Views ---------- */
.view { animation: viewIn .35s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.home-view { padding-top: 8px; text-align: center; }
.home-header { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-title { font-size: 2rem; font-weight: 800; }
.home-sub { color: var(--ink-soft); font-weight: 600; margin: 8px 0 20px; }

.install-app-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 520px; margin: 0 auto 18px;
  padding: 12px 16px;
  border: none; border-radius: var(--radius-md);
  background: var(--sky); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.14), -3px -3px 8px var(--surface-highlight);
}
.install-app-btn:active { transform: scale(.98); }
.install-app-icon { font-size: 1.3rem; flex-shrink: 0; }

/* ---------- Nhiệm vụ Ngày & Rương Bí Mật ---------- */
.daily-quest-card {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.1), -3px -3px 8px var(--surface-highlight);
}
.daily-quest-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.daily-quest-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.daily-quest-count {
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--sun);
  background: var(--sun-soft); border-radius: var(--radius-pill); padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}
.daily-quest-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.daily-quest-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 2px solid var(--border);
}
.daily-quest-row.done { border-color: var(--grass); background: var(--grass-soft); }
.daily-quest-icon { font-size: 1.2rem; flex: none; }
.daily-quest-label { flex: 1; font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.daily-quest-progress {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.daily-quest-row.done .daily-quest-progress { color: var(--grass); }

.daily-quest-chest-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px;
  border: none; border-radius: var(--radius-pill);
  background: var(--border); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  cursor: not-allowed;
  transition: transform .15s ease;
}
.daily-quest-chest-btn.ready {
  background: linear-gradient(135deg, var(--gold), var(--sun));
  color: #5A3D00;
  cursor: pointer;
  animation: chestGlow 1.6s ease-in-out infinite;
}
.daily-quest-chest-btn.ready:active { transform: scale(.97); }
.daily-quest-chest-btn:disabled { pointer-events: none; }
.chest-icon { font-size: 1.3rem; }
@keyframes chestGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 60, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(255, 201, 60, 0); }
}

.topic-search-wrap { max-width: 520px; margin: 0 auto 16px; }
/* Ô tìm kiếm DÍNH ngay dưới topbar khi lướt 94 chủ đề (danh sách dài
   ~30.000px ở màn dọc — user báo "lướt mỏi tay", lướt xuống là mất ô
   tìm). --topbar-h do app.js đo thật (ResizeObserver), 60px dự phòng. */
.topic-search-wrap {
  /* Dính lấn lên 14px dưới đáy topbar: đáy topbar là dải gradient mờ dần
     sang trong suốt, nếu không lấp bằng nền của ô tìm kiếm thì chữ thẻ
     chủ đề bên dưới lộ ra giữa topbar và ô tìm. z-index < topbar (20). */
  position: sticky; top: calc(var(--topbar-h, 60px) - 14px); z-index: 15;
  padding: 14px 0 8px;
  background: var(--bg-custom, var(--bg));
}
.topic-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  box-shadow: inset 2px 2px 6px rgba(var(--shadow-rgb), 0.08);
}
.topic-search-input::placeholder { color: var(--ink-soft); }
.topic-search-input:focus { outline: none; border-color: var(--sky); }
/* Trình duyệt tự thêm nút "x" xoá nhanh cho input[type=search] — giữ
   nguyên (không ẩn ::-webkit-search-cancel-button) vì hữu ích, bé xoá
   ô tìm kiếm nhanh hơn phải bôi đen/backspace từng chữ. */
.topic-search-empty { text-align: center; color: var(--ink-soft); font-weight: 600; padding: 32px 0; }

.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 720px) {
  .topic-grid { grid-template-columns: 1fr; }
}

.topic-card {
  --accent: var(--coral); --accent-soft: var(--coral-soft);
  width: 100%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 18px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.08);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.topic-card:active { transform: scale(.97); }
.topic-card[data-color="coral"] { --accent: var(--coral); --accent-soft: var(--coral-soft); }
.topic-card[data-color="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); }
.topic-card[data-color="sun"] { --accent: var(--sun); --accent-soft: var(--sun-soft); }
.topic-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(var(--shadow-rgb), 0.14); }

.topic-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  border: 3px solid var(--accent);
}
.topic-names { display: flex; flex-direction: column; }
.topic-en { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.topic-vi { font-size: 0.95rem; color: var(--ink-soft); font-weight: 600; }
.topic-preview { font-size: 1.3rem; letter-spacing: 2px; }
.topic-progress { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.topic-progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--accent-soft); overflow: hidden; }
.topic-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .4s ease; }
.topic-progress span { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }

.topic-tap-hint { font-size: 0.72rem; color: var(--accent); font-weight: 700; margin-top: 2px; }

/* ---------- CSS mascot: chú gấu vẽ bằng CSS thuần ---------- */
.css-bear {
  position: relative;
  width: 86px; height: 78px;
  margin: 4px auto 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .css-bear { animation: bearBob 3.4s ease-in-out infinite; }
}
@keyframes bearBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}
.cb-ear {
  position: absolute; top: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--fur);
}
.cb-ear::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--fur-dark);
}
.cb-ear-left { left: 2px; }
.cb-ear-right { right: 2px; }
.cb-head {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 68px; border-radius: 50%;
  background: var(--fur);
  box-shadow: 0 8px 14px rgba(var(--shadow-rgb), 0.18);
}
.cb-eye {
  position: absolute; top: 30px;
  width: 7px; height: 9px; border-radius: 50%;
  background: var(--ink);
}
.cb-eye-left { left: 20px; }
.cb-eye-right { right: 20px; }
.cb-blush {
  position: absolute; top: 40px;
  width: 12px; height: 8px; border-radius: 50%;
  background: var(--blush, rgba(255, 111, 89, 0.35));
}
.cb-blush-left { left: 8px; }
.cb-blush-right { right: 8px; }
.cb-snout {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 24px; border-radius: 50%;
  background: var(--snout);
}
.cb-nose {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 8px; border-radius: 50%;
  background: var(--ink);
}
.cb-mouth {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 6px;
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 12px 12px;
}
.cb-paw {
  position: absolute; top: 4px; right: -10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--mascot-fur, var(--fur));
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
  .cb-paw { animation: pawWave 1.5s ease-in-out infinite; }
}
@keyframes pawWave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-26deg); }
}

/* ---------- Phụ kiện của gấu (bật/tắt bằng class trên <body>) ---------- */
.cb-glasses {
  display: none;
  position: absolute; top: 27px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 12px;
}
.cb-glasses::before, .cb-glasses::after {
  content: ''; position: absolute; top: 0; width: 18px; height: 12px;
  border-radius: 6px; background: rgba(40, 32, 40, 0.88);
}
.cb-glasses::before { left: 0; }
.cb-glasses::after { right: 0; }
body.eq-glasses_cool .css-bear .cb-glasses { display: block; }

.cb-bowtie {
  display: none;
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 12px;
}
.cb-bowtie::before, .cb-bowtie::after {
  content: ''; position: absolute; top: 0; width: 9px; height: 12px;
  background: #E0483A; border-radius: 3px;
}
.cb-bowtie::before { left: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.cb-bowtie::after { right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
body.eq-bowtie_red .css-bear .cb-bowtie { display: block; }

.cb-hat { display: none; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }
.cb-hat-party {
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid var(--coral);
}
.cb-hat-party::after {
  content: '★'; position: absolute; top: -30px; left: -8px;
  font-size: 10px; color: var(--gold);
}
body.eq-hat_party .css-bear .cb-hat-party { display: block; }
.cb-hat-crown {
  width: 36px; height: 18px;
  background: var(--gold);
  clip-path: polygon(0% 100%, 0% 40%, 20% 70%, 35% 0%, 50% 55%, 65% 0%, 80% 70%, 100% 40%, 100% 100%);
}
body.eq-hat_crown .css-bear .cb-hat-crown { display: block; }

/* Trang điểm đặc biệt (nhóm "face" trong ACCESSORIES) */
body.eq-face_sparkle .css-bear .cb-eye {
  box-shadow: 0 0 5px 1.5px rgba(255, 255, 255, 0.95);
}
body.eq-face_heart .css-bear .cb-blush {
  width: 14px; height: 14px;
  background: var(--blush, rgba(255, 79, 143, 0.55));
  clip-path: polygon(50% 15%, 61% 0%, 78% 0%, 100% 22%, 100% 40%, 50% 100%, 0% 40%, 0% 22%, 22% 0%, 39% 0%);
}

/* ---------- Gấu đồng hành (góc màn hình) ---------- */
#companionBear {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 55;
  width: 64px; height: 58px;
  border: none; background: transparent; padding: 0; cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(var(--shadow-rgb), 0.25));
}
/* Thu nhỏ gấu đồng hành bằng transform:scale() trên 1 LỚP BỌC RIÊNG
   (.companion-scale), KHÔNG đặt trực tiếp lên .css-bear — vì
   .css-bear có animation "lắc lư" (bearBob) cũng dùng transform,
   animation sẽ ghi đè mất scale nếu đặt chung 1 phần tử (đã từng
   xảy ra, gấu bị phóng to nhầm về kích thước gốc + mắt/mũi lệch ra
   ngoài đầu). Cũng KHÔNG resize từng bộ phận (mắt, mũi, tai...)
   riêng lẻ vì chúng định vị bằng toạ độ tuyệt đối theo kích thước
   gốc 86x78px — resize riêng lẻ mà quên cập nhật hết sẽ lệch vị trí. */
#companionBear .companion-scale {
  transform: scale(0.744);
  transform-origin: top left;
  pointer-events: none;
}
#companionBear .css-bear { width: 86px; height: 78px; margin: 0; }
#companionBear.jump { animation: companionJump .6s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ---------- Vườn Linh Vật: Thỏ/Mèo/Khủng Long/Rồng vẽ bằng CSS thuần ----------
 * DÙNG CHUNG khung .css-bear (86x78, animation "bob", MỌI phụ kiện
 * mũ/kính/nơ .cb-glasses/.cb-bowtie/.cb-hat-*) với con Gấu gốc ở
 * trên — mỗi linh vật chỉ thêm 1 class .mascot-<loài> + các bộ phận
 * THÂN RIÊNG (tai/mõm/mũi...), tái dùng nguyên trạng cb-eye/cb-blush/
 * cb-mouth (hình tròn/cong đơn giản, màu trung tính, hợp mọi loài).
 * Nhờ vậy CẢ 4 linh vật mới tự động "mặc" đúng phụ kiện y hệt Gấu mà
 * KHÔNG cần viết lại 1 dòng CSS phụ kiện nào — xem app.js
 * mascotBodyHTML(). Con Gấu (.css-bear không kèm class .mascot-*)
 * hoàn toàn không đổi hành vi/CSS so với trước. */

/* ----- Thỏ Ngọc ----- */
.mascot-bunny { --mascot-fur: var(--bunny-fur); }
.mascot-bunny .bn-ear {
  position: absolute; top: -34px;
  width: 15px; height: 40px;
  border-radius: 50% 50% 40% 40% / 62% 62% 30% 30%;
  background: var(--bunny-fur);
}
.mascot-bunny .bn-ear::after {
  content: ''; position: absolute; inset: 4px 3px 8px;
  border-radius: 50% 50% 40% 40% / 62% 62% 30% 30%;
  background: var(--bunny-ear-inner);
}
.mascot-bunny .bn-ear-left { left: 15px; transform: rotate(-9deg); }
.mascot-bunny .bn-ear-right { right: 15px; transform: rotate(9deg); }
.mascot-bunny .bn-head {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 68px; border-radius: 50%;
  background: var(--bunny-fur);
  box-shadow: 0 8px 14px rgba(var(--shadow-rgb), 0.18);
}
.mascot-bunny .bn-snout {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 20px; border-radius: 50%;
  background: var(--bunny-snout);
}
.mascot-bunny .bn-nose {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 6px; border-radius: 50%;
  background: #E8779A;
}
.mascot-bunny .bn-teeth {
  position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 7px; background: #fff; border-radius: 0 0 3px 3px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08);
}
.mascot-bunny .bn-teeth::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 1px; height: 100%; background: rgba(0, 0, 0, 0.15);
}

/* ----- Mèo Vũ Trụ ----- */
.mascot-cat { --mascot-fur: var(--cat-fur); }
.mascot-cat .ct-ear {
  position: absolute; top: -13px;
  width: 24px; height: 22px;
  background: var(--cat-fur);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.mascot-cat .ct-ear::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 11px; height: 10px;
  background: var(--cat-fur-dark);
  clip-path: polygon(50% 0%, 12% 100%, 88% 100%);
}
.mascot-cat .ct-ear-left { left: 3px; transform: rotate(-9deg); }
.mascot-cat .ct-ear-right { right: 3px; transform: rotate(9deg); }
.mascot-cat .ct-head {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 68px; border-radius: 50%;
  background: var(--cat-fur);
  box-shadow: 0 8px 14px rgba(var(--shadow-rgb), 0.18);
}
.mascot-cat .ct-snout {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 16px; border-radius: 50%;
  background: var(--cat-snout);
}
.mascot-cat .ct-nose {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid #E8779A;
}
.mascot-cat .ct-whisker {
  position: absolute; top: 36px;
  width: 15px; height: 1.5px; background: var(--ink); opacity: .4;
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink);
}
.mascot-cat .ct-whisker-left { left: -11px; }
.mascot-cat .ct-whisker-right { right: -11px; }

/* ----- Khủng Long ----- */
.mascot-dino { --mascot-fur: var(--dino-scale); }
.mascot-dino .dn-spike {
  position: absolute; top: -9px;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 13px solid var(--dino-scale-dark);
}
.mascot-dino .dn-spike-1 { left: 17px; transform: rotate(-14deg); }
.mascot-dino .dn-spike-2 { left: 50%; transform: translateX(-50%); }
.mascot-dino .dn-spike-3 { right: 17px; transform: rotate(14deg); }
.mascot-dino .dn-head {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 68px; border-radius: 50%;
  background: var(--dino-scale);
  box-shadow: 0 8px 14px rgba(var(--shadow-rgb), 0.18);
}
.mascot-dino .dn-snout {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 26px; border-radius: 50%;
  background: var(--dino-belly);
}
.mascot-dino .dn-nostril {
  position: absolute; top: 5px;
  width: 4px; height: 5px; border-radius: 50%;
  background: var(--ink); opacity: .65;
}
.mascot-dino .dn-nostril-left { left: 13px; }
.mascot-dino .dn-nostril-right { right: 13px; }
.mascot-dino .dn-arm {
  position: absolute; bottom: 6px;
  width: 13px; height: 8px; border-radius: 45%;
  background: var(--dino-scale);
}
.mascot-dino .dn-arm-left { left: -3px; transform: rotate(24deg); }
.mascot-dino .dn-arm-right { right: -3px; transform: rotate(-24deg); }

/* ----- Rồng Thần ----- */
.mascot-dragon { --mascot-fur: var(--dragon-scale); }
.mascot-dragon .dr-horn {
  position: absolute; top: -13px;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 17px solid var(--dragon-horn);
}
.mascot-dragon .dr-horn-left { left: 19px; transform: rotate(-16deg); }
.mascot-dragon .dr-horn-right { right: 19px; transform: rotate(16deg); }
.mascot-dragon .dr-wing {
  position: absolute; top: 16px;
  width: 20px; height: 28px;
  background: var(--dragon-scale-dark);
  opacity: .92;
}
.mascot-dragon .dr-wing-left { left: -8px; clip-path: polygon(100% 0%, 0% 42%, 42% 100%, 100% 68%); transform-origin: right center; }
.mascot-dragon .dr-wing-right { right: -8px; clip-path: polygon(0% 0%, 100% 42%, 58% 100%, 0% 68%); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .mascot-dragon .dr-wing { animation: dragonWingFlutter 2.4s ease-in-out infinite; }
  .mascot-dragon .dr-wing-right { animation-delay: -1.2s; }
}
@keyframes dragonWingFlutter {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(0.85) rotate(-6deg); }
}
.mascot-dragon .dr-head {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 68px; border-radius: 50%;
  background: var(--dragon-scale);
  box-shadow: 0 8px 14px rgba(var(--shadow-rgb), 0.18);
}
.mascot-dragon .dr-snout {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 22px; border-radius: 50%;
  background: var(--dragon-belly);
}
.mascot-dragon .dr-nostril {
  position: absolute; top: 4px;
  width: 4px; height: 5px; border-radius: 50%;
  background: var(--ink); opacity: .65;
}
.mascot-dragon .dr-nostril-left { left: 11px; }
.mascot-dragon .dr-nostril-right { right: 11px; }

@keyframes companionJump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-26px) scale(1.08); }
  60% { transform: translateY(-26px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
.companion-badge {
  position: absolute; top: -4px; left: -4px;
  background: var(--gold); color: #5A3D00;
  font-family: var(--font-display); font-weight: 800; font-size: 0.65rem;
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb), 0.2);
}

.star-fly {
  position: fixed; z-index: 56; pointer-events: none;
  font-size: 1.4rem;
  transition: transform .55s cubic-bezier(.3, .6, .3, 1), opacity .55s ease;
}

/* ---------- Card view ---------- */
.card-view { max-width: 520px; margin: 0 auto; }
.card-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--bg-card); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.12), -2px -2px 6px var(--surface-highlight);
}
.icon-btn:active {
  transform: scale(.92);
  box-shadow: inset 3px 3px 6px rgba(var(--shadow-rgb), 0.2), inset -2px -2px 5px var(--surface-highlight);
}
/* Mũi tên "←" gốc chỉ dùng cho trình đọc màn hình (aria-label đã có
   tên đầy đủ) — ẩn ký tự Unicode thật (color:transparent, hay bị
   lệch/mảnh tuỳ font hệ thống) và tự vẽ 1 mũi tên chevron rõ nét,
   đậm bằng CSS (::before) thay thế, đồng bộ phong cách với các hình
   vẽ tay CSS khác trong app (lá táo, mũ gấu...). */
.icon-btn-back {
  position: relative;
  background: linear-gradient(160deg, #FF8770, var(--coral) 55%, #D6432F);
  border-color: transparent;
  color: transparent;
  box-shadow: 0 4px 0 #B8341F, 3px 5px 8px rgba(var(--shadow-rgb), 0.25);
}
.icon-btn-back::before {
  content: '';
  position: absolute; top: 50%; left: 55%;
  width: 12px; height: 12px;
  border-left: 3.5px solid #fff;
  border-bottom: 3.5px solid #fff;
  border-radius: 2px 0 0 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-btn-back:active {
  transform: scale(.92) translateY(2px);
  box-shadow: 0 1px 0 #B8341F, inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.pill-btn {
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  border: none; background: var(--coral-soft); color: var(--coral);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.12), -2px -2px 6px var(--surface-highlight);
}
.pill-btn:active {
  transform: scale(.95);
  box-shadow: inset 3px 3px 6px rgba(var(--shadow-rgb), 0.2), inset -2px -2px 5px var(--surface-highlight);
}
.deck-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.progress-count { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }

.progress-track { height: 10px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; margin-bottom: 20px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--coral), var(--sun), var(--grass)); border-radius: var(--radius-pill); transition: width .35s ease; }

.card-body { display: contents; }
.card-actions { display: contents; }

.flashcard {
  --accent: var(--coral); --accent-soft: var(--coral-soft);
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 3px solid var(--accent);
  padding: 38px 24px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.14);
}
.flashcard[data-color="coral"] { --accent: var(--coral); --accent-soft: var(--coral-soft); }
.flashcard[data-color="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); }
.flashcard[data-color="sun"] { --accent: var(--sun); --accent-soft: var(--sun-soft); }

.mastered-badge {
  display: none; align-items: center; justify-content: center;
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: #5A3D00;
  font-size: 1.2rem; border: 3px solid var(--bg-card);
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.2);
}
.card-emoji { font-size: 6.2rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(var(--shadow-rgb), 0.15)); }
.card-word { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--accent); }
.card-meaning { font-size: 1.25rem; font-weight: 600; color: var(--ink-soft); }

.flashcard.celebrate { animation: celebrate .6s ease; }
@keyframes celebrate {
  0% { transform: scale(1); }
  30% { transform: scale(1.04) rotate(-1deg); }
  60% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1); }
}
.flashcard.shake { animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

.feedback { min-height: 1.4em; text-align: center; font-weight: 700; margin: 14px 0 6px; color: var(--ink-soft); }
.feedback.success { color: var(--grass); }
.feedback.retry { color: var(--coral); }
.feedback.listening { color: var(--sky); font-style: italic; }

.action-row { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.action-btn {
  flex: 1 1 180px; min-height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  cursor: pointer; color: #fff;
  box-shadow: 6px 6px 14px rgba(var(--shadow-rgb), 0.22), -4px -4px 10px var(--surface-highlight);
  transition: transform .12s ease, box-shadow .12s ease;
}
.action-btn:active {
  transform: scale(.96);
  box-shadow: inset 4px 4px 9px rgba(var(--shadow-rgb), 0.3), inset -3px -3px 7px rgba(255, 255, 255, 0.2);
}
.action-btn .action-icon { font-size: 1.4rem; }
.speak-btn { background: linear-gradient(135deg, var(--sky), #1c7fb8); }
.mic-btn { background: linear-gradient(135deg, var(--coral), #e0503b); }
.mic-btn.listening {
  background: linear-gradient(135deg, #ff4d4d, #c22a2a);
  animation: pulseMic 1s ease-in-out infinite;
}
@keyframes pulseMic {
  0%, 100% { box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.18), 0 0 0 0 rgba(255, 77, 77, .5); }
  50% { box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.18), 0 0 0 12px rgba(255, 77, 77, 0); }
}
.action-btn:disabled { opacity: .45; cursor: not-allowed; }

[hidden] { display: none !important; }

/* ---------- Quiz (trắc nghiệm) ---------- */
.quiz-view { max-width: 560px; margin: 0 auto; }
.quiz-card {
  --accent: var(--coral); --accent-soft: var(--coral-soft);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 3px solid var(--accent);
  padding: 30px 22px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.14);
  margin-bottom: 18px;
}
.quiz-card[data-color="coral"], .quiz-choices[data-color="coral"] { --accent: var(--coral); --accent-soft: var(--coral-soft); }
.quiz-card[data-color="sky"], .quiz-choices[data-color="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); }
.quiz-card[data-color="sun"], .quiz-choices[data-color="sun"] { --accent: var(--sun); --accent-soft: var(--sun-soft); }
.quiz-emoji { font-size: 5rem; line-height: 1; }
.quiz-question-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; letter-spacing: .02em; }
.quiz-meaning { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--accent); }

.quiz-choices {
  --accent: var(--coral);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.quiz-choice-btn {
  min-height: 58px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.12), -3px -3px 8px var(--surface-highlight);
  transition: transform .12s ease;
}
.quiz-choice-btn:active { transform: scale(.96); }
.quiz-choice-btn:disabled { cursor: not-allowed; }
.quiz-choice-btn.correct { background: var(--grass-soft); border-color: var(--grass); color: var(--grass); }
.quiz-choice-btn.wrong { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }

.quiz-feedback { min-height: 1.4em; text-align: center; font-weight: 700; margin: 16px 0 4px; color: var(--ink-soft); }
.quiz-feedback.success { color: var(--grass); }
.quiz-feedback.retry { color: var(--coral); }
.quiz-feedback.listening { color: var(--sky); font-style: italic; }

/* ---------- Memory match (Lật hình) ---------- */
.memory-view { max-width: 640px; margin: 0 auto; }
.memory-status { text-align: center; font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.memory-tile {
  box-sizing: border-box;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  perspective: 700px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.memory-tile-inner {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.memory-tile.flipped .memory-tile-inner,
.memory-tile.matched .memory-tile-inner { transform: rotateY(180deg); }
.memory-tile-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.12), -2px -2px 6px var(--surface-highlight);
}
.memory-tile-back {
  background: linear-gradient(135deg, var(--coral), var(--sun));
  color: #fff; font-size: 1.6rem; font-family: var(--font-display); font-weight: 800;
}
.memory-tile-front {
  background: var(--bg-card);
  border: 2px solid var(--border);
  transform: rotateY(180deg);
  padding: 4px;
  text-align: center;
}
.memory-tile-front.type-emoji { font-size: 2.2rem; }
.memory-tile-front.type-word { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--coral); }
.memory-tile.matched .memory-tile-front { background: var(--grass-soft); border-color: var(--grass); }
.memory-tile.matched .memory-tile-front.type-word { color: var(--grass); }
.memory-tile.wrong .memory-tile-inner { animation: shake .45s ease; }

/* ---------- Quiz result (kết quả) ---------- */
.quiz-result-view { max-width: 480px; margin: 0 auto; text-align: center; padding-top: 12px; }
.result-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 3px solid var(--gold);
  padding: 32px 24px;
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.14);
}
.result-score { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin-top: 10px; }
.result-stars { color: var(--ink-soft); font-weight: 600; margin-top: 6px; }
.result-actions { display: flex; gap: 12px; margin-top: 24px; }
.result-actions .action-btn { min-height: 56px; font-size: 1rem; }
.retry-btn { background: linear-gradient(135deg, var(--grass), #2b8a58); }
.home-btn { background: linear-gradient(135deg, var(--sun), #c9800f); }

/* ---------- Nút "Bé Làm Hoạ Sĩ" ở trang chủ ---------- */
.coloring-entry-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  max-width: 640px;
  margin: 22px auto 0;
  padding: 16px 20px;
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #9B5DE5, #FF6FA5);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.16);
  text-align: left;
}
.coloring-entry-btn:active { transform: scale(.98); }
.coloring-entry-icon { font-size: 2.4rem; flex: none; }
.coloring-entry-text { display: flex; flex-direction: column; }
.coloring-entry-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.coloring-entry-sub { font-size: 0.85rem; opacity: 0.9; font-weight: 600; }
.chat-entry-btn { background: linear-gradient(135deg, #D9A566, #A9744F); }
.duel-entry-btn { background: linear-gradient(135deg, #2A9BDB, #1c5f8a); }
.whack-entry-btn { background: linear-gradient(135deg, #F4A72E, #C9660D); }
.pitch-entry-btn { background: linear-gradient(135deg, #6C63FF, #4A42C4); }
.stories-entry-btn { background: linear-gradient(135deg, #E85D75, #A73755); }

/* ---------- Đấu Trí Ngôn Ngữ (2 người chơi, 2 máy) ---------- */
.duel-view { max-width: 560px; margin: 0 auto; }
.duel-sub-view { }

.duel-intro { text-align: center; color: var(--ink-soft); font-weight: 600; margin: 4px 0 22px; }

.duel-create-btn { width: 100%; background: linear-gradient(135deg, var(--sky), #1c7fb8); }
.duel-divider {
  text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 0.85rem;
  margin: 18px 0; position: relative;
}
.duel-divider::before, .duel-divider::after {
  content: ''; position: absolute; top: 50%; width: 40%; height: 2px; background: var(--border);
}
.duel-divider::before { left: 0; }
.duel-divider::after { right: 0; }

.duel-join-row { display: flex; gap: 10px; }
.duel-code-input {
  flex: 1; min-width: 0;
  border: 2px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: 0.2em; text-align: center;
  padding: 0 10px;
}
.duel-join-btn { flex: none; width: auto; padding: 0 22px; background: linear-gradient(135deg, var(--grass), #2b8a58); }
.duel-lobby-error { color: var(--coral); font-weight: 700; text-align: center; margin-top: 14px; min-height: 1.2em; }

.duel-waiting-body { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.duel-waiting-label { color: var(--ink-soft); font-weight: 700; }
.duel-code-display {
  font-family: var(--font-display); font-weight: 800; font-size: 3rem; letter-spacing: 0.3em;
  color: var(--sky); background: var(--sky-soft);
  border-radius: var(--radius-md); padding: 10px 28px;
}
.duel-waiting-spinner { color: var(--ink-soft); font-weight: 700; }

/* ---------- Đập Chuột Học Từ (Whack-a-Word) ----------
 * Lobby/waiting DUPLICATE có chủ đích các rule .duel-intro/.duel-code-
 * display/... ở trên (thay vì tái dùng thẳng class "duel-") — giữ mỗi
 * feature 1 namespace CSS riêng theo đúng convention đã có của dự án
 * (vd .catch-prompt tách biệt .bubble-prompt dù cấu trúc tương tự).
 *
 * Lưới hố chuột (#whackField): 6 hố CỐ ĐỊNH vị trí (khác Hứng táo —
 * vật rơi tự do toạ độ px) — chuột "ngoi lên" bằng cách dịch chuyển
 * .whack-mole-btn theo trục Y trong chính hố đó (JS toggle class "up",
 * transition CSS lo phần chuyển động, không cần rAF tính toạ độ va
 * chạm như Hứng táo — rAF ở tầng JS chỉ để quyết định LÚC NÀO hố nào
 * lên/xuống). */
.whack-view { max-width: 640px; margin: 0 auto; }

/* ---------- Thách Đấu Phát Âm (2 người chơi, 2 máy, đấu THEO LƯỢT) ----------
 * Cố tình TÁI DÙNG THẲNG các class ".whack-divider/.whack-join-row/
 * .whack-code-input/.whack-lobby-error/.whack-waiting-*" cho phần
 * lobby/waiting (giống hệt cấu trúc Duel/Whack) thay vì nhân bản lần
 * thứ 3 thành ".pitch-*" — tới lượt game thứ 3 dùng chung 1 kiểu lobby
 * y hệt thì coi như đã đủ ngưỡng để xem đây là 1 khối dùng chung
 * (dù tên class còn mang tiền tố "whack" từ lúc chỉ có 2 chỗ dùng). */
.pitch-view { max-width: 560px; margin: 0 auto; }
.pitch-create-btn { width: 100%; background: linear-gradient(135deg, #6C63FF, #4A42C4); }
.pitch-join-btn { flex: none; width: auto; padding: 0 22px; background: linear-gradient(135deg, var(--grass), #2b8a58); }
.pitch-turn-status {
  text-align: center; font-weight: 700; font-size: 0.92rem; color: var(--ink-soft);
  min-height: 1.3em; margin: 8px 0 12px;
}
.pitch-current-badge {
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  color: var(--sky); min-height: 1.3em; margin-top: 4px;
}

/* ---------- Lật Hình Trí Nhớ Siêu Tốc (2 người chơi, 2 máy, bàn cờ DÙNG CHUNG) ----------
 * Tái dùng ".whack-divider/.whack-join-row/.whack-code-input/
 * .whack-lobby-error/.whack-waiting-*" cho lobby/waiting (cùng lý do
 * đã ghi ở khối Thách Đấu Phát Âm phía trên) VÀ tái dùng nguyên vẹn
 * ".memory-grid/.memory-tile*" (định nghĩa ở khối "Memory match" phía
 * trên) cho lưới 12 thẻ — cùng 1 component hiển thị với minigame
 * 1-người, chỉ khác nguồn state (server thay vì click cục bộ). */
.flip-view { max-width: 640px; margin: 0 auto; }
.flip-entry-btn { background: linear-gradient(135deg, #FF9F5A, #E8672A); }
.flip-create-btn { width: 100%; background: linear-gradient(135deg, #6C63FF, #4A42C4); }
.flip-join-btn { flex: none; width: auto; padding: 0 22px; background: linear-gradient(135deg, var(--grass), #2b8a58); }
.flip-turn-status {
  text-align: center; font-weight: 700; font-size: 0.92rem; color: var(--ink-soft);
  min-height: 1.3em; margin: 8px 0 12px;
}

/* ---------- Relax (menu 6 hoạt động: Hoạ Sĩ/Trò Chuyện/Đấu Trí/Đập Chuột/Thách Đấu Phát Âm/Lật Hình Siêu Tốc) ---------- */
.relax-view { max-width: 640px; margin: 0 auto; }
.relax-view .coloring-entry-btn:first-of-type { margin-top: 4px; }

.whack-intro { text-align: center; color: var(--ink-soft); font-weight: 600; margin: 4px 0 22px; }
.whack-create-btn { width: 100%; background: linear-gradient(135deg, #F4A72E, #C9660D); }
.whack-divider {
  text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 0.85rem;
  margin: 18px 0; position: relative;
}
.whack-divider::before, .whack-divider::after {
  content: ''; position: absolute; top: 50%; width: 40%; height: 2px; background: var(--border);
}
.whack-divider::before { left: 0; }
.whack-divider::after { right: 0; }

.whack-join-row { display: flex; gap: 10px; }
.whack-code-input {
  flex: 1; min-width: 0;
  border: 2px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: 0.2em; text-align: center;
  padding: 0 10px;
}
.whack-join-btn { flex: none; width: auto; padding: 0 22px; background: linear-gradient(135deg, var(--grass), #2b8a58); }
.whack-lobby-error { color: var(--coral); font-weight: 700; text-align: center; margin-top: 14px; min-height: 1.2em; }

.whack-waiting-body { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.whack-waiting-label { color: var(--ink-soft); font-weight: 700; }
.whack-code-display {
  font-family: var(--font-display); font-weight: 800; font-size: 3rem; letter-spacing: 0.3em;
  color: #C9660D; background: #FDECD1;
  border-radius: var(--radius-md); padding: 10px 28px;
}
.whack-waiting-spinner { color: var(--ink-soft); font-weight: 700; }

.whack-timer-chip {
  flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--coral);
  background: var(--coral-soft); border-radius: var(--radius-pill); padding: 4px 14px;
  font-variant-numeric: tabular-nums;
}
.whack-timer-chip.urgent { color: #fff; background: var(--coral); animation: shake .5s ease infinite; }

.whack-command {
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--ink); margin: 2px 0 10px; min-height: 1.6em;
}

.whack-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}
.whack-hole {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--grass-soft), var(--bg-card));
  border: 2px solid var(--border);
  overflow: hidden;
}
.whack-hole-mound {
  position: absolute; left: 8%; right: 8%; bottom: 6%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.08) 70%, transparent);
}
.whack-mole-btn {
  position: absolute; left: 50%; bottom: 0;
  width: 74%; height: 74%;
  /* translateY tính theo % CHÍNH KÍCH THƯỚC PHẦN TỬ (không phải % hố)
     — 100% = đẩy xuống đúng 1 lần chiều cao của chính nó, ẩn hẳn dưới
     hố. Bản cũ dùng bottom:-8% (đẩy đáy box ra NGOÀI hố) kết hợp
     justify-content:flex-end khiến nhãn chữ (phần tử cuối, nằm sát đáy
     box) bị đúng vùng overflow:hidden của hố cắt mất — chỉ còn emoji
     hiện, chữ biến mất (bug thật user báo cáo). */
  transform: translate(-50%, 100%);
  border: none; background: transparent; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.whack-hole.up .whack-mole-btn { transform: translate(-50%, 0); }
.whack-mole-emoji { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 3px 4px rgba(var(--shadow-rgb), 0.25)); }
.whack-mole-label {
  font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: #fff;
  background: var(--coral); border-radius: var(--radius-pill); padding: 1px 8px; margin-top: 3px;
  white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.whack-hole.tapped-correct .whack-mole-label { background: var(--grass); }
.whack-hole.tapped-wrong .whack-mole-label { background: #a83228; animation: shake .3s ease; }

/* Bố cục 2 tầng: đối thủ nửa TRÊN, bé nửa DƯỚI (portrait-first —
   xếp chồng dọc thay vì chia trái/phải như bản màn ngang cũ). */
.duel-side-panel {
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  border: 2px solid var(--border);
}
.duel-opponent-panel { background: var(--sky-soft); border-color: var(--sky); margin-bottom: 8px; }
.duel-player-panel { background: var(--bg-card); }
.duel-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.duel-panel-name {
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duel-panel-score {
  flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--sky);
  background: var(--bg-card); border-radius: var(--radius-pill); padding: 2px 12px;
  font-variant-numeric: tabular-nums;
}
.duel-player-panel .duel-panel-score { color: var(--coral); }
.duel-opponent-status {
  text-align: center; font-weight: 700; font-size: 0.86rem; color: var(--ink-soft);
  min-height: 1.3em; margin-top: 6px;
}
.duel-opponent-status.answered { color: var(--coral); }

.duel-result-emoji { font-size: 4rem; line-height: 1; margin-bottom: 6px; }

/* ---------- Màn chọn chế độ chơi (Mode Select) ---------- */
.mode-select-view { max-width: 640px; margin: 0 auto; text-align: center; }
.mode-select-header { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; }
.mode-select-icon { font-size: 3rem; }
.mode-select-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px;
  border: none;
  border-radius: var(--radius-lg);
  color: #fff;
  cursor: pointer;
  box-shadow: 6px 6px 14px rgba(var(--shadow-rgb), 0.2), -4px -4px 10px var(--surface-highlight);
}
.mode-btn:active {
  transform: scale(.96);
  box-shadow: inset 4px 4px 9px rgba(var(--shadow-rgb), 0.3), inset -3px -3px 7px rgba(255, 255, 255, 0.2);
}
.mode-btn-icon { font-size: 2.2rem; }
.mode-btn-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.mode-btn[data-mode="card"] { background: linear-gradient(135deg, var(--sky), #1c7fb8); }
.mode-btn[data-mode="quiz"] { background: linear-gradient(135deg, var(--coral), #e0503b); }
.mode-btn[data-mode="memory"] { background: linear-gradient(135deg, var(--sun), #c9800f); }
.mode-btn[data-mode="bubble"] { background: linear-gradient(135deg, #2ec4b6, #1a8f84); }
.mode-btn[data-mode="spell"] { background: linear-gradient(135deg, var(--grass), #2b8a58); }
.mode-btn[data-mode="catch"] { background: linear-gradient(135deg, #E5463C, #a83228); }
.mode-btn[data-mode="whack-practice"] { background: linear-gradient(135deg, #2ec4b6, #1a8f84); }
.mode-btn[data-mode="whack-versus"] { background: linear-gradient(135deg, #F4A72E, #C9660D); }

/* ---------- Bắn bong bóng (Bubble Pop) ---------- */
.bubble-view { max-width: 640px; margin: 0 auto; }
.bubble-prompt { text-align: center; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.bubble-stage {
  position: relative;
  height: 300px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--sky-soft), var(--bg-card));
  border: 2px solid var(--border);
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -90px;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0.05)), var(--sky-soft);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.18), inset 0 0 12px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  animation: bubbleRise linear forwards;
}
@keyframes bubbleRise {
  from { transform: translateY(0); }
  to { transform: translateY(-460px); }
}
.bubble.pop { animation: bubblePop .35s ease forwards !important; pointer-events: none; }
@keyframes bubblePop {
  to { transform: scale(1.6); opacity: 0; }
}
.bubble-replay-row { display: flex; justify-content: center; margin-top: 14px; }

/* ---------- Hứng táo (Catch) ----------
 * Rổ (#catchBasket) di chuyển ngang theo tay bé kéo trên #catchStage
 * (JS gán trực tiếp style.left theo px, KHÔNG dùng CSS transition
 * cho vị trí — cần bám sát ngón tay tức thời). Táo rơi cũng được
 * JS cập nhật style.top mỗi khung hình (requestAnimationFrame),
 * không dùng CSS @keyframes vì tốc độ/toạ độ phải tính toán để va
 * chạm với rổ đang di chuyển tự do — @keyframes cố định trước không
 * làm được việc này. */
.catch-view { max-width: 640px; margin: 0 auto; }
.catch-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; margin-bottom: 8px; min-height: 66px;
}
.catch-prompt-label { font-weight: 700; color: var(--ink-soft); font-size: 0.78rem; }
.catch-prompt-emoji { font-size: 2.6rem; line-height: 1; }
.catch-prompt-word { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.catch-prompt-meaning { font-weight: 700; color: var(--ink-soft); font-size: 0.9rem; }

.catch-stage {
  position: relative;
  height: 320px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--sky-soft) 65%, var(--grass-soft));
  border: 2px solid var(--border);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.catch-tree { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 2.6rem; z-index: 1; pointer-events: none; }
.catch-apples { position: absolute; inset: 0; z-index: 1; }
.catch-apple {
  position: absolute; top: 0; left: 0;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; font-family: var(--font-display); color: #fff;
  padding: 6px 6px 3px;
  text-align: center;
  line-height: 1.05;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Chữ/emoji trong táo — PHẢI có position:relative (không được để
   text thô nằm trực tiếp trong .catch-apple), vì phần tử positioned
   (::before thân táo) luôn vẽ ĐÈ LÊN nội dung in-flow thường bất kể
   thứ tự DOM — nếu không bọc span riêng thì chữ bị thân táo che mất
   hoàn toàn (bug thật đã xảy ra). */
.catch-apple-label { position: relative; z-index: 1; }

/* Thân quả táo — bo góc lệch (đáy tròn hơn đỉnh) cho ra dáng quả
   thay vì hình tròn đều. */
.catch-apple::before {
  content: '';
  position: absolute; inset: 7px 0 0;
  border-radius: 46% 46% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1) 55%), linear-gradient(160deg, #FF7A64, #D6392C);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 12px rgba(var(--shadow-rgb), 0.2);
}
/* Lá táo */
.catch-apple::after {
  content: '';
  position: absolute; top: -3px; left: 56%;
  width: 15px; height: 10px;
  background: #4CAF50;
  border-radius: 0 100% 20% 100%;
  transform: rotate(-25deg);
  box-shadow: -1px 1px 2px rgba(var(--shadow-rgb), 0.2);
}
.catch-apple.is-word { font-size: 0.68rem; }
.catch-apple.caught { animation: catchPop .3s ease forwards; }
.catch-apple.missed { animation: catchFade .25s ease forwards; }
@keyframes catchPop { to { transform: scale(1.6); opacity: 0; } }
@keyframes catchFade { to { opacity: 0; } }

.catch-basket {
  position: absolute; bottom: 4px; left: 0;
  width: 72px; height: 58px;
  font-size: 2.5rem;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(var(--shadow-rgb), 0.25));
}
.catch-basket.catching { animation: catchBasketBounce .25s ease; }
@keyframes catchBasketBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.catch-feedback { text-align: center; font-weight: 700; min-height: 1.4em; margin-top: 10px; }
.catch-feedback.success { color: var(--grass); }
.catch-feedback.retry { color: var(--coral); }

/* ---------- Ghép từ thần tốc (Spelling) ---------- */
.spell-view { max-width: 600px; margin: 0 auto; }
.spell-card {
  --accent: var(--coral); --accent-soft: var(--coral-soft);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 3px solid var(--accent);
  padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.14);
  margin-bottom: 18px;
}
.spell-card[data-color="coral"] { --accent: var(--coral); --accent-soft: var(--coral-soft); }
.spell-card[data-color="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); }
.spell-card[data-color="sun"] { --accent: var(--sun); --accent-soft: var(--sun-soft); }
.spell-emoji { font-size: 4rem; }
.spell-meaning { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.spell-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 20px; }
.spell-slot {
  width: 42px; height: 48px;
  border-bottom: 4px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--accent);
}
.spell-slot.wrong-shake { animation: shake .4s ease; }
.spell-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.spell-letter-btn {
  width: 52px; height: 52px;
  border: none; border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 2px solid var(--border);
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.12), -2px -2px 6px var(--surface-highlight);
}
.spell-letter-btn:active { transform: scale(.92); }
.spell-letter-btn.used { visibility: hidden; }
.spell-letter-btn.wrong-shake { animation: shake .4s ease; }

/* ---------- Bé Làm Hoạ Sĩ (Coloring) ---------- */
.coloring-view { max-width: 560px; margin: 0 auto; text-align: center; }
.coloring-prompt { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; color: var(--ink); }
.coloring-canvas-wrap {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  margin-bottom: 16px;
}
.coloring-svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; cursor: pointer; }
.coloring-svg.wrong-shake { animation: shake .4s ease; }
.coloring-svg-fill { fill: #F4F1EA; stroke: var(--ink); stroke-width: 4; transition: fill .25s ease; }
.coloring-svg-outline { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.coloring-replay-row { display: flex; justify-content: center; margin-bottom: 14px; }
.coloring-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.coloring-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.coloring-swatch {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid var(--bg-card);
  /* outline riêng (không phải border) để luôn thấy rõ viền dù màu là
     trắng/rất sáng trùng với nền — border vẫn dành cho trạng thái
     .selected như cũ, không đụng vào. */
  outline: 1px solid rgba(var(--shadow-rgb), 0.18);
  box-shadow: 0 3px 8px rgba(var(--shadow-rgb), 0.2);
  cursor: pointer;
}
.coloring-swatch.selected { border-color: var(--ink); transform: scale(1.12); }
/* Nhãn chữ Anh dưới mỗi ô màu — bé phải ĐỌC + NỐI với âm vừa nghe để
   đoán, không còn phải đoán mò như trước (xem ghi chú app.js). */
.coloring-swatch-label { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); }
.coloring-feedback { min-height: 1.4em; font-weight: 700; margin-top: 14px; color: var(--ink-soft); }
.coloring-feedback.success { color: var(--grass); }
.coloring-feedback.retry { color: var(--coral); }

/* ---------- Trò chuyện cùng gấu (rule-based, Web Speech API) ---------- */
.chat-view { max-width: 560px; margin: 0 auto; text-align: center; }
.chat-bubble {
  position: relative;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  margin: 8px auto 0;
  max-width: 420px;
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.12);
}
.chat-bubble::after {
  content: '';
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--bg-card);
}
.chat-bubble-en { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.chat-bubble-vi { font-weight: 600; color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }
.chat-bear-wrap { display: flex; justify-content: center; transform: scale(1.55); margin: 26px 0 30px; }
.chat-hint { text-align: center; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; min-height: 1.2em; margin: 4px 0; }

/* ---------- Bạn AI Đồng Hành (chat tự do gọi Together.ai) ---------- */
.companion-ai-entry-btn { background: linear-gradient(135deg, #7C6CE0, #4B3F9E); }
.companion-ai-bear-wrap { transform: scale(1.1); margin: 10px 0 6px; }
.companion-ai-log {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
  padding: 4px 4px 8px;
  max-height: 260px;
  overflow-y: auto;
}
.companion-ai-msg {
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 85%;
  line-height: 1.4;
  white-space: pre-wrap;
}
.companion-ai-msg-bot {
  align-self: flex-start;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.companion-ai-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7C6CE0, #4B3F9E);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* ---------- Học Từ Qua Ảnh Thật (Cloud Vision + Together.ai) ---------- */
.vision-entry-btn { background: linear-gradient(135deg, #3FAE72, #227A4C); }
.vision-capture-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; max-width: 420px; margin: 4px auto;
  min-height: 110px;
  border: 3px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.vision-capture-btn:active { transform: scale(.98); }
.vision-capture-icon { font-size: 2.6rem; }
.vision-preview-img {
  display: block; max-width: 200px; max-height: 200px;
  margin: 12px auto; border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.15);
}
.vision-flashcard {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 22px;
  margin: 12px auto; max-width: 420px; text-align: center;
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.12);
}
.vision-flashcard-word { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.vision-flashcard-phonetic { color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.vision-speak-btn { margin: 10px auto 4px; min-height: 44px; padding: 0 20px; }
.vision-flashcard-example-en { margin-top: 12px; font-weight: 700; }
.vision-flashcard-example-vi { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }
.vision-flashcard-quiz { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.vision-flashcard-quiz-q { font-weight: 700; margin-bottom: 10px; }
.vision-quiz-reveal-btn { width: auto; min-height: 42px; padding: 0 18px; }
.vision-flashcard-quiz-a { margin-top: 10px; color: var(--grass); font-weight: 700; }
.vision-vocab-header { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-align: center; margin: 18px 0 8px; color: var(--ink); }
.vision-word-list { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin: 0 auto 12px; }
.vision-word-item {
  display: block; width: 100%; text-align: left;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px;
  font-weight: 700; color: var(--ink);
}
.vision-word-item-detail { margin-top: 6px; font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Chuyển đổi chế độ học: Newbie / Professional ---------- */
.mode-switcher {
  display: flex; gap: 6px;
  background: var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: 12px auto 4px;
  max-width: 360px;
}
.mode-switch-btn {
  flex: 1;
  border: none; border-radius: var(--radius-pill);
  padding: 9px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mode-switch-btn.active {
  background: var(--bg-card); color: var(--ink);
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.15);
}

/* ---------- Chế độ Professional: Lộ trình Level → Unit → Lesson ---------- */
.professional-view { max-width: 720px; margin: 0 auto; }

.prof-level-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.prof-level-tab {
  flex: 1;
  border: 2px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  padding: 10px 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.prof-level-tab.active {
  background: var(--sky); border-color: var(--sky); color: #fff;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.15);
}

.prof-unit-list { display: flex; flex-direction: column; gap: 14px; }
.prof-unit-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.08);
}
.prof-unit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.prof-unit-icon { font-size: 1.4rem; }
.prof-unit-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.prof-lesson-row { display: flex; gap: 10px; flex-wrap: wrap; }
.prof-lesson-btn {
  flex: 1 1 45%;
  display: flex; flex-direction: column; gap: 2px;
  border: none; border-radius: var(--radius-md);
  background: var(--sky-soft);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.1);
  transition: transform .12s ease;
}
.prof-lesson-btn:active { transform: scale(.97); }
.prof-lesson-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.prof-lesson-sub { font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- Chế độ Professional: Flashcard ảnh thật + cấu trúc câu ---------- */
.prof-vocab-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 16px;
}
.prof-vocab-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.08);
  transition: transform .12s ease;
}
.prof-vocab-card:active { transform: scale(.96); }
.prof-vocab-photo {
  /* contain, KHÔNG dùng cover — xem lý do ở .prof-match-image-btn img
   * (cùng lớp bug: ảnh Wikimedia tỉ lệ/bố cục bất kỳ, cover cắt theo
   * tâm khung sẽ mất chủ thể ở nhiều ảnh dọc/lệch tâm). */
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--border);
}
.prof-vocab-word { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.prof-vocab-phonetic { font-size: 0.75rem; color: var(--sky); }
.prof-vocab-meaning { font-size: 0.78rem; color: var(--ink-soft); }

.prof-grammar-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.prof-grammar-card {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  border: none; border-left: 4px solid var(--sun);
  background: var(--sun-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
}
.prof-grammar-pattern { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.prof-grammar-meaning { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.prof-grammar-usage { font-size: 0.76rem; color: var(--ink-soft); }
.prof-grammar-example { font-size: 0.8rem; color: var(--sun); font-style: italic; }
.prof-grammar-example-vi { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; }

.prof-start-quiz-btn { width: 100%; background: linear-gradient(135deg, var(--grass), #2C8A5A); }

/* ---------- Chế độ Professional: Quiz động (ảnh thật) ---------- */
.prof-quiz-card { align-items: center; }
.prof-quiz-photo {
  /* contain, KHÔNG dùng cover — cùng lý do ở .prof-vocab-photo. */
  width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--border);
  margin: 0 auto 10px;
}

/* ---------- Chế độ Professional: bài tập Nối ảnh-từ (matchImage) ---------- */
.prof-match-wrap { margin-bottom: 16px; }
.prof-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.prof-match-col { display: flex; flex-direction: column; gap: 8px; }
.prof-match-word-btn {
  min-height: 44px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.1), -2px -2px 6px var(--surface-highlight);
  transition: transform .12s ease;
}
.prof-match-image-btn {
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.1), -2px -2px 6px var(--surface-highlight);
  transition: transform .12s ease;
}
.prof-match-image-btn img {
  /* aspect-ratio 1/1 (KHÔNG phải height cố định 74px như trước) — khung
   * dẹt ngang (~5:1) khiến contain phải thu ảnh bé tí để không cắt mất
   * gì (bug thật thứ 2: sửa cover->contain xong thì ảnh lọt thỏm giữa
   * khoảng trắng). Khung vuông cho contain đủ chỗ hiện ảnh rõ ràng dù
   * ảnh dọc/ngang/vuông, chỉ viền trắng nhẹ 2 bên nếu lệch tỉ lệ.
   * max-width chặn ảnh phình to hết cỡ cột trên màn rộng (#app rộng
   * tới 900px) — trên điện thoại thật (mục tiêu chính của app) cột đã
   * hẹp sẵn nên gần như không bị chặn bởi mốc này. */
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1; margin: 0 auto; display: block;
  /* contain, KHÔNG dùng cover — ảnh từ vựng lấy từ Wikimedia có đủ
   * loại tỉ lệ khung/vị trí chủ thể, cover sẽ cắt theo TÂM khung bất
   * kể chủ thể nằm đâu (bug thật thứ 1: ảnh dọc bị cắt mất phần chính,
   * bé không thấy được con vật/đồ vật cần học là gì). */
  object-fit: contain; background: var(--bg-card);
  border-radius: calc(var(--radius-md) - 3px);
}
.prof-match-word-btn:active, .prof-match-image-btn:active { transform: scale(.96); }
.prof-match-word-btn.selected, .prof-match-image-btn.selected { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.prof-match-word-btn.matched, .prof-match-image-btn.matched { border-color: var(--grass); background: var(--grass-soft); opacity: .7; cursor: default; }
.prof-match-word-btn.wrong-shake, .prof-match-image-btn.wrong-shake { animation: shake .4s ease; }

/* ---------- Chế độ Professional: bài tập Nói lại (speakRepeat) ---------- */
.prof-speak-wrap { text-align: center; margin-bottom: 16px; }
.prof-speak-target {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--coral);
  margin: 6px 0 14px;
}
.prof-speak-skip-btn { display: block; margin: 12px auto 0; }
/* Nút "Nghe giọng con" (js/pronCoach.js) — hiện sau lần đọc sai đầu tiên. */
.voice-compare-btn {
  display: block; margin: 10px auto 0; height: 44px; padding: 0 18px;
  background: var(--sky-soft); color: var(--sky); font-size: 0.95rem;
}
/* Lối vào "Từ cần luyện" (js/practiceWords.js) ở màn chủ đề Newbie. */
.practice-words-btn {
  display: block; width: 100%; max-width: 520px; margin: 0 auto 16px; padding: 12px 16px;
  border: 2px dashed var(--coral); border-radius: var(--radius-pill);
  background: var(--coral-soft); color: var(--coral);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.practice-words-btn:active { transform: scale(.98); }

/* ---------- Chế độ Professional: bài Nghe-hiểu mẫu câu (sentenceListen) ---------- */
.prof-sentence-wrap { text-align: center; margin-bottom: 16px; }
.prof-sentence-target {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--coral);
  margin: 8px 0 12px; line-height: 1.3;
}
.prof-sentence-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.prof-sentence-choice-btn {
  min-height: 44px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.1), -2px -2px 6px var(--surface-highlight);
  transition: transform .12s ease;
}
.prof-sentence-choice-btn:active { transform: scale(.98); }
.prof-sentence-choice-btn:disabled { cursor: not-allowed; }
.prof-sentence-choice-btn.correct { background: var(--grass-soft); border-color: var(--grass); color: var(--grass); }
.prof-sentence-choice-btn.wrong { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }

/* ---------- Chế độ Professional: bài tập Đánh vần (spelling) ----------
 * Tái dùng gần như nguyên vẹn .spell-card/.spell-meaning/.spell-slots/
 * .spell-letters/.spell-letter-btn của Newbie Mode (Ghép từ thần tốc)
 * — chỉ thêm ảnh thật (.prof-spell-photo, dùng chung .prof-quiz-photo
 * đã có) thay cho .spell-emoji vì Pro Mode dùng ảnh thật xuyên suốt,
 * không dùng emoji. */
.prof-spell-wrap { text-align: center; margin-bottom: 16px; }
.prof-spell-photo { margin-bottom: 6px; }

/* ---------- Chế độ Professional: khoá/tiến độ Unit + Ôn tập tổng hợp Unit ---------- */
.prof-unit-progress { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.prof-unit-mastered-badge {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 800; color: var(--grass);
  background: var(--grass-soft); border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.prof-unit-header { justify-content: flex-start; }
.prof-unit-locked { opacity: .55; }
.prof-unit-locked .prof-unit-progress { font-style: italic; }
.prof-unit-review-btn {
  width: 100%; min-height: 48px; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold), #E0A400);
  color: #5A3D00;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.16), -3px -3px 8px var(--surface-highlight);
  transition: transform .12s ease;
}
.prof-unit-review-btn:active { transform: scale(.97); }
.prof-unit-review-btn-secondary {
  background: var(--sky-soft); color: var(--sky);
  box-shadow: none; border: 2px solid var(--sky);
}

/* ---------- Chế độ Professional: Ôn tập & Lặp lại ngắt quãng ---------- */
.prof-daily-review-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  border: none; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sky), #2E7BC4);
  color: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  text-align: left;
  box-shadow: 4px 4px 10px rgba(var(--shadow-rgb), 0.16), -3px -3px 8px var(--surface-highlight);
  transition: transform .12s ease;
}
.prof-daily-review-card:active { transform: scale(.98); }
.prof-daily-review-card:disabled { cursor: default; }
.prof-daily-review-icon { font-size: 1.8rem; flex: none; }
.prof-daily-review-text { display: flex; flex-direction: column; gap: 2px; }
.prof-daily-review-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.prof-daily-review-sub { font-size: 0.82rem; opacity: .92; }
.prof-daily-review-card.prof-daily-review-done {
  background: var(--grass-soft); color: var(--grass);
  box-shadow: none; border: 2px solid var(--grass);
}

.prof-checkpoint-card { border-color: var(--coral); background: var(--coral-soft); }
.prof-checkpoint-card .prof-unit-review-btn:not(.prof-unit-review-btn-secondary) {
  background: linear-gradient(135deg, var(--coral), #C23B3B); color: #fff;
}

/* ---------- Rewards modal (Thành tích) ---------- */
.rewards-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(var(--shadow-rgb), 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rewards-panel {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 480px; width: 100%;
  /* max-height dùng % vì .rewards-modal luôn là position:fixed;inset:0
     nên % ở đây quy về đúng chiều cao THẬT đang hiện ra. */
  max-height: 80%; overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.3);
}
.rewards-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rewards-panel-title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
/* ---------- Thành Tích: tổng quan (sao/streak/từ đã thuộc) ---------- */
.achievement-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.achievement-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--sun-soft); border-radius: var(--radius-md);
  padding: 10px 6px;
}
.achievement-stat-icon { font-size: 1.3rem; }
.achievement-stat-value {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.achievement-stat-label { font-size: 0.66rem; color: var(--ink-soft); font-weight: 600; text-align: center; }

/* ---------- Nhật Ký Tuần ---------- */
.weekly-recap-panel { max-width: 380px; }
.weekly-recap-mascot { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 14px; }
.weekly-recap-mascot-icon { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 6px 12px rgba(var(--shadow-rgb), 0.25)); margin-bottom: 4px; }
.weekly-recap-greeting { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.weekly-recap-funny {
  background: var(--sky-soft); border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 16px;
}
.weekly-recap-funny-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.weekly-recap-funny-body { font-size: 0.85rem; color: var(--ink); line-height: 1.4; }
.weekly-recap-empty { text-align: center; color: var(--ink-soft); font-size: 0.9rem; padding: 20px 8px; }

.rewards-section-label {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  color: var(--ink-soft); margin: 6px 0 -2px;
  padding-top: 10px; border-top: 2px dashed var(--border);
}
.rewards-section-label:first-child { padding-top: 0; border-top: none; margin-top: 0; }

.rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reward-card {
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  border: 2px solid var(--border);
}
.reward-card.unlocked { background: var(--sun-soft); border-color: var(--gold); }
.reward-card.locked { opacity: .55; }
.reward-card.clickable { cursor: pointer; transition: transform .12s ease; }
.reward-card.clickable:active { transform: scale(.96); }
.reward-icon { font-size: 2rem; }
.reward-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-top: 4px; }
.reward-desc { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Chi tiết Huy hiệu (bấm vào huy hiệu đã mở khoá) ---------- */
.badge-detail-panel {
  max-width: 340px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; padding-top: 36px;
}
.badge-detail-close { position: absolute; top: 10px; right: 10px; }
.badge-detail-icon {
  font-size: 4.4rem; line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(var(--shadow-rgb), 0.25));
  margin-bottom: 6px;
}
.badge-detail-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.badge-detail-source {
  font-size: 0.75rem; font-weight: 700; color: var(--gold);
  background: var(--sun-soft); border-radius: var(--radius-pill);
  padding: 3px 12px; margin: 8px 0 12px;
}
.badge-detail-desc { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Bảng xếp hạng gia đình ---------- */
.leaderboard-list { display: flex; flex-direction: column; gap: 10px; }
.leaderboard-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg-card);
}
.leaderboard-row.me { border-color: var(--coral); background: var(--coral-soft); }
.leaderboard-rank { flex: none; width: 30px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.leaderboard-name { flex: 1; min-width: 0; font-weight: 700; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-name-you { font-size: 0.7rem; font-weight: 700; color: var(--coral); margin-left: 6px; }
.leaderboard-stars { flex: none; display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--sun); }
.leaderboard-empty { text-align: center; color: var(--ink-soft); font-weight: 600; padding: 24px 0; }

/* ---------- Sổ Từ Vựng (Word Book) ---------- */
.prof-wordbook-entry-btn { background: linear-gradient(135deg, var(--grass), #2C8A5A); }
.prof-wordbook-summary { text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; margin-bottom: 12px; }
.prof-wordbook-list { display: flex; flex-direction: column; gap: 10px; }
.prof-wordbook-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.08);
  transition: transform .12s ease;
}
.prof-wordbook-row:active { transform: scale(.98); }
.prof-wordbook-photo { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; background: var(--border); }
.prof-wordbook-text { flex: 1; min-width: 0; }
.prof-wordbook-word { font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-wordbook-meaning { font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-wordbook-tier { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.prof-wordbook-dots { display: flex; gap: 3px; }
.prof-wordbook-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; }
.prof-wordbook-dot.filled { background: var(--gold); border-color: var(--gold); }
.prof-wordbook-tier-label { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.prof-wordbook-empty { text-align: center; color: var(--ink-soft); font-weight: 600; padding: 24px 0; }

/* ---------- Luyện theo Ngữ pháp (Grammar Practice, chỉ Pro Mode) ---------- */
.prof-grammar-practice-entry-btn { background: linear-gradient(135deg, var(--coral), #C24632); }
.prof-grammar-practice-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.prof-grammar-practice-item {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  border: none; border-left: 4px solid var(--coral);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.08);
  transition: transform .12s ease;
}
.prof-grammar-practice-item:active { transform: scale(.98); }
.prof-grammar-practice-pattern { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.prof-grammar-practice-meaning { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.prof-grammar-practice-count { font-size: 0.76rem; color: var(--coral); }

/* ---------- Sổ Tay Câu Tiếng Anh (Grammar Notebook — dùng chung Newbie/Pro, vào từ menu Relax) ---------- */
.grammar-book-entry-btn { background: linear-gradient(135deg, #2FBFB0, #1B8377); }
.grammar-book-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.grammar-book-item {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  border: none; border-left: 4px solid var(--sun);
  background: var(--sun-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.08);
  transition: transform .12s ease;
}
.grammar-book-item:active { transform: scale(.98); }
.grammar-book-pattern { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.grammar-book-meaning { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.grammar-book-usage { font-size: 0.78rem; color: var(--ink-soft); }
.grammar-book-example { font-size: 0.82rem; color: var(--sun); font-style: italic; }
.grammar-book-example-vi { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }

/* ---------- Truyện Tranh Nghe Kể ---------- */
.stories-view { max-width: 560px; margin: 0 auto; }
.stories-sub-view { }

.story-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.story-list-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--ink);
  cursor: pointer; text-align: left;
}
.story-list-item:active { transform: scale(.98); }
.story-list-thumb {
  flex: none; width: 64px; height: 64px;
  object-fit: cover; border-radius: var(--radius-md);
  background: var(--bg-soft);
}
.story-list-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.story-list-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.story-list-sub { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }

.story-page { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 6px 4px 22px; }
.story-page-image {
  display: block; width: 100%; max-width: 280px; aspect-ratio: 4/3;
  object-fit: contain; background: var(--bg-card);
  border: 2px solid var(--border); border-radius: var(--radius-lg);
}
.story-page-en { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.story-page-vi { font-size: 0.95rem; color: var(--ink-soft); font-weight: 600; }

.story-page-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.story-next-btn { width: 100%; background: linear-gradient(135deg, #E85D75, #A73755); }

/* ---------- Shop (đổi phụ kiện cho gấu) ----------
 * Portrait-first: khu preview linh vật (.shop-preview) đứng CỐ ĐỊNH
 * phía trên (không cuộn theo), chỉ #shopGrid cuộn riêng bên trong —
 * nên .shop-panel tự quản lý overflow của chính nó (không cuộn cả
 * khối như .rewards-panel gốc), dùng flex column để chia 2 vùng. */
.shop-panel { display: flex; flex-direction: column; overflow-y: hidden; }
/* Mọi khối cố định trong .shop-panel (header/preview/balance/tabs)
   PHẢI có flex:none — nếu không, flex-column mặc định co (shrink)
   TẤT CẢ con để vừa max-height, kể cả .shop-tabs (có overflow-x:auto
   nên "hợp lệ" để bị co xuống gần 0 thay vì #shopGrid — bug thật đã
   xảy ra: tab bị ép còn ~18px cao, chữ tên tab biến mất khỏi màn
   hình). CHỈ #shopGrid (flex:1, xem dưới) được phép co giãn. */
.shop-panel > .rewards-panel-header,
.shop-panel > .shop-preview,
.shop-panel > .shop-balance,
.shop-panel > .shop-tabs { flex: none; }
.shop-preview {
  display: flex; align-items: center; justify-content: center;
  background: var(--sun-soft);
  border-radius: var(--radius-md);
  padding: 10px; margin-bottom: 12px;
}
.shop-preview-scale { transform: scale(0.9); pointer-events: none; }
.shop-balance {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--sun-soft); color: var(--sun);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  margin-bottom: 16px;
}
.shop-tabs {
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.shop-tabs::-webkit-scrollbar { height: 4px; }
.shop-tab {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  cursor: pointer; white-space: nowrap;
}
.shop-tab.active { background: var(--coral); border-color: var(--coral); color: #fff; }

.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; overflow-y: auto; padding-bottom: 4px; }
.shop-item {
  border-radius: var(--radius-md);
  padding: 12px 10px 10px;
  text-align: center;
  border: 2px solid var(--border);
  background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.shop-item-icon { font-size: 2rem; }
/* Icon linh vật trong Vườn Linh Vật: to hơn phụ kiện thường + khung
   cao cố định, để 🐰🐱🦕🐉 (mỗi glyph "nặng" thị giác khác nhau) vẫn
   thẳng hàng, cùng kích thước cảm nhận khi xếp cạnh nhau trong Cửa hàng. */
.mascot-shop-icon {
  font-size: 2.7rem; height: 2.9rem;
  display: flex; align-items: center; justify-content: center;
}
.shop-item-name { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; }
.mascot-name-row { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; }
.mascot-name-row .shop-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mascot-rename-btn {
  flex: none;
  border: none; background: transparent; padding: 2px;
  font-size: 0.8rem; line-height: 1;
  cursor: pointer; opacity: .65;
}
.mascot-rename-btn:active { transform: scale(.9); opacity: 1; }

.mascot-rename-panel { max-width: 360px; }
.shop-item-btn {
  margin-top: 6px;
  width: 100%;
  min-height: 34px;
  border: none; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  cursor: pointer;
  background: var(--coral); color: #fff;
}
.shop-item.owned .shop-item-btn { background: var(--grass-soft); color: var(--grass); }
.shop-item.equipped { border-color: var(--gold); background: var(--sun-soft); }
.shop-item.equipped .shop-item-btn { background: var(--gold); color: #5A3D00; }
.shop-item.unaffordable .shop-item-btn { background: var(--border); color: var(--ink-soft); cursor: not-allowed; }

.shop-item-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--border);
}
.shop-item-swatch-square { border-radius: var(--radius-md) / 40%; }
.shop-item-swatch-ring { background: var(--bg-card); }

/* ---------- Tài khoản (đăng nhập / đăng ký) ---------- */
.rewards-btn.logged-in { border-color: var(--grass); background: var(--grass-soft); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  cursor: pointer;
}
.auth-tab.active { background: var(--coral); color: #fff; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
}
.auth-input {
  min-height: 46px;
  width: 100%;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
}
.auth-input:focus { outline: none; border-color: var(--coral); }
.auth-input-wrap { position: relative; display: block; }
.auth-input-wrap .auth-input { padding-right: 44px; }
.auth-toggle-pw {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.auth-toggle-pw:active { opacity: 1; }
.auth-hint { font-size: 0.72rem; color: var(--ink-soft); margin-top: -4px; }
.auth-error { min-height: 1.2em; font-size: 0.85rem; font-weight: 700; color: var(--coral); text-align: center; }
.auth-submit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--coral), #e0503b);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 3px 3px 8px rgba(var(--shadow-rgb), 0.15), -2px -2px 6px var(--surface-highlight);
  transition: transform .12s ease;
}
.auth-submit-btn:active {
  transform: scale(.97);
  box-shadow: inset 3px 3px 6px rgba(var(--shadow-rgb), 0.2), inset -2px -2px 5px var(--surface-highlight);
}
.auth-welcome { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; text-align: center; margin-bottom: 8px; }
.auth-sub { text-align: center; color: var(--ink-soft); font-weight: 600; margin-bottom: 20px; }

/* ---------- Hướng dẫn cài giọng đọc tiếng Việt ---------- */
.voice-hint-intro { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; margin: 0 0 14px; }
.voice-hint-steps {
  margin: 0 0 18px; padding-left: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.voice-hint-steps li { font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.voice-hint-steps li strong { color: var(--coral); }
.auth-logout-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  min-height: 46px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--coral);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.auth-logout-btn:active { transform: scale(.97); background: var(--coral-soft); }

/* ---------- Reward unlock toast ---------- */
#toastLayer { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.reward-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.2);
  animation: toastIn .4s cubic-bezier(.2, .8, .3, 1) both;
}
.reward-toast.leaving { animation: toastOut .4s ease forwards; }
.reward-toast-icon { font-size: 1.8rem; }
.reward-toast-text { font-size: 0.85rem; line-height: 1.3; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-10px) scale(.95); }
}

/* ---------- FX layers ---------- */
#starPopLayer { position: fixed; inset: 0; pointer-events: none; z-index: 51; overflow: hidden; }

/* Khung giao diện (vật phẩm Cửa hàng nhóm "frame") — viền đè cố định
   quanh mép màn hình, không chiếm layout (box-shadow inset) nên
   không phá bố cục ép ngang. Mặc định trong suốt khi chưa trang bị
   món nào (var(--frame-color) không được set). */
#frameOverlay {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  box-shadow: inset 0 0 0 6px var(--frame-color, transparent);
}

/* Số phiên bản nhỏ ở góc dưới trái — để đối chiếu máy đã tải bản
   mới nhất chưa sau mỗi lần deploy. Nhớ đổi số này CÙNG LÚC với
   ?v= và CACHE_NAME mỗi lần deploy (xem kỷ luật cache-busting).
   Bấm vào để tự kiểm tra + xoá cache cập nhật bản mới (app.js). */
.app-version {
  position: fixed;
  left: max(4px, env(safe-area-inset-left));
  bottom: max(2px, env(safe-area-inset-bottom));
  z-index: 40;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--ink-soft);
  opacity: 0.45;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.app-version:active { opacity: 0.85; }

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

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .brand-logo { height: 20px; }
  .brand-tag { font-size: 0.62rem; }
  .mascot { width: 44px; height: 44px; }
  .star-chip { padding: 6px 12px; font-size: 0.95rem; }
  .home-title { font-size: 1.6rem; }
  .card-emoji { font-size: 4.8rem; }
  .card-word { font-size: 2.1rem; }
  .quiz-choices { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .action-btn { flex-basis: 100%; }
}

/* ---------- Portrait-first: layout gọn cho điện thoại cầm DỌC ----------
 * TRƯỚC ĐÂY app ép mọi điện thoại dọc hiển thị ngang bằng
 * `transform: rotate(90deg)` trên <html> (đã XOÁ HẲN — xem lịch sử
 * git/memory nếu cần tham khảo lại cơ chế cũ). Giờ app chạy portrait
 * NATIVE thật — không xoay gì cả, khối này viết riêng cho khung
 * HẸP-CAO (điện thoại dọc thật), khác hẳn bản cũ vốn tính cho khung
 * RỘNG-THẤP (~812x375, do bị xoay giả). Mọi giá trị bên trong (số
 * cột grid, chiều cao stage game, kích thước nút...) đã tính lại
 * riêng cho tỉ lệ dọc, KHÔNG phải chỉ đổi tên selector.
 *
 * CHỈ áp dụng khi `orientation: portrait` — điện thoại bị xoay ngang
 * THẬT (người dùng tự xoay) sẽ rơi về style mobile-first mặc định
 * (không tối ưu sâu riêng, nhưng không vỡ layout) — ngoài phạm vi
 * yêu cầu đợt này.
 * -------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 600px) {
  #app { max-width: 960px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 3px; }
  .brand-logo { height: 20px; }
  .brand-tag { display: none; }
  .css-bear-deco { display: none; }
  .home-view { padding-top: 4px; }
  .home-header { gap: 0; }
  .home-title { font-size: 1.7rem; }
  .home-sub { display: block; font-size: 0.95rem; margin: 6px 0 16px; }
  .install-app-btn { padding: 12px 16px; margin-bottom: 12px; font-size: 1rem; gap: 8px; }
  .install-app-icon { font-size: 1.4rem; }

  .daily-quest-card { padding: 18px 20px; margin-bottom: 16px; }
  .daily-quest-title { font-size: 1.15rem; }
  .daily-quest-count { font-size: 1rem; padding: 4px 14px; }
  .daily-quest-row { padding: 12px 14px; gap: 12px; }
  .daily-quest-icon { font-size: 1.4rem; }
  .daily-quest-label { font-size: 0.95rem; }
  .daily-quest-progress { font-size: 0.9rem; }
  .daily-quest-chest-btn { min-height: 56px; font-size: 1.05rem; }

  /* User đã 2 lần phản hồi "nhìn muốn hư mắt" (lần 1 ở bản landscape
     cũ, lần 2 ngay sau khi chuyển portrait) — portrait vốn cuộn tự
     nhiên, không còn ngân sách ~375px cứng như trước, nên KHÔNG có lý
     do giữ chữ/thẻ nhỏ nữa. Ưu tiên TO RÕ, chấp nhận cuộn nhiều hơn:
     topic-grid xuống hẳn 1 CỘT full-width (thẻ ngang, icon+chữ to). */
  .topic-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .topic-card { padding: 18px 20px; gap: 10px; }
  .topic-icon { width: 68px; height: 68px; font-size: 2.1rem; border-width: 3px; }
  .topic-en { font-size: 1.4rem; }
  .topic-vi { font-size: 1.05rem; }
  .topic-preview { font-size: 1.5rem; }
  .topic-progress { margin-top: 4px; gap: 6px; }
  .topic-progress-track { height: 8px; }
  .topic-progress span { font-size: 0.92rem; }
  .topic-tap-hint { font-size: 0.85rem; }
  /* Flashcard: base .card-body/.card-actions dùng display:contents
     (xem dòng ~665) — KHÔNG override sang flex-row nữa như bản ép
     ngang cũ, để ảnh/thẻ và các nút hành động tự xếp CHỒNG DỌC theo
     đúng thứ tự DOM (thẻ trên, nút dưới) — đúng tinh thần portrait. */
  .card-view, .quiz-view { max-width: 820px; }
  .flashcard { padding: 30px 22px; justify-content: center; margin-top: 4px; }
  .card-emoji { font-size: 5.6rem; }
  .card-word { font-size: 2.5rem; }
  .card-meaning { font-size: 1.3rem; }

  .feedback { margin: 12px 0 0; min-height: 1.2em; font-size: 1.05rem; }
  .action-row { margin-top: 12px; flex-direction: column; gap: 12px; }
  .action-btn { min-height: 56px; font-size: 1.05rem; flex-basis: auto; }

  .card-topbar { margin-bottom: 10px; }
  .progress-track { margin-bottom: 12px; }

  /* Đáp án trắc nghiệm xếp CHỒNG DỌC (1 cột) thay vì lưới 2x2 — vùng
     chạm mỗi đáp án to hẳn, đủ khoảng cách (gap) tránh bấm nhầm. */
  .quiz-card { padding: 18px 20px; gap: 8px; margin-bottom: 14px; }
  .quiz-emoji { font-size: 3.6rem; }
  .quiz-question-label { font-size: 0.95rem; }
  .quiz-meaning { font-size: 1.7rem; }
  .quiz-choices { grid-template-columns: 1fr; gap: 12px; }
  .quiz-choice-btn { min-height: 58px; font-size: 1.2rem; border-radius: var(--radius-pill); }
  .quiz-feedback { margin: 10px 0 0; min-height: 1em; font-size: 1.12rem; }

  .memory-view { max-width: 960px; }
  .memory-status { margin-bottom: 10px; font-size: 1.1rem; }
  .memory-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .memory-tile-back { font-size: 1.7rem; }
  .memory-tile-front.type-emoji { font-size: 2.5rem; }
  .memory-tile-front.type-word { font-size: 0.98rem; }

  .result-card { padding: 18px 22px; }
  .result-actions { margin-top: 12px; }
  .result-actions .action-btn { min-height: 50px; font-size: 1rem; }

  #companionBear { width: 56px; height: 52px; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  #companionBear .companion-scale { transform: scale(0.66); }

  /* Cửa hàng: xem .shop-preview (khu preview mascot cố định phía
     trên modal) ở rule riêng gần .shop-grid trong phần base CSS —
     #shopGrid cuộn riêng bên trong, preview luôn đứng yên phía trên. */
  .rewards-panel, .shop-panel { padding: 18px; max-height: 92dvh; }
  .rewards-panel-title { font-size: 1.15rem; }
  .shop-grid, .rewards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .shop-tabs { margin-bottom: 12px; }
  .shop-tab { padding: 11px 16px; font-size: 1rem; min-height: 44px; }
  .shop-balance { padding: 10px 18px; font-size: 1.15rem; margin-bottom: 12px; }

  .achievement-stats { gap: 10px; margin-bottom: 14px; }
  .achievement-stat { padding: 12px 6px; }
  .achievement-stat-icon { font-size: 1.3rem; }
  .achievement-stat-value { font-size: 1.15rem; }
  .achievement-stat-label { font-size: 0.72rem; }
  .rewards-section-label { font-size: 0.94rem; margin: 8px 0 -2px; padding-top: 10px; }
  .mascot-shop-icon { font-size: 2.6rem; height: 2.7rem; }

  .badge-detail-panel { padding-top: 32px; max-width: 340px; }
  .badge-detail-icon { font-size: 4rem; }
  .badge-detail-name { font-size: 1.3rem; }
  .badge-detail-source { font-size: 0.8rem; padding: 4px 12px; margin: 10px 0 12px; }
  .badge-detail-desc { font-size: 1rem; }
  .leaderboard-list { gap: 10px; }
  .leaderboard-row { padding: 12px 16px; gap: 12px; min-height: 52px; }
  .leaderboard-rank { width: 32px; font-size: 1.2rem; }
  .leaderboard-name { font-size: 1.12rem; }
  .leaderboard-name-you { font-size: 0.85rem; margin-left: 4px; }
  .leaderboard-stars { font-size: 1.12rem; }

  /* Portrait có nhiều chiều cao dư ra hơn hẳn bản ép ngang cũ — form
     đăng nhập/đăng ký thoải mái, chữ/nút to hẳn ra thay vì ép sát. */
  .auth-panel { padding: 22px 22px; max-height: 90dvh; overflow-y: auto; }
  .rewards-panel-header { margin-bottom: 10px; }
  .auth-tabs { margin-bottom: 10px; }
  .auth-tab { min-height: 48px; font-size: 1.05rem; }
  .auth-form { gap: 14px; }
  .auth-label { font-size: 0.95rem; gap: 5px; }
  .auth-input { min-height: 50px; font-size: 1.1rem; padding: 0 14px; }
  .auth-input-wrap .auth-input { padding-right: 42px; }
  .auth-toggle-pw { width: 40px; height: 40px; font-size: 1rem; right: 4px; }
  .auth-error { min-height: 1em; font-size: 0.9rem; }
  .auth-submit-btn { min-height: 54px; font-size: 1.1rem; }
  .auth-logout-btn { min-height: 54px; font-size: 1.1rem; }
  .auth-welcome { font-size: 1.35rem; margin-bottom: 5px; }
  .auth-sub { font-size: 0.95rem; margin-bottom: 12px; }
  .voice-hint-panel { padding: 18px 20px; max-height: 92dvh; overflow-y: auto; }
  .voice-hint-intro { font-size: 0.96rem; margin-bottom: 12px; }
  .voice-hint-steps { gap: 10px; margin-bottom: 14px; padding-left: 22px; }
  .voice-hint-steps li { font-size: 0.94rem; }

  .coloring-entry-btn { margin-top: 10px; padding: 12px 16px; }
  .coloring-entry-icon { font-size: 2.2rem; }
  .coloring-entry-title { font-size: 1.2rem; }
  .coloring-entry-sub { font-size: 0.92rem; }

  .duel-intro { margin: 2px 0 12px; font-size: 0.95rem; }
  .duel-code-display { font-size: 2.4rem; padding: 8px 20px; letter-spacing: 0.22em; }
  .duel-waiting-body { margin-top: 12px; gap: 10px; }
  .duel-result-emoji { font-size: 3rem; margin-bottom: 4px; }

  /* Màn đua (#duelRace) vẫn CÓ TÍNH GIỜ (20s/vòng) nên vẫn ưu tiên
     không cuộn — nhưng portrait có nhiều chiều cao hơn hẳn khung
     ngang cũ, nên bố cục 2 tầng Đối thủ/Bé (.duel-opponent-panel/
     .duel-player-panel, xem rule base) đã đủ chỗ, 4 đáp án quay lại
     lưới 2x2 (thay vì ép 1 hàng ngang như bản cũ) để mỗi ô đủ to. */
  #duelRace .card-topbar { margin-bottom: 6px; }
  #duelRace .progress-track { margin-bottom: 10px; }
  #duelQuizCard { padding: 14px 18px; gap: 6px; margin-bottom: 12px; }
  #duelQuizPhoto { max-width: 150px; margin-bottom: 6px; }
  #duelQuizCard .quiz-question-label { font-size: 0.9rem; }
  #duelQuizCard .quiz-meaning { font-size: 1.5rem; }
  #duelQuizChoices { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #duelQuizChoices .quiz-choice-btn { min-height: 56px; font-size: 1.05rem; padding: 0 10px; }
  #duelRace .quiz-feedback { margin: 8px 0 0; font-size: 0.98rem; }

  .mode-select-header { margin-bottom: 12px; gap: 6px; }
  .mode-select-icon { font-size: 2.8rem; }
  .mode-select-title { font-size: 1.6rem; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mode-btn { padding: 22px 12px; gap: 10px; min-height: 100px; }
  .mode-btn-icon { font-size: 2.6rem; }
  .mode-btn-label { font-size: 1.12rem; }

  /* Bubble/Catch là 2 minigame REAL-TIME (vật rơi/nổi phải luôn nằm
     trong tầm nhìn, không được cuộn giữa lúc chơi) — portrait tự
     nhiên có RẤT NHIỀU chiều cao dư ra so với bản ép ngang cũ, nên
     khu chơi được PHÓNG TO hẳn lên để tận dụng. */
  .bubble-stage { height: 380px; }
  .bubble { width: 86px; height: 86px; font-size: 2.3rem; }
  @keyframes bubbleRise { from { transform: translateY(0); } to { transform: translateY(-470px); } }
  .bubble-prompt { margin-bottom: 8px; font-size: 1.2rem; }
  .bubble-replay-row { margin-top: 10px; }

  .catch-prompt { min-height: 50px; margin-bottom: 6px; }
  .catch-prompt-emoji { font-size: 2.5rem; }
  .catch-prompt-word { font-size: 1.5rem; }
  .catch-prompt-meaning { font-size: 1rem; }
  .catch-stage { height: 380px; }
  .catch-apple { width: 70px; height: 70px; font-size: 1.75rem; }
  .catch-apple.is-word { font-size: 0.9rem; }
  .catch-tree { font-size: 2.3rem; }
  .catch-basket { width: 82px; height: 66px; font-size: 2.6rem; }
  .catch-feedback { margin-top: 8px; font-size: 1.15rem; }

  .whack-intro { margin: 2px 0 12px; font-size: 0.95rem; }
  .whack-code-display { font-size: 2.4rem; padding: 8px 20px; letter-spacing: 0.22em; }
  .whack-waiting-body { margin-top: 12px; gap: 10px; }
  /* Màn đấu (#whackRace) là REAL-TIME có tính giờ (giống Bubble/Catch)
     nên vẫn ưu tiên KHÔNG cuộn — portrait dư chiều cao hơn hẳn bản
     ngang cũ nên lưới 6 hố (3 cột x 2 hàng) đủ chỗ phóng to thoải mái. */
  .whack-command { font-size: 1.5rem; margin: 4px 0 12px; }
  .whack-timer-chip { font-size: 1.2rem; padding: 5px 16px; }
  .whack-field { gap: 14px; margin-bottom: 12px; }
  .whack-mole-emoji { font-size: 2.6rem; }
  .whack-mole-label { font-size: 0.85rem; padding: 2px 10px; }

  .spell-card { padding: 20px 22px; gap: 8px; margin-bottom: 16px; }
  .spell-emoji { font-size: 3.8rem; }
  .spell-meaning { font-size: 1.5rem; }
  .spell-slots { margin: 8px 0 16px; gap: 10px; }
  .spell-slot { width: 48px; height: 54px; font-size: 1.55rem; border-bottom-width: 3px; }
  .spell-letters { gap: 12px; }
  .spell-letter-btn { width: 58px; height: 58px; font-size: 1.4rem; }

  .coloring-prompt { font-size: 1.3rem; margin-bottom: 12px; }
  .coloring-canvas-wrap { padding: 12px; margin-bottom: 12px; }
  .coloring-svg { max-width: 250px; }
  .coloring-replay-row { margin-bottom: 12px; }
  .coloring-swatch { width: 54px; height: 54px; }
  .coloring-swatch-label { font-size: 0.78rem; }
  .coloring-feedback { margin-top: 10px; font-size: 1.2rem; }

  /* Thanh mic/nghe lại STICKY ở đáy màn Chat (Bottom Sticky bar) —
     luôn trong tầm ngón cái dù bong bóng hội thoại phía trên dài
     bao nhiêu, nền đục để không bị chữ phía sau xuyên qua khi cuộn. */
  .chat-bubble { padding: 14px 20px; margin-top: 6px; max-width: 340px; }
  .chat-bubble-en { font-size: 1.35rem; }
  .chat-bubble-vi { font-size: 1rem; margin-top: 4px; }
  .chat-bear-wrap { transform: scale(0.9); margin: 4px 0; }
  .chat-hint { font-size: 0.95rem; margin: 4px 0; min-height: 1em; }
  .chat-view .feedback { margin: 4px 0; min-height: 1.1em; font-size: 1.05rem; }
  .chat-view .action-row {
    flex-direction: row; gap: 10px;
    position: sticky; bottom: 0;
    margin: 10px -20px 0; padding: 10px 20px max(10px, env(safe-area-inset-bottom));
    background: var(--bg-custom, var(--bg));
    box-shadow: 0 -6px 14px rgba(var(--shadow-rgb), 0.08);
  }
  .chat-view .action-btn { min-height: 54px; font-size: 1.08rem; padding: 0 16px; }

  .companion-ai-bear-wrap { transform: scale(0.55); margin: -6px 0 -8px; }
  .companion-ai-log { max-height: 38vh; gap: 8px; padding: 2px 2px 6px; }
  .companion-ai-msg { font-size: 0.95rem; padding: 9px 14px; max-width: 88%; }
  .companion-ai-view .feedback { margin: 4px 0; min-height: 1.1em; font-size: 1rem; }

  .vision-capture-btn { min-height: 96px; font-size: 1.02rem; }
  .vision-capture-icon { font-size: 2.3rem; }
  .vision-preview-img { max-width: 160px; max-height: 160px; margin: 10px auto; }
  .vision-flashcard { padding: 16px 18px; margin: 10px auto; }
  .vision-flashcard-word { font-size: 1.5rem; }
  .vision-vocab-header { font-size: 1.02rem; margin: 14px 0 8px; }
  .vision-word-item { padding: 10px 12px; font-size: 0.95rem; }

  .mode-switcher { margin: 12px auto 6px; max-width: 340px; }
  .mode-switch-btn { padding: 11px 10px; font-size: 0.92rem; min-height: 44px; }

  .prof-level-tabs { gap: 10px; margin-bottom: 14px; }
  .prof-level-tab { padding: 12px 10px; font-size: 0.96rem; min-height: 48px; }

  .prof-unit-list { gap: 14px; }
  .prof-unit-card { padding: 14px 16px; }
  .prof-unit-header { margin-bottom: 12px; gap: 10px; }
  .prof-unit-icon { font-size: 1.5rem; }
  .prof-unit-name { font-size: 1.08rem; }
  .prof-lesson-row { gap: 12px; }
  .prof-lesson-btn { padding: 14px 16px; min-height: 52px; }
  .prof-lesson-name { font-size: 1rem; }
  .prof-lesson-sub { font-size: 0.82rem; }

  .prof-vocab-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
  .prof-vocab-card { padding: 10px; }
  .prof-vocab-word { font-size: 1.02rem; }
  .prof-vocab-phonetic { font-size: 0.8rem; }
  .prof-vocab-meaning { font-size: 0.82rem; }

  .prof-grammar-list { gap: 10px; margin-bottom: 14px; }
  .prof-grammar-card { padding: 12px 14px; }
  .prof-grammar-pattern { font-size: 1rem; }
  .prof-grammar-meaning { font-size: 0.82rem; }
  .prof-grammar-usage { font-size: 0.8rem; }
  .prof-grammar-example { font-size: 0.84rem; }
  .prof-grammar-example-vi { font-size: 0.8rem; }

  .prof-start-quiz-btn { min-height: 52px; font-size: 1.02rem; }

  .prof-quiz-photo { max-width: 200px; margin-bottom: 10px; }

  .prof-match-wrap { margin-bottom: 12px; }
  .prof-match-grid { gap: 10px; }
  .prof-match-col { gap: 10px; }
  .prof-match-word-btn { min-height: 52px; font-size: 1rem; }
  .prof-match-image-btn { padding: 5px; }

  .prof-speak-wrap { margin-bottom: 8px; }
  .prof-speak-target { font-size: 1.25rem; margin: 6px 0 10px; }
  .prof-speak-skip-btn { margin-top: 8px; height: 48px; padding: 0 16px; font-size: 0.92rem; }

  .prof-sentence-wrap { margin-bottom: 12px; }
  .prof-sentence-target { font-size: 1.12rem; margin: 8px 0 12px; }
  .prof-sentence-choices { gap: 10px; margin-top: 10px; }
  .prof-sentence-choice-btn { min-height: 52px; font-size: 0.92rem; padding: 8px 14px; }

  .prof-spell-wrap { margin-bottom: 12px; }

  .prof-unit-progress { font-size: 0.84rem; margin-bottom: 8px; }
  .prof-unit-mastered-badge { font-size: 0.74rem; padding: 4px 10px; }
  .prof-unit-review-btn { min-height: 52px; font-size: 0.96rem; margin-top: 10px; }

  .prof-daily-review-card { padding: 16px 18px; margin-bottom: 16px; }
  .prof-daily-review-icon { font-size: 2.1rem; }
  .prof-daily-review-title { font-size: 1.12rem; }
  .prof-daily-review-sub { font-size: 0.88rem; }

  .prof-wordbook-summary { font-size: 0.92rem; margin-bottom: 14px; }
  .prof-wordbook-list { gap: 12px; }
  .prof-wordbook-row { padding: 10px 14px; gap: 14px; }
  .prof-wordbook-photo { width: 56px; height: 56px; }
  .prof-wordbook-word { font-size: 1.05rem; }
  .prof-wordbook-meaning { font-size: 0.85rem; }
  .prof-wordbook-dot { width: 9px; height: 9px; }
  .prof-wordbook-tier-label { font-size: 0.74rem; }

  .grammar-book-list { gap: 12px; }
  .grammar-book-item { padding: 14px 16px; }
  .grammar-book-pattern { font-size: 1.05rem; }
  .grammar-book-meaning { font-size: 0.85rem; }
  .grammar-book-usage { font-size: 0.85rem; }
  .grammar-book-example { font-size: 0.88rem; }
  .grammar-book-example-vi { font-size: 0.85rem; }

  .prof-grammar-practice-list { gap: 12px; }
  .prof-grammar-practice-item { padding: 14px 16px; }
  .prof-grammar-practice-pattern { font-size: 1.05rem; }
  .prof-grammar-practice-meaning { font-size: 0.85rem; }
  .prof-grammar-practice-count { font-size: 0.82rem; }
}

/* ---------- Màn hình rộng (máy tính/tablet) ----------
 * Toàn bộ app phía trên được thiết kế mobile-first (thẻ nhỏ, cố
 * định max-width ~500-640px) — trên màn hình desktop lớn, thẻ đó
 * co lại giữa màn hình để lại rất nhiều khoảng trống. Khối này
 * PHÓNG TO container + chữ + icon + nút cho cân đối với màn hình
 * rộng, không đụng gì tới layout mobile/ép ngang ở trên. Chỉ kích
 * hoạt khi màn thật sự rộng VÀ cao đủ (loại trừ trường hợp cửa sổ
 * di động/ép ngang trên điện thoại, vốn có max-height nhỏ). */
@media (min-width: 900px) and (min-height: 560px) {
  #app { max-width: 1120px; }

  .home-title { font-size: 2.6rem; }
  .home-sub { font-size: 1.15rem; margin-bottom: 28px; }
  .install-app-btn { max-width: 640px; padding: 16px 22px; font-size: 1.05rem; margin-bottom: 24px; }
  .install-app-icon { font-size: 1.6rem; }
  .topic-grid { gap: 26px; }
  .topic-card { padding: 30px 26px 26px; gap: 14px; }
  .topic-icon { width: 92px; height: 92px; font-size: 2.6rem; }
  .topic-en { font-size: 1.5rem; }
  .topic-vi { font-size: 1.05rem; }
  .topic-preview { font-size: 1.5rem; }
  .topic-progress span { font-size: 0.88rem; }
  .topic-tap-hint { font-size: 0.85rem; }

  .coloring-entry-btn { max-width: 760px; padding: 20px 26px; gap: 18px; }
  .coloring-entry-icon { font-size: 3rem; }
  .coloring-entry-title { font-size: 1.4rem; }
  .coloring-entry-sub { font-size: 1rem; }

  .mode-select-view { max-width: 780px; }
  .mode-select-icon { font-size: 3.8rem; }
  .mode-select-title { font-size: 1.9rem; }
  .mode-grid { gap: 20px; }
  .mode-btn { padding: 28px 16px; gap: 10px; }
  .mode-btn-icon { font-size: 2.8rem; }
  .mode-btn-label { font-size: 1.2rem; }

  .card-view { max-width: 660px; }
  .deck-title { font-size: 1.4rem; }
  .progress-count { font-size: 1rem; }
  .flashcard { padding: 50px 34px 40px; }
  .card-emoji { font-size: 7.8rem; }
  .card-word { font-size: 3.4rem; }
  .card-meaning { font-size: 1.55rem; }
  .action-btn { min-height: 74px; font-size: 1.25rem; }
  .action-btn .action-icon { font-size: 1.6rem; }
  .feedback { font-size: 1.1rem; }

  .quiz-view { max-width: 720px; }
  .quiz-card { padding: 38px 30px; }
  .quiz-emoji { font-size: 6.2rem; }
  .quiz-question-label { font-size: 1rem; }
  .quiz-meaning { font-size: 2.3rem; }
  .quiz-choices { gap: 16px; }
  .quiz-choice-btn { min-height: 70px; font-size: 1.3rem; }
  .quiz-feedback { font-size: 1.1rem; }

  .memory-view { max-width: 820px; }
  .memory-status { font-size: 1.05rem; }
  .memory-grid { gap: 14px; }
  .memory-tile-back { font-size: 2rem; }
  .memory-tile-front.type-emoji { font-size: 2.8rem; }
  .memory-tile-front.type-word { font-size: 1.2rem; }

  .bubble-view { max-width: 820px; }
  .bubble-prompt { font-size: 1.05rem; }
  .bubble-stage { height: 380px; }
  .bubble { width: 92px; height: 92px; font-size: 2.6rem; }
  @keyframes bubbleRise { from { transform: translateY(0); } to { transform: translateY(-560px); } }

  .catch-view { max-width: 820px; }
  .catch-prompt-emoji { font-size: 3.4rem; }
  .catch-prompt-word { font-size: 1.8rem; }
  .catch-prompt-meaning { font-size: 1.1rem; }
  .catch-stage { height: 420px; }
  .catch-apple { width: 78px; height: 78px; font-size: 2rem; }
  .catch-apple.is-word { font-size: 0.95rem; }
  .catch-tree { font-size: 3.4rem; }
  .catch-basket { width: 96px; height: 78px; font-size: 3.4rem; }

  .whack-view { max-width: 820px; }
  .whack-field { gap: 16px; }

  .relax-view { max-width: 760px; }
  .whack-mole-emoji { font-size: 2.6rem; }
  .whack-mole-label { font-size: 0.85rem; }

  .spell-view { max-width: 760px; }
  .spell-card { padding: 32px 26px; }
  .spell-emoji { font-size: 5.2rem; }
  .spell-meaning { font-size: 1.7rem; }
  .spell-slots { gap: 12px; margin: 12px 0 26px; }
  .spell-slot { width: 54px; height: 60px; font-size: 1.9rem; border-bottom-width: 5px; }
  .spell-letters { gap: 14px; }
  .spell-letter-btn { width: 64px; height: 64px; font-size: 1.6rem; }

  .coloring-view { max-width: 700px; }
  .coloring-prompt { font-size: 1.35rem; }
  .coloring-canvas-wrap { padding: 16px; }
  .coloring-svg { max-width: 360px; }
  .coloring-palette { gap: 16px 14px; }
  .coloring-swatch { width: 58px; height: 58px; }
  .coloring-swatch-label { font-size: 0.8rem; }
  .coloring-feedback { font-size: 1.05rem; }

  .chat-view { max-width: 680px; }
  .chat-bubble { padding: 22px 30px; max-width: 520px; }
  .chat-bubble-en { font-size: 1.8rem; }
  .chat-bubble-vi { font-size: 1.15rem; }
  .chat-bear-wrap { transform: scale(2.1); margin: 40px 0 48px; }
  .chat-hint { font-size: 1.05rem; }

  .companion-ai-bear-wrap { transform: scale(1.3); margin: 14px 0 10px; }
  .companion-ai-log { max-width: 620px; max-height: 340px; }
  .companion-ai-msg { font-size: 1.05rem; padding: 12px 18px; }

  .vision-capture-btn { max-width: 480px; min-height: 130px; font-size: 1.15rem; }
  .vision-flashcard { max-width: 480px; padding: 22px 26px; }
  .vision-flashcard-word { font-size: 2rem; }
  .vision-word-list { max-width: 560px; }

  .quiz-result-view { max-width: 600px; }
  .result-card { padding: 44px 36px; }
  .result-score { font-size: 1.7rem; }
  .result-stars { font-size: 1.15rem; }
  .result-actions .action-btn { min-height: 64px; font-size: 1.1rem; }

  .rewards-panel, .shop-panel, .auth-panel { max-width: 560px; padding: 30px; }
  .rewards-panel-title { font-size: 1.5rem; }
  .shop-tab { padding: 10px 18px; font-size: 0.9rem; }
  .reward-icon, .shop-item-icon { font-size: 2.4rem; }
  .leaderboard-row { padding: 14px 18px; }
  .leaderboard-rank { width: 38px; font-size: 1.4rem; }
  .leaderboard-name { font-size: 1.05rem; }
  .leaderboard-stars { font-size: 1.05rem; }
  .reward-name, .shop-item-name { font-size: 1rem; }
  .auth-input, .auth-tab { min-height: 52px; font-size: 1.05rem; }
  .auth-submit-btn { min-height: 54px; font-size: 1.05rem; }
  .auth-logout-btn { min-height: 54px; font-size: 1.05rem; }

  #companionBear { width: 84px; height: 76px; }
  #companionBear .companion-scale { transform: scale(0.98); }

  .mode-switcher { max-width: 460px; }
  .mode-switch-btn { padding: 12px 14px; font-size: 1.05rem; }
  .professional-view { max-width: 860px; }
  .prof-level-tab { padding: 14px 12px; font-size: 1.05rem; }
  .prof-unit-name { font-size: 1.25rem; }
  .prof-unit-icon { font-size: 1.7rem; }
  .prof-lesson-name { font-size: 1.1rem; }
  .prof-lesson-sub { font-size: 0.9rem; }
  .prof-vocab-word { font-size: 1.15rem; }
  .prof-vocab-phonetic { font-size: 0.88rem; }
  .prof-vocab-meaning { font-size: 0.9rem; }
  .prof-grammar-pattern { font-size: 1.1rem; }
  .prof-grammar-meaning { font-size: 0.9rem; }
  .prof-grammar-usage { font-size: 0.88rem; }
  .prof-grammar-example { font-size: 0.95rem; }
  .prof-grammar-example-vi { font-size: 0.88rem; }
  .prof-quiz-photo { max-width: 320px; }

  .grammar-book-item { padding: 16px 18px; }
  .grammar-book-pattern { font-size: 1.15rem; }
  .grammar-book-meaning { font-size: 0.92rem; }
  .grammar-book-usage { font-size: 0.9rem; }
  .grammar-book-example { font-size: 0.95rem; }
  .grammar-book-example-vi { font-size: 0.9rem; }

  .story-list-item { padding: 14px 18px; }
  .story-list-thumb { width: 80px; height: 80px; }
  .story-list-title { font-size: 1.2rem; }
  .story-list-sub { font-size: 0.9rem; }
  .story-page-image { max-width: 380px; }
  .story-page-en { font-size: 1.6rem; }
  .story-page-vi { font-size: 1.1rem; }

  .prof-grammar-practice-item { padding: 16px 18px; }
  .prof-grammar-practice-pattern { font-size: 1.15rem; }
  .prof-grammar-practice-meaning { font-size: 0.92rem; }
  .prof-grammar-practice-count { font-size: 0.88rem; }
}