:root {
  /* Do tram/gach (Terracotta) — mau chinh, may man nhung khong choi mat */
  --color-red-700: #a83e28;
  --color-red-600: #c84b31;
  --color-red-500: #d66448;
  --color-red-50: #fbeae5;

  /* Vang cat/ho phach (Amber/Warm Gold) — mau phu */
  --color-gold-500: #e58e26;
  --color-gold-400: #ecb365;
  --color-gold-50: #fdf2e0;

  --color-green-600: #1f9254;
  --color-green-500: #23a862;
  --color-green-50: #e8f7ef;

  --color-blue-600: #2f5fdb;
  --color-blue-500: #4472ea;
  --color-blue-50: #eaf0ff;

  --color-purple-600: #7c3aed;
  --color-purple-50: #f3e8ff;

  --color-teal-600: #0d9488;
  --color-teal-50: #e6fbf8;

  --color-pink-600: #db2777;
  --color-pink-50: #fce7f3;

  --color-indigo-600: #4f46e5;
  --color-indigo-50: #eef0ff;

  --color-orange-600: #ea580c;
  --color-orange-50: #fff1e6;

  /* Nen kem am / Trang nga + van ban nau sam — giu do am, do mau tinh khiet */
  --color-white: #ffffff;
  --color-gray-50: #f9f5eb;
  --color-gray-100: #f3ece0;
  --color-gray-200: #e6dcc9;
  --color-gray-400: #a89a89;
  --color-gray-600: #6b5d56;
  --color-gray-800: #4a3e3d;
  --color-gray-900: #2b2420;

  --color-success: #1f9254;
  --color-success-bg: #e8f7ef;
  --color-error: #c84b31;
  --color-error-bg: #fbeae5;

  --font-latin: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hanzi: 'Noto Sans SC', var(--font-latin);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --shadow-sm: 0 1px 2px rgba(32, 30, 28, 0.08);
  --shadow-md: 0 8px 24px rgba(32, 30, 28, 0.10);
  --shadow-lg: 0 20px 48px rgba(179, 18, 31, 0.16);

  --header-h: 72px;
  --max-w: 1200px;
  --sidebar-w: 264px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-latin);
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  background-image:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 120%22><path d=%22M20,90 C20,70 40,70 45,80 C45,60 70,60 75,75 C75,50 105,50 110,70 C115,45 150,45 150,70 C160,55 185,60 180,80 C195,75 205,90 190,98 C195,110 175,115 165,105 C155,118 130,115 128,102 C110,115 85,110 88,98 C70,110 45,105 50,92 C35,102 15,98 20,90 Z%22 fill=%22none%22 stroke=%22%23c84b31%22 stroke-width=%223%22 opacity=%220.07%22/></svg>"),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><g fill=%22none%22 stroke=%22%23e58e26%22 stroke-width=%222.5%22 opacity=%220.1%22><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(72 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(144 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(216 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(288 50 50)%22/><circle cx=%2250%22 cy=%2250%22 r=%224%22/></g></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom -40px right -40px, top 60px left -20px;
  background-size: 420px, 160px;
  background-attachment: fixed, fixed;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.hanzi {
  font-family: var(--font-hanzi);
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  background: var(--color-red-600);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 3px solid var(--color-gold-500);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background: var(--color-red-600);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--color-red-700);
}

.btn-gold {
  background: var(--color-gold-500);
  color: var(--color-gray-900);
  box-shadow: var(--shadow-md);
}

.btn-gold:hover {
  background: var(--color-gold-400);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-gray-200);
  color: var(--color-gray-800);
}

.btn-outline:hover {
  border-color: var(--color-red-600);
  color: var(--color-red-600);
}

.btn-ghost {
  background: transparent;
  color: var(--color-gray-800);
  min-height: 40px;
  padding: 0 var(--space-4);
}

.btn-ghost:hover {
  background: var(--color-gray-100);
}

.btn-block {
  width: 100%;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

/* ---------- App shell (sidebar dashboard layout) ---------- */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.app-sidebar {
  flex-shrink: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background-color: var(--color-red-600);
  background-image:
    linear-gradient(180deg, var(--color-red-600), var(--color-red-700)),
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 120%22><path d=%22M20,90 C20,70 40,70 45,80 C45,60 70,60 75,75 C75,50 105,50 110,70 C115,45 150,45 150,70 C160,55 185,60 180,80 C195,75 205,90 190,98 C195,110 175,115 165,105 C155,118 130,115 128,102 C110,115 85,110 88,98 C70,110 45,105 50,92 C35,102 15,98 20,90 Z%22 fill=%22none%22 stroke=%22%23ecb365%22 stroke-width=%223%22 opacity=%220.16%22/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: center, bottom -10px center;
  background-size: cover, 280px;
  padding: var(--space-5) var(--space-4);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.22s var(--ease-standard);
  overflow-y: auto;
}

.app-sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1080px) {
  .app-sidebar {
    position: sticky;
    transform: none;
    height: 100vh;
  }
}

.app-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-2);
  margin-bottom: 2px;
}

.app-logo-text {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
}

.app-slogan {
  margin: 0 0 var(--space-5) 0;
  padding: 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.app-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.app-nav-item.is-active {
  background: var(--color-white);
  color: var(--color-red-600);
}

.app-nav-section {
  margin-top: var(--space-4);
}

.app-nav-label {
  display: block;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.app-nav-expand .app-nav-chevron {
  margin-left: auto;
  transition: transform 0.18s var(--ease-standard);
}

.app-nav-expand.is-open .app-nav-chevron {
  transform: rotate(180deg);
}

.app-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-4);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s var(--ease-standard);
}

.app-nav-submenu.is-open {
  max-height: 260px;
}

.app-nav-subitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.app-nav-subitem:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.app-nav-subitem.is-active {
  color: var(--color-red-600);
  background: var(--color-white);
}

.app-nav-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-nav-dot.is-red { background: var(--color-red-600); }
.app-nav-dot.is-green { background: var(--color-green-600); }
.app-nav-dot.is-gold { background: var(--color-gold-500); }
.app-nav-dot.is-blue { background: var(--color-blue-600); }

.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: none;
  background: transparent;
  padding: var(--space-3);
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-radius: var(--radius-md);
}

.app-sidebar-user:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app-sidebar-user .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-gold-500);
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-hanzi);
  flex-shrink: 0;
}

.app-sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-sidebar-user-info strong {
  font-size: 0.92rem;
  color: var(--color-white);
}

.app-sidebar-user-info span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

.app-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(32, 30, 28, 0.45);
  z-index: 190;
}

.app-scrim.is-visible {
  display: block;
}

@media (min-width: 1080px) {
  .app-scrim {
    display: none !important;
  }
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

@media (min-width: 700px) {
  .app-main {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
}

.app-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

@media (min-width: 1080px) {
  .app-mobile-toggle {
    display: none;
  }
}

/* Global pinyin visibility toggle (used inside lesson tables) */
body.pinyin-hidden .pinyin,
body.pinyin-hidden .pinyin-big,
body.pinyin-hidden .vocab-table td.pinyin-cell {
  display: none !important;
}

/* ---------- Dashboard header ---------- */
.dash-section {
  margin-bottom: var(--space-7);
}

#levelDetail {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 120%22><g fill=%22none%22 stroke=%22%23a83e28%22 stroke-width=%223%22 opacity=%220.1%22><line x1=%22100%22 y1=%2210%22 x2=%22100%22 y2=%2224%22/><path d=%22M74,34 Q87,20 100,25 Q113,20 126,34%22/><path d=%22M68,39 L132,39%22/><path d=%22M52,56 Q73,36 100,43 Q127,36 148,56%22/><path d=%22M46,61 L154,61%22/><path d=%22M28,80 Q58,55 100,63 Q142,55 172,80%22/><path d=%22M22,86 L178,86%22/><rect x=%2258%22 y=%2286%22 width=%2284%22 height=%2228%22/><line x1=%2278%22 y1=%2286%22 x2=%2278%22 y2=%22114%22/><line x1=%22122%22 y1=%2286%22 x2=%22122%22 y2=%22114%22/></g></svg>");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 220px;
}

.dash-breadcrumb {
  margin-bottom: var(--space-5);
}

.dash-crumb-trail {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

.dash-breadcrumb h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
}

.dash-row {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .dash-row {
    grid-template-columns: 1.5fr 1fr;
  }
}

.dash-cta-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-red-600), var(--color-red-700));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 220px;
}

.dash-cta-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30px;
  right: -30px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><g fill=%22none%22 stroke=%22%23ecb365%22 stroke-width=%222.5%22 opacity=%220.22%22><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(72 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(144 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(216 50 50)%22/><ellipse cx=%2250%22 cy=%2228%22 rx=%2210%22 ry=%2216%22 transform=%22rotate(288 50 50)%22/><circle cx=%2250%22 cy=%2250%22 r=%224%22/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dash-cta-text,
.dash-cta-card-visual {
  position: relative;
  z-index: 1;
}

.dash-cta-text h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.3;
}

.dash-cta-text h2 .accent {
  color: var(--color-gold-400);
}

.dash-cta-text p {
  margin: 0 0 var(--space-5);
  color: rgba(255, 255, 255, 0.88);
  max-width: 40ch;
}

.btn-white {
  background: var(--color-white);
  color: var(--color-red-600);
}

.btn-white:hover {
  background: var(--color-gold-50);
}

.dash-cta-card-visual {
  flex-shrink: 0;
  display: none;
}

@media (min-width: 640px) {
  .dash-cta-card-visual {
    display: block;
  }
}

.flash-card {
  background: var(--color-white);
  color: var(--color-gray-900);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  transform: rotate(-4deg);
}

.flash-card .hanzi {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-red-600);
}

.flash-card .pinyin {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-600);
}

.dash-streak-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

.dash-streak-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -14px;
  right: -10px;
  width: 84px;
  height: 84px;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><g fill=%22none%22 stroke=%22%23c84b31%22 stroke-width=%222.5%22 opacity=%220.35%22><circle cx=%2250%22 cy=%2255%22 r=%2232%22/><circle cx=%2224%22 cy=%2228%22 r=%2213%22/><circle cx=%2276%22 cy=%2228%22 r=%2213%22/><ellipse cx=%2234%22 cy=%2252%22 rx=%2210%22 ry=%2213%22/><ellipse cx=%2266%22 cy=%2252%22 rx=%2210%22 ry=%2213%22/><ellipse cx=%2250%22 cy=%2268%22 rx=%226%22 ry=%224%22/></g><g fill=%22%23c84b31%22 opacity=%220.35%22><circle cx=%2234%22 cy=%2254%22 r=%223%22/><circle cx=%2266%22 cy=%2254%22 r=%223%22/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dash-streak-card > * {
  position: relative;
  z-index: 1;
}

.dash-streak-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.dash-streak-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dash-streak-big-flame {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-gold-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.dash-streak-main strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
}

.dash-streak-main span {
  font-size: 0.82rem;
  color: var(--color-gray-600);
}

.dash-streak-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dash-streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dash-streak-day span:first-child {
  font-size: 0.72rem;
  color: var(--color-gray-500);
  font-weight: 600;
}

.dash-streak-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-200);
  background: var(--color-white);
}

.dash-streak-dot.is-done {
  background: var(--color-green-500);
  border-color: var(--color-green-500);
}

.dash-streak-dot.is-today {
  border-color: var(--color-red-500);
}

.dash-streak-hint {
  margin: 0 0 var(--space-4);
  font-size: 0.82rem;
  color: var(--color-gray-600);
  flex: 1;
}

.dash-streak-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-3) 0;
}

.streak-badge-pill {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-gold-50);
  color: #a86a10;
  border-radius: var(--radius-full, 999px);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.streak-badge-next {
  font-size: 0.76rem;
  color: var(--color-gray-400);
}

.btn-dark {
  background: var(--color-gray-900);
  color: var(--color-white);
}

.btn-dark:hover {
  background: var(--color-gray-800);
}

.dash-stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 800px) {
  .dash-stat-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.stat-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.stat-tile-icon.is-red { background: var(--color-red-50); color: var(--color-red-600); }
.stat-tile-icon.is-gold { background: var(--color-gold-50); color: #8a5a00; }
.stat-tile-icon.is-green { background: var(--color-green-50); color: var(--color-green-600); }
.stat-tile-icon.is-blue { background: var(--color-blue-50); color: var(--color-blue-600); }

.stat-tile strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
}

.stat-tile span {
  font-size: 0.8rem;
  color: var(--color-gray-600);
}

/* ---------- Sections ---------- */
.section {
  padding: var(--space-8) 0;
}

.section-alt {
  background: var(--color-white);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-eyebrow {
  color: var(--color-red-600);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  font-weight: 800;
}

.section-head p {
  color: var(--color-gray-600);
  max-width: 60ch;
  margin: var(--space-2) 0 0;
}

/* ---------- Level cards ---------- */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.level-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.level-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-white);
}

.level-badge.is-red {
  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-700));
}

.level-badge.is-green {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
}

.level-badge.is-gold {
  background: linear-gradient(135deg, var(--color-gold-500), #d99400);
}

.level-badge.is-blue {
  background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-600));
}

.level-card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.level-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.level-card .level-sub {
  display: block;
  color: var(--color-gray-500);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

.level-card.is-disabled {
  cursor: default;
  opacity: 0.65;
}

.level-card.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ---------- Practice level tabs (HSK1 / HSK2 toggle) ---------- */
.lesson-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lesson-tabs .lesson-tab {
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s var(--ease-standard);
}

.lesson-tabs .lesson-tab:hover {
  border-color: var(--color-red-500);
}

.lesson-tabs .lesson-tab.active {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: #fff;
}

/* ---------- Lesson list (links to standalone lesson pages) ---------- */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lesson-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.lesson-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-red-500);
}

.lesson-card-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-gold-50);
  color: #8a5a00;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-card-body {
  flex: 1;
  min-width: 0;
}

.lesson-card-body h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.lesson-card-hanzi {
  display: block;
  font-size: 0.85rem;
  color: var(--color-gray-600);
  font-weight: 600;
  margin-top: 2px;
}

.lesson-card-topic {
  margin: var(--space-2) 0 0;
  font-size: 0.88rem;
  color: var(--color-gray-600);
}

.lesson-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-gray-600);
}

.lesson-card-arrow {
  flex-shrink: 0;
  color: var(--color-red-600);
}

.lesson-card-progress {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  white-space: nowrap;
}

.lesson-card-progress.is-done {
  background: var(--color-green-50);
  color: var(--color-green-600);
}

/* ---------- Level detail view ---------- */
.level-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  font-family: inherit;
}

.level-detail-back:hover {
  color: var(--color-red-600);
}

#levelDetailTitle {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-gray-900);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-7) 0 var(--space-5);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-grid h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}

.footer-grid p,
.footer-grid li {
  font-size: 0.88rem;
  line-height: 1.8;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid a {
  text-decoration: none;
  color: inherit;
}

.footer-grid a:hover {
  color: var(--color-gold-400);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  background: var(--color-red-600);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.82rem;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 30, 28, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 200;
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 0;
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-banner {
  position: relative;
  height: 96px;
  background: linear-gradient(135deg, var(--color-red-600), var(--color-gold-500));
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 120%22><path d=%22M20,90 C20,70 40,70 45,80 C45,60 70,60 75,75 C75,50 105,50 110,70 C115,45 150,45 150,70 C160,55 185,60 180,80 C195,75 205,90 190,98 C195,110 175,115 165,105 C155,118 130,115 128,102 C110,115 85,110 88,98 C70,110 45,105 50,92 C35,102 15,98 20,90 Z%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%223%22 opacity=%220.25%22/></svg>");
  background-repeat: no-repeat;
  background-position: bottom -10px right -20px;
  background-size: 200px;
}

.modal-banner-logo {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-gray-800);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: var(--space-6);
}

.modal h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.4rem;
  font-weight: 800;
}

.modal .modal-sub {
  color: var(--color-gray-600);
  font-size: 0.9rem;
  margin: 0 0 var(--space-5);
}

.modal-demo-note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
  color: var(--color-gray-400);
  font-size: 0.76rem;
  text-align: center;
}

.auth-tabs {
  display: flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: var(--space-5);
}

.auth-tab {
  flex: 1;
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--color-gray-600);
}

.auth-tab.is-active {
  background: var(--color-white);
  color: var(--color-red-600);
  box-shadow: var(--shadow-sm);
}

.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-gray-800);
}

.form-field input,
.form-field select {
  width: 100%;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  padding: 0 var(--space-4);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-gray-900);
  background: var(--color-white);
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-red-500);
  box-shadow: 0 0 0 3px var(--color-red-50);
}

.form-note {
  font-size: 0.78rem;
  color: var(--color-gray-600);
  margin-top: var(--space-4);
  text-align: center;
}

.form-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.auth-panel {
  display: none;
}

.auth-panel.is-active {
  display: block;
}

.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 300;
  transition: transform 0.25s var(--ease-standard);
  box-shadow: var(--shadow-md);
}

.toast.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* ---------- Lesson hub (danh mục các dạng bài trong 1 bài học) ---------- */
#lessonHubTitle {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 800;
}

.hub-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hub-progress-label {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-gray-600);
}

.hub-progress-bar {
  flex: 1;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
  overflow: hidden;
}

.hub-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-gold-500), var(--color-green-500));
  transition: width 0.3s var(--ease-standard);
}

.hub-progress-pct {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-gray-800);
}

.hub-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 700px) {
  .hub-tile-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hub-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease-standard), box-shadow 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.hub-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}

.hub-tile.is-disabled {
  cursor: default;
  color: var(--color-gray-400);
}

.hub-tile.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.hub-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.hub-tile-label {
  flex: 1;
  font-weight: 700;
  font-size: 0.98rem;
}

.hub-tile-soon {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hub-tile-arrow {
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.hub-cta {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-lg);
  border: none;
  background: linear-gradient(135deg, var(--color-red-600), var(--color-red-700));
  color: var(--color-white);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
}

.hub-cta:hover {
  background: var(--color-red-700);
}

/* ---------- Vocab practice (Tu vung: danh sach + 4 che do quiz) ---------- */
.vp-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.vp-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-700));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.vp-header h1 {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 800;
}

.vp-header p {
  margin: 2px 0 0;
  color: var(--color-gray-600);
  font-size: 0.9rem;
}

.vp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.vp-tab {
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.18s var(--ease-standard);
}

.vp-tab:hover {
  border-color: var(--color-red-500);
}

.vp-tab.active {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: #fff;
}

.vp-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .vp-list-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.vp-word-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.vp-word-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.vp-word-zh {
  font-family: var(--font-hanzi);
  font-size: 1.8rem;
  font-weight: 700;
}

.vp-speak-btn {
  border: none;
  background: var(--color-red-50);
  color: var(--color-red-600);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.vp-speak-btn:hover {
  background: var(--color-red-600);
  color: var(--color-white);
}

.vp-word-py {
  color: var(--color-gold-500);
  font-weight: 700;
  margin: var(--space-2) 0 2px;
}

.vp-word-vn {
  color: var(--color-gray-900);
}

.vp-word-pos {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.76rem;
  color: var(--color-gray-500);
}

.vp-word-example {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-200);
}

/* Khung luyen dich nho gan duoi moi the tu vung (vp-word-card) */
.vp-check-box {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-200);
}

.vp-check-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-red-600);
  margin-bottom: var(--space-2);
}

.vp-check-q {
  font-size: 0.9rem;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.vp-check-input {
  width: 100%;
  min-height: 60px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 0.92rem;
  resize: vertical;
  margin-bottom: var(--space-2);
}

.vp-check-input:focus {
  outline: none;
  border-color: var(--color-red-500);
}

.vp-check-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gold-50);
  color: var(--color-red-600);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.vp-check-btn:hover {
  background: var(--color-gold-400);
  color: var(--color-white);
}

.vp-check-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.vp-check-answer {
  margin-top: var(--space-3);
  background: var(--color-red-50);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-gray-800);
}

.vp-check-py {
  color: var(--color-gold-500);
  font-weight: 600;
  margin-top: 4px;
}

.vp-check-note {
  margin-top: var(--space-2);
  color: var(--color-gray-600);
  font-size: 0.85rem;
}

/* ---------- Thanh tiến độ dùng chung (đúng/sai) cho mọi màn luyện tập ---------- */
.pgb-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.pgb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.pgb-score {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gray-800);
}

.pgb-praise {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-gold-500);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s, transform 0.25s;
}
.pgb-praise.show { opacity: 1; transform: translateY(0); }

.pgb-track {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pgb-seg {
  width: 16px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-gray-200);
  flex-shrink: 0;
}
.pgb-seg-correct { background: var(--color-green-600); }
.pgb-seg-wrong { background: var(--color-red-600); }
.pgb-seg-empty { background: var(--color-gray-200); }

/* ---------- Hán tự (nét chữ + luyện viết) trong thẻ từ vựng SPA ---------- */
.hz-btn {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--color-red-600);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-red-600);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-3);
}

.hz-btn:hover { background: var(--color-red-50); }

.hz-panel { display: none; margin-top: var(--space-2); }
.hz-panel.open { display: block; }

.hz-item {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.hz-item:last-child { margin-bottom: 0; }

.hz-writer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.hz-writer-box {
  width: 130px;
  height: 130px;
  background: var(--color-white);
  border: 1px dashed var(--color-gray-200);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.hz-writer-box .hz-fallback {
  font-family: var(--font-hanzi);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-red-600);
  line-height: 1;
}

.hz-writer-under { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }

.hzw-py { color: var(--color-gold-500); font-weight: 600; font-size: 0.88rem; }

.hz-replay-btn, .hz-quiz-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--color-gold-400);
  border-radius: 999px;
  background: var(--color-gold-50);
  color: var(--color-red-700);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.hz-replay-btn:hover, .hz-quiz-btn:hover { background: var(--color-gold-400); color: var(--color-white); }

.hz-quiz-fb { min-height: 18px; font-size: 0.8rem; color: var(--color-gold-500); text-align: center; width: 100%; }

.hz-rad-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-red-600); margin-right: 2px; vertical-align: middle; }

.hz-info { font-size: 0.82rem; }
.hz-row { margin-bottom: 4px; line-height: 1.5; }
.hz-k { color: var(--color-gray-500); font-weight: 600; }
.hz-rad { color: var(--color-red-700); font-weight: 600; }
.hz-strokes { display: inline-block; background: var(--color-red-50); color: var(--color-red-700); font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; margin-left: 4px; }

.hz-tip {
  background: var(--color-gold-50);
  border: 1px solid var(--color-gold-400);
  border-radius: var(--radius-md);
  padding: 8px 11px;
  font-size: 0.82rem;
  margin-top: 9px;
  line-height: 1.5;
  color: var(--color-gray-800);
}
.hz-tip b { color: var(--color-gold-500); }

.hz-words {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  font-family: var(--font-hanzi);
  font-size: 0.92rem;
  color: var(--color-gray-800);
  margin-top: var(--space-2);
}
.hz-wl { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.72rem; color: var(--color-gray-500); font-weight: 600; margin-right: 5px; }

.vp-quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.vp-quiz-seg {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-100);
}

.vp-quiz-seg.is-done {
  background: var(--color-red-600);
}

.vp-quiz-counter {
  color: var(--color-gray-500);
  font-size: 0.88rem;
  margin-bottom: var(--space-5);
}

.vp-quiz-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.vp-quiz-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.vp-quiz-prompt-zh {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 2.2rem;
  font-weight: 700;
}

.vp-quiz-prompt-py {
  color: var(--color-gold-500);
  font-weight: 700;
  font-size: 1.1rem;
}

.vp-quiz-prompt-vn {
  font-size: 1.3rem;
  font-weight: 800;
}

.vp-quiz-play-btn {
  border: none;
  background: var(--color-red-50);
  color: var(--color-red-600);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.vp-quiz-play-btn:hover {
  background: var(--color-red-600);
  color: var(--color-white);
}

.vp-quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vp-option-btn {
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  font-family: var(--font-hanzi);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
}

.vp-option-btn:hover:not(:disabled) {
  border-color: var(--color-red-500);
}

.vp-option-btn:disabled {
  cursor: default;
}

.vp-option-btn.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
}

.vp-option-btn.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.vp-quiz-done {
  text-align: center;
  padding: var(--space-7) var(--space-5);
}

.vp-quiz-done strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
}

/* ---------- Flashcard practice (lat the) ---------- */
.fc-card-wrap {
  max-width: 460px;
  margin: 0 auto var(--space-6);
  perspective: 1200px;
}

.fc-card {
  position: relative;
  width: 100%;
  min-height: 280px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-standard);
}

.fc-card.is-flipped {
  transform: rotateY(180deg);
}

.fc-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.fc-front {
  background: linear-gradient(135deg, var(--color-red-500), var(--color-red-700));
}

.fc-back {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
  transform: rotateY(180deg);
}

.fc-zh {
  font-size: 2.4rem;
  font-weight: 700;
}

.fc-back .fc-zh {
  font-size: 1.6rem;
}

.fc-face .vp-speak-btn {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}

.fc-face .vp-speak-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.fc-hint {
  margin-top: var(--space-2);
  font-size: 0.82rem;
  opacity: 0.85;
}

.fc-py {
  font-weight: 700;
  opacity: 0.95;
}

.fc-vn {
  font-size: 1.2rem;
  font-weight: 800;
}

.fc-example {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  opacity: 0.9;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: var(--space-2);
}

.fc-actions {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-3);
}

.fc-btn {
  flex: 1;
  min-height: 52px;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--color-white);
}

.fc-btn-no {
  background: var(--color-red-600);
}

.fc-btn-no:hover {
  background: var(--color-red-700);
}

.fc-btn-yes {
  background: var(--color-green-600);
}

.fc-btn-yes:hover {
  background: #17794a;
}

/* ---------- Grammar practice (Bai hoc + Bai tap) ---------- */
.gr-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.gr-step {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.gr-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 2px;
}

.gr-num.is-red {
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.gr-num.is-gold {
  background: var(--color-gold-50);
  color: #8a5a00;
}

.gr-step-text {
  flex: 1;
  padding-top: 1px;
}

.gr-step-text b {
  color: var(--color-red-600);
}

.gr-example-box {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-2) 0 var(--space-3) 36px;
}

.gr-example-item {
  padding: var(--space-2) 0;
}

.gr-example-item + .gr-example-item {
  border-top: 1px dashed var(--color-gray-200);
  margin-top: var(--space-2);
}

.gr-example-zh {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-hanzi);
  font-size: 1.2rem;
  font-weight: 700;
}

.gr-example-py {
  color: var(--color-gold-500);
  font-weight: 700;
  margin-top: 2px;
}

.gr-example-vn {
  color: var(--color-gray-600);
}

.gr-note-box {
  background: var(--color-gold-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-left: 36px;
  color: #6b4a00;
}

.gr-exercise-context {
  background: var(--color-gold-50, #fdf6e3);
  border-left: 3px solid var(--color-gold-500, #d4a017);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.92rem;
  color: var(--color-gray-700);
  font-style: italic;
  text-align: left;
}

.gr-exercise-sentence {
  text-align: center;
  font-family: var(--font-hanzi);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--space-6);
}

.gr-exercise-sentence .blank {
  display: inline-block;
  min-width: 2.4em;
  border-bottom: 2px solid var(--color-red-500);
  color: var(--color-red-500);
}

/* ---------- Dialogue practice (Hoi thoai) ---------- */
.dp-audio-box {
  background: linear-gradient(135deg, var(--color-green-50), #eafaf1);
  border: 1.5px solid #a7e3c3;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.dp-audio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-green-600);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

.dp-audio-box audio {
  width: 100%;
  height: 38px;
}

.dp-audio-missing {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  font-style: italic;
}

.dp-scene-label {
  font-weight: 700;
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
  font-size: 1rem;
}

.dp-quiz-box {
  background: var(--color-gold-50);
  border: 1.5px solid var(--color-gold-400);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.dp-quiz-title {
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
}

.dp-quiz-q {
  margin-bottom: var(--space-4);
}

.dp-quiz-q:last-of-type {
  margin-bottom: var(--space-3);
}

.dp-quiz-qtext {
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
  font-size: 0.92rem;
}

.dp-quiz-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-quiz-opt {
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  cursor: pointer;
}

.dp-quiz-opt:hover:not(:disabled) {
  border-color: var(--color-gold-500);
}

.dp-quiz-opt:disabled {
  cursor: default;
}

.dp-quiz-opt.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
}

.dp-quiz-opt.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.dp-quiz-skip {
  border: none;
  background: none;
  color: var(--color-gray-500);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.dp-content-label {
  font-weight: 700;
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
  font-size: 0.95rem;
}

.dp-line {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dp-line.is-b {
  flex-direction: row-reverse;
}

.dp-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-white);
}

.dp-line:not(.is-b) .dp-avatar {
  background: var(--color-red-600);
}

.dp-line.is-b .dp-avatar {
  background: var(--color-gray-700);
}

.dp-bubble {
  max-width: 72%;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.dp-line:not(.is-b) .dp-bubble {
  background: var(--color-red-50);
  border-top-left-radius: 4px;
}

.dp-line.is-b .dp-bubble {
  background: var(--color-gray-100);
  border-top-right-radius: 4px;
  text-align: right;
}

.dp-zh {
  font-family: var(--font-hanzi);
  font-size: 1.1rem;
  font-weight: 700;
}

.dp-py {
  color: var(--color-gold-500);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 2px;
}

.dp-vn {
  color: var(--color-gray-600);
  font-size: 0.88rem;
  margin-top: 2px;
}

/* ---------- Listen practice (Luyen nghe) ---------- */
.lp-passage {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.lp-question {
  margin-top: var(--space-4);
}

.lp-question-text {
  font-family: var(--font-hanzi);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.lp-question-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .lp-question-opts {
    grid-template-columns: 1fr;
  }
}

.lp-opt-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.lp-opt-btn:hover:not(:disabled) {
  border-color: var(--color-red-500);
}

.lp-opt-btn.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
}

.lp-opt-btn.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

/* ---------- Listen workbook (de nghe that tu sach bai tap, audio that) ---------- */
.lp-wb-audio-pin {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}

.lp-wb-audio-pin-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-red-600);
  margin-bottom: var(--space-2);
}

.lp-wb-score {
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-gray-700);
}

.lp-wb-part {
  margin-bottom: var(--space-6);
}

.lp-wb-part-title {
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: var(--space-3);
}

.lp-wb-audio {
  width: 100%;
  margin-bottom: var(--space-4);
}

.lp-dict-item, .lp-mc-item {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.lp-dict-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-red-600);
  margin-bottom: var(--space-2);
}

.lp-dict-result {
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 6px;
}

.lp-dict-result.is-correct { color: var(--color-green-600); }
.lp-dict-result.is-wrong { color: var(--color-red-600); }

.lp-dict-input.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
}

.lp-dict-input.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.lp-dict-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.lp-dict-speaker {
  font-weight: 700;
  color: var(--color-gray-600);
}

.lp-dict-input {
  min-width: 110px;
  flex: 1 1 110px;
  border: none;
  border-bottom: 2px solid var(--color-gold-400);
  background: var(--color-gold-50);
  padding: 4px 8px;
  font-family: var(--font-hanzi);
  font-size: 1rem;
  text-align: center;
}

.lp-dict-input:focus {
  outline: none;
  border-color: var(--color-red-500);
}

.lp-dict-reveal {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: var(--space-1);
}

.lp-dict-reveal:hover:not(:disabled) {
  background: var(--color-gray-200);
}

.lp-dict-reveal:disabled {
  cursor: default;
  opacity: 0.6;
}

.lp-dict-answer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-200);
}

.lp-dict-answer-line {
  margin-bottom: var(--space-2);
}

.lp-dict-answer-py {
  color: var(--color-gold-500);
  font-weight: 600;
  font-size: 0.85rem;
}

.lp-dict-answer-vn {
  color: var(--color-gray-600);
  font-size: 0.85rem;
}

.lp-mc-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-mc-opt {
  text-align: left;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  cursor: pointer;
}

.lp-mc-opt:hover:not(:disabled) {
  border-color: var(--color-gold-400);
}

.lp-mc-opt.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
}

.lp-mc-opt.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.lp-mc-explain {
  margin-top: var(--space-3);
  color: var(--color-gray-600);
  font-size: 0.85rem;
}

/* ---------- Speaking practice (Luyen noi) ---------- */
.sp-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.sp-question {
  margin-bottom: var(--space-4);
}

.sp-q-zh {
  font-family: var(--font-hanzi);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-gray-800);
  margin-top: var(--space-3);
}

.sp-q-vn {
  color: var(--color-gray-600);
  font-size: 0.9rem;
  margin-top: 4px;
}

.sp-hint {
  display: inline-block;
  background: var(--color-red-50);
  color: var(--color-red-600);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.sp-toggle-btn {
  display: block;
  background: none;
  border: none;
  color: var(--color-red-600);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-3);
}

.sp-sample {
  background: var(--color-gray-50);
  border-left: 3px solid var(--color-red-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.sp-sample-zh {
  font-family: var(--font-hanzi);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.sp-sample-vn {
  color: var(--color-gray-600);
  font-size: 0.88rem;
  margin-top: 2px;
}

.sp-note {
  background: var(--color-gold-50, #fff8e6);
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}

.sp-rec-box {
  background: var(--color-red-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sp-rec-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sp-rec-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.sp-rec-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sp-rec-start {
  background: var(--color-red-600);
  color: var(--color-white);
}

.sp-rec-stop {
  background: var(--color-gray-700);
  color: var(--color-white);
}

.sp-rec-play,
.sp-rec-submit {
  background: var(--color-white);
  color: var(--color-red-600);
  border: 1.5px solid var(--color-red-200, var(--color-red-500));
}

.sp-rec-status {
  font-size: 0.85rem;
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
}

.sp-rec-scores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.sp-rec-score-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
}

.sp-rec-score-item span {
  font-size: 0.72rem;
  color: var(--color-gray-500);
}

.sp-rec-score-item b {
  font-size: 1.15rem;
  color: var(--color-red-600);
}

.sp-rec-recognized {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-gray-600);
  font-style: italic;
}

.sp-rec-fallback {
  font-size: 0.85rem;
  color: var(--color-gray-600);
  margin-top: var(--space-2);
}

.sp-tier-intro {
  color: var(--color-gray-600);
  font-size: 0.9rem;
  margin-bottom: var(--space-5);
}

.sp-model-grid,
.sp-drill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .sp-model-grid,
  .sp-drill-grid {
    grid-template-columns: 1fr;
  }
}

.sp-model-card,
.sp-drill-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sp-model-zh {
  font-family: var(--font-hanzi);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.sp-model-py {
  color: var(--color-gold-500);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 2px;
}

.sp-model-vn {
  color: var(--color-gray-600);
  font-size: 0.88rem;
  margin-top: 2px;
}

.sp-drill-frame {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.sp-drill-py {
  color: var(--color-gold-500);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 2px;
}

.sp-drill-vn {
  color: var(--color-gray-600);
  font-size: 0.85rem;
  margin: 4px 0 var(--space-3);
}

.sp-drill-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sp-drill-opt {
  background: var(--color-red-50);
  color: var(--color-red-600);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 0.85rem;
  font-weight: 600;
}

.sp-drill-sample {
  font-family: var(--font-hanzi);
  color: var(--color-gray-700);
  font-size: 0.9rem;
  margin-top: var(--space-2);
}

.sp-task-role {
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
}

.sp-task-guide {
  color: var(--color-gray-600);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.sp-hint-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sp-hint-row .sp-hint {
  margin-bottom: 0;
}

/* ---------- Game on tap (picker + match/fill/sort/errfix/mc) ---------- */
.game-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .game-picker-grid {
    grid-template-columns: 1fr;
  }
}

.game-picker-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
  cursor: pointer;
}

.game-picker-card:hover:not(:disabled) {
  border-color: var(--color-red-500);
}

.game-picker-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-picker-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}

.game-picker-title {
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: 2px;
}

.game-picker-desc {
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

.game-type-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.game-type-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.game-type-header h2 {
  font-size: 1.2rem;
  color: var(--color-gray-800);
}

/* Match (Ghep tu / Noi cau) */
.mg-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.mg-col-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
}

.mg-item {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mg-item.is-sel {
  border-color: var(--color-red-500);
  background: var(--color-red-50);
}

.mg-item.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
  cursor: default;
}

@keyframes mg-shake-anim {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.mg-item.mg-shake {
  animation: mg-shake-anim 0.3s;
  border-color: var(--color-red-600);
}

.mg-fb {
  min-height: 1.4em;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: var(--space-2);
}

/* ---------- Khoi dong (warmup): noi hinh anh voi chu Han ---------- */
.wu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.wu-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
}

.wu-card.is-sel {
  border-color: var(--color-blue-600);
  background: var(--color-blue-50);
}

.wu-card.matched {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  cursor: default;
}

.wu-emoji {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.wu-photo {
  margin: calc(var(--space-4) * -1) calc(var(--space-2) * -1) var(--space-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.wu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wu-label {
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gray-600);
}

.wu-py {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-gray-500);
}

.wu-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wu-opt {
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-hanzi);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
}

.wu-opt.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
  cursor: default;
}

.wu-opt.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

/* ---------- Workbook practice (Luyen tap sach bai tap) ---------- */
.wb-audio-box {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-green-50);
  border: 1px solid var(--color-green-600);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}

.wb-audio-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
}

.wb-audio-box audio {
  width: 100%;
  height: 38px;
  display: block;
}

.wb-block {
  margin-bottom: var(--space-6);
}

.wb-block-caption {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.wb-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.wb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-family: var(--font-hanzi);
}

.wb-table th {
  background: var(--color-green-50);
  color: var(--color-gray-800);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.82rem;
  padding: var(--space-3);
  text-align: center;
  white-space: nowrap;
}

.wb-table td {
  padding: var(--space-3);
  text-align: center;
  border-top: 1px solid var(--color-gray-100);
  font-size: 1.05rem;
  color: var(--color-gray-900);
}

.wb-note {
  font-size: 0.82rem;
  color: var(--color-gray-600);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.wb-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.wb-photo-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  padding-bottom: var(--space-2);
}

.wb-photo-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.wb-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-photo-py {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin-top: var(--space-2);
}

.wb-photo-hz {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-gray-900);
}

.wb-tone-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
}

.wb-tone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.wb-tone-line {
  width: 6px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--color-green-600);
}

.wb-tone-line.tone-1 { transform: none; }
.wb-tone-line.tone-2 { transform: rotate(20deg); }
.wb-tone-line.tone-3 { transform: skewY(15deg) scaleY(0.7); border-radius: 0 0 var(--radius-pill) var(--radius-pill); }
.wb-tone-line.tone-4 { transform: rotate(-20deg); }

.wb-tone-label {
  font-family: var(--font-hanzi);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.wb-drill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.wb-drill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  color: var(--color-gray-700);
}

.wb-drill-input {
  width: 44px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  text-align: center;
  background: var(--color-gray-50);
}

.wb-drill-input:focus {
  outline: none;
  border-color: var(--color-green-600);
  background: var(--color-white);
}

.wb-drill-answer {
  color: var(--color-green-600);
  font-weight: 700;
  display: none;
}

.wb-block.is-revealed .wb-drill-answer {
  display: inline;
}

.wb-reveal-btn {
  background: var(--color-green-600);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.wb-reveal-btn:hover {
  background: var(--color-green-500);
}

.wb-tonemc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wb-tonemc-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.wb-tonemc-prompt {
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  color: var(--color-gray-700);
  min-width: 70px;
}

.wb-tonemc-blank {
  display: inline-block;
  color: var(--color-gray-400);
  font-weight: 700;
}

.wb-tonemc-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wb-tonemc-opt {
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  color: var(--color-gray-800);
  cursor: pointer;
}

.wb-tonemc-opt:hover:not(:disabled) {
  border-color: var(--color-green-600);
}

.wb-tonemc-opt.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-600);
  font-weight: 700;
}

.wb-tonemc-opt.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
  color: var(--color-red-600);
}

.wb-dlgpic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.wb-dlgpic-card {
  position: relative;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding-bottom: var(--space-3);
}

.wb-dlgpic-num {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-red-600);
  color: var(--color-white);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  z-index: 1;
}

.wb-dlgpic-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.wb-dlgpic-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-dlgpic-lines {
  font-family: var(--font-hanzi);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-gray-900);
  text-align: center;
  padding: var(--space-2) var(--space-2) 0;
  line-height: 1.6;
}

.wb-wordlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wb-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-hanzi);
  font-size: 0.95rem;
  color: var(--color-gray-800);
}

.wb-word-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-green-50);
  color: var(--color-green-600);
  font-size: 0.7rem;
  font-weight: 700;
}

.mt-wrap {
  background: transparent;
  border: none;
  padding: 0;
}

.mt-part-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-gray-900);
  margin: var(--space-5) 0 var(--space-3);
}

.mt-part-title:first-child {
  margin-top: 0;
}

.mt-q-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mt-q {
  display: flex;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.mt-q-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.mt-q-body {
  flex: 1;
  min-width: 0;
}

.mt-q-prompt {
  margin-bottom: var(--space-3);
}

.mt-q-prompt .hanzi {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.5;
}

.mt-q-py {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin-bottom: 2px;
}

.mt-q-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mt-opt {
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.mt-opt.mt-opt-pic {
  position: relative;
  width: 108px;
}

.mt-opt.mt-opt-pic img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.mt-opt-key {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.mt-opt.mt-opt-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
}

.mt-opt-text .mt-opt-key {
  position: static;
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.mt-opt-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mt-opt-body .hanzi {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.mt-opt-py {
  font-size: 0.74rem;
  color: var(--color-gray-500);
}

.mt-opt:hover:not(:disabled) {
  border-color: var(--color-green-600);
}

.mt-opt.is-selected {
  border-color: var(--color-green-600);
  box-shadow: 0 0 0 2px var(--color-green-100);
}

.mt-opt.is-correct {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
}

.mt-opt.is-correct .mt-opt-key {
  background: var(--color-green-600);
  color: var(--color-white);
}

.mt-opt.is-wrong {
  border-color: var(--color-red-600);
  background: var(--color-red-50);
}

.mt-opt.is-wrong .mt-opt-key {
  background: var(--color-red-600);
  color: var(--color-white);
}

.mt-q-pending {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.74rem;
  color: var(--color-amber-600, #b45309);
  background: var(--color-amber-50, #fffbeb);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

.mt-result-bar {
  background: var(--color-green-50);
  border: 1.5px solid var(--color-green-600);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-size: 1rem;
  color: var(--color-gray-900);
  text-align: center;
}

/* Fill / Sort / MC shared bits */
.fg-card,
.sg-card,
.mc-card {
  margin-bottom: var(--space-4);
}

.fg-card.is-correct,
.sg-card.is-correct,
.mc-card.is-correct,
.vp-quiz-card.is-correct {
  border-color: var(--color-green-600);
}

.fg-card.is-wrong,
.sg-card.is-wrong,
.mc-card.is-wrong,
.vp-quiz-card.is-wrong {
  border-color: var(--color-red-600);
}

.gr-type-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-indigo-50, #eef0ff);
  color: var(--color-indigo-600, #4f46e5);
  font-size: 0.75rem;
  font-weight: 700;
}

.gr-judge-btns {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.gr-judge-btns .btn.is-correct {
  border-color: var(--color-green-600);
  color: var(--color-green-600);
}

.gr-judge-btns .btn.is-wrong {
  border-color: var(--color-red-600);
  color: var(--color-red-600);
}

.gr-translate-prompt {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-4);
  text-align: center;
}

.gr-translate-input {
  width: 100%;
  min-height: 80px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  resize: vertical;
  margin-bottom: var(--space-4);
}

.gr-translate-input:focus {
  outline: none;
  border-color: var(--color-red-500);
}

.gr-translate-answer {
  margin-top: var(--space-4);
  background: var(--color-red-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.gr-translate-py {
  color: var(--color-gold-500);
  font-weight: 600;
  margin-top: 4px;
}

.fg-text {
  font-size: 1.05rem;
  line-height: 1.8;
}

.fg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-red-600);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: var(--space-2);
}

.fg-input {
  display: inline-block;
  width: 90px;
  text-align: center;
  border: none;
  border-bottom: 2px solid var(--color-gray-300);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  padding: 2px 4px;
  margin: 0 4px;
  background: transparent;
}

.fg-input:focus {
  outline: none;
  border-bottom-color: var(--color-red-500);
}

.fg-input.is-correct {
  border-bottom-color: var(--color-green-600);
  color: var(--color-green-600);
}

.fg-input.is-wrong {
  border-bottom-color: var(--color-red-600);
  color: var(--color-red-600);
}

.fg-hint {
  color: var(--color-gray-500);
  font-size: 0.82rem;
  margin-top: var(--space-2);
}

.fg-fb,
.sg-fb,
.mc-fb {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: var(--space-2);
  min-height: 1.3em;
}

.fg-fb.is-correct,
.sg-fb.is-correct,
.mc-fb.is-correct {
  color: var(--color-green-600);
}

.fg-fb.is-wrong,
.sg-fb.is-wrong,
.mc-fb.is-wrong {
  color: var(--color-red-600);
}

.fg-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fg-score {
  background: var(--color-red-50);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  color: var(--color-red-600);
  text-align: center;
}

/* Sort */
.sg-bank,
.sg-answer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
}

.sg-answer {
  border-bottom: 2px dashed var(--color-gray-300);
  margin-bottom: var(--space-3);
}

.sg-chip,
.sg-placed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.sg-chip.is-used {
  opacity: 0.3;
  cursor: not-allowed;
}

.sg-placed {
  border-color: var(--color-red-500);
  background: var(--color-red-50);
}

/* MC / Errfix */
.mc-prompt {
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

.mc-sub {
  font-family: var(--font-latin);
  font-size: 0.8rem;
  color: var(--color-gray-500);
  margin: 4px 0 0 30px;
}

.mc-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .mc-opts {
    grid-template-columns: 1fr;
  }
}

/* ---------- Translate practice (Luyen dich) ---------- */
.tp-direction-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.tp-dir-btn {
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-800);
  border-radius: var(--radius-full, 999px);
  padding: var(--space-2) var(--space-5);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.tp-dir-btn.active {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  color: var(--color-white);
}

.tp-card {
  text-align: center;
}

.tp-prompt-vi {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: var(--space-5);
}

.tp-prompt-zh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tp-prompt-zh .hanzi {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.tp-prompt-py {
  color: var(--color-gold-500);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.tp-input {
  width: 100%;
  min-height: 90px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-hanzi);
  font-size: 1rem;
  resize: vertical;
  margin-bottom: var(--space-4);
  text-align: left;
}

.tp-input:focus {
  outline: none;
  border-color: var(--color-red-500);
}

.tp-reveal-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  background: #ef7a82;
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.tp-reveal-btn:hover {
  background: #e85f68;
}

.tp-answer {
  margin-top: var(--space-4);
  background: var(--color-red-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.tp-answer-zh {
  font-family: var(--font-hanzi);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.tp-answer-py {
  color: var(--color-gold-500);
  font-weight: 600;
  margin-top: 4px;
}

.tp-answer-vi {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-800);
}

.tp-next-btn {
  margin-top: var(--space-4);
}

.tp-self-check {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-gray-200);
}

.tp-self-check-label {
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.tp-self-btn {
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin: 0 var(--space-2) var(--space-2) 0;
  background: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.tp-self-btn.tp-self-yes:hover { border-color: var(--color-green-600); color: var(--color-green-600); }
.tp-self-btn.tp-self-no:hover { border-color: var(--color-red-600); color: var(--color-red-600); }

/* ---------- Global pinyin toggle (persistent across every screen) ---------- */
.pinyin-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-5);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full, 999px);
  padding: 6px 10px 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-800);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.pinyin-toggle .icon { color: var(--color-gray-500); flex-shrink: 0; }

.pinyin-toggle-switch {
  width: 34px;
  height: 20px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-gray-200);
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.pinyin-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.pinyin-toggle[aria-pressed="true"] .pinyin-toggle-switch { background: var(--color-green-600, #16a34a); }
.pinyin-toggle[aria-pressed="true"] .pinyin-toggle-knob { transform: translateX(14px); }

@media (max-width: 640px) {
  .pinyin-toggle { top: var(--space-2); right: var(--space-2); padding: 5px 8px 5px 10px; font-size: 0.78rem; }
}

body.pinyin-hidden .vp-word-py,
body.pinyin-hidden .vp-quiz-prompt-py,
body.pinyin-hidden .fc-py,
body.pinyin-hidden .gr-example-py,
body.pinyin-hidden .dp-py,
body.pinyin-hidden .sp-model-py,
body.pinyin-hidden .sp-drill-py,
body.pinyin-hidden .tp-prompt-py,
body.pinyin-hidden .tp-answer-py,
body.pinyin-hidden .py-inline {
  display: none;
}

/* ---------- Results screen (Ket qua cuoi bai) ---------- */
.rp-ring-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-bottom: var(--space-5);
}

.rp-ring {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
  margin: 0 auto;
  display: block;
}

.rp-ring-track {
  fill: none;
  stroke: var(--color-gray-200);
  stroke-width: 10;
}

.rp-ring-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.rp-ring-label {
  margin-top: -96px;
  margin-bottom: 44px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-gray-800);
}

.rp-ring-msg {
  margin: 0;
  color: var(--color-gray-600);
  font-size: 0.95rem;
}

.rp-breakdown {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}

.rp-breakdown h3 {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
}

.rp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-gray-100);
}

.rp-row:first-of-type { border-top: none; }

.rp-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rp-row-icon.is-red { background: var(--color-red-50); }
.rp-row-icon.is-blue { background: var(--color-blue-50); }
.rp-row-icon.is-indigo { background: var(--color-indigo-50); }
.rp-row-icon.is-green { background: var(--color-green-50, #e8f7ee); }

.rp-row-label {
  font-weight: 600;
  color: var(--color-gray-800);
  flex-shrink: 0;
  width: 180px;
}

.rp-row-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-gray-100);
  overflow: hidden;
}

.rp-row-bar-fill {
  height: 100%;
  border-radius: var(--radius-full, 999px);
}

.rp-row-bar-fill.is-red { background: var(--color-red-600); }
.rp-row-bar-fill.is-blue { background: var(--color-blue-600, #2563eb); }
.rp-row-bar-fill.is-indigo { background: var(--color-indigo-600); }
.rp-row-bar-fill.is-green { background: var(--color-green-600); }

.rp-row-pct {
  font-weight: 700;
  color: var(--color-gray-700);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.rp-row-done {
  margin-left: auto;
  color: var(--color-green-600);
  font-weight: 700;
  font-size: 0.9rem;
}

.rp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.rp-stat {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}

.rp-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-red-600);
}

.rp-stat span {
  color: var(--color-gray-600);
  font-size: 0.85rem;
}

.rp-cta {
  width: 100%;
  min-height: 52px;
}

@media (max-width: 640px) {
  .rp-row-label { width: 110px; font-size: 0.9rem; }
  .rp-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Leaderboard ---------- */
.lb-list {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-gray-100);
}

.lb-row:first-child { border-top: none; }

.lb-row.is-me {
  background: var(--color-red-50);
}

.lb-rank {
  width: 40px;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  text-align: center;
}

.lb-name {
  flex: 1;
  font-weight: 700;
  color: var(--color-gray-900);
}

.lb-name em {
  color: var(--color-red-600);
  font-style: normal;
  font-weight: 600;
  font-size: 0.82rem;
}

.lb-level {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-full, 999px);
  padding: 3px 10px;
  flex-shrink: 0;
}

.lb-streak {
  color: var(--color-gold-500);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 64px;
}

.lb-score {
  font-weight: 700;
  color: var(--color-gray-800);
  flex-shrink: 0;
  width: 130px;
  text-align: right;
}

.lb-empty {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}

@media (max-width: 640px) {
  .lb-row { flex-wrap: wrap; gap: var(--space-2); }
  .lb-level, .lb-streak, .lb-score { width: auto; }
}