/* ══════════════════════════════════════
   Learnsy — Typography & Spacing
   index/CSS/typography.css
══════════════════════════════════════ */

/* ── 1. Responsive font sizes với clamp() ── */

/* Tiêu đề trang chủ "Luyện tập hôm nay" */
.ls-title-hero {
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.3px;
}

/* Tiêu đề bài học trong card */
.ls-title-card {
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.4;
  letter-spacing: -0.1px;
}

/* Tên bài học trong quiz header */
.ls-title-quiz {
  font-size: clamp(12px, 3vw, 14px);
  line-height: 1.3;
}

/* Câu hỏi (question text) */
.ls-question-text {
  font-size: clamp(13px, 3.8vw, 15px);
  line-height: 1.75;
  letter-spacing: 0.1px;
}

/* Đoạn tư liệu (passage) */
.ls-passage-text {
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.85;
  letter-spacing: 0.15px;
}

/* Đáp án (option text) */
.ls-option-text {
  font-size: clamp(13px, 3.5vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.05px;
}

/* Nhãn phụ (subject tag, câu số, ...) */
.ls-label-sm {
  font-size: clamp(10px, 2.5vw, 11px);
  letter-spacing: 0.4px;
}

/* ── 2. Tối ưu line-height & letter-spacing ── */

/* Đoạn văn mô tả bài học */
.ls-desc {
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.65;
  letter-spacing: 0.1px;
}

/* Lịch sử làm bài — tên bài */
.ls-hist-title {
  font-size: clamp(12px, 3.2vw, 13px);
  line-height: 1.45;
  letter-spacing: 0px;
}

/* Nội dung đáp án True/False */
.ls-tf-text {
  font-size: clamp(12px, 3.4vw, 13px);
  line-height: 1.75;
  letter-spacing: 0.1px;
}

/* ── 3. Grid system cho danh sách bài học ── */

/*
  Trên màn ≥ 600px: 2 cột
  Trên màn ≥ 900px: 3 cột
  Mặc định (mobile): 1 cột
*/
.ls-lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 600px) {
  .ls-lesson-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 900px) {
  .ls-lesson-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* Card trong grid — giữ chiều cao đồng đều */
.ls-lesson-grid > .fade-up {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── 4. Spacing helpers ── */

/* Khoảng cách section */
.ls-section-gap    { margin-bottom: 20px; }
.ls-section-gap-lg { margin-bottom: 28px; }

/* Padding body content */
.ls-body-pad {
  padding: clamp(12px, 4vw, 20px);
  padding-bottom: 80px;
}

/* ── 5. Smooth font rendering ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}