.elementor-14235 .elementor-element.elementor-element-7557b96{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}/* Start custom CSS for html, class: .elementor-element-8b1dab7 *//* Khung chứa tổng thể (Mở rộng max-width và thêm padding hai bên để có chỗ cho nút nằm ngoài) */
.el-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: 560px; /* Chiều cao vừa vặn cho ảnh giữa 521px */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cấu hình chung cho mỗi item ảnh */
.el-slide-item {
    position: absolute;
    border-radius: 0px !important; /* BỎ HOÀN TOÀN BO GÓC */
    border: none !important;      /* BỎ HOÀN TOÀN VIỀN */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0; /* Chỉ để mặc định bằng 0 đối với các ảnh đang ẩn hẳn trong hàng đợi */
    pointer-events: none;
    clip-path: inset(0 0 0 0); /* Mặc định ảnh không bị cắt */
}

.el-slide-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/* [LỚP 1 - CHÍNH GIỮA]: Ảnh đầu tiên (Cao 521px, nằm trên cùng) */
.el-slide-item.active {
    width: 409px;
    height: 521px;
    opacity: 1 !important; /* Hiện rõ hoàn toàn */
    z-index: 10; /* Nằm trên cùng */
    transform: translateX(0) scale(1);
    pointer-events: auto;
    filter: brightness(1); /* Độ sáng gốc */
}

/* [LỚP 2 - HAI BÊN CẠNH]: Giảm kích thước ~30% */
.el-slide-item.next {
    width: 286px;
    height: 365px;
    opacity: 1 !important; /* GIỮ NGUYÊN ĐỘ HIỆN RÕ THEO YÊU CẦU */
    z-index: 5; /* Nằm dưới ảnh giữa */
    transform: translateX(265px); /* Vị trí đẩy sang phải */
    
}
.el-slide-item.prev {
    width: 286px;
    height: 365px;
    opacity: 1 !important; /* GIỮ NGUYÊN ĐỘ HIỆN RÕ THEO YÊU CẦU */
    z-index: 5; /* Nằm dưới ảnh giữa */
    transform: translateX(-265px); /* Vị trí đẩy sang trái */
    
}

/* [LỚP 3 - NGOÀI CÙNG]: Hai ảnh ngoài cùng lộ diện và bị che khuất 40% */
/* Ảnh ngoài cùng bên phải: Hiện rõ, nằm dưới cùng, che 60% lề phải, giữ 40% lề trái */
.el-slide-item.hidden-right {
    width: 286px;
    height: 365px;
    opacity: 1 !important; /* GIỮ NGUYÊN ĐỘ HIỆN RÕ THEO YÊU CẦU */
    z-index: 2; /* Nằm dưới cùng */
    transform: translateX(520px) scale(0.9); 
    
    clip-path: inset(0 60% 0 0); /* Cắt bỏ 60% từ lề phải vào -> Còn hiện 40% diện tích bên trái */
    pointer-events: none;
}

/* Ảnh ngoài cùng bên trái: Hiện rõ, nằm dưới cùng, che 60% lề trái, giữ 40% lề phải */
.el-slide-item.hidden-left {
    width: 286px;
    height: 365px;
    opacity: 1 !important; /* GIỮ NGUYÊN ĐỘ HIỆN RÕ THEO YÊU CẦU */
    z-index: 2; /* Nằm dưới cùng */
    transform: translateX(-520px) scale(0.9); 
    
    clip-path: inset(0 0 0 60%); /* Cắt bỏ 60% từ lề trái vào -> Còn hiện 40% diện tích bên phải */
    pointer-events: none;
}

/* Định dạng giao diện nút bấm điều hướng nằm NGOÀI SLIDE */
.el-nav-btn {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 40px; 
    height: 40px; 
    border-radius: 50%;
    background: #fff; 
    color: #1C53A1; 
    border: none; 
    cursor: pointer;
    font-size: 22px; 
    z-index: 30; 
    transition: 0.3s;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.el-nav-btn:hover { background: #1C53A1;
color:#fff;
transform: translateY(-50%) scale(1.08); }

/* Đẩy nút ra hẳn ngoài rìa Slide */
.el-prev-btn { left: -25px; }   
.el-next-btn { right: -25px; }  

/* Tối ưu hiển thị Responsive để tránh lỗi vỡ khung trên thiết bị di động */
@media (max-width: 1400px) {
    .el-prev-btn { left: 10px; }
    .el-next-btn { right: 10px; }
}

@media (max-width: 1024px) {
    /* Trên màn hình Tablet: Ẩn bớt lớp thứ 3 để tránh bị quá dày đặc */
    .el-slide-item.hidden-right, .el-slide-item.hidden-left { opacity: 0 !important; display: none; }
    .el-slide-item.next { transform: translateX(250px); }
    .el-slide-item.prev { transform: translateX(-250px); }
}

@media (max-width: 767px) {
    .el-carousel-wrapper { height: 360px; }
    .el-slide-item.active { width: 240px; height: 305px; } 
    .el-slide-item.next { transform: translateX(120px); width: 168px; height: 214px; }
    .el-slide-item.prev { transform: translateX(-120px); width: 168px; height: 214px; }
    .el-slide-item.hidden-right, .el-slide-item.hidden-left { opacity: 0 !important; display: none; }
    .el-nav-btn { width: 36px; height: 36px; font-size: 14px; }
}/* End custom CSS */