/* ==========================================================================
   SECTION: TEXT BLOCK (WITH WAVE BACKGROUND IMAGE)
   Path: template-parts/sections/text-block/style.css
   ========================================================================== */

.text-block-section {
    position: relative;
    width: 100%;
    background-color: #FFFFFF; /* Triệt tiêu màu nền xanh ngọc của body */
    overflow: hidden;
    box-sizing: border-box;
}

/* KHUNG CONTAINER ĐỒNG BỘ CĂN LỀ TRÁI/PHẢI THEO CONTENT-IMAGE-BLOCK */
.text-block-section .container {
    position: relative;
    max-width: 1250px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* 1. KHỐI TRÊN (NỀN TRẮNG TINH #FFFFFF) */
.text-block__top {
    position: relative;
    padding: 80px 0 40px 0;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.text-block__content {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.text-block__title {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: var(--fs-h4, 25px);
    line-height: var(--lh-h4, 32px);
    font-weight: 700;
    margin: 0 0 18px 0;
}

.text-block__title--top {
    color: var(--text-primary, #333333);
}

.text-block__desc {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: var(--fs-body-s, 17px);
    line-height: 1.75;
    font-weight: 400;
}

.text-block__desc--top {
    color: var(--text-primary, #333333);
}

.text-block__desc p {
    margin: 0 0 16px 0;
}

.text-block__desc p:last-child {
    margin-bottom: 0;
}

/* 2. KHỐI NỀN ẢNH SÓNG (CHỈ ÁP DỤNG RIÊNG CHO NỘI DUNG DƯỚI) */
.text-block__wave-wrapper {
    position: relative;
    width: 100%;
    /* Khử hoàn toàn màu xanh ngọc: Nửa trên trắng #FFFFFF, nửa dưới kem #F7F2EE */
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 35%, var(--color-surface, #F7F2EE) 80%, var(--color-surface, #F7F2EE) 100%);
    box-sizing: border-box;
}

.text-block__wave-bg {
    position: relative;
    width: 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 130px 0 110px 0;
    color: #FFFFFF;
    box-sizing: border-box;
}

.text-block__content--light {
    color: #FFFFFF !important;
}

.text-block__title--wave {
    color: #FFFFFF !important;
}

.text-block__desc--wave {
    color: #FFFFFF !important;
    opacity: 0.95;
}

.text-block__desc--wave p {
    color: #FFFFFF !important;
}

/* ==========================================================================
   RESPONSIVE TABLET & MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .text-block-section .container {
        padding: 0 20px !important;
    }

    .text-block__top {
        padding: 40px 0 25px 0;
        background-color: #FFFFFF;
    }

    .text-block__wave-wrapper {
        background: var(--color-primary-second, #456967) !important;
    }

    .text-block__wave-bg {
        background-image: none !important; /* Tắt ảnh nền trên mobile */
        background-color: var(--color-primary-second, #456967) !important; /* Dùng màu xanh chuẩn global */
        padding: 40px 0 !important;
    }

    .text-block__title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .text-block__desc {
        font-size: 15px;
        line-height: 1.6;
    }
}