@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');
body {
	font-family: var(--bs-font-secondary);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p {
	font-family: var(--bs-font-primary);
}
.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); }

/*
 * 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-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border: 1px solid var(--bs-primary) !important;
    opacity: 0.8;
}
.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;
}
.btn-outline-triple {
    background-color: #ffffff !important;
    color: #757a7f !important;
    border: 1px solid #757a7f !important;
}
.btn-page,
.btn-page:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50% !important;
    color: var(--bs-primary);
    font-size: 0.9rem;
    padding: 0 !important;
}
.btn-page.active {
    background-color: var(--bs-primary);
    color: #ffffff;
}

#categoryBtn.show > i,
#sortSelect.show > i {
    transition: 0.5s;
    rotate: 180deg;
}


.bg-primary { background-color: var(--bs-primary)!important; }
.bg-secondary { background-color: var(--bs-blue-sparse)!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-blue-sparse)!important; }
.bg-tone-04 { background-color: var(--bs-blue-sparse)!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: #F2F2F2!important; }
.bg-tone-10 { background-color: #E3F6FB!important; }
.bg-tone-11 { background-color: var(--bs-tone-11)!important; }
.bg-tone-12 { background-color: var(--bs-blue-dark)!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-white)!important; }
.bg-tone-21 { background-color: var(--bs-tone-21)!important; }


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

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

.link {
    color: #000;
}
.link:hover {
    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: 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; }

.border-header {
    border: 3px solid var(--bs-primary);
    width: 64px;
    border-radius: 10px;
}

@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) {

}

.grid-course {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 25px;
}
.img-course {
    width: 100%;
    height:250px;
    object-fit: cover;
}
.img-course:hover {
    transition: transform 0.5s;
    transform: scale(1.2);
}

@media (max-width: 1399px) {
    .grid-course {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    }
}

@media (max-width: 997px) {
    .grid-course {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    }
}
@media (max-width: 1400px) {
    .img-course {
        height:300px;
    }
}
@media (max-width: 1200px) {
    .img-course {
        height:320px;
    }
}

@media (max-width: 1100px) {
    .img-course {
        height:300px;
    }
}
@media (max-width: 990px) {
    .img-course {
        height:230px;
    }
}

@media (max-width:800px) {
    .img-course {
        height:220px;
    }
}
@media (max-width: 767px) {

    .img-course {
        height:300px;
    }
}

@media (max-width: 600px) {

    .img-course {
        height:230px;
    }
}
@media (max-width: 400px) {

    .img-course {
        height:200px;
    }
}
@media (max-width: 767px) {

    .grid-course {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

    }
}

/* course.show start */
.grid-course-show {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.b-type-course {
	position: absolute;
    top: 8px;
    right: 16px;
    background-color: #DFE5EA;
    padding: 8px 15px;
    border-radius: 5px;
}

.img-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: bottom;
    border-radius: 50%;
}


/* this-wishlist start */
.this-wishlist {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    /* position: absolute; */
    padding: 10px;
    border-radius: 50%;
    color: #ffffff;
    background-color: #ffffff;
    width: 35px;
    height: 35px;
    border: 1px solid var(--bs-gray-dark);
    /* cursor: pointer;
    bottom: -10px;
    right: 5px; */
    margin: 5px;
}
.wishlist-option {
    position: unset;
    margin-right: 25px;
}
.this-wishlist i {
    color: var(--bs-gray-dark);
    font-size: 1.2rem;
}

.this-wishlist.active i {
    color: red;
    font-size: 1.2rem;
}

.this-wishlist:hover,
.this-wishlist i:hover {
    background-color: #f9e8e8;
    color: red;
}

/* this-wishlist end */

/* btn-wishlist start*/
.btn-wishlist {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 10px;
    border-radius: 50%;
    color: #ffffff;
    background-color: #ffffff;
    width: 35px;
    height: 35px;
    border: 1px solid var(--bs-gray-dark);
    cursor: pointer;
}
.btn-wishlist i {
    color: var(--bs-gray-dark);
    font-size: 1.2rem;
}

.btn-wishlist.active i {
    color: red;
    font-size: 1.2rem;
}

.btn-wishlist:hover,
.btn-wishlist i:hover {
    background-color: #f9e8e8;
    color: red;
}
/* btn-wishlist end*/

.text-1-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-2-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-3-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-4-line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-5-line {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-6-line {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-7-line {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-8-line {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-9-line {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-10-line {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* loading spinner */
.loading-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--bs-primary) 94%, #0000)
            top/9px 9px no-repeat,
        conic-gradient(#0000 30%, var(--bs-primary));
    -webkit-mask: radial-gradient(
        farthest-side,
        #0000 calc(100% - 9px),
        #000 0
    );
    animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}
.max-w-808 {
    max-width: 808px !important;
}
.max-w-1440 {
    max-width: 1440px !important;
}
.max-w-1920 {
    max-width: 1920px !important;
}


.banner-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}