.xota-members-frontend {
	--xota-primary: #2563eb;
	--xota-primary-dark: #1d4ed8;
	--xota-success: #16a34a;
	--xota-warning: #f59e0b;
	--xota-danger: #dc2626;
	--xota-text: #0f172a;
	--xota-muted: #64748b;
	--xota-border: #e5e7eb;
	--xota-bg: #f8fafc;
	--xota-card: #ffffff;
	--xota-radius: 16px;

	box-sizing: border-box;
	color: var(--xota-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.xota-members-frontend *,
.xota-members-frontend *::before,
.xota-members-frontend *::after {
	box-sizing: inherit;
}

.xota-members-frontend .xota-auth-card {
	background: var(--xota-card);
	border: 1px solid var(--xota-border);
	border-radius: var(--xota-radius);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	margin: 24px auto;
	max-width: 440px;
	padding: 28px;
	width: 100%;
}

.xota-members-frontend .xota-auth-header {
	margin: 0 0 22px;
}

.xota-members-frontend .xota-auth-header h2,
.xota-members-frontend .xota-auth-status h2 {
	color: var(--xota-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.xota-members-frontend .xota-auth-status {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	padding: 16px;
}

.xota-members-frontend .xota-auth-status h2 {
	color: #166534;
	font-size: 18px;
}

.xota-members-frontend .xota-auth-status--error {
	background: #fef2f2;
	border-color: #fecaca;
}

.xota-members-frontend .xota-auth-status--error h2 {
	color: #991b1b;
}

.xota-members-frontend .xota-login-form,
.xota-members-frontend .xota-register-form,
.xota-members-frontend .xota-forgot-form,
.xota-members-frontend .xota-reset-form,
.xota-members-frontend .xota-profile-form {
	display: grid;
	gap: 16px;
	margin: 0;
}

.xota-members-frontend .xota-field {
	display: grid;
	gap: 7px;
}

.xota-members-frontend .xota-label {
	color: var(--xota-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.xota-members-frontend .xota-input {
	appearance: none;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	color: var(--xota-text);
	font-size: 15px;
	height: 46px;
	line-height: 1.4;
	margin: 0;
	padding: 10px 12px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	width: 100%;
}

.xota-members-frontend .xota-input:focus {
	border-color: var(--xota-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
	outline: none;
}

.xota-members-frontend .xota-input:disabled {
	background: #f8fafc;
	color: var(--xota-muted);
}

.xota-members-frontend .xota-input--error {
	border-color: #ef4444;
}

.xota-members-frontend .xota-input--error:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.xota-members-frontend .xota-required {
	color: #ef4444;
	margin-left: 3px;
}

.xota-members-frontend .xota-field-feedback {
	font-size: 13px;
	margin-top: 4px;
	line-height: 1.4;
}

.xota-members-frontend .xota-field-feedback[hidden] {
	display: none;
}

.xota-members-frontend .xota-field-feedback--error {
	color: #ef4444;
}

.xota-members-frontend .xota-field-feedback--success {
	color: #16a34a;
}

.xota-members-frontend .xota-check {
	align-items: center;
	color: var(--xota-muted);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	gap: 9px;
	line-height: 1.4;
}

.xota-members-frontend .xota-check input {
	accent-color: var(--xota-primary);
	height: 16px;
	margin: 0;
	width: 16px;
	border-radius: .25em;
    border-color: #D1D5DB;
    border: 1px solid transparent;
}

.xota-members-frontend .xota-login-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	margin-bottom: 22px;
}

.xota-members-frontend .xota-login-meta a {
	color: var(--xota-primary);
	font-size: 14px;
	text-decoration: none;
}

.xota-members-frontend .xota-login-meta a:hover {
	text-decoration: underline;
}

.xota-members-frontend .xota-submit {
	align-items: center;
	background: var(--xota-primary);
	border: 1px solid var(--xota-primary);
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	height: 46px;
	justify-content: center;
	line-height: 1.2;
	margin: 2px 0 0;
	padding: 0 18px;
	transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
	width: 100%;
}

.xota-members-frontend .xota-submit:hover {
	background: var(--xota-primary-dark);
	border-color: var(--xota-primary-dark);
}

.xota-members-frontend .xota-submit--link {
	text-decoration: none;
}

.xota-members-frontend .xota-submit--ghost {
	background: #ffffff;
	border-color: #cbd5e1;
	color: var(--xota-primary);
}

.xota-members-frontend .xota-submit--ghost:hover {
	background: #f8fafc;
	border-color: var(--xota-primary);
	color: var(--xota-primary-dark);
}

.xota-members-frontend .xota-submit:focus-visible {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
	outline: none;
}

.xota-members-frontend .xota-submit:disabled {
	cursor: progress;
	opacity: 0.72;
}

.xota-members-frontend .xota-social-auth {
	display: grid;
	gap: 14px;
}

.xota-members-frontend .xota-social-auth__divider {
	align-items: center;
	color: var(--xota-muted);
	display: flex;
	font-size: 14px;
	gap: 12px;
	line-height: 1.4;
	text-align: center;
	margin-top: 18px;
}

.xota-members-frontend .xota-social-auth__divider::before,
.xota-members-frontend .xota-social-auth__divider::after {
	background: var(--xota-border);
	content: "";
	flex: 1;
	height: 1px;
}

.xota-members-frontend .xota-social-auth__divider span {
	flex: 0 0 auto;
	max-width: 75%;
}

.xota-members-frontend .xota-social-auth__buttons {
	display: flex;
	gap: 10px;
}

.xota-members-frontend .xota-social-btn {
	align-items: center;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	color: var(--xota-text);
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	gap: 10px;
	height: 46px;
	justify-content: center;
	line-height: 1.2;
	padding: 0 16px;
	text-decoration: none;
	transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
	flex: 1;
	min-width: 0;
}

.xota-members-frontend .xota-social-btn iconify-icon {
	font-size: 20px;
	flex-shrink: 0;
}

.xota-members-frontend .xota-social-btn:hover,
.xota-members-frontend .xota-social-btn:focus-visible {
	background: #f8fafc;
	border-color: #94a3b8;
	color: var(--xota-text);
	text-decoration: none;
}

.xota-members-frontend .xota-social-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
	outline: none;
}

.xota-members-frontend .xota-social-btn__icon {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 22px;
	font-size: 14px;
	font-weight: 800;
	height: 22px;
	justify-content: center;
	line-height: 1;
	width: 22px;
}

.xota-members-frontend .xota-social-btn--google .xota-social-btn__icon {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #ea4335;
}

.xota-members-frontend .xota-social-btn--facebook {
	background: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
}

.xota-members-frontend .xota-social-btn--facebook:hover,
.xota-members-frontend .xota-social-btn--facebook:focus-visible {
	background: #166fe5;
	border-color: #166fe5;
	color: #ffffff;
}

.xota-members-frontend .xota-social-btn--facebook .xota-social-btn__icon {
	background: #ffffff;
	color: #1877f2;
}

.xota-members-frontend .xota-alert {
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 11px 12px;
}

.xota-members-frontend .xota-alert[hidden] {
	display: none;
}

.xota-members-frontend .xota-alert--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.xota-members-frontend .xota-alert--success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

.xota-members-frontend .xota-auth-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: center;
	margin-top: 18px;
}

.xota-members-frontend .xota-auth-links a {
	color: var(--xota-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.xota-members-frontend .xota-auth-links a:hover,
.xota-members-frontend .xota-auth-links a:focus-visible {
	color: var(--xota-primary-dark);
	text-decoration: underline;
}

.xota-members-frontend .xota-account-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xota-members-frontend .xota-account-card {
	background: #f8fafc;
	border: 1px solid var(--xota-border);
	border-radius: 8px;
	display: grid;
	gap: 8px;
	min-height: 102px;
	padding: 16px;
}

.xota-members-frontend .xota-account-card__label {
	color: var(--xota-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.xota-members-frontend .xota-account-card strong,
.xota-members-frontend .xota-membership-item strong {
	color: var(--xota-text);
	font-size: 16px;
	line-height: 1.35;
}

.xota-members-frontend .xota-badge {
	align-items: center;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	justify-content: center;
	line-height: 1.2;
	max-width: max-content;
	padding: 6px 10px;
}

.xota-members-frontend .xota-badge--active {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

.xota-members-frontend .xota-badge--pending,
.xota-members-frontend .xota-badge--expired,
.xota-members-frontend .xota-badge--cancelled {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}

.xota-members-frontend .xota-badge--suspended,
.xota-members-frontend .xota-badge--banned {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.xota-members-frontend .xota-badge--unknown {
	background: #f8fafc;
	color: var(--xota-muted);
}

.xota-members-frontend .xota-account-actions {
	justify-content: flex-end;
}

.xota-members-frontend .xota-membership-list {
	display: grid;
	gap: 12px;
}

.xota-members-frontend .xota-membership-item {
	border: 1px solid var(--xota-border);
	border-radius: 8px;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 16px;
}

.xota-members-frontend .xota-membership-item > div {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.xota-members-frontend .xota-locked-box {
	background: var(--xota-card);
	border: 1px solid var(--xota-border);
	border-radius: var(--xota-radius);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	display: grid;
	gap: 14px;
	justify-items: center;
	margin: 24px auto;
	max-width: 560px;
	padding: 28px;
	text-align: center;
	width: 100%;
}

.xota-members-frontend .xota-locked-box__icon {
	border: 3px solid var(--xota-primary);
	border-radius: 8px;
	display: block;
	height: 30px;
	position: relative;
	width: 34px;
}

.xota-members-frontend .xota-locked-box__icon::before {
	border: 3px solid var(--xota-primary);
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
	content: "";
	height: 18px;
	left: 50%;
	position: absolute;
	top: -18px;
	transform: translateX(-50%);
	width: 22px;
}

.xota-members-frontend .xota-locked-box__title {
	color: var(--xota-text);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin: 4px 0 0;
}

.xota-members-frontend .xota-locked-box__message {
	color: var(--xota-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	max-width: 460px;
}

.xota-members-frontend .xota-locked-box__actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	margin-top: 2px;
	width: 100%;
}

.xota-members-frontend .xota-locked-box__actions .xota-submit {
	margin: 0;
	min-width: 200px;
	text-transform: uppercase;
	width: auto;
}

.xota-members-frontend .xota-locked-box__or {
	color: var(--xota-muted);
	font-size: 14px;
	line-height: 1.4;
	margin: 2px 0;
}

.xota-members-frontend .xota-locked-box__links {
	color: var(--xota-muted);
	font-size: 14px;
	line-height: 1.55;
	margin-top: 8px;
	max-width: 480px;
	text-align: center;
}

.xota-members-frontend .xota-locked-box__link-row {
	margin: 8px 0 0;
}

.xota-members-frontend .xota-locked-box__link-row span,
.xota-members-frontend .xota-locked-box__link-row a {
	display: block;
}

.xota-members-frontend .xota-locked-box__link-row a {
	color: var(--xota-primary);
	text-decoration: none;
}

.xota-members-frontend .xota-locked-box__link-row a:hover,
.xota-members-frontend .xota-locked-box__link-row a:focus-visible {
	text-decoration: underline;
}
.xota-other {
	position: relative;
	z-index: 1;
	margin-top: 1.5rem;
	text-align: center;
}
.xota-other::before {
	position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #D1D5DB;
    z-index: -1;
}
.xota-other span {
	padding-inline: 0.25rem;
    background-color: #fff;
}
.xota-auth-links .xota-login-links {
	border: 1px solid #d1d5db80;
    padding: 1rem;
    border-radius: 0.75rem;
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    -ms-border-radius: 0.75rem;
    -o-border-radius: 0.75rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    line-height: 1;
    background-color: transparent;
}
.xota-auth-links .xota-login-links:hover {
	background-color: #E4F1FF;

}

@media (max-width: 480px) {
	.xota-members-frontend .xota-auth-card {
		border-radius: 12px;
		margin: 18px auto;
		padding: 22px;
	}

	.xota-members-frontend .xota-auth-header h2 {
		font-size: 22px;
	}

	.xota-members-frontend .xota-auth-links {
		display: grid;
		gap: 10px;
	}

	.xota-members-frontend .xota-account-grid,
	.xota-members-frontend .xota-membership-item {
		grid-template-columns: 1fr;
	}

	.xota-members-frontend .xota-locked-box {
		border-radius: 12px;
		margin: 18px auto;
		padding: 24px 20px;
	}

	.xota-members-frontend .xota-locked-box__actions {
		align-items: stretch;
	}

	.xota-members-frontend .xota-locked-box__actions .xota-submit {
		width: 100%;
	}
}

/* Global Loader */
.xota-global-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(255, 255, 255, 0.7);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.xota-global-loader.is-active {
	opacity: 1;
	visibility: visible;
}

.xota-global-loader-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #cbd5e1;
	border-top-color: #3b82f6;
	border-radius: 50%;
	animation: xota-spin 0.8s linear infinite;
}

@keyframes xota-spin {
	to {
		transform: rotate(360deg);
	}
}

.xota-members-frontend .xota-pricing-card__prices {
	list-style: none;
	margin: 8px 0 12px;
	padding: 0;
}

.xota-members-frontend .xota-pricing-card__prices li {
	margin: 2px 0;
}

.xota-members-frontend .xota-pricing-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.xota-members-frontend .xota-pricing-card__actions form {
	margin: 0;
}

.xota-members-frontend .xota-pricing-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}@media(max-width:900px){.xota-members-frontend .xota-pricing-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.xota-members-frontend .xota-pricing-tiers{grid-template-columns:1fr}}.xota-members-frontend .xota-price-tier{position:relative;padding:28px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06)}.xota-members-frontend .xota-price-tier.is-featured{border-color:#2563eb;transform:scale(1.02);box-shadow:0 16px 36px rgba(37,99,235,.18)}.xota-members-frontend .xota-price-tier__badge{position:absolute;top:-12px;right:18px;padding:5px 10px;border-radius:999px;background:#2563eb;color:#fff;font-size:12px}.xota-members-frontend .xota-price__old{text-decoration:line-through;color:#94a3b8}.xota-members-frontend .xota-price__now{margin:10px 0 20px;font-size:24px;font-weight:700}.xota-members-frontend .xota-price__now small{font-size:13px;font-weight:400}.xota-members-frontend .xota-price-tier__features{padding:0;list-style:none}.xota-members-frontend .xota-price-tier__features li{display:flex;gap:8px;margin:10px 0}.xota-members-frontend .xota-price-tier__features .is-included{color:#15803d}.xota-members-frontend .xota-price-tier__features .is-excluded{color:#dc2626}.xota-members-frontend .xota-price-tier.is-current{border-color:#16a34a;background:#f0fdf4;box-shadow:0 12px 30px rgba(22,163,74,.16)}.xota-members-frontend .xota-price-tier__current{position:absolute;top:-12px;left:18px;padding:5px 10px;border-radius:999px;background:#16a34a;color:#fff;font-size:12px}
.xota-members-frontend .xota-auth-card{max-width:440px;padding:32px;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.04)}.xota-members-frontend .xota-auth-card--register{max-width:520px}.xota-members-frontend .xota-auth-header p{margin:8px 0 0;color:var(--xota-muted);font-size:14px}.xota-members-frontend .xota-field{margin-bottom:18px}.xota-members-frontend .xota-input{min-height:44px;border-color:#e5e7eb;border-radius:8px}.xota-members-frontend .xota-submit{min-height:44px;border-radius:8px}.xota-members-frontend .xota-social-btn{border:1px solid #e5e7eb;border-radius:8px}.xota-members-frontend .xota-auth-status{border-radius:10px}.xota-members-frontend .xota-locked-box{border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.04)}

/* Mật khẩu: ô con mắt + checklist yêu cầu. */
.xota-members-frontend .xota-password-field{position:relative;display:block}
.xota-members-frontend .xota-password-field>input{width:100%;padding-right:44px}
.xota-members-frontend .xota-password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;color:#64748b;cursor:pointer;border-radius:6px;font-size:18px}
.xota-members-frontend .xota-password-toggle:hover{color:#2563eb;background:#f1f5f9}
.xota-members-frontend .xota-pw-rules{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.xota-members-frontend .xota-pw-rule{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b}
.xota-members-frontend .xota-pw-rule iconify-icon{color:#cbd5e1;flex-shrink:0;font-size:16px}
.xota-members-frontend .xota-pw-rule.is-ok{color:#15803d}
.xota-members-frontend .xota-pw-rule.is-ok iconify-icon{color:#16a34a}

/* Nút quay lại danh sách (chi tiết đơn / checkout). */
.xota-members-frontend .xota-back-link{display:inline-flex;align-items:center;gap:6px;color:#2563eb;text-decoration:none;font-weight:600;font-size:14px}
.xota-members-frontend .xota-back-link:hover{text-decoration:underline}

/* Box gói hiện tại (tab Gói). */
.xota-members-frontend .xota-plan-detail{display:flex;flex-direction:column;gap:20px}
.xota-members-frontend .xota-plan-detail__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:24px;align-items:center}
.xota-members-frontend .xota-plan-detail__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.xota-members-frontend .xota-card-eyebrow--icon{display:inline-flex;align-items:center;gap:8px}
.xota-members-frontend .xota-card-eyebrow__badge{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:#eff6ff;color:var(--xota-primary);font-size:15px}
.xota-members-frontend .xota-plan-detail__main:only-child{grid-column:1 / -1}
.xota-members-frontend .xota-plan-detail__headline{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.xota-members-frontend .xota-plan-detail__count{margin:0;font-size:26px;font-weight:800;color:var(--xota-text);letter-spacing:-0.02em;line-height:1.05}
.xota-members-frontend .xota-plan-detail__count strong{margin:0 4px;font-size:42px;font-weight:900;color:var(--xota-primary);letter-spacing:-0.04em}
.xota-members-frontend .xota-plan-detail__name{margin:0;font-size:22px;font-weight:850;letter-spacing:-0.03em}
.xota-members-frontend .xota-plan-detail__headline .xota-badge{display:inline-flex;align-items:center;gap:6px}
.xota-members-frontend .xota-plan-detail__headline .xota-badge iconify-icon{font-size:15px}
.xota-members-frontend .xota-plan-detail__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.xota-members-frontend .xota-plan-detail__meta>div{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;min-width:0}
.xota-members-frontend .xota-plan-detail__meta-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:#eff6ff;color:var(--xota-primary);font-size:18px}
.xota-members-frontend .xota-plan-detail__meta-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.xota-members-frontend .xota-plan-detail__meta-text>span{font-size:12px;color:#64748b}
.xota-members-frontend .xota-plan-detail__meta-text>strong{font-size:15px;color:#0f172a;font-weight:700}
.xota-members-frontend .xota-plan-detail__aside{align-self:center;min-width:0}
.xota-members-frontend .xota-membership-breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.xota-members-frontend .xota-membership-breakdown li{display:flex;align-items:center;gap:10px;position:relative;padding-left:18px;line-height:1.4;min-width:0}
.xota-members-frontend .xota-membership-breakdown li::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#cbd5e1}
.xota-members-frontend .xota-membership-breakdown__icon{font-size:18px;color:var(--xota-primary);flex:0 0 auto}
.xota-members-frontend .xota-membership-breakdown__text{min-width:0;font-size:15px;font-weight:600;color:var(--xota-text)}
.xota-members-frontend .xota-membership-breakdown__days{font-weight:500;color:var(--xota-muted)}
.xota-members-frontend .xota-membership-note{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;color:var(--xota-muted);font-size:13px}
.xota-members-frontend .xota-membership-note iconify-icon{font-size:16px}
.xota-members-frontend .xota-plan-detail__benefits h3{margin:0 0 10px;font-size:15px}
.xota-members-frontend .xota-feature-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xota-members-frontend .xota-feature-list li{display:flex;align-items:center;gap:8px;font-size:14px}
.xota-members-frontend .xota-feature-list iconify-icon{flex-shrink:0;font-size:17px}
.xota-members-frontend .xota-feature-list .is-included{color:#0f172a}
.xota-members-frontend .xota-feature-list .is-included iconify-icon{color:#16a34a}
.xota-members-frontend .xota-feature-list .is-excluded{color:#94a3b8}
.xota-members-frontend .xota-feature-list .is-excluded iconify-icon{color:#dc2626}
@media(max-width:600px){.xota-members-frontend .xota-plan-detail__grid{grid-template-columns:1fr}.xota-members-frontend .xota-plan-detail__meta{grid-template-columns:1fr}}

/* Màu trạng thái email (overview). */
.xota-members-frontend .xota-text-success{color:#15803d}
.xota-members-frontend .xota-text-danger{color:#dc2626}
.xota-members-frontend .xota-stat-card__icon--danger{background:#fef2f2;color:#dc2626}

/* Phase 7 — Khung chi tiết đơn thanh toán (Premium SaaS, bám design-brief). */
.xota-account .xota-payment-detail{display:grid;gap:18px}
.xota-account .xota-payment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.xota-account .xota-payment-detail__title{margin:0 0 4px;font-size:20px;font-weight:800;color:var(--xota-text)}
.xota-account .xota-status-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;border-radius:var(--xota-radius-md);padding:8px 14px;font-size:14px;font-weight:700;white-space:nowrap}
.xota-account .xota-status-pill iconify-icon{font-size:18px}
.xota-account .xota-status-pill--warning{color:var(--xota-warning-text);background:var(--xota-warning-bg);border:1px solid #fde68a}
.xota-account .xota-status-pill--success{color:var(--xota-success-text);background:var(--xota-success-bg);border:1px solid #bbf7d0}
.xota-account .xota-status-pill--danger{color:var(--xota-danger-text);background:var(--xota-danger-bg);border:1px solid #fecaca}
.xota-account .xota-payment-grid{display:grid;gap:18px}
.xota-account .xota-payment-grid--top{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);align-items:start}
.xota-account .xota-payment-grid__side{display:grid;gap:18px;align-content:start;min-width:0}
.xota-account .xota-order-card,.xota-account .xota-qr-card,.xota-account .xota-upload-card{padding:22px}
.xota-account .xota-detail-list{margin:0;display:grid}
.xota-account .xota-detail-row{display:grid;grid-template-columns:minmax(170px,1fr) auto;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--xota-border)}
.xota-account .xota-detail-row:last-child{border-bottom:0}
.xota-account .xota-detail-row dt{display:flex;align-items:center;gap:12px;color:var(--xota-muted);font-size:14px;font-weight:700}
.xota-account .xota-detail-row dd{margin:0;color:var(--xota-text);font-size:15px;font-weight:700;text-align:right}
.xota-account .xota-detail-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;color:var(--xota-primary);background:var(--xota-info-bg);flex:0 0 auto}
.xota-account .xota-detail-icon iconify-icon{font-size:18px}
.xota-account .xota-detail-price{color:var(--xota-primary);font-size:20px;letter-spacing:-.02em}
.xota-account .xota-transfer-code{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px dashed var(--xota-border-strong);background:#f8fafc;border-radius:8px;padding:6px 12px;color:var(--xota-text);font-weight:700;font-size:14px;cursor:pointer}
.xota-account .xota-transfer-code:hover{border-color:var(--xota-primary);color:var(--xota-primary)}
.xota-account .xota-transfer-code iconify-icon{font-size:16px;color:var(--xota-muted)}
.xota-account .xota-order-actions{display:grid;gap:12px;margin-top:18px}
.xota-account .xota-order-actions .xota-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.xota-account .xota-order-actions iconify-icon{font-size:18px}
.xota-account .xota-qr-card__body{display:grid;justify-items:center;text-align:center}
.xota-account .xota-vietqr-logo{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;line-height:1}
.xota-account .xota-vietqr-logo__mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#fff;background:#ef233c;font-size:18px;font-weight:900}
.xota-account .xota-vietqr-logo__text{color:#ef233c;font-size:24px;font-weight:900;letter-spacing:-.05em}
.xota-account .xota-vietqr-logo__text strong{color:#1e3a8a}
.xota-account .xota-qr-method-name{margin-bottom:10px;font-weight:800;color:var(--xota-text)}
.xota-account .xota-qr-frame{width:min(240px,100%);aspect-ratio:1/1;display:grid;place-items:center;padding:8px;border:2px solid #1e3a8a;border-radius:8px;background:#fff;box-shadow:var(--xota-shadow-sm)}
.xota-account .xota-qr-frame img{width:100%;height:100%;object-fit:contain;display:block}
.xota-account .xota-recipient{display:grid;gap:4px;margin-top:12px;color:var(--xota-muted);font-size:14px}
.xota-account .xota-recipient strong{color:var(--xota-text);font-size:16px}
.xota-account .xota-upload-card{display:grid;gap:14px}
.xota-account .xota-receipt-status{display:inline-flex;align-items:center;gap:8px;color:var(--xota-success);font-weight:700;font-size:14px}
.xota-account .xota-receipt-status iconify-icon{font-size:18px}
.xota-account .xota-upload-dropzone{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:22px;padding:22px;border:2px dashed #93c5fd;border-radius:var(--xota-radius-lg);background:linear-gradient(180deg,#fff 0,#f8fbff 100%)}
.xota-account .xota-upload-dropzone__icon{width:92px;height:92px;display:grid;place-items:center;justify-self:center;border-radius:999px;color:var(--xota-primary);background:#dbeafe;box-shadow:inset 0 0 0 10px rgba(255,255,255,.5)}
.xota-account .xota-upload-dropzone__icon iconify-icon{font-size:44px}
.xota-account .xota-upload-dropzone__content h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.xota-account .xota-upload-dropzone__content p{margin:8px 0 14px;color:var(--xota-muted);font-size:13px}
.xota-account .xota-upload-button{width:fit-content;display:inline-flex;align-items:center;gap:8px}
.xota-account .xota-upload-button iconify-icon{font-size:18px}
.xota-account .xota-upload-filename{display:block;margin-top:10px;color:var(--xota-muted);font-size:13px;font-weight:600}
.xota-account .xota-upload-actions{display:flex;justify-content:flex-start;gap:14px;margin-top:14px}
.xota-account .xota-upload-actions .xota-btn{min-height:46px;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.xota-account .xota-upload-actions iconify-icon{font-size:18px}
.xota-account .xota-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:-1px!important}
.xota-account .xota-info-strip{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--xota-info-border);border-radius:var(--xota-radius-lg);background:var(--xota-info-bg)}
.xota-account .xota-info-strip__icon{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;color:#fff;background:var(--xota-primary);flex:0 0 auto}
.xota-account .xota-info-strip__icon iconify-icon{font-size:20px}
.xota-account .xota-info-strip__content{display:grid;gap:3px;min-width:0}
.xota-account .xota-info-strip__content strong{color:var(--xota-info-text);font-size:14px}
.xota-account .xota-info-strip__content span{color:var(--xota-muted);font-size:14px}
.xota-account .xota-receipt-preview{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:14px}
.xota-account .xota-receipt-thumb{display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid #bfdbfe;border-radius:var(--xota-radius-md);background:#fff;box-shadow:var(--xota-shadow-sm)}
.xota-account .xota-receipt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.xota-account .xota-receipt-info p{margin:8px 0 14px;color:var(--xota-muted);font-size:14px}
.xota-account .xota-receipt-actions{display:flex;flex-wrap:wrap;gap:12px}
.xota-account .xota-receipt-actions .xota-btn{display:inline-flex;align-items:center;gap:8px}
.xota-account .xota-receipt-actions iconify-icon{font-size:18px}
.xota-account .xota-method-switch-card .xota-method-switch__hint{margin:0 0 14px;color:var(--xota-muted);font-size:14px}
.xota-account .xota-method-switch__list{display:grid;gap:10px}
.xota-account .xota-method-switch__item{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:12px 14px;border:1px solid var(--xota-border);border-radius:var(--xota-radius-md);background:#fff}
.xota-account .xota-method-switch__item.is-current{border-color:#16a34a;background:#f0fdf4}
.xota-account .xota-method-switch__info{display:grid;gap:2px;min-width:0}
.xota-account .xota-method-switch__name{font-weight:700;color:var(--xota-text)}
.xota-account .xota-method-switch__amount{color:var(--xota-muted);font-size:14px}
.xota-account .xota-method-switch__tag{display:inline-flex;align-items:center;gap:6px;color:#15803d;font-weight:700;font-size:13px;white-space:nowrap}
.xota-account .xota-method-switch__tag iconify-icon{font-size:16px}
.xota-account .xota-upload-selected{margin-top:12px;max-width:240px}
.xota-account .xota-upload-selected img{width:100%;border-radius:var(--xota-radius-md);border:1px solid var(--xota-border);display:block}
.xota-account .xota-upload-progress{margin-top:14px}
.xota-account .xota-upload-progress__track{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.xota-account .xota-upload-progress__bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--xota-primary),var(--xota-primary-dark,#1d4ed8));transition:width .15s ease}
.xota-account .xota-upload-progress__meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--xota-muted);font-size:13px;font-weight:600}
.xota-account .xota-method-select{margin:2px 0 16px}
.xota-account .xota-method-select__label{display:inline-flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--xota-muted);font-size:14px;font-weight:700}
.xota-account .xota-method-select__label iconify-icon{font-size:16px;color:var(--xota-primary)}
.xota-account .xota-method-select__row{display:flex;gap:10px;align-items:center}
.xota-account .xota-method-select__input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--xota-border-strong);border-radius:var(--xota-radius-sm,10px);background:#fff;color:var(--xota-text);font-size:15px;font-weight:500}
.xota-account .xota-method-select__input:focus{border-color:var(--xota-primary);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.xota-account .xota-method-select__apply{flex:0 0 auto}
.xota-account .xota-method-select__apply[hidden]{display:none}
.xota-lightbox{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.82)}
.xota-lightbox.is-open{display:flex}
.xota-lightbox__img{max-width:92vw;max-height:88vh;border-radius:12px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.xota-lightbox__close{position:absolute;top:18px;right:18px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;font-size:22px}
.xota-lightbox__close:hover{background:rgba(255,255,255,.3)}
.xota-account .xota-receipt-card__body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.xota-account .xota-receipt-name{margin:0;font-size:15px;font-weight:800;color:var(--xota-text);word-break:break-word}
.xota-account .xota-receipt-size{margin:4px 0 10px;color:var(--xota-muted);font-size:13px}
.xota-account .xota-upload-filerow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:12px 14px;border:1px solid var(--xota-border);border-radius:var(--xota-radius-md);background:#fff}
.xota-account .xota-upload-filerow[hidden]{display:none}
.xota-account .xota-upload-filerow__name{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--xota-text);font-size:14px;font-weight:700}
.xota-account .xota-upload-filerow__name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xota-account .xota-upload-filerow__name iconify-icon{font-size:18px;color:var(--xota-primary);flex:0 0 auto}
.xota-account .xota-upload-filerow__meta{display:inline-flex;align-items:center;gap:10px;color:var(--xota-muted);font-size:13px;font-weight:600;flex:0 0 auto}
.xota-account .xota-upload-filerow__check{color:var(--xota-success);font-size:18px}
.xota-account .xota-upload-actions{justify-content:center;flex-wrap:wrap}
@media(max-width:520px){.xota-account .xota-receipt-card__body{grid-template-columns:1fr}}
@media(max-width:680px){.xota-account .xota-receipt-preview{grid-template-columns:1fr}.xota-account .xota-receipt-thumb{max-width:240px}.xota-account .xota-method-switch__item{flex-wrap:wrap}}
@media(max-width:1100px){.xota-account .xota-payment-grid--top{grid-template-columns:1fr}.xota-account .xota-qr-frame{width:min(300px,100%)}}
@media(max-width:680px){.xota-account .xota-detail-row{grid-template-columns:1fr;gap:8px}.xota-account .xota-detail-row dd{text-align:left;padding-left:46px}.xota-account .xota-upload-dropzone{grid-template-columns:1fr;text-align:center}.xota-account .xota-upload-dropzone__icon{justify-self:center}.xota-account .xota-upload-button{margin:0 auto}.xota-account .xota-upload-actions .xota-btn{width:100%;min-width:0}}

/* Trang chi tiết thanh toán: QR tự do width/height, không grid. */
.xota-members-frontend .xota-payment__qr {
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

.xota-members-frontend .xota-payment__qr img {
	width: 100%;
	height: auto;
	max-width: 320px;
	display: block;
}

.xota-members-frontend .xota-payment__copy-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.xota-members-frontend .xota-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--xota-border);
	border-radius: 6px;
	background: #fff;
	color: var(--xota-muted);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.xota-members-frontend .xota-copy-btn:hover {
	color: #2563eb;
	border-color: #2563eb;
	background: #eff6ff;
}

.xota-members-frontend .xota-payment__method-note {
	color: var(--xota-muted);
	font-size: 13px;
	margin: 12px 0 0;
}

/* Bước chọn phương thức thanh toán. */
.xota-members-frontend .xota-payment__choose-title {
	font-size: 16px;
	margin: 0 0 6px;
}

.xota-members-frontend .xota-payment__choices {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xota-members-frontend .xota-payment__choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--xota-border);
	border-radius: 10px;
	background: #f8fafc;
}

.xota-members-frontend .xota-payment__choice-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.xota-members-frontend .xota-payment__choice-name {
	font-weight: 700;
}

.xota-members-frontend .xota-payment__choice-amount {
	color: #2563eb;
	font-weight: 700;
}

.xota-members-frontend .xota-payment__choice .xota-submit {
	margin: 0;
	width: auto;
}

/* Khu vực tải ảnh chuyển khoản (bill). */
.xota-members-frontend .xota-payment__proof {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--xota-border);
}

.xota-members-frontend .xota-payment__proof-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
	font-weight: 600;
}

.xota-members-frontend .xota-payment__proof-field input[type="file"] {
	font-weight: 400;
}

.xota-members-frontend .xota-payment__proof-done {
	color: var(--xota-muted);
	font-size: 13px;
	margin: 0 0 10px;
}

.xota-members-frontend .xota-submit--secondary {
	background: #fff;
	color: #2563eb;
	border: 1px solid #2563eb;
}

.xota-members-frontend .xota-submit--secondary:hover {
	background: #eff6ff;
}


/* Phase 17.1 — Account dashboard (theo design brief). */
.xota-account,
.xota-account * {
  box-sizing: border-box;
}

.xota-account {
  --xota-primary: #2563eb;
  --xota-primary-hover: #1d4ed8;
  --xota-success: #16a34a;
  --xota-success-bg: #dcfce7;
  --xota-success-text: #166534;
  --xota-warning: #f59e0b;
  --xota-warning-bg: #fef3c7;
  --xota-warning-text: #92400e;
  --xota-danger: #dc2626;
  --xota-danger-bg: #fee2e2;
  --xota-danger-text: #991b1b;
  --xota-info-bg: #eff6ff;
  --xota-info-border: #bfdbfe;
  --xota-info-text: #1d4ed8;
  --xota-text: #0f172a;
  --xota-muted: #64748b;
  --xota-muted-2: #94a3b8;
  --xota-border: #e5e7eb;
  --xota-border-strong: #cbd5e1;
  --xota-bg: #f8fafc;
  --xota-card: #ffffff;
  --xota-radius-sm: 8px;
  --xota-radius-md: 12px;
  --xota-radius-lg: 16px;
  --xota-radius-xl: 20px;
  --xota-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --xota-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.05);
  --xota-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.08);
  --xota-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  width: 100%;
  color: var(--xota-text);
  font-family: var(--xota-font);
  background: var(--xota-bg);
  padding: 24px;
  border-radius: var(--xota-radius-xl);
}

.xota-account a {
  color: inherit;
  text-decoration: none;
}

.xota-account button,
.xota-account input {
  font-family: inherit;
}

.xota-account__shell {
  max-width: 1280px;
  margin: 0 auto;
}

.xota-account__brand {
  margin-bottom: 20px;
}

.xota-account .xota-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xota-account .xota-brand__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  font-size: 24px;
  background: linear-gradient(135deg, var(--xota-primary), var(--xota-primary-hover));
  box-shadow: var(--xota-shadow-md);
}

.xota-account .xota-brand__name {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.xota-account .xota-brand__desc {
  margin-top: 4px;
  color: var(--xota-muted);
  font-size: 14px;
}

.xota-account__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.xota-account .xota-sidebar-card,
.xota-account .xota-card {
  background: var(--xota-card);
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-lg);
  box-shadow: var(--xota-shadow-md);
}

.xota-account .xota-sidebar-card {
  padding: 18px;
  position: sticky;
  top: 24px;
}

.xota-account .xota-profile-mini {
  text-align: center;
  padding: 8px 4px 18px;
  border-bottom: 1px solid var(--xota-border);
}

.xota-account .xota-avatar {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--xota-primary);
  font-weight: 800;
}

.xota-account .xota-profile-mini__name {
  font-weight: 800;
  font-size: 15px;
}

.xota-account .xota-profile-mini__email {
  margin: 4px 0 10px;
  color: var(--xota-muted);
  font-size: 12px;
  word-break: break-all;
}

.xota-account .xota-plan-mini {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-md);
  background: #fff;
}

.xota-account .xota-plan-mini__label {
  color: var(--xota-muted);
  font-size: 12px;
}

.xota-account .xota-plan-mini__name {
  margin-top: 4px;
  font-weight: 800;
}

.xota-account .xota-plan-mini__date {
  margin: 6px 0 12px;
  color: var(--xota-muted);
  font-size: 12px;
}

.xota-account .xota-sidebar__nav {
  display: grid;
  gap: 6px;
}

.xota-account .xota-sidebar__nav-item,
.xota-account .xota-sidebar__logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--xota-muted);
  border-radius: var(--xota-radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.xota-account .xota-sidebar__nav-item:hover {
  background: #f1f5f9;
  color: var(--xota-text);
}

.xota-account .xota-sidebar__nav-item.is-active {
  color: var(--xota-primary);
  background: #eff6ff;
  border-color: #dbeafe;
  font-weight: 700;
}

.xota-account .xota-sidebar__logout {
  margin-top: 18px;
  color: var(--xota-danger);
}

.xota-account .xota-sidebar__logout:hover {
  background: var(--xota-danger-bg);
}

.xota-account .xota-page-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.xota-account .xota-page-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.xota-account .xota-page-desc {
  margin: 8px 0 0;
  color: var(--xota-muted);
  font-size: 14px;
}

.xota-account .xota-section {
  display: grid;
  gap: 18px;
}

.xota-account .xota-section[hidden] {
  display: none !important;
}

.xota-account .xota-card {
  padding: 20px;
}

.xota-account .xota-card-title,
.xota-account .xota-section-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.xota-account .xota-card-eyebrow {
  margin-bottom: 6px;
  color: var(--xota-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.xota-account .xota-current-plan {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 18px;
}

.xota-account .xota-current-plan__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #eff6ff;
  color: var(--xota-primary);
  font-size: 32px;
}

.xota-account .xota-current-plan h2,
.xota-account .xota-plan-detail h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.xota-account .xota-current-plan__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.xota-account .xota-current-plan p {
  margin: 10px 0 0;
  color: var(--xota-muted);
  font-size: 14px;
}

.xota-account .xota-current-plan__body .xota-plan-detail__meta {
  margin-top: 12px;
}

.xota-account .xota-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.xota-account .xota-stat-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-lg);
  box-shadow: var(--xota-shadow-sm);
  text-align: center;
}

.xota-account .xota-stat-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 18px;
}

.xota-account .xota-stat-card__icon--success {
  background: var(--xota-success-bg);
  color: var(--xota-success-text);
}

.xota-account .xota-stat-card__icon--primary {
  background: #dbeafe;
  color: var(--xota-primary);
}

.xota-account .xota-stat-card__icon--warning {
  background: var(--xota-warning-bg);
  color: var(--xota-warning-text);
}

.xota-account .xota-stat-card span {
  display: block;
  color: var(--xota-muted);
  font-size: 13px;
}

.xota-account .xota-stat-card strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 600;
}

.xota-account .xota-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--xota-radius-md);
  font-size: 14px;
}

.xota-account .xota-alert--info {
  color: var(--xota-info-text);
  background: var(--xota-info-bg);
  border: 1px solid var(--xota-info-border);
}

.xota-account .xota-alert--muted {
  color: var(--xota-muted);
  background: #f8fafc;
  border: 1px solid var(--xota-border);
}

.xota-account .xota-alert strong,
.xota-account .xota-alert span {
  display: inline;
}

.xota-account .xota-alert__icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: var(--xota-primary);
  font-size: 12px;
  font-weight: 800;
}

.xota-account .xota-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.xota-account .xota-quick-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--xota-border);
  background: #fff;
  border-radius: var(--xota-radius-lg);
  box-shadow: var(--xota-shadow-sm);
  cursor: pointer;
  text-align: left;
}

.xota-account .xota-quick-card:hover {
  border-color: #bfdbfe;
  box-shadow: var(--xota-shadow-md);
}

.xota-account .xota-quick-card__icon {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--xota-primary);
}

.xota-account .xota-quick-card__title {
  font-weight: 600;
}

.xota-account .xota-quick-card__desc {
  color: var(--xota-muted);
  font-size: 13px;
}

.xota-account .xota-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--xota-radius-sm);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.xota-account .xota-btn:focus-visible,
.xota-account .xota-sidebar__nav-item:focus-visible,
.xota-account .xota-quick-card:focus-visible,
.xota-account .xota-icon-btn:focus-visible,
.xota-account input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.xota-account .xota-btn--primary {
  color: #fff;
  background: var(--xota-primary);
}

.xota-account .xota-btn--primary:hover {
  background: var(--xota-primary-hover);
}

.xota-account .xota-btn--outline {
  color: var(--xota-primary);
  background: #fff;
  border-color: #bfdbfe;
}

.xota-account .xota-btn--outline:hover {
  background: #eff6ff;
}

.xota-account .xota-btn--danger {
  color: #fff;
  background: var(--xota-danger);
}

.xota-account .xota-btn--danger-outline {
  color: var(--xota-danger);
  background: #fff;
  border-color: #fecaca;
}

.xota-account .xota-btn--danger-outline:hover {
  background: var(--xota-danger-bg);
}

.xota-account .xota-btn--block {
  width: 100%;
}

.xota-account .xota-btn--sm {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.xota-account .xota-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.xota-account .xota-badge--success {
  color: var(--xota-success-text);
  background: var(--xota-success-bg);
}

.xota-account .xota-badge--warning {
  color: var(--xota-warning-text);
  background: var(--xota-warning-bg);
}

.xota-account .xota-badge--danger {
  color: var(--xota-danger-text);
  background: var(--xota-danger-bg);
}

.xota-account .xota-badge--info {
  color: var(--xota-info-text);
  background: var(--xota-info-bg);
}

.xota-account .xota-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* 2 form ngắn (Thông tin + Đổi email) chồng cột trái; Đổi mật khẩu (dài) chiếm cột phải. */
.xota-account .xota-form-grid > :nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.xota-account .xota-form-card {
  display: grid;
  gap: 14px;
}

.xota-account .xota-field {
  display: grid;
  gap: 7px;
}

.xota-account .xota-field label {
  font-size: 14px;
  font-weight: 600;
}

.xota-account input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-sm);
  padding: 9px 12px;
  color: var(--xota-text);
  background: #fff;
  font-size: 14px;
}

.xota-account input:focus {
  border-color: var(--xota-primary);
}

.xota-account .xota-field-help,
.xota-account .xota-field-error {
  margin: 0;
  font-size: 12px;
}

.xota-account .xota-field-help {
  color: var(--xota-muted);
}

.xota-account .xota-field-error {
  color: var(--xota-danger);
}

.xota-account .xota-input-with-badge {
  position: relative;
}

.xota-account .xota-input-with-badge input {
  padding-right: 110px;
}

.xota-account .xota-input-with-badge .xota-badge {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.xota-account .xota-toast-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.xota-account .xota-toast {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--xota-radius-md);
  border: 1px solid var(--xota-border);
  font-size: 13px;
}

.xota-account .xota-toast--success {
  color: var(--xota-success-text);
  background: var(--xota-success-bg);
  border-color: #bbf7d0;
}

.xota-account .xota-toast--danger {
  color: var(--xota-danger-text);
  background: var(--xota-danger-bg);
  border-color: #fecaca;
}

.xota-account .xota-toast--info {
  color: var(--xota-info-text);
  background: var(--xota-info-bg);
  border-color: var(--xota-info-border);
}

.xota-account .xota-toast--warning {
  color: var(--xota-warning-text);
  background: var(--xota-warning-bg);
  border-color: #fde68a;
}

.xota-account .xota-plan-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xota-account .xota-plan-detail__price {
  margin: 8px 0;
  color: var(--xota-primary);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.xota-account .xota-check-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xota-account .xota-check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--xota-muted);
  font-size: 14px;
}

.xota-account .xota-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--xota-success);
  font-weight: 900;
}

.xota-account .xota-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.xota-account .xota-price-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-lg);
  box-shadow: var(--xota-shadow-sm);
}

.xota-account .xota-price-card.is-featured {
  border-color: var(--xota-primary);
  box-shadow: 0 18px 45px rgba(37, 99, 235, 0.12);
}

.xota-account .xota-price-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

.xota-account .xota-price-card__price {
  color: var(--xota-primary);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.xota-account .xota-price-card__price span {
  color: var(--xota-muted);
  font-size: 13px;
  font-weight: 600;
}

.xota-account .xota-price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 5px 12px;
  color: #fff;
  background: var(--xota-primary);
  font-size: 12px;
  font-weight: 850;
}

.xota-account .xota-table-card {
  overflow: hidden;
}

.xota-account .xota-table-wrap {
  overflow-x: auto;
}

.xota-account .xota-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.xota-account .xota-table th {
  color: var(--xota-muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.xota-account .xota-table th,
.xota-account .xota-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--xota-border);
  vertical-align: middle;
}

.xota-account .xota-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xota-account .xota-table-note {
  margin: 14px 0 0;
  color: var(--xota-muted);
  font-size: 13px;
}

.xota-account .xota-payment-list {
  display: none;
}

.xota-account .xota-session-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

.xota-account .xota-session-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  font-size: 24px;
}

.xota-account .xota-session-card__body {
  display: grid;
  gap: 4px;
}

.xota-account .xota-session-card__body span {
  color: var(--xota-muted);
  font-size: 13px;
}

.xota-account .xota-title-with-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xota-account .xota-logout-panel {
  /* max-width: 520px;
  margin: 40px auto; */
  text-align: center;
}

.xota-account .xota-logout-panel__icon,
.xota-account .xota-state-card__icon,
.xota-account .xota-empty-state__illustration {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--xota-primary);
  font-size: 34px;
}

.xota-account .xota-logout-panel h1,
.xota-account .xota-state-card h1,
.xota-account .xota-empty-state h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.xota-account .xota-logout-panel p,
.xota-account .xota-state-card p,
.xota-account .xota-empty-state p {
  margin: 10px auto 0;
  color: var(--xota-muted);
  margin-bottom: 1rem;
}

.xota-account .xota-logout-panel__actions,
.xota-account .xota-state-card__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.xota-account .xota-state-card,
.xota-account .xota-empty-state {
  padding: 44px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--xota-border);
  border-radius: var(--xota-radius-xl);
  box-shadow: var(--xota-shadow-md);
}

@media (max-width: 1023px) {
  .xota-account {
    padding: 16px;
    border-radius: 0;
  }

  .xota-account__layout {
    display: block;
  }

  .xota-account .xota-sidebar-card {
    position: static;
    margin-bottom: 16px;
  }

  .xota-account .xota-profile-mini {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    text-align: left;
  }

  .xota-account .xota-profile-mini .xota-avatar {
    margin: 0;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .xota-account .xota-profile-mini__name,
  .xota-account .xota-profile-mini__email,
  .xota-account .xota-profile-mini .xota-badge {
    grid-column: 2;
  }

  .xota-account .xota-profile-mini .xota-badge {
    justify-self: start;
    margin-top: 4px;
  }

  .xota-account .xota-profile-mini__email {
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .xota-account .xota-plan-mini {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }

  .xota-account .xota-plan-mini .xota-btn {
    width: auto;
  }

  .xota-account .xota-sidebar__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .xota-account .xota-sidebar__nav-item {
    width: auto;
  }

  .xota-account .xota-sidebar__logout {
    display: flex;
    width: 100%;
    margin-top: 8px;
    justify-content: center;
  }

  .xota-account .xota-btn--sm {
    min-height: 38px;
  }

  .xota-account .xota-current-plan {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .xota-account .xota-current-plan__action {
    grid-column: 1 / -1;
  }

  .xota-account .xota-current-plan__action .xota-btn {
    width: 100%;
  }

  .xota-account .xota-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xota-account .xota-quick-grid,
  .xota-account .xota-form-grid,
  .xota-account .xota-plan-detail__grid,
  .xota-account .xota-pricing-grid {
    grid-template-columns: 1fr;
  }

  .xota-account .xota-form-grid > :nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }

  .xota-account .xota-session-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .xota-account .xota-session-card .xota-badge,
  .xota-account .xota-session-card .xota-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .xota-account .xota-brand__name {
    font-size: 20px;
  }

  .xota-account .xota-page-head {
    display: block;
  }

  .xota-account .xota-page-title {
    font-size: 24px;
  }

  .xota-account .xota-card {
    padding: 16px;
  }

  .xota-account .xota-profile-mini {
    grid-template-columns: 48px 1fr;
  }

  .xota-account .xota-profile-mini .xota-badge {
    grid-column: 2;
    justify-self: start;
  }

  .xota-account .xota-plan-mini {
    grid-template-columns: 1fr;
  }

  .xota-account .xota-plan-mini .xota-btn {
    width: 100%;
  }

  .xota-account .xota-current-plan {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .xota-account .xota-current-plan__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 26px;
  }

  .xota-account .xota-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .xota-account .xota-stat-card {
    padding: 14px;
  }

  .xota-account .xota-quick-card {
    grid-template-columns: 38px 1fr;
  }

  .xota-account .xota-table-wrap {
    display: none;
  }

  .xota-account .xota-payment-list {
    display: grid;
    gap: 12px;
  }

  .xota-account .xota-payment-card {
    padding: 16px;
    border: 1px solid var(--xota-border);
    border-radius: var(--xota-radius-lg);
    background: #fff;
  }

  .xota-account .xota-payment-card__top,
  .xota-account .xota-payment-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .xota-account .xota-payment-card__meta {
    margin-top: 12px;
    color: var(--xota-muted);
  }

  .xota-account .xota-payment-card__date {
    margin-top: 8px;
    color: var(--xota-muted);
    font-size: 13px;
  }

  .xota-account .xota-payment-card__actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  .xota-account .xota-logout-panel__actions,
  .xota-account .xota-state-card__actions {
    display: grid;
  }
}

/* Phase 17.1 (fix review) — dashboard tràn full-width, thoát giới hạn chiều rộng nội dung của theme. */
.xota-members-frontend .xota-account {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Phase 17.1 (fix review) — cỡ icon iconify trong dashboard tài khoản. */
.xota-account iconify-icon { line-height: 1; vertical-align: middle; }
.xota-account .xota-icon { font-size: 18px; }
.xota-account .xota-quick-card__icon { font-size: 20px; }
.xota-account .xota-alert__icon { font-size: 14px; }