.sp-lagoona-widget {
    height: 400px;
    width: 100%;
    position: relative; /* Đảm bảo các phần tử con có thể được đặt đúng vị trí */ 
}

.sp-lagoona-widget .container {
    display: block;
    position: relative; /* Cho phép sử dụng absolute positioning cho .items */
}

.sp-lagoona-widget .container .items {
    display: flex;
    visibility: hidden;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transform: translateX(100%); /* Bắt đầu từ ngoài màn hình bên phải */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

@media screen and (max-width:747px) {
    .sp-lagoona-widget {
        overflow: hidden;
    }
    .sp-lagoona-widget .container .items {
        flex-direction: column;
    }
    
}

.sp-lagoona-widget .container .items.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0%); /* Hiển thị ở vị trí ban đầu */
    z-index: 1;
}

.sp-lagoona-widget .container .items.left {
    transform: translateX(-100%); /* Khi di chuyển qua trái, ra ngoài màn hình trái */
}

.sp-lagoona-widget .container .items.right {
    transform: translateX(100%); /* Khi di chuyển qua phải, ra ngoài màn hình phải */
}




.sp-lagoona-widget .sp-lagoona-navigation {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 3;
    cursor: pointer;
}

.sp-lagoona-widget .sp-lagoona-navigation#left_navigation {
    left: -50px;
}

.sp-lagoona-widget .sp-lagoona-navigation#right_navigation {
    right: -50px;
}