@font-face {
    font-family: PromptRegular;
    src: url(../assets/fonts/prompt/PromptRegular.eot);
    src: url(../assets/fonts/prompt/PromptRegular.eot) format("embedded-opentype"), url(../assets/fonts/prompt/PromptRegular.woff2) format("woff2"), url(../assets/fonts/prompt/PromptRegular.woff) format("woff"), url(../assets/fonts/prompt/PromptRegular.ttf) format("truetype"), url(../assets/fonts/prompt/PromptRegular.svg#PromptRegular) format("svg");
}

@font-face {
    font-family: "NotoSerifThai";
    src: url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.eot);
    src: url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.eot) format("embedded-opentype"), url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.woff2) format("woff2"), url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.woff) format("woff"), url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.ttf) format("truetype"), url(../assets/fonts/Noto/NotoSerifThai_SemiCondensedRegular.svg#NotoSerifThai_SemiCondensedRegular) format("svg");
}

@font-face {
    font-family: NotoSansThai;
    src: url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.eot);
    src: url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.eot) format("embedded-opentype"), url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.woff2) format("woff2"), url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.woff) format("woff"), url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.ttf) format("truetype"), url(../assets/fonts/Noto_Sans/NotoSansThai_ExtraCondensedRegular.svg#NotoSansThai_ExtraCondensedRegular) format("svg");
}

header {
    background-image: url(../assets/images/Pictrue.png);
    background-position: 50%;
}

header .wrap {
    align-items: center;
    padding: 0 30px;
}

header .wrap img {
    height: 60px;
}

header .wrap .nav {
    margin-right: 20px;
}

header .wrap .nav .nav-link {
    color: #617f78;
    font-size: 22px;
    font-weight: 600;
}

header .wrap .nav .nav-link.active,
header .wrap .nav .nav-link:hover {
    background-color: hsla(0, 0%, 100%, .4);
    border: 1px solid #fff;
    border-radius: 15px;
    color: #617f78;
}

header .wrap .nav .nav-item {
    margin-right: 10px;
}

header .wrap .login {
    background-color: hsla(0, 0%, 60%, .1);
    border: 1px solid #fff;
    border-radius: 15px;
    color: #617f78;
    font-size: 20px;
    font-weight: 600;
}

header .wrap .login.active,
header .wrap .login:hover {
    background-color: hsla(0, 0%, 100%, .4);
    border: 1px solid #fff;
    border-radius: 15px;
    color: #617f78
}

header .line-header {
    background-color: #576d68;
    height: 25px
}

footer {
    background-image: url(../assets/images/Pictrue.png);
    background-position: top;
    color: #1a222f
}

footer .btn-primary {
    background-color: #394b46;
    border-color: #394b46
}

footer .text-body-secondary {
    color: #1a222f!important
}

footer p {
    color: #515a67;
    font-size: 16px;
    margin-bottom: 0
}

#myBtn {
    background-color: #576d68;
    border: none;
    border-radius: 100px;
    bottom: 50px;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 30px;
    height: 50px;
    outline: none;
    padding: 7px;
    position: fixed;
    right: 30px;
    width: 50px;
    z-index: 99
}

#myBtn:hover {
    background-color: #555
}

body {
    color: #515a67;
    font-family: PromptRegular, sans-serif;
    font-size: 18px
}

.text-bg-primary {
    background-color: #394b46!important
}

.carousel-item img {
    border-radius: 15px
}

.app {
    background-image: url(../assets/images/App.png);
    background-position: 0 100%
}

.app .title {
    color: #394b46;
    font-size: 48px;
    margin-bottom: 10px
}

.app .title img {
    width: 50px
}

.btn-app {
    background-color: #eef6f5;
    border: 1px solid #eef6f5;
    border-radius: 15px;
    color: #617f78
}

.btn-app.active,
.btn-app:hover {
    background-color: #aecac4;
    border: 1px solid #aecac4;
    color: #617f78
}

.title {
    color: #617f78;
    font-size: 48px
}

.title-darkGreen {
    color: #394b46;
    font-size: 48px
}

.title-dark {
    color: #1a222f;
    font-size: 32px
}

a.total {
    border-radius: 15px;
    padding: 10px 20px
}

a.total:hover {
    background-color: #e9f0f9;
    border: 1px solid #e9f0f9
}

a.total {
    color: #515a67
}

.align-center {
    align-items: center;
    display: flex
}

.news .news-title {
    color: #282828;
    display: -webkit-box;
    font-size: 24px;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis
}

.news img {
    border-radius: 16px
}

.news .news-detial {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -moz-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis
}

.news .news-more {
    color: #8d97a8;
    font-size: 14px;
    font-weight: 600
}

.img-fix {
    aspect-ratio: 6/4
}

.FAQ .accordion .accordion-item {
    border: 1px solid #e9f0f9;
    border-left: none;
    border-right: none
}

.FAQ .accordion .accordion-item h1 {
    font-size: 30px
}

.FAQ .accordion .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.FAQ .accordion .accordion-button {
    background-color: transparent;
    color: #1a222f;
    font-size: 24px
}

.FAQ .accordion .accordion-button img {
    margin-right: 15px
}

.FAQ .accordion .accordion-button:focus {
    box-shadow: 0 0 0 .25rem rgba(128, 164, 156, .25)
}

.Download a.download {
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 1px 0 5px 0 rgba(174, 202, 196, .5);
    -webkit-box-shadow: 1px 0 5px 0 rgba(174, 202, 196, .5);
    -moz-box-shadow: 1px 0 5px 0 rgba(174, 202, 196, .5);
    color: #1a222f;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 12px 20px;
    text-decoration: none
}

.Download a.download img {
    height: 32px;
    margin-right: 15px;
    width: 32px
}

.Download a.download:hover {
    background-color: rgba(128, 164, 156, .247)
}

.Download a.download span {
    color: #8d97a8;
    font-size: 16px;
    margin-left: 15px
}

.Download a.download .text {
    align-items: center;
    display: flex;
    width: 90%
}

.btn-white {
    background-color: hsla(0, 0%, 100%, .137);
    border: 1px solid #fff;
    border-radius: 8px;
    color: #1a222f;
    font-size: 20px
}

.btn-white.active,
.btn-white:hover {
    background-color: hsla(0, 0%, 100%, .5);
    border: 1px solid #fff;
    color: #1a222f
}

.page-link {
    border: none;
    color: #394b46;
}

.active>.page-link, .page-link.active {
    background-color: var(--bs-gray);
}

.page-link:focus,
.page-link:hover {
    background-color: rgba(87, 109, 104, .533);
    border-radius: 4px;
    box-shadow: none;
    color: #fff
}

#top-button {
    background-color: #ff9800;
    border-radius: 4px;
    bottom: 30px;
    display: inline-block;
    height: 50px;
    opacity: 0;
    position: fixed;
    right: 30px;
    text-align: center;
    transition: background-color .3s, opacity .5s, visibility .5s;
    visibility: hidden;
    width: 50px;
    z-index: 1000
}

#top-button:after {
    color: #fff;
    content: "\f077";
    font-family: FontAwesome;
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    line-height: 50px
}

#top-button:hover {
    background-color: #333;
    cursor: pointer
}

#top-button:active {
    background-color: #555
}

#top-button.show {
    opacity: 1;
    visibility: visible
}
.link-div {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 10px;
    transition: 
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        padding 0.25s ease,
        margin 0.25s ease;
}

.link-div:hover {
    text-decoration: none;
    color: inherit;
    background-color: rgb(206, 217, 215);
    padding: 10px;
/*     margin: -8px; */
    border-radius: 12px;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1a3a1c;
  --bs-btn-border-color: #1a3a1c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3e6a22;
  --bs-btn-hover-border-color: #3e6a22;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a3a1c;
  --bs-btn-active-border-color: #1a3a1c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1a3a1c;
  --bs-btn-disabled-border-color: #1a3a1c;
}

.btn-alert {
	border: none !important;
	border-radius: 10px !important;
	font-weight: 500 !important;
	padding: .25rem 1.2rem !important;
}

.swal2-actions .btn-ok {
	background-color: red !important;
	color: #fff !important
}

.button-modal .btn-ok:hover {
	background-color: #ff5151;
}

.swal2-actions .btn-Cancle {
	background-color: #fff !important;
	border: 1px solid #1a3a1c !important;
	color: #1a3a1c !important;
}

.button-modal .btn-Cancle:hover {
	background-color: rgba(153, 165, 177, .2)
}

.text-Watermelon {
	color: #e03434 !important
}

.bg-Watermelon {
	background-color: #e03434 !important
}

.border-Watermelon {
	border: 1px solid #e03434 !important
}
.input-disabled-text {
	font-style: italic;
	color: gray;
}

/*# sourceMappingURL=main.css.map */