/*!
 * UMT Style v1.0 (https://www.umt.edu.vn/)
 * Copyright 2024
 * Author: Chainity
 * Page: Homepage
 */

 /* Reset */

 /* Variable */
 :root {
   --umt-red: #F03838;
   --umt-blue: #002D74;
   --umt-cyan: #35C1F2;
}
a, a:hover {
   color: var(--umt-blue);
   text-decoration: none;
}
b,
strong {
  font-weight: bold !important;
}
.menu-panel {
   position: fixed;
   left: -100%;
   z-index: 9;
   width: 100%;
   height: 100%;
   /* max-height: calc(100vh - 60px); */
   overflow: auto;
   padding-bottom: 40px;
   background-color: #1E2456 !important;
   opacity: 0;
   transition-property: opacity;
   transition-duration: 0.05s;
   
}
.menu-panel.active {
   top: 0;
   left: 0px;
   opacity: 1;
   transition-property: opacity;
   transition-delay: 0.05s;
}
.menu-panel a {
   text-decoration: unset;
}
.menu_top {
   display: flex;
   justify-content: end;
   height: 70px;
}
.menu_lang ul li ul.list_lang {
   display: none;
}
.menu_lang ul li {
   background-color: #F03838;
   width: 70px;
   height: 70px;
   justify-content: center;
   align-items: center;
   display: flex;
   text-transform: uppercase;
   text-decoration: none;
}
.menu-panel .menu_lang ul li a {
   font-size: 18px;
   font-weight: normal; /* 600 */
   color: #fff;
}
.menu-panel .top_nav{
   list-style: none;
   padding: 0;
}
.menu-panel .menu_top a.btn.bg-blue {
   display: flex;
   align-items: center;
   margin-left: 1px;
   padding: 0 20px;
   border: none;
   border-radius: 0;
   color: #fff;
   text-align: center;
}
.menu-panel .menu_top .btn_close_menu a.btn.bg-blue {
   display: flex;
   justify-content: center;
   height: 100%;
   background: var(--umt-blue) !important;
}
.menu-panel .menu_top span.mdi.mdi-magnify {
   font-size: 30px;
   margin-right: 5px;
}
.menu-panel .menu_top .btn_close_menu .btn .mdi {
   font-size: 1.5rem;
   margin-right: 5px;
}
.header-searching-form {
   display: none;
   position: absolute;
   right: 0;
   width: 100%;
}
.header-searching-form.active {
   display: block;
}
.header-searching-form input.form-control {
   border: 1px solid var(--umt-blue);
}
.header-searching-form input.form-control:focus {
   box-shadow: none;
}
.btn_close_menu {
   width: 70px;
   height:70px;
}
.menu_top_image {
   margin-bottom: 70px;
   margin-top: 50px;
}
.menu_bottom {
   padding-left: 115px;
   width: 40%;
   height: 100%;
   background-color: #002D74;
   position: absolute;
   top: 0;
}
.menu_bottom .menu-item.active > a {
   border-bottom: 4px solid var(--umt-red) !important;
}
.menu_bottom .menu-item:hover > a, .menu_bottom .sub-menu-item:hover > a {
   border-bottom: 1px solid var(--umt-red);

}
.menu_bottom .menu-item .sub-menu {
   display: none;
}
.menu_bottom .menu-item.active .sub-menu {
   display: block;
}
.menu_bottom ul li ul.sub-menu a {
   font-weight: bold; /* 800 */
}
.menu_bottom ul.sub-menu {
   position: absolute;
   list-style: none;
   left: 120%;
   top: 201px;
   width: 100%;
}
.menu-panel.active .menu_bottom ul.sub-menu.active {
   visibility: visible;
}
.menu-panel.active .menu_bottom ul.top_nav > li {
   margin-bottom: 36px;
}
.menu-panel.active .menu_bottom > ul.top_nav > li > a {
   color: #fff;
   font-size: 36px;
   line-height: 36px;
}
.menu-panel.active .menu_bottom > ul.top_nav > li > ul.sub-menu {

}
.menu-panel.active .menu_bottom > ul.top_nav > li > ul.sub-menu li {
   margin-bottom: 24px;
}
.menu-panel.active .menu_bottom > ul.top_nav > li > ul.sub-menu a {
   color: #fff;
   font-size: 24px;
   line-height: 24px;
}



/* Fonts Face */
/* @font-face {
   font-family: 'Norms';
   src: url('../fonts/TTNormsPro-Black.eot');
   src:url("../fonts/TTNormsPro-Black.eot") format("embedded-opentype"),
        url("../fonts/TTNormsPro-Black.woff2") format("woff2"),
        url("../fonts/TTNormsPro-Black.woff") format("woff"),
        url("../fonts/TTNormsPro-Black.ttf") format("truetype");
   font-weight: 900;
}
@font-face {
   font-family: 'Norms';
   src: url('../fonts/TTNormsPro-BlackItalic.eot');
   src:url("../fonts/TTNormsPro-BlackItalic.eot") format("embedded-opentype"),
        url("../fonts/TTNormsPro-BlackItalic.woff2") format("woff2"),
        url("../fonts/TTNormsPro-BlackItalic.woff") format("woff"),
        url("../fonts/TTNormsPro-BlackItalic.ttf") format("truetype");
   font-weight: 900;
   font-style: italic;
} */

/* Fonts Face New */
@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-Regular.ttf');
    font-weight: 300; /* lighter  */
    font-style: normal;
}
@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-Normal.ttf');
    font-weight: 500; /* normal  */
    font-style: normal;
}
@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-NormalItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-Bold.ttf');
    font-weight: 700;  /* bold */
    font-style: normal;
}
@font-face {
    font-family: 'NormsPro';
    src: url('../fonts/original/TTNormsPro-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

 /* General */
 body, h1, h2, h3, h4, h5, h6, p, a, div {
    font-family: "Norms", Arial, Helvetica, sans-serif;
    font-family: "NormsPro", Arial, Helvetica, sans-serif;
 }
 body {
   font-size: 18px;
 }
 h2.title {
   font-weight: bold; /* 700 */
   font-size: 40px;
 }
 .responsive-img {
   max-width: 100%;
 }
 .pr-50 {
   padding-right: 50px;
 }
 .pb-100 {
   padding-bottom: 100px;
 }
 .title {
   text-align: center;
   color: var(--umt-blue);
   text-transform: uppercase;
   margin-top: 60px;
   margin-bottom: 60px;
 }
 .background-object {
   position: absolute;
   bottom: 0;
 }

 /* Color */
 .bg-red {
   background-color: var(--umt-red);
 }
 .bg-blue {
   background-color: var(--umt-blue);
 }
 .bg-cyan {
   background-color: var(--umt-cyan);
 }

 /* Top header */
 .top-header {
   width: 100%;
   justify-content: space-between;
   background: var(--umt-blue);
 }
 .top-header-start {
   padding: 0;
   padding-left: 66px;
 }
 img.top-logo {
   height: 40px;
   margin-top: -10px;
 }
 .top-header-end {
   position: relative;
 }
 .top-header-end .btn {
   border: none;
   border-radius: 0;
   color: #fff;
   height: 70px;
   text-align: center;
   display: flex;
   padding: 0 20px;
   align-items: center;
   margin-left: 1px;
 }
 .top-header-end .btn .mdi {
   font-size: 1.5rem;
   margin-right: 5px;
 }
 .top-header-end .btn.bg-red {
    font-weight: bold;
 }
 .top-header-end .btn.bg-red:hover {
   background-color:  var(--umt-red);
 }
 .top-header-end .btn.bg-blue:hover {
   background-color:  var(--umt-blue);
 }

 /* Section */
 .umt-section {
    padding-top: 20px;
    padding-bottom: 20px;
 }

 /* Top Big Banner */
 .top-big-banner {
    width: 100%;
    padding: 0;
 }
 .banner-tagline {
    position: absolute;
    width: 100%;
    margin: 10% auto 0;
    font-weight: bold; /* 700 */
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: var(--umt-blue);
    z-index: 1;
}
 .top-big-banner img {
   
   
}


/* Video section */
.video-section {
   position: relative;
   padding: 120px 0;
}
.video-container {
   display: inline-block;
   padding: 12px;
   position: relative;
}
.video-container .blue-square {
   width: 120px;
   height: 120px;
   background-color: var(--umt-blue);
   position: absolute;
   right: 0;
   top: 0;
   z-index: 0;
}
.video-container .red-square {
   width: 120px;
   height: 120px;
   background-color: var(--umt-red);
   position: absolute;
   bottom: 7px;
   left: 0;
   z-index: 0;
}
.video-container iframe {
   position: relative;
   max-width: 100%;
   z-index: 2;
}

/* Big Banner */
/*.big-banner {
   background: url('../images/toa-nha-dang-cap.jpg') no-repeat;
   background-size: cover;
}*/

/* Apply Seciton */
.apply-section .apply-item {
   margin-bottom: 60px;
   background: var(--umt-blue);
}
.apply-section .apply-item .apply-text {
   padding: 30px;
}
.apply-section .apply-item .apply-text h3 {
   margin: 15px 0;
   line-height: 1.3;
   font-size: 1.25rem;
   font-weight: bold;
   color: white;
   text-align: left;
}
.apply-section .apply-item .apply-text p {
   color: white;
}

/* Category List */
.category-list .is-desktop {
   display: flex;
}
.category-list .is-mobile {
   display: none;
}
.category-list {
    position: relative;
    background: #00358b;
    background-size: cover;
    padding-top: 25px;
    padding-bottom: 60px;
}
.category-list:after {
    position: absolute;
    bottom: -8px;
    right: 0;
    content: url('../images/group-category-icon.png');
}
.category-list a {
   color: white;
}
.category-title {
   color: #fff;
   text-transform: uppercase;
   font-weight: bold; /* 700 */
   font-size: 20px;
   margin-top: 20px;
   padding: 0 15px;
}
.category-item img {
   height: 150px;
   width: auto;
}
.category-feature .category-title {
   background: linear-gradient(270deg, rgba(18, 97, 179, 0) 10.19%, #1261B3 51.09%, rgba(18, 97, 179, 0) 94.82%);
   font-weight: bold; /* 700 */
   font-size: 32px;
   line-height: 64px;
   margin-top: 25px;   
}
.category-feature img {
   width: 100%;
   height: auto;
}
.category-border {
   border: 1px solid #FFF;
   width: 80%;
   margin: 15px auto;
}

/* Training Section */
#TrainingSection.training-section > div:first-child .training-detail > img {
    right: 0;
}
#TrainingSection.training-section > div:last-child .training-detail > img {
    left: 0;
}
.training-detail {
   position: relative;
   padding: 80px 100px;
}
.training-detail a {
   text-decoration: none;
   color: inherit;
}
.training-detail h3 {
   text-transform: uppercase;
   font-size: 28px;
   font-weight: bold; /* 700 */
   line-height: 36px;
   color: var(--umt-blue);
   margin-bottom: 30px;
}
.training-detail p {
   font-size: 18px;
   font-weight: normal; /* 400 */
   line-height: 23px;
}

/* Buttons */
.buttons-section {
    padding-bottom: 60px;
}
.buttons-section .umt-btn {
   padding: 15px;
   margin-right: 40px;
   font-size: 28px;
   font-weight: bold; /* 700 */
   color: #fff;
   text-transform: uppercase;
   border-radius: 15px;
}
.buttons-section .umt-btn:nth-child(1){
   background-color: var(--umt-red);
}
.buttons-section .umt-btn:nth-child(2){
    background-color: var(--umt-cyan);
}
.buttons-section .umt-btn:nth-child(3){
    background-color: var(--umt-blue);
}

/* News Section */
.home-news-section {
   padding-bottom: 60px;
}
.news-section-compact .training-detail {
    padding-right: 0;
}
.news-section-compact .training-detail.order-md-first {
    padding-left: 0;
    padding-right: 80px;
}
.news-section-compact .view-more {
    display: block;
    width: fit-content;
    margin: 30px 0;
    font-weight: bold;
}
#AdmissionNewsSection.news-section-compact .view-more {
    margin-bottom: 60px;
}
.news-section {
   background-color: #F8F9FA;
}
.news-section .title {
   text-align: left;
}
.news-section .news-time {
   display: flex;
   margin-top: 4px;
   margin-bottom: 15px;
   color: #444444;
   font-size: 0.8rem;
}
.news-section .news-time img {
   margin-right: 8px;
}
.news-section .news-summary {
   
}
.news-feature {
   background-color: #F5F5F5;
}
.news-feature .news-highlight {
    margin: 30px 0 15px;
}
.news-feature h2, .news-feature h3 {
    font-weight: bold;
    font-size: 18px;
   line-height: 24px;
   color: var(--umt-blue);
}
.news-item {
   display: flex;
   gap: 0 20px;
   padding: 25px 0;
}
.news-item:first-of-type {
   padding-top: 0;
}
.news-item:last-of-type {
   border-bottom: none;
}
.news-feature:hover a, .news-item:hover a {
   text-decoration: underline;
}
.news-feature a, .news-item a {
   color: var(--umt-blue);
   text-decoration: none;
}
.news-item > a img {
   min-width: 180px;
}
.news-item h4 {
   font-size: 17px;
   font-weight: bold; /* 700 */
   line-height: 24px;
   color: var(--umt-blue);
}
.news-section.news-section-default .news-feature {
    margin-bottom: 30px;
}
.news-section.news-section-default .news-feature .news-summary p {
    margin-bottom: 0;
}
.news-section.news-section-hot .news-list .news-item,
.news-section.news-section-default .news-list .news-item {
    padding: 12px 0;
}
.news-section.news-section-hot .news-list .news-item:first-of-type,
.news-section.news-section-default .news-list .news-item:first-of-type {
    padding-top: 0;
}
.news-section.news-section-hot .news-list .news-item a img {
    max-width: 240px !important;
    width: 240px;
}
.news-section.new-section-default {

}
.news-section.news-section-default .news-list .news-item a img {
    max-width: 240px !important;
    width: 240px;
}

/* Footer */
.footer {
   padding: 35px 0 15px;
   background-color: var(--umt-blue);
   color: #fff;
}
.footer .pb-footer {
    padding-bottom: 50px;
}
.footer .logo-footer-desktop {
    max-width: 320px;
}
.footer p {
   margin-bottom: 0;
}
.footer a {
   color: #fff;
}
.social-icon {
   margin-left: 25px;
}
.social-icon img {
   max-width: 32px;
}
.copyright {
   padding-top: 15px;
   border-top: 1px solid #fff;
}
.copyright ul {
   list-style: none;
   display: flex;
   margin-bottom: 0;
}
.copyright li {
   padding: 0 30px;
}
.copyright li:last-of-type {
   padding-right: 0;
   border-left: 1px solid #fff
}
.copyright p {
    font-size: 16px;
    font-weight: normal; /* 300 */
    line-height: 24px;
 }
.copyright a {
   color: #fff;
   text-decoration: none;
   font-size: 16px;
   font-weight: normal; /* 300 */
   line-height: 20px;
}
#BlogCategory h1 {
   margin: 60px auto 30px;
   font-weight: bold;
}
#BlogCategory .news-feature {
   padding-bottom: 30px;
}
#BlogCategory .news-category-pagination .pagination {
   display: flex;
   justify-content: center;
   margin-bottom: 60px;
}
.wp-pagenavi {
   display: flex;
   justify-content: center;
   padding-bottom: 60px;
}
.wp-pagenavi span, .wp-pagenavi a {
   width: 30px;
   text-align: center;
}
.transform-long-text {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   display: -webkit-box;
}

#Page404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 300px);
    background: var(--bs-gray-200);
    font-size: 48px;
    color: var(--umt-blue);
    text-align: center;
}
#Page404 h1 {
    font-size: 3rem;
}
#Page404 p {
    font-size: 1.8rem;
}
#Page404 a {
   display: block;
   width: auto;
   margin: 0 auto;
   padding: 5px 10px;
   border: 1px solid var(--umt-blue);
   font-size: 1.2rem;
}

/* xxl */
@media only screen and (max-width: 1400px) {
    .buttons-section .umt-btn {
        font-size: 24px;
    }
    .connect-section h2.title {
        padding: 0 30px;
    }
    .training-detail {
        padding: 60px 100px;
    }
    .apply-section .apply-item .apply-text {
        padding: 15px;
    }
   .apply-section .apply-item .apply-text h3 {
      font-size: 1.1rem;
   }
    .news-section.news-section-hot .news-list .news-item a img,
    .news-section.news-section-default .news-list .news-item a img {
        max-width: 180px !important;
        width: 180px;
    }
}

/* xl */
@media only screen and (max-width: 1200px) {
    .banner-tagline {
        font-size: 40px;
    }
    .buttons-section .umt-btn {
        margin-right: 30px;
        font-size: 20px;
    }
    .training-detail {
        padding: 30px 60px;
    }
    .training-detail img {
        max-width: 80px;
    }
    .news-section-compact .view-more {
        margin: 0;
    }
    #AdmissionNewsSection.news-section-compact .view-more {
        
    }
    .news-feature .news-highlight {
        margin: 15px 0 15px;
    }
}

/* lg */
@media only screen and (max-width: 992px) {
    .banner-tagline {
        font-size: 36px;
    }
   .page-admissions.top-big-banner {
      min-height: auto !important;
   }
   .page-scholarship.top-big-banner {
      min-height: auto !important;
      background-size: contain;
   }
   .category-list .is-desktop {
      display: none;
   }
   .category-list .is-mobile {
      display: flex;
   }
    .category-feature .category-title {
        margin-bottom: 60px;
        font-size: 32px;
        line-height: 48px;
    }
    .category-title {
        margin-bottom: 15px;
        padding: 0;
        font-size: 18px;
    }
    .training-detail {
        padding: 20px;
    }
    .training-detail h3 {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 28px;
    }
    .training-detail img {
        max-width: 60px;
    }
    .buttons-section .umt-btn {
        margin-right: 30px;
        padding: 10px;
        font-size: 20px;
    }
    .news-section.news-section-hot .news-list {
        margin-top: 30px;
    }

}

/* md */
@media only screen and (max-width: 768px) {
    .banner-tagline {
        font-size: 32px;
    }
    .training-detail {
        padding: 15px;
    }
    .training-detail h3 {
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 24px;
    }
    .training-detail img {
        max-width: 50px;
    }
    .buttons-section .umt-btn {
        margin-right: 20px;
        padding: 10px;
        font-size: 18px;
    }
}

/* sm */
@media only screen and (max-width: 576px) {
   body {
      font-size: 16px;
    }
   .pr-50 {
      padding-right: 0;
   }
   .pb-100 {
      padding-bottom: 0;
   }
   .title {
      margin-top: 30px;
      margin-bottom: 30px;
   }
   h2.title {
      font-size: 16px;
      font-weight: bold; /* 700 */
   }
   .top-header {
      position: relative;
      background-color: var(--umt-blue);
   }
   .top-header-start {
      padding: 10px;
   }
   img.top-logo {
      height: 30px;
   }
   .top-header-end .btn {
      font-size: 12px;
      font-weight: normal; /* 600 */
      line-height: 16px;
      padding: 1px;
      width: 80px;
      height: 55px;
      justify-content: center;
      border-left: 1px solid #fff;
   }
   .top-header-end .btn .bg-red {
      border-left: none;
   }
   .menu-panel.active .menu_top {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      height: auto;
   }
   .menu-panel.active .menu_top .menu_lang ul {
      margin: 0;
      padding: 0;
   }
   .menu-panel.active .menu_top .menu_lang ul li, .menu-panel.active .menu_top .btn_close_menu {
      width: 50px;
      height: 50px;
   }
   .menu-panel.active .menu_bottom {
     width: 100%;
     padding: 20px;
     background-color: inherit;
   }
   .menu-panel.active .menu_bottom .menu_top_image {
      margin-top: 0;
   }
   .menu-panel.active .menu_bottom > ul.top_nav.menu-mobile > li.menu-item > ul.sub-menu {
      position: inherit;
      top: auto;
      left: auto;
      margin-top: 24px;
   }
   .banner-tagline {
        font-size: 20px;
    }
   .video-section {
      padding: 40px 0;
   }
   .video-container .red-square {
      bottom: 0;
   }
   .category-title {
      font-size: 14px;
      margin-top: 10px;
      padding: 0 10px;
   }
   .category-feature .category-title {
      font-size: 20px;
      margin-bottom: 40px;
   }
   .category-item img {
      height: 80px;
      width: auto;
   }
   .category-feature img {
      width: 100%;
      height: auto;
   }
   .training-detail {
      position: relative;
      padding: 30px;
   }
   .training-detail h3 {
      font-size: 16px;
      line-height: 21px;
      margin-bottom: 16px;
   }
   .training-detail p {
      font-size: 12px;
      line-height: 15px;
   }
   .background-object {
      height: 150px;
   }
   .apply-section .apply-item  {
        margin-bottom: 30px;
    }
   .buttons-section .umt-btn {
      margin-right: 0;
      margin-bottom: 20px;
      font-size: 13px;
      width: 230px;
    }
    .news-section-compact .training-detail, .news-section-compact .training-detail.order-md-first {
        padding-left: 0;
        padding-right: 0;
    }
    #AdmissionNewsSection.news-section-compact .view-more {
        margin-bottom: 30px;
    }
   .news-section .title {
      text-align: center; 
   }
   .news-feature {
      background-color: transparent;
      padding: 0;
   }
   .news-item > a img {
      width: 98px;
   }
   
   .news-feature h2, .news-feature h3 { 
        font-size: 14px;
        line-height: 1.3;
   }
   .news-section.news-section-hot .news-list {
        margin-top: 0;
   }
   .news-section.news-section-hot .news-list .news-item {
        flex-direction: column;
        padding: 0;
    }
    .news-section.news-section-hot .news-list .news-item a img {
        max-width: 100% !important;
        width: 100%;
    }
    .news-section.news-section-hot .news-feature h3, 
    .news-section.news-section-hot .news-list .news-item h4 {
        font-size: 14px;
        line-height: 1.3;
    }
    .news-section.news-section-default .news-list .news-item {
        flex-direction: column;
        padding: 15px 0 30px;
    }
    .news-section.news-section-default .news-list .news-item a img {
        max-width: 100% !important;
        width: 100%;
    }
    .news-section.news-section-default .news-feature h3, 
    .news-section.news-section-default .news-list .news-item h4 {
        margin: 15px 0;
        font-size: 14px;
        line-height: 1.3;
    }
    .news-section.news-section-hot .news-feature .news-highlight, 
    .news-section.news-section-hot .news-list .news-item .news-highlight {
        margin: 15px 0 30px;
    }
   .footer {
      padding: 15px 20px;
   }
   .footer .col-md-4 {
      margin-bottom: 25px;
   }
   .social-icon {
      margin-left: 0;
      margin-right: 25px;
   }
   .copyright {
      padding-top: 0;
      border-top: none;
   }
   .copyright p,
   .copyright a {
      font-size: 10px;
      line-height: 13px;
   }
   .copyright ul {
      margin-bottom: 10px;
      padding-left: 0;
   }
   .copyright li:first-of-type {
      padding-left: 0;
   }
}
.top-header.is-scroll {
   position: fixed;
   z-index: 9;
}