/*
Theme Name: Tin Nhanh
Theme URI: https://localhost:8080/
Author: WPNews
Description: Giao diện báo điện tử tiếng Việt: trang chủ chia khối theo chuyên mục, tin mới nhất lên đầu, đọc tốt trên điện thoại.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinnhanh
Tags: news, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ===========================================================================
   1. Biến & nền tảng
   ======================================================================== */

:root {
	--brand: #c8102e;
	--brand-dark: #9d0c24;
	--ink: #14181f;
	--ink-soft: #3d4654;
	--muted: #6b7280;
	--line: #e4e7ec;
	--bg: #ffffff;
	--bg-soft: #f6f7f9;

	--wrap: 1200px;
	--radius: 8px;
	--gap: 28px;

	/* Chỉ dùng font có đủ ký tự tiếng Việt. Georgia và phần lớn font serif hệ
	   thống thiếu các chữ như ề, ố, ầ, ữ — trình duyệt sẽ ghép dấu rời trông
	   như "chiê`u nay". Vì vậy thân bài cũng dùng bộ sans này, giống cách các
	   báo điện tử Việt Nam đang làm. */
	--font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-read: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Chân trang luôn nằm ở đáy màn hình, kể cả khi bài ngắn.
   Không có đoạn này thì trang ít nội dung sẽ để trống một mảng trắng bên dưới
   chân trang — đúng lỗi "sticky footer" quen thuộc. Cách làm: body là cột flex
   cao tối thiểu bằng màn hình, phần nội dung chính tự giãn ra chiếm chỗ thừa. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* dvh tính theo vùng nhìn thật của trình duyệt di động, không kể thanh địa
	   chỉ trượt ra trượt vào; đặt sau vh để trình duyệt cũ vẫn dùng được vh */
	min-height: 100dvh;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--brand);
}

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: var(--ink);
	color: #fff;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* ===========================================================================
   2. Đầu trang
   ======================================================================== */

.topbar {
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
}

.topbar-date::first-letter {
	text-transform: uppercase;
}

.topbar-links {
	display: flex;
	gap: 16px;
}

.masthead {
	background: var(--bg);
}

.masthead-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.brand-name {
	display: inline-block;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--brand);
	text-transform: uppercase;
}

.brand-name:hover {
	color: var(--brand-dark);
}

.brand-tagline {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.custom-logo {
	max-height: 60px;
	width: auto;
}

/* Ô tìm kiếm ------------------------------------------------------------- */

.searchform {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 320px;
	padding: 6px 8px 6px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft);
}

.searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: inherit;
}

.searchform input[type="search"]:focus {
	outline: none;
}

.searchform button {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	cursor: pointer;
}

.searchform button:hover {
	background: var(--brand-dark);
}

/* Thanh chuyên mục ------------------------------------------------------- */

.navbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.navbar .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.navbar .menu a {
	display: block;
	padding: 13px 16px;
	color: #e9ecf1;
	font-size: 15px;
	font-weight: 600;
	border-bottom: 3px solid transparent;
}

.navbar .menu a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border-bottom-color: var(--brand);
}

.navbar .menu .current-menu-item > a,
.navbar .menu .current-cat > a {
	color: #fff;
	border-bottom-color: var(--brand);
}

/* Menu con */
.navbar .menu li {
	position: relative;
}

.navbar .menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--ink);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.navbar .menu li:hover > .sub-menu,
.navbar .menu li:focus-within > .sub-menu {
	display: block;
}

.navbar .sub-menu a {
	padding: 9px 16px;
	border-bottom: 0;
	font-weight: 500;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	content: "";
}

.nav-toggle-bars {
	position: relative;
}

.nav-toggle-bars::before {
	position: absolute;
	top: -6px;
}

.nav-toggle-bars::after {
	position: absolute;
	top: 6px;
}

/* ===========================================================================
   3. Bố cục chung
   ======================================================================== */

.site-main {
	display: block;
	padding-bottom: 48px;
	/* Giãn ra chiếm hết chỗ thừa, đẩy chân trang xuống đáy màn hình.
	   flex-basis: auto để nội dung dài vẫn tự cao theo bài viết. */
	flex: 1 0 auto;
}

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	padding-top: 32px;
}

.layout--narrow {
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
}

.section {
	padding: 32px 0;
	border-bottom: 1px solid var(--line);
}

.section:last-of-type {
	border-bottom: 0;
}

.hero-section {
	padding-top: 28px;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}

.section-title {
	position: relative;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding-left: 14px;
}

.section-title::before {
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 5px;
	background: var(--brand);
	border-radius: 2px;
	content: "";
}

.section-more {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand);
}

.page-head {
	margin-bottom: 26px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ink);
}

.page-title {
	font-size: 30px;
}

.page-desc,
.page-count {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--muted);
}

/* ===========================================================================
   4. Thẻ tin
   ======================================================================== */

.card {
	position: relative;
	min-width: 0;
}

/* Phủ toàn thẻ để bấm chỗ nào cũng vào bài; chữ vẫn bôi đen chọn được. */
.card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-soft);
	aspect-ratio: 16 / 9;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.card:hover .thumb img {
	transform: scale(1.04);
}

.thumb-empty {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: hsl(var(--h) 40% 93%);
	color: hsl(var(--h) 45% 42%);
	font-size: 2.2rem;
	font-weight: 800;
}

.card-body {
	padding-top: 12px;
}

.card-title {
	font-size: 17px;
	line-height: 1.35;
	margin: 6px 0 0;
}

.card:hover .card-title {
	color: var(--brand);
}

.card-excerpt {
	margin: 10px 0 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
}

.meta .sep {
	opacity: 0.5;
}

.chip {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: rgba(200, 16, 46, 0.1);
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.chip:hover {
	background: var(--brand);
	color: #fff;
}

.chip--tag {
	background: var(--bg-soft);
	color: var(--ink-soft);
	text-transform: none;
	font-weight: 600;
}

/* Thẻ lớn --------------------------------------------------------------- */

.card--hero .card-title {
	font-size: 30px;
	line-height: 1.22;
}

.card--hero .card-body {
	padding-top: 16px;
}

/* Thẻ ngang trong danh sách --------------------------------------------- */

.card--list {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.card--list:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.card--list .thumb {
	aspect-ratio: 4 / 3;
}

.card--list .card-body {
	padding-top: 0;
}

.card--list .card-title {
	margin: 0;
	font-size: 15px;
}

.card--list .meta {
	margin-top: 6px;
	font-size: 12px;
}

/* ===========================================================================
   5. Trang chủ
   ======================================================================== */

.hero-grid,
.cat-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--gap);
}

.hero-side,
.cat-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Khối nổi bật luôn có đủ 5 tin bên cạnh nên giãn đều cho khớp cột trái.
   Khối chuyên mục thì số tin thay đổi — giãn đều sẽ hở toang khi chỉ có 2-3 tin,
   nên để chúng xếp từ trên xuống. */
@media (min-width: 783px) {
	.hero-side {
		justify-content: space-between;
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.empty-state {
	padding: 48px 0;
	text-align: center;
	color: var(--muted);
}

.empty-state h1,
.empty-state h2 {
	margin-bottom: 10px;
	color: var(--ink);
}

.error-code {
	margin: 0;
	color: var(--brand);
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
}

.btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff !important;
	font-weight: 600;
}

.btn:hover {
	background: var(--brand-dark);
}

/* ===========================================================================
   6. Bài viết
   ======================================================================== */

.breadcrumb {
	margin-bottom: 14px;
	color: var(--muted);
	font-size: 13px;
}

.breadcrumb .sep {
	margin: 0 6px;
	opacity: 0.6;
}

.article-head {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.article-title {
	font-size: 38px;
	line-height: 1.2;
}

.article-lead {
	margin: 14px 0 0;
	color: var(--ink-soft);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
}

.article-head .meta {
	margin-top: 14px;
}

.article-figure {
	margin: 24px 0;
}

.article-figure img {
	width: 100%;
	border-radius: var(--radius);
}

.article-figure figcaption {
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
	font-style: italic;
}

.article-body {
	font-family: var(--font-read);
	font-size: 18px;
	line-height: 1.78;
	color: #1f242c;
}

.article-body > * {
	margin-bottom: 1.15em;
}

.article-body h2 {
	margin: 1.6em 0 0.5em;
	font-family: var(--font);
	font-size: 25px;
}

.article-body h3 {
	margin: 1.4em 0 0.4em;
	font-family: var(--font);
	font-size: 20px;
}

.article-body a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.article-body img {
	border-radius: var(--radius);
}

.article-body blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--brand);
	color: var(--ink-soft);
	font-style: italic;
}

.article-body ul,
.article-body ol {
	padding-left: 1.3em;
}

.article-body li {
	margin-bottom: 0.4em;
}

.article-body figure {
	margin: 1.5em 0;
}

.article-body figcaption {
	margin-top: 8px;
	font-family: var(--font);
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font);
	font-size: 15px;
}

.article-body th,
.article-body td {
	padding: 10px 12px;
	border: 1px solid var(--line);
	text-align: left;
}

.article-body th {
	background: var(--bg-soft);
}

/* --- Khối của trình soạn thảo trong thân bài ---------------------------- *
 * WordPress đã tự nạp CSS lõi (wp-block-library) lo phần thả nổi trái/phải
 * và lưới bộ sưu tập. Phần dưới đây chỉ bù những chỗ lõi không đụng tới.
 * ----------------------------------------------------------------------- */

/* Chữ và ảnh thường bó trong 700px cho dễ đọc (khoảng 70 ký tự mỗi dòng);
   riêng khối đặt "Rộng"/"Tràn toàn phần" mới dùng hết bề ngang cột nội dung. */
.article-body > * {
	max-width: 700px;
}

.article-body > .alignwide,
.article-body > .alignfull,
.article-body > .wp-block-table,
.article-body > .wp-block-gallery,
.article-body > .wp-block-embed {
	max-width: 100%;
}

/* Ảnh căn trái/phải/giữa được WordPress bọc thêm một lớp
   <div class="wp-block-image">, và lớp align nằm ở <figure> BÊN TRONG chứ
   không phải ở khối con trực tiếp. Vì vậy phải dùng bộ chọn hậu duệ —
   viết ".article-body > .alignleft" sẽ không bao giờ khớp. */
.article-body .alignleft {
	float: left;
	max-width: 45%;
	margin: 0.3em 1.7em 1.1em 0;
}

.article-body .alignright {
	float: right;
	max-width: 45%;
	margin: 0.3em 0 1.1em 1.7em;
}

.article-body .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Tiêu đề không được nằm kẹt cạnh ảnh thả nổi, và bài không bị hụt đáy. */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body .wp-block-separator {
	clear: both;
}

.article-body::after {
	content: "";
	display: block;
	clear: both;
}

.article-body .wp-block-image {
	margin-top: 0;
	margin-bottom: 1.5em;
}

.article-body .wp-block-image img {
	border-radius: var(--radius);
}

/* Chú thích của mọi loại khối: ảnh, bộ sưu tập, bảng, video nhúng. */
.article-body .wp-element-caption,
.article-body .blocks-gallery-caption {
	margin-top: 8px;
	font-family: var(--font);
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* --- Mã do Classic Editor sinh ra ---------------------------------------- *
 * Trình soạn thảo cũ dùng shortcode [caption] và [gallery], khác hẳn khối
 * của trình soạn thảo mới, nên phải định dạng riêng.
 * ----------------------------------------------------------------------- */

/* WordPress gắn style="width:1024px" thẳng vào thẻ, phải chặn bằng max-width
   không ảnh sẽ tràn khỏi cột. Thứ tự hai quy tắc dưới đây có ý nghĩa: cùng độ
   ưu tiên nên cái sau thắng, giữ ảnh có chú thích rộng bằng ảnh thường (700px). */
.article-body .wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

/* Phải là min(700px, 100%) chứ không phải 700px: thẻ có sẵn width:1024px nội
   tuyến, chỉ chặn trên 700px thì trên điện thoại nó vẫn giữ 700px và tràn ra
   ngoài màn hình. */
.article-body > .wp-caption {
	max-width: min(700px, 100%);
}

.article-body > .wp-caption.alignwide,
.article-body > .wp-caption.alignfull {
	max-width: 100%;
}

.article-body .wp-caption img {
	border-radius: var(--radius);
}

.article-body .wp-caption-text {
	margin: 8px 0 0;
	font-family: var(--font);
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

.article-body .gallery {
	display: grid;
	gap: 12px;
	margin: 0 0 1.5em;
}

.article-body .gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-body .gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-body .gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.article-body .gallery-item {
	margin: 0;
}

.article-body .gallery img {
	width: 100%;
	border-radius: var(--radius);
}

.article-body .gallery-caption {
	font-family: var(--font);
	font-size: 12px;
	color: var(--muted);
}

@media (max-width: 600px) {
	.article-body .gallery-columns-3,
	.article-body .gallery-columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.article-body .wp-block-quote cite {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

.article-body .wp-block-pullquote {
	padding: 22px 0;
	border-top: 3px solid var(--brand);
	border-bottom: 3px solid var(--brand);
	text-align: center;
	font-size: 22px;
	font-weight: 600;
}

.article-body .wp-block-separator {
	max-width: 700px;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.article-body .wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* Nút bấm: không có theme.json nên WordPress không biết màu, phải tự đặt.
   Cũng phải gỡ gạch chân mà quy tắc link chung của thân bài áp lên. */
.article-body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.article-body .wp-block-button__link {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.article-body .wp-block-button__link:hover {
	background: var(--brand-dark);
	color: #fff;
}

.article-body .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--brand);
	color: var(--brand);
}

.article-body pre,
.article-body .wp-block-code {
	overflow-x: auto;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
	font-family: Consolas, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.6;
}

.article-body :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--bg-soft);
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.9em;
}

.article-body .wp-block-embed__wrapper iframe {
	width: 100%;
	border-radius: var(--radius);
}

/* Bảng do trình soạn thảo tạo nằm trong <figure>, phải cho cuộn ngang
   để bảng nhiều cột không đội rộng cả trang trên điện thoại. */
.article-body .wp-block-table {
	overflow-x: auto;
}

@media (max-width: 600px) {
	/* Màn hình hẹp: ảnh thả nổi chiếm hết dòng, chữ chạy vòng sẽ không đọc được. */
	.article-body .alignleft,
	.article-body .alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 1.2em;
	}
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0;
}

/* Hộp tác giả ------------------------------------------------------------ */

.author-box {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin: 32px 0;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.author-box-avatar {
	flex: none;
	border-radius: 50%;
}

.author-box-body {
	min-width: 0;
}

.author-box-label {
	margin: 0 0 2px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.author-box-name {
	margin: 0;
	font-size: 19px;
}

.author-box-bio {
	margin: 8px 0 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.author-box-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.author-box-meta a {
	color: var(--brand);
	font-weight: 600;
}

.page-kicker {
	margin: 0 0 4px;
	color: var(--brand);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.page-head + .author-box {
	margin-top: 0;
}

@media (max-width: 600px) {
	.author-box {
		flex-direction: column;
		gap: 12px;
	}
}

/* Trang liên hệ ---------------------------------------------------------- */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 40px;
	align-items: start;
}

.contact-info dl {
	margin: 0;
}

.contact-info dt {
	margin-top: 16px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.contact-info dt:first-child {
	margin-top: 0;
}

.contact-info dd {
	margin: 4px 0 0;
	font-size: 16px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.contact-field label {
	font-size: 14px;
	font-weight: 600;
}

.contact-field input,
.contact-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font: inherit;
	font-size: 15px;
	color: inherit;
}

.contact-field textarea {
	resize: vertical;
}

.contact-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-notice {
	padding: 12px 14px;
	border-radius: var(--radius);
	border-left: 4px solid;
	margin-bottom: 20px;
	font-size: 15px;
}

.contact-notice--success {
	border-color: #1e8449;
	background: rgba(30, 132, 73, 0.1);
}

.contact-notice--error {
	border-color: var(--brand);
	background: rgba(200, 16, 46, 0.09);
}

@media (max-width: 782px) {
	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

.post-navigation {
	margin: 32px 0;
	padding: 20px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation a {
	display: block;
}

.nav-label {
	display: block;
	margin-bottom: 4px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.nav-title {
	font-weight: 600;
	line-height: 1.35;
}

.related {
	margin-top: 40px;
}

.related .section-title {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}

.related .grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* ===========================================================================
   7. Cột bên
   ======================================================================== */

.sidebar {
	min-width: 0;
}

.widget {
	margin-bottom: 32px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.widget-title {
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.widget .stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Cột bên hẹp: ảnh nhỏ lại để tiêu đề đỡ xuống dòng 4 lần. */
.sidebar .card--list {
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}

.widget a:hover {
	color: var(--brand);
}

/* Widget dạng khối (Tìm kiếm, Bài mới, Lưu trữ… nếu admin tự thêm) ------- */

.widget .wp-block-heading,
.widget > h2:not(.widget-title) {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.widget .wp-block-search__inside-wrapper {
	gap: 6px;
}

.widget .wp-block-search__input {
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font: inherit;
	font-size: 14px;
}

.widget .wp-block-search__button {
	padding: 9px 16px;
	border: 0;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.widget .wp-block-search__button:hover {
	background: var(--brand-dark);
}

.widget .wp-block-latest-posts__list,
.widget .wp-block-archives-list,
.widget .wp-block-categories-list,
.widget .wp-block-latest-comments {
	font-size: 15px;
	line-height: 1.45;
}

.widget .wp-block-latest-comments__comment {
	margin: 0;
	font-size: 14px;
}

/* ===========================================================================
   8. Phân trang
   ======================================================================== */

.pagination {
	margin-top: 36px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 600;
}

.pagination .page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.pagination .dots {
	border-color: transparent;
}

/* ===========================================================================
   9. Chân trang
   ======================================================================== */

.site-footer {
	margin-top: 24px;
	background: var(--ink);
	color: #c3cad6;
	font-size: 15px;
	/* Không cho co lại khi màn hình thấp hơn tổng chiều cao nội dung */
	flex-shrink: 0;
}

/* Lưới hai cột thay vì space-between.
   space-between đẩy hai khối ra sát hai mép màn hình, để hở một mảng trống
   rất lớn ở giữa — càng rõ khi màn hình rộng mà chân trang chỉ có tên site và
   một cột link hẹp. Cột link giữ bề rộng cố định, phần còn lại thuộc về tên
   site, nên khoảng cách không phình theo bề rộng màn hình nữa. */
.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
	align-items: start;
	gap: 32px;
	padding-top: 32px;
	padding-bottom: 24px;
}

@media (max-width: 600px) {
	.footer-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

.footer-name {
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
}

.footer-tagline {
	margin: 6px 0 0;
	font-size: 14px;
	opacity: 0.7;
}

/* Danh sách liên kết xếp DỌC thành một cột, không dàn ngang.
   Xếp ngang chỉ hợp khi toàn tên chuyên mục ngắn; dán URL đầy đủ hoặc tên
   mạng xã hội vào là nó xuống dòng lộn xộn, mỗi lần thêm một mục lại vỡ hàng. */
.footer-nav ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Nhiều link thì cuộn trong khung thay vì kéo dài chân trang.
	   max-height + overflow tự lo: ít link thì không có thanh cuộn nào, vượt
	   quá mới hiện. Không cần đếm số mục hay thêm lớp CSS riêng.
	   168px ≈ 5 dòng — đủ thấy có gì mà chân trang không cao quá. */
	max-height: 168px;

	/* Cuộn CẢ HAI CHIỀU. Cột này rộng tối đa 280px, mà một URL đầy đủ dài hơn
	   thế nhiều. Nếu cho xuống dòng thì một link chiếm ba bốn dòng và đẩy chân
	   trang cao lên; nếu để tràn thì nó phá bề rộng cột. Cuộn ngang giữ mỗi
	   link đúng một dòng, ai cần đọc hết thì kéo. */
	overflow: auto;
	padding-right: 10px;
	padding-bottom: 4px;

	/* Thanh cuộn mảnh, màu sáng cho nền tối. Để mặc định thì Windows vẽ một
	   thanh xám dày, chọi hẳn với nền đen của chân trang. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* Chrome/Safari không dùng scrollbar-width, phải khai riêng. */
.footer-nav ul::-webkit-scrollbar {
	width: 8px;
	height: 8px;   /* thanh cuộn ngang, thiếu dòng này nó dày mặc định */
}

.footer-nav ul::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
}

.footer-nav ul::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
}

.footer-nav ul::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

.footer-nav {
	text-align: left;
}

.footer-nav-title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

/* Mỗi link đúng một dòng — phần thừa để khung cuộn ngang lo, xem quy tắc
   overflow ở .footer-nav ul phía trên. */
.footer-nav a {
	display: inline-block;
	white-space: nowrap;
}

.footer-nav a:hover {
	color: #fff;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	opacity: 0.7;
}

/* --- Cột widget chân trang (Giao diện → Widget) -------------------------- */

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	padding-top: 40px;
	padding-bottom: 8px;
}

/* Widget ở chân trang nằm trên nền tối nên phải bỏ khung sáng của cột bên. */
.footer-widgets .widget {
	margin-bottom: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.footer-widgets .widget-title {
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 15px;
}

.footer-widgets a {
	color: inherit;
}

.footer-widgets a:hover {
	color: #fff;
}

.footer-widgets li + li {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.footer-widgets .card-title {
	color: #e9ecf1;
	font-size: 14px;
}

.footer-widgets .meta {
	color: rgba(255, 255, 255, 0.55);
}

.footer-note {
	opacity: 0.85;
}

/* ===========================================================================
   10. Bình luận
   ======================================================================== */

.comments-area {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.comment-list {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.comment-list li {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
}

.comment-form .submit {
	padding: 11px 22px;
	border: 0;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ===========================================================================
   11. Màn hình nhỏ
   ======================================================================== */

@media (max-width: 1024px) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.grid,
	.grid--3,
	.related .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card--hero .card-title {
		font-size: 26px;
	}

	.article-title {
		font-size: 32px;
	}
}

@media (max-width: 782px) {
	.masthead-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.masthead-search,
	.searchform {
		width: 100%;
		max-width: none;
	}

	.brand-name {
		font-size: 28px;
	}

	.nav-toggle {
		display: flex;
	}

	.navbar .menu {
		display: none;
		flex-direction: column;
		gap: 0;
		padding-bottom: 8px;
	}

	.navbar .menu.is-open {
		display: flex;
	}

	.navbar .menu a {
		padding: 11px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.navbar .menu .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	.hero-grid,
	.cat-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.section {
		padding: 24px 0;
	}
}

@media (max-width: 600px) {
	.grid,
	.grid--3,
	.content .grid,
	.related .grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.topbar-inner {
		font-size: 12px;
	}

	.card--hero .card-title {
		font-size: 22px;
	}

	.article-title {
		font-size: 26px;
	}

	.article-lead {
		font-size: 17px;
	}

	.article-body {
		font-size: 17px;
	}

	.post-navigation .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-navigation .nav-next {
		text-align: left;
	}

	.card--list {
		grid-template-columns: 92px minmax(0, 1fr);
	}
}