/* Vòng 5 — làn tin tức (góp ý khách 30/10, mục 2.7). Trang danh sách tin + 6 trang chuyên mục
   trình bày theo bản Firebase khách tự dựng (tvgtweb.web.app/tin-tuc.html): hàng nút nhóm tin
   kèm số bài trên đầu, danh sách thẻ ảnh trái – chữ phải, rộng hết khung. Màu CHỈ brand kit.
   Hàng nút in ở inc/tin-tuc-nav.php (body.tdc-tin--ds); bài chi tiết vẫn giữ cột trái. */

/* ---- Lưới: một cột, hàng nút trên, danh sách dưới ---- */
body.tdc-tin.tdc-tin--ds .wf-container-main {
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}
body.tdc-tin.tdc-tin--ds .wf-container-main > #content { grid-column: 1; grid-row: 2; order: 2; padding-top: 0 !important; }
body.tdc-tin.tdc-tin--ds .wf-container-main > .tdc-tin__tabs { grid-area: auto !important; grid-column: 1; grid-row: 1; order: 1; margin-top: 36px; min-width: 0; }

/* ---- Hàng nút nhóm tin ---- */
.tdc-tin__tabs ul {
	position: relative;
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0; padding: 0; list-style: none;
}
.tdc-tin__tabs li { margin: 0; padding: 0; }
.tdc-tin__tabs a {
	box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px;
	min-height: 42px; padding: 8px 12px;
	border: 1px solid var(--tdc-blue-soft); border-radius: 4px; background: #fff;
	font: 600 14px/1.25 var(--tdc-font); color: var(--tdc-navy-deep); text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.tdc-tin__tabs a:hover { border-color: var(--tdc-blue); color: var(--tdc-blue-ink); }
.tdc-tin__so {
	display: inline-block; min-width: 24px; padding: 2px 6px; border-radius: 999px;
	background: var(--tdc-sky); color: var(--tdc-blue-ink);
	font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center;
	font-variant-numeric: tabular-nums;
}
.tdc-tin__tabs a[aria-current] { background: var(--tdc-blue-deep); border-color: var(--tdc-blue-deep); color: #fff; }
.tdc-tin__tabs a[aria-current] .tdc-tin__so { background: #fff; color: var(--tdc-blue-deep); }

/* ---- Thẻ tin ---- */
body.tdc-tin--ds .articles-list { display: grid; gap: 20px; height: auto !important; }
/* Trang chuyên mục (index.php của The7, xem inc/v5-tintuc.php) vẫn bọc mỗi bài trong ô isotope
   `.wf-cell.iso-item` ẩn chờ JS xếp lưới ⇒ trả về khối thường, luôn hiện. */
body.tdc-tin--ds .articles-list > .wf-cell {
	position: static !important; width: auto !important; padding: 0 !important; margin: 0 !important;
	opacity: 1 !important; visibility: visible !important; transform: none !important;
}
body.tdc-tin--ds .articles-list article.post {
	display: flex !important; align-items: stretch;
	margin: 0 !important; padding: 0 !important;
	background: #fff; border: 1px solid #e3e8ec; border-radius: 6px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(2, 64, 94, .05);
	transition: box-shadow .2s, transform .2s;
}
body.tdc-tin--ds .articles-list article.post:hover { box-shadow: 0 8px 24px rgba(2, 64, 94, .12); transform: translateY(-2px); }
body.tdc-tin--ds .articles-list article.post::before,
body.tdc-tin--ds .articles-list article.post::after { display: none !important; }
body.tdc-tin--ds .articles-list .blog-media {
	flex: 0 0 320px; width: 320px !important; margin: 0 !important; padding: 0 !important;
}
body.tdc-tin--ds .articles-list .blog-media > a {
	display: block; height: 100%; min-height: 220px; margin: 0 !important; float: none !important; background: var(--tdc-sky);
}
body.tdc-tin--ds .articles-list .blog-media img {
	width: 100% !important; height: 100% !important; aspect-ratio: auto; object-fit: cover; display: block;
}
body.tdc-tin--ds .articles-list .blog-content {
	flex: 1 1 auto; width: auto !important; min-width: 0;
	display: flex; flex-direction: column; padding: 22px 26px !important; margin: 0 !important;
}
/* Bài không ảnh (thông báo cổ đông, tin ngành 2011–2014): vạch xanh bên trái thay cho ô ảnh trống. */
body.tdc-tin--ds .articles-list article.no-img { border-left: 4px solid var(--tdc-blue); }

body.tdc-tin--ds .articles-list .entry-meta {
	order: -1; display: flex; flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap;
	gap: 4px 12px; margin: 0 0 8px; padding: 0; font-size: 13px; line-height: 1.5;
}
body.tdc-tin--ds .articles-list .entry-meta > *::after,
body.tdc-tin--ds .articles-list .entry-meta > *::before { display: none !important; }
body.tdc-tin--ds .articles-list .entry-meta a { color: var(--tdc-muted); }
body.tdc-tin--ds .articles-list .entry-meta .data-link { color: var(--tdc-blue-ink); font-weight: 700; }
body.tdc-tin--ds .articles-list .entry-meta .data-link time { color: inherit; }
body.tdc-tin--ds .articles-list .entry-title { margin: 0 0 10px; font-size: 20px; line-height: 1.35; font-weight: 700; }
body.tdc-tin--ds .articles-list .entry-title a { color: var(--tdc-navy-deep); }
body.tdc-tin--ds .articles-list .entry-title a:hover { color: var(--tdc-blue-ink); }
body.tdc-tin--ds .articles-list .blog-content > p {
	margin: 0 0 14px; color: var(--tdc-text); font-size: 15px; line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.tdc-tin--ds .articles-list .details.more-link {
	margin-top: auto; align-self: flex-start;
	font-size: 14px; font-weight: 700; color: var(--tdc-blue-ink);
}
body.tdc-tin--ds .articles-list .details.more-link:hover { color: var(--tdc-blue-deep); }

/* Phân trang */
body.tdc-tin--ds .paginator { margin-top: 32px; }

/* ---- Điện thoại / máy tính bảng ---- */
@media (max-width: 980px) {
	body.tdc-tin.tdc-tin--ds .wf-container-main { gap: 18px; }
	body.tdc-tin.tdc-tin--ds .wf-container-main > #content { grid-row: 2; order: 2; }
	body.tdc-tin.tdc-tin--ds .wf-container-main > .tdc-tin__tabs { margin: 16px -16px 0; }
	/* Một hàng cuộn ngang — 7 nút xuống 4 dòng thì đẩy danh sách khuất khỏi màn hình đầu. */
	.tdc-tin__tabs ul { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 6px; scrollbar-width: none; }
	.tdc-tin__tabs ul::-webkit-scrollbar { display: none; }
	.tdc-tin__tabs li { flex: 0 0 auto; }
	.tdc-tin__tabs a { white-space: nowrap; font-size: 14px; min-height: 40px; }
}
@media (max-width: 700px) {
	body.tdc-tin--ds .articles-list article.post { flex-direction: column; }
	body.tdc-tin--ds .articles-list .blog-media { flex: none; width: 100% !important; }
	body.tdc-tin--ds .articles-list .blog-media > a { min-height: 0; aspect-ratio: 16 / 9; }
	body.tdc-tin--ds .articles-list .blog-content { padding: 16px 18px 18px !important; }
	body.tdc-tin--ds .articles-list .entry-title { font-size: 18px; }
}