/* =====================================================
   NỘI DUNG TRANG CHỦ – QUỸ PHÁT TRIỂN KH&CN QUỐC GIA
   Gồm 10 khối giữa trang: hero, số liệu, kết quả thực hiện nhiệm vụ,
   nâng cao năng lực, hợp tác quốc tế, tin tức/sự kiện,
   hệ sinh thái số, multimedia, thông báo tài trợ.
   Biến màu và font khai báo ở CssHeaderFooter.css (nạp trước).
   ===================================================== */


/* =====================================================
   TIÊU ĐỀ NHỎ TRONG CÁC KHỐI .qpt-section
   Mặc định .qpt-eyebrow là 22px (khai báo ở CssHeaderFooter.css,
   dùng cho khối Kết quả thực hiện nhiệm vụ). Riêng các khối .qpt-section
   thì nhỏ hơn.
   ===================================================== */

.qpt-section .qpt-eyebrow {
    font-size: 18px;
}


/* =====================================================
   2. HERO BANNER
   ===================================================== */

.qpt-hero {
    background-color: #f2a029;
    /* BannertopCrop.png = Bannertop.png đã cắt 96px dải trắng ở đầu (1920x514).
       Nhờ vậy neo được từ trên xuống mà không lòi mảng trắng. */
    background-image: url(../img/BannertopCrop.png);
    /* Kéo ảnh vừa khít khung: thấy trọn ảnh, không cắt phần nào.
       Đổi lại ảnh bị nén theo chiều dọc vì khung dẹt hơn tỉ lệ gốc. */
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 318px;
    display: flex;
    align-items: center;
}

/* Hero banner V2: chỉ ảnh, chạy slick slider (không chữ/nút) */
.qpt-hero-v2 {
    background-image: none;
    background-color: transparent;
    min-height: 0;
    display: block;
    padding: 0;
}

.qpt-hero-v2 .qpt-hero-slider {
    line-height: 0;
}

.qpt-hero-v2 .qpt-hero-slide img {
    width: 100%;
    height: 318px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767.98px) {
    .qpt-hero-v2 .qpt-hero-slide img {
        height: 200px;
    }
}

/* Hero banner: slick cả khối (ảnh nền + text + nút + form) */
/* ================= HERO BANNER: slider trượt ngang tự viết (vanilla) ================= */
.qpt-hero-slick {
    background-image: none;
    background-color: transparent;
    min-height: 0;
    display: block;
    padding: 0;
    overflow: hidden;      /* cắt các slide nằm ngoài khung */
    position: relative;
}

/* Track = hàng ngang các slide, dịch bằng translateX */
.qpt-hero-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

.qpt-hero-cell {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 318px;
    background-color: #f2a029;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Lớp phủ tối gradient phía trái (nơi có chữ) -> chữ trắng luôn đọc được dù nền sáng */
.qpt-hero-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.38) 32%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 72%);
    pointer-events: none;
    z-index: 1;
}

.qpt-hero-cell > .container {
    position: relative;
    z-index: 2;
    min-height: 318px;
    display: flex;
    align-items: center;
}

/* Mô tả banner dưới tiêu đề - nhỏ hơn h1 */
.qpt-hero .hero-desc {
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    max-width: 90%;
    text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* Chấm điều hướng */
.qpt-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 4;
    margin: 0;
    padding: 0;
}

.qpt-hero-dots button {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.qpt-hero-dots button.active {
    background: #fff;
    transform: scale(1.15);
}

@media (max-width: 767.98px) {
    .qpt-hero-cell,
    .qpt-hero-cell > .container {
        min-height: 240px;
    }
}


/* Nội dung bên trong cao sẵn ~273px (tiêu đề 2 dòng + nút + ô tìm kiếm).
   Đệm trên/dưới 22px để tổng vừa đúng 318px — để 40px như cũ thì khối
   bị nội dung đẩy lên 353px, đặt min-height bao nhiêu cũng vô nghĩa. */

.qpt-hero-box {
    width: 52%;
    max-width: 52%;
    padding: 4px 0px 22px;
}

.qpt-hero h1 {
    color: #fff;
    font-size: 41px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.btn-hero {
    display: inline-block;
    background: var(--qpt-red-btn);
    color: #fff !important;
    /* !important để thắng rule mặc định "body * { font-family: Roboto !important }" */
    font-family: RobotoMedium !important;
    font-size: 15px;
    padding: 7px 26px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid white;
}

    .btn-hero:hover {
        background: #b91c1c;
    }


/* Ô tìm kiếm trên hero */

.qpt-searchbar {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    max-width: 700px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

    .qpt-searchbar .qs-icon {
        flex: 0 0 auto;
        padding: 0 14px;
        color: #9aa0a6;
        font-size: 17px;
    }

    .qpt-searchbar input {
        flex: 1 1 auto;
        border: none;
        outline: none;
        height: 47px;
        font-size: 17px;
        color: #333;
    }


    /* Nút nằm LỌT trong thanh trắng: thấp hơn thanh, chừa mép phải, bo góc riêng */

    .qpt-searchbar button {
        flex: 0 0 auto;
        border: none;
        background: var(--qpt-red-btn);
        color: #fff;
        font-family: RobotoMedium !important;
        font-size: 15px;
        height: 36px;
        margin-right: 6px;
        padding: 0 20px;
        border-radius: 5px;
        cursor: pointer;
    }

        .qpt-searchbar button:hover {
            background: #b91c1c;
        }


    /* Biến thể nhỏ dùng trong khối thông báo */

    .qpt-searchbar.sm {
        border: 1px solid #565452;
        box-shadow: none;
        max-width: 100%;
    }

        .qpt-searchbar.sm input {
            height: 46px;
            font-size: 15px;
        }

        .qpt-searchbar.sm button {
            height: 34px;
            font-size: 14px;
            padding: 0 18px;
        }


/* =====================================================
   3. DẢI SỐ LIỆU (4 cột)
   ===================================================== */

.qpt-stats {
    background: linear-gradient(90deg, #f6a01d 0%, #f5a623 50%, #f3a01c 100%);
    padding: 12px 0;
}

    .qpt-stats .row > [class*="col-"] {
        border-left: 1px solid rgba(255, 255, 255, .55);
    }

        .qpt-stats .row > [class*="col-"]:first-child {
            border-left: none;
        }

.qpt-stat-num {
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 4px;
}

.qpt-stat-label {
    color: #840707;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 0;
}


/* =====================================================
   4. THÔNG BÁO TÀI TRỢ, ĐẶT HÀNG
   ===================================================== */

.sec-funding {
    background-image: url(../img/BannerNen.png);
    background-size: auto 100%;
    padding: 48px 0 0px;
}


/* Hàng filter */

.qpt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 26px 0 30px;
}

.qpt-filter {
    background: #fff;
    border: 1px solid #e2d9cb;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

    .qpt-filter:hover {
        border-color: var(--qpt-orange);
        color: var(--qpt-orange-dark);
    }

    .qpt-filter.active {
        background: var(--qpt-red-btn);
        border-color: var(--qpt-red-btn);
        color: #fff;
    }


/* Thẻ thông báo: [ảnh 200px] [nội dung co giãn] [badge ngày 110px] */

.noti-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #f0e4d2;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: box-shadow .2s, transform .2s;
}

    .noti-card:hover {
        box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
        transform: translateY(-2px);
    }

.noti-thumb {
    flex: 0 0 270px;
    padding: 14px;
    display: flex;
    align-items: center;
}
.noti-thumb {
    flex: 0 0 310px;
}

    .noti-thumb img {
        width: 100%;
        height: 165px;
        object-fit: cover;
        border-radius: 4px;
    }

    .noti-thumb-v2 img {
        height: 190px!important;
    }
        /* Ảnh mặc định là icon nhỏ (83x83): giữ nguyên kích thước, căn giữa trên nền nhạt thay vì phóng to cắt xén */
        .noti-thumb .noti-thumb-default {
            background: #f4f7fb;
        }

            .noti-thumb .noti-thumb-default img {
                object-fit: scale-down;
            }

        .noti-body {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 16px 14px 16px 0;
            min-width: 0;
        }


            .noti-body h3 {
                font-size: 19px;
                font-weight: 500;
                line-height: 1.45;
                color: #111;
                margin-bottom: 10px;
                /* Tiêu đề thật dài hơn tiêu đề mẫu: cắt 2 dòng để các thẻ cao đều như thiết kế */
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-align: justify;
            }

        .noti-card:hover .noti-body h3 {
            color: var(--qpt-orange-dark);
        }

        .noti-org {
            color: var(--qpt-orange-dark);
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 0;
            text-align: justify;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 600;
            margin-top: auto;
        }
        /* Badge ngày bên phải */

        .noti-date {
            flex: 0 0 80px;
            background: var(--qpt-amber-soft);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 6px 6px 0;
        }
            /* Nhóm ngày/tháng/năm canh giữa phần trống phía trên nhãn trạng thái:
   margin-top:auto ở đây + margin-top:auto của .noti-status chia đôi
   khoảng trống còn lại, nên nhóm chữ rơi vào chính giữa. */

            .noti-date .nd-month {
                margin-top: auto;
                color: var(--qpt-red);
                font-size: 13px;
                font-weight: 700;
                letter-spacing: .3px;
            }

            .noti-date .nd-day {
                color: var(--qpt-red);
                font-size: 40px;
                font-weight: 800;
                line-height: 1;
            }

            .noti-date .nd-year {
                color: var(--qpt-red);
                font-size: 13px;
                /* để khoảng hở do margin auto lo, đặt cứng sẽ lệch tâm */
                margin-bottom: 0;
            }

        .noti-status {
            width: calc(100% + 12px);
            margin: auto -6px 0;
            padding: 10px 4px;
            font-size: 17px;
            font-weight: 600;
            color: #fff;
        }
            /* Còn hạn nhận hồ sơ: nền xanh #1668c4 - cùng màu menu "Trang chủ", "Giới thiệu"
   khi hover/đang chọn (header.css). Chữ trắng trên nền này đạt ~5.4:1, đọc tốt. */

            .noti-status.open {
                background: #1668c4;
                color: #fff;
            }

            .noti-status.closed {
                background: #8c1c13;
            }
        /* Chấm phân trang */

        .qpt-dots {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-top: 30px;
        }

            .qpt-dots span {
                width: 13px;
                height: 13px;
                border-radius: 50%;
                border: 1px solid var(--qpt-red);
                display: inline-block;
                cursor: pointer;
            }

                .qpt-dots span.active {
                    background: var(--qpt-amber);
                    border-color: var(--qpt-amber);
                }
        /* =====================================================
   5. BANNER NGANG
   ===================================================== */

        .qpt-banner-wide img {
            width: 100%;
            height: 163px;
            /*    object-fit: cover;*/
            display: block;
        }

        .qpt-banner-slider:not(.slick-initialized) .qpt-banner-slide:not(:first-child) {
            display: none;
        }
        /* =====================================================
   6. NÂNG CAO NĂNG LỰC (4 cột)
   ===================================================== */

        .cap-card {
            background: #ececec;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgb(187, 187, 187);
        }

        .cap-card-img {
            padding: 14px 14px 0;
        }

            .cap-card-img img {
                width: 100%;
                height: 187px;
                object-fit: cover;
                display: block;
            }

        .cap-card h3 {
            flex: 1 1 auto;
            padding: 16px 16px 0;
            margin: 0 0 18px;
            font-size: 19px;
            font-weight: 400;
            line-height: 1.5;
            color: #1f2937;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            box-sizing: content-box;
            max-height: calc(1.5em * 3);
            overflow: hidden;
            text-align: justify;
        }

        .cap-card-foot {
            display: flex;
            margin-top: auto;
        }

            .cap-card-foot a {
                flex: 1 1 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 9px 8px;
                font-size: 16px;
                color: #fff !important;
            }

            .cap-card-foot .btn-more {
                background: #9e9e9e;
            }

                .cap-card-foot .btn-more:hover {
                    background: #8a8a8a;
                }

            .cap-card-foot .btn-apply {
                background: #e8620d;
            }

                .cap-card-foot .btn-apply:hover {
                    background: var(--qpt-orange-dark);
                }
        /* =====================================================
   7. HỢP TÁC QUỐC TẾ (cột trái 1/3 – lưới nước 2/3)
   ===================================================== */

        .btn-intl {
            display: inline-block;
            background: #e8620d;
            color: #fff !important;
            font-size: 17px;
            padding: 8px 26px;
            border-radius: 4px;
            margin-top: 6px;
        }

            .btn-intl:hover {
                background: var(--qpt-orange-dark);
            }

        /* Nút "Trở thành đối tác": xanh lá cùng màu nhãn "Đang nhận hồ sơ" (.sec-funding-v2 .noti-status.open) */
        .btn-intl.btn-intl-doitac {
            background: #1a9d35;
        }

            .btn-intl.btn-intl-doitac:hover {
                background: #15802b;
            }
        /* Cờ: chốt chiều cao, rộng tự do để mỗi nước giữ đúng tỉ lệ gốc
   (tỉ lệ dao động 1.32 – 1.84, nếu ép khung cứng sẽ bị cắt mất hoa văn) */

        .country-item {
            text-align: center;
        }

        .country-item img {
            height: 38px;
            width: auto;
            max-width: 100%;
            display: block;
            margin: 0 auto 10px;
        }

        .country-item h4 {
            font-size: 18px;
            font-weight: 700;
            color: #111;
            margin-bottom: 4px;
        }

        .country-item p {
            font-size: 16px;
            color: #333;
            margin-bottom: 0;
        }
        /* Slick cờ: mỗi slide là 1 trang lưới 3 x 2. Padding trên để hiệu ứng nhấc cờ
   khi hover không bị .slick-list (overflow:hidden) cắt mất */

        .country-slider .slick-list {
            margin: 0 -12px;
        }

        .country-slider .country-page {
            padding: 8px 12px 0;
        }
        /* Trước khi slick khởi tạo chỉ hiện trang đầu, tránh nháy các trang xếp dọc */

        .country-slider:not(.slick-initialized) .country-page:nth-child(n+2) {
            display: none;
        }

        .country-slider:not(.slick-initialized) {
            margin: 0 -12px;
        }
        /* =====================================================
   8. TIN TỨC (7 cột) – SỰ KIỆN (5 cột)
   ===================================================== */

        .qpt-panel {
            background: #fff;
            border: 1px solid #ededed;
            border-radius: 10px;
            /* 2 lớp bóng: lớp gần tạo nét viền mềm, lớp xa tạo chiều sâu */
            box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 28px rgba(0, 0, 0, .14);
            padding: 22px;
        }
        /* --- Tin tức: [ảnh ~41%][nội dung phần còn lại] --- */

        .news-row {
            display: flex;
            gap: 20px;
            padding: 15px 0;
            /* border-bottom: 1px solid #f0f0f0; */
        }

            .news-row:first-child {
                padding-top: 0;
            }

            .news-row:last-child {
                padding-bottom: 0;
            }

        .news-row-thumb {
            flex: 0 0 46%;
        }

            .news-row-thumb img {
                width: 100%;
                /* aspect-ratio: 3 / 2; */
                height: 211px;
                object-fit: cover;
                display: block;
                border-radius: 4px;
            }

        .news-row-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

            .news-row-body h3 {
                font-size: 20px;
                font-weight: 700;
                line-height: 1.35;
                color: #111;
                margin-bottom: 9px;
                /* gọn trong 3 dòng, dài hơn thì cắt bằng dấu … */
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-align: justify;
            }

                .news-row-body h3:hover {
                    color: var(--qpt-orange-dark);
                }

        .qpt-tag {
            display: inline-block;
            background: #efefef;
            color: #1c1c1c;
            font-weight: bold;
            font-size: 14px;
            border-radius: 10px;
            padding: 1px 12px;
            margin-bottom: 5px;
            align-self: flex-start;
        }

            .qpt-tag.outline {
                background: #fff;
                border: 1px solid #1668c4;
                color: #1668c4;
                border-radius: 6px;
            }

        .qpt-excerpt {
            font-size: 16px;
            line-height: 1.5;
            color: #141414;
            margin-bottom: 10px;
            font-family: RobotoMedium !important;
            text-align: justify;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: justify;
        }

        .qpt-date {
            margin-top: auto;
            text-align: right;
            color: #1c1c1c;
            font-size: 15px;
            font-family: RobotoMedium !important;
        }

            .qpt-date i {
                margin-right: 6px;
            }
        /* --- Sự kiện: thẻ dọc --- */
        /* ---- Hai cột Tin tức / Sự kiện cao bằng nhau ----
   Row của Bootstrap đã stretch sẵn, chỉ cần biến từng cột thành flex dọc
   rồi cho khối nội dung ăn hết phần cao còn lại dưới tiêu đề. */

        .sec-news .row > [class*="col-"] {
            display: flex;
            flex-direction: column;
        }

        .sec-news > .container > .row > .col-lg-7 > .qpt-panel {
            flex: 1 1 auto;
        }
        /* ---- Chia lại bề ngang 2 cột ----
   Bootstrap cho 7/5 là 58.33% / 41.67%, thiết kế cần 64.33% / 35.67%.
   Bắt buộc bọc trong min-width 992px: dưới mốc đó hai cột là col-12
   (100%), ghi đè ra ngoài sẽ phá luôn bố cục mobile.
   Tổng 2 cột phải đúng 100%, thiếu hoặc thừa là cột phải rớt xuống dòng. */

        @media (min-width: 992px) {
            /* Khe giữa 2 cột = gutter ngang của .row (g-4 mặc định là 24px).
       Chỉ đổi gutter-x, giữ nguyên gutter-y để khi xếp chồng ở mobile
       hai khối vẫn cách nhau bình thường. */
            .sec-news .row {
                --bs-gutter-x: 15px;
            }

                .sec-news .row > .col-lg-7 {
                    width: 64.333333%;
                }

                .sec-news .row > .col-lg-5 {
                    width: 35.666667%;
                }
        }
        /* ---- Cột Sự kiện: 2 thẻ chia đều chiều cao để đáy ngang với khối Tin tức ---- */

        .event-col {
            display: flex;
            flex-direction: column;
            gap: 24px;
            flex: 1 1 auto;
        }
            /* Panel thẻ sự kiện đệm hẹp hơn panel Tin tức bên trái (22px) */

            .event-col .qpt-panel {
                padding: 15px;
            }
        /* Phần chữ (nhãn + tiêu đề + mô tả) thụt vào 7px hai bên và dưới.
   Không đệm trên vì ảnh bìa đã có margin-bottom 14px rồi. */

        .event-body {
            display: flex;
            flex-direction: column;
            padding: 0 7px 7px;
        }

        .event-col > .event-card {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
        }

            .event-col > .event-card > a {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
            }
        /* Nút Đăng ký + ngày luôn nằm sát đáy thẻ */

        .event-card .event-foot {
            margin-top: auto;
            padding-top: 14px;
        }

        .event-card img.event-cover {
            width: 100%;
            height: 251px;
            object-fit: cover;
            display: block;
            border-radius: 4px;
            margin-bottom: 14px;
        }

        .event-card h3 {
            font-size: 19px;
            font-weight: 700;
            line-height: 1.5;
            color: #111;
            text-align: justify;
            margin-bottom: 5px;
        }

        .event-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

            .event-foot .qpt-date {
                margin-top: 0;
            }

        .btn-register {
            background: #fcc374;
            color: #fff !important;
            font-size: 14px;
            border-radius: 4px;
            padding: 3px 16px 2px;
        }

            .btn-register:hover {
                background: var(--qpt-amber);
            }
        /* =====================================================
   9. HỆ SINH THÁI SỐ (carousel 5 ô)
   ===================================================== */

        .eco-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 30px;
        }

        .eco-arrow {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
        }

            .eco-arrow.prev {
                background: #d9d9d9;
                color: #fff;
            }
            /* Slick tự gắn class này khi không còn gì để trượt (số ô ≤ số ô hiển thị) */

            .eco-arrow.slick-disabled {
                opacity: .35;
                cursor: default;
            }

                .eco-arrow.slick-disabled:hover {
                    transform: none;
                    box-shadow: none;
                }

            .eco-arrow.next {
                background: #1b4f8a;
                color: #fff;
            }
        /* Slick slider: khoảng cách giữa các ô tạo bằng padding của slide
   (18px tổng = 9px mỗi bên), slick-list kéo âm lại cho thẳng mép khung */

        .eco-track {
            flex: 1 1 auto;
            /* bắt buộc khi nằm trong flex, nếu không slick tính sai chiều rộng */
            min-width: 0;
        }

            .eco-track .slick-list {
                margin: -10px -9px;
                /* chừa chỗ theo chiều dọc để hiệu ứng nhấc ô lên không bị cắt */
                padding: 10px 0;
            }

            .eco-track .slick-track {
                display: flex;
                align-items: stretch;
            }

            .eco-track .slick-slide {
                height: auto;
                padding: 0 9px;
            }

                .eco-track .slick-slide > div {
                    height: 100%;
                }

        .eco-item {
            background: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            padding: 22px 12px 18px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
            min-height: 175px;
            /* cao bằng nhau trong mọi slide */
            height: 100%;
        }

            .eco-item:hover {
                border-color: var(--qpt-orange);
                box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
            }
            /* Khung icon cố định 66px cao cho mọi logo, contain để không méo.
   Logo vuông (Bộ KH&CN, Tra cứu VB, Tạ Quang Bửu) hiển thị 66×66;
   logo ngang như STM (tỉ lệ 3.44) tự thu theo max-width, canh giữa. */

            .eco-item img {
                height: 66px;
                width: 100%;
                max-width: 150px;
                object-fit: contain;
            }

            .eco-item span {
                font-size: 16px;
                font-weight: 700;
                color: #1f2937;
                line-height: 1.4;
            }
        /* =====================================================
   10. MULTIMEDIA (video lớn 8 cột – 2 thumb 4 cột)
   ===================================================== */
        /* ---- Chia lại bề ngang 2 cột ----
   Bootstrap cho 8/4 là 66.67% / 33.33%, thiết kế cần 70% / 30%.
   Bọc trong min-width 992px vì dưới mốc đó hai cột là col-12 (100%).
   Tổng phải đúng 100%, không thì cột phải rớt xuống dòng. */

        @media (min-width: 992px) {
            .sec-media .row > .col-lg-8 {
                width: 70%;
            }

            .sec-media .row > .col-lg-4 {
                width: 30%;
            }
        }

        .mm-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 26px;
        }

        .mm-title {
            color: #c1121f;
            font-size: 34px;
            font-weight: 700;
            text-transform: uppercase;
            margin: 0;
        }

        .mm-tabs {
            display: flex;
            align-items: center;
            gap: 54px;
        }

            .mm-tabs a {
                color: #8c1c13;
                font-size: 19px;
                font-weight: bold;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                gap: 9px;
            }

                .mm-tabs a:hover,
                .mm-tabs a.active {
                    color: #8c1c13;
                }

        .mm-pane[hidden] {
            display: none !important;
        }

        .mm-empty {
            height: 535px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f7f3ec;
            border-radius: 2px;
            color: #8c1c13;
            font-size: 18px;
            font-weight: 600;
        }

        @media (max-width: 991.98px) {
            .mm-empty {
                height: 260px;
            }
        }
        /* .mm-main chỉ là khung định vị: chứa slider + 2 nút điều hướng đè lên */

        .mm-main {
            position: relative;
            border-radius: 2px;
            overflow: hidden;
        }
        /* Trước khi slick khởi tạo, chỉ hiện slide đầu để tránh nháy 3 ảnh chồng nhau */

        .mm-slider:not(.slick-initialized) .mm-slide:not(:first-child) {
            display: none;
        }

        .mm-slide-link {
            display: block;
            position: relative;
            overflow: hidden;
        }

        .mm-main img {
            width: 100%;
            height: 535px;
            object-fit: cover;
            display: block;
        }
        /* ---- Tiêu đề đè lên đáy ảnh ---- */

        .mm-caption {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 60px 26px 22px;
            background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
            pointer-events: none;
            text-align: justify;
        }

            .mm-caption h3 {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                line-height: 1.45;
                margin: 0;
                text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
                /* gọn trong 2 dòng, dài hơn thì cắt bằng dấu … */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        /* Caption trong 2 thumb nhỏ bên phải: khung thấp hơn nên chữ nhỏ lại */

        .mm-thumb .mm-caption {
            padding: 40px 16px 14px;
        }

            .mm-thumb .mm-caption h3 {
                font-size: 16px;
                line-height: 1.4;
            }

        .mm-side {
            display: flex;
            flex-direction: column;
            gap: 22px;
            height: 535px;
        }

            .mm-side .mm-thumb {
                flex: 1 1 0;
                position: relative;
                overflow: hidden;
                border-radius: 2px;
            }

                .mm-side .mm-thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

        .mm-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 86px;
            height: 86px;
            border-radius: 50%;
            background: #e60000;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 34px;
            padding-left: 6px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
        }

        .mm-thumb .mm-play {
            width: 54px;
            height: 54px;
            font-size: 20px;
        }

        .mm-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border: none;
            border-radius: 50%;
            background: var(--qpt-red-btn);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            z-index: 2;
        }

            .mm-nav.prev {
                left: 16px;
            }

            .mm-nav.next {
                right: 16px;
            }
        /* =====================================================
   11. KẾT QUẢ THỰC HIỆN NHIỆM VỤ (lưới 2 cột)
   ===================================================== */

        .result-card {
            background: #fff;
            border: 1px solid #ececec;
            border-radius: 8px;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

            .result-card:hover {
                box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
            }

            .result-card img {
                width: 100%;
                height: 358px;
                object-fit: cover;
                display: block;
            }

        .result-body {
            padding: 20px 22px 18px;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

            .result-body h3 {
                font-size: 21px;
                font-weight: 700;
                line-height: 1.45;
                color: #111;
                margin-bottom: 10px;
                text-align: justify;
            }

                .result-body h3:hover {
                    color: var(--qpt-orange-dark);
                }

        .link-more {
            display: inline-block;
            color: #1668c4;
            font-size: 17px;
            margin-top: 22px;
        }

        .qpt-copyright {
            background: var(--qpt-copyright);
            color: #fff;
            text-align: center;
            padding: 14px 0;
            font-size: 17px;
        }

        .foot-truycap {
            text-align: right;
            padding: 12px 0;
            font-size: 15px;
            color: #1f2937;
        }

            .foot-truycap i {
                margin-right: 6px;
            }
        /* =========== NÂNG CAO NĂNG LỰC : slick + chấm của slick ===========
   Khoảng cách 24px giữa các thẻ (bằng g-4 cũ) tạo bằng padding của slide */

        .cap-slider .slick-list {
            margin: 0 -12px;
        }

        .cap-slider .slick-track {
            display: flex;
            align-items: stretch;
        }

        .cap-slider .slick-slide {
            height: auto;
            padding: 0 12px;
        }
            /* KHÔNG đặt height:100% cho chính .cap-slide — nó cũng là .slick-slide và
   cần height:auto để co giãn theo track, nếu không thẻ sẽ cao thấp lệch nhau */

            .cap-slider .slick-slide > div {
                height: 100%;
            }
        /* Trước khi slick khởi tạo chỉ hiện 4 thẻ đầu, tránh nháy cả 8 thẻ xếp dọc */

        .cap-slider:not(.slick-initialized) .cap-slide:nth-child(n+5) {
            display: none;
        }

        .cap-slider:not(.slick-initialized) {
            display: flex;
            gap: 24px;
        }

            .cap-slider:not(.slick-initialized) .cap-slide {
                flex: 1 1 0;
                min-width: 0;
            }
        /* ---- Chấm do slick sinh ra, tạo dáng y như .qpt-dots ----
   (slick-theme.css không được nạp nên toàn bộ kiểu dáng nằm ở đây) */

        .cap-slider .slick-dots,
        .country-slider .slick-dots {
            display: flex;
            justify-content: center;
            gap: 14px;
            list-style: none;
            padding: 0;
            margin: 30px 0 0;
        }

            .cap-slider .slick-dots li,
            .country-slider .slick-dots li {
                line-height: 0;
            }

                .cap-slider .slick-dots li button,
                .country-slider .slick-dots li button {
                    width: 13px;
                    height: 13px;
                    padding: 0;
                    border: 1px solid var(--qpt-red);
                    border-radius: 50%;
                    background: transparent;
                    /* nút của slick có sẵn chữ số bên trong, giấu đi */
                    font-size: 0;
                    line-height: 0;
                    color: transparent;
                    text-indent: -9999px;
                    overflow: hidden;
                    cursor: pointer;
                    transition: background-color var(--qpt-fast) ease, border-color var(--qpt-fast) ease, transform var(--qpt-mid) var(--qpt-ease);
                }

                    .cap-slider .slick-dots li button:hover,
                    .country-slider .slick-dots li button:hover {
                        background: var(--qpt-amber-soft);
                        border-color: var(--qpt-amber-soft);
                        transform: scale(1.3);
                    }

                .cap-slider .slick-dots li.slick-active button,
                .country-slider .slick-dots li.slick-active button {
                    background: var(--qpt-amber);
                    border-color: var(--qpt-amber);
                }

                .cap-slider .slick-dots li button:focus-visible,
                .country-slider .slick-dots li button:focus-visible {
                    outline: 2px solid var(--qpt-orange-dark);
                    outline-offset: 3px;
                }
        /* =====================================================
   RESPONSIVE – TOÀN TRANG
   Mốc theo đúng Bootstrap 5.3.2 để khớp với .container và lưới col-*
     ≤1399.98  laptop nhỏ      (container 1140px)
     ≤1199.98  tablet ngang    (container 960px)
     ≤991.98   tablet dọc      (container 720px)  → bật menu mobile
     ≤767.98   điện thoại lớn  (container 540px)
     ≤575.98   điện thoại dọc  (container tràn viền)
     ≤399.98   máy màn hẹp
   ===================================================== */
        /* =====================================================
   ≤ 1399.98px — LAPTOP NHỎ
   ===================================================== */

        @media (max-width: 1399.98px) {
            .qpt-hero h1 {
                font-size: 38px;
            }

            .qpt-hero-box {
                width: 60%;
                max-width: 60%;
            }

            .qpt-title,
            .qpt-title-sm {
                font-size: 30px;
            }

            .qpt-stat-num {
                font-size: 34px;
            }

            .noti-body h3 {
                font-size: 18px;
            }

            .news-row-body h3 {
                font-size: 19px;
            }

            .mm-main img,
            .mm-side {
                height: 445px;
            }

            .mm-caption h3 {
                font-size: 20px;
            }

            .result-card img {
                height: 260px;
            }
            /* --- bổ sung --- */
            .qpt-section .qpt-eyebrow {
                font-size: 17px;
            }

            .news-row-thumb img {
                height: 190px;
            }

            .mm-tabs {
                gap: 40px;
            }
        }
        /* =====================================================
   ≤ 1199.98px — TABLET NGANG
   ===================================================== */

        @media (max-width: 1199.98px) {
            .qpt-title,
            .qpt-title-sm {
                font-size: 28px;
            }

            .qpt-lead {
                font-size: 16px;
            }

            .qpt-hero-box {
                width: 70%;
                max-width: 70%;
            }

            .qpt-hero h1 {
                font-size: 34px;
            }

            .qpt-stat-num {
                font-size: 30px;
            }

            .qpt-stat-label {
                font-size: 14px;
            }


            .noti-date {
                flex: 0 0 72px;
            }

                .noti-date .nd-day {
                    font-size: 34px;
                }

            .noti-body h3 {
                font-size: 17px;
            }

            .noti-org {
                font-size: 15px;
            }

            .cap-card-img img {
                height: 150px;
            }

            .cap-card h3 {
                font-size: 17px;
                /* Padding dưới = 0 vì overflow:hidden cắt theo padding-box (xem rule gốc). */
                padding: 14px 14px 0;
                margin-bottom: 16px;
            }

            .cap-card-foot a {
                font-size: 14px;
                padding: 8px 6px;
            }

            .country-item h4 {
                font-size: 16px;
            }

            .country-item p {
                font-size: 15px;
            }

            .qpt-panel {
                padding: 18px;
            }

            .news-row-thumb {
                flex: 0 0 38%;
            }

            .news-row-body h3 {
                font-size: 18px;
            }

            .qpt-excerpt {
                font-size: 15px;
            }

            .event-card img.event-cover {
                height: 215px;
            }

            .event-card h3 {
                font-size: 18px;
            }

            .mm-title {
                font-size: 30px;
            }

            .mm-tabs {
                gap: 30px;
            }

                .mm-tabs a {
                    font-size: 17px;
                }

            .mm-main img,
            .mm-side {
                height: 400px;
            }

            .result-card img {
                height: 230px;
            }

            .result-body h3 {
                font-size: 19px;
            }
            /* --- bổ sung --- */
            .qpt-eyebrow {
                font-size: 20px;
            }

            .qpt-section .qpt-eyebrow {
                font-size: 16px;
            }

            .news-row-thumb img {
                height: 175px;
            }

            .qpt-tag {
                font-size: 13px;
            }

            .btn-intl {
                font-size: 16px;
                padding: 11px 22px;
            }
        }
        /* =====================================================
   ≤ 991.98px — TABLET DỌC  (bật menu mobile)
   ===================================================== */

        @media (max-width: 991.98px) {
            /* ---- Hero ---- */
            .qpt-hero {
                position: relative;
                min-height: 280px;
            }
                /* Chữ trải hết chiều ngang nên phủ thêm lớp tối mờ cho dễ đọc trên ảnh */
                .qpt-hero::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(90deg, rgba(125, 62, 0, .42) 0%, rgba(125, 62, 0, .12) 65%, transparent 100%);
                    pointer-events: none;
                }

                .qpt-hero > .container {
                    position: relative;
                    z-index: 1;
                }

            .qpt-hero-box {
                width: 100%;
                max-width: 100%;
            }

            .qpt-hero h1 {
                font-size: 30px;
            }

            .btn-hero {
                font-size: 14px;
                padding: 6px 20px;
            }

            .qpt-searchbar input {
                height: 45px;
                font-size: 16px;
            }
            /* nút giữ thấp hơn thanh để vẫn lọt gọn bên trong */
            .qpt-searchbar button {
                height: 34px;
                font-size: 14px;
            }
            /* ---- Số liệu: 4 cột → lưới 2x2, đổi vạch dọc thành vạch ngang ---- */
            .qpt-stats .row > [class*="col-"] {
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, .5);
                padding-top: 14px;
                padding-bottom: 14px;
            }

                .qpt-stats .row > [class*="col-"]:first-child,
                .qpt-stats .row > [class*="col-"]:nth-child(2) {
                    border-top: none;
                }

            .qpt-stat-num {
                font-size: 28px;
            }

            .qpt-section {
                padding: 26px 0;
            }

            .sec-funding {
                padding: 40px 0 0;
            }

            .noti-thumb {
                flex: 0 0 260px;
            }
            /* 2 cột xếp chồng nên thẻ sự kiện tràn ngang, ảnh cần cao hơn cho cân */
            .event-card img.event-cover {
                height: 260px;
            }

            .event-col > .event-card {
                flex: 0 0 auto;
            }
            /* ---- Hệ sinh thái số: mũi tên nhỏ lại ---- */
            .eco-wrap {
                gap: 12px;
            }

            .eco-arrow {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .eco-item {
                min-height: 158px;
                padding: 18px 10px 14px;
            }

                .eco-item img {
                    height: 56px;
                }

                .eco-item span {
                    font-size: 15px;
                }
            /* ---- Multimedia: 2 thumb chuyển xuống dưới, nằm ngang ---- */
            .mm-main img,
            .mm-side {
                height: auto;
            }

            .mm-side {
                flex-direction: row;
                margin-top: 22px;
            }

            .mm-main img {
                height: 340px;
            }

            .mm-side .mm-thumb img {
                height: 170px;
            }

            .mm-caption {
                padding: 46px 18px 16px;
            }

                .mm-caption h3 {
                    font-size: 18px;
                }

            .mm-title {
                font-size: 26px;
            }

            .mm-tabs {
                gap: 18px;
            }

                .mm-tabs a {
                    font-size: 16px;
                }

            .mm-nav {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
            /* --- bổ sung --- */
            .qpt-section .qpt-eyebrow {
                font-size: 15px;
            }
            /* 2 cột xếp chồng nên ảnh tin tức tràn ngang, cho cao hơn cho cân */
            .news-row-thumb img {
                height: 210px;
            }

            .event-col {
                gap: 18px;
            }

                .event-col .qpt-panel {
                    padding: 13px;
                }

            .event-body {
                padding: 0 5px 5px;
            }

            .foot-contact .fc-icon {
                width: 42px;
                height: 42px;
                font-size: 18px;
            }
        }
        /* =====================================================
   ≤ 767.98px — ĐIỆN THOẠI LỚN
   ===================================================== */

        @media (max-width: 767.98px) {
            .qpt-section {
                padding: 22px 0;
            }

            .sec-funding {
                padding: 34px 0 0;
            }

            .qpt-eyebrow {
                font-size: 15px;
            }

            .qpt-title,
            .qpt-title-sm {
                font-size: 24px;
            }

            .qpt-lead {
                font-size: 15px;
            }
            /* ---- Hero ---- */
            .qpt-hero {
                min-height: 240px;
            }

                .qpt-hero h1 {
                    font-size: 24px;
                    margin-bottom: 20px;
                }

            .btn-hero {
                font-size: 15px;
                padding: 10px 18px;
                margin-bottom: 18px;
            }

            .qpt-searchbar input {
                height: 43px;
                font-size: 15px;
            }

            .qpt-searchbar button {
                height: 32px;
                font-size: 14px;
                padding: 0 18px;
            }
            /* ---- Số liệu ---- */
            .qpt-stats {
                padding: 10px 0;
            }

            .qpt-stat-num {
                font-size: 26px;
            }

            .qpt-stat-label {
                font-size: 13px;
            }
            /* ---- Bộ lọc: cuộn ngang 1 hàng thay vì xuống 3 dòng ---- */
            .qpt-filters {
                flex-wrap: nowrap;
                overflow-x: auto;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                margin: 20px -12px 22px;
                padding: 4px 12px 8px;
                /* scroll-snap căn nút vào mép vùng cuộn; lùi 12px để nút "Tất cả" thẳng hàng với ô tìm kiếm */
                scroll-padding-inline: 12px;
            }

                .qpt-filters::-webkit-scrollbar {
                    display: none;
                }

            .qpt-filter {
                scroll-snap-align: start;
                font-size: 15px;
                padding: 8px 16px;
            }
            /* ---- Thẻ thông báo: xếp dọc ảnh trên – chữ giữa – ngày dưới ---- */
            .noti-card {
                flex-direction: column;
            }

            .noti-thumb {
                flex: 0 0 auto;
                padding: 14px 14px 0;
            }

                .noti-thumb img {
                    height: 260px;
                }

            .noti-body {
                padding: 14px;
            }

            .noti-date {
                flex: 0 0 auto;
                flex-direction: row;
                align-items: center;
                gap: 12px;
                padding: 10px 14px;
            }
                /* xếp ngang rồi thì bỏ margin auto, không nó đẩy chữ dạt sang hai bên */
                .noti-date .nd-month {
                    margin-top: 0;
                }

                .noti-date .nd-day {
                    font-size: 26px;
                }

                .noti-date .nd-year {
                    margin-bottom: 0;
                }

            .noti-status {
                width: auto;
                margin: 0 0 0 auto;
                padding: 6px 16px;
                border-radius: 4px;
                font-size: 15px;
            }

            .noti-empty {
                padding: 36px 16px;
            }

            .qpt-banner-wide img {
                height: 130px;
            }
            /* ---- Nâng cao năng lực ---- */
            .cap-card-img img {
                height: 160px;
            }
            /* ---- Hợp tác quốc tế ---- */
            .country-item img {
                height: 32px;
            }
            /* ---- Tin tức: ảnh trên, chữ dưới ---- */
            .news-row {
                flex-direction: column;
                gap: 12px;
            }

            .news-row-thumb {
                flex: 0 0 auto;
            }

            .news-row-body h3 {
                font-size: 17px;
            }

            .event-card h3 {
                font-size: 17px;
            }

            .event-card img.event-cover {
                height: 200px;
            }
            /* ---- Hệ sinh thái số ---- */
            .eco-arrow {
                width: 36px;
                height: 36px;
                font-size: 15px;
            }
            /* ---- Multimedia ---- */
            .mm-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .mm-title {
                font-size: 24px;
            }
            /* Tabs cũng cuộn ngang để không xuống dòng lộn xộn */
            .mm-tabs {
                width: 100%;
                flex-wrap: nowrap;
                overflow-x: auto;
                scrollbar-width: none;
                gap: 16px;
                padding-bottom: 6px;
            }

                .mm-tabs::-webkit-scrollbar {
                    display: none;
                }

                .mm-tabs a {
                    font-size: 15px;
                    white-space: nowrap;
                }

            .mm-side {
                flex-direction: column;
            }
                /* Xếp dọc thì flex-basis 0 rơi vào TRỤC DỌC: ô bị tính cao 0,
       cộng overflow:hidden nên ảnh biến mất. Trả về auto để ô
       lấy chiều cao theo ảnh bên trong. */
                .mm-side .mm-thumb {
                    flex: 0 0 auto;
                }

            .mm-main img {
                height: 220px;
            }

            .mm-side .mm-thumb img {
                height: 180px;
            }

            .mm-play {
                width: 56px;
                height: 56px;
                font-size: 22px;
            }

            .mm-thumb .mm-play {
                width: 46px;
                height: 46px;
                font-size: 18px;
            }

            .mm-caption {
                padding: 36px 14px 12px;
            }

                .mm-caption h3 {
                    font-size: 16px;
                    margin-bottom: 5px;
                }

            .mm-thumb .mm-caption {
                padding: 32px 12px 10px;
            }

                .mm-thumb .mm-caption h3 {
                    font-size: 14px;
                }
            /* ---- Thông báo tài trợ ---- */
            .result-card img {
                height: 200px;
            }

            .result-body {
                padding: 16px 16px 14px;
            }

                .result-body h3 {
                    font-size: 18px;
                }

            .link-more {
                font-size: 16px;
                margin-top: 16px;
            }

            .qpt-copyright {
                font-size: 15px;
                padding: 12px 14px;
            }
            /* --- bổ sung --- */
            .qpt-section .qpt-eyebrow {
                font-size: 14px;
            }

            .news-row-thumb img {
                height: 190px;
            }

            .qpt-tag {
                font-size: 12px;
                padding: 1px 10px;
            }

            .btn-intl {
                font-size: 15px;
                padding: 10px 18px;
            }

            .btn-register {
                font-size: 13px;
            }

            .noti-empty i {
                font-size: 36px;
            }

            .noti-empty p {
                font-size: 15px;
            }

            .foot-nav a .fa-caret-down {
                font-size: 17px;
            }

            .event-col {
                gap: 16px;
            }

                .event-col .qpt-panel {
                    padding: 12px;
                }

            .event-body {
                padding: 0 4px 4px;
            }
        }
        /* =====================================================
   ≤ 575.98px — ĐIỆN THOẠI DỌC
   ===================================================== */

        @media (max-width: 575.98px) {
            .qpt-title,
            .qpt-title-sm {
                font-size: 21px;
            }

            .qpt-hero {
                min-height: 220px;
            }

                .qpt-hero h1 {
                    font-size: 21px;
                }

            .qpt-searchbar button {
                padding: 0 14px;
                font-size: 14px;
            }

            .qpt-searchbar .qs-icon {
                padding: 0 10px;
            }

            .qpt-stat {
                padding: 4px 6px 10px;
            }

            .qpt-stat-num {
                font-size: 22px;
            }

            .qpt-stat-label {
                font-size: 12px;
            }

            .noti-body h3 {
                font-size: 16px;
            }
            /* Nút "Xem thêm / Nộp hồ sơ" xếp dọc cho đủ chỗ chữ */
            .cap-card-foot {
                flex-direction: column;
            }

            .country-item h4 {
                font-size: 15px;
            }

            .country-item p {
                font-size: 14px;
            }

            .qpt-panel {
                padding: 14px;
            }

            .event-card img.event-cover {
                height: 170px;
            }

            .eco-arrow {
                width: 34px;
                height: 34px;
            }

            .eco-wrap {
                gap: 8px;
            }

            .mm-title {
                font-size: 22px;
            }

            .mm-tabs a {
                font-size: 14px;
            }

            .mm-main img {
                height: 190px;
            }

            .mm-nav {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }

            .result-card img {
                height: 170px;
            }

            .result-body h3 {
                font-size: 17px;
            }

            .qpt-copyright {
                font-size: 14px;
            }
            /* --- bổ sung --- */
            .qpt-section .qpt-eyebrow {
                font-size: 13px;
            }

            .news-row-thumb img {
                height: 165px;
            }

            .noti-empty i {
                font-size: 30px;
            }

            .foot-contact .fc-icon {
                width: 38px;
                height: 38px;
                font-size: 16px;
            }
        }
        /* =====================================================
   ≤ 399.98px — MÁY MÀN HẸP
   ===================================================== */

        @media (max-width: 399.98px) {
            .qpt-hero h1 {
                font-size: 19px;
            }

            .qpt-title,
            .qpt-title-sm {
                font-size: 19px;
            }

            .qpt-stat-num {
                font-size: 20px;
            }

            .qpt-stat-label {
                font-size: 11px;
            }

            .qpt-filter {
                font-size: 14px;
                padding: 7px 14px;
            }

            .noti-body h3 {
                font-size: 15px;
            }

            .noti-date .nd-day {
                font-size: 22px;
            }

            .mm-main img {
                height: 165px;
            }
            /* --- bổ sung --- */
            .news-row-thumb img {
                height: 145px;
            }

            .qpt-tag {
                font-size: 11px;
            }

            .btn-hero {
                font-size: 13px;
                padding: 6px 14px;
            }
        }
        /* ---- Icon "Nộp hồ sơ" trong thẻ Nâng cao năng lực ---- */

        .cap-card-foot img {
            height: 22px;
            width: auto;
            flex: 0 0 auto;
        }
        /* ---- Khung bọc ảnh: cắt gọn phần ảnh phóng to ---- */

        .zoom-box {
            display: block;
            width: 100%;
            overflow: hidden;
            border-radius: 4px;
        }

            .zoom-box img {
                transition: transform var(--qpt-slow) var(--qpt-ease);
            }

        .event-cover-box {
            margin-bottom: 14px;
            /* không cho co lại khi thẻ bị kéo giãn cho bằng thẻ bên cạnh */
            flex: 0 0 auto;
        }

        .event-card img.event-cover {
            margin-bottom: 0;
            border-radius: 0;
        }
        /* Các khung ảnh không cần thẻ bọc (đã tự cắt) */

        .news-row-thumb,
        .qpt-banner-wide {
            overflow: hidden;
            border-radius: 4px;
        }

            .news-row-thumb img,
            .qpt-banner-wide img,
            .result-card img,
            .mm-main img,
            .mm-thumb img {
                transition: transform var(--qpt-slow) var(--qpt-ease);
            }
        /* ---- Nhịp chuyển chung cho link & tiêu đề ---- */

        a,
        .qpt-filter,
        .eco-item,
        .country-item,
        .qpt-dots span {
            transition: color var(--qpt-fast) ease, background-color var(--qpt-fast) ease, border-color var(--qpt-fast) ease, box-shadow var(--qpt-mid) var(--qpt-ease), transform var(--qpt-mid) var(--qpt-ease);
        }

            .noti-body h3,
            .news-row-body h3,
            .event-card h3,
            .result-body h3,
            .qpt-date,
            .eco-item span {
                transition: color var(--qpt-fast) ease, transform var(--qpt-mid) var(--qpt-ease);
            }
        /* =========== Ô TÌM KIẾM : hiệu ứng khi bấm vào nhập =========== */

        .qpt-searchbar {
            position: relative;
            transition: box-shadow var(--qpt-mid) var(--qpt-ease), transform var(--qpt-mid) var(--qpt-ease);
        }
            /* Vạch màu chạy từ giữa ra hai bên ở đáy ô */

            .qpt-searchbar::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--qpt-amber), var(--qpt-orange-dark));
                transform: translateX(-50%);
                transition: width .38s var(--qpt-ease);
                pointer-events: none;
                z-index: 2;
            }

            .qpt-searchbar .qs-icon {
                transition: color .2s ease, transform var(--qpt-mid) var(--qpt-ease);
            }

            .qpt-searchbar input::placeholder {
                transition: opacity .25s ease, color .25s ease;
            }
            /* --- Trạng thái đang nhập --- */

            .qpt-searchbar:focus-within {
                transform: translateY(-2px);
                box-shadow: 0 0 0 3px rgba(249, 178, 51, .45), 0 12px 28px rgba(0, 0, 0, .18);
            }

                .qpt-searchbar:focus-within::after {
                    width: 100%;
                }
                /* Icon kính lúp đổi sang cam + phóng nhẹ */

                .qpt-searchbar:focus-within .qs-icon {
                    color: var(--qpt-orange-dark);
                    transform: scale(1.15);
                }
                /* Chữ gợi ý mờ bớt để nhường chỗ cho chữ đang gõ */

                .qpt-searchbar:focus-within input::placeholder {
                    opacity: .45;
                }
            /* Nút Tìm kiếm sáng lên theo */

            .qpt-searchbar button {
                transition: background-color var(--qpt-fast) ease;
            }

            .qpt-searchbar:focus-within button {
                background: #b91c1c;
            }
            /* Bản nhỏ trong khối thông báo: vạch mỏng hơn, nhấc ít hơn */

            .qpt-searchbar.sm::after {
                height: 2px;
            }

            .qpt-searchbar.sm:focus-within {
                transform: translateY(-1px);
                border-color: var(--qpt-amber);
                box-shadow: 0 0 0 3px rgba(249, 178, 51, .35), 0 8px 20px rgba(0, 0, 0, .12);
            }
        /* =========== 3. CHIP LỌC =========== */

        .qpt-filter:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(226, 112, 13, .18);
        }
        /* =========== 4. THẺ THÔNG BÁO =========== */

        .noti-card .noti-date {
            transition: background-color var(--qpt-mid) ease;
        }

        .noti-card:hover .zoom-box img {
            transform: scale(1.09);
        }

        .noti-card:hover .noti-date {
            background: var(--qpt-amber);
        }
        /* Rê chuột: cả badge (kể cả nhãn "Mở") cùng đậm lên một lượt */

        .noti-card:hover .noti-status.open {
            background: #1155a5;
        }

        .noti-card:hover .noti-date .nd-month,
        .noti-card:hover .noti-date .nd-day,
        .noti-card:hover .noti-date .nd-year,
        .noti-card:hover .noti-status.open {
            color: #fff;
        }
        /* Banner ngang */

        .qpt-banner-wide a:hover img {
            transform: scale(1.03);
        }
        /* =========== 5. THẺ NÂNG CAO NĂNG LỰC =========== */

        .cap-card {
            transition: transform var(--qpt-mid) var(--qpt-ease), box-shadow var(--qpt-mid) var(--qpt-ease);
        }

            .cap-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 26px rgba(0, 0, 0, .13);
            }

                .cap-card:hover .zoom-box img {
                    transform: scale(1.07);
                }
        /* Icon trong nút trượt sang phải */

        .cap-card-foot a i,
        .cap-card-foot a img {
            transition: transform var(--qpt-mid) var(--qpt-ease);
        }

        .cap-card-foot a:hover i,
        .cap-card-foot a:hover img {
            transform: translateX(4px);
        }
        /* =========== 6. Ô QUỐC GIA =========== */

        .country-item img {
            transition: transform var(--qpt-mid) var(--qpt-ease), box-shadow var(--qpt-mid) var(--qpt-ease);
        }

        .country-item:hover img {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
        }

        .country-item:hover h4 {
            color: var(--qpt-orange-dark);
        }
        /* =========== 7. TIN TỨC =========== */

        .news-row .qpt-tag {
            transition: background-color var(--qpt-fast) ease, color var(--qpt-fast) ease;
        }

        .news-row:hover .news-row-thumb img {
            transform: scale(1.07);
        }

        .news-row:hover .qpt-tag {
            background: var(--qpt-orange);
            color: #fff;
        }

        .news-row:hover .qpt-date {
            color: var(--qpt-orange-dark);
            transform: translateX(-3px);
        }
        /* =========== 8. SỰ KIỆN =========== */

        .event-card a:hover .zoom-box img {
            transform: scale(1.06);
        }

        .event-card a:hover h3 {
            color: var(--qpt-orange-dark);
        }

        .event-card:hover .qpt-tag.outline {
            background: #1668c4;
            color: #fff;
        }
        /* =========== 9. HỆ SINH THÁI SỐ =========== */

        .eco-item img {
            transition: transform var(--qpt-mid) var(--qpt-ease);
        }

        .eco-item:hover {
            transform: translateY(-5px);
        }

            .eco-item:hover img {
                transform: scale(1.1) rotate(-3deg);
            }

            .eco-item:hover span {
                color: var(--qpt-orange-dark);
            }
        /* Mũi tên điều hướng */

        .eco-arrow,
        .mm-nav {
            transition: transform var(--qpt-mid) var(--qpt-ease), background-color var(--qpt-fast) ease, box-shadow var(--qpt-mid) var(--qpt-ease);
        }

            .eco-arrow:hover {
                transform: scale(1.12);
                box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
            }

            .mm-nav:hover {
                transform: translateY(-50%) scale(1.12);
                box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
            }

            .eco-arrow.prev:hover {
                background: #b9b9b9;
            }
        /* =========== 10. MULTIMEDIA =========== */

        .mm-play {
            transition: transform var(--qpt-mid) var(--qpt-ease), background-color var(--qpt-fast) ease, box-shadow var(--qpt-mid) var(--qpt-ease);
        }

        .mm-slide-link:hover img,
        .mm-thumb:hover img {
            transform: scale(1.05);
        }

        .mm-slide-link:hover .mm-play,
        .mm-thumb:hover .mm-play {
            transform: translate(-50%, -50%) scale(1.12);
            background: #ff1a1a;
            box-shadow: 0 10px 26px rgba(230, 0, 0, .45);
        }
        /* Tiêu đề đậm lên khi rê chuột vào slide */

        .mm-caption {
            transition: background .28s var(--qpt-ease);
        }

        .mm-slide-link:hover .mm-caption,
        .mm-thumb:hover .mm-caption {
            background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .65) 50%, rgba(0, 0, 0, .05) 100%);
        }
        /* Nhịp đập nhẹ ở nút play lớn để mời bấm */

        @keyframes qptPulse {
            0%, 100% {
                box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
            }

            50% {
                box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 0 14px rgba(230, 0, 0, .12);
            }
        }

        .mm-slide .mm-play {
            animation: qptPulse 2.4s ease-in-out infinite;
        }

        .mm-slide-link:hover .mm-play {
            animation: none;
        }
        /* Tab multimedia: gạch chân trượt */

        .mm-tabs a {
            position: relative;
        }

            .mm-tabs a::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -6px;
                width: 0;
                height: 2px;
                background: currentColor;
                transition: width var(--qpt-mid) var(--qpt-ease);
            }

            .mm-tabs a:hover::after,
            .mm-tabs a.active::after {
                width: 100%;
            }
        /* =========== 11. THẺ KẾT QUẢ NHIỆM VỤ =========== */

        .result-card {
            transition: transform var(--qpt-mid) var(--qpt-ease), box-shadow var(--qpt-mid) var(--qpt-ease), border-color var(--qpt-fast) ease;
        }

            .result-card:hover {
                transform: translateY(-5px);
                border-color: var(--qpt-amber-soft);
            }

                .result-card:hover img {
                    transform: scale(1.05);
                }

                .result-card:hover .qpt-date {
                    color: var(--qpt-orange-dark);
                }
        /* Link "Xem thêm >>" trượt sang phải */

        .link-more:hover {
            transform: translateX(4px);
            color: var(--qpt-orange-dark);
        }
        /* Chấm phân trang */

        .qpt-dots span:hover {
            transform: scale(1.3);
            background: var(--qpt-amber-soft);
        }
        /* =========== DẢI SỐ LIỆU : hiệu ứng hover từng ô =========== */

        .qpt-stat {
            position: relative;
            padding: 6px 12px 12px;
            border-radius: 8px;
            cursor: default;
            overflow: hidden;
            transition: background-color var(--qpt-mid) var(--qpt-ease), transform var(--qpt-mid) var(--qpt-ease);
        }
            /* Vệt sáng quét chéo qua ô */

            .qpt-stat::before {
                content: "";
                position: absolute;
                top: 0;
                left: -75%;
                width: 50%;
                height: 100%;
                background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 100%);
                transform: skewX(-20deg);
                pointer-events: none;
            }
            /* Vạch trắng nở ra từ giữa, ở đáy ô */

            .qpt-stat::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 0;
                height: 3px;
                background: #fff;
                border-radius: 3px;
                transform: translateX(-50%);
                transition: width .38s var(--qpt-ease);
            }

        .qpt-stat-num,
        .qpt-stat-label {
            position: relative;
            z-index: 1;
            transition: transform var(--qpt-mid) var(--qpt-ease), text-shadow var(--qpt-mid) ease, color var(--qpt-fast) ease;
        }
        /* --- Trạng thái hover --- */

        .qpt-stat:hover {
            background-color: rgba(255, 255, 255, .14);
            transform: translateY(-4px);
        }

            .qpt-stat:hover::after {
                width: 62%;
            }

            .qpt-stat:hover::before {
                animation: qptShine .9s var(--qpt-ease);
            }

            .qpt-stat:hover .qpt-stat-num {
                transform: scale(1.08);
                text-shadow: 0 4px 14px rgba(0, 0, 0, .22);
            }

            .qpt-stat:hover .qpt-stat-label {
                transform: translateY(2px);
            }

        @keyframes qptShine {
            from {
                left: -75%;
            }

            to {
                left: 125%;
            }
        }
        /* =========== LƯỚI THÔNG BÁO : lọc tab + phân trang =========== */
        /* Bootstrap đặt display cho .col-* nên phải ép [hidden] mạnh hơn */

        .noti-grid > [hidden],
        .qpt-dots[hidden],
        .noti-empty[hidden] {
            display: none !important;
        }
        /* JS khóa min-height của lưới bằng chiều cao tab "Tất cả" (giữ nền không co giãn khi đổi tab).
   Dồn các hàng thẻ lên trên, không để flex kéo giãn hàng (align-content: stretch mặc định)
   làm thẻ cao hết khối khi tab có ít thẻ. */
        .noti-grid {
            align-content: flex-start;
        }
        /* Thẻ trượt lên hiện dần khi đổi tab / đổi trang */

        @keyframes qptCardIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        .noti-grid > .is-in {
            animation: qptCardIn .42s var(--qpt-ease) both;
        }
        /* Không có thẻ nào khớp bộ lọc */

        .noti-empty {
            text-align: center;
            padding: 52px 20px;
        }

            .noti-empty i {
                font-size: 46px;
                color: var(--qpt-amber-soft);
                display: block;
                margin-bottom: 14px;
            }

            .noti-empty p {
                font-size: 17px;
                color: #8a7f70;
                margin: 0;
            }

        .zone-tin-tuc-su-kien {
            background: #f4f7fa;
        }
        /* ============================================================
   TIN CHẠY NGANG (component LMainTinChay)
   ============================================================ */
        .qpt-ticker-bar {
            background-color: #fcf1d7;
            border-bottom: 2px solid #f6ebd1;
            display: flex;
            align-items: center;
            min-height: 40px;
        }

        .qpt-ticker {
            overflow: hidden;
            white-space: nowrap;
        }

        .qpt-ticker-track {
            display: inline-flex;
            flex-wrap: nowrap;
            white-space: nowrap;
            will-change: transform;
            /* !important để thắng luật reduce-motion của Bootstrap (ticker cần chạy) */
            animation: qpt-ticker-run var(--qpt-ticker-time, 30s) linear infinite !important;
        }
        /* Hover thì dừng */
        .qpt-ticker:hover .qpt-ticker-track {
            animation-play-state: paused;
        }

        .qpt-ticker-item {
            display: inline-flex;
            align-items: center;
            padding: 8px 28px; /* khoảng cách giữa các tin */
            color: #222;
            font-size: 14px;
            text-decoration: none;
            white-space: nowrap;
        }
            /* chấm phân cách đầu mỗi tin */
            .qpt-ticker-item::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--qpt-orange, #ef8b1f);
                margin-right: 12px;
                flex: 0 0 auto;
            }

            .qpt-ticker-item:hover {
                color: var(--qpt-orange-dark, #e2700d);
                text-decoration: underline;
            }

        @keyframes qpt-ticker-run {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }
        /* ================= Khối Sự kiện V2 (ViewComponent LMainSuKienV2) =================
   Mọi selector bọc trong .lmain-sukien-v2 để các class chung (.wrap/.app-card/.thumb/
   .info/.series-title...) không ảnh hưởng khối khác trên trang. */
        .lmain-sukien-v2 .wrap {
            max-width: 100%;
        }

        .lmain-sukien-v2 .app-card {
            border: 0;
            border-radius: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        }

            .lmain-sukien-v2 .app-card + .app-card {
                margin-top: .75rem;
            }
        /* Thay background bằng <img src="..."> của bạn */
        .lmain-sukien-v2 .thumb {
            background: linear-gradient(180deg, #8ec5ee 0%, #cfe6f5 55%, #7aa86a 100%);
        }

        .lmain-sukien-v2 .thumb-lg {
            height: 250px;
            border-radius: 10px;
        }

        .lmain-sukien-v2 .thumb-sm {
            width: 130px;
            height: 90px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .lmain-sukien-v2 .course-title {
            color: #1d4fd8;
            font-weight: 700;
            font-size: .95rem;
            line-height: 1.35;
        }

        .lmain-sukien-v2 .info {
            font-size: 16px;
            color: #111;
        }

            .lmain-sukien-v2 .info b {
                font-weight: 700;
            }

        .lmain-sukien-v2 .mode {
            color: #f5a000;
        }

        /* Màu khớp mục "Thời gian diễn ra" ở trang chi tiết SuKienV2 (SuKienV2.cshtml) */
        .lmain-sukien-v2 .start {
            color: #0a7a0a;
            font-weight: 700;
        }

        .lmain-sukien-v2 .end {
            color: #8b0000;
            font-weight: 700;
        }

        .lmain-sukien-v2 .ngay {
            color: #111;
            font-weight: 600;
        }

        .lmain-sukien-v2 .btn-reg {
            border: 1.5px solid #1d4fd8;
            color: #1d4fd8;
            font-weight: 700;
            font-size: .75rem;
            padding: .4rem 1.1rem;
            border-radius: 6px;
            background: #fff;
            text-decoration: none;
        }

            .lmain-sukien-v2 .btn-reg:hover {
                background: #1d4fd8;
                color: #fff;
            }

        /* Card lớn: nội dung xếp dọc, nút đăng ký luôn dính sát đáy (các thẻ cùng hàng canh đều) */
        .lmain-sukien-v2 .event-card .card-body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

            .lmain-sukien-v2 .event-card .card-body .text-end {
                margin-top: auto;
            }

        .lmain-sukien-v2 .series-label {
            font-size: 16px;
            color: #555;
        }

        .lmain-sukien-v2 .series-title {
            font-size: 18px;
            font-weight: 500;
            color: #111;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
        }
        /* ================= Thông báo tài trợ V2 (ViewComponent LMainThongBaoTaiTroV2) =================
   Bố cục thẻ khác bản gốc: BỎ cột badge ngày (.noti-date); tiêu đề chiếm hết phần trên;
   hàng đáy gồm danh mục (trái) + trạng thái (pill sát góc dưới phải). Chỉ override trong .sec-funding-v2
   nên bản gốc .sec-funding không bị ảnh hưởng. */
        /* Không còn cột ngày -> body có đệm phải để chữ không sát mép thẻ */
        .sec-funding-v2 .noti-body {
            padding: 16px 14px;
        }
            /* Tiêu đề chiếm phần trên (cắt tối đa 4 dòng; khớp với data-clamp="4" ở view) */
            .sec-funding-v2 .noti-body h3 {
                -webkit-line-clamp: 4;
                margin-bottom: 12px;
            }
        /* Hàng đáy: đẩy xuống sát đáy thẻ; danh mục trái, trạng thái phải */
        .sec-funding-v2 .noti-foot {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 12px;
            margin-top: auto;
        }
        /* Danh mục: chiếm phần còn lại bên trái; .noti-foot lo việc đẩy xuống đáy */
        .sec-funding-v2 .noti-org {
            margin-top: 0;
            margin-bottom: 0;
            flex: 1 1 auto;
            min-width: 0;
        }
        /* Trạng thái: pill nhỏ sát góc dưới phải (thay cho badge tràn chiều rộng cột ngày ở bản gốc) */
        .sec-funding-v2 .noti-status {
            width: auto;
            margin: 0;
            flex: 0 0 auto;
            align-self: flex-end;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 15px;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* Màu kiểu đèn giao thông CHỈ cho V2: đang nhận hồ sơ = xanh, đã đóng = đỏ */
        .sec-funding-v2 .noti-status.open {
            background: #1a9d35;
            color: #fff;
        }

        .sec-funding-v2 .noti-status.closed {
            background: #e02424;
            color: #fff;
        }

        .sec-funding-v2 .noti-card:hover .noti-status.open {
            background: #15822b;
        }