/* ── DEMO MODE BANNER ───────────────────────────────────── */
.demo-banner {
  background: linear-gradient(90deg, #7c0000, #cc0000);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .3px;
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 2px solid #ff4757;
}
.demo-banner code {
  background: rgba(255,255,255,.2);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: .85rem;
  font-family: monospace;
}

/* ── ANNOUNCE BANNER ────────────────────────────────────── */
.announce-banner {
  background: linear-gradient(90deg, #7c4f00, var(--orange));
  color: #fff; text-align: center; padding: 9px 20px;
  font-size: .88rem; font-weight: 700; position: sticky; top: 0; z-index: 300;
}

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Fix toàn bộ layout mobile
   ════════════════════════════════════════════════════════════ */

/* ── Nav mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Ẩn nav-links desktop, hiện hamburger */
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5,10,24,.97);
    z-index: 999;
    padding: 80px 24px 40px;
    gap: 8px;
    overflow-y: auto;
  }
  .nav-links.open .nav-link,
  .nav-links.open .btn {
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border);
  }
  .nav-links.open .nav-balance {
    text-align: center;
    font-size: 1.1rem;
    padding: 14px;
    background: rgba(0,212,255,.08);
    border-radius: 10px;
    border: 1px solid var(--border);
  }

  /* Hamburger button */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    z-index: 1000;
    position: relative;
  }
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cyan);
    border-radius: 2px;
    transition: .3s;
  }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* Close button trong menu */
  .nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text2);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Nav logo nhỏ lại */
  .nav { padding: 10px 16px; }
  .logo { font-size: 1rem; }

  /* ── Dashboard layout: sidebar thành bottom tab bar ── */
  .dashboard-layout {
    flex-direction: column !important;
  }

  .sidebar {
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    top: auto !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px !important;
    gap: 2px !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    z-index: 200;
    background: var(--card) !important;
    backdrop-filter: blur(12px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  .sidebar-brand { display: none !important; }
  .sidebar-balance { display: none !important; }
  .sidebar-divider { display: none !important; }

  .sidebar-item {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    min-width: 60px;
    flex-shrink: 0;
    font-size: .65rem !important;
    white-space: nowrap;
    text-align: center;
  }
  .sidebar-icon {
    font-size: 1.2rem !important;
    display: block;
  }

  /* Nội dung đẩy lên trên, tránh bị tab bar che */
  .dash-content {
    padding: 16px 14px 90px !important;
  }
  .page-wrap {
    padding: 16px 14px 90px !important;
  }

  /* ── Buy page: panel xuống dưới cards ── */
  /* Override inline style của buy.php */
  .dash-content > div[style*="flex:1;padding"] {
    padding: 14px !important;
  }
  div[style*="width:300px"] {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }

  /* ── Cards & grids ── */
  .card-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .packages {
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr)) !important;
  }
  .topup-grid {
    grid-template-columns: 1fr !important;
  }
  .buy-layout {
    flex-direction: column !important;
  }

  /* ── Tables scroll ngang ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Balance bar ── */
  .balance-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Form row ── */
  .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* ── Auth card ── */
  .auth-wrap { padding: 16px; }
  .auth-card { padding: 24px 18px; }

  /* ── Dash title ── */
  .dash-title { font-size: 1.1rem !important; }

  /* ── Metric cards 2 cột ── */
  .metric-card { padding: 14px !important; }
  .metric-val  { font-size: 1.1rem !important; }

  /* ── Demo banner ── */
  .demo-banner { font-size: .75rem; padding: 8px 12px; }
}

/* ── Hamburger ẩn trên desktop ── */
.hamburger { display: none; }

/* ── Tablet (768–1024) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 180px !important; }
  .sidebar-item { font-size: .82rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Buy page specific mobile ── */
@media (max-width: 768px) {
  .buy-layout-wrap {
    flex-direction: column !important;
  }
  /* Main cards area */
  .buy-layout-wrap > div:first-child {
    width: 100% !important;
    padding: 14px !important;
    order: 2;
  }
  /* Right panel - lên trên trên mobile */
  .buy-layout-wrap > div:last-child {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border) !important;
    order: 1;
    padding: 16px !important;
  }
  /* Tabs scroll ngang */
  .buy-layout-wrap .tab-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  /* Package cards 1 cột mobile */
  .buy-layout-wrap [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Dashboard buy page: ẩn bottom padding page-wrap */
  .dash-content[style*="padding:0"] {
    padding-bottom: 80px !important;
  }
}