/* ============================================================
   KCThanhHoa - ARTICLE READER V10 - 19/08/2026
   Mục tiêu:
   - /bai-viet/{id} dùng cùng hệ font Arial/Helvetica với Trang chủ.
   - Cỡ chữ thân bài rõ, dễ đọc như các báo điện tử hiện đại.
   - CSS website làm chủ; HTML legacy không quyết định font/style.
   - Không thay đổi cấu trúc chức năng, gallery, video, sidebar liên kết.
   ============================================================ */

:root{
    --kc-reader-font: var(--kc-global-font-family, Arial, Helvetica, sans-serif);
    --kc-reader-text: #20252b;
    --kc-reader-muted: #64748b;
    --kc-reader-link: #0f5ea8;
    --kc-reader-heading: #153f73;
    --kc-reader-line: #e5e7eb;
}

html body .article-reader-hero{
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 22px 26px !important;
    text-align: left !important;
}

html body .article-reader-hero h1{
    margin: 0 !important;
    font-family: var(--kc-reader-font) !important;
    font-size: clamp(28px, 2.7vw, 38px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    color: var(--kc-reader-heading) !important;
    text-align: left !important;
    overflow-wrap: anywhere;
}

html body .article-reader-hero .article-date{
    margin-top: 10px !important;
    color: var(--kc-reader-muted) !important;
    font-family: var(--kc-reader-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

html body .article-reader-content{
    font-family: var(--kc-reader-font) !important;
    color: var(--kc-reader-text) !important;
    padding: 28px 30px !important;
    overflow-wrap: break-word;
}

html body .article-reader-content,
html body .article-reader-content p,
html body .article-reader-content li,
html body .article-reader-content td,
html body .article-reader-content th,
html body .article-reader-content blockquote,
html body .article-reader-content a,
html body .article-reader-content span,
html body .article-reader-content div{
    font-family: var(--kc-reader-font) !important;
}

html body .article-reader-summary{
    margin: 0 0 20px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--kc-reader-line);
    color: #334155 !important;
    font-size: 18px !important;
    line-height: 1.68 !important;
    font-weight: 600 !important;
}

html body .article-reader-summary > :first-child,
html body .article-reader-body > :first-child{ margin-top: 0 !important; }
html body .article-reader-summary > :last-child,
html body .article-reader-body > :last-child{ margin-bottom: 0 !important; }

html body .article-reader-body{
    color: var(--kc-reader-text) !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}

html body .article-reader-body p{
    margin: 0 0 .92em !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
}

/* Các đoạn rỗng legacy nếu lọt qua HTML cũ cũng không được tạo khoảng trắng nhìn thấy. */
html body .article-reader-body p:empty,
html body .article-reader-body div:empty{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
}

html body .article-reader-body li,
html body .article-reader-body blockquote{
    text-align: justify !important;
    text-justify: inter-word;
}

html body .article-reader-body h2,
html body .article-reader-body h3,
html body .article-reader-body h4,
html body .article-reader-body h5,
html body .article-reader-body h6{
    font-family: var(--kc-reader-font) !important;
    color: var(--kc-reader-heading) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 1.4em 0 .55em !important;
}
html body .article-reader-body h2{font-size: 26px !important;}
html body .article-reader-body h3{font-size: 23px !important;}
html body .article-reader-body h4{font-size: 20px !important;}
html body .article-reader-body h5,
html body .article-reader-body h6{font-size: 18px !important;}

html body .article-reader-body ul,
html body .article-reader-body ol{
    margin: .5em 0 1.05em 1.35em !important;
    padding: 0 !important;
}
html body .article-reader-body li{margin: .3em 0 !important; line-height: 1.72 !important;}

html body .article-reader-body a,
html body .article-reader-summary a{
    color: var(--kc-reader-link) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
html body .article-reader-body a:hover,
html body .article-reader-summary a:hover{ color:#0b4d8b !important; }

html body .article-reader-body blockquote{
    margin: 1.15em 0 !important;
    padding: 12px 18px !important;
    border-left: 4px solid #b91c1c;
    background: #f8fafc;
    color: #475569 !important;
}

html body .article-reader-body img,
html body .article-reader-summary img{
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 14px auto !important;
    border-radius: 6px;
}

html body .article-reader-body figure{
    max-width: 100% !important;
    margin: 18px auto 22px !important;
    text-align: center !important;
}
html body .article-reader-body figure img{ margin-bottom: 0 !important; }
html body .article-reader-body figcaption{
    margin: 0 auto !important;
    padding: 8px 10px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-style: normal !important;
    text-align: center !important;
}
html body .article-reader-body figcaption p{ margin:0 !important; font-size:inherit !important; line-height:inherit !important; text-align:center !important; }

html body .article-reader-body table{
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    border-collapse: collapse !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}
html body .article-reader-body th,
html body .article-reader-body td{
    padding: 8px 10px !important;
    border: 1px solid #dbe3ec !important;
    vertical-align: top !important;
}

.article-gallery-box{margin:0 0 22px;padding:12px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.07)}
.article-main-photo{display:flex;justify-content:center;align-items:center;background:#f8fafc;border-radius:14px;overflow:hidden;min-height:220px}
.article-main-photo img{display:block;width:auto;max-width:100%;max-height:620px;height:auto;object-fit:contain;border-radius:10px}
.article-photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.article-photo-thumb{border:2px solid transparent;background:#f8fafc;border-radius:10px;padding:3px;cursor:pointer;transition:.18s ease;box-shadow:none}
.article-photo-thumb:hover,.article-photo-thumb.active{border-color:#2563eb;transform:translateY(-1px)}
.article-photo-thumb img{width:100%;height:68px;object-fit:cover;border-radius:7px;display:block}
.article-video-embed{position:relative;padding-top:56.25%;margin-bottom:20px;border-radius:14px;overflow:hidden;background:#000}
.article-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-attachment-box{margin-top:24px;padding-top:18px;border-top:1px solid var(--kc-reader-line)}
.article-attachment-title{font-weight:700;margin-bottom:8px;color:var(--kc-reader-heading)}
.article-attachment-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#eff6ff;color:#1d4ed8!important;text-decoration:none!important;font-weight:600;word-break:break-word}

@media(max-width:980px){
    html body .article-reader-hero{margin:7px 0 8px !important;padding:16px 15px !important;border-radius:14px !important;}
    html body .article-reader-hero h1{font-size:clamp(25px,7vw,31px) !important;line-height:1.28 !important;}
    html body .article-reader-content{padding:18px 15px !important;border-radius:14px !important;}
    html body .article-reader-summary{font-size:17px !important;line-height:1.65 !important;margin-bottom:16px !important;padding-bottom:14px !important;}
    html body .article-reader-body{font-size:17px !important;line-height:1.68 !important;}
    html body .article-reader-body p{margin-bottom:.86em !important;text-align:justify !important;}
    html body .article-reader-body h2{font-size:23px !important;}
    html body .article-reader-body h3{font-size:21px !important;}
    html body .article-reader-body h4{font-size:19px !important;}
    .article-gallery-box{padding:8px;border-radius:12px;margin-bottom:16px}
    .article-main-photo{min-height:150px;border-radius:9px}
    .article-photo-strip{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
    .article-photo-thumb img{height:54px}
    html body .article-reader-body table{font-size:15px !important;}
}

/* ============================================================
   V22 - 21/08/2026 - ARTICLE HEADING / BREADCRUMB / SOCIAL SHARE
   - Breadcrumb rõ Trang chủ > chuyên mục cha > chuyên mục con > bài.
   - Tiêu đề vừa phải, cân với thân bài 18px.
   - Ngày cập nhật chỉ hiện thứ + dd/MM/yyyy, không hiện giờ nhập.
   - Nút chia sẻ gọn, responsive; Messenger/Telegram kết nối theo tblConfig.
   ============================================================ */
html body .article-reader-hero{
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    border: 1px solid #dfe8f2 !important;
    border-left: 4px solid var(--kc-reader-link) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(15,94,168,.06) !important;
}
html body .article-breadcrumb{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin:0 0 14px !important;
    padding:0 0 11px !important;
    border-bottom:1px solid #e6edf5 !important;
    font-family:var(--kc-reader-font) !important;
    font-size:13px !important;
    line-height:1.45 !important;
    color:#64748b !important;
}
html body .article-breadcrumb a{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    color:#315f8f !important;
    font-weight:600 !important;
    text-decoration:none !important;
}
html body .article-breadcrumb a:hover{color:#0f5ea8 !important;text-decoration:underline !important;}
html body .article-breadcrumb-separator{font-size:9px !important;color:#9aa9b8 !important;}
html body .article-breadcrumb-current{
    min-width:0 !important;
    max-width:min(46vw,520px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    color:#6b7280 !important;
    font-weight:500 !important;
}
html body .article-heading-kicker{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 0 8px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:#eaf3fb !important;
    color:#155b97 !important;
    font:700 12.5px/1.2 var(--kc-reader-font) !important;
    letter-spacing:.025em !important;
    text-transform:uppercase !important;
}
html body .article-title-follow{
    margin:0 0 6px !important;
    color:#5b6b7d !important;
    font:600 15px/1.45 var(--kc-reader-font) !important;
}
html body .article-reader-hero h1{
    font-size:clamp(25px,2.25vw,33px) !important;
    line-height:1.28 !important;
    letter-spacing:-.01em !important;
    color:#173f68 !important;
}
html body .article-heading-meta-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px 18px !important;
    flex-wrap:wrap !important;
    margin-top:13px !important;
    padding-top:11px !important;
    border-top:1px solid #e6edf5 !important;
}
html body .article-reader-hero .article-date{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 !important;
    font-size:13.5px !important;
    color:#64748b !important;
}
html body .article-share{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:wrap !important;
}
html body .article-share-label{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    margin-right:2px !important;
    color:#64748b !important;
    font:600 13px/1 var(--kc-reader-font) !important;
}
html body .article-share-btn{
    appearance:none !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:1px solid #d8e2ec !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#35516e !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    cursor:pointer !important;
    font-size:15px !important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
}
html body .article-share-btn:hover{
    transform:translateY(-1px) !important;
    border-color:#a9bfd5 !important;
    box-shadow:0 5px 12px rgba(20,69,112,.12) !important;
}
html body .article-share-btn.facebook{color:#1877f2 !important;}
html body .article-share-btn.telegram,html body .article-share-btn.telegram-connect{color:#229ed9 !important;}
html body .article-share-btn.messenger{color:#7b3ff2 !important;}
html body .article-share-btn.zalo{color:#0068ff !important;}
html body .article-zalo-mark{font:800 15px/1 Arial,sans-serif !important;}
html body .article-share-btn.copy.copied{background:#edf9f1 !important;color:#18864b !important;border-color:#bfe7cd !important;}

@media (max-width:700px){
    html body .article-reader-hero{padding:15px 14px !important;border-radius:13px !important;}
    html body .article-breadcrumb{font-size:12.5px !important;margin-bottom:11px !important;padding-bottom:9px !important;}
    html body .article-breadcrumb-current{max-width:68vw !important;}
    html body .article-reader-hero h1{font-size:clamp(23px,6.2vw,29px) !important;line-height:1.3 !important;}
    html body .article-heading-meta-row{align-items:flex-start !important;}
    html body .article-share{width:100% !important;}
    html body .article-share-label{margin-right:4px !important;}
}


/* ============================================================
   V26 - MOBILE EDGE SPACING /bai-viet/{id}
   The global .site-shell already owns a mobile gutter. Offset that gutter
   here so article cards get closer to the viewport edge as screens shrink.
   ============================================================ */
@media (min-width:641px) and (max-width:700px){
    html body .article-reader-hero,
    html body .article-detail-public-layout{
        box-sizing:border-box !important;
        width:calc(100% + 20px) !important;
        max-width:none !important;
        margin-left:-10px !important;
        margin-right:-10px !important;
    }
    html body .article-reader-content{padding-left:10px !important;padding-right:10px !important;}
    html body .article-reader-hero{padding-left:10px !important;padding-right:10px !important;}
}
@media (max-width:640px){
    html body .article-reader-hero,
    html body .article-detail-public-layout{
        box-sizing:border-box !important;
        width:calc(100% + 12px) !important;
        max-width:none !important;
        margin-left:-6px !important;
        margin-right:-6px !important;
    }
    html body .article-reader-content{padding-left:9px !important;padding-right:9px !important;}
    html body .article-reader-hero{padding-left:9px !important;padding-right:9px !important;}
}
@media (max-width:480px){
    html body .article-reader-hero,
    html body .article-detail-public-layout{
        width:calc(100% + 16px) !important;
        margin-left:-8px !important;
        margin-right:-8px !important;
    }
    html body .article-reader-content{padding-left:7px !important;padding-right:7px !important;border-radius:11px !important;}
    html body .article-reader-hero{padding-left:7px !important;padding-right:7px !important;border-radius:11px !important;}
    .article-gallery-box{margin-left:-2px;margin-right:-2px;}
}
@media (max-width:360px){
    html body .article-reader-hero,
    html body .article-detail-public-layout{
        width:calc(100% + 20px) !important;
        margin-left:-10px !important;
        margin-right:-10px !important;
    }
    html body .article-reader-content{padding-left:5px !important;padding-right:5px !important;}
    html body .article-reader-hero{padding-left:6px !important;padding-right:6px !important;}
}


/* ============================================================
   V27 - TRUE MOBILE FULL WIDTH FOR CONTENT INNER PAGES
   Routes are marked by body.kc-inner-fullwidth-mobile in _Layout.
   This removes the remaining 12px main-shell + 14px content-center
   nested gutters so /chuyen-muc/{id} and /bai-viet/{id} align with
   the mobile menu/banner width.
   ============================================================ */
@media (max-width:768px){
    html body.kc-inner-fullwidth-mobile main.site-shell,
    html body.kc-inner-fullwidth-mobile main.site-shell.page-with-sidebars{
        width:100vw !important;
        max-width:100vw !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
        overflow-x:hidden !important;
    }

    html body.kc-inner-fullwidth-mobile main.site-shell > .content-center,
    html body.kc-inner-fullwidth-mobile main.site-shell > .content-center.full-width,
    html body.kc-inner-fullwidth-mobile main.site-shell > .content-center.with-one-sidebar,
    html body.kc-inner-fullwidth-mobile main.site-shell > .content-center.with-left-right{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
    }

    html body.kc-inner-fullwidth-mobile .category-heading-shell,
    html body.kc-inner-fullwidth-mobile .category-public-layout,
    html body.kc-inner-fullwidth-mobile .article-reader-hero,
    html body.kc-inner-fullwidth-mobile .article-detail-public-layout{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }

    html body.kc-inner-fullwidth-mobile .category-heading-shell,
    html body.kc-inner-fullwidth-mobile .category-public-layout{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    html body.kc-inner-fullwidth-mobile .category-heading-card,
    html body.kc-inner-fullwidth-mobile .article-reader-hero,
    html body.kc-inner-fullwidth-mobile .article-reader-content{
        border-left-width:1px !important;
        border-right-width:1px !important;
    }

    html body.kc-inner-fullwidth-mobile .article-reader-hero{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    html body.kc-inner-fullwidth-mobile .article-reader-content{
        padding-left:6px !important;
        padding-right:6px !important;
    }

    html body.kc-inner-fullwidth-mobile .category-heading-card,
    html body.kc-inner-fullwidth-mobile .category-public-main .list-item-modern,
    html body.kc-inner-fullwidth-mobile .article-reader-hero,
    html body.kc-inner-fullwidth-mobile .article-reader-content{
        border-radius:8px !important;
    }

    html body.kc-inner-fullwidth-mobile .category-public-main{
        width:100% !important;
        max-width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    html body.kc-inner-fullwidth-mobile .category-public-main .list-item-modern{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

@media (max-width:480px){
    html body.kc-inner-fullwidth-mobile .article-reader-hero{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    html body.kc-inner-fullwidth-mobile .article-reader-content{
        padding-left:4px !important;
        padding-right:4px !important;
    }
    html body.kc-inner-fullwidth-mobile .category-heading-card,
    html body.kc-inner-fullwidth-mobile .category-public-main .list-item-modern,
    html body.kc-inner-fullwidth-mobile .article-reader-hero,
    html body.kc-inner-fullwidth-mobile .article-reader-content{
        border-radius:6px !important;
    }
}