:root {
  --sidebar-w: 250px;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --sidebar-bg: #111827;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #2563eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  padding: 20px 18px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  line-height: 1.4;
}
.sidebar .brand small { display: block; font-weight: 400; font-size: 12px; color: #94a3b8; }

.sidebar nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.sidebar .group-title {
  padding: 16px 18px 8px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}
.sidebar a.nav-link {
  display: block;
  padding: 9px 18px;
  color: var(--sidebar-text);
  border-left: 3px solid transparent;
  font-size: 14px;
  transition: color .12s ease, font-size .12s ease, background .12s ease;
}
.sidebar a.nav-link:hover { background: rgba(255,255,255,0.06); text-decoration: none; font-size: 15px; font-weight: 600; }
.sidebar a.nav-link.active {
  background: rgba(37,99,235,0.15);
  border-left-color: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
}

/* Moi nhom menu chinh (Kho NL/Kho PL/San xuat/Tinh don gia/Bao cao/Quan tri) co 1 mau rieng -
   giup user co quyen thay HET cac nhom (vd Admin) phan biet nhanh dang o khu vuc nao, tranh
   bam nham (yeu cau nguoi dung). Vach mau ben trai LUON hien (kha mo) de nhan ra ca khi khong
   o trang active, dam hon + doi mau nen khi active/hover. Hover cung doi chu sang DUNG mau cua
   nhom (ket hop voi hieu ung to chu o .nav-link:hover phia tren). Quan tri giu nguyen mau xanh
   mac dinh (khong doi) vi la nhom it bam nhat/it de nham nhat voi cac nhom nghiep vu con lai. */
.sidebar .nav-group-nl .group-title { color: #f59e0b; }
.sidebar .nav-group-nl a.nav-link { border-left-color: rgba(245,158,11,0.35); }
.sidebar .nav-group-nl a.nav-link:hover { background: rgba(245,158,11,0.08); color: #f59e0b; }
.sidebar .nav-group-nl a.nav-link.active { background: rgba(245,158,11,0.18); border-left-color: #f59e0b; }

.sidebar .nav-group-pl .group-title { color: #a78bfa; }
.sidebar .nav-group-pl a.nav-link { border-left-color: rgba(167,139,250,0.35); }
.sidebar .nav-group-pl a.nav-link:hover { background: rgba(167,139,250,0.08); color: #a78bfa; }
.sidebar .nav-group-pl a.nav-link.active { background: rgba(167,139,250,0.18); border-left-color: #a78bfa; }

.sidebar .nav-group-sx .group-title { color: #2dd4bf; }
.sidebar .nav-group-sx a.nav-link { border-left-color: rgba(45,212,191,0.35); }
.sidebar .nav-group-sx a.nav-link:hover { background: rgba(45,212,191,0.08); color: #2dd4bf; }
.sidebar .nav-group-sx a.nav-link.active { background: rgba(45,212,191,0.18); border-left-color: #2dd4bf; }

.sidebar .nav-group-dg .group-title { color: #fb7185; }
.sidebar .nav-group-dg a.nav-link { border-left-color: rgba(251,113,133,0.35); }
.sidebar .nav-group-dg a.nav-link:hover { background: rgba(251,113,133,0.08); color: #fb7185; }
.sidebar .nav-group-dg a.nav-link.active { background: rgba(251,113,133,0.18); border-left-color: #fb7185; }

.sidebar .nav-group-bc .group-title { color: #38bdf8; }
.sidebar .nav-group-bc a.nav-link { border-left-color: rgba(56,189,248,0.35); }
.sidebar .nav-group-bc a.nav-link:hover { background: rgba(56,189,248,0.08); color: #38bdf8; }
.sidebar .nav-group-bc a.nav-link.active { background: rgba(56,189,248,0.18); border-left-color: #38bdf8; }

.sidebar .nav-group-qt a.nav-link:hover { color: var(--sidebar-active); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .user-info { display: flex; align-items: center; gap: 12px; }
.topbar .role-badge {
  background: #eef2ff; color: var(--primary-dark);
  padding: 2px 8px; border-radius: 999px; font-size: 12px;
}

.content { padding: 24px; flex: 1; }

.back-to-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 999;
}
.back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top-btn:hover { background: var(--primary-dark); }
@media print { .back-to-top-btn { display: none !important; } }

/* Chan trang toan he thong (yeu cau nguoi dung) - da co class "no-print" (dung chung voi
   .sidebar/.topbar/.alert...) nen tu dong an khi in, khong can them rule print rieng. */
.app-footer {
  margin-top: 24px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.app-footer a { color: var(--text-muted); }

.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.page-header h1 { font-size: 20px; margin: 0; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 18px;
}

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-card .value { font-size: 24px; font-weight: 700; margin-top: 4px; }

/* --- Bieu do Nhap/Xuat tren Tong quan --- */
.chart-card { overflow-x: auto; }
.chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.chart-title { margin: 0; font-size: 15px; }
.chart-tabs { display: flex; gap: 6px; }
.chart-tab {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  border-radius: 6px; padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.chart-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chart-legend { display: flex; gap: 16px; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend-nhap { background: var(--success); }
.legend-xuat { background: var(--warning); }
.chart-period { display: none; }
.chart-period.active { display: block; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; min-width: max-content; height: 200px; padding-top: 10px; }
.chart-col { display: flex; flex-direction: column; align-items: center; width: 34px; height: 100%; }
.chart-bar-pair { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; }
.chart-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.chart-bar-nhap { background: var(--success); }
.chart-bar-xuat { background: var(--warning); }
.chart-col-label { font-size: 10px; color: var(--text-muted); margin-top: 6px; white-space: nowrap; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .03em; }
tbody tr:hover { background: #f8fafc; }
.table-wrap { overflow-x: auto; }

.pagination { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pagination-info { font-size: 13px; color: var(--text-muted); }

.btn {
  display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent;
  background: var(--primary); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

form.inline { display: inline; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
.vi-tri-row.form-row { gap: 10px; }
.vi-tri-row .form-group { flex: 0 1 auto; min-width: 0; }
.vi-tri-row .w-kho { flex-basis: 180px; }
.vi-tri-row .w-o-kho { flex-basis: 140px; }
.vi-tri-row .w-so-phieu { flex-basis: 160px; }

/* --- Goi y (autocomplete) dung chung, xem public/assets/js/goi-y-loc.js --- */
.goi-y-wrap { position: relative; }
.goi-y-box {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12); margin-top: 2px; max-height: 220px; overflow-y: auto;
}
.goi-y-item { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.goi-y-item:hover, .goi-y-item.goi-y-active { background: var(--bg); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; min-height: 70px; }
.help-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-warning form { display: inline-flex; gap: 8px; align-items: center; margin-left: 8px; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Danh dau vi tri dang thao tac sau khi reload/redirect ve (URL co #dong-N / #nhom-N) - dung
   :target de trinh duyet tu dong cuon toi + highlight tam thoi, khong can JS tinh vi tri. */
tr:target { background: #fff7cc !important; }
.card:target { box-shadow: 0 0 0 2px #ca8a04; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-danger { background: #fef2f2; color: var(--danger); }
.badge-success { background: #f0fdf4; color: var(--success); }
.badge-warning { background: #fffbeb; color: var(--warning); }
.badge-muted { background: #f1f5f9; color: var(--text-muted); }

.dmtcd-du-dich { color: var(--primary); font-weight: 600; }
.dmtcd-chua-dich { color: var(--danger); font-weight: 600; }
.toolfix-row-goi-y { background: #fffbeb; }
.text-success { color: var(--success); font-weight: 600; }
.xh-thay-the-box {
  display: block; margin: 6px 0; padding: 8px 10px;
  background: #fffbeb; border: 1px solid var(--warning, #d97706); border-radius: 6px;
  font-size: 13px;
}
.xh-thay-the-table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.xh-thay-the-table th, .xh-thay-the-table td { padding: 3px 8px; text-align: left; }
.xh-thay-the-table th { font-weight: 600; color: var(--text-muted); }
.xh-col-yard, input.xh-input-yard { color: var(--success); }
.xh-col-ps, input.xh-input-ps { color: var(--danger); }
input.xh-input-yard, input.xh-input-ps { font-weight: 600; }

.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }

/* --- Tinh don gia (dg-*), xem public/assets/js/dongia-grid.js --- */
.dg-print-header-row { display: flex; align-items: stretch; border: 1px solid var(--border-strong, #94a3b8); margin-bottom: 16px; overflow-x: auto; }
.dg-print-left { flex: 1 0 420px; padding: 10px 16px; }
.dg-print-right { flex: 0 0 auto; border-left: 1px solid var(--border-strong, #94a3b8); display: flex; align-items: center; padding: 4px; }
.dg-print-header { text-align: center; }
.dg-print-header .dg-print-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dg-print-header .dg-company { font-weight: 700; font-size: 14px; white-space: nowrap; }
.dg-print-header .dg-print-revision, .dg-print-header .dg-print-ma-phieu { font-size: 12px; font-weight: 600; white-space: nowrap; }
.dg-print-header .dg-print-title { flex: 1; font-weight: 700; font-size: 18px; text-transform: uppercase; text-align: center; }
.dg-print-header .dg-print-year { font-weight: 700; font-size: 14px; white-space: nowrap; }
.dg-print-fields { display: flex; gap: 40px; text-align: left; margin: 16px 0 4px; }
.dg-print-fields .dg-print-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dg-print-fields .dg-print-field { display: flex; align-items: center; gap: 8px; }
.dg-print-fields .dg-print-field label { font-weight: 600; font-size: 13px; width: 140px; flex-shrink: 0; }
.dg-print-fields .dg-print-field input { flex: 1; }
#quy-tg-sx-table { width: auto; margin: 0; }
#quy-tg-sx-table td { white-space: nowrap; }
.dg-print-footer { margin-top: 16px; padding: 12px 4px 4px; border-top: 1px solid var(--border-strong, #94a3b8); }
.dg-print-footer .dg-tong-ket-line { font-weight: 600; margin: 0 0 8px; text-align: center; }
.dg-print-footer .dg-ngay-ky { text-align: right; margin: 0 0 8px; }
.dg-chu-ky-row { display: flex; gap: 24px; text-align: center; }
.dg-chu-ky-col { flex: 1; }
.dg-da-duyet-dau { color: var(--success); font-weight: 700; font-size: 13px; height: 64px; display: flex; align-items: center; justify-content: center; }
.dg-chu-ky-space { height: 64px; }

/* --- O "Ban giam doc duyet" (_header-form.php) - to, mau do, de nhin ngay trong bang so
   lieu san xuat dong dac chu nho - nam giua khoang trong cua o rowspan cao. --- */
.dg-bgd-cell { padding-top: 10px; padding-bottom: 10px; }
.dg-bgd-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  margin-top: 10px;
  border: 3px solid #dc2626;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.dg-bgd-checkbox:checked { background: #dc2626; }
.dg-bgd-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 4px;
  width: 8px;
  height: 16px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.dg-bgd-checkbox:disabled { cursor: not-allowed; opacity: .45; border-color: #999; }

/* --- Ban in gon QT (_qt-print.php), fetch vao #print-target roi window.print() --- */
.dg-print-page .dg-print-fields .dg-print-field span { flex: 1; }
.dg-print-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; table-layout: fixed; }
.dg-print-table th, .dg-print-table td { border: 1px solid #999; padding: 4px 6px; line-height: 1.2; word-break: break-word; overflow-wrap: break-word; }
.dg-print-table thead th { background: #f2f2f2; text-align: center; font-weight: 700; }
.dg-print-table .dg-print-group td { background: #eef1f5; font-weight: 700; }
.dg-print-table .dg-print-total td { background: #fff7cc; font-weight: 700; }
/* Ten cong doan qua dai: dong "word-break/overflow-wrap" o tren dam bao luon xuong hang (ke ca
   1 chuoi dai khong co khoang trang) thay vi tran ra ngoai o. Rieng khi IN THAT, con 1 loi khac
   nua: 1 dong da xuong nhieu hang co the roi dung vao ranh gioi 2 trang giay, khien trinh duyet
   cat ngang giua dong - phan chu con lai "bien mat" (dung nhu nguoi dung mo ta "bi che mat") vi
   khong nam tron ven tren trang nao ca. "page-break-inside: avoid" buoc ca dong (<tr>) luon o
   tron ven tren 1 trang, tu day xuong trang ke tiep neu khong con du cho - giong cach da lam
   cho .packing-list-table/.baocaolo-table/.ck-report-table trong file nay. */
@media print {
  .dg-print-table tr { page-break-inside: avoid; break-inside: avoid; }
}
.dg-cau-hinh summary { cursor: pointer; font-size: 14px; padding: 4px 0; color: var(--text-muted); }
.dg-cau-hinh[open] summary { margin-bottom: 10px; }
.dg-group-stats { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: right; white-space: nowrap; }
#dg-header-form summary { cursor: pointer; font-size: 15px; padding: 2px 0; }
#dg-header-form[open] summary { margin-bottom: 4px; }
.dg-tabs { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--border); }
.dg-tab {
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dg-tab:hover { color: var(--text); text-decoration: none; }
.dg-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.dg-add-form { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.dg-add-form .form-row { align-items: flex-end; gap: 8px; }
.dg-add-form input, .dg-add-form select { width: auto; }
.dg-checkbox { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.dg-checkbox input { width: auto; }
.dg-xoa-confirm-form { display: inline-block; margin-left: 6px; padding: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; vertical-align: middle; }
.dg-xoa-confirm-form[hidden], .dg-xoa-toggle-btn[hidden] { display: none; }
.dg-xoa-confirm-msg { font-size: 12px; color: #991b1b; margin-bottom: 6px; max-width: 360px; }
.dg-xoa-confirm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dg-xoa-confirm-row span { font-size: 12px; color: #991b1b; }
.dg-xoa-confirm-input { width: 170px; font-family: monospace; }
.dg-table th, .dg-table td { padding: 6px 8px; font-size: 13px; }
.dg-table input, .dg-table select { padding: 5px 6px; font-size: 13px; }
.dg-table .dg-group-header { background: #f1f5f9; font-weight: 600; }
.dg-table .dg-group-total td { font-style: italic; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.dg-table .dg-grand-total td { font-weight: 700; border-top: 2px solid var(--border); }
.dg-table-congdoan .dg-grand-total td { color: #dc2626; }
/* Chu thich noi bo (chi nhan vien don gia - dongia.manage - thay duoc, xem
   DonGiaController::congDoanGhiChuUpdate()): dau "+" nho, mau xam/den binh thuong (khong noi
   bat mau do nua - theo yeu cau nguoi dung) de them chu thich moi cho 1 dong QT, dau "..." +
   nut "~" (ky hieu, khong ghi chu "Sua" - theo yeu cau nguoi dung) khi da co chu thich - hien
   tooltip qua title= (rê chuột) theo yeu cau nguoi dung, khong can popover rieng. */
.dg-ghichu-wrap { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.dg-ghichu-them-btn {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  color: var(--text-muted); font-weight: 600; font-size: 11px; line-height: 1;
}
.dg-ghichu-them-btn:hover { color: var(--text); }
.dg-ghichu-cham {
  color: var(--text-muted); font-weight: 700; letter-spacing: 1px; cursor: default;
  border-bottom: 1px dotted var(--text-muted);
}
.dg-ghichu-sua-btn { font-size: 11px; }
.dg-table-congdoan th, .dg-table-congdoan td { text-align: center; }
.dg-table-congdoan input, .dg-table-congdoan select { text-align: center; }
.dg-table-congdoan select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-right: 6px;
}
/* Mau nen RIENG cho 3 cot nhap (nhap thoi gian/+D/-D) - theo yeu cau nguoi dung: khi keo
   xuong duoi khong con thay tieu de cot, chi can nhin mau nen cua o nhap la phan biet duoc
   ngay, khong can doi ve dau bang xem lai ten cot. Giu nguyen mau chu cu (van du tuong phan
   tren nen mau nhat). Chu in dam (theo yeu cau nguoi dung) - CHI o day, dung .dg-table-congdoan
   (bang nhap lieu tren man hinh) - KHONG dung ".dg-print-table" (bang ban in, xem
   _qt-print*.php) nen khong anh huong ban in; xuat Excel di qua XlsxWriter (PHP sinh XML rieng)
   nen CSS nay khong bao gio cham toi file .xlsx. */
.dg-table-congdoan .dg-col-tru,
.dg-table-congdoan .qt-f-tru,
.dg-add-form input[name="dieu_chinh_tru"] {
  color: #dc2626;
  background-color: #fee2e2;
  font-weight: 700;
}
.dg-table-congdoan .dg-col-cong,
.dg-table-congdoan .qt-f-cong,
.dg-add-form input[name="dieu_chinh_cong"] {
  color: #16a34a;
  background-color: #dcfce7;
  font-weight: 700;
}
.dg-table-congdoan .dg-col-nhaptgian,
.dg-table-congdoan .qt-f-nhaptgian,
.dg-add-form input[name="nhap_tgian"] {
  color: #2563eb;
  background-color: #dbeafe;
  font-weight: 700;
}
/* "Dong gia tang" chi can rong vua du du lieu (vd "189.37") - gioi han max-width + cho tieu
   de tu xuong dong thay vi de auto-layout ep ca cot rong ra theo chieu dai chu "Don gia tang
   (10%)" khong wrap. "Ten cong doan" duoc dat min-width de LUON co cho du du man hinh hep -
   dung min/max-width (KHONG dung table-layout:fixed) de con lai cac cot tu nhien theo noi
   dung/rong toi thieu can thiet cua tung cot (vd o Nhap T/gian rong 80px), tranh tinh huong
   fixed layout ep 1 cot xuong duoi muc can thiet lam cot khac tran/mat du lieu tren man hinh
   hep - qua trong hop do se cuon ngang binh thuong (.table-wrap co san overflow-x:auto). */
.dg-table-congdoan .dg-col-tang { max-width: 70px; white-space: normal; }
.dg-table-congdoan .dg-col-tgianhc { max-width: 70px; display: none; }
.dg-grid.dg-hien-tgianhc .dg-table-congdoan .dg-col-tgianhc { display: table-cell; }
.dg-table-congdoan .dg-col-giay { max-width: 44px; }
.dg-table-congdoan .dg-col-ten { min-width: 200px; }
/* O "Ten cong doan" (dong da luu + header nhom) la <textarea> tu dong cao them khi ten dai
   (theo yeu cau nguoi dung: khong cat chu, "xuong dong" thay vi bi an bot) - chieu cao that su
   duoc dongia-grid.js dieu chinh moi lan go/khi nap lai luoi; CSS chi tat cac hanh vi textarea
   mac dinh (resize tay, min-height 70px chung cua toan he thong) gay xau/lech dong voi cac o
   khac trong cung hang. KHONG anh huong ban in (_qt-print*.php dung <td> thuong) hay xuat Excel.
   overflow:hidden de khong hien scrollbar doc trong luc JS chua kip do lai chieu cao. */
.dg-autosize-ten {
  resize: none;
  min-height: 0;
  height: auto;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
  display: block;
}
.dg-table-congdoan thead th {
  font-weight: 700;
  border: 1px solid var(--border-strong, #94a3b8);
}
.dg-table-congdoan tr.dg-group-header td {
  border-top: 1px solid var(--border-strong, #94a3b8);
  border-bottom: 1px solid var(--border-strong, #94a3b8);
  font-weight: 700;
}
.dg-table-congdoan tr.dg-group-header input[data-field="ten_cong_doan"],
.dg-table-congdoan tr.dg-group-header strong {
  text-decoration: underline;
}
.dg-table-congdoan .dg-group-stats {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.dg-table-congdoan th, .dg-table-congdoan td { padding: 10px 8px; }
#quy-tg-sx-table td[rowspan] > span,
#quy-tg-sx-table td[rowspan] > input {
  display: inline-block;
  margin-top: 10px;
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.modal-box h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.nhaphang-form-wrap { background: transparent; border: none; padding: 0; }
.nhaphang-form-wrap.pinned {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  padding: 10px 0 14px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,0.15);
}
.nhaphang-pin-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  margin-bottom: 10px; cursor: pointer;
}
.nhaphang-preview-wrap { margin-top: 20px; }

.chuyen-kho-panels { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.chuyen-kho-panel { flex: 1; min-width: 340px; }
.ck-chon-tat-ca {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  margin-top: 10px; cursor: pointer;
}
.dm-hien-cot-gc-label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  margin-bottom: 10px; cursor: pointer;
}
.ck-che-do-row { margin-bottom: 10px; }
.ck-che-do-row label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.ck-nhom-block { margin-bottom: 16px; }
.ck-nhom-block:last-child { margin-bottom: 0; }
.ck-nhom-title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ck-nhom-check-label { display: inline-flex; cursor: pointer; }
.ck-nhom-check-label input { margin: 0; cursor: pointer; }
.ck-lo-ket-qua tr.ck-lo-row:hover { background: #f1f5f9; }

/* --- Trang cong khai quet QR (mobile) --- */
body.qr-public-body { background: var(--bg); }
.qr-public-page { max-width: 640px; margin: 0 auto; padding: 16px; }
.qr-o-header { text-align: center; }
.qr-o-title { font-size: 26px; font-weight: 700; }
.qr-o-breadcrumb { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.qr-not-found { text-align: center; }

/* --- In tem QR: chon duoc 2/3/4 tem/trang A4, tem gom QR + thong tin O ---
   .qr-sheet co chieu cao co dinh bang 1 trang A4 (tru le), cac .qr-label chia deu
   nhau theo flex:1 - dam bao LUON dung dung so tem da chon/trang bat ke noi dung
   dai ngan the nao. Chon cang it tem/trang thi QR (dat kich thuoc qua JS,
   xem QR_SIZE_BY_DENSITY) va chu cang to - phu hop treo o ke cao, quet xa hon.
   Chieu cao 265mm phai <= kho in thuc te theo @page { margin: 12mm } o duoi
   (297mm - 2*12mm = 273mm dat in duoc, chua ~8mm du phong cho sai so lam tron/
   khac biet giua cac trinh duyet-may in). Vi .qr-label dung page-break-inside:
   avoid, chi can cao hon khu in du 1-2mm la CA 1 tem bi day nguyen sang trang
   an phia sau (da gap loi nay khi dat 277mm truoc do, chi thieu 4mm da mat tem). */
.qr-print-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.qr-sheet {
  background: #fff; width: 100%; max-width: 720px; height: 265mm; margin: 0 auto 24px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.qr-label {
  display: flex; align-items: center; gap: 28px; padding: 20px 28px;
  border-bottom: 1px dashed #999; flex: 1 1 0; min-height: 0;
}
.qr-label:last-child { border-bottom: none; }
.qr-label .qr-canvas-wrap { flex-shrink: 0; }
.qr-label .qr-o-title { font-size: 36px; font-weight: 700; margin-bottom: 8px; }
.qr-label .qr-o-breadcrumb-line { font-size: 17px; color: var(--text); line-height: 1.6; }
.qr-label .qr-o-breadcrumb-line strong { color: var(--primary); }

.qr-sheet.qr-density-2 .qr-label { gap: 36px; padding: 24px 32px; }
.qr-sheet.qr-density-2 .qr-o-title { font-size: 48px; margin-bottom: 12px; }
.qr-sheet.qr-density-2 .qr-o-breadcrumb-line { font-size: 22px; }

.qr-sheet.qr-density-4 .qr-label { gap: 20px; padding: 14px 22px; }
.qr-sheet.qr-density-4 .qr-o-title { font-size: 26px; margin-bottom: 4px; }
.qr-sheet.qr-density-4 .qr-o-breadcrumb-line { font-size: 13px; line-height: 1.4; }

/* --- Xuat hang: luoi tim kiem kieu So do kho (nhieu kho con), bam 1 O de mo rong
   danh sach kien ngay tai cho (khong dieu huong trang) --- */
.xh-kho-con-block { margin-bottom: 16px; }
.xh-kho-con-title { margin: 0 0 12px; font-size: 16px; }
.xh-o-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.xh-o-cell {
  border: none; font-family: inherit; cursor: pointer; text-align: left; appearance: none;
}
.xh-o-cell.xh-o-active { box-shadow: 0 0 0 2px var(--primary); }
.xh-kien-slot { flex: 1 1 100%; width: 100%; }
.xh-kien-slot .card { margin-top: 8px; }
.xh-kien-slot input[type="number"] { width: 90px; }
.xh-gio-table td, .xh-gio-table th { padding: 6px 8px; }
.xh-gio-remove { cursor: pointer; color: var(--danger); font-weight: 700; background: none; border: none; font-size: 14px; }

@media print {
  .qr-sheet { border: none; border-radius: 0; margin: 0; max-width: none; page-break-after: always; }
  .qr-sheet:last-child { page-break-after: auto; }
  .qr-label { page-break-inside: avoid; }
}
.mahang-block { border: 1px solid var(--border); margin-bottom: 16px; }
.mahang-block h4 { margin-bottom: 8px; }
.mahang-fields-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.mahang-fields-row .form-group { margin-bottom: 0; min-width: 0; }
.mahang-fields-row .w-loai-vai { flex: 0 1 220px; }
.mahang-fields-row .w-ma-code { flex: 0 1 160px; }
.mahang-fields-row .w-ma-hang { flex: 0 1 130px; }
.mahang-fields-row .w-don-vi { flex: 0 0 90px; }
.mahang-fields-row .w-he-so { flex: 0 0 100px; }
.ma-code-td-list { margin-top: 4px; }
.ma-code-td-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.ma-code-td-row input { flex: 1; }
.remove-ma-code-td { color: var(--danger); cursor: pointer; font-weight: 700; }
.btn-link {
  background: none; border: none; padding: 3px 0; margin-top: 4px; font-size: 12px;
  color: var(--primary); cursor: pointer; text-align: left;
}
.btn-link:hover { text-decoration: underline; }

.packing-list-card { padding: 12px; }
.packing-list-table { font-size: 12px; table-layout: fixed; width: auto; }
.packing-list-table th, .packing-list-table td { padding: 4px 6px; border: 1px solid #000; }
.packing-list-table col.pl-col-check { width: 28px; }
.packing-list-table col.pl-col-cno { width: 45px; }
.packing-list-table col.pl-col-so-cay { width: 60px; }
.packing-list-table col.pl-col-ma-hang { width: 100px; }
.packing-list-table col.pl-col-nl-mau { width: 210px; }
.packing-list-table col.pl-col-yard { width: 65px; }
.packing-list-table col.pl-col-lot { width: 65px; }
.packing-list-table col.pl-col-so-lo { width: 65px; }
.packing-list-table col.pl-col-kg { width: 65px; }
.packing-list-table col.pl-col-ngay { width: 90px; }
.packing-list-table .packing-group-row td {
  font-weight: 700; background: #eef2ff; text-align: center;
}
.pl-group-loai-vai { color: var(--success); }
.pl-group-ma-code { color: var(--danger); }
.packing-list-table .packing-total-row td {
  font-weight: 700; background: #fffbeb;
}

.tdx-group-row td {
  font-weight: 700; background: #e2efda;
}
.tdx-col-xuat { background: #fff2cc; }
.tdx-col-xuat[data-tdx-has-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.tdxkh-khung { background: #fff2cc; }
.tdxkh-filter-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 8px;
}
#tdxkh-table thead .tdxkh-khung { background: #f5b942; font-weight: 700; }
.tdx-floating-tip {
  position: fixed; z-index: 1000; background: #1f2937; color: #fff; padding: 8px 10px;
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 12px; max-width: 280px;
  pointer-events: none;
}
.tdx-floating-tip .tdx-tip-title { font-weight: 700; margin-bottom: 4px; }
.tdx-floating-tip table { border-collapse: collapse; width: 100%; }
.tdx-floating-tip td { padding: 2px 6px 2px 0; border: 0; color: #fff; }

.subtotal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.subtotal-row-custom td {
  background: #ecfeff; border-top: 1px dashed var(--primary); border-bottom: 1px dashed var(--primary);
  font-size: 12px; padding: 6px 8px;
}
.subtotal-remove {
  cursor: pointer; margin-left: 8px; color: var(--text-muted); font-weight: 700;
  background: none; border: none; font-size: 14px; padding: 0; line-height: 1;
}
.subtotal-remove:hover { color: var(--danger, #dc2626); }
.line-items-table th:first-child, .line-items-table td:first-child { width: 22px; padding-right: 0; }

.dm-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.dm-tab-btn {
  background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dm-tab-btn:hover { color: var(--text); }
.dm-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.dm-inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.khocon-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.khocon-card { display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; color: var(--text); }
.khocon-card-link { display: block; color: inherit; text-decoration: none; }
.khocon-card:hover { border-color: var(--primary); }
.khocon-card-link:hover { text-decoration: none; }
.khocon-card .ten { font-weight: 700; margin-bottom: 4px; }
.khocon-card .mo-ta { font-size: 12px; color: var(--text-muted); }

.ke-block { margin-bottom: 22px; }
.ke-title { font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.tang-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.tang-label { width: 64px; flex-shrink: 0; display: flex; align-items: center; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.o-cell {
  position: relative; flex: 1; min-width: 110px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-size: 12px; background: #fff; text-decoration: none; color: var(--text); display: block; line-height: 1.5;
}
.o-cell:hover { border-color: var(--primary); text-decoration: none; box-shadow: 0 0 0 1px var(--primary); }
.o-cell.has-stock { background: #f0fdf4; border-color: #86efac; }
.o-cell.is-stock { border-color: #ca8a04; }
.o-cell.o-cell-highlight { background: #fef9c3; border-color: #eab308; border-width: 2px; box-shadow: 0 0 0 1px #eab308; }
.sd-loc-ket-qua-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-loc-ket-qua-grid .o-cell { flex: 0 1 200px; }
.o-cell .o-ma { font-weight: 700; display: flex; align-items: center; gap: 4px; }
.o-cell .o-info { color: var(--text-muted); margin-top: 3px; }
.o-cell .o-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
.o-stock-toggle, .o-stock-badge {
  position: absolute; top: 4px; right: 4px; background: #ffff00; border: 1px solid #ca8a04;
  color: #713f12; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; line-height: 1.5;
}
.o-stock-toggle { cursor: pointer; display: flex; align-items: center; gap: 2px; }
.o-stock-toggle input { margin: 0; width: 10px; height: 10px; cursor: pointer; }

.lang-switcher-form { display: inline-block; }
.lang-switcher-form select {
  padding: 5px 8px; font-size: 12px; width: auto; border-radius: 6px;
}
.login-card .lang-switcher-form { position: absolute; top: 16px; right: 16px; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111827, #1e3a8a);
}
.login-card {
  background: #fff; border-radius: 10px; padding: 36px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25); position: relative;
}
.login-card h1 { font-size: 18px; margin: 0 0 4px; }
.login-card p.sub { color: var(--text-muted); margin: 0 0 20px; font-size: 13px; }

.line-items-table input { min-width: 90px; }
.line-items-table.kien-fixed { table-layout: fixed; width: auto; }
.line-items-table.kien-fixed th, .line-items-table.kien-fixed td { padding: 6px 5px; }
.line-items-table.kien-fixed input { width: 100%; min-width: 0; box-sizing: border-box; }
.line-items-table.kien-fixed input.row-check { width: auto; }
.line-items-table.kien-fixed col.col-check { width: 24px; }
.line-items-table.kien-fixed col.col-cno { width: 60px; }
.line-items-table.kien-fixed col.col-so-cay { width: 60px; }
.line-items-table.kien-fixed col.col-mau { width: 225px; }
.line-items-table.kien-fixed col.col-yard { width: 70px; }
.line-items-table.kien-fixed col.col-lot { width: 70px; }
.line-items-table.kien-fixed col.col-kg { width: 70px; }
.line-items-table.kien-fixed col.col-ngay { width: 130px; }
.line-items-table.kien-fixed col.col-action { width: 24px; }
.remove-row { color: var(--danger); cursor: pointer; font-weight: 700; }

/* --- In Packing List (khổ A4 dọc) --- */
.print-report-wrap { display: inline-block; max-width: 100%; }
.print-header { display: flex; align-items: stretch; gap: 12px; margin-bottom: 14px; width: 100%; box-sizing: border-box; }
.print-o-box, .print-stock-box {
  border: 2px solid #000; display: flex; align-items: center; justify-content: center;
  min-width: 130px; padding: 6px 10px; font-weight: 700; font-size: 30px; text-align: center;
}
.print-stock-box { background: #ffff00; }
.print-title-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.print-title { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.print-title-danger { color: #c00; }
.print-subtitle { font-size: 12px; font-weight: 600; margin-top: 2px; }

/* #print-target: dung chung toan app - trang nao muon in DUNG 1 khoi noi dung cu the (khong
   dinh kem sidebar/topbar/form) thi JS gan .innerHTML vao day + class "active" truoc khi goi
   window.print(). Khi active, an han .layout thay vi chi an sidebar/topbar - trach cac loi
   phan trang du 1 trang trang do .layout/.main con giu chieu cao/flex cua man hinh thuong. */
#print-target { display: none; }

@media print {
  /* Thong nhat 1 font in an cho toan he thong (yeu cau nguoi dung) - dat o body de ke thua
     xuong het moi bang/khu vuc in (dg-print-table, packing-list-table, baocaolo-table,
     ck-report-table...) ma khong can sua tung noi rieng le, vi khong noi nao trong so do
     dang tu dat font-family rieng de ghi de. */
  body { font-family: "Times New Roman", Times, serif; }
  .sidebar, .topbar, .no-print, .page-header .btn, .alert { display: none !important; }
  .layout { min-height: 0 !important; }
  .content { padding: 0 !important; }
  .main { margin: 0 !important; min-height: 0 !important; }
  .card { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .packing-list-table { font-size: 11px; }
  .packing-list-table thead { display: table-header-group; }
  .packing-list-table tr { page-break-inside: avoid; }
  /* Font in that QT tung la 10.5px de sat chieu cao dong voi Excel (yeu cau nguoi dung cu: "in
     Excel mat 2 trang, in web keo dai 3-4 trang") - sau do nguoi dung yeu cau tang lai thanh
     12px de de doc hon (chap nhan in nhieu trang hon Excel). Cot "Ten cong doan" da duoc cap do
     rong % dung ty le voi file Excel that (xem _qt-print.php + buildQtExcelSheetXml() cung 1 bo
     colWidths) ket hop table-layout:fixed (dat o .dg-print-table) - dam bao ten thuong (khong
     qua dai) van vua 1 dong nhu ben Excel, CHI ten nao thuc su dai moi xuong hang (word-break da
     co san). */
  .dg-print-table { font-size: 12px; }
  .dg-print-table th, .dg-print-table td { padding: 2px 4px; line-height: 1.15; }
  body:has(#print-target.active) .layout { display: none !important; }
  #print-target.active { display: block !important; }
  @page { size: A4 portrait; margin: 10mm 8mm 10mm 14mm; }
}

/* --- Nhap hang PL: an/hien cot theo Loai da chon o moi khoi Nhom --- */
.dong-table.hide-kich .col-kich,
.dong-table.hide-size .col-size,
.dong-table.hide-po .col-po,
.dong-table.hide-nuoc-xuat .col-nuoc-xuat,
.dong-table.hide-so-trang .col-so-trang { display: none; }

/* --- Bao cao nhap Lo (Kho Phu Lieu) - dinh dang in an theo mau giay cua cong ty --- */
.baocaolo-wrap { padding: 8px 0; }
.baocaolo-company { text-align: center; font-weight: 700; font-size: 15px; }
.baocaolo-title { text-align: center; font-weight: 700; font-size: 20px; margin-top: 4px; }
.baocaolo-subtitle { text-align: center; font-size: 12px; color: var(--text-muted, #666); margin-bottom: 10px; }
.baocaolo-info-row { display: flex; justify-content: space-between; margin-top: 10px; }
.baocaolo-info-center { text-align: center; margin: 4px 0 10px; }
.baocaolo-table { width: 100%; border-collapse: collapse; }
.baocaolo-table th, .baocaolo-table td { border: 1px solid #999; padding: 5px 8px; font-size: 12px; }
.baocaolo-table thead th { background: #f2f2f2; text-align: center; font-weight: 700; }
.baocaolo-cn { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted, #666); }
.baocaolo-order-no { color: #c00; font-weight: 700; }
.baocaolo-desc-cell { font-weight: 700; }
.baocaolo-total-row td { background: #fff7cc; font-weight: 700; }
.baocaolo-tong-kg-callout {
  display: inline-block; margin: 6px 0 14px; padding: 6px 14px; background: #fff7cc;
  border: 1px solid #e6c860; border-radius: 4px; font-size: 16px; font-weight: 700;
}
.baocaolo-signature { display: flex; justify-content: flex-end; margin-top: 28px; }
.baocaolo-signature-box { text-align: center; font-weight: 700; min-width: 160px; }
.baocaolo-signature-name { margin-top: 52px; font-weight: 700; }

@media print {
  .baocaolo-table { font-size: 11px; }
  .baocaolo-table thead { display: table-header-group; }
  .baocaolo-table tr { page-break-inside: avoid; }
}

/* --- Chuyen kho PL / Bao cao O: 1 BANG DUY NHAT, moi Nhom la 1 <tbody> rieng (khong phai
   nhieu <table> tach roi) - dam bao cac cot LUON thang hang nhau giua cac Nhom. Dung
   table-layout:auto (KHONG dat px co dinh cho tung cot) de trinh duyet tu tinh do rong theo
   dung noi dung/tieu de - tranh han bug cot bi bop het co (vd "SO LO" vo tung ky tu) tung
   gap khi ep do rong px cu the ma khong khop voi kho giay/may in thuc te. Mac dinh MOI o
   khong xuong dong (white-space:nowrap) de cac gia tri ngan (So lo, Ma mau, Kich, PO, Care
   label, Nhap/Xuat/Ton...) luon nam gon 1 dong - rieng cac cot du kien co van ban dai
   (Mau sac, Size, Ghi chu) moi cho xuong dong qua .ck-wrap-cell. */
.ck-report-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 12px; }
.ck-report-table th, .ck-report-table td {
  border: 1px solid #999; padding: 4px 6px; white-space: nowrap;
}
.ck-report-table thead th { background: #f2f2f2; text-align: center; font-weight: 700; }
.ck-report-table .ck-solo-cell { text-decoration: underline dotted; cursor: help; }
.ck-report-table .ck-wrap-cell { white-space: normal; max-width: 180px; word-break: normal; overflow-wrap: break-word; }
.ck-nhom-title-row td {
  background: #eef1f5; font-weight: 700; text-align: left; white-space: normal;
}
.ck-nhom-check-label { display: inline-flex; cursor: pointer; margin-right: 6px; vertical-align: middle; }
.ck-nhom-check-label input { margin: 0; cursor: pointer; }
.ck-total-row td { background: #fff7cc; }
@media print {
  .ck-report-table { font-size: 10px; }
  .ck-report-table thead { display: table-header-group; }
  .ck-report-table tr { page-break-inside: avoid; }
  .ck-nhom-block { page-break-inside: avoid; }
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-right: 10px;
  flex-shrink: 0;
}
.sidebar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
  border-radius: 1px;
}
.sidebar-backdrop { display: none; }

@media (max-width: 800px) {
  .sidebar-toggle { display: block; }
  .topbar { padding: 12px 14px; }
  .content { padding: 14px; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
  }
}