/*  
@font-face {
  font-family: 'Prachason';
  src: url('../fonts/prachasonneuelite-extrabolditalic-webfont.woff2') format('woff2'),
       url('../fonts/prachasonneuelite-extrabolditalic-webfont.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Prachason';
  src: url('../fonts/prachasonneuelite-bold-webfont.woff2') format('woff2'),
       url('../fonts/prachasonneuelite-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;

}

@font-face {
  font-family: 'Prachason';
  src: url('../fonts/prachasonneuelite-semibold-webfont.woff2') format('woff2'),
       url('../fonts/prachasonneuelite-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}



@font-face {
  font-family: 'TH Sarabun';
  src: url('thsarabunnew_bolditalic-webfont.woff2') format('woff2'),
       url('thsarabunnew_bolditalic-webfont.woff') format('woff');
  font-weight: 700;
  font-style: italic;

}
 
@font-face {
  font-family: 'TH Sarabun New'; 
  src: url('thsarabunnew_bold-webfont.woff2') format('woff2'),
       url('thsarabunnew_bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;

}
 
@font-face {
  font-family: 'TH Sarabun New';
  src: url('thsarabunnew_italic-webfont.woff2') format('woff2'),
       url('thsarabunnew_italic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;

}
 
@font-face {
  font-family: 'TH Sarabun New';
  src: url('thsarabunnew-webfont.woff2') format('woff2'),
       url('thsarabunnew-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;

} */

@font-face {
  font-family: 'TH Sarabun New';
  src: url('../fonts/THSarabunNew-Italic.eot');
  src: url('../fonts/THSarabunNew-Italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/THSarabunNew-Italic.woff2') format('woff2'),
  url('../fonts/THSarabunNew-Italic.woff') format('woff'),
  url('../fonts/THSarabunNew-Italic.ttf') format('truetype'),
  url('../fonts/THSarabunNew-Italic.svg#THSarabunNew-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url('../fonts/THSarabunNew-BoldItalic.eot');
  src: url('../fonts/THSarabunNew-BoldItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/THSarabunNew-BoldItalic.woff2') format('woff2'),
  url('../fonts/THSarabunNew-BoldItalic.woff') format('woff'),
  url('../fonts/THSarabunNew-BoldItalic.ttf') format('truetype'),
  url('../fonts/THSarabunNew-BoldItalic.svg#THSarabunNew-BoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url('../fonts/THSarabunNew-Bold.eot');
  src: url('../fonts/THSarabunNew-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/THSarabunNew-Bold.woff2') format('woff2'),
  url('THSarabunNew-Bold.woff') format('woff'),
  url('../fonts/THSarabunNew-Bold.ttf') format('truetype'),
  url('../fonts/THSarabunNew-Bold.svg#THSarabunNew-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url('../fonts/THSarabunNew.eot');
  src: url('../fonts/THSarabunNew.eot?#iefix') format('embedded-opentype'),
  url('../fonts/THSarabunNew.woff2') format('woff2'),
  url('../fonts/THSarabunNew.woff') format('woff'),
  url('../fonts/THSarabunNew.ttf') format('truetype'),
  url('../fonts/THSarabunNew.svg#THSarabunNew') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prachason Neue Lite';
  src: url('../fonts/PrachasonNeueLite-SemiBold.eot');
  src: url('../fonts/PrachasonNeueLite-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/PrachasonNeueLite-SemiBold.woff2') format('woff2'),
  url('../fonts/PrachasonNeueLite-SemiBold.woff') format('woff'),
  url('../fonts/PrachasonNeueLite-SemiBold.ttf') format('truetype'),
  url('../fonts/PrachasonNeueLite-SemiBold.svg#PrachasonNeueLite-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prachason Neue Lite';
  src: url('../fonts/PrachasonNeueLite-ExtraBoldItalic.eot');
  src: url('../fonts/PrachasonNeueLite-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/PrachasonNeueLite-ExtraBoldItalic.woff2') format('woff2'),
  url('../fonts/PrachasonNeueLite-ExtraBoldItalic.woff') format('woff'),
  url('../fonts/PrachasonNeueLite-ExtraBoldItalic.ttf') format('truetype'),
  url('../fonts/PrachasonNeueLite-ExtraBoldItalic.svg#PrachasonNeueLite-ExtraBoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Prachason Neue Lite';
  src: url('../fonts/PrachasonNeueLite-Bold.eot');
  src: url('../fonts/PrachasonNeueLite-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/PrachasonNeueLite-Bold.woff2') format('woff2'),
  url('../fonts/PrachasonNeueLite-Bold.woff') format('woff'),
  url('../fonts/PrachasonNeueLite-Bold.ttf') format('truetype'),
  url('../fonts/PrachasonNeueLite-Bold.svg#PrachasonNeueLite-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0;
  height: 100%;

}
body{

  margin:0;
  padding:0;

  position: relative;
  overflow-x: hidden;

  overscroll-behavior: contain;
}

.modal-open{
  touch-action: none;
  overscroll-behavior: contain;
}


.modal-backdrop{
  overscroll-behavior: contain;
}

.pc body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
}

a{
  color:inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none;   }

.star{ color: #bc0000 }

.form-control,
.form-select{
  -webkit-appearance: none;

  padding:0 10px;

  font-weight:300;
  font-family:inherit;

  height:42px;
  line-height:40px;
  background:#fff;
  border-radius: 10px;
  border:2px solid #c7c7c7;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.form-control:disabled,
.form-control[readonly] {
  background: #e2e2e2;
  border-color: #c7c7c7;
}

.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 18px 15px;
  background-repeat: no-repeat;
}

textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 10px;
}

.form-control::-webkit-input-placeholder {
  color:inherit;
  opacity: 0.4;
}
.form-control:-moz-placeholder {
  opacity: 0.4;
}

.form-group{
  display: block;
  position: relative;
  margin-bottom: 20px;
}
.form-group label.title{
  text-align: left;
  display: block;

  font-weight: 600;
  margin-bottom:2px;
  padding: 0 0 10px 0;
  text-transform: uppercase;
}

.form-group label.title .star{
  color:#ED1C24;
  margin-right: 3px;
}

.form-group span.error{
  color:#ED1C24;
  font-size: 14px;
  padding-top: 3px;
}

.form-group .group{
  position: relative;
  display: block;
}
.form-group .group .icons{
  position: absolute;
  top: 0 !important;
  right: 15px;
  bottom: 0 !important;
}
.form-group .group .icons.left{
  left: 10px;
  right: auto;
}
.form-group .group .icons.left + .form-control{
  padding-left: 35px;
}
.form-check {
  position: relative;
  padding-left:1.5em;
}
.form-check .form-check-input{
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-width: 1px;
  position: absolute;
  top: 0;
  margin-left: -1.5em;
  border-radius:2px;
  border: 1px solid rgba(81, 68, 41, 0.6);
}
.form-check .form-check-input[type="radio"]{
  border-radius: 50%;
}
.form-check .form-check-input[type="radio"].rounded{
  border-radius: 3px !important;
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: inherit;
  padding-top: 3px;
}
.form-check-input:checked[type=checkbox],
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent;
  border: 1px solid rgba(81, 68, 41, 0.6);
  background-image: url(../img/icons/icon-checked.svg);
  background-size: 80%;
  background-position:2px 3px;

}


.btn{
  position: relative;
  padding:0 25px;
  font-weight: 500;
  height:60px;
  line-height:57px;
  border-radius:8px;
  transition: all 0.25s ease-in-out;
  font-size: var(--f-20);

  --bs-btn-color:#fff;
  --bs-btn-bg:var(--primary-color);
  --bs-btn-border-color:var(--primary-color);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--secondary-color);
  --bs-btn-active-border-color:var(--secondary-color);

  --bs-btn-hover-color:var(--bs-btn-active-color);
  --bs-btn-hover-bg:var(--bs-btn-active-bg);
  --bs-btn-hover-border-color:var(-bs-btn-active-border-color);
}

.btn-green{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--secondary-color);
  --bs-btn-border-color:var(--secondary-color);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--primary-color);
  --bs-btn-active-border-color:var(--primary-color);
}

.btn-outline{
  border-width: 2px;
  --bs-btn-color:#000;
  --bs-btn-bg:transparent;
  --bs-btn-border-color:var(--primary-color);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--primary-color);
  --bs-btn-active-border-color:var(--primary-color);
}

.btn.w-200{
  width: 200px;
  margin: 0 auto;
}

.btn-md{
  height: 52px;
  line-height:48px;
  font-size: var(--f-18);
}

.btn-sm{
  height: 48px;
  line-height:44px;
  font-size: var(--f-18);
}

.btn[disabled]{
  border-color: #D4EAEA;
  background-color:#D4EAEA;
  color:#A1C9C9;
  line-height: 56px;
  pointer-events: none;
  opacity: 1;
}
.btn.disabled, .btn:disabled{opacity: 0.35; pointer-events: none;}
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn.rounded {border-radius: 50px !important;}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active{
  background-color: transparent;
}

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
  outline: none !important;
  box-shadow: none!important;
}
.buttons{
  display: block;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.buttons.d-flex {
  -ms-flex-pack: center;
  justify-content: center;
}

svg path,
svg rect,
svg line,
svg circle,
svg polygon,
svg polyline{
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

@media (max-width:1024px) {
  .btn{
    height:52px;
    line-height:50px;
  }
  .btn-md{
    height:48px;
    line-height:44px;
  }
  .btn.w-200{width: 160px;}
}
@media (max-width:576px) {
  .btn{
    height: 48px;
    line-height: 44px;
    font-size: var(--f-18);
  }
}
/*==================================================
    Icon Setup
==================================================*/

.icons{
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.icons.before:before,
.icons.before:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.btn .icons.before:before{ opacity: 1; }
.btn .icons.before:after{ opacity: 0; }
.pc .btn:hover .icons.before:before{ opacity: 0; }
.pc .btn:hover .icons.before:after{ opacity: 1; }

/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}



.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow-down{
  margin-left:1px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


.container-fluid{
  max-width:100%;
  padding-left:70px;
  padding-right:70px;
  position: relative;
  z-index: 9;
}

.container{
  max-width:calc(1160px + 140px);
  padding-left: 70px;
  padding-right: 70px;
  position:relative;
  z-index:9;
}

.section-target{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section{
  display: block;
  position: relative;
  padding:60px 0;
}


.bg-light{
  background-color: #F2F4F9 !important;
}

.py-100{
  padding: 100px 0;
}
.py-50{
  padding:50px 0;
}

.box-980{
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 1px 0;
}
.box-655{
  max-width: 655px;
  width: 100%;
  margin: 0 auto;
  padding: 1px 0;
}

.compensate-for-scrollbar{ margin-right: 0 !important }
.compensate-for-scrollbar .header{ right: 0 }
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }


.fancybox-button--arrow_left > div,
.fancybox-button--arrow_right > div,
.fancybox-button--zoom,
.fancybox-button--play{opacity: 0 !important; pointer-events: none;}

@media (max-width:1280px) {
  .container-fluid{
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width:1199px) {
  .container-fluid{
    padding-left:30px;
    padding-right: 30px;
  }

  .box-980.w-lg-100{
    max-width: 100%;
  }
}

@media (max-width:1024px) {
  .container,
  .container-fluid{
    padding-left:30px;
    padding-right: 30px;
    max-width: 100%;
  }

  .section{
    padding: 40px 0;
  }

  .box-980{
    max-width: 80%;
  }

}

@media (max-width:991.98px) {
  .box-980{max-width: 500px;}


}

@media (max-width: 576px) {
  .container{
    padding-left:20px;
    padding-right: 20px;
  }
  .container-fluid{
    padding-left:20px;
    padding-right: 20px;
  }

  .py-100,
  .py-70{
    padding:45px 0;
  }
  .py-50{
    padding:20px 0;
  }


}

/*==================================================
    Header Setup
==================================================*/

:root {

  --bs-body-color:var(--black);
  --bs-body-bg:#ffffff;
  --bs-body-text-align:left;
  --bs-body-font-weight:600;
  --bs-body-line-height:1.4;
  --bs-body-font-size:var(--f-18);
  --bs-body-font-family:'Prachason Neue Lite','TH Sarabun New', sans-serif;

  --animate-duration-2s: all 0.2s ease-in-out;
  --animate-duration-35s: all 0.35s ease-in-out;
  --animate-duration-40s: all 0.40s ease-in-out;
  --animate-duration-45s: all 0.45s ease-in-out;

  --primary-color:#002e6d;
  --secondary-color:#7fbc42;
  --grey:#5a5a5a;
  --black:000;

  --font-th:'TH Sarabun New';

  --f-64:64px;
  --f-54:54px;
  --f-36:36px;
  --f-32:32px;
  --f-30:30px;
  --f-24:24px;
  --f-th-24:24px;
  --f-20:20px;
  --f-18:18px;
  --f-16:16px;

  --f-300:200;
  --f-400:300;
  --f-500:400;
  --f-600:500;
  --f-700:600;

}


@media (max-width: 1024px) { }

.white{color: #fff !important;}
.blue{color: var(--primary-color) !important;}
.fw-semibold{font-weight: 600;}
.fs-17{font-size: var(--f-17) !important;}
.fs-24{font-size: var(--f-24) !important;}
b, strong{
  font-weight: bold;
  font-family: inherit;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
  margin:0;
  font-weight:500;
  font-style: normal;
  line-height: 1.4;
  position: relative;
}
.nowrap{ white-space: nowrap; }

h1,.h1{}
h2,.h2{
  font-size: var(--f-64);
  font-style: italic;
  color: var(--primary-color);
  font-weight: 800;
}
h3,.h3{
  font-size: var(--f-54);
}

h5,.h5{font-size: var(--f-24);  }
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

  :root{
    --f-300:300;
    --f-400:400;
    --f-500:500;
    --f-600:600;
  }

}


@media (max-width:1550px) {
  :root{}
}

@media (max-width:1380px) {
  :root{
    --f-64:60px;
    --f-54:42px;
    --f-36:34px;
    --f-32:30px;
    --f-30:28px;
    --f-24:20px
  }
}

@media (max-width:1199px) {
  :root{
    --f-64:56px;
    --f-54:48px;
    --f-36:30px;
    --f-32:26px;
    --f-30:26px;
    --f-20:18px;
    --f-18:16px;
  }

  .title-xl{font-size:38px;}
}

@media (max-width:1024px) {
  :root{
    --f-64:52px;
  }
}
@media (max-width:991.98px) {
  :root{
    --f-64:46px;
    --f-54:42px;
    --f-36:28px;
    --f-16:15px
  }
}

@media (max-width:576px) {
  :root{
    --f-64:40px;
    --f-54:32px;
    --f-36:26px;
    --f-th-24:22px;
    --f-20:16px;
    --f-18:15px;
    --f-16:14px
  }

  .title-xl{font-size:30px;}
}


.header,
.navbar-brand img{
  transition: all 0.45s;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: auto;
  z-index: 1040;
  display: block;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header .container,
.header .container-fluid{
  display: flex;
  align-items: center;
}


.navbar-brand{
  padding: 0;
  position: relative;
  flex-shrink: 0;
  z-index: 200;
  width: 205px;
  margin: auto 0;

}
.navbar-brand a{
  display: block;
  position: relative;
}
.navbar-brand img,
.navbar-brand svg{width: 100%; height: auto;}

.nav-general{
  gap: 15px;
  height: 100%;
  margin-left: auto;
}
.nav-general > li,
.nav-general > li a{
  height: 100%;
}
.nav-general > li{
  display: flex;
}
.nav-general .icon-search{
  width: 24px;
  height: 100%;
  cursor: pointer;
  background-image: url(../img/icons/icon-search.svg);
  margin-right: 10px;
  background-size: 20px;
}
.nav-general .icon-bill{
  width: 20px;
  height: 100%;
  cursor: pointer;
  background-image: url(../img/icons/icon-bill.svg);
}

.icon-bill .badge{
  background-color: var(--secondary-color);
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  color: var(--black);
  border-radius: 50%;
  font-size: 18px;
  position: absolute;
  top: 52%;
  right: -5px;
  font-family: var(--font-th);
}
.lang{
  display: flex;
  margin: auto 0;
}
.lang > a{
  width: 38px;
  height: 22px;
  line-height: 22px;
  font-size:14px;
  color: #000;
  text-align: center;
}
.lang > a.active{
  background-color: var(--secondary-color);
  color: #fff;
  pointer-events: none;
}
.pc .lang > a:hover{
  color:var(--secondary-color);
}
.nav-general > li.nav-tel{
  position: relative;
  margin-left: 10px;

}
.nav-general > li.nav-tel:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -100vw;
  background-color: var(--primary-color);
  transform: skew(-10deg);
}
.nav-general > li.nav-tel > a{
  position: relative;
  z-index: 100;
  color: #fff;
  padding-left:15px;
  align-items: center;
  display: flex;
  font-size:16px;
  font-weight: 700;
}
@media (min-width:992px) {
  .navbar-brand{width:150px;}
  .header{height: 75px;}
  .header .container-fluid{
    height: 100%;
  }
  .nav-general{gap:5px;}
  .nav-main{
    margin: auto 0;
    margin-left:20px;
    gap: 20px;
    height: 100%;
  }
  .nav-main > li > a{
    display: flex;
    font-size: var(--f-16);
    color: var(--primary-color);
    padding: 15px 0;
    height: 100%;
    position: relative;
    align-items: center;
  }

  .nav-main .line-animate{
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .nav-main .line-animate:before{
    background-color: var(--secondary-color); height: 100%;}
  .nav-main li.active > a .line-animate:before,
  .nav-main li:hover a .line-animate:before {width: 100%;}

  .nav-main li.dropdown{
    position: static;
  }
  .nav-main .dropdown-menu{
    position: absolute;
    /* top: 81px; */
    top: 90px;
    left:0;
    right: 0;
    background-color: var(--primary-color);
    color: #fff;
    display: block;
    border-radius: 0;
    border: 0;
    padding: 0;

    transition: all 0.35s;
    opacity: 0;
    pointer-events: none;
  }
  .nav-main .dropdown:hover .dropdown-menu{top:81px; opacity: 1; pointer-events: all;}
  .nav-main .dropdown-menu .nav{
    padding-left:275px;
  }
  .nav-main .dropdown-menu .nav li a{
    display: block;
    padding: 15px 25px;
    font-size: 16px;
    color: #fff;
  }
  .nav-main .dropdown-menu .nav li a:hover,
  .nav-main .dropdown-menu .nav li a.active{color: var(--secondary-color);}
}

@media (min-width:1025px) {
  .navbar-brand{width:170px;}
  .nav-general > li.nav-tel{margin-left: 15px;}
  .nav-general .icon-bill{width: 20px;}
  .nav-general > li.nav-tel > a{font-size: 18px; padding-left: 25px;}

  .nav-main .dropdown-menu .nav{
    padding-left:195px;
  }
  .nav-main .dropdown:hover .dropdown-menu{top:75px;}

}

@media (min-width:1281px) {
  .header{height: 82px;}
  .navbar-brand{width: 190px;}
  .nav-general{gap: 15px;}
  .nav-general .icon-search{background-size: contain;}
  .nav-general .icon-bill{width: 28px;}
  .lang > a,
  .nav-general > li.nav-tel > a{font-size: var(--f-20);}
  .nav-main{margin-left: 40px; gap: 30px;}
  .nav-general > li.nav-tel{margin-left: 10px;}

  .lang > a{
    width: 40px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
  }
  .nav-main .dropdown:hover .dropdown-menu{top:81px;}
  .nav-main .dropdown-menu .nav{
    padding-left:275px;
  }
}
/*==================================================
   Mobile
==================================================*/

@media (max-width:1024px) {
  .icon-bill .badge{
    width: 16px;
    height: 16px;
    line-height: 16px;
  }

}
@media (max-width:991.98px) {

  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;
    z-index: 1060;
    border-radius: 0;
    position: relative;
    margin: auto 0;
    width: auto;
    height: auto;
    background-color:transparent !important;
    overflow: visible;
    display: flex;
    margin-left:0;
  }

  .btn.btn-icon{
    opacity: 1 !important
  }
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:30px;
    height:24px;
    margin: 0 auto 0
  }
  .btn-icon .group span{
    height: 4px;
    background-color:var(--primary-color);
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 0;
    -webkit-transform-origin: 25px, 1px;
    -ms-transform-origin: 25px, 1px;
    transform-origin: 25px, 1px
  }

  .btn-icon .group span:nth-child(1) {
    top: 0;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(2) {
    top:10px;
    -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(3) {
    top: 20px;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }


  .nav-opened .btn-icon span:nth-child(1):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(2):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(3):before { width: 100% !important }

  .nav-opened .btn-icon .group span:nth-child(1)  {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0);
    transform: rotate(45deg) translate3d(5px, 5px, 0)
  }

  .nav-opened .btn-icon .group span:nth-child(2)  {
    -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0)
  }

  .nav-opened .btn-icon .group span:nth-child(3)   {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0);
    transform: rotate(-45deg) translate3d(5px, -5px, 0)
  }

  .nav-main{display: none;}

  .header{height: 75px;}
  .header .container-fluid{height: 100%;}
  .navbar-brand{
    margin: auto 0;
    width: 150px;
  }

  .nav-general li:nth-child(1),
  .nav-general li:nth-child(2),
  .nav-general li:nth-child(4){display: none;}

  .nav-general .icon-bill{width: 22px;}
  /* .nav-general li.nav-button{
    position: relative;
    padding-left: 10px;
    margin-left: 10px;
  }
  .nav-general li.nav-button:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100vw;
    background-color: var(--primary-color);
    transform: skew(-10deg);
  }

  .nav-general .icon-bill{width: 22px;} */

}

@media (max-width:576px) {
  .header{height:65px;}
  .navbar-brand{width: 130px;}
  /* .nav-general li.nav-button{
    padding-left:2px;
    margin-left: 2px;
  } */
  /* .nav-general .icon-bill{width:19px;} */
}

.offcanvas-menu{
  --bs-offcanvas-height:calc(100vh - 75px);
  --bs-offcanvas-width:100%;
  --bs-offcanvas-border-width:0;
  --bs-offcanvas-bg:var(--primary-color);
  --bs-offcanvas-color:#fff;
  transition: transform .5s ease-in-out;
}
.offcanvas.offcanvas-top{top: auto; bottom: 0;}
.offcanvas-menu .offcanvas-body{
  padding:20px;
}
.offcanvas-backdrop.show{
  opacity: 0;
}
.nav-menu{
  width: 100%;
  margin: 0 auto;
  max-width:365px ;
}
.nav-menu li{
  width: 100%;
}
.nav-menu > li > a{
  display: block;
  padding: 12px 0;
  font-size: 25px;
  font-weight:500;
}
.nav-menu ul {margin-bottom: 12px;}
.nav-menu ul > li > a{
  font-size: 18px;
  padding: 15px 35px;
  display: block;
  border-top: 1px solid #fff;
}
.nav-menu ul > li:last-child > a{
  border-bottom: 1px solid #fff;
}

.offcanvas-menu .search-box{
  width: 100%;
  margin: 0 auto 20px;
  max-width:365px ;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.offcanvas-menu .lang{
  padding: 10px 0;
  margin-bottom: 15px;
}
.offcanvas-menu .lang > a{
  color: #fff;
  font-size: 16px;
  width: 42px;
  height: 26px;
  line-height: 26px;
}

.offcanvas-menu .hgroup{
  padding: 0 20px;
  border: 0;
}
.offcanvas-menu  .btn-close{
  opacity: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  margin-right: -5px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1.5em auto no-repeat;
}

.nav-general > li.nav-button{display: none;}


.search-box .form-control{
  height: 50px;
  border-width: 2px;
  border-radius: 15px;
  font-size: 18px;
}
.search-box .btn{
  margin: 0 auto;
  width: calc(100% - 100px);
  border-radius: 15px;
  color: #000000 !important;
  padding-top: 0;
  background-color: var(--secondary-color) !important;
  border:1px solid var(--secondary-color) !important
}
.search-box .btn{}
.search-box h4{
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding-bottom: 15px;
}
.search-box .icon-search{
  background-image: url(../img/icons/icon-search-grey.svg);
  width: 22px;
  height: 100%;
}

@media (min-width:992px) {
  .nav-general li.dropdown{position: static;}
  .nav-general .dropdown-menu {
    position: absolute;
    /* top: 81px; */
    top: 90px;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    color: #fff;
    display: block;
    border-radius: 0;
    border: 0;
    padding: 0;
    transition: all 0.35s;
    opacity: 0;
    pointer-events: none;
  }

  .nav-general .dropdown-menu.search.show {
    top: 80px;
    opacity: 1;
    pointer-events: all;
  }

  .search-box {
    display: flex;
    margin: 15px 0;
    justify-content: center;
    align-items: center;
    gap:20px;

  }
  .search-box h4{
    width: auto;
    margin: 0 !important;
    padding: 0;
  }
  .search-box .btn{
    height: 50px;
    line-height: 46px;
    font-size: var(--f-18);
    width: 280px;
    margin: 0;
  }
  .search-box .form-group{
    margin: 0;
    width: 440px;
    flex-shrink: 0;
  }
  .search-box .form-control{
    font-size: var(--f-18);
  }
}
@media (max-width:1280px) {
  .nav-general .dropdown-menu.search.show {
    top:73px;
  }
}

@media (max-width:991.98px) {

  .nav-general > li.nav-button{display: flex;}
}

@media (max-width:576px) {
  .offcanvas-menu{
    --bs-offcanvas-height:calc(100vh - 65px);
  }

  .search-box .form-control{
    height: 45px;
    border-radius: 10px;
    font-size: 16px;
  }

  .search-box .btn{
    font-size: 16px;
    padding-top: 1px;
    border-radius: 10px;
  }
  .search-box h4{
    font-size: 16px;
    padding-bottom: 10px;
    margin-top: -8px;
  }

  .nav-menu > li > a{
    font-size: 19px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .nav-menu ul > li > a {
    font-size: 16px;
    padding: 10px 28px
  }

  .offcanvas-menu .hgroup{
    padding: 0;
  }
  .offcanvas-menu .search-box{max-width: 100%;}
  .offcanvas-menu .lang{margin-bottom: 0;}
  .offcanvas-menu .btn-close{
    width: 22px; height: 22px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1.2em auto no-repeat;
  }
}
/*==================================================
   Section
==================================================*/

.page{
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 82px;
}

@media (max-width:1280px) {
  .page{padding-top: 75px;}
}
@media (max-width:576px) {
  .page{padding-top: 65px;}
}
.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090;
  display:flex;
}


.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid var(--primary-color);
  border-right: 3px solid rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  animation: spin 1s infinite linear;
}


@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.section-full{
  min-height: 100vh;
  min-height: calc(var(--vhs, 1vh) * 100) !important;
  display: flex;
}

.background{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  pointer-events: none;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background.fixed{
  background-attachment: fixed;
}
.device .background.parallaxie,
.device .background.fixed{
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (max-width:1199px) {
  .background.parallaxie{
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}

.section{
  position: relative;
}

.section.h-full{
  min-height: 100vh;
}

.section-title{
  display: block;
  position: relative;
  padding:45px 0;
}
.section-title h2,
.section-title h3{
  font-weight: 800;
  font-style: italic;
  color: var(--primary-color);
}
.section-title h4{
  font-size: var(--f-32);
  font-weight: 800;
  color: var(--primary-color);
  padding-top: 5px;
}
.hgroup{
  display: flex;
  border-bottom: 1px solid #DDDDDD;
  padding: 15px 0;
  margin-bottom: 30px;
  justify-content: space-between;
  align-items: center;
}
.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block;

}

.card-photo .photo{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;
}
.card-photo .photo img{
  width: 100%
}

.card-photo.rounded,
.card-photo.rounded .photo{
  border-radius: 10px;
}
.card-body{color: inherit;}

.card-link{
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 100;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}

strong{font-weight: 500;}
@media (max-width:1199px) {
  .section-title{
    padding: 30px 0;
  }

  .section-body .section-title{padding-bottom: 20px;}
}
@media (max-width:576px) {
  .hgroup{
    padding: 10px 0;
    margin-bottom: 20px;
  }

  .hgroup.style-2{border-width: 3px;}

  .section-title{
    padding: 25px 0;
  }

  .section-body .section-title{padding-bottom: 15px;}
}

/*==================================================
   Modal
==================================================*/

.modal .btn-close{
  width: 32px;
  height: 32px;
  border-radius: 0;
  background-size: contain;
  padding: 0;
  top:20px;
  right: 20px;
  transition: all 0.25s;
  opacity: 1 !important;
  background: none;
}
.modal .btn-close svg{
  width: 100%;
  height: auto;
  vertical-align: top;
}
.pc .modal .btn-close:hover {
  opacity: 0.8 !important;
}
.modal .btn-close.static{
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  margin-bottom: 15px;
}

.modal{z-index: 1098;}
.modal-backdrop{z-index: 1095;}
.modal-content{
  border-radius:24px;
  border:0;
  background-color: #fff;
}
.modal-inform .modal-dialog {max-width: 500px;}
.modal-inform .modal-content{background-color: transparent;}

.modal-inform img{
  border-radius: 10px;
}

@media (max-width:1024px) {
  .modal .btn-close{
    width:24px;
    height: 24px;
  }
  .modal .btn-close.static{
    margin-bottom: 10px;
  }
}

/*==================================================
   Banner
==================================================*/
.line-animate{
  height: 1px;
  position: relative;
}
.line-animate:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  display: inline-block;
  top: 0;
  background-color: var(--primary-color);
  transition: all 0.3s;
  transition-delay: 0.1s;
}
.line-animate.center:before{
  left: 50%;
  transform: translateX(-50%);
}

.section-banner{
  padding: 0 !important;
}

img.banner-desktop{display: block; width: 100%;}
img.banner-tablet{display: none; width: 100%;}
img.banner-mobile{display: none; width: 100%;}

.swiper-banner .banner-caption{
  /* height: 35vw; */

  position: absolute;
  top: 0;
  left: 100px;
  bottom: 0;
  z-index: 100;
  padding-top: 1vw;
}
.swiper-banner .background:before,
.swiper-banner .swiper-slide:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#808080;
  opacity: 0.4;
  mix-blend-mode: multiply;
  z-index: 100;

  display: none;
}
@media (min-width:1921px) {
  .swiper-banner .banner-caption{
    /* height: 550px; */
  }
}

.banner-caption .container-fluid{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-direction: column;
}
.banner-caption h2{
  font-size: 7vw;
  line-height: 1.1;
  color: #fff;
  font-style: normal;
  /* margin-top: auto; */
}
.banner-caption h2 .green{color: var(--secondary-color);}
.banner-caption h2 .small{
  font-weight: 500;
  font-family: 'TH Sarabun New';
  font-size: 10.2vw;
  line-height: 1;
}
.banner-caption .btn{
  margin-right: auto;
  margin-top: 35px;
  /* margin-bottom: auto; */
  width: 200px;
  padding: 0;
}
.swiper-pagination-bullet{
  z-index: 100;
}

@media (max-width:1199px) {
  .swiper-banner .banner-caption{left: 80px;}
}

@media (max-width:991.98px) {
  img.banner-desktop{display: none; }
  img.banner-tablet{display: block; }
  img.banner-mobile{display: none;}

  .banner-caption h2{font-size: 9vw;}
  .banner-caption h2 .small{font-size: 13.2vw;}
  .swiper-banner .banner-caption{left:50px;}

  .banner-caption .btn{
    width: auto;
    padding: 0 25px;
    height: 48px;
    line-height: 46px;
  }
}
@media (max-width:576px) {

  .swiper-pagination{bottom: 10px;}
  .swiper-pagination-bullet{
    width:7px;
    height: 7px;
    margin: 0 3px;
    border-radius: 2px;
  }

  img.banner-tablet{display: none; }
  img.banner-mobile{display: var(--black);}

  .banner-caption h2{font-size: 10vw; line-height: 1.3;}
  .banner-caption h2 .small{font-size: 14.7vw;}
  .swiper-banner .banner-caption{left:30px;}

  .banner-caption .btn{
    margin-top: 15px;
    height: 42px;
    line-height: 40px;
    padding: 0 20px;
  }
}


/*==================================================
   Search advance
==================================================*/
.textrow{
  position: relative;
  overflow: hidden;
}
.textrow > span{
  display: block
}
.navbar-search{
  display: block;
  background-color:var(--secondary-color);
  padding: 60px 0;
}
.navbar-search h4{
  font-size: var(--f-18);
  text-align: center;
  padding-bottom:30px;
}
.search-inputs{
  display: flex;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}
.search-input-inner{
  display: flex;
  gap: inherit;
  width: 100%;
  flex-wrap: inherit;
}
.search-inputs .form-select{
  border-radius:10px;
  border: 2px solid #c7c7c7;
  text-align: center;
  font-size: var(--f-th-24);
  font-family: 'TH Sarabun New';
  font-weight: bold;
  height: 44px;
  line-height: 44px;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7c7c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-size: 15px;
}
.search-inputs .btn-search{
  width: 46px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  display: flex;
  flex-shrink: 0;
}
.search-inputs .btn-search .text{display: none;}
.search-inputs .btn-search svg{
  width: 20px;
  margin: auto;
}
.search-inputs .btn-search svg path{fill: #fff;}

@media (max-width:1280px) {
  .navbar-search{padding: 40px 0;}
  .search-inputs {max-width: 900px;}
}

@media (max-width:991.98px) {
  .navbar-search{
    padding:30px 0;
  }
  .navbar-search h4{
    padding-bottom: 20px;
  }
  .search-inputs{
    display: flex;
    flex-wrap: wrap;
    max-width:460px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto;
  }

  .search-inputs .col{
    width:calc(50% - 6px);
    flex: unset;
  }

  .search-inputs .button{
    width:calc(33.333% - 10px);
    margin:10px auto 0 auto;
  }

  .search-inputs .btn-search{

    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
  }
  .search-inputs .btn-search svg{
    margin: 0 10px 0 0;
  }
  .search-inputs .btn-search .text{
    display: inline-block;
    font-size: var(--f-th-24);
    font-family: var(--font-th);
  }

}
@media (max-width:576px) {
  .search-inputs .button{
    width: 100%;margin-top: 5px;
  }
  .search-inputs .form-select{
    padding: 0 20px 0 10px;
    background-size: 11px;
    background-position: right 0.45rem center;
  }
}


/*==================================================
   Article
==================================================*/

.article {
  display: block;
}
.article h2{
  font-size: var(--f-64);
}
.section-whoweare .article,
.section-whoweare .section-title{
  max-width: 520px;
  margin: 0 auto;
}
.section-whoweare .section-title{
  padding: 40px 0;
}

.section-whoweare .article{
  font-size: var(--f-th-24);
  font-family: 'TH Sarabun New';
  font-weight: 400;
}
.section-icons{
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;
}
.section-icons .container{
  padding: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section-icons .icons{

  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url(../img/icons/icon-section-plus.svg);
}
.section-icons .icons:nth-child(1){
  top: 35px;
  left: 70px;
}
.section-icons .icons:nth-child(2){
  top: 35px;
  right: 70px;
}
.section-icons .icons:nth-child(3){
  bottom: 35px;
  left: 70px;
}
.section-icons .icons:nth-child(4){
  bottom: 35px;
  right: 70px;
}
@media (max-width:1380px) {
  .section-whoweare .section-title{padding: 30px 0 ;}
  .section-whoweare .card-photo{
    padding-left: 50px;
  }


  .section-icons .icons:nth-child(1){
    top: 30px;
    left: 30px;
  }
  .section-icons .icons:nth-child(2){
    top: 30px;
    right: 30px;
  }
  .section-icons .icons:nth-child(3){
    bottom: 0;
    left: 30px;
  }
  .section-icons .icons:nth-child(4){
    bottom: 0;
    right: 30px;
  }
}
@media (max-width:1280px) {
  .section-icons .icons{
    width: 30px;
    height: 30px;
  }
  .section-whoweare .section-title{padding: 20px 0 ;}
}

@media (max-width:1199px) {
  .section-whoweare{ padding: 120px 0 120px 50px;}

  .section-whoweare .card-photo{
    padding-left: 0;
  }
}

@media (max-width:991.98px) {
  .section-icons .icons:nth-child(1){
    top:25px;
    left: 25px;
  }
  .section-icons .icons:nth-child(2){
    top: 25px;
    right: 25px;
  }
  .section-icons .icons:nth-child(3){
    bottom: 0;
    left: 25px;
  }
  .section-icons .icons:nth-child(4){
    bottom: 0;
    right: 25px;
  }
  .section-whoweare{ padding:60px 0;}
  .section-whoweare .section-title {
    padding:30px 0;
    text-align: center;
  }
  .section-whoweare .card-photo{
    max-width: 550px;
    margin: 0 auto;
  }

  .section-whoweare .article,
  .section-whoweare .section-title{
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width:576px) {
  .section-icons .icons{width: 25px;height: 25px;}
  .section-whoweare .section-title{
    padding-bottom:15px;
  }
  .section-icons .icons:nth-child(1){
    top:20px;
    left: 20px;
  }
  .section-icons .icons:nth-child(2){
    top: 20px;
    right: 20px;
  }
  .section-icons .icons:nth-child(3){
    bottom: 0;
    left: 20px;
  }
  .section-icons .icons:nth-child(4){
    bottom: 0;
    right: 20px;
  }

}
/*==================================================
   Product
==================================================*/

.card-category{
  display: flex;
  flex-direction: column;
  position: relative;
}
.card-category h3{
  font-size: var(--f-18);
  text-align: center;
  padding: 20px 20px 0 ;
  transition: all 0.25s;
  font-style: normal;
  color: var(--black);
}
.pc .card-category:hover .photo{
  transform:scale(1.1);
}
.pc .card-category:hover h3{
  color: var(--primary-color);
}

@media (max-width:991.98px) {
  .card-category{ margin-bottom: 20px;}
}
@media (max-width:670px) {
  .card-category{ margin-bottom: 10px;}
  .card-category h3{padding-top: 10px;}
}

/*==================================================
   Product Catalogs
==================================================*/
.background.texture-line{

  background-size: auto;
  background-repeat: repeat-x;
  opacity: 0.5;
}

.card-catalogs{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 60px;
}
.card-catalogs .card-photo{
  max-width: 370px;
  margin: 30px auto;
}
.card-catalogs .card-photo img{
  width: 100%;
}
.card-catalogs .btn{
  width: 210px;
  margin: 0 auto;
}

.card-catalogs .card-body{
  padding: 0;
}
.card-catalogs h3{
  font-size: var(--f-32);
  margin-bottom: 20px;
}
.card-catalogs p{
  margin: 0;
  font-weight: 600;
}
@media (max-width:1366px) {
  .background.texture-line{
    background-size: cover;
  }
}

@media (max-width:991.98px){
  .background.texture-line{background-image: url(../img/thumb/bg-texture-line-2.png) !important;}
  .card-catalogs .btn{
    padding: 0;
    width: 180px;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .card-catalogs{
    margin-top: 40px;
  }

  .card-catalogs h3{
    margin-bottom: 15px;
  }

  .card-catalogs .card-photo{
    max-width: 330px;
  }
}

@media (max-width:576px){
  .card-catalogs .card-photo{
    max-width: 290px;
  }
  .card-catalogs .btn {
    padding: 0;
    width: 160px;
    margin-top:5px;
    margin-bottom: 30px;
  }
}
/*==================================================
   Slogan
==================================================*/
.section-slogan .section-title{
  padding: 7vw 0;
}

.section-slogan h2,
.section-slogan h3{
  color: #fff;
  text-align: center;
  font-weight: 800;
}
.section-slogan .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.article.contact{
  font-size: var(--f-30);
  text-align: center;
  color: var(--primary-color);
  font-weight: 700;
}
.article.contact p{
  margin-bottom: 5px;
}
.article.contact a:not(.btn):hover{color: var(--primary-color);}

.article.contact .btn{
  margin-top: 30px;
  font-size: var(--f-24);
  font-weight: 700;
}

.certificate-box{
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.certificate-box img{
  height: 75px;
}

@media (max-width:991.98px){
  .section-slogan .section-title{
    padding: 15vw 0;
  }

  .section-slogan h3{
    font-size: 36px;
  }

  .certificate-box{
    flex-direction: column;
  }


}

@media (max-width:576px){
  .section-slogan .section-title{
    padding: 20vw 0;
  }
  .section-slogan h3{
    font-size: 7vw;
  }
  .certificate-box img{height: 65px;}

  .article.contact{
    font-size: 20px;
  }
  .article.contact .btn{
    font-size: 18px;
    padding: 0 15px;
    margin-top: 15px;
  }
}

/*==================================================
   breadcrumb
==================================================*/
.navbar-breadcrumb{
  background-color: #dedede;
  padding:8px 0 4px;
}
.breadcrumb{margin: 0 -10px;}
.breadcrumb li{padding: 0;}
.breadcrumb li:before{display: none;}
.breadcrumb li a,
.breadcrumb li span{
  display: block;
  position: relative;
  padding: 0 10px;
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  font-weight: 400;
  line-height: 1;
}
.breadcrumb li a:before{
  content: '/';
  position: absolute;
  top: 1px;
  right: -4px;
}

@media (max-width:991.98px){
  .breadcrumb li a,
  .breadcrumb li span{font-size: 20px;}
}
@media (max-width:576px){
  .breadcrumb li a,
  .breadcrumb li span{font-size:16px;}
}
/*==================================================
   Product
==================================================*/

.section-body{
  padding: 40px 0 100px;
  min-height: calc(100vh - 295px);
}
.section-body.h-100{
  height: calc(100vh - 302px) !important ;
  min-height: 0;
}
.card-product{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #000;
  position: relative;
  padding: 20px 0;
}
.card-product:before{
  content: '';
  position: absolute;
  top: 0;
  right: -1.6rem;
  bottom: -1px;
  border-right: 1px solid #000 ;
}
.product-lists .row > div:nth-child(3) .card-product:before,
.product-lists .row > div:nth-child(6) .card-product:before{display: none;}
.card-product h3{
  font-size: var(--f-36);
  margin-bottom: 0;
  position: relative;
  font-weight: 700;
  font-style: italic;
  color: var(--primary-color);
  z-index: 100;
  transition: all 0.25s;
}
.card-product .card-photo{
  max-width: 310px;
  margin: 0 auto;
}
.card-product p{
  margin: 0;
}
.card-product .card-photo{
  padding: 5px 0 15px;
  transition: all 0.25s;
  position: relative;
  left: 0;
}
.card-product .card-photo img{width: 100%;}
.card-product:hover .card-photo{
  left: -10px;
}
.card-product:hover h3{color: var(--secondary-color);}

.request-quotation{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 6vw;
}
.request-quotation h5{
  /* color: var(--grey); */
  text-align: center;
  font-size: var(--f-20);
}
.request-quotation .btn-plus{
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: var(--primary-color);
  padding: 0;
  margin-bottom: 20px;
}
.request-quotation .btn-plus .icons{
  width: 100%;
  height: 100%;
  background-image: url(../img/icons/icon-plus.svg);
  vertical-align: top;
  background-size: 32px
}

@media (max-width:1280px) {
  .section-body.h-100{height: calc(100vh - 295px) !important;}
  .section-body{min-height: calc(100vh - 295px);}
}
@media (max-width:1024px) {
  .section-body{
    padding: 20px 0 60px;
  }
}
@media (max-width:991.98px) {
  .section-body{min-height: calc(100vh - 215px);}
  .section-body.h-100{height: calc(100vh - 215px) !important;}
  .card-product:before{right: -0.89rem;}
  .card-product .card-photo{
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .product-lists .row > div:nth-child(3) .card-product:before,
  .product-lists .row > div:nth-child(6) .card-product:before{display: block;}
  .product-lists .row > div:nth-child(even) .card-product{padding-left: 15px;}
  .product-lists .row > div:nth-child(even) .card-product:before{display: none;}



  .request-quotation{padding-top: 30vw;}
  .request-quotation .btn-plus{
    width: 40px;
    height: 40px;
  }
  .request-quotation .btn-plus .icons{
    background-size: 22px;
  }


  .card-product .card-photo {
    max-width:380px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width:671px) and (max-width:991.98px){
  .spec-result .card-product h3{
    font-size: 30px;
  }
  .spec-result .card-product p{
    font-size: 20px;
  }

}

@media (max-width:767px) {
  .card-product{padding: 12px 0 17px;}
  .card-product:before{display: none !important;}
  .product-lists .row > div:nth-child(even) .card-product{padding-left: 0;}

  .section-body{min-height: calc(100vh - 205px);}
  .section-body.h-100{height: calc(100vh - 205px) !important;}

}

/*==================================================
  request quotation
==================================================*/

.card-quotation{
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 1px solid #5a5a5a;
  border-bottom: 1px solid #5a5a5a;
}
.card-quotation .card-delete{
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 0;
  background-color: #5a5a5a;
  border-color: #5a5a5a;
  z-index: 100;
}
.pc .card-quotation .card-delete:hover{
  background-color:var(--secondary-color);
  border-color:var(--secondary-color);
}
.card-quotation .card-delete .icons{
  width: 100%;
  height: 100%;
  background-image: url(../img/icons/icon-delete-white.svg);
  background-size:15px;
  vertical-align: top;
}
.card-quotation .card-photo {padding: 10px;}
.card-quotation .card-photo img{width: 100%;}

.card-quotation .card-body{
  padding: 5px 0 15px;
}
.card-quotation h4{
  color: var(--primary-color);
  font-size: var(--f-18);
  margin-bottom: 15px;
}
.card-quotation .form-control{
  border-radius: 8px;
  height: 36px;
  line-height: 36px;
  border-color: #c7c7c7;
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  border-width: 2px;
  max-width: 170px;
  padding: 0 10px;
}
.card-quotation .info-lists{
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  font-weight: 400;
  line-height: 1;
}
.card-quotation .info-lists li{
  padding: 5px 0;
  align-items: center;
}
.card-quotation .info-lists p{
  margin: 0;
  flex-shrink: 0;
}

.form-contact{
  width: 100%;
  max-width:475px;
  margin: 0 auto;
}
.form-contact h5{
  font-size: var(--f-20);
  color:#062f6e;
  margin-bottom: 15px;
  margin-top: 15px;
}
.form-contact .font-th{
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  font-weight: 400;
  line-height: 1;
}
.form-contact .form-check{
  display: flex;
  padding: 0;
  align-items: center;
  gap: 10px;
  margin-left: 15px;
}
.form-contact .form-check .form-check-input{
  margin: 0;
  position: relative;
}
.form textarea.form-control{
  height: 150px;
}
.table-form{
  width: 100%;

}
.table-form th,
.table-form td{
  padding:5px 0;
}
.table-form th{
  font-weight: 400;
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  vertical-align: top;
}
.table-form .form-control{
  height: 36px;
  line-height: 34px;
  border-radius: 8px;
}

.form-contact .table-form th{
  width: 100px;
}

.button-viewmore{
  padding:50px 0;
}

.modal-alert .modal-dialog{
  max-width: 440px;
}
.modal-alert .modal-content{
  border-radius: 0;
  border:0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
.modal-alert h5{
  font-size: var(--f-20);
  text-align: center;
}
.modal-alert h3{
  font-size: 26px;
  color: var(--primary-color);
  padding: 5px 0;
  text-align: center;
  font-weight: 700;
}
.modal-alert .icons.main{
  width: 95px;
  height: 95px;
  margin: 20px auto 20px;
  display:flex;
  background-color: #dddddd;
  border-radius: 50%;
}
.modal-alert .icons.main svg,
.modal-alert .icons.main img{
  margin: auto;
}
.modal-alert .icons.main svg path{
  fill: #000000;
}
.modal-alert .icons.main svg.delete{
  width: 40%;
}
.modal-alert .icons.main img.quotation{
  width: 45%;
  position: relative;
  top: 5px;
  left: 5px;
}
.modal-button{
  flex-wrap: unset;
  gap: 10px;
  display: flex;
  padding:20px 20px 30px;
}
.modal-button .btn{
  width: 100%;
  height: 50px;
  line-height: 46px;
  color: var(--primary-color);
}



@media (max-width:991.98px) {
  .card-quotation{
    flex-direction: row;
  }
  .card-quotation:not(.first){border-top: 0;}
  .card-quotation .card-photo{width:260px ;}
  .card-quotation .card-body{
    padding: 20px 0;
  }

  .card-quotation h4{
    font-size: 18px;
    padding-right: 50px;
  }
  .card-quotation .card-photo{
    padding: 0;
    margin: auto 0;
  }

  .button-viewmore{padding: 30px 0;}
  .form-contact{max-width: 400px;}
}
@media (max-width:670px) {
  .card-quotation .card-photo{
    width:140px;
    flex-shrink: 0;
  }


  .card-quotation .card-delete{
    width: 32px;
    height: 32px;

  }
  .card-quotation .card-delete .icons{
    background-size: 12px;
  }

  .card-quotation h4{
    font-size: 15px;
  }
  .card-quotation .card-body{
    padding: 18px 0;
  }
  .card-quotation .info-lists li{
    padding: 0;
  }
  .card-quotation .form-control {
    border-radius: 8px;
    height: 32px;
    line-height: 32px;
  }

  .form-contact{padding: 0 10px;}
  .form-contact .table-form th{width: 80px;}
  .form-contact h5{
    margin-bottom: 5px;
    margin-top: 10px;
  }
  .form-contact .btn.w-200{width: 130px;}
  .form-contact textarea.form-control{height: 120px;}

  /* .modal-alert .icons.main {
    width: 75px;
    height: 75px;
  } */
  .modal-button .btn {
    height:46px;
    line-height: 42px;
  }
  .modal-alert h3{
    font-size: 24px;
  }
}

@media (max-width:405px) {
  .form-contact .d-flex{
    padding-top: 10px;
    flex-direction: column;
    align-items: unset!important;
    justify-content: unset !important;
    gap: 5px;
  }
  .form-contact .form-check{
    margin-left: 0;
  }
}

/*==================================================
   Contact Infos
==================================================*/

.contact-infos {
  font-size: var(--f-20);
  color: var(--primary-color);
  font-weight:700;
  margin-top: 65px;
  padding-left: 30px;
}
.contact-infos p{
  margin:3px 0;
}
.contact-infos .btn{
  height:48px;
  line-height: 44px;
  padding: 0 15px;
  margin-top: 20px;
}

.thankyou-box{
  display: block;
  text-align: center;
  width:100%;
  max-width: 655px;
  margin: auto auto;
  padding: 60px 0;
  position: relative;
  line-height: 1.6;
  font-size: var(--f-20);
  color: var(--primary-color);
}
.thankyou-box h2{
  padding-bottom:5px;
}
.thankyou-box .section-icons .icons:nth-child(1){left: 0; top: 0;}
.thankyou-box .section-icons .icons:nth-child(3){left: 0; bottom: 0;}
.thankyou-box .section-icons .icons:nth-child(2){right: 0; top: 0;}
.thankyou-box .section-icons .icons:nth-child(4){right: 0; bottom: 0;}
.thankyou-box a.link{
  display: inline-block;
  margin: 30px auto  0 auto;
  font-size: var(--f-20);
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
}
.section-body.h-100{
  padding: 20px 0;
}
.section-body.h-100 .container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-search{
  display: flex;
  flex-direction: column;
  margin-bottom:25px;
}
.card-search h4{
  color: var(--primary-color);
  margin-bottom: 15px;
}
.card-search .form-group{
  max-width: 600px;
  display: flex;
  gap: 10px;
}
.card-search .form-control{
  font-family: var(--font-th);
  font-size: var(--f-th-24);
  height: 52px;
  line-height: 52px;
  padding-top: 5px;
}
.card-search .btn{
  width: 53px;
  height: 52px;
  line-height: 52px;
  flex-shrink: 0;
  display: flex;
  padding: 0;
}
.card-search .btn .icons{
  width: 100%;
  height: 100%;
  background-image: url(../img/icons/icon-search.svg);
}
.card-search .btn svg{
  width: 20px;
  margin: auto;
}
.card-search .btn svg path{fill: #fff;}

.spec-result{
  display: block;
  padding-top: 10px;
  max-width: 960px;
  margin-bottom:0;
}
.spec-result .card-product{border: 0; padding-top: 0;}
.spec-result .card-product:before,
.spec-result .card-product:after{display: none;}
.spec-result .card-product {padding-bottom: 0;}
.spec-result .card-product p{padding-top: 5px;}
.spec-result .card-product .card-photo{margin-left: 0;}
.spec-result .row{
  margin-top: 30px;
  margin-bottom:30px;
}
.spec-result hr{
  opacity: 1;
  margin: 0 0;
}
.table-spec{
  width: 100%;
  text-align: center;
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  margin-top: 0;
}
.table-spec th,
.table-spec td{
  padding: 2px 0;
}
.table-spec td{
  font-weight: 300;
}
.table-spec td a{
  color: var(--primary-color);
  text-decoration: underline;
  line-height: 0.8;
  text-decoration-thickness: 1px
}
.table-spec th:nth-child(1),
.table-spec td:nth-child(1){
  text-align: left;
}

.spec-result .table-spec th,
.spec-result .table-spec td{
  width: 33.333%;
}


@media (max-width:1440px) {
  .thankyou-box{
    padding: 40px 0;
    max-width: 600px;
  }
}

@media (max-width:1024px) {
  .thankyou-box{
    margin:auto;
  }
}

@media (max-width:991.98px) {
  .contact-infos{
    /* max-width: 400px; */
    max-width: 400px;
    margin: 0 auto;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 0;
    /* position: relative;
    left: 60px; */
  }

  .thankyou-box{
    max-width: 500px;
  }

  .card-search{
    margin-bottom:5px;
  }
  .card-search .form-group{
    max-width:420px;
  }
  .card-search h4{
    margin-bottom: 10px;
  }

  .spec-result{
    max-width:450px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width:576px) {
  .contact-infos{
    left: 0;
    max-width:1000px;
    padding-left: 10px;
  }
  .contact-infos .btn {
    height: 44px;
    line-height: 40px;
  }

  .thankyou-box .btn{
    font-size: var(--f-20) !important;
  }

  .card-search{margin-bottom: 0;}
  .card-search h4{font-size: var(--f-20);}
  .card-search .form-control{
    height: 46px;
    line-height: 46px;
  }
  .card-search .btn{
    width: 46px;
    height: 46px;
    line-height: 46px;
  }
  .card-search .form-group{
    gap: 5px;
  }

  .spec-result .card-product .card-photo{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*==================================================
   Product Detail
==================================================*/
.product-details .hgroup{
  flex-direction: column;
  align-items: unset;
  border: 0;
  padding: 0;
  margin: 0;
}
.product-details .hgroup h1{
  display: block;
  position: relative;
  height: 80px;
  margin-bottom: 12px;
}
.product-details .hgroup h1 > span{
  position: relative;
  display:inline-block;
  height: 100%;
}
.product-details .hgroup h1 > span > span{
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-style: italic;
  font-size: 54px;
  font-weight: 800;

  padding: 0 7px 10px 12px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.product-details .hgroup h1 > span:before{
  content: '';
  position: absolute;
  left: 20px;
  right:-8px;
  top: 0;
  bottom: 0;
  background-color: var(--primary-color);
  transform: skew(-12deg);
}
.product-details .hgroup h1 > span:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 10px;
  bottom: 0;
  background-color: var(--primary-color);
}
.product-details .hgroup h1 > span > span:before{
  content: '';
  position: absolute;
  left: -10px;
  right: 0;
  bottom: 0;
  border-bottom: 6px solid var(--secondary-color);
  transform: skew(-12deg);
  z-index: 10;
}

.product-details .hgroup h5{
  margin:10px 0;
}

.product-infos {
  display: block;
  padding-left: 10px;
}
.product-infos .section-icons{display:none;}
.product-infos .textgroup{
  font-family: var(--font-th);
  font-size: var(--f-th-24);
  font-weight: 300;
  padding: 10px 0;
}
.product-infos .textgroup ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.product-infos .textgroup ul li{
  padding: 0 0 0 20px;
  margin: 0;
  position: relative;
}
.product-infos .textgroup ul li:before{
  content: '-';
  position: absolute;
  top: 0;
  left: 0;
}
.spect-infos h5{
  text-align: center;
}
.spect-infos .form-select{
  margin:15px auto;
  max-width: 230px;
  text-align: center;
}
.tab-spec .table-spec{
  color: #000;
  --bs-table-border-color:rgba(0,0,0,0.7);
  text-align: left;
  table-layout: fixed;
}
.tab-spec .table-spec td:nth-child(1){
  width: 100%;
}
.tab-spec .table-spec td:nth-child(2){width: 80px;}
.tab-spec .table-spec td:nth-child(3){width:70px;}

.spect-infos{
  display: none;
}
.product-spec {
  display: block;
  padding: 40px 0;

}
.product-spec .table-spec{
  --bs-table-border-color:rgba(0,0,0,0.7);
}
.product-spec .table-spec th,
.product-spec .table-spec td{
  padding: 2px 10px;
  text-align: center;
  white-space: nowrap;
}
.product-spec .table-spec th:nth-child(1),
.product-spec .table-spec td:nth-child(1){
  width: 180px;
  text-align: left;
  padding-left: 20px;
}

.form-select.th{
  font-family: var(--font-th);
  font-size: var(--f-th-24);
  text-align: center;
}
.form-select.w-200{width: 200px;}

@media (max-width:1280px){
  .product-infos{
    padding-left: 20px;
  }
}

@media (max-width:1024px){
  .product-infos{
    padding-left:10px;
  }
}

@media (max-width:991.98px){
  .spect-infos{
    display: block;
    max-width: 430px;
    margin: 20px auto 0;
  }

  .product-infos .textgroup {
    margin: 30px 0;
    position: relative;
  }

  .product-infos .textgroup .inner{
    max-width: 430px;
    margin:0 auto;
    padding: 30px 0;
  }

  .product-infos .section-icons{display:block;}
  .product-infos .section-icons .icons:nth-child(1){left: 0; top: 0;}
  .product-infos .section-icons .icons:nth-child(3){left: 0; bottom: 0;}
  .product-infos .section-icons .icons:nth-child(2){right: 0; top: 0;}
  .product-infos .section-icons .icons:nth-child(4){right: 0; bottom: 0;}

  .product-spec{display: none;}

  .spect-infos h5,
  .product-quotation h5{font-size: 18px;}


}

@media (max-width:576px){
  .spect-infos{
    padding-left: 11px;
    padding-right: 11px;
  }

  .product-infos .textgroup .inner{
    padding-left: 10px;
    padding-right: 10px;
  }

  .product-infos .section-icons .icons:nth-child(1){left:-5px;}
  .product-infos .section-icons .icons:nth-child(3){left:-5px; }
  .product-infos .section-icons .icons:nth-child(2){right: -5px;}
  .product-infos .section-icons .icons:nth-child(4){right: -5px; }

  .tab-spec .table-spec td:nth-child(3){width:45px;}


}

/*==================================================
   Product installation
==================================================*/
.product-installation{
  display: block;
  margin: 0 auto;
  /* max-width: 480px; */
  max-width: 650px;
  width: 100%;
}
.product-installation h5{
  text-align: center;
  padding-bottom: 20px;
}

.product-installation .btn.download{
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-installation .btn.download .icons{
  width:20px;
  height: 20px;
}
.product-installation .btn.download .icons svg{
  width: 100%;
  height: auto;
  vertical-align: top;
}
.product-installation .btn.download .icons svg line{

}
.pc .product-installation .btn.download:hover .icons svg line{
  stroke: #fff !important;
}
.pc .product-installation .btn.download:hover .icons svg polyline{
  stroke: #fff !important;
}

.product-quotation{
  display: block;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding-top: 30px;
}

.product-quotation h5{
  padding: 20px 0;
  text-align: center;
}

.product-quotation h6{
  font-family: var(--font-th);
  font-size: 30px;
  margin-bottom:5px;
}
.nav.product-code{
  gap: 12px;
}
.nav.product-code li{
  width: 20%;
}
.nav.product-code li > a,
.nav.product-code li > span{
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border:1px solid #bbbbbb;
  font-family: var(--font-th);
  font-size: var(--f-th-24);
  transition: all 0.25s;
}
.nav.product-code li > a.active,
.nav.product-code li > span.active,
.pc .nav.product-code li > a:hover,
.pc .nav.product-code li > span:hover{
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #000;
}

.product-quotation .quantity{
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 265px;
  margin: 0 auto;
  padding: 30px 0;

}
.product-quotation .quantity h6{
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  font-size: var(--f-th-24);
}
.product-quotation .quantity .form-control{
  height: 38px;
  line-height: 38px;
  border-radius: 8px;
  padding-top: 5px;
}
.form-control.th{
  font-size: var(--f-th-24);
  font-family: var(--font-th);
  padding-top: 2px;
}

@media (max-width:991.98px){
  .product-installation,
  .product-quotation{
    max-width: 430px;
  }

  .nav.product-code li{
    width:calc(50% - 10px)
  }
  .product-quotation h6{
    font-size: var(--f-th-24);
  }

  .product-installation .btn.download{
    margin-top:5px;
  }

  .product-installation h5,
  .product-quotation h5{
    font-size: 22px;
  }
}
@media (max-width:576px){
  .product-installation .btn.download{
    padding-left: 10px;
    padding-right: 10px;
  }
  .product-installation .btn.download .icons {
    width:15px;
    height:15px;
  }

  .product-quotation .quantity{max-width: 250px;margin-left: 0;}

  .product-quotation h5{padding-bottom:5px;}

  .product-installation h5,
  .product-quotation h5{
    font-size: 20px;
  }
}


/**/
.swiper-gallery-group{
  display: flex;
  gap: 8px;
}
.gallery-thumbs {
  width:20%;
  height:455px;
  flex-shrink: 0;
  padding-left:8px;
  display: flex;
}

.gallery-thumbs .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.gallery-top {
  width:80%;
}

.gallery-top .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.product-gallery .photo{
  width: 100%;
  display: block;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.product-gallery .gallery-thumbs .photo{
  background-size: cover;
  border:0;
  transition: all 0.3s;
}
.product-gallery .gallery-thumbs .photo img{width: 100%;}
.pc .product-gallery .gallery-thumbs .swiper-slide-thumb-active .photo,
.pc .product-gallery .gallery-thumbs .photo:hover{
  border-color: #ccc;
}

.swiper-desktop-group{display: flex;}
.swiper-mobile-group{display: none;}

.gallery-thumbs .swiper-slide:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border:2px solid var(--secondary-color);
  opacity: 0;
  transition: all 0.3s;
}

.gallery-thumbs .swiper-slide-thumb-active:before{opacity: 1;}

@media (max-width:1280px){
  .gallery-top{
    width: 100%;
  }
  .gallery-thumbs{
    height: auto;
    width: 100%;
    padding-left: 0;
    padding-top: 8px;
  }
  .swiper-desktop-group{display: none;}
  .swiper-mobile-group{display: block;}

  .product-details .hgroup h1{height: 71px ;}
  .product-details .hgroup h1 > span > span{font-size:45px;}

}

@media (max-width:991.98px){
  .product-gallery{
    max-width: 430px;
    margin: 0 auto 40px;
  }
  .product-infos{
    margin: 0 auto;
  }

  .product-details .hgroup{
    margin-bottom: 30px;
    margin-top: 10px;
  }

  .swiper-mobile-group{
    margin-bottom: 20px;
  }
  .product-details .hgroup h1 {height: 52px;}
  .product-details .hgroup h1 > span > span{
    font-size: 34px;
  }
  .product-details .hgroup h1 > span:before{right: -5px;}
  .product-details .hgroup h5{font-size: 18px;}
  .product-details .hgroup {
    margin-bottom: 20px;
    margin-top: 0px;
  }
}


/*==================================================
   Footer
==================================================*/

.footer{
  border-top: 5px solid var(--secondary-color);
  height: 220px;
  font-size: var(--f-16);
  color: #525252;
  text-align: center;
  padding: 25px 0;
  background-color: #333333;
  background-image: url(../img/thumb/footer-texture.png);
  background-size:auto;
  background-repeat:repeat-x;
  background-position: top center;
}
@media (max-width:991.98px){
  .footer{height: 140px;}
}

.form-select:disabled {
  color: #999999;
}