body{
	font-family: 'Kanit', sans-serif !important;
 font-weight: 100;
 font-size: 16px !important;
}
:root{
 --primary: #e4222a;
 --hov-primary: #be1d23;
 --soft-primary: #ffdedf;
 --light: #f9f9f9;
}
body .btn-outline-light {
 border-color: #a9a9a9;
 color: #a9a9a9;
}
body .btn ,
body .form-control {
 font-size: 16px;
}
body .btn.disabled ,
body .btn:disabled {
    opacity: .4;
}
#empty {
 display: block;
}
div+#empty {
 display: none;
}
#val-search-province {
 max-height: 400px;
 overflow: auto;
 width: 100%;
 min-width: auto;
}
.strikeOut {
 position: relative;
}
.strikeOut::after {
 content: "";
 border-top: 1px solid #8d8d8d;
 position: absolute;
 left:5px;
 top: 50%;
 width: calc(100% - 10px);
}
.file-preview.box.sm.thumb10x10 .thumb {
 height: 98px;
}
.note-editable {
 background-color: #f9f9f9 !important;
}
.note-editor.note-frame .panel-heading.note-toolbar {
 background: #f1f2f4;
}
.note-toolbar .note-btn {
 background: #f9f9f9;
}
.aiz-user-sidenav .aiz-side-nav-list .aiz-side-nav-icon {
 font-size: 24px;
}
.aiz-user-sidenav .aiz-side-nav-list .aiz-side-nav-link {
 font-size: initial;
 font-weight: 100;
}
.avatar img {
 border: 2px solid transparent;
 background-color: rgb(255 255 255 / 70%);
}
.boxOfProduct span.cart-count:not(:empty) {
 padding: 2px;
}
.boxOfProduct span.cart-count:not(:empty)::before {
 content: "(";
}
.boxOfProduct span.cart-count:not(:empty)::after {
 content: ")";
}
.first-child-border > [class*="border"]:first-child {
 border: 0px !important;
}
select {
 padding-right: 30px !important;
 background: #fff url(../images/icon-select.png) no-repeat calc(100% - 10px) center;
 -webkit-appearance: none;
 -webkit-border-radius: 2px;
 -webkit-padding-end: 30px;
 -webkit-padding-start: 9px;
 -webkit-user-select: none;
 -moz-appearance: none;
 -moz-padding-end: 30px;
 -moz-padding-start: 9px;
 -moz-user-select: none;
}
select.aiz-selectpicker+button.btn.dropdown-toggle {
 padding-top: 8px !important;
 padding-bottom: 8px !important;
}
.btn-style {
 background-color: #f3f3f3;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
}
.btn-style:hover ,
.btn-style.active {
 color: var(--primary) !important;
 background-color: var(--soft-primary) !important;
}
#cart_items:not([data-cart="0"]) #list_cart {
 display: block;
}
#list_cart {
 display: none;
}
#cart_items:not([data-cart="0"]) #list_cart+div {
 display: none;
}
body .aiz-table td ,
body .aiz-table th {
 padding: 10px 5px;
 font-size: 14px;
 font-weight: normal;
}
input[type=checkbox] ,
input[type=radio] {
 width: 17px;
 height: 17px;
 vertical-align: sub;
 margin-right: 7px;
 filter: hue-rotate(145deg);
}
.box-btnchecked input:checked+label.btn.btn-outline-secondary {
 border-color: var(--primary);
 color: var(--primary);
 background-color: #fff;
}
img {
 object-fit: cover;
 max-width: 100%;
}
.img {
	overflow: hidden;
	position: relative;
}
	.img img {
		display: block;
		width: 100%;
		transition: transform .8s ease;
	}
	.img:hover img {
		transform: scale(1.1);
	}
	.img .src-img {
  background: rgba(59, 120, 132, 0.08) no-repeat center;
  background-size: cover;
  transition: transform .8s ease;
	}
	.img:hover .src-img {
		transform: scale(1.1);
	}
	
.pagination-style2 .pagination {
 padding-left: 10px;
 padding-right: 90px;
 position: relative;
 counter-reset: my-sec-counter;
 padding-top: 0px !important;
 margin-bottom: 0px;
}
 .pagination-style2 .pagination li.page-item {
  opacity: 0;
  display: flex;
  align-items: center;
 }
 .pagination-style2 .pagination li.page-item.active {
  opacity: 1;
  position: relative;
 }
  .pagination-style2 .pagination li.page-item .page-link {
   background-color: transparent !important;
   border: 0px;
   color: var(--primary) !important;
   font-size: 17px;
   min-width: 10px;
  }

 .pagination-style2 .pagination li.page-item:first-child {
  right: 44px;
  opacity: 1;
  position: absolute;
 }
  .pagination-style2 .pagination li.page-item:first-child .page-link {
   font-size: 24px;
   border: 1px solid #a9a9a9;
   color: #afafaf !important;
   border-radius: 4px !important;
   min-width: 34px;
   min-height: 34px;
   line-height: 34px;
   opacity: 1;
   position: relative;
  }
  
 .pagination-style2 .pagination li.page-item:last-child {
  right: 0px;
  opacity: 1;
  position: absolute;
 }
  .pagination-style2 .pagination li.page-item:last-child .page-link {
   font-size: 24px;
   min-width: 34px;
   min-height: 34px;
   line-height: 34px;
   background-color: var(--primary) !important;
   color: #fff !important;
   border-radius: 4px !important;
   border: 1px solid transparent;
   opacity: 1;
   position: relative;
  }
   .pagination-style2 .pagination li.page-item:not(.active) a:not([aria-label]) {
    position: absolute;
    opacity: 0;
    z-index: -1;
   }
   .pagination-style2 .pagination li.page-item.active a:not([aria-label]) {
    order: 1;
   }

 .pagination-style2 .pagination li.page-item:nth-last-child(2) {
  opacity: 1;
 }
 .pagination-style2 .pagination li.page-item:nth-last-child(2) .page-link {
  color: #44444f !important;
 }
  .pagination-style2 .pagination li.page-item:nth-last-child(2)::before {
   content: "/";
   order: 2;
   padding: 4px;
  }
  .pagination-style2 .pagination li.page-item:nth-last-child(2)::after {
   opacity: 1 !important;
   position: relative !important;
  }
  .pagination-style2 .pagination li.page-item:not(:last-child):not(:first-child)::after {
   counter-increment: my-sec-counter;
   content: counter(my-sec-counter) " ";
   display: block !important;
   float: right;
   opacity: 0;
   order: 3;
   position: absolute;
  }

#map{
 width: 100%;
 height: 250px;
}
#edit_map{
 width: 100%;
 height: 250px;
}
.pac-container {
 z-index: 100000;
}
.ProductType {
 
}
 .ProductType label {
  margin-left: 20px;
 }
 .ProductType label:first-child {
  margin-left: 0px;
 }
 
#navbarNav {
 position: fixed !important;
 left: -400px !important;
 top: 0px !important;
 height: 100vh;
 transform: none !important;
 border: 0;
 width: 300px;
 transition: .3s ease-in-out;
 display: block !important;
 background-color: #fff;
 -webkit-box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
 box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
 z-index: 1031;
}
#navbarNav> div {
 overflow-y: auto;
 max-height: calc(100vh - 74px);
}
#navbarNav.supplier> div {
 max-height: 100%;
}
body.menuShow #navbarNav {
 left: 0px !important;
}
.sticky-top {
 position: sticky;
 position: -o-sticky;
 position: -moz-sticky;
 position: -webkit-sticky;
 top: 0px;
 z-index: 1030;
 background-color: #fff;
}
 
body {
 transition: background-color .5s;
}
body.menuShow {
 background-color: #000;
 overflow-y: hidden;
}
#content {
 background-color: #fff;
}
body.menuShow #content ,
body.menuShow section ,
body.menuShow footer {
 opacity: 0.8;
}
body.menuShow header * ,
body.menuShow #content * ,
body.menuShow section * ,
body.menuShow footer * {
 pointer-events: none;
}
.fixed-bottom {
 z-index: 1029;
}
 
#header-search-province {
 height: calc(1.3125rem + 1.2rem + 5px);
 width: 173px;
}
#header-search-province::before {
 content: "";
 border-left: 1px solid #b5b5b5;
 position: absolute;
 right: 0px;
 height: 24px;
}
#lang-change ul.dropdown-menu {
 padding: 0px;
}
#lang-change li.active::after {
 display: none;
}
#mail-offer {
 font-family: 'Line Awesome Free','Kanit';
}
#hover-category-menu {
 margin-top: -2px;
}
div#category-sidebar > ul > li > a:not(:hover) {
 color: #ffffff;
}
.hover-category-menu .all-category::before {
 border-width: 0px 7px 7px 7px;
 right: auto;
 left: 18px;
}
.hover-category-menu .all-category::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 height: 12px;
 top: -8px;
}
header .box-menu li.active::after {
 border-bottom: 2px solid var(--primary);
 content: "";
 position: absolute;
 left: 15px;
 right: 15px;
 bottom: 0px;
}
header .dropdown-item {
 background-color: #f3f3f3;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
}
header .dropdown-item.active ,
header .dropdown-item:hover ,
header .dropdown-item:active {
 color: var(--primary) !important;
 background-color: var(--soft-primary) !important;
}

body .card {
 box-shadow: none;
}

header {
 position: sticky;
 position: -o-sticky;
 position: -moz-sticky;
 position: -webkit-sticky;
 top: 0px;
 z-index: 1030;
 background-color: #ffffff;
 transition: top .3s;
}
 header .navbar-toggler-icon {
	 background: none;
	 position: relative;
	 width: 32px;
	}
		header .navbar-toggler-icon:before {
		 height: 3px;
		 width: 32px;
		 position: absolute;
		 top: 0;
		 right: 0;
		 bottom: 0;
		 left: 0;
		 background: var(--primary);
		 transition: transform ease .5s;
		 content: '';
		 display: block;
		 margin: auto;
		}
		header button[aria-expanded="true"] .navbar-toggler-icon:before {
		 transition: transform .5s ease .5s;
		 opacity: 1;
		 transform: rotate(-40deg);
		}
		header .navbar-toggler-icon:after {
		 height: 3px;
		 width: 32px;
		 position: absolute;
		 top: 0;
		 right: 0;
		 bottom: 0;
		 left: 0;
		 background: var(--primary);
		 box-shadow: 0 8px 0 var(--primary), 0 -8px 0 var(--primary);
		 transition: transform ease .5s,box-shadow .5s ease .5s;
		 content: '';
		 display: block;
		 margin: auto;
		}
		header button[aria-expanded="true"] .navbar-toggler-icon:after {
		 transition: transform .5s ease .5s,box-shadow ease .5s;
		 box-shadow: 0 0 0;
		 transform: rotate(40deg);
		}
		
.b-sticky {
 position: sticky;
 position: -o-sticky;
 position: -moz-sticky;
 position: -webkit-sticky;
 top: 150px;
 transition: top .5s;
}
.b-sticky.supplier {
 top: 85px;
}
 .b-sticky a[href="#collapseProductType"]::after {
  content: "\f106";
  float: right;
  font: normal normal normal 21px/1 FontAwesome;
  transition: .5s;
  transform: rotate(180deg);
 }
 .b-sticky a[href="#collapseProductType"]:not(.collapsed):not([aria-expanded="false"])::after {
  transform: rotate(0deg);
 }
 
span.box-or {
 width: 100%;
 position: relative;
 display: flex;
 margin: auto;
}
span.box-or.vertical {
 width: auto;
 height: 100%;
}
 span.box-or::before {
  content: "";
  border-top: 1px solid rgba(0,0,0,.1);
  width: 100%;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
 }
 span.box-or.vertical::before {
  width: auto;
  height: 100%;
  border-left: 1px solid rgba(0,0,0,.1);
 }
 span.box-or b {
  background: #dcdcdc;
  padding: 7px;
  border-radius: 50%;
  margin: 15px auto;
  display: inline-block;
  z-index: 1;
  color: #848484;
  font-size: 13px;
  position: relative;
  aspect-ratio: 1;
 }
 span.box-or.vertical b {
  margin: auto;
  height: max-content;
 }
 
a.btn-face ,
a.btn-line {
 display: flex;
 background-color: #3d5b96;
 color: #fff !important;
 align-items: center;
 justify-content: center;
}
	a.btn-face img {
  width: 21px !important;
  margin: 0px !important;
  margin-right: 4px !important;
	}
	
a.btn-line {
 background-color: #0cc42f;
}
	a.btn-line img {
  width: 21px !important;
  margin: 0px !important;
  margin-right: 4px !important;
	}
 
.box-countdown {
 float: right;
 display: flex;
 align-items: end;
 height: 30px;
 margin-right: 8px;
}
.timeTo {
 font-size: 24px;
 line-height: 140%;
 font-weight: 500;
 height: 33px;
 margin-left: 7px;
 font-style: italic;
}
 .timeTo span {
  vertical-align: super;
  margin-right: 5px;
 }
 .timeTo div {
 	position: relative;
 	display: inline-block;
 	width: 18px;
 	height: 36px;
 	overflow: hidden;
 }
 .timeTo ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	position: absolute;
 	left: 0px !important;
 }
	.timeTo .transition {
  -webkit-transition: top 400ms linear;
  -moz-transition: top 400ms linear;
  -ms-transition: top 400ms linear;
  -o-transition: top 400ms linear;
  transition: top 400ms linear;
 }
@media (min-width: 1012px) {
 .timeTo.sizeB div {
  width: 24px;
  transform: scale(1.5);
  transform-origin: left;
 } 
 .timeTo.sizeB span {
  margin-right: -3px;
  margin-left: 13px;
 }
 .timeTo.sizeB ul {
  left: 50% !important;
  transform: translateX(-50%);
 }
 .timeTo.sizeB {
  margin-bottom: 7px;
 }
}

body .progress {
 height: 6px;
}
.box-ending-countdown {
 display: flex;
 justify-content: space-between;
 align-items: end;
 margin-bottom: 20px;
}

.pagination .page-item {
	margin: 0px;
}
	.pagination .page-link {
  color: #565656;
  border-radius: 0px !important;
  border: 1px solid #dee2e6;
	}
		.pagination .page-item.active .page-link {
   background-color: var(--primary);
   border-color: var(--primary);
   color: #fff;
		}
		.pagination .page-item.disabled .page-link {
   border-radius: 0px !important;
   border: 1px solid #dee2e6;
   opacity: 0.5;
		}
			.pagination .page-item .page-link[href="javascript:void(0)"] {
    cursor: default !important;
    color: #565656;
    background-color: transparent;
    border-color: transparent;
   }
 
.breadcrumb-item {
 
}
 .breadcrumb-item a {
  color: #6c757d;
 }
 .breadcrumb-item:first-child a {
  color: var(--primary) !important;
 }
 .breadcrumb-item+.breadcrumb-item::before {
  content: "\f105";
  font: normal normal normal 14px/1.9 FontAwesome;
 }

.cookie-con-head {
 position: fixed;
 z-index: 1033;
 padding: 20px;
 padding-right: 43px;
 background-color: #f2f3f8;
 bottom: 0px;
 left: 50%;
 transform: translate(-50%,100%);
 width: 100%;
 box-sizing: border-box;
 max-width: 1080px;
 border: 1px solid var(--primary);
 box-shadow: 0 0 8px 0px rgb(0 0 0 / 4%);
}
.cookie-con-head.show {
 transform: translate(-50%,0%);
 transition: transform .5s;
}
 .cookie-con-head .clostcookie {
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  right: 0px;
  top: 0px;
  cursor: pointer;
  position: absolute;
 }
 .cookie-con-head .inner-cookie {
  position: relative;
  padding-right: 135px;
 }
 .cookie-con-head .inner-cookie a {
  padding: 0px 5px;
  text-decoration: underline !important;
 }
@media (max-width: 1112px) {
 .cookie-con-head .inner-cookie {
  padding-right: 0px;
  text-align: left;
 }
}
.cookie-con-head .inner-cookie .button-submit {
 position: absolute;
 right: 0px;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
}
.cookie-con-head .inner-cookie .button-submit a {
 color: #fff;
}
@media (max-width: 1112px) {
 .cookie-con-head .inner-cookie .button-submit {
  position: relative;
  margin-top: 10px;
  transform: none;
  margin-left: 5px;
 }
}
.cookie-con-head .inner-cookie .button-submit:hover {
 opacity: 0.6;
}

.aiz-table.footable > tbody > tr+tr.footable-empty ,
.list-group li.list-group-item+li.footable-empty {
 display: none;
}
.list-group li.footable-empty {
 text-align: center;
 display: block;
 padding: 37px;
}
 .list-group li.footable-empty:before {
  content: "\f119";
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 60px;
  opacity: 0.5;
  display: block;
  margin-bottom: -18px;
 }

li.list-group-item {
 background-color: transparent;
}
table.table-style2 td ,
table.table-style2 th {
 border: 0px;
 padding: 10px 5px;
}

.owl-nav {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 0px;
	transform: translateY(-50%);
}
	.owl-nav button {
		display: flex;
		align-items: center;
		transform: translateY(-50%);
		position: absolute;
		transition: opacity .5s;
		opacity: 0.4;
  background-color: var(--primary);
  color: #fff;
  padding: 7px;
  border-radius: .25rem;
	}
	.owl-nav button.disabled {
		opacity: 0;
 }
	.owl-nav button:not(.disabled):hover {
		opacity: 1;
	}
		.owl-prev {
			float: left;
			left: 0px
		}
		.owl-next {
			float: right;
			right: 0px;
		}
		.owl-nav img {
			display: block;
	  width: 40px;
	  height: 40px;
	  padding: 8px 3px 8px 8px;
	  filter: grayscale(1);
	  object-fit: contain;
	  transition: .5s;
	  box-sizing: border-box;
	  background-color: rgba(0, 0, 0, 0.4);
	  border-radius: 50%;
		}
			.owl-nav .owl-prev img {
				transform: rotate(180deg);
			}
			.owl-nav .owl-next img {
    margin-left: auto;
			}
			
.owl-dots {
	margin: 5px auto;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, -50%);
}
	.owl-dot {
		width: 15px;
  height: 15px;
  display: block;
  float: left;
  margin: 2px 5px;
  border-radius: 50%;
  background-color: #f5f7f7;
  transition: .5s;
  border: 4px solid #f5f7f7;
 }
		.owl-dot.active {
	  background-color: var(--primary);
		}

.o-prev ,
.o-next {
 display: inline-block;
 position: absolute;
 top: 50%;
 cursor: pointer;
 z-index: 1;
 padding: 2px 3px;
}
.o-prev {
	left: 1%;
}	
.o-next {
 transform: translateY(-50%);
 right: 1%;
}
@media only screen and (min-width: 1400px) {
	.o-prev {
		left: 4%;
	}
	.o-next {
  right: 4%;
	}
}
.arrow-default {
 float: right;
}
	.arrow-default .o-prev {
		position: initial;
 	margin-right: 6px;
	}
		
	.arrow-default .o-next {
		transform: none;
		position: initial;
	}
	
.text-line1 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.text-line2 ,
.text-line3 ,
.text-line4 ,
.text-line5 {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}
.text-line2 {
 -webkit-line-clamp: 2;
}
.text-line3 {
 -webkit-line-clamp: 3;
}
.text-line4 {
 -webkit-line-clamp: 4;
}
.text-line5 {
 -webkit-line-clamp: 5;
}

.box-detail img {
 max-width: 100%;
}
	
 .box-showImg {
  padding-bottom: 20px;
	}
 	.box-showImg .zoom-box img {
   border-radius: 10px;
 	}
		.box-showImg .owl-carousel {
	  margin: 3px -3px;
	  width: calc(100% + 6px);
		}		
			.box-showImg .item {
		  padding: 3px;
			}
			.box-showImg .owl-carousel .owl-item img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
   }
				.box-showImg a.active {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  left: 0px;
			  top: 0px;
				}
				
		.box-showImg .item a .src-img {
	  opacity: 0.7;
		}
		.box-showImg .item a.a-active .src-img {
   opacity: 1;
		}		
		.box-showImg .owl-nav img {
	  background-color: #297adc;
	  filter: none;
	  width: 30px;
	  height: 30px;
	  padding: 8px 6px 8px 8px;
		}
		.box-showImg .owl-prev {
   left: -11px;
  }
		.box-showImg .owl-next {
   right: -11px;
  }
		.box-showImg .owl-nav button {
	  opacity: 1;
	  border: 0px;
		}
		
.box-Category {
 
}
 .box-Category .owl-carousel .owl-stage {
  display: flex;
  flex-flow: wrap;
 }
  .box-Category .item {
   min-height: 175px;
   background-color: #f8f8f8;
   padding: 15px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   font-size: 14px;
  }
  
.box-slide {
 
}
 .box-slide .owl-carousel .owl-stage {
  display: flex;
  flex-flow: wrap;
 }
  .box-slide .item {

  }
  
section.box-products {
 padding-bottom: 30px;
 margin: 0px !important;
}
	.box-products .box-List {

	}
	.box-products .box-List .card {
  margin-bottom: 0px;
  height: 100%;
	}
 	.box-products .card .card-body {
   padding: 0px;
   border-radius: 0px;
   background-color: #fff;
  }
 		.box-products .box-List .list {
 	  padding: 0px;
 	  margin-bottom: 6px;
 	  height: 100%;
 		}
 			.box-products .box-List a {
 				color: #000;
 			}
 			.box-products .box-List a.a-wishlist {
     position: absolute;
     top: 0px;
     left: 0px;
     padding: 10px;
     aspect-ratio: 1;
     z-index: 1;
    }
    .box-products .box-List a.a-wishlist i {
     margin-left: 0px;
     font-size: 20px;
    }
    a.a-wishlist i {
     color: #8d8d8d !important;
    }
    .box-products .box-List a.a-wishlist.active i ,
    a.a-wishlist.active i {
     color: #f44336 !important;
    }
    a.a-wishlist:not(.active) i.fa-heart:before {
     content: "\f08a";
    }
 			.box-products .box-List .reduce {
     background-color: var(--primary);
     color: #fff;
     min-width: 50px;
     padding: 6px;
     position: absolute;
     right: 0px;
     top: 0px;
     z-index: 1;
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
    }
 			.box-products .box-List .basket {
     background-color: rgba(0, 0, 0, 0.2);
     color: #fff;
     padding: 3px 10px;
     position: absolute;
     right: 0px;
     top: 11px;
     z-index: 1;
     border-radius: 8px 0px 0px 8px;
    }
    .box-products .box-List .basket:empty {
     display: none;
    }
    .box-products .box-List .basket:before {
     content: "\f07a";
     font-family: 'Line Awesome Free';
     font-weight: 900;
     font-size: 19px;
     margin-right: 3px;
     line-height: normal;
    }
 			.box-products .box-List .box-text {
 				padding: 20px 15px 15px 15px;
 				font-size: 0.8em;
 				z-index: 5;
 				position: relative;
 				background-color: #fff;
 			}
 				.box-products .box-List .box-text h6 {
 					display: -webkit-inline-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 0px;
 				}
 				.box-products .box-List .box-text span {
 					display: block;
 			  color: #757575;
 			  font-size: 13px;
 			  line-height: 1;
      display: -webkit-inline-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      width: 100%;
 				}
 				
 			.box-products .box-List .price {
 				font-size: 21px;
 				font-weight: 500;
 				padding: 0px 15px;
 				display: block;
 				z-index: 5;
 				position: relative;
 				background-color: #fff;
 				display: flex;
 				align-items: center;
	    justify-content: flex-end;
 			}
 			.box-products .box-List .price::before, .box-products .box-List .price b::before {
     /* content: "฿"; */
     margin-right: 3px;
    }
 			.box-products .box-List .reduce + .price {
 		  color: var(--primary);
 			}
 				.box-products .box-List .card-body b {
				  font-weight: 100;
				  color: #8d8d8d;
				  position: relative;
				  order: -1;
				  font-size: 16px;
				  line-height: 1;
				 }
 				.box-products .box-List .card-body b::after {
      content: "";
      border-top: 1px solid #8d8d8d;
      position: absolute;
      left: 0px;
      top: 50%;
      width: 100%;
 				}
 				.box-products .box-List .card-body i {
      margin-right: auto;
      margin-left: 5px;
      font-style: normal;
      font-weight: 100;
      color: #000000;
      position: relative;
      order: -1;
      font-size: 16px;
     }
 				
 	.box-products .card .card-footer {
   padding: 15px;
   border: 0;
   display: block;
  }
   .box-products .card .card-footer .btn-group.quantity .btn {
    height: 26px;
    width: calc(100% - 40px);
    border-color: transparent;
   }
    .box-products .card .card-footer .btn-group.quantity {
     width: 63px;
     margin-right: 3px;
     border: 1px solid #ccc;
    }
     .box-products .card .card-footer .btn-group.quantity button.btn {
      width: 20px;
     }
      .box-products .card .card-footer .btn-group.quantity .btn.btn-plus:before ,
      .box-products .card .card-footer .btn-group.quantity .btn.btn-delete:before {
       width: 10px;
      }
      .box-products .card .card-footer .btn-group.quantity .btn.btn-plus:after {
       height: 10px;
      }
      
    .box-products .card .card-footer span {
     font-size: 11px;
    }
    .box-products .card .card-footer span.sum {
     display: inline-block;
     color: var(--primary);
    }

 .product-quantity {
  
 }
  .product-quantity .btn-sm.btn-circle {
   border-radius: 0px !important;
  }
  .product-quantity > div {
   border: 1px solid #e3e3e3;
   margin: 0px !important;
   border-radius: 4px !important;
   overflow: hidden;
  }

	.btn-group.quantity {
  border-radius: .25rem;
  max-width: 142px;
	}
		.btn-group.quantity * {
			height: 35px;
		}
		.btn-group.quantity .btn {
	  display: inline-block;
	  padding: 3px;
	  margin-bottom: 0;
	  font-size: 14px;
	  font-weight: 400;
	  line-height: 1.42857143;
	  text-align: center;
	  white-space: nowrap;
	  vertical-align: middle;
	  -ms-touch-action: manipulation;
	  touch-action: manipulation;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  background-image: none;
   float: left;
   color: #333;
   height: 39px;
   border-color: #ccc;
  }
		.btn-group.quantity button.btn {
   width: 35px;
		}
		.btn-group.quantity .btn.btn-plus:after {
   content: "";
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
   width: 1px;
   height: 14px;
   border-left: 1px solid #424242;
		}
		.btn-group.quantity .btn.btn-plus:before ,
		.btn-group.quantity .btn.btn-delete:before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
   width: 14px;
   height: 1px;
   border-top: 1px solid #424242;
		}
		.btn-group.quantity .btn.disabled {
	  opacity: 0.4;
		}
		.btn-group.quantity input.btn {
			text-align: center;
		}
		.btn-group.quantity>.btn:first-child:not(:last-child) {
	  border-top-right-radius: 0;
	  border-bottom-right-radius: 0;
		}
		.btn-group.quantity>.btn:not(:first-child):not(:last-child) {
	  border-radius: 0;
		}
		.btn-group.quantity>.btn:last-child:not(:first-child) {
	  border-top-left-radius: 0;
	  border-bottom-left-radius: 0;
		}
		.btn-group.quantity input.btn {
	  padding: 6px 0px;
	  width: calc(100% - 68px);
		}

.accordion {
}
 .accordion > .card {
  border: 0;
  background-color: #f9f9f9;
 }
  .accordion > .card .card-header {
   padding: 0px;
   border: 0;
  }
   .accordion > .card .card-header h2 {
    width: 100%;
   }
   .accordion > .card .card-header .btn {
    color: #1b1b28;
    text-align: left;
    padding: 15px 22px;
    width: 100%;
    text-decoration: none;
   }
    .accordion > .card .card-header .btn::after {
     content: "";
     border: 0;
     content: "\f107";
     font-family: "Line Awesome Free";
     font-weight: 900;
     font-size: 80%;
     margin-left: 0.3rem;
     position: absolute;
     right: 28px;
     top: 50%;
     transform: rotate(-180deg) translatey(50%);
     transition: .5s;
    }
    .accordion > .card .card-header .btn.collapsed::after {
     transform: translatey(-50%);
    }
    
 .accordion > .card .collapse {
  
 }
  .accordion > .card .collapse .card-body,.accordion .card .collapsing .card-body {
   padding-top: 0px;
  }

.box-promotion {

}
 .box-promotion .item {
  position: relative;
  margin: 13px 0px;
 }
  .box-promotion img.img-banner {
   object-fit: cover;
   background-color: #162522;
   aspect-ratio: 1920/693;
   object-position: center;
   max-width: 100%;
   width: 100%;
  }
 	.box-promotion img.img-portrait {
 		display: none !important;
 	}
  .box-promotion .box-text {
   position: absolute;
   top: 50%;
   left: 0px;
   right: 0px;
   transform: translateY(-50%);
   padding: 5%;
  }
   .box-promotion .b-text {
    width: 40%;
   }
 	
.box-supplier-brand {
 
}
 .box-supplier-brand .owl-stage {
  display: flex;
  align-items: center;
  margin: auto;
 }
  .box-supplier-brand .owl-carousel {

  }
   .box-supplier-brand .owl-carousel img {
    height: 70px;
    width: auto !important;
   }
   
  .box-supplier-brand .owl-prev {
 			float: left;
 			left: -40px
 		}
 		.box-supplier-brand .owl-next {
 			float: right;
 			right: -40px;
 		}
 		
.delivery-channel {
 height: 160px;
 column-count: 3;
 column-fill: auto;
}
 .delivery-channel .btn-plus-delivery {
  background-color: #ecedf2;
  width: 100px;
  height: calc(100% - 13px);
  margin-top: 46px;
  backface-visibility: hidden;
  contain: size;
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  transform: translateY(10px);
 }
  .delivery-channel-input {
   position: relative;
   padding-top: 10px;
  }
   .delivery-channel-input .remove {
    position: absolute;
    top: 3px;
    right: 15px;
    width: auto;
    max-width: 100%;
   }
    .delivery-channel-input .remove .btn {
     position: absolute;
     padding: 0;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: #eaeaea;
    }
    
.box-brand {
 display: flex;
 flex-flow: wrap;
 justify-content: center;
}
 .box-brand .item {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: .5s;
 }
 .box-brand .item:hover {
  transform: scale(1.05);
  box-shadow: -4px 5px 3px 0px rgb(0 0 0 / 8%);
 }
  .box-brand .item img {
   max-height: 80px;
  }
  
section.box-coupon {
 
}
 .box-coupon .card .card-body {
  padding-bottom: 0px;
 }
 .box-coupon .card .card-footer {
  border-top: 0px;
  padding-top: 0px;
  padding-bottom: 20px;
 }
  .box-coupon .card .card-footer .btn.active {
   border-color: var(--primary);
   color: var(--primary);
   background-color: transparent;
   pointer-events: none;
  }

.box-news {
 
}
 .box-news .card ,
 .box-news .card-footer {
  background-color: transparent;
 }
  .box-news .card img {
   aspect-ratio: 600/440;
   border-radius: 0.25rem;
  }
    
#tt-boxedbutton  {
 top:130px;
 right:5px;
 position:fixed;
 z-index:8;
 display:inline-flex;
 flex-direction:column;
 flex-wrap:nowrap;
 justify-content:flex-start;
 align-content:center;
 align-items:flex-end;
 direction:ltr;
}
 #tt-boxedbutton .rtlbutton-color {
  margin-top:5px;
  position:relative;
 }
  #tt-boxedbutton .rtlbutton-color .box-btn {
   cursor:pointer;
   position:absolute;
   right:0;
   top:0;
  }
   #tt-boxedbutton .rtlbutton-color .box-description {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    position:absolute;
    right:0;
    top:0;
    padding:5px 16px 5px 11px;
    white-space:nowrap;
    background-color:#191919;
    height:30px;
    border-radius:6px;
    transition:.2s linear;
    -webkit-transform:translate(calc(100% + 5px),0);
    transform:translate(calc(100% + 5px),0);
    -webkit-transform:translate3d(calc(100% + 5px),0,0);
    transform:translate3d(calc(100% + 5px),0,0);
   }
    #tt-boxedbutton .rtlbutton-color .box-description .box-title {
     font-family:Hind,sans-serif;
     font-weight:600;
     color:#fff;
     letter-spacing:.04em;
     padding-right:7px;
    }
    #tt-boxedbutton .rtlbutton-color .box-description ul {
     display:flex;
     flex-direction:row;
     flex-wrap:nowrap;
     justify-content:flex-start;
     align-content:flex-start;
     align-items:center;
     list-style:none;
     margin:0;
     padding:0;
    }
     #tt-boxedbutton .rtlbutton-color .box-description ul li {
      width:20px;
      height:20px;
      margin-left:10px;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a {
      width:100%;
      height:100%;
      display:block;
      border-radius:50%;
      -webkit-transform:scale(1);
      transform:scale(1);
      transition:.2s linear;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch1 {
      background-color:#e4222a;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch2 {
      background-color:#08da97;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch3 {
      background-color:#8cc34b;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch4 {
      background-color:#ff9801;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch5 {
      background-color:#fe5722;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch6 {
      background-color:#2879fe;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch7 {
      background-color:#ef5e95;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a.colorswatch8 {
      background-color:#b704eb;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li a:hover {
      -webkit-transform:scale(1.3);
      transform:scale(1.3);
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li.active {
      pointer-events:none;
     }
     #tt-boxedbutton .rtlbutton-color .box-description ul li.active a:before {
      content: "\f00c";
      color: #fff;
      font-size: 14px;
      position: relative;
      font-family: FontAwesome;
      display: flex;
      justify-content: center;
      align-items: center;
     }
     
    #tt-boxedbutton .rtlbutton-color:hover .box-description {
     -webkit-transform:translate(0,0);
     transform:translate(0,0);
     -webkit-transform:translate3d(0,0,0);
     transform:translate3d(0,0,0);
    }
    html.ie #tt-boxedbutton .rtlbutton-color .box-description {
     right:-390px;
     width:380px;
    }
    html.ie #tt-boxedbutton .rtlbutton-color:hover .box-description {
     right:0;
    }
    
/* ---------------------------------------------------**** Mobile and Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
	.box-products .card .card-footer {
  position: initial !important;
	}
	.owl-nav button {
 	opacity: 1;
 }
 #tt-boxedbutton {
  display:none;
 }
 .front-header-search {
  width: 100vw !important;
  height: 100vh !important;
  display: flex;
  background-color: rgb(0 0 0 / 60%) !important;
  flex-direction: column;
  justify-content: center;
 }
 .front-header-search form {
  padding: 17px;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
 }
}

/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

 /* แนวตั้ง */
 @media only screen and (orientation:portrait){
  .box-banner .owl-carousel {
   padding-bottom: 30px !important;
  }
  .box-banner .owl-dots {
   bottom: -15px;
  }
  header #lang-change a.dropdown-toggle {
   display: none;
  }
  header #lang-change a.dropdown-toggle+.dropdown-menu {
   visibility: visible;
   opacity: 1;
   margin-top: 0 !important;
   position: initial;
   background: transparent;
   width: 100%;
   display: flex;
   box-shadow: none;
   border: 0px;
   justify-content: center;
  }
  header #lang-change a.dropdown-toggle+.dropdown-menu a {
   background: none;
  }
 }
 /* แนวนอน */
 @media only screen and (orientation:landscape){
  .front-header-search{
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   left: 0;
   opacity:0;
   transform: translateY(-100%);
   -webkit-transform: translateY(-100%);
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
  }
  .front-header-search.active{
   transform: translateY(0%);
   -webkit-transform: translateY(0%);
   opacity:1;
  }
 }
}

/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {
 .box-products .card .card-footer .btn-group.quantity {
  width: 80px;
 }
 .box-banner .owl-carousel {
  padding-bottom: 30px !important;
 }
 .box-banner .owl-dots {
  bottom: -15px;
 }
 .box-Category .item {
  padding: 15px 10px;
 }
 .box-products .card .card-footer .btn-group.quantity {
  width: 100%;
 }
 .breadcrumb {
  font-size: 13px;
 }
 .breadcrumb-item+.breadcrumb-item::before {
  font: normal normal normal 13px/1.7 FontAwesome;
 }
 .modal table-responsive {
  min-height: inherit !important;
 }
 header nav.navbar {
  max-height: calc(100vh - 70px);
  overflow: auto;
 }
 header #lang-change a.dropdown-toggle {
  display: none;
 }
 header #lang-change a.dropdown-toggle+.dropdown-menu {
  visibility: visible;
  opacity: 1;
  margin-top: 0 !important;
  position: initial;
  background: transparent;
  width: 100%;
  display: flex;
  box-shadow: none;
  border: 0px;
  justify-content: center;
 }
 header #lang-change a.dropdown-toggle+.dropdown-menu a {
  background: none;
 }
 .box-products .box-List .reduce {
  font-size: 13px;
  min-width: 30px;
 }
 .box-products .box-List .card-body i {
  display: none;
 }
 .box-products .box-List .card-body b {
  margin-right: auto;
 }
 .box-brand .item img {
  max-height: 55px;
 }
 .box-promotion img.img-banner {
  height: calc(100vh - 173px);
  object-fit: cover;
  object-position: top;
 }
 /* แนวตั้ง */
 @media only screen and (orientation:portrait){
  .delivery-channel .btn-plus-delivery {
   backface-visibility: initial;
   contain: none;
   transform: none;
   margin-top: 0px;
   height: auto;
   width: 100%;
   padding: 10px 0px !important;
   flex-flow: wrap;
   align-items: center;
  }
  .delivery-channel {
   column-count: auto;
   height: auto;
  }
  .delivery-channel-append {
   margin: 0px -7px;
   display: inline-block;
   width: 100%;
  }
  .delivery-channel-input {
   padding-top: 0px;
   width: calc(100%/2 - 14px);
   float: left;
   margin: 5px 7px;
  }
  .delivery-channel-input .remove {
   top: -7px;
  }
  .box-countdown {
   display: flex;
   height: auto;
   float: none;
   flex-direction: column;
   align-items: center;
   margin-top: 26px !important;
  }
  .box-ending-countdown {
   display: block;
  }
  .box-promotion img.img-portrait+img {
   display: none !important;
  }
  .box-promotion img.img-portrait {
   display: block !important;
  }
  .box-promotion .box-text {
   top: auto !important;
   bottom: 0px;
   transform: none !important;
  }
  .box-promotion .b-text {
   width: 100% !important;
  }
  span.box-or.vertical::before {
   width: 100%;
   height: auto;
   border-top: 1px solid rgba(0,0,0,.1);
  }
  span.box-or.vertical {
   width: 100%;
   padding: 15px 0px;
  }
	}
 /* แนวนอน */
 @media only screen and (orientation:landscape){
  .box-showImg .item {
	  max-width: 350px;
	  margin: auto;
		}
  .box-promotion .b-text {
   width: 90% !important;
  }
 }
}

.bootstrap-select-change-width:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%
}
.bootstrap-select-change-width.bootstrap-select .dropdown-menu {
  min-width: 25px !important;
}

select.form-control+.select2 .select2-selection {
  width: 100%;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  height: calc(1.3125rem + 1.2rem + 2px);
 }
 select.form-control+.select2 .select2-selection .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
 }

 div#category-sidebar {
  max-height: calc(100vh - 140px);
  overflow: auto;
 }
  div#category-sidebar > .row {
   display: block;
   column-count: 2;
  }
   div#category-sidebar > .row > .col-lg-6 {
    max-width: 100%;
    break-inside: avoid-column;
    padding-bottom: 15px;
   }