:root{
    --brand-red:#B22222;      /* đỏ thương hiệu (trái) */
    --brand-red-deep:#7f0e0e; /* chuyển sắc */
    --party-red:#C8102E;      /* đỏ cờ Đảng */
    --brand-gold:#F2C84B;
    --ink-900:#212529;
    --ink-600:#6C757D;
    --bg-1:#F8F9FA;
    --bg-2:#F3F4F6;
}

/* ===== nền tổng thể nhẹ nhàng ===== */
.split-shell{
    min-height:100vh;
    background: radial-gradient(1200px 700px at 50% -10%, #ECEFF3 0, var(--bg-1) 50%, var(--bg-2) 100%);
}

/* ===== lưới 2 cột ===== */
.split-grid{
    min-height:100vh;
    display:grid;
    grid-template-columns:38% 62%;
}

/* ===== pane trái: chỉ gradient đỏ, KHÔNG trống đồng ===== */
.brand-pane{
    position:relative; color:#fff; overflow:hidden;
    background:
            linear-gradient(160deg, var(--brand-red), var(--brand-red-deep) 60%),
            radial-gradient(1000px 600px at 30% 0%, rgba(255,255,255,.12), rgba(255,255,255,0));
}
.brand-pane::after{ content:none !important; display:none !important; }

.brand-inner{
    position:relative; z-index:1; padding:40px 32px;
    display:flex; flex-direction:column; justify-content:center;
    min-height:100%; max-width:720px;
}

/* huy hiệu */
.badge-coa,.badge-flag{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; height:56px; background:#fff; border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.badge-coa img{ max-width:40px; height:auto; }
.badge-flag img{ max-height:36px; width:auto; }

/* tiêu đề cơ quan */
.brand-title{ font-size:1.25rem; line-height:1.35; font-weight:800; letter-spacing:.3px; margin:0 0 6px 0; }
.brand-sub{ opacity:.95; font-weight:500 }

/* ===== pane phải ===== */
.form-pane{
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:32px 24px;
    z-index:0;
}

/* Trống đồng chuyển sang PANE PHẢI, cực mờ và nằm phía sau */
.form-pane::before{
    content:"";
    position:absolute; inset:0;
    background: url("/img/bg_dongson.jpg") right 18% center / 72% no-repeat;
    opacity:.1;                   /* 0.04–0.08 tuỳ file bạn */
    filter:grayscale(90%) contrast(1);
    pointer-events:none;
    z-index:0;
}

/* card đăng nhập */
.auth-card{
    width:100%; max-width:460px; background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 14px 36px rgba(0,0,0,.06);
    overflow:hidden;
    z-index:1;
}
.auth-head{ padding:16px 20px 0 20px; }
.auth-body{ padding:16px 20px 20px 20px; }
.auth-foot{ padding:12px 20px; border-top:1px solid #eee; font-size:.875rem; color:var(--ink-600); }

.form-floating>.form-control:focus ~ label{ opacity:.85; }
.caps-hint{ display:none; font-size:.875rem; }

/* cờ Đảng động ở góc phải trên, nổi hơn card */
.flag-box{
    position:absolute; right:36px; top:36px; width:260px;
    z-index:2; opacity:.95;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
.party-flag-anim{ width:100%; height:auto; display:block; border-radius:8px; }

/* Fallback rung nhẹ nếu không có ảnh động */
.no-flag-anim .party-flag-fallback{ display:block; }
.party-flag-fallback{ display:none; }
.flag-wave img{
    width:100%; height:auto; display:block; border-radius:8px;
    transform-origin:left center;
    animation:flagWave 3.2s ease-in-out infinite;
}
@keyframes flagWave{
    0%{ transform:perspective(600px) rotateY(0) }
    50%{ transform:perspective(600px) rotateY(-10deg) }
    100%{ transform:perspective(600px) rotateY(0) }
}

/* ===== Responsive ===== */
@media (max-width:1200px){
    .split-grid{ grid-template-columns:42% 58% }
    .flag-box{ width:220px; right:24px; top:24px }
    .form-pane::before{ background-position:right 8% top 40%; background-size:78%; opacity:.055 }
}
@media (max-width:992px){
    .split-grid{ grid-template-columns:1fr }
    .brand-inner{
        padding: 36px 32px;
        justify-content: center;       /* giữ giữa dọc */
        min-height: 100%;
    }
    .form-pane{ padding:24px 16px }
    .flag-box{ width:180px; right: 44px; top: 28px; }
    .form-pane::before{ background-position:center top 18%; background-size:120%; opacity:.045 }
}
@media (max-width:576px){
    .brand-inner{ min-height:36vh }
    .auth-card{border-color: rgba(0,0,0,.06);
        box-shadow: 0 12px 28px rgba(0,0,0,.08); max-width:100% }
    .flag-box{ display:none }       /* tiết kiệm tài nguyên trên mobile */
    .form-pane::before{ display:none } /* ẩn hoạ tiết trên mobile cho thoáng */
}

/* người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion:reduce){
    .party-flag-anim,.flag-wave img{ animation:none }
}

.auth-card .btn-primary{
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus{
    background-color: #9d1a1a;
    border-color: #9d1a1a;
}

.auth-card .form-control:focus{
    border-color: rgba(13,110,253,.6);
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}