/* ========================================================================
   PUBLIC TYPOGRAPHY NORMALIZED 2026
   - Một system-font stack, không phụ thuộc CDN/font ngoài.
   - Base 16px: dễ đọc, tránh mobile browser tự zoom input <16px.
   - Không tác động font icon FontAwesome/Pe-icon.
   ======================================================================== */
:root {
    --public-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
    --public-base-font-size: 16px;
    --public-body-line-height: 1.65;
}

html { font-size: 16px; }

body,
button,
input,
select,
textarea {
    font-family: var(--public-ui-font) !important;
    font-size: var(--public-base-font-size);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { line-height: var(--public-body-line-height); }

/* Kế thừa cùng một font cho vùng chữ; không chọn i/.fa để bảo toàn icon-font. */
p, a, strong, b, em, small, label,
h1, h2, h3, h4, h5, h6,
li, td, th, blockquote, figcaption {
    font-family: var(--public-ui-font) !important;
}

.public-inner-page,
.public-article-page,
.public-category-page,
.article-content,
.list-item-modern,
.home-zone-rich-card,
.home-zone-rich-featured,
.news-home-main,
.news-home-row,
.mh-list-item,
.mh-side-news-body {
    font-family: var(--public-ui-font) !important;
}

.article-content,
.article-content p,
.article-content li,
.article-content td,
.article-content th {
    font-size: clamp(16px, 0.25vw + 15px, 18px) !important;
    line-height: 1.66 !important;
}

.article-content h1 { font-size: inherit !important; line-height: inherit !important; font-weight: 700; }
.article-content h2 { font-size: clamp(23px, 2vw, 28px) !important; line-height: 1.35 !important; }
.article-content h3 { font-size: clamp(20px, 1.6vw, 23px) !important; line-height: 1.4 !important; }
.article-content h4,
.article-content h5,
.article-content h6 { font-size: clamp(18px, 1.2vw, 20px) !important; line-height: 1.45 !important; }

/* Nội dung copy không được phép mang font/style nguồn làm lệch typography public. */
.article-content p,
.article-content div,
.article-content td,
.article-content th {
    font-family: var(--public-ui-font) !important;
}
/* V17: span/font có font-family do CKEditor tạo được phép hiển thị; paste ngoài đã bị lọc trước. */

@media (max-width: 767px) {
    html { font-size: 16px; }
    body, button, input, select, textarea { font-size: 16px; }
    .article-content,
    .article-content p,
    .article-content li,
    .article-content td,
    .article-content th {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}

/* ARTICLE BODY ALIGNMENT
   - Căn đều hai lề phần văn bản bài viết.
   - Không justify heading, metadata, caption, table hoặc cụm nút để tránh giãn chữ bất thường. */
.article-content > p,
.article-content > div:not(.meta) > p,
.article-content blockquote p,
.article-content-public > p,
.article-content-public > div > p {
    text-align: justify !important;
    text-justify: inter-word;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.article-content p,
.article-content-public p {
    margin-top: 0 !important;
    margin-bottom: 0.68em !important;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
.article-content .meta,
.article-content figcaption,
.article-content table,
.article-content-public h1,
.article-content-public h2,
.article-content-public h3,
.article-content-public h4,
.article-content-public h5,
.article-content-public h6,
.article-content-public figcaption,
.article-content-public table {
    text-align: initial;
}

/* V30 - Dàn đều nội dung bài chi tiết kể cả paragraph nằm sâu trong div do Word/CKEditor tạo.
   Các căn lề thủ công an toàn của CKEditor, ảnh và caption vẫn được override ở các rule phía dưới. */
.article-content p:not(.page-hero-date),
.article-content-public p {
    text-align: justify !important;
    text-justify: inter-word;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 767px) {
    .article-content > p,
    .article-content > div:not(.meta) > p,
    .article-content blockquote p,
    .article-content-public > p,
    .article-content-public > div > p {
        text-align: justify !important;
        text-align-last: auto;
    }
}

/* V14: chặn tuyệt đối font/size từ HTML nguồn ở vùng bài viết.
   Sanitizer đã bỏ style/class/font; CSS này là chốt hiển thị cho dữ liệu cũ chưa Save lại. */
.article-content p,
.article-content li,
.article-content blockquote,
.article-content td,
.article-content th,
.article-content div:not(.meta):not(.public-share):not(.public-nav-tools),
.article-content-public p,
.article-content-public li,
.article-content-public blockquote,
.article-content-public td,
.article-content-public th {
    font-family: var(--public-ui-font) !important;
    font-size: clamp(16px, 0.25vw + 15px, 18px) !important;
    line-height: 1.66 !important;
}

.article-content figcaption,
.article-content-public figcaption {
    font-family: var(--public-ui-font) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/* V15 - PRESERVE MANUAL ALIGNMENT FROM CKEDITOR
   Paragraphs are justified by default, but explicit safe text-align chosen by editor wins. */
.article-content [style*="text-align: left"],
.article-content-public [style*="text-align: left"] { text-align: left !important; }
.article-content [style*="text-align: center"],
.article-content-public [style*="text-align: center"] { text-align: center !important; }
.article-content [style*="text-align: right"],
.article-content-public [style*="text-align: right"] { text-align: right !important; }
.article-content [style*="text-align: justify"],
.article-content-public [style*="text-align: justify"] { text-align: justify !important; }

/* Ảnh bài viết và caption mặc định căn giữa, caption nằm sát dưới ảnh. */
.article-content p:has(> img),
.article-content-public p:has(> img) { text-align: center !important; }
.article-content p:has(> img:only-child) + p:has(> em:only-child),
.article-content p:has(> img:only-child) + p:has(> i:only-child),
.article-content p:has(> img:only-child) + p:has(> strong:only-child),
.article-content p:has(> img:only-child) + p:has(> b:only-child),
.article-content-public p:has(> img:only-child) + p:has(> em:only-child),
.article-content-public p:has(> img:only-child) + p:has(> i:only-child),
.article-content-public p:has(> img:only-child) + p:has(> strong:only-child),
.article-content-public p:has(> img:only-child) + p:has(> b:only-child) {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: -.45em !important;
    margin-bottom: 1.1em !important;
    color: #64748b;
}
.article-content figure > figcaption,
.article-content-public figure > figcaption {
    text-align: center !important;
    margin-top: .35em !important;
    margin-bottom: 1em !important;
    color: #64748b;
}


/* V18 - CKEditor manual Font Size preservation.
   Base paragraphs remain normalized; inline span/font size selected by administrator is allowed to render.
   External pasted sizes are removed before insertion and server only accepts CKEditor safe sizes. */
.article-content span[style*="font-size"],
.article-content font[style*="font-size"],
.article-content-public span[style*="font-size"],
.article-content-public font[style*="font-size"] {
    line-height: inherit;
}

/* ========================================================================
   V31 - ARTICLE DETAIL JUSTIFY AUTHORITY
   Fix tận gốc dữ liệu bài cũ từ Word/CKEditor có text-align:left !important
   hoặc text nằm trực tiếp trong DIV nên V30 chưa căn đều hai lề.
   Chỉ tác động thân bài chi tiết đã đánh dấu .article-body.
   ======================================================================== */
.public-article-page .article-content .article-body,
.public-article-page .article-content .article-body p,
.public-article-page .article-content .article-body div,
.public-article-page .article-content .article-body li,
.public-article-page .article-content .article-body blockquote {
    text-align: justify !important;
    text-justify: inter-word;
    text-align-last: auto;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* Dữ liệu cũ có căn trái inline từ Word/CKEditor không được thắng justify của thân bài. */
.public-article-page .article-content .article-body [style*="text-align:left"],
.public-article-page .article-content .article-body [style*="text-align: left"],
.public-article-page .article-content .article-body [align="left"] {
    text-align: justify !important;
    text-align-last: auto !important;
}

/* Không để khoảng cách đoạn tạo cảm giác dòng thò/thụt, nhưng không phá list/table. */
.public-article-page .article-content .article-body p {
    margin-top: 0 !important;
    margin-bottom: .62em !important;
    text-indent: 0 !important;
}

/* Heading không justify; giữ cách trình bày tiêu đề con tự nhiên. */
.public-article-page .article-content .article-body h1,
.public-article-page .article-content .article-body h2,
.public-article-page .article-content .article-body h3,
.public-article-page .article-content .article-body h4,
.public-article-page .article-content .article-body h5,
.public-article-page .article-content .article-body h6 {
    text-align: left !important;
    text-align-last: auto !important;
}

/* Ảnh/caption vẫn căn giữa, không bị rule justify thân bài kéo lệch. */
.public-article-page .article-content .article-body p:has(> img),
.public-article-page .article-content .article-body figure,
.public-article-page .article-content .article-body figcaption {
    text-align: center !important;
    text-align-last: auto !important;
}

/* Nếu quản trị viên chủ động căn giữa/phải một block (ví dụ chú thích), vẫn bảo toàn.
   Chỉ căn trái cũ bị chuyển sang justify theo yêu cầu hiển thị bài chi tiết. */
.public-article-page .article-content .article-body [style*="text-align:center"],
.public-article-page .article-content .article-body [style*="text-align: center"] {
    text-align: center !important;
}
.public-article-page .article-content .article-body [style*="text-align:right"],
.public-article-page .article-content .article-body [style*="text-align: right"] {
    text-align: right !important;
}


/* ========================================================================
   V32 - LEGACY ARTICLE HTML COMPATIBILITY
   Dữ liệu cũ có thể dùng SPAN + BR thay cho P. Coi SPAN trực tiếp có chữ như
   một đoạn văn để justify; BR ngay sau nó chỉ là dấu ngắt đoạn legacy nên ẩn.
   Chỉ áp dụng trong thân bài chi tiết, không ảnh hưởng Trang chủ/danh sách.
   ======================================================================== */
.public-article-page .article-content .article-body > span:not(:has(img)),
.public-article-page .article-content .article-content-public > span:not(:has(img)) {
    display: block !important;
    width: 100%;
    margin: 0 0 .62em !important;
    padding: 0 !important;
    text-align: justify !important;
    text-justify: inter-word;
    text-align-last: auto !important;
    text-indent: 0 !important;
    line-height: 1.66 !important;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Khi SPAN legacy đã trở thành một block paragraph, BR theo sau là dư thừa. */
.public-article-page .article-content .article-body > span:not(:has(img)) + br,
.public-article-page .article-content .article-content-public > span:not(:has(img)) + br {
    display: none !important;
}

/* Nếu dữ liệu legacy còn DIV trống lọt qua cache cũ thì không cho tạo khoảng trắng. */
.public-article-page .article-content .article-body > div:empty,
.public-article-page .article-content .article-content-public > div:empty,
.public-article-page .article-content .article-body > span:empty,
.public-article-page .article-content .article-content-public > span:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}