/* 1. Cấu hình khung Section */
.section-hero {
    background: linear-gradient(to bottom, #94a3b8 0%, #7e90a3 50%, #4a5e6d 100%);
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;

    /* Mã ảnh Noise Base64 MỚI (Đậm hơn) */
    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");

    /* Tăng độ rõ lên 30% để nhìn thấy hạt bằng mắt thường trước */
    opacity: 0.07;

    mix-blend-mode: overlay;

}

/* 2. Wrapper chính (Tắt Flexbox) */
.hero-surreal-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: block !important;
}

/* 3. Layer Background (Chứa ảnh người + cỏ) */
.layer-bg-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Chiếm full chiều cao */
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* 4. Bức ảnh nền chính (FIX TREO + DÍNH ĐÁY) */
.section-hero .full-cover-img {
    position: absolute !important;
    bottom: 0 !important;
    /* Bắt buộc dính đáy */
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Chỉ căn giữa ngang */

    width: 100%;
    height: auto;

    /* Chỉnh kích thước người tại đây */
    max-height: 70vh;

    object-fit: contain;
    /* Hoặc cover nếu muốn ảnh tràn viền */
    object-position: bottom center;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* 5. Layer Mây */
.layer-foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
}

.cloud-splash-img {
    position: absolute;
    top: 3%;
    left: 23%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 800px;
    height: auto;
    opacity: 0.95;
    mix-blend-mode: normal;
}

/* 6. Nội dung chữ (FIX LỖI TEXT KO NHẢY) */
.hero-content-center {
    position: absolute;
    top: 40%;
    left: auto;
    right: 12%;
    /* Cách lề phải 8% */
    transform: translateY(-50%);
    z-index: 5;
    text-align: right;
    width: auto;
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Quan trọng: Căn trái các dòng chữ */
    justify-content: center;
}

/* Wrapper bao ngoài từng dòng text để che phần chữ chưa hiện */
.hero-line-wrapper {
    overflow: hidden;
    display: block;
}