/* Block Bản đồ nhà máy (Figma "Detail page → Contact" → Frame 2147231116: 1920 × 1318, nền #151D32, padding 80 / 56 / 40, gap 24;
   chữ nền "OUR SYSTEM" Zalando 900 168/252 trắng 8%; Frame 2147231151 rộng 1600, gap 60: bản đồ 902 × 1036 + thẻ 640) */

.block-factory-map {
	position: relative;
	margin-top: var(--section-space);
	padding: clamp(48px, 4.17vw, 80px) var(--gutter) clamp(32px, 2.08vw, 40px);
	overflow: hidden;
	background: #151d32;
	color: #fff;
}

.block-factory-map__decor {
	font-size: clamp(48px, 8.75vw, 168px);
	font-weight: 900;
	line-height: 0.82; /* Figma 150% nhưng hộp chữ bị cắt bởi khung 138 */
	color: #fff;
	opacity: 0.08;
	white-space: normal;
}

.block-factory-map__inner {
	display: grid;
	gap: clamp(24px, 3.13vw, 60px);
	max-width: 1600px;
	margin: clamp(16px, 1.25vw, 24px) auto 0;
}

@media (min-width: 1024px) {
	.block-factory-map__inner {
		grid-template-columns: minmax(0, 902fr) minmax(0, 640fr);
		align-items: start;
	}
}

/* Bản đồ ---------------------------------------------------------------- */

.factory-map {
	position: relative;
	display: grid;
	gap: 16px;
}

/* Khung 902 × 1036 (Figma). viewBox của SVG là khung đang xem: mặc định miền Bắc như Figma (provinces.php "default"),
   factory-map.js đổi viewBox khi phóng to / thu nhỏ / kéo. */
.factory-map__viewport {
	overflow: hidden;
	aspect-ratio: 902 / 1036;
}

.factory-map__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.is-map-ready .factory-map__svg {
	cursor: grab;
	touch-action: pan-y; /* điện thoại: vuốt dọc vẫn cuộn trang, vuốt ngang kéo bản đồ */
}

.is-map-ready.is-zoomed .factory-map__svg {
	touch-action: none;
}

.is-map-ready.is-dragging .factory-map__svg {
	cursor: grabbing;
}

.factory-map__province {
	fill: #3f4556;
	stroke: #151d32;
	stroke-width: 0.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke; /* viền mảnh như nhau ở mọi mức phóng */
	transition: fill 0.3s;
}

/* Tỉnh có nhà máy: đỏ nhạt. Rơi xuống như ghim bản đồ (About us) khi bản đồ lên giữa màn hình: factory-map.js gắn
   .is-pins-waiting lúc tải trang rồi gỡ khi tới, mỗi tỉnh trễ --pin-delay. */
.factory-map__province--factory {
	fill: rgba(229, 62, 81, 0.55);
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transition: fill 0.3s, transform 1.2s var(--ease-spring) var(--pin-delay, 0s), opacity 0.5s ease var(--pin-delay, 0s);
}

.is-pins-waiting .factory-map__province--factory {
	opacity: 0;
	transform: translateY(-60px) scale(0.3);
	transition: none;
}

/* Tỉnh đang chọn: đỏ "Primary red light", viền trắng (Figma), bóng nổi lên khỏi bản đồ. */
.factory-map__province.is-active {
	fill: var(--color-primary);
	stroke: #fff;
	stroke-width: 1;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

/* Đã chọn tỉnh: các tỉnh khác phủ một lớp tối (feedback vòng 4). */
.has-selection .factory-map__province:not(.is-active) {
	fill: #2a2f3e;
}

.has-selection .factory-map__province--factory:not(.is-active) {
	fill: rgba(229, 62, 81, 0.4);
}

.is-map-ready .factory-map__province--factory {
	cursor: pointer;
}

.is-map-ready:not(.is-dragging) .factory-map__province--factory:not(.is-active):hover {
	fill: rgba(229, 62, 81, 0.8);
}

/* Quần đảo Hoàng Sa, Trường Sa (vẽ đúng vị trí, thấy rõ khi thu nhỏ xem cả nước). */
.factory-map__islands path {
	fill: #8b93a8;
}

.factory-map__islands text {
	font-family: var(--font-body);
	font-size: calc(12px * var(--map-unit, 1));
	font-weight: 500;
	fill: rgba(255, 255, 255, 0.6);
}

/* ZoomControls: 44 × 88, nền trắng, viền #E2E8F0, bo 8, cách đỉnh 474 / 1036. */
.factory-map__zoom {
	position: absolute;
	top: 45.75%;
	left: 0;
	display: none;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.is-map-ready .factory-map__zoom {
	display: flex;
}

.factory-map__zoom-button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 12px;
	border: 0;
	background: none;
	color: #1e1e1e;
	cursor: pointer;
}

.factory-map__zoom-button + .factory-map__zoom-button {
	border-top: 1px solid #e2e8f0;
}

.factory-map__zoom-button:hover:not(:disabled) {
	color: var(--color-primary);
}

.factory-map__zoom-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.factory-map__zoom-button .icon {
	width: 20px;
	height: 20px;
}

/* Tỉnh có nhà máy (thêm so với Figma): nút chọn tỉnh kèm số nhà máy. Desktop: góc phải trên khung bản đồ – vùng trống
   (Trung Quốc / biển) ở cả khung miền Bắc lẫn khung cả nước. */
.factory-map__provinces-nav {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
}

.is-map-ready .factory-map__provinces-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (min-width: 1024px) {
	.factory-map__provinces-nav {
		position: absolute;
		top: 2%;
		right: 0;
		max-width: 42%;
	}

	/* Desktop: 1 cột, mọi nút rộng bằng nút dài nhất. */
	.is-map-ready .factory-map__provinces-nav {
		grid-template-columns: max-content;
	}
}

.factory-map__chip {
	display: flex;
	align-items: center;
	justify-content: space-between; /* tên tỉnh trái, số nhà máy phải: các nút bằng nhau nhìn thẳng hàng */
	gap: 8px;
	padding: 6px 6px 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	background: rgba(21, 29, 50, 0.75);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.factory-map__chip:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

.factory-map__chip[aria-pressed="true"] {
	border-color: var(--color-primary);
	background: var(--color-primary);
}

.factory-map__chip-count {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.15);
	font-size: 12px;
	font-weight: 600;
}

/* Bảng nhà máy (factory-detail-card: 640 rộng, bo 24, viền #E2E8F0, padding 24, gap 28, bóng 0 0 24) -------------------
   Một khung cho mỗi tỉnh: thẻ nhà máy đang xem + bộ đếm ở dưới. Không có JS: mọi khung hiện liền nhau, mọi thẻ hiện. */

.block-factory-map__cards {
	display: grid;
	gap: 24px;
}

.factory-group {
	display: grid;
	gap: clamp(20px, 1.46vw, 28px);
	padding: clamp(16px, 1.25vw, 24px);
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
	color: #0f172a;
}

.factory-group[hidden],
.factory-detail[hidden] {
	display: none;
}

.factory-detail {
	display: grid;
	gap: clamp(20px, 1.46vw, 28px);
}

/* Không có JS: các nhà máy cùng tỉnh cách nhau một đường kẻ. */
.factory-detail + .factory-detail:not([hidden]) {
	padding-top: clamp(20px, 1.46vw, 28px);
	border-top: 1px solid #e2e8f0;
}

/* Đổi tỉnh: khung hiện lên; đổi nhà máy trong tỉnh: thẻ trượt vào theo chiều nút bấm. */
.factory-group.is-entering {
	animation: factory-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.factory-detail.is-entering-next {
	animation: factory-slide-next 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.factory-detail.is-entering-prev {
	animation: factory-slide-prev 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes factory-in {
	from { opacity: 0; transform: translateY(16px); }
}

@keyframes factory-slide-next {
	from { opacity: 0; transform: translateX(32px); }
}

@keyframes factory-slide-prev {
	from { opacity: 0; transform: translateX(-32px); }
}

/* Bộ đếm ở dưới: nút trái / phải + "1 / 2" + số nhà máy của tỉnh. Không có JS: chỉ dòng tổng số. */
.factory-group__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid #e2e8f0;
}

.factory-group__button,
.factory-group__position {
	display: none;
}

.is-map-ready .factory-group__button {
	display: grid;
}

.is-map-ready .factory-group__position {
	display: block;
}

.factory-group__button {
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.factory-group__button:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.factory-group__button .icon {
	width: 20px;
	height: 20px;
}

.factory-group__count {
	display: grid;
	flex: 1;
	justify-items: center;
	gap: 2px;
	text-align: center;
}

.factory-group__position {
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.factory-group__total {
	font-size: 13px;
	color: #64748b;
}

/* Ảnh 592 × 280 bo 20, phủ #0891B2 15%. */
.factory-detail__media {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 592 / 280;
}

.factory-detail__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 145, 178, 0.15);
}

.factory-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.factory-detail__head {
	display: grid;
	justify-items: start;
	gap: 8px;
}

.factory-detail__tag {
	padding: 3px 6px;
	border-radius: 2px;
	background: #1877cc;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}

.factory-detail__name {
	font-family: var(--font-body);
	font-size: clamp(22px, 1.67vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: #0f172a;
}

.factory-detail__meta {
	display: grid;
	gap: 16px;
}

.factory-detail__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

.factory-detail__facts > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	border-radius: var(--radius-sm);
	background: #f1f5f9;
}

.factory-detail__facts dt {
	font-size: 12px;
	color: #64748b;
}

.factory-detail__facts dd {
	font-size: clamp(14px, 0.94vw, 18px);
	font-weight: 600;
}

.factory-detail__rows > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	padding-block: 10px;
	border-bottom: 1px solid #e2e8f0;
	font-size: 14px;
}

.factory-detail__rows > div:first-child {
	padding-top: 0;
}

.factory-detail__rows dt {
	font-weight: 600;
	text-transform: uppercase;
	color: #334155;
}

.factory-detail__rows dd {
	color: #334155;
}

.factory-detail__group {
	display: grid;
	gap: 12px;
}

.factory-detail__label {
	font-size: 14px;
	font-weight: 600;
	color: #334155;
}

.factory-detail__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.factory-detail__chips li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid #1e1e1e;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.factory-detail__chips--certifications li {
	border-color: #e0f2fe;
	background: #e0f2fe;
	font-weight: 500;
	text-transform: uppercase;
	color: #0284c7;
}

.factory-detail__chips .icon {
	width: 12px;
	height: 12px;
}

/* Desktop: cả section vừa 1 màn hình (feedback vòng 4) ------------------------------------------------------------
   Section cao = màn hình trừ header (cột flex); chữ nền nhỏ theo chiều cao màn hình; bản đồ + bảng chiếm phần còn lại:
   bản đồ cao hết phần đó (bề ngang theo tỉ lệ 902 × 1036, không quá cột), bảng nhà máy gọn hơn, màn hình thấp thì
   cuộn bên trong bảng. Không tính sẵn chiều cao chữ nền: bản VI có line-height riêng cho dấu chồng. */
@media (min-width: 1024px) {
	.block-factory-map {
		--fm-pad: clamp(16px, 2.5vh, 48px);
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--header-height));
		min-height: 560px;
		padding-block: var(--fm-pad);
	}

	.block-factory-map__decor {
		flex: none;
		font-size: min(8.75vw, 11vh);
	}

	.block-factory-map__inner {
		flex: 1 1 0;
		grid-template-rows: minmax(0, 100%);
		align-items: stretch;
		width: 100%;
		min-height: 0;
		margin-top: clamp(8px, 1.5vh, 24px);
	}

	.factory-map {
		grid-template-rows: minmax(0, 1fr);
		min-height: 0;
	}

	.factory-map__viewport {
		justify-self: center;
		width: auto;
		max-width: 100%;
		height: 100%;
	}

	.block-factory-map__cards {
		align-content: center;
		min-height: 0;
	}

	.factory-group {
		gap: clamp(10px, 1.5vh, 24px);
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.factory-detail {
		gap: clamp(10px, 1.5vh, 24px);
	}

	.factory-detail__media {
		height: clamp(90px, 15vh, 280px);
		aspect-ratio: auto;
	}

	.factory-detail__facts > div {
		padding: clamp(6px, 0.9vh, 12px) 12px;
	}

	.factory-detail__rows > div {
		padding-block: clamp(4px, 0.7vh, 10px);
	}

	.factory-detail__group {
		gap: 8px;
	}

	.factory-group__pager {
		padding-top: clamp(8px, 1.2vh, 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.factory-group.is-entering,
	.factory-detail.is-entering-next,
	.factory-detail.is-entering-prev {
		animation: none;
	}
}