/* V9.105: man Bang luong gon lai (man >=821px, ke ca may tinh de thu phong 100%). Chi CSS, giu nguyen HTML va moi nut/data-* cu.
   Dien thoai (<=820px) giu bo cuc cu. */
@media (min-width:821px) {
  .payroll-panel .payroll-v3 { gap:10px !important; min-width:0; }
  .payroll-panel .payroll-v3 > * { min-width:0; max-width:100%; }

  .payroll-panel .payroll-v3-hero { padding:12px 14px !important; border-radius:14px !important; background:var(--surface) !important; background-image:none !important; box-shadow:none !important; }
  .payroll-panel .payroll-v3-hero .management-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 !important; }
  .payroll-panel .payroll-v3-hero .management-heading > div:first-child { min-width:0; }
  .payroll-panel .payroll-v3-hero .eyebrow { font-size:9.5px !important; letter-spacing:.1em; }
  .payroll-panel .payroll-v3-hero h2 { margin:1px 0 0 !important; font-size:20px !important; line-height:1.2; white-space:nowrap; }
  .payroll-panel .payroll-v3-hero .payroll-formula { margin:2px 0 0 !important; font-size:11px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .payroll-panel .payroll-v3-hero .monitor-actions { display:flex; flex:none; flex-wrap:nowrap; align-items:center; gap:6px; }
  .payroll-panel .payroll-v3-hero .monitor-actions > * { display:inline-flex; align-items:center; justify-content:center; height:36px; min-height:36px !important; padding:0 12px !important; border-radius:10px !important; font-size:12.5px !important; font-weight:700; white-space:nowrap; text-decoration:none !important; }
  .payroll-panel .payroll-v3-hero .monitor-actions > a.soft-button { border:1px solid color-mix(in srgb,var(--green) 55%,var(--line)) !important; background:color-mix(in srgb,var(--green) 8%,var(--surface)) !important; color:var(--green) !important; }

  .payroll-panel .payroll-v3-period { display:flex !important; align-items:center; gap:8px; margin:10px 0 !important; padding:0 !important; }
  .payroll-panel .payroll-v3-period label { display:flex; align-items:center; gap:8px; margin:0 !important; font-size:12px !important; font-weight:700; color:var(--muted); white-space:nowrap; }
  .payroll-panel .payroll-v3-period input { width:170px !important; height:36px !important; min-height:36px !important; margin:0 !important; padding:0 10px !important; border-radius:10px !important; font-size:13px !important; font-weight:600; }
  .payroll-panel .payroll-v3-period .soft-button { height:36px; min-height:36px !important; padding:0 12px !important; border-radius:10px !important; font-size:12.5px !important; }

  .payroll-panel .payroll-kpi-grid { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px !important; margin:0 !important; }
  .payroll-panel .payroll-kpi-grid article { grid-column:auto !important; min-width:0; min-height:0 !important; padding:8px 12px !important; border-radius:12px !important; box-shadow:none !important; }
  .payroll-panel .payroll-kpi-grid article span { display:block; font-size:10px !important; line-height:1.2; }
  .payroll-panel .payroll-kpi-grid article strong { display:block; margin:3px 0 1px !important; font-size:16px !important; line-height:1.2; white-space:nowrap; }
  .payroll-panel .payroll-kpi-grid article small { display:block; font-size:10.5px !important; }

  .payroll-panel .payroll-v3-toolbar { flex-wrap:nowrap; gap:8px !important; padding:8px 10px !important; border-radius:14px !important; }
  .payroll-panel .payroll-v3-search { min-width:150px !important; height:36px; border-radius:10px !important; }
  .payroll-panel .payroll-v3-search input { font-size:13px !important; }
  .payroll-panel .payroll-v3-pills { display:flex; flex:none; flex-wrap:nowrap; gap:5px; }
  .payroll-panel .payroll-v3-pills button { height:30px; min-height:30px !important; padding:0 11px !important; border-radius:999px !important; font-size:12px !important; white-space:nowrap; }
  .payroll-panel .payroll-v3-toolbar > small { flex:none; margin-left:auto; font-size:11.5px; white-space:nowrap; }

  .payroll-panel .payroll-entry-panel { padding:10px 12px 12px !important; border-radius:14px !important; }
  .payroll-panel .payroll-entry-panel h3 { margin:0 0 8px !important; font-size:14px !important; }
  .payroll-panel .payroll-entry-form { display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:8px 10px !important; }
  .payroll-panel .payroll-entry-form > label { flex:1 1 140px; min-width:0; margin:0 !important; font-size:11px !important; font-weight:700; color:var(--muted); }
  .payroll-panel .payroll-entry-form > label.hidden { display:none !important; }
  .payroll-panel .payroll-entry-form > label input, .payroll-panel .payroll-entry-form > label select { display:block; width:100% !important; height:36px !important; min-height:36px !important; margin-top:4px !important; padding:0 10px !important; border-radius:10px !important; font-size:13px !important; }
  .payroll-panel .payroll-entry-form > .primary-button { flex:none; width:auto !important; height:36px; min-height:36px !important; padding:0 16px !important; border-radius:10px !important; font-size:13px !important; }

  .payroll-panel .payroll-v3 .payroll-table { border-radius:14px !important; box-shadow:none !important; }
  .payroll-panel .payroll-v3 .payroll-driver-detail { padding:10px 12px !important; }
  .payroll-panel .payroll-entries { padding:10px 12px !important; border-radius:14px !important; }
  .payroll-panel .payroll-entries h3 { margin:0 0 8px !important; font-size:14px !important; }
  .payroll-panel .payroll-entries article { padding:8px 12px !important; border-radius:10px !important; }
  .payroll-panel .payroll-entries article { display:grid !important; grid-template-columns:minmax(0,1fr) auto auto !important; align-items:center; gap:10px !important; margin-bottom:6px; }
  .payroll-panel .payroll-entries article > .soft-button { width:auto !important; height:32px; min-height:32px !important; padding:0 12px !important; border-radius:9px !important; font-size:12px !important; }
  .payroll-panel .payroll-entries article strong { font-size:13px !important; }
  .payroll-panel .payroll-entries article > b { grid-column:auto !important; grid-row:auto !important; font-size:14px !important; white-space:nowrap; }
  .payroll-panel .payroll-entries article > .soft-button { grid-column:auto !important; grid-row:auto !important; }
}
/* 821-1100px: moi tai xe mot dong ngang (ten + 6 o so co nhan) thay cho the 2 cot cao. */
@media (min-width:821px) and (max-width:1100px) {
  .payroll-panel .payroll-v3 .payroll-driver { width:auto !important; margin:8px !important; border-radius:12px !important; }
  .payroll-panel .payroll-v3 .payroll-driver > summary { grid-template-columns:minmax(150px,1.7fr) repeat(6,minmax(0,1fr)) !important; align-items:start; gap:8px !important; padding:10px 12px !important; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span:first-child { grid-column:auto !important; align-self:center; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span:not(:first-child), .payroll-panel .payroll-v3 .payroll-driver > summary > strong { padding-top:15px !important; font-size:12.5px !important; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span:not(:first-child)::before, .payroll-panel .payroll-v3 .payroll-driver > summary > strong::before { font-size:8.5px !important; letter-spacing:0; white-space:nowrap; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span:not(:first-child) { display:grid !important; gap:2px; align-content:start; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span:first-child strong { font-size:13.5px !important; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span > b { font-size:12.5px !important; white-space:nowrap; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > span small { font-size:9.5px !important; line-height:1.25; }
  .payroll-panel .payroll-v3 .payroll-driver > summary > strong { font-size:14px !important; white-space:nowrap; }
  .payroll-panel .payroll-v3 .payroll-driver > summary .payroll-avatar { width:30px; height:30px; flex:0 0 30px; font-size:13px; }
}

/* V9.169: khung Chi tiết phiếu lương (màn hình rộng) bị padding:10px ở trên đè mất chỗ của tiêu đề -> chữ "Ngày công" chồng lên tiêu đề; thêm nút Đóng. */
@media (min-width:1101px){
  .payroll-panel .payroll-v3 .payroll-driver[open] > .payroll-driver-detail { padding:76px 22px 30px !important; }
  .payroll-v3 .payroll-driver[open] > .payroll-driver-detail > .payroll-detail-close { display:inline-flex; position:absolute; top:14px; right:18px; z-index:2; align-items:center; gap:6px; height:34px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface, #fff); color:var(--text, #0f172a); font-weight:800; font-size:13px; cursor:pointer; }
  .payroll-v3 .payroll-driver[open] > .payroll-driver-detail > .payroll-detail-close:hover { border-color:var(--primary); color:var(--primary); }
  .payroll-v3 .payroll-driver[open] > .payroll-driver-detail:before { right:120px !important; }
}
.payroll-detail-close { display:none; }