/* ==========================================================================
 * TRANG ĐĂNG NHẬP / ĐẶT LẠI MẬT KHẨU — MANG NHẬN DIỆN GERU     30/08/2026
 *
 * Trước đó là giao diện WordPress mặc định: logo chữ W, nút xanh dương, nền
 * xám. Đây lại là trang 227 học viên cũ sắp đi qua để lấy lại tài khoản, và
 * là cửa vào duy nhất của khu học — để nguyên thì như lạc sang site khác.
 *
 * ⚠️ KHÔNG dùng biến CSS (`var(--brand)`): trang đăng nhập KHÔNG nạp
 * `main.css` nên mọi biến sẽ rỗng và màu biến mất. Ghi thẳng mã hex.
 * ========================================================================== */

body.login {
	background: #fbfafd;
	background-image:
		radial-gradient( circle at 12% 8%, rgba(245, 55, 44, .10) 0%, rgba(245, 55, 44, 0) 46% ),
		radial-gradient( circle at 88% 92%, rgba(59, 31, 102, .13) 0%, rgba(59, 31, 102, 0) 50% );
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1e1236;
}

/* ───────────────────────────── LOGO ──────────────────────────────────── */

body.login #login {
	width: 380px;
	max-width: 92vw;
	padding: 6vh 0 4vh;
}

body.login h1 a {
	/* Logo Geru thay chữ W. Ảnh nạp bằng PHP để lấy đúng đường dẫn theme. */
	width: 232px;
	height: 46px;
	margin-bottom: 26px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* ───────────────────────────── THẺ FORM ──────────────────────────────── */

body.login form {
	margin-top: 20px;
	padding: 28px 26px 24px;
	border: 1px solid #ddd0f2;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 14px 40px rgba(42, 19, 72, .10);
}

body.login form label,
body.login form .password-input-wrapper label {
	font-size: .92rem;
	font-weight: 600;
	color: #4e3c6b;
}

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
	padding: 12px 14px;
	border: 1px solid #ddd0f2;
	border-radius: 12px;
	background: #ffffff;
	font-size: 1rem;
	color: #1e1236;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
	border-color: #f5372c;
	box-shadow: 0 0 0 3px rgba(245, 55, 44, .16);
	outline: none;
}

/* ───────────────────────────── NÚT ───────────────────────────────────── */

body.login .button-primary,
body.login .wp-generate-pw {
	height: auto;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: #f5372c;
	background-image: linear-gradient( 100deg, #f5372c 0%, #ff7a3d 100% );
	box-shadow: 0 8px 20px rgba(245, 55, 44, .3);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: none;
	color: #ffffff;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus,
body.login .wp-generate-pw:hover {
	background-image: linear-gradient( 100deg, #f5372c 0%, #ff7a3d 100% );
	box-shadow: 0 12px 26px rgba(245, 55, 44, .38);
	transform: translateY(-1px);
	color: #ffffff;
}

/* Nút phụ "Tạo mật khẩu" — viền rỗng để không tranh chỗ với nút chính. */
body.login .wp-generate-pw {
	background: transparent;
	background-image: none;
	border: 1px solid #ddd0f2;
	box-shadow: none;
	color: #4e3c6b;
}

body.login .wp-generate-pw:hover {
	background: #f4f0f9;
	background-image: none;
	box-shadow: none;
	color: #1e1236;
}

/* ─────────────────────── THÔNG BÁO / GỢI Ý ───────────────────────────── */

body.login .message,
body.login #login .notice,
body.login .success {
	border-left: 4px solid #f5372c;
	border-radius: 0 12px 12px 0;
	background: #fff5f3;
	padding: 14px 18px;
	font-size: .95rem;
	line-height: 1.65;
	color: #4e3c6b;
	box-shadow: none;
}

body.login #login_error {
	border-left: 4px solid #c2261c;
	border-radius: 0 12px 12px 0;
	background: #fdeceb;
	box-shadow: none;
	color: #7a1a12;
}

body.login .description.indicator-hint,
body.login p.description {
	font-size: .86rem;
	line-height: 1.6;
	color: #756590;
}

/* Thanh đo độ mạnh mật khẩu — dùng xanh lá của bộ nhận diện. */
body.login #pass-strength-result.strong { background: #e7f6ed; border-color: #a5dabe; color: #0f5c33; }
body.login #pass-strength-result.good   { background: #fdf4de; border-color: #e8cd8a; color: #6b4e07; }
body.login #pass-strength-result.short,
body.login #pass-strength-result.bad    { background: #fdeceb; border-color: #f0b7b2; color: #7a1a12; }

/* ─────────────────────── LIÊN KẾT PHÍA DƯỚI ──────────────────────────── */

body.login #nav,
body.login #backtoblog {
	margin: 14px 0 0;
	padding: 0 6px;
	font-size: .93rem;
	text-align: center;
}

body.login #nav a,
body.login #backtoblog a,
body.login a {
	color: #6d45a8;
	text-decoration: none;
	font-weight: 600;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login a:hover {
	color: #c2261c;
	text-decoration: underline;
}

/* Ô ngôn ngữ đã GỠ HẲN bằng bộ lọc `login_display_language_dropdown`
   trong functions.php. Luật này chỉ là lưới an toàn nếu plugin nào in lại. */
body.login .language-switcher { display: none; }

/* ─────────────────────── DÒNG GIỚI THIỆU RIÊNG ───────────────────────── */

.geru-login-loi {
	margin: 0 0 4px;
	text-align: center;
	font-size: .95rem;
	line-height: 1.65;
	color: #4e3c6b;
}

.geru-login-loi strong { color: #1e1236; }

.geru-login-zalo {
	margin: 16px 0 0;
	text-align: center;
	font-size: .9rem;
	color: #756590;
}

.geru-login-zalo a { color: #c2261c; font-weight: 700; }

/* ───────────────────────────── CHẾ ĐỘ TỐI ────────────────────────────── */

@media ( prefers-color-scheme: dark ) {
	body.login {
		background: #100a18;
		background-image:
			radial-gradient( circle at 12% 8%, rgba(245, 55, 44, .16) 0%, rgba(245, 55, 44, 0) 46% ),
			radial-gradient( circle at 88% 92%, rgba(109, 69, 168, .22) 0%, rgba(109, 69, 168, 0) 50% );
		color: #f2ecfa;
	}

	body.login form {
		background: #1b1226;
		border-color: #3a2b4f;
		box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
	}

	body.login form label,
	body.login .message { color: #cfc3e4; }

	body.login input[type="text"],
	body.login input[type="email"],
	body.login input[type="password"] {
		background: #241830;
		border-color: #3a2b4f;
		color: #f2ecfa;
	}

	body.login .message { background: #2a1620; }
	body.login .description.indicator-hint,
	body.login p.description,
	body.login .geru-login-zalo { color: #a89bc2; }
	body.login #nav a, body.login #backtoblog a, body.login a { color: #c2a6e8; }
	body.login .geru-login-loi { color: #cfc3e4; }
}