/* SbayAI — Theme chung cho to\u00E0n site */
:root, [data-theme="light"] {
    --bg: #ffffff;
    --bg2: #fafafa;
    --bg-sidebar: #fafafa;
    --bg-hover: #f5f0f0;
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --text: #1a1a1a;
    --text-secondary: #333;
    --text-muted: #888;
    --text-light: #aaa;
    --muted: #888;
    --border: #fecaca;
    --red: #dc2626;
    --red-light: #fef2f2;
    --red-dark: #b91c1c;
    --red-border: #fca5a5;
    --accent: #dc2626;
    --accent-hover: #b91c1c;
    --scrollbar: #ddd;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow: 0 4px 12px rgba(0,0,0,.06);
    --shadow-red: 0 0 0 3px rgba(220,38,38,.1);
    --code-inline-bg: #fef2f2;
    --code-inline-color: #b91c1c;
    --success: #16a34a;
    --warning: #f59e0b;
}
[data-theme="dark"] {
    --bg: #111;
    --bg2: #1a1a1a;
    --bg-sidebar: #0a0a0a;
    --bg-hover: #1a1a1a;
    --bg-input: #1a1a1a;
    --bg-input-focus: #222;
    --text: #f5f5f5;
    --text-secondary: #ddd;
    --text-muted: #888;
    --text-light: #555;
    --muted: #888;
    --border: #7f1d1d;
    --red: #ef4444;
    --red-light: rgba(239,68,68,.08);
    --red-dark: #dc2626;
    --red-border: #7f1d1d;
    --accent: #ef4444;
    --accent-hover: #dc2626;
    --scrollbar: #333;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --shadow: 0 4px 12px rgba(0,0,0,.3);
    --shadow-red: 0 0 0 3px rgba(239,68,68,.15);
    --code-inline-bg: rgba(239,68,68,.08);
    --code-inline-color: #fca5a5;
}
:root {
    --max-w: 48rem;
    --font: 'Inter', ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

/* ===== Shared utility classes ===== */
.container{max-width:960px;margin:0 auto;padding:32px 24px}
.table-wrap{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}

/* Buttons */
.btn{padding:12px 22px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .15s;font-family:inherit;display:inline-block;text-align:center;text-decoration:none;line-height:1.25}
.btn-primary,.btn-red{background:var(--red);color:#fff;border:none}
.btn-primary:hover,.btn-red:hover{background:var(--red-dark)}
.btn-outline{background:transparent;color:var(--red);border:2px solid var(--red)}
.btn-outline:hover{background:var(--red-light)}
.btn-danger{background:#fff;color:var(--red);border:2px solid var(--red-border)}
.btn-danger:hover{background:var(--red-light);border-color:var(--red)}

/* Cards */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)}

/* ===== Site Nav (dashboard, admin, affiliate, guide, gpt-builder) ===== */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;font-family:var(--font)}
.site-nav .site-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.site-nav .site-nav-brand img{height:30px;width:auto}
.site-nav .site-nav-brand .site-nav-title{font-size:15px;font-weight:800;color:var(--red)}
.site-nav .site-nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.site-nav .site-nav-links a{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .15s}
.site-nav .site-nav-links a:hover{color:var(--red);background:var(--red-light)}
.site-nav .site-nav-links a.active{color:var(--red);background:var(--red-light);font-weight:700}
.site-nav .site-nav-links a.logout{color:var(--red);cursor:pointer}

@media(max-width:768px){
    .site-nav{padding:10px 14px;flex-wrap:wrap;gap:8px}
    .site-nav .site-nav-links{gap:2px}
    .site-nav .site-nav-links a{padding:6px 10px;font-size:13px}
}

/* ===== Site footer ===== */
.site-footer{text-align:center;padding:28px 16px;color:var(--muted);font-size:13px;border-top:1px solid var(--border);background:var(--bg)}

/* Responsive table helper */
@media(max-width:640px){
    .table-wrap table{min-width:520px}
}