/* =========================================================================
   MTL Study · Bao Đậu Bách Khoa — kiểu dáng trang chủ (hướng C)
   Thứ tự: biến → reset → kiểu cơ bản → component → section → responsive

   Mô-típ chính: khối chia đôi lệch, một bên panel màu môn đậm có ký hiệu
   phóng to, một bên panel sáng chứa nội dung.

   Ràng buộc hiệu năng (brief mục 8):
   - không backdrop-filter
   - không box-shadow có bán kính mờ trên 8px
   - chỉ animate transform và opacity; màu nền đổi tức thì
   ========================================================================= */


/* =========================================================================
   1. BIẾN
   ========================================================================= */

:root {
  /* nền */
  --paper:      #F3F4EC;
  --paper-lift: #FCFCF8;
  --paper-sink: #E9EBE0;

  /* xanh */
  --forest-900: #14301A;
  --forest-700: #2C5A32;
  --forest-500: #4A7C4E;
  --forest-200: #BFD2BC;
  --lime:       #97C459;
  --lime-soft:  #7FA07E;

  /* chữ
     --ink-faint giữ đúng mã màu của brief nhưng chỉ dùng cho icon và chi tiết
     trang trí. Trên nền sáng nó chỉ đạt 3,19:1, trượt mức 4,5:1 cho chữ, nên
     mọi chữ phụ dùng --ink-soft (6,23:1). */
  --ink:        #1C1F1A;
  --ink-soft:   #5A6156;
  --ink-faint:  #8A9084;

  /* đường kẻ */
  --line:        rgba(20, 48, 26, 0.12);
  --line-strong: rgba(20, 48, 26, 0.20);

  /* chữ trên panel màu đậm */
  --on-dark:      #FCFCF8;
  --on-dark-soft: rgba(255, 255, 255, 0.72);
  --chip-fill:    rgba(255, 255, 255, 0.14);

  /* sáu màu môn */
  --subject-toan: #14301A;
  --subject-li:   #1E4D6B;
  --subject-hoa:  #7A3B1E;
  --subject-van:  #4A3B7A;
  --subject-anh:  #1A5B4E;
  --subject-sinh: #4A7C4E;

  /* chữ */
  --font-display: "Lora", "Literata", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-glyph: "Lora", "Noto Sans Math", "Cambria Math", "STIX Two Math", Georgia, serif;

  --fs-hero:    clamp(38px, 5.2vw, 48px);
  --fs-glyph:   clamp(72px, 12vw, 110px);
  --fs-h1:      clamp(28px, 4vw, 40px);
  --fs-h2:      clamp(22px, 3vw, 28px);
  --fs-h3:      20px;
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-caption: 12px;

  /* nhịp dọc bậc 8 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* bo góc */
  --radius-chip:  4px;
  --radius-card:  13px;
  --radius-pill:  999px;
  --radius-inner: 8px;

  /* khung */
  --container: 1200px;
  --gutter: 20px;
  --section-gap: 56px;
  --topbar-height: 64px;

  --shadow-hairline: 0 1px 2px rgba(20, 48, 26, 0.05);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Mỗi phần tử mang data-subject lấy màu panel của môn đó. */
[data-subject="toan"] { --panel: var(--subject-toan); }
[data-subject="li"]   { --panel: var(--subject-li); }
[data-subject="hoa"]  { --panel: var(--subject-hoa); }
[data-subject="van"]  { --panel: var(--subject-van); }
[data-subject="anh"]  { --panel: var(--subject-anh); }

/* Nền Sinh học sáng nhất trong sáu màu. Chữ trắng 72% chỉ đạt 3,38:1 và chip
   trắng mờ chỉ đạt 3,65:1, nên riêng môn này chữ phụ đậm hơn và chip tối đi. */
[data-subject="sinh"] {
  --panel: var(--subject-sinh);
  --on-dark-soft: rgba(255, 255, 255, 0.94);
  --chip-fill: rgba(0, 0, 0, 0.2);
}


/* =========================================================================
   2. RESET
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-height) + var(--space-2));
}

body,
h1, h2, h3,
p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Các phần tử dùng thuộc tính hidden không tự đặt display, nên quy tắc này
   thắng mà không cần !important. */
[hidden] {
  display: none;
}


/* =========================================================================
   3. KIỂU CƠ BẢN
   ========================================================================= */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tiếng Việt có hai tầng dấu chồng nhau: không chữ nào dưới line-height 1.12. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--forest-900);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

p {
  line-height: 1.7;
  max-width: 70ch;
}

:focus-visible {
  outline: 2px solid var(--forest-700);
  outline-offset: 2px;
}

::selection {
  background: var(--forest-200);
  color: var(--forest-900);
}

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-1);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--forest-900);
  color: var(--on-dark);
  border-radius: var(--radius-chip);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Khoảng cách giữa hai section đúng một nhịp: section chỉ có đệm đầu, section
   nền chìm thêm lề trên và đệm đáy để tách mép màu. */
.section {
  padding-top: var(--section-gap);
}

.section-sink {
  margin-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  background: var(--paper-sink);
}

.section-head {
  margin-bottom: var(--space-4);
}

.section-head p {
  margin-top: var(--space-1);
  color: var(--ink-soft);
}

/* Nhãn chữ hoa nhỏ: hai lần trên cả trang, ở hero và khối người biên soạn. */
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-700);
}

.eyebrow-dark {
  color: var(--lime-soft);
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* Ký hiệu môn: font display in nghiêng cho ra dáng công thức. Không có dấu
   tiếng Việt nên được phép line-height thấp. */
.glyph {
  font-family: var(--font-glyph);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  max-width: none;
}

.glyph sup {
  font-size: 0.5em;
  font-style: normal;
  vertical-align: 0.9em;
  line-height: 0;
  margin-left: 0.04em;
}


/* =========================================================================
   4. COMPONENT
   ========================================================================= */

/* ---- Nút -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Mỗi khối nhìn thấy chỉ có một nút tô đặc. */
.btn-solid {
  background: var(--forest-900);
  color: var(--on-dark);
}

.btn-solid:hover {
  background: var(--forest-700);
}

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--forest-900);
}

.btn-outline:hover {
  border-color: var(--forest-900);
}

.btn-text {
  padding-inline: 12px;
  color: var(--forest-900);
  text-decoration: underline;
  text-decoration-color: var(--forest-200);
  text-underline-offset: 5px;
}

.btn-text:hover {
  text-decoration-color: currentColor;
}

/* ---- Thương hiệu ------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-inner);
  background: var(--forest-900);
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--forest-900);
}

/* ---- Khối chia đôi ---------------------------------------------------- */

.split {
  display: grid;
  overflow: hidden;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hairline);
}

.split-light {
  background: var(--paper-lift);
  color: var(--ink);
}

/* Chữ trên panel đậm luôn là --on-dark hoặc --on-dark-soft. */
.split-dark {
  background: var(--panel, var(--forest-900));
  color: var(--on-dark);
}

/* ---- Chip lọc môn ----------------------------------------------------- */

.chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-bottom: var(--space-3);
}

.chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--paper-lift);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  scroll-snap-align: start;
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.chip[aria-selected="true"] {
  background: var(--panel);
  border-color: var(--panel);
  color: var(--on-dark);
}

/* "Tất cả" khác loại với sáu môn: tách bằng khoảng 20px và một vạch dọc. */
.chip-all {
  --panel: var(--forest-900);
  border-color: var(--line-strong);
  color: var(--forest-900);
  font-weight: 600;
}

.chip-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 28px;
  margin-inline: 6px;
  background: var(--line-strong);
}

/* ---- Card nổi bật (chia đôi) ------------------------------------------ */

.doc-featured {
  position: relative;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  margin-bottom: var(--space-3);
}

.featured-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 220px;
  padding: var(--space-3);
}

.panel-label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-dark-soft);
}

.featured-glyph {
  font-size: 58px;
}

.featured-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4) 0;
}

.featured-body .doc-title {
  font-size: var(--fs-h3);
}

.featured-body .doc-desc {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--fs-body);
}

/* ---- Card nhỏ (dải màu hẹp bên trái) ---------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.doc-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hairline);
}

.card-strip {
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--on-dark);
}

.card-glyph {
  font-size: 28px;
}

.card-body {
  display: flex;
  flex-direction: column;
  padding: 14px var(--space-2) 0;
}

.doc-card .doc-title {
  font-size: 16px;
  margin-top: 2px;
}

.doc-meta {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-soft);
}

.doc-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.doc-desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Hàng hành động luôn nằm đáy card; ::after phủ cả card để dễ chạm trên mobile. */
.doc-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 48px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--forest-900);
}

.doc-card .doc-action {
  margin-top: 12px;
}

.doc-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

.doc-action .icon {
  width: 16px;
  height: 16px;
  color: var(--forest-700);
  transition: transform 0.18s var(--ease);
}

.doc-featured:hover,
.doc-card:hover {
  border-color: var(--line-strong);
}

.doc-featured:hover .doc-action .icon,
.doc-card:hover .doc-action .icon {
  transform: translate(2px, -2px);
}

.doc-action:focus-visible {
  outline: none;
}

.doc-action:focus-visible::after {
  outline: 2px solid var(--forest-700);
  outline-offset: 2px;
}

/* ---- Trạng thái rỗng -------------------------------------------------- */

.empty-state {
  padding: var(--space-5) var(--space-3);
  background: var(--paper-lift);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  text-align: center;
}

.empty-state p {
  margin: var(--space-1) auto var(--space-3);
  color: var(--ink-soft);
}

.noscript-list {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-3);
}

.noscript-list a {
  color: var(--forest-900);
  text-decoration: underline;
}


/* =========================================================================
   5. SECTION
   ========================================================================= */

/* ---- Thanh trên ------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-height);
  background: var(--paper);
  border-bottom: 1px solid transparent;
}

.topbar.is-scrolled {
  border-bottom-color: var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
}

.scroll-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
}

.nav-panel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
}

.nav {
  margin-inline: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
}

.nav-link:hover,
.nav-toggle[aria-expanded="true"] {
  color: var(--forest-900);
}

.icon-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.18s var(--ease);
}

.nav-toggle[aria-expanded="true"] .icon-chevron {
  transform: rotate(180deg);
}

.nav-tools {
  position: relative;
}

.tools-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 50%;
  z-index: 10;
  min-width: 260px;
  padding: var(--space-1);
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 8px rgba(20, 48, 26, 0.08);
  transform: translateX(-50%);
}

.tools-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: var(--space-1) 12px;
  border-radius: var(--radius-inner);
  color: var(--forest-900);
}

.tools-item:hover {
  background: var(--paper-sink);
}

.tools-title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
}

.tools-note {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-soft);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 210px;
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}

.search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-2) 0 40px;
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink);
}

.search-input::placeholder {
  color: var(--ink-soft);
}

.search-input:focus-visible {
  border-color: var(--forest-700);
}

.topbar-cta {
  min-height: 44px;
  padding: 0 20px;
}

.menu-button {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: var(--radius-pill);
  color: var(--forest-900);
}

.menu-button .icon {
  width: 24px;
  height: 24px;
}

/* Thanh trên (z-index 40, sticky) tạo ngữ cảnh xếp lớp riêng, nên panel menu
   bên trong chỉ nổi so với các lớp thấp hơn 40. Lớp phủ phải nằm dưới thanh
   trên, nếu không nó sẽ đè lên panel và nuốt mọi lần chạm. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(20, 31, 26, 0.36);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.scrim.is-visible {
  opacity: 1;
}

/* ---- Hero ------------------------------------------------------------- */

.hero {
  padding-top: var(--space-3);
}

.hero-split {
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  min-height: 460px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5);
}

.hero-title {
  margin-top: var(--space-2);
  font-size: var(--fs-hero);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--forest-700);
}

.hero-lede {
  margin-top: var(--space-2);
  font-size: var(--fs-body-lg);
  color: var(--ink-soft);
  max-width: 36em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: var(--space-4);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 6px;
}

.stat dd {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--forest-900);
}

.stat dt {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Nội dung hero hiện lên đúng một lần khi tải trang. */
.hero-copy > * {
  animation: rise 0.6s var(--ease) both;
}

.hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.hero-copy > :nth-child(4) { animation-delay: 0.15s; }
.hero-copy > :nth-child(5) { animation-delay: 0.2s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Sân khấu: màu nền đổi tức thì theo data-subject, không transition.
   Chỉ khối nội dung mờ ra rồi rõ lại, tổng 300ms. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
}

.stage-chip {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--chip-fill);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-dark);
}

.stage-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-1) var(--space-2);
  transition: opacity 0.15s var(--ease);
}

.stage-content.is-fading {
  opacity: 0;
}

.stage-glyph {
  margin-bottom: auto;
  padding-top: var(--space-3);
  font-size: var(--fs-glyph);
  color: var(--on-dark);
  text-align: center;
}

.stage-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-dark);
}

.stage-desc {
  min-height: calc(2 * 1.6em);
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--on-dark-soft);
}

.stage-dots {
  display: flex;
  gap: 0;
  min-height: 44px;
  margin-left: -10px;
}

/* Mỗi chấm là nút 44x44 để dễ chạm. Chấm đang xem dài ra bằng cách đổi
   độ mờ giữa chấm tròn và vạch dài, không animate chiều rộng. */
.stage-dot {
  position: relative;
  width: 36px;
  height: 44px;
}

.stage-dot::before,
.stage-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: var(--radius-pill);
  background: var(--on-dark);
  transition: opacity 0.2s var(--ease);
}

.stage-dot::before {
  width: 8px;
  margin-left: -4px;
  opacity: 0.45;
}

.stage-dot::after {
  width: 24px;
  margin-left: -12px;
  opacity: 0;
}

.stage-dot[aria-current="true"]::before {
  opacity: 0;
}

.stage-dot[aria-current="true"]::after {
  opacity: 1;
}

.stage-dot:focus-visible {
  outline-color: var(--on-dark);
  outline-offset: -6px;
}

/* ---- Thư viện --------------------------------------------------------- */

.library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.result-count {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* ---- Vì sao chọn ------------------------------------------------------ */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-6);
}

.why-lede {
  margin-top: var(--space-2);
  color: var(--ink-soft);
}

.reasons {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.reason {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-2);
  align-items: start;
}

.reason-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  color: var(--forest-700);
}

.reason h3 {
  font-size: 16px;
}

.reason p {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Minh họa: một trang vở kẻ dòng, vài dòng được tô dấu và một công thức. */
.why-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: linear-gradient(200deg, #E1E5D6 0%, #D6DCC8 100%);
}

.page {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  width: 58%;
  aspect-ratio: 3 / 4;
  padding: 12% 10% 0 17%;
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-inner);
  box-shadow: 0 2px 6px rgba(20, 48, 26, 0.08);
  transform: rotate(2deg);
}

.page-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11%;
  width: 1px;
  background: var(--forest-200);
}

.page-line i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--paper-sink);
}

.page-line-short i {
  width: 58%;
}

.page-line-mark i {
  height: 10px;
  background: var(--forest-200);
  opacity: 0.55;
}

.page-formula {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 18px);
  font-style: italic;
  line-height: 1.4;
  color: var(--forest-900);
}

.page-check {
  position: absolute;
  right: 8%;
  bottom: 9%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--forest-900);
  color: var(--lime);
}

.page-check .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* ---- Lộ trình --------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Đường ray nối các chấm, nằm đúng tâm chấm 32px. */
.steps::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--forest-200);
}

.step {
  position: relative;
}

.step-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.12;
}

/* Đậm dần từ bước 1 tới bước 4. Số trên chấm đều đạt trên 4,5:1. */
.step:nth-child(1) .step-dot { background: var(--forest-200); color: var(--forest-900); }
.step:nth-child(2) .step-dot { background: var(--forest-500); color: var(--on-dark); }
.step:nth-child(3) .step-dot { background: var(--forest-700); color: var(--on-dark); }
.step:nth-child(4) .step-dot { background: var(--forest-900); color: var(--on-dark); }

.step h3 {
  font-size: 17px;
}

.step p {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Người biên soạn -------------------------------------------------- */

.founder {
  padding-bottom: var(--section-gap);
}

.founder-split {
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}

.founder-panel {
  --panel: var(--forest-900);
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: var(--space-4);
}

.founder-initials {
  margin-block: auto;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-glyph);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--lime);
  max-width: none;
}

.founder-photo {
  width: 100%;
  margin-block: var(--space-3);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-inner);
}

.founder-name h2 {
  color: var(--on-dark);
}

.founder-name p {
  margin-top: 2px;
  font-size: var(--fs-body);
  color: var(--on-dark-soft);
}

.founder-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.founder-intro {
  margin-bottom: var(--space-1);
  font-size: var(--fs-body-lg);
  color: var(--ink-soft);
}

.contact-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* Ô icon mang màu môn, icon và chữ trên đó là --on-dark. */
.contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-inner);
  background: var(--panel);
  color: var(--on-dark);
}

.contact-text h3 {
  font-size: 16px;
}

.contact-detail {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* Link gọi điện nằm trong dòng chữ: nới vùng chạm lên 44px bằng đệm trên
   dưới và bù lại bằng lề âm, để bố cục không cao thêm. */
.contact-detail a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: var(--forest-900);
  font-weight: 600;
}

/* ---- Chân trang ------------------------------------------------------- */

.footer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
  gap: var(--space-5);
}

.footer-brand p {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.footer-links {
  display: grid;
  gap: 2px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.footer-links a:hover {
  color: var(--forest-900);
}

.copyright {
  align-self: end;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: right;
}


/* =========================================================================
   6. RESPONSIVE — điểm ngắt 1024px và 640px, thêm 768px cho lề trang
   ========================================================================= */

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 1025px) {
  :root {
    --section-gap: 88px;
  }
}

/* ---- Tablet và nhỏ hơn ------------------------------------------------ */

@media (max-width: 1024px) {
  /* Thanh trên: panel trượt từ phải. */
  .menu-button {
    position: relative;
    z-index: 60;
    display: grid;
  }

  .brand {
    margin-right: auto;
  }

  .nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: min(360px, 88vw);
    padding: calc(var(--topbar-height) + var(--space-2)) var(--space-3) var(--space-4);
    background: var(--paper-lift);
    border-left: 1px solid var(--line-strong);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.26s var(--ease), visibility 0s linear 0.26s;
  }

  .nav-panel.is-open {
    visibility: visible;
    transform: none;
    transition: transform 0.26s var(--ease), visibility 0s;
  }

  .nav {
    order: 2;
    margin: 0;
  }

  .search {
    order: 1;
    width: 100%;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-link {
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-inner);
    font-size: 16px;
  }

  .tools-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 var(--space-1);
    border-color: var(--line);
    box-shadow: none;
    transform: none;
  }

  .hero-copy {
    padding: var(--space-4);
  }

  .doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .why-art {
    aspect-ratio: 16 / 10;
  }

  .page {
    width: auto;
    height: 84%;
  }

  .founder-panel,
  .founder-contact {
    padding: var(--space-3);
  }

  .contact-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .contact-card .btn {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .copyright {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ---- Điện thoại ------------------------------------------------------- */

/* Mọi khối chia đôi xếp chồng. Hero giữ panel sáng ở trên, sân khấu màu ở
   dưới; card nổi bật và khối người biên soạn đưa panel màu lên trước. */
@media (max-width: 640px) {
  .topbar-cta {
    display: none;
  }

  .hero {
    padding-top: var(--space-2);
  }

  .hero-split,
  .doc-featured,
  .founder-split {
    grid-template-columns: 1fr;
  }

  .hero-split {
    min-height: 0;
  }

  .hero-copy {
    padding: var(--space-3) 20px;
  }

  .hero-actions .btn-solid {
    flex: 1 1 auto;
  }

  .stage {
    min-height: 360px;
    padding: 20px;
  }

  .featured-panel {
    min-height: 132px;
    padding: 20px;
  }

  .panel-label {
    top: 20px;
    left: 20px;
  }

  .featured-body {
    padding: 20px 20px 0;
  }

  /* Chip cuộn ngang, bắt điểm dừng, mép phải hé một phần chip kế tiếp. */
  .chips {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter) 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .doc-grid {
    grid-template-columns: 1fr;
  }

  /* Lộ trình: cột dọc, đường ray chạy dọc bên trái các chấm. */
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .steps::before {
    top: 16px;
    bottom: 16px;
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .step {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: var(--space-2);
  }

  .step-dot {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .founder-panel {
    min-height: 0;
  }

  .founder-initials {
    padding-block: var(--space-2);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}


/* =========================================================================
   Tôn trọng người dùng tắt chuyển động. Chỗ duy nhất dùng !important.
   main.js cũng đọc cài đặt này để dừng hẳn việc xoay sân khấu.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}