/* ============================================================
   Liên hệ — themesieuviet / Win Ora
   CSS thật (tailwind.css build sẵn thiếu nhiều utility). Namespace ct-*.
   Accent DUY NHẤT: var(--site-primary…).
   Glass đồng bộ header/footer: alpha .55–.74, blur 16–20px, saturate 155–160%.

   GIỮ NGUYÊN tên các class/id mà JS + Select2 + trang khác bám vào:
     [data-contact-form] · .contact-form-loading* · .is-submitting
     [data-contact-success-modal] · .contact-success-modal* · [data-contact-success-close]
     .contact-form-card  (Select2 dropdownParent — xem ghi chú ::before bên dưới)
     .contact-select2-dropdown  ·  #contact-form  ·  #contact_name  ·  #map
     .contact-hero  (header.css cấp padding-top 120px)
     .faq-*  (component FAQ dùng chung)
   ============================================================ */

.ct-page { color: #0f172b; background: #fff; overflow-x: clip; }
.ct-page section { position: relative; }
.ct-page svg[fill="none"] { stroke: currentColor; }

/* ---- Reveal (gate .ct-anim; no-JS / reduced-motion → hiện đủ) ---- */
.ct-anim [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.ct-anim [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ct-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ct-page * { animation: none !important; }
}

/* ---- Nhịp section + giao thoa nền fade về trắng (liquid-glass §4b) ---- */
.ct-sect { padding: 72px 0; }
.ct-sect--tight { padding: 48px 0; }
.ct-soft {
    background:
        linear-gradient(180deg,
            rgba(var(--site-primary-rgb, 220, 38, 38), 0) 0,
            rgba(var(--site-primary-rgb, 220, 38, 38), .045) 130px,
            rgba(var(--site-primary-rgb, 220, 38, 38), .045) calc(100% - 130px),
            rgba(var(--site-primary-rgb, 220, 38, 38), 0) 100%),
        #ffffff;
}

/* ---- Pill · heading · lead ---- */
.contact-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 14px; border-radius: 999px;
    background: rgba(var(--site-primary-rgb, 220, 38, 38), .09);
    border: 1px solid rgba(var(--site-primary-rgb, 220, 38, 38), .18);
    color: var(--site-primary, #dc2626);
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.ct-h2 {
    margin: 0; color: #0f172b; font-weight: 900; letter-spacing: -.01em;
    font-size: clamp(25px, 2.7vw, 34px); line-height: 1.18; text-wrap: balance;
}
.ct-lead { margin: 12px 0 0; color: #475569; font-size: 15.5px; line-height: 1.7; max-width: 64ch; }
.ct-head { max-width: 720px; }
.ct-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ct-head--center .ct-lead { margin-left: auto; margin-right: auto; }
.ct-head .contact-pill { margin-bottom: 14px; }

/* ---- Button · link · focus ---- */
.contact-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 26px; border-radius: 12px; border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    font-size: 14.5px; font-weight: 700;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    color: #fff; box-shadow: 0 12px 26px rgba(var(--site-primary-rgb, 220, 38, 38), .32);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.contact-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 34px rgba(var(--site-primary-rgb, 220, 38, 38), .42); }
.contact-btn svg { width: 17px; height: 17px; }
.contact-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.contact-btn--light { background: #fff; color: #e31d22; box-shadow: 0 12px 26px rgba(15, 23, 43, .16); }
.contact-btn--light:hover { color: #d70f17; background: #fff; }
.contact-btn--outline {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); box-shadow: none;
}
.contact-btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: none; }
.contact-btn--ghost {
    background: #fff; color: var(--site-primary, #dc2626); box-shadow: none;
    border-color: rgba(var(--site-primary-rgb, 220, 38, 38), .35);
}
.contact-btn--ghost:hover { background: #fff; border-color: var(--site-primary, #dc2626); box-shadow: none; }

.ct-link {
    display: inline-flex; align-items: center; gap: 7px; border-radius: 6px;
    color: var(--site-primary, #dc2626); font-size: 14px; font-weight: 700; text-decoration: none;
}
.ct-link:hover { color: var(--site-primary-dark, #b91c1c); text-decoration: underline; }

.contact-btn:focus-visible,
.ct-link:focus-visible,
.ct-channel:focus-visible,
.ct-social a:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), .45);
    outline-offset: 2px;
}

/* ---- Fallback khi trình duyệt không hỗ trợ backdrop-filter ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .contact-form-card::before, .ct-trust, .ct-panel, .ct-channel, .ct-channel--lead,
    .ct-office, .ct-social, .ct-subscribe, .ct-map {
        background: rgba(255, 255, 255, .93) !important;
    }
}

/* =========================================================================
   1) HERO — nội dung trái + form panel lớn bên phải
   ========================================================================= */
.contact-hero {
    /* padding-top do header.css (.contact-hero → 120px) quản lý — nguồn duy nhất */
    padding-bottom: 64px;
    overflow: hidden;
    background:
        radial-gradient(1000px 440px at 88% -8%, rgba(var(--site-primary-rgb, 220, 38, 38), .16), transparent 60%),
        radial-gradient(760px 380px at 4% 8%, rgba(var(--site-primary-rgb, 220, 38, 38), .08), transparent 58%),
        linear-gradient(180deg, #fbf7f7 0%, #f7eff0 60%, #fdf7f7 100%);
}
.contact-hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 34%;
    background: linear-gradient(180deg, transparent, #ffffff); pointer-events: none; z-index: 0;
}
.ct-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;
}
.ct-hero__title {
    margin: 18px 0 0; color: #11213d; font-weight: 900; letter-spacing: -.015em;
    font-size: clamp(31px, 3.4vw, 44px); line-height: 1.1; text-wrap: balance;
}
.ct-hero__title span { color: var(--site-primary, #dc2626); }
.contact-lead { margin: 16px 0 0; color: #475569; font-size: 16px; line-height: 1.7; max-width: 52ch; }

.ct-points { display: grid; gap: 12px; margin-top: 26px; }
.ct-point {
    display: flex; align-items: center; gap: 12px;
    color: #334155; font-size: 14.8px; font-weight: 600;
}
.ct-point > span {
    display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 11px; color: var(--site-primary, #dc2626);
    background: rgba(var(--site-primary-rgb, 220, 38, 38), .1);
}
.ct-point svg { width: 17px; height: 17px; }

.ct-hero__art { margin-top: 30px; }
.ct-hero__art img { display: block; width: 100%; max-width: 520px; height: auto; }

/* ---- Form panel: mức "panel lớn" (liquid-glass §1, alpha .72) ----
   Glass sơn bằng ::before, KHÔNG đặt backdrop-filter lên chính .contact-form-card
   vì Select2 dùng nó làm dropdownParent (data-select2-parent) — tránh biến nó
   thành containing block bất ngờ. Nội dung nằm trên z-index 1. */
.contact-form-card {
    position: relative; z-index: 1; border-radius: 26px; padding: 32px 30px;
}
.contact-form-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(255, 255, 255, .55),
        0 0 0 1px rgba(148, 163, 184, .1),
        0 26px 60px rgba(15, 23, 43, .13);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
}
.contact-form-card > h2 {
    margin: 0; color: #0f172b; font-size: 22px; font-weight: 900; letter-spacing: -.01em;
}
.contact-form-card > p { margin: 8px 0 0; color: #64748b; font-size: 14px; line-height: 1.6; }

.contact-form { position: relative; margin-top: 22px; }
.contact-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* Chỉ giãn cách giữa các KHỐI của form. KHÔNG dùng `.contact-field + .contact-field`
   vì hai field nằm cùng một hàng grid cũng là anh em kề nhau → cột phải bị đẩy tụt. */
.contact-form > .contact-form-row + .contact-form-row,
.contact-form > .contact-form-row + .contact-field { margin-top: 16px; }
.contact-field label {
    display: block; margin-bottom: 7px; color: #334155; font-size: 13px; font-weight: 700;
}
.contact-field label span { color: var(--site-primary, #dc2626); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%; border-radius: 12px; background: #fff; color: #0f172b;
    border: 1.5px solid rgba(15, 23, 43, .1); font-size: 15px; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] { height: 50px; padding: 0 15px; }
.contact-form textarea { min-height: 120px; padding: 13px 15px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--site-primary, #dc2626);
    box-shadow: 0 0 0 4px rgba(var(--site-primary-rgb, 220, 38, 38), .14);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #94a3b8; }
.contact-form > .contact-btn { width: 100%; margin-top: 22px; }
.contact-policy { margin: 14px 0 0; color: #94a3b8; font-size: 12.5px; line-height: 1.6; text-align: center; }
.contact-policy a { color: var(--site-primary, #dc2626); font-weight: 700; }

/* Select2 (select2-assets.blade.php) mặc định cao 46px / bo 8px — kéo về đúng
   kích thước các input của form này để 2 cột thẳng hàng. */
.contact-form .select2-container--default .select2-selection--single {
    height: 50px; border-radius: 12px; border: 1.5px solid rgba(15, 23, 43, .1);
}
.contact-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 38px 0 15px; font-size: 15px;
}
.contact-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

.contact-error {
    margin-top: 18px; border-radius: 12px; padding: 12px 15px;
    border: 1px solid #fecaca; background: #fff1f2; color: #991b1b;
    font-size: 13.5px; font-weight: 600;
}

/* Overlay "Đang gửi..." (JS thêm .is-submitting) */
.contact-form-loading {
    position: absolute; inset: 0; z-index: 3; display: none; place-items: center;
    border-radius: 16px; background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.contact-form.is-submitting .contact-form-loading { display: grid; }
.contact-form-loading__box {
    display: flex; align-items: center; gap: 12px;
    color: #0f172b; font-size: 14px; font-weight: 700;
}
.contact-form-loading__spinner {
    width: 22px; height: 22px; border-radius: 999px;
    border: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), .22);
    border-top-color: var(--site-primary, #dc2626);
    animation: ct-spin .7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

@media (min-width: 1024px) {
    .ct-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 52px; }
    .ct-points { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
    .contact-form-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .contact-form-card { padding: 24px 20px; border-radius: 20px; }
}

/* =========================================================================
   2) TRUST BAND — 5 mục, dải ngang glass, vách ngăn mảnh
   ========================================================================= */
.ct-trust {
    display: grid; grid-template-columns: 1fr; gap: 4px;
    padding: 12px; border-radius: 22px;
    background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 16px 44px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.ct-trust__cell { position: relative; display: flex; align-items: center; gap: 13px; padding: 16px 14px; }
.ct-trust__ico {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
    background: rgba(var(--site-primary-rgb, 220, 38, 38), .1); color: var(--site-primary, #dc2626);
}
.ct-trust__ico svg { width: 19px; height: 19px; }
.ct-trust__title { color: #0f172b; font-size: 13.8px; font-weight: 800; line-height: 1.3; }
.ct-trust__text { margin-top: 3px; color: #64748b; font-size: 12.2px; line-height: 1.4; }

@media (min-width: 640px) { .ct-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) {
    .ct-trust { grid-template-columns: repeat(5, 1fr); }
    .ct-trust__cell + .ct-trust__cell::before {
        content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: #e6eaf0;
    }
}

/* =========================================================================
   3) GIẢI PHÁP + ĐỘI NGŨ — feature 1 lớn + 1 nhỏ (lệch cỡ)
   ========================================================================= */
/* stretch (không phải start): hai panel cao bằng nhau, tránh panel trái hụt đáy
   trong khi panel phải bị ảnh đội ngũ kéo dài. */
.ct-feature { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.ct-panel {
    position: relative; overflow: hidden; border-radius: 24px; padding: 30px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 34px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.ct-panel--solution {
    display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
    background:
        radial-gradient(560px 360px at 100% 100%, rgba(var(--site-primary-rgb, 220, 38, 38), .12), transparent 62%),
        rgba(255, 255, 255, .66);
    border-color: rgba(var(--site-primary-rgb, 220, 38, 38), .2);
}
.ct-panel h2 { margin: 14px 0 0; }
.ct-panel p { margin: 14px 0 0; color: #475569; font-size: 14.8px; line-height: 1.7; }
.ct-checks { display: grid; gap: 11px; margin: 22px 0 0; padding: 0; list-style: none; }
.ct-checks li { display: flex; align-items: flex-start; gap: 11px; color: #334155; font-size: 14px; line-height: 1.55; }
.ct-checks li > span {
    display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px;
    border-radius: 999px; color: #fff; font-size: 11px; font-weight: 900;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
}
.ct-panel .contact-btn { margin-top: 24px; }
.ct-panel__art img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Panel đội ngũ: cột dọc, ảnh phủ hết phần còn lại.
   Ảnh phải position:absolute — nếu để trong luồng, `height:100%` không có tác dụng
   (cha flex:1 có chiều cao KHÔNG xác định) nên ảnh giữ tỉ lệ gốc 1122x1402 và tự
   phình lên ~538px, kéo cả hàng cao lên 878px. */
.ct-panel--team { display: flex; flex-direction: column; }
/* Là flex item nên pill bị kéo giãn full-width nếu không tự neo trái. */
.ct-panel--team > .contact-pill { align-self: flex-start; }
.ct-panel--team .ct-panel__art { position: relative; flex: 1; min-height: 280px; margin-top: 24px; }
.ct-panel--team .ct-panel__art picture { position: absolute; inset: 0; display: block; }
.ct-panel--team .ct-panel__art img { width: 100%; height: 100%; object-fit: cover; }

/* Panel giải pháp: ảnh minh hoạ nền trong suốt → contain, không kéo panel cao vô ích. */
.ct-panel--solution .ct-panel__art img { max-height: 340px; object-fit: contain; margin: 0 auto; }

@media (min-width: 640px) { .ct-panel--solution { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .ct-feature { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 24px; } }

/* =========================================================================
   4) KÊNH LIÊN HỆ — Hotline là ô lớn + 3 ô nhỏ
   ========================================================================= */
.ct-channels { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.ct-channel {
    display: flex; flex-direction: column; border-radius: 20px; padding: 24px; text-decoration: none;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 10px 28px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    transition: transform .25s ease, box-shadow .25s ease;
}
a.ct-channel:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 43, .11); }
.ct-channel__ico {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: rgba(var(--site-primary-rgb, 220, 38, 38), .1); color: var(--site-primary, #dc2626);
}
.ct-channel__ico svg { width: 23px; height: 23px; }
.ct-channel h3 { margin: 16px 0 6px; color: #64748b; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ct-channel strong { color: #0f172b; font-size: 16px; font-weight: 800; line-height: 1.45; word-break: break-word; }
.ct-channel__note { margin-top: 6px; color: #94a3b8; font-size: 12.8px; }

/* Hotline: ô lớn, kênh chuyển đổi nhanh nhất */
.ct-channel--lead {
    background:
        radial-gradient(460px 300px at 100% 0, rgba(var(--site-primary-rgb, 220, 38, 38), .14), transparent 62%),
        rgba(255, 255, 255, .68);
    border: 1.5px solid rgba(var(--site-primary-rgb, 220, 38, 38), .3);
    box-shadow: 0 22px 50px rgba(var(--site-primary-rgb, 220, 38, 38), .15), inset 0 1px 0 rgba(255, 255, 255, .9);
    padding: 30px;
}
.ct-channel--lead .ct-channel__ico {
    width: 56px; height: 56px; border-radius: 16px; color: #fff;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    box-shadow: 0 10px 22px rgba(var(--site-primary-rgb, 220, 38, 38), .3);
}
.ct-channel--lead .ct-channel__ico svg { width: 27px; height: 27px; }
.ct-channel--lead strong {
    font-size: clamp(26px, 2.8vw, 36px); font-weight: 900; letter-spacing: -.02em;
    color: var(--site-primary, #dc2626); font-variant-numeric: tabular-nums;
}

/* Hotline KHÔNG trải 2 hàng nữa: nội dung chỉ có icon + số nên hộp cao gấp đôi
   sẽ rỗng trên dưới. Thay bằng banner ngang full-width, icon trái - số phải. */
@media (min-width: 700px) {
    .ct-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ct-channel--lead {
        grid-column: 1 / -1;
        display: grid; grid-template-columns: auto minmax(0, 1fr);
        column-gap: 24px; align-items: center; padding: 26px 30px;
    }
    .ct-channel--lead .ct-channel__ico { grid-row: 1 / span 2; align-self: center; }
    .ct-channel--lead h3 { margin: 0 0 2px; align-self: end; }
    .ct-channel--lead strong,
    .ct-channel--lead .ct-channel__note { grid-column: 2; align-self: start; }
}
@media (max-width: 699px) {
    .ct-channels { grid-template-columns: 1fr; }
}

/* =========================================================================
   5) TRỤ SỞ + BẢN ĐỒ THẬT — split
   ========================================================================= */
.ct-map-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.ct-office {
    border-radius: 24px; padding: 30px;
    background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 34px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.ct-office h3 { margin: 0; color: #0f172b; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.ct-office > p { margin: 12px 0 0; color: #64748b; font-size: 14.2px; line-height: 1.7; }
.ct-office ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ct-office li { display: flex; align-items: flex-start; gap: 10px; color: #334155; font-size: 14px; }
.ct-office li::before {
    content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto;
    border-radius: 999px; background: rgba(var(--site-primary-rgb, 220, 38, 38), .1);
    color: var(--site-primary, #dc2626); font-size: 11px; font-weight: 900;
}
.ct-office__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.ct-office__img { margin-top: 22px; }
.ct-office__img img { display: block; width: 100%; max-width: 320px; height: auto; }

.ct-map {
    position: relative; overflow: hidden; border-radius: 24px; min-height: 360px;
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 34px rgba(15, 23, 43, .08);
    background: #eaf2fb;
}
.ct-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.ct-map__note {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    padding: 7px 12px; border-radius: 9px;
    background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .7);
    color: #475569; font-size: 11.5px; font-weight: 600;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

@media (min-width: 1024px) { .ct-map-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px; } }

/* =========================================================================
   6) SOCIAL + ĐĂNG KÝ NHẬN TIN — split nhỏ
   ========================================================================= */
.ct-lower { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ct-social,
.ct-subscribe {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border-radius: 22px; padding: 28px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 34px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.ct-social h3,
.ct-subscribe h3 { margin: 0; color: #0f172b; font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.ct-social > p,
.ct-subscribe > p { margin: 10px 0 0; color: #64748b; font-size: 13.8px; line-height: 1.65; max-width: 46ch; }

.ct-social__icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ct-social__icons a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px;
    padding: 0 14px; border-radius: 14px; text-decoration: none;
    color: #0f172b; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 6px 18px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(16px) saturate(158%); backdrop-filter: blur(16px) saturate(158%);
    transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ct-social__icons a:hover {
    transform: translateY(-2px); color: var(--site-primary, #dc2626);
    border-color: rgba(var(--site-primary-rgb, 220, 38, 38), .35);
    box-shadow: 0 12px 26px rgba(15, 23, 43, .1);
}
.ct-social__art,
.ct-subscribe__art { margin-top: auto; padding-top: 22px; }
.ct-social__art img,
.ct-subscribe__art img { display: block; width: 100%; max-width: 180px; height: auto; margin-left: auto; }

.contact-subscribe-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
.contact-newsletter-input {
    width: 100%; height: 50px; padding: 0 15px; border-radius: 12px; background: #fff; color: #0f172b;
    border: 1.5px solid rgba(15, 23, 43, .1); font-size: 15px; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-newsletter-input:focus {
    border-color: var(--site-primary, #dc2626);
    box-shadow: 0 0 0 4px rgba(var(--site-primary-rgb, 220, 38, 38), .14);
}
.contact-newsletter-input::placeholder { color: #94a3b8; }

@media (min-width: 640px) { .contact-subscribe-form { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1024px) { .ct-lower { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; } }

/* =========================================================================
   7) FAQ — component chung + ảnh minh hoạ
   ========================================================================= */
.ct-faq-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; margin-top: 40px; }
.ct-faq-art img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

@media (min-width: 1024px) {
    .ct-faq-grid { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 44px; align-items: center; }
}

/* =========================================================================
   8) CTA cuối — panel accent
   ========================================================================= */
.contact-final { padding: 0 0 78px; background: #fff; }
.ct-final-card {
    position: relative; overflow: hidden; border-radius: 26px; padding: 34px 30px;
    display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; text-align: center;
    background:
        radial-gradient(circle at 16% 50%, rgba(255, 255, 255, .16), transparent 26%),
        linear-gradient(135deg, #ed1c24 0%, #d70f17 100%);
    color: #fff; box-shadow: 0 28px 70px rgba(227, 29, 34, .24);
}
.ct-final-card img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.ct-final-card h2 {
    margin: 0; color: #fff; font-weight: 900; line-height: 1.2; letter-spacing: -.01em;
    font-size: clamp(24px, 2.8vw, 34px); text-wrap: balance;
}
.ct-final-card p { margin: 12px 0 0; color: rgba(255, 255, 255, .88); font-size: 15.5px; line-height: 1.7; }
.ct-final-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (min-width: 940px) {
    .ct-final-card { grid-template-columns: 240px minmax(0, 1fr) auto; gap: 36px; padding: 38px 42px; text-align: left; }
    .ct-final-actions { flex-direction: column; }
}

/* =========================================================================
   9) MODAL "Đã gửi form thành công" (JS bám class — giữ nguyên tên)
   ========================================================================= */
.contact-success-modal {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.contact-success-modal.is-visible { opacity: 1; visibility: visible; }
.contact-success-modal__backdrop {
    position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
    background: rgba(15, 23, 43, .56);
}
.contact-success-modal__dialog {
    position: relative; z-index: 1; width: min(100%, 420px); text-align: center;
    border-radius: 22px; padding: 34px 28px; background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 43, .28);
    transform: translateY(12px); transition: transform .25s ease;
}
.contact-success-modal.is-visible .contact-success-modal__dialog { transform: none; }
.contact-success-modal__icon {
    display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 999px; color: #fff;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    box-shadow: 0 12px 26px rgba(var(--site-primary-rgb, 220, 38, 38), .32);
}
.contact-success-modal__icon svg { width: 28px; height: 28px; }
.contact-success-modal__dialog h2 { margin: 18px 0 0; color: #0f172b; font-size: 21px; font-weight: 900; }
.contact-success-modal__dialog p { margin: 10px 0 0; color: #64748b; font-size: 14px; line-height: 1.6; }
.contact-success-modal__close { margin-top: 24px; }

@media (max-width: 767px) {
    .ct-sect { padding: 56px 0; }
    .contact-final { padding-bottom: 56px; }
    .ct-final-actions .contact-btn { width: 100%; }
    .ct-panel { padding: 24px 20px; }
    .ct-office { padding: 24px 20px; }
}