:root {
  --cats-navy-950: #06172e;
  --cats-navy-900: #08213f;
  --cats-navy-800: #0d3157;
  --cats-blue-700: #0d64d8;
  --cats-blue-600: #1478f2;
  --cats-cyan-500: #10bcd8;
  --cats-cyan-100: #dff9fd;
  --cats-ink: #102a46;
  --cats-muted: #657a91;
  --cats-line: #dce6f0;
  --cats-surface: #ffffff;
  --cats-canvas: #f3f7fb;
  --cats-success: #07845a;
  --cats-warning: #b86a00;
  --cats-danger: #bd352c;
  --cats-radius: 18px;
  --cats-shadow: 0 12px 36px rgba(14, 49, 87, 0.08);
  color: var(--cats-ink);
  background: var(--cats-canvas);
}

html {
  min-width: 320px;
  background: var(--cats-canvas);
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 0%, rgba(20, 120, 242, 0.08), transparent 32rem),
    var(--cats-canvas);
  color: var(--cats-ink);
}

button,
a,
input,
select,
textarea {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(16, 188, 216, 0.28);
  outline-offset: 2px;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

/* Khung bàn điều hành */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  align-items: start;
}

.app aside.topbar {
  position: sticky;
  inset: 0 auto auto 0;
  z-index: 40;
  width: 256px;
  height: 100vh;
  min-height: 680px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 30% 0%, rgba(16, 188, 216, 0.18), transparent 15rem),
    linear-gradient(180deg, var(--cats-navy-900), var(--cats-navy-950));
  border-right: 1px solid rgba(145, 190, 229, 0.16);
  box-shadow: 14px 0 40px rgba(3, 19, 39, 0.1);
}

.logo {
  width: 100%;
  min-width: 0;
  padding: 0 6px 20px;
  gap: 12px;
  border-bottom: 1px solid rgba(159, 195, 226, 0.16);
}

.logo > span {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  background: linear-gradient(145deg, #28cbe6 0%, #1478f2 68%, #1659cc 100%);
  box-shadow:
    0 10px 28px rgba(12, 121, 224, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.logo > span::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #76f0c1;
  box-shadow: 0 0 0 4px rgba(118, 240, 193, 0.12);
}

.logo b {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.logo small {
  margin-top: 3px;
  color: #87a9c7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.app nav {
  width: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin: 20px 0 14px;
}

.app nav::before {
  content: "KHÔNG GIAN LÀM VIỆC";
  padding: 0 10px 5px;
  color: #6387a7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.app nav a {
  position: relative;
  min-height: 46px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  color: #a9c1d7;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}

.app nav a:hover {
  color: #fff;
  background: rgba(80, 150, 210, 0.1);
  border-color: rgba(126, 177, 219, 0.13);
}

.app nav a.active {
  color: #d9fbff;
  background:
    linear-gradient(90deg, rgba(17, 185, 216, 0.2), rgba(20, 120, 242, 0.15)),
    rgba(22, 75, 119, 0.32);
  border-color: rgba(91, 216, 235, 0.23);
  box-shadow: inset 3px 0 0 #2ed7e9;
}

.app nav a.active::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66e7c0;
  box-shadow: 0 0 0 4px rgba(102, 231, 192, 0.1);
}

.workflowHint {
  width: 100%;
  margin-top: auto;
  padding: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 8px;
  color: #adc7dc;
  border: 1px solid rgba(110, 170, 215, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  white-space: normal;
}

.workflowHint b {
  grid-column: 1 / -1;
  color: #6ce3f2;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workflowHint span {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.45;
}

.staff {
  width: 100%;
  min-width: 0;
  margin: 14px 0 0;
  padding: 14px 4px 10px;
  gap: 10px;
  border-top: 1px solid rgba(159, 195, 226, 0.14);
  border-left: 0;
}

.staff > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background: linear-gradient(145deg, #19b9dc, #1768e8);
  box-shadow: 0 8px 22px rgba(23, 104, 232, 0.28);
}

.staff div {
  min-width: 0;
}

.staff b,
.staff small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff b {
  color: #eefaff;
  font-size: 13px;
}

.staff small {
  color: #7698b5;
  font-size: 11px;
  text-transform: capitalize;
}

.logout {
  width: 100%;
  min-height: 42px;
  border-color: rgba(127, 175, 214, 0.25);
  color: #a8c1d7;
  background: rgba(255, 255, 255, 0.035);
}

.logout:hover {
  color: #fff;
  border-color: rgba(93, 213, 232, 0.45);
  background: rgba(36, 127, 192, 0.12);
}

.workspace {
  width: 100%;
  min-width: 0;
  max-width: 1920px;
  min-height: 100vh;
  padding: 32px clamp(22px, 3vw, 52px) 52px;
  margin: 0 auto;
}

.workspace > header {
  position: relative;
  min-height: 78px;
  margin-bottom: 24px;
  padding: 4px 0 18px;
  align-items: flex-end;
  border-bottom: 1px solid var(--cats-line);
}

.workspace > header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cats-cyan-500), var(--cats-blue-600));
}

.workspace > header small {
  color: #1682b8;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.workspace h1 {
  margin: 6px 0 0;
  color: #09284d;
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.headActions {
  align-items: center;
}

.headActions button,
.save,
.modalActions button {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #167cf2, #0e62d6);
  box-shadow: 0 8px 20px rgba(20, 120, 242, 0.18);
}

.headActions button:hover:not(:disabled),
.save:hover:not(:disabled),
.modalActions button:hover:not(:disabled) {
  box-shadow: 0 11px 25px rgba(20, 120, 242, 0.25);
  transform: translateY(-1px);
}

.headActions .secondary,
.secondary {
  color: #244865 !important;
  border-color: #cfdeeb !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 6px 18px rgba(14, 49, 87, 0.05);
}

.headActions .secondary:hover,
.secondary:hover {
  color: #0d64d8 !important;
  border-color: #96c4ef !important;
  background: #fff !important;
}

/* Số liệu và thẻ */
.stats,
.workSummary {
  gap: 15px;
  margin: 0 0 22px;
}

.stat,
.workSummary > div,
.cats-ci-summary span {
  position: relative;
  min-height: 94px;
  overflow: hidden;
  border: 1px solid rgba(203, 219, 233, 0.9);
  border-radius: var(--cats-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
  box-shadow: var(--cats-shadow);
}

.stat::after,
.workSummary > div::after,
.cats-ci-summary span::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -34px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(20, 120, 242, 0.04);
}

.stat {
  padding: 18px;
}

.stat > span {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 14px;
  font-size: 24px;
}

.stat b {
  color: #153958;
  font-size: 14px;
}

.stat small {
  margin-top: 4px;
  font-size: 11px;
}

.workSummary > div {
  min-height: 96px;
  justify-content: center;
  padding: 17px 19px;
}

.workSummary b {
  color: #0b4f91;
  font-size: 29px;
  line-height: 1;
}

.workSummary small {
  color: #6b7f94;
  font-size: 12px;
}

/* Các vùng dữ liệu */
.mainGrid {
  grid-template-columns: minmax(520px, 0.88fr) minmax(560px, 1.12fr);
  gap: 20px;
}

.panel,
.workPanel,
.itemsPanel,
.cats-av-create,
.cats-av-card,
.cats-av-missing-card,
.cats-ci-account,
.cats-ci-card {
  border-color: rgba(205, 220, 233, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--cats-shadow);
}

.panel {
  overflow: clip;
}

.panelHead,
.detailHead,
.workTitle {
  min-height: 76px;
  padding: 19px 21px;
  border-bottom-color: #e6edf4;
  background:
    linear-gradient(100deg, rgba(244, 250, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.panelHead h2,
.detailHead h2,
.workTitle h2 {
  color: #102f50;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.panelHead p,
.workTitle p {
  color: #73879a;
}

.search,
.itemTools input {
  min-height: 46px;
  border-color: #d3e0eb;
  background: #f7fafc;
  box-shadow: inset 0 1px 2px rgba(10, 43, 72, 0.025);
}

.search:hover,
.itemTools input:hover {
  border-color: #b8cee1;
  background: #fff;
}

.search:focus,
.itemTools input:focus {
  border-color: #1682e8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(20, 120, 242, 0.1);
}

.tr,
.wr,
.ir {
  border-bottom-color: #e8eef4;
}

.tr:not(.th),
.wr:not(.wrh),
.ir:not(.irh) {
  min-height: 66px;
}

.tr:not(.th):hover,
.wr:not(.wrh):hover {
  background: linear-gradient(90deg, #edf7ff, #f8fcff);
}

.tr.selected,
.wr.selected {
  background: linear-gradient(90deg, #e4f3ff, #f6fbff);
  box-shadow: inset 3px 0 0 var(--cats-blue-600);
}

.th,
.wrh,
.irh,
.prh {
  color: #5e748a;
  background: #eef4f9;
  border-bottom: 1px solid #d8e4ee;
  font-size: 11px;
  letter-spacing: 0.055em;
}

.rowOpen b,
.wr b,
.ir b {
  color: #173d60;
}

.stage,
.cats-av-badge,
.cats-av-priority,
.cats-ci-badges span {
  padding: 6px 9px;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.stage {
  color: #1263c2;
  background: #e4f1ff;
}

.s7,
.s8 {
  color: #08734e;
  background: #ddf7e9;
}

.s4,
.s5 {
  color: #7043be;
  background: #eee7ff;
}

.checkAll {
  padding: 8px 10px;
  color: #42627f;
  border: 1px solid #d8e5ef;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.bulkBar,
.draftNotice,
.cats-av-status,
.cats-ci-notice {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(14, 49, 87, 0.04);
}

.bulkBar {
  border-color: #9bd9e8;
  background: linear-gradient(90deg, #e6faff, #eef6ff);
}

.empty,
.emptyDetail,
.workEmpty,
.cats-av-empty,
.cats-ci-empty {
  color: #6f8295;
  background:
    radial-gradient(circle at 50% 25%, rgba(20, 120, 242, 0.06), transparent 12rem),
    #fbfdff;
}

/* Biểu mẫu */
:root select,
.loginForm input,
.fields input,
.search,
textarea,
.editableIr input,
.rowStageSelect,
.cats-av-form input,
.cats-av-form select,
.cats-av-review input,
.cats-av-review select,
.cats-av-missing-review input,
.cats-av-missing-review select,
.cats-av-missing-review textarea,
.cats-ci-review select,
.cats-ci-review input,
.cats-ci-review textarea {
  min-height: 44px;
  color: #173957;
  border-color: #ccdbe7;
  border-radius: 11px;
}

:root select:hover,
input:hover,
textarea:hover {
  border-color: #aec6da;
}

:root select:focus,
input:focus,
textarea:focus {
  border-color: #1682e8;
  box-shadow: 0 0 0 4px rgba(20, 120, 242, 0.1);
}

.eventBox,
.issueCell,
.cats-av-missing-history,
.cats-ci-details,
.cats-ci-history,
.cats-ci-account-details {
  border-color: #dce7f0;
  background: #f7fafc;
}

.save {
  min-height: 48px;
}

/* Khu Kiện chờ nhận diện */
.cats-admin-verification,
.cats-admin-customer-intakes {
  max-width: none;
  padding: 0;
}

.cats-av-head,
.cats-ci-head {
  position: relative;
  min-height: 78px;
  margin-bottom: 24px;
  padding: 4px 0 18px;
  align-items: flex-end;
  border-bottom: 1px solid var(--cats-line);
}

.cats-av-head::after,
.cats-ci-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cats-cyan-500), var(--cats-blue-600));
}

.cats-av-head h1,
.cats-ci-head h1 {
  margin-top: 6px;
  color: #09284d;
  font-size: clamp(28px, 2.2vw, 38px);
  letter-spacing: -0.025em;
}

.cats-av-head small,
.cats-ci-head small,
.cats-av-missing-head small {
  color: #1682b8;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.cats-av-create {
  padding: 22px;
}

.cats-av-create h2 {
  color: #123554;
  font-size: 21px;
}

.cats-av-file {
  padding: 16px;
  border: 1px dashed #a9cde4;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbff, #f8fcff);
}

.cats-av-intake {
  border-radius: 15px;
}

.cats-av-intake-head {
  color: #46637d;
  background: #eaf3fa;
  letter-spacing: 0.03em;
}

.cats-av-grid,
.cats-av-missing-grid {
  gap: 20px;
}

.cats-av-card,
.cats-av-missing-card {
  padding: 20px;
}

.cats-av-card--priority {
  border: 1px solid #31bad2;
  box-shadow:
    0 14px 38px rgba(10, 167, 203, 0.15),
    inset 0 3px 0 #31c7dc;
}

.cats-av-priority {
  color: #006e84;
  background: #dffaff;
}

.cats-av-images img,
.cats-av-evidence img {
  border: 1px solid #d3e1eb;
  box-shadow: 0 5px 14px rgba(14, 49, 87, 0.08);
}

.cats-av-request {
  padding: 14px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #f8fbfd;
}

.cats-av-missing {
  border-top-color: #d5e3ed;
}

.cats-av-btn,
.cats-ci-head button,
.cats-ci-review button {
  min-height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #147cf0, #0d63d8);
  box-shadow: 0 8px 20px rgba(20, 120, 242, 0.16);
}

/* Dữ liệu khách hàng */
.cats-ci-summary {
  gap: 13px;
}

.cats-ci-summary span {
  min-height: 96px;
  justify-content: center;
  padding: 16px 18px;
}

.cats-ci-summary b {
  color: #0b5bab;
  font-size: 28px;
}

.cats-ci-toolbar {
  padding: 12px;
  border-color: #d6e3ed;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(14, 49, 87, 0.05);
}

.cats-ci-filters button {
  min-height: 40px;
  color: #47627b;
  background: #eef3f7;
}

.cats-ci-filters button:hover {
  color: #0d64d8;
  background: #e4f1ff;
}

.cats-ci-filters button.active {
  color: #fff;
  background: linear-gradient(135deg, #147cf0, #0d63d8);
  box-shadow: 0 7px 17px rgba(20, 120, 242, 0.18);
}

.cats-ci-account {
  padding: 20px;
}

.cats-ci-account-title h2,
.cats-ci-card-head h2 {
  color: #0c345c;
}

.cats-ci-account-meta span,
.cats-ci-meta span {
  border-color: #dee8f0;
  background: #f7fafc;
}

.cats-ci-account-details > summary,
.cats-ci-details > summary,
.cats-ci-history > summary,
.cats-av-history summary {
  list-style: none;
}

.cats-ci-account-details > summary::-webkit-details-marker,
.cats-ci-details > summary::-webkit-details-marker,
.cats-ci-history > summary::-webkit-details-marker,
.cats-av-history summary::-webkit-details-marker {
  display: none;
}

.cats-ci-account-details > summary::after,
.cats-ci-details > summary::after,
.cats-ci-history > summary::after,
.cats-av-history summary::after {
  content: "＋";
  float: right;
  color: #1682d8;
}

.cats-ci-account-details[open] > summary::after,
.cats-ci-details[open] > summary::after,
.cats-ci-history[open] > summary::after,
.cats-av-history[open] summary::after {
  content: "−";
}

/* Modal và thông báo */
.modal {
  padding: 28px;
  background: rgba(4, 20, 38, 0.74);
  backdrop-filter: blur(6px);
}

.modal form,
.batchSheet {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(0, 18, 44, 0.3);
}

.modalHead {
  padding-bottom: 15px;
  border-bottom: 1px solid #e5edf4;
}

.toast {
  right: 28px;
  bottom: 28px;
  max-width: min(460px, calc(100vw - 40px));
  padding: 15px 19px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, #07865a, #056a4c);
  box-shadow: 0 16px 42px rgba(0, 63, 44, 0.28);
}

/* Đăng nhập */
.loginBrand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(31, 197, 224, 0.25), transparent 24rem),
    linear-gradient(145deg, #0b3153, #06172e 70%);
}

.loginBrand::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -20vw;
  width: 46vw;
  height: 46vw;
  border: 1px solid rgba(80, 205, 232, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(80, 205, 232, 0.035),
    0 0 0 120px rgba(80, 205, 232, 0.025);
}

.loginBrand > * {
  position: relative;
  z-index: 1;
}

.loginBrand h1 {
  max-width: 690px;
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.045em;
}

.loginForm {
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 120, 242, 0.07), transparent 22rem),
    #fff;
}

.loginForm form {
  padding: 42px;
  border: 1px solid #e0e9f1;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 72px rgba(14, 49, 87, 0.1);
}

.loginForm h2 {
  color: #09284d;
  letter-spacing: -0.035em;
}

.loginForm button {
  min-height: 50px;
  background: linear-gradient(135deg, #147cf0, #0d63d8);
  box-shadow: 0 10px 24px rgba(20, 120, 242, 0.2);
}

/* Chế độ gọn mặc định cho bàn điều hành nhiều dữ liệu */
@media (min-width: 1181px) {
  .app {
    grid-template-columns: 220px minmax(0, 1fr);
    font-size: 13px;
  }

  .app aside.topbar {
    width: 220px;
    min-height: 620px;
    padding: 14px 10px 12px;
  }

  .logo {
    padding: 0 5px 13px;
    gap: 10px;
  }

  .logo > span {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
    font-size: 13px;
  }

  .logo b {
    font-size: 15px;
  }

  .logo small {
    font-size: 9px;
  }

  .app nav {
    gap: 4px;
    margin: 13px 0 8px;
  }

  .app nav::before {
    padding: 0 9px 3px;
    font-size: 8.5px;
  }

  .app nav a {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 12px;
  }

  .workflowHint {
    display: none;
  }

  .staff {
    margin-top: auto;
    padding: 11px 4px 7px;
  }

  .staff > span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .logout {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .workspace {
    padding: 18px 22px 30px;
  }

  .workspace > header,
  .cats-av-head,
  .cats-ci-head {
    min-height: 58px;
    margin-bottom: 14px;
    padding: 0 0 10px;
  }

  .workspace > header::after,
  .cats-av-head::after,
  .cats-ci-head::after {
    width: 54px;
    height: 2px;
  }

  .workspace > header small,
  .cats-av-head small,
  .cats-ci-head small,
  .cats-av-missing-head small {
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .workspace h1,
  .cats-av-head h1,
  .cats-ci-head h1 {
    margin-top: 3px;
    font-size: 27px;
  }

  .workspace > header p,
  .cats-av-head p,
  .cats-ci-head p {
    font-size: 12px;
  }

  .headActions {
    gap: 7px;
  }

  .headActions button,
  .save,
  .modalActions button,
  .cats-av-btn,
  .cats-ci-head button,
  .cats-ci-review button {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 12px;
  }

  .stats,
  .workSummary,
  .cats-ci-summary {
    gap: 8px;
    margin-bottom: 12px;
  }

  .stat,
  .workSummary > div,
  .cats-ci-summary span {
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 13px;
    box-shadow: 0 7px 20px rgba(14, 49, 87, 0.055);
  }

  .stat {
    gap: 10px;
  }

  .stat > span {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
    font-size: 19px;
  }

  .stat b {
    font-size: 12px;
  }

  .stat small {
    display: none;
  }

  .workSummary > div,
  .cats-ci-summary span {
    min-height: 70px;
    gap: 3px;
  }

  .workSummary b,
  .cats-ci-summary b {
    margin: 0;
    font-size: 23px;
  }

  .workSummary small,
  .cats-ci-summary span {
    font-size: 11px;
  }

  .mainGrid {
    grid-template-columns: minmax(480px, 0.92fr) minmax(520px, 1.08fr);
    gap: 12px;
  }

  .panel,
  .workPanel,
  .itemsPanel,
  .cats-av-create,
  .cats-av-card,
  .cats-av-missing-card,
  .cats-ci-account,
  .cats-ci-card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(14, 49, 87, 0.055);
  }

  .panelHead,
  .detailHead,
  .workTitle {
    min-height: 56px;
    padding: 11px 14px;
  }

  .panelHead h2,
  .detailHead h2,
  .workTitle h2 {
    font-size: 17px;
  }

  .panelHead p,
  .workTitle p {
    margin-top: 3px;
    font-size: 11px;
  }

  .checkAll {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 10px;
  }

  .checkAll input,
  .rowCheck input {
    width: 15px;
    height: 15px;
  }

  .search {
    width: calc(100% - 24px);
    min-height: 38px;
    margin: 9px 12px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
  }

  .tr {
    gap: 9px;
    padding: 8px 12px;
  }

  .tr:not(.th),
  .wr:not(.wrh),
  .ir:not(.irh) {
    min-height: 48px;
  }

  .tr b,
  .wr b,
  .ir b {
    font-size: 12px;
  }

  .tr small,
  .wr small,
  .ir small {
    margin-top: 2px;
    font-size: 10px;
  }

  .th,
  .wrh,
  .irh,
  .prh {
    font-size: 9.5px;
  }

  .stage,
  .cats-av-badge,
  .cats-av-priority,
  .cats-ci-badges span {
    padding: 4px 7px;
    font-size: 10px;
  }

  .empty {
    padding: 28px 20px;
  }

  .emptyDetail {
    min-height: 440px;
    padding: 28px;
  }

  .emptyDetail > span {
    font-size: 34px;
  }

  .stepper {
    padding: 10px 8px;
  }

  .stepper button {
    min-width: 70px;
    gap: 4px;
    font-size: 9px;
  }

  .stepper i {
    width: 23px;
    height: 23px;
  }

  .editorTabs {
    padding: 12px 14px;
  }

  .fields {
    gap: 0 9px;
  }

  .loginForm input,
  .fields input,
  :root select,
  textarea,
  .editableIr input,
  .rowStageSelect,
  .cats-av-form input,
  .cats-av-form select,
  .cats-av-review input,
  .cats-av-review select,
  .cats-av-missing-review input,
  .cats-av-missing-review select,
  .cats-av-missing-review textarea,
  .cats-ci-review select,
  .cats-ci-review input,
  .cats-ci-review textarea {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
  }

  .fields label,
  .eventBox label,
  .modal form > label,
  .cats-av-form label,
  .cats-av-review label,
  .cats-ci-review label {
    gap: 4px;
    margin-top: 10px;
    font-size: 11px;
  }

  .eventBox {
    gap: 9px;
    padding: 10px;
    border-radius: 11px;
  }

  .save {
    min-height: 40px;
    margin: 11px 0;
  }

  .timeline > div {
    padding-bottom: 10px;
  }

  .timeline p {
    margin: 3px 0;
  }

  .bulkBar,
  .draftNotice,
  .cats-av-status,
  .cats-ci-notice {
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 11px;
  }

  .workSummary {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }

  .workTitle {
    gap: 8px;
  }

  .wr {
    gap: 9px;
    padding: 8px 12px;
  }

  .ir {
    gap: 9px;
    padding: 8px 12px;
  }

  .itemsPanel {
    margin-top: 12px;
  }

  .itemTools {
    gap: 10px;
    padding: 8px 12px;
  }

  .itemTools input {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .batchHeaderActions,
  .batchStatusEditor {
    gap: 7px;
  }

  .batchStatusEditor {
    padding: 6px;
    border-radius: 9px;
  }

  .batchStatusEditor select,
  .batchStatusEditor input[type="datetime-local"] {
    min-height: 36px;
    padding: 7px 9px;
  }

  .saveWholeBatch {
    min-height: 38px;
    padding: 8px 12px;
  }

  .rowActions button,
  .saveRow {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .cats-av-create {
    padding: 14px;
    margin-bottom: 12px;
  }

  .cats-av-create h2 {
    margin-bottom: 9px;
    font-size: 17px;
  }

  .cats-av-route {
    margin-bottom: 8px;
  }

  .cats-av-file {
    margin-bottom: 9px;
    padding: 10px;
  }

  .cats-av-intake {
    margin: 9px 0;
  }

  .cats-av-intake-head,
  .cats-av-intake-row {
    gap: 7px;
  }

  .cats-av-intake-head {
    padding: 8px 9px;
    font-size: 10px;
  }

  .cats-av-intake-row {
    padding: 7px 9px;
  }

  .cats-av-intake-preview img {
    width: 36px;
    height: 36px;
  }

  .cats-av-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
  }

  .cats-av-card,
  .cats-av-missing-card {
    padding: 12px;
  }

  .cats-av-card h2,
  .cats-av-missing-card h2 {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .cats-av-meta {
    gap: 5px;
    margin: 8px 0;
    font-size: 11px;
  }

  .cats-av-images,
  .cats-av-evidence {
    gap: 5px;
    margin: 7px 0;
  }

  .cats-av-images img,
  .cats-av-evidence img {
    width: 70px;
    height: 56px;
    border-radius: 7px;
  }

  .cats-av-request {
    margin-top: 8px;
    padding: 9px;
  }

  .cats-av-request h3 {
    font-size: 13px;
  }

  .cats-av-request p {
    margin: 3px 0;
    font-size: 11px;
  }

  .cats-av-review {
    gap: 6px;
    margin-top: 7px;
  }

  .cats-av-history {
    margin-top: 8px;
    padding-top: 7px;
  }

  .cats-av-missing {
    margin-top: 18px;
    padding-top: 15px;
  }

  .cats-av-missing-head {
    margin-bottom: 10px;
  }

  .cats-av-missing-head h2 {
    margin: 3px 0;
    font-size: 20px;
  }

  .cats-av-missing-grid {
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 10px;
  }

  .cats-ci-summary {
    grid-template-columns: repeat(6, minmax(105px, 1fr));
  }

  .cats-ci-toolbar {
    gap: 8px;
    margin-bottom: 8px;
    padding: 7px;
    border-radius: 11px;
  }

  .cats-ci-filters {
    gap: 4px;
  }

  .cats-ci-filters button {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 10px;
  }

  .cats-ci-toolbar input {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .cats-ci-grid,
  .cats-ci-account-requests {
    gap: 9px;
  }

  .cats-ci-account,
  .cats-ci-card {
    padding: 12px;
  }

  .cats-ci-account-head,
  .cats-ci-card-head {
    gap: 10px;
  }

  .cats-ci-account-title h2,
  .cats-ci-card-head h2 {
    margin: 3px 0;
    font-size: 17px;
  }

  .cats-ci-account-title p,
  .cats-ci-card-head p {
    font-size: 11px;
  }

  .cats-ci-account-meta,
  .cats-ci-meta {
    gap: 6px;
    margin: 8px 0;
  }

  .cats-ci-account-meta span,
  .cats-ci-meta span {
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 11px;
  }

  .cats-ci-account-details > summary,
  .cats-ci-details > summary,
  .cats-ci-history > summary {
    padding: 8px 10px;
    font-size: 11px;
  }

  .cats-ci-account-requests {
    padding: 9px;
  }

  .cats-ci-review {
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* Siêu gọn: tối đa diện tích theo dõi hàng hóa trên máy tính */
@media (min-width: 1181px) {
  .app {
    grid-template-columns: 192px minmax(0, 1fr);
    font-size: 12px;
  }

  .app aside.topbar {
    width: 192px;
    padding: 10px 8px;
  }

  .logo {
    padding: 0 4px 9px;
  }

  .logo > span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    font-size: 11px;
  }

  .logo > span::after {
    right: 5px;
    top: 5px;
    width: 5px;
    height: 5px;
  }

  .logo b {
    font-size: 13px;
  }

  .logo small {
    margin-top: 1px;
    font-size: 8px;
  }

  .app nav {
    margin: 9px 0 6px;
  }

  .app nav::before {
    display: none;
  }

  .app nav a {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 10.5px;
  }

  .app nav a.active::after {
    right: 9px;
    width: 5px;
    height: 5px;
  }

  .staff {
    gap: 7px;
    padding: 8px 3px 5px;
  }

  .staff > span {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 11px;
  }

  .staff b {
    font-size: 10.5px;
  }

  .staff small {
    font-size: 9px;
  }

  .logout {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 10.5px;
  }

  .workspace {
    padding: 10px 12px 20px;
  }

  .workspace > header,
  .cats-av-head,
  .cats-ci-head {
    min-height: 44px;
    margin-bottom: 8px;
    padding-bottom: 7px;
  }

  .workspace > header small,
  .workspace > header p,
  .cats-av-head small,
  .cats-av-head p,
  .cats-ci-head small,
  .cats-ci-head p {
    display: none;
  }

  .workspace h1,
  .cats-av-head h1,
  .cats-ci-head h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
  }

  .workspace > header::after,
  .cats-av-head::after,
  .cats-ci-head::after {
    width: 42px;
  }

  .headActions button,
  .save,
  .modalActions button,
  .cats-av-btn,
  .cats-ci-head button,
  .cats-ci-review button {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 10.5px;
  }

  .stats,
  .workSummary,
  .cats-ci-summary {
    gap: 6px;
    margin-bottom: 7px;
  }

  .stat,
  .workSummary > div,
  .cats-ci-summary span {
    min-height: 56px;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .stat {
    gap: 7px;
  }

  .stat > span {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
    font-size: 15px;
  }

  .stat b {
    font-size: 10.5px;
  }

  .workSummary > div,
  .cats-ci-summary span {
    min-height: 54px;
    padding: 7px 10px;
  }

  .workSummary b,
  .cats-ci-summary b {
    font-size: 19px;
  }

  .workSummary small,
  .cats-ci-summary span {
    font-size: 9.5px;
  }

  .mainGrid {
    grid-template-columns: minmax(460px, 0.94fr) minmax(500px, 1.06fr);
    gap: 7px;
  }

  .panel,
  .workPanel,
  .itemsPanel,
  .cats-av-create,
  .cats-av-card,
  .cats-av-missing-card,
  .cats-ci-account,
  .cats-ci-card {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(14, 49, 87, 0.045);
  }

  .panelHead,
  .detailHead,
  .workTitle {
    min-height: 44px;
    padding: 8px 10px;
  }

  .panelHead h2,
  .detailHead h2,
  .workTitle h2 {
    font-size: 14px;
  }

  .panelHead p,
  .workTitle p {
    display: none;
  }

  .checkAll {
    padding: 5px 7px;
    font-size: 9px;
  }

  .search {
    width: calc(100% - 16px);
    min-height: 34px;
    margin: 6px 8px;
    padding: 7px 9px;
    font-size: 10.5px;
  }

  .tr {
    gap: 7px;
    padding: 6px 8px;
  }

  .tr:not(.th),
  .wr:not(.wrh),
  .ir:not(.irh) {
    min-height: 40px;
  }

  .tr b,
  .wr b,
  .ir b {
    font-size: 10.5px;
  }

  .tr small,
  .wr small,
  .ir small {
    font-size: 9px;
  }

  .th,
  .wrh,
  .irh,
  .prh {
    font-size: 8.5px;
  }

  .stage,
  .cats-av-badge,
  .cats-av-priority,
  .cats-ci-badges span {
    padding: 3px 6px;
    font-size: 9px;
  }

  .emptyDetail {
    min-height: 330px;
  }

  .stepper {
    padding: 7px 5px;
  }

  .stepper button {
    min-width: 62px;
    font-size: 8px;
  }

  .stepper i {
    width: 20px;
    height: 20px;
  }

  .editorTabs {
    padding: 8px 10px;
  }

  .fields label,
  .eventBox label,
  .modal form > label,
  .cats-av-form label,
  .cats-av-review label,
  .cats-ci-review label {
    margin-top: 7px;
    font-size: 10px;
  }

  .loginForm input,
  .fields input,
  :root select,
  textarea,
  .editableIr input,
  .rowStageSelect,
  .cats-av-form input,
  .cats-av-form select,
  .cats-av-review input,
  .cats-av-review select,
  .cats-av-missing-review input,
  .cats-av-missing-review select,
  .cats-av-missing-review textarea,
  .cats-ci-review select,
  .cats-ci-review input,
  .cats-ci-review textarea {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .eventBox {
    gap: 6px;
    padding: 7px;
  }

  .save {
    margin: 7px 0;
  }

  .bulkBar,
  .draftNotice,
  .cats-av-status,
  .cats-ci-notice {
    margin-bottom: 7px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .workSummary {
    grid-template-columns: repeat(5, minmax(105px, 1fr));
  }

  .workTitle {
    gap: 5px;
  }

  .wr,
  .ir {
    gap: 7px;
    padding: 6px 8px;
  }

  .itemsPanel {
    margin-top: 7px;
  }

  .itemTools {
    gap: 7px;
    padding: 6px 8px;
  }

  .itemTools input {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 10.5px;
  }

  .batchHeaderActions,
  .batchStatusEditor {
    gap: 5px;
  }

  .batchStatusEditor {
    padding: 5px;
  }

  .batchActionPicker,
  .batchStatusEditor label {
    font-size: 9px;
  }

  .batchStatusEditor select,
  .batchStatusEditor input[type="datetime-local"] {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .saveWholeBatch,
  .rowActions button,
  .saveRow {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 9.5px;
  }

  .cats-av-create {
    padding: 9px;
    margin-bottom: 7px;
  }

  .cats-av-create h2 {
    margin-bottom: 6px;
    font-size: 14px;
  }

  .cats-av-form {
    display: grid;
    grid-template-columns: 180px minmax(300px, 1fr) auto;
    gap: 6px;
    align-items: end;
  }

  .cats-av-route,
  .cats-av-file {
    margin: 0;
  }

  .cats-av-file {
    padding: 6px 8px;
  }

  .cats-av-file small,
  .cats-av-route small {
    display: none;
  }

  .cats-av-intake {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 2px 0 0;
  }

  .cats-av-submit {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .cats-av-intake-head,
  .cats-av-intake-row {
    gap: 5px;
  }

  .cats-av-intake-head {
    padding: 6px 7px;
    font-size: 9px;
  }

  .cats-av-intake-row {
    padding: 5px 7px;
  }

  .cats-av-intake-preview img {
    width: 32px;
    height: 32px;
  }

  .cats-av-intake-more {
    flex-basis: 32px;
    height: 32px;
  }

  .cats-av-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 7px;
  }

  .cats-av-card,
  .cats-av-missing-card {
    padding: 9px;
  }

  .cats-av-card h2,
  .cats-av-missing-card h2 {
    margin-bottom: 5px;
    font-size: 14px;
  }

  .cats-av-meta {
    gap: 3px;
    margin: 5px 0;
    font-size: 9.5px;
  }

  .cats-av-images,
  .cats-av-evidence {
    gap: 4px;
    margin: 5px 0;
  }

  .cats-av-images img,
  .cats-av-evidence img {
    width: 58px;
    height: 46px;
  }

  .cats-av-request {
    margin-top: 5px;
    padding: 7px;
  }

  .cats-av-request h3 {
    font-size: 11px;
  }

  .cats-av-request p {
    font-size: 9.5px;
  }

  .cats-av-review {
    gap: 4px;
    margin-top: 5px;
  }

  .cats-av-history {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 9.5px;
  }

  .cats-av-missing {
    margin-top: 10px;
    padding-top: 9px;
  }

  .cats-av-missing-head {
    margin-bottom: 7px;
  }

  .cats-av-missing-head h2 {
    font-size: 16px;
  }

  .cats-av-missing-head p {
    display: none;
  }

  .cats-av-missing-grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 7px;
  }

  .cats-ci-summary {
    grid-template-columns: repeat(6, minmax(90px, 1fr));
  }

  .cats-ci-toolbar {
    margin-bottom: 6px;
    padding: 5px;
  }

  .cats-ci-filters button {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .cats-ci-toolbar input {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .cats-ci-grid,
  .cats-ci-account-requests {
    gap: 6px;
  }

  .cats-ci-account,
  .cats-ci-card {
    padding: 9px;
  }

  .cats-ci-account-title h2,
  .cats-ci-card-head h2 {
    font-size: 14px;
  }

  .cats-ci-account-title p,
  .cats-ci-card-head p {
    display: none;
  }

  .cats-ci-account-meta,
  .cats-ci-meta {
    gap: 4px;
    margin: 5px 0;
  }

  .cats-ci-account-meta span,
  .cats-ci-meta span {
    padding: 5px 6px;
    font-size: 9.5px;
  }

  .cats-ci-account-details > summary,
  .cats-ci-details > summary,
  .cats-ci-history > summary {
    padding: 6px 8px;
    font-size: 10px;
  }

  .cats-ci-account-requests {
    padding: 6px;
  }

  .cats-ci-message {
    padding: 7px 8px;
    font-size: 10px;
  }

  .cats-ci-review {
    gap: 4px;
    margin-top: 5px;
    padding-top: 5px;
  }
}

/* Tối ưu toàn bộ bảng dữ liệu lớn */
.table,
.workTable,
.itemTable,
.previewTable,
.cats-av-intake {
  scrollbar-width: thin;
  scrollbar-color: #7f9db7 #e8eff5;
}

.table::-webkit-scrollbar,
.workTable::-webkit-scrollbar,
.itemTable::-webkit-scrollbar,
.previewTable::-webkit-scrollbar,
.cats-av-intake::-webkit-scrollbar,
.topHorizontalScroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.table::-webkit-scrollbar-track,
.workTable::-webkit-scrollbar-track,
.itemTable::-webkit-scrollbar-track,
.previewTable::-webkit-scrollbar-track,
.cats-av-intake::-webkit-scrollbar-track,
.topHorizontalScroll::-webkit-scrollbar-track {
  background: #e8eff5;
}

.table::-webkit-scrollbar-thumb,
.workTable::-webkit-scrollbar-thumb,
.itemTable::-webkit-scrollbar-thumb,
.previewTable::-webkit-scrollbar-thumb,
.cats-av-intake::-webkit-scrollbar-thumb,
.topHorizontalScroll::-webkit-scrollbar-thumb {
  border: 2px solid #e8eff5;
  border-radius: 999px;
  background: #7f9db7;
}

.table::-webkit-scrollbar-thumb:hover,
.workTable::-webkit-scrollbar-thumb:hover,
.itemTable::-webkit-scrollbar-thumb:hover,
.previewTable::-webkit-scrollbar-thumb:hover,
.cats-av-intake::-webkit-scrollbar-thumb:hover,
.topHorizontalScroll::-webkit-scrollbar-thumb:hover {
  background: #4c789d;
}

.th,
.wrh,
.irh,
.prh,
.cats-av-intake-head {
  position: sticky;
  top: 0;
  z-index: 7;
  box-shadow: 0 1px 0 #cedce8;
}

.tr:not(.th):nth-child(odd),
.wr:not(.wrh):nth-child(odd),
.ir:not(.irh):nth-child(odd),
.pr:not(.prh):nth-child(odd),
.cats-av-intake-row:nth-child(odd) {
  background: #fbfdff;
}

.tr:not(.th):hover,
.wr:not(.wrh):hover,
.ir:not(.irh):hover,
.pr:not(.prh):hover,
.cats-av-intake-row:hover {
  background: #edf7ff;
}

.tr b,
.tr small,
.wr b,
.wr small,
.ir > span b,
.ir > span small,
.pr > span,
.cats-av-intake-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topHorizontalScroll {
  height: 12px;
  border: 1px solid #d6e2ec;
  border-width: 1px 0;
  background: #edf3f8;
}

@media (min-width: 1181px) {
  .table {
    max-height: calc(100vh - 178px);
    overflow: auto;
  }

  .workTable {
    max-height: 230px;
    overflow: auto;
  }

  .itemTable {
    max-height: calc(100vh - 225px);
    overflow: auto !important;
  }

  .previewTable {
    max-height: min(420px, 52vh);
  }

  .wr {
    min-width: 900px;
    grid-template-columns:
      150px
      115px
      minmax(160px, 1.35fr)
      58px
      112px
      125px
      95px;
    gap: 6px;
    padding: 6px 8px;
  }

  .wr > span:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    padding: 4px 6px;
    border-right: 1px solid #dce7ef;
    background: inherit;
    box-shadow: 6px 0 9px -10px #163b5c;
  }

  .wrh > span:first-child {
    z-index: 9;
    background: #eef4f9;
  }

  .ir {
    min-width: 1240px;
    grid-template-columns:
      128px
      112px
      145px
      68px
      100px
      142px
      145px
      minmax(190px, 1fr)
      96px;
    gap: 6px;
    padding: 5px 8px;
  }

  .ir > :first-child,
  .ir > :nth-child(2) {
    position: sticky;
    z-index: 4;
    background: #fff;
  }

  .ir > :first-child {
    left: 0;
    align-self: stretch;
    justify-content: center;
    padding: 3px 6px;
    border-right: 1px solid #dce7ef;
  }

  .ir > :nth-child(2) {
    left: 136px;
    box-shadow: 8px 0 10px -10px #163b5c;
  }

  .ir:nth-child(odd) > :first-child,
  .ir:nth-child(odd) > :nth-child(2) {
    background: #fbfdff;
  }

  .ir:hover > :first-child,
  .ir:hover > :nth-child(2) {
    background: #edf7ff;
  }

  .irh > :first-child,
  .irh > :nth-child(2) {
    z-index: 10;
    background: #eef4f9 !important;
  }

  .editableIr input,
  .rowStageSelect {
    height: 32px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 10.5px;
  }

  .issueCell {
    gap: 3px;
    min-height: 36px;
    padding: 3px 5px;
    border-radius: 7px;
  }

  .issueCell > input {
    min-height: 24px;
    padding: 2px;
  }

  .issueCell > span {
    gap: 4px;
    font-size: 8.5px;
  }

  .rowActions {
    gap: 3px;
  }

  .rowActions button {
    min-width: 42px;
    min-height: 31px;
    padding: 5px 6px;
  }

  .pr {
    min-width: 1100px;
    grid-template-columns:
      42px
      115px
      95px
      135px
      68px
      110px
      92px
      145px
      minmax(190px, 1fr)
      32px;
    gap: 5px;
    padding: 5px 8px;
  }

  .pr > :first-child,
  .pr > :nth-child(2) {
    position: sticky;
    z-index: 4;
    background: #fff;
  }

  .pr > :first-child {
    left: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-right: 1px solid #dce7ef;
  }

  .pr > :nth-child(2) {
    left: 50px;
    box-shadow: 8px 0 10px -10px #163b5c;
  }

  .pr:nth-child(odd) > :first-child,
  .pr:nth-child(odd) > :nth-child(2) {
    background: #fbfdff;
  }

  .pr.invalid > :first-child,
  .pr.invalid > :nth-child(2) {
    background: #fff6f6;
  }

  .prh > :first-child,
  .prh > :nth-child(2) {
    z-index: 10;
    background: #eef4f9 !important;
  }

  .pr input,
  .pr select {
    height: 32px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 10.5px;
  }

  .cats-av-intake {
    max-height: 410px;
    overflow: auto;
  }

  .cats-av-intake-head,
  .cats-av-intake-row {
    min-width: 870px;
    grid-template-columns:
      128px
      82px
      108px
      125px
      82px
      minmax(120px, 1fr)
      32px;
  }

  .cats-av-intake-row input {
    height: 32px;
    min-height: 32px;
    padding: 5px 7px;
  }
}

/* Màn hình vừa: thanh điều hướng ngang, vùng làm việc vẫn rộng */
@media (max-width: 1180px) {
  .app {
    display: flex;
    flex-direction: column;
  }

  .app aside.topbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    min-height: 70px;
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(145, 190, 229, 0.16);
    box-shadow: 0 10px 28px rgba(3, 19, 39, 0.12);
  }

  .logo {
    width: auto;
    min-width: 150px;
    padding: 0;
    border: 0;
  }

  .app nav {
    width: auto;
    margin: 0;
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .app nav::before {
    display: none;
  }

  .app nav a {
    min-height: 44px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .app nav a.active {
    box-shadow: inset 0 -3px 0 #2ed7e9;
  }

  .app nav a.active::after {
    display: none;
  }

  .workflowHint {
    width: auto;
    min-width: 198px;
    margin: 0;
    padding: 9px 11px;
  }

  .staff {
    width: auto;
    min-width: 150px;
    margin: 0 0 0 auto;
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 1px solid rgba(159, 195, 226, 0.16);
  }

  .logout {
    width: auto;
    min-width: max-content;
  }

  .workspace {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .workspace {
    padding: 22px 18px 38px;
  }

  .workspace > header,
  .cats-av-head,
  .cats-ci-head {
    align-items: flex-start;
  }

  .mainGrid {
    grid-template-columns: 1fr;
  }

  .cats-admin-verification,
  .cats-admin-customer-intakes {
    padding: 0;
  }
}

@media (max-width: 760px) {
  .app aside.topbar {
    min-height: 62px;
    padding: 8px 10px;
  }

  .logo {
    min-width: 46px;
  }

  .logo > span {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .app nav a {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 12px;
  }

  .workspace > header {
    gap: 14px;
  }

  .headActions {
    width: 100%;
  }

  .headActions button {
    flex: 1 1 auto;
  }

  .stats,
  .workSummary {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat,
  .workSummary > div {
    min-height: 88px;
    padding: 13px;
  }

  .stat > span {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 20px;
  }

  .panelHead,
  .detailHead,
  .workTitle {
    padding: 16px;
  }

  .cats-av-create,
  .cats-av-card,
  .cats-av-missing-card,
  .cats-ci-account,
  .cats-ci-card {
    padding: 16px;
  }

  .loginForm form {
    width: min(520px, calc(100% - 28px));
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}