/* ===== CCD Shoptrans — giao diện ===== */
:root {
  --g-900: #14532d;
  --g-800: #166534;
  --g-700: #15803d;
  --g-600: #16a34a;
  --g-200: #bbf7d0;
  --g-100: #dcfce7;
  --g-50: #f0fdf4;

  --ink: #1c2420;
  --ink-2: #4b5650;
  --muted: #7a857f;
  --line: #e3e8e5;
  --line-strong: #cfd8d3;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --head: #f1f6f3;

  --red: #dc2626;
  --red-bg: #fee2e2;
  --amber: #a16207;
  --amber-bg: #fef3c7;
  --blue: #1d4ed8;

  --row-h: 32px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 40, 28, .06), 0 4px 16px rgba(16, 40, 28, .06);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13.5px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
.ico { display: inline-flex; line-height: 0; }
.spacer { flex: 1; }
.muted-text { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; padding: 12px; }

/* ----- Nút ----- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--g-50); border-color: var(--g-200); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.btn-primary:hover { background: var(--g-800); border-color: var(--g-800); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-danger-ghost { color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-bg); border-color: #fecaca; }
.btn-block { width: 100%; justify-content: center; height: 40px; font-size: 14.5px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--g-100); color: var(--g-800); }
.link-btn { border: 0; background: none; color: var(--g-700); cursor: pointer; padding: 0 4px; font-weight: 500; }
.link-btn:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--g-600); outline-offset: 1px; }

/* ----- Đăng nhập ----- */
.auth-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1200px 500px at 10% -10%, #d7f2df 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #e2f4e8 0%, transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 28px 28px 22px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
}
.auth-card h1 { font-size: 19px; margin: 4px 0 2px; font-weight: 650; letter-spacing: -.01em; }
.auth-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  background: var(--g-700); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em;
  padding: 4px 7px; border-radius: 6px;
}
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }

/* ----- Form ----- */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field small, .hint { color: var(--muted); font-size: 12px; }
.field-row { display: flex; gap: 12px; }
.input {
  height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; width: 100%;
}
.input:focus { outline: none; border-color: var(--g-600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.form-err { color: var(--red); font-size: 13px; min-height: 0; }
.form-err:empty { display: none; }
.label { font-weight: 600; font-size: 12.5px; margin: 10px 0 4px; color: var(--ink-2); }

/* ----- Khung ứng dụng ----- */
.shell { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 16px;
  background: var(--g-800); color: #fff; flex-shrink: 0;
}
.topbar .brand-mark { background: #fff; color: var(--g-800); }
.topbar .brand-name { color: #fff; }
.nav { display: flex; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  color: rgba(255, 255, 255, .78); text-decoration: none; border-radius: 6px; font-weight: 500;
}
.nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, .16); color: #fff; }
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #fff;
  padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.user-btn:hover { background: rgba(255, 255, 255, .1); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--g-200); color: var(--g-900);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 11px; opacity: .75; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 50;
}
.dropdown.show { display: block; }
.dd-info { padding: 6px 10px 8px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: none;
  border-radius: 6px; cursor: pointer; text-align: left;
}
.dd-item:hover { background: var(--g-50); }
#view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-report, .page-users, .page-audit { overflow: auto; padding: 18px 20px 40px; gap: 14px; }
.page-title { font-size: 18px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.page-head { display: flex; align-items: center; gap: 10px; }

/* ----- Thanh công cụ bảng ----- */
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; background: var(--surface);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.sel-group { display: none; align-items: center; gap: 6px; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--line); }
.sel-group.active { display: flex; }
.sel-info { font-weight: 600; color: var(--g-800); margin-right: 4px; }
.summary { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
.filterbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; color: var(--muted);
}
.filterbar.has-filter > .ico { color: var(--g-700); }
.f-input {
  height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff;
  width: 110px; color: var(--ink);
}
.f-input:focus { outline: none; border-color: var(--g-600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
select.f-input { width: auto; padding-right: 4px; }
.f-wide { width: 210px; }
.f-check { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); margin: 0 4px; cursor: pointer; }
.dash { color: var(--muted); }

/* ----- Bảng kiểu Excel ----- */
.grid-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--surface); }
table.grid {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.grid th {
  position: sticky; top: 0; z-index: 3; height: 34px; padding: 0 8px;
  background: var(--head); color: var(--ink-2); font-weight: 600; font-size: 12.5px; text-align: left;
  border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid td {
  height: var(--row-h); padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  vertical-align: middle; background: var(--surface); position: relative;
}
.grid tbody tr:hover td { background: #f7fbf8; }
.grid tr.is-selected td { background: var(--g-50); }
.grid tr.is-locked td { background: #f8faf9; }
.grid tr.is-locked.is-selected td { background: #ecf7ef; }

/* Cột cố định bên trái */
.grid .c-sel, .grid .c-stt { position: sticky; z-index: 2; }
.grid .c-sel { left: 0; text-align: center; }
.grid .c-stt { left: 36px; border-right: 1px solid var(--line-strong); }
.grid th.c-sel, .grid th.c-stt { z-index: 4; }
.grid td.c-stt { text-align: right; padding-right: 8px; color: var(--muted); font-size: 12.5px; }
.lock-ico { display: none; color: var(--g-700); margin-right: 3px; vertical-align: -3px; }
.lock-ico svg { width: 13px; height: 13px; }
tr.is-locked .lock-ico { display: inline-flex; }
.c-sel input, th.c-sel input { width: 15px; height: 15px; accent-color: var(--g-700); cursor: pointer; margin: 0; vertical-align: middle; }
th.c-sl, td.c-sl { text-align: center; }
th.c-muc_chi, th.c-muc_thu { text-align: right; }
th.c-be_luong, td.c-be_luong { text-align: center; }

/* Ô nhập */
.cell {
  width: 100%; height: calc(var(--row-h) - 1px); padding: 0 8px; border: 0; background: transparent;
  outline: none; border-radius: 0;
}
.cell:focus { box-shadow: inset 0 0 0 2px var(--g-600); background: #fff; }
.cell[readonly] { cursor: default; }
.cell[readonly]:focus { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cell-money { text-align: right; }
.cell-date { font-variant-numeric: tabular-nums; }
.cell-select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a857f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; }
.cell-select:disabled { cursor: default; background-image: none; opacity: 1; }
.cell-check { width: 16px; height: 16px; accent-color: var(--g-700); cursor: pointer; margin: 0; vertical-align: middle; }
.cell-check:disabled { cursor: default; }
.cell.saving { opacity: .55; }

/* Phân luồng có màu */
.luong[data-v="XANH"] { color: #15803d; font-weight: 600; background-color: #e7f8ec; }
.luong[data-v="VANG"] { color: #a16207; font-weight: 600; background-color: #fef6d8; }
.luong[data-v="DO"] { color: #b91c1c; font-weight: 600; background-color: #fde8e8; }

/* Số tờ khai dạng chip */
.tk-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 6px; min-height: calc(var(--row-h) - 1px); cursor: text; }
.tk-chips { display: contents; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; height: 23px; padding: 0 3px 0 8px;
  background: var(--g-50); border: 1px solid var(--g-200); border-radius: 5px;
  font-family: var(--mono); font-size: 12.5px; color: var(--g-900); letter-spacing: .01em;
}
tr.is-readonly .chip { padding-right: 8px; }
.chip-text { cursor: pointer; }
tr.is-readonly .chip-text { cursor: default; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; padding: 0;
}
.chip-x svg { width: 12px; height: 12px; }
.chip-x:hover { background: var(--red-bg); color: var(--red); }
.tk-add, .tk-edit {
  height: 23px; width: 118px; padding: 0 7px; border: 1px dashed var(--line-strong); border-radius: 5px;
  background: transparent; font-family: var(--mono); font-size: 12.5px; outline: none;
}
.tk-add { width: 30px; padding: 0; text-align: center; transition: width .12s; }
.tk-add::placeholder { font-family: var(--font); color: var(--g-700); font-size: 15px; font-weight: 600; }
.tk-add:focus, .tk-add:not(:placeholder-shown) { width: 118px; padding: 0 7px; text-align: left; }
.tk-add:focus::placeholder { color: transparent; }
tr:hover .tk-add { border-color: var(--g-600); }
.tk-add:focus, .tk-edit:focus { border: 1px solid var(--g-600); background: #fff; box-shadow: 0 0 0 2px rgba(22, 163, 74, .15); }
.tk-edit { width: 128px; border-style: solid; }
.tk-add.invalid, .tk-edit.invalid { border-color: var(--red) !important; background: #fff5f5; box-shadow: 0 0 0 2px rgba(220, 38, 38, .15) !important; }
.tk-pop {
  position: fixed; z-index: 80; max-width: 380px; padding: 7px 10px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.4; display: none; pointer-events: none; box-shadow: var(--shadow);
}
.tk-pop.show { display: block; }
.tk-pop.err { background: #7f1d1d; color: #fff; }
.tk-pop.info { background: var(--ink); color: #fff; }
.sl-num { font-weight: 700; color: var(--g-800); }

.chot-wrap { display: flex; align-items: center; gap: 7px; padding: 0 8px; height: calc(var(--row-h) - 1px); cursor: pointer; }
.chot-cb { width: 16px; height: 16px; accent-color: var(--g-700); margin: 0; cursor: pointer; flex-shrink: 0; }
.chot-cb:disabled { cursor: default; }
.chot-time { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.c-nguoi_nhap span { padding: 0 8px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
td.c-act { text-align: center; white-space: nowrap; }
td.c-act .icon-btn { width: 26px; height: 26px; }
td.c-act .act-del:hover { background: var(--red-bg); color: var(--red); }

/* Hiệu ứng lưu */
@keyframes okflash { from { box-shadow: inset 0 0 0 2px #22c55e; } to { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes errflash { from { box-shadow: inset 0 0 0 2px var(--red); } to { box-shadow: inset 0 0 0 2px transparent; } }
.flash-ok { animation: okflash 1s ease-out; }
.flash-err { animation: errflash 1.6s ease-out; }
@keyframes newrow { from { background: var(--g-100); } to { background: var(--surface); } }
tr.is-new td { animation: newrow 1.8s ease-out; }

.empty-row td { height: 120px; text-align: center; color: var(--muted); font-size: 14px; }
.loading-more { display: none; padding: 10px; text-align: center; color: var(--muted); }
.loading-more.show { display: block; }
.sentinel { height: 1px; }

/* ----- Thẻ, bảng dữ liệu ----- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.card-head { display: flex; align-items: center; padding: 12px 16px 0; }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--head);
  padding: 8px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.data td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.data .num { text-align: right; }
.data tr.total td, .data tfoot td { font-weight: 700; background: var(--g-50); border-bottom: 0; }
.data td.up { color: var(--g-700); font-weight: 600; }
.data td.down { color: var(--red); font-weight: 600; }
.data td.detail { color: var(--ink-2); font-size: 12.5px; }
.card .table-scroll { margin-top: 10px; }
.page-users .card .table-scroll, .page-audit .card .table-scroll { margin-top: 0; }
.data.users tr.is-off td { color: var(--muted); }
.data td.actions { white-space: nowrap; text-align: right; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.b-on { background: var(--g-100); color: var(--g-800); }
.b-off { background: #eceff1; color: #59636b; }
.b-warn { background: var(--red-bg); color: #991b1b; }
.b-wait { background: var(--amber-bg); color: var(--amber); }
.role { font-weight: 600; font-size: 12.5px; }
.r-admin { color: var(--g-800); }
.r-level2 { color: var(--blue); }
.r-level1 { color: var(--ink-2); }

/* ----- Báo cáo ----- */
.report-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: #e6ece8; border-radius: 8px; padding: 3px; }
.seg-btn { border: 0; background: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.seg-btn.active { background: #fff; color: var(--g-800); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 600; }
.years-box { display: inline-flex; align-items: center; gap: 6px; }
.scope { color: var(--muted); margin-left: auto; }
.report-body { display: flex; flex-direction: column; gap: 14px; transition: opacity .15s; }
.report-body.is-loading { opacity: .5; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; border-left: 3px solid var(--line); }
.tile-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.tile-value { font-size: 20px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile-sub { font-size: 12px; color: var(--ink-2); }
.tile-money .tile-value { font-size: 17px; }
.tile-hero { border-left-color: var(--g-700); }
.tile-hero .tile-value { font-size: 26px; color: var(--g-800); }
.t-xanh { border-left-color: #16a34a; }
.t-vang { border-left-color: #eab308; }
.t-do { border-left-color: #dc2626; }
.chart-wrap { position: relative; padding: 8px 12px 12px; }
.chart-svg { width: 100%; height: auto; display: block; }
.ax-grid { stroke: #edf1ee; stroke-width: 1; }
.ax-base { stroke: var(--line-strong); stroke-width: 1; }
.ax-text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.hit { fill: transparent; cursor: crosshair; }
.hl { fill: #f1f6f3; }
.chart-tip {
  position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12.5px; min-width: 150px; display: none; z-index: 5;
}
.chart-tip.show { display: block; }
.tip-title { font-weight: 650; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; }
.tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.legend { display: flex; gap: 18px; padding: 10px 16px 0; flex-wrap: wrap; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.empty-chart { padding: 50px 16px; text-align: center; color: var(--muted); }

/* ----- Modal ----- */
.modal-back {
  position: fixed; inset: 0; background: rgba(15, 30, 22, .38); display: grid; place-items: center;
  padding: 16px; z-index: 100; opacity: 0; transition: opacity .16s;
}
.modal-back.show { opacity: 1; }
.modal {
  width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  transform: translateY(8px); transition: transform .16s; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.modal-back.show .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.modal-body { padding: 8px 18px 4px; overflow: auto; }
.modal-text { margin: 4px 0 8px; color: var(--ink-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
.pw-box { display: flex; align-items: center; gap: 10px; background: var(--g-50); border: 1px solid var(--g-200); border-radius: 8px; padding: 10px 12px; }
.pw { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--g-900); flex: 1; user-select: all; }
.warn-text { color: var(--amber); font-size: 12.5px; margin: 8px 0 0; }
.msg-tpl { background: #f6f8f7; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0;
  font-family: var(--font); font-size: 13px; white-space: pre-wrap; }

/* ----- Toast ----- */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  max-width: 420px; padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--g-800);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; font-size: 13px;
}
.toast.show { opacity: 1; transform: none; }
.toast-err { background: #991b1b; }
.toast-warn { background: #92400e; }

/* ----- Màn hình nhỏ ----- */
@media (max-width: 760px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .brand-name, .user-meta, .nav-link span { display: none; }
  .toolbar, .filterbar { padding-left: 10px; padding-right: 10px; }
  .f-wide { width: 100%; }
  .page-report, .page-users, .page-audit { padding: 14px 12px 30px; }
  .field-row { flex-direction: column; }
  .scope { margin-left: 0; }
}

/* ===== Căn giữa nội dung bảng =====
   Giữa: các cột ngắn (STT, ngày, mã, loại hình, tờ khai, SL, luồng, checkbox, chốt).
   Trái: tên KH, ghi chú (chữ dài, căn trái dễ đọc).
   Phải: mức chi/thu (số tiền thẳng hàng đơn vị để so sánh). */
table.grid { margin: 0 auto; }                         /* màn hình rộng hơn bảng -> bảng nằm giữa */
.grid th { text-align: center; }
.grid th.c-ten_kh, .grid th.c-ghi_chu_rul, .grid th.c-ghi_chu_user { text-align: left; padding-left: 10px; }
.grid th.c-muc_chi, .grid th.c-muc_thu { text-align: right; padding-right: 10px; }
.grid td { text-align: center; }
.grid td.c-stt { text-align: center; padding-right: 0; }
.grid td.c-ten_kh, .grid td.c-ghi_chu_rul, .grid td.c-ghi_chu_user { text-align: left; }
.cell { text-align: center; }
.cell[data-field="ten_kh"], .cell[data-field="ghi_chu_rul"], .cell[data-field="ghi_chu_user"] { text-align: left; padding-left: 10px; }
.cell-money { text-align: right; padding-right: 10px; }
.cell-select { text-align: center; text-align-last: center; padding-left: 20px; }
.cell-select:disabled { padding-left: 8px; padding-right: 8px; }
.tk-wrap { justify-content: center; }
.chot-wrap { justify-content: center; }
.c-nguoi_nhap span { text-align: center; }
/* Màu phân luồng phủ kín cả ô (kể cả dòng cao do nhiều tờ khai) */
.grid td.c-phan_luong:has(.luong[data-v="XANH"]) { background: #e7f8ec; }
.grid td.c-phan_luong:has(.luong[data-v="VANG"]) { background: #fef6d8; }
.grid td.c-phan_luong:has(.luong[data-v="DO"]) { background: #fde8e8; }
.luong[data-v] { background-color: transparent; }
/* Tiêu đề bảng: căn giữa đồng đều mọi cột */
.grid th, .grid th.c-ten_kh, .grid th.c-ghi_chu_rul, .grid th.c-ghi_chu_user,
.grid th.c-muc_chi, .grid th.c-muc_thu { text-align: center; padding: 0 6px; }
/* Nội dung ô: căn giữa toàn bộ, mũi tên dropdown chỉ hiện khi rê chuột/đang chọn */
.grid td, .grid td.c-ten_kh, .grid td.c-ghi_chu_rul, .grid td.c-ghi_chu_user { text-align: center; }
.grid .cell, .grid .cell[data-field="ten_kh"], .grid .cell[data-field="ghi_chu_rul"],
.grid .cell[data-field="ghi_chu_user"], .grid .cell-money { text-align: center; padding: 0 8px; }
.grid .cell-select { padding: 0 8px; background-image: none; text-align: center; text-align-last: center; }
.grid tr:hover .cell-select:not(:disabled), .grid .cell-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a857f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}

/* Phiên bản cạnh logo */
.brand-ver { font-size: 11px; font-weight: 600; color: var(--muted); padding: 1px 6px; border: 1px solid var(--line); border-radius: 99px; }
.brand-ver:empty { display: none; }
.topbar .brand-ver { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }

/* Logo bấm được -> về Tờ khai */
.brand-link { color: inherit; text-decoration: none; border-radius: 8px; padding: 4px 6px; margin-left: -6px; }
.brand-link:hover { background: rgba(255,255,255,.1); }

/* v1.1.4 — Ô số tờ khai thu gọn 1 dòng, bấm "+N" mở bảng nổi */
.tk-wrap { flex-wrap: nowrap; overflow: hidden; }
.tk-wrap:not(.open) .tk-chips .chip:not(:first-child) { display: none; }
.tk-more {
  height: 23px; padding: 0 7px; border: 1px solid var(--g-200); border-radius: 5px; flex-shrink: 0;
  background: var(--g-100); color: var(--g-800); font-weight: 700; font-size: 12px; cursor: pointer;
}
.tk-more:hover { background: var(--g-200); }
.grid td.c-tk { overflow: visible; }
.tk-wrap.open {
  position: absolute; top: -1px; left: -1px; z-index: 2; width: 300px; min-width: calc(100% + 2px);
  flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; overflow: auto; max-height: 240px;
  background: #fff; border: 1px solid var(--g-600); border-radius: 6px; padding: 6px;
  box-shadow: 0 8px 24px rgba(16, 40, 28, .18);
}
.tk-wrap.open .tk-more { display: none; }

/* v1.2.0 — Mức chênh + tổng tiền */
.chenh-val { display: block; padding: 0 8px; font-weight: 600; color: var(--g-800); text-align: center; }
.chenh-val.neg { color: var(--red); }
.grid td.c-muc_chenh { background: #f7faf8; }
.summary { display: inline-flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.sum-money { color: var(--muted); }
.sum-money b { color: var(--ink); font-weight: 650; }
.sum-money b.pos { color: var(--g-800); }
.sum-money b.neg { color: var(--red); }
.tile-money.neg .tile-value { color: var(--red); }
.data td.neg { color: var(--red); font-weight: 600; }
.data td.pos { color: var(--g-800); font-weight: 600; }
.money-note { padding: 8px 16px 12px; color: var(--muted); font-size: 12.5px; }

.money-block { display: flex; flex-direction: column; gap: 14px; }
.section-title { margin: 8px 0 0; font-size: 15px; font-weight: 650; color: var(--g-800); }

/* ===== v1.2.1 — Căn giữa chuẩn từng cột ===== */
/* Mọi ô dạng chữ: cùng cỡ chữ, căn dọc giống ô nhập */
.grid .stt-num, .grid .sl-num, .grid .chenh-val, .grid .c-nguoi_nhap span {
  display: block; height: calc(var(--row-h) - 1px); line-height: calc(var(--row-h) - 1px); font-size: 13.5px;
}
.grid td.c-stt { position: sticky; }
.grid .lock-ico { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); margin: 0; }
tr.is-locked .lock-ico { display: inline-flex; }

/* Chữ dài: cắt bằng "…" khi không sửa */
.grid .cell { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* Đã chốt: ô tick luôn ở tâm, giờ chốt (ngắn) nằm bên phải */
.chot-wrap { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 7px; align-items: center; padding: 0 6px; }
.chot-time { justify-self: start; overflow: hidden; text-overflow: ellipsis; }

/* Số tờ khai: số đúng tâm; "+N" là huy hiệu góc chip; nút "+" ghim mép phải */
.tk-wrap:not(.open) { position: relative; justify-content: center; overflow: visible; }
.chip { position: relative; }
.tk-badge {
  position: absolute; top: -6px; right: -14px; min-width: 18px; height: 15px; padding: 0 4px;
  border: 0; border-radius: 99px; background: var(--g-700); color: #fff;
  font: 700 10px/15px var(--font); cursor: pointer; z-index: 1;
}
.tk-badge:hover { background: var(--g-900); }
.tk-wrap.open .tk-badge { display: none; }
.tk-wrap:not(.open):not(.empty) .tk-add {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s;
}
.grid tr:hover .tk-wrap .tk-add, .tk-wrap .tk-add:focus, .tk-wrap .tk-add:not(:placeholder-shown) { opacity: 1; }
/* Căn dọc ô chữ theo đúng cách ô nhập (line-height normal + căn giữa khối) để chữ cùng hàng trên mọi máy */
.grid .stt-num, .grid .sl-num, .grid .chenh-val, .grid .c-nguoi_nhap span {
  display: flex; align-items: center; justify-content: center; line-height: normal;
}

.grid .lock-ico { left: 4px; }
.grid .lock-ico svg { width: 12px; height: 12px; }
.chot-time { font-size: 11.5px; white-space: nowrap; }

/* ===== v1.3.0 — Co giãn cột ===== */
.grid th { position: sticky; }
.grid th .th-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-resizer {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 5;
}
.col-resizer::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 3px; width: 2px; border-radius: 1px; background: transparent;
}
.grid th:hover .col-resizer::after { background: var(--line-strong); }
.col-resizer:hover::after, body.col-resizing .col-resizer::after { background: var(--g-600) !important; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* Nhãn tiêu đề không bị ảnh hưởng bởi style của ô nội dung */
.grid th .th-label {
  display: block !important; height: auto !important; line-height: normal !important;
  padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important;
}

/* ===== v1.4.0 — NVKB / NVHT, Hiện trường ===== */
/* Ô không thuộc quyền của user trên lô này */
.grid .cell.na::placeholder { color: var(--muted); opacity: .7; }
.grid .cell.na { cursor: default; }
.chot-wrap.na .chot-cb, .chot-wrap.na .chot-time { visibility: hidden; }
.chot-wrap.na::after { content: '—'; grid-column: 2; grid-row: 1; color: var(--muted); opacity: .7; }
/* Hiện trường */
.ht-text { display: flex; align-items: center; justify-content: center; height: calc(var(--row-h) - 1px); padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.grid td.ht-none { background: #fffbeb; }
.grid td.ht-none .ht-text, .grid td.ht-none .ht-select { color: #a16207; font-weight: 600; }
.grid tbody tr:hover td.ht-none { background: #fef3c7; }
.role-checks { display: flex; gap: 14px; flex-wrap: wrap; }
.role-checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.role-checks input { width: 16px; height: 16px; accent-color: var(--g-700); }
.role-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 700; margin-right: 4px; }
.role-tag.t-admin { background: var(--g-100); color: var(--g-800); }
.role-tag.t-nvkb { background: #e0e7ff; color: #3730a3; }
.role-tag.t-nvht { background: #ffedd5; color: #9a3412; }
.role-tag.t-thu { background: #f1f5f9; color: #334155; font-weight: 600; }

.chot-wrap.na::after { align-self: center; justify-self: center; font-size: 13.5px; line-height: 1; }