/* ============================================================
   Trang chi tiết xe (single-xe-vinfast.php) — handoff "VF 7 - Single Xe VinFast".
   Khung nội dung và lề ngang dùng token container chung; hero chuyển một cột dưới 1024px.
   ============================================================ */

.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));
  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; } }
.vf-vdp [id] { scroll-margin-top: calc(var(--vdp-top) + var(--vdp-subnav) - 2px); }
.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 dt, .vf-vdp dd, .vf-vdp figure, .vf-vdp figcaption { 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); }
/* 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;
}
.vf-vdp :focus-visible { outline: 3px solid var(--color-cta-primary); outline-offset: 2px; }

.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-eyebrow { font-size: var(--text-sm); font-weight: 800; letter-spacing: .1em; color: var(--color-text-secondary); text-transform: uppercase; margin: 0; }
.vf-vdp .vf-vdp-eyebrow-line h2 { display: inline; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; }
.vf-vdp .vf-vdp-eyebrow.is-muted { display: block; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.vf-vdp .vf-vdp-eyebrow.is-on-dark { color: var(--color-brand-on-dark); }
.vf-vdp .vf-vdp-h1 { font-size: var(--font-size-h1); font-weight: 800; line-height: 1.25; color: var(--color-text-heading); margin: 0; }
.vf-vdp .vf-vdp-h2 { font-size: var(--font-size-h2); font-weight: 800; line-height: 1.25; color: var(--color-text-heading); margin: 0; }
.vf-vdp .vf-vdp-h2.is-inverse { color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-h3 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text-heading); margin: 0; }

.vf-vdp .vf-vdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .85rem 1.5rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.vf-vdp .vf-vdp-btn.is-primary {
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
}
.vf-vdp .vf-vdp-btn.is-primary:hover { background: var(--color-cta-hover); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-btn.is-outline {
  background: var(--color-surface-elevated);
  color: var(--color-cta-primary);
  border-color: var(--color-cta-primary);
}
.vf-vdp .vf-vdp-btn.is-outline:hover { background: var(--color-surface-soft); color: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.vf-vdp .vf-vdp-btn.is-ghost { height: 52px; padding: 0 20px; background: var(--color-surface-elevated); color: var(--color-text-body); border-color: var(--color-border-strong); font-size: var(--text-base); }
.vf-vdp .vf-vdp-btn.is-ghost:hover { background: var(--color-surface-elevated); color: var(--color-text-body); border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-btn.is-grow { flex: 1; height: 52px; padding: 0; border-color: transparent; box-shadow: var(--shadow-brand); }

/* ── 01 Hero ────────────────────────────────────────────────── */
.vf-vdp .vf-vdp-crumbs { padding-top: var(--space-3); }
.vf-vdp .vf-vdp-hero { padding: 32px 0 var(--space-4); }
.vf-vdp .vf-vdp-crumbs + .vf-vdp-hero,
.vf-vdp .vf-vdp-crumbs + .vf-vdp-article .vf-vdp-hero { padding-top: var(--space-3); }
.vf-vdp .vf-vdp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.vf-vdp .vf-vdp-gallery { position: sticky; top: calc(var(--vdp-top) + 24px); align-self: start; }
.vf-vdp .vf-vdp-gallery__main {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-sunken);
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
  touch-action: pan-y; /* cuộn dọc trang vẫn được, vuốt ngang để đổi ảnh */
}
.vf-vdp .vf-vdp-gallery__main img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain; /* hiện đủ ảnh mọi tỉ lệ, phần thừa lấy màu nền của khung */
  -webkit-user-drag: none;
  user-select: none;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-gallery__main,
  .vf-vdp .vf-vdp-gallery__main img { aspect-ratio: 4 / 3; }
}
.vf-vdp .vf-vdp-gallery__main [hidden],
.vf-vdp .vf-vdp-gallery__thumbstrip[hidden],
.vf-vdp .vf-vdp-form__thumb [hidden],
.vf-vdp .vf-vdp-form__muted[hidden] { display: none; }
.vf-vdp .vf-vdp-gallery__none {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.vf-vdp .vf-vdp-gallery__counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  padding: 4px 12px;
  background: rgba(18, 20, 23, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
/* Chip lọc ảnh theo nhóm */
.vf-vdp .vf-vdp-gallery__chips { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.vf-vdp .vf-vdp-gallery__chips::-webkit-scrollbar { display: none; }
.vf-vdp .vf-vdp-gallery__chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
.vf-vdp .vf-vdp-gallery__chip:hover,
.vf-vdp .vf-vdp-gallery__chip:focus { background: var(--color-surface-soft); border-color: var(--color-cta-primary); color: var(--color-text-heading); }
.vf-vdp .vf-vdp-gallery__chip.is-on,
.vf-vdp .vf-vdp-gallery__chip.is-on:hover,
.vf-vdp .vf-vdp-gallery__chip.is-on:focus { background: var(--color-cta-primary); border-color: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-gallery__thumbstrip { position: relative; margin-top: var(--space-3); }
.vf-vdp .vf-vdp-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  /* Ba ô đầy đủ và nửa ô kế tiếp; ba khoảng trống nằm trong khung nhìn. */
  grid-auto-columns: calc((100% - 3 * var(--space-3)) / 3.5);
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.vf-vdp .vf-vdp-gallery__thumbstrip.has-more .vf-vdp-gallery__thumbs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--space-8)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--space-8)), transparent); }
.vf-vdp .vf-vdp-gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .vf-vdp .vf-vdp-gallery__thumbs { grid-auto-columns: calc((100% - 4 * var(--space-3)) / 4.5); }
}
.vf-vdp .vf-vdp-gallery__thumb-next { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--color-text-heading); box-shadow: none; cursor: pointer; }
.vf-vdp .vf-vdp-gallery__thumb-next[hidden] { display: none; }
.vf-vdp .vf-vdp-gallery__thumb-next:hover,
.vf-vdp .vf-vdp-gallery__thumb-next:focus { background: transparent; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-gallery__thumb-next svg { stroke: currentColor; width: 28px; height: 28px; }
.vf-vdp .vf-vdp-gallery__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  cursor: pointer;
  overflow: hidden;
  display: block;
  padding: 0;
  position: relative;
  transition: border-color 0.15s ease;
}
.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-elevated); border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}
.vf-vdp .vf-vdp-gallery__video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--color-surface-dark);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  overflow: hidden;
  color: var(--color-text-inverse);
}
.vf-vdp .vf-vdp-gallery__video:hover,
.vf-vdp .vf-vdp-gallery__video:focus { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-gallery__video span:first-child { font-size: var(--text-sm); line-height: 1; }
.vf-vdp .vf-vdp-gallery__video span:last-child { font-size: var(--text-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; }

.vf-vdp .vf-vdp-buy { padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.vf-vdp .vf-vdp-buy__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.vf-vdp .vf-vdp-buy__head .vf-vdp-h1 { grid-column: 1; grid-row: 1; }
.vf-vdp .vf-vdp-buy__head .vf-vdp-buy__badges { grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: flex-end; max-width: 104px; text-align: center; }
.vf-vdp .vf-vdp-buy__head .vf-vdp-buy__price { grid-column: 1 / -1; }
.vf-vdp .vf-vdp-buy__head .vf-vdp-buy__lead { grid-column: 1 / -1; margin: 4px 0 0; 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-2); }
.vf-vdp .vf-vdp-buy__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.vf-vdp .vf-vdp-buy__ctas .vf-vdp-btn { gap: var(--space-2); }
.vf-vdp .vf-vdp-buy__ctas .vf-vdp-btn svg { flex: none; }
@media (min-width: 768px) {
  .vf-vdp .vf-vdp-hero { padding-bottom: 40px; }
  .vf-vdp .vf-vdp-crumbs + .vf-vdp-hero { padding-top: 16px; }
  .vf-vdp .vf-vdp-buy { padding: 8px 0; gap: 24px; }
  .vf-vdp .vf-vdp-buy__head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .vf-vdp .vf-vdp-buy__head .vf-vdp-buy__badges { flex-wrap: nowrap; justify-content: flex-start; max-width: none; text-align: left; }
  .vf-vdp .vf-vdp-buy__group { gap: 12px; }
  .vf-vdp .vf-vdp-buy__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .vf-vdp .vf-vdp-buy__ctas .vf-vdp-btn {
    width: 100%;
    padding: .85rem var(--space-3);
    font-size: var(--text-sm);
  }
  .vf-vdp .vf-vdp-eyebrow.is-muted { margin-bottom: 12px; }
}
@media (min-width: 1200px) {
  .vf-vdp .vf-vdp-buy__ctas .vf-vdp-btn {
    font-size: var(--text-base);
    padding: .85rem var(--space-4);
  }
}
.vf-vdp .vf-vdp-buy__badges { display: flex; gap: 8px; }
.vf-vdp .vf-vdp-badge { background: var(--color-surface-sunken); color: var(--color-text-secondary); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 800; letter-spacing: .05em; padding: 4px 12px; border-radius: 9999px; }
.vf-vdp .vf-vdp-badge.is-soon { background: var(--color-accent-warm-bg); color: var(--color-accent-warm); }
.vf-vdp .vf-vdp-badge.is-off { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-buy__head .vf-vdp-buy__badges { max-width: none; flex-wrap: nowrap; }
  .vf-vdp .vf-vdp-badge:not(.is-soon):not(.is-off) { background: var(--color-brand-tint-soft); color: var(--color-brand-primary); border-color: var(--color-brand-tint); font-size: var(--text-xs); letter-spacing: .03em; padding: 2px 10px; white-space: nowrap; }
}
.vf-vdp .vf-vdp-buy__price { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.vf-vdp .vf-vdp-buy__from { font-size: var(--text-lg); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-buy__amount { font-size: var(--text-3xl); font-weight: 800; line-height: 1.25; color: var(--color-brand-primary); font-variant-numeric: tabular-nums; }
.vf-vdp .vf-vdp-buy__unit { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-buy__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); white-space: nowrap; }
.vf-vdp .vf-vdp-buy__color-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vf-vdp .vf-vdp-buy__color-name { font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; }
.vf-vdp .vf-vdp-buy__note { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }

.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: 12px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-elevated);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 800;
  text-align: left;
  color: var(--color-text-heading);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.vf-vdp .vf-vdp-select__btn span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-vdp .vf-vdp-select__btn svg { flex-shrink: 0; color: var(--color-text-secondary); transition: transform .2s, color var(--transition-fast); }
.vf-vdp .vf-vdp-select__btn:hover,
.vf-vdp .vf-vdp-select__btn:focus-visible,
.vf-vdp .vf-vdp-select__btn[aria-expanded="true"] {
  border-color: var(--color-cta-primary);
}
.vf-vdp .vf-vdp-select__btn:hover svg,
.vf-vdp .vf-vdp-select__btn:focus-visible svg,
.vf-vdp .vf-vdp-select__btn[aria-expanded="true"] svg {
  color: var(--color-cta-primary);
}
.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;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 29, 78, .16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vf-vdp .vf-vdp-select__list[hidden] { display: none; }
.vf-vdp .vf-vdp-select__opt {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: var(--color-surface-elevated);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-body);
}
.vf-vdp .vf-vdp-select__opt:hover, .vf-vdp .vf-vdp-select__opt:focus-visible { background: var(--color-surface-soft); }
.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); font-weight: 800; color: var(--color-text-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }

.vf-vdp .vf-vdp-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.vf-vdp .vf-vdp-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 4px;
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  cursor: pointer;
}
.vf-vdp .vf-vdp-swatches.is-lg .vf-vdp-swatch { padding: 3px; }
.vf-vdp .vf-vdp-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }
.vf-vdp .vf-vdp-swatch span img, .vf-vdp .vf-vdp-tile__sw img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vf-vdp .vf-vdp-swatch.is-on { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-swatch:disabled { opacity: .35; cursor: not-allowed; }

.vf-vdp .vf-vdp-policy { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--color-border); padding-top: 24px; }
.vf-vdp .vf-vdp-policy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vf-vdp .vf-vdp-policy__label { font-size: var(--text-base); font-weight: 800; letter-spacing: .08em; color: var(--color-text-heading); text-transform: uppercase; min-width: 0; }
.vf-vdp .vf-vdp-policy__badge { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 9999px; background: var(--color-brand-tint-soft); color: var(--color-cta-primary); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.vf-vdp .vf-vdp-policy__specs { display: flex; flex-direction: column; gap: 8px; }
.vf-vdp .vf-vdp-policy__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; background: none; border-radius: 0; margin: 0; }
.vf-vdp .vf-vdp-policy__metrics[hidden],
.vf-vdp .vf-vdp-policy__metric[hidden] { display: none; }
.vf-vdp .vf-vdp-policy__metric { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-policy__metric:nth-child(odd) { border-right: 1px solid var(--color-border); padding-right: 16px; }
.vf-vdp .vf-vdp-policy__metric:nth-child(even) { padding-left: 16px; }
.vf-vdp .vf-vdp-policy__metric:last-child, .vf-vdp .vf-vdp-policy__metric:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.vf-vdp .vf-vdp-policy__metrics dt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; font-weight: 400; }
.vf-vdp .vf-vdp-policy__metrics dd { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); margin: 0; line-height: 1.4; }

.vf-vdp .vf-vdp-policy__footnote { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); margin: 0; }
.vf-vdp .vf-vdp-policy__perks { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--color-border); padding-top: 14px; margin-top: 2px; }
.vf-vdp .vf-vdp-policy__sublabel { font-size: var(--text-base); font-weight: 800; letter-spacing: .08em; color: var(--color-text-heading); text-transform: uppercase; }
.vf-vdp .vf-vdp-policy__list { display: flex; flex-direction: column; gap: 12px; }
.vf-vdp .vf-vdp-policy__list li { display: flex; align-items: flex-start; gap: 10px; }
.vf-vdp .vf-vdp-policy__list svg { flex-shrink: 0; margin-top: 2px; stroke: var(--color-text-muted); }
.vf-vdp .vf-vdp-policy__list div { display: flex; flex-direction: column; gap: 2px; }
.vf-vdp .vf-vdp-policy__title { font-size: var(--text-sm); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-policy__desc { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-secondary); }
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-policy__desc { font-size: var(--text-sm); line-height: 1.5; }
}

/* ── 02 Subnav ──────────────────────────────────────────────── */
.vf-vdp .vf-vdp-subnav {
  position: sticky;
  top: var(--vdp-top);
  z-index: 190;
  background: var(--color-brand-tint-soft);
  border-top: 1px solid var(--color-brand-tint);
  border-bottom: 1px solid var(--color-brand-tint);
  box-shadow: var(--shadow-md);
}
.vf-vdp .vf-vdp-subnav__inner { display: flex; align-items: center; gap: 24px; height: var(--vdp-subnav); padding-top: 8px; }
.vf-vdp .vf-vdp-subnav__name { flex-shrink: 0; font-size: var(--text-base); font-weight: 800; color: var(--color-text-heading); white-space: nowrap; }
.vf-vdp .vf-vdp-subnav__sep { flex-shrink: 0; width: 1px; height: 24px; background: var(--color-brand-tint); }
.vf-vdp .vf-vdp-subnav__links { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; height: 100%; scrollbar-width: none; }
.vf-vdp .vf-vdp-subnav__links::-webkit-scrollbar { display: none; }
/* Gợi ý còn mục bị khuất: fade mép phải khi thanh còn cuộn được (tắt khi tới cuối). */
.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 12px;
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text-body);
  border-bottom: 3px solid transparent;
  transition: color .15s, background-color .15s;
}
.vf-vdp .vf-vdp-subnav__link:hover { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-subnav__link.is-on { font-weight: 800; color: var(--color-cta-primary); border-bottom-color: var(--color-cta-primary); background: color-mix(in srgb, var(--color-cta-primary) 9%, transparent); }

.vf-vdp .vf-vdp-subnav__next {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: -8px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--transition-fast, .15s), background var(--transition-fast, .15s);
}
.vf-vdp .vf-vdp-subnav__next[hidden] {
  display: none;
}
.vf-vdp .vf-vdp-subnav__next:hover,
.vf-vdp .vf-vdp-subnav__next:focus {
  background: var(--color-brand-tint);
  color: var(--color-cta-primary);
}
.vf-vdp .vf-vdp-subnav__next:hover:focus {
  background: var(--color-brand-tint);
  color: var(--color-cta-primary);
}
.vf-vdp .vf-vdp-subnav__next:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-cta-primary));
  outline-offset: 2px;
}
.vf-vdp .vf-vdp-subnav__next svg {
  stroke: currentColor;
  width: 18px;
  height: 18px;
}

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

/* ── 03 Metrics ─────────────────────────────────────────────── */
.vf-vdp .vf-vdp-metrics { padding: 40px 0; }
.vf-vdp .vf-vdp-metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vf-vdp .vf-vdp-metric { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; }
.vf-vdp .vf-vdp-metric__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text-heading); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vf-vdp .vf-vdp-metric__label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: 600; margin-bottom: 4px; }
.vf-vdp .vf-vdp-metric__value { font-size: var(--text-lg); font-weight: 800; line-height: 1.4; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-metric__note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* ── 04 Thiết kế · Ngoại thất · Nội thất ────────────────────── */
.vf-vdp .vf-vdp-feature { padding: 0 0 64px; }
.vf-vdp .vf-vdp-feature__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  background: linear-gradient(135deg, var(--color-surface-soft) 0%, var(--color-surface-mist) 100%);
  border-radius: 24px;
  overflow: hidden;
}
.vf-vdp .vf-vdp-feature__box.is-soft { background: var(--color-surface-sunken); }
.vf-vdp .vf-vdp-feature__box.is-flip { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.vf-vdp .vf-vdp-feature__box.is-flip .vf-vdp-feature__text { order: 2; }
.vf-vdp .vf-vdp-feature__text { padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.vf-vdp .vf-vdp-feature__intro { display: flex; flex-direction: column; gap: 8px; }
.vf-vdp .vf-vdp-feature__desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.625; min-height: 52px; }
.vf-vdp .vf-vdp-feature__tabs li { display: contents; }
.vf-vdp .vf-vdp-feature__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--color-border-strong); }
.vf-vdp .vf-vdp-feature__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
}
.vf-vdp .vf-vdp-feature__tab::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--color-cta-primary); transition: width .3s; }
.vf-vdp .vf-vdp-feature__tab.is-on::after { width: 100%; }
.vf-vdp .vf-vdp-feature__num { flex-shrink: 0; width: 22px; font-size: var(--text-sm); font-weight: 800; color: var(--color-text-muted); }
.vf-vdp .vf-vdp-feature__label { flex: 1; min-width: 0; font-size: var(--text-base); font-weight: 600; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-feature__tab.is-on .vf-vdp-feature__num { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-feature__tab.is-on .vf-vdp-feature__label { font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-feature__nav { display: flex; align-items: center; gap: 12px; }
.vf-vdp .vf-vdp-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vf-vdp .vf-vdp-round svg { stroke: var(--color-text-heading); }
.vf-vdp .vf-vdp-round:hover { border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-round.is-primary { border: none; background: var(--color-cta-primary); }
.vf-vdp .vf-vdp-round.is-primary svg { stroke: var(--color-text-inverse); }
.vf-vdp .vf-vdp-round.is-primary:hover { background: var(--color-cta-hover); }
.vf-vdp .vf-vdp-feature__more { margin-left: auto; font-size: var(--text-sm); font-weight: 700; padding: 12px 0; }
.vf-vdp .vf-vdp-feature__media { position: relative; min-height: 420px; overflow: hidden; }
.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: 3px; background: rgba(11, 26, 48, .08); }
.vf-vdp .vf-vdp-feature__progress div { height: 100%; background: var(--color-cta-primary); transition: width .5s; }

.vf-vdp .vf-vdp-slide { flex: 0 0 auto; min-width: 0; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 32px; }
.vf-vdp .vf-vdp-slide--image { padding: 40px 32px; }
.vf-vdp .vf-vdp-slide--dims { flex-direction: column; gap: 24px; padding: 40px 32px; }
.vf-vdp .vf-vdp-slide__img { position: relative; width: 100%; max-width: 560px; height: auto; max-height: 100%; object-fit: contain; border-radius: 12px; }
.vf-vdp .vf-vdp-slide--dims .vf-vdp-slide__img { max-height: 70%; }
.vf-vdp .vf-vdp-slide__bgtext { position: absolute; top: 32px; left: 32px; font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; color: rgba(11, 26, 48, .07); text-transform: uppercase; }
.vf-vdp .vf-vdp-slide__dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; }
.vf-vdp .vf-vdp-dim { background: var(--color-surface-elevated); border-radius: 12px; padding: 12px 16px; }
.vf-vdp .vf-vdp-dim__label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: 400; }
.vf-vdp .vf-vdp-dim__value { font-size: var(--text-lg); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-slide__empty { width: 100%; height: 100%; border-radius: 16px; background: var(--color-surface-elevated); display: flex; align-items: center; justify-content: center; }
.vf-vdp .vf-vdp-slide__empty span { 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: 12px; width: 100%; align-content: center; }
.vf-vdp .vf-vdp-tile { border: 2px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: var(--color-surface-elevated); cursor: pointer; text-align: left; }
.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 .vf-vdp-tile__sw img { height: 100%; object-fit: cover; }
.vf-vdp .vf-vdp-tile__name { display: block; padding: 8px 10px; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-slide__incolors { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }
.vf-vdp .vf-vdp-incolor { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 160px; text-align: center; }
.vf-vdp .vf-vdp-incolor__sw { width: 140px; height: 96px; border-radius: 12px; box-shadow: var(--shadow-md); }
.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: -8px; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-secondary); }

/* ── 05 Điểm nổi bật ────────────────────────────────────────── */
.vf-vdp .vf-vdp-usp {
  background: var(--color-surface-dark);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.vf-vdp .vf-vdp-usp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 320px;
  background: radial-gradient(ellipse at top, rgba(20, 100, 244, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.vf-vdp .vf-vdp-usp .vf-vdp-wrap {
  display: flex;
  flex-direction: column;
  gap: 44px;
  position: relative;
  z-index: 1;
}
.vf-vdp .vf-vdp-usp__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

/* Grid layout: Desktop 3 cards 1 dòng */
.vf-vdp .vf-vdp-usp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1023px) {
  .vf-vdp .vf-vdp-usp__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 639px) {
  .vf-vdp .vf-vdp-usp__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Thẻ điểm nổi bật phong cách cao cấp */
.vf-vdp .vf-vdp-usp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  border-radius: var(--radius-xl, 16px);
  background: linear-gradient(170deg, rgba(19, 36, 61, 0.95) 0%, rgba(11, 24, 44, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 10, 30, 0.45);
  transition: transform var(--transition-base, .25s ease),
              border-color var(--transition-base, .25s ease),
              box-shadow var(--transition-base, .25s ease),
              background var(--transition-base, .25s ease);
  overflow: hidden;
}
.vf-vdp .vf-vdp-usp__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25) 30%, rgba(20, 100, 244, 0.6) 70%, transparent);
  opacity: 0.5;
  transition: opacity var(--transition-base, .25s ease);
}
.vf-vdp .vf-vdp-usp__card:hover {
  transform: translateY(-5px);
  border-color: rgba(20, 100, 244, 0.45);
  box-shadow: 0 16px 36px -8px rgba(0, 10, 30, 0.7),
              0 0 24px -4px rgba(20, 100, 244, 0.25);
  background: linear-gradient(170deg, rgba(24, 46, 77, 0.98) 0%, rgba(13, 28, 51, 0.99) 100%);
}
.vf-vdp .vf-vdp-usp__card:hover::before {
  opacity: 1;
}

/* Phần trên: Chỉ số + Đơn vị + Số thứ tự */
.vf-vdp .vf-vdp-usp__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.vf-vdp .vf-vdp-usp__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vf-vdp .vf-vdp-usp__num {
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 40%, #D8E7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vf-vdp .vf-vdp-usp__num.is-long {
  font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.25rem);
}
.vf-vdp .vf-vdp-usp__unit {
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  line-height: 1;
  color: #8FC0FF;
  padding: 4px 8px;
  background: rgba(20, 100, 244, 0.16);
  border: 1px solid rgba(20, 100, 244, 0.3);
  border-radius: var(--radius-sm, 6px);
  letter-spacing: 0.02em;
}
.vf-vdp .vf-vdp-usp__badge {
  font-size: var(--text-xs, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--transition-base, .25s ease), border-color var(--transition-base, .25s ease);
}
.vf-vdp .vf-vdp-usp__card:hover .vf-vdp-usp__badge {
  color: #8FC0FF;
  border-color: rgba(20, 100, 244, 0.3);
}

/* Thanh phân cách gradient */
.vf-vdp .vf-vdp-usp__bar {
  height: 2px;
  width: 36px;
  background: linear-gradient(90deg, var(--color-cta-primary), var(--color-brand-electric, #00A3FF));
  border-radius: 2px;
  transition: width var(--transition-base, .25s ease);
}
.vf-vdp .vf-vdp-usp__card:hover .vf-vdp-usp__bar {
  width: 54px;
}

/* Nội dung văn bản */
.vf-vdp .vf-vdp-usp__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vf-vdp .vf-vdp-usp__text h3 {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}
.vf-vdp .vf-vdp-usp__text p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--color-text-on-dark, #B4C0D0);
  margin: 0;
  text-wrap: pretty;
}

/* ── 06–07 Thông số & Bảng giá (thu gọn được) ────────────────── */
.vf-vdp .vf-vdp-acc-sec.is-specs { padding: var(--space-8) 0 var(--space-4); }
.vf-vdp .vf-vdp-acc-sec.is-prices { padding: var(--space-8) 0 var(--space-16); }
.vf-vdp .vf-vdp-acc__h { margin: 0; font-size: inherit; }
.vf-vdp .vf-vdp-acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; padding: 0 0 20px; text-align: left; }
.vf-vdp .vf-vdp-acc__btn > span:first-child { flex: 1; min-width: 0; font-size: var(--font-size-title); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-acc__icon { font-size: var(--text-2xl); color: var(--color-text-muted); font-weight: 700; line-height: 1; }
.vf-vdp .vf-vdp-acc__btn .vf-vdp-acc__icon::after { content: '−'; }
.vf-vdp .vf-vdp-acc__btn[aria-expanded="false"] .vf-vdp-acc__icon::after { content: '+'; }
.vf-vdp .vf-vdp-acc__body[hidden] { display: none; }
/* 1 phiên bản: tiêu đề, bảng và ghi chú cùng một cột 720px, căn giữa. */
.vf-vdp .vf-vdp-acc-sec:has(.is-single, .is-n1) .vf-vdp-wrap > * { max-width: 720px; margin-inline: auto; }
.vf-vdp .vf-vdp-table-wrap { position: relative; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; overflow-x: auto; container-type: inline-size; }
/* Scroll indicator — gradient bên phải gợi ý còn nội dung bên phải */
.vf-vdp .vf-vdp-table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.92));
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s;
  z-index: 2;
}
.vf-vdp .vf-vdp-table-wrap.is-scrolled-end::after { opacity: 0; }
.vf-vdp .vf-vdp-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 560px; margin: 0; border: 0; }
.vf-vdp .vf-vdp-table th, .vf-vdp .vf-vdp-table td { text-align: left; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-table thead th { background: var(--color-surface-soft); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-table thead th:first-child { width: 30%; border-right: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-table thead th:not(:first-child) { text-align: center; border-left: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-table tbody th { color: var(--color-text-heading); font-weight: 600; border-right: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-table tbody td { color: var(--color-text-body); text-align: center; border-left: 1px solid var(--color-border); transition: background-color var(--transition-fast, .15s ease); }

/* Ô thông số gom chung giữa các phiên bản */
.vf-vdp .vf-vdp-table tbody td.vf-vdp-table__cell--merged {
  text-align: center;
  color: var(--color-text-heading);
  font-weight: 600;
  background-color: var(--color-surface);
}
.vf-vdp .vf-vdp-table tbody td.vf-vdp-table__cell--merged.is-all {
  letter-spacing: .01em;
}

/* Hàng thông số có sự khác biệt giữa các phiên bản */
.vf-vdp .vf-vdp-table tbody tr.is-diff-row {
  background-color: rgba(20, 100, 244, .025);
}
.vf-vdp .vf-vdp-table tbody tr.is-diff-row th[scope="row"] {
  font-weight: 700;
  color: var(--color-text-heading);
}
.vf-vdp .vf-vdp-table tbody tr.is-diff-row td.is-diff-cell {
  font-weight: 700;
  color: var(--color-text-heading);
  background-color: rgba(20, 100, 244, .02);
}

/* Hiệu ứng rê chuột trên hàng */
.vf-vdp .vf-vdp-table tbody tr:not(.vf-vdp-table__group):hover th[scope="row"],
.vf-vdp .vf-vdp-table tbody tr:not(.vf-vdp-table__group):hover td {
  background-color: rgba(20, 100, 244, .05);
}

/* Nhóm thông số kiểu accordion: thanh tiêu đề bấm được, mũi tên xoay khi mở. */
.vf-vdp .vf-vdp-table__group th { padding: 0; background: var(--color-surface-soft); border-right: 0; }
/* 1 phiên bản: khung .vf-vdp-acc-sec giới hạn bề rộng, cột tên 50%. */
.vf-vdp .vf-vdp-table-wrap.is-single .vf-vdp-table thead th:first-child { width: 50%; }
.vf-vdp .vf-vdp-table:not(:has(thead th:nth-child(3))) { min-width: 0; }
.vf-vdp .vf-vdp-table__toggle { position: sticky; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100cqw; box-sizing: border-box; min-height: 52px; padding: 12px 20px; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--text-base); font-weight: 800; text-align: left; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-table__toggle:hover { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-table__chev { flex: none; font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--color-brand-primary); }
.vf-vdp .vf-vdp-table__chev::after { content: '+'; }
.vf-vdp .vf-vdp-table__toggle[aria-expanded="true"] .vf-vdp-table__chev::after { content: '−'; }
.vf-vdp .vf-vdp-table tbody:last-child .vf-vdp-table__group th { border-bottom: 0; }
.vf-vdp .vf-vdp-table tr[hidden] { display: none; }

/* Cột tên thông số bám mép trái khi cuộn ngang bảng nhiều phiên bản. */
.vf-vdp .vf-vdp-table thead th:first-child, .vf-vdp .vf-vdp-table tbody th[scope="row"] { position: sticky; left: 0; background: var(--color-surface); }
.vf-vdp .vf-vdp-table thead th:first-child { background: var(--color-surface-soft); }
/* Di động: cột tên thông số hẹp, cố định bên trái; các cột phiên bản có bề rộng tối thiểu và cuộn ngang bên dưới. */
@media (max-width: 639px) {
  .vf-vdp .vf-vdp-table:has(thead th:nth-child(3)) { width: max-content; min-width: 100%; }
  .vf-vdp .vf-vdp-table thead th:first-child, .vf-vdp .vf-vdp-table tbody th[scope="row"] { width: 132px; min-width: 132px; max-width: 132px; padding: 12px 10px 12px 16px; font-size: var(--text-sm); line-height: 1.35; box-shadow: 1px 0 0 var(--color-border); z-index: 1; }
  .vf-vdp .vf-vdp-table td, .vf-vdp .vf-vdp-table thead th:not(:first-child) { min-width: 116px; max-width: 160px; padding: 12px 14px; white-space: normal; }
  .vf-vdp .vf-vdp-table td.vf-vdp-table__cell--merged { min-width: 232px; max-width: none; }
}
.vf-vdp .vf-vdp-table tbody:last-child tr:last-child > * { border-bottom: 0; }

.vf-vdp .vf-vdp-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding-top: 12px; }
/* 1 phiên bản dùng khung .vf-vdp-acc-sec; 2 → 820px, từ 3 → 100%. */
.vf-vdp .vf-vdp-prices.is-n2 { max-width: 820px; }
.vf-vdp .vf-vdp-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 16px;
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.vf-vdp .vf-vdp-price.is-on { border-color: var(--color-cta-primary); box-shadow: 0 12px 32px rgba(20, 100, 244, .14); }
.vf-vdp .vf-vdp-price__badge { position: absolute; top: -12px; left: 24px; background: var(--color-text-heading); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.vf-vdp .vf-vdp-price__head { display: flex; flex-direction: column; gap: 6px; }
.vf-vdp .vf-vdp-price__head h3 { font-size: var(--text-lg); font-weight: 800; color: var(--color-text-heading); line-height: 1.3; text-wrap: pretty; }
.vf-vdp .vf-vdp-price__vat { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-price__amount { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-3xl); font-weight: 800; color: var(--color-text-heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.vf-vdp .vf-vdp-price__amount .vf-vdp-price__unit { font-size: var(--text-sm); font-weight: 700; }
.vf-vdp .vf-vdp-price__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-price__specs div { display: flex; flex-direction: column; gap: 2px; }
.vf-vdp .vf-vdp-price__specs dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-price__specs dd { font-size: var(--text-base); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-price__features { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vf-vdp .vf-vdp-price__features li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); color: var(--color-text-body); line-height: 1.5; }
.vf-vdp .vf-vdp-price__features svg { flex-shrink: 0; margin-top: 2px; stroke: var(--color-text-muted); }
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-price__features li { font-size: var(--text-sm); }
}
.vf-vdp .vf-vdp-price__actions { display: flex; flex-direction: column; gap: 8px; }
.vf-vdp .vf-vdp-price__cta { display: flex; justify-content: center; align-items: center; min-height: 48px; border-radius: 10px; background: var(--color-surface-elevated); color: var(--color-text-heading); border: 1.5px solid var(--color-border-strong); font-size: var(--text-base); font-weight: 800; }
.vf-vdp .vf-vdp-price__cta:hover { border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-price.is-on .vf-vdp-price__cta { background: var(--color-cta-primary); color: var(--color-text-inverse); border-color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-prices__note { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); margin-top: 12px; }

/* ── Module Dự toán tài chính trên VDP ──────────────────────── */
.vf-vdp .vf-vdp-finance-bar {
  margin-top: var(--space-8);
  padding: 24px 28px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.vf-vdp .vf-vdp-finance-bar__content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.vf-vdp .vf-vdp-finance-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
  color: var(--color-cta-primary);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20, 100, 244, 0.08);
}
.vf-vdp .vf-vdp-finance-bar__text {
  min-width: 0;
}
.vf-vdp .vf-vdp-finance-bar__title {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.35;
}
.vf-vdp .vf-vdp-finance-bar__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.vf-vdp .vf-vdp-finance-bar__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn {
  height: 46px;
  padding: 0 20px;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 8px;
  gap: 8px;
  min-width: 195px;
  box-sizing: border-box;
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn:hover svg {
  transform: translateX(3px);
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn.is-primary {
  background: var(--color-cta-primary);
  color: #ffffff;
  border: 1.5px solid var(--color-cta-primary);
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn.is-primary:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 100, 244, 0.25);
  transform: translateY(-1px);
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn.is-outline {
  background: #ffffff;
  color: var(--color-cta-primary);
  border: 1.5px solid var(--color-cta-primary);
}
.vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn.is-outline:hover {
  background: #ffffff;
  color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  box-shadow: 0 4px 12px rgba(20, 100, 244, 0.15);
  transform: translateY(-1px);
}

@media (max-width: 1120px) {
  .vf-vdp .vf-vdp-finance-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    gap: 16px;
  }
  .vf-vdp .vf-vdp-finance-bar__content {
    width: 100%;
  }
  .vf-vdp .vf-vdp-finance-bar__ctas {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .vf-vdp .vf-vdp-finance-bar {
    padding: 18px 16px;
    border-radius: var(--radius-lg);
  }
  .vf-vdp .vf-vdp-finance-bar__content {
    align-items: flex-start;
    gap: 12px;
  }
  .vf-vdp .vf-vdp-finance-bar__icon {
    width: 42px;
    height: 42px;
    margin-top: 2px;
  }
  .vf-vdp .vf-vdp-finance-bar__title {
    font-size: 1rem;
  }
  .vf-vdp .vf-vdp-finance-bar__ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .vf-vdp .vf-vdp-finance-bar__ctas .vf-vdp-btn {
    width: 100%;
    height: 44px;
    font-size: var(--text-sm);
  }
}

/* ── 07b Xe thực tế ─────────────────────────────────────────── */
.vf-vdp .vf-vdp-real { padding: 64px 0; background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-real__title { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text-heading); line-height: 1.3; margin-bottom: var(--space-6); }
.vf-vdp .vf-vdp-real__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.vf-vdp .vf-vdp-real__item { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); }
.vf-vdp .vf-vdp-real__figure { margin: 0; width: 100%; height: 100%; display: block; }
.vf-vdp .vf-vdp-real__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-real { padding: 40px 0; }
  .vf-vdp .vf-vdp-real__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* ── 08 Đại lý + form ───────────────────────────────────────── */
.vf-vdp .vf-vdp-dealer { background: var(--color-surface-dark); padding: 72px 0; }
.vf-vdp .vf-vdp-dealer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vf-vdp .vf-vdp-dealer__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vf-vdp .vf-vdp-dealer__side .vf-advisor { margin: 0; }
.vf-vdp .vf-vdp-dealer__card { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.vf-vdp .vf-vdp-dealer__photo { position: relative; aspect-ratio: 16 / 8; background: var(--color-brand-deep); }
.vf-vdp .vf-vdp-dealer__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-vdp .vf-vdp-dealer__body { padding: 32px; }
.vf-vdp .vf-vdp-dealer__title { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text-heading); line-height: 1.3; margin-bottom: 10px; }
.vf-vdp .vf-vdp-dealer__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 20px; }
.vf-vdp .vf-vdp-dealer__addr { display: flex; gap: 12px; align-items: flex-start; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; }
.vf-vdp .vf-vdp-dealer__addr svg { flex-shrink: 0; margin-top: 2px; }
.vf-vdp .vf-vdp-dealer__addr address { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.vf-vdp .vf-vdp-dealer__addr strong { font-size: var(--text-sm); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-dealer__addr span { font-size: var(--text-sm); color: var(--color-text-secondary); }
@media (min-width: 1024px) {
  /* Cột trái (thẻ đại lý + thẻ người tư vấn) dính khi cuộn qua form dài ở cột phải. */
  .vf-vdp .vf-vdp-dealer__side {
    position: sticky;
    top: calc(var(--vdp-top) + var(--vdp-subnav) + 24px);
    align-self: start;
  }
  .vf-vdp .vf-vdp-dealer__photo {
    aspect-ratio: 16 / 7;
    max-height: 200px;
  }
  .vf-vdp .vf-vdp-dealer__body {
    padding: 24px;
  }
}

.vf-vdp .vf-vdp-form { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-top: 4px solid var(--color-cta-primary); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 24px; }
.vf-vdp .vf-vdp-form .vf-vdp-eyebrow { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-full); background: var(--color-brand-tint-soft); color: var(--color-cta-primary); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; }
.vf-vdp .vf-vdp-form__intro { display: flex; flex-direction: column; gap: 8px; }
.vf-vdp .vf-vdp-form__title { font-size: var(--text-2xl); font-weight: 800; line-height: 1.25; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__car { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-soft); }
.vf-vdp .vf-vdp-form__thumb { width: 96px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--color-surface-sunken); flex-shrink: 0; }
.vf-vdp .vf-vdp-form__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vf-vdp .vf-vdp-form__car-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vf-vdp .vf-vdp-form__car-text strong { font-size: var(--text-base); font-weight: 800; 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__muted { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-form__change { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--color-cta-primary); border-radius: 8px; background: var(--color-surface-elevated); font-size: var(--text-sm); font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-form__change[aria-expanded="true"] { background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-vdp .vf-vdp-form__carpick { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; margin-top: -12px; }
.vf-vdp .vf-vdp-form__carpick[hidden] { display: none; }
.vf-vdp .vf-vdp-form__field { display: flex; flex-direction: column; gap: 8px; }
.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); }
.vf-vdp .vf-vdp-pill {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-elevated);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-body);
}
.vf-vdp .vf-vdp-pill.is-tall { min-height: 52px; padding: 0 16px; }
.vf-vdp .vf-vdp-pill.is-on { border-color: var(--color-cta-primary); background: var(--color-brand-tint-soft); color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-pill__price { font-size: var(--text-base); font-weight: 800; color: var(--color-cta-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.vf-vdp .vf-vdp-form__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px; background: var(--color-success-bg); border-radius: 12px; }
.vf-vdp .vf-vdp-form__done[hidden] { display: none; }
.vf-vdp .vf-vdp-form__done:focus { outline: none; }
.vf-vdp .vf-vdp-form__done-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-success); display: flex; align-items: center; justify-content: center; }
.vf-vdp .vf-vdp-form__done strong { font-size: var(--text-lg); font-weight: 800; color: var(--color-success-strong); }
.vf-vdp .vf-vdp-form__done p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-form__again { background: none; border: none; font-size: var(--text-sm); font-weight: 700; cursor: pointer; color: var(--color-cta-primary); }

.vf-vdp .vf-vdp-form__flow { display: flex; flex-direction: column; gap: 24px; }
.vf-vdp .vf-vdp-form__flow[hidden] { display: none; }
.vf-vdp .vf-vdp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vf-vdp .vf-vdp-step { display: flex; flex-direction: column; gap: 8px; }
.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: 8px; }
.vf-vdp .vf-vdp-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--color-border); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vf-vdp .vf-vdp-step__label { font-size: var(--text-sm); font-weight: 700; 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__label { color: var(--color-text-heading); }

.vf-vdp .vf-vdp-form__step { display: flex; flex-direction: column; gap: 12px; }
.vf-vdp .vf-vdp-form__step[data-step="2"] { gap: 20px; }
.vf-vdp .vf-vdp-form__step[data-step="3"] { gap: 16px; }
.vf-vdp .vf-vdp-form__step[hidden], .vf-vdp .vf-vdp-form__field[hidden] { display: none; }
.vf-vdp .vf-vdp-intent {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-elevated);
  cursor: pointer;
  text-align: left;
}
.vf-vdp .vf-vdp-intent:hover { border-color: var(--color-cta-primary); }
.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 { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.vf-vdp .vf-vdp-intent strong { font-size: var(--text-base); font-weight: 800; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-intent > span > span { font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-intent svg { flex-shrink: 0; }
.vf-vdp .vf-vdp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; background: var(--color-surface-sunken); border-radius: 8px; }
.vf-vdp .vf-vdp-seg button { height: 40px; border: none; border-radius: 6px; background: transparent; font-size: var(--text-sm); font-weight: 700; cursor: pointer; color: var(--color-text-secondary); }
.vf-vdp .vf-vdp-seg button.is-on { background: var(--color-surface-elevated); color: var(--color-cta-primary); box-shadow: var(--shadow-sm); }
.vf-vdp .vf-vdp-form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.vf-vdp .vf-vdp-form__field[data-when="drive"] { gap: 16px; }
.vf-vdp .vf-vdp-input { height: 48px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: var(--text-base); color: var(--color-text-body); background: var(--color-surface-elevated); outline: none; width: 100%; font-family: inherit; }
/* Ô chọn: bỏ mũi tên mặc định của trình duyệt (dính sát mép phải) và vẽ chevron riêng cách mép phải 14px,
   bằng lề trong của ô. Màu nét #4a5568 = --color-text-secondary (data-URI không dùng được var()). */
.vf-vdp select.vf-vdp-input {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.vf-vdp .vf-vdp-input:focus { border-color: var(--color-cta-primary); box-shadow: 0 0 0 3px var(--color-brand-tint-soft); }
.vf-vdp .vf-vdp-input[aria-invalid="true"] { border-color: var(--color-error); }
.vf-vdp .vf-vdp-form__err { font-size: var(--text-sm); color: var(--color-error); }
.vf-vdp .vf-vdp-form__err:empty { display: none; }
.vf-vdp .vf-vdp-form__summary { padding: 12px 16px; border-radius: 10px; background: var(--color-brand-tint-soft); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-form__btns { display: flex; gap: 12px; }
.vf-vdp .vf-vdp-form__legal { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); text-align: center; }

.vf-vdp .vf-vdp-faq { padding: 64px 0; }
.vf-vdp .vf-vdp-faq .vf-vdp-wrap { max-width: 880px; }
.vf-vdp .vf-vdp-faq .vf-vdp-h3 { margin-bottom: 24px; }
.vf-vdp .vf-vdp-faq__item { border-bottom: 1px solid var(--color-border); }
.vf-vdp .vf-vdp-faq__item summary { padding: 18px 4px; cursor: pointer; color: var(--color-text-heading); font-size: var(--text-lg); font-weight: 700; }
.vf-vdp .vf-vdp-faq__q { display: inline; font: inherit; color: inherit; margin: 0; padding: 0; }
.vf-vdp .vf-vdp-faq__item summary:hover,
.vf-vdp .vf-vdp-faq__item summary:focus { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-faq__item p { padding: 0 4px 20px; color: var(--color-text-secondary); line-height: 1.65; }

/* ── 09 Kiến thức · 10 Khám phá thêm ─────────────────────────── */
.vf-vdp .vf-vdp-posts { padding: 72px 0 0; }
.vf-vdp .vf-vdp-posts__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.vf-vdp .vf-vdp-link { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.vf-vdp .vf-vdp-posts__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.vf-vdp .vf-vdp-more { padding: 72px 0; }
.vf-vdp .vf-vdp-more .vf-vdp-h3 { margin-bottom: 28px; }
.vf-vdp .vf-vdp-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vf-vdp .vf-vdp-more__card { display: block; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; 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 { aspect-ratio: 3 / 2; background: var(--color-surface-sunken); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vf-vdp .vf-vdp-more__img img { width: 90%; height: auto; }
.vf-vdp .vf-vdp-more__name { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; }
.vf-vdp .vf-vdp-more__meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 4px; }
.vf-vdp .vf-vdp-more__price { color: var(--color-brand-primary); font-weight: 700; }

/* ── Video ──────────────────────────────────────────────────── */
.vf-vdp .vf-video-modal { position: fixed; inset: 0; z-index: var(--z-modal); align-items: center; justify-content: center; padding: 24px; }
.vf-vdp .vf-video-modal__backdrop { position: absolute; inset: 0; background: var(--color-overlay-dark); }
.vf-vdp .vf-video-modal__container { position: relative; width: 100%; max-width: 960px; }
.vf-vdp .vf-video-modal__close { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--color-surface-elevated); color: var(--color-text-heading); font-size: var(--text-2xl); line-height: 1; cursor: pointer; }
.vf-vdp .vf-video-modal__iframe-wrap { aspect-ratio: 16 / 9; background: var(--color-neutral-black); border-radius: 12px; overflow: hidden; }
.vf-vdp .vf-video-modal__iframe-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-faq { padding: 40px 0; }
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vf-vdp .vf-vdp-hero { padding-top: 16px; }
  .vf-vdp .vf-vdp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .vf-vdp .vf-vdp-gallery { position: static; }
  .vf-vdp .vf-vdp-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vf-vdp .vf-vdp-metric { padding: 14px; flex-direction: column; gap: 10px; }
  .vf-vdp .vf-vdp-feature { padding-bottom: 40px; }
  .vf-vdp .vf-vdp-feature__box, .vf-vdp .vf-vdp-feature__box.is-flip { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .vf-vdp .vf-vdp-feature__box.is-flip .vf-vdp-feature__text { order: 0; }
  .vf-vdp .vf-vdp-feature__text { padding: 24px 20px; }
  .vf-vdp .vf-vdp-feature__media { min-height: 300px; }
  .vf-vdp .vf-vdp-feature__desc { min-height: 0; }
  .vf-vdp .vf-vdp-usp, .vf-vdp .vf-vdp-dealer, .vf-vdp .vf-vdp-more { padding-top: 48px; padding-bottom: 48px; }
  .vf-vdp .vf-vdp-posts { padding-top: 48px; }
  .vf-vdp .vf-vdp-dealer__grid { grid-template-columns: minmax(0, 1fr); }
  .vf-vdp .vf-vdp-dealer__card { position: static; }
  .vf-vdp .vf-vdp-dealer__body, .vf-vdp .vf-vdp-form { padding: 20px; }
  .vf-vdp .vf-vdp-form { gap: 16px; }
  .vf-vdp .vf-vdp-form__thumb { width: 80px; height: 54px; }
  .vf-vdp .vf-vdp-form__car { gap: 12px; padding: 10px 12px; }
  .vf-vdp .vf-vdp-form__car-text { gap: 0; }
  .vf-vdp .vf-vdp-form__legal { font-size: 0.8125rem; }
  .vf-vdp .vf-vdp-form__two { grid-template-columns: minmax(0, 1fr); }
  .vf-vdp .vf-vdp-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vf-vdp .vf-vdp-price { padding: 20px; }
}
@media (min-width: 768px) {
  .vf-vdp .vf-vdp-hero__grid { gap: 24px; }
}
@media (min-width: 1024px) {
  .vf-vdp .vf-vdp-hero__grid { gap: 48px; }
}
/* Trình chiếu trên điện thoại: ảnh lên trên, vuốt ngang đổi slide, tab thu thành chip số; cả khối vừa một màn hình. */
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-feature__media { order: -1; min-height: 0; height: calc((100vw - 64px) * 9 / 16 + 32px); /* ảnh 16:9 + padding 16px đều 4 phía */ touch-action: pan-y; }
  .vf-vdp .vf-vdp-slide, .vf-vdp .vf-vdp-slide--image, .vf-vdp .vf-vdp-slide--dims { padding: 16px; }
  .vf-vdp .vf-vdp-slide--image .vf-vdp-slide__img { aspect-ratio: 16 / 9; object-fit: cover; } /* ảnh khác tỉ lệ vẫn đủ padding 4 phía */
  /* Slide kích thước: ảnh co theo chỗ còn lại, 3 số đo gọn một hàng, không cuộn. */
  .vf-vdp .vf-vdp-slide--dims { gap: 10px; }
  .vf-vdp .vf-vdp-slide--dims .vf-vdp-slide__img { flex: 1 1 0; min-height: 0; max-height: none; }
  .vf-vdp .vf-vdp-slide__dims { gap: 8px; }
  .vf-vdp .vf-vdp-dim { padding: 8px 10px; border-radius: 10px; }
  .vf-vdp .vf-vdp-dim__label { font-size: var(--text-xs); }
  .vf-vdp .vf-vdp-dim__value { font-size: var(--text-base); white-space: nowrap; }
  /* Slide màu: lưới 3 cột nhỏ gọn; nếu nhiều màu quá thì cuộn dọc trong khung. */
  .vf-vdp .vf-vdp-slide--colors, .vf-vdp .vf-vdp-slide--in_colors { overflow-y: auto; }
  .vf-vdp .vf-vdp-slide__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vf-vdp .vf-vdp-tile__sw { aspect-ratio: 4 / 3; }
  .vf-vdp .vf-vdp-tile__name { padding: 4px 6px; font-size: var(--text-xs); }
  .vf-vdp .vf-vdp-slide__incolors { gap: 12px; }
  .vf-vdp .vf-vdp-incolor { gap: 6px; max-width: 100px; }
  .vf-vdp .vf-vdp-incolor__sw { width: 72px; height: 48px; }
  .vf-vdp .vf-vdp-incolor__name, .vf-vdp .vf-vdp-incolor__note { font-size: var(--text-xs); }
  .vf-vdp .vf-vdp-feature__text { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 20px; }
  .vf-vdp .vf-vdp-feature__intro { grid-column: 1 / -1; }
  .vf-vdp .vf-vdp-feature__intro .vf-vdp-h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2lh; }
  .vf-vdp .vf-vdp-feature__desc { font-size: var(--text-sm); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 0; }
  .vf-vdp .vf-vdp-feature__tabs { flex-direction: row; gap: 8px; border-top: 0; }
  .vf-vdp .vf-vdp-feature__tab { width: 44px; height: 44px; padding: 0; justify-content: center; border: 1.5px solid var(--color-border-strong); border-radius: 50%; }
  .vf-vdp .vf-vdp-feature__tab::after { display: none; }
  .vf-vdp .vf-vdp-feature__tab.is-on { background: var(--color-text-heading); border-color: var(--color-text-heading); }
  .vf-vdp .vf-vdp-feature__tab.is-on .vf-vdp-feature__num { color: var(--color-text-inverse); }
  .vf-vdp .vf-vdp-feature__num { width: auto; }
  .vf-vdp .vf-vdp-feature__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vf-vdp .vf-vdp-feature__nav [data-slide-prev], .vf-vdp .vf-vdp-feature__nav [data-slide-next] { display: none; }
}

/* Mobile: subnav gọn hơn để lộ nhiều mục hơn; ẩn tên xe ở máy rất hẹp (H1 đã có tên). */
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-subnav__inner { gap: 12px; padding-top: 6px; }
  .vf-vdp .vf-vdp-subnav__link { font-size: var(--text-sm); padding: 0 10px; }
  .vf-vdp .vf-vdp-subnav__next { width: 32px; height: 32px; margin-left: -4px; }
}
@media (max-width: 479px) {
  .vf-vdp .vf-vdp-subnav__name,
  .vf-vdp .vf-vdp-subnav__sep { display: none; }
}
@media (max-width: 479px) {
  .vf-vdp .vf-vdp-buy .vf-vdp-btn, .vf-vdp .vf-vdp-select__btn { min-height: 48px; }
}

/* Bảng thông số kỹ thuật: khung cuộn trong, tiêu đề cột dính trên. KHÔNG đặt overscroll-behavior: contain —
   nó chặn cuộn lan ra trang khi bảng đã hết, khiến trang khựng lại trên điện thoại. */
.vf-vdp .vf-vdp-table-wrap { max-height: min(640px, 75svh); overflow-y: auto; overscroll-behavior: auto; }
.vf-vdp .vf-vdp-table thead th { position: sticky; top: 0; z-index: 3; }
.vf-vdp .vf-vdp-table thead th:first-child { z-index: 4; }
.vf-vdp .vf-vdp-table td, .vf-vdp .vf-vdp-table tbody th[scope="row"] { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 767px) {
  .vf-vdp .vf-vdp-table-wrap { max-height: 60svh; }
}
.vf-vdp .vf-vdp-table thead th, .vf-vdp .vf-vdp-table thead th:first-child { background: var(--color-surface-dark); color: var(--color-surface-elevated); border-color: rgba(255, 255, 255, .14); }

/* Form nhanh 2 trường (template-parts/forms/quick-lead.php) + bước bổ sung thông tin. */
.vf-vdp .vf-qf__form, .vf-vdp .vf-qf__more form { display: flex; flex-direction: column; gap: var(--space-3); }
.vf-vdp .vf-qf__form[hidden], .vf-vdp .vf-qf__more[hidden] { display: none; }
.vf-vdp .vf-qf__intents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vf-vdp .vf-qf__submit { width: 100%; }
.vf-vdp .vf-qf__more { display: flex; flex-direction: column; gap: 14px; }
.vf-vdp .vf-qf__more:focus { outline: none; }
.vf-vdp .vf-qf__ok { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--color-success-bg); border-radius: 12px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-body); }
.vf-vdp .vf-qf__ok .vf-vdp-form__done-icon { width: 32px; height: 32px; flex-shrink: 0; }
.vf-vdp .vf-qf__ok strong { color: var(--color-success-strong); }
.vf-vdp .vf-qf__hint { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.vf-vdp .vf-vdp-seg button:hover { color: var(--color-cta-primary); }
.vf-vdp .vf-vdp-seg button:focus-visible { outline: 2px solid var(--color-cta-primary); outline-offset: 2px; }
.vf-form-embed { background: transparent; }