:root{
  --brand:#166534; --brand-700:#14532d; --brand-300:#22c55e;
  --bg:#f6faf7; --surface:#ffffff; --ink:#0f172a; --muted:#64748b; --border:#e2e8f0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji'; color:var(--ink); background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:16px}
header.topbar{position:sticky;top:0;background:linear-gradient(90deg,#e8f5ec,#ffffff);border-bottom:1px solid var(--border);z-index:10}
.topbar-inner{display:flex;align-items:center;gap:12px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#30a46c)}
.brand .title{letter-spacing:.5px}
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:260px; background:linear-gradient(180deg,#e9f7ee,#ffffff); border-right:1px solid var(--border); padding:16px; position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto}
.sidebar h3{margin:8px 0 12px 0; font-size:14px; color:#0a0f13; opacity:.6}
.nav{list-style:none;padding:0;margin:0}
.nav li{margin-bottom:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#0f172a;background:transparent}
.nav a.active, .nav a:hover{background:rgba(22,101,52,.08)}
.main{flex:1;padding:16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer}
.btn.secondary{background:#fff;color:var(--brand);border-color:var(--border)}
.btn.icon{padding:8px 10px}
.input, select, textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th, .table td{padding:10px 12px; background:#fff; border:1px solid var(--border)}
.table th:first-child, .table td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table th:last-child, .table td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px}
.status-New{background:#eef6ff}
.status-NoAnswer{background:#fff7ed}
.status-Zalo{background:#ecfeff}
.status-CallBack{background:#fdf2f8}
.status-Interested{background:#ecfdf5}
.status-Ordered{background:#eefdf2}
.status-Closed{background:#f1f5f9}
.footer-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:none}
.footer-nav ul{display:flex;justify-content:space-around;margin:0;padding:8px 6px;list-style:none}
.footer-nav a{display:flex;flex-direction:column;align-items:center;font-size:12px;color:#111827}
.footer-nav .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);margin-top:6px;opacity:.7}
@media (max-width:991px){
  .sidebar{display:none}
  .main{padding-bottom:70px}
  .footer-nav{display:block}
}
.alert{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#f8fafc}
.success{background:#ecfdf5; border-color:#bbf7d0}
.error{background:#fef2f2; border-color:#fecaca}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:700px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }
.brand-hero{background:linear-gradient(180deg,#ffffff, #f0fff4); padding:16px; border-radius:18px; border:1px solid var(--border)}
.sidebar {
  width: 240px;
  background: #1e293b;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px 0;
  position: fixed;
  top: 56px; /* dưới header */
  left: 0;
  bottom: 0;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 20px;
}

.sidebar-header .logo {
  width: 48px; height: 48px;
  margin: auto;
  background: #0ea5e9;
  border-radius: 12px;
}
.sidebar-header h2 {
  font-size: 18px;
  margin-top: 8px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: #f1f5f9;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s;
}

.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item.active {
  background: #0ea5e9;
  color: #fff;
}

.sidebar-nav .nav-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* ===== Sidebar UNIFIED (no gradient, fixed width) ===== */
:root{
  --sb-bg:#0e3022;          /* nền sidebar 1 màu */
  --sb-text:#e8f5ee;        /* màu chữ */
  --sb-border:#134e33;      /* viền phải */
  --sb-active:#166534;      /* màu active theo brand */
}

/* layout luôn là 2 cột: sidebar cố định 260px + main co giãn */
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{
  width:260px; flex:0 0 260px;
  background:var(--sb-bg) !important;   /* ép 1 màu, bỏ gradient */
  color:var(--sb-text);
  border-right:1px solid var(--sb-border);
  padding:16px 12px 18px;
  position:sticky; top:56px; height:calc(100vh - 56px);
  overflow:auto;
}
.sb-brand{display:flex;align-items:center;gap:10px;margin:2px 8px 12px}
.sb-logo{width:34px;height:34px;border-radius:10px;background:#166534}
.sb-title{font-weight:700;letter-spacing:.4px;color:#e8f5ee}

.sb-section{margin:10px 6px 6px;color:#c8e9d6;font-size:12px;opacity:.85}
.sb-nav{display:flex;flex-direction:column;gap:6px;margin:6px}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  color:var(--sb-text); text-decoration:none;
  border:1px solid transparent; transition:background .15s,border-color .15s,color .15s;
}
.sb-item:hover{ background:rgba(255,255,255,.06); }
.sb-item.active{
  background:var(--sb-active);
  border-color:var(--sb-active);
  color:#fff;
}
.sb-item svg{opacity:.95}

@media (max-width:991px){ .sidebar{display:none} }
/* ==== Sidebar compact (ít khoảng cách, không phải cuộn) ==== */
.sidebar{
  padding: 10px 8px 12px;              /* bớt padding tổng */
}
.sb-brand{ margin: 0 6px 8px; }
.sb-logo{ width: 28px; height: 28px; }  /* logo nhỏ lại */
.sb-title{ font-size: 14px; }

.sb-section{ margin: 6px 8px 4px; }     /* tiêu đề nhóm sát hơn */
.sb-nav{ gap: 2px; }                    /* giảm khoảng cách giữa các item */

.sb-item{
  padding: 8px 10px;                    /* giảm padding theo hàng */
  font-size: 14px;                      /* chữ nhỏ hơn chút */
  line-height: 1.2;                     /* chiều cao dòng thấp hơn */
}
.sb-item svg{
  width: 16px; height: 16px;            /* icon nhỏ lại cho cân đối */
}
/* ----- PILL TABS theo style ảnh (blue) ----- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tabs .tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:#eaf4ff;color:#0b5ed7;text-decoration:none;
  border:1px solid #bfdbfe;font-weight:600
}
.tabs .tab .n{padding:2px 8px;border-radius:999px;background:#ffffffaa;border:1px solid #cfe8ff;font-size:12px}
.tabs .tab:hover{background:#dbeaff}
.tabs .tab.active{background:#0d6efd;color:#fff;border-color:#0d6efd}
.tabs .tab.active .n{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}

/* ----- Thanh tìm kiếm gọn (giống panel xanh nhạt) ----- */
.leads-toolbar.compact{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:#e8f2fb;border:1px solid #cfe0f5;border-radius:10px;
  padding:10px 12px
}
.leads-toolbar.compact .input{height:36px;padding:6px 10px}
.leads-toolbar.compact .btn{height:36px;padding:0 14px;line-height:34px}

/* ----- Badge trạng thái tiếng Việt: nhỏ & rõ màu ----- */
.badge.vi{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid transparent}
.status-New{background:#e7f1ff;color:#0b5ed7;border-color:#c9ddff}
.status-NoAnswer{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.status-Zalo{background:#e6fffb;color:#0e7490;border-color:#b6f7f0}
.status-CallBack{background:#fff7ed;color:#c2410c;border-color:#ffe1c5}
.status-Interested{background:#f5f3ff;color:#6d28d9;border-color:#e9e5ff}
.status-Ordered{background:#e8fbe8;color:#166534;border-color:#c6f0cf}
.status-Closed{background:#fdecec;color:#b42318;border-color:#f5c2c2}

/* ----- Select trạng thái dạng pill (gọn) ----- */
.status-select .input{height:36px;padding:6px 10px;border-radius:999px}
.status-select .btn{height:36px;padding:0 12px;line-height:34px;border-radius:999px}

/* Giữ sidebar gọn như đã chỉnh */
.sb-nav{gap:2px}
.sb-item{padding:8px 10px;font-size:14px}
/* ===== Buttons: bo nhẹ, không pill ===== */
.btn,
button,
input[type="button"],
input[type="submit"]{
  border-radius: 5px !important;   /* bo nhẹ góc */
}

/* Các nút ở toolbar & cột hành động trong trang Leads */
.leads-toolbar .btn,
.status-select .btn{
  border-radius: 10px !important;
}

/* (Tùy chọn) Nếu muốn cả ô nhập/select cũng bo nhẹ, bỏ pill: bật 2 dòng dưới */
 /* .leads-toolbar .input,
    .status-select .input{ border-radius: 10px !important; } */

/* Giữ nguyên tab/badge dạng pill như hiện tại (không đụng vào .tab, .badge) */
/* === Tabs bo góc nhẹ 5px (không pill) === */
.tabs .tab{
  border-radius: 5px !important;
  padding: 8px 12px;                 /* gọn lại cho hợp bo 5px */
}

.tabs .tab .n{
  border-radius: 5px !important;     /* số đếm trong tab */
}

/* Trạng thái hover/active giữ nguyên, chỉ bo 5px */
.tabs .tab:hover{
  background: #dbeaff;
}

.tabs .tab.active{
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
.tabs .tab.active .n{
  background: rgba(255,255,255,.2);
  border-color: transparent;
  color: #fff;
}