@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    --main-color: #00C3FF;
    --main-2-color: #73FFFF;
    --main-3-color: #BBE3EF;
    --sub-color: #ECBCCC;
}

@font-face {
    font-family: 'PPSFontMed';
    src: url('./fonts/DB\ HeaventRounded\ Med\ v3.2.1.ttf');
}

@font-face {
    font-family: 'PPSFontRegular';
    src: url('./fonts/DB\ HeaventRoundedv3.2.1.ttf');
}

* {
    font-family: 'Sarabun', sans-serif;
    transition: all 0.3s;
    scroll-behavior: smooth;
}

.bg-animated {
    background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.carousel-indicators li {
    width: 35px;
    height: 35px;
    border: solid blueviolet 1px;
    border-radius: 50%;
}

.carousel-item.active > .header-coach, .carousel-item.active > .header-coach-2 {
    display: flex;
}

.header-home {
    min-height: 95vh;
    background-image: url('./images/bg-header-home-2.svg'), url('./images/bg-header-home-1.svg'), linear-gradient(to bottom, rgba(255,255,255,1), rgba(4,171,255,0.4));
    background-size: 60%, 30%, 100% 90%;
    background-position: 20% bottom, right bottom, top;
    background-repeat: no-repeat;
}

.header-coach {
    min-height: 100vh;
    background-image: url('./images/bg-header-coach-4.png'), url('./images/bg-header-coach-3.png'), url('./images/bg-header-coach-2.png'), url('./images/bg-header-coach-1.png');
    background-size: auto 80%, cover, cover, 100% 100%;
    background-position: bottom left, center, center, center;
    background-repeat: no-repeat;
}

.header-coach-2 {
    min-height: 100vh;
    background-color: #FECD62;
    background-image: url('./images/bg-header-object-left-center.png'), url('./images/bg-header-object-right-center.png'), url('./images/bg-header-object-bottom-left.png'), url('./images/bg-header-object-top-right.png'), url('./images/bg-header-dots-top-left.png'), url('./images/bg-header-dots-bottom-right.png'), url('./images/bg-header-2-bottom-left.png'), url('./images/bg-header-2-top-right.png');
    background-position: 5% center, 95% center, 32% 85%, 75% 20%, 5% 5%, 95% 95%, bottom left, top right;
    background-size: 15%, 15%, 12%, 6%, 15%, 15%, 30% 100%, 30% 100%;
    background-repeat: no-repeat;
}

.header-coach-2 .img-head-1 {
    height: 120px;
    max-width: 90%;
    object-fit: contain;
    object-position: center;
    margin-bottom: 20px;
}

.header-coach-2 .img-head-2 {
    height: 80px;
    max-width: 70%;
    object-fit: contain;
    object-position: center;
}

.header-beginner {
    min-height: 100vh;
    background-image: url('./images/bg-header-beginner-bottom-left.png'), url('./images/bg-header-beginner-bottom-right.png'), url('./images/bg-header-beginner-center-right.png'), url('./images/bg-header-beginner-1.png'), url('./images/bg-header-coach-1.png');
    background-size: 40%, 20%, 55%, 60%, 100% 100%;
    background-position: bottom left, 115% 95%, 120% 70%, 52% 23%, center;
    background-repeat: no-repeat;
}

.header-beginner h1 {
    font-size: 60px;
}

.header-home h1 {
    font-size: 60px;
}

.header-home h2 {
    font-size: 50px;
}

.header-prathom-1 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-clouds.png'), url('./images/bg-header-prathom-1-bottom-left.png'), url('./images/bg-header-prathom-1-bottom-right.png'), url('./images/bg-prathom.png');
    background-size: 40%, 50%, 30%, 100% 100%;
    background-position: 40% 25%, -4% bottom, right bottom, center;
    background-repeat: no-repeat;
}

.header-prathom-2 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-2-bottom-center.svg'), url('./images/bg-header-prathom-2-bottom-left.svg'), url('./images/bg-header-prathom-2-bottom-right.svg'), url('./images/bg-header-prathom-2-clouds.svg'), url('./images/bg-header-prathom-2-bottom_1.svg'), url('./images/bg-prathom.png');
    background-size: 40%, 10%, 10%, 60%, 100% auto, 100% 100%;
    background-position: center 98%, 2% 110%, 102% bottom, center 20%, center bottom, center;
    background-repeat: no-repeat;
}

.header-prathom-3 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-3-bottom-right.svg'), url('./images/bg-header-prathom-3-clouds.svg'), url('./images/bg-header-prathom-3-bottom.svg'), url('./images/bg-prathom.png');
    background-size: 40%, 70%, 100% auto, 100% 100%;
    background-position: 95% 90%, center 30%, bottom center, center;
    background-repeat: no-repeat;
}

.header-prathom-4 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-4-bottom-center.png'), url('./images/bg-header-prathom-4-center.png'), url('./images/bg-prathom-4.png');
    background-size: 100% auto, 100% 100%, 100% 100%;
    background-position: bottom center, center, center;
    background-repeat: no-repeat;
}

.header-prathom-5 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-5-bottom-right.png'), url('./images/bg-header-prathom-5-bottom-center-2.png'), url('./images/bg-header-prathom-5-bottom-left.png'), url('./images/bg-header-prathom-5-school.svg'), url('./images/bg-header-prathom-5-bottom.svg'), url('./images/bg-prathom.png');
    background-size: 30%, 25%, 25%, 20%, 100%, 100% 100%;
    background-position: right bottom, 70% bottom, 2% bottom, 35% 80%, center bottom, center;
    background-repeat: no-repeat;
}

.header-prathom-6 {
    min-height: 100vh;
    background-image: url('./images/bg-header-prathom-6-bottom-right.svg'), url('./images/bg-header-prathom-6-bottom-left.svg'), url('./images/bg-header-prathom-6-factory.svg'), url('./images/bg-prathom.png');
    background-size: auto 100%, auto 140%, auto 120%, 100% 100%;
    background-position: right bottom, left bottom, right center, center;
    background-repeat: no-repeat;
}

.header-matthayom-1 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-1-bottom-center.png'), url('./images/bg-header-matthayom-1-bottom.png'), url('./images/bg-header-matthayom.png');
    background-size: 30%, 100% auto, cover;
    background-position: center 110%, center bottom, center;
    background-repeat: no-repeat;
}

.header-matthayom-2 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-2-bottom-center.svg'), url('./images/bg-header-matthayom-2-bottom.svg'), url('./images/building-left.svg'), url('./images/building-right.svg'), url('./images/bg-header-matthayom.png');
    background-size: 28%, 100% auto, auto 70%, auto 70%, cover;
    background-position: center 95%, center bottom, left bottom, right bottom, center;
    background-repeat: no-repeat;
}

.header-matthayom-3 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-3-center-bottom.svg'), url('./images/bg-header-matthayom-3-main.png'), url('./images/bg-header-matthayom.png');
    background-size: 15%, 100% auto, cover;
    background-position: center bottom, center bottom, center;
    background-repeat: no-repeat;
}

.header-matthayom-4 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-4-graph-right.png'), url('./images/bg-header-matthayom-4-graph-left.png'), url('./images/bg-header-matthayom-4-bottom-center.png'), url('./images/bg-header-matthayom-4-bottom.png'), url('./images/bg-header-matthayom.png');
    background-size: 20%, 20%, 15%, 100% auto, cover;
    background-position: 20% 95%, 80% 95%, center 98%, center bottom, center;
    background-repeat: no-repeat;
}

.header-matthayom-5 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-5-center-bottom.png'), url('./images/bg-header-matthayom-bottom.svg'), url('./images/bg-header-matthayom-bottom-left.svg'), url('./images/bg-header-matthayom-bottom-right.svg'), url('./images/bg-header-matthayom.png');
    background-size: 40%, 95% auto, auto 40%, auto 40%, cover;
    background-position: center 87%, center bottom, left bottom, right bottom, center;
    background-repeat: no-repeat;
}

.header-matthayom-6 {
    min-height: 100vh;
    background-image: url('./images/bg-header-matthayom-6-bottom-center.png'), url('./images/bg-header-matthayom-bottom.svg'), url('./images/bg-header-matthayom-bottom-left.svg'), url('./images/bg-header-matthayom-bottom-right.svg'), url('./images/bg-header-matthayom.png');
    background-size: 70%, 95% auto, auto 40%, auto 40%, cover;
    background-position: right bottom, center bottom, left bottom, right bottom, center;
    background-repeat: no-repeat;
}

.header-lecturer {
    min-height: 100vh;
    background-image: url('./images/bg-header-lecturer-arrow.svg'), url('./images/bg-header-lecturer-bottom-left.svg'), url('./images/bg-header-lecturer-bottom-right.png'), linear-gradient(to right, #ad9bee 50%, #c9bdf4 50%), url('./images/bg-header-lecturer.svg');
    background-size: 20%, auto 60%, auto 60%, 44% 26.75%, cover;
    background-position: center bottom, left bottom, right bottom, center bottom, center;
    background-repeat: no-repeat;
}

.header-military {
    min-height: 100vh;
    background-image: url('./images/bg-header-military-militaries.svg'), url('./images/bg-header-military-car.svg'), url('./images/bg-header-military-plain.png'), url('./images/bg-header-military-chopper-2.png'), url('./images/bg-header-military-chopper-1.png'), url('./images/bg-header-military-tank.svg'), url('./images/bg-header-military-bottom-left.png'), linear-gradient(to right, #429c40, #429c40), url('./images/bg-header-military-ship.svg'), url('./images/bg-header-military-bottom-right.svg'), url('./images/bg-header-military-bottom-left-earth.svg'), url('./images/bg-header-military.svg');
    background-size: 30%, 15%, 8%, 8%, 8%, 15%, 30%, 100% 15%, 20%, auto 50%, 35%, cover;
    background-position: 70% 105%, right 80%, 35% 8%, 80% 40%, 25% 55%, 30% 90%, left bottom, center bottom, left 83%, right bottom, left bottom, center;
    background-repeat: no-repeat;
}

.header-udomsuksa {
    min-height: 100vh;
    background-image: url('./images/bg-header-udomsuksa-left-bottom.png'), url('./images/bg-header-udomsuksa-center-bottom.png'), url('./images/bg-header-udomsuksa-right-bottom.png'), url('./images/bg-header-udomsuksa.svg');
    background-size: auto 80%, 20%, auto 80%, cover;
    background-position: left bottom, center 90%, right bottom, center;
    background-repeat: no-repeat;
}

.header-prathom-1 h1, .header-prathom-2 h1, .header-prathom-3 h1, .header-prathom-4 h1, .header-prathom-5 h1, .header-prathom-6 h1, .header-matthayom-1 h1, .header-matthayom-2 h1, .header-matthayom-3 h1, .header-matthayom-4 h1, .header-matthayom-5 h1, .header-matthayom-6 h1, .header-military h1 {
    font-size: 60px;
}

.header-lecturer h1 {
    font-size: 50px;
}

.header-udomsuksa h1 {
    font-size: 45px;
    font-weight: bold;
}

.header-prathom-4 .content {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 25px;
}

.navbar-coach {
    background-color: rgba(255, 255, 255, 0.3);
}

.btn-banner-regis,
.btn-banner-login {
    color: white;
    border: none;
}

.btn-banner-regis {
    background: rgb(255, 213, 227);
    background: linear-gradient(135deg, rgb(255, 174, 201) 0%, rgba(239, 135, 255, 1) 100%);
}

.btn-banner-login {
    background: rgb(25, 219, 252);
    background: linear-gradient(135deg, rgba(25, 219, 252, 1) 0%, rgba(45, 159, 205, 1) 30%);
}

ul.header-social {
    position: absolute;
    right: 25px;
    top: 40%;
    list-style: none;
}

ul.header-social>li {
    margin-bottom: 15px;
}

ul.header-social>li>a {
    color: white;
}

ul.header-social>li>a>i{
    -webkit-text-stroke: 0.5px rgba(128, 179, 255, 0.5);
    -webkit-text-fill-color: white;
}

span.sub-h3 {
    font-size: 25px;
}

.bg-main {
    background: rgb(25, 219, 252);
    background: linear-gradient(340deg, rgba(25, 219, 252, 1) 0%, rgba(45, 159, 205, 1) 100%);
}

.bg-main-animated {
    background: rgb(25, 219, 252);
    background: linear-gradient(340deg, rgba(25, 219, 252, 1) 0%, rgba(45, 159, 205, 1) 100%);
	background-size: 400% 400%;
	animation: gradient 3s ease infinite;
}

.bg-main-2 {
    background-color: var(--main-2-color);
}

.bg-main-2-animated {
    background: rgb(25, 219, 252);
    background: linear-gradient(340deg, rgb(128, 255, 213) 0%, rgb(92, 201, 183) 100%);
	background-size: 400% 400%;
	animation: gradient 3s ease infinite;
}

.bg-main-3 {
    background-color: var(--main-3-color);
}

.bg-main-3-animated {
    background: rgb(25, 150, 252);
    background: linear-gradient(340deg, rgb(128, 179, 255) 0%, rgb(92, 148, 201) 100%);
	background-size: 400% 400%;
	animation: gradient 3s ease infinite;
}

.bg-sub {
    background: rgb(255, 213, 227);
    background: linear-gradient(340deg, rgb(255, 174, 201) 0%, rgba(239, 135, 255, 1) 100%);
}

.bg-sub-animated {
    background: rgb(255, 213, 227);
    background: linear-gradient(340deg, rgb(255, 174, 201) 0%, rgba(239, 135, 255, 1) 100%);
	background-size: 400% 400%;
	animation: gradient 3s ease infinite;
}

.card-header {
    display: flex;
    text-align: center;
}

.card-header.card-2 {
    height: 85px;
}

.card-header.card-3 {
    height: 115px;
}

.card-header.card-4 {
    height: 145px;
}

p.card-text {
    font-size: 1rem;
}

.text-main {
    color: var(--main-color);
}

.text-main-2 {
    color: var(--main-2-color);
}

.text-main-3 {
    color: var(--main-3-color);
}

.text-sub {
    color: var(--sub-color);
}

.btn-main {
    background-color: var(--main-color);
    color: white;
}

.btn-main-2 {
    background-color: var(--main-2-color);
    color: white;
}

.btn-main-3 {
    background-color: var(--main-3-color);
    color: white;
}

.btn-sub {
    background-color: var(--sub-color);
    color: white;
}

h5.card-title {
    line-height: 30px;
}

section.full-height {
    min-height: 100vh;
    display: flex;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#CourseInfo > h5 {
    line-height: 30px;
}

.list-style-none {
    list-style: none;
}

.list-style-none > li {
    margin-bottom: 7px;
    font-size: 20px;
}

footer .list-style-none > li {
    font-size: 16px;
}

#BookStore {
    background-image: url('./images/bg-new-shelf.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.shelf-bg {
    border-radius: 25px;
    background-color: #f9f3ee;
    padding: 50px 0;
}

.book-stand {
    background-image: url('./images/bg-new-stand.png');
    background-repeat: no-repeat;
    background-size: 100% 30%;
    background-position: center bottom;
    padding-bottom: 70px;
    /* display: flex; */
}

.book-stand a {
    margin-top: auto;
}

.book-stand a > img:hover {
    transform: scale(1.2);
}

#bookShelf  div.item img {
    height: 200px;
}

#bookShelf  div.item img:hover {
    transform: scale(1.2);
}

#bookShelf .owl-carousel .owl-stage {
    padding-top: 25px;
    padding-bottom: 25px;
}

#bookShelf .owl-carousel .owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
}

#bookShelf .owl-carousel .owl-nav .owl-next, #bookShelf .owl-carousel .owl-nav .owl-prev {
    background-color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 50px;
    margin: 0;
    line-height: 0;
    position: absolute;
}

#bookShelf button:hover, #bookShelf button:hover {
    color: var(--main-color) !important;
}

#bookShelf .owl-carousel .owl-nav .owl-next {
    padding-left: 5px !important;
    right: 0;
}

#bookShelf .owl-carousel .owl-nav .owl-prev {
    padding-right: 5px !important;
    left: 0;
}

footer h4.text-logo {
    line-height: 35px;
}

#udomsuksaSection {
    position: absolute;
    right: 110px;
    top: 200px;
}

#udomsuksaSection h2 {
    font-size: 50px;
}

.section-adult {
    background-color: #5167B3;
    color: white;
}

.section-adult h2 {
    font-size: 40px;
    margin-bottom: 0;
}

.section-adult #SectionLecturer, .section-adult #SectionMilitary, .section-adult #SectionCoach {
    min-height: 50vh;
}

.section-adult #SectionLecturer h5 {
    font-size: 16px;
}

.section-adult #SectionMilitary h5 {
    font-size: 26px;
    margin-bottom: 0;
}

.section-adult #SectionCoach h5 {
    font-size: 25px;
    margin-bottom: 0;
}

#SectionLecturer {
    background-image: url('./images/lecturer-image.svg');
    background-size: auto 80%;
    background-position: left bottom;
    background-repeat: no-repeat;
}

#SectionMilitary {
    background-image: url('./images/military-image.svg'), url('./images/military-2-image.svg');
    background-size: auto 70%, 100%;
    background-position: center bottom, center 60%;
    background-repeat: no-repeat;
}

#SectionCoach {
    background-image: url('./images/coach-image.svg');
    background-size: auto 80%;
    background-position: right bottom;
    background-repeat: no-repeat;
}

a.navbar-brand > img {
    height: 80px;
}

/* Mobile XL */
@media only screen and (max-width: 768px) {
    .book-stand {
        padding-bottom: 38px;
    }

    .header-prathom-1 h1, .header-prathom-2 h1, .header-prathom-3 h1, .header-prathom-4 h1, .header-prathom-5 h1, .header-prathom-6 h1, .header-matthayom-1 h1, .header-matthayom-2 h1, .header-matthayom-3 h1, .header-matthayom-4 h1, .header-matthayom-5 h1, .header-matthayom-6 h1, .header-military h1 {
        font-size: 30px;
    }

    .header-prathom-1 h2, .header-prathom-2 h2, .header-prathom-3 h2, .header-prathom-4 h2, .header-prathom-5 h2, .header-prathom-6 h2, .header-matthayom-1 h2, .header-matthayom-2 h2, .header-matthayom-3 h2, .header-matthayom-4 h2, .header-matthayom-5 h2, .header-matthayom-6 h2, .header-military h2 {
        font-size: 20px;
    }

    .header-matthayom-3 {
        display: flex;
    }

    .header-home h1 {
        font-size: 40px;
    }

    .header-home h2 {
        font-size: 36px;
    }

    .header-home {
        min-height: 85vh;
        background-size: 100%, 60%, 100% 90%;
    }

    #udomsuksaSection {
        position: static;
    }

    #SectionMilitary {
        background-size: auto 70%, auto 115%;
        background-position: center bottom, center top;
    }

    footer .list-style-none > li {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .header-lecturer h1 {
        font-size: 45px;
    }

    .header-prathom-1 {
        background-size: 100%, 90%, 100%, 100% 100%;
        background-position: 40% 25%, -40% bottom, right bottom, center;
    }
    
    .header-prathom-2 {
        background-size: 60%, 15%, 15%, 100%, 100% auto, 100% 100%;
        background-position: center 98%, 2% 102%, 103% 102%, center 20%, center bottom, center;
    }
    
    .header-prathom-3 {
        background-size: 90%, 150%, auto 70%, auto 100%;
        background-position: 95% 90%, center 30%, bottom center, center;
    }
    
    .header-prathom-4 {
        background-image: url('./images/bg-header-prathom-4-bottom-center.png'), url('./images/bg-prathom-4.png');
        background-size: 100% auto, auto 200%;
        background-position: bottom center, center top;
    }
    
    .header-prathom-5 {
        background-size: 60%, 70%, 50%, 50%, 300%, 100% 100%;
        background-position: 140% bottom, 50% bottom, -20% bottom, 50% 85%, center bottom, center;
    }
    
    .header-prathom-6 {
        background-size: 120% auto, 120% auto, auto 150%, 100% 100%;
        background-position: right bottom, left bottom, 75% 45%, center;
    }

    .header-lecturer {
        background-size: 20%, auto 25%, auto 25%, 0%, cover;
        background-position: center bottom, left bottom, right bottom, center bottom, center;
    }

    .header-coach {
        background-size: 95% auto, cover, cover, 100% 100%;
        background-position: bottom left, center, center, center;
    }

    .header-matthayom-1 {
        background-size: 90%, 100% auto, cover;
        background-position: center 112%, center bottom, center;
    }
    
    .header-matthayom-2 {
        background-size: 90%, 100% auto, 90% auto, 100% auto, cover;
        background-position: center bottom, center bottom, left bottom, right bottom, center;
    }
    
    .header-matthayom-3 {
        background-size: 40%, 170% auto, cover;
        background-position: center bottom, center bottom, center;
    }
    
    .header-matthayom-4 {
        background-size: 30%, 30%, 55%, auto 30%, cover;
        background-position: 5% 75%, 95% 75%, center bottom, center bottom, center;
    }
    
    .header-matthayom-5 {
        background-size: 80%, auto 20%, auto 30%, auto 30%, cover;
        background-position: center 85%, center bottom, left bottom, right bottom, center;
    }
    
    .header-matthayom-6 {
        background-size: 90%, auto 20%, auto 30%, auto 30%, cover;
        background-position: right bottom, center bottom, left bottom, right bottom, center;
    }

    .header-udomsuksa {
        background-size: 35% auto, 25%, 40% auto, cover;
        background-position: left bottom, center 85%, right bottom, center;
    }

    .header-udomsuksa h1 {
        font-size: 35px;
    }

    .header-udomsuksa h2 {
        font-size: 20px;
    }

    .header-military {
        background-size: 60%, 25%, 30%, 30%, 30%, 35%, 30%, 100% 15%, 50%, auto 50%, 70%, cover;
        background-position: 97% 105%, 97% 76%, 10% 10%, 110% 35%, -10% 45%, 2% 90%, left bottom, center bottom, -10% 78%, right bottom, left 60%, center;
    }

    .header-prathom-4 .content {
        background-color: rgba(255, 255, 255, 0);
    }

    .header-beginner {
        background-size: 110% auto, 40%, 85%, 150%, 100% 100%;
        background-position: 168% bottom, 115% 85%, 150% 50%, right 23%, center;
    }
}

/* Mobile XS */
@media only screen and (max-width: 320px) {
    .book-stand {
        padding-bottom: 17px;
    }

    a.navbar-brand > img {
        height: 50px;
    }

    .header-home h1 {
        font-size: 40px;
    }

    .header-home h2 {
        font-size: 36px;
    }

    .header-home {
        min-height: 85vh;
        background-size: 100%, 60%, 100% 90%;
    }

    #udomsuksaSection {
        position: static;
    }

    #SectionMilitary {
        background-size: auto 70%, auto 115%;
        background-position: center bottom, center top;
    }

    .list-style-none > li {
        margin-bottom: 20px;
    }
    
    footer .list-style-none > li {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .header-prathom-1 h1, .header-prathom-2 h1, .header-prathom-3 h1, .header-prathom-4 h1, .header-prathom-5 h1, .header-prathom-6 h1, .header-matthayom-1 h1, .header-matthayom-2 h1, .header-matthayom-3 h1, .header-matthayom-4 h1, .header-matthayom-5 h1, .header-matthayom-6 h1, .header-military h1 {
        font-size: 26px;
    }

    .header-prathom-1 h2, .header-prathom-2 h2, .header-prathom-3 h2, .header-prathom-4 h2, .header-prathom-5 h2, .header-prathom-6 h2, .header-matthayom-1 h2, .header-matthayom-2 h2, .header-matthayom-3 h2, .header-matthayom-4 h2, .header-matthayom-5 h2, .header-matthayom-6 h2, .header-military h2 {
        font-size: 18px;
    }

    .header-lecturer h1 {
        font-size: 45px;
    }

    .header-prathom-1 {
        background-size: 100%, 90%, 100%, 100% 100%;
        background-position: 40% 25%, -40% bottom, right bottom, center;
    }
    
    .header-prathom-2 {
        background-size: 60%, 15%, 15%, 100%, 100% auto, 100% 100%;
        background-position: center 98%, 2% 102%, 103% 102%, center 20%, center bottom, center;
    }
    
    .header-prathom-3 {
        background-size: 90%, 150%, auto 70%, auto 100%;
        background-position: 95% 90%, center 30%, bottom center, center;
    }
    
    .header-prathom-4 {
        background-image: url('./images/bg-header-prathom-4-bottom-center.png'), url('./images/bg-prathom-4.png');
        background-size: 100% auto, auto 200%;
        background-position: bottom center, center top;
    }
    
    .header-prathom-5 {
        background-size: 60%, 70%, 50%, 50%, 300%, 100% 100%;
        background-position: 140% bottom, 50% bottom, -20% bottom, 50% 85%, center bottom, center;
    }
    
    .header-prathom-6 {
        background-size: 120% auto, 120% auto, auto 150%, 100% 100%;
        background-position: right bottom, left bottom, 75% 45%, center;
    }

    .header-lecturer {
        background-size: 20%, auto 25%, auto 25%, 0%, cover;
        background-position: center bottom, left bottom, right bottom, center bottom, center;
    }

    .header-coach {
        background-size: 95% auto, cover, cover, 100% 100%;
        background-position: bottom left, center, center, center;
    }

    .header-matthayom-1 {
        background-size: 90%, 100% auto, cover;
        background-position: center 112%, center bottom, center;
    }
    
    .header-matthayom-2 {
        background-size: 90%, 100% auto, 90% auto, 100% auto, cover;
        background-position: center bottom, center bottom, left bottom, right bottom, center;
    }
    
    .header-matthayom-3 {
        background-size: 40%, 170% auto, cover;
        background-position: center bottom, center bottom, center;
    }
    
    .header-matthayom-4 {
        background-size: 30%, 30%, 55%, auto 30%, cover;
        background-position: 5% 75%, 95% 75%, center bottom, center bottom, center;
    }
    
    .header-matthayom-5 {
        background-size: 80%, auto 20%, auto 30%, auto 30%, cover;
        background-position: center 85%, center bottom, left bottom, right bottom, center;
    }
    
    .header-matthayom-6 {
        background-size: 90%, auto 20%, auto 30%, auto 30%, cover;
        background-position: right bottom, center bottom, left bottom, right bottom, center;
    }

    .header-udomsuksa {
        background-size: 35% auto, 25%, 40% auto, cover;
        background-position: left bottom, center 85%, right bottom, center;
    }

    .header-udomsuksa h1 {
        font-size: 35px;
    }

    .header-udomsuksa h2 {
        font-size: 20px;
    }

    .header-military {
        background-size: 60%, 25%, 30%, 30%, 30%, 35%, 30%, 100% 15%, 50%, auto 50%, 70%, cover;
        background-position: 97% 105%, 97% 76%, 10% 10%, 110% 35%, -10% 45%, 2% 90%, left bottom, center bottom, -10% 78%, right bottom, left 60%, center;
    }

    .header-prathom-4 .content {
        background-color: rgba(255, 255, 255, 0);
    }

    .header-beginner {
        background-size: 110% auto, 40%, 85%, 150%, 100% 100%;
        background-position: 168% bottom, 115% 85%, 150% 50%, right 23%, center;
    }
}