/*!
 * Privacy Policy Icons Fix
 * Đảm bảo tất cả icon trong privacy policy hiển thị đúng
 */

/* Đảm bảo icon section hiển thị đúng */
.section-icon {
    color: #3b82f6 !important;
    font-size: 1.3rem !important;
    margin-right: 10px !important;
    display: inline-block !important;
    width: 1.5em !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Fallback cho các icon không load được */
.no-fontawesome .section-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 1.2rem !important;
}

/* Đảm bảo icon trong last-updated hiển thị */
.last-updated i {
    margin-right: 8px !important;
    color: white !important;
    font-size: 0.9rem !important;
}

.no-fontawesome .last-updated i {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* Icon trong contact info */
.contact-info i {
    margin-right: 8px !important;
    color: white !important;
}

.no-fontawesome .contact-info i {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* Icon trong back button */
.btn-back i {
    margin-right: 8px !important;
    color: white !important;
}

.no-fontawesome .btn-back i {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* Đảm bảo tất cả icon FontAwesome có fallback */
.privacy-container .fas,
.privacy-container .far,
.privacy-container .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Khi Font Awesome không load được */
.no-fontawesome .privacy-container .fas,
.no-fontawesome .privacy-container .far,
.no-fontawesome .privacy-container .fab {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-weight: normal !important;
}

/* Specific icon fixes */
.privacy-container .fa-calendar-alt::before { content: "\f133"; }
.privacy-container .fa-info-circle::before { content: "\f05a"; }
.privacy-container .fa-database::before { content: "\f1c0"; }
.privacy-container .fa-bullseye::before { content: "\f140"; }
.privacy-container .fa-share-alt::before { content: "\f1e0"; }
.privacy-container .fa-shield-alt::before { content: "\f3ed"; }
.privacy-container .fa-gavel::before { content: "\f0e3"; }
.privacy-container .fa-cookie-bite::before { content: "\f564"; }
.privacy-container .fa-hourglass-half::before { content: "\f252"; }
.privacy-container .fa-globe::before { content: "\f0ac"; }
.privacy-container .fa-sync-alt::before { content: "\f2f1"; }
.privacy-container .fa-home::before { content: "\f015"; }

/* Force icon display */
.privacy-container i[class*="fa-"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Loading state for icons */
.privacy-container .icon-loading {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: iconLoading 1.5s infinite;
    border-radius: 3px;
    margin-right: 10px;
}

@keyframes iconLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hide loading when icons are loaded */
.fontawesome-loaded .privacy-container .icon-loading {
    display: none !important;
}

/* Ensure proper spacing and alignment */
.section-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.section-title i {
    flex-shrink: 0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .section-icon {
        font-size: 1.1rem !important;
        width: 1.3em !important;
    }
    
    .no-fontawesome .section-icon {
        font-size: 1rem !important;
    }
}