@keyframes glitch {
  0% {
    transform: translate(0);
    text-shadow: 2px 0 red, -2px 0 blue, 0 2px green;
  }
  20% {
    transform: translate(-1px, 1px);
    text-shadow: -2px -1px red, 2px 1px blue, 1px 2px green;
  }
  40% {
    transform: translate(1px, -1px);
    text-shadow: 2px 1px red, -1px -1px blue, -1px 2px green;
  }
  60% {
    transform: translate(1px, 0);
    text-shadow: -1px 0 red, 1px 0 blue, 0 1px green;
  }
  80% {
    transform: translate(-1px, 1px);
    text-shadow: 1px -1px red, -2px 1px blue, 1px 1px green;
  }
  100% {
    transform: translate(0);
    text-shadow: 2px 0 red, -2px 0 blue, 0 2px green;
  }
}
@media (min-width: 992px) {
  .hero-2 .row.align-items-end {
    align-items: stretch !important;
  }

  .hero-2 .col-lg-5,
  .hero-2 .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.section-hero-subtitle {
  font-size: clamp(1rem, 3vw, 2rem);
  font-family: monospace;
  color: white;
  margin-top: -10px;
}

.glitch-img::before,
.glitch-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://drakelam.net/storage/1rightimages.jpg');
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}

.glitch-img::before {
  transform: translate(-2px, 0);
  filter: hue-rotate(90deg);
}

.glitch-img::after {
  transform: translate(2px, 0);
  filter: hue-rotate(-90deg);
}
.glitch-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  animation: glitch-skew 1.5s infinite linear alternate;
  filter: brightness(1.05) contrast(1.2);
}

/* Hiệu ứng rung lắc nhẹ như glitch */
@keyframes glitch-skew {
  0% {
    transform: skew(0deg, 0deg) translate(0, 0);
  }
  20% {
    transform: skew(1deg, -1deg) translate(-2px, 1px);
  }
  40% {
    transform: skew(-1deg, 2deg) translate(2px, -1px);
  }
  60% {
    transform: skew(1.5deg, -0.5deg) translate(-1px, 1px);
  }
  80% {
    transform: skew(-0.5deg, 1.5deg) translate(1px, -1px);
  }
  100% {
    transform: skew(0deg, 0deg) translate(0, 0);
  }
}
.glitch-img-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  filter: contrast(1.2) brightness(1.1);
}

.glitch-img {
  display: block;
  width: 100%;
  height: auto;
  animation: glitch-anim 1s infinite;
}

/* Tạo lớp màu glitch bằng pseudo-element */
.glitch-img::before,
.glitch-img::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('https://drakelam.net/storage/1rightimages.jpg') no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}

/* Lớp lệch màu */
.glitch-img::before {
  transform: translate(-2px, 0);
  filter: hue-rotate(60deg);
}

.glitch-img::after {
  transform: translate(2px, 0);
  filter: hue-rotate(-60deg);
}

/* Rung + shift dạng nhiễu TV */
@keyframes glitch-anim {
  0% {
    transform: none;
  }
  10% {
    transform: translate(-2px, 1px) skew(-1deg);
  }
  20% {
    transform: translate(2px, -1px) skew(1deg);
  }
  30% {
    transform: translate(-1px, -2px) skew(0.5deg);
  }
  40% {
    transform: translate(1px, 1px) skew(-0.5deg);
  }
  50% {
    transform: none;
  }
  100% {
    transform: none;
  }
}