/* Khung Nghiệp vụ trên form chứng từ + trang module nghiepvu */
.nv-panel { border: 1px solid #d9e2ec; border-left: 4px solid #2f6fb3; border-radius: 4px; background: #f8fbff; padding: 8px 12px; margin: 0 0 12px; }
.nv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nv-title { font-weight: 600; color: #2f6fb3; margin-right: auto; }
.nv-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.nv-body { margin-top: 8px; }
.nv-body .table, .nv-page .table { margin-bottom: 6px; background: #fff; font-size: 12.5px; }
.nv-body .table > thead > tr > th, .nv-page .table > thead > tr > th { background: #eef3f8; white-space: nowrap; }
.nv-alert { padding: 6px 10px; margin: 6px 0; font-size: 13px; }
.nv-sub { margin: 8px 0 4px; }
.nv-links .label { display: inline-block; margin: 2px; font-weight: normal; font-size: 12px; }
.nv-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.nv-kpi { background: #fff; border: 1px solid #e3e8ee; border-radius: 4px; padding: 6px 10px; min-width: 130px; }
.nv-kpi-v { font-size: 16px; font-weight: 600; }
.nv-kpi-l { font-size: 11.5px; color: #6b7785; }
.nv-kpi.nv-danger .nv-kpi-v { color: #c0392b; }
.nv-kpi.nv-warning .nv-kpi-v { color: #b9770e; }
.nv-kpi.nv-success .nv-kpi-v { color: #1e7b34; }
.nv-spin { animation: nv-spin 1s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }
.nv-page .nv-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 12px; }
.nv-page .nv-tools .form-control { width: auto; display: inline-block; }
@media (max-width: 600px) { .nv-actions .btn { width: 100%; text-align: left; } .nv-kpi { flex: 1 1 45%; min-width: 0; } }
/* thông báo nổi của các module (#hqms-toasts) trên trang AppGini - apps.css chỉ nạp ở trang /apps */
#hqms-toasts { position: fixed; top: 70px; right: 16px; z-index: 20000; width: 380px; max-width: calc(100% - 32px); }
#hqms-toasts .hqms-toast { box-shadow: 0 4px 14px rgba(0,0,0,.18); margin-bottom: 8px; white-space: pre-line; }
/* ===== ITL: audit trên từng bản ghi (assets/js/nghiepvu.js) ===== */
/* tóm tắt đầu hộp thoại "Lịch sử thay đổi" */
.itl-audit { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 12px; margin-bottom: 10px; background: #f7f9fc; border: 1px solid #e3e8ef;
	border-radius: 4px; font-size: 12.5px; color: #4b5563; }
.itl-audit .glyphicon { color: #94a3b8; margin-right: 2px; }
/* nút trên tiêu đề form: cùng cỡ với "Sao chép URL" */
body .detail_view .panel-heading > .panel-title > .itl-lichsu-btn { margin-left: 6px; height: 22px; padding: 1px 8px; font-size: 12px; line-height: 18px; font-weight: 500; }
body .detail_view .panel-heading > .panel-title > .itl-lichsu-btn.itl-lichsu-solo { margin-left: auto; }
body .detail_view .panel-heading > .panel-title > .itl-lichsu-btn ~ #admin-tools-menu-button { margin-left: 8px; }
.itl-al { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #e3e8ef; }
.itl-al-item { position: relative; margin: 0 0 12px; }
.itl-al-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; border: 2px solid #fff; }
.itl-al-success::before { background: #4caf50; } .itl-al-danger::before { background: #d9534f; } .itl-al-info::before { background: #337ab7; }
.itl-al-head { margin-bottom: 4px; }
.itl-al-note { font-style: italic; color: #6b7280; margin-bottom: 4px; }
.itl-al-tbl { font-size: 12.5px; margin: 0; background: #fff; }
.itl-al-tbl > thead > tr > th { background: #f3f6fa; font-weight: 600; }
.itl-al-f { width: 28%; color: #374151; }
.itl-al-old { color: #b42318; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .35); width: 34%; }
.itl-al-new { color: #166534; width: 34%; }
/* ===== Sơ đồ kho trực quan (pages/sodokho.php, assets/js/sodokho.js) ===== */
.sk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sk-tools > select { width: auto; max-width: 320px; }
.sk-spacer { flex: 1; }
.sk-kpis .nv-kpi-v { font-size: 20px; }
.sk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; font-size: 12px; color: #4b5563; }
.sk-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #4b5563; }
.sk-lg i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }
.sk-lgs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.sk-map { background: #eef1f5; border: 1px solid #d5dce6; border-radius: 6px; padding: 12px; overflow-x: auto; }
.sk-zone { background: #fff; border: 1px solid #d5dce6; border-radius: 6px; padding: 8px 10px 10px; margin-bottom: 12px; }
.sk-zone-h { font-weight: 600; color: #1f3b63; margin-bottom: 6px; }
.sk-zone-h small { color: #8a94a3; font-weight: 400; margin-left: 6px; }
.sk-row { display: flex; align-items: flex-end; gap: 8px; }
.sk-row-l { width: 52px; flex: 0 0 52px; font-size: 11px; color: #6b7280; padding-bottom: 6px; }
.sk-walk { margin: 6px 0 8px 60px; height: 14px; border-top: 1px dashed #c8d0db; border-bottom: 1px dashed #c8d0db; font-size: 10px; line-height: 12px;
	color: #a3acb9; text-align: center; letter-spacing: .3em; text-transform: uppercase; }
.sk-rack { flex: 1 1 0; min-width: 84px; max-width: 150px; background: #8a96a8; border-radius: 4px; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.sk-rack-empty { background: transparent; border: 1px dashed #d5dce6; min-height: 60px; }
.sk-rack-l { font-size: 10px; color: #fff; text-align: center; line-height: 12px; }
.sk-floor { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-floor .sk-o { width: 110px; height: 56px; }
.sk-o { position: relative; height: 42px; border-radius: 3px; cursor: pointer; padding: 3px 5px; font-size: 11px; line-height: 14px; overflow: hidden;
	border: 1px solid rgba(0,0,0,.10); transition: transform .08s, box-shadow .08s; user-select: none; }
.sk-o:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.25); }
.sk-o-n { display: block; font-weight: 600; opacity: .9; }
.sk-o-v { display: block; font-size: 12px; font-weight: 700; }
.sk-o-warn { position: absolute; top: 2px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #d9534f; font-weight: 800;
	text-align: center; line-height: 14px; font-size: 11px; }
.sk-o-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.85); }
.sk-o.sk-door::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f9aa8; }
.sk-door-k { display: inline-block; width: 4px; height: 12px; background: #1f9aa8; vertical-align: middle; }
.sk-o.sk-res { outline: 2px dashed rgba(240,173,78,.9); outline-offset: -3px; }
.sk-o.sk-lock { background: repeating-linear-gradient(45deg, #e2e5ea 0 6px, #f6f8fb 6px 12px) !important; }
.sk-o.sk-sel { box-shadow: 0 0 0 3px #1d4f91, 0 2px 8px rgba(15,23,42,.35); z-index: 2; }
.sk-searching .sk-o:not(.sk-hit) { opacity: .25; }
.sk-o.sk-hit { box-shadow: 0 0 0 3px #f1c40f; }
.sk-dragging .sk-o { outline: 1px dashed #1d4f91; }
.sk-o.sk-drop { box-shadow: 0 0 0 3px #3c9a5f !important; transform: scale(1.04); }
.sk-dock { margin-top: 4px; padding: 6px; text-align: center; background: repeating-linear-gradient(90deg, #f1c40f 0 14px, #2c3e50 14px 28px); color: #fff;
	font-weight: 700; letter-spacing: .15em; border-radius: 4px; text-shadow: 0 1px 2px #000; }
.sk-side .panel-body { padding: 10px 12px; }
.sk-load { height: 8px; background: #edf0f4; border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.sk-load > div { height: 100%; background: linear-gradient(90deg, #2e86c1, #e67e22); }
.sk-card { border: 1px solid #dfe5ec; border-radius: 5px; padding: 6px 8px; margin: 8px 0; background: #fbfcfe; cursor: grab; }
.sk-card:active { cursor: grabbing; }
.sk-card-h { font-size: 13px; }
.sk-card-m { font-size: 12px; color: #4b5563; margin: 2px 0; }
.sk-card-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sk-card-q { font-size: 16px; }
.sk-card .sk-q { display: inline-block; width: 64px; height: 24px; padding: 1px 6px; vertical-align: middle; }
.sk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.sk-nhap > * { margin-top: 6px; }
.sk-2 { display: flex; gap: 6px; }
.sk-2 > * { flex: 1 1 0; min-width: 0; }
.sk-chart { width: 100%; height: auto; display: block; }
.sk-ax { font-size: 9px; fill: #6b7280; }
@media (max-width: 767px) { .sk-rack { min-width: 64px; } .sk-row-l { display: none; } .sk-walk { margin-left: 0; } }
/* ===== Khung trực quan trên form chi tiết (assets/js/truc_quan.js): consol, container, kiện Air ===== */
.tq-panel { border: 1px solid #d5dce6; border-radius: 6px; background: #f7f9fc; margin: 0 0 14px; }
.tq-head { padding: 6px 12px; border-bottom: 1px solid #e3e8ef; font-weight: 600; color: #1f3b63; font-size: 13px; }
.tq-head .tq-toggle { font-weight: 400; font-size: 12px; }
.tq-body { padding: 10px 12px; }
.tq-title { margin: 2px 0 6px; font-size: 13px; }
.tq-title code { font-size: 12px; }
.tq-row { display: flex; flex-wrap: wrap; gap: 18px; }
.tq-cont-wrap { flex: 3 1 420px; min-width: 300px; }
.tq-tl-wrap { flex: 2 1 320px; min-width: 280px; }
/* container nhìn ngang */
.tq-cont { display: flex; height: 74px; border: 3px solid #4a5568; border-radius: 4px; background: repeating-linear-gradient(90deg, #dfe4ea 0 6px, #eef1f5 6px 12px); }
.tq-cont-body { flex: 1; display: flex; padding: 3px; gap: 2px; overflow: hidden; }
.tq-door { width: 12px; background: repeating-linear-gradient(0deg, #4a5568 0 3px, #718096 3px 8px); border-left: 2px solid #2d3748; }
.tq-lot { position: relative; color: #fff; border-radius: 3px; padding: 4px 5px; font-size: 11px; line-height: 13px; overflow: hidden; min-width: 14px;
	box-shadow: inset 0 -12px 18px rgba(0,0,0,.12); cursor: help; }
.tq-lot span { display: block; font-weight: 700; white-space: nowrap; }
.tq-lot small { opacity: .9; }
.tq-lot.tq-lech { outline: 2px solid #f1c40f; outline-offset: -2px; }
.tq-lot.tq-hu { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 5px, transparent 5px 10px) !important; }
.tq-fumi, .tq-warn { position: absolute; bottom: 3px; right: 3px; font-style: normal; font-weight: 800; font-size: 10px; width: 14px; height: 14px; line-height: 14px;
	text-align: center; border-radius: 50%; background: #fff; color: #3c9a5f; }
.tq-warn { right: 19px; color: #d9822b; }
.tq-free { display: flex; align-items: center; justify-content: center; color: #8a94a3; font-size: 11px; border: 1px dashed #b8c2cf; border-radius: 3px; }
.tq-wheels { display: flex; gap: 6px; padding: 0 14px; height: 10px; }
.tq-wheels i { width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #2d3748; border: 3px solid #718096; }
.tq-wheels span { flex: 1; }
.tq-bar { position: relative; height: 16px; background: #e3e8ef; border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.tq-bar > div { height: 100%; background: linear-gradient(90deg, #3c9a5f, #2e86c1); }
.tq-bar > div.tq-over { background: #d9534f; }
.tq-bar > span { position: absolute; left: 8px; top: 0; font-size: 11px; line-height: 16px; color: #1f2937; z-index: 1; }
.tq-bar-sm { height: 14px; }
.tq-bar-sm > span { line-height: 14px; }
/* dòng thời gian mốc */
.tq-tl { position: relative; height: 40px; margin: 6px 12px 4px; }
.tq-tl::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 3px; background: #c8d0db; border-radius: 2px; }
.tq-tl-p { position: absolute; top: 10px; transform: translateX(-50%); }
.tq-tl-p > i, .tq-tl-list i { display: block; width: 19px; height: 19px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9aa4b2; background: #c8d0db;
	font-style: normal; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; color: #fff; }
.tq-ok > i { background: #3c9a5f; } .tq-late > i { background: #d9534f; } .tq-todo > i { background: #fff; color: #2e86c1; box-shadow: 0 0 0 2px #2e86c1; }
.tq-tl-list { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 14px; font-size: 11px; color: #4b5563; }
.tq-tl-list li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; break-inside: avoid; }
.tq-tl-list li i { flex: 0 0 19px; }
.tq-tl-list li b { margin-left: auto; color: #1f2937; white-space: nowrap; }
.tq-tl-list li.tq-late b { color: #d9534f; }
.tq-tl-t { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 92px; text-align: center; font-size: 10px; line-height: 11px; color: #4b5563; }
.tq-tl-t.tq-dn { bottom: auto; top: 20px; }
.tq-late .tq-tl-t b { color: #d9534f; }
.tq-now { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed #d9534f; }
.tq-now span { position: absolute; top: -12px; left: -18px; font-size: 10px; color: #d9534f; font-weight: 700; white-space: nowrap; }
/* thẻ container */
.tq-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.tq-card { width: 290px; background: #fff; border: 1px solid #dfe5ec; border-radius: 6px; padding: 8px 10px; }
.tq-box { position: relative; height: 54px; border-radius: 3px; color: #fff; padding: 5px 8px; font-size: 12px;
	background: repeating-linear-gradient(90deg, #1f5e9c 0 5px, #2a6db0 5px 10px); border: 2px solid #18456f; }
.tq-box.tq-f20 { width: 62%; }
.tq-box.tq-rf { background: repeating-linear-gradient(90deg, #d7dde3 0 5px, #e9edf1 5px 10px); color: #1f2937; border-color: #9aa4b2; }
.tq-box-no { display: block; font-weight: 700; font-family: Consolas, monospace; letter-spacing: .05em; }
.tq-box-t { position: absolute; right: 6px; top: 4px; font-weight: 700; opacity: .85; }
.tq-box-seal { position: absolute; right: 6px; bottom: 4px; background: #f1c40f; color: #1f2937; border-radius: 2px; padding: 0 4px; font-size: 10px; font-weight: 700; }
.tq-steps { display: flex; gap: 6px; margin: 6px 0; }
.tq-steps span { flex: 1; font-size: 11px; color: #8a94a3; padding-left: 14px; position: relative; line-height: 13px; }
.tq-steps span i { position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #c8d0db; }
.tq-steps span.tq-done { color: #1f2937; } .tq-steps span.tq-done i { background: #3c9a5f; border-color: #3c9a5f; }
/* kiện Air */
.tq-pkgs { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin: 4px 0 10px; }
.tq-pkg { display: flex; align-items: flex-end; gap: 10px; }
.tq-pkg.tq-tmp { opacity: .55; }
.tq-iso { position: relative; background: #c89b5f; border: 1px solid #8a6534; margin-top: var(--d); margin-right: var(--d); }
.tq-iso-top { position: absolute; left: 0; right: 0; height: var(--d); bottom: 100%; background: #dcb37a; border: 1px solid #8a6534;
	transform-origin: bottom left; transform: skewX(-45deg); left: calc(var(--d) / 2); }
.tq-iso-side { position: absolute; top: 0; bottom: 0; width: var(--d); left: 100%; background: #a87d45; border: 1px solid #8a6534;
	transform-origin: top left; transform: skewY(-45deg); top: calc(var(--d) / -2); }
.tq-pkg-l { font-size: 11px; line-height: 14px; color: #374151; }
.tq-cw { max-width: 520px; }
.tq-cw-r { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.tq-cw-r > span { width: 140px; color: #4b5563; }
.tq-cw-r > div { flex: 1; height: 10px; background: #e3e8ef; border-radius: 5px; overflow: hidden; }
.tq-cw-r > div i { display: block; height: 100%; background: #5a6b8c; }
.tq-cw-r > div i.tq-v { background: #d9822b; }
.tq-cw-r > b { width: 80px; text-align: right; }
.tq-cw-x { font-size: 13px; margin-top: 4px; }