.intro {
  background: black; /* Màu nền intro */
  font-family: "Montserrat", sans-serif;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  animation: intro 1.5s ease-in-out forwards; /* Thời gian intro biến mất */
  animation-delay: 3s; /*Khoảng thời gian intro xuất hiện */
}
.slider {
  background: #171d22;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  animation: slider 1.5s ease-in-out;
  animation-delay: 3s; /*Thời gian slider xuất hiện, trùng với khoảng thời gian xuất hiện của intro */
}

/* Sửa cỡ chữ ở đây */
.intro-text {
  color: rgb(233, 233, 233);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 50px;
}

.logo_intro {
  width: 300px;
  height: 200px;
  object-fit: contain;
  margin-top: 50px;
  animation: logo_intro 1.5s ease-in-out forwards; /* Thời gian intro biến mất */
  animation-delay: 3s; /*Khoảng thời gian intro xuất hiện */
}

.hide {
  background: black;
  overflow: hidden;
}

.hide .text {
  transform: translateY(100%);
  display: inline-block;
  animation: show-text 1s ease-in-out forwards;
  animation-delay: 0.2s;
}

@keyframes show-text {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slider {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes intro {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}




/*Loader*/
.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color:#de3500 #0000 #fff #0000;
    border-radius: 50%;
    box-sizing: border-box;
    animation: 1s rotate linear infinite;
    margin-top: 50px;
 }
 .loader:before , .loader:after{
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color:#fff;
    transform: translate(-10px, 19px) rotate(-35deg);
  }
 .loader:after {
    border-color: #de3500 #0000 #0000 #0000 ;
    transform: translate(32px, 3px) rotate(-35deg);
  }
   @keyframes rotate {
    100%{    transform: rotate(360deg)}
  }

@media screen and (max-width: 767.98px) {
  .intro-text {
    font-size: 25px;
  }
  .loader {
      margin-top: 20px;
  }
}