.banner__about {
  --duration: 7s;
}

/* Nhân vật */
.banner__about-user5 {
  opacity: 0;
  animation: fadeUser var(--duration) ease-in-out infinite;
}

.banner__about-user6 {
  opacity: 0;
  animation: fadeUser var(--duration) ease-in-out infinite;
  animation-delay: 0.3s;
}

/* % số */
.banner__about-10phantram {
  opacity: 0;
  animation: drop10 var(--duration) ease-in-out infinite;
}

.banner__about-46phantram {
  opacity: 0;
  animation: drop46 var(--duration) ease-in-out infinite;
}

.banner__about-83phantram {
  opacity: 0;
  animation: drop83 var(--duration) ease-in-out infinite;
}

/* Keyframes riêng */
@keyframes fadeUser {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.8) translateX(50%);
  }
  20%,
  80% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
}

@keyframes drop10 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(-30%);
  }
  30%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}

@keyframes drop46 {
  0%,
  40% {
    opacity: 0;
    transform: translateY(-30%);
  }
  50%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}

@keyframes drop83 {
  0%,
  60% {
    opacity: 0;
    transform: translateY(-30%);
  }
  70%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10%);
  }
}

/* Chart nhọn – rung nhẹ */
.banner__about-chartnhon,
.banner__about-chartvuong,
.banner__about-bieudo,
.banner__about-parameter_table {
  animation: shakeChart 3s linear infinite;
}

@keyframes shakeChart {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
}

/* Các % */
.banner__about-85phantram,
.banner__about-60phamtram,
.banner__about-45phantram,
.banner__about-25phantram {
  opacity: 0;
  animation: dropPercent var(--duration) ease-in-out infinite;
}

/* Delay lần lượt */
.banner__about-85phantram {
  animation-name: drop85;
}
.banner__about-60phamtram {
  animation-name: drop60;
}
.banner__about-45phantram {
  animation-name: drop45;
}
.banner__about-25phantram {
  animation-name: drop25;
}

@keyframes drop85 {
  0%,
  10% {
    opacity: 0;
    transform: translateY(-40px);
  } /* chờ */
  15%,
  75% {
    opacity: 1;
    transform: translateY(0);
  } /* hiện & giữ */
  80%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  } /* biến mất cùng lúc */
}

/* 60 xuất hiện sau 85, giữ đến fade-out chung */
@keyframes drop60 {
  0%,
  25% {
    opacity: 0;
    transform: translateY(-40px);
  }
  30%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 45 vào trễ hơn, vẫn giữ đến fade-out chung */
@keyframes drop45 {
  0%,
  40% {
    opacity: 0;
    transform: translateY(-40px);
  }
  45%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 25 vào cuối cùng, rồi tất cả cùng tắt */
@keyframes drop25 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(-40px);
  }
  60%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* User + % */
.banner__about-user2 {
  animation: show-user2 var(--duration) linear infinite;
}

@keyframes show-user2 {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
  30%,
  70% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
}

.banner__about-user3 {
  animation: show-user3 var(--duration) linear infinite;
}

@keyframes show-user3 {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
  40%,
  70% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
}

.banner__about-user4 {
  animation: show-user4 var(--duration) linear infinite;
}

@keyframes show-user4 {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
  50%,
  70% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.8) translateX(20%);
  }
}

/* line_growth */
.banner__about-line_growth {
  opacity: 0;
  transform-origin: left bottom;
  animation: lineGrow var(--duration) linear infinite;
}

@keyframes lineGrow {
  0%,
  10% {
    opacity: 0;
    transform: scaleX(0);
  }
  30%,
  90% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ==== user1 ==== */
.banner__about-user1 {
  opacity: 0;
  animation: user1Anim var(--duration) linear infinite;
}

@keyframes user1Anim {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.8);
  }
  35%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}