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

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

body.active::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: black;
	opacity: 0.7;
	transition: 0.3s;
}

header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #fff;
	z-index: 999;
/*	overflow: hidden;*/
}


.main-header {
	padding: 1rem;
	margin: 0;
	border: 0;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.nav-name {
  padding: 10px 5px 5px;
  text-align: center;
  background-color: #5C8198;
  color: #ffffff;
}

.navbar {
  padding: 15px 50px;
}
@media (max-width: 991px) {
  .navbar {
    padding: 5px 20px;
  }
}

.logo-img {
	border-radius: 6px;
	height: 50px;
	margin-top: 0px;
	width: 50px;
}

.sep-btn {
	border-style: none;
	background-color: #5C8198;
	width: 100px;
	height: 40px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin: 0 auto;
}

.p-3 {
	padding: 1vw 4vw !important;
}

@media (min-width: 992px) {
	.container-fluid {
		gap: 5vw;
	}
}

.bg-body-tertiary {
	background-color: none;
	--bs-bg-opacity: 0;
}

.navbar-nav .nav-link {
	color: #404040;
	border-radius: 20px;
	margin: 0 10px;
	padding: 6px 16px !important;
	/* เพิ่มพื้นที่ด้านใน */
	background-color: #E1EAF1;
}

@media (max-width: 1100px) {
	.navbar-nav .nav-link {
		padding: 6px 7px !important;
		margin: 0 5px;
	}
}

@media (max-width: 991px) {
	.navbar-nav .nav-link {
		background: none;
	}
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: #1D2E45;
	border-radius: 20px;
	font-weight: bold;
}

.navbar-toggler {
	border-style: none;
	padding-right: 0px;
}

.navbar-toggler:focus {
	outline: none !important;
	border: none;
	box-shadow: none;
}

@media (max-width: 991px) {
	.navbar-collapse {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 992px) {
	.sidebar .close-sidebar {
		cursor: pointer;
		display: inline-block;
		position: absolute;
	}

	.open-sidebar {
		cursor: pointer;
		z-index: 998;
		background: #5C8198;
		position: fixed;
		left: 0px;
		top: 100px;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media (min-width: 992.5px) {

	.sidebar .close-sidebar,
	.open-sidebar {
		display: none;
	}
}

.close-sidebar {
	right: 10px;
	top: 15px;
}

.drop-shadow {
	box-shadow: -2px 4px 10px -4px rgba(0, 0, 0, 0.43);
	-webkit-box-shadow: -2px 4px 10px -4px rgba(0, 0, 0, 0.43);
	-moz-box-shadow: -2px 4px 10px -4px rgba(0, 0, 0, 0.43);
}

footer {
	padding: 50px 50px;
	background: #BFD1DD;
}

@media (max-width: 991px) {
	footer {
		padding: 30px 25px;
	}
}

footer .footer {
	display: block;
	width: 100%;
	height: auto;
	padding-bottom: 0;
	position: relative;
	box-sizing: border-box;
}

footer hr {
	width: 100%;
	margin: 1vw auto;
}

footer .upper-text {
	margin-top: 30px;
	display: block;
}

footer .dla-logo img {
	width: 250px;
	height: auto;
}

@media (max-width: 768px) {
	footer .dla-logo img {
		margin-left: 0;
		width: 220px;
	}
}

footer .text-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1em;
}

footer .text-container p:not([class]) {
	font-size: 15.5px;
}

@media (max-width: 768px) {
	footer .text-container p:not([class]) {
		font-size: 14px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	footer .text-container {
		flex-direction: row;
		font-size: 16px;
	}

	footer .text-container p:not([class]) {
		font-size: 14px;
	}
}

footer .text-column {
	flex: 1 1 200px;
	text-align: left;
	box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1024px) {
	footer .text-column {
		flex: 1 1 50%;
	}
}

footer .text-column p {
	margin: 0.5em 0;
	color: #404040;
}

@media (min-width: 1024px) {
	footer .lower-text {
		display: flex;
		justify-content: center;
		margin: 25px 0;
	}

	footer .lower-text p {
		margin-bottom: 0;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	footer .lower-text {
		display: flex;
		justify-content: center;
		margin: 2vw 0;
	}

	footer .lower-text p {
		margin-bottom: 0;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	footer .lower-text {
		position: static;
		transform: none;
	}

	footer .lower-text p {
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	footer .badge-user {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	footer .badge-user {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

@media (max-width: 768px) {
	footer .badge-user {
		display: block;
	}
}

footer .footer-badges {
	display: flex;
	align-items: center;
	border-radius: 10px;
	display: flex;
	width: fit-content;
	gap: 12px;
}

footer .footer-badges img {
	width: 80px;
	height: auto;
}

@media (max-width: 767px) {
	footer .footer-badges img {
		width: 65px;
	}
}

footer .user {
	padding: 4px 12px;
	display: flex;
	align-items: self-end;
	background: white;
	border-radius: 8px;
	font-size: 14px;
	width: fit-content;
	gap: 15px;
	margin-top: 10px;
}

@media (max-width: 767px) {
	footer .user {
		font-size: 12px;
	}
}

footer .user .user-item {
	display: flex;
	align-items: center;
	vertical-align: middle;
	gap: 4px;
}

footer .user .user-item i {
	font-size: 19px;
	color: #3E5E74;
}

footer .user p {
	color: #404040;
	margin: 0;
}

footer .user img {
	width: 25px;
	height: auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
	footer .text-column:nth-child(3) {
		order: 1;
	}

	footer .text-column:nth-child(4) {
		order: 2;
	}
}

.fs48 {
	font-size: 48px;
}

.fs16 {
	font-size: 16px;
}

.fs14 {
	font-size: 14px;
}

.fs18 {
	font-size: 18px;
}

.fs14 {
	font-size: 14px;
}

.fs24 {
	font-size: 24px;
}

.fs20 {
	font-size: 20px;
}

.fs36 {
	font-size: 36px;
}

main {
	padding-top: 100px;
}

@media screen and (max-width: 991px) {
	main {
		padding-top: 77px;
	}
}

.box {
	margin-top: 20px;
}

.layout-wrapper {
	display: flex;
	min-height: 100vh;
	overflow: hidden;
	transition: all 0.3s ease;
	gap: 50px;
	padding: 30px 70px 0px 20px;
}

@media screen and (max-width: 991px) {
	.layout-wrapper {
		padding: 30px;
	}
}

.top-banner {
	width: auto;
	height: auto;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.top-banner {
		height: 250px;
	}
}

.top-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sidebar {
	width: auto;
	transition: all 0.3s ease;
}

@media (max-width: 991.5px) {
	.sidebar {
		position: absolute;
		left: -100%;
		top: 0;
		bottom: 0;
		z-index: 9999;
	}
}

@media (max-width: 991px) {
	.sidebar.active {
		padding-top: 67px;
		height: 100vh;
		overflow: hidden;
		left: 0;
		background: #FFF;
		position: fixed;
		z-index: 9999;
		-moz-box-shadow: 5px 1px 37px 0px rgba(0, 0, 0, 0.43);
		box-shadow: 5px 1px 10px 0px rgba(0, 0, 0, 0.43);
		-webkit-box-shadow: 5px 1px 18px 0px rgba(0, 0, 0, 0.43);
		-moz-box-shadow: 5px 1px 10px 0px rgba(0, 0, 0, 0.43);
	}
}

.sidebar-link {
	padding: 12px 16px;
	color: #777777;
	border-radius: 0;
	font-weight: normal;
	transition: all 0.2s;
	border-radius: 8px;
	gap: 12px;
}

.sidebar-link:hover,
.sidebar-link.active {
	background-color: #E1EAF1;
	color: #1D2E45;
}

.sidebar-link i {
	color: #3E5E74;
	width: 30px;
	font-size: 24px;
	text-align: center;
}

.close-sidebar {
	right: 13px;
}

.close-sidebar .fa-solid {
	font-size: 20px;
}

.content {
	flex: 1;
	transition: all 0.3s ease;
}

.sidebarImg {
	width: 32px;
	height: 32px;
}

@media (max-width: 991.5px) {
	.sidebar {
		position: absolute;
		left: -100%;
		top: 0;
		bottom: 0;
		z-index: 999;
	}
}

.main-text {
	font-size: 38px;
	margin-bottom: 0.25rem !important;
	font-weight: bold;
	line-height: 1.2;
	color: #3E5E74;
}

@media (max-width: 767px) {
	.main-text {
		font-size: 32px;
	}
}

.color-black {
	color: #545454 !important;
}

.main-secondary-text {
	font-size: 30px !important;
}

.view-all-wrapper {
	display: flex;
	align-items: flex-end;
}

.view-all-link {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	text-decoration: none;
	color: #404040;
}

.view-all-link i {
	font-size: 24px;
}

.max-width-img {
	width: 100%;
	height: auto;
}

.paragraph p {
	font-size: 24px;
	color: #545454;
}

.section-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
	/* mb-3 */
	/* Responsive: ใช้ flex เริ่มที่ breakpoint lg */
	flex-direction: row;
}

@media (max-width: 767px) {
	.section-header {
		display: block;
	}
}

@media (max-width: 991.98px) {
	.section-header {
		flex-direction: row;
		/* สำหรับ d-sm-row */
	}
}

.group-news-box {
	display: flex;
	flex-direction: column;
}

@media (max-width: 1472px) {
	.news-box {
		display: flex !important;
		flex-direction: column !important;
	}
}

@media (max-width: 1519px) {
	.news-box .col-12 {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

.news-title {
	font-weight: 700;
	padding-right: 0;
}

@media (min-width: 992px) {
	.news-title {
		padding-left: 1.5rem;
	}
}

.news-highlight {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: center;
}

@media (min-width: 768px) {
	.news-highlight {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
}

@media (max-width: 600px) {
	.news-highlight a {
		text-align: center;
	}
}

.news-highlight img {
	width: 140px;
	height: auto;
	border-radius: 20px;
}

.news-text-block {
	padding-left: 1rem;
}

.news-text-block a {
	color: unset;
	text-decoration: none;
}

.news-text-block a:hover {
	color: #3E5E74;
}

.news-description {
	font-size: 0.875rem;
	padding-top: 0;
	padding-right: 0;
	margin-top: 0.5rem;
	color: #6c757d;
}

@media (min-width: 992px) {
	.news-description {
		padding-left: 1.5rem;
	}
}

.news-category {
	display: flex;
	gap: 0.5rem;
	font-size: 0.875rem;
	margin-top: 0.5rem;
}

@media (min-width: 992px) {
	.news-category {
		padding-left: 1.5rem;
	}
}

.news-sub-box .col img {
	width: 232px;
	height: 232px;
}

@media (min-width: 1369px) {
	.news-sub-box .col {
		flex: 0 0 auto !important;
		width: 25% !important;
	}
}

@media (max-width: 1369px) and (min-width: 625px) {
	.news-sub-box .col {
		flex: 0 0 auto !important;
		width: 50% !important;
	}
}

@media (max-width: 625px) {
	.news-sub-box .col {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

.card-news-category {
	display: flex;
	gap: 0.5rem;
	font-size: 0.875rem;
	margin-top: 0.5rem;
}

.card-news-category.card-news-category-has-bg {
	background: #5C8198;
	display: inline-flex;
	padding: 4px 10px;
	color: white;
}

.card-news-category.card-news-category-has-bg .categoty-text {
	color: white;
}

.card-news-category p {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.card-news-category {
		padding-left: 0rem;
	}
}

.ebook-box .col img {
	width: 220px;
	height: auto;
}

@media (min-width: 1369px) {
	.ebook-box .col {
		flex: 0 0 auto !important;
		width: 25% !important;
	}
}

@media (max-width: 1369px) and (min-width: 625px) {
	.ebook-box .col {
		flex: 0 0 auto !important;
		width: 50% !important;
	}
}

@media (max-width: 625px) {
	.ebook-box .col {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

.news-board-box {
	margin-top: 30px;
}

.ebook-box .row {
	gap: 25px;
}

@media (max-width: 767px) {
	.ebook-box .row {
		gap: 15px 0px;
	}
}

@media (max-width: 600px) {
	.ebook-box .row {
		justify-content: center;
	}
}

.ebook-board-box h5 {
	color: #545454;
}

.ebook-item .wrap-img {
	width: 140px;
	height: 170px;
	border-radius: 9px;
	overflow: hidden;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.ebook-item .wrap-img {
		margin-bottom: 20px;
	}
}

@media (max-width: 600px) {
	.ebook-item .wrap-img {
		margin: 0 auto;
		margin-bottom: 20px;
	}
}

.ebook-item .wrap-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ebook-image {
	border-radius: 12px;
	width: 220px;
	height: 313px;
}

.ebook-card {
	position: relative;
	width: 220px;
	height: 320px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
	.ebook-card {
		height: 250px;
		width: 170px;
	}
}

.ebook-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ebook-overlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.65);
	color: white;
	padding: 12px;
	box-sizing: border-box;
	text-align: center;
}

.ebook-title {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 4px;
	line-height: 1.3;
}

.ebook-category {
	font-size: 12px;
	opacity: 0.8;
	margin: 0;
}

.card-overlay-text {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	/* พื้นหลังมืดโปร่งใส */
	color: white;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

.ebook-pic-card {
	width: 140px;
	height: 190px;
	border-radius: 12px;
	object-fit: cover;
	/* ป้องกันภาพบิดเบี้ยว (แนะนำ) */
}

.icon-with-title img {
	width: 24px !important;
	height: auto !important;
}

.icon-with-title i {
	font-size: 20px;
	color: #3E5E74;
}

.icon-with-title.icon-with-title-has-bg {
	background: #5C8198;
	display: inline-flex;
	padding: 4px 10px;
	color: white;
}

.icon-with-title.icon-with-title-has-bg i {
	color: white;
}

.categoty-text {
	text-decoration: none;
	color: #3E5E74;
}

.news-box img {
	width: 460px;
	height: auto;
}

@media (max-width: 495px) {
	.news-box img {
		width: 98%;
	}
}

.book-icon img {
	max-width: 40px;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.book-icon i {
	font-size: 26px;
	color: #3E5E74;
}

.book-icon.book-icon-has-bg i {
	background-color: #BFD1DD;
	padding: 9px;
	border-radius: 7px;
	height: 44px;
}

.official-doc-link {
	color: #545454;
	text-decoration: none;
}

.official-doc-link:hover,
.official-doc-link:active {
	color: #1D2E45;
}

.scroll-btn {
	height: 35px;
	position: fixed;
	right: 12px;
	width: 35px;
	z-index: 9999;
	bottom: 50px;
	border-radius: 50px;
	background: #5C8198;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

.scroll-btn img {
	height: 20px;
}

.scroll-btn i {
	color: white;
	font-size: 20px;
}

.decorate-pagination {
	--bs-pagination-border-color: none;
	--bs-pagination-color: #5A6573;
	--bs-pagination-focus-color: white;
	--bs-pagination-focus-bg: #DD912E;
	--bs-pagination-focus-box-shadow: none;
	--bs-pagination-hover-color: white;
	--bs-pagination-hover-bg: #DD912E;
	--bs-pagination-hover-box-shadow: none;
}

.pagination {
	gap: 7px;
}

@media (max-width: 495px) {
	.pagination {
		gap: 0px;
	}
}

.pagination .page-item.prev i,
.pagination .page-item.next i {
	font-size: 24px;
	color: #545454;
}

.pagination .page-item .page-link {
	background: none;
}

.pagination .page-item.disabled .page-link {
	background: none;
}

.pagination .page-item.disabled i {
	color: #C0C0C0;
}

.pagination .page-item a:hover {
	background: none;
	color: #1D2E45;
}

.pagination .page-item.active a {
	background-color: #304D5F;
	border-radius: 5px;
}

.orange-box {
	background: #DD912E;
	padding: 6px 18px;
	display: inline-flex;
	font-size: 16px;
}

.orange-box a {
	text-decoration: none;
	color: #fff;
}

.orange-box a .label {
	font-size: 16px;
}

.three-img img:nth-of-type(3) {
	width: 550px;
	height: auto;
}

.backward-tab {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #545454;
	align-items: center;
	font-size: 16px;
	display: flex;
}

.backward-tab a {
	text-decoration: none;
	display: flex;
	align-items: center;
}

.backward-tab p {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#section2-1 {
	padding-left: 3rem;
}

hr {
	background-color: #3E5E74;
	height: 2px;
}

.expandIcon {
	width: 28px;
	height: 28px;
}

.subIcon {
	width: 24px;
	height: 24px;
}

.expand {
	font-size: 16px;
}

.expand .expand-btn {
	cursor: pointer;
	gap: 12px;
}

.expand i {
	color: #3E5E74;
	font-size: 28px;
	width: 28px;
	text-align: center;
}

.expand .sub-item {
	padding-left: 20px;
	gap: 8px;
}

.expand .sub-item i {
	font-size: 24px;
	width: 24px;
}

.expand .sub-sub-item {
	padding-left: 40px;
}

.sub-navbar {
	overflow: scroll;
}

.sub-navbar .menu-btn {
	color: #545454;
	background-color: #E1EAF1;
	transition: all 0.3s ease;
	width: 188px;
	height: 48px;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.sub-navbar .menu-btn img {
	height: 32px;
	width: 32px;
	margin-right: 8px;
}

.sub-navbar .menu-btn i {
	color: #3E5E74;
	font-size: 23px;
}

.sub-navbar .menu-btn:hover,
.sub-navbar .menu-btn:focus,
.sub-navbar .menu-btn:active,
.sub-navbar .menu-btn.active {
	background-color: #BFD1DD;
	border: #BFD1DD;
}

.sub-navbar .menu-btn-has-border {
	border: 1px solid #BFD1DD;
	background: none;
}

.title-with-icon img {
	width: 32px;
}

.title-with-icon label {
	color: #545454;
}

.single-content img {
	border-radius: 20px;
}

.news-highlight-v2 .title {
	margin-top: 20px;
}

.news-highlight-v2 img {
	width: 100%;
	border-radius: 15px;
}

@media (max-width: 575px) {
	.news-highlight-v2 img {
		width: 140px;
		margin: 0 auto;
		display: block;
	}
}

.news-highlight-v2 .news-text-block {
	padding-left: 0;
}

.news-highlight-v2 .categoty-text {
	color: #3E5E74;
}

.news-board-box-row {
	align-items: center;
}

.news-board-box-row .news-img {
	width: 100%;
	border-radius: 15px;
}

.news-board-box-row .categoty-text {
	color: #3E5E74;
}

.news-board-box-row .card-news-category p {
	padding-bottom: 0;
}
span.code {
	background-color: #3E5E74;
}
/*# sourceMappingURL=theme-template-1.css.map */