/* ===== LQM Mobile Bottom Nav (đồng bộ toàn site) ===== */
:root {
  --lqm-nav-bg: rgba(10, 10, 18, 0.96);
  --lqm-nav-border: rgba(255, 255, 255, 0.1);
  --lqm-nav-muted: #6b6b7b;
  --lqm-nav-text: #e8e8f0;
  --lqm-nav-accent: #00eaff;
  --lqm-nav-primary: #8a2be2;
  --lqm-nav-gold: #ffd54a;
  --lqm-nav-page-bg: #050505;
}

/* Mobile bottom bar */
.mobile-nav,
nav.mobile-nav,
#mobile-nav-container.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  padding: 0 6px env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
  justify-content: space-around;
  align-items: center;
  background: var(--lqm-nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--lqm-nav-border);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
}

/* Scope chặt vào .mobile-nav để trang không đè font-size (vd. 24px icon-only cũ) */
.mobile-nav .m-nav-item,
nav.mobile-nav .m-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: var(--lqm-nav-muted) !important;
  text-decoration: none !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  width: 64px !important;
  max-width: 20% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  transition: color 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 4px 0 !important;
  margin: 0 !important;
  transform: none !important;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

.mobile-nav .m-nav-item i,
nav.mobile-nav .m-nav-item i {
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav .m-nav-item span,
nav.mobile-nav .m-nav-item span {
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.mobile-nav .m-nav-item:active {
  transform: scale(0.94) !important;
}

.mobile-nav .m-nav-item.active,
nav.mobile-nav .m-nav-item.active {
  color: var(--lqm-nav-accent) !important;
}

.mobile-nav .m-nav-item.active i {
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.45));
}

/* chặn pseudo-dot cũ từ profile/naptien */
.mobile-nav .m-nav-item.active::after {
  display: none !important;
  content: none !important;
}

/* Center FAB Home */
.mobile-nav .m-nav-item.center {
  position: relative !important;
  top: -22px !important;
  width: 70px !important;
  max-width: 22% !important;
}

.mobile-nav .m-nav-item.center .fab-circle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--lqm-nav-primary), var(--lqm-nav-accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(138, 43, 226, 0.5);
  border: 4px solid var(--lqm-nav-page-bg);
  color: #fff;
  font-size: 26px !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-nav .m-nav-item.center .fab-circle i {
  font-size: 26px !important;
  color: #fff !important;
}

.mobile-nav .m-nav-item.center.active .fab-circle,
.mobile-nav .m-nav-item.center .fab-circle:active {
  box-shadow: 0 0 28px rgba(0, 234, 255, 0.55);
}

.mobile-nav .m-nav-item.center span {
  display: none !important; /* icon only on FAB */
}

.mobile-nav .m-nav-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--lqm-nav-accent) !important;
  object-fit: cover;
  margin: 0 !important;
  background: #222;
}

.mobile-nav .m-nav-item.active .m-nav-avatar {
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
}

/* Nạp tiền highlight gold — không bị page CSS đè */
.mobile-nav .m-nav-item[style*="lqm-nav-gold"],
.mobile-nav a.m-nav-item[href="/trangnaptien"]:not(.active) {
  color: var(--lqm-nav-gold) !important;
}

/* Desktop auth helpers used with LqmNav */
.nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--lqm-nav-accent);
  object-fit: cover;
  margin-right: 8px;
}

/* Space for bottom bar on mobile */
@media (max-width: 768px) {
  .mobile-nav,
  nav.mobile-nav,
  #mobile-nav-container.mobile-nav {
    display: flex !important;
  }

  body {
    padding-bottom: 90px !important;
  }

  /* hide pure-desktop top nav if page uses this class */
  .desktop-nav.lqm-hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-nav,
  nav.mobile-nav,
  #mobile-nav-container.mobile-nav {
    display: none !important;
  }
}