/*
 * PATCH: KHẮC PHỤC VẤN ĐỀ CHỮ NGHIÊNG TRONG FRONTEND
 * File: css/italic-font-fix.css
 * 
 * Vấn đề: Chữ nghiêng hiển thị khác nhau giữa editor và frontend
 * Nguyên nhân: Font Inter không load đầy đủ variant italic, CSS inheritance issues
 * 
 * Giải pháp: 
 * 1. Import đầy đủ các font variant italic của Inter
 * 2. Đảm bảo CSS specificity cao cho italic text
 * 3. Fix font-weight và font-family cho italic elements
 */

/* 1. IMPORT ĐẦY ĐỦ FONT INTER VỚI CÁC VARIANT ITALIC */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* 2. ĐẢM BẢO FONT FALLBACK CHO ITALIC TEXT */
@font-face {
    font-family: 'Inter-Italic-Fallback';
    src: local('Inter'), local('Arial'), local('Helvetica'), local('sans-serif');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

/* 3. CSS SPECIFICITY CAO CHO ITALIC TEXT TRONG ARTICLE BODY */
#articleBodyContent em,
#articleBodyContent i,
.article-body em,
.article-body i,
#articleBodyContent.prose em,
#articleBodyContent.prose i,
#articleBodyContent.article-body em,
#articleBodyContent.article-body i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: inherit !important; /* Giữ nguyên font-weight của parent */
    font-synthesis: style !important; /* Cho phép browser tạo italic nếu không có font italic */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 4. ĐẶC BIỆT CHO ITALIC TEXT TRONG STRONG/BOLD */
#articleBodyContent strong em,
#articleBodyContent strong i,
#articleBodyContent b em,
#articleBodyContent b i,
#articleBodyContent em strong,
#articleBodyContent i strong,
#articleBodyContent em b,
#articleBodyContent i b,
.article-body strong em,
.article-body strong i,
.article-body b em,
.article-body b i,
.article-body em strong,
.article-body i strong,
.article-body em b,
.article-body i b {
    font-style: italic !important;
    font-weight: 700 !important; /* Bold + Italic */
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-synthesis: weight style !important;
}

/* 5. ITALIC TEXT TRONG HEADINGS */
#articleBodyContent h1 em, #articleBodyContent h1 i,
#articleBodyContent h2 em, #articleBodyContent h2 i,
#articleBodyContent h3 em, #articleBodyContent h3 i,
#articleBodyContent h4 em, #articleBodyContent h4 i,
#articleBodyContent h5 em, #articleBodyContent h5 i,
#articleBodyContent h6 em, #articleBodyContent h6 i,
.article-body h1 em, .article-body h1 i,
.article-body h2 em, .article-body h2 i,
.article-body h3 em, .article-body h3 i,
.article-body h4 em, .article-body h4 i,
.article-body h5 em, .article-body h5 i,
.article-body h6 em, .article-body h6 i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: inherit !important; /* Giữ nguyên font-weight của heading */
}

/* 6. ITALIC TEXT TRONG BLOCKQUOTE */
#articleBodyContent blockquote em,
#articleBodyContent blockquote i,
.article-body blockquote em,
.article-body blockquote i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 500 !important; /* Medium weight cho blockquote italic */
}

/* 7. ITALIC TEXT TRONG LISTS */
#articleBodyContent li em,
#articleBodyContent li i,
.article-body li em,
.article-body li i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: inherit !important;
}

/* 8. ITALIC TEXT TRONG TABLE CELLS */
#articleBodyContent td em,
#articleBodyContent td i,
#articleBodyContent th em,
#articleBodyContent th i,
.article-body td em,
.article-body td i,
.article-body th em,
.article-body th i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: inherit !important;
}

/* 9. OVERRIDE CHO CÁC ELEMENT CÓ STYLE INLINE */
#articleBodyContent [style*="font-style: italic"],
#articleBodyContent [style*="font-style:italic"],
.article-body [style*="font-style: italic"],
.article-body [style*="font-style:italic"] {
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 10. FALLBACK CHO BROWSER KHÔNG HỖ TRỢ FONT SYNTHESIS */
@supports not (font-synthesis: style) {
    #articleBodyContent em,
    #articleBodyContent i,
    .article-body em,
    .article-body i {
        /* Fallback: sử dụng transform nếu không có font italic */
        transform: skew(-8deg, 0deg);
        display: inline-block;
        font-style: normal;
    }
}

/* 11. RESPONSIVE: TỐI ƯU HÓA CHO MOBILE */
@media (max-width: 768px) {
    #articleBodyContent em,
    #articleBodyContent i,
    .article-body em,
    .article-body i {
        /* Trên mobile, đảm bảo italic text dễ đọc */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* 12. HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
    #articleBodyContent em,
    #articleBodyContent i,
    .article-body em,
    .article-body i {
        font-weight: 500 !important; /* Tăng độ đậm để dễ đọc hơn */
    }
}

/* 13. PRINT STYLES */
@media print {
    #articleBodyContent em,
    #articleBodyContent i,
    .article-body em,
    .article-body i {
        font-style: italic !important;
        font-family: Georgia, 'Times New Roman', serif !important; /* Font serif cho print */
        color: #000000 !important;
    }
}

/* 14. ĐẢM BẢO CONSISTENCY VỚI CKEDITOR */
.ck-content em,
.ck-content i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: inherit !important;
    font-synthesis: style !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 15. PREVENT FONT OVERRIDE BY OTHER CSS */
#articleBodyContent.prose.prose-lg em,
#articleBodyContent.prose.prose-lg i,
#articleBodyContent.article-body.prose em,
#articleBodyContent.article-body.prose i {
    font-style: italic !important;
    font-family: 'Inter', 'Inter-Italic-Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* 16. DEBUGGING: HIGHLIGHT ITALIC TEXT (XÓA SAU KHI KIỂM TRA) */
/*
#articleBodyContent em,
#articleBodyContent i,
.article-body em,
.article-body i {
    background: rgba(255, 255, 0, 0.1);
    outline: 1px dotted red;
}
*/