/*
 * Child theme main stylesheet
 * Page-specific or component-specific CSS should live here first.
 */

.mona-about-page {
    display: block;
}

/* Font Awesome fallback icons inside social links (when no image is set). */
.social-link i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    line-height: 1;
    color: inherit;
}

/* ---------------------------------------------------------------------------
 * Fix footer social icons không đều size: icon upload là ảnh khác kích thước/
 * tỉ lệ gốc (ic-ft-fb.svg, s-2.png, linkedin.png, ic-ft-zalo.svg). style.css
 * đặt `.social-link img{width:100%;height:100%}` nhưng KHÔNG object-fit và
 * khung .social-link ở footer không cố định -> ảnh hiện theo size gốc -> lệch.
 * Ép khung đồng nhất + object-fit:contain (giữ tỉ lệ, không méo, cùng footprint).
 * ------------------------------------------------------------------------- */
.ft-social .social-list {
    align-items: center;
}

.ft-social .social-link {
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 auto;
}

.ft-social .social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Fix: Contact Form 7 - danh sach radio/checkbox trong form
 * (vd section "homes-contact" -> truong "Lua chon thong tin lien he").
 *
 * style.css ap rule `.form-ip input, .form-ip textarea` (nen xam, width 100%,
 * height 4.4rem, padding...) len CA nut radio -> radio bien thanh o xam rong;
 * va `.inner-wrap` bi khoa height: 4.4rem -> list radio bi tran, label de len
 * label "Loi nhan". Ghi de tai day (file nay load sau style.css).
 * ------------------------------------------------------------------------- */
.form-ip .inner-wrap:has(.wpcf7-radio),
.form-ip .inner-wrap:has(.wpcf7-checkbox) {
    height: auto;
}

.form-ip .wpcf7-radio,
.form-ip .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.4rem;
    padding-top: 0.4rem;
}

.form-ip .wpcf7-list-item {
    margin: 0;
}

.form-ip .wpcf7-list-item > label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

/* Tu ve nut radio/checkbox bang CSS (style.css ap background xam + co reset
   appearance khien native control bien mat -> dung appearance:none + ve tay) */
.form-ip .wpcf7-radio input[type="radio"],
.form-ip .wpcf7-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 0.15rem solid #c4c4c4;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
}

.form-ip .wpcf7-radio input[type="radio"] {
    border-radius: 50%;
}

.form-ip .wpcf7-checkbox input[type="checkbox"] {
    border-radius: 0.4rem;
}

.form-ip .wpcf7-radio input[type="radio"]:checked,
.form-ip .wpcf7-checkbox input[type="checkbox"]:checked {
    border-color: var(--color-pri, #d2232a);
}

/* Cham tron khi radio duoc chon */
.form-ip .wpcf7-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0.3rem;
    border-radius: 50%;
    background-color: var(--color-pri, #d2232a);
}

/* Dau tich khi checkbox duoc chon */
.form-ip .wpcf7-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.1rem;
    width: 0.4rem;
    height: 0.85rem;
    border: solid var(--color-pri, #d2232a);
    border-width: 0 0.2rem 0.2rem 0;
    transform: rotate(45deg);
}

.form-ip .wpcf7-list-item-label {
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--text);
}

/* ---------------------------------------------------------------------------
 * Fix 404: .mobile::after tham chieu "assets/images/star-sqr.png" (anh trang
 * tri goc menu mobile) nhung file nay khong ton tai trong bo source -> request
 * tra ve 404. Bo background hong (chi la trang tri, khong anh huong layout).
 * Neu sau nay co file star-sqr.png that thi doi lai thanh url(...) tuong ung.
 * ------------------------------------------------------------------------- */
.mobile::after {
    background-image: none;
}

/* ---------------------------------------------------------------------------
 * Fix o select (Select2) trong form DANG KY (.sec-register):
 *  1) style.css set `.select2-selection--single{height:100%}` nhung KHONG set
 *     height cho `.select2-container` -> container co lai ~28px (thap hon input
 *     4.8rem). => cap height cho container + ep width 100% (Select2 set inline
 *     width co dinh).
 *  2) Chu + placeholder + mui ten bi lech: theme can giua bang flex tren thang
 *     `.select2-selection--single` (column + justify-center) va dich mui ten
 *     bang transform tren the `b`. De chac chan, ep can giua bang flex truc
 *     tiep tren __rendered va __arrow (override !important + do uu tien cao).
 * ------------------------------------------------------------------------- */
.sec-register .form-ip .inner-wrap .select2-container {
    width: 100% !important;
    height: 4.8rem;
}

.sec-register .form-ip .inner-wrap .select2-container .select2-selection--single {
    height: 100%;
}

/* Chu / placeholder: can giua doc bang flex (thay vi line-height). */
.sec-register .form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    line-height: normal;
}

/* Mui ten: chiem full chieu cao va can giua thang chevron (the `b`). */
.sec-register .form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.sec-register .form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__arrow b {
    margin: 0;
    transform: none;
}

/* ---------------------------------------------------------------------------
 * Fix Select2 cho filter pill .selectFilter (vd "Chọn trường" trang Tin tức).
 * Cùng gốc lỗi: .select2-selection--single{height:100%} nhưng .select2-container
 * không có height -> co lại. Cấp height + căn giữa chữ + mũi tên.
 * Giữ nền primary + chữ trắng do .selectFilter-pri trong style.css quy định.
 * ------------------------------------------------------------------------- */
.selectFilter .select2-container {
    width: 100% !important;
    height: 4.8rem;
}

.selectFilter .select2-container .select2-selection--single {
    height: 100%;
}

.selectFilter .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    line-height: normal;
}

.selectFilter .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.selectFilter .select2-container .select2-selection--single .select2-selection__arrow b {
    margin: 0;
    transform: none;
}

/* ---------------------------------------------------------------------------
 * Fix CHUNG cho mọi <select> (Select2) trong layout .form-ip (Form Tư vấn
 * trường, Liên hệ, popup...). Select2 tự set width inline (vd 179px) và khung
 * không khớp height input -> select bị nhỏ/lệch, khác style các field khác.
 * Đồng bộ: full width + height 4.8rem + nền/viền như input + căn giữa chữ +
 * mũi tên. Riêng trạng thái disabled (trang trường khoá sẵn) giữ giao diện như
 * field thường thay vì màu xám "disabled" mặc định của Select2.
 * (Quy tắc .sec-register có sẵn độ ưu tiên cao hơn nên không bị đè.)
 * ------------------------------------------------------------------------- */
.form-ip .inner-wrap .select2-container {
    width: 100% !important;
    height: 4.4rem;
}

.form-ip .inner-wrap .select2-container .select2-selection--single {
    height: 100%;
    border: 0.1rem solid transparent;
    background-color: var(--bg);
}

.form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding-left: 1.6rem;
    line-height: normal;
    color: var(--text);
}

.form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.form-ip .inner-wrap .select2-container .select2-selection--single .select2-selection__arrow b {
    margin: 0;
    transform: none;
}

/* Trạng thái disabled: giữ nền/độ rõ như field thường (không xám mờ). */
.form-ip .inner-wrap .select2-container--disabled .select2-selection--single {
    background-color: var(--bg);
    opacity: 1;
    cursor: default;
}

/* ---------------------------------------------------------------------------
 * Fix banner trang chi tiết tin (.bn-single-img): mép dưới fade bị "đường kẻ
 * ngang". style.css dùng gradient 2 chặng (#fff -> #fff0) -> alpha tăng tuyến
 * tính, phủ lên vùng ảnh tối tạo dải chuyển đột ngột nhìn như 1 đường kẻ.
 * Đổi sang gradient nhiều chặng (eased scrim) cho fade mượt, không lộ vạch.
 * ------------------------------------------------------------------------- */
.bn-single-img::after {
    height: 45%;
    background: linear-gradient(
        to top,
        #ffffff 0%,
        rgba(255, 255, 255, 0.94) 16%,
        rgba(255, 255, 255, 0.80) 32%,
        rgba(255, 255, 255, 0.55) 52%,
        rgba(255, 255, 255, 0.28) 72%,
        rgba(255, 255, 255, 0.08) 88%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* Khử "đường kẻ ngang" ở mép ảnh banner mà KHÔNG cần hack top:49%.
 * Nguyên nhân: ảnh canh giữa bằng translate(-50%,-50%) bị làm tròn sub-pixel
 * -> hở ~1px ở mép tạo vạch. Cho ảnh tràn nhẹ rồi clip để luôn phủ kín. */
.bn-single-img {
    overflow: hidden;
}

.bn-single-img img {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}

/* about-us-system » scholar-section: theo thiết kế chỉ dùng 2 mũi tên 2 bên,
 * KHÔNG dùng chấm tròn pagination (đã bỏ khỏi markup).
 *
 * Desktop (>1350px): container 124.6rem có lề 2 bên -> rule chung .posi.minus
 * đặt mũi tên NGOÀI lề, không đè nội dung -> giữ nguyên.
 *
 * <=1350px: không còn lề 2 bên nên rule chung ẩn mũi tên đi. Thay vì ẩn, chừa
 * padding 2 bên cho .scholar-slider rồi đặt mũi tên NẰM TRONG khoảng padding đó
 * -> mũi tên ở 2 bên nhưng KHÔNG đè lên text/ảnh.
 * <=600px (điện thoại): bỏ mũi tên, ưu tiên vuốt. */
@media (max-width: 1350px) {
    .scholar-section .scholar-slider {
        padding-left: 7rem;
        padding-right: 7rem;
    }

    .scholar-slider .swiper-control.posi.minus .swiper-prev {
        display: flex;
        left: 0;
        right: auto;
    }

    .scholar-slider .swiper-control.posi.minus .swiper-next {
        display: flex;
        right: 0;
        left: auto;
    }
}

@media (max-width: 600px) {
    .scholar-section .scholar-slider {
        padding-left: 0;
        padding-right: 0;
    }

    .scholar-slider .swiper-control.posi.minus .swiper-prev,
    .scholar-slider .swiper-control.posi.minus .swiper-next {
        display: none;
    }
}

/* about-us-pro-edu (+ school-life) » 2 slider .about-force__slide &
 * .about-report__wrap cùng dùng .swiper-control.posi.minus -> cũng bị ẩn mũi tên
 * ở <=1350px. Áp cùng cách như scholar: chừa padding 2 bên + đặt mũi tên NẰM
 * TRONG khoảng padding -> mũi tên 2 bên nhưng không đè text/ảnh.
 * (.about-force__slide giữ nguyên transform translateY(-6rem) căn theo ảnh card.)
 * <=600px: bỏ mũi tên, ưu tiên vuốt. */
@media (max-width: 1350px) {
    .about-force__slide,
    .about-report__wrap {
        padding-left: 7rem;
        padding-right: 7rem;
    }

    .about-force__slide .swiper-control.posi.minus .swiper-prev,
    .about-report__wrap .swiper-control.posi.minus .swiper-prev {
        display: flex;
        left: 0;
        right: auto;
    }

    .about-force__slide .swiper-control.posi.minus .swiper-next,
    .about-report__wrap .swiper-control.posi.minus .swiper-next {
        display: flex;
        right: 0;
        left: auto;
    }
}

@media (max-width: 600px) {
    .about-force__slide,
    .about-report__wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .about-force__slide .swiper-control.posi.minus .swiper-prev,
    .about-force__slide .swiper-control.posi.minus .swiper-next,
    .about-report__wrap .swiper-control.posi.minus .swiper-prev,
    .about-report__wrap .swiper-control.posi.minus .swiper-next {
        display: none;
    }
}

/* curriculum-general » sec-campus-space: carousel canh giữa (slide active ~85%,
 * 2 bên là slide mờ). Wrapper rộng full container nên posi minus đặt mũi tên
 * NGOÀI lề -> off-screen + bị ẩn ở <=1350px -> "thiếu icon slider".
 * Đưa mũi tên VÀO TRONG, overlay lên vùng slide mờ 2 bên, hiện ở mọi khổ
 * (z-index nút =5 > overlay mờ =2 nên không bị che). <=600px: ẩn, ưu tiên vuốt. */
.sec-campus-space .campus-space-slider-wrapper .swiper-control.posi.minus .swiper-prev {
    display: flex;
    left: 2rem;
    right: auto;
}

.sec-campus-space .campus-space-slider-wrapper .swiper-control.posi.minus .swiper-next {
    display: flex;
    right: 2rem;
    left: auto;
}

@media (max-width: 600px) {
    .sec-campus-space .campus-space-slider-wrapper .swiper-control.posi.minus .swiper-prev,
    .sec-campus-space .campus-space-slider-wrapper .swiper-control.posi.minus .swiper-next {
        display: none;
    }
}

/* tuyen-sinh » sec-scholarship: control ĐÃ có style riêng (overlay trong hộp đỏ,
 * 2 nút trắng tròn 2 đầu bằng .swiper-control{position:absolute;left:0;right:0;
 * justify-content:space-between}). NHƯNG markup còn class `posi minus` -> rule
 * chung (specificity cao hơn) ép nút thành absolute + đẩy ra ngoài lề + ẩn
 * <=1350px; ngoài ra wrapper tự ẩn cả control ở <=991px -> "thiếu icon slider".
 * Ép lại đúng thiết kế: nút static chạy về 2 đầu trong hộp, hiện ở mọi khổ. */
.sec-scholarship .scholarship-slider-wrapper .swiper-control.posi.minus {
    display: flex;
}

.sec-scholarship .scholarship-slider-wrapper .swiper-control.posi.minus .swiper-prev,
.sec-scholarship .scholarship-slider-wrapper .swiper-control.posi.minus .swiper-next {
    position: static;
    display: flex;
    left: auto;
    right: auto;
    transform: none;
}

@media (max-width: 600px) {
    .sec-scholarship .scholarship-slider-wrapper .swiper-control.posi.minus .swiper-prev,
    .sec-scholarship .scholarship-slider-wrapper .swiper-control.posi.minus .swiper-next {
        display: none;
    }
}

/* curriculum-general » sec-mental-health: slider 1 slide/khổ (ảnh trái + nội dung
 * phải, dùng arrow chứ không dùng chấm — pagination đã bỏ khỏi markup).
 * Cùng .swiper-control.posi.minus -> ẩn mũi tên <=1350px. Áp padding-reserve như
 * scholar: <=1350 chừa padding 2 bên + mũi tên nằm trong; <=600 ẩn, ưu tiên vuốt. */
@media (max-width: 1350px) {
    .mental-health-slider-wrapper {
        padding-left: 7rem;
        padding-right: 7rem;
    }

    .mental-health-slider-wrapper .swiper-control.posi.minus .swiper-prev {
        display: flex;
        left: 0;
        right: auto;
    }

    .mental-health-slider-wrapper .swiper-control.posi.minus .swiper-next {
        display: flex;
        right: 0;
        left: auto;
    }
}

@media (max-width: 600px) {
    .mental-health-slider-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .mental-health-slider-wrapper .swiper-control.posi.minus .swiper-prev,
    .mental-health-slider-wrapper .swiper-control.posi.minus .swiper-next {
        display: none;
    }
}

/* ===========================================================================
 * PHÂN TRANG link số — style chung theo design (paginate_links type=list ->
 * <ul class="page-numbers"><li><a class="page-numbers">). Override _pagi.scss
 * (style.css) cho khớp 100% thiết kế: ô bo góc, số nền trắng viền xám, trang
 * hiện tại nền cam (--color-second), prev nền kem nhạt, next nền cam nhạt.
 * Dùng chung mọi nơi gọi mona_child_pagination().
 * ========================================================================= */
.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 6rem;
    padding-left: 0;
    list-style: none;
}

@media (max-width: 768px) {
    .page-numbers {
        margin-top: 4rem;
    }
}

.page-numbers > li {
    margin: 0;
}

.page-numbers > li > .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    border: 0.1rem solid #eaecf0;
    border-radius: 1.2rem;
    background-color: #fff;
    color: #475467;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: 0.25s ease;
}

.page-numbers > li > a.page-numbers:hover {
    border-color: var(--color-second, #eb9410);
    color: var(--color-second, #eb9410);
    background-color: rgba(235, 148, 16, 0.08);
}

/* Trang hiện tại */
.page-numbers > li > .page-numbers.current {
    background-color: var(--color-second, #eb9410);
    border-color: var(--color-second, #eb9410);
    color: #fff;
}

/* Dấu "…" */
.page-numbers > li > .page-numbers.dots {
    border-color: #f2f4f7;
    color: #98a2b3;
    cursor: default;
    background-color: #fff;
}

/* Nút prev / next: icon mũi tên, nền tint cam */
.page-numbers > li > .page-numbers.prev,
.page-numbers > li > .page-numbers.next {
    border-color: transparent;
    color: #1d2939;
    font-size: 1.6rem;
}

.page-numbers > li > .page-numbers.prev {
    background-color: #fcefdb;
}

.page-numbers > li > .page-numbers.next {
    background-color: #f6ce8a;
}

.page-numbers > li > .page-numbers.prev:hover,
.page-numbers > li > .page-numbers.next:hover {
    color: #1d2939;
    filter: brightness(0.96);
}

@media (max-width: 768px) {
    .page-numbers > li > .page-numbers {
        width: 4rem;
        height: 4rem;
        font-size: 1.6rem;
        border-radius: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * Fix Select2 cho .selectNor (vd lọc trường ở .system-school__filter trang
 * Hệ thống trường). Design đặt biến --sl-height/--sl-bdr trên .selectNor và
 * style chung qua `.select2-container{height:var(--sl-height)}` + selection,
 * NHƯNG không có width cho .select2-container -> Select2 lấy width inline (hẹp)
 * -> ô bị co lại, lệch. Ép width 100% + căn giữa chữ + mũi tên cho gọn.
 * ------------------------------------------------------------------------- */
.selectNor .select2-container {
    width: 100% !important;
    height: var(--sl-height, 4.8rem);
}

.selectNor .select2-container .select2-selection--single {
    height: 100%;
}

.selectNor .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    line-height: normal;
}

.selectNor .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 1.2rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.selectNor .select2-container .select2-selection--single .select2-selection__arrow b {
    margin: 0;
    transform: none;
}
/* ---------------------------------------------------------------------------
 * Feedback fixes (07/2026)
 * ------------------------------------------------------------------------- */

/* [FB1] Thẻ testimonial (about-us-feel) giờ là <a> để bấm vào bài viết:
 * anchor mặc định inline -> ép block + kế thừa màu chữ, giữ nguyên layout. */
a.about-feel__item {
    display: block;
    color: inherit;
}

/* [FB3] Hover "Vì sao chọn iSchool" (trang Tuyển sinh): thẻ đang hover phải
 * nổi trên các thẻ đứng sau để ảnh pop-out (z-index 10) không bị đè. */
.our-slt-item:hover {
    z-index: 20;
}

/* [FB4] Nút mũi tên (swiper-control posi minus) cần wrapper position:relative.
 * Các wrapper dưới đây chưa được style trong style.css. */
.about-feel__slide,
.scholarship-gallery-wrapper,
.teachMethodsSwiper,
.developPlanSwiper,
.life-boarding__slide {
    position: relative;
}

/* [FB] Hover zoom ảnh: Hoạt động & Tin tức (mọi trang), Báo chí nói về iSchool,
 * lưới tin trang Tin tức. */
.homes-news__item .img,
.about-press__item .img,
.news-event .img {
    overflow: hidden;
}

.homes-news__item .img img,
.about-press__item .img img,
.news-event .img img {
    transition: transform 0.6s ease;
    will-change: transform;
}

.homes-news__item:hover .img img,
.about-press__item:hover .img > img,
.news-event .img:hover img {
    transform: scale(1.08);
}

/* Logo báo (img-tag) nằm trong .img — không zoom logo. */
.about-press__item:hover .img .img-tag img {
    transform: none;
}

/* [FB] Thanh cuộn ảnh tự chạy: timing tuyến tính cho chuyển động đều. */
.js-m-industry .swiper-wrapper {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

/* ---------------------------------------------------------------------------
 * [FB] Giới thiệu - "Những con số nổi bật" dạng count-up (thay ảnh tĩnh).
 * Trước: vị trí tuyệt đối + font theo vw -> phóng to bị đè nhau, chữ tràn.
 * Nay: khối là 1 "sân khấu" tỉ lệ 2:1, mọi kích thước/vị trí tính theo % và
 * font theo cqw (container query width) -> cả cụm co giãn ĐỒNG ĐỀU, không bao
 * giờ đè/tràn ở mọi bề rộng. Mobile (khối hẹp) tự xếp lưới 2 cột.
 * ------------------------------------------------------------------------- */
.about-number__circles {
    position: relative;
    /* Khối tràn rộng hơn cột trái (giống .about-number__img gốc width:130%) để
     * vòng đủ to, chữ không bị chật ở khổ desktop hẹp. */
    width: 122%;
    aspect-ratio: 1.7 / 1;
    container-type: inline-size;
    /* Khớp spacing gốc của .about-number__img (khối được thay) để không dính
     * sát đoạn mô tả phía trên. */
    margin-top: 8rem;
}

.about-number__circle {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* KHÔNG dùng padding % ở đây: padding phần trăm + aspect-ratio tạo phụ thuộc
     * vòng khiến Chrome co content-box về min-content -> chữ rớt từng từ một dòng.
     * Thay bằng giới hạn bề rộng chữ (.num/.label width dưới) để chừa lề. */
    overflow: hidden;
}

.about-number__circle--photo {
    padding: 0;
}

.about-number__circle--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* num/label chiếm ~78% bề ngang vòng (chừa lề tròn) và không co về min-content. */
.about-number__circle .num,
.about-number__circle .label {
    width: 78%;
}

/* cqw = % bề rộng của KHỐI (container). Vì các vòng to nhỏ khác nhau, mỗi vòng
 * được set cỡ chữ riêng (bên dưới, ở phần .pos-*) tỉ lệ với đường kính vòng,
 * để chữ trong vòng nào cũng vừa vặn. Đây là giá trị mặc định. */
.about-number__circle .num {
    font-family: "SVN-Aleo", sans-serif;
    font-weight: 700;
    font-size: 4.4cqw;
    line-height: 1;
}

.about-number__circle .label {
    font-size: 1.7cqw;
    line-height: 1.25;
    margin-top: 0.5em;
}

.about-number__circle--red {
    background: var(--color-pri, #990001);
}

.about-number__circle--red .num,
.about-number__circle--red .label {
    color: #fff;
}

.about-number__circle--cream {
    background: #fdebd2;
}

.about-number__circle--cream .num {
    color: var(--color-pri, #990001);
}

.about-number__circle--cream .label {
    color: #001225;
}

.about-number__circle--orange {
    background: var(--color-second, #fea621);
}

.about-number__circle--orange .num {
    color: var(--color-pri, #990001);
}

.about-number__circle--orange .label {
    color: #fff;
}

/* Vị trí + kích thước từng vòng (đã tính để không đè nhau, chỉ tuck nhẹ theo
 * đúng mock). left/top = %, width = % bề rộng khối. */
.about-number__circle.pos-s1 { left: 29%; top: 4%;  width: 29%; }  /* 7000+ */
.about-number__circle.pos-s1 .num   { font-size: 5.6cqw; }
.about-number__circle.pos-s1 .label { font-size: 2.2cqw; }
.about-number__circle.pos-s2 { left: 7%;  top: 26%; width: 22%; }  /* 15+  */
.about-number__circle.pos-s2 .num   { font-size: 4.4cqw; }
.about-number__circle.pos-s2 .label { font-size: 1.7cqw; }
.about-number__circle.pos-s3 { left: 51%; top: 52%; width: 21%; }  /* 100% */
.about-number__circle.pos-s3 .num   { font-size: 4.2cqw; }
.about-number__circle.pos-s3 .label { font-size: 1.6cqw; }
.about-number__circle.pos-s4 { left: 79%; top: 28%; width: 19%; }  /* 18+  */
.about-number__circle.pos-s4 .num   { font-size: 3.9cqw; }
.about-number__circle.pos-s4 .label { font-size: 1.55cqw; }
.about-number__circle.pos-p1 { left: 60%; top: 8%;  width: 13%; }  /* ảnh 1 */
.about-number__circle.pos-p2 { left: 3%;  top: 64%; width: 15%; }  /* ảnh 2 */
.about-number__circle.pos-p3 { left: 25%; top: 56%; width: 25%; }  /* ảnh 3 */

/* Tablet + mobile (≤900px): cột trái hẹp nên bố cục tuyệt đối bị chật/đè.
 * Dùng @media (không phải @container — vì container-query không style được
 * chính khối container) để bỏ absolute -> xếp lưới 2 cột cho 4 số, ẩn ảnh tròn. */
@media (max-width: 900px) {
    .about-number__circles {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem;
        max-width: 48rem;
        margin: 4rem auto 0;
        container-type: normal;
    }
    .about-number__circle {
        position: static;
        left: auto;
        top: auto;
        width: auto !important;
    }
    .about-number__circle .num,
    .about-number__circle.pos-s1 .num,
    .about-number__circle.pos-s3 .num,
    .about-number__circle.pos-s4 .num {
        font-size: clamp(2.4rem, 7vw, 3.4rem);
    }
    .about-number__circle .label {
        font-size: clamp(1.2rem, 3.2vw, 1.5rem);
    }
    .about-number__circle--photo {
        display: none;
    }
}

/* [FB] Tuyển sinh - Quy trình đăng ký: bước hiện dần theo thứ tự, mũi tên
 * (::before) "chạy ra" sau từng label. Chỉ chạy khi JS gắn [data-steps-anim]. */
.admiss-register-list[data-steps-anim] .admiss-register-col {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--step-i, 0) * 0.35s);
}

.admiss-register-list[data-steps-anim].steps-in .admiss-register-col {
    opacity: 1;
    transform: none;
}

/* Mũi tên "chạy ra": vẽ dần từ trái sang phải (clip-path) như đang phóng tới
 * label kế tiếp, ngay sau khi bước đó hiện ra. */
.admiss-register-list[data-steps-anim] .admiss-register-item:before {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.2s ease, clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--step-i, 0) * 0.35s + 0.3s);
}

.admiss-register-list[data-steps-anim].steps-in .admiss-register-item:before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* [FB] Nút mũi tên slider bị chìm khi gặp nền đỏ/tối (vd mục Dịch vụ đưa đón,
 * Chế độ dinh dưỡng...). Nút gốc nền trong suốt + viền/icon đỏ -> ép nền trắng
 * đặc + bóng nhẹ để luôn nổi. Nền sáng trông không đổi (vốn đã là trắng).
 * Hover giữ nguyên: nền đỏ + icon trắng. */
.swiper-control-btn {
    background-color: #fff;
    box-shadow: 0 0.2rem 0.8rem rgba(16, 24, 40, 0.16);
}

.swiper-control-btn:hover {
    background-color: var(--color-pri, #990001);
    border-color: var(--color-pri, #990001);
}

/* ---------------------------------------------------------------------------
 * [FB] Nút submit Contact Form 7 (<input type="submit" class="btn pri">).
 * Vì là <input> nên KHÔNG có <span class="txt"> -> mất padding + màu chữ trắng
 * mà theme gán qua `.btn.pri .txt`. Kết quả: nút đỏ chữ đen, phẳng. Style lại
 * để giống nút .btn.pri chuẩn + bo góc, bóng nhẹ, hover đổi nền cho đẹp.
 * ------------------------------------------------------------------------- */
.wpcf7-form input.wpcf7-submit.btn {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    min-width: 18rem;
    padding: 0 3.6rem;
    color: #fff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    /* Bóng trung tính hợp cả nút pri (đỏ) lẫn second (cam). */
    box-shadow: 0 0.6rem 1.4rem rgba(16, 24, 40, 0.18);
}

/* Nhấc nhẹ khi hover — áp dụng cho mọi biến thể nút submit. */
.wpcf7-form input.wpcf7-submit.btn:hover {
    box-shadow: 0 0.9rem 1.8rem rgba(16, 24, 40, 0.24);
    transform: translateY(-0.2rem);
}

/* Nút pri: theme đổi nền sang vàng khi hover nhưng không đổi được màu chữ (thiếu
 * .txt) -> tự set chữ đỏ cho tương phản. Nút second hover nền đỏ + chữ trắng đã ổn. */
.wpcf7-form input.wpcf7-submit.btn.pri:hover {
    color: var(--color-pri, #990001);
}

/* Nút solid-black (VD "Hoàn tất và nộp đơn"): thiết kế là nút VIỀN tối, chữ tối
 * #001225, nền trong suốt; hover mới fill tối + chữ trắng. Vì <input> không có
 * .txt nên rule chung ở trên ép color:#fff -> chữ trắng trên nền trong suốt =
 * tàng hình. Override lại đúng thiết kế outline (chữ/viền tối, hover fill). */
.wpcf7-form input.wpcf7-submit.btn.solid-black {
    color: #001225;
    background-color: transparent;
    border: 0.1rem solid #001225;
    box-shadow: none;
}
.wpcf7-form input.wpcf7-submit.btn.solid-black:hover {
    color: #fff;
    background-color: #001225;
}

.wpcf7-form input.wpcf7-submit.btn:active {
    transform: translateY(0);
    box-shadow: 0 0.3rem 0.8rem rgba(16, 24, 40, 0.2);
}

/* Lúc đang gửi (CF7 thêm .submitting): mờ nhẹ, đổi con trỏ chờ. */
.wpcf7-form.submitting input.wpcf7-submit.btn {
    opacity: 0.75;
    cursor: wait;
}

/* ---------------------------------------------------------------------------
 * [FB] Tooltip báo lỗi CF7 (.wpcf7-not-valid-tip) đặt top:100% (thò xuống dưới
 * ô) nhưng không có z-index -> ô/hàng phía dưới (render sau trong DOM) đè lên,
 * che mất chữ "Please fill out this field". Nâng z-index tooltip + nâng cả ô
 * đang lỗi (CF7 gắn class .wpcf7-not-valid vào input không hợp lệ) lên trên các
 * ô kế tiếp bằng stacking context riêng.
 * ------------------------------------------------------------------------- */
.form-ip .wpcf7-not-valid-tip {
    z-index: 30 !important;
}

.form-ip:has(.wpcf7-not-valid) {
    position: relative;
    z-index: 30;
}

/* ---------------------------------------------------------------------------
 * [FB] Hệ đào tạo — lưới co giãn theo số lượng hệ (single-school + Quảng Trị).
 *   1 hệ  -> 1 thẻ chữ nhật ngang (nội dung trái, ảnh phải), full-width.
 *   3 hệ  -> 3 cột.
 *   Còn lại (2, 4, ...) -> giữ 2 cột như thiết kế gốc.
 * Bề rộng đặt theo modifier .system-training__wrap--count-N để chắc chắn đúng,
 * không phụ thuộc các util .col-4 / .col-12 có sẵn hay không.
 * ------------------------------------------------------------------------- */
.system-training__wrap--count-1 .col {
    width: 100%;
}

.system-training__wrap--count-3 .col {
    width: 33.3333%;
}

/* 1 hệ: thẻ nằm ngang, nội dung trái - ảnh phải. */
.system-training__wrap--count-1 .system-training__card {
    flex-direction: row;
    align-items: stretch;
}

.system-training__wrap--count-1 .system-training__card-content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.system-training__wrap--count-1 .system-training__card-img {
    flex: 1 1 45%;
    margin-top: 0;
    align-items: center;
}

/* Tablet: 3 hệ co về 2 cột cho dễ đọc. */
@media (max-width: 1350px) {
    .system-training__wrap--count-3 .col {
        width: 50%;
    }
}

/* Mobile: mọi trường hợp về 1 cột dọc; thẻ 1 hệ trở lại xếp dọc. */
@media (max-width: 768px) {
    .system-training__wrap--count-1 .col,
    .system-training__wrap--count-3 .col {
        width: 100%;
    }

    .system-training__wrap--count-1 .system-training__card {
        flex-direction: column;
    }

    .system-training__wrap--count-1 .system-training__card-content,
    .system-training__wrap--count-1 .system-training__card-img {
        flex: 1 1 auto;
    }

    .system-training__wrap--count-1 .system-training__card-img {
        margin-top: 4rem;
    }
}

/* ---------------------------------------------------------------------------
 * [FB] "Lý do tại sao bạn nên chọn trường" (.system-why): bo tròn (blur) góc
 * các hình thumbnail + nới spacing cho thoáng. CSS gốc nằm trong template/
 * (file build) nên ghi đè tại đây.
 * ------------------------------------------------------------------------- */
/* Bo tròn góc thumbnail — ảnh lớn bên trái + ảnh trong card slider. */
.system-why__image img {
    border-radius: 2.4rem;
}

.system-why__card-img,
.system-why__card-img img {
    border-radius: 0 0 2.4rem 2.4rem;
}

/* Nới spacing: cho phần header (số + tiêu đề) và ảnh thở hơn. */
.system-why__left .wrapper {
    padding-top: 4rem;
    padding-bottom: 1rem;
}

.system-why__image {
    margin-top: 2.4rem;
}

/* Card slider: tăng nhẹ khoảng đệm nội dung để chữ không sát mép. */
.system-why__card-content {
    padding: 3.2rem 2.4rem 0;
}

@media (max-width: 768px) {
    .system-why__image img {
        border-radius: 1.6rem;
    }

    .system-why__left .wrapper {
        padding-top: 2.4rem;
    }
}

/* Limit dropdown height to viewport and allow scroll when too many items.
 * Chỉ áp dụng cho dropdown KHÔNG có menu con cấp 3: menu con cấp 3 bay ra ngoài
 * (left: calc(100% + 1rem)) nên bất kỳ scroll container nào cũng cắt mất nó —
 * và làm hiện thanh cuộn ngang thừa. */
.hd-nav .menu-item>.menu-list:not(:has(>.menu-item.dropdown)) {
    max-height: 60vh;
    /* overflow-y != visible ép overflow-x từ visible thành auto → scroll ngang
     * ma. Khai báo clip tường minh để chỉ cuộn dọc. */
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* system-why: decorative :after curve blocks clicks on slider controls (z-index 4 > wrap z-index 2) */
.system-why:after {
    pointer-events: none;
}

/* system-training: bo tròn ảnh card */
.system-training__card-pic {
    border-radius: 1.6rem;
    overflow: hidden;
}

/* Đặc điểm chương trình: bản gốc chừa một khoảng rất rộng giữa 2 cột
 * (--cg: 44.8rem) và padding-left 35rem để nhét ảnh minh hoạ vào giữa. Đã bỏ ảnh
 * nên trả khoảng cách về bình thường, tránh để lại lỗ hổng giữa lưới. */
.sec-program-features .program-features-wrapper.no-media {
    padding-left: 0;
    min-height: 0;
}

@media (min-width: 1201px) {
    .sec-program-features .program-features-wrapper.no-media .row {
        --cg: 3.2rem;
    }
}

/* Chăm sóc sức khỏe tinh thần: đã gỡ khối tiêu đề + mô tả, mà khoảng cách với
 * section phía trên vốn do .mb-48 của khối đó tạo ra — bù lại bằng padding-top. */
.sec-mental-health {
    padding-top: 4.8rem;
}

/* Bảng "Mục tiêu học tập" (trang Chương trình giáo dục phổ thông). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sec-objectives .objectives-heading {
    width: 80rem;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
}

.sec-objectives .objectives-heading .desc {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #475467;
}

/* Bảng rộng: cho cuộn ngang trong khung riêng, không đẩy tràn cả trang. */
.objectives-table-wrap {
    overflow-x: auto;
    border-radius: 1.6rem;
    border: 0.1rem solid var(--cl-bd);
}

.objectives-table {
    width: 100%;
    min-width: 90rem;
    border-collapse: collapse;
    background-color: #fff;
    /* Cố định để cột "Tiểu học" giữ đúng bề rộng ngay cả khi khách chưa điền. */
    table-layout: fixed;
}

.objectives-table th,
.objectives-table td {
    padding: 2rem 2.4rem;
    border: 0.1rem solid var(--cl-bd);
    vertical-align: top;
    text-align: left;
}

.objectives-table thead th {
    background-color: var(--color-pri);
    color: #fff;
    font-family: SVN-Aleo, serif;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.objectives-table thead th.is-corner {
    background-color: var(--color-pri);
    width: 22%;
}

.objectives-table thead th:not(.is-corner) {
    width: 26%;
}

.objectives-table tbody th.is-label {
    background-color: #fdf6f6;
    font-family: SVN-Aleo, serif;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--color-pri);
}

.objectives-table tbody td {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #475467;
}

/* .mona-content đặt margin 1em cho ul — trong ô bảng thì thừa. */
.objectives-table tbody td.mona-content ul {
    margin: 0;
    padding-left: 1.8rem;
}

.objectives-table tbody td.mona-content ul ul {
    margin: 0.4rem 0 0;
}

.objectives-table tbody td.mona-content li + li {
    margin-top: 0.8rem;
}

@media (max-width: 768px) {
    .objectives-table th,
    .objectives-table td {
        padding: 1.6rem;
    }

    .objectives-table thead th,
    .objectives-table tbody th.is-label {
        font-size: 1.6rem;
    }
}

/* Nút đổi ngôn ngữ (Polylang): cờ tròn 24px như flag-vn.svg; trên mobile nới vùng bấm ≥ 44px. */
.hd-lg-item img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

@media (max-width: 1199.98px) {
    .hd-lg > .hd-lg-item,
    .hd-lg-drop .hd-lg-item {
        min-height: 44px;
        min-width: 44px;
    }
}