/* ==========================================================================
   layout.css — style dùng chung cho mọi trang dùng _LayoutCustom
   (reset, font, biến màu, section wrapper, nút CTA, icon link, footer,
   cơ chế fullpage-scroll). Style riêng của từng trang nằm ở css riêng của
   trang đó (vd. index.css), load qua @section Styles trong layout.
   ========================================================================== */

:root {
	--vtc-spacing-2: 0.5rem;
	--vtc-radius-lg: 0.5rem;

	--vtc-color-ink: #160a30;
	--vtc-color-primary: #8a3cd2;
	--vtc-color-primary-soft: rgba(138, 60, 210, 0.2);
	--vtc-color-accent: #b498e0;
	--vtc-color-muted: #9da3aa;
}

@font-face {
	font-family: "Beaufort";
	src: url("../fonts/BEAUFORT-REGULAR.TTF") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Beaufort";
	src: url("../fonts/BEAUFORT-ITALIC.TTF") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Beaufort";
	src: url("../fonts/Beaufort for LOL Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar {
	display: none;
}

body {
	margin: 0;
	font-family: "Beaufort", "Arial Black", "Segoe UI", sans-serif;
	/* Nền dự phòng cùng tông với các section/footer (thay vì trắng mặc định) — tránh lộ khoảng
	   trắng khi cuộn quá đà (rubber-band) trên mobile. */
	background-color: var(--vtc-color-ink);
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ảnh cần lấp đầy khung chứa (thay cho w-full của Tailwind) */
.img-full {
	width: 100%;
}

/* === section (full-height "trang" trong landing, dùng cho fullpage-scroll) === */
.page-section {
	position: relative;
	width: 100%;
	margin-top: -1.5rem;
}

.page-section:first-child {
	margin-top: 0;
}

/* wrapper nội dung bên trong 1 section: canh giữa, padding co giãn theo viewport */
.section-inner {
	width: 100%;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 1rem;
	padding-block: max(2.5rem, 6%);
	padding-inline: 0.5rem;
}

@media (min-width: 640px) {
	.section-inner {
		padding-block: max(2rem, 3%);
	}
}

@media (min-width: 1280px) {
	.section-inner {
		aspect-ratio: 1920 / 920;
		height: 100vh;
	}
}

/* === nút CTA dạng ảnh (Tải game / Đăng ký / Xem chi tiết...) === */
.btn-cta {
	display: block;
	width: 50%;
	min-width: 120px;
	max-width: 277px;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
}

@media (min-width: 640px) {
	.btn-cta {
		width: 30%;
	}
}

.btn-cta:hover {
	transform: scale(1.05);
}

.btn-cta:active {
	transform: scale(0.95);
}

/* === icon link nhỏ (mạng xã hội...) === */
.icon-link {
	display: block;
	width: 24px;
	height: 24px;
}

.icon-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Footer chung
   ========================================================================== */
.site-footer {
	width: 100%;
	background-color: var(--vtc-color-ink);
}

.site-footer__inner {
	width: 100%;
	position: relative;
	z-index: 0;
	display: grid;
	place-items: center;
	align-content: center;
	padding: 2.5rem 1rem;
	font-family: ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 640px) {
	.site-footer__inner {
		padding-block: 4%;
	}
}

.site-footer__title {
	margin: 0 0 1rem;
	color: var(--vtc-color-accent);
	font-weight: 700;
	font-size: 14px;
}

@media (min-width: 640px) {
	.site-footer__title {
		font-size: 18px;
	}
}

.site-footer__social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.site-footer__icon {
	display: block;
	transition: transform 0.3s ease-in-out;
}

.site-footer__icon img {
	width: 28px;
	height: 28px;
	aspect-ratio: 1 / 1;
}

.site-footer__icon:hover {
	transform: scale(1.1);
}

.site-footer__icon:active {
	transform: scale(0.95);
}

.site-footer__brand {
	width: 90%;
	max-width: 350px;
	margin-bottom: 1.5rem;
}

.site-footer__brand-logo {
	width: 65%;
	margin: 0 auto 1rem;
	display: block;
	pointer-events: none;
}

.site-footer__brand-publisher {
	width: 100%;
	display: block;
	pointer-events: none;
}

.site-footer__desc {
	margin: 0;
	max-width: 820px;
	margin-inline: auto;
	color: var(--vtc-color-muted);
	text-align: center;
	font-size: 13px;
}

@media (min-width: 640px) {
	.site-footer__desc {
		font-size: 1rem;
	}
}

@media (min-width: 768px) {
	.site-footer__desc {
		margin-bottom: 1.5rem;
	}
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-block: 1.5rem;
	font-size: 13px;
}

@media (min-width: 640px) {
	.site-footer__links {
		flex-direction: row;
		font-size: 1rem;
	}
}

.site-footer__link {
	text-transform: uppercase;
	color: var(--vtc-color-accent);
	text-decoration: underline;
	transition: opacity 0.3s ease-in-out;
}

.site-footer__link:hover {
	opacity: 0.8;
}

@media (min-width: 640px) {
	.site-footer__link--first {
		padding-right: 1.5rem;
		margin-right: 1.5rem;
		border-right: 1px solid var(--vtc-color-accent);
	}
}

.site-footer__contact {
	color: var(--vtc-color-muted);
	font-size: 13px;
}

@media (min-width: 640px) {
	.site-footer__contact {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		font-size: 1rem;
	}
}

.site-footer__contact p {
	margin: 0;
}

/* ==========================================================================
   Fullpage scroll (kiểu fullpage.js), chỉ bật ở màn hình lớn >=1280px (xl)
   ========================================================================== */
@media (min-width: 1280px) {
	html.fp-active,
	html.fp-active body {
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	html.fp-active #fp-wrapper {
		will-change: transform;
	}

	html.fp-active #fp-wrapper > section,
	html.fp-active #fp-wrapper > footer {
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		margin-top: 0 !important;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Nội dung bên trong mỗi "trang" cao đúng bằng section (100vh) -> không còn khoảng hở
	   trên/dưới (vd. video nền section-1 phủ kín toàn màn hình), nội dung bên trong tự canh giữa
	   nhờ .section-inner (place-items:center) sẵn có. Nếu nội dung thật sự cao hơn 1 màn hình,
	   assets/js/fullpage.js sẽ tự thu nhỏ (scale) vừa khít, không cắt mất phần nào. */
	html.fp-active #fp-wrapper > section > div,
	html.fp-active #fp-wrapper > footer > div {
		height: 100%;
		transform-origin: center center;
	}
}