@keyframes realdevToastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes realdevToastInRight{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@keyframes realdevToastOutRight{0%{opacity:1;transform:translateX(0);max-height:200px;margin-top:0}to{opacity:0;transform:translateX(24px);max-height:0;margin-top:0;padding-top:0;padding-bottom:0}}@keyframes realdevToastInLeft{0%{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}@keyframes realdevToastOutLeft{0%{opacity:1;transform:translateX(0);max-height:200px}to{opacity:0;transform:translateX(-24px);max-height:0;padding-top:0;padding-bottom:0}}@keyframes realdevToastInBottomRight{0%{opacity:0;transform:translate(24px,12px)}to{opacity:1;transform:translate(0,0)}}@keyframes realdevToastOutBottomRight{0%{opacity:1;transform:translate(0,0);max-height:200px}to{opacity:0;transform:translate(24px,12px);max-height:0;padding-top:0;padding-bottom:0}}@keyframes realdevToastInBottomLeft{0%{opacity:0;transform:translate(-24px,12px)}to{opacity:1;transform:translate(0,0)}}@keyframes realdevToastOutBottomLeft{0%{opacity:1;transform:translate(0,0);max-height:200px}to{opacity:0;transform:translate(-24px,12px);max-height:0;padding-top:0;padding-bottom:0}}.realdev-toast-region{position:fixed;z-index:var(--realdev-z-toast);display:flex;flex-direction:column;gap:var(--realdev-space-sm);width:380px;max-width:calc(100vw - 48px);pointer-events:none}.realdev-toast-region[data-realdev-corner=bl],.realdev-toast-region[data-realdev-corner=br]{flex-direction:column-reverse}.realdev-admin-page #realdev-toast-region[data-realdev-corner=tl],.realdev-admin-page #realdev-toast-region[data-realdev-corner=tr],body.admin-bar #realdev-toast-region[data-realdev-corner=tl],body.admin-bar #realdev-toast-region[data-realdev-corner=tr]{top:48px!important}@media screen and (max-width:782px){.realdev-admin-page #realdev-toast-region[data-realdev-corner=tl],.realdev-admin-page #realdev-toast-region[data-realdev-corner=tr],body.admin-bar #realdev-toast-region[data-realdev-corner=tl],body.admin-bar #realdev-toast-region[data-realdev-corner=tr]{top:58px!important}}.realdev-toast{pointer-events:auto;position:relative;overflow:hidden;background:var(--realdev-surface);color:var(--realdev-text);border:1px solid var(--realdev-border);border-left:4px solid var(--realdev-primary);border-radius:var(--realdev-radius-md);box-shadow:var(--realdev-shadow-md);padding:var(--realdev-space-md) var(--realdev-space-lg);padding-bottom:calc(var(--realdev-space-md) + 4px);font-size:var(--realdev-font-size-md);line-height:var(--realdev-line-height-base);display:flex;align-items:flex-start;gap:var(--realdev-space-md);animation-duration:240ms;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.realdev-toast--success{border-left-color:var(--realdev-success)}.realdev-toast--warning{border-left-color:var(--realdev-warning)}.realdev-toast--error{border-left-color:var(--realdev-error)}.realdev-toast--info{border-left-color:var(--realdev-info)}.realdev-toast__content{flex:1;min-width:0}.realdev-toast__message{margin:0;color:inherit;font-size:inherit;line-height:inherit;word-wrap:break-word}.realdev-toast__actions{margin-top:var(--realdev-space-sm);display:flex;gap:var(--realdev-space-sm)}.realdev-toast-action,.realdev-toast__dismiss{background:0 0;border:0;padding:0;cursor:pointer}.realdev-toast-action{color:var(--realdev-primary);font-weight:var(--realdev-font-weight-semibold);font-size:var(--realdev-font-size-sm);text-decoration:none;transition:opacity var(--realdev-transition)}.realdev-toast-action:hover{opacity:.75}.realdev-toast__dismiss{margin:0;color:var(--realdev-text-muted);font-size:20px;line-height:1;opacity:.6;transition:opacity var(--realdev-transition),color var(--realdev-transition)}.realdev-toast__dismiss:hover{opacity:1;color:var(--realdev-text)}.realdev-toast__progress{position:absolute;bottom:0;left:0;height:3px;width:100%;background:currentColor;opacity:.35;transform-origin:left center;animation:realdevToastProgress var(--realdev-toast-duration, 3600ms) linear forwards}.realdev-toast-region[data-realdev-corner=br] .realdev-toast__progress,.realdev-toast-region[data-realdev-corner=tr] .realdev-toast__progress{transform-origin:right center}.realdev-toast--success .realdev-toast__progress{color:var(--realdev-success)}.realdev-toast--warning .realdev-toast__progress{color:var(--realdev-warning)}.realdev-toast--error .realdev-toast__progress{color:var(--realdev-error)}.realdev-toast--info .realdev-toast__progress{color:var(--realdev-info)}.realdev-toast--default .realdev-toast__progress,.realdev-toast:not([class*="--"]) .realdev-toast__progress{color:var(--realdev-primary)}.realdev-toast:hover .realdev-toast__progress{animation-play-state:paused}.realdev-toast[data-persistent=true] .realdev-toast__progress{display:none}.realdev-toast,.realdev-toast-region[data-realdev-corner=tr] .realdev-toast{animation-name:realdevToastInRight}.realdev-toast-region[data-realdev-corner=tr] .realdev-toast.is-dismissing,.realdev-toast.is-dismissing{animation-name:realdevToastOutRight}.realdev-toast-region[data-realdev-corner=tl] .realdev-toast{animation-name:realdevToastInLeft}.realdev-toast-region[data-realdev-corner=tl] .realdev-toast.is-dismissing{animation-name:realdevToastOutLeft}.realdev-toast-region[data-realdev-corner=br] .realdev-toast{animation-name:realdevToastInBottomRight}.realdev-toast-region[data-realdev-corner=br] .realdev-toast.is-dismissing{animation-name:realdevToastOutBottomRight}.realdev-toast-region[data-realdev-corner=bl] .realdev-toast{animation-name:realdevToastInBottomLeft}.realdev-toast-region[data-realdev-corner=bl] .realdev-toast.is-dismissing{animation-name:realdevToastOutBottomLeft}@media (prefers-reduced-motion:reduce){.realdev-toast,.realdev-toast.is-dismissing,.realdev-toast__progress{animation:none}}


@media screen and (max-width:600px){
.realdev-toast-region{width:min(280px,calc(100vw - 20px));max-width:calc(100vw - 20px);gap:6px}
.realdev-toast{padding:10px 12px;padding-bottom:calc(10px + 4px);font-size:13px;line-height:1.35;gap:8px;border-radius:10px;border-left-width:3px;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.realdev-toast__actions{margin-top:6px;gap:6px}
.realdev-toast-action{font-size:12px}
.realdev-toast__dismiss{font-size:16px}
}

/* Tone gần wp-admin — chỉ trong admin (không đè storefront bên dưới). */
body.wp-admin .realdev-toast-region .realdev-toast {
	border-color: #c3c4c7;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	font-size: 13px;
	line-height: 1.45;
	padding: 10px 14px;
	padding-bottom: calc(10px + 4px);
	border-radius: 2px;
}

body.wp-admin .realdev-toast-region .realdev-toast__message {
	font-size: inherit;
}

body.wp-admin .realdev-toast-region .realdev-toast__progress {
	height: 2px;
	opacity: 0.28;
}

/* -----------------------------------------------------------------------------
   Storefront (theme front) — gộp từ assets/front/css/reset.css
   Phụ thuộc --text và biến theme; load sau engine minified phía trên.
   ----------------------------------------------------------------------------- */

@keyframes realdev-toast-enter {
	0% {
		opacity: 0;
		transform: translate3d(0, -10px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes realdev-toast-exit {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	to {
		opacity: 0;
		transform: translate3d(0, -8px, 0);
	}
}

.realdev-toast-region {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

/* Vùng toast upsell «Đã mua»: PC gọn hơn toast hệ thống để không chặn layout shop. */
#realdev-toast-region--purchased.realdev-toast-region {
	width: min(332px, calc(100vw - 32px));
}

body.admin-bar .realdev-toast-region {
	top: 56px;
}

.realdev-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 16px;
	border: 1px solid rgba(34, 43, 79, 0.12);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 18px 40px rgba(22, 34, 61, 0.14);
	color: var(--text);
	pointer-events: auto;
	backdrop-filter: blur(12px);
	transform: translate3d(0, -10px, 0);
	opacity: 0;
	animation: realdev-toast-enter 0.22s ease forwards;
}

.realdev-toast.is-dismissing {
	animation: realdev-toast-exit 0.2s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
	.realdev-toast {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.realdev-toast.is-dismissing {
		animation: none;
		opacity: 0;
		transform: none;
	}
}

.realdev-toast--success {
	border-color: rgba(61, 181, 113, 0.28);
}

.realdev-toast__content {
	flex: 1 1 auto;
	min-width: 0;
}

.realdev-toast__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
}

.realdev-toast__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.realdev-toast-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(13, 84, 252, 0.16);
	background: rgba(13, 84, 252, 0.08);
	color: var(--link);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.realdev-toast-action:focus-visible,
.realdev-toast-action:hover {
	background: rgba(13, 84, 252, 0.14);
	border-color: rgba(13, 84, 252, 0.28);
	color: var(--link-hover);
}

.realdev-toast__dismiss {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -4px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: 0 0;
	color: inherit;
	opacity: 0.72;
}

.realdev-toast__dismiss:focus-visible,
.realdev-toast__dismiss:hover {
	background: rgba(34, 43, 79, 0.08);
	opacity: 1;
}

.realdev-toast__dismiss span {
	font-size: 22px;
	line-height: 1;
}

.realdev-toast--purchased .realdev-toast__content {
	display: block;
}

.realdev-purchased-toast {
	display: flex;
	align-items: center;
	gap: 12px;
}

.realdev-purchased-toast__media {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	overflow: hidden;
	flex: 0 0 auto;
	background: rgba(148, 163, 184, 0.18);
}

.realdev-purchased-toast__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.realdev-purchased-toast__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.realdev-purchased-toast__title {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	color: inherit;
}

.realdev-purchased-toast__product {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--link);
	text-decoration: none;
}

.realdev-purchased-toast__product:focus-visible,
.realdev-purchased-toast__product:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.realdev-purchased-toast__meta {
	font-size: 12px;
	line-height: 1.35;
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.realdev-toast--purchased {
	background: color-mix(in srgb, var(--realdev-surface) 94%, transparent);
	backdrop-filter: saturate(1.1) blur(4px);
	border-left-width: 4px;
}

.realdev-toast--purchased[style*="--realdev-toast-bg"] {
	background: var(--realdev-toast-bg) !important;
}

.realdev-toast--purchased[style*="--realdev-toast-accent"] {
	border-left-color: var(--realdev-toast-accent) !important;
}

.realdev-toast--purchased[style*="--realdev-toast-accent"] .realdev-purchased-toast__title {
	color: color-mix(in srgb, var(--realdev-toast-accent) 78%, #111 22%);
}

.realdev-toast--purchased[style*="--realdev-toast-accent"] .realdev-toast__progress {
	color: var(--realdev-toast-accent);
}

@media (max-width: 849px) {
	/* Toast hệ thống: đáy — giữ neo trái/phải như trước. */
	#realdev-toast-region.realdev-toast-region {
		top: auto !important;
		right: 12px !important;
		bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
		left: 12px !important;
		transform: none !important;
		width: auto !important;
		gap: 8px;
		max-width: min(360px, calc(100vw - 24px));
	}

	/* Toast «Đã mua»: đáy + căn giữa — JS đặt corner/top/right inline nên cần !important; trước đây chỉ #realdev-toast-region được chỉnh nên upsell chiếm mép trên màn hình. */
	#realdev-toast-region--purchased.realdev-toast-region {
		top: auto !important;
		right: auto !important;
		bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: auto !important;
		gap: 8px;
		max-width: min(328px, calc(100vw - 24px));
		align-items: stretch;
	}

	body.admin-bar #realdev-toast-region.realdev-toast-region,
	body.admin-bar #realdev-toast-region--purchased.realdev-toast-region {
		top: auto !important;
	}

	.realdev-toast {
		padding: 9px 11px;
		gap: 8px;
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(22, 34, 61, 0.11);
	}

	.realdev-toast__message {
		font-size: 13px;
		line-height: 1.4;
	}

	.realdev-toast__actions {
		margin-top: 6px;
		gap: 6px;
	}

	.realdev-toast-action {
		min-height: 30px;
		padding: 5px 10px;
		font-size: 12px;
	}

	.realdev-toast__dismiss {
		width: 28px;
		height: 28px;
		margin: -2px -4px 0 0;
	}

	.realdev-toast__dismiss span {
		font-size: 18px;
	}

	.realdev-purchased-toast {
		gap: 8px;
		align-items: flex-start;
	}

	.realdev-purchased-toast__body {
		gap: 2px;
	}

	.realdev-purchased-toast__media {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.realdev-purchased-toast__title {
		font-size: 12px;
		line-height: 1.2;
	}

	.realdev-purchased-toast__product {
		font-size: 13px;
		line-height: 1.3;
	}

	.realdev-purchased-toast__meta {
		font-size: 11px;
		line-height: 1.3;
	}

	.realdev-toast--purchased {
		border-left-width: 3px;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-toast--purchased {
		box-shadow: 0 8px 22px rgba(22, 34, 61, 0.12);
	}
}

@media (max-width: 520px) {
	/* Upsell «Đã mua»: mobile tối giản — bỏ ảnh, một dòng meta, tiêu đề/product không xuống nhiều dòng. */
	#realdev-toast-region--purchased.realdev-toast-region {
		max-width: min(300px, calc(100vw - 20px));
		bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
		gap: 6px;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-toast--purchased {
		padding: 7px 9px;
		gap: 6px;
		border-radius: 11px;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast__media {
		display: none;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast {
		align-items: flex-start;
		gap: 4px;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast__title {
		font-size: 11px;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast__product {
		font-size: 12px;
		line-height: 1.3;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast__meta {
		font-size: 10px;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-toast__dismiss {
		width: 26px;
		height: 26px;
		margin: -4px -6px 0 0;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-toast__dismiss span {
		font-size: 17px;
	}
}

@media (max-width: 480px) {
	#realdev-toast-region.realdev-toast-region {
		bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
		left: 10px !important;
		right: 10px !important;
		transform: none !important;
		width: auto !important;
		gap: 6px;
		max-width: calc(100vw - 20px);
	}

	/* Purchased vẫn căn giữa qua translate — không stretch full bleed như toast hệ thống. */
	#realdev-toast-region--purchased.realdev-toast-region {
		max-width: min(292px, calc(100vw - 20px));
		bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
	}

	.realdev-toast {
		padding: 8px 10px;
		gap: 7px;
		border-radius: 11px;
	}

	.realdev-purchased-toast__media {
		width: 36px;
		height: 36px;
		border-radius: 9px;
	}

	.realdev-purchased-toast__title {
		font-size: 11px;
	}

	.realdev-purchased-toast__product {
		font-size: 12px;
	}
}

@media (max-width: 380px) {
	#realdev-toast-region--purchased.realdev-toast-region .realdev-purchased-toast__meta {
		display: none;
	}

	#realdev-toast-region--purchased.realdev-toast-region .realdev-toast--purchased {
		padding: 6px 8px;
	}
}

body.wp-admin #realdev-toast-region.realdev-toast-region {
	z-index: 100000;
}

body.wp-admin.realdev-admin-page #realdev-toast-region.realdev-toast-region[data-realdev-corner="br"] {
	bottom: 24px;
	right: 16px;
}