/* =================================================================== */
.home__banner--rating{
  padding-top: 25px;
  background: #eaf2fe;
}
.home__banner--rating__inner{
  padding-top: 25px;
}

.home__banner--rating__top{
  margin-bottom: 25px;
}
.home__banner--rating__title{
  margin-bottom: 25px;
}
.home__banner--rating__bottom{
  padding-top: 25px;
  display: flex;
    flex-direction: column;
    align-items: center;
}

.home__banner--rating__slider{
  overflow: hidden;
  display: flex;
  width: 100%;
  padding: 40px 0;
  position: relative;
}
.home__banner--rating__slider--list{
  display: flex;
  gap: 30px;
  animation: scrollLeft 300s linear infinite;
 
}
.home__banner--rating__slider::before,
.home__banner--rating__slider::after{
  position: absolute;
  height: 100%;
  content: '';
  width:100px;
  background: linear-gradient(90deg, rgba(234,242,254,1) 30%, rgba(255,255,255,0) 100%, rgba(0,212,255,1) 100%);
  bottom: 0;
  z-index: 3;
}
.home__banner--rating__slider::before{
  left: 0;
}
.home__banner--rating__slider::after{
  background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(255,255,255,0) 0%, rgba(234,242,254,1) 70%);
  right: 0;
}
.home__banner--rating__slide--items:hover ~ .home__banner--rating__slider--list,
.home__banner--rating__slider--list:hover {
    animation-play-state: paused;
}
/* @keyframes scrollLeft {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-50%);
  
}
} */
.home__banner--rating__slide--items{
  width: 300px;
  background: var(--color-background-27) url(../images/background_giaovien.svg) left bottom no-repeat;
  color: var(--color-background-6);
  border-radius: 15px;
  margin-right: 20px;
  box-shadow: 6.15401px 0 17.4363px rgba(0, 0, 0, 0.05) !important;
}
.home__banner--rating__slide--items{
  padding: 25px;
}
.home__banner--rating__slide--image,.home__banner--rating__slide--image img{
  width: 100%;
  font-weight: 600;
}
.home__banner--rating__slide--comment{
  font-size: 1.5rem;
  text-align: justify;
  margin-top: 20px;
  line-height: 24px;
}
@media (max-width: 500px) {
  .home__banner--rating__slider::before,
.home__banner--rating__slider::after{
  display: none;
}
.home__banner--rating__slider--list{
  gap: 10px;
}
}