/* Thiết lập cơ bản */


.page-block {
    height: 50vh;
    display: grid;
    place-content: center;
    background: #111;
    color: white;
}

/* Container chính cho hiệu ứng */
.scrolly-container1{
    position: relative;
    /* Chiều cao của container bằng tổng chiều cao các trigger */
    /* Ở đây có 4 trigger, mỗi trigger 100vh -> 400vh */
    height: 400vh;
    background-color:#fff;
}

/* Sân khấu (Trái và Phải) */
.stage-container1 {
    width: 50%;
    height: 100vh;
    position: sticky; /* Dính lại khi cuộn trong .scrolly-container */
    top: 5px;
    overflow: hidden; /* Che đi những gì trượt ra ngoài */
}

.left-stage {
    float: left;
}

.right-stage {
    float: right;
}

/* Viewport bên trong sân khấu */
.image-viewport1, .text-viewport1 {
    position: relative;
    width: 100%;
    height: 100%;
}

    /* Các ảnh và khối text */
    .image-viewport1 img, .text-viewport1 .text-content1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        /* Trạng thái mặc định: ẩn và lệch đi một chút */
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .image-viewport1 img {
        object-fit: cover;
    }

        /* Trạng thái KÍCH HOẠT (active) */
        .image-viewport1 img.active,
        .text-viewport1 .text-content1.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Style cho khối text-content */
.text-content1 {
    display: grid;
    place-content: center;
    padding: 2rem;
}



/* Vùng chứa các trigger (nằm trên cùng) */
.scroll-triggers1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.story-step1 {
    height: 100vh; /* Mỗi trigger cao bằng 1 màn hình */
    /* Để debug, bạn có thể thêm: border: 1px dashed red; */
}