@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.effect_slide {
  animation-name: slide;
  animation-duration: 1s;
}

/* shake */
@keyframes shake {
  50% {
    transform: translate3d(20px, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}

.effect_shake {
  animation: shake 300ms;
}

/* end shake */

/* page effect */
.page_effect_fadein {
  opacity: 0;
  transform: translate(0, 10vh, 1rem);
  transition: all 3s;
}

.page_effect_move_left {
  opacity: 0;
  transform: translate3d(0, 10vh);
  transition: all 3s;
}

.page_effect_fadein.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.page_effect_move_left.visible {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 5px #aa00ff;
  }
  50% {
    box-shadow:
      0 0 20px #aa00ff,
      0 0 30px #d500f9;
  }
  100% {
    box-shadow: 0 0 5px #aa00ff;
  }
}

/* end page effect */

/* .box-shadow-1-hover:hover {
  animation: tada 2s;
} */

/* Tạo animation mới: pulse-hold */
@keyframes pulse-hold {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* hoặc 1.2 tùy bạn */
  }
  100% {
    transform: scale(1.05); /* giữ nguyên */
  }
}

@keyframes pulse-hold-smaller {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* hoặc 1.2 tùy bạn */
  }
  100% {
    transform: scale(1.03); /* giữ nguyên */
  }
}

.box-shadow-1-hover {
  transition: transform 0.5s ease-out;
  transform: scale(1);
}

.box-shadow-1-hover:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 28px rgba(33, 33, 33, 0) !important;
}

.home_latestnews_blog .post-item,
.home_latestnews_blog .post-item:nth-child(1) {
  /* Thiết lập điểm neo ở góc trên bên trái */
  transition: transform 0.5s ease-out;
  transform: scale(1)
}

.home_latestnews_blog .post-item:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 28px rgba(33, 33, 33, 0) !important;
}

.home_latestnews_blog .post-item:nth-child(1):hover {
  transform: scale(1.03);
  box-shadow: 0px 10px 28px rgba(33, 33, 33, 0) !important;
}

/* Marquee Container - Tương thích với AOS */
/* Container giữ nguyên */
.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Wrapper: ANIMATE cái này, không animate từng .marquee-content nữa */
.marquee-wrapper,
.marquee-wrapper.the2nd {
  display: inline-flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

#content .marquee-container .banner {
  width: 556px;
  width: 391px;
  margin: 0px 20px;
}

/* Mỗi block nội dung (bản gốc + bản duplicate) chỉ cần flex, KHÔNG cần animation */
.marquee-content {
  display: inline-flex;
  flex-shrink: 0;
  will-change: transform;
  margin: 0;
  padding: 0;
}

/* Đảm bảo không có khoảng trống giữa 2 bản duplicate */
.marquee-content + .marquee-content-duplicate {
  margin-left: 0;
  padding-left: 0;
}

/* Keyframes mới: chỉ đi từ 0 đến -50% (vì bạn có 2 bản, tổng chiều dài = 200%) */
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Duplicate content cho seamless loop - KHÔNG có gap giữa 2 bản */
.marquee-content-duplicate {
  display: inline-flex;
  flex-shrink: 0;
}

/* Pause on hover: dừng hẳn marquee khi hover vào container */
.marquee-container:hover .marquee-wrapper {
  /* animation-play-state: paused !important; */
  cursor: pointer;
}

/* Tốc độ tùy chỉnh */
.marquee-fast {
  animation-duration: 8s;
}

.marquee-medium {
  animation-duration: 15s;
}

.marquee-slow {
  animation-duration: 25s;
}

/* Marquee Vertical */
.marquee-vertical {
  overflow: hidden;
  height: 200px;
  position: relative;
}

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

.marquee-vertical-content {
  animation: marquee-vertical 10s linear infinite;
  will-change: transform;
}

.marquee-vertical:hover .marquee-vertical-content {
  animation-play-state: paused;
  cursor: pointer;
}

/* Kết hợp với AOS - Ẩn khi chưa vào viewport */
.marquee-container[data-aos] {
  opacity: 0;
}

.marquee-container[data-aos].aos-animate {
  opacity: 1;
}

/* Đảm bảo animation chạy sau khi AOS trigger */
.marquee-container.aos-animate .marquee-wrapper.the2nd,
.marquee-container.aos-animate .marquee-wrapper {
  animation-play-state: running;
}