/* ============================================================
   Honda — Components
   Buttons, Cards, Badges, Forms, Tags, Prices
   ============================================================ */

/* ── Buttons (mockup Components 13/10/2026) ─────────────────────────────────
   Ba biến thể: primary (Honda Red), secondary (viền đỏ), hybrid (xanh e:HEV);
   ba cỡ: sm 36 / md 44 / lg 52px. Chữ in hoa, đậm 700. Bo tròn hết (pill, như automobiles.honda.com 14/10/2026), không bóng, không nhấc
   khi hover (chỉ đổi màu). Mỗi khối chỉ MỘT nút primary (quy tắc CRO của đại lý). */
.vf-btn,
.wp-block-button.vf-btn > .wp-block-button__link {
  display: inline-flex;
  /* width:auto BẮT BUỘC khi nút dựng bằng block: core có rule
     `.wp-block-buttons .wp-block-button__link { width:100% }`; ở đây specificity 0,3,0 thắng,
     còn .vf-btn--full khai width:100% ở rule riêng đứng sau. */
  width: auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.vf-btn:focus-visible,
.wp-block-button.vf-btn > .wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Primary — Honda Red */
.vf-btn--primary,
.wp-block-button.vf-btn--primary > .wp-block-button__link {
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-cta-primary);
}
.vf-btn--primary:hover,
button.vf-btn--primary:focus,
.wp-block-button.vf-btn--primary > .wp-block-button__link:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.vf-btn--primary:active,
.wp-block-button.vf-btn--primary > .wp-block-button__link:active {
  background: var(--color-cta-active);
  border-color: var(--color-cta-active);
}

/* Secondary — viền đỏ (Outline) */
.vf-btn--secondary,
.wp-block-button.vf-btn--secondary > .wp-block-button__link {
  background: var(--color-surface);
  color: var(--color-cta-primary);
  border-color: var(--color-cta-primary);
}
.vf-btn--secondary:hover,
button.vf-btn--secondary:focus,
.wp-block-button.vf-btn--secondary > .wp-block-button__link:hover {
  background: var(--color-brand-tint-soft);
  color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  text-decoration: none;
}
.vf-btn--secondary:active,
.wp-block-button.vf-btn--secondary > .wp-block-button__link:active {
  background: var(--color-brand-tint);
}

/* Hybrid — xanh Honda #0074B3: nút phụ, thanh điều hướng, xe/khối e:HEV (không dùng làm nút chuyển đổi chính). */
.vf-btn--hybrid,
.wp-block-button.vf-btn--hybrid > .wp-block-button__link {
  background: var(--color-hybrid);
  color: var(--color-text-inverse);
  border-color: var(--color-hybrid);
}
.vf-btn--hybrid:hover,
button.vf-btn--hybrid:focus,
.wp-block-button.vf-btn--hybrid > .wp-block-button__link:hover {
  background: var(--color-hybrid-strong);
  border-color: var(--color-hybrid-strong);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Ghost white — dùng trên nền tối / ảnh hero */
.vf-btn--ghost-white,
.wp-block-button.vf-btn--ghost-white > .wp-block-button__link {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
}
.vf-btn--ghost-white:hover,
button.vf-btn--ghost-white:focus,
.wp-block-button.vf-btn--ghost-white > .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

/* Text link */
.vf-btn--text,
.wp-block-button.vf-btn--text > .wp-block-button__link {
  background: transparent;
  color: var(--color-cta-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-transform: none;
  letter-spacing: 0;
}
.vf-btn--text:hover,
button.vf-btn--text:focus,
.wp-block-button.vf-btn--text > .wp-block-button__link:hover {
  color: var(--color-cta-hover);
  text-decoration: underline;
}

/* Disabled */
.vf-btn:disabled,
.vf-btn[aria-disabled="true"] {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-neutral);
  cursor: not-allowed;
  pointer-events: none;
}

/* Cỡ: lg 52 / md 44 / sm 36 */
.vf-btn--sm,
.wp-block-button.vf-btn--sm > .wp-block-button__link { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.vf-btn--lg,
.vf-btn--xl,
.wp-block-button.vf-btn--lg > .wp-block-button__link,
.wp-block-button.vf-btn--xl > .wp-block-button__link { min-height: 52px; padding: 0 var(--space-8); font-size: var(--text-base); }
.vf-btn--full,
.wp-block-button.vf-btn--full > .wp-block-button__link { width: 100%; }

/* ── Cầu nối block Buttons → component .vf-btn ─────────────────────────────
   Khi nút được dựng bằng block (để chủ site sửa được chữ VÀ link trong admin),
   markup WordPress sinh ra là:
     <div class="wp-block-buttons vf-home-hero__ctas">
       <div class="wp-block-button vf-btn vf-btn--primary">
         <a class="wp-block-button__link wp-element-button">…</a></div></div>
   còn markup cũ là <a class="vf-btn vf-btn--primary">…</a>.
   - Mọi rule .vf-btn ở trên đã được mở rộng thêm selector
     `.wp-block-button.vf-btn… > .wp-block-button__link…` nên hình thức nút áp
     thẳng lên thẻ <a> bên trong.
   - Khối dưới gỡ hình thức mà WordPress/Astra đặt lên wrapper: `display: contents`
     làm wrapper không sinh hộp, nhờ đó <a> trở thành flex item trực tiếp của
     .vf-home-hero__ctas — ĐÚNG cấu trúc như markup cũ, nên bố cục khớp tuyệt đối.
   - box-shadow:none chỉ áp cho nút không phải primary; primary dùng bóng brand
     mặc định và khi hover theo hệ nền Minimalist Modern (28/09/2026).
   (20/09/2026; cập nhật 28/09/2026) */
/* Ưu tiên hơn rule layout Gutenberg nạp sau (.wp-block-buttons > .wp-block-button),
   tránh wrapper dựng thêm một nút/border quanh thẻ liên kết thật. */
.wp-block-buttons .wp-block-button.vf-btn { display: contents; }
.wp-block-button.vf-btn:not(.vf-btn--primary) > .wp-block-button__link { box-shadow: none; }

/* ── Vehicle Card ─────────────────────────────────────────── */
.vf-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: none;
  transition: border-color var(--transition-base);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  font-family: var(--font-body);
  text-decoration: none;
  color: inherit;
}
.vf-card:hover {
  border-color: var(--color-border-strong);
  text-decoration: none;
  color: inherit;
}
.vf-card:focus-within {
  border-color: var(--color-focus);
  box-shadow: none;
}

.vf-card__media {
  display: block;
}
.vf-card__media:focus-visible,
.vf-card__model a:focus-visible,
.vf-card__action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.vf-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface);
  position: relative;
}
.vf-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-slow);
}
.vf-card:hover .vf-card__img img {
  transform: scale(1.03);
}
.vf-card__img-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.vf-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.vf-card__model {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}
.vf-card__model a {
  color: inherit;
  text-decoration: none;
}
.vf-card__price {
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.vf-card__price strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-brand-deep);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
}
/* ── Vehicle card: shared details ─────────────────────────── */

.vf-card__status-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--color-brand-deep);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  pointer-events: none;
}

/* Badge là flex item trong .vf-card__body (flex column) nên bị stretch hết chiều ngang,
   trông như một dải màu thay vì chip. Ghim về đúng kích thước nội dung — chỉ áp trong
   card để không đổi căn chỉnh dọc của badge ở các flex row khác (.vf-price-row__head). */
.vf-card__body > .vf-badge { align-self: flex-start; }

.vf-card__spec {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}
.vf-card__spec svg { flex-shrink: 0; color: var(--color-brand-electric); }

.vf-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-6);
  margin-top: auto;
}
.vf-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 46px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.vf-card__action--secondary {
  color: var(--color-brand-primary);
}
.vf-card__action--primary {
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  background: var(--gradient-action);
  box-shadow: none;
}
.vf-card__action--secondary:hover {
  color: var(--color-brand-primary);
  background-color: var(--color-brand-light);
}
.vf-card__action--primary:hover {
  color: var(--color-text-inverse);
  box-shadow: none;
}
@media (max-width: 767px) {
  .vf-card__actions { align-items: stretch; flex-direction: column-reverse; }
  .vf-card__action--primary { min-height: 48px; }
}

/* ── Badges ───────────────────────────────────────────────── */
.vf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}
.vf-badge--blue    { background: var(--color-brand-light);   color: var(--color-brand-primary); }
.vf-badge--orange  { background: var(--color-accent-warm-bg);                    color: var(--color-accent-warm); }
.vf-badge--green   { background: var(--color-success-bg);    color: var(--color-success-strong); }
.vf-badge--gray    { background: var(--color-surface-alt);   color: var(--color-text-secondary); }
.vf-badge--popular { background: var(--color-cta-primary);   color: var(--color-text-inverse); }
/* Honda (mockup Components): chip công nghệ, e:HEV, nhãn mới/nổi bật, trạng thái.
   Hybrid xanh CHỈ cho xe e:HEV. Chip trạng thái và Eco được phép bo tròn đầy (pill). */
.vf-badge--hybrid { background: var(--color-hybrid); color: var(--color-text-inverse); }
.vf-badge--new    { background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-badge--tech   { background: var(--color-surface); color: var(--color-text-heading); border: 1px solid var(--color-text-heading); text-transform: none; letter-spacing: 0; font-weight: var(--font-bold); }
.vf-badge--hot    { background: var(--color-accent-warm-bg); color: var(--color-accent-warm); }
.vf-badge--eco    { background: var(--color-success-bg); color: var(--color-success-strong); border-radius: var(--radius-full); text-transform: none; letter-spacing: 0; }
.vf-badge--status { border-radius: var(--radius-full); text-transform: none; letter-spacing: 0; padding: 0.3125rem 0.75rem; }
.vf-badge--status-ok   { background: var(--color-success-bg); color: var(--color-success-strong); }
.vf-badge--status-wait { background: var(--color-accent-warm-bg); color: var(--color-accent-warm); }
.vf-badge--status-no   { background: var(--color-error-bg); color: var(--color-error-text); }
.vf-badge--eyebrow {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-cta-primary) 22%, transparent);
  background: color-mix(in srgb, var(--color-cta-primary) 7%, var(--color-surface));
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-widest);
}
.vf-badge--eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: var(--radius-full);
  background: var(--color-cta-primary);
}

/* ── Price display ────────────────────────────────────────── */
.vf-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.vf-price__value {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--color-brand-primary);
}
.vf-price__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

/* ── Freshness tag ────────────────────────────────────────── */
.vf-freshness {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}

/* ── Thanh hành động mobile (functions/cro.php: honda_sticky_cta_html) ── */
.vf-mobile-sticky-bar { display: none; }
@media (max-width: 767px) {
  .vf-mobile-sticky-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--color-neutral-black) 10%, transparent);
  }
  /* Ẩn các thanh cố định ở đáy (sticky bar, popup báo giá...) khi bàn phím ảo bật (input/textarea đang focus) để không che khuất form */
  body:has(input:focus, textarea:focus, select:focus) .vf-mobile-sticky-bar,
  body:has(input:focus, textarea:focus, select:focus) .vf-contact-fab {
    display: none !important;
  }
  /* Chừa chỗ để thanh không che chân trang */
  body.vf-has-mobile-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.vf-mobile-sticky-bar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}
.vf-mobile-sticky-bar__actions:has(> :only-child) { grid-template-columns: 1fr; }
.vf-mobile-sticky-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1.2;
  text-align: center;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}
.vf-mobile-sticky-bar__btn svg { flex: none; }
/* Loại bỏ 300ms tap delay trên sticky bar (Android) */
.vf-mobile-sticky-bar__btn { touch-action: manipulation; }
.vf-mobile-sticky-bar__btn--action {
  background: var(--color-surface-elevated);
  color: var(--color-cta-primary);
  border: 1.5px solid var(--color-cta-primary);
}
.vf-mobile-sticky-bar__btn--action:hover,
.vf-mobile-sticky-bar__btn--action:active {
  background: var(--color-surface-soft);
  color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}
/* Nút "Liên hệ" (gọi hotline) — CTA chính: nền đỏ */
.vf-mobile-sticky-bar__btn--call {
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
  border: 0;
}
.vf-mobile-sticky-bar__btn--call:hover,
.vf-mobile-sticky-bar__btn--call:active {
  background: var(--color-cta-hover);
  color: var(--color-text-inverse);
}

/* ── Nút Chat Zalo nổi, dùng ảnh Tư vấn (functions/cro.php: honda_contact_fab_html) ── */
.vf-contact-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-6);
  z-index: calc(var(--z-sticky) - 1);
  display: block;
  width: 90px;
  isolation: isolate;
  transition: transform var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.vf-contact-fab img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .25)); }
/* Vầng sáng đỏ lan tỏa sau mặt tư vấn viên (cùng kiểu nút nổi của showroomvinfast.vn). */
.vf-contact-fab::before {
  content: "";
  position: absolute;
  top: 3%;
  left: 8%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-cta-primary);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: vf-contact-pulse 2s ease-out infinite;
}
@keyframes vf-contact-pulse {
  0%   { opacity: .35; transform: scale(.96); }
  100% { opacity: 0;   transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .vf-contact-fab::before { animation: none; } }
.vf-contact-fab:hover,
.vf-contact-fab:focus-visible { transform: scale(1.06); }
.vf-contact-fab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-lg); }
/* Mobile: giữ nút phía trên thanh hành động mobile (cao ~64px) một khoảng --space-2. */
@media (max-width: 767px) {
  .vf-contact-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: 76px; }
}

/* ── Lead form wrap ───────────────────────────────────────── */
.vf-lead-form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: none;
}
.vf-lead-form__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.vf-lead-form__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vf-lead-form__sub::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

/* ── Trust signal strip ───────────────────────────────────── */
.vf-trust-strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.vf-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.vf-trust-strip__item svg {
  color: var(--color-brand-electric);
  flex-shrink: 0;
}

/* ── Section wrapper ─────────────────────────────────────── */
.vf-section {
  padding-top: var(--block-py);
  padding-bottom: var(--block-py);
}
.vf-section--alt    { background: var(--color-surface-alt); }
.vf-section--dark   { background: var(--color-brand-deep); color: var(--color-text-inverse); }
.vf-section--brand  { background: var(--color-brand-primary); color: var(--color-text-inverse); }
.vf-section--compact {
  padding-top: var(--block-py);
  padding-bottom: var(--block-py);
}

.vf-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}
@media (min-width: 768px) {
  .vf-container {
    padding-left: var(--container-px-md);
    padding-right: var(--container-px-md);
  }
}

.vf-section-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-display);
  color: var(--color-text-display);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}
.vf-section--dark .vf-section-title,
.vf-section--brand .vf-section-title { color: var(--color-text-inverse); }

.vf-section-sub {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
  max-width: 640px;
}

/* ============================================================
   COMPONENT DÙNG CHUNG — CHUYỂN VỀ ĐÂY (20/09/2026)
   Trước đây các component dưới nằm trong file CSS theo trang
   (vehicle-single.css / front-page.css), nên trang khác dùng lại thì
   THIẾU STYLE. Phát hiện khi dựng trang Bảng giá: .vf-cta-banner mất
   padding và watermark "V" rơi vào luồng văn bản (chiếm mất cột đầu
   của grid), .vf-select trở về giao diện mặc định trình duyệt.
   Đúng quy tắc "class dùng chung định nghĩa DUY NHẤT 1 lần".
   ============================================================ */

/* ── Form select ──────────────────────────────────────────── */
.vf-select-wrap { position: relative; }
.vf-select {
  width: 100%;
  /* Astra đặt `input[type=...],select{height:40px}` trong form styles của theme cha.
     Với padding 0.75rem của component này, nội dung cần ~49px ⇒ trong hộp 40px chữ bị
     CẮT NGANG (lỗi thấy rõ ở select "Sắp xếp" trang Bảng giá và select chọn phiên bản
     ở trang chi tiết xe — cùng dùng class này). Bỏ chiều cao cứng, để padding quyết định,
     vẫn giữ min-height cho vùng chạm. */
  height: auto;
  min-height: 44px;
  line-height: var(--leading-snug);
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.vf-select:focus {
  outline: none;
  border-color: var(--color-cta-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta-primary) 15%, transparent);
}

/* ── Ô nhập liệu, checkbox, radio (mockup Components) ─────────────────────────
   Viền #8A8D91 (≥ 3:1), bo 4px; focus viền đỏ; lỗi viền đỏ + dòng báo lỗi; disabled nền xám nhạt. */
.vf-input,
.vf-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem var(--space-4);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.vf-textarea { min-height: 120px; resize: vertical; }
.vf-input::placeholder,
.vf-textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
.vf-input:focus,
.vf-textarea:focus {
  outline: none;
  border-color: var(--color-cta-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta-primary) 15%, transparent);
}
.vf-input[aria-invalid="true"], .vf-textarea[aria-invalid="true"], .vf-select[aria-invalid="true"],
.vf-field.is-invalid .vf-input, .vf-field.is-invalid .vf-textarea, .vf-field.is-invalid .vf-select {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}
.vf-field__error {
  display: flex; align-items: center; gap: var(--space-1);
  margin: var(--space-1) 0 0;
  color: var(--color-error-text);
  font-size: var(--text-sm);
}
.vf-input:disabled, .vf-textarea:disabled, .vf-select:disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
  color: var(--color-neutral);
  cursor: not-allowed;
}
input[type="checkbox"].vf-check,
input[type="radio"].vf-check {
  width: 1.25rem; height: 1.25rem; margin: 0;
  accent-color: var(--color-cta-primary);
  cursor: pointer;
}
input.vf-check:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.vf-select__chevron {
  position: absolute; right: 0.875rem;
  top: 50%; transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* ── Pricing table ────────────────────────────────────────────
   Bản canonical lấy từ vehicle-single.css (header navy). Bản trùng
   trong front-page.css đã bị xoá; 2 chi tiết hữu ích của bản đó
   (hover dòng, căn phải cột giá) được gộp vào đây để 2 trang dùng
   CÙNG một định nghĩa thay vì mỗi trang một kiểu. */
/* ── Table wrap ───────────────────────────────────────────── */
.vf-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.vf-table-wrap .vf-pricing-table { border: none; border-radius: 0; }
/* ── Pricing Table ────────────────────────────────────────── */
.vf-pricing-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vf-pricing-table thead th {
  background: var(--color-brand-deep);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  text-align: left;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.vf-pricing-table td,
.vf-pricing-table tbody th {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  vertical-align: middle;
}
.vf-pricing-table tbody th {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  background: transparent;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}
.vf-pricing-table tr:last-child td,
.vf-pricing-table tr:last-child th { border-bottom: none; }
.vf-pricing-table tr:nth-child(even) td,
.vf-pricing-table tr:nth-child(even) th { background: var(--color-surface-alt); }
.vf-pricing-table tbody tr:hover td,
.vf-pricing-table tbody tr:hover th { background: var(--color-surface-alt); }
.vf-pricing-table__recommended td,
.vf-pricing-table__recommended th {
  background: var(--color-brand-light) !important;
  font-weight: var(--font-bold);
}
.vf-pricing-table__price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-brand-primary);
}
.vf-pricing-table__price-head { text-align: right; }
.vf-pricing-table__badge { margin-left: var(--space-2); }
.vf-pricing-table__highlight { color: var(--color-text-muted); font-size: var(--text-sm); }
.vf-pricing-table tbody tr:hover td { background: var(--color-surface-alt); }
.vf-pricing-table__price { text-align: right; white-space: nowrap; }

/* ── CTA banner ───────────────────────────────────────────── */
/* ── CTA Banner ───────────────────────────────────────────── */
.vf-cta-banner {
  background:
    radial-gradient(ellipse 90% 160% at 80% 50%, var(--color-brand-tint) 0%, var(--color-brand-light) 55%, var(--color-brand-tint-soft) 100%);
  border-top: 1px solid color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  padding-block: var(--block-py);
  overflow: hidden;
}
.vf-cta-banner__inner {
  display: flex; align-items: center;
  gap: var(--space-8);
  position: relative;
}
.vf-cta-banner__watermark {
  position: absolute; right: -20px;
  top: 50%; transform: translateY(-50%);
  font-size: 200px;
  font-weight: var(--font-bold);
  color: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
  line-height: 1;
  pointer-events: none; user-select: none;
  font-family: var(--font-display);
}
.vf-cta-banner__content { flex: 1; }
.vf-cta-banner__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-brand-deep);
  margin-bottom: var(--space-2);
}
.vf-cta-banner__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}
@media (max-width: 767px) {
  .vf-cta-banner__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .vf-cta-banner .vf-btn { width: 100%; }
  .vf-cta-banner__watermark { font-size: 120px; right: -10px; }
}

/* ── Utility ──────────────────────────────────────────────── */
.vf-mono { font-family: var(--font-mono); }
/* ── CTA banner — biến thể nền tối ────────────────────────────
   Dùng trong .vf-container của trang (khối card bo góc), nên tự lo
   padding ngang — KHÔNG lồng thêm .vf-container bên trong (lồng 2 lần
   sẽ cộng dồn padding và làm nút CTA tràn viewport trên mobile). */
.vf-cta-banner--dark {
  background: var(--color-surface-ink);
  border-top: 0; border-bottom: 0;
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-2xl);
}
.vf-cta-banner--dark .vf-cta-banner__title { color: var(--color-text-inverse); }
.vf-cta-banner--dark .vf-cta-banner__desc { color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent); }
.vf-cta-banner--dark .vf-cta-banner__watermark { color: color-mix(in srgb, var(--color-text-inverse) 7%, transparent); }
.vf-cta-banner__features { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.vf-cta-banner__features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: color-mix(in srgb, var(--color-text-inverse) 90%, transparent); }
.vf-cta-banner__features svg { color: var(--color-brand-electric); flex-shrink: 0; }
@media (min-width: 1024px) {
  .vf-cta-banner--dark { padding: var(--space-12) var(--space-10); }
  .vf-cta-banner--dark .vf-cta-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-10); }
  .vf-cta-banner--dark .vf-cta-banner__features { margin-top: 0; }
}


/* ── Empty state (dùng chung: archive + trang bảng giá) ──────
   Tên giữ nguyên `vf-archive-empty` để không phải sửa archive-xe.php;
   đây là component dùng chung, KHÔNG định nghĩa lại ở file CSS theo trang. */
/* ── Empty state ─────────────────────────────────────────── */
.vf-archive-empty {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* ── Ảnh placeholder dùng token ───────────────────────────────
   Thay cho các placeholder SVG viết tay với hex cứng trong
   vehicle-card.php / single-xe.php (nợ đã ghi nhận ở audit CSS).
   Dùng cho ảnh xe chưa có asset thật. */
.vf-img-ph { display: block; width: 100%; height: auto; }

/* `.vf-archive-empty` là display:flex nên thuộc tính HTML [hidden] (display:none của
   trình duyệt) bị ghi đè — phải khai tường minh, nếu không trạng thái "không có kết quả"
   sẽ luôn hiện. */
.vf-archive-empty[hidden] { display: none; }

/* ── Bài viết (post card + grid) ──────────────────────────────
   Component dùng chung cho lưới bài viết ở TRANG CHỦ và block "Kiến thức liên quan"
   ở trang chi tiết xe. Trước đây chỉ tồn tại dưới tên `.vf-home-news-*` trong
   homepage.css (viết desktop-first, 3 breakpoint max-width) — chuyển về đây, đổi tên
   trung tính và viết lại mobile-first theo đúng quy ước dự án. */
.vf-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .vf-post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .vf-post-grid { grid-template-columns: repeat(3, 1fr); }
  .vf-post-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.vf-post-card__img-wrap {
  display: block;
  /* Tỉ lệ THỐNG NHẤT 16:9 cho mọi breakpoint. Trước đây đặt height cố định
     130px (mobile) / 175px (desktop) nên tỉ lệ khung đổi theo bề rộng —
     2.58 ở mobile, 1.63 ở desktop — khiến cùng một ảnh bị crop mỗi kiểu và
     ảnh trông mờ ở desktop. 16:9 đúng bằng tỉ lệ ảnh xe gốc
     (1600x900) nên ảnh hiện trọn, gần như không mất chi tiết. (20/09/2026) */
  aspect-ratio: 16 / 9;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.vf-post-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}
.vf-post-card:hover .vf-post-card__img-wrap img { transform: scale(1.03); }
.vf-post-card__img-placeholder { display: block; width: 100%; height: 100%; }

.vf-post-card__date {
  display: block;
  color: var(--color-brand-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}
.vf-post-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: var(--space-1) 0;
}
.vf-post-card__title a { color: inherit; text-decoration: none; }
.vf-post-card__title a:hover { color: var(--color-brand-primary); }
/* Mô tả ẩn ở mobile cho gọn lưới — mobile-first nên mặc định là ẩn. */
.vf-post-card__desc {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .vf-post-card__desc { display: block; }
}
.vf-post-card__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-brand-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}
.vf-post-card__link:hover { text-decoration: underline; }

/* Link "Xem tất cả →" cạnh tiêu đề section */
.vf-link-more {
  color: var(--color-brand-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  white-space: nowrap;
  flex-shrink: 0;
}
.vf-link-more:hover { text-decoration: underline; color: var(--color-cta-hover); }

/* ── Section đầu trang có tiêu đề + link "xem tất cả" ─────────
   Dùng chung cho block bài viết ở trang chủ và trang chi tiết xe. */
.vf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.vf-section-head__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-display);
  margin: 0;
}
.vf-section-head__accent {
  background: var(--gradient-action);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .vf-btn,
  .wp-block-button.vf-btn > .wp-block-button__link,
  .vf-card,
  .vf-card__img img {
    transition-duration: 0.01ms;
  }
  .vf-btn:hover,
  .wp-block-button.vf-btn > .wp-block-button__link:hover,
  .vf-card:hover {
    transform: none;
  }
  .vf-card:hover .vf-card__img img { transform: none; }
}

/* ── Hero trang — chuẩn chung toàn site ───────────────────
   Thứ tự: H1 → mô tả → [CTA duy nhất + Cập nhật lần cuối]. Trang chỉ khai báo bố cục
   (khoảng cách, cột), không khai báo lại cỡ chữ/màu. Hero nền tối: thêm .vf-hero--dark lên vùng hero. */
:root {
  --hero-ink:    var(--color-brand-deep);
  --hero-text:   var(--color-text-secondary);
  --hero-muted:  var(--color-text-muted);
}
.vf-hero--dark {
  --hero-ink:    var(--color-text-inverse);
  --hero-text:   var(--color-text-inverse);
  --hero-muted:  color-mix(in srgb, var(--color-text-inverse) 82%, transparent);
}

/* Breadcrumb: một dải toàn site dưới header — xem .vf-crumbbar trong site-header-footer.css. */

.vf-hero-title,
.vf-contact-hero .vf-contact-hero__title { /* tiêu đề Liên hệ nằm trong nội dung Page (DB), không gắn thêm class được */
  margin: 0;
  font-size: var(--font-size-h1);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  font-weight: var(--font-weight-display);
  color: var(--hero-ink);
  text-wrap: balance;
}
/* Tiêu đề dài / dạng câu hỏi: viết thường (quy tắc IN HOA khi ≤ 6 từ) */
.vf-hero-title--sentence,
.vf-contact-hero .vf-contact-hero__title.vf-hero-title--sentence { line-height: var(--leading-snug); text-transform: none; }
.vf-hero-lead,
.vf-contact-hero .vf-contact-hero__lead {
  max-width: 520px;
  margin: 18px 0 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--hero-text);
  text-wrap: pretty;
}
.vf-hero-lead :is(p, .vf-article-summary) { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; color: inherit; }
.vf-hero-lead :is(p, .vf-article-summary) + p, .vf-hero-lead :is(p, .vf-article-summary) p + p { margin-top: 8px; }
.vf-hero-lead :is(p, .vf-article-summary) strong, .vf-hero-lead strong { color: var(--hero-ink); font-weight: var(--font-bold); }

/* Hàng CTA: một nút theo ý định của trang + ngày cập nhật bên phải. */
.vf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}
.vf-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 1.5px solid var(--color-cta-primary);
  border-radius: var(--radius-full);
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
  font: var(--font-bold) var(--text-sm)/1 var(--font-body);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.vf-hero-cta::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
}
.vf-hero-cta:hover,
.vf-hero-cta:focus-visible {
  border-color: var(--color-cta-hover);
  background: var(--color-cta-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.vf-hero-cta:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vf-hero--dark .vf-hero-cta { border-color: var(--color-text-inverse); }
.vf-hero-updated {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--hero-muted);
}

/* Bố cục hero có ảnh: ảnh đại diện phía trên (mobile) hoặc mờ dần bên phải (≥900px), chữ phía dưới/bên trái. */
.vf-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-surface), var(--color-brand-light)); }
.vf-hero__inner { display: flex; flex-direction: column; }
.vf-hero__copy { order: 2; position: relative; z-index: 1; margin-top: calc(-1 * var(--space-5)); padding-bottom: var(--space-6); }
/* Hero không ảnh: không kéo chữ lên; chừa khoảng trên sau dải breadcrumb. */
.vf-hero__inner > .vf-hero__copy:only-child { margin-top: var(--space-8); }
.vf-hero__media { order: 1; margin: 0 calc(-1 * var(--container-px)); aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.vf-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .vf-hero__media { margin-inline: calc(-1 * var(--container-px-md)); }
}
@media (min-width: 1024px) {
  .vf-hero { min-height: 21rem; }
  .vf-hero__copy { max-width: 40rem; margin-top: var(--space-12); padding-bottom: var(--space-16); }
  .vf-hero__inner > .vf-hero__copy:only-child { margin-top: var(--space-12); }
  .vf-hero__media { position: absolute; inset: 0 0 0 auto; width: 58%; margin: 0; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
  .vf-hero__media img { object-position: 60% 50%; }
}

/* Giữ nguyên tên model ("CR-V", "e:HEV", "Type R") trên một dòng, không ngắt tại dấu gạch. */
.vf-nowrap { white-space: nowrap; }

/* ── Form gửi lead (assets/js/lead-client.js): trạng thái và lỗi từng trường ── */
.vf-lead-status { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.vf-lead-status[hidden] { display: none; }
.vf-lead-status.is-error { background: var(--color-error-bg); color: var(--color-error); }
.vf-lead-status.is-ok { background: var(--color-success-bg); color: var(--color-success-strong); }
.vf-lead-status a { color: inherit; font-weight: var(--font-bold); text-decoration: underline; }
.vf-lead-err { min-height: 0; color: var(--color-error); font-size: var(--text-sm); }
.vf-lead-err:empty { display: none; }
[aria-invalid="true"] { border-color: var(--color-error) !important; }

/* Ô bẫy chống bot của mọi form Lead: ẩn khỏi người dùng, vẫn nằm trong DOM. */
.vf-lead-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vf-icon { display: inline-block; max-width: 100%; height: auto; }
.vf-mobile-sticky-bar__icon { flex: none; }
/* Icon thư viện màu xanh dương → đỏ thương hiệu (xoay màu; phần trắng giữ nguyên). */
.vf-mobile-sticky-bar__btn--action .vf-mobile-sticky-bar__icon { filter: hue-rotate(155deg) saturate(1.3); }