/* Trang Đời sống học đường — slider "Y tế học đường".
 * Nội dung dài được cắt thành từng slide để mỗi lần chỉ đọc một mục. */

/* Bản gốc: cột giữa là danh sách dài nên nó cao bằng 2 cột ảnh. Chuyển sang slider
 * thì nội dung ngắn hẳn, mà .life-medical__wrap là flex align-items: stretch —
 * chiều cao hàng lúc này do CỘT ẢNH quyết định (5 ảnh xếp dọc ~1074px), hộp trắng
 * bị kéo giãn theo và cụm nút bị margin-top:auto đẩy xuống đáy → hở ~550px.
 * Cho cột ảnh ra khỏi flow để hàng cao theo nội dung, ảnh co giãn khít theo. */
@media (min-width: 1201px) {
    .life-medical__wrap > .col:has(> .life-medical__col-img) {
        position: relative;
    }

    .life-medical__wrap > .col > .life-medical__col-img {
        position: absolute;
        inset: 0;
    }

    /* Chặn trường hợp khách rút nội dung slide còn 1-2 dòng, ảnh hai bên hoá sợi mỏng. */
    .life-medical__content {
        min-height: 40rem;
    }
}

.life-medical__slider {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 2.4rem;
}

.life-medical__slider > .swiper {
    width: 100%;
}

/* autoHeight của swiper cần slide không bị ép chiều cao theo slide dài nhất. */
.life-medical__slider .swiper-wrapper {
    align-items: flex-start;
}

.life-medical__slide-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-title, #101828);
    margin-bottom: 1.2rem;
}

.life-medical__slide-body p {
    text-align: justify;
}

.life-medical__nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: auto;
    /* .swiper-control-btn lấy kích thước từ biến này (bình thường do .swiper-control cấp). */
    --size: 4.8rem;
}

.life-medical__nav .swiper-control-btn i {
    font-size: 1.6rem;
}

.life-medical__pagination.swiper-pagination {
    position: static;
    /* style.css cho .swiper-pagination margin-top:1.6rem (chấm nằm dưới slider);
     * ở đây chấm nằm cùng hàng với 2 mũi tên nên phải bỏ để canh giữa đúng. */
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: auto;
}

@media (max-width: 1200px) {
    .life-medical__slider {
        gap: 1.6rem;
    }

    .life-medical__slide-title {
        font-size: 2rem;
    }

    .life-medical__nav {
        --size: 4rem;
    }
}