/*
 * Vòng 5 — làn "noidung" (góp ý khách 30/10, mục 2.8d · 2.8b2 · 2.7g).
 * Tự nạp qua functions.php (glob assets/css/v5-*.css), nạp SAU v5-gioithieu.css nên ghi đè được.
 * Màu chỉ trong brand kit (brand.css). Không dùng ảnh người do AI tạo: chân dung chưa có ảnh là
 * khung trung tính vẽ bằng CSS, ảnh thật đến thì chèn <img> vào .v5gt-nguoi__anh là tự lấp khung.
 */

/* ---------- 1. Ban lãnh đạo (2.8d): thẻ chân dung ---------- */
.tdc-page__body ul.v5gt-nguoi.v5nd-cd {
	display: flex; flex-wrap: wrap; gap: 18px 16px;
	margin: 0 0 2.2rem; padding: 0; list-style: none; max-width: none;
}
.tdc-page__body ul.v5nd-cd > li,
.tdc-page__body ul.v5nd-cd > li.v5gt-nguoi--dau {
	flex: 0 0 calc((100% - 4 * 16px) / 5); max-width: calc((100% - 4 * 16px) / 5);
	display: flex; flex-direction: column; align-items: stretch; gap: 0;
	margin: 0; padding: 0; overflow: hidden; box-sizing: border-box;
	background: #fff; border: 1px solid #e3e9ee; border-radius: 4px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.tdc-page__body ul.v5nd-cd > li:hover { box-shadow: 0 8px 22px rgba(2, 64, 94, .12); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tdc-page__body ul.v5nd-cd > li:hover { transform: none; } }

/* Khung ảnh 4:5 — chưa có ảnh: nền trời nhạt + bóng người vẽ nét mảnh (SVG, không phải ảnh) */
.v5nd-cd .v5gt-nguoi__anh {
	position: relative; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5;
	border-radius: 0; display: block; overflow: hidden;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 200'%3E%3Cg fill='none' stroke='%230374A8' stroke-width='2.2' stroke-opacity='.45'%3E%3Ccircle cx='80' cy='78' r='30'/%3E%3Cpath d='M22 200c0-38 26-62 58-62s58 24 58 62'/%3E%3C/g%3E%3C/svg%3E") center bottom / 78% auto no-repeat,
		linear-gradient(180deg, #fff 0%, var(--tdc-sky, #DFF3FE) 100%);
	border-bottom: 3px solid var(--tdc-blue, #0495D8);
}
.v5nd-cd .v5gt-nguoi__anh .tdc-icon { display: none; }
.v5nd-cd .v5gt-nguoi__anh img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
}
.v5nd-cd .v5gt-nguoi__anh:has(img) { background: var(--tdc-sky, #DFF3FE); }
.v5nd-cd > li > span:last-child { display: block; padding: 12px 14px 14px; }
.v5nd-cd .v5gt-nguoi__ten { font-size: 1rem; line-height: 1.35; color: var(--tdc-dark); }
.v5nd-cd .v5gt-nguoi__cv { margin-top: 4px; font-size: .9rem; line-height: 1.4; color: var(--tdc-blue-ink); }

/* Người đứng đầu nhóm: khung xanh đậm, bóng người trắng, vạch đỏ — vẫn cùng cỡ để hàng đều */
.tdc-page__body ul.v5nd-cd > li.v5gt-nguoi--dau { background: #fff; border-color: var(--tdc-blue-soft, #C0E4F5); }
.v5nd-cd .v5gt-nguoi--dau .v5gt-nguoi__anh {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-opacity='.55'%3E%3Ccircle cx='80' cy='78' r='30'/%3E%3Cpath d='M22 200c0-38 26-62 58-62s58 24 58 62'/%3E%3C/g%3E%3C/svg%3E") center bottom / 78% auto no-repeat,
		linear-gradient(160deg, var(--tdc-blue-ink, #0374A8) 0%, var(--tdc-navy-deep, #02405E) 100%);
	border-bottom-color: var(--tdc-red, #EA232A);
}
.v5nd-cd .v5gt-nguoi--dau .v5gt-nguoi__cv { font-weight: 700; }

@media (max-width: 1099px) {
	.tdc-page__body ul.v5nd-cd > li,
	.tdc-page__body ul.v5nd-cd > li.v5gt-nguoi--dau { flex-basis: calc((100% - 3 * 16px) / 4); max-width: calc((100% - 3 * 16px) / 4); }
}
@media (max-width: 760px) {
	.tdc-page__body ul.v5gt-nguoi.v5nd-cd { gap: 14px 12px; }
	.tdc-page__body ul.v5nd-cd > li,
	.tdc-page__body ul.v5nd-cd > li.v5gt-nguoi--dau { flex-basis: calc((100% - 2 * 12px) / 3); max-width: calc((100% - 2 * 12px) / 3); }
}
@media (max-width: 560px) {
	.tdc-page__body ul.v5nd-cd > li,
	.tdc-page__body ul.v5nd-cd > li.v5gt-nguoi--dau { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); }
	.v5nd-cd > li > span:last-child { padding: 10px 11px 12px; }
	.v5nd-cd .v5gt-nguoi__ten { font-size: .95rem; }
	.v5nd-cd .v5gt-nguoi__cv { font-size: .85rem; }
}

/* ---------- 2. Lịch sử & thành tích (2.8b2): khối huân chương, cờ thi đua ---------- */
.tdc-page__body .v5nd-kt {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
	margin: 0 0 1.6rem; padding: 0; list-style: none; max-width: none;
}
.tdc-page__body .v5nd-kt > li {
	margin: 0; display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid #e3e9ee; border-top: 3px solid var(--tdc-blue, #0495D8); border-radius: 4px;
}
.tdc-page__body .v5nd-kt > li.v5nd-kt--cao { border-top-color: var(--tdc-red, #EA232A); }
.v5nd-kt__anh { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tdc-sky, #DFF3FE); }
.v5nd-kt__anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Thẻ không có ảnh riêng: huy hiệu lớn trên nền gradient brand */
.v5nd-kt__anh--bieu {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, var(--tdc-blue-ink, #0374A8) 0%, var(--tdc-navy-deep, #02405E) 100%);
	color: #fff;
}
.v5nd-kt__anh--bieu .tdc-icon { width: 96px; height: 96px; opacity: .92; }
.v5nd-kt__nhan {
	position: absolute; left: 14px; bottom: 14px;
	padding: 4px 10px; border-radius: 2px;
	background: var(--tdc-red, #EA232A); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.v5nd-kt__nd { padding: 16px 18px 18px; }
.v5nd-kt__ten { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--tdc-dark); }
.v5nd-kt__phu { display: block; margin-top: 6px; font-size: .92rem; line-height: 1.5; color: var(--tdc-muted); }
.v5nd-kt__chu { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d5e3ec; font-size: .86rem; line-height: 1.45; color: var(--tdc-muted); }

/* Dải số: "30+ bằng khen" */
.tdc-page__body .v5nd-so {
	display: flex; align-items: center; gap: 18px; margin: 0 0 1.8rem; padding: 18px 22px; max-width: none;
	background: var(--tdc-sky, #DFF3FE); border-left: 3px solid var(--tdc-blue, #0495D8); border-radius: 0 4px 4px 0;
}
.v5nd-so__so { flex: none; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--tdc-blue-deep, #02567D); }
.v5nd-so__so sup { font-size: .55em; color: var(--tdc-red, #EA232A); top: -.7em; }
.v5nd-so__chu { color: var(--tdc-text); line-height: 1.55; }

/* Thư viện ảnh lễ đón nhận */
.tdc-page__body h3.v5nd-le { margin: 0 0 .9rem; font-size: 1.1rem; color: var(--tdc-dark); }
.tdc-page__body .v5nd-le__anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 1rem; }
.tdc-page__body .v5nd-le__anh figure { margin: 0; }
.v5nd-le__anh img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.v5nd-le__anh figcaption { margin-top: 6px; font-size: .84rem; line-height: 1.45; color: var(--tdc-muted); }
.tdc-page__body .v5nd-le__them { margin: 0 0 1.6rem; }
.v5nd-le__them a { color: var(--tdc-blue-ink); font-weight: 600; }

@media (max-width: 900px) {
	.tdc-page__body .v5nd-le__anh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.tdc-page__body .v5nd-kt { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.v5nd-kt__anh { aspect-ratio: 16 / 9; }
	.v5nd-kt__anh--bieu { aspect-ratio: auto; height: 120px; }
	.v5nd-kt__anh--bieu .tdc-icon { width: 64px; height: 64px; }
	.tdc-page__body .v5nd-so { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
	.v5nd-so__so { font-size: 2.2rem; }
}