/* ==========================================================================
   MỤC LỤC CSS TUYENSINHSO:
   1. GLOBAL & RESET (Cài đặt chung, font, class bổ trợ)
   2. HEADER, FOOTER & MENU (Bố cục chính)
   3. HOME & SEARCH (Khối tìm kiếm, Banner trượt)
   4. CATEGORY & SIDEBAR (Danh sách bài viết, Nhóm ngành, Thanh bên)
   5. SINGLE POST (Chi tiết bài viết, Bảng điểm chuẩn)
   6. RESPONSIVE / MOBILE (Giao diện điện thoại)
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL & RESET
   ========================================================================== */
@font-face {
    font-family: UTMAVO;
    src: url(../fonts/UTMAvo.ttf);
}
@font-face {
    font-family: UTMAVOBOL;
    src: url(../fonts/UTMAvoBold.ttf);
}
* {
    margin: 0;
    padding: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.clearfix:after, .clearfix:before { content: " "; display: table; }
.clearfix:after { clear: both; }
ul { list-style: none; }
a { text-decoration: none; font-weight: bold; }
body {
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 13px;
    line-height: 1.8em;
    background: #fff;
    font-style: normal;
    width: 100%;
    overflow-x: hidden;
}
.align-center { text-align: center; }
.hide { display: none; }
.mobile { display: none; }

/* Các Class bổ trợ (Helpers) */
.mgt10 { margin-top: 10px; }
.mgt20 { margin-top: 20px; }
.mgt30 { margin-top: 30px; }
.mgb10 { margin-bottom: 10px; }
.mgb30 { margin-bottom: 30px; }
.pdt0  { padding-top: 0px !important; }
.pdb10 { padding-bottom: 10px; }
.pdb20 { padding-bottom: 20px; }
.pdb30 { padding-bottom: 3px; }
.text-center, .right_box_qc { text-align: center; }
.no-border { border: none !important; }
.wl100 { width: 100%; float: left; }
.text-up { text-transform: uppercase; }
.background-none { background: none; }
.border-top1 { border-top: 1px solid #cdcdcd; }
.border-bottom1 { border-bottom: 1px solid #cdcdcd; }
.bor-right-none { border-right: none; }
.bg-white { background: #fff; }
.w100 { width: 100%; }


/* ==========================================================================
   2. HEADER, FOOTER & MENU
   ========================================================================== */
.container { margin: 0px auto; width: 100%; float: left; }
.container-header { float: left; width: 100%; }
.header {
    float: left;
    position: relative;
    z-index: 1000;
    width: 1024px;
    padding: 10px calc((100% - 1024px)/2);
    background-image: url(../images/bg_header.png);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #fff;
}
.header>a { width: 250px; float: left; }
.header a>img { width: 100%; }
.logo-pc { display: block; }
.logo-m { display: none; }

/* Hotline */
.hotline { width: 550px; top: 0; right: 0; height: 100%; position: absolute; }
.hotline_info { float: right; height: 67px; margin-top: 20px; color: #fff; }
.hotline_info>b {
    float: left;
    font-family: 'Roboto Condensed';
    text-transform: uppercase;
    color: #1B387C;
    line-height: 32px;
    font-size: 24px;
    text-align: center;
    padding-left: 20px;
}

/* Menu Chính */
.menu {
    float: right;
    width: 1024px;
    padding: 0 calc((100% - 1024px)/2) 10px;
    position: relative;
    z-index: 1000;
    background: #1B387C;
}
.button_menu { display: none; }
.list_menu { float: left; width: 100%; margin-top: 10px; }
.list_menu>li { float: left; list-style-type: none; margin: 0; padding: 0; position: relative; }
.list_menu>li a { float: left; padding: 5px 20px; font-size: 15px; color: #fff; border-bottom: 1px solid transparent; }
.list_menu>li.hot a { padding-right: 25px; background: url(../images/hot.gif) no-repeat top right; }
.list_menu>li:first-child a { padding-left: 0; }
.list_menu>li>a>i { color: #fff; }
.list_menu>li a:hover, .list_menu>li a.active, .list_menu>li a:hover i, .list_menu>li a.active i { color: #F37412; }

/* Menu Con */
.child_menu {
    position: absolute; float: left; width: 250px; clear: both;
    padding-top: 14px; top: 25px; left: 10px; display: none;
}
.child_menu:hover, .sub_menu:hover .child_menu { display: block; color: #fff; }
.child_menu>li a {
    float: left; padding: 5px 10px; font-size: 14px; background: #1B387C;
    font-weight: normal; color: #fff; border-bottom: 1px solid #cdcdcd; width: 230px;
}
.child_menu>li>a>.fas { font-size: 5px; vertical-align: middle; }
.child_menu>li a:hover { color: #F37412; }

/* Footer */
.contact { width: 1024px; float: left; padding: 20px calc((100% - 1024px)/2); position: relative; background: #dddddd; }
.line-footer { width: 100%; float: left; border-bottom: 1px solid #282828; margin: 10px 0; }
.line-footer>div { border-top: 1px solid #282828; width: 80%; float: left; margin-bottom: 5px; }
.contact_text, .contact_social { float: left; width: 35%; font-size: 13px; color: #282828; }
.contact_text>p { clear: both; }
.contact_social { width: 24%; padding: 0 1% 0 5%; }
.contact_social .title_social { text-transform: uppercase; font-size: 16px; font-weight: bolder; padding-bottom: 5px; margin-top: 41px; border-bottom: 1px solid #282828; margin-bottom: 10px; }
.contact_social>ul>li { font-size: 16px; }
.contact_social>ul>li>.fas, .contact_social>ul>li>.far { font-size: 18px; width: 20px; }
.contact_social>ul>li>a { font-weight: normal; color: #282828; }
.contact_social>ul>li>a:hover { color: #F37412; }
.end-page-info { width: 1024px; float: left; padding: 10px calc((100% - 1024px)/2); position: relative; background: #222222; color: #979696; }
.end-page-info>a { color: #979696; padding: 0 5px; font-weight: normal; }
.end-page-info>a:hover { color: #fff; text-decoration: underline; }


/* ==========================================================================
   3. HOME, SEARCH BOX & BANNERS
   ========================================================================== */
.box_slide { width: 1024px; padding: 0 calc((100% - 1024px)/2); float: left; position: relative; }
.box_search { background: url(../images/banner.jpg) no-repeat center; min-height: 350px; background-size: cover; }
.box_search>* { width: 800px; float: left; margin: 20px calc((100% - 800px)/2); position: relative; }
.box_search>h2 {
    color: #fff; font-size: 32px; text-align: center; text-transform: uppercase;
    margin-top: 50px; margin-bottom: 30px; text-shadow: 1px 1px 1px #333;
}
.box_search>form>input, .box_search>form>button {
    float: left; width: 650px; padding: 10px 140px 10px 10px; border: 1px solid #333;
    background: #fff; color: gray; font-family: UTMAVO; font-size: 16px;
}
.box_search>form>button {
    position: absolute; top: 1px; right: -1px; background: #F37412; width: 140px;
    text-align: center; border: none; color: #fff; cursor: pointer; padding: 10px 0;
}
.box_search>form>button:hover { border-radius: 50%; color: #000; }

/* Box Live Search */
.search-suggest-box {
    position: absolute; top: 50px; left: 0; width: 650px; background: #fff;
    border: 1px solid #ccc; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 99999;
    display: none; max-height: 350px; overflow-y: auto; text-align: left; border-radius: 0 0 5px 5px;
}
.search-suggest-box ul { margin: 0; padding: 0; list-style: none; }
.search-suggest-box li { border-bottom: 1px solid #eee; }
.search-suggest-box li a { display: block; padding: 10px 15px; color: #333; font-size: 14px; font-weight: normal; }
.search-suggest-box li a:hover { background: #f4f4f4; color: #F37412; }
.search-suggest-box li a i { margin-right: 8px; color: #ccc; }

/* Banner Fixed Trượt 2 bên */
.container-content { float: left; width: 1024px; padding: 10px calc((100% - 1024px)/2); position: relative; }
.banner_fix { position: absolute; top: 0; bottom: 0; width: 160px; z-index: 99; pointer-events: none; }
.banner_fix a { position: -webkit-sticky; position: sticky; top: 115px; display: block; pointer-events: auto; }
.banner_fix a img { width: 100%; height: auto; }
.banner_fix_left { left: calc(((100% - 1024px) / 2) - 165px) !important; right: auto !important; }
.banner_fix_right { right: calc(((100% - 1024px) / 2) - 165px) !important; left: auto !important; }



@media (max-width: 1380px) { .banner_fix { display: none !important; } }

.menu-nganh, .menu-nganh-child {
    float: left;
    width: 100%;
    margin-top: 10px;
}
.menu-nganh>li
{
    display: inline-block;
    padding:5px 10px;
    margin-right: 10px;
    float: left;
    background: #cdcdcd;
    border-radius: 10px;
    color: #1B387C;;

}
.menu-nganh-style-link>li
{
    color: gray;
    background: none;
    border-radius:0;
    margin-right: 0;
}
.menu-nganh-style-link>li>a
{
    padding-right: 10px;
    border-right: 1px solid #cdcdcd;
}
.menu-nganh-style-link>li:last-child>a
{
    border-right: 0;
}

.menu-nganh>li.active,.menu-nganh>li:hover
{
    background: #F7941D;
}

.menu-nganh-style-link>li.active,.menu-nganh-style-link>li:hover
{
    background: none;
}

.menu-nganh>li>a
{
    color: #333;
    font-size: 14px;
}
.menu-nganh>li.active>a,.menu-nganh>li>a:hover
{
    color: #1B387C;
}
.menu-nganh-style-link>li.active>h3>a,.menu-nganh-style-link>li>h3>a:hover
{
    color: #F7941D;
}

/* ==========================================================================
   4. CATEGORY & SIDEBAR
   ========================================================================== */
.detail-left { width: 720px; border-radius: 5px; float: left; background: #fff; }
.detail-right { float: right; width: 290px; }
.left_box, .right_box { width: 100%; float: left; background: #fff; margin-bottom: 20px; }
.left_box img, .right_box img { max-width: 100%; }

/* Tiêu đề Box */
.left_box_title { color: #1B387C; text-transform: uppercase; font-weight: bolder; font-size: 18px; float: left; position: relative; margin: 10px 0; border-bottom: 1px solid gray; width: 100%; padding-bottom: 5px; }
.left_box_title h2 { font-size: 18px; margin: 0; padding: 0; font-weight: bold; display: inline-block; text-transform: uppercase; color: #1B387C; line-height: 1.2; }
.left_box_title i { font-size: 18px; margin-right: 8px; float: left; }
.left_box_title_1 { text-align: center; text-transform: unset; padding-bottom: 0; }
.left_box_title_1>span, .left_box_title_1 a { padding: 5px 10px; border-radius: 5px 5px 0 0; color: #fff; background: #1B387C; margin-bottom: 0px; display: inline-block; text-decoration: none; }
.left_box_title a
{
    color: #1B387C;
    text-transform: uppercase;
    font-size: 18px;
    margin-left: 5px;
}

/* Menu sidebar phải (Tin HOT, Điểm chuẩn) */
.right_list_1 { list-style: none; padding: 0; margin: 0; float: left; width: 100%; }
.right_list_1 li { padding: 0; margin: 0; border-bottom: 1px solid #eee; }
.right_list_1 li a {
    display: block; padding: 10px 10px; background: #2b3d7d; color: #fff !important;
    text-decoration: none; font-size: 13px; line-height: 1.5; margin-bottom: 5px;
    border-radius: 4px; transition: 0.3s; width: calc(100% - 20px); text-align: center;
}
.right_list_1 li a:hover { background: #1e2b5a; padding-left: 20px; }
.right_list_1 li a img { vertical-align: middle; margin-left: 5px; }

/* Danh sách Bài viết (Category) */
.list-news { float: left; width: 100%; margin: 10px 0; }
.list-news>a { width: 100%; float: left; font-size: 12px; overflow: hidden; margin-bottom: 15px; }
.list-news>a:hover { background: #f4f4f4; }
.list-news>a:hover b { color: #F37412; }
.list-news>a>img { width: 150px; float: left; }
.list-news>a>b { font-weight: bold; color: #1B387C; width: calc(100% - 170px); float: right; font-size: 18px; }
.list-news>a>span { font-size: 12px; line-height: 15px; width: calc(100% - 170px); float: right; color: gray; margin-top: 5px; font-weight: normal; }

.list-news>a.link-file
{
    width: calc(30% - 10px);
    margin-right: 5%;
    background: #cdcdcd;
    margin-bottom: 20px;
    color: #1B387C;
    padding: 5px;
}
.list-news>a.link-file:nth-child(3n)
{
    margin-right: 0;
}
.list-news>a.link-file>.fas
{
    width: 20px;
    float: left;
    font-size: 18px;
    line-height: 20px;
    border-right: 1px solid gray;
}
.list-news>a.link-file>span
{
    width: calc(100% - 25px);
    font-size: 13px;
    font-weight: bold;
    color: #1B387C;
    vertical-align: middle;
    /*margin-top: 0;*/
}
.list-news>a.link-file:hover
{
    background: #1B387C;
}
.list-news>a.link-file:hover>*
{
    color: #fff;
}


/* Giao diện Section (Cây thư mục ngành nghề) */
.list-group { display: block !important; width: 100% !important; float: left !important; background: #fff; border: 1px solid #eee; margin-top: 10px; margin-bottom: 30px; clear: both; }
.item-nganh {
    display: block !important; width: 100% !important; float: none !important;
    padding: 10px 20px !important; border-bottom: 1px solid #f0f0f0; text-align: left !important;
    color: #333 !important; font-size: 14px; font-weight: normal !important; text-decoration: none;
    box-sizing: border-box; clear: both;
}
.item-nganh:hover { background: #f9f9f9; color: #1B387C !important; padding-left: 25px !important; }
.item-nganh:last-child { border-bottom: none; }
.list-group span { display: none !important; }

/* Phân trang */
.pagination-page { width: 100%; float: left; text-align: center; margin: 20px 0 30px; }
.pagination-page ul.pagination { display: inline-block; padding: 0; margin: 0; border-radius: 4px; }
.pagination-page ul.pagination li { display: inline; margin: 0; padding: 0; border: none; }
.pagination-page ul.pagination li a, .pagination-page ul.pagination li span {
    position: relative; float: left; padding: 8px 14px; margin-left: -1px; line-height: 1.4;
    color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; font-weight: bold; font-size: 14px;
}
.pagination-page ul.pagination li a:hover { color: #23527c; background-color: #eee; border-color: #ddd; }
.pagination-page ul.pagination li.active span.current, .pagination-page ul.pagination li span.current {
    z-index: 3; color: #fff !important; cursor: default; background-color: #337ab7 !important; border-color: #337ab7 !important;
}


/* ==========================================================================
   5. SINGLE POST (CHI TIẾT BÀI VIẾT)
   ========================================================================== */
.breadcrumbs-detail { width: 100%; float: left; margin-bottom: 10px;}
.breadcrumbs-detail>li { list-style-type: none; float: left; margin: 0 2px; }
.breadcrumbs-detail>li>a, .breadcrumbs-detail>li>i { color: gray; font-weight: normal; }
.breadcrumbs-detail>li.current>a { color: #1B387C; font-weight: bold;}

.detail_title { color: #1B387C; font-size: 25px; text-align: justify; line-height: 32px; width: 100%; float: left; margin-top: 10px; }
.timer { margin-right: 10px; margin-top: 4px; float: left; color: gray; font-size: 12px; }
.detail-desc { color: #10605b; font-size: 14px; font-style: italic; margin-bottom: 20px; }
.detail-content { width: 100%; float: left; padding: 10px 0; color: #333; border-top: 1px solid gray; border-bottom: 1px solid gray; }
.detail-content, .detail-content p { line-height: 22px; margin: 5px 0; }
.detail-content img { border: none; max-width: 100%; height: auto; }
.detail-content a { color: #003B73 !important; font-weight: 700; text-decoration: none; }
.detail-content a:hover { text-decoration: underline; }

/* Các thẻ Heading trong bài viết */
.detail-content h2, .detail-content h2 * { color: #fff; padding: 5px; font-weight: 700; margin: 15px 0; background: #6c3; }
.detail-content h3 { color: #000; margin-bottom: 10px; font-size: 17px; }
.detail-content h3:before {
    display: inline-block; font: normal normal normal 14px/1 FontAwesome;
    content: "\f046"; color: #03639C; font-weight: 700; margin-right: 6px;
}
.detail-content h4 strong { font-size: 14px !important; padding-left: 15px; }

/* Danh sách ul/li trong bài viết */
.detail-content ul { margin: 5px 0 10px 20px; list-style: none; }
.detail-content li { padding: 5px; }
.detail-content li:before { content: '✓  '; color: #FF1A1A; font-weight: 700; }
.detail-content ul li ul { list-style: disc !important; padding-left: 50px; }
.detail-content ul li ul li:before { content: '' !important; }
.detail-content ul li ul li { padding-left: 0px; }

/* Bảng biểu chung trong bài viết */
.detail-content table { width: 100% !important; border-collapse: collapse; margin: 20px 0; position: relative; z-index: 2; }
.detail-content table, .detail-content table th, .detail-content table td { border: 1px solid #454545; }
.detail-content table th, .detail-content table td { padding: 5px; }
.detail-content table td, .detail-content table tr { height: unset !important; }

/* Bảng TableData (Điểm chuẩn) */
.tabledata { margin: 0 !important; width: 100% !important; }
.detail-content table.tabledata { border: 1px solid #ddd; }
.detail-content table.tabledata thead { background: #f1f1f1; }
.detail-content table.tabledata td, .detail-content table.tabledata th { padding: 8px 5px; text-align: left; border: 1px solid #ddd; }
.detail-content table.tabledata td:nth-child(1), .detail-content table.tabledata th:nth-child(1) { text-align: center; }

/* Tin tức liên quan (Cuối bài) */
.detail-news-relative { width: 100%; float: left; margin-top: 20px; }
.detail-news-relative>.detail_title { font-family: UTMAVO; font-size: 20px; margin-bottom: 10px; padding-right: 50px; border-bottom: 1px solid #333; width: auto; }
.detail-news-relative ul { padding-left: 0; }
.detail-news-relative li { list-style: none; border-bottom: 1px dashed #ccc; padding: 10px 0;}
.detail-news-relative li:before { display: none;}


/* Banner Ads*/
.position-fixed {
    position: fixed!important;
}
.adsballon {
    bottom: -6px;
    z-index: 99999;
    left: 0;
    width: 100%;
    max-height: 240px;
}
.close-ads {
    position: absolute;
    right: -8px;
    background: #efefef;
    width: 28px;
    height: 28px;
    text-align: center;
    top: -11px;
    font-size: 17px;
    color: red;
    cursor: pointer;
}
.adsballon .close-ads {
    display: block;
    top: -30%;
    width: 40px;
    height: 24px;
    line-height: 1.1;
    background: #efefef;
    color: red;
    font-weight: 600;
    right: 0;
}
.banner_details
{
    float: left;
    width: 100%;
    margin-top: 5px;
}
/* ==========================================================================
   6. RESPONSIVE / MOBILE (Chỉ dành cho màn hình < 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Ẩn hiện các khối nền tảng */
    .logo-pc { display: none; }
    .logo-m { display: block; }
    .banner_fix { display: none !important; }
    .menu_home, .slider-header>img, .hotline_info { display: none; }


    /* Cấu trúc Container */
    .container, .detail-right, .detail-left, .contact_text, .contact_social, .box_list1_left, .box_list1_right, .contact-menu, .contact-text-content, .about-text, .about-list {
        width: 100% !important;
        float: left !important;
        height: auto !important;
        box-sizing: border-box;
        padding: 0 !important;
    }

    .container>div {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    .container-content
    {
        width: 96%;
        padding: 0 2%;
    }
    .contact
    {
        width: calc(100% - 20px);
        padding: 10px;
    }

    /* Header Mobile */
    .container-header { position: relative; background: #1B387C; width: 100%; }
    .header { width: 250px; position: absolute; bottom: 10px; right: 0px; background: unset; padding: 0; }
    .header>a { width: 100%; float: right; position: relative; top: 0px; left: 70px; }
    .header a>img { width: 160px; }

    /* Menu Mobile Toggle */
    .menu { float: left; max-width: 100px; width: 15%; position: relative; z-index: 100000000; margin: 10px; padding-bottom: 0; }
    .button_menu, .button_menu>div { float: left; display: block; width: 100%; cursor: pointer; }
    .button_menu>div { height: 10px; border-radius: 5px; background: #fff; margin-bottom: 5px; }
    #menu3 { margin-bottom: 0; }

    .list_menu { float: left; width: 250px; background: #1B387C; margin-top: 10px; display: none; position: absolute; top: 45px; left: -10px;  padding-left: 10px;}
    .list_menu>li a { width: 230px; padding: 10px 10px; font-family: UTMAVO; color: #fff; border-bottom: 1px solid #fff; }
    .child_menu { display: block; position: relative; top: 0; padding-top: 0; padding-left: 15px;}

    /* Box Tìm kiếm Mobile */
    .container>.box_slide { padding: 0 !important; }
    .box_search { min-height: 150px; width:100%;padding: 20px 0;}
    .box_search>* { width: 96% !important; margin: 10px 2% !important; }
    .box_search>h2 { font-size: 17px; margin-top: 10px; margin-bottom: 10px;}
    .box_search>form>input { width: calc(100% - 80px); font-size: 13px; padding: 10px; }
    .box_search>form>button { width: 80px; padding: 8px 0; }
    .search-suggest-box { width: calc(100% - 80px); }

    /* DANH SÁCH TIN TỨC TRÊN MOBILE (Đã Fix Lỗi Nhảy Dòng) */
    .list-news { margin: 10px 0; width: 100%; float: left; }
    .list-news>a {
        width: 100% ;
        padding: 10px 0 ;
        margin-right: 0 ;
        float: left;
        box-sizing: border-box;
        align-items: flex-start;
    }
    .list-news>a.link-file
    {
        width: 100%;
    }

    .list-news>a>img {
        width: 130px ; /* Tăng size ảnh */
        min-width: 130px; /* Khóa cứng chiều rộng ảnh */
        height: auto;
        float: left;
        margin-right: 15px;
    }

    .list-news>a>b {
        width: calc(100% - 145px) ; /* Để Flexbox tự tính khoảng trống còn lại */
        font-size: 15px !important; /* Tăng size chữ dễ đọc */
        line-height: 1.4;
        float: left;
    }

    .list-news>a>span {
        width: calc(100% - 145px) ;
        float: left;
        margin-top: 5px;
    }

    /* Chi tiết bài viết Mobile */
    .detail-content { width: 100% !important; padding: 0 !important; overflow: hidden; }

    /* BẢNG BIỂU (TABLE) TRONG BÀI VIẾT TRÊN MOBILE */
    .detail-content table {
        width: 100% !important;
        display: block;
        overflow-x: auto; /* Cho phép cuộn ngang nếu bảng quá dài */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Tạm thời cấm rớt dòng để giữ form bảng */
        font-size: 13px !important;
    }
    .detail-content table th, .detail-content table td {
        padding: 8px !important;
        font-size: 13px !important;
        white-space: normal; /* Ép nội dung trong ô được phép rớt dòng */
        min-width: 100px; /* Giữ độ rộng tối thiểu cho các cột */
    }

    /* Các thành phần phụ Mobile */
    .right_list_1 { border: none;  }
    .box_list1_right { margin-top: 10px; }
    .mail-subscribe { width: 100%; padding: 10px; margin: 0 0 20px 0; box-sizing: border-box;}
    .contact_text, .contact_social { padding: 10px 10px; }
    .container>div.end-page-info { padding: 10px !important; }
    .no-display-mobile { display: none !important; }
    .mobile { display: block; }
}