:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --border: #e2e6ec;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --sidebar-bg: #111827;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #2563eb;
  --radius: 8px;
  /* Token bóng đổ + easing dùng chung cho toàn bộ hiệu ứng hover/animation trong app. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.16);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef1f6 100%) fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; }

/* Thanh cuộn mảnh, bo tròn - đồng bộ cho cả trang lẫn các khối cuộn ngang (table-wrap). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #c3cbd6; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #98a3b3; background-clip: padding-box; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0f172a 0%, #161f31 60%, #101827 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 10;
}
.sidebar .brand {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding: 0 20px 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}
.sidebar .brand small { display: block; font-weight: 400; color: #94a3b8; font-size: 11px; margin-top: 2px; }
.sidebar nav { flex: 1; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 2px 10px;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; transform: translateX(2px); }
.sidebar nav a.active {
  background: linear-gradient(90deg, var(--sidebar-active), #3b82f6);
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.sidebar .lan-box {
  margin: 8px 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #374151;
  border-radius: 8px;
  font-size: 11px;
}
.sidebar .lan-box-label { color: #94a3b8; margin-bottom: 4px; }
.sidebar .lan-box-url { color: #e5e7eb; font-family: Consolas, monospace; word-break: break-all; line-height: 1.5; }
.sidebar .user-box {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
}
.sidebar .user-box .name { color: #fff; font-weight: 600; }
.sidebar .user-box .role { color: #94a3b8; }
.sidebar .user-box form { margin-top: 8px; }
.sidebar .user-box button {
  background: transparent;
  border: 1px solid #374151;
  color: #cbd5e1;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar .user-box button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: #4b5563; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 4px 10px rgba(15, 23, 42, 0.03);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar h1 { font-size: 18px; margin: 0; }
.content { padding: 24px; flex: 1; }

/* Nút thu gọn/hiện lại sidebar trên màn hình rộng (bảng cần rộng hơn) - độc lập với nav-toggle
   (chỉ dành cho drawer trượt ra trên mobile ở khối @media (max-width: 800px) bên dưới). Mặc định
   ẩn cả 2 nút ở đây, chỉ bật lại trong @media (min-width: 801px) để không đụng tới hành vi mobile
   sẵn có (sidebar mobile vốn đã ẩn theo transform, không cần nút thu gọn riêng). */
.sidebar-collapse-btn { display: none; }
.sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  /* Cao hơn .topbar (z-index:30, position:sticky) - khi sidebar bị ẩn, .topbar chiếm full chiều
     rộng đè lên đúng góc trái này nên nút phải nổi cao hơn mới bấm được. */
  z-index: 40;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  border: 1px solid #1f2937;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  transition: background-color .15s ease;
}
.sidebar-expand-btn:hover { background: #1f2937; }

@media (min-width: 801px) {
  .sidebar .brand { padding-right: 40px; }
  .sidebar-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .15s ease, color .15s ease;
  }
  .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  html.sidebar-collapsed .sidebar { display: none; }
  html.sidebar-collapsed .sidebar-expand-btn { display: flex; }
  /* Sidebar ẩn thì .topbar chiếm full chiều rộng, đè lên đúng chỗ nút "hiện lại" nổi góc trái -
     chừa chỗ bằng padding-left để tiêu đề trang không bị nút che mất. */
  html.sidebar-collapsed .topbar { padding-left: 64px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease;
}
.nav-toggle:hover { background: #f3f4f6; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
}
.sidebar-overlay.show { display: block; }
body.no-scroll { overflow: hidden; }

.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13.5px;
  border-left: 4px solid;
  box-shadow: var(--shadow-sm);
  animation: flashIn .3s var(--ease) both;
}
.flash.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-left: 4px solid #10b981; }
.flash.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-left: 4px solid #ef4444; }

.cards-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 180px;
  flex: 1;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  animation: statFadeIn .4s var(--ease) both;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
}
.stat-card:has(.value.warn)::before { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cards-row .stat-card:nth-child(1) { animation-delay: .02s; }
.cards-row .stat-card:nth-child(2) { animation-delay: .08s; }
.cards-row .stat-card:nth-child(3) { animation-delay: .14s; }
.cards-row .stat-card:nth-child(4) { animation-delay: .20s; }
.stat-card .label { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.stat-card .value { font-size: 26px; font-weight: 700; }
.stat-card .value.warn { color: var(--warning); }
.stat-card .sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.stat-card-hero { width: 100%; }
.stat-card-hero .label { font-size: 14px; }
.stat-card-hero .value { font-size: 34px; }
.stat-card-hero::before { background: linear-gradient(90deg, var(--primary), #34d399); }

/* Biến thể thấp hơn (khoảng 1/3 chiều cao mặc định) cho các bảng báo cáo có nhiều dòng, nhãn và
   số hiển thị chung trên 1 dòng thay vì xếp chồng - chỉ áp dụng khi div cha có thêm class
   .cards-row-compact, không ảnh hưởng tới .stat-card ở Tổng quan/Đối soát vận đơn. */
.cards-row-compact { gap: 10px; }
.cards-row-compact .stat-card { padding: 7px 14px; min-width: 160px; display: flex; align-items: baseline; gap: 8px; }
.cards-row-compact .stat-card .label { font-size: 12px; margin-bottom: 0; white-space: nowrap; }
.cards-row-compact .stat-card .value { font-size: 15px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.panel:hover { box-shadow: var(--shadow-md); }
.panel h2 { font-size: 15px; margin: 0 0 16px 0; padding-bottom: 10px; position: relative; }
.panel h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), #93c5fd);
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Panel màu nhấn (vàng nhạt) - dùng riêng cho khối "Xuất kho bảo hành"
   để nổi bật, không đụng đến .panel dùng chung toàn app. */
.panel-accent { background: #eff6ff; border-color: #93c5fd; }

/* Panel ẩn/hiện theo URL fragment: dùng cho các khối "Thêm mới" mặc định ẩn,
   chỉ hiện khi bấm nút "+ Thêm..." (link có #id) hoặc đang sửa 1 dòng (link Sửa
   cũng có cùng #id). Trang tự set display:none sẵn cho khối này qua inline style;
   quy tắc :target dưới đây (có !important) sẽ thắng inline style khi khớp fragment. */
.panel-collapsible:target { display: block !important; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.toolbar .search-form { display: flex; gap: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* Bảng có cột độ rộng cố định (vd: Danh sách đại lý) - dùng cùng <colgroup> để ép cột
   hẹp/rộng theo ý, chữ dài tự xuống dòng thay vì đẩy rộng cột. */
.table-fixed { table-layout: fixed; }
.table-fixed td, .table-fixed th { word-break: break-word; overflow-wrap: break-word; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--border); }
td { transition: background-color .12s ease; }
tr:hover td { background: #fafbfc; }
/* "Đóng khung" bảng: giới hạn chiều cao tối đa, cuộn dọc CÙNG cuộn ngang bên trong khung
   này - để thanh cuộn ngang luôn nằm ngay dưới khung (dễ kéo), thay vì phải cuộn hết
   xuống cuối bảng (có khi rất dài) mới thấy thanh cuộn ngang ở tít dưới trang. Áp dụng
   chung cho mọi bảng trong app vì đây là cải thiện dùng chung, không phải riêng 1 trang. */
.table-wrap { overflow: auto; border-radius: 10px; max-height: 65vh; }
.empty-row td { text-align: center; color: var(--muted); padding: 24px; }

/* Tiêu đề bảng dính lại khi cuộn dọc bên trong khung ở trên - luôn thấy tên cột. Chỉ áp
   dụng cho DÒNG ĐẦU của thead - 1 số bảng có thêm dòng lọc (.filter-row) là dòng thứ 2
   trong thead, cố tình KHÔNG dính theo để tránh đè lên dòng tiêu đề (2 dòng cùng dính
   top:0 sẽ chồng lên nhau). */
.table-wrap thead tr:first-child th { position: sticky; top: 0; z-index: 1; background: #f8fafc; }

/* Cột "Thao tác" ghim cố định bên phải khi bảng phải cuộn ngang (bảng nhiều cột,
   vd Báo cáo đơn đại lý) - luôn thấy được nút Sửa/Xóa dù đã cuộn sang phải. */
.table-fixed .col-sticky-actions { position: sticky; right: 0; background: var(--panel); box-shadow: -6px 0 6px -6px rgba(15, 23, 42, 0.18); }
.table-fixed tr:hover .col-sticky-actions { background: #fafbfc; }
/* Ô góc (vừa dính trên vừa dính phải) cần z-index cao nhất để luôn nổi trên cả 2 hướng cuộn. */
.table-wrap thead tr:first-child th.col-sticky-actions { z-index: 2; background: #f8fafc; }

/* Ghi chú nhỏ dưới Mã vận đơn báo trạng thái dòng tiền vận chuyển đã đối soát về hay chưa. */
.micro-note { font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.micro-note.ok { color: var(--success); }
.micro-note.pending { color: var(--danger); }
.micro-note.partial { color: #7c3aed; }

/* Hàng lọc theo cột ngay dưới tiêu đề bảng (vd: Danh sách đại lý). */
.filter-row th { padding: 3px 6px !important; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: nowrap; word-break: normal; overflow-wrap: normal; vertical-align: middle; }
.filter-row .btn { white-space: nowrap; padding: 2px 8px; font-size: 12px; line-height: 1.5; }
.filter-row select {
  width: 100%;
  padding: 3px 6px;
  line-height: 1.4;
  font-size: 12.5px;
  border: 1.5px solid #b6bfcc;
  border-radius: 6px;
  background: #fff;
}
.filter-row select:focus { outline: none; border-color: var(--primary); }

/* Ô lọc theo cột: viền đậm hơn ô input thường để dễ thấy, kính lúp nằm gọn bên trong ô. */
.col-filter {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 1.5px solid #b6bfcc;
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.col-filter:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.col-filter input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 6px 2px 6px 8px;
  font-size: 12.5px;
}
.col-filter input:focus { outline: none; }
.col-filter .btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 5px 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
  box-shadow: none;
}
.col-filter .btn:hover { background: #eef2f7; color: var(--primary); transform: none; box-shadow: none; }

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #f3f4f6; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), #1e40af); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38); }
.btn-danger { background: #fff; color: var(--danger); border-color: #fca5a5; }
.btn-danger:hover { background: #fef2f2; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.18); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; }

/* Menu thao tác dạng dropdown (.actions-dropdown > .actions-menu-btn + .actions-menu) - gom các
   nút Sửa/Xóa/... trong 1 dòng bảng vào 1 nút bấm. .actions-menu dùng position:fixed nên
   không bị .table-wrap{overflow-x:auto} cắt mất phần tràn ra ngoài; vị trí được tính bằng JS lúc
   mở (xem public/js/app.js), lúc mở cũng được "portal" ra <body> để thoát khỏi stacking context
   riêng của cột ghim (.col-sticky-actions{position:sticky}). Hiệu ứng mờ dần + phóng nhẹ khi mở
   dùng class .menu-visible do JS thêm sau khi đã tính xong vị trí (xem app.js). */
.actions-dropdown { position: relative; display: inline-block; }
.actions-menu-btn::after { content: ' \25BE'; }
.actions-menu {
  position: fixed;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 200;
  opacity: 0;
  transform: scale(.96) translateY(-6px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.actions-menu.menu-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.actions-menu[hidden] { display: none; }
.actions-menu a, .actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease;
}
.actions-menu a:hover, .actions-menu button:hover { background: #f3f4f6; text-decoration: none; }
.actions-menu button.danger, .actions-menu a.danger { color: var(--danger); }
.actions-menu form { margin: 0; }

form.inline { display: inline; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.form-grid.one-col { grid-template-columns: 1fr; }

/* Form gọn: các ô rộng vừa đủ nội dung (đặt qua style="width:Npx" trên từng .field)
   thay vì kéo dài hết nửa hàng như .form-grid 2 cột thường - dùng cho các form có
   nhiều trường ngắn (vd: Thêm đơn hàng đại lý). */
.form-grid-compact { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.form-grid-compact .field { flex: 0 0 auto; }
.form-grid-compact .field.full { flex: 1 1 260px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 11.5px; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=email], input[type=tel], select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field > input, .field > select, .field > textarea { width: 100%; }
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
input[readonly] { background: #f4f6f9; color: var(--muted); cursor: default; }
input[readonly]:focus { box-shadow: none; border-color: var(--border); }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.badge-gray { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
.badge-blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.badge-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
.badge-yellow { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.badge-red { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }

/* Ô vuông màu nhỏ trước tên phòng ban trong bảng "Quản lý phòng ban" - xem trước màu sẽ hiển thị
   trên sơ đồ tổ chức ở trang đăng nhập (views/departments.js, views/login.js). */
.dept-color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111827, #1e3a8a, #1d4ed8);
  background-size: 200% 200%;
  animation: gradientShift 14s ease infinite;
}
.login-box {
  background: #fff;
  border-radius: 14px;
  padding: 36px 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  animation: loginPop .45s var(--ease) both;
}
.login-box h1 { font-size: 19px; margin: 0 0 4px 0; }
.login-box p.sub { color: var(--muted); margin: 0 0 22px 0; font-size: 13px; }
.login-box .field { margin-bottom: 14px; }
.login-box button { width: 100%; padding: 10px; font-size: 14px; margin-top: 6px; }

.help-text { color: var(--muted); font-size: 12.5px; margin-top: -8px; margin-bottom: 14px; }

.kanban { display: flex; gap: 16px; align-items: flex-start; }
.kanban-col { flex: 1; min-width: 0; background: linear-gradient(180deg, #f8fafc, #eef2f7); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.kanban-col h3 { font-size: 13px; margin: 0 0 10px 0; display: flex; justify-content: space-between; color: var(--muted); }
.kanban-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 13px; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kanban-card .title { font-weight: 600; margin-bottom: 6px; }
.kanban-card .meta { color: var(--muted); font-size: 11.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap;}

.pagetabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; background: linear-gradient(135deg, #7f1d1d, #991b1b); border-bottom: 1px solid #7f1d1d; border-radius: 10px; padding: 8px; box-shadow: 0 6px 16px rgba(127, 29, 29, 0.25); }
.pagetabs a { padding: 9px 16px; font-size: 13px; color: #fecaca; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; text-align: center; white-space: nowrap; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.pagetabs a.active { color: #7f1d1d; background: #fff; border-color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); }
.pagetabs a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.18); }
.pagetabs a.active:hover { color: #7f1d1d; background: #fff; }

/* Màn hình rất hẹp (VD máy quét mã vạch cầm tay ~360-400px): mỗi tab chiếm khoảng 1/2-1/3
   chiều rộng thay vì co theo độ dài nhãn, để luôn xếp thành hàng 2-3 nút đều đặn, dễ bấm. */
@media (max-width: 480px) {
  .pagetabs { gap: 5px; padding: 6px; }
  .pagetabs a { flex: 1 1 30%; padding: 8px 6px; font-size: 12px; white-space: normal; }
}

/* Thu gọn chiều dọc (~30%) các trường trong 1 dòng sản phẩm của phiếu xuất kho
   bảo hành - chỉ áp dụng trong .phieu-row, không đụng .form-grid/.field dùng
   chung toàn app. */
.phieu-row { padding: 8px 12px; margin-bottom: 7px; background: #fff; }
.phieu-row .form-grid { gap: 10px 20px; }
.phieu-row .field { gap: 3px; }
.phieu-row input[type=text], .phieu-row input[type=number], .phieu-row input[type=tel], .phieu-row select {
  padding: 6px 10px;
}

.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }

.split-row { display: flex; gap: 20px; align-items: flex-start; }
.split-row > .panel { flex: 1; min-width: 0; margin-bottom: 0; }

.viz-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.viz-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; transition: background .15s ease; }
.viz-legend-row:hover { background: #f8fafc; }
.viz-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(15,23,42,.25), inset 0 1px 1px rgba(255,255,255,.35); }
.viz-legend-label { flex: 1; color: var(--text); }
.viz-legend-value { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Biểu đồ tròn SVG: hiệu ứng xuất hiện + phóng to nhẹ khi rê chuột --- */
.viz-pie-svg { animation: vizFadeScale .55s cubic-bezier(.16,1,.3,1) backwards; }
.viz-pie-slice { transform-box: fill-box; transform-origin: center; transition: transform .18s ease, filter .18s ease; cursor: default; }
.viz-pie-slice:hover { transform: scale(1.045); filter: brightness(1.08); }

.viz-hbar-chart { display: flex; flex-direction: column; gap: 10px; }
.viz-hbar-row { display: flex; align-items: center; gap: 10px; }
.viz-hbar-label { width: 110px; flex-shrink: 0; font-size: 12px; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-hbar-track { flex: 1; height: 18px; background: #eef1f5; border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(15,23,42,.08); }
.viz-hbar-fill {
  height: 100%;
  border-radius: 0 5px 5px 0;
  width: var(--w, 0%);
  box-shadow: 0 1px 3px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.3);
  transition: filter .15s ease, box-shadow .15s ease;
  animation: vizGrowBar .8s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--d, 0s);
}
.viz-hbar-row:hover .viz-hbar-fill { filter: brightness(1.08); box-shadow: 0 2px 6px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.viz-hbar-row:hover .viz-hbar-value { color: var(--text); font-weight: 700; }
.viz-hbar-value { width: 48px; flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .15s ease, font-weight .15s ease; }

@keyframes vizFadeScale { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes vizGrowBar { from { width: 0; } to { width: var(--w, 0%); } }
@keyframes statFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loginPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .viz-pie-svg, .viz-hbar-fill { animation: none; }
  .viz-pie-slice { transition: none; }
  .stat-card, .flash, .login-box { animation: none; }
  .login-page { animation: none; }
  .btn, .sidebar nav a, .kanban-card, .stat-card, .panel { transition: none; }
  .actions-menu { transition: none; }
}

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 50;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 28px rgba(0,0,0,0.3); }
  .content { padding: 14px; }
  .topbar { padding: 10px 14px; }
  .topbar h1 { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .kanban { flex-direction: column; }
  .kanban-col { width: 100%; }
  .split-row { flex-direction: column; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .search-form { width: 100%; }
  .toolbar .search-form input[type=search] { flex: 1; min-width: 0 !important; }
  input[type=search] { min-width: 0 !important; }
  .btn-row { flex-wrap: wrap; }
}

@media (max-width: 1100px) {
  .split-row { flex-direction: column; }
}

@media (max-width: 480px) {
  input[type=text], input[type=password], input[type=number], input[type=date],
  input[type=search], input[type=email], input[type=tel], select, textarea {
    font-size: 16px;
  }
  .btn { padding: 10px 14px; }
  th, td { padding: 8px 7px; font-size: 12.5px; }
  .content { padding: 12px; }
  .panel { padding: 14px; }
  .stat-card { min-width: 46%; padding: 12px 14px; }
  .cards-row { gap: 10px; }
  .login-page { padding: 16px; }
  .login-box { padding: 26px 22px; }
}

/* ---- Đóng hàng: hiệu ứng khớp/không khớp khi quét mã vạch sản phẩm ---- */
.row-match { background: rgba(34, 197, 94, 0.06); }
@keyframes flashGreen {
  0% { background: rgba(34, 197, 94, 0.35); }
  100% { background: rgba(34, 197, 94, 0.06); }
}
@keyframes flashRed {
  0% { background: rgba(239, 68, 68, 0.35); }
  100% { background: transparent; }
}
.flash-green { animation: flashGreen 1s ease-out; }
.flash-red { animation: flashRed 1s ease-out; }
#barcodeInput { border: 2px solid var(--primary, #2563eb); }

/* ---- Checkbox gọn 1 dòng / lưới checkbox (dùng ở form Người dùng: chọn chức năng được dùng) ---- */
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.checkbox-inline input { width: auto; }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0; }
.checkbox-grid .checkbox-inline { font-size: 13px; }

/* ===== Trang đăng nhập kiểu "sơ đồ tổ chức" - bấm vào tên/icon để đăng nhập thẳng ===== */
.orgchart-page {
  min-height: 100vh;
  padding: 40px 20px 60px;
  background-color: #2a0808;
  background:
    linear-gradient(135deg, rgba(20, 6, 6, 0.6), rgba(35, 10, 6, 0.55)),
    url('/img/login-bg.webp') center/cover no-repeat;
}
.orgchart-title { text-align: center; color: #fff; font-size: 22px; margin: 0 0 4px; }
.orgchart-sub { text-align: center; color: #cbd5e1; font-size: 13px; margin: 0 0 28px; }
.orgchart-flash { max-width: 420px; margin: 0 auto 20px; }

.orgchart-layout { display: flex; align-items: flex-start; justify-content: center; gap: 26px; max-width: 1560px; margin: 0 auto; }
.orgchart-center { flex: 1 1 auto; min-width: 0; max-width: 1060px; }
.orgchart-side { flex: 0 0 220px; width: 220px; margin-top: 46px; }
.orgchart-side-card {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px; padding: 18px 18px 20px; backdrop-filter: blur(2px);
}
.orgchart-side-title { color: #fff; font-size: 14px; margin: 0 0 12px; text-align: center; font-weight: 700; }
.orgchart-bacho-list { margin: 0; padding-left: 20px; color: #e2e8f0; font-size: 12.5px; line-height: 1.6; }
.orgchart-bacho-list li { margin-bottom: 8px; }
.orgchart-bacho-list li:last-child { margin-bottom: 0; }
.orgchart-slogan-card { display: flex; align-items: center; justify-content: center; min-height: 120px; background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(180, 83, 9, 0.25)); }
.orgchart-slogan { margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.5; letter-spacing: 0.3px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

@media (max-width: 980px) {
  .orgchart-layout { flex-direction: column; align-items: center; }
  .orgchart-side { width: 100%; max-width: 420px; margin-top: 0; }
  .orgchart-side-left { order: 2; margin-top: 26px; }
  .orgchart-center { order: 1; width: 100%; }
  .orgchart-side-right { order: 3; margin-top: 16px; }
}

.org-chart { display: flex; flex-direction: column; align-items: center; }
.org-ceo { margin-bottom: 26px; position: relative; }
.org-ceo::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 2px; height: 26px; background: rgba(255, 255, 255, 0.35); transform: translateX(-50%); }

/* Tất cả ô "phòng ban" luôn nằm NGANG HÀNG với nhau (cùng 1 dòng, ngay dưới CEO) dù mỗi phòng
   ban có số tầng/số người bên dưới khác nhau - dùng flex-wrap: nowrap + align-items: flex-start
   (canh đỉnh) thay vì cho tự xuống dòng. KHÔNG cuộn ngang - mỗi cột phòng ban tự co giãn
   (flex:1 1 0, min-width:0) để LUÔN vừa đúng 1 màn hình dù có bao nhiêu phòng ban, thay vì cố
   định độ rộng rồi phải cuộn. Cỡ chữ/avatar/khoảng cách dùng clamp() theo vw để tự nhỏ lại khi
   cột hẹp (nhiều phòng ban) mà không bao giờ tràn ra ngoài. */
.org-departments { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.6vw, 34px); width: 100%; padding: 4px 4px 12px; }
.org-dept { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 0; min-width: 0; max-width: 210px; position: relative; padding-top: 26px; }
.org-dept::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; background: rgba(255, 255, 255, 0.35); transform: translateX(-50%); }
.org-dept-head { margin-bottom: 18px; position: relative; }
/* Tầng "trưởng phòng/nhóm" - riêng 1 tầng giữa hộp phòng ban và các nhân viên còn lại (chỉ hiện
   khi phòng ban đó có gán 1 người làm trưởng phòng - xem lib/org-chart.js). */
.org-dept-lead { margin-bottom: 18px; position: relative; padding-top: 18px; display: flex; justify-content: center; }
.org-dept-lead::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: rgba(255, 255, 255, 0.35); transform: translateX(-50%); }
.org-dept-staff { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; position: relative; padding-top: 18px; }
.org-dept-staff::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: rgba(255, 255, 255, 0.35); transform: translateX(-50%); }
.org-dept-staff:empty { display: none; }

/* width:100% ở đây là để mọi node (CEO/trưởng phòng/nhân viên) rộng khớp đúng cột chứa nó (đã
   co giãn ở .org-dept) - riêng CEO không nằm trong 1 cột co giãn (đứng 1 mình trên đỉnh sơ đồ)
   nên % này tự động không có tác dụng, giữ đúng kích thước tự nhiên như cũ. .org-node giờ là 1
   thẻ <a> (không còn <form>/<button> - bấm vào chỉ điều hướng tới /login?u=... để tự điền sẵn tên
   đăng nhập, KHÔNG tự đăng nhập nữa, xem views/login.js: orgNode()) nên cần display:block (mặc
   định <a> là inline, width:100% sẽ không có tác dụng nếu không có dòng này) + bỏ gạch chân mặc
   định của link khi hover. */
.org-node { display: block; margin: 0; width: 100%; text-decoration: none; }
.org-node:hover { text-decoration: none; }
.org-node-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px;
  padding: clamp(8px, 1.4vw, 14px) clamp(6px, 1.2vw, 12px); width: 100%; box-sizing: border-box; min-height: 116px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: background-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  font-family: inherit;
}
.org-node-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3); }
.org-node-btn:active { transform: translateY(0); }
/* Người có chọn màu riêng (mục Người dùng) - tô màu cho CẢ ô (không chỉ vòng tròn chữ cái đầu
   tên), chữ tên/chức danh đổi sang trắng cho dễ đọc trên nền màu (xem orgNode() ở login.js). */
.org-node-colored .org-node-name, .org-node-colored .org-node-role { color: #fff; }
.org-node-avatar {
  width: clamp(28px, 3.6vw, 44px); height: clamp(28px, 3.6vw, 44px); border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-weight: 700; font-size: clamp(11px, 1.4vw, 17px);
  display: flex; align-items: center; justify-content: center;
}
.org-node-big .org-node-avatar { width: clamp(36px, 4.6vw, 56px); height: clamp(36px, 4.6vw, 56px); font-size: clamp(13px, 1.8vw, 20px); background: linear-gradient(135deg, #d97706, #b45309); }
/* Ảnh đại diện tự tải lên (mục Người dùng) thay cho icon chữ cái đầu tên - phóng to hơn vòng
   tròn chữ cái (ảnh cần to mới nhìn rõ được mặt người, chữ cái đầu tên thì 1 ký tự không cần to
   bằng) - ảnh phủ kín vòng tròn (object-fit:cover, cắt vừa khung vuông->tròn), không dùng nền
   màu/gradient nữa. */
.org-node-avatar-img { width: clamp(40px, 5.4vw, 62px); height: clamp(40px, 5.4vw, 62px); padding: 0; overflow: hidden; background: none; }
.org-node-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.org-node-big .org-node-avatar-img { width: clamp(50px, 6.4vw, 78px); height: clamp(50px, 6.4vw, 78px); }
.org-node-big .org-node-btn, .org-node-big.org-node-placeholder { min-height: 128px; }

/* Khung kim loại và huy hiệu cánh; màu theo hàng hiển thị, không theo quyền. */
.org-node-cardframe {
  --frame-light: #eafaff; --frame-mid: #73cdff; --frame-dark: #164dca; --frame-accent: #00caff;
  position: relative; width: 100%; box-sizing: border-box; padding: 7px;
  border-radius: 2px; border: 1px solid var(--frame-light);
  background: linear-gradient(135deg, var(--frame-dark), var(--frame-light) 12%, var(--frame-mid) 20%, var(--frame-dark) 45%, var(--frame-light) 65%, var(--frame-dark) 85%, var(--frame-mid));
  box-shadow: 0 2px 0 var(--frame-dark), 0 7px 16px #0005;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.org-node-cardframe-admin {
  --frame-light: #fff4a9; --frame-mid: #ffc743; --frame-dark: #b84508; --frame-accent: #ed3018;
}
.org-node-cardframe-lead {
  --frame-light: #fff7b0; --frame-mid: #edc452; --frame-dark: #92601c; --frame-accent: #23cce2;
}
.org-node-cardframe .org-node-btn {
  border: 1px solid var(--frame-dark); border-radius: 2px; box-shadow: 0 0 0 1px var(--frame-light);
  min-height: 126px; padding-top: 22px; padding-bottom: 14px;
}
.org-node-big .org-node-cardframe { width: 150px; }
.org-node-big .org-node-cardframe .org-node-btn { min-height: 148px; }
.org-node-cardframe:hover { transform: translateY(-3px); filter: brightness(1.05); }
.org-node-cardframe .org-node-btn:hover, .org-node-cardframe .org-node-btn:active { transform: none; }
.org-node-cardframe .org-node-btn:focus-visible { outline: 3px solid #fff; outline-offset: 10px; }
.org-card-crest {
  position: absolute; z-index: 2; pointer-events: none; top: -24px; left: 50%;
  transform: translateX(-50%); width: min(116%, 220px); height: 55px;
  background: url('/img/frame-staff-crest.svg') center / 100% 100% no-repeat;
}
.org-node-cardframe-admin .org-card-crest,
.org-node-cardframe-lead .org-card-crest { background-image: url('/img/frame-lead-crest.svg'); }
.org-node-cardframe-admin .org-card-crest { background-image: url('/img/frame-admin-crest.svg'); height: 66px; top: -32px; }
.org-card-corner {
  position: absolute; z-index: 1; pointer-events: none; width: 23px; height: 29px;
  background: linear-gradient(135deg, var(--frame-light), var(--frame-mid) 35%, var(--frame-dark) 48%, var(--frame-accent) 60%, var(--frame-light));
  clip-path: polygon(0 0,100% 0,72% 18%,25% 25%,25% 75%,0 100%);
}
.org-card-corner-tl { top: -2px; left: -2px; }
.org-card-corner-tr { top: -2px; right: -2px; transform: scaleX(-1); }
.org-card-corner-bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.org-card-corner-br { bottom: -2px; right: -2px; transform: scale(-1); }
.org-node-cardframe .org-node-avatar { box-shadow: 0 0 0 3px var(--frame-mid), 0 3px 9px #0005; }
.orgchart-sub { margin-bottom: 52px; }
.org-dept-staff { gap: 32px; }
.org-dept-lead { margin-bottom: 32px; }
@media (max-width: 640px) {
  .org-card-crest { height: 36px; top: -17px; }
  .org-node-cardframe { padding: 4px; }
  .org-node-cardframe .org-node-btn { padding-left: 3px; padding-right: 3px; }
  .org-node-name, .org-node-role { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .org-node-cardframe, .org-node-cardframe .org-node-btn { transition: none; }
}

.org-node-name { font-weight: 600; font-size: clamp(10.5px, 1.05vw, 13px); text-align: center; color: var(--text); }
.org-node-role { font-size: clamp(9px, 0.9vw, 11px); color: var(--muted); text-align: center; }
.org-node-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; min-height: 116px; padding: clamp(8px, 1.4vw, 14px) clamp(6px, 1.2vw, 12px); border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: 12px;
}
.org-node-placeholder .org-node-role { color: #e2e8f0; }

/* Node "phòng ban" ở tầng giữa sơ đồ tổ chức (giữa CEO và nhân viên) - không phải người nên
   không bấm được, tô nền đậm để phân biệt rõ với node người (nền trắng) và node placeholder
   (viền chấm, dùng cho "Khác"). Dùng height CỐ ĐỊNH (không phải min-height) - tên phòng ban ngắn
   hiện 1 dòng hay dài phải xuống 2 dòng đều ra ĐÚNG 1 chiều cao như nhau, để tầng nhân sự bên
   dưới của mọi phòng ban luôn bắt đầu ở cùng độ cao, thẳng hàng ngang với nhau (không bị lệch
   xuống ở phòng ban có tên dài phải xuống dòng). Tên phòng ban giới hạn tối đa 2 dòng
   (-webkit-line-clamp), quá dài thì tự cắt "..." thay vì tràn ra ngoài hộp. */
.org-dept-box {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; height: 50px; padding: 6px clamp(6px, 1.2vw, 14px); border-radius: 12px; text-align: center;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.org-dept-box-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 700; font-size: clamp(10.5px, 1.05vw, 13px); line-height: 1.15; letter-spacing: 0.2px;
}
/* Hộp "Khác" (nhân sự chưa gán phòng ban) - cùng kích thước với hộp phòng ban thật ở trên, chỉ
   đổi màu (viền chấm, không tô nền) để phân biệt đây không phải phòng ban thật. */
.org-dept-box-placeholder { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.5); box-shadow: none; }
.org-dept-box-placeholder .org-dept-box-text { color: #e2e8f0; font-weight: 600; }

.orgchart-classic { max-width: 360px; margin: 36px auto 0; color: #e2e8f0; text-align: center; }
.orgchart-classic summary { cursor: pointer; font-size: 12.5px; color: #cbd5e1; }
.orgchart-classic .login-box { text-align: left; margin-top: 14px; }

@media (max-width: 640px) {
  .org-departments { gap: 6px; }
}


/* Khung xanh mảnh, ít họa tiết để các ô nhân viên thoáng hơn. */
.org-node-cardframe-staff {
  padding: 2px;
  border: 1px solid #8acbff;
  border-radius: 6px;
  background: linear-gradient(150deg, #bdeaff, #478ee9);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .18);
}
.org-node-cardframe-staff .org-node-btn {
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}
.org-node-cardframe-staff .org-card-corner { display: none; }
.org-node-cardframe-staff .org-card-crest {
  width: min(72%, 120px);
  height: 32px;
  top: -18px;
}
.org-node-cardframe-staff .org-node-avatar {
  box-shadow: 0 0 0 2px #92cfff, 0 2px 5px rgba(0, 0, 0, .16);
}
@media (max-width: 640px) {
  .org-node-cardframe-staff .org-card-crest { height: 25px; top: -14px; }
}

/* Ánh vàng chuyển động trên khung hàng quản lý. Lớp sáng không chặn nút đăng nhập. */
.org-node-cardframe-admin::after,
.org-node-cardframe-lead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 7px;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 224, 117, .25) 43%, #fffce4 49%, rgba(255, 228, 144, .8) 51%, transparent 60%);
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: org-gold-shimmer 5s ease-in-out infinite;
}
.org-node-cardframe-admin .org-card-crest,
.org-node-cardframe-lead .org-card-crest {
  animation: org-gold-crest-glow 5s ease-in-out infinite;
}
.org-dept:nth-child(2) .org-node-cardframe-lead::after,
.org-dept:nth-child(2) .org-node-cardframe-lead .org-card-crest { animation-delay: -.7s; }
.org-dept:nth-child(3) .org-node-cardframe-lead::after,
.org-dept:nth-child(3) .org-node-cardframe-lead .org-card-crest { animation-delay: -1.4s; }
.org-dept:nth-child(4) .org-node-cardframe-lead::after,
.org-dept:nth-child(4) .org-node-cardframe-lead .org-card-crest { animation-delay: -2.1s; }
.org-dept:nth-child(5) .org-node-cardframe-lead::after,
.org-dept:nth-child(5) .org-node-cardframe-lead .org-card-crest { animation-delay: -2.8s; }
@keyframes org-gold-shimmer {
  0%, 12% { background-position: 150% 0; opacity: 0; }
  22% { opacity: .95; }
  66% { opacity: .95; }
  80%, 100% { background-position: -50% 0; opacity: 0; }
}
@keyframes org-gold-crest-glow {
  0%, 12%, 80%, 100% { filter: brightness(1) drop-shadow(0 0 1px rgba(255, 213, 92, .15)); }
  40% { filter: brightness(1.22) drop-shadow(0 0 5px rgba(255, 213, 92, .65)); }
}
@media (max-width: 640px) {
  .org-node-cardframe-admin::after,
  .org-node-cardframe-lead::after { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .org-node-cardframe-admin::after,
  .org-node-cardframe-lead::after { animation: none; opacity: 0; }
  .org-node-cardframe-admin .org-card-crest,
  .org-node-cardframe-lead .org-card-crest { animation: none; }
}

/* Hai lớp hạt lửa nhẹ, giới hạn bên trong ô quản lý và CEO. */
:is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn > span {
  position: relative;
  z-index: 1;
}
:is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn::before,
:is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1.3px 2.3px at 10% 24%, #ffb22c 55%, transparent 100%),
    radial-gradient(ellipse 1px 1.7px at 28% 68%, #f58a17 55%, transparent 100%),
    radial-gradient(ellipse 1.5px 2.5px at 77% 42%, #ffc34b 55%, transparent 100%),
    radial-gradient(ellipse 1px 2px at 90% 82%, #ed7916 55%, transparent 100%),
    radial-gradient(ellipse 1.2px 2px at 52% 93%, #ffb939 55%, transparent 100%);
  filter: drop-shadow(0 0 2px rgba(255, 147, 24, .55));
  opacity: 0;
  animation: org-embers-rise 7s linear infinite;
}
:is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn::after {
  animation-duration: 9s;
  animation-delay: -4.5s;
  background-position: 13px 18px;
}
.org-node-cardframe-admin .org-node-btn::before { animation-delay: -2s; }
.org-dept:nth-child(2n) .org-node-cardframe-lead .org-node-btn::before { animation-delay: -3s; }
.org-dept:nth-child(3n) .org-node-cardframe-lead .org-node-btn::after { animation-delay: -6s; }
@keyframes org-embers-rise {
  0% { transform: translate(-3px, 65%); opacity: 0; }
  18% { opacity: .65; }
  50% { transform: translate(5px, 0); opacity: .8; }
  82% { opacity: .45; }
  100% { transform: translate(-4px, -75%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn::before,
  :is(.org-node-cardframe-admin, .org-node-cardframe-lead) .org-node-btn::after {
    animation: none;
    display: none;
  }
}

/* Giữ liên kết đăng nhập bằng mật khẩu rõ ràng khi dùng khung trang trí. */
a.org-node:hover { text-decoration: none; }
a.org-node:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

/* Các ô quản lý cùng chiều cao, chữ dài được xuống dòng đầy đủ. */
.org-departments .org-node-cardframe-lead .org-node-btn {
  min-height: 180px;
  justify-content: flex-start;
}
.org-departments .org-node-name,
.org-departments .org-node-role {
  display: block;
  width: 100%;
  flex-shrink: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}


/* Avatar đồng bộ và cài đặt cá nhân ở cuối sidebar. */
.user-profile-row { display:flex; align-items:center; gap:9px; }
.user-profile-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 0 0 2px #94baff; }
.user-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.user-profile-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.user-settings-link { flex:0 0 32px; height:36px; display:flex; align-items:center; justify-content:center; color:#dbeafe; font-size:23px; border-radius:7px; }
.user-settings-link:hover { color:#fff; background:#ffffff18; text-decoration:none; }
.user-settings-link:focus-visible { outline:2px solid #93c5fd; outline-offset:2px; }
.account-settings { max-width:780px; }
.account-preview { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.account-preview .user-profile-avatar { width:64px; height:64px; flex-basis:64px; font-size:24px; }
.account-settings form { display:grid; gap:16px; }
.account-settings .btn { justify-self:start; min-height:42px; }
.account-settings input[type=color] { width:90px; height:42px; padding:3px; }
.account-settings input[type=file] { max-width:100%; }
.account-settings .field input { min-height:42px; }
.account-check { display:flex; align-items:center; gap:8px; }

/* CAU NOI HAY CUA NGAY tren thanh tren cung - xem views/layout.js + lib/quotes.js (moi nguoi moi
   ngay 1 cau khac nhau trong kho 1000 cau, giu nguyen suot ca ngay). margin-left:auto day khoi nay
   sang sat mep phai; min-width:0 cho phep no co lai khi tieu de trang dai (thieu dong nay thi cau
   dai se lam tran thanh tren); cau qua dai tu cat bot bang dau "..." va re chuot vao van xem duoc
   day du (thuoc tinh title). */
.topbar h1 { white-space: nowrap; }
.topbar-quote {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  max-width: 62%;
  padding-left: 18px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.topbar-quote-text {
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: #d21f1f;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-quote-text::before { content: '\201C'; }
.topbar-quote-text::after { content: '\201D'; }
.topbar-quote-author {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: #b91c1c;
}
@media (max-width: 1400px) { .topbar-quote-text { font-size: 20px; } }
@media (max-width: 1200px) { .topbar-quote { max-width: 50%; } .topbar-quote-text { font-size: 18px; } }
@media (max-width: 1000px) { .topbar-quote-author { display: none; } }
@media (max-width: 860px) { .topbar-quote { display: none; } }

/* ==========================================================================
   NÂNG CẤP GIAO DIỆN MÀN HÌNH LÀM VIỆC (2026-09-21)
   --------------------------------------------------------------------------
   Toàn bộ khối này được bọc trong .app-shell nên CHỈ áp dụng cho các trang
   sau khi đăng nhập. Trang đăng nhập (.orgchart-page / .login-page) không có
   .app-shell nên giữ nguyên 100% giao diện cũ, dù dùng chung file CSS này.
   Khối đặt ở cuối file để thắng các quy tắc phía trên theo thứ tự nguồn -
   không sửa/xóa dòng nào ở trên, muốn hoàn tác chỉ cần xóa nguyên khối này.
   ========================================================================== */

.app-shell {
  /* Thang chữ và màu riêng cho khu làm việc. Không đụng :root để trang đăng
     nhập giữ nguyên bộ biến cũ. */
  --ui-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui-label: #55607a;          /* nhãn/chữ phụ - đậm hơn --muted cũ cho dễ đọc */
  --ui-head: #334155;           /* tiêu đề cột bảng */
  --ui-line: #e5e9f0;           /* đường kẻ nhạt trong bảng */
  --ui-zebra: #f6f8fc;          /* nền dòng chẵn */
  --ui-hover: #eff4ff;          /* nền dòng khi rê chuột */
  --ui-surface: #f4f6fa;        /* nền vùng nội dung */

  font-family: var(--ui-font);
  background: var(--ui-surface);
  min-height: 100dvh;
}

/* Bỏ nền gradient của body ở khu làm việc (trang đăng nhập vẫn giữ nền riêng). */
.app-shell .content { background: var(--ui-surface); }

/* --------------------------------------------------------------------------
   0. BẢNG DỮ LIỆU GIỮ NGUYÊN FONT HỆ THỐNG
   Be Vietnam Pro có chữ số rộng hơn font hệ thống khoảng 16-18% (đã đo bằng
   canvas measureText: "152686884782" 87.3px -> 101.3px). Rất nhiều bảng trong
   app dùng .table-fixed kèm <colgroup> ấn định bề rộng cột bằng pixel cứng
   (100px, 95px, 120px...) căn theo font cũ, nên đổi sang font rộng hơn sẽ làm
   mã vận đơn và số tiền dài bị vỡ làm đôi ở KHẮP các trang.
   Vì vậy: font mới chỉ dùng cho phần khung (menu, tiêu đề, nút, nhãn), còn
   bảng và ô nhập trong bảng giữ nguyên font hệ thống.
   -------------------------------------------------------------------------- */
.app-shell table,
.app-shell table input,
.app-shell table select,
.app-shell table textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. CHỮ SỐ THẲNG CỘT
   Đây là thay đổi có tác dụng lớn nhất với phần mềm nhiều tiền/số lượng: mặc
   định các chữ số có bề rộng khác nhau nên cột tiền bị so le, mắt phải dò lại
   từng dòng. tabular-nums ép mọi chữ số rộng bằng nhau -> các cột số thẳng
   hàng, so sánh nhanh hơn hẳn.
   -------------------------------------------------------------------------- */
.app-shell table,
.app-shell .stat-card .value,
.app-shell .stat-card .sub,
.app-shell input[type=number],
.app-shell input[type=date],
.app-shell .badge {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. TIÊU ĐỀ CỘT BẢNG: BỎ VIẾT HOA TOÀN BỘ
   Tiếng Việt viết hoa hết sẽ mất dấu phụ phía trên (TIÊU ĐỀ, ƯU TIÊN...) nên
   khó đọc hơn chữ thường. Thay bằng chữ thường + đậm hơn + màu đậm hơn: vẫn
   phân biệt rõ với nội dung mà đọc nhẹ mắt hơn.
   -------------------------------------------------------------------------- */
.app-shell th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-head);
  background: #f1f4f9;
  border-bottom: 1px solid #d8dee9;
  /* Chỉ nới đệm DỌC. Giữ đệm NGANG 10px như gốc: nhiều bảng dùng .table-fixed với
     <colgroup> ấn định bề rộng cột, nới ngang ra 12px làm nội dung không còn vừa cột và
     bị xuống dòng (mã đơn, số tiền vỡ làm đôi). Đã đo: nới ngang làm 8 dòng đầu của Báo
     cáo đơn đại lý cao thêm 54px do vỡ dòng. */
  padding: 11px 10px;
}
.app-shell .table-wrap thead tr:first-child th,
.app-shell .table-wrap thead tr:first-child th.col-sticky-actions {
  background: #f1f4f9;
  box-shadow: inset 0 -1px 0 #d8dee9;
}

/* --------------------------------------------------------------------------
   3. NHỊP ĐIỆU BẢNG: KẺ SỌC + RÊ CHUỘT RÕ HƠN
   Bảng của app rất rộng (có bảng 15 cột phải cuộn ngang). Nền dòng chẵn nhạt
   và màu rê chuột rõ giúp mắt bám đúng một dòng khi dò từ trái sang phải.
   Màu rê chuột cũ (#fafbfc trên nền trắng) gần như không nhìn thấy.
   -------------------------------------------------------------------------- */
.app-shell td { padding: 10px; border-bottom: 1px solid var(--ui-line); }
.app-shell tbody tr:nth-child(even) td { background: var(--ui-zebra); }
.app-shell tbody tr:hover td { background: var(--ui-hover); }
.app-shell .table-fixed tbody tr:nth-child(even) .col-sticky-actions { background: var(--ui-zebra); }
.app-shell .table-fixed tbody tr:hover .col-sticky-actions { background: var(--ui-hover); }
.app-shell .table-wrap { border: 1px solid var(--ui-line); }

/* --------------------------------------------------------------------------
   4. BỎ BỚT GRADIENT TRANG TRÍ
   Gradient dùng để trang trí (không mang thông tin gì) là thứ khiến giao diện
   trông "tự động sinh ra". Chuyển sang màu phẳng cho: thanh màu trên thẻ số
   liệu, gạch chân tiêu đề panel, nút chính, nhãn trạng thái, cột kanban.
   Giữ nguyên vị trí và ý nghĩa màu - chỉ bỏ phần chuyển sắc.
   -------------------------------------------------------------------------- */
.app-shell .stat-card::before { height: 2px; background: var(--primary); }
.app-shell .stat-card:has(.value.warn)::before { background: var(--warning); }
.app-shell .stat-card-hero::before { background: var(--primary); }
.app-shell .panel h2::after { width: 28px; height: 2px; background: var(--primary); }

.app-shell .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.20);
}
.app-shell .btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.26);
}

.app-shell .badge { box-shadow: none; border: 1px solid transparent; }
.app-shell .badge-gray   { background: #eef1f6; color: #475569; border-color: #dde3ec; }
.app-shell .badge-blue   { background: #e7effd; color: #1e40af; border-color: #cfe0fb; }
.app-shell .badge-green  { background: #e6f7ec; color: #166534; border-color: #c9ecd6; }
.app-shell .badge-yellow { background: #fdf3da; color: #92400e; border-color: #f6e3b4; }
.app-shell .badge-red    { background: #fdeaea; color: #991b1b; border-color: #f8cfcf; }

.app-shell .kanban-col { background: #f1f4f9; border-color: var(--ui-line); }

/* Sidebar: nền phẳng thay vì gradient 3 điểm dừng, mục đang mở dùng màu đặc. */
.app-shell .sidebar { background: #0f172a; box-shadow: 1px 0 0 rgba(15, 23, 42, 0.10); }
.app-shell .sidebar nav a.active {
  background: var(--primary);
  box-shadow: none;
  border-left-color: #93c5fd;
}
.app-shell .sidebar nav a:hover { transform: none; background: rgba(255, 255, 255, 0.08); }
.app-shell .user-profile-avatar { background: var(--primary); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }

/* Thanh tab trang (Bảo hành, Đóng hàng...): giữ màu đỏ thương hiệu nhưng bỏ
   gradient và đổ bóng nặng để nó không át nội dung bên dưới. */
.app-shell .pagetabs {
  background: #8f1d1d;
  border-bottom: none;
  box-shadow: none;
  padding: 6px;
}
.app-shell .pagetabs a { transition: background-color .15s ease, color .15s ease; }
.app-shell .pagetabs a.active { box-shadow: none; }

/* --------------------------------------------------------------------------
   5. BỎ HIỆU ỨNG NỔI TRÊN KHỐI KHÔNG BẤM ĐƯỢC
   .panel và .stat-card không phải là nút, nhưng đang nhấc lên và đổ bóng đậm
   khi rê chuột - gây nhiễu khi đang đọc bảng, và ngầm hứa hẹn "bấm được" mà
   thực ra không bấm được. Đổi sang đổi viền nhẹ. Hiệu ứng nhấc lên vẫn giữ
   nguyên cho .btn và .kanban-card (những thứ thật sự tương tác được).
   -------------------------------------------------------------------------- */
.app-shell .panel:hover { box-shadow: var(--shadow-sm); }
.app-shell .stat-card { animation: none; }
.app-shell .stat-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: #cbd6e6;
}

/* --------------------------------------------------------------------------
   6. PHÂN CẤP CHỮ
   Nhãn và chữ phụ trước đây dùng --muted (#6b7280) ở cỡ 11.5-12.5px, hơi mờ
   khi nhìn lâu. Đậm màu lên một bậc, giữ nguyên cỡ chữ để không xô lệch bố cục.
   -------------------------------------------------------------------------- */
.app-shell .field label { color: var(--ui-label); }
.app-shell .stat-card .label { color: var(--ui-label); font-weight: 500; }
.app-shell .panel h2 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.app-shell .topbar h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.app-shell .stat-card .value { letter-spacing: -0.02em; }
.app-shell .stat-card-hero .value { letter-spacing: -0.025em; }

/* --------------------------------------------------------------------------
   7. CÂU NÓI Ở THANH TRÊN CÙNG
   Đang là chữ đỏ, in nghiêng, đậm, cỡ 22px - to hơn cả tên trang (18px) nên
   mắt đọc nó trước. Hạ xuống cỡ vừa, bỏ đậm, màu xám để tên trang dẫn dắt.
   Câu nói vẫn hiện đủ, chỉ thôi tranh chỗ. Muốn để to như cũ thì xóa khối này.
   -------------------------------------------------------------------------- */
.app-shell .topbar-quote { align-items: baseline; gap: 8px; }
.app-shell .topbar-quote-text {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #7c8598;
}
.app-shell .topbar-quote-author { font-size: 12.5px; font-weight: 500; color: #98a1b2; }
@media (max-width: 1400px) { .app-shell .topbar-quote-text { font-size: 14px; } }
@media (max-width: 1200px) { .app-shell .topbar-quote-text { font-size: 13.5px; } }

/* --------------------------------------------------------------------------
   8. Ô NHẬP LIỆU VÀ NÚT
   Đồng bộ chiều cao, viền rõ hơn một chút, vòng focus dày hơn cho dễ thấy khi
   dùng phím Tab.
   -------------------------------------------------------------------------- */
.app-shell input[type=text], .app-shell input[type=password], .app-shell input[type=number],
.app-shell input[type=date], .app-shell input[type=search], .app-shell input[type=email],
.app-shell input[type=tel], .app-shell select, .app-shell textarea {
  border-color: #d5dbe5;
  padding: 8px 11px;
}
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.app-shell .btn { border-color: #d5dbe5; }
.app-shell .btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* Panel và thẻ: bo góc đồng nhất, viền nhạt hơn để bảng bên trong nổi lên. */
.app-shell .panel, .app-shell .stat-card { border-color: var(--ui-line); }

@media (prefers-reduced-motion: reduce) {
  .app-shell .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   9. KHÔI PHỤC HÀNH VI MÀN HÌNH NHỎ
   Khối này nằm CUỐI file và mọi quy tắc đều có tiền tố .app-shell nên độ ưu
   tiên cao hơn các @media responsive viết ở phía trên - nếu không chép lại,
   các giá trị mobile cũ sẽ bị đè mất (tiêu đề to quá, bảng phình ra trên điện
   thoại). Dưới đây lặp lại đúng các giá trị mobile gốc với cùng tiền tố.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .app-shell .topbar h1 { font-size: 16px; }
  /* Sidebar dạng ngăn kéo trượt ra: trả lại bóng đổ gốc khi mở. */
  .app-shell .sidebar.open { box-shadow: 4px 0 28px rgba(0, 0, 0, 0.3); }
}
@media (max-width: 480px) {
  .app-shell th, .app-shell td { padding: 8px 7px; font-size: 12.5px; }
}

/* Khi cài làm app (PWA) trên iPhone, thanh trạng thái trong suốt đè lên trang -> chừa chỗ theo tai thỏ. */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .content { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .login-gate, .org-login { padding-top: calc(24px + env(safe-area-inset-top)); }
}

/* ===== Chấm công (routes/attendance.js, views/attendance.js, public/js/cham-cong.js) ===== */
.cc-wrap { max-width: 560px; margin: 0 auto; }
.cc-clock { text-align: center; padding: 8px 0 4px; }
.cc-clock .cc-time { font-size: 44px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; }
.cc-clock .cc-date { color: var(--muted, #6b7280); font-size: 14px; margin-top: 2px; }
.cc-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #f3f4f6; margin: 14px 0; font-size: 14px; line-height: 1.45; }
.cc-status .cc-dot { width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; margin-top: 4px; flex: none; }
.cc-status.ok { background: #ecfdf5; } .cc-status.ok .cc-dot { background: #10b981; }
.cc-status.warn { background: #fffbeb; } .cc-status.warn .cc-dot { background: #f59e0b; }
.cc-status.err { background: #fef2f2; } .cc-status.err .cc-dot { background: #ef4444; }
.cc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.cc-btn { border: 0; border-radius: 16px; padding: 22px 10px; font-size: 18px; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.15); transition: transform .08s; }
.cc-btn:active { transform: scale(.97); }
.cc-btn:disabled { opacity: .45; cursor: default; }
.cc-btn small { display: block; font-size: 12px; font-weight: 500; opacity: .9; margin-top: 4px; }
.cc-btn-in { background: linear-gradient(135deg, #16a34a, #15803d); }
.cc-btn-out { background: linear-gradient(135deg, #ea580c, #c2410c); }
.cc-preview { display: none; text-align: center; margin: 10px 0; }
.cc-preview.show { display: block; }
.cc-preview img { max-width: 220px; width: 100%; border-radius: 14px; border: 3px solid #e5e7eb; }
.cc-preview .btn-row { justify-content: center; margin-top: 10px; }
.cc-today { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.cc-today .stat-card { flex: 1 1 0; min-width: 0 !important; padding: 12px 10px; }
.cc-today .stat-card .value { font-size: 20px; }
.cc-hist td, .cc-hist th { white-space: nowrap; }
.cc-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.cc-type-vao { color: #15803d; font-weight: 600; } .cc-type-ra { color: #c2410c; font-weight: 600; }
.cc-flag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; background: #fef3c7; color: #92400e; }
.cc-flag.ok { background: #d1fae5; color: #065f46; }
.cc-install ol { padding-left: 20px; line-height: 1.7; }
.cc-install .panel h2 { margin-bottom: 8px; }
@media (max-width: 480px) { .cc-buttons { gap: 10px; } .cc-btn { padding: 18px 8px; font-size: 16px; } }

/* ===== Báo cáo tổng quát (/bao-cao - routes/report.js, views/report.js) ===== */
.bc-wrap { max-width: 1200px; }
.bc-hero { text-align: center; padding: 22px 16px; border-radius: 16px; color: #fff; margin-bottom: 16px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb); box-shadow: 0 10px 28px rgba(37, 99, 235, .28); }
.bc-hero-label { font-size: 14px; letter-spacing: .5px; text-transform: uppercase; opacity: .85; }
.bc-hero-value { font-size: 40px; font-weight: 800; line-height: 1.15; margin: 4px 0; }
.bc-hero-sub { font-size: 13px; opacity: .85; }
.bc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bc-tile { background: var(--panel, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px 16px; }
.bc-tile-label { color: var(--muted, #6b7280); font-size: 13px; }
.bc-tile-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.bc-tile-sub { color: var(--muted, #6b7280); font-size: 12px; margin-top: 2px; }
.bc-tile-warranty { border-left: 4px solid #7c3aed; }
.bc-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bc-zone { border-radius: 16px; padding: 14px; border: 1px solid var(--border, #e5e7eb); background: var(--panel, #fff); }
.bc-yg { border-top: 5px solid #16a34a; }
.bc-rs { border-top: 5px solid #ea580c; }
.bc-zone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bc-zone-code { font-weight: 800; font-size: 15px; color: #fff; padding: 3px 12px; border-radius: 999px; }
.bc-yg .bc-zone-code { background: #16a34a; } .bc-rs .bc-zone-code { background: #ea580c; }
.bc-zone-title { font-weight: 600; }
.bc-zone-total { margin-left: auto; font-size: 20px; font-weight: 800; }
.bc-zone-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bc-details { margin-top: 12px; }
.bc-details summary { cursor: pointer; color: var(--primary, #2563eb); font-size: 13.5px; }
.bc-staff td, .bc-staff th { white-space: nowrap; }
.bc-empty { color: var(--muted, #6b7280); font-size: 13px; }
.bc-map summary { cursor: pointer; }
.bc-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.bc-map-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #f8fafc; }
.bc-map-row select { width: 130px; }
@media (max-width: 800px) { .bc-zones { grid-template-columns: 1fr; } .bc-hero-value { font-size: 30px; } }