/* Định dạng cho tiêu đề Case Studies */
.in_02_title {
    margin-bottom: 20px;
}

/* Định dạng slider */
.indexcase {
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    /* Đảm bảo slider không bị tràn */
}

/* Định dạng container của slider */
.carousel-inner {
    display: flex;
    align-items: center;
}

/* Định dạng các dự án hiển thị trong slider */
.customer-card {
    width: 24%;
    /* Hiển thị 4 dự án mỗi hàng */
    margin: 0 1%;
    /* Tạo khoảng cách giữa các dự án */
    text-align: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
    height: auto;
}

.customer-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

.customer-card:hover {
    transform: scale(1.05);
}

/* Hiển thị tên dự án */
.customer-card .text {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}

/* Định dạng nút Learn More */
.customer-card .learn-more {
    display: block;
    font-size: 20px;
    margin-top: 0px;
    padding: 5px 5px;
    border: 1px solid white;
    background: transparent;
    color: rgb(196, 32, 32);
    text-decoration: none;
}

/* Khi hover vào dự án, hiển thị nút Learn More */
.customer-card:hover .learn-more {
    display: block;
}

/* Định dạng carousel indicators */
.carousel-indicators {
    position: absolute;
    bottom: -30px;
    /* Đưa gạch xuống dưới */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-indicators .active {
    background-color: blue;
}

/* Nút điều hướng slider */
/* .carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
} */

/* Khi chỉ còn 1 dự án trên slider */
.carousel-item:has(.customer-card:nth-child(1):last-child) .customer-card {
    width: 80% !important;
    /* Giữ kích thước hợp lý thay vì bị co nhỏ */
    max-width: 400px;
    /* Đảm bảo không quá lớn */
}

/* Khi có 2 dự án trên slider */
.carousel-item:has(.customer-card:nth-child(2):last-child) .customer-card {
    width: 45% !important;
    /* Cân đối lại kích thước */
    max-width: 350px;
}

/* Khi có 3 dự án trên slider */
.carousel-item:has(.customer-card:nth-child(3):last-child) .customer-card {
    width: 30% !important;
    /* Giữ kích thước giống như khi có 4 dự án */
    max-width: 300px;
}

/* Định dạng container */
.cus-bar-container {
    display: flex;
    justify-content: space-between;
    /* Căn tiêu đề trái, nút phải */
    align-items: center;
    padding: 15px 0;
    border-bottom: 2px solid #ddd;
    /* Đường kẻ nhẹ phía dưới */
}

/* Định dạng tiêu đề */
.cus-title {
    font-size: 30px;
    font-weight: bold;
    color: #d51717;
    margin: 5px;
}

/* Định dạng nút "SEE MORE" */
.cus-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #007bff;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Hiệu ứng hover: Nút nổi lên và đổi màu */
.cus-btn:hover {
    background: #0056b3;
    /* Màu xanh đậm hơn */
    transform: translateY(-3px);
    /* Nổi lên */
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);
}

/* Hiển thị thời gian thực hiện dự án */
.customer-info .time {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}