@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

a, a:link, a:visited, a:hover, a:active{text-decoration:none;} /* ทุก browsers */
* html a, a:link, a:visited, a:hover, a:active{text-decoration:none;} /* สำหรับ IE6 */
*+html a, a:link, a:visited, a:hover, a:active{text-decoration:none;} /*สำหรับ IE7 */
a, a:link, a:visited, a:hover, a:active{text-decoration:none\0/;} /* สำหรับ IE8 */
button:focus,button:active{ outline: none!important;}
input[type=text],
input[type=email],
input[type=password],
textarea{
  box-shadow: none !important;
  -webkit-appearance: none;
}



html{
  background: #ffffff;
  /*
  background: #e8e3da;
  */
}
body {
  /*font-family: 'promptregular'!important;*/
  /*font-family: 'Kanit', sans-serif !important;*/
  font-family: 'Noto Sans Thai', sans-serif;
	margin: 0;
	/*background: #e8e3da;
	/*font-size:18px!important;*/
	list-style: 22px!important;
  color: #383838;
}
iframe{
	max-width: 100%;
}
#topcontrol{ z-index: 500;}
.white-box{
  padding: 20px;
  background: #FDFDFD;
  border-radius: 5px;
}
.athens-gray-box{
  padding: 20px;
  background: #F3F4F6;
  border-radius: 5px;
}

.rows{ width: 100%; height: auto; overflow: hidden;}
.page-container{
	font-size: 16px!important;
	line-height: 24px;
	list-style: 22px!important;
}

.overflow-hidden{overflow:hidden;}

.container-978 {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
	.container-978 { width: 750px; }
}

.row-custom-1{
	margin-right: -5px;
	margin-left: -5px;
}

.row-custom-1 .col-custom-1{
	padding-left: 5px;
	padding-right: 5px;
}

@media (min-width: 992px) {
	.container-978 {
		width: 970px;
	}
	.col-edit-desktop{
		display: inline-block;
		width: 14.2%;
	}
	.col-edit-desktop-2{
		display: inline-block;
		width: 14.2%;
	}
	.col-edit-desktop-2:nth-child(8),
	.col-edit-desktop-2:nth-child(9){ display: none;}
}
@media (min-width: 1200px) {
  .container-978 {
    width: 978px;
  }
}
@media (max-width: 992px) {
	.col-edit-desktop-2{
		display: inline-block;
		width: 25%;
	}
	.col-edit-desktop-2:nth-child(9){ display: none;}
}
@media (max-width: 767px) {
    .container-mobile-padding-5{
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    }  
}
@media (max-width: 520px) {
	.col-edit-desktop-2{
		display: inline-block;
		width: 33.33%;
	}
	.col-edit-desktop-2:nth-child(9){ display: inline-block;}

  .col-xxs-6{
    width: 50%;
  }

}
@media (max-width: 375px) {
	.col-edit-desktop-2{
		display: inline-block;
		width: 50%;
	}
	.col-edit-desktop-2:nth-child(9){ display: none;}
}



/*********************
 FONT STYLES
*********************/
.font-thin{ font-weight: 100!important; }
.font-extra-light{ font-weight: 200!important; }
.font-light{ font-weight: 300!important; }
.font-medium{ font-weight: 500!important; }
.font-semi-bold{ font-weight: 600!important; }
.font-bold{ font-weight: 700!important; }
.font-extra-bold{ font-weight: 800!important; }
.font-black{ font-weight: 900!important; }

.font-lighter{ font-weight: 100!important; }

.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-26{ font-size: 26px !important;}
.font-28{ font-size: 28px !important;}
.font-30{ font-size: 30px !important;}
.font-32{ font-size: 32px !important;}
.font-34{ font-size: 34px !important}
.font-36{ font-size: 36px !important;}
.font-38{ font-size: 38px !important;}
.font-40{ font-size: 40px !important;}
.font-42{ font-size: 42px !important;}
/*********************
 GENERAL UI COLORS 
*********************/
/***
Colors
***/
/*
.color-red { color: #e02222;}
.color-blue { color: #0da3e2;}
.color-grey { color: #555555;}
.color-green { color: #35aa47;}
*/
.color-white { color: #ffffff;}
.color-yellow { color: #ffda5b;}
.color-yellow-2 { color: #FFD300;}
.color-yellow-3 { color: #FFBA02; }
.color-orange { color: #ffa422;}
.color-brown { color: #655151;}
.color-soft-brown { color: #734b25;}
.color-light-brown { color: #a07a55;}
.color-black{ color: #000000;}
.color-blackimp{ color: #000000!important;}
.color-gray{ color: #bfbfbf;}
.color-gray-b{ color: #898989;}
.color-dark-gray{ color: #919191;}
.color-gray65{ color:#656565!important; }
.color-gold{ color: #917102;}
.color-green{ color: #3b763e;}
.color-green-b{color:#19B26C;}
.color-silver-tree{color:#4FA986;}
.color-light-green{ color: #e8de6e;}
.color-red{ color: #b90c0c;}
.color-dark-yellow{ color: #e3b60e;}
.color-tint-red{ color: #d2846b;}
.color-red-brown{ color: #bc4621;}
.color-Flamingo{ color: #F05A23; }
.color-Porsche{ color: #E5A56B;}
.color-Twine{ color: #C49A6C;}
.color-Gamboge{ color: #E89512;}
.color-Tussock{ color: #C6874D;}
.color-Chestnut-Rose{ color: #CF4A5E;}
.color-Silver-Chalice{ color: #B1B1B1;}
.color-chicago{ color: #585655;}


.color-soft-brown a,
a .color-soft-brown,
a.color-soft-brown{ color: #734b25;}
.color-soft-brown a:hover,
a .color-soft-brown:hover,
a.color-soft-brown:hover{ color: #000000;}

.color-light-brown a,
a .color-light-brown,
a.color-light-brown{ color: #a07a55;}
.color-light-brown a:hover,
a .color-light-brown:hover,
a.color-light-brown:hover{ color: #734b25;}

a.color-black{ color: #000000; }
a.color-black:hover{ color: #ffffff;}

a.color-black1{ color: #000000; }
a.color-black1:hover{ color: #999999;}

a.color-light-green{ color: #e8de6e;}

.color-orange a:hover,
a .color-orange:hover,
a.color-orange:hover,
.color-orange a:focus,
a .color-orange:focus,
a.color-orange:focus{ color: #bc4621;}

a.color-Porsche{ color: #E5A56B;}
.color-Porsche a:hover,
a .color-Porsche:hover,
a.color-Porsche:hover,
.color-Porsche a:focus,
a .color-Porsche:focus,
a.color-Porsche:focus{ color: #E29C5D;}

a.color-Gamboge{ color: #E89512;}

.color-cinnabar,
a.color-cinnabar{ color: #ED3737;}

.color-sunglo,
a.color-sunglo{ color: #E56B6B;}



.text-danger {
  color: #E56B6B;
}
a.text-danger:hover,
a.text-danger:focus {
  color: #E56B6B;
}
/***
Background
***/
.bg-none, .bg-none:hover{ background: none!important;}
.bg-white{ background: #ffffff!important;}
.bg-white-gray{ background: #fdfdfd!important;}
.bg-dark{ background: #e0d8cb;}
.bg-gray{ background: #dadada;}
.bg-gray-2{ background: #e5e5e5;}
.bg-light{ background: #f5f4f3;}
.bg-light-2{ background: #e8e3da;}
.bg-light-gray{ background: #f3f2ef!important;}
.bg-light-gray-2{ background: #ebe7e7;}
.bg-light-gray-3{ background: #f9f9f9;}
.bg-green-gray{ background: #e7e2da;}
.bg-gold-gray{ background: #d8cfbf;}
.bg-wood{ background: url(../images/slider_bg.jpg) repeat;}
.bg-gold{ background: #ece5d9!important;}
.bg-dark-yellow{ background:#e3b60e!important; }
.bg-light-yellow{ background:#fcdc5b!important; }
.bg-brown{ background: #a07a55!important;}
.bg-green{ background: #A4C143!important}
.bg-dark-cream{ background: #F4F2EF; }
.bg-red{ background: #CB384E; }
.bg-pomegranate{ background: #F53434; }
.bg-brown-coffee{ background: #BC6414; }
.bg-white-yellow{ background: #FCFBF2; }
.bg-Gamboge{ background: #E89512;}
.bg-Pumpkin-Skin{ background: #B55E0F;}
.bg-Linen{ background: #FDF8F4;}
.bg-Linen-2{ background: #FCF7F2;}
.bg-black{ background: #000000;}
.bg-bizarre{ background: #EDDFD2; }
.bg-grid{ background: url('../images/bg-grid.png') repeat #ffffff;}



/***
Buttons
***/
.btn {
	padding: 6px 10px;
	border: none;
	border-radius: 5px;
  font-weight: 600;
}
.btn-huge{
	font-size: 16px;
	padding: 13px 25px;
}
.btn-huge-1{
	font-size: 18px;
	padding: 10px 25px;
}
.btn-huge-2{
	font-size: 18px;
	padding: 8px 20px;
}
.btn-xxl{
	font-size: 18px;
	padding-bottom: 15px;
	padding-top: 15px;
}
.btn-circle{
	border-radius: 100%;
	padding:0;
	width: 30px;
	height: 30px;
}

.btn-p-0{
  padding: 0;
  font-size: 24px;
  line-height: 24px;
}

.btn-p20{
	padding-left: 20px;
	padding-right: 20px;
}
.btn-plg{ padding: 10px 20px;}
.btn-bradius{ border-radius: 10px; }
.btn-radius{ border-radius: 10px; }
.btn-radius-26{ border-radius: 26px;}
.btn-bradius-5 { border-radius: 5px; }
.btn-radius-5 { border-radius: 5px; }
.btn-radius-10{ border-radius: 10px; }
.btn-radius-50{ border-radius: 50px; }

.btn-w-80{ width: 80px;}
.btn-w-100{ width: 100px;}
.btn-w-200{ width: 200px;}


.btn-primary {
	background-color: #a07a55;
	border-color: #a07a55;
}
.btn-primary:focus,
.btn-primary.focus {
	background-color: #fbcb1c;
	border-color: #fbcb1c;
}
.btn-primary:hover {
	background-color: #fbcb1c;
	border-color: #fbcb1c;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-color: #fbcb1c;
	border-color: #fbcb1c;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
	background-color: #fbcb1c;
	border-color: #fbcb1c;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
	background-color: #a07a55;
	border-color: #a07a55;
}
.btn-primary .badge { color: #a07a55; }
.btn-danger{ color: #ffffff!important;}

.btn-white{
    color: #383838;  
    text-shadow: none;	
    background-color: #ffffff;
    border: solid 1px #ADADAD;
}
.btn-white:hover, 
.btn-white:focus, 
.btn-white:active, 
.btn-white.active,
.btn-white[disabled], 
.btn-white.disabled {    
    background: #F2F2F2 !important;
    outline: none !important;
    border: solid 1px #ADADAD;
}

.btn-white-b{
  color: #383838;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #D6D6D6;
}
.btn-white-b:hover, 
.btn-white-b:focus, 
.btn-white-b:active, 
.btn-white-b.active,
.btn-white-b[disabled], 
.btn-white-b.disabled {    
  background: #F2F2F2 !important;
  outline: none !important;
  border: solid 1px #D6D6D6;
}

.btn-white-c{
  color: #383838;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #C49A6C;
}
.btn-white-c:hover, 
.btn-white-c:focus, 
.btn-white-c:active, 
.btn-white-c.active,
.btn-white-c[disabled], 
.btn-white-c.disabled {    
  background: #F2F2F2 !important;
  outline: none !important;
  border: solid 1px #C49A6C;
}

.btn-white-d{
  color: #383838;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #707070;
}
.btn-white-d:hover, 
.btn-white-d:focus, 
.btn-white-d:active, 
.btn-white-d.active,
.btn-white-d[disabled], 
.btn-white-d.disabled {  
  color: #ffffff !important;
  background: #707070 !important;
  outline: none !important;
  border: solid 1px #707070;
}

.btn-white-e{
  color: #383838 !important;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #D1D1D1;
}
.btn-white-e:hover, 
.btn-white-e:focus, 
.btn-white-e:active, 
.btn-white-e.active{    
  color: #ffffff !important;  
  background: #E5A56B !important;
  outline: none !important;
  border: solid 1px #E5A56B;
}
.btn-white-e[disabled], 
.btn-white-e.disabled {    
  color: #D1D1D1 !important;  
  background: #ffffff !important;
  outline: none !important;
  border: solid 1px #D1D1D1;
}


.btn-white-f{
  color: #B1B1B1;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #D6D6D6;
}
.btn-white-f:hover, 
.btn-white-f:focus, 
.btn-white-f:active, 
.btn-white-f.active,
.btn-white-f[disabled], 
.btn-white-f.disabled {    
  background: #F2F2F2 !important;
  outline: none !important;
  border: solid 1px #D6D6D6;
}

.btn-white-text-sunglo{
  color: #E56B6B;  
  text-shadow: none;	
  background-color: #ffffff;
  border: solid 1px #ADADAD;
}
.btn-white-text-sunglo:hover, 
.btn-white-text-sunglo:focus, 
.btn-white-text-sunglo:active, 
.btn-white-text-sunglo.active,
.btn-white-text-sunglo[disabled], 
.btn-white-text-sunglo.disabled {    
  background: #F2F2F2 !important;
  outline: none !important;
  border: solid 1px #ADADAD;
}

.btn-light{
    color: #383838;  
    text-shadow: none;	
    background: none;
    border: solid 1px #D6D6D6;
}
.btn-light:hover, 
.btn-light:focus, 
.btn-light:active, 
.btn-light.active,
.btn-light[disabled], 
.btn-light.disabled {  
  background: #F2F2F2 !important;
  outline: none !important;
  border: solid 1px #D6D6D6;
}

.btn-light-b{
  color: #383838;  
  text-shadow: none;	
  background-color: none;
  border: solid 1px #C49A6C;
}
.btn-light-b:hover, 
.btn-light-b:focus, 
.btn-light-b:active, 
.btn-light-b.active,
.btn-light-b[disabled], 
.btn-light-b.disabled {   
  color: #C49A6C;   
  outline: none !important;
  border: solid 1px #C49A6C;
}


.btn-Porsche{
  color: #ffffff;  
  text-shadow: none;	
  background: #E5A56B;
  border: solid 1px #E5A56B;
}
.btn-Porsche:hover, 
.btn-Porsche:focus, 
.btn-Porsche:active, 
.btn-Porsche.active{    
  background: #B55E0F !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #B55E0F;
}

.btn-Porsche[disabled], 
.btn-Porsche.disabled {    
  background: #D6D6D6 !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #D6D6D6;
}


.btn-outline-Porsche{
  color: #E5A56B;  
  text-shadow: none;	
  background: #ffffff;
  border: solid 1px #E5A56B;
}
.btn-outline-Porsche:hover, 
.btn-outline-Porsche:focus, 
.btn-outline-Porsche:active, 
.btn-outline-Porsche.active,
.btn-outline-Porsche[disabled], 
.btn-outline-Porsche.disabled {    
  background: #B55E0F !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #B55E0F;
}

.btn-Tango{
  color: #ffffff;  
  text-shadow: none;	
  background: #E85D1F;
  border: solid 1px #E85D1F;
}
.btn-Tango:hover, 
.btn-Tango:focus, 
.btn-Tango:active, 
.btn-Tango.active,
.btn-Tango[disabled], 
.btn-Tango.disabled {    
  background: #FF4F00 !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #FF4F00;
}

.btn-Gamboge{
  color: #ffffff;  
  text-shadow: none;	
  background: #E89512;
  border: solid 1px #E89512;
}
.btn-Gamboge:hover, 
.btn-Gamboge:focus, 
.btn-Gamboge:active, 
.btn-Gamboge.active,
.btn-Gamboge[disabled], 
.btn-Gamboge.disabled {    
  background: #E6A948 !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #E6A948;
}


.btn-Mustard{
  color: #383838;  
  text-shadow: none;	
  background: #FFD64A;
  border: solid 1px #FFD64A;
}
.btn-Mustard:hover, 
.btn-Mustard:focus, 
.btn-Mustard:active, 
.btn-Mustard.active,
.btn-Mustard[disabled], 
.btn-Mustard.disabled {    
  background: #FADD7A !important;
  outline: none !important;
  border: solid 1px #FADD7A;
}

.btn-Equator{
  color: #ffffff;  
  text-shadow: none;	
  background: #E2B267;
  border: solid 1px #E2B267;
}
.btn-Equator:hover, 
.btn-Equator:focus, 
.btn-Equator:active, 
.btn-Equator.active,
.btn-Equator[disabled], 
.btn-Equator.disabled {
  color: #ffffff;    
  background: #E2A667 !important;
  outline: none !important;
  border: solid 1px #E2A667;
}

.btn-Tumbleweed{
  color: #ffffff;  
  text-shadow: none;	
  background: #DBA874;
  border: solid 1px #DBA874;
}
.btn-Tumbleweed:hover, 
.btn-Tumbleweed:focus, 
.btn-Tumbleweed:active, 
.btn-Tumbleweed.active,
.btn-Tumbleweed[disabled], 
.btn-Tumbleweed.disabled {
  color: #ffffff;    
  background: #E2A667 !important;
  outline: none !important;
  border: solid 1px #E2A667;
}

.btn-DoveGray{
  color: #ffffff !important;  
  text-shadow: none;	
  background: #656565;
  border: solid 1px #656565;
}
.btn-DoveGray:hover, 
.btn-DoveGray:focus, 
.btn-DoveGray:active, 
.btn-DoveGray.active,
.btn-DoveGray[disabled], 
.btn-DoveGray.disabled {
  color: #ffffff;    
  background: #515151 !important;
  outline: none !important;
  border: solid 1px #515151;
}

.btn-Tundora{
  color: #ffffff;  
  text-shadow: none;	
  background: #404040;
  border: solid 1px #404040;
}
.btn-Tundora:hover, 
.btn-Tundora:focus, 
.btn-Tundora:active, 
.btn-Tundora.active,
.btn-Tundora[disabled], 
.btn-Tundora.disabled {
  color: #ffffff;    
  background: #000000 !important;
  outline: none !important;
  border: solid 1px #000000;
}


.btn-gallery{
  color: #000000;  
  text-shadow: none;	
  background: #EBEBEB;
  border: solid 1px #EBEBEB;
}
.btn-gallery:hover, 
.btn-gallery:focus, 
.btn-gallery:active, 
.btn-gallery.active,
.btn-gallery[disabled], 
.btn-gallery.disabled {
  color: #000000;    
  background: #515151 !important;
  outline: none !important;
  border: solid 1px #515151;
}

/*Mountain Meadow*/
.btn-MountainMeadow{
  color: #ffffff !important;  
  text-shadow: none;	
  background: #19B26C;
  border: solid 1px #19B26C;
}
.btn-MountainMeadow:hover, 
.btn-MountainMeadow:focus, 
.btn-MountainMeadow:active, 
.btn-MountainMeadow.active,
.btn-MountainMeadow[disabled], 
.btn-MountainMeadow.disabled {
  color: #ffffff !important;    
  background: #1DCB7B !important;
  outline: none !important;
  border: solid 1px #1DCB7B;
}

.btn-silver-tree{
  color: #ffffff !important;  
  text-shadow: none;	
  background: #64BC9A;
  border: solid 1px #64BC9A;
}
.btn-silver-tree:hover, 
.btn-silver-tree:focus, 
.btn-silver-tree:active, 
.btn-silver-tree.active,
.btn-silver-tree[disabled], 
.btn-silver-tree.disabled {
  color: #ffffff !important;    
  background: #1DCB7B !important;
  outline: none !important;
  border: solid 1px #1DCB7B;
}

.btn.brown {
  color: white;  
  text-shadow: none;	
  background-color: #c49a6c;
}
.btn.brown:hover, 
.btn.brown:focus, 
.btn.brown:active, 
.btn.brown.active,
.btn.brown[disabled], 
.btn.brown.disabled {    
  background-color: #a07a55 !important;
  color: #fff !important;
  outline: none !important;
}

.btn-light-brown {
  color: white;  
  text-shadow: none;	
  background-color: #bdab8f;
}
.btn-light-brown:hover, 
.btn-light-brown:focus, 
.btn-light-brown:active, 
.btn-light-brown.active,
.btn-light-brown[disabled], 
.btn-light-brown.disabled {    
  background-color: #9a8461 !important;
  color: #fff !important;
  outline: none !important;
}

.btn-light-brown-b {
  color: white;  
  text-shadow: none;	
  background-color: #e5c792;
}
.btn-light-brown-b:hover, 
.btn-light-brown-b:focus, 
.btn-light-brown-b:active, 
.btn-light-brown-b.active,
.btn-light-brown-b[disabled], 
.btn-light-brown-b.disabled {    
  background-color: #9a8461 !important;
  color: #fff !important;
  outline: none !important;
}

.btn-2019-brown {
    color: white;  
    text-shadow: none;	
    background-color: #E5A56B;
    border-radius: 10px;
    padding: 10px 20px;
}
.btn-2019-brown:hover, 
.btn-2019-brown:focus, 
.btn-2019-brown:active, 
.btn-2019-brown.active,
.btn-2019-brown[disabled], 
.btn-2019-brown.disabled {    
  background-color: #EA8F3D !important;
  color: #fff !important;
  outline: none !important;
}


.btn-yellow {
  text-shadow: none;	
  background-color: #fbcb1c;
	color:#ffffff;
}
.btn-yellow:hover, 
.btn-yellow:focus, 
.btn-yellow:active, 
.btn-yellow.active,
.btn-yellow[disabled], 
.btn-yellow.disabled {    
  background-color: #fbae00 !important;
  outline: none !important;
	color:#ffffff;
}

.btn-yellow-b {
  text-shadow: none;	
  background-color: #FFBA02;
	color:#ffffff;
}
.btn-yellow-b:hover, 
.btn-yellow-b:focus, 
.btn-yellow-b:active, 
.btn-yellow-b.active,
.btn-yellow-b[disabled], 
.btn-yellow-b.disabled {    
  background-color: #fbae00 !important;
  outline: none !important;
	color:#ffffff;
}


.btn-yellow-border {
    text-shadow: none;	
    background-color: #fbcb1c;
    border: solid 1px #fbcb1c;
	color:#ffffff;
}
.btn-yellow-border:hover, 
.btn-yellow-border:focus, 
.btn-yellow-border:active, 
.btn-yellow-border.active,
.btn-yellow-border[disabled], 
.btn-yellow-border.disabled {
    background-color: #fbae00 !important;
    border: solid 1px #fbae00;
    outline: none !important;
	color:#ffffff;
}


.btn-gray-brown {
  text-shadow: none;	
  background-color: #ccc9c6;
	color:#ffffff;
}
.btn-gray-brown:hover, 
.btn-gray-brown:focus, 
.btn-gray-brown:active, 
.btn-gray-brown.active,
.btn-gray-brown[disabled], 
.btn-gray-brown.disabled {    
  background-color: #a07a56 !important;
  outline: none !important;
	color:#ffffff;
}

.btn-dark{
  color: #ffffff;  
  text-shadow: none;	
  background: #383838;
  border: solid 1px #383838;
}
.btn-dark:hover, 
.btn-dark:focus, 
.btn-dark:active, 
.btn-dark.active,
.btn-dark[disabled], 
.btn-dark.disabled {
  color: #ffffff;    
  background: #515151 !important;
  outline: none !important;
  border: solid 1px #515151;
}

.btn-black{
  color: #ffffff;  
  text-shadow: none;	
  background: #000000;
  border: solid 1px #000000;
}
.btn-black:hover, 
.btn-black:focus, 
.btn-black:active, 
.btn-black.active,
.btn-black[disabled], 
.btn-black.disabled {
  color: #ffffff;    
  background: #515151 !important;
  outline: none !important;
  border: solid 1px #515151;
}

.btn-black-deep{
  color: #908D8D;  
  text-shadow: none;	
  background: #000000;
  border: solid 1px #000000;
}
.btn-black-deep:hover, 
.btn-black-deep:focus, 
.btn-black-deep:active, 
.btn-black-deep.active,
.btn-black-deep[disabled], 
.btn-black-deep.disabled {
  color: #ffffff;    
  background: #515151 !important;
  outline: none !important;
  border: solid 1px #515151;
}

.btn.yellow {
  text-shadow: none;	
  background-color: #fbcb1c;
}
.btn.yellow:hover, 
.btn.yellow:focus, 
.btn.yellow:active, 
.btn.yellow.active,
.btn.yellow[disabled], 
.btn.yellow.disabled {    
  background-color: #efefef !important;
  outline: none !important;
}


.btn.gray-y {
  text-shadow: none;	
  background-color: #efefef;
}
.btn.gray-y:hover, 
.btn.gray-y:focus, 
.btn.gray-y:active, 
.btn.gray-y.active,
.btn.gray-y[disabled], 
.btn.gray-y.disabled {    
  background-color: #fbcb1c !important;
  outline: none !important;
}

.btn.black {
  text-shadow: none;	
  background-color: #524d4d;
	color: #ffffff;
}
.btn.black:hover, 
.btn.black:focus, 
.btn.black:active, 
.btn.black.active,
.btn.black[disabled], 
.btn.black.disabled {    
  background-color: #a07a55 !important;
  outline: none !important;
}

.btn-equator {
  text-shadow: none;	
  background-color: #E2B267;
	color:#ffffff;
}
.btn-equator:hover, 
.btn-equator:focus, 
.btn-equator:active, 
.btn-equator.active,
.btn-equator[disabled], 
.btn-equator.disabled {    
  background-color: #E5A56B;
  outline: none !important;
	color:#ffffff;
}

.btn-yellow-sea {
  text-shadow: none;	
  background-color: #FFAA0A;
	color:#ffffff;
}
.btn-yellow-sea:hover, 
.btn-yellow-sea:focus, 
.btn-yellow-sea:active, 
.btn-yellow-sea.active,
.btn-yellow-sea[disabled], 
.btn-yellow-sea.disabled {    
  background-color: #E5A56B;
  outline: none !important;
	color:#ffffff;
}

.btn-Masala{
  color: #ffffff;  
  text-shadow: none;	
  background: #4D3F3C;
  border: solid 1px #4D3F3C;
}
.btn-Masala:hover, 
.btn-Masala:focus, 
.btn-Masala:active, 
.btn-Masala.active,
.btn-Masala[disabled], 
.btn-Masala.disabled {    
  background: #B55E0F !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #B55E0F;
}

.btn-Silver{
  color: #000000;  
  text-shadow: none;	
  background: #E3E3E3;
  border: solid 1px #E3E3E3;
}
.btn-Silver:hover, 
.btn-Silver:focus, 
.btn-Silver:active, 
.btn-Silver.active,
.btn-Silver[disabled], 
.btn-Silver.disabled {    
  background: #000000 !important;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #000000;
}


.btn-red {
  text-shadow: none;	
  background-color: #BF0000;
	color:#ffffff;
}
.btn-red:hover, 
.btn-red:focus, 
.btn-red:active, 
.btn-red.active,
.btn-red[disabled], 
.btn-red.disabled {    
  background-color: #C94646;
  outline: none !important;
	color:#ffffff;
}

.btn-carnation {
  text-shadow: none;	
  background-color: #F66565;
	color:#ffffff;
}
.btn-carnation:hover, 
.btn-carnation:focus, 
.btn-carnation:active, 
.btn-carnation.active,
.btn-carnation[disabled], 
.btn-carnation.disabled {    
  background-color: #C94646;
  outline: none !important;
	color:#ffffff;
}

.btn-sunglo{
  text-shadow: none;	
  background-color: #E56B6B;
	color:#ffffff;
}
.btn-sunglo:hover, 
.btn-sunglo:focus, 
.btn-sunglo:active, 
.btn-sunglo.active,
.btn-sunglo[disabled], 
.btn-sunglo.disabled {    
  background-color: #C94646;
  outline: none !important;
	color:#ffffff;
}

.btn-chicago{
  text-shadow: none;	
  background-color: #585655;
  border: solid 1px #585655;
	color:#ffffff;
}
.btn-chicago:hover, 
.btn-chicago:focus, 
.btn-chicago:active, 
.btn-chicago.active,
.btn-chicago[disabled], 
.btn-chicago.disabled {    
  background: #000000;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #000000;
}

.btn-sepia-light{
  text-shadow: none;	
  background-color: #F4F0E6;
  border: solid 1px #E2B267;
	color:#000000;
}
.btn-sepia-light:hover, 
.btn-sepia-light:focus, 
.btn-sepia-light:active, 
.btn-sepia-light.active,
.btn-sepia-light[disabled], 
.btn-sepia-light.disabled {    
  background: #E2B267;
  color: #fff !important;
  outline: none !important;
  border: solid 1px #E2B267;
}

.btn-no-bg {
  text-shadow: none;	
  background: none;
	color:#020202;
  outline: 0;
  box-shadow: 0;
}
.btn-no-bg:hover, 
.btn-no-bg:focus, 
.btn-no-bg:active, 
.btn-no-bg.active,
.btn-no-bg[disabled], 
.btn-no-bg.disabled {    
  background: none;
  outline: none !important;
	color:#E5A56B;
  box-shadow: none;
}

.btn-facebook{
	width: 100%;
	background:#3b5998;
	color: #ffffff;
	height: 35px;
	line-height: 24px;
}
.btn-facebook:hover{
	background:#1e52bf;
	color: #ffffff;
}
.btn-line{
	width: 100%;
	background:#00C300;
	color: #ffffff;
	height: 35px;
	line-height: 24px;
}
.btn-line .line-icon img{ height: 24px;}
.btn-line:hover{
	color: #ffffff;
	background: #00E000;
}

.btn-share{ position: relative;}
.btn-share .dropdown-menu{
	border-radius: 0;
}

.btn_zoom{ border: solid 1px #cccccc; border-radius: 3px; padding-left: 15px; padding-right: 15px;}
.btn_zoom .fa{
	font-size: 14px!important;
	line-height: 18px!important;
}
.btn_zoom:hover{
	background-color: #a07a55 !important;
	color: #fff !important;
	outline: none !important;
	border-color: #a07a55;
}
.btn_zoom:hover .fa{ color: #fff !important;}

/*
*/
.btn-sort{
  padding: 0 8px;
  background: none;
}
.btn-sort .icon-svg{
  width: 20px;
  height: 20px;
}
.btn-sort .icon-svg svg{
  fill: #000000;
}
.btn-sort:hover, 
.btn-sort:focus, 
.btn-sort:active, 
.btn-sort,
.btn-sort[disabled], 
.btn-sort.disabled {    
  background: none;
  outline: none !important;
  box-shadow: none;
}

/*
*/
.btn-check{
  border: solid 1px #D1D1D1;
  margin-top: 0;
  padding: 0;
  outline: none;
  box-shadow: none;
}
.btn-check:hover, 
.btn-check:focus, 
.btn-check:active, 
.btn-checkactive,
.btn-check[disabled], 
.btn-check.disabled {    
  background: none;
  outline: none !important;
  box-shadow: none;
}
.btn-check label{
  font-weight: 600;
  padding: 8px 8px !important;
}
.btn-check label::before{
  margin-top: 2px;
  margin-left: -12px !important;
  overflow: hidden;
}
.btn-check label::after{margin: 13px 0 0 -13px !important;}

/*###########################################
  btn-action
###########################################*/
.btn-action-2{
  width: 36px;
  border-radius: 12px !important;
  padding: 6px 6px;
  margin-left: 0px !important;
  background: #ffffff;
  border: solid 1px #D5D5D5;
  color: #B1B1B1;
}
.btn-action-2.btn-action-blue:hover{ background: rgba(168, 238, 255, 1); }
.btn-action-2.btn-action-yellow:hover{ background: rgba(255, 238, 168, 1); }
.btn-action-2.btn-action-green:hover{ background: rgba(191, 219, 163, 1); }
.btn-action-2.btn-action-red:hover{ background: rgba(255, 185, 168, 1); }


/*###################
###################*/
.h3b{
  /*font-family: 'Noto Sans Thai', sans-serif;*/
	font-weight: 600;
	line-height: 1.1;
	color: inherit;
	font-size: 25px;
  margin-bottom: 5px;
  height: auto;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.h3b span{
	line-height: 40px;
}
.h3b small{
  font-size: 14px;
  font-weight: 400;
	line-height: 40px;
  color: #A8A8A8;
  padding-left: 15px;
}
@media (max-width: 480px) {
  .h3b small{
    display: block;
    padding-left: 0;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  .h3b .btn{
    position: absolute;
    top: 5px;
    right: 0;
  }
}

.h3b-cd{
  overflow: visible;
}
.h3b-cd::before{
  content: '';
  position: absolute;
  top: -5px;
  left: -18px;
  width: 23px;
  height: 30px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 39.687 44.818"><defs><clipPath id="clip-path"><rect id="Rectangle_7819" data-name="Rectangle 7819" width="23.921" height="37.941" fill="none"/></clipPath></defs><g id="Group_51231" data-name="Group 51231" transform="translate(20.716 44.818) rotate(-150)"><g id="Group_51228" data-name="Group 51228" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_18597" data-name="Path 18597" d="M4.71,14.635H19.248c4.074,0,4.074-6.323,0-6.323H4.71c-4.074,0-4.074,6.323,0,6.323" transform="translate(1.617 8.127)" fill="%23d88787"/><path id="Path_18598" data-name="Path 18598" d="M1.252,18.187q3.159,3.162,6.321,6.321c2.886,2.886,7.353-1.582,4.47-4.47L5.721,13.717c-2.884-2.886-7.353,1.584-4.47,4.47" transform="translate(0.313 12.5)" fill="%23d88787"/><path id="Path_18599" data-name="Path 18599" d="M5.4,11.088,11.088,5.4C13.975,2.514,9.506-1.952,6.62.932L.932,6.622c-2.886,2.884,1.584,7.351,4.47,4.466" transform="translate(-0.001 0)" fill="%23d88787"/></g></g></svg>') no-repeat;
}
.h3b-cd::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 105px;
  height: 10px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 125.021 14.988"><defs><clipPath id="clip-path"><rect id="Rectangle_7818" data-name="Rectangle 7818" width="125.021" height="14.988" fill="%23e5a56b"/></clipPath></defs><g id="Group_51232" data-name="Group 51232" transform="translate(0 0)"><g id="Group_51226" data-name="Group 51226" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_18596" data-name="Path 18596" d="M.367,5.5a25.5,25.5,0,0,0,6.277,7.639,7.166,7.166,0,0,0,8.4.189,12.316,12.316,0,0,0,2.545-2.87c.155-.218.308-.44.467-.655s0,0-.029.038c.1-.125.2-.25.3-.369.158-.183.317-.364.487-.536.115-.116.658-.563.459-.421a5.284,5.284,0,0,1,3.458-1.07c-.332-.034.315.092.436.136.371.132-.281-.157.059.035.1.058.206.113.3.179a7.538,7.538,0,0,1,1.123.974c2.375,2.32,5.025,4.561,8.209,5.588,2.62.846,4.661-.3,6.448-2.208a23.592,23.592,0,0,1,3.1-2.933,18.168,18.168,0,0,1,1.638-1.107c.267-.155.538-.3.815-.434.259-.125.036-.022-.017,0,.18-.076.364-.142.548-.2.246-.082.493-.148.744-.211.2-.049.617-.092.173-.049.229-.022.458-.037.689-.037.106,0,.849.049.53.011-.346-.041.309.065.409.09.21.051.414.119.619.181.139.042.738.305.194.056q.339.156.668.336a17.813,17.813,0,0,1,2.234,1.507c.343.261-.265-.221.206.162l.54.439c.359.294.717.589,1.079.88a17.271,17.271,0,0,0,5.4,3.254,9.455,9.455,0,0,0,6.6-.385A17.806,17.806,0,0,0,71.94,8.431c.389-.452.789-.89,1.214-1.3a3.428,3.428,0,0,1,.968-.7,2.112,2.112,0,0,1,.991-.19,5.093,5.093,0,0,1,1.937.452c.258.108-.055-.017-.086-.033a4.322,4.322,0,0,1,.389.223c.129.086.585.413.52.361.2.163.823.773,1.166,1.132.94.982,1.809,2.032,2.757,3.006,1.921,1.974,4.389,3.813,7.247,3.6,3.1-.233,5.131-2.177,6.808-4.709.339-.513.661-1.038,1-1.553a9.623,9.623,0,0,1,.836-1.166,4.994,4.994,0,0,1,.968-.914A2.7,2.7,0,0,1,100.08,6.2a3.036,3.036,0,0,1,1.031.12,5.6,5.6,0,0,1,1.458.784,29.384,29.384,0,0,1,2.743,2.518c2.391,2.3,4.941,3.975,8.361,3.636a12.711,12.711,0,0,0,9.045-5.393,14.15,14.15,0,0,0,2.208-4.76c.81-3.112-3.871-4.44-4.68-1.33a8.686,8.686,0,0,1-5.266,6.146,5.518,5.518,0,0,1-3.782.119c.241.1-.355-.22-.46-.285a7.8,7.8,0,0,1-.777-.544c-.2-.163-.858-.778-1.218-1.125-2-1.921-4.065-4.145-6.859-4.712A7.844,7.844,0,0,0,94.17,4.1,31.606,31.606,0,0,0,91.945,7.3c-.165.257-.331.514-.5.766-.05.073-.411.568-.222.325a8.439,8.439,0,0,1-.567.661c-.083.088-.171.173-.257.26-.29.291.039.005-.153.142a5.007,5.007,0,0,0-.429.287c.084-.041-.468.146-.632.186a2.684,2.684,0,0,1-.967.016,5.36,5.36,0,0,1-2.392-1.515c-1.9-1.8-3.419-3.986-5.539-5.54a8.348,8.348,0,0,0-8.324-.913c-2.216,1.067-3.574,3.23-5.243,4.967a8.978,8.978,0,0,1-2.893,2.088c.291-.136-.236.094-.324.125-.25.088-.5.168-.76.233-.171.043-.8.151-.292.088a6.3,6.3,0,0,1-.7.047c-.226,0-.45-.009-.677-.022-.432-.026.391.131-.193-.038-.42-.122-.832-.229-1.243-.386-.116-.043.313.178-.1-.056-.192-.108-.391-.2-.582-.313-.388-.224-.763-.47-1.131-.728s-.738-.542-1.1-.824c.337.263.019.015-.128-.105l-.616-.5c-.8-.654-1.6-1.313-2.429-1.923-3.753-2.751-8.023-3.18-12.078-.761A33.163,33.163,0,0,0,35.1,9.408c-.07.071-.147.135-.22.2-.268.236.336-.231.051-.05-.05.031-.166.136-.223.138-.238.009-.056.2-.02.016-.015.074.174-.243-.031-.018-.074.08.448-.256.118-.024-.012.008-.4-.005-.069.017s-.293-.072-.32-.081a14.167,14.167,0,0,1-3.9-2.161C28.371,5.928,26.931,3.5,24.34,2.718c-2.956-.893-6.464.374-8.7,2.425a17.192,17.192,0,0,0-2.247,2.789,4.548,4.548,0,0,1-1.5,1.54c.359-.191-.082.023-.245.064-.065.017-.448.077-.077.032a2.69,2.69,0,0,1-.4.017,2.278,2.278,0,0,1-1.341-.26,12.59,12.59,0,0,1-3.1-3.084A30.953,30.953,0,0,1,4.558,2.974C2.941.226-1.258,2.736.367,5.5" transform="translate(0 0)" fill="%23e5a56b"/></g></g></svg>') no-repeat;
}

.h3b-center{
  display: grid;
  flex-direction: column;
  justify-content: center;
}
.h3b-center > span{
  font-size: 30px;
  text-align: center;
}
.h3b-center small{
  padding: 0;
  text-align: center;
}



/*
*/
.h2b{
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
	font-size: 3rem;
  margin-bottom: 5px;
  height: auto;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.h2b span{
	line-height: 40px;
}
.h2b small{
  font-size: 14px;
  font-weight: 400;
	line-height: 40px;
  color: #A8A8A8;
  padding-left: 15px;
}
@media (max-width: 480px) {
  .h2b small{
    display: block;
    padding-left: 0;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  .h2b .btn{
    position: absolute;
    top: 5px;
    right: 0;
  }
}


.btn-border{ border: solid 1px #cccccc; padding-left: 15px; padding-right: 15px; color:#646464; }

/* for gen book cover */
.btn-ins-bookcover{ width: 100%; padding: 0; border: none;}
.btn-ins-bookcover img{ width: 100%;}


/***
ie8 & ie9 modes
***/
.visible-ie8 { display: none; }
.ie8 .visible-ie8 { display: inherit !important; }
.visible-ie9 { display: none; }
.ie9 .visible-ie9 { display: inherit !important; }
.hidden-ie8 { display: inherit; }
.ie8 .hidden-ie8 { display: none !important; }
.hidden-ie9 { display: inherit; }
.ie9 .hidden-ie9 { display: none !important; }

/***
Misc tools
***/
.clearfix { clear: both; }
.visible-ie8 { display: none }
.no-padding { padding: 0px !important; }
.no-margin { margin: 0px !important; }
.no-bottom-space {
  padding-bottom:0px !important;
  margin-bottom: 0px !important;
}
.no-top-space {
  padding-top:0px !important;
  margin-top: 0px !important;
}
.space5 {
  display: block;
  height: 5px !important;
  clear: both;
}
.space7 {
  height: 7px !important;
  clear: both;
}
.space10 {
  height: 10px !important;
  clear: both;
}
.space12 {
  height: 12px !important;
  clear: both;
}
.space15 {
  height: 15px !important;
  clear: both;
}
.space20 {
  height: 20px !important;
  clear: both;
}
.no-space {
  margin: 0px !important;
  padding: 0px !important;
}

.no-border{ border: none!important;}
.no-border-top{ border-top: none!important;}
.no-border-bottom{ border-bottom: none!important;}
.no-border-left{ border-left: none!important;}
.no-border-right{ border-right: none!important;}



.no-text-shadow { text-shadow: none !important; }
.no-left-padding { padding-left: 0 !important; }
.no-right-padding { padding-right: 0 !important; }
.no-left-margin { margin-left: 0 !important; }
.no-right-margin { margin-right: 0 !important; }
.margin-auto { margin: auto!important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-top-0 { margin-top: 0px !important; }
.margin-top-5 { margin-top: 5px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-15 { margin-top: 15px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-bottom-25 { margin-bottom: 25px !important; }
.margin-right-0 { margin-right: 0 !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-15 { margin-right: 15px !important; }
.margin-right-20 { margin-right: 20px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-left-20 { margin-left: 20px !important; }
.margin-left-0 { margin-left: 0 !important; }
.padding-5{ padding: 5px!important;}
.padding-10{ padding: 10px!important;}
.padding-20{ padding: 20px!important;}
.padding-left-0 { padding-left: 0 !important; }
.padding-left-10 { padding-left: 10px !important; }
.padding-left-20 { padding-left: 20px !important; }
.padding-left-30 { padding-left: 30px !important; }
.padding-right-0 { padding-right: 0px !important; }
.padding-right-10 { padding-right: 10px !important; }
.padding-right-20 { padding-right: 20px !important; }
.padding-right-30 { padding-right: 30px !important; }
.padding-top-5 { padding-top: 5px !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-10 { padding-top: 10px !important; }
.padding-top-20 { padding-top: 20px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-top-40 { padding-top: 40px !important; }
.padding-top-50 { padding-top: 50px !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-5 { padding-bottom: 5px !important; }
.padding-bottom-10 { padding-bottom: 10px !important; }
.padding-bottom-20 { padding-bottom: 20px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }
.padding-bottom-40 { padding-bottom: 40px !important; }
.padding-bottom-50 { padding-bottom: 50px !important; }

@media (max-width: 991px) {
	.mobile-first-top-padding{ padding-top: 10px!important;}
}
@media (max-width: 767px) {
	.mobile-no-padding{
		padding-right: 0!important;
		padding-left: 0!important;
	}
	.mobile-padding-left-right{
		padding-right: 15px;
		padding-left: 20px;
	}
	.mobile-no-margin-bottom{ margin-bottom: 0!important;}
	.mobile-space{ margin-bottom: 15px;}
}



.hide { display: none; }
.bold { font-weight:600 !important; }
.fix-margin { margin-left: 0px !important }
.border { border: 1px solid #ddd }
.inline { display: inline; }
.text-indent{text-indent: 50px;}
.text-indent-a{text-indent: 40px;}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #E0DFDF;
  border-bottom: 1px solid #FEFEFE;
}
/* overides metro scrolbars in IE10 and makes them look like a default scrollbar */
@-ms-viewport{
	width: auto !important;
}
.min-hight { min-height: 500px; }


.uptop{width:50px; height:50px; opacity:0.5;}
.uptop:hover{ opacity: 1;}
.col-centered{
    float: none;
	overflow: hidden;
    margin: 0 auto;
}
@media (max-width: 767px) {
  .uptop{width:40px; height:40px; opacity:0.5;}
	.pull-none-xs{
		float: none!important;
		text-align: center;
	}
	.text-center-xs{ text-align: center;}
}
/*********
WEB BASE ICON
*********/
.icon-hm-key{ background: url(../images/key.png) no-repeat!important; background-size: cover!important;}
.icon-hm-coin{ background: url(../images/coin.png) no-repeat!important; background-size: cover!important;}

.icon-hm-Book16{ background: url(../images/Media/16/Book.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Ebook16{ background: url(../images/Media/16/Ebook.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Voice16{ background: url(../images/Media/16/Voice.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Vdo16{ background: url(../images/Media/16/Vdo.png) no-repeat!important; background-size: cover!important;}

.icon-hm-Book16-gray{ background: url(../images/Media/16/Book-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Ebook16-gray{ background: url(../images/Media/16/Ebook-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Voice16-gray{ background: url(../images/Media/16/Voice-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Vdo16-gray{ background: url(../images/Media/16/Vdo-gray.png) no-repeat!important; background-size: cover!important;}

.icon-hm-Book64{ background: url(../images/Media/64/Book.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Ebook64{ background: url(../images/Media/64/Ebook.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Voice64{ background: url(../images/Media/64/Voice.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Vdo64{ background: url(../images/Media/64/Vdo.png) no-repeat!important; background-size: cover!important;}

.icon-hm-Book64-gray{ background: url(../images/Media/64/Book-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Ebook64-gray{ background: url(../images/Media/64/Ebook-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Voice64-gray{ background: url(../images/Media/64/Voice-gray.png) no-repeat!important; background-size: cover!important;}
.icon-hm-Vdo64-gray{ background: url(../images/Media/64/Vdo-gray.png) no-repeat!important; background-size: cover!important;}

.icon16{ width: 16px; height: 16px;}
.icon15{ width: 15px; height: 15px;}
.icon14{ width: 14px; height: 14px;}
.icon13{ width: 13px; height: 13px;}
.icon12{ width: 12px; height: 12px;}
.icon11{ width: 11px; height: 11px;}
.icon10{ width: 10px; height: 10px;}
.icon09{ width: 09px; height: 09px;}
.icon08{ width: 08px; height: 08px;}

/*
*/
.icon-svg{
  display: inline-block;
  width: 16px;
  height: 16px;
}
.icon-svg > svg{
  width: 100%;
  height: 100%;
  vertical-align: middle; /* middle */
  fill: #656565;
}

.icon-svg.icon-svg-normal > svg{
  width: 100%;
  height: 100%;
  vertical-align:baseline;
  fill: #656565;
}

.icon-svg-white{
  fill: #ffffff;
  vertical-align: sub;
}

.icon-coin{
    width: 24px;
    height: 24px;
    background: url('../images/icon/svg/coin-2.svg');
    background-size: cover;
}
.icon-gem{
    width: 24px;
    height: 20px;
    background: url('../images/icon/svg/icon_gem2.svg');
    background-size: cover;
}


/*
*/
.text-nowrap{ text-overflow: ellipsis;}

/*
vertical
*/
.vertical-align{
	display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.vertical-align-middle{ vertical-align: middle!important; }
.vertical-align-bottom{ vertical-align: bottom!important; }


/*
HOVER
*
.hover-scale-a{
  transition: transform .5s;
}
.hover-scale-a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 2s cubic-bezier(.165, .84, .44, 1);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .15);
  content: '';
  opacity: 0;
  z-index: -1;
}
.hover-scale-a:hover,
.hover-scale-a:focus{
  transform: scale3d(1.026, 1.026, 1);
  -webkit-font-smoothing: antialiased;
}
/*
.hover-scale-b {
  transition: transform .5s;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 2s cubic-bezier(.165, .84, .44, 1);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .15);
    content: '';
    opacity: 0;
    z-index: -1;
  }

  &:hover,
  &:focus {
    transform: scale3d(1.006, 1.006, 1);

    &::after {
      opacity: 1;
    }
  }
}
*/

.hover-border{
  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .38s ease-in-out, transform .35s ease-in-out;
    content: '';
    opacity: 0;
    pointer-events: none;
  }

  &::before {
    transform: scale3d(0, 1, 1);
    transform-origin: left top;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
  }

  &::after {
    transform: scale3d(1, 0, 1);
    transform-origin: right top;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
  }

  &:hover,
  &:focus {
    &::before,
    &::after {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
  }
}

.hover-fx-a {
  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale3d(0, 0, 1);
    transition: transform .3s ease-out 0s;
    background: rgba(255, 255, 255, .1);
    content: '';
    pointer-events: none;
  }

  &::before {
    transform-origin: left top;
  }

  &::after {
    transform-origin: right bottom;
  }

  &:hover,
  &:focus {
    &::before,
    &::after {
      transform: scale3d(1, 1, 1);
    }
  }
}


/* Modal */
.modal-header {
	padding: 25px 0;
	border-bottom: none;
}
.modal .modal-header .close{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #ffffff;
  color: #000000;
  opacity: 1;
  font-size: 15px;
  font-weight: lighter;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
}
.modal-header .close:hover{
	background: #efefef;
	color: #000000;
}
.modal-header .modal-title{
  text-align: left;
  padding-left: 15px;
}

.modal-header-2 .close{
    position: absolute;
    right: 20px;
    top: 45px;
}
.modal-header-b{
    position: relative;
    padding: 20px 0;
}
.modal-header-b .close{
    position: absolute;
    right: -15px;
    top: 20px;
    background: none;
    color: #656565!important;
}

/*
*/
.modal-header .close-default{
  position: absolute;
  right: 0;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  opacity: 1;
  margin-top: -20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: lighter;
  color: #8D8D8D;
}
.modal-title-default{
  text-align: center;
  color: #734b25;
  font-size: 26px;
}
.modal-body.modal-body-default{
  font-size: 15px;
}

/*
*/
.modal-title {
	text-align: center;
	color: #404040;
	font-size: 26px;
  font-weight: 500;
}
.modal-body {
	margin-top: -15px;
	padding:0 15px 25px 15px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 10px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-footer { text-align: center; }


.modal-center{
	padding-left: 15px;
	padding-right: 15px;
}
.modal-header h4{ position: relative; z-index: 5;}
.modal-header h4 span{ background: #ffffff; padding: 0 10px}
.modal-header .hr{
	position: relative;
	width: 100%;
	height: 1px;
	background: #e9e9e9!important;
	top: 15px;
}


.modal-footer .btn{
	padding-left: 25px;
	padding-right: 25px;
}
.modal-footer .btn i{ color: #fbcb1c; font-size: 18px;}
.modal-footer .btn:hover i{ color: #a07a55;}

.modal-wide{ min-width: 70%;}
.modal-body .fileupload-preview{ display: block; max-width:160px!important; overflow: hidden;}

/* custom-modal */
.modal-dialog.width800{ max-width: 800px;}
.modal-dialog.width500{ max-width: 500px;}
.modal-dialog.width400{ max-width: 400px;}
.modal-dialog.width300{ max-width: 300px;}

.modal-dialog.width500,
.modal-dialog.width400,
.modal-dialog.width300{
    margin-left: auto;
    margin-right: auto;
}

.modal-dialog-centered {
  top: 20vh;
}

.modal-dialog-centered-2{
  top: 45% !important;
  transform: translate(0, -48%) !important;
  -ms-transform: translate(0, -48%) !important;
  -webkit-transform: translate(0, -48%) !important;
}

.custom-modal .modal-content{
	background: none!important;
	box-shadow: none;
	border: none;
	position: relative;
}
.custom-modal .custombody{
	margin-top: -60px;
	background: #ffffff;
	overflow: hidden;
	padding-bottom: -85px;
}
.custom-modal .custombody .modal-header .close{margin: 0 20px 0 0;}
.custom-modal .topicon{
	margin:auto;
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
	text-align: center;
	padding-top: 10px;
}
.custom-modal .topicon img{ max-width: 250px;}

/*
modal-style-3
*/
.modal-style-3 .modal-header .close{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #ffffff;
  color: #000000;
  opacity: 1;
  margin-top: -20px;
  font-size: 15px;
  font-weight: lighter;
  position: absolute;
  top: 10px;
  right: -10px;
  -webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.16);
  box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.16);
}

/********************
 GENERAL LAYOUT 
*********************/
/***
HEADER FIX
***/
.header{
    position: fixed;
    top: 0;
    width: 100%;
}
/*
.page-container{ padding-top: 190px; }
@media (max-width: 991px) {
  .header{ background: none; }
  .page-container{ padding-top: 210px; }
}
@media (max-width: 767px) {
  .page-container{ padding-top: 190px; }
}
@media (max-width: 409px) {
  .page-container{ padding-top: 180px; }
}
*/
.page-container{ padding-top: 230px; }
@media (max-width: 991px) {
  .header{ background: none; }
  .page-container{ padding-top: 250px; }
}
@media (max-width: 767px) {
  .page-container{ padding-top: 230px; }
}
@media (max-width: 409px) {
  .page-container{ padding-top: 220px; }
}

/***
Top front bar
***/
.top-front-bar-noti{
  width: 100%;
  padding: 10px 15px;
  background: #77624C;
}
.top-front-bar-noti a{ color: #ffffff; }
.top-front-bar-noti a:hover{ color: #000000; }

.top-front-bar{
	padding: 12px 0 0 0;
  /*border-bottom: solid 1px #E5E5E5;*/
}
.top-front-bar .top-front-bar-in{
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}
.top-front-bar .top-front-bar-in .logo{
  /*
  -ms-flex: 0 0 180px;
  flex: 0 0 180px;
  */
  width: 180px;
  height: auto;
  overflow: hidden;

  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.top-front-bar .top-front-bar-in .logo img{
  width: 100%;
  height: auto;
}
.top-front-bar .top-front-bar-in .logo .logo-mobile{ display: none;}

.top-front-bar .top-front-bar-in .topbar-menu-right{
  /*
  -ms-flex: 0 0 calc(100% - 180px);
  flex: 0 0 calc(100% - 180px);
  width: calc(100% - 180px);
  */
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
  text-align: center;
  margin: 15px 0;
  gap: 15px;
}

/***/
.top-front-bar .topbar-menu-right .navbar-header-l{ margin-bottom: 0;}
.top-front-bar .topbar-menu-right .navbar-header-l li{
  padding-right: 0;
  position: relative;
  overflow: visible;
}
.top-front-bar .topbar-menu-right .navbar-header-l li a{
  display: block;
  width: 40px;
}
.top-front-bar .topbar-menu-right .navbar-header-l li img{
  width: 100%;
  border-radius: 100%;
}
.top-front-bar .topbar-menu-right .navbar-header-l li div{
  width: 90px;
  position: absolute;
  left: -50%;
  right: 0;
  opacity: 0;
  z-index: 3;
}
.top-front-bar .topbar-menu-right .navbar-header-l li:hover div{
  opacity: 1;
}

/**/
.top-front-bar .topbar-menu-right .navbar-header-r{
  margin-bottom: 0;
}
.top-front-bar .topbar-menu-right .navbar-header-r > li{
  vertical-align: middle;
}
.top-front-bar .topbar-menu-right .navbar-header-r > li:last-child{
  padding-right: 0;
}
.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth{
  display: block;
  width: auto;
  height: 40px;
  border-radius: 32px;
  /*background: rgba(209, 209, 209, .6);*/
  background: #000000;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  padding: 0 15px;
  outline: none;
}
.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth:hover{
  background: #E5A56B;
}
.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .mobile{
  display: none;
}


.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  /*background: rgba(209, 209, 209, .6);*/
  background: #000000;
  color: #ffffff;
  fill: #ffffff !important;
  text-align: center;
  font-size: 22px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
}
.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn .ficon{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  overflow: hidden;
}
.top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn:hover{
  background: #E5A56B;
}

@media (max-width: 991px) {
  .top-front-bar .top-front-bar-in .topbar-menu-right{
    /*
    -ms-flex: 0 0 calc(100% - 180px);
    flex: 0 0 calc(100% - 180px);
    width: calc(100% - 180px);
    */
    width: 100%;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .desktop{
    display: none;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .mobile{
    display: block;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth{
    padding: 0;
    width: 40px;
    height: 40px;
    fill: #ffffff;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .mobile .ficon{
    width: 22px;
    height: 22px;
    vertical-align: middle;
    overflow: hidden;
  }
}
@media (max-width: 767px){
  .top-front-bar .top-front-bar-in .logo{
    position: relative;
    /*
    -ms-flex: 0 0 26px;
    flex: 0 0 26px;
    */
    width: 26px;
  }
  .top-front-bar .top-front-bar-in .logo .logo-desktop{ display: none; }
  .top-front-bar .top-front-bar-in .logo .logo-mobile{ display: block; }

  .top-front-bar .top-front-bar-in .topbar-menu-right{
    /*
    -ms-flex: 0 0 calc(100% - 26px);
    flex: 0 0 calc(100% - 26px);
    width: calc(100% - 26px);
    */
    width: 100%;
  }

  /*
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .desktop{
    display: none;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .mobile{
    display: block;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth{
    padding: 0;
    width: 40px;
    height: 40px;
    fill: #ffffff;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth .mobile .ficon{
    width: 22px;
    height: 22px;
    vertical-align: middle;
    overflow: hidden;
  }
  */

}
@media (max-width: 575px){
  .top-front-bar .container{
    padding-right: 5px;
    padding-left: 5px;
  }

  .top-front-bar .topbar-menu-right .navbar-header-l li a{
    display: block;
    width: 34px;
  }

  .top-front-bar .topbar-menu-right .navbar-header-r > li{
    padding: 0 4px;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn-auth{
    width: 34px;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    fill: #ffffff;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn{
    width: 34px;
    height: 34px;
    line-height: 34px;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn .ficon{
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 365px){
  .top-front-bar .top-front-bar-in .topbar-menu-right { gap: 10px; }
  .top-front-bar .topbar-menu-right .navbar-header-l li a {
    width: 30px;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r .topbar-btn .ficon {
    width: 16px;
    height: 16px;
  }
  .top-front-bar .topbar-menu-right .navbar-header-r > li{
    padding: 0 2px;
  }

}

/* category */
.top-front-bar .top-front-bar-in .category{
  -ms-flex: 0 0 220px;
  flex: 0 0 220px;
  width: 220px;
  height: auto;
  padding-left: 15px;
  float: left;
}
.top-front-bar .category .category-btn{
  display: block;
  width: 100%;
  height: 40px;
  background: #F4F4F4;
  border-radius: 50px;
  position: relative;
  color: #000000;
  fill: #000000;
  overflow: hidden;
}
.top-front-bar .category .category-btn .ficon{
  position: absolute;
  top: 12px;
  left: 15px;
}
.top-front-bar .category .category-btn .ficon svg{
  width: 26px;
  height: 26px;
}
.top-front-bar .category .category-btn span{
  position: absolute;
  top: 0;
  left: 45px;
  font-size: 16px;
  line-height: 40px;
  font-weight: 500;
}
.top-front-bar .category .category-btn::after{
  position: absolute;
  right: 25px;
  top: 0;
  font-family: 'FontAwesome';
  content: '\f107';
  font-size: 25px;
  line-height: 40px;
}
.top-front-bar .category .category-btn:hover,
.top-front-bar .category .category-btn:active,
.top-front-bar .category.open .category-btn
{
  background: #E5A56B;
  color: #ffffff;
  fill: #ffffff;
}
.top-front-bar .category .dropdown-menu{
  width: 680px;
}
.top-front-bar .category .dropdown-menu .category-in{
  padding: 10px 20px;
}
.top-front-bar .category .dropdown-menu ul{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
}
.top-front-bar .category .dropdown-menu ul li{
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  width: 33.333%;
  margin: 5px 0;
}
.top-front-bar .category .dropdown-menu ul li label{
  font-weight: 500;
}
.top-front-bar .category .btn-zone{
  text-align: center;
  margin-top: 15px;
}

.top-front-bar .category .btn-zone .categoryselecttogglebtn{
  width: 160px;
  text-align: center;
}
.top-front-bar .category .btn-zone .categoryselecttogglebtn::after{ content: 'เลือกทั้งหมด';}
.top-front-bar .category .btn-zone .categoryselecttogglebtn.categoryallChecked::after{ content: 'ล้างทั้งหมด';}

@media (max-width: 991px) {
  .top-front-bar .top-front-bar-in .category {
    width: 220px;
  }
  .top-front-bar .top-front-bar-in .category .dropdown-menu{ left: -170px;}
}
@media (max-width: 767px) {
  .top-front-bar .top-front-bar-in .category{
    width: 40px;
    padding-left: 0;
    float: none;
  }
  .top-front-bar .category .category-btn{
    width: 40px;
    text-align: center;
    background: #D1D1D1;
    fill: #ffffff;
  }
  .top-front-bar .category .category-btn span,
  .top-front-bar .category .category-btn::after{
    display: none;
  }
  .top-front-bar .category .category-btn .ficon{
    position: relative;
    left: 3px;
    width: 22px;
    height: 22px;
  }


  .top-front-bar .top-front-bar-in .category .dropdown{
    position: unset;
  }
  .top-front-bar .top-front-bar-in .category .dropdown-menu{
    position: fixed;
    width: 100%;
    height: calc(100% - 68px);
    /*height: calc(100vh - 68px);*/
    top: 68px;
    left: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .top-front-bar .top-front-bar-in .category .category-in{
    padding-top: 0;
  }
  .top-front-bar .top-front-bar-in .category .category-in .category-list{
    /*height: calc(100vh - 200px);*/
    position: absolute;
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: scroll;
  }
  .top-front-bar .top-front-bar-in .category .category-in .category-list::-webkit-scrollbar {
    display: none;
  }
  .top-front-bar .category .dropdown-menu ul{
    display: block;
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
  }
  .top-front-bar .top-front-bar-in .category .category-in .category-list li{
    width: 100%;
    margin: 0 0 15px 0;
  }
  .top-front-bar .top-front-bar-in .category .category-in .btn-zone{
    position: absolute;
    left: 0;
    width: 100%;
    padding: 15px;
    bottom: 0;
  }
  .top-front-bar .top-front-bar-in .category .category-in .btn-zone .btn{
    width: calc(50% - 4px);
    font-size: 16px;
    padding: 10px;
  }

}
@media (max-width: 575px) {
  .top-front-bar .top-front-bar-in .category{
    width: auto;
  }
  .top-front-bar .category .category-btn{
    width: 34px;
    height: 34px;
  }
  .top-front-bar .category .category-btn .ficon {
    top: 8px;
    left: 3px;
  }
  .top-front-bar .top-front-bar-in .category .dropdown-menu{
    height: calc(100% - 59px);
    top: 59px;
  }
  .top-front-bar .top-front-bar-in .category .category-in .category-list{
    height: calc(100% - 120px);
  }
}
@media (max-width: 409px){
  .top-front-bar .top-front-bar-in .category .dropdown-menu{
    height: calc(100% - 60px);
    top: 60px;
  }
  .top-front-bar .top-front-bar-in .category .category-in .category-list{
    height: calc(100% - 120px);
  }
}

/*
cart
*/
.top-front-bar .navbar-header-r .dropdown-cart:hover .topbar-btn{
  background: #E5A56B;
}
.top-front-bar .navbar-header-r .btn-shopping-cart{
  position: relative;
}
.top-front-bar .navbar-header-r .btn-shopping-cart .count{
  display: block;
  position: absolute;
  top: 0px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #F20505;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.top-front-bar .navbar-header-r .dropdown-shopping-cart{
  width: 200px;
}
.top-front-bar .dropdown-shopping-cart .dropdown-menu-in ul li{
  border-bottom: solid 1px #D5D5D5;
  font-size: 16px;
}
.top-front-bar .dropdown-shopping-cart .dropdown-menu-in ul li:last-child{ border: none;}
.top-front-bar .dropdown-shopping-cart .dropdown-menu-in ul li a{
  display: block;
  padding: 10px 40px 10px 10px;
  text-align: right;
  position: relative;
  color: #000000;
  font-weight: 500;
  overflow: hidden;
}
.top-front-bar .dropdown-shopping-cart .dropdown-menu-in ul li a:hover{
  color: #E5A56B;
}
.top-front-bar .dropdown-shopping-cart .dropdown-menu-in ul li a .count{
  display: block;
  position: absolute;
  top: 10px;
  right: 15px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #F20505;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

/* NOTI */
.top-front-bar .dropdown-notifi .topbar-btn{
  position: relative;
}
.top-front-bar .dropdown-notifi .topbar-btn .count{
  display: block;
  position: absolute;
  top: 0px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #F20505;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.top-front-bar .dropdown-notifi .dropdown-menu-notifi{
  /*display: block;*/
  max-height: calc(100vh - 64px);
  width: 420px;
}
.top-front-bar .dropdown-notifi .notifi-zone{
  padding: 15px 0;
}
.top-front-bar .dropdown-notifi .notifi-zone .nav-tabs{
  padding: 0 5px;
}
.top-front-bar .dropdown-notifi .notifi-zone .nav-tabs > li a{
  margin: 0 10px;
}
.top-front-bar .dropdown-notifi .notifi-zone .nav-tabs .count{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #F20505;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
.top-front-bar .dropdown-notifi .notifi-zone .noti-con-zone{
  position: relative;
}
.top-front-bar .dropdown-notifi .notifi-zone .tab-pane .list-zone{
  padding: 0 15px;
  max-height: calc(100vh - 190px);
  /*max-height: 400px;*/
  overflow-y: scroll;
  scrollbar-width: thin;
}
.top-front-bar .dropdown-notifi .notifi-zone .tab-pane .button-zone{
  margin-top: 5px;
  padding: 0 15px;
}
.notifi-zone .tab-pane ul > li{
  padding: 8px 0;
  border-bottom: solid 1px #EAEAEA;
}
.notifi-zone .tab-pane ul > li:first-child{
  padding-top: 0;
}
.notifi-zone .tab-pane ul > li:last-child{
  padding-bottom: 0;
  border-bottom: none;
}
.notifi-zone .noti-item{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.notifi-zone .noti-item .images{
  width: 66px;
}
.notifi-zone .noti-item .desc{
  width: calc(100% - 66px);
  padding-left: 15px;
  position: relative;
  overflow: hidden;
  color: #404040;
}
.notifi-zone .noti-item .images .cover{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 134%;
  overflow: hidden;
  border-radius: 5px;
}
.notifi-zone .noti-item .images .cover img{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate(0%, -50%);
}

.notifi-zone .noti-item .desc .headline{
  font-size: 16px;
  font-weight: 600;
}
.notifi-zone .noti-item .desc .headline span:nth-child(1){
  color: #F53434;
}
.notifi-zone .noti-item .desc .headline span:nth-child(2){
  font-weight: 400;
}
.notifi-zone .noti-item .desc .info{
  font-size: 13px;
}
.notifi-zone .noti-item .desc .intime{
  position: absolute;
  left: 15px;
  bottom: 0;
  color: #C4C4C4;
  font-size: 12px;
}
.notifi-zone .noti-item .desc .intime.announce{
  position: relative;
  left: 0;
  margin-top: 5px;
}
@media (max-width: 767px) {
  .top-front-bar .dropdown-notifi{
    position: unset;
  }
  .top-front-bar .dropdown-notifi .notifi-zone{
    padding: 0;
  }
  .top-front-bar .dropdown-notifi.open .dropdown-menu-notifi{
    position: fixed;
    width: 100%;
    height: calc(100% - 136px);
    top: 136px;
    left: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .top-front-bar .dropdown-notifi .notifi-zone .noti-con-zone{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .top-front-bar .dropdown-notifi .notifi-zone .tab-pane .list-zone{
    padding: 0 15px;
    max-height: calc(100% - 120px);
    /*max-height: 400px;*/
    overflow-y: scroll;
    scrollbar-width: thin;
  }



  .top-front-bar .dropdown-notifi .button-zone .btn{
    width: 100%;
    font-size: 18px;
    padding: 10px;
  }
}
@media (max-width: 409px) {
  .top-front-bar .dropdown-notifi.open .dropdown-menu-notifi {
    height: calc(100% - 60px);
    top: 60px;
  }
  /*
  .top-front-bar .dropdown-notifi .dropdown-menu-notifi{
    height: calc(100% - 98px);
    top: 98px;
  }
  .top-front-bar .dropdown-notifi .notifi-zone .tab-pane .list-zone{
    height: calc(100% - 220px);
  }
  */
}



#NotificationAll .modal-body{
  padding-left: 0;
  padding-right: 0;
}
.notification_modal{
  right: 0px;
  left: unset;
  width: 100%;
  padding: 0;
}
.notification_modal li{
  padding:10px;
  margin: 0;
  border-bottom: solid 1px #ececec;
}
.notification_modal li a{
  border: none;
  padding: 0;
  line-height: normal;
  color: #000000;
}
.notification_modal li a:hover{ background: none; color: #000000; }
.notification_modal .nrows{
  width: 100%;
  height: auto;
  overflow: hidden;
  clear: both;
}
.notification_modal .nbook{
  float: left;
  width: 10%;
  height: auto;
  overflow: hidden;
}
.notification_modal .nbook img{ width: 100%; }
.notification_modal .ndetial{
  width: 85%;
  height: auto;
  overflow: hidden;
  padding-left: 15px;
  font-size: 14px;
  white-space:normal;
  
}
.notification_modal .ndetial i{ font-size: 14px; margin-right: 3px;}
.notification_modal .ndetial .small{
  font-size: 12px;
  color: #8a8888;
}
.notification_modal li:hover{ background: #fdfbef; }

/* search */
.menu-search{
  margin-top: 0;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .menu-search{
    margin-top: 10px;
  }
}  


/* user-panel */
.user-panel-btn div{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.user-panel-btn img{
  width: 100%;
  border-radius: 100%;
}
.dropdown-menu-user-panel{
  width: 350px;
  height: calc(100vh - 64px);
  overflow: hidden;
}
.dropdown-menu-user-panel .user-panel-row{
  padding: 15px;
  border-bottom: solid 1px #D5D5D5;
}
.dropdown-menu-user-panel .user-panel-row-no-border{
  border: none;
}

.dropdown-menu-user-panel .user-panel-row:last-child{
  border: none;
}
.dropdown-menu-user-panel .user-profile{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.dropdown-menu-user-panel .user-profile .btn-dropdown-user-close{ display: none;}
.dropdown-menu-user-panel .user-profile .img{
  width: 60px;
}
.dropdown-menu-user-panel .user-profile .img .avatar{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 100%;
}
.dropdown-menu-user-panel .user-profile .img .avatar img{
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.dropdown-menu-user-panel .user-profile .info{
  width: calc(100% - 70px);
  padding-left: 15px;
}
.dropdown-menu-user-panel .user-profile .info .name{
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-menu-user-panel .user-profile .info .btn{
  padding: 2px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 30px;
  border-color: #D1D1D1;
  margin-top: 5px;
}

.dropdown-menu-user-panel .user-profile-option{
  overflow: hidden;
  overflow-y: scroll;
  height: auto;
  max-height: calc(100vh - 165px);
}
.dropdown-menu-user-panel .user-profile-option::-webkit-scrollbar {
  display: none;
}

.dropdown-menu-user-panel .list-coins{
  margin-bottom: 0;
}
.dropdown-menu-user-panel .list-coins > li{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
  padding: 5px 0;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(1){
  width: 34px;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(1) img{
  width: 100%;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(2){
  width: calc(100% - 114px);
  padding: 0 10px;
  font-weight: 600;
  font-size: 18px;
  padding-top: 5px;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(2) small{
  position: relative;
  font-size: 12px;
  line-height: 13px;
  font-weight: 400;
  color: #A3A3A3;
  top: -5px;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(3){
  width: 80px;
  padding-top: 5px;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(3) a{
  display: block;
  width: 100%;
  border-radius: 30px;
  border: solid 1px;
  font-size: 12px;
  padding: 2px 5px;
  text-align: center;
}
.dropdown-menu-user-panel .list-coins > li:nth-child(1){ color: #E05E59; }
.dropdown-menu-user-panel .list-coins > li:nth-child(1) div:nth-child(3) a{
  color: #E05E59;
  border-color: #E05E59;
}
.dropdown-menu-user-panel .list-coins > li:nth-child(2){ color: #404040; }
.dropdown-menu-user-panel .list-coins > li:nth-child(2) div:nth-child(3) a{
  color: #404040;
  border-color: #404040;
}
.dropdown-menu-user-panel .list-coins > li:nth-child(3){ color: #E5A56B; }
.dropdown-menu-user-panel .list-coins > li:nth-child(3) div:nth-child(3) a{
  color: #E5A56B;
  border-color: #E5A56B;
}
.dropdown-menu-user-panel .list-coins > li div:nth-child(3) a:hover{
  color: #A3A3A3;
  border-color: #A3A3A3;
}

.dropdown-menu-user-panel .user-panel-link{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  color: #000000;
  margin: 5px 0;
  padding: 5px 0;
}
.dropdown-menu-user-panel .user-panel-link div:nth-child(1){
  width: 20px;
}
.dropdown-menu-user-panel .user-panel-link div:nth-child(1) .icon-svg{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.dropdown-menu-user-panel .user-panel-link div:nth-child(2){
  width: calc(100% - 20px);
  padding-left: 15px;
  font-weight: 500;
  font-size: 16px;
}
.dropdown-menu-user-panel .user-panel-link:hover{
  color: #E5A56B;
}

@media (max-width: 767px){
  .dropdown.user-panel{
    position: unset;
  }
  .dropdown.user-panel.open .dropdown-menu-user-panel{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 0 !important;
    box-shadow: none;
    border: none;
  }
  .dropdown-menu-user-panel .user-profile{
    position: relative;
    overflow: hidden;
  }
  .dropdown-menu-user-panel .user-profile .info{
    padding-right: 15px;
  }
  .dropdown-menu-user-panel .user-profile .btn-dropdown-user-close{
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .dropdown-menu-user-panel .user-profile-option {
    overflow: hidden;
    overflow-y: scroll;
    height: auto;
    max-height: calc(100% - 100px);
  }
}

/*
MAIN MENU
*/
.navbar-default{
  background: #ffffff;
  border: none;
  /*
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
  */
}
.navbar-default.scrolling-fixed{
  /*
  background: rgba(255, 255, 255, .60);
  backdrop-filter: blur(8px);
  */

  -webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
  -moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
  box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
}

.container-main-menu{
  width: 100%;
  padding: 0;
}
.container-main-menu .navigation-wrap{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /*background: rgb(229, 165, 107);*/
  background: #cfaa86;
}
.main-menu{
  margin-top: 0;
  font-size: 22px;
  font-weight: 600;

  overflow-x: auto;
  overflow-y: unset;
  white-space: nowrap;

  text-align: center;
  padding: 8px 0;
}
.main-menu::-webkit-scrollbar {
  display: none;
}
.main-menu > li{
  float: none;
  display: inline-block;
  /*margin: 0 5px;*/
  vertical-align:top;
  position: relative;
}
.main-menu a{
  color: #000000;

  line-height: 1.2;
  padding-left: 5px;
  padding-right: 5px;
}
.main-menu > li:first-child{
  margin-left: 0;
}
.main-menu > li:last-child{
  margin-right: 0;
}
.main-menu > li > a:hover{
  background: none;
  color: #ffffff;
}
.main-menu > li.active > a,
.main-menu > li.active:hover > a{
  color: #ffffff;
  background: none;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  /*box-shadow: 0px 3px 8px 1px rgba(125,125,125,0.15);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(125,125,125,0.15);
  -moz-box-shadow: 0px 3px 8px 1px rgba(125,125,125,0.15);
  border-radius: 100px;*/
}

/*
.main-menu > li.active > a::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 5px;
  background: #E5A56B;
  border-radius: 10px;
  left: 0;
  bottom: 0;
}
*/

@media (max-width: 409px){
  /*
  .container-main-menu{
    padding-left: 5px;
    padding-right: 5px;
  }
  */
  .main-menu{ 
    margin-top: 5px;
    font-size: 18px;
    font-weight: 600;
  }
  .main-menu > li > a{
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* Well */
.well {
	background: none;
	border-radius: 0px;
}
.well-relative{ position: relative!important;}
.well-text-cright{
	position: absolute;
	right: 10px;
}
@media (max-width: 767px) {
	.well h3.mobile-h3{ font-size: 20px;}
}

/***
App download bar
***/
.appdownload-bar{
	padding: 12px 0;
	background: #c49a6c;
	font-size: 1.2em!important;
	line-height: 40px;
	color: #ffffff;
}
.appdownload-bar #appstore{ height: 36px;}
.appdownload-bar #playstore{ height: 36px;}
@media screen and (max-width: 991px) {
	.appdownload-bar{
		font-size: 1em!important;
		line-height: 40px;
	}
}
@media screen and (max-width: 767px) {
	.appdownload-bar{
		font-size: 1.2em!important;
		line-height: 1.2em;
	}
	.appdownload-bar span{
		float: none;
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 8px;
	}
	.appdownload-bar span:nth-child(1){ margin-top: 8px;}
}



/***************
Footer
***************/
.footer{
  width: 100%;
  height: auto;
  /*
  background: #ffffff;
  border-top: solid 2px #D5D5D5;
  padding-top: 30px;
  */
  background: rgb(240, 240, 240);
  /*background: #cfaa86;*/
  padding-top: 100px;
  padding-bottom: 30px;

  position: relative;
  
}

/*
.footer::before{
  content: '';
  position: absolute;
  top: 0;
  
  --size: 50px;
  --m: 1.9;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
   background:linear-gradient(90deg,white,white);
  width: 100%;
  height: 100px;
}
*/

body.bg-dark-cream .footer::before{ background:linear-gradient(90deg,rgb(244, 242, 239),rgb(244, 242, 239)); }

.footer .footer_accordion{
  display: flex;
}
.footer .footer_accordion .collapse{
  display: block;
}
.footer .footer_accordion .panel{
  background: none;
}
.footer .footer_accordion .panel+.panel {
  margin-top: 0px !important;
}
.footer .footer_accordion .panel-default {
  width: 33.333%;
  border: none;
  box-shadow: none;
  padding-right: 15px;
}
.footer .footer_accordion .panel-default > .panel-heading {
  background: none;
  border: none;
  padding: 10px 0;
}
.footer .footer_accordion .panel-heading+.panel-collapse >.list-group,
.footer .footer_accordion .panel-heading+.panel-collapse>.panel-body{
  border: none;
  padding: 0;
}
.footer .footer_accordion .panel-title a{
  pointer-events: none;
  cursor: default;
}

.footer .footer_accordion .list-link li{
  margin-bottom: 6px;
}
.footer .footer_accordion .list-link a{
  /*color:#A5A5A5;*/
  color:#404040;
}
.footer .footer_accordion .list-link a:hover{
  color: #77624C;
}

.footer .footer_accordion .list-soc{
  margin: 0 0 15px 0;
}
.footer .footer_accordion .list-soc li{
  width: 34px;
  padding: 0;
  margin-right: 5px;
}
.footer .footer_accordion .list-soc li:last-child{ margin: 0;}
.footer .footer_accordion .list-soc li a{
  display: block;
  width: 100%;
}
.footer .footer_accordion .list-soc li a img{
  width: 100%;
}
.footer .footer_accordion .list-soc li a:hover img{
  -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


.footer .logo{
  width: 100%;
  height: auto;
}
.footer .logo img{
  width: 100%;
  max-width: 200px;
}
.footer .appstore{
  margin-top: 15px;
  font-weight: 500;
}
.footer .appstore ul li{
  width: 100%;
  height: auto;
}
.footer .appstore ul li:nth-child(1){
  margin-bottom: 5px;
}
.footer .appstore ul li img{
  width: 100%;
  max-width: 150px;
}

.footer .cc{ display: none;}

@media (max-width: 991px) {
  .footer .footer_accordion .panel-default:first-child{
    width: 100%;
  }
  .footer .footer_accordion .panel-default:last-child{
    width: 100%;
  }
  .footer .footer_accordion .list-soc li{
    width: 30px;
    margin-right: 2px;
  }
  
}
@media (max-width: 767px) {
  .footer{
    padding-top: 80px;
  }
  .footer .footer_accordion{
    display: block;
  }
  .footer .footer_accordion .collapse{
    display: none;
  }
  .footer .footer_accordion .collapse.in{
    display: block;
  }
  .footer .footer_accordion .panel-default{
    width: 100%;
    /*border-bottom: solid 1px #E8E8E8;*/
    padding: 0;
  }

  .footer .footer_accordion .panel-default > .panel-heading{
    position: relative;
    padding: 15px 0;
  }
  .footer .footer_accordion .panel-title a{
    pointer-events:unset;
    cursor: default;
    display: block;
    width: 100%;
  }
  .footer .footer_accordion .panel-title{
    font-size: 18px;
  }
  .footer .footer_accordion .panel-title::after{
    position: absolute;
    font-family: 'FontAwesome';
    content: "\f107";
    right: 5px;
    top: 15px;
    font-size: 20px;
  }

  .footer .footer_accordion .list-link li{
    position: relative;
    font-size: 15px;
    margin-bottom: 12px;
  }
  .footer .footer_accordion .list-link li a{
    position: relative;
    padding-left: 15px;
  }
  .footer .footer_accordion .list-link li a::before{
    position: absolute;
    left: 0;
    font-family: 'FontAwesome';
    content: "\f105";
  }

  .footer .logo{ display: none; }
  .footer .appstore ul{
    display: flex;
  }
  .footer .appstore ul li{ width: 150px;}
  .footer .appstore ul li:nth-child(1){
    margin-left: -10px;
    margin-bottom: 0;
  }
  .footer .appstore ul li img{
    height: 43px;
  }

  .footer .cc{
    display: block;
    font-size: 16px;
    font-weight: 500;
  }
}


/***
Copyright
***
.copyright{
    background: #383838;
    color: #ffffff;
    font-size: 20px;
    padding: 20px 10px;
}
.copyright .social-footer{
    float: right;
    margin: 0;
	list-style: none;
	padding: 0;
}
.copyright .social-footer li{
	margin-left: 1px;
	width: 35px;
	display: inline-block;
	text-align: center;
}
.copyright .social-footer li a{ display: block; color: #ffffff; padding: 6px 0 4px 0; line-height: 22px; }
.copyright .social-footer li:hover{ background: #000000;}
@media (max-width: 767px) {
    .copyright{ text-align: center; }
    .copyright .social-footer{
        float: none;
        margin-top: 15px;
    }
}
*/







/***
DROP DOWN
***/
.dropdown .dropdown-menu{
  border: solid 1px #D5D5D5;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
}
.dropdown .dropdown-menu .dropdown-menu-in{
  padding: 5px 15px;
}

.dropdown-style-1 .btn{
	background: none;
	border: solid 1px #7a7a7a;
	color: #7a7a7a;
	border-radius: 3px;
}
.dropdown-style-1 .dropdown-menu{
  margin-top: -10px;
  padding: 5px 10px 10px 10px;
  background: #fffff;
  border: none;
  box-shadow: none;
  width: auto;
  border: solid 1px #D5D5D5;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
}
.dropdown-style-1 .dropdown-menu li{ border-bottom: solid 1px #dbd6ce; }
.dropdown-style-1 .dropdown-menu li:last-child{ border: none;}
.dropdown-style-1 .dropdown-menu li a{
	padding-top: 8px;
	padding-bottom: 8px;
}
.dropdown-style-1 .dropdown-menu li:hover a{
	background:none;
	color: #E5A56B;
}

/*
dropdown-hover
*/
.dropdown-hover .dropdown-menu{
  margin-top: -10px;
  padding: 5px 10px 10px 10px;
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
}
.dropdown-hover .dropdown-menu .dropdown-menu-in{
  background: #ffffff;
  border: solid 1px #D5D5D5;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35); 
}

.dropdown.dropdown-hover:hover .dropdown-menu{
  display: block;
}




/***
SHOP NAV
***/
.shop-nav .navbar-default{ background:#ffffff; margin:0!important; padding: 0px !important}


/*********************
 OPTION UI 
*********************/
.img-responsive img{ width: 100%;}
/***
Caption Well
***/
.caption-well{
	background: #a4a17f;
	padding: 40px 0 20px 0;
}
.caption-well .well{ border: solid 2px #ffffff; color: #ffffff; }

/***
Carousel
***/
#MainCarousel{ margin: 15px 0;}

.carousel .carousel-control{
	background: none!important;
	width: 5%;
}

/***
Sec-title
***/
.sec-title-online{
  position:relative;
  text-align: center
}
.sec-title-online:before {
  content: "";
  display: block;
  border-top: solid 1px #C4C4C4;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  z-index: 0;
}
.sec-title-online span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
  color: #656565;
}

/***
Tab
***/
.nav-tabs.tab-style-1 {
	margin-bottom: 0;
	border: none;
	text-align:center;
}
.nav-tabs.tab-style-1 > li, .nav-pills.tab-style-1 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-1 li > a {
	color: #655151;
	font-size: 20px;
	margin: 0 18px;
	padding: 5px 0px;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-1 li > a:hover {
	border: none;
	color: #f7941b;
	border-bottom: solid 3px #f7941b;
	
}
.nav-tabs.tab-style-1 .active > a,
.nav-tabs.tab-style-1 .active > a:hover,
.nav-tabs.tab-style-1 .active > a:focus {
	border: none;
	background: none;
	color: #f7941b;
	border-bottom: solid 3px #f7941b;
}

/* TAB STYLE 2 MAX 6 COL */
.nav-tabs.tab-style-2 {
	margin-bottom: 0;
	border: none;
	text-align:center;
}
.nav-tabs.tab-style-2 > li, .nav-pills.tab-style-2 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-2 li > a {
	color: #655151;
	font-size: 20px;
	margin: 0 18px;
	padding: 5px 0px;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-2 li > a:hover {
	border: none;
	color: #f7941b;
	border-bottom: inset solid 3px #f7941b;
	
}
.nav-tabs.tab-style-2 .active > a,
.nav-tabs.tab-style-2 .active > a:hover,
.nav-tabs.tab-style-2 .active > a:focus {
	border: none;
	background: none;
	color: #f7941b;
	border-bottom: solid 3px #f7941b;
}
@media (max-width: 1199px) {
	.nav-tabs.tab-style-2 li > a { font-size: 16px; }
}
@media (max-width: 991px) {
	.nav-tabs.tab-style-2{
		width: 100%;
	}
	.nav-tabs.tab-style-2 > li, .nav-pills.tab-style-2 > li {
		display: block;
	}
	.nav-tabs.tab-style-2 li > a:hover {
		color: #f7941b;
		border-bottom: none;

	}
	.nav-tabs.tab-style-2 .active > a,
	.nav-tabs.tab-style-2 .active > a:hover,
	.nav-tabs.tab-style-2 .active > a:focus {
		color: #f7941b;
		border-bottom: none;
	}	
}

/* TAB STYLE 3 */
.nav-tabs.tab-style-3 {
	margin-bottom: 0;
	border: none;
	text-align:center;
}
.nav-tabs.tab-style-3 > li,
.nav-pills.tab-style-3 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-3 li > a {
	width:141px;
	color: #655151;
	font-size: 16px;
	margin: 0;
	padding-top:15px;
	padding-bottom:15px;
	text-align: center;
	background:#ebe7e7;
	border: none;
	border-radius: 0;
}
.nav-tabs.tab-style-3 li > a:hover {
	border: none;
	background: #f3f2ef;
	
}
.nav-tabs.tab-style-3 .active > a,
.nav-tabs.tab-style-3 .active > a:hover,
.nav-tabs.tab-style-3 .active > a:focus {
	border: none;
	background: #f3f2ef;
}

/* TAB STYLE 4 */
.nav-tabs.tab-style-4 {
	margin-bottom: 0;
	border: none;
	text-align:center;
	background: #e8e3da;
}
.nav-tabs.tab-style-4 > li,
.nav-pills.tab-style-4 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-4 li > a {
	width:141px;
	color: #655151;
	font-size: 16px;
	margin: 0;
	padding-top:15px;
	padding-bottom:15px;
	text-align: center;
	border: none;
	border-radius: 0;
}
.nav-tabs.tab-style-4 li > a:hover {
	border: none;
	background: #f3f2ef;
	
}
.nav-tabs.tab-style-4 .active > a,
.nav-tabs.tab-style-4 .active > a:hover,
.nav-tabs.tab-style-4 .active > a:focus {
	border: none;
	background: #f3f2ef;
}

/* TAB STYLE 5 */
.nav-tabs.tab-style-5 {
	margin-bottom: 0;
	border: none;
	text-align:center;
	background: #e8e3da;
}
.nav-tabs.tab-style-5 > li,
.nav-pills.tab-style-5 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-5 li > a {
	width:141px;
	color: #655151;
	font-size: 16px;
	margin: 0;
	padding-top:15px;
	padding-bottom:15px;
	text-align: center;
	border: none;
	border-radius: 0;
}
.nav-tabs.tab-style-5 li > a:hover {
	border: none;
	background: #f3f2ef;
	
}
.nav-tabs.tab-style-5 .active > a,
.nav-tabs.tab-style-5 .active > a:hover,
.nav-tabs.tab-style-5 .active > a:focus {
	border: none;
	background: #f3f2ef;
}

/* TAB STYLE 6 MAX 6 COL */
.nav-tabs.tab-style-6 {
	margin-bottom: 0;
	border: none;
  border-bottom: solid 1px #EBEAE7;
}
.nav-tabs.tab-style-6 > li, .nav-pills.tab-style-6 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-6 li > a {
	color: #655151;
	font-size: 20px;
	margin: 0 18px;
	padding: 5px 0px;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-6 li > a:hover {
	border: none;
	color: #000000;
	border-bottom: inset solid 3px #C6874D;
	
}
.nav-tabs.tab-style-6 .active > a,
.nav-tabs.tab-style-6 .active > a:hover,
.nav-tabs.tab-style-6 .active > a:focus {
	border: none;
	background: none;
	color: #000000;
	border-bottom: solid 3px #C6874D;
}
@media (max-width: 1199px) {
	.nav-tabs.tab-style-6 li > a { font-size: 16px; }
}
@media (max-width: 991px) {
	.nav-tabs.tab-style-6{
		width: 100%;
	}
	.nav-tabs.tab-style-6 > li, .nav-pills.tab-style-6 > li {
		display: block;
	}
	.nav-tabs.tab-style-6 li > a:hover {
		color: #f7941b;
		border-bottom: none;

	}
	.nav-tabs.tab-style-6 .active > a,
	.nav-tabs.tab-style-6 .active > a:hover,
	.nav-tabs.tab-style-6 .active > a:focus {
		color: #f7941b;
		border-bottom: none;
	}	
}

/* TAB STYLE 6 A MAX 6 COL */
.nav-tabs.tab-style-6a {
	margin-bottom: 0;
	border: none;
  border-bottom: solid 1px #EBEAE7;
}
.nav-tabs.tab-style-6a > li, .nav-pills.tab-style-6a > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-6a li > a {
	color: #655151;
	font-size: 16px;
	margin: 0 18px;
	padding: 5px 5px;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-6a li > a:hover {
	border: none;
	color: #000000;
	border-bottom: inset solid 3px #E5A56B;
	
}
.nav-tabs.tab-style-6a .active > a,
.nav-tabs.tab-style-6a .active > a:hover,
.nav-tabs.tab-style-6a .active > a:focus {
	border: none;
	background: none;
	color: #000000;
	border-bottom: solid 3px #E5A56B;
}

/* TAB STYLE 7 */
.nav-tabs.tab-style-7 {
	margin-bottom: 0;
	border: none;
}
.nav-tabs.tab-style-7 > li,
.nav-pills.tab-style-7 > li {
    float:none;
    display:inline-block;
}
.nav-tabs.tab-style-7 li > a {
	color: #171717;
	font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
	margin: 0px;
	padding: 8px 25px;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-7 li > a:hover {
	border: none;
	color: #ffffff;
	background: #DBA874;
  border-radius: 50px;
	
}
.nav-tabs.tab-style-7 .active > a,
.nav-tabs.tab-style-7 .active > a:hover,
.nav-tabs.tab-style-7 .active > a:focus {
	border: none;
	color: #ffffff;
	background: #DBA874;
  border-radius: 50px;
}

/*
@media (max-width: 1199px) {
	.nav-tabs.tab-style-7 li > a { font-size: 16px; }
}
@media (max-width: 991px) {
	.nav-tabs.tab-style-7{
		width: 100%;
	}
	.nav-tabs.tab-style-7 > li,
  .nav-pills.tab-style-7 > li {
		display: block;
	}
	.nav-tabs.tab-style-7 li > a:hover {
		color: #f7941b;
		border-bottom: none;

	}
	.nav-tabs.tab-style-7 .active > a,
	.nav-tabs.tab-style-7 .active > a:hover,
	.nav-tabs.tab-style-7 .active > a:focus {
		color: #f7941b;
		border-bottom: none;
	}	
}
*/


/* TAB STYLE SLIDE */
.tab-style-slide-nav{
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  margin-bottom: 15px;
}
.tab-style-slide-nav::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 6px;
  cursor: pointer;
}
.tab-style-slide-nav::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(237, 237, 237, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  cursor: pointer;
}
.nav-tabs.tab-style-slide {
  display: flex;
	margin-bottom: 0;
	border: none;
}
.nav-tabs.tab-style-slide > li, .nav-pills.tab-style-slide > li {
  float:none;
  display:inline-block;
  width: auto;
  margin: 0 2px;
}
.nav-tabs.tab-style-slide > li:first-child, .nav-pills.tab-style-slide > li:first-child{ margin-left: 0;}
.nav-tabs.tab-style-slide > li:last-child, .nav-pills.tab-style-slide > li:last-child{ margin-right: 0;}
.nav-tabs.tab-style-slide li > a {
	color: #000000;
	font-size: 18px;
  font-weight: 500;
	margin: 0;
	padding: 5px 15px;
	text-align: center;
	background:none;
	border: none;

  display: block;
  width: 100%;
  white-space: nowrap;

  transition: all 0.3s;
}
.nav-tabs.tab-style-slide li > a:hover {
	border: none;
	color: #DBA874;
	/*background: #DBA874;*/
  border-radius: 50px;
}
.nav-tabs.tab-style-slide .active > a,
.nav-tabs.tab-style-slide .active > a:hover,
.nav-tabs.tab-style-slide .active > a:focus {
	border: none;
	color: #DBA874;
	background: none;
  border-radius: 50px;
  border: solid 1px #DBA874;
}

/* tab-style-slide-sunglo */
.nav-tabs.tab-style-slide.tab-style-slide-sunglo li > a:hover {
	border: none;
	color: #ffffff;
	background: #E56B6B;
  border-radius: 50px;
}
.nav-tabs.tab-style-slide.tab-style-slide-sunglo .active > a,
.nav-tabs.tab-style-slide.tab-style-slide-sunglo .active > a:hover,
.nav-tabs.tab-style-slide.tab-style-slide-sunglo .active > a:focus {
	border: none;
	color: #ffffff;
	background: #E56B6B;
  border-radius: 50px;
}

@media (max-width: 1199px) {
  .tab-style-slide-nav{
    margin-bottom: 0;
  }
  .tab-style-slide-nav::-webkit-scrollbar {
    display: none;
  }
}

/*
.tab-style-slide-nav{
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;

  max-width: 100%;
}
.tab-style-slide-nav::-webkit-scrollbar {
  display: none;
}
.nav-tabs.tab-style-slide {
	margin-bottom: 0;
	border: none;
  overflow-x: scroll;
  width: 100%;
  scroll-behavior: smooth
}
.nav-tabs.tab-style-slide::-webkit-scrollbar {
  display: none;
}
.nav-tabs.tab-style-slide > li, .nav-pills.tab-style-slide > li {
  float:none;
  display:table-cell;
  min-width: 150px;
  margin: 0 2px;
}
.nav-tabs.tab-style-slide > li:first-child, .nav-pills.tab-style-slide > li:first-child{ margin-left: 0;}
.nav-tabs.tab-style-slide > li:last-child, .nav-pills.tab-style-slide > li:last-child{ margin-right: 0;}
.nav-tabs.tab-style-slide li > a {
	color: #000000;
	font-size: 18px;
  font-weight: 500;
	margin: 0;
	padding: 5px 0;
	text-align: center;
	background:none;
	border: none;
}
.nav-tabs.tab-style-slide li > a:hover {
	border: none;
	color: #ffffff;
	background: #DBA874;
  border-radius: 50px;
}
.nav-tabs.tab-style-slide .active > a,
.nav-tabs.tab-style-slide .active > a:hover,
.nav-tabs.tab-style-slide .active > a:focus {
	border: none;
	color: #ffffff;
	background: #DBA874;
  border-radius: 50px;
}
*/
/*
.tab-style-slide-nav{
  position: relative;
  max-width: 100%;
  padding: 15px;
  background: #00b8ff;
  overflow-x: hidden;
  transition: .3s ease;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
}
.tab-style-slide-nav .tabsBox{
  display: flex;
  gap: 15px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.tabsBox.dragging{
  cursor: grab;
  scroll-behavior: auto;
}
.tabsBox .tab{
  cursor: pointer;
  white-space: nowrap;
  transition: .3s ease;
}
.tabsBox .tab a{
  display: block;
  color: #000000;
	font-size: 18px;
  font-weight: 500;
	margin: 0;
	padding: 5px 15px;
	text-align: center;
	background:none;
	border: none;
  border-radius: 50px;

  background: #e5e5e5;
}

.tabsBox .tab a:hover{
  background: #efedfb;
}
.tabsBox.dragging .tab{
  user-select: none;
  pointer-events: none;
  transition: .3s ease;
}
.tabsBox .tab.active a{
  color: #fff;
  background: #0f0f0f;
  transition: .3s ease;
}
*/

/***
List choice
***/
.list-chice{ display:inline-block}
.list-chice a{ color: #000000;}
.list-chice a:hover{ color: #c49a6c;}
.list-chice li{ border-left: solid 1px #000000; margin: 0!important; padding: 0 8px!important;}
.list-chice li:first-child{ border: none;}


/***
ROW BOOK LIST
***/
.row-book-list{
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  margin-right: -8px;
  margin-left: -8px;
}
.row-book-list .book-list-col{
  flex: 0 0 16.666%;
  max-width: 16.666%;
  padding: 8px;
}

.row-book-list .book-list-col-5{
  flex: 0 0 20%;
  max-width: 20%;
  padding: 8px;
}

.row-book-list.row-type-b{
  margin-right: -15px;
  margin-left: -15px;
}
.row-book-list.row-type-b .book-list-col {
  padding: 15px;
}
.row-book-list.row-type-b .book-list-col-5 {
  padding: 15px;
}

@media (max-width: 991px) {
  .row-book-list .book-list-col{
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-book-list .book-list-col-5{
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (max-width: 680px) {
  .row-book-list .book-list-col{
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-book-list .book-list-col-5{
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}
@media (max-width: 575px) {
  .row-book-list .book-list-col{
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  .row-book-list .book-list-col-5{
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 380px) {
  .row-book-list .book-list-col{
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-book-list .book-list-col-5{
    flex: 0 0 50%;
    max-width: 50%;
  }
}


/***
BOOK ITEM
***/
.book-item{
	width: 100%;
	height: auto;
	overflow: hidden;
  position: relative;
}
.book-item .img-responsive{
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 0.8em;
}
.book-item .img-responsive img{
  position: relative; 
}
.book-item .img-responsive .book_noaph{
  position: absolute;
  top: 0;
  z-index: 1;
  width: 112%;
  margin: 0 -7%;
}

.book-item .height-240{
  min-height: 240px;
}

.book-item.itemnormal .img-responsive{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: calc(100% + 65px);
}
.book-item.itemnormal .img-responsive img{
  position: absolute;
  top: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.book-item .book-desc{
  width: 100%;
  height: auto;
}
.book-item .book-desc-b{
  width: 100%;
  height: auto;
  padding: 5px 5px;
}
.book-item p{ color: #bdbdbd; font-size: 0.8em;}
.book-item h5{margin: 0;}
.book-item i{ margin-right: 4px; font-size: 1em;}
.book-item .bookitem-stat{ font-size: 0.7em; margin: 5px 0; display: none;}
.book-item a{ color: #000000;}
.book-item a:hover{ color:#655151;}

.book-item .bookitem-control{
	position: absolute;
	right: 15%;
	top: 10%;
	overflow: visible;
}
.book-item .bookitem-control .btn{
	background: #f3f2ef;
	padding: 1px 8px 1px 9px;
	font-size: 20px;
}
.book-item .dropdown-menu{
	position: absolute;
	left: auto;
	right: 0;
	border: none!important;
	border-radius: 0;
	min-width: 70px!important;
	padding: 0!important;
	margin-top: 0;
	overflow: visible;
}
.book-item .dropdown-menu li{ margin: 0!important;}
.book-item .dropdown-menu li a{ text-align: center; padding: 6px 0px;}
.book-item .bookitem-control.open .btn,
.book-item .bookitem-control.open .dropdown-menu,
.book-item .bookitem-control.open .dropdown-menu a{ background: #c49a6c; color: #ffffff;}
.book-item .bookitem-control.open .dropdown-menu a:hover{ background: #000000;}

.book-item .bookname,
.book-item .name{
	font-size: 1.25em;
	line-height: 1.75em;
	font-weight: bold;
	overflow: hidden;
  text-overflow: ellipsis;
  color: #383838;
}

.book-item .bookitem-shopstat{ position: absolute; width: 100%; font-size: 0.8em; color: #ffffff; text-align: center; }
.book-item .bookitem-shopstat a{ color: #ffffff;}
.book-item .bookitem-shopstat .have-sell{ background: #f89344; }
.book-item .bookitem-shopstat .have-soldout{ background: #cf445e; }
.book-item .shop-bookname{
	text-align: center;
	font-size: 1.2em;
	line-height: 1.2em;
	height: 2.4em;
	overflow: hidden;
	margin-bottom: 15px;
	text-overflow: ellipsis;
}
.book-item .shop-bookprice{ background: #dfd4c1; text-align: center; font-size: 1em; line-height: 2.5em;}
.book-item .shop-bookprice span:nth-child(2){ font-size: 0.8em; margin-left: 5px; text-decoration: line-through; color: #817f7c;}
.book-item:hover .shop-bookprice{ background: #a07a55; color: #824400;}
.book-item:hover .shop-bookprice span:nth-child(2){ color: #824400;}

.book-item .row-price-2-col-a{
  display: flex;
  justify-content: space-between;
}
.book-item .row-price-2-col-a .col:nth-child(1){
  flex: 0 0 67%;
  width: 67%;
  position: relative;
  overflow: hidden;
}
.book-item .row-price-2-col-a .col:nth-child(1)::after{
  content: '';
  position: absolute;
  height: 80%;
  top: 10%;
  right: 2px;
  border-left: solid 2px #AAA7A7;
  z-index: 2;
}
.book-item .row-price-2-col-a .col:nth-child(2){
  flex: 0 0 33%;
  width: 33%;
}
.book-item .row-price-2-col-a .btn{
  padding: 0px 2px;
  line-height: 24px;
  height: 24px;
}
.book-item .row-price-2-col-a .col .btn{
  width: 90%;
  font-size: 14px;
}
.book-item .row-price-2-col-a .btn-buy{
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  color: #E56B6B;
  font-size: 16px;
  line-height: 1;
  height: 24px;
  overflow: hidden;
  padding: 0;
  background: none;
}
.book-item .row-price-2-col-a .btn-buy .circle{
  width: 24px;
  height: 24px;
  background: #E56B6B;
  border-radius: 100%;
  padding: 4px 4px;
  margin-right: 5px;
  overflow: hidden;
}
.book-item .row-price-2-col-a .btn-buy .circle i{
  width: 14px;
  height: 14px;
}
.book-item .row-price-2-col-a .btn-buy span{
  display: inline-block;
  line-height: 28px;
  height: 24px;
  overflow: hidden;
}

.book-item .row-price-2-col-a .col .btn-rent{
  font-size: 16px;
  text-align: right;
  background: none;
  width: 100%;
  padding: 0;
}

.book-item .row-price-2-col-a.is_rent .col:nth-child(1)::after{ display: none;}
.book-item .row-price-2-col-a .rent{
  width: 100%;
  margin-top: 0;
}
.book-item .row-price-2-col-a .rent .btn{
  font-size: 12px;
}

.book-item .row-price-2-col-a.buy-only .col:nth-child(1)::after{ display: none;}
.book-item .row-price-2-col-a.buy-only .col:nth-child(2){ display: none; }

@media (max-width: 375px) {
  .book-item .row-price-2-col-a .col:nth-child(1){
    flex: 0 0 68%;
    width: 68%;
  }
  .book-item .row-price-2-col-a .col:nth-child(2){
    flex: 0 0 32%;
    width: 32%;
  }
  .book-item .row-price-2-col-a .col .btn{
    font-size: 14px;
  }
}


.book-item .whiter{
  font-size: 12px;
  color: #656565;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.book-item .status{
  position: absolute;
  padding: 0px 10px;
  color: #ffffff;
  font-size: 13px;
  border-radius: 8px;
  top: 5px;
  left: 5px;
  z-index: 5;
}
.book-item .status.right{
  left: auto;
  right: 5px;
  border-radius: 5px;
  font-weight: 600;
}
.book-item .status-bottom{
  position: absolute;
  padding: 0px 10px;
  color: #ffffff;
  font-size: 12px;
  border-radius: 8px;
  bottom: 5px;
  left: 5px;
  z-index: 5;
}
.book-item .status-bottom-right{
  position: absolute;
  padding: 0px 10px;
  color: #ffffff;
  font-size: 12px;
  border-radius: 8px;
  bottom: 5px;
  right: 5px;
  z-index: 5;
}

.book-item .book-desc{ padding: 5px 0px; }
.book-item .projectby{
  font-size: 0.85em;
  color: #A8A8A8;
  line-height: 1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 2px;
}
.book-item .cat-name{
  position: relative;
  font-size: 0.85em;
  color: #E5A56B;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 3px;
}
.book-item .book-stat{
  font-size: 11px;
  line-height: 12px;
  color: #A8A8A8;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 5px;
  overflow: hidden;
}
.book-item .book-stat li{
  display: inline-block;
  width: auto!important;
  padding-left: 0;
}
.book-item .icon{
  display: inline-block;
  width: 11px;
  height: 11px;
  line-height: 16px;
  vertical-align: bottom;
  fill: #A8A8A8;
}

.book-item .book-row-ratting-pricebtn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: -2px;
}
.book-item .book-row-ratting-pricebtn .col-ratting{
  color: #A5A5A5;
  line-height: 1.5;
}
.book-item .book-row-ratting-pricebtn .col-ratting i{
  color: #FAC917;
  margin-right: 0;
}
.book-item .book-row-ratting-pricebtn .col-pricebtn .btn{
  color: #ffffff;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  width: 60px;
  max-width: 100%;
}
.book-item .btn{ font-size: 1em;}


.book-item .rent{ margin-top: 5px;}
.book-item .rent .btn{
  width: 100%;
  background: #ffffff;
  border: solid 1px #B1B1B1;
  border-radius: 6px;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.book-item:hover .rent .btn,
.book-item .rent .btn:hover,
.book-item .rent .btn:focus,
.book-item .rent .btn:active{
  background: #E5A56B;
  border: solid 1px #E5A56B;
  color: #ffffff;
  outline: none;
  box-shadow: none;
}

.book-item .no-rent{opacity: 0 !important;}

.book-item .book-caption{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  white-space: wrap;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 5px;
}
.book-item:hover .book-caption{ color: #E5A56B; }

.book-item:hover{
  /*
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
	box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
  */
}
.book-item:hover .bookname{
	color: #E5A56B;
}

/* is_campaign */
.book-item.is_campaign{ overflow: visible; }

.book-item.is_campaign .book-cover,
.book-item.is_campaign .img-responsive{
	position: relative;
	border-radius: 0;
	overflow: visible !important;
}
.book-item.is_campaign .book-cover img,
.book-item.is_campaign .img-responsive img{
	border-radius: 0.8em;
  z-index: 2;
}
.book-item.is_campaign .book-cover::after,
.book-item.is_campaign .img-responsive::after{
	position: absolute;
	content:'';
	width: 100%;
	height: 100%;
  background: #E56B6B;
  border-radius: 0.8em;
	background-size: 100%;
	top: -4px;
	right: -5px;
	z-index: 1;
}
.book-item.is_campaign .book-cover::before,
.book-item.is_campaign .img-responsive::before{
  position: absolute;
  content:'';
	width: 25%;
	height: 60px;
  background:url('../images/icon/png/star-ribbon.png') no-repeat top;
  background-size: 100% auto;
  top: -4px;
	right: 4px;
  z-index: 3;
}
.book-item.is_campaign .status{ display: none;}

.book-item.is_campaign:not(.is_children) .img-responsive > div,
.book-item.is_campaign:not(.is_children) .img-cover > div{
  display: none;
}
.book-item.is_campaign.is_children .img-responsive > img,
.book-item.is_campaign.is_children .img-cover > img{
  display: none;
}
.book-item.is_campaign.is_children .img-responsive,
.book-item.is_campaign.is_children .img-cover{
  padding-top: 145%;
}
.book-item.is_campaign.is_children .img-responsive > div,
.book-item.is_campaign.is_children .img-cover > div{
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 0.8em;
  overflow: hidden;
  z-index: 2;
}
.book-item.is_campaign.is_children .img-responsive > div img,
.book-item.is_campaign.is_children .img-cover > div img{
  width: auto;
  height: 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}



@media (max-width: 320px) {
	.book-item p.text-nowrap{ overflow: hidden; display: block;}
}


/***
BOOK ITEM TYPE2
***/
.book-item-type2{
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
}
.book-item-type2 .img-responsive{
  padding: 0;
  height: 120px;
  overflow: hidden;
}
.book-item-type2 .img-responsive img{
  position: absolute;
  top: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.book-item-type2 .img-responsive .book_aph{ position: relative;}


.book-item-type2 .book-desc{
	padding-top: 5px;
	font-size: 12px;
}
.book-item-type2 .book-stamp{
	/* background: #c49a6c; */
    background: #E2B267;
	color: #ffffff;
	padding: 2px 8px;
    border-radius: 11px;
}
.book-item-type2 .book-title{
	display: inline-block;
	max-width: 75%;
	height: 20px;
	font-size: 16px;
	line-height: 22px;
  font-weight: 600;
	color: #383838;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.book-item-type2 .intro{
	height: 32px;
	font-size: 12px;
	line-height: 16px;
	color: #5c5c5c;
	margin-top: 0px;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.book-item-type2 .byuser{
    font-size: 11px;
    color: #A8A8A8;
}
.book-item-type2 .book-desc ul{
	margin-bottom: 0;
	color: #383838;
}
.book-item-type2 .book-desc ul .book-stamp2{
	  display: block;
	  width: 100%;
	  /* padding: 1px 8px; */
    padding: 1px 15px;
	  line-height: 18px;
	  /* background: #e0d8cb; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -5px;
    border: solid 1px #D5D5D5;
    border-radius: 11px;
    font-weight: 600;
    color: #5c5c5c;
}
.book-item-type2 .mobile-show{ display: none;}
.book-item-type2:hover{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
}
.book-item-type2:hover .book-title{ color: #c49a6c;}

.book-item-type2 .icon-stat { color: #5c5c5c; fill:#5c5c5c; }
.book-item-type2 .icon-stat span{
    vertical-align: middle;
}
.book-item-type2 .icon{
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

@media (max-width: 1199px) {
	.book-item-type2 .img-responsive{
		width: 20%!important;
	}
	.book-item-type2 .book-desc{
		width: 80%!important;
	}
}
@media (max-width: 991px) {
	.book-item-type2 .img-responsive{
		width: 27%!important;
	}
	.book-item-type2 .book-desc{
		width: 73%!important;
		padding-right: 5px;
	}
	.book-item-type2 .book-desc ul li:nth-child(3){
		max-width: 40%;
		height: 20px;
	}
	
	
}
@media (max-width: 767px) {
	.book-item-type2 .img-responsive{
		width: 13%!important;
	}
	.book-item-type2 .book-desc{
		width: 87%!important;
	}
}
@media (max-width: 730px) {
	.book-item-type2 .img-responsive{
		width: 14%!important;
	}
	.book-item-type2 .book-desc{
		width: 86%!important;
	}
}
@media (max-width: 684px) {
	.book-item-type2 .img-responsive{
		width: 15%!important;
	}
	.book-item-type2 .book-desc{
		width: 85%!important;
	}
}
@media (max-width: 630px) {
	.book-item-type2 .img-responsive{
		width: 16%!important;
	}
	.book-item-type2 .book-desc{
		width: 84%!important;
	}
}
@media (max-width: 600px) {
	.book-item-type2{
		height: 117px;
	}
	.book-item-type2 .img-responsive{
		width: 90px!important;
	}
	.book-item-type2 .book-desc{
		width:96%!important;
		height: 117px!important;
		padding-left: 100px;
		position: absolute;
	}
	.book-item-type2 .book-desc .intro{ display: none;}
	.book-item-type2 .book-title{
		width: 100%;
		height: 18px;
		font-size: 14px;
		line-height: 18px;
	}
	.book-item-type2 .book-desc ul{
		position: absolute;
		bottom: 5px;
	}
	.book-item-type2 .byuser{ font-size: 12px; margin-top: -3px;}
	.book-item-type2 .mobile-hidden{ display: none;}
	.book-item-type2 .mobile-show{
		position: relative!important;
		display: block;
		margin-top: 5px;
	}
}

/***
BOOK ITEM TYPE2
***/
.book-item-type2-b{
	display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 15px;

  background: #ffffff;
  border-radius: 1.75rem;
  padding: 8px;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(66, 68, 90, 0.14);
  -moz-box-shadow: 0px 0px 8px 0px rgba(66, 68, 90, 0.14);
  box-shadow: 0px 0px 8px 0px rgba(66, 68, 90, 0.14);

  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.book-item-type2-b .cover{
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
  width: 150px;
  height: auto;
  position: relative;
}
.book-item-type2-b .img-responsive{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 130%;
  overflow: hidden;
  border-radius: 0.8em;
}
.book-item-type2-b .img-responsive img{
  position: absolute;
  top: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.book-item-type2-b .img-responsive .book_aph{ position: relative;}

.book-item-type2-b .book-desc{
  position: relative;
  -ms-flex: 0 0 calc(100% - 150px);
  flex: 0 0 calc(100% - 150px);
  width: calc(100% - 150px);
	padding-top: 0px;
  padding-left: 15px;
}
.book-item-type2-b .book-stamp{
	/* background: #c49a6c; */
  background: #E2B267;
	color: #ffffff;
	padding: 1px 8px;
  border-radius: 11px;
  font-weight: 500;
  font-size: 12px;
}
.book-item-type2-b .book-stamp.red{
  background: #E56B6B;
}
.book-item-type2-b .book-title{
	display: inline-block;
	max-width: 75%;
	height: 24px;
	font-size: 1.2em;
	line-height: 1.5;
  font-weight: 600;
  font-weight: 600;
	color: #383838;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.book-item-type2-b .intro{
	height: auto;
  max-height: 5.9em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em !important;
	line-height:1.5;
	color: #5c5c5c;
	margin-top: 10px;
	margin-bottom: 2px;
	overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
	text-overflow: ellipsis;

}
.book-item-type2-b .byuser{
    font-size: 11px;
    line-height: 1.2;
    color: #A8A8A8;
    margin: 2px 0 2px 0;
}
.book-item-type2-b .book-desc ul{
	margin-bottom: 0;
	color: #383838;
}
.book-item-type2-b .book-desc ul .book-stamp2{
	  display: block;
	  width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -5px;

    border: solid 1px #D3D3D3;
    border-radius: 30px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    color: #E5A56B;
    padding: 2px 10px;

}
.book-item-type2-b .list-stat{
  position: absolute;
  bottom: 0;

  font-size: 11px;
  line-height: 12px;
  color: #A8A8A8;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 5px;
  overflow: hidden;
}


.book-item-type2-b .mobile-show{ display: none; }
.book-item-type2-b:hover{
  /*
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
  */
  transform: scale(1.05);
}
.book-item-type2-b:hover .book-title{ color: #c49a6c;}

.book-item-type2-b .icon-stat { color: #a8a8a8; fill:#a8a8a8; }
.book-item-type2-b .icon-stat span{
    vertical-align: middle;
}
.book-item-type2-b .icon{
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

.book-item-type2-b .list-cat-ratting{
  margin-bottom: 0;
  margin-top: 8px;
  font-size: 11px;
	line-height: 12px;
	color: #A8A8A8;
}
.book-item-type2-b .list-cat-ratting .ratting i{ color: #FAC917;}
.book-item-type2-b .list-cat-ratting .cat span {
  border: solid 1px #D3D3D3;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  color: #E5A56B;
  padding: 2px 10px;
}

.book-item-type2-b .list-price{
  position: absolute;
  bottom: 0;

  font-size: 11px;
  line-height: 12px;
  color: #A8A8A8;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 5px;
  overflow: hidden;
  vertical-align: bottom;
}
.book-item-type2-b .list-price .bagde-rent{
  position: relative;
}
.book-item-type2-b .list-price .bagde-rent span{
  border: solid 1px #D3D3D3;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #585655;
  padding: 2px 10px;
}

.book-item-type2-b .list-price .rent{
  border: solid 1px #D3D3D3;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #585655;
  padding: 2px 10px;
  line-height: 18px;
}


.book-item-type2-b .list-price .btn{
  color: #ffffff;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    width: 60px;
    max-width: 100%;
}

.book-item-type2-b .status{
  position: absolute;
  padding: 0px 10px;
  color: #ffffff;
  font-size: 13px;
  border-radius: 8px;
  top: 5px;
  left: 5px;
  z-index: 5;
}
.book-item-type2-b .status.right{
  left: auto;
  right: 5px;
  border-radius: 5px;
  font-weight: 600;
}


@media (max-width: 991px) {
  .book-item-type2-b.ebook{
    align-items: center;
  }
  .book-item-type2-b .cover{
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    width: 100px;
  }
  .book-item-type2-b .book-desc{
    -ms-flex: 0 0 calc(100% - 100px);
    flex: 0 0 calc(100% - 100px);
    width: calc(100% - 100px);
  }
  .book-item-type2-b .intro{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .book-item-type2-b .list-price{ position: relative;}
}

/***
BOOK TYPE 3
demo ebook-index.html
***/
.book-item-type-3{
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 7px;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.16);
    padding: 12px 25px;
    transition: all 0.5s ease;
}
.book-item-type-3 a{ color: #383838; }
.book-item-type-3 .desc{
    width: 100%;
    height: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.book-item-type-3 .book-z{
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
    vertical-align: top;
}
.book-item-type-3 .img{
    float: left;
    width: 25%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding-top: calc(100% - 63.9%);
}
.book-item-type-3 .img img{
  width: auto;
  min-width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.book-item-type-3 .content-e{
    float: left;
    width: 75%;
    overflow: hidden;
    padding-left: 15px;
    position: relative;
}
.book-item-type-3 .book-name{ font-size: 22px; }
.book-item-type-3 .book-by{
    width: 100%;
    font-size: 16px;
    color: #A8A8A8;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.book-item-type-3 .content-e .book-stat{
    position: absolute;
    bottom: 0;
    margin: 0;
}
.book-item-type-3 .content-e .book-stat li{
    position: relative;
    padding-left: 18px;
    font-size: 12px;
}
.book-item-type-3 .content-e .book-stat .icon{
    position: absolute;
    left: 0;
    width: 12px;
    height: 22px;
    
}
.book-item-type-3 .content-e .book-stamp2{
    display: block;
    width: 100%;
    padding: 1px 15px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -5px;
    border: solid 1px #D5D5D5;
    border-radius: 11px;
    font-weight: 600;
}

.book-item-type-3:hover{ background: #C49A6C; }
.book-item-type-3:hover .book-by{ color: #ffffff; }

/***
BOOK ITEM SHADOW
***/
.book-item-shadow{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ffffff;
   -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16);
   -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16);
   box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16);
}
.book-item-shadow .img-responsive{
  padding-top: calc(100% + 65px);
  overflow: hidden;
  position: relative;
  overflow: hidden;
}
.book-item-shadow .img-responsive img{
  width: auto;
  min-width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  
}
.book-item-shadow .img-responsive .book_noaph{
    position: absolute;
    top: 0;
    z-index: 1;
    width: 112%;
    margin: 0 -7%;
}

.book-item-shadow .status{
    position: absolute;
    padding: 0px 10px;
    color: #ffffff;
    font-size: 13px;
    border-radius: 8px;
    top: 5px;
    left: 5px;
    z-index: 5;
}
.book-item-shadow .book-desc{ padding: 5px 10px; }
.book-item-shadow .bookname{
    font-size: 14px;
    color: #383838;
    overflow: hidden;
    text-overflow: ellipsis;
}
.book-item-shadow .projectby{
    font-size: 10px;
    color: #A8A8A8;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.book-item-shadow .book-stat{
    font-size: 11px;
    line-height: 12px;
    color: #383838;
    margin: 0;
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 5px;
    overflow: hidden;
}
.book-item-shadow .book-stat li{ display: inline-block; width: auto!important; }
.book-item-shadow .icon{
    display: inline-block;
    width: 11px;
    height: 11px;
    line-height: 16px;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    .book-item-shadow .bookname{ font-size: 16px; }
}


/***
BOOK ITEM SHADOW
***/
.book-item-light-shadow{
    position: relative;
    width: 100%;
	height: auto;
	overflow: visible;
}
.book-item-light-shadow .img{
    /*background: url("../images/shadow2@2x.png") no-repeat bottom;
    background-size: cover;
    padding: 0 5px 20px 5px;*/
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.36);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.36);
    margin: 5px 0px 20px 0px;
    padding-top: calc(100% + 65px);
    position: relative;
    overflow: hidden;
}
.book-item-light-shadow .img img{
  width: auto;
  min-width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  
}
.book-item-light-shadow .desc{
    margin-top: -10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.book-item-light-shadow .book-name{
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #383838;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.book-item-light-shadow .book-writer{
    font-size: 12px;
    line-height: 14px;
    color: #656565;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
@media (max-width: 767px) {
    .book-item-light-shadow .img{ padding: 0 5px 16px 5px;}
}
*/

/***
BOOK HRAF
***/
.book-hraf{
	background: #f3f2ef;
	padding: 17px 20px 12px 20px;
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.book-hraf:hover{
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
	box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.56);
}
.book-hraf .hrafbook-img{ display: inline-block; width: 39.7%; height: auto; overflow: hidden;}
.book-hraf .hrafbook-desc{ float: right; width: 58.5%; height: auto; overflow: hidden; padding-left: 15px;}
.book-hraf .hrafbook-desc h3{margin: 5px;}
.book-hraf .hrafbook-footer{
	width: 50.5%;
	position: absolute;
	bottom: 20px;
	right: 15px;
	background: #eeeadd;
}
.book-hraf .hrafbook-footer .price{ font-size: 1.2em; line-height: 2.5em; }
.book-hraf .hrafbook-footer .price span:nth-child(2){ font-size: 0.8em; margin-left: 5px; text-decoration: line-through; color: #817f7c; }
.book-hraf .hrafbook-footer .sku{ font-size: 0.8em; line-height: 4em; margin-left: 0; padding-left: 0;}
.book-hraf .hrafbook-footer .btncol{ margin: -10px 0 10px 0;}


@media (max-width: 1199px) {
	.book-hraf .hrafbook-img{ width: 38.5%;}
	.book-hraf .hrafbook-desc{ width: 58%;}
	.book-hraf .hrafbook-footer{ width: 53%;}
}
@media (max-width: 991px) {
	.book-hraf .hrafbook-img{ width: 29%;}
	.book-hraf .hrafbook-desc{ width: 70%;}
	.book-hraf .hrafbook-footer{ width: 65%;}
}
@media (max-width: 640px) {
	.book-hraf .hrafbook-img{ display: block; width: 100%; text-align: center;}
	.book-hraf .hrafbook-img img{ max-width: 150px;}
	.book-hraf .hrafbook-desc{ float: none; display:block; width: 100%; padding-left: 0; margin: 15px 0;}
	.book-hraf .hrafbook-desc h3{ text-align: center;}
	.book-hraf .hrafbook-footer{
		display: block;
		position: relative;
		width: 100%;
		bottom: 0;
		right: 0;
		padding-bottom: 5px;
	}
}
@media (max-width: 350px){
	.book-hraf .hrafbook-footer .price{ font-size: 1em; line-height: 2.5em; }
	.book-hraf .hrafbook-footer .sku{ font-size: 0.8em; line-height: 3.2em;}
	.book-hraf .hrafbook-footer .btncol{ margin-top: 5px;}
}

/*
book option
*/
.book-item .bookname.big{
  font-size: 17px;
  white-space: nowrap;
  line-height: 24px;
}
.book-item-ribbon{
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 2;
  width: 34px;
  height: 45px;
  overflow: hidden;
  background: url('../images/Ribbon/bookmark.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  padding: 3px 0;
}


.book-item-rating{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items:flex-end;
  margin-bottom:5px;
}
.book-item-rating .price{
  -ms-flex: 0 0 70px;
  flex: 0 0 70px;
  width: 70px;
  height: auto;
  border-radius: 5px;
  overflow: hidden;
  padding: 1px 5px;
  margin: 0 0 0 3px;
  font-size: 14px;
}
.book-item-rating .rating{
  -ms-flex: 0 0 calc(100% - 73px);
  flex: 0 0 calc(100% - 73px);
  width: calc(100% - 73px);
  height: auto;
  font-size: 11px;
  line-height: 11px;
  color: #656565;
}
.book-item-rating .rating > i{
  margin-right: 0;
  color: #FDC413;
  text-shadow: 0px 0px 1px rgba(177, 146, 112, 1);
}

.soldout_th .img-responsive::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.37);
}
.soldout_th .img-responsive::after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background:url('../images/sold_out/soldout_th.png');
  background-repeat:no-repeat;
  background-size: 70%;
  background-position: center;
}

.soldout_en .img-responsive::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.37);
}
.soldout_en .img-responsive::after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background:url('../images/sold_out/soldout_en.png');
  background-repeat:no-repeat;
  background-size: 70%;
  background-position: center;
}

/*
Book Slide
*/
.bookslider{ padding-left: -5px; padding-right: -5px;}
.bookslider .slick-prev{ left: 0px; z-index: 5; }
.bookslider .slick-next{ right: -2px; }
.bookslider .slick-slide{ margin: 10px 5px;}
.bookslider .slick-list { margin: 10px -5px; }
.bookslider .book-item:hover{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.36);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.36);
}

/*
*/
.book-item-typ-4{
  position: relative;
  padding: 5px 5px;
  transition-duration: .5s;
}
.book-item-typ-4 .img-responsive{
    -webkit-box-shadow: 0px 5px 4px 0px rgba(66, 68, 90, 0.24);
    -moz-box-shadow: 0px 5px 4px 0px rgba(66, 68, 90, 0.24);
    box-shadow: 0px 5px 4px 0px rgba(66, 68, 90, 0.24);
}
.book-item-typ-4 .status{
    left: 15px;
    top: 8px;
}
.book-item-typ-4::before{
    content: '';
    background: #f0ecea;
    border-radius: 1rem;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 90%;
    width: 100%;
    z-index: 0;
}
.book-item-typ-4 .book-desc{
    position: relative;
    margin: 10px 0 5px 0;
    z-index: 1;
    text-align: center;
}
.book-item-typ-4 .btn{
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    color: #383838 !important;
}
.book-item-typ-4 .btn:hover{ background:#ffffff !important; color: #383838 !important;}
.book-item-typ-4:hover .book-desc .bookname{ color: #BB7E72;}
.book-item-typ-4:hover .book-desc .projectby{ color: #BB7E72;}

.book-item-typ-4:hover{
    transform: translateY(-10px);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/*
*/
.book-item-typ-5{
  margin-left: 5px;
}
.book-item-typ-5 .cover{
  transform: translateY(15%);
  transition-duration: .5s;
}
.book-item-typ-5 .book-desc{
  text-align: center;
  padding: 12px;
  background: #ffffff;
  border-radius: .75em;
  position: relative;
  z-index: 2;
}
.book-item-typ-5 .book-stat{
  padding: 8px 0;
}
.book-item-typ-5:hover .cover{
  transform: translateY(15px);
}

/***
BOOK TYPE 6
***/
.book-item-type-6{
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  box-shadow: 10px 10px 50px 0px rgba(11.000000000000004, 25.999999999999993, 48, 0.1);
  border-radius: 1.75rem;
}
.book-item-type-6 .cover{
  width: 300px;
  padding-left: 15px;
}
.book-item-type-6 .cover .img-responsive{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 1.75rem 0 0 1.75rem;
  background: #e9e9e9;
}
.book-item-type-6 .cover img{
  width: 70%;
  border-radius: .35em;
}
.book-item-type-6 .book-desc{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 15px 15px 0;
  color: #171717;
  height: 100%;
  min-height: 220px;
}
.book-item-type-6 .book-desc .detail{
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
.book-item-type-6 .book-desc .book-stamp{
  display: inline-block;
  background-color: #ff5c00;
  color: #ffffff;
  margin: 0px 0px 16px 0px;
  padding: 2px 8px 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.book-item-type-6 .book-desc .book-title{
  display: block;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
}
.book-item-type-6 .book-desc .byuser{
  font-size: 13px;
  color: #A8A8A8;
}
.book-item-type-6 .book-desc .intro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px 0;
}
.book-item-type-6 .book-desc .list-stat{
  font-size: 12px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.book-item-type-6 .book-desc .list-stat > li{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}




/*##########
Book Vertical
###########*/
.book-item-vertical{
  width: 100%;
  height: auto;
  overflow: hidden;
  border: solid 1px #EAEAEA;
  margin-bottom: 15px;
}
.book-item-vertical .img{
  position: relative;
  width: 100%;
  height: auto;
  padding: 25%;
  overflow: hidden;
}
.book-item-vertical .img img{
  position: absolute;
  width: 100%;
  min-height: 100%;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
}
.book-item-vertical .desc{
  padding: 5px 15px 10px 15px;
  color: #383838;
}
.book-item-vertical .desc .name,
.book-item-vertical .desc .book-name{
  font-family: 'promptmedium';
  font-size: 18px;
  line-height: 20px;
  color: #383838;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.book-item-vertical .desc .intro{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  margin-top: 5px;
  font-size: 14px;
}
.book-item-vertical .desc a{
  color: #E85D1F;
}
.book-item-vertical:hover .desc .name,
.book-item-vertical:hover .desc .book-name,
.book-item-vertical:hover .desc a{ color: #C49A6C; }

/*
Book Vertical No Border
*/
.book-item-vertical.noborder{
  border: none;
}
.book-item-vertical.noborder .desc{
  padding: 5px 0px 10px 0px;
  color: #383838;
}

/***
book-item-rectangle-type-1 |for col-sm-6 col-md-4
***/
.book-item-rectangle-type-1{
	width: 100%;
	height: auto;
  min-height: 280px;
	overflow: hidden;
  position: relative;
  margin-bottom: 25px;

  /*font-family: 'Noto Sans Thai', sans-serif;*/
}
.book-item-rectangle-type-1 .inside{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: solid 1px #D8D8D8;
  border-radius: 15px;
  padding: 15px;
  color: #404040;
}
.book-item-rectangle-type-1 .inside-row-1{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.book-item-rectangle-type-1 .inside-row-1 .cover{
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  width: 100px;
  height: auto;
  overflow: hidden;
  border-radius: 15px;
}
.book-item-rectangle-type-1 .inside-row-1 .desc{
  -ms-flex: 0 0 calc(100% - 100px);
  flex: 0 0 calc(100% - 100px);
  width: calc(100% - 100px);
  height: auto;
  overflow: hidden;
  padding-left: 10px;
  position: relative;
}
.book-item-rectangle-type-1 .inside-row-1 .desc .name{
  font-weight: 600;
  font-size: 18px;
}
.book-item-rectangle-type-1 .inside-row-1 .desc .cat{
  margin-top: 5px;
}
.book-item-rectangle-type-1 .inside-row-1 .desc .cat span{
  border: solid 1px #D3D3D3;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  color: #E5A56B;
  padding: 2px 10px;
}
.book-item-rectangle-type-1 .inside-row-1 .desc .book-stat{
  position: absolute;
  bottom: 0;
}
.book-item-rectangle-type-1 .inside-row-1 .desc .book-row-ratting-pricebtn{
  width: calc(100% - 10px);
  position: absolute;
  bottom: 0;
}

.book-item-rectangle-type-1 .inside-row-2{
  margin-top: 15px;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  height: 96px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  text-overflow: ellipsis;
  color: #5c5c5c;
}


/***
item-rectangle-img-link
***/
.item-rectangle-img-link{ margin-bottom: 15px;}
.item-rectangle-img-link a{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 0.8em;
}
.item-rectangle-img-link a img{
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0%, -50%);
}


/***
BOOK REVIEW
***/
.book-item-review-1{
  width: 100%;
  height: auto;
  padding: 10px;
  border-radius: 15px;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.16);
  box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.16);
  margin-bottom: 15px;
}
.book-item-review-1 .inside{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.book-item-review-1 .inside .cover{
  -ms-flex: 0 0 70px;
  flex: 0 0 70px;
  width: 70px;
  height: auto;
  max-height: 101px;
}
.book-item-review-1 .inside .cover .img-responsive{
  border-radius: 0.8em;
  overflow: hidden;
}
.book-item-review-1 .inside .desc{
  -ms-flex: 0 0 calc(100% - 70px);
  flex: 0 0 calc(100% - 70px);
  width: calc(100% - 70px);
  height: auto;
  padding-left: 5px;
  /*font-family: 'Noto Sans Thai', sans-serif;*/
  font-size: 15px;
  color: #404040;
}
.book-item-review-1 .inside .desc .desc-row-1{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.book-item-review-1 .inside .desc .desc-row-1 .star-rate{
  -ms-flex: 0 0 85px;
  flex: 0 0 85px;
  width: 85px;

  font-size: 13px;
  padding-left: 3px;
}
.book-item-review-1 .inside .desc .desc-row-1 .star-rate span{
  color: #eeeeee;
  margin-left: -3px;
  padding-left: 0;
}
.book-item-review-1 .inside .desc .desc-row-1 .star-rate .checked{
  color: #FAC917;
}
.book-item-review-1 .inside .desc .desc-row-1 .name{
  -ms-flex: 0 0 calc(100% - 85px);
  flex: 0 0 calc(100% - 85px);
  width: calc(100% - 85px);
  color: #B1B1B1;
  font-size: 12px;
}

.book-item-review-1 .inside .desc .desc-row-2{
  width: 100%;
  height: 48px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  color: #5c5c5c;
}
.book-item-review-1 .inside .desc .desc-row-3{
  font-weight: 600;
  margin-top: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/**/
.book-item-review-2{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ebebeb;
  padding: 20px;
  color: #333;
}
.book-item-review-2 .desc-row-1{
  padding-bottom: 15px;
}
.book-item-review-2 .desc-row-1 .star-rate span{
  color: #eeeeee;
  margin-left: -3px;
  padding-left: 0;
}
.book-item-review-2 .desc-row-1 .star-rate .checked{
  color: #FAC917;
}
.book-item-review-2 .desc-row-1 .review-text{
  padding: 12px 0;
  color: #545454;
}
.book-item-review-2 .desc-row-1 .name{
  font-size: 13px;
  font-weight: bold;
}

.book-item-review-2 .desc-row-2{
  display: flex;
  flex-wrap: nowrap;
  border-top: solid 1px #ebebeb;
  padding-top: 15px;
  gap: 15px;
  font-weight: bold;
}
.book-item-review-2 .desc-row-2 .cover{
  width: 64px;
  border-radius:.753rem;
  overflow: hidden;
}


/******************
book ranking mod
******************/
.book-ranking-mod{
  overflow: unset;
}
.book-ranking-mod .nav-scroller-nav{
  overflow-y: unset;
  overflow-x: unset;
}
.book-ranking-mod .book-ranking-scroll{
  margin-right: -15px;
  margin-left: -15px;
}
.book-ranking-mod .book-ranking-scroll > li{
  display: inline-block;
	width: 390px;
  height: auto;
  overflow: hidden;
  margin: 0;
	padding: 0 15px;
}
.book-ranking-mod .ranking-list{
  padding: 10px 0;
}
.book-ranking-mod .nav-scroller-btn{
  display: none;
}


.book-ranking-mod .ranking-list > li{
	margin-bottom: 15px;
}
.book-ranking-mod .ranking-item{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
  /*transition: transform .5s;*/
  transition: all 0.3s ease;
  position: relative;
}
.book-ranking-mod .ranking-item .cover{
	-ms-flex: 0 0 100px;
	flex: 0 0 100px;
	width: 100px;
	height: auto;
  position: relative;
}
.book-ranking-mod .ranking-item .cover::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #E5A56B;
  border-radius: 0.8em;
  z-index: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
.book-ranking-mod .ranking-item:hover .cover::before{
  opacity: 1;
  right: -5px;
  bottom: -5px;
}
.book-ranking-mod .ranking-item .cover .img-responsive{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: calc(100% + 35px);
	border-radius: 0.8em;
}
.book-ranking-mod .ranking-item .cover .img-responsive img{
	position: absolute;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	transform: translate(-50%, 0%);
}

.book-ranking-mod .ranking-item .num{
	-ms-flex: 0 0 40px;
	flex: 0 0 40px;
	width: 40px;
	text-align: center;
	font-size: 22px;
  font-weight: 600;
	color: #000000;
}
.book-ranking-mod .ranking-item .num img{
	width: 70%;
}


.book-ranking-mod .ranking-item .desc{
	-ms-flex: 0 0 calc(100% - 140px);
	flex: 0 0 calc(100% - 140px);
	width: calc(100% - 140px);
	padding-left: 5px;
  padding-top: 20px;
  position: relative;
  align-self: flex-start;
}
.book-ranking-mod .ranking-item .desc .badge{
  position: absolute;
  top: 0;
  background: #E56B6B;
  line-height: 1.2;
  border-radius: 5px !important;
}
.book-ranking-mod .ranking-item .desc .name{
	font-size: 18px;
  font-weight: 600;
  color: #383838;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-ranking-mod .ranking-item .desc .projectby{
	font-size: 12px;
	color: #A8A8A8;
	line-height: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 3px;
}
.book-ranking-mod .ranking-item .desc .cat{
  margin: 5px 0;
}
.book-ranking-mod .ranking-item .desc .cat span{
	font-size: 11px;
  font-weight: 600;
	color: #E5A56B;
	border: solid 1px #D3D3D3;
	border-radius: 15px;
	padding: 2px 10px;
}
.book-ranking-mod .ranking-item .desc .book-stat{
	font-size: 11px;
	line-height: 12px;
	color: #A8A8A8;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 5px;
	overflow: hidden;
}
.book-ranking-mod .ranking-item .desc .book-stat li{
	display: inline-block;
	width: auto!important;
	padding-left: 0;
}
.book-ranking-mod .ranking-item .desc .icon{
	display: inline-block;
	width: 11px;
	height: 11px;
	line-height: 16px;
	vertical-align: bottom;
	fill: #A8A8A8;
}

.book-ranking-mod .ranking-item .desc .list-cat-ratting{
  margin-bottom: 0;
  margin-top: 2px;
  font-size: 11px;
	line-height: 12px;
	color: #A8A8A8;
}
.book-ranking-mod .ranking-item .desc .list-cat-ratting .cat{ font-weight: 600;}
.book-ranking-mod .ranking-item .desc .list-cat-ratting .ratting i{ color: #FAC917;}

.book-ranking-mod .ranking-item .desc .price-only{ color: #E5A56B;}
.book-ranking-mod .ranking-item .desc .price-only .bought{
  font-weight: 600;
  /*font-size: 12px;*/
}
.book-ranking-mod .ranking-item .desc .price-only .price{
  font-weight: 600;
  font-size: 16px;
}
.book-ranking-mod .ranking-item .desc .price-only .discount{
  font-size: 10px;
  color: #ffffff;
  background: #E56B6B;
  padding: 1px 4px;
  border-radius: 5px;
}

.book-ranking-mod .ranking-item .desc .rent{
  display: inline-block;
  width: auto;
  background: #ffffff;
  border: solid 1px #B1B1B1;
  border-radius: 6px;
  padding: 2px 5px 1px 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #404040;
}

/*
.book-ranking-mod .ranking-item:hover{
  transform: scale3d(1.026, 1.026, 1);
  -webkit-font-smoothing: antialiased;
}
*/

@media (max-width: 1199px) {
  .book-ranking-mod .book-ranking-scroll > li{
    width: 323px;
  }
}
@media (max-width: 991px) {
  .book-ranking-mod{
    overflow: hidden;
  }
  .book-ranking-mod .nav-scroller-nav{
    overflow-y: hidden;
    overflow-x: auto;
  }
  .book-ranking-mod .nav-scroller-btn{
    display: block;
  }
}
@media (max-width: 575px) {
  .book-ranking-mod .book-ranking-scroll > li{
    width: 280px;
  }

  .book-ranking-mod .ranking-item .cover{
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    width: 60px;
  }
  .book-ranking-mod .ranking-item .cover .img-responsive{
    padding-top: calc(100% + 20px);
  }

  .book-ranking-mod .ranking-item .num{
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    width: 30px;
    text-align: center;
    font-size: 20px;
    color: #000000;
  }

  .book-ranking-mod .ranking-item .desc{
    -ms-flex: 0 0 calc(100% - 90px);
    flex: 0 0 calc(100% - 90px);
    width: calc(100% - 90px);
  }
}

/* book-ranking-mod-type-2 */
.book-ranking-mod-type-2{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
}
.book-ranking-mod-type-2 .item{
  width: calc(33.333% - 15px);
}
.book-ranking-mod-type-2 .item .item-inside{
  display: flex;
  flex-direction: row;
  background: #F3F3F7;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04), 1px 1px 2px 0px rgba(0, 0, 0, 0.04), 4px 3px 4px 0px rgba(0, 0, 0, 0.03), 8px 6px 6px 0px rgba(0, 0, 0, 0.02), 14px 11px 7px 0px rgba(0, 0, 0, 0.01), 22px 17px 8px 0px rgba(0, 0, 0, 0);
  border-radius: 20px;
  padding: 16px;
  height: 100%;
  gap: 15px;
}
.book-ranking-mod-type-2 .item .item-inside .cover{
  width: 138px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.book-ranking-mod-type-2 .item .item-inside .desc{
  position: relative;
  color: #383838;
  margin: auto;
}
.book-ranking-mod-type-2 .item .item-inside .desc .name{
  font-size: 21px;
  font-weight: 600;
}
.book-ranking-mod-type-2 .item .item-inside .desc .projectby{
  font-size: 13px;
  color: #7A7F85;
}
.book-ranking-mod-type-2 .item .item-inside .desc .cat{
  margin: 5px 0;
  color: #FA9A41;
  font-size: 13px;
}
.book-ranking-mod-type-2 .item .item-inside .desc .book-stat{
  display: flex;
  align-items: center;
  font-size: 12px;
}
.book-ranking-mod-type-2 .item .item-inside .desc .book-stat li{
  display: inline-flex;
  align-items: center;
  color: #7A7F85;
}
.book-ranking-mod-type-2 .item .item-inside .desc .book-stat .icon{
  display: inline-block;
  width: 11px;
  height: 11px;
  line-height: 16px;
  vertical-align: bottom;
  fill: #7A7F85;
  margin-right: 5px;
}
.book-ranking-mod-type-2 .item .item-inside .desc .num{
  position: absolute;
  width: 48px;
  height: 48px;
  background: #f7f7f7;
  color: #181818;
  border-radius: 100%;
  right: 0;
  bottom: 0;
  text-align: center;
  line-height: 48px;
  font-weight: 600;
}



/*###############################
mod-slider-syncing-type-a
###############################*/
.mod-slider-syncing-type-a .slider-for .item-box{
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
  /*font-family: 'Noto Sans Thai', sans-serif;*/
}
.mod-slider-syncing-type-a .slider-for .item-box .cover{
  -ms-flex: 0 0 125px;
	flex: 0 0 125px;
	width: 125px;
	height: auto;
}
.mod-slider-syncing-type-a .slider-for .item-box .cover .img-responsive{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 135%;
	border-radius: 0.8em;
}
.mod-slider-syncing-type-a .slider-for .item-box .cover .img-responsive img{
	position: absolute;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.mod-slider-syncing-type-a .slider-for .item-box .desc{
  -ms-flex: 0 0 calc(100% - 125px);
	flex: 0 0 calc(100% - 125px);
	width: calc(100% - 125px);
	height: auto;
  padding-left: 10px;
  position: relative;
  overflow: hidden;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .name{
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .name-info{
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .cat span{
	font-size: 11px;
  font-weight: 600;
	color: #E5A56B;
	border: solid 1px #D3D3D3;
	border-radius: 15px;
	padding: 3px 10px;
  line-height: 1;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .projectby{
  -ms-flex: 0 0 50%;
	flex: 0 0 50%;
	width: 50%;

  font-size: 12px;
  color: #A8A8A8;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 6px 0 0 5px;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .intro{
  width: 100%;
  max-height: 72px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.mod-slider-syncing-type-a .slider-for .item-box .desc .btn{
  position: absolute;
  bottom: 0;
  padding: 3px 15px;
}

.mod-slider-syncing-type-a .slider-nav .cover{
  padding: 2px;
}
.mod-slider-syncing-type-a .slider-nav .img{
  position: relative;
  width: 100%;
  padding-top: 120%;
	border-radius: 10px;
  overflow: hidden;
  border: solid 3px transparent;
}
.mod-slider-syncing-type-a .slider-nav .img img{
  position: absolute;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.mod-slider-syncing-type-a .slider-nav .slick-current .img{
  border: solid 3px #E5A56B;
}
.mod-slider-syncing-type-a .slider-nav .slick-next{
  right: 0;
}
.mod-slider-syncing-type-a .slider-nav .slick-prev {
  z-index: 1;
  left: 0;
}

@media (max-width: 379px) {
  .mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .cat{
    flex: 0 0 115px;
    width: 115px;
  }
  .mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .cat span {
    display: block;
  }
  .mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .projectby {
    -ms-flex: 0 0 calc(100% - 115px);
    flex: 0 0 calc(100% - 115px);
    width: calc(100% - 115px);
  }
}



/*###########################
mod-slider-syncing-type-b
###########################*/
.mod-slider-syncing-type-b .slider-for .slick-prev,
.mod-slider-syncing-type-b .slider-for .slick-next{
  width: 40px;
  height: 40px;
  top: calc(50% - 5px);
}
.mod-slider-syncing-type-b .slider-for .slick-prev{
  left: -50px;
  background: url("../images/icon/svg/btn/prev_arrow.svg") no-repeat top;
  background-size: cover;
}
.mod-slider-syncing-type-b .slider-for .slick-next{
  right: -50px;
  background: url("../images/icon/svg/btn/next_arrow.svg") no-repeat top;
  background-size: cover;
}

.mod-slider-syncing-type-b .slider-for .item-box a{
  text-decoration: none;
  outline: none;
}
.mod-slider-syncing-type-b .slider-for .slick-slide{
  padding: 0 10px;
}
.mod-slider-syncing-type-b .slider-for .item-box{
  width: 100%;
  height: auto;
  background: #ffffff;
  border: solid 1px #D8D8D8;
  border-radius: 15px;
  overflow: hidden;
  padding: 15px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.mod-slider-syncing-type-b .slider-for .item-box .inside{
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
  /*font-family: 'Noto Sans Thai', sans-serif;*/
}
.mod-slider-syncing-type-b .slider-for .item-box .cover{
  -ms-flex: 0 0 125px;
	flex: 0 0 125px;
	width: 125px;
	height: auto;
}
.mod-slider-syncing-type-b .slider-for .item-box .cover .img-responsive{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 135%;
	border-radius: 0.8em;
}
.mod-slider-syncing-type-b .slider-for .item-box .cover .img-responsive img{
	position: absolute;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.mod-slider-syncing-type-b .slider-for .item-box .desc{
  -ms-flex: 0 0 calc(100% - 125px);
	flex: 0 0 calc(100% - 125px);
	width: calc(100% - 125px);
	height: auto;
  padding-left: 10px;
  position: relative;
  overflow: hidden;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .name{
  /*font-size: 18px;*/
  font-size: 1.35em;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .name-info{
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .name-info .cat span{
	font-size: 11px;
  font-weight: 600;
	color: #E5A56B;
	border: solid 1px #D3D3D3;
	border-radius: 15px;
	padding: 3px 10px;
  line-height: 1;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .name-info .projectby{
  -ms-flex: 0 0 50%;
	flex: 0 0 50%;
	width: 50%;

  font-size: 12px;
  color: #A8A8A8;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 6px 0 0 5px;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .mobile-price{ display: none;}
.mod-slider-syncing-type-b .slider-for .item-box .desc .intro{
  display: -webkit-inline-box;
  width: 100%;
  max-height: 8rem;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  margin-top: 5px;
  color: #5c5c5c;
}
.mod-slider-syncing-type-b .slider-for .item-box:hover .desc .name{
  color: #E5A56B;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .price{
  color: #E5A56B;
  font-size: 1.2em;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .price .discount{
  height: 16px;
  color: #ffffff;
  font-size: 0.6em;
  line-height: 16px;
  font-weight: 400;
  background: #E56B6B;
  padding: 1px 4px;
  border-radius: 5px;
  margin-left: 5px;
}

.mod-slider-syncing-type-b .slider-for .item-box .desc .rent{
  margin-left: 5px;
}
.mod-slider-syncing-type-b .slider-for .item-box .desc .rent .btn{
  width: 100%;
  height: 17px;
  background: #ffffff;
  border: solid 1px #B1B1B1;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 0.6em;
  font-weight: 600;
  line-height: 15px;
  color: #404040;
}

.mod-slider-syncing-type-b .slider-for .item-box .desc .rent .btn:hover,
.mod-slider-syncing-type-b .slider-for .item-box .desc .rent .btn:focus,
.mod-slider-syncing-type-b .slider-for .item-box .desc .rent .btn:active{
  background: #E5A56B;
  border: solid 1px #E5A56B;
  color: #ffffff;
  outline: none;
  box-shadow: none;
}

.mod-slider-syncing-type-b .slider-nav{
  margin-top: 10px;
  cursor: pointer;
}
.mod-slider-syncing-type-b .slider-nav .cover{
  padding: 2px 4px;
}
.mod-slider-syncing-type-b .slider-nav .img{
  position: relative;
  width: 100%;
  padding-top: 120%;
	border-radius: 10px;
  overflow: hidden;
  border: solid 3px transparent;
}
.mod-slider-syncing-type-b .slider-nav .img img{
  position: absolute;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.mod-slider-syncing-type-b .slider-nav .slick-current .img{
  border: solid 4px #E5A56B;
}
.mod-slider-syncing-type-b .slider-nav .slick-next{
  right: 0;
}
.mod-slider-syncing-type-b .slider-nav .slick-prev {
  z-index: 1;
  left: 0;
}
@media (max-width: 991px) {
  .mod-slider-syncing-type-b .slider-for .item-box .cover{
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    width: 100px;
  }
  .mod-slider-syncing-type-b .slider-for .item-box .desc{
    -ms-flex: 0 0 calc(100% - 100px);
    flex: 0 0 calc(100% - 100px);
    width: calc(100% - 100px);
  }
}
@media (max-width: 839px){
  .mod-slider-syncing-type-b .slider-for .slick-prev{
    left: -10px;
  }
  .mod-slider-syncing-type-b .slider-for .slick-next{
    right: -10px;
  }
}

@media (max-width: 575px) {
  .mod-slider-syncing-type-b .slider-for{
      width: calc(100% + 40px);
      margin-left: -21px;
  }
  .mod-slider-syncing-type-b .slider-for .slick-list{
      position: relative;
      padding:0 !important;
  }
  .mod-slider-syncing-type-b .slider-for .slick-slide{
      transform: scale(0.75);
      transition: all 300ms ease;
  }
  .mod-slider-syncing-type-b .slider-for .slick-slide.slick-current{
      transform: scale(1);
  }
  .mod-slider-syncing-type-b .slider-for .slick-prev,
  .mod-slider-syncing-type-b .slider-for .slick-next {
      top: 32%;
      z-index: 2;
      width: 21px;
      height: 21px;
  }
  .mod-slider-syncing-type-b .slider-for .slick-prev{
      left: 30px;
      background: url("../images/icon/svg/btn/prev.svg") no-repeat top;
      background-size: cover;
  }
  .mod-slider-syncing-type-b .slider-for .slick-next{
      right: 30px;
      background: url("../images/icon/svg/btn/next.svg") no-repeat top;
      background-size: cover;
  }

  .mod-slider-syncing-type-b .slider-for .item-box {
      width: 100%;
      height: auto;
      background: none;
      border: none;
      border-radius: 0;
      overflow: hidden;
      padding: 0px;
  }
  .mod-slider-syncing-type-b .slider-for .item-box .inside{
      display: block;
  }
  .mod-slider-syncing-type-b .slider-for .item-box .cover {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
  }
  .mod-slider-syncing-type-b .slider-for .item-box .desc{
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      width: 100%;
      padding: 0;

      display: none;
  }

  .mod-slider-syncing-type-b .slider-for .item-box,
  .mod-slider-syncing-type-b .slider-for .item-box .inside{
      overflow: visible;
  }
  .mod-slider-syncing-type-b .slider-for .slick-current .item-box .desc{
      position: relative;
      display: block;
      /*
      width: calc(300% - 70px);
      margin-left: calc(-100% + 35px);
      */
      width: calc(300% - 50px);
      margin-left: calc(-100% + 25px);
      margin-top: 20px;
      background: #FFFFFF;
      padding: 15px;
      border-radius: 15px;
      overflow: visible;
  }
  .mod-slider-syncing-type-b .slider-for .slick-current .item-box .desc::before{
      content: '';
      position: absolute;
      top: -15px;
      left: 0;
      right: 0;
      margin: auto;
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 15px solid #FFFFFF;
  }
  .mod-slider-syncing-type-b .slider-for .slick-current .item-box .desc .name{
      text-align: center;
  }
  .mod-slider-syncing-type-b .slider-for .slick-current .item-box .desc .name-info{
      justify-content: center;
      margin-bottom: 10px;
  }
  .mod-slider-syncing-type-b .slider-for .slick-current .item-box .desc .name-info .projectby {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
  }

  .mod-slider-syncing-type-b .slider-for .item-box .desc .price{ display: none; }
  .mod-slider-syncing-type-b .slider-for .item-box .desc .mobile-price{
    color: #E5A56B;
    font-size: 1.2em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mod-slider-syncing-type-b .slider-for .item-box .desc .mobile-price .discount{
    height: 16px;
    color: #ffffff;
    font-size: 0.6em;
    line-height: 16px;
    font-weight: 400;
    background: #E56B6B;
    padding: 1px 4px;
    border-radius: 5px;
    margin-left: 5px;
  }

  .mod-slider-syncing-type-b .slider-nav{
    display: none;
  }
}

/*#################################
mod-slider-horizontal-book-banner
#################################*/
.mod-slider-horizontal-book-banner .slick-prev,
.mod-slider-horizontal-book-banner .slick-next{
  width: 40px;
  height: 40px;
  top: calc(50% - 46px);
}
.mod-slider-horizontal-book-banner .slick-prev{
  left: -50px;
  background: url("../images/icon/svg/btn/prev_arrow.svg") no-repeat top;
  background-size: cover;
}
.mod-slider-horizontal-book-banner .slick-next{
  right: -50px;
  background: url("../images/icon/svg/btn/next_arrow.svg") no-repeat top;
  background-size: cover;
}

.mod-slider-horizontal-book-banner .slick-slide {
  padding: 0 15px;
}
.mod-slider-horizontal-book-banner .item-box{
  width: 100%;
  height: auto;
  overflow: hidden;
  cursor: pointer;
}
.mod-slider-horizontal-book-banner .item-box .inside{
  width: 100%;
  height: auto;
}
.mod-slider-horizontal-book-banner .item-box .cover{
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 15px;
}
.mod-slider-horizontal-book-banner .item-box .cover .img-responsive{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.mod-slider-horizontal-book-banner .item-box .cover .img-responsive img{
	width: 100%;
}
.mod-slider-horizontal-book-banner .item-box .desc{
  padding-top: 10px;
}
.mod-slider-horizontal-book-banner .item-box .desc .name{
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.mod-slider-horizontal-book-banner .item-box .desc .name-info{
  display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.mod-slider-horizontal-book-banner .item-box .desc .name-info .cat{
	font-size: 12px;
  font-weight: 500;
  line-height: 12px;
	color: #E5A56B;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mod-slider-horizontal-book-banner .item-box .desc .name-info .projectby{
  max-width: 50%;
  padding-right: 5px;
  font-size: 12px;
  color: #A8A8A8;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 839px){
  .mod-slider-horizontal-book-banner .slick-prev{
    left: -10px;
  }
  .mod-slider-horizontal-book-banner .slick-next{
    right: -10px;
  }
}





/***
Categories List
***/
.categories-list{
	list-style: none;
	padding: 0;
  margin-top: 10px;
}
.categories-list a{
  display: inline-block;
  padding: 5px 15px;
  border-radius: 26px;
  margin: 0 2px 5px 2px;
  overflow: hidden;
  color: #ffffff;
  background: #c5c5c5;
  text-align: center;
}
.categories-list a:nth-child(1){ background: #DAA087;}
.categories-list a:nth-child(2){ background: #BB7E72;}
.categories-list a:nth-child(3){ background: #ABB99E;}
.categories-list a:nth-child(4){ background: #DED785;}
.categories-list a:nth-child(5){ background: #EBC674;}
.categories-list a:nth-child(6){ background: #E9B3B0;}
.categories-list a:nth-child(7){ background: #EDC4B0;}
.categories-list a:nth-child(8){ background: #BB7E72;}
.categories-list a:nth-child(9){ background: #CFAA86;}
.categories-list a:nth-child(10){ background: #CFAA86;}
.categories-list a:nth-child(11){ background: #BFBFBF;}
.categories-list a:nth-child(12){ background: #EDC4B0;}
.categories-list a:nth-child(13){ background: #D3C69B;}

.categories-list a:hover{
  background: #000000;
}



/***
Story Group 
***/
.story-group{}
.story-group .story-catname{
	background: #fff4d7;
	padding: 2px 8px;
	margin-bottom: 5px;
}
.story-group .story-image .img-responsive{ width: 100%;}
.story-group .story-share{ position: relative;}
.story-group .story-share .dropdown-menu{
	border-radius: 0;
}
.story-group .story-tag a{
	display: inline-flex;
	border: solid 1px #d7d7d7!important;
	margin-bottom: 5px;
	padding-left: 8px!important;
	padding-right: 8px!important;
	color: #000000;
}
.story-group .story-tag a:hover{ color: #a07a55;}
@media (max-width: 767px) {
	.story-group .story-image{ width: 200px; margin: auto!important; padding-left: 15px!important;}
}

/***
whish ITEM
***/
.col-whish{ position: relative;}
.col-whish .col-whish-control{
	position: absolute;
	right: 15%;
	top: 5%;
	overflow: visible;
}
.col-whish .col-whish-control .btn{
	background: #f3f2ef;
	padding: 1px 8px 1px 9px;
	font-size: 20px;
}
.col-whish .dropdown-menu{
	position: absolute;
	left: auto;
	right: 0;
	border: none!important;
	border-radius: 0;
	min-width: 70px!important;
	padding: 0!important;
	margin-top: 0;
	overflow: visible;
}
.col-whish .dropdown-menu li{ margin: 0!important;}
.col-whish .dropdown-menu li a{ text-align: center; padding: 6px 0px;}
.col-whish .col-whish-control.open .btn,
.col-whish .col-whish-control.open .dropdown-menu,
.col-whish .col-whish-control.open .dropdown-menu a{ background: #c49a6c; color: #ffffff;}
.col-whish .col-whish-control.open .dropdown-menu a:hover{ background: #000000;}


/***
USER COMMENT
***/

.user-comment-2 .user-avatar-post{ position: absolute; width: 73px;}
.user-comment-2 .comment-zone{ position: relative; overflow: hidden; min-height: 80px;}
.user-comment-2 .user-comment-text{ padding-left: 95px; padding-right:5px;}
.user-comment-2 hr{margin: 0;}
.user-comment-2 .user-comment-row{ padding-top:15px; padding-bottom: 15px;}
.user-comment-2 .user-comment-by a{ color: #333333;}
.user-comment-2 .user-comment-by a:hover{ color: #8b8d8c;}

.user-comment-2 .disable-comment{ background: #e8e7e5;}
.user-comment-2 .disable-comment .user-comment-by{ color: #8b8d8c;}
.user-comment-2 .disable-comment .user-comment-text{ color: #8b8d8c;}
.user-comment-2 .disable-comment .user-comment-text small{ color: #bfac9b;}
.user-comment-2 .disable-comment .user-comment-by a{
	color: #8b8d8c;
	pointer-events: none;
    cursor: default;
}

.user-comment-2 .disable-comment .user-comment-text small a{
	color: #bfac9b;
	pointer-events: none;
    cursor: default;
}

.user-comment-2 .disable-comment .dropdown a{
	pointer-events:visible;
	cursor: pointer;
}

@media (max-width: 767px) {
	.user-comment .img-responsive{ max-width: 100px; margin: auto;}
	.user-comment .user-comment-by{ text-align: center; margin-top: 10px;}
	.user-comment .user-comment-by span{ display: block;}
	.user-comment .user-comment-text{ text-align: center; margin: 20px 0;}
	
	.user-comment-2 .user-avatar-post{ position: absolute; width: 53px;}
	.user-comment-2 .user-comment-text{ padding-left: 65px; padding-right:5px;}	
}

/***
RATING HART
***/
/*
.mod-replycomment .rating {
	position: relative;
	display: inline-block;
	border: none;
	font-size: 14px;
	margin: 0 auto;
	left: 50%;
	transform: translateX(-50%);
}
.mod-replycomment .rating input {
	border: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	opacity: 0;
}
.mod-replycomment .rating label {
	position: relative;
	float: right;
	color: #C8C8C8;
	margin-bottom: 0;
}
.mod-replycomment .rating label:before {
  font-family: FontAwesome;
  content: "\f004";
	display: inline-block;
	font-style: normal;
  font-weight:lighter;
	speak: none;
	font-size: 1.7em;
	color: #ffffff;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	-moz-text-stroke-width: 1px;
	-moz-text-stroke-color: #E85D1F;
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #E85D1F;

}
.mod-replycomment .rating input:checked ~ label:before { color: #EA6C34; }
.mod-replycomment .rating label:hover ~ label:before { color: #E87947; }
.mod-replycomment .rating label:hover:before { color: #EA6C34; }
*/


/***
Forms
***/
.has-error{ color: #f70000;}

.form-group a{ color:#000000!important; }
.form-group a:hover{ color:#c49a6c!important; }

address { font-size: 14px!important; }
code {
  border: 1px solid #c49a6c;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);  
}
label {
	/*padding-left: 10px;*/
  padding-left: 0px;
  font-weight: 400;
  font-size: 14px;
}
.form-control { border-radius: 0; }

.form-control:-moz-placeholder { color: #8c8c8c; }
.form-control::-moz-placeholder { color: #8c8c8c; }
.form-control:-ms-input-placeholder { color: #8c8c8c; }
.form-control::-webkit-input-placeholder { color: #8c8c8c; }
.form-control {  
  font-size: 14px;
  font-weight: normal;
  color: #333333;
  background-color: #FFFFFF;
  border: 1px solid #DBDBDB;
  border-radius: 5px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #999999;
  outline: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
}
.form-control select{ border: none; background: none; width: 100%; height: 34px; outline: 0; font-size: 14px; line-height: 1.42857143;}
.uneditable-input {
  padding: 6px 12px;
  min-width: 206px;
  font-size: 14px;
  font-weight: normal;
  height: 34px;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

label.form-control {
  display: block;
  margin-bottom: 5px;
}

input[disabled],
select[disabled],
textarea[disabled] {
  cursor: not-allowed;
  background-color: #F4F4F4 !important;
}

input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #F9F9F9 !important;
}
textarea.form-control{ max-width: 100%;}

.form-control-select{ padding: 0; overflow: hidden;}
.form-control-select select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 30px 0 10px;
  background: #fff url('../images/icon/svg/down-arrow.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}
.form-control select{
  margin: 0!important;
  box-shadow: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('../images/icon/svg/down-arrow.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}
select.form-control{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  background: #fff url('../images/icon/svg/down-arrow.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}

.form-control-w-300{
  display: inline-block;
  max-width: 300px;
}

.select2-container--default .select2-selection--single {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0;
  width: 15;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  background: #fff url('../images/icon/svg/down-arrow.svg') no-repeat center center;
  width: 15px;
  height: 15px;
  left: 0;
  top: 40%;
}
.select2-container--classic .select2-selection--single:focus {
  border: 1px solid #999999;
}
.select2-search__field{ outline: none;}

/*
search
*/
.form-control-search{
  padding-left: 30px;
  background: #fff url('../images/icon/svg/search-icon.svg') no-repeat left 0.75rem center;
  background-size: 15px;
}
.form-control-search-right{
  padding-right: 30px;
  background: #fff url('../images/icon/svg/search-icon.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}

/*
picker
*/
.form-control.datepicker{
  padding-left: 10px;
  padding-right: 30px;
  background: #fff url('../images/icon/svg/calendar-line.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}
.form-control.datepicker-left{
  padding-left: 30px;
  padding-right: 10px;
  background: #fff url('../images/icon/svg/calendar-line.svg') no-repeat left 0.75rem center;
  background-size: 15px;
}

.form-control.timepicker{
  padding-right: 30px;
  background: #fff url('../images/icon/svg/time-watch.svg') no-repeat right 0.75rem center;
  background-size: 15px;
}
.form-control.timepicker-left{
  padding-left: 30px;
  background: #ffffff url('../images/icon/svg/time-watch.svg') no-repeat left 0.75rem center !important;
  background-size: 15px !important;
}

.picker-form .input-group{
  position: relative;
  display: block;
}
.picker-form .input-group-btn{
  height: 30px;
  display: none;
}
.picker-form .form-control.datepicker{
  padding-left: 30px;
  padding-right: 10px;
  background: #ffffff url('../images/icon/svg/calendar-line-1.svg') no-repeat left 0.75rem center !important;
  background-size: 15px !important;
  border-radius: 5px;
}
.picker-form .input-group.date{
  position: relative;
  overflow: hidden;
}
.picker-form .input-group-addon{
  position: absolute;
  border: none;
  background: none;
  color: #dddddd;
  z-index: 2;
  width: 30px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  right: 0;
}
.picker-form .input-group-addon > i {
  color: #dddddd;
}
.picker-form .input-group-addon.kv-date-picker{
  display: none;
}
.picker-form .has-error .input-group-addon {
  color: #b94a48;
  background: none;
  border: none;
}

.timepicker-form .input-group{
  width: 100%;
}
.timepicker-form .input-group .form-control{
  display: block;
  border-radius: 5px !important;
}
.timepicker-form .input-group-addon{ display: none;}


.page-container .form-control {
	border: 1px solid #dddddd;
	background-color: #ffffff;
}
.page-container  .form-control:focus { border-color: #c49a6c; }

/* input  groups */
.input-group.input-group-fixed {
  width: auto !important;
}

.input-group-addon {
  border-color: #c49a6c;
  background: #c49a6c;
	color: #ffffff;
}

.input-group-addon > i {
  color: #ffffff;
}

/* form control sizing */
.form-control-inline {
  display: inline-block !important;
}

.input-xsmall {
  width: 60px !important;
}

.input-small {
  width: 120px !important;
}

.input-medium {
  width: 240px !important;
}

.input-large {
  width: 320px !important;
}

.input-xlarge {
  width: 480px !important;
}

/***
Input spinner(in v1.4)
***/

input[type="text"].spinner,
input[type="password"].spinner,
input[type="datetime"].spinner,
input[type="datetime-local"].spinner,
input[type="date"].spinner,
input[type="month"].spinner,
input[type="time"].spinner,
input[type="week"].spinner,
input[type="number"].spinner,
input[type="email"].spinner,
input[type="url"].spinner,
input[type="search"].spinner,
input[type="tel"].spinner,
input[type="color"].spinner {
  /*background-image: url("../img/input-spinner.gif") !important;*/
  background-repeat: no-repeat;
  background-position: right 8px;
}

@media (max-width: 768px) {

  .input-large {
    width: 250px !important;
  }

  .input-xlarge {
    width: 300px !important;
  }

} 

.help-block {
  display: block;
  margin-top: 5px;
  color: #8B8B8B;
  font-size: 10px;
  line-height: 1.2;
}

/*##########################
fileupload
##########################*/
.fileupload-b .input-group{
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: normal;
  color: #333333;
  background-color: #FFFFFF;
  border: 1px solid #DBDBDB;
  border-radius: 5px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.fileupload-b .input-group .input-group-btn{
  width: 100%;
}
.fileupload-b .input-group .input-group-btn .uneditable-input{
  min-width: 100%;
  border: none;
  background: none;
}
.fileupload-b .btn-file{
  position: relative;
  width: 100px;
  height: 34px;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B1B1B1;
  font-weight: 400;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}
.fileupload-b .btn-file:hover{
  cursor: pointer;
  color: #E5A56B;
}
.fileupload-b .btn-file::before{
  position: absolute;
  content: "";
  height: 70%;
  left: 0;
  top: 15%;
  border-left: solid 1px #DBDBDB;
}

.fileupload-b.fileupload-exists .btn-file{ display: none;}
.fileupload-b.fileupload-exists .btn.fileupload-exists{
  position: absolute;
  right: 0;
  width: 100px;
  height: 38px;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B1B1B1;
  font-weight: 400;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  background: #ffffff;
}
.fileupload-b.fileupload-exists .btn.fileupload-exists .color-white{
  color: #B1B1B1;
}

/***
Error States
***/

.has-warning .help-inline,
.has-warning .help-block,
.has-warning .control-label {
  color: #c09853;
}

.has-warning .form-control {
  border-color: #c09853;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-warning .form-control:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-warning .input-group-addon {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}

.has-error .help-inline,
.has-error .help-block,
.has-error .control-label {
  color: #b94a48;
}

.has-error .form-control {
  border-color: #b94a48;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-error .form-control:focus {
  border-color: #953b39;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-error .input-group-addon {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}

.has-success .help-inline,
.has-success .help-block,
.has-success .control-label {
  color: #468847;
}

.has-success .form-control {
  border-color: #468847;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-success .form-control:focus {
  border-color: #356635;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-success .input-group-addon {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}

/***
Custom label and badges
***/
label.label{ margin-right: 5px;}

.label, 
.badge {
  font-weight: 300;  
  text-shadow: none !important;
}

.label {  
  font-size: 12px;  
  padding: 3px 10px 3px 10px;
  border-radius: 40px;
}

.label.label-sm {  
  font-size: 12px;
  padding: 1px 4px 1px 4px;
}

h1 .label,
h2 .label,
h3 .label,
h4 .label,
h5 .label,
h6 .label,
h7 .label {
  font-size: 75%;
}

h1.title-box,
h2.title-box,
h3.title-box,
h4.title-box,
h5.title-box,
h6.title-box,
h7.title-box{
	background: #ebe7e7;
	padding: 10px 10px;
}

@media (max-width: 767px) {
	h2.h2-xs{ font-size: 22px;}
}

.badge {
  font-size: 11px !important;
  font-weight: 300;
  text-align: center;
  background-color: #e02222;
  height: 18px;
  padding: 3px 6px 3px 6px;
  -webkit-border-radius: 12px !important;
     -moz-border-radius: 12px !important;
          border-radius: 12px !important;
  text-shadow:none !important;
  text-align: center;
  vertical-align: middle;
}

.badge.badge-roundless {
   -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
           border-radius: 0 !important;
}

.badge-default,
.label-default  {
  background-color: #F5F5F5 !important;
  border: solid 1px #D9D9D9;
  color: #383838 !important;
}

.badge-white,
.label-white  {
  background-color: #ffffff !important;
  color: #383838;
  border: solid 1px #EAEAEA !important;
}
.label-white a{ color: #383838; }

.label-dark, 
.badge-dark {
  background-color: #000000;
  background-image: none !important;
}

.badge-primary,
.label-primary {
  background-color: #428bca !important;
}

.label-success, 
.badge-success {
  background-color: #3cc051;
  background-image: none !important;
}

.label-warning, 
.badge-warning {
  background-color: #fcb322;
  background-image: none !important;
}

.label-danger, 
.badge-danger {
  background-color: #ed4e2a;
  background-image: none !important;
}

.label-info, 
.badge-info {
  background-color: #57b5e3;
  background-image: none !important;
}

.label-equator, 
.badge-equator {
  background-color: #E2B267;
  background-image: none !important;
}

.label-mountain-meadow, 
.badge-mountain-meadow {
  background-color: #19B26C;
  background-image: none !important;
}

.label-brick-red, 
.badge-brick-red{
  background-color: #CB384E;
  background-image: none !important;
}


/* fix badge position for navs */
.nav.nav-pills > li > a > .badge {
  margin-top: -2px;
}

.nav.nav-stacked > li > a > .badge {
  margin-top: 1px;
  margin-bottom: 0px;
}

/***
Iconic Labels
***/

.label.label-icon {
  padding: 4px 1px 4px 5px;
  margin-right: 2px;
  text-align: center !important;
}

.ie9 .label.label-icon, 
.ie10 .label.label-icon {
  padding: 3px 0px 3px 3px;
} 

.label.label-icon > i {
  font-size: 12px;
  text-align: center !important;
}

/***
checkbox radiobox
***/

.checkbox {
  padding-left: 20px; }
.checkbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
    padding-left: 5px; }
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 17px;
  left: 0;
  top: -2px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 0px;
  font-size: 11px;
      color: #555555; }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
	outline: none;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #555555;
  border-radius: 2px;
  margin-left: -16.5px;
  margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled,
.checkbox input[type="radio"]:disabled {
    cursor: not-allowed;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
      opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
        cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
    border-radius: 50%; }
.checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: #337ab7;
  border-color: #337ab7; }
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de; }
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
  color: #fff;}

.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
  background-color: #337ab7;
  border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.radio2{ padding-left: 0px;}
.radio2 .radio-cir{
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin-right: -6px;
}
.radio2 .radio-cir::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 17px;
	height: 17px;
	left: 0;
	margin-left: -26px;
	margin-top: -10px;
	border: 1px solid #cccccc;
	border-radius: 50%;
	background-color: #fff;
	-webkit-transition: border 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out;
	  transition: border 0.15s ease-in-out;
}
.radio2 .radio-cir::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
	margin-top: -10px;
  margin-left: -26px;
  border-radius: 50%;
  background-color: #a07a55;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio2 input[type="radio"] {
  opacity: 0;
  z-index: 1;
  cursor: pointer;
	outline: none;
}
.radio2 input[type="radio"]:checked ~ .radio-cir::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
      transform: scale(1, 1);
}



.radio { padding-left: 20px; }
.radio label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
    padding-left: 5px; }
.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
	margin-top: 4px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
	margin-top: 4px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #a07a55;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}


.radio input[type="radio"]:checked ~ label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
      transform: scale(1, 1);
}

.radio input[type="radio"] {
  opacity: 0;
  z-index: 1;
  cursor: pointer;
	outline: none;
}
.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
	outline: none;
}
.radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
      transform: scale(1, 1); }
.radio input[type="radio"]:disabled {
    cursor: not-allowed;
}
.radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
.radio.radio-inline {
    margin-top: 0; }
.radio-primary input[type="radio"] + label::after {
  background-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #337ab7; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f00c"; }
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff; }
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff; }


/* input with left aligned icons */
.input-icon {
  position: relative;
}


.input-icon input {
   padding-left: 33px !important;
}

.input-icon i {
  color: #ccc;
  display: block;
  position: absolute;
  margin: 8px 2px 4px 10px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}

.input-icon.right input {
   padding-left: 12px !important;
   padding-right: 33px !important;
}

.input-icon.right i {
   right: 8px;
   float: right;
}

.has-success .input-icon > i {
  color: #468847;
}

.has-warning .input-icon > i {
  color: #c09853;
}

.has-error .input-icon > i {
  color: #b94a48;
}

/*
bootstrap-tagsinput
*/
.bootstrap-tagsinput {
  width: 100%;
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* form-sec-title */
.form-sec-title{
  font-size: 17px;
  color: #C6874D;
}
.form-sec-title.hr{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: solid 1px #EDEDED;
}

/*###############
pagination
###############*/

.pagination > li > a,
.pagination > li > span {
  color: #ffffff;
  background-color: #c49a6c;
  border: 1px solid #a07a55;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #ffffff;
  background-color: #a07a55;
  border-color: #a07a55;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  color: #fff;
  background-color: #a07a55;
  border-color: #a07a55;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #D5D0D0;
  background-color: #c49a6c;
  border-color: #a07a55;
}

/**/
.pagination-light > li > a,
.pagination-light > li > span {
  color: #361A00;
  background: none;
  border: none;
  border-radius: 3px;
}
.pagination-light > li:first-child > a,
.pagination-light > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
	color: #361A00;
  background: none;
}
.pagination-light > li:last-child > a,
.pagination-light > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
	color: #361A00;
  background: none;
}
.pagination-light > li > a:hover,
.pagination-light > li > span:hover,
.pagination-light > li > a:focus,
.pagination-light > li > span:focus {
  color: #ffffff;
  background-color: #CF9B6B;
  border-color: #CF9B6B;
}
.pagination-light > .active > a,
.pagination-light > .active > span,
.pagination-light > .active > a:hover,
.pagination-light > .active > span:hover,
.pagination-light > .active > a:focus,
.pagination-light > .active > span:focus {
	color: #fff;
	background-color: #CF9B6B;
	border-color: #CF9B6B;
}
.pagination-light > .disabled > span,
.pagination-light > .disabled > span:hover,
.pagination-light > .disabled > span:focus,
.pagination-light > .disabled > a,
.pagination-light > .disabled > a:hover,
.pagination-light > .disabled > a:focus {
  color: #D5D0D0;
  background-color: #c49a6c;
  border-color: #a07a55;
}



.pagination-light > .no-hover > span:hover{
	color: #361A00;
	background: none;
	border: none;
}

/*
pagination-two
*/
.pagination-two .btn{
  height: 29px;
  outline: none;
  box-shadow: none;
  border: solid 1px #D5D5D5;
  background: #ffffff;
  padding: 3px 10px;
  line-height: 23px;
}
.pagination-two .btn:hover{
  background: #E5A56B;
  border-color: #E5A56B;
  color: #ffffff;
}
.pagination-two .select-wrapper{
  position: relative;
  min-width: 90px;
  padding: 0;
}
.pagination-two .select-wrapper select{
  width: 100%;
  outline: none;
  box-shadow: none;
  background: none;
  border: none;
  padding: 2px 10px;
  line-height: 23px;
  appearance: none;
}
.pagination-two .select-wrapper::after{
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 22px;
  content: '\f107';
  right: 8px;
  top: 10%;
}

/***
TOOLTRIP
***/
.tooltip > .tooltip-inner {
    background-color: #e7e2dd; 
    color: #000000; 
    border: none;
	border-radius: 0;
    padding: 15px;
}
.tooltip.top > .tooltip-arrow{ border-top:5px solid #e7e2dd!important;}
.tooltip.bottom > .tooltip-arrow{ border-bottom:5px solid #e7e2dd!important;}
.tooltip.left > .tooltip-arrow { border-left:5px solid #e7e2dd!important;}
.tooltip.right > .tooltip-arrow { border-right:5px solid #e7e2dd!important;}
/*
.tooltip > .tooltip-arrow{ border-color: #e7e2dd!important;}
*/

/***
LIST MINUS
***/
.list-minus{
	list-style: none;
	margin-left: 0;
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.list-minus li .btn,
.list-minus li i,
.list-minus li div{ text-indent:0;}
.list-minus li:before{
	content: '\2014 \00A0';
}

/***
TABLE STRIPED
***/
.table-striped thead{ background: #ebe7e7; }
.table-striped thead tr th{
	padding-top: 15px;
	padding-bottom: 15px;
}
.table-striped > tbody > tr{ background: #f4f0e7;}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent;}
.table-striped > tbody > tr:hover {
  background-color: #e2dedb;
}
.table-striped.table-striped-no > tbody > tr {
    background: #ffffff;
}
.table-striped.table-striped-no.thover > tbody > tr:hover {
  background-color: #e2dedb;
}
.table-striped.table-striped-no.thover > tbody > tr.no-hover:hover {
  background-color: #ffffff;
}


.table-striped-3 > tbody > tr{ background: #f0f0f0; border-color: #ffffff!important;}
.table-striped-3 > tbody > tr:nth-of-type(odd) { background-color: #f8f8f8;}
.table-striped-3 > tbody > tr:hover {
  background-color: #e2dedb;
}

/***
TAB LIST
***/
.nav-tabs.list-tab {
	border:none;
	margin-left: -15px;
	margin-right: -15px;
}
.nav-tabs.list-tab > li {
	float: none;
	margin-bottom: 0;
	border-bottom: solid 1px #e8e3da;
}
.nav-tabs.list-tab > li > a {
	margin-right: 0;
	font-size: 1em;
	line-height: 2em;
	border:none;
	border-radius: 0;
	color: #000000;
	text-align: center;
}
.nav-tabs.list-tab > li > a:hover {
  border: none;
}
.nav-tabs.list-tab > li.active > a,
.nav-tabs.list-tab > li.active > a:hover,
.nav-tabs.list-tab > li.active > a:focus {
  color: #000000;
  cursor: default;
  background-color: #e5e5e5;
  border: none;
}

.list-tab-content{
	border-left: solid 1px #e8e3da;
	min-height: 561px;
}

/***
TABLE CUSTOM
***/
.table-responsive{
  width: 100%;
  overflow-y: scroll !important;
}

.table-with-control{}
.table-with-control .table-control{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  align-items: center;
  justify-content: space-between;
}
.table-with-control .table-control .table-summary{
  padding-left: 15px;
  padding-right: 15px;
}
.table-with-control .table-control .table-filter{
  padding-left: 15px;
  padding-right: 15px;
}
.table-with-control .table-control .table-filter ul > li:last-child{ padding-right: 0;}

.table-with-control .table-control .table-pagination{
  padding-left: 15px;
  padding-right: 15px;
}

.table-with-control .table-control .table-summary-sort{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;

  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}


/*
table-styles-A
*/
.table-styles-A{
  border-radius: 5px 5px 0 0;
  border-collapse: collapse;
  border: solid 1px #E0E0E0;
}
.table-styles-A thead tr{
  background: #F4F2EF;
}
.table-styles-A .table td,
.table-styles-A .table th{
  padding: 10px 10px;
}

.table-styles-A tbody td .btn {
  background: #f4f4f4;
  border: solid 1px #d5d5d5;
  border-radius: 13px;
  padding: 6px 8px;
  margin-left: 5px;
}

.table-styles-A tbody td small{
  color: #656565 !important;
  font-size: 12px;
}

/*
*/
.table .dropdown-status{ width: 120px;}
.table .dropdown-status .btn{ width: 120px; }
.table .dropdown-status .btn .inside{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.table .dropdown-status .btn .inside .demo-icon{ font-size: 18px;}
.table .dropdown-status .btn .inside .text{
    width: 60px;
    font-size: 10px !important;
    margin-right: 5px;
    text-align: left;
    padding-left: 3px;
}



/*
*/
.table .btn-action{
  border-radius: 15px !important;
  padding: 6px 8px;
  margin-left: 0px !important;
  background: #F4F4F4;
  border: solid 1px #D5D5D5;
  color: #383838;
}
.table .btn-action.btn-action-blue:hover{ background: rgba(168, 238, 255, 1); }
.table .btn-action.btn-action-yellow:hover{ background: rgba(255, 238, 168, 1); }
.table .btn-action.btn-action-green:hover{ background: rgba(191, 219, 163, 1); }
.table .btn-action.btn-action-red:hover{ background: rgba(255, 185, 168, 1); }



/***
ACCORDION
***/
.hsm-accordion .panel-heading{ background: #f9f9f9;}
.hsm-accordion .hsm-accordion-h{ border-right: solid 1px #e8e3da!important;}
.hsm-accordion .hsm-accordion-text{
	font-family: 'droid_sans_thairegular'; font-size: 18px; /*line-height: 1.7;*/ line-height: 1.9; font-weight: lighter;
	text-indent: 10%;
	padding-left:14%;
	padding-right: 14%;
}
.hsm-accordion .panel-footer{
	padding-top: 0;
	padding-bottom: 0;
}
.hsm-accordion .panel-footer .btn-default{
	height: 68px;
}
.hsm-accordion .hsm-accordion-dd{
	position: relative;
}
.hsm-accordion .hsm-accordion-dd .dropdown-menu{
	left: auto;
	right: 0;
	border-radius: 0;
	width: 300px;
	padding-top: 0!important;
	padding-bottom: 0!important;
}
.hsm-accordion .hsm-accordion-dd .dropdown-menu li a{
	padding-top: 10px;
	padding-bottom: 10px;
}
.hsm-accordion .hsm-accordion-dd .dropdown-menu li a .fa{ font-size: 15px; line-height: 22px;}

@media (max-width: 320px) {
	.hsm-accordion .panel-footer h4{ font-size: 1em;}
}
/***
COMMENT INPUT
***/
.comment-input-addon{}
.comment-input-addon .input-group-addon{
	padding: 0!important;
	border: none!important;
}
.comment-input-addon .form-group{ position: relative;}
.comment-input-addon .form-control{ width: 100%; padding-right:90px;}
.comment-input-addon .btn{
	/*
	position: absolute;
	right: 5px;
	top: 4px;
	*/
	padding: 3px 6px;
	border: solid 1px #cccccc;
}


/***
ACCORDION
***/
.coin-list{
	border-bottom: solid 1px #e9e9e9;
	padding-bottom: 15px;
	padding-top: 15px;
}
.coin-list:last-child{ border: none;}
.coin-list .coin-list-text{
	position: relative;
}
.coin-list .coin-list-ribbon{
	position: absolute;
	top: -15px;
	right: 0;
	width: 30px;
	height: auto;
}
.coin-list .coin-list-ribbon img{ width: 20px;}


/*
CHARTS
*/
.charts{
	max-width: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}


/*
MODAL Buypig
*/

.radio-btn-yellow label{ background-color: #efefef;}
.radio-btn-yellow input[type=radio]{ position: absolute; opacity: 0;}
.radio-btn-yellow input[type=radio]:checked + label{background-color: #fbcb1c ; }
.radio-btn-yellow:hover label{background-color: #fbcb1c ; }

.radio-btn-cream label{ background-color: #ffffff;}
.radio-btn-cream input[type=radio]{ position: absolute; opacity: 0;}
.radio-btn-cream input[type=radio]:checked + label{background-color: #f7f7ef ; }
.radio-btn-cream:hover label{background-color: #f7f7ef ; }

@media (max-width: 992px) {
	/***
	Footer
	***/
	.footer .social-footer{ text-align: center;}
}
@media (max-width: 768px) {
	/***
	Footer
	***
	.footer .quicklink li{ text-align: center;}
	.footer .social-footer{ text-align: center;}
	
	/***
	Copyright
	***/
	.copyright p{ text-align: center;}
}

/*
*/
.background-section:nth-child(even){ background: #ffffff!important; }

/*##############################################
Shopping Cart Right Fixed
##############################################*/
.shoping-cart-fixed{
  position: fixed;
  width: 60px;
  height: 60px;
  overflow: hidden;
  background: #C6874D;
  border-radius: 100%;
  right: 10px;
  bottom: 70px;
  z-index: 1500;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.16);
}
.shoping-cart-fixed svg{
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
}
.shoping-cart-fixed .count{
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  right: 11%;
  bottom: 11%;
  color: #ffffff;
  background: #CB384E;
  border-radius: 100%;
}

@media (max-width: 767px) {
  .shoping-cart-fixed{ bottom: 60px; }
}

/*##############################################
BUY COIN PAGES
##############################################*/
.buy-coin-pages h4{ color: #C6874D;}
.buy-coin-pages .list-coin-info {
    text-align: center;
    margin-bottom: 40px;
}
.buy-coin-pages .list-coin-info li{
    width: 182px;
}
.buy-coin-pages .list-coin-info li .box{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    background: #FFFFFF;
    border: solid 1px #F0F0F0;
    border-radius: 30px;
    height: 45px;
}
.buy-coin-pages .list-coin-info li .box div:nth-child(1){
    -ms-flex: 0 0 45px;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    overflow: hidden;
    padding-left: 8px;
}
.buy-coin-pages .list-coin-info li .box div:nth-child(1) .icon{
    width: 34px;
    height: 34px;
    margin-top: 5px;
    vertical-align: middle;
}
.buy-coin-pages .list-coin-info li .box div:nth-child(2){
    -ms-flex: 0 0 calc(100% - 85px);
    flex: 0 0 calc(100% - 85px);
    width: calc(100% - 85px);
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    color: #656565;
}
.buy-coin-pages .list-coin-info li .box div:nth-child(3){
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    width: 40px;
    text-align: right;
    padding-right: 8px;
    font-size: 30px;
}
.buy-coin-pages .list-coin-info li .box div:nth-child(3) a{color: #D6D6D6;}
.buy-coin-pages .list-coin-info li .box div:nth-child(3) a .icon{
    width: 30px;
    height: 30px;
}

.buy-coin-pages .list-channel{
    max-width: 800px;
    margin: 15px auto;
}
.buy-coin-pages .list-channel .list-col{
    width: calc(33.33% - 10px);
    padding: 5px 15px;
}
.buy-coin-pages .list-channel .item{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding-top: 100%;
    border: solid 1px #D9D9D9;
    border-radius: 10px;
    cursor: pointer;
    background: #ffffff;
}
.buy-coin-pages .list-channel .list-col .radio_pack{
    opacity: 0;
    display: none;
}
.buy-coin-pages .list-channel .list-col .radio_pack:checked + .item {
    border: solid 1px #FFAA0A;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
    -moz-box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
    box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
}

.buy-coin-pages .list-channel .item .item_con{
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow: hidden;
}
.buy-coin-pages .list-channel .item .item_con .img{
    width: 100%;
    height: calc(100% - 68px);
    text-align: center;
    display: table;
}
.buy-coin-pages .list-channel .item .item_con .img .imgz{
    display: table-cell;
    vertical-align: middle;
}
.buy-coin-pages .list-channel .item .item_con .img .imgz img{
    width: auto;
    height: 60px;
}
.buy-coin-pages .list-channel .item .item_con .alert{
    position: absolute;
    width: 100%;
    top: 52%;
    font-size: 12px;
    line-height: 1.2;
    background: #FFAA0A;
    color: #ffffff;
    padding: 2px 0;
    border-radius: 5px;
    border: solid 1px #C6874D;
    text-align: center;
}

.buy-coin-pages .list-channel .item .item_con .pack{
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 20px;

}
.buy-coin-pages .list-channel .item .item_con .pack{
    padding: 0 5px;
}
.buy-coin-pages .list-channel .item .item_con .desc{
    text-align: center;
    font-family: 'THSarabunNew';
    font-size: 12px;
    line-height: 1.2;
    margin-top: 5px;
}

/*
*/
.buy-coin-pages .list-packages{
    max-width: 800px;
    margin: 15px auto;
}
.buy-coin-pages .list-packages .list-col{
    width: calc(33.33% - 10px);
    padding: 5px 15px;
}
.buy-coin-pages .list-packages .item{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding-top: 100%;
    border: solid 1px #D9D9D9;
    border-radius: 10px;
    cursor: pointer;
    background: #ffffff;
}
.buy-coin-pages .list-packages .list-col .radio_pack{
    opacity: 0;
    display: none;
}
.buy-coin-pages .list-packages .list-col .radio_pack:checked + .item {
    border: solid 1px #FFAA0A;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
    -moz-box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
    box-shadow: 0px 0px 2px 0px rgba(255,170,10,1);
}

.buy-coin-pages .list-packages .item .item_con {
  position: absolute;
  top: 5px;
  left: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 15px);
  overflow: hidden;
}
.buy-coin-pages .list-packages .item .item_con .img{
    width: 100%;
    height: calc(100% - 82px);
    text-align: center;
    display: table;
}
.buy-coin-pages .list-packages .item .item_con .img .imgz{
    display: table-cell;
    vertical-align: middle;
}
.buy-coin-pages .list-packages .item .item_con .img .imgz img{
    width: auto;
    height: 60px;
}
.buy-coin-pages .list-packages .item .item_con .alert{
    position: absolute;
    width: 100%;
    top: 52%;
    font-size: 12px;
    line-height: 1.2;
    background: #FFAA0A;
    color: #ffffff;
    padding: 2px 0;
    border-radius: 5px;
    border: solid 1px #C6874D;
    text-align: center;
}

.buy-coin-pages .list-packages .item .item_con .pack{
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 20px;
    display: flexbox;
}
.buy-coin-pages .list-packages .item .item_con .pack i{
    display: inline-flex;
    vertical-align: middle;
}
.buy-coin-pages .list-packages .item .item_con .pack span{
    display: inline-flex;
    vertical-align: middle;
}
.buy-coin-pages .list-packages .item .item_con .price{
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
}
.buy-coin-pages .list-packages .item .item_con .price i{
    display: inline-flex;
    vertical-align: middle;
}
.buy-coin-pages .list-packages .item .item_con .amount{
  text-align: center;
  color: #A8A8A8;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 991px) {
  .buy-coin-pages .list-channel .item .item_con .pack{ font-size: 18px; }
}
@media (max-width: 680px) {
  .buy-coin-pages .list-channel .list-col{ padding: 5px; }
  .buy-coin-pages .list-channel .item .item_con .pack{ font-size: 16px; }

  .buy-coin-pages .list-packages .list-col{ padding: 5px; }
  .buy-coin-pages .list-packages .item .item_con{ top: 10px;}
  .buy-coin-pages .list-packages .item .item_con .pack{ font-size: 18px;}
  .buy-coin-pages .list-packages .item .item_con .icon-coin {
    width: 20px;
    height: 20px;
  }
  .buy-coin-pages .list-packages .item .item_con .icon-gem{
    width: 20px;
    height: 16px;
  }

}
@media (max-width: 582px) {
  .buy-coin-pages .list-coin-info {
    width: 290px;
    margin: auto;
  }

  .buy-coin-pages .list-packages .item .item_con .img{
    height: calc(100% - 102px);
    padding: 10px 0;
  }
  .buy-coin-pages .list-packages .item .item_con .img .imgz img{ height: 40px; }
}
@media (max-width: 560px) {
  .buy-coin-pages .list-channel .list-col{
    width: calc(50% - 4px);
    padding: 5px;
  }
  .buy-coin-pages .list-channel .item .item_con .alert {
    position: relative;
    width: 100%;
    top: 0;
    margin-bottom: 5px;
    margin-top: -15px;
  }

  .buy-coin-pages .list-packages .list-col{
    width: calc(50% - 4px);
    padding: 5px;
  }
  .buy-coin-pages .list-packages .item .item_con .img{
    height: calc(100% - 82px);
    padding: 0;
  }
  .buy-coin-pages .list-packages .item .item_con .img .imgz img{ height: 60px; }
}
@media (max-width: 400px) {
  .buy-coin-pages .list-packages .item .item_con .img{
    height: calc(100% - 102px);
    padding: 10px 0;
  }
  .buy-coin-pages .list-packages .item .item_con .img .imgz img{ height: 40px; }
}

@media (max-width: 350px) {
  .buy-coin-pages .list-channel .list-col{
    width: calc(100% - 2px);
    padding: 5px;
  }
  .buy-coin-pages .list-channel .item .item_con .pack{ font-size: 20px; }


  .buy-coin-pages .list-packages .list-col{
    width: calc(100% - 2px);
    padding: 5px;
  }
  .buy-coin-pages .list-packages .item .item_con .img{
    height: calc(100% - 82px);
    padding: 0;
  }
  .buy-coin-pages .list-packages .item .item_con .img .imgz img{ height: 60px; }
}




/*##############################################
COMMENT / REVIEW
##############################################*/
.story-review{
  padding: 25px 28px;
  font-size: 15px!important;
  line-height: 24px;
}
.story-review .help-block,
.comment-area .help-block{ font-size: 13px;}

.story-review .title-duozone .title-right{ text-align: right;}
.story-review .title-duozone{
  justify-content: space-between;
}

.story-review .story-review-list{
    width: 100%;
    height: auto;
    margin-top: 10px;
}
.story-review .story-review-list > ul > li{
    width: 100%;
    height: auto;
    border-bottom: solid 1px #D5D5D5;
    padding-top: 15px;
    padding-bottom: 15px;
}
.story-review .story-review-list > ul > li:last-child{ border-bottom: none;}
.story-review .review-item .ucomment{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}
.story-review .review-item .ucomment .info{
  -ms-flex: 0 0 calc(100% - 250px);
  flex: 0 0 calc(100% - 250px);
	height: auto;
	position: relative;
}

.story-review .review-item .ucomment .option{
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  height: auto;
  text-align: right;
}
.story-review .review-item .ucomment .option .dropdown button{
    padding: 0;
    background: none;
    border: none;
    margin-left: 10px;
}
.story-review .review-item .ucomment .option .dropdown .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0;
    vertical-align: middle;
    border-top: 8px dashed;
    border-top: 8px solid\9;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
.story-review .review-item .ucomment .option .dropdown .dropdown-menu{
  min-width: 0;
  width: 65px;
}



.story-review .review-item .ucomment .info .img{
    float: left;
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 100%;
}
.story-review .review-item .ucomment .info .img img{
    position: absolute;
    top: 0;
    width: auto;
    min-width: 100%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.story-review .review-item .ucomment .info .name{
  float: left;
	margin-left: 15px;
	width: calc(100% - 75px);
}
.story-review .review-item .ucomment .info .name > div:first-child{
	/*font-family: 'promptmedium';*/
	width: 100%;
	height: auto;
  color:#E5A56B;
  font-size: 16px;
  line-height: 21px;
	margin-top: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.story-review .review-item .ucomment .info .name div:nth-child(2){
  font-size: 13px;
  color: #B1B1B1;
}
.story-review .review-item .ucomment .info .name.israting > div:first-child{ margin-top: 0px; }
.story-review .review-item .textcomment{
    padding-left: 65px;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    line-height: 1.7em;
    margin-top: 10px;
    word-break: break-all;
}

/* story-review-reply */
.story-review .story-review-list > ul > li > ul{
	padding-left: 60px;
	margin-top: 15px;
	display: none;
}
.story-review .story-review-list > ul > li > ul > li{
  border-top: solid 1px #D5D5D5;
  padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	border-left: solid 8px #F2E4D8;
}

.story-review .story-review-list .storyreviewreply .textcomment{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
}


.story-review .review-item .option{
	padding-left: 75px;
	color: #C4C4C4;
}
.story-review .review-item .option a{ color: #B2967D; }
.story-review .review-item .option a:hover{ color: #E5A56B;}

.story-review .review-item .option li:last-child{
	float: right;
}
.story-review .review-item .option li:last-child ul li a{
  color: #404040;
}
.story-review .review-item .option li:last-child ul li a:hover{ color: #E5A56B;}
.story-review .review-item .option .btn-like{ color: #404040; }
.story-review .review-item .option .btn-like:hover,
.story-review .review-item .option .btn-like.islike,
.story-review .review-item .storyreviewreply .option .btn-like:hover,
.story-review .review-item .storyreviewreply .option .btn-like.islike{ color: #E5A56B !important; }
.story-review .review-item .option .uncomment{ display: none;}

.story-review .replay-footer{
	/*background: #F2E4D8;*/
	margin-left: 50px;
	margin-top: 15px;
	padding: 8px 10px;
	border-radius: 5px;
	
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.story-review .replay-footer .imgz{
	position: relative;
	-ms-flex: 0 0 40px;
    flex: 0 0 40px;
	height: 40px;
	margin-right: 5px;
	overflow: hidden;
	border-radius: 100%;
}
.story-review .replay-footer .imgz img{
	position: absolute;
    top: 0;
    width: auto;
    min-width: 100%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
}
.story-review .replay-footer .comment-inpz{
	-ms-flex: 0 0 calc(100% - 80px);
  flex: 0 0 calc(100% - 80px);
  height: auto;
  min-height: 40px;
	background: rgba(255,255,255,0.4);
	border-radius: 40px;
  padding: 5px 10px 0 10px;
  border: 1px solid #dddddd;
}
.story-review .replay-footer .comment-inpz .emojiPickerIconWrap{ width: 100%; }
.story-review .replay-footer .comment-inpz .text-wrcomm{
  display: block;
	width: 100% !important;
	border: none;
  height: auto;
  min-height: 30px;
	outline: none;
	background: none;
  padding-right: 40px;
  padding-left: 10px;
  overflow: hidden;
  resize: both;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
}
.story-review .replay-footer .comment-inpz .text-wrcomm.onemoji{ padding-right: 0px;}
.story-review .replay-footer .comment-inpz .emojiPickerIcon{ margin-right: 5px;}
.emojiPicker nav{ display: none !important;}

.story-review .replay-footer .bsendreply{
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  align-items: flex-start;
}
.story-review .replay-footer .bsendreply button{
  /*bottom: 8px;*/
  padding: 0;
  font-size: 28px;
  width: auto;
  border: none;
  outline: 0;
  background: none;
  margin-left: 5px;
  margin-top: 5px;
}
.story-review .replay-footer .bsendreply button > i::before{ margin: 0;}
.story-review .replay-footer.has-error .comment-inpz{ border-color:#b94a48;}
.story-review .replay-footer.has-error .bsendreply button{ color: #383838;}
.story-review .replay-footer .help-block{ margin-left: 45px;}


@media (max-width: 767px){
    .story-review{ padding: 25px 20px; }
    .story-review .replay-footer{ margin-left: 0px; }

}


@media (max-width: 600px){
	.story-review .review-item .ucomment .info{
		-ms-flex: 0 0 calc(100% - 200px);
		flex: 0 0 calc(100% - 200px);
		max-width: calc(100% - 200px);
	}
	.story-review .review-item .ucomment .option{
		-ms-flex: 0 0 200px;
		flex: 0 0 200px;
	}
	.story-review .review-item .ucomment .info .name { width: calc(100% - 75px);}
  .story-review .review-item .textcomment { padding-left: 0px; }
  .story-review .review-item .option{ padding-left: 0px; }
	/* REPLY */
	.story-review .story-review-list > ul > li > ul{ padding-left: 0px; }
	
}

@media (max-width: 500px){
	.story-review .title-duozone .title-left span:nth-child(2){ font-size: 15px;}
}


@media (max-width: 479px){
  .story-review .title-duozone .story_h_title small{ display: none;}
  
  .story-review .review-item .ucomment .info{
		-ms-flex: 0 0 calc(100% - 120px);
		flex: 0 0 calc(100% - 120px);
		max-width: calc(100% - 120px);
	}
	.story-review .review-item .ucomment .option{
		-ms-flex: 0 0 120px;
		flex: 0 0 120px;
	}


	.story-review .review-item .ucomment .info .img{
		width: 50px;
		height: 50px;
	}
	.story-review .review-item .ucomment .info .name{ width: calc(100% - 65px);}

    .story-review .review-item .textcomment{ padding-left: 0; }
    .story-review .story-review-list > ul > li > ul{ padding-left: 0px; }
	.story-review .review-item .option{
		margin-top: 5px;
		padding-left: 0;
		color: #C4C4C4;
	}
}

@media (max-width: 380px){
  .story-review .title-duozone .title-left{ flex: 0 0 120px; }
  .story-review .title-duozone .title-right{ flex: 0 0 calc(100% - 120px); }


  .story-review .review-item .ucomment{
    align-items: unset;
  }
	.story-review .review-item .ucomment .info{
		-ms-flex: 0 0 calc(100% - 120px);
		flex: 0 0 calc(100% - 120px);
		max-width: calc(100% - 120px);
	}
	.story-review .review-item .ucomment .option{
		-ms-flex: 0 0 120px;
		flex: 0 0 120px;
	}

	.story-review .review-item .ucomment .info .name > div:first-child{ margin-top: 0;}

	.story-review .review-item .option{ font-size: 13px; }
	.story-review .review-item .option li{ padding-right: 0;}
}

/*
*/
.story-review-comment{ padding: 25px 28px; }
.story-review-comment .comment-area{
	width: 100%;
	max-width: 740px;
	height: auto;
	margin: 15px auto 0 auto;
}
.story-review-comment .comment-area .text-inp{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 15px;
	margin-bottom: 15px;
}
.story-review-comment .comment-area .text-inp textarea{
  border-radius: 5px;
  padding-right: 35px;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  line-height: 1.7em;
  border: 1px solid #D6D6D6;
}
.story-review-comment .comment-area .text-inp .emojiPickerIconWrap .emojiPickerIcon{
  width: 30px !important;
  height: 30px !important;
  position: absolute !important;
  top: auto;
  bottom: 5px;
  right: 5px;
}

.story-review-comment .comment-area .sfrm-rating{ margin-bottom: 5px;}
.story-review-comment .comment-area .frmrate{ display: none;}
.story-review-comment .comment-area .btn{ width:150px;}

.story-review-comment .conment-logon{
  padding: 25px 15px;
  background: #FCF7F2;
  border-radius: 10px;
  color: #585655;
}

@media (max-width: 767px){
    .story-review-comment{ padding: 25px 20px; }
}

/*
REVIEW BOX
*/
.review-box{
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.04);
  -moz-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.04);
  box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.04);
  margin: 0 0 15px 0;
  padding: 10px;

  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.review-box .cover{
  -ms-flex: 0 0 134px;
  flex: 0 0 134px;
  height: auto;
  overflow: hidden;
  position: relative;
  padding-top: 176px;
}
.review-box .cover img{
  position: absolute;
  top: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.review-box .desc{
  -ms-flex: 0 0 calc(100% - 134px);
  flex: 0 0 calc(100% - 134px);
  height: auto;
  overflow: hidden;
  padding-left: 10px;
}
.review-box .desc .info .quote{
  display: inline-block;
  width: 34px;
  height: 24px;
  background: url('../images/icon/svg/quote.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 5px;
}
.review-box .desc .text{  
  overflow: hidden;
  padding-bottom: 5px;
  border-bottom: solid 1px #EBEBEB;

  font-family: 'THSarabunNew';
}
.review-box .desc .text span{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-box .desc .title{
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.2;
}
.review-box .desc .text a{
  color: #C6874D;
  font-family: 'promptmedium';
}
.review-box .desc .writer{
  font-size: 14px;
  color: #656565;
}
.review-box .desc .rating{
  font-size: 11px;
  color: #656565;
}
.review-box .desc .rating i{
  font-size: 12px;
  color: #FDC413;
  text-shadow: 0px 0px 1px rgb(177 146 112);
}

.modal_comment_read .quote{
  display: inline-block;
  width: 34px;
  height: 24px;
  background: url('../images/icon/svg/quote.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 5px;
}
.modal_comment_read .uname{
  font-family: 'promptmedium';
}
.modal_comment_read .text{
  overflow: hidden;
  padding-bottom: 5px;
  font-family: 'THSarabunNew';
}

/*#############################################
  modal action
#############################################*/
/*
MODAL AUTHEN
*/
.modal-auth{ overflow: scroll;}
.modal-auth .modal-dialog {
  max-width: 400px;
}
.modal-auth .modal-content{ overflow: hidden;}
.modal-auth .modal-header{
  overflow: hidden;
  margin-top: -25px;
  margin-left: -15px;
  margin-right: -15px;
  border-radius: ;
}
.modal-auth .modal-header {
  padding: 25px 0 15px 0;
}
.modal-auth .modal-header-images{
  width: 100%;
}
.modal-auth .modal-header-images img{ width: 100%;}
.modal-auth .btn{
  padding: 0;
  height: 45px;
  font-size: 18px;
  line-height: 45px;
}
.modal-auth .btn-facebook,
.modal-auth .btn-line{ font-size: 15px !important;}
.modal-auth .btn-facebook img{ height: 20px;}
.modal-auth .btn-line img{ height: 30px;}

.modal-auth .form-group label{
  padding-left: 20px;
  font-weight: 500;
  font-size: 15px;
  margin: 0;
}
.modal-auth .form-control{
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  padding: 2px 20px;
}


/*
MODAL FORM TOP IMG
*/
.modal-form-topimg{ overflow: scroll;}
.modal-form-topimg .modal-dialog {
  max-width: 450px;
}
.modal-form-topimg .modal-content{ overflow: hidden;}
.modal-form-topimg .modal-header{
  overflow: hidden;
  margin-top: -25px;
  margin-left: -15px;
  margin-right: -15px;
  border-radius: ;
}
.modal-form-topimg .modal-header-images{
  width: 100%;
}
.modal-form-topimg .modal-header-images img{ width: 100%;}

.modal-form-topimg .modal-title{ font-size: 20px;}
.modal-form-topimg .form-control{
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  padding: 2px 20px;
}
.modal-form-topimg textarea.form-control{
  height: auto;
  line-height: 45px;
  border-radius: 10px;
  padding: 2px 20px;
}


/*
MODAL
*/
.modal_type2 .modal-header .close-default {
  top: 30px;
  right: 5px;
}


/*
MODAL COMMENT
*/
.mod-replycomment .byuser{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}
.mod-replycomment .byuser .img{
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
}
.mod-replycomment .byuser .img img{ width: 100%;}
.mod-replycomment .byuser .name{
    -ms-flex: 0 0 calc(100% - 60px);
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
    max-height: 60px;
    line-height: 30px;
    padding-left: 10px;
    overflow: hidden;
    vertical-align: middle;
}


/*
modal-purchase
*/
.modal-purchase .modal-header{ position: relative; margin-bottom: 15px;}
.modal-purchase .modal-header .close-default{
    font-size: 18px;
    margin: 0;
    top: 15px;
    z-index: 900;
}
.modal-purchase .modal-header h3{
    position: absolute;
    width: 100%;
    text-align: center;
    margin: 0;
    top: 15px;
}
.modal-purchase .info{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 15px;
}
.modal-purchase .info .img{
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.modal-purchase .info .img img{
    position: absolute;
    width: 100%;
}
.modal-purchase .info .name{
    -ms-flex: 0 0 calc(100% - 120px);
    flex: 0 0 calc(100% - 120px);
    width: calc(100% - 120px);
    padding-left: 15px;
    font-family: 'promptmedium';
    font-size: 18px;
}
.modal-purchase .info .name div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-purchase .info .name .story{
    font-family: 'promptregular';
    font-size: 14px;
    color: #A8A8A8;
}
.modal-purchase .info .price{
    text-align: right;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    width: 60px;
    font-size: 18px;
}
.modal-purchase .info .price .icon{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.modal-purchase .coin-info{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
    border: solid 1px #EFEFEF;
    border-radius: 8px;
    padding: 10px 15px;
}
.modal-purchase .coin-info .text{
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    width: 60px;
    color: #656565;
    font-size: 16px;
}
.modal-purchase .coin-info .coin{
    -ms-flex: 0 0 calc(100% - 60px);
    flex: 0 0 calc(100% - 60px);
    width: calc(100% - 60px);
    text-align: right;
    font-size: 16px;
    line-height: 24px;
}
.modal-purchase .coin-info .coin ul{
    margin-bottom: 0;
}
.modal-purchase .coin-info .coin ul > li > span{
    color: #656565 !important;
    vertical-align: middle;
}
.modal-purchase .coin-info .coin .icon{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.modal-purchase .coin-info .coin i{
    font-size: 24px;
    line-height: 24px;
    vertical-align: middle;
    color: #D6D6D6;
}

.modal-purchase .is-emply-coin .modal-header h3 span:nth-child(2),
.modal-purchase .is-emply-coin .story,
.modal-purchase .is-emply-coin .coin-info a,
.modal-purchase .is-emply-coin form .btn-equator{
    display: none;
}

.modal-purchase .is-coin .modal-header h3 span:nth-child(1),
.modal-purchase .is-coin .buycoin{
    display: none;
}

/*
  modal announce
*/
.modal-announce .content-zone{
  display: flex;
  justify-content: center;
	align-items: center;
}
.modal-announce .content-zone .col:nth-child(1){ width: 40%; }
.modal-announce .content-zone .col:nth-child(2){ width: 60%; padding-left: 10px; }

.modal-announce .content-in .title{
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 15px;
}
.modal-announce .content-in p{
  text-indent: 30px;
  margin: 0;
}
@media (max-width: 767px) {
  .modal-announce .modal-dialog{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .modal-announce .content-zone{ display: block;}
  .modal-announce .content-zone .col:nth-child(1){
    width: 250px;
    margin:15px auto;
  }
  .modal-announce .content-zone .col:nth-child(2){ width: 100%; padding-left: 0px; }
  .modal-announce .content-in .title{
    font-size: 18px;
    text-align: center;
  }

}

/*############################################################
  modal-pages
############################################################*/
.modal-pages .modal-pages-zone{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #9B9B9B;
	z-index: 10;
	display: flex;
}
.modal-pages .modal-pages-body{
	position: relative;
	width: 360px;
	height: auto;
	margin: auto;
  overflow: scroll;
}
.modal-pages .modal-pages-body .close{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 2px;
	right: 2px;
	background: #ffffff;
	color: #000000;
	opacity: 1;
	border-radius: 100%;
	line-height: 26px;
	padding: 0;
	z-index: 4;
}
.modal-pages .modal-pages-body .close .icon-svg{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: -2px;
}
.modal-pages .modal-pages-body .modal-pages-content{
	font-family: 'Noto Sans Thai', sans-serif;
	position: relative;
	width: 100%;
	height: auto;
	background: #ffffff;
	border-radius: 10px;
	padding: 30px 15px;
	z-index: 3;
}


.modal-pages .mobile-topbar{
  display: none;
  width: 100%;
  height: auto;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  z-index: 50;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.modal-pages .mobile-topbar .topbar{
  width: 100%;
  height: 59px;
  position: relative;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  font-size: 18px;
}
.modal-pages .mobile-topbar .topbar button{
  border: none;
  border-radius: 0;
  background: none;
  width: 40px;
}
.modal-pages .mobile-topbar .topbar button .icon-svg{
  width: 20px;
  height: 20px;
}
.modal-pages .mobile-topbar .topbar .title{
  width: calc(100% - 80px);
}

.modal-pages .mobile-footerbar{
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  overflow: hidden;
  display: none;
  justify-content: space-between;
  bottom: 0;
  z-index: 50;
  font-size: 12px;
}
.modal-pages .mobile-footerbar i{
  font-size: 18px;
}
.modal-pages .mobile-footerbar .footerbar-nav-left{
  padding: 10px 15px;
  text-align: center;
  color: #000000;
}
.modal-pages .mobile-footerbar .footerbar-nav-right{
  padding: 10px 15px;
  text-align: center;
  color: #000000;
}

/*
modal pages option
*/
.modal-pages-option .headline{
	text-align: center;
	color: #404040;
}
.modal-pages-option .headline h3{
	margin: 10px 0;
	font-weight: 600;
	line-height: 1.4;
	font-size: 28px;
}
.modal-pages-option .text-buynow{
	text-align: center;
	font-weight: 600;
}
.modal-pages-option .zone-btn{
	margin: auto;
	width: 230px;
}
.modal-pages-option .zone-btn > li{ margin-bottom: 15px; }
.modal-pages-option .zone-btn > li:last-child{ margin-bottom: 0; }

.modal-pages-option .zone-btn .btn-inside{
	display: flex;
	justify-content: center;
}
.modal-pages-option .zone-btn .btn-inside span:nth-child(1){ width: 30px; }
.modal-pages-option .zone-btn .btn-inside span:nth-child(1) img{ width: 100%;}
.modal-pages-option .zone-btn .btn-inside span:nth-child(2){ padding-left: 8px;}

.modal-pages-option .zone-btn .btn-inside-2{
	display: flex;
	justify-content: center;
}
.modal-pages-option .zone-btn .btn-inside-2 span:nth-child(1){ padding-right: 8px; }
.modal-pages-option .zone-btn .btn-inside-2 span:nth-child(2){ width: 30px; }
.modal-pages-option .zone-btn .btn-inside-2 span:nth-child(2) img{ width: 100%;}
.modal-pages-option .zone-btn .btn-inside-2 span:nth-child(3){ padding-left: 8px;}

.modal-pages-option .zone-btn .line-center span{
    margin:0;
	padding:0 10px;
    background:#fff;
    display:inline-block;
	color: #B5B5B5;
}
.modal-pages-option .zone-btn .line-center{
	text-align:center;
    position:relative;
    z-index:2;
}
.modal-pages-option .zone-btn .line-center:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 1px #D3D3D3;
    z-index:-1;
}

.modal-pages-option .balance{
	text-align: center;
	margin: 15px 0;
}
.modal-pages-option .balance .balance-text{
	font-size: 19px;
	font-weight: 500;
	color: #919191;
	margin-bottom: 5px;
}
.modal-pages-option .balance .balance-item{
	display: flex;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
}
.modal-pages-option .balance .balance-item .img{
	width: 26px;
	margin-right: 5px;
}
.modal-pages-option .balance .balance-item .img img{ width: 100%;}

/* cpm-body-s1 */
.modal-cross .modal-pages-body-s1{ width: 360px; }
.modal-cross .modal-pages-body-s1 .modal-content{
	min-height: 200px;
	box-shadow: none;
	z-index: 2;
}

.modal-cross .modal-pages-body-s1 .mascot,
.modal-pages .modal-pages-body-s1 .mascot{
	position: absolute;
	width: 116px;
	left: -104px;
	top: 0;
	z-index: 2;
}
.modal-pages .modal-pages-body-s1 .mascot img{ width: 100%;}
.modal-pages .modal-pages-body-s1 .modal-pages-content{
	min-height: 200px;
}

/* cpm-body-s2 */
.modal-cross .modal-pages-body-s2{ width: 360px; }
.modal-cross .modal-pages-body-s2 .modal-content{
	/*padding-bottom: 118px;*/
	box-shadow: none;
}
.modal-cross .modal-pages-body-s2 .mascot,
.modal-pages .modal-pages-body-s2 .mascot{
	position: relative;
	width: 300px;
	left: 0;
	right: 0;
	margin: 15px auto 0 auto;
	z-index: 5;
}

/* isapp */
.modal-pages .modal-pages-zone.isapp{
	display: block;
}
.modal-pages .modal-pages-zone.isapp .modal-pages-body{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #ffffff;
	padding-top: 60px;
}
.modal-pages .modal-pages-zone.isapp .modal-pages-body .modal-pages-content{
	background: none;
	border-radius: 0;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal-pages .modal-pages-zone.isapp .modal-pages-body .modal-pages-content::-webkit-scrollbar { 
  display: none;
}
.modal-pages .modal-pages-zone.isapp .modal-pages-body-s1 .mascot{ display: none;}
.modal-pages .modal-pages-zone.isapp .modal-pages-body-s2.modal-pages-content{
	padding-bottom: 30px;
}
.modal-pages .modal-pages-zone .modal-pages-body-s2 .headline h3{
	font-size: 28px;
}

@media (max-width: 680px){
  .modal-pages .mobile-topbar{ display: block; }
  .modal-pages .mobile-footerbar{ display: flex; }

  .modal-pages .modal-pages-zone{
		display: block;
	}
	.modal-pages .modal-pages-zone .modal-pages-body{
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
		padding-top: 60px;
	}
	.modal-pages .modal-pages-zone .modal-pages-body .modal-pages-content{
		background: none;
		border-radius: 0;
    max-height: calc(100% - 50px);
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
	}
  .modal-pages .modal-pages-zone .modal-pages-body .modal-pages-content::-webkit-scrollbar { 
    display: none;
  }

  .modal-pages .modal-pages-zone .modal-pages-body-s1 .mascot{ display: none;}
	.modal-pages .modal-pages-body .close{ display: none;}

	.modal-pages .modal-pages-zone .modal-pages-body-s2 .mascot{
		width: 100%;
		max-width: 300px;
	}
	.modal-pages .modal-pages-zone .modal-pages-body-s2 .mascot img{ width: 100%;}
	.modal-pages .modal-pages-zone .modal-pages-body-s2.modal-pages-content{
		padding-bottom: 30px;
	}

}


/*############################################################
  Share BTN
#############################################################*/
.soc-circle a{
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: #CCCCCC;
  color: #ffffff;
  border-radius: 100%;
  font-size: 12px;
}
.soc-circle a.fb{ background: #3B5B99;}
.soc-circle a.tw{ background: #1DA2F3;}
.soc-circle a.li{ background: #1DC330;}
.soc-circle a.mail{ background: #FD0D1B;}
.soc-circle a:hover{ background: #E5A56B; }

/*############################################################
  Social
#############################################################*/
.list-soc-all{
  margin: 0 0 15px 0;
}
.list-soc-al li{
  width: 30px;
  padding: 0;
  margin-right: 5px;
}
.list-soc-al li:last-child{ margin: 0;}
.list-soc-al li a{
  display: block;
  width: 100%;
}
.list-soc-al li a img{
  width: 100%;
}
.list-soc-al li a:hover img{
  -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}



/*############################################################
  search-bar
#############################################################*/
.search-bar .search-panel{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.search-bar .search-panel .search-panel-btn{
  width: 90px;
}
.search-bar .search-panel .search-panel-input{
  width: calc(50% - 90px);
  padding: 0 8px 0 0;
}
.search-bar .search-panel .search-panel-input ::placeholder{ color: #404040;}
.search-bar .search-panel .search-panel-select{
  width: 25%;
  padding: 0 8px 0 0;
}
.search-bar .search-panel .search-panel-select select{
  font-size: 16px !important;
}
.search-bar .search-panel .search-panel-select select:invalid{ color: #8c8c8c; }
.search-bar .search-panel .search-panel-select select option span{ color: #8c8c8c; }
.search-bar .search-panel .form-control{
  height: 46px;
  line-height: 46px;
  font-size: 16px;
}
.search-bar .search-panel .btn{
  width: 100%;
  height: 46px;
}
@media (max-width: 767px) {
  .search-bar .search-panel .search-panel-input{
    width: 100%;
    margin-bottom: 15px;
    padding: 0;
  }
  .search-bar .search-panel .search-panel-select{ width: 25%; }
  .search-bar .search-panel .search-panel-select{
    width: calc(50% - 45px);
    padding-left: 0;
  }
}
@media (max-width: 480px) {
  .search-bar .search-panel .search-panel-input{
    width: 100%;
    margin-bottom: 15px;
  }
  .search-bar .search-panel .search-panel-select{
    width: calc(50% - 45px);
    padding-left: 0;
  }
}


/*############################################################
  search-bar-2
#############################################################*/
.search-bar-2 .search-panel-input{
  width: 300px;
  padding: 0;
  position: relative;
}
.search-bar-2 .search-panel-input::after{
  content: "\f002";
  font: normal normal normal 14px / 1 FontAwesome;
  position: absolute;
  top: 25%;
  right: 20px;
}
.search-bar-2 .search-filter{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.search-bar-2 .search-filter > li{ padding: 0 5px 0 0;}
.search-bar-2 .form-control-select{
  max-width: 140px;
}

@media (max-width: 575px){
  .search-bar-2 .search-filter .dropdown .btn span{
    display: none;
  }
  .search-bar-2 .search-filter > li{
    width: 100%;
    margin: 5px 0;
    padding: 0;
  }
  .search-bar-2 .search-filter > li:nth-child(1){
    width: calc(100% - 38px);
    padding-right: 5px;
  }
  .search-bar-2 .search-filter > li:nth-child(2){ width: 38px;}
  .search-bar-2 .search-panel-input{ width: 100%;}
  .search-bar-2 .form-control-select{ max-width: 100%; }

}


/*############################################################
bar-with-right-control
############################################################*/
.bar-with-right-control{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bar-with-right-control .col-bar{
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  margin-bottom: 15px;
}
@media (max-width: 350px) {
  .bar-with-right-control .bar-btn .btn{ padding: 8px 10px; }
}

/*############################################################
bar-btn
############################################################*/
.bar-btn{ margin-bottom: 0;}
.bar-btn .btn{
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 8px 20px;
  text-align: center;
  color: #0F0D0D;
  outline: none;
}
.bar-btn .btn.active,
.bar-btn .btn:hover{
  border: none;
  color: #ffffff;
  background: #DBA874;
  border-radius: 26px;
  box-shadow: none;
}

/*
*/
.bar-btn .dropdown .btn{
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 8px 34px 8px 10px;
  text-align: center;
  color: #404040;
  outline: none;
}
.bar-btn .dropdown  .btn.active,
.bar-btn .dropdown  .btn:hover{
  border: none;
  color: #E5A56B;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.bar-btn .dropdown .btn span{
  position: relative;
  top: 0;
  left:0;
  overflow: hidden;
}
.bar-btn .dropdown .btn span:after{
  position: absolute;
  right: -20px;
  top: 0;
  font-family: 'FontAwesome';
  content: '\f107';
  font-size: 20px;
  line-height: 24px;
}
.bar-btn .dropdown .dropdown-menu-in{ min-width: 180px;}
.bar-btn .dropdown .dropdown-menu-in > ul > li{ margin-bottom: 15px;}
.bar-btn .dropdown .dropdown-menu-in > ul > li:last-child{ margin-bottom: 0;}
.bar-btn .dropdown .dropdown-menu-in label{
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 480px) {
  .bar-btn .dropdown .btn{
    padding: 8px 20px 8px 10px;
  }
}
@media (max-width: 409px){
  .bar-btn .dropdown .btn{
    font-size: 19px;
    padding: 8px 20px 8px 0px;
  }
}

/*############################################################
bar-category
############################################################*/
.bar-category .category{
  height: auto;
}
.bar-category .category .btn-dd{
  color: #000000;
  outline: none;
  box-shadow: none;
  font-size: 25px;
  font-weight: 600;
}
.bar-category .category .btn-dd span{
  position: relative;
  top: 0;
  left:0;
}
.bar-category .category .btn-dd span::after{
  position: absolute;
  right: -25px;
  top: 0;
  font-family: 'FontAwesome';
  content: '\f107';
  font-size: 25px;
  line-height: 40px;
}
.bar-category .category .btn-dd:hover,
.bar-category .category .btn-dd:active,
.bar-category .category.open .btn-dd
{
  color: #E5A56B;
}
.bar-category .category .dropdown-menu{
  width: 680px;
}
.bar-category .category .dropdown-menu .category-in{
  padding: 10px 20px;
}
.bar-category .category .dropdown-menu h4{
  font-size: 20px;
  font-weight: 600;
}
.bar-category .category .dropdown-menu ul{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
}
.bar-category .category .dropdown-menu ul li{
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  width: 33.333%;
  margin: 5px 0;
}
.bar-category .category .dropdown-menu ul li label{
  font-size: 16px;
  font-weight: 500;
}
.bar-category .category .btn-zone{
  text-align: center;
  margin-top: 15px;
}

.bar-category .category .btn-zone .categoryselecttogglebtn{
  width: 160px;
  text-align: center;
}
.bar-category .category .btn-zone .categoryselecttogglebtn::after{ content: 'เลือกทั้งหมด';}
.bar-category .category .btn-zone .categoryselecttogglebtn.categoryallChecked::after{ content: 'ล้างทั้งหมด';}

@media (max-width: 991px) {
  .bar-category.category .dropdown-menu{ left: -170px;}
}
@media (max-width: 767px) {
  
  .bar-category .category .dropdown{
    position: unset;
  }
  .bar-category .category .dropdown-menu{
    position: fixed;
    width: 100%;
    height: calc(100% - 68px);
    top: 68px;
    left: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    z-index: 12000;
  }
  .bar-category .category .category-in{
    padding-top: 0;
  }
  .bar-category .category .category-in .category-list{
    /*height: calc(100vh - 200px);*/
    position: absolute;
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: scroll;
  }
  .bar-category .category .category-in .category-list::-webkit-scrollbar {
    display: none;
  }
  .bar-category .category .dropdown-menu ul{
    display: block;
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
  }
  .bar-category .category .category-in .category-list li{
    width: 100%;
    margin: 0 0 15px 0;
  }
  .bar-category .category .category-in .btn-zone{
    position: absolute;
    left: 0;
    width: 100%;
    padding: 15px;
    bottom: 0;
  }
  .bar-category .category .category-in .btn-zone .btn{
    width: calc(50% - 4px);
    font-size: 16px;
    padding: 10px;
  }

}
@media (max-width: 575px) {
  .bar-category .category .dropdown-menu{
    height: calc(100% - 59px);
    top: 59px;
  }
  .bar-category .category .category-in .category-list{
    height: calc(100% - 120px);
  }
}
@media (max-width: 409px){
  .bar-category .category .dropdown-menu{
    height: calc(100% - 60px);
    top: 60px;
  }
  .bar-category .category .category-in .category-list{
    height: calc(100% - 120px);
  }
  .bar-category .category .btn-dd{ padding-left: 0;}
}

/*#################################
  stepper-wrapper
#################################*/
.stepper-wrapper {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.stepper-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
  
	@media (max-width: 768px) {
	  font-size: 12px;
	}
}
.stepper-item::before {
	position: absolute;
	content: "";
	border-bottom: 4px solid #F3F4F6;
	width: 100%;
	top: 10px;
	left: -50%;
	z-index: 2;
}
.stepper-item::after {
	position: absolute;
	content: "";
	border-bottom: 4px solid #F3F4F6;
	width: 100%;
	top: 10px;
	left: 50%;
	z-index: 2;
}
.stepper-item .step-counter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #ffffff;
	border: solid 4px #E5A56B;
	margin-bottom: 6px;
	color: #ffffff;
	font-size: 16px;
}
.stepper-item .step-counter i{ display: none;}
.stepper-item .step-name{
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	color: #B1B1B1;
}
.stepper-item.active .step-name{
	color: #E5A56B;
}

.stepper-item.completed .step-counter {
	background-color: #E5A56B;
}
.stepper-item.completed .step-counter i{ display: block;}
.stepper-item.completed::after {
	position: absolute;
	content: "";
	border-bottom: 4px solid #F3F4F6;
	width: 100%;
	top: 10px;
	left: 50%;
	z-index: 3;
}
.stepper-item:first-child::before {
	content: none;
}
.stepper-item:last-child::after {
	content: none;
}

/* sweetalert2 */
.swal2-actions .swal2-styled{
  outline: none;
  box-shadow: none;
  font-size: 18px;
	padding: 8px 20px;
}
.swal2-styled:focus{
  outline: none;
  box-shadow: none;
}
/*####################################################
  alert
####################################################*/
.alert{
  position: relative;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.alert .icon-svg{
  width: 28px;
  height: 28px;
  margin-right: 5px;
}
.alert .alert-btn-close{
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  right: 15px;
  top: 15px;
}
.alert .alert-btn-close .icon-svg{
  width: 20px;
  height: 20px;
  margin-right: 0;
}
.alert .alert-btn-close:hover .icon-svg svg{ fill: #ffffff;}
.alert .alert-content{
  width: calc(100% - 59px);
  padding: 0 10px;
}

/*
*/
.alert-notice{
  background: #FFF2F2;
  color: #404040;
  font-size: 18px;
  font-weight: 600;
}
.alert-notice .icon-svg svg{
  fill: #404040;
}
.alert-notice .alert-btn-close:hover .icon-svg svg{ fill: #E56B6B;}

@media (max-width: 575px){
  .alert .icon-svg{
    width: 22px;
    height: 22px;
    margin-right: 5px;
  }
  .alert .alert-btn-close .icon-svg{
    width: 16px;
    height: 16px;
  }
  .alert .alert-content{
    padding: 0 5px;
  }
}

/*#####################################
  itemcounter-circle
######################################*/
.itemcounter-circle{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 40px;
}
.itemcounter-circle div{
  background: #D02F2F;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  margin: 0 3px;
}

/*#####################################
  white-box-section
######################################*/
.white-box-section{}
.white-box-section .mobile{ display: none;}

.white-box-section .h3b{
  margin-bottom: 5px;
  margin-left: -30px;
  margin-right: -30px;

  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
}
.white-box-section .h3b > span:nth-child(1){
  position: relative;
  display: inline-block;
  padding: 10px 20px 5px 40px;
  border-radius: 40px 80px 0 0;
  margin-bottom: -5px;
}
.white-box-section .h3b > span:nth-child(1)::before{
  position: absolute;
  display: block;
  content: '';
}

.white-box-section .h3b.h3b-free > span:nth-child(1)::before{
  left: 5px;
  width: 30px;
  height: 30px;
  background: url('../images/icon/svg/free-star.svg') no-repeat;
  background-size: cover;
}

.white-box-section .h3b .btn{
  position: absolute;
  right: 0;
}

.white-box-section .list-zone{
  background: #ffffff;
  padding: 20px 30px 5px 30px;
  border-radius: 15px;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
  -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
}
.white-box-section .list-zone .slide-book-mod .book-scroll{ padding-bottom: 0;}
@media (max-width: 800px){
  .white-box-section .h3b{
    margin-left: 0;
    margin-right: 0;
  }
  .white-box-section .list-zone{
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 575px){
  .white-box-section .mobile{ display: block;}
  .white-box-section .h3b{ justify-content: space-between;}
  .white-box-section .h3b > span:nth-child(1){
    padding: 0 0 0 40px;
    background: none;
    min-width: 100px;
  }
  .campaign-section .h3b.h3b-free > span:nth-child(1)::before{
    left: 0;
  }
  .white-box-section .h3b .btn{ display: none; }
  .white-box-section .list-zone{
    background: none;
    padding: 15px 0 0 0;
    border-radius: 0;
    margin-bottom: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .white-box-section .list-zone .nav-scroller-nav {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .white-box-section .list-zone .nav-scroller-nav .nav-scroller-content{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    min-height: 44px;
  }
  .white-box-section .list-zone .slide-book-mod .book-scroll > li{
    /*flex: 0 0 calc(25% - 2px);*/
    flex:0 0 calc(33.333% - 2px);
  }

}
@media (max-width: 480px){
  .white-box-section .list-zone .slide-book-mod .book-scroll > li{
    /*flex: 0 0 calc(33.333% - 2px);*/
    flex: 0 0 calc(50% - 2px);
  }
}
@media (max-width: 325px){
  .white-box-section .list-zone .slide-book-mod .book-scroll > li{
    flex: 0 0 calc(50% - 2px);
  }
}

/*#####################################
  campaign-section
######################################*/
.campaign-section{}
.campaign-section .mobile{ display: none;}

.campaign-section .h3b{
  margin-bottom: 5px;
  margin-left: -30px;
  margin-right: -30px;

  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
}
.campaign-section .h3b > span:nth-child(1){
  position: relative;
  display: inline-block;
  /*background: #ffffff;*/
  padding: 10px 20px 5px 40px;
  border-radius: 40px 80px 0 0;
  /*min-width: 230px;*/
  margin-bottom: -5px;
}
.campaign-section .h3b > span:nth-child(1)::before{
  position: absolute;
  display: block;
  content: '';
  width: 19px;
  height: 36px;
  left: 15px;
  background: url('../images/icon/svg/thunder.svg') no-repeat;
  background-size: cover;
}

.campaign-section .h3b .btn{
  position: absolute;
  right: 0;
}

.campaign-section .list-zone{
  padding: 20px 30px 5px 30px;
  /*border-radius: 0 15px 15px 15px;*/
  border-radius: 15px;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 30px;

  /*
  background: #ffffff;
  -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
  -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.27);
  */
}
.campaign-section .list-zone .slide-book-mod .book-scroll{ padding-bottom: 0;}

@media (max-width: 800px){
  .campaign-section .h3b{
    margin-left: 0;
    margin-right: 0;
  }
  .campaign-section .list-zone{
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 575px){
  .campaign-section .mobile{ display: block;}
  .campaign-section .h3b{ justify-content: space-between;}
  .campaign-section .h3b > span:nth-child(1){
    padding: 0 0 0 30px;
    background: none;
    min-width: 100px;
  }
  .campaign-section .h3b > span:nth-child(1)::before{
    left: 0;
  }
  .campaign-section .h3b .btn{ display: none; }
  .campaign-section .list-zone{
    background: none;
    padding: 15px 0 0 0;
    border-radius: 0;
    margin-bottom: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .campaign-section .list-zone .nav-scroller-nav {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .campaign-section .list-zone .nav-scroller-nav .nav-scroller-content{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    min-height: 44px;
  }
  .campaign-section .list-zone .slide-book-mod .book-scroll > li{
    flex: 0 0 calc(25% - 2px);
  }

}
@media (max-width: 480px){
  .campaign-section .list-zone .slide-book-mod .book-scroll > li{
    flex: 0 0 calc(33.333% - 2px);
  }
}
@media (max-width: 325px){
  .campaign-section .list-zone .slide-book-mod .book-scroll > li{
    flex: 0 0 calc(50% - 2px);
  }
}


/*#####################################
  campaign-page-bar
######################################*/
.campaign-page-bar{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
}
.campaign-page-bar .title{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.campaign-page-bar .title h3{ margin: 0;}
@media (max-width: 991px) {
  .campaign-page-bar .col{
    flex: 0 0 50%;
  }
  .campaign-page-bar .search-bar-2 .search-filter > li:nth-child(1){
    width: 70%;
  }
  .campaign-page-bar .search-bar-2 .search-filter > li:nth-child(2){
    width: 30%;
  }
  .campaign-page-bar .search-bar-2 .search-panel-input{ width: 100%;}
  .campaign-page-bar .search-bar-2 .form-control-select {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .campaign-page-bar{
    gap: 10px;
  }
  .campaign-page-bar .col{
    flex: 0 0 100%;
  }
  .campaign-page-bar .title{ justify-content: space-between;}
}
@media (max-width: 575px) {
  .campaign-page-bar .search-bar-2 .search-filter > li:nth-child(1),
  .campaign-page-bar .search-bar-2 .search-filter > li:nth-child(2){
      width: 100%;
      padding-right: 0;
  }
}

/*#################################################################
  banner 2 size
#################################################################*/
.banner-desktop{
	width: 100%;
	height: auto;
}
.banner-mobile{
	display: none;
	width: 100%;
	height: auto;
}

.banner-desktop a,
.banner-mobile a{
  text-decoration: none;
  border: none;
  box-shadow: none;
}

.banner-desktop img,
.banner-mobile img{
	width: 100%;
	height: auto;
}
@media (max-width: 680px) {
	.banner-desktop{ display: none; }
	.banner-mobile{ display: block; }
}