:root {
  --bg: #f4f6f8; --card: #fff; --ink: #1c2733; --muted: #6b7785;
  --line: #e2e8f0; --brand: #1f7a5a; --brand2: #2563eb; --warn: #c0392b;
  --chip: #eef2f6;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
.topbar {
  background: var(--ink); color: #fff; padding: 14px 22px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar .sub { color: #aab6c2; font-size: 13px; }
.rule-status { margin-left: auto; font-size: 12px; color: #9fe6c8; }
main { max-width: 1180px; margin: 18px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.card h2 { font-size: 15px; margin: 0 0 14px; }
.card h2 small { color: var(--muted); font-weight: 400; }
.card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-actions { display: flex; gap: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.filebox-title small { color: var(--muted); font-weight: 400; }
.filebox { display: flex; flex-direction: column; gap: 6px; border: 1px dashed var(--line); border-radius: 8px; padding: 14px; }
.filebox-title { font-weight: 600; }
.filebox-info { font-size: 12px; color: var(--muted); }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.obj { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.obj-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.obj-name { font-weight: 600; font-size: 14px; border: none; border-bottom: 1px solid var(--line); padding: 3px 2px; min-width: 180px; }
.chk { font-size: 13px; }
.prio { font-size: 12px; color: var(--muted); }
.prio-in { width: 48px; }
.tag { background: var(--chip); border-radius: 5px; padding: 2px 8px; font-size: 11px; color: var(--muted); }
.params { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.p { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.p input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; color: var(--ink); }
.p input[type=checkbox] { width: 18px; height: 18px; }
.p select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; color: var(--ink); background: #fff; }
.promo-block { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; background: #fafbfc; }
.promo-title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.custom-rules { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.cr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cr-title { font-size: 12px; font-weight: 600; }
.cr-empty { font-size: 12px; }
.cr-list { display: flex; flex-direction: column; gap: 6px; }
.cr-row { display: flex; gap: 8px; align-items: center; }
.cr-row .cr-name { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.cr-row .cr-kind { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; background: #fff; }
.cr-row .cr-val { width: 130px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.cr-row input[type=checkbox] { width: 18px; height: 18px; }

input { font-family: inherit; }
.advanced { margin-top: 8px; }
.advanced summary { cursor: pointer; color: var(--brand2); font-size: 13px; }
.storenames { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px 16px; margin: 12px 0; }
.loc-class { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.loc-class label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.loc-class input { border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; }

.summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi { background: var(--chip); border-radius: 8px; padding: 10px 16px; min-width: 110px; }
.kpi b { display: block; font-size: 20px; }
.kpi span { font-size: 11px; color: var(--muted); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

.result-wrap { overflow-x: auto; }
table.result { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.result th, table.result td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.result th { background: #f8fafc; position: sticky; top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
table.result td.r, table.result th.r { text-align: right; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.reason { color: var(--muted); max-width: 360px; }
.muted { color: var(--muted); }

/* ---- DieuTiet wide table (giống sheet "Điều tiết hàng tại STORE") ---- */
.dt-toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.dt-toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dt-toolbar select { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: #fff; max-width: 220px; }
.dt-toolbar .ms { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ms-cap { color: var(--muted); }
.ms-btn { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: #fff; cursor: pointer; max-width: 220px; white-space: nowrap; }
.ms-btn.on { border-color: #6c8cff; background: #eef3ff; }
.ms-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; width: 240px; background: #fff; border: 1px solid #cbd3de; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 8px; }
.ms-search { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.ms-actions { display: flex; gap: 12px; margin: 6px 2px; font-size: 12px; }
.ms-actions a, .ms-all, .ms-none { color: #6c8cff; cursor: pointer; text-decoration: none; }
.ms-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.ms-list label { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ms-list label:hover { background: #f0f4fa; }
.ms-empty { color: var(--muted); padding: 6px; }
.dt-panel { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
table.dt-sum { border-collapse: collapse; font-size: 12px; }
table.dt-sum th, table.dt-sum td { border: 1px solid var(--line); padding: 4px 9px; text-align: right; }
table.dt-sum th { background: #fff2cc; font-weight: 600; }
table.dt-sum td.l, table.dt-sum th.l { text-align: left; }
table.dt-sum tr.tot td { font-weight: 700; background: #f8f8f8; }
.dt-gap { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--chip); align-self: center; }
.dt-gap b { font-size: 17px; }
.dt-gap.ok b { color: #006100; } .dt-gap.bad b { color: #9c0006; }

.dt-scroll { overflow: auto; max-height: 74vh; border: 1px solid var(--line); border-radius: 8px; }
table.dt { border-collapse: separate; border-spacing: 0; font-size: 11.5px; white-space: nowrap; }
table.dt th, table.dt td { border-right: 1px solid #e6eaef; border-bottom: 1px solid #eef1f5; padding: 3px 7px; text-align: right; }
table.dt thead th { position: sticky; background: #f2f2f2; font-weight: 600; z-index: 2; }
table.dt thead tr.bands th { top: 0; }
table.dt thead tr.cols th { top: 25px; }
table.dt thead tr.bands th.b-sku { background: #1a1a1a; color: #fff; } table.dt thead tr.bands th.b-ton { background: #fce4d6; }
table.dt thead tr.bands th.b-banle { background: #ddebf7; } table.dt thead tr.bands th.b-dt { background: #ece3fa; }
table.dt thead tr.bands th.b-chk { background: #e2efda; } table.dt thead tr.bands th.b-after { background: #d8efe8; }
table.dt thead tr.bands th.b-shop { text-align: center; border-left: 2px solid #b9c2cf; }
table.dt thead tr.bands th.b-shop0 { background: #eacca4; } table.dt thead tr.bands th.b-shop1 { background: #d5c3ea; }
table.dt thead tr.bands th.b-shopwh { background: #c3cad4; }
table.dt td.l, table.dt th.l { text-align: left; }
table.dt td.muted0 { color: #c2cad3; }
table.dt td.note { text-align: left; color: var(--muted); white-space: normal; max-width: 240px; }

/* Tô màu theo HỆ CỘT để phân biệt từng vùng dữ liệu */
table.dt td.g-ton   { background: #fdf3ec; }   /* tồn hiện tại — cam nhạt */
table.dt td.g-banle { background: #eef5fc; }   /* bán lẻ — xanh dương nhạt */
table.dt td.g-dt0   { background: #f4eefb; }   /* lệnh điều tiết — tím nhạt (CH chẵn) */
table.dt td.g-dt1   { background: #fbeef7; }   /* lệnh điều tiết — hồng nhạt (CH lẻ) */
table.dt td.g-chk   { background: #edf6ea; }   /* kiểm tra — xanh lá nhạt */
table.dt td.g-after { background: #e7f5f0; }   /* tồn sau — xanh ngọc nhạt */

/* Khối 5 cột mỗi shop — tô đậm dần trái→phải. Shop chẵn = vàng nâu, shop lẻ = tím */
table.dt td.sh-a1, table.dt th.sh-a1 { background: #fbf0e4; }
table.dt td.sh-a2, table.dt th.sh-a2 { background: #f3dec4; }
table.dt td.sh-a3, table.dt th.sh-a3 { background: #eacca4; }
table.dt td.sh-a4, table.dt th.sh-a4 { background: #e2ba84; }
table.dt td.sh-a5, table.dt th.sh-a5 { background: #d9a864; }
table.dt td.sh-b1, table.dt th.sh-b1 { background: #f2ecf9; }
table.dt td.sh-b2, table.dt th.sh-b2 { background: #e4d8f2; }
table.dt td.sh-b3, table.dt th.sh-b3 { background: #d5c3ea; }
table.dt td.sh-b4, table.dt th.sh-b4 { background: #c7afe3; }
table.dt td.sh-b5, table.dt th.sh-b5 { background: #b89bdc; }
/* WH11 — hệ cột xám, tô đậm dần trái→phải (Tồn | Chuyển tới | Nhận về | Tồn sau) */
table.dt td.sh-wh1, table.dt th.sh-wh1 { background: #eef1f5; }
table.dt td.sh-wh2, table.dt th.sh-wh2 { background: #d9dee5; }
table.dt td.sh-wh3, table.dt th.sh-wh3 { background: #c3cad4; }
table.dt td.sh-wh4, table.dt th.sh-wh4 { background: #aeb7c4; }
/* Viền trái đậm tách từng shop (cột Tồn đầu mỗi khối) */
table.dt td.sh-a1, table.dt th.sh-a1, table.dt td.sh-b1, table.dt th.sh-b1, table.dt td.sh-wh1, table.dt th.sh-wh1 { border-left: 2px solid #b9c2cf; }

/* Màu giá trị (ưu tiên cao nhất — đặt SAU các hệ màu cột) */
table.dt td.pos  { background: #9fdcad; color: #064d18; font-weight: 600; }
table.dt td.neg  { background: #f3a6b0; color: #7a0512; font-weight: 600; }
table.dt td.toi  { background: #e23744; color: #fff; font-weight: 700; }
table.dt td.lehi { background: #4b5563; color: #fff; font-weight: 600; }

/* Dòng TỔNG + đường ngăn giữa các nhóm mã */
table.dt tr.totrow td { background: #fff3cd; font-weight: 700; color: #5a4b00; position: sticky; top: 50px; z-index: 1; }
table.dt tr.gsep td { border-top: 2px solid #b9c2cf; }

/* Cố định 7 cột đầu (đến hết PG Code) */
table.dt .f { position: sticky; background: #fff; z-index: 1; }
table.dt thead .f { z-index: 4; background: #1a1a1a; color: #fff; }
table.dt tr.totrow .f { background: #fff3cd; }
table.dt .f1 { left: 0;     min-width: 84px;  max-width: 84px; }   /* Mức sale */
table.dt .f2 { left: 84px;  min-width: 118px; max-width: 118px; }  /* Mã SP */
table.dt .f3 { left: 202px; min-width: 76px;  max-width: 76px; }   /* Variant */
table.dt .f4 { left: 278px; min-width: 58px;  max-width: 58px; }   /* Repeat */
table.dt .f5 { left: 336px; min-width: 104px; max-width: 104px; }  /* Color */
table.dt .f6 { left: 440px; min-width: 46px;  max-width: 46px; }   /* Size */
table.dt .f7 { left: 486px; min-width: 72px;  max-width: 72px; }   /* Đơn giá */
table.dt .f8 { left: 558px; min-width: 64px;  max-width: 64px; box-shadow: 2px 0 0 #b9c2cf; } /* PG */
table.dt .f-band { position: sticky; left: 0; min-width: 622px; z-index: 4; box-shadow: 2px 0 0 #b9c2cf; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 50; }
.toast.err { background: var(--warn); }
.hidden { display: none; }

@media (max-width: 720px) {
  .grid2, .loc-class { grid-template-columns: 1fr; }
}