/* ===== CHATBOT OPTIMIZED - CSS TỐI ƯU HIỆU NĂNG ===== */
:root {
    --primary-gold: #D4AF37;
    --primary-gold-light: #E6C158;
    --primary-gold-dark: #B8941F;
    --zalo-blue: #ffdd00;
    --zalo-blue-light: #ffdd00;
    --whatsapp-green: #25D366;
    --whatsapp-green-light: #5DE38E;
    --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --btn-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ===== CONTAINER CHÍNH ===== */
.contact-buttons-optimized {
    position: fixed;
    bottom: 25px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    pointer-events: none; /* Không can thiệp scroll */
}

@media (max-width: 768px) {
    .contact-buttons-optimized {
        bottom: 80px;
        right: 15px;
        gap: 10px;
    }
}

/* ===== NÚT TỐI ƯU ===== */
.optimized-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 20px;
    color: white;
    box-shadow: var(--btn-shadow);
    pointer-events: auto; /* Chỉ nút clickable */
    will-change: transform, box-shadow; /* Tối ưu animation */
    backface-visibility: hidden; /* Chống giật */
    transform: translateZ(0); /* Hardware acceleration */
}

/* Loại bỏ hiệu ứng khi user muốn giảm motion */
@media (prefers-reduced-motion: reduce) {
    .optimized-btn {
        transition: none;
    }
}

/* ===== NÚT GỌI ĐIỆN (VÀNG) ===== */
.phone-btn-opt {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-light));
    animation: subtle-pulse 3s ease-in-out infinite;
}

.phone-btn-opt:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35), var(--btn-shadow-hover);
}

.phone-btn-opt:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.1s;
}

/* ===== NÚT ZALO (XANH DƯƠNG) ===== */
.zalo-btn-opt {
    background: linear-gradient(135deg, var(--zalo-blue), var(--zalo-blue-light));
    animation: subtle-pulse 3s ease-in-out infinite 0.3s;
}

.zalo-btn-opt:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 28px rgba(0, 104, 255, 0.35), var(--btn-shadow-hover);
}

/* ===== NÚT WHATSAPP (XANH LÁ) ===== */
.whatsapp-btn-opt {
    background: linear-gradient(135deg, var(--whatsapp-green), var(--whatsapp-green-light));
    animation: subtle-pulse 3s ease-in-out infinite 0.6s;
}

.whatsapp-btn-opt:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35), var(--btn-shadow-hover);
}

/* ===== ICON ===== */
.optimized-btn i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease;
}

.optimized-btn:hover i {
    transform: scale(1.1);
}

/* ===== TOOLTIP ĐƠN GIẢN ===== */
.optimized-tooltip {
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
}

.optimized-btn:hover .optimized-tooltip {
    opacity: 1;
    visibility: visible;
    right: 60px;
}

.optimized-tooltip:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-left: 6px solid rgba(30, 30, 30, 0.95);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* ===== BADGE THÔNG BÁO ===== */
.optimized-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #FF416C, #FF4B2B);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-black);
    box-shadow: 0 2px 6px rgba(255, 65, 108, 0.3);
    z-index: 3;
}

/* ===== ANIMATIONS TỐI ƯU ===== */
@keyframes subtle-pulse {
    0%, 100% { 
        transform: translateY(0) scale(1);
        box-shadow: var(--btn-shadow);
    }
    50% { 
        transform: translateY(-4px) scale(1.03);
        box-shadow: var(--btn-shadow-hover);
    }
}

/* Animation chỉ chạy khi không có prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .optimized-btn {
        animation-play-state: running;
    }
}

@media (prefers-reduced-motion: reduce) {
    .optimized-btn {
        animation: none !important;
    }
}

/* ===== RESPONSIVE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    .optimized-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    /* Giảm hiệu ứng hover trên mobile để tiết kiệm pin */
    .optimized-btn:hover {
        transform: none;
    }
    
    .optimized-btn:active {
        transform: scale(0.95);
    }
    
    .optimized-tooltip {
        display: none; /* Ẩn tooltip trên mobile */
    }
    
    /* Tắt animation infinite trên mobile để tiết kiệm pin */
    @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
        .optimized-btn {
            animation: subtle-pulse-mobile 4s ease-in-out infinite;
            animation-play-state: paused;
        }
        
        .optimized-btn:active {
            animation-play-state: running;
        }
        
        @keyframes subtle-pulse-mobile {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .optimized-tooltip {
        background: rgba(20, 20, 20, 0.98);
        border-color: rgba(255, 255, 255, 0.15);
    }
}

/* ===== SAFE AREA FOR IPHONE X+ ===== */
@supports (padding: max(0px)) {
    .contact-buttons-optimized {
        bottom: max(25px, env(safe-area-inset-bottom) + 15px);
        right: max(20px, env(safe-area-inset-right));
    }
    
    @media (max-width: 768px) {
        .contact-buttons-optimized {
            bottom: max(80px, env(safe-area-inset-bottom) + 70px);
            right: max(15px, env(safe-area-inset-right));
        }
    }
}


/* ===== PERFORMANCE OVERRIDES ===== */
/* Giảm hiệu ứng trên thiết bị yếu */
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
    .optimized-btn {
        animation-duration: 4s; /* Chậm hơn để tiết kiệm pin */
    }
}