/* ==========================================================================
   Trang Liên hệ (lien-he.dc.html) + giao diện chung của các form CF7
   (contact / quote / apply — markup trong wp-import/data/forms.json)
   ========================================================================== */

/* ---------- Bố cục trang Liên hệ ---------- */
.hc-ct { padding: var(--space-12) 0 var(--space-20); }
.hc-ct__grid { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
.hc-ct__main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.hc-ct__head { display: flex; flex-direction: column; gap: var(--space-3); }
.hc-ct__eyebrow { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--primary); }
.hc-ct__h2 { margin: 0; font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.hc-ct__lead { margin: 0; font-size: var(--size-ui); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* Cột thông tin (nền xanh, sticky) */
.hc-ct__aside { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--space-7, 28px); padding: var(--space-9) var(--space-8); border-radius: var(--radius-md); background: var(--primary); color: var(--white); }
.hc-ct__cap { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .8; }
.hc-ct__hq { display: flex; flex-direction: column; gap: var(--space-2); }
.hc-ct__company { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); line-height: 1.3; text-transform: uppercase; }
.hc-ct__rows { display: flex; flex-direction: column; gap: var(--space-6); }
.hc-ct__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.hc-ct__ic { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--white); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hc-ct__row > div { display: flex; flex-direction: column; gap: 2px; }
.hc-ct__v { font-size: 16px; line-height: 1.5; }
a.hc-ct__v, a.hc-ct__v:hover { color: var(--white); font-weight: var(--weight-semibold); }
.hc-ct__dir { align-self: flex-start; }

/* Bản đồ full width */
.hc-ct-map { line-height: 0; background: var(--surface-subtle); }
.hc-ct-map iframe { display: block; width: 100%; height: 480px; border: 0; }

@media (max-width: 979px) {
	.hc-ct__grid { grid-template-columns: minmax(0, 1fr); }
	.hc-ct__aside { position: static; }
}

/* ---------- Form CF7 dùng chung (.hc-cf7 = class của <form>) ---------- */
.hc-cf7.wpcf7-form { gap: var(--space-6); }
/* Phần nền tảng CF7 (CSS gốc của CF7 đã bị tắt trong inc/forms.php) */
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 .wpcf7-form-control-wrap { position: relative; }
.hc-cf7-body { display: flex; flex-direction: column; gap: var(--space-6); }
.wpcf7 .hc-cf7 label { gap: var(--space-2); font-weight: var(--weight-regular); }
.hc-cf7-label { font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-primary); }
/* bản HTML có 1 <label> rỗng trước ô Nội dung → khoảng cách gấp đôi */
.hc-cf7--contact .hc-cf7-body > label { margin-top: var(--space-6); }
.hc-req { color: var(--primary); }
.hc-opt { font-weight: 400; color: var(--text-muted); }
.hc-cf7 .hc-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.hc-cf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .hc-cf7 input[type="text"], .wpcf7 .hc-cf7 input[type="email"], .wpcf7 .hc-cf7 input[type="tel"], .wpcf7 .hc-cf7 textarea {
	box-sizing: border-box; width: 100%; height: 48px; min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--border-strong, #B5B5B5); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-regular); color: var(--text-primary); background: var(--white); outline: none;
}
.wpcf7 .hc-cf7 textarea { height: auto; min-height: 0; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.5; }
.wpcf7 .hc-cf7 input:focus, .wpcf7 .hc-cf7 textarea:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.hc-cf7 ::placeholder { color: var(--text-muted); opacity: 1; }
.hc-cf7-note { font-size: var(--size-body); color: var(--text-muted); max-width: 420px; }
.hc-cf7-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hc-cf7-foot .wpcf7-spinner { display: none; }
.hc-cf7.submitting .hc-cf7-foot .wpcf7-spinner { display: inline-block; }

/* Nút submit (input) — thêm icon bằng nền SVG như Button icon-right */
.wpcf7 .hc-cf7 input.hc-btn { align-self: auto; height: auto; -webkit-appearance: none; appearance: none; }
.hc-cf7 input.hc-btn--send, .hc-cf7 input.hc-btn--arrow { padding-right: 46px; background-repeat: no-repeat; background-position: right 20px center; background-size: 18px 18px; }
.hc-cf7 input.hc-btn--send, .hc-cf7 input.hc-btn--send:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E"); }
.hc-cf7 input.hc-btn--arrow, .hc-cf7 input.hc-btn--arrow:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.hc-cf7 input.hc-btn--primary:hover { background-color: var(--primary-hover); }
.hc-cf7 input.hc-btn--full { width: 100%; }

/* Khối chọn chủ đề — radio dạng thẻ */
.hc-cf7-topics { display: flex; flex-direction: column; gap: var(--space-3); }
.hc-cf7-topics .wpcf7-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.hc-cf7-topics .wpcf7-list-item { margin: 0; display: block; }
.wpcf7 .hc-cf7-topics .wpcf7-list-item label { box-sizing: border-box; cursor: pointer; height: 100%; display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--white); font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-regular); line-height: 1.4; color: var(--text-primary); transition: border-color var(--dur-fast) var(--ease-standard); }
.wpcf7 .hc-cf7-topics .wpcf7-list-item label:hover { border-color: var(--primary); }
.hc-cf7-topics input[type="radio"] { -webkit-appearance: none; appearance: none; margin: 0; flex: none; width: 18px; height: 18px; border-radius: var(--radius-pill); border: 2px solid #B5B5B5; box-shadow: inset 0 0 0 3px var(--white); background: var(--white); cursor: pointer; outline: none; }
.hc-cf7-topics input[type="radio"]:checked { border-color: var(--primary); background: var(--primary); }
.hc-cf7-topics input[type="radio"]:focus-visible { box-shadow: inset 0 0 0 3px var(--white), var(--focus-ring); }
.wpcf7 .hc-cf7-topics .wpcf7-list-item label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* Trạng thái gửi thành công (CF7 thêm class .sent vào form) */
.hc-cf7-thanks { display: none; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-9) var(--space-8); border-radius: var(--radius-md); background: var(--primary-soft); }
.hc-cf7.sent .hc-cf7-thanks { display: flex; }
.hc-cf7.sent .hc-cf7-body, .hc-cf7.sent .wpcf7-response-output { display: none !important; }
.hc-cf7-thanks__icon { width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--primary); display: flex; align-items: center; justify-content: center; }
.hc-cf7-thanks__icon::before { content: ""; width: 26px; height: 26px; background: var(--white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-cf7-thanks__t { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); }
.hc-cf7-thanks__d { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
/* Biến thể căn giữa (form ứng tuyển — như Dialog bản HTML) */
.hc-cf7-thanks--center { align-items: center; text-align: center; background: transparent; padding: var(--space-8) 0; }
.hc-cf7-thanks--center .hc-cf7-thanks__icon { width: 64px; height: 64px; }
.hc-cf7-thanks--center .hc-cf7-thanks__icon::before { width: 28px; height: 28px; }
.hc-cf7-thanks--center .hc-cf7-thanks__t { font-size: var(--size-h2); text-transform: uppercase; }
.hc-cf7-thanks--center .hc-cf7-thanks__d { font-size: var(--size-ui); }

/* Form ứng tuyển: cột dọc gap 20px như Dialog; nhãn kiểu Input của design system */
.hc-cf7--apply .hc-cf7-body { gap: var(--space-5); }
.wpcf7 .hc-cf7--apply input[type="text"], .wpcf7 .hc-cf7--apply input[type="email"], .wpcf7 .hc-cf7--apply input[type="tel"] { height: var(--control-h-md); min-height: var(--control-h-md); border-color: var(--border-default); font-family: var(--font-body); font-size: var(--size-ui); }
.wpcf7 .hc-cf7--apply textarea { border-color: var(--border-default); font-family: var(--font-body); font-size: var(--size-ui); }
.hc-cf7--apply .hc-cf7-label { font-size: var(--size-body); }
.hc-cf7--apply .hc-cf7-note { max-width: none; }

/* Form báo giá (modal) */
.hc-cf7--quote .hc-form-grid { gap: var(--space-4); }