/* ============================================================
   Contact popup (modal) DÙNG CHUNG TOÀN SITE.
   - Glass "panel lớn" (liquid-glass §1): alpha .72, blur 20px, saturate 155%, @supports fallback.
   - COLOR LOCK: 1 accent = var(--site-primary…). KHÔNG dùng đỏ #e31d22 (không có giá/khuyến mãi).
   - z-index 1400: trên floating widget (1200) & header (100/1000).
   - Motion: chỉ transform/opacity, tôn trọng prefers-reduced-motion.
   - Form field style scope TRONG .contact-popup (contact.css chỉ có ở /lien-he).
   ============================================================ */

.contact-popup {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Đóng: ẩn nhưng KHÔNG display:none để Select2 đo được & animate mượt */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease, visibility 0s linear .26s;
}

.contact-popup.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .26s ease;
}

.contact-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 43, 0.52);
    cursor: pointer;
}

/* Panel = gốc glass (KHÔNG bọc trong container có backdrop-filter — liquid-glass §4.1) */
.contact-popup__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 40px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.10),
        0 30px 70px rgba(15, 23, 43, 0.28),
        0 6px 16px rgba(15, 23, 43, 0.10);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    /* Vào: scale + trượt nhẹ (transform/opacity) */
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}

.contact-popup.is-open .contact-popup__panel {
    transform: none;
    opacity: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .contact-popup__panel { background: rgba(255, 255, 255, 0.95); }
}

.contact-popup__scroll {
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    /* Nội dung được nén để VỪA viewport laptop thường → thường không hiện thanh cuộn.
       Khi màn hình quá thấp mới cuộn, dùng thanh mảnh & tinh tế thay vì thanh mặc định. */
    padding: 26px 28px 22px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 43, 0.22) transparent;
}

.contact-popup__scroll::-webkit-scrollbar { width: 6px; }
.contact-popup__scroll::-webkit-scrollbar-track { background: transparent; }
.contact-popup__scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 43, 0.18);
    border-radius: 999px;
}
.contact-popup__scroll::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 43, 0.3); }

.contact-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 12px rgba(15, 23, 43, 0.10);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.contact-popup__close:hover { color: #0f172b; background: #fff; transform: rotate(90deg); }
.contact-popup__close svg { width: 19px; height: 19px; }

.contact-popup__title {
    margin: 0;
    padding-right: 30px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #0f172b;
}

.contact-popup__lead {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

/* ---- 2 hành động nhanh ---- */
.contact-popup__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.contact-popup__quick-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(var(--site-primary-rgb, 220, 38, 38), 0.22);
    background: rgba(var(--site-primary-rgb, 220, 38, 38), 0.06);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.contact-popup__quick-btn:hover {
    transform: translateY(-2px);
    background: rgba(var(--site-primary-rgb, 220, 38, 38), 0.10);
    border-color: var(--site-primary, #dc2626);
    box-shadow: 0 12px 26px rgba(var(--site-primary-rgb, 220, 38, 38), 0.18);
}

.contact-popup__quick-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #fff;
    background: var(--site-primary, #dc2626);
}

.contact-popup__quick-ico svg { width: 20px; height: 20px; }

.contact-popup__quick-text { display: grid; min-width: 0; line-height: 1.25; }
.contact-popup__quick-label { font-size: 12px; color: #64748b; font-weight: 600; }
.contact-popup__quick-value {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* ---- Divider ---- */
.contact-popup__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 2px;
    color: #94a3b8;
    font-size: 12.5px;
}

.contact-popup__divider::before,
.contact-popup__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 43, 0.10);
}

/* ---- Form scoped trong popup (contact.css không có ở trang khác) ---- */
.contact-popup .contact-form { position: relative; margin-top: 12px; }
.contact-popup .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-popup .contact-form > .contact-form-row + .contact-form-row,
.contact-popup .contact-form > .contact-form-row + .contact-field { margin-top: 12px; }

.contact-popup .contact-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}
.contact-popup .contact-field label span { color: var(--site-primary, #dc2626); }

.contact-popup .contact-form input[type="text"],
.contact-popup .contact-form input[type="email"],
.contact-popup .contact-form input[type="tel"],
.contact-popup .contact-form textarea {
    width: 100%;
    border: 1px solid #dce5f3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    color: #0f172b;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-popup .contact-form input[type="text"],
.contact-popup .contact-form input[type="email"],
.contact-popup .contact-form input[type="tel"] { height: 46px; padding: 0 14px; }
.contact-popup .contact-form textarea { min-height: 76px; padding: 11px 14px; resize: vertical; }

.contact-popup .contact-form input:focus,
.contact-popup .contact-form textarea:focus {
    outline: none;
    border-color: var(--site-primary, #dc2626);
    box-shadow: 0 0 0 4px rgba(var(--site-primary-rgb, 220, 38, 38), 0.14);
}
.contact-popup .contact-form input::placeholder,
.contact-popup .contact-form textarea::placeholder { color: #94a3b8; }

.contact-popup .contact-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-top: 16px; padding: 0 24px;
    border: 1.5px solid transparent; border-radius: 12px; cursor: pointer;
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    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), 0.32);
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-popup .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(var(--site-primary-rgb, 220, 38, 38), 0.42); }
.contact-popup .contact-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.contact-popup .contact-btn svg { width: 17px; height: 17px; }

.contact-popup .contact-policy {
    margin: 10px 0 0; color: #94a3b8; font-size: 12.5px; line-height: 1.5; text-align: center;
}
.contact-popup .contact-policy a { color: var(--site-primary, #dc2626); font-weight: 700; }

/* Focus ring a11y */
.contact-popup .contact-btn:focus-visible,
.contact-popup .contact-form input:focus-visible,
.contact-popup .contact-form textarea:focus-visible,
.contact-popup__quick-btn:focus-visible,
.contact-popup__close:focus-visible {
    outline: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), 0.45);
    outline-offset: 2px;
}

/* Lỗi validate theo từng field (popup.js chèn) */
.contact-popup .contact-field.has-error input,
.contact-popup .contact-field.has-error textarea { border-color: #e11d48; }
.contact-popup__field-error { display: block; margin-top: 6px; color: #e11d48; font-size: 12.5px; font-weight: 600; }

/* Loading overlay (dùng lại class chung, scope trong popup) */
.contact-popup .contact-form-loading {
    display: none;
    position: absolute; inset: 0; z-index: 3;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.contact-popup .contact-form.is-submitting .contact-form-loading { display: grid; }
.contact-popup .contact-form-loading__box { display: grid; justify-items: center; gap: 10px; color: #475569; font-size: 13.5px; font-weight: 600; }
.contact-popup .contact-form-loading__spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), 0.25);
    border-top-color: var(--site-primary, #dc2626);
    animation: contactPopupSpin .7s linear infinite;
}
@keyframes contactPopupSpin { to { transform: rotate(360deg); } }

/* ---- Trạng thái thành công ---- */
.contact-popup__success { text-align: center; padding: 14px 4px 6px; }
.contact-popup__success-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; margin-bottom: 14px;
    border-radius: 50%;
    color: #fff; background: var(--site-primary, #dc2626);
    box-shadow: 0 12px 26px rgba(var(--site-primary-rgb, 220, 38, 38), 0.32);
}
.contact-popup__success-ico svg { width: 30px; height: 30px; }
.contact-popup__success-heading { margin: 0; font-size: 19px; font-weight: 800; color: #0f172b; }
.contact-popup__success p { margin: 8px 0 0; color: #64748b; font-size: 14px; line-height: 1.6; }
.contact-popup__success-close { width: auto !important; padding: 0 30px !important; margin-top: 20px !important; }

/* Khoá cuộn nền khi popup mở */
body.contact-popup-open { overflow: hidden; }

/* ============================================================
   Modal "Đã gửi form thành công" DÙNG CHUNG (global, mọi trang).
   z-index 1500: trên floating widget (1200) & popup (1400).
   Nút tự style (không phụ thuộc .contact-btn của contact.css).
   ============================================================ */
.contact-success-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    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, 0.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, 0.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), 0.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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    min-height: 46px;
    padding: 0 30px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    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), 0.32);
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-success-modal__close:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(var(--site-primary-rgb, 220, 38, 38), 0.42); }
.contact-success-modal__close:focus-visible { outline: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), 0.45); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .contact-success-modal,
    .contact-success-modal__dialog,
    .contact-success-modal__close { transition: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .contact-popup { padding: 0; align-items: flex-end; }
    .contact-popup__panel {
        max-width: none;
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
        /* Mobile: trượt lên từ đáy (bottom sheet) */
        transform: translateY(28px);
    }
    .contact-popup.is-open .contact-popup__panel { transform: none; }
    .contact-popup__scroll { max-height: 92dvh; padding: 26px 20px 22px; }
    .contact-popup__quick { grid-template-columns: 1fr; }
    .contact-popup .contact-form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-popup,
    .contact-popup__panel,
    .contact-popup__close,
    .contact-popup__quick-btn,
    .contact-popup .contact-btn {
        transition: none !important;
    }
    .contact-popup__panel { transform: none !important; }
    .contact-popup .contact-form-loading__spinner { animation: none !important; }
}