/* ==========================================================================
   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; /* Đã hạ về kích thước ban đầu theo ý bác */
    height: 80px !important;
    z-index: 999998 !important;
}

/* TẦNG NỀN MỜ PHÍA SAU (GLOW EFFECT) - Phiên bản siêu nhạt mờ như sương cam */
#survey-floating-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 5% !important;
    left: 5% !important;
    width: 90% !important;
    height: 90% !important;
    border-radius: 50% !important;
    /* Hạ alpha xuống cực thấp (0.15 và 0.03) để có ánh cam ẩn hiện, tinh tế */
    background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.03) 60%, transparent 100%) !important;
    filter: blur(16px) !important; /* Tăng blur lên 16px để dải màu tỏa rộng và mịn hơn */
    z-index: -1 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

#survey-floating-wrapper:hover::before {
    transform: scale(1.15) !important;
    filter: blur(18px) !important;
    /* Khi hover chỉ ửng sáng nhẹ lên một chút, không bị gắt */
    background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, rgba(249, 115, 22, 0.08) 60%, transparent 100%) !important;
}

#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;
    transition: transform 0.3s ease !important;
    z-index: 2 !important;
    animation: surveyWobble 3.5s ease-in-out infinite !important;
}

#survey-floating-wrapper:hover #survey-floating-btn { 
    transform: scale(1.1) !important; 
    animation-play-state: paused !important; 
}

/* Thẻ img chứa hộp quà 3D tách nền */
.survey-gift-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) !important;
}

/* ==========================================================================
   HIỆU ỨNG LẮC LƯ HỘP QUÀ (WOBBLE ANIMATION)
   ========================================================================== */
@keyframes surveyWobble {
    0%, 100%, 70% { transform: rotate(0deg); }
    73% { transform: rotate(-10deg) scale(1.05); }
    76% { transform: rotate(12deg) scale(1.05); }
    79% { transform: rotate(-10deg) scale(1.05); }
    82% { transform: rotate(8deg) scale(1.05); }
    85% { transform: rotate(-4deg) scale(1.02); }
    88% { transform: rotate(0deg); }
}

/* ==========================================================================
   RESPONSIVE CHO MOBILE (Tối ưu tỷ lệ thon gọn cho màn hình nhỏ)
   ========================================================================== */
@media (max-width: 767px) {
    /* Hạ wrapper nút nổi trên mobile về lại đúng 50px nguyên bản */
    #survey-floating-wrapper { 
        bottom: 95px !important; 
        right: 20px !important; 
        width: 50px !important; 
        height: 50px !important; 
    }

    /* 1. Thu nhỏ card popup: Giảm padding để tăng không gian hiển thị */
    .survey-modal-card {
        padding: 24px 18px !important;
        border-radius: 16px !important;
        width: 92% !important; 
    }

    /* 2. Thu nhỏ logo cho thanh lịch trên mobile */
    .survey-modal-logo {
        margin-bottom: 15px !important;
    }
    .survey-modal-logo img {
        max-width: 140px !important; 
    }

    /* 3. Hạ size chữ đoạn intro và giảm khoảng cách dưới */
    .survey-modal-intro {
        font-size: 13px !important;
        margin-bottom: 18px !important;
        padding: 0 5px !important;
    }

    /* 4. Tối ưu lại nhóm câu hỏi khảo sát */
    .survey-form-group {
        margin-bottom: 16px !important; 
    }

    .survey-question-label {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        line-height: 1.35 !important;
    }

    /* 5. Thu nhỏ text của các option Radio */
    .survey-radio-options {
        gap: 8px !important;
    }

    .survey-radio-item {
        font-size: 13px !important;
        gap: 8px !important;
    }

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

    /* 6. Thu gọn ô nhập số điện thoại */
    .survey-input-text {
        padding: 8px 4px !important;
        font-size: 13px !important;
    }

    /* 7. Căn chỉnh lại cụm nút bấm trên Mobile */
    .survey-submit-wrapper {
        margin-top: 20px !important;
    }

    .survey-submit-btn {
        padding: 10px 30px !important;
        font-size: 14px !important;
        min-width: 140px !important;
    }
}

/* ==========================================================================
   POPUP MODAL KHẢO SÁT (Style tối giản, logo lớn, input kẻ viền dưới)
   ========================================================================== */
.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: 35px 30px;
    border-radius: 20px; 
    width: 90%;
    max-width: 440px;
    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);
}

.survey-modal-overlay.is-active .survey-modal-card {
    transform: translateY(0);
}

/* Nút Đóng (X) tinh tế - Trong suốt hoàn toàn */
.survey-modal-close {
    position: absolute;
    top: 15px; right: 20px;
    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;
}

/* Căn giữa Logo và phóng to kích thước */
.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;
}

/* Nhóm câu hỏi khảo sát */
.survey-form-group {
    margin-bottom: 22px;
}

.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;
}

/* Khối lựa chọn Radio */
.survey-radio-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 2px;
}

.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"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer;
    accent-color: rgb(29 78 216); 
}

/* Ô nhập số điện thoại dạng chỉ lấy border dưới */
.survey-input-text {
    width: 100% !important;
    padding: 10px 4px !important; 
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #e2e8f0 !important; 
    border-radius: 0 !important; 
    font-size: 14px !important;
    font-family: inherit;
    box-sizing: border-box !important;
    background-color: transparent !important; 
    transition: border-color 0.2s ease;
}

.survey-input-text:focus {
    outline: none !important;
    border-bottom-color: rgb(29 78 216) !important; 
    box-shadow: none !important; 
}

/* Cụm nút gửi thông tin căn giữa */
.survey-submit-wrapper {
    margin-top: 30px !important;
    display: flex !important;
    justify-content: center !important; 
    width: 100% !important;
}

/* ==========================================================================
   NÚT GỬI THÔNG TIN - Chiều cao 16px dày dặn chuẩn chỉnh
   ========================================================================== */
.survey-submit-btn {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)) !important; 
    color: #ffffff !important;
    border: none !important;
    padding: 16px 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: auto !important;
    min-width: 160px !important; 
    max-width: 200px !important;
    border-radius: 99px !important; 
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    outline: none !important; 
}

.survey-submit-btn:hover {
    opacity: 0.9 !important;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3) !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 4px 12px rgba(29, 78, 216, 0.2) !important; 
}

.survey-submit-btn:active {
    transform: translateY(1px) !important;
}

/* ==========================================================================
   TRẠNG THÁI KHÓA NÚT (DISABLED)
   ========================================================================== */
.survey-submit-btn.disabled,
.survey-submit-btn:disabled,
.survey-submit-btn[disabled] {
    background-color: #eaeded !important; 
    background: #eaeded !important;
    color: #64748b !important; 
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}