/* ============================================================
   Honda — Astra Theme Overrides
   Chỉ ghi đè những gì Astra set không đúng với design system.
   ============================================================ */

/* ── Gốc rem: ghim 16px để token đúng như tài liệu ──────────
   Quyết định 20/09/2026 của chủ đầu tư (xem THEME_GUIDE.md muc 6).

   Astra in ra `html{font-size:112.5%}` (= 18px) theo Customizer > Typography >
   Body Font Size, và đổi thành `102.6%` ở `@media (max-width:921px)`. Vì MỌI token
   trong design-tokens.css dùng rem (comment trong file đó ghi rõ 1rem = 16px, thang
   spacing 4px), gốc 18px làm mọi giá trị bị phóng ~12.5% VÀ còn đổi cỡ theo
   breakpoint — token không còn đúng như tài liệu, mockup lệch so với thực tế.

   Ghim về 100% (1rem = 16px) ở MỌI breakpoint. Rule này nằm trong stylesheet của
   theme con nên nạp SAU CSS Astra sinh động ⇒ thắng cả `112.5%` lẫn `102.6%` mà
   không cần `!important` (đã đo lại ở 1440px và 375px).

   `body` không cần khai lại: typography.css đặt
   `font-size: var(--font-size-body)` = 1rem nên body tự theo gốc mới. Hệ quả chủ đầu tư
   đã chấp nhận: các giá trị token nhỏ lại ~11% so với trước, và site khớp đúng
   mockup đã duyệt (mockup tĩnh render ở gốc 16px). */
html {
  font-size: 100%;
}

/* ── Scroll & Selection ──────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
::selection {
  background: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
  color: var(--color-brand-deep);
}

/* Body, heading h1–h6, tiêu đề Astra: typography.css */

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--color-hybrid); }
a:hover { color: var(--color-hybrid-strong); }

/* ── Nút <button> trần: bỏ hover/focus mặc định của Astra ─────
   Astra đặt `button:hover, button:focus { color:var(--color-text-inverse); border-color }` (0,1,1) cùng nền xanh từ
   Customizer cho MỌI <button>, nên nút bật/tắt, tab, nút đóng... rê chuột là thành nền xanh chữ trắng.
   Reset này cùng độ ưu tiên (0,1,1) và nạp sau Astra nên thắng; mọi selector `.vf-x:hover` (0,2,0)
   vẫn thắng reset. Loại trừ nút kiểu Astra (.ast-button, WP Button, .menu-toggle).
   QUY ƯỚC: mỗi <button> tự viết phải khai báo :hover (và :focus-visible) bằng class của nó —
   nếu không, hover sẽ về nền trong suốt/chữ kế thừa. */
button:where(:not(.ast-button, .ast-custom-button, .wp-block-button__link, .menu-toggle)):is(:hover, :focus) {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
  box-shadow: none;
}

/* ── Astra container width ────────────────────────────────── */
/* Khung Astra = khung .vf-container (cùng bề rộng và lề) để mọi trang, kể cả trang Astra mặc định, khớp header/footer.
   Bề rộng khai báo ở Customizer → Global → Container (site-content-width = 1280). */
.ast-container {
  max-width: var(--container-max);
  padding-inline: var(--container-px);
}
@media (min-width: 768px) {
  .ast-container { padding-inline: var(--container-px-md); }
}

/* ── Khung nội dung của Astra ─────────────────────────────────
   Astra bọc nội dung trong #content > .ast-container (max-width + flex). Template của theme
   tự quản lý bề rộng bằng .vf-container nên bỏ khung này, nếu không section full-bleed
   (hero, dải CTA) bị co lại. Header/footer: site-header-footer.css. */
#content > .ast-container:has(> #vf-main) {
  display: block;
  max-width: none;
  padding: 0;
}

/* ── Gutenberg block overrides ────────────────────────────── */
.wp-block-table table {
  font-size: var(--text-sm);
}
.wp-block-table td, .wp-block-table th {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
}
.wp-block-table th {
  background: var(--color-surface-alt);
  font-weight: var(--font-bold);
}

/* ── Focus styles (accessibility) ───────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-brand-electric);
  outline-offset: 2px;
}