@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

* {
  font-family: "Noto Sans Thai", serif;
  font-optical-sizing: auto;
}


footer {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 8px;
	background-color: rgba(0, 0, 0, 0.8);
	/* position: absolute; */
	/* bottom: 0; */
	text-align: center;
	color: #fcfcfc;
}
footer p {
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 5px;
	font-size: 10px;
	text-align: center;
	margin-bottom: 0;
}
.sub-footer a{
	font-size: 12px;
	text-decoration: none;
	color: #fff;
	transition: 0.1s;
	margin-bottom: 5px;
}
.sub-footer a:hover {
	color: #fec644;
}
footer img {
	margin-top: 5px;
}
/* Main Navbar */
.navbar-brand {
	padding: 0;
}
.main-navbar {
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 3px 3px 0px rgba(7, 0, 2, 0.25);
	padding-top: 2px;
	padding-bottom: 2px;
}
.main-navbar .navbar-nav .nav-link {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin-left: 15px;
	margin-right: 15px;
}
.main-navbar .navbar-nav .nav-link span {
	display: block;
	font-size: 12px;
	font-weight: 500;
}
.main-navbar .navbar-nav .nav-link:hover {
	color: #fec644;
}
.main-navbar .navbar-nav .nav-link.active {
	color: #fec644;
}
.navbar-end a {
	margin-left: 10px;
	margin-right: 10px;
}
.navbar-end a:hover {
	filter: brightness(140%);
	transform: scale(103%);
}

/* Social */
.social-container {
	position: fixed;
	right: 0;
	top: 30%;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 5px 0px 5px 5px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	z-index: 3;
}
.social-branch {
	position: absolute;
    right: 60px;
    top: 2px;
}
.social-group {
	position: relative;
	background-color: rgba(255, 255, 255, 0.5);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}
.social-group a {
	margin-bottom: 5px;
	display: block;
	transition: 0.1s;
}
.social-group a:hover {
	filter: brightness(110%);
	transform: scale(108%);
}
.support-fixed {
	position: fixed;
	right: 0;
	top: 55%;
	z-index: 3;
}
.support-fixed a {
	display: block;
	transition: 0.1s;
}
.support-fixed a:hover {
	filter: brightness(110%);
	transform: scale(104%);
}

/* ================================= */
/*          Media queries           */
/* =============================== */

@media (max-width: 1399.98px) { 

	/* Section 1 */
	.milest-normal {
		padding-top: 35px;
	}
	/* Section 3 */
	.news-title {
		font-size: 12px;
	}
	.news-date {
		font-size: 10px;
	}
}
@media (max-width: 1199.98px) { 

}
@media (max-width: 991.98px) {
	body {
		background-size: auto;
	}
	.navbar-toggler {
		display: none;
	}
	.navbar-collapse {
		display: none;
	}
	/* Social */
	.social-group a img {
		width: 30px;
	}
	.social-branch {
		position: absolute;
		right: 0px;
		top: -44px;
	}
	.support-fixed {
		position: fixed;
		right: 0;
		top: auto;
		z-index: 3;
		bottom: 64px;
	}
	.social-container {
		top: auto;
		bottom: 146px;
	}
	/* Navbar */
	.navbar-toggler {
		background-color: #ffffff3a;
		border: 0px;
	}
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
	.navbar-toggler:focus {
		box-shadow: none;
	}
	.main-navbar .navbar-nav .nav-link {
		text-align: right;
	}
	.navbar-end {
		/* justify-content: end; */
		/* flex-direction: column; */
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.navbar-end img {
		height: 30px;
	}
	.navbar-end a {
		/* align-self: flex-end; */
		margin-left: 5px;
		margin-right: 5px;
	}
	.navbar-regiter-btn {
		margin-bottom: 0px;
	}
	.navbar-brand img {
		width: 120px;
	}
	/* Nav Mobile */
	.navbar-mobile {
        display: block;
        position: fixed;
        bottom: 0;
        z-index: 99999;
        background-color: #121212;
    }
	.warper-nav-mb {
        align-items: center;
        /* height: 80px; */
		padding-top: 7px;
        padding-bottom: 7px;
        justify-content: space-evenly;
    }
	.mobile-col a {
		font-size: 12px;
		font-weight: 700;
		text-align: center;
		margin-left: 15px;
		margin-right: 15px;
		color: #fff;
		text-decoration: none;
		line-height: 16px;
	}
	.navbar-mobile a {
		text-align: center;
		padding: 2px 5px;
        border-radius: 4px;
		position: relative;
		z-index: 1;
		transition: 0s;
	}
	.navbar-mobile .nav-link.active {
		color: #121212;
        background-color: #fec644;
        padding: 2px 5px;
        border-radius: 4px;
		font-weight: 700;
		position: relative;
		z-index: 1;
	}
	.navbar-mobile .nav-link.active::before {
		content: "";
		position: absolute;
		left: -6px;
		height: 24px;
		width: 24px;
		top: 20%;
		background-color: #fec644;
		border-radius: 12px;
		z-index: -1;
	}
	.navbar-mobile .nav-link.active::after {
		content: "";
		position: absolute;
		right: -6px;
		top: 20%;
		height: 24px;
		width: 24px;
		background-color: #fec644;
		border-radius: 12px;
		z-index: -1;
	}
	.navbar-mobile .nav-link:hover,
	.box-nav-more:hover {
		color: #121212;
        background-color: #fec644;
        padding: 2px 5px;
        border-radius: 4px;
		position: relative;
		transition: 0s;
	}
	.navbar-mobile .nav-link:hover::before,
	.box-nav-more:hover::before {
		content: "";
		position: absolute;
		left: -6px;
		height: 24px;
		width: 24px;
		top: 20%;
		background-color: #fec644;
		border-radius: 12px;
		z-index: -1;
		transition: 0s;
	}
	.navbar-mobile .nav-link:hover::after,
	.box-nav-more:hover::after {
		content: "";
		position: absolute;
		right: -6px;
		top: 20%;
		height: 24px;
		width: 24px;
		background-color: #fec644;
		border-radius: 12px;
		z-index: -1;
		transition: 0s;
	}
	.box-nav-more {
		font-size: 12px;
		font-weight: 700;
		text-align: center;
		margin-left: 15px;
		margin-right: 15px;
		color: #fff;
		text-decoration: none;
	}
	footer {
		margin-bottom: 44px;
	}
}
@media (max-width: 767.98px) {
	.social-container {
        top: auto;
        bottom: 190px;
    }
    .support-fixed {
        bottom: 137px;
    }
}
@media (max-width: 575.98px) {
    /* Social */
    .social-group {
        padding-bottom: 2px;
    }
    .social-group a img {
        width: 20px;
    }
	.social-container {
        top: auto;
        bottom: 190px;
    }
    .support-fixed {
        bottom: 137px;
    }
    .support-fixed img {
        width: 100px;
    }

}