/* Khu Tin tức: 2 cột như trang Giới thiệu — inc/tin-tuc-nav.php.
   Cột trái được in SAU #content (hook của The7) nên đưa lên trái bằng `order`, không đảo HTML.
   Số đo lấy đúng `.tdc-page__shell--nav` của page.css: 262px + gap 40px. */
body.tdc-tin .wf-container-main {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	/* The7 đặt sẵn lưới có TÊN (`grid-template-areas` + `#content { grid-area: content }`) cho
	   bố cục sidebar của nó. Để nguyên thì #content bị ghim vào vùng tên đó, sinh ra 4 cột ngầm
	   và nội dung rơi xuống dưới cột trái, rộng 154px (đo 23/09). Xoá tên, xếp theo `order`. */
	grid-template-areas: none !important;
	gap: 40px;
	align-items: start;
}
body.tdc-tin .wf-container-main > #content { grid-area: auto !important; grid-column: 2; grid-row: 1; order: 2; min-width: 0; }
body.tdc-tin .wf-container-main > .tdc-tin__aside { grid-area: auto !important; grid-column: 1; grid-row: 1; order: 1; margin-top: 36px; }

@media (max-width: 980px) {
	body.tdc-tin .wf-container-main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	/* page.css đặt `.tdc-page__aside { display: contents }` ở khổ này: card liên hệ và menu
	   thành ô lưới riêng, xếp SAU danh sách/bài (order 2, 3) — cùng thứ tự với trang Giới thiệu. */
	body.tdc-tin .wf-container-main > #content { grid-column: 1; grid-row: auto; order: 1; }
	body.tdc-tin .wf-container-main > .tdc-tin__aside { grid-column: 1; grid-row: auto; margin-top: 0; }
	body.tdc-tin .wf-container-main > .tdc-tin__aside > * { grid-column: 1; }
	body.tdc-tin .wf-container-main > .tdc-tin__aside > * { margin-bottom: 0; }

	/* Riêng khu tin: menu nhóm tin lên ĐẦU, gọn thành một hàng nút cuộn ngang. Trang Giới thiệu
	   để menu cuối bài là hợp (đọc hết một trang rồi mới sang trang kế), nhưng ở đây việc chính
	   LÀ chuyển nhóm tin — để cuối thì nó nằm dưới 4.400px danh sách (đo 390px, 23/09). */
	body.tdc-tin .tdc-subnav { order: 0; margin: 0 -16px; border: 0; background: transparent; }
	body.tdc-tin .tdc-subnav__heading { display: none; }
	body.tdc-tin .tdc-subnav .tdc-subnav__list {
		display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 6px; scrollbar-width: none;
	}
	body.tdc-tin .tdc-subnav__list::-webkit-scrollbar { display: none; }
	body.tdc-tin .tdc-subnav__list li { flex: 0 0 auto; }
	body.tdc-tin .tdc-subnav__list li + li { border-top: 0; }
	body.tdc-tin .tdc-subnav__list a {
		display: flex; align-items: center; min-height: 40px; padding: 8px 16px;
		border: 1px solid #cfd6de; border-radius: 999px; background: #fff; white-space: nowrap;
		font-size: 14px; font-weight: 600;
	}
	body.tdc-tin .tdc-subnav__list a::before { display: none; }
	body.tdc-tin .tdc-subnav__list li.is-current a { background: var(--tdc-navy); border-color: var(--tdc-navy); color: #fff; }
}

/* ---- Tin liên quan cuối bài (khối có sẵn của The7, bật ở inc/bai-viet.php) ----
   Theo mẫu tedi.vn khách gửi: 2 cột, ảnh nhỏ trái + tiêu đề + ngày. The7 mặc định 3 cột ⇒ trong
   cột nội dung 990px mỗi ô chỉ còn ~200px chữ, tiêu đề gãy 4–5 dòng. */
body.tdc-tin .single-related-posts { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e3e6ea; }
body.tdc-tin .single-related-posts > h3 {
	font-size: 22px; line-height: 1.3; margin: 0 0 20px; padding-left: 12px;
	border-left: 4px solid var(--tdc-blue);
}
body.tdc-tin .single-related-posts .items-grid {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; margin: 0 !important;
}
body.tdc-tin .single-related-posts .related-item { width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
body.tdc-tin .single-related-posts .post-content a { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--tdc-dark); }
body.tdc-tin .single-related-posts .post-content a:hover { color: var(--tdc-blue-ink); }
body.tdc-tin .single-related-posts time { font-size: 13px; color: var(--tdc-muted); }
/* Bài không có ảnh đại diện (tin 2011 từ web cũ): The7 để một ô trắng viền mỏng — nhìn như ảnh hỏng.
   Thay bằng ô màu thương hiệu. */
body.tdc-tin .single-related-posts .no-avatar {
	display: flex !important; align-items: center; justify-content: center;
	background: var(--tdc-navy) !important; border: 0 !important;
}
body.tdc-tin .single-related-posts .no-avatar::after {
	content: "TDC"; font: 700 18px/1 var(--tdc-font); letter-spacing: .08em; color: var(--tdc-yellow);
}
@media (max-width: 600px) {
	body.tdc-tin .single-related-posts .items-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}