/*
Theme Name: Flatsome Child
Description: TKB247 child theme - blue mecha palette
Author: TKB247
Template: flatsome
Version: 3.1
*/

/* ====== FONT ====== */
@font-face {
	font-family: 'Linefont';
	font-style: normal;
	font-weight: 400;
	src: url('/wp-content/uploads/2026/04/fonts/LineFont-Rg.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'Linefont';
	font-style: normal;
	font-weight: 700;
	src: url('/wp-content/uploads/2026/04/fonts/LineFont-Bd.woff') format('woff');
	font-display: swap;
}

body, h1, h2, h3, h4, h5, h6, ul > li, p, a, button, input, select, textarea {
	font-family: 'Linefont', 'Sarabun', sans-serif;
}

/* ====== ROOT (BLUE MECHA PALETTE) ====== */
:root {
	--fs-color-primary: #0b3d91;
	--fs-color-secondary: #001233;
	--fs-experimental-link-color: #1e88ff;
	--fs-experimental-link-color-hover: #3b9eff;
	--primary-color: #0b3d91;
	--tkb-accent: #1e88ff;
	--tkb-accent-bright: #3b9eff;
	--tkb-deep: #001233;
	--tkb-darker: #000814;
	--tkb-yellow: #ffcc00;
}

/* ====== HTML/BODY BG ====== */
html {
	background-image: url('/wp-content/uploads/2026/04/site-bg.webp');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-color: #000814;
}
#wrapper, #main {
	background-color: rgba(0, 8, 30, 0.45);
}

/* ====== HEADER ====== */
.header-main {
	background: linear-gradient(180deg, #2563eb 0%, #0b3d91 50%, #001233 100%) !important;
}
.header-bottom {
	background: linear-gradient(180deg, #001233 0%, #000814 100%) !important;
}
.header-bg-color, .header-wrapper {
	background-color: #001233 !important;
}
.header-bottom-nav > li > a {
	color: #cfe3ff !important;
	font-weight: 700;
}
.header-bottom-nav > li.active > a,
.header-bottom-nav > li > a:hover {
	color: #3b9eff !important;
}
.header-bottom-nav .menu-item .nav-icon {
	color: #3b9eff;
}

/* Header CTA buttons */
.header-button .button.primary {
	background-color: #1e88ff !important;
	border-color: #1e88ff !important;
	color: #fff !important;
}
.header-button .button.is-outline {
	border-color: #3b9eff !important;
	color: #3b9eff !important;
}

/* ====== MARQUEE ANNOUNCEMENT ====== */
.gxt1 {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	margin: 14px 0;
	border-radius: 14px;
	background: linear-gradient(90deg, rgba(11, 61, 145, 0.92) 0%, rgba(0, 18, 51, 0.96) 100%);
	border: 1px solid rgba(60, 160, 255, 0.55);
	box-shadow: 0 0 18px rgba(60, 160, 255, 0.28), inset 0 0 12px rgba(0, 24, 60, 0.45);
	overflow: hidden;
	color: #e3f1ff;
}
.gxt1__label {
	flex-shrink: 0;
	font-weight: 700;
	color: #ffd84a;
	text-shadow: 0 0 6px rgba(255, 200, 0, 0.4);
	letter-spacing: 0.5px;
}
.gxt1__track {
	display: flex;
	gap: 60px;
	white-space: nowrap;
	animation: gxt1-scroll 28s linear infinite;
}
.gxt1__item {
	color: #cfe5ff;
	font-weight: 600;
}
@keyframes gxt1-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ====== GAME CARD GRID ====== */
.game-card {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	border: 2px solid rgba(60, 160, 255, 0.85);
	box-shadow:
		0 0 14px rgba(60, 160, 255, 0.45),
		0 0 28px rgba(30, 136, 255, 0.32),
		inset 0 0 14px rgba(0, 24, 60, 0.4);
	transition: transform .25s ease, box-shadow .25s ease;
}
.game-card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .35s ease;
}
.game-card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 0 20px rgba(80, 180, 255, 0.85),
		0 0 36px rgba(30, 136, 255, 0.6),
		0 0 50px rgba(0, 110, 220, 0.45);
}
.game-card:hover img {
	transform: scale(1.04);
}
.game-card::after {
	content: "เล่นเกม";
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%) translateY(20px);
	padding: 6px 18px;
	border-radius: 99px;
	background: linear-gradient(90deg, #3b9eff 0%, #1e88ff 100%);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	box-shadow: 0 4px 14px rgba(0, 60, 160, 0.45);
}
.game-card:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ====== FAQ BLOCK ====== */
.bg-1 {
	background: linear-gradient(135deg, rgba(11, 61, 145, 0.92) 0%, rgba(0, 8, 30, 0.96) 100%) !important;
	border: 1px solid rgba(120, 200, 255, 0.45);
	box-shadow: 0 0 28px rgba(60, 160, 255, 0.25), inset 0 0 18px rgba(0, 30, 70, 0.4);
	border-radius: 16px;
	padding: 28px;
	color: #e9f3ff;
}
.bg-1 h2, .bg-1 h3, .bg-1 h4, .bg-1 strong { color: #ffd84a; }
.bg-1 p, .bg-1 li { color: #e3eeff; line-height: 1.75; }

/* ====== FOOTER ====== */
.footer-1, .footer-2 {
	background: linear-gradient(180deg, #001233 0%, #000814 100%) !important;
	color: #cfe3ff;
}
.absolute-footer {
	background: #000610 !important;
	color: #8aa9d4;
}
.footer-1 a, .footer-2 a { color: #3b9eff; }

.heartbeat {
	animation: tkb-heartbeat 1.6s ease-in-out infinite;
}
@keyframes tkb-heartbeat {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.06); }
	50% { transform: scale(1); }
	75% { transform: scale(1.04); }
}

/* ====== STICKY BOTTOM BAR (replaces navstyle-modern plugin) ====== */
#tkb-footer-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: linear-gradient(180deg, #001233 0%, #000814 100%);
	border-top: 2px solid #3b9eff;
	box-shadow: 0 -4px 18px rgba(0, 80, 200, 0.35);
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	padding: 6px 4px;
}
#tkb-footer-bar a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 4px 2px;
	color: #cfe5ff;
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	transition: color .2s ease, transform .2s ease;
}
#tkb-footer-bar a img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: drop-shadow(0 0 4px rgba(60, 160, 255, 0.55));
}
#tkb-footer-bar a.active,
#tkb-footer-bar a:hover {
	color: #3b9eff;
}
#tkb-footer-bar a.is-center img {
	width: 46px;
	height: 46px;
	margin-top: -22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e88ff, #0b3d91);
	padding: 8px;
	box-shadow: 0 0 14px rgba(60, 160, 255, 0.7);
}
body { padding-bottom: 70px; }
@media (min-width: 850px) {
	#tkb-footer-bar { display: none; }
	body { padding-bottom: 0; }
}

/* ====== BUTTONS ====== */
.button.primary {
	background-color: #1e88ff;
	border-color: #1e88ff;
}
.button.primary:hover {
	background-color: #3b9eff;
	border-color: #3b9eff;
}
.button.success {
	background-color: #00c853;
	border-color: #00c853;
}
.button.is-outline {
	border-color: #3b9eff;
	color: #3b9eff;
}

/* ====== TEXT (preserve readability everywhere) ====== */
body, p, .ux_text, h1, h2, h3, h4, h5, h6 { color: #f0f6ff; }
.dark, .dark p { color: #f0f6ff !important; }
a { color: #3b9eff; }
a:hover { color: #80c0ff; }

.tkb-brand { color: var(--tkb-yellow); font-weight: 700; }

/* Page-title heading */
.entry-title, .page-title, .blog-archive .page-title {
	color: #f0f6ff;
}

/* Form elements */
input, select, textarea {
	background: rgba(0, 18, 51, 0.55);
	border: 1px solid rgba(60, 160, 255, 0.4);
	color: #f0f6ff;
}
input::placeholder { color: #7da6d4; }

/* Image rounded utility */
.img-border img {
	border-radius: 18px;
	box-shadow: 0 0 24px rgba(60, 160, 255, 0.4);
}

@media only screen and (max-width: 48em) {
	.gxt1 { font-size: 13px; padding: 8px 12px; }
	.bg-1 { padding: 18px; }
}