/* 
 * Font Awesome Fallback Icons
 * Sử dụng Unicode symbols khi Font Awesome không load được
 */

/* Fallback cho các icons chính */
.fa-desktop::before,
.fas.fa-desktop::before { content: "🖥️"; }

.fa-tools::before,
.fas.fa-tools::before { content: "🔧"; }

.fa-laptop-code::before,
.fas.fa-laptop-code::before { content: "💻"; }

.fa-code::before,
.fas.fa-code::before { content: "⌨️"; }

.fa-cogs::before,
.fas.fa-cogs::before { content: "⚙️"; }

.fa-microchip::before,
.fas.fa-microchip::before { content: "🔌"; }

.fa-digital-tachograph::before,
.fas.fa-digital-tachograph::before { content: "📊"; }

.fa-clock::before,
.fas.fa-clock::before { content: "⏰"; }

.fa-shield-alt::before,
.fas.fa-shield-alt::before { content: "🛡️"; }

.fa-users::before,
.fas.fa-users::before { content: "👥"; }

.fa-dollar-sign::before,
.fas.fa-dollar-sign::before { content: "💰"; }

.fa-phone::before,
.fas.fa-phone::before { content: "📞"; }

.fa-envelope::before,
.fas.fa-envelope::before { content: "📧"; }

.fa-map-marker-alt::before,
.fas.fa-map-marker-alt::before { content: "📍"; }

.fa-comments::before,
.fas.fa-comments::before { content: "💬"; }

.fa-facebook-messenger::before,
.fab.fa-facebook-messenger::before { content: "💬"; }

/* Fallback styles */
.fa-fallback {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply fallback when Font Awesome is not available */
.no-fontawesome .fas,
.no-fontawesome .fab,
.no-fontawesome .far,
.no-fontawesome .fal,
.no-fontawesome .fad {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* Maintain blue color scheme even with emoji fallback */
.no-fontawesome .service-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.no-fontawesome .contact-item i,
.no-fontawesome .feature i,
.no-fontawesome .footer-section ul li i {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.1) !important;
}

.no-fontawesome .contact-item:hover i,
.no-fontawesome .feature:hover i {
    color: #1d4ed8 !important;
    background: rgba(37, 99, 235, 0.2) !important;
}

/* Ensure proper sizing for emoji fallbacks */
.no-fontawesome .fas::before,
.no-fontawesome .fab::before,
.no-fontawesome .far::before,
.no-fontawesome .fal::before,
.no-fontawesome .fad::before {
    font-size: 0.9em;
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

/* Specific adjustments for different contexts */
.nav .no-fontawesome .fas::before {
    font-size: 1em;
}

.service-card .no-fontawesome .fas::before {
    font-size: 2em;
    margin-bottom: 0.5rem;
}

.feature .no-fontawesome .fas::before {
    font-size: 1.5em;
}

/* Loading indicator for icons */
.icon-loading {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 2px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hide loading indicator when icons are loaded */
.fontawesome-loaded .icon-loading {
    display: none;
}