/*
 * Ánh xạ markup của WooCommerce sang hệ thiết kế của theme.
 * Phụ thuộc: tokens.css, base.css, components.css, content.css.
 *
 * WooCommerce in ra markup của riêng nó: `.form-row`, `.input-text`,
 * `.woocommerce-info`, `.button`. Theme lại có sẵn `.field`, `.field__input`,
 * `.btn`. File này nối hai bên lại.
 *
 * Vì sao ánh xạ bằng CSS mà không ghi đè template để đổi class:
 * `woocommerce_form_field()` xử lý ô chọn quốc gia và tỉnh thành liên động,
 * class báo lỗi khi kiểm tra hợp lệ, `autocomplete` đúng chuẩn, và những
 * trường mà plugin vận chuyển hay thanh toán tự chèn thêm. Viết tay lại
 * nghĩa là nhận nuôi toàn bộ chỗ đó — và mất chúng ngay khi cài plugin đầu
 * tiên. Đổi lấy vài selector dài hơn là cái giá rẻ.
 */

/* ---------------------------------------------------------------
 * TRƯỜNG BIỂU MẪU
 * --------------------------------------------------------------- */

.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* Dấu sao bắt buộc: đỏ và có nghĩa với trình đọc màn hình qua `required`. */
.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
	color: var(--c-danger);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-none);
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--c-text);
	transition: border-color var(--dur) var(--ease);
}

.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
	border-color: var(--c-gold);
	outline: none;
}

/* Trường sai định dạng phải nhìn thấy được, không chỉ nằm trong thông báo. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-page form .form-row.woocommerce-invalid input.input-text,
.woocommerce-page form .form-row.woocommerce-invalid select {
	border-color: var(--c-danger);
}

/*
 * Hai trường trên một hàng. WooCommerce đánh dấu bằng `form-row-first` và
 * `form-row-last` với `float` — dùng grid trên phần tử cha và bỏ float đi,
 * vì float không tự cân chiều cao khi một bên có thông báo lỗi còn bên kia
 * thì không.
 */
.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-shipping-fields__field-wrapper,
.woocommerce-page .woocommerce-billing-fields__field-wrapper,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sp-4);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
	float: none;
	width: auto;
}

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.woocommerce .woocommerce-billing-fields__field-wrapper,
	.woocommerce .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-page .woocommerce-billing-fields__field-wrapper,
	.woocommerce-page .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
 * NÚT
 *
 * WooCommerce có nút màu tím mặc định. Ánh xạ `.button` sang dáng nút của
 * theme thay vì sửa từng template — nút của WooCommerce xuất hiện ở hàng
 * chục nơi, kể cả những nơi do plugin khác in ra.
 * --------------------------------------------------------------- */

.woocommerce .button,
.woocommerce-page .button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid var(--c-navy);
	border-radius: var(--r-none);
	background: var(--c-navy);
	color: #fff;
	font-family: var(--f-ui);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.woocommerce .button:hover,
.woocommerce-page .button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--c-gold-ink);
	border-color: var(--c-gold-ink);
	color: #fff;
}

.woocommerce .button:focus-visible,
.woocommerce-page .button:focus-visible {
	outline: 2px solid var(--c-gold-ink);
	outline-offset: 2px;
}

#place_order {
	width: 100%;
}

/* ---------------------------------------------------------------
 * THÔNG BÁO
 *
 * Ba loại thông báo của WooCommerce dùng chung một khối viền xanh. Chúng
 * mang ba ý nghĩa khác nhau — thành công, thông tin, lỗi — nên phải phân
 * biệt được bằng màu, không chỉ bằng chữ.
 * --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-border);
	border-left-width: 3px;
	background: var(--c-mist);
	font-size: var(--fs-sm);
	list-style: none;
}

.woocommerce-message {
	border-left-color: var(--c-gold-ink);
}

.woocommerce-info {
	border-left-color: var(--c-navy);
}

.woocommerce-error {
	border-left-color: var(--c-danger);
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-error li {
	list-style: none;
}

/* Nút hành động trong thông báo đẩy sang phải, không chen giữa dòng chữ. */
.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/*
 * WooCommerce in thông báo ở đầu nội dung trang, tức là bên ngoài mọi
 * `.container` mà theme dựng. Không có bước này thì khối thông báo chạy hết
 * chiều ngang màn hình trong khi phần còn lại của trang thì không.
 */
.woocommerce-notices-wrapper {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding: 0;
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper,
.wc-empty-cart-message,
.woocommerce-no-products-found{
	width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-right: 0;
    padding-left: 0;
}

.notice-center {
    padding-top: 0;
    margin-top: 0;
}

.woocommerce .tabs__panel.prose{
	max-width: 100%;
}

.related-products {
    padding-bottom: 15px;
}

.woocommerce-info {
    gap: 0;
}
/* ---------------------------------------------------------------
 * TÓM TẮT ĐƠN Ở TRANG THANH TOÁN
 * --------------------------------------------------------------- */

.order-summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
	padding: var(--sp-5);
	background: var(--c-mist);
}

.order-lines {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-2);
	border-bottom: 1px solid var(--c-line);
}

.order-line {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
}

.order-line__media {
	flex: 0 0 auto;
	width: 64px;
	/* Không có nó thì bong bóng số lượng bị cắt bởi overflow của .ratio. */
	overflow: visible;
}

/*
 * Bong bóng số lượng nằm đè góc ảnh, thay cho một cột riêng. Cột phải chỉ
 * rộng 400px; thêm một cột nữa cho con số "1" là đánh đổi tồi.
 */
.order-line__qty {
	position: absolute;
	top: 0;
	right: calc(var(--sp-2) * -1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: var(--sp-1);
	background: var(--c-navy);
	color: #fff;
	font-size: var(--fs-2xs);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	border-radius: 50%;
}

.order-line__title {
	font-size: var(--fs-sm);
	line-height: var(--lh-20);
	overflow-wrap: break-word;
}

.order-line__price {
	flex: 0 0 auto;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

/* Khối chọn cổng thanh toán. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: var(--sp-4);
}

.woocommerce-checkout #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	padding: 0;
	border-bottom: 1px solid var(--c-line);
	padding-bottom: var(--sp-4);
	list-style: none;
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	margin: var(--sp-2) 0 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	border-radius: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* Mũi nhọn của bong bóng gốc — bỏ đi cho khớp ngôn ngữ vuông cạnh của trang. */
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-privacy-policy-text {
	font-size: var(--fs-xs);
	line-height: var(--lh-18);
	color: var(--c-text-muted);
}

.woocommerce form .form-row, .woocommerce-page form .form-row {
    gap: 0;
    padding:0 !important
}

.woocommerce-privacy-policy-text p {
    line-height: 17px;
}

.woocommerce-privacy-policy-text {
    padding-top: 10px;
    padding-bottom: 10px;
}
/*
 * Nút chính của WooCommerce mang thêm class `.alt` và CSS gốc tô nó màu tím
 * bằng selector `.woocommerce button.button.alt`. File này nạp sau nhưng độ
 * ưu tiên phải bằng hoặc hơn thì mới thắng — nên nhắc lại `.alt` ở đây thay
 * vì trông chờ vào thứ tự nạp.
 */
.woocommerce .button.alt,
.woocommerce-page .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: #fff;
}

.woocommerce .button.alt:hover,
.woocommerce-page .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--c-gold-ink);
	border-color: var(--c-gold-ink);
	color: #fff;
}

/*
 * Bỏ icon ::before của thông báo.
 *
 * WooCommerce vẽ chúng bằng font icon riêng của nó. Font đó không được nạp ở
 * đây, nên trình duyệt hiện ô vuông ký tự thiếu ngay đầu mỗi thông báo. Dải
 * màu bên trái đã phân biệt được ba loại thông báo rồi.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before {
	content: none;
}

/*
 * Tiêu đề các khối do WooCommerce in ra, đồng bộ với .checkout-section__title.
 *
 * Nhận cả h2 lẫn h3: theme ghi đè hai template checkout để đổi h3 → h2 (xem
 * woocommerce/checkout/form-billing.php), nhưng cổng thanh toán và plugin khác
 * vẫn in h3 vào chính những khối này.
 */
.woocommerce-billing-fields > :is( h2, h3 ),
.woocommerce-shipping-fields > :is( h2, h3 ),
.woocommerce-additional-fields > :is( h2, h3 ),
.woocommerce-checkout :is( h2, h3 )#order_review_heading {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--sp-4);
}

/* ---------------------------------------------------------------
 * TRANG TÀI KHOẢN
 * --------------------------------------------------------------- */

/*
 * Đệm dọc riêng cho trang đăng nhập, hẹp hơn `.section` chung.
 *
 * `.section` dùng 104px trên dưới, đúng nhịp cho một khối nội dung chiếm hết
 * chiều ngang. Ở đây chỉ có một khung 460px giữa trang, nên 104px phía trên
 * cộng với chiều cao tiêu đề trang đẩy ô nhập đầu tiên xuống gần hết màn hình
 * đầu — người dùng phải cuộn mới thấy chỗ để gõ.
 */
.auth-section {
	padding-block: var(--sp-7) var(--sp-section);
}

.auth-grid {
	display: grid;
	gap: var(--sp-6);
}

/*
 * Hai khung cạnh nhau chỉ khi site cho phép đăng ký. Tắt đăng ký thì chỉ còn
 * form đăng nhập, và `.auth-card` tự căn giữa bằng `margin-inline: auto`.
 */
@media (min-width: 861px) {
	.auth-grid--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		max-width: 980px;
		margin-inline: auto;
	}

	.auth-grid--two .auth-card {
		max-width: none;
	}
}

/*
 * `width` phải khai báo tường minh, không thể chỉ dựa vào `max-width`.
 *
 * `.auth-card` nằm trong grid và có `margin-inline: auto`. Theo spec, một
 * grid item có margin `auto` thì KHÔNG được kéo giãn (`stretch` không áp
 * dụng) — nó thu về vừa nội dung rồi mới căn giữa. Kết quả đo được: khung
 * rộng 375px thay vì 460px như `max-width` khai báo, và ô nhập bên trong
 * hẹp theo.
 */
.auth-card {
	width: min(460px, 100%);
}

.auth-card h2 {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-regular);
	margin: 0;
}

.auth-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}

.auth-card__remember {
	margin: 0;
}

.auth-card__lost {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.auth-card__lost:hover {
	color: var(--c-gold-ink);
}

/*
 * Nội dung tab tài khoản. WooCommerce in bảng đơn hàng, form địa chỉ và
 * form đổi mật khẩu vào đây — tất cả đều là markup gốc, nên phần trên của
 * file này đã lo phần nhìn.
 */
.account-panel {
	min-width: 0;
}

.account-panel > h2,
.account-panel > h3 {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-regular);
	margin: 0 0 var(--sp-4);
}

/* Bảng đơn hàng dùng chung dáng với .orders của thiết kế tĩnh. */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	width: 100%;
	font-size: var(--fs-sm);
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th {
	padding: 0 var(--sp-3) var(--sp-3) 0;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td {
	padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line-soft);
	vertical-align: middle;
}

/* Bảng đơn hàng có 6 cột; màn hình hẹp thì cuộn ngang trong khung riêng. */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	display: block;
	overflow-x: auto;
}

/*
 * Bỏ viền quanh form đăng nhập/đăng ký.
 *
 * WooCommerce tự vẽ `border: 1px solid #ddd` quanh `form.login` và
 * `form.register`. Form đã nằm trong `.auth-card` vốn đã có viền, nên để
 * nguyên là hai khung lồng nhau cách nhau đúng một khoảng padding.
 */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-page form.login,
.woocommerce-page form.register {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Form con nằm trong flex column nên margin-bottom của .form-row thành thừa. */
.woocommerce form.login .form-row,
.woocommerce form.register .form-row,
.woocommerce-page form.login .form-row,
.woocommerce-page form.register .form-row {
	margin-bottom: 0;
}

/*
 * Nút hiện/ẩn mật khẩu của WooCommerce chỉ 22×22 — dưới mức tối thiểu 24×24
 * của WCAG 2.5.8, và nó là một nút thật chứ không phải nhãn bấm được ở đâu
 * đó rộng hơn. Nới ra và canh lại cho khớp chiều cao 48px của ô nhập.
 */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	top: 8px;
	right: var(--sp-2);
	color: var(--c-muted);
}

.woocommerce .show-password-input:hover,
.woocommerce-page .show-password-input:hover {
	color: var(--c-text);
}

/* ---------------------------------------------------------------
 * TRANG CHI TIẾT SẢN PHẨM
 *
 * WooCommerce đặt `div.product div.summary { float: right; width: 48% }` —
 * bố cục hai cột bằng float từ thời chưa có grid. Theme dựng cột bằng CSS
 * Grid, và `float` bị bỏ qua với grid item, nhưng `width: 48%` thì KHÔNG:
 * cột mô tả co còn 48% của track 547px, tức 263px, và tên sản phẩm ngắt
 * làm ba dòng trong khi bên cạnh thừa 284px trống.
 *
 * Selector của WooCommerce khớp vì `.product-detail` mang thêm class
 * `product` do `wc_product_class()` in ra.
 * --------------------------------------------------------------- */

/*
 * Selector phải chứa `#content`, không chỉ dài hơn.
 *
 * Quy tắc gốc trong woocommerce-layout.css là:
 *
 *   .woocommerce #content div.product div.summary,
 *   .woocommerce div.product div.summary { float: right; width: 48%; }
 *
 * Nhánh đầu có `#content` — một ID, tức độ ưu tiên (1,3,2). Theme đặt
 * `<main id="content">` nên nhánh đó khớp. Một ID thắng bất kể bao nhiêu
 * class: đã thử `body.woocommerce div.product.product-detail div.summary`
 * ở (0,4,3) và vẫn thua. Phải đối lại bằng chính một ID.
 *
 * Không dùng `!important`: đây là cuộc so độ ưu tiên bình thường, và
 * `!important` sẽ chặn luôn mọi tuỳ biến hợp lệ về sau.
 */
.woocommerce #content div.product.product-detail div.summary,
.woocommerce-page #content div.product.product-detail div.summary,
.woocommerce div.product.product-detail div.summary,
.woocommerce-page div.product.product-detail div.summary {
	float: none;
	width: auto;
	margin-bottom: 0;
}
.woocommerce div.product{
	padding-bottom: 0;
	padding-top: 0
}

.woocommerce div.product form.cart .button {
    min-height: 42px;
}
.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img {
    box-shadow: none;
}

.woocommerce-checkout .cart,
.woocommerce-checkout .breadcrumb{display: none;}
.woocommerce-checkout .page-hero,
.woocommerce-checkout .page-hero {
    padding-top: 0;    border-bottom: none;
}
.woocommerce-cart ..checkout-layout,
.woocommerce-checkout ..checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--sp-8);
    align-items: start;
    padding-block: var(--sp-7) var(--sp-section);
    padding-top: 0;
}
/* ---------------------------------------------------------------
 * VÔ HIỆU BỐ CỤC FLOAT CỦA WOOCOMMERCE
 *
 * `woocommerce-layout.css` dựng bố cục bằng `float` và `width` phần trăm —
 * cách làm từ trước khi có Flexbox và Grid. Theme này dựng mọi bố cục bằng
 * Grid, nên với các khung do theme quản lý, hai bộ quy tắc đánh nhau và
 * WooCommerce thường thắng:
 *
 * - `.woocommerce-MyAccount-navigation { float: left; width: 30% }` → menu
 *   tài khoản co còn 30% của cột 264px, tức 79px, và mỗi mục ngắt ba dòng.
 * - `div.summary { float: right; width: 48% }` → cột mô tả sản phẩm còn 263px.
 *
 * Đây KHÔNG phải hai lỗi riêng lẻ mà là cùng một lỗi ở hai chỗ; trong
 * `woocommerce-layout.css` còn hơn hai chục quy tắc cùng dạng. Nên gom lại
 * xử lý một lần, thay vì đợi từng cái lộ ra.
 *
 * `float` bị bỏ qua với grid item, nhưng `width` thì không — đó là lý do lỗi
 * chỉ biểu hiện ở bề rộng chứ không ở vị trí, và vì thế khó nhận ra.
 *
 * Chỉ nhắm vào những khung mà theme TỰ dựng bố cục. Phần WooCommerce tự lo
 * mà theme chưa đụng tới thì để nguyên float của nó.
 * --------------------------------------------------------------- */

.woocommerce-account .account-layout .woocommerce-MyAccount-navigation,
.woocommerce-account .account-layout .woocommerce-MyAccount-content,
.woocommerce .order-summary #payment .terms,
.woocommerce .order-summary #payment .wc-terms-and-conditions {
	float: none;
	width: auto;
	margin-right: 0;
	margin-left: 0;
}

/* Nút đặt hàng chiếm trọn cột tóm tắt, không thả nổi sang phải. */
.woocommerce .order-summary #payment #place_order {
	float: none;
	width: 100%;
}

/*
 * Trang "Địa chỉ" đặt hai khối thanh toán và giao hàng cạnh nhau bằng
 * `.col2-set` với float 47%. Thay bằng grid: hai khối cao bằng nhau, và
 * không cần clearfix ở phần tử sau.
 */
.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6);
}

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

@media (max-width: 700px) {
	.woocommerce-account .col2-set {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
 * MENU TÀI KHOẢN
 * --------------------------------------------------------------- */

.account-nav ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tên mục là nhãn điều hướng, không phải câu văn — không cho ngắt dòng. */
.account-nav__link {
	white-space: nowrap;
}

/* ===============================================================
 * LUỒNG MUA HÀNG — BO GÓC VÀ MÀU
 *
 * Phản hồi: "nhợt nhạt". Ba nguyên nhân đo được, không phải cảm tính:
 *
 * 1. Viền ô nhập `--c-line` chỉ 1,28:1 trên nền trắng. Dưới xa mức 3:1 mà
 *    WCAG 1.4.11 đòi cho ranh giới của một control — ô nhập gần như không
 *    có hình dạng.
 * 2. Mọi bề mặt phụ dùng `--c-mist` (#F0F3F5), xám ngả lam. Trung tính
 *    nhưng lạnh; cạnh nền trắng thì nó biến mất chứ không tạo lớp.
 * 3. Không có gì bo góc, nên biểu mẫu đọc ra như bảng nhập liệu nội bộ.
 *
 * Ba thứ này chỉ đổi trong luồng mua hàng. Phần biên tập giữ cạnh vuông.
 * =============================================================== */

/* --------------------------------------------------------------
 * Ô NHẬP CỦA WOOCOMMERCE
 * -------------------------------------------------------------- */

.woocommerce-input-wrapper textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	border-color: var(--c-field-border)!important;
	border-radius: var(--r-field)!important;
	transition:
		border-color var(--dur) var(--ease)!important,
		box-shadow var(--dur) var(--ease)!important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
	border-color: var(--c-gold-ink)!important;
	box-shadow: 0 0 0 2px var(--c-gold-ring)!important;
}

.woocommerce-input-wrapper textarea {
    padding-top: 10px!important;
    padding-left: 10px!important;
}

/*
 * Nhãn đậm hơn một bậc. Ở cỡ 12px viết hoa, `--c-text-muted` đọc ra là chữ
 * bị mờ chứ không phải chữ phụ.
 */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.field__label {
	color: var(--c-text)!important;
}

.woocommerce .quantity .qty {
    border: none;
}
/* --------------------------------------------------------------
 * NÚT TRONG LUỒNG MUA HÀNG
 *
 * Bo góc theo ô nhập. Nút vuông cạnh ngay dưới một hàng ô bo góc trông
 * như hai hệ thiết kế khác nhau bị ghép lại.
 * -------------------------------------------------------------- */

.cart-layout .btn,
.checkout-layout .btn,
.order-summary .btn,
.auth-card .btn,
.contact-form .btn,
.notice-center .btn,
.woocommerce .button,
.woocommerce-page .button,
.woocommerce .button.alt,
.woocommerce-page .button.alt {
	border-radius: var(--r-field);
}

/* --------------------------------------------------------------
 * THẺ TÓM TẮT ĐƠN
 * -------------------------------------------------------------- */

.order-summary,
.totals {
	background: var(--c-cream);
	border: 1px solid var(--c-gold-line);
	border-radius: var(--r-field);
}

/*
 * Đường kẻ bên trong thẻ kem phải ấm theo nền.
 *
 * `--c-line` là xám ngả lam; đặt lên nền kem thì vệt lạnh đó lộ ra ngay và
 * làm cả thẻ trông bẩn. Dùng chính sắc vàng pha loãng.
 */
.order-summary .totals__row,
.totals .totals__row,
.order-lines {
	border-color: var(--c-gold-line);
}

.order-summary .totals__row--grand,
.totals .totals__row--grand {
	border-top-color: var(--c-gold-line-strong);
}

/* --------------------------------------------------------------
 * CỔNG THANH TOÁN — trạng thái đang chọn
 *
 * Bản gốc chỉ có một nút radio nhỏ đánh dấu lựa chọn. Ở bước cuối cùng
 * trước khi trả tiền, người mua cần thấy rõ mình đã chọn gì mà không phải
 * soi vào một chấm 12px.
 * -------------------------------------------------------------- */

/*
 * Flex chứ không phải grid. Với grid, ô radio và nhãn của WooCommerce bị xếp
 * chồng thành hai dòng thay vì nằm cạnh nhau — đã đo: cột 1 nở ra bằng bề rộng
 * nhãn (198px) rồi ô radio rơi xuống dòng dưới. Flex + `flex-wrap` cho đúng
 * kết quả cần: radio và nhãn một dòng, khối mô tả xuống dòng riêng.
 */
.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-field-border);
	border-radius: var(--r-field);
	background: var(--c-bg);
	transition:
		border-color var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before {
    display: none;
}
/*
 * Ô radio mặc định của trình duyệt rộng 13px — nhỏ hơn mức 24×24 mà WCAG 2.5.8
 * đòi, và nhỏ hơn đầu ngón tay. Phóng ô lên 20px VÀ cho nhãn trải hết hàng:
 * vùng bấm thật khi đó là cả hàng chứ không phải cái chấm.
 */
.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-gold-ink);
}

/* Khối mô tả cổng thanh toán xuống dòng riêng, chiếm cả bề ngang. */
.woocommerce-checkout #payment div.payment_box {
	flex: 1 0 100%;
	margin-top: var(--sp-3);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: var(--c-gold-ink);
}

/*
 * `:has()` để tô cả hàng theo trạng thái của ô radio bên trong. Không có nó
 * thì phải nhờ JavaScript gắn class, tức là mất trạng thái khi WooCommerce
 * vẽ lại khối thanh toán bằng AJAX — mà nó vẽ lại mỗi lần đổi địa chỉ.
 */
.woocommerce-checkout #payment ul.payment_methods li:has( input:checked ) {
	background: var(--c-cream);
	border-color: var(--c-gold-ink);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-height: 24px;
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-text);
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--r-check);
}

/* --------------------------------------------------------------
 * THÔNG BÁO
 * -------------------------------------------------------------- */

/*
 * Nền kem thay cho nền xám lạnh `--c-mist`. Khối thông báo là thứ ĐẦU TIÊN trên
 * trang thanh toán (dải "Bạn có mã ưu đãi?"), nên nó đặt tông cho cả trang —
 * và một mảng xám xanh nằm trên nền kem của bảng đơn hàng thì lạc quẻ.
 *
 * Ý nghĩa vẫn phân biệt được vì tín hiệu thật nằm ở vạch trái 3px: vàng cho
 * thành công, navy cho thông tin, đỏ cho lỗi. Riêng lỗi giữ thêm nền ám đỏ —
 * đó là trạng thái duy nhất người dùng không được phép lướt qua.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	border-radius: var(--r-field);
	background: var(--c-cream);
	border-color: var(--c-gold-line);
}

.woocommerce-message {
	border-left-color: var(--c-gold-ink);
}

.woocommerce-info {
	border-left-color: var(--c-navy);
}

.woocommerce-error {
	background: var(--c-danger-bg);
	border-color: var(--c-danger-line);
	border-left-color: var(--c-danger);
}

/* --------------------------------------------------------------
 * BẢNG GIỎ HÀNG
 * -------------------------------------------------------------- */

.cart-item__media,
.mini-cart__media {
	border-radius: var(--r-check);
	overflow: hidden;
}

/*
 * Ảnh trong dòng đơn hàng bo góc ở CHÍNH NÓ, không bo ở khung ngoài. Khung
 * ngoài phải giữ `overflow: visible` cho bong bóng số lượng nhô ra góc (xem
 * .order-line__media ở trên); bo góc khung ngoài thì kèm theo cắt, và thứ bị
 * cắt là đúng cái bong bóng đó.
 */
.order-line__media > img {
	border-radius: var(--r-check);
}

/* Khung đăng nhập cùng ngôn ngữ với biểu mẫu bên trong nó. */
.auth-card {
	border-radius: var(--r-field);
}