/* ==========================================================================
   SPLIT LAYOUT / STORY SECTION - BEM STANDARD
   ========================================================================== */

.split-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* ĐẢO VỊ TRÍ ẢNH NẰM BÊN TRÁI HÀNG */
.split-layout--img-left {
    flex-direction: row-reverse;
}

.split-layout__content {
    flex: 0 0 50%;
    background-color: var(--color-primary, #ffffff);
    padding: clamp(60px, 8vw, 110px) clamp(40px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text-dark, #0F0F0F);
    box-sizing: border-box;
}

.split-layout__content h2 {
    margin-bottom: 24px;
    /* Bắt lấy biến CSS nội tuyến truyền từ thẻ cha */
    font-size: var(--title-fs); 
    color: var(--title-color, inherit); 
}

.split-layout__text {
    /* Bắt lấy biến CSS nội tuyến truyền từ thẻ cha */
    font-size: var(--desc-fs);
    color: var(--desc-color, inherit);
}

.split-layout__highlight {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-accent, #456C35);
    font-weight: 500;
    margin: 24px 0;
    line-height: 1.4;
}

.split-layout__image-wrapper {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
}

.split-layout__img-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.split-layout__img-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.08);
    z-index: 1;
    pointer-events: none;
}

.split-layout__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}