/* ==========================================================================
   SPF Cart UX — Cải thiện UI/UX trang Giỏ hàng (WooCommerce Cart Block)
   Mobile-first · Màu brand: primary #083D77 · CTA #EE4D2D · accent #8EAA85
   Scope: body.woocommerce-cart (trang Giỏ hàng)
          + shared: notice trên trang thanh toán (body.woocommerce-checkout)
   ========================================================================== */

body.woocommerce-cart {
	--spf-primary: #083d77;
	--spf-primary-soft: #eaf1fa;
	--spf-cta: #ee4d2d;
	--spf-cta-dark: #d8401f;
	--spf-accent: #8eaa85;
	--spf-text: #1f1e1e;
	--spf-muted: #63676e;
	--spf-bg: #f6f8fb;
	--spf-card: #ffffff;
	--spf-line: #e4e9f0;
	--spf-danger: #d64545;
	--spf-radius: 14px;

	background: var(--spf-bg);
}

/* --------------------------------------------------------------------------
   1. Khung trang: căn giữa, khoảng thở thoải mái
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: 1080px;
	margin: 0 auto;
	padding: 12px 16px 56px;
	font-size: 15px;
}

body.woocommerce-cart .wc-block-cart {
	flex-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   2. Danh sách sản phẩm: từ "bảng thô" thành các thẻ (card) lấp lánh nhẹ
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart-items {
	display: block;
	border: 0;
}

/* tbody/thead vẫn là table-row-group mặc định → phá grid layout của row.
   Phải block hóa cả bộ để <tr display:grid> stretch full width. */
body.woocommerce-cart .wc-block-cart-items tbody,
body.woocommerce-cart .wc-block-cart-items thead {
	display: block;
	width: 100%;
}

/* Header của bảng: ẩn hoàn toàn — layout card không cần header cột */
body.woocommerce-cart .wc-block-cart-items__header {
	display: none !important;
}

body.woocommerce-cart .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"image product total"
		"image qty    total";
	align-items: center;
	gap: 10px 14px;
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: var(--spf-radius);
	box-shadow: 0 1px 2px rgba(8, 61, 119, 0.04);
	padding: 14px;
	margin-bottom: 12px;
	position: relative;
}

/* Ảnh sản phẩm: to rõ, bo góc */
body.woocommerce-cart .wc-block-cart-item__image {
	grid-area: image;
	width: 88px;
	margin: 0;
}

body.woocommerce-cart .wc-block-cart-item__image img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--spf-line);
	background: #fff;
}

/* Khối thông tin sản phẩm */
body.woocommerce-cart .wc-block-cart-item__wrap {
	grid-area: product;
	padding-right: 36px; /* chừa chỗ cho nút xóa */
}

body.woocommerce-cart .wc-block-components-product-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--spf-text);
}

body.woocommerce-cart .wc-block-components-product-metadata {
	font-size: 13px;
	color: var(--spf-muted);
	margin-top: 2px;
}

/* Giá hiển thị dưới tên sản phẩm (mobile) */
body.woocommerce-cart .wc-block-components-product-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--spf-primary);
}

/* Tổng tiền cột phải */
body.woocommerce-cart .wc-block-cart-item__total {
	grid-area: total;
	justify-self: end;
	text-align: right;
	font-size: 15px;
}

/* Ô số lượng: to, dễ bấm (touch target ≥ 42px) */
body.woocommerce-cart .wc-block-cart-item__quantity {
	grid-area: qty;
	justify-self: start;
	align-self: end;
}

body.woocommerce-cart .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--spf-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

body.woocommerce-cart .wc-block-components-quantity-selector::after,
body.woocommerce-cart .wc-block-components-quantity-selector::before {
	display: none; /* tách viền mặc định của block */
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
	width: 42px;
	height: 42px;
	font-size: 18px;
	color: var(--spf-primary);
	background: transparent;
}

body.woocommerce-cart
	.wc-block-components-quantity-selector
	input.wc-block-components-quantity-selector__input {
	width: 44px;
	height: 42px;
	font-size: 16px; /* ≥16px chặn iOS tự zoom */
	font-weight: 600;
	border: 0;
	box-shadow: none;
	text-align: center;
}

/* Nút xóa (biểu tượng × ở góc phải, mobile) */
body.woocommerce-cart .wc-block-cart-item__remove-icon {
	width: 44px;
	height: 44px;
	top: 6px;
	right: 6px;
	border-radius: 10px;
	color: var(--spf-muted);
	transition: color 0.15s ease, background 0.15s ease;
}

body.woocommerce-cart .wc-block-cart-item__remove-icon:hover,
body.woocommerce-cart .wc-block-cart-item__remove-icon:focus-visible {
	color: var(--spf-danger);
	background: #fdecec;
}

/* Link "Xóa" dạng chữ trên desktop */
body.woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--spf-muted);
	text-decoration: underline;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--spf-danger);
}

/* --------------------------------------------------------------------------
   3. Cột phải: thẻ tóm tắt đơn hàng
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart__sidebar {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(8, 61, 119, 0.05);
	padding: 20px;
	font-size: 15px;
}

/* Dòng tạm tính / phí ship / giảm giá */
body.woocommerce-cart .wc-block-components-totals-item {
	padding: 8px 0;
	font-size: 15px;
}

body.woocommerce-cart .wc-block-components-totals-item__label {
	color: var(--spf-muted);
}

body.woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--spf-text);
}

/* Tổng cộng: nổi bật nhất */
body.woocommerce-cart .wc-block-components-totals-footer-item {
	border-top: 2px solid var(--spf-line);
	margin-top: 10px;
	padding-top: 14px;
}

body.woocommerce-cart
	.wc-block-components-totals-footer-item
	.wc-block-components-totals-item__label {
	font-size: 16px;
	font-weight: 700;
	color: var(--spf-text);
}

body.woocommerce-cart
	.wc-block-components-totals-footer-item
	.wc-block-components-totals-item__value {
	font-size: 22px;
	font-weight: 800;
	color: var(--spf-cta);
}

/* --------------------------------------------------------------------------
   4. Panel mã giảm giá & ô nhập liệu
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wc-block-components-panel__button {
	font-size: 14px;
	font-weight: 600;
	color: var(--spf-primary);
}

body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-text-input input[type="text"] {
	min-height: 48px;
	font-size: 16px; /* chặn iOS auto-zoom */
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   5. Nút CTA "Thanh toán" + khối chứa nút
   -------------------------------------------------------------------------- */
body.woocommerce-cart
	.wc-block-components-button.wc-block-cart__submit-button {
	background: var(--spf-primary) !important;
	color: #fff !important;
	border: 0;
	height: 52px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 16px rgba(8, 61, 119, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.woocommerce-cart
	.wc-block-components-button.wc-block-cart__submit-button:hover {
	background: #062f5c !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(8, 61, 119, 0.32);
}

/* Gợi ý thanh toán an toàn ngay dưới CTA (thêm bằng JS, có fallback ẩn) */
body.woocommerce-cart .spf-cart-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--spf-muted);
}

/* --------------------------------------------------------------------------
   6. Mobile ≤ 782px: thanh CTA dính đáy màn hình (giỏ hàng không bao giờ
      "mất" nút thanh toán khi cuộn)
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

	body.woocommerce-cart .wp-block-woocommerce-cart {
		padding: 8px 12px 24px;
	}

	/* Ẩn header cột của bảng */
	body.woocommerce-cart .wc-block-cart-items__header {
		display: none;
	}

	/* Hàng sản phẩm: flex — ảnh + info trên dòng 1, total full-width dòng 2
	   (flex-wrap tự.setHeight theo nội dung → không bao giờ đè lên ảnh) */
	body.woocommerce-cart .wc-block-cart-items__row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 12px;
	}

	body.woocommerce-cart .wc-block-cart-item__image {
		flex: 0 0 84px;
		width: 84px;
	}

	body.woocommerce-cart .wc-block-cart-item__product {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 12px;
	}

	body.woocommerce-cart .wc-block-cart-item__total {
		flex: 1 1 100%;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-top: 1px dashed var(--spf-line);
		padding-top: 10px;
		margin-top: 6px;
	}

	body.woocommerce-cart .wc-block-cart-item__image,
	body.woocommerce-cart .wc-block-cart-item__image img {
		width: 84px;
		height: 84px;
	}

	body.woocommerce-cart .wc-block-cart-item__total {
		justify-self: stretch;
		text-align: left;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-top: 1px dashed var(--spf-line);
		padding-top: 10px;
		margin-top: 2px;
	}

	/* ---- Sticky checkout bar ---- */
	body.woocommerce-cart .wc-block-cart__submit-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 980;
		display: flex;
		align-items: center;
		gap: 12px;
		background: rgba(255, 255, 255, 0.97);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--spf-line);
		box-shadow: 0 -6px 20px rgba(8, 61, 119, 0.1);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
	}

	body.woocommerce-cart .spf-cart-stickybar__total {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 13px;
		line-height: 1.2;
		color: var(--spf-muted);
	}

	body.woocommerce-cart .spf-cart-stickybar__total strong {
		display: inline;
		margin-left: 4px;
		font-size: 16px;
		font-weight: 800;
		color: var(--spf-cta);
	}

	body.woocommerce-cart
		.wc-block-components-button.wc-block-cart__submit-button {
		flex: 1 1 auto;
		height: 48px;
		font-size: 15px;
		white-space: nowrap;
		padding: 0 12px;
	}

	/* Chừa chỗ cho thanh CTA để không che nội dung cuối trang */
	body.woocommerce-cart .wc-block-cart,
	body.woocommerce-cart .wp-block-woocommerce-cart {
		padding-bottom: 96px;
	}

	/* Ghi chú an toàn: ẩn trên mobile sticky bar cho gọn */
	body.woocommerce-cart .spf-cart-secure-note {
		display: none;
	}
}

/* Desktop: ẩn tổng tiền của sticky bar (chỉ dành cho mobile) */
@media (min-width: 783px) {
	body.woocommerce-cart .spf-cart-stickybar__total {
		display: none;
	}
}

/* Notice banner trên trang Blocks (cart/checkout) — surface classic notices */
.spf-notices-banner {
	max-width: 1080px;
	margin: 0 auto 16px;
	padding: 0 16px;
}

.spf-notices-banner .woocommerce-error,
.spf-notices-banner .woocommerce-info,
.spf-notices-banner .woocommerce-message {
	border-radius: 12px;
	font-size: 14.5px;
	list-style: none;
	margin: 0 0 10px;
	padding: 14px 16px 14px 42px;
	position: relative;
}

.spf-notices-banner .woocommerce-error {
	background: #fff2f0;
	border: 1px solid #ffd6cc;
	color: #8f1d12;
}

.spf-notices-banner .woocommerce-info {
	background: #eef4ff;
	border: 1px solid #ccdaff;
	color: #0b3ea8;
}

.spf-notices-banner .woocommerce-message {
	background: #f0f8ef;
	border: 1px solid #cde7c8;
	color: #2f5e2a;
}

/* ==========================================================================
   12. MODAL ĐĂNG NHẬP (Digits × MasterStudy authorization)
   Force light brand theme — đè lên dark scheme của Digits
   ========================================================================== */

/* Nền form Digits: luôn trắng sáng */
.masterstudy-authorization-modal .digits-form_login,
.masterstudy-authorization-modal .digits_ui,
.masterstudy-authorization-modal .digits_embed-form,
.masterstudy-authorization-modal .digits-form_wrapper,
.digits-form_wrapper.digits_modal_box,
.digits-form_wrapper.digits2_box,
.digits_modal_box .digits-form_login,
.digits_embed-form .digits-form_login {
	background: #fff !important;
	color: #1f1e1e !important;
}

/* Card container: bo góc, không cắt nội dung */
.masterstudy-authorization-modal__container,
.masterstudy-authorization-modal__wrapper {
	border-radius: 16px !important;
	overflow: visible;
}

/* Form bám vừa card, hết tràn lề trái */
.masterstudy-authorization-modal .digits_ui,
.masterstudy-authorization-modal .digits_embed-form {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.digits-form_wrapper.digits_modal_box {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 26px 24px 24px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Heading "Đăng nhập" */
.digits-form_wrapper .digits-form_heading,
.digits-form_wrapper .digits-form_heading_text {
	color: #083d77 !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: -0.2px;
	margin: 0 0 18px !important;
}

/* Nút quay lại */
.digits-form_wrapper .digits_back_icon,
.digits-form_wrapper .digits_form_back {
	color: #63676e !important;
}

/* Tabs: "Sử dụng số điện thoại" */
.digits-form_wrapper .digits-form_tab_wrapper,
.digits-form_wrapper .digits-form_tabs,
.digits-form_wrapper .digits-form_tab-bar,
.digits-form_wrapper .digits-form_tab-item,
.digits-form_wrapper .digits_login_use_phone {
	color: #1f1e1e !important;
	font-weight: 600 !important;
}

.digits-form_wrapper .digits-tab_active,
.digits-form_wrapper .digits-form_tab-item.digits-tab_active {
	color: #083d77 !important;
}

/* Gạch chân cam của tab active = điểm nhấn nhỏ */
.digits-form_wrapper .digits-form_tab-item.digits-tab_active,
.digits-form_wrapper .digits-tab_active {
	border-bottom-color: #ee4d2d !important;
}

/* Input SĐT: nền trắng, viền nhẹ, chữ tối */
.digits-form_wrapper .mobile_field,
.digits-form_wrapper input.mobile_field,
.digits-form_wrapper .digits-form_input input {
	background: #fff !important;
	color: #1f1e1e !important;
	border: 1px solid #e4e9f0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.digits-form_wrapper .mobile_field::placeholder {
	color: #9aa1ab !important;
}

/* Country code (cờ + +84): rebuild alignment
   Container 88px absolute đè lên trái ô nhập — bên trong:
   cờ ở 16px | code input padding-left 48px | divider tại mép phải */
.digits-form_wrapper .digits-form_input.digits-form_countrycode {
	width: 88px !important;
	height: 100% !important;
	padding: 0 !important;
	background: #f6f8fb !important;
	border-radius: 9px 0 0 9px;
	overflow: hidden;
}

/* Cờ quốc gia: Digits vẽ bằng box 48x32 scale(0.5) — KHÔNG đụng
   transform/size, chỉ dịch xuống để căn giữa dọc trong ô 52px */
.digits-form_wrapper .digits-field-country_flag {
	top: 10px !important;
}

.digits-form_wrapper input.digits_countrycode {
	width: 100% !important;
	height: 100% !important;
	padding: 0 0 0 48px !important;
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid #e4e9f0 !important;
	border-radius: 0 !important;
	font-size: 16px !important;
	color: #1f1e1e !important;
}

/* Số điện thoại: chừa đúng bề rộng country code + khoảng thở */
.digits-form_wrapper input.mobile_field {
	padding-left: 100px !important;
}

/* Dòng nhập SĐT: clip nội dung theo bo góc + tránh tràn */
.digits-form_wrapper .digits-form_input,
.digits-form_wrapper .digits-form_border {
	overflow: hidden;
	border-radius: 10px !important;
}

/* Hàng input đang focus */
.digits-form_wrapper .digits-row_active,
.digits-form_wrapper .digits-form_border {
	border-color: #083d77 !important;
}

/* Checkbox điều khoản / nhớ mật khẩu */
.digits-form_wrapper .dig_opt_mult_con,
.digits-form_wrapper .digits_login_remember_me,
.digits-form_wrapper .digits-field-type_tac {
	color: #1f1e1e !important;
	font-size: 13.5px !important;
}

.digits-form_wrapper input[type="checkbox"] {
	accent-color: #083d77;
}

/* Nút "Tiếp tục" → CTA navy chủ đạo */.digits-form_wrapper .digits-form_button,
.digits-form_wrapper .digits-form_submit,
.digits-form_wrapper .digits-form_submit-btn {
	background: #083d77 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	height: 52px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 16px rgba(8, 61, 119, 0.25) !important;
	text-shadow: none !important;
	transition: background 0.15s ease, transform 0.15s ease !important;
}

.digits-form_wrapper .digits-form_button:hover,
.digits-form_wrapper .digits-form_submit:hover,
.digits-form_wrapper .digits-form_submit-btn:hover {
	background: #062f5c !important;
	transform: translateY(-1px);
}

/* Nguồn gốc ugly dark theme: Digits flip CSS variables theo
   prefers-color-scheme trên .digits-form_container. Định nghĩa lại
   variables = brand values cho mọi scheme. */
.digits-main_style,
.digits-tp_style,
.digits-form_page,
.digits-form_container,
.digits-form_wrapper,
.digits2_box,
.masterstudy-authorization-modal .digits-form_container {
	--dprimary: #083d77 !important;
	--dtitle: #083d77 !important;
	--dfield_bg: #ffffff !important;
	--daccent: #ee4d2d !important;
	--dform_bg: #ffffff !important;
	--dbutton_text: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
	.digits-main_style,
	.digits-tp_style,
	.digits-form_page,
	.digits-form_container,
	.digits-form_wrapper,
	.digits2_box,
	.masterstudy-authorization-modal .digits-form_container {
		--dprimary: #083d77 !important;
		--dtitle: #083d77 !important;
		--dfield_bg: #ffffff !important;
		--daccent: #ee4d2d !important;
		--dform_bg: #ffffff !important;
		--dbutton_text: #ffffff !important;
	}
}

/* Nút đóng × */
.masterstudy-authorization-modal .masterstudy-authorization-modal__close,
.digits-form_wrapper .digits_close_btn {
	color: #63676e !important;
	background: #f1f3f7 !important;
	border-radius: 50% !important;
}

/* Đè dark-scheme của Digits: mọi biến thể giữ nguyên light theme */
@media (prefers-color-scheme: dark) {
	.masterstudy-authorization-modal .digits-form_login,
	.masterstudy-authorization-modal .digits_ui,
	.masterstudy-authorization-modal .digits_embed-form,
	.masterstudy-authorization-modal .digits-form_wrapper,
	.digits-form_wrapper.digits_modal_box,
	.digits-form_wrapper.digits2_box,
	.digits_modal_box .digits-form_login,
	.digits_embed-form .digits-form_login {
		background: #fff !important;
		color: #1f1e1e !important;
	}

	.masterstudy-authorization-modal .digits-form_heading,
	.digits-form_wrapper .digits-form_heading,
	.digits-form_wrapper .digits-form_heading_text {
		color: #083d77 !important;
	}

	.digits-form_wrapper .mobile_field,
	.digits-form_wrapper input.mobile_field,
	.digits-form_wrapper .digits-form_input input {
		background: #fff !important;
		color: #1f1e1e !important;
	}

	.digits-form_wrapper .countrycodecontainer,
	.digits-form_wrapper .digits_countrycode {
		background: #f6f8fb !important;
		color: #1f1e1e !important;
	}

	.digits-form_wrapper .digits-form_button,
	.digits-form_wrapper .digits-form_submit,
	.digits-form_wrapper .digits-form_submit-btn {
		background: #083d77 !important;
		color: #fff !important;
	}
}

/* --------------------------------------------------------------------------
    6b. Sản phẩm hết hàng trong giỏ: làm mờ + cảnh báo (Shopee-style)
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart-items__row.spf-item-error {
	opacity: 0.55;
	filter: grayscale(0.35);
	background: #fafafa;
}

body.woocommerce-cart .wc-block-cart-items__row.spf-item-error
	.wc-block-components-quantity-selector {
	opacity: 0.6;
	pointer-events: none;
}

body.woocommerce-cart .spf-item-error__note {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff8e6;
	border: 1px solid #ffe1a8;
	color: #7a5a10;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

/* Số lượng hiển thị tĩnh (sản phẩm bán lẻ số lượng — WC Blocks tự ẩn
   quantity selector) */
body.woocommerce-cart .spf-qty-static {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 600;
	color: #1f1e1e;
	background: #f6f8fb;
	border: 1px solid #e4e9f0;
	border-radius: 8px;
	padding: 5px 12px;
	margin-top: 8px;
}

/* Mobile: WC định vị absolute + float giá total ở góc phải → đè lên tên
   sản phẩm khi tên dài. Cho về dòng chuẩn. */
@media (max-width: 782px) {
	body.woocommerce-cart
		.wc-block-cart-item__total-price-and-sale-badge-wrapper {
		position: static !important;
		float: none !important;
		clear: both;
	}

	body.woocommerce-cart .wc-block-cart-item__total {
		float: none !important;
		position: static !important;
	}
}

/* Nút Thanh toán bị khóa khi còn sản phẩm hết hàng */
body.woocommerce-cart
	.wc-block-components-button.wc-block-cart__submit-button.spf-btn-locked,
body.woocommerce-checkout #place_order.spf-btn-locked {
	opacity: 0.5;
	pointer-events: none;
	filter: grayscale(0.4);
	box-shadow: none;
}

/* Ghi chú điều chỉnh tổng (loại trừ item hết hàng) */
body.woocommerce-cart .spf-total-adjust-note {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff8e6;
	border: 1px solid #ffe1a8;
	color: #7a5a10;
	font-size: 13px;
	line-height: 1.55;
}

body.woocommerce-cart .spf-total-adjust-note strong {
	color: #b25c00;
}

/* --------------------------------------------------------------------------
   7. Desktop ≥ 783px: chăm chút khoảng cách
   -------------------------------------------------------------------------- */
@media (min-width: 783px) {

	body.woocommerce-cart .wc-block-cart-items__row {
		padding: 16px 18px;
	}

	body.woocommerce-cart .wc-block-cart__sidebar {
		padding: 24px;
	}
}

/* --------------------------------------------------------------------------
   8. Giỏ hàng trống: thông điệp thân thiện + CTA rõ ràng
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	max-width: 640px;
	margin: 24px auto 0;
	padding: 48px 20px;
	text-align: center;
	background: var(--spf-card);
	border: 1px dashed var(--spf-line);
	border-radius: 16px;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--spf-text);
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   9. Thông báo lỗi / thông tin (dùng chung cả trang Thanh toán)
      — chính là các notice kiểu "Có một số vấn đề với giỏ hàng…"
   -------------------------------------------------------------------------- */
body.woocommerce-cart .wc-block-components-notice,
body.woocommerce-checkout .wc-block-components-notice {
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 14px;
}

body.woocommerce-cart .wc-block-components-notice.is-error,
body.woocommerce-checkout .wc-block-components-notice.is-error {
	background: #fff2f0;
	border-color: #ffd6cc;
	color: #8f1d12;
}

body.woocommerce-cart .wc-block-components-notice.is-info,
body.woocommerce-checkout .wc-block-components-notice.is-info {
	background: #eef4ff;
	border-color: #ccdaff;
	color: #0b3ea8;
}

body.woocommerce-cart .wc-block-components-notice.is-success,
body.woocommerce-checkout .wc-block-components-notice.is-success {
	background: #f0f8ef;
	border-color: #cde7c8;
	color: #2f5e2a;
}

/* Notice kiểu classic (shortcode checkout /payos/) */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message {
	border-radius: 12px;
	font-size: 14.5px;
}

/* ==========================================================================
   11. CHECKOUT CLASSIC (shortcode [woocommerce_checkout] — trang /payos/)
      Khớp kiến trúc hiện tại: gateway PayOS chỉ chạy trên classic checkout.
   ========================================================================== */

body.woocommerce-checkout {
	--spf-primary: #083d77;
	--spf-primary-soft: #eaf1fa;
	--spf-cta: #ee4d2d;
	--spf-cta-dark: #d8401f;
	--spf-text: #1f1e1e;
	--spf-muted: #63676e;
	--spf-bg: #f6f8fb;
	--spf-card: #ffffff;
	--spf-line: #e4e9f0;
	--spf-radius: 14px;

	background: var(--spf-bg);
}

/* Khung trang */
body.woocommerce-checkout .woocommerce-checkout,
body.woocommerce-checkout form.checkout {
	max-width: 1080px;
	margin: 0 auto;
	font-size: 15px;
}

body.woocommerce-checkout #primary,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .entry-content {
	max-width: 1080px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* Steps: Giỏ hàng → Thanh toán → Hoàn tất (inject bằng JS) */
.spf-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px auto 20px;
	max-width: 640px;
	font-size: 13px;
	font-weight: 600;
	color: var(--spf-muted, #63676e);
	list-style: none;
	padding: 0;
	counter-reset: spf-step;
}

.spf-checkout-steps li {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.spf-checkout-steps li:not(.spf-steps-sep)::before {
	counter-increment: spf-step;
	content: counter(spf-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e6eaf0;
	color: #63676e;
	font-size: 12px;
	flex: 0 0 auto;
}

.spf-checkout-steps li:not(.spf-steps-sep).is-active {
	color: var(--spf-primary, #083d77);
}

.spf-checkout-steps li:not(.spf-steps-sep).is-active::before {
	background: var(--spf-primary, #083d77);
	color: #fff;
}

.spf-checkout-steps li:not(.spf-steps-sep).is-done::before {
	background: var(--spf-accent, #8eaa85);
	color: #fff;
	content: "✓";
}

.spf-checkout-steps .spf-steps-sep {
	flex: 0 0 24px;
	height: 1px;
	background: #d5dbe4;
}

@media (max-width: 480px) {
	.spf-checkout-steps {
		font-size: 12px;
		gap: 5px;
	}
	.spf-checkout-steps .spf-steps-sep {
		flex-basis: 14px;
	}
}

/* Tiêu đề section */
body.woocommerce-checkout
	.woocommerce-billing-fields
	h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 19px;
	font-weight: 700;
	color: var(--spf-text);
	margin: 0 0 14px;
}

/* Ẩn section "Thông tin bổ sung" — field ghi chú đã bị remove,
   heading rỗng gây confusion */
body.woocommerce-checkout .woocommerce-additional-fields {
	display: none !important;
}

/* Form bố cục: bỏ float nửa-cột bị orphan */
body.woocommerce-checkout form.checkout::after {
	content: "";
	display: table;
	clear: both;
}

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

body.woocommerce-checkout
	.form-row.form-row-first,
body.woocommerce-checkout
	.form-row.form-row-last,
body.woocommerce-checkout
	.form-row.form-row-wide {
	float: none !important;
	width: 100% !important;
	margin-bottom: 14px;
}

body.woocommerce-checkout .form-row label {
	font-size: 14px;
	font-weight: 600;
	color: var(--spf-text);
	margin-bottom: 6px;
	display: inline-block;
}

body.woocommerce-checkout .form-row .required {
	color: var(--spf-cta);
}

/* Input: đủ to cho mobile, chặn iOS zoom */
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
	width: 100%;
	min-height: 48px;
	font-size: 16px;
	padding: 10px 14px;
	border: 1px solid var(--spf-line);
	border-radius: 10px;
	background: #fff;
	color: var(--spf-text);
}

body.woocommerce-checkout
	.form-row
	input:focus,
body.woocommerce-checkout
	.form-row
	select:focus {
	border-color: var(--spf-primary);
	outline: 2px solid rgba(8, 61, 119, 0.15);
}

/* Radio "Xuất hóa đơn VAT / Đồng ý": biến thành hàng lựa chọn rõ ràng */
body.woocommerce-checkout #billing_VAT_type_field {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: var(--spf-radius);
	padding: 14px;
}

body.woocommerce-checkout
	#billing_VAT_type_field
	> label {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
	display: block;
}

body.woocommerce-checkout
	#billing_VAT_type_field
	.woocommerce-input-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.woocommerce-checkout
	#billing_VAT_type_field
	input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--spf-primary);
	flex: 0 0 auto;
}

body.woocommerce-checkout
	#billing_VAT_type_field
	label.radio {
	font-size: 14.5px;
	font-weight: 600;
	margin: 0;
}

/* Các field hóa đơn công ty nằm gọn trong card */
body.woocommerce-checkout
	#billing_tax_code_field,
body.woocommerce-checkout
	#billing_biz_name_field,
body.woocommerce-checkout
	#billing_biz_address_field {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: var(--spf-radius);
	padding: 14px;
}

/* Coupon: panel "Bạn có mã ưu đãi?" */
body.woocommerce-checkout .woocommerce-info {
	background: var(--spf-primary-soft, #eaf1fa);
	border: 1px solid #ccdaff;
	color: #0b3ea8;
	padding: 14px 16px 14px 46px; /* chừa chỗ cho icon bên trái */
}

body.woocommerce-checkout .woocommerce-info::before {
	top: 50%;
	transform: translateY(-50%);
}

/* Checkbox điều khoản: label relative + checkbox absolute góc trái
   (một stylesheet khác đang đặt position:absolute left:64px → đè chữ) */
body.woocommerce-checkout
	.woocommerce-terms-and-conditions-wrapper
	label.checkbox {
	display: block !important;
	position: relative !important;
	padding-left: 30px !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

body.woocommerce-checkout
	.woocommerce-terms-and-conditions-wrapper
	label.checkbox
	input[type="checkbox"] {
	position: absolute !important;
	left: 0 !important;
	top: 3px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	appearance: auto !important;
	accent-color: #083d77 !important;
	border-radius: 4px !important;
}

body.woocommerce-checkout .woocommerce-form-coupon {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: var(--spf-radius);
	padding: 16px;
}

body.woocommerce-checkout .woocommerce-form-coupon input#coupon_code {
	min-height: 48px;
	font-size: 16px;
	border: 1px solid var(--spf-line);
	border-radius: 10px;
	padding: 10px 14px;
	width: 100%;
	max-width: 320px;
}

body.woocommerce-checkout
	.woocommerce-form-coupon
	button[name="apply_coupon"] {
	background: var(--spf-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	min-height: 48px;
	padding: 0 22px;
	font-weight: 700;
	cursor: pointer;
}

/* Đơn hàng của bạn: card thay bảng thô */
body.woocommerce-checkout #order_review_heading {
	margin-top: 26px;
}

body.woocommerce-checkout #order_review {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 2px 10px rgba(8, 61, 119, 0.05);
}

body.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	font-size: 15px;
}

body.woocommerce-checkout
	#order_review
	table.shop_table
	th {
	border: 0;
	background: transparent;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.6px;
	color: var(--spf-muted);
	padding: 6px 8px;
}

body.woocommerce-checkout
	#order_review
	table.shop_table
	td {
	border: 0;
	border-top: 1px solid var(--spf-line);
	padding: 12px 8px;
	vertical-align: middle;
}

body.woocommerce-checkout
	#order_review
	.product-thumbnail
	img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--spf-line);
}

body.woocommerce-checkout
	#order_review
	.product-name {
	font-weight: 600;
}

body.woocommerce-checkout
	#order_review
	.product-quantity {
	font-weight: 400;
	color: var(--spf-muted);
}

/* Dòng Tổng */
body.woocommerce-checkout
	#order_review
	table.shop_table
	tfoot
	tr.order-total
	td,
body.woocommerce-checkout
	#order_review
	table.shop_table
	tr.order-total
	th {
	font-size: 17px;
	font-weight: 800;
	color: var(--spf-text);
	border-top: 2px solid var(--spf-line);
	padding-top: 14px;
}

body.woocommerce-checkout
	#order_review
	table.shop_table
	tfoot
	tr.order-total
	.woocommerce-Price-amount {
	color: var(--spf-cta) !important;
	font-size: 20px;
	font-weight: 800;
}

/* Payment box: khối PayOS gọn nhẹ */
body.woocommerce-checkout #payment {
	background: var(--spf-card);
	border: 1px solid var(--spf-line);
	border-radius: 16px;
	padding: 6px;
}

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

body.woocommerce-checkout
	#payment
	ul.payment_methods
	li {
	background: var(--spf-primary-soft, #eaf1fa);
	border: 1px solid #ccdaff;
	border-radius: 12px;
	padding: 10px 12px;
}

body.woocommerce-checkout
	#payment
	ul.payment_methods
	li
	input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--spf-primary);
	vertical-align: middle;
	margin-right: 6px;
}

body.woocommerce-checkout
	#payment
	ul.payment_methods
	label {
	font-weight: 700;
	font-size: 15px;
	color: var(--spf-text);
	display: inline-block;
	margin: 0;
}

body.woocommerce-checkout
	#payment
	div.payment_box {
	background: transparent;
	padding: 4px 2px 0;
	font-size: 12.5px;
	color: var(--spf-muted);
}

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

/* Nút Đặt hàng: navy chủ đạo, full-width mobile */
body.woocommerce-checkout #place_order {
	background: var(--spf-primary, #083d77) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px;
	height: 54px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.3px;
	width: 100%;
	box-shadow: 0 6px 16px rgba(8, 61, 119, 0.25);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

body.woocommerce-checkout #place_order:hover {
	background: #062f5c !important;
	transform: translateY(-1px);
}

/* Checkbox điều khoản */
body.woocommerce-checkout
	.woocommerce-terms-and-conditions-wrapper {
	margin: 18px 0;
	font-size: 14px;
	color: var(--spf-muted);
}



/* Privacy text: gọn, mờ, ít chiếm chỗ */
body.woocommerce-checkout
	.woocommerce-privacy-policy-text {
	margin: 10px 0 !important;
}

body.woocommerce-checkout
	.woocommerce-privacy-policy-text
	p {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: #9aa1ab !important;
	margin: 0;
}

/* Mobile: dàn lại khoảng cách tổng thể */
@media (max-width: 782px) {
	body.woocommerce-checkout
		.woocommerce-billing-fields
		h3,
	body.woocommerce-checkout #order_review_heading {
		font-size: 17px;
		margin-top: 16px;
		margin-bottom: 10px;
	}

	body.woocommerce-checkout #order_review,
	body.woocommerce-checkout #payment {
		padding: 12px;
	}

	/* Mô tả dài của phương thức: ẩn trên mobile cho gọn
	   (tiêu đề "Chuyển khoản QR Code" đã tự giải thích) */
	body.woocommerce-checkout
		#payment
		div.payment_box {
		display: none !important;
	}

	body.woocommerce-checkout
		.woocommerce-privacy-policy-text {
		margin: 8px 0 !important;
	}

	/* Nút Đặt hàng: STICKY FULL-BLEED — mép dưới LUÔN sát đáy màn hình.
	   Safe-area xử lý bằng padding trong (trước đây dùng bottom:env()
	   khiến nút nhích lên khi toolbar trình duyệt thu gọn khi cuộn). */
	body.woocommerce-checkout #place_order {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		z-index: 990;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		border-radius: 0 !important;
		padding: 16px 12px calc(14px + env(safe-area-inset-bottom)) !important;
		box-shadow: 0 -6px 20px rgba(8, 61, 119, 0.3);
	}

	body.woocommerce-checkout form.checkout {
		padding-bottom: 76px; /* chừa chỗ cho nút sticky */
	}

	body.woocommerce-checkout
		#customer_details
		.col-1,
	body.woocommerce-checkout
		#order_review,
	body.woocommerce-checkout
		#payment {
		margin-bottom: 14px;
	}
}

/* Desktop: 2 cột song song — float layout chuẩn classic WC
   (heading + order review float phải, top-aligned với form) */
@media (min-width: 992px) {
	body.woocommerce-checkout form.checkout > #customer_details {
		float: left;
		width: 54% !important;
	}

	body.woocommerce-checkout form.checkout > #order_review_heading {
		float: right;
		width: 44% !important;
		margin-top: 4px;
	}

	body.woocommerce-checkout form.checkout > #order_review {
		float: right;
		width: 44% !important;
		position: sticky;
		top: 20px; /* tóm tắt đơn hàng dính khi cuộn form */
	}

	body.woocommerce-checkout form.checkout::after {
		content: "";
		display: table;
		clear: both;
	}

	body.woocommerce-checkout form.checkout
		#customer_details
		.col-2:empty {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   10. Accessibility: focus rõ ràng + tôn trọng reduced-motion
   -------------------------------------------------------------------------- */
body.woocommerce-cart a:focus-visible,
body.woocommerce-cart button:focus-visible,
body.woocommerce-cart input:focus-visible,
body.woocommerce-checkout a:focus-visible,
body.woocommerce-checkout button:focus-visible,
body.woocommerce-checkout input:focus-visible {
	outline: 2px solid var(--spf-primary, #083d77);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-cart *,
	body.woocommerce-cart *::before,
	body.woocommerce-cart *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   14. MOBILE CAROUSEL (MasterStudy single course carousel — owl)
   Fix: slide kề bên lộ nút ra ngoài viewport (overlap) do wrapper không clip
   ========================================================================== */
@media (max-width: 782px) {
	/* Chỉ clip slide kề bên — owl tự tính width từng item,
	   KHÔNG override width (.owl-item) tránh phá layout */
	.stm_lms_single_course_carousel_wrapper {
		overflow: hidden !important;
	}
}