/**
 * NHÁNH DỰ ÁN — archive · loại công trình · chi tiết  (T-401 · T-402 · T-403)
 *
 * Ba màn đi chung một file, cùng lý do với `page/service.css`: card dự án,
 * toolbar chip, gallery và thẻ thông tin chung một bộ da.
 *
 * Nguồn số đo: `docs/potaco-layout/project/POTACO_UI_Spec_Pixel_Archive_Project_PC_SP.md`
 * và `POTACO_UI_Spec_Pixel_Single_Project_PC.md` (2026-09-15); chỗ ảnh khác
 * spec pixel thì theo ảnh — 5 chỗ ghi ở `spec/single-project/1-wireframe.md`
 * §0.2. Màu/cỡ chữ TỪ TOKEN; tiêu đề card 19px của spec pixel không có token
 * → dùng `--fs-h4` (18px). Container 1200 theo design-system.
 *
 * ⚠️ Banner → nội dung: 40px do `components.css` §8b lo (`--hero-gap`). File này
 *    KHÔNG tự đệm trên cho khối đầu tiên dưới banner (CLAUDE.md §5). CSS của
 *    `.page-hero__eyebrow/meta` (`stats` đã gỡ 2026-09-18) và `.block-title` cũng ở `components.css`
 *    — chúng là component chung, không phải của màn này.
 *
 * ⚠️ Theme không có `box-sizing: border-box` toàn cục — chỗ nào đặt `width` cố
 *    định kèm `padding` đều tự khai.
 */

/* =========================================================================
 * 1. TOOLBAR — chip lọc (trái) + bộ đếm (phải), MỘT hàng ≥768
 * ====================================================================== */

.project-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.project-toolbar__filters {
	min-width: 0;
	flex: 1 1 auto;
}

/*
 * Chip KHÔNG wrap ở khổ nào (spec pixel §6): ≥768 tám chip vừa container;
 * term thêm sau mà tràn thì cuộn ngang trong khung riêng, không xuống hàng
 * và không làm trang cuộn ngang (Q-04). Thanh cuộn ẩn — vẫn vuốt được.
 */
.project-toolbar .filter-chips {
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 2px;   /* chừa chỗ cho vòng focus không bị xén */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.project-toolbar .filter-chips::-webkit-scrollbar {
	display: none;
}

/*
 * Padding 8/14 thay vì 8/20 của spec pixel §6 — GĐ khi dựng 2026-09-15: đo ở
 * 1440, tám chip tiếng Việt + bộ đếm dạng "Đang xem 1–9 trong 18 dự án" cần
 * 1046px trong khi chỗ còn 951px (tràn 95px, chip cuối bị cắt giữa chừng).
 * Layout vẽ bộ đếm ngắn "8 dự án" nên vừa; giữ 20 thì hoặc chip bị cắt hoặc
 * bộ đếm xuống hàng — cả hai đều lệch ảnh nhiều hơn 6px padding.
 */
.project-toolbar .filter-chips__item {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-weight: var(--fw-medium);
	white-space: nowrap;
	scroll-snap-align: start;
}

.project-toolbar__count {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: right;
}

@media (max-width: 767px) {

	/* SP: chip cuộn ngang full-width, bộ đếm xuống dòng riêng cách 4px. */
	.project-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-1);
	}

	.project-toolbar .filter-chips__item {
		padding: 8px 16px;
	}

	.project-toolbar__count {
		text-align: right;
	}
}

/* =========================================================================
 * 2. LƯỚI — 3 / 3 / 2 / 1 cột
 * ====================================================================== */

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6);
	align-items: stretch;
}

.project-list .pagination {
	margin-top: var(--sp-10);
	margin-bottom: var(--sp-16);
}

@media (max-width: 991px) {

	.project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.project-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
	}

	.project-list .pagination {
		margin-top: var(--sp-6);
		margin-bottom: var(--sp-12);
	}
}

/* =========================================================================
 * 3. CARD DỰ ÁN — ảnh 4:3, tag đè góc, tên 2 dòng, meta icon
 *
 * `card/project.php` (C-15) còn chạy ở slider trang chủ, nên mọi ghi đè ở
 * đây bám `.project-grid` / `.project-related` — không đụng `.card--project`
 * trần. Tag: nền navy 85% chữ trắng hoa, bo 4 (spec pixel §10), KHÔNG pill.
 * ====================================================================== */

.project-grid .card__thumb,
.project-related .card__thumb {
	aspect-ratio: var(--ar-project);
}

.project-grid .card__badge,
.project-related .card__badge {
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	background: rgb(0 30 90 / 85%);
	border-radius: var(--radius-sm);
}

.project-grid .card__body,
.project-related .card__body {
	gap: var(--sp-4);
	padding: var(--sp-4);
}

/* `.card__meta--project` (icon + gap cố định + cắt 1 dòng) nằm ở components.css
   cạnh `.card__meta`: card còn chạy ở slider trang chủ, luật để ở đây thì trang
   chủ không nhận (đo 2026-09-15: địa điểm dài gãy 2 dòng ở trang chủ). */

/* Tên LUÔN giữ chỗ 2 dòng, kể cả tên 1 dòng — card cùng hàng cao bằng nhau
   (PW-P63/P64). `min-height` = 2 × line-height. */
.project-grid .card__title,
.project-related .card__title {
	min-height: calc(2 * var(--lh-heading) * 1em);
}

@media (max-width: 767px) {

	.project-grid .card__body {
		gap: var(--sp-3);
	}
}

/* =========================================================================
 * 4. CHI TIẾT DỰ ÁN — hai cột 768 | 408, DOM = PC = SP (không `order`)
 * ====================================================================== */

.project-layout {
	display: grid;
	grid-template-columns: minmax(0, 768fr) minmax(0, 408fr);
	gap: var(--sp-6);
	align-items: start;
}

.project-layout__main {
	min-width: 0;
}

/* Cột phải: 3 thẻ xếp dọc, KHÔNG sticky (spec §0.4-2). */
.project-aside {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.project-card-box {
	padding: var(--sp-6);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
	box-sizing: border-box;
}

@media (max-width: 991px) {

	.project-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * 5. GALLERY VIEWER — ảnh lớn 4:3 + nút phóng to + hàng thumbnail
 *
 * Số ô theo khổ đi qua `--gallery-cols-pc/sp` do template in; ô vượt số ô
 * của khổ hẹp (`--pc`) và hai ô "+n" (`--more-pc/sp`) ẩn/hiện theo khổ.
 * ====================================================================== */

.gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--c-bg-alt);
	border: var(--border-w) solid var(--c-border);
}

.gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ar-project);
	object-fit: cover;
}

.gallery__image[role="button"] {
	cursor: zoom-in;
}

.gallery__zoom {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--c-primary);
	background: var(--c-bg);
	border: 0;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {

	.gallery__zoom:hover {
		color: var(--c-text-invert);
		background: var(--c-primary);
	}
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols-pc, 6), minmax(0, 1fr));
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}

.gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--c-bg-alt);
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition);
	box-sizing: border-box;
}

.gallery__thumb.is-active {
	border-color: var(--c-primary);
}

/* Hover thumbnail — R-06-single-project F-01. Ô "+n" tối thêm để báo bấm được. */
@media (hover: hover) and (pointer: fine) {

	.gallery__thumb:hover {
		border-color: var(--c-border-strong);
	}

	.gallery__thumb--more:hover .gallery__more {
		background: rgb(0 24 66 / 85%);
	}
}

.gallery__thumb-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ar-project);
	object-fit: cover;
}

/* Ô "+n": phủ navy 72% + số trắng (spec pixel §9.4). */
.gallery__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-semi);
	color: var(--c-text-invert);
	background: rgb(0 24 66 / 72%);
}

/* Khổ rộng: ẩn ô "+n" của SP. */
.gallery__thumb-item--more-sp {
	display: none;
}

@media (max-width: 767px) {

	.gallery__thumbs {
		grid-template-columns: repeat(var(--gallery-cols-sp, 4), minmax(0, 1fr));
	}

	/* Khổ hẹp: ẩn ô vượt số ô SP và ô "+n" của PC; hiện ô "+n" của SP. */
	.gallery__thumb-item--pc,
	.gallery__thumb-item--more-pc {
		display: none;
	}

	.gallery__thumb-item--more-sp {
		display: block;
	}
}

/* =========================================================================
 * 6. MÔ TẢ DỰ ÁN — trong cột trái, dưới gallery; blockquote kiểu trích dẫn
 * ====================================================================== */

.project-desc {
	margin-top: var(--sp-6);
}

.project-desc__content {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
}

.project-desc__content > :first-child {
	margin-top: 0;
}

.project-desc__content h3 {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--c-heading);
}

.project-desc__content p {
	margin: 0 0 var(--sp-5);
}

/*
 * Trích dẫn (block core Quote): nền xám bo 8, icon ngoặc kép cam góc trên
 * trái, chữ navy — spec pixel §14. KHÔNG nền cam.
 */
.project-desc__content blockquote {
	position: relative;
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6) var(--sp-5) 56px;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-heading);
	background: var(--c-bg-alt);
	border: 0;
	border-radius: var(--radius-md);
}

.project-desc__content blockquote::before {
	content: "\201C";
	position: absolute;
	top: 8px;
	left: var(--sp-5);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 44px;
	line-height: 1;
	color: var(--c-accent);
}

.project-desc__content blockquote p:last-child {
	margin-bottom: 0;
}

/* 4 cam kết: một hàng, vạch dọc giữa các mục. */
.project-commitments {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.project-commitments__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-left: var(--sp-4);
	border-left: var(--border-w) solid var(--c-border);
}

.project-commitments__item:first-child {
	padding-left: 0;
	border-left: 0;
}

.project-commitments__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--c-primary);
	border: 2px solid var(--c-primary);
	border-radius: var(--radius-full);
	box-sizing: border-box;
}

.project-commitments__img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.project-commitments__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--c-heading);
}

@media (max-width: 991px) {

	.project-commitments {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-commitments__item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 767px) {

	/* SP: thẻ nền xám, xếp dọc, kẻ mảnh giữa dòng (ảnh SP). */
	.project-commitments {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: var(--sp-2) var(--sp-4);
		background: var(--c-bg-alt);
		border-radius: var(--radius-md);
	}

	.project-commitments__item,
	.project-commitments__item:first-child,
	.project-commitments__item:nth-child(odd) {
		padding: var(--sp-3) 0;
		border-left: 0;
		border-bottom: var(--border-w) solid var(--c-border);
	}

	.project-commitments__item:last-child {
		border-bottom: 0;
	}
}

/* =========================================================================
 * 7. CỘT PHẢI — bảng thông tin có icon · dịch vụ · box CTA cam nhạt
 * ====================================================================== */

/* Bảng 6 dòng: icon 20 | nhãn 118 | giá trị (spec pixel §10.3). */
.project-info .info-table--icons .info-table__row {
	grid-template-columns: 20px 118px minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: start;
	min-height: 52px;
	padding: var(--sp-3) 0;
	box-sizing: border-box;
}

.project-info .info-table__row:last-child {
	border-bottom: 0;
}

.project-info .info-table__icon-cell {
	display: inline-flex;
	padding-top: 1px;
	color: var(--c-primary);
}

.project-info .info-table__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--c-text-muted);
}

.project-info .info-table__value {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--c-text);
}

.project-info .info-table__link {
	color: var(--c-primary);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

	.project-info .info-table__link:hover {
		text-decoration: underline;
	}
}

.project-services__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-services__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-2) 0;
	font-size: var(--fs-sm);
	color: var(--c-text);
	text-decoration: none;
	border-bottom: var(--border-w) solid var(--c-border);
	transition: var(--transition);
}

.project-services__item:last-child .project-services__link {
	border-bottom: 0;
}

.project-services__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--c-accent);
}

.project-services__icon-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.project-services__name {
	flex: 1 1 auto;
	min-width: 0;
}

.project-services__chevron {
	flex: 0 0 auto;
	color: var(--c-text-muted);
}

@media (hover: hover) and (pointer: fine) {

	.project-services__link:hover {
		color: var(--c-primary);
	}

	.project-services__link:hover .project-services__chevron {
		color: var(--c-primary);
	}
}

/* Box CTA: nền cam nhạt (token có sẵn), chữ navy — ảnh thắng spec pixel. */
.project-cta {
	background: var(--c-accent-50);
	border-color: rgb(252 108 6 / 30%);
}

.project-cta__desc {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text);
}

.project-cta__btn {
	width: 100%;
	justify-content: center;
	box-sizing: border-box;
}

.project-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;   /* vùng chạm — F-13 cả-dự-án */
	margin-top: var(--sp-1);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

	.project-cta__phone:hover {
		color: var(--c-accent-strong);
	}
}

/* =========================================================================
 * 8. DỰ ÁN KHÁC CÙNG LOẠI — Swiper: ≥992 ba slide = lưới tĩnh · <768 một card
 * ====================================================================== */

.project-related {
	margin-top: var(--sp-12);
	padding-bottom: var(--sp-16);
}

/*
 * Chỗ thở dọc để hover nhấc 2px + bóng không bị `overflow: hidden` xén.
 *
 * ⚠️ Bộ chọn HAI cấp là cố ý: `swiper.min.css` khai `.swiper { padding: 0 }`
 *    cùng độ đặc hiệu với `.project-related__slider` và nạp SAU, nên bản một
 *    cấp thua im lặng — đo ra khối 394px xén 2px, mất hết đệm dưới (2026-09-15).
 */
/* Chỗ thở dọc qua `.swiper--breathe` (components.css) — không chép mẹo lần 3. */

.project-related .swiper-slide {
	height: auto;
}

/*
 * LƯỚI DỰ PHÒNG khi Swiper KHÔNG khởi tạo — bug end-user testing 2026-09-18.
 *
 * Template chỉ nạp Swiper JS/CSS khi có ≥2 dự án cùng loại (PW-J76: một card
 * không có gì để trượt). Nhưng markup `.swiper-wrapper > .swiper-slide` vẫn in
 * ra, và không còn CSS vendor nào ràng bề rộng slide ⇒ card duy nhất phình
 * trọn 1200px (ảnh khách chụp `/du-an/so-giao-dich-chung-khoan-tp-hcm/`).
 * Luật này chỉ chạy khi chưa có `.swiper-initialized` (Swiper tự gắn class đó
 * lúc init), nên slider thật không bị đè; đồng thời là lưới an toàn nếu JS lỗi.
 * 3 cột / 16px = đúng `slidesPerView 3` + `spaceBetween 16` của slider.js.
 */
.project-related__slider:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.project-related__slider:not(.swiper-initialized) .swiper-slide {
	width: auto;
	min-width: 0;
}

@media (max-width: 991px) {
	.project-related__slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.project-related__slider .swiper-slide {
		width: 100%;
	}

	/* Lưới dự phòng (xem trên): 1 cột ở điện thoại như slider thật. */
	.project-related__slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-related .block-title--split {
		flex-wrap: wrap;
	}

	.project-related .block-title__link {
		width: 100%;
		justify-content: flex-end;
	}
}