/* Trang Liên hệ: dùng token chung, chỉ scope vào trang này. */
.vf-contact-page { background: var(--color-surface-alt); } /* nền xám: hero navy → thẻ trắng/navy nổi lên (cùng hệ trang bài viết) */

.vf-contact-hero { position: relative; color: var(--color-text-inverse); background: linear-gradient(100deg, var(--color-brand-deep) 0%, var(--color-brand-deep-soft) 100%); }
/* Hero navy như Bảng giá/Archive/Bài viết: lề ngang = .vf-container; đáy chừa chỗ cho lưới form + thông tin nổi đè lên. */
.vf-contact-hero__inner { display: flex; flex-direction: column; justify-content: center; max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--container-px) calc(var(--space-12) + var(--space-16)); }
@media (min-width: 768px) { .vf-contact-hero__inner { padding-inline: var(--container-px-md); } }
.vf-contact-hero .vf-hero-title { max-width: 800px; margin-block: 0 var(--space-4); }
.vf-contact-hero .vf-hero-lead { max-width: 640px; margin: 0; }

.vf-contact-answer { margin: var(--space-8) 0 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-hybrid-line); border-radius: var(--radius-lg); background: var(--color-hybrid-soft); color: var(--color-text-primary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.vf-contact-answer a { color: var(--color-hybrid-strong); font-weight: var(--font-bold); text-decoration: underline; text-underline-offset: 2px; }
.vf-contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; margin-top: calc(-1 * var(--space-16)); }
.vf-contact-form-panel, .vf-contact-info { padding: var(--space-8); border-radius: var(--radius-xl); }
.vf-contact-form-panel { min-width: 0; scroll-margin-top: 5rem; background: var(--color-surface-elevated); border: 1px solid var(--color-border); box-shadow: none; }
.vf-contact-form-panel > header { margin-bottom: var(--space-6); }
.vf-contact-form-panel h2, .vf-contact-info h2 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.vf-contact-form-panel > header h2 { color: var(--color-text-display); font-weight: var(--font-semibold); }
.vf-contact-form-panel > header p { margin: 0; color: var(--color-text-secondary); }
.vf-contact-form { display: grid; gap: var(--space-5); }
.vf-contact-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.vf-contact-form__row { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.vf-contact-form label, .vf-contact-form legend { color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.vf-contact-form label > span[aria-hidden] { color: var(--color-error); }
.vf-contact-form__optional { color: var(--color-text-muted); font-weight: var(--font-normal); }
.vf-contact-form input:not([type="radio"], [type="checkbox"]), .vf-contact-form select, .vf-contact-form textarea { display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 3rem; /* Astra đặt height:40px làm cắt chữ */ border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--text-base); /* 16px: tránh iOS tự zoom */ padding: var(--space-3) var(--space-4); }
.vf-contact-form ::placeholder { color: var(--color-text-muted); }
.vf-contact-form textarea { resize: vertical; }
.vf-contact-form__select { position: relative; }
.vf-contact-form__select select { padding-right: 2.5rem; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vf-contact-form__select svg { position: absolute; right: .875rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-secondary); }
.vf-contact-form :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vf-contact-form input:invalid:not(:placeholder-shown), .vf-contact-form textarea:invalid:not(:placeholder-shown) { border-color: var(--color-error); }
.vf-contact-form__choice { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.vf-contact-form__choice legend { width: 100%; margin-bottom: var(--space-2); padding: 0; }
/* Radio dạng chip: input ẩn bằng clip (vẫn focus được bằng bàn phím), nhãn là vùng bấm ≥ 48px. */
.vf-contact-form__choice label { position: relative; flex: 1 1 8rem; }
.vf-contact-form__choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vf-contact-form__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); font-weight: var(--font-bold); }
.vf-contact-form__choice label:hover > span { border-color: var(--color-brand-deep); }
.vf-contact-form__choice input:checked + span { border-color: var(--color-brand-deep); background: var(--color-hybrid-soft); color: var(--color-brand-deep); }
.vf-contact-form__choice input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vf-contact-form .vf-contact-form__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: var(--font-normal); }
.vf-contact-form__consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--color-cta-primary); }
.vf-contact-form__consent a { text-decoration: underline; text-underline-offset: 2px; }
.vf-contact-form__submit { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 3.25rem; padding: var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--gradient-action); box-shadow: none; color: var(--color-text-inverse); font: inherit; font-weight: var(--font-bold); cursor: pointer; }
.vf-contact-form__submit:hover, .vf-contact-form__submit:focus { background: var(--gradient-action); box-shadow: none; color: var(--color-text-inverse); filter: brightness(1.04); }
.vf-contact-form__submit:disabled { opacity: .7; cursor: progress; }
.vf-contact-form__note { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.vf-contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vf-contact-form-panel .vf-contact-form__notice { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.vf-contact-form__notice[hidden] { display: none; }
.vf-contact-form__notice--success { color: var(--color-success-strong); background: var(--color-success-bg); }
.vf-contact-form__notice--error { color: var(--color-error); background: var(--color-error-bg); }
.vf-contact-info h2 { margin-bottom: var(--space-2); }

.vf-contact-info { background: linear-gradient(160deg, var(--color-brand-deep) 0%, var(--color-brand-deep-soft) 100%); color: var(--color-text-on-dark); }
.vf-contact-info h2, .vf-contact-info h3 { color: var(--color-text-inverse); }
.vf-contact-info address { font-style: normal; }
/* Liên kết trên nền navy: xanh nhạt --color-hybrid-on-dark (7.0:1) + gạch chân để không chỉ phân biệt bằng màu. */
.vf-contact-info a { color: var(--color-hybrid-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.vf-contact-info a:hover { color: var(--color-text-inverse); }
.vf-contact-info dl { margin: var(--space-8) 0 0; }
.vf-contact-info dt { margin-top: var(--space-6); color: var(--color-text-inverse); font-weight: var(--font-bold); }
.vf-contact-info dd { margin: var(--space-1) 0 0; color: var(--color-text-on-dark); line-height: var(--leading-relaxed); }
.vf-contact-info__hours { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 20%, transparent); }
.vf-contact-info__hours h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.vf-contact-info__hours dl { margin: 0; }
.vf-contact-info__hours dt { margin-top: var(--space-2); }
.vf-contact-info__hours dt:first-child { margin-top: 0; }

.vf-contact-map { margin: var(--block-py) 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.vf-contact-map__heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-5); }
.vf-contact-map h2 { margin: 0 0 var(--space-1); font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.vf-contact-map p { margin: 0; color: var(--color-text-secondary); }
.vf-contact-map iframe { display: block; width: 100%; height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.vf-contact-map .vf-contact-map__branch { margin-top: var(--space-4); line-height: var(--leading-relaxed); }

.vf-contact-help { padding-block: var(--block-py); background: linear-gradient(100deg, var(--color-brand-deep) 0%, var(--color-brand-deep-soft) 100%); }
.vf-contact-help h2 { margin: 0 0 var(--space-6); text-align: center; font-size: var(--text-3xl); color: var(--color-text-inverse); }
.vf-contact-help ul { display: grid; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.vf-contact-help ul a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-4) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-display); font-weight: var(--font-bold); text-decoration: none; }
.vf-contact-help ul a:hover { border-color: var(--color-hybrid-on-dark); color: var(--color-brand-primary); }

.vf-contact-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-10); padding-block: var(--block-py); }
.vf-contact-faq__eyebrow { margin: 0 0 var(--space-3); color: var(--color-brand-primary); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); }
.vf-contact-faq h2 { margin: 0; font-size: var(--text-3xl); }
.vf-contact-faq__items { display: grid; gap: var(--space-3); align-content: start; }
.vf-contact-faq details { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color var(--transition-fast); }
.vf-contact-faq details:hover { border-color: var(--color-border-strong); }
.vf-contact-faq details[open] { border-color: var(--color-hybrid-line); }
.vf-contact-faq summary { padding: var(--space-4) var(--space-5); color: var(--color-text-display); font-weight: var(--font-bold); cursor: pointer; }
.vf-contact-faq details[open] summary { background: var(--color-hybrid-soft); }
.vf-contact-faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.vf-contact-faq details p { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }

@media (max-width: 767px) {
  .vf-contact-answer { margin: var(--space-6) 0 0; padding: var(--space-4); }
  .vf-contact-grid { margin-top: calc(-1 * var(--space-10)); }
  .vf-contact-hero__inner { padding-bottom: calc(var(--space-12) + var(--space-10)); }
  .vf-contact-map { padding: var(--space-4); }
  .vf-contact-grid, .vf-contact-faq, .vf-contact-help ul { grid-template-columns: 1fr; }
  .vf-contact-form-panel, .vf-contact-info { padding: var(--space-5); }
  .vf-contact-map__heading { align-items: start; flex-direction: column; }
  .vf-contact-map iframe { height: 300px; }
  .vf-contact-faq { gap: var(--space-5); }
}
.vf-contact-info a:has(.vf-contact-ico) { display: inline-flex; align-items: center; gap: var(--space-2); }