/* 1. Cấu hình khung Section (Gradient Bầu trời Sao Hỏa) */
.section-story {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 3;
    /* Gradient từ Cam đất tối -> Cam sáng */
    background-color: #000000;
}

/* 2. Lớp Noise (Giữ nguyên) */
.section-story::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 99;
}

/* 3. Wrapper */
.story-surreal-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: block !important;
}

/* 4. MẶT ĐẤT (SA MẠC) - Cấu trúc giống Section 1 */
.section-story .layer-bg-wrapper {
    position: absolute;
    bottom: 0;
    /* Dính đáy */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Nằm cao hơn hành tinh để che chân hành tinh nếu cần */
    pointer-events: none;
}

.section-story .full-cover-img {
    position: absolute !important;
    bottom: 0 !important;
    /* ÉP DÍNH ĐÁY */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 100% !important;
    height: auto;

    /* Chỉnh độ cao của mặt đất (Khoảng 40-50% màn hình là đẹp) */
    max-height: 50vh;

    object-fit: cover;
    object-position: bottom center;
    display: block;
}

/* 5. PLANET (HÀNH TINH) */
.layer-planet {
    position: absolute;
    top: 40%;
    left: 75%;
    transform: translate(-50%, -60%);

    /* CHỈNH KÍCH THƯỚC: Giảm % và max-width */
    width: 65%;
    max-width: 650px;

    height: auto;
    object-fit: contain;
    mix-blend-mode: normal;
    opacity: 1;
    /* Đảm bảo nó không bị mờ nếu blend mode là screen */
}

.planet-img {
    position: absolute;
    /* Căn giữa màn hình */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    /* Dịch lên một chút để nằm đẹp sau chữ */

    width: 55%;
    /* Hành tinh to */
    max-width: 650px;
    height: auto;
    object-fit: contain;

    /* Chế độ hòa trộn để hành tinh ăn vào nền trời */
    mix-blend-mode: normal;
}

/* 6. HIKERS (NGƯỜI) */
.layer-people {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.hikers-img {
    position: absolute;

    /* 1. ĐẨY LÊN TRÊN: Giảm giá trị 'bottom' từ 5% xuống 2% */
    bottom: 5%;

    left: 62%;
    transform: translateX(-50%);

    width: auto;

    /* 2. TĂNG KÍCH THƯỚC: Tăng thêm 15% (35vh -> 40vh) */
    height: 40vh;

    object-fit: contain;

    /* 3. TẠO BÓNG DƯỚI CHÂN (Bóng kéo dài, mờ nhẹ) */

    filter:
        drop-shadow(0px -5px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0px 5px 70px rgba(0, 0, 0, 0.3));
}

/* 7. TEXT CONTENT */
.story-content-center {
    position: absolute;
    top: 45%;
    /* SỬA 1: Đẩy sang trái (ví dụ 8%) */
    left: 8%;
    /* SỬA 2: Chỉ căn giữa theo chiều dọc (bỏ căn ngang) */
    transform: translateY(-50%);
    z-index: 10;
    /* SỬA 3: Căn lề trái cho văn bản */
    text-align: left;
    /* Giới hạn chiều rộng để text không chạy vào hành tinh */
    max-width: 45%;
    width: auto;
}

/* Sửa 4: Chỉnh căn lề cho từng dòng chữ */
.story-title {
    display: flex;
    flex-direction: column;

    /* Đẩy tất cả các dòng chữ sang trái */
    align-items: flex-start;

    justify-content: center;
    margin-bottom: 20px;
}

/* Nút bấm */
.story-cta-group {
    margin-top: 30px;
}

.story-btn {
    padding: 15px 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.story-btn:hover {
    background: #fff;
    color: #6e3326;
    /* Màu chữ khi hover (Nâu đất) */
}