/* ============================================================
   MODULE: Học tiếng Trung — chỉ dùng biến từ tokens.css
   ============================================================ */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) { .course-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .course-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* --- Tầng 1: lưới giáo trình --- */
.curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) { .curriculum-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .curriculum-grid { grid-template-columns: 1fr 1fr 1fr; } }
.curriculum-card { display: block; text-decoration: none; }
.curriculum-card:hover { text-decoration: none; }
.curriculum-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: var(--space-3);
}
.curriculum-card.curr-hsk .curriculum-card__icon { background: var(--curr-hsk-bg); }
.curriculum-card.curr-yct .curriculum-card__icon { background: var(--curr-yct-bg); }
.curriculum-card.curr-boya .curriculum-card__icon { background: var(--curr-boya-bg); }
.curriculum-card.curr-hanngu .curriculum-card__icon { background: var(--curr-hanngu-bg); }
.curriculum-card.curr-giaotiep .curriculum-card__icon { background: var(--curr-giaotiep-bg); }
.curriculum-card.curr-congxuong .curriculum-card__icon { background: var(--curr-congxuong-bg); }
.curriculum-card.curr-tutao .curriculum-card__icon { background: var(--curr-tutao-bg); }
.curriculum-card__title { font-size: var(--text-h4); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); font-family: var(--font-family-display); }
.curriculum-card__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-3); min-height: 42px; }

/* --- Tầng 2: header chi tiết giáo trình --- */
.curriculum-detail__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.curriculum-detail__icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.curriculum-detail__icon.curr-hsk { background: var(--curr-hsk-bg); }
.curriculum-detail__icon.curr-yct { background: var(--curr-yct-bg); }
.curriculum-detail__icon.curr-boya { background: var(--curr-boya-bg); }
.curriculum-detail__icon.curr-hanngu { background: var(--curr-hanngu-bg); }
.curriculum-detail__icon.curr-giaotiep { background: var(--curr-giaotiep-bg); }
.curriculum-detail__icon.curr-congxuong { background: var(--curr-congxuong-bg); }
.curriculum-detail__icon.curr-tutao { background: var(--curr-tutao-bg); }
.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; }
.course-card.curr-hsk { border-left-color: var(--curr-hsk); }
.course-card.curr-yct { border-left-color: var(--curr-yct); }
.course-card.curr-boya { border-left-color: var(--curr-boya); }
.course-card.curr-hanngu { border-left-color: var(--curr-hanngu); }
.course-card.curr-giaotiep { border-left-color: var(--curr-giaotiep); }
.course-card.curr-congxuong { border-left-color: var(--curr-congxuong); }
.course-card.curr-tutao { border-left-color: var(--curr-tutao); }
.course-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-2); }
.course-card__badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.course-card__level {
  font-size: 0.7rem; font-weight: 600; color: var(--color-secondary);
  background: rgba(44,95,111,0.08); padding: 2px var(--space-2); border-radius: 999px;
}
.course-card__free {
  font-size: 0.7rem; font-weight: 600; color: var(--color-success);
  background: rgba(76,140,74,0.12); padding: 2px var(--space-2); border-radius: 999px;
}
.course-card__standard {
  font-size: 0.7rem; font-weight: 600; color: var(--color-secondary);
  background: rgba(44,95,111,0.08); padding: 2px var(--space-2); border-radius: 999px;
}
.course-card__title { font-weight: 700; margin-bottom: var(--space-1); font-family: var(--font-family-display); color: var(--color-text); }
.course-card__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); flex: 1; margin-bottom: var(--space-2); }
.course-card__meta { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); font-family: var(--font-family-mono); }
.course-card__progress-label { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); }
.course-card__progress-label--muted { color: var(--color-text-faint); font-style: italic; }

/* --- Breadcrumb (bản nhẹ riêng cho trang công khai, không cần app-shell.css) --- */
.app-breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.app-breadcrumb a { color: var(--color-text-muted); }
.app-breadcrumb .app-breadcrumb__current { color: var(--color-text); font-weight: 600; }

/* --- Tầng 3: danh sách bài học --- */
.course-progress-banner { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-3); }
.course-progress-banner__label { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-muted); font-family: var(--font-family-mono); white-space: nowrap; }
.lesson-list { display: flex; flex-direction: column; gap: var(--space-2); }
.lesson-row {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.lesson-row:hover { transform: translateX(2px); box-shadow: var(--shadow-2); text-decoration: none; }
.lesson-row__num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-mono); font-weight: 700; font-size: var(--text-body-sm);
}
.lesson-row--done .lesson-row__num { background: var(--color-success-bg); color: var(--color-success); }
.lesson-row__body { flex: 1; }
.lesson-row__title { font-weight: 600; color: var(--color-text); }
.lesson-row__meta { font-size: var(--text-caption); color: var(--color-text-muted); }
.lesson-row__arrow { color: var(--color-text-faint); }

/* --- Tầng 4: chi tiết bài học --- */
.lesson-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); flex-wrap: wrap; }
.lesson-head__eyebrow { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent); }
.lesson-head__title { font-family: var(--font-family-display); font-size: var(--text-h1); margin-top: 2px; }
.lesson-section { margin-bottom: var(--space-6); }
.lesson-section__title { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.lesson-section__desc { color: var(--color-text-muted); font-size: var(--text-body-sm); margin: 0 0 var(--space-3); }
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.vocab-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); text-align: center;
}
.vocab-card__hanzi { font-family: var(--font-family-display), "Noto Sans SC", sans-serif; font-size: 1.9rem; color: var(--color-text); }
.vocab-card__pinyin { color: var(--color-primary); font-weight: 600; font-size: var(--text-body-sm); margin: 2px 0; }
.vocab-card__meaning { color: var(--color-text-muted); font-size: var(--text-body-sm); margin-bottom: var(--space-2); min-height: 20px; }
.vocab-card__etym-link { font-size: var(--text-caption); font-weight: 600; }
.vocab-card__etym-link--muted { color: var(--color-text-faint); font-weight: 400; }

/* ---- Hội thoại tình huống ---- */
.dialogue-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dialogue-turn {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.dialogue-turn__speaker { font-weight: 700; font-size: var(--text-caption); color: var(--color-accent); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.dialogue-turn__hanzi { font-family: var(--font-family-display), "Noto Sans SC", sans-serif; font-size: 1.15rem; margin-bottom: 2px; }
.dialogue-turn__pinyin { color: var(--color-primary); font-weight: 600; font-size: var(--text-body-sm); margin-bottom: 2px; }
.dialogue-turn__meaning { color: var(--color-text-muted); font-size: var(--text-body-sm); }

/* ---- Mẫu câu dùng ngay ---- */
.sentence-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.sentence-card {
  background: var(--color-primary-soft); border-radius: var(--radius-md);
  padding: var(--space-3);
}
.sentence-card__hanzi { font-family: var(--font-family-display), "Noto Sans SC", sans-serif; font-size: 1.1rem; color: var(--color-primary); }
.sentence-card__pinyin { font-weight: 600; font-size: var(--text-body-sm); margin: 2px 0; }
.sentence-card__meaning { color: var(--color-text-muted); font-size: var(--text-body-sm); }

/* ---- Mini test cuối bài ---- */
.quiz-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3);
}
.quiz-item__q { font-weight: 600; margin-bottom: var(--space-2); }
.quiz-item__options { display: flex; flex-direction: column; gap: 6px; }
.quiz-option {
  text-align: left; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; font-size: var(--text-body-sm); color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-standard);
}
.quiz-option:hover:not(:disabled) { background: var(--color-surface-alt); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct { border-color: var(--color-success); background: var(--color-success-bg); font-weight: 600; }
.quiz-option.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }
.quiz-item__expl { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-muted); }
.quiz-result {
  background: var(--color-accent-soft); border-radius: var(--radius-md);
  padding: var(--space-3); font-weight: 700; text-align: center; color: var(--color-accent-hover);
}

.lesson-practice-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); flex-wrap: wrap; }