@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: 'Roboto-Regular';
     src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
          url('../fonts/Roboto-Regular.woff') format('woff');
     font-weight:normal;
     font-style: normal;
 }
@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
       url('../fonts/Montserrat-Medium.woff') format('woff');
  font-weight:600;
  font-style: normal;
}
@font-face {
     font-family: 'Montserrat-Bold';
     src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
          url('../fonts/Montserrat-Bold.woff') format('woff');
     font-style: normal;
}

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

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

/* Defaule */
:root {
     --color-pink: #FF7FC0;
     --color-yellow: #FDC928;
   }
a {color: #000;text-decoration: none;}
.hover-pink:hover {color: var(--color-pink)!important;}
.hover-yellow:hover {color: var(--color-yellow)!important;}
.text-main {color: var(--color-pink);}
.text-yellow{color: var(--color-yellow);}
.Roboto-Bold{font-family: Roboto-Bold;}
.Roboto-SemiBold{font-family: Roboto-SemiBold;}
.Montserrat-Medium{font-family: Montserrat-Medium;}
.Montserrat-Bold{font-family: Montserrat-Bold;}
.Montserrat-Regular{font-family: Montserrat-Regular;}
.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-50{font-size: 50px;}
.shadow-bottom {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}
.text-2line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;height: 50px;}
.text-4line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;height: 90px;}
.bg-yellow {background-color: var(--color-yellow);}
.bg-pink {background-color: var(--color-pink);}
.text-pink{color: var(--color-pink);}
.text-yellow{color: var(--color-yellow);}
.cursor-pointer{cursor: pointer;}
.list-none {list-style: none;}
.text-justify{text-align: justify;}
.bg-gadient {background: linear-gradient(90deg,#3333FF 0%, #1F1F99 100%);}
.hv-bg-yellow:hover{background-color: var(--color-yellow);}
.text-red{color: #E31515;}
.shadow-blue{box-shadow: 1px 4px 1px -2px #051F45;}
.container{max-width: 1200px;}
/* Header*/
.form-search{right: 50px;top: 80%;opacity: 0;transition: opacity 0.3s ease, transform 0.6s ease;pointer-events: none;transform: translateY(-10px);}
.form-search.active { opacity: 1;pointer-events: auto;transform: translateY(0);}
.form-search input{font-size: 14px;}
.form-search input::placeholder{color: #fff;font-size: 14px;}
.icon-search{width: 27px;height: 27px; line-height: 27px;font-size: 15px;}
.line:before{position: absolute;content: '';width: 1px;height: 100%;background-color: #fff;right: 0;}
.wave{width: 27px;height: 27px;}
.wave span{width: 5px;border-radius: 1rem;height: 9px; display: block;background-color:#fbaf00;animation: waveAnim 1s ease-in-out infinite;}
.wave span.wave-1{animation: wave1Anim 0.9s ease-in-out infinite;animation-delay: 0s;}
.wave span.wave-2{animation: wave2Anim 0.9s ease-in-out infinite;animation-delay: 0.3s;}
.wave span.wave-3{animation: wave3Anim 0.9s ease-in-out infinite; animation-delay: 0.6s;}
/* 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;text-transform:uppercase;text-decoration:none!important;white-space: nowrap;}
.menu ul.menu-pc li ul{position:absolute;min-width:250px;background:#fff;border-radius:0.25rem;-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;border: 1px solid #eee;}
.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 a{border-bottom:1px solid #eee;text-transform: capitalize;}
.menu ul.menu-pc li a.active{color: var(--color-yellow)!important;}
.menu ul.menu-pc li > ul::before{position: absolute;content: "";width: 20px;height: 10px;top: -10px;left: 15%;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background-color:#eee;}
.menu-mobile{display: none;}
.fixed{position: fixed!important;z-index: 9999;top: 0px;left: 0px;right: 0px;transform: translateY(-100%);background-color: #fff;}
.menu.fixed{padding: 5px 0!important;}
.menu.fixed.show{transform: translateY(0);}
.logo-header{transition: all 0.6s ease-in-out;max-width: 100px;}
.menu.fixed .logo-header{max-width: 50px;transition: 0.6s;}
/*Menu Mobile*/
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.navbar-toggle {position: relative;padding: 2px 5px;background-color: transparent;background-image: none;border: 1px solid transparent;border-radius: 4px;}
.navbar-toggle .icon-bar {display: block;width: 20px;height: 3px;border-radius: 1px;background-color: #fff;}
.navbar-toggle .icon-bar+.icon-bar {margin-top: 5px;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}
/*Body*/
.owl-carousel-why .owl-item{padding: 20px 0;}
.owl-carousel .owl-item .item-why img{width: auto;}
.item-why{width: 100%;max-width: 267px;height: 267px;border-width: 20px;border-style: solid;border-color: #FDC928;border-radius: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.owl-carousel .owl-item:nth-child(1){z-index: 4;}
.owl-carousel .owl-item:nth-child(2) .item-why{border-color: #FEAF5E;}
.owl-carousel .owl-item:nth-child(3) .item-why{border-color: #FF998C;}
.owl-carousel .owl-item:nth-child(4) .item-why{border-color: #FF7FC0;}
.owl-carousel .owl-item:nth-child(2){z-index: 3;}
.owl-carousel .owl-item:nth-child(3){z-index: 2;}
.owl-carousel .owl-item:nth-child(4){z-index: 1;}
.item-why img{max-width: 68px;margin: auto;}
.key-why{position: absolute;top: -44px;left: 92%;background: url(../images/icon-why.png);background-size: 100% 100%;width: 132px;height: 312px;z-index: -1;display: flex;align-items: center;justify-content: center;font-size: 28px;font-family: Roboto-Bold;color: var(--color-yellow);}
.owl-carousel .owl-item:nth-child(4) .key-why{display: none;}
.rd-top-left{border-top-left-radius: 2rem;}
.rd-top-right{border-top-right-radius: 2rem;}
.rd-bottom-left{border-bottom-left-radius: 2rem;}
.rd-bottom-right{border-bottom-right-radius: 2rem;}
.line-about::before{position: absolute;left: 0;top: 50%;transform: translate(0,-50%);width: 37px;height: 1px;background-color: var(--color-yellow);content: '';}
.item-about{left: -1rem;bottom: 0;}
.service_grid{display: grid;grid-template-columns: 100%;gap: 40px;}
.service-row{flex-direction: row-reverse;}
.content-srv{position: absolute;bottom: 0;right: 0;z-index: 99;}
.service-row .content-srv{left: 0;}
.grid-party{display: grid;grid-template-columns: repeat(4, 1fr); gap: 1rem;align-items: stretch;}
.grid-party >:first-child{grid-column: 1/3; grid-row: 1;  }
.party-row >:first-child{grid-column: 1/2; }
.party-row >:last-child{grid-column: 3/5; grid-row: 1;  }
.line-partner{position: relative;width: 55px;height: 4px;background-color: var(--color-yellow);border-radius: 1rem;}
.overlay {position: absolute;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.3);transform: scale(0);
pointer-events: none;}
.left-register::before{position: absolute;content: "";width: 15px;height: 150px;background-color: var(--color-pink);top: -10px;right: -35px;transform: rotate(30deg);transform-origin: top left;}
.left-register p{margin-bottom: 0;}
.btn-register{padding: 7px 12px;}
.form-register {border: 1px solid #fff;}
#newsletter-email-error{position: absolute;top: 100%;left: 0;}
.sticky-new{position: sticky;top: 80px;}

.video-grid{display: grid;grid-template-columns: repeat(3, 1fr); gap: 10px;}
.name-container{max-width: 70%;}
.list-typical li:hover,.list-typical li.active{background-color: var(--color-yellow)!important;color: #fff;}
.list-typical li.active:before{display: none;}
.tab-product .tab-pane{transition: opacity 0.3s ease, max-height 0.6s ease;opacity: 0; max-height: 0;overflow: hidden;}
.tab-product .tab-pane.active{opacity: 1;max-height: 750px;}

.product__grid,.news__grid {display: grid; grid-template-columns: repeat(4, calc(25% - (15px * 3 / 4))); grid-gap: 15px;}
.scrollToTop{width:41px;height:41px;text-align:center;color:#000;text-decoration:none;position:fixed;bottom:15px;right:15px;display:none;z-index:10;cursor:pointer;background: var(--color-yellow);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{margin-bottom: 0;}
.breadcrumb li a{color: #fff;text-transform: uppercase;}
.breadcrumb-item+.breadcrumb-item::before{color: #fff;}
.banner_full .background {height: 350px;}
.btn:hover{background-color:var(--color-yellow);color: #fff;}
.grid_contact{display: grid; grid-template-columns: repeat(4, calc(25% - (15px * 3 / 4))); grid-gap: 15px;}
.items-contact{background: #F8F8F9;padding: 20px 10px;padding-top: 55px;}
.items-contact img{position: absolute;left: 50%;top: -25px;transform: translate(-50%,0);}
.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: 355px;}
.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-pink);color: white;}
.container-maintenance{position: relative;overflow-x: auto;}
/*Footer*/
.map_footer iframe{width: 100%;height: auto;border-radius: 1rem;}
.swiper-wrapper{height: auto!important;}
.swiper-button-next, .swiper-button-prev {background-color: #00000050;border-radius: 4px;color: var(--color-pink);width:30px;}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 30px;}
.item-slide img {transition: transform 8s ease;transform: scale(1.1);}
.swiper-slide-active .item-slide img {transform: scale(1);}

.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-nav {position: absolute;left: 0;top: 50%;transform: translate(0,-50%);width: 100%;display: flex;justify-content: space-between;}
.owl-prev {margin-left: -15px;}
.owl-next {margin-right: -15px;}
.custom-prev, .custom-next {background: #EFEEEE;border: none;padding: 3px 7px;border-radius: 50%;cursor: pointer;} 
.custom-prev:hover, .custom-next:hover {background: #003d7a;color: #fff;}
.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;}

label.error {display: block;color: #ff4d4f;font-size: 0.875rem;margin-top: 0.25rem;position: relative;padding-left: 15px;}
label.error::before {content: "⚠";position: absolute;left: 0;}
/*Paging*/
.page-link{color: rgba(0, 0, 0, 0.3);}
.active>.page-link, .page-link.active{background-color: var(--color-pink);border-color: var(--color-pink);}
.grecaptcha-badge{display: none;}
/*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%; 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, #FF000050), to(#FF000050)); background: linear-gradient(90deg, #FF000050 0, #FF000050 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; border-radius: 50%; position: relative; z-index: 999; padding: 8px;}
.widget-desktop-items__zalo .widget-desktop-items__icon{background: #0068FF;}
.widget-desktop-items__zalo::before{background: #0068FF50;}
.widget-desktop-items__zalo::after{background: -webkit-gradient(linear, left top, right top, color-stop(0, #0068FF50), to(#0068FF50)); background: linear-gradient(90deg, #0068FF50 0, #0068FF50 100%)}
.widget-desktop-items__facebook::before{background:#0084FF50}
.widget-desktop-items__facebook::after{background: -webkit-gradient(linear, left top, right top, color-stop(0, #0084FF50), to(#0084FF50)); background: linear-gradient(90deg, #0084FF50 0, #0084FF50 100%)}
.widget-desktop-items__facebook .widget-desktop-items__icon{background: #0084FF;}
.widget-desktop-items__call::before{background: #FF000050;}
.widget-desktop-items__call .widget-desktop-items__icon{background: #FF0000;}
.widget-cart{color: #fff;font-size: 20px;}
.widget-desktop-items__call .widget-desktop-items__content { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); padding: 5px 60px 5px 20px; background: -webkit-gradient(linear, left top, right top, color-stop(0, #FF0000), to(#FF0000)); background: linear-gradient(90deg, #FF0000 0, #FF0000 100%); border-radius: 20px; color: #fff; white-space: nowrap;z-index: -1; }
.widget-desktop-items__call .widget-desktop-items__content span { font-family: "Roboto-Bold"; margin-left: 5px; }

@-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-yellow); }
     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); } 
}
@keyframes wave1Anim {
     0%, 100% { height: 3px; background-color: #fbaf00;}
     50% { height: 9px; background-color: #e37400;}
}
@keyframes wave2Anim {
     0%, 100% { height: 9px; background-color: #fbaf00;}
     50% { height: 18px; background-color: #e37400;}
}
@keyframes wave3Anim {
     0%, 100% { height: 18px; background-color: #fbaf00;}
     50% { height: 27px; background-color: #e37400;}
}