/*
Theme Name: ThanTai88
Author: Trần Quốc Bảo
Description: Chủ đề WordPress đánh giá nhà cái phong cách sòng bạc hiện đại dành cho thị trường Việt Nam. Bố cục gồm: thanh đầu trang cố định với logo, menu gấp gọn và hai nút ĐĂNG NHẬP / ĐĂNG KÝ; trang chủ với banner hero toàn cảnh, tiêu đề đánh giá động, lưới biểu tượng trò chơi, khu quảng cáo poster, danh sách bài viết mới, khối hỏi đáp FAQ dạng xếp; trang bài viết đơn với cột nội dung và thanh bên; chân trang nhiều cột kèm khối pháp lý 18+ và hai nút kêu gọi hành động nổi cố định ở đáy màn hình. Nền tối than đá với điểm nhấn đỏ - vàng kim bão hòa cao.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thantai88
Tags: dark, entertainment, review, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   ThanTai88 — "Saigon Casino Noir" : đá đen, đỏ máu, vàng kim
   ============================================================ */

:root {
	--zqvkx-ink: #0b0908;
	--zqvkx-panel: #151110;
	--zqvkx-panel2: #1d1815;
	--zqvkx-velvet: #241a14;
	--zqvkx-gold: #f6b51e;
	--zqvkx-gold2: #ffd76a;
	--zqvkx-red: #e8112d;
	--zqvkx-red2: #ff3b52;
	--zqvkx-text: #f0e9df;
	--zqvkx-mut: #9c9084;
	--zqvkx-line: rgba(246, 181, 30, 0.16);
	--zqvkx-shadow-red: 0 10px 34px -8px rgba(232, 17, 45, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--zqvkx-ink);
	background-image:
		radial-gradient(1100px 520px at 85% -8%, rgba(232, 17, 45, 0.14), transparent 62%),
		radial-gradient(900px 480px at 8% 18%, rgba(246, 181, 30, 0.07), transparent 58%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 9px);
	color: var(--zqvkx-text);
	font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--zqvkx-gold2); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--zqvkx-gold); }
ul, ol { list-style: none; }

.zqvkx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Đầu trang ---------- */
.zqvkx-top {
	position: sticky; top: 0; z-index: 90;
	background: rgba(11, 9, 8, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--zqvkx-line);
}
.zqvkx-top-row { display: flex; align-items: center; gap: 18px; min-height: 66px; position: relative; }
.zqvkx-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.zqvkx-logo img { height: 44px; width: auto; }
.zqvkx-nav { flex: 1 1 auto; }
.zqvkx-nav-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.zqvkx-nav-list li a {
	display: block; padding: 8px 14px;
	font-weight: 600; font-size: 14px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--zqvkx-text);
	border: 1px solid transparent; border-radius: 3px;
}
.zqvkx-nav-list li a:hover,
.zqvkx-nav-list li.current-menu-item a,
.zqvkx-nav-list li.current-cat a {
	color: var(--zqvkx-gold2);
	border-color: var(--zqvkx-line);
	background: rgba(246, 181, 30, 0.06);
}
.zqvkx-auth { display: flex; gap: 10px; flex: 0 0 auto; }
.zqvkx-btn {
	display: inline-block; padding: 10px 20px;
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif;
	font-size: 13px; letter-spacing: .05em;
	color: #fff; background: var(--zqvkx-red);
	background-image: linear-gradient(180deg, var(--zqvkx-red2) 0%, var(--zqvkx-red) 55%, #b40d24 100%);
	border: 0; border-radius: 4px; cursor: pointer;
	box-shadow: var(--zqvkx-shadow-red);
	text-transform: uppercase;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.zqvkx-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 40px -8px rgba(232, 17, 45, 0.7); }
.zqvkx-btn-ghost {
	background: transparent; background-image: none;
	color: var(--zqvkx-gold2);
	border: 1px solid var(--zqvkx-gold);
	box-shadow: none;
}
.zqvkx-btn-ghost:hover { color: var(--zqvkx-ink); background: var(--zqvkx-gold); }
.zqvkx-burger {
	display: none; flex: 0 0 auto;
	background: transparent; border: 1px solid var(--zqvkx-line);
	color: var(--zqvkx-gold2); font-size: 22px; line-height: 1;
	padding: 8px 12px; border-radius: 4px; cursor: pointer;
}

/* ---------- Hero ---------- */
.zqvkx-hero {
	position: relative; overflow: hidden;
	border-bottom: 2px solid var(--zqvkx-gold);
}
.zqvkx-hero-img { width: 100%; display: block; object-fit: cover; max-height: 460px; }
.zqvkx-hero-veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,9,8,.25) 0%, rgba(11,9,8,.05) 40%, rgba(11,9,8,.9) 96%);
	pointer-events: none;
}
.zqvkx-hero-copy { position: relative; margin-top: -130px; padding-bottom: 34px; }
.zqvkx-hero-kicker {
	display: inline-block; padding: 5px 14px; margin-bottom: 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: var(--zqvkx-ink); background: var(--zqvkx-gold);
	transform: skewX(-8deg);
}
.zqvkx-h1 {
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif;
	font-size: clamp(28px, 4.6vw, 54px);
	line-height: 1.12; text-transform: uppercase;
	color: #fff;
	text-shadow: 0 3px 0 rgba(232, 17, 45, .45), 0 10px 30px rgba(0, 0, 0, .6);
	max-width: 22ch;
}
.zqvkx-h1 em { font-style: normal; color: var(--zqvkx-gold2); }
.zqvkx-hero-sub { margin-top: 14px; max-width: 62ch; color: #d8cfc3; font-size: 17px; }
.zqvkx-hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Tiêu đề khối ---------- */
.zqvkx-blockhead { display: flex; align-items: baseline; gap: 16px; margin: 46px 0 24px; flex-wrap: wrap; }
.zqvkx-blockhead h2 {
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif;
	font-size: clamp(20px, 2.6vw, 30px);
	text-transform: uppercase; color: var(--zqvkx-gold2);
	position: relative; padding-left: 18px;
}
.zqvkx-blockhead h2::before {
	content: ""; position: absolute; left: 0; top: .18em; bottom: .1em; width: 6px;
	background: linear-gradient(180deg, var(--zqvkx-red), var(--zqvkx-gold));
	transform: skewX(-12deg);
}
.zqvkx-blockhead p { color: var(--zqvkx-mut); font-size: 14px; margin-left: auto; }

/* ---------- Lưới biểu tượng trò chơi ---------- */
.zqvkx-games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zqvkx-game {
	position: relative; text-align: center; padding: 26px 14px 22px;
	background: linear-gradient(180deg, var(--zqvkx-panel2), var(--zqvkx-panel));
	border: 1px solid var(--zqvkx-line); border-radius: 8px;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.zqvkx-game:hover { transform: translateY(-6px); border-color: var(--zqvkx-gold); box-shadow: 0 16px 34px -14px rgba(246, 181, 30, .35); }
.zqvkx-game img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; border: 2px solid var(--zqvkx-line); }
.zqvkx-game b { display: block; font-size: 15px; letter-spacing: .03em; color: var(--zqvkx-text); }
.zqvkx-game span { display: block; margin-top: 4px; font-size: 12px; color: var(--zqvkx-mut); }
.zqvkx-game-go {
	display: inline-block; margin-top: 12px; padding: 6px 16px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--zqvkx-red2); border: 1px solid var(--zqvkx-red);
	border-radius: 999px;
}
.zqvkx-game:hover .zqvkx-game-go { color: #fff; background: var(--zqvkx-red); }

/* ---------- Poster quảng cáo ---------- */
.zqvkx-posters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.zqvkx-poster {
	position: relative; display: block; overflow: hidden;
	border: 1px solid var(--zqvkx-line); border-radius: 8px;
}
.zqvkx-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.zqvkx-poster:hover img { transform: scale(1.045); }
.zqvkx-poster-tag {
	position: absolute; left: 14px; bottom: 14px;
	padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: rgba(232, 17, 45, .9);
	transform: skewX(-8deg);
}

/* ---------- Danh sách bài viết ---------- */
.zqvkx-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zqvkx-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--zqvkx-panel);
	border: 1px solid var(--zqvkx-line); border-radius: 8px;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.zqvkx-card:hover { transform: translateY(-5px); border-color: rgba(232, 17, 45, .55); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8); }
.zqvkx-card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.zqvkx-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zqvkx-card-cat {
	position: absolute; left: 10px; top: 10px;
	padding: 3px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--zqvkx-ink); background: var(--zqvkx-gold);
}
.zqvkx-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.zqvkx-card-body h3 { font-size: 16px; line-height: 1.4; }
.zqvkx-card-body h3 a { color: var(--zqvkx-text); }
.zqvkx-card-body h3 a:hover { color: var(--zqvkx-gold2); }
.zqvkx-card-ex { margin-top: 8px; font-size: 13.5px; color: var(--zqvkx-mut); flex: 1; }
.zqvkx-card-meta {
	margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--zqvkx-line);
	display: flex; justify-content: space-between; align-items: center;
	font-size: 12px; color: var(--zqvkx-mut);
}
.zqvkx-card-meta a { color: var(--zqvkx-red2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.zqvkx-empty {
	padding: 44px 24px; text-align: center; color: var(--zqvkx-mut);
	border: 1px dashed var(--zqvkx-line); border-radius: 8px; grid-column: 1 / -1;
}

/* ---------- Phân trang ---------- */
.zqvkx-pager { margin: 42px 0 8px; text-align: center; }
.zqvkx-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zqvkx-pager .page-numbers {
	display: inline-block; min-width: 40px; padding: 8px 12px;
	font-weight: 700; font-size: 14px; color: var(--zqvkx-text);
	background: var(--zqvkx-panel2); border: 1px solid var(--zqvkx-line); border-radius: 4px;
}
.zqvkx-pager .page-numbers.current { color: var(--zqvkx-ink); background: var(--zqvkx-gold); border-color: var(--zqvkx-gold); }
.zqvkx-pager a.page-numbers:hover { color: var(--zqvkx-gold2); border-color: var(--zqvkx-gold); }

/* ---------- FAQ ---------- */
.zqvkx-faq { max-width: 860px; }
.zqvkx-faq details {
	background: var(--zqvkx-panel);
	border: 1px solid var(--zqvkx-line); border-left: 4px solid var(--zqvkx-gold);
	border-radius: 6px; margin-bottom: 12px; overflow: hidden;
}
.zqvkx-faq summary {
	padding: 16px 52px 16px 20px; cursor: pointer;
	font-weight: 600; color: var(--zqvkx-text); position: relative; list-style: none;
}
.zqvkx-faq summary::-webkit-details-marker { display: none; }
.zqvkx-faq summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px; line-height: 24px; text-align: center;
	font-family: 'Bungee', sans-serif; font-size: 16px; color: var(--zqvkx-red2);
	border: 1px solid var(--zqvkx-red); border-radius: 50%;
	transition: transform .2s ease, background .2s ease;
}
.zqvkx-faq details[open] summary::after { content: "–"; background: var(--zqvkx-red); color: #fff; }
.zqvkx-faq details[open] summary { color: var(--zqvkx-gold2); }
.zqvkx-faq-body { padding: 0 20px 18px; color: var(--zqvkx-mut); font-size: 14.5px; }

/* ---------- Trang đơn / Nội dung ---------- */
.zqvkx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; padding: 36px 0 50px; }
.zqvkx-article { background: var(--zqvkx-panel); border: 1px solid var(--zqvkx-line); border-radius: 8px; padding: 30px 32px 36px; min-width: 0; }
.zqvkx-article-title {
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif;
	font-size: clamp(22px, 3vw, 34px); line-height: 1.25; color: #fff; text-transform: uppercase;
}
.zqvkx-article-meta { margin: 14px 0 20px; font-size: 13px; color: var(--zqvkx-mut); display: flex; flex-wrap: wrap; gap: 14px; }
.zqvkx-article-meta a { color: var(--zqvkx-gold2); }
.zqvkx-article-thumb { border-radius: 6px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--zqvkx-line); }
.zqvkx-article-content { font-size: 16px; color: #ddd4c8; }
.zqvkx-article-content p { margin-bottom: 16px; }
.zqvkx-article-content h2, .zqvkx-article-content h3 { color: var(--zqvkx-gold2); margin: 26px 0 12px; line-height: 1.3; }
.zqvkx-article-content a { color: var(--zqvkx-red2); text-decoration: underline; }
.zqvkx-article-content img { border-radius: 6px; }
.zqvkx-article-content ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }

/* ---------- Thanh bên ---------- */
.zqvkx-side { position: sticky; top: 84px; }
.zqvkx-widget {
	background: var(--zqvkx-panel); border: 1px solid var(--zqvkx-line);
	border-radius: 8px; padding: 20px; margin-bottom: 22px;
}
.zqvkx-wtitle {
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif;
	font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--zqvkx-gold2);
	padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--zqvkx-red);
}
.zqvkx-recent li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--zqvkx-line); }
.zqvkx-recent li:last-child { border-bottom: 0; }
.zqvkx-recent img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.zqvkx-recent a { font-size: 13.5px; line-height: 1.4; color: var(--zqvkx-text); display: block; }
.zqvkx-recent a:hover { color: var(--zqvkx-gold2); }
.zqvkx-recent time { font-size: 11.5px; color: var(--zqvkx-mut); }
.zqvkx-cats li { border-bottom: 1px dashed var(--zqvkx-line); }
.zqvkx-cats li:last-child { border-bottom: 0; }
.zqvkx-cats a { display: flex; justify-content: space-between; padding: 9px 2px; color: var(--zqvkx-text); font-size: 14px; }
.zqvkx-cats a:hover { color: var(--zqvkx-gold2); }
.zqvkx-side-cta { display: block; margin-top: 6px; text-align: center; }

/* ---------- Tìm kiếm ---------- */
.zqvkx-searchbox { display: flex; max-width: 560px; }
.zqvkx-searchbox input[type="text"], .zqvkx-searchbox input[type="search"] {
	flex: 1; padding: 12px 16px; font-size: 15px; color: var(--zqvkx-text);
	background: var(--zqvkx-panel2); border: 1px solid var(--zqvkx-line); border-right: 0;
	border-radius: 4px 0 0 4px; outline: none;
}
.zqvkx-searchbox input:focus { border-color: var(--zqvkx-gold); }
.zqvkx-searchbox button {
	padding: 12px 22px; font-family: 'Bungee', sans-serif; font-size: 12px; letter-spacing: .05em;
	color: #fff; background: var(--zqvkx-red); border: 0; border-radius: 0 4px 4px 0; cursor: pointer;
	text-transform: uppercase;
}
.zqvkx-searchbox button:hover { filter: brightness(1.1); }

/* ---------- 404 ---------- */
.zqvkx-notfound { text-align: center; padding: 70px 20px; }
.zqvkx-big404 {
	font-family: 'Bungee', sans-serif; font-size: clamp(70px, 14vw, 150px);
	color: transparent; -webkit-text-stroke: 2px var(--zqvkx-gold);
	line-height: 1;
}
.zqvkx-notfound p { color: var(--zqvkx-mut); margin: 18px 0 26px; }

/* ---------- Chân trang ---------- */
.zqvkx-footer { margin-top: 60px; border-top: 2px solid var(--zqvkx-gold); background: linear-gradient(180deg, #120e0c, #0b0908); padding: 44px 0 120px; }
.zqvkx-footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.zqvkx-footer h4 {
	font-family: 'Bungee', 'Be Vietnam Pro', sans-serif; font-size: 14px; text-transform: uppercase;
	color: var(--zqvkx-gold2); margin-bottom: 14px;
}
.zqvkx-footer p, .zqvkx-footer li { font-size: 13.5px; color: var(--zqvkx-mut); }
.zqvkx-footer ul li { padding: 4px 0; }
.zqvkx-footer ul a { color: var(--zqvkx-mut); }
.zqvkx-footer ul a:hover { color: var(--zqvkx-gold2); }
.zqvkx-share { display: flex; gap: 10px; margin-top: 12px; }
.zqvkx-share a {
	width: 38px; height: 38px; display: grid; place-items: center;
	font-size: 12px; font-weight: 800; color: var(--zqvkx-ink);
	background: var(--zqvkx-gold); border-radius: 50%;
	transition: transform .18s ease, background .18s ease;
}
.zqvkx-share a:hover { transform: translateY(-3px); background: var(--zqvkx-red2); color: #fff; }
.zqvkx-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--zqvkx-line); text-align: center; }
.zqvkx-warn { margin: 14px auto 10px; max-width: 820px; font-size: 12.5px; color: var(--zqvkx-mut); line-height: 1.7; }
.zqvkx-copy { font-size: 12px; color: #6f6659; }

/* ---------- Thanh CTA nổi ---------- */
.zqvkx-float {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(11, 9, 8, 0.94); backdrop-filter: blur(10px);
	border-top: 1px solid var(--zqvkx-line);
}
.zqvkx-float .zqvkx-btn { flex: 1; text-align: center; padding: 13px 10px; font-size: 14px; }
@media (min-width: 783px) {
	.zqvkx-float { left: 50%; right: auto; transform: translateX(-50%); bottom: 18px; width: 430px; border: 1px solid var(--zqvkx-line); border-radius: 999px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
}

/* ---------- Trang tĩnh ---------- */
.zqvkx-page { padding: 44px 0 60px; }
.zqvkx-page .zqvkx-article { max-width: 900px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
	.zqvkx-posts { grid-template-columns: repeat(2, 1fr); }
	.zqvkx-layout { grid-template-columns: 1fr; }
	.zqvkx-side { position: static; }
	.zqvkx-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 782px) {
	.zqvkx-burger { display: block; }
	.zqvkx-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: #120e0c; border-bottom: 1px solid var(--zqvkx-line); padding: 14px 20px 18px;
	}
	.zqvkx-nav.zqvkx-nav-open { display: block; }
	.zqvkx-nav-list { flex-direction: column; gap: 2px; }
	.zqvkx-nav-list li a { padding: 11px 12px; }
	.zqvkx-auth .zqvkx-btn-ghost { display: none; }
	.zqvkx-games { grid-template-columns: repeat(2, 1fr); }
	.zqvkx-posters { grid-template-columns: 1fr; }
	.zqvkx-hero-copy { margin-top: -80px; }
}
@media (max-width: 560px) {
	.zqvkx-posts { grid-template-columns: 1fr; }
	.zqvkx-footer-cols { grid-template-columns: 1fr; }
	.zqvkx-article { padding: 22px 18px 28px; }
}