/**
 * Extra left/right sidebars bọc ngoài .sidebar-page-core.
 * Chỉ hiển thị từ 1700px trở lên.
 */

 #wrapper .sidebar-page-outer  {
    overflow: visible;
    max-width: 1920px;
    margin: 0 auto;
 }

.sidebar-wrapper-left,
.sidebar-wrapper-right {
    display: none;
}

@media (min-width: 1700px) {
    .sidebar-page-outer {
        /* stretch: cột trái/phải cao bằng vùng core để sticky có vùng cuộn */
        align-items: stretch;
        overflow: visible;
        --sidebar-sticky-top: 7rem;
    }

    .sidebar-wrapper-left,
    .sidebar-wrapper-right {
        display: block;
        flex: 0 0 var(--extra-sidebar-width, 10rem);
        width: var(--extra-sidebar-width, 10rem);
        max-width: var(--extra-sidebar-width, 10rem);
        align-self: stretch;
        position: relative;
        overflow: visible;
    }

    .sidebar-wrapper-left__inner,
    .sidebar-wrapper-right__inner {
        position: -webkit-sticky;
        position: sticky;
        top: var(--sidebar-sticky-top, 7rem);
        z-index: 20;
        width: 100%;
        max-height: calc(100vh - var(--sidebar-sticky-top, 7rem));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-page-outer > .sidebar-page-core {
        flex: 1 1 auto;
        min-width: 0;
    }
}