/* ============================================================
   Honda — CSS trang ĐĂNG KÝ LÁI THỬ (/dang-ky-lai-thu/)
   Enqueue: functions/performance.php khi is_page_template( 'page-dang-ky-lai-thu.php' )
   Nguồn: mockup 22/10/2026. Header/footer dùng chung của site (site-header-footer.css).
   Chỉ dùng token trong design-tokens.css.
   ============================================================ */

.vf-td { background: var(--color-surface); color: var(--color-text-primary); }
.vf-td-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }

/* ── Hero: nền sáng + ảnh đại diện của trang (nếu có) ─── */
.vf-td-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-surface), var(--color-surface-alt)); }
.vf-td-hero__bg { position: absolute; inset: 0; margin: 0; }
.vf-td-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* Lớp phủ sáng để chữ navy đọc rõ; ảnh lộ dần sang phải. Chỉ áp khi có ảnh nền. */
.vf-td-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vf-td-hero--image::before {
  background: linear-gradient(90deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-surface) 90%, transparent) 48%,
    color-mix(in srgb, var(--color-surface) 45%, transparent) 72%,
    color-mix(in srgb, var(--color-surface) 12%, transparent) 100%);
}
.vf-td-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--space-8); max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--container-px) var(--space-16); align-items: start; }
@media (min-width: 768px) { .vf-td-hero__inner { padding-inline: var(--container-px-md); } }
@media (min-width: 1024px) {
  .vf-td-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: var(--space-10); }
}
@media (max-width: 767px) {
  .vf-td-hero--image::before {
    background: linear-gradient(180deg,
      var(--color-surface) 0%,
      color-mix(in srgb, var(--color-surface) 94%, transparent) 55%,
      color-mix(in srgb, var(--color-surface) 80%, transparent) 100%);
  }
}

.vf-td-intro { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }

.vf-td-benefits { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 430px; margin: 0; padding: 0; }
.vf-td-benefits li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-heading); }
.vf-td-benefits svg { flex: none; color: var(--color-cta-primary); }
.vf-td-benefits strong { display: block; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-heading); }
.vf-td-benefits span { display: block; margin-top: var(--space-0-5); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }

/* Card form */
.vf-td-form { min-width: 0; align-self: start; scroll-margin-top: 5rem; padding: 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.vf-td-form > header { margin-bottom: var(--space-5); }
.vf-td-form h2 { margin: 0 0 0.375rem; font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--color-brand-deep); }
.vf-td-form > header p { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.vf-td-form abbr { color: var(--color-error); text-decoration: none; }
.vf-td-form form { display: flex; flex-direction: column; gap: var(--space-5); }
.vf-td-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.vf-td-form label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.vf-td-form label span { color: var(--color-error); }
.vf-td-form label span:not([aria-hidden]) { font-weight: var(--font-normal); color: var(--color-text-secondary); }
.vf-td-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) {
  .vf-td-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vf-td-pair > div, .vf-td-note { display: flex; flex-direction: column; gap: 0.375rem; }

.vf-td-form input:not([type="hidden"], [type="checkbox"], [type="radio"]), .vf-td-form select, .vf-td-form textarea { width: 100%; box-sizing: border-box; height: auto; min-height: 3rem; /* Astra đặt height:40px làm cắt chữ */ padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font: inherit; font-size: var(--text-base); /* 16px: tránh iOS tự zoom */ color: var(--color-text-primary); }
.vf-td-form textarea { resize: vertical; }
.vf-td-form ::placeholder { color: var(--color-text-muted); }
.vf-td-select { position: relative; }
.vf-td-select select { padding-right: 2.5rem; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vf-td-select svg { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-secondary); }
.vf-td-form :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.vf-td-submit { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--color-cta-primary); color: var(--color-text-inverse); font: inherit; font-size: var(--text-lg); font-weight: var(--font-bold); cursor: pointer; box-shadow: none; }
.vf-td-submit:hover { background: var(--color-brand-primary); }
.vf-td-submit:focus { background: var(--color-cta-primary); color: var(--color-text-inverse); box-shadow: none; }
.vf-td-submit:hover:focus { background: var(--color-brand-primary); }
.vf-td-submit:disabled { opacity: .7; cursor: progress; }
.vf-td-consent { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: calc(-1 * var(--space-3)); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-secondary); }
.vf-td-consent input[type="checkbox"] { flex: none; width: 1.125rem; height: 1.125rem; margin: 2px 0 0; accent-color: var(--color-cta-primary); cursor: pointer; }
.vf-td-consent label { font-size: var(--text-sm); font-weight: var(--font-normal); line-height: 1.45; color: var(--color-text-secondary); cursor: pointer; }
.vf-td-consent a { color: var(--color-cta-primary); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
  .vf-td-consent { margin-top: 0; }
}

.vf-td-choice { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.vf-td-form .vf-td-choice label { position: relative; flex: 1 1 8rem; font-weight: var(--font-bold); }
.vf-td-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vf-td-form .vf-td-choice label > span { display: flex; justify-content: center; align-items: center; min-height: 3rem; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-weight: var(--font-bold); }
.vf-td-choice label:hover > span { border-color: var(--color-cta-primary); }
.vf-td-choice input:checked + span { border-color: var(--color-cta-primary); background: var(--color-cta-primary); color: var(--color-text-inverse); }
.vf-td-choice input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.vf-td-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vf-td-error { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-error-bg); color: var(--color-error); font-size: var(--text-sm); }
.vf-td-done { display: flex; align-items: flex-start; gap: 0.875rem; padding: var(--space-5); background: var(--color-hybrid-soft); border: 1px solid color-mix(in srgb, var(--color-hybrid) 18%, transparent); border-radius: var(--radius-lg); color: var(--color-hybrid-strong); }
.vf-td-done[hidden] { display: none; }
.vf-td-done svg { flex-shrink: 0; }
.vf-td-done p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-text-secondary); }
.vf-td-done .vf-td-done__title { margin-bottom: var(--space-1); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-hybrid-strong); }

/* ── Quy trình ────────────────────────────────────────── */
.vf-td-steps { padding-block: var(--block-py); background: var(--color-surface); }
.vf-td-steps header { margin-bottom: var(--space-10); text-align: center; }
.vf-td-steps h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-h2); font-weight: var(--font-weight-display); color: var(--color-brand-deep); }
.vf-td-steps header p { margin: 0; color: var(--color-text-secondary); }
.vf-td-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .vf-td-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .vf-td-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vf-td-steps li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-alt); border-radius: var(--radius-xl); }
.vf-td-steps li > div { display: flex; align-items: center; gap: var(--space-4); color: var(--color-cta-primary); }
.vf-td-steps__n { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-cta-primary); color: var(--color-text-inverse); font-weight: var(--font-bold); }
.vf-td-steps h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.vf-td-steps li p { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-text-secondary); }

/* ── Cam kết khi lái thử ──────────────────────────────── */
.vf-td-promise { padding-bottom: var(--block-py); background: var(--color-surface); }
.vf-td-promise ul { list-style: none; display: grid; gap: var(--space-4); margin: 0; padding: var(--space-6); background: var(--color-surface-alt); border-radius: var(--radius-xl); }
.vf-td-promise li { display: flex; align-items: flex-start; gap: var(--space-3); }
.vf-td-promise li + li { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.vf-td-promise svg { flex: none; color: var(--color-cta-primary); }
.vf-td-promise strong { display: block; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-heading); }
.vf-td-promise span { display: block; margin-top: var(--space-0-5); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
@media (min-width: 900px) {
  .vf-td-promise ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: var(--space-5) var(--space-6); }
  .vf-td-promise li { padding: 0 var(--space-6); }
  .vf-td-promise li:first-child { padding-left: 0; }
  .vf-td-promise li + li { padding-top: 0; border-top: 0; border-left: 1px solid var(--color-border); }
}

/* ── Hỗ trợ ───────────────────────────────────────────── */
.vf-td-help { padding: 1.75rem 0; background: var(--color-hybrid-soft); }
.vf-td-help .vf-td-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-8); }
.vf-td-help__intro { display: flex; align-items: center; gap: var(--space-4); }
.vf-td-help__ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; color: var(--color-cta-primary); }
.vf-td-help h2 { margin: 0 0 var(--space-0-5); font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-brand-deep); }
.vf-td-help p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-td-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.vf-td-help a { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.vf-td-help small { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-td-help__call { padding: var(--space-2) var(--space-1); color: var(--color-cta-primary); }
.vf-td-help__call strong { font-size: var(--text-2xl); color: var(--color-brand-deep); }
.vf-td-help__zalo { padding: 0.625rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-zalo); }
.vf-td-help__zalo:hover { background: var(--color-surface); border-color: var(--color-cta-primary); }
.vf-td-help__zalo strong { display: block; font-size: var(--text-base); color: var(--color-text-primary); }
@media (max-width: 899px) {
  .vf-td-help .vf-td-wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) { html:has(.vf-td) { scroll-behavior: smooth; } }