/* 
 * ICONS OVERRIDE - Đảm bảo tất cả icons có nền xanh và biểu tượng trắng
 * Priority cao nhất với !important
 */

/* ===========================================
   SERVICE ICONS - Nền xanh, icon trắng
   =========================================== */
.service-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.service-icon i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4) !important;
}

.service-card:hover .service-icon i {
    color: #ffffff !important;
}

/* ===========================================
   FEATURE ICONS - Nền xanh, icon trắng
   =========================================== */
.feature i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.feature:hover i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
}

/* ===========================================
   CONTACT ICONS - Nền xanh, icon trắng
   =========================================== */
.contact-item i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.contact-item:hover i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
}

/* ===========================================
   FOOTER ICONS - Giữ màu xanh (phù hợp nền đen)
   =========================================== */
.footer-logo i,
.footer-section h4,
.footer-slogan,
.footer-section ul li i {
    color: #2563eb !important;
}

/* ===========================================
   BUTTON STYLES - Đảm bảo 2 buttons giống nhau
   =========================================== */
.btn-primary,
.btn-secondary {
    background: white !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1) !important;
}

.btn-primary:hover,
.btn-secondary:hover {
    background: #2563eb !important;
    color: white !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.3) !important;
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* ===========================================
   FONT AWESOME OVERRIDES - Đảm bảo tất cả FA icons
   =========================================== */
.service-icon .fas,
.service-icon .far,
.service-icon .fab,
.service-icon .fal,
.service-icon .fad {
    color: #ffffff !important;
}

.feature .fas,
.feature .far,
.feature .fab,
.feature .fal,
.feature .fad {
    color: #ffffff !important;
}

.contact-item .fas,
.contact-item .far,
.contact-item .fab,
.contact-item .fal,
.contact-item .fad {
    color: #ffffff !important;
}

/* ===========================================
   EMOJI FALLBACK OVERRIDES
   =========================================== */
.no-fontawesome .service-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.no-fontawesome .feature i,
.no-fontawesome .contact-item i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.no-fontawesome .feature:hover i,
.no-fontawesome .contact-item:hover i {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
}

/* ===========================================
   LANGUAGE SWITCHER STYLES
   =========================================== */
.lang-btn {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    border: none !important;
    background: #6c757d !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    margin: 5px !important;
}

.lang-btn:hover {
    opacity: 0.8 !important;
    background: #5a6268 !important;
}

.lang-btn.active {
    font-weight: bold !important;
    background: #2563eb !important;
    color: white !important;
}

/* ===========================================
   RESPONSIVE OVERRIDES
   =========================================== */
@media (max-width: 768px) {
    .service-icon,
    .feature i,
    .contact-item i {
        background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    }
    
    .service-icon i,
    .feature i,
    .contact-item i {
        color: #ffffff !important;
    }
}

/* ===========================================
   HIGH CONTRAST MODE
   =========================================== */
@media (prefers-contrast: high) {
    .service-icon,
    .feature i,
    .contact-item i {
        background: #1d4ed8 !important;
    }
    
    .service-icon i,
    .feature i,
    .contact-item i {
        color: #ffffff !important;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
    .service-icon,
    .feature i,
    .contact-item i {
        background: none !important;
        color: #2563eb !important;
        border: 2px solid #2563eb !important;
    }
}