@font-face {
    font-family: 'Inter-ExtraBold';
    src: url('../fonts/Inter_24pt-ExtraBold.woff2') format('woff2'),
         url('../fonts/Inter_24pt-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-SemiBold';
    src: url('../fonts/Roboto-SemiBold.woff2') format('woff2'),
         url('../fonts/Roboto-SemiBold.woff') format('woff');
    font-weight:600;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
         url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight:600;
    font-style: normal;
}
@font-face {
  font-family: 'Inter-Bold';
  src: url('../fonts/Inter24pt-Bold.woff2') format('woff2'),
       url('../fonts/Inter24pt-Bold.woff') format('woff');
  font-weight:600;
  font-style: normal;
}

@font-face {
     font-family: 'Roboto-Regular';
     src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
          url('../fonts/Roboto-Regular.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'OpenSans-Bold';
     src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
          url('../fonts/OpenSans-Bold.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'OpenSans-Regular';
     src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
          url('../fonts/OpenSans-Regular.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'OpenSans-SemiBold';
     src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
          url('../fonts/OpenSans-SemiBold.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'OpenSans-ExtraBold';
     src: url('../fonts/OpenSans-ExtraBold.woff2') format('woff2'),
          url('../fonts/OpenSans-ExtraBold.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'Inter-Light';
     src: url('../fonts/Inter24pt-Light.woff2') format('woff2'),
          url('../fonts/Inter24pt-Light.woff') format('woff');
     font-style: normal;
 }

 @font-face {
     font-family: 'Inter-Medium';
     src: url('../fonts/Inter_24pt-Medium.woff2') format('woff2'),
          url('../fonts/Inter_24pt-Medium.woff') format('woff');
     font-style: normal;
 }

body {font-family: 'Roboto-Regular', sans-serif;transition: var(--trans);max-width: 1920px;overflow-x: hidden;font-size: 16px;margin: auto;}

/* Defaule */
:root {--color-text: #24386A;}
a {color: #000;text-decoration: none;}
.hover:hover {color: #000!important;}
.text-main {color: var(--color-text);}
.text-gray{color: #434343;}
.text-gray-2{color: #717171;}
.text-red{color: #EB0000;}
.Inter-ExtraBold{font-family: Inter-ExtraBold;}
.Inter-SemiBold{font-family: Inter-SemiBold;}
.Roboto-Bold{font-family: Roboto-Bold;}
.Inter-Bold{font-family: Inter-Bold;}
.Roboto-SemiBold{font-family: Roboto-SemiBold;}
.OpenSans-Bold{font-family: OpenSans-Bold;}
.OpenSans-Regular{font-family: OpenSans-Regular;}
.OpenSans-SemiBold{font-family: OpenSans-SemiBold;}
.OpenSans-ExtraBold{font-family: OpenSans-ExtraBold;}
.Inter-Light{font-family: Inter-Light;}
.Inter-Medium{font-family: Inter-Medium;}
.fs-9{font-size: 9px;}
.fs-14{font-size: 14px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}
.fs-24{font-size: 24px;}
.fs-32{font-size: 32px;}
.fs-36{font-size: 36px;}
.fs-45{font-size: 45px;}
.fs-50{font-size: 50px;}
.shadow-bottom {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}
.rounded-top-left {border-top-left-radius: 1rem;}
.rounded-top-right {border-top-right-radius: 1rem;}
.text-2line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis;height: 48px;}
.text-h2line{height: 54px;}
.lh-25{line-height: 25px;}
.text-3line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;height: 72px;}
.text-4line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; overflow: hidden;text-overflow: ellipsis;}
.text-7line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;}
.bg-main {background-color: var(--color-text);}
.bg-main-light{background-color: #E4E4E4;}
.bg-main-opacity{background-color: #24386A15;}
.bg-items-app{background-color: #DFE5EB;}
.bg-date{background-color: #F3F3F3;border-bottom: 5px solid var(--color-text);}
.bg-info-pr{background-color: #27579E10;}
.border-main{border: 1px solid var(--color-text);}
.border-right{border-right: 1px solid var(--color-text);}
.border-bottom-m{border-bottom: 1px solid var(--color-text);}
.border-bt-gray{border-bottom: 1px solid #717171;}
.box-shadow{box-shadow: 0.1rem 0.1rem 0.1rem #0E1935;}
.cursor-pointer{cursor: pointer;}
.list-none {list-style: none;}
.text-justify{text-align: justify;}
.color-orange{color: #E87817;}
.left-1{left: 0.5rem;}
.container{max-width: calc(100% - 50px);}
.hv-text:hover{color: var(--color-text);}
/* Header*/
.rounded-button {border-radius: 0 2rem 2rem 0;}
.form-search{box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.3);}
/* Menu */
.menu{position:relative;z-index:10;transition: transform 0.8s ease;}
.menu ul.menu-pc{width:100%;padding:0px;margin:auto;list-style:none;}
.menu ul.menu-pc li{position:relative;z-index:1;}
.menu ul.menu-pc li a{display:block;position:relative;}
.menu ul.menu-pc li ul{position:absolute;min-width:250px;background:#fff;border-radius:0.25rem;-webkit-box-shadow:1px 1px 15px rgb(0 0 0 / 15%);box-shadow:1px 1px 15px rgb(0 0 0 / 15%);-webkit-transform:perspective(600px) rotateX(-90deg);transform:perspective(600px) rotateX(-90deg);-webkit-transform-origin:0 0 0;transform-origin:0 0 0;opacity:0;visibility:hidden;transition:all .5s;list-style: none;margin: auto;padding: 0;max-width: 250px;}
.menu ul.menu-pc li:hover > ul{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-transform-origin:0 0 0;opacity:1;visibility:visible;transition:all .7s;}
.menu ul.menu-pc li ul li{padding-left:10px;padding-right:10px;}
.menu ul.menu-pc li ul li a{font-weight:400;font-size:14px;text-align:left;border-bottom:1px solid #eee;text-transform: capitalize;}
.menu ul.menu-pc li ul li ul{left: 100%;top: 0;}
.menu ul.menu-pc li ul li:hover > ul{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-transform-origin:0 0 0;opacity:1;visibility:visible;transition:all .7s;}

ul.menu-pc li a::after {content: "";position: absolute;left: 0;bottom: 0;height: 2px;width: 0;background: var(--color-text);transition: width 0.9s ease;}
ul.menu-pc li a:hover::after,ul.menu-pc li a.active::after {width: 100%;}
ul.menu-pc li a.active,ul.menu-pc li a:hover{color: var(--color-text);}
.menu-mobile{display: none;}
.fixed{position: fixed!important;z-index: 9999;top: 0px;left: 0px;right: 0px;transform: translateY(-100%);}
.menu.fixed{padding: 5px 0!important;}
.menu.fixed .top-header{display: none!important;}
.menu.fixed .col-1{max-width: 60px;transition: 0.8s;}
.menu.fixed.show{transform: translateY(0);}
/*Menu Mobile*/
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.hc-nav-trigger.hc-nav-1{background-color: transparent!important;}
.hc-nav-trigger.hc-nav-1 {position: relative;width: 26px;height: 22px;display: flex;flex-direction: column;justify-content: space-between;}
.hc-nav-trigger.hc-nav-1{border: none!important;padding: 0!important;}
.hc-nav-trigger.hc-nav-1 span{width: 100%;height: 2px;background-color: var(--color-text);}
.lang-item-mb{display: none;}
.header-mobile{display: none;}
/*Body*/
ul.ul-list-product ul {max-height: 0;overflow: hidden;transition: max-height 0.9s ease;}
ul.ul-list-product li.active ul {max-height: 300px;}
ul.ul-list-product li #fa-product{transition-duration: 0.9s;font-size: 26px;}
ul.ul-list-product li.active #fa-product{transform: rotate(90deg);}
ul.ul-list-product li.active > a{margin-bottom: 0.5rem;}
ul.ul-list-product li ul li a{background-color: #24386A15;}
ul.ul-list-product li ul li:last-child{margin-bottom: 0!important;}
.item-title:before{position: absolute;content: ""; display: inline-block;width: 3px;height: 100%;background-color: var(--color-text);left: 0;top: 0;}
.desc p{margin-bottom: 0;}
.bg-list{background-size: 100% 100%;}
.bg-blue-v2{background: url('../images/bg-blue-v2.png')no-repeat center;background-size: 100% 100%;}
.product__grid {display: grid; grid-template-columns: repeat(3, calc(33% - (10px * 2 / 3))); grid-gap: 10px;}
.scrollToTop{width:41px;height:41px;text-align:center;color:#fff;text-decoration:none;position:fixed;bottom:15px;right:15px;display:none;z-index:10;cursor:pointer;background: var(--color-text);line-height: 41px;border-radius: 10px;}
.thumb-pro-detail{display:block!important;border:1px solid #eee;padding:5px;border-radius:3px;cursor:pointer;background-color:#ffffff;}
.thumb-pro-detail.mz-thumb.mz-thumb-selected{border-color:#cecfd2;}
.thumb-pro-detail img{box-shadow:none!important;filter:brightness(100%)!important;border-bottom:0px!important;padding-bottom:0px!important;}

.breadcrumb{padding: 10px 0;font-family: 'OpenSans-SemiBold';font-size: 20px;}
.breadcrumb-item a{font-size: 20px;font-family: Inter-Medium;}
.breadcrumb-item.active a{color: var(--color-text);}
.breadcrumb-item+.breadcrumb-item::before{content:"";background: url('../images/icon-arrow.png')no-repeat;color: #000;width: 10px;height: 13px;background-size: contain;margin-top: 10px;padding-left: 0.7rem;}

.btn:hover{background-color:var(--color-text);color: #fff;}
.form-control{background-color: #F4F2F2;border-radius: inherit;border: inherit;}
.input-register{background-color: inherit!important;color: #fff!important;}
.input-register::placeholder {color: rgba(255, 255, 255, 0.5);}
.newsletter__frm{width: 100%;max-width: 512px;}
.newsletter__frm .form-group{width: 100%;}
.more-new{color: rgba(0, 0, 0, 0.5);}
.more-new i{background-color: #27579E;color: #fff;padding: 1px 5px;border-top-right-radius:1rem;border-bottom-right-radius:1rem;margin-right: 5px;}
.items-pr .content{width: calc(100% - 21px);}
.items-pr .content p{margin-bottom: 0;}
.btn-thanhtoan.active{background-color: var(--color-text);color: white;}
.container-maintenance{position: relative;overflow-x: auto;}
.bg-new{background-size: 100% 100%;}
.bg-application{background-size: 100% 100%;}
.grid-app{display: grid; grid-template-columns: repeat(2, calc(50% - (35px / 2))); grid-gap: 35px;}
.bg-qc{background: url('../images/bg-qc.png')no-repeat;background-size: 100% 100%;}
.left-app{width: calc(100% - 50px);}
/*Templates News*/
.news__grid { display: grid; grid-gap: 30px; }
.grid_app{display: grid; grid-template-columns: repeat(3, calc(33% - (10px * 2 / 3))); grid-gap: 10px;}
/*About*/
.content-commit{background-color: #24386A05;}
.bg-light-about{background-color: #F6F7F9;}
.visionMission{margin-top: -88px;}
.first-letter{width: 98px;height: 58px;line-height: 58px;position: relative;}
.first-letter:before{position: absolute;content: "";width: 12px;height: 100%;background-color: #142550;top: 0;right: -12px;clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);}
.r-slogan{margin-left: -12px;}

.swiper-pagination-bullet {background: #fff;opacity: 0.7;}
.swiper-pagination-bullet-active {background: var(--color-text);opacity: 1;}
.item-slide img {transition: transform 8s ease;transform: scale(1.5);}
.swiper-slide-active .item-slide img {transform: scale(1);}
.img-video{max-height: 441px;}
.icon-youtube{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 3;width: 100%;max-width: 45px;}
/*Footer*/
.bg-footer{background: url('../images/bg-footer.png')no-repeat center;background-size: 100% 100%;}
.map_footer iframe{width: 100%;height: auto;}
.swiper-wrapper{height: auto!important;}
.swiper-button-next, .swiper-button-prev {background-color: #fff;border-radius: 4px;}
.items-news {border-bottom: 1px dashed rgba(0, 0, 0, 0.25);}
.img-new {width: 100%;max-width: 234px;}
.items-content-new{width: calc(100% - 234px);}
.items-content-new .desc{font-size: 14px;}
.color-main {color: #0C3245;}W
.overflow-hidden {overflow: hidden !important;}
img.zoom-hover {transition: transform 0.4s ease;}
img.zoom-hover:hover {transform: scale(1.2);}
.owl-prev,.owl-next{position: absolute;left: -20px;top: 50%;transform: translate(0,-50%);}
.owl-next{left: inherit;right: -20px;}
.custom-prev img{transform: rotate(180deg);}
.custom-prev, .custom-next {background: #EFEEEE;border: none;padding: 18px 16px;border-radius: 50%;cursor: pointer;} 
.owl-dots {display: flex;justify-content: center;align-items: center;margin-top: 20px;}
.owl-dots button span {display: block;width: 9px;height: 9px;border-radius: 50%;background-color: #C5C5C5;margin: 0 3px;}
.owl-dots button.active span {background-color: #fff;}
.icon-map:hover{color: var(--color-text)!important;}
#contact-form label.error{color: red;font-size: 13px; margin-top: 5px;}
/*error*/
label.error {display: block;color: red;font-size: 0.875rem;margin-top: 0.25rem;position: relative;padding-left: 15px;}
#newsletter-form label.error{position: absolute;top: 100%;left: 0;}
label.error::before {content: "⚠";position: absolute;left: 0;}
.grecaptcha-badge{display: none;}
/*Paging*/
.page-link{color: rgba(0, 0, 0, 0.3);}
.active>.page-link, .page-link.active{background-color: var(--color-text);border-color: var(--color-text);}
/*Hover*/
.hv-slide:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: var(--color-text);-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hv-slide {vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);position: relative;background: #000;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;text-decoration: none;}
.hv-slide:hover:before{-webkit-transform: scaleX(0);transform: scaleX(0);}
.hv-border:before{border-radius: 0.375rem;}
.hv-li:before{background: #fff;border-radius: 0.375rem;}
.hv-border-5::before{border-radius: 2rem;}
.hv-backforth{transition: transform 0.8s ease;}
.hv-backforth:hover{animation: rotate-backforth 1s ease-in-out;}
/*widget*/
.widget-desktop { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; right: 10px; bottom: 120px; z-index: 9999; }
.widget-desktop-items { margin-bottom: 20px; border-radius: 50%; position: relative; text-decoration: none;}
.widget-desktop-items:last-child { margin-bottom: 0; }
.widget-desktop-items:before { position: absolute; content: ""; width: 100%; height: 100%; background: #27579E70; border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: scaleIn1 1s; animation: scaleIn1 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.widget-desktop-items:after { position: absolute; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(0, var(--color-text)), to(var(--color-text))); background: linear-gradient(90deg, var(--color-text) 0, var(--color-text) 100%); border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: scaleIn 1.2s; animation: scaleIn 1.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.widget-desktop-items__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; background: var(--color-text); border-radius: 50%; position: relative; z-index: 999; padding: 8px;}
.widget-cart{color: #fff;font-size: 20px;}
@-webkit-keyframes scaleIn { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } }

@keyframes scaleIn { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } }
@-webkit-keyframes scaleIn1 { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.4); transform: translate(-50%, -50%) scale(1.4); } }
@keyframes scaleIn1 { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.4); transform: translate(-50%, -50%) scale(1.4); } }
@keyframes rotate {
     from { transform: translate(-50%,-50%) rotate(0deg); }
     to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes rotate-v2 {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
}
@keyframes rotate-color {
     from { background-color: var(--color-text); }
     to { background-color: rgba(255, 255, 255, 0.5); }
}
@keyframes rotate-backforth {
     0%   { transform: rotate(0deg); }
     25%  { transform: rotate(-20deg); } 
     50%  { transform: rotate(20deg); } 
     75%  { transform: rotate(-10deg); }
     100% { transform: rotate(0deg); } 
   }