html, body { border:0; margin:0; }

/* root color */
:root {
  --main: #f9eee5;
  --nav: #f9eee5;
  --white: #ffffff;
  --black: #3c1619;
  --bg: #3c1619;
}

body {
  font-family: "sukhumvit_set", sans-serif !important;
  font-size: 16px; 
  font-weight: 300 !important;
  background-color: var(--main) !important;
}

a { cursor: pointer; }
a:link, a:visited 	{ color: #1b204a; text-decoration: none;  }
a:hover, a:active	{ color: #f5b4ae !important; }

/* span{
  color: #ffed8a;
} */

/* โค้ดเวอร์ชันย่อ */
h1, h2, h3, h4, h5, h6 {
  color: #1b204a;
  font-weight: 600 !important;
  padding: .75em 0 !important; /* ไม่ต้องใส่ "px" ต่อท้ายเลข 0 ก็ได้ */
}

h1 { 
  font-size: 2.25rem !important; /* 36px */
  line-height: 2.5rem !important; /* 40px */
}
h2 { 
  font-size: 1.875rem !important; /* 30px */
  line-height: 2.25rem !important; /* 36px */
 }
h3 { 
  font-size: 1.5rem !important; /* 24px */
  line-height: 2rem !important; /* 32px */
}
h4 {
  font-size: 1.125rem !important; /* 20px */
  line-height: 1.75rem !important; /* 28px */
}
h5, h6 { 
  font-size: 1 !important; /* 18px */
  line-height: 1.25rem !important; /* 28px */
}

#navbar_top_main {
  z-index: 999 !important;
}

.input_search {
  padding: .5em 1em !important;
  border: 0px !important;
  background-color: #e0effa !important;
  border-radius: 16px;
  font-weight: 300;
}

@keyframes shimmer {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: .1;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

.shadow {
  -webkit-box-shadow: 1px 1px 2px 5px rgba(120,120,120,.3) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 2px 5px rgba(120,120,120,.3) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 2px 5px rgba(120,120,120,.3) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.shadow_top {
  -webkit-box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.text_curentcy {
  color: #f5b4ae !important;
  font-weight: 900;
  font-size: 1.2em;
}

.text_title_blue {
  color: #1b204a !important;
  font-weight: 800;
  font-size: 2.875rem;
  line-height: 2.25rem;
  padding: .75em 0px;
}

/* menu main */
.menu, .drop-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* font-family: "Prompt", sans-serif; */
  font-weight: 300;
}

.menu .menu-item {
  /* display: inline-block; */
  color: #333;
  background-color: #FFF;
  position: relative;
  /* border: 1px solid rgba(90,90,90,.1); */
  z-index: 11;
}
.menu .menu-item:hover {
  color:#FFF;
  /* background: rgb(212,206,184); */
  /* background: linear-gradient(90deg, rgba(212,206,184,1) 0%, rgba(189,174,148,1) 65%, rgba(178,164,135,1) 100%); */
}
.nav-link {
  color:#333 !important;
}
.menu .menu-item:hover .m_main{
  color:#333 !important;
}

.menu .menu-item a {
  text-decoration: none;
  padding: 6px 10px 5px 10px;
  /* padding: .5em 1em .3em 1em; */
  color: #333;
  display: block;
  text-align: center;
}

.menu .drop-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  z-index: 11;
}

.menu .drop-menu-item {
  width: 100%;
  font-size: .9em !important;
}

.menu .drop-menu-item:hover a{
  color: #FFF !important;
  background-color: #01bab5;
  text-align: left !important;
}

.menu .drop-menu-item a {
  color: #333 !important;
  text-align: left !important;
  padding: 7px 10px 5px 10px;
  /* padding: .5em 1em .3em 1em; */
}

.menu .menu-item:hover .drop-menu {
  display: block;
}

/* menu fixed */
.sub_menu, .drop-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sub_menu .menu-item {
  /* display: inline-block; */
  color: #FFF;
  /* background-color: #FFF; */
  position: relative;
  /* border: 1px solid rgba(90,90,90,.1); */
  z-index: 10;
}
.sub_menu .menu-item:hover {
  color:#FFF;
  /* background: rgb(212,206,184); */
  /* background: linear-gradient(90deg, rgba(212,206,184,1) 0%, rgba(189,174,148,1) 65%, rgba(178,164,135,1) 100%); */
}

.sub_menu .menu-item:hover .m_main{
  color:#FFF !important;
}

.sub_menu .menu-item a {
  text-decoration: none;
  padding: 12px 10px 10px 10px;
  /* height: 60px; */
  color: #FFF;
  display: block;
  text-align: center;
}

.sub_menu .drop-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  z-index: 9;
}

.sub_menu .drop-menu-item {
  width: 100%;
}

.sub_menu .drop-menu-item:hover a{
  color: #FFF !important;
  background-color: #01bab5;
  text-align: left !important;
}

.sub_menu .drop-menu-item a {
  color: #01bab5 !important;
  text-align: left !important;
}

.sub_menu .menu-item:hover .drop-menu {
  display: block;
}

.menu .chevron{
  width: 12px;
  margin-left: .25em;
  margin-top: -1px;
  transition: transform 0.3s;
  transform-origin: center;
}
.menu .menu-item:hover .chevron{
  transform: rotate(90deg);
}
.menu .chevron::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 10px;
  line-height: 10px;
  color: #01bab5;
  cursor: pointer;
}
.menu .menu-item:hover .chevron::before {
  color: #01bab5;
}

.sub_menu .chevron{
  width: 20px;
  margin-left: .25rem;
  padding-top: .25rem;
  transition: transform 0.3s;
  transform-origin: center;
}
.sub_menu .menu-item:hover .chevron{
  transform: rotate(90deg);
}
.sub_menu .chevron::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 12px;
  line-height: 12px;
  color: #FFF;
  cursor: pointer;
}
.sub_menu .menu-item:hover .chevron::before {
  color: #fff;
}


.chevron-more{
  width: 20px;
  margin-left: .25em;
  padding-top: .5em;
  transition: transform 0.3s;
  transform-origin: center;
}
.chevron-more::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: .6em;
  line-height: normal;
  color: #B6BDC7;
  cursor: pointer;
}

.chevron-news-more{
  width: auto;
  margin-left: .25rem;
  transition: transform 0.3s;
  transform-origin: center;
  margin:.425rem;
}
.chevron-news-more::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 8px;
  line-height: 6px;
  color: #B6BDC7;
  cursor: pointer;
}
.chevron-nav {
  width: 20px;
  margin-left: .5em;
  /* margin-top: -.1em; */
  transition: transform 0.3s;
  transform-origin: center;
}
.chevron-nav::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 1em;
  line-height: normal;
  color: #FFF;
  cursor: pointer;
}

#footer {
  font-size: 1em;
  font-weight: 300;
  color: #FFF;
  background-color:var(--main);
}

.footer_menu{
  font-size:1em;
  color:#FFF;
  text-align: left !important;
}
.footer_sub_menu{
  font-size:.75em;
  opacity: .8;
  height: auto;
  color:#FFF;
  text-align: left !important;
}
.footer_sub_menu a {
  margin: .25em 0px;
  text-align: left !important;
}

.submenu {
  left: 100%;
}



  h3 {
    font-size: 1.5em !important;
  }

  .item-1 {
    width: 50%;
  }
  
  .banner {
    height: 100vh;
    margin-top:0px;
  }

  .privacy_box {
    font-size: .8em;
  }

  .store_topic{
    font-size: 1.4em;
    height:80px;
  }
  .store_desc {
    font-size: 1em;
    height:80px;
  }
  .product_box {
    height:120px;
  }

  .product_topic {
    font-size: 1em;
    line-height: 1em;
  }
  .product_desc {
    font-size: .8em;
  }
  .product_price {
    font-size: 1em;
    line-height: 1em;
  }

}

@media only screen and (max-width: 540px) {

  h3 {
    font-size: 1.5em !important;
  }

  .item-1 {
    width: 50%;
  }
  
  .banner {
    height: 100vh;
    margin-top:0px;
  }

  .privacy_box {
    font-size: .8em;
  }

}

@media only screen and (max-width: 480px) {

  h3 {
    font-size: 1.5em !important;
  }

  .item-1 {
    width: 50%;
  }
  
  .banner {
    height: 100vh;
    margin-top:0px;
  }

  .privacy_box {
    font-size: .8em;
  }

}

@media only screen and (max-width: 360px) {

  h3 {
    font-size: 1.5em !important;
  }

  .item-1 {
    width: 50%;
  }
  
  .banner {
    height: 100vh;
    margin-top:0px;
  }

  .privacy_box {
    font-size: .8em;
  }

} */