:root{
    --bg1:#020617;
    --bg2:#0b1f45;
    --bg3:#102a6b;
    --accent:#38bdf8;
    --accent-soft:#0ea5e9;
    --accent-gold:#fbbf24;
    --muted:rgba(226,232,240,0.9);
    --card-start: rgba(15,23,42,0.88);
    --card-end: rgba(15,23,42,0.78);
    --input-bg:#020617;
    --input-border:#1e293b;
    --input-color:#e5e7eb;
    font-family: 'Times New Roman', serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(135deg, #0b3a78 0%, #0e4b9c 40%, #0b5fbf 70%, #0a4aa4 100%);
    font-family: 'Times New Roman', serif;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Lớp nền công nghệ + trống đồng Đông Sơn kiểu số hóa */
body::before{
    content:"";
    position: absolute;
    inset: -10% -5%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 0 2px, transparent 3px),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 25%, rgba(255,255,255,0.12) 0 2px, transparent 3px),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size:
        240px 240px,
        260px 260px,
        280px 280px,
        300px 300px,
        110px 1px,
        1px 110px;
    opacity: 0.35;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Vòng tròn trống đồng Đông Sơn ở trung tâm, phong cách digital */
body::after{
    content:"";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 35%, rgba(255,215,0,0.18) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 35%, rgba(255,215,0,0.10) 0 120px, transparent 130px),
        conic-gradient(from 0deg at 50% 35%,
            rgba(255,255,255,0.10) 0 20deg,
            transparent 20deg 40deg,
            rgba(255,255,255,0.08) 40deg 60deg,
            transparent 60deg 80deg,
            rgba(255,255,255,0.08) 80deg 100deg,
            transparent 100deg 120deg,
            rgba(255,255,255,0.10) 120deg 140deg,
            transparent 140deg 160deg,
            rgba(255,255,255,0.08) 160deg 180deg,
            transparent 180deg 200deg,
            rgba(255,255,255,0.08) 200deg 220deg,
            transparent 220deg 240deg,
            rgba(255,255,255,0.10) 240deg 260deg,
            transparent 260deg 280deg,
            rgba(255,255,255,0.08) 280deg 300deg,
            transparent 300deg 320deg,
            rgba(255,255,255,0.08) 320deg 340deg,
            transparent 340deg 360deg);
    opacity: 0.25;
    pointer-events: none;
}
.login-header {
    width: 100%;
    text-align: center;
    margin-top: 36px;
    margin-bottom: 18px;
    position:relative;
    z-index:2;
}
.login-header img {
    width: 110px;
    height: 110px;
    margin-bottom: 8px;
}
.login-header .main-title {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 0;
}
.login-header .sub-title {
    font-size: 44px;
    font-weight: 800;
    color: #ffd400;
    letter-spacing: 1px;
    margin-top: 0;
    line-height: 1.1;
}
.login-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 18px;
    min-height: 600px;
    position:relative;
    z-index:2;
}

/* Lưới số hóa chuyển động nhẹ phía sau khung đăng nhập */
.login-main::before{
    content:"";
    position:absolute;
    inset:-40px;
    background-image:
        linear-gradient(90deg, rgba(56,189,248,0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(56,189,248,0.06) 1px, transparent 1px);
    background-size: 80px 1px, 1px 80px;
    opacity:0.4;
    mix-blend-mode:screen;
    z-index:0;
    pointer-events:none;
    animation:gridDrift 40s linear infinite;
}
/* Sửa lại để mobile không bị đẩy khung đăng nhập ra ngoài */
.login-illustration {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
    min-height: 180px;
}
.login-illustration img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: none; /* Ẩn hình minh họa khung trắng bên trái */
}
.login-form-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 420px;
    margin-left: 32px;
}
.login-card {
    width: 440px;
    background: var(--card-start);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(15,23,42,0.85);
    padding: 38px 36px 32px 36px;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(148,163,184,0.25);
}
.panel-title {
    color: var(--accent-gold);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 22px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.13);
    padding-bottom: 12px;
    letter-spacing: 1px;
}
.field-label {
    color: #e5e7eb;
    font-size: 15px;
    margin: 12px 0 6px 2px;
    font-weight: 500;
}
.input-with-icon {
    position: relative;
    margin-bottom: 8px;
}
.input-with-icon input {
    width: 100%;
    padding: 13px 44px 13px 36px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-color);
    font-size: 15px;
    outline: none;
    box-shadow: none;
}
.input-with-icon .icon-user,
.input-with-icon .icon-lock {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0b0b0;
    font-size: 18px;
    pointer-events: none;
}
.input-with-icon .toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 18px;
}
.remember {
    color: #94a3b8;
    font-size: 13px;
}
.remember input { margin-right: 6px; }
.forgot {
    color: #93c5fd;
    font-size: 13px;
    text-decoration: none;
}
.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-soft), #2563eb);
    color: #fff;
    border: none;
    padding: 13px 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;
    margin-top: 10px;
    box-shadow: 0 12px 32px rgba(37,99,235,0.45);
    letter-spacing: 1px;
}
.btn-submit:hover{
    background: linear-gradient(135deg, #38bdf8, #1d4ed8);
}
.error {
    background: rgba(255,82,82,0.10);
    color: #ffd6d6;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    text-align: center;
}
.powered{clear:both;color:var(--muted);font-size:12px;margin-top:28px;text-align:center}

/* Hiệu ứng chuyển động nhẹ cho nền */
@keyframes bgFloat{
    0%{transform:translate3d(0,0,0) scale(1);}
    100%{transform:translate3d(-40px,-20px,0) scale(1.03);}
}

@keyframes drumSpin{
    0%{transform:translate(-50%,-55%) rotate(0deg);}
    100%{transform:translate(-50%,-55%) rotate(360deg);}
}

@keyframes gridDrift{
    0%{background-position:0 0,0 0;}
    100%{background-position:120px 60px,60px 120px;}
}

/* Responsive adjustments */
@media(max-width:1100px){
  .header-line1,.header-line2{font-size:24px}
  .header-emblem{width:72px;height:72px}
  .login-left{display:block;background-size:520px auto;min-width:420px;height:420px;background-position:center}
  .login-page{flex-direction:column;padding-top:120px;padding:22px}
  .login-left{order:0;margin-bottom:18px}
  .login-right{order:1;width:100%}
  .panel-title{text-align:center}
  .brand{justify-content:center}
  .btn-submit{width:100%;float:none}
}
@media(max-width:600px){
  .header-line1,.header-line2{font-size:18px}
  .header-emblem{display:none}
  .login-left{height:220px;background-size:cover}
}
@media (max-width: 1200px) {
    .login-main { flex-direction: column; align-items: center; }
    .login-illustration { justify-content: center; min-width: 0; width: 100%; }
    .login-form-wrapper { margin-left: 0; margin-top: 24px; }
}
@media (max-width: 700px) {
    .login-header {
        margin-top: 12px;
        margin-bottom: 25px; /* Cách đúng 25px với khung đăng nhập */
    }
    .login-header .main-title, .login-header .sub-title { font-size: 22px; }
    .login-header img { width: 60px; height: 60px; }
    .login-main {
        flex-direction: column;
        padding: 0 8px;
        min-height: auto;
        align-items: center;
        justify-content: flex-start;
        display: flex;
        margin-top: 0 !important;
        width: 100vw;
        box-sizing: border-box;
    }
    .login-illustration { display: none !important; }
    .login-form-wrapper {
        min-width: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 0 !important;
    }
    .login-card {
        width: calc(100vw - 32px);
        max-width: 420px;
        min-width: 220px;
        padding: 14px 16px;
        margin-left: 10px;
        margin-right: auto;
        box-sizing: border-box;
        border-radius: 12px;
        display: block;
    }
}