/* Trang /lien-he - bổ sung cho style.css của template */

.hero-subpage .hero-title { margin-bottom: 12px; }

/* Cột thông tin: template dùng --mockup-* (chỉ khai báo ở chế độ tối) -> đặt lại để chế độ sáng có nền */
.contact-info-card { background: var(--bg-surface); color: var(--text-body); border: 1px solid var(--bg-card-border); box-shadow: var(--shadow-md); }
.contact-info-card > .eyebrow { margin-bottom: 28px; }
.channel-body { min-width: 0; }
.channel-label { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.channel-value { display: inline-block; margin-top: 2px; font-size: 1.125rem; font-weight: 700; color: var(--text-heading); overflow-wrap: anywhere; }
.channel-value.is-phone { font-size: 1.25rem; color: var(--cz-blue-primary); }
.channel-value:hover { color: var(--cz-blue-primary); }
.channel-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: .875rem; }
.channel-links a { color: var(--cz-blue-primary); font-weight: 600; }
.channel-links a:hover { text-decoration: underline; }
.channel-text { margin-top: 4px; font-size: .9375rem; line-height: 1.6; color: var(--text-body); }
.channel-text strong { color: var(--text-heading); }
.contact-company { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bg-card-border); }
.contact-company-name { margin-top: 6px; font-weight: 700; color: var(--text-heading); }

/* Bố cục: hàng 1 = form (trái, rộng hơn) + thẻ liên hệ (phải), cao bằng nhau; hàng 2 = 'Sau khi gửi yêu cầu' trải ngang, 3 bước 3 cột */
.contact-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.contact-info-card { display: flex; flex-direction: column; }
.contact-info-card > .eyebrow { align-self: flex-start; }
.contact-info-card .contact-company { margin-top: auto; }
.contact-next { grid-column: 1 / -1; padding: 36px 40px; border-radius: var(--radius-xl); background: linear-gradient(160deg, #13233D 0%, #0B1628 100%); color: #CBD5E1; box-shadow: var(--shadow-md); }
.contact-next-title { margin-bottom: 22px; font-size: 1.25rem; color: #FFFFFF; }
.contact-next-steps { list-style: none; margin: 0; counter-reset: cnext; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.contact-next-steps li { position: relative; padding-top: 52px; counter-increment: cnext; }
/* Đường nối giữa các số */
.contact-next-steps li:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 50px; right: -22px; height: 2px; background: linear-gradient(90deg, rgba(0, 161, 255, .55), rgba(0, 161, 255, .08)); }
.contact-next-steps li::before { content: counter(cnext); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--cz-blue-primary); box-shadow: 0 0 0 5px rgba(0, 161, 255, .16); color: #FFFFFF; font-size: .875rem; font-weight: 700; }
.contact-next-steps h3 { margin-bottom: 6px; font-size: 1rem; line-height: 1.4; color: #FFFFFF; }
.contact-next-steps p { margin: 0; font-size: .875rem; line-height: 1.65; color: #B6C2D4; }
.contact-next-steps a { color: #7DD3FC; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact-next-steps a:hover { color: #FFFFFF; }
html[data-theme="dark"] .contact-next { border: 1px solid var(--bg-card-border); }

/* Form */
.form-card-title { font-size: 1.5rem; color: var(--text-title); margin-bottom: 24px; }
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-label-note { font-weight: 400; color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 110px; }
.form-control::placeholder { color: var(--text-muted); opacity: .8; }

.audience-group { border: 0; min-width: 0; }
.audience-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.audience-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--bg-card-border); border-radius: var(--radius-md); background: var(--bg-surface); font-size: .875rem; font-weight: 600; color: var(--text-heading); cursor: pointer; transition: all var(--transition-fast); }
.audience-option:hover { border-color: var(--bg-card-hover-border); }
.audience-option input { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--cz-blue-primary); }
.audience-option:has(input:checked) { border-color: var(--cz-blue-primary); background: var(--cz-blue-soft); color: var(--cz-blue-primary); }

.form-checkbox-label input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--cz-blue-primary); }
.form-checkbox-label a { color: var(--cz-blue-primary); font-weight: 600; }
.form-checkbox-label a:hover { text-decoration: underline; }

/* Bẫy bot */
.cf-honeypot { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }

/* Thông báo kết quả gửi */
.cf-alert { margin-bottom: 20px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: .9375rem; font-weight: 500; }
.cf-alert[hidden] { display: none; }
.cf-alert.is-success { background: var(--cz-mint-soft); border-color: rgba(0, 210, 180, .4); color: #047857; }
.cf-alert.is-error { background: rgba(244, 63, 94, .08); border-color: rgba(244, 63, 94, .35); color: #BE123C; }
html[data-theme="dark"] .cf-alert.is-success { color: #5EEAD4; }
html[data-theme="dark"] .cf-alert.is-error { color: #FDA4AF; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-actions .btn-primary { flex: 1 1 auto; }
.form-actions .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 1024px) {
  /* Màn hẹp: form, rồi 'Sau khi gửi yêu cầu', cuối cùng thẻ liên hệ; các bước xếp dọc, số bên trái */
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-next { order: 1; }
  .contact-info-card { order: 2; }
  .contact-next-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact-next-steps li { padding: 0 0 0 52px; }
  .contact-next-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 768px) {
  .contact-next { padding: 26px 22px; }
  .section { padding: 56px 0; }
  .contact-info-card, .form-card { padding: 28px 22px; }
  .audience-options { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .contact-info-card > .eyebrow { margin-bottom: 18px; }
}
@media (max-width: 400px) {
  .contact-info-card, .form-card { padding: 22px 16px; }
  .contact-channel-item { gap: 12px; }
  .channel-icon { width: 40px; height: 40px; }
}