/* Khối "Bộ sưu tập" (theo ảnh/ghi chú của user và trang mẫu):
 * - Rộng hết cỡ, cách lề trái/phải 50px; thẻ cách nhau 10px, bo góc 16px, tỉ lệ 4:3.
 * - Tiêu đề section nằm trên cùng, không bị ảnh che.
 * - Tên công trình nằm GIỮA ảnh, chữ trắng in hoa trên nền tối, chỉ hiện khi rê chuột. */

.collection {
	width: calc(100% - 100px);
	max-width: none;
	margin: 0 auto;
	padding-bottom: 46px;
}

.collection .title_center {
	height: auto;
	min-height: 82px;
	margin: 0;
	padding: 20px 0 12px;
	box-sizing: border-box;
}
.title_center h2,
.title_center__sub { line-height: normal; }

.list_collection {
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
}
.list_collection li { position: relative; }
.list_collection a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
}
.list_collection__media {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
}
.list_collection__title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 12px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.list_collection a:hover .list_collection__title,
.list_collection a:focus-visible .list_collection__title { opacity: 1; }

/* Thiết bị cảm ứng không có hover: hiện tên ở đáy ảnh */
@media (hover: none) {
	.list_collection__title {
		align-items: flex-end;
		padding-bottom: 16px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%);
		opacity: 1;
	}
}

@media (max-width: 1024px) {
	.list_collection { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.collection { width: calc(100% - 32px); }
}
@media (max-width: 600px) {
	.list_collection { grid-template-columns: 1fr; }
}

/* ===== Độ rộng full, cách lề trái/phải 50px: Công trình tiêu biểu, 3 dải công trình, Bộ sưu tập ===== */
.signature,
.home-row--wide,
.collection {
	width: calc(100% - 100px);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}
.home-row--wide {
	display: flex;
	gap: 2%;
	align-items: flex-start;
	margin-top: 10px;
}

/* ===== Thẻ trong dải công trình (đo trang mẫu 1440px: thẻ 342×370, ảnh 342×245) ===== */
.listdesign__media {
	aspect-ratio: auto;
	height: 245px;
	border-radius: 4px;
}
.listdesign__media img,
.listdesign__media .thumb__ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.listdesign .info {
	min-height: 125px;
	padding: 10px 0;
}
.listdesign h3 {
	margin: 0 0 15px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: #264c5d;
}
.listdesign h3 a { color: #264c5d; }
.listdesign p {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 17px;
	color: #888888;
}

/* Màn hình rộng: ảnh cao hơn theo tỉ lệ (mẫu ở 1900px: ảnh ≈ 460×300) */
@media (min-width: 1600px) { .listdesign__media { height: 270px; } .listdesign .info { min-height: 100px; } }
@media (min-width: 1800px) { .listdesign__media { height: 300px; } }

@media (max-width: 1024px) {
	.signature,
	.home-row--wide { width: calc(100% - 32px); }
	.home-row--wide { flex-direction: column; gap: 0; }
	.listdesign__media { height: 220px; }
}
@media (max-width: 768px) {
	.collection { width: calc(100% - 32px); }
}