:root {
    --idc-toc-text: #1f2933;
    --idc-toc-muted: #5b6573;
    --idc-toc-border: #d7dce2;
    --idc-toc-accent: #00856a;
}

.idc-scroll-toc__close{
    width: 38px;
    height: 38px;
    background-color: #f7f8f9;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    .elementor-widget-wrap.elementor-element-populated {
        width: 100%;
    }

    .elementor-element-3275ac8f {
        align-items: flex-start !important;
        overflow: visible !important;
        display: block !important;
    }
    .elementor-element-2bdb221e {
        display: block !important;
    }

    .idc-scroll-toc {
        position: fixed;
        z-index: 9999999999;
        width: 260px;
        top: 120px;
        right: max(24px, calc((100vw - 1320px) / 2));
        max-height: calc(100vh - 150px);
        pointer-events: none;
        font-family: inherit;
    }

    .idc-scroll-toc__title {
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
        color: #111827;
        margin: 0 0 12px;
    }

    .idc-scroll-toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .idc-scroll-toc__item {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .idc-scroll-toc__item a {
        display: block;
        color: var(--idc-toc-muted);
        text-decoration: none;
        font-size: 14px;
        line-height: 1.45;
        padding: 7px 10px 7px 12px;
        border-left: 2px solid transparent;
        transition: color .18s, border-color .18s;
    }

    .idc-scroll-toc__item--h3 a {
        padding-left: 26px;
        font-size: 13px;
    }

    .idc-scroll-toc__item a:hover,
    .idc-scroll-toc__item.is-active>a {
        color: var(--idc-toc-text);
    }

    .idc-scroll-toc__item.is-active>a {
        border-left-color: var(--idc-toc-accent);
        font-weight: 700;
    }

    .idc-scroll-toc__mobile-bar,
    .idc-scroll-toc__mobile-trigger,
    .idc-scroll-toc__back-to-top,
    .idc-scroll-toc__backdrop,
    .idc-scroll-toc__progress,
    .idc-scroll-toc__sheet {
        display: none;
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .idc-scroll-toc {
        position: fixed;
        z-index: 9999999999;
        left: 0;
        right: 0;
        top: 0;
        pointer-events: none;
        font-family: inherit;
    }


    /* -----------------------------------------------------
       MOBILE BAR
       ----------------------------------------------------- */

    .idc-scroll-toc__mobile-bar {
        display: flex;
        width: 100%;
        min-height: 44px;
        pointer-events: none;

        background: rgba(255, 255, 255, .98);
        border-bottom: 1px solid #e1e4e8;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);

        backdrop-filter: blur(8px);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-110%);

        transition:
            transform .25s ease,
            opacity .2s ease,
            visibility 0s linear .25s;
    }


    /*
     * Khi TOC xuất hiện:
     * 2 button cùng xuất hiện
     */
    .idc-scroll-toc.is-visible .idc-scroll-toc__mobile-bar,
    .idc-scroll-toc.is-open .idc-scroll-toc__mobile-bar {

        opacity: 1;
        visibility: visible;
        transform: translateY(0);

        transition:
            transform .25s ease,
            opacity .2s ease,
            visibility 0s linear 0s;
    }

    .idc-scroll-toc.is-visible .idc-scroll-toc__progress,
    .idc-scroll-toc.is-open .idc-scroll-toc__progress {
        top: auto;
        bottom: 0;
    }

    /* -----------------------------------------------------
       LEFT: ON THIS PAGE
       ----------------------------------------------------- */

    .idc-scroll-toc__mobile-trigger {

        display: flex;

        flex: 1 1 50%;

        pointer-events: auto;

        align-items: center;
        justify-content: space-between;

        min-width: 0;

        padding: 6px 18px;

        border: 0;
        border-right: 1px solid #e1e4e8;

        background: transparent;

        color: #fff;

        font: inherit;
        font-size: 15px;
        font-weight: 700;

        text-align: left;

        cursor: pointer;
    }


    .idc-scroll-toc__mobile-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       CHEVRON
       ----------------------------------------------------- */

    .idc-scroll-toc__chevron {

        width: 9px;
        height: 9px;

        flex: 0 0 auto;

        margin-left: 10px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg) translateY(-2px);

        transition: transform .2s ease;
    }


    .idc-scroll-toc.is-open .idc-scroll-toc__chevron {
        transform: rotate(225deg) translate(-1px, -1px);
    }


    /* -----------------------------------------------------
       RIGHT: BACK TO TOP
       ----------------------------------------------------- */

    .idc-scroll-toc__back-to-top {

        display: flex;

        flex: 1 1 50%;

        pointer-events: auto;

        align-items: center;
        justify-content: center;

        min-width: 0;

        padding: 12px 18px;

        border: 0;

        background: transparent;

        color: #fff;

        font: inherit;
        font-size: 15px;
        font-weight: 700;

        cursor: pointer;

        gap: 9px;

        white-space: nowrap;
    }


    .idc-scroll-toc__back-to-top:hover,
    .idc-scroll-toc__mobile-trigger:hover {
        background: rgba(0, 0, 0, .025);
    }


    /* -----------------------------------------------------
       BACK TO TOP ARROW
       ----------------------------------------------------- */
    .idc-scroll-toc__top-title{
        width: 100%;
    }
    .idc-scroll-toc__top-arrow {

        width: 9px;
        height: 9px;

        flex: 0 0 auto;

        border-left: 2px solid currentColor;
        border-top: 2px solid currentColor;

        transform: rotate(45deg) translate(2px, 2px);

        transition: transform .2s ease;
    }


    .idc-scroll-toc__back-to-top:hover .idc-scroll-toc__top-arrow {
        transform: rotate(45deg) translate(2px, 0);
    }

    .idc-scroll-toc__closebtn {
    position: relative;
    width: 14px;
    height: 14px;
}

.idc-scroll-toc__closebtn::before,
.idc-scroll-toc__closebtn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    background: #000;
}

.idc-scroll-toc__closebtn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.idc-scroll-toc__closebtn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
    /* -----------------------------------------------------
       DESKTOP TOC HIDDEN
       ----------------------------------------------------- */

    .idc-scroll-toc__desktop {
        display: none;
    }


    /* -----------------------------------------------------
       BACKDROP
       ----------------------------------------------------- */

    .idc-scroll-toc__backdrop {

        position: fixed;

        inset: 0;

        display: block;

        background: rgba(0, 0, 0, .45);

        opacity: 0;

        pointer-events: none;

        transition: opacity .28s ease;
    }


    .idc-scroll-toc.is-open .idc-scroll-toc__backdrop {

        opacity: 1;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       BOTTOM SHEET
       ----------------------------------------------------- */

    .idc-scroll-toc__sheet {

        position: fixed;

        z-index: 2;

        left: 0;
        right: 0;
        bottom: 0;

        height: 50vh;
        min-height: 320px;

        background: #fff;

        border-radius: 16px 16px 0 0;

        box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);

        transform: translateY(105%);

        transition:
            transform .3s cubic-bezier(.22, .61, .36, 1);

        display: flex;
        flex-direction: column;

        pointer-events: none;
    }


    .idc-scroll-toc.is-open .idc-scroll-toc__sheet {

        transform: translateY(0);

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       SHEET HANDLE
       ----------------------------------------------------- */

    .idc-scroll-toc__sheet-handle {

        width: 42px;
        height: 4px;

        border-radius: 999px;

        background: #c8cdd3;

        margin: 8px auto 4px;

        flex: 0 0 auto;
    }


    /* -----------------------------------------------------
       SHEET HEADER
       ----------------------------------------------------- */

    .idc-scroll-toc__sheet-header {

        display: flex;

        align-items: center;
        justify-content: space-between;

        padding: 12px 18px 14px;

        border-bottom: 1px solid #e4e7eb;

        font-size: 16px;
    }


    .idc-scroll-toc__close {
        cursor: pointer;
    }
     .idc-scroll-toc__close::before,.idc-scroll-toc__close::after,.idc-scroll-toc__close:visited{
        background: transparent;
     }


    /* -----------------------------------------------------
       SHEET CONTENT
       ----------------------------------------------------- */

    .idc-scroll-toc__sheet-content {

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        padding: 8px 18px 30px;
    }


    .idc-scroll-toc__item a {

        display: block;

        color: #3f4a56;

        text-decoration: none;

        padding: 10px 8px;

        font-size: 15px;

        line-height: 1.45;

        border-bottom: 1px solid #eef0f2;
    }


    .idc-scroll-toc__item--h3 a {

        padding-left: 25px;

        font-size: 14px;
    }


    .idc-scroll-toc__item.is-active>a {

        color: var(--idc-toc-accent);

        font-weight: 700;
    }

    .idc-scroll-toc__mobile-bar {
        position: relative;
    }

    .idc-scroll-toc__progress {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        height: 5px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.08);
        pointer-events: none;
    }

    .idc-scroll-toc__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #FFC845;
        transform: translateX(-100%);
        transition: transform 0.08s linear;
    }

    .idc-scroll-toc__sheet-content ul,
    .idc-scroll-toc__sheet-content ol {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .idc-scroll-toc__item {
        list-style: none !important;
    }

    .idc-scroll-toc__item::marker {
        content: "" !important;
    }

    /* -----------------------------------------------------
       LOCK BODY
       ----------------------------------------------------- */

    body.idc-toc-lock {
        overflow: hidden;
    }
}


/* =========================================================
   WORDPRESS ADMIN BAR
   ========================================================= */

@media (min-width: 783px) and (max-width: 1023px) {

    body.admin-bar .idc-scroll-toc {
        top: 32px;
    }
}


@media (max-width: 782px) {

    body.admin-bar .idc-scroll-toc {
        top: 46px;
    }
}