@font-face {
    font-family: 'Misans';
    src: url('../fonts/MiSans-Normal.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MiSans-Normal.woff') format('woff'),
         url('../fonts/MiSans-Normal.ttf') format('truetype'),
         url('../fonts/MiSans-Normal.svg#supermaket') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MiSansThai';
    src: url('../fonts/MiSansThai.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MiSansThai.woff') format('woff'),
         url('../fonts/MiSansThai.ttf') format('truetype'),
         url('../fonts/MiSansThai.svg#supermaket') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  color: #333 !important;
  font-family: "Misans","MiSansThai" !important;
  font-size: 14px !important;
  background: #fff !important;
  background-image: url('../asset/Asset-3@2x.png') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

.hr-green {
  width: 100%;
  height: 2px;
  background: #a8c163;
}

.main-color {
  color: #a8c163 !important;
}

.blur-color {
  color: #c2c2c2 !important;
}

.title-size {
  font-size: 180%;
}

.title-lable {
  font-size: 120%;
  font-weight: bold;
  padding-left: 10px;
  line-height: 20px;
}

.title-style {
  display: inline-block;
  vertical-align:middle;
}


.btn-new-type-main {
  width: 90%;
  font-size: 120%;
  background: rgb(159,199,96);
  background: -moz-linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  background: linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9fc760",endColorstr="#78b14b",GradientType=1);
  border-color: #9fc760;
  color: #fff;
}

.btn-new-type-main:hover,.btn-new-type-main:active {
  background: rgb(159,199,96);
  background: -moz-linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  background: linear-gradient(90deg, rgba(159,199,96,1) 0%, rgba(120,177,75,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9fc760",endColorstr="#78b14b",GradientType=1);
  border-color: #9fc760;
  color: #fff;
}

.btn-new-type-back {
  width: 90%;
  font-size: 120%;
  color: #9fc760;
  border-color: #9fc760;
}

.btn-new-type-back:hover,.btn-new-type-back:active,.btn-new-type-back:focus {
  color: #9fc760;
  border-color: #9fc760;
}

.pack-null {
  width: 96%;
  margin: auto;
  line-height: 18px;
  height: 74px;
}

.pack-1-bg {
  width: 96%;
  margin: auto;
  background: #4c4c4c;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 110%;
  padding: 3px 0 0 0;
  line-height: 20px;
  height: 74px;
}

.pack-2-bg {
  width: 96%;
  margin: auto;
  background: #818181;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 110%;
  padding: 3px 0 0 0;
  line-height: 28px;
  height: 74px;
}

.pack-3-bg {
  width: 96%;
  margin: auto;
  background: #c3c3c3;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 110%;
  padding: 3px 0 0 0;
  line-height: 28px;
  height: 74px;
}

.line-head-font {
  font-size: 130%;
  font-weight: bold;
  line-height: 30px;
}
.line-head-font2 {
  font-size: 130%;
  font-weight: bold;
  line-height: 20px;
}
.line-border {
  border-bottom: 2px solid #f6f6f6;
}
.line-border-x {
  border-bottom: 2px solid #f6f6f6;
}

.nopadding {
  padding: 0;
}

.line-1 {
  width: 98%;
  height: 30px;
}

.line-1-x {
  width: 98%;
  height: 55px;
  padding-top: 5px;
}

.line-1-1 {
  width: 96%;
  height: 30px;
}

.line-1-1-x {
  width: 96%;
  height: 55px;
}

.bg-line-1 {
  background: #f1f1f1;
}

.line-2 {
  width: 98%;
  height: 52px;
  padding-top: 5px;
}

.line-2-1 {
  width: 96%;
  height: 52px;
  font-size: 140%;
  line-height: 52px;
}

.line-2-1-x {
  width: 96%;
  height: 36px;
  font-size: 100%;
  line-height: 36px;
}

.bg-line-2 {
  background: #e8e8e8;
}

.line-3 {
  width: 98%;
  height: 36px;
  line-height: 36px;
}

.line-3-1 {
  width: 96%;
  height: 36px;
  font-size: 70%;
  padding: 4px;
  line-height: 14px;
}

.line-4-1 {
  width: 96%;
  height: 36px;
  font-size: 140%;
  line-height: 36px;
}

.line-end {
  border-radius: 0 0 10px 10px;
}

.small-font {
  font-size: 66%;
}

.big-font {
  font-size: 160%;
}

.pt5 {
  padding-top: 0px;
  margin-top: 0px;
}

.active-color-head {
  color: #fff !important;
  background: rgb(120,177,74) !important;
  background: -moz-linear-gradient(180deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  background: -webkit-linear-gradient(180deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  background: linear-gradient(180deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#78b14a",endColorstr="#99c45d",GradientType=1) !important;
}

.active-color-blank {
  color: #fff !important;
  background: rgb(120,177,74) !important;
  background: -moz-linear-gradient(0deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  background: -webkit-linear-gradient(0deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  background: linear-gradient(0deg, rgba(120,177,74,1) 0%, rgba(153,196,93,1) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#78b14a",endColorstr="#99c45d",GradientType=1) !important;
}

.active-color-line1 {
  background: #a0c861 !important;
  color: #fff !important;
}

.active-color-line2 {
  background: #8ab854 !important;
  color: #fff !important;
}

.pc-1 {
  accent-color: rgb(110, 178, 60);
}

.pc-2 {
  accent-color: rgb(110, 178, 60);
}

.pc-3 {
  accent-color: rgb(110, 178, 60);
}


.titleheadsize {
  font-size: 160%;
}

.titlediv {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.titlediv:before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  border-top: 1px solid #a8c163;
  background: #a8c163;
  width: 12%;
  transform: translateY(-50%);
}

.titlediv2 {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.titlediv2:before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  border-top: 1px solid #a8c163;
  background: #a8c163;
  width: 45%;
  transform: translateY(-50%);
}

.titlediv3 {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.titlediv3:before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  border-top: 1px solid #a8c163;
  background: #a8c163;
  width: 52%;
  transform: translateY(-50%);
}

.titlediv4 {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.titlediv4:before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  border-top: 1px solid #a8c163;
  background: #a8c163;
  width: 20%;
  transform: translateY(-50%);
}

.titlediv5 {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.titlediv5:before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  border-top: 1px solid #a8c163;
  background: #a8c163;
  width: 33%;
  transform: translateY(-50%);
}


.titledivinner {
  position: relative;
}

.lable-radio {
  color: #999;
  font-size: 110%;
  font-weight: normal;
}
.lable-radio2 {
  color: #999;
  font-weight: normal;
}

.radio-space {
  padding-top: 5px;
}

.radio-space-b {
  padding-bottom: 5px;
}


::placeholder {
  opacity: 0.4;
}

::-ms-input-placeholder {
  opacity: 0.4;
}

.textcustom {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: transparent;
  font-size: 120%;
  padding: 8px 20px 3px 30px;
  color: #70b33d;
  outline: none;
  margin-top: 3px;
}

.textcustom:focus {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid #70b33d;
  outline: none;
}

.textcustompost {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: transparent;
  font-size: 120%;
  padding: 4px 20px 3px 33px;
  color: #70b33d;
  outline: none;
  margin-top: 3px;
}

.textcustompost:focus {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid #70b33d;
  outline: none;
}

.textcustomdate {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border: 1px solid #70b33d;
  background-color: transparent;
  font-size: 120%;
  padding: 5px 0 6px 30px;
  color: #70b33d;
  outline: none;
  margin: auto;
  margin-top: 3px;
  text-align: center;
}

.textcustomdate:focus {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border: 2px solid #70b33d;
  outline: none;
  text-align: center;
}

.textareacustom {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border: 1px solid #e5e5e5;
  background-color: transparent;
  font-size: 120%;
  padding: 8px 20px 3px 30px;
  color: #70b33d;
  outline: none;
  margin-top: 3px;
}

.textareacustom:focus {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border: 2px solid #70b33d;
  outline: none;
}

.text-name {
  background-color: transparent;
  background-image: url('../asset/Asset-39@2x.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 12px;
}

.text-mobile {
  background-color: transparent;
  background-image: url('../asset/Asset-53@2x.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 12px;
}

.text-address {
  background-color: transparent;
  background-image: url('../asset/Asset-37@2x.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 12px;
}

.textarea-address {
  background-color: transparent;
  background-image: url('../asset/Asset-37@2x.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 12px;
}

.text-post {
  background-color: transparent;
  background-image: url('../asset/Asset-38@2x.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 14px;
}

.text-date {
  background-color: transparent;
  background-image: url('../asset/Asset-29@2x.png');
  background-position: 10px 7px;
  background-repeat: no-repeat;
  background-size: 20px;
}

.dateblog {
  width: 70%;
  margin: auto;
  overflow: hidden;
}



.dropdowncustom {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: transparent;
  font-size: 120%;
  padding: 8px 20px 3px 30px;
  color: #70b33d;
  outline: none;
  margin-top: 3px;
}

.dropdowncustom:focus {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid #70b33d;
  outline: none;
}

.value-range {
  padding-top: 5px;
  font-weight: bold;
}


input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #dbdbdc;
  margin-top: 8px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 20px;
  width: 20px;
  background-color: #f9f9f9;
  border-radius: 50%;
  border: 1px solid #33;
  transition: .2s ease-in-out;
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}


input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background-color: #f9f9f9;
  border-radius: 50%;
  border: 1px solid #33;
  transition: .2s ease-in-out;
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}
input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(151,195,92, .5);
}

.bg-sum-price {
  background: rgb(160,200,97);
  background: -moz-linear-gradient(90deg, rgba(160,200,97,1) 0%, rgba(122,177,76,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(160,200,97,1) 0%, rgba(122,177,76,1) 100%);
  background: linear-gradient(90deg, rgba(160,200,97,1) 0%, rgba(122,177,76,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a0c861",endColorstr="#7ab14c",GradientType=1);
  width: 100%;
  padding: 15px;
  overflow: hidden;
  color: #fff;
  border-radius: 10px;
}

.price-text {
  line-height: 20px;
}

.price-text-size {
  font-size: 180%;
}

.price-text-size2 {
  font-size: 160%;
}

.price-size {
  font-size: 200%;
  font-weight: bold;
  line-height: 46px;
  letter-spacing: 2px;
}

.promo-div {
  width: 100%;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid #ccc;
}

.best-seller {
  position: absolute;
  left: -3px;
  top: -3px;

}