uldp.edu.vn/public/assets/scss/_helping.scss

//page scroll bar add
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px $bg-color; 
	border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: $theme-color;
	border-radius: 10px;
}
//page scroll bar add

//Basic Code Start
.fix {
  overflow: hidden;
}

.ralt{
 position: relative;
}

//Basic Code End

//Video Css Start
.ripple {
  position: relative;

  &::before,&::after {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 50px;
      height: 50px;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
      -webkit-animation: rippleOne 3s infinite;
      animation: rippleOne 3s infinite;
  }

  &::before {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
  }

  &::after {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
  }
}
//Video Css End

.array-buttons {
  @include flex;
  gap: 20px;

  @include breakpoint (max-xl) {
    flex-wrap: wrap;
  }

  .array-prev {
     width: 110px;
     height: 48px;
     line-height: 45px;
     text-align: center;
     background-color: transparent;
     color: $header-color;
     @include transition;
     border-radius: 100px;
     border: 1px solid $header-color;
     font-weight: 600;

     i {
       margin-left: 5px;
       transform: rotate(45deg);
     }

    &:hover {
       background: $theme-color-2;
       color: $header-color;
       border: 1px solid $theme-color-2;
    }
  }
  
  .array-next {
     width: 110px;
     height: 48px;
     line-height: 45px;
     text-align: center;
     background-color: $theme-color-2;
     color: $header-color;
     @include transition;
     border-radius: 100px;
     font-weight: 600;
     text-transform: uppercase;

     
     i {
       margin-left: 5px;
       transform: rotate(-45deg);
     }
   
      &:hover {
         background: $header-color;
         color: $white;
      }
   }
}

.array-buttons-2 {
  @include flex;
  gap: 20px;

  @include breakpoint (max-xl) {
    flex-wrap: wrap;
  }

  .array-prev {
     width: 42px;
     height: 42px;
     line-height: 42px;
     text-align: center;
     background-color: $header-color;
     color: #00E5FF;
     @include transition;
     border-radius: 100%;

    &:hover {
       background: $theme-color;
       color: $white;
    }
  }
  
  .array-next {
      width: 42px;
      height: 42px;
      line-height: 42px;
      border-radius: 100%;
      text-align: center;
      background: #2ADDC8;
      color: $header-color;
      @include transition;
  
      &:hover {
         background: $theme-color;
         color: $white;
      }
   }
}

.array-buttons-4 {
  @include flex;
  gap: 20px;

  @include breakpoint (max-xl) {
    flex-wrap: wrap;
  }

  .array-prev {
     width: 45px;
     height: 45px;
     line-height: 45px;
     text-align: center;
     background: $bg-color;
     color: $white;
     @include transition;
     border-radius: 100%;

  }
  
  .array-next {
      width: 45px;
      height: 45px;
      line-height: 45px;
      border: 1px solid rgba(65, 65, 65, 1);
      border-radius: 100%;
      text-align: center;
      background: transparent;
      color: $white;
      @include transition;
  
      &:hover {
         background: $bg-color;
         border: 1px none;
         color: $white;
      }
   }
}
//pagination default

//pagination default

.swiper-dot {
  text-align: center;
  margin-top: 30px;

  .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      transition: 0.6s;
      border-radius: 30px;
      background-color: $theme-color-2;
      opacity: 1;
      position: relative;
      &:not(:last-child){
        margin-right: 15px;
      }
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: $theme-color;
      transition: 0.6s;
      position: relative;
      width: 10px;
      height: 10px;
      border-radius: 30px;

      &::before {
        @include before;
        width: 10px;
        height: 10px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
         border-radius: 30px;
      }
  }

}

.swiper-dot-2 {
  text-align: center;
  margin-top: 30px;

  .swiper-pagination-bullet {
      width: 16px;
      height: 16px;
      transition: 0.6s;
      border-radius: 30px;
      background-color: transparent;
      border: 2px solid $header-color;
      opacity: 1;
      position: relative;
      &:not(:last-child){
        margin-right: 15px;
      }
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
      border: 2px solid $header-color;
      transition: 0.6s;
      position: relative;
      width: 16px;
      height: 16px;
      border-radius: 30px;

      &::before {
        @include before;
        width: 10px;
        height: 10px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
         border-radius: 30px;
      }
  }

}

.bg-cover {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.slide-transtion {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}
.brand-slide-element {
	width: auto;
	display: inline-block;
}


.page-nav-wrap {
  margin-top: 60px;

  @include breakpoint (max-xl) {
    margin-top: 30px;
  }

  ul {
      li {
          display: inline-block;

          .page-numbers {
              &.current {
                  background: linear-gradient(180deg, #1539EE 0%, #2ADDC8 100%);
                  color: $white;
                  border-radius: 10px;
              }

              display: inline-block;
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: transparent;
              border: 1px solid $theme-color-2;
              color: $header-color;
              @include transition;
              border-radius: 10px;
              font-weight: 600;
              transition: all 0.3s ease-in-out;
              margin: 0 2px;

              &.style-2 {
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: $theme-color-2;
                color: $white;
                @include transition;
                border-radius: 10px;
                border: 1px solid $header-color;
                font-weight: 600;
                transition: all 0.3s ease-in-out;
               
              }

              @media (max-width: 767px) {
                  margin-top: 10px;
                  width: 40px;
                  height: 40px;
                  line-height: 40px;
                  font-size: 14px;
              }

              i {
                  margin-top: 2px;
                  color: $white;
                  @include transition;
              }

              &:hover {
                  background: $theme-color-2;
                  color: $white;
                  border: 1px solid $theme-color-2;

                  i {
                    color: $white;
                  }
              }
          }
      }
  }
}





.sticky-style {
  position: sticky !important;
  top: 100px;
}


.custom-container {
  max-width: 1700px;
  margin: 0 auto;
}



.bw-img-anim-left,
.bw-img-anim-right {
  transition: clip-path 0.5s ease-out;
}


.split-text {
	overflow: hidden;
	position: relative;
}

.split-text .line {
	overflow: hidden;
	display: none;
}

html.lenis, html.lenis body {
	height: auto;
}

.smooth-content {
	position: relative;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}


//>>>>> Nice Select Css Start <<<<<//
.nice-select {
  background-color: transparent;
  width: unset;
  outline: none;
  // border-bottom: 2px solid $border-color !important;
  border: none;
  border-radius: 0;
  padding: 0;
}

.nice-select .current {
  margin-right: 12px;
}

.nice-select.open .list {
  background: $bg-color;
  margin-top: 16px;
  width: 100%;
  text-transform: capitalize;
  color: $text-color;
}

.nice-select .option.selected.focus {
  background: $bg-color;
  outline: none;
  color: $text-color;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 14px;
  border: none;
}

.nice-select .option {
  border: none;
}

.nice-select .option:hover {
  background: transparent;
}

//>>>>> Nice Select Css End <<<<<//

.p-relative {
  position: relative;
}

.tp-clip-anim {
  position: relative;
  overflow: hidden;

  .mask {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    opacity: 0;
    animation: reveal 1s forwards;
  }

  // delay for each slice
  @for $i from 1 through 9 {
    .mask-#{$i} {
      clip-path: inset(0 #{(9 - $i) * 11.1%} 0 #{($i - 1) * 11.1%});
      animation-delay: #{$i * 0.1}s;
    }
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}