#lg-sc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lg-bx {
    background: var(--sf);
    width: 100%;
    max-width: 360px;
    padding: 30px;
    border-radius: var(--r);
    border: 1px solid var(--b);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.login-sub {
    font-size: var(--f-size-sm);       /* Đã đổi (13px) */
    color: var(--ts);
    margin-bottom: 24px;
    font-weight: var(--f-weight-medium); /* Bổ sung độ đậm vừa chuẩn UI sạch sẽ */
}
/* ==========================================
   MÀN HÌNH ĐĂNG NHẬP (Lg-sc & Lg-bx)
   ========================================== */
#lg-sc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lg-bx {
    background: var(--sf);
    width: 100%;
    max-width: 360px;
    padding: 30px;
    border-radius: var(--r);
    border: 1px solid var(--b);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.login-sub {
    font-size: var(--f-size-sm);       
    color: var(--ts);
    margin-bottom: 24px;
    font-weight: var(--f-weight-medium); 
}

/* ==========================================
   HUY HIỆU PHÂN QUYỀN
   ========================================== */

.role-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 6px;

    font-size: var(--f-size-xs);
    font-weight: var(--f-weight-bold);
    color: var(--white);
    text-transform: uppercase;
    line-height: 1;

    border-radius: var(--r-sm);
    transition: var(--transition);
}

/* MASTER */
.role-master{
    background: var(--d);
}

/* MANAGER */
.role-manager{
    background: var(--info);
}

/* STAFF */
.role-staff{
    background: var(--s);
}