@import url('./reset.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600&display=swap');



body{font-size: 16px;color: #141414;font-family: 'IBM Plex Sans Thai', sans-serif;font-weight: 400;line-height: 1.4;}
.preload { position:fixed; z-index:99999; top: 0; left: 0 ; width: 100%; height: 100%; background:url(../img/skin/logo.png) no-repeat center center #fff; background-size:180px; }

a{transition: all ease .3s;text-decoration: none;color: #000;cursor: pointer;}
a:hover{color: #F7941D;}

.h1, .h2, .h3, .h4, h1, h2, h3, h4{color: #000;line-height: 1.4;}
h1,.h1{font-size: 53px;}
h2,.h2{font-size: 43px;}
h3,.h3{font-size: 32px;}
h4,.h4{font-size: 26px;}
h5,.h5{font-size: 24px;}
h6,.h6{font-size: 20px;}
p{font-size: 16px;margin-bottom: 10px;}
small{font-size: 14px;}
img{}
section{background-color: #fff;}
.over-size{font-size: 64px;}
.form-floating>.form-control { padding: 1rem 0.75rem; border: 0; border-bottom: 1px solid #D8D8D8; border-radius: 0;}
.form-control:focus{box-shadow: none;}
.wrapper{width: 100%;overflow: hidden;}
.box-content{width: 100%;float: left;margin-bottom: 10px;}
.box-content p{line-height: 1.6;}
.box-content ul{list-style-position: outside;list-style: inside;}
.box-content img{margin-bottom: 10px;width: 100%;}
.t-md{font-weight: 500;}
strong,b{font-weight: 600;}
.txt-primary{color: #005E9E;}
.txt-gray{color: #707070;}
.txt-dark{color: #000;}
.txt-success{color: #34A853;}
.txt-secondary{color: #F7941D;}
.txt-light{color: #CDCED0;}
.txt-gray-light{color: #CDCED0;}

a.txt-primary{color: #005E9E;}
a.txt-primary:hover{color: #F7941D;}

a.txt-white{color: #fff;}
a.txt-white:hover{color: #F7941D;}

.bg-secondary{background-color: #F9A94A !important;}
.bg-gray{background-color: #F7F7F7;}
.bg-dark-gray{background-color: #EFEEEE;}
.bg-gray-gd{background: linear-gradient(180deg, #c6c5c5 55.71%, rgba(219, 219, 219, 0.00) 100%);}
.bg-light-l-gd{background: linear-gradient(90deg, #FFF 28.54%, rgba(255, 255, 255, 0.00) 100%);}
.bg-dark-blue-gd{background: linear-gradient(180deg, #002742 0%, #337EB1 100%);}
.bg-dark-blue{background: #002F4E;}
.pd{padding: 50px 0;}
.mr{margin: 50px 0}
.fw{width: 100%;float: left;}

.btn-icon > span{display: flex;align-items: center;line-height: 1;}
.border-top-yellow{border-top: 2px solid #F7941D;}
li.page-item {padding-right: calc(var(--bs-gutter-x) * .5);padding-left: calc(var(--bs-gutter-x) * .5);}
.page-item .page-link{border-color: #D8D8D8;color: #000;min-width: 36px;}
.page-item.active .page-link{background-color: #000;border-color: #000;color: #fff;}

.btn{padding:10px 40px;}
.btn-ctr-primary{border-radius: 0;background-color: #005E9E;border-color:#005E9E;color: #fff;}
.btn-ctr-primary:hover{border-color:#F7941D;background-color: #F7941D;color: #fff;}
.btn:focus {box-shadow: none;}

.btn-ctr-light{border-radius: 0;background-color: #fff;border-color:#fff;color: #005E9E;}
.btn-ctr-light:hover{border-color:#F7941D;background-color: #ffff;color: #F7941D;}

.sticky {position: -webkit-sticky;position: sticky;top: 0;background-color: #fff;}
.head-line{width:100px ;height: 5px;border-radius: 64px; background: #F7941D;margin-bottom: 10px;}

.scroll-top{width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;background-color: #005E9E;position: fixed;bottom: 20px;right: 20px;z-index: 10;cursor: pointer;}
.scroll-top img , .scroll-top svg{width: 24px;height: auto;}
/* HEADER */
header {z-index: 20;}
header nav ul {list-style: none;}
.container-1360{max-width:1360px}
header nav a{text-decoration: none;color: #000;font-size: 14px;text-transform: capitalize;}
.box-search {width: 100%;background-color: #EFEEEE;border-radius: 100px;overflow: hidden;padding: 0 0 0 10px;display: flex;align-items: center;justify-content: space-between;}
.box-search input{width: 100%;background-color: #EFEEEE;border-radius: 100px;overflow: hidden;padding: 0px 10px 0px;border: 0;font-size: 12px;min-width: 200px;}
.box-search button{border: 0;background-color: #E0E0E0;padding: 10px 10px 11px;}
.box-search button span{display: flex;align-items: center;justify-content: center;}
.box-search button span img,.box-search button span svg{fill: #000;height: 16px;}
.menu-bar .group-menu-end > ul > li.active > a{color: #005E9E;font-weight: 500; ;}


.btn-menu { display:none; align-items:center; -webkit-display:flex; -webkit-align-items:center;  cursor:pointer; z-index:12;left: 20px;top: 40px;}
.btn-menu .groupMenu {margin: 0 auto;width: 26px; cursor:pointer; height:16px; position:relative; float:right;}
.btn-menu .groupMenu span { position:absolute;width: 26px;height: 2px;background-color: #000;float: left;margin-bottom: 4px; overflow:hidden;-webkit-transition:ease .4s; transition:ease .4s; }
.btn-menu .groupMenu span:last-child {margin-bottom: 0px;}
.btn-menu .pan1 { top:0px; left:0px; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .pan2 { top:7px; left:0px; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .pan3 { top:14px; left:0px; transform-origin:center center;-webkit-transform-origin:center center;}
.btn-menu .btn-menutext { color:#fff; float:right; text-transform:uppercase; font-size:10px; padding-top:3px; margin-right:15px; letter-spacing:1px;}
.btn-menu:hover span:before { left:0px; }
.closeMenu { position:absolute; top:20px; right:20px; width:50px; height:50px; z-index:-1; cursor:pointer;}
.menuActive .groupMenu .pan1 { left: 0; transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg); top:6px; z-index:2; height:2px;}
.menuActive .groupMenu .pan2 { left: 0; width:0px; height:0px;}
.menuActive .groupMenu .pan3 { left: 0; transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg); top:6px; z-index:2; height:2px;}
.menuActive .closeMenu { z-index:12;}
.menuActive .btn-menu { z-index:12;}
.menuActive .btn-menu .groupMenu span { background-color:#000;}
.menuActive .btn-menu .groupMenu span:before { background-color:#000;}
.group-menu-end{font-weight: 500;}
li.menu-sub.has-sub{position: relative;padding-right: 20px;}
li.menu-sub.has-sub::before {
    content: '\f107'; /* Unicode value for the FontAwesome icon */
    font-family: FontAwesome; /* Specify the FontAwesome font family */
    position: absolute;
    width: 12px;
    height: 7px;
    right: 0;
    top: 0;
    color: #000;cursor: pointer;
}
.box-group-menu > nav{border-bottom: 2px solid #015e9e!important;}

.group-lang {
    display: flex;
    align-items: center;
}
.group-lang .btn-lang{font-weight: 500;text-transform: uppercase;}
.group-lang .btn-lang img{
    width: 16px;height: 16px;margin-right: 5px;
}
.group-lang .btn-lang.active{color: #005E9E;}
.group-lang .span-line{margin: 0 5px;}
ul.sub-menu {
    position: absolute;
    top: 50px;
    width: auto;
    height: auto;
    background-color: #fff;
    padding: 20px;
    display: none;
    min-width: 200px;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.07);
}
ul.sub-menu > li {
    width: 100%;
    float: left;
    margin-bottom: 5px;
}
ul.sub-menu > li.active{color: #005E9E;}

.box-logo{width: 80%;}
.box-logo img{height: 50px;}
header.sticky.menu-bar.active {border-bottom: 2px solid #005E9E;}

.filter-body{width: 100%;float: left;padding: 30px 0;position: relative;height: calc(100vh - 78.8px );}
.filter-select {width: 100%;float: left;height: calc(100vh - (78.8px + 120px) );padding: 0 20px; overflow: hidden;overflow-y: scroll;}
.filter-wrap{transition: all ease-in-out .5s; position: fixed;width: 100%;opacity: 0;z-index: -2;pointer-events: none; height: 100%;left: 0;top: 0;background-color: #fff;}
.filter-wrap.active{opacity: 1;pointer-events: unset;z-index: 30;}
.filter-select-item{display: flex;width: 100%;align-items: center;justify-content: space-between;padding: 20px 0;}
.filter-wrap .dropdown-menu.check-group {right: 0;top: 40px;min-width: 10rem;}
.filter-select-item-h {width: 100%;float: left;}
.filter-select-item a.btn-filter{justify-content: space-between;width: 100%;}

.filter-child{width: 100%;height:calc(100vh - (87.8px + 87px)); max-height:calc(100vh - 87.8px); overflow: hidden; overflow-y: scroll; float: left;padding: 0;background-color: #fff;position: absolute;top: 0;left: 100vw;transition: all ease-in-out .5s;padding: 20px;}
.filter-child.active{left: 0;padding: 20px;}

.box-filter-child-check{width: 100%;float: left;}
.box-filter-child-check li{width: 100%;float: left;margin: 15px 0;}
.box-filter-child-check li label{font-size: 14px;}
.box-filter-child-check .fil-price{padding: 10px 20px;}

.box-filter-list{margin-bottom: 20px;}
.filter-close {position: absolute;right: 20px;}
.filterActive{overflow: hidden;}

/* HOME */
.sec-hero-banner{width: 100%;float: left;}
/* .sec-hero-banner .box-content.pd{padding-top: 90px !important;} */
.sec-hero-banner picture {
  width: 100%;
  float: left;
  position: relative;
}
.sec-hero-banner picture::before ,.sec-banner-video video::before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left:0;}
.bg-ontop-25 picture::before,.bg-ontop-25 video::before{background: rgba(0, 0, 0, 0.25);}
.bg-ontop-80 picture::before ,.bg-ontop-25 video::before{background: rgba(0, 0, 0, 0.80);}

.sec-hero-banner picture  img{float: left;min-height: 400px;object-fit: cover;}
.swiper-pagination-bullet {background-color: transparent;width: 12px;height: 12px;opacity: 1;border: 1px solid #fff;margin: 0 4px;}
.swiper-pagination-bullet-active {opacity: 1;background-color: #005e9e;border: 1px solid #fff;}

.cont-banner{position: absolute;top:0;left: 0;display: flex;width: 100%;height: 100%;}

.home-banner .cont-banner .box-content{ position: relative;top: 100px;opacity: 0;transition: all ease 1s;}
.home-banner .cont-banner .box-content.animate{opacity: 1;top: 0;}
.sec-about.pd{padding-top: 0;}
.sec-about .box-cont-abs{padding-top: 50px;}
.text-justify{text-align: justify;}
.sec-products a {text-decoration: none;color: #081323;}
.card-product-title{transition: all ease .3s;}
.sec-products a:hover .card-product-title{color: #F54047;}
.box-img{width: 100%;position: relative;left: -125px;}
.box-img img{width: 100%;float: left;}
.box-img:hover .box-img-overlay{opacity: 1;z-index: 1;}
.box-img-overlay{transition: all ease-in-out .5s; opacity: 0;z-index: -1; position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);left: 0;top: 0;display: flex;align-items: center;justify-content: center;}
.box-img-overlay a{color: #fff;min-width: 70%;}
.box-img-overlay a:hover{color: #fff;}
.box-tab {width: 100%;float: left;}
.tab-group {width: 100%;float: left;margin-bottom: 60px;}
.tab-group ul{display: flex;align-items: center;justify-content: center;}
.tab-group ul > li{padding: 0 20px;}
.tab-group ul > li a:hover{color: #707070;}
.tab-group ul > li .active{text-decoration: underline;}
.tab-item{display: none;}
.tab-list{width: 100%;float: left;}
.sec-product-cate .box-img-overlay{opacity: 1;z-index: 1;background: rgba(0, 0, 0, 0.2);}
.sec-product-cate .box-img-overlay h2{color: #fff;}


.box-cont {width: 100%;display: flex;align-items: center;justify-content: center;height: 100%;position: relative;}
.box-cont-l {width: 50%;position: relative;height: 100%;}
.box-cont-l img{width: 100%;}
.box-cont-l .cont-img {width: calc(50vw - 50px);position: relative;top: 0;left: calc(100% - 50vw);}
.box-cont-r {width: 50%;height: 100%;}

.box-subscribe {width: calc(100% - 50px);margin-left: 50px;padding: 7px;display: flex;align-items: center;}
.box-subscribe input {width: calc(100% - 10px);height: 100%;min-height: 46px;border-radius: 100px;border: 0;margin-right: 7px;background-color: #efeeee;border-color: #efeeee;outline: none;font-size: 20px;padding: 0 15px;}
.box-subscribe a.btn-ctr-primary {padding: 10px;color: #fff;}



.slider {color: #fff;}
.slider .swiper-container {width: 100%;height: 100%;}
.slider__flex {display: flex;align-items: flex-start;}
.slider__col {display: flex;flex-direction: column;width: 150px;margin-right: 10px;}
.slider__col .slider__image{cursor: pointer;}
.slider__prev,
.slider__next {cursor: pointer;text-align: center;font-size: 14px;height: 48px;display: flex;align-items: center;justify-content: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
  .slider__prev:focus,
.slider__next:focus {outline: none;}
.slider__thumbs {height:600px}
/* .slider__thumbs {height: calc(400px - 96px);} */
.slider__thumbs .slider__image {transition: 0.25s;-webkit-filter: grayscale(100%);filter: grayscale(100%);opacity: 0.5;}
.slider__thumbs .slider__image:hover {opacity: 1;}
.slider__thumbs .swiper-slide-thumb-active .slider__image {-webkit-filter: grayscale(0%);filter: grayscale(0%);opacity: 1;}
.slider__images {height: 600px;width: 100%;}
.slider__images .slider__image img {transition: 3s;}

.slider__image {width: 100%;height: 100%;overflow: hidden;}
.slider__image img {display: block;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}

.product-color{}
.product-color ul{display: flex;flex-wrap: wrap;}
.product-color ul li{margin-right: 8px; margin-bottom: 8px;}
.product-color ul li:last-child{margin-right: 0;}
.product-color ul label{font-size: 13px;padding: 8px 12px; border-radius: 0;border-color: #7D7D7D;}
.product-color .btn-check:active+.btn-outline-dark:focus,.product-color .btn-check:checked+.btn-outline-dark:focus,.product-color .btn-outline-dark.active:focus,.product-color .btn-outline-dark.dropdown-toggle.show:focus,.product-color .btn-outline-dark:active:focus{box-shadow: none;}
.product-color .btn-check:focus+.btn-outline-dark,.product-color .btn-outline-dark:focus{box-shadow: none;}

.btn-group-row{display: flex;}
.btn-group-row a{width: calc(50% - 5px);}
.btn-group-row a:nth-of-type(1){margin-right: 5px;}
.btn-group-row a:nth-of-type(2){margin-left: 5px;}
.btn-group{margin-bottom: 10px;}

.group-share{margin-top: 40px;}
.group-share ul li{margin-right: 20px;}
.group-share ul li:first-child{padding-right: 20px;border-right: 1px solid #D8D8D8;color: #121212;}
.group-share ul li span{display: flex;align-items: center;justify-content: center;}
.group-share ul li img,.group-share ul li svg{height: 20px;fill: #000;}

.sw-custom {width: 100%;margin-top: 20px;}
.sw-custom .swiper-pagination-progressbar{position: relative;width: 100%;height: 2px;background: #D8D8D8;}
.sw-custom  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {transition: all ease-in-out .5s; background: #707070;position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;transform: none !important;}

.border-es{border-left: 1px solid #dee2e6;border-right: 1px solid #dee2e6;}

.pop-addto-cart {display: none; position: fixed;z-index: 99;background-color: #fff;border: 1px solid #000;padding: 20px 30px 50px;top: 60.9453px; right: 85.1172px;}
.box-pop-cart {width: 100%;float: left;max-width: 300px;}
.cart-label {width: 100%;float: left;}
.cart-label span{display: flex;align-items: center; font-size: 14px;}
.cart-label span img,.cart-label svg{fill: #000;height: 20px;margin-right: 10px;}
.cart-list {width: 100%;float: left;margin: 15px 0;}
.cart-list ul{width: 100%;float: left;}
li.cart-item {width: 100%;float: left;margin-bottom: 5px;padding-bottom: 5px;border-bottom:1px solid #dee2e6 ;}
li.cart-item:last-child{margin: 0;padding: 0;border: 0;}
.cart-item-thumb {height: 70px;width: 70px;float: left;}
.cart-item-thumb img {float: left;height: 70px;width: 70px;object-fit: cover;}
.cart-item-cont {width: calc(100% - 80px);float: left;margin-left: 10px;}
.item-cont-name{font-size: 14px;}
.item-cont-color{font-size: 14px;}
.cart-btn-group{width: 100%;float: left;}
.cart-close{position: absolute;right: 16px;top: 16px;cursor: pointer;}
.cart-close svg,.cart-close img{height: 20px;fill: #000;}
footer ul li svg,footer ul li img{fill: #fff;height: 24px;}
.footer-copyright{border-top: 1px solid #fff;padding-top: 30px;}
.btn-outline-dark.btn-icon svg{fill: #000;}
.btn-outline-dark.btn-icon:hover svg{fill: #fff;}

.box-filter-group{align-items: center;}
.box-filter-group  .dropdown-menu{min-width: 14rem;}
.dropdown-menu {border-radius: 0;border-color: #D8D8D8;padding: 0 15px 15px;z-index: 2;}
.dropdown-menu.check-group li:not(.filter-box-cont) {width: 100%;float: left;margin: 5px 0;}
.filter-box-cont {padding: 10px;width: calc(100% + 30px);margin-left: -15px;border-bottom: 1px solid #D8D8D8;margin-bottom: 10px;    display: flex;justify-content: space-between;align-items: center;}
.fil-price{width: 100%;float: left;border-radius: 0;font-size: 15px;border:1px solid #7D7D7D;}
.filter-title{font-size: 14px;}
.reset-filter{font-size: 14px;text-decoration: underline;}
.box-filter-group .open .dropdown-menu{display: block;}
.box-filter-group button{position: relative;padding: 0;text-align: left;}
.dropdown-toggle::after {background-image: url(../img/skin/arrow-down.svg);border: 0;width: 20px;height: 20px;background-repeat: no-repeat;background-size: 20px 20px;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}
.filter-h{font-size: 16px;margin-right: 5px;} 

.check-group { float:left; width:100%; text-align:left;}
.check-group .check-title { float:left; margin-right:20px; width:auto;  margin-bottom:10px;}
.check-group .check-line { float:left; margin-right: 20px; color:#ccc}
.check-group .check-list { float:left; width:100%; margin-bottom:5px; }
.section-unsubscribe-newsletter .check-group .box-group-inner  ul.check-list{max-height: 500px;overflow: hidden;overflow-y: scroll;}
.check-group.checkinline .check-title { margin-bottom:0px;}
.check-group.checkinline .check-list { margin-bottom:0px;}
.check-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;}
.check-group input[type=checkbox] { display:none;}
.check-group label:before { content: "";	display: inline-block; width:20px; height:20px;position:absolute; left:0; top:2px; background-color:#fff; border:1px solid #000;}
.check-group input[type=checkbox]:checked + label:before { background: #fff;}
.check-group label:after { content:""; position:absolute;} 
.check-group input[type=checkbox]:checked + label:after {width:20px; height:20px;background-image: url(../img/skin/icon-check.svg); background-repeat: no-repeat;background-size: 20px 20px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background-position: center;}
/* .check-group input[type=checkbox]:checked + label:after { width:10px; height:10px; background-image: url(../img/skin/icon-check.svg); background-repeat: no-repeat;background-size: 10px 10px;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}  */
.check-group.checkinline .check-list { width:auto;}
.check-group label a { text-decoration: underline;}

.tiny{font-size: 10px;}

.check-group { float:left; width:100%; text-align:left;}
.check-group .check-title { float:left; margin-right:20px; width:auto;  margin-bottom:10px;}
.check-group .check-line { float:left; margin-right: 20px; color:#ccc}
.check-group .check-list { float:left; width:100%; margin-bottom:5px; }
.section-unsubscribe-newsletter .check-group .box-group-inner  ul.check-list{max-height: 500px;overflow: hidden;overflow-y: scroll;}
.check-group.checkinline .check-title { margin-bottom:0px;}
.check-group.checkinline .check-list { margin-bottom:0px;}
.check-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px;margin-right: 15px;	margin-bottom:0px;}
.check-group input[type=radio] { display:none;}
.check-group label:before { content: "";	display: inline-block; width:20px; height:20px;position:absolute; left:0; top:2px; background-color:#fff; border:1px solid #000;}
.check-group input[type=radio]:checked + label:before { background: #fff;}
.check-group label:after { content:""; position:absolute;} 
.check-group input[type=radio]:checked + label:after {width:20px; height:20px;background-image: url(../img/skin/icon-check.svg); background-repeat: no-repeat;background-size: 20px 20px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background-position: center;}
/* .check-group input[type=checkbox]:checked + label:after { width:10px; height:10px; background-image: url(../img/skin/icon-check.svg); background-repeat: no-repeat;background-size: 10px 10px;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}  */
.check-group.checkinline .check-list { width:auto;}
.check-group label a { text-decoration: underline;}

.box-filter-list label{font-size: 14px;}
.box-filter-group .filter-sort .dropdown-menu{width: 10rem;}
.filter-sort label{width: 100%;margin: 0;text-align: center;}
.filter-sort  .check-group label::before{width: calc(100% + 30px);z-index: -1;left: -15px;height: 100%;top: 0;border: 0;}
.filter-sort  .dropdown-menu.check-group li:not(.filter-box-cont){margin: 0;}
.filter-sort .check-group input[type=radio]:checked + label:before {background: #eee;border: 0;width: calc(100% + 30px);z-index: -1;left: -15px;height: 100%;top: 0;}
.filter-sort .check-group label{padding:5px 0;}
.filter-sort .check-group label:hover:before{background-color: #eee;}
.filter-sort .check-group input[type=radio]:checked + label:after{content: none;}
.filter-sort  .check-group label:after{content: none;}
.filter-sort  .dropdown-menu{padding: 15px;min-width:10rem;}

.shopping-cart-item-count span {cursor:pointer; }
			
.shopping-cart{width: 100%;float: left;padding: 50px 0;}
.shopping-cart-item {width: 100%;float: left;display: flex;align-items: flex-start;padding:30px 0;border-bottom: 1px solid #D8D8D8;}
.shopping-cart-item:first-child{padding-top: 0;}
.shopping-cart-item-thumb{width: 120px;}
.shopping-cart-item img{width: 100%;}
.shopping-cart-item-cont {width: calc(75% - 40px);}
.shopping-cart-item-count {width: 30%;text-align: center;}
.shopping-cart-item-count .number {background-color: #EFEEEE;display: flex;align-items: center;justify-content: space-around;    width: calc(70% + 40px);}
.shopping-cart-item-count .minus, .plus {width: 20px;height: 100%;border-radius: 4px;padding: 8px 5px 8px 5px;display: inline-block;vertical-align: middle;text-align: center;}
.shopping-cart-item-count input {height: 53px;width: calc(50% - 20px);text-align: center;font-size: 16px;border: 0;border-radius: 0;display: inline-block;vertical-align: middle;background-color: #EFEEEE;}
.item-group {display: flex;flex-wrap: wrap;padding: 0 20px;}

.validate{font-size: 12px;margin-top: 10px;width: 100%;float: left;display: none;}
.form-floating>label {padding-left: 0;}
.bootstrap-select .dropdown-toggle:focus{outline: none !important;}

.from-select.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width: 100%;}
.from-select button.btn-light{padding-left: 0;color: #4f4f4f;background: #fff;border: 0;border-bottom: 1px solid #d8d8d8;border-radius: 0;}
.from-select.btn-check:active+.btn-light, .from-select.btn-check:checked+.btn-light, .from-select.btn-light.active, .from-select.btn-light:active, .from-select.show>.btn-light.dropdown-toggle{color: #4f4f4f; background: #fff;border-color: #d8d8d8;}
.btn-check:active+.btn-light:focus, .btn-check:checked+.btn-light:focus, .btn-light.active:focus, .btn-light:active:focus, .show>.btn-light.dropdown-toggle:focus{box-shadow: none;}
.from-select .dropdown-menu.show{padding: 0;}
.from-select .dropdown-item.active, .from-select .dropdown-item:active{background-color: #707070;color: #fff;}
.from-select .dropdown-item{padding: 10px 20px;}
.from-select.bootstrap-select .dropdown-toggle .filter-option-inner-inner{color: #707070;}
.form-floating{color: #707070;}
.dropup .dropdown-toggle::after{border: 0;}
.popup{position: fixed;top:0;left:0;width: 100%;height: 100%;display: none;align-items: center;justify-content: center;z-index: 99;}
.popup-bg{position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7); top: 0;left: 0;}
.box-popup {border: 1px solid #000;background-color: #fff;width: auto;height: auto;z-index: 1;padding:50px 30px 40px;min-width: 390px;position: relative;}
.pop-close{position: absolute;right: 15px;top: 15px;}
.order-detail p{word-break: break-word;}
.alert-cart{width: 100%;background-color: #EFEFEF ;border-top: 2px solid #005E9E;}
.alert-cart p{padding: 20px 40px;margin: 0;width: 100%;display: flex;align-items: center;}
.alert-cart span{background-color: #005E9E;border-radius: 100px;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;margin-right: 10px;}
.alert-cart span img,.alert-cart span svg{fill: #fff;height: 20px;}
.breadcrumb-item.active ,.breadcrumb-item.active a {color: #3E3F40;}
.box-breadcrumb-on-img .breadcrumb-item.active,.box-breadcrumb-on-img .breadcrumb-item.active a{color: #7c7c7c;}
.breadcrumb-item:not(.active) a{color: rgba(169, 170, 173, 1);}
.breadcrumb-item{font-size: 12px;}


/*  */
.box-overlap-bar{position: absolute;z-index: 1;bottom: -70px;}
.box-overlap-group{background-color: #fff;width: 100%;float: left;}
.overlap-bar-item {
  width: 100%;
  float: left;
  padding: 10px 10px 10px 60px;font-size: 14px;
}
.overlap-bar-item.active{background-color: #005E9E;}
.overlap-bar-item.active .overlap-bar-item-h{color: #fff;font-weight: 500;}
.overlap-bar-item.active .overlap-bar-item-h::before{background-color: #F7941D;}
.overlap-bar-item .overlap-bar-item-h{width: 100%;position: relative;padding: 10px 0;color: #005E9E;}
.overlap-bar-item .overlap-bar-item-h::before{content: "";position: absolute;width: 10px;height: 100%;left: -24px;top: 0;background-color: #005E9E;border-radius: 100px;}

.ele-tangle{position: absolute;width: 100%;float: left;}

.box-cont-abs {
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.box-cont-abs .box-cont {
  --cont-w-d: 80%;
  position: relative;
  width: var(--cont-w-d);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.box-img {
  width: 50%;
  position: relative;
  z-index: 1;
}
.box-cont-abs .box-content {
  position: absolute;
  padding: 50px 40px 40px calc(100% - var(--cont-w-d));
  left: calc(100% - var(--cont-w-d));
  width: var(--cont-w-d);
  top: 50%;
  transform: translateY(-40%);
}
.txt-quote{position: relative;}
.txt-quote::after{content: ""; position: absolute;width: 20px; height: 10px;top: 20px;left: -35px;background-color: #F7941D;}
.txt-quote::before{content: "";position: absolute;width: 20px; height: 10px;top: 20px;right: -35px;background-color: #F7941D;}
.box-list-logo {
}
.logo-item {
  text-align: center;
  width: 20%;
  margin-right: 70px;
}
.box-list-logo img{
  height: 100%;
    max-height: 70px;
    aspect-ratio: 3/2;
    object-fit: contain;
}
@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-175px * 18));
  }
}
.box-list-logo  .swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}

.confix-position{display: flex;width: 100%;}
.sec-banner-video video{max-height: 500px;object-fit: cover;position: relative;min-height: 500px;}

.footer-menu{display: flex;justify-content: space-around;}
.footer-menu ul{list-style: none;}
.footer-menu ul li a{color: #fff;}
.footer-menu > ul > li > a{font-weight: 500;}
.footer-menu > ul > li > ul > li:first-child{margin-top: 15px;}
.footer-menu > ul > li > ul > li{margin: 5px 0;}
.footer-menu > ul > li > ul > li a{color: #CDCED0;}

.card-overlay {position: relative;}
.card-overlay .overlay-hover{position: absolute;width: 100%;height: 100%;transition: all ease .4s;background: rgba(0, 0, 0, 0.50);opacity: 0;display: flex;align-items: center;justify-content: center;}
.card-overlay:hover .overlay-hover{opacity: 1;}
.card-overlay:hover .overlay-hover img{opacity: 1;}

/* 
.swiper {
    width: 100%;
    height: 100%;
  } */
  .swiper-gallery-top .swiper-pagination{bottom: 50px;}
  /*.popup-gallery .popup-container { width: 60vw; overflow: hidden; margin: 0 auto; position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%,-50%);
  }*/

  .popup-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
  }
  
  .popup-gallery .popup-container {
    width: 60vw;
    height: auto; /* Set height to auto to fit content */
    overflow: hidden;
  }
  
  
  
  /*
  .popup-gallery{
    position: relative;
    height: 100vh; 
  }
  
  .popup-gallery .popup-container {
    width: 60vw;
    overflow: hidden;
    margin: auto; 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }*/

  
  
  
 .popup-gallery .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}
 .popup-gallery .swiper-slide img ,.swiper-slide video{ display: block; width: 100%; height: 100%; object-fit: cover;}
 .popup-gallery .swiper {height: 450px; margin-left: auto; margin-right: auto; overflow: hidden; width: 100%;}
 .popup-gallery .swiper-slide { background-size: cover; background-position: center;}
 .popup-gallery .swiper-gallery-bottom {height: 127px;box-sizing: border-box;padding: 10px 0;}
 .popup-gallery .swiper-gallery-bottom .swiper-slide {width: 25%;}
 .popup-gallery .swiper-gallery-bottom .swiper-slide-thumb-active {opacity: 1;}
 .popup-gallery  .swiper-slide {border-radius: 10px;overflow: hidden;}
 .popup-gallery .swiper-pagination-bullet-active{background-color: #fff;}

 .popup-gallery .swiper-button-next,.popup-gallery .swiper-container-rtl .swiper-button-prev{background-image: none;width: 45px; height: 45px;}
 .popup-gallery .swiper-button-prev,.popup-gallery .swiper-container-rtl .swiper-button-next{background-image: none;width: 45px; height: 45px;}
 .popup-gallery .swiper-button-next img, .popup-gallery .swiper-button-prev img{width: 100%;}


 .swiper-button-next:after, .swiper-button-prev:after{
  display: none;
 }
  

 .sec-company-profile{background: linear-gradient(180deg, #002742 0%, #337EB1 100%);}
 /* .sec-company-profile{z-index: 1; background-image: url(../img/about/bg-about.jpg);background-repeat: no-repeat;background-size: 100%;background-position: top center;}
 .sec-company-profile::before{content: "";z-index: -1; position: absolute;bottom: 0;width: 100%;height: 100%;left: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 55.06%,#FFF  100%);} */
 .content-pd {
    width: 100%;
    float: left;
    padding: 2px 0 0;
}
img.img-roll {
    position: relative;
    /* margin-top: -8vw; */
    width: 90vw;
    float: left;
    left: calc(50% - 50vw);
}

.card.card-active-overlay{overflow: hidden;}
.card.card-active-overlay .card-body {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(0 0 0 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-service-list .card{height: calc(100% - 20px); padding: 10px 10px;transition: all ease .5s;}
.sec-service-list .card h6{font-size: 18px;color: #005E9E;}
.sec-service-list .card:hover{background-color: #F9A94A;color: #fff;}
.sec-service-list .card:hover h6{color: #fff;}

.card.card-active-overlay .card-body .card-group-overlay{}
.card.card-active-overlay .card-body .card-group-overlay .img-icon{width: 100px;height: 100px;}
.card.card-active-overlay .card-img-top{transition: all ease .5s;}
.card.card-active-overlay:hover .card-img-top{transform: scale(1.2);}

.ele-advantages{position: absolute;width: 100%;top: 0;left: 0;}
.card{margin-bottom: 20px;}

.thumb {
    width: 100%;
    float: left;
}
.thumb-body {
    padding: 10px 20px;
}
.sec{width: 100%;float: left;}
.thumb .icon-img{width: 60px;height: 60px;}

.sec-cont-tab  .thumb.active::before {
    content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
    background: linear-gradient(45deg, rgba(0, 86, 144, 0.00) 0%, #337EB1 32.29%, #E1871A 100%);z-index: -1;
}
.sec-cont-tab  .thumb.active small{display: none;}
.sec-cont-tab .thumb:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 86, 144, 0.00) 0%, #337EB1 32.29%, #E1871A 100%);
    color: #fff;
    z-index: -1;
}

.sec-cont-tab  .thumb{color: #fff;padding: 35px 0;}

.z-index-1{z-index: 1;}
.ele-skew{position: absolute;width: 100%;right: 0;top: 0;}



.swiper-center-bold{margin-top: 40px;}
.swiper-center-bold .swiper-container {
    position: relative;overflow: visible;
  }
  
  .swiper-center-bold   .swiper-container > .swiper-slide__content {
    position: absolute;
    top: 0;
  }

  .swiper-center-bold .swiper-wrapper{margin-left: -40px;}
  
  .swiper-center-bold  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms linear;
    transform: scale(1);padding: 5px;
  }
  .swiper-center-bold  .swiper-slide.swiper-slide-active {
    transform: scale(1.2);position: relative;z-index: 1;margin: 0 40px !important;
  }

  .swiper-center-bold  .swiper-slide img{border-radius: 8px;overflow: hidden;}
  
  .swiper-center-bold  .swiper-pagination-bullet{border: 1px solid #eee;}
  
  hr {
    height: 1px;
    border: 0.5px solid #005E9E;
    opacity: 1;
}
img.ele-contact {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 1px);object-fit: cover;
}
.bg-blur{position: relative;padding:0;}
.box-breadcrumb-on-img {
    position: absolute;z-index: 2;
}
/* .bg-blur:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(3px); 
    z-index: 1;
} */

.form-group input ,.form-group textarea{border-radius:8px;background: #F8F8F8;border: #F8F8F8;padding: 15px; transition: all ease .4s;}
.form-group input:hover ,.form-group textarea:hover{border-radius:8px;background: #F8F8F8;border: #F8F8F8;padding: 15px;}


.sec-list-projectref .card-title{font-size: 20px;}

.logo-item {
  text-align: center;
  width: 20%;
}

@media (min-width: 1600px){
.sec-hero-banner .box-content.pd{padding-top: 90px !important;}
}
@media (min-width: 1200px){
.g-xl-10, .gx-xl-10 {--bs-gutter-x: 9rem;}
}


@media (max-width: 1199.98px){
  h1,.h1{font-size: 36px;}
  h2,.h2{font-size: 28px;}
  h3,.h3{font-size: 26px;}
  h4,.h4{font-size: 24px;}
  h5,.h5{font-size: 22px;}
  h6,.h6{font-size: 18px;}
  .over-size{font-size: 42px;}

  .popup-gallery .popup-container{width: 80vw;}


  .box-cont-abs{justify-content: flex-end;}
  .box-img {width: 55%;left: -190px;}
  .box-cont-abs .box-content { padding: 50px 10px 40px calc(113% - var(--cont-w-d));}
  .box-cont-abs .box-cont {  --cont-w-d: 90%;}

  .box-logo{width: 50%;}
}
@media (max-width: 991.98px){



.box-cont{flex-wrap: wrap;}
.box-cont-l,.box-cont-r{width: 100%;}
.box-cont-l .cont-img{left: calc(0px - (100vw - 720px)/2);width: 100vw;}

.box-logo{text-align: center;}
.btn-menu{display: block;}
.menu-mobile {border-bottom:2px solid #015e9e!important; display: flex;justify-content: space-between;width: 100%;align-items: center;padding: 10px 15px;}
.menu-mobile > div{width: 33.33%;}
.menu-group-right{display: flex;align-items: center;justify-content: flex-start;}

ul.sub-menu {
    position: relative;
    top: 0;
    width: 100%;
    float: left;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: none;
}
li.menu-sub.has-sub::before {
    right: 0;
    top: 10px;
}
ul.sub-menu > li{padding-left: 20px;border-bottom: 1px solid #eee;}
.box-logo img{height: 50px;}
.box-search-mobile {padding: 15px;border-bottom: 1px solid #dee2e6!important;display: none;}
.box-search input {padding: 5px 10px 5px;}

.group-menu-end li {padding: 12px 0;}
header nav a { font-size: 16px;}
.box-group-menu{width: 100%;overflow: hidden;overflow-y: scroll;display: none;}

.box-search-mobile.active ~ .box-group-menu{max-height: calc(100vh - (76.9px + 68px));}
.box-group-menu {
    max-height: calc(100vh - 76.9px);
    position: absolute;
    background-color: #fff;
    height: 100vh;
}

.border-es{border-left:0;border-right:0;}
footer .box-content{text-align:center;}

.pop-addto-cart {top: 57.4453px; right: 17px;}
.slider__col{display: none;}





.box-overlap-bar {
  position: relative;
  z-index: 1;
  bottom: 0;
  margin-top: -121px;
}
.overlap-bar-item {
width: 100%;
float: left;
padding: 20px 20px 20px 70px;
}
.sec-about.pd{margin-top: -390px;padding-top: 350px;}

.box-cont-abs {
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.box-cont-abs .box-cont {
--cont-w-d: 100%;
position: relative;
width: var(--cont-w-d);
display: flex;
align-items: center;
justify-content: center;
}
.box-img{left: 0;width: 100%;}

.box-cont-abs .box-content {
position: relative;
padding: 30px;
left: 0;
width: var(--cont-w-d);
top: 0;
transform: none;
}

/* .box-list-logo{flex-wrap: wrap;} */
.logo-item {
width: 100%;
text-align: center;
margin: 50px 0;
}

.box-cont-abs .box-cont::before {
  content: "";
  width: 100%;
  height: 70%;
  position: absolute;
  background: #fff;
  bottom: 0;
  left: 0;
}
.logo-item {
  width: 33.33%;
  text-align: center;
  margin: 20px 0;
}
/* .box-list-logo img {
width: 120px;
} */

}

@media (max-width: 767.98px){
  .pd{padding: 30px 0;}
  .sec-hero-banner .box-content.pd{padding-top: 30px !important;}
  .shopping-cart{padding: 0;}
  .alert-cart{margin-bottom: 30px;}
  .box-cont-l .cont-img{left: calc(0px - (100vw - 540px)/2);}
  .box-subscribe{width: 100%;margin: 20px 0 0;}

  .popup-gallery .popup-container{width: 95vw;}
  .popup-gallery .swiper-gallery-bottom{height: 75px;}


  .sec-cont-tab .thumb .thumb-body{    padding: 5px 10px 0px;}
  .sec-cont-tab .thumb .thumb-body p ,.sec-cont-tab .thumb .thumb-body small {display: none;}
  .sec-cont-tab .thumb .thumb-body .thumb-h.h6{    font-size: 13px;}

  img.ele-contact{position: relative;}
  .bg-blur{    position: absolute !important;z-index: 1;width: 100%;height: 100%;}
  .box-contact-form{    position: relative; z-index: 2;}
  .box-contact-form-bg{    background-color: #fff; margin-top: 50px; margin-bottom: 40px; border-radius: 10px; padding: 20px;}
  .box-contact-form .btn.btn-ctr-primary{width: 100%;}

  .footer-menu{flex-wrap: wrap;}
  .footer-menu > ul {
    list-style: none;
    width: 100%;
    margin: 10px 0;
  }

  .box-cont-abs .box-cont::before{height: 80%;}

  /* .box-list-logo img {
    width: 87px;
    } */
  
}

@media (max-width: 575.98px){

  .box-content br{display: none;}
  .box-cont-l .cont-img{left:0;}

  .sec-company-profile{padding: 0;}
  .sec-company-profile .box-content.text-center.mb-5{}
  .content-pd{padding-top: 0;}
  .sec-about .box-cont-abs {
      padding-top: 20px;
      margin-top: 0 !important;
  }
  .sec-about.pd{padding-top: 360px;}

  .home-banner .cont-banner .container {
      display: flex;
      align-items: end;
      padding-bottom: 80px;
  }

  h1{font-size: 32px;}
  p{font-size: 14px;}
  a.btn {
      font-size: 14px;
      padding: 5px 40px;
  }
  .home-banner  .cont-banner a{margin-bottom: 0 !important; }
  .overlap-bar-item{padding: 10px 10px 10px 60px;}
  .overlap-bar-item-h {
      font-size: 15px;
  }
  .home-banner  .cont-banner .fw.mt-3{margin-top: 0 !important;} 
  .overlap-bar-item .overlap-bar-item-h::before{width: 5px; height: 90%; left: -24px; top: 5%;}
  .sec-about .box-content h2{font-size: 24px;}
  img.img-roll {width: 100vw;}
}

@media (max-width: 419.98px){
.pop-addto-cart{max-width: 90vw;}
.box-img-overlay .h1{font-size: 30px;}
.box-cont-abs .box-cont::before{height: 85%;}
.sec-about .box-content h2{font-size: 20px;}


}
@media (max-width: 325.98px){
  h1,.h1{font-size: 28px;}
  h2,.h2{font-size: 24px;}
  h3,.h3{font-size: 20px;}
}

.swiper-container {
  -webkit-transform: translate3d(0,0,0) !important;
}

@media (max-width: 991.98px){
  footer .box-logo{
    width: 100%;
  }
}