/* ==========================================================================
   KHUNG BỌC WRAPPER QUẢN LÝ VỊ TRÍ TỔNG THỂ
   ========================================================================== */
#survey-floating-wrapper {
    position: fixed !important;
    bottom: 130px !important;
    right: 25px !important;
    width: 80px !important; 
    height: 80px !important;
    z-index: 999998 !important;
}

/* 🌟 TẦNG DUY NHẤT: VÒNG SÓNG ĐỒNG KHỐI LAN TỎA (SOLID PULSE WAVE) - CHẠY LIÊN TỤC 100% 🌟 */
#survey-floating-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-color: rgba(249, 115, 22, 0.25) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    animation: surveyMessengerWave 2s infinite cubic-bezier(0.1, 0.8, 0.3, 1) !important;
}

/* ==========================================================================
   NÚT CHỨA ICON NỔI - TỰ LẮC LƯ LIÊN TỤC (WOBBLE EFFECT)
   ========================================================================== */
#survey-floating-btn {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important; 
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: 2 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    animation: surveyAutoWobble 2s ease-in-out infinite !important;
    transform-origin: center bottom !important;
}

#survey-floating-wrapper:hover #survey-floating-btn { 
    animation-duration: 0.8s !important;
}
#survey-floating-wrapper:hover .survey-gift-icon {
    transform: scale(1.12) !important;
}

.survey-gift-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 16px rgba(249, 115, 22, 0.25)) !important;
    transform: scale(1) !important;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ==========================================================================
   KEYFRAMES LOGIC CHUYỂN ĐỘNG SIÊU MƯỢT
   ========================================================================== */
@keyframes surveyMessengerWave {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes surveyAutoWobble {
    0%   { transform: rotate(-4deg); }
    50%  { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

/* ==========================================================================
   RESPONSIVE CHO MOBILE (Tối ưu tỷ lệ thon gọn cho màn hình nhỏ)
   ========================================================================== */
@media (max-width: 767px) {
    #survey-floating-wrapper { 
        bottom: 95px !important; 
        right: 20px !important; 
        width: 50px !important; 
        height: 50px !important; 
    }

    #survey-floating-wrapper:hover #survey-floating-btn { 
        animation-duration: 0.8s !important;
    }
    #survey-floating-wrapper:hover .survey-gift-icon {
        transform: scale(1.08) !important;
    }

    .survey-modal-card {
        flex-direction: column !important;
        border-radius: 16px !important;
        width: 92% !important; 
        max-width: 380px !important;
    }
    .survey-modal-banner {
        display: flex !important;
        align-items: stretch !important;
        flex: none !important;
        height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        min-height: 110px !important;
    }
    .survey-banner-img-desktop { display: none !important; }
    .survey-banner-img-mobile {
        display: block !important;
        position: static !important;
        width: 42% !important;
        height: auto !important;
        align-self: stretch !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        inset: auto !important;
    }
    .survey-banner-mobile-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important;
        padding: 16px 18px !important;
    }
    .survey-banner-mobile-logo {
        max-width: 150px !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
    .survey-banner-mobile-intro {
        font-family: 'Inter', sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #4a5568 !important;
        line-height: 1.4 !important;
    }
    .survey-modal-content .survey-modal-logo,
    .survey-modal-content .survey-modal-intro { display: none !important; }
    .survey-modal-content { padding: 18px 16px !important; }

    .survey-modal-logo {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }
    .survey-modal-logo img {
        max-width: 120px !important; 
    }

    .survey-modal-intro {
        font-size: 12.5px !important;
        margin-bottom: 14px !important;
        padding: 0 5px !important;
    }

    .survey-form-group {
        margin-bottom: 8px !important; 
        padding: 11px 13px !important;
        border-radius: 12px !important;
    }

    .survey-question-label {
        font-size: 11.5px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .survey-radio-options {
        gap: 5px !important;
    }

    .survey-radio-item {
        font-size: 11.5px !important;
        gap: 7px !important;
    }

    .survey-radio-item input[type="radio"] {
        width: 14px !important;
        height: 14px !important;
    }
    .survey-radio-item input[type="radio"]:checked {
        border-width: 4px !important;
    }

    .survey-input-text {
        height: auto !important;
        padding: 8px 10px 8px 34px !important;
        font-size: 11.5px !important;
    }
    .survey-input-icon { left: 10px !important; }
    .survey-input-icon svg { width: 15px !important; height: 15px !important; }

    .survey-submit-wrapper {
        margin-top: 14px !important;
    }

    .survey-submit-btn {
        padding: 10px 30px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   POPUP MODAL KHẢO SÁT (Giữ nguyên cấu trúc giao diện ổn định)
   ========================================================================== */
.survey-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 25, 47, 0.6); 
    backdrop-filter: blur(4px); 
    z-index: 1000000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.survey-modal-overlay.is-active { opacity: 1; visibility: visible; }
.survey-modal-card { background: #ffffff; padding: 0; border-radius: 20px; width: 92%; max-width: 720px; box-shadow: 0 20px 40px rgba(10, 52, 111, 0.15); position: relative; transform: translateY(-30px); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; overflow: hidden; }
.survey-modal-overlay.is-active .survey-modal-card { transform: translateY(0); }

/* Banner ảnh bên trái */
.survey-modal-banner { flex: 0 0 40%; position: relative; overflow: hidden; background: linear-gradient(155deg, #eef4ff 0%, #dbe7ff 55%, #c9dbff 100%); }
.survey-modal-banner::before { content: ""; position: absolute; top: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(120,160,250,0.35) 0%, transparent 70%); pointer-events: none; }
.survey-modal-banner::after { content: ""; position: absolute; bottom: -30px; right: -30px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(77,123,242,0.28) 0%, transparent 70%); pointer-events: none; }
.survey-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 1; }
.survey-banner-img-mobile { display: none; }
.survey-banner-mobile-text { display: none; }
.survey-banner-dot { position: absolute; top: 38%; right: -25px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(150,180,250,0.32) 0%, transparent 70%); pointer-events: none; z-index: 0; }

/* Cột phải chứa form */
.survey-modal-content { flex: 1; padding: 32px 30px; min-width: 0; }

.survey-modal-close { position: absolute; top: 12px; right: 16px; z-index: 5; font-size: 26px; font-weight: 400; color: #a0aec0; cursor: pointer; line-height: 1; transition: color 0.2s; border: none !important; background: none !important; background-color: transparent !important; padding: 0 !important; margin: 0 !important; outline: none !important; box-shadow: none !important; }
.survey-modal-close:hover { color: #4a5568; background: none !important; background-color: transparent !important; }
.survey-modal-close:focus, .survey-modal-close:active, .survey-modal-close:focus-visible { outline: none !important; border: none !important; background: none !important; background-color: transparent !important; box-shadow: none !important; }

.survey-modal-logo { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin-bottom: 25px !important; margin-top: 5px !important; width: 100% !important; }
.survey-modal-logo img { max-width: 185px !important; height: auto !important; display: block !important; object-fit: contain; }

.survey-form-group { margin-bottom: 10px; background: #f5f7fb; border: 1px solid #e8edf5; border-radius: 14px; padding: 14px 16px; transition: border-color 0.2s ease; }
.survey-form-group:focus-within { border-color: #bcd0fb; }
.survey-phone-group { background: transparent !important; border: none !important; padding: 0 !important; margin-top: 4px; }
.survey-question-label { font-family: 'Inter', sans-serif !important; display: block; font-weight: 700 !important; font-size: 14px !important; color: #1a202c !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
.survey-radio-options { display: flex; flex-direction: column; gap: 8px; padding-left: 0; }
.survey-radio-item { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; color: #4a5568 !important; cursor: pointer; display: flex; align-items: center; gap: 10px; user-select: none; }
.survey-radio-item input[type="radio"] { -webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important; margin: 0 !important; cursor: pointer; border: 1.5px solid #cbd5e1 !important; border-radius: 50% !important; background: #fff !important; flex-shrink: 0; position: relative; transition: border-color 0.2s ease; }
.survey-radio-item input[type="radio"]:checked { border-color: #4d7bf2 !important; border-width: 6px !important; }
.survey-radio-item input[type="radio"]:hover { border-color: #94b3f7 !important; }

/* Ô nhập SĐT có icon bên trái, chiều cao gọn */
.survey-input-wrapper { position: relative; display: flex; align-items: center; }
.survey-input-icon { position: absolute; left: 13px; color: #94a3b8; pointer-events: none; }
.survey-input-text { width: 100% !important; height: auto !important; padding: 12px 12px 12px 40px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; font-family: inherit; box-sizing: border-box !important; background-color: #fff !important; transition: border-color 0.2s ease; }
.survey-input-text:focus { outline: none !important; border-color: #4d7bf2 !important; box-shadow: none !important; }
.survey-input-wrapper:focus-within .survey-input-icon { color: #4d7bf2; }
.survey-submit-wrapper { margin-top: 22px !important; display: flex !important; justify-content: center !important; width: 100% !important; }
.survey-submit-btn { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; background: linear-gradient(135deg, #4d7bf2 0%, #3b5fd9 100%) !important; background-color: #4d7bf2 !important; color: #ffffff !important; border: none !important; padding: 15px 35px !important; display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; line-height: 1 !important; text-transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; border-radius: 99px !important; box-shadow: 0 8px 20px rgba(77, 123, 242, 0.35) !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; outline: none !important; }
.survey-submit-btn:hover { opacity: 0.95 !important; box-shadow: 0 10px 24px rgba(77, 123, 242, 0.45) !important; transform: translateY(-1px) !important; }
.survey-submit-btn:focus, .survey-submit-btn:active, .survey-submit-btn:focus-visible { outline: none !important; border: none !important; box-shadow: 0 8px 20px rgba(77, 123, 242, 0.35) !important; }
.survey-submit-btn:active { transform: translateY(1px) !important; }

.survey-submit-btn.disabled, .survey-submit-btn:disabled, .survey-submit-btn[disabled] { background: #eaeded !important; background-color: #eaeded !important; color: #94a3b8 !important; cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; }

/* Thanh promo viền chạy (Giữ nguyên) */
.single-product-survey-promo { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 18px 0 22px 0 !important; background-color: #fff7ed !important; border: none !important; padding: 10px 18px 10px 10px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(255, 102, 31, 0.03) !important; cursor: pointer !important; transition: all 0.25s ease-in-out !important; user-select: none !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; z-index: 0 !important; }
.single-product-survey-promo:hover { background-color: #ffedd5 !important; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.08) !important; transform: translateY(-1px) !important; }
.single-product-survey-promo::before { content: '' !important; position: absolute !important; inset: -1.5px !important; z-index: -1 !important; border-radius: 10px !important; background: conic-gradient(from var(--angle, 0deg), #FF8F4B 0%, #FF5C00 15%, #fff7ed 35%, #fff7ed 65%, #FF5C00 85%, #FF8F4B 100%) !important; animation: borderSpin 2.5s linear infinite !important; }
.single-product-survey-promo::after { content: '' !important; position: absolute !important; inset: 1px !important; background: #fff7ed !important; border-radius: 7px !important; z-index: -1 !important; }
.single-product-survey-promo:hover::before { animation-duration: 1s !important; }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes borderSpin { to { --angle: 360deg; } }
.promo-icon-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-left: 2px !important; animation: surveyCapsuleWobble 2.5s infinite ease-in-out !important; }
.single-product-survey-promo .promo-text { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #4a5568 !important; line-height: 1.4 !important; }
.single-product-survey-promo .highlight-price { font-weight: 800 !important; font-style: italic !important; letter-spacing: 0.3px !important; background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #dc2626 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: drop-shadow(0px 1px 1px rgba(249, 115, 22, 0.15)) !important; }
@keyframes surveyCapsuleWobble { 0%, 100%, 80% { transform: rotate(0deg) scale(1); } 85% { transform: rotate(-15deg) scale(1.1); } 90% { transform: rotate(15deg) scale(1.1); } }
@media (max-width: 767px) { .single-product-survey-promo { display: flex !important; padding: 10px 14px !important; margin: 15px 0 !important; } .single-product-survey-promo .promo-text { font-size: 13.5px !important; } }
/* ============================================================
   Badge "Quà tặng" + đồng hồ "Ưu đãi còn" (Giỏ hàng / Checkout)
   Dùng chung cho review-order.php (checkout) & hook cart.
   Desktop 14px / Mobile (<=767px) 12px.
   ============================================================ */
.fpt-survey-gift-badge {
    display: block !important;
    margin: 4px 0 !important;
    color: #d9480f !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
}
.fpt-survey-countdown {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 2px !important;
    color: #ff6600 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    max-width: 100% !important;
}
.fpt-survey-countdown .fpt-clock-icon {
    fill: #ff6600 !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin-bottom: 2px !important;
}
@media (max-width: 767px) {
    .fpt-survey-gift-badge,
    .fpt-survey-countdown {
        font-size: 12px !important;
    }
}

/* ============================================================
   SP survey trong GIỎ HÀNG (mobile): đưa GIÁ lên TRÊN badge "Quà tặng".
   Hook render badge ngay sau tên SP (trước .price-mobile) -> mặc định
   badge nằm trên giá. Dùng flex + order để đảo thứ tự HIỂN THỊ:
   tên SP -> giá -> badge "Quà tặng" -> đồng hồ -> số lượng.
   Chỉ áp cho ô chứa .fpt-survey-gift-badge (đúng SP survey) qua :has().
   ============================================================ */
@media (max-width: 768px) {
    .cart-table td.product-name:has(.fpt-survey-gift-badge) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* tên SP là text trần (anonymous flex item) -> mặc định order:0, nằm đầu.
       Dùng margin-top riêng từng phần để kiểm soát khoảng cách từng cặp dòng.
       (baseline giá sale/gạch đã xử lý chung trong cart-style.css) */
    .cart-table td.product-name:has(.fpt-survey-gift-badge) .price-mobile {
        order: 1 !important;
        margin-top: 6px !important;     /* tên -> giá (vừa vặn) */
    }
    .cart-table td.product-name:has(.fpt-survey-gift-badge) .fpt-survey-gift-badge {
        order: 2 !important;
        margin: 2px 0 0 0 !important;   /* giá -> "Quà tặng" (siết lại cho sát) */
    }
    .cart-table td.product-name:has(.fpt-survey-gift-badge) .fpt-survey-countdown {
        order: 3 !important;
        margin: 2px 0 0 0 !important;   /* "Quà tặng" -> "Ưu đãi còn" */
    }
    .cart-table td.product-name:has(.fpt-survey-gift-badge) .group-quantity-container-mobile {
        order: 4 !important;
        margin-top: 6px !important;     /* countdown -> số lượng */
        align-self: stretch !important; /* giãn full ngang để thùng rác ra mép phải (như SP thường) */
    }
}