/* Block Hàng logo (Figma "Detail page → Our responsibility": section 1920 × 711, nền trang #F6F6F6;
   chữ nền "CERTIFIED" Zalando 800 198/194 #B3B3B3 20%, top 85; tiêu đề Zalando 900 72px, top 226;
   Frame 81: 1806 × 144, gap 56, top 407; dưới cùng còn 160) */

.block-logo-row {
	padding: clamp(40px, 4.43vw, 85px) var(--gutter) clamp(64px, 8.33vw, 160px);
	overflow-x: clip;
	text-align: center;
}

.block-logo-row__head {
	position: relative;
	display: grid;
	justify-items: center;
}

.block-logo-row__decor {
	font-size: clamp(56px, 10.31vw, 198px);
	line-height: 0.98;
	white-space: normal;
}

/* Tiêu đề đè lên nửa dưới chữ nền: 226 − 85 = 141 / 194. */
.block-logo-row__title {
	margin-top: calc(-1 * clamp(20px, 2.76vw, 53px));
	font-size: clamp(22px, 3.75vw, 72px);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

.block-logo-row__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.92vw, 56px);
	margin-top: clamp(32px, 4.9vw, 94px);
}

/* Giới hạn bề ngang đặt ở <li>, không đặt "max-width: min(100%, …)" ở <img>: % trong max-width của ảnh không tính được
   khi đo bề ngang <li>, nên <li> rộng theo ảnh gốc còn ảnh bị co lại → thừa khoảng trống bên phải logo rộng (C-TPAT, amfori). */
.block-logo-row__item {
	flex: 0 1 auto;
	min-width: 0;
	max-width: clamp(96px, 11vw, 211px);
}

/* Logo cao 144 (Frame 81 hug), rộng theo tỉ lệ ảnh; multiply bỏ nền trắng của logo JPG trên nền trang xám. */
.block-logo-row__item img {
	width: auto;
	max-width: 100%;
	height: clamp(56px, 7.5vw, 144px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

@media (min-width: 1024px) {
	.block-logo-row__list {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}