/*
 * Giỏ hàng & Thanh toán — giao diện classic (shortcode).
 *
 * Theme đi hướng classic hoàn toàn: không dùng Cart/Checkout Block, nên toàn bộ
 * style của wc-blocks bị gỡ (xem inc/classic-editor.php). File này thay thế,
 * bám đúng token thiết kế của theme lấy từ style.css:
 *
 *   --color-pri  #0b181d      nút phụ / chữ
 *   --color-sec  #eaf57d      nút chính
 *   .btn         border-radius 100rem; padding 1.2rem 1.6rem;
 *                font-size 1.6rem; font-weight 500; gap .8rem
 *
 * Mục tiêu là HÀI HOÀ với thiết kế, không phải sao chép trang mẫu.
 */

/* ---------------------------------------------------------------------------
 * Trạng thái đang xử lý của nút thêm vào giỏ
 *
 * Markup và JS đã sẵn sàng từ trước: nút mang class `is-loading-area`, nội dung
 * bên trong bọc trong `.loading-area-text`, và modules/cart.js thêm/bớt class
 * `.loading` quanh lời gọi AJAX. Nhưng CSS cho hai class đó KHÔNG tồn tại
 * trong bất kỳ file nào tải về được — nên bấm nút xong không có phản hồi gì,
 * khách không biết hệ thống đang chạy.
 *
 * Dựng lại theo đúng khuôn của loading-btn.css có sẵn: mờ nút, chặn bấm tiếp,
 * và quay icon-loading-ring.svg ở giữa.
 * ------------------------------------------------------------------------ */

.is-loading-area.loading {
	position: relative;
	pointer-events: none;
}

/* Ẩn chữ/icon nhưng GIỮ chỗ, để nút không co lại khi đang chạy. */
.is-loading-area.loading .loading-area-text {
	opacity: 0;
	visibility: hidden;
}

/*
 * DÙNG ::before, KHÔNG dùng ::after.
 *
 * style.css đã chiếm .btn::after cho hiệu ứng trượt nền khi hover
 * (width: 0; height: 100%; background: var(--color-pri)). Đặt spinner vào
 * ::after thì hai rule trộn vào nhau — đo được 5,75 x 41,79px thay vì 22x22,
 * vì nó ăn phải height: 100% của nút. loading-btn.css sẵn có cũng dùng
 * ::before, đây là quy ước của theme.
 */
.is-loading-area.loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.2rem;
	height: 2.2rem;
	margin: -1.1rem 0 0 -1.1rem;
	background: url(../images/icon-loading-ring.svg) center center / contain no-repeat;
	animation: cafune-spin 0.7s linear infinite;
	z-index: 3;
}

/* Nút nền tối (Mua ngay) cần vòng quay sáng mới thấy. */
.is-loading-area.loading.second::before,
.is-loading-area.loading.alt.second::before {
	filter: invert(1) brightness(2);
}

@keyframes cafune-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/*
 * Card sản phẩm trong vòng lặp: nút gộp giá + icon giỏ. Khi đang thêm, ẩn cả
 * cụm giá lẫn icon rồi hiện vòng quay — cùng cơ chế, chỉ khác kích thước.
 */
.btn-link .pro-btn-add-to-cart.loading::before {
	width: 1.8rem;
	height: 1.8rem;
	margin: -0.9rem 0 0 -0.9rem;
}

/* ---------------------------------------------------------------------------
 * Vô hiệu hoá các ghi đè cũ trong mona-custom.css
 *
 * File đó có 26 rule cho giỏ/thanh toán với 69 khai báo !important, viết cho
 * bố cục checkout CŨ của site gốc. Chỉ gỡ những chỗ gây lệch thấy được — phần
 * còn lại để nguyên, tránh đụng vào thứ mình chưa hiểu hết.
 *
 * Dùng !important ở đây là bắt buộc: bên kia cũng !important và độ ưu tiên cao
 * (html body.woocommerce-checkout ...).
 * ------------------------------------------------------------------------ */

html body.woocommerce-checkout .woocommerce-billing-fields .form-row input.input-text,
html body.woocommerce-checkout .woocommerce-billing-fields p#billing_email_field input.input-text {
	/* Bản gốc ép #8ac53e — màu không có trong bảng màu theme. */
	border: 0.1rem solid var(--woo-border, #e4e7ec) !important;
	border-radius: var(--woo-radius, 1.2rem) !important;
}

html body.woocommerce-checkout .woocommerce-billing-fields .form-row input.input-text:focus {
	border-color: var(--color-pri) !important;
}

/* ---------------------------------------------------------------------------
 * Biến cục bộ — đổi ở đây là đổi toàn bộ giỏ/thanh toán
 * ------------------------------------------------------------------------ */

.woocommerce-cart .main,
.woocommerce-checkout .main {
	--woo-radius: 1.2rem;
	--woo-border: #e4e7ec;
	--woo-muted: #667085;
	--woo-bg-soft: #f9fafb;
	--woo-gap: 2.4rem;
}

.woocommerce-cart .main .container,
.woocommerce-checkout .main .container {
	padding-top: var(--pd-sc, 4rem);
	padding-bottom: var(--pd-sc, 4rem);
}

/* ---------------------------------------------------------------------------
 * Nút — dùng lại hình dáng .btn của theme
 * ------------------------------------------------------------------------ */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	padding: 1.2rem 2.4rem;
	min-height: 4.8rem;
	border: 0;
	border-radius: 100rem;
	background: var(--color-sec);
	color: var(--color-pri);
	font-family: var(--font-pri);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.35s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--color-pri);
	color: var(--color-white);
}

/* Nút chính của luồng mua: sang thanh toán & đặt hàng — chiếm hết chiều ngang. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	width: 100%;
	min-height: 5.6rem;
	font-size: 1.8rem;
}

/* Nút phụ (cập nhật giỏ, áp mã) — nền tối, chữ trắng, giống .btn.second. */
.woocommerce button[name="update_cart"],
.woocommerce .coupon button.button {
	background: var(--color-pri);
	color: var(--color-white);
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce .coupon button.button:hover {
	background: var(--color-sec);
	color: var(--color-pri);
}

/*
 * Trạng thái disabled của "Cập nhật giỏ hàng".
 *
 * Không dùng opacity: nền tối + chữ trắng mờ đi thành một khối xám đặc không
 * đọc được chữ. Đổi hẳn sang nền nhạt + chữ xám để vẫn thấy nhãn.
 */
.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"]:disabled:hover {
	background: var(--woo-bg-soft, #f9fafb);
	color: var(--woo-muted, #667085);
	border: 0.1rem solid var(--woo-border, #e4e7ec);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Ô nhập liệu
 * ------------------------------------------------------------------------ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce table.cart td.actions .coupon .input-text {
	width: 100%;
	min-height: 4.8rem;
	padding: 1.2rem 1.6rem;
	border: 0.1rem solid var(--woo-border);
	border-radius: var(--woo-radius);
	background: var(--color-white);
	font-family: var(--font-sec);
	font-size: 1.5rem;
	color: var(--color-pri);
	transition: border-color 0.25s ease;
}

.woocommerce form .form-row textarea {
	min-height: 12rem;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 0;
	border-color: var(--color-pri);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--color-pri);
}

.woocommerce form .form-row .required {
	color: #d92d20;
	text-decoration: none;
}

/* select2 (WooCommerce dùng cho tỉnh/thành) cho khớp chiều cao ô nhập. */
.woocommerce .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 1.2rem;
}

/* ---------------------------------------------------------------------------
 * Bảng giỏ hàng
 * ------------------------------------------------------------------------ */

.woocommerce table.shop_table {
	width: 100%;
	border: 0.1rem solid var(--woo-border);
	border-radius: var(--woo-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1.6rem;
	border: 0;
	border-bottom: 0.1rem solid var(--woo-border);
	font-size: 1.5rem;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--woo-bg-soft);
	font-family: var(--font-pri);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--woo-muted);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce table.cart img {
	width: 7.2rem;
	border-radius: 0.8rem;
}

.woocommerce table.cart .product-name a {
	font-weight: 500;
	color: var(--color-pri);
}

.woocommerce table.cart .product-name a:hover {
	text-decoration: underline;
}

/* Nút xoá dòng: vòng tròn nhỏ, không phải chữ "×" trần. */
.woocommerce table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: var(--woo-bg-soft);
	color: var(--woo-muted);
	font-size: 1.8rem;
	line-height: 1;
	transition: 0.25s ease;
}

.woocommerce table.cart a.remove:hover {
	background: #fee4e2;
	color: #d92d20;
}

/* Ô số lượng trong giỏ. */
.woocommerce .quantity .qty {
	width: 7.2rem;
	min-height: 4.4rem;
	padding: 0.8rem;
	border: 0.1rem solid var(--woo-border);
	border-radius: 100rem;
	text-align: center;
	font-size: 1.5rem;
}

/* Hàng "Áp dụng mã giảm giá" + "Cập nhật giỏ hàng". */
.woocommerce table.cart td.actions {
	padding: 1.6rem;
	background: var(--woo-bg-soft);
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	float: none;
	margin-bottom: 1.2rem;
}

.woocommerce table.cart td.actions .coupon .input-text {
	max-width: 28rem;
	min-height: 4.8rem;
}

/* ---------------------------------------------------------------------------
 * Khối tổng tiền / tóm tắt đơn
 * ------------------------------------------------------------------------ */

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 2.4rem;
	border: 0.1rem solid var(--woo-border);
	border-radius: var(--woo-radius);
	background: var(--woo-bg-soft);
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	margin-bottom: 1.6rem;
	font-family: var(--font-pri);
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-pri);
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 1.2rem 0;
	background: transparent;
	border-bottom: 0.1rem dashed var(--woo-border);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td,
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-bottom: 0;
	padding-top: 1.6rem;
	font-size: 1.8rem;
	font-weight: 600;
}

.woocommerce .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--color-pri);
}

.btn-link a:hover .woocommerce-Price-amount {
    color: #fff!important;
}
/* ---------------------------------------------------------------------------
 * Thanh toán: bố cục 2 cột
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1fr 40rem;
		/*
		 * Hàng 1 co theo tiêu đề, hàng 2 nhận phần còn lại. Không khai thì hàng
		 * 1 bị kéo cao theo #customer_details và tiêu đề "Đơn hàng của bạn"
		 * cách hộp tóm tắt một khoảng trống ~127px.
		 */
		grid-template-rows: auto 1fr;
		gap: 0 var(--woo-gap);
		align-items: start;
	}

	/*
	 * PHẢI chỉ định grid-row rõ ràng.
	 *
	 * Chỉ đặt grid-column thì trình duyệt tự xếp: #customer_details chiếm hàng
	 * 1 (rất cao), #order_review_heading vào hàng 1 cột 2, còn #order_review bị
	 * đẩy xuống hàng 2 — tiêu đề nằm trên cùng mà hộp tóm tắt rơi tận cuối
	 * trang, chừa một khoảng trống lớn.
	 */
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}

	/* Tóm tắt đơn dính theo khi cuộn — đơn dài vẫn thấy nút đặt hàng. */
	.woocommerce-checkout form.checkout #order_review {
		position: sticky;
		top: calc(var(--size-hd, 8rem) + 2rem);
	}

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		width: 100%;
		float: none;
	}
}

.woocommerce-checkout h3 {
	margin-bottom: 1.6rem;
	font-family: var(--font-pri);
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-pri);
}

/* Phương thức thanh toán. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	border-top: 0.1rem solid var(--woo-border);
	margin-top: 1.6rem;
	padding-top: 1.6rem;
}

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

.woocommerce-checkout #payment ul.payment_methods label {
	font-weight: 500;
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	margin-top: 0.8rem;
	padding: 1.2rem 1.6rem;
	border-radius: var(--woo-radius);
	background: var(--color-white);
	font-size: 1.4rem;
	color: var(--woo-muted);
}

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

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: var(--woo-gap);
	padding: 1.6rem 2rem;
	border: 0;
	border-left: 0.4rem solid var(--color-pri);
	border-radius: var(--woo-radius);
	background: var(--woo-bg-soft);
	font-size: 1.5rem;
	color: var(--color-pri);
}

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

.woocommerce-message {
	border-left-color: var(--color-sec);
}

.woocommerce-error {
	border-left-color: #d92d20;
	background: #fef3f2;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* Giỏ rỗng. */
.woocommerce .cart-empty {
	margin-bottom: 1.6rem;
	font-size: 1.8rem;
	text-align: center;
}

.woocommerce .return-to-shop {
	display: flex;
	justify-content: center;
}