/* ===========================================================================
 * CSS cho TRANG CON: archive + chi tiết của `du-an` và `van-ban`.
 * Tách khỏi home.css vì home.css chỉ nạp ở trang chủ — bài học từ vụ footer:
 * cái gì hiện ngoài trang chủ thì KHÔNG được để trong home.css.
 * ========================================================================= */

.tdc-archive__inner,
.tdc-single__inner {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 0 30px;
}
.tdc-single__inner--narrow { max-width: 900px; }

/* --- đường dẫn --- */
.tdc-breadcrumb { font-size: 13px; color: var(--tdc-muted); margin: 0 0 14px; }
.tdc-breadcrumb a { color: var(--tdc-muted); }
.tdc-breadcrumb a:hover { color: var(--tdc-blue-ink); }

/* --- bộ lọc --- */
.tdc-filter {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	justify-content: center; margin: 0 0 22px;
}
.tdc-filter__label { color: var(--tdc-muted); font-size: 13px; margin-right: 4px; }
.tdc-filter__item {
	display: inline-block; padding: 7px 14px; border: 1px solid var(--tdc-line, #e6e9ec);
	border-radius: 2px; font-size: 14px; color: var(--tdc-text); background: #fff;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tdc-filter__item span { color: var(--tdc-muted); font-size: 12px; }
.tdc-filter__item:hover { border-color: var(--tdc-blue); color: var(--tdc-blue-ink); }
.tdc-filter__item.is-active { background: var(--tdc-blue); border-color: var(--tdc-blue); color: #fff; }
.tdc-filter__item.is-active span { color: rgba(255,255,255,.75); }

/* --- lưới thẻ dự án --- */
.tdc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tdc-card {
	background: #fff; border: 1px solid var(--tdc-line, #e6e9ec);
	display: flex; flex-direction: column; overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.tdc-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-2px); }
.tdc-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tdc-bg); }
.tdc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdc-card__ph {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--tdc-blue) 0%, var(--tdc-blue-deep) 100%);
}
.tdc-card__body { padding: 14px 16px 18px; }
.tdc-card__tag {
	display: inline-block; font-size: 12px; color: var(--tdc-blue-ink);
	background: #eaf4fd; padding: 3px 9px; border-radius: 2px; margin-bottom: 8px;
}
.tdc-card__title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.tdc-card__title a { color: var(--tdc-dark); }
.tdc-card:hover .tdc-card__title a { color: var(--tdc-blue-ink); }
.tdc-card__meta { margin: 8px 0 0; font-size: 13px; color: var(--tdc-muted); line-height: 20px; }

/* --- chi tiết dự án --- */
.tdc-single__title { margin: 0 0 10px; }
.tdc-single__tags { margin: 0 0 20px; }
/* Ảnh đại diện dự án là ảnh chụp trên không khổ lớn (1920px). Để nguyên `height:auto` thì nó
   cao ~660px, chiếm gần trọn màn hình đầu tiên và đẩy hết thông tin xuống dưới. Cắt về 21:9 —
   ảnh không ảnh chụp trên không nào mất phần quan trọng ở mép trên/dưới. */
.tdc-single__hero { margin: 0 0 26px; }
.tdc-single__hero img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Bảng thông tin dự án thường chỉ 1–2 dòng; để `width:100%` thì cột giá trị mênh mông còn chữ
   nằm nép bên trái. Bó theo độ dài dòng đọc cho cân với đoạn mô tả ngay dưới. */
.tdc-single__facts { max-width: var(--tdc-do-doc, 72ch); }
.tdc-single__facts { width: 100%; border-collapse: collapse; margin: 0 0 26px; }
.tdc-single__facts th,
.tdc-single__facts td { border: 1px solid var(--tdc-line, #e6e9ec); padding: 11px 14px; text-align: left; font-size: 14px; }
.tdc-single__facts th { width: 1%; white-space: nowrap; background: var(--tdc-sky); font-weight: 700; color: var(--tdc-dark); }
.tdc-single__relhead { margin: 40px 0 18px; font-size: 20px; }

/* --- bảng văn bản --- */
.tdc-vbsearch { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.tdc-vbsearch input[type="search"] {
	width: 100%; max-width: 420px; padding: 10px 14px;
	border: 1px solid var(--tdc-line, #e6e9ec); font-size: 14px; font-family: var(--tdc-font);
}
.tdc-vbsearch button {
	padding: 10px 22px; border: 0; background: var(--tdc-blue); color: #fff;
	font-family: var(--tdc-font); font-weight: 600; font-size: 14px; cursor: pointer;
}
.tdc-vbsearch button:hover { background: var(--tdc-blue-2); }
.tdc-vbwrap { overflow-x: auto; }   /* 5 cột trên điện thoại thì cuộn ngang, đừng vỡ trang */
.tdc-vbtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.tdc-vbtable th, .tdc-vbtable td {
	border: 1px solid var(--tdc-line, #e6e9ec); padding: 10px 12px; vertical-align: top; text-align: left;
}
.tdc-vbtable thead th { background: var(--tdc-bg); font-weight: 600; color: var(--tdc-dark); white-space: nowrap; }
.tdc-vbtable tbody tr:nth-child(even) td { background: #fbfcfd; }
.tdc-vbtable__kh { white-space: nowrap; font-family: monospace; font-size: 13px; color: var(--tdc-muted); }
.tdc-vbtable__ngay { white-space: nowrap; }

/* --- phân trang --- */
.tdc-pagination, .navigation.pagination { margin: 34px 0 0; text-align: center; }
.tdc-pagination .page-numbers, .navigation.pagination .page-numbers {
	display: inline-block; padding: 8px 14px; margin: 0 3px;
	border: 1px solid var(--tdc-line, #e6e9ec); color: var(--tdc-text);
}
.tdc-pagination .page-numbers.current, .navigation.pagination .page-numbers.current {
	background: var(--tdc-blue); border-color: var(--tdc-blue); color: #fff;
}

@media (max-width: 980px) { .tdc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.tdc-cards { grid-template-columns: 1fr; }
	.tdc-single__facts th { width: 130px; }
}

/* H1 của archive dùng chung style với tiêu đề dải ở trang chủ */
.tdc-section-head h1 {
	font-size: 30px; line-height: 40px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; text-align: center;
}
.tdc-section-head h1::after {
	content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; background: var(--tdc-blue);
}
.tdc-archive__inner { padding-top: 8px; }

/* ---- Dải tiêu đề tràn viền cho archive (template-parts/hero-band.php) ----
   Phải trông y hệt `.page-title` của các trang thường, nếu không thì /du-an/ và /van-ban/ là
   hai chỗ duy nhất trên site mở ra thấy một mảng trắng. Biến `--tdc-hero` dùng chung. */
.tdc-hero-band {
	/* Dải nằm bên trong `#main > .wf-wrap` (1340px) nên phải kéo ra mép màn hình bằng 100vw,
	   giống hero trang chủ. Không có phần này thì dải chừa lề trắng hai bên, khác hẳn thanh
	   tiêu đề của các trang thường. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	overflow: hidden;
	background-color: var(--tdc-navy);
	background-image: var(--tdc-hero);
	background-size: cover;
	background-position: center 58%;
}
.tdc-hero-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(20, 32, 51, .90) 0%,
		rgba(20, 32, 51, .78) 42%,
		rgba(20, 32, 51, .50) 100%);
}
/* Lề ngang 54px = 24px của `.wf-wrap` (The7) + 30px của `.tdc-archive__inner`. Dải này tràn
   viền nên nằm NGOÀI cả hai lớp đó; muốn tiêu đề thẳng hàng với lưới thẻ bên dưới thì phải tự
   cộng lại. Đo ở cả 1280px và 1440px đều khớp (54 và 104). */
.tdc-hero-band__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: var(--tdc-wrap);
	max-width: 100%;
	margin: 0 auto;
	padding: 60px 54px 54px;
}
.tdc-hero-band__title {
	margin: 0;
	font-family: var(--tdc-font);
	font-size: clamp(1.55rem, 2.6vw, 2.05rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.tdc-hero-band__desc {
	margin: 10px 0 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .82);
	max-width: 62ch;
}
.tdc-hero-band__crumb {
	margin-top: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, .70);
}
.tdc-hero-band__crumb a { color: rgba(255, 255, 255, .70); text-decoration: none; }
.tdc-hero-band__crumb a:hover { color: #fff; }
.tdc-hero-band__crumb span { margin: 0 6px; }

/* Tiêu đề đã nằm trên dải rồi — bỏ khối tiêu đề cũ ở đầu phần nội dung. */
.tdc-archive .tdc-archive__inner > .tdc-section-head:first-child { display: none; }

@media (max-width: 800px) {
	.tdc-hero-band__inner { padding: 36px 30px 32px; }  /* mobile: .wf-wrap bỏ lề */
}

/* ============================================================================
   BẢN MOBILE cho archive / chi tiết `du-an` + `van-ban` — sửa theo SỐ ĐO 18/09/2026
   ----------------------------------------------------------------------------
   | Đo ở 390px            | Trước                       | Vì sao phải sửa          |
   |-----------------------|-----------------------------|--------------------------|
   | bề ngang cột nội dung | 282px / 390 = 72%           | 54px lề mỗi bên: 24 của
   |                       |                             | `.wf-wrap` + 30 của
   |                       |                             | `.tdc-archive__inner`    |
   | bảng Văn bản          | 563px nhồi trong hộp 282px  | ô "Trích yếu" còn 12 ký
   |                       | ⇒ cuộn ngang                | tự/dòng — không đọc nổi  |
   | dải bộ lọc /van-ban/  | cao 204px (3 hàng thẻ)      | chiếm 1/4 màn hình đầu   |
   | thẻ lọc, nút trang    | cao 32px / rộng 38px        | dưới 44×44               |
   ========================================================================= */

@media (max-width: 800px) {
	/* Lề ngang: để `.wf-wrap` (16px, đặt ở page.css) lo một mình. Cộng dồn hai lớp là cách
	   cột nội dung mất 28% bề ngang màn hình. */
	.tdc-archive__inner,
	.tdc-single__inner { padding-left: 0; padding-right: 0; }

	/* Dải tiêu đề tràn viền: căn giữa cho khớp `.page-title` của trang thường (page.css),
	   và lề ngang đúng bằng 16px của `.wf-wrap` để tiêu đề thẳng hàng với lưới bên dưới. */
	.tdc-hero-band__inner { padding: 34px 16px 30px; text-align: center; }
	.tdc-hero-band__title { font-size: clamp(1.45rem, 6.6vw, 1.95rem); }
	.tdc-hero-band__desc { margin-left: auto; margin-right: auto; }
	.tdc-hero-band__crumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.tdc-hero-band__crumb a { display: inline-block; padding: 14px 4px; margin: -14px 0; }
	.tdc-hero-band::after {
		background: linear-gradient(180deg, rgba(20, 32, 51, .88) 0%, rgba(20, 32, 51, .74) 100%);
	}

	/* ---- Bộ lọc: một hàng cuộn ngang thay vì 3 hàng xuống dòng ----
	   Xuống dòng tốn 204px chiều dọc trước khi thấy kết quả. Cuộn ngang giữ đúng 1 hàng.
	   `overflow-x` đặt trên chính thanh lọc nên trang không tràn ngang theo. */
	.tdc-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		margin-bottom: 14px;
	}
	.tdc-filter::-webkit-scrollbar { display: none; }
	.tdc-filter > * { flex: 0 0 auto; }
	.tdc-filter__item {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 14px;
	}

	/* ---- Ô tìm kiếm ---- */
	.tdc-vbsearch input[type="search"] { min-height: 46px; max-width: none; }
	.tdc-vbsearch button { min-height: 46px; padding: 0 20px; }

	/* ---- Phân trang: 38×46 ⇒ 44×46 ---- */
	.tdc-pagination .page-numbers,
	.navigation.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		box-sizing: border-box;
	}

	/* ---- Tiêu đề thẻ dự án: link chỉ cao 20px ----
	   Cho nó chiếm cả bề ngang thẻ và cao ≥44px. Ảnh phía trên đã là link riêng nên
	   người dùng có hai vùng bấm lớn cho cùng một dự án. */
	.tdc-card__title a { display: block; padding: 12px 0; }
	.tdc-card__body { padding: 14px 16px 10px; }
	.tdc-card__tag { min-height: 28px; display: inline-flex; align-items: center; }
	/* Trên trang chi tiết dự án, thẻ lĩnh vực là LINK lọc — vùng bấm thật, phải đủ 44px.
	   Trong lưới thẻ nó chỉ là nhãn, giữ nhỏ. */
	.tdc-single__tags .tdc-card__tag { min-height: 44px; padding: 0 14px; }
}

/* ---- Bảng Văn bản pháp quy: xếp lại thành thẻ dưới 700px ----
   5 cột trong 282px là 563px bảng nhồi vào hộp cuộn ngang: ô "Trích yếu" đo được 12 ký tự mỗi
   dòng. Cuộn ngang trong một trang cuộn dọc cũng là thao tác người dùng hay bỏ lỡ.

   Xếp dọc: ký hiệu làm nhãn nhỏ, trích yếu là dòng chính bấm được, ba trường phụ (loại / cơ
   quan / ngày) gom xuống dưới. Nhãn cột lấy từ `data-nhan` do archive-van-ban.php in ra —
   `<thead>` bị ẩn nên không còn tiêu đề cột để đối chiếu. */
@media (max-width: 700px) {
	.tdc-vbwrap { overflow-x: visible; }
	.tdc-vbtable,
	.tdc-vbtable tbody,
	.tdc-vbtable tr,
	.tdc-vbtable td { display: block; width: auto; }
	.tdc-vbtable thead { display: none; }

	.tdc-vbtable tr {
		border: 1px solid var(--tdc-line, #e6e9ec);
		border-radius: 2px;
		padding: 12px 14px 10px;
		margin: 0 0 12px;
	}
	.tdc-vbtable tbody tr:nth-child(even) td { background: transparent; }
	.tdc-vbtable td { border: 0; padding: 0; font-size: 14px; }

	/* Ký hiệu: nhãn nhỏ phía trên, không cần chữ "Ký hiệu:" vì định dạng đã tự nói. */
	.tdc-vbtable__kh {
		font-size: 12.5px;
		letter-spacing: .02em;
		color: var(--tdc-blue-ink);
		margin-bottom: 4px;
	}
	.tdc-vbtable__kh:empty { display: none; }

	/* Trích yếu = dòng chính. Vùng bấm cả bề ngang thẻ, cao ≥44px. */
	.tdc-vbtable__ty a {
		display: block;
		padding: 6px 0 10px;
		min-height: 44px;
		box-sizing: border-box;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.45;
		/* Xanh-đậm-làm-chữ (5.16 trên nền trắng): ở dạng thẻ, không còn cột "Trích yếu" nào
		   để người đọc suy ra đây là link — màu phải gánh việc đó thay gạch chân. */
		color: var(--tdc-blue-ink);
		text-decoration: none;
	}
	.tdc-vbtable__ty a:hover { text-decoration: underline; }

	/* Ba trường phụ xếp ngang thành một dòng chú thích, mỗi ô mang nhãn của nó. */
	.tdc-vbtable td:not(.tdc-vbtable__kh):not(.tdc-vbtable__ty) {
		display: inline;
		font-size: 12.5px;
		color: var(--tdc-muted);
	}
	.tdc-vbtable td:not(.tdc-vbtable__kh):not(.tdc-vbtable__ty)::before {
		content: attr(data-nhan) ": ";
	}
	/* 79 văn bản migrate từ web cũ, nhiều bản thiếu ngày/cơ quan (DM-20260908-022). Ô rỗng mà
	   vẫn in nhãn thì ra "Ngày:" cụt lủn — giấu cả ô. */
	.tdc-vbtable td:empty { display: none; }
	.tdc-vbtable td:not(.tdc-vbtable__kh):not(.tdc-vbtable__ty):not(:last-child)::after {
		content: " · ";
		color: var(--tdc-line, #cfd6db);
	}
	.tdc-vbtable__ngay { white-space: normal; }
}

@media (max-width: 640px) {
	/* Bảng thông tin dự án: nhãn 130px + giá trị trong 358px thì mọi giá trị dài đều xuống
	   dòng 2–3 lần. Xếp dọc như bảng văn bản. */
	.tdc-single__facts,
	.tdc-single__facts tbody,
	.tdc-single__facts tr,
	.tdc-single__facts th,
	.tdc-single__facts td { display: block; width: auto; }
	.tdc-single__facts tr { border: 1px solid var(--tdc-line, #e6e9ec); margin: 0 0 10px; }
	.tdc-single__facts th,
	.tdc-single__facts td { border: 0; }
	.tdc-single__facts th { width: auto; white-space: normal; padding: 9px 14px 7px; font-size: 13px; }
	.tdc-single__facts td { padding: 0 14px 10px; }
}

/* Trắng trên #0495D8 = 3.34, dưới AA 4.5. Cùng lỗi đã sửa ở `.tdc-subnav__heading`.
   #0374A8 (`--tdc-blue-ink`) = 5.16. Áp cho MỌI cỡ màn hình, không riêng mobile. */
.tdc-vbsearch button { background: var(--tdc-blue-ink); }
.tdc-vbsearch button:hover { background: var(--tdc-blue-deep); }
.tdc-filter__item.is-active { background: var(--tdc-blue-ink); border-color: var(--tdc-blue-ink); }
.tdc-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	background: var(--tdc-blue-ink);
	border-color: var(--tdc-blue-ink);
}