/*
 * responsive.css — Roblox APK Theme
 * ─────────────────────────────────────────────────────────────
 * Breakpoint system (1 hệ duy nhất):
 *   max-width: 1280px  → Desktop lớn
 *   max-width: 1024px  → Tablet (iPad, Surface)
 *   max-width: 768px   → Mobile landscape / nhỏ
 *   max-width: 480px   → Mobile portrait phổ biến
 *                          (iPhone XR/11/12/13/14/15 = 390–414px)
 *                          (Samsung Galaxy S/A series = 360–412px)
 *   max-width: 360px   → Tiny (Galaxy A03, Redmi 9A...)
 *
 * Target devices (Android 8.0+ / iOS iPhone XR+):
 *   iPhone XR/11      = 414px  → breakpoint 480px
 *   iPhone 12–15 Pro  = 390px  → breakpoint 480px
 *   iPhone 15 Plus    = 430px  → breakpoint 480px
 *   Samsung S23/S24   = 360px  → breakpoint 480px / 360px
 *   Samsung A54/A34   = 393px  → breakpoint 480px
 *   Redmi Note series = 393px  → breakpoint 480px
 *
 * Rules:
 *   - Không @media trong main.css
 *   - Không nested @media
 *   - Không duplicate breakpoint
 *   - Homepage KHÔNG bị tác động (không override hero/front-page classes)
 *   - Chỉ fix single page (/apk/...) + global layout
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   GLOBAL — Không phụ thuộc breakpoint
   Đảm bảo không bao giờ có scroll ngang trên bất kỳ thiết bị nào
   ═══════════════════════════════════════════════════════════ */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Tất cả img đều không được vượt container */
img, video, iframe, embed, object {
	max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP LỚN: ≤ 1280px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
	.container { max-width: 1200px; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET: ≤ 1024px
   iPad Air, iPad Mini, Surface Go, landscape phones
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	/* Layout */
	.container { padding-left: 20px; padding-right: 20px; }
	.content-area { grid-template-columns: 1fr 280px; gap: 28px; }
	.content-area > * { min-width: 0; }

	/* Header */
	.header-search { width: 200px; }

	/* Homepage grids — tablet scale */
	.hero-title { font-size: 2.5rem; }
	.hero-content { gap: 40px; }
	.hero-stats { gap: 12px; }
	.featured-apk-card { gap: 30px; }
	.game-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	.category-grid { grid-template-columns: repeat(6, 1fr); }
	.footer-widgets { grid-template-columns: repeat(2, 1fr); gap: 30px; }

	/* Single page — tablet */
	.single-post { padding: 32px; }
	.entry-thumbnail { margin: 0 -32px 28px; }
	.apk-info-box { padding: 24px; }
	.apk-info-header { gap: 16px; }

	/* Tables — start handling overflow early */
	.version-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.version-history-table { min-width: 520px; }

	/* apk-specs-table: tablet còn đủ rộng, chỉ giảm padding */
	.apk-specs-table th,
	.apk-specs-table td { padding: 10px 14px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: ≤ 768px
   Landscape iPhone, small tablets, large phones landscape
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* ── TOP BAR ── */
	.top-bar .container { justify-content: center; }
	.trust-item:not(:first-child) { display: none; }

	/* ── HEADER layout mobile ── */
	.header-search { display: none; }

	/* Dòng 1: header-inner chỉ còn logo, căn giữa */
	.header-inner {
		justify-content: center;
		gap: 0;
	}

	/* main-navigation không chiếm space trong header */
	.main-navigation {
		flex: 0 0 0 !important;
		width: 0 !important;
		min-width: 0 !important;
		overflow: visible;
	}

	/* Dòng 2: mobile-nav-bar — thanh riêng chứa hamburger */
	.mobile-nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 6px 0 8px;
		background: var(--bg-white, #fff);
		border-top: 1px solid var(--border-soft, #f0f0f0);
	}

	/* Hamburger button: căn giữa trong dòng riêng */
	.menu-toggle {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 8px 24px;
		background: transparent;
		border: none;
		cursor: pointer;
		z-index: 10000;
	}
	.menu-toggle .bar {
		width: 26px;
		height: 2.5px;
		background: #111827 !important;
		border-radius: 2px;
		display: block !important;
	}
	.menu-toggle-label {
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: #111827;
	}


	/* Nút đóng bên trong menu — ĐÃ XÓA */
	.menu-close { display: none !important; }

	/* Nav: ẩn khỏi header flow, chờ toggle */
	.main-navigation {
		display: block;
		position: fixed;
		top: 0;
		left: 0; right: 0; bottom: 0;
		background: #fff;
		z-index: 9999;
		padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
		overflow-y: auto;
		overflow-x: hidden;
		flex: 0 0 0 !important;
		width: 0 !important;
		min-width: 0 !important;
		pointer-events: none;
		will-change: opacity, transform;
	}
	.main-navigation.is-open {
		width: auto !important;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
	}

	/* Không có backdrop tối — menu trắng sạch */

	/* Nav menu items */
	.nav-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		list-style: none;
		padding: 0; margin: 0;
	}
	.nav-menu li { border-bottom: 1px solid var(--border-soft); }
	.nav-menu li a {
		display: block;
		padding: 16px 12px;
		font-size: 1.05rem;
		color: var(--text);
		text-decoration: none;
		font-weight: 600;
	}
	.nav-menu .sub-menu {
		position: static;
		box-shadow: none;
		background: var(--bg-soft);
		border-radius: 0;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* ── HOMEPAGE — hero & sections ── */
	.hero-section { padding: 48px 0 60px; }
	.hero-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.hero-title { font-size: 2rem; line-height: 1.2; }
	.hero-subtitle { font-size: 1rem; }
	.hero-actions { justify-content: center; flex-wrap: wrap; }
	.hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.hero-visual { order: -1; max-width: 280px; margin: 0 auto; }
	.phone-mockup { width: 240px; height: 480px; }
	.floating-card { font-size: 0.85rem; padding: 8px 14px; }
	.section, .section-padded { padding: 40px 0; }
	.section-title { font-size: 1.75rem; }
	.section-subtitle { font-size: 1rem; }
	.section-header { margin-bottom: 32px; }
	.featured-apk-card { grid-template-columns: 1fr; text-align: center; padding: 24px; gap: 20px; }
	.apk-icon .icon-square { width: 120px; height: 120px; margin: 0 auto; }
	.apk-specs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.apk-actions { justify-content: center; }
	.game-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.game-card-body { padding: 12px; gap: 6px; }
	.game-card-icon { font-size: 48px; }
	.game-card-action { padding: 0 12px 12px; }
	.steps-grid { grid-template-columns: 1fr; gap: 32px; }
	.news-grid { grid-template-columns: 1fr; gap: 16px; }
	.category-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
	.cat-emoji { font-size: 24px; }
	.cat-name { font-size: 11px; }
	.post-grid, .posts-grid { grid-template-columns: 1fr; gap: 16px; }
	.blog-card { flex-direction: column; }
	.blog-thumb { flex: none; height: 180px; width: 100%; }
	.blog-content { padding: 16px; }

	/* ── LAYOUT ── */
	.content-area { grid-template-columns: 1fr; gap: 20px; padding: 16px 0 40px; }
	.sidebar { order: 2; }

	/* ── BREADCRUMBS ── */
	.breadcrumbs { font-size: 0.8rem; }

	/* ═══════════════════════════════════════════════
	   SINGLE POST — /apk/roblox-global/ và tương tự
	   ═══════════════════════════════════════════════ */

	/*
	 * single-post: base padding 40px → mobile 0 horizontal
	 * Container đã có padding 16px, không double-pad
	 */
	.single-post {
		padding: 20px 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* Entry header */
	.entry-header { margin-bottom: 14px; }
	.entry-cat { font-size: 0.75rem; padding: 3px 10px; }
	.entry-title {
		font-size: 1.6rem;
		word-break: break-word;
		overflow-wrap: break-word;
		line-height: 1.3;
		margin-bottom: 12px;
	}
	.entry-meta { flex-wrap: wrap; gap: 8px; font-size: 0.8rem; }
	.meta-item { font-size: 0.8rem; gap: 4px; }

	/*
	 * entry-thumbnail: base margin 0 -40px (offset single-post padding)
	 * Mobile: single-post padding = 0, container padding = 16px
	 * → thumbnail phải offset container: margin 0 -16px
	 */
	.entry-thumbnail {
		margin: 0 -16px 20px;
		border-radius: 0;
		overflow: hidden;
	}
	.entry-thumbnail img {
		width: 100%;
		max-height: 260px;
		object-fit: cover;
		display: block;
		border-radius: 0;
	}

	/* ── APK INFO BOX ── */
	/*
	 * Base padding 28px → mobile 16px
	 * KHÔNG overflow-x: hidden (sẽ clip nội dung bên trong)
	 */
	.apk-info-box {
		padding: 16px;
		margin: 0 0 24px;
		border-radius: 12px;
	}

	/* Header: icon 80px + title — dùng grid thay vì auto 1fr để kiểm soát */
	.apk-info-header {
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: 12px;
		align-items: start;
	}
	.apk-info-icon {
		width: 80px;
		height: 80px;
		border-radius: 16px;
		flex-shrink: 0;
		overflow: hidden;
	}
	.apk-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.icon-fallback { font-size: 34px; }

	/* Title phải có min-width:0 để không đẩy icon ra khỏi grid */
	.apk-info-title { min-width: 0; overflow: hidden; }
	p.apk-name {
		font-size: 1.1rem;
		font-weight: 800;
		word-break: break-word;
		white-space: normal;
		margin: 0 0 5px;
		line-height: 1.3;
	}

	/* Stars + developer — wrap thay vì cắt */
	.apk-info-meta { flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 6px; }
	.apk-developer {
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		display: block;
	}

	/* Tags: wrap */
	.apk-info-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
	.tag { font-size: 11px; padding: 3px 8px; }

	/* ── APK SPECS TABLE ──
	 * HTML: <tr> có 4 cells: th td th td
	 * Desktop: 4 col trên 1 row
	 * Mobile: reflow thành 2 col × 2 row dùng CSS display:grid
	 * Không cần đổi PHP
	 */
	.apk-specs-table {
		/* Override border-collapse để grid hoạt động */
		display: block;
		width: 100%;
		border-collapse: separate;
		margin-bottom: 16px;
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid var(--border-soft);
		box-shadow: none;
	}
	.apk-specs-table tbody {
		display: block;
		width: 100%;
	}
	.apk-specs-table tr {
		display: grid;
		/* 2 col: label tự co theo content, value lấp đầy còn lại */
		grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
		border-bottom: 1px solid var(--border-soft);
	}
	.apk-specs-table tr:last-child { border-bottom: none; }
	.apk-specs-table th {
		/* label: nền xám, chữ nhỏ, không wrap */
		background: var(--bg-soft);
		color: var(--text-muted);
		font-weight: 600;
		font-size: 11px;
		padding: 9px 10px;
		border: none;
		border-right: 1px solid var(--border-soft);
		white-space: nowrap;
		width: auto;
	}
	.apk-specs-table td {
		/* value: bold, wrap nếu cần */
		font-size: 12px;
		font-weight: 700;
		padding: 9px 10px;
		border: none;
		word-break: break-word;
		min-width: 0;
	}
	/* Phân cách giữa cặp th/td trái và cặp th/td phải */
	.apk-specs-table td:nth-child(2) {
		border-right: 1px solid var(--border-soft);
	}

	/* ── CTA BUTTON ──
	 * btn-block đã display:flex; width:100% — chỉ cần fix text wrap
	 * vì version number dài ("Tải APK Mới Nhất - 2.718.1110")
	 */
	.apk-info-cta { margin-top: 4px; }
	.apk-info-cta .btn-block {
		white-space: normal;
		word-break: break-word;
		text-align: center;
		justify-content: center;
		line-height: 1.4;
		min-height: 48px;
		height: auto;
		padding: 12px 14px;
		font-size: 0.9rem;
	}

	/* Trust row */
	.trust-row {
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px 12px;
		font-size: 11px;
		margin-top: 8px;
	}

	/* ── VERSION HISTORY TABLE ──
	 * Scroll ngang — table giữ nguyên HTML, wrapper scroll
	 */
	.apk-version-history { margin: 24px 0; }
	.apk-version-history .section-title { font-size: 1.2rem; margin-bottom: 12px; }
	.version-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border-radius: 10px;
		/* Không set overflow:hidden ở đây — sẽ kill scroll */
	}
	/* Table header: auto-scale theo content, không dư khoảng trắng */
	.version-history-table {
		width: 100%;
		min-width: 0;  /* Không ép min-width — để tự co */
		border-collapse: collapse;
		table-layout: auto; /* Header tự scale theo content */
	}
	.version-history-table th {
		padding: 10px 12px;
		font-size: 12px;
		white-space: nowrap;  /* Header không wrap, tự co */
		width: auto;          /* Tự scale theo chữ */
	}
	.version-history-table td {
		padding: 10px 12px;
		font-size: 12px;
		white-space: nowrap;
	}
	.version-history-table .btn-sm {
		font-size: 11px;
		padding: 5px 10px;
		white-space: nowrap;
	}

	/* ── ENTRY CONTENT ── */
	.entry-content { font-size: 1rem; line-height: 1.75; }
	.entry-content h2 { font-size: 1.35rem; word-break: break-word; margin: 24px 0 12px; }
	.entry-content h3 { font-size: 1.15rem; word-break: break-word; margin: 20px 0 10px; }
	.entry-content h4 { font-size: 1.05rem; }
	.entry-content img { width: 100%; max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 12px auto; }

	/*
	 * TABLES TRONG ENTRY-CONTENT
	 * ─────────────────────────────────────────────────────────
	 * Vấn đề: table nhiều cột trên mobile → cột quá hẹp → text
	 * bị ép thành từng ký tự theo chiều dọc.
	 *
	 * Giải pháp: giữ nguyên display:table + table-layout:fixed
	 * + min-width đủ để đọc được → scroll ngang bằng cách set
	 * overflow-x:auto trên .entry-content (không phải table).
	 *
	 * KHÔNG dùng display:block trên <table> vì khi đó
	 * display:table-row/table-cell trên tr/td bị ghi đè.
	 * ─────────────────────────────────────────────────────────
	 */

	/* Clip nội dung tràn ngang — table bên trong tự scroll qua wrapper */
	.entry-content {
		overflow-x: hidden;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	/* Table: giữ layout, đặt min-width đủ đọc */
	.entry-content table {
		display: table;
		table-layout: auto;
		width: 100%;
		min-width: 320px;   /* tối thiểu để cột không quá hẹp */
		font-size: 13px;
		word-break: normal; /* KHÔNG break trong table */
		overflow-wrap: normal;
	}
	.entry-content th {
		padding: 8px 10px;
		font-size: 12px;
		white-space: nowrap;
		min-width: 80px;
	}
	.entry-content td {
		padding: 8px 10px;
		font-size: 13px;
		white-space: normal;
		word-break: break-word;
		min-width: 80px;
	}

	/* Gutenberg wp-block-table wrapper */
	.entry-content figure.wp-block-table,
	.entry-content .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.entry-content figure.wp-block-table table {
		min-width: 320px;
	}

	/* TablePress */
	.entry-content .tablepress-table-description + table,
	.entry-content .tablepress {
		min-width: 320px;
	}

	/* ── BIG DOWNLOAD CTA ── */
	.big-download-cta { padding: 28px 20px; text-align: center; }
	p.cta-heading { font-size: 1.25rem; word-break: break-word; }
	.btn-xl {
		width: 100%;
		justify-content: center;
		font-size: 1rem;
		padding: 14px 20px;
	}
	.download-trust-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
		margin-top: 16px;
		font-size: 12px;
	}

	/* ── ENTRY FOOTER ── */
	.entry-footer { padding-top: 16px; border-top: 1px solid var(--border-soft); margin-top: 24px; }
	.entry-tags { flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: 12px; }
	.tag-link { font-size: 12px; padding: 3px 8px; }
	.entry-share { flex-wrap: wrap; gap: 8px; font-size: 13px; }
	.share-btn { font-size: 12px; padding: 6px 12px; }

	/* ── RELATED POSTS ── */
	.related-posts-section { margin-top: 32px; }
	.related-posts-section .section-title { font-size: 1.3rem; }
	.game-grid-related { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* ── SIDEBAR ── */
	.widget-area { gap: 16px; }
	.widget { padding: 16px; }
	.widget-title { font-size: 1rem; margin-bottom: 12px; }
	.game-category-list li a { padding: 8px 0; font-size: 13px; }
	.top-games-list li { gap: 10px; padding: 8px 0; }
	.rank { width: 26px; height: 26px; font-size: 12px; }
	.hot-posts-list li { padding: 8px 0; }
	.hot-post-link { gap: 10px; }
	.hot-post-thumb { width: 52px; height: 52px; }
	.hot-post-title { font-size: 13px; line-height: 1.4; word-break: break-word; }
	.hot-post-date { font-size: 11px; }
	.hot-post-content { min-width: 0; }

	/* ── COMMENTS ── */
	.comments-area { margin-top: 32px; }
	.comments-title { font-size: 1.15rem; margin-bottom: 16px; }
	.comment-list { margin-bottom: 20px; }

	/* ── MODAL ── */
	.modal-content { margin: 16px; max-width: calc(100% - 32px); padding: 24px 16px; }

	/* ── STICKY DOWNLOAD ── */
	.has-sticky-download .sticky-download-mobile { display: flex; align-items: center; gap: 10px; }
	.has-sticky-download { padding-bottom: 68px; }
	.has-sticky-download .floating-cta { display: none; }

	/* ── TAXONOMY / ARCHIVE ── */
	.taxonomy-header { padding: 28px 0 24px; }
	.taxonomy-hero h1 { font-size: 1.6rem; }

	/* ── FOOTER ── */
	.footer-widgets { grid-template-columns: 1fr; gap: 20px; text-align: center; }
	.footer-col { display: flex; flex-direction: column; align-items: center; }
	.footer-menu { align-items: center; }
	.footer-cta { grid-template-columns: 1fr; text-align: center; padding: 24px 16px; gap: 16px; }
	.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

	/* ── PAGINATION ── */
	.page-numbers { width: 36px; height: 36px; min-width: 36px; font-size: 0.85rem; padding: 0 8px; }

	/* ── MISC ── */
	.blog-card { flex-direction: column; }
	.blog-thumb { flex: none; height: 180px; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE: ≤ 480px
   iPhone XR/11/12/13/14/15 (390–414px)
   Samsung Galaxy S/A (360–412px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.container { padding-left: 14px; padding-right: 14px; }

	/* Top bar */
	.top-bar { height: 32px; font-size: 0.75rem; }

	/* Logo */
	.site-title-link { font-size: 1.1rem; }
	.logo-icon { width: 32px; height: 32px; }

	/* Homepage */
	.hero-section { padding: 32px 0 40px; }
	.hero-title { font-size: 1.65rem; }
	.hero-badge { font-size: 0.75rem; padding: 5px 12px; }
	.hero-actions .btn { width: 100%; justify-content: center; }
	.hero-stats { gap: 8px; }
	.hero-stats .stat strong { font-size: 1.25rem; }
	.hero-stats .stat span { font-size: 0.7rem; }
	.phone-mockup { width: 200px; height: 400px; }
	.section, .section-padded { padding: 28px 0; }
	.section-title { font-size: 1.4rem; }
	.section-header { margin-bottom: 20px; }
	.featured-apk-card { padding: 20px 14px; }
	.apk-icon .icon-square { width: 100px; height: 100px; }
	.game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.game-card-body { padding: 10px; }
	.game-card-title { font-size: 0.875rem; }
	.game-card-icon { font-size: 40px; }
	.step-card { padding: 36px 14px 24px; }
	.apk-specs { grid-template-columns: repeat(2, 1fr); gap: 10px; }

	/* Buttons */
	.btn { padding: 10px 16px; font-size: 0.875rem; white-space: normal; word-break: break-word; }
	.btn-lg { padding: 12px 20px; font-size: 0.95rem; }
	.btn-xl { padding: 12px 18px; font-size: 0.95rem; }
	.btn-sm { padding: 5px 10px; font-size: 11px; }

	/* ── SINGLE PAGE ── */
	.entry-title { font-size: 1.4rem; }
	.entry-content { font-size: 0.95rem; }
	.entry-content h2 { font-size: 1.2rem; }
	.entry-content h3 { font-size: 1.05rem; }

	/*
	 * thumbnail: container padding 14px → offset -14px
	 */
	.entry-thumbnail { margin: 0 -14px 16px; }
	.entry-thumbnail img { max-width: 100%; width: 100%; height: auto; max-height: 260px; object-fit: cover; }

	/* APK info box: icon nhỏ hơn chút */
	.apk-info-box { padding: 14px 12px; border-radius: 10px; }
	.apk-info-header { grid-template-columns: 72px 1fr; gap: 10px; }
	.apk-info-icon { width: 72px; height: 72px; border-radius: 14px; }
	.icon-fallback { font-size: 30px; }
	p.apk-name { font-size: 1rem; }
	.apk-info-meta { gap: 3px 6px; }
	.tag { font-size: 10px; padding: 2px 7px; }
	.apk-developer { font-size: 11px; }

	/* specs table: font nhỏ hơn */
	.apk-specs-table th { font-size: 10px; padding: 8px 8px; }
	.apk-specs-table td { font-size: 11px; padding: 8px 8px; }

	/* CTA button */
	.apk-info-cta .btn-block { font-size: 0.85rem; padding: 11px 12px; }

	/* Version history */
	.version-history-table th { font-size: 11px; padding: 8px 10px; }
	.version-history-table td { font-size: 11px; padding: 8px 10px; }
	.version-history-table .btn-sm { font-size: 10px; padding: 4px 8px; }

	/* Big CTA */
	.big-download-cta { padding: 22px 14px; }
	p.cta-heading { font-size: 1.1rem; }

	/* Category grid */
	.category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.category-tile { padding: 14px 8px; }
	.cat-emoji { font-size: 22px; }
	.cat-name { font-size: 10px; }

	/* Blog */
	.blog-thumb { height: 160px; }

	/* Sidebar */
	.widget { padding: 14px 12px; }
	.hot-post-thumb { width: 46px; height: 46px; }
	.hot-post-title { font-size: 12px; }

	/* Archive */
	.archive-header { padding: 24px 0; }
	.archive-title { font-size: 1.4rem; }
	.category-switcher {
		display: block;
		margin: 6px -14px 22px;
		padding: 8px 0 10px 14px;
		border-top: 1px solid var(--border-soft);
		border-bottom: 1px solid var(--border-soft);
		overflow: hidden;
	}
	.category-switcher-label {
		display: block;
		margin: 0 14px 8px 0;
		font-size: 12px;
	}
	.category-switcher-list {
		flex-wrap: nowrap;
		gap: 7px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 14px 2px 0;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.category-switcher-list::-webkit-scrollbar {
		display: none;
	}
	.category-chip {
		flex: 0 0 auto;
		min-height: 32px;
		padding: 7px 12px;
		font-size: 12px;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	/* Footer */
	.site-footer { padding: 36px 0 16px; }
	.footer-cta { padding: 20px 14px; }
	.footer-disclaimer { padding: 14px; font-size: 12px; }

	/* Modal */
	.modal-content { margin: 14px; max-width: calc(100% - 28px); padding: 20px 14px; }

	/* Misc */
	.post-card-body, .post-content { padding: 14px; }
	.page-content-wrap { padding: 20px 0; }
	.comment-form-wrap { padding: 14px; }
	.sticky-download-mobile { padding: 10px 12px; gap: 8px; }
	.download-trust-row { gap: 8px 12px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   TINY: ≤ 360px
   Samsung Galaxy A03, Redmi 9A, cũ hơn
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
	.container { padding-left: 12px; padding-right: 12px; }

	/* Homepage */
	.hero-stats { grid-template-columns: 1fr 1fr; }
	.game-grid, .game-grid-related { grid-template-columns: 1fr; }
	.category-grid { grid-template-columns: 1fr 1fr; }
	.news-grid { grid-template-columns: 1fr; }
	.nav-links { gap: 4px; }

	/* Single */
	.entry-title { font-size: 1.25rem; }
	.entry-thumbnail { margin: 0 -12px 14px; }
	.apk-info-header { grid-template-columns: 64px 1fr; gap: 8px; }
	.apk-info-icon { width: 64px; height: 64px; border-radius: 12px; }
	p.apk-name { font-size: 0.95rem; }
	.apk-info-box { padding: 12px 10px; }
	.apk-specs-table th { font-size: 10px; padding: 7px 7px; }
	.apk-specs-table td { font-size: 11px; padding: 7px 7px; }
	.apk-info-cta .btn-block { font-size: 0.8rem; padding: 10px; }
	.big-download-cta { padding: 18px 12px; }
	p.cta-heading { font-size: 1rem; }

	/* Sidebar */
	.hot-post-content { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
	.top-bar, .site-header, .site-footer,
	.sticky-download-mobile, .floating-cta,
	.modal-overlay, .sidebar, .widget-area,
	.big-download-cta, .related-posts-section,
	.comments-area, .entry-share, .entry-tags { display: none !important; }
	body { background: #fff; color: #000; }
	.content-area { grid-template-columns: 1fr; }
	.single-post { padding: 0; box-shadow: none; }
	a { color: #000; }
	.entry-content { font-size: 12pt; line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════
   SUPPLEMENTAL RESPONSIVE — Classes used in PHP templates
   but missing from original responsive.css breakpoints.
   Covers: post-card, game-card variants, faq, breadcrumbs,
   page-content-wrap, category-desc, taxonomy sections,
   content-area-full, and misc utility classes.
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET ≤ 1024px ── */
@media (max-width: 1024px) {
	/* Post grid */
	.post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

	/* Game card variants */
	.game-card-thumb { aspect-ratio: 16 / 9; }

	/* Page content wrap */
	.page-content-wrap { padding: 32px; }

	/* Category desc */
	.category-desc { padding: 24px; }

	/* Taxonomy sections */
	.taxonomy-hero h1 { font-size: 2rem; }
	.taxonomy-label { font-size: 0.8rem; }

	/* FAQ */
	.faq-question { font-size: 0.95rem; padding: 16px 20px; }
	.faq-answer { padding: 0 20px 16px; }
}

/* ── MOBILE ≤ 768px ── */
@media (max-width: 768px) {
	/* Post grid — 1 cột */
	.post-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }

	/* Post card */
	.post-card { border-radius: 10px; }
	.post-card-body,
	.post-content { padding: 14px; gap: 8px; }
	.post-card-title,
	.post-title { font-size: 15px; line-height: 1.4; }
	.post-card-excerpt,
	.post-excerpt { font-size: 13px; -webkit-line-clamp: 2; }
	.post-card-meta { font-size: 11px; gap: 6px; }
	.post-cat { font-size: 10px; padding: 2px 8px; }
	.post-thumb,
	.post-card-thumb { aspect-ratio: 16 / 8; }

	/* Post date / read-more */
	.post-date { font-size: 11px; }
	.read-more-link { font-size: 12px; }

	/* Game card — thumb & meta */
	.game-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
	.game-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
	.game-card-meta { font-size: 11px; gap: 4px; }
	.game-card-link { display: block; }

	/* Page content wrap */
	.page-content-wrap {
		padding: 20px 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* Page header (index.php) */
	.page-header { padding: 16px 0 8px; }
	.page-title { font-size: 1.4rem; }
	.page-links { margin: 16px 0; font-size: 13px; }

	/* Content area full (page.php) */
	.content-area-full { grid-template-columns: 1fr; }

	/* Category content */
	.category-content-wrap { margin-top: 28px; padding-top: 24px; }
	.category-desc {
		padding: 16px;
		border-radius: 10px;
		font-size: 0.95rem;
	}

	/* Taxonomy */
	.taxonomy-games { padding: 20px 0 32px; }
	.taxonomy-posts { padding: 0 0 28px; }
	.taxonomy-content { padding: 0 0 28px; }
	.taxonomy-label { font-size: 0.75rem; padding: 4px 10px; }
	.taxonomy-hero h1 { font-size: 1.5rem; word-break: break-word; }

	/* Breadcrumbs */
	.breadcrumb-list { gap: 4px 6px; font-size: 0.8rem; }
	.breadcrumb-item { font-size: 0.8rem; }

	/* FAQ */
	.faq-list { gap: 8px; }
	.faq-item { border-radius: 10px; }
	.faq-question { font-size: 0.92rem; padding: 14px 16px; }
	.faq-answer { padding: 0 16px 14px; font-size: 0.9rem; }
	.faq-toggle { width: 24px; height: 24px; font-size: 16px; }

	/* No posts */
	.no-posts { padding: 40px 16px; font-size: 0.95rem; border-radius: 10px; }
}

/* ── SMALL MOBILE ≤ 480px ── */
@media (max-width: 480px) {
	/* Post grid */
	.post-grid { gap: 10px; }
	.post-card-body,
	.post-content { padding: 12px; }
	.post-card-title,
	.post-title { font-size: 14px; }
	.post-card-excerpt,
	.post-excerpt { font-size: 12px; }

	/* Game card */
	.game-card-meta { flex-wrap: wrap; }

	/* Page content */
	.page-content-wrap { padding: 16px 0; }
	.page-title { font-size: 1.25rem; }

	/* Category */
	.category-desc { padding: 14px 12px; font-size: 0.9rem; }
	.category-content-wrap { margin-top: 20px; padding-top: 18px; }

	/* Taxonomy */
	.taxonomy-hero h1 { font-size: 1.3rem; }

	/* Breadcrumbs */
	.breadcrumb-list { gap: 3px 4px; font-size: 0.75rem; }

	/* FAQ */
	.faq-question { font-size: 0.88rem; padding: 12px 14px; }
	.faq-answer { padding: 0 14px 12px; font-size: 0.875rem; }

	/* No posts */
	.no-posts { padding: 32px 12px; }
}

/* ── TINY ≤ 360px ── */
@media (max-width: 360px) {
	.post-grid { gap: 8px; }
	.post-card-title,
	.post-title { font-size: 13px; }
	.taxonomy-hero h1 { font-size: 1.15rem; }
	.category-desc { padding: 12px 10px; }
	.faq-question { font-size: 0.85rem; padding: 11px 12px; }
}