/*
Child Main css
*/

html,
body {
  scroll-behavior: auto !important;
}

body  {
  font-family: "Noto Sans Thai", sans-serif;
}

body{ 
  --primary-font-color: #2C304A;
  --primary-blue: #2C304A;
  --primary-black: #000000;
  --primary-white: #FFFFFF;
  --primary-grey: #F3F7F7;
  --primary-red: #FF2400;
  --primary-yellow: #EEE71B;
  --primary-orange: #EC730B;
  --primary-gold: #A8A30D;
  --font-body: "Noto Sans Thai", sans-serif;
  --font-title: "Taviraj", sans-serif;
  --font-sub-title: "Taviraj", sans-serif;
  --section-padding-v160: 160px 0;
  --section-padding-v120: 120px 0;
  --section-padding-v100: 100px 0; 
  --section-padding-v80: 80px 0; 
  --section-padding-v60: 60px 0; 
  --section-padding-v40: 40px 0; 
  --font-size-default-120: 120px;
  --font-size-default-100: 100px;
  --font-size-default-80: 80px;
  --font-size-default-70: 70px;
  --font-size-default-60: 60px;
  --font-size-default-50: 50px;
  --font-size-default-46: 46px;
  --font-size-default-40: 40px;
  --font-size-default-34: 34px;
  --font-size-default-32: 32px;
  --font-size-default-30: 30px;
  --font-size-default-26: 26px;
  --font-size-default-24: 24px;
  --font-size-default-22: 22px;
  --font-size-default-20: 20px;
  --font-size-default-18: 18px;
  --font-size-default-16: 16px;
  --font-size-default-14: 14px;
  --control-padding: 8.33vw;
  --site-main-content: 1200px;
  --content-max-width: 800px;
  --topNavHeight: 100px;
}

ol, ul {
  margin: 0 0 1.5em 1.2em;
}

@media (max-width: 1600px) {
  body{
    --font-size-default-120: 100px;
    --font-size-default-100: 82px;
    --font-size-default-80: 66px;
    --font-size-default-70: 58px;
    --font-size-default-60: 48px;
    --font-size-default-50: 40px;
    --font-size-default-46: 38px;
    --font-size-default-40: 34px;
    --font-size-default-34: 29px;
    --font-size-default-32: 27px;
    --font-size-default-30: 26px;
    --font-size-default-26: 24px;
    --font-size-default-24: 22px;
    --font-size-default-22: 21px;
    --font-size-default-20: 20px;
    --font-size-default-18: 18px;
    --font-size-default-16: 16px;
    --font-size-default-14: 14px;
    --control-padding: 4.16vw;
  }
}
@media (max-width: 1366px) {
  body{
    --section-padding-v160: 140px 0;
    --section-padding-v120: 100px 0; 
    --section-padding-v100: 80px 0; 
    --section-padding-v80: 60px 0; 
    --section-padding-v60: 40px 0;
    --section-padding-v40: 30px 0;
    --font-size-default-120: 85px;
    --font-size-default-100: 71px;
    --font-size-default-80: 56px;
    --font-size-default-70: 50px;
    --font-size-default-60: 42px;
    --font-size-default-50: 38px;
    --font-size-default-46: 35px;
    --font-size-default-40: 32px;
    --font-size-default-34: 27px;
    --font-size-default-32: 25px;
    --font-size-default-30: 24px;
    --font-size-default-26: 22px;
    --font-size-default-24: 21px;
    --font-size-default-22: 20px;
    --font-size-default-20: 19px;
    --font-size-default-18: 18px;
    --font-size-default-16: 16px;
    --font-size-default-14: 14px;
    --control-padding: 4.16vw;
  }
}
@media (max-width: 1024px) {
  body{
    --section-padding-v160: 120px 0;
    --section-padding-v120: 100px 0; 
    --section-padding-v100: 80px 0; 
    --section-padding-v80: 60px 0; 
    --section-padding-v60: 40px 0;
    --section-padding-v40: 30px 0; 
    --font-size-default-120: 64px;
    --font-size-default-100: 54px;
    --font-size-default-80: 43px;
    --font-size-default-70: 38px;
    --font-size-default-60: 32px;
    --font-size-default-50: 30px;
    --font-size-default-46: 28px;
    --font-size-default-40: 26px;
    --font-size-default-34: 24px;
    --font-size-default-32: 22px;
    --font-size-default-30: 22px;
    --font-size-default-26: 20px;
    --font-size-default-24: 18px;
    --font-size-default-22: 18px;
    --font-size-default-20: 17px;
    --font-size-default-18: 16px;
    --font-size-default-16: 15px;
    --font-size-default-14: 13px;
    --topNavHeight: 70px;
  }
}
@media (max-width: 820px) {
  body{
    --section-padding-v160: 100px 0;
    --section-padding-v120: 80px 0; 
    --section-padding-v100: 70px 0; 
    --section-padding-v80: 60px 0;
    --section-padding-v60: 30px 0;
    --section-padding-v40: 20px 0; 
    --font-size-default-120: 48px;
    --font-size-default-100: 44px;
    --font-size-default-80: 40px;
    --font-size-default-70: 30px;
    --font-size-default-60: 28px;
    --font-size-default-50: 25px;
    --font-size-default-46: 24px;
    --font-size-default-40: 23px;
    --font-size-default-34: 21px;
    --font-size-default-32: 20px;
    --font-size-default-30: 20px;
    --font-size-default-26: 18px;
    --font-size-default-24: 18px;
    --font-size-default-22: 18px;
    --font-size-default-20: 17px;
    --font-size-default-18: 16px;
    --font-size-default-16: 14px;
    --font-size-default-14: 13px;
    --control-padding: 20px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  body{
    --section-padding-v160: 70px 0;
    --section-padding-v120: 60px 0; 
    --section-padding-v100: 50px 0; 
    --section-padding-v80: 40px 0;
    --section-padding-v60: 30px 0;
    --section-padding-v40: 20px 0; 
    --font-size-default-120: 30px;
    --font-size-default-100: 28px;
    --font-size-default-80: 26px;
    --font-size-default-70: 24px;
    --font-size-default-60: 30px;
    --font-size-default-50: 22px;
    --font-size-default-46: 22px;
    --font-size-default-40: 21px;
    --font-size-default-34: 20px;
    --font-size-default-32: 19px;
    --font-size-default-30: 19px;
    --font-size-default-26: 18px;
    --font-size-default-24: 18px;
    --font-size-default-22: 18px;
    --font-size-default-20: 16px;
    --font-size-default-18: 16px;
    --font-size-default-16: 14px;
    --font-size-default-14: 13px;
    --control-padding: 15px;
    --topNavHeight: 60px;
  }
}

/*** THEME ***/
.grecaptcha-badge { 
  visibility: hidden;
}

.nowrap {
  white-space: nowrap;
}
.showOnScroll {
  /*transform: translateY(100px);*/
  opacity: 0;
  transition: all 1s ease-in-out;
  /*transform: translateY(0);
  opacity: 1;*/
}
.showOnScroll.in {
  transform: translateY(0);
  opacity: 1;
}
.showDelay1ms {
  transition-delay: .1s !important;
}
.showDelay2ms {
  transition-delay: .2s !important;
}
.showDelay3ms {
  transition-delay: .3s !important;
}
.showDelay4ms {
  transition-delay: .4s !important;
}
.showDelay5ms {
  transition-delay: .5s !important;
}
.showDelay6ms {
  transition-delay: .6s !important;
}
.showDelay8ms {
  transition-delay: .8s !important;
}
.showDelay1s {
  transition-delay: 1s !important
}
.showDelay12ms {
  transition-delay: 1.2s !important;
}

.slideDownOnScroll {
  position: relative;
  overflow: hidden;
}
.slideDownOnScroll::after {
  background-color: var(--primary-white);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
  /*transition: all 1.2s;
  transition-timing-function: cubic-bezier(0.5, 0.1, 0.1, 0.25);
  transition-delay: .2s;*/
  transition: all 1s;
  transition-timing-function: cubic-bezier(0.5, 0.1, 0.1, 0.25);
}
.slideDownOnScroll.in::after {
  top: 100%;
}
.slideDownOnScroll.bgGrey:after {
  background-color: var(--primary-grey);
}
.slideDownOnScroll.bgWhite:after {
  background-color: var(--primary-white);
}

.showImgOnScroll {
  overflow: hidden;
}
.showImgOnScroll > img {
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center center;
  transition: all 1s ease-in-out;
}
.showImgOnScroll.in > img {
  opacity: 1;
  transform: scale(1.0);
}

.txtBlack {
  color: var(--primary-black) !important;
}
.txtRed {
  color: #DF0000 !important;
}

.themeBorderGraident {
  position: relative;
  /*border-radius: 12px;*/
}
.themeBorderGraident::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; 
  background: linear-gradient(0deg, #1758ac, #48dce1);
  
  /* Masks out the center of the pseudo-element */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* Allows clicks to pass through to the element */
  z-index: 10;
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 820px) {
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
}
@media (max-width: 425px) {
}

/*** CSS OVERRIDE ***/
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6 {
  color: inherit !important;
  margin-bottom: 0.5em;
}

/* hide scroll to top btn */
#ast-scroll-top {
  display: none !important;
}

button, 
.ast-button, 
.button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"], 
a:where(.wp-block-button__link) {
  box-shadow: none !important;
}

/*.elementor-kit-6 a {
  font-weight: inherit !important;
}*/
.elementskit-menu-overlay {
  background-color: rgba(51, 51, 51, .3) !important;
}

.topNavSearchIcon a {
  transform: translateY(2px);
}

.contactFormItem.wpcf7-text  {
  border: 1px solid rgba(44, 48, 74, .3);
  border-radius: 0;
}
.contactFormItem.wpcf7-select {
  border: 1px solid rgba(44, 48, 74, .3);
  border-radius: 0;
}
.contactFormItem.wpcf7-textarea  {
  border: 1px solid rgba(44, 48, 74, .3);
  border-radius: 0;
  height: 100px;
}


/*** FLOATING CHAT ***/
.floatingChatContainer {
  position: fixed;
  right: 20px;
  bottom: 50px;
}
.floatingChatContainer.hideFloatingChat {
  display: none;
}
.floatingChatContainerInner {
  position: relative;
}
.floatingChatMain {
  position: relative;
  width: 52px;
  height: 52px;
  cursor: pointer;
  background-color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 20;
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,.2));
  transition: transform .2s ease-in-out;
  transform-origin: center center;
}
.floatingChatMain:hover {
  transform: scale(1.05);
}
.floatingChatMessageIcon {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform .2s ease-in-out;
  z-index: 15;
}
.floatingChatCloseIcon {
  position: absolute;
  width: 35%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform .2s ease-in-out;
  z-index: 10;
}

.floatingChatList {
  position: absolute;
  visibility: hidden;
  width: auto;
  height: 100%;
  top: 0;
  right: 52px;
  display: flex;
  opacity: 0;
  transition: all .2s ease-in-out;
  z-index: 5;
  transform: translateX(6px);
}
.floatingChatList > div {
  margin-right: 8px;
  width: 52px;
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,.2));
  transition: transform .2s ease-in-out;
  transform-origin: center center;
  background-color: #ffffff;
  border-radius: 50%;
}
.floatingChatList > div:hover {
  transform: scale(1.05);
}

.floatingChatContainer.actived .floatingChatMessageIcon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}
.floatingChatContainer.actived .floatingChatCloseIcon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(180deg);
}
.floatingChatContainer.actived .floatingChatList {
  visibility: visible;
  opacity: 1;
  width: auto;
  transform: translateX(0);
}

.floatingChatText {
  position: absolute;
  width: auto;
  height: 100%;
  top: 0;
  right: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 1;
  transition: all .2s ease-in-out;
  z-index: 5;
  font-family: var(--font-sub-title);
  font-size: 14px;
  color: var(--primary-black);
  padding-right: 8px;
  text-align: right;
  white-space: nowrap;
}
.floatingChatText > div {
  padding: 8px;
  border-radius: 8px;
  background-color: #ffffff;
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,.1));
}
.floatingChatText.hideChatTxt {
  display: none;
}

.floatingChatMainClose {
  position: absolute;
  width: 7px;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 820px) {
  .floatingChatContainer {
    right: 10px;
    bottom: 15px;
  }
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
}
@media (max-width: 425px) {
}

/*** MAIN THEME ***/
.topNavListSeperator ul li {
  position: relative;
  padding: 0 10px;
}
.topNavListSeperator ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 2px;
  height: 12px;
  transform: translateY(-52%);
  background-color: var(--primary-yellow);
}
.topNavListSeperator ul li:last-child::after {
  display: none;
}
.topNavListSeperator ul li span {
  padding: 0 !important;
}

.langNavListSeperator ul li {
  position: relative;
  padding: 0 15px;
}
.langNavListSeperator ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 2px;
  height: 12px;
  transform: translateY(-52%);
  background-color: var(--primary-yellow);
}
.langNavListSeperator ul li:last-child::after {
  display: none;
}
.langNavListSeperator ul li span {
  padding: 0 !important;
}

table.productItemSpec,
table.productItemSpec thead td,
table.productItemSpec tbody td {
  border: 1px solid rgba(44,48,74, .3);
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.3;
}
table.productItemSpec {
  width: 100% !important;
}
table.productItemSpec thead td {
  width: 50%;
  background-color: var(--primary-grey);
  padding: 6px 15px;
  font-weight: 600;
  text-align: center;
}
table.productItemSpec tr > td {
  width: 50%;
  padding: 6px 15px;
}
table.productItemSpec tr > td:first-child {
  font-weight: 600;
}
table.productItemSpec sup {
  font-size: .7em;
}

.btn-theme,
.btn-theme:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*padding: 12px 50px;*/
  font-size: 16px;
  line-height: 1.1;
  font-weight: 600;
  background-color: var(--primary-yellow);
  /*border: 1px solid var(--primary-yellow);*/
  border: none;
  border-radius: 5px;
  color: var(--font-color-main);
  transition: all .2s ease-in-out;
  cursor: pointer;
  min-width: 100px;
  position: relative;
  overflow: hidden;
}
.btn-theme:hover {
  /*border: 1px solid var(--primary-yellow);*/
  border: none;
  color: var(--font-color-main);
}
.btn-theme > span.btnIcon {
  display: inline-block;
  margin-left: 15px;
}
.btn-theme:disabled {
  opacity: .25;
  cursor: default;
}
.btn-theme:disabled:hover {
  color: #ffffff;
}
.btn-theme::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  transform: translateY(-100%);
  background-color: var(--primary-blue);
  transition: transform .2s ease-in-out;
  z-index: 5;
}
.btn-theme:hover::after {
  transform: translateY(0);
}
.btn-theme > div {
  transform: translateY(0);
  transition: transform .2s ease-in-out;
}
.btn-theme:hover > div {
  transform: translateY(4px);
}
.btn-theme a {
  padding: 12px 50px;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-theme.formBtn,
.btn-theme.formBtn:visited {
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--primary-blue);
  color: var(--primary-white);
}
.btn-theme.formBtn::after {
  background-color: var(--primary-yellow);
}

.btn-shop,
.btn-shop:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*padding: 12px 24px;*/
  font-size: 14px;
  background-color: #CCECFC;
  line-height: 1.1;
  font-weight: 600;
  /*border: 1px solid var(--primary-yellow);*/
  border: none;
  border-radius: 5px;
  color: var(--font-color-main);
  transition: all .2s ease-in-out;
  cursor: pointer;
  min-width: 100px;
  position: relative;
  overflow: hidden;
}
.btn-shop:hover {
  border: none;
  color: var(--font-color-main);
  opacity: 1 !important;
}
.btn-shop > span.btnIcon {
  display: inline-block;
  margin-left: 15px;
}
.btn-shop:disabled {
  opacity: .25;
  cursor: default;
}
.btn-shop:disabled:hover {
  color: #ffffff;
}
.btn-shop::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  transform: translateY(-100%);
  transition: transform .2s ease-in-out;
  z-index: 5;
  background: linear-gradient(90deg, rgba(3, 141, 184, 1) 0%, rgba(115, 209, 211, 1) 39%, rgba(165, 213, 214, 1) 100%);
}
.btn-shop:hover::after {
  transform: translateY(0);
}
.btn-shop > div {
  transform: translateY(0);
  transition: transform .2s ease-in-out;
}
.btn-shop:hover > div {
  transform: translateY(4px);
}

.btn-shop a {
  padding: 12px 24px;
  display: block;
  width: 100%;
  height: 100%;
}

.listIconTick ul > li {
  background-image: url('../images/icon/icon-list-black.png');
  background-repeat: no-repeat;
  background-position: left top .4em;
  background-size: 16px auto;
  padding: 0 0 0 30px;
}
.listIconTick ul {
  list-style: none !important;
  margin-left: 0 !important;
}

.postDetailDate {
  color: var(--primary-gold);
}

.footerMenuList ul.uc-list-menu {
  column-count: 2;
}

@media (max-width: 1600px) {
}
@media (max-width: 1366px) {
  .topNavListSeperator ul li {
    padding: 0 0;
  }
}
@media (max-width: 1024px) {

  table.productItemSpec, 
  table.productItemSpec th, 
  table.productItemSpec td {
    font-size: 14px;
  }

  .listIconTick ul > li {
    background-size: 13px auto;
    padding: 0 0 0 24px;
  }
}
@media (max-width: 820px) {
}
@media screen and (max-width: 767px), screen and (max-width:900px) and (orientation:landscape) {
  .btn-theme,
  .btn-theme:visited {
    font-size: 16px;
    line-height: 14px;
  }
  .btn-shop a {
    padding: 12px 24px;
  }

  .btn-shop {
    font-size: 14px;
  }
  .btn-shop a {
    padding: 10px 10px;
  }

  .footerMenuList ul.uc-list-menu {
    column-count: 1;
  }
}
@media (max-width: 425px) {
}