:root {
	--moon-loyalty-orange: #ef7f45;
	--moon-loyalty-deep: #d96531;
	--moon-loyalty-ink: #47352c;
	--moon-loyalty-muted: #836f63;
	--moon-loyalty-line: #eadfd7;
	--moon-loyalty-soft: #fff7ef;
}

.moon-loyalty-checkout-box,
.moon-checkin-gift-checkout,
.moon-checkin-gift-checkout *,
.moon-loyalty-dashboard-card,
.moon-loyalty-account,
.moon-loyalty-account * {
	box-sizing: border-box;
}

.moon-loyalty-checkout-box {
	margin: 0 0 20px;
	padding: 18px;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 18px;
	background: linear-gradient(135deg, #fffaf5, #fff1e5);
	box-shadow: 0 10px 25px rgba(89, 53, 32, .06);
	color: var(--moon-loyalty-ink);
}

.moon-loyalty-checkout-box.is-busy {
	opacity: .68;
	pointer-events: none;
}

.moon-checkin-gift-checkout {
	margin: 0 0 16px;
	padding: 15px 16px;
	border: 1px solid #efd8aa;
	border-radius: 16px;
	background: linear-gradient(135deg, #fffaf0, #fff0d1);
	color: var(--moon-loyalty-ink);
	box-shadow: 0 9px 22px rgba(128, 76, 30, .08);
}

.moon-checkin-gift-checkout > strong,
.moon-checkin-gift-checkout > small {
	display: block;
}

.moon-checkin-gift-checkout > strong {
	margin-bottom: 8px;
	font-size: 16px;
}

.moon-checkin-gift-checkout label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.45;
	cursor: pointer;
}

.moon-checkin-gift-checkout input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--moon-loyalty-deep);
}

.moon-checkin-gift-checkout > small {
	margin: 7px 0 0 27px;
	color: var(--moon-loyalty-muted);
	font-size: 11px;
	line-height: 1.45;
}

.moon-loyalty-checkout-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}

.moon-loyalty-checkout-box__head > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.moon-loyalty-checkout-box__head span {
	color: var(--moon-loyalty-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.moon-loyalty-checkout-box__head strong {
	font-size: 19px;
	line-height: 1.3;
}

.moon-loyalty-checkout-box__head > b {
	flex: 0 0 auto;
	padding: 9px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--moon-loyalty-deep);
	font-size: 14px;
	box-shadow: inset 0 0 0 1px rgba(222, 127, 74, .24);
}

.moon-loyalty-checkout-box__form > label {
	display: block;
	margin-bottom: 7px;
	font-weight: 700;
}

.moon-loyalty-checkout-box__controls {
	display: grid;
	grid-template-columns: minmax(110px, 1fr) auto auto auto;
	gap: 8px;
	align-items: stretch;
}

.moon-loyalty-checkout-box__controls input {
	width: 100%;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 13px;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
}

.moon-loyalty-checkout-box__controls .button {
	min-height: 44px;
	margin: 0 !important;
	padding: 9px 13px !important;
	border-radius: 12px !important;
	white-space: nowrap;
}

.moon-loyalty-checkout-box__hint,
.moon-loyalty-checkout-box__empty,
.moon-loyalty-checkout-box--guest p {
	margin: 10px 0 0;
	color: var(--moon-loyalty-muted);
	font-size: 12px;
	line-height: 1.55;
}

.moon-loyalty-checkout-box__legal {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--moon-loyalty-line);
	font-size: 11px;
	line-height: 1.5;
}

.moon-loyalty-checkout-box__legal a {
	color: var(--moon-loyalty-deep);
}

.moon-loyalty-checkout-box__message {
	min-height: 0;
	margin-top: 8px;
	color: var(--moon-loyalty-deep);
	font-size: 12px;
	font-weight: 700;
}

.moon-loyalty-dashboard-card {
	position: relative;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px 22px;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 18px;
	background:
		radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .85), transparent 32%),
		linear-gradient(135deg, #fff6ed, #ffead9);
	box-shadow: 0 10px 25px rgba(78, 49, 34, .05);
}

.moon-loyalty-dashboard-card__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--moon-loyalty-orange), var(--moon-loyalty-deep));
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	box-shadow: 0 10px 22px rgba(229, 118, 60, .22);
}

.moon-loyalty-dashboard-card__copy {
	min-width: 0;
}

.moon-loyalty-dashboard-card__copy > span {
	display: block;
	color: #a06443;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.moon-loyalty-dashboard-card__copy > strong {
	display: block;
	margin: 3px 0;
	color: var(--moon-loyalty-ink);
	font-size: 22px;
	line-height: 1.2;
}

.moon-loyalty-dashboard-card__copy p,
.moon-loyalty-dashboard-card__copy small {
	display: block;
	margin: 0;
	color: var(--moon-loyalty-muted);
	font-size: 12px;
	line-height: 1.5;
}

.moon-loyalty-dashboard-card__copy small {
	margin-top: 4px;
	color: var(--moon-loyalty-deep);
	font-weight: 700;
}

.moon-loyalty-dashboard-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid #efcfba;
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	color: var(--moon-loyalty-deep);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.moon-loyalty-account {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	color: var(--moon-loyalty-ink);
}

.moon-loyalty-account__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 26px 28px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .28), transparent 34%),
		linear-gradient(135deg, #f58d54, #eb7139);
	color: #fff;
	box-shadow: 0 14px 34px rgba(221, 103, 48, .2);
}

.moon-loyalty-account__hero > div:first-child > span {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .88;
}

.moon-loyalty-account__hero h2 {
	margin: 4px 0 7px;
	color: #fff;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.1;
}

.moon-loyalty-account__hero p {
	max-width: 650px;
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font-size: 13px;
	line-height: 1.55;
}

.moon-loyalty-account__balance {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	column-gap: 7px;
	min-width: 190px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 18px;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(8px);
	text-align: right;
}

.moon-loyalty-account__balance small {
	grid-column: 1 / -1;
	font-size: 11px;
	opacity: .85;
}

.moon-loyalty-account__balance strong {
	font-size: 32px;
	line-height: 1;
}

.moon-loyalty-account__balance span {
	font-weight: 800;
}

.moon-loyalty-account__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.moon-loyalty-account__facts article {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 17px 18px;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 16px;
	background: #fff;
}

.moon-loyalty-account__facts small,
.moon-loyalty-account__section-head span {
	color: var(--moon-loyalty-deep);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.moon-loyalty-account__facts strong {
	font-size: 19px;
}

.moon-loyalty-account__facts span {
	color: var(--moon-loyalty-muted);
	font-size: 11px;
}

.moon-loyalty-account__notice {
	padding: 13px 15px;
	border: 1px solid #f0d4bd;
	border-radius: 13px;
	background: #fff7ec;
	color: #87593b;
	font-size: 12px;
	line-height: 1.55;
}

.moon-loyalty-account__notice--warning {
	border-color: #e9c8c1;
	background: #fff4f2;
	color: #8b493e;
}

.moon-loyalty-account__history {
	overflow: hidden;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 18px;
	background: #fff;
}

.moon-loyalty-account__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--moon-loyalty-line);
}

.moon-loyalty-account__section-head h3 {
	margin: 2px 0 0;
	font-size: 20px;
}

.moon-loyalty-account__section-head > a {
	color: var(--moon-loyalty-deep);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.moon-loyalty-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.moon-loyalty-table {
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse;
}

.moon-loyalty-table th,
.moon-loyalty-table td {
	padding: 13px 15px !important;
	border: 0 !important;
	border-bottom: 1px solid #eee7e2 !important;
	text-align: left;
	vertical-align: middle;
	font-size: 12px;
}

.moon-loyalty-table th {
	background: #fffaf6;
	color: #745848;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.moon-loyalty-table td:nth-last-child(-n+2),
.moon-loyalty-table th:nth-last-child(-n+2) {
	text-align: right;
	white-space: nowrap;
}

.moon-loyalty-table .is-positive {
	color: #2f8b55;
}

.moon-loyalty-table .is-negative {
	color: #c14c3a;
}

.moon-loyalty-account__empty {
	padding: 34px 20px;
	text-align: center;
}

.moon-loyalty-account__empty p {
	margin: 6px 0 0;
	color: var(--moon-loyalty-muted);
	font-size: 12px;
}

.moon-loyalty-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 14px;
}

.moon-loyalty-pagination a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--moon-loyalty-line);
	border-radius: 10px;
	color: var(--moon-loyalty-ink);
	text-decoration: none;
}

.moon-loyalty-pagination a.is-current {
	border-color: var(--moon-loyalty-orange);
	background: var(--moon-loyalty-orange);
	color: #fff;
}

.moon-loyalty-account__policies {
	padding: 4px 2px;
	color: var(--moon-loyalty-muted);
	font-size: 11px;
	line-height: 1.6;
	text-align: center;
}

.moon-loyalty-account__policies a {
	color: var(--moon-loyalty-deep);
}

@media (max-width: 782px) {
	.moon-loyalty-checkout-box {
		margin: 0 0 14px;
		padding: 14px 12px;
		border-radius: 14px;
	}

	.moon-loyalty-checkout-box__head {
		align-items: flex-start;
		gap: 10px;
	}

	.moon-loyalty-checkout-box__head strong {
		font-size: 16px;
	}

	.moon-loyalty-checkout-box__head > b {
		padding: 7px 9px;
		font-size: 11px;
	}

	.moon-loyalty-checkout-box__controls {
		grid-template-columns: minmax(0, 1fr) 1fr;
	}

	.moon-loyalty-checkout-box__controls input {
		grid-column: 1 / -1;
	}

	.moon-loyalty-checkout-box__controls .button {
		white-space: normal;
	}

	.moon-loyalty-dashboard-card {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 10px;
		padding: 13px;
		border-radius: 0;
	}

	.moon-loyalty-dashboard-card__icon {
		width: 44px;
		height: 44px;
		border-radius: 13px;
		font-size: 18px;
	}

	.moon-loyalty-dashboard-card__copy > strong {
		font-size: 18px;
	}

	.moon-loyalty-dashboard-card__copy p,
	.moon-loyalty-dashboard-card__copy small {
		font-size: 10px;
	}

	.moon-loyalty-dashboard-card__link {
		grid-column: 1 / -1;
		width: 100%;
		border-radius: 11px;
	}

	.moon-loyalty-account {
		gap: 10px;
	}

	.moon-loyalty-account__hero {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 20px 15px;
		border-radius: 0;
	}

	.moon-loyalty-account__hero h2 {
		font-size: 28px;
	}

	.moon-loyalty-account__balance {
		width: 100%;
		min-width: 0;
		text-align: left;
	}

	.moon-loyalty-account__facts {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.moon-loyalty-account__facts article,
	.moon-loyalty-account__notice {
		border-radius: 0;
	}

	.moon-loyalty-account__history {
		border-radius: 0;
	}

	.moon-loyalty-account__section-head {
		padding: 14px 12px;
	}

	.moon-loyalty-table thead {
		display: none;
	}

	.moon-loyalty-table,
	.moon-loyalty-table tbody,
	.moon-loyalty-table tr,
	.moon-loyalty-table td {
		display: block;
		width: 100%;
	}

	.moon-loyalty-table tr {
		padding: 10px 12px;
		border-bottom: 1px solid #eee7e2;
	}

	.moon-loyalty-table td {
		display: grid;
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 10px;
		padding: 4px 0 !important;
		border: 0 !important;
		text-align: right !important;
		white-space: normal !important;
	}

	.moon-loyalty-table td::before {
		content: attr(data-title);
		color: var(--moon-loyalty-muted);
		font-size: 10px;
		font-weight: 800;
		text-align: left;
		text-transform: uppercase;
	}

	.moon-loyalty-account__policies {
		padding: 8px 12px 18px;
	}
}

/* 1.1.5 - Khối MOON dự kiến theo đúng bố cục ảnh mẫu người dùng. */
.woocommerce-checkout-review-order-table .moon-loyalty-earn-preview-row > td.moon-loyalty-earn-preview-cell {
	padding: 0 !important;
	border-top: 0 !important;
	border-bottom: 1px solid rgba(236, 205, 179, .58) !important;
	background: #fffaf5 !important;
	text-align: left !important;
}

.moon-loyalty-earn-card {
	min-height: 92px;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 116px;
	align-items: center;
	column-gap: 8px;
	padding: 8px 10px 8px 8px;
	color: #5d4b40;
}

.moon-loyalty-earn-card__coin {
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.moon-loyalty-earn-card__coin img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	object-position: center;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.moon-loyalty-earn-card__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	line-height: 1.15;
}

.moon-loyalty-earn-card__label {
	display: block;
	margin-bottom: 7px;
	color: #5d4b40;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.moon-loyalty-earn-card__amount {
	display: block;
	color: #ef773d !important;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.25px;
	white-space: nowrap;
}

.moon-loyalty-earn-card__note {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	color: #9d8678;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

.moon-loyalty-earn-card__info {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #b39a8b;
	border-radius: 50%;
	color: #9d8678;
	font-size: 10px;
	font-family: Arial, sans-serif;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 480px) {
	.moon-loyalty-earn-card {
		min-height: 88px;
		grid-template-columns: 78px minmax(0, 1fr) 104px;
		column-gap: 6px;
		padding: 7px 8px 7px 6px;
	}

	.moon-loyalty-earn-card__coin,
	.moon-loyalty-earn-card__coin img {
		width: 72px;
		height: 72px;
	}

	.moon-loyalty-earn-card__label {
		margin-bottom: 6px;
		font-size: 11px;
	}

	.moon-loyalty-earn-card__amount {
		font-size: 19px;
	}

	.moon-loyalty-earn-card__note {
		gap: 6px;
		font-size: 9.6px;
	}
}

/* 1.2.2 - Nút điểm danh ổn định trong Tài khoản và mốc thưởng ngày 7 nổi bật. */
body.moon-checkin-open {
	overflow: hidden !important;
}

.moon-checkin-modal,
.moon-checkin-modal *,
.moon-checkin-account,
.moon-checkin-account * {
	box-sizing: border-box;
}

.moon-checkin-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 18px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease;
}

.moon-checkin-modal.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.moon-checkin-modal.is-closing {
	opacity: 0;
	pointer-events: none;
}

.moon-checkin-modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(55, 37, 28, .66);
	box-shadow: none;
	backdrop-filter: blur(5px);
	cursor: default;
}

.moon-checkin-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 470px);
	max-height: calc(100dvh - 36px);
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, .74);
	border-radius: 28px;
	background: #fffaf6;
	box-shadow: 0 28px 85px rgba(48, 27, 17, .34);
	color: var(--moon-loyalty-ink);
	transform: translateY(18px) scale(.96);
	transition: transform .26s cubic-bezier(.2, .75, .25, 1);
	scrollbar-width: thin;
	scrollbar-color: #e6c5ad transparent;
}

.moon-checkin-modal.is-visible .moon-checkin-dialog {
	transform: translateY(0) scale(1);
}

.moon-checkin-dialog__close {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 0 2px;
	border: 1px solid rgba(255, 255, 255, .48);
	border-radius: 50%;
	background: rgba(91, 45, 20, .2);
	box-shadow: none;
	color: #fff;
	font: 300 26px/1 Arial, sans-serif;
	cursor: pointer;
}

.moon-checkin-dialog__close:hover,
.moon-checkin-dialog__close:focus-visible {
	background: rgba(91, 45, 20, .36);
	outline: 2px solid rgba(255, 255, 255, .78);
	outline-offset: 2px;
}

.moon-checkin-dialog__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 238px;
	padding: 30px 50px 42px;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 228, 144, .42) 0 4px, transparent 5px),
		radial-gradient(circle at 87% 27%, rgba(255, 243, 205, .56) 0 5px, transparent 6px),
		radial-gradient(circle at 77% 80%, rgba(255, 225, 136, .35) 0 3px, transparent 4px),
		linear-gradient(145deg, #f8a760, #e87038);
	color: #fff;
	text-align: center;
}

.moon-checkin-dialog__hero::before,
.moon-checkin-dialog__hero::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
}

.moon-checkin-dialog__hero::before {
	width: 220px;
	height: 220px;
	top: -130px;
	left: -80px;
}

.moon-checkin-dialog__hero::after {
	width: 180px;
	height: 180px;
	right: -90px;
	bottom: -100px;
}

.moon-checkin-dialog__eyebrow {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.moon-checkin-dialog__coin {
	position: relative;
	z-index: 1;
	width: 92px;
	height: 92px;
	margin: 9px 0 3px;
	filter: drop-shadow(0 12px 16px rgba(110, 51, 15, .18));
}

.moon-checkin-dialog__coin img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.moon-checkin-dialog__hero h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: clamp(25px, 6vw, 32px);
	line-height: 1.12;
	letter-spacing: -.02em;
}

.moon-checkin-dialog__hero p {
	position: relative;
	z-index: 1;
	margin: 7px 0 0;
	color: rgba(255, 255, 255, .9);
	font-size: 12px;
	line-height: 1.45;
}

.moon-checkin-dialog__content {
	position: relative;
	z-index: 2;
	margin-top: -24px;
	padding: 0 18px 20px;
}

.moon-checkin-bonus-callout {
	position: relative;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 12px 13px;
	overflow: hidden;
	border: 1px solid #efb447;
	border-radius: 16px;
	background:
		radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .72), transparent 28%),
		linear-gradient(135deg, #fff8cf 0%, #ffe6ad 100%);
	box-shadow: 0 9px 22px rgba(178, 104, 23, .13);
	color: #6a3d1f;
}

.moon-checkin-bonus-callout--popup {
	margin: 0 0 11px;
	box-shadow: 0 12px 26px rgba(121, 69, 24, .16);
}

.moon-checkin-bonus-callout::after {
	content: "";
	position: absolute;
	top: -28px;
	right: -17px;
	width: 86px;
	height: 86px;
	border: 1px solid rgba(203, 122, 29, .16);
	border-radius: 50%;
	pointer-events: none;
}

.moon-checkin-bonus-callout__star {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 15px;
	background: linear-gradient(145deg, #f49a3f, #df6429);
	box-shadow: 0 7px 14px rgba(188, 93, 29, .23);
	color: #fff4b9;
	font-size: 24px;
	line-height: 1;
}

.moon-checkin-bonus-callout__star--gift {
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(213, 138, 37, .38);
	background: #fff;
}

.moon-checkin-bonus-callout__star--gift img {
	display: block;
	width: 165%;
	height: 165%;
	max-width: none;
	object-fit: contain;
	transform: translate(-18%, -8%);
}

.moon-checkin-bonus-callout > div {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.moon-checkin-bonus-callout small {
	display: block;
	margin: 0 0 2px;
	color: #b65a25;
	font-size: 8.5px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.moon-checkin-bonus-callout strong {
	display: block;
	color: #5e351c;
	font-size: 14px;
	line-height: 1.25;
}

.moon-checkin-bonus-callout strong b {
	color: #d4511f;
	font-size: 17px;
	font-weight: 950;
	white-space: normal;
}

.moon-checkin-bonus-callout p {
	margin: 3px 0 0;
	color: #825c3d;
	font-size: 9px;
	line-height: 1.35;
}

.moon-checkin-bonus-callout__reward {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 7px 10px;
	border: 1px solid rgba(217, 99, 42, .24);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: #d65320;
	font-size: 18px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
}

.moon-checkin-progress {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
}

.moon-checkin-progress--popup {
	padding: 14px 12px 12px;
	border: 1px solid #f0ddd0;
	border-radius: 19px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(83, 50, 31, .1);
}

.moon-checkin-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	min-height: 91px;
	padding: 7px 2px 6px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #fff8f1;
	color: #876f60;
	text-align: center;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.moon-checkin-day.is-today {
	border-color: #ef8a50;
	background: #fff1e4;
	box-shadow: 0 5px 13px rgba(226, 111, 52, .14);
	transform: translateY(-2px);
}

.moon-checkin-day.is-complete {
	background: #fff5e7;
}

.moon-checkin-day.is-bonus {
	border-color: #e7a52c;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .9), transparent 35%),
		linear-gradient(180deg, #fff4b9 0%, #ffe2aa 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .64), 0 6px 15px rgba(196, 113, 24, .16);
}

.moon-checkin-day.is-bonus .moon-checkin-day__reward {
	width: auto;
	max-width: calc(100% - 4px);
	padding: 2px 4px;
	border-radius: 999px;
	background: #d95f27;
	color: #fff;
	font-size: clamp(8px, 2.2vw, 11px);
	letter-spacing: 0;
}

.moon-checkin-day.is-bonus.is-today {
	border-color: #d65a23;
	box-shadow: inset 0 0 0 1px #fff, 0 8px 18px rgba(205, 84, 31, .24);
}

.moon-checkin-day__bonus {
	position: absolute;
	top: -8px;
	left: 50%;
	z-index: 2;
	max-width: calc(100% + 8px);
	padding: 2px 5px;
	overflow: hidden;
	border-radius: 999px;
	background: linear-gradient(135deg, #e85f2d, #c9421e);
	box-shadow: 0 3px 7px rgba(179, 65, 23, .2);
	color: #fff;
	font-size: 6px;
	font-weight: 950;
	line-height: 1.2;
	letter-spacing: .02em;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translateX(-50%);
}

.moon-checkin-day__reward {
	display: block;
	width: 100%;
	overflow: hidden;
	color: #d96832;
	font-size: clamp(7px, 1.9vw, 10px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.03em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.moon-checkin-day__coin {
	position: relative;
	display: grid;
	place-items: center;
	width: 41px;
	height: 41px;
	margin: 5px auto 4px;
}

.moon-checkin-day__coin img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: saturate(.9);
}

.moon-checkin-day__coin--gift {
	overflow: hidden;
	border: 1px solid rgba(211, 143, 44, .38);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 8px rgba(119, 75, 35, .12);
}

.moon-checkin-day__coin--gift img {
	width: 168%;
	height: 168%;
	max-width: none;
	object-fit: contain;
	transform: translate(-19%, -8%);
}

.moon-checkin-day__coin b {
	position: absolute;
	inset: 5px;
	display: none;
	place-items: center;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #73a26b;
	box-shadow: 0 3px 8px rgba(61, 102, 55, .22);
	color: #fff;
	font: 900 15px/1 Arial, sans-serif;
}

.moon-checkin-day.is-complete .moon-checkin-day__coin b {
	display: grid;
}

.moon-checkin-day.is-complete .moon-checkin-day__coin img {
	opacity: .22;
}

.moon-checkin-day__label {
	display: block;
	width: 100%;
	overflow: hidden;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.moon-checkin-day.is-today .moon-checkin-day__label {
	color: #d45f2c;
	font-weight: 900;
}

.moon-checkin-dialog__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px 16px;
	margin: 13px 0 11px;
	color: var(--moon-loyalty-muted);
	font-size: 11px;
}

.moon-checkin-dialog__summary strong {
	color: var(--moon-loyalty-deep);
	font-weight: 900;
}

.moon-checkin-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #f39459, #df6530);
	box-shadow: 0 10px 24px rgba(218, 100, 48, .25);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.moon-checkin-button:hover:not(:disabled),
.moon-checkin-button:focus-visible:not(:disabled) {
	background: linear-gradient(135deg, #ea8249, #cf5928);
	box-shadow: 0 13px 28px rgba(218, 100, 48, .31);
	color: #fff;
	transform: translateY(-1px);
}

.moon-checkin-button--bonus:not(.is-complete) {
	gap: 8px;
	border: 2px solid #ffd982;
	background:
		radial-gradient(circle at 88% 20%, rgba(255, 243, 182, .4), transparent 22%),
		linear-gradient(135deg, #f59b3f, #d95324);
	box-shadow: 0 12px 27px rgba(198, 80, 28, .31), inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.moon-checkin-button--bonus:hover:not(:disabled),
.moon-checkin-button--bonus:focus-visible:not(:disabled) {
	background:
		radial-gradient(circle at 88% 20%, rgba(255, 243, 182, .48), transparent 22%),
		linear-gradient(135deg, #ef8c31, #c9451d);
}

.moon-checkin-button__bonus-mark {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(111, 44, 16, .2);
	color: #fff8cf;
	font-size: 8px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: .07em;
	white-space: nowrap;
}

.moon-checkin-button--bonus strong {
	font-size: 16px;
	font-weight: 950;
}

.moon-checkin-button:focus-visible {
	outline: 3px solid rgba(239, 127, 69, .28);
	outline-offset: 3px;
}

.moon-checkin-button.is-complete,
.moon-checkin-button:disabled {
	background: linear-gradient(135deg, #7ca575, #628c5b);
	box-shadow: 0 8px 18px rgba(77, 121, 70, .18);
	opacity: 1;
	cursor: default;
}

.moon-checkin-message {
	min-height: 18px;
	margin: 8px 0 0;
	color: #60845a;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.moon-checkin-message.is-error {
	color: #b44d3d;
}

.moon-checkin-dialog__note {
	display: block;
	margin: 2px auto 0;
	color: #948176;
	font-size: 9.5px;
	line-height: 1.45;
	text-align: center;
}

[data-moon-checkin-root].is-busy {
	opacity: .72;
	pointer-events: none;
}

.moon-checkin-modal.is-success .moon-checkin-dialog__coin {
	animation: moon-checkin-coin-success .62s cubic-bezier(.2, .8, .25, 1);
}

@keyframes moon-checkin-coin-success {
	0% { transform: scale(1) rotate(0); }
	45% { transform: scale(1.18) rotate(-7deg); }
	75% { transform: scale(.96) rotate(4deg); }
	100% { transform: scale(1) rotate(0); }
}

.moon-checkin-account {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	padding: 22px;
	overflow: hidden;
	border: 1px solid #ecd5c3;
	border-radius: 20px;
	background:
		radial-gradient(circle at 93% 5%, rgba(244, 192, 78, .2), transparent 22%),
		linear-gradient(145deg, #fffaf5, #fff2e7);
	box-shadow: 0 10px 26px rgba(83, 50, 31, .06);
}

.moon-checkin-account__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 76px;
	align-items: center;
	gap: 18px;
}

.moon-checkin-account__head > div:first-child > span {
	display: block;
	color: var(--moon-loyalty-deep);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.moon-checkin-account__head h3 {
	margin: 3px 0 5px;
	color: var(--moon-loyalty-ink);
	font-size: 21px;
	line-height: 1.25;
}

.moon-checkin-account__head p {
	margin: 0;
	color: var(--moon-loyalty-muted);
	font-size: 12px;
	line-height: 1.5;
}

.moon-checkin-account__coin {
	width: 76px;
	height: 76px;
	filter: drop-shadow(0 9px 13px rgba(218, 137, 31, .16));
}

.moon-checkin-account__coin img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.moon-checkin-progress--account {
	padding: 12px;
	border: 1px solid #efddd0;
	border-radius: 16px;
	background: rgba(255, 255, 255, .84);
}

.moon-checkin-account__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.moon-checkin-account__gift {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 13px;
	border: 1px solid #edd09b;
	border-radius: 13px;
	background: rgba(255, 245, 213, .85);
	color: #6a3d1f;
}

.moon-checkin-account__gift strong {
	flex: 0 0 auto;
	font-size: 12px;
}

.moon-checkin-account__gift span {
	font-size: 10px;
	line-height: 1.45;
	text-align: right;
}

.moon-checkin-account__stats article {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid #eddfd5;
	border-radius: 12px;
	background: rgba(255, 255, 255, .78);
}

.moon-checkin-account__stats small {
	color: var(--moon-loyalty-muted);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
}

.moon-checkin-account__stats strong {
	overflow: hidden;
	color: var(--moon-loyalty-ink);
	font-size: 14px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.moon-checkin-account > .moon-checkin-button {
	align-self: center;
	width: min(100%, 380px);
}

.moon-checkin-account > footer {
	color: var(--moon-loyalty-muted);
	font-size: 9.5px;
	line-height: 1.45;
	text-align: center;
}

@media (max-width: 600px) {
	.moon-checkin-gift-checkout {
		padding: 12px;
		border-radius: 13px;
	}

	.moon-checkin-gift-checkout > strong {
		font-size: 14px;
	}

	.moon-checkin-modal {
		padding: 10px;
	}

	.moon-checkin-dialog {
		max-height: calc(100dvh - 20px);
		border-radius: 23px;
	}

	.moon-checkin-dialog__hero {
		min-height: 216px;
		padding: 24px 42px 37px;
	}

	.moon-checkin-dialog__coin {
		width: 80px;
		height: 80px;
		margin-top: 7px;
	}

	.moon-checkin-dialog__hero h2 {
		font-size: 25px;
	}

	.moon-checkin-dialog__content {
		padding: 0 10px 15px;
	}

	.moon-checkin-bonus-callout {
		grid-template-columns: 38px minmax(0, 1fr) auto;
		gap: 8px;
		padding: 10px 9px;
		border-radius: 14px;
	}

	.moon-checkin-bonus-callout__star {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		font-size: 20px;
	}

	.moon-checkin-bonus-callout small {
		font-size: 7px;
	}

	.moon-checkin-bonus-callout strong {
		font-size: 11px;
	}

	.moon-checkin-bonus-callout strong b {
		font-size: 14px;
	}

	.moon-checkin-bonus-callout p {
		display: none;
	}

	.moon-checkin-bonus-callout__reward {
		min-height: 31px;
		padding: 6px 8px;
		font-size: 14px;
	}

	.moon-checkin-progress {
		gap: 3px;
	}

	.moon-checkin-progress--popup,
	.moon-checkin-progress--account {
		padding: 10px 6px 9px;
	}

	.moon-checkin-day {
		min-height: 80px;
		padding: 6px 1px 5px;
		border-radius: 9px;
	}

	.moon-checkin-day__coin {
		width: 34px;
		height: 34px;
		margin: 4px auto 3px;
	}

	.moon-checkin-day__coin b {
		inset: 4px;
		font-size: 12px;
	}

	.moon-checkin-day__label {
		font-size: 8px;
	}

	.moon-checkin-day__bonus {
		top: -7px;
		max-width: calc(100% + 6px);
		padding: 2px 3px;
		font-size: 5px;
	}

	.moon-checkin-progress--account .moon-checkin-day__label {
		font-size: 7px;
		letter-spacing: -.04em;
	}

	.moon-checkin-dialog__summary {
		font-size: 10px;
	}

	.moon-checkin-button {
		min-height: 47px;
		font-size: 13px;
	}

	.moon-checkin-button--bonus:not(.is-complete) {
		gap: 6px;
		padding-inline: 11px;
	}

	.moon-checkin-button__bonus-mark {
		min-height: 21px;
		padding: 3px 6px;
		font-size: 7px;
	}

	.moon-checkin-button--bonus strong {
		font-size: 14px;
	}

	.moon-checkin-account {
		gap: 12px;
		padding: 15px 10px;
		border-radius: 0;
	}

	.moon-checkin-account__head {
		grid-template-columns: minmax(0, 1fr) 58px;
		gap: 10px;
		padding-inline: 2px;
	}

	.moon-checkin-account__head h3 {
		font-size: 18px;
	}

	.moon-checkin-account__head p {
		font-size: 10.5px;
	}

	.moon-checkin-account__coin {
		width: 58px;
		height: 58px;
	}

	.moon-checkin-account__stats {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.moon-checkin-account__gift {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.moon-checkin-account__gift span {
		text-align: left;
	}

	.moon-checkin-account__stats article {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 9px 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.moon-checkin-modal,
	.moon-checkin-dialog,
	.moon-checkin-day,
	.moon-checkin-button {
		transition: none !important;
	}

	.moon-checkin-modal.is-success .moon-checkin-dialog__coin {
		animation: none !important;
	}
}


/* 1.1.8 - thanh dùng MOON gọn ngay dưới voucher */
.moon-loyalty-quickbar,
.moon-loyalty-quickbar * {
	box-sizing: border-box;
}

.moon-loyalty-quickbar {
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid #eadfd7;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(89, 53, 32, .04);
	overflow: hidden;
	color: #4e4038;
}

.moon-loyalty-quickbar__top,
.moon-loyalty-quickbar--guest {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 66px;
	padding: 9px 10px;
}

.moon-loyalty-quickbar__icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
}

.moon-loyalty-quickbar__icon img {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.moon-loyalty-quickbar__copy {
	min-width: 0;
}

.moon-loyalty-quickbar__copy strong,
.moon-loyalty-quickbar__copy small {
	display: block;
	margin: 0;
	padding: 0;
}

.moon-loyalty-quickbar__copy strong {
	color: #40352f;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
}

.moon-loyalty-quickbar__copy small {
	margin-top: 2px;
	color: #8a7d74;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
}

.moon-loyalty-quickbar__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 34px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid #f0ddd0;
	border-radius: 999px;
	background: #fffaf6;
	color: #e47f43;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}

.moon-loyalty-quickbar__action span {
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-1px);
}

.moon-loyalty-quickbar__action:hover,
.moon-loyalty-quickbar__action:focus {
	color: #cf6830;
	border-color: #eac6ad;
	background: #fff5ed;
}

.moon-loyalty-quickbar__action.is-disabled,
.moon-loyalty-quickbar__action:disabled {
	opacity: .48;
	cursor: default;
}

.moon-loyalty-quickbar__drawer {
	padding: 10px;
	border-top: 1px solid #f0e7e1;
	background: #fffaf7;
}

.moon-loyalty-quickbar__drawer[hidden] {
	display: none !important;
}

.moon-loyalty-quickbar__drawer > label {
	display: block;
	margin: 0 0 7px;
	color: #5d4e46;
	font-size: 11px;
	font-weight: 700;
}

.moon-loyalty-quickbar .moon-loyalty-checkout-box__controls {
	display: grid;
	grid-template-columns: minmax(84px, 1fr) auto auto auto;
	gap: 6px;
	align-items: stretch;
}

.moon-loyalty-quickbar .moon-loyalty-checkout-box__controls input {
	width: 100%;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #eadfd7;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
}

.moon-loyalty-quickbar .moon-loyalty-checkout-box__controls .button {
	min-height: 38px;
	margin: 0 !important;
	padding: 7px 10px !important;
	border-radius: 10px !important;
	font-size: 11px !important;
	white-space: nowrap;
}

.moon-loyalty-quickbar .moon-loyalty-checkout-box__message {
	min-height: 0;
	margin: 7px 0 0;
	color: #d96f37;
	font-size: 11px;
	font-weight: 700;
}

@media (max-width: 480px) {
	.moon-loyalty-quickbar__top,
	.moon-loyalty-quickbar--guest {
		grid-template-columns: 38px minmax(0, 1fr) auto;
		gap: 8px;
		min-height: 62px;
		padding: 8px 9px;
	}

	.moon-loyalty-quickbar__icon,
	.moon-loyalty-quickbar__icon img {
		width: 34px;
		height: 34px;
	}

	.moon-loyalty-quickbar__copy strong {
		font-size: 12px;
	}

	.moon-loyalty-quickbar__copy small {
		font-size: 10px;
	}

	.moon-loyalty-quickbar__action {
		min-height: 32px;
		padding: 0 10px;
		font-size: 10px;
	}

	.moon-loyalty-quickbar .moon-loyalty-checkout-box__controls {
		grid-template-columns: 1fr 1fr;
	}

	.moon-loyalty-quickbar .moon-loyalty-checkout-box__controls input {
		grid-column: 1 / -1;
	}
}