/* ===== Bottom tab bar ===== */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:480px;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,0.92);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--line);
  display:flex;align-items:stretch;padding-bottom:env(safe-area-inset-bottom);
  z-index:60;overflow:hidden;
}
.tab-item{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--slate-light);position:relative;padding:0 2px;
}
.tab-item svg{width:20px;height:20px;flex-shrink:0;}
.tab-item span{
  font-size:9.5px;font-weight:700;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tab-item.active{color:var(--teal);}
.tab-item.active .tab-pill{
  position:absolute;top:2px;width:28px;height:3px;border-radius:3px;background:var(--teal);
}
.tab-item:active{opacity:0.6;}
.tab-item.is-hidden{display:none;}

/* Có 6 tab (khi đăng nhập admin) thì thu icon/chữ nhỏ thêm 1 chút để vẫn
   thoáng, tránh cảm giác chật — 5 tab (tài khoản thường) giữ nguyên kích
   thước ở trên vì .is-hidden đã bỏ tab Admin ra khỏi luồng flex. */
.tabbar:has(.tab-item[data-page="admin"]:not(.is-hidden)) .tab-item svg{width:19px;height:19px;}
.tabbar:has(.tab-item[data-page="admin"]:not(.is-hidden)) .tab-item span{font-size:9px;}