/* =========================================================================
   Trang chủ — 5 khối mới. Nạp riêng ở front page, không nhồi vào main.css.

   Tiền tố kl- cho toàn bộ lớp ở đây, tránh đụng tên với solus- của theme.

   Bốn quyết định đã trả giá, đừng sửa nếu chưa đọc lý do:
   · minmax(0,1fr) chứ không phải 1fr — 1fr là minmax(auto,1fr), ô lưới không co
     nhỏ hơn nội dung; dải sản phẩm dài 3.700px từng kéo cả trang tràn ngang.
   · Cỡ chữ tagline tính theo cqw (bề rộng CỘT), không phải vw (bề rộng MÀN).
   · Ba thẻ chứng nhận dùng grid-template-rows: minmax(0,1fr) — flex:1 không đủ
     vì flex item mặc định min-height:auto, thẻ nào chữ dài hơn thì tự giãn.
   · Không mask mờ hai mép dải sản phẩm: thẻ cắt dở ở rìa chính là tín hiệu
     "còn nữa, vuốt tiếp", làm mờ đi thì đọc ra như lỗi hiển thị.
   ========================================================================= */

.kl-gia,
.kl-ve,
.kl-sp,
.kl-giao,
.kl-tin {
	--kl-xanh: #55a61d;
	--kl-xanh-chu: #3f7d15;
	--kl-xanh-sang: #6fbf2a;
	--kl-lanh-0: #04211f;
	--kl-lanh-1: #07322c;
	--kl-vang: #8a570c;
	--kl-vang-nhat: #fbf0dc;
	--kl-giay: #fff;
	--kl-muc: #333;
	--kl-muc-2: #5b6d64;
	--kl-vien: #dfe8d9;
}

/* ---------- KHỐI BẢNG GIÁ ---------- */
.kl-gia {
	position: relative;
	overflow: hidden;
	padding: 30px 0 32px;
	color: #ffffff;
	background: linear-gradient(105deg, var(--solus-green-chu-trang) 0%, var(--solus-primary-dark) 40%, var(--solus-primary) 100%);
}
.kl-gia::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(46% 58% at 88% 6%, rgba(255, 255, 255, .16), transparent 68%);
}
/* Tuyết rơi. Bông tuyết sáu cánh vẽ bằng SVG nhúng thẳng vào CSS dưới dạng
   data-URI — trình duyệt không phải tải thêm file nào, và cả dải chỉ là MỘT lớp
   phủ. Chỉ animate transform nên lớp này nằm ở tầng compositor, không vẽ lại
   từng khung. Lớp cao hơn khối đúng một ô hoa văn và trượt xuống đúng một ô,
   nên vòng lặp nối liền, không thấy điểm giật. */
.kl-gia::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -560px;
	height: calc(100% + 560px);
	z-index: 1;
	pointer-events: none;
	opacity: .85;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cg transform='translate(41.6 70.3) rotate(29.5) scale(1.246)' stroke-opacity='0.42' stroke-width='1.2'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(246.9 92.2) rotate(22.4) scale(1.221)' stroke-opacity='0.48' stroke-width='1.23'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(486.7 29.9) rotate(23.6) scale(0.925)' stroke-opacity='0.54' stroke-width='1.62'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(85.5 315.9) rotate(22.2) scale(0.904)' stroke-opacity='0.45' stroke-width='1.66'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(214.5 215.1) rotate(27.3) scale(0.917)' stroke-opacity='0.66' stroke-width='1.64'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(442.4 247.9) rotate(2.3) scale(0.85)' stroke-opacity='0.44' stroke-width='1.76'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(74.4 488.0) rotate(4.1) scale(1.217)' stroke-opacity='0.61' stroke-width='1.23'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(313.3 428.2) rotate(24.7) scale(0.9)' stroke-opacity='0.54' stroke-width='1.67'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3Cg transform='translate(491.1 439.3) rotate(18.0) scale(1.092)' stroke-opacity='0.43' stroke-width='1.37'%3E%3Cpath d='M12 12L12.00 2.80M12.00 6.94l1.99 -2.37M12.00 6.94l-1.99 -2.37M12.00 4.46l1.41 -1.69M12.00 4.46l-1.41 -1.69M12 12L19.97 7.40M16.38 9.47l3.05 0.54M16.38 9.47l1.06 -2.91M18.53 8.23l2.17 0.38M18.53 8.23l0.75 -2.07M12 12L19.97 16.60M16.38 14.53l1.06 2.91M16.38 14.53l3.05 -0.54M18.53 15.77l0.75 2.07M18.53 15.77l2.17 -0.38M12 12L12.00 21.20M12.00 17.06l-1.99 2.37M12.00 17.06l1.99 2.37M12.00 19.54l-1.41 1.69M12.00 19.54l1.41 1.69M12 12L4.03 16.60M7.62 14.53l-3.05 -0.54M7.62 14.53l-1.06 2.91M5.47 15.77l-2.17 -0.38M5.47 15.77l-0.75 2.07M12 12L4.03 7.40M7.62 9.47l-1.06 -2.91M7.62 9.47l-3.05 0.54M5.47 8.23l-0.75 -2.07M5.47 8.23l-2.17 0.38'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: 560px 560px;
	background-repeat: repeat;
	animation: kl-tuyet-roi 38s linear infinite;
}
@keyframes kl-tuyet-roi {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, 560px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.kl-gia::after { animation: none; }
}
.kl-gia__luoi {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: 32px;
	align-items: center;
}
.kl-gia__h {
	margin: 0;
	font-size: clamp(22px, 2.9vw, 33px);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.14;
	color: #fff;
	text-wrap: balance;
}

.kl-gia__so {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 18px;
	margin: 14px 0 0;
	padding: 13px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .24);
	font-variant-numeric: tabular-nums;
}
.kl-gia__o { display: flex; align-items: baseline; gap: 6px; }
.kl-gia__o b {
	display: inline-block;
	min-width: 2.1ch;
	text-align: right;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -.03em;
	color: #fff;
}
.kl-gia__o span { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #eaf6dd; }

.kl-gia__tinh-nang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.kl-gia__tn {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: center;
	padding: 9px 11px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(0, 0, 0, .22);
}
.kl-gia__tn svg { flex: 0 0 auto; width: 17px; height: 17px; color: #ffffff; }
.kl-gia__tn b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.kl-gia__tn span { display: block; margin-top: 2px; font-size: 12.2px; line-height: 1.4; color: #eaf6dd; }

.kl-gia__cta { margin: 16px 0 0; }
.kl-gia__nut {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1.5px solid transparent;
	border-radius: 99px;
	background: #fff;
	color: #3f7d15;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .38);
	transition: .24s cubic-bezier(.2, .7, .3, 1);
}
.kl-gia__nut:hover { background: #f2fae8; color: #3f7d15; transform: translateY(-2px); text-decoration: none; }
.kl-gia__nut i { font-style: normal; transition: transform .25s; }
.kl-gia__nut:hover i { transform: translateX(4px); }

/* ảnh thu nhỏ của chính bảng giá */
.kl-gia__anh {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--kl-giay);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
	transform: rotate(-.6deg);
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.kl-gia__anh:hover { transform: rotate(0) translateY(-4px); text-decoration: none; }
.kl-gia__thanh {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border-bottom: 1px solid #e0e0e0;
	background: #f3f6f2;
}
.kl-gia__thanh svg { width: 15px; height: 15px; color: #9aa5a0; }
.kl-gia__q { flex: 1; font-size: 13px; color: #9aa5a0; }
.kl-gia__q em { font-style: normal; font-weight: 600; color: var(--kl-muc); }
.kl-gia__dong {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid #f0f3f0;
}
.kl-gia__dong--dau { padding-bottom: 6px; border-bottom: 1px solid var(--kl-muc); }
.kl-gia__dong--dau > span:first-child,
.kl-gia__dong--dau .kl-gia__bac span {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9aa5a0;
}
.kl-gia__ten { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--kl-muc); }
.kl-gia__ten small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9aa5a0; }
.kl-gia__bac { display: flex; gap: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.kl-gia__bac > span { min-width: 74px; font-size: 14px; font-weight: 900; letter-spacing: -.02em; color: var(--kl-muc); }
.kl-gia__tot { color: var(--kl-xanh-chu); }
.kl-gia__chan {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-top: 1px solid #e0e0e0;
	background: #f7faf5;
	font-size: 12px;
	font-weight: 700;
	color: #6b7a72;
}
.kl-gia__chan b { color: var(--kl-xanh-chu); }

/* ---------- KHỐI VỀ KHO ---------- */
.kl-ve {
	position: relative;
	overflow: hidden;
	padding: 34px 0 32px;
	background: linear-gradient(180deg, #fff 0%, #f4faef 46%, #eef6e7 100%);
}
.kl-ve::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(52% 62% at 92% 8%, rgba(85, 166, 29, .1), transparent 70%);
}
.kl-ve::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kl-xanh), var(--kl-xanh-sang) 40%, rgba(85, 166, 29, 0));
}
.kl-ve .container { position: relative; z-index: 2; }
.kl-ve__luoi {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: 34px;
	align-items: stretch;
}
.kl-ve__chu { container-type: inline-size; }
.kl-ve__nhan {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kl-xanh-chu);
}
.kl-ve__nhan i { display: block; width: 24px; height: 2px; background: var(--kl-xanh); border-radius: 2px; }
.kl-ve__h {
	margin: 0;
	font-size: clamp(15px, 4.75vw, 33px);
	font-weight: 900;
	letter-spacing: -.018em;
	line-height: 1.16;
	text-transform: uppercase;
	color: #1c2b21;
}
.kl-ve__h span { display: block; }
.kl-ve__h span + span { margin-top: 2px; }
.kl-ve__h em { font-style: normal; color: var(--kl-xanh-chu); }
/* Cỡ chữ theo bề rộng CỘT, không theo bề rộng MÀN: cột hẹp hơn màn nhiều, dùng vw
   thì chữ to quá khổ và tagline rớt xuống dòng hai. */
@supports (font-size: 1cqw) {
	.kl-ve__h { font-size: clamp(15px, 4.75cqw, 33px); }
	.kl-ve__h span { white-space: nowrap; }
}
.kl-ve__mo-ta { margin: 12px 0 0; max-width: 56ch; font-size: 15.8px; line-height: 1.65; color: #4a5a50; }
.kl-ve__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.kl-ve__nut {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 21px;
	border: 1.5px solid #c7d8bc;
	border-radius: 99px;
	background: rgba(255, 255, 255, .7);
	color: var(--kl-xanh-chu);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	transition: .24s cubic-bezier(.2, .7, .3, 1);
}
.kl-ve__nut:hover { border-color: var(--kl-xanh); background: #fff; transform: translateY(-2px); text-decoration: none; }
.kl-ve__nut--chinh {
	border-color: transparent;
	background: var(--kl-xanh-chu);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(63, 125, 21, .95);
}
.kl-ve__nut--chinh:hover { background: var(--kl-xanh); color: #fff; }

/* ba thẻ chứng nhận — ba hàng bằng nhau tuyệt đối */
.kl-ve__the { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 9px; }
.kl-the {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
	align-items: start;
	padding: 13px 15px;
	border: 1px solid var(--kl-vien);
	border-radius: 13px;
	background: var(--kl-giay);
	box-shadow: 0 2px 10px rgba(28, 43, 33, .05);
}
.kl-the__dau {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid #d3e8c0;
	border-radius: 13px;
	background: #eef7e5;
	color: var(--kl-xanh-chu);
}
.kl-the__dau svg { width: 23px; height: 23px; }
.kl-the--vang .kl-the__dau { border-color: #efdcb4; background: var(--kl-vang-nhat); color: var(--kl-vang); }
.kl-the__t { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.012em; color: #1c2b21; }
.kl-the__d { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--kl-muc-2); font-variant-numeric: tabular-nums; }
.kl-the__d b { font-weight: 700; color: #1c2b21; }

/* dải ảnh tại kho */
.kl-anh { margin-top: 24px; padding-top: 18px; border-top: 1px solid #dbe6d3; }
.kl-anh__dau { display: flex; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.kl-anh__t { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #1c2b21; }
.kl-anh__nut { display: flex; gap: 6px; margin-left: auto; }
.kl-anh__mui {
	width: 30px;
	height: 30px;
	border: 1.5px solid #cfdec6;
	border-radius: 50%;
	background: var(--kl-giay);
	color: var(--kl-xanh-chu);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: .2s;
}
.kl-anh__mui:hover { border-color: var(--kl-xanh); background: #f2f9ec; }
.kl-anh__mui:disabled { opacity: .35; cursor: default; }
.kl-anh__dai {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 2px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.kl-anh__dai::-webkit-scrollbar { display: none; }
.kl-anh__o {
	position: relative;
	flex: 0 0 auto;
	width: 210px;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--kl-vien);
	border-radius: 11px;
	background: #eef2ee;
	cursor: pointer;
	scroll-snap-align: start;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .28s;
}
.kl-anh__o:hover { border-color: var(--kl-xanh-sang); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(28, 43, 33, .6); }
.kl-anh__o img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.kl-anh__o:hover img { transform: scale(1.05); }
.kl-anh__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.kl-anh__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--kl-xanh-chu);
}

/* popup xem lớn */
.kl-popup { max-width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; }
.kl-popup::backdrop { background: rgba(4, 33, 31, .86); }
.kl-popup__trong { position: relative; overflow: hidden; border-radius: 14px; background: var(--kl-lanh-0); line-height: 0; }
.kl-popup__trong img,
.kl-popup__trong video { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
.kl-popup__chu { margin: 0; padding: 11px 14px; background: var(--kl-lanh-1); font-size: 14px; line-height: 1.5; color: #cfe6d6; }
.kl-popup__dong {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--kl-lanh-0);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.kl-popup__dong:hover { background: #fff; }

/* ---------- SẢN PHẨM NỔI BẬT ---------- */
.kl-sp { padding: 40px 0 46px; }
.kl-sp__dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.kl-sp__h { margin: 0; font-size: clamp(23px, 3.1vw, 33px); font-weight: 900; letter-spacing: -.028em; }
.kl-sp__phu { margin: 7px 0 0; font-size: 15px; color: #666; }
.kl-sp__cta { display: flex; justify-content: center; margin: 22px auto 0; }
.kl-sp__nut {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 26px;
	border: 1.5px solid transparent;
	border-radius: 99px;
	background: var(--kl-xanh-chu);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 10px 24px -12px rgba(63, 125, 21, .95);
	transition: .24s cubic-bezier(.2, .7, .3, 1);
}
.kl-sp__nut:hover { background: var(--kl-xanh); color: #fff; transform: translateY(-2px); text-decoration: none; }
.kl-sp__nut i { font-style: normal; transition: transform .25s; }
.kl-sp__nut:hover i { transform: translateX(4px); }
.kl-sp__hang { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 6px; }
.kl-sp__ten { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.kl-sp__dem { margin: 4px 0 0; font-size: 12.5px; color: #666; font-variant-numeric: tabular-nums; }
.kl-sp__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 9px;
	color: var(--kl-xanh-chu);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: gap .2s;
}
.kl-sp__link:hover { gap: 9px; text-decoration: none; }
.kl-sp__khung { position: relative; overflow: hidden; padding: 9px 0; }
.kl-sp__khung--tinh { overflow-x: auto; scrollbar-width: none; }
.kl-sp__khung--tinh::-webkit-scrollbar { display: none; }
.kl-sp__ray {
	display: flex;
	gap: 14px;
	width: max-content;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform;
}
.kl-sp__khung--tinh .kl-sp__ray { cursor: default; }
.kl-sp__ray.dang-keo { cursor: grabbing; }
/* <a> và <img> mặc định kéo được: nhấn giữ rồi kéo là trình duyệt dựng ảnh ma và nuốt
   luôn chuỗi pointermove, dải đứng im sau vài pixel. */
.kl-sp__ray a,
.kl-sp__ray img { -webkit-user-drag: none; user-drag: none; }
.kl-sp__the {
	position: relative;
	flex: 0 0 auto;
	width: 190px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background: var(--kl-giay);
	color: inherit;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
}
.kl-sp__the:hover { z-index: 4; border-color: var(--kl-xanh-sang); transform: translateY(-6px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .42); text-decoration: none; }
.kl-sp__anh { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #f0f3f0; }
.kl-sp__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.kl-sp__the:hover .kl-sp__anh img { transform: scale(1.07); }
.kl-sp__the--trong .kl-sp__anh { display: grid; place-items: center; background: #f7f8f7; }
.kl-sp__the--trong .kl-sp__anh img { width: 58%; height: auto; object-fit: contain; opacity: .55; }
.kl-sp__the--trong:hover .kl-sp__anh img { transform: none; }
.kl-sp__than { display: block; padding: 11px 12px 13px; }
.kl-sp__tensp { display: block; height: 2.72em; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.36; color: var(--kl-muc); }
.kl-sp__gia {
	display: block;
	margin-top: 8px;
	font-size: 16.5px;
	font-weight: 900;
	letter-spacing: -.02em;
	text-align: right;
	color: var(--kl-xanh-chu);
	font-variant-numeric: tabular-nums;
}
.kl-sp__gia small { font-size: 12px; font-weight: 700; color: #9aa5a0; }

/* ---------- CHÍNH SÁCH GIAO HÀNG ---------- */
.kl-giao {
	position: relative;
	overflow: hidden;
	padding: 40px 0 38px;
	color: #fff;
	background: linear-gradient(135deg, #3f7d15 0%, #55a61d 52%, #2f6b0f 100%);
}
.kl-giao::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--kl-giao-nen);
	background-size: cover;
	background-position: center 60%;
	opacity: .16;
	mix-blend-mode: luminosity;
}
.kl-giao::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%);
}
.kl-giao .container { position: relative; z-index: 2; }
.kl-giao__h {
	margin: 0 auto 20px;
	font-size: clamp(25px, 3.4vw, 36px);
	font-weight: 900;
	letter-spacing: -.03em;
	text-align: center;
	color: #fff;
}
.kl-giao__hang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kl-giao__o {
	padding: 15px 16px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 13px;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(3px);
}
.kl-giao__so {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	margin-bottom: 9px;
	border-radius: 50%;
	background: #fff;
	color: var(--kl-xanh-chu);
	font-size: 13px;
	font-weight: 900;
}
.kl-giao__t { margin: 0; font-size: 15.5px; font-weight: 900; letter-spacing: -.015em; color: #fff; }
.kl-giao__d { margin: 6px 0 0; font-size: 13.8px; line-height: 1.55; color: #e9f6dd; font-variant-numeric: tabular-nums; }
.kl-giao__d b { font-weight: 800; color: #fff; }

/* ---------- KIẾN THỨC KHO LẠNH ---------- */
.kl-tin { padding: 38px 0 44px; }
.kl-tin__dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.kl-tin__h { margin: 0; font-size: clamp(23px, 3.1vw, 33px); font-weight: 900; letter-spacing: -.028em; }
.kl-tin__phu { margin: 7px 0 0; font-size: 15px; color: #666; }
.kl-tin__tat-ca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1.5px solid #e0e0e0;
	border-radius: 99px;
	background: var(--kl-giay);
	color: var(--kl-xanh-chu);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: .22s;
}
.kl-tin__tat-ca:hover { border-color: var(--kl-xanh); transform: translateY(-2px); text-decoration: none; }
.kl-tin__cta { display: flex; justify-content: center; margin: 22px 0 0; }
.kl-tin__luoi { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.kl-tin__meo { display: flex; flex-direction: column; }

.kl-lan { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; }
.kl-lan__cham { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #0d5c47; }
.kl-lan__cham--vang { background: var(--kl-vang); }
.kl-lan__t { font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #1c2b21; }
.kl-lan__ke { flex: 1; height: 1px; background: #e0e0e0; }

.kl-lon {
	display: block;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	background: var(--kl-giay);
	color: inherit;
	text-decoration: none;
	transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s, border-color .32s;
}
.kl-lon:hover { border-color: var(--kl-xanh-sang); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .42); text-decoration: none; }
.kl-lon__anh { position: relative; display: block; overflow: hidden; aspect-ratio: 21 / 9; background: #eef2ee; }
.kl-lon__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.kl-lon:hover .kl-lon__anh img { transform: scale(1.05); }
.kl-lon__nhan {
	position: absolute;
	top: 13px;
	left: 13px;
	padding: 5px 11px;
	border-radius: 99px;
	background: #0d5c47;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.kl-lon__than { display: block; padding: 17px 19px 19px; }
.kl-lon__t { display: block; font-size: clamp(18px, 2vw, 22px); font-weight: 900; letter-spacing: -.025em; line-height: 1.3; text-wrap: balance; }
.kl-lon__x { display: block; margin-top: 9px; font-size: 14.8px; line-height: 1.62; color: #666; }
.kl-lon__doc { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 13.5px; font-weight: 800; color: var(--kl-xanh-chu); }
.kl-lon__doc i { font-style: normal; transition: transform .25s; }
.kl-lon:hover .kl-lon__doc i { transform: translateX(4px); }

.kl-tin__phu-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 11px; }
.kl-nho {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	padding: 10px 12px 10px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background: var(--kl-giay);
	color: inherit;
	text-decoration: none;
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), border-color .26s, box-shadow .26s;
}
.kl-nho:hover { border-color: var(--kl-xanh-sang); transform: translateY(-3px); box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .5); text-decoration: none; }
.kl-nho__anh { display: block; width: 60px; height: 56px; overflow: hidden; border-radius: 9px; background: #eef2ee; }
.kl-nho__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.kl-nho:hover .kl-nho__anh img { transform: scale(1.08); }
.kl-nho__t { font-size: 14.4px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }

.kl-ct {
	display: flex;
	flex-direction: column;
	padding: 17px 17px 15px;
	border: 1px solid #efdcb4;
	border-radius: 14px;
	background: var(--kl-vang-nhat);
}
.kl-ct .kl-lan__t { color: #5f3c08; }
.kl-ct .kl-lan__ke { background: #e6cfa4; }
.kl-ct__ds { display: flex; flex: 1; flex-direction: column; gap: 9px; }
.kl-ct__o {
	display: grid;
	flex: 1 1 0;
	min-height: 64px;
	grid-template-columns: 24px 62px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 9px 12px 9px 9px;
	border: 1px solid #efe1c6;
	border-radius: 11px;
	background: var(--kl-giay);
	color: inherit;
	text-decoration: none;
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), border-color .26s, box-shadow .26s;
}
.kl-ct__o:hover { border-color: var(--kl-vang); transform: translateX(5px); box-shadow: 0 10px 22px -18px rgba(90, 56, 6, .6); text-decoration: none; }
.kl-ct__stt { font-size: 13.5px; font-weight: 900; text-align: center; color: #cbb68d; font-variant-numeric: tabular-nums; transition: color .26s; }
.kl-ct__o:hover .kl-ct__stt { color: var(--kl-vang); }
.kl-ct__anh { display: grid; place-items: center; width: 62px; height: 50px; overflow: hidden; border-radius: 8px; background: #f5e9d2; }
.kl-ct__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.kl-ct__o:hover .kl-ct__anh img { transform: scale(1.08); }
.kl-ct__t { display: block; font-size: 14.3px; font-weight: 700; line-height: 1.38; letter-spacing: -.01em; }
.kl-ct__x { display: block; margin-top: 3px; font-size: 12.6px; line-height: 1.42; color: #8b7a5c; }
.kl-ct__tat-ca {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e0cba1;
	color: var(--kl-vang);
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition: .2s;
}
.kl-ct__tat-ca:hover { color: #5f3c08; text-decoration: none; }

/* =========================================================================
   Màn hẹp
   ========================================================================= */
@media (max-width: 992px) {
	.kl-ve__luoi { grid-template-columns: 1fr; gap: 26px; }
	.kl-tin__luoi { grid-template-columns: 1fr; }
	.kl-tin__phu-hang { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.kl-gia__luoi { grid-template-columns: 1fr; gap: 20px; }
	.kl-giao__hang { grid-template-columns: 1fr; gap: 10px; }
	.kl-giao { padding: 32px 0 30px; }
}

@media (max-width: 760px) {
	.kl-sp__hang { grid-template-columns: 126px minmax(0, 1fr); gap: 11px; }
	.kl-sp__ten { font-size: 15px; }
	.kl-sp__the { width: 156px; }
}

@media (max-width: 700px) {
	/* Ảnh thu nhỏ bảng giá là thứ tốn chỗ nhất mà ở bề ngang này cũng không đọc nổi. */
	.kl-gia__anh { display: none; }
	.kl-gia__tn span { display: none; }
	.kl-gia__tn { padding: 8px 10px; }
	.kl-gia__h { font-size: clamp(21px, 5.4vw, 27px); }
	.kl-gia { padding: 26px 0 28px; }
	.kl-gia__so { gap: 0 14px; margin: 12px 0 0; padding: 11px 0 0; }
	.kl-gia__o b { font-size: 19px; }
	.kl-gia__cta { margin-top: 14px; }
	.kl-gia__nut { display: flex; justify-content: center; width: 100%; padding: 14px 20px; }

	/* Nhãn danh mục lên trên: để bên trái nó ăn 126px trong 390px, thẻ thứ hai luôn bị
	   cắt. minmax(0,1fr) chứ không phải 1fr — xem ghi chú đầu file. */
	.kl-sp__hang { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.kl-sp__nhan { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; width: auto; padding: 0; }
	.kl-sp__dem { margin-top: 0; }
	.kl-sp__link { margin: 0 0 0 auto; }
	.kl-sp__khung { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }

	.kl-anh__o { width: 168px; }
	.kl-anh__nut { display: none; }

	.kl-tin { padding: 32px 0 36px; }
	.kl-lon__anh { aspect-ratio: 2 / 1; }
	.kl-lon__than { padding: 15px 16px 16px; }
	.kl-lon__t { font-size: 20px; }
	.kl-nho { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
	.kl-nho__anh { width: 74px; height: 62px; }
	.kl-ct { padding: 14px 13px 12px; }
	.kl-ct__o { grid-template-columns: 20px 58px minmax(0, 1fr); gap: 10px; }
	.kl-ct__anh { width: 58px; height: 48px; }
	.kl-ct__x { display: none; }
}

@media (max-width: 430px) {
	.kl-gia__tinh-nang { gap: 7px; }
	.kl-gia__tn b { font-size: 12.8px; }
	.kl-gia__nut { padding: 12px 20px; font-size: 14.6px; }
}

@media (prefers-reduced-motion: reduce) {
	.kl-sp__ray,
	.kl-anh__dai { scroll-behavior: auto; }
}