/* https://jsonformatter.org/scss-to-css */
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body {
	background-color: #141414;
	font-family: 'Noto Sans Thai', sans-serif;
}

.fa-snowflake {
	color: #fff;
	position: absolute;
	top: -20px;
	animation: fall linear forwards;
}

@keyframes fall {
	to {
		transform: translateY(105vh);
	}
}

.swal2-shown {
	overflow-y: auto;
}

.bg-top-home {
	position: absolute;
	top: 0;
	left: -17%;
	width: 65%;
	height: 100%;
	z-index: -1;
	background-color: #242526;
	-webkit-transform: skewX(
		-7deg
		);
	-moz-transform: skewX(-7deg);
	-ms-transform: skewX(-7deg);
	-o-transform: skewX(-7deg);
	transform: skewX(
		-7deg
		);
}

.w-40-rp {
	width: 40%;
}

.d-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 60px;
	grid-row-gap: 60px;
}

.d-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-columns: auto auto auto auto;
}

.d-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.warning-set {
	color: #fb3;
	background: #212121;
}

.warning-set:hover {
	color: #fff;
	background: #fb3;
}

.set-rp-rg {
	width: 50%;
}

.danger-set {
	color: #212121;
	background: #ff3547;
}

.danger-set:hover {
	color: #ff3547;
	background: #f1f1;
}

.text-set-nav {
	color: #000;
	border-radius: 2px;
	padding: 5px;
}

.text-set-nav:hover {
	color: #000;
	background: rgba(66, 66, 66, 0.26);
}

#manu-nav{
	display: none;
	top: 45px;
	background: #2b2b2b;
	border-top: 2px solid #fb3;
	border-bottom: 2px solid #fb3;
	text-align: center;
}

.de-nav {
	padding: 20px 0px;
	list-style-type: none;
}

.c-nav {
	color: #fff;
	font-size: 17px;
}

.c-nav:hover {
	color: #fb3;
}

.res-i:hover {
	color: #fb3;
}

.bg-dark {
	background-color: #212121 !important;
}


.card-shop {
	border: 2px solid #67736b;
	border-radius: 8px;
	box-shadow: 0 0 10px 1px #67736b;
}

a:hover {
	text-decoration: none;
}

.card-shop:hover {
	transform: scale(1.04);
}

.card-topup {
	border: 2px solid #67736b;
	border-radius: 5px;
	box-shadow: 0 0 10px 1px #67736b;
}

.card-topup:hover {
	transform: scale(1.04);
}

.topup-gift {
	height: 120px;
}

.shop-img {
	height: 300px;
}

.nav-left {
	height: 100%;
	width: 300px;
	position: absolute;
}

.d-link {
	color: #fff;
}

.d-link:hover {
	color: #adadad;
}

#area {
	position: absolute;
	width: 100%;
}

.icon-nav {
	border: 2px solid rgba(255,255,255,.4);
	top: 10px;
	right: 10px;
	position: absolute;
	border-radius: 2px;
	width: 28px;
}

.navadmin-fixed {
	top: 0;
	position: fixed;
    z-index: 1030;
}

.img-rs {
	margin-top: 50px;
	height: 350px;
	width: 90%;
}

.img-res {
	margin-top: 45px;
	height: 350px;
}

.d-grid-2-rs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.d-grid-575 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.img-shop {
	border-radius: 8px 8px 0 0;
    overflow: hidden;
    position: relative;
    min-height: 245px;
}

.img-shop img {
	width: 100%;
}

.d-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
@media (max-width: 1199px) {
	.d-grid-5 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 991px) {
	.bg-top-home {
		display: none;
	}

	.w-40-rp {
		width: 100%;
	}

	.d-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.set-rp-rg {
		width: 100%;
	}

	.d-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.d-grid-2-rs {
		grid-template-columns: 1fr;
	}
	.d-grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}


@media (max-width: 767px) {
	.d-grid-2 {
		grid-template-columns: 1fr;
	}
	.d-grid-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.d-grid {
		grid-template-columns: 1fr;
	}

	.topup-gift {
		height: 80px;
	}

	.shop-img {
		height: 250px;
	}

	.d-grid-4 {
		grid-template-columns: 1fr;
	}

	.img-rs {
		height: 300px;
	}

	.img-res {
		height: 250px;
	}

	.d-grid-575 {
		grid-template-columns: 1fr;
	}
	.d-grid-5 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.text-none {
		display: none;
	}
}

@media (max-width: 379px) {
	.text-none-sm {
		display: none;
	}
	.img-rs {
		height: 250px;
	}
}



.card-termgame {
	background-color: transparent !important;
}
.card-game img {
	transition-duration: .2s !important;
}
.card-game:hover img {
	transform: scale(1.1);
}

.card-tutor {
	border: solid 2px rgba(255, 255, 255, 0.245);
	border-radius: 10px;
	padding: 10px;
}

.card-tutor img {
	width: 100%;
	border-radius: 10px;
	/* padding: 5px; */
}


.bg-dark-2 {
	background-color: #212121 !important;
	transition-duration: .2s !important;
}

.bg-dark-2:hover {
	cursor: pointer;
	background-color: #454545 !important;
}