/* Bottom-nav (5 tab cố định) + menu-sheet (lưới đủ mọi trang) — chỉ 4 trang tab-bar dùng
   (index/data/events/account.html). Markup do <app-bottom-nav>/<app-menu-sheet> ở shared/nav.js sinh ra. */
.bottom-nav-wrap{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;justify-content:center;z-index:50;}
.bottom-nav{width:100%;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(16,24,60,.15);display:flex;justify-content:space-around;align-items:flex-end;padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font-size:10px;font-weight:650;flex:1;white-space:nowrap;}
.nav-item span{max-width:64px;overflow:hidden;text-overflow:ellipsis;}
.nav-item .nav-icon-wrap{width:22px;height:22px;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);}
.nav-item.active{color:var(--blue-600);}
.nav-item.active .nav-icon-wrap{width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,var(--blue-500),var(--blue-600));margin-top:-12px;box-shadow:0 6px 16px -4px rgba(48,111,182,.55), 0 0 0 4px var(--paper);}
.nav-item.active .nav-icon-wrap svg{color:#fff;}
.nav-item:active .nav-icon-wrap{transform:scale(.9);}

.sheet-backdrop{position:fixed;inset:0;background:rgba(10,15,29,.5);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:90;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.menu-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,120%);width:100%;max-width:480px;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:var(--shadow-float);padding:12px 18px calc(20px + env(safe-area-inset-bottom));z-index:91;transition:transform .4s var(--ease);}
.sheet-backdrop.open .menu-sheet{transform:translate(-50%,0);}
.sheet-handle{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 16px;}
.sheet-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet-title-row h3{margin:0;font-size:16px;font-weight:800;color:var(--text-1);}
.sheet-close{width:30px;height:30px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0;}
.sheet-close svg{width:15px;height:15px;}
.menu-sheet .nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:0;}
.menu-sheet .nav-tile{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:13px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;}
.menu-sheet .nav-tile .ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--blue-600);}
.menu-sheet .nav-tile .ic svg{width:19px;height:19px;}
.menu-sheet .nav-tile .lbl{font-size:11px;font-weight:700;color:var(--text-1);line-height:1.25;}
.menu-sheet .nav-tile.active{border-color:var(--blue-600);background:#eef6ff;}
.menu-sheet .nav-tile.active .lbl{color:var(--blue-600);}