/* Trang Liên hệ: dùng token chung, chỉ scope vào trang này. */
.vf-contact-page { background: var(--color-surface); }

.vf-contact-hero { position: relative; color: var(--color-text-inverse); background: var(--color-brand-deep); }
.vf-contact-breadcrumb { position: absolute; z-index: 3; top: var(--space-3); left: 50%; width: 100%; transform: translateX(-50%); }
/* Kích thước hero khớp chuẩn .vf-hero: lề ngang = .vf-container, chữ bắt đầu ~80px dưới mép trên, đáy 64px, cao tối thiểu 21rem (!important thắng style min-height:400px của Cover block trong DB). */
.vf-contact-hero .wp-block-cover { min-height: 21rem !important; padding: var(--space-14) var(--container-px) var(--space-16); align-items: center; }
@media (min-width: 768px) { .vf-contact-hero .wp-block-cover { padding-inline: var(--container-px-md); } }
.vf-contact-hero .wp-block-cover__inner-container { width: 100%; }
.vf-contact-hero__inner { max-width: calc(var(--container-max) - 2 * var(--container-px-md)); margin: 0 auto; }
/* Gutenberg áp margin auto !important cho con của Group constrained. Hero cần căn trái. */
.vf-contact-hero .vf-contact-hero__inner > * { margin-left: 0 !important; margin-right: 0 !important; }
.vf-contact-hero .vf-contact-hero__title { max-width: 800px; margin-block: 0 var(--space-4); }
.vf-contact-page .vf-contact-hero .wp-block-cover .vf-contact-hero__lead { margin-top: 0; margin-bottom: 0; color: var(--hero-text); } /* thắng `body .wp-block-cover p` của Astra */

.vf-contact-answer { max-width: var(--container-narrow); margin: var(--space-12) 0; padding-left: var(--space-4); border-left: 3px solid var(--color-cta-primary); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.vf-contact-answer a { font-weight: var(--font-semibold); }
.vf-contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.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: 0 16px 48px rgba(0, 29, 78, .12), 0 4px 12px rgba(0, 29, 78, .06); }
.vf-contact-info { border: 1px solid var(--color-border); }
.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); }
.vf-contact-form-panel > header h2 { color: var(--color-brand-deep); font-weight: var(--font-extrabold); }
.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-semibold); }
.vf-contact-form__choice label:hover > span { border-color: var(--color-cta-primary); }
.vf-contact-form__choice input:checked + span { border-color: var(--color-cta-primary); background: var(--color-brand-light); 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-md); background: var(--gradient-action); box-shadow: var(--shadow-brand); 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: var(--shadow-brand-lg); 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--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: var(--color-surface-alt); }
.vf-contact-info address { font-style: normal; }
/* Liên kết trong khối chữ: đủ tương phản trên nền xám nhạt và có gạch chân để phân biệt không chỉ bằng màu. */
.vf-contact-info address a { color: var(--color-cta-primary); text-decoration: underline; text-underline-offset: 2px; }
.vf-contact-info dl { margin: var(--space-8) 0 0; }
.vf-contact-info dt { margin-top: var(--space-6); color: var(--color-text-primary); font-weight: var(--font-bold); }
.vf-contact-info dd { margin: var(--space-1) 0 0; color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.vf-contact-info__hours { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.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(--space-10) 0 var(--space-16); }
.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); }
.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: var(--space-12) 0; background: var(--color-brand-light); }
.vf-contact-help h2 { margin: 0 0 var(--space-6); text-align: center; font-size: var(--text-3xl); }
.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 var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-weight: var(--font-bold); text-decoration: none; }
.vf-contact-help ul a:hover { border-color: var(--color-cta-primary); }

.vf-contact-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-10); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.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 details { border-bottom: 1px solid var(--color-border); }
.vf-contact-faq summary { padding: var(--space-4) 0; color: var(--color-text-primary); font-weight: var(--font-semibold); cursor: pointer; }
.vf-contact-faq details p { margin: 0 0 var(--space-5); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }

@media (max-width: 767px) {
  .vf-contact-answer { margin: var(--space-8) 0; font-size: var(--text-base); }
  .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); }
}