@media only screen and (min-width:1024px) {
    
    .page__content {
        grid-area: main;
        min-height: 1000px;
        min-width: 700px;
        /* max-width: 840px; */
    }
    .page-grid {
        display: grid;
        grid-template-areas:
            'toc main main sidebar'
            'footer footer footer footer';
        grid-template-columns: 1fr 1fr 275px;
        gap: 24px;
        justify-content: space-between;
        position: relative;
        width: auto;
        margin: auto;
        margin-top: 26px;
    }
    
    .page__sidebar {
        grid-area: sidebar;
        position: relative;
        z-index: 1;
        width: 100%;
    }

/* tocbot */
    .toc {
        overflow-y: auto
    }
    
    .toc>.toc-list {
        overflow: hidden;
        position: relative
    }
    
    .toc>.toc-list li {
        list-style: none
    }
    
    .js-toc {
        overflow-y: a;
    }
    
    .toc-list {
        margin: 0;
        padding-left: 10px
    }
    
    a.toc-link {
        color: currentColor;
        height: 100%
    }
    
    .is-collapsible {
        max-height: 1000px;
        overflow: hidden;
        transition: all 300ms ease-in-out
    }
    
    .is-collapsed {
        /* max-height: 0; */
    }
    
    .is-position-fixed {
        position: fixed !important;
        top: 0
    }
    
    .is-active-link {
        font-weight: 700
    }
    
    .toc-link::before {
        background-color: #EEE;
        content: ' ';
        display: inline-block;
        height: inherit;
        left: 0;
        margin-top: -1px;
        position: absolute;
        width: 2px
    }
    
    .is-active-link::before {
        background-color: #54BC4B
    }
    
    /* tắt fixed box TOC trên bài viêt */
    #ftwp-container.ftwp-fixed-to-post nav#ftwp-contents {
        display: none !important;
    }
    .ftwp-hidden-state {
        display: none !important;
    }

    .toc-page-sidebar {
        width: 250px;
        height: 100%;
        position: relative;
    }

    div#ftwp-container button {
        display: none !important;
    }

    #lc-scrollspy-navbar {
        padding: 0 !important;
        height: auto;
        overflow-y: auto !important;
        padding-top: 12px !important;
        margin-bottom: 0 !important;
        border-right: 1px solid #e7e7e7;
        margin-top: 0 !important;
    }

    #lc-scrollspy-navbar .navbar-brand {
        padding-bottom: 5px;
        margin-bottom: 5px;
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 18px;
        color: #333;
        padding: 4px 8px 6px 9px;
        display: flex;
        gap: 4px;
    }

    #lc-scrollspy-navbar ol li {
        list-style: none;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .blackside {
        /* position: static; */
        width: 240px;
        max-width: 250px;
        visibility: visible;
    }

    .sticky-div.footstick {
        position: absolute !important;
    }
    .parent-toc-sidebar.footstick {
        position: relative !important;
    }
    .sticky-div.fixed {
        position: fixed;
    }

    #lc-scrollspy-navbar ol li a {
        color: #333;
        padding: 0;
        font-size: 14px;
        -webkit-transition: color .3s;
        transition: color .3s;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        position: relative;
        letter-spacing: 0.035px;
        border-radius: 2px;
        min-height: 26px;
        display: flex;
        align-items: center;
        font-weight: 700;
        padding: 4px 4px 4px 0;
    }

    #lc-scrollspy-navbar ol .is-active-li > .toc-list-box {
        background: var(--BRAND-primary, #122257);
        border-radius: 2px;
    }
    #lc-scrollspy-navbar > nav > ol .is-active-li > .toc-list-box > a {
        font-weight: 700;
    }
    #lc-scrollspy-navbar ol .is-active-li > .toc-list-box > a {
        color: #fff !important;
    }
    #lc-scrollspy-navbar ol ol .is-active-li > .toc-list-box > a {
        font-weight: 400;
    }
    /* li.toc-list-item.has-submenu:has(> .submenu > li.is-active-li) > .toc-list-box {
        background: rgba(233, 108, 139, 0.20);
        border-radius: 2px;
    }
    li.toc-list-item.has-submenu:has(> .submenu > li.is-active-li) > .toc-list-box > a {
        color: var(--primary-color) !important;
        font-weight: 500;
    } */
    #lc-scrollspy-navbar>nav>ol>li>a {
        color: var(--neutral-neutral-9, #434343);
        background: transparent;
        font-weight: 500;
        padding-right: 24px;
    }
    #lc-scrollspy-navbar>nav>ol>li>a.is-active-link {
    }

    /* ở li không được relative vị bị lỗi scroll h3 */
    #lc-scrollspy-navbar ol li {
        /* position: relative; */
    }

    #lc-scrollspy-navbar ol {
        counter-reset: li;
        padding-left: 0;
    }

    #lc-scrollspy-navbar ol li ol {
        counter-reset: sub;
        padding-left: 27px;
        padding-top: 8px;
    }

    #lc-scrollspy-navbar ol li a:before{
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: transparent;
        -webkit-transition: .3s ease-out;
        transition: .3s ease-out;
        -webkit-transition-property: transform,bottom,left,right,background;
        transition-property: transform,bottom,left,right,background;
    }

    #lc-scrollspy-navbar ol li ol li a::after {
        /* content: counter(li) "." counter(sub); */
        counter-increment: sub;
        text-align: left;
        left: 4px;
    }
    

    .parent-toc-sidebar {
        overflow: hidden !important;
        position: relative !important;
        grid-area: toc;
        min-width: 240px;
        height: 353px;
        position: sticky !important;
        top: 170px;
        border-radius: 4px;
        box-shadow: 2px 4px 4.3px 0px rgba(169, 169, 169, 0.15);
        background: var(--WEBSITE-primary, #DBEEFF);
    }

    .sticky-div .ftwp-hidden-state {
        display: block !important;
    }

    div#ftwp-container-outer {
        display: none;
    }
    /* menu */
    .submenu {
        display: none !important;
    }
    
    .submenu.active {
        display: block !important;
    }
    .menu-icon {
        display: inline-block;
        transition: transform 0.3s ease-in-out;
        vertical-align: middle;
        position: relative;
        right: 4px;
        top: 4px;
        z-index: 1;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .rotate-icon {
        transform: rotate(180deg);
    }
    #lc-scrollspy-navbar ol li ol li a{font-weight: 400;}
    .single__content-hsc .ofs--box {
        padding-top: 0 !important;
    }
    #lc-scrollspy-navbar .scroll-max{
        max-height: 305px !important;
        display: flex;
    }
    .has-ftoc .single__page,.has-ftoc .page__sidebar .single__sidebar {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .scroll-max{
        max-block-size: max(300px);
        scroll-behavior: smooth;
        position: relative;
    }
    #lc-scrollspy-navbar>nav>ol>li.has-submenu>a, #lc-scrollspy-navbar>nav>ol>li.has-submenu>a::after {
        font-weight: 700;
    }
    #lc-scrollspy-navbar>nav>ol>li.toc-list-item.has-submenu.is-active-li>a, #lc-scrollspy-navbar>nav>ol>li.toc-list-item.has-submenu.is-active-li>a::after{
        font-weight: 500;
    }
    .toc-list-box {
        position: relative;
        display: flex;
        gap: 8px;
        align-items: start;
        padding-left: 8px;
        transition: background-color 0.3s ease;
    }
    .toc-list-number-h2 {
        font-weight: 700;
        font-size: 14px;
        padding-top: 4px;
    }
    .is-active-li .toc-list-number-h2{
        color: #fff;
    }
    .container-1260{
        max-width: 1260px !important;
    }
    .single__content{
        padding: 0 !important;
    }
}

@media only screen and (max-width:1440px) {
    #lc-scrollspy-navbar ol.scroll_y{
        max-height: 400px !important;
    }
}

@media only screen and (max-width:1024px) {
    .toc-page-sidebar {
        display: none !important;
    }
}