/* ==================================================
   1. DANH SÁCH BÀI VIẾT / CARD
================================================== */

.post-list {
	display: grid; /* Danh sách bài dạng lưới dọc */
	gap: 24px; /* Khoảng cách giữa bài */
}

.post-card {
	display: grid; /* Ảnh và nội dung chia cột */
	grid-template-columns: 240px minmax(0, 1fr); /* Ảnh trái, nội dung phải */
	gap: 20px; /* Khoảng cách ảnh và chữ */
	padding: 20px; /* Padding card */
	border: 1px solid var(--border-color); /* Viền nhẹ */
	border-radius: 16px; /* Bo góc */
	background: #ffffff; /* Nền trắng */
	box-shadow: 0 8px 22px rgba(79, 45, 19, 0.06); /* Bóng nhẹ */
}

.post-card-thumbnail {
	display: block; /* Link ảnh dạng block */
}

.post-card-thumbnail img {
	display: block; /* Bỏ khoảng trắng dưới ảnh */
	width: 100%; /* Rộng hết khung */
	height: 170px; /* Cao cố định */
	object-fit: cover; /* Cắt ảnh vừa khung */
	border-radius: 12px; /* Bo góc ảnh */
}

.post-card-content {
	min-width: 0; /* Tránh vỡ layout */
}

.post-card-type {
	display: inline-block; /* Nhãn loại bài */
	margin-bottom: 8px; /* Cách tiêu đề */
	padding: 3px 8px; /* Padding nhãn */
	border-radius: 999px; /* Bo tròn */
	background: #f5eadf; /* Nền nhãn */
	color: var(--accent-color); /* Màu chữ */
	font-size: 12px; /* Cỡ chữ */
	font-weight: 700; /* Đậm */
}

.post-card-title {
	margin: 0 0 8px; /* Cách meta */
	font-size: 24px; /* Cỡ tiêu đề */
	line-height: 1.35; /* Giãn dòng */
}

.post-card-title a {
	color: var(--text-color); /* Màu tiêu đề */
	text-decoration: none; /* Bỏ gạch chân */
}

.post-card-title a:hover {
	color: var(--accent-color); /* Hover đổi màu */
}

.post-card-meta {
	display: flex; /* Meta một dòng */
	flex-wrap: wrap; /* Cho xuống dòng */
	gap: 8px 12px; /* Khoảng cách */
	margin-bottom: 12px; /* Cách đoạn trích */
	font-size: 14px; /* Cỡ chữ */
	color: var(--muted-color); /* Màu phụ */
}

.post-card-meta a {
	color: var(--muted-color); /* Link meta */
	text-decoration: none; /* Bỏ gạch chân */
}

.post-card-excerpt {
	font-size: 15px; /* Cỡ đoạn trích */
	line-height: 1.7; /* Giãn dòng */
	color: var(--text-color); /* Màu chữ */
}

.post-card-excerpt p {
	margin: 0; /* Gọn đoạn trích */
}

.read-more {
	display: inline-block; /* Dạng link nút */
	margin-top: 12px; /* Cách đoạn trích */
	color: var(--accent-color); /* Màu nhấn */
	font-weight: 700; /* Đậm */
	text-decoration: none; /* Bỏ gạch chân */
}

/* ==================================================
   2. PHÂN TRANG
================================================== */

.pagination-wrap,
.pagination,
.nav-links {
	margin-top: 28px; /* Cách danh sách */
}

.pagination-wrap .page-numbers,
.nav-links .page-numbers {
	display: inline-block; /* Dạng nút */
	margin: 0 6px 8px 0; /* Khoảng cách */
	padding: 8px 12px; /* Padding */
	border: 1px solid var(--border-color); /* Viền */
	border-radius: 999px; /* Bo tròn */
	background: #ffffff; /* Nền trắng */
	color: var(--text-color); /* Màu chữ */
	text-decoration: none; /* Bỏ gạch chân */
}

.pagination-wrap .current,
.nav-links .current {
	background: var(--accent-color); /* Nền trang hiện tại */
	border-color: var(--accent-color); /* Viền */
	color: #ffffff; /* Chữ trắng */
}

/* ==================================================
   3. ARCHIVE / SEARCH
================================================== */

.archive-header {
	margin-bottom: 24px; /* Cách danh sách */
	padding-bottom: 16px; /* Cách viền */
	border-bottom: 1px solid var(--border-color); /* Viền dưới */
}

.archive-title {
	margin: 0; /* Xóa margin */
	font-size: 30px; /* Cỡ tiêu đề */
	line-height: 1.3; /* Giãn dòng */
	color: var(--text-color); /* Màu chữ */
}

.archive-description {
	margin-top: 8px; /* Cách tiêu đề */
	color: var(--muted-color); /* Màu phụ */
	font-size: 15px; /* Cỡ chữ */
	line-height: 1.7; /* Giãn dòng */
}

.archive-layout-list {
	display: grid; /* 1 cột */
	grid-template-columns: 1fr; /* Một cột */
	gap: 22px; /* Khoảng cách */
}

.archive-layout-grid-2 {
	display: grid; /* Lưới */
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* Hai cột */
	gap: 22px; /* Khoảng cách */
}

.archive-layout-grid-2 .post-card {
	display: block; /* Card xếp dọc */
}

.archive-layout-grid-2 .post-card-thumbnail img {
	height: 180px; /* Ảnh cố định */
}

.archive-layout-grid-2 .post-card-content {
	margin-top: 14px; /* Cách ảnh */
}

.search-title span {
	color: var(--accent-color); /* Từ khóa nổi bật */
}

/* ==================================================
   4. SINGLE BÀI VIẾT
================================================== */

.single-entry,
.page-content,
.no-posts,
.error-404-box {
	padding: 28px; /* Padding nội dung */
	border: 1px solid var(--border-color); /* Viền nhẹ */
	border-radius: 16px; /* Bo góc */
	background: #ffffff; /* Nền trắng */
	box-shadow: 0 8px 22px rgba(79, 45, 19, 0.06); /* Bóng nhẹ */
}

.single-entry-title,
.page-title {
	margin: 0 0 10px; /* Cách meta */
	font-size: var(--single-title-font-size, clamp(30px, 4vw, 46px)); /* Cho Customizer chỉnh H1 bài viết */
	line-height: 1.2; /* Giãn dòng */
	color: var(--text-color); /* Màu tiêu đề */
}

.single-entry-meta {
	display: flex; /* Meta một dòng */
	flex-wrap: wrap; /* Cho xuống dòng */
	gap: 8px 14px; /* Khoảng cách */
	margin-bottom: 22px; /* Cách nội dung */
	font-size: 14px; /* Cỡ meta */
	color: var(--muted-color); /* Màu phụ */
}

.single-entry-meta a {
	color: var(--muted-color); /* Link meta */
}

.single-entry-thumbnail {
	margin-bottom: 24px; /* Cách nội dung */
}

.single-entry-thumbnail img {
	display: block; /* Bỏ khoảng trắng */
	width: 100%; /* Rộng hết */
	border-radius: 16px; /* Bo góc */
}

.single-entry-content {
	font-size: 17px; /* Cỡ nội dung */
	line-height: 1.85; /* Giãn dòng đọc thơ/bài */
}

.single-entry-content p {
	margin: 0 0 1.15em; /* Khoảng cách đoạn */
}

.single-entry-footer {
	margin-top: 26px; /* Cách nội dung */
	padding-top: 18px; /* Cách viền */
	border-top: 1px solid var(--border-color); /* Viền trên */
}

.single-tags {
	display: flex; /* Tag cùng dòng */
	flex-wrap: wrap; /* Cho xuống dòng */
	gap: 8px; /* Khoảng cách */
	align-items: center; /* Căn giữa */
	font-size: 14px; /* Cỡ tag */
}

.single-tags a {
	display: inline-block; /* Tag dạng pill */
	padding: 4px 10px; /* Padding */
	border-radius: 999px; /* Bo tròn */
	background: #f5eadf; /* Nền tag */
	color: var(--accent-color); /* Màu tag */
	text-decoration: none; /* Bỏ gạch chân */
}

/* ==================================================
   5. HỘP TÁC GIẢ + BÀI LIÊN QUAN
================================================== */

.author-box {
	display: flex; /* Avatar + mô tả */
	gap: 18px; /* Khoảng cách */
	align-items: center; /* Căn giữa */
	margin-top: 28px; /* Cách bài */
	padding: 22px; /* Padding */
	border: 1px solid var(--border-color); /* Viền */
	border-radius: 16px; /* Bo góc */
	background: #ffffff; /* Nền */
}

.author-box-avatar img {
	border-radius: 50%; /* Avatar tròn */
}

.author-box-content h2 {
	margin: 0 0 6px; /* Cách mô tả */
	font-size: 20px; /* Cỡ tên */
}

.author-box-content p {
	margin: 0; /* Gọn mô tả */
	color: var(--muted-color); /* Màu phụ */
}

.related-posts {
	margin-top: 28px; /* Cách hộp trên */
}

.related-posts-title {
	margin: 0 0 16px; /* Cách lưới */
	font-size: 24px; /* Cỡ tiêu đề */
}

.related-posts-grid {
	display: grid; /* Lưới bài liên quan */
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cột */
	gap: 18px; /* Khoảng cách */
}

.related-card {
	padding: 16px; /* Padding card */
	border: 1px solid var(--border-color); /* Viền */
	border-radius: 14px; /* Bo góc */
	background: #ffffff; /* Nền */
}

.related-card-thumb img {
	display: block; /* Bỏ khoảng trắng */
	width: 100%; /* Rộng hết */
	height: 120px; /* Chiều cao */
	object-fit: cover; /* Cắt vừa khung */
	border-radius: 10px; /* Bo góc */
	margin-bottom: 10px; /* Cách tiêu đề */
}

.related-card-title {
	margin: 0 0 8px; /* Cách meta */
	font-size: 17px; /* Cỡ tiêu đề */
	line-height: 1.35; /* Giãn dòng */
}

.related-card-title a {
	color: var(--text-color); /* Màu */
	text-decoration: none; /* Bỏ gạch chân */
}

.related-card-meta {
	display: flex; /* Meta ngang */
	flex-wrap: wrap; /* Cho xuống dòng */
	gap: 6px 10px; /* Khoảng cách */
	font-size: 13px; /* Cỡ meta */
	color: var(--muted-color); /* Màu phụ */
}

/* ==================================================
   6. PAGE
================================================== */

.page-content-wrap {
	max-width: 920px; /* Trang tĩnh rộng vừa đọc */
	margin: 0 auto; /* Căn giữa */
}

.page-header {
	margin-bottom: 18px; /* Cách nội dung */
}

/* ==================================================
   7. COMMENTS - BÌNH LUẬN
================================================== */

.comments-area {
	margin-top: 36px; /* Cách nội dung */
	padding: 32px 40px; /* Padding */
	border: 1px solid #e6d5bd; /* Viền vàng nhạt */
	border-radius: 18px; /* Bo góc */
	background: #fffaf3; /* Nền kem */
}

.comments-main-title {
	margin: 0 0 28px; /* Cách form */
	font-size: 32px; /* Cỡ tiêu đề */
	line-height: 1.3; /* Giãn dòng */
	color: #2b1608; /* Nâu đậm */
}

.comments-title {
	margin: 0 0 18px; /* Cách danh sách */
	font-size: 22px; /* Cỡ chữ */
	color: #2b1608; /* Nâu đậm */
}

.comment-list {
	margin: 0 0 28px; /* Cách form */
	padding: 0; /* Xóa padding */
	list-style: none; /* Bỏ số */
}

.comment-list .comment-body {
	margin-bottom: 18px; /* Cách bình luận */
	padding: 18px; /* Padding */
	border: 1px solid #e6d5bd; /* Viền */
	border-radius: 14px; /* Bo góc */
	background: #ffffff; /* Nền trắng */
}

.comment-respond {
	padding: 28px 30px; /* Padding form */
	border: 1px solid #e6d5bd; /* Viền */
	border-radius: 16px; /* Bo góc */
	background: #ffffff; /* Nền */
}

.comment-reply-title {
	margin: 0 0 22px; /* Cách form */
	font-size: 24px; /* Cỡ chữ */
	color: #2b1608; /* Nâu đậm */
}

.comment-form label {
	display: block; /* Label riêng dòng */
	margin-bottom: 6px; /* Cách input */
	font-weight: 500; /* Hơi đậm */
	color: #2b1608; /* Nâu */
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%; /* Rộng hết */
	border: 2px solid #2b1608; /* Viền đậm */
	border-radius: 10px; /* Bo góc */
	padding: 12px 14px; /* Padding */
	font-size: 16px; /* Cỡ chữ */
	background: #ffffff; /* Nền */
}

.comment-form textarea {
	min-height: 220px; /* Cao form */
	resize: vertical; /* Cho kéo cao */
}

.comment-form p {
	margin: 0 0 18px; /* Khoảng cách dòng */
}

.comment-submit {
	display: inline-block; /* Nút */
	padding: 12px 28px; /* Padding */
	border: 0; /* Bỏ viền */
	border-radius: 999px; /* Bo tròn */
	background: #5a321c; /* Nâu */
	color: #ffffff; /* Chữ trắng */
	font-weight: 700; /* Đậm */
	cursor: pointer; /* Con trỏ */
}

/* ==================================================
   8. 404
================================================== */

.error-404-box {
	text-align: center; /* Căn giữa */
}

.error-404-title {
	margin: 0 0 10px; /* Cách mô tả */
	font-size: 34px; /* Cỡ tiêu đề */
	line-height: 1.25; /* Giãn dòng */
	color: var(--text-color); /* Màu */
}

.error-404-desc {
	margin: 0 0 22px; /* Cách dòng action */
	color: var(--muted-color); /* Màu phụ */
	font-size: 16px; /* Cỡ chữ */
}

.error-404-actions {
	display: flex; /* Search + nút ngang */
	justify-content: center; /* Căn giữa */
	align-items: center; /* Căn dọc */
	gap: 12px; /* Khoảng cách */
}

.error-404-search {
	flex: 1 1 auto; /* Search co giãn */
	max-width: 420px; /* Giới hạn */
}

.error-404-search form {
	display: flex; /* Form gọn */
	margin: 0; /* Xóa margin */
}

.error-404-home {
	flex: 0 0 auto; /* Nút không co */
	display: inline-flex; /* Nút */
	align-items: center; /* Căn giữa */
	justify-content: center; /* Căn giữa */
	min-height: 42px; /* Cao bằng search */
	padding: 10px 18px; /* Padding */
	border-radius: 999px; /* Bo tròn */
	background: var(--accent-color); /* Màu nền */
	color: #ffffff; /* Chữ trắng */
	font-weight: 700; /* Đậm */
	text-decoration: none; /* Bỏ gạch chân */
	white-space: nowrap; /* Không xuống dòng */
}

.error-suggested-posts {
	margin-top: 28px; /* Cách khối trên */
}

.error-suggested-title {
	margin: 0 0 16px; /* Cách lưới */
	font-size: 24px; /* Cỡ chữ */
}

.error-suggested-grid {
	display: grid; /* Lưới */
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cột */
	gap: 18px; /* Khoảng cách */
}

.error-suggested-card {
	padding: 18px; /* Padding */
	border: 1px solid var(--border-color); /* Viền */
	border-radius: 14px; /* Bo góc */
	background: #ffffff; /* Nền */
}

.error-suggested-card-title {
	margin: 0 0 10px; /* Cách mô tả */
	font-size: 18px; /* Cỡ chữ */
	line-height: 1.35; /* Giãn dòng */
}

.error-suggested-card-title a {
	color: var(--text-color); /* Màu */
	text-decoration: none; /* Bỏ gạch chân */
}

.error-suggested-excerpt {
	color: var(--muted-color); /* Màu phụ */
	font-size: 14px; /* Cỡ chữ */
	line-height: 1.6; /* Giãn dòng */
}

.error-suggested-excerpt p {
	margin: 0; /* Gọn mô tả */
}

.error-suggested-more {
	display: inline-block; /* Link nút */
	margin-top: 12px; /* Cách mô tả */
	color: var(--accent-color); /* Màu */
	font-weight: 700; /* Đậm */
	text-decoration: none; /* Bỏ gạch chân */
}

/* ==================================================
   9. RESPONSIVE
================================================== */

@media (max-width: 900px) {
	.archive-layout-grid-2,
	.related-posts-grid,
	.error-suggested-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* Tablet 2 cột */
	}
}

@media (max-width: 768px) {
	.post-card {
		grid-template-columns: 1fr; /* Card 1 cột */
		padding: 16px; /* Giảm padding */
	}

	.post-card-thumbnail img {
		height: auto; /* Không ép ảnh */
	}

	.post-card-title {
		font-size: 21px; /* Nhỏ hơn */
	}

	.archive-layout-grid-2,
	.related-posts-grid,
	.error-suggested-grid {
		grid-template-columns: 1fr; /* Mobile 1 cột */
	}

	.single-entry,
	.page-content,
	.no-posts,
	.error-404-box {
		padding: 22px 16px; /* Giảm padding */
	}

	.author-box {
		align-items: flex-start; /* Căn trên */
		flex-direction: column; /* Xếp dọc */
	}

	.comments-area {
		padding: 24px 16px; /* Giảm padding */
	}

	.comments-main-title {
		font-size: 26px; /* Nhỏ hơn */
	}

	.comment-respond {
		padding: 22px 16px; /* Gọn hơn */
	}

	.comment-form textarea {
		min-height: 180px; /* Thấp hơn */
	}

	.error-404-actions {
		flex-direction: column; /* Search + nút dọc */
		align-items: stretch; /* Rộng hết */
	}

	.error-404-search {
		max-width: none; /* Rộng hết */
	}

	.error-404-home {
		width: 100%; /* Nút rộng hết */
	}
}

.single-entry-title,
.page-title { font-size: var(--single-title-font-size, clamp(30px, 4vw, 46px)); }

/* ==================================================
   PATCH: BỎ KHUNG LỚN CỦA NỘI DUNG BÀI CHI TIẾT
================================================== */
.single-entry,
.page-content {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}