/* ==========================================================
   W3site – màu, chữ cho khu ứng dụng (app/, manage/, admin/, đăng nhập), nạp sau assets/css/app.css.
   Theo prototype public/skins/w3site/proto/app.html: xanh sáng, bo góc lớn, chữ Be Vietnam Pro.
   Chỉ đổi màu / chữ / bo góc; bố cục giữ của app.css (dùng chung mọi đại lý).
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{
  --w3:#2463ff;--w3-600:#1a4fe0;--w3-700:#143fb8;--w3-50:#eef3ff;--w3-100:#dce6ff;--sun:#ffc23d;--sun-50:#fff6dc;
  --ink:#0f1a33;--txt:#3b4560;--mute:#6b7590;--soft:#98a1b8;--tone:#6b7590;
  --line:#e4e8f1;--line2:#eef1f7;--bg:#f5f7fc;--bg2:#eff3fa;--bg3:#e6ecf7;--dark:#2463ff;
  --acc:#2463ff;--acc-50:#eef3ff;--ok:#14b886;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:12px;
  --shadow:0 1px 2px rgba(15,26,51,.06),0 14px 40px -12px rgba(15,26,51,.2),0 0 0 1px rgba(15,26,51,.05);
}

/* logo */
.w3-logo,.logo.w3-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.w3-logo .op-word{font-weight:800}
.w3-logo .op-word b{color:var(--w3);font-weight:800}

/* nút */
.btn{border-radius:12px;font-weight:600}
.btn.primary{background:var(--w3);color:#fff;box-shadow:0 8px 20px -10px rgba(36,99,255,.7)}
.btn.primary:hover{background:var(--w3-600)}
.btn.outline:hover{border-color:var(--w3);color:var(--w3)}
.btn.light{background:var(--w3-50);color:var(--w3-700)}
.btn.sm{border-radius:10px}
.icon-btn:hover{background:var(--w3-50);color:var(--w3)}

/* ô nhập */
.in{border-radius:12px}
.in:focus{border-color:var(--w3);box-shadow:0 0 0 3px rgba(36,99,255,.14)}
input[type=checkbox],input[type=radio]{accent-color:var(--w3)}

/* khung: menu trái */
.side{background:#fff;border-right-color:var(--line)}
.side nav a{border-radius:12px;font-weight:500}
.side nav a .ic{color:var(--soft)}
.side nav a:hover{background:var(--bg);color:var(--ink)}
.side nav a.on{background:var(--w3-50);color:var(--w3-700);font-weight:600}
.side nav a.on .ic{color:var(--w3)}
.side-lb{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.side-help{border-radius:16px;background:var(--bg)}
.side-site{border-radius:16px}
.side-user .ava,.ava{background:var(--sun);color:var(--ink);font-weight:800}

/* tiêu đề trang, khối */
.m-head h1{font-weight:800;letter-spacing:-.02em}
.panel,.stat{border-radius:18px}
.panel-h h2{font-weight:700}
.scard .shot{border-radius:16px}
.scard h3{font-weight:700}
.st-nav a.on,.seg-links a.on,.st-seg a.on{color:var(--w3-700)}
.st-nav a.on{background:var(--w3-50)}
.tabs a.on,.tab.on{color:var(--w3-700)}

/* biểu đồ, thanh dùng màu chính */
.ov-bars i,.rp-bars i,.u-bar i,.st-meter i,.st-legend i{background:var(--w3)}
.bl-tag{background:var(--sun);color:var(--ink);font-weight:700}
.alert.info{background:var(--w3-50);color:var(--w3-700)}

/* admin đại lý */
.adm-av,.adm-avatar{background:var(--w3)}
.app.adm .side nav a.on{background:var(--w3-50);color:var(--w3-700)}
.app.adm .side nav a.on .ic{color:var(--w3)}


/* popup "Tạo website mới" (assets/css/newsite.css) theo màu W3site */
body .nsx{font-family:var(--font);color:var(--ink);background:rgba(15,26,51,.42)}
body .nsx-card{border-color:var(--line);color:var(--ink)}
body .nsx-card:hover{border-color:var(--w3-100)}
body .nsx-card.on{border-color:var(--w3);background:var(--w3-50)}
body .nsx-card.on svg{color:var(--w3)}
body .nsx-in:focus,body .nsx-group:focus-within{border-color:var(--w3);box-shadow:0 0 0 4px rgba(36,99,255,.12)}
body .nsx-btn.dark{background:var(--w3);color:#fff}
body .nsx-btn.dark:hover{background:var(--w3-600)}
body .nsx-btn.ghost{background:var(--bg2);color:var(--ink)}
body .nsx-theme{border-color:var(--w3);background:var(--w3-50)}
body .nsx-addr b{color:var(--ink)}

/* đăng nhập / đăng ký: cột trái xanh nhạt */
.auth-side{background:radial-gradient(600px 400px at 90% 0%,rgba(36,99,255,.18),transparent 70%),radial-gradient(500px 360px at 0% 100%,rgba(255,194,61,.22),transparent 70%),var(--w3-50)}
.auth-side h2{font-weight:800;letter-spacing:-.03em}
.auth-side h2 span{color:var(--w3)}
.auth-side li .ic{color:var(--ok)}