/*
 * Cac trang cua duong mua hang: gio hang, thanh toan, cam on, tai khoan.
 *
 * Bon trang nay dung chung mot bo phan: the trang bo goc co do bong nhe,
 * o nhap vien mo, nut chinh nen vang chu den. Nen gom vao mot file thay vi
 * bon file rieng - sua mot cho la ca duong mua hang doi theo.
 */

/* ================================================================
   0. DUNG CHUNG
   ================================================================ */

.cps-cart,
.cps-checkout,
.cps-thankyou,
.cps-tk,
.cps-cart-trong {
	--cps-the-bong:
		0 4px 20px -8px rgba(0, 0, 0, 0.11),
		0 0 32px -4px rgba(0, 0, 0, 0.06);
}

/*
 * O nhap: vien ve bang box-shadow inset chu khong phai border.
 *
 * Flatsome dat "a:focus-visible { outline: 2px solid }" - ve vien bang
 * outline se bi trang thai focus xoa mat. De outline cho rieng viec danh
 * dau focus.
 */
.cps-cart .qty,
.cps-checkout input[type="text"],
.cps-checkout input[type="email"],
.cps-checkout input[type="tel"],
.cps-checkout input[type="password"],
.cps-checkout textarea,
.cps-checkout select,
.cps-checkout .select2-selection,
.cps-tk__nhap {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-border-gallery);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	color: var(--cps-c-strong);
	transition: box-shadow 0.15s ease;
}

.cps-checkout textarea {
	height: auto;
	min-height: 88px;
	padding: var(--cps-sp-3) var(--cps-sp-4);
}

.cps-cart .qty:hover,
.cps-checkout input:hover,
.cps-checkout textarea:hover,
.cps-checkout select:hover,
.cps-tk__nhap:hover {
	box-shadow: inset 0 0 0 1px var(--cps-c-primary-dark);
}

.cps-cart .qty:focus,
.cps-checkout input:focus,
.cps-checkout textarea:focus,
.cps-checkout select:focus,
.cps-tk__nhap:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 2px var(--cps-c-primary-dark),
		0 0 0 3px rgba(255, 215, 0, 0.45);
}

/*
 * Nut chinh. PHAI go dem, le va min-height cua Flatsome: ho dat cho MOI
 * the <button> mot bo "padding: 0 18.6px; margin: 0 15.5px 15.5px 0;
 * min-height", de nguyen thi nut lech sang trai va thua khoang trong duoi.
 */
.cps-cart__capnhat,
.cps-thankyou__chinh,
.cps-cart-trong__nut,
.cps-tk__nut,
.cps-checkout .button,
.cps-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	height: 48px;
	padding: 0 var(--cps-sp-5);
	margin: 0;
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-cta);
	font-family: inherit;
	font-size: var(--cps-fs-base);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-on-primary);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.cps-cart__capnhat:hover,
.cps-thankyou__chinh:hover,
.cps-cart-trong__nut:hover,
.cps-tk__nut:hover,
.cps-checkout .button:hover,
.cps-checkout #place_order:hover {
	filter: brightness(1.06);
	color: var(--cps-c-on-primary);
}

.cps-cart__capnhat:focus-visible,
.cps-thankyou__chinh:focus-visible,
.cps-cart-trong__nut:focus-visible,
.cps-tk__nut:focus-visible,
.cps-checkout #place_order:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

/* Nut phu: vien, nen trang. */
.cps-tk__nut--phu,
.cps-thankyou__phu-nut {
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 2px var(--cps-c-primary-dark);
	color: var(--cps-c-primary-text);
}

.cps-tk__nut--phu:hover,
.cps-thankyou__phu-nut:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

/* ================================================================
   1. GIO HANG
   ================================================================ */

.cps-cart {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-5);
	padding: var(--cps-sp-5) 0 var(--cps-sp-8);
}

.cps-cart__form {
	flex: 1 1 auto;
	min-width: 0;
}

.cps-cart__head {
	display: flex;
	align-items: baseline;
	gap: var(--cps-sp-3);
	margin-bottom: var(--cps-sp-4);
}

.cps-cart__title {
	width: auto;
	margin: 0;
	font-size: var(--cps-fs-price);
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-cart__count {
	margin: 0;
	font-size: var(--cps-fs-md);
	color: var(--cps-c-muted);
}

.cps-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-cart__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--cps-sp-4);
	padding: var(--cps-sp-4);
	margin-bottom: var(--cps-sp-3);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-the-bong);
}

.cps-cart__anh {
	flex: none;
	width: 88px;
	height: 88px;
}

.cps-cart__anh img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
}

.cps-cart__chu {
	flex: 1 1 auto;
	min-width: 0;
	/* Chua nut xoa o goc phai - de chu khong chui xuong duoi no. */
	padding-right: var(--cps-sp-5);
}

.cps-cart__ten {
	margin: 0 0 var(--cps-sp-1);
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-semibold);
}

.cps-cart__ten a {
	color: var(--cps-c-heading);
}

.cps-cart__ten a:hover {
	color: var(--cps-c-primary-text);
}

.cps-cart__gia-don {
	margin: 0;
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

.cps-cart__moi {
	margin-left: 2px;
}

.cps-cart__sl {
	flex: none;
	width: 110px;
}

.cps-cart__sl .quantity {
	display: block;
	width: 100%;
	margin: 0;
}

.cps-cart__sl .qty {
	height: 40px;
	padding: 0 var(--cps-sp-2);
	text-align: center;
}

.cps-cart__tong {
	flex: none;
	min-width: 120px;
	font-size: var(--cps-fs-base);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary-text);
	text-align: right;
}

/*
 * Nut xoa o goc tren ben phai the. Dat o dau dong nhu ban goc thi no nam
 * ngay canh o so luong - rat de bam nham khi dinh sua so luong.
 */
.cps-cart__xoa {
	position: absolute;
	top: var(--cps-sp-2);
	right: var(--cps-sp-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--cps-r-full);
	color: var(--cps-c-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cps-cart__xoa:hover {
	background: #fff0f0;
	color: #a01818;
}

.cps-cart__xoa .cps-icon {
	width: 14px;
	height: 14px;
}

.cps-cart__hanh-dong {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	margin-top: var(--cps-sp-4);
}

.cps-cart__tiep {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-sp-1);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

.cps-cart__tiep-icon {
	width: 12px;
	height: 12px;
	transform: rotate(90deg);
}

/* Chua doi so luong thi khong co gi de cap nhat - lam nut mo di. */
.cps-cart__capnhat[disabled] {
	filter: grayscale(0.6);
	opacity: 0.6;
	cursor: default;
}

/* ---- Cot tong tien ---- */

.cps-cart__ben {
	flex: none;
	width: 340px;
}

.cps-cart__tomtat {
	position: sticky;
	top: var(--cps-sp-4);
	padding: var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-the-bong);
}

.cps-cart__tomtat .cart_totals > h2 {
	width: auto;
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-cart__tomtat table {
	width: 100%;
	margin: 0 0 var(--cps-sp-4);
	border: 0;
}

.cps-cart__tomtat table th,
.cps-cart__tomtat table td {
	padding: var(--cps-sp-2) 0;
	border: 0;
	border-bottom: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-md);
	text-align: left;
	vertical-align: top;
}

.cps-cart__tomtat table td {
	text-align: right;
}

.cps-cart__tomtat table th {
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-text);
}

.cps-cart__tomtat .order-total th,
.cps-cart__tomtat .order-total td {
	border-bottom: 0;
	padding-top: var(--cps-sp-3);
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-strong);
}

.cps-cart__tomtat .order-total td .amount {
	color: var(--cps-c-primary-text);
}

.cps-cart__tomtat .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	height: 52px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-cta);
	font-size: var(--cps-fs-base);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-on-primary);
	text-transform: uppercase;
}

.cps-cart__tomtat .checkout-button:hover {
	filter: brightness(1.06);
	color: var(--cps-c-on-primary);
}

/* ---- Gio hang trong ---- */

.cps-cart-trong {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--cps-sp-8) 0;
	text-align: center;
}

.cps-cart-trong__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto var(--cps-sp-4);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-cart-trong__icon .cps-icon {
	width: 40px;
	height: 40px;
}

.cps-cart-trong__title {
	width: auto;
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-xl);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-cart-trong__desc {
	margin: 0 0 var(--cps-sp-5);
	color: var(--cps-c-text);
}

.cps-cart-trong__goi {
	margin-top: var(--cps-sp-8);
	text-align: left;
}

.cps-cart-trong__goi-title {
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
	text-align: center;
}

.cps-cart-trong__goi-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	overflow: hidden;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
}

.cps-cart-trong__goi-item {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-3);
	background: var(--cps-c-bg);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
}

.cps-cart-trong__goi-item:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-heading);
}

.cps-cart-trong__goi-anh {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* ================================================================
   2. THANH TOAN
   ================================================================ */

.cps-checkout {
	padding: var(--cps-sp-5) 0 var(--cps-sp-8);
}

.cps-checkout__cot {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-5);
}

.cps-checkout__trai {
	flex: 1 1 auto;
	min-width: 0;
}

.cps-checkout__phai {
	flex: none;
	width: 380px;
}

.cps-checkout__title {
	width: auto;
	margin: 0 0 var(--cps-sp-4);
	font-size: var(--cps-fs-price);
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-checkout__phu {
	width: auto;
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-checkout__khoi,
.cps-checkout__tomtat {
	padding: var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-the-bong);
}

/* O tom tat DINH LAI khi cuon - form ben trai dai hon nhieu. */
.cps-checkout__tomtat {
	position: sticky;
	top: var(--cps-sp-4);
}

.cps-checkout h3 {
	width: auto;
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-base);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

/*
 * PHAI ep "width: 100%" va bo float.
 *
 * WooCommerce gan cho cac o class "form-row-first" / "form-row-last" kem
 * san "width: 47%; float: left" - kieu bo cuc hai cot doi cu. Ta da xep
 * hai cot bang grid o ngoai roi, de nguyen thi moi o chi con 47% cua mot
 * cot, tuc chua toi mot phan tu chieu ngang.
 */
.cps-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-1);
	width: 100%;
	padding: 0;
	margin: 0 0 var(--cps-sp-4);
	float: none;
}

.cps-checkout .form-row label {
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-checkout .form-row .required {
	color: #d70018;
	text-decoration: none;
}

/* Hai o nam canh nhau (tinh / phuong) tren man hinh rong. */
@media (min-width: 768px) {
	.cps-checkout .woocommerce-billing-fields__field-wrapper,
	.cps-checkout .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--cps-sp-4);
	}

	/* Nhung o can ca hang: dia chi, ghi chu. */
	.cps-checkout #billing_address_1_field,
	.cps-checkout #billing_address_2_field,
	.cps-checkout #order_comments_field,
	.cps-checkout .notes {
		grid-column: 1 / -1;
	}
}

/* ---- Bang don hang ben phai ---- */

.cps-checkout .shop_table {
	width: 100%;
	margin: 0 0 var(--cps-sp-4);
	border: 0;
}

.cps-checkout .shop_table th,
.cps-checkout .shop_table td {
	padding: var(--cps-sp-2) 0;
	border: 0;
	border-bottom: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-md);
	text-align: left;
	vertical-align: top;
}

.cps-checkout .shop_table td {
	text-align: right;
}

.cps-checkout .shop_table thead th {
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
	text-transform: uppercase;
}

.cps-checkout .shop_table .order-total th,
.cps-checkout .shop_table .order-total td {
	border-bottom: 0;
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-bold);
}

.cps-checkout .shop_table .order-total td .amount {
	color: var(--cps-c-primary-text);
}

/* Danh sach cach van chuyen. */
.cps-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-checkout #shipping_method li {
	margin: 0 0 var(--cps-sp-2);
}

.cps-checkout #shipping_method label {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-sp-2);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
}

/* ---- Cach thanh toan ---- */

.cps-checkout .wc_payment_methods {
	margin: 0 0 var(--cps-sp-4);
	padding: 0;
	list-style: none;
}

/*
 * O radio nam NGOAI the <label> trong khuon cua WooCommerce, la anh em
 * cua no. Nen phai xep ca <li> thanh flex thi cham chon moi thang hang
 * voi ten cach thanh toan; chi xep ben trong label thoi thi cham bi day
 * len mot dong rieng o goc.
 */
.cps-checkout .wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 var(--cps-sp-4);
	margin-bottom: var(--cps-sp-2);
	border-radius: var(--cps-r-sm);
	box-shadow: inset 0 0 0 1px var(--cps-c-border);
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.cps-checkout .wc_payment_method > input[type="radio"] {
	flex: none;
	margin: 0;
}

.cps-checkout .wc_payment_method:has(input:checked) {
	background: var(--cps-c-primary-pale);
	box-shadow: inset 0 0 0 2px var(--cps-c-primary-dark);
}

.cps-checkout .wc_payment_method > label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-3) 0 var(--cps-sp-3) var(--cps-sp-2);
	margin: 0;
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	cursor: pointer;
}

/* Doan mo ta chiem tron mot dong ben duoi cham va nhan. */
.cps-checkout .payment_box {
	flex: 1 1 100%;
	margin: 0;
	padding: 0 0 var(--cps-sp-3);
	background: none;
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

.cps-checkout .payment_box::before {
	display: none;
}

/*
 * O nhap ma giam gia va cac thong bao cua WooCommerce: bo vien vang day
 * mac dinh cua Flatsome, chi giu mot vach ben trai.
 */
.cps-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-info,
.cps-checkout .woocommerce-message {
	padding: var(--cps-sp-3) var(--cps-sp-4);
	border: 0;
	border-left: 4px solid var(--cps-c-primary);
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-primary-pale);
	font-size: var(--cps-fs-md);
	color: var(--cps-c-heading);
}

.cps-checkout .checkout_coupon {
	padding: var(--cps-sp-4);
	margin-bottom: var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
}

.cps-checkout .checkout_coupon .form-row {
	margin-bottom: var(--cps-sp-2);
}

.cps-checkout #place_order {
	width: 100%;
	height: 52px;
}

.cps-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--cps-sp-3);
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-md);
}

/* ================================================================
   3. CAM ON
   ================================================================ */

.cps-thankyou {
	max-width: 680px;
	margin: 0 auto;
	padding: var(--cps-sp-6) 0 var(--cps-sp-8);
}

.cps-thankyou__xong,
.cps-thankyou__hong {
	text-align: center;
}

.cps-thankyou__dau {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--cps-sp-4);
	border-radius: var(--cps-r-full);
	background: #e7f6ec;
	color: #146c2e;
}

.cps-thankyou__dau .cps-icon {
	width: 36px;
	height: 36px;
}

.cps-thankyou__title {
	width: auto;
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-price);
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-thankyou__desc {
	margin: 0 0 var(--cps-sp-5);
	color: var(--cps-c-text);
}

/*
 * O ma don. Vien vang day, chu to - day la thu duy nhat noi khach voi don
 * hang khi ho khong co tai khoan, nen phai la thu dap vao mat truoc nhat.
 */
.cps-thankyou__ma {
	padding: var(--cps-sp-5);
	margin-bottom: var(--cps-sp-5);
	border: 3px solid var(--cps-c-primary);
	border-radius: var(--cps-r-xl);
	background: linear-gradient(
		188.66deg,
		var(--cps-c-primary-pale) 28.75%,
		rgba(255, 253, 240, 0.4) 87.64%
	);
	text-align: center;
}

.cps-thankyou__ma-nhan {
	margin: 0;
	font-size: var(--cps-fs-md);
	color: var(--cps-c-text);
}

.cps-thankyou__ma-so {
	margin: var(--cps-sp-1) 0 var(--cps-sp-2);
	font-size: 40px;
	line-height: 1.1;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	/* Cho boi den de sao chep - khach hay chep ma nay gui cho nguoi khac. */
	user-select: all;
}

.cps-thankyou__ma-nhac {
	max-width: 420px;
	margin: 0 auto var(--cps-sp-4);
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

.cps-thankyou__bang {
	margin: 0 0 var(--cps-sp-5);
	padding: var(--cps-sp-4) var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-the-bong);
	list-style: none;
}

.cps-thankyou__bang li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cps-sp-4);
	padding: var(--cps-sp-2) 0;
	border-bottom: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-md);
}

.cps-thankyou__bang li:last-child {
	border-bottom: 0;
}

.cps-thankyou__bang span {
	color: var(--cps-c-muted);
}

.cps-thankyou__bang strong {
	color: var(--cps-c-strong);
	text-align: right;
}

.cps-thankyou__bang-tong strong,
.cps-thankyou__bang-tong strong .amount {
	font-size: var(--cps-fs-lg);
	color: var(--cps-c-primary-text);
}

.cps-thankyou__nut {
	display: flex;
	justify-content: center;
	gap: var(--cps-sp-3);
}

/* Bang chi tiet don do WooCommerce in ra sau cac khoi tren. */
.cps-thankyou .woocommerce-order-details,
.cps-thankyou .woocommerce-customer-details {
	margin-top: var(--cps-sp-6);
}

.cps-thankyou .woocommerce-order-details__title,
.cps-thankyou .woocommerce-column__title {
	width: auto;
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-bold);
	text-transform: uppercase;
}

.cps-thankyou .shop_table {
	width: 100%;
	border: 0;
}

.cps-thankyou .shop_table th,
.cps-thankyou .shop_table td {
	padding: var(--cps-sp-2) 0;
	border: 0;
	border-bottom: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-md);
	text-align: left;
}

.cps-thankyou .shop_table td:last-child,
.cps-thankyou .shop_table th:last-child {
	text-align: right;
}

/* ================================================================
   4. TAI KHOAN
   ================================================================ */

.cps-tk {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--cps-sp-6) 0 var(--cps-sp-8);
}

.cps-tk__cot {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cps-sp-4);
}

/* Tat dang ky thi con mot the - khong de no keo dai het chieu ngang. */
.cps-tk__cot--mot {
	grid-template-columns: minmax(0, 460px);
	justify-content: center;
}

.cps-tk__the {
	padding: var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-the-bong);
}

.cps-tk__title {
	width: auto;
	margin: 0 0 var(--cps-sp-4);
	font-size: var(--cps-fs-xl);
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-tk__o {
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-1);
	margin: 0 0 var(--cps-sp-4);
}

.cps-tk__o label {
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-tk__o .required {
	color: #d70018;
	text-decoration: none;
}

.cps-tk__hang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	margin: 0 0 var(--cps-sp-4);
	font-size: var(--cps-fs-md);
}

.cps-tk__nho {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-sp-2);
	margin: 0;
	color: var(--cps-c-text);
	cursor: pointer;
}

.cps-tk__quen {
	color: var(--cps-c-primary-text);
	font-weight: var(--cps-fw-medium);
}

.cps-tk__nut {
	width: 100%;
}

.cps-tk__nhac {
	margin: 0 0 var(--cps-sp-4);
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

/*
 * Khoi nhac "khong can tai khoan van tra cuu duoc".
 *
 * Phan lon khach vao trang nay chi de xem don da dat - ma tao tai khoan
 * bay gio cung khong xem duoc don ho dat luc chua dang nhap. Chi thang
 * cho ho duong ngan hon.
 */
.cps-tk__khongcan {
	margin-top: var(--cps-sp-5);
	padding: var(--cps-sp-4) var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg-grey);
	text-align: center;
}

.cps-tk__khongcan-title {
	margin: 0 0 var(--cps-sp-1);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-tk__khongcan-desc {
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-text);
}

.cps-tk__khongcan-nut {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cps-sp-2);
}

.cps-tk__khongcan-nut a {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 var(--cps-sp-3);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-border-gallery);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
}

.cps-tk__khongcan-nut a:hover {
	background: var(--cps-c-primary-pale);
	box-shadow: inset 0 0 0 1px var(--cps-c-primary-dark);
	color: var(--cps-c-primary-text);
}

/* ================================================================
   5. MAN HINH NHO
   ================================================================ */

@media (max-width: 991px) {
	.cps-cart,
	.cps-checkout__cot {
		flex-direction: column;
	}

	.cps-cart__ben,
	.cps-checkout__phai {
		width: 100%;
	}

	/* Xep doc roi thi khong con cho de dinh - bo sticky di. */
	.cps-cart__tomtat,
	.cps-checkout__tomtat {
		position: static;
	}
}

@media (max-width: 767px) {

	/*
	 * Dien thoai: nut "Tien hanh thanh toan" DINH O DAY MAN HINH.
	 *
	 * Xep doc roi thi o tong tien nam duoi cung, khach phai cuon het gio
	 * hang moi thay duoc nut - gio vai mon la nut nam ngoai man hinh suot
	 * ca luot xem. Trang mau cung dinh nut nay.
	 *
	 * Dem duoi trang bang chieu cao thanh (52 + 2 x 12) de dong cuoi cung
	 * cua trang khong bi thanh de len. Dem dat o BODY chu khong phai o
	 * .cps-main: chan trang nam sau main, dem o main thi cuon xuong het
	 * trang thanh van che mat dong cuoi cua chan trang.
	 */
	body.woocommerce-cart {
		padding-bottom: 76px;
	}

	.cps-cart__tomtat .wc-proceed-to-checkout {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		padding: var(--cps-sp-3) 10px;
		margin: 0;
		background: var(--cps-c-bg);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.cps-tk__cot {
		grid-template-columns: 1fr;
	}

	.cps-cart-trong__goi-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.cps-thankyou__ma-so {
		font-size: 32px;
	}

	.cps-thankyou__nut {
		flex-direction: column;
	}

	/*
	 * The hang trong gio xep lai: anh + ten o tren, so luong va thanh tien
	 * o duoi. Giu nguyen mot hang thi o so luong con khoang 60px.
	 */
	.cps-cart__item {
		flex-wrap: wrap;
		gap: var(--cps-sp-3);
	}

	.cps-cart__chu {
		flex: 1 1 55%;
	}

	.cps-cart__sl {
		width: 100px;
	}

	.cps-cart__tong {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cps-cart__hanh-dong {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cps-cart__capnhat {
		width: 100%;
	}

	.cps-cart__tiep {
		justify-content: center;
	}
}