/* ============================================================================
   KCThanhHoa 20/08/2026 - V13
   Ổn định layout Tin chính / Tin phụ / Khối chuyên mục.
   Mục tiêu: tiêu đề dài không đè tóm tắt, clamp đúng số dòng, card tự tăng chiều cao.
   File này được load SAU toàn bộ CSS legacy để làm lớp chốt cuối cùng.
   ============================================================================ */

/* 1) Khối nội dung phải luôn theo normal flow, không dùng height cứng từ CSS cũ. */
html body .home-zone-rich-featured,
html body .home-zone-rich-featured-content,
html body .home-zone-rich-card,
html body .home-zone-rich-card-body,
html body .kc-home-top-main-card,
html body .kc-home-top-main-body,
html body .category-public-layout .list-item-modern,
html body .category-public-layout .list-item-modern .body {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* 2) Tiêu đề TIN CHÍNH trong các khối chuyên mục: tối đa đúng 2 dòng. */
html body .home-zone-rich-featured-content h3,
html body .home-zone-rich-featured h3 {
    display: block !important;
    position: static !important;
    clear: both !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
html body .home-zone-rich-featured-content h3 > a,
html body .home-zone-rich-featured h3 > a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    height: auto !important;
    max-height: none !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3) Tóm tắt luôn nằm dưới tiêu đề, không absolute/negative margin/height kế thừa. */
html body .home-zone-rich-featured-content .kc-zone-featured-desc,
html body .home-zone-rich-featured-content .home-zone-rich-featured-summary,
html body .kc-zone-featured-desc.home-zone-rich-featured-summary {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    position: static !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;
    margin: 8px 0 0 !important;
    padding: 0 0 2px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #475569 !important;
}

/* 4) Ảnh tin chính: cân đối theo cột, không kéo méo ảnh. */
html body .home-zone-rich-featured-thumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(190px, 21vw, 280px) !important;
    max-height: 280px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border-radius: 6px !important;
    line-height: 0 !important;
}
html body .home-zone-rich-featured-thumb img,
html body .home-zones-left-column .home-zone-rich-featured-thumb img,
html body .home-zones-right-column .home-zone-rich-featured-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
}

/* 5) Tin phụ: title 2 dòng, thumbnail đồng bộ, card không chồng chữ. */
html body .home-zone-rich-card {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
html body .home-zone-rich-card-thumb {
    width: 104px !important;
    height: 70px !important;
    min-width: 104px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    background: #f8fafc !important;
}
html body .home-zone-rich-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
html body .home-zone-rich-card-body h4,
html body .home-zone-rich-card h4 {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
}
html body .home-zone-rich-card-body h4 > a,
html body .home-zone-rich-card h4 > a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: inherit !important;
}
html body .home-zone-rich-card-body p,
html body .home-zone-rich-card p {
    position: static !important;
    clear: both !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 4px 0 0 !important;
}

/* 6) Tin chính đầu Trang chủ: title 2 dòng + summary tách rõ. */
html body .kc-home-top-main-body h3 {
    display: block !important;
    margin: 0 0 7px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(18px, 1.45vw, 21px) !important;
    line-height: 1.38 !important;
}
html body .kc-home-top-main-body h3 > a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
html body .kc-home-top-main-body > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    position: static !important;
    clear: both !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}
html body .kc-home-top-sub-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.38 !important;
    height: auto !important;
    max-height: none !important;
}

/* 7) /chuyen-muc/{id}: title dài không đẩy/chồng ngày và tóm tắt. */
html body .category-public-layout .list-item-modern .body h3 {
    display: block !important;
    position: static !important;
    clear: both !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 6px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}
html body .category-public-layout .list-item-modern .body h3 > a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
html body .category-public-layout .list-item-modern .body > p {
    position: static !important;
    clear: both !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    html body .home-zone-rich-featured-thumb {
        height: clamp(170px, 28vw, 240px) !important;
    }
}

@media (max-width: 768px) {
    html body .home-zone-rich-featured-content h3,
    html body .home-zone-rich-featured h3,
    html body .kc-home-top-main-body h3 {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }
    html body .home-zone-rich-featured-content .kc-zone-featured-desc,
    html body .home-zone-rich-featured-content .home-zone-rich-featured-summary,
    html body .kc-zone-featured-desc.home-zone-rich-featured-summary {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }
    html body .home-zone-rich-featured-thumb {
        height: clamp(180px, 54vw, 300px) !important;
    }
    html body .home-zone-rich-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
    html body .home-zone-rich-card-thumb {
        width: 96px !important;
        min-width: 96px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }
    html body .home-zone-rich-card-body h4,
    html body .home-zone-rich-card h4 {
        font-size: 14.5px !important;
    }
    html body .category-public-layout .list-item-modern .body h3 {
        font-size: 15.5px !important;
        line-height: 1.38 !important;
    }
}