/* =========================================================================
   Khối "Anh chị cần nhập hàng cho mô hình nào?" — bốn nhóm khách.

   Dùng ở HAI trang: trang chủ (nội dung gốc, đứng trên "Sản phẩm nổi bật") và
   trang liên hệ. Nên nó ở file riêng chứ không nằm trong home.css hay contact.css:
   nhét vào một trong hai là trang kia phải chép lại, rồi hai bản trôi khỏi nhau.

   Bộ biến khai lại tại đây thay vì đi mượn — file này nạp độc lập với home.css,
   mà home.css khai --kl-* trên đúng năm khối của trang chủ, không phủ tới khối này.
   ========================================================================= */

.kl-mh {
	--kl-xanh: #55a61d;
	--kl-xanh-chu: #3f7d15;
	--kl-xanh-sang: #6fbf2a;
	--kl-vang: #8a570c;
	--kl-vang-nhat: #fbf0dc;
	--kl-muc: #333;
	--kl-muc-2: #5b6d64;
	--kl-vien: #dfe8d9;
	background: #fff;
}

.kl-mh {
	padding: 30px 0 6px;
}
.kl-mh__dau {
	margin-bottom: 16px;
}
.kl-mh__h {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: #1c2b21;
	text-wrap: balance;
}
.kl-mh__h em {
	font-style: normal;
	color: var(--kl-xanh-chu);
}
.kl-mh__phu {
	margin: 7px 0 0;
	max-width: 62ch;
	font-size: 14.8px;
	line-height: 1.6;
	color: var(--kl-muc-2);
}
.kl-mh__luoi {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.kl-mh-o {
	display: flex;
	flex-direction: column;
	padding: 16px 16px 14px;
	border: 1px solid var(--kl-vien);
	border-radius: 14px;
	background: #fff;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.kl-mh-o:hover {
	border-color: var(--kl-xanh-sang);
	box-shadow: 0 16px 30px -22px rgba(28, 43, 33, .55);
	transform: translateY(-3px);
}
.kl-mh-o__dau {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 11px;
	border: 1px solid #d8e8c9;
	border-radius: 11px;
	background: #f2f9ec;
	color: var(--kl-xanh-chu);
}
.kl-mh-o__dau svg {
	width: 21px;
	height: 21px;
}
.kl-mh-o--vang .kl-mh-o__dau {
	border-color: #efdcb4;
	background: var(--kl-vang-nhat);
	color: var(--kl-vang);
}
.kl-mh-o__t {
	margin: 0;
	font-size: 15.6px;
	font-weight: 800;
	letter-spacing: -.012em;
	line-height: 1.3;
	color: #1c2b21;
}
/* Dòng lợi ích: một câu khách đọc lướt cũng nắm được, đặt ngay dưới tên nhóm. */
.kl-mh-o__loi {
	margin: 5px 0 0;
	font-size: 13.8px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: var(--kl-xanh-chu);
}
.kl-mh-o--vang .kl-mh-o__loi {
	color: var(--kl-vang);
}
.kl-mh-o__can {
	margin: 7px 0 0;
	font-size: 13.4px;
	line-height: 1.55;
	color: var(--kl-muc-2);
}
.kl-mh-o__dap {
	margin: 9px 0 0;
	padding-top: 9px;
	border-top: 1px dashed var(--kl-vien);
	font-size: 13.4px;
	line-height: 1.55;
	color: var(--kl-muc);
	font-variant-numeric: tabular-nums;
}
.kl-mh-o__dap b {
	font-weight: 700;
	color: #1c2b21;
}
.kl-mh-o__nut {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 13.6px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--kl-xanh-chu);
}
.kl-mh-o__nut:hover {
	color: var(--kl-xanh);
	text-decoration: none;
}
.kl-mh-o__nut i {
	font-style: normal;
	transition: transform .25s;
}
.kl-mh-o:hover .kl-mh-o__nut i {
	transform: translateX(4px);
}

/* ---------- MÀN HẸP ---------- */
@media (max-width: 992px) {
	.kl-mh__luoi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 576px) {
	.kl-mh__luoi {
		grid-template-columns: minmax(0, 1fr);
	}
}