/* DocBaoThayBan Astra — ghi đè lên Astra, không viết lại layout.
 *
 * Astra sinh các biến màu toàn cục --ast-global-color-0..9 và mọi khối của nó dùng lại
 * chúng (khảo sát main.min.css: có --ast-global-color-0, -2, -5, --ast-border-color,
 * --ast-single-post-border). Gán lại 10 biến đó ở :root là cách tuỳ biến sạch nhất: không
 * đấu tranh specificity, không phá Customizer.
 */

:root {
	--dbtb-brand: #8a1538;
	--dbtb-brand-deep: #4a2036;
	--dbtb-accent: #c08a2e;
	--dbtb-ink: #1a1119;
	--dbtb-paper: #fbf7f1;
	--dbtb-surface: #f0e9e0;
	--dbtb-muted: #5b5350;
	--dbtb-hairline: #dfd4c6;

	--ast-global-color-0: #8a1538;   /* link, nút */
	--ast-global-color-1: #4a2036;   /* hover */
	--ast-global-color-2: #1a1119;   /* chữ chính */
	--ast-global-color-3: #5b5350;   /* chữ phụ */
	--ast-global-color-4: #f0e9e0;   /* nền phụ */
	--ast-global-color-5: #fbf7f1;   /* nền trang */
	--ast-global-color-6: #dfd4c6;   /* đường kẻ */
	--ast-global-color-7: #241a24;   /* nền tối */
	--ast-global-color-8: #ffffff;
	--ast-global-color-9: #c08a2e;

	--ast-border-color: #dfd4c6;
	--ast-single-post-border: #dfd4c6;
	--dbtb-title-lh: 1.26;

	/* Astra lấy khoảng cách container từ biến riêng; giữ tương đương 1280px của GP. */
	--ast-container-width: 1280px;
}

body, button, input, select, textarea, .site {
	font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.page-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	letter-spacing: -0.01em;
	/* fonts.css chỉ nạp mặt 700 — thiếu dòng này trình duyệt bôi đậm giả hoặc rơi về Georgia. */
	font-weight: 700;
	/* Chữ có dấu tiếng Việt cần nhiều khoảng dòng hơn chữ Latin: 1.15 làm dấu bị chạm nhau. */
	line-height: var(--dbtb-title-lh);
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: 0.15em; }

/* Nhãn chuyên mục: vàng accent chỉ đủ tương phản trên nền tối, nền sáng dùng brand. */
.dbtb-chip, .entry-meta .cat-links a, .ast-blog-meta .cat-links a {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dbtb-brand);
}
.dbtb-chip a { color: inherit; text-decoration: none; display: inline-block; min-height: 24px; line-height: 24px; }
.dbtb-chip a:hover { color: var(--dbtb-brand-deep); text-decoration: underline; }

/* Vùng chạm 24px cho mọi liên kết tiêu đề và dòng meta (WCAG 2.2 AA 2.5.8) */
.dbtb-card__title a, .dbtb-row__title, .entry-title a, .entry-meta a, .cat-links a, .tags-links a, .comments-link a {
	display: inline-block;
	min-height: 24px;
}
.dbtb-card__title a, .dbtb-row__title { line-height: 24px; }

/* =========================================================================
 * Lưới tin kiểu toà soạn (home.php + template-parts của child theme).
 * CSS Grid thuần, không page-builder.
 * ========================================================================= */
.dbtb-zone { margin-bottom: 2.75rem; }
.dbtb-zone__title {
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 3px solid var(--dbtb-brand);
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
}
.dbtb-zone__title a { color: var(--dbtb-ink); text-decoration: none; }
.dbtb-zone__title a:hover { color: var(--dbtb-brand); text-decoration: underline; }

.dbtb-lead, .dbtb-cat { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.dbtb-cat { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; }
.dbtb-lead__side, .dbtb-cat__side { display: grid; gap: 1.25rem; align-content: start; }
.dbtb-lead__side .dbtb-card + .dbtb-card,
.dbtb-cat__side .dbtb-card + .dbtb-card { padding-top: 1.25rem; border-top: 1px solid var(--dbtb-hairline); }

.dbtb-card { min-width: 0; }

/* Astra gắn class blog-layout của nó (ast-article-post, ast-grid-common-col) vào
 * post_class() của MỌI bài, nên thẻ bài của child theme bị ép width: 33.33%.
 * Đo được: .dbtb-card--lead rộng 247px trong cột cha 741px — tiêu đề xuống dòng từng chữ.
 * Trả lại chiều rộng đầy đủ cho thẻ bài của child theme. */
.dbtb-card,
.dbtb-card.ast-article-post,
.dbtb-card.ast-grid-common-col,
.dbtb-card--lead,
.dbtb-card--brief,
.dbtb-card--row {
	width: 100%;
	max-width: 100%;
	float: none;
	clear: none;
	padding-left: 0;
	padding-right: 0;
}
.dbtb-card__media { display: block; margin-bottom: 0.7rem; overflow: hidden; }
.dbtb-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
	transition: transform 0.35s ease; }
.dbtb-card__media:hover .dbtb-card__img { transform: scale(1.03); }

.dbtb-card__title { margin: 0.2rem 0 0.35rem; }
.dbtb-card--lead .dbtb-card__title { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
.dbtb-card--brief .dbtb-card__title { font-size: 1.15rem; }
.dbtb-card--row .dbtb-card__title { font-size: 1.0625rem; }
.dbtb-card__meta { font-size: 0.8125rem; color: var(--dbtb-muted); margin: 0; }
.dbtb-card__excerpt { margin: 0.45rem 0 0; color: var(--dbtb-muted); }
.dbtb-card--lead .dbtb-card__excerpt { font-size: 1.0625rem; }
.dbtb-card--brief .dbtb-card__excerpt { font-size: 0.9375rem; }
.dbtb-card--row { padding-bottom: 0.75rem; border-bottom: 1px solid var(--dbtb-hairline); }

/* Dòng tin còn lại */
.dbtb-rows { list-style: none; margin: 0; padding: 0; }
.dbtb-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
	padding: 0.7rem 0; border-bottom: 1px solid var(--dbtb-hairline); }
.dbtb-row__cat a { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--dbtb-brand); text-decoration: none; display: inline-block; min-height: 24px; line-height: 24px; }
.dbtb-row__title { font-weight: 700; color: var(--dbtb-ink); text-decoration: none; }
.dbtb-row__title:hover { color: var(--dbtb-brand); text-decoration: underline; }
.dbtb-row__date { font-size: 0.8125rem; color: var(--dbtb-muted); white-space: nowrap; }

/* Tiêu đề trang chủ */
.dbtb-home-title { margin-bottom: 1.5rem; border-bottom: 3px solid var(--dbtb-brand); }
.dbtb-home-title .page-title { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.dbtb-home-desc { color: var(--dbtb-muted); font-size: 1.0625rem; margin: 0.3rem 0 0.85rem; }

/* Chân trang tối cho ra dáng báo.
 * Lỗi thật đã đo: đặt nền tối cho .ast-small-footer thôi thì phần tử bọc vẫn giữ nền sáng
 * (--ast-global-color-4 = #f0e9e0) trong khi liên kết bên trong đổi sang màu paper, cho ra
 * tương phản 1.12:1 — chữ gần như vô hình. Phải đặt nền VÀ chữ trên cùng một phần tử. */
.site-footer,
.site-footer .ast-primary-footer-wrap,
.site-footer .ast-small-footer,
.site-footer .ast-footer-copyright,
.ast-footer-copyright { background-color: var(--dbtb-ink); color: var(--dbtb-paper); }
.site-footer a, .ast-footer-copyright a { color: var(--dbtb-paper); text-decoration: underline; }

@media (max-width: 768px) {
	.dbtb-lead, .dbtb-cat { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
	.dbtb-row { grid-template-columns: minmax(0, 1fr) auto; }
	.dbtb-row__cat { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.dbtb-card__media:hover .dbtb-card__img { transform: none; }
}

/* =========================================================================
 * Cân lại nhịp thị giác.
 *
 * Đo trên ảnh chụp: cột trái (bài dẫn) cao 631px trong khi cột phải (4 tin) cao 2486px,
 * nên dưới bài dẫn hụt một khoảng trắng lớn; các khối chuyên mục cũng vậy. Và bài không có
 * ảnh bìa thì thẻ bắt đầu bằng nhãn chuyên mục, để lại lỗ hổng bên cạnh các thẻ có ảnh.
 * Sửa bằng tỉ lệ ảnh và cách canh cột — không đổi bố cục.
 * ========================================================================= */

/* Bài dẫn dùng ảnh 4:3 để cột trái cao gần bằng cột phải; tin phụ dùng 16:10 cho gọn. */
.dbtb-card--lead .dbtb-card__img { aspect-ratio: 4 / 3; }
.dbtb-card--brief .dbtb-card__img { aspect-ratio: 16 / 10; }

/* Cột phải xếp sát nhau, không kéo giãn theo cột trái */
.dbtb-lead, .dbtb-cat { align-items: start; }
.dbtb-lead__side, .dbtb-cat__side { align-content: start; }

/* Khối chuyên mục khép lại bằng đường kẻ để mắt biết hết một mục */
.dbtb-zone { margin-bottom: 2.25rem; }
.dbtb-zone--cat { padding-bottom: 1.5rem; border-bottom: 1px solid var(--dbtb-hairline); }

/* Thẻ không có ảnh bìa: gạch đầu bằng đường kẻ trên để không trông như lỗi */
.dbtb-card--brief:not(:has(.dbtb-card__media)),
.dbtb-card--lead:not(:has(.dbtb-card__media)) { padding-top: 0.75rem; border-top: 3px solid var(--dbtb-brand); }

/* Tin trong cột phải của khối chuyên mục: gọn hơn, đúng vai trò phụ */
.dbtb-cat__side .dbtb-card__title { font-size: 1.0625rem; line-height: 1.34; }
.dbtb-cat__main .dbtb-card__excerpt { font-size: 0.9375rem; }

/* =========================================================================
 * Lớp hiệu ứng thị giác — CSS thuần, không thêm JavaScript.
 *
 * Lý do có lớp này: bản trước chỉ có chữ và ảnh tĩnh, không có phản hồi khi trỏ chuột,
 * không có đầu trang bám theo khi cuộn. Đó là lý do giao diện trông "kém hiệu ứng",
 * và nó KHÔNG phụ thuộc theme cha — đổi GeneratePress sang Astra cũng không tự có.
 * ========================================================================= */

/* Thẻ bài nâng nhẹ khi trỏ vào, ảnh zoom chậm bên trong */
.dbtb-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.dbtb-card__media { border-radius: 0.35rem; }
.dbtb-card:hover .dbtb-card__img { transform: scale(1.04); }
.dbtb-card--brief:hover, .dbtb-card--lead:hover { transform: translateY(-2px); }
.dbtb-card--brief:hover, .dbtb-card--lead:hover { box-shadow: 0 6px 20px rgba(26, 17, 25, 0.10); }

/* Tiêu đề: gạch chân trượt vào thay vì đổi màu đột ngột */
.dbtb-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.25s ease;
}
.dbtb-card__title a:hover { background-size: 100% 1px; }

/* Nhãn chuyên mục: dải màu đậm dần khi trỏ vào */
.dbtb-chip a { transition: color 0.2s ease; }

/* Đường kẻ chuyên mục dày lên khi trỏ vào tiêu đề mục */
.dbtb-zone__title { transition: border-color 0.25s ease; }
.dbtb-zone__title:hover { border-color: var(--dbtb-brand-deep); }

/* Đầu trang bám theo khi cuộn (chỉ những theme không có sẵn tính năng này) */
.dbtb-sticky-header .site-header,
.dbtb-sticky-header #masthead { position: sticky; top: 0; z-index: 50;
	background-color: var(--dbtb-paper); box-shadow: 0 1px 0 var(--dbtb-hairline); }

/* =========================================================================
 * Sửa theo kết quả ma trận Playwright 14 thiết bị × 6 trang (84 lượt).
 * ========================================================================= */

/* axe `link-in-text-block` — lỗi THẬT do bảng màu của tôi gây ra:
 * trong dải meta của Astra, liên kết ("Chỉnh sửa hồ sơ của bạn", "Đăng xuất?") chỉ khác
 * chữ xung quanh bằng màu, mà màu brand #8a1538 chỉ đạt 1.24:1 so với chữ xung quanh
 * (WCAG yêu cầu ≥3:1 khi liên kết phân biệt CHỈ bằng màu). Cách sửa chuẩn là cho liên kết
 * dấu hiệu thứ hai ngoài màu — gạch chân — chứ không phải đổi bảng màu. */
.entry-meta a,
.entry-content a,
.ast-single-post-order a,
.post-content a,
.author a,
.ast-post-format- a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
/* Ô nhập của Astra không có nền sáng thì chữ trong ô cũng thiếu tương phản */
input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea {
	background-color: var(--dbtb-paper);
	color: var(--dbtb-ink);
}

/* =========================================================================
 * Vùng chạm. Đo trên 14 thiết bị: nút tìm kiếm của Astra 15x20px, mục menu trên
 * điện thoại 19px cao. axe không báo (chúng đạt miễn trừ khoảng cách của WCAG 2.5.8),
 * nhưng 15x20px thì khó bấm thật trên điện thoại, nên nâng lên.
 * ========================================================================= */
button, input[type="submit"], input[type="button"], .search-submit, .menu-toggle, a.button {
	min-height: 24px;
	min-width: 24px;
}
.search-submit { padding: 0 0.5rem; }

/* Mục điều hướng: đủ cao để chạm; trên màn hình hẹp cho hẳn 44px cho dễ bấm. */
.main-navigation a, .ast-builder-menu a, .ast-nav-menu > li > a, nav[aria-label] a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
@media (max-width: 921px) {
	.main-navigation a, .ast-builder-menu a, .ast-nav-menu > li > a, nav[aria-label] a { min-height: 44px; }
}

/* Liên kết điều hướng bài trước/sau ("Kế tiếp") đo được 16px cao */
.post-navigation a, .nav-links a, .nav-previous a, .nav-next a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* -------------------------------------------------------------------------
 * Sửa vòng 2, theo số đo cụ thể của Playwright.
 * ---------------------------------------------------------------------- */

/* axe `link-in-text-block`: liên kết nằm TRONG một khối chữ mà chỉ phân biệt bằng màu.
 * Đo được ở khung bình luận của Astra (chỉ hiện khi đã đăng nhập):
 *   p.logged-in-as a  -> "#8a1538 so với chữ xung quanh = 1.24:1" (WCAG đòi ≥3:1)
 * Cách sửa đúng là thêm dấu hiệu thứ hai ngoài màu: gạch chân. */
.logged-in-as a,
#ast-commentform a,
.comment-form a,
.comment-respond a,
p a:not(.dbtb-card__title a):not(.dbtb-row__title),
.entry-content p a,
.comment-content p a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* Vùng chạm chân trang và menu phụ. Đo được: mục menu chân trang cao 19-21px,
 * liên kết ghi công của theme cao 20px. Không phải lỗi axe nhưng khó bấm thật. */
.site-footer a,
.footer-widget-area a,
.ast-footer-copyright a,
.ast-builder-footer a,
nav[aria-label] a,
.menu-item a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Trên màn hình hẹp, mọi mục điều hướng đủ 44px cho ngón tay. */
@media (max-width: 921px) {
	.main-navigation a, .ast-builder-menu a, .main-header-menu a,
	.ast-nav-menu > li > a, nav[aria-label] a, .menu-item a, .site-footer a { min-height: 44px; }
}

/* -------------------------------------------------------------------------
 * Sửa vòng 3 — theo phép đo vùng chạm khi KHÔNG đăng nhập (đúng như khách thật).
 *
 * Lỗi thật: link trong tiêu đề mục chuyên mục (`.dbtb-zone__title a`) chỉ cao 19-21px.
 * Tôi đã đặt 24px cho `.dbtb-card__title a` và `.dbtb-row__title` nhưng bỏ sót chính
 * tiêu đề mục — đo được min-height = 0px, display = inline.
 *
 * Ghi chú về hai thứ KHÔNG phải lỗi:
 * - `.skip-link.screen-reader-text` 1x1px: cố ý, chỉ hiện khi focus bàn phím.
 * - Các vi phạm tương phản còn lại nằm trong `#wpadminbar` của WordPress, chỉ hiện khi
 *   đã đăng nhập; khách thật không bao giờ thấy nên không sửa trong theme.
 * ---------------------------------------------------------------------- */
.dbtb-zone__title a,
.dbtb-home-title .page-title,
h2.dbtb-zone__title > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* =========================================================================
 * Vòng 4 — theo số đo trên ảnh chụp 4 loại trang.
 *
 * Lỗi đo được: mỗi khối chuyên mục lệch chiều cao hai cột 420-460px vì cột trái chỉ có
 * 1 bài (ảnh 16:10) còn cột phải 3 dòng tin. Vùng dẫn lệch tới 1259px. Và trang chủ
 * không có vùng ảnh nào đều nhau nên nửa trên trông như danh sách văn bản.
 * ========================================================================= */

/* Dòng tin: ảnh nhỏ bên trái, chữ bên phải — nhịp đều và vẫn có hình */
.dbtb-card--row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.dbtb-card--row .dbtb-card__media { margin-bottom: 0; grid-row: 1 / span 4; }
.dbtb-card--row .dbtb-card__img { aspect-ratio: 1 / 1; border-radius: 0.3rem; }
.dbtb-card--row .dbtb-card__title { font-size: 1rem; line-height: 1.34; margin-top: 0; }
.dbtb-card--row .dbtb-chip { margin: 0 0 0.15rem; }
.dbtb-card--row .dbtb-chip a { font-size: 0.6875rem; min-height: 20px; line-height: 20px; }
.dbtb-card--row .dbtb-card__meta { font-size: 0.75rem; }

/* Cột phải của vùng dẫn: bốn dòng tin, mỗi dòng có đường kẻ */
.dbtb-lead__side .dbtb-card + .dbtb-card { padding-top: 0.9rem; border-top: 1px solid var(--dbtb-hairline); }
.dbtb-lead__side .dbtb-card--row { padding-bottom: 0.9rem; border-bottom: 0; }

/* Khối "Mới nhất": lưới 4 cột đều nhau, ảnh cùng tỉ lệ */
.dbtb-latest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.dbtb-latest .dbtb-card__img { aspect-ratio: 16 / 10; }
@media (max-width: 1024px) { .dbtb-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dbtb-latest { grid-template-columns: minmax(0, 1fr); } }

/* Khối chuyên mục: cột trái 2 bài nhỏ xếp dọc để cân với 3 dòng tin bên phải */
.dbtb-cat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.75rem; }
.dbtb-cat__side .dbtb-card--row { padding-bottom: 0.8rem; }

/* Nút "Xem tất cả" của mỗi chuyên mục */
.dbtb-more {
	display: inline-flex; align-items: center; min-height: 24px;
	margin-top: 0.9rem; font-size: 0.875rem; font-weight: 700;
	color: var(--dbtb-brand); text-decoration: none;
}
.dbtb-more:hover { text-decoration: underline; color: var(--dbtb-brand-deep); }

/* Đường kẻ dưới cùng của mỗi vùng để mắt biết hết một mục */
.dbtb-zone { padding-bottom: 0.5rem; }

/* =========================================================================
 * Vòng 5 — trang bài viết và các trang còn lại, cho người đọc.
 * ========================================================================= */

/* Cột chữ bài viết: 72 ký tự là ngưỡng dễ đọc; dài hơn mắt khó dò dòng. */
.single .entry-content > *,
.single .entry-header > *,
.page .entry-content > *,
.page .entry-header > * { max-width: 72ch; margin-inline: auto; }

/* Nhưng mục lục và tin liên quan được rộng hơn để lưới 3 cột hiển thị đủ */
.single .dbtb-related, .single .dbtb-related .dbtb-latest { max-width: none; }

/* Đường dẫn + thời gian đọc trên tiêu đề */
.dbtb-single-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
	margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--dbtb-muted); }
.dbtb-crumbs .rank-math-breadcrumb { font-size: 0.875rem; color: var(--dbtb-muted); margin: 0; }
.dbtb-crumbs a { color: var(--dbtb-brand); text-decoration: underline; text-underline-offset: 0.15em;
	display: inline-flex; align-items: center; min-height: 24px; }
.dbtb-readtime { margin: 0; white-space: nowrap; }

/* Mục lục */
.dbtb-toc { max-width: 72ch; margin: 0 auto 2rem; padding: 1rem 1.25rem;
	background: var(--dbtb-surface); border-left: 4px solid var(--dbtb-brand); border-radius: 0.3rem; }
.dbtb-toc > summary { cursor: pointer; font-weight: 700; font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.125rem; color: var(--dbtb-ink); min-height: 24px; }
.dbtb-toc > ol { margin: 0.75rem 0 0; padding-left: 1.4rem; }
.dbtb-toc li { margin: 0.35rem 0; }
.dbtb-toc .dbtb-toc__l3 { margin-left: 1rem; font-size: 0.9375rem; }
.dbtb-toc a { color: var(--dbtb-brand); text-decoration: underline; text-underline-offset: 0.15em; }

/* Vào bài: dòng dẫn đầu tiên nhấn mạnh hơn một chút */
.single .entry-content > p:first-of-type { font-size: 1.125rem; color: var(--dbtb-ink); }

/* Tin liên quan */
.dbtb-related { max-width: none; margin: 3rem auto 0; padding-top: 1.75rem; border-top: 3px solid var(--dbtb-brand); }
.dbtb-related > h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }

/* Điều hướng bài trước/sau */
.post-navigation, .nav-links { max-width: 72ch; margin: 2rem auto 0; }
.post-navigation a, .nav-links a { display: inline-flex; align-items: center; min-height: 24px; line-height: 1.4; }

/* Trang tĩnh và chuyên mục: header gọn, có đường kẻ phân cách */
.page .entry-header, .archive .page-header, .category .page-header { padding-bottom: 1rem;
	border-bottom: 3px solid var(--dbtb-brand); margin-bottom: 1.75rem; }
.page .entry-title, .archive .page-title, .category .page-title { margin-bottom: 0.35rem; }
.category .taxonomy-description { color: var(--dbtb-muted); max-width: 72ch; }

/* Thẻ bài ở dải chuyên mục: nền sáng, viền mảnh, có phản hồi khi trỏ vào */
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
	background: var(--dbtb-paper); border: 1px solid var(--dbtb-hairline); }

/* Chân trang: chữ ghi công không còn là liên kết nổi bật trên nền tối */
.ast-footer-copyright { color: var(--dbtb-paper); }
.ast-footer-copyright a { color: var(--dbtb-paper); text-decoration: underline; opacity: 0.9; }


/* -------------------------------------------------------------------------
 * Vòng 6 — lưới chuyên mục ba cột đều nhau.
 *
 * Thay cách chia "trái lớn / phải nhỏ" bằng lưới đều: hết lệch cột và hết chỗ trống.
 * Lưu ý kỹ thuật: `:empty` KHÔNG dùng được để phát hiện khối rỗng ở đây, vì PHP sinh
 * khoảng trắng và xuống dòng bên trong thẻ nên thẻ không bao giờ "empty" theo CSS.
 * ---------------------------------------------------------------------- */
.dbtb-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.dbtb-grid3 .dbtb-card__img { aspect-ratio: 16 / 10; }
.dbtb-grid3 .dbtb-card__title { font-size: 1.1rem; line-height: 1.34; }
.dbtb-grid3 .dbtb-card__excerpt { font-size: 0.9375rem; }
@media (max-width: 1024px) { .dbtb-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dbtb-grid3 { grid-template-columns: minmax(0, 1fr); } }

/* "Còn lại trong ngày": danh sách dòng dày, không ảnh, để kết trang */
.dbtb-rows { list-style: none; margin: 0; padding: 0; }
.dbtb-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1rem;
	align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--dbtb-hairline); }
.dbtb-row__cat a { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--dbtb-brand); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 24px; }
.dbtb-row__title { font-weight: 700; color: var(--dbtb-ink); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 24px; }
.dbtb-row__title:hover { color: var(--dbtb-brand); text-decoration: underline; }
.dbtb-row__date { font-size: 0.8125rem; color: var(--dbtb-muted); white-space: nowrap; }
@media (max-width: 640px) { .dbtb-row { grid-template-columns: minmax(0, 1fr) auto; } .dbtb-row__cat { grid-column: 1 / -1; } }

.dbtb-zone { padding-bottom: 0.75rem; margin-bottom: 2.5rem; }

/* -------------------------------------------------------------------------
 * Vòng 7 — lưới tự giãn để không bao giờ để lỗ.
 *
 * `repeat(3, 1fr)` cứng nhắc: chuyên mục chỉ còn 1 bài thì hai phần ba hàng trống (đo trên
 * ảnh chụp bản trước). `auto-fit` + `minmax` cho thẻ giãn ra lấp kín hàng, nên dù chuyên
 * mục còn 1, 2 hay 3 bài thì hàng vẫn kín và trông có chủ đích.
 * ---------------------------------------------------------------------- */
.dbtb-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; align-items: start; }
@media (max-width: 560px) { .dbtb-grid3 { grid-template-columns: minmax(0, 1fr); } }
.dbtb-grid3 .dbtb-card__img { aspect-ratio: 16 / 10; }
.dbtb-grid3 .dbtb-card__title { font-size: 1.1rem; line-height: 1.34; }
.dbtb-grid3 .dbtb-card__excerpt { font-size: 0.9375rem; }
/* Chuyên mục chỉ còn 1 bài: cho thẻ nằm NGANG (ảnh trái, chữ phải) để lấp kín hàng.
 * Nếu chỉ giới hạn bề rộng thì nửa hàng bên phải trống — đo trên ảnh chụp bản trước. */
.dbtb-grid3:has(> .dbtb-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; align-items: center;
}
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__media { margin-bottom: 0; grid-row: 1 / span 4; }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__img { aspect-ratio: 16 / 9; }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
@media (max-width: 768px) {
	.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card { grid-template-columns: minmax(0, 1fr); }
	.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__media { grid-row: auto; margin-bottom: 0.7rem; }
}

/* Khối "Còn lại trong ngày": hai cột dòng tin trên màn hình rộng cho đỡ trống */
.dbtb-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 0 2rem; }
@media (max-width: 640px) { .dbtb-rows { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------------
 * Vòng 8 — vùng chạm còn sót, theo phép đo khi không đăng nhập.
 *
 * Đo được (không cookie, không admin bar):
 *  - Nhãn chuyên mục trong dòng tin: 20px cao (tôi đã đặt min-height 20px cho biến thể row).
 *  - Liên kết mục lục trong bài viết: 20px, display inline, min-height 0.
 *  - Khối bình luận ("Chỉnh sửa hồ sơ của bạn", "Đăng xuất?"): 20px, inline.
 * Tất cả nâng lên 24px. Không ảnh hưởng hình dáng vì chúng đang là liên kết chữ.
 * ---------------------------------------------------------------------- */
.dbtb-card--row .dbtb-chip a,
.dbtb-toc a,
.dbtb-toc summary,
.logged-in-as a,
#ast-commentform a,
.comment-respond a,
.ast-comment-info a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.dbtb-card--row .dbtb-chip a { min-height: 24px; line-height: 24px; font-size: 0.6875rem; }
.dbtb-toc li { line-height: 1.5; }

/* Menu di động của Astra: menu-link nằm trong ngăn kéo, nút mở là thứ cần đủ 44px. */
.menu-toggle, .ast-button-wrap .menu-toggle, #ast-mobile-header .menu-toggle,
.ast-mobile-menu-trigger-minimal, button.menu-toggle {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* =========================================================================
 * Vòng 9 (sửa) — cột bên cho trang bài viết.
 *
 * Lần đầu tôi đặt grid lên `.ast-container`, nhưng đó là flex dùng CHUNG cho mọi trang:
 * grid 832px/320px của tôi bóp nội dung bài còn 260px (đo được). Nay chỉ canh hai cột bên
 * trong một wrapper riêng của child theme, không đụng vào `.ast-container`.
 * ========================================================================= */
@media (min-width: 1025px) {
	.single .dbtb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
	.single .dbtb-wrap > #primary { width: auto; max-width: none; margin: 0; }
	.single .dbtb-wrap > .dbtb-side { width: auto; max-width: none; }
}
/* Dưới 1025px: một cột, cột bên xuống dưới thành lưới hai cột */
.single .dbtb-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; margin-top: 2rem; }
@media (max-width: 600px) { .single .dbtb-side { grid-template-columns: minmax(0, 1fr); } }

.dbtb-side__box { padding-bottom: 1.5rem; border-bottom: 1px solid var(--dbtb-hairline); }
.dbtb-side__box:last-child { border-bottom: 0; }
.dbtb-side__title { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase;
	border-bottom: 3px solid var(--dbtb-brand); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.dbtb-side__list { list-style: none; margin: 0; padding: 0; }
.dbtb-side__list li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5rem;
	padding: 0.6rem 0; border-bottom: 1px solid var(--dbtb-hairline); align-items: baseline; }
.dbtb-side__list li:last-child { border-bottom: 0; }
.dbtb-side__num { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 700;
	color: var(--dbtb-brand); line-height: 1; }
.dbtb-side__list a, .dbtb-side__cats a { color: var(--dbtb-ink); text-decoration: none; font-weight: 700;
	font-size: 0.9375rem; line-height: 1.4; display: inline-flex; align-items: center; min-height: 24px; }
.dbtb-side__list a:hover, .dbtb-side__cats a:hover { color: var(--dbtb-brand); text-decoration: underline; }
.dbtb-side__cats { list-style: none; margin: 0; padding: 0; }
.dbtb-side__cats li { border-bottom: 1px solid var(--dbtb-hairline); }
.dbtb-side__cats a { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; }
.dbtb-side__count { font-size: 0.8125rem; color: var(--dbtb-muted); font-weight: 400; }

/* Tin liên quan: cho rộng bằng cột nội dung, không bó theo 72ch */
.single .dbtb-related, .single .dbtb-related .dbtb-latest { max-width: none; }

/* -------------------------------------------------------------------------
 * Vòng 10 — nới container hẹp của Astra.
 *
 * Nguyên nhân thật của bố cục bẹp: Astra đặt `max-width: 750px` cho container nội dung
 * trang bài (`ast-two-container`), nên lưới hai cột chỉ có 710px để chia — đo được
 * `#primary` 342px, nội dung 260px. Không phải lỗi grid của tôi.
 * Nới lên bằng bề rộng site để cột nội dung rộng ~66 ký tự và cột bên 320px.
 * ---------------------------------------------------------------------- */
.single .site-content > .ast-container,
.single .ast-container.ast-two-container,
.page .site-content > .ast-container,
.archive .site-content > .ast-container {
	max-width: 1280px;
	width: 100%;
}
/* Cột nội dung bài vẫn giữ 72ch để dễ đọc, nhưng canh trái trong cột rộng */
.single .dbtb-wrap > #primary .entry-content > * { max-width: 72ch; margin-inline: 0; }
.single .dbtb-wrap > #primary .entry-header > * { max-width: 72ch; margin-inline: 0; }
.single .dbtb-wrap > #primary .dbtb-toc { max-width: 72ch; margin-inline: 0; }

/* Breadcrumb cho trang lưu trữ, trang tĩnh, tìm kiếm */
.dbtb-archive-crumbs { max-width: 72ch; margin-bottom: 0.9rem; font-size: 0.875rem; color: var(--dbtb-muted); }
.dbtb-archive-crumbs .rank-math-breadcrumb { margin: 0; }
.dbtb-archive-crumbs a { color: var(--dbtb-brand); text-decoration: underline; text-underline-offset: 0.15em;
	display: inline-flex; align-items: center; min-height: 24px; }

/* Thẻ bài ở trang lưu trữ: cao đều nhau để hàng cuối không so le */
.archive .ast-article-post, .category .ast-article-post, .blog .ast-article-post { display: flex; flex-direction: column; }
.archive .ast-article-post .ast-post-format-, .category .ast-article-post .ast-post-format- { display: flex; flex-direction: column; height: 100%; }
.archive .entry-title, .category .entry-title { flex: 0 0 auto; }

/* Trang lưu trữ: lưới thẻ dùng auto-fit để số bài lẻ vẫn kín hàng */
.archive .ast-row, .category .ast-row, .search .ast-row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.75rem;
	margin: 0; padding: 0;
}
.archive .ast-row > article, .category .ast-row > article, .search .ast-row > article {
	width: 100% !important; max-width: 100% !important; margin: 0 !important; clear: none !important;
}
@media (max-width: 640px) { .archive .ast-row, .category .ast-row, .search .ast-row { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------------
 * Vòng 11 (sửa) — Astra ép `display: flex` lên thẻ bài.
 *
 * Bản đầu của khối này dùng `display: block !important` và `height: auto !important`. Đo lại
 * thì chính `!important` đó đè mất mọi luật thêm sau: thẻ 2 bài không chuyển được sang dạng
 * nằm ngang, thẻ 1 bài vẫn để ảnh cao 656px vì `height: auto !important` khoá tỉ lệ gốc.
 *
 * Không cần `!important`: độ đặc hiệu của `.dbtb-grid3 article.dbtb-card.ast-article-post`
 * (0,3,1) đã cao hơn `.ast-article-post` (0,1,0) của Astra.
 * ---------------------------------------------------------------------- */
.dbtb-grid3 article.dbtb-card.ast-article-post,
.dbtb-latest article.dbtb-card.ast-article-post,
.dbtb-lead__main article.dbtb-card.ast-article-post,
.dbtb-lead__side article.dbtb-card.ast-article-post { display: block; }

/* Dòng tin: grid 2 cột, ảnh cố định bên trái, không cho Astra giãn */
.dbtb-card--row,
.dbtb-card.dbtb-card--row,
article.dbtb-card--row.ast-article-post,
.dbtb-lead__side article.dbtb-card.ast-article-post { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.dbtb-card--row .dbtb-card__media,
.dbtb-card--row a.dbtb-card__media { display: block; width: 6.5rem; max-width: 6.5rem; grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.dbtb-card--row .dbtb-card__img,
.dbtb-card--row img.dbtb-card__img { width: 6.5rem; height: 6.5rem; max-width: 6.5rem; max-height: 6.5rem; aspect-ratio: 1 / 1; object-fit: cover; }
.dbtb-card--row > .dbtb-chip,
.dbtb-card--row > .entry-title,
.dbtb-card--row > .entry-meta { grid-column: 2; }

/* =========================================================================
 * Vòng 12 — hàng lưới đều nhau. Số đo từ audit-grid.mjs:
 *
 *  - home @1440: khối 3 thẻ có cao 408/408/408 (đều) nhưng khối khác 408..433.
 *  - home @768: khối 2 thẻ cao 427/404, và hàng cuối chỉ 1 thẻ để trống nửa hàng.
 *  - single @1440: tin liên quan rộng 1900px nên thẻ co lại 180px và CAO 450px.
 *
 * Nguyên nhân chung: chiều cao thẻ do lượng chữ quyết định. Kẹp tiêu đề và trích đoạn
 * theo số dòng thì mọi thẻ trong cùng một lưới cao bằng nhau.
 * ========================================================================= */
.dbtb-grid3 .dbtb-card__title,
.dbtb-latest .dbtb-card__title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
	overflow: hidden; min-height: calc(3 * 1.34em);
}
.dbtb-grid3 .dbtb-card__excerpt,
.dbtb-latest .dbtb-card__excerpt {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
	overflow: hidden; min-height: calc(3 * 1.5em);
}
/* Lưới 2 cột ở khổ máy tính bảng: 3 thẻ thì thẻ thứ ba giãn hết hàng cho kín */
@media (min-width: 561px) and (max-width: 1024px) {
	.dbtb-grid3 > .dbtb-card:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
	.dbtb-grid3 > .dbtb-card:last-child:nth-child(odd):not(:first-child) .dbtb-card__img { aspect-ratio: 21 / 9; }
}
.dbtb-rows .dbtb-row { min-height: 2.75rem; }

/* =========================================================================
 * Tin liên quan: giới hạn 3 cột, không để thẻ teo còn 180px.
 *
 * Đo được: khối rộng 1900px (vượt cả cột nội dung 872px vì nằm ngoài #primary),
 * lưới 4 cột chia ra 179.5px/thẻ, thẻ cao 450px — thẻ hẹp mà dài, đọc rất khó.
 * Kẹp còn 3 cột, mỗi thẻ ~250px, và đưa khối về đúng bề rộng cột nội dung.
 * ========================================================================= */
.single .dbtb-related { max-width: 72ch; margin-inline: 0; }
.single .dbtb-related .dbtb-latest { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .single .dbtb-related .dbtb-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .single .dbtb-related .dbtb-latest { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * Hàng cuối của lưới chuyên mục ở khổ điện thoại: thẻ lẻ giãn kín hàng.
 * ========================================================================= */
@media (max-width: 560px) { .dbtb-grid3 > .dbtb-card { width: 100%; } }

/* =========================================================================
 * Vòng 13 — ép hàng đều tuyệt đối.
 *
 * Đo được: thẻ cùng một hàng vẫn lệch 5-6px (449/450/455; 427/421). Nguyên nhân: tôi đặt
 * `align-items: start` trên lưới, nên thẻ KHÔNG giãn theo hàng mà cao theo lượng chữ của
 * chính nó. Đổi sang `stretch` (mặc định của grid) + cho thẻ cao 100% thì mọi thẻ trong
 * cùng một hàng cao bằng nhau chính xác, bất kể chữ dài ngắn.
 * ========================================================================= */
.dbtb-grid3, .dbtb-latest, .dbtb-rows { align-items: stretch; }
.dbtb-grid3 > .dbtb-card,
.dbtb-latest > .dbtb-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Ảnh giữ tỉ lệ, không giãn theo chiều cao thẻ */
.dbtb-grid3 > .dbtb-card .dbtb-card__media,
.dbtb-latest > .dbtb-card .dbtb-card__media { flex: 0 0 auto; }
/* Phần chữ chiếm phần còn lại; trích đoạn đẩy xuống đáy cho các thẻ thẳng hàng chân */
.dbtb-grid3 > .dbtb-card .dbtb-card__excerpt,
.dbtb-latest > .dbtb-card .dbtb-card__excerpt { margin-top: auto; }

/* =========================================================================
 * Kho lưu trữ: 4 bài xếp 3+1 để lỗ một phần ba hàng (đo được lệch y=535px).
 * Cho thẻ lẻ cuối hàng giãn hết bề ngang — cùng cách đã dùng ở trang chủ.
 * ========================================================================= */
/* -------------------------------------------------------------------------
 * Kho lưu trữ: để lưới TỰ chọn số cột chia hết số bài, thay vì ép thẻ lẻ giãn hàng.
 *
 * Tôi từng thêm luật "thẻ cuối hàng giãn kín hàng" bằng `:nth-child(3n+1)`. Đo lại thì nó
 * SAI ở khổ 2 cột: với 4 bài mà chia 2 cột thì phải là 2x2, nhưng luật ép thẻ thứ tư giãn
 * hết hàng thành 2+1, kéo lệch y tới 959px. Bỏ luật đó.
 *
 * Cách đúng: dùng minmax(17rem) để tự chọn số cột. Ở khổ 1440 có 4 cột -> 4 bài vừa đúng
 * một hàng; ở khổ 768 có 2 cột -> 2x2 vừa đúng. Hàng cuối ít thẻ hơn là bình thường với
 * lưới thẻ, miễn là các thẻ cao đều nhau.
 * ---------------------------------------------------------------------- */
.archive .ast-row, .category .ast-row, .search .ast-row {
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	align-items: stretch;
}

/* Thẻ kho lưu trữ thẳng hàng chân */
.archive .ast-row > article, .category .ast-row > article, .search .ast-row > article {
	height: 100%; display: flex; flex-direction: column;
}
.archive .ast-row > article .ast-post-format-, .category .ast-row > article .ast-post-format-,
.search .ast-row > article .ast-post-format- { display: flex; flex-direction: column; height: 100%; }

/* =========================================================================
 * Vòng 14 — kích thước thẻ theo số cột, và hàng đều cho mọi số bài.
 *
 * Đo được (probe-cards.mjs):
 *  - Thẻ 1 bài: rộng 1200px, ảnh cao 656px -> dải ảnh khổng lồ. Ảnh gốc chỉ 1200x675.
 *  - Thẻ 2 bài: rộng 588px mỗi thẻ -> ảnh 554x346, thẻ cao 601px; nhưng cùng lúc khối
 *    3 bài cho thẻ 384x473. Ba cỡ thẻ khác nhau trong cùng một trang.
 *  - `display` tính ra là `block`, không phải `flex` như tôi khai, nên ảnh không bị chặn
 *    chiều cao (mediaH 656px trong khi aspect-ratio 16/10 phải cho ~416px).
 *
 * Cách sửa: một cỡ thẻ cho mọi khối — lưới tối đa 3 cột, thẻ lẻ nằm ngang, ảnh bị khoá
 * theo tỉ lệ.
 * ========================================================================= */
.dbtb-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .dbtb-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dbtb-grid3 { grid-template-columns: minmax(0, 1fr); } }

/* Khoá ảnh theo tỉ lệ — dùng cả aspect-ratio lẫn chiều cao tính từ bề rộng để không
   phụ thuộc việc trình duyệt có hỗ trợ aspect-ratio hay không. */
.dbtb-grid3 .dbtb-card__media,
.dbtb-latest .dbtb-card__media { display: block; overflow: hidden; }
.dbtb-grid3 .dbtb-card__img,
.dbtb-latest .dbtb-card__img { aspect-ratio: 16 / 10; height: auto; max-height: 15rem; object-fit: cover; width: 100%; }

/* --- Hai bài trong một khối: hai thẻ nằm ngang, ảnh trái chữ phải --- */
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start;
}
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__media {
	grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0;
}
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__img { aspect-ratio: 1 / 1; max-height: none; }
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__title { font-size: 1.05rem; -webkit-line-clamp: 4; min-height: 0; }
.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__excerpt { -webkit-line-clamp: 2; min-height: 0; font-size: 0.875rem; }

/* --- Ba bài: thẻ thứ ba nằm ngang, giãn hai cột còn lại của hàng dưới --- */
.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) {
	grid-column: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 1.25rem; align-items: center;
}
.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) .dbtb-card__media {
	grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0;
}
.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) .dbtb-card__img { aspect-ratio: 16 / 9; max-height: none; }
.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) .dbtb-card__title { -webkit-line-clamp: 3; min-height: 0; }

/* --- Một bài: thẻ nằm ngang, cột chữ giới hạn để không thành dòng quá dài --- */
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center;
}
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__media { grid-column: 1; grid-row: 1 / span 5; margin-bottom: 0; }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__img { aspect-ratio: 16 / 9; max-height: 20rem; }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); -webkit-line-clamp: 3; min-height: 0; }
.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__excerpt { font-size: 1rem; max-width: 48ch; }

/* Màn hình hẹp: mọi thẻ về dạng dọc */
@media (max-width: 768px) {
	.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card,
	.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card,
	.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) { grid-template-columns: minmax(0, 1fr); }
	.dbtb-grid3:has(> .dbtb-card:only-child) > .dbtb-card .dbtb-card__media,
	.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__media,
	.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) .dbtb-card__media { grid-row: auto; margin-bottom: 0.7rem; }
	.dbtb-grid3:has(> .dbtb-card:nth-child(3):last-child) > .dbtb-card:nth-child(3) { grid-column: 1 / -1; }
	.dbtb-grid3:has(> .dbtb-card:nth-child(2):last-child) > .dbtb-card .dbtb-card__img { aspect-ratio: 16 / 10; }
}

/* =========================================================================
 * Tin liên quan: hai bài thì mỗi bài nằm ngang cho cân, ba bài thì lưới 3 cột.
 * Đo được ở khổ 768: hàng 2 thẻ rồi hàng 1 thẻ lệch 446px so với 452px.
 * ========================================================================= */
@media (min-width: 561px) and (max-width: 900px) {
	.single .dbtb-related .dbtb-latest { grid-template-columns: minmax(0, 1fr); }
	.single .dbtb-related .dbtb-latest > .dbtb-card {
		display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: start;
	}
	.single .dbtb-related .dbtb-latest > .dbtb-card .dbtb-card__media { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; width: 8rem; }
	.single .dbtb-related .dbtb-latest > .dbtb-card .dbtb-card__img { aspect-ratio: 1 / 1; width: 8rem; max-height: 8rem; }
	.single .dbtb-related .dbtb-latest > .dbtb-card .dbtb-card__title { -webkit-line-clamp: 3; min-height: 0; }
	.single .dbtb-related .dbtb-latest > .dbtb-card .dbtb-card__excerpt { -webkit-line-clamp: 2; min-height: 0; }
}