:root{
	--gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e6e9f0; --gray-300:#dbe0ea;
	--gray-400:#b7bfcf; --gray-500:#8a93a6; --gray-600:#5c6579; --gray-700:#3c4353;
	--gray-800:#262b38; --gray-900:#12141c;
	--indigo-50:#eef1ff; --indigo-100:#e0e4ff; --indigo-500:#6366f1; --indigo-600:#4f46e5;
	--indigo-700:#4338ca;
	--red-500:#ef4444;
}
html,body.wm2-login-body{height:100%;}
body.wm2-login-body{margin:0;background:#fff;color:var(--gray-800);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;font-size:.875rem;}
.wm2-login-body input,.wm2-login-body button{font-family:'Inter',-apple-system,'Segoe UI',sans-serif;}

.login-page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}

@keyframes wm2LoginFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ===== panel thương hiệu bên trái ===== */
.brand-panel{
	position:relative;overflow:hidden;
	background:linear-gradient(150deg,#4f46e5 0%,#6366f1 45%,#818cf8 100%);
	color:#fff;display:flex;flex-direction:column;padding:44px 48px;
}
.brand-panel::before{
	content:"";position:absolute;width:420px;height:420px;border-radius:50%;
	background:rgba(255,255,255,.08);top:-140px;right:-120px;
}
.brand-panel::after{
	content:"";position:absolute;width:300px;height:300px;border-radius:50%;
	background:rgba(255,255,255,.06);bottom:-100px;left:-80px;
}
.bp-mid{position:relative;z-index:1;max-width:520px;flex:1;display:flex;flex-direction:column;justify-content:center;animation:wm2LoginFadeUp .5s ease both; margin:0px auto;}
.bp-mid h1{font-weight:800;font-size:2rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:14px;}
.bp-mid p{font-size:.92rem;opacity:.85;line-height:1.6;}
/* Nội dung tùy chỉnh (SystemSetting.login_page_content, admin tự nhập HTML
   ở /admin/settings/) thay cho tiêu đề/mô tả mặc định phía trên — h1/p bên
   trong tự thừa hưởng đúng 2 rule ".bp-mid h1"/".bp-mid p" ở trên, chỉ cần
   thêm cỡ chữ/line-height mặc định cho trường hợp admin gõ chữ thường
   không bọc thẻ nào. Có thêm class "ck-content" (xem login_v2.html) để các
   class cỡ chữ CKEditor sinh ra (.text-tiny/.text-small/.text-big/
   .text-huge, dùng khi admin chọn cỡ chữ trong trình soạn thảo) khớp đúng
   selector ".ck-content .text-*" trong ckeditor5.css mới có hiệu lực —
   NHƯNG ".ck-content" mặc định tự đặt lại color:#000 + font-family khác
   (dành cho nền trắng bình thường), PHẢI ghi đè lại ở đây cho đúng nền
   gradient tối của brand-panel (2 lớp class ăn specificity cao hơn
   ".ck-content" 1 lớp, luôn thắng bất kể thứ tự nạp CSS). */
.bp-mid .bp-custom-content{line-height:1.6;opacity:.95;font-size:large;color:#fff;font-family:inherit;}
.bp-custom-content a{color:#fff;text-decoration:underline;}
.bp-features{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;margin-top:30px;animation:wm2LoginFadeUp .5s .08s ease both;}
.bp-feat{display:flex;align-items:center;gap:12px;font-size:.85rem;transition:transform .2s ease;}
.bp-feat:hover{transform:translateX(3px);}
.bp-feat .fic{width:34px;height:34px;border-radius:.6rem;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bp-bottom{position:relative;z-index:1;font-size:.72rem;opacity:.65;}

/* ===== panel form bên phải ===== */
.form-panel{display:flex;flex-direction:column;padding:32px 48px;position:relative;}
/* Vạch gradient mảnh đầu trang — giữ chút dấu ấn thương hiệu ngay cả khi
   .brand-panel bị ẩn hẳn ở mobile (xem media query cuối file). */
.form-panel::before{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg,var(--indigo-500),var(--indigo-700));
}
.fp-top{display:flex;justify-content:flex-end;}
.lang-select{position:relative;}
.lang-btn{
	display:flex;align-items:center;gap:7px;border:1px solid var(--gray-200);background:#fff;
	border-radius:.6rem;padding:.4rem .75rem;font-size:.78rem;font-weight:600;color:var(--gray-600);
	transition:background .15s,border-color .15s;
}
.lang-btn:hover{background:var(--gray-50);border-color:var(--gray-300);}
.lang-menu{
	position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--gray-200);
	border-radius:.7rem;box-shadow:0 12px 30px -10px rgba(15,23,42,.2);min-width:170px;padding:6px;display:none;z-index:50;
}
.lang-menu.show{display:block;}
.lang-item-form{margin:0;}
.lang-item{
	display:flex;align-items:center;gap:9px;width:100%;padding:.5rem .6rem;border-radius:.5rem;
	font-size:.82rem;color:var(--gray-700);border:none;background:none;text-align:left;transition:background .15s;
}
.lang-item:hover{background:var(--gray-50);}
.lang-item.active{background:var(--indigo-50);color:var(--indigo-700);font-weight:600;}
.lang-flag{width:20px;text-align:center;}

.fp-mid{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:380px;margin:0 auto;width:100%;animation:wm2LoginFadeUp .5s .05s ease both;}
.fp-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.05rem;color:var(--gray-900);margin-bottom:32px;}
.fp-logo .ic{width:38px;height:38px;border-radius:.7rem;background:var(--indigo-50);color:var(--indigo-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem;}
.fp-logo-img{max-height:56px;max-width:200px;object-fit:contain;}
.fp-mid h2{font-weight:800;font-size:1.5rem;color:var(--gray-900);margin-bottom:6px;letter-spacing:-.01em;}
.fp-mid .sub{font-size:.85rem;color:var(--gray-500);margin-bottom:20px;}
.fp-mid .login-error{font-size:.82rem;color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:.7rem;padding:.65rem .9rem;margin-bottom:18px;}

.field-group{margin-bottom:16px;}
.field-group label{font-size:.78rem;font-weight:600;color:var(--gray-700);margin-bottom:6px;display:block;}
.input-icon{position:relative;}
.input-icon i.leading{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none;transition:color .15s;}
.input-icon input.form-control{
	width:100%;border:1px solid var(--gray-200);border-radius:.7rem;padding:.65rem .9rem .65rem 2.4rem;
	font-size:.88rem;outline:none;transition:border-color .15s, box-shadow .15s;box-shadow:none;
}
.input-icon input.form-control:focus{border-color:var(--indigo-500);box-shadow:0 0 0 3px var(--indigo-100);}
.input-icon input.form-control:focus ~ i.leading,
.input-icon input.form-control:focus + i.leading{color:var(--indigo-500);}
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--gray-400);padding:0;transition:color .15s;}
.toggle-pass:hover{color:var(--gray-600);}

.row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.remember-check{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--gray-600);margin:0;}
.remember-check input{accent-color:var(--indigo-600);width:15px;height:15px;margin:0;}

.btn-login{
	width:100%;background:var(--indigo-600);border:none;color:#fff;border-radius:.7rem;padding:.75rem;
	font-weight:700;font-size:.9rem;box-shadow:0 8px 20px -8px rgba(79,70,229,.55);
	transition:background .15s,box-shadow .15s,transform .1s;
}
.btn-login:hover{background:var(--indigo-700);color:#fff;box-shadow:0 12px 26px -8px rgba(67,56,202,.6);transform:translateY(-1px);}
.btn-login:active{transform:translateY(1px);box-shadow:0 6px 14px -8px rgba(79,70,229,.5);}
.btn-login:disabled{opacity:.75;transform:none;}

.fp-bottom{text-align:center;font-size:.8rem;color:var(--gray-500);margin-top:24px;}
.admin-link{text-align:center;margin-top:14px;}
.admin-link a{font-size:.74rem;color:var(--gray-400);text-decoration:none;transition:color .15s;}
.admin-link a:hover{color:var(--gray-600);}

@media (max-width:900px){
	.login-page{grid-template-columns:1fr;}
	.brand-panel{display:none;}
	.form-panel{padding:24px 20px;}
}

@media (prefers-reduced-motion:reduce){
	.bp-mid,.bp-features,.fp-mid{animation:none;}
}