@media (max-width: 1399px) {



        #spacer {



            display: none !important;



        }



    }



        .scrollbar-rail { opacity: 0; }

        

@media (max-width: 1399px) {

    #spacer {

        display: none !important;

    }

}





.scrollbar-rail { opacity: 0; }

/* thanh nav chuyển section, nằm bên trái */

        .side-nav {

            position: fixed;

            top: 20%;

            /*left: 40px;*/

            left: 5%;

            transform: translateY(-50%);

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

            z-index: 1000;

        }



        .side-nav .nav-item {

            position: relative;

            width: 2px;

            height: 60px;

            background: rgb(255 255 255 / 26%);

            border-radius: 4px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .side-nav .nav-item.active {

            /* box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); */

            background-color: white;

            width: 3px;

            height: 60px;

            /* border-radius: 50%; */

            /* box-shadow: 12px 0 50px rgba(255, 255, 255, 0.8), 15px 0 40px rgba(255, 255, 255, 0.4), 15px 0 35px rgba(255, 255, 255, 0.15); */

            transition: all 0.3s ease-in-out;

        }

        .nav-item.active .open-light {

                background-size: 100% 100%;

                background-image: url(https://learningchain.vn/wp-content/uploads/home-page/mini-light-1.png);

                width: 80px;

                height: 116px;

                background-position: top;

                top: -28px;

                position: absolute;

                

                opacity: 0;

                transition: opacity 0.6s ease-in-out;

        }

        .nav-item.active .open-light {

            opacity: 1;

        }

        .nav-item:not(.active) .open-light {

            opacity: 0;

        }

      



        /* .side-nav .nav-item.active::before{

            content: "";

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            width: 16px;               

            height: 60px;             

            border-radius: 30px;

            background: linear-gradient(180deg,

                rgba(255,255,255,0.95) 0%,

                rgba(255,255,255,0.6) 12%,

                rgba(255,255,255,0.12) 45%,

                rgba(255,255,255,0.02) 65%,

                rgba(255,255,255,0) 100%);

            filter: blur(12px);

            opacity: .95;  

            pointer-events: none;

            z-index: 1;

            box-shadow:

                0 0 40px rgba(255,255,255,0.45),

                0 0 90px rgba(255,255,255,0.18),

                0 0 160px rgba(200,200,255,0.06);

        } */



        /* .side-nav .nav-item.active::after{

            content: "";

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            width: 6px;               

            height: 60px;

            border-radius: 999px;

            background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.6) 100%);

            box-shadow:

                0 0 10px rgba(255,255,255,0.9),

                0 0 24px rgba(255,255,255,0.5);

            z-index: 3;

            pointer-events: none;

        } */



        .side-nav .nav-item:hover {

            background: rgba(255, 255, 255, 0.5);

            box-shadow: 0 0 12px rgba(255,255,255,0.6);

        }



        .side-nav .nav-item span {

            position: absolute;

            left: 120%;

            top: 50%;

            transform: translateY(-50%);

            opacity: 0;

            white-space: nowrap;

            font-size: 16px;

            letter-spacing: 1px;

            transition: opacity 0.25s ease;

            color: #fff;

            text-shadow: 0 0 10px rgba(255,255,255,0.7);

        }



        .side-nav .nav-item.active span,

        .side-nav .nav-item:hover span {

            opacity: 1;

        }

        

        /* hiệu ứng scroll như Kyros */

        /*@media (max-width: 1023px) {*/

            /*body {*/

            /*    overflow: auto !important;*/

            /*}*/

            /*.scroller {*/

            /*    position: relative !important;*/

            /*    transform: none !important;*/

            /*}*/

            /*.scrollbar-rail {*/

            /*    display: none !important; */

            /*}*/

        /*}*/



        body {

            overflow: hidden;/* disable native scroll */

        }

        .scroller {

            position: fixed; /* cover viewport */

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            will-change: transform;

            /* disable native touch scrolling on the custom scroller to avoid conflicts */

           touch-action: none;

           -ms-touch-action: none;

           overscroll-behavior: none;

        }

        .spacer {

            height: 1px;

        }

        .scrollbar-rail {

            position: fixed;

            right: 0;

            top: 12px;

            width: 6px;

            padding: 4px;

            height: calc(100% - 24px);

            background: rgba(255,255,255,0.03);

            border-radius: 8px;

            pointer-events: none;

            z-index: 1000;

        }

        .scrollbar-thumb {

            width: 100%;

            height: 40px;

            background: linear-gradient(#fff,#bbb);

            opacity: 0.12;

            border-radius: 6px;

            transform-origin: top;

            transition: opacity .2s;

        }

        .scrollbar-rail:hover .scrollbar-thumb {

            opacity: 0.24;

        }

        .scroll-hint {

            position: absolute;

            /* bottom: 40px;

            left: 50%; */

            transform: translateX(-50%) translateY(0);

            /* transition: transform 0.1s ease-out; */

            will-change: transform;

            z-index: 10;

        }