.typing-container {
  float: inline-start;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid white; /* Hiệu ứng con trỏ */
  width: 0;
  animation: typing 5s steps(22, end) infinite, blink 0.7s infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
/* From Uiverse.io by kennyotsu */

.loader {
  color: rgb(124, 124, 124);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.words {
  overflow: hidden;
  position: relative;
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color) 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  /* color: #956afa; */
  animation: spin_4991 9s infinite;
}

@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}
@keyframes text-rotate {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  35% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.word-rotate span {
  position: absolute;
  opacity: 0;
  animation: text-rotate 10s infinite;
}

.word-rotate span:nth-child(1) {
  animation-delay: 0s;
}
.word-rotate span:nth-child(2) {
  animation-delay: 2.5s;
}
.word-rotate span:nth-child(3) {
  animation-delay: 5s;
}
.word-rotate span:nth-child(4) {
  animation-delay: 7.5s;
}
@keyframes float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Độ nâng lên */
  }
  100% {
    transform: translateY(0);
  }
}

.float-up-down {
  animation: float-up-down 2s ease-in-out infinite;
}
/* Wave Effect CSS */
.gradient-text-v2 {
  display: inline-block;
  font-family: "LoveHouse", sans-serif;
  background: linear-gradient(
    45deg,
    #ff3366,
    /* đỏ hồng rực */ #ffffff,
    /* trắng highlight */ #3399ff,
    /* xanh dương nhạt */ #ea01ff,
    /* tím */ #fcfc00,
    /* vàng */ #ffffff /* trắng */
  );
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 5s ease-in-out infinite,
    letterWave 2s ease-in-out infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes letterWave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.7);
  }
}

.animate-glow {
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes shakeX {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}

.shake-x {
  animation: shakeX 1s ease-in-out infinite;
}
@keyframes pulseBounce {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.05) translateY(-2px);
  }
}

.bounce-subtle {
  animation: pulseBounce 2s ease-in-out infinite;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(to right, #3b82f6, #8b5cf6);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-position: 0 20px, 20px 0, center;
  background-color: #111;
}

