html { scroll-behavior: smooth; }
body{
	background-image: url('main-bg.png');background-repeat: repeat-y;background-size: auto;background-position: center;
	font-family: Athiti;font-size: 18px;color: #000;
}
.navbar{width: 50% !important; float: right;background: #FFF !important;}
.navbar a{color: #000;font-weight: bold;}
.navbar a:hover{color: #FC5B31 !important;}
#logo-content{float: right; width: 35%;}
h1{clear: both;text-align: right;color: #006633;font-weight: bold;}
h2{margin-top: 20px;font-weight: bold;}
h6{font-weight: bold;font-size: 1.1em;color: #000099;}
p{text-align: right;}
blockquote {
  background: #FE6432;
  border-left: 10px solid #F6422E;
  margin: 0.8em 10px;
  padding: 0.5em 10px;color: #FFF;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #FFF;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
.img-show-left{margin: 5px;width: 100%; /* or max-width: 100%; */
  height: auto;}
#show-price{width: 70%;
background: linear-gradient(180deg, rgba(77,171,233,1) 0%, rgba(255,255,255,1) 100%);color: #FFF;
font-size: 2em; text-align:center;margin:auto;font-weight: bold;height: 140px;
border-radius: 20px;padding: 20px 0 10px 0;line-height: 25px;}
#show-price span{font-size: 0.5em;font-weight: normal;color: #000;}
#use img{float: left; width: 24%;margin: 10px;border-radius: 5px;}
#footer{height: 45px; padding-top: 10px;text-align:center;background-color: #FC5B31;color: #FFF;}
.font-green{color: #006633;}
#show-prdThum ul{list-style: none;margin: 0;padding:0;}
#show-prdThum  li{float: left;width: 22%;margin: 2px 1px;border: solid 1px #CCC;padding: 4px;}
#show-prdThum  li img{border-radius: 2px; object-fit: cover;
    object-position: center center;margin:auto;
    width: 80px;
    height: 80px;}
	#top-link{display: block; position: fixed; bottom: 20px; right: 200px;background-color: #FC5B31;width: 50px; z-index: 19;
	text-align:center;opacity: 0.8;
	height: 50px; border-radius: 50px; padding-top: 10px;}
	#top-link a{color: #FFF !important; }
.modal-header{background-color: #FC5B31;color: #FFF;}
#btn-order{font-size: 0.5em !important; background-color: #FC5B31; color: #FFF;border: solid 1px #FFF;padding: 4px 20px;border-radius: 5px;}
#show-prdThum img{cursor: pointer;}
#for-mobile{display: none;}
.navbar-toggler{color: #FFF !important;border-color: #0099ff  !important;line-height: 11px;font-size: 1em;margin-top: 10px;}
.navbar-light{background-color: #FFF;}
.navbar-toggler-icon {
            background-image: url(
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 99, 250, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
        }
#list-desc ul{margin: 10px;padding: 5px;}
#show-bank{border: solid 1px #CCC; border-radius: 5px;width: 50%;padding: 10px;}
#show-bank img{width: 32px;margin-right: 10px;}
#thk-order{padding: 10px; background-color: #99ffff;border-radius: 10px;width: 100%;}
#btn-close{display: none;}
#free-delivery{position: absolute; top: 0px;}
#alert-form{color: #FFF;background-color: #C00;padding-left: 10px;}
#show-line{font-size: 0.7em;text-align:center;}
#show-line img{width: 40%;font-size: 0.8em;}
@media only screen and (max-width: 800px){
	.navbar{width: 100% !important; float: right;background: #FFF !important;margin-bottom: 30px;}
	.navbar-nav{width: 90%;float: left;}
	.navbar li{border-bottom: solid 1px #09E;padding-left: 10px;}
	.navbar img{position: fixed; top: 5px;right: 8px;z-index: 20;}
	#top-link{right: 5px;}
	#for-mobile{display: block; position: fixed; bottom: 1px; width: 100%; height: 40px; padding-top: 5px;text-align:center;
		background-color: #FC5B31;opacity: 0.9;z-index: 1;
	}
	#for-mobile button{border: solid 1px #FFF;width: 35%;color: #FFF;}
	#show-bank{width: 100%;font-size: 0.8em;}
}