/**
 * components.css
 *
 * Trích từ design/html/styles.css (bộ V3). KHÔNG sửa file gốc trong design/.
 * Mọi @media đã được tách sang responsive.css.
 *
 * @package tntam-driving-theme
 */

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--action-primary);
  color: var(--neutral-0);
}
.btn-primary:hover { background: var(--action-primary-hover); color: var(--neutral-0); }
.btn-primary:active { background: var(--action-primary-active); }

.btn-outline {
  background: transparent;
  color: var(--navy-600);
  border-color: var(--navy-600);
}
.btn-outline:hover { background: var(--navy-600); color: var(--neutral-0); }

.btn-outline-light {
  background: transparent;
  color: var(--neutral-0);
  border-color: var(--neutral-0);
}
.btn-outline-light:hover { background: var(--neutral-0); color: var(--navy-700); }

.btn-lg { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: 17px; }

/* ==========================================================================
   HOME HERO
   ========================================================================== */

.hero { padding-block: var(--space-16) var(--space-20); }
.hero-grid {
  display: grid;
  gap: var(--space-10);
}
.hero-copy .lead { margin-top: var(--space-6); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-note {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.hero-tel {
  color: var(--terra-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hero-tel:hover { color: var(--terra-700); }

.hero-media { display: grid; gap: var(--space-3); }



/* ---- Placeholder image blocks (thay bằng ảnh thật) ---- */
.ph {
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-md);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--neutral-200) calc(50% - 1px), var(--neutral-200) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--neutral-100);
  overflow: hidden;
}
.ph-label {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--navy-600);
  color: var(--neutral-0);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-16x10 { aspect-ratio: 16 / 10; }
.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-1x1  { aspect-ratio: 1 / 1; }
.ph-wide { aspect-ratio: 21 / 9; }

/* ==========================================================================
   KEYWORD STRIP
   ========================================================================== */

.strip {
  background: var(--navy-800);
  border-block: 3px solid var(--terra-500);
  padding-block: var(--space-4);
  overflow: hidden;
}
.strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-0);
}
.strip-row span { display: inline-flex; align-items: center; gap: var(--space-6); }
.strip-row span::after { content: "◆"; color: var(--terra-500); font-size: 9px; }
.strip-row span:last-child::after { content: none; }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.stat {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border-subtle);
  margin: -0.5px;
}
.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 600;
  color: var(--navy-600);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-num em { font-style: normal; color: var(--terra-500); }
.stat-label {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-body);
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/*
 * Bảng nhiều cột chỉ ép bề ngang TỪ máy tính bảng trở lên. Ép cả trên điện
 * thoại là khung .table-wrap sinh thanh cuộn ngang, và học viên phải kéo sang
 * phải mới đọc hết một dòng — trên màn 390px thì mỗi lần chỉ thấy được hai cột.
 * Dưới ngưỡng này, .compare--stack gập bảng thành từng thẻ (xem responsive.css).
 */
@media (min-width: 768px) {
  table.compare--stack { min-width: 760px; }
}
table.compare caption {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
table.compare th, table.compare td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}
table.compare thead th {
  background: var(--navy-600);
  color: var(--neutral-0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.compare tbody tr:nth-child(even) { background: var(--neutral-50); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody th {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--terra-600);
}

/*
 * Không xuống dòng giữa ngày thi — nhưng chỉ từ máy tính bảng trở lên. Ép trên
 * điện thoại thì một nhãn dài như "Nội dung sát hạch" ở bảng thông tin khóa học
 * đẩy cả bảng rộng ra, và thanh cuộn ngang quay lại đúng chỗ vừa bỏ đi.
 */
@media (min-width: 768px) {
  table.compare tbody th { white-space: nowrap; }
}
table.compare td strong { color: var(--text-heading); }

/* ==========================================================================
   FEATURES
   ========================================================================== */

.features-grid {
  display: grid;
  gap: var(--space-4);
}
.feature {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.feature-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--terra-50);
  color: var(--terra-600);
  margin-bottom: var(--space-5);
}
.feature h3 { font-size: 19px; font-weight: 700; margin-bottom: var(--space-3); }
.feature p { font-size: 15px; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band {
  background: var(--surface-brand);
  color: var(--neutral-0);
  border-block: 3px solid var(--terra-500);
}
.cta-band-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-16);
}
.cta-band h2 { color: var(--neutral-0); font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
.cta-band p { color: var(--navy-100); max-width: 52ch; }
.cta-band .btn-primary { align-self: flex-start; }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-new  { background: var(--terra-500); color: var(--neutral-0); }
.badge-soon { background: var(--warning-100); color: var(--warning-700); }
.badge-open { background: var(--success-100); color: var(--success-500); }
.badge-navy { background: var(--navy-100); color: var(--navy-600); }

/* ==========================================================================
   NOTICES (Thông báo)
   ========================================================================== */

.notice-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.notice {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.notice-date {
  align-self: start;
  text-align: center;
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
}
.notice-date .d {
  display: block;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy-600);
  padding: var(--space-2) 0 2px;
}
.notice-date .m {
  display: block;
  background: var(--navy-600);
  color: var(--neutral-0);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 0;
}
.notice-body h3 { font-size: 18px; font-weight: 700; margin: var(--space-2) 0 var(--space-2); }
.notice-body p { font-size: 15px; }
.notice-meta {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* ==========================================================================
   EXAM CARDS (Luyện đề)
   ========================================================================== */

.exam-grid { display: grid; gap: var(--space-4); }



.exam-card {
  background: var(--surface-card);
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.exam-card-head {
  background: var(--navy-600);
  color: var(--neutral-0);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.exam-card-head .hang {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}
.exam-card-head .loai { font-size: 12.5px; color: var(--navy-100); text-align: right; }
.exam-meta { padding: var(--space-4) var(--space-5) var(--space-5); }
.exam-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14.5px;
}
.exam-meta div:last-child { border-bottom: none; }
.exam-meta dt { color: var(--text-muted); }
.exam-meta dd { font-family: var(--font-mono); font-weight: 600; color: var(--text-heading); text-align: right; }

.exam-card-link { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); height: 100%; }
a:hover .exam-card-link { box-shadow: 0 4px 14px rgba(23, 20, 16, 0.14); transform: translateY(-2px); }
.exam-card-cta {
  margin: 0 var(--space-5) var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--terra-600);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
a:hover .exam-card-cta { color: var(--terra-500); }

/* Thẻ bộ đề bấm được — cùng cách bọc như .tip-link ở khối mẹo. */
.exam-link { text-decoration: none; display: block; height: 100%; }
.exam-card-intro { padding: 0 var(--space-5) var(--space-4); font-size: 14.5px; color: var(--text-muted); }

/*
 * Lời mời sang trang làm bài, thay cho khung thi thử từng nằm ngay tại đây.
 * Viền dày như các khối quan trọng khác của bộ V3.
 */
.quiz-invite {
  max-width: 820px;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.quiz-invite h2 { margin: 0 0 var(--space-3); }
.quiz-invite p { margin: 0 0 var(--space-5); color: var(--text-muted); }

/* ---- Quiz ---- */
.quiz { display: grid; gap: var(--space-5); max-width: 820px; }
.question {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.q-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.q-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-0);
  background: var(--navy-600);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-3);
}
.question h3 { font-size: 17.5px; font-weight: 700; line-height: 1.45; }
.options {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.options li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--bg-page);
}
.options .opt-key {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy-600);
  flex: none;
}
details.answer { margin-top: var(--space-4); }
details.answer summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy-600);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--navy-600);
  border-radius: var(--radius-md);
  list-style: none;
  user-select: none;
}
details.answer summary::-webkit-details-marker { display: none; }
details.answer summary::before { content: "+"; font-family: var(--font-mono); font-weight: 600; }
details.answer[open] summary::before { content: "–"; }
details.answer summary:hover { background: var(--navy-50); }
details.answer .answer-body {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--success-100);
  border: 1px solid var(--success-500);
  border-radius: var(--radius-md);
  font-size: 15px;
}
details.answer .answer-body strong { color: var(--success-500); }

/* ==========================================================================
   TIPS (Mẹo)
   ========================================================================== */

.tips-grid { display: grid; gap: var(--space-4); counter-reset: tip; }



.tip {
  counter-increment: tip;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tip::before {
  content: "0" counter(tip);
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--terra-500);
  letter-spacing: -0.04em;
}
.tip h3 { font-size: 18px; font-weight: 700; }
.tip p { font-size: 15px; }
.tip .badge { align-self: flex-start; }

/* ---- Article (trang chi tiết mẹo) ---- */
.article { max-width: var(--tntam-reading-max); }
.article > p { margin-bottom: var(--space-5); font-size: 16.5px; }
.article h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-12) 0 var(--space-4); }
.article h3 { font-size: 20px; font-weight: 700; margin: var(--space-8) 0 var(--space-3); }
.article ul, .article ol { margin: 0 0 var(--space-5) var(--space-6); display: grid; gap: var(--space-2); font-size: 16px; }
.article li::marker { color: var(--terra-500); font-weight: 700; }
.article strong { color: var(--text-heading); }
.article .lead-para { font-size: 18.5px; color: var(--text-heading); font-weight: 500; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--navy-100);
  margin-top: var(--space-5);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13.5px;
  margin-bottom: var(--space-5);
  color: var(--navy-100);
}
.breadcrumb a { color: var(--navy-100); }
.breadcrumb a:hover { color: var(--neutral-0); }
.callout {
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-lg);
  background: var(--navy-50);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  font-size: 15.5px;
}
.callout .callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--navy-600);
  margin-bottom: var(--space-2);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tip-link { text-decoration: none; display: block; height: 100%; }
.tip-link .tip { height: 100%; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.tip-link:hover .tip { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(23, 20, 16, 0.14); }
.tip-more { margin-top: auto; padding-top: var(--space-3); font-weight: 700; font-size: 14.5px; color: var(--terra-600); }
.tip-link:hover .tip-more { color: var(--terra-500); }

/* ---- FAQ accordion ---- */
.faq { max-width: 820px; display: grid; gap: var(--space-3); }
.faq details {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-brand); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--terra-500);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: var(--neutral-50); }
.faq .faq-body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 15px;
  border-top: 1px solid var(--border-subtle);
}
.faq .faq-body p { padding-top: var(--space-4); }

/* ==========================================================================
   TIMELINE (Hành trình)
   ========================================================================== */

.timeline {
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 820px;
  counter-reset: step;
}
.step {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-10);
}
.step::before {
  content: "0" counter(step);
  grid-row: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--navy-600);
  color: var(--neutral-0);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  border-radius: var(--radius-md);
  z-index: 1;
}
.step::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::after { content: none; }
.step-body { padding-top: var(--space-1); }
.step-body h3 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-2); }
.step-body p { font-size: 15.5px; max-width: 60ch; }
.step-meta {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--terra-600);
  background: var(--terra-50);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-3);
}

/* ==========================================================================
   FORM
   ========================================================================== */

.form-panel {
  background: var(--surface-brand);
  border-radius: var(--radius-lg);
  border: 3px solid var(--navy-800);
  padding: var(--space-8) var(--space-5);
  color: var(--neutral-0);
}
.form-panel h2 { color: var(--neutral-0); }
.form-panel .form-intro { color: var(--navy-100); margin-top: var(--space-3); max-width: 60ch; }

.form-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}


.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: 600; font-size: 14.5px; color: var(--text-heading); }
.field .req { color: var(--terra-500); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--neutral-900);
  background: var(--neutral-0);
  border: 2px solid var(--navy-800);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--terra-500);
  box-shadow: var(--shadow-focus);
}
.field-hint { font-size: 13px; color: var(--text-muted); }

.consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-body);
}
.consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--terra-500);
  flex: none;
}
.consent a { color: var(--terra-500); }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/*
 * Panel navy dao mau chu lai cho doc duoc tren nen toi. Mau sang phai nam trong
 * pham vi .form-panel, khong de o muc chung — form con duoc dat tren the trang
 * o trang dich, dat o muc chung la chu trang tren nen trang.
 */
.form-panel .field label,
.form-panel .consent,
.form-panel .consent a { color: var(--neutral-0); }
.form-panel .field .req,
.form-panel .field-error { color: var(--terra-100); }
.form-panel .field-hint { color: var(--navy-100); }

/* ---- Contact ---- */
.contact-grid { display: grid; gap: var(--space-4); }

.contact-item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-item .feature-icon { margin-bottom: var(--space-2); }
.contact-item h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-item a, .contact-item p { font-size: 16.5px; font-weight: 600; color: var(--navy-600); word-break: break-word; }

/* ==========================================================================
   PRICING PLANS (Bảng học phí)
   Dữ liệu do tntam-course-pricing cấp; đây chỉ là phần trình bày.
   ========================================================================== */

.plan-grid { display: grid; gap: var(--space-4); align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  height: 100%;
}
.plan-featured {
  border-width: 3px;
  border-color: var(--terra-500);
}
.plan-flag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--terra-500);
  color: var(--neutral-0);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-name { font-size: 19px; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.plan-price {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy-600);
}
.plan-price del {
  display: block;
  margin-top: var(--space-1);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}
.plan-desc { font-size: 14.5px; color: var(--text-muted); }

.plan-list { display: grid; gap: var(--space-2); font-size: 15px; list-style: none; }
.plan-list li { position: relative; padding-left: var(--space-6); }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--success-500);
  border-bottom: 2px solid var(--success-500);
  transform: rotate(-45deg);
}

.plan-note { font-size: 13.5px; color: var(--text-muted); }
.plan-closed { font-size: 14px; font-weight: 700; color: var(--danger-500); }
.plan-cta { margin-top: auto; align-self: flex-start; }

/* ---- Form: báo lỗi và bẫy spam (GĐ 4) ---- */

/*
 * Ô sai nằm trên nền navy nên màu danger-500 gốc bị chìm. Dùng terra-100 cho đủ
 * tương phản, kèm viền đậm ở chính ô nhập để người không phân biệt được màu vẫn
 * nhận ra ô nào cần sửa.
 */
.field-error {
  font-size: 14px;
  font-weight: 700;
  color: var(--terra-500);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--terra-500);
  border-width: 3px;
}

/*
 * Bẫy spam. Cố ý KHÔNG dùng display:none — nhiều bot bỏ qua ô ẩn kiểu đó. Đẩy
 * ra ngoài khung nhìn thì bot vẫn "thấy" ô và điền vào, còn người thật thì
 * không bao giờ chạm tới.
 */
.tntam-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-note { font-weight: 400; font-size: 14px; color: var(--text-muted); }

/*
 * Hộp lưu ý. Dùng cho những câu học viên dễ bỏ qua nhưng bỏ qua thì mất suất
 * thi — ví dụ "lịch có thể thay đổi, gọi xác nhận trước 3 ngày".
 */
.note-box {
  border: 1px solid var(--border-strong);
  background: var(--warning-100);
  color: var(--warning-700);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 14.5px;
  max-width: 820px;
}

/*
 * Tiêu đề thông báo là một liên kết nhưng phải đọc như tiêu đề: giữ màu chữ
 * đậm, chỉ gạch chân khi rê chuột hoặc khi bàn phím dừng ở đó.
 */
.notice-body h3 a {
  color: var(--text-heading);
  text-decoration: none;
}
.notice-body h3 a:hover,
.notice-body h3 a:focus-visible {
  color: var(--terra-500);
  text-decoration: underline;
}
.notice-body .btn { margin-top: var(--space-4); }

/* ==========================================================================
   REVIEWS (Đánh giá học viên)
   ========================================================================== */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}
.review-stars {
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--terra-500);
}
.review-quote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
}
.review-quote::before { content: '\201C'; }
.review-quote::after  { content: '\201D'; }
.review-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.review-photo,
.review-initials {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  object-fit: cover;
}
.review-initials {
  display: grid;
  place-items: center;
  background: var(--navy-600);
  color: var(--neutral-0);
  font-weight: 700;
  font-size: 15px;
}
.review-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.review-meta { margin-top: 2px; font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.review-video { font-size: 14px; font-weight: 600; }
.review-video a { color: var(--terra-500); }

/* ==========================================================================
   LANDING HERO
   ========================================================================== */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
  padding: 0;
  font-size: 14.5px;
}
.hero-points li::before {
  content: '✓';
  color: var(--success-500);
  font-weight: 700;
  margin-right: 6px;
}
.hero-figure {
  margin: 0;
  border: 2px solid var(--navy-600);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-figure__img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   SECTION NAVY (bảng giá trên trang đích)
   ========================================================================== */

.section-invert {
  background: var(--navy-600);
  border-block: 3px solid var(--terra-500);
}
.section-invert .section-title,
.section-invert .section-desc { color: var(--neutral-0); }
.section-invert .kicker { color: var(--terra-300); }
.section-invert .plan-note {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--terra-500);
  color: var(--navy-100);
  max-width: none;
}

/* ==========================================================================
   LANDING — khối đăng ký hai cột
   ========================================================================== */

.landing-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-10);
  align-items: start;
}
.landing-form-intro .section-desc { margin-top: var(--space-4); }
.contact-lines {
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.contact-lines li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
}
.contact-lines__icon { color: var(--terra-500); flex: 0 0 auto; line-height: 0; }
.contact-lines .contact-note { display: block; margin-top: 2px; }
.hero-figure figcaption {
  padding: var(--space-2) var(--space-3);
  background: var(--navy-600);
  color: var(--neutral-0);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   FORM CARD (form đăng ký trên trang đích)
   ========================================================================== */

/*
 * Khác .form-panel navy ở trang chủ: trên trang đích, tiêu đề đã nằm ở cột
 * trái nên thẻ form phải lùi lại, không giành sự chú ý bằng một mảng màu đậm.
 */
.form-card {
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.form-grid--stack { grid-template-columns: 1fr; }
.form-grid--stack .field,
.form-grid--stack .field-full { grid-column: 1 / -1; }
.form-grid--stack .form-actions { flex-direction: column; align-items: stretch; }
.form-grid--stack .form-actions .btn { width: 100%; }

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.social-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }
.btn-sm { padding: 10px 16px; font-size: 14.5px; }