.pgbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 4px 0;font-size:13px;color:var(--muted)}
  .pgbar .pgs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .pgbar select{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 6px;margin:0 8px 0 4px;font:inherit;background:#fff}
  .pgbar button{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font:inherit;font-weight:600;color:var(--text)}
  .pgbar button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
  .pgbar button.on{background:var(--primary);border-color:var(--primary);color:#fff}
  .pgbar button:disabled{opacity:.4;cursor:default}
  @media print{.pgbar{display:none!important}}
  :root{
    --bg:#f7f9fc; --card:#fff; --text:#0f172a; --muted:#475569; --line:#e3e8ef;
    --primary:#16a34a; --primary-2:#22c55e; --soft:#ecfdf3;
    --side:#ffffff; --side-2:#f4f7fb; --side-text:#475569;
    --blue:#3b82f6; --orange:#f59e0b; --red:#ef4444; --gray:#64748b; --purple:#8b5cf6;
    --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.04);
    --side-w:268px;
    --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
  a{cursor:pointer}

  /* Bảng điều khiển bên trái */
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);background:var(--side);color:var(--side-text);display:flex;flex-direction:column;z-index:40;transition:transform .25s;border-right:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:12px;padding:22px 20px}
  .logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
  .brand b{color:var(--text);font-size:16px;display:block}
  .brand small{font-size:12px;color:var(--muted)}
  nav{flex:1;overflow-y:auto;padding:0 14px 16px}
  .sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:700;font-size:12px;padding:18px 12px 6px}
  .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--side-text);text-decoration:none;font-size:15px;font-weight:500;margin-bottom:2px;transition:.15s;user-select:none}
  .item:hover{background:var(--side-2);color:var(--text)}
  .item.active{background:var(--soft);color:var(--primary);font-weight:600}
  .item .ic{width:20px;text-align:center}
  .item .cnt{margin-left:auto;background:#f1f5f9;color:var(--muted);border-radius:10px;padding:1px 9px;font-size:13px;font-weight:600}
  .item.active .cnt{background:#fff;color:var(--primary)}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin:0 6px}
  .side-foot{display:flex;align-items:center;gap:10px;padding:14px 16px;margin:10px;border-radius:12px;background:var(--side-2)}
  .side-foot .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
  .side-foot b{color:var(--text);display:block;font-size:14px}
  .side-foot small{font-size:12px;color:var(--muted)}
  .overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.25);z-index:35}
  .main{margin-left:var(--side-w);min-height:100vh}

  /* Thanh trên */
  header{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:30}
  header h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
  header p{margin:2px 0 0;color:var(--muted);font-size:14px}
  .menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--text);width:38px;height:38px;font-size:18px;cursor:pointer}
  .wrap{max-width:1280px;margin:0 auto;padding:24px 28px 48px}

  .btn{border:0;border-radius:10px;padding:10px 18px;font-size:15px;font-family:inherit;transition:.15s;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.25)}
  .btn-primary:hover{background:#15803d}
  .btn-light{background:#fff;border:1px solid #d5dce6;color:var(--text)}
  .btn-light:hover{background:#f9fafb}
  .btn-danger{background:#fef2f2;color:var(--red)}
  .btn-danger:hover{background:#fee2e2}
  .btn-sm{padding:6px 12px;font-size:13px}

  /* Thống kê */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
  .stat{background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line);cursor:pointer;transition:.15s;display:flex;gap:14px;align-items:center}
  .stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.07)}
  .stat .si{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  .stat .lb{color:var(--muted);font-size:14px;font-weight:500}
  .stat .vl{font-size:28px;font-weight:700;margin-top:2px;letter-spacing:-.01em}
  

  .dash-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
  .panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);padding:20px;margin-bottom:20px}
  .panel-title{font-weight:700;font-size:17px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
  .panel-title a{font-size:14px;color:var(--primary);font-weight:600}
  .dept-bars{display:grid;gap:14px}
  .bar-row{display:grid;grid-template-columns:130px 1fr 36px;align-items:center;gap:12px;font-size:15px;cursor:pointer}
  .bar-row:hover span{color:var(--primary);font-weight:600}
  .bar-bg{background:#eef2f6;border-radius:99px;height:12px;overflow:hidden}
  .bar-fill{background:linear-gradient(90deg,#4ade80,#16a34a);height:100%;border-radius:99px}
  .mini-list{display:grid;gap:10px}
  .mini{display:flex;align-items:center;gap:12px;cursor:pointer;padding:6px;border-radius:10px}
  .mini:hover{background:#f8fafc}
  .mini .t{flex:1;min-width:0}
  .mini .t b{display:block;font-size:15px}
  .mini .t small{color:var(--muted);font-size:13px}
  .mini .r{font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}

  /* Thanh công cụ */
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .toolbar input,.toolbar select,.db-filter select{padding:11px 14px;border:1px solid #d5dce6;border-radius:10px;font-size:15px;background:#fff;font-family:inherit;color:var(--text);outline:none;transition:.15s}
  .toolbar input:focus,.toolbar select:focus,.form input:focus,.form select:focus{border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
  .toolbar input{flex:1;min-width:200px}
  .view-toggle{display:flex;background:#f1f5f9;border-radius:10px;padding:3px;gap:2px}
  .view-toggle button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font-size:15px;border-radius:8px;color:var(--muted);font-family:inherit}
  .view-toggle button.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.1)}
  .count{color:var(--muted);font-size:14px;margin-bottom:12px}

  /* Dạng thẻ */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}
  .card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);padding:24px 16px 18px;text-align:center;position:relative;transition:.15s}
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
  .avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 2px var(--soft),0 4px 12px rgba(15,23,42,.08);background:#eef2f7;display:block;margin:0 auto}
  .avatar-sm{width:40px;height:40px;border-width:2px;box-shadow:0 0 0 1px var(--line);margin:0;flex-shrink:0}
  .card h3{margin:14px 0 2px;font-size:17px;font-weight:700}
  .card .role{color:var(--muted);font-size:14px}
  .card .dept{display:inline-block;margin-top:8px;background:var(--soft);color:var(--primary);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600}
  .card .code{position:absolute;top:12px;left:14px;font-size:12px;color:var(--muted);font-weight:600}
  .badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
  .card .badge{position:absolute;top:10px;right:10px}
  .b-lam{background:#ecfdf3;color:#15803d}
  .b-phep{background:#fffbeb;color:#b45309}
  .b-thu{background:#eff6ff;color:#1d4ed8}
  .b-nghi{background:#f1f5f9;color:var(--gray)}
  .card .actions{display:flex;gap:6px;justify-content:center;margin-top:14px}

  /* Dạng bảng */
  .table-wrap{background:var(--card);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:900px;font-size:15px}
  th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
  th{background:#f6f8fb;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;user-select:none}
  tr:hover td{background:#f8fffa}
  tr:last-child td{border-bottom:0}
  .name-cell{display:flex;align-items:center;gap:10px}
  .num{text-align:right}

  /* Hộp thoại */
  .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
  .modal-bg.show{display:flex}
  .modal{background:#fff;border-radius:20px;width:100%;max-width:720px;max-height:92vh;overflow:auto;padding:28px;box-shadow:0 24px 60px rgba(15,23,42,.18)}
  .modal h2{margin:0 0 18px;font-size:21px}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#334155;font-weight:600}
  .form input,.form select{padding:11px 12px;border:1px solid #d5dce6;border-radius:10px;font-size:15px;color:var(--text);font-family:inherit;outline:none;transition:.15s}
  .photo-box{grid-column:1/-1;display:flex;align-items:center;gap:16px;background:#f8fafc;padding:14px;border-radius:14px;border:1px dashed #e2e8f0}
  .photo-box .avatar{margin:0}
  .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
  .detail{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}
  .detail .avatar{width:160px;height:160px}
  .detail dl{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;margin:0;font-size:15px}
  .detail dt{color:var(--muted)} .detail dd{margin:0;font-weight:600}
  .empty{text-align:center;color:var(--muted);padding:30px}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:12px 20px;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.2);opacity:0;transition:.3s;pointer-events:none;z-index:60}
  .toast.show{opacity:1}

  /* Trang Dashboard */
  .db-filter{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
  .db-filter label{font-weight:600}
  .db-filter select{background:#fff;font-family:inherit;color:var(--text);outline:none;min-width:220px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
  .kpi .lb{font-size:14px;color:var(--muted);font-weight:500}
  .kpi .vl{font-size:28px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
  .kpi .sub{font-size:13px;color:var(--muted);margin-top:2px}
  .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .chart-grid .panel{margin-bottom:0;min-width:0}
  .panel .hint{font-size:13px;color:var(--muted);font-weight:400}
  .hb{display:grid;gap:14px}
  .hb-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;font-size:15px}
  .hb-track{display:flex;align-items:center;gap:10px;min-width:0}
  .hb-bar{height:22px;background:var(--c1);border-radius:0 4px 4px 0;min-width:3px;transition:.2s}
  .hb-bar:hover,.cbar:hover{filter:brightness(1.12)}
  .hb-val{font-size:14px;font-weight:600;white-space:nowrap}
  .donut-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
  .donut-wrap svg path,.donut-wrap svg circle.seg{cursor:pointer}
  .legend{display:grid;gap:12px;font-size:15px;min-width:200px}
  .legend .lg{display:flex;align-items:center;gap:10px}
  .legend .sw{width:14px;height:14px;border-radius:4px;flex-shrink:0}
  .legend b{margin-left:auto;padding-left:16px}
  .legend small{color:var(--muted);font-size:13px;margin-left:6px}
  .cols{display:flex;gap:14px;align-items:stretch}
  .col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
  .col-area{height:190px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:1px solid #cbd5e1}
  .col .v{font-size:14px;font-weight:700;margin-bottom:6px}
  .cbar{width:100%;max-width:54px;background:var(--c1);border-radius:4px 4px 0 0;min-height:2px;transition:.2s}
  .col .lbl{font-size:13px;color:var(--muted);margin-top:8px;text-align:center;white-space:nowrap}
  .rank{width:28px;height:28px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}

  @media (max-width:1000px){ .dash-grid,.chart-grid{grid-template-columns:1fr} }
  @media (max-width:900px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:none}
    .overlay.show{display:block}
    .main{margin-left:0}
    .menu-btn{display:inline-block}
  }
  @media (max-width:640px){
    .form{grid-template-columns:1fr}
    .detail{grid-template-columns:1fr;text-align:center}
    .detail .avatar{margin:0 auto}
    .detail dl{text-align:left}
    header{padding:12px 16px}
    header h1{font-size:17px}
    .wrap{padding:16px}
    #btnAddTop{display:none}
    .stats{grid-template-columns:1fr 1fr;gap:12px}
    .stat{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
    .kpis{grid-template-columns:1fr 1fr;gap:12px}
    .kpi .vl{font-size:24px}
    .hb-row{grid-template-columns:100px 1fr;font-size:14px}
    .hb-bar{max-width:70%}
    .cols{gap:4px}
    .col .lbl{font-size:10px}
    .col .v{font-size:12px}
    .db-filter select{min-width:0;flex:1}
  }

/* Standalone HR theme and JSON library additions */
.hr-theme-label{font-size:12px;color:var(--muted)}
#hrTheme{border:1px solid var(--line);border-radius:8px;padding:9px;background:var(--card);color:var(--text)}
#hrLibrary{border:1px solid var(--line);border-radius:16px;padding:0;max-width:min(620px,95vw);width:100%;color:var(--text);background:var(--card)}
#hrLibrary::backdrop{background:rgba(15,23,42,.55)}
.hr-library{padding:24px;display:grid;gap:12px}
.hr-library h2{margin:0;font-size:20px}
.hr-library p{margin:0;color:var(--muted);font-size:13px}
.hr-library label{display:grid;gap:5px;font-size:13px}
.hr-library input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px}
.hr-library-actions{display:flex;flex-wrap:wrap;gap:8px}
.hr-dataset-list{display:grid;gap:8px;max-height:35vh;overflow:auto}
.hr-dataset-list button{text-align:left}
@media(max-width:640px){.main header{flex-wrap:wrap}.hr-library{padding:16px}#hrTheme{max-width:130px}}

/* HR settings workspace */
.hr-settings{display:grid;gap:14px;padding-bottom:24px}
.hr-settings-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.hr-settings-panel h3{font-size:15px;margin:0 0 6px;color:var(--text)}
.hr-settings-panel p{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.hr-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.hr-settings-grid .hr-settings-panel{min-height:175px}
.hr-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hr-theme-grid button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:12px;cursor:pointer;color:var(--text)}
.hr-theme-grid button.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.hr-theme-grid i{width:24px;height:30px;border-radius:6px;display:block;flex-shrink:0}
.hr-theme-grid span{display:grid;gap:3px}
.hr-theme-grid b{font-size:12px}.hr-theme-grid small{font-size:10px;color:var(--muted)}
@media(max-width:900px){.hr-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.hr-theme-grid,.hr-settings-grid{grid-template-columns:1fr}.hr-settings-panel{padding:13px}}

/* Sales-inspired sidebar; scoped to standalone HR demo. Theme tokens are set by hrSetTheme(). */
:root{
  --side:#164537;
  --side-end:#0d2e25;
  --side-2:#225846;
  --side-text:#d8f2e6;
  --side-muted:#acd4c1;
}
.sidebar{
  background:linear-gradient(180deg,var(--side),var(--side-end));
  color:var(--side-text);
  border-right:1px solid rgba(255,255,255,.08);
}
.sidebar .brand b{color:#fff}
.sidebar .brand small{color:var(--side-muted)}
.sidebar .logo{
  background:linear-gradient(135deg,var(--primary-2),var(--primary));
  color:#fff;
}
.sidebar .sec{color:var(--side-muted);opacity:.9}
.sidebar .item{color:var(--side-text)}
.sidebar .item:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .item.active{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.sidebar .item .cnt{
  background:rgba(255,255,255,.13);
  color:#fff;
}
.sidebar .side-foot{
  background:var(--side-2);
  border-color:rgba(255,255,255,.09);
  color:var(--side-text);
}
.sidebar .side-foot b{color:#fff}
.sidebar .side-foot small{color:var(--side-muted)}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}

/* Original palette reproduces the pre-theme light sidebar. */
.hr-original-theme .sidebar{background:var(--side);border-right:1px solid var(--line)}
.hr-original-theme .sidebar .brand b,.hr-original-theme .sidebar .side-foot b{color:var(--text)}
.hr-original-theme .sidebar .brand small,.hr-original-theme .sidebar .side-foot small{color:var(--muted)}
.hr-original-theme .sidebar .item{color:var(--side-text)}
.hr-original-theme .sidebar .item:hover{background:var(--side-2);color:var(--text)}
.hr-original-theme .sidebar .item.active{background:var(--soft);color:var(--primary);box-shadow:none}
.hr-original-theme .sidebar .sec{color:var(--muted)}
.hr-original-theme .sidebar .item .cnt{background:#f1f5f9;color:var(--muted)}
.hr-original-theme .sidebar .side-foot{background:var(--side-2);border-color:transparent}
.hr-theme-grid button{min-height:74px}
.hr-theme-grid button i{width:44px;height:28px;border-radius:8px;display:block;border:1px solid rgba(0,0,0,.08)}
@media(max-width:600px){.hr-theme-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}