/* Vehicle catalogue. */
.vf-archive-xe { background: var(--color-surface-alt); }
/* Hero danh mục xe: nền trắng → xanh hybrid nhạt (không dùng tông đỏ nhạt của .vf-hero mặc định). */
.vf-archive-xe .vf-hero { background: linear-gradient(120deg, var(--color-surface), var(--color-hybrid-soft)); }
.vf-archive-xe__catalog { padding-block: var(--block-py); }
@media (min-width: 1024px) {
}
.vf-archive-xe__results { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin: var(--space-10) 0 var(--space-5); }
.vf-archive-xe__results h2 { margin: 0; color: var(--color-text-primary); font-size: var(--text-2xl); letter-spacing: -.035em; font-weight: var(--font-semibold); }
.vf-archive-xe__results p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.vf-archive-xe .vf-vehicle-grid { gap: var(--space-5); }
.vf-archive-xe .vf-card[hidden] { display: none; }
.vf-archive-empty { padding: var(--space-16) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-surface); text-align: center; }
.vf-archive-empty[hidden] { display: none; }
.vf-archive-empty h2, .vf-archive-empty .vf-archive-empty__title { margin: 0 0 var(--space-3); color: var(--color-text-primary); font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.vf-archive-empty p { margin: 0 0 var(--space-5); color: var(--color-text-secondary); }
@media (max-width: 767px) {
  /* Nhãn cùng dòng với hàng chip, chip thấp hơn: hai hàng lọc chỉ chiếm ~90px để danh sách xe lên sớm. */
  .vf-archive-xe__results { align-items: flex-start; flex-direction: column; gap: var(--space-1); margin-top: var(--space-8); }
  .vf-archive-xe__results h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); }
  .vf-archive-xe .vf-vehicle-grid { gap: var(--space-4); }
}

/* Điện thoại: thẻ xe chia 2 cột như trang chủ (cùng cỡ thẻ gọn). */
@media (max-width: 639px) {
  .vf-archive-xe .vf-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .vf-archive-xe .vf-card__body { padding: var(--space-3) var(--space-2); gap: var(--space-1); }
  .vf-archive-xe .vf-card__model { font-size: var(--text-base); }
  .vf-archive-xe .vf-card__price { padding-top: var(--space-2); }
  .vf-archive-xe .vf-card__price strong { font-size: var(--text-sm); }
  .vf-archive-xe .vf-card__actions { padding: 0 var(--space-2) var(--space-3); gap: var(--space-1); }
  .vf-archive-xe .vf-card__action { min-block-size: 44px; padding: var(--space-2); }
}

/* Bước tiếp theo: liên kết tới bảng giá, lăn bánh, so sánh, lái thử. */
.vf-archive-xe__next { padding: 0 0 var(--block-py); }
.vf-archive-xe__next h2 { margin: 0 0 var(--space-5); color: var(--color-text-primary); font-size: var(--text-2xl); letter-spacing: -.035em; font-weight: var(--font-semibold); }
.vf-archive-xe__links { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vf-archive-xe__links a { display: grid; gap: var(--space-1); height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; text-decoration: none; }
.vf-archive-xe__links a:hover, .vf-archive-xe__links a:focus-visible { border-color: var(--color-cta-primary); }
.vf-archive-xe__links strong { color: var(--color-text-primary); font-size: var(--text-base); }
.vf-archive-xe__links span { color: var(--color-text-secondary); font-size: var(--text-sm); }