/* how to step slide - start */
.slider-step-how-to {
  width: 784px;
  padding: 0;
  margin: 0 auto;
}
.slider-step-how-to .swiper {
  overflow: visible;
}
.slider-step-how-to .swiper .swiper-slide {
  width: 254px;
}
.slider-step-how-to .swiper .swiper-pagination {
  bottom: var(--swiper-pagination-bottom, -50px);
}
@media (min-width: 768px) {
  .slider-step-how-to .swiper-slide .steps {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .slider-step-how-to .swiper-slide.swiper-slide-visible .steps {
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .slider-step-how-to {
    width: 100%;
  }
}

.slider-step-how-to .swiper-button-next,
.slider-step-how-to .swiper-button-prev {
  width: 45px;
  height: 45px;
  font-weight: 700;
  background: #fff;
  border-radius: 30px;
  position: absolute;
  box-shadow: 0px 2px 4px 0px #60617029;
  top: calc(510px / 2);
}

.slider-step-how-to .swiper-button-next:after,
.slider-step-how-to .swiper-button-prev:after {
  font-size: 22px;
  font-weight: 700;
  color: red;
}

.slider-step-how-to .swiper-button-prev {
  left: -4px;
}
.slider-step-how-to .swiper-button-prev:after {
  margin-left: -4px;
}

.slider-step-how-to .swiper-button-next {
right: -4px;
}


.wrap-slider-step-how-to {
  padding: 64px 0;
  border-radius: 24px;
  background: rgb(255, 244, 244);
  background: linear-gradient(135deg,
      rgba(255, 244, 244, 1) 0%,
      rgba(255, 216, 231, 1) 33%,
      rgba(231, 222, 255, 1) 67%,
      rgba(190, 233, 255, 1) 100%);
}

@media (max-width: 767px) {
  .wrap-slider-step-how-to {
    overflow: hidden;
  }

  .wrap-tabs {
    overflow: visible;
  }
}

.step-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 32px;
}

.step-text .bg-step {
  width: 140px;
  height: 63px;
  padding-top: 6px;
  background: url(https://www.true.th/hubfs/assets_pages/blog-support/images/device-setting/bg-step.svg) center center no-repeat;
  background-size: 100% auto;
}

.en .step-text .bg-step {
  padding-top: 3px;
}

.step-text .bg-step span {
  padding-top: 4px;
}

.slider-step-how-to .swiper .swiper-pagination .swiper-pagination-bullet {
  background: #FFFFFF;
}
.slider-step-how-to .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #e00000;
}
/* how to step slide - end */