/* Phân hệ CEO (ERP-CEO-01) — chỉ lớp ceo-* và body.ceo-desk, dùng biến màu sẵn có của ERP (styles.css).
   Máy tính (≥1024px): body.ceo-desk = menu trái riêng + nội dung rộng (giống body.tm-desk). Điện thoại: cột như các màn khác. */
:root { --ve: #1D3A6E; --ve-bg: #EEF2FA; --ve-line: #C7D4EC; --media: #C11574; --media-bg: #FDF2FA; --media-line: #FCCEEE; }
.acc-vc { --acc: var(--vc); --acc-bg: var(--vc-bg); --acc-line: var(--vc-line); }
.acc-info { --acc: var(--info); --acc-bg: var(--info-bg); --acc-line: var(--info-line); }
.acc-tm { --acc: var(--tm); --acc-bg: var(--tm-bg); --acc-line: var(--tm-line); }
.acc-ve { --acc: var(--ve); --acc-bg: var(--ve-bg); --acc-line: var(--ve-line); }
.acc-brand { --acc: var(--brand); --acc-bg: var(--bad-bg); --acc-line: var(--bad-line); }
.acc-warn { --acc: var(--warn); --acc-bg: var(--warn-bg); --acc-line: var(--warn-line); }
.acc-ok { --acc: var(--ok); --acc-bg: var(--ok-bg); --acc-line: var(--ok-line); }
.acc-media { --acc: var(--media); --acc-bg: var(--media-bg); --acc-line: var(--media-line); }
.acc-muted { --acc: var(--muted); --acc-bg: var(--surface-2); --acc-line: var(--line-2); }
.ceo .mb12 { margin-bottom: 12px; }
.ceo-mtag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--acc-bg, var(--surface-2)); color: var(--acc, var(--muted)); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ceo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint); }
.ceo-dot.live { background: #12B76A; } .ceo-dot.test { background: var(--info); } .ceo-dot.built { background: #FDB022; } .ceo-dot.err { background: #F04438; }
.ceo-loading { padding: 40px 10px; text-align: center; color: var(--muted); display: flex; gap: 8px; justify-content: center; align-items: center; }
.ceo-ok { color: var(--ok); font-weight: 700; } .ceo-bad { color: var(--bad); font-weight: 700; }

/* Thanh lọc + mốc cập nhật */
.ceo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ceo-sel { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--line-2); border-radius: 11px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ceo-fresh { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ceo-fresh.stale { color: var(--warn); font-weight: 700; }
.ceo-ibtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.ceo-ibtn.spin svg { animation: ceo-spin .8s linear infinite; }
@keyframes ceo-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .ceo-bar { gap: 6px; }
  .ceo-bar > .grow { display: none; }
  .ceo-bar .ceo-sel { height: 34px; padding: 0 24px 0 9px; font-size: 13px; background-position: right 8px center; }
  .ceo-bar .ceo-ibtn { width: 34px; height: 34px; margin-left: auto; }
  .ceo-bar .ceo-fresh { order: 9; flex-basis: 100%; }
}
.ceo-search { position: relative; flex: 1 1 260px; max-width: 440px; }
.ceo-search svg { position: absolute; left: 11px; top: 10px; color: var(--faint); }
.ceo-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--surface-2); border-radius: 11px; background: var(--surface-2); font: inherit; font-size: 14px; box-sizing: border-box; }
.ceo-search input:focus { outline: 2px solid var(--info-line); border-color: var(--info); background: #fff; }
.ceo-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.ceo-chips::-webkit-scrollbar { display: none; }
.ceo-chips a.chip { text-decoration: none; }

/* Việc chờ duyệt */
.ceo-aps { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.ceo-aps::-webkit-scrollbar { display: none; }
.ceo-ap { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: var(--r); box-shadow: var(--sh); cursor: pointer; box-sizing: border-box; }
.ceo-ap .t { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.ceo-ap .amt, .ceo-amt { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ceo-amt { font-size: 28px; }
.ceo-ap .why { font-size: 13.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ceo-ap .meta { font-size: 12.5px; color: var(--muted); }
.ceo-ap .btn { align-self: stretch; margin-top: 4px; }
.ceo .due, .ceo-ib-detail .due { color: var(--warn); font-weight: 700; }
.ceo-risk { font-size: 11.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.ceo-risk.P0 { background: var(--bad-bg); color: var(--bad); } .ceo-risk.P1 { background: var(--warn-bg); color: var(--warn); } .ceo-risk.P2 { background: var(--surface-2); color: var(--muted); }
.ceo-ctx { margin: 10px 0 0; padding: 0; list-style: none; }
.ceo-ctx li { display: flex; gap: 8px; padding: 6px 0; font-size: 14px; border-top: 1px solid var(--line); }
.ceo-ctx li:first-child { border-top: 0; }
.ceo-ib { align-items: flex-start; }
.ceo-ib.sel { background: var(--info-bg); }
.ceo-ic { background: var(--acc-bg) !important; color: var(--acc) !important; }
.ceo-amt-s { font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Cảnh báo */
.ceo-al .lv { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.ceo-al .lv.P0 { background: var(--bad-bg); color: var(--bad); } .ceo-al .lv.P1 { background: var(--warn-bg); color: var(--warn); } .ceo-al .lv.P2 { background: var(--surface-2); color: var(--muted); }

/* Ô số */
.ceo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ceo-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 12px 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); cursor: pointer; box-sizing: border-box; }
.ceo-tile .ceo-tl { display: flex; align-items: flex-start; gap: 6px; padding-right: 22px; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.25; min-height: 31px; }
.ceo-tile .ceo-tl .grow { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ceo-tile .ceo-tv { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-tile .ceo-td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; font-weight: 700; min-height: 18px; }
.ceo-tile .ceo-tf { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--faint); }
.ceo-spark { width: 64px; height: 20px; flex: none; }
.ceo-tile.warn { border-color: var(--warn-line); background: var(--warn-bg); } .ceo-tile.warn .ceo-tv { color: var(--warn); }
.ceo-tile.bad { border-color: var(--bad-line); background: var(--bad-bg); } .ceo-tile.bad .ceo-tv { color: var(--bad); }
.ceo-tile.na { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 8px, var(--surface-2) 8px, var(--surface-2) 16px); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.ceo-tile.na .ceo-tl { padding-right: 0; }
.ceo-tile.na .ceo-tv { font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--muted); white-space: normal; }
.ceo-tile.na .ceo-info { display: none; }
.ceo-tile.na .ceo-tl .grow + .ceo-mtag { margin-left: auto; }
.ceo-d { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 5px; height: 18px; white-space: nowrap; }
.ceo-d.good { background: var(--ok-bg); color: var(--ok); } .ceo-d.bad { background: var(--bad-bg); color: var(--bad); } .ceo-d.flat { background: var(--surface-2); color: var(--muted); }
.ceo-tile .vs { color: var(--muted); font-weight: 600; white-space: nowrap; }
.ceo-part { color: var(--warn); font-weight: 700; }
.ceo-info { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.ceo-info:hover { background: var(--surface-2); color: var(--ink); }
.ceo-tile:not(.na) .ceo-info { display: grid; }
.ceo-tile.na[data-act] .ceo-info { display: none; }

/* Thẻ phân hệ */
.ceo-mods { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .ceo-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ceo-mod { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); color: var(--ink); cursor: pointer; box-sizing: border-box; }
.ceo-mod .mh { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
.ceo-mod .mi, .ceo-mp .mi { width: 30px; height: 30px; border-radius: 9px; background: var(--acc-bg); color: var(--acc); display: grid; place-items: center; flex: none; }
.ceo-mod .ms3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ceo-mod .ms3 b { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-mod .ms3 b.warn { color: var(--warn); } .ceo-mod .ms3 b.bad { color: var(--bad); }
.ceo-mod .ms3 span { display: -webkit-box; margin-top: 2px; font-size: 11.5px; line-height: 1.2; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ceo-mod .mf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ceo-mod.nc { background: transparent; border-style: dashed; box-shadow: none; }
.ceo-mod.nc .mi { background: var(--surface-2); color: var(--muted); }
.ceo-mod.err { border-color: var(--bad-line); }
.ceo-mod .why { font-size: 12.5px; color: var(--muted); }
.ceo-mod .why.bad { color: var(--bad); font-weight: 600; }

/* Tiền & công nợ */
.ceo-fin { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ceo-fin .card h3 { display: flex; align-items: center; gap: 8px; }
.ceo-fr { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
.ceo-fr:first-of-type { border-top: 0; }
.ceo-fr .v { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; white-space: nowrap; }
.ceo-nosum { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.ceo-ph { padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 13.5px; background: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--surface-2) 8px, var(--surface-2) 16px); }
.ceo-ph b { color: var(--text); }

/* Trang phân hệ, bảng */
.ceo-mp { display: flex; gap: 12px; align-items: flex-start; }
.ceo-mp .mi { width: 46px; height: 46px; border-radius: 13px; }
.ceo-mp h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ceo-tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.ceo-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.ceo-tbl th { text-align: left; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.ceo-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ceo-tbl tr.clk { cursor: pointer; } .ceo-tbl tr.clk:hover td { background: #FAFBFC; }
.ceo-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.ceo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ceo-in { width: 100%; max-width: 160px; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; font: inherit; font-size: 14px; text-align: right; box-sizing: border-box; }
.ceo-in.wide { max-width: none; text-align: left; margin-top: 6px; }
.ceo-cb { width: 20px; height: 20px; flex: none; }

/* Thanh dưới: số việc chờ trên nút Duyệt */
#nav a.fab .b { position: relative; }
.ceo-cnt { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #D92D20; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; box-sizing: border-box; }

/* ---------- Máy tính ≥ 1024 px ---------- */
@media (min-width: 1024px) {
  body.ceo-desk .app { max-width: none; display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto auto 1fr; box-shadow: none; }
  body.ceo-desk .side { display: flex !important; flex-direction: column; grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 16px 12px 24px; box-sizing: border-box; background: var(--surface); border-right: 1px solid var(--line); }
  body.ceo-desk .topbar, body.ceo-desk .demo-strip, body.ceo-desk main { grid-column: 2; }
  body.ceo-desk .topbar { padding: 0 24px; }
  body.ceo-desk .nav { display: none; }
  body.ceo-desk main { width: 100%; max-width: 1360px; margin: 0 auto; box-sizing: border-box; padding: 20px 28px 64px; }
  body.ceo-desk .toast { left: calc(264px + (100vw - 264px) / 2); bottom: 28px; }
  body.ceo-desk .sheet-backdrop { align-items: center; }
  body.ceo-desk .sheet { max-width: 620px; max-height: 88dvh; border-radius: 20px; padding-bottom: 20px; }
  .ceo-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
  .ceo-side-brand .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
  .ceo-side-brand b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
  .ceo-side-brand span { display: block; font-size: 12px; color: var(--muted); }
  .ceo-n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 800; display: grid; place-items: center; box-sizing: border-box; }
  .ceo-n.red { background: #D92D20; color: #fff; }
  .side-nav a.on .ceo-n { background: rgba(255, 255, 255, .2); color: #fff; }
  .side-nav a.on .ceo-dot { box-shadow: 0 0 0 2px var(--ink); }
  body.ceo-desk .ceo-aps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; overflow: visible; margin: 0; padding: 0; }
  body.ceo-desk .ceo-ap { flex: none; }
  body.ceo-desk .ceo-tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  body.ceo-desk .ceo-tiles.t4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  body.ceo-desk .ceo-tile { padding: 14px 15px 12px; }
  body.ceo-desk .ceo-tile .ceo-tv { font-size: 27px; }
  body.ceo-desk .ceo-tile.na .ceo-tv { font-size: 14px; }
  body.ceo-desk .ceo-mods { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  body.ceo-desk .ceo-home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 20px; align-items: start; }
  body.ceo-desk .ceo-col-r { position: sticky; top: 76px; }
  body.ceo-desk .ceo-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ceo-desk .ceo-inbox { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
  body.ceo-desk .ceo-inbox .ceo-ib-detail { position: sticky; top: 76px; }
}