/* ==========================================================================
   dlb-cart-checkout.css — CSS RIÊNG cho trang Giỏ hàng (/gio-hang/) và Thanh
   toán (/thanh-toan-2/), thêm 2026-08-30 đối chiếu demo-ui theo yêu cầu người
   dùng. CHỈ enqueue khi is_cart() || is_checkout() (xem functions.php).

   Dùng LẠI đúng block LÕI WooCommerce (Cart/Checkout, Store API) — không viết
   lại logic giỏ hàng/thanh toán, chỉ CSS. Cùng bảng màu với dlb-single-product.css.
   ========================================================================== */

:root {
	--dlb-cc-green: #006d4c;
	--dlb-cc-green-dark: #00563c;
	--dlb-cc-amber: #fcb900;
	--dlb-cc-ink: #111111;
	--dlb-cc-muted: #6b7280;
	--dlb-cc-line: #e5e7eb;
}

/* ---------- khung sidebar (Tổng cộng giỏ hàng / Tóm tắt đơn hàng) ---------- */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: #ffffff;
	border: 1px solid var(--dlb-cc-line);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .06);
}
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	font-size: 18px;
	font-weight: 800;
	color: var(--dlb-cc-ink);
}

/* ---------- nút CTA chính (Tiến hành thanh toán / Đặt hàng) ---------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--dlb-cc-amber) !important;
	color: var(--dlb-cc-ink) !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	transition: background .15s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: #e0a400 !important;
}
/* Nút "Đặt hàng" ở Thanh toán nhỏ hơn hẳn nút "Tiến hành thanh toán" ở Giỏ hàng —
   thêm 2026-09-04 theo người dùng gửi ảnh mobile thật + link tham chiếu "Nút đặt
   hàng to lên như nút thanh toán trong link .../gio-hang/". Đo trực tiếp cả 2 nút
   xác nhận KHÔNG phải do CSS của site (rule chung ở trên chỉ đặt màu/bo góc, chưa
   từng đặt font-size/đệm) — WooCommerce Blocks tự áp 2 mức cỡ MẶC ĐỊNH khác nhau
   cho 2 nút này (Giỏ hàng: 20px/12px 24px/cao 56px; Thanh toán: chỉ 13px/7.8px
   15.6px/cao 34px) dù cùng chung 1 rule màu sắc — không rõ lý do nội bộ của
   WooCommerce, không phải lỗi ở site này. Đặt riêng rule cho đúng nút Thanh toán
   (không đụng nút Giỏ hàng, vốn đã đúng ý) để khớp cùng 1 cỡ. Áp dụng CẢ desktop
   lẫn di động (đo thấy lệch cỡ ở CẢ 2, không phải riêng di động). */
.wc-block-components-checkout-place-order-button {
	font-size: 20px !important;
	padding: 12px 24px !important;
	line-height: 32px !important;
}

/* ---------- bộ chọn số lượng ---------- */
.wc-block-components-quantity-selector {
	border: 1px solid var(--dlb-cc-line);
	border-radius: 8px;
	overflow: hidden;
}
.wc-block-components-quantity-selector__button {
	color: var(--dlb-cc-ink);
}
.wc-block-components-quantity-selector__button:hover {
	background: #f7faf9;
	color: var(--dlb-cc-green);
}

/* ---------- ô nhập liệu (địa chỉ giao hàng, v.v.) ---------- */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
	border-radius: 8px !important;
	border-color: var(--dlb-cc-line) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
	border-color: var(--dlb-cc-green) !important;
	box-shadow: 0 0 0 3px rgba(0, 109, 76, .12) !important;
}

/* ---------- phương thức thanh toán (radio) ---------- */
.wc-block-components-radio-control-accordion-option {
	border-radius: 8px !important;
	border-color: var(--dlb-cc-line) !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option-checked {
	border-color: var(--dlb-cc-green) !important;
	box-shadow: 0 0 0 1px var(--dlb-cc-green) !important;
}
.wc-block-components-radio-control__input:checked {
	background-color: var(--dlb-cc-green) !important;
	border-color: var(--dlb-cc-green) !important;
}

/* ---------- giá / số tiền nhấn mạnh ---------- */
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
	color: var(--dlb-cc-ink);
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--dlb-cc-green);
	font-weight: 800;
	font-size: 20px;
}

/* ---------- link sản phẩm trong giỏ + mục "Mới trong cửa hàng" — khớp đúng màu
   đã dùng cho sản phẩm liên quan ở trang chi tiết sản phẩm (dlb-single-product.css).
   ĐỔI 2026-09-03 theo yêu cầu "trong giỏ hàng mobile chưa sửa màu chữ" (nối tiếp vòng 63
   đổi màu khối Tóm tắt đơn hàng khớp khay giỏ hàng trượt ngang -- lúc đó CHỈ sửa
   ".wc-block-components-order-summary-item" của khối tóm tắt, CHƯA đụng tới bảng giỏ
   hàng chính này) -- tên sản phẩm đổi đen -> xanh lá, khớp đúng ".dlb-main-menu__drawer-
   item-name". Hover đổi sang xanh đậm hơn (--dlb-cc-green-dark) để còn phân biệt được
   với màu nền (trước đây hover xanh nhạt còn phân biệt được với nền đen, giờ nền đã xanh
   nhạt nên cần đậm hơn mới thấy khác biệt lúc hover). ---------- */
.wc-block-cart-items__row a,
.wc-block-components-order-summary-item__description a {
	color: var(--dlb-cc-green) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.wc-block-cart-items__row a:hover {
	color: var(--dlb-cc-green-dark) !important;
}

/* ---------- ảnh sản phẩm trong giỏ hàng — bo góc + viền nhẹ, khớp phong cách ảnh
   sản phẩm dùng xuyên suốt site (dlb-item-grid-di90, dlb-single-product) ---------- */
.wc-block-cart-item__image img {
	border-radius: 10px;
	border: 1px solid var(--dlb-cc-line);
}
/* Giá dòng hàng trong giỏ -- ĐỔI 2026-09-03 (cùng đợt sửa ở trên): xanh lá -> vàng cam
   (--dlb-cc-amber), khớp đúng màu giá trong khay giỏ hàng trượt ngang
   (".dlb-main-menu__drawer-item-total", rgb(252,185,0)) thay vì xanh lá đặt từ 2026-09-02.
   Tên sản phẩm giờ đã xanh (rule phía trên) nên đổi giá sang vàng mới tạo đúng cặp 2 màu
   xen kẽ như khay, không bị trùng 1 màu xanh cho cả tên lẫn giá. */
.wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
	color: var(--dlb-cc-amber);
	font-weight: 700;
}
/* Lỗi cùng dạng đã gặp ở vòng 63 (Tóm tắt đơn hàng): nhãn "Tiết kiệm" dùng CHUNG class
   ".wc-block-formatted-money-amount" với số tiền thường nên bị ăn theo màu vàng cam ở
   rule trên qua khớp class trực tiếp (không phải kế thừa lần này) -- rule dưới đây có 3
   lớp class trong selector (nhiều hơn rule trên 2 lớp) nên tự thắng theo độ đặc hiệu
   CSS, không cần "!important". Giữ đúng xanh lá, khớp "Tiết kiệm" trong khay. */
.wc-block-cart-item__total .wc-block-components-sale-badge .wc-block-components-formatted-money-amount,
.wc-block-cart-item__prices .wc-block-components-sale-badge .wc-block-components-formatted-money-amount {
	color: var(--dlb-cc-green);
}
/* Giá dòng hàng trong khối "Tóm tắt đơn hàng" (sidebar giỏ hàng lẫn thanh toán) — thêm
   2026-09-02 theo yêu cầu người dùng "tất cả chữ màu xanh đặc trưng": trước đó CHỈ dòng
   giá bên trong ".wc-block-cart-item" (bảng giỏ hàng chính) được tô xanh, còn giá lặp lại
   ở khối tóm tắt (class riêng ".wc-block-components-order-summary-item__total-price",
   KHÔNG dùng chung selector với bảng chính) vẫn đen mặc định — thêm riêng cho khớp.
   ĐỔI LẠI 2026-09-03 theo yêu cầu "màu chữ giống trong ds hàng giỏ hàng trượt ngang" —
   khay giỏ hàng trượt ngang (dlb-main-menu-rz84) dùng đúng 2 màu xen kẽ: TÊN sản phẩm
   xanh lá, GIÁ vàng cam (đo trực tiếp trên khay thật: nameColor rgb(0,109,76), giá/tổng
   rgb(252,185,0) — trùng khớp biến --dlb-cc-amber đã có sẵn trong file này). Đổi giá ở
   đây từ xanh -> vàng cam để khớp đúng khay; TÊN sản phẩm (h3.wc-block-components-
   product-name, xem rule ngay dưới) đổi sang xanh để khớp. Cần "!important" vì
   ".wc-block-components-product-price__value" (span con thật sự hiển thị) có sẵn màu
   riêng từ CSS lõi WooCommerce, đè mất màu đặt trên khối cha nếu không ép. */
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
	color: var(--dlb-cc-amber) !important;
	font-weight: 700;
}
/* Giá đơn vị nhỏ cạnh tên sản phẩm (giá đã giảm) trong Tóm tắt đơn hàng -- cùng màu vàng
   cam, đồng bộ với giá tổng dòng hàng phía trên. Giá gốc gạch ngang giữ màu mặc định
   (không tô màu chữ đã gạch bỏ, tránh gây chú ý nhầm vào số không còn hiệu lực). */
.wc-block-components-order-summary-item__individual-price {
	color: var(--dlb-cc-amber) !important;
}
/* Lỗi thật gặp khi làm rule trên: đặt màu TRỰC TIẾP lên khối cha ".__total-price" (thay vì
   chỉ lên span giá con) từng làm nhãn "Tiết kiệm" (".wc-block-components-sale-badge", nằm
   LỒNG BÊN TRONG khối cha đó) bị ăn theo màu vàng cam qua kế thừa CSS (dù ko khớp selector
   nào của rule đó) -- ĐÃ sửa bằng cách bỏ hẳn màu khỏi khối cha, chỉ còn đặt lên đúng span
   giá; rule dưới đây giữ nhãn "Tiết kiệm" đúng màu xanh lá gốc (khớp "savings" của khay
   giỏ hàng trượt ngang, ".dlb-main-menu__drawer-item-savings", cùng #006d4c) cho chắc chắn
   dù kế thừa có đổi gì ở trên nữa. */
.wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge {
	color: var(--dlb-cc-green) !important;
}
/* Tên sản phẩm trong Tóm tắt đơn hàng -- xanh lá thương hiệu, khớp đúng màu tên sản phẩm
   trong khay giỏ hàng trượt ngang (".dlb-main-menu__drawer-item-name", #006d4c). Khoanh
   vùng trong ".__description" để KHÔNG đụng tên sản phẩm ở bảng giỏ hàng chính (dòng
   106-111 phía trên đã có màu riêng từ trước, không phải phần người dùng yêu cầu đổi). */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--dlb-cc-green);
}

/* ---------- "bước" thanh toán (Thông tin liên lạc / Địa chỉ thanh toán / Tuỳ chọn thanh
   toán / Tóm tắt đơn hàng...) — thêm 2026-09-02 theo yêu cầu người dùng "giỏ hàng chưa
   đẹp, thiết kế lại thanh toán cho đẹp hơn". Trước đó mọi mục chỉ là chữ trôi nổi liên
   tục, không tách bạch — bọc mỗi bước thành 1 "thẻ" riêng (nền trắng, viền, bo góc,
   khoảng cách rõ ràng) + vạch màu xanh lá bên trái tiêu đề, tạo cảm giác từng bước rành
   mạch thay vì 1 bức tường chữ. ".wc-block-components-checkout-step__title" dùng CHUNG
   cho mọi bước LẪN tiêu đề "Tóm tắt đơn hàng" (kể cả bản thu gọn trên mobile) nên chỉ
   cần 1 chỗ sửa là đồng bộ khắp trang. LƯU Ý: CSS gốc của WooCommerce tự đặt selector
   đặc hiệu hơn (".wc-block-components-form .wc-block-components-checkout-step", 2 lớp)
   nên thắng selector 1 lớp thường — bắt buộc "!important", cùng cách các rule khác
   trong file này đã dùng để đè CSS gốc WooCommerce. */
.wc-block-components-checkout-step {
	background: #ffffff !important;
	border: 1px solid var(--dlb-cc-line) !important;
	border-radius: 12px !important;
	padding: 20px !important;
	margin-bottom: 16px !important;
}
.wc-block-components-checkout-step__title {
	position: relative;
	padding-left: 14px;
	font-size: 17px;
	font-weight: 800;
	color: var(--dlb-cc-ink);
}
.wc-block-components-checkout-step__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 2px;
	background: var(--dlb-cc-green);
}
/* Khối "Tóm tắt đơn hàng" bản THU GỌN dạng accordion — CHỈ xuất hiện trên mobile, đứng
   MỘT MÌNH ở đầu trang (không nằm trong sidebar như bản desktop) nên cần tự có khung thẻ
   riêng — cùng tinh thần thẻ bên trên. Trên DESKTOP nó đã nằm SẴN trong
   ".wc-block-checkout__sidebar" (đã có khung thẻ riêng từ trước, xem đầu file) — KHÔNG
   thêm khung ở đây nữa để tránh hộp lồng hộp. Chữ tổng tiền hiện sẵn ngay cạnh tiêu đề
   lúc thu gọn tô xanh lá đậm cho dễ thấy dù chưa mở ra xem chi tiết. */
@media (max-width: 782px) {
	.wp-block-woocommerce-checkout-order-summary-block {
		background: #ffffff !important;
		border: 1px solid var(--dlb-cc-line) !important;
		border-radius: 12px !important;
		padding: 4px 20px !important;
		margin-bottom: 16px !important;
	}
}
/* Ẩn bản "Tóm tắt đơn hàng" ĐẦY ĐỦ thứ 2 (danh sách sản phẩm + mã giảm giá + tạm tính)
   mà WooCommerce Blocks tự "portal" thêm vào giữa luồng form trên mobile (ngay trước nút
   "Đặt hàng") -- thêm 2026-09-03 theo người dùng "Bỏ phần ds giỏ hàng, mã giảm giá, tổng
   tính ở trên đi bị dư ra". Đây là bản THỨ 2, TRÙNG hoàn toàn nội dung với khối accordion
   thu gọn ở đầu trang (chỉ khác là khối này LUÔN hiện đầy đủ, không thu gọn được) -- xác
   nhận qua DOM: class ".checkout-order-summary-block-fill-wrapper" CHỈ tồn tại trên mobile
   (kiểm tra desktop: element này không hề render, "wc-block-checkout__sidebar" là bản DUY
   NHẤT) nên ẩn ở đây an toàn, không ảnh hưởng gì tới desktop. Accordion ở đầu trang vẫn
   đủ chức năng xem chi tiết giỏ hàng khi bấm mở ra, không mất thông tin gì. */
.checkout-order-summary-block-fill-wrapper {
	display: none !important;
}
.wc-block-components-checkout-step__heading .wc-block-components-formatted-money-amount {
	color: var(--dlb-cc-green);
	font-weight: 800;
}
.wc-block-grid__product-title,
li.product h3 a,
li.product .wp-block-post-title a {
	color: var(--dlb-cc-ink) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
li.product .wp-block-button__link,
li.product a.button {
	background: var(--dlb-cc-green) !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
}
li.product .wp-block-button__link:hover,
li.product a.button:hover {
	background: var(--dlb-cc-green-dark) !important;
}
li.product {
	border: 1px solid var(--dlb-cc-line);
	border-radius: 12px;
	padding: 14px !important;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
li.product:hover {
	box-shadow: 0 10px 30px rgba(17, 17, 17, .10);
	border-color: #d8dedb;
	transform: translateY(-4px);
}
li.product img {
	border-radius: 8px;
}

/* ---------- khoảng cách chung trang ---------- */
.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group {
	padding-top: 8px;
	padding-bottom: 40px;
}

/* LỖI THẬT phát hiện 2026-09-02 (người dùng gửi ảnh: tiêu đề "Giỏ hàng" + toàn bộ nội
   dung giỏ hàng/thanh toán chạm sát mép trái/phải màn hình trên mobile) — CÙNG BÀI HỌC
   đã gặp ở bài viết/trang thường (".entry-content.alignfull", xem dlb-single-post.css)
   và hero đầu bài (dlb-single-hero-fx28.css): "alignwide"/"alignfull" + layout
   "constrained" khiến "margin:auto" tự về 0 khi viewport hẹp hơn max-width, không có
   đệm ngang nào tự sinh ra. Trang Giỏ hàng/Thanh toán dùng "alignwide" (khác "alignfull"
   ở 2 trường hợp trước nhưng CÙNG CƠ CHẾ lỗi) cho cả tiêu đề (h1.alignwide) lẫn nội dung
   (.entry-content.alignwide) — thêm đệm ngang cho mobile, giữ nguyên desktop. */
@media (max-width: 782px) {
	.woocommerce-cart .entry-content.alignwide,
	.woocommerce-checkout .entry-content.alignwide,
	.woocommerce-cart h1.alignwide,
	.woocommerce-checkout h1.alignwide {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	/* LỖI THẬT phát hiện 2026-09-02 (người dùng báo qua ảnh: cột giá "223.000 đ" bị cắt
	   sát mép phải màn hình dù đã thêm đệm ở trên) — đo bounding-box mới lộ ra: chính cái
	   BẢNG ".wc-block-cart-items" tự rộng 386px trong khi khung cha chỉ có 350px (390px
	   màn hình - 20px đệm mỗi bên) — bảng KHÔNG dùng "table-layout:fixed" nên tự co giãn
	   theo nội dung (giá + tên sản phẩm không xuống dòng được), rộng hơn cả khung cha,
	   TRÀN qua đúng phần đệm phải vừa thêm. Ép "table-layout:fixed; width:100%" — bảng
	   luôn đúng bằng khung cha, buộc nội dung bên trong (tên sản phẩm dài) tự xuống dòng
	   thay vì đẩy cả bảng rộng ra. */
	.wc-block-cart-items {
		table-layout: fixed;
		width: 100%;
	}
	/* "table-layout:fixed" ở trên chỉ ép đúng KHUNG bảng/ô, KHÔNG ép được chữ giá bên
	   trong tự xuống dòng — chữ giá vốn có sẵn "white-space:nowrap" (mặc định của
	   WooCommerce, để "223.000 đ" không tự vỡ dòng giữa số và "đ" trên màn RỘNG) nên vẫn
	   TRÀN RA NGOÀI ô của nó (ô co hẹp lại theo layout fixed nhưng chữ bên trong không co
	   theo — "overflow:visible" mặc định của ô để lộ hẳn phần tràn, đo được lồi ra ngoài
	   khung bảng ~34px). Cho phép xuống dòng lại trên mobile — cùng cách đã dùng cho dải
	   giá trang chi tiết sản phẩm (dlb-single-product.css) khi hẹp chỗ tương tự. */
	.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
		white-space: normal;
		/* "white-space:normal" thôi CHƯA ĐỦ — số tiền/ký hiệu "đ" nối với nhau bằng
		   khoảng trắng KHÔNG NGẮT DÒNG (non-breaking space, đặc thù cách WooCommerce tự
		   định dạng tiền tệ, đo được qua Playwright vẫn tràn y hệt dù "white-space" đã
		   đổi) — "normal" chỉ cho phép ngắt dòng ở khoảng trắng NGẮT ĐƯỢC, khoảng trắng
		   ĐẶC BIỆT này không tính. Thêm "overflow-wrap:anywhere" ép ngắt được ở bất kỳ
		   đâu kể cả giữa non-breaking space khi thật sự không còn chỗ, chặn đứng tràn. */
		overflow-wrap: anywhere;
	}
	/* Nhãn "Tiết kiệm [số tiền]" cạnh giá — lỗi RIÊNG, không chung nguồn với giá ở trên:
	   đo được chính khối nhãn (".wc-block-components-sale-badge") có sẵn
	   "white-space:nowrap" TRÊN CHÍNH NÓ (không phải trên số tiền con bên trong) — 1 khối
	   "nowrap" thì KHÔNG cho phép xuống dòng ở BẤT KỲ đâu bên trong nó dù phần tử con có
	   "white-space:normal" riêng hay không (nowrap chặn tạo dòng mới cho cả khối). Chữ
	   bên trong vì vậy vẫn tràn hẳn ra ngoài khung nhãn đã bị "table-layout:fixed" ép hẹp
	   lại — đo được lồi ra ngoài ~35px, chụp ảnh cận cảnh xác nhận đúng bị cắt ở "39.000"
	   thiếu hẳn ký hiệu "đ" phía sau. */
	.wc-block-components-sale-badge {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* --- Icon "giỏ hàng rỗng" — đổi hình mặt buồn khóc mặc định của WooCommerce sang mặt
   cười thân thiện, màu xanh lá thương hiệu (thêm 2026-09-03 theo yêu cầu người dùng gửi
   ảnh mobile thật "Thay hình khác thiện cảm cùng màu xanh đặt trưng") ---
   Icon gốc của WooCommerce KHÔNG phải ảnh/emoji thật mà là 1 SVG mặt khóc mã hoá base64
   gắn qua "mask-image" trên "::before" của chính tiêu đề "Giỏ hàng hiện tại chưa có sản
   phẩm nào!" (class ".with-empty-cart-icon", soi trực tiếp CSS đã biên dịch của
   WooCommerce mới tìm ra cơ chế — không phải ảnh `<img>` nên không sửa qua Cài đặt/Trang
   được). Thay bằng SVG mặt cười tự vẽ (đường viền tròn + 2 mắt chấm + miệng cười cong,
   cùng kỹ thuật "mask" nên chỉ cần đổi link SVG, không cần đụng gì cấu trúc HTML/JS).
   "background-color" đặt thẳng xanh lá thương hiệu thay vì để "currentColor" kế thừa từ
   tiêu đề (giữ CHỮ vẫn màu gốc, CHỈ icon đổi xanh — đúng ý "hình... màu xanh", không nói
   đổi màu chữ). Thêm cả bản có tiền tố "-webkit-" phòng Safari/iOS cũ chưa hỗ trợ bản
   không tiền tố (nhiều khách Việt dùng iPhone, đã xác nhận qua toàn bộ phiên làm việc
   này). */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: var(--dlb-cc-green, #006d4c) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='8.7' cy='9.7' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.3' cy='9.7' r='1.15' fill='%23000' stroke='none'/%3E%3Cpath d='M7.5 14c1.05 1.6 2.8 2.6 4.5 2.6s3.45-1 4.5-2.6' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='8.7' cy='9.7' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.3' cy='9.7' r='1.15' fill='%23000' stroke='none'/%3E%3Cpath d='M7.5 14c1.05 1.6 2.8 2.6 4.5 2.6s3.45-1 4.5-2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Thu nhỏ icon — thêm ngay sau đó cùng ngày 2026-09-03 theo yêu cầu "Thu gọn này lại"
   (ảnh mobile thật cho thấy icon mặc định WooCommerce "height/width/mask-size:5em" quá
   to, chiếm nhiều khoảng trắng dọc). Giảm còn 2.75em (~55%), margin dưới giảm theo tỉ lệ
   tương ứng cho cân đối, không để khoảng trống thừa phía dưới icon. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 2.75em;
	height: 2.75em;
	margin: 0 auto 1em;
	-webkit-mask-size: 2.75em;
	mask-size: 2.75em;
}