/* 1. CẤU HÌNH KHUNG SECTION */
.section-experience {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
    background-color: #aabdc1;
    /* Màu nền lót khi ảnh chưa load */
}

/* 2. LỚP NOISE (HẠT NHIỄU) */
.section-experience::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 CHÍNH */
.exp-surreal-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    /* Đảm bảo các layer con tự do định vị */
}

/* 4. BACKGROUND (FULL MÀN HÌNH) */
.section-experience .layer-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;

    /* Đảm bảo JS không can thiệp vị trí */
    transform: none;
}

/* Ép ảnh phủ kín 100% (Cover) */
.section-experience .full-cover-img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    /* Full chiều cao */

    object-fit: cover;
    /* Tràn viền, cắt bớt phần thừa */
    object-position: center;
    display: block;
}

/* Lớp phủ tối nhẹ để chữ trắng nổi bật hơn (nếu cần) */
.section-experience .overlay-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    /* Tối 10% */
    z-index: 2;
}

/* 5. ĐÀN CHIM BAY */
.layer-birds {
    position: absolute;
    top: 0;
    right: 5%;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.birds-img {
    position: absolute;
    top: 20%;
    right: 5%;

    width: 50%;
    max-width: 600px;
    height: auto;
    object-fit: contain;

    /* Hòa trộn vào nền trời */
    mix-blend-mode: multiply;
    opacity: 0.9;
}

/* 6. NỘI DUNG CHỮ */
.exp-content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
}

.exp-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Style riêng cho chữ của Section này (Ghi đè màu đen của Section 1) */