/* ============================================================
   VinFast — 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: handoff "Đăng ký lái thử v2". 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-alt); color: var(--color-text-primary); }
.vf-td-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }

/* ── Breadcrumb ───────────────────────────────────────── */
.vf-td-crumb { position: relative; z-index: 2; padding-block: var(--space-3); } /* nằm trong hero tối như Liên hệ; lề do .vf-container */

/* ── Hero + form ──────────────────────────────────────── */
.vf-td-hero { position: relative; overflow: hidden; background: var(--color-brand-deep); }
.vf-td-hero__bg { position: absolute; inset: 0; margin: 0; }
.vf-td-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-td-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(0, 29, 78, .92) 0%, rgba(0, 29, 78, .72) 45%, rgba(0, 29, 78, .3) 75%, rgba(0, 29, 78, .12) 100%); }
.vf-td-hero__inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--container-px) var(--space-16); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-10); align-items: start; }

.vf-td-intro { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
@media (min-width: 768px) { .vf-td-hero__inner { padding-inline: var(--container-px-md); } }

.vf-td-benefits { list-style: none; margin: 0; padding: 0; max-width: 720px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-6); }
.vf-td-benefits li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-inverse); }
.vf-td-benefits svg { flex-shrink: 0; }
.vf-td-benefits strong { display: block; font-size: var(--text-base); font-weight: var(--font-extrabold); }
.vf-td-benefits span { display: block; margin-top: var(--space-0-5); font-size: var(--text-sm); line-height: 1.5; color: #E6EEFA; }

/* Card form */
.vf-td-form { min-width: 0; scroll-margin-top: 5rem; padding: 1.75rem; background: var(--color-surface-elevated); border-radius: var(--radius-xl); box-shadow: 0 16px 48px rgba(0, 29, 78, .18), 0 8px 16px rgba(0, 29, 78, .1); }
.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-extrabold); 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 legend { margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-xs); font-weight: var(--font-extrabold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-primary); }
.vf-td-form fieldset > legend + label { margin-top: 0; }
.vf-td-form label { font-size: var(--text-sm); font-weight: var(--font-bold); 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-medium); color: var(--color-text-secondary); }
.vf-td-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }
.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-md); background: var(--color-cta-primary); color: var(--color-text-inverse); font: inherit; font-size: var(--text-lg); font-weight: var(--font-extrabold); cursor: pointer; box-shadow: var(--shadow-brand); }
.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: var(--shadow-brand); }
.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-xs); 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-xs); 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-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-brand-light); border: 1px solid #B9D6FF; border-radius: var(--radius-lg); color: var(--color-brand-primary); }
.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-extrabold); color: var(--color-brand-deep); }

/* ── Quy trình ────────────────────────────────────────── */
.vf-td-steps { padding: var(--space-16) 0; 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-extrabold); 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: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.vf-td-steps li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.vf-td-steps li > div { display: flex; align-items: center; justify-content: space-between; color: var(--color-brand-primary); }
.vf-td-steps__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-brand-primary); color: var(--color-text-inverse); font-weight: var(--font-extrabold); }
.vf-td-steps h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-extrabold); 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); }

/* ── Hỗ trợ ───────────────────────────────────────────── */
.vf-td-help { padding: 1.75rem 0; background: var(--color-brand-light); }
.vf-td-help .vf-td-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-10); }
.vf-td-help h2 { margin: 0 0 var(--space-0-5); font-size: var(--text-lg); font-weight: var(--font-extrabold); 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-4); }
.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-brand-primary); }
.vf-td-help__call strong { font-size: var(--text-lg); color: var(--color-brand-deep); }
.vf-td-help__zalo { padding: 0.625rem 1.125rem; background: var(--color-surface); border: 1.5px solid var(--color-brand-primary); border-radius: var(--radius-md); color: var(--color-zalo); }
.vf-td-help__zalo:hover { background: #F3F8FF; }
.vf-td-help__zalo strong { display: block; font-size: var(--text-base); color: var(--color-text-primary); }

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