/* ===== MOBILE LOGIN VISIBLE FIX =====
   Bắt buộc hiện khu đăng nhập/avatar trên điện thoại.
   Dùng .account-card hiện tại thay cho .account-pill cũ.
*/
@media (max-width:1100px){
  .side-menu{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
  }

  .side-links{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-right:4px!important;
  }

  .side-user,
  #sideUser{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:92px!important;
    height:56px!important;
    flex:0 0 92px!important;
    min-width:92px!important;
    max-width:92px!important;
    margin:0 0 0 4px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    z-index:20!important;
    background:transparent!important;
    border:0!important;
  }

  .side-user .account-card,
  #loginOpenBtn{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:4px 5px!important;
    box-sizing:border-box!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border-radius:16px!important;
    overflow:hidden!important;
    pointer-events:auto!important;
  }

  .side-user .account-avatar,
  #loginOpenBtn .account-avatar{
    display:grid!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    flex:0 0 28px!important;
    font-size:10px!important;
    line-height:1!important;
    background-size:cover!important;
    background-position:center!important;
  }

  .side-user .account-name,
  #loginOpenBtn .account-name{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:8.5px!important;
    line-height:1.05!important;
    color:#ffe8a3!important;
    -webkit-text-fill-color:initial!important;
    background:none!important;
    text-transform:none!important;
  }

  .side-user .logout-btn,
  #logoutBtn{
    position:absolute!important;
    right:0!important;
    top:58px!important;
    width:92px!important;
    min-height:28px!important;
    z-index:60!important;
  }
}

@media (max-width:560px){
  .side-menu{
    height:64px!important;
    max-height:64px!important;
    padding:5px 6px!important;
    gap:5px!important;
  }

  .side-logo{
    width:42px!important;
    flex:0 0 42px!important;
  }

  .side-logo img{
    width:42px!important;
    max-height:42px!important;
  }

  .menu-btn{
    min-width:76px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    font-size:8px!important;
  }

  .side-user,
  #sideUser{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    flex-basis:78px!important;
    height:54px!important;
  }

  .side-user .account-card,
  #loginOpenBtn{
    height:52px!important;
    min-height:52px!important;
    border-radius:15px!important;
    padding:4px!important;
  }

  .side-user .account-avatar,
  #loginOpenBtn .account-avatar{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    flex-basis:26px!important;
  }

  .side-user .account-name,
  #loginOpenBtn .account-name{
    font-size:8px!important;
  }

  .side-user .logout-btn,
  #logoutBtn{
    width:78px!important;
    top:56px!important;
    font-size:8px!important;
  }
}