/* WP Classic - Majestic Milky Way Galaxy Dark Mode UI */

body.login {
	background-color: #03050d !important;
	background-image: 
		/* Upper Right Cyan / Electric Blue Nebula */
		radial-gradient(circle 600px at 85% 15%, rgba(56, 189, 248, 0.14) 0%, rgba(37, 99, 235, 0.06) 40%, transparent 75%),
		/* Lower Left Violet / Magenta Deep Space Nebula */
		radial-gradient(circle 650px at 15% 85%, rgba(147, 51, 234, 0.15) 0%, rgba(219, 39, 119, 0.06) 35%, transparent 70%),
		/* Center Interstellar Deep Glow */
		radial-gradient(ellipse 90% 70% at 50% 50%, #090e1e 0%, #03050d 100%) !important;
	background-size: 100% 100% !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	color: #f8fafc !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* Galaxy Stardust & Cluster Stars (Bụi sao & Tinh thể dải Ngân Hà) */
body.login::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	background: transparent;
	border-radius: 50%;
	box-shadow:
		/* Stardust along the diagonal Milky Way stream */
		8vw 12vh rgba(255, 255, 255, 0.65), 14vw 22vh 1px #7dd3fc, 19vw 31vh rgba(253, 230, 138, 0.7),
		23vw 38vh rgba(255, 255, 255, 0.5), 29vw 44vh 1px #c084fc, 34vw 48vh rgba(255, 255, 255, 0.8),
		41vw 52vh rgba(125, 211, 252, 0.6), 48vw 57vh 1px #ffffff, 55vw 61vh rgba(253, 230, 138, 0.7),
		62vw 66vh 1px #7dd3fc, 69vw 73vh rgba(255, 255, 255, 0.8), 76vw 81vh 1px #c084fc,
		84vw 89vh rgba(255, 255, 255, 0.7), 91vw 95vh #7dd3fc,
		/* Outer space backdrop stars */
		6vw 85vh rgba(255, 255, 255, 0.4), 88vw 15vh rgba(255, 255, 255, 0.5),
		12vw 65vh rgba(125, 211, 252, 0.4), 94vw 38vh rgba(255, 255, 255, 0.45),
		38vw 15vh rgba(255, 255, 255, 0.35), 78vw 85vh rgba(255, 255, 255, 0.4),
		5vw 42vh rgba(253, 230, 138, 0.5), 82vw 22vh rgba(192, 132, 252, 0.4);
	opacity: 0.75;
	pointer-events: none;
	z-index: 1;
}

/* Sky Canvas Container */
.wm-sky-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	overflow: hidden;
	z-index: 2;
}

/* Diagonal Milky Way Cosmic Band (Dãy Thiên Hà Ngân Hà) */
.wm-galaxy-band {
	position: fixed;
	top: -60%;
	left: -50%;
	width: 200%;
	height: 220%;
	pointer-events: none;
	background: radial-gradient(
		ellipse 68% 22% at 50% 50%,
		rgba(224, 231, 255, 0.2) 0%,
		rgba(168, 85, 247, 0.15) 24%,
		rgba(56, 189, 248, 0.1) 45%,
		rgba(236, 72, 153, 0.05) 62%,
		transparent 78%
	);
	transform: rotate(-32deg);
	filter: blur(48px);
	opacity: 0.9;
	animation: galaxyBreath 22s ease-in-out infinite alternate;
	z-index: 1;
}

@keyframes galaxyBreath {
	0% {
		transform: rotate(-32deg) scale(1);
		opacity: 0.8;
	}
	50% {
		transform: rotate(-30deg) scale(1.05);
		opacity: 1;
	}
	100% {
		transform: rotate(-34deg) scale(0.98);
		opacity: 0.85;
	}
}

/* Interactive Mouse Flashlight Glow */
.wm-mouse-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 2;
	background: radial-gradient(
		520px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh),
		rgba(56, 189, 248, 0.15) 0%,
		rgba(168, 85, 247, 0.06) 35%,
		transparent 65%
	);
	transition: background 0.05s ease-out;
}

/* 4-Point Star Core (Sao lóa sáng) */
.wm-flare-star {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #ffffff;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	animation: starRareBurst ease-in-out infinite;
}

/* Horizontal & Vertical Radiant Spikes */
.wm-flare-star::before,
.wm-flare-star::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border-radius: 999px;
	opacity: 0;
}

.wm-flare-star::before {
	width: 16px;
	height: 1.5px;
	background: linear-gradient(90deg, transparent, #ffffff 40%, #7dd3fc 50%, #ffffff 60%, transparent);
}

.wm-flare-star::after {
	width: 1.5px;
	height: 16px;
	background: linear-gradient(180deg, transparent, #ffffff 40%, #7dd3fc 50%, #ffffff 60%, transparent);
}

/* Sudden Flare Burst Animation */
@keyframes starRareBurst {
	0%, 82% {
		opacity: 0;
		transform: scale(0.1);
		box-shadow: none;
	}
	82.01% {
		opacity: 0.1;
	}
	86% {
		opacity: 0.4;
		transform: scale(0.7);
	}
	88% {
		/* ĐỈNH ĐIỂM BÙNG SÁNG LÓA MẠNH */
		opacity: 1;
		transform: scale(1.4);
		box-shadow: 
			0 0 8px 2px #ffffff,
			0 0 26px 7px #38bdf8,
			0 0 48px 14px rgba(168, 85, 247, 0.5);
	}
	90% {
		opacity: 0.5;
		transform: scale(0.8);
		box-shadow: 0 0 10px 2px rgba(56, 189, 248, 0.4);
	}
	93%, 100% {
		opacity: 0;
		transform: scale(0.1);
		box-shadow: none;
	}
}

.wm-flare-star::before,
.wm-flare-star::after {
	animation: spikesBurst ease-in-out infinite;
	animation-duration: inherit;
	animation-delay: inherit;
}

@keyframes spikesBurst {
	0%, 84% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.2);
	}
	88% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.2);
	}
	91% {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(0.5);
	}
	94%, 100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.2);
	}
}

/* Vị trí dọc dải Ngân Hà & nhịp điệu 5s - 8s */
.wm-flare-star.s1 { top: 16%; left: 18%; animation-duration: 6s;   animation-delay: 0.5s; }
.wm-flare-star.s2 { top: 26%; left: 82%; animation-duration: 7.5s; animation-delay: 2.2s; }
.wm-flare-star.s3 { top: 72%; left: 14%; animation-duration: 5.8s; animation-delay: 3.8s; }
.wm-flare-star.s4 { top: 82%; left: 86%; animation-duration: 8s;   animation-delay: 1.2s; }
.wm-flare-star.s5 { top: 20%; left: 52%; animation-duration: 6.8s; animation-delay: 4.8s; }

/* Form Container */
#login {
	width: 100% !important;
	max-width: 400px !important;
	padding: 0 !important;
	margin: auto !important;
	position: relative;
	z-index: 10;
}

/* Hide WordPress Logo Header */
#login h1,
.wp-login-logo {
	display: none !important;
}

/* Obsidian Glass Card Form */
body.login #loginform {
	background: rgba(11, 16, 30, 0.88) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 
		0 25px 50px -12px rgba(0, 0, 0, 0.8),
		0 0 40px rgba(168, 85, 247, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
	border-radius: 18px !important;
	padding: 36px 28px !important;
	margin: 0 !important;
}

body.login label {
	color: #e2e8f0 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin-bottom: 7px;
	display: block;
	letter-spacing: 0.2px;
}

/* Deep Space Inputs */
body.login input[type="text"],
body.login input[type="password"] {
	height: 44px !important;
	background: rgba(6, 10, 18, 0.8) !important;
	border: 1px solid #334155 !important;
	border-radius: 9px !important;
	color: #f8fafc !important;
	font-size: 14px !important;
	padding: 0 14px !important;
	margin-bottom: 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
	background: rgba(8, 14, 26, 0.95) !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
	outline: none !important;
}

/* Hide Password Visibility Button */
.login .wp-pwd .button.wp-hide-pw,
.login .wp-hide-pw {
	display: none !important;
}

/* Auto-checked and Hidden Remember Me Row */
body.login .forgetmenot {
	display: none !important;
}

/* Primary Submit Button */
body.login input[type="submit"] {
	height: 44px !important;
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	border: 1px solid #3b82f6 !important;
	border-radius: 9px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.3px !important;
	width: 100% !important;
	cursor: pointer !important;
	box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 4px 14px rgba(37, 99, 235, 0.4) !important;
	text-shadow: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	margin-top: 6px !important;
	float: none !important;
}

body.login input[type="submit"]:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
	box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 6px 20px rgba(37, 99, 235, 0.55) !important;
	transform: translateY(-1px);
}

body.login input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

/* Hide Navigation, Lost Password, Language Switcher */
.login #nav,
.login #backtoblog,
.login .language-switcher {
	display: none !important;
}

/* Error Alerts */
.login .message,
.login #login_error {
	border: 1px solid #7f1d1d !important;
	border-left: 4px solid #ef4444 !important;
	background: rgba(69, 10, 10, 0.9) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	color: #fecaca !important;
	font-size: 13px !important;
	line-height: 1.5;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
}

.login .message {
	background: rgba(23, 37, 84, 0.9) !important;
	border-color: #1e3a8a !important;
	border-left-color: #38bdf8 !important;
	color: #bfdbfe !important;
}