/* ==========================================================================
   Detail Headings Typography (Classic Heritage - Phong cách mỹ thuật Nếp Xưa)
   Áp dụng đồng bộ cho tất cả các loại bài viết chi tiết:
   - Bài viết / Tin tức văn hóa: .article-reading-body, .article-reading-container
   - Sự kiện & Tọa đàm: .event-content-section
   - Khóa học & Đào tạo: .course-rich-content, .course-section-block
   ========================================================================== */

/* 1. Thiết lập chung cho toàn bộ Headings trong nội dung chi tiết */
.article-reading-body h1,
.article-reading-body h2,
.article-reading-body h3,
.article-reading-body h4,
.article-reading-body h5,
.article-reading-body h6,
.article-reading-container h1,
.article-reading-container h2,
.article-reading-container h3,
.article-reading-container h4,
.article-reading-container h5,
.article-reading-container h6,
.event-content-section h1,
.event-content-section h2,
.event-content-section h3,
.event-content-section h4,
.event-content-section h5,
.event-content-section h6,
.course-rich-content h1,
.course-rich-content h2,
.course-rich-content h3,
.course-rich-content h4,
.course-rich-content h5,
.course-rich-content h6,
.course-section-block h1,
.course-section-block h2,
.course-section-block h3,
.course-section-block h4,
.course-section-block h5,
.course-section-block h6,
.article-block-heading {
    color: var(--color-red, #961b20);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin-top: calc(32px * var(--ratio, 1));
    margin-bottom: calc(14px * var(--ratio, 1));
}

/* 2. Cấp H1: Tiêu đề trang / Tiêu đề chính bài viết */
.article-reading-body h1,
.article-reading-container h1,
.event-content-section h1,
.course-rich-content h1,
.course-section-block h1,
.article-block-heading.h1,
.article-reading-title,
.course-detail-title {
    font-family: "1FTV VIP Inflammable Age", sans-serif;
    font-size: calc(36px * var(--ratio, 1));
    line-height: calc(44px * var(--ratio, 1));
    font-weight: 700;
    color: var(--color-red, #961b20);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: calc(20px * var(--ratio, 1));
    margin-bottom: calc(20px * var(--ratio, 1));
    position: relative;
}

/* 3. Cấp H2: Đề mục lớn / Chương mục chính */
.article-reading-body h2,
.article-reading-container h2,
.event-content-section h2,
.course-rich-content h2,
.course-section-block h2,
.course-block-title,
.article-block-heading.h2 {
    font-family: "1FTV VIP Inflammable Age", sans-serif;
    font-size: calc(26px * var(--ratio, 1));
    line-height: calc(34px * var(--ratio, 1));
    font-weight: 700;
    color: var(--color-red, #961b20);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: calc(36px * var(--ratio, 1));
    margin-bottom: calc(16px * var(--ratio, 1));
    padding-bottom: calc(10px * var(--ratio, 1));
    border-bottom: 1px dashed rgb(150 27 32 / 24%);
    position: relative;
}

/* Điểm nhấn hoa văn nhỏ cuối vạch border-bottom của H2 */
.article-reading-body h2::after,
.event-content-section h2::after,
.course-rich-content h2::after,
.course-block-title::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: calc(40px * var(--ratio, 1));
    height: 5px;
    background: linear-gradient(90deg, var(--color-red, #961b20), transparent);
    border-radius: 2px;
}

/* 4. Cấp H3: Tiểu mục phân cấp */
.article-reading-body h3,
.article-reading-container h3,
.event-content-section h3,
.course-rich-content h3,
.course-section-block h3,
.article-block-heading.h3 {
    font-family: "1FTV VIP Inflammable Age", sans-serif;
    font-size: calc(21px * var(--ratio, 1));
    line-height: calc(29px * var(--ratio, 1));
    font-weight: 600;
    color: #7a171c;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: calc(28px * var(--ratio, 1));
    margin-bottom: calc(12px * var(--ratio, 1));
    padding-left: calc(12px * var(--ratio, 1));
    border-left: 3.5px solid var(--color-red, #961b20);
}

/* 5. Cấp H4: Mục nhỏ / Nhánh nội dung con */
.article-reading-body h4,
.article-reading-container h4,
.event-content-section h4,
.course-rich-content h4,
.course-section-block h4,
.article-block-heading.h4 {
    font-family: "SVN-Beast", serif;
    font-size: calc(18px * var(--ratio, 1));
    line-height: calc(26px * var(--ratio, 1));
    font-weight: 700;
    color: #4a2325;
    letter-spacing: 0.3px;
    margin-top: calc(24px * var(--ratio, 1));
    margin-bottom: calc(10px * var(--ratio, 1));
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ratio, 1));
}

.article-reading-body h4::before,
.event-content-section h4::before,
.course-rich-content h4::before {
    content: "◆";
    font-size: calc(11px * var(--ratio, 1));
    color: var(--color-red, #961b20);
    opacity: 0.85;
}

/* 6. Cấp H5, H6: Tiêu đề phụ ngắn / Ghi chú đề mục */
.article-reading-body h5,
.article-reading-body h6,
.event-content-section h5,
.event-content-section h6,
.course-rich-content h5,
.course-rich-content h6 {
    font-family: "SVN-Beast", serif;
    font-size: calc(16px * var(--ratio, 1));
    line-height: calc(24px * var(--ratio, 1));
    font-weight: 600;
    font-style: italic;
    color: #6b4c4e;
    margin-top: calc(20px * var(--ratio, 1));
    margin-bottom: calc(8px * var(--ratio, 1));
}

.article-reading-body h6,
.event-content-section h6,
.course-rich-content h6 {
    font-size: calc(14px * var(--ratio, 1));
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
    color: #835b5e;
}

/* 7. Trích dẫn mở đầu (Sapo / Lead excerpt) */
.article-reading-sapo,
.course-detail-excerpt {
    font-family: "SVN-Beast", serif;
    font-size: calc(18px * var(--ratio, 1));
    line-height: calc(29px * var(--ratio, 1));
    font-weight: 600;
    color: #3b1d1f;
    padding: calc(16px * var(--ratio, 1)) calc(22px * var(--ratio, 1));
    background-color: rgb(150 27 32 / 4.5%);
    border-left: 4px solid var(--color-red, #961b20);
    border-radius: 0 calc(4px * var(--ratio, 1)) calc(4px * var(--ratio, 1)) 0;
    margin-bottom: calc(28px * var(--ratio, 1));
}

/* 8. Responsive điều chỉnh tỷ lệ cho màn hình nhỏ */
@media screen and (max-width: 768px) {
    .article-reading-body h1,
    .article-reading-container h1,
    .article-reading-title,
    .course-detail-title {
        font-size: 26px;
        line-height: 34px;
        margin-top: 16px;
        margin-bottom: 14px;
    }

    .article-reading-body h2,
    .article-reading-container h2,
    .event-content-section h2,
    .course-rich-content h2,
    .course-block-title {
        font-size: 21px;
        line-height: 28px;
        margin-top: 26px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .article-reading-body h3,
    .article-reading-container h3,
    .event-content-section h3,
    .course-rich-content h3 {
        font-size: 18px;
        line-height: 25px;
        margin-top: 22px;
        margin-bottom: 10px;
        padding-left: 10px;
        border-left-width: 3px;
    }

    .article-reading-body h4,
    .event-content-section h4,
    .course-rich-content h4 {
        font-size: 16px;
        line-height: 23px;
        margin-top: 18px;
        margin-bottom: 8px;
    }

    .article-reading-body h5,
    .article-reading-body h6,
    .event-content-section h5,
    .event-content-section h6,
    .course-rich-content h5,
    .course-rich-content h6 {
        font-size: 14px;
        line-height: 21px;
    }

    .article-reading-sapo,
    .course-detail-excerpt {
        font-size: 16px;
        line-height: 25px;
        padding: 12px 14px;
    }
}