/*
 * Lớp nhận diện agency — nạp SAU styles.css để đè, TRƯỚC pageCss để trang vẫn tự chỉnh được.
 *
 * Hướng: Swiss Modernism — lưới nghiêm, thang chữ theo tỉ lệ toán học,
 * một màu nhấn duy nhất, tương phản cao, bỏ trang trí thừa.
 * Giữ nguyên navy + vàng để khớp ảnh quảng cáo đang chạy và bìa cẩm nang.
 */

:root {
  /* Thang chữ tỉ lệ 1.25 (major third). Dùng clamp để co giãn theo màn hình
     thay vì đặt cứng từng cỡ ở từng chỗ như trước. */
  --t-xs: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --t-md: clamp(1.13rem, 1.07rem + 0.28vw, 1.3rem);
  --t-lg: clamp(1.35rem, 1.24rem + 0.55vw, 1.72rem);
  --t-xl: clamp(1.62rem, 1.42rem + 1vw, 2.3rem);
  --t-2xl: clamp(1.95rem, 1.6rem + 1.7vw, 3.05rem);
  --t-3xl: clamp(2.3rem, 1.75rem + 2.7vw, 4.05rem);

  /* Chữ Thái có dấu ở cả trên và dưới, nên dấu luôn nhô ra ngoài hộp dòng.
     Đo thực tế ở cỡ 41px: phần nhô ra khoảng 7px mỗi dòng. Siết quá thì dấu
     của dòng dưới chạm đuôi chữ của dòng trên. 1.35 là mức vừa đủ thoáng mà
     vẫn giữ được cảm giác tiêu đề lớn. */
  --lh-display: 1.35;
  --lh-heading: 1.45;
  --lh-body: 1.75;

  /* Nhịp khoảng cách theo bội số 4, thay cho các giá trị lẻ rải rác */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Thang độ nổi nhất quán, thay cho việc mỗi chỗ một giá trị bóng đổ */
  --elev-1: 0 1px 2px rgba(3, 8, 17, 0.04), 0 2px 8px rgba(3, 8, 17, 0.04);
  --elev-2: 0 2px 4px rgba(3, 8, 17, 0.05), 0 8px 24px rgba(3, 8, 17, 0.07);
  --elev-3: 0 4px 8px rgba(3, 8, 17, 0.06), 0 20px 56px rgba(3, 8, 17, 0.11);

  --rule: 1px solid var(--premium-line);
  --gold-line: 2px solid var(--premium-gold);
}

/* ---------- Kỷ luật chữ ---------- */

body {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  /* Bật các tính năng chữ có sẵn trong font để chữ khít và đều hơn */
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

h1,
.hero h1 {
  font-size: var(--t-3xl);
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--t-2xl);
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-md);
  line-height: var(--lh-heading);
  font-weight: 600;
}

/* Số liệu xếp cột phải dùng chữ số đều bề ngang, nếu không mỗi lần con số đổi
   là cả cột nhích qua nhích lại.
   KHÔNG áp cho bộ đếm lượt tải: font này cho dấu phẩy chiếm trọn bề ngang một
   chữ số, nên "5,725" đứng yên sẽ hiện ra như "5 , 725". Bộ đếm chỉ bật chế độ
   này trong lúc đang chạy số, qua lớp .count-up, rồi JS gỡ ra khi đếm xong. */
.kpi-strip dd,
.stat-value,
.score-badge,
table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Nhãn mục kiểu agency: số thứ tự + gạch vàng ---------- */

.section-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--premium-gold);
  flex: 0 0 28px;
}

/* Gạch vàng dưới tiêu đề mục, vẽ ra khi mục lọt vào tầm mắt.
   Chiều rộng chạy bằng transform để không gây tính lại bố cục. */
.section-heading h2 {
  position: relative;
  padding-bottom: var(--sp-4);
}

.section-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--premium-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--motion-ease);
}

.section-heading:not(.left) h2::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.is-visible .section-heading h2::after,
.section-heading.is-visible h2::after,
[data-motion].is-visible h2::after {
  transform: scaleX(1);
}

.section-heading:not(.left).is-visible h2::after,
[data-motion].is-visible .section-heading:not(.left) h2::after {
  transform: translateX(-50%) scaleX(1);
}

/* ---------- Nhịp dọc rõ tầng bậc ---------- */

.section {
  padding-block: clamp(var(--sp-16), 9vw, var(--sp-32));
}

.section-heading {
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-16));
}

/* ---------- Bề mặt: một thang độ nổi, bỏ bóng đổ tuỳ hứng ---------- */

.problem-grid article,
.step-grid article,
.module-grid article,
.flow-steps article,
.fit-columns article,
.report-panel,
.diagnostic-panel,
.author-note-card,
.market-context,
.guide-preview-item a {
  box-shadow: var(--elev-1);
  transition: box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}

/* Nhấc nhẹ khi rê chuột. Chỉ dùng transform nên không đẩy các thẻ xung quanh. */
@media (hover: hover) and (pointer: fine) {
  .problem-grid article:hover,
  .step-grid article:hover,
  .module-grid article:hover,
  .flow-steps article:hover,
  .fit-columns article:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
  }
}

/* ---------- Nút: phản hồi rõ khi bấm ---------- */

.button {
  transition: transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease);
}

.button:active {
  transform: scale(0.975);
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
  }
}

/* ---------- Thanh tiến độ đọc ---------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.read-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--premium-gold), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---------- Tôn trọng người tắt hiệu ứng ---------- */

@media (prefers-reduced-motion: reduce) {
  .section-heading h2::after {
    transform: scaleX(1);
    transition: none;
  }

  .section-heading:not(.left) h2::after {
    transform: translateX(-50%) scaleX(1);
  }

  .problem-grid article,
  .step-grid article,
  .module-grid article,
  .flow-steps article,
  .fit-columns article,
  .button {
    transition: none;
  }

  .problem-grid article:hover,
  .step-grid article:hover,
  .module-grid article:hover,
  .flow-steps article:hover,
  .fit-columns article:hover,
  .button-primary:hover,
  .button:active {
    transform: none;
  }

  .read-progress {
    display: none;
  }
}