/**
 * Hiển thị công thức MathJax CHTML: căn chỉnh, khoảng cách, cuộn ngang khi cần.
 * Dùng chung cho đề thi, CKEditor, xem trước LaTeX, chi tiết kết quả.
 */

.mathjax-content,
.latex-imported-doc,
.question-content,
#essay_latex_preview.active,
.essay-latex-body {
    font-variant-numeric: lining-nums;
}

.latex-imported-doc .latex-ul {
    list-style: disc;
}

.latex-imported-doc .latex-ol {
    list-style: decimal;
}

/* Công thức xen dòng — căn baseline với chữ */
mjx-container:not([display="true"]) {
    display: inline-block !important;
    vertical-align: -0.2em;
    margin: 0 0.14em;
    max-width: 100%;
}

/* Công thức hiển thị (display) — căn giữa, khoảng đệm rõ */
mjx-container[display="true"] {
    display: block !important;
    text-align: center !important;
    margin: 0.85em auto;
    padding: 0.4em 0.25em;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* Trong danh sách: không bị lệch quá so với dòng chữ */
.latex-imported-doc li mjx-container:not([display="true"]),
.question-content li mjx-container:not([display="true"]),
.ck-content li mjx-container:not([display="true"]) {
    vertical-align: -0.18em;
}

/* Nội dung đề / editor: dòng đọc thoáng hơn khi có nhiều công thức */
.latex-imported-doc,
.mathjax-content.latex-imported-doc {
    line-height: 1.65;
}

.question-content .latex-imported-doc,
.question-content.ck-content,
.essay-latex-body {
    line-height: 1.68;
}

/* Ô xem trước LaTeX trong modal */
#essay_latex_preview.active {
    line-height: 1.65;
    font-size: 1.02rem;
    color: #1e293b;
}

/* Vùng soạn CKEditor: công thức không dính sát viền */
.ck-content mjx-container:not([display="true"]) {
    display: inline-block !important;
    vertical-align: -0.2em;
    margin: 0 0.12em;
}

.ck-content mjx-container[display="true"] {
    margin-top: 0.65em;
    margin-bottom: 0.65em;
}

/* Khối công thức trong bảng / ô hẹp */
.question-content table mjx-container[display="true"],
.question-content td mjx-container[display="true"] {
    margin: 0.4em auto;
}

/* Ô xem trước cạnh CKEditor: nhấp công thức để sửa (manage_questions) */
.math-preview-host mjx-container.mjx-click-edit,
mjx-container.mjx-click-edit {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.math-preview-host mjx-container.mjx-click-edit:hover {
    background-color: rgba(13, 110, 253, 0.1);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.28);
}

/* Đoạn văn / tiêu đề trong ô xem trước — nhấp để sửa HTML */
.math-preview-host p,
.math-preview-host li,
.math-preview-host h1,
.math-preview-host h2,
.math-preview-host h3,
.math-preview-host h4,
.math-preview-host h5,
.math-preview-host h6,
.math-preview-host td,
.math-preview-host th,
.math-preview-host blockquote,
.math-preview-host div.text-center,
.math-preview-host figure,
.math-preview-host .latex-p {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}

.math-preview-host p:hover,
.math-preview-host li:hover,
.math-preview-host h1:hover,
.math-preview-host h2:hover,
.math-preview-host h3:hover,
.math-preview-host h4:hover,
.math-preview-host h5:hover,
.math-preview-host h6:hover,
.math-preview-host td:hover,
.math-preview-host th:hover,
.math-preview-host blockquote:hover,
.math-preview-host div.text-center:hover,
.math-preview-host figure:hover,
.math-preview-host .latex-p:hover {
    background-color: rgba(13, 110, 253, 0.07);
}

.math-preview-host .preview-inline-editing {
    outline: 2px solid rgba(13, 110, 253, 0.55);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.98);
}

/* Ô xem trước (#q_preview_container, …): công thức MathJax trực quan; tránh trông như “đoạn mã” */
.preview-box.mathjax-content {
    font-size: 1rem;
    line-height: 1.65;
    color: #1e293b;
}

.preview-box.mathjax-content code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Xem trước LaTeX trong ô mô tả rubric AI */
.essay-rubric-hint-preview {
    color: #1e293b;
    overflow-x: auto;
    max-width: 100%;
}

.essay-rubric-hint-preview mjx-container:not([display="true"]) {
    display: inline-block !important;
    vertical-align: -0.18em;
    margin: 0 0.08em;
}

input.essay-rubric-max-input {
    width: 4.35rem;
    max-width: 100%;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    font-variant-numeric: tabular-nums;
}