/* 
   Final Pro Slider - Stage-based Positioning 
*/
.my-custom-3d-carousel {
    position: relative;
    width: 100%;
    --slide-gap: 20px;
    --main-width: 80%;
    overflow: hidden;
    padding: 0;
}

.slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.slider__inner {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
}

/* Base Item - Cố định kích thước theo Variable */
.slider__item {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    height: 100% !important;
    width: var(--main-width) !important;
    opacity: 0;
    visibility: hidden;
    /* GPU Force */
    will-change: transform, opacity;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.35, 1),
        opacity 0.7s cubic-bezier(0.25, 1, 0.35, 1),
        visibility 0.7s !important;
}

.slider__item-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: translateZ(0);
}

.slider__item-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
}

/* --- Layout: MODERN PREVIEW --- */
/* Slide Đang chọn: Ở vị trí trung tâm (hoặc sát lề trái tùy ý, hình mẫu là sát lề trái) */
.layout-modern .slider__item-selected {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) translateZ(0);
    /* Nằm tại gốc 0 */
    z-index: 10;
}

/* Slide Tiếp theo: Nằm chính xác bên cạnh slide hiện tại + Gap */
.layout-modern .slider__item-next {
    opacity: 1;
    visibility: visible;
    /* Dùng 100% (tức là hết chiều rộng của CHÍNH NÓ) + Gap */
    transform: translateY(-50%) translateX(calc(100% + var(--slide-gap))) translateZ(0);
    z-index: 5;
}

/* Slide Phía trước: Nằm bên trái màn hình */
.layout-modern .slider__item-previous {
    opacity: 0.5;
    visibility: visible;
    transform: translateY(-50%) translateX(calc(-100% - var(--slide-gap))) translateZ(0);
}

/* --- Layout: 3D PERSPECTIVE (Giữ nguyên logic 3D) --- */
.layout-3d .slider__item {
    width: 350px !important;
}

.layout-3d .slider__item-selected {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(50vw - 50%), -50%) translateZ(100px);
}

/* Các tùy chỉnh Style khác */
.slider__controls {
    position: absolute;
    bottom: 30px;
    right: 5%;
    display: flex;
    gap: 10px;
    z-index: 100;
}

.slider__controls button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider__item-datas {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: white;
}