/* ============================================================
   Nền (base) gộp từ style.css cũ — GIỮ để không vỡ layout.
   Lớp phủ brand (theme) nằm ở NỬA DƯỚI file này (đè lên base).
   Web-font cũ TinTuc/BaiSau ĐÃ GỠ: chuyển sang system font (mockup),
   không còn selector CSS nào dùng (captcha dùng file font server-side, độc lập).
   ============================================================ */
body {
    color: #333333;
    font-family: tahoma,Helvetica,sans-serif;
    font-size: 15px;
}

a, a:active {
    color: #794a02;
    text-decoration: none;
}
a:hover {
    color: #e29218;
    text-decoration: none;
}
.notice {
    background-color: #ffffff;
    background-position: 5px;
    background-repeat: no-repeat;
    border: 1px solid #f16048;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: none;
    margin-bottom: 10px;
    min-height: 24px;
    min-width: 165px;
    padding: 8px 8px 13px 47px !important;
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 102;
}
.notice.error {
    background-color: #fbb4b4;
    background-image: url("../../admin/img/error.png");
    border-color: #c21c1c;
    color: #df280a;
}
.notice.success {
    background-color: #e9fbb4;
    background-image: url("../../admin/img/success.png");
    border-color: #8c8919;
    box-shadow: 0 0 3px 3px #eeeeee inset;
    color: #3d6611;
}
.notice.warning {
    background-color: #f2edb7;
    background-image: url("../../admin/img/warning.png");
    border-color: #d9d9d9;
    bottom: -10px;
    box-shadow: 0 0 3px 3px #eeeeee inset;
    color: #656310;
    top: auto;
}
.notice.loading {
    background-color: #f2edb7;
    background-image: url("../../admin/img/loadding.gif");
    border-color: #d9d9d9;
    box-shadow: 0 0 3px 3px #eeeeee inset;
    color: #656310;
}
.hoverBorder {
    display: block;
    position: relative;
}
.hoverimg_block {
    background-color: #fff;
    display: block;
    width: 100%;
}
.hoverimg_block img{
    width: 100%;
}
.hoverBorderWrapper {
    display: block;
    position: relative;
}
.theHoverBorder {position:absolute; left:0; top:0; bottom:0; right:0; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;
    -webkit-box-shadow:0 0 0 3px rgba(255,255,255,0.15) inset; -moz-box-shadow:0 0 0 3px rgba(255,255,255,0.15) inset; box-shadow:0 0 0 3px rgba(255,255,255,0.15) inset; }
.theHoverBorder:hover {-webkit-box-shadow:0 0 0 5px #e29218 inset; -moz-box-shadow:0 0 0 5px #e29218 inset; box-shadow:0 0 0 5px #e29218 inset;}
.hoverBorder:hover img,
.theHoverBorder{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.securityimg {
    margin-right: 30px;
    width: 249px;
}
.securityimg .input-group-addon {
    padding: 0;
}
.securityimg .form-control {
    width: 130px;
}
.reloadcaptcha{
    cursor: pointer;
}
.tagboxnews {
    margin-top: 15px;
}
.keytag {
    background-color: #eee;
    padding: 3px 5px;
    display: inline-block;
}
.keytag:hover {
    background-color: #e29218;
    color: #fff;
}
.banner {
    background-color: #b36d10;
    background-image: -webkit-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -moz-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -ms-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -o-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: linear-gradient(to right, #824705, #e49318, #824705);
    border: 0 none;
    border-radius: 0;
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 0;
    box-shadow: 0 3px 1px 0 rgba(0,0,0,0.19);
}
.navbar-brand {
    display: block;
    height: 65px;
    padding: 5px;
}
.navbar-brand > img {
    max-height: 100%;
    max-width: 100%;
}
#logotop img {
    padding: 0;
}
#logotop:hover,
#logotop:focus{
    background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar{
    background-color: #fff;
}
.navbar-default .navbar-toggle{
    border-color: #fff;
}

#menu > ul > li > a {
    color: #fff;
    font-weight: bold;
    padding: 21px 20px;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
}

#menu > ul > li.active > a, #menu > ul > li > a:hover
{
    border-bottom-color: #fff;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#menu .menucategory > ul{
    position: absolute;
    width: 220px;
    z-index: 100;
    /*-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;*/
    background-color: #fff;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.11);
    -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.11);
    -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.11);
    list-style: none;
    padding: 0;
}
.menucategory > ul a {
    border-bottom: 1px solid #ddd;
    color: #111;
    display: block;
    padding: 8px 10px;
    text-transform: capitalize;
}
.menucategory > ul li:last-child a{
    border: none;
}
.menucategory > ul li a:hover{
    color: #e29218;
}
#menu .menucategory{
    display: none;
}
#menu li:hover > .menucategory{
    display: block;
}
#menu .menucategory .menucategory > ul {
    left: 172px;
    top: 0;
}
/* Cảm ứng / iPad: menu thu gọn (≤991) mở submenu bằng CHẠM, không dựa vào hover
   (hover trên cảm ứng chạm ra là mất). JS gắn .has-sub cho li có submenu và bật .mopen khi chạm. */
@media (max-width:991px){
    #menu > ul > li:hover > .menucategory{ display:none; }   /* tắt hover trên mobile */
    #menu > ul > li.mopen > .menucategory{ display:block; }   /* mở khi đã chạm */
    #menu > ul > li.has-sub > a{ position:relative; padding-right:34px !important; }
    #menu > ul > li.has-sub > a::after{
        content:"\f107"; font-family:"Font Awesome 5 Free","FontAwesome"; font-weight:900;
        position:absolute; right:12px; top:50%; transform:translateY(-50%);
        transition:transform .2s; color:#e7d6ba; font-size:14px;
    }
    #menu > ul > li.has-sub.mopen > a::after{ transform:translateY(-50%) rotate(180deg); }
}
.btn-flag {
    padding: 0 5px;
}
.translation_buttons{
    margin-top: 19px;
}
#maincontent{
    margin-top: 65px;
}


#howto{
    background-color: #d28515; /* Dành cho các trình duyệt không hỗ trợ gradient*/
    background-image: -webkit-linear-gradient(to right, #905108, #e49319, #905108);
    background-image: -moz-linear-gradient(to right, #905108, #e49319, #905108);
    background-image: -ms-linear-gradient(to right, #905108, #e49319, #905108);
    background-image: -o-linear-gradient(to right, #905108, #e49319, #905108);
    background-image: linear-gradient(to right, #905108, #e49319, #905108);
    padding: 30px 10px 0 10px;
}
/* [dọn] block Lộ trình cũ (backgroud*/howtocontainer/howtocontent + icon bước) đã bỏ:
   howto.php đã viết lại thành route-steps, style ở theme.css */

.newseven_home {
    padding: 50px 0;
    background: url("../img/newshome.png") no-repeat center bottom;
}
.newseven_home h4.title{
    font-size: 25px;
    text-align: center;
}




.homeschool {
    padding: 30px 0;
    background: url("../img/homeschool.png") no-repeat center top transparent;
    margin: 10px 0;
}
.homeschool container{
    position: relative;
}
.homeschool .newsitem,
.newseven_home .newsitem{
    -webkit-box-shadow:0px 5px 5px 4px rgba(143, 138, 140, 0.2);
    -moz-box-shadow:0px 5px 5px 4px rgba(143, 138, 140, 0.2);
    box-shadow: 0px 5px 5px 4px rgba(143, 138, 140, 0.2);
    margin: 0 10px;
    background-color: #fff;
}
.title{
    background: none;
    font-size: 23px;
    color: #e29218;
    text-transform: capitalize;
    font-weight: bold;
}
.homeschool h4.title {
    font-size: 30px;
    text-align: center;
}
.summarynews {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0 15px
}
/* .summarynews::before "DuHocToanQuoc.Com" (brand LEGACY, dùng font BaiSau) ĐÃ GỠ */
a.fancybox {
    cursor: url("../img/zoom_cursor.png"), auto;
    display: inline-block;
    position: relative
}
span.zoom_icon_img {
    background: rgba(0, 0, 0, 0) url("../img/icon_zoom.png") no-repeat scroll 0 0;
    display: block;
    height: 28px;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px
}
.newssources, .tagboxnews {
    margin-top: 15px
}
.newssources .form-control {
    padding: 2px 12px;
    height: auto;
    margin-bottom: 0
}
.prevnews {
    margin-right: 10px
}
.nextnews a, .prevnews a {
    color: #444
}
.nextnews i, .prevnews i {
    color: #777
}
.nextnews, .prevnews {
    background-color: #f5f5f5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2px 6px
}
.nextnews a:hover, .prevnews a:hover, .nextnews a:hover i, .prevnews a:hover i {
    color: #e29218
}
.listitem a {
    background: transparent url("../img/licon.png") no-repeat scroll left 9px;
    display: block;
    padding: 3px 0 4px 14px;
}
.relativenews a {
    font-size: 15px;
}
.relativenews h4 {
    margin: 0
}
.viewtopbtn {
    text-align: right
}
#content * {
    max-width: 100% !important
}
#content {
    text-align: justify;
    overflow: hidden
}

#carousel{
    margin-bottom: 20px;
}
.btn-facebook {
    color: #ffffff;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    color: #ffffff;
    background-color: #30487b;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    background-image: none;
}
.btn-facebook.disabled,
.btn-facebook[disabled],
fieldset[disabled] .btn-facebook,
.btn-facebook.disabled:hover,
.btn-facebook[disabled]:hover,
fieldset[disabled] .btn-facebook:hover,
.btn-facebook.disabled:focus,
.btn-facebook[disabled]:focus,
fieldset[disabled] .btn-facebook:focus,
.btn-facebook.disabled:active,
.btn-facebook[disabled]:active,
fieldset[disabled] .btn-facebook:active,
.btn-facebook.disabled.active,
.btn-facebook[disabled].active,
fieldset[disabled] .btn-facebook.active {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook .badge {
    color: #3b5998;
    background-color: #ffffff;
}
.btn-google-plus {
    color: #ffffff;
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-google-plus:hover,
.btn-google-plus:focus,
.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus {
    color: #ffffff;
    background-color: #ca3523;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus {
    background-image: none;
}
.btn-google-plus.disabled,
.btn-google-plus[disabled],
fieldset[disabled] .btn-google-plus,
.btn-google-plus.disabled:hover,
.btn-google-plus[disabled]:hover,
fieldset[disabled] .btn-google-plus:hover,
.btn-google-plus.disabled:focus,
.btn-google-plus[disabled]:focus,
fieldset[disabled] .btn-google-plus:focus,
.btn-google-plus.disabled:active,
.btn-google-plus[disabled]:active,
fieldset[disabled] .btn-google-plus:active,
.btn-google-plus.disabled.active,
.btn-google-plus[disabled].active,
fieldset[disabled] .btn-google-plus.active {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-google-plus .badge {
    color: #dd4b39;
    background-color: #ffffff;
}
.btn-social.btn-lg i {
    left: 2px;
    top: 5px;
}
.btn-share, .btn-share:focus, .btn-share:active {
    background-color: transparent;
    border: medium none;
    border-radius: 0;
    font-size: 30px;
    line-height: initial;
    padding: 0;
}
.btn-share.btn-share-face {
    color: #3b5998;
}
.btn-share.btn-share-google {
    color: #dc4e41;
}
.btn-share.btn-share-twi {
    color: #1da1f2;
}
.btn-share.btn-share-pin {
    color: #0077b5;
}
.btn-share.btn-share-link {
    color: #ff6550;
}

.datetime {
    color: #555;
    font-size: 15px;
}




.titlecat {
    color: #e29218;
    display: inline-block;
    font-size: 34px;
    margin-bottom: 5px;
    margin-right: 20px;
    margin-top: 0;
    text-transform: uppercase;
    background: none;
}
.subtitle {
    display: inline-block;
    margin-top: 0;
}
.subtitle a {
    border-right: 1px solid #ddd;
    display: block;
    font-size: 19px;
    padding: 0 10px;
    text-transform: capitalize;
}
.subtitle.last a {
    border-right: medium none;
}
.titlecat, .subtitle a {
    font-weight: bold; /* font-family:TinTuc đã gỡ — dùng system font (block Typography đè) */
}
#news_top1 {
    margin-left: -0.5px;
    margin-right: -0.5px;
}
#news_top1 > div {
    padding-left: 0.5px;
    padding-right: 0.5px;
    overflow: hidden;
    margin-bottom: 1px;
}
#news_top1 .news_top1_box{
    position: relative;
}
.newsitem .hoverimg_block {
    margin-right: 15px;
    width: 250px;
}
.featured-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
}

#news_top1 .top1_content{
    color: #fff;
    position: absolute;
    width: 100%;
    bottom: -80px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    line-height: 20px;
    padding: 20px 20px 5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#news_top1 .img-responsive {
    height: 250px;
    width: 100%;
}
#news_top1 .top1_content h2 {
    line-height: 24px;
    margin: 0 ;
    color: #fff;
    font-size: 20px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#news_top1 .top1_content .summary {
    font-size: 13px;
    height: 53px;
    line-height: 17px;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    color: #f1f1f1;
}
#news_top1 .top1_mask {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.newsitem h3 {
    line-height: 17px;
    margin: 0;
}
.newsitem h3 a {
    font-size: 18px;
    font-weight: bold;
    color: #e29218;
    display: block;
    text-align: center;
    padding: 10px 0;
    line-height: 23px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.homeschool .owl-item {
    margin-bottom: 10px;
}
.newsitem p {
    padding: 0 7px;
    text-align: justify;
    margin: 0;
    line-height: 20px;
}
.newsitem .datetime {
    color: #888;
    font-size: 12px;
    margin-bottom: 5px;
}
.newsitem {
    border-bottom: 1px solid #ddd;
    margin-bottom: 13px;
    padding-bottom: 13px;
    position: relative;
}
.newsitem:last-child{
    border: none;
}
.newsitem .img-responsive {
    width: 100%;
}
.newsitem .topschool{
    position: absolute;
    top:0;
    background-color: #ddd;
    font-weight: bold;
    padding: 2px 5px;
    opacity: 0.6;
    z-index: 1;
}
.newsitem:hover .topschool{
    opacity: 1;
}
.newsitem .topschool1{
    color: #ff0000;
}
.newsitem .topschool2{
    color: #0070c0;
}
.videohome .owl-controls,
.homeschool .owl-controls,
.hocbong .owl-controls{
    position: unset;
}
.videohome .owl-carousel .owl-controls .owl-nav > div,
.homeschool .owl-carousel .owl-controls .owl-nav > div,
.hocbong .owl-carousel .owl-controls .owl-nav > div
{
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 74px;
    height: 74px;
    background: transparent url("../img/shoolboton.png") left center;
    border: none;
    opacity: 0.5;
}
.videohome .owl-carousel .owl-controls .owl-nav > div,
.hocbong .owl-carousel .owl-controls .owl-nav > div
{
    background-image: url("../img/nextbutton.png");
}
.videohome .owl-carousel .owl-controls .owl-nav .owl-next,
.homeschool .owl-carousel .owl-controls .owl-nav .owl-next,
.hocbong .owl-carousel .owl-controls .owl-nav .owl-next
{
    left: unset;
    right: 0;
    background-position: right center;
}
.videohome .owl-carousel .owl-controls .owl-nav > div:hover,
.homeschool .owl-carousel .owl-controls .owl-nav > div:hover,
.hocbong .owl-carousel .owl-controls .owl-nav > div:hover{
    opacity: 1;
}



.newsitem.itembig .img-responsive{
    height: auto;
    width: 100%;
}
#footer{
    background-color: #b36d10;
    background-image: -webkit-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -moz-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -ms-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -o-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: linear-gradient(to right, #824705, #e49318, #824705);
    margin-top: 50px;
}
.footerbg{
    background: url("../img/bgfooter.png") no-repeat center bottom transparent;
    padding: 40px 0;
}
#footer, #footer a{
    color: #fff;
    font-size: 15px;
}

#footer h5 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 3px solid #fff;
    line-height: 53px;
}

#contact{
    box-shadow: 0 0 8px 8px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 8px 8px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 8px 8px rgba(0,0,0,0.2);
    border: 1px solid #ccc;
    margin-top: 50px;
}
.formcontent{
    padding: 10px 0 10px 20px;
}
.formcontent h1{
    margin-bottom: 20px;
}
.formstudy {
    border: 5px solid #824705;
    border-radius: 3px;
    margin-bottom: 30px;
}
.formstudy h4{
    background-color: #824705;
    display: block;
    color: #fff;
    padding: 10px;
    margin: 0;
    text-align: center;
}
.formstudy.home{
    background-color: #824705;
    border-radius: 0;
    margin-bottom: 0;
}
.formstudy.home .input-group{
    margin-bottom: 20px;
}
.themebt-footer{
    background-color: #b36d10;
    background-image: -webkit-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -moz-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -ms-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: -o-linear-gradient(to right, #824705, #e49318, #824705);
    background-image: linear-gradient(to right, #824705, #e49318, #824705);
    text-align: center;
    color: #fff;
    padding: 20px 0 10px;
}




.newsviewest .boxnewshot {
    border-bottom: 1px dotted #ababab;
    padding: 9px 0;
    margin: 0 15px;
}
.newsviewest h3 {
    margin: 0;
}
.newsviewest h3 a {
    display: block;
    font-size: 14px;
}
.videohome{
    background: url("../img/video.jpg") fixed center center;
    padding: 20px 0;
}
.videohome .title,
#partner .title{
    color: #fff;
    text-align: center;
    font-size: 20px;
}
.videohome .newsitem{
    background-color: #fff;
}
.videohome .newsitem h3 a {
    color: #444;
    text-align: left;
    padding-left: 73px;
    padding-top: 16px;
}
.videohome .owl-controls{
    bottom: -10px;
}
.videohome .newsitem{
    margin: 20px 20px 40px;
}
.videohome .newsitem:hover h3 a{
    color: #f99300;
}
.videohome .newsitem h3 {
    position: relative;
}.videohome .newsitem h3 i{
     color: #f61c0d;
     font-size: 50px;
     position: absolute;
     left: 10px;
     top: 0;
 }
.videohome .newsitem{
    margin: 20px 20px 40px;
}
.newseven_home .newsitem {
    margin: 0 0 30px;
    min-height: 346px;
}
.newseven_home .newsitem.itembig .img-responsive{
    height: 200px;
}
/* co dinh chieu cao khoi tieu de = 2 dong -> tranh loi Chrome/Blink:
   phan tu -webkit-box bi line-clamp khong day du chieu cao -> summary de len dong 2.
   Dat height cho h3 nen dung tren MOI trinh duyet (Chrome/Firefox/Safari/Edge). */
.newseven_home .newsitem h3{
    height: 64px;
    margin: 0;
    overflow: hidden;
}
.newseven_home .newsitem h3 a {
    display: -webkit-box;
    max-height: 64px;
    overflow: hidden;
    line-height: 22px;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.newseven_home .newsitem p.summary {
    display: -webkit-box;
    max-height: 57px;
    overflow: hidden;
    line-height: 19px;
    color: #444444;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.newseven_home .newsitem p.datetime{
    text-align: right;
}
#partner{
    background: url("../img/doitac.jpg") fixed center center;
    padding: 60px 0;
}
#partner .owl-controls{
    bottom: unset;
    position: inherit;
}
#partner .owl-controls .owl-nav > div{
    background: url("../img/nextbutton.png") no-repeat left center transparent;
    width: 74px;
    height: 74px;
    opacity: 0.5;
    border: none;
    bottom: 40px;
    position: absolute;
    margin: 0;
}
#partner .owl-controls .owl-nav .owl-prev{
    left: 0%;
}
#partner .owl-controls .owl-nav .owl-next{
    right: 0;
    background-position: right center;
}
#partner:hover .owl-controls .owl-nav > div{
    opacity: 1;
}
#partner .item{
    margin: 30px 10px;
    background-color: #fff;
}
.homeschool .owl-item .item .newsitem:first-child{
    margin-bottom: 20px;
}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover,
.pagination > li > a, .pagination > li > span{
    color: #e29218;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
    background-color: #e29218;
    border-color: #e29218;
}
.searchform{
    margin-top: 22px;
    margin-left: 15px;
}
#searchbtn {
    cursor: pointer;
    color: #fff;
}
#searchbtn:hover, .searchform.open #searchbtn  {
    color: #e29218;
}

.searchform.open .dropdown-menu{
    border: none;
    padding: 0;
}
.searchform .gsc-control-cse{
    padding: 0;
}
.searchform .gsc-search-box{
    margin: 0;
}
.searchform .gsc-search-button-v2{
    padding: 6px ;
    background-color: #e29218;
    border: none;
}
.searchform .gsib_a{
    padding: 0;
}
.searchform .gsc-input-box{
    border: none !important;
}
.searchform #gs_st50{
    display: none;
}
.searchform .gsc-input{
    padding: 3px;
}
.unisubtitle{
    font-size: 20px;
    color: #e29218;
}
/*
.searchform.open .dropdown-menu{
    border: none;
    padding: 0;
}
#searchform{
    position: relative;
}
#searchform input{
    padding-right: 26px;
}
#searchform button{
    position: absolute;
    right: 0;
    top: 3px;
    border: 0;
    background: transparent;
    font-size: 18px;
    color: #e29218;
}
#searchform  .ui-helper-hidden-accessible { display:none; }*/
.hocbong{
    background: #ebf2ee url("../../home/img/pc_visual02.png") no-repeat center 0;
    min-height: 530px;
}
.hocbong .title{
    color: #708741;
    padding: 68px 0 43px 0;
    font-size: 48px;
}
.hocbong .newsitem{
    padding: 36px 18px;
    border: 1px solid #bfbfbf;
    background: #fff;
    margin: 0 10px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}
.hocbong .newsitem h3 a{
    color: #000;
}
.hocbong .newsitem p{
    border-top: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    padding: 15px 0;
    margin: 10px 0;
}
.hocbong .newsitem p a{
    color: #111;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    display: -webkit-box;
    height: 80px;
}
.gksalumni{
    background-color: #fff;
    border: 3px solid #bfbfbf;
    text-align: center;
    padding: 30px 0;
}
.gksalumni:hover {
    border-color: #fa8a1a;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.gksalumni a{
    font-size: 37px;
    color: #000;
}
.gksalumni, .gksalumni img{
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius: 30px;
}
.hocbong .owl-carousel .owl-controls .owl-nav > div{
    bottom: 40%;
}
.content_file {
    margin-top: 25px;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
}
.clear{ clear: both; }


.bg-trans{display: none;width:100%;height:100%;float:left;background: rgba(0,0,0,0.7);position: fixed;left:0;bottom:0;z-index: 9999999;}
/* [dọn] popup booking (WP Contact Form 7 cũ: widget-booking/frm-booking/wpcf7/screen-reader-response) đã bỏ — không còn markup */
#ez-toc-container{display:none;}
.active_content_table {display: block!important;}
.active__more {
    background: #fff!important;
}
.active__more .content,
.active__more .bx-content-about {
    width:100%!important;
    text-align: justify;
}
@media print {
    body {
        display: none!important;
    }
}



.grecaptcha-badge {display: none;}

.relative{
    position: relative;
}
#searchuni{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    opacity: 0.9;
}
.usschool table tbody td, .usschool table tbody th {
    vertical-align: middle;
}
.homeschool.usschool {
    background: url("../img/video.jpg") fixed center center;
    margin-top: 0;
}
.homeschool.usschool table td, .homeschool.usschool table th, .homeschool.usschool a{
    color: #ddd;
}
.homeschool.usschool table thead th{
    color: #fff;
}
/* ==================== THEME (lớp phủ brand) ==================== */
/* ============================================================
   theme.css — Design system mới cho duhocba.com (2026-07)
   Nạp SAU style.css + Bootstrap 3 để đè (reskin), giữ Bootstrap làm nền.
   Tông: nâu trầm + kem, CAM chỉ là điểm nhấn. Ảnh theo tỷ lệ chuẩn SEO.
   ============================================================ */

:root{
  --paper:#faf7f1; --paper-2:#f2ebdd; --card:#ffffff;
  --ink:#2a1f16; --ink-soft:#6f6153;
  --brown:#37240f; --brown-2:#4a3115;
  --accent:#df860d; --accent-soft:#f0a638; --gold:#c99f52;
  --line:#e8dfce;
  --c-kr:#2c4a7e; --c-us:#b3242b; --c-ca:#1f6b40; /* nhấn theo nước */
  --shadow:0 8px 24px rgba(74,45,12,.10); --shadow-sm:0 2px 8px rgba(74,45,12,.07);
  --r:14px;
}

/* ---------- HEADER / NAVBAR: cam gradient -> nâu trầm (khớp mockup) ---------- */
.banner{
  background-color:#37240f !important;
  background-image:linear-gradient(180deg,#402a12,#31200d) !important;
  box-shadow:0 2px 0 rgba(223,134,13,.55), 0 6px 18px rgba(0,0,0,.22) !important;
}
/* logo lockup: khiên + chữ "DU HỌC BA / Du học Hàn • Mỹ • Canada" (theo demo) */
#logotop.brandlock{ display:flex; align-items:center; gap:11px; width:auto; }
/* bỏ viền focus quanh logo khi BẤM CHUỘT (Coc Coc cũ vẫn vẽ) — giữ khi dùng bàn phím (a11y) */
#logotop:focus:not(:focus-visible){ outline:none; }
#logotop.brandlock > img{ height:100%; width:auto; }
#logotop .brand-lt{ line-height:1.06; text-align:left; }
#logotop .brand-lt b{ display:block; color:#fff; font-weight:800; letter-spacing:.05em; font-size:16px; }
#logotop .brand-lt > span{ display:block; color:#d8bd93; font-size:10.5px; letter-spacing:.04em; }
/* dải desktop hẹp (992-1199): ẩn tagline để menu + tools đủ 1 hàng */
@media (max-width:1199px){ #logotop .brand-lt > span{ display:none; } }
@media (max-width:480px){ #logotop .brand-lt b{ font-size:14px; } }

/* FIX desktop (≥992): navbar dùng FLEX thay float -> tools (cờ/tìm/user) KHÔNG rớt dòng
   khi logo lockup rộng thêm. Menu co giãn, tools giữ bên phải cùng hàng. */
@media (min-width:992px){
  #menu.navbar-collapse{ display:flex !important; align-items:center; padding-left:0; padding-right:0; }
  #menu > ul{ float:none !important; display:flex; flex-wrap:wrap; flex:1 1 auto; margin:0; }
  #menu > ul > li{ float:none !important; }
  #menu > ul > li > a{ padding-left:13px !important; padding-right:13px !important; }
  .header-tools{ float:none !important; flex:0 0 auto; margin-left:14px; }
}
/* dải desktop hẹp (992-1199): thu gọn menu để đủ 1 hàng cùng tools */
@media (min-width:992px) and (max-width:1199px){
  #menu > ul > li > a{ padding-left:9px !important; padding-right:9px !important; font-size:12.5px; letter-spacing:0; }
  .header-tools{ margin-left:8px; }
}

/* menu: chữ kem, IN HOA, gạch chân CAM khi hover/active (mockup: #e7d6ba -> #fff) */
#menu > ul > li > a{
  color:#e7d6ba !important; font-weight:600; letter-spacing:.03em; font-size:13px !important;
  border-bottom-width:2px !important;
}
#menu > ul > li.active > a,
#menu > ul > li > a:hover,
#menu > ul > li:hover > a{
  color:#fff !important; border-bottom-color:var(--accent) !important;
}
/* dropdown cấp 2: bo góc, viền trên cam, hover nền kem */
#menu .menucategory > ul{
  border-radius:12px !important; overflow:hidden; border-top:3px solid var(--accent);
  box-shadow:0 12px 30px rgba(40,25,6,.22) !important; padding:6px 0 !important; }
.menucategory > ul a{ border-bottom:1px solid var(--line) !important; color:var(--ink) !important; padding:9px 16px !important; }
.menucategory > ul li:last-child a{ border-bottom:0 !important; }
.menucategory > ul a:hover{ color:var(--accent) !important; background:#fbf6ec; }
/* icon công cụ: tròn, nền trắng mờ trên nền nâu (mockup .tools .ic) */
.header-tools .searchform > .fa-search{
  width:33px; height:33px; border-radius:50%; background:rgba(255,255,255,.10);
  justify-content:center; font-size:15px !important; }
.header-tools .searchform > .fa-search:hover{ background:rgba(255,255,255,.18); }

/* ---------- HERO trang chủ (.herohome) — dựng theo demo, đặt trong ô ads code ---------- */
/* owl-setup ép slide thành .item (mất class herohome) -> nhắm cả 2 */
.herohome{ position:relative; overflow:hidden; min-height:470px; display:flex; align-items:center; }
#slider .item{ position:relative; overflow:hidden; }
/* Cover trang CHI TIẾT trường: chiều cao ĐỒNG NHẤT mọi trường (object-fit cover) — KHÔNG dính min-height 470 của hero */
.slider-cover .item > img.img-responsive,
#maincontent > img.img-responsive{ display:block; width:100%; height:clamp(200px,24vw,330px); object-fit:cover; }
.herohome-bg{ position:absolute; inset:0;
  background:radial-gradient(125% 135% at 78% 6%, #5f3f1b 0%, #38240f 46%, #1c1207 100%); }
.herohome-bg::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size:20px 20px; }
.herohome-ov{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,11,4,.72) 0%, rgba(18,11,4,.4) 52%, rgba(18,11,4,0) 100%); }
.herohome .container,#slider .item .container{ position:relative; z-index:2; }
.herohome-inner{ max-width:630px; padding:44px 0; position:relative; z-index:2; }
.herohome-eyebrow{ display:inline-block; color:var(--accent-soft); font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; margin-bottom:14px; }
.herohome-title{ color:#fff; font-size:clamp(28px,4.4vw,50px); font-weight:800; line-height:1.1; margin:0 0 16px; }
.herohome-title span{ color:var(--accent-soft); }
.herohome-desc{ color:#f0e6d6; font-size:16px; line-height:1.55; margin:0 0 24px; max-width:520px; }
.herohome-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff !important;
  font-weight:700; padding:13px 28px; border-radius:999px; box-shadow:0 8px 18px rgba(223,134,13,.32);
  text-decoration:none; transition:background .15s,transform .15s; }
.herohome-cta:hover{ background:#c9760a; transform:translateY(-2px); color:#fff !important; }
@media (max-width:767px){ .herohome{ min-height:360px; }
  .herohome-ov{ background:linear-gradient(180deg, rgba(18,11,4,.5), rgba(18,11,4,.74)); }
  .herohome-inner{ padding:32px 0; } }
/* biến thể nền cho từng slide (class đặt trên .herohome-bg vì owl xoá class section) */
.herohome-bg.s2{ background:radial-gradient(125% 135% at 78% 6%, #6a4620 0%, #3d2913 46%, #1f1408 100%); }
.herohome-bg.s3{ background:radial-gradient(125% 135% at 22% 8%, #4a3c26 0%, #2c2213 46%, #17110a 100%); }

/* Slide trang chủ (#slider owl): nút next/prev 2 bên + chấm dưới (kiểu demo) */
#slider{ position:relative; }
/* owl-controls mặc định positioned + nằm đáy -> ép static để arrows/dots neo vào #slider */
#slider .owl-controls{ position:static !important; }
#slider .owl-nav{ margin:0; position:static; }
#slider .owl-nav .owl-prev,#slider .owl-nav .owl-next{
  position:absolute !important; top:50% !important; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; margin:0 !important;
  background:rgba(0,0,0,.32) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important;
  font-size:24px; line-height:1; display:grid !important; place-items:center; z-index:5; transition:background .15s; }
#slider .owl-nav .owl-prev:hover,#slider .owl-nav .owl-next:hover{ background:rgba(0,0,0,.62) !important; }
#slider .owl-nav .owl-prev{ left:16px; } #slider .owl-nav .owl-next{ right:16px; }
#slider .owl-nav .owl-prev span,#slider .owl-nav .owl-next span{ line-height:1; margin-top:-4px; }
#slider .owl-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex !important; gap:9px;
  justify-content:center; z-index:5; }
#slider .owl-dots .owl-dot span{ display:block; width:9px; height:9px; margin:0; border-radius:50%;
  background:rgba(255,255,255,.45); transition:.2s; }
#slider .owl-dots .owl-dot.active span{ background:var(--accent-soft); width:26px; border-radius:5px; }
@media (max-width:767px){ #slider .owl-nav .owl-prev,#slider .owl-nav .owl-next{ width:36px; height:36px; font-size:20px; } }

/* Mũi tên carousel các section (Liên kết/GKS/Đối tác): tròn nhỏ như slide (bỏ ảnh nút to cũ) */
/* ép owl-controls static + carousel relative -> arrows neo đúng giữa hàng (fix Đối tác lệch) */
.homeschool .owl-controls,.hocbong .owl-controls,#partner .owl-controls,.videohome .owl-controls{ position:static !important; }
.homeschool .owl-carousel,.hocbong .owl-carousel,#partner .owl-carousel,.videohome .owl-carousel{ position:relative; }
.homeschool .owl-nav > div,.hocbong .owl-nav > div,#partner .owl-nav > div,.videohome .owl-nav > div{
  background:rgba(28,17,4,.4) !important; background-image:none !important;
  width:38px !important; height:38px !important; border-radius:50% !important; opacity:1 !important;
  top:50% !important; bottom:auto !important; transform:translateY(-50%);
  display:grid !important; place-items:center; border:0 !important; box-shadow:none !important; margin:0 !important; }
.homeschool .owl-nav .owl-prev,.hocbong .owl-nav .owl-prev,#partner .owl-nav .owl-prev,.videohome .owl-nav .owl-prev{ left:6px !important; right:auto !important; }
.homeschool .owl-nav .owl-next,.hocbong .owl-nav .owl-next,#partner .owl-nav .owl-next,.videohome .owl-nav .owl-next{ right:6px !important; left:auto !important; }
.homeschool .owl-nav > div:hover,.hocbong .owl-nav > div:hover,#partner .owl-nav > div:hover,.videohome .owl-nav > div:hover{ background:rgba(28,17,4,.65) !important; }
.homeschool .owl-nav .owl-prev::after,.hocbong .owl-nav .owl-prev::after,#partner .owl-nav .owl-prev::after,.videohome .owl-nav .owl-prev::after{ content:"‹"; color:#fff; font-size:22px; line-height:1; margin-top:-3px; }
.homeschool .owl-nav .owl-next::after,.hocbong .owl-nav .owl-next::after,#partner .owl-nav .owl-next::after,.videohome .owl-nav .owl-next::after{ content:"›"; color:#fff; font-size:22px; line-height:1; margin-top:-3px; }

/* ---------- Base ---------- */
body{ background-color:var(--paper) !important; color:var(--ink); }
a{ transition:color .15s; }
a:hover,a:focus{ color:var(--accent); }
::selection{ background:var(--accent-soft); color:#fff; }

/* ---------- Buttons: xanh Bootstrap -> CAM thương hiệu ---------- */
.btn-primary,.btn-info,.btn-success,.btn-warning{
  background-image:linear-gradient(180deg,var(--accent-soft),var(--accent)) !important;
  background-color:var(--accent) !important;
  border-color:var(--accent) !important; color:#fff !important;
  box-shadow:0 6px 14px rgba(223,134,13,.28);
}
.btn-primary:hover,.btn-primary:focus,.btn-info:hover,.btn-info:focus,
.btn-success:hover,.btn-success:focus,.btn-warning:hover,.btn-warning:focus{
  background-image:linear-gradient(180deg,var(--accent),#c9760a) !important;
  background-color:#c9760a !important; border-color:#c9760a !important; color:#fff !important;
}
.btn{ border-radius:10px; font-weight:700; }
.btn-flat{ border-radius:10px; }

/* ---------- Đăng ký tư vấn — reg-card (theo demo) ---------- */
.reg{ padding:32px 0; background:var(--paper); }
.reg-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:20px 22px; display:grid; grid-template-columns:1fr 1fr 1.25fr auto; gap:12px 14px; align-items:center; }
.reg-card .h{ grid-column:1/-1; }
.reg-card .h .t{ font-size:19px; font-weight:800; color:var(--brown); margin:0; }
.reg-card .h .s{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 0; }
.reg-card .field{ display:flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:11px;
  height:46px; padding:0 13px; background:#fdfbf6; }
.reg-card .field .fi{ color:var(--accent); font-size:14px; width:16px; text-align:center; flex:0 0 auto; }
.reg-card .field input{ border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:var(--ink);
  flex:1 1 auto; min-width:0; box-shadow:none; }
.reg-card .field.capt img{ height:26px; width:auto; border-radius:5px; flex:0 0 auto; }
.reg-card .field.capt .reloadcaptcha{ cursor:pointer; color:var(--ink-soft); flex:0 0 auto; }
.reg-card .field.capt .reloadcaptcha:hover{ color:var(--accent); }
.reg-card .reg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:14.5px; color:#fff; padding:12px 26px; border-radius:11px; white-space:nowrap;
  background:linear-gradient(180deg,var(--accent-soft),var(--accent)); box-shadow:0 8px 18px rgba(223,134,13,.32);
  transition:background .15s,transform .15s; }
.reg-card .reg-btn:hover{ background:linear-gradient(180deg,var(--accent),#c9760a); transform:translateY(-2px); color:#fff; }
.reg-card .reg-msg{ grid-column:1/-1; }
@media (max-width:860px){ .reg-card{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .reg-card .reg-btn{ grid-column:1/-1; } }
@media (max-width:520px){ .reg-card{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Form Đăng ký tư vấn (.formstudy.home): band nâu trầm, chữ trắng ---------- */
.formstudy{ border-color:var(--brown) !important; }
.formstudy.home{
  background-color:#3a2610 !important;
  background-image:linear-gradient(180deg,#4a3115,#31200d) !important; }
/* tiêu đề GIỮ TRẮNG trên nền tối (đè .titlecat nâu ở trên) */
.formstudy .titlecat,.formstudy h4{ color:#fff !important; background:transparent !important; }
.formstudy.home .input-group-addon{ background:#fff; color:var(--accent); border:0; }

/* ---------- Dải số liệu tin cậy (.trust) — theo demo ---------- */
.trustbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.trust{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; padding:22px; }
.trust .st{ text-align:center; }
.trust .n{ font-size:26px; font-weight:800; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.trust .l{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; }
@media (max-width:767px){ .trust{ gap:20px 26px; } .trust .n{ font-size:22px; } }

/* ---------- Forms ---------- */
.form-control{ border-radius:10px; }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(223,134,13,.12); }
.input-group-addon{ background:#fdfbf6; }

/* ---------- Section titles: nâu đậm + gạch nhấn cam (khớp mockup .sec-title) ---------- */
.title,.titlecat{ color:var(--brown) !important; font-weight:800 !important; }
/* gạch nhấn cam ở giữa cho tiêu đề section trang chủ (Mỹ / Canada — dạng link, KHÔNG có eyebrow) */
.homeschool h4.title{ position:relative; padding-bottom:16px; }
.homeschool h4.title::after{ content:""; position:absolute; left:50%; bottom:0;
  transform:translateX(-50%); width:58px; height:3px; border-radius:3px; background:var(--accent); }

/* Section head DÙNG CHUNG (mockup .sec-head): eyebrow nhỏ + tiêu đề canh giữa.
   Áp cho mọi section trang chủ (Lộ trình #howto, Học bổng .hocbong, Trường liên kết, Tin tức). */
.sec-head{ text-align:center; margin-bottom:30px; }
.sec-head .eyebrow{ display:inline-block; color:var(--accent); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; margin-bottom:6px; line-height:1.4; }
.sec-head .title{ text-align:center !important; margin:0 !important; padding:0 !important;
  font-size:clamp(22px,3vw,30px) !important; line-height:1.25; }
/* đã có eyebrow -> bỏ gạch dưới cam & bolded-line để khớp mockup (không đè chồng) */
.sec-head .title::after{ display:none !important; }
.sec-head .bolded-line{ display:none !important; }
/* .bolded-line: span rỗng -> gạch nhấn cam nhỏ cạnh tiêu đề (listing/news/page) */
.bolded-line{ display:inline-block; height:3px; width:54px; vertical-align:middle;
  margin-left:8px; background:var(--accent) !important; border-radius:3px; }

/* ---------- Cards (.newsitem dùng khắp: tin, trường) ---------- */
.newsitem{ border:1px solid var(--line); border-radius:var(--r); background:#fff;
  box-shadow:var(--shadow-sm); transition:box-shadow .18s,transform .18s; }
.homeschool .newsitem,.newseven_home .newsitem{
  box-shadow:var(--shadow-sm) !important; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; }
.newsitem:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.newsitem h3 a,.newsitem .name{ color:var(--brown); }
.newsitem:hover h3 a{ color:var(--accent); }

/* Khung ảnh thẻ: aspect-ratio đặt trên THẺ BỌC (a/span) vì img là replaced element.
   object-fit cover -> hợp cả ảnh cũ 3:2 lẫn key mới, chống CLS. */
/* Trường 4:3 — thẻ trường: <a><img></a> */
.homeschool .newsitem > a{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.homeschool .newsitem > a > .img-responsive{ width:100%; height:100%; object-fit:cover; }
/* Tin 16:9 — mọi thẻ tin bọc ảnh bằng span.hoverBorderWrapper (homepage + danh mục tin) */
.hoverBorderWrapper{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.hoverBorderWrapper .img-responsive{ width:100%; height:100%; object-fit:cover; }
/* thân thẻ có khoảng đệm vì ảnh đã tràn mép */
.homeschool .newsitem h3,.homeschool .newsitem p,
.newseven_home .newsitem h3,.newseven_home .newsitem p{ padding-left:12px; padding-right:12px; }
/* tên trường trong carousel Liên kết/Mỹ/Canada: cách ảnh 1 khoảng, không dán sát */
.homeschool .newsitem h3{ margin:12px 0 14px !important; }
/* nhãn danh mục trên tiêu đề (như demo) — GIỚI HẠN 1 DÒNG, chữ nhỏ hơn demo 1 cỡ (11px) */
.newseven_home .newsitem .newscat{ display:inline-block; max-width:calc(100% - 24px);
  margin:12px 12px 0 !important; padding:3px 10px !important;
  background:var(--paper-2); color:var(--accent); border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  vertical-align:bottom; }
.newseven_home .newsitem .newscat:hover{ background:var(--accent-soft); color:#fff; }
/* tiêu đề tin: kẹp MỀM 2 dòng + dấu "…" bằng -webkit-line-clamp (KHÔNG cắt cứng theo px).
   Mấu chốt: RESET `padding:0` trên <a> (base có padding:10px 0 làm box +20px -> tưởng thò dòng 3).
   Bỏ height/max-height cứng: nhiều thiết bị độ rộng khác nhau, cứ để line-clamp tự lo 1-2 dòng;
   h3 min-height=2 dòng chỉ để các thẻ đều nhau. */
.newseven_home .newsitem h3{ height:auto !important; min-height:48px !important; overflow:visible !important;
  margin:6px 0 6px !important; text-align:left; }
.newseven_home .newsitem h3 a{ display:-webkit-box !important; -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2; overflow:hidden !important; padding:0 !important; max-height:none !important;
  font-size:16px !important; line-height:24px !important; text-align:left !important; color:var(--brown); }
/* bỏ viền hover trên ảnh tin (theHoverBorder do JS chèn) — không đẹp */
.theHoverBorder{ display:none !important; }
.hoverBorder:hover img{ transform:none !important; }
.newseven_home .newsitem .summary{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:var(--ink-soft); font-size:13px; }
/* ngày tháng: canh TRÁI như demo, sát đáy thẻ (bỏ khoảng trống thừa) */
.newseven_home .newsitem{ min-height:0 !important; padding-bottom:14px !important; margin-bottom:24px !important; }
.newseven_home .newsitem .datetime{ color:var(--ink-soft); font-size:12.5px;
  text-align:left !important; margin:8px 0 0 !important; }

/* Badge TOP: màu theo tier (trầm, không quá nổi bật), chữ trắng, bo tròn */
.topschool{ background:rgba(28,17,4,.7) !important; color:#fff !important;
  border-radius:999px !important; padding:3px 10px !important; opacity:1 !important;
  font-size:11px !important; font-weight:700; letter-spacing:.05em; }
.topschool1{ background:#9e3b3b !important; color:#fff !important; } /* top 1: đỏ trầm */
.topschool2{ background:#33507e !important; color:#fff !important; } /* top 2: xanh dương trầm */
.topschool3{ background:#3d6b4a !important; color:#fff !important; } /* top 3: xanh lá trầm */

/* Tên trường trong thẻ: EN đậm nâu 15px, KR nhạt 13px (theo mockup danh sách) */
.newsitem h3 .uni-name{ display:block; font-size:15px; font-weight:700; color:var(--brown); line-height:1.3; padding:0 !important; text-align:left; }
.newsitem h3 .uni-sub{ display:block; font-size:13px; font-weight:400; color:var(--ink-soft); margin-top:3px; padding:0 !important; text-align:left; }
.newsitem:hover h3 .uni-name{ color:var(--accent); }
.newsitem:hover h3 .uni-sub{ color:var(--ink-soft); }
/* lưới thẻ trường: chuyển từ float Bootstrap -> CSS GRID, gap ĐỀU 24px 2 chiều + hàng thẳng đều
   (như mockup). Trung hoà padding/float của cột Bootstrap; thẻ cao bằng nhau trong 1 hàng. */
.catschool .row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; }
/* Bootstrap .row::before/::after (clearfix) biến thành grid-item rỗng chiếm ô đầu -> ẩn đi */
.catschool .row::before,.catschool .row::after{ content:none !important; display:none !important; }
.catschool .row > div{ width:auto !important; padding:0 !important; float:none !important; display:flex; min-width:0; }
.catschool .newsitem{ margin:0 !important; width:100%; } /* minmax(0,1fr) -> cột bằng nhau -> ảnh & card cao bằng nhau */
.catschool .newsitem h3{ margin:14px 0 16px !important; }
@media (max-width:991px){ .catschool .row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .catschool .row{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Trang DANH SÁCH TRƯỜNG: header + thanh lọc (theo mockup) ---------- */
/* Khối tiêu đề: eyebrow + chip nước + tiêu đề (số nhấn màu nước) + mô tả */
.pagehead{ position:relative; overflow:hidden; padding:16px 0 18px; margin-bottom:2px; border-bottom:1px solid var(--line); }
/* chữ mã nước mờ mờ góc phải (như mockup) */
.pagehead .motif{ position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:0;
  font-size:120px; font-weight:800; line-height:1; letter-spacing:-.03em;
  color:var(--cc,var(--accent)); opacity:.06; pointer-events:none; user-select:none; }
.pagehead .eyebrow,.pagehead h1.titlecat,.pagehead .desc{ position:relative; z-index:1; }
.pagehead .eyebrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--cc,var(--accent)); margin:0 0 10px; }
.pagehead .flagchip{ display:inline-flex; align-items:center; gap:6px;
  background:var(--cc,var(--brown)); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.02em; padding:3px 10px; border-radius:999px; text-transform:none; }
.pagehead h1.titlecat{ display:inline-block; position:relative; font-size:clamp(23px,3.2vw,31px);
  font-weight:800; color:var(--brown); margin:0; padding:0 0 9px !important; border:0 !important; }
.pagehead h1.titlecat b{ color:var(--cc,var(--accent)); font-weight:800; }
.pagehead h1.titlecat::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:4px;
  border-radius:2px; background:var(--cc,var(--accent)); }
.pagehead .desc{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin:16px 0 0; max-width:62ch; }
.catcountry--kr{ --cc:#2c4a7e; }
.catcountry--us{ --cc:#b3242b; }
.catcountry--ca{ --cc:#1f6b40; }

/* ============ Bảng xếp hạng trường Mỹ / Canada (block_2 / block_3) ============ */
/* ô tìm Google trên trang danh mục: bọc .pagesearch để clip, không cho tràn ngang (CSE xoá class .gcse-search sau khi render) */
.pagesearch{ margin:6px 0 18px; overflow:hidden; }        /* to hết chiều ngang, khớp bảng bên dưới */
.pagesearch table.gsc-search-box{ width:100% !important; }
.pagesearch .gsc-input-box{ width:100% !important; box-sizing:border-box; }
.ranklist{ margin-top:2px; }
.ranklist .rankcount{ font-size:13px; color:var(--ink-soft); margin:0 0 14px; }
.ranklist .rankcount b{ color:var(--cc,var(--accent)); }
.ranktable{ width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.ranktable thead th{ background:var(--paper-2); color:var(--brown); font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:12px 16px; text-align:left;
  border-bottom:2px solid var(--cc,var(--accent)); }
.ranktable tbody td,.ranktable tbody th{ padding:11px 16px; border-bottom:1px solid var(--line);
  vertical-align:middle; text-align:left; font-weight:400; }
.ranktable tbody tr:last-child td,.ranktable tbody tr:last-child th{ border-bottom:0; }
.ranktable tbody tr:hover{ background:var(--paper); }
.ranktable .c-rank{ width:76px; } .ranktable .c-logo{ width:100px; }
.rankno{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:34px;
  padding:0 9px; border-radius:9px; font-weight:800; font-size:14px; color:#fff; background:var(--cc,var(--accent)); }
.rankno.no{ background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); }
.ranklogo{ display:inline-flex; width:80px; height:54px; }
.ranklogo img{ width:100%; height:100%; object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:3px; }
.rankname b{ color:var(--brown); font-size:14.5px; font-weight:700; }
.rankname a:hover b{ color:var(--cc,var(--accent)); }
.rankname .kr{ display:block; color:var(--ink-soft); font-size:12.5px; font-weight:500; margin-top:2px; }
@media (max-width:600px){
  .ranktable .c-logo{ display:none; }
  .ranktable thead th,.ranktable tbody td,.ranktable tbody th{ padding:9px 10px; }
  .rankname b{ font-size:13.5px; }
}

/* ============ Trang Top trường Hàn Quốc — phân hạng theo visa ============ */
.toppage .tierlegend{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 26px; }
.toppage .tierlegend .lg{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--tc);
  border-radius:11px; padding:11px 14px; }
.toppage .tierlegend .lg .lg-t{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--brown); font-size:13.5px; }
.toppage .tierlegend .lg .lg-t .pip{ width:11px; height:11px; border-radius:50%; background:var(--tc); flex:0 0 auto; }
.toppage .tierlegend .lg .lg-s{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:4px; }
.tier1{ --tc:#a04a34; }   /* Top 1 — đỏ nhẹ nâu */
.tier2{ --tc:#2c4a7e; }   /* Top 2 — blue */
.tier3{ --tc:#1f7a4d; }   /* Top 3 — green */
.tier-off{ --tc:#7d746a; } /* Trường hạn chế — xám */
.tierempty{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--tc); border-radius:12px; padding:14px 16px; color:var(--ink-soft); font-size:13.5px; }
.tierempty i{ color:var(--tc); }
.tiersec{ margin:0 0 26px; }
.tier-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; flex-wrap:wrap; }
.tier-head .tbadge{ display:inline-flex; align-items:center; gap:7px; background:var(--tc); color:#fff;
  font-weight:800; font-size:14px; padding:7px 15px; border-radius:999px; }
.tier-head .tbadge i{ font-size:12px; opacity:.9; }
.tier-head .thint{ font-size:12.5px; color:var(--ink-soft); }
.tiertable{ width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--line); border-left:4px solid var(--tc); border-radius:12px; overflow:hidden; }
.tiertable th.grp{ width:158px; background:var(--paper-2); color:var(--brown); font-weight:800; font-size:13px;
  text-align:left; padding:11px 14px; vertical-align:top; border-bottom:1px solid var(--line); }
.tiertable td.grp-list{ padding:10px 14px; border-bottom:1px solid var(--line); line-height:1.95; color:var(--ink-soft); font-size:13.5px; }
.tiertable tr:last-child th,.tiertable tr:last-child td{ border-bottom:0; }
.tiertable td.grp-list a{ color:var(--tc); font-weight:600; }
.tiertable td.grp-list a:hover{ text-decoration:underline; filter:brightness(.9); }
@media (max-width:991px){
  .toppage .tierlegend{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .toppage .tierlegend{ grid-template-columns:1fr; gap:9px; }
}
@media (max-width:767px){
  .tiertable th.grp{ width:auto; display:block; border-bottom:0; }
  .tiertable td.grp-list{ display:block; }
  .tiertable tr{ display:block; border-bottom:1px solid var(--line); }
  .tiertable tr:last-child{ border-bottom:0; }
}

/* Thanh lọc = card trắng 1 hàng: [ô tìm Google] [3 select] [nút Lọc cam] */
.filterbar{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:12px 14px; margin:16px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filterbar .filterbar-gcse{ flex:1 1 240px; min-width:200px; overflow:hidden; }
.filterbar .filterbar-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0; }
.filterbar .sel{ position:relative; margin:0; }
.filterbar .sel::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); pointer-events:none; font-size:12px; }
.filterbar select.form-control{ appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1.5px solid var(--line); border-radius:10px; background:#fdfbf6; box-shadow:none;
  height:auto; padding:10px 34px 10px 13px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.filterbar select.form-control:focus{ border-color:var(--accent); }
.filterbar .btn-filter{ border:0; cursor:pointer; font-weight:700; font-size:14px; color:#fff;
  padding:11px 20px; border-radius:10px; white-space:nowrap;
  background:linear-gradient(180deg,var(--accent-soft),var(--accent));
  box-shadow:0 8px 16px rgba(223,134,13,.28); transition:filter .15s; }
.filterbar .btn-filter:hover{ filter:brightness(1.06); }

/* Dòng đếm kết quả */
.resbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:18px 2px 2px; color:var(--ink-soft); font-size:13px; }
.resbar b{ color:var(--ink); }

/* ---------- Trang CHI TIẾT TRƯỜNG: header (tiêu đề + gạch ngắn + share + quick-facts) ---------- */
.detailhead{ position:relative; overflow:hidden; padding:14px 0 4px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.detailhead .motif{ position:absolute; right:0; top:6px; font-size:92px; font-weight:800; line-height:1; letter-spacing:-.03em;
  color:var(--cc,var(--accent)); opacity:.06; pointer-events:none; user-select:none; }
.detailhead .dh-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.detailhead .eyebrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--cc,var(--accent)); margin:0 0 8px; }
.detailhead .flagchip{ display:inline-flex; align-items:center; gap:6px; background:var(--cc,var(--brown)); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px; text-transform:none; }
.detailhead h1.detailtitle{ display:inline-block; position:relative; font-size:clamp(22px,3vw,30px);
  font-weight:800; color:var(--brown); margin:0; padding:0 0 10px !important; border:0 !important; }
.detailhead h1.detailtitle .kr{ color:var(--ink-soft); font-weight:700; font-size:.62em; }
.detailhead h1.detailtitle::after{ content:""; position:absolute; left:0; bottom:0; width:60px; height:4px;
  border-radius:2px; background:var(--cc,var(--accent)); }
/* ================= SIDEBAR TRANG TRƯỜNG (.scard theo mockup) ================= */
.detailside{ display:flex; flex-direction:column; gap:16px; }
.scard{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
.scard .sh{ padding:11px 16px; font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; background:var(--cc,var(--accent)); display:flex; align-items:center; gap:8px; }
.scard .sb{ padding:14px 16px; }
/* CTA form tư vấn */
.cta-card{ background:linear-gradient(150deg,#fff,#fbf1de); border:1px solid #ecd9b3; }
.cta-card .sb .t{ font-weight:800; color:var(--brown); font-size:16px; margin:0; line-height:1.3; }
.cta-card .sb .s{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 12px; }
.cta-card .field{ display:flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:10px;
  padding:9px 12px; background:#fff; margin-bottom:9px; }
.cta-card .field .fi{ color:var(--accent); font-size:14px; width:16px; text-align:center; flex:0 0 auto; }
.cta-card .field input{ border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; width:100%; color:var(--ink); }
.cta-card .field.capt img{ height:26px; width:auto; border-radius:5px; flex:0 0 auto; }
.cta-card .field.capt .reloadcaptcha{ cursor:pointer; color:var(--ink-soft); flex:0 0 auto; }
.cta-card .field.capt .reloadcaptcha:hover{ color:var(--accent); }
.cta-card .btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:14px; color:#fff; padding:11px; border-radius:10px;
  background:linear-gradient(180deg,var(--accent-soft),var(--accent)); box-shadow:0 8px 16px rgba(223,134,13,.3); transition:.18s; }
.cta-card .btn:hover{ background:linear-gradient(180deg,var(--accent),#c9760a); transform:translateY(-2px); }
.cta-card .reg-msg:empty{ display:none; }
/* Video trong scard: bỏ khung trắng thừa, cho player tràn mép card */
.scard .boxyoutube{ margin:0; }
.scard .boxplayyoutube,.scard .embed-responsive-16by9{ border-radius:0; }
/* Bản đồ trong scard: ẩn tiêu đề nội bộ (đã có .sh), gom 2 khối lại gọn */
.scard .viewboxright h4.titlecat{ display:none !important; }
.scard .map_wrap #rvWrapper,.scard .map_wrap #mapWrapper{ height:210px !important; }
/* Bảng thông tin trường (attr) trong scard */
.uni-attrbox .viewboxright{ background:none; padding:0; }
.uni-attrbox table{ width:100%; margin:0; font-size:13px; }
.uni-attrbox table td{ padding:9px 14px; border-top:1px solid var(--line); vertical-align:top; line-height:1.45; }
.uni-attrbox table tr:first-child td{ border-top:0; }
.uni-attrbox table td:first-child{ color:var(--ink-soft); white-space:nowrap; width:38%; font-size:12.5px; }
.uni-attrbox table td:last-child{ color:var(--ink); font-weight:600; }
.uni-attrbox table td a{ color:var(--cc,var(--accent)); }
.uni-attrbox table td,.uni-attrbox table tr td{ background:#fff; } /* nền trắng hết (như mockup, không zebra) */

/* ===== Trường cùng khu vực (lưới thẻ như mockup) ===== */
.rel{ padding:30px 0 6px; }
.rel .rel-h{ font-size:18px; font-weight:800 !important; color:var(--brown); margin:0 0 16px; display:flex; align-items:center; gap:9px; }
.rel .rel-h i{ color:var(--accent); }
/* tiêu đề "Trường cùng thành phố" bấm được -> trang trường của thành phố */
.rel .rel-h .rel-h-link{ color:var(--brown); display:inline-flex; align-items:center; gap:7px; transition:color .15s; }
.rel .rel-h .rel-h-link:hover{ color:var(--accent); }
.rel .rel-h .rel-h-link i{ font-size:14px; transition:transform .15s; }
.rel .rel-h .rel-h-link:hover i{ transform:translateX(3px); }
.relgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.rcard{ display:block; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); text-align:center; transition:box-shadow .18s,transform .18s; }
.rcard:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.rcard .rthumb{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.rcard .rthumb img{ width:100%; height:100%; object-fit:cover; }
.rcard .rb{ display:block; padding:11px 12px; }
.rcard .rn{ display:block; font-weight:700; color:var(--brown); font-size:13.5px; line-height:1.3; }
.rcard:hover .rn{ color:var(--accent); }
.rcard .rk{ display:block; font-size:12px; color:var(--ink-soft); margin-top:3px; }
@media (max-width:991px){ .relgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){ .relgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ===== Bình luận: khung + heading + hộp đăng nhập (khớp mockup .comments/.cmt-head) ===== */
.comments{ margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-sm); padding:18px 20px; }
.cmt-head{ font-size:17px; font-weight:800 !important; color:var(--brown) !important; display:flex; align-items:center;
  gap:9px; margin:0 0 14px !important; }
.cmt-head i{ color:var(--accent); }
.cmt-head .cnt{ font-size:12px; font-weight:700; color:#fff; background:var(--accent); border-radius:999px;
  padding:2px 9px; line-height:1.5; }
.comment-login-box{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; text-align:center; float:none !important; width:100% !important; }
.comment-login-box .font14{ color:var(--ink-soft); font-size:13.5px; margin:0 0 12px; }
.comment-login-box .btn-primary{ background:linear-gradient(180deg,var(--accent-soft),var(--accent)) !important;
  border:0 !important; border-radius:9px !important; font-weight:700; padding:9px 20px !important;
  box-shadow:0 8px 16px rgba(223,134,13,.28); }
.comment-login-box .btn-primary:hover{ background:linear-gradient(180deg,var(--accent),#c9760a) !important; }

/* ================= TRANG BẢN ĐỒ TRƯỜNG (mapschool desktop + mobile) ================= */
/* CSS chuyển từ <style> inline trong mapschool.php / mapschool_mobile.php (để min) */
.mapwrap{ margin-top:8px; }
.mapsearch{ position:relative; margin-bottom:14px; max-width:420px; }
#searchuni{ position:relative; }
#searchuni input.form-control{ height:44px; border:1.5px solid var(--line); border-radius:10px;
  padding:0 46px 0 14px; font-size:14px; background:#fff; box-shadow:none; width:100%; }
#searchuni input.form-control:focus{ border-color:var(--cc,var(--accent)); box-shadow:none; }
#searchuni button{ position:absolute; top:5px; right:5px; width:34px; height:34px; border:0; padding:0;
  border-radius:8px; background:var(--cc,var(--accent)); color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
#searchuni button:hover{ filter:brightness(1.08); }
#map{ width:100%; height:640px; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--paper-2); }
#schoolinfo .mapinfo-empty{ background:var(--paper); border:1px dashed var(--line); border-radius:12px;
  padding:34px 22px; text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.7; }
#schoolinfo .mapinfo-empty i{ font-size:26px; color:var(--cc,var(--accent)); opacity:.7; margin-bottom:8px; display:inline-block; }
/* thẻ info khi click marker: side panel (desktop) / kakao infowindow (mobile) */
.overlaybox{ position:relative; width:260px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:#fff; }
#schoolinfo .overlaybox{ width:100%; } /* side panel desktop: tràn hết cột */
.overlaybox img{ width:100%; display:block; }
.overlaybox.loader{ min-height:120px; background:url("../../plugins/img/bxslider/bx_loader.gif") no-repeat center; }
.overlaybox .boxtitle{ position:absolute; left:0; right:0; bottom:0; width:auto; border:0;
  background:linear-gradient(transparent,rgba(0,0,0,.78)); padding:24px 14px 10px; }
.overlaybox .boxtitle h5{ margin:0; line-height:1.35; }
.overlaybox .boxtitle a{ color:#fff !important; font-size:15px; font-weight:700; }
.overlaybox .boxtitle h5:last-child a{ font-size:13px; font-weight:400; opacity:.9; }
/* bảng thuộc tính (data.attr) dưới ảnh trong side panel */
#schoolinfo table{ width:100%; margin-top:12px; font-size:13px; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; }
#schoolinfo table td{ padding:8px 12px; border-top:1px solid var(--line); background:#fff; }
#schoolinfo table tr:first-child td{ border-top:0; }
#schoolinfo table td:first-child{ color:var(--ink-soft); white-space:nowrap; width:40%; font-size:12.5px; }
#schoolinfo table td a{ color:var(--cc,var(--accent)); }
@media (max-width:991px){ #map{ height:520px; } }
@media (max-width:767px){ #map{ height:420px; } .mapsearch{ max-width:none; } }

/* Danh mục theo tỉnh / thành phố (lưới dưới bản đồ, mockup .section/.provs) */
.provsec{ padding:34px 0 6px; }
.provsec-title{ font-size:20px; font-weight:800 !important; color:var(--brown) !important; margin:0 0 4px; }
.provsec-sub{ color:var(--ink-soft); font-size:13px; margin:0 0 20px; }
.provsec .provs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.provsec .prov{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column; }
.provsec .prov .ph{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:#fcf8f0; text-decoration:none; }
.provsec .prov:hover .ph{ background:#f6efe2; }
.provsec .prov .ph .pn{ font-weight:700; color:var(--brown); font-size:14px; }
.provsec .prov:hover .ph .pn{ color:var(--cc,var(--accent)); text-decoration:underline; }
.provsec .prov .ph .kr{ font-size:12px; color:var(--ink-soft); }
.provsec .prov .ph .cnt{ margin-left:auto; font-size:11px; font-weight:700; color:#fff; background:var(--cc,var(--accent));
  padding:2px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
.provsec .prov .chips{ padding:12px 14px; display:flex; flex-wrap:wrap; gap:7px; }
.provsec .chip{ font-size:12px; color:var(--cc,var(--accent)); background:#eef2f8; border:1px solid #dde5f0;
  border-radius:999px; padding:3px 10px; text-decoration:none; transition:.15s; }
.provsec .chip:hover{ background:var(--cc,var(--accent)); color:#fff; border-color:var(--cc,var(--accent)); }
.provsec .chip.more{ color:var(--ink-soft); background:transparent; border:0; }
@media (max-width:991px){ .provsec .provs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .provsec .provs{ grid-template-columns:minmax(0,1fr); } }

/* ================= TRANG XEM BÀI VIẾT (news/view.php — mockup news_view) ================= */
.artread{ max-width:860px; margin:0 auto; }              /* cột đọc, đủ rộng mà vẫn dễ đọc */
.arthead{ margin:6px 0 18px; }
.arthead .artcat{ display:inline-block; background:var(--accent); color:#fff !important; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 11px; border-radius:999px; margin-bottom:12px; }
.arthead .artcat:hover{ background:var(--accent-soft); }
h1.arttitle{ font-size:clamp(24px,3.2vw,32px); font-weight:800 !important; color:var(--brown) !important;
  line-height:1.28; margin:0 0 14px !important; text-transform:none; }
.artmeta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft); }
.artmeta .m{ display:inline-flex; align-items:center; gap:6px; }
.artmeta .m i{ opacity:.75; }
.artmeta .artshare{ margin-left:auto; display:flex; gap:7px; align-items:center; }
.artmeta .artshare .btn-share{ width:30px !important; height:30px !important; font-size:13px; border-radius:7px !important; }
/* cover 16:9 */
.artcover{ margin:18px 0 6px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper-2);
  aspect-ratio:16/9; }
.artcover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* lead / tóm tắt */
.artread .lead{ font-size:17px; line-height:1.65; color:#3a2f24; font-weight:600; border-left:4px solid var(--accent);
  padding:4px 0 4px 16px; margin:20px 0; }
/* thân bài (.prose) — khoảng đọc thoải mái, tiêu đề có gạch nhấn */
.artread .prose{ font-size:16px; line-height:1.75; color:#33291f; }
.artread .prose p{ margin:16px 0; }
.artread .prose img{ max-width:100%; height:auto; border-radius:10px; margin:18px 0; }
.artread .prose h2{ font-size:22px; font-weight:800; color:var(--brown); margin:28px 0 10px; line-height:1.3;
  display:flex; align-items:flex-start; gap:10px; }
.artread .prose h2::before{ content:""; flex:0 0 auto; width:6px; height:22px; border-radius:3px; background:var(--accent); margin-top:3px; }
.artread .prose h3{ font-size:18px; font-weight:800; color:var(--brown); margin:22px 0 8px; }
.artread .prose blockquote{ margin:22px 0; padding:16px 20px; background:#fbf1de; border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0; font-size:17px; font-style:italic; color:#4a3a22; }
.artread .prose ul,.artread .prose ol{ margin:14px 0; padding-left:22px; }
.artread .prose li{ margin:7px 0; }
.artread .prose a{ color:var(--accent); text-decoration:underline; }
.artread .prose table{ max-width:100%; }
.artcopyright{ background:#fbf1de; border:1px solid #ecd9b3; border-radius:10px; padding:12px 16px; margin:22px 0;
  font-size:13px; color:var(--brown-2); }
.artsources{ font-size:13px; color:var(--ink-soft); margin:18px 0; word-break:break-all; }
.artsources a{ color:var(--accent); }
/* tag: dùng lại .tagboxnews/.keytag (khớp mockup .tags) */
.tagboxnews{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:22px 0; padding-top:18px; border-top:1px solid var(--line); }
.tagboxnews .titledetail{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.tagboxnews .keytag{ font-size:12px; color:var(--accent); background:#f7ecd8; border-radius:999px; padding:4px 11px; transition:.15s; }
.tagboxnews .keytag:hover{ background:var(--accent); color:#fff; }
/* CTA banner (mockup .ctaban) */
.ctaban{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:24px 0;
  background:linear-gradient(135deg,#3a2610,#5a3a18); border-radius:14px; padding:18px 22px; color:#fff; }
.ctaban .ctaban-txt{ flex:1; min-width:220px; }
.ctaban .t{ font-weight:800; font-size:17px; color:#ffd58a; }
.ctaban .s{ font-size:13px; color:#e6d3b4; margin-top:2px; }
.ctaban .ctaban-btn{ margin-left:auto; background:linear-gradient(180deg,var(--accent-soft),var(--accent)); color:#fff !important;
  font-weight:700; font-size:14px; padding:11px 20px; border-radius:10px; white-space:nowrap; box-shadow:0 8px 16px rgba(223,134,13,.32); }
.ctaban .ctaban-btn:hover{ background:linear-gradient(180deg,var(--accent),#c9760a); }
/* điều hướng bài trước/sau */
.artnav{ display:flex; gap:14px; margin:24px 0; }
.artnav a{ flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); min-width:0; transition:.15s; }
.artnav a.next{ justify-content:flex-end; text-align:right; }
.artnav a:hover{ border-color:var(--accent); }
.artnav a i{ flex:0 0 auto; color:var(--accent); }
.artnav a span{ min-width:0; display:flex; flex-direction:column; }
.artnav a em{ font-style:normal; font-size:11.5px; color:var(--ink-soft); }
.artnav a b{ font-size:13.5px; color:var(--brown); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artread .comments{ margin-top:26px; }
.rel-news .rel-h i{ color:var(--accent); }
/* Tin cùng danh mục (TRANG XEM BÀI) — lưới thẻ 16:9, 4 cột full-width (như cũ) */
.rel-news .rcard{ text-align:left; }
.rel-news .rcard .rthumb{ aspect-ratio:16/9; }
.rel-news .rcard .rn{ font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rel-news .relgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:991px){ .rel-news .relgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .rel-news .relgrid{ grid-template-columns:minmax(0,1fr); } }

/* Featured TRANG DANH MỤC: 1 tin TO bên trái + 3 tin nhỏ bên phải */
.relnews4{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch; }
/* --- tin to --- */
.rn-big{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s,transform .15s; }
.rn-big:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.rn-big .rn-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.rn-big .rn-thumb img{ width:100%; height:100%; object-fit:cover; }
.rn-big .rn-body{ display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; flex:1; }
.rn-big .rn-title{ font-size:18px; font-weight:800; line-height:1.35; color:var(--brown);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rn-big .rn-sum{ font-size:13.5px; line-height:1.55; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* --- 3 tin nhỏ --- */
.rn-side{ display:flex; flex-direction:column; gap:12px; }
.rn-item{ display:grid; grid-template-columns:112px 1fr; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:box-shadow .15s,transform .15s; }
.rn-item:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.rn-ithumb{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.rn-ithumb img{ width:100%; height:100%; object-fit:cover; }
.rn-ibody{ display:flex; flex-direction:column; gap:6px; padding:8px 10px 8px 0; min-width:0; }
.rn-ititle{ font-size:14px; font-weight:700; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rn-date{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.rn-date i{ color:var(--accent); font-size:11px; }
.rel-news .rn-big .rn-title,.rel-news .rn-ititle{ transition:color .15s; }
.rn-big:hover .rn-title,.rn-item:hover .rn-ititle{ color:var(--accent); }
/* Featured đầu trang danh mục (.newsfeat): hero to hơn chút, có tóm tắt dài hơn */
.newsfeat{ margin-bottom:8px; }
.newsfeat .rn-big .rn-title{ font-size:22px; }
.newsfeat .rn-big .rn-sum{ -webkit-line-clamp:3; }
@media (max-width:767px){
  .relnews4{ grid-template-columns:1fr; gap:14px; }
  .rn-big .rn-title{ font-size:16px; }
  .newsfeat .rn-big .rn-title{ font-size:18px; }
}
@media (max-width:767px){ .artmeta .artshare{ margin-left:0; width:100%; } .artnav{ flex-direction:column; } }

/* ================= TRANG DANH MỤC TIN (news/cat.php — mockup news_list) ================= */
.pagehead.newshead{ overflow:visible; }
.newshead .eyebrow{ color:var(--accent); }
.newshead .eyebrow i{ margin-right:3px; }
.newshead h1.titlecat::after{ background:var(--accent); }
/* tabs danh mục con */
.newstabs{ display:flex; gap:9px; flex-wrap:wrap; padding:16px 0 8px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.newstabs .ntab{ font-size:13px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; transition:.15s; }
.newstabs .ntab:hover{ border-color:var(--accent); color:var(--accent); }
.newstabs .ntab.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* Featured (#news_top1): thẻ hero ảnh phủ tiêu đề */
#news_top1{ margin:0 0 8px; }
#news_top1 .news_top1_box{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); aspect-ratio:16/9; background:var(--paper-2); }
#news_top1 .news_top1_box img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
#news_top1 .news_top1_box:hover img{ transform:scale(1.04); }
#news_top1 .featured-cover{ position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(20,12,4,.85)); }
#news_top1 .top1_content{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:1; }
#news_top1 .top1_content h2{ color:#fff; font-size:18px; font-weight:800; line-height:1.32; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#news_top1 .top1_content .summary{ color:rgba(255,255,255,.85); font-size:13px; font-weight:400; line-height:1.5;
  margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#news_top1 .top1_mask{ position:absolute; inset:0; z-index:2; }
#news_top1 > .col-sm-6,#news_top1 > .col-sm-4{ margin-bottom:20px; }
.newslist .border_pink,#news_top1 + .border_pink{ display:none; }
/* .newslist: bài viết thẻ ngang (thumb absolute trái + nội dung phải) */
.newslist{ margin-top:4px; }
.newslist .newsitem{ position:relative; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm); padding:14px; margin-bottom:16px; min-height:152px; transition:box-shadow .18s,transform .18s; }
.newslist .newsitem:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.newslist .newsitem > a.hoverBorder{ position:absolute !important; left:14px; top:14px; width:210px; height:124px;
  margin:0 !important; float:none !important; border-radius:8px; overflow:hidden; display:block; background:var(--paper-2); }
.newslist .newsitem > a.hoverBorder img{ width:100%; height:100%; object-fit:cover; }
.newslist .newsitem h3{ margin:0 0 0 234px !important; padding:0 !important; }
.newslist .newsitem h3 a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:16px !important; font-weight:700 !important; color:var(--brown) !important; line-height:1.36 !important;
  text-align:left !important; padding:0 !important; white-space:normal !important; }
.newslist .newsitem:hover h3 a{ color:var(--accent) !important; }
.newslist .newsitem .datetime{ margin:8px 0 0 234px !important; font-size:12px !important; color:var(--ink-soft) !important; text-align:left !important; }
.newslist .newsitem > p:not(.datetime){ margin:8px 0 0 234px; font-size:13.5px; color:var(--ink-soft); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:600px){
  .newslist .newsitem{ min-height:0; }
  .newslist .newsitem > a.hoverBorder{ position:static !important; width:100%; height:auto; aspect-ratio:16/9; margin-bottom:12px !important; }
  .newslist .newsitem h3,.newslist .newsitem .datetime,.newslist .newsitem > p:not(.datetime){ margin-left:0 !important; }
}
/* trang tìm kiếm: thông báo không có kết quả */
.searchempty{ background:var(--card,#fff); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; padding:16px 18px; font-size:14px; color:var(--ink-soft); margin-top:10px; }
.searchempty i{ color:var(--accent); margin-right:6px; }

/* nút chia sẻ: ô vuông bo góc màu thương hiệu (như mockup) */
.detailhead .dh-share{ display:flex; gap:8px; align-items:center; }
.btn-share{ width:34px; height:34px; padding:0 !important; border:0 !important; border-radius:8px !important;
  display:inline-flex !important; align-items:center; justify-content:center; color:#fff !important; font-size:15px; transition:.15s; }
.btn-share:hover{ color:#fff !important; opacity:.9; transform:translateY(-1px); }
.btn-share-face{ background:#1877f2 !important; }
.btn-share-google{ background:#db4437 !important; }
.btn-share-twi{ background:#1da1f2 !important; }
.btn-share-pin{ background:#e60023 !important; }
.btn-share-link{ background:#0a66c2 !important; }
@media (max-width:767px){ .detailhead .dh-row{ align-items:flex-start; } }

@media (max-width:767px){
  .filterbar{ flex-direction:column; align-items:stretch; }
  /* cột dọc: flex-basis 240px của ô tìm sẽ thành CHIỀU CAO -> ép về auto kẻo ô tìm cao bất thường */
  .filterbar .filterbar-gcse{ flex:0 0 auto; min-width:0; width:100%; }
  .filterbar .filterbar-form{ flex-direction:column; align-items:stretch; }
  .filterbar .sel,.filterbar .sel select.form-control,.filterbar .btn-filter{ width:100%; }
}

/* ---------- Tables (rank Mỹ/Canada, học phí...) ---------- */
.table thead th,.table>thead>tr>th{
  background:var(--brown); color:#fff; border-color:var(--brown-2);
  border-bottom:2px solid var(--accent); }
.table-striped>tbody>tr:nth-of-type(odd){ background:#fcf8f0; }
.table>tbody>tr>td,.table>tbody>tr>th{ border-color:var(--line); }

/* ---------- Pagination (căn GIỮA + nút TO như mockup) ---------- */
.pagination{ display:flex !important; justify-content:center; flex-wrap:wrap; gap:7px;
  float:none !important; margin:28px 0 8px !important; padding-left:0; } /* bỏ pull-right của widget -> căn giữa */
.pagination>li>a,.pagination>li>span{ color:var(--accent); border-radius:10px !important; margin:0;
  border-color:var(--line); min-width:42px; height:42px; display:inline-flex; align-items:center;
  justify-content:center; padding:0 14px; font-size:15px; font-weight:600; }
.pagination>li>a:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }
.pagination>.active>a,.pagination>.active>span,
.pagination>.active>a:hover,.pagination>.active>a:focus{
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }

/* ---------- Footer: nâu trầm + layout theo demo ---------- */
#footer{ background-color:#2c1c0a !important;
  background-image:linear-gradient(180deg,#3a2610,#241608) !important; }
#footer .footerbg{ padding:42px 0 22px; }
.foot-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:start; }
.brand-lg{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-lg img{ height:54px; width:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.brand-lg-txt b{ display:block; color:#fff; font-weight:800; letter-spacing:.05em; font-size:18px; }
.brand-lg-txt > span{ display:block; color:#d8bd93; font-size:11px; letter-spacing:.05em; }
.foot-tag{ color:#dcc298; font-size:13.5px; margin:14px 0; max-width:40ch; line-height:1.55; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.10); color:#e9d8bd; transition:.15s; text-decoration:none; }
.foot-social a:hover{ background:var(--accent); color:#fff; }
.foot-contact h4{ margin:0 0 14px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.foot-contact .frow{ display:flex; gap:10px; margin-bottom:10px; font-size:14px; color:#e9d8bd; align-items:flex-start; }
.foot-contact .frow .fi{ color:var(--accent-soft); width:18px; text-align:center; flex:0 0 auto; margin-top:3px; }
.foot-contact .frow a{ color:#e9d8bd; }
.foot-contact .frow a:hover{ color:var(--accent-soft); }
.foot-cities{ border-top:1px solid rgba(255,255,255,.12); margin-top:26px; padding-top:16px;
  font-size:12.5px; color:#c6ac86; line-height:1.95; }
.foot-cities b{ color:#e9d8bd; }
.foot-cities a{ color:#c6ac86; }
.foot-cities a:hover{ color:var(--accent-soft); }
.themebt-footer{ background:#211307 !important; background-image:none !important;
  border-top:1px solid rgba(255,255,255,.08); }
.themebt-footer p{ color:#b99e78; }
.themebt-footer a{ color:#b99e78; }
@media (max-width:767px){ .foot-grid{ grid-template-columns:1fr; gap:24px; } }

/* ---------- LỘ TRÌNH (#howto): route-steps 4 vòng tròn (theo demo) ---------- */
#howto{ background:var(--paper) !important; background-image:none !important; padding:52px 0; }
#howto .sec-head{ margin-bottom:36px; } /* eyebrow/title -> .sec-head dùng chung */
.route-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; position:relative; }
.route-line{ position:absolute; left:12%; right:12%; top:34px; height:2px;
  background:repeating-linear-gradient(90deg,var(--line),var(--line) 7px,transparent 7px,transparent 14px); }
.step{ text-align:center; position:relative; transition:opacity .6s ease,transform .6s ease; }
a.step{ display:block; text-decoration:none; color:inherit; }        /* mỗi bước là link tới bài viết liên quan */
a.step:hover h4{ color:var(--accent); }
.step.reveal{ opacity:0; transform:translateY(16px); }
.step.reveal.in{ opacity:1; transform:none; }
.step .circle{ width:68px; height:68px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center;
  background:var(--card); border:2px solid #e6dbc7; color:var(--brown-2); font-size:24px; box-shadow:var(--shadow-sm);
  position:relative; z-index:1; animation:bob 3.4s ease-in-out infinite; transition:box-shadow .2s,border-color .2s; }
.step:nth-child(3) .circle{ animation-delay:.4s; }
.step:nth-child(4) .circle{ animation-delay:.8s; }
.step:nth-child(5) .circle{ animation-delay:1.2s; }
.step:hover .circle{ border-color:var(--accent); box-shadow:0 10px 22px rgba(223,134,13,.25); animation-play-state:paused; }
.step .k{ position:absolute; top:-6px; right:calc(50% - 44px); width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; z-index:2; }
.step h4{ margin:0 0 4px; font-size:15.5px; font-weight:700; color:var(--ink); }
.step p{ margin:0; font-size:13px; color:var(--ink-soft); }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (max-width:767px){ .route-steps{ grid-template-columns:repeat(2,1fr); gap:28px 16px; } .route-line{ display:none; } }
@media (prefers-reduced-motion:reduce){ .step .circle{ animation:none; } .step.reveal{ opacity:1; transform:none; } }

/* ---------- HỌC BỔNG GSK (.hocbong): nền kem + header eyebrow + thẻ tagline (theo demo) ---------- */
.hocbong{ background:var(--paper) !important; padding:50px 0 !important; }
/* eyebrow/title -> .sec-head dùng chung */
.hocbong .newsitem{ background:#fff; border:1px solid var(--line) !important; border-radius:var(--r) !important;
  box-shadow:var(--shadow-sm); padding:16px 18px; min-height:0; }
.hocbong .newsitem .tagline{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em;
  color:var(--accent); text-transform:uppercase; background:#f7ecd8; padding:3px 10px; border-radius:999px; margin-bottom:10px; }
.hocbong .newsitem h3{ font-size:16px; line-height:1.4; margin:0 0 8px; height:auto; }
.hocbong .newsitem h3 a{ color:var(--brown) !important; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden; }
.hocbong .newsitem p{ color:var(--ink-soft); font-size:13px; margin:0 0 10px; }
.hocbong .newsitem p a{ color:var(--ink-soft); }
.hocbong .newsitem > span{ color:var(--ink-soft); font-size:12.5px; }

/* ---------- Bỏ nền motif cũ (homeschool.png) khắp các khối .homeschool ---------- */
.homeschool{ background-image:none !important; }
.homeschool:not(.usschool):not(.catschool){ background-color:var(--paper-2) !important; }

/* ---------- Bảng Mỹ/Canada (.homeschool.usschool): title -> HEADER BẢNG (như demo) ---------- */
.homeschool.usschool{ background-image:none !important; background-color:var(--paper-2) !important; padding:44px 0 !important; }
/* tiêu đề trường thành thanh header nâu gắn liền bảng */
.homeschool.usschool .title{ background:var(--brown) !important; margin:0 !important; padding:13px 16px !important;
  border-radius:var(--r) var(--r) 0 0; border-bottom:2px solid var(--accent); font-size:16px !important; text-align:left; }
.homeschool.usschool .title,.homeschool.usschool .title a{ color:#fff !important; }
.homeschool.usschool .title::after{ display:none !important; }
.usschool .table{ background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r);
  overflow:hidden; margin-top:0; margin-bottom:22px; }
/* logo trường Mỹ/Canada: bóp nhỏ như demo (trước quá to) */
.usschool .table td img,.usschool .table .img-responsive{ max-height:46px !important; width:auto !important; display:inline-block; }
.usschool .table td{ vertical-align:middle; }
.usschool .table>tbody>tr>td,.usschool .table>tbody>tr>td a{ color:var(--ink) !important; }
.usschool .table>tbody>tr>th{ color:var(--accent) !important; background:transparent !important; font-variant-numeric:tabular-nums; }
.usschool .table>tbody>tr:nth-of-type(odd)>td,.usschool .table>tbody>tr:nth-of-type(odd)>th{ background:#fcf8f0 !important; }

/* ---------- Tin chi tiết: bỏ badge sai brand + summary + hr comment ---------- */
.summarynews::before{ display:none !important; } /* xoá badge tím "DuHocToanQuoc.Com" (sai brand, sót template gốc) */
.summarynews{ color:var(--brown); border-left:3px solid var(--accent); padding-left:12px; }
hr.border_pink{ border:0 !important; border-top:2px solid var(--line) !important; margin:24px 0 16px; }
#commentbox .blue,.comment .blue{ color:var(--accent) !important; }

/* ---------- Breadcrumb (theo mockup: nhỏ, link nhạt, mục hiện tại cam+đậm, sep mờ) ---------- */
.breadcrumb{ background:transparent; padding:14px 0 0; margin-bottom:0; font-size:12.5px; }
.breadcrumb>li>a{ color:var(--ink-soft); }
.breadcrumb>li>a:hover{ color:var(--accent); }
.breadcrumb>.active{ color:var(--accent); font-weight:600; }
.breadcrumb>li+li:before{ color:var(--ink-soft); opacity:.5; padding:0 8px; }

/* ---------- Đối tác (#partner): logo thành thẻ card (theo demo, chỉ CSS) ---------- */
#partner{ background:var(--paper); padding:44px 0; }
#partner .title{ text-align:center; position:relative; padding-bottom:16px; margin:0 0 26px; }
#partner .title::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:58px; height:3px; border-radius:3px; background:var(--accent); }
#partner .item{ background:#fff; border:1px solid var(--line); border-radius:12px; height:92px; margin:0 8px;
  display:flex; align-items:center; justify-content:center; padding:12px; box-shadow:var(--shadow-sm); }
#partner .item img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }

/* ---------- Nút liên hệ nổi (.contactfab) — ĐỔI TÊN tránh trùng FontAwesome .fab (brands) ---------- */
.contactfab{ position:fixed; right:20px; bottom:22px; display:flex; flex-direction:column; gap:16px;
  align-items:flex-end; z-index:60; }
.contactfab a{ display:flex; align-items:center; justify-content:center; height:50px; padding:0 13px;
  border-radius:999px; color:#fff !important; font-weight:700; font-size:13px;
  box-shadow:0 6px 16px rgba(0,0,0,.28); max-width:50px; overflow:hidden; white-space:nowrap;
  text-decoration:none; transition:max-width .28s ease; }
.contactfab a .fi{ flex:0 0 auto; width:24px; font-size:20px; text-align:center; line-height:1; }
.contactfab a span{ max-width:0; opacity:0; overflow:hidden; transition:max-width .28s ease, opacity .2s ease; }
.contactfab a:hover,.contactfab a:focus{ max-width:230px; justify-content:flex-start; color:#fff !important; text-decoration:none; }
.contactfab a:hover span,.contactfab a:focus span{ max-width:180px; opacity:1; margin-left:10px; }
.contactfab .zalo{ background:#0068ff; animation:ctpulse-b 2.6s infinite; }
.contactfab .mess{ background:#0084ff; animation:ctpulse-b 2.6s infinite .8s; }
.contactfab .call{ background:var(--accent); animation:ctpulse-o 2.2s infinite; }
@keyframes ctpulse-o{ 0%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 0 rgba(223,134,13,.5); }
  70%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 12px rgba(223,134,13,0); }
  100%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 0 rgba(223,134,13,0); } }
@keyframes ctpulse-b{ 0%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 0 rgba(0,120,255,.45); }
  70%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 10px rgba(0,120,255,0); }
  100%{ box-shadow:0 6px 16px rgba(0,0,0,.28),0 0 0 0 rgba(0,120,255,0); } }
@media (prefers-reduced-motion:reduce){ .contactfab .zalo,.contactfab .mess,.contactfab .call{ animation:none; } }

/* ---------- Typography: system font stack như mockup (thay Tahoma body + web-font TinTuc cũ) ---------- */
:root{ --font-sys:"Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif; }
body{ font-family:var(--font-sys); }
.titlecat,.title,.subtitle a,.titlecat b,.title b,
h1,h2,h3,h4,h5,h6{ font-family:var(--font-sys) !important; }
.pagehead h1.titlecat{ text-transform:none; } /* mockup: tiêu đề chữ thường, không IN HOA */

/* ---------- Google Programmable Search (CSE): ép GỌN 1 dòng ---------- */
.gsc-control-cse{ padding:0 !important; border:0 !important; background:transparent !important; }
/* bỏ margin 0 24px của form Google (đẩy ô tìm lùi vào trong) + để form tràn hết ô */
form.gsc-search-box,.gsc-search-box{ margin:0 !important; max-width:none !important; }
table.gsc-search-box{ margin-bottom:0 !important; }
.gsc-input-box{ height:42px !important; border-radius:10px !important; border:1.5px solid var(--line) !important;
  padding:0 12px 0 36px !important; display:flex; align-items:center; background:#fff !important; position:relative; }
/* icon kính lúp RIÊNG bên trái (bỏ icon nền của Google để chữ gõ không đè lên icon) */
.gsc-input-box::before{ content:""; position:absolute; left:13px; top:50%; width:16px; height:16px;
  transform:translateY(-50%); opacity:.5; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6153' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.gsc-input-box .gsib_a{ padding:0 !important; background-image:none !important; }
.gsc-input-box td.gsc-input,table.gsc-input .gsc-input{ padding:0 !important; background:none !important; }
input.gsc-input{ font-family:var(--font-sys) !important; font-size:14px !important; color:var(--ink) !important;
  padding:0 !important; text-indent:0 !important; background:none !important; height:22px !important; }
.gsib_b{ display:flex !important; align-items:center; }
/* mockup KHÔNG có nút submit trong ô tìm (Enter/gợi ý để tìm) -> ẩn nút kính lúp cam của Google */
.gsc-search-box .gsc-search-button,.gsc-search-button-v2{ display:none !important; }
.gsc-search-button-v2 svg{ fill:#fff !important; }
.gsst_a .gscb_a{ color:var(--ink-soft) !important; }

/* ---------- Responsive nhỏ ---------- */
@media (max-width:767px){
  .table{ font-size:13px; }
}

/* ==================== responsive.css (gộp từ footer) ==================== */
@media (max-width: 1199px) {
    #menu > ul > li > a{
        padding: 8px 0px;
    }
}
@media (max-width: 991px) {
    #menu .menucategory > ul {
        position: relative;
        width: 100%;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .searchform, .translation_buttons{
        margin-bottom: 5px;
        margin-top: 0;
    }
    .searchform {
        float: none !important;
        margin-left: -15px;
    }
    #searchbtn{
        display: none;
    }
    .searchform > .dropdown-menu {
        position: relative;
        display: block;
        float: none;
        padding: 0;
    }
    .searchform .gsc-search-button-v2{
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .navbar-toggle{
        display: block;
    }
    .formcontent{
        padding-right: 20px;
    }
    .navbar-header{
        float: none;
    }
    .gksalumni{
        margin: 10px 10px 30px;
        padding: 10px 10px 10px 30px;
    }
    .gksalumni img{
        float: left;
        height: 57px;
        -webkit-border-radius:0px;
        -moz-border-radius:0px;
        border-radius: 0px;
    }
    .gksalumni hr{
        display: none;
    }
}
@media (max-width: 767px) {
    .searchform {
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 10px;
    }
    .newsitem .hoverimg_block{
        width: 100%;
        float: none;
    }
    .horizontal_1 .bigbox{
        border-right: none;
    }
    #news_top1 .img-responsive,
    #news_top1 .top1_content .summary,
    .vertical_1 .bigbox .img-responsive,
    .vertical_1 .bigbox p,
    .vertical_1 .mdbox li .img-responsive,
    .horizontal_1 .bigbox p,
    .horizontal_1 .bigbox .img-responsive,
    .horizontal_1 .mdbox li .img-responsive,
    .horizontal_2 .bigbox p,
    .horizontal_2 .bigbox .img-responsive,
    .horizontal_2 .mdbox li .img-responsive,
    .vertical_1 .mdbox li h5 a,
    .horizontal_1 .mdbox li h5 a,
    .horizontal_2 .mdbox li h5 a,
    #why_chose_us .img-responsive,
    .newsitem .img-responsive,
    .newseven_home .newsitem.itembig .img-responsive{
        height: auto;
    }
    #statistical{
        margin-top: 0;
        background-color: #3c8dbc;
        padding: 30px 0;
    }
    #statistical .col-sm-6{
        margin-bottom: 15px;
    }
    .newseven_home .col-md-6:first-child .newsitem{
        border-bottom: 1px solid #ddd;
    }
    .owl-controls {
        bottom: 0;
    }
}
@media (max-width: 479px) {
    #news_top1 .top1_content {
        bottom: -53px;
    }
    .horizontal_2 .mdbox li {
        float: left;
        width: 100%;
    }
    .horizontal_2 .bigbox .hoverBorder {
        float: none;
        margin-right: 0px;
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (min-width: 480px) {
}
@media (min-width: 768px) {
    .homeschool .newsitem .img-responsive{
        height: 240px;
    }
    /*.newsitem p {
        overflow: hidden;
        max-height: 63px;
    }*/
}
@media (min-width: 992px) {

    #news_top1 .news_top1_box:hover .top1_content{
        bottom: 0;
    }
    .banner.fixed {
        z-index: 9999;
        position: fixed;
        transition: top .5s;
        top: -80px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .banner.scroll-top.fixed {
        top: 0px;
    }

}
@media (min-width: 768px) and (max-width: 991px) {

}
@media (min-width: 992px) and (max-width: 1199px) {

}
@media (min-width: 1200px) {

}
/* menu */
#menuMobile .modal-dialog {
    margin: 0;
    width: 300px;
}
#menuMobile .modal-content {
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
}
#menuMobile .modal-body {
    padding: 0;
    background-color: #333;
}
#menuMobile ul {
    margin-bottom: 0;
}
#menuMobile .menucategory {
    display: none;
}
#menuMobile li a {
    display: block;
    color: #fff;
    border: 1px solid #484848;
    padding: 10px 10px 10px 20px;
    font-weight: bold;
    font-size: 15px;
    background-color: #555;
    text-transform: capitalize;
}
#menuMobile li a i {
    font-size: 20px;
    margin-right: 7px;
}
#menuMobile li.active a,
#menuMobile li a:hover,
#menuMobile li a:focus{
    background-color: #666;
}
#menuMobile .close {
    background-color: #111;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    padding: 8px 12px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}
#menuMobile .translation_buttons {
    background-color: #555;
    float: none !important;
    margin: 0;
    padding: 10px;
}
/* ==================== ads.css (gộp từ footer) ==================== */
.adswidget-footer{
    margin-top: 50px;
}

.adswidget-footer .image-container, .adswidget-footer .mgheader {
    display: none !important;
}

.ads_home_top_right > div > img,
.ads_home_top_right > div > a > img,
.ads_right  > div > img,
.ads_right  > div > a > img,
.ads_hot_bottom_fly > div > img,
.ads_hot_bottom_fly > div > a > img
{
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    margin-bottom: 10px;
}
.banner_ads > div,
.ads_topcat > div{
    margin-bottom: 10px;
}
.ads_hot_bottom_fly > div{
    margin-top: 15px;
}
.ads_hot_bottom_fly{
    position: relative;
}
.ads_hot_bottom_fly > div {
    z-index: 101;
}
.ads_fixed {
    position: fixed;
}
.ads_left_fixed, .ads_right_fixed {
    top: 5px;
    z-index: 101;
}
.ads_left_fixed {
    right: 50%;
}
.ads_right_fixed {
    left: 50%;
}
.ads_popup_bottom {
    bottom: 0;
    display: none;
    right: 0;
    z-index: 102;
}
.ads_popup_bottom .close {
    background-color: #9b011d;
    border-radius: 7px;
    box-shadow: 0 0 3px #666;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    left: -12px;
    padding: 0 6px;
    position: absolute;
    top: -10px;
    opacity: 1;
}
.ads_popup .close {
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 100;
}

/*css cho quang cao adnow*/
.ads_right * {
    max-width: 100%;
}
.ads_right td {
    width: auto !important;
}
.ads_right img,
.ads_down_content .SC_TBlock .SC_TBlock_187022_td td,
.ads_down_content .SC_TBlock .SC_TBlock_187022_td img {
    height: auto !important;
    min-width: auto !important;
    width: auto !important;
}
.ads_down_content .SC_TBlock .SC_TBlock_187022_td td, .ads_down_content .SC_TBlock .SC_TBlock_187022_td img {
    width: 100% !important;
}
.ads_down_content .SC_TBlock .SC_TBlock_187022_td img{
    height: 150px !important;
}
.ads_down_content .SC_TBlock .SC_TBlock_187022_td {
    width: 25%;
}
@media (max-width: 767px) {
    .ads_down_content .SC_TBlock .SC_TBlock_187022_td {
        width: 50%;
    }
    .ads_down_content .SC_TBlock .SC_TBlock_187022_td:nth-of-type(3),
    .ads_down_content .SC_TBlock .SC_TBlock_187022_td:nth-of-type(4) {
        display: none;
    }
}
@media (max-width: 991px) {

}
@media (max-width: 1199px) {

}

@media (min-width: 768px) {
    .ads_left_fixed {
        margin-right: 375px;
    }
    .ads_right_fixed {
        margin-left: 375px;
    }
}
@media (min-width: 992px) {
    .ads_left_fixed {
        margin-right: 485px;
    }
    .ads_right_fixed {
        margin-left: 485px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

}
@media (min-width: 992px) and (max-width: 1199px) {

}
@media (min-width: 1200px) {
    .ads_left_fixed {
        margin-right: 585px;
    }
    .ads_right_fixed {
        margin-left: 585px;
    }
}

.adswidget-banner {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    margin-top: 5px;
}
/* ==================== googletranslate.css (gộp từ footer) ==================== */
body {
    position: inherit !important;
}
.goog-te-banner-frame, .goog-gt-tt, #google_translate_element {
    bottom: 0;
    display: none !important;
    position: fixed !important;
    top: auto !important;
}
#google_translate_element {
    float: right;
    height: 28px;
    overflow: hidden;
    width: 145px;
}
.goog-te-gadget-simple .goog-te-menu-value span {
    color: #333333;
    text-decoration: none;
}

/* ==================== HEADER TOOLS / MENU (chuyển từ <style> inline trong menu.php để min) ==================== */
		/* thu tu trai->phai: tim kiem, co, user; can giua doc khop menu (navbar cao 65px); gian deu; sat le phai */
		.header-tools{ float:right; display:flex; align-items:center; gap:16px; height:65px; margin-right:-2px; }
		.header-tools .dropdown-menu{ right:0; left:auto; }
		/* reset margin lech cu tu style.css (thiet ke cho layout float cu) */
		.header-tools .searchform{ margin:0; }
		.header-tools .translation_buttons{ margin-top:0; }
		.langswitch-toggle, .usertop-toggle, .searchform > .fa-search{
			display:inline-flex; align-items:center; cursor:pointer; color:#fff; padding:6px 0; line-height:1; }
		.langswitch-toggle:hover, .langswitch-toggle:focus,
		.usertop-toggle:hover, .usertop-toggle:focus{ text-decoration:none; color:#fff; }
		.langswitch-toggle .fa-caret-down, .usertop-toggle .fa-caret-down{ color:#fff; opacity:.9; margin-left:5px; font-size:13px; transition:color .15s; }
		/* mac dinh trang, chi vao (hover) hoac dang mo -> cam */
		.langswitch-toggle:hover .fa-caret-down, .usertop-toggle:hover .fa-caret-down,
		.langswitch.open .fa-caret-down, .usertop.open .fa-caret-down{ color:#e29218; opacity:1; }
		/* ngon ngu */
		.langswitch-toggle .langcur-img{ width:26px; height:auto; border-radius:3px; box-shadow:0 0 2px rgba(0,0,0,.4); }
		.langswitch .translation_buttons{ min-width:160px; padding:6px 0; }
		.langswitch .btn-flag-item{ display:flex; align-items:center; gap:10px; padding:7px 16px; color:#333; white-space:nowrap; }
		.langswitch .btn-flag-item:hover{ background:#f5f5f5; text-decoration:none; }
		.langswitch .btn-flag-item img{ width:22px; height:auto; border-radius:2px; box-shadow:0 0 1px rgba(0,0,0,.4); }
		/* tim kiem */
		.searchform > .fa-search{ font-size:18px; padding:6px 2px; }
		.searchform .dropdown-menu{ min-width:290px; padding:10px; }
		/* user: avatar tron nen trang, icon cam -> de thay tren nen cam */
		.usertop-avatar{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
			border-radius:50%; background:#fff; color:#e29218; font-size:17px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
		.usertop-toggle, .usertop-guest{ display:inline-flex; align-items:center; cursor:pointer; }
		.usertop-guest:hover, .usertop-guest:focus, .usertop-toggle:hover, .usertop-toggle:focus{ text-decoration:none; }
		.usertop-guest:hover .usertop-avatar, .usertop-toggle:hover .usertop-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,.6); }
		.usertop-menu{ min-width:230px; padding:6px 0; }
		.usertop-hello{ padding:9px 16px 7px; color:#333; border-bottom:1px solid #eee; }
		.usertop-menu .divider{ margin:2px 0 6px; } /* keo 2 gach sat vao nhau */
		.usertop-name{ display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; color:#e29218; }
		.usertop-menu > li > a{ display:block; padding:9px 16px; color:#333; }
		.usertop-menu > li > a:hover{ background:#f5f5f5; text-decoration:none; }
		.usertop-menu > li > a i{ width:18px; text-align:center; margin-right:8px; color:#e29218; }

		/* ===== Tablet + Mobile (<=991px): menu DOC; cong cu (co | tim kiem | user) chung 1 HANG, gian cach ===== */
		@media (max-width:991px){
			/* KHONG cho navbar cuon: o tim kiem/user la position:absolute, neu cha overflow:auto (Bootstrap .in)
			   thi bi sinh THANH TRUOT va o tim kiem nam duoi vung cuon -> khong thay ngay. Ep overflow visible. */
			#menu.navbar-collapse, #menu.navbar-collapse.in, #menu.navbar-collapse.collapsing{
				overflow:visible !important; max-height:none !important; }
			/* menu: bo float -> xep doc */
			#menu > ul{ float:none; margin:0; }
			#menu > ul > li{ float:none; display:block; }
			#menu > ul > li > a{ padding:11px 15px; }

			/* 1 hang: co (trai) | tim kiem (giua) | user (phai); can trai/phai bang menu (15px) */
			.header-tools{ float:none; clear:both; width:100%; height:auto; position:relative;
				display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:8px;
				padding:12px 15px; margin-top:2px; border-top:1px solid rgba(255,255,255,.25); }

			/* NGON NGU: co dang anh tron (mep trai anh = mep chu menu); cai dang chon co vien trang */
			.langswitch{ display:flex; }
			.langswitch .langswitch-toggle{ display:none; }
			.langswitch .translation_buttons{ display:flex !important; position:static; float:none;
				gap:14px; background:transparent; border:none; box-shadow:none; min-width:0; padding:0; margin:0; }
			.langswitch .btn-flag-item{ padding:0; border:0; background:none; opacity:.6; line-height:0; }
			.langswitch .btn-flag-item.active{ opacity:1; }
			.langswitch .btn-flag-item img{ width:30px; height:auto; display:block; border-radius:3px; box-shadow:0 0 1px rgba(0,0,0,.5); }
			.langswitch .btn-flag-item.active img{ box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4); }
			.langswitch .btn-flag-item span{ display:none; }

			/* TIM KIEM: icon; bam -> o Google hien full-width ngay duoi hang cong cu */
			.header-tools .searchform{ position:static; width:auto; }
			.header-tools #searchbtn{ display:inline-flex !important; color:#fff; font-size:22px; padding:2px; }
			.header-tools .searchform > .dropdown-menu{ position:absolute !important; display:none;
				left:15px; right:15px; top:100%; margin-top:2px; min-width:0; max-width:none; width:auto;
				box-shadow:0 6px 16px rgba(0,0,0,.3); border:1px solid #ddd; z-index:300; }
			.header-tools .searchform.open > .dropdown-menu{ display:block; }

			/* USER: icon tren hang. Guest -> mo modal. Da dang nhap: bam avatar -> panel xo xuong
			   full-width ngay duoi hang (Chao / Thong tin ca nhan / Dang xuat) - giong mo submenu */
			.usertop-wrap{ width:auto; }
			.usertop-avatar{ width:36px; height:36px; }
			.header-tools .usertop{ position:static; }
			.header-tools .usertop .usertop-menu{ position:absolute !important; left:15px; right:15px; top:100%;
				margin-top:2px; min-width:0; width:auto; max-width:none; z-index:300;
				box-shadow:0 6px 16px rgba(0,0,0,.3); border:1px solid #ddd; }
		}
		/* Tablet (768-991): cho hamburger dong/mo menu (mac dinh Bootstrap ep hien menu) */
		@media (min-width:768px) and (max-width:991px){
			#menu.navbar-collapse.collapse:not(.in){ display:none !important; }
			#menu.navbar-collapse.collapse.in{ display:block !important; }
		}