:root {
    --tvtai-section-blue: #0878c9;
    --tvtai-section-blue-dark: #075a96;
    --tvtai-subsection-red: #d62828;
    --tvtai-text: #1f2937;
    --tvtai-muted: #64748b;
}

/* =========================================================
   TIÊU ĐỀ MỤC LỚN
   Bài cũ + bài mới đều đồng bộ
   ========================================================= */

.tvtai-section-title,
[role="main"] h2 {
    color: var(--tvtai-section-blue) !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;

    margin-top: 30px;
    margin-bottom: 16px;
    margin-left: 0 !important;

    padding: 9px 12px;

    border-left: 5px solid var(--tvtai-section-blue);

    background: linear-gradient(
        90deg,
        rgba(8, 120, 201, 0.09),
        rgba(8, 120, 201, 0)
    );

    border-radius: 4px;

    text-indent: 0 !important;
}

/* =========================================================
   TIÊU ĐỀ NHỎ
   Khái niệm, Ví dụ, Luyện tập...
   ========================================================= */

.tvtai-subsection-title,
[role="main"] h3 {
    color: var(--tvtai-subsection-red) !important;
    font-size: 1.20rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;

    margin-top: 22px;
    margin-bottom: 10px;
    margin-left: 0 !important;

    text-indent: 0 !important;
}

/* Gạch đỏ nhỏ trước h3 có class riêng */
.tvtai-subsection-title::before {
    content: "";
    display: inline-block;

    width: 4px;
    height: 1em;

    margin-right: 8px;

    background: var(--tvtai-subsection-red);

    border-radius: 4px;

    vertical-align: -0.1em;
}

/* =========================================================
   TIÊU ĐỀ CẤP NHỎ HƠN
   ========================================================= */

.tvtai-minor-title,
[role="main"] h4 {
    color: var(--tvtai-section-blue-dark) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    margin-top: 18px;
    margin-bottom: 8px;
    margin-left: 0 !important;

    text-indent: 0 !important;
}

[role="main"] h5 {
    color: var(--tvtai-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;

    margin-left: 0 !important;

    text-indent: 0 !important;
}

/* =========================================================
   VĂN BẢN
   Toàn bộ đoạn thụt vào đều nhau
   ========================================================= */

[role="main"] p {
    color: var(--tvtai-text);

    line-height: 1.65;

    margin-top: 0.6em;
    margin-bottom: 0.9em;

    margin-left: 40px !important;
    margin-right: 20px !important;

    text-indent: 0 !important;
}

/* =========================================================
   DANH SÁCH
   ========================================================= */

[role="main"] ul,
[role="main"] ol {
    margin-left: 40px !important;
    margin-right: 20px !important;

    padding-left: 1.8em;
}

[role="main"] li {
    color: var(--tvtai-text);

    line-height: 1.6;

    text-indent: 0 !important;

    margin-bottom: 5px;
}

/* =========================================================
   CAPTION HÌNH
   ========================================================= */

[role="main"] .tvtai-figure-caption,
[role="main"] figcaption {
    text-indent: 0 !important;

    text-align: center;

    color: var(--tvtai-muted);

    font-size: 0.95rem;

    font-style: italic;

    margin-top: 8px;
    margin-bottom: 18px;
    margin-left: 40px !important;
    margin-right: 20px !important;
}

/* =========================================================
   HÌNH ẢNH
   ========================================================= */

[role="main"] img {
    max-width: 100%;
    height: auto;
}

[role="main"] figure {
    margin-top: 20px;
    margin-bottom: 20px;

    margin-left: 40px !important;
    margin-right: 20px !important;

    text-align: center;
}

[role="main"] figure img {
    display: block;

    margin-left: auto;
    margin-right: auto;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;
}

/* =========================================================
   CÔNG THỨC MATHJAX
   ========================================================= */

[role="main"] mjx-container[display="true"] {
    text-indent: 0 !important;

    margin-top: 16px !important;
    margin-bottom: 16px !important;

    margin-left: 40px !important;
    margin-right: 20px !important;

    overflow-x: auto;
    overflow-y: hidden;
}

/* MathJax nội dòng không bị đẩy riêng */
[role="main"] p mjx-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   BLOCKQUOTE / KHỐI GHI CHÚ
   ========================================================= */

[role="main"] blockquote {
    margin-top: 18px;
    margin-bottom: 18px;

    margin-left: 40px !important;
    margin-right: 20px !important;

    padding: 12px 16px;

    border-left: 4px solid var(--tvtai-section-blue);

    background: #f8fbff;

    border-radius: 6px;

    color: var(--tvtai-text);
}

[role="main"] blockquote p {
    margin-left: 0 !important;
    margin-right: 0 !important;

    text-indent: 0 !important;
}

/* =========================================================
   BẢNG
   ========================================================= */

[role="main"] table {
    width: calc(100% - 60px) !important;

    border-collapse: collapse;

    margin-top: 14px;
    margin-bottom: 18px;

    margin-left: 40px !important;
    margin-right: 20px !important;
}

[role="main"] table th,
[role="main"] table td {
    padding: 8px 10px;

    vertical-align: top;
}

[role="main"] table p,
[role="main"] table li {
    margin-left: 0 !important;
    margin-right: 0 !important;

    text-indent: 0 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .tvtai-section-title,
    [role="main"] h2 {
        font-size: 1.30rem !important;

        margin-top: 24px;

        padding: 8px 10px;
    }

    .tvtai-subsection-title,
    [role="main"] h3 {
        font-size: 1.12rem !important;
    }

    .tvtai-minor-title,
    [role="main"] h4 {
        font-size: 1.02rem !important;
    }

    [role="main"] p,
    [role="main"] ul,
    [role="main"] ol,
    [role="main"] blockquote,
    [role="main"] figure,
    [role="main"] mjx-container[display="true"] {
        margin-left: 20px !important;
        margin-right: 10px !important;
    }

    [role="main"] p mjx-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [role="main"] table {
        width: calc(100% - 30px) !important;

        margin-left: 20px !important;
        margin-right: 10px !important;
    }

    [role="main"] .tvtai-figure-caption,
    [role="main"] figcaption {
        margin-left: 20px !important;
        margin-right: 10px !important;
    }
}