/* FAB MENU STYLE - Làm đẹp menu popup chức năng */

/* Container cho FAB và menu */
.fab-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
}

/* FAB button chính */
.fab {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 1000000 !important;
}

.fab:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.5) !important;
}

.fab:active {
    transform: scale(0.95) !important;
}

/* Menu dropdown của FAB - ONLY target FAB container */
.fab-container .dropdown-menu {
    position: absolute !important;
    bottom: 70px !important;
    right: 0 !important;
    width: 220px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 8px 20px rgba(39, 174, 96, 0.1) !important;
    padding: 12px 0 !important;
    transform: translateY(20px) scale(0.8) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(39, 174, 96, 0.1) !important;
}

/* Menu hiển thị */
.fab-container .dropdown-menu.show {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Menu items trong FAB menu */
.fab-container .menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    margin: 0 8px 8px 8px !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    gap: 12px !important;
    width: calc(100% - 16px) !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.fab-container .menu-item:last-child {
    margin-bottom: 0 !important;
}

.fab-container .menu-item i {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

.fab-container .menu-item span {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Màu đặc biệt cho từng chức năng */
/* Thêm chi tiêu - Xanh dương */
.fab-container .menu-item:nth-child(1) {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border-left: 4px solid #2c3e50 !important;
    color: white !important;
}

.fab-container .menu-item:nth-child(1) i {
    color: white !important;
}

.fab-container .menu-item:nth-child(1):hover {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%) !important;
    transform: translateX(-4px) scale(1.02) !important;
}

/* Gọi tên - Đỏ */
.fab-container .menu-item:nth-child(2) {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border-left: 4px solid #2c3e50 !important;
    color: white !important;
}

.fab-container .menu-item:nth-child(2) i {
    color: white !important;
}

.fab-container .menu-item:nth-child(2):hover {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
    transform: translateX(-4px) scale(1.02) !important;
}

/* Vòng quay may mắn - Cam */
.fab-container .menu-item:nth-child(3) {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    border-left: 4px solid #2c3e50 !important;
    color: white !important;
}

.fab-container .menu-item:nth-child(3) i {
    color: white !important;
}

.fab-container .menu-item:nth-child(3):hover {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%) !important;
    transform: translateX(-4px) scale(1.02) !important;
}

/* Chơi Loto - Tím */
.fab-container .menu-item:nth-child(4) {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
    border-left: 4px solid #2c3e50 !important;
    color: white !important;
}

.fab-container .menu-item:nth-child(4) i {
    color: white !important;
}

.fab-container .menu-item:nth-child(4):hover {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%) !important;
    transform: translateX(-4px) scale(1.02) !important;
}

/* Animation cho FAB khi menu mở */
.fab-container.active .fab {
    transform: rotate(45deg) !important;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .fab-container {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .fab-container .dropdown-menu {
        width: 200px !important;
        right: -10px !important;
    }
    
    .fab-container .menu-item {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    
    .fab-container .menu-item span {
        font-size: 16px !important;
    }
}