/* ---------------------------------------------------------------------------
 * Giỏ hàng / Thanh toán / Tài khoản
 *
 * VÌ SAO CẦN FILE NÀY:
 * WooCommerce KHÔNG nạp woocommerce.php của theme cho mấy trang này - chúng là
 * page thường nên chạy qua page.php. Markup thì lấy từ flatsome/woocommerce/
 * cart/cart.php, dựng bằng lưới riêng của Flatsome (.row > .col.large-7 +
 * .cart-collaterals.large-5). Lưới đó chỉ chạy đúng khi CSS của Flatsome nạp
 * đầy đủ; thiếu một phần là bảng giỏ hàng tràn khỏi cột trái và đè lên cột
 * tổng tiền bên phải.
 *
 * File này tự dựng lại lưới bằng CSS Grid và tự lo bảng + nút + ô mã giảm giá,
 * nên trang hiển thị đúng dù CSS theme cha có nạp hay không.
 * ------------------------------------------------------------------------- */

/* --- Khung trang ---------------------------------------------------------- */
body.ducphat-site.woocommerce-cart .dp-wp-page,
body.ducphat-site.woocommerce-checkout .dp-wp-page,
body.ducphat-site.woocommerce-account .dp-wp-page {
	max-width: 1280px !important;
}

body.ducphat-site.woocommerce-cart .dp-wp-page > h1,
body.ducphat-site.woocommerce-checkout .dp-wp-page > h1,
body.ducphat-site.woocommerce-account .dp-wp-page > h1 {
	margin: 0 0 28px;
	font-size: clamp(26px, 3vw, 36px);
}

/* --- Lưới 2 cột: thay hẳn lưới .row/.col của Flatsome --------------------- */
body.ducphat-site.woocommerce-cart .woocommerce.row,
body.ducphat-site.woocommerce-checkout .woocommerce.row,
body.ducphat-site.woocommerce-checkout form.checkout > .row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px;
	margin: 0 !important;
	max-width: none;
}

/* Vô hiệu hoá chiều rộng / padding mà lưới Flatsome đặt cho .col,
   để ô lưới ở trên quyết định kích thước. */
body.ducphat-site.woocommerce-cart .woocommerce.row > .col,
body.ducphat-site.woocommerce-checkout .woocommerce.row > .col,
body.ducphat-site.woocommerce-checkout form.checkout > .row > .col {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* --- Bảng giỏ hàng -------------------------------------------------------- */
/*
 * VÌ SAO KHÔNG DÙNG BỐ CỤC BẢNG:
 * thead của flatsome/woocommerce/cart/cart.php dùng <th colspan="3"> gộp 3 cột
 * đầu. Thuật toán table-layout:auto lấy chiều rộng của ô gộp đó rồi chia lại
 * cho 3 cột, nên width đặt trên từng ô ở tbody bị bỏ qua: cột "xoá" phình ra
 * ~470px còn cột tên sản phẩm co lại 66px, và cả bảng đòi 966px trong khi cột
 * trái chỉ rộng 723px - đó chính là lúc bảng tràn ra đè lên cột tổng tiền.
 * Không có cách nào ép lại bằng CSS vì colspan nằm trong markup của theme cha.
 *
 * Nên bảng được chuyển sang CSS Grid: mỗi dòng là một lưới 6 cột cố định,
 * không còn phụ thuộc thuật toán của <table>. Nhãn cột lấy từ data-title mà
 * template của Flatsome đã có sẵn.
 */
body.ducphat-site .cart-wrapper {
	overflow-x: visible;
}

/* Bảng giỏ hàng (chỉ bảng trong form, không đụng bảng tổng tiền) */
body.ducphat-site .woocommerce-cart-form table.shop_table,
body.ducphat-site .woocommerce-cart-form table.shop_table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}

body.ducphat-site .woocommerce-cart-form table.shop_table {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	font-size: 14px;
}

/* Hàng tiêu đề: cũng chuyển sang grid. Vì không còn là <table> nên colspan
   không còn tác dụng - dùng grid-column để ô "Sản phẩm" trải 3 cột đầu. */
body.ducphat-site .woocommerce-cart-form table.shop_table thead {
	display: block;
}

body.ducphat-site .woocommerce-cart-form thead tr,
body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 36px 72px minmax(0, 1fr) 100px 124px 104px;
	align-items: center;
	gap: 0 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
}

body.ducphat-site .woocommerce-cart-form thead tr {
	background: #f3f8f5;
	padding-top: 12px;
	padding-bottom: 12px;
}

body.ducphat-site .woocommerce-cart-form thead th {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-align: left;
}

body.ducphat-site .woocommerce-cart-form thead th.product-name {
	grid-column: 1 / 4;
}

body.ducphat-site .woocommerce-cart-form thead th.product-price,
body.ducphat-site .woocommerce-cart-form thead th.product-subtotal {
	text-align: right;
}

body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item > td {
	display: block;
	padding: 0;
	border: 0;
	min-width: 0;
	text-align: left;
	vertical-align: middle;
}

body.ducphat-site .woocommerce-cart-form table.shop_table .product-remove {
	text-align: center;
}

body.ducphat-site table.shop_table .product-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}

body.ducphat-site table.shop_table .product-remove .remove:hover {
	background: #c0392b;
	border-color: #c0392b;
	color: #fff;
}

body.ducphat-site table.shop_table .product-thumbnail img {
	width: 62px;
	height: 62px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--line);
	display: block;
}

body.ducphat-site table.shop_table .product-name a {
	color: var(--navy);
	font-weight: 700;
	line-height: 1.5;
}

body.ducphat-site table.shop_table .product-name a:hover {
	color: var(--teal);
}

body.ducphat-site .woocommerce-cart-form .product-price,
body.ducphat-site .woocommerce-cart-form .product-subtotal {
	white-space: nowrap;
	font-weight: 700;
	color: var(--navy);
	text-align: right;
}

/* Nhãn cột, lấy từ data-title của template Flatsome. Ẩn trên màn rộng vì đã
   có hàng tiêu đề giả ở dưới; hiện lại khi mỗi dòng xếp dọc. */
body.ducphat-site .woocommerce-cart-form td[data-title]::before {
	content: attr(data-title);
	display: none;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}

/* Hàng tiêu đề giả, dựng bằng CSS trên chính dòng sản phẩm đầu tiên */
body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item:first-child {
	border-top: 0;
}

/* Ẩn dòng giá rút gọn mà Flatsome chỉ dành cho điện thoại */
body.ducphat-site .mobile-product-price {
	display: none;
}

/* --- Ô số lượng ----------------------------------------------------------- */
body.ducphat-site .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

body.ducphat-site .quantity input.qty {
	width: 46px;
	min-height: 38px;
	border: 0;
	text-align: center;
	font-weight: 700;
	color: var(--navy);
	background: #fff;
	-moz-appearance: textfield;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

body.ducphat-site .quantity input.qty::-webkit-outer-spin-button,
body.ducphat-site .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.ducphat-site .quantity .minus,
body.ducphat-site .quantity .plus,
body.ducphat-site .quantity button {
	width: 36px;
	border: 0;
	background: #f3f8f5;
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

body.ducphat-site .quantity .minus:hover,
body.ducphat-site .quantity .plus:hover,
body.ducphat-site .quantity button:hover {
	background: var(--teal);
	color: #fff;
}

/* --- Hàng nút dưới bảng --------------------------------------------------- */
/* Hàng chứa nút nằm cuối tbody. Dùng cả :last-child lẫn :has() để chạy được
   trên trình duyệt cũ chưa hỗ trợ :has(). */
body.ducphat-site .woocommerce-cart-form table.shop_table tbody > tr:last-child,
body.ducphat-site .woocommerce-cart-form table.shop_table tbody > tr:has(> td.actions),
body.ducphat-site .woocommerce-cart-form td.actions {
	display: block;
	width: 100%;
}

body.ducphat-site .woocommerce-cart-form td.actions {
	background: #f9fbfa;
	padding: 18px 16px;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

body.ducphat-site .woocommerce-cart-form td.actions .button,
body.ducphat-site .woocommerce-cart-form td.actions input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px !important;
	border-radius: 8px !important;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	float: none !important;
	margin: 0;
}

body.ducphat-site .woocommerce-cart-form td.actions .coupon {
	display: flex;
	gap: 8px;
	margin: 0;
}

/* --- Cột tổng tiền -------------------------------------------------------- */
body.ducphat-site .cart-collaterals .cart_totals,
body.ducphat-site .cart-collaterals .cart-sidebar {
	width: 100% !important;
	float: none !important;
}

body.ducphat-site .cart_totals {
	background: #f9fbfa;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 24px;
}

body.ducphat-site .cart_totals h2,
body.ducphat-site .cart-collaterals h2 {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--navy);
}

body.ducphat-site .cart_totals table.shop_table {
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.ducphat-site .cart_totals table.shop_table th,
body.ducphat-site .cart_totals table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	font-size: 13px;
}

body.ducphat-site .cart_totals table.shop_table th {
	font-weight: 600;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	width: 45%;
}

body.ducphat-site .cart_totals table.shop_table td {
	text-align: right;
	font-weight: 700;
	color: var(--navy);
}

body.ducphat-site .cart_totals tr.order-total th,
body.ducphat-site .cart_totals tr.order-total td {
	border-bottom: 0;
	font-size: 16px;
	color: var(--navy);
	font-weight: 800;
	padding-top: 16px;
}

body.ducphat-site .cart_totals .woocommerce-shipping-methods,
body.ducphat-site .cart_totals .shipping__inner {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

body.ducphat-site .cart_totals .woocommerce-shipping-destination,
body.ducphat-site .cart_totals .shipping-calculator-button {
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

/* Nút tiến hành thanh toán */
body.ducphat-site .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

body.ducphat-site .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	min-height: 52px;
	line-height: 52px;
	padding: 0 20px !important;
	border-radius: 8px !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0;
}

/* --- Ô mã giảm giá -------------------------------------------------------- */
body.ducphat-site .checkout_coupon,
body.ducphat-site .cart-sidebar .coupon {
	margin-top: 20px;
}

body.ducphat-site .cart-sidebar .widget-title,
body.ducphat-site .checkout_coupon h3 {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 10px;
}

body.ducphat-site .checkout_coupon input.input-text,
body.ducphat-site .cart-sidebar .coupon input.input-text {
	width: 100%;
	min-height: 46px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0 14px;
	margin: 0 0 10px;
	background: #fff;
	box-shadow: none;
}

body.ducphat-site .checkout_coupon input[type="submit"],
body.ducphat-site .cart-sidebar .coupon input[type="submit"] {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 8px !important;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .4px;
	text-transform: uppercase;
	cursor: pointer;
	margin: 0;
}

/* --- Giỏ hàng trống ------------------------------------------------------- */
body.ducphat-site .cart-empty,
body.ducphat-site .wc-empty-cart-message {
	padding: 30px;
	background: var(--bg);
	border-radius: 10px;
	text-align: center;
	font-size: 15px;
	color: var(--ink);
}

body.ducphat-site .return-to-shop {
	text-align: center;
	margin-top: 18px;
}

/* --- Thanh toán ----------------------------------------------------------- */
body.ducphat-site.woocommerce-checkout .woocommerce-billing-fields h3,
body.ducphat-site.woocommerce-checkout #order_review_heading {
	font-size: 16px;
	color: var(--navy);
	margin: 0 0 16px;
}

body.ducphat-site.woocommerce-checkout .woocommerce-checkout-review-order {
	background: #f9fbfa;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 24px;
}

body.ducphat-site.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 52px;
	border-radius: 8px !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	border: 0;
	cursor: pointer;
}

/* --- Màn hình hẹp --------------------------------------------------------- */
@media (max-width: 991px) {
	body.ducphat-site.woocommerce-cart .woocommerce.row,
	body.ducphat-site.woocommerce-checkout .woocommerce.row,
	body.ducphat-site.woocommerce-checkout form.checkout > .row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* Màn hẹp: mỗi dòng sản phẩm xếp thành thẻ 2 cột (ảnh + thông tin),
   nhãn cột lấy lại từ data-title vì hàng tiêu đề bị ẩn. */
@media (max-width: 780px) {
	/* Phải đủ "nặng" như rule gốc ở trên, nếu không thì thead vẫn hiện */
	body.ducphat-site .woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 72px minmax(0, 1fr) 104px;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"thumb qty    subtotal";
		gap: 8px 12px;
		padding: 16px;
	}

	body.ducphat-site .woocommerce-cart-form .product-remove {
		text-align: right;
	}

	body.ducphat-site .woocommerce-cart-form .product-thumbnail { grid-area: thumb; align-self: start; }
	body.ducphat-site .woocommerce-cart-form .product-name      { grid-area: name; }
	body.ducphat-site .woocommerce-cart-form .product-remove    { grid-area: remove; }
	body.ducphat-site .woocommerce-cart-form .product-price     { grid-area: price; text-align: left; }
	body.ducphat-site .woocommerce-cart-form .product-quantity  { grid-area: qty; }
	body.ducphat-site .woocommerce-cart-form .product-subtotal  { grid-area: subtotal; align-self: center; }

	body.ducphat-site .woocommerce-cart-form td[data-title]::before {
		display: block;
	}

	body.ducphat-site .woocommerce-cart-form .product-name[data-title]::before {
		display: none;
	}

	body.ducphat-site .woocommerce-cart-form td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.ducphat-site .woocommerce-cart-form td.actions .button,
	body.ducphat-site .woocommerce-cart-form td.actions input.button {
		width: 100%;
	}
}

@media (max-width: 420px) {
	body.ducphat-site .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 56px minmax(0, 1fr) 96px;
		padding: 14px 12px;
		gap: 8px;
	}

	body.ducphat-site table.shop_table .product-thumbnail img {
		width: 56px;
		height: 56px;
	}
}