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

/* ── Scroll & Selection ──────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
::selection {
  background: rgba(0, 75, 153, 0.18);
  color: var(--color-brand-deep);
}

/* ── Body & Base ─────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--color-brand-electric); }
a:hover { color: var(--color-brand-primary); }

/* ── Astra container width ────────────────────────────────── */
.ast-container {
  max-width: var(--container-max);
}

/* ── Astra footer ─────────────────────────────────────────── */
#colophon {
  background: var(--color-brand-deep);
  color: rgba(255, 255, 255, 0.75);
}
#colophon a { color: rgba(255, 255, 255, 0.85); }
#colophon a:hover { color: #fff; }

/* ── Remove Astra page title on CPT ──────────────────────── */
.posttype-xe-vinfast .entry-header,
.posttype-xe-vinfast .ast-breadcrumbs-wrapper {
  display: none;
}

/* ── Blog/Post improvements ────────────────────────────────── */
.ast-single-post .entry-content {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 720px;
}
.ast-single-post .entry-content h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}
.ast-single-post .entry-content h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* ── 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-semibold);
}

/* ── Rank Math breadcrumb ────────────────────────────────── */
.rank-math-breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
}
.rank-math-breadcrumb a {
  color: var(--color-brand-electric);
}
.rank-math-breadcrumb a:hover {
  color: var(--color-brand-primary);
}

/* ── Mobile: bottom padding to avoid mobile CTA overlap ──── */
@media (max-width: 767px) {
  #page { padding-bottom: 64px; }
}

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