.kanit-thin {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-extralight {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-semibold {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kanit-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kanit-extrabold {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.kanit-black {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.kanit-thin-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.kanit-extralight-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kanit-light-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kanit-regular-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kanit-medium-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kanit-semibold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kanit-bold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.kanit-extrabold-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.kanit-black-italic {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: italic;
}
.prompt-thin {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.prompt-extralight {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.prompt-light {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.prompt-regular {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.prompt-medium {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.prompt-semibold {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.prompt-bold {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.prompt-extrabold {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.prompt-black {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.prompt-thin-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.prompt-extralight-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.prompt-light-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.prompt-regular-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.prompt-medium-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.prompt-semibold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.prompt-bold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.prompt-extrabold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.prompt-black-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: italic;
}
.sarabun-thin {
  font-family: "Sarabun", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.sarabun-extralight {
  font-family: "Sarabun", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.sarabun-light {
  font-family: "Sarabun", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sarabun-regular {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sarabun-medium {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sarabun-semibold {
  font-family: "Sarabun", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.sarabun-bold {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sarabun-extrabold {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.sarabun-thin-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.sarabun-extralight-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.sarabun-light-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sarabun-regular-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sarabun-medium-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.sarabun-semibold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.sarabun-bold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.sarabun-extrabold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  font-style: italic;
}
/* custom 
// <weight>: Use a value from 100 to 800
// <uniquifier>: Use a unique and descriptive class name
*/
.noto-sans-thai-regular {
  font-family: "Noto Sans Thai", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* end custom */
.mitr-extralight {
  font-family: "Mitr", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.mitr-light {
  font-family: "Mitr", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.mitr-regular {
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mitr-medium {
  font-family: "Mitr", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.mitr-semibold {
  font-family: "Mitr", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.mitr-bold {
  font-family: "Mitr", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.sriracha-regular {
  font-family: "Sriracha", cursive;
  font-weight: 400;
  font-style: normal;
}
.mali-extralight {
  font-family: "Mali", cursive;
  font-weight: 200;
  font-style: normal;
}

.mali-light {
  font-family: "Mali", cursive;
  font-weight: 300;
  font-style: normal;
}

.mali-regular {
  font-family: "Mali", cursive;
  font-weight: 400;
  font-style: normal;
}

.mali-medium {
  font-family: "Mali", cursive;
  font-weight: 500;
  font-style: normal;
}

.mali-semibold {
  font-family: "Mali", cursive;
  font-weight: 600;
  font-style: normal;
}

.mali-bold {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: normal;
}

.mali-extralight-italic {
  font-family: "Mali", cursive;
  font-weight: 200;
  font-style: italic;
}

.mali-light-italic {
  font-family: "Mali", cursive;
  font-weight: 300;
  font-style: italic;
}

.mali-regular-italic {
  font-family: "Mali", cursive;
  font-weight: 400;
  font-style: italic;
}

.mali-medium-italic {
  font-family: "Mali", cursive;
  font-weight: 500;
  font-style: italic;
}

.mali-semibold-italic {
  font-family: "Mali", cursive;
  font-weight: 600;
  font-style: italic;
}

.mali-bold-italic {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: italic;
}
/* custom */
.playpen-sans-thai-regular {
  font-family: "Playpen Sans Thai", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* end custom */
.kodchasan-extralight {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kodchasan-light {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kodchasan-regular {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kodchasan-medium {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kodchasan-semibold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kodchasan-bold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kodchasan-extralight-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kodchasan-light-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kodchasan-regular-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kodchasan-medium-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kodchasan-semibold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kodchasan-bold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.srisakdi-regular {
  font-family: "Srisakdi", system-ui;
  font-weight: 400;
  font-style: normal;
}

.srisakdi-bold {
  font-family: "Srisakdi", system-ui;
  font-weight: 700;
  font-style: normal;
}
.ibm-plex-sans-thai-looped-thin {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-extralight {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-light {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-regular {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-medium {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-semibold {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-thai-looped-bold {
  font-family: "IBM Plex Sans Thai Looped", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.charmonman-regular {
  font-family: "Charmonman", cursive;
  font-weight: 400;
  font-style: normal;
}

.charmonman-bold {
  font-family: "Charmonman", cursive;
  font-weight: 700;
  font-style: normal;
}
.maitree-extralight {
  font-family: "Maitree", serif;
  font-weight: 200;
  font-style: normal;
}

.maitree-light {
  font-family: "Maitree", serif;
  font-weight: 300;
  font-style: normal;
}

.maitree-regular {
  font-family: "Maitree", serif;
  font-weight: 400;
  font-style: normal;
}

.maitree-medium {
  font-family: "Maitree", serif;
  font-weight: 500;
  font-style: normal;
}

.maitree-semibold {
  font-family: "Maitree", serif;
  font-weight: 600;
  font-style: normal;
}

.maitree-bold {
  font-family: "Maitree", serif;
  font-weight: 700;
  font-style: normal;
}
.trirong-thin {
  font-family: "Trirong", serif;
  font-weight: 100;
  font-style: normal;
}

.trirong-extralight {
  font-family: "Trirong", serif;
  font-weight: 200;
  font-style: normal;
}

.trirong-light {
  font-family: "Trirong", serif;
  font-weight: 300;
  font-style: normal;
}

.trirong-regular {
  font-family: "Trirong", serif;
  font-weight: 400;
  font-style: normal;
}

.trirong-medium {
  font-family: "Trirong", serif;
  font-weight: 500;
  font-style: normal;
}

.trirong-semibold {
  font-family: "Trirong", serif;
  font-weight: 600;
  font-style: normal;
}

.trirong-bold {
  font-family: "Trirong", serif;
  font-weight: 700;
  font-style: normal;
}

.trirong-extrabold {
  font-family: "Trirong", serif;
  font-weight: 800;
  font-style: normal;
}

.trirong-black {
  font-family: "Trirong", serif;
  font-weight: 900;
  font-style: normal;
}

.trirong-thin-italic {
  font-family: "Trirong", serif;
  font-weight: 100;
  font-style: italic;
}

.trirong-extralight-italic {
  font-family: "Trirong", serif;
  font-weight: 200;
  font-style: italic;
}

.trirong-light-italic {
  font-family: "Trirong", serif;
  font-weight: 300;
  font-style: italic;
}

.trirong-regular-italic {
  font-family: "Trirong", serif;
  font-weight: 400;
  font-style: italic;
}

.trirong-medium-italic {
  font-family: "Trirong", serif;
  font-weight: 500;
  font-style: italic;
}

.trirong-semibold-italic {
  font-family: "Trirong", serif;
  font-weight: 600;
  font-style: italic;
}

.trirong-bold-italic {
  font-family: "Trirong", serif;
  font-weight: 700;
  font-style: italic;
}

.trirong-extrabold-italic {
  font-family: "Trirong", serif;
  font-weight: 800;
  font-style: italic;
}

.trirong-black-italic {
  font-family: "Trirong", serif;
  font-weight: 900;
  font-style: italic;
}
.athiti-extralight {
  font-family: "Athiti", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.athiti-light {
  font-family: "Athiti", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.athiti-regular {
  font-family: "Athiti", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.athiti-medium {
  font-family: "Athiti", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.athiti-semibold {
  font-family: "Athiti", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.athiti-bold {
  font-family: "Athiti", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@font-face {
	font-family: 'Arabica';
	src: url('../fonts/Arabica/eot/Arabica.eot');
	src: local('☺'), url('../fonts/Arabica/woff/Arabica.woff') format('woff'), url('../fonts/Arabica/ttf/Arabica.ttf') format('truetype'), url('../fonts/Arabica/svg/Arabica.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	
}
@font-face {
	font-family: 'Chocolateteehaypai';
	src: url('../fonts/Chocolateteehaypai/eot/Chocolateteehaypai.eot');
	src: local('☺'), url('../fonts/Chocolateteehaypai/woff/Chocolateteehaypai.woff') format('woff'), url('../fonts/Chocolateteehaypai/ttf/Chocolateteehaypai.ttf') format('truetype'), url('../fonts/Chocolateteehaypai/svg/Chocolateteehaypai.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	
}
.text-arabica{
  font-family: 'Arabica';
}
.text-chocolateteehaypai{
  font-family: 'Chocolateteehaypai';
}
.text-kart-phetchabun{
  font-family: 'Kart-Phetchabun';
}

.bg-green{
  background-color: #defff0;
}
.bg-sky{
  background-color: #e2f9fe;
}
.bg-gsb{
  background-color: #ff47b2;
}
.bg-baac{
  background-color: #84b550;
}
.bg-blue{
  background-color: #323678;
}
.bg-blue-series{
  background: rgb(9,9,121);
  background: linear-gradient(180deg, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.bg-pink{
  background-color: #D31B88;
}
.bg-glo{
  background-color: #0093D3;
}
.bg-glo-series{
  background: rgb(0,147,211);
background: linear-gradient(180deg, rgba(0,147,211,1) 0%, rgba(0,211,118,1) 100%);
}
.bg-glo-lottery{
  background: rgb(71,212,255);
background: linear-gradient(180deg, rgba(71,212,255,1) 0%, rgba(46,154,249,1) 100%);
}
.bg-hungsang{
  background-color: #c44b4b;
}
.bg-japan{
  background-color: #c936a7;
}
.bg-russia{
 /*background: rgb(65,71,155);
background: linear-gradient(180deg, rgba(65,71,155,1) 37%, rgba(255,75,85,1) 100%);*/
background-color: #4754a1;
}
.bg-uk{
  background-color: #004487;
}
.bg-china{
  background-color:#910303;
}
.bg-germany{
  background-color:#8f591d;
}
.bg-korea{
  background-color:#94a321;
}
.bg-taiwan{
  background-color:#d67406;
}
.bg-singapore{
  background-color:#4d1a87;
}
.bg-usa{
  background-color: #ab851d;
}
.bg-egypt{
  background-color:#87273c;
}
.bg-india{
  background-color: #77c716;
}
.bg-malaysia{
  background-color: #4B7395;
}
.text_gradient{
  background: -webkit-linear-gradient(#2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-gd{
  background: rgb(252,252,252);
background: linear-gradient(180deg, rgba(252,252,252,0) 0%, rgba(139,139,139,1) 100%);
}
.btn-square{
  min-width: 160px;
  min-height: 160px;
}
.bg-usav{
  background-color:#a61f24;
}
.bg-usastar{
  background-color: #335e54;
}
.text-shadow{
  text-shadow: 2px 2px #333333;
}
.text-shadow-white{
  text-shadow: 2px 2px #ffffff;
}