/* ============================================================
   vinapro_b2b — NEWS LAYOUT CSS
   File: themes/vinapro_b2b/css/nws-layout.css
   Layout riêng cho module news (danh sách + detail)
   Dùng --b2b-* variables từ b2b-theme.css
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SHARED: wrapper chung cho cả 2 layout
   ────────────────────────────────────────────────────────── */
.nws-layout {
    padding: var(--b2b-sp-6) 0 var(--b2b-sp-10);
    background: var(--b2b-gray-100);
    min-height: 60vh;
}

/* ──────────────────────────────────────────────────────────
   LAYOUT LIST (layout.news.tpl)
   Main 9/12 + Sidebar 3/12
   ────────────────────────────────────────────────────────── */

/* Cột nội dung chính */
.nws-main-col {
    padding-right: 28px;
}

@media (max-width: 991px) {
    .nws-main-col {
        padding-right: 15px;
        /* Sidebar xuống dưới trên mobile */
        order: 1;
    }
}

/* Cột sidebar */
.nws-sidebar-col {
    padding-left: 4px;
}

@media (max-width: 991px) {
    .nws-sidebar-col {
        padding-left: 15px;
        order: 2;
        margin-top: var(--b2b-sp-6);
    }
}

/* Phần trên sidebar (không sticky) */
.nws-sidebar-top {
    margin-bottom: var(--b2b-sp-4);
}

/* Sticky sidebar */
.nws-sidebar-sticky {
    position: sticky;
    top: 80px; /* Khoảng cách với header cố định */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Ẩn scrollbar nhưng vẫn scroll được */
    scrollbar-width: thin;
    scrollbar-color: var(--b2b-gray-300) transparent;
}

.nws-sidebar-sticky::-webkit-scrollbar {
    width: 4px;
}
.nws-sidebar-sticky::-webkit-scrollbar-track {
    background: transparent;
}
.nws-sidebar-sticky::-webkit-scrollbar-thumb {
    background: var(--b2b-gray-300);
    border-radius: 2px;
}

@media (max-width: 991px) {
    .nws-sidebar-sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ──────────────────────────────────────────────────────────
   LAYOUT DETAIL (layout.news-detail.tpl)
   Article 8/12 + Sidebar 4/12
   ────────────────────────────────────────────────────────── */

/* Cột bài viết */
.nws-detail-col {
    padding-right: 32px;
}

@media (max-width: 991px) {
    .nws-detail-col {
        padding-right: 15px;
        order: 1;
    }
}

/* Sidebar bài đọc */
.nws-detail-sidebar {
    padding-left: 4px;
}

@media (max-width: 991px) {
    .nws-detail-sidebar {
        padding-left: 15px;
        order: 2;
        margin-top: var(--b2b-sp-6);
    }
}

/* Inner sticky container */
.nws-detail-sidebar__inner {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--b2b-gray-300) transparent;
}

.nws-detail-sidebar__inner::-webkit-scrollbar {
    width: 4px;
}
.nws-detail-sidebar__inner::-webkit-scrollbar-thumb {
    background: var(--b2b-gray-300);
    border-radius: 2px;
}

@media (max-width: 991px) {
    .nws-detail-sidebar__inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Block trong sidebar */
.nws-sidebar-block {
    margin-bottom: var(--b2b-sp-5);
}

.nws-sidebar-block:last-child {
    margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────────
   BLOCK WRAPPER trong sidebar (block.default, block.blog...)
   Override để phù hợp với news sidebar
   ────────────────────────────────────────────────────────── */
.nws-sidebar-col .block-default,
.nws-detail-sidebar .block-default {
    background: var(--b2b-gray-50);
    border: var(--b2b-border);
    border-radius: var(--b2b-radius);
    overflow: hidden;
    margin-bottom: var(--b2b-sp-4);
    box-shadow: var(--b2b-shadow-sm);
}

.nws-sidebar-col .block-default .block-title,
.nws-detail-sidebar .block-default .block-title {
    background: var(--b2b-primary);
    color: #fff;
    font-family: var(--b2b-font-base);
    font-size: var(--b2b-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: var(--b2b-sp-2) var(--b2b-sp-3);
    display: flex;
    align-items: center;
    gap: var(--b2b-sp-2);
}

.nws-sidebar-col .block-default .block-title::before,
.nws-detail-sidebar .block-default .block-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--b2b-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.nws-sidebar-col .block-default .block-body,
.nws-detail-sidebar .block-default .block-body {
    padding: var(--b2b-sp-3);
}

/* block.blog trong sidebar */
.nws-sidebar-col .blog_noibat,
.nws-detail-sidebar .blog_noibat {
    background: var(--b2b-gray-50);
    border: var(--b2b-border);
    border-radius: var(--b2b-radius);
    overflow: hidden;
    margin-bottom: var(--b2b-sp-4);
    box-shadow: var(--b2b-shadow-sm);
}

.nws-sidebar-col .h2_sidebar_blog,
.nws-detail-sidebar .h2_sidebar_blog {
    background: var(--b2b-primary);
    color: #fff;
    font-family: var(--b2b-font-base);
    font-size: var(--b2b-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: var(--b2b-sp-2) var(--b2b-sp-3);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--b2b-sp-2);
}

.nws-sidebar-col .h2_sidebar_blog::before,
.nws-detail-sidebar .h2_sidebar_blog::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--b2b-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.nws-sidebar-col .blog_content,
.nws-detail-sidebar .blog_content {
    padding: var(--b2b-sp-3);
}

/* ──────────────────────────────────────────────────────────
   READING PROGRESS BAR (detail layout)
   ────────────────────────────────────────────────────────── */
.nws-layout--detail #b2b-reading-progress {
    display: block;
}

/* ──────────────────────────────────────────────────────────
   DIVIDER giữa bài và sidebar (chỉ desktop)
   ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .nws-layout--detail .nws-detail-sidebar {
        border-left: 1px solid var(--b2b-gray-200);
    }

    .nws-layout--list .nws-sidebar-col {
        border-left: 1px solid var(--b2b-gray-200);
    }
}

/* ──────────────────────────────────────────────────────────
   BREADCRUMB tái sử dụng từ layout gốc
   Thêm màu accent cho item active
   ────────────────────────────────────────────────────────── */
.nws-layout ~ .bread-crumb,
.bread-crumb + .nws-layout {
    margin-top: 0;
}

.bread-crumb .breadcrumb li:last-child a {
    color: var(--b2b-accent);
    font-weight: 600;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE TOUCH-UP
   ────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .nws-layout {
        padding: var(--b2b-sp-4) 0 var(--b2b-sp-6);
    }

    .nws-layout .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}