/* ==========================================================================
   COMMITMENT V2 — BƯỚC 56D
   Giữ giao diện compact đã chốt ở 56B.
   Đã loại compatibility bridge với index.scss legacy sau khi audit dependency.
   ========================================================================== */

.commitment-v2{
	--commitment-accent:#B91441;
	--commitment-text:#2a2a2a;
	--commitment-muted:#565656;
	--commitment-border:#d2d2d2;
	--commitment-border-strong:#c8c8c8;
	--commitment-bg:#fff;
	width:100%;
	padding:18px 0;
	margin-top:0;
	background:#fff;
}

.commitment-v2__grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:14px;
}

.commitment-v2__item{
	position:relative;
	min-width:0;
	min-height:124px;
	display:grid;
	grid-template-columns:44px minmax(0,1fr);
	align-items:start;
	gap:13px;
	padding:16px 18px 14px;
	border:1.5px solid var(--commitment-border);
	border-radius:16px;
	background:var(--commitment-bg);
	box-shadow:0 2px 8px rgba(20,20,20,.035);
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.commitment-v2__item:hover{
	transform:translateY(-2px);
	border-color:var(--commitment-border-strong);
	box-shadow:0 12px 28px rgba(18,18,18,.07);
}

.commitment-v2__icon{
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--commitment-accent);
}

.commitment-v2__icon svg{
	width:40px;
	height:40px;
	display:block;
	fill:none;
	stroke:currentColor;
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.commitment-v2__icon-img{
	width:40px;
	height:40px;
	display:block;
	object-fit:contain;
	object-position:center;
}

.commitment-v2__icon-fallback{
	display:none!important;
}

.commitment-v2__icon-img[style*="display: none"] + .commitment-v2__icon-fallback{
	display:block!important;
}

.commitment-v2__body{
	min-width:0;
}

.commitment-v2__body h3{
	margin:0 0 6px;
	color:var(--commitment-accent);
	font-family:var(--font-base,'Roboto',Arial,sans-serif);
	font-size:18px;
	font-weight:700;
	line-height:1.28;
}

.commitment-v2__body p{
	margin:0;
	color:var(--commitment-muted);
	font-family:var(--font-base,'Roboto',Arial,sans-serif);
	font-size:15px;
	font-weight:400;
	line-height:1.48;
}

.commitment-v2__link{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:7px;
	color:var(--commitment-accent);
	font-size:13px;
	font-weight:700;
	line-height:1.25;
	letter-spacing:.02em;
	text-decoration:none;
	text-transform:none;
}

.commitment-v2__link:hover,
.commitment-v2__link:focus-visible{
	color:#A70B35;
	text-decoration:none;
}

.commitment-v2__link span:last-child{
	transition:transform .2s ease;
}

.commitment-v2__link:hover span:last-child{
	transform:translateX(3px);
}

.commitment-v2__link:focus-visible{
	outline:2px solid currentColor;
	outline-offset:3px;
}

@media(max-width:1199px){
	.commitment-v2__body h3{
		font-size:17px;
	}

	.commitment-v2__body p{
		font-size:14px;
	}
}

@media(max-width:1023px){
	.commitment-v2{
		padding:16px 0;
	}

	.commitment-v2__grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:12px;
	}

	.commitment-v2__item{
		min-height:118px;
		padding:15px 16px 13px;
	}
}

@media(max-width:767px){
	.commitment-v2{
		padding:14px 0;
		margin-top:0;
	}

	.commitment-v2__grid{
		grid-template-columns:1fr;
		gap:10px;
	}

	.commitment-v2__item{
		min-height:0;
		grid-template-columns:42px minmax(0,1fr);
		gap:12px;
		padding:16px 15px;
		border-radius:13px;
	}

	.commitment-v2__icon{
		width:42px;
		height:42px;
	}

	.commitment-v2__icon svg{
		width:36px;
		height:36px;
	}

	.commitment-v2__icon-img{
		width:36px;
		height:36px;
	}

	.commitment-v2__body h3{
		font-size:16px;
		margin-bottom:6px;
	}

	.commitment-v2__body p{
		font-size:13.5px;
		line-height:1.48;
	}

	.commitment-v2__link{
		font-size:12.5px;
		margin-top:8px;
	}
}

@media(prefers-reduced-motion:reduce){
	.commitment-v2__item,
	.commitment-v2__link span:last-child{
		transition:none!important;
	}
}