@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: 53%;

      /*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;

  }