@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;
 }
body {font-family: 'Roboto-Regular', sans-serif;transition: var(--trans);max-width: 1920px;overflow-x: hidden;margin: auto;}

/* Defaule */
:root {
     --yellow: #ECE789;
     --yellow-b: #DDBF4D;
     --yellow-2: #FFDC6B;
   }
a {color: #000;text-decoration: none;}
.Roboto-Bold{font-family: Roboto-Bold;}
.Roboto-SemiBold{font-family: Roboto-SemiBold;}
.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;}
.text-2line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;height: 50px;}
.text-3line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;height: 70px;}
.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(--yellow);}
.bg-gadient-tr {background: linear-gradient(to right,#DDBF4D 0%, #ECE789 100%);}
.bg-gadient-tl {background: linear-gradient(to left,#DDBF4D 0%, #ECE789 100%);}
.bg-gadient-tb {background: linear-gradient(to bottom,#DDBF4D 0%, #ECE789 100%);}
.bg-gray{background-color: #F3F3F3;}
.text-red{color: #E31515;}
.text-yellow{color: var(--yellow);}
.text-yl-b{color: var(--yellow-b);}
.text-yl{color: var(--yellow-2);}
.text-op{color: rgba(0, 0, 0, 0.5);}
.cursor-pointer{cursor: pointer;}
.list-none {list-style: none;}
.text-justify{text-align: justify;}
.container{max-width: calc(100% - 200px);}
.hv-yellow:hover {color: var(--yellow-2)!important;}
.overflow-hidden {overflow: hidden !important;}
.rd-top-right{border-top-right-radius: 2rem;}
.rd-top-left{border-top-left-radius: 2rem;}
.rd-bottom-left{border-bottom-left-radius: 2rem;}
.rd-bottom-right{border-bottom-right-radius: 2rem;}
.bg-red{background-color: red;}
/* Header*/
.logo{transition: all 0.6s ease;}
.line-header{width: 1px;background-color: #fff;height: 48px;margin: 0 20px;}
.form-search {position: absolute;right: 0;top: 100%;z-index: 99;background-color: #fff;opacity: 0;transform: translateY(20px);transition: all .6s ease;}
.form-search.show{opacity: 1;transform: translateY(0);}
.item-call p{padding: 7px 8px;background: url("../images/bg-ic-phone.png")no-repeat;width: 76px;height: 53px;}
.item-call p span{display: block;width: 38px;height: 38px;border-radius: 2rem;background-color: #000;display: flex;align-items: center;justify-content: center;}
.item-call a{border-radius: 2rem;border-top-left-radius: 0;height: 47px;display: flex;align-items: center;justify-content: center;background: url("../images/bg-phone.png")no-repeat;width: 150px;margin-left: -34px;}
/* Menu */
.menu{position:relative;z-index:10;transition: all 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;padding:0px 25px;text-transform:uppercase;text-decoration:none!important;white-space: nowrap;}
.menu ul.menu-pc li ul{position:absolute;min-width:250px;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 #000;background: linear-gradient(to bottom,#DDBF4D 0%, #ECE789 100%)}
.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{font-weight:400;font-size:14px;text-align:left;border-bottom:1px solid #000;text-transform: capitalize;}
.menu ul.menu-pc li ul li:last-child > a{border-bottom:0px;}
.menu ul.menu-pc li ul li a.has-child{margin-right:0px;}
.menu ul.menu-pc li ul li a.has-child:after{-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.menu ul.menu-pc li ul li a{line-height: 20px;padding: 0px;}
/* .menu ul.menu-pc > li > a.active,.menu ul.menu-pc > li > a:hover{color: #fff!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:#000;}
.menu-mobile{display: none;}
.fixed{position: sticky!important;z-index: 99;top: 0px;}
.menu.fixed.show .logo{max-width: 70px;}
/*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: 5px 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: var(--yellow-2);}
.navbar-toggle .icon-bar+.icon-bar {margin-top: 5px;}
.navbar-default .navbar-toggle .icon-bar {background-color: var(--yellow-2);}
/*Body*/
.content-about::before{position: absolute;background: linear-gradient(to left,#DDBF4D 0%, #ECE789 100%);width: 142px;height: 100%;content: '';z-index: -1;left: 0;top: 0;}
.content-about .container::after,.content-about .container::before{position: absolute;content: '';width: 56px;height: 3rem;background-color: #000;left: 0;top: 100%;clip-path: polygon(100% 0, 0% 100%, 100% 100%);transform: rotateX(180deg);}
.content-about .container::after{top: inherit;bottom: 100%;transform: inherit;}
.shadow-bt{box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);}
.items-why img{max-width: 42px;}
.desc p{margin-bottom: 0;}
.name-list{background: url("../images/line-name.png")no-repeat bottom;padding-bottom: 30px;}
.owl-list .owl-item{padding-bottom: 10px;}
.icon-youtube{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color: red;font-size: 50px;}
.items-customer img{max-width: 136px;max-height: 136px;}
.items-customer .content{padding-left: 5rem;padding-right: 2rem;margin-left: -65px;z-index: -1;}
.name-new{position: absolute;left: 0;bottom: 0;width: 100%;padding: 1rem 1rem;}
.items-new{border-bottom: 1px dashed rgba(0, 0, 0, 0.3);}
.items-new:last-child{border-bottom: inherit;}
.owl-commont .owl-item img{width: auto;}
.owl-commont .owl-item:last-child .items-commont{border-right: inherit!important;}
.items-commont img{max-width: 68px;margin: auto;}
.item-newsletter{border-radius: 5rem;}
#newsletter-form{width: 100%;background-color: #fff;padding: 5px;border-radius: 3rem;}
#newsletter-form label.error{position: absolute;left: 0;top: 100%;}
input[type="radio"]:checked {accent-color: #000;}
input[type="radio"]:checked + label {font-weight: bold;}
.video-grid{display: grid;display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.list-typical li:hover,.list-typical li.active{background-color: var(--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: 1000px;}
.items-list{display: grid;grid-template-columns: repeat(4,1fr);gap: 15px;}
.custom-fieldset {border-radius: 2rem; position: relative;margin: 20px 0;}
.custom-fieldset legend { position: absolute;left: 15px;top: -10px;background-color: #fff;max-width: 175px;padding: 0 10px;}
.filedset-call {border: 2px solid #FF0000; }
.filedset-zalo {border: 2px solid #0084FF; }
.custom-fieldset a span{max-width: 30px;padding: 5px;display: flex;border-radius: 50%;background-color: #0084FF;margin-right: 1rem;height: 30px;}
.filedset-call a span{background-color:#FF0000 ;}
.grid-why{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;}

.discount{position: absolute;top: 10px;left: 10px;background-color: red;color: #fff;padding: 5px 10px;border-radius: .5rem;z-index: 9;font-family: 'Roboto-Bold';}
.product__grid,.news__grid {display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
.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;}
.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(--yellow-2);line-height: 41px;border-radius: 10px;}
/*Breadcrumb*/
.breadcrumb{margin-bottom: 0;justify-content: center;}
.breadcrumb li a{color: #fff;text-transform: uppercase;}
.breadcrumb-item+.breadcrumb-item::before{color: #fff;}
.banner {height: 350px;}
.btn-thanhtoan.active{background-color: var(--yellow-2);color: #000;}
.container-maintenance{position: relative;overflow-x: auto;}
/*Footer*/
.map_footer iframe{width: 100%;}
/*swiper*/
.swiper-wrapper{height: auto!important;}
.swiper-button-next, .swiper-button-prev {background-color: #00000050;border-radius: 4px;color: var(--yellow-2);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);}
/*owl*/
.owl-prev,.owl-next{position: absolute;top: 50%;left: 0;transform: translate(0,-50%);}
.owl-next{left: inherit;right: 0;}

.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: #D5D5D5;margin: 0 3px;}
.owl-dots button.active span {background-color: #969696;}
/*error*/
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;}
.grecaptcha-badge{display: none;}
/*Paging*/
.page-link{color: rgba(0, 0, 0, 0.3);}
.active>.page-link, .page-link.active{background-color: var(--yellow-2);border-color: var(--yellow-2);}
/*Comment*/
a.star {font-size: 24px;color: #d1d1d4;cursor: pointer;line-height: 1;transition: all 0.1s ease;}
a.star.vote-hover {color: #ffc120;}
a.star.vote-active {color: #ffc120;}
.rating-medium{text-align: center;padding-top: 0;}
.title-medium-score{font-size: 14px;}
.score-rating{font-size: 54px;font-weight: 500;color: #fe302e;line-height: 60px;}
.quantity-star{color: #ffc120; font-size: 16px;margin-bottom: 15px;}
.quantity-comment{color: #777474;}
.item-progress{margin-bottom: 10px;}
.item-progress .rating-num{float: left;font-size: 15px;width: 45px;text-align: right;padding-right: 5px;color: #6f6969;font-family: 'Barlow Semi Condensed', sans-serif;}
.item-progress .box-progress{float: left;width: calc(100% - 90px);vertical-align: middle;margin-top: 5px;}
.item-progress .box-progress .progress{height: 10px;margin-bottom: 0px;box-shadow: none;background-color: #e6e6e6;}
.item-progress .box-progress .progress-bar{background-color: var(--yellow);}
.item-progress .rating-num-total{width: 45px;text-align: left;display: inline-block;float: left;padding-left: 10px;color: #565656;font-size: 15px;font-family: 'Barlow Semi Condensed', sans-serif;}
.content-nhanxet{display: none;}
.content-nhanxet .h3{margin-top: 10px;font-size: 18px;font-family: 'Barlow Semi Condensed', sans-serif;font-weight: 700;margin-bottom: 20px;}
.btn-guibl{background-color: var(--yellow);color: #fff;margin: 0px auto;/* display: block; */}

.item-binhluan .img_user{display: block;width: 80px;height: 80px;margin: 0px auto;border-radius: 50%;overflow: hidden;}
.item-binhluan .img_user img{width: 100%;height: 100%;}
.item-binhluan .name-user{text-align: center;font-family: 'Barlow Semi Condensed', sans-serif;font-weight: 600;margin-top: 10px;color: #626262;margin-bottom: 5px;}
.item-binhluan .ngaydang{display: block;text-align: center;color: #a2a1a1;font-size: 12px;}
.chitiet-bl .titlede-bl{font-weight: 600;color: #00a85a;}
.chitiet-bl p{color: #6f6c6c;}
.panel-traloi{margin-top: 10px;}
.list-traloi{margin-top: 10px;border-top: 1px dashed #e8e5e5;padding-top: 10px;}
.list-traloi span{display: inline-block;margin-left: 14px;font-size: 13px;color: #757575;}
.list-traloi p{color: #6f6c6c;margin-top: 7px;}
.item-traloi{border-bottom: 1px dotted #e2e2e2;margin-bottom: 10px;}
/*widget*/
#arcontactus{display: none;}
.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: 9; }
.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%; 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(--yellow); 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__email .widget-desktop-items__icon{background: #EA4335;}
.widget-desktop-items__email::before{background: #EA433550;}
.widget-desktop-items__email::after,.widget-desktop-items__call::after{background: -webkit-gradient(linear, left top, right top, color-stop(0, #EA433550), to(#EA433550)); background: linear-gradient(90deg, #EA433550 0, #EA433550 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-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); }
}