/**
 * Quick Menu Colors Fix
 * Ensure text and icons are light colored
 */

@media (min-width: 768px) {
    /* Force white/light text on all quick menu items */
    html body .quick-menu-item {
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    }
    
    /* Ensure icons are also white */
    html body .quick-menu-item .quick-menu-icon {
        color: #ffffff !important;
    }
    
    /* Make sure Font Awesome icons inherit color */
    html body .quick-menu-item i,
    html body .quick-menu-item .fa,
    html body .quick-menu-item .fas,
    html body .quick-menu-item .far {
        color: inherit !important;
    }
    
    /* Soi Cầu - Orange gradient with white text */
    html body .quick-menu-item.soi-cau {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
        color: #ffffff !important;
    }
    
    html body .quick-menu-item.soi-cau:hover {
        background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
        color: #ffffff !important;
    }
    
    /* Thống Kê - Green gradient with white text */
    html body .quick-menu-item.thong-ke {
        background: linear-gradient(135deg, #27ae60 0%, #16a085 100%) !important;
        color: #ffffff !important;
    }
    
    html body .quick-menu-item.thong-ke:hover {
        background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%) !important;
        color: #ffffff !important;
    }
    
    /* Kết Quả - Purple gradient with white text */
    html body .quick-menu-item.ket-qua {
        background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%) !important;
        color: #ffffff !important;
    }
    
    html body .quick-menu-item.ket-qua:hover {
        background: linear-gradient(135deg, #9b59b6 0%, #a569bd 100%) !important;
        color: #ffffff !important;
    }
    
    /* Quay Thử - Red gradient with white text */
    html body .quick-menu-item.quay-thu {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        color: #ffffff !important;
    }
    
    html body .quick-menu-item.quay-thu:hover {
        background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
        color: #ffffff !important;
    }
    
    /* Default items without specific class - Blue gradient */
    html body .quick-menu-item:not(.soi-cau):not(.thong-ke):not(.ket-qua):not(.quay-thu) {
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
        color: #ffffff !important;
    }
    
    html body .quick-menu-item:not(.soi-cau):not(.thong-ke):not(.ket-qua):not(.quay-thu):hover {
        background: linear-gradient(135deg, #2980b9 0%, #21618c 100%) !important;
        color: #ffffff !important;
    }
    
    /* Ensure text remains white on hover */
    html body .quick-menu-item:hover {
        color: #ffffff !important;
    }
    
    html body .quick-menu-item:hover .quick-menu-icon {
        color: #ffffff !important;
    }
    
    /* Fix for any link color inheritance */
    html body .quick-menu-item span {
        color: inherit !important;
    }
}