/* Thư viện hình ảnh — inc/thu-vien.php. Chỉ nạp ở trang có [tdc_thu_vien]. */

.tdc-tv { --tv-gap: 16px; }
.tdc-tv__dan { color: var(--tdc-muted); font-size: 14px; margin: 0 0 14px; }

/* ---- Hàng lọc ---- */
.tdc-tv__loc {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 8px; padding: 0 0 16px;
	border-bottom: 1px solid #e3e6ea;
}
.tdc-tv__nut-loc {
	min-height: 40px; padding: 8px 16px;
	font: 600 14px/1.2 var(--tdc-font); color: var(--tdc-dark);
	background: #fff; border: 1px solid #cfd6de; border-radius: 999px; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.tdc-tv__nut-loc:hover { border-color: var(--tdc-blue-ink); color: var(--tdc-blue-ink); }
.tdc-tv__nut-loc.dang-chon { background: var(--tdc-navy); border-color: var(--tdc-navy); color: #fff; }
.tdc-tv__nut-loc:focus-visible { outline: 2px solid var(--tdc-blue); outline-offset: 2px; }

/* ---- Nhóm ---- */
.tdc-tv__nhom { padding-top: 28px; scroll-margin-top: 110px; }
.tdc-tv__nhom[hidden] { display: none; }
.tdc-tv__nhom > h2 {
	font-size: 22px; line-height: 1.3; margin: 0 0 16px; padding-left: 12px;
	border-left: 4px solid var(--tdc-blue);
}
.tdc-tv__luoi { display: grid; gap: var(--tv-gap); }
.tdc-tv__luoi--album,
.tdc-tv__luoi--video { grid-template-columns: repeat(3, 1fr); }
.tdc-tv__luoi--du-an { grid-template-columns: repeat(4, 1fr); }
.tdc-tv__luoi--tu-lieu { display: block; }
.tdc-tv__tl-bo { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }

.tdc-tv__anh {
	display: block; width: 100%; height: 100%;
	aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .35s ease;
}

/* ---- Thẻ album (sự kiện / đoàn thể) ---- */
.tdc-tv__album { display: flex; flex-direction: column; background: #fff; }
.tdc-tv__bia {
	position: relative; display: block; overflow: hidden; background: var(--tdc-navy);
	cursor: zoom-in;
}
.tdc-tv__bia:hover .tdc-tv__anh,
.tdc-tv__du-an:hover .tdc-tv__anh,
.tdc-tv__tl:hover .tdc-tv__anh,
.tdc-tv__phat:hover .tdc-tv__anh { transform: scale(1.05); }
.tdc-tv__so {
	position: absolute; right: 10px; bottom: 10px;
	padding: 4px 10px 4px 28px; border-radius: 999px;
	font: 600 12px/1.4 var(--tdc-font); color: #fff;
	background: rgba(20, 24, 60, .78) no-repeat 9px 50% / 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
}
.tdc-tv__chu { padding: 12px 2px 4px; }
.tdc-tv__chu time { display: block; font-size: 13px; color: var(--tdc-muted); line-height: 1.4; }
.tdc-tv__chu h3 { font-size: 16px; line-height: 1.45; font-weight: 600; margin: 4px 0 0; }
.tdc-tv__chu h3 a { color: var(--tdc-dark); text-decoration: none; }
.tdc-tv__chu h3 a:hover { color: var(--tdc-blue-ink); }

/* ---- Công trình ---- */
.tdc-tv__du-an { position: relative; display: block; overflow: hidden; background: var(--tdc-navy); text-decoration: none; }
.tdc-tv__du-an span {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 30px 12px 10px; font-size: 13px; line-height: 1.4; font-weight: 600; color: #fff;
	background: linear-gradient(to top, rgba(20, 24, 60, .9), rgba(20, 24, 60, 0));
}

/* ---- Tư liệu ---- */
.tdc-tv__tl { display: block; overflow: hidden; background: var(--tdc-navy); cursor: zoom-in; }

/* ---- Video: phát tại thẻ ---- */
.tdc-tv__video { margin: 0; }
.tdc-tv__phat,
.tdc-tv__video iframe,
.tdc-tv__video video {
	display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000;
}
.tdc-tv__phat { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.tdc-tv__phat .tdc-tv__anh { aspect-ratio: 16 / 9; opacity: .9; }
.tdc-tv__nut {
	position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
	border-radius: 50%; background: rgba(234, 35, 42, .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	transition: transform .2s;
}
.tdc-tv__nut::after {
	content: ""; position: absolute; left: 26px; top: 20px;
	border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff;
}
.tdc-tv__phat:hover .tdc-tv__nut { transform: scale(1.08); }
.tdc-tv__phat:focus-visible { outline: 3px solid var(--tdc-blue); outline-offset: 2px; }
.tdc-tv__dai {
	position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 4px;
	font: 600 12px/1.4 var(--tdc-font); color: #fff; background: rgba(0, 0, 0, .75);
}
.tdc-tv__video figcaption { padding: 10px 2px 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--tdc-dark); }

/* ---- Khổ nhỏ ---- */
@media (max-width: 1100px) {
	.tdc-tv__luoi--album, .tdc-tv__luoi--video { grid-template-columns: repeat(2, 1fr); }
	.tdc-tv__luoi--du-an { grid-template-columns: repeat(3, 1fr); }
	.tdc-tv__tl-bo { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.tdc-tv { --tv-gap: 14px; }
	/* Hàng lọc cuộn ngang một dòng, không đội thành 3 dòng chiếm nửa màn hình */
	.tdc-tv__loc { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 0 16px 14px; scrollbar-width: none; }
	.tdc-tv__loc::-webkit-scrollbar { display: none; }
	.tdc-tv__nut-loc { flex: 0 0 auto; }
	.tdc-tv__luoi--album, .tdc-tv__luoi--video { grid-template-columns: 1fr; }
	.tdc-tv__luoi--du-an { grid-template-columns: repeat(2, 1fr); }
	.tdc-tv__tl-bo { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.tdc-tv__du-an span { font-size: 12px; padding: 26px 8px 8px; }
}