/* Block Thị trường xuất khẩu (Figma "About us" – Frame 2147231116, nền #151D32) */

.block-markets {
	position: relative;
	padding: clamp(32px, 2.08vw, 40px) var(--gutter);
	overflow: hidden;
	background: #151d32;
	color: #fff;
	isolation: isolate;
}

/* Chữ nền co cho vừa bề ngang (--fit do assets/js/site.js đặt, feedback vòng 2); không có JS thì canh giữa, tràn đều 2 mép. */
.block-markets__decor {
	position: relative;
	font-size: calc(var(--fs-decor) * var(--fit, 1));
	left: 50%;
	width: max-content;
	color: #2a3350;
	opacity: 1;
	transform: translateX(-50%);
}

.block-markets__map {
	position: relative;
	max-width: 1500px;
	margin: clamp(-24px, -1vw, -8px) auto 0;
}

.block-markets__map > img {
	width: 100%;
	height: auto;
}

/* Desktop: cả section (chữ nền + bản đồ + số liệu) vừa 1 màn hình dưới header dính (feedback vòng 2).
   Bản đồ rộng theo phần chiều cao còn lại (tỉ lệ ảnh 1800 × 708), tối đa 1500px. */
@media (min-width: 1024px) {
	.block-markets {
		--markets-pad: clamp(32px, 2.08vw, 40px);
		--markets-stats: clamp(96px, 5.6vw, 108px); /* hàng số liệu + khoảng cách phía trên */
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh - var(--header-height));
	}

	.block-markets__map {
		width: min(100%, 1500px, (100svh - var(--header-height) - 2 * var(--markets-pad) - 0.98 * var(--fs-decor) * var(--fit, 1) - var(--markets-stats) - clamp(24px, 2vw, 40px)) * 1800 / 708);
	}

	.block-markets__stats {
		width: 100%;
	}
}

.market-pin {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: grid;
	place-items: center;
	color: var(--color-primary);
	transform: translate(-50%, -100%);
	outline-offset: 2px;
}

.market-pin .icon {
	width: clamp(14px, 1.25vw, 24px);
	height: clamp(14px, 1.25vw, 24px);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
	transition: transform 0.2s;
}

.market-pin:is(:hover, :focus-visible) .icon {
	transform: scale(1.3);
}

/* Tên thị trường hiện khi rê chuột / focus. */
.market-pin::after {
	content: attr(data-label);
	position: absolute;
	bottom: 100%;
	left: 50%;
	padding: 4px 8px;
	border-radius: 4px;
	background: #fff;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -4px);
	transition: opacity 0.2s;
}

.market-pin:is(:hover, :focus-visible)::after {
	opacity: 1;
}

/* Số liệu ----------------------------------------------------------------- */

.block-markets__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 1500px;
	margin: clamp(24px, 2vw, 40px) auto 0;
}

@media (min-width: 1024px) {
	.block-markets__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}

	.market-stat + .market-stat {
		border-left: 1px solid #2a3350;
	}
}

.market-stat {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(10px, 0.83vw, 16px);
	padding-inline: 12px;
}

.market-stat__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(40px, 2.92vw, 56px);
	height: clamp(40px, 2.92vw, 56px);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	color: #c7cad3;
}

.market-stat__text {
	display: grid;
	gap: 10px;
}

.market-stat__text strong {
	position: relative;
	justify-self: start;
	font-family: var(--font-display);
	font-size: clamp(22px, 2.08vw, 40px);
	font-weight: 700;
	line-height: 1.1;
}

/* Gạch đỏ dưới số (nét bút trong Figma). */
.market-stat__text strong::after {
	content: "";
	position: absolute;
	right: 4%;
	bottom: -8px;
	left: 0;
	height: 4px;
	border-radius: 4px;
	background: var(--color-primary);
	transform: rotate(-2.5deg);
}

.market-stat__text span {
	max-width: 18ch;
	font-size: clamp(11px, 0.73vw, 14px);
	line-height: 1.4;
	text-transform: uppercase;
	color: #8e8e93;
}