:root {
    --bg: #0f1117;
    --surface: #181c27;
    --surface2: #1e2333;
    --border: #2a3045;
    --accent: #e8a045;
    --accent2: #4ade80;
    --accent3: #60a5fa;
    --danger: #f87171;
    --text: #e8ecf0;
    --muted: #7a8499;
    --sidebar-w: 240px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; }

  /* ── SIDEBAR ── */
  .sidebar {
    width: var(--sidebar-w); background: var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column; position:fixed; height:100vh; overflow-y:auto; z-index:100;
  }
  .sidebar-logo {
    padding:24px 20px 16px; border-bottom:1px solid var(--border);
    font-size:20px; font-weight:800; letter-spacing:-0.5px;
  }
  .sidebar-logo span { color:var(--accent); }
  .sidebar-logo small { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }
  .nav-group { padding:12px 12px 0; }
  .nav-group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); padding:0 8px 6px; }
  .nav-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
    cursor:pointer; font-size:13.5px; font-weight:500; color:var(--muted); transition:.15s;
    margin-bottom:2px;
  }
  .nav-item:hover { background:var(--surface2); color:var(--text); }
  .nav-item.active { background:rgba(232,160,69,.15); color:var(--accent); }
  .nav-item i { width:16px; text-align:center; font-size:13px; }
  .nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px; }

  /* ── MAIN ── */
  .main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }
  .topbar {
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:50;
  }
  .topbar-title { font-size:16px; font-weight:700; }
  .topbar-meta { font-size:12px; color:var(--muted); margin-top:1px; }
  .topbar-right { display:flex; align-items:center; gap:14px; }
  .topbar-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; }

  .content { padding:28px; flex:1; }
  .page { display:none; }
  .page.active { display:block; }

  /* ── STATS GRID ── */
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  .stat-card {
    background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px;
    position:relative; overflow:hidden;
  }
  .stat-card::before { content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; opacity:.07; }
  .stat-card.orange::before { background:var(--accent); }
  .stat-card.green::before { background:var(--accent2); }
  .stat-card.blue::before { background:var(--accent3); }
  .stat-card.red::before { background:var(--danger); }
  .stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:12px; }
  .stat-icon.orange { background:rgba(232,160,69,.15); color:var(--accent); }
  .stat-icon.green { background:rgba(74,222,128,.15); color:var(--accent2); }
  .stat-icon.blue { background:rgba(96,165,250,.15); color:var(--accent3); }
  .stat-icon.red { background:rgba(248,113,113,.15); color:var(--danger); }
  .stat-value { font-size:26px; font-weight:800; line-height:1; }
  .stat-label { font-size:12px; color:var(--muted); margin-top:4px; }
  .stat-trend { font-size:11px; margin-top:8px; }
  .stat-trend.up { color:var(--accent2); }
  .stat-trend.down { color:var(--danger); }

  /* ── TABLE ── */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:20px; }
  .card-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .card-title { font-size:14px; font-weight:700; }
  .card-subtitle { font-size:12px; color:var(--muted); }
  .card-body { padding:20px; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); border-bottom:1px solid var(--border); }
  td { padding:12px 14px; border-bottom:1px solid rgba(42,48,69,.6); vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:rgba(255,255,255,.02); }

  /* ── BUTTONS ── */
  .btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; border:none; transition:.15s; font-family:inherit; }
  .btn-primary { background:var(--accent); color:#0f1117; }
  .btn-primary:hover { background:#f0b05a; }
  .btn-success { background:rgba(74,222,128,.15); color:var(--accent2); border:1px solid rgba(74,222,128,.25); }
  .btn-success:hover { background:rgba(74,222,128,.25); }
  .btn-danger { background:rgba(248,113,113,.15); color:var(--danger); border:1px solid rgba(248,113,113,.25); }
  .btn-danger:hover { background:rgba(248,113,113,.25); }
  .btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
  .btn-ghost:hover { color:var(--text); border-color:var(--text); }
  .btn-sm { padding:5px 10px; font-size:11.5px; }

  /* ── BADGE ── */
  .badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; }
  .badge-pending { background:rgba(232,160,69,.15); color:var(--accent); }
  .badge-done { background:rgba(74,222,128,.15); color:var(--accent2); }
  .badge-blocked { background:rgba(248,113,113,.15); color:var(--danger); }
  .badge-new { background:rgba(96,165,250,.15); color:var(--accent3); }

  /* ── CHART BARS ── */
  .mini-chart { display:flex; align-items:flex-end; gap:4px; height:60px; }
  .bar { flex:1; background:rgba(232,160,69,.3); border-radius:3px 3px 0 0; min-height:4px; transition:.3s; }
  .bar:hover { background:var(--accent); }
  .bar.highlight { background:var(--accent); }

  /* ── EMPTY STATE ── */
  .empty { text-align:center; padding:48px 20px; color:var(--muted); }
  .empty i { font-size:40px; margin-bottom:12px; opacity:.4; display:block; }
  .empty p { font-size:13px; }

  /* ── SEARCH & FILTER ── */
  .filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .search-input { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:8px; font-size:13px; font-family:inherit; flex:1; min-width:160px; outline:none; }
  .search-input:focus { border-color:var(--accent); }
  select.search-input { cursor:pointer; }

  /* ── FORM (dùng trong modal thêm/sửa) ── */
  .form-item { margin-bottom:14px; }
  .form-item label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .form-item .search-input, .form-item textarea.search-input { width:100%; }
  .form-item textarea.search-input { resize:vertical; font-family:inherit; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media(max-width:520px){ .form-row{grid-template-columns:1fr;} }

  /* ── TOUR IMAGE PICKER ── */
  .tour-image-picker { display:flex; gap:16px; align-items:flex-start; }
  .tour-image-preview {
    width:140px; height:100px; border:1.5px dashed var(--border); border-radius:10px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    overflow:hidden; background:var(--surface2); flex-shrink:0; transition:.15s;
  }
  .tour-image-preview:hover { border-color:var(--accent); }
  .tour-image-preview img { width:100%; height:100%; object-fit:cover; display:block; }
  #tour-image-placeholder { font-size:11px; color:var(--muted); text-align:center; line-height:1.6; }
  #tour-image-placeholder i { font-size:20px; display:block; margin-bottom:4px; }
  .tour-thumb { width:44px; height:44px; border-radius:8px; object-fit:cover; margin-right:10px; vertical-align:middle; background:var(--surface2); }

  /* ── MODAL ── */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200; display:none; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; width:100%; max-width:520px; position:relative; }
  .modal h3 { font-size:16px; font-weight:700; margin-bottom:16px; }
  .modal-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; }
  .msg-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px; font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap; margin:12px 0; }
  .info-row { display:flex; gap:8px; margin-bottom:8px; font-size:13px; }
  .info-label { color:var(--muted); min-width:80px; }

  /* ── TOAST ── */
  .toast { position:fixed; bottom:24px; right:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 18px; font-size:13px; font-weight:600; z-index:999; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(0,0,0,.4); transform:translateY(80px); opacity:0; transition:.3s; }
  .toast.show { transform:translateY(0); opacity:1; }
  .toast.success i { color:var(--accent2); }
  .toast.error i { color:var(--danger); }
  .toast.info i { color:var(--accent3); }

  /* ── CHART SVG ── */
  .chart-wrap { overflow-x:auto; }
  .revenue-chart { display:flex; gap:8px; align-items:flex-end; height:120px; }
  .rev-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
  .rev-bar { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:.4s; position:relative; }
  .rev-bar-wrap:hover .rev-bar { filter:brightness(1.2); }
  .rev-label { font-size:10px; color:var(--muted); white-space:nowrap; }
  .rev-val { font-size:9px; color:var(--accent); white-space:nowrap; }

  /* ── ORDER DETAIL ── */
  .order-items-list { list-style:none; }
  .order-items-list li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .order-items-list li:last-child { border-bottom:none; }

  /* ── VISITORS ── */
  .visitor-dots { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
  .vdot { width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:.6; }
  .vdot.today { opacity:1; box-shadow:0 0 6px var(--accent); }

  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:900px){ .stats-grid{grid-template-columns:1fr 1fr;} .two-col{grid-template-columns:1fr;} }

  /* ── LOGIN SCREEN ── */
  .login-screen { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; }
  .login-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; }
  .login-logo { text-align:center; font-size:22px; font-weight:800; letter-spacing:-0.5px; margin-bottom:4px; }
  .login-logo span { color:var(--accent); }
  .login-sub { text-align:center; font-size:12px; color:var(--muted); margin-bottom:24px; }
  .login-field { margin-bottom:14px; }
  .login-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  .login-field input { width:100%; }
  .login-error { display:none; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:var(--danger); font-size:12.5px; padding:9px 12px; border-radius:8px; margin-bottom:14px; }
  .login-error.show { display:block; }
  .login-submit { width:100%; justify-content:center; margin-top:6px; }
  .login-hint { text-align:center; font-size:11px; color:var(--muted); margin-top:18px; }