/*
 * Version: 1.0.6
 * Cập nhật layout theo kích thước và vị trí mới.
 */

/* Container chính, kích thước được tính toán để chứa cả 2 layer */
.sls-layout-container {
    position: relative;
    /* Chiều rộng = Chiều rộng layer trước (453px) */
    width: 453px; 
    /* Chiều cao = Chiều cao layer trước (550px) + 40px chênh lệch */
    height: 590px; /* 550px + 40px */
    max-width: 100%;
    margin: 50px auto;
}

.sls-image-layer {
    position: absolute;
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transition: opacity 0.6s ease-in-out;
}

/* Layer phía sau (Back Layer) */
.sls-layer-back {
    /* Vị trí: Nằm ở trên cùng và căn phải của container */
    top: 0;
    right: 0;
    width: 240px;
    height: 375px;
    z-index: 1;
    filter: blur(1px);
    /* Dịch chuyển layer này sang phải để tạo hiệu ứng xếp lớp */
    transform: translateX(30%);
}

/* Layer phía trước (Front Layer) */
.sls-layer-front {
    position: relative; /* Để chứa các nút điều khiển */
    /* Vị trí: Nằm ở dưới cùng và căn trái của container */
    bottom: 0;
    left: 0;
    width: 453px;
    height: 550px;
    z-index: 2;
	top: 50px;
}

.sls-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3;
}

.sls-controls button {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sls-controls button:hover {
    background-color: white;
}

.entertaiment_spaces{
	margin-top: -10%;
    position: relative;
    z-index: 10;  
}
/* Responsive: Điều chỉnh cho màn hình nhỏ hơn */
@media (max-width: 600px) {
    .sls-layout-container {
        /* Sử dụng đơn vị vw để co giãn theo chiều rộng màn hình */
        width: 90vw;
        /* Chiều cao tính theo tỷ lệ của container (590/453) */
        height: calc(90vw * (590 / 453)); 
    }

    /* Co giãn các layer con theo tỷ lệ tương ứng */
    .sls-layer-front {
        width: 100%; /* 453px */
        height: 93.22%; /* 550px / 590px */
    }

    .sls-layer-back {
        width: 52.98%; /* 240px / 453px */
        height: 63.55%; /* 375px / 590px */
    }
}