.swiper-container-wrapper {
  position: relative;
}

.swiper {
  width: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center; /* căn giữa ngang */
  align-items: center;     /* căn giữa dọc */
  
}
.swiper-slide img {
  width: 100%;          /* chiều rộng max 80% màn hình */
  aspect-ratio: 1/1;   /* luôn vuông */
  object-fit: cover;    /* fill khung, crop nếu cần */
  border-radius: 12px;
}
.swiper-container-wrapper {
  padding-bottom: 50px; /* tạo khoảng trống cho pagination */
}

.swiper-navigation-icon {
  display: none;
}


.circles li{
    position: absolute;
    bottom: -150px;
    display: block;
    list-style: none;
    animation: animate 25s linear infinite;
}

.circles li i {
    color: rgba(255,255,255,0.7);
    font-size: 20px; /* có thể thay đổi theo li:nth-child */
    display: block;
}

.circles li:nth-child(1) i { font-size: 80px; animation-delay: 0s; }
.circles li:nth-child(2) i { font-size: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(4) i { font-size: 60px; animation-duration: 18s; }

.circles li:nth-child(4){
    left: 40%;
    font-size: 10px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    font-size: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    font-size: 100px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    font-size: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    font-size: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    font-size: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    font-size: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}


@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}