/**
 * responsive.css
 *
 * Trích từ design/html/styles.css (bộ V3). KHÔNG sửa file gốc trong design/.
 * Toàn bộ breakpoint của theme gom về một chỗ, để kiểm tra ở 360 / 768 /
 * 1440 px chỉ phải đọc một file. Thứ tự giữ nguyên như trong file gốc.
 *
 * @package tntam-driving-theme
 */


/* ---- HEADER + NAV ---- */

@media (max-width: 560px) {
  .header-cta { display: none; }
}

/* ---- HOME HERO ---- */

@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 7fr 5fr; align-items: center; }
}

/* ---- STATS ---- */

@media (min-width: 880px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- FEATURES ---- */

@media (min-width: 680px) { .features-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- CTA BAND ---- */

@media (min-width: 880px) {
  .cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-band .btn-primary { align-self: center; }
}

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

@media (min-width: 680px)  { .exam-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) { .exam-grid { grid-template-columns: repeat(4, 1fr); } }

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

@media (min-width: 680px)  { .tips-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) { .tips-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- FORM ---- */

@media (min-width: 720px) {
  .form-panel { padding: var(--space-10); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
}

@media (min-width: 720px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- FOOTER ---- */

@media (min-width: 880px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

/* ---- MISC ---- */

@media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }

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

/* ---- PRICING PLANS (Bảng học phí) ---- */

@media (min-width: 680px)  { .plan-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- BẢNG NHIỀU CỘT TRÊN ĐIỆN THOẠI ---- */

/*
 * Lịch sát hạch và bảng so sánh hạng bằng có 5–6 cột. Trên điện thoại, mỗi dòng
 * gập lại thành một thẻ đọc từ trên xuống, mỗi ô mang sẵn tên cột của nó. Không
 * còn cuộn ngang, không còn ô bị cắt giữa chừng.
 *
 * Tên cột lấy từ thuộc tính data-label do template in ra, và template lấy nó từ
 * đúng mảng đã dùng để in <thead> — sửa tên cột là hai nơi đổi cùng lúc.
 *
 * Vì sao vẫn giữ thẻ <table> thay vì đổi sang <div>: đây là dữ liệu dạng bảng
 * thật. Đổi cấu trúc là mất quan hệ ô–tiêu đề mà trình đọc màn hình dựa vào.
 * Đặt display:block làm trình duyệt bỏ vai trò bảng ngầm định, nên template khai
 * role="table"/"row"/"cell" tường minh để bù lại đúng phần đã mất.
 */
@media (max-width: 767px) {
  .compare--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare--stack,
  .compare--stack tbody,
  .compare--stack tr,
  .compare--stack th,
  .compare--stack td {
    display: block;
    width: auto;
  }

  .compare--stack tr {
    padding: var(--space-4) 0;
    border-bottom: 2px solid var(--border-brand);
  }

  .compare--stack tr:last-child { border-bottom: none; }

  /* Nền xen kẽ chỉ có nghĩa khi các dòng nằm cạnh nhau theo hàng. */
  .compare--stack tbody tr:nth-child(even) { background: transparent; }

  .compare--stack th,
  .compare--stack td {
    padding: var(--space-2) var(--space-5);
    border-bottom: none;
  }

  .compare--stack tbody th {
    padding-top: 0;
    font-size: 20px;
  }

  .compare--stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}