@import url('https://fonts.googleapis.com/css2?family=Trirong:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;600&display=swap');

@font-face {
	font-family: 'IBM-Regular';
	src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.ttf');
}

@font-face {
	font-family: 'Trirong-Extra';
	src: url('../fonts/Trirong/Trirong-ExtraBold.ttf');
}
@font-face {
    font-family: 'Prompt-Bold';
    src: url('../fonts/Prompt/Prompt-ExtraBold.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'IBM-Medium';
	src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.ttf');
}

@font-face {
	font-family: 'IBM-SemiBold';
	src: url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.ttf');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Sarabun-Regular';
    src: url('../fonts/Sarabun/Sarabun-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Sarabun-Light';
    src: url('../fonts/Sarabun/Sarabun-Light.ttf');
	font-weight: normal;
	font-style: normal;
}

body { 
	color: var(--bs-font-color);
	/* font-family: var(--bs-font-primary);  */
	font-family: 'Sarabun-Light';
	/* font-weight: normal;*/
	font-size: 1rem;
}
h1, .h1 {
	color: var(--bs-font-color);
	font-family: 'Prompt-Bold';
	font-weight: bold;
}
.cursor-pointer {	cursor: pointer; }

.font-pri { font-family: var(--bs-font-primary); }
.font-sec { font-family: var(--bs-font-secondary); }
.font-tri { font-family: var(--bs-font-tertiary); }

.font-text-normal {
	font-family: 'IBM-Regular' !important;
}

.font-header, .font-th-pri {
	font-family: 'Sarabun-Light' !important;
}

.font-text-bold {
	font-family: 'Sarabun-Light' !important;
}

.font-footer {
	font-family: 'Sarabun-Light' !important;
}

.font-footer-address {
	font-family: 'Sarabun-Regular' !important;
}


/*
 * Text & Background Colours
 */
.btn {
	font-family: var(--bs-font-button);
}
.btn-primary {
	background-color: var(--bs-primary) !important;
	color: #fff !important;
	border: 1px solid var(--bs-primary)!important;
}
.btn-primary2 {
	background-color: var(--bs-primary2) !important;
	color: #fff !important;
	border: 1px solid var(--bs-primary2)!important;
}
.btn-primary3 {
	background-color: var(--bs-primary3) !important;
	color: #fff !important;
	border: 1px solid var(--bs-primary3)!important;
}
.btn-outline-primary {
	background-color: #fff !important;
	color: var(--bs-primary) !important;
	border: 1px solid var(--bs-primary)!important;
}
.btn-outline-primary2 {
	background-color: #fff !important;
	color: var(--bs-primary2) !important;
	border: 1px solid var(--bs-primary2)!important;
}
.btn-outline-primary3 {
	background-color: #fff !important;
	color: var(--bs-primary3) !important;
	border: 1px solid var(--bs-primary3)!important;
}

.btn-secondary {
	background-color: var(--bs-secondary) !important;
	color: #fff !important;
	border: 1px solid var(--bs-secondary)!important;
}

.btn-light-gray {
	background-color: var(--bs-light-gray) !important;
	color: #000 !important;
	border: 1px solid var(--bs-light-gray)!important;
}

.btn-radius{
	border-radius: 50px !important;
}

.btn-secondary:hover {
	background-color:  #fff !important;
	color: var(--bs-secondary) !important;
	border: 1px solid  var(--bs-secondary)!important;
}
.btn-outline-secondary {
	background-color: #fff!important;
	color: var(--bs-secondary)!important;
	border: 1px solid var(--bs-secondary)!important;
}
.btn-secondary2 {
	background-color: var(--bs-secondary2) !important;
	color:  #fff!important;
	border: 1px solid var(--bs-secondary2)!important;
}

.btn-secondary2:hover {
	background-color:  #fff !important;
	color: var(--bs-secondary2) !important;
	border: 1px solid  var(--bs-secondary2)!important;
}
.btn-outline-secondary2 {
	background-color: #fff !important;
	color: var(--bs-secondary2)!important;
	border: 1px solid var(--bs-secondary2)!important;
}
.btn-tertiary {
	background-color: var(--bs-tertiary) !important;
	color: #fff !important;
	border: 1px solid var(--bs-tertiary)!important;
}
.btn-outline-tertiary {
	background-color: #fff !important;
	color: var(--bs-tertiary) !important;
	border: 1px solid var(--bs-tertiary)!important;
}

.btn-success{
	background-color: #31A75D !important;
	border-color: #31A75D !important;
	border-radius: 25px !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: #257d45 !important;
	border-color: #257d45 !important;
}

.btn-grey {
	background-color: var(--bs-gray) !important;
	color: #666 !important;
	border: 1px solid var(--bs-gray)!important;
}

.btn-close-modal {
	background-color: #EFEFEF !important;
	border-color: #CFCFCF !important;
}

.text-complete{
	color:#FFC06D !important;
}


.bg-dark { background-color: var(--bs-dark)!important; }
.bg-primary { background-color: var(--bs-primary)!important; }
.bg-primary2 { background-color: var(--bs-primary2)!important; }
.bg-primary3 { background-color: var(--bs-primary3)!important; }
.bg-secondary { background-color: var(--bs-secondary)!important; }
.bg-secondary2 { background-color: var(--bs-secondary2)!important; }
.bg-secondary3 { background-color: var(--bs-secondary3)!important; }
.bg-tertiary { background-color: var(--bs-tertiary)!important; }
.bg-tone-01 { background-color: #F4F4F4 !important; }
.bg-tone-02 { background-color: var(--bs-tone-02)!important; }
.bg-tone-03 { background-color: var(--bs-tone-03)!important; }
.bg-tone-04 { background-color: var(--bs-tone-04)!important; }
.bg-tone-05 { background-color: var(--bs-tone-05)!important; }
.bg-tone-06 { background-color: var(--bs-tone-06)!important; }
.bg-tone-07 { background-color: var(--bs-tone-07)!important; }
.bg-tone-08 { background-color: var(--bs-tone-08)!important; }
.bg-tone-09 { background-color: var(--bs-tone-09)!important; }
.bg-tone-10 { background-color: var(--bs-tone-10)!important; }
.bg-tone-11 { background-color: var(--bs-tone-11)!important; }
.bg-tone-12 { background-color: var(--bs-tone-12)!important; }
.bg-tone-13 { background-color: var(--bs-tone-13)!important; }
.bg-tone-14 { background-color: var(--bs-tone-14)!important; }
.bg-tone-15 { background-color: var(--bs-tone-15)!important; }
.bg-tone-16 { background-color: var(--bs-tone-16)!important; }
.bg-tone-17 { background-color: var(--bs-tone-17)!important; }
.bg-tone-18 { background-color: var(--bs-tone-18)!important; }
.bg-tone-19 { background-color: var(--bs-tone-19)!important; }
.bg-tone-20 { background-color: var(--bs-tone-20)!important; }
.bg-tone-21 { background-color: var(--bs-tone-21)!important; }
.bg-light-gray { background-color: var(--bs-light-gray)!important; }
.bg-unset { background: unset !important;}



.text-primary { color: var(--bs-primary) !important; }
.text-primary2 { color: var(--bs-primary2) !important; }
.text-primary3 { color: var(--bs-primary3) !important; }
.text-primary4 { color: var(--bs-primary4) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-secondary2 { color: var(--bs-secondary2) !important; }
.text-secondary3 { color: var(--bs-secondary3) !important; }
.text-tertiary { color: var(--bs-tertiary) !important; }
.text-muted { color: #6c757d !important;}
.text-tone-01 { color: var(--bs-tone-01)!important; }
.text-tone-02 { color: var(--bs-tone-02)!important; }
.text-tone-03 { color: var(--bs-tone-03)!important; }
.text-tone-04 { color: var(--bs-tone-04)!important; }
.text-tone-05 { color: var(--bs-tone-05)!important; }
.text-tone-06 { color: var(--bs-tone-06)!important; }
.text-tone-07 { color: var(--bs-tone-07)!important; }
.text-tone-08 { color: var(--bs-tone-08)!important; }
.text-tone-09 { color: var(--bs-tone-09)!important; }
.text-tone-10 { color: var(--bs-tone-10)!important; }
.text-tone-11 { color: var(--bs-tone-11)!important; }
.text-tone-12 { color: var(--bs-tone-12)!important; }
.text-tone-13 { color: var(--bs-tone-13)!important; }
.text-tone-14 { color: var(--bs-tone-14)!important; }
.text-tone-15 { color: var(--bs-tone-15)!important; }
.text-grey { color: var(--bs-dark-gray)!important; }
.text-light-grey { color: var(--bs-light-gray)!important; }
.text-medium-grey { color: var(--bs-medium-gray)!important; }

input[type=checkbox]:checked { background-color: var(--bs-primary)!important; }



.px-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.px-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.px-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.px-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.px-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

.pt-6 { padding-top: 4rem !important; }
.pt-7 { padding-top: 5rem !important; }
.pt-8 { padding-top: 6rem !important; }
.pt-9 { padding-top: 7rem !important; }
.pt-10 { padding-top: 8rem !important; }

.pb-6 { padding-bottom: 4rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.pb-8 { padding-bottom: 6rem !important; }
.pb-9 { padding-bottom: 7rem !important; }
.pb-10 { padding-bottom: 8rem !important; }

.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

.fw-400 { font-weight: 300; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-500 { font-weight: 800; }

.lh-3 { line-height: 3rem; }
.lh-35 { line-height: 3.5rem; }
.lh-4 { line-height: 4rem; }



@media (min-width: 576px) {

}

@media (min-width: 768px) {
	.lh-md-35 { line-height: 3.5rem; }
}

@media (min-width: 992px) {
	.lh-lg-35 { line-height: 3.5rem; }
	.py-lg-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {
	.container.live {
		max-width: 1170px !important;
	}
}