@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');

body{
	background:#e6e6e6;
}
img{
    /*display:block;*/
    max-width:100%;
    height:auto
} 
a:hover{text-decoration:none !important;}
.upper{  text-transform: uppercase;}
.boxItem-img{
    position:relative
}
.imgPrd{width:100%;height:auto;}
.boxCol,.boxCol3{padding:0px}
.colItem{
	padding:10px;
    background:#fff;
    -webkit-box-shadow:0 0 13px 0 rgba(82,63,105,.05);
    box-shadow:0 0 13px 0 rgba(82,63,105,.05);
    border:1px solid #ededed
}
.boxItemShow1{height:120px ;}
.boxItemShow2{height:230px ;}
.boxItemShow3{height:240px ;}
.boxItemShow4{height:260px ;}

.boxItemShowMobile1{height:300px ;}
.boxItemShowMobile2{height:245px ;}
.boxItemShowMobile3{height:250px ;}
.boxItemShowMobile4{height:365px ;}

.boxItem{padding:3px;}

.boxItem-img img{
    margin:auto;
    border-radius:4px
}
.boxItem-txt .title{
    font-size:17px;
    color:#48465b;
    font-weight:300;
    margin-top:0
}
.boxItem-txt .title a:hover{
    text-decoration:none;
    color:#ff9b31;
    cursor:pointer
}
.boxItem-txt{
    padding:10px 0 0 8px;
}
.boxItem-txt p{
    color:#6f6f6f;
    font-size:14px;
    margin-bottom:0
}

.boxPrice {
	position: absolute;
	bottom: 0px;
	left: 0px;
	color: #ffffff;
	background-color: #0000009c;
	padding: 1px 5px;
	/* clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); */
	border-radius: 0 20px 20px 0;
	font-size: 14px;
	font-family: kanit;
}

.boxCode{position:absolute;bottom:0;right:0;background-color:#00000070;color:#ffffff;padding:0px 3px 0 15px;clip-path: polygon(12% 0%, 100% 1%, 100% 100%, 0% 100%);}
.boxCat{
	border-left: 10px solid #ff0000;
	padding: 10px;
	background: #ffdede;
	color: #4f4e4e;
}
.boxImgGroup{
	margin: 3px;
	position: relative;
	height: 200px;
	background-size: cover;
	opacity: .5;
	border-radius: 5px;
	border: 1px solid #444444;
}
.boxGName{width:100%;position:absolute;left:0;background-color:#ffffffd9;text-align:center;padding:5px 20px;top:30%;z-index:1;}

.boxPrdType{
	position:absolute;
	top:9px;
	right:0;
	border:0px solid #ff0000;
	background:#fff;
	border-radius: 20px;
	padding: 1px;
	margin-right: 10px;
}
.boxBtnActive {
	border: 1px solid #2db300;
	color: #ffff !important;
	font-size:20px;
	background: #2b9d5d;
	padding: 0 8px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.boxG{border:1px solid #ff0000;}
.boxType{margin-top:5px !important;}
.box-bottom{position: absolute;width: 100%;bottom: 0;}
.ggbox {
	position: absolute;
	top: 0;
	left: 0;
	background:#ff00006e;
	color: #ffffffe6;
	font-style: italic;
	padding: 1px 8px 1px 5px;
	font-weight: 300;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.gMag{border:1px solid #bbbbbb;padding:3px 5px;border-radius:5px;margin:3px;}


.txtGName{
	font-weight:400;font-size:1.2em;width:100%;
}
.border-1{border:1px solid #cccccc;}



/*---------------- custom */
.holeSize{
	font-size:22px !important	;
	color:#ff0000 !important;
}

.floatRight{float:right!important;}

.mgn-top-0{margin-top:0!important;}
.mgn-top-3{margin-top:3px!important;}
.mgn-top-5{margin-top:5px!important;}
.mgn-top-10{margin-top:10px!important;}
.mgn-top-20{margin-top:20px!important;}
.mgn-top-30{margin-top:30px!important;}
.mgn-bottom-0{margin-bottom:0!important;}
.mgn-bottom-3{margin-bottom:3px!important;}
.mgn-bottom-5{margin-bottom:5px!important;}
.mgn-bottom-10{margin-bottom:10px!important;}
.mgn-tb-0{margin:0!important;}

.margin-0{margin:0px !important;}
.margin-3{margin:3px !important;}
.margin-5{margin: 5px !important;}
.margin-10{margin:5px !important;}

.padding-0{padding:0px !important;}
.padding-3{padding:3px!important;}
.padding-5{padding:5px!important;}
.padding-10{padding:10px!important;}
.padding-left-5{padding-left:5px!important;}
.padding-left-10{padding-left:10px!important;}
.padding-right-5{padding-right:5px!important;}
.padding-right-10{padding-right:10px!important;}

.padding-top-5{padding-top:5px!important;}
.padding-top-10{padding-top:10px!important;}
.padding-top-20{padding-top:20px!important;}

.padding-bottom-5{padding-bottom:5px!important;}

.padding-left-5{padding-left:5px!important;}
.padding-left-10{padding-left:10px!important;}

.radius-3{border-radius:3px 3px 3px 3px !important;}
.radius-5{border-radius:5px 5px 5px 5px !important;}
.radius-10{border-radius:10px 10px 10px 10px !important;}
.radius-30{border-radius:30px 30px 30px 30px !important;}
.radius-bottom-5{border-radius:0px 0px 5px 5px !important;}
.radius-bottom-10{border-radius:0px 0px 10px 10px !important;}

.stick-head{
	position: sticky;
	top: 0;
	z-index: 3;
	background: #ffffff;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.Tags{
	font-family: 'kanit';
	font-weight: 400;
	font-size: 1.3rem;
	color: #3d3d3d;
	border: solid 1px #c3c3c3;
	border-radius: 25px;
	padding: 2px 10px;
	margin: 2px 1px;
	position:relative;
}

.kanit{font-family:kanit;}

.bg-black{background:#000 !important;}
.bg-red{background:#ff0000 !important;}
.bg-red-50{background:#ff0000b5 !important}
.bg-orange{background:#ff8300 !important}
.bg-blue{background:#0080ff !important}
.bg-white{background-color:#fff !important}
.bg-green{background-color:#238c00 !important}
.bg-gray{background-color:#5e5e5eb5 !important}

.color-white{color:#ffffff !important}
.color-red{color:#ff0000 !important;}
.color-black{color:#222222 !important;}
.color-black-80{color:#444444 !important;}
.color-gray{color:#888888 !important;}

.txtCenter{text-align:center;}
.align-center{text-align:center;}

.font-14{font-size:14px !important;}
.font-16{font-size:16px !important;}
.font-18{font-size:18px !important;}
.font-20{font-size:20px !important;}
.font-22{font-size:22px !important;}
.font-24{font-size:24px !important;}
.font-28{font-size:28px !important;}
.font-26{font-size:26px !important;}
.font-30{font-size:30px !important;}
.font-36{font-size:36px !important;}

.bold-200{font-weight:200;}
.bold-300{font-weight:300;}
.bold-500{font-weight:500;}
.bold-600{font-weight:600;}

.width-full{width:100% !important;}
.width-200{width:200px !important;}
.width-20{width:20px !important;}
.width-30{width:30px !important;}
.width-50{width:50px !important;}
.width-80{width:80px !important;}
.height-50{height:50px !important;}
.height-100{height:100px !important;}
.height-115{height:115px !important;}
.height-150{height:150px !important;}
.height-135{height:135px !important;}
.height-155{height:155px !important;}

.txt-center{text-align:center;}
.txt-right{text-align:right;}

.btnMagNew {
	border: 1px solid #bbbbbbb3;
	padding: 3px 10px;
	border-radius: 15px;
	margin-top: 1px;
	background: #ff0000;
}
.btnMag2h {
	border: 1px solid #bbbbbbb3;
	padding: 3px 10px;
	border-radius: 15px;
	margin-top: 1px;
	background: #ff8000;
}

.boxSearch{position:absolute;top:47px;right:20px;float:right;background:#ffffff;border-radius:12px;padding:3px 3px 3px 10px;border:1px solid #ffffff;}
.txtSearc{border-radius:0 10px 10px 0;border:1px solid #bbbbbb;}
.boxSearchMobile{position:fixed;z-index:2;bottom:0;width:100%;left:0;text-align:center;}
.txtSearcMobile{border-radius:10px 10px 0 0;border:1px solid #bbbbbb;}
.boxSearchBottom{position:relative;margin:0 auto;}
.btnCloseSearch {
	position: absolute;
	right: -5px;
	top: 3px;
	z-index: 3;
	background: #ffffff91;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 10px;
	padding-top:3px;
}
.hide {display: none !important;}
.hidden {display: none;}

#navbar {
  /*position: fixed;*/
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 999;
}
.clear{clear:both;}

.limitLine1 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.limitLine2 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.limitLine3 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.limitLine4 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}

.prdCat {
	line-height: 16px !important;
	font-size: 16px !important;
}
.badge-active{background-color:#ff0000 !important;color:#ffffff !important;}
	
/*---- Grid media ----------------*/
@media (min-width:2048px) and (max-width:2732px){
	.spaceTop{height:200px;background:#ff0000 !important}
}

@media (min-width:992px){

}

@media (min-width:768px) and (max-width:991px){
    .boxCol:nth-child(3n+1){padding-left:0}
    .boxCol:nth-child(3n){padding-right:0}
}

@media (max-width:979px){
	 .imgPrd{min-height:auto !important;}
	 
}

@media (max-width:768px){
	.boxCol{padding:2px}
    .boxItem-txt .title{font-size:18px}
    .boxItem-txt p{font-size:12px}
    .boxItem-txt .price{font-size:15px}
}

@media (min-width:768px) and (max-width:991px){
    
}


@media only screen and (max-width: 760px) {
  #chkDivice { display: none; }
}

	 
	
/*Modify-Bootstrap*/
.nav > li > a {
	position: relative;
	display: block;
	padding: 15px 8px;
	font-size:16px;
}
.breadcrumb {	margin-bottom: 5px !important;}
.breadcrumb > li + li::before {padding: 0 1px !important;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	line-height: 1.2 !important;
}
.list-group {margin-bottom: 1px;border:0;}
.list-group-item {padding: 5px 15px;border-radius:0 !important;}