html {
  /* background: rgb(0,223,255);
  background: linear-gradient(135deg, rgba(0,223,255,1) 0%, rgba(85,148,255,1) 18%, rgba(83,63,255,1) 38%, rgba(123,0,255,1) 61%, rgba(173,0,225,1) 83%, rgba(61,0,175,1) 100%);
  background-size: 100% 100vh; */
  }

/* ScrollBar */
html {overflow: scroll; overflow-x: hidden;}
::-webkit-scrollbar {width: 0px; background: #eeeeee;}
::-webkit-scrollbar-thumb {background: #e0e0e0; min-height: 10px; max-height: 10px;}

html {
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  }


/*--- Font ---*/
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/templates/fonts/NotoSansThai-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 400 500 600 700; 
    font-stretch: 75% 125%; 
    font-display: swap; font-style: normal;
}
@font-face {
    font-family: 'sarabun';
    src: url('/templates/fonts/Sarabun-Light.ttf') format('truetype');
    font-weight: 300; /* กำหนดช่วงน้ำหนักที่รองรับ */
    font-stretch: 75% 125%; /* กำหนดช่วงความกว้างที่รองรับ หากมี */
    font-display: swap; font-style: normal;
}
@font-face {
    font-family: 'sarabun';
    src: url('/templates/fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400; /* กำหนดช่วงน้ำหนักที่รองรับ */
    font-stretch: 75% 125%; /* กำหนดช่วงความกว้างที่รองรับ หากมี */
    font-display: swap; font-style: normal;
}
@font-face {
    font-family: 'sarabun';
    src: url('/templates/fonts/Sarabun-Medium.ttf') format('truetype');
    font-weight: 500; /* กำหนดช่วงน้ำหนักที่รองรับ */
    font-stretch: 75% 125%; /* กำหนดช่วงความกว้างที่รองรับ หากมี */
    font-display: swap; font-style: normal;
}
@font-face {
    font-family: 'sarabun';
    src: url('/templates/fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600; /* กำหนดช่วงน้ำหนักที่รองรับ */
    font-stretch: 75% 125%; /* กำหนดช่วงความกว้างที่รองรับ หากมี */
    font-display: swap; font-style: normal; letter-spacing: 0px;
}
@font-face {
    font-family: 'sarabun';
    src: url('/templates/fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700; /* กำหนดช่วงน้ำหนักที่รองรับ */
    font-stretch: 75% 125%; /* กำหนดช่วงความกว้างที่รองรับ หากมี */
    font-display: swap; font-style: normal; letter-spacing: 0px;
}

.font-serif {font-family: 'sarabun', sans-serif; font-size: 1.0rem; font-weight: 400; line-height: 1.8rem;}
.font-serif h3, .font-serif h3 .font-noto {font-weight: 500;}
.font-serif .fontw600 {font-weight: 600; letter-spacing: 0px;}
.font-serif .fontw700 {font-weight: 700; letter-spacing: 0px;}
.font-serif .fontw800 {font-weight: 800; letter-spacing: 0px;}
.font-serif .fontsize105 {font-size: 105%; line-height: 1.9rem;}
.font-serif .fontsize110 {font-size: 110%; line-height: 2.0rem;}


.font-noto {font-family: 'Noto Sans Thai', sans-serif;}


body {font-family: 'Noto Sans Thai', sans-serif; font-weight: 400; color: #000; font-size:1.0rem;}
main {width: 100%; min-height: 600px;}
h1, h2, h3 {margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;}

h1 {font-size: 200%; font-weight: 600; line-height: 2.9rem; letter-spacing: -1px;}
h2 {font-size: 1.5rem; font-weight: 500; line-height: 2.0rem;}
h3 {font-size: 1.2rem; font-weight: 500; line-height: 1.7rem;}
h4, h5 {font-size: 1.0rem; font-weight: 500; line-height: 1.5rem;}

.max-w-xxl {max-width: 1440px; margin: auto;}
.max-w-xl {max-width: 1200px; margin: auto;}
.max-w-l {max-width: 992px; margin: auto;}
.max-w-m {max-width: 768px; margin: auto;}
.max-w-sm {max-width: 576px; margin: auto;}

.fontw200 {font-weight: 200;}
.fontw300 {font-weight: 300;}
.fontw400 {font-weight: 400;}
.fontw500 {font-weight: 500;}
.fontw550 {font-weight: 550;}
.fontw570 {font-weight: 570;}
.fontw580 {font-weight: 580;}
.fontw590 {font-weight: 590;}
.fontw600 {font-weight: 600; letter-spacing: -1px;}
.fontw700 {font-weight: 700; letter-spacing: -1px;}
.fontw800 {font-weight: 800; letter-spacing: -1px;}

.fontsize80 {font-size: 80%;}
.fontsize85 {font-size: 85%;}
.fontsize90 {font-size: 90%;}
.fontsize95 {font-size: 95%;}
.fontsize100 {font-size: 100%; line-height: 1.5em;}
.fontsize105 {font-size: 105%; line-height: 1.5em;}
.fontsize110 {font-size: 110%; line-height: 1.5em;}
.fontsize120 {font-size: 120%; line-height: 1.5em;}
.fontsize130 {font-size: 130%; line-height: 1.5em;}
.fontsize140 {font-size: 140%; line-height: 1.5em;}
.fontsize150 {font-size: 150%; line-height: 1.5em;}
.fontsize160 {font-size: 160%;}
.fontsize170 {font-size: 170%;}
.fontsize180 {font-size: 180%;}
.fontsize190 {font-size: 190%;}
.fontsize200 {font-size: 200%;}

b, strong {font-weight: 580;}
ol, ul {margin-bottom: 15px; padding: 0px 26px; }
p {margin: 0 0 15px;}
sup {vertical-align: super !important; font-size: smaller !important; top: 0em !important;}


.lh-0  {line-height: 0em;}
.lh1-0 {line-height: 1.0em;}
.lh1-1 {line-height: 1.1em;}
.lh1-2 {line-height: 1.2em;}
.lh1-3 {line-height: 1.3em;}
.lh1-4 {line-height: 1.4em;}
.lh1-5 {line-height: 1.5em;}


/*--- Padding ---*/
.pad0 {padding: 0px;}
.pad2 {padding: 2px;}
.pad3 {padding: 3px;}
.pad4 {padding: 4px;}
.pad5 {padding: 5px;}
.pad6 {padding: 6px;}
.pad8 {padding: 8px;}
.pad10 {padding: 10px;}
.pad15 {padding: 15px;}
.pad20 {padding: 20px;}
.pad25 {padding: 25px;}
.pad30 {padding: 30px;}
.pad35 {padding: 35px;}
.pad40 {padding: 40px;}

.padt0 {padding-top: 0px;}
.padt5 {padding-top: 5px;}
.padt10 {padding-top: 10px;}
.padt15 {padding-top: 15px;}
.padt20 {padding-top: 20px;}
.padt25 {padding-top: 25px;}
.padt30 {padding-top: 30px;}
.padt35 {padding-top: 35px;}
.padt40 {padding-top: 40px;}

.padb0 {padding-bottom: 0px;}
.padb2 {padding-bottom: 2px;}
.padb4 {padding-bottom: 4px;}
.padb5 {padding-bottom: 5px;}
.padb6 {padding-bottom: 5px;}
.padb10 {padding-bottom: 10px;}
.padb15 {padding-bottom: 15px;}
.padb20 {padding-bottom: 20px;}
.padb25 {padding-bottom: 25px;}
.padb30 {padding-bottom: 30px;}
.padb35 {padding-bottom: 35px;}
.padb40 {padding-bottom: 40px;}
.padb45 {padding-bottom: 45px;}
.padb50 {padding-bottom: 50px;}
.padb55 {padding-bottom: 55px;}
.padb60 {padding-bottom: 60px;}
.padb65 {padding-bottom: 65px;}
.padb70 {padding-bottom: 70px;}

.padtb0 {padding-top: 0px; padding-bottom: 0px;}
.padtb5 {padding-top: 5px; padding-bottom: 5px;}
.padtb10 {padding-top: 10px; padding-bottom: 10px;}
.padtb15 {padding-top: 15px; padding-bottom: 15px;}
.padtb20 {padding-top: 20px; padding-bottom: 20px;}
.padtb25 {padding-top: 25px; padding-bottom: 25px;}
.padtb30 {padding-top: 30px; padding-bottom: 30px;}
.padtb35 {padding-top: 35px; padding-bottom: 35px;}
.padtb40 {padding-top: 40px; padding-bottom: 40px;}

.padlr5 {padding-left: 5px; padding-right: 5px;}
.padlr10 {padding-left: 10px; padding-right: 10px;}
.padlr15 {padding-left: 15px; padding-right: 15px;}
.padlr20 {padding-left: 20px; padding-right: 20px;}
.padlr25 {padding-left: 25px; padding-right: 25px;}
.padlr30 {padding-left: 30px; padding-right: 30px;}
.padlr35 {padding-left: 35px; padding-right: 35px;}
.padlr40 {padding-left: 40px; padding-right: 40px;}

.padr5 {padding-right: 5px;}
.padr10 {padding-right: 10px;}

.padl5 {padding-left: 5px;}
.padl10 {padding-left: 10px;}

/*--- Margin ---*/
.mg0 {margin: 0px;}
.mg5 {margin: 5px;}
.mg10 {margin: 10px;}
.mg15 {margin: 15px;}
.mg20 {margin: 20px;}
.mg25 {margin: 25px;}
.mg30 {margin: 30px;}

.mgb0 {margin-bottom: 0px;}
.mgb1 {margin-bottom: 1px;}
.mgb2 {margin-bottom: 2px;}
.mgb4 {margin-bottom: 4px;}
.mgb5 {margin-bottom: 5px;}
.mgb10 {margin-bottom: 10px;}
.mgb15 {margin-bottom: 15px;}
.mgb20 {margin-bottom: 20px;}
.mgb25 {margin-bottom: 25px;}
.mgb30 {margin-bottom: 30px;}

.mgt0 {margin-top: 0px;}
.mgt1 {margin-top: 1px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt25 {margin-top: 25px;}
.mgt30 {margin-top: 30px;}

.mgtb0 {margin: 0px 0px;}
.mgtb1 {margin: 1px 0px;}
.mgtb5 {margin: 5px 0px;}
.mgtb8 {margin: 8px 0px;}
.mgtb10 {margin:10px 0px;}
.mgtb15 {margin:15px 0px;}
.mgtb20 {margin:20px 0px;}
.mgtb25 {margin:25px 0px;}
.mgtb30 {margin:30px 0px;}

.mglr5 {margin:0px 5px;}
.mglr10 {margin:0px 10px;}
.mglr15 {margin:0px 15px;}
.mglr20 {margin:0px 20px;}
.mglr25 {margin:0px 25px;}
.mglr30 {margin:0px 30px;}


/*--- Block ---*/
.inline {display: inline;}
.inline-block, .ilb, span.ilb {display: inline-block;}
.fixed {position: fixed !important;}


/*--- border & Shadow ---*/
.br-5 {border-radius: 5px;}
.br-10 {border-radius: 10px;}
 
/*--- Table ---*/
.table>thead>tr>th {vertical-align: middle; text-align: center; font-weight: 400; --bs-table-bg: none;}



/*--- block-width ---*/
.b {flex: 0 0 auto;}
.b-10 {width: 10%;}
.b-20 {width: 20%;}
.b-30 {width: 30%;}
.b-40 {width: 40%;}
.b-50 {width: 50%;}
.b-60 {width: 60%;}
.b-70 {width: 70%;}
.b-80 {width: 80%;}
.b-90 {width: 90%;}
.b-100 {width: 100%;}

/*--- More Design ---*/
.line-left-bg {background: #eff0ff; background: linear-gradient(90deg,rgba(239,240,255,1) 0%,rgba(239,240,255,1) 0%,rgba(255,255,255,0) 100%);
	padding: 2px; margin-top: 5px;}
.line-right-bg {background: #eff0ff; background: linear-gradient(-90deg,rgba(239,240,255,1) 0%,rgba(239,240,255,1) 0%,rgba(255,255,255,0) 100%);
	padding: 2px; margin-top: 5px;}

    
/* Preloader */
#preloader {position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  background-color: #ffffff; opacity: 0.96;/* สีพื้นหลังของ preloader */
  z-index: 4; /* ให้ preloader อยู่ข้างบนสุด */
}

.loader {position: relative;left: 45%;top: 45%;transform: translate(-50%, -50%);
  border: 8px solid #f3f3f3; /* สีขอบของ loader */
  border-radius: 50%; border-top: 8px solid #5100BA;  /* สีของแถบที่หมุน */
  width: 60px; height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Image */
img {width:100%; height: auto;}
/* Responsive Image Ratio */
.responsive-image {width: 100%;height: auto; aspect-ratio: 21 / 9; /* Default for Desktop */
  object-fit: cover;
}

/* Tablet */
@media (max-width: 1024px) {
  .responsive-image {aspect-ratio: 16 / 9;}
}

/* Mobile */
@media (max-width: 768px) {
  .responsive-image {aspect-ratio: 5 / 4;}
}




/* RESPONSIVE */
@media (min-width: 1400px) {

}
@media (min-width: 1200px) and (max-width: 1399.98px) {

}
@media (min-width: 992px) and (max-width: 1199.98px) {

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

}
@media (min-width: 576px) and (max-width: 767.98px) {
	.container, .container-sm {max-width: 100%;}
}
@media (max-width: 575.98px) {

}