/* =========================================================
   KTMT - Responsive Math / LaTeX Block
   Dùng cho công thức dài:
   <div class="overflow-auto px-2 ktmt-math-block">$$...$$</div>
========================================================= */

.post-article-content .ktmt-math-block,
.ck-content .ktmt-math-block,
#ai_chatgpt_html_preview .ktmt-math-block {
    max-width: 100%;
    width: 100%;
    margin: 1rem 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Giữ đúng tinh thần class Bootstrap của anh */
.post-article-content .ktmt-math-block.px-2,
.ck-content .ktmt-math-block.px-2,
#ai_chatgpt_html_preview .ktmt-math-block.px-2 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* MathJax v3 */
.post-article-content .ktmt-math-block mjx-container,
.ck-content .ktmt-math-block mjx-container,
#ai_chatgpt_html_preview .ktmt-math-block mjx-container {
    max-width: none !important;
}

.post-article-content .ktmt-math-block mjx-container[display="true"],
.ck-content .ktmt-math-block mjx-container[display="true"],
#ai_chatgpt_html_preview .ktmt-math-block mjx-container[display="true"] {
    display: inline-block !important;
    min-width: max-content;
    margin: 0 !important;
    text-align: left !important;
}

/* MathJax v2 fallback nếu có */
.post-article-content .ktmt-math-block .MathJax_Display,
.ck-content .ktmt-math-block .MathJax_Display,
#ai_chatgpt_html_preview .ktmt-math-block .MathJax_Display {
    max-width: none !important;
    overflow-x: visible !important;
    margin: 0 !important;
    text-align: left !important;
}

/* KaTeX fallback nếu sau này dùng KaTeX */
.post-article-content .ktmt-math-block .katex-display,
.ck-content .ktmt-math-block .katex-display,
#ai_chatgpt_html_preview .ktmt-math-block .katex-display {
    margin: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

/* Scrollbar ngang nhẹ */
.post-article-content .ktmt-math-block::-webkit-scrollbar,
.ck-content .ktmt-math-block::-webkit-scrollbar,
#ai_chatgpt_html_preview .ktmt-math-block::-webkit-scrollbar {
    height: 6px;
}

.post-article-content .ktmt-math-block::-webkit-scrollbar-thumb,
.ck-content .ktmt-math-block::-webkit-scrollbar-thumb,
#ai_chatgpt_html_preview .ktmt-math-block::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.post-article-content .ktmt-math-block::-webkit-scrollbar-track,
.ck-content .ktmt-math-block::-webkit-scrollbar-track,
#ai_chatgpt_html_preview .ktmt-math-block::-webkit-scrollbar-track {
    background: transparent;
}

/* Mobile */
@media (max-width: 576px) {
    .post-article-content .ktmt-math-block,
    .ck-content .ktmt-math-block,
    #ai_chatgpt_html_preview .ktmt-math-block {
        margin: 0.875rem 0;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-radius: 8px;
    }
}