/* ============================================
   SHOPMEBU.VN – Black / White / Red Gaming Theme
   ============================================ */

:root {
  --primary:       #e50914;
  --primary-dark:  #9f0008;
  --primary-light: #fff1f2;
  --primary-mid:   #ff2430;
  --accent:        #111111;
  --accent2:       #e50914;
  --accent-yellow: #ffffff;
  --green:         #00c853;
  --bg:            #f4f5f7;
  --bg2:           #ffffff;
  --card-bg:       #ffffff;
  --border:        #ead4d6;
  --border-soft:   rgba(229,9,20,.12);
  --text:          #111111;
  --text-muted:    #5b5b65;
  --text-light:    #9b9ba5;
  --radius:        12px;
  --shadow-card:   0 2px 18px rgba(17,17,17,.08);
  --shadow-hover:  0 12px 34px rgba(17,17,17,.15);
  --shadow-float:  0 20px 52px rgba(17,17,17,.18);
}

* { margin:0; padding:0; box-sizing:border-box; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f5f7 320px),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior-x: none;
}

a { text-decoration: none; color: inherit; }
img, video, canvas, svg { max-width: 100%; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ===== TOPBAR ===== */
.topbar {
  background: linear-gradient(90deg, #080808 0%, #161616 48%, #e50914 100%);
  padding: 7px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.topbar-left, .topbar-right { display: flex; gap: 16px; align-items: center; }
.topbar a { color: rgba(255,255,255,.88); display: flex; align-items: center; gap: 5px; transition: color .15s; font-weight:600; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .divider { width:1px; height:13px; background:rgba(255,255,255,.25); }
.topbar span { color: rgba(255,255,255,.82); }
.topbar .online-dot {
  width:7px; height:7px; border-radius:50%; background:#6effc0;
  display:inline-block; box-shadow:0 0 7px #6effc0; animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ===== HEADER ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 12px 30px rgba(17,17,17,.06);
}
.header-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
}

/* LOGO */
.site-logo { flex-shrink:0; display:flex; flex-direction:column; line-height:1; }
.logo-text {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #080808, #e50914 72%, #111111);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -0.5px; text-shadow: none;
}
.logo-sub { font-size: 10px; color: var(--text-light); margin-top: 2px; font-weight: 500; }

/* SEARCH */
.search-wrap { flex:1; max-width:500px; position:relative; }
.search-wrap input {
  width: 100%;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 28px;
  padding: 10px 48px 10px 20px;
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-weight: 500;
}
.search-wrap input::placeholder { color: var(--text-light); }
.search-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(230,21,21,.10);
}
.search-btn {
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border:none; border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; cursor:pointer;
  box-shadow: 0 3px 10px rgba(230,21,21,.30);
  transition: transform .15s, box-shadow .15s;
}
.search-btn:hover { transform:translateY(-50%) scale(1.08); box-shadow:0 5px 16px rgba(230,21,21,.45); }

/* HEADER ACTIONS */
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }

/* NẠP TIỀN BUTTON */
.btn-napien {
  background: linear-gradient(135deg, #111, var(--primary));
  color:#fff !important; font-weight:800; font-size:13px;
  padding: 10px 22px; border-radius:28px; border:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  box-shadow: 0 4px 16px rgba(230,21,21,.35);
  transition: transform .15s, box-shadow .15s;
  text-decoration:none; letter-spacing:.2px;
}
.btn-napien:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(230,21,21,.50);
  color:#fff !important;
}

/* ICON BTN */
.icon-btn {
  background:var(--bg); border:2px solid var(--border);
  border-radius:50%; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--text);
  position:relative; transition: all .2s; text-decoration:none;
}
.icon-btn:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.icon-btn .badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--accent2); color:#fff; font-size:9px; font-weight:800;
  width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* USER MENU */
.user-menu { position:relative; }
.user-toggle {
  display:flex; align-items:center; gap:9px;
  background:var(--bg); border:2px solid var(--border);
  border-radius:28px; padding:6px 14px 6px 7px;
  cursor:pointer; transition: all .2s;
}
.user-toggle:hover { border-color:var(--primary); box-shadow:0 0 0 4px rgba(230,21,21,.10); }
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; font-weight:800;
}
.user-name { font-size:13px; font-weight:700; color:var(--text); }
.user-balance { font-size:11px; color:var(--primary); font-weight:700; }
.ctv-mini-badge {
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:5px; padding:1px 5px; border-radius:999px;
  background:#dcfce7; color:#15803d; font-size:9px; font-weight:900;
  vertical-align:middle;
}
.dropdown-menu-custom {
  position:absolute; right:0; top:calc(100% + 10px);
  background:#fff; border:1.5px solid var(--border);
  border-radius:14px; min-width:210px; padding:8px 0;
  box-shadow: var(--shadow-float); z-index:999; display:none;
}
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.user-menu:not(.open):hover .dropdown-menu-custom { display:none !important; }
.user-menu.open .dropdown-menu-custom { display:block !important; }
.dropdown-menu-custom a {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; font-size:13px; color:var(--text);
  transition: background .15s, padding-left .15s;
}
.dropdown-menu-custom a:hover { background:var(--primary-light); color:var(--primary); }
.dropdown-menu-custom .divider-line { height:1px; background:var(--border); margin:6px 0; }

/* ===== NAVBAR ===== */
.main-nav {
  background:#fff;
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width:1320px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:0; overflow-x:auto;
}
.nav-item { position:relative; }
.nav-link {
  display:flex; align-items:center; gap:6px;
  padding: 13px 17px; font-size:13px; font-weight:700;
  color:var(--text-muted); white-space:nowrap; cursor:pointer;
  border-bottom: 3px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
  position:relative;
}
.nav-link:hover, .nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: #fff5f5;
}
.nav-link .arrow { font-size:9px; transition:transform .2s; }
.nav-item:hover .nav-link .arrow { transform:rotate(180deg); }

/* Nạp tiền nav item */
.nav-naptien { color: var(--primary) !important; }
.nav-naptien:hover { background:#fff5f5 !important; border-bottom-color:var(--primary) !important; }

/* NAV DROPDOWN */
.nav-dropdown {
  position:absolute; top:100%; left:0;
  background:#fff; border:1.5px solid var(--border);
  border-radius:0 14px 14px 14px; min-width:240px;
  padding:10px 0; box-shadow:var(--shadow-float); z-index:900;
  display:none; animation:fadeDown .15s ease;
}
.nav-item:hover .nav-dropdown { display:block; }
.nav-dropdown-header {
  padding:8px 18px 10px; font-size:11px; text-transform:uppercase;
  letter-spacing:1px; color:var(--primary); font-weight:800;
  border-bottom:1px solid var(--bg2); margin-bottom:4px;
}
.nav-dropdown a {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 18px; font-size:13px; color:var(--text-muted);
  transition: all .15s;
}
.nav-dropdown a:hover { background:var(--primary-light); color:var(--primary); padding-left:24px; }
.nav-dropdown .item-count {
  background:var(--primary-light); color:var(--primary);
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px;
}
.nav-dropdown .item-new {
  background:linear-gradient(135deg,var(--accent2),#ff8a65);
  color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:8px;
}
.item-hot { font-size:14px; }

/* ===== MAIN CONTENT ===== */
.site-content { max-width:1320px; margin:0 auto; padding:24px 20px; }

/* ===== FLASH ===== */
.flash {
  padding:13px 18px; border-radius:10px; margin-bottom:16px;
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px;
  animation: slideIn .3s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.flash-success { background:#e8faf2; border:1.5px solid #86efca; color:#065f3a; }
.flash-error   { background:#fff1f1; border:1.5px solid #fca5a5; color:#991b1b; }

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted);
  margin-bottom:20px; padding:10px 16px; background:#fff;
  border-radius:10px; border:1px solid var(--border);
}
.breadcrumb a { color:var(--primary); font-weight:600; }
.breadcrumb i { font-size:9px; color:var(--text-light); }

/* ===== BTN BASE ===== */
.btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; border-radius:28px; font-weight:700; font-size:13px; border:none; cursor:pointer; transition:all .2s; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,#111,var(--primary)); color:#fff; box-shadow:0 4px 16px rgba(17,17,17,.22); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(230,21,21,.45); color:#fff; }
.btn-outline { background:#fff; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary-light); }
.btn-success { background:linear-gradient(135deg,#00c853,#009624); color:#fff; box-shadow:0 4px 14px rgba(0,200,83,.30); }
.btn-success:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,200,83,.40); color:#fff; }
.btn-warning { background:linear-gradient(135deg,#111,var(--primary)); color:#fff; }
.btn-sm { padding:7px 15px; font-size:12px; }
.btn-danger { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; }

/* ===== FOOTER ===== */
.site-footer {
  background: linear-gradient(180deg, #111 0%, #050505 100%);
  border-top: 3px solid var(--primary);
  margin-top: 60px;
}
.footer-top {
  max-width:1320px; margin:0 auto; padding:40px 20px 28px;
  display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1fr; gap:36px;
}
.footer-brand .logo-text {
  font-size:20px;
  background: linear-gradient(135deg, #ff6a6a, #fff, #ff6a6a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-desc { font-size:12.5px; color:rgba(255,255,255,.5); margin-top:10px; line-height:1.75; }
.footer-hotline { margin-top:14px; display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.6); }
.footer-hotline .number { color:#fff; font-weight:800; font-size:16px; }
.footer-socials { display:flex; gap:8px; margin-top:14px; }
.social-btn {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6); transition:all .2s;
}
.social-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px); }
.footer-col h4 {
  font-size:13px; font-weight:800; color:#fff; margin-bottom:14px;
  padding-bottom:8px; border-bottom:2.5px solid var(--primary); display:inline-block;
}
.footer-links { list-style:none; }
.footer-links li { margin-bottom:9px; }
.footer-links a {
  font-size:12.5px; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:6px; transition:all .15s;
}
.footer-links a::before { content:'›'; color:var(--primary); font-size:16px; line-height:1; }
.footer-links a:hover { color:#fff; padding-left:5px; }
.footer-stats { display:flex; flex-direction:column; gap:10px; }
.stat-item {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.08);
  border-radius:10px; padding:9px 13px;
}
.stat-icon { font-size:18px; }
.stat-label { font-size:11px; color:rgba(255,255,255,.45); }
.stat-value { font-size:15px; font-weight:900; color:var(--primary-mid); }
.footer-work {
  margin-top:12px; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-radius:10px; padding:9px 14px; font-size:11.5px;
  color:#fff; font-weight:700; text-align:center;
  box-shadow:0 4px 14px rgba(230,21,21,.30);
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding:14px 20px;
  max-width:1320px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px;
}
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.35); }

/* ===== MOBILE ===== */
.mobile-menu-btn {
  display:none; background:none; border:none;
  color:var(--text); font-size:22px; cursor:pointer; margin-left:auto;
  padding:6px; border-radius:8px; transition:background .15s;
}
.mobile-menu-btn:hover { background:var(--primary-light); color:var(--primary); }
.tag-new { background:var(--accent2); color:#fff; font-size:9px; font-weight:800; padding:1px 7px; border-radius:8px; vertical-align:middle; margin-left:4px; }
.tag-hot { background:var(--accent); color:#fff; font-size:9px; font-weight:800; padding:1px 7px; border-radius:8px; vertical-align:middle; margin-left:4px; }

/* Mobile nav drawer */
.mobile-nav-drawer {
  display:none; position:fixed; inset:0; z-index:9998;
}
.mobile-nav-drawer.open { display:block; }
.mobile-nav-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
}
.mobile-nav-panel {
  position:absolute; top:0; left:0; bottom:0; width:280px;
  background:#fff; overflow-y:auto; padding:20px 0;
  box-shadow:4px 0 30px rgba(0,0,0,.25);
  animation:slideInLeft .25s ease;
}
@keyframes slideInLeft { from{transform:translateX(-100%)} to{transform:none} }
.mobile-nav-header {
  padding:14px 20px 16px;
  border-bottom:2px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.mobile-nav-close {
  background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted);
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.mobile-nav-close:hover { background:var(--primary-light); color:var(--primary); }
.mobile-nav-links { padding:0 8px; }
.mobile-nav-links a {
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; border-radius:12px; font-size:14px;
  font-weight:700; color:var(--text); transition:all .15s; margin-bottom:2px;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active {
  background:var(--primary-light); color:var(--primary);
}
.mobile-nav-links .divider-line { height:1px; background:var(--border); margin:8px 6px; }
.mobile-user-card {
  margin:12px 8px 0; padding:14px 16px;
  background:linear-gradient(135deg, #111, var(--primary));
  border-radius:14px; color:#fff;
}
.mobile-user-card .mu-name { font-size:15px; font-weight:800; }
.mobile-user-card .mu-balance { font-size:12px; color:rgba(255,255,255,.75); margin-top:2px; }
.mobile-user-card .mu-actions { display:flex; gap:8px; margin-top:12px; }
.mobile-user-card .mu-btn {
  flex:1; padding:8px 0; border-radius:20px; font-size:12px; font-weight:700;
  border:1.5px solid rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.12);
  text-align:center; cursor:pointer;
}
.mobile-user-card .mu-btn:hover { background:rgba(255,255,255,.22); }

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* --- TABLET (≤1024px) --- */
@media (max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .search-wrap { max-width:320px; }
  .admin-stats-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
}

/* --- MOBILE (≤768px) --- */
@media (max-width:768px) {
  html,
  body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body { touch-action:pan-y; }

  .topbar,
  .site-header,
  .main-nav,
  .site-content,
  .site-footer {
    max-width:100vw;
    overflow-x:hidden;
  }

  .topbar-inner,
  .header-inner,
  .nav-inner,
  .site-content,
  .container,
  .footer-top,
  .footer-bottom {
    max-width:100%;
    min-width:0;
  }

  /* TOPBAR */
  .topbar { display:none; }

  /* HEADER */
  .mobile-menu-btn { display:flex; align-items:center; justify-content:center; }
  .header-inner {
    flex-wrap:nowrap; gap:8px; padding:0 12px;
  }
  .header-actions,
  .user-menu { min-width:0; }
  .header-actions { gap:6px; }
  .header-notify-btn { display:none; }
  .header-login-btn {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:0 !important;
    flex-shrink:0;
  }
  .header-login-btn::before {
    content:'👤';
    font-size:16px;
    line-height:1;
  }
  .dropdown-menu-custom {
    right:0;
    max-width:calc(100vw - 24px);
  }
  .mobile-nav-panel { max-width:calc(100vw - 32px); }
  .search-wrap { display:none; } /* hidden, accessible via icon or search page */
  .btn-napien span { display:none; } /* icon only */
  .btn-napien { padding:10px 14px; }
  .user-toggle .user-name,
  .user-toggle .user-balance { display:none; }
  .user-toggle { padding:6px 10px 6px 7px; }

  /* MAIN NAV — hidden, replaced by drawer */
  .main-nav { display:none; }

  /* SITE CONTENT */
  .site-content { padding:16px 12px; }

  /* HERO */
  .hero-banner { height:220px; border-radius:12px; margin-bottom:18px; }
  .hero-overlay { padding:22px 20px; }
  .hero-title { font-size:22px; }
  .hero-sub { font-size:12px; margin-bottom:14px; }
  .hero-badge { font-size:10px; padding:3px 10px; }
  .hero-cta { gap:8px; }
  .hero-cta .btn { padding:9px 16px; font-size:12px; }

  /* STATS BAR */
  .stats-bar { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
  .stats-card {
    min-height:112px;
    padding:12px 8px;
    gap:7px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .stats-card > div:last-child { min-width:0; width:100%; }
  .stats-icon { width:38px; height:38px; font-size:18px; border-radius:10px; }
  .stats-value { font-size:17px; line-height:1.1; }
  .stats-label {
    font-size:10px;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* 3-COLUMN HOME GRID → stacked */
  div[style*="grid-template-columns:260px 1fr 280px"] {
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  /* LEFT + RIGHT SIDEBARS: show inline before/after center */
  .top5-section, .live-feed { margin-bottom:0; }

  /* ACC GRID */
  .acc-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .acc-card-img, .acc-card-img-placeholder { height:110px; }
  .acc-card-body { padding:10px 11px; }
  .acc-card-title { font-size:12px; }
  .acc-price { font-size:14px; }
  .btn-buy { font-size:10px; padding:5px 10px; }

  /* WHY GRID */
  .why-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .why-card { padding:18px 14px; }
  .why-icon { width:48px; height:48px; font-size:22px; border-radius:14px; }
  .why-card h3 { font-size:13px; }

  /* SECTION TITLE */
  .section-title h2 { font-size:15px; }
  .section-title-icon { width:32px; height:32px; font-size:15px; }

  /* GAME TABS */
  .game-tabs { gap:6px; }
  .game-tab { padding:7px 14px; font-size:12px; }

  /* FILTER BAR */
  .filter-bar { flex-direction:column; gap:10px; padding:14px; }
  .filter-group { width:100%; }
  .filter-group select,
  .filter-group input { width:100%; min-width:unset; }

  /* FOOTER */
  .footer-top { grid-template-columns:1fr; gap:24px; padding:28px 16px 20px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:4px; }

  /* NAP TIEN PAGE */
  .napTien-grid { grid-template-columns:1fr; gap:16px; }
  .payment-qr { width:170px; height:170px; }

  /* AUTH */
  .auth-wrap { max-width:100%; margin:20px 0; }
  .auth-card { padding:24px 20px; border-radius:16px; }

  /* MODAL */
  .modal-box { padding:22px 18px; max-width:95vw; border-radius:16px; }

  /* ACCOUNT PAGE */
  .account-header { flex-wrap:wrap; gap:14px; padding:20px; }
  .account-username { font-size:18px; }
  .account-balance-box { margin-left:0; width:100%; text-align:center; }
  .tabs { overflow-x:auto; gap:0; }
  .tab-btn { padding:10px 16px; font-size:12.5px; white-space:nowrap; }
  .data-table th, .data-table td { padding:8px 10px; font-size:12px; }

  /* TOAST */
  .toast-container { bottom:12px; right:12px; left:12px; }
  .toast { min-width:unset; font-size:12.5px; }

  /* BREADCRUMB */
  .breadcrumb { font-size:11px; }

  /* PAGINATION */
  .pagination a, .pagination span { width:32px; height:32px; font-size:12px; }

  /* ACC DETAIL PAGE */
  .acc-detail-grid { flex-direction:column !important; }
}

/* --- SMALL MOBILE (≤480px) --- */
@media (max-width:480px) {
  .hero-banner { height:180px; }
  .hero-title { font-size:19px; }
  .hero-sub { display:none; }
  .acc-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stats-bar { grid-template-columns:1fr 1fr; gap:8px; }
  .stats-card { min-height:106px; padding:11px 7px; }
  .stats-icon { width:36px; height:36px; font-size:17px; }
  .stats-value { font-size:16px; }
  .stats-label { font-size:9.5px; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .auth-card { border:none; box-shadow:none; background:transparent; padding:0; }
  .header-inner { padding:0 10px; }
  .site-content { padding:12px 10px; }
}

/* --- ADMIN MOBILE (≤768px) --- */
@media (max-width:768px) {

  /* Sidebar hidden by default on mobile */
  .admin-sidebar {
    position:fixed; left:-260px; top:0; bottom:0; z-index:2000;
    transition:left .25s ease; box-shadow:none;
    height:100vh; overflow-y:auto;
  }
  .admin-sidebar.open {
    left:0;
    box-shadow:4px 0 30px rgba(0,0,0,.4);
  }
  .admin-sidebar-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1999; backdrop-filter:blur(2px);
  }
  .admin-sidebar-overlay.open { display:block; }

  /* Main takes full width */
  .admin-main { width:100%; margin-left:0; }

  /* Topbar gets hamburger */
  .admin-topbar { padding:12px 16px; }
  .admin-topbar h1 { font-size:15px; }
  .admin-menu-btn {
    display:flex !important; align-items:center; justify-content:center;
    background:none; border:none; font-size:22px; cursor:pointer;
    color:var(--text); width:36px; height:36px; border-radius:8px;
    transition:background .15s; margin-right:10px;
  }
  .admin-menu-btn:hover { background:var(--primary-light); color:var(--primary); }

  /* Content padding */
  .admin-content { padding:16px 14px; }

  /* Stats grid: 2 cols */
  .admin-stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
  .admin-stat-value { font-size:20px; }

  /* Cards */
  .admin-card-header { padding:12px 16px; }
  .admin-card-body { padding:14px 16px; }

  /* Form rows: single col */
  .admin-form .form-row { grid-template-columns:1fr; }

  /* Tables: horizontal scroll */
  .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .data-table th, .data-table td { font-size:11.5px; padding:8px 10px; white-space:nowrap; }

  /* Filter form stacking */
  .admin-card-body form[style*="display:flex"] {
    flex-direction:column !important;
    gap:10px !important;
  }
  .search-input { min-width:unset !important; width:100%; }

  /* Settings grid */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }

  /* Chart: limit height */
  canvas { max-height:220px !important; }

  /* Pagination */
  .pagination { gap:4px; }
}

/* Ensure admin menu btn hidden on desktop */
.admin-menu-btn { display:none; }

/* ========================================
   PAGE-SPECIFIC: INDEX (HOME)
   ======================================== */

/* HERO BANNER */
.hero-banner {
  position: relative; overflow: hidden;
  border-radius: 18px; margin-bottom: 28px;
  height: 390px; background: #080808;
  border: 1px solid rgba(17,17,17,.88);
  box-shadow: 0 24px 58px rgba(17,17,17,.22);
}
.hero-banner img {
  width:100%; height:100%; object-fit:cover; opacity:.78;
  transition: transform 6s ease; transform: scale(1.05);
}
.hero-banner:hover img { transform: scale(1); }
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 18%, rgba(229,9,20,.30), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(10,10,10,.76) 42%, rgba(229,9,20,.20) 100%);
  display:flex; align-items:center; padding:40px 50px;
}
.hero-content { max-width: 520px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26);
  color:#fff; font-size:11px; font-weight:800;
  padding:4px 14px; border-radius:20px; margin-bottom:14px;
  letter-spacing:.5px; text-transform:uppercase;
}
.hero-title {
  font-size: 38px; font-weight:900; color:#fff; line-height:1.15;
  text-shadow: 0 2px 20px rgba(0,0,0,.5); margin-bottom:10px;
}
.hero-title span {
  background: linear-gradient(135deg, #ffffff, #ff2a36 72%, #ffffff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:14px; color:rgba(255,255,255,.75); margin-bottom:22px; line-height:1.6; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* STATS BAR */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;
}
.stats-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:14px; padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  transition:all .25s; position:relative; overflow:hidden;
}
.stats-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:linear-gradient(90deg, #111, var(--primary));
}
.stats-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.stats-icon {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg, #111, var(--primary));
  color:#fff;
}
.stats-label { font-size:11.5px; color:var(--text-muted); font-weight:600; }
.stats-value {
  font-size:22px; font-weight:900;
  background:linear-gradient(135deg, #111, var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* SECTION TITLE */
.section-title {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:2px solid var(--border);
}
.section-title-icon {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, #111, var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 4px 12px rgba(230,21,21,.30);
}
.section-title h2 { font-size:18px; font-weight:900; color:var(--text); }
.section-title span { font-size:12px; color:var(--text-muted); margin-left:4px; }
.section-title .see-all {
  margin-left:auto; font-size:12.5px; color:var(--primary);
  font-weight:700; display:flex; align-items:center; gap:4px;
}
.section-title .see-all:hover { text-decoration:underline; }

/* ACC GRID */
.acc-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px;
  margin-bottom:32px;
}
.acc-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  transition:all .25s; position:relative;
  box-shadow: var(--shadow-card);
}
.acc-card:hover {
  transform:translateY(-5px); border-color:var(--primary);
  box-shadow:var(--shadow-hover);
}
.acc-card-img {
  width:100%; height:130px; object-fit:cover;
  background:linear-gradient(135deg, #080808, #3a0004);
  filter:saturate(1.05) contrast(1.04);
}
.acc-card-img-placeholder {
  width:100%; height:130px;
  background:linear-gradient(135deg, #080808 0%, #1a1a1a 50%, #9f0008 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:42px; position:relative; overflow:hidden;
}
.acc-card-img-placeholder::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff0000' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.acc-card-badge {
  position:absolute; top:8px; left:8px;
  background:linear-gradient(135deg, #111, var(--primary));
  color:#fff; font-size:9.5px; font-weight:800;
  padding:3px 10px; border-radius:10px;
  box-shadow:0 2px 8px rgba(230,21,21,.40);
}
.acc-card-body { padding:12px 14px; }
.acc-card-id { font-size:10.5px; color:var(--text-muted); font-weight:600; margin-bottom:4px; }
.acc-card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.35; }
.acc-card-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px; }
.acc-tag {
  font-size:10px; padding:2px 8px; border-radius:8px; font-weight:600;
  background:var(--primary-light); color:var(--primary); border:1px solid var(--border);
}
.acc-card-footer { display:flex; align-items:center; justify-content:space-between; }
.acc-price {
  font-size:16px; font-weight:900;
  background:linear-gradient(135deg, #111, var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.btn-buy {
  background:linear-gradient(135deg, #111, var(--primary));
  color:#fff; font-size:11px; font-weight:800;
  padding:6px 14px; border-radius:20px; border:none; cursor:pointer;
  box-shadow:0 3px 10px rgba(230,21,21,.35);
  transition:all .15s; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px;
}
.btn-buy:hover { transform:scale(1.05); box-shadow:0 5px 16px rgba(230,21,21,.50); color:#fff; }

/* TOP 5 BANNER */
.top5-section {
  border-radius:18px; overflow:hidden; margin-bottom:28px;
  background:#fff; border:1.5px solid var(--border);
}
.top5-header {
  background:linear-gradient(135deg, #080808, #1b1b1b 48%, var(--primary));
  padding:16px 22px; display:flex; align-items:center; justify-content:space-between;
}
.top5-header h2 { color:#fff; font-size:16px; font-weight:900; display:flex; align-items:center; gap:8px; }
.top5-body { padding:18px; }
.top5-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.top5-item {
  display:flex; align-items:center; gap:10px;
  min-height:58px; padding:10px 12px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);
  transition:all .2s; min-width:0; overflow:hidden;
}
.top5-item:hover { border-color:var(--primary); background:var(--primary-light); }
.top5-rank {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; background:#eee; color:#666;
}
.top5-rank.r1 { background:linear-gradient(135deg,#111,var(--primary)); color:#fff; box-shadow:0 3px 10px rgba(17,17,17,.3); }
.top5-rank.r2 { background:linear-gradient(135deg,#4b4b4b,#111); color:#fff; }
.top5-rank.r3 { background:linear-gradient(135deg,#b4b4b4,#4a4a4a); color:#fff; }
.top5-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.top5-name { max-width:100%; min-width:0; font-size:12.5px; line-height:1.2; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top5-amount {
  max-width:100%; display:block;
  font-size:12.5px; line-height:1.15; font-weight:900; font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:left; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(135deg, #111, var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.top5-empty {
  padding:20px 12px; text-align:center; font-size:13px; font-weight:800;
  color:var(--text-muted); background:var(--bg); border:1px dashed var(--border);
  border-radius:12px;
}

/* LIVE FEED */
.live-feed {
  background:#fff; border:1.5px solid var(--border); border-radius:14px;
  padding:14px 18px; margin-bottom:24px; overflow:hidden;
}
.live-feed-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; font-weight:800; color:var(--text); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary); animation:pulse 1.2s infinite; }
.live-items { display:flex; flex-direction:column; gap:7px; }
.live-item { display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--bg2); }
.live-item:last-child { border-bottom:none; }
.live-item .live-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff;
}
.live-item .live-name { font-weight:700; color:var(--text); }
.live-item .live-action { color:var(--text-muted); }
.live-item .live-target { color:var(--primary); font-weight:700; }
.live-pill {
  font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; flex-shrink:0;
}
.pill-buy { background:#e8faf2; color:#065f3a; }
.pill-dep { background:var(--primary-light); color:var(--primary); }
.live-time { margin-left:auto; font-size:10.5px; color:var(--text-light); flex-shrink:0; }

/* WHY CHOOSE US */
.why-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px;
}
.why-card {
  background:#fff; border:1.5px solid var(--border); border-radius:16px;
  padding:24px 20px; text-align:center; transition:all .25s; position:relative; overflow:hidden;
}
.why-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transform:scaleX(0); transition:transform .3s;
}
.why-card:hover::after { transform:scaleX(1); }
.why-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.why-icon {
  width:60px; height:60px; border-radius:18px; margin:0 auto 14px;
  background:linear-gradient(135deg, #111, var(--primary));
  color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow:0 6px 18px rgba(230,21,21,.15);
}
.why-card h3 { font-size:14px; font-weight:800; color:var(--text); margin-bottom:7px; }
.why-card p { font-size:12px; color:var(--text-muted); line-height:1.6; }

/* GAME TABS */
.game-tabs {
  display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;
}
.game-tab {
  padding:9px 20px; border-radius:24px; font-size:13px; font-weight:700;
  border:2px solid var(--border); background:#fff; color:var(--text-muted);
  cursor:pointer; transition:all .2s;
}
.game-tab.active, .game-tab:hover {
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; border-color:var(--primary);
  box-shadow:0 4px 14px rgba(230,21,21,.35);
}

/* FILTER BAR */
.filter-bar {
  background:#fff; border:1.5px solid var(--border); border-radius:14px;
  padding:16px 20px; margin-bottom:20px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
}
.filter-group { display:flex; flex-direction:column; gap:5px; }
.filter-group label { font-size:11.5px; font-weight:700; color:var(--text-muted); }
.filter-group select,
.filter-group input {
  border:1.5px solid var(--border); border-radius:10px;
  padding:8px 12px; font-size:13px; color:var(--text);
  background:#fff; outline:none; transition:border-color .2s;
  min-width:130px;
}
.filter-group select:focus, .filter-group input:focus { border-color:var(--primary); }
.filter-group input { max-width:100px; }

/* PAGINATION */
.pagination {
  display:flex; gap:6px; justify-content:center; margin-top:28px; flex-wrap:wrap;
}
.pagination a, .pagination span {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; border:1.5px solid var(--border);
  background:#fff; color:var(--text-muted); transition:all .2s;
}
.pagination a:hover { border-color:var(--primary); color:var(--primary); }
.pagination .active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ===== NAP TIEN PAGE ===== */
.napTien-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:24px; }
.payment-card {
  background:#fff; border:2px solid var(--border);
  border-radius:18px; padding:24px; text-align:center;
  transition:all .25s; position:relative; overflow:hidden;
}
.payment-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.payment-card:hover { border-color:var(--primary); box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.payment-logo { width:80px; height:80px; object-fit:contain; margin:0 auto 12px; display:block; }
.payment-name { font-size:18px; font-weight:900; color:var(--text); margin-bottom:4px; }
.payment-qr { width:200px; height:200px; object-fit:contain; border:3px solid var(--border); border-radius:14px; margin:12px auto; display:block; }
.payment-info { margin-top:12px; background:var(--bg); border-radius:10px; padding:12px; text-align:left; }
.payment-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px dashed var(--border); }
.payment-row:last-child { border-bottom:none; }
.payment-row .label { color:var(--text-muted); }
.payment-row .value { font-weight:700; color:var(--text); }
.nap-code-box {
  background:linear-gradient(135deg, #111, #2a0003);
  border-radius:14px; padding:20px; margin-bottom:20px; text-align:center;
  border:2px solid var(--primary);
}
.nap-code-label { font-size:12px; color:rgba(255,255,255,.6); margin-bottom:8px; font-weight:600; }
.nap-code {
  font-size:26px; font-weight:900; letter-spacing:3px;
  background:linear-gradient(135deg, #fff, #ff2a36);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nap-code-note { font-size:11.5px; color:rgba(255,255,255,.5); margin-top:8px; }
.bonus-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.bonus-table th { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:10px 14px; font-size:12.5px; text-align:left; }
.bonus-table th:first-child { border-radius:10px 0 0 0; }
.bonus-table th:last-child { border-radius:0 10px 0 0; }
.bonus-table td { padding:9px 14px; font-size:12.5px; border-bottom:1px solid var(--border); background:#fff; }
.bonus-table tr:hover td { background:var(--primary-light); }
.bonus-highlight { font-weight:800; color:var(--primary); }

/* ===== AUTH PAGES ===== */
.auth-wrap { max-width:440px; margin:40px auto; }
.auth-card {
  background:#fff; border:1.5px solid var(--border); border-radius:20px;
  padding:36px; box-shadow:var(--shadow-float);
}
.auth-header { text-align:center; margin-bottom:28px; }
.auth-logo { font-size:32px; margin-bottom:4px; }
.auth-header h1 { font-size:22px; font-weight:900; color:var(--text); }
.auth-header p { font-size:13px; color:var(--text-muted); margin-top:4px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:6px; }
.form-control {
  width:100%; padding:11px 16px; border:1.5px solid var(--border);
  border-radius:12px; font-size:13.5px; color:var(--text);
  background:#fff; outline:none; transition:border-color .2s, box-shadow .2s;
  font-family:inherit;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(230,21,21,.10); }
.input-group { position:relative; }
.input-group .form-control { padding-right:44px; }
.input-group .toggle-pw {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:15px;
}
.form-submit {
  width:100%; padding:13px; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-size:15px; font-weight:800; border:none; border-radius:28px;
  cursor:pointer; box-shadow:0 4px 18px rgba(230,21,21,.35);
  transition:all .2s; font-family:inherit; margin-top:6px;
}
.form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(230,21,21,.50); }
.auth-divider { text-align:center; font-size:12.5px; color:var(--text-muted); margin:16px 0; position:relative; }
.auth-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.auth-divider span { background:#fff; padding:0 12px; position:relative; }
.auth-switch { text-align:center; font-size:13px; color:var(--text-muted); }
.auth-switch a { color:var(--primary); font-weight:700; }

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(4px);
}
.modal-overlay.active { display:flex; }
.modal-box {
  background:#fff; border-radius:20px; padding:32px; max-width:480px; width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.3); animation:modalIn .25s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
.modal-box h2 { font-size:18px; font-weight:900; color:var(--text); margin-bottom:6px; }
.modal-close {
  float:right; background:none; border:none; font-size:20px;
  cursor:pointer; color:var(--text-muted); margin-top:-4px;
}
.acc-result-box {
  background:linear-gradient(135deg, #111, #2a0003);
  border-radius:14px; padding:20px; margin:16px 0;
}
.acc-result-row { display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.1); }
.acc-result-row:last-child { border-bottom:none; }
.acc-result-row .lbl { color:rgba(255,255,255,.6); }
.acc-result-row .val { color:#fff; font-weight:800; font-family:monospace; font-size:14px; }
.copy-btn {
  background:rgba(255,255,255,.12); border:none; border-radius:6px;
  color:#fff; padding:2px 8px; font-size:10px; cursor:pointer; margin-left:8px;
  transition:background .15s;
}
.copy-btn:hover { background:rgba(255,255,255,.22); }

/* ===== TOAST ===== */
.toast-container {
  position: fixed; bottom: 28px; right: 28px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  background: #1a1a1a;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  font-size: 13.5px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 12px;
  min-width: 280px; max-width: 360px;
  border-left: 4px solid var(--primary);
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.toast::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 100%;
  background: rgba(255,255,255,.15);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

/* ===== ACCOUNT PAGE ===== */
.account-header {
  background:linear-gradient(135deg, #111, var(--primary));
  border-radius:18px; padding:28px 30px; margin-bottom:24px;
  display:flex; align-items:center; gap:20px;
}
.account-avatar {
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,.2); border:3px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.account-username { font-size:22px; font-weight:900; color:#fff; }
.account-email { font-size:13px; color:rgba(255,255,255,.7); margin-top:3px; }
.account-balance-box {
  margin-left:auto; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:14px 22px; text-align:center;
}
.balance-label { font-size:11px; color:rgba(255,255,255,.7); font-weight:600; }
.balance-value { font-size:26px; font-weight:900; color:#fff; }
.tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.tab-btn {
  padding:11px 24px; font-size:13.5px; font-weight:700;
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s;
}
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:var(--bg); padding:10px 14px; font-size:12px; font-weight:800; color:var(--text-muted); text-align:left; border-bottom:2px solid var(--border); }
.data-table td { padding:11px 14px; font-size:13px; color:var(--text); border-bottom:1px solid var(--bg2); }
.data-table tr:hover td { background:var(--primary-light); }
.status-badge {
  font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:10px;
}
.status-success { background:#e8faf2; color:#065f3a; }
.status-pending { background:#fff8e1; color:#856404; }
.status-fail    { background:#fff1f1; color:#991b1b; }

/* ===== ADMIN ===== */
.admin-layout { display:block; min-height:100vh; }
.admin-sidebar {
  width:250px;
  background:linear-gradient(180deg, #0d0000 0%, #1a0000 100%);
  padding:0; overflow-y:auto;
  border-right:2px solid rgba(230,21,21,.20);
  position:fixed; left:0; top:0; bottom:0; height:100vh; z-index:180;
}
.admin-sidebar-logo {
  padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.07);
  text-align:center;
}
.admin-sidebar-logo .logo-text { font-size:17px; }
.admin-sidebar-logo .logo-sub { color:rgba(255,255,255,.35); }
.admin-nav { padding:12px 0; }
.admin-nav-section { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.3); padding:14px 20px 6px; font-weight:800; }
.admin-nav-link {
  display:flex; align-items:center; gap:11px;
  padding:11px 20px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.65); transition:all .2s; cursor:pointer;
}
.admin-nav-link:hover { background:rgba(230,21,21,.15); color:#fff; padding-left:24px; }
.admin-nav-link.active { background:linear-gradient(90deg,rgba(230,21,21,.25),transparent); color:#fff; border-left:3px solid var(--primary); }
.admin-nav-link .nav-icon { font-size:16px; width:20px; text-align:center; }
.admin-main { min-height:100vh; margin-left:250px; background:var(--bg); overflow-x:hidden; }
.admin-topbar {
  background:#fff; border-bottom:1.5px solid var(--border);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.admin-topbar h1 { font-size:18px; font-weight:900; color:var(--text); }
.admin-content { padding:24px 28px; }
.admin-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.admin-stat-card {
  background:#fff; border:1.5px solid var(--border); border-radius:16px;
  padding:20px; position:relative; overflow:hidden; transition:all .2s;
}
.admin-stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.admin-stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.admin-stat-card.red::before { background:linear-gradient(90deg,var(--primary),var(--accent)); }
.admin-stat-card.green::before { background:linear-gradient(90deg,#00c853,#69f0ae); }
.admin-stat-card.blue::before { background:linear-gradient(90deg,#2196f3,#64b5f6); }
.admin-stat-card.gold::before { background:linear-gradient(90deg,#ffd600,#ff8f00); }
.admin-stat-icon { font-size:28px; margin-bottom:10px; }
.admin-stat-label { font-size:12px; color:var(--text-muted); font-weight:600; }
.admin-stat-value { font-size:26px; font-weight:900; color:var(--text); }
.admin-stat-sub { font-size:11px; color:var(--green); font-weight:600; margin-top:2px; }
.admin-card {
  background:#fff; border:1.5px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:22px;
}
.admin-card-header {
  padding:16px 22px; border-bottom:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg);
}
.admin-card-header h3 { font-size:15px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.admin-card-body { padding:20px 22px; }
.admin-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.admin-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.admin-form .form-group { margin-bottom:14px; }
.admin-form label { display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); margin-bottom:5px; }
.admin-form input,
.admin-form select,
.admin-form textarea {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius:10px; font-size:13px; color:var(--text);
  background:#fff; outline:none; transition:border-color .2s; font-family:inherit;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(230,21,21,.10); }
.admin-form textarea { min-height:90px; resize:vertical; }

@media (max-width:600px) {
  .site-content { padding:12px 10px; }
  .container { padding-left:10px; padding-right:10px; }
  .hero-banner { border-radius:10px; }
  .top5-body { padding:14px; }
  .top5-item { padding:10px; }
  .admin-form .form-grid,
  .admin-form .form-row { grid-template-columns:1fr; gap:10px; }
  .admin-card-body { padding:14px; }
  .tx-table-wrap,
  .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
.action-btns { display:flex; gap:8px; flex-wrap:wrap; }
.table-wrapper { overflow-x:auto; }
.search-input {
  padding:8px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:13px; outline:none; color:var(--text); min-width:220px;
}

/* Final overrides: account menu opens by click only, and Top Nap never overflows. */
.user-menu:hover .dropdown-menu-custom { display:none !important; }
.user-menu.open .dropdown-menu-custom,
.user-menu.open:hover .dropdown-menu-custom { display:block !important; }
.dropdown-menu-custom { pointer-events:none; }
.user-menu.open .dropdown-menu-custom { pointer-events:auto; }
.top5-item {
  max-width:100% !important;
  box-sizing:border-box !important;
  align-items:flex-start !important;
}
.top5-info {
  min-width:0 !important;
  max-width:calc(100% - 46px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:5px !important;
}
.top5-name,
.top5-amount {
  max-width:100% !important;
  min-width:0 !important;
  width:100% !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.top5-name {
  font-size:12px !important;
  line-height:1.2 !important;
}
.top5-amount {
  font-size:12px !important;
  line-height:1.15 !important;
  text-align:left !important;
}
.search-input:focus { border-color:var(--primary); }
.badge-role {
  font-size:10px; font-weight:800; padding:2px 9px; border-radius:8px;
}
.badge-admin { background:#fff8e1; color:#856404; }
.badge-superadmin { background:var(--primary-light); color:var(--primary); }
.badge-staff { background:#e8f5e9; color:#2e7d32; }
.badge-customer { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
.badge-user { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }

/* ========================================
   MOBILE TOUCH IMPROVEMENTS
   ======================================== */

/* Smooth momentum scrolling on iOS */
html { -webkit-overflow-scrolling: touch; }
.table-wrapper, .nav-inner, .tabs { -webkit-overflow-scrolling: touch; }

/* Prevent text size adjust on orientation change */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Tap highlight */
* { -webkit-tap-highlight-color: rgba(230,21,21,.12); }

/* Minimum tap target size (44×44px accessibility) */
.btn, .icon-btn, .btn-buy, .btn-napien,
.nav-link, .mobile-nav-links a, .admin-nav-link {
  min-height: 44px;
}
.icon-btn { min-width: 44px; }

/* Safe area insets (iPhone notch) */
.site-header, .admin-topbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav-panel { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ── Admin quick-edit buttons on acc cards ── */
.admin-card-actions {
  position: absolute; bottom: 6px; left: 6px;
  display: flex; gap: 4px; opacity: 1; z-index: 10;
}
.admin-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  font-size: 0.72rem; border: none; cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.admin-card-btn.edit  { background: rgba(52,152,219,0.92); color: #fff; }
.admin-card-btn.delete { background: rgba(231,76,60,0.92); color: #fff; }
.admin-card-btn:hover { opacity: 0.8; }