/* Thanh tab cố định cuối màn hình điện thoại */
.tabbar{display:none}
@media (max-width:900px){
  body.has-tabbar .ft{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:58;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(28,13,6,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(201,154,107,.22);
    border-radius:20px 20px 0 0;box-shadow:0 -12px 32px rgba(0,0,0,.28)}
  .tabbar__i{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 2px 5px;position:relative;
    background:none;border:0;border-radius:14px;color:#b4a18d;font:500 11.5px/1.15 var(--sans);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s}
  .tabbar__i:active{background:rgba(255,255,255,.07)}
  .tabbar__ic{position:relative;display:grid;place-items:center;font-size:25px;line-height:1}
  .tabbar__ic .ic{width:1em;height:1em}
  .tabbar__t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar__i.is-active{color:#e3b877;font-weight:700}
  .tabbar__i.is-active::before{content:"";position:absolute;top:-7px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 4px 4px;background:#e3b877}
  .tabbar__badge{position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d9582b;color:#fff;font:700 10.5px/17px var(--sans);text-align:center}
  .tabbar__badge[hidden]{display:none}
  .tabbar__menu{border-left:1px solid rgba(255,255,255,.08);border-radius:0 14px 14px 0;margin-left:2px}
  /* tránh đè lên các nút nổi */
  body.has-tabbar .totop{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  body.has-tabbar .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  body.has-tabbar .buybar{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.has-tabbar.page-product{padding-bottom:calc(138px + env(safe-area-inset-bottom,0px))}
  body.has-tabbar.page-product .totop{bottom:calc(146px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:340px){.tabbar__t{font-size:10.5px}}
