/**
 * layout.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
 */

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-brand);
  border-bottom: 3px solid var(--terra-500);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; border-radius: var(--radius-sm); }
.brand-name {
  display: flex;
  flex-direction: column;
  color: var(--neutral-0);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-100);
  margin-top: 3px;
}
.brand:hover .brand-name { color: var(--neutral-0); }

.header-cta { flex: none; }

.site-nav {
  background: var(--navy-700);
  border-top: 1px solid var(--navy-600);
}
.nav-row {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-row a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  color: var(--navy-100);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-row a:hover { color: var(--neutral-0); background: var(--navy-600); }
.nav-row a[aria-current="page"] {
  color: var(--neutral-0);
  border-bottom-color: var(--terra-500);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section { padding-block: var(--space-16); }
.section-tight { padding-block: var(--space-12); }
.section-alt { background: var(--neutral-50); border-block: 1px solid var(--border-subtle); }

.section-head { max-width: 68ch; margin-bottom: var(--space-10); }
.section-head .section-desc { margin-top: var(--space-4); font-size: 17px; color: var(--text-body); }

/* ---- Page hero (sub-pages) ---- */
.page-hero {
  background: var(--surface-brand);
  color: var(--neutral-0);
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 3px solid var(--terra-500);
}
.page-hero .kicker { color: var(--terra-100); }
.page-hero .kicker::before { background: var(--terra-300, #E7905E); }
.page-hero h1 { color: var(--neutral-0); }
.page-hero .lead { color: var(--navy-100); margin-top: var(--space-5); }

/*
 * Trang làm bài chỉ có breadcrumb trên dải navy — để nguyên khoảng đệm của hero
 * là học viên phải cuộn qua một mảng màu trống mới tới câu hỏi đầu tiên.
 */
.page-hero--tight { padding-block: var(--space-5); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy-800);
  color: var(--navy-100);
  border-top: 3px solid var(--terra-500);
  margin-top: var(--space-20);
}

/*
 * Trang kết bằng một dải màu tràn viền — dải CTA hoặc bảng giá navy — thì bỏ lề
 * đó đi. Hai khối này đã có viền cam và padding riêng; cộng thêm 80px nữa thì
 * giữa viền cam của dải và viền cam của footer lòi ra một vệt nền trống, trông
 * như trang bị lỗi. Bộ thiết kế gốc cũng dính chỗ này; đây là chỗ cố ý làm khác.
 *
 * Dùng bộ chọn anh em chung ~ chứ không phải kề +, vì footer.php có một vùng
 * do_action giữa </main> và footer; plugin gắn nội dung vào đó thì bộ chọn kề
 * sẽ lặng lẽ hết tác dụng.
 *
 * Trình duyệt không hiểu :has() thì chỉ đơn giản là vẫn còn khoảng trống như cũ,
 * không vỡ bố cục.
 */
main:has(> .cta-band:last-child) ~ .site-footer,
main:has(> .section-invert:last-child) ~ .site-footer {
  margin-top: 0;
}
.footer-grid {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-16) var(--space-10);
}


.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand img { width: 52px; height: 52px; border-radius: var(--radius-sm); }
.footer-brand p { font-size: 14.5px; max-width: 40ch; }
.footer-brand .slogan { color: var(--neutral-0); font-weight: 700; font-size: 16px; }

.footer-col h2 {
  color: var(--neutral-0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-col a { color: var(--navy-100); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--neutral-0); text-decoration: underline; }
.footer-col address { font-style: normal; font-size: 15px; display: grid; gap: var(--space-2); }

.social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--navy-600);
  border-radius: var(--radius-md);
  color: var(--navy-100);
}
.social a:hover { background: var(--terra-500); border-color: var(--terra-500); color: var(--neutral-0); }

.footer-bottom {
  border-top: 1px solid var(--navy-700);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--navy-100);
}