:root{
  --pha-orange:#e8630a;--pha-orange-dark:#c9530a;
  --pha-ink:#1c1917;--pha-muted:#6b6863;--pha-muted-rgb:107,104,99;
  --pha-link-rgb:232,99,10;
  /* Font + màu chữ chuẩn hoá qua biến CSS của Bootstrap — áp dụng xuyên suốt mọi component
     (badge, card, form...) thay vì phải ghi đè màu xám lạnh mặc định ở từng class riêng lẻ. */
  --bs-body-font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-color:var(--pha-ink);
  --bs-body-color-rgb:28,25,23;
  --bs-heading-color:var(--pha-ink);
  --bs-secondary-color:rgba(var(--pha-muted-rgb),.85);
  --bs-secondary-color-rgb:var(--pha-muted-rgb);
  --bs-link-color:rgb(var(--pha-link-rgb));
  --bs-link-color-rgb:var(--pha-link-rgb);
  --bs-link-hover-color:var(--pha-orange-dark);
  --bs-link-hover-color-rgb:201,83,10;
}
/* Gốc rem thu nhỏ còn 14px (mặc định Bootstrap 16px) — mọi kích thước dựa trên rem (nút, badge, form, heading display-*...) tự co theo tỉ lệ, cho giao diện admin gọn và đậm đặc thông tin hơn thay vì to/lỏng lẻo như mặc định. */
html{font-size:14px;}
body{background:#f7f7f5;font-family:var(--bs-body-font-family);}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;}
small,.small{color:rgba(var(--pha-muted-rgb),.9);}

.sidebar{width:260px;min-height:100vh;transition:width .2s ease;}
.sidebar-toggle i{transition:transform .2s ease;}
@media(min-width:992px){
  /* Ghim menu đứng yên khi cuộn trang — chỉ phần nội dung bên phải cuộn, đúng kiểu dashboard quen
     thuộc. Chỉ áp dụng từ breakpoint lg trở lên vì dưới lg, offcanvas-lg của Bootstrap biến sidebar
     thành drawer trượt ra/vào, không còn nằm trong luồng cuộn bình thường nữa. */
  .sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;}

  /* Thu gọn còn icon — bấm nút mũi tên để ẩn/hiện chữ, chỉ còn dải icon hẹp. Trạng thái lưu ở
     localStorage (xem app.js) nên giữ nguyên qua các lần tải trang. */
  body.sidebar-collapsed .sidebar{width:72px;}
  body.sidebar-collapsed .sidebar-label{display:none;}
  body.sidebar-collapsed .sidebar-head{justify-content:center;}
  body.sidebar-collapsed .sidebar-head .navbar-brand{gap:0;}
  body.sidebar-collapsed .sidebar-toggle{position:absolute;top:1.1rem;right:-14px;background:var(--pha-ink);border-radius:50%;width:28px;height:28px;padding:0;display:grid;place-items:center;}
  body.sidebar-collapsed .sidebar-toggle i{transform:rotate(180deg);}
  body.sidebar-collapsed .sidebar .nav-link{justify-content:center;padding-left:.5rem;padding-right:.5rem;}
  body.sidebar-collapsed .sidebar .nav-link i{margin-right:0!important;font-size:1.05rem;}
  body.sidebar-collapsed .sidebar form.mt-3{display:flex;justify-content:center;}
  body.sidebar-collapsed .sidebar form.mt-3 button i{margin-right:0!important;}
}
.sidebar .brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--pha-orange);color:#fff;font-size:16px;}
.sidebar .nav-link{font-size:.9rem;font-weight:600;border-radius:10px;opacity:.75;}
.sidebar .nav-link:hover{opacity:1;background:rgba(255,255,255,.08);}
.sidebar .nav-link.active{opacity:1;background:var(--pha-orange);}

.offcanvas-lg.sidebar{transition:none;}

.btn-primary,.bg-primary{background-color:var(--pha-orange)!important;border-color:var(--pha-orange)!important;}
.btn-primary:hover,.btn-primary:focus{background-color:var(--pha-orange-dark)!important;border-color:var(--pha-orange-dark)!important;}
.text-primary{color:var(--pha-orange)!important;}
.nav-pills .nav-link.active{background-color:var(--pha-orange);}
.form-control:focus,.form-select:focus{border-color:var(--pha-orange);box-shadow:0 0 0 .2rem rgba(232,99,10,.15);}
.form-check-input:checked{background-color:var(--pha-orange);border-color:var(--pha-orange);}

.hero{position:relative;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 90% 0,rgba(232,99,10,.45),transparent 38%),#1c1917;color:#fff;padding:2rem;}
.hero h1{font-weight:800;letter-spacing:-1px;}
.hero-total{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;}
.hero-total .icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--pha-orange);font-size:18px;}

.icon-wrap{display:grid;place-items:center;flex:none;border-radius:10px;font-size:16px;}
.metric-card{border-radius:14px;}
.metric-card .icon-wrap{width:44px;height:44px;font-size:18px;}
.icon-wrap.green{color:#16805e;background:#e5f8f1;}
.icon-wrap.red{color:#d33;background:#fff0f0;}
.icon-wrap.blue{color:#1680b7;background:#eaf7fd;}
.icon-wrap.orange{color:#b85b00;background:#fff3e7;}

.filter-card{border-radius:12px;cursor:pointer;transition:.15s;}
.filter-card:hover{border-color:#adb5bd!important;background:#f8f9fa!important;}
.filter-card.selected{border-color:var(--pha-orange)!important;box-shadow:0 0 0 2px rgba(232,99,10,.12);}

.table-card{border-radius:14px;overflow:hidden;}
.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;padding:0;}

.access-picker .form-check{padding-left:0;}
.access-picker label.pick-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:78px;border:1px solid #dee2e6;border-radius:10px;padding:10px 4px;font-size:.72rem;color:var(--pha-muted);cursor:pointer;transition:.15s;text-align:center;}
.access-picker label.pick-card:hover{border-color:#adb5bd;background:#f8f9fa;}
.access-picker label.pick-card i{font-size:1.15rem;opacity:.65;}
.access-picker label.pick-card b{font-size:.78rem;}
.access-picker input{position:absolute;opacity:0;pointer-events:none;}
.access-picker input:checked+label.pick-card{border-color:var(--pha-orange);background:#fff5ed;color:#7d3a0b;box-shadow:0 0 0 2px rgba(232,99,10,.1);}
.access-picker input:checked+label.pick-card i{opacity:1;}
.access-picker input:checked+label.pick-card.allow{border-color:#20a77a;background:#effaf6;color:#087453;box-shadow:0 0 0 2px rgba(32,167,122,.1);}
.access-picker input:checked+label.pick-card.block{border-color:#df5147;background:#fff3f2;color:#b42318;box-shadow:0 0 0 2px rgba(223,81,71,.1);}
.access-picker input:focus-visible+label.pick-card{outline:2px solid var(--pha-orange);outline-offset:2px;}

.code-card{border:1px solid #f2d5c1;border-radius:14px;background:#fff8f3;}
.code-card strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.7rem;letter-spacing:.14em;color:#b64c08;}

.login-shell{min-height:100vh;}
.login-art{background:radial-gradient(circle at 0 50%,rgba(232,99,10,.25),transparent 45%),#171714;color:#fff;}
.login-art h1{font-weight:800;}
.login-art h1 em{color:var(--pha-orange);font-style:normal;display:block;}

.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}