/*
 * [TC20] Các trang con của Giới thiệu: Thành tích hệ thống, Thành tích iSchool 2025,
 * Đội ngũ chuyên gia giáo dục, Trách nhiệm xã hội. Nạp qua inc/hooks/Tc20AboutHook.php.
 */

/* ---------- Mô tả căn đều 2 lề ---------- */
.about-system .about-banner__content .mona-content p,
.about-achieve .mona-content p,
.scholar-content__desc p,
.about-table__desc p,
.about-pro .mona-content p,
.about-force .head-hori .mona-content p,
.about-force__out .mona-content p,
.about-commu .title-gr .mona-content p,
.about-commu__content .mona-content p,
.about-commu__festival-desc p {
    text-align: justify;
}

/* Đoạn mô tả ngắn dưới tiêu đề căn giữa thì dòng cuối vẫn canh giữa cho cân. */
.about-system .about-banner__content .mona-content p,
.about-achieve .mona-content p,
.about-pro .mona-content p,
.about-commu .title-gr .mona-content p {
    text-align-last: center;
}

.about-table__desc p + p,
.about-commu__festival-desc p + p {
    margin-top: 0.8em;
}

/* ---------- Đội ngũ chuyên gia: tên, chức vụ, trường dưới ảnh ---------- */
.about-force__info {
    margin-top: 1.2rem;
    color: #fff;
    text-align: center;
}

.about-force__name {
    font-family: SVN-Aleo, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.about-force__info .about-force__position {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.about-force__school {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.4rem 1.2rem;
    border-radius: 10rem;
    background-color: #fff;
    color: var(--color-pri);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Slider giáo viên: chức vụ ngay dưới tên, tên trường đậm và rõ hơn. */
.about-force__out .about-force__position {
    margin-top: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-title, #101828);
}

.about-force__out .about-force__line .line:first-child .txt {
    font-weight: 700;
    color: var(--color-pri);
    font-size: 1.6rem;
}

.about-force__out .title-gr .title {
    line-height: 1.3;
}

/* ---------- Trách nhiệm xã hội: không cắt chữ, cột chữ rộng hơn ---------- */
.about-commu__festival-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    line-height: 1.6;
}

.about-commu__festival-content .title {
    line-height: 1.3;
}

@media (min-width: 901px) {
    .about-commu__festival-item .row > .col:first-child {
        width: 55%;
    }

    .about-commu__festival-item .row > .col:last-child {
        width: 45%;
    }
}

@media (max-width: 900px) {
    .about-commu__festival-desc {
        margin: 1.6rem 0 2.4rem;
    }
}

/* ---------- [TC20b #13] Mũi tên slider "Liên hệ tư vấn": CSS gốc để nền, viền và icon
 * cùng màu trắng nên không thấy. Đổi sang viền + icon màu chủ đạo, hover đảo màu.
 * Mobile: không ẩn nữa, xếp 2 nút xuống dưới slider. ---------- */
.about-force__slide .swiper-control-btn {
    background-color: #fff;
    border: 1px solid var(--color-pri, #d2232a);
    box-shadow: 0 0.4rem 1.2rem rgba(16, 24, 40, 0.08);
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.about-force__slide .swiper-control-btn i {
    color: var(--color-pri, #d2232a);
    transition: color 0.2s;
}

@media (hover: hover) {
    .about-force__slide .swiper-control-btn:hover {
        background-color: var(--color-pri, #d2232a);
    }

    .about-force__slide .swiper-control-btn:hover i {
        color: #fff;
    }
}

.about-force__slide .swiper-control-btn.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 600px) {
    .about-force__slide {
        display: flex;
        flex-direction: column;
    }

    .about-force__slide .swiper-control.posi.minus {
        order: 2;
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        gap: 1.6rem;
        margin-top: 2.4rem;
        position: relative;
        z-index: 2;
    }

    .about-force__slide .swiper {
        margin-bottom: 0;
    }

    .about-force__slide .swiper-control.posi.minus .swiper-prev,
    .about-force__slide .swiper-control.posi.minus .swiper-next {
        display: flex;
        position: static;
        transform: none;
        width: 4.8rem;
        height: 4.8rem;
    }
}