/*------------- Nút cuộn lên đầu -------------*/
.scroll-top {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  width: 45px;
  height: 45px;
  color: #fff;
  background: #333;
  line-height: 45px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}
.scroll-top:hover { background: #44e4e4; }

.icon-top {
  position: relative;
  top: 3px;
  width: 80%;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8px;
}

/*------------- Nhãn đăng ký -------------*/
.scroll-label {
  font-family: 'Aldrich', sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-shadow: 1px 1px 0 #000, 1px 1px 0 #46e6e6, -1px -1px 0 #ff32af;
  background: url('../assets/img/label.svg') center/contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 1%;
  bottom: 15%;
  width: 100px;
  height: 100px;
  z-index: 88;
}

.scroll-label a,
.scroll-label a:visited {
  color: #46e6e6; /* Chữ xanh */
  text-decoration: none;
}

.scroll-label a:hover {
  color: #66ffff; /* Xanh sáng hơn khi hover */
}

/*------------- Hiệu ứng chữ Glitch -------------*/
.glitch-text {
  position: relative;
  display: block;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch-text::before {
  text-shadow: -10px 0 #ff32af; /* Bóng hồng */
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 3s infinite linear alternate;
  opacity: 0.5;
}
.glitch-text::after {
  text-shadow: 10px 0 #ff32af; /* Bóng hồng */
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate;
  opacity: 0.3;
}

/*------------- Keyframes glitch -------------*/
@keyframes glitch-anim {
  0% { clip: rect(52px, 9999px, 1px, 0); }
  5% { clip: rect(109px, 9999px, 98px, 0); }
  10% { clip: rect(123px, 9999px, 96px, 0); }
  15% { clip: rect(79px, 9999px, 56px, 0); }
  20% { clip: rect(85px, 9999px, 135px, 0); }
  25% { clip: rect(90px, 9999px, 134px, 0); }
  30% { clip: rect(119px, 9999px, 109px, 0); }
  35% { clip: rect(4px, 9999px, 7px, 0); }
  40% { clip: rect(73px, 9999px, 49px, 0); }
  45% { clip: rect(112px, 9999px, 6px, 0); }
  50% { clip: rect(77px, 9999px, 111px, 0); }
  55% { clip: rect(8px, 9999px, 79px, 0); }
  60% { clip: rect(39px, 9999px, 44px, 0); }
  65% { clip: rect(96px, 9999px, 73px, 0); }
  70% { clip: rect(30px, 9999px, 56px, 0); }
  75% { clip: rect(103px, 9999px, 106px, 0); }
  80% { clip: rect(28px, 9999px, 53px, 0); }
  85% { clip: rect(139px, 9999px, 33px, 0); }
  90% { clip: rect(83px, 9999px, 93px, 0); }
  95% { clip: rect(88px, 9999px, 54px, 0); }
  100% { clip: rect(45px, 9999px, 25px, 0); }
}
