/*
 * rieng.css - Toàn bộ thiết kế riêng của website Chả Chìa Hạ Lũng.
 *
 * Tệp này nạp SAU tệp cuối cùng của giao diện cha nên mọi quy tắc ở đây đều
 * thắng mà không cần dùng !important.
 *
 * Bảng màu khai báo trong functions.php qua bộ lọc aloxo_css_dong:
 *   --ccl-xanh        xanh rêu đậm, màu chủ đạo
 *   --ccl-vang        vàng đồng, màu điểm nhấn
 *   --ccl-kem         nền kem ấm
 *
 * Bố cục tệp:
 *   1. Nền tảng chung        6. Câu chuyện làng nghề
 *   2. Nút riêng             7. Sản phẩm
 *   3. Đầu trang             8. Quy trình
 *   4. Khối mở đầu           9. Cảm nhận
 *   5. Dải cam kết          10. Đặt hàng
 *                           11. Chân trang
 *                           12. Màn hình nhỏ
 */

/* =========================================================
   1. NỀN TẢNG CHUNG
   ========================================================= */

.ccl {
	background: #fff;
}

/* Nhãn nhỏ in hoa màu vàng đồng, đứng trên mỗi tiêu đề khối. */
.ccl-nhan {
	margin: 0 0 var(--kc-3);
	color: var(--ccl-vang);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ccl-tieu-de-khoi {
	margin: 0 0 var(--kc-3);
	color: var(--ccl-xanh);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
}

.ccl-tieu-de-khoi--sang {
	color: #fff;
}

/* Tiêu đề hai màu: dòng đầu xanh rêu, dòng sau vàng đồng. */
.ccl-tieu-de-khoi--hai-mau span {
	display: block;
}

.ccl-tieu-de-khoi__chinh {
	color: var(--ccl-xanh);
}

.ccl-tieu-de-khoi__phu {
	color: var(--ccl-vang);
}

/* Đầu khối căn giữa, dùng cho khối sản phẩm. */
.ccl-dau-khoi {
	margin-bottom: clamp(20px, 2.5vw, 32px);
	text-align: center;
}

.ccl-dau-khoi .ccl-tieu-de-khoi {
	margin-bottom: 0;
}

/* =========================================================
   2. NÚT RIÊNG
   ========================================================= */

.ccl-nut {
	padding: 13px 30px;
	border-radius: var(--bo-goc-nho);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ccl-nut--chinh {
	background: var(--ccl-xanh);
	border: 1px solid var(--ccl-xanh);
	color: #fff;
}

.ccl-nut--chinh:hover,
.ccl-nut--chinh:focus {
	background: var(--ccl-xanh-dam);
	border-color: var(--ccl-xanh-dam);
	color: #fff;
}

.ccl-nut--vien {
	background: transparent;
	border: 1px solid var(--ccl-xanh);
	color: var(--ccl-xanh);
}

.ccl-nut--vien:hover,
.ccl-nut--vien:focus {
	background: var(--ccl-xanh);
	color: #fff;
}

.ccl-nut--rong {
	width: 100%;
}

/* =========================================================
   3. ĐẦU TRANG
   ========================================================= */

.ccl .dau-trang {
	border-bottom: 1px solid rgba(var(--ccl-xanh-rgb), 0.1);
}

/*
 * Cụm nhận diện: hình tròn biểu trưng, rồi tới hai dòng chữ bên PHẢI.
 *
 * Bắt buộc phải ghi đè flex-direction. Giao diện cha đặt .nhan-dien là cột dọc
 * để xếp tên site trên mô tả site, nên nếu chỉ khai display:flex thì chữ vẫn
 * rơi xuống dưới logo chứ không nằm cạnh.
 */
.ccl .nhan-dien {
	display: flex;
	flex-direction: row;
	gap: var(--kc-3);
	align-items: center;
}

/*
 * Ảnh biểu trưng là hình ê-líp nằm gọn trong khung ảnh nên bo tròn 50% sẽ cắt
 * đúng viền, bỏ được bốn góc trắng thừa mà không cần tách nền.
 */
.ccl .custom-logo {
	width: auto;
	height: var(--cao-logo, 62px);
	border-radius: 50%;
}

.ccl-ten-thuong-hieu {
	display: block;
	color: var(--ccl-xanh);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
}

.ccl-ten-thuong-hieu span {
	display: block;
}

/* Đẩy menu sang sát cụm nút bên phải, đúng như thiết kế. */
.ccl .dau-trang__chinh .dieu-huong--chinh {
	margin-left: auto;
}

.ccl .menu--chinh > li > a {
	color: var(--ccl-xanh);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ccl .menu--chinh > li > a:hover,
.ccl .menu--chinh > li.current-menu-item > a,
.ccl .menu--chinh > li.current-menu-ancestor > a {
	color: var(--ccl-vang);
}

/* Gạch chân mục đang xem, đúng như thiết kế. */
.ccl .menu--chinh > li.current-menu-item > a::after,
.ccl .menu--chinh > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	right: var(--kc-3);
	bottom: 6px;
	left: var(--kc-3);
	height: 2px;
	background: var(--ccl-xanh);
}

.ccl .menu--chinh > li {
	position: relative;
}

/* Nút hotline bo tròn màu xanh ở góc phải đầu trang. */
.ccl .dau-trang__hotline-nho {
	background: var(--ccl-xanh);
	border-color: var(--ccl-xanh);
	border-radius: var(--bo-goc-tron);
	color: #fff;
	font-weight: 700;
}

.ccl .dau-trang__hotline-nho:hover,
.ccl .dau-trang__hotline-nho:focus {
	background: var(--ccl-xanh-dam);
	border-color: var(--ccl-xanh-dam);
	color: #fff;
}

/* =========================================================
   4. KHỐI MỞ ĐẦU
   ========================================================= */

/*
 * Nền trắng ở phần trên vì băng rôn của thiết kế đã tự nhoà sang trắng ở mép
 * trái. Nếu để nền kem như các khối khác thì mép nhoà đó hiện thành một vệt
 * trắng lệch màu. Phần đáy chuyển dần sang kem để đỡ dải cam kết nằm đè lên.
 */
.ccl-mo-dau {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #fff 62%, var(--ccl-kem) 100%);
	padding-top: clamp(20px, 2.5vw, 40px);
	padding-bottom: clamp(112px, 9vw, 148px);
}

.ccl-mo-dau__anh {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
}

.ccl-mo-dau__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Dải chuyển màu trắng nối tiếp mép nhoà có sẵn của băng rôn, đồng thời giữ cho
 * chữ bên trái vẫn đọc được nếu sau này quản trị viên thay bằng ảnh chụp thường
 * không có mép nhoà. Không dùng lớp phủ đen vì làm món ăn kém ngon mắt.
 */
.ccl-mo-dau__anh::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#fff 0%,
		rgba(255, 255, 255, 0.88) 18%,
		rgba(255, 255, 255, 0) 48%
	);
}

.ccl-mo-dau__trong {
	position: relative;
	z-index: 2;
}

.ccl-mo-dau__chu {
	max-width: 560px;
}

.ccl-mo-dau__tieu-de {
	margin: 0 0 var(--kc-4);
	font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.ccl-mo-dau__dong-1,
.ccl-mo-dau__dong-2 {
	display: block;
}

.ccl-mo-dau__dong-1 {
	color: var(--ccl-xanh);
}

.ccl-mo-dau__dong-2 {
	color: var(--ccl-vang);
}

.ccl-mo-dau__khau-hieu {
	margin: 0 0 var(--kc-4);
	color: var(--ccl-xanh-nhat);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
	font-style: italic;
	font-weight: 600;
	line-height: 1.45;
}

.ccl-mo-dau__mo-ta {
	margin: 0 0 var(--kc-5);
	max-width: 460px;
	color: var(--mau-chu-nhat);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.ccl-mo-dau__nut {
	margin: 0;
}

/* Tem tròn cam kết đặt trên ảnh. */
.ccl-tem {
	position: absolute;
	right: clamp(16px, 4vw, 64px);
	bottom: clamp(24px, 6vw, 90px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: clamp(92px, 11vw, 132px);
	height: clamp(92px, 11vw, 132px);
	padding: 10px;
	background: rgba(255, 255, 255, 0.94);
	border: 2px solid var(--ccl-xanh);
	border-radius: 50%;
	box-shadow: var(--bong-2);
	text-align: center;
}

.ccl-tem__tren,
.ccl-tem__duoi {
	color: var(--ccl-xanh);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.ccl-tem__giua {
	color: var(--ccl-vang);
	font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1;
}

/* =========================================================
   5. DẢI CAM KẾT
   ========================================================= */

.ccl-cam-ket {
	position: relative;
	z-index: 4;
	margin-top: -76px;
}

.ccl-cam-ket__luoi {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: clamp(16px, 2vw, 24px) var(--kc-2);
	background: #fff;
	border-radius: var(--bo-goc);
	box-shadow: var(--bong-3);
	list-style: none;
}

.ccl-cam-ket__muc {
	padding: 0 var(--kc-3);
	text-align: center;
}

/* Vạch ngăn giữa các mục, bỏ vạch ở mục đầu tiên. */
.ccl-cam-ket__muc + .ccl-cam-ket__muc {
	border-left: 1px solid var(--mau-vien);
}

.ccl-cam-ket__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--kc-2);
	background: rgba(var(--ccl-xanh-rgb), 0.07);
	border-radius: 50%;
	color: var(--ccl-xanh);
}

.ccl-cam-ket__tieu-de {
	margin: 0 0 4px;
	color: var(--ccl-xanh);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ccl-cam-ket__mo-ta {
	margin: 0;
	color: var(--mau-chu-nhat);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* =========================================================
   6. CÂU CHUYỆN LÀNG NGHỀ
   ========================================================= */

/*
 * Nền trắng ngà lấy đúng theo tệp thiết kế. Quan trọng: cả ảnh thành phố lẫn
 * bản vẽ đều mang sẵn nền màu này ở phần rìa, nên nền khối phải trùng thì mép
 * nhoè mới tan được vào nền.
 */
.ccl-cau-chuyen {
	padding: clamp(36px, 4.5vw, 64px) 0;
	background: #fdfbf8;
}

.ccl-cau-chuyen__trong {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3.5vw, 48px);
	align-items: center;
}

/* Ảnh do quản trị viên tự chọn: mép vuông nên bo góc lại cho gọn. */
.ccl-cau-chuyen__anh {
	overflow: hidden;
	border-radius: var(--bo-goc);
	box-shadow: var(--bong-2);
}

.ccl-cau-chuyen__anh img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 340px;
	object-fit: cover;
}

/*
 * Ảnh có sẵn viền nhoè kiểu nét cọ: bỏ hết khung, bo góc và bóng đổ đi, vì bản
 * thân mép nhoè đã là khung rồi. Chế độ hoà trộn nhân biến phần rìa gần trắng
 * thành trong suốt, nên viền cọ tan hẳn vào nền thay vì nằm trong một ô vuông.
 */
.ccl-cau-chuyen__anh--net-co {
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	mix-blend-mode: multiply;
}

.ccl-cau-chuyen__anh--net-co img {
	max-height: none;
	object-fit: contain;
}

/*
 * Bản vẽ bút sắt chợ Ga, đứng ở mép phải khối đúng như thiết kế. Chế độ hoà
 * trộn nhân xoá nền trắng của bản vẽ. Tắt bắt chuột để không cản việc bôi đen
 * chữ hay bấm nút nằm cạnh.
 */
/*
 * Mặc định ẩn. Bản vẽ chỉ có chỗ đứng tử tế khi màn hình đủ rộng, dưới mức đó
 * mà cố nhét vào là nó đè lên chữ.
 */
.ccl-net-ve {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: auto;
	mix-blend-mode: multiply;
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.ccl-cau-chuyen__chu {
	position: relative;
	z-index: 1;
}

/*
 * Từ 1100px trở lên mới bật bản vẽ, kèm chừa lề phải cho phần chữ.
 * Lề phải LUÔN lớn hơn bề ngang bản vẽ (17.5vw so với 16vw, 265px so với
 * 240px) để chữ và bản vẽ đứng cạnh nhau, không chồng lên nhau như thiết kế.
 */
@media (min-width: 1100px) {
	.ccl-net-ve {
		display: block;
		width: clamp(170px, 16vw, 240px);
	}

	.ccl-cau-chuyen__chu {
		padding-right: clamp(190px, 17.5vw, 265px);
	}
}

/*
 * Chỉ khi khung đã căn giữa và còn dư lề hai bên thì mới cho bản vẽ nhích ra
 * ngoài mép khung. Làm sớm hơn là sinh thanh cuộn ngang.
 */
@media (min-width: 1260px) {
	.ccl-net-ve {
		right: -18px;
	}
}

.ccl-cau-chuyen__noi-dung {
	color: var(--mau-chu-nhat);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.ccl-cau-chuyen__noi-dung p {
	margin-bottom: var(--kc-3);
}

.ccl-cau-chuyen__noi-dung p:last-child {
	margin-bottom: 0;
}

.ccl-cau-chuyen__nut {
	margin: var(--kc-4) 0 0;
}

/* =========================================================
   7. SẢN PHẨM
   ========================================================= */

.ccl-san-pham {
	padding: clamp(36px, 4.5vw, 64px) 0;
	background: var(--ccl-kem);
}

.ccl-san-pham__luoi {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
}

/* Một sản phẩm thì không kéo dài hết chiều ngang, nhìn sẽ loãng. */
.ccl-san-pham__luoi--1 {
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}

.ccl-san-pham__luoi--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ccl-the-sp {
	display: grid;
	grid-template-columns: 42% 1fr;
	overflow: hidden;
	background: #fff;
	border-radius: var(--bo-goc);
	box-shadow: var(--bong-1);
	transition: box-shadow var(--vua), transform var(--vua);
}

.ccl-the-sp:hover {
	box-shadow: var(--bong-3);
	transform: translateY(-3px);
}

/* Ba sản phẩm thì thẻ hẹp lại, chuyển sang xếp dọc cho dễ đọc. */
.ccl-san-pham__luoi--3 .ccl-the-sp {
	grid-template-columns: 1fr;
}

.ccl-the-sp__anh {
	background: var(--ccl-kem-dam);
}

.ccl-the-sp__anh img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 175px;
	object-fit: cover;
}

.ccl-the-sp__chu {
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 2vw, 22px);
}

.ccl-the-sp__ten {
	margin: 0 0 var(--kc-2);
	color: var(--ccl-xanh);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.ccl-the-sp__dac-diem {
	margin: 0 0 var(--kc-3);
	padding: 0;
	list-style: none;
}

.ccl-the-sp__dac-diem li {
	display: flex;
	gap: var(--kc-2);
	margin-bottom: 5px;
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.ccl-the-sp__cham {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ccl-vang);
}

.ccl-the-sp__gia {
	margin: auto 0 var(--kc-3);
	color: var(--ccl-vang);
	font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
	font-weight: 800;
	line-height: 1;
}

.ccl-the-sp__nut {
	margin: 0;
}

.ccl-the-sp__nut .ccl-nut {
	width: 100%;
	padding-inline: var(--kc-4);
}

.ccl-san-pham__xem-them {
	margin: clamp(20px, 2.5vw, 30px) 0 0;
	text-align: center;
}

/* =========================================================
   8. QUY TRÌNH
   ========================================================= */

.ccl-quy-trinh {
	padding: clamp(26px, 3.2vw, 44px) 0;
	background: #fff;
	border-top: 1px solid var(--mau-vien);
	border-bottom: 1px solid var(--mau-vien);
}

.ccl-quy-trinh__luoi {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccl-quy-trinh__muc {
	position: relative;
	padding: 0 var(--kc-4);
	text-align: center;
}

.ccl-quy-trinh__muc + .ccl-quy-trinh__muc {
	border-left: 1px solid var(--mau-vien);
}

.ccl-quy-trinh__icon {
	display: block;
	margin-bottom: var(--kc-2);
	color: var(--ccl-xanh);
}

.ccl-quy-trinh__tieu-de {
	margin: 0 0 4px;
	color: var(--ccl-xanh);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.35;
}

.ccl-quy-trinh__mo-ta {
	margin: 0;
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* =========================================================
   9. CẢM NHẬN KHÁCH HÀNG
   ========================================================= */

.ccl-cam-nhan {
	padding: clamp(36px, 4.5vw, 60px) 0;
	background: var(--ccl-kem);
}

.ccl-cam-nhan__tieu-de {
	margin: 0 0 clamp(18px, 2.5vw, 30px);
	color: var(--ccl-xanh);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

.ccl-cam-nhan__luoi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.2vw, 28px);
}

.ccl-the-cam-nhan {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(16px, 2vw, 22px);
	background: #fff;
	border-radius: var(--bo-goc);
	box-shadow: var(--bong-1);
}

.ccl-the-cam-nhan__sao {
	display: flex;
	gap: 3px;
	margin-bottom: var(--kc-3);
}

.ccl-sao {
	color: var(--mau-vien);
}

.ccl-sao--sang {
	color: #f0a020;
}

.ccl-the-cam-nhan__noi-dung {
	flex: 1 1 auto;
	margin: 0 0 var(--kc-3);
	padding: 0;
	border: 0;
	color: var(--mau-chu);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
}

.ccl-the-cam-nhan__khach {
	display: flex;
	gap: var(--kc-3);
	align-items: center;
	padding-top: var(--kc-3);
	border-top: 1px solid var(--mau-vien);
}

.ccl-the-cam-nhan__chu-cai {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--ccl-xanh);
	border-radius: 50%;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
}

.ccl-the-cam-nhan__khach strong {
	display: block;
	color: var(--ccl-xanh);
	font-size: 0.9375rem;
}

.ccl-the-cam-nhan__khach small {
	color: var(--ccl-vang);
	font-size: 0.8125rem;
}

/* Dãy chấm chỉ vị trí dưới khối cảm nhận. */
.ccl-cam-nhan__cham {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: clamp(20px, 3vw, 32px);
}

.ccl-cham {
	width: 8px;
	height: 8px;
	background: rgba(var(--ccl-xanh-rgb), 0.22);
	border-radius: 50%;
}

.ccl-cham--sang {
	background: var(--ccl-xanh);
}

/* =========================================================
   10. ĐẶT HÀNG
   ========================================================= */

.ccl-dat-hang {
	padding: clamp(48px, 7vw, 88px) 0;
	background: linear-gradient(135deg, var(--ccl-xanh) 0%, var(--ccl-xanh-dam) 100%);
	color: #fff;
	/* Bù chiều cao đầu trang khi cuộn tới bằng liên kết #dat-hang. */
	scroll-margin-top: 90px;
}

.ccl-dat-hang__trong {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.ccl-dat-hang__mo-ta {
	margin: 0 0 var(--kc-5);
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.ccl-dat-hang__lien-he {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccl-dat-hang__lien-he li {
	display: flex;
	gap: var(--kc-3);
	align-items: flex-start;
	margin-bottom: var(--kc-4);
}

.ccl-dat-hang__lien-he .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ccl-vang-nhat);
}

.ccl-dat-hang__lien-he small {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ccl-dat-hang__lien-he a,
.ccl-dat-hang__lien-he strong {
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
}

.ccl-dat-hang__lien-he a:hover {
	color: var(--ccl-vang-nhat);
}

/* Khung biểu mẫu nền trắng nổi trên nền xanh. */
.ccl-dat-hang__khung-form {
	padding: clamp(20px, 3vw, 34px);
	background: #fff;
	border-radius: var(--bo-goc);
	box-shadow: var(--bong-3);
	color: var(--mau-chu);
}

.ccl-form__hang {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kc-4);
}

.ccl-form__o {
	margin: 0 0 var(--kc-4);
}

.ccl-form__o--hep {
	max-width: 130px;
}

.ccl-form__o label {
	display: block;
	margin-bottom: 6px;
	color: var(--ccl-xanh);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ccl-form__o input,
.ccl-form__o textarea,
.ccl-form__o select {
	width: 100%;
	border-radius: var(--bo-goc-nho);
}

.ccl-form__o input:focus,
.ccl-form__o textarea:focus,
.ccl-form__o select:focus {
	border-color: var(--ccl-xanh);
	outline-color: var(--ccl-xanh);
}

.ccl-form__bat-buoc {
	color: var(--mau-loi);
}

.ccl-form__tuy-chon {
	color: var(--mau-chu-nhat);
	font-weight: 400;
}

/*
 * Bẫy máy gửi tự động: đẩy hẳn ra ngoài màn hình thay vì display:none.
 * Một số máy gửi tự động biết bỏ qua ô bị ẩn bằng display, nhưng vẫn điền
 * vào ô chỉ bị đẩy ra ngoài khung nhìn.
 */
.ccl-form__bay {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ccl-form__gui {
	margin: var(--kc-2) 0 var(--kc-3);
}

.ccl-form__ghi-chu-cuoi {
	margin: 0;
	color: var(--mau-chu-nhat);
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: center;
}

/* Thông báo kết quả gửi đơn. */
.ccl-thong-bao {
	display: flex;
	gap: var(--kc-3);
	align-items: flex-start;
	margin-bottom: var(--kc-4);
	padding: var(--kc-4);
	border-radius: var(--bo-goc-nho);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ccl-thong-bao p,
.ccl-thong-bao ul {
	margin: 0;
}

.ccl-thong-bao ul {
	padding-left: 18px;
}

.ccl-thong-bao--ok {
	background: rgba(15, 138, 95, 0.1);
	border: 1px solid rgba(15, 138, 95, 0.35);
	color: #0b6f4c;
}

.ccl-thong-bao--ok .icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.ccl-thong-bao--loi {
	background: rgba(214, 54, 56, 0.08);
	border: 1px solid rgba(214, 54, 56, 0.3);
	color: #a4262c;
}

/* =========================================================
   11. CHÂN TRANG
   ========================================================= */

.ccl .chan-trang {
	background: var(--ccl-xanh-dam);
	color: rgba(255, 255, 255, 0.75);
}

.ccl .chan-trang a {
	color: rgba(255, 255, 255, 0.8);
}

.ccl .chan-trang a:hover,
.ccl .chan-trang a:focus {
	color: var(--ccl-vang-nhat);
}

.ccl .chan-trang .widget-tieu-de,
.ccl .chan-trang h2,
.ccl .chan-trang h3 {
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ccl .chan-trang__duoi {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Biểu trưng trong cột đầu của chân trang. */
.ccl-logo-chan-trang {
	display: flex;
	gap: var(--kc-3);
	align-items: center;
	margin-bottom: var(--kc-3);
}

.ccl-logo-chan-trang img {
	width: auto;
	height: 52px;
	border-radius: 50%;
}

.ccl-logo-chan-trang strong {
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.12;
	text-transform: uppercase;
}

.ccl-logo-chan-trang strong span {
	display: block;
}

/* Nút liên hệ nổi ăn theo màu thương hiệu. */
.ccl .nut-noi--goi {
	background: var(--ccl-xanh);
}

/* =========================================================
   12. MÀN HÌNH NHỎ
   ========================================================= */

/*
 * CÁC ĐIỂM NGẮT XẾP THEO THỨ TỰ GIẢM DẦN: 1024 > 900 > 640 > 600 > 560 > 480 > 380.
 *
 * Thứ tự này bắt buộc. Các câu lệnh dưới đây cùng độ ưu tiên, nên khi hai điểm
 * ngắt cùng thoả thì cái viết sau thắng. Xếp sai thứ tự là điểm ngắt hẹp hơn
 * bị điểm ngắt rộng hơn đè mất, rất khó tìm ra khi đi sửa.
 */

/* Máy tính bảng nằm ngang và màn hình hẹp. */
@media (max-width: 1024px) {
	.ccl-cam-ket__luoi {
		grid-template-columns: repeat(3, 1fr);
		row-gap: var(--kc-5);
	}

	/* Xếp lại ba cột nên vạch ngăn theo thứ tự cũ sẽ sai chỗ. */
	.ccl-cam-ket__muc + .ccl-cam-ket__muc {
		border-left: 0;
	}

	.ccl-quy-trinh__luoi {
		grid-template-columns: repeat(3, 1fr);
		row-gap: var(--kc-5);
	}

	.ccl-quy-trinh__muc + .ccl-quy-trinh__muc {
		border-left: 0;
	}

	.ccl-san-pham__luoi--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Điểm gãy chính: ảnh khối mở đầu chuyển lên trên, các lưới còn một cột.
 * Đây cũng là mức mà giao diện cha đổi menu sang ngăn kéo.
 */
@media (max-width: 900px) {
	/*
	 * Giao diện cha ẩn luôn nút hotline khi chuyển sang menu ngăn kéo. Với
	 * website bán đặc sản thì đó là mất chỗ chốt đơn quan trọng nhất - khách
	 * trên điện thoại chỉ cần chạm một cái là gọi được. Bật lại và thu gọn.
	 */
	.ccl .dau-trang__hotline-nho {
		display: inline-flex;
		padding: 9px 16px;
		font-size: 0.875rem;
	}

	/* Menu đã thành ngăn kéo nên bỏ lệnh đẩy sang phải, tránh khoảng trống thừa. */
	.ccl .dau-trang__chinh .dieu-huong--chinh {
		margin-left: 0;
	}

	.ccl-mo-dau {
		padding-top: 0;
		padding-bottom: clamp(40px, 8vw, 64px);
	}

	/*
	 * Giữ position: relative chứ không chuyển sang static. Nếu chuyển sang static,
	 * tem tròn bên trong sẽ neo theo cả khối mở đầu và tuột xuống nằm cạnh nút
	 * kêu gọi hành động - trên máy hẹp còn đè lên nút.
	 */
	.ccl-mo-dau__anh {
		position: relative;
		width: 100%;
		height: clamp(220px, 42vw, 340px);
		margin-bottom: var(--kc-5);
	}

	/* Bỏ dải chuyển màu vì ảnh không còn nằm sau chữ nữa. */
	.ccl-mo-dau__anh::after {
		display: none;
	}

	.ccl-mo-dau__chu {
		max-width: none;
	}

	.ccl-tem {
		right: var(--kc-4);
		bottom: var(--kc-4);
	}

	/* Ảnh câu chuyện xuống dưới phần chữ để người đọc gặp tiêu đề trước. */

	/*
	 * Dải cam kết thôi đè lên khối mở đầu. Nền lấy đúng màu kem mà đáy khối mở
	 * đầu đang chuyển tới, nếu để màu kem đậm sẽ lộ một vệt ngăn giữa hai khối.
	 */
	.ccl-cam-ket {
		margin-top: 0;
		padding-top: clamp(24px, 4vw, 36px);
		padding-bottom: clamp(24px, 4vw, 36px);
		background: var(--ccl-kem);
	}

	.ccl-cau-chuyen__trong,
	.ccl-dat-hang__trong,
	.ccl-san-pham__luoi,
	.ccl-san-pham__luoi--3,
	.ccl-cam-nhan__luoi {
		grid-template-columns: 1fr;
	}

	/* Ảnh câu chuyện xuống dưới phần chữ để người đọc gặp tiêu đề trước. */
	.ccl-cau-chuyen__anh {
		order: 2;
	}
}

/* Điện thoại. */
@media (max-width: 640px) {
	.ccl-cam-ket__luoi,
	.ccl-quy-trinh__luoi {
		grid-template-columns: repeat(2, 1fr);
	}

	.ccl-cam-ket__muc,
	.ccl-quy-trinh__muc {
		padding-inline: var(--kc-2);
	}

	.ccl-cam-ket__icon {
		width: 44px;
		height: 44px;
	}

	.ccl-form__hang {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ccl-form__o--hep {
		max-width: none;
	}

	.ccl-dat-hang__khung-form {
		padding: var(--kc-4);
	}
}

/*
 * Điện thoại: thu gọn đầu trang. Biểu trưng 62px làm đầu trang cao gần 90px,
 * chiếm mất một phần bảy màn hình mà lại luôn ghim khi cuộn.
 */
@media (max-width: 600px) {
	.ccl {
		--cao-logo: 46px;
	}

	.ccl .dau-trang__trong {
		gap: var(--kc-3);
		min-height: 62px;
	}

	.ccl .dau-trang__hotline-nho {
		padding: 8px 13px;
		font-size: 0.8125rem;
	}

	.ccl-dat-hang {
		scroll-margin-top: 72px;
	}
}

/* Máy hẹp: thẻ sản phẩm xếp dọc cho ảnh đủ lớn. */
@media (max-width: 560px) {
	.ccl-the-sp {
		grid-template-columns: 1fr;
	}

	.ccl-the-sp__anh img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.ccl-mo-dau__tieu-de {
		font-size: clamp(2.1rem, 1.2rem + 5vw, 3rem);
	}
}

/* Bỏ chữ cạnh biểu trưng, chừa chỗ cho nút gọi ở đầu trang. */
@media (max-width: 480px) {
	.ccl-ten-thuong-hieu {
		display: none;
	}
}

/*
 * Máy rất hẹp. Đến đây mới xếp dải cam kết và quy trình thành một cột.
 *
 * Cố tình giữ hai cột càng lâu càng tốt: mỗi dải có năm mục, xếp một cột là
 * thành năm màn cuộn liền nhau, khách lướt qua mất chứ không đọc.
 */
@media (max-width: 380px) {
	.ccl-cam-ket__luoi,
	.ccl-quy-trinh__luoi {
		grid-template-columns: 1fr;
		row-gap: var(--kc-4);
	}

	/* Bỏ biểu tượng trong nút hotline, giữ lại con số cho dễ bấm. */
	.ccl .dau-trang__hotline-nho .icon {
		display: none;
	}
}