/* ============================================================
   Trang chi tiết xe (single-xe.php) — handoff "Trang chi tiết xe" (14/10/2026).
   Nền trang trắng; nền tối --color-brand-deep dùng chung cho thanh điều hướng mục, khối ưu đãi,
   Thông số kỹ thuật, Đại lý và footer. Một cột dưới 900px; bảng thông số + album có điểm ngắt 720px.
   ============================================================ */

.vf-vdp {
  --vdp-header: 72px; /* header cố định khi đã cuộn (site-header-footer.css) */
  --vdp-subnav: 56px;
  --vdp-top: calc(var(--vdp-header) + var(--wp-admin--admin-bar--height, 0px));
  --vdp-ink: var(--color-brand-deep); /* nền tối dùng chung: thanh mục, Ưu đãi, Thông số, Đại lý */
  --vdp-overlay: rgba(18, 20, 23, .75);
  color: var(--color-text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: var(--color-surface-elevated);
}
@media (max-width: 1180px) { .vf-vdp { --vdp-header: 64px; } }
/* Đệm trên/dưới của các khối lớn dùng token chung --block-py (design-tokens.css); mobile đặt riêng ở các @media bên dưới. */
.vf-vdp { --vdp-py: var(--block-py); }
.vf-vdp [id] { scroll-margin-top: calc(var(--vdp-top) + var(--vdp-subnav) + 12px); }
.vf-vdp *, .vf-vdp *::before, .vf-vdp *::after { box-sizing: border-box; }
.vf-vdp h1, .vf-vdp h2, .vf-vdp h3, .vf-vdp p, .vf-vdp ul, .vf-vdp ol, .vf-vdp dl, .vf-vdp dd, .vf-vdp figure { margin: 0; padding: 0; }
.vf-vdp ul, .vf-vdp ol { list-style: none; }
:where(.vf-vdp) a { color: var(--color-cta-primary); text-decoration: none; }
:where(.vf-vdp) a:hover { color: var(--color-cta-hover); }
/* Link nằm trong đoạn chữ luôn gạch chân (không truyền ý nghĩa chỉ bằng màu). */
.vf-vdp :is(.vf-vdp-policy__list, .vf-vdp-price__roll, .vf-vdp-ehev-note, .vf-vdp-form__consent, .vf-vdp-feature__nav) a { text-decoration: underline; text-underline-offset: 3px; }
/* Astra đặt button:hover/focus nền xanh chữ trắng (0,1,1) — reset cùng độ ưu tiên, nạp sau
   nên thắng; các thành phần nút bên dưới dùng selector ".vf-vdp .x" (0,2,0) để tự đặt màu. */
.vf-vdp button {
  padding: 0;
  margin: 0;
  border: 0 solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
}
.vf-vdp :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vf-vdp [hidden] { display: none !important; }

.vf-vdp .vf-vdp-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }
.vf-vdp .vf-vdp-fallback { padding-top: 48px; padding-bottom: 48px; }
.vf-vdp .vf-vdp-num { font-variant-numeric: tabular-nums; }

.vf-vdp .vf-vdp-eyebrow { font-size: var(--text-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-eyebrow.is-brand { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-display); line-height: var(--leading-tight); color: var(--color-text-display); }
.vf-vdp .vf-vdp-h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-display); line-height: var(--leading-tight); color: var(--color-text-display); }
.vf-vdp .vf-vdp-h3 { font-size: var(--text-2xl); font-weight: var(--font-weight-heading); line-height: var(--leading-tight); color: var(--color-text-heading); }

/* Nút: DS dùng nút viên (pill), cao ≥ 48px. */
.vf-vdp .vf-vdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.vf-vdp .vf-vdp-btn.is-primary { background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-btn.is-primary:hover,
.vf-vdp .vf-vdp-btn.is-primary:focus { background: var(--color-cta-hover); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-btn.is-outline { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-btn.is-outline:hover,
.vf-vdp .vf-vdp-btn.is-outline:focus { background: var(--color-brand-tint-soft); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-btn.is-ghost { min-height: 52px; background: var(--color-surface-elevated); border-color: var(--color-border-strong); color: var(--color-text-body); }
.vf-vdp .vf-vdp-btn.is-ghost:hover,
.vf-vdp .vf-vdp-btn.is-ghost:focus { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-text-body); }
.vf-vdp .vf-vdp-btn.is-grow { flex: 1; min-height: 52px; }
.vf-vdp .vf-vdp-btn:disabled { opacity: .6; cursor: progress; }

/* ── 02 Tổng quan ───────────────────────────────────────────── */
.vf-vdp .vf-vdp-hero { padding-block: var(--vdp-py); }
.vf-vdp .vf-vdp-hero__grid { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-start; }
.vf-vdp .vf-vdp-gallery { flex: 1.4 1 480px; min-width: 0; }
.vf-vdp .vf-vdp-buy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
/* Desktop: thư viện ảnh dính dưới header khi cuộn qua cột mua hàng dài hơn, dừng khi hết khối Tổng quan. Header ẩn khi cuộn xuống thì dính sát mép trên. */
@media (min-width: 1024px) {
  .vf-vdp .vf-vdp-gallery { position: sticky; top: calc(var(--vdp-top) + var(--space-4)); }
  body.vf-header-hidden .vf-vdp .vf-vdp-gallery { top: calc(var(--vdp-top) - var(--vdp-header) + var(--space-4)); }
}

.vf-vdp .vf-vdp-gallery__type { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.vf-vdp .vf-vdp-gallery__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-gallery__main > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vf-vdp .vf-vdp-gallery__none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--text-2xl); font-weight: 700; color: var(--color-text-muted); }
.vf-vdp .vf-vdp-gallery__frame { position: absolute; inset: 0; z-index: 3; background: var(--color-neutral-black); }
.vf-vdp .vf-vdp-gallery__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vf-vdp .vf-vdp-gallery__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vdp-overlay);
  color: var(--color-text-inverse);
}
.vf-vdp .vf-vdp-gallery__play:hover,
.vf-vdp .vf-vdp-gallery__play:focus { background: var(--color-cta-primary); color: var(--color-text-inverse); }
/* Dải ảnh nhỏ kiểu sàn thương mại: ô trắng bo tròn, ảnh đang chọn có viền đỏ cách một lớp trắng. Mũi tên nằm giữa hai mép ảnh lớn. */
.vf-vdp .vf-vdp-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text-heading);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.vf-vdp .vf-vdp-gallery__arrow.is-prev { left: 12px; }
.vf-vdp .vf-vdp-gallery__arrow.is-next { right: 12px; }
.vf-vdp .vf-vdp-gallery__arrow:hover,
.vf-vdp .vf-vdp-gallery__arrow:focus { background: var(--color-surface); border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-gallery__counter { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 12px; border-radius: var(--radius-lg); background: var(--vdp-overlay); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.vf-vdp .vf-vdp-gallery__thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.vf-vdp .vf-vdp-gallery__thumbs::-webkit-scrollbar { display: none; }
.vf-vdp .vf-vdp-gallery__thumb { position: relative; flex: none; width: 120px; aspect-ratio: 4 / 3; overflow: hidden; scroll-snap-align: start; padding: 4px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.vf-vdp .vf-vdp-gallery__thumb img { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: contain; background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-gallery__thumb.is-on { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-gallery__thumb:hover,
.vf-vdp .vf-vdp-gallery__thumb:focus { background: var(--color-surface); border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-gallery__thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 23, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.vf-vdp .vf-vdp-buy__head { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-vdp-buy__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vf-vdp .vf-vdp-buy__badges:empty { display: none; }
.vf-vdp .vf-vdp-badge { display: inline-block; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-badge.is-soon { background: var(--color-accent-warm-bg); color: var(--color-accent-warm); }
.vf-vdp .vf-vdp-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.vf-vdp .vf-vdp-buy__from,
.vf-vdp .vf-vdp-buy__unit { font-size: var(--text-lg); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-buy__unit { font-weight: 700; }
.vf-vdp .vf-vdp-buy__amount { font-size: var(--text-3xl); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-buy__lead { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-buy__group { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-vdp-buy__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-buy__color-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.vf-vdp .vf-vdp-buy__color-name,
.vf-vdp .vf-vdp-buy__note { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-buy__ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }

.vf-vdp .vf-vdp-select { position: relative; }
.vf-vdp .vf-vdp-select__btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-elevated); font-size: var(--text-base); font-weight: 700; text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-select__btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-vdp .vf-vdp-select__btn svg { flex: none; transition: transform .2s; }
.vf-vdp .vf-vdp-select__btn:hover,
.vf-vdp .vf-vdp-select__btn:focus,
.vf-vdp .vf-vdp-select__btn[aria-expanded="true"] { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-select__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.vf-vdp .vf-vdp-select__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 41; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
.vf-vdp .vf-vdp-select__opt { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-elevated); font-size: var(--text-sm); font-weight: 700; text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-select__opt:hover,
.vf-vdp .vf-vdp-select__opt:focus { background: var(--color-surface-soft); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-select__opt[aria-selected="true"] { background: var(--color-brand-tint-soft); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-select__price { font-size: var(--text-base); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-heading); }

/* Tối đa 7-8 màu: luôn một hàng, ô co đều theo bề rộng cột (tối đa 44px). */
.vf-vdp .vf-vdp-swatches { display: flex; flex-wrap: nowrap; gap: var(--space-2); }
.vf-vdp .vf-vdp-swatch { flex: 1 1 0; min-width: 0; max-width: 44px; width: auto; aspect-ratio: 1; height: auto; padding: 3px; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-surface-elevated); }
.vf-vdp .vf-vdp-swatch:hover,
.vf-vdp .vf-vdp-swatch:focus { background: var(--color-surface-elevated); border-color: var(--color-border-strong); }
.vf-vdp .vf-vdp-swatch.is-on { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-swatch > span { display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; }
.vf-vdp .vf-vdp-swatch img,
.vf-vdp .vf-vdp-tile__sw img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Điện thoại: các màu nằm một hàng, canh trái; chỉ co lại khi thiếu chỗ (không kéo giãn). */
@media (max-width: 479px) {
  .vf-vdp .vf-vdp-swatches { flex-wrap: nowrap; justify-content: flex-start; gap: var(--space-1); }
  .vf-vdp .vf-vdp-swatch { flex: 0 1 44px; width: auto; height: auto; max-width: 44px; min-width: 0; aspect-ratio: 1; }
}
.vf-vdp .vf-vdp-swatch:disabled { opacity: .35; cursor: not-allowed; }

/* Khuyến mãi của xe (CPT khuyen-mai gắn với xe): thẻ navy, tiêu đề + hạn ở đầu thẻ, mỗi chương trình một dòng có icon, điều kiện xổ ra. */
.vf-vdp .vf-vdp-promos { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); background: var(--vdp-ink); color: var(--color-text-on-dark); }
.vf-vdp .vf-vdp-promos__head { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 16%, transparent); }
.vf-vdp .vf-vdp-promos__label { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-promos__until { font-size: var(--text-sm); color: var(--color-text-on-dark); }
.vf-vdp .vf-vdp-promos__list { display: flex; flex-direction: column; gap: var(--space-4); }
.vf-vdp .vf-vdp-promos__list > li { display: flex; align-items: flex-start; gap: var(--space-3); }
.vf-vdp .vf-vdp-promos__ico { flex: none; box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); color: var(--color-brand-on-dark); }
.vf-vdp .vf-vdp-promos__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.vf-vdp .vf-vdp-promos__body > a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--color-text-on-dark); }
.vf-vdp .vf-vdp-promos__body strong { font-size: var(--text-base); line-height: 1.4; color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-promos__body > a span { font-size: var(--text-sm); }
.vf-vdp .vf-vdp-promos__body > a:hover strong,
.vf-vdp .vf-vdp-promos__body > a:focus strong { color: var(--color-brand-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.vf-vdp .vf-vdp-promos__body > a:focus-visible { outline-color: var(--color-hybrid-on-dark); }
.vf-vdp .vf-vdp-promos__cond { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-left: var(--space-4); list-style: disc; }
.vf-vdp .vf-vdp-promos__cond li { font-size: var(--text-sm); line-height: 1.5; }
.vf-vdp .vf-vdp-promos__all { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--color-text-inverse) 32%, transparent); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-inverse); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); }
.vf-vdp .vf-vdp-promos__all:hover,
.vf-vdp .vf-vdp-promos__all:focus { background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-promos__all:focus-visible { outline-color: var(--color-hybrid-on-dark); }

/* Chính sách bán hàng & bảo hành: một ô soạn thảo, mỗi dòng một câu, icon nằm trong dòng. */
.vf-vdp .vf-vdp-policy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-policy__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-policy__until { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-policy__list { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-vdp-policy__list li { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-policy__list svg { display: inline-block; vertical-align: middle; margin: 0 12px 2px 0; }
.vf-vdp .vf-vdp-policy__list a { color: var(--color-hybrid-strong); }

/* ── 03 Thanh điều hướng mục ────────────────────────────────── */
/* Thanh mục dính: nền navy Honda (khối tối không có nút đỏ, theo DS), chữ trắng mờ cho các mục
   thường, trắng đầy đủ + gạch chân đỏ san hô cho mục đang xem; hover sáng dần và có nền mờ nhẹ. */
.vf-vdp .vf-vdp-subnav {
  position: sticky;
  top: var(--vdp-top);
  z-index: 190;
  background: var(--color-brand-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
}
.vf-vdp .vf-vdp-subnav__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--vdp-subnav); }
.vf-vdp .vf-vdp-subnav__name { flex: none; font-size: var(--text-base); font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-subnav__sep { flex: none; width: 1px; height: 20px; background: color-mix(in srgb, var(--color-text-inverse) 24%, transparent); }
.vf-vdp .vf-vdp-subnav__links { flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.vf-vdp .vf-vdp-subnav__links::-webkit-scrollbar { display: none; }
.vf-vdp .vf-vdp-subnav__links.is-scrollable:not(.is-at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.vf-vdp .vf-vdp-subnav__link {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text-on-dark) 74%, transparent);
  transition: color var(--transition-base), background-color var(--transition-base), border-bottom-color var(--transition-base);
}
.vf-vdp .vf-vdp-subnav__link:hover {
  color: var(--color-text-inverse);
  background: color-mix(in srgb, var(--color-text-inverse) 7%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-text-inverse) 32%, transparent);
}
.vf-vdp .vf-vdp-subnav__link.is-on { color: var(--color-text-inverse); border-bottom-color: var(--color-brand-on-dark); }
.vf-vdp .vf-vdp-subnav__link.is-on:hover { background: transparent; border-bottom-color: var(--color-brand-on-dark); }
.vf-vdp .vf-vdp-subnav__link:focus-visible { outline: 2px solid var(--color-hybrid-on-dark); outline-offset: -2px; }
.vf-vdp .vf-vdp-subnav__next { flex: none; width: 36px; height: 36px; margin-left: calc(-1 * var(--space-4)); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-text-on-dark); }
.vf-vdp .vf-vdp-subnav__next:hover,
.vf-vdp .vf-vdp-subnav__next:focus { background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-subnav__next:focus-visible { outline: 2px solid var(--color-hybrid-on-dark); outline-offset: 2px; }

/* Header ẩn khi cuộn xuống, hiện lại khi cuộn lên (chỉ trang chi tiết xe).
   body.vf-header-hidden do vehicle-detail.js gắn; --vf-header-h do JS đo từ #masthead.
   Dịch header bằng `top` chứ không dùng transform, để không tạo containing block cho
   mega menu / drawer `position: fixed` nằm trong #masthead. Khi header ẩn, subnav dính sát mép trên. */
body.vf-header-hidden #masthead { top: calc(var(--vf-admin, 0px) - var(--vf-header-h, 72px)); }
body.vf-header-hidden .vf-vdp .vf-vdp-subnav { top: calc(var(--vdp-top) - var(--vdp-header)); }
@media (prefers-reduced-motion: no-preference) {
  #masthead { transition: top .25s ease; }
}

/* ── 04 Chỉ số nhanh ────────────────────────────────────────── */
.vf-vdp .vf-vdp-metrics { border-bottom: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); padding-block: var(--vdp-py); }
.vf-vdp .vf-vdp-metric { display: flex; align-items: flex-start; gap: var(--space-3); }
.vf-vdp .vf-vdp-metric__icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-metric__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-metric__value { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-metric__note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── 05 Thiết kế · 06 Ngoại thất (trình chiếu) ──────────────── */
/* Cỡ chữ trong khối trình chiếu hạ một bậc so với tiêu đề section: H2 dùng thang
   --font-size-title (22→30) vì cột chữ chỉ 360–500px; nhãn mục 16/600, số thứ tự và
   link hành động 14 để H2, danh sách mục và ảnh không tranh nhau. */
.vf-vdp .vf-vdp-feature { padding-top: var(--vdp-py); }
.vf-vdp .vf-vdp-feature:not(:has(+ .vf-vdp-feature)) { padding-bottom: var(--vdp-py); }
.vf-vdp .vf-vdp-feature .vf-vdp-h2 { font-size: var(--font-size-title); text-wrap: balance; }
.vf-vdp .vf-vdp-feature__box { display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-surface-sunken)); }
.vf-vdp .vf-vdp-feature__box.is-flip { flex-wrap: wrap-reverse; flex-direction: row-reverse; background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-feature__text { flex: 1 1 360px; min-width: 0; padding: var(--space-10); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); }
.vf-vdp .vf-vdp-feature__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-vdp-feature__desc { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-feature__tabs li { border-top: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-feature__tab { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--text-base); font-weight: var(--font-semibold); text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-feature__tab:hover,
.vf-vdp .vf-vdp-feature__tab:focus,
.vf-vdp .vf-vdp-feature__tab.is-on { background: none; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-feature__num { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-feature__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.vf-vdp .vf-vdp-round { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-elevated); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-round:hover,
.vf-vdp .vf-vdp-round:focus { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-round.is-primary { border-color: var(--color-cta-primary); background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-round.is-primary:hover,
.vf-vdp .vf-vdp-round.is-primary:focus { border-color: var(--color-cta-hover); background: var(--color-cta-hover); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-feature__more { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.vf-vdp .vf-vdp-feature__media { position: relative; flex: 1.3 1 400px; min-width: 0; min-height: 420px; overflow: hidden; background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-feature__box.is-flip .vf-vdp-feature__media { min-height: 360px; }
.vf-vdp .vf-vdp-feature__track { position: absolute; inset: 0; display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.vf-vdp .vf-vdp-feature__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-border); }
.vf-vdp .vf-vdp-feature__progress div { height: 100%; background: var(--color-cta-primary); transition: width .5s; }
.vf-vdp .vf-vdp-slide { position: relative; flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-8); overflow: hidden; }
.vf-vdp .vf-vdp-slide__img { position: relative; width: 100%; max-width: 560px; height: auto; max-height: 100%; object-fit: contain; border-radius: var(--radius-lg); }
.vf-vdp .vf-vdp-slide--dims .vf-vdp-slide__img { max-height: 70%; }
.vf-vdp .vf-vdp-slide__bgtext { position: absolute; top: var(--space-8); left: var(--space-8); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: rgba(17, 17, 17, .07); }
.vf-vdp .vf-vdp-slide__dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 560px; }
.vf-vdp .vf-vdp-dim { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
.vf-vdp .vf-vdp-dim__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-dim__value { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-slide__empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.vf-vdp .vf-vdp-slide__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; align-content: center; }
.vf-vdp .vf-vdp-tile { overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-lg); background: var(--color-surface-elevated); text-align: left; }
.vf-vdp .vf-vdp-tile:hover,
.vf-vdp .vf-vdp-tile:focus { background: var(--color-surface-elevated); border-color: var(--color-border-strong); }
.vf-vdp .vf-vdp-tile.is-on { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-tile > img { display: block; width: 100%; height: auto; }
.vf-vdp .vf-vdp-tile__sw { display: block; aspect-ratio: 16 / 9; }
.vf-vdp .vf-vdp-tile__name { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }

/* Mẫu màu nội thất (slide Nội thất). */
.vf-vdp .vf-vdp-slide__incolors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); }
.vf-vdp .vf-vdp-incolor { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 160px; text-align: center; }
.vf-vdp .vf-vdp-incolor__sw { width: 140px; height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.vf-vdp .vf-vdp-incolor__name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-incolor__note { margin-top: calc(-1 * var(--space-2)); font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-secondary); }

/* ── 07 Điểm nổi bật ────────────────────────────────────────── */
.vf-vdp .vf-vdp-usp { margin-top: var(--space-12); padding-bottom: var(--space-12); }
.vf-vdp .vf-vdp-usp__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.vf-vdp .vf-vdp-usp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
.vf-vdp .vf-vdp-usp__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-usp__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.vf-vdp .vf-vdp-usp__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.vf-vdp .vf-vdp-usp__num { font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-usp__num.is-long { font-size: var(--text-2xl); }
.vf-vdp .vf-vdp-usp__unit { font-size: var(--text-base); font-weight: 700; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-usp__badge { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-usp__bar { display: block; width: 32px; height: 2px; background: var(--color-cta-primary); }
.vf-vdp .vf-vdp-usp__title { margin-bottom: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-weight-heading); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-usp__desc { font-size: var(--text-base); line-height: 1.5; color: var(--color-text-secondary); }

/* ── 07b Trang bị nổi bật (icon theo bảng thông số) ─────────── */
.vf-vdp .vf-vdp-hl { padding-bottom: var(--space-12); }
.vf-vdp .vf-vdp-hl__group { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--font-weight-heading); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-hl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.vf-vdp .vf-vdp-hl__tile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-hl__tile img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.vf-vdp .vf-vdp-hl__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vf-vdp .vf-vdp-hl__text strong { font-size: var(--text-base); line-height: 1.3; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-hl__text span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-hl__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── 08 Thông số kỹ thuật (nền tối, bảng lưới cuộn dọc) ────── */
.vf-vdp .vf-vdp-specs { padding-block: var(--vdp-py); background: var(--vdp-ink); }
.vf-vdp .vf-vdp-specs__h { margin-bottom: var(--space-6); font-size: var(--text-2xl); font-weight: var(--font-weight-heading); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-ehev-note { margin: calc(-1 * var(--space-3)) 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-on-dark); }
.vf-vdp .vf-vdp-ehev-note a { font-weight: 700; color: var(--color-hybrid-on-dark); }
.vf-vdp .vf-vdp-specs__card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
.vf-vdp .vf-vdp-specs__row { display: grid; grid-template-columns: minmax(180px, 1.1fr) repeat(var(--vs-n, 1), minmax(0, 1fr)); column-gap: 16px; align-items: baseline; padding: var(--space-3) var(--space-4); }
.vf-vdp .vf-vdp-specs__head { border-bottom: 1px solid var(--color-cta-primary); background: var(--color-cta-primary); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-specs__scroll { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.vf-vdp .vf-vdp-specs__group + .vf-vdp-specs__group { border-top: 1px solid var(--color-surface-elevated); }
.vf-vdp .vf-vdp-specs__toggle { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); background: var(--color-border); font-size: var(--text-base); font-weight: 700; text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-specs__toggle:hover,
.vf-vdp .vf-vdp-specs__toggle:focus { background: var(--color-border-strong); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-specs__sign { flex: none; width: 24px; font-size: var(--text-xl); line-height: 1; text-align: center; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-specs__sign::after { content: "+"; }
.vf-vdp .vf-vdp-specs__toggle[aria-expanded="true"] .vf-vdp-specs__sign::after { content: "−"; }
.vf-vdp .vf-vdp-specs__group [role="row"] { border-top: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.5; }
.vf-vdp .vf-vdp-specs__label { color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-specs__cell { min-width: 0; font-weight: 700; color: var(--color-text-heading); overflow-wrap: anywhere; }
.vf-vdp .vf-vdp-specs__cell.is-merged { grid-column: 2 / -1; text-align: center; } /* giống nhau ở mọi phiên bản: căn giữa dải các cột */
/* Tên phiên bản trong từng ô: ẩn khỏi mắt trên desktop (đã có hàng tiêu đề) nhưng trình đọc màn hình vẫn đọc. */
.vf-vdp .vf-vdp-specs__tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Dải chọn phiên bản: chỉ dùng trên điện thoại. */
.vf-vdp .vf-vdp-specs__vers { display: none; }
@media (max-width: 720px) {
  /* Điện thoại: nền xám nhạt, mỗi nhóm là thẻ trắng (+/−), dòng 2 cột nhãn | giá trị, chỉ hiện 1 phiên bản (dải chip phía trên). */
  .vf-vdp .vf-vdp-specs { padding-block: var(--space-4); background: var(--color-surface-alt); }
  .vf-vdp .vf-vdp-specs__h { color: var(--color-text-heading); }
  .vf-vdp .vf-vdp-ehev-note { color: var(--color-text-secondary); }
  .vf-vdp .vf-vdp-ehev-note a { color: var(--color-hybrid-strong); }
  .vf-vdp .vf-vdp-specs__card { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .vf-vdp .vf-vdp-specs__head { display: none; }
  .vf-vdp .vf-vdp-specs__vers { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); overflow-x: auto; scrollbar-width: none; }
  .vf-vdp .vf-vdp-specs__vers::-webkit-scrollbar { display: none; }
  .vf-vdp .vf-vdp-specs__ver { flex: none; min-height: 44px; padding: 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface-elevated); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; color: var(--color-text-heading); }
  .vf-vdp .vf-vdp-specs__ver:hover,
  .vf-vdp .vf-vdp-specs__ver:focus { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
  .vf-vdp .vf-vdp-specs__ver.is-on,
  .vf-vdp .vf-vdp-specs__ver.is-on:hover,
  .vf-vdp .vf-vdp-specs__ver.is-on:focus { border-color: var(--color-cta-primary); background: var(--color-cta-primary); color: var(--color-text-inverse); }
  /* Bảng cao tối đa bằng phần màn hình còn lại (trừ header, thanh mục, dải chip, thanh nút dưới); xem tiếp bằng cuộn trong khung; cuộn hết khung thì trang cuộn tiếp (không chặn chuỗi cuộn). */
  .vf-vdp .vf-vdp-specs__scroll { max-height: clamp(240px, calc(100svh - var(--vdp-top) - var(--vdp-subnav) - 60px - 88px - var(--space-4)), 560px); overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: thin; }
  .vf-vdp .vf-vdp-specs__group { overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
  .vf-vdp .vf-vdp-specs__group + .vf-vdp-specs__group { margin-top: var(--space-2); border-top: 0; }
  .vf-vdp .vf-vdp-specs__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-3); align-items: start; }
  .vf-vdp .vf-vdp-specs__label { font-weight: 700; color: var(--color-text-heading); }
  .vf-vdp .vf-vdp-specs__cell { font-weight: 400; }
  .vf-vdp .vf-vdp-specs__cell.is-merged { grid-column: 2; text-align: left; }
  .vf-vdp .vf-vdp-specs__card[data-ver="0"] .vf-vdp-specs__cell[data-ver]:not([data-ver="0"]),
  .vf-vdp .vf-vdp-specs__card[data-ver="1"] .vf-vdp-specs__cell[data-ver]:not([data-ver="1"]),
  .vf-vdp .vf-vdp-specs__card[data-ver="2"] .vf-vdp-specs__cell[data-ver]:not([data-ver="2"]),
  .vf-vdp .vf-vdp-specs__card[data-ver="3"] .vf-vdp-specs__cell[data-ver]:not([data-ver="3"]) { display: none; }
  .vf-vdp .vf-vdp-specs__cell[data-ver] { grid-column: 2; }
}

/* ── 09 Bảng giá phiên bản (dải thẻ cuộn ngang, desktop 3 thẻ) ── */
.vf-vdp .vf-vdp-prices-sec { padding-block: var(--vdp-py); }
.vf-vdp .vf-vdp-prices-sec > .vf-vdp-wrap > .vf-vdp-h3 { margin-bottom: var(--space-6); }
.vf-vdp .vf-vdp-prices { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: var(--space-3) 0 var(--space-3); scrollbar-width: thin; }
.vf-vdp .vf-vdp-price { position: relative; flex: 0 0 max(280px, calc((100% - 2 * var(--space-4)) / 3)); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-4); padding: calc(var(--space-6) + var(--space-1)) var(--space-6) var(--space-6); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); box-shadow: 0 8px 24px rgba(17, 17, 17, .10); cursor: pointer; }
.vf-vdp .vf-vdp-price::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-cta-primary); }
.vf-vdp .vf-vdp-price.is-on { border: 2px solid var(--color-cta-primary); }
.vf-vdp .vf-vdp-price__badge { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-lg); background: var(--color-text-heading); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-price__name { font-size: var(--text-xl); font-weight: var(--font-weight-heading); line-height: 1.3; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-price__box { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-price__vat { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-price__amount { font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--color-cta-primary); }
/* Thẻ giá hẹp (máy tính bảng/điện thoại): hạ cỡ số tiền để "1.250.000.000 VNĐ" không tràn khỏi ô. */
@media (max-width: 1099px) {
  .vf-vdp .vf-vdp-price__amount { font-size: var(--text-2xl); }
}
.vf-vdp .vf-vdp-price__unit { font-size: var(--text-base); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-price__colors,
.vf-vdp .vf-vdp-price__roll { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-price__colors strong,
.vf-vdp .vf-vdp-price__roll strong { color: var(--color-text-heading); }
.vf-vdp .vf-vdp-price__features { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-body); }
.vf-vdp .vf-vdp-price__cta { margin-top: auto; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-cta-primary); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; text-align: center; text-decoration: none; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-price__cta:hover,
.vf-vdp .vf-vdp-price__cta:focus { background: var(--color-brand-tint-soft); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-prices__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.vf-vdp .vf-vdp-finance { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-finance__text { flex: 1 1 320px; }
.vf-vdp .vf-vdp-finance__title { margin-bottom: var(--space-1); font-size: var(--text-lg); font-weight: var(--font-weight-heading); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-finance__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-finance__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Điện thoại hẹp: hai CTA tài chính chia đôi một hàng, chữ tự xuống dòng thay vì rớt nút xuống dưới. */
@media (max-width: 599px) {
  .vf-vdp .vf-vdp-finance__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .vf-vdp .vf-vdp-finance__ctas .vf-vdp-btn { width: 100%; min-width: 0; padding-inline: var(--space-3); font-size: var(--text-sm); line-height: 1.3; white-space: normal; }
}

/* ── 10 Khách nhận xe (album chạy ngang; mobile vuốt tay) ───── */
.vf-vdp .vf-vdp-proof { padding-bottom: var(--space-12); }
@media (max-width: 767px) { .vf-vdp .vf-vdp-proof { padding-top: var(--space-10); } } /* Chừa khoảng dưới khối tài chính liền trước. */
.vf-vdp .vf-vdp-proof .vf-vdp-h3 { margin-bottom: var(--space-2); }
.vf-vdp .vf-vdp-proof__lead { margin-bottom: var(--space-4); font-size: var(--text-base); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-proof__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.vf-vdp .vf-vdp-proof__track { display: flex; gap: 16px; width: max-content; animation: vf-vdp-run 48s linear infinite; }
.vf-vdp .vf-vdp-proof__view:hover .vf-vdp-proof__track,
.vf-vdp .vf-vdp-proof__view:focus-within .vf-vdp-proof__track { animation-play-state: paused; }
.vf-vdp .vf-vdp-proof__item { flex: none; width: 300px; }
.vf-vdp .vf-vdp-proof__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-proof__item figcaption { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }
@keyframes vf-vdp-run { to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 720px) {
  .vf-vdp .vf-vdp-proof__view { margin: 0 calc(-1 * var(--container-gutter)); padding: 0 var(--container-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--container-gutter); scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .vf-vdp .vf-vdp-proof__view::-webkit-scrollbar { display: none; }
  .vf-vdp .vf-vdp-proof__track { gap: 12px; padding-right: var(--container-gutter); animation: none; }
  .vf-vdp .vf-vdp-proof__item { width: 76vw; max-width: 320px; scroll-snap-align: start; }
  .vf-vdp .vf-vdp-proof__item img { aspect-ratio: 4 / 5; }
  .vf-vdp .vf-vdp-proof__item figcaption { flex-direction: column; gap: 2px; }
}
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .vf-vdp .vf-vdp-proof__item.is-dup { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-vdp .vf-vdp-proof__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .vf-vdp .vf-vdp-proof__track { animation: none; }
}

/* ── 11 Đại lý + form (nền tối) ─────────────────────────────── */
.vf-vdp .vf-vdp-dealer { padding-block: var(--vdp-py); background: var(--vdp-ink); }
.vf-vdp .vf-vdp-dealer__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); }
.vf-vdp .vf-vdp-dealer__card { flex: 1 1 400px; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
.vf-vdp .vf-vdp-dealer__photo { aspect-ratio: 16 / 9; background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-dealer__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-vdp .vf-vdp-dealer__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.vf-vdp .vf-vdp-dealer__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-heading); line-height: var(--leading-tight); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-dealer__desc { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-dealer__addr { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-style: normal; }
.vf-vdp .vf-vdp-dealer__addr strong { color: var(--color-text-heading); }
.vf-vdp .vf-vdp-dealer__addr span { font-size: var(--text-sm); color: var(--color-text-secondary); }

.vf-vdp .vf-vdp-form { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-top: 4px solid var(--color-cta-primary); border-radius: var(--radius-lg); background: var(--color-surface-elevated); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.vf-vdp .vf-vdp-form__intro { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-vdp .vf-vdp-form__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-heading); line-height: var(--leading-tight); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__car { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-form__thumb { flex: none; width: 72px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-form__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-vdp .vf-vdp-form__car-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-vdp .vf-vdp-form__car-text strong { color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__small { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-form__flow { display: flex; flex-direction: column; gap: var(--space-4); }
.vf-vdp .vf-vdp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.vf-vdp .vf-vdp-step { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-vdp .vf-vdp-step__bar { height: 4px; border-radius: 2px; background: var(--color-border); }
.vf-vdp .vf-vdp-step__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-step__n { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-border); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-step.is-on .vf-vdp-step__bar,
.vf-vdp .vf-vdp-step.is-on .vf-vdp-step__n { background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-step.is-current .vf-vdp-step__row { color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__step { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-vdp-form__step[data-step="2"],
.vf-vdp .vf-vdp-form__step[data-step="3"] { gap: var(--space-4); }
.vf-vdp .vf-vdp-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-vdp .vf-vdp-form__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-req { color: var(--color-error-text); }
.vf-vdp .vf-vdp-intent { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-intent:hover,
.vf-vdp .vf-vdp-intent:focus { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-intent.is-on { border-color: var(--color-cta-primary); background: var(--color-brand-tint-soft); }
.vf-vdp .vf-vdp-intent > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.vf-vdp .vf-vdp-intent strong { font-size: var(--text-base); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-intent > span > span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-pill { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-elevated); font-size: var(--text-sm); font-weight: 700; text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-pill:hover,
.vf-vdp .vf-vdp-pill:focus { background: var(--color-surface-elevated); border-color: var(--color-cta-primary); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-pill.is-on { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-pill__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vf-vdp .vf-vdp-seg { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-lg); }
.vf-vdp .vf-vdp-seg button { padding: 12px; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-seg button:hover,
.vf-vdp .vf-vdp-seg button:focus { background: var(--color-surface-soft); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-seg button.is-on { background: var(--color-brand-tint-soft); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-form__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.vf-vdp .vf-vdp-input { width: 100%; height: 48px; padding: 0 var(--space-3); border: 1.5px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface-elevated); font-family: inherit; font-size: var(--text-base); color: var(--color-text-body); }
.vf-vdp .vf-vdp-input:focus { border-color: var(--color-focus); outline: 2px solid var(--color-focus); outline-offset: 0; }
.vf-vdp .vf-vdp-input[aria-invalid="true"] { border-color: var(--color-error-text); }
.vf-vdp .vf-vdp-form__err { font-size: var(--text-sm); color: var(--color-error-text); }
.vf-vdp .vf-vdp-form__err:empty { display: none; }
.vf-vdp .vf-vdp-form__summary { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-sunken); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-form__summary b { color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); cursor: pointer; }
.vf-vdp .vf-vdp-form__consent input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-form__consent a { color: var(--color-hybrid-strong); }
.vf-vdp .vf-vdp-form__btns { display: flex; gap: var(--space-3); }
.vf-vdp .vf-vdp-form__done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) 0; text-align: center; }
.vf-vdp .vf-vdp-form__done:focus { outline: none; }
.vf-vdp .vf-vdp-form__done-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-success-strong); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-form__done strong { font-size: var(--text-lg); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__done p { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-form__again { min-height: 44px; font-size: var(--text-sm); font-weight: 700; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-form__again:hover,
.vf-vdp .vf-vdp-form__again:focus { background: none; color: var(--color-cta-hover); text-decoration: underline; }

/* ── 12 Khám phá thêm ──────────────────────────────────────── */
.vf-vdp .vf-vdp-more { padding-block: var(--vdp-py); }
.vf-vdp .vf-vdp-more .vf-vdp-h3 { margin-bottom: var(--space-6); }
.vf-vdp .vf-vdp-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.vf-vdp .vf-vdp-more__card { display: block; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); text-decoration: none; color: var(--color-text-heading); transition: border-color var(--transition-fast); }
.vf-vdp .vf-vdp-more__card:hover { border-color: var(--color-cta-primary); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-more__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); }
.vf-vdp .vf-vdp-more__img img { width: 90%; height: auto; }
.vf-vdp .vf-vdp-more__name { font-size: var(--text-lg); font-weight: var(--font-weight-heading); line-height: 1.3; }
.vf-vdp .vf-vdp-more__meta { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-more__price { font-weight: 700; color: var(--color-cta-primary); }
/* Điện thoại: 4 xe gợi ý xếp 2 cột (2×2) thay vì mỗi xe một hàng. */
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-more { padding-block: var(--space-4); }
  .vf-vdp .vf-vdp-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .vf-vdp .vf-vdp-more__card { padding: var(--space-3); }
  .vf-vdp .vf-vdp-more__name { font-size: var(--text-base); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vf-vdp .vf-vdp-hero__grid { gap: var(--space-6); }
  .vf-vdp .vf-vdp-feature__text { padding: var(--space-6); }
  .vf-vdp .vf-vdp-feature__media,
  .vf-vdp .vf-vdp-feature__box.is-flip .vf-vdp-feature__media { min-height: 280px; }
}
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-hero { padding-block: var(--space-4); }
  .vf-vdp .vf-vdp-subnav__inner { gap: var(--space-3); }
  .vf-vdp .vf-vdp-subnav__link { padding: 0 10px; font-size: var(--text-sm); }
  /* Chỉ số nhanh trên điện thoại: 4 ô 2×2, mỗi ô có khung để quét nhanh thay vì xếp dọc. */
  .vf-vdp .vf-vdp-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .vf-vdp .vf-vdp-prices-sec { padding-block: var(--space-4); }
  .vf-vdp .vf-vdp-metric { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); }
  .vf-vdp .vf-vdp-metric dl { min-width: 0; margin: 0; }
  .vf-vdp .vf-vdp-metric__icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
  .vf-vdp .vf-vdp-metric__value { font-size: var(--text-base); }
  /* Trình chiếu trên điện thoại: vuốt ngang đổi slide (vehicle-detail.js); ảnh dims gọn một hàng. */
  .vf-vdp .vf-vdp-feature__media { touch-action: pan-y; }
  .vf-vdp .vf-vdp-slide { padding: var(--space-4); gap: var(--space-3); }
  .vf-vdp .vf-vdp-slide__dims { gap: var(--space-2); }
  .vf-vdp .vf-vdp-dim { padding: var(--space-2); }
  .vf-vdp .vf-vdp-dim__value { font-size: var(--text-base); white-space: nowrap; }
  .vf-vdp .vf-vdp-slide__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .vf-vdp .vf-vdp-slide--colors,
  .vf-vdp .vf-vdp-slide--in_colors { overflow-y: auto; }
  .vf-vdp .vf-vdp-slide__incolors { gap: var(--space-3); }
  .vf-vdp .vf-vdp-incolor { gap: var(--space-2); max-width: 100px; }
  .vf-vdp .vf-vdp-incolor__sw { width: 72px; height: 48px; }
  .vf-vdp .vf-vdp-dealer { padding-block: var(--space-4); }
  .vf-vdp .vf-vdp-form,
  .vf-vdp .vf-vdp-dealer__body { padding: var(--space-5); }

  /* Trình chiếu Thiết kế / Ngoại thất / Nội thất trên điện thoại: một khung vừa chiều cao màn hình (trừ header + thanh mục dính).
     Ảnh trên cùng; dưới là tiêu đề + mô tả mục đang xem, dải mục vuốt ngang (bấm chữ để xem) và nút mũi tên. */
  .vf-vdp .vf-vdp-feature,
  .vf-vdp .vf-vdp-feature + .vf-vdp-feature { padding-top: var(--space-3); }
  .vf-vdp .vf-vdp-feature:not(:has(+ .vf-vdp-feature)) { padding-bottom: var(--space-3); } /* Khối cuối chuỗi: chừa đáy 12px trước khối kế tiếp. */
  .vf-vdp .vf-vdp-feature__box,
  .vf-vdp .vf-vdp-feature__box.is-flip { flex-direction: column; flex-wrap: nowrap; height: clamp(520px, calc(100svh - var(--vdp-top) - var(--vdp-subnav) - 80px - var(--space-4)), 760px); }
  .vf-vdp .vf-vdp-feature__media,
  .vf-vdp .vf-vdp-feature__box.is-flip .vf-vdp-feature__media { order: -1; flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .vf-vdp .vf-vdp-slide--image { padding: 0; }
  .vf-vdp .vf-vdp-slide--image .vf-vdp-slide__img { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
  .vf-vdp .vf-vdp-feature__text { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4); gap: var(--space-3); justify-content: space-between; }
  .vf-vdp .vf-vdp-feature__intro { gap: var(--space-1); }
  .vf-vdp .vf-vdp-feature .vf-vdp-h2 { font-size: var(--text-xl); line-height: 1.3; }
  .vf-vdp .vf-vdp-feature__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--text-sm); line-height: 1.5; }
  .vf-vdp .vf-vdp-feature__desc:empty { display: none; }
  /* Danh sách mục xếp dọc như desktop, giới hạn ~3 dòng và cuộn dọc (vuốt) để chọn. */
  .vf-vdp .vf-vdp-feature__tabs { max-height: 9.5rem; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vf-vdp .vf-vdp-feature__tabs.is-scrollable:not(.is-at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
  .vf-vdp .vf-vdp-feature__tabs::-webkit-scrollbar { display: none; }
  .vf-vdp .vf-vdp-feature__tabs li { scroll-snap-align: start; }
}
@media (max-width: 479px) {
  .vf-vdp .vf-vdp-subnav__name,
  .vf-vdp .vf-vdp-subnav__sep { display: none; }
  .vf-vdp .vf-vdp-gallery__thumb { width: 96px; }
}
@media (prefers-contrast: more) {
  .vf-vdp .vf-vdp-feature__box,
  .vf-vdp .vf-vdp-usp__card,
  .vf-vdp .vf-vdp-price { border-color: var(--color-border-strong); }
}