/**
 * Cafe Menu Order - giao diện trang thanh toán.
 *
 * Chỉ nạp trên trang thanh toán. Mọi quy tắc đều nằm trong .woocommerce-checkout
 * nên không ảnh hưởng tới phần còn lại của website.
 */

.woocommerce-checkout {
	--cmo-primary: #00b14f;
	--cmo-ink: #1c1c1c;
	--cmo-muted: #767676;
	--cmo-line: #ececec;
	--cmo-soft: #fafafa;
}

/* ---------- Khung chung ---------- */

.woocommerce-checkout .woocommerce {
	font-size: 15px;
	color: var(--cmo-ink);
}

.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--cmo-ink);
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cmo-line);
	line-height: 1.3;
}

/* ---------- Ô mã giảm giá ---------- */

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--cmo-soft);
	border: 0;
	border-left: 3px solid var(--cmo-primary);
	border-radius: 8px;
	color: var(--cmo-muted);
	font-size: 14px;
	padding: 12px 16px;
	margin-bottom: 24px;
}

/* Bỏ biểu tượng tròn mặc định của WooCommerce cho gọn */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .woocommerce-form-coupon {
	border: 1px solid var(--cmo-line);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 24px;
}

/* ---------- Một cột duy nhất, máy tính giống hệt điện thoại ---------- */

/*
 * Trước đây máy tính dùng lưới 2 cột còn điện thoại 1 cột, hai bố cục khác nhau
 * nên hành xử khác nhau và khó kiểm tra. Nay dùng chung một bố cục, máy tính chỉ
 * khác ở chỗ giới hạn bề ngang cho khỏi loãng.
 */
/*
 * Không đặt trong media query: bó về đúng một bề ngang ở MỌI kích thước màn
 * hình, y như trang menu. Có ngưỡng thì màn hình tầm trung (máy tính bảng) lại
 * rơi vào một bố cục thứ ba không ai kiểm tra.
 *
 * Ép các lớp bọc của theme căn giữa trước. Căn giữa form mà lớp bọc bên ngoài
 * đã lệch trái thì form vẫn lệch theo — phải xử lý từ ngoài vào trong.
 */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .wp-block-post-content,
.woocommerce-checkout .woocommerce {
	margin-left: auto !important;
	margin-right: auto !important;
}

.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout .woocommerce-notices-wrapper {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Thứ tự các khối trên trang ---------- */

.woocommerce-checkout form.checkout {
	display: flex;
	flex-direction: column;
}

/*
 * display:contents làm hai lớp bọc này "trong suốt": các khối bên trong chúng
 * trở thành con trực tiếp của form, nhờ vậy mới sắp xếp được nút Đặt món
 * xuống cuối trang trong khi bảng món vẫn nằm trên.
 */
.woocommerce-checkout form.checkout > .cmo-review-col,
.woocommerce-checkout form.checkout #order_review {
	display: contents;
}

.woocommerce-checkout .cmo-review-head {
	order: 1;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	order: 2;
}

.woocommerce-checkout form.checkout > #customer_details {
	order: 3;
}

.woocommerce-checkout form.checkout #payment {
	order: 4;
}

/* Bỏ tiêu đề "Ghi chú thêm" — nhãn của ô đã nói rõ, tiêu đề chỉ tốn chỗ */
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

/* Trong phần thông tin: ghi chú lên trước, thông tin nhận hàng xuống sau */
.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .woocommerce-billing-fields {
	order: 2;
}

.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	order: 1;
}

/* ---------- Ô mã giảm giá luôn mở sẵn ---------- */

.woocommerce-checkout.cmo-coupon-open .woocommerce-form-coupon-toggle {
	display: none;
}

/* WooCommerce ẩn form này bằng thuộc tính gắn thẳng vào thẻ, phải dùng !important mới đè được */
.woocommerce-checkout.cmo-coupon-open form.checkout_coupon {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	border: 0;
	border-radius: 12px;
	background: var(--cmo-soft);
	padding: 14px;
	/* auto hai bên để giữ căn giữa cùng với phần còn lại của trang */
	margin: 0 auto 24px;
	/* tính cả padding vào bề ngang, nếu không sẽ rộng hơn form bên dưới */
	box-sizing: border-box;
}

/*
 * Bỏ dòng "Nếu bạn có mã giảm giá..." vì ô đã hiện sẵn, không cần giải thích.
 * Nhắm theo Ý NGHĨA chứ không theo vị trí: dòng chữ đó là thẻ p không có class,
 * còn ô nhập và nút luôn có class form-row. Bản trước nhắm "p đầu tiên" nên ở
 * phiên bản WooCommerce không có dòng chữ đó thì ẩn nhầm luôn ô nhập.
 */
.woocommerce-checkout.cmo-coupon-open form.checkout_coupon > p:not([class]),
.woocommerce-checkout.cmo-coupon-open form.checkout_coupon .clear {
	display: none;
}

.woocommerce-checkout.cmo-coupon-open form.checkout_coupon .form-row {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

.woocommerce-checkout.cmo-coupon-open form.checkout_coupon .form-row-first {
	flex: 1 1 160px;
}

.woocommerce-checkout.cmo-coupon-open form.checkout_coupon input.input-text,
.woocommerce-checkout.cmo-coupon-open form.checkout_coupon input[type="text"] {
	width: 100%;
	background: #fff;
}

.woocommerce-checkout.cmo-coupon-open form.checkout_coupon button {
	background: var(--cmo-primary);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 12px 20px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

/* Xếp dọc phần thông tin và phần ghi chú, không chia đôi cho chật */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	max-width: none;
	margin: 0;
}

.woocommerce-checkout #customer_details .col-2 {
	margin-top: 28px;
}

/* ---------- Các ô nhập ---------- */

.woocommerce-checkout form.checkout .form-row {
	width: 100%;
	float: none;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-checkout form.checkout label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--cmo-ink);
}

.woocommerce-checkout form.checkout .required {
	color: #d0342c;
	text-decoration: none;
}

.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	/* Dưới 16px thì Safari trên iPhone tự phóng to trang khi bấm vào ô */
	font-size: 16px;
	line-height: 1.4;
	font-family: inherit;
	color: var(--cmo-ink);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color .15s ease;
}

.woocommerce-checkout form.checkout textarea {
	min-height: 90px;
	resize: vertical;
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout textarea:focus {
	border-color: var(--cmo-primary);
	outline: none;
}

.woocommerce-checkout form.checkout .input-text::placeholder,
.woocommerce-checkout form.checkout textarea::placeholder {
	color: #b0b0b0;
}

/* Dòng ghi nhớ thông tin khách */
.woocommerce-checkout .cmo-remember-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -6px 0 20px;
	font-size: 13px;
	color: var(--cmo-muted);
}

.woocommerce-checkout .cmo-remember-clear {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	color: var(--cmo-muted);
	text-decoration: underline;
	cursor: pointer;
}

.woocommerce-checkout .cmo-remember-clear:hover {
	color: #d0342c;
}

.woocommerce-checkout .cmo-remember-clear:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* ---------- Thẻ đơn hàng ---------- */

/* Không viền, không đổ bóng — nhường hết không gian cho nội dung, giống app đặt đồ ăn */
.woocommerce-checkout #order_review {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce-checkout #order_review.cmo-busy {
	opacity: .5;
	pointer-events: none;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	border: 0;
	border-bottom: 1px solid #f2f2f2;
	padding: 14px 0;
	vertical-align: top;
	background: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cmo-muted);
	padding-top: 16px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	font-weight: 600;
	color: var(--cmo-ink);
	line-height: 1.4;
	padding-right: 12px;
}

/* Ảnh món trong thẻ đơn hàng — đặt tuyệt đối để không phá bố cục ô */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	position: relative;
	padding-left: 62px;
}

.woocommerce-checkout .cmo-review-thumb {
	position: absolute;
	left: 0;
	top: 1px;
	width: 48px;
	height: 48px;
	display: block;
}

.woocommerce-checkout .cmo-review-thumb img,
.woocommerce-checkout img.cmo-review-img {
	width: 48px;
	height: 48px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: #f2f2f2;
	margin: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--cmo-muted);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	white-space: nowrap;
}

/*
 * NHƯNG những ô không phải tiền thì PHẢI xuống dòng được.
 *
 * Quy tắc nowrap ở trên sinh ra để "20.000 ₫" không bị bẻ làm đôi. Nó chọn theo
 * vị trí (ô cuối hàng), nên vô tình trúng cả:
 *
 *   - ô chứa các cách giao hàng — nhãn dài như "Đồng giá · Miễn phí (khách
 *     quen)" không xuống dòng được;
 *   - mọi ô colspan="2" (dòng nhắc, địa chỉ nhận tại quán) — vì ô đó vừa là
 *     ô đầu vừa là ô cuối.
 *
 * Hậu quả: cả bảng rộng hơn màn hình điện thoại, khách phải gạt ngang mới đọc
 * hết — mà đây là trang thanh toán, chỗ không được phép có một chút vướng nào.
 * Đã xảy ra thật ngày 09/09/2026.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table td[colspan],
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label {
	white-space: normal;

	/*
	 * break-word chứ KHÔNG phải anywhere: anywhere cho phép bẻ ngay giữa một từ
	 * bất cứ chỗ nào, nên "Tới quán lấy" trong cột hẹp thành "Tới" xuống dòng
	 * "quán lấy". break-word chỉ bẻ khi cả từ không lọt nổi.
	 */
	overflow-wrap: break-word;
}

/*
 * ==========================================================================
 * Bảng đơn hàng: MỖI HÀNG TỰ XẾP, không chia cột chung — cho mọi màn hình.
 * ==========================================================================
 *
 * VÌ SAO KHÔNG ĐỂ NÓ LÀ BẢNG. Bảng HTML bắt mọi hàng dùng chung hai cột, bề
 * rộng cột do ô khó tính nhất quyết, và cột tiền lại bị ép co về tối thiểu
 * (width: 1% ở dưới) để tên món có chỗ. Hàng "Giao hàng" hỏng ba kiểu, cả ba
 * đều từ đó, và đều im lặng:
 *
 *   1. MÁY TÍNH (1.38 → 1.41.0): ô giao hàng được phép xuống dòng nên nó thôi
 *      đòi bề rộng — cột tiền co về đúng 100px của "16.000 ₫", và "Đồng giá:
 *      15.000 ₫" gãy thành BA dòng. Ở 1.24.0 ô đó còn dính nowrap nên nó ép
 *      được cột rộng ra — đó là lý do bản cũ trông đẹp.
 *   2. ĐIỆN THOẠI (1.40.1 → 1.41.0): bản vá đặt display: flex cho riêng <tr>
 *      giao hàng. Một <tr> không còn là table-row thì trình duyệt tự bọc nó
 *      vào một Ô ẨN DANH nằm ở CỘT ĐẦU TIÊN — cả hàng bị nhốt trong cột trái:
 *      các lựa chọn dừng ở 241px trong khi bảng chạy tới 340px.
 *   3. Cũng bản vá đó làm bảng rộng hơn khung chứa 25px trên máy 360px — cột
 *      tiền chỉ còn cách mép màn hình 5px.
 *
 * Bỏ hẳn cơ chế bảng (bảng thành block, từng hàng thành flex) là gỡ cả họ lỗi
 * này một lần: hàng nào cũng chạy đủ bề ngang, nhãn trái, giá trị phải, không
 * hàng nào bóp được hàng khác. Nhìn vẫn y như bảng.
 *
 * ĐỘ ƯU TIÊN: phải có ".shop_table" để lên (0,3,1). woocommerce.css vẽ viền
 * trên cho từng ô bằng ".woocommerce table.shop_table tfoot td" = (0,2,3), và
 * nó THẮNG mọi quy tắc (0,2,1) của plugin — nên bấy lâu "border: 0" ở trên
 * chưa hề có tác dụng ở cuối bảng, và đường kẻ đứt khúc ngay chỗ giáp cột.
 *
 * Đo bằng Bảng kiểm tra trong AI_GUIDE (có chạy cả khung 360px), đừng tin mắt:
 * lần vá trước đo mép phải của lựa chọn so với mép ô CHỨA nó — mà ô đó chính là
 * cái bị nhốt, nên số nào cũng khớp.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tfoot {
	display: block;
	width: 100%;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr {
	display: flex;
	align-items: flex-start;
	column-gap: 12px;
	border-bottom: 1px solid #f2f2f2;
}

/*
 * Hàng mang thuộc tính hidden phải ẩn LẠI. Trình duyệt ẩn nó bằng
 * "[hidden] { display: none }" với độ ưu tiên thấp nhất, nên "display: flex"
 * ngay trên đè mất và hàng hiện ra. tr.cmo-pickup-marker luôn ẩn — nó chỉ mang
 * dấu hiệu "tới quán lấy" cho JavaScript đọc.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr[hidden] {
	display: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr.order-total {
	border-bottom: 0;
}

/* Món: tên (cao) bên trái, giá nằm giữa theo chiều dọc — như khi còn là bảng. */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr.cart_item {
	align-items: center;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table td {
	display: block;
	border: 0;
}

/* Ô đầu lấy phần còn lại, ô cuối (thường là tiền) vừa đúng nội dung. */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr > :last-child {
	flex: 0 0 auto;
	width: auto;
}

/* Ô colspan (dòng nhắc, "Nhận tại"): trọn hàng. PHẢI đứng sau hai quy tắc trên,
   vì ô này vừa là ô đầu vừa là ô cuối. */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table td[colspan] {
	flex: 1 1 100%;
}

/*
 * Hàng "Phương thức nhận món" (WooCommerce gọi là "Giao hàng"): nhãn một dòng
 * riêng ở trên, các cách nhận là NÚT NẰM NGANG bên dưới, cách đang chọn nền màu
 * quán chữ trắng — đúng kiểu hàng chọn của Phiếu quầy (`.cmo-counter-choice`),
 * chủ quán chốt 25/09/2026 (AI_GUIDE #25). Trước 1.58.0 là nhãn bên trái, mỗi
 * cách giao một dòng dồn sát lề phải — kiểu đó thắng một lần thử XẾP DỌC nút
 * tròn dưới nhãn (bị trả lại); nút nằm ngang là kiểu khác hẳn, không phải quay
 * về lần thử đó.
 *
 * NÚT TRÒN VẪN CÒN, chỉ ẩn với mắt: WooCommerce nghe sự kiện `change` của chính
 * nút tròn để tính lại tiền, bấm vào nhãn là trình duyệt tự tick nút tròn. Ẩn
 * kiểu "đưa ra ngoài nhưng vẫn bấm Tab tới được" — display:none thì người dùng
 * bàn phím và trình đọc màn hình mất luôn lựa chọn.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr.woocommerce-shipping-totals {
	flex-wrap: wrap;
	row-gap: 10px;
	padding-bottom: 14px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr.woocommerce-shipping-totals > th {
	flex: 1 1 100%;
	white-space: normal;
	color: var(--cmo-ink);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table.shop_table tr.woocommerce-shipping-totals > td {
	flex: 1 1 100%;
	min-width: 0;
	text-align: left;
	padding-top: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input.shipping_method {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * Nút: như chip của Phiếu quầy. Tên cách nhận do chủ quán tự đặt có thể dài
 * ("Đồng giá · Miễn phí (khách quen)") — lúc đó chữ trong nút xuống dòng, số
 * tiền thì không bao giờ bị bẻ đôi.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li label {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin: 0;
	padding: 6px 16px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input.shipping_method:checked + label,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input[type="hidden"] + label {
	border-color: var(--cmo-primary);
	background: var(--cmo-primary);
	color: #fff;
	font-weight: 700;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input.shipping_method:focus-visible + label {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods .woocommerce-Price-amount {
	color: inherit;
	white-space: nowrap;
}

/* Option của từng món: mỗi nhóm một dòng, chữ nhỏ và nhạt */
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation {
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cmo-muted);
	font-weight: 400;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	font-weight: 400;
}

/* Tên nhóm ("Chọn Size", "Độ Ngọt"...) in đậm và sẫm hơn phần giá trị, để
   khách liếc một cái là tách được đâu là nhóm, đâu là thứ mình đã chọn. */
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt {
	font-weight: 700;
	color: var(--cmo-ink);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd > p {
	display: inline;
	margin: 0;
}

/* WooCommerce render dt và dd dính liền nhau, thêm khoảng trắng cho dễ đọc */
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt::after {
	content: " ";
	white-space: pre;
}

/* Xuống dòng sau mỗi nhóm option */
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd::after {
	content: "\A";
	white-space: pre;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 600;
	color: var(--cmo-ink);
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--cmo-ink);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Hình thức thanh toán ---------- */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 18px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	border: 0;
	border-top: 1px solid #f2f2f2;
	border-radius: 0;
	padding: 14px 0;
	margin: 0;
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-weight: 600;
	font-size: 15px;
	margin: 0;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	accent-color: var(--cmo-primary);
	margin-right: 8px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--cmo-soft);
	color: var(--cmo-muted);
	font-size: 13px;
	line-height: 1.5;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 10px 0 0;
}

/* Bỏ mũi tên tam giác mặc định phía trên hộp mô tả */
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* ---------- Nút đặt món ---------- */

.woocommerce-checkout #payment .form-row.place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	display: block;
	float: none;
	background: var(--cmo-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 15px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity .15s ease;
}

.woocommerce-checkout #payment #place_order:hover {
	opacity: .9;
	color: #fff;
}

.woocommerce-checkout #payment #place_order:disabled {
	opacity: .55;
	cursor: default;
}

.woocommerce-checkout #payment #place_order:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-top: 14px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: 12px;
	line-height: 1.6;
	color: #a0a0a0;
	margin: 0;
}

/* ---------- Thông báo lỗi ---------- */

.woocommerce-checkout .woocommerce-error {
	background: #fff5f5;
	border: 1px solid #f5c6c3;
	border-left: 3px solid #d0342c;
	border-radius: 10px;
	color: #b32d2e;
	font-size: 14px;
	padding: 14px 16px;
	list-style: none;
	margin: 0 0 20px;
}

.woocommerce-checkout .woocommerce-error::before {
	display: none;
}

.woocommerce-checkout .woocommerce-error li {
	list-style: none;
	margin: 0 0 4px;
}

/* ---------- Khổ điện thoại, áp dụng ở mọi màn hình ---------- */

/*
 * KHÔNG bọc vào media query. Media query ăn theo bề rộng CỬA SỔ, còn cột nội
 * dung thì luôn 520px ở mọi màn hình. Bọc lại thì cùng một cột 520px mà trên
 * máy tính nút lại nhỏ hơn trên điện thoại — đúng kiểu lệch mà bố cục một cột
 * sinh ra để dẹp.
 */
.woocommerce-checkout #customer_details {
	margin-top: 28px;
}

/* Nút to cho dễ bấm bằng ngón cái */
.woocommerce-checkout #payment #place_order {
	padding: 16px 24px;
	font-size: 17px;
}

/* ---------- Tôn trọng lựa chọn giảm chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout form.checkout .input-text,
	.woocommerce-checkout #payment #place_order {
		transition: none;
	}
}


/* ==========================================================================
   Trang giỏ hàng cổ điển
   ========================================================================== */

.woocommerce-cart {
	--cmo-primary: #00b14f;
	--cmo-ink: #1c1c1c;
	--cmo-muted: #767676;
	--cmo-line: #ececec;
	--cmo-soft: #fafafa;
}

.woocommerce-cart table.shop_table.cart {
	border: 0;
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 24px;
	font-size: 15px;
}

.woocommerce-cart table.shop_table.cart th,
.woocommerce-cart table.shop_table.cart td {
	border: 0;
	border-bottom: 1px solid var(--cmo-line);
	padding: 14px 10px;
	vertical-align: middle;
	background: none;
}

.woocommerce-cart table.shop_table.cart thead th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cmo-muted);
}

.woocommerce-cart td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: #f2f2f2;
}

.woocommerce-cart td.product-name a {
	font-weight: 600;
	color: var(--cmo-ink);
	text-decoration: none;
}

.woocommerce-cart td.product-name dl.variation {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cmo-muted);
}

.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	font-weight: 400;
}

.woocommerce-cart td.product-name dl.variation dd > p {
	display: inline;
	margin: 0;
}

.woocommerce-cart td.product-name dl.variation dt::after {
	content: " ";
	white-space: pre;
}

.woocommerce-cart td.product-name dl.variation dd::after {
	content: "\A";
	white-space: pre;
}

.woocommerce-cart td.product-subtotal {
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

.woocommerce-cart .quantity input.qty {
	width: 64px;
	min-height: 40px;
	padding: 6px 8px;
	text-align: center;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.woocommerce-cart a.remove {
	color: #b32d2e !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart td.actions {
	padding: 16px 0 0;
	border-bottom: 0;
}

.woocommerce-cart .coupon input[type="text"] {
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 10px;
	max-width: 200px;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cmo-line);
}

.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--cmo-line);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.woocommerce-cart .cart_totals table {
	border: 0;
	width: 100%;
	margin: 0;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: 0;
	border-bottom: 1px solid #f2f2f2;
	padding: 12px 0;
	font-size: 14px;
	text-align: left;
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-bottom: 0;
	font-size: 18px;
	font-weight: 800;
	padding-top: 14px;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 16px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--cmo-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 15px 24px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	opacity: .9;
	color: #fff;
}

/* Điện thoại: mỗi món thành một thẻ, ảnh bên trái */
@media (max-width: 767px) {
	/*
	 * Hàng "Giao hàng" KHÔNG còn quy tắc riêng cho điện thoại. Nó từng có một
	 * khối đặt display: flex cho <tr> ở đây — chính khối đó nhốt cả hàng vào cột
	 * trái (xem "Mỗi hàng tự xếp" ở phần trên). Giờ một bố cục chạy cho mọi màn
	 * hình. Đừng thêm lại quy tắc giao hàng vào media query này.
	 */
	.woocommerce-cart table.shop_table.cart thead {
		display: none;
	}

	.woocommerce-cart table.shop_table.cart,
	.woocommerce-cart table.shop_table.cart tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-cart table.shop_table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb meta";
		gap: 6px 12px;
		align-items: start;
		border: 1px solid var(--cmo-line);
		border-radius: 12px;
		padding: 12px 34px 12px 12px;
		margin: 0 0 12px;
	}

	.woocommerce-cart table.shop_table.cart tr.cart_item td {
		display: block;
		border: 0;
		padding: 0;
	}

	.woocommerce-cart td.product-thumbnail {
		grid-area: thumb;
	}

	.woocommerce-cart td.product-name {
		grid-area: name;
	}

	/* Giá đơn vị đã nằm trong dòng tạm tính, ẩn đi cho gọn.
	   Selector phải dài bằng rule "td { display: block }" ở trên, nếu không sẽ bị ghi đè. */
	.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price {
		display: none;
	}

	.woocommerce-cart td.product-quantity {
		grid-area: meta;
		align-self: center;
	}

	.woocommerce-cart td.product-subtotal {
		grid-area: meta;
		align-self: center;
		text-align: right;
	}

	.woocommerce-cart td.product-remove {
		position: absolute;
		top: 8px;
		right: 10px;
	}

	.woocommerce-cart table.shop_table.cart tr.cart_item td::before {
		display: none;
	}

	.woocommerce-cart td.actions {
		display: block;
	}

	.woocommerce-cart .coupon {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
	}

	.woocommerce-cart .coupon input[type="text"] {
		flex: 1 1 auto;
		max-width: none;
	}
}


/* ==========================================================================
   Sửa đơn ngay tại trang thanh toán
   ========================================================================== */

/* Tiêu đề đơn hàng có thêm liên kết "Thêm món" bên phải */
.woocommerce-checkout .cmo-review-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cmo-line);
}

/* Đường kẻ đã nằm ở thẻ bọc, tiêu đề bên trong không cần nữa */
.woocommerce-checkout .cmo-review-head #order_review_heading {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.woocommerce-checkout .cmo-add-more {
	font-size: 14px;
	font-weight: 600;
	color: var(--cmo-primary);
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-checkout .cmo-add-more:hover {
	text-decoration: underline;
}

/*
 * Ô tên món xếp dọc: tên, danh sách option, rồi mới tới bộ điều khiển.
 * font-size 0 để nuốt các khoảng trắng WooCommerce chèn giữa các phần tử,
 * nếu không chúng thành ô trống trong flex và làm lệch hàng.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	font-size: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name > * {
	font-size: 14px;
}

.woocommerce-checkout .cmo-item-title {
	order: 1;
	font-weight: 600;
	color: var(--cmo-ink);
	line-height: 1.4;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation {
	order: 2;
}

.woocommerce-checkout .cmo-line-tools {
	order: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

/* Bộ tăng giảm số lượng */
.woocommerce-checkout .cmo-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 999px;
	overflow: hidden;
}

.woocommerce-checkout .cmo-qty-btn {
	width: 30px;
	height: 30px;
	border: 0;
	background: none;
	color: var(--cmo-ink);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.woocommerce-checkout .cmo-qty-btn:hover {
	background: #f4f4f4;
}

.woocommerce-checkout .cmo-qty-num {
	min-width: 26px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-checkout .cmo-line-edit,
.woocommerce-checkout .cmo-line-remove {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.woocommerce-checkout .cmo-line-edit {
	color: var(--cmo-primary);
	font-weight: 600;
}

.woocommerce-checkout .cmo-line-remove {
	color: #999;
}

.woocommerce-checkout .cmo-line-remove:hover {
	color: #b32d2e;
}

.woocommerce-checkout .cmo-qty-btn:focus-visible,
.woocommerce-checkout .cmo-line-edit:focus-visible,
.woocommerce-checkout .cmo-line-remove:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}


/* ==========================================================================
   Dùng hết chiều ngang màn hình
   ========================================================================== */

/* Cột tiền co lại đúng bằng nội dung, nhường chỗ cho tên món và option */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child {
	width: 1%;
	padding-left: 10px;
}

/* Ảnh nhỏ lại một chút để chữ có thêm chỗ, đỡ bị ngắt dòng liên tục.
   Cũng bỏ media query vì lý do như trên: cột luôn là khổ điện thoại. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	padding-left: 50px;
}

.woocommerce-checkout .cmo-review-thumb,
.woocommerce-checkout .cmo-review-thumb img,
.woocommerce-checkout img.cmo-review-img {
	width: 40px;
	height: 40px;
}

/* Cột tiền nhỏ lại để tên món và option đỡ bị ngắt dòng */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
	font-size: 13px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Dòng "Nhận tại" khi khách chọn tới quán lấy ---------- */

/*
 * Hàng "Nhận tại" chiếm trọn bề ngang (td colspan=2), nhãn nằm trên một dòng
 * riêng thay vì tranh cột với nội dung. Xem ghi chú ở pickup_note() trong
 * class-cmo-checkout.php để biết vì sao.
 */
/*
 * Chọn cụ thể hơn rule căn phải của "td:last-child".
 * Sau khi gộp thành một ô colspan, ô này CHÍNH LÀ ô cuối hàng nên dính rule căn
 * phải của cột tiền; ghi ngắn hơn thì thua độ ưu tiên và địa chỉ bị đẩy sang phải.
 */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cmo-pickup-note td {
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cmo-ink);
	white-space: normal;
}

.woocommerce-checkout .cmo-pickup-note .cmo-pickup-label {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cmo-muted);
}

/*
 * Ảnh mặt tiền quán. Chiều cao cố định + object-fit: cover để ảnh nào chụp
 * kiểu gì cũng ra một khối gọn như nhau — chủ quán chụp dọc hay ngang đều được,
 * không ai phải cắt ảnh trước khi tải lên. Bo góc cho khớp các thẻ khác.
 */
.woocommerce-checkout .cmo-pickup-note .cmo-pickup-photo {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 10px;
	margin: 6px 0 8px;
	background: var(--cmo-soft);
}

.woocommerce-checkout .cmo-pickup-note .cmo-pickup-map {
	margin-left: 6px;
	color: var(--cmo-primary);
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Câu dặn thêm của chủ quán. Nền nhạt + viền trái để mắt bắt được ngay là "đọc
 * cái này", nhưng không dùng màu cảnh báo: đây là chỉ dẫn, không phải lỗi.
 */
.woocommerce-checkout .cmo-pickup-note .cmo-pickup-tip {
	display: block;
	margin: 6px 0 0;
	padding: 8px 10px;
	border-left: 3px solid var(--cmo-primary);
	border-radius: 0 8px 8px 0;
	background: var(--cmo-soft);
	font-size: 13px;
	line-height: 1.55;
	color: var(--cmo-ink);
}

.woocommerce-checkout .cmo-pickup-note .cmo-pickup-ready {
	display: block;
	margin-top: 2px;
	color: var(--cmo-muted);
}

/* ==========================================================================
   Cột nội dung rộng bằng thanh đáy
   ========================================================================== */

/*
 * Theme chừa 30px mỗi bên cho mọi khối (MAIN.has-global-padding), còn thanh
 * "Tổng cộng + Đặt món" ghim đáy thì chỉ chừa 16px. Trên điện thoại, hai con số
 * đó lệch nhau 14px mỗi bên: nút "Đặt món" rộng hơn hẳn cột nội dung phía trên,
 * và nội dung thì co cụm vào giữa dù màn hình đã hẹp sẵn.
 *
 * Cho cả trang thanh toán về 16px: cột rộng thêm 28px, và thẳng hàng với thanh
 * đáy. Chỉ đụng tới trang thanh toán — các trang khác của quán giữ nguyên 30px.
 * Trên máy tính thì không đổi gì: cột đã bị giới hạn 520px và căn giữa, đệm hai
 * bên lúc đó không còn quyết định gì.
 */
body.woocommerce-checkout .has-global-padding {
	padding-left: 16px;
	padding-right: 16px;
}

/* ==========================================================================
   Thanh "Tổng cộng" + "Đặt món" ghim đáy màn hình (giống GrabFood)
   ========================================================================== */

body.cmo-cobar .woocommerce-checkout #payment .place-order {
	/*
	 * BẮT BUỘC border-box. WooCommerce đặt width:100% cho ô này; với content-box
	 * thì 100% (1905px) còn cộng thêm 32px padding thành 1937px — thanh rộng hơn
	 * màn hình, và nội dung căn giữa theo 1937 nên lệch 16px so với cột nội dung
	 * phía trên.
	 */
	box-sizing: border-box;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	margin: 0;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid #ececec;
	box-shadow: 0 -3px 16px rgba(0, 0, 0, .12);
}

/* Căn giữa nội dung thanh, rộng đúng bằng cột nội dung phía trên */
body.cmo-cobar .woocommerce-checkout #payment .place-order > * {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

body.cmo-cobar .cmo-cobar-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 auto 8px;
	font-size: 15px;
	color: var(--cmo-ink, #1c1c1c);
}

body.cmo-cobar .cmo-cobar-label {
	font-weight: 600;
}

body.cmo-cobar .cmo-cobar-amount {
	font-size: 20px;
	font-weight: 800;
	color: var(--cmo-primary);
}

/* Dòng chính sách chiếm chỗ trong thanh gọn — ẩn đi cho gọn */
body.cmo-cobar .woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text {
	display: none;
}

/*
 * Chừa chỗ cho thanh cố định, không để nó che mất nội dung cuối trang.
 *
 * KHÔNG viết "body.cmo-cobar .woocommerce-checkout form.checkout": lớp
 * woocommerce-checkout nằm trên CHÍNH cái form (và cả trên body), không phải
 * một thẻ cha bọc ngoài, nên selector đó không bao giờ khớp — đó là lý do
 * phương thức thanh toán ở cuối trang từng bị thanh cố định che mất.
 *
 * Con số ở đây chỉ là mức sàn; cmo-checkout.js đo chiều cao thật của thanh rồi
 * đặt lại cho khớp, vì thanh cao bao nhiêu còn tùy nội dung.
 */
body.cmo-cobar form.checkout {
	padding-bottom: 150px;
}

/* Dòng ưu đãi khách quen ở bảng đơn hàng. */
.woocommerce-checkout .cmo-vip-notice td {
	font-size: 13px;
	line-height: 1.45;
	color: var(--cmo-primary, #00b14f);
}