/*
 * WooCommerce: lưới sản phẩm, chi tiết, giỏ hàng, thanh toán, tài khoản.
 *
 * Chỉ nạp ở trang WooCommerce (xem inc/enqueue.php).
 */

/* --- Khung trang cửa hàng ------------------------------------------------- */

.shop-layout { padding-block: clamp(1.5rem, 4vw, 3rem); }

.shop-layout--sidebar {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.shop-layout--sidebar {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	/* Bộ lọc đứng trước lưới sản phẩm trên desktop, nhưng trong HTML nằm sau
	   để nội dung chính lên trước ở mobile và với trình đọc màn hình. */
	.shop-layout--sidebar .shop-layout__aside { grid-column: 1; grid-row: 1; }
	.shop-layout--sidebar .shop-layout__main  { grid-column: 2; grid-row: 1; }
}

.woocommerce-products-header { margin-bottom: 1.5rem; }

.woocommerce-products-header__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.term-description {
	max-width: 60ch;
	color: var(--bk-cocoa-soft);
}

/* Thanh sắp xếp + số kết quả */
.woocommerce-notices-wrapper:empty { display: none; }

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bk-line);
}

.woocommerce-result-count {
	margin: 0;
	color: var(--bk-cocoa-soft);
	font-size: 0.875rem;
}

.woocommerce-ordering select {
	width: auto;
	min-width: 200px;
	padding-block: 0.5rem;
}

/* WooCommerce đặt `del { opacity: .5 }` cho giá gốc. Opacity pha màu chữ vào
   nền nên tương phản tụt xuống ~2.9:1, dưới chuẩn WCAG AA.
   Selector phải đủ đặc hiệu để thắng `.woocommerce ul.products li.product .price del`
   của WooCommerce (0,4,3) — nên lặp lại đúng cấu trúc đó thay vì `.woocommerce del`. */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del *,
.woocommerce div.product .price del,
.woocommerce div.product .price del *,
.woocommerce .price del,
.woocommerce .price del * {
	opacity: 1;
	color: var(--bk-cocoa-soft);
}

/* --- Lưới sản phẩm -------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, 1fr);
}

/* WooCommerce core đặt clearfix `content: " "; display: table` trên
   :before/:after của ul.products cho layout float đời trước. Với display:grid
   thì :before đó tự thành một grid item ẩn, chiếm mất ô đầu tiên và đẩy sản
   phẩm thật sang cột 2 — chỉ lộ ra ở hàng đầu vì các hàng sau vẫn đủ item lấp
   đầy 4 cột. Tắt hẳn để :before/:after không tham gia vào grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

@media (min-width: 1100px) {
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

/* WooCommerce gán sẵn class first/last để clear float — bỏ đi vì đang dùng grid */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius-lg);
	text-align: center;
	transition: box-shadow 0.2s var(--bk-ease), transform 0.2s var(--bk-ease);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--bk-shadow-lg);
	transform: translateY(-2px);
}

.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bk-sand);
}

.woocommerce ul.products li.product .product-card__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s var(--bk-ease);
}

.woocommerce ul.products li.product:hover .product-card__media img {
	transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0.9rem 1rem 0.35rem;
	color: var(--bk-cocoa);
	font-family: var(--bk-font-display);
	font-size: 1rem;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 0 0.9rem;
	color: var(--bk-cocoa);
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	margin-right: 0.4rem;
	color: var(--bk-cocoa-soft);
	font-weight: 400;
	/* KHONG dung opacity o day: no pha mau chu vao nen, keo tuong phan xuong
	   2.9:1 va truot chuan WCAG AA. Mau cocoa-soft nguyen ban da du nhat. */
}

.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--bk-berry);
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	margin: auto 1rem 1.1rem;
	padding: 0.7em 1.2em;
	font-size: 0.875rem;
}

/* --- Nhãn sản phẩm -------------------------------------------------------- */

.product-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--bk-cocoa);
	color: var(--bk-cream);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.product-badge--sale       { background: var(--bk-berry); }
.product-badge--new        { background: var(--bk-leaf); }
.product-badge--bestseller { background: var(--bk-gold); }
.product-badge--signature  { background: var(--bk-cocoa); }
.product-badge--seasonal   { background: var(--bk-gold); }

/* --- Chi tiết sản phẩm ---------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 3rem;
	}

	/* Các phần dưới (tab, sản phẩm liên quan) chiếm hết chiều ngang */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product div.images {
	position: relative;
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images img { border-radius: var(--bk-radius-lg); }

.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 1rem;
	color: var(--bk-cocoa);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce div.product p.price del { color: var(--bk-cocoa-soft); font-size: 1.125rem; font-weight: 400; }
.woocommerce div.product p.price ins { background: none; color: var(--bk-berry); text-decoration: none; }

.woocommerce-product-details__short-description {
	color: var(--bk-cocoa-soft);
}

.product-preorder-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--bk-gold);
	border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
	background: var(--bk-gold-soft);
	color: var(--bk-cocoa);
	font-size: 0.875rem;
}

.product-quick {
	margin: 1.25rem 0;
	padding: 1rem 1.1rem;
	list-style: none;
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
	font-size: 0.9375rem;
}

.product-quick li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.product-quick li + li { margin-top: 0.5rem; }

.product-quick__label { color: var(--bk-cocoa-soft); }
.product-quick__value { font-weight: 500; }

/* Số lượng + nút mua */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .variations {
	flex: 1 1 100%;
	margin-bottom: 0.5rem;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0 0 0.4rem;
	text-align: left;
}

.woocommerce .quantity .qty {
	width: 84px;
	height: 100%;
	min-height: 48px;
	text-align: center;
}

.woocommerce div.product form.cart .button {
	flex: 1;
	min-width: 180px;
	min-height: 48px;
}

.woocommerce div.product .product_meta {
	padding-top: 1rem;
	border-top: 1px solid var(--bk-line);
	color: var(--bk-cocoa-soft);
	font-size: 0.875rem;
}

/* --- Tab ------------------------------------------------------------------ */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--bk-line);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--bk-line);
	border-radius: 999px;
	color: var(--bk-cocoa-soft);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--bk-cocoa);
	border-color: var(--bk-cocoa);
	color: var(--bk-cream);
}

.woocommerce-Tabs-panel h2:first-child { display: none; }

.woocommerce table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.shop_attributes :is(th, td) {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--bk-line);
	text-align: left;
	vertical-align: top;
}

.woocommerce table.shop_attributes th { width: 32%; font-weight: 600; }
.woocommerce table.shop_attributes td p { margin: 0; }

/* --- Sản phẩm liên quan --------------------------------------------------- */

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-bottom: 1.25rem;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.woocommerce .related { margin-top: 3rem; }

/* --- Đánh giá sản phẩm ------------------------------------------------------
   inc/performance.php dequeue hẳn woocommerce-general.css (font "star" của
   WC nằm trong đó) để giảm tải trang, nên .star-rating phải tự vẽ sao bằng
   ký tự Unicode thay vì icon font của WC — không phụ thuộc font ngoài. */

.star-rating {
	position: relative;
	width: 5.3em;
	height: 1.1em;
	font-size: 0.9rem;
	line-height: 1.1em;
	letter-spacing: 2px;
	overflow: hidden;
}

.star-rating::before,
.star-rating span::before {
	content: '★★★★★';
	display: block;
	letter-spacing: 2px;
}

.star-rating::before { color: var(--bk-line); }

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

.star-rating span::before { color: var(--bk-gold); }

.woocommerce #reviews #comments { padding: 0; list-style: none; }

.woocommerce #reviews .woocommerce-Reviews-title {
	margin-bottom: 1rem;
	font-size: clamp(1.1rem, 2.5vw, 1.375rem);
}

.woocommerce #reviews .commentlist {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.woocommerce #reviews .commentlist .comment {
	padding: 1rem 0;
	border-top: 1px solid var(--bk-line);
}

.woocommerce #reviews .commentlist .comment:first-child { border-top: 0; padding-top: 0; }

.woocommerce #reviews .comment_container { display: flex; gap: 0.9rem; align-items: flex-start; }

.woocommerce #reviews .comment_container img {
	border-radius: 50%;
	flex: none;
}

.woocommerce #reviews .comment-text { flex: 1; }

.woocommerce #reviews .meta {
	margin-bottom: 0.3rem;
	color: var(--bk-cocoa-soft);
	font-size: 0.8125rem;
}

.woocommerce #reviews .woocommerce-review__author { color: var(--bk-cocoa); font-weight: 600; }

.woocommerce #reviews .description p { margin: 0.4rem 0 0; color: var(--bk-cocoa); }

.woocommerce #review_form_wrapper {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var(--bk-sand);
	border-radius: var(--bk-radius);
}

.woocommerce #review_form .comment-form-rating select { width: auto; }

.woocommerce #review_form .comment-form-comment textarea,
.woocommerce #review_form .comment-form-author input,
.woocommerce #review_form .comment-form-email input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
	background: var(--bk-surface);
	color: var(--bk-cocoa);
}

.woocommerce #review_form #submit { margin-top: 0.5rem; }

/* --- Thông báo ------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 0;
	border-left: 3px solid var(--bk-gold);
	border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
	background: var(--bk-surface);
	color: var(--bk-cocoa);
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: var(--bk-leaf); }
.woocommerce-error   { border-left-color: var(--bk-berry); }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 0.5em 1.2em;
	font-size: 0.875rem;
}

/* --- Giỏ hàng ------------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	margin-bottom: 1.5rem;
	border: 1px solid var(--bk-line);
	border-collapse: collapse;
	border-radius: var(--bk-radius);
	background: var(--bk-surface);
	overflow: hidden;
}

/* Bảng dùng table-layout: auto nên ở độ rộng "lỡ cỡ" (~769-830px — nhỏ hơn
   desktop nhưng ngay trên breakpoint đổi sang thẻ dọc), tổng min-content của
   các cột (ảnh, tên, giá, số lượng, tổng, nút xoá) có thể vượt quá 100% —
   khi đó bảng tràn khỏi khung mà không có cách nào cuộn tới phần bị khuất,
   phần cột bên phải (nút xoá) bị cắt mất hẳn dù overflow-x:hidden của body
   không cho thấy scrollbar. Cho form cuộn ngang riêng để luôn truy cập được
   toàn bộ bảng, không phụ thuộc việc co giãn cột có vừa hay không. */
.woocommerce-cart-form {
	overflow-x: auto;
}

.woocommerce table.shop_table th {
	padding: 0.9rem;
	background: var(--bk-sand);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: 0.9rem;
	border-top: 1px solid var(--bk-line);
	vertical-align: middle;
}

/* WooCommerce core có sẵn `.woocommerce-cart table.cart img { width: 32px }`
   cùng độ đặc hiệu với rule dưới đây (2 class + 2 thẻ) — ai thắng phụ thuộc
   thứ tự nạp CSS, không chắc chắn. Cộng thêm `max-width: 100%` từ cả
   woocommerce-layout.css lẫn base.css khiến ảnh bị co theo cột bảng đang tự
   co hẹp bất thường (table-layout: auto), thực tế co xuống còn ~3px thay vì
   32px hay 64px. Dùng !important để chắc chắn thắng bất kể thứ tự nạp.
*/
.woocommerce table.shop_table img {
	width: 64px !important;
	max-width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: 8px;
}

.woocommerce table.shop_table .product-name a {
	color: var(--bk-cocoa);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bk-sand);
	color: var(--bk-cocoa) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover {
	background: var(--bk-berry);
	color: #fff !important;
}

/* Bảng giỏ hàng trên mobile: chuyển thành thẻ xếp dọc, dùng nhãn từ
   data-title mà WooCommerce đã gắn sẵn. Breakpoint khớp đúng 768px của
   woocommerce-smallscreen.css — lệch 1px sẽ để lọt đúng độ rộng 768px, nơi
   core ẩn cột ảnh còn override bật lại của theme lại chưa kích hoạt. */
@media (max-width: 768px) {
	.woocommerce table.shop_table thead { display: none; }

	.woocommerce table.shop_table tr {
		display: block;
		padding: 0.75rem;
		border-top: 1px solid var(--bk-line);
	}

	.woocommerce table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border: 0;
		text-align: right;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		color: var(--bk-cocoa-soft);
		font-size: 0.8125rem;
		text-align: left;
	}

	.woocommerce table.shop_table td.product-remove::before,
	.woocommerce table.shop_table td.product-thumbnail::before { content: none; }

	/* WooCommerce core (woocommerce-smallscreen.css) ẩn hẳn cột ảnh dưới
	   768px — nhưng bảng ở đây đã chuyển thành thẻ xếp dọc riêng, đủ chỗ cho
	   ảnh, nên bật lại cho nhất quán với phần còn lại của site. */
	.woocommerce table.cart td.product-thumbnail {
		display: flex !important;
		justify-content: flex-start;
	}

	.woocommerce table.shop_table td.actions { display: block; }
	.woocommerce table.shop_table td.actions::before { content: none; }
}

/* KHÔNG đặt display:flex trực tiếp lên <td class="actions"> — nó có
   colspan trải hết chiều ngang bảng, và đổi display sẽ khiến trình duyệt
   coi nó không còn là table-cell nữa, mất luôn hiệu lực của colspan. Khi đó
   ô này co lại đúng bằng min-content của chính nó (đúng bằng min-width của
   .coupon bên dưới), và vì nó "lọt" vào đúng vị trí cột đầu tiên của bảng,
   auto table-layout hiểu nhầm cột "xoá sản phẩm" (X) ở các dòng khác cũng
   phải rộng bằng ngần ấy — cột X phình to, cột tên sản phẩm bị bóp lại.
   Dùng inline-flex cho .coupon + margin thay vì gap để giữ hiệu ứng xuống
   dòng tự nhiên mà không đụng tới display của <td>. */
.woocommerce table.shop_table td.actions {
	background: var(--bk-cream);
}

.woocommerce .coupon {
	display: inline-flex;
	vertical-align: middle;
	gap: 0.5rem;
	width: 320px;
	max-width: 100%;
	margin: 0.25rem 0.75rem 0.25rem 0;
}

.woocommerce table.shop_table td.actions > .button {
	vertical-align: middle;
	margin: 0.25rem 0;
}

/* flex: 1 để ô nhập chiếm hết chỗ còn lại trong .coupon sau khi trừ nút
   Áp dụng — thiếu dòng này, input co về gần đúng độ rộng chữ placeholder
   (~80px), không đủ chỗ gõ mã thật. */
.woocommerce .coupon .input-text { flex: 1; min-width: 0; }
.woocommerce .coupon button { flex-shrink: 0; }

.cart-collaterals {
	margin-top: 2rem;
}

@media (min-width: 900px) {
	.cart-collaterals {
		display: flex;
		justify-content: flex-end;
	}

	.cart_totals { width: min(420px, 100%); }
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 {
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

.cart_totals table,
.woocommerce-checkout-review-order table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
	overflow: hidden;
}

.cart_totals :is(th, td),
.woocommerce-checkout-review-order :is(th, td) {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--bk-line);
	text-align: left;
}

.cart_totals td,
.woocommerce-checkout-review-order td { text-align: right; }

.cart_totals .order-total :is(th, td),
.woocommerce-checkout-review-order .order-total :is(th, td) {
	border-bottom: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.wc-proceed-to-checkout { margin-top: 1rem; }

.wc-proceed-to-checkout .button { width: 100%; }

.cart-empty__cta { margin-top: 1rem; }

/* --- Thanh toán ----------------------------------------------------------- */

.woocommerce-checkout .col2-set {
	display: grid;
	gap: 1.5rem;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: auto;
	float: none;
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce form .form-row label { font-size: 0.875rem; }

.woocommerce form .form-row .required {
	color: var(--bk-berry);
	text-decoration: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 600px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		display: inline-flex;
		width: calc(50% - 0.5rem);
	}

	.woocommerce form .form-row-first { margin-right: 1rem; }
}

.wic-delivery-fields {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
}

.wic-delivery-fields h3 { margin-top: 0; font-size: 1.125rem; }

.wic-delivery-note {
	margin-bottom: 1rem;
	color: var(--bk-cocoa-soft);
	font-size: 0.875rem;
}

#order_review_heading { margin-top: 2rem; }

.woocommerce-checkout #payment {
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 1rem;
	border-bottom: 1px solid var(--bk-line);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li + li { margin-top: 0.75rem; }

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box {
	margin-top: 0.5rem;
	padding: 0.85rem 1rem;
	border-radius: var(--bk-radius);
	background: var(--bk-sand);
	color: var(--bk-cocoa-soft);
	font-size: 0.875rem;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

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

.woocommerce-checkout #payment #place_order {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
}

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		gap: 3rem;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce-checkout form.checkout > .col2-set,
	.woocommerce-checkout form.checkout > .woocommerce-additional-fields {
		grid-column: 1;
	}

	/* Bọc chung tiêu đề + bảng đơn hàng (xem checkout.php) để cả hai nằm
	   trong CÙNG MỘT ô grid ở cột phải, không phụ thuộc số khối ở cột trái. */
	.woocommerce-checkout form.checkout > .wic-order-summary-col {
		grid-column: 2;
		grid-row: 1 / -1;
	}

	.woocommerce-checkout form.checkout > .wic-order-summary-col > #order_review_heading {
		margin-top: 0;
	}

	/* Tóm tắt đơn theo màn hình khi cuộn qua form dài */
	.woocommerce-checkout form.checkout > .wic-order-summary-col > #order_review {
		position: sticky;
		top: calc(var(--bk-header-h) + 1rem);
	}
}

/* --- Trang cảm ơn & tài khoản --------------------------------------------- */

.woocommerce-order,
.woocommerce-account .woocommerce {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.woocommerce ul.order_details {
	display: grid;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.25rem;
	background: var(--bk-surface);
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius);
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.woocommerce ul.order_details li {
	border: 0;
	color: var(--bk-cocoa-soft);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.25rem;
	color: var(--bk-cocoa);
	font-size: 1rem;
	text-transform: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--bk-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.7rem 0;
	color: var(--bk-cocoa);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--bk-gold);
	font-weight: 600;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 24%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 72%;
	}

	.woocommerce-account .woocommerce::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* --- Bộ lọc ở cột bên ----------------------------------------------------- */

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--bk-sand);
	border-radius: 999px;
}

.widget_price_filter .ui-slider .ui-slider-range { background: var(--bk-gold); }

.widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--bk-cocoa);
	border-radius: 50%;
}

.widget_price_filter .price_slider_amount .button {
	padding: 0.5em 1.2em;
	font-size: 0.8125rem;
}