@media only screen and (max-width: 1399px) {
    .navigation .nav-menu > li > a{
        padding:14px 12px;
    }
}
@media only screen and (min-width: 1024px) {
    .content-detail .col-lg-8{
        padding-right:20px;
    }
    .content-detail .col-lg-4 {
        padding-left: 20px;
    }
}

@media only screen and (max-width: 1199px) {
    .navigation .nav-menu > li > a {
        padding: 14px 7px;
        text-transform: uppercase;
        letter-spacing: 0;
        font-size:13px;
    }
    .banner .banner-content{width:80%;}
    .title_name {
        font-size: 25px;
    }
    .box_staff_item .personal_info .ps_name {
        font-size: 22px;
    }
    .box_staff_item .ps_info .info p.title_person{font-size:16px;}
}


@media only screen and (max-width: 992px) {
    .hide_desktop {
        display: inline-block;
    }

    .navigation-portrait .nav-menu > li .nav-dropdown {
        border-top: solid 1px #f0f0f0;
    }
   
    .submenu-indicator {
        display: block;
    }
    .navigation .nav-menu > li > a {
        padding: 15px;
        text-transform: uppercase;
    }
    .navigation .nav-menu > li:last-child {
        border-right: none;
    }

}

@media only screen and (max-width: 991px) {
    .overview_item .intro span {
        min-width: 120px;
    }
    .sub-header.header-pages {
        min-height: 220px;
    }

        .sub-header.header-pages .slide-title {
            font-size: 30px;
            margin-bottom: 12px;
        }

        .sub-header.header-pages .bread_crumb .breadcrumb-item {
            font-size: 13px;
        }

            .sub-header.header-pages
            .bread_crumb
            .breadcrumb-item + .breadcrumb-item::before {
                margin: 0 8px;
                font-size: 13px;
            }
    .banner .banner-content{width: 100%;}
    .banner .item .banner-content .slide-dtu,.banner .item .banner-content .slide-h2{font-size: 36px;}
    .footer .footer_box .title_img .title_dept {
        font-size: 18px;
    }

    .footer .footer_box .title_img .title_footer {
        font-size: 18px;
    }
    .students{
        padding-bottom: 30px;
    }
    .students .list-inner{
        margin-bottom: 25px;
    }
    .content-news .box_news {
        margin-bottom: 25px;
    }
    .content-news .box_thongbao .box_publication ul.list_publication{
        padding: 25px;
        min-height: auto;
    }
    .content-detail .box_link{display:none;}
    .content-detail .news_other {
        margin-top: 40px;
    }
}
/* -------------------------------------------
   RESPONSIVE (Màn hình tablet & mobile dưới 768px) 
   ------------------------------------------- */
@media (max-width: 768px) {
    .banner .item .banner-img {
        /* Chuyển sang tỷ lệ 16/9 trên mobile để banner cao và dễ nhìn hơn, 
           nếu giữ 12/5 banner sẽ bị ép rất mỏng. Anh có thể giữ 12/5 nếu muốn. */
        aspect-ratio: 16 / 9;
    }

    .banner .banner-content {
        width: 90%;
        left: 5%;
    }
    .news-list .item_news {
        flex-direction: column;
        gap: 14px;
    }

        .news-list .item_news .img-part {
            max-width: 100%!important;
        }

        .news-list .item_news .title_news {
            font-size: 17px;
        }
    .content-about .box_about {
        flex-direction: column; /* Đẩy phần tử thành xếp dọc (al_left sẽ nằm trên do là HTML viết trước) */
        gap: 30px; /* Thu nhỏ khoảng cách lại trên mobile cho đẹp */
    }

        .content-about .box_about .al_left,
        .content-about .box_about .item_about {
            width: 100%; /* Đảm bảo cả 2 khối đều tràn 100% bề ngang */
        }
    .footer .footer_box .footer-social ul li {
        padding: 0 3px;
    }

    .sitemap-mission .block_quote {
        margin-top: 20px;
    }

    .content-detail .contact-page .map-section {
        height: auto;
    }

        .content-detail .contact-page .map-section .contact-info-warp {
            position: relative;
            width: 100%;
            height: auto;
        }
    .sub-header.header-pages {
        min-height: 190px;
        padding: 35px 15px;
    }

        .sub-header.header-pages .container {
            padding-left: 10px;
            padding-right: 10px;
        }

        .sub-header.header-pages .banner-content {
            width: 100%;
        }

        .sub-header.header-pages .slide-title {
            margin-bottom: 10px;
            font-size: 24px;
            line-height: 1.3;
            letter-spacing: 0;
        }

        .sub-header.header-pages .bread_crumb {
            width: 100%;
            max-width: 100%;
        }

            .sub-header.header-pages .bread_crumb .breadcrumb-item {
                font-size: 12px;
                line-height: 1.4;
            }

                .sub-header.header-pages
                .bread_crumb
                .breadcrumb-item + .breadcrumb-item::before {
                    margin: 0 6px;
                    font-size: 12px;
                }
}

@media only screen and (max-width: 575px) {
    .box_staff_item {
        padding: 16px;
    }

    .overview_item .intro span {
        min-width: unset;
        display: block;
        color: #94a3b8;
    }

    .accordion-button {
        font-size: 14px;
        padding: 12px 14px;
    }

    .accordion-body {
        padding: 14px;
    }
    .other-news {
        padding: 18px 20px;
        margin-top: 30px;
    }

        .other-news .title_other {
            font-size: 16px;
        }

        .other-news ul li a {
            font-size: 14px;
        }
    .banner .item .banner-content .slide-dtu,.banner .item .banner-content .slide-h2{font-size: 36px;}
    .content-news .box_list_new {
        margin-top: 20px;
    }
    .staff_page .col-50 {
        flex: 0 0 auto;
        width: 50%;
    }
    .paging-session {
        justify-content: center;
    }

        .paging-session .pagination {
            gap: 4px;
        }

            .paging-session .pagination .page-item a,
            .paging-session .pagination .page-item span {
                min-width: 32px;
                height: 32px;
                padding: 0 6px;
                font-size: 13px;
            }
    .col-50 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .staff_page .news-item .content-part {
        padding: 12px 10px;
    }

        .staff_page .news-item .content-part .title_fullname a {
            font-size: 14.5px;
        }

        .staff_page .news-item .content-part .desc {
            font-size: 12px;
        }

            .staff_page .news-item .content-part .desc span {
                min-width: unset;
                display: block;
                color: #94a3b8;
            }
}

@media only screen and (max-width: 480px) {
    .header-logo .logo_menu .logo-dtu img{
        width:100px;
    }
    .footer .footer_box {
        padding: 30px 15px; /* Giảm padding cho vừa màn hình điện thoại */
    }

        /* Chuyển toàn bộ hàng ngang thành cột dọc */
        .footer .footer_box .row_footer {
            flex-direction: column;
            align-items: flex-start; /* Hoặc center nếu muốn canh giữa */
            gap: 20px; /* Tạo khoảng cách đều giữa các khối */
        }

            /* Bỏ margin phải của logo, thay bằng khoảng cách dưới */
            .footer .footer_box .row_footer .logo-nn-footer {
                margin-right: 0;
                margin-bottom: 5px;
            }

            /* Reset margin-left: auto của khối mạng xã hội để không bị dạt sang phải */
            .footer .footer_box .row_footer > div:last-child {
                margin-left: 0;
                width: 100%;
            }

        /* Tùy chỉnh danh sách mạng xã hội hiển thị gọn gàng */
        .footer .footer_box .footer-social ul {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

            .footer .footer_box .footer-social ul li {
                margin: 0;
            }

        /* Tùy chỉnh tiêu đề và text nếu cần giãn vừa vặn chiều rộng màn hình */
        .footer .footer_box .title_img {
            width: 100%;
        }

    .header-top .box-header {
        flex-direction: column; /* Xếp dọc Language và Box-Menu */
        justify-content: center;
        padding: 10px 0;
    }

    .header-top .box-menu-fix {
        flex-direction: column; /* Chìa khóa ở đây: Đẩy Search xuống dưới Menu */
        width: 100%;
        margin-top: 10px;
    }

        .header-top .box-menu-fix ul {
            justify-content: center; /* Căn giữa Menu Links trên Mobile */
            width: 100%;
        }

        .header-top .box-menu-fix .search-form {
            margin-left: 0;
            margin-top: 10px; /* Cách menu ở trên 10px */
            width: 100%;
           
        }

            .header-top .box-menu-fix .search-form .textsearch {
                width: 100%;
                font-size: 16px;
            }
        .header-top .box-menu-fix ul li {
            padding: 0 12px;
        }

    .header-logo .logo_menu .header_title h1 {
        font-size:20px;
    }
    .header-logo .logo_menu{
        gap:20px;
    }
    .sub-header.header-pages {
        min-height: 170px;
        padding: 30px 12px;
    }

        .sub-header.header-pages .slide-title {
            font-size: 22px;
            margin-bottom: 9px;
        }

        .sub-header.header-pages .bread_crumb .breadcrumb-item {
            font-size: 11px;
        }

            .sub-header.header-pages
            .bread_crumb
            .breadcrumb-item + .breadcrumb-item::before {
                margin: 0 5px;
                font-size: 11px;
            }
    .site-btn {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 414px) {
    .header-logo .logo_menu .header_title h2 {
        font-size: 20px;
    }
    .event-program .box_program .card-body ul > li {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .box-team .item_team .thumb_img img{
        max-width:inherit;
    }
    .title_name {
        font-size: 20px;
    }
}
@media only screen and (max-width: 320px) {
    .event-program .box_program .btn-link{
        font-size:15px;
    }
    .footer .footer_box .col-sm-5 {
        ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .footer .footer_box .col-sm-7 {
        ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 280px) {
    .header-top .box-menu-fix ul li {
        padding: 3px 3px;
    }
}