:root {
  --color-white: #fff;
  --color-light: #ddd;
  --color-dark: #222;
  --color-black: #000;

  --animate-duration: 1000ms;
  --animate-delay: 150ms;

  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

/* Khởi tạo class cho 5 cột (mặc định chiếm 100% trên Mobile) */
.col-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5, .col-xl-1-5 {
    position: relative;
    width: 100%;
    /* Sử dụng biến gutter của Bootstrap 5, fallback về 15px cho Bootstrap 4 */
    padding-right: calc(var(--bs-gutter-x, 30px) / 2);
    padding-left: calc(var(--bs-gutter-x, 30px) / 2);
}

.swiper-button-next, .swiper-button-prev {
    --swiper-navigation-size: 26px;
}
/* Kích hoạt chia 5 cột từ màn hình Tablet (md - 768px) trở lên */
@media (min-width: 768px) {
    .col-md-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* (Tuỳ chọn) Nếu bạn muốn chia 5 cột trên cả màn hình lớn (lg - 992px) */
@media (min-width: 992px) {
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .swiper-button-next, .swiper-button-prev {
        --swiper-navigation-size: 30px;
    }
}