/* ==========================================================================
   RSC Product Customizer — Frontend Styles
   ========================================================================== */

:root {
	--rsc-green: #183059;
	/* Navy Blue */
	--rsc-green-dark: #10213d;
	--rsc-green-bg: #eef1f6;
	/* Soft blue-gray */
	--rsc-text: #183059;
	--rsc-text-light: #5a6b8c;
	--rsc-border: #d6dbe5;
	--rsc-radius: 12px;
	--rsc-shadow: 0 4px 15px rgba(24, 48, 89, 0.05);
	--rsc-transition: 0.3s ease;
	--rsc-accent: #B85C5C;
	/* Dusty Rose */
}

/* ── Wrapper ── */
.rsc-customizer-wrap {
	background: #ffffff;
	/* Cream Linen */
	border: 1px solid var(--rsc-border);
	border-radius: var(--rsc-radius);
	padding: 28px;
	margin: 0 0 24px 0;
	width: 100%;
	box-shadow: var(--rsc-shadow);
}

/* ── Header ── */
.rsc-customizer-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--rsc-green-bg);
}

.rsc-customizer-header svg {
	color: var(--rsc-green);
	flex-shrink: 0;
}

.rsc-customizer-header span {
	font-size: 18px;
	font-weight: 700;
	color: var(--rsc-text);
	letter-spacing: 0.5px;
	font-family: 'Inter', sans-serif;
}

/* ── Form Flex Layout ── */
.rsc-fields-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.rsc-field {
	margin-bottom: 0;
	flex: 1 1 calc(50% - 10px);
	min-width: 250px;
}

.rsc-field[data-type="textarea"],
.rsc-field[data-type="file"],
.rsc-field[data-type="image_select"] {
	flex: 1 1 100%;
}

.rsc-field-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rsc-text);
	margin-bottom: 10px;
	font-family: 'Inter', sans-serif;
}

.rsc-required {
	color: var(--rsc-accent);
	font-weight: 700;
}

.rsc-fee-badge {
	font-size: 11px;
	font-weight: 600;
	background: var(--rsc-green-bg);
	color: var(--rsc-green-dark);
	padding: 2px 8px;
	border-radius: 20px;
	margin-left: 4px;
}

/* ── Text Input ── */
.rsc-input-wrap {
	position: relative;
}

.rsc-customizer-wrap .rsc-text-input {
	width: 100%;
	padding: 20px 10px !important;
	border: 1px solid var(--rsc-border) !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-family: inherit;
	color: var(--rsc-text);
	background: #fff;
	outline: none;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
	transition: border-color var(--rsc-transition), box-shadow var(--rsc-transition);
}

.rsc-customizer-wrap .rsc-text-input::placeholder {
	font-size: 12px !important;
	color: #a0aabf !important;
}

.rsc-text-input:focus {
	border-color: var(--rsc-accent);
	box-shadow: 0 0 0 4px rgba(184, 92, 92, 0.15);
}

.rsc-text-input.rsc-error {
	border-color: #e53935;
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.rsc-char-count {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #999;
	pointer-events: none;
}

.rsc-char-count.rsc-near-limit {
	color: #ff9800;
}

.rsc-char-count.rsc-at-limit {
	color: var(--rsc-accent);
	font-weight: 600;
}

.rsc-textarea-wrap .rsc-char-count {
	top: auto;
	bottom: 12px;
	transform: none;
	background: #fff;
	/* To prevent text from showing underneath it */
	padding: 0 4px;
	border-radius: 4px;
}

/* ── Upload Dropzone ── */
.rsc-upload-wrap {
	position: relative;
}

.rsc-upload-dropzone {
	border: 2px dashed var(--rsc-border);
	border-radius: 8px;
	background: #fff;
	text-align: center;
	padding: 16px 20px;
	transition: all var(--rsc-transition);
	cursor: pointer;
}

.rsc-upload-dropzone:hover,
.rsc-upload-dropzone.rsc-drag-over {
	border-color: var(--rsc-green);
	background: var(--rsc-green-bg);
}

.rsc-upload-idle svg {
	color: var(--rsc-green);
	margin-bottom: 8px;
}

.rsc-upload-idle p {
	font-size: 14px;
	color: var(--rsc-text-light);
	margin: 0 0 4px;
}

.rsc-upload-idle span {
	font-size: 12px;
	color: #999;
	display: block;
	margin-bottom: 8px;
}

.rsc-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	background: var(--rsc-green);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--rsc-transition);
}

.rsc-upload-btn:hover {
	background: var(--rsc-green-dark);
}

.rsc-upload-hint {
	font-size: 11px !important;
	color: #bbb !important;
	margin-top: 8px !important;
}

/* ── Uploaded Items List & Grid (Multi-upload) ── */
.rsc-uploaded-items-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.rsc-uploaded-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--rsc-border);
	padding: 12px;
	border-radius: 8px;
	position: relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.rsc-item-thumb {
	width: 64px;
	height: 64px;
	border-radius: 6px;
	background-color: #f9f9f9;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #e5e5e5;
	flex-shrink: 0;
}

.rsc-item-inputs {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rsc-note-input {
	width: 100%;
	border: none !important;
	border-bottom: 2px solid #eaeaea !important;
	background: transparent !important;
	padding: 4px 8px !important;
	border-radius: 0 !important;
	font-size: 13px !important;
	box-shadow: none !important;
	transition: border-color var(--rsc-transition);
}

.rsc-note-input:focus {
	border-bottom-color: var(--rsc-green) !important;
	outline: none !important;
}

.rsc-item-remove {
	position: absolute !important;
	top: -6px !important;
	right: -6px !important;
	width: 24px !important;
	height: 24px !important;
	min-height: 0 !important;
	max-height: 24px !important;
	min-width: 0 !important;
	max-width: 24px !important;
	background: #e53935 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all var(--rsc-transition) !important;
	box-shadow: 0 2px 6px rgba(229, 57, 53, 0.3) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.rsc-item-remove:hover {
	background: #c62828 !important;
	transform: scale(1.1) !important;
}

.rsc-error-border {
	border-color: #e53935 !important;
	background-color: #ffebee !important;
}

/* ── Custom Modal Popup ── */
.rsc-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

.rsc-modal-overlay.rsc-show {
	opacity: 1;
	visibility: visible;
}

.rsc-modal-content {
	background: #fff;
	padding: 16px;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.3s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rsc-modal-overlay.rsc-show .rsc-modal-content {
	transform: scale(1);
}

.rsc-modal-close {
	position: absolute;
	top: 2px;
	right: 2px;
	background: #e53935 !important;
	color: #fff !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	min-width: 32px !important;
	border-radius: 4px !important;
	/* Vuông vắn hơn */
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	/* Khắc phục Flatsome ghi đè padding */
	margin: 0 !important;
}

.rsc-modal-close:hover {
	background: #c62828;
}

.rsc-modal-img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	display: block;
	border-radius: 4px;
	background: #f9f9f9;
}

.rsc-modal-note {
	margin: 12px 0 0 0;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	color: #333;
}

/* ── Upload Progress ── */
.rsc-upload-progress {
	padding: 20px;
	text-align: center;
}

.rsc-progress-bar {
	width: 100%;
	height: 6px;
	background: var(--rsc-border);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.rsc-progress-fill {
	height: 100%;
	width: 0;
	background: var(--rsc-green);
	border-radius: 3px;
	transition: width 0.3s ease;
}

.rsc-progress-text {
	font-size: 13px;
	color: var(--rsc-text-light);
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.rsc-field {
		flex: 1 1 100%;
	}

	.rsc-customizer-wrap {
		padding: 16px;
		margin: 16px 0;
	}

	.rsc-customizer-header span {
		font-size: 14px;
	}

	.rsc-upload-dropzone {
		padding: 20px 16px;
	}
}

/* ── Checkout Order Review — custom data below product name ── */
.rsc-checkout-meta {
	list-style: none !important;
	margin: 6px 0 0 0 !important;
	padding: 0 !important;
}

.rsc-checkout-meta li {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: #555 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rsc-checkout-meta-key {
	font-weight: 600 !important;
	color: #333 !important;
}

.rsc-checkout-meta-value {
	color: #666 !important;
}

/* ── Image Select Field ── */
.rsc-image-choice-label {
	position: relative;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	transition: all 0.2s ease;
	display: inline-block;
}

.rsc-image-choice-label:hover {
	border-color: #ddd;
	transform: translateY(-2px);
}

.rsc-image-choice-label input:checked~img {
	opacity: 0.8;
}

.rsc-image-choice-label input:checked~.rsc-check-icon {
	display: block !important;
}

.rsc-image-choice-label input:focus-visible~img {
	box-shadow: 0 0 0 3px rgba(30, 114, 40, 0.4);
}

/* We add a green border wrapper when selected */
.rsc-image-choice-label input:checked+img {
	outline: 3px solid var(--rsc-green);
	outline-offset: -3px;
}

/* -- Cart & Checkout Images -- */
.rsc-cart-preview-img {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	border-radius: 4px !important;
	vertical-align: middle !important;
}

.rsc-checkout-preview-img {
	width: 32px !important;
	height: 32px !important;
	object-fit: contain !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	border-radius: 4px !important;
	vertical-align: middle !important;
}

.rsc-cart-preview-wrap {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* ──────────────────────────────────────────────
   Block Cart / Checkout — "card" layout for item meta.

   Real markup (Flatsome + WooCommerce blocks):
     div.wc-block-components-product-metadata        ← card (.rsc-meta-grid)
       div.wc-block-components-product-details       ← custom fields (.rsc-cf-list)
         span.__<slug>.rsc-meta-row
           span.__name  span.__value  span[aria-hidden]" / "
       div.wc-block-components-product-details       ← variations (.rsc-attr-list)
         span.__<slug>.rsc-meta-attr ...

   Classes are added by rsc-customizer.js (classList only, no DOM restructure → safe
   against React re-renders).
   ────────────────────────────────────────────── */
.wc-block-components-product-metadata.rsc-meta-grid {
	margin-top: 2px !important;
	padding: 5px;
	border: 1px solid #e6e6e6 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #ffffff9e !important;
}

/* Hide the " / " separators between fields. */
.rsc-meta-grid .wc-block-components-product-details [aria-hidden="true"] {
	display: none !important;
}

/* ---- Custom fields: full-width rows with dividers ---- */
.rsc-meta-grid .rsc-cf-list {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	border-top: 1px solid #eee !important;
	font-size: 14px !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row:first-child {
	border-top: none !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row .wc-block-components-product-details__name {
	flex: 0 0 auto !important;
	width: 130px !important;
	min-width: 130px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
	font-style: normal !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row .wc-block-components-product-details__value {
	margin: 0 !important;
	padding: 0 !important;
	color: #111 !important;
	font-weight: 700 !important;
	font-style: normal !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* Bigger thumbnail inside the card rows. */
.rsc-meta-grid .rsc-cart-preview-img {
	width: 56px !important;
	height: 56px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	border: 1px solid #ececec !important;
	background: #fff !important;
}

.rsc-meta-grid .rsc-cart-preview-wrap {
	margin-left: 0 !important;
	gap: 10px !important;
	border: 1px solid #cbcbcbee;
	padding: 2px;
	border-radius: 10px;
}

/* ---- Variation attributes: a labeled row of pills ---- */
.rsc-meta-grid .rsc-attr-list {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border-top: 1px solid #eee !important;
	font-size: 14px !important;
}

.rsc-meta-grid .rsc-attr-list::before {
	content: "Chi Tiết Sản Phẩm" !important;
	flex: 0 0 100% !important;
	margin-bottom: 2px !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

.rsc-meta-grid .rsc-attr-list .rsc-meta-attr {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 5px 12px !important;
	border-radius: 16px !important;
	background: #efefef !important;
	font-size: 13px !important;
}

.rsc-meta-grid .rsc-attr-list .rsc-meta-attr .wc-block-components-product-details__name {
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
	font-style: normal !important;
}

.rsc-meta-grid .rsc-attr-list .rsc-meta-attr .wc-block-components-product-details__value {
	margin: 0 !important;
	padding: 0 !important;
	color: #222 !important;
	font-weight: 600 !important;
	font-style: normal !important;
}

/* ============================================================
   EMJOY — Tùy chỉnh giao diện Cart / Checkout (block)
   Tái sử dụng biến của child theme (--primary, --bg-linen, ...) — đều có
   fallback để vẫn chạy nếu biến chưa được nạp.
   ============================================================ */
:root {
	--rsc-green: #2e7d32;
	/* xanh lá nút */
	--rsc-green-dark: #1b5e20;
	--rsc-green-soft: #eaf5ea;
}

/* ---------- NÚT chính (Proceed / Place Order) ---------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
	background-color: var(--rsc-green) !important;
	border-color: var(--rsc-green) !important;
	color: #fff !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
	background-color: var(--rsc-green-dark) !important;
	border-color: var(--rsc-green-dark) !important;
}

/* ============================================================
   1) THANH BƯỚC (Giỏ hàng → Thanh toán → Hoàn tất)
   Nhãn tiếng Việt "ghi đè" bằng ::before — XÓA 3 dòng content bên dưới
   nếu bạn dịch chuỗi bằng Loco Translate.
   ============================================================ */
.checkout-page-title .flex-col {
	text-align: center;
}

.checkout-breadcrumbs.checkout-breadcrumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.checkout-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border-radius: 50px;
	background: #fff;
	border: 1px solid var(--border, #E5E5E5);
	color: var(--text-light, #888) !important;
	font-weight: 600;
	text-decoration: none !important;
	font-size: 0;
}

.checkout-breadcrumbs a::before {
	font-size: 14px;
	letter-spacing: .3px;
}

.checkout-breadcrumbs a:nth-child(1)::before {
	content: "🛒  1. Giỏ Hàng";
}

.checkout-breadcrumbs a:nth-child(3)::before {
	content: "💳  2. Thanh Toán";
}

.checkout-breadcrumbs a:nth-child(5)::before {
	content: "✓  3. Hoàn Tất";
}

.checkout-breadcrumbs a.current {
	background: var(--rsc-green-soft) !important;
	border-color: var(--rsc-green) !important;
	color: var(--rsc-green) !important;
	box-shadow: 0 0 0 4px rgba(46, 125, 50, .12);
}

.checkout-breadcrumbs a.current::before {
	color: var(--rsc-green);
}

.checkout-breadcrumbs .divider {
	color: var(--text-light, #888);
}

/* ============================================================
   2) BỐ CỤC GIỎ HÀNG — mỗi sản phẩm là 1 "card" nền kem
   ============================================================ */
.wc-block-cart-items thead {
	display: none !important;
}

.wc-block-cart-items,
.wc-block-cart-items tbody {
	display: block !important;
}

.wc-block-cart-items__row {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	grid-template-areas:
		"image name   qty"
		"image prices total"
		"image meta   total" !important;
	column-gap: 22px !important;
	row-gap: 0 !important;
	align-items: start !important;
	margin: 0 0 18px !important;
	padding: 22px !important;
	background: var(--bg-linen, #FDFBF7) !important;
	border: 1px solid var(--border, #E5E5E5) !important;
	border-radius: var(--radius-lg, 16px) !important;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .06)) !important;
}

/* Làm phẳng cột sản phẩm + wrap để tên/giá/meta/số-lượng trở thành ô grid */
.wc-block-cart-items__row>td.wc-block-cart-item__product,
.wc-block-cart-item__product>.wc-block-cart-item__wrap {
	display: contents !important;
}

.wc-block-cart-items__row>td.wc-block-cart-item__image,
.wc-block-cart-items__row>td.wc-block-cart-item__total {
	display: block !important;
	padding: 0 !important;
	border: none !important;
}

.wc-block-cart-item__image {
	grid-area: image !important;
	width: auto !important;
}

.wc-block-cart-item__image img {
	width: 100px !important;
	height: 100px !important;
	object-fit: cover !important;
	border-radius: var(--radius, 8px) !important;
	border: 1px solid var(--border, #E5E5E5) !important;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	grid-area: name !important;
}

.wc-block-cart-item__prices {
	grid-area: prices !important;
}

.wc-block-cart-item__product .wc-block-components-product-metadata {
	grid-area: meta !important;
}

.wc-block-cart-item__quantity {
	grid-area: qty !important;
}

.wc-block-cart-item__total {
	grid-area: total !important;
	justify-self: end !important;
	align-self: start !important;
	text-align: right !important;
	margin-top: 10px !important;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--text-dark, #183059) !important;
	text-decoration: none !important;
	display: block;
	margin-bottom: 8px;
	line-height: 1.3;
}

.wc-block-cart-item__prices {
	margin: 0 0 10px !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--text-light, #888) !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value::after {
	content: " / cái";
	font-weight: 400;
}

/* ---------- Khối meta: pill biến thể lên trên, cá nhân hóa xuống dưới ---------- */
.wc-block-cart-item__product .wc-block-components-product-metadata.rsc-meta-grid {
	display: flex !important;
	flex-direction: column !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

.rsc-meta-grid .rsc-attr-list {
	order: -1 !important;
	padding: 0 0 12px !important;
	border-top: none !important;
}

.rsc-meta-grid .rsc-attr-list::before {
	display: none !important;
}

.rsc-meta-grid .rsc-attr-list .rsc-meta-attr {
	background: #fff !important;
	border: 1px solid var(--border, #E5E5E5) !important;
}

.rsc-meta-grid .rsc-cf-list {
	display: block !important;
	padding: 3px !important;
	border-top: 1px dashed var(--border, #E5E5E5) !important;
}

.rsc-meta-grid .rsc-cf-list::before {
	content: "Cá nhân hóa";
	display: block;
	font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--primary, #183059);
	margin: 0 0 8px;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row {
	align-items: flex-start !important;
	gap: 8px !important;
	padding: 6px 0 !important;
	border-top: none !important;
}

/*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="40.000000pt" height="40.000000pt" viewBox="0 0 220.000000 220.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,220.000000) scale(0.100000,-0.100000)" fill="%23000000" stroke="none"><path d="M640 2040 c-90 -19 -182 -70 -463 -259 -164 -110 -172 -118 -172 -185 0 -47 8 -65 102 -223 99 -165 129 -203 163 -203 9 0 53 18 99 40 45 22 84 40 87 40 2 0 4 -232 4 -516 0 -576 -1 -563 69 -606 36 -23 37 -23 521 -26 335 -2 501 0 537 8 60 13 96 48 113 108 6 22 10 174 10 378 l0 341 40 44 c78 85 70 129 -46 249 -123 127 -117 130 59 25 145 -86 167 -94 202 -71 13 9 71 94 127 189 95 159 103 176 103 224 0 69 -20 90 -215 218 -298 196 -362 226 -491 228 -95 2 -119 -12 -159 -96 -56 -114 -122 -161 -230 -161 -107 0 -170 44 -225 156 -16 34 -42 70 -56 80 -30 23 -115 31 -179 18z m120 -177 c43 -98 109 -155 218 -192 113 -38 240 -22 338 45 56 38 79 66 118 142 25 49 29 52 64 52 21 0 59 -7 83 -15 50 -17 457 -272 472 -296 7 -10 -12 -50 -68 -142 -42 -70 -78 -127 -80 -127 -2 0 -54 30 -115 66 -134 79 -162 89 -200 69 -46 -24 -740 -745 -761 -790 -34 -73 -20 -192 28 -237 19 -18 39 -23 94 -26 134 -8 137 -6 389 244 123 123 225 224 227 224 2 0 3 -144 3 -320 l0 -320 -490 0 -490 0 0 577 c0 522 -2 578 -17 595 -27 30 -71 21 -172 -33 -52 -27 -100 -48 -106 -45 -13 4 -155 239 -155 255 0 21 399 275 474 302 28 10 68 18 88 19 35 0 38 -3 58 -47z m808 -693 c24 -22 42 -44 40 -49 -1 -6 -127 -134 -277 -286 -216 -216 -283 -278 -313 -287 -29 -8 -41 -8 -53 2 -18 15 -20 53 -3 83 12 24 548 577 557 577 3 -1 26 -18 49 -40z"/></g></svg>');*/
.rsc-meta-grid .rsc-cf-list .rsc-meta-row::before {
	content: "";
	flex: 0 0 auto;
	margin-right: 2px;
	display: inline-block;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.rsc-meta-grid .wc-block-components-product-details__m-u-th-u::before {
	content: "👕" !important;
}

.rsc-meta-grid .wc-block-components-product-details__h-ng-d-n::before {
	content: "📝" !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row .wc-block-components-product-details__name {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 84px !important;
	color: var(--text-light, #888) !important;
	font-weight: 400 !important;
}

.rsc-meta-grid .rsc-cf-list .rsc-meta-row .wc-block-components-product-details__value {
	font-weight: 700 !important;
	color: var(--text-dark, #183059) !important;
}

/* ---------- Số lượng + xóa ---------- */
.wc-block-cart-item__quantity {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	justify-self: end !important;
}

.wc-block-components-quantity-selector {
	display: flex !important;
	align-items: center !important;
	border: 1px solid var(--border, #E5E5E5) !important;
	border-radius: 50px !important;
	background: #fff !important;
	overflow: hidden !important;
	max-width: 130px !important;
	height: 40px !important;
}

.wc-block-components-quantity-selector__input {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	text-align: center !important;
	color: var(--text-dark, #183059) !important;
	font-weight: 600 !important;
}

.wc-block-components-quantity-selector__button {
	height: 100% !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--primary, #183059) !important;
}

.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--text-light, #888) !important;
}

.wc-block-cart-item__remove-link svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--accent, #B85C5C) !important;
}

/* ---------- Giá Tổng cột phải ---------- */
.wc-block-cart-item__total::before {
	content: "Tổng";
	display: block;
	font-size: 12px;
	color: var(--text-light, #888);
	margin-bottom: 2px;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--primary, #183059) !important;
}

/* ============================================================
   3) CARD "TỔNG CỘNG ĐƠN HÀNG" (sidebar)
   Nhãn tiếng Việt ghi đè bằng ::before/::after — xóa nếu dùng Loco.
   ============================================================ */
.wc-block-cart__sidebar {
	background: var(--bg-linen, #FDFBF7) !important;
	border: 1px solid var(--border, #E5E5E5) !important;
	border-radius: var(--radius-lg, 16px) !important;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .06)) !important;
	padding: 24px !important;
}

.wc-block-cart__totals-title {
	font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif) !important;
	color: var(--text-dark, #183059) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin-bottom: 14px !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--text-dark, #183059) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 16px !important;
	font-weight: 600 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--primary, #183059) !important;
	font-weight: 800 !important;
}

.wc-block-cart__submit-button {
	width: 100% !important;
	border-radius: var(--radius, 8px) !important;
	padding: 16px !important;
}

.wc-block-components-order-summary-item .wc-block-components-product-price__value {
	color: var(--primary, #183059) !important;
	font-weight: 600 !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	padding: 4px 12px 12px 12px !important;
}

.wc-block-components-checkout-order-summary__title {
	margin-top: 0px !important;
	padding-top: 16px;
	background-color: #f5f5f5;
	margin-bottom: 12px;
}

/* Checkout Order summary: cho card "Cá nhân hóa" tràn full-width xuống dưới
   thumbnail thay vì bị bó trong cột mô tả bên phải.
   Biến order-summary-item thành grid; __description dùng display:contents để
   các dòng con (tên, giá, card meta) trở thành grid-item trực tiếp. */
.wc-block-components-order-summary-item {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	column-gap: 12px !important;
	row-gap: 2px !important;
	align-items: start !important;
}

.wc-block-components-order-summary-item__image {
	grid-column: 1 !important;
	grid-row: 1 / span 2 !important;
	/* trải qua dòng tên + dòng giá để giá nằm sát dưới tên */
	align-self: start !important;
	margin: 0 !important;
}

.wc-block-components-order-summary-item__description {
	display: contents !important;
}

.wc-block-components-order-summary-item>*:not(.wc-block-components-order-summary-item__image),
.wc-block-components-order-summary-item__description>* {
	grid-column: 2 !important;
}

/* Bỏ margin thừa ở dòng tên & giá để chúng nằm sát nhau (trừ card meta). */
.wc-block-components-order-summary-item__description>*:not(.wc-block-components-product-metadata) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wc-block-components-order-summary-item .wc-block-components-product-metadata.rsc-meta-grid {
	grid-column: 1 / -1 !important;
	margin-top: 8px !important;
}

/* Tổng tiền item: badge nổi bật canh phải cuối item, có dấu "=" đứng trước. */
.wc-block-components-order-summary-item__total-price {
	grid-column: 1 / -1 !important;
	justify-self: end !important;
	order: 99 !important;
	/* đẩy xuống cuối item */
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 12px !important;
}

.wc-block-components-order-summary-item__total-price::before {
	content: "=";
	font-size: 18px;
	font-weight: 700;
	color: var(--primary, #183059);
	opacity: 0.65;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
	display: inline-block !important;
	padding: 6px 16px !important;
	background: var(--bg-linen, #eef1f6) !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
	color: var(--primary, #183059) !important;
}

/* Đường kẻ ngang nét đứt phân cách giữa 2 item trong Order summary. */
.wc-block-components-order-summary-item+.wc-block-components-order-summary-item {
	border-top: 1px dashed #c9c9c9 !important;
	margin-top: 16px !important;
	padding-top: 16px !important;
}

/* ============================================================
   4) RESPONSIVE (mobile)
   ============================================================ */
@media (max-width: 849px) {
	.wc-block-cart-items__row {
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-areas:
			"image name"
			"image prices"
			"meta  meta"
			"qty   total" !important;
	}

	.wc-block-cart-item__quantity {
		justify-self: start !important;
	}

	.wc-block-cart-item__total {
		justify-self: end !important;
		margin-top: 0 !important;
	}
}