@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');
@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: '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');
}


body {
	font-family: "IBM-Regular";
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p {
	font-family: var(--bs-font-secondary);
}
.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-family: 'Trirong-Extra' !important;
}

.font-text-bold {
	font-family: 'IBM-Medium' !important;
}

.font-footer {
	font-family: 'IBM-SemiBold' !important;
}

.font-footer-address {
	font-family: 'IBM-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-outline-primary {
	background-color: #fff !important;
	color: var(--bs-primary) !important;
	border: 1px solid var(--bs-primary)!important;
}

.btn-secondary {
	background-color: var(--bs-secondary) !important;
	color: #333 !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-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-grey {
	background-color: var(--bs-gray) !important;
	color: #666 !important;
	border: 1px solid var(--bs-gray)!important;
}




.bg-primary { background-color: var(--bs-primary)!important; }
.bg-secondary { background-color: var(--bs-secondary)!important; }
.bg-tertiary { background-color: var(--bs-tertiary)!important; }
.bg-tone-01 { background-color: var(--bs-tone-01)!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-yellow { background-color: var(--bs-yellow)!important; }

.text-primary { color: var(--bs-primary) !important; }
.text-secondary {	color: var(--bs-secondary) !important; }
.text-tertiary {	color: var(--bs-tertiary) !important; }
.text-muted {	color: var(--bs-muted) !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-tone-16 { color: var(--bs-tone-16)!important; }
.text-grey { color: var(--bs-gray-dark)!important; }

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

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

.p-6 { padding: 4rem; }
.p-7 { padding: 5rem; }
.p-8 { padding: 6rem; }
.p-9 { padding: 7rem; }
.p-10 { padding: 8rem; }

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

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

.fw-400 { font-weight: 400; }
.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; }
	.p-md-6 { padding: 4rem !important; }
}

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

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}