:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #18212f;
  --ink-2: #4a5568;
  --ink-3: #8a94a6;
  --line: #e3e8ef;
  --line-2: #eef1f6;
  --brand: #1f4fd1;
  --brand-ink: #ffffff;
  --brand-soft: #e8eefc;
  --side: #121a2b;
  --side-ink: #c8d0df;
  --side-active: #1f2a42;
  --ok: #12805c;
  --ok-soft: #e3f5ee;
  --warn: #a35b00;
  --warn-soft: #fff1dc;
  --bad: #c42b2b;
  --bad-soft: #fde8e8;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, .25);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }
.hidden { display: none !important; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--ink-3); }

/* ---------- Buttons & form ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #f7f9fc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: #1a43b4; }
.btn.danger { color: var(--bad); border-color: #f2c4c4; }
.btn.danger:hover { background: var(--bad-soft); }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.block { width: 100%; }

label.field { display: grid; gap: 6px; font-weight: 550; color: var(--ink-2); font-size: 13px; }
label.field .hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
div.field.inv-field { display: grid; gap: 6px; font-weight: 550; color: var(--ink-2); font-size: 13px; }
div.field.inv-field .hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=search], input[type=number], input[type=time], input[type=datetime-local], input[type=month], input[type=url], select, textarea {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; color: var(--ink); width: 100%;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .chip-toggle:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-error { color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.check:hover { border-color: #c9d3e3; }
.check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand); }
.check.on { border-color: var(--brand); background: var(--brand-soft); }
.check .t { font-weight: 600; }
.check .d { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; font-weight: 500; color: var(--ink); }

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #dfe7fb 0, transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 32px 28px; display: grid; gap: 18px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; flex: none; }
.logo svg { width: 24px; height: 24px; }
.auth-brand .name { font-weight: 700; font-size: 17px; }
.auth-brand .sub { color: var(--ink-3); font-size: 12.5px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-wrap button { position: absolute; right: 4px; top: 4px; height: 30px; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 10px; border-radius: 6px; }
.pw-wrap button:hover { background: var(--brand-soft); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { display: flex; gap: 10px; align-items: center; padding: 18px 18px 14px; color: #fff; }
.side .brand .name { font-weight: 700; }
.side .brand .sub { font-size: 12px; color: #8c97ad; }
.nav-group { padding: 8px 10px; }
.nav-group .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6f7b93; padding: 8px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); font-size: 13.5px; }
.nav-item:hover { background: var(--side-active); text-decoration: none; color: #fff; }
.nav-item.active { background: var(--side-active); color: #fff; box-shadow: inset 3px 0 0 #5b84ff; }
.nav-item .ico { width: 18px; text-align: center; opacity: .85; }
.nav-item .soon { margin-left: auto; font-size: 10.5px; background: #26324d; color: #9fb0d4; border-radius: 99px; padding: 1px 7px; }
.side .me { margin-top: auto; padding: 12px; border-top: 1px solid #1f2940; }
.me-card { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; color: #fff; }
.me-card:hover { background: var(--side-active); text-decoration: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #3654b5; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.me-card .n { font-weight: 600; font-size: 13px; }
.me-card .u { font-size: 12px; color: #8c97ad; }
.side .logout { width: 100%; margin-top: 6px; background: transparent; border: 1px solid #2a3550; color: var(--side-ink); }
.side .logout:hover { background: var(--side-active); }

.topbar { display: none; }
.main { padding: 24px 28px 48px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-3); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-head .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.card-body { padding: 18px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grid-2 > .card + .card { margin-top: 0; }

/* ---------- Toolbar & table ---------- */
.toolbar { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.toolbar input[type=search] { max-width: 320px; }
.toolbar select, .toolbar input[type=date] { width: auto; min-width: 150px; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfd; white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: #f8faff; }
.tbl .who { display: flex; gap: 10px; align-items: center; }
.tbl .who .n { font-weight: 600; }
.tbl .who .u { color: var(--ink-3); font-size: 12.5px; }
.empty { padding: 36px; text-align: center; color: var(--ink-3); }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 13px; gap: 10px; flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.plain::before { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--brand-soft); color: #1b3a99; font-size: 12.5px; font-weight: 550; }
.chip.admin { background: #1b2540; color: #fff; }

/* ---------- Stats / dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { padding: 16px 18px; }
.stat .k { color: var(--ink-3); font-size: 12.5px; }
.stat .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mod-tile { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.mod-tile:hover { border-color: #b9c7e6; text-decoration: none; background: #fbfcff; }
.mod-tile .ico { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-soft); display: grid; place-items: center; font-size: 18px; flex: none; }
.mod-tile .t { font-weight: 600; }

/* ---------- Detail ---------- */
.profile { display: flex; gap: 14px; align-items: center; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 14px; font-size: 13.5px; }
.kv .k { color: var(--ink-3); }
.kv .v { overflow-wrap: anywhere; }
.role-list { display: grid; gap: 8px; }
.notice { display: block; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: #6d3d00; font-size: 13px; }
.notice.info { background: var(--brand-soft); color: #1b3a99; }
.notice.bad { background: var(--bad-soft); color: #8a1f1f; }

/* ---------- Permission matrix ---------- */
.perm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); padding: 10px 18px; border-bottom: 1px solid var(--line-2); background: #fafbfd; }
.perm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.perm-group { border-bottom: 1px solid var(--line-2); }
.perm-group:last-child { border-bottom: 0; }
.perm-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; background: #f7f9fc; flex-wrap: wrap; }
.perm-group-head h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.perm-group-head .tools { display: flex; gap: 6px; flex-wrap: wrap; }
.perm-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line-2); }
.perm-row .mod { font-weight: 600; }
.perm-row .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; user-select: none;
}
.chip-toggle .mark { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #b5c0d3; display: grid; place-items: center; font-size: 10px; line-height: 1; color: #fff; flex: none; }
.chip-toggle.on { border-color: #9fb6ef; background: var(--brand-soft); color: #173595; }
.chip-toggle.on .mark { background: var(--brand); border-color: var(--brand); }
.chip-toggle.on .mark::after { content: "✓"; }
.chip-toggle:disabled { cursor: default; }
.chip-toggle.ro { cursor: default; }
/* Chế độ quyền riêng của người dùng */
.chip-toggle.inherit.on { border-style: dashed; background: #f3f6fd; }
.chip-toggle.allow { border-color: #8fd1b6; background: var(--ok-soft); color: #0c5c41; }
.chip-toggle.allow .mark { background: var(--ok); border-color: var(--ok); }
.chip-toggle.allow .mark::after { content: "+"; font-weight: 800; }
.chip-toggle.deny { border-color: #f0b3b3; background: var(--bad-soft); color: #8a1f1f; text-decoration: line-through; }
.chip-toggle.deny .mark { background: var(--bad); border-color: var(--bad); }
.chip-toggle.deny .mark::after { content: "×"; font-weight: 800; }
.perm-row .row-tools { display: flex; gap: 4px; }
/* Bảng phân quyền kiểu Getfly */
.perm-tbl-wrap { overflow-x: auto; }
.perm-tbl { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
.perm-tbl th { padding: 8px 6px; background: #f7f9fc; color: var(--ink-2); font-weight: 600; font-size: 12.5px; text-align: center; white-space: nowrap; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.perm-tbl th.fn, .perm-tbl td.fn { text-align: left; padding-left: 18px; min-width: 230px; }
.perm-tbl th.ex, .perm-tbl td.ex { text-align: left; min-width: 340px; }
.perm-tbl td { padding: 6px; border-top: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.perm-tbl td.c { width: 78px; }
.perm-tbl .mod { font-weight: 600; }
.perm-tbl tr.ph td { background: #fbfcfe; }
.perm-tbl th.fn, .perm-tbl td.fn { position: sticky; left: 0; z-index: 1; background: #fff; }
.perm-tbl th.fn { background: #f7f9fc; }
.perm-tbl tr.ph td.fn { background: #fbfcfe; }
.perm-tbl tr.pc td.fn { padding-left: 40px; }
.perm-tbl tr.pc td.fn::before { content: ""; position: absolute; left: 24px; top: 50%; width: 9px; border-top: 1px solid #b5c0d3; }
.perm-tbl tr.pc .mod { font-weight: 500; }
.perm-tbl td.ex .chip-toggle { height: auto; min-height: 26px; font-size: 12px; margin: 2px 4px 2px 0; padding: 3px 9px; text-align: left; line-height: 1.3; }
.perm-tbl td.rt { width: 1%; white-space: nowrap; padding-right: 14px; }
.chip-toggle.pm-box { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 7px; gap: 0; }
.chip-toggle.pm-box .mark { width: 16px; height: 16px; }
@media (max-width: 860px) { .perm-tbl th.fn, .perm-tbl td.fn { min-width: 170px; max-width: 190px; } .perm-tbl tr.pc td.fn { padding-left: 30px; } .perm-tbl tr.pc td.fn::before { left: 16px; } }

/* ---------- Modal / toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 22, 38, .45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.modal-body { padding: 18px 20px; overflow-y: auto; display: grid; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.secret { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #0f172a; color: #fff; }
.secret .mono { font-size: 20px; letter-spacing: .08em; flex: 1; overflow-wrap: anywhere; }
#toast-root { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; }
.toast { background: #111827; color: #fff; padding: 11px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); max-width: 380px; font-size: 13.5px; }
.toast.bad { background: #9b1c1c; }
.toast.ok { background: #0f6b4c; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .shell.nav-open .side { transform: none; box-shadow: var(--shadow-lg); }
  .shell.nav-open .scrim { position: fixed; inset: 0; background: rgba(15, 22, 38, .4); z-index: 30; display: block; }
  .scrim { display: none; }
  .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
  .topbar .t { font-weight: 650; }
  .main { padding: 16px 16px 40px; }
  .perm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .toolbar input[type=search], .toolbar select, .toolbar input[type=date] { max-width: none; flex: 1 1 140px; }
  .tbl .hide-m { display: none; }
}
@media (min-width: 861px) { .scrim { display: none; } }
.modal-body > form { display: grid; gap: 14px; }

/* ---------- Nhà cung cấp ---------- */
.stars { color: #e0a000; letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: #d5dbe6; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: grid; gap: 10px; border-bottom: 1px solid var(--line-2); }
.timeline { padding: 4px 0; }
.tl-item { padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.tl-item:last-child { border-bottom: 0; }
.tl-meta { color: var(--ink-3); font-size: 12.5px; margin-bottom: 4px; }
.page-head .sub .badge { vertical-align: middle; }

/* ---------- Nhật ký ---------- */
.nowrap { white-space: nowrap; }
pre.raw { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; font-size: 12px; overflow-x: auto; max-height: 320px; margin: 8px 0 0; }
details summary { cursor: pointer; }
#a-target-note .notice { margin: 10px 14px 0; }

/* Ô số liệu trong lưới không bị đẩy lệch bởi quy tắc .card + .card */
.stats > .card, .grid-2 > .card { margin-top: 0; }
.stats .stat .pbar { margin-top: 10px; }
.grid-2 + .card, .card + .grid-2, .grid-2 + .grid-2, .card + .stats { margin-top: 16px; }
.nav-item .soon { white-space: nowrap; flex: none; }
.stat { display: block; color: var(--ink); }
a.stat:hover { text-decoration: none; border-color: #b9c7e6; }

/* ---------- Kế hoạch & Báo cáo ---------- */
.tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { padding: 10px 16px; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.tab:hover { text-decoration: none; color: var(--ink); background: var(--line-2); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.mt { margin-top: 14px; }
.legend { align-self: center; }
.toolbar > .btn { height: 38px; }
.pbar { position: relative; height: 8px; background: var(--line-2); border-radius: 99px; min-width: 80px; margin-top: 8px; }
.pfill { height: 100%; width: 0; background: var(--brand); border-radius: 99px; transition: width .3s; }
.pfill.full { background: var(--ok); }
.pmark { position: absolute; top: -3px; width: 2px; height: 14px; background: #f59e0b; border-radius: 2px; margin-left: -1px; }
.big-pct { font-size: 38px; font-weight: 750; line-height: 1; margin-bottom: 6px; }
.task { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.card > .task:first-of-type, .card-head + .task { border-top: 0; }
.task-main { flex: 1; min-width: 0; }
.task-main .muted.small { margin-top: 2px; }
.task-title { font-weight: 600; color: var(--ink); }
.task.is-done .task-title { color: var(--ink-3); text-decoration: line-through; }
.task-check { width: 18px; height: 18px; accent-color: var(--ok); flex: none; }
.task-pct { min-width: 40px; font-weight: 700; color: var(--ink-2); font-size: 13px; text-align: center; }
.task-side { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.quick-add { display: flex; gap: 8px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.quick-add input[type=text] { flex: 2 1 260px; }
.quick-add select { flex: 1 1 180px; width: auto; }
.lvl { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; flex: none; vertical-align: middle; }
.lvl-strategy { background: #6d28d9; } .lvl-year { background: #1d4ed8; } .lvl-quarter { background: #0e7490; }
.lvl-month { background: #047857; } .lvl-week { background: #b45309; } .lvl-day { background: #64748b; }
.tree { padding: 4px 0; }
.trow { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.tree > .tnode:first-child > .trow { border-top: 0; }
.trow.depth-1 { padding-left: 40px; } .trow.depth-2 { padding-left: 64px; } .trow.depth-3 { padding-left: 88px; }
.trow.depth-4 { padding-left: 112px; } .trow.depth-5 { padding-left: 136px; }
.tcaret { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); border-radius: 6px; flex: none; font-size: 16px; line-height: 1; }
.tcaret:hover { background: var(--line-2); }
.tcaret.leaf { cursor: default; color: var(--ink-3); }
.tmain { flex: 1; min-width: 0; }
.tmain .muted.small { margin-top: 2px; }
.ttitle { font-weight: 600; color: var(--ink); }
.tprog { width: 160px; flex: none; display: flex; align-items: center; gap: 10px; }
.tprog .pbar { flex: 1; margin-top: 0; }
.tside { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 120px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; line-height: 1.6; }
.sub-head { padding: 14px 18px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; }
.card > .empty { padding: 28px 18px; }
.rblock { padding: 12px 0; border-top: 1px dashed var(--line); }
.rblock:first-child { border-top: 0; padding-top: 0; }
.rblock:last-child { padding-bottom: 0; }
.rhead { margin-bottom: 6px; line-height: 1.6; }
.rhead .badge { margin-left: 4px; }
.rlist { margin: 6px 0 0; padding-left: 20px; line-height: 1.55; }
.rlist li { margin: 4px 0; }
.rorder { margin: 8px 0 0 4px; padding-left: 10px; border-left: 3px solid var(--line); font-size: 13.5px; }
.rorder > a { font-weight: 600; }
.rorder .rlist { margin-top: 2px; }
.rsec { margin-bottom: 18px; }
.rsec:last-child { margin-bottom: 0; }
.rsec-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; margin-bottom: 6px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 4px; }
.rq { padding: 14px 18px; border-top: 1px solid var(--line-2); }
.card-head + .rq { border-top: 0; }
.rq-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; }
.chip.wait { background: var(--warn-soft); color: var(--warn); }
.chip.late { background: var(--bad-soft); color: var(--bad); }
.act-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 160px auto; gap: 8px; margin: 8px 0; align-items: center; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.org .okids { margin-left: 22px; padding-left: 16px; border-left: 2px solid var(--line); }
.orow { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.omain { flex: 1; min-width: 160px; }
.orow select { width: auto; height: 34px; margin-left: 6px; }
.report-body { font-size: 14.5px; line-height: 1.6; }
.report-body .kv { margin-bottom: 18px; }
.card-body.muted.small { padding-top: 10px; padding-bottom: 14px; }
/* Ghi chú / thông báo đặt thẳng trong khung (không có card-body): chừa lề như nội dung khung, không tràn sát viền. */
.card > .muted.small:not(.card-body), .card > .notice { margin-left: 18px; margin-right: 18px; overflow-wrap: anywhere; }
.card > .muted.small:not(.card-body):last-child { margin-bottom: 14px; }
.card > .card-head + .notice { margin-top: 12px; }
.print-head h2 { margin-bottom: 4px; }
@media (max-width: 860px) {
  .trow { flex-wrap: wrap; row-gap: 6px; }
  .tmain { flex: 1 1 180px; }
  .tprog { flex: 1 1 140px; width: auto; margin-left: 66px; }
  .tside { min-width: 0; }
  .task-main { flex: 1 1 180px; }
  .task .tprog { margin-left: 0; }
  .trow.depth-1, .trow.depth-2, .trow.depth-3, .trow.depth-4, .trow.depth-5 { padding-left: 16px; }
  .act-row { grid-template-columns: minmax(0, 1fr); }
  .task { flex-wrap: wrap; }
  .tab { padding: 9px 12px; }
}
@media print {
  .side, .topbar, .no-print, #toast-root { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- Chỉ tiêu (KPI) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.grid-3 > .card { margin-top: 0; }
.grid-3 + .card { margin-top: 16px; }
.kpi-tbl td { vertical-align: middle; }
.kpi-pct { min-width: 150px; }
.kpi-pct .pbar { display: inline-block; width: 90px; vertical-align: middle; margin: 0 8px 0 0; }
.excl-box { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 12px; }
.badge.excl { background: #ede9fe; color: #5b21b6; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.check-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--ink); }
.check-inline input { width: 16px; height: 16px; accent-color: var(--brand); }
.toolbar .check-inline { align-self: center; }
.kpi-tbl td:first-child { min-width: 260px; }
.kpi-tbl td:nth-child(5) { min-width: 120px; }
.kpi-tbl { table-layout: fixed; min-width: 880px; }
.kpi-tbl th:nth-child(1) { width: 32%; } .kpi-tbl th:nth-child(2) { width: 11%; } .kpi-tbl th:nth-child(3) { width: 12%; }
.kpi-tbl th:nth-child(4) { width: 17%; } .kpi-tbl th:nth-child(5) { width: 13%; } .kpi-tbl th:nth-child(6) { width: 15%; }
.kpi-tbl td:first-child { min-width: 0; }

/* ---------- Tệp đính kèm ---------- */
.att-pick { cursor: pointer; }
.att-pick input { display: none; }
.card-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-tag { width: auto; height: 36px; }
.att-drop { margin: 14px 18px 0; padding: 16px; border: 2px dashed var(--line); border-radius: 10px; text-align: center; color: var(--ink-3); font-size: 13px; }
.att-drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.att-status { margin: 10px 18px 0; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); color: #1b3a99; font-size: 13px; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 14px 18px; }
.att-img { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.att-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--line-2); cursor: zoom-in; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-img figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; padding: 8px 8px 8px 10px; align-items: center; }
.att-img figcaption .muted { grid-column: 1; }
.att-img figcaption .btn { grid-column: 2; grid-row: 1 / span 2; }
.att-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-ico { font-size: 22px; width: 28px; text-align: center; flex: none; }
.att-file .task-title { overflow-wrap: anywhere; }
.lightbox-img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: 8px; }
.att-title { line-height: 1.5; }
.att-title .badge { margin-left: 4px; vertical-align: middle; }
.att-note { margin-top: 3px; color: var(--ink-2); }
.att-actions { gap: 8px; }
.att-ask { padding: 12px 0; border-top: 1px dashed var(--line); }
.att-ask:first-child { border-top: 0; padding-top: 0; }
.modal-foot .spacer { flex: 1; }
.att-img figcaption { grid-template-columns: minmax(0, 1fr); }
.att-img figcaption .muted .badge { margin-right: 4px; }

/* ---------- Kho tài liệu & bộ lọc tệp ---------- */
.chip-filters, .att-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip-filters { margin-bottom: 14px; }
.att-filter { padding: 12px 18px 0; }
.att-filter .att-q { flex: 1 1 200px; max-width: 320px; height: 34px; margin-left: auto; }
.fchip { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.fchip b { margin-left: 4px; color: var(--ink); }
.fchip:hover { border-color: #b9c7e6; }
.fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fchip.on b { color: #fff; }
.lib-row .att-title { margin-bottom: 2px; }
.lib-thumb { width: 56px; height: 42px; border-radius: 6px; overflow: hidden; flex: none; background: var(--line-2); }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Yêu cầu NCC & chuông thông báo ---------- */
.bell { position: relative; margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; font-size: 18px; display: grid; place-items: center; flex: none; }
.side .bell:hover { background: var(--side-active); }
.topbar .bell:hover { background: var(--line-2); }
.bell-n { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bell.has-danger .bell-n { background: var(--bad); }
.bell-list { display: grid; gap: 4px; margin: -6px -8px; }
.bell-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 8px; color: var(--ink); }
.bell-item:hover { background: var(--line-2); text-decoration: none; }
.req-row { cursor: pointer; }
.req-row:hover { background: #f8faff; }
.req-row .task-title { font-weight: 600; color: var(--ink); }
.req-row .task-side { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.req-last { margin-top: 4px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; }
.req-more { padding: 8px 18px; border-top: 1px solid var(--line-2); }
.req-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.req-title { font-size: 16px; font-weight: 650; margin-bottom: 4px; }
.req-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.req-reply { display: grid; gap: 10px; }
.req-reply textarea { min-height: 84px; }
.req-reply .seg { display: flex; gap: 18px; flex-wrap: wrap; }
.req-reply .seg label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-weight: 550; }
.req-reply .seg input { width: auto; }
.req-reply-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.req-reply-foot select { width: auto; min-width: 190px; margin-left: 6px; }
.req-tl { border: 1px solid var(--line-2); border-radius: 8px; }
.req-tl .empty { padding: 16px; }
.req-tl .tl-item.is-resp { background: #f3f7ff; }
.modal h3 { font-size: 14px; margin: 18px 0 8px; }
.tab .badge.plain { height: 18px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
@media (max-width: 860px) { .req-row { flex-wrap: wrap; } .req-row .task-side { justify-content: flex-start; } }

/* ---------- Hàng hóa ---------- */
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat .v.ok-t { color: var(--ok); }
.stat .v.bad-t { color: var(--bad); }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
tr.is-off td { opacity: .6; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.modal .seg { display: flex; gap: 18px; flex-wrap: wrap; }
.modal .seg input { width: auto; }
@media (max-width: 860px) { .stats.stats-3, .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.im-tpl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-sep { font-weight: 650; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 4px; }
.input-pair { display: flex; gap: 8px; }
.input-pair select { width: 96px; flex: none; }
.sup-tbl td:first-child { min-width: 220px; }

/* ---------- Đơn mua hàng & đánh giá ---------- */
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.lines-tbl input, .lines-tbl select, #of-costs input, #of-costs select { min-width: 0; }
.lines-tbl td:first-child { min-width: 260px; }
.lines-tbl td.num input, #of-costs td.num input { text-align: right; max-width: 140px; }
.big-money { font-size: 18px; }
.sub-h { font-size: 13px; margin: 0; padding: 10px 18px 0; color: var(--ink-2); }
.eval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; padding: 16px 18px; }
.eval-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.eval-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.eval-tbl td { padding: 8px 6px; vertical-align: top; }
.eval-btns { white-space: nowrap; text-align: right; }
.sc { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-weight: 650; cursor: pointer; margin-left: 3px; color: var(--ink-2); }
.sc:hover:not(:disabled) { border-color: var(--brand); }
.sc:disabled { cursor: default; }
.sc.on { color: #fff; border-color: transparent; }
.sc.on.sc-1 { background: #c42b2b; } .sc.on.sc-2 { background: #e0711a; } .sc.on.sc-3 { background: #c9a10b; }
.sc.on.sc-4 { background: #3b9b5e; } .sc.on.sc-5 { background: #12805c; }
.eval-sum { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; border-bottom: 1px solid var(--line-2); }
.eval-crit { display: grid; gap: 8px; }
.crit-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(80px, 1fr) 48px; gap: 10px; align-items: center; font-size: 13px; }
.crit-row .pbar { margin-top: 0; }
.crit-tbl input[type=number] { max-width: 80px; text-align: right; }
.crit-tbl input[type=checkbox] { width: 16px; height: 16px; }
@media (max-width: 860px) { .eval-sum { grid-template-columns: 1fr; } .eval-grid { grid-template-columns: 1fr; padding: 12px; } .crit-row { grid-template-columns: 1fr 70px 44px; } }
.crit-row .pbar, .crit-row .pfill { display: block; }
.stats.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats.stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .stats.stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cost-tbl tr.cost-missing td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.cost-tbl tr.cost-missing { background: #fff7f7; }
.cost-tbl tr.cost-na td, .cost-tbl tr.cost-not_needed td { color: var(--ink-3); }
.cost-form td { padding: 6px 4px; }
.cost-form input[type=text], .cost-form input[type=date] { min-width: 90px; }
.cost-form td.num input { max-width: 130px; text-align: right; }
.cost-form td:first-child { min-width: 170px; }
td.center, th.center { text-align: center; }
#of-costs .c-inv { min-width: 110px; } #of-costs .c-payee, #of-costs .c-note { min-width: 130px; } #of-costs .c-amount { min-width: 110px; }
.lines-view tfoot td { border-top: 2px solid var(--line); background: var(--line-2); padding-top: 10px; padding-bottom: 10px; }
.lines-view th, .lines-view td { white-space: nowrap; }
.lines-view td:nth-child(3), .lines-view td:nth-child(4) { white-space: normal; min-width: 160px; }
.lines-tbl .ln-sku { min-width: 100px; } .lines-tbl .ln-customs { min-width: 180px; }
.lines-tbl .ln-duty, .lines-tbl .ln-vat, .lines-tbl .ln-cbm { min-width: 70px; max-width: 80px; text-align: right; }
.lines-tbl .ln-qty { min-width: 80px; } .lines-tbl .ln-price { min-width: 110px; } .lines-tbl .ln-note { min-width: 140px; }
.lines-tbl .ln-aduty, .lines-tbl .ln-avat { min-width: 110px; text-align: right; }
#of-costs .c-vat { min-width: 100px; text-align: right; }
.alloc-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.alloc-pick .warn-t { flex-basis: 100%; color: var(--warn); }
.alloc-costs { padding: 8px 18px; border-bottom: 1px solid var(--line-2); line-height: 1.9; }
.how-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.how-step:last-of-type { border-bottom: 0; }
.how-n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.how-body { margin-top: 4px; line-height: 1.7; }
.how-tbl { margin-top: 6px; }
.fx-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; padding-top: 0; }
.fx-bar input { width: 120px; text-align: right; }
.lines-tbl td.fxcol { white-space: nowrap; color: var(--ink-2); }

/* ---------- Điện thoại (cài như app): ô thống kê gọn, chừa vùng tai thỏ ---------- */
@media (max-width: 600px) {
  .stats, .stats.stats-3, .stats.stats-4, .stats.stats-5 { gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .k { font-size: 11.5px; line-height: 1.3; }
  .stat .v { font-size: 20px; margin-top: 2px; }
}
@supports (padding: env(safe-area-inset-top)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
.stats a.stat.is-on { outline: 2px solid var(--brand, #1f4fd1); outline-offset: -2px; }
.pc-ncc { min-width: 190px; }
/* Kiểm duyệt đơn mua */
.notice.ok-n { background: var(--ok-soft); color: var(--ok); }
.notice.bad-n { background: var(--bad-soft); color: var(--bad); }
.notice.mb { margin-bottom: 16px; }
.warn-t { color: var(--warn); }
.bad-t { color: var(--bad); }
/* Form kế hoạch mua hàng */
.lines-tbl .pl-qty { min-width: 80px; text-align: right; } .lines-tbl .pl-sup { min-width: 230px; }
.lines-tbl .pl-price { min-width: 110px; text-align: right; } .lines-tbl .pl-cur { min-width: 80px; }
.lines-tbl .pl-note { min-width: 140px; } .lines-tbl .pl-date { min-width: 140px; }
.lines-tbl .pl-hint { max-width: 260px; white-space: normal; }
.lines-tbl .ln-kg { min-width: 80px; max-width: 100px; text-align: right; }
.mt-s { margin-top: 6px; }

/* Khung gọn: Bảo hành cần xử lý */
.tbl.compact td { padding-top: 6px; padding-bottom: 6px; }

/* Thuộc tính hidden luôn ẩn (kể cả phần tử có class đặt display riêng như .card) */
[hidden] { display: none !important; }

/* Nút nhỏ cạnh tên tệp (xóa / yêu cầu xóa) */
.btn-x { background: none; border: 0; cursor: pointer; padding: 0 2px; font-size: 12px; opacity: .65; }
.btn-x:hover { opacity: 1; }

/* Phát triển sản phẩm: bảng kéo thả theo bước */
.dev-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding: 14px; }
.dev-col { background: var(--line-2); border-radius: 10px; display: flex; flex-direction: column; min-height: 240px; }
.dev-col.over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.dev-col-h { font-weight: 600; font-size: 13px; padding: 10px 12px 6px; display: flex; justify-content: space-between; }
.dev-col-b { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.dev-empty { color: var(--ink-3); text-align: center; padding: 14px 0; font-size: 13px; }
.dev-card { display: block; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); text-decoration: none; cursor: grab; }
.dev-card:hover { border-color: var(--brand); }
.dev-card.dragging { opacity: .45; }
.dev-card.is-late { border-left: 3px solid var(--bad); }
.dev-thumb { width: 100%; height: 96px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; display: block; }
.dev-name { font-weight: 600; font-size: 13.5px; line-height: 1.35; margin: 2px 0; }
.dev-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.dev-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dev-ask { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 700px) { .dev-ask { grid-template-columns: 1fr; } .dev-board { grid-auto-columns: 78vw; } }
.seg-btns { display: inline-flex; gap: 4px; }
.dev-board .dev-card, .dev-board .dev-card:hover { text-decoration: none !important; }

/* Phát triển sản phẩm đợt 2: so sánh mẫu, chấm mẫu, thanh ngân sách */
.dev-cmp td.center, .dev-cmp th.center { text-align: center; }
.dev-cmp .sc { cursor: default; margin: 0; }
.dev-cmp-total td { background: var(--line-2); }
.v-big { font-size: 20px; margin-top: 4px; }
.bar { height: 10px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.bar > span.bad { background: var(--bad); }

/* Phát triển sản phẩm đợt 3: ưu tiên, giá vốn, họp duyệt */
.dev-prio { display: grid; gap: 8px; }
.dev-prio-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) 2fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.bar.sm { height: 7px; }
.dev-est { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.dev-mk { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 8px; }
tr.is-win td { background: var(--ok-soft); }
.ok-t { color: var(--ok); }
.dev-meet-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dev-meet-score { text-align: right; font-size: 22px; line-height: 1; }
.dev-meet-score span { display: block; }
.dev-meet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.dev-meet-grid .k { color: var(--ink-3); font-size: 12px; margin-bottom: 2px; }
.dev-approved .btn { margin-left: 8px; }
@media (max-width: 860px) { .dev-est { grid-template-columns: 1fr 1fr; } .dev-mk { grid-template-columns: 1fr; } .dev-meet-grid { grid-template-columns: 1fr 1fr; } .dev-prio-row { grid-template-columns: 1fr; } }

/* Phát triển sản phẩm đợt 4: bán thử, thống kê */
.dev-launch-date { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dev-cps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-cp { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dev-cp.is-future { opacity: .65; }
.dev-cp .k { color: var(--ink-3); font-size: 12px; }
.dev-cp .v { font-size: 20px; font-weight: 700; margin: 2px 0 6px; }
.dev-sales { display: grid; grid-template-columns: 150px 1.2fr 1fr 2fr auto; gap: 8px; }
.dev-spend { display: grid; gap: 8px; }
.dev-spend-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; }
@media (max-width: 860px) { .dev-cps { grid-template-columns: 1fr; } .dev-sales { grid-template-columns: 1fr; } }
.w-110 { width: 110px; }
.w-40 { width: 40px; }

/* Quy trình */
.pc-filters { border-top: 0; padding-top: 0; flex-wrap: wrap; }
.pc-group + .pc-group { border-top: 1px solid var(--line); }
.pc-group-h { padding: 10px 16px 4px; font-weight: 700; color: var(--ink-2); }
.pc-steps td { vertical-align: top; }
.pc-steps .pc-raci div { white-space: nowrap; }
.pc-ctl { border-left: 3px solid var(--warn); padding-left: 8px; }
.pc-flow-step { padding: 3px 10px; border-radius: 99px; background: var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pc-flow-step.on { background: var(--brand); color: #fff; }
.dev-steps .spacer { flex: 1; }
.pc-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pc-reads .mb { margin-bottom: 6px; }
.chip.pc-unread { background: var(--bad-soft); color: var(--bad); }
.pc-step-edit { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.pc-step-h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pc-step-h .spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Nút hướng dẫn: dấu ? nhỏ ở góc trên (không che nội dung) */
.help-fab { position: fixed; right: 4px; top: 3px; z-index: 25; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--brand); font-weight: 800; font-size: 13px; line-height: 20px; text-align: center; box-shadow: var(--shadow); cursor: pointer; opacity: .85; }
.help-fab:hover, .help-fab:focus-visible { opacity: 1; border-color: var(--brand); background: var(--brand-soft); }
.help-fab.is-hidden { display: none; }
.gl-term { width: 200px; }
@media (max-width: 860px) { .gl-tbl tr { display: grid; grid-template-columns: 1fr auto; } .gl-tbl td { border: 0; } .gl-tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; } .gl-tbl tr { border-bottom: 1px solid var(--line); } .gl-term { width: auto; } .pc-reads { grid-template-columns: 1fr; } .help-fab { right: 58px; top: 17px; } }
@media print { .help-fab { display: none !important; } .pc-steps { font-size: 11px; } }

/* Kiểm soát đơn mua (đợt 2) + sai lệch */
.ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ctl-h { font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.ctl-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ctl-issues { margin: 6px 0 0; padding-left: 18px; color: var(--bad); }
.ctl-stage { padding: 12px 16px; border-top: 1px solid var(--line); }
.ctl-item { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.ctl-item input { margin-top: 3px; }
.ctl-item.on > span { color: var(--ink-3); }
.d-block { display: block; }
.ctl-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto auto; gap: 8px; align-items: center; margin-top: 6px; }

@media (max-width: 860px) { .ctl-grid, .ctl-inv { grid-template-columns: 1fr; } .cs-row { grid-template-columns: 1fr; } }

/* Hộp việc (đợt 3) */
.wb-list { display: grid; }
.wb-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--line); color: inherit; }
.wb-item:hover { background: var(--line-2); text-decoration: none; }
.badge.wb-dot { width: 9px; height: 9px; padding: 0; margin-top: 5px; flex: none; }
.badge.wb-dot::before { display: none; }
.badge.bad.wb-dot { background: var(--bad); }
.badge.warn.wb-dot { background: var(--warn); }
.badge.brand.wb-dot { background: var(--brand); }
.wb-group { border-top: 1px solid var(--line); }
.wb-group summary { padding: 10px 16px; cursor: pointer; }
.notice.info { margin-bottom: 0; }
.notice.info.mb { margin-bottom: 16px; }

/* Đợt 4: bài kiểm tra, ma trận đào tạo, kiểm soát & rủi ro */
.qz-q { padding: 10px 0; border-bottom: 1px solid var(--line); }
.qz-opt { display: flex; gap: 8px; align-items: center; padding: 4px 0 4px 12px; cursor: pointer; }
.qz-ok { border-left: 3px solid var(--ok); padding-left: 10px; }
.qz-bad { border-left: 3px solid var(--bad); padding-left: 10px; }
.qe-opt { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: center; margin-top: 6px; }
.tr-matrix th { white-space: nowrap; font-size: 12px; }
.tr-cell { text-align: center; }
.tr-cell.ok { background: var(--ok-soft); }
.tr-cell.warn { background: var(--warn-soft); }
.tr-cell.bad { background: var(--bad-soft); color: var(--bad); }
.heat { display: grid; grid-template-columns: 28px repeat(5, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.heat .hc { aspect-ratio: 1.6; display: grid; place-items: center; border-radius: 6px; font-weight: 700; }
.heat .hl { display: grid; place-items: center; color: var(--ink-3); }
.hc.low { background: var(--ok-soft); color: var(--ok); }
.hc.medium { background: var(--warn-soft); color: var(--warn); }
.hc.high { background: var(--bad-soft); color: var(--bad); }
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kpi-box .k { color: var(--ink-3); font-size: 12px; }
.kpi-box .v { font-size: 22px; font-weight: 700; margin-top: 2px; }
.kpi-box .s { font-size: 12px; color: var(--ink-3); }
@media (max-width: 860px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }

/* Hỏi đáp & hướng dẫn */
.gd-item { border-top: 1px solid var(--line); padding: 10px 16px; }
.gd-item summary { cursor: pointer; }
.gd-steps { margin: 10px 0 4px; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.vd-tbl { table-layout: fixed; }
.vd-tbl td:first-child { width: 52px; }
.vd-tbl td:last-child { width: 140px; text-align: right; }
.gd-tip { font-size: 12.5px; color: #6d3d00; background: var(--warn-soft); border-radius: 6px; padding: 3px 8px; margin-top: 3px; display: inline-block; }
.gd-ans { margin-top: 8px; font-size: 14px; }
.gd-act { margin-top: 6px; display: flex; gap: 6px; }
.gd-edit { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; margin-top: 8px; }
.gd-edit input + input { margin-top: 4px; }
.gd-btns { display: flex; gap: 4px; }
.modal .gd-item { padding: 8px 0; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gd-toc .chip { cursor: pointer; }
.chip.gd-jump { border: 0; font: inherit; font-size: 12.5px; }

/* Ảnh đại diện mặt hàng */
.pav { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 8px; background: var(--line-2); border: 1px solid var(--line); }
.pav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pav-sm { width: 40px; height: 40px; }
.pav-lg { width: 120px; height: 120px; border-radius: 12px; }
.pav-none { font-size: 18px; opacity: .55; }
.pav-lg .pav-none { font-size: 40px; }
.pav-row { display: flex; gap: 10px; align-items: center; }
.pav-row input { flex: 1; min-width: 0; }
.pav-head { display: flex; gap: 16px; align-items: flex-start; }
.pav-big-wrap { display: grid; gap: 6px; justify-items: center; }
.pav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pav-pick { display: grid; gap: 4px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; text-align: center; }
.pav-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.pav-pick.on { border-color: var(--brand); }
label.btn.disabled { pointer-events: none; opacity: .6; }
@media (max-width: 860px) { .pav-lg { width: 84px; height: 84px; } }

/* Kế hoạch mua: chọn NCC để tải Excel đặt hàng */
.pp-ncc-list { display: grid; gap: 8px; }
.pp-ncc-list .btn { justify-content: flex-start; }

/* Ô chọn đơn vị tính + nút "+" thêm đơn vị mới */
.unit-pick, .unit-new { display: flex; gap: 8px; margin-top: 6px; }
.unit-pick select, .unit-new input { flex: 1; min-width: 0; }
.unit-pick.hidden, .unit-new.hidden { display: none; }
.unit-add-btn { flex: none; width: 42px; justify-content: center; font-size: 18px; font-weight: 700; padding: 0; }

/* Tổng quan — bảng điều khiển */
.hm-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 26px 22px; color: #fff; margin-bottom: 18px;
  background: radial-gradient(circle at 92% -10%, rgba(255,255,255,.22), transparent 42%), linear-gradient(125deg, #1f4fd1 0%, #4338ca 55%, #0e7490 100%);
  box-shadow: 0 14px 34px rgba(31, 79, 209, .28); }
.hm-hero::after { content: ''; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.07); }
.hm-hero h1 { font-size: 26px; font-weight: 750; color: #fff; }
.hm-hero.hm-loading { min-height: 120px; }
.hm-hero-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hm-date { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 4px; }
.hm-hello { opacity: .88; margin-top: 4px; }
.hm-hero-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hm-hero-top > div:first-child { flex: 1 1 340px; min-width: 0; }
.hm-btn { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.hm-btn:hover { background: rgba(255,255,255,.22); }
.hm-btn.solid { background: #fff; color: #1f4fd1; border-color: #fff; }
.hm-btn:disabled { opacity: .6; cursor: wait; }
.hm-kpis { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.hm-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; padding: 14px 16px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(4px); transition: transform .15s, background .15s; }
.hm-kpi:hover { text-decoration: none; transform: translateY(-2px); background: rgba(255,255,255,.2); }
.hm-kpi .i { grid-row: 1 / 4; font-size: 26px; align-self: center; }
.hm-kpi .k { font-size: 12.5px; opacity: .85; }
.hm-kpi .v { font-size: 28px; font-weight: 800; line-height: 1.15; }
.hm-kpi .s { font-size: 12px; opacity: .8; }
.hm-kpi.bad .v { color: #ffd2d2; }
.hm-kpi.warn .v { color: #ffe3b0; }
.hm-kpi.ok .v { color: #c8f7e2; }

.hm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hm-card { background: var(--panel); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.06); border: 1px solid var(--line-2); overflow: hidden; --c: var(--brand); --c-soft: var(--brand-soft); }
.hm-card.wide { grid-column: 1 / -1; }
.hm-card > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.hm-card > header::before { content: ''; position: absolute; }
.hm-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--c-soft); flex: none; }
.hm-ttl { flex: 1; min-width: 0; }
.hm-ttl .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.hm-link { font-size: 12.5px; font-weight: 600; color: var(--c); white-space: nowrap; }
.hm-body { padding: 8px 18px 18px; }
.c-blue { --c: #1f4fd1; --c-soft: #e6edfd; }
.c-violet { --c: #6d3fd6; --c-soft: #efe8fd; }
.c-teal { --c: #0e7c86; --c-soft: #def5f5; }
.c-amber { --c: #b45309; --c-soft: #fdf0dc; }
.c-green { --c: #12805c; --c-soft: #e0f4eb; }
.c-rose { --c: #c42b55; --c-soft: #fde6ec; }
.c-indigo { --c: #4338ca; --c-soft: #e9e8fc; }
.hm-card { border-top: 4px solid var(--c); }

.hm-list { display: grid; }
.hm-line { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); }
.hm-line:hover { background: var(--c-soft); text-decoration: none; }
.hm-l { flex: 1; min-width: 0; display: grid; }
.hm-l b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hm-l span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-r { display: grid; justify-items: end; gap: 3px; text-align: right; }
.hm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px var(--c-soft); }
.hm-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.hm-dot.warn { background: #e08a00; box-shadow: 0 0 0 3px var(--warn-soft); }
.hm-pill { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.hm-pill.bad { background: var(--bad-soft); color: var(--bad); }
.hm-pill.warn { background: var(--warn-soft); color: var(--warn); }
.hm-h { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 6px; }
.hm-users-h { margin-top: 22px; }
.hm-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 8px; color: var(--ink-3); text-align: center; font-size: 13px; }
.hm-empty span { font-size: 28px; }
.hm-center { text-align: center; }
.hm-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.hm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.hm-pipe { display: flex; align-items: stretch; gap: 6px; margin: 6px 0 14px; }
.hm-stage { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--c-soft); color: var(--ink); text-align: center; transition: transform .15s; }
.hm-stage:hover { text-decoration: none; transform: translateY(-2px); }
.hm-stage-ico { font-size: 20px; }
.hm-stage b { font-size: 26px; font-weight: 800; color: var(--c); line-height: 1.1; }
.hm-stage span:last-child { font-size: 11.5px; color: var(--ink-2); }
.hm-arrow { align-self: center; color: var(--ink-3); font-size: 22px; }
.hm-flag { display: block; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 13px; }
.hm-flag.bad { background: var(--bad-soft); color: var(--bad); }
.hm-flag.ok { background: var(--ok-soft); color: var(--ok); }
.hm-cal { flex: none; display: grid; justify-items: center; min-width: 46px; padding: 4px 6px; border-radius: 10px; background: var(--c-soft); color: var(--c); font-size: 10.5px; line-height: 1.1; }
.hm-cal b { font-size: 17px; }

.hm-big { font-size: 30px; font-weight: 800; color: var(--c); letter-spacing: -.01em; }
.hm-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line-2); margin: 10px 0 8px; }
.hm-stack .seg { width: 0; background: #f2b24c; transition: width .5s; }
.hm-stack .seg.warn { background: #d9480f; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.hm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #f2b24c; margin-right: 6px; vertical-align: -1px; }
.hm-legend i.warn { background: #d9480f; }

.hm-planrow { display: flex; align-items: center; gap: 18px; margin: 4px 0 12px; }
.hm-ring { --p: 0; width: 104px; height: 104px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line-2) 0); }
.hm-ring > div { width: 78px; height: 78px; border-radius: 50%; background: var(--panel); display: grid; place-content: center; text-align: center; }
.hm-ring b { font-size: 22px; font-weight: 800; color: var(--c); line-height: 1; }
.hm-ring span { font-size: 10.5px; color: var(--ink-3); }
.hm-planinfo { display: grid; gap: 10px; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chip { padding: 4px 10px; border-radius: 99px; background: var(--line-2); font-size: 12px; color: var(--ink-2); }
.hm-chip.ok { background: var(--ok-soft); color: var(--ok); }
.hm-chip.warn { background: var(--warn-soft); color: var(--warn); }

.hm-alerts { display: grid; gap: 8px; }
.hm-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 600; color: var(--ink); }
.hm-alert:hover { text-decoration: none; filter: brightness(.97); }
.hm-alert .i { font-size: 20px; }
.hm-alert span:nth-child(2) { flex: 1; }
.hm-alert .go { font-size: 20px; color: var(--ink-3); }
.hm-alert.bad { background: var(--bad-soft); }
.hm-alert.warn { background: var(--warn-soft); }

.hm-spend { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.hm-cols { display: flex; justify-content: center; align-items: flex-end; gap: 28px; height: 190px; padding-top: 6px; }
.hm-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; width: 74px; }
.hm-col .bar { width: 100%; height: 6px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #6d63f0, var(--c)); transition: height .5s; }
.hm-col .bar.prev { background: #cfd5e3; }
.hm-col .val { font-weight: 700; font-size: 13px; }
.hm-col .lbl { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.hm-diff { text-align: center; margin-top: 10px; font-weight: 600; font-size: 13px; }
.hm-diff.up { color: var(--warn); }
.hm-diff.down { color: var(--ok); }
.hm-hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 7px 0; color: var(--ink); }
.hm-hbar:hover { text-decoration: none; }
.hm-hbar:hover .t { color: var(--c); }
.hm-hbar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hm-hbar .v { font-weight: 700; font-size: 13px; }
.hm-hbar .track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.hm-hbar .fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8b85f5, var(--c)); transition: width .5s; }

@media (max-width: 1150px) { .hm-grid { grid-template-columns: minmax(0, 1fr); } .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .hm-hero { padding: 18px 16px; border-radius: 14px; }
  .hm-hero h1 { font-size: 21px; }
  .hm-kpi { padding: 12px; } .hm-kpi .v { font-size: 22px; } .hm-kpi .i { font-size: 20px; }
  .hm-split, .hm-spend { grid-template-columns: minmax(0, 1fr); }
  .hm-pipe { flex-wrap: wrap; } .hm-stage { flex: 1 1 40%; } .hm-arrow { display: none; }
}
#home-users .stats .card.stat { border-radius: 14px; border-top: 4px solid #8a94a6; }

/* Xếp hạng NCC / FWD */
.rk-hero { background: radial-gradient(circle at 90% -10%, rgba(255,255,255,.25), transparent 42%), linear-gradient(125deg, #b45309 0%, #d97706 40%, #7c3aed 100%); box-shadow: 0 14px 34px rgba(180, 83, 9, .28); }
.rk-switch { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); }
.rk-switch a { padding: 6px 14px; border-radius: 9px; color: #fff; font-weight: 600; }
.rk-switch a:hover { text-decoration: none; background: rgba(255,255,255,.14); }
.rk-switch a.on { background: #fff; color: #b45309; }
.rk-sel { width: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.95); color: var(--ink); padding: 7px 10px; font: inherit; }
.rk-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin: 6px 0 18px; }
.rk-pod { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px 18px; border-radius: 18px; background: var(--panel); color: var(--ink); text-align: center;
  border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(16,24,40,.08); transition: transform .15s; overflow: hidden; }
.rk-pod:hover { text-decoration: none; transform: translateY(-3px); }
.rk-pod::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; }
.rk-pod.p1 { padding-top: 34px; padding-bottom: 28px; background: linear-gradient(180deg, #fff8e6, #fff 55%); border-color: #f6d58a; }
.rk-pod.p1::before { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.rk-pod.p2::before { background: linear-gradient(90deg, #94a3b8, #e2e8f0); }
.rk-pod.p3::before { background: linear-gradient(90deg, #b45309, #f0b37e); }
.rk-medal { font-size: 34px; line-height: 1; }
.rk-pod.p1 .rk-medal { font-size: 44px; }
.rk-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, #6d63f0, #1f4fd1); flex: none; }
.rk-av.sm { width: 38px; height: 38px; font-size: 13px; }
.rk-name { font-size: 15px; line-height: 1.25; }
.rk-code { font-size: 12px; color: var(--ink-3); font-family: Consolas, monospace; }
.rk-score { --p: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0 2px;
  background: conic-gradient(#f59e0b calc(var(--p) * 1%), var(--line-2) 0); }
.rk-score > span { width: 74px; height: 74px; border-radius: 50%; background: var(--panel); display: grid; place-content: center; font-size: 11px; color: var(--ink-3); }
.rk-score b { font-size: 24px; color: var(--ink); line-height: 1; }
.rk-meta { font-size: 12px; color: var(--ink-3); }
.rk-step { position: absolute; right: 12px; top: 10px; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.rk-grade { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
.g-a { --g: #12805c; --g-soft: #e0f4eb; } .g-b { --g: #1f4fd1; --g-soft: #e6edfd; } .g-c { --g: #b45309; --g-soft: #fdf0dc; } .g-d { --g: #c42b2b; --g-soft: #fde8e8; }
.rk-grade { background: var(--g-soft); color: var(--g); }
.rk-av.sm.g-a, .rk-av.sm.g-b, .rk-av.sm.g-c, .rk-av.sm.g-d { background: var(--g); }
.rk-list { margin-bottom: 18px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-radius: 12px; color: var(--ink); }
.rk-row:hover { text-decoration: none; background: var(--c-soft); }
.rk-no { width: 28px; text-align: center; font-weight: 800; font-size: 16px; color: var(--ink-3); flex: none; }
.rk-who { flex: 1; min-width: 0; display: grid; }
.rk-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-who span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-bar { display: flex; align-items: center; gap: 10px; width: 220px; flex: none; }
.rk-bar .track { flex: 1; height: 10px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.rk-bar .fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--g); transition: width .5s; }
.rk-bar b { width: 36px; text-align: right; }
.rk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--ink-2); margin: 4px 2px 10px; }
.rk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--g); margin-right: 6px; vertical-align: -1px; }
@media (max-width: 860px) {
  .rk-podium { grid-template-columns: minmax(0, 1fr); }
  .rk-bar { width: 120px; }
  .rk-row .rk-grade { display: none; }
}
.rk-row .rk-grade { min-width: 128px; text-align: center; }
@media (max-width: 860px) { .rk-pod.p1 { order: -1; } }

/* Hiệu suất & năng lực */
.pf-hero { background: radial-gradient(circle at 90% -10%, rgba(255,255,255,.22), transparent 42%), linear-gradient(125deg, #0f766e 0%, #1f4fd1 55%, #6d28d9 100%); box-shadow: 0 14px 34px rgba(15, 118, 110, .25); }
.pf-per { align-items: center; }
.pf-per input { border: 0; border-radius: 8px; padding: 5px 8px; font: inherit; width: auto; }
.pf-per a { font-size: 18px; padding: 2px 10px; }
.s-a { --s: #12805c; } .s-b { --s: #1f4fd1; } .s-c { --s: #c27803; } .s-d { --s: #c42b2b; } .na { --s: #a0a8b8; }
b.s-a, b.s-b, b.s-c, b.s-d, b.na { color: var(--s); }
.pf-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 2px 10px; }
.pf-sec-h h2 { font-size: 18px; }
.pf-overview, .hm-card.c-blue, .hm-card.c-rose { margin-bottom: 18px; }
.pf-ov { display: grid; grid-template-columns: 200px minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: center; }
.pf-ov-score { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pf-notes-wrap { border-top: 1px solid var(--line-2); padding-top: 14px; }
.pf-ring { --p: 0; display: grid; place-items: center; border-radius: 50%; flex: none; background: conic-gradient(var(--s) calc(var(--p) * 1%), var(--line-2) 0); }
.pf-ring > span { display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--panel); }
.pf-ring b { color: var(--s); line-height: 1; }
.pf-ring i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.pf-ring.lg { width: 132px; height: 132px; } .pf-ring.lg > span { width: 104px; height: 104px; } .pf-ring.lg b { font-size: 36px; font-weight: 800; }
.pf-ring.md { width: 62px; height: 62px; } .pf-ring.md > span { width: 48px; height: 48px; } .pf-ring.md b { font-size: 18px; font-weight: 800; }
.pf-ring.sm { width: 44px; height: 44px; margin-left: auto; } .pf-ring.sm > span { width: 34px; height: 34px; } .pf-ring.sm b { font-size: 13px; font-weight: 800; }
.pf-delta { font-size: 12.5px; font-weight: 600; }
.pf-delta.up { color: var(--ok); } .pf-delta.down { color: var(--bad); } .pf-delta.flat { color: var(--ink-3); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pf-chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); font-weight: 600; }
.pf-chip.good { background: var(--ok-soft); color: var(--ok); } .pf-chip.bad { background: var(--bad-soft); color: var(--bad); }
.pf-radar { max-width: 300px; display: block; margin: 0 auto; overflow: visible; }
.pf-grid { fill: none; stroke: #dfe4ee; stroke-width: 1; }
.pf-axis { stroke: #e4e8f0; stroke-width: 1; }
.pf-area { fill: rgba(31, 79, 209, .18); stroke: #1f4fd1; stroke-width: 2; stroke-linejoin: round; }
.pf-dot { fill: #1f4fd1; }
.pf-rl { font-size: 10.5px; fill: #4a5568; font-weight: 600; }
.pf-rl.na { fill: #a0a8b8; }
.pf-rv { font-size: 10.5px; fill: #1f4fd1; font-weight: 800; }
.pf-spark { display: block; overflow: visible; }
.pf-line { fill: none; stroke: #6d28d9; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pf-pt { fill: #fff; stroke: #6d28d9; stroke-width: 2; }
.pf-ref { stroke: #e3e8ef; stroke-dasharray: 4 4; }
.pf-sv { font-size: 10px; font-weight: 700; fill: #4a5568; }
.pf-sl { font-size: 10px; fill: #8a94a6; }
.pf-bars { display: grid; gap: 8px; }
.pf-bar { display: grid; grid-template-columns: minmax(128px, 44%) 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.pf-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pf-bar .track { height: 9px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.pf-bar .fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--s); transition: width .5s; }
.pf-bar b { text-align: right; }
.pf-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.pf-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pf-team { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(16,24,40,.06); color: var(--ink); border-top: 4px solid #0f766e; transition: transform .15s; }
.pf-team:hover { text-decoration: none; transform: translateY(-2px); }
.pf-team.on { outline: 2px solid #1f4fd1; }
.pf-team-top { display: flex; gap: 12px; align-items: center; }
.pf-team-top > div { display: grid; gap: 2px; }
.pf-team-top b { font-size: 16px; }
.pf-team-top span { font-size: 12px; color: var(--ink-3); }
.pf-team .pf-chips { justify-content: flex-start; }
.pf-users { display: grid; gap: 2px; }
.pf-user { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; margin: 0 -10px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pf-user:hover { background: var(--c-soft); }
.pf-rank { width: 24px; text-align: center; font-weight: 800; color: var(--ink-3); flex: none; }
.rk-av.pf-av { background: var(--s); }
.pf-who { flex: 1; min-width: 0; display: grid; }
.pf-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-who > span { font-size: 12px; color: var(--ink-3); }
.pf-me { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.pf-mini { display: flex; align-items: flex-end; gap: 4px; height: 34px; flex: none; }
.pf-mb { width: 10px; height: 100%; border-radius: 4px; background: var(--line-2); display: flex; align-items: flex-end; overflow: hidden; }
.pf-mb .fill { width: 100%; height: 4px; background: var(--s); border-radius: 4px; transition: height .5s; }
.pf-sp { width: 110px; flex: none; }
.pf-score { width: 52px; text-align: right; font-size: 22px; font-weight: 800; color: var(--s); flex: none; }
.pf-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pf-wk { display: grid; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(16,24,40,.05); color: var(--ink); }
.pf-wk:hover { text-decoration: none; border-color: #c7d2fe; }
.pf-wk-top { display: flex; align-items: center; gap: 10px; }
.pf-wk-top .hm-ico { background: var(--brand-soft); width: 36px; height: 36px; font-size: 18px; }
.pf-wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-wk-grid span { display: grid; font-size: 11.5px; color: var(--ink-3); padding: 6px 8px; border-radius: 10px; background: var(--line-2); }
.pf-wk-grid b { font-size: 17px; color: var(--ink); }
.pf-wk-grid .bad { background: var(--bad-soft); } .pf-wk-grid .bad b { color: var(--bad); }
.rk-legend i.s-a, .rk-legend i.s-b, .rk-legend i.s-c, .rk-legend i.s-d { background: var(--s); }
.pf-ud { display: grid; grid-template-columns: 170px minmax(200px, 280px) minmax(0, 1fr); gap: 20px; align-items: center; }
.pf-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: 12.5px; }
.pf-how ul { padding-left: 18px; display: grid; gap: 6px; }
.pt-team { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pt-head input, .pt-head select { width: auto; flex: 1; min-width: 140px; }
.pt-mem { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pt-act { margin-top: 8px; text-align: right; }
.pt-new { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pt-new input { flex: 2; min-width: 180px; } .pt-new select { flex: 1; min-width: 140px; width: auto; }
@media (max-width: 1000px) { .pf-ov, .pf-ud { grid-template-columns: minmax(0, 1fr); } .pf-sp { display: none; } }
@media (max-width: 600px) { .pf-mini { display: none; } .pf-wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Năng lực (tab của Hiệu suất) */
.cp-hero { background: radial-gradient(circle at 90% -10%, rgba(255,255,255,.22), transparent 42%), linear-gradient(125deg, #6d28d9 0%, #9333ea 45%, #0e7490 100%); box-shadow: 0 14px 34px rgba(109, 40, 217, .25); }
.cp-sec { margin-bottom: 18px; }
.cp-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.cp-row { display: grid; grid-template-columns: 38px minmax(170px, 1fr) 190px 130px 130px; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.cp-row .cp-act { grid-column: 2 / -1; justify-content: flex-start; width: auto; }
.cp-row .cp-act:empty { display: none; }
.cp-row:first-child { border-top: 0; }
.cp-pos { display: grid; gap: 2px; min-width: 0; }
.cp-pos select { width: 100%; }
.cp-meter { display: grid; grid-template-columns: 1fr 40px; grid-template-rows: auto auto; column-gap: 8px; min-width: 0; align-items: center; }
.cp-meter .lbl { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.cp-meter .track { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.cp-meter .fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--s); transition: width .5s; }
.cp-meter b { text-align: right; font-size: 13px; }
.cp-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; width: 230px; flex: none; }
.cp-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.cp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.cp-dots i.on { background: #6d28d9; }
.cp-matrix th.c, .cp-matrix td.c { text-align: center; }
.cp-matrix th { white-space: normal; min-width: 120px; }
.cp-grp td { background: var(--line-2); font-weight: 700; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.cp-levels { display: grid; gap: 6px; padding-left: 22px; }
.cp-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cp-rv select { width: 100%; min-width: 150px; }
.cp-rv td { vertical-align: middle; }
.cp-rv tr.cp-gap td { background: #fff6f6; }
.cp-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.cp-res { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--line-2); }
.cp-res .k { font-size: 12.5px; color: var(--ink-2); }
.cp-res b { font-size: 28px; font-weight: 800; color: var(--s, var(--ink)); }
.ce-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.ce-top { display: flex; gap: 8px; }
.ce-top .ce-grp { width: 200px; flex: none; } .ce-top .ce-name { flex: 1; }
.ce-lvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ce-lvs label { display: grid; gap: 2px; font-size: 11.5px; color: var(--ink-3); }
.pe-name { width: 100%; min-width: 120px; font-weight: 600; }
.pe-rk { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 4px; font-size: 12px; font-weight: 400; }
.pe-rk input { width: 56px; }
@media (max-width: 900px) { .cp-row { grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); } .cp-row .cp-pos { grid-column: 2 / -1; width: auto; } .cp-row .cp-meter { width: auto; } .cp-row .cp-meter:nth-of-type(4) { grid-column: 2; } .ce-lvs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cp-result { grid-template-columns: minmax(0, 1fr); } .cp-meter { width: 120px; } }
.table-wrap.cp-rv-wrap { overflow: visible; } /* thân hộp thoại (lưới) tự cuộn: không để bảng co thành ô cuộn lồng */

/* Hồ sơ phát triển (Năng lực ?user=) */
.dp-back { color: inherit; opacity: .9; text-decoration: none; font-weight: 700; }
.dp-back:hover { text-decoration: underline; }
.dp-ladder { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; }
.dp-step { position: relative; flex: 1 1 0; min-width: 160px; display: grid; gap: 6px; align-content: start; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.dp-step.cur { border-color: var(--c); background: var(--c-soft); box-shadow: 0 0 0 2px var(--c) inset; }
.dp-step.nxt { border-style: dashed; border-color: var(--c); }
.dp-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--line-2); color: var(--ink-2); }
.dp-step.cur .dp-num { background: var(--c); color: #fff; }
.dp-step > b { font-size: 14px; line-height: 1.3; }
.dp-tag { font-size: 11.5px; font-weight: 700; color: var(--c); min-height: 16px; }
.dp-meter { width: auto; }
.dp-arrow { align-self: center; font-size: 26px; color: var(--ink-3); flex: none; }
.dp-promo-wrap { display: grid; gap: 10px; margin-top: 8px; justify-items: start; }
.dp-promo { width: 100%; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); }
.dp-promo .small { margin-top: 3px; }
.dp-promo-act { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-hist { display: grid; gap: 6px; font-size: 13px; }
.dp-sugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dp-sug { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid #c27803; background: var(--panel); }
.dp-sug.now { border-left-color: #c42b2b; }
.dp-sug-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.dp-lv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-goal { padding: 6px 10px; border-radius: 8px; background: var(--line-2); }
.dp-learn { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.dp-sug .btn { justify-self: start; }
.dp-plan { display: flex; gap: 14px; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-2); }
.dp-plan:first-child { border-top: 0; }
.dp-plan.confirmed .dp-plan-main > b { color: var(--ok); }
.dp-plan-main { display: grid; gap: 3px; min-width: 0; }
.dp-plan-side { display: grid; gap: 4px; justify-items: end; align-content: start; flex: none; max-width: 300px; }
.dp-plan-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
.dp-result { color: var(--ink-2); }
.bad-text { color: var(--bad); font-weight: 600; }
.ce-learn-l { display: grid; gap: 2px; font-size: 11.5px; color: var(--ink-3); }
.ce-learn { width: 100%; font-size: 12.5px; }
.hm-card > header > .btn { margin-left: auto; }
@media (max-width: 700px) { .dp-plan { flex-direction: column; } .dp-plan-side { justify-items: start; max-width: none; } .dp-plan-act { justify-content: flex-start; } .dp-arrow { display: none; } }

/* Cài đặt → Dữ liệu */
.st-list { display: grid; gap: 16px; max-width: 760px; }
.st-kv { grid-template-columns: 160px minmax(0, 1fr); max-width: 360px; }
.st-kv .v { font-weight: 600; }
.st-body { display: grid; gap: 10px; justify-items: start; }
.st-body p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.st-confirm { display: grid; gap: 4px; font-size: 13px; width: 100%; }
.st-confirm input { max-width: 220px; text-transform: uppercase; }
.st-info { width: 100%; line-height: 1.6; }
#st-file { max-width: 100%; }
.st-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-foreign { background: var(--bad-soft, #fde8e8); color: var(--bad, #b42318); width: 100%; line-height: 1.6; }
.st-cmp { max-width: 420px; }
.auth-links { display: flex; justify-content: center; font-size: 13px; }
.st-howto summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.st-howto .st-steps { margin-top: 8px; }
.ok-text { color: var(--ok); }

/* Kế toán */
.form-grid .is-hidden { display: none; }
table.tbl tr.grp-row td { background: var(--line-2); }
.fv-sum { padding: 0 14px; }
.fv-count { padding: 0 14px 8px; }
.cf-bars { min-width: 160px; }
.cf-bar { height: 7px; border-radius: 4px; margin: 2px 0; width: 0; }
.cf-bar.in { background: var(--ok); }
.cf-bar.out { background: var(--bad); }
table.tbl tr.cf-low td { background: var(--bad-soft); }
.dept-bar { margin: 0 0 10px; }
/* Khách hàng */
.toolbar input.cus-search { font-size: 15px; padding: 10px 12px; width: 100%; max-width: none; flex: 1 1 100%; }
.cus-match { color: var(--ink-2); margin-top: 2px; }
.cus-contact { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cus-contact-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 32px; }
.journey { display: flex; flex-wrap: wrap; gap: 4px; }
.jstep { flex: 1 1 110px; text-align: center; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: var(--line-2); color: var(--ink-3); }
.jstep.done { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--ink-2); }
.jstep.now { background: var(--brand); color: #fff; font-weight: 700; }
.cus-exists { display: grid; gap: 8px; }
.field-dup input { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dup-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--panel); box-shadow: var(--shadow-lg); z-index: 45; display: flex; flex-direction: column; animation: dup-in .18s ease-out; }
.dup-panel-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.dup-panel-b { padding: 16px; overflow: auto; }
.dup-title { color: var(--bad); font-weight: 700; font-size: 17px; line-height: 1.4; }
.dup-sub { font-weight: 600; margin: 10px 0 8px; }
.dup-tbl td, .dup-tbl th { vertical-align: top; }
@media (max-width: 720px) { .dup-panel { top: auto; max-height: 60vh; border-radius: 14px 14px 0 0; } }
@keyframes dup-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cus-exists-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.nav-count, .btn-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--bad, #d93025); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nav-item .nav-count { margin-left: auto; }
.nav-count.hidden, .btn-count.hidden { display: none; }
/* Bộ soạn thảo (trao đổi) */
.rte { border: 1px solid var(--line); border-radius: 10px; background: #fff; position: relative; }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line-2); }
.rte-b { min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink); }
.rte-b:hover { background: var(--line-2); }
.rte-b small { font-size: 9px; line-height: 1.1; display: block; }
.rte-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
select.rte-sel, select.rte-kind { height: 30px; width: auto; min-width: 0; padding: 0 6px; font-size: 13px; }
.rte-a { text-decoration: underline; text-decoration-color: #c42b2b; text-decoration-thickness: 3px; font-weight: 700; }
.rte-pop { position: relative; display: inline-block; }
.rte-menu { position: absolute; top: 34px; left: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); min-width: 160px; }
.rte-menu.hidden, .rte-mentions.hidden, .rte-src.hidden, .rte-area.hidden { display: none; }
.rte-sw { width: 28px; height: 28px; margin: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-weight: 700; }
.rte-emoji { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; }
.rte-emoji button { width: 32px; height: 32px; border: 0; background: transparent; font-size: 18px; cursor: pointer; border-radius: 6px; }
.rte-emoji button:hover { background: var(--line-2); }
.rte-tbl { display: grid; gap: 6px; }
.rte-tbl input { height: 30px; width: 70px; }
.rte-tpls { display: grid; gap: 4px; min-width: 240px; max-height: 300px; overflow: auto; }
.rte-tpl { display: flex; gap: 4px; }
.rte-tpl-use { flex: 1; text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.rte-tpl-use:hover { background: var(--brand-soft); }
.rte-tpl-del { border: 0; background: transparent; cursor: pointer; color: var(--ink-3); }
.rte-area { min-height: 110px; max-height: 420px; overflow: auto; padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.5; }
.rte-area:empty::before { content: attr(data-ph); color: var(--ink-3); }
.rte-src { width: 100%; min-height: 120px; border: 0; border-radius: 0; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.rte-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.rte-file { display: inline-flex; align-items: center; gap: 4px; background: var(--line-2); border-radius: 99px; padding: 2px 10px; font-size: 12.5px; }
.rte-file button { border: 0; background: transparent; cursor: pointer; color: var(--ink-3); }
.rte-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.rte-tools { display: flex; align-items: center; gap: 4px; }
.rte-mentions { position: absolute; left: 12px; bottom: 54px; z-index: 31; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; display: grid; min-width: 220px; }
.rte-mentions button { text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.rte-mentions button.on, .rte-mentions button:hover { background: var(--brand-soft); }
.rte-full { position: fixed; inset: 16px; z-index: 900; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.rte-full .rte-area { flex: 1; max-height: none; }
/* Nội dung soạn thảo khi soạn + khi xem */
.rt-view { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.rt-view p, .rte-area p { margin: 0 0 4px; }
.rt-view img, .rte-area img { max-width: 100%; max-height: 360px; border-radius: 6px; }
.rt-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.rt-view pre, .rte-area pre { background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; white-space: pre-wrap; }
.rt-view blockquote, .rte-area blockquote { border-left: 3px solid var(--line); margin: 4px 0; padding-left: 10px; color: var(--ink-2); }
.rt-table { border-collapse: collapse; margin: 6px 0; }
.rt-table td, .rt-table th { border: 1px solid var(--line); padding: 4px 8px; min-width: 50px; }
.mention { color: var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.hashtag { color: #0e7490; font-weight: 600; cursor: pointer; }
.tc-red { color: #d32f2f; } .tc-orange { color: #e65100; } .tc-green { color: #2e7d32; } .tc-blue { color: #1565c0; } .tc-purple { color: #6a1b9a; } .tc-gray { color: #757575; } .tc-black { color: #000; }
.hl-yellow { background: #fff59d; } .hl-green { background: #c8e6c9; } .hl-blue { background: #bbdefb; } .hl-pink { background: #f8bbd0; } .hl-orange { background: #ffe0b2; }
.rte-sw.hl-none, .rte-sw.tc-none { background: #fff; }
.fs-s { font-size: 12px; } .fs-l { font-size: 18px; } .fs-xl { font-size: 24px; }
.ff-serif { font-family: Georgia, 'Times New Roman', serif; } .ff-mono { font-family: ui-monospace, Consolas, monospace; }
.al-center { text-align: center; } .al-right { text-align: right; } .al-justify { text-align: justify; }
.ind-1 { margin-left: 24px; } .ind-2 { margin-left: 48px; } .ind-3 { margin-left: 72px; } .ind-4 { margin-left: 96px; }
.lh-15 { line-height: 1.8; } .lh-2 { line-height: 2.2; }
.cd-nfilter { border-top: 1px solid var(--line-2); }
.tl-act { float: right; }
.cav { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; border: 1px solid var(--line); }
.cav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cav-sm { width: 40px; height: 40px; font-size: 14px; }
.cav-lg { width: 96px; height: 96px; font-size: 30px; }
/* Đồng hồ hồ sơ đầy đủ */
.cus-profile { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.gauge { width: 170px; flex: none; }
.gauge .g-bg, .gauge .g-fg { fill: none; stroke-width: 12; stroke-linecap: round; }
.gauge .g-bg { stroke: var(--line-2); }
.gauge.g-good .g-fg { stroke: #2e7d32; } .gauge.g-mid .g-fg { stroke: #f59e0b; } .gauge.g-low .g-fg { stroke: #d32f2f; }
.gauge .g-needle { stroke: #334155; stroke-width: 3; stroke-linecap: round; }
.gauge .g-hub { fill: #334155; }
.gauge .g-txt { font-size: 18px; font-weight: 800; fill: #0f172a; }
.cus-checks { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 240px; }
.cus-checks .ck { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: #fff; }
.cus-checks .ck.ok { color: #2e7d32; border-color: #c8e6c9; background: #f1f8f2; }
.cus-checks button.ck.no { color: #b71c1c; border-color: #f5c2c2; background: #fff5f5; cursor: pointer; }
.cus-checks button.ck.no:hover { background: #ffe5e5; }
.cus-checks button.ck.no:disabled { cursor: default; opacity: .8; }
.field-hot input, .field-hot select, .field-hot textarea { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.mt-xs { margin-top: 3px; }
/* Lịch hẹn */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-h { background: var(--line-2); text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 6px 0; }
.cal-cell { background: #fff; min-height: 92px; padding: 4px; cursor: pointer; overflow: hidden; }
.cal-cell:hover { background: #f8faff; }
.cal-cell.off { background: #fafbfc; color: var(--ink-3); }
.cal-cell.today .cal-d { background: var(--brand); color: #fff; border-radius: 99px; }
.cal-cell.sel { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-d { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 4px; }
.cal-ev { font-size: 11.5px; line-height: 1.3; margin-top: 2px; padding: 1px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--brand-soft); color: var(--brand); }
.cal-ev.done { background: #e8f5e9; color: #2e7d32; } .cal-ev.cancelled { background: var(--line-2); color: var(--ink-3); text-decoration: line-through; }
.cal-ev.missed { background: #fff4e5; color: #b45309; } .cal-ev.late { background: #fdecec; color: #b71c1c; font-weight: 700; }
.ap-result { color: #2e7d32; }
.cp-pick { display: block; width: 100%; text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; cursor: pointer; }
.cp-pick:hover { background: var(--brand-soft); }
@media (max-width: 720px) { .cal-cell { min-height: 60px; } .cal-ev { font-size: 10px; } }
/* Lịch chung: màu theo nguồn */
.cal-src { gap: 6px; flex-wrap: wrap; }
.cal-chip { font-size: 12.5px; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--brand); }
.src-event { --src: #6d28d9; } .src-appt { --src: #1f4fd1; } .src-contract { --src: #0e7490; } .src-po { --src: #b45309; } .src-supreq { --src: #c2410c; }
.src-deviation { --src: #be123c; } .src-fin { --src: #15803d; } .src-task { --src: #475569; } .src-plan { --src: #0369a1; }
.cal-dot[class*="src-"] { background: var(--src); }
.cal-ev[class*="src-"] { background: color-mix(in srgb, var(--src) 14%, #fff); color: var(--src); border-left: 3px solid var(--src); }
.cal-ev[class*="src-"].done { opacity: .55; } .cal-ev[class*="src-"].cancelled { opacity: .45; text-decoration: line-through; }
.cal-ev[class*="src-"].late { background: #fdecec; color: #b71c1c; border-left-color: #b71c1c; font-weight: 700; }
.cal-chip.on .mark { background: var(--src); border-color: var(--src); }

/* ===== Menu trái: mặc định mở rộng (thấy hết mục theo phòng, gấp / mở từng nhóm);
   chế độ thu gọn (.shell.compact, chỉ máy tính): thanh icon, menu con bật ra bên phải ===== */
.rail { padding: 4px 10px; }
.rg-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 10px 5px; border: 0; background: transparent; font: inherit; cursor: pointer;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6f7b93; text-align: left; border-radius: 8px; }
.rg-btn:hover { color: #fff; }
.rg-btn .rg-ico { font-size: 13px; width: 18px; text-align: center; }
.rg-btn .rg-lbl { flex: 1; }
.rg:not(.rg-one) > .rg-btn::after { content: '▾'; margin-left: 4px; font-size: 11px; opacity: .7; }
.rg.folded > .rg-btn::after { content: '▸'; }
.rg-btn .nav-count { margin-left: 0; }
.rg.folded .rg-fly { display: none; }
.rg.folded.active > .rg-btn { color: #fff; }
.rg-title { display: none; }
.rg-one .rg-btn { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--side-ink); padding: 8px 10px; margin-top: 4px; }
.rg-one .rg-btn .rg-ico { font-size: 14px; opacity: .85; }
.rg-one .rg-btn:hover { background: var(--side-active); text-decoration: none; }
.side .me .rg-btn { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: #fff; padding: 8px; }
.side .me .rg-btn::after { content: none; }
.rail-toggle { margin: 4px 10px 6px; padding: 6px 10px; border: 1px dashed #2a3550; border-radius: 8px; background: transparent; color: #8c97ad; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.rail-toggle:hover { background: var(--side-active); color: #fff; }

@media (min-width: 861px) {
  .shell.compact { grid-template-columns: 84px minmax(0, 1fr); }
  .compact .side { overflow-x: hidden; z-index: 45; } /* menu bay ra (lớp 60) nằm trong lớp của thanh bên: thanh bên phải trên nội dung (khung trang chủ lớp 1) */
  .compact .side .brand { flex-direction: column; gap: 6px; padding: 12px 6px 8px; }
  .compact .side .brand .brand-t { display: none; }
  .compact .side .brand .bell { margin: 0; }
  .compact .rail { padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }
  .compact .rg-btn .rg-lbl { flex: none; }
  .compact .rg-btn { position: relative; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 2px 8px; border-radius: 10px;
    color: var(--side-ink); font-size: 11px; font-weight: 400; line-height: 1.2; text-align: center; text-transform: none; letter-spacing: 0; margin: 0; }
  .compact .rg:not(.rg-one) > .rg-btn::after { content: none; }
  .compact .rg-btn:hover, .compact .rg.open > .rg-btn, .compact .rg.active > .rg-btn, .compact .rg-btn.active { background: var(--side-active); color: #fff; text-decoration: none; box-shadow: none; }
  .compact .rg.active > .rg-btn::before, .compact .rg-btn.active::before { content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #5b84ff; }
  .compact .rg-ico, .compact .rg-one .rg-btn .rg-ico { font-size: 20px; line-height: 1; width: auto; opacity: 1; }
  .compact .rg-btn .nav-count { position: absolute; top: 3px; right: 8px; margin: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  .compact .rg-fly, .compact .rg.folded .rg-fly { display: none; position: fixed; left: 84px; z-index: 60; min-width: 250px; max-width: 320px; max-height: calc(100vh - 16px); overflow-y: auto;
    background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
  .compact .rg.open .rg-fly { display: block; }
  .compact .rg-title { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 8px 10px 6px; }
  .compact .rg-fly .nav-item { color: var(--ink); }
  .compact .rg-fly .nav-item:hover { background: var(--line-2); color: var(--ink); }
  .compact .rg-fly .nav-item.active { background: var(--brand-soft); color: var(--brand); box-shadow: none; font-weight: 600; }
  .compact .rg-fly .nav-item .soon { background: var(--line-2); color: var(--ink-3); }
  .compact .rail-toggle { margin: 6px; text-align: center; font-size: 15px; padding: 4px 0; }
  .compact .side .me { padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .compact .side .me .me-card { justify-content: center; padding: 6px; width: 100%; flex-direction: column; }
  .compact .side .me .me-t { display: none; }
  .compact .side .me .logout { width: 100%; padding: 4px 0; margin: 0; }
}
@media (max-width: 860px) { .rail-toggle { display: none; } }

/* ===== Báo giá ===== */
.q-lines input { width: 100%; min-width: 70px; }
.q-lines td:first-child { min-width: 280px; }
.q-lines .ql-hint { margin-top: 3px; line-height: 1.35; }
.q-lines input.bad-in { border-color: var(--bad); background: var(--bad-soft); }
.q-totals { display: grid; gap: 6px; padding: 14px 18px; max-width: 460px; margin-left: auto; }
.q-totals > div:not(.notice) { display: flex; justify-content: space-between; gap: 16px; }
.q-totals .q-grand { border-top: 1px solid var(--line); padding-top: 8px; font-size: 16px; }
.q-totals .q-grand b { color: var(--brand); }
.plain-link { color: inherit; }
.qprint { background: #fff; color: #111; max-width: 900px; margin: 0 auto; padding: 32px 36px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.45; }
.qp-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--qp-accent, #1d3a8a); padding-bottom: 10px; }
.qp-co { font-size: 1.23em; font-weight: 700; color: var(--qp-accent, #1d3a8a); text-transform: uppercase; }
.qp-no { text-align: right; white-space: nowrap; }
.qp-title { text-align: center; color: var(--qp-accent, #111); font-size: 1.7em; margin: 18px 0 2px; letter-spacing: .04em; }
.qp-sub { text-align: center; font-style: italic; margin-bottom: 8px; }
.qp-to { margin: 12px 0; display: grid; gap: 2px; }
.qp-to span { display: inline-block; min-width: 82px; color: #555; }
.qp-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; }
.qp-tbl th, .qp-tbl td { border: 1px solid #999; padding: 5px 6px; vertical-align: top; }
.qp-tbl th { background: color-mix(in srgb, var(--qp-accent, #1d3a8a) 10%, #fff); font-weight: 600; text-align: center; }
.qp-tbl .n { text-align: right; white-space: nowrap; }
.qp-tbl .c { text-align: center; }
.qp-tbl .r { text-align: right; }
.qp-tbl tfoot td { font-weight: 600; }
.qp-tbl .qp-grand td { font-size: 1.08em; background: color-mix(in srgb, var(--qp-accent, #1d3a8a) 10%, #fff); }
.qp-note { font-size: 11.5px; color: #555; }
.qp-words { margin: 6px 0 12px; }
.qp-terms { display: grid; gap: 4px; }
.qp-sign { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 28px; }
.qp-sp { height: 70px; }
@media print {
  .qprint { border: 0; padding: 0; max-width: none; font-size: 12px; }
  .qp-tbl th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qp-tbl .qp-grand td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 640px) { .qprint { padding: 16px; } .qp-head { flex-direction: column; } .qp-no { text-align: left; } .qp-tbl { font-size: 11px; } }
.q-notes { display: grid; gap: 8px; padding: 12px 18px 0; }
.q-note { background: var(--line-2); border-radius: 10px; padding: 8px 12px; max-width: 760px; }
.q-note.mine { background: var(--brand-soft); margin-left: auto; }
.q-note-h { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.q-note-h .qn-del { margin-left: auto; padding: 0 6px; }
.q-note-new { display: flex; gap: 8px; align-items: flex-end; }
.q-note-new textarea { flex: 1; }
.q-lines .ql-dpct { text-align: right; margin-top: 2px; }
.q-lines .ql-price, .q-lines .ql-disc { min-width: 115px; }
.q-lines .ql-qty, .q-lines .ql-vat { min-width: 60px; max-width: 80px; }
.q-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 14px 18px; }
.q-info-col { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 9px 14px; align-content: start; }
.q-info .q-k { color: var(--ink-3); font-size: 14px; }
.q-info .q-v { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.q-info .q-v a { color: inherit; }
.q-dtbl tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); }
.q-dtbl tfoot .q-grand-row td { color: #d9480f; font-size: 15px; }
@media (max-width: 860px) { .q-info { grid-template-columns: 1fr; gap: 9px; } .q-info-col { grid-template-columns: 120px minmax(0, 1fr); } }
.qp-wrap { display: flex; gap: 16px; align-items: flex-start; }
.qp-wrap .qprint { flex: 1; min-width: 0; }
.qp-panel { width: 340px; flex: none; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.qe-body { display: grid; gap: 10px; }
.qe-colors { display: flex; gap: 8px; margin-top: 4px; }
.qe-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.qe-color.on { box-shadow: 0 0 0 2px var(--ink); }
.qe-shows { display: grid; gap: 4px; margin-top: 4px; }
.qe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qprint[contenteditable="true"] { outline: 2px dashed var(--brand); outline-offset: 4px; }
.qp-head-min { border-bottom: 0; }
.qp-closing { margin-top: 12px; }
.qp-footer { margin-top: 24px; padding-top: 8px; border-top: 1px solid #ccc; font-size: .85em; color: #555; text-align: center; }
.qp-hint { font-size: .85em; color: #666; font-style: italic; }
.qp-sign.three { grid-template-columns: 1fr 1fr 1fr; }
#qp-quick.active { background: var(--brand-soft); border-color: var(--brand); }
@media (max-width: 860px) { .qp-wrap { flex-direction: column; } .qp-panel { width: 100%; position: static; max-height: none; } }
@media print { .qp-wrap { display: block; } .qprint[contenteditable="true"] { outline: 0; } }
.qp-wrap { overflow-x: auto; }
.qp-wrap .qprint { min-width: 640px; }
@media print { .qp-wrap .qprint { min-width: 0; } }
.qe-sec { font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.qe-sec .hint { display: block; font-weight: 400; }
.q-ship { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px 0; }
.q-ship .field { width: 200px; }
.q-ship input { text-align: right; }
.q-ship input.bad-in { border-color: var(--bad); background: var(--bad-soft); }
.q-prevat { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.q-dtbl tr.q-main td { border-bottom: 0; }
.q-dtbl tr.q-sub td { padding-top: 0; font-size: 12px; color: var(--ink-3); }
.qp-tbl tr.qp-pre td { border-top: 0; padding-top: 0; font-size: .82em; color: #777; font-style: italic; }
.qp-tbl tr.qp-has-pre td { border-bottom: 0; }
/* ===== Đơn hàng bán ===== */
.so-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 16px; }
.so-grid > .card { margin-top: 0; }
.so-grid + .card { margin-top: 16px; }
.so-steps { display: grid; gap: 10px; }
.so-step { display: flex; gap: 12px; align-items: flex-start; background: var(--line-2); border-radius: 10px; padding: 10px 12px; }
.so-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; }
.so-step.done .so-dot { background: var(--ok); border-color: var(--ok); }
#sp-quick.active { background: var(--brand-soft); border-color: var(--brand); }
@media (max-width: 860px) { .so-grid { grid-template-columns: 1fr; } }
.so-addr { display: grid; gap: 6px; margin-top: 4px; }
.so-addr-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; }
.so-addr-opt > span { display: flex; flex-direction: column; gap: 2px; }
.so-addr-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.so-addr-opt:has(input:disabled) { opacity: .55; cursor: default; }
.so-addr input[readonly] { background: var(--line-2); }
.so-recv-list { display: grid; gap: 6px; }
.so-recv-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .so-recv-in { grid-template-columns: 1fr; } }
/* Khổ giấy in (báo giá / đơn hàng): trên màn hình xem đúng bề rộng khổ, khi in dùng trang khổ tương ứng */
@page a5l { size: A5 landscape; margin: 7mm 8mm; }
@page a5p { size: A5 portrait; margin: 8mm 7mm; }
@page a4p { size: A4 portrait; margin: 12mm; }
.qprint.paper-A5L { max-width: 210mm; padding: 7mm 8mm; }
.qprint.paper-A5P { max-width: 148mm; padding: 8mm 7mm; }
.qprint.paper-A4P { max-width: 210mm; }
.qprint.paper-A5L .qp-sp, .qprint.paper-A5P .qp-sp { height: 48px; }
.qprint.paper-A5L .qp-title, .qprint.paper-A5P .qp-title { margin: 8px 0 2px; }
.qprint.paper-A5L .qp-tbl th, .qprint.paper-A5L .qp-tbl td, .qprint.paper-A5P .qp-tbl th, .qprint.paper-A5P .qp-tbl td { padding: 3px 5px; }
.qp-wrap .qprint.paper-A5P { min-width: 0; }
@media print {
  .qprint.paper-A5L { page: a5l; padding: 0; }
  .qprint.paper-A5P { page: a5p; padding: 0; }
  .qprint.paper-A4P { page: a4p; padding: 0; }
}
.ar-sub td { background: var(--line-2); font-size: 13px; }
.mb { margin-bottom: 14px; }
/* Phiếu nhập / xuất kho (cửa sổ in) */
body.stock-print { background: #fff; color: #000; font-size: 13px; }
.sp-page { max-width: 190mm; margin: 0 auto; padding: 10mm 6mm; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.sp-head b { font-size: 18px; letter-spacing: .5px; }
.sp-right { text-align: right; font-weight: 600; }
.sp-info { margin-bottom: 8px; line-height: 1.6; }
.sp-tbl { width: 100%; border-collapse: collapse; }
.sp-tbl th, .sp-tbl td { border: 1px solid #000; padding: 4px 6px; text-align: left; }
.sp-tbl .num { text-align: right; }
.sp-sign { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 18px; min-height: 30mm; }
@media print { body.stock-print .sp-page { padding: 0; } }
.contents { display: contents; }
input.locked-in { background: var(--line-2); color: var(--ink); cursor: not-allowed; }
.ql-lock { color: var(--brand); }
/* Thu gọn / xem thêm (trao đổi, diễn biến) */
.cmore { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; }
.cpager { border-top: 1px solid var(--line); }
.wf-users { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-top: 6px; display: grid; gap: 2px; }
.cn-row input { width: 100%; }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; }
/* Phiếu kiểm kê in: ô trống đủ cao để viết tay */
.sp-sub { font-size: 11px; font-weight: 400; color: #444; }
.sp-count td { height: 9mm; vertical-align: middle; }
.sp-count .sp-stt { width: 10mm; text-align: center; }
.sp-count .sp-fill { width: 28mm; }
.sp-count .sp-note { width: 40mm; }
.sp-count .sp-blank { height: 8mm; }
.sp-count thead { display: table-header-group; }
.sp-count tr { page-break-inside: avoid; }
/* Xem trước bản in (lớp phủ trong trang) */
.pp-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(30, 35, 45, .72); display: flex; flex-direction: column; }
.pp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--card, #fff); border-bottom: 1px solid var(--line); }
.pp-title { font-size: 15px; }
.pp-hint { color: var(--ink-2); font-size: 13px; flex: 1; min-width: 200px; }
.pp-acts { display: flex; gap: 8px; }
.pp-paper-wrap { flex: 1; overflow: auto; padding: 20px 16px 40px; }
.pp-paper { display: block; margin: 0 auto; width: min(210mm, 100%); min-height: 600px; border: 0; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
@media print { .pp-overlay { display: none !important; } }
/* Phiếu kiểm kê in: cột cố định, cột tên hàng lấy phần còn lại (tên dài xuống dòng gọn) */
.sp-count { table-layout: fixed; }
.sp-count td, .sp-count th { overflow-wrap: anywhere; }
.sp-count .sp-code { width: 30mm; font-size: 12px; }
.sp-count .sp-unit { width: 12mm; text-align: center; }
.sp-count .sp-sys { width: 18mm; }
.sp-count .sp-fill { width: 24mm; }
.sp-count .sp-note { width: 30mm; }
.sp-count th { font-size: 12px; }
/* A4 ngang */
body.stock-print.sp-land { page: a4land; }
@page a4land { size: A4 landscape; margin: 8mm; }
body.stock-print.sp-land .sp-page { max-width: 277mm; }
body.stock-print.sp-land .sp-count .sp-note { width: 60mm; }
body.stock-print.sp-land .sp-count .sp-code { width: 36mm; }
.pp-paper.pp-wide { width: min(297mm, 100%); }
/* Xuất kho theo đơn: tạo phiếu (thông tin trái, sản phẩm phải) / chi tiết (phiếu trái, duyệt + bình luận phải) */
.xo-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.xo-grid > .card, .xo-grid > div > .card:first-child { margin-top: 0; }
.xo-grid.xo-detail { grid-template-columns: minmax(0, 1fr) 360px; }
.xo-grid .card-body > .field { margin-bottom: 10px; }
#xf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.xo-common { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.xo-tbl select { min-width: 150px; max-width: 220px; }
.xo-tbl input.xo-qty { width: 80px; text-align: right; }
.xo-tbl input[data-note] { min-width: 120px; }
.xo-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.xo-cmts { margin-top: 12px; display: grid; gap: 8px; }
.xo-cmt { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.xo-cmt.ev { background: var(--line-2); }
.sp-sign.sp-sign5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1280px) { .xo-grid, .xo-grid.xo-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .xo-info { grid-template-columns: 1fr; } }
.xo-tbl td:has(> select) { white-space: nowrap; }
.xo-grid .tbl td.mono { white-space: nowrap; }
/* Tab con trong trang Nhập kho / Xuất kho; bảng tổng hợp nhập xuất tồn */
.tabs.sub-tabs { margin-top: -6px; font-size: 13px; }
.tabs.sub-tabs .tab { padding: 6px 12px; }
.su-tbl tfoot td { border-top: 2px solid var(--line); background: var(--line-2); }
.xo-parts { display: grid; gap: 8px; margin-top: 10px; }
.xo-part { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
/* Danh sách đơn hàng bán: tab trạng thái, bảng có dòng tổng cộng, chọn cột hiển thị */
.so-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 0 12px; }
.so-tabs .tab { white-space: nowrap; }
.so-tbl .so-stt { width: 36px; }
.so-tbl .so-cus { min-width: 220px; }
.so-tbl .so-cus-link { font-weight: 700; text-decoration: underline; }
.so-tbl tfoot td { border-top: 2px solid var(--line); background: var(--line-2); white-space: nowrap; }
.col-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
/* In nhiều liên: mỗi liên 1 trang, ghi "Liên i/n" */
.sp-lien { display: block; font-size: 11px; font-weight: 400; }
.sp-lien:empty, .qp-lien:empty { display: none; }
.qp-lien { font-size: 11px; color: #555; }
body.stock-print .sp-page + .sp-page { break-before: page; }
@media screen { body.stock-print .sp-page + .sp-page { border-top: 2px dashed #bbb; margin-top: 8mm; } }
.qp-copies { display: none; }
.copies-pick { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.copies-pick .cp-x { width: 70px; }
@media print { .qp-hide-print { display: none !important; } .qp-copies { display: block; } .qp-copies .qprint + .qprint { break-before: page; } }
/* Cột Tồn kho ở dòng hàng đơn / báo giá + bảng tồn từng kho */
.ql-info { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 50%; width: 20px; height: 20px; line-height: 18px; padding: 0; font-size: 12px; cursor: pointer; color: var(--muted); }
.ql-info:hover { color: var(--brand); border-color: var(--brand); }
.stock-pop { position: absolute; z-index: 1000; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 10px 12px; min-width: 300px; max-width: 420px; }
.stock-pop .sp-pop-title { font-weight: 700; text-align: center; margin-bottom: 6px; }
.stock-pop .tbl td, .stock-pop .tbl th { padding: 6px 8px; }
/* Khung chọn sản phẩm khi lên báo giá / đơn */
.prod-pick { position: absolute; z-index: 1000; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); display: flex; flex-direction: column; max-height: 460px; }
.prod-pick.hidden { display: none; }
.prod-pick .pp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prod-pick .pp-head b { font-size: 15px; }
.prod-pick .pp-cat { max-width: 240px; }
.prod-pick .pp-list { overflow-y: auto; flex: 1; }
.prod-pick .pp-row { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.prod-pick .pp-row:hover, .prod-pick .pp-row.on { background: var(--brand-soft, #eef4ff); }
.prod-pick .pp-img { width: 84px; height: 84px; flex: none; border-radius: 6px; background: var(--line-2); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; color: var(--muted); text-align: center; }
.prod-pick .pp-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-pick .pp-name { font-weight: 700; margin: 2px 0 4px; }
.prod-pick .pp-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 10px; font-size: 13px; }
.prod-pick .pp-grid span { color: var(--muted); }
.prod-pick .pp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .prod-pick .pp-grid { grid-template-columns: auto 1fr; } .prod-pick .pp-img { width: 56px; height: 56px; } }
/* Thẻ kho */
.tk-prod { min-width: 320px; }
.tk-head { display: grid; gap: 4px; }
.tk-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; }
.tk-tbl .tk-open td, .tk-tbl tfoot td { background: var(--line-2); }
.tk-tbl tbody tr:not(.tk-open) td:nth-child(4), .tk-tbl thead th:nth-child(4) { min-width: 280px; }

/* Sức khỏe kho */
.hl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.hl-dot.bad { background: var(--bad); }
.hl-tbl td:first-child { width: 18px; padding-right: 0; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card, #fff); font-size: 13px; color: var(--ink); }
.hl-chip:hover { text-decoration: none; border-color: #b9c7e6; }
.hl-chip.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.hl-chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.hl-chip.ok { color: var(--ok); }
.hl-sec.is-ok .card-head h2 { color: var(--ink-3); }
.hl-sec { scroll-margin-top: 70px; }
.nm-tbl input { width: 110px; }

/* Mã vạch: ô quét, camera, tem */
.scan-box { display: flex; align-items: center; gap: 8px; max-width: 560px; border: 2px dashed var(--brand); border-radius: 10px; padding: 4px 6px 4px 10px; background: var(--brand-soft); }
.scan-box input { flex: 1; border: 0; background: transparent; font-size: 15px; padding: 6px 0; outline: none; min-width: 0; }
.scan-ico { font-size: 18px; color: var(--brand); }
.cam-video { width: 100%; max-height: 60vh; background: #000; border-radius: 8px; }
tr.flash > td { background: #fff7c2 !important; transition: background .3s; }
.pick-card { border-top: 1px solid var(--line); }
.lc-scan { display: flex; flex-direction: column; gap: 6px; }
.sp-box { font-size: 16px; text-align: center; }
body.lbl-print { background: #fff; color: #000; margin: 0; font-family: Arial, Helvetica, sans-serif; }
.lbl-grid { display: grid; }
.lbl { box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; break-inside: avoid; padding: 1.5mm 3mm; }
.lbl .bc-svg { width: 100%; height: 11mm; }
.lbl-name { font-size: 7.5pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.lbl-code { font: 600 8pt "Courier New", monospace; letter-spacing: .5px; }
.lbl-price { font-weight: 700; font-size: 10pt; }
.lbl-bin { font-size: 7pt; }
.lbl-bin-big { font: 700 18pt Arial, sans-serif; letter-spacing: 1px; }
.lbl-sub { font-size: 7pt; }
.lbl-loc .bc-svg { height: 13mm; }
@page lbla4 { size: A4; margin: 0; }
body.lbl-a4 { page: lbla4; }
body.lbl-a4 .lbl-grid { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; }
@page lblr50 { size: 50mm 30mm; margin: 0; }
body.lbl-roll50 { page: lblr50; }
body.lbl-roll50 .lbl { width: 50mm; height: 30mm; break-after: page; }
body.lbl-roll50 .lbl .bc-svg { height: 10mm; }
@page lblr40 { size: 40mm 25mm; margin: 0; }
body.lbl-roll40 { page: lblr40; }
body.lbl-roll40 .lbl { width: 40mm; height: 25mm; break-after: page; padding: 1mm 2mm; }
body.lbl-roll40 .lbl .bc-svg { height: 8mm; }
body.lbl-roll40 .lbl-name { font-size: 6.5pt; }
@media screen { body.lbl-print .lbl { outline: 1px dashed #bbb; } }

/* Lô / serial / giữ hàng / dự báo */
.trk-list { display: flex; flex-direction: column; gap: 14px; }
.trk-line { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.trk-h { margin-bottom: 6px; }
.trk-lots input { width: 100%; min-width: 90px; }
.trk-ser, .pk-ser { width: 100%; font-size: 13px; margin-top: 4px; }
input.rs-days { width: 64px; }
.sr-item { border-bottom: 1px solid var(--line); }
.fc-bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.fc-bar { width: 6px; background: var(--brand); opacity: .7; border-radius: 1px; height: 1px; }
.fc-bar.pk { background: var(--warn); opacity: 1; }
.fc-bar[data-h="0"] { height: 1px; }
.fc-bar[data-h="1"] { height: 2.8px; }
.fc-bar[data-h="2"] { height: 5.6px; }
.fc-bar[data-h="3"] { height: 8.399999999999999px; }
.fc-bar[data-h="4"] { height: 11.2px; }
.fc-bar[data-h="5"] { height: 14px; }
.fc-bar[data-h="6"] { height: 16.799999999999997px; }
.fc-bar[data-h="7"] { height: 19.599999999999998px; }
.fc-bar[data-h="8"] { height: 22.4px; }
.fc-bar[data-h="9"] { height: 25.2px; }
.fc-bar[data-h="10"] { height: 28px; }

.src-stockout { --src: #9333ea; } .src-stockin { --src: #059669; } .src-transfer { --src: #0891b2; } .src-count { --src: #a16207; } .src-hold { --src: #db2777; } .src-lot { --src: #dc2626; }

body.hl-print .btn, body.hl-print .hide-m.btn { display: none; }
body.hl-print h3 { margin: 12px 0 4px; font-size: 13px; }
body.hl-print .tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
body.hl-print .tbl th, body.hl-print .tbl td { border: 1px solid #999; padding: 3px 5px; text-align: left; }
.src-countdue { --src: #7c2d12; }
.src-stockdoc { --src: #4d7c0f; }
.src-stockclose { --src: #1d4ed8; }
.src-perfkho { --src: #7c3aed; }
/* Kế toán */
.src-finvoucher { --src: #0f766e; } .src-hdnt { --src: #b45309; } .src-hdntexp { --src: #92400e; } .src-orderdoc { --src: #0369a1; }
.src-loan { --src: #be123c; } .src-finclose { --src: #4338ca; } .src-taxdue { --src: #b45309; } .src-misadraft { --src: #0f766e; }

/* Giấy đề nghị thanh toán (in ký tên) */
body.stock-print .dn-page { font-family: "Times New Roman", Times, serif; font-size: 15px; line-height: 1.55; }
.dn-top { display: flex; justify-content: space-between; gap: 12mm; align-items: flex-start; }
.dn-unit { flex: 1; }
.dn-form { width: 70mm; text-align: center; font-size: 13px; }
.dn-title { text-align: center; font-weight: 700; font-size: 18px; margin-top: 8mm; }
.dn-date { text-align: center; font-style: italic; }
.dn-no { text-align: center; font-size: 13px; margin-bottom: 4mm; }
.dn-line { margin: 1.5mm 0; overflow-wrap: anywhere; }
.dn-words { margin-left: 6mm; }
.dn-doc { margin-left: 6mm; font-style: italic; }
.dn-fill { display: inline-block; min-width: 90mm; border-bottom: 1px dotted #000; height: 1em; vertical-align: baseline; }
.dn-sign { margin-top: 8mm; min-height: 38mm; }
.dn-sign1 { grid-template-columns: 1fr; }
.dn-sign2 { grid-template-columns: repeat(2, 1fr); }
.dn-sign3 { grid-template-columns: repeat(3, 1fr); }
.dn-sign4 { grid-template-columns: repeat(4, 1fr); }
.dn-sname { margin-top: 22mm; }
.dn-foot { margin-top: 6mm; font-size: 12px; text-align: center; }
.dn-form .sp-lien { margin-top: 2mm; }

/* Cài đặt kế toán chia thẻ */
[data-ftab].is-hidden { display: none !important; }

/* Đầu trang mẫu in kế toán (logo + công ty | mẫu số) và phiếu thu / chi */
.pv-head { display: flex; justify-content: space-between; gap: 8mm; align-items: flex-start; }
.pv-co { display: flex; gap: 4mm; align-items: flex-start; flex: 1; font-size: 13px; line-height: 1.45; }
.pv-logo { max-width: 38mm; max-height: 22mm; object-fit: contain; }
.pv-name { font-weight: 700; font-size: 15px; text-transform: uppercase; }
.pv-form { width: 66mm; text-align: center; font-size: 13px; line-height: 1.45; }
.pv-state { text-align: center; font-weight: 700; margin: 2mm 0; }
.pv-state.bad { color: #b91c1c; }
.dn-fill.dn-fill-s { min-width: 25mm; }
.pv-logo-edit { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pv-logo-prev { max-height: 56px; max-width: 160px; object-fit: contain; border: 1px solid var(--line, #ddd); border-radius: 6px; padding: 4px; background: #fff; }
.is-hidden-input { display: none; }
.dn-sign5 { grid-template-columns: repeat(5, 1fr); }
.dn-sign5 > div b { font-size: 13px; }

/* Mẫu in kế toán khổ A4 dọc */
body.stock-print.fp-a4p { page: a4p; }

/* Mẫu in kế toán khổ A5 ngang (phiếu thu / chi): 194 × 134 mm vùng in, thu gọn chữ và khoảng cách */
body.stock-print.fp-a5l { page: a5l; }
body.stock-print.fp-a5l .sp-page { max-width: 194mm; padding: 4mm 3mm; }
body.stock-print.fp-a5l .dn-page { font-size: 12.5px; line-height: 1.35; }
body.stock-print.fp-a5l .pv-co, body.stock-print.fp-a5l .pv-form { font-size: 11px; line-height: 1.3; }
body.stock-print.fp-a5l .pv-name { font-size: 13px; }
body.stock-print.fp-a5l .pv-logo { max-width: 28mm; max-height: 15mm; }
body.stock-print.fp-a5l .pv-form { width: 58mm; }
body.stock-print.fp-a5l .dn-title { font-size: 16px; margin-top: 3mm; }
body.stock-print.fp-a5l .dn-line { margin: .6mm 0; }
body.stock-print.fp-a5l .dn-fill { min-width: 70mm; }
body.stock-print.fp-a5l .dn-fill.dn-fill-s { min-width: 20mm; }
body.stock-print.fp-a5l .dn-sign { margin-top: 3mm; min-height: 24mm; }
body.stock-print.fp-a5l .dn-sign b { font-size: 12px; }
body.stock-print.fp-a5l .dn-sname { margin-top: 14mm; }
@media print { body.stock-print.fp-a5l .sp-page { padding: 0; } }

/* Cài đặt kế toán > Mẫu in: danh sách, bảng sửa ẩn đến khi bấm Sửa */
[data-pcard].is-hidden, [data-dcard].is-hidden { display: none !important; }
.pv-logo-mini { height: 22px; max-width: 60px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.tbl tr.row-active td { background: var(--hover, #eef2ff); }

/* Phiếu thu / chi: khung quy trình */
.vf-flow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.vf-step { padding: 6px 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; min-width: 110px; }
.vf-step.ok { border-color: #16a34a55; background: #16a34a10; }
.vf-step.cur { border-color: #2563eb; background: #2563eb12; }
.vf-arrow { color: #888; }

/* Danh sách phiếu thu / chi: chữ đậm, đậm màu hơn cho dễ đọc */
.fv-list td { font-weight: 500; color: var(--ink); font-size: 13.5px; }
.fv-list td.small { font-size: 13.5px; }
.fv-list th { color: var(--ink-2); font-weight: 700; }

/* Dò sao kê ngân hàng */
.bk-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.bk-chip { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 99px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.bk-chip b { margin-left: 4px; }
.bk-chip.bad b { color: var(--bad); }
.bk-chip.warn b { color: var(--warn); }
.bk-chip.ok b { color: var(--ok); }
.bk-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.bk-tbl .bk-desc { min-width: 220px; max-width: 420px; word-break: break-word; font-size: 13px; }
.bk-vs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.bk-v { font-size: 12.5px; white-space: nowrap; }
.bk-txn { padding: 10px 12px; border-radius: 8px; background: var(--line-2); margin-bottom: 10px; display: grid; gap: 4px; }
.bp-list { max-height: 52vh; overflow: auto; margin-top: 8px; border: 1px solid var(--line-2); border-radius: 8px; }
.bp-list tr.sel td { background: var(--brand-soft); }
.bp-total { margin-right: auto; font-size: 13px; }
.bk-clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Tích chọn số HĐ VAT khi thu tiền */
.inv-picks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.inv-pick { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: normal; }
.bk-vat { white-space: nowrap; }

/* Chứng từ: Biên bản bàn giao / Phiếu xuất kho (mẫu như CRM cũ) */
.hv-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.hv-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 600; font-size: 13px; text-decoration: none; }
.hv-tab.active { background: var(--brand-50, #e6f4f1); border-color: transparent; color: var(--ink); }
.hv-items textarea { width: 100%; min-width: 260px; resize: vertical; }
.hv-items input.num { width: 110px; text-align: right; }
.hv-items .hv-unit { width: 70px; }
.hv-items .hv-note { width: 130px; }
.hv-items .hv-stt { text-align: center; color: var(--ink-3); }
body.stock-print .hv-print { font-family: "Times New Roman", serif; font-size: 13px; line-height: 1.35; color: #111; }
.hv-print .hv-co { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.hv-print .hv-co .sp-lien { position: absolute; right: 0; top: 0; font-size: 11px; }
.hv-print .hv-title { font-size: 19px; line-height: 1.2; margin: 14px 0 6px; text-align: center; }
.hv-print p { margin: 4px 0; }
.hv-print .hv-c { text-align: center; }
.hv-print .hv-r { text-align: right; }
.hv-print .hv-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hv-print .hv-tbl th, .hv-print .hv-tbl td { border: 1px solid #111; padding: 5px 6px; font-size: 12.5px; vertical-align: middle; }
.hv-print .hv-tbl th { text-align: center; }
.hv-print .hv-tbl td.c { text-align: center; }
.hv-print .hv-tbl td.r { text-align: right; white-space: nowrap; }
.hv-print .hv-sign { display: flex; justify-content: space-around; text-align: center; margin-top: 30px; min-height: 90px; }
.hv-buyer { min-width: 240px; }
.hv-manual { padding: 10px 14px; border-top: 1px solid var(--line-2); }
.hv-seller summary { cursor: pointer; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.dl-lookup { display: flex; gap: 8px; }
.dl-lookup input { flex: 1; }

/* Hợp đồng nguyên tắc (Kế toán -> Chứng từ): bản in theo mẫu CRM / file 001-ATP/HDNT/2025 */
body.stock-print .hd-print { font-family: "Times New Roman", Times, serif; font-size: 13.5px; line-height: 1.4; color: #111; }
.hd-print p { margin: 4px 0; text-align: justify; }
.hd-print .hd-c { text-align: center; margin: 0; }
.hd-print .hd-b { font-weight: 700; }
.hd-print .hd-title { font-size: 20px; font-weight: 700; text-align: center; margin: 16px 0 0; }
.hd-print .hd-sub { font-size: 16px; font-weight: 700; text-align: center; margin: 0; }
.hd-print .hd-no { text-align: center; margin: 2px 0 10px; }
.hd-print .hd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 3px 0; }
.hd-print .hd-art { font-weight: 700; margin-top: 8px; }
.hd-print .hd-sign { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 28px; break-inside: avoid; }
.hd-print .hd-sign .hd-sname { margin-top: 90px; font-weight: 700; min-height: 1em; }
.hd-rows td { vertical-align: top; }
.hd-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.hd-flag { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.hd-flag input[type="date"], .hd-flag input[type="text"] { max-width: 260px; }
.hd-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hd-filter input[type="search"] { flex: 1; min-width: 200px; }

/* Hợp đồng nguyên tắc: việc tiếp theo trong cột Trạng thái; ghi chú hẹn nhắc */
.hd-follow { margin-top: 4px; max-width: 220px; white-space: normal; }
.hd-fnote { width: 100%; margin-top: 6px; }

/* Đơn đặt hàng (Kế toán -> Chứng từ): khách bên trái, ngày / số / loại tiền bên phải; tên in dưới chữ ký */
.hv-print .hv-two { display: flex; justify-content: space-between; gap: 16px; margin: 6px 0; }
.hv-print .hv-two .hv-meta { white-space: nowrap; min-width: 150px; }
.hv-print .hv-sname { margin-top: 64px; font-weight: 700; }

/* Hợp đồng kinh tế: bảng hàng trong bản in hợp đồng */
.hd-print .hv-tbl { margin: 6px 0; }
.hv-seller.full { grid-column: 1 / -1; }

/* Quản lý giá vốn */
.fc-period { flex-wrap: wrap; gap: 8px; }
.fc-period label { display: flex; align-items: center; gap: 6px; }
.fc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.fc-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fc-kpi .k { font-size: 12px; color: var(--muted); }
.fc-kpi .v { font-size: 18px; font-weight: 700; margin: 2px 0; }
.fc-tbl th.c { text-align: center; }
.fc-tbl td, .fc-tbl th { white-space: nowrap; }
.fc-tbl td:first-child { white-space: normal; min-width: 220px; }
.fc-total td { background: var(--soft, rgba(127,127,127,.08)); }
.fc-loss td { background: rgba(220, 38, 38, .06); }
.fc-missrow td { background: rgba(234, 179, 8, .10); }
.fc-ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Báo cáo kế toán */
.fr-h { font-size: 15px; margin: 14px 0 6px; }
.fr-tbl td.num, .fr-tbl th.num { white-space: nowrap; }
.fr-tbl .fr-sticky { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; min-width: 240px; }
.fr-tbl tr.fr-total td { border-top: 2px solid var(--line); background: var(--soft, rgba(0,0,0,.03)); }
.fr-tbl tr.fr-sub td { border-top: 1px solid var(--line); }
.fr-tbl tr.fr-sec td { background: var(--soft, rgba(0,0,0,.04)); font-size: 12px; letter-spacing: .02em; }
.fr-tbl tr.fr-spike td { background: rgba(220, 38, 38, .06); }
.fr-ind { padding-left: 22px !important; }
.fr-tg { padding: 0 6px; min-width: 0; }
.fr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.fr-cols .fr-tbl td:first-child { min-width: 220px; }
.fr-bars { min-width: 160px; }
.fr-bar { height: 6px; border-radius: 3px; margin: 2px 0; width: 0; }
.fr-bar.in { background: var(--ok); }
.fr-bar.out { background: var(--bad); }
#fr-body, #fc-body { padding: 4px 14px 14px; } /* nội dung báo cáo có lề như thanh chọn kỳ, không dính mép khung */
.fr-pad { padding: 4px 14px 14px; }
.stats.compact .stat .v { font-size: 20px; white-space: nowrap; }

/* Tiêu đề nhóm nhỏ trong một phòng (vd. Kế toán: Thu chi & quỹ / Công nợ & vay / …). */
.nav-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6f7b93; padding: 10px 10px 3px 12px; opacity: .8; }
.compact .rg-fly .nav-sub { color: var(--ink-3); border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 8px; }

/* Ô chọn tháng (Từ tháng / Đến tháng…): cùng kiểu ô nhập chung, chữ thường (trình duyệt mặc định dùng chữ đơn cách, viền xám thô). */
.toolbar input[type=month], label.field input[type=month] {
  height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ink); width: auto; min-width: 200px; cursor: pointer;
}
label.field input[type=month] { width: 100%; }
.toolbar input[type=month]:hover { border-color: var(--ink-3); }
.toolbar input[type=month]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.toolbar input[type=month]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.toolbar > label:has(> input[type=month]) { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 550; }
@media (max-width: 860px) { .toolbar input[type=month] { flex: 1 1 140px; min-width: 0; } }

/* API & Webhook: mẫu lệnh / khóa dài */
pre.code { background: var(--line-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow-x: auto; white-space: pre; margin: 8px 0; }
code.break, .break { overflow-wrap: anywhere; word-break: break-all; }
/* Ô tích nằm cùng dòng với chữ khi đặt trong lưới biểu mẫu (vd "Bật tự lấy hóa đơn từ hộp thư", "Đang bật" webhook) */
label.field.check-inline { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 38px; }
label.field.check-inline input[type=checkbox] { width: auto; margin: 0; }

/* Tích hợp: kết nối có sẵn chia nhóm */
.ig-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
.ig-cats { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ig-cats a { padding: 12px 14px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); font-weight: 600; }
.ig-cats a:last-child { border-bottom: 0; }
.ig-cats a:hover { text-decoration: none; background: var(--line-2); color: var(--ink); }
.ig-cats a.active { color: var(--brand); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ig-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.ig-logo { height: 48px; display: flex; align-items: center; font-size: 30px; }
.ig-omi { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 10px; background: #0a8f5a; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 1px; }
.ig-name { font-weight: 700; }
.ig-sub { flex: 1; }
.ig-st:empty { display: none; }
.ig-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ig-wrap { grid-template-columns: 1fr; }
  .ig-cats { flex-direction: row; overflow-x: auto; }
  .ig-cats a { border-bottom: 0; white-space: nowrap; }
}
/* Tổng đài: nút gọi cạnh SĐT + báo khách gọi đến */
.call-btn { margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 99px; background: var(--ok-soft); cursor: pointer; font-size: 13px; line-height: 20px; }
.call-btn:hover { border-color: var(--ok); }
.call-btn:disabled { opacity: .5; cursor: wait; }
.call-live { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.call-live-item { background: var(--panel); border: 1px solid var(--ok); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-lg); display: grid; gap: 4px; }
.call-live-item.new { animation: call-ring 1s ease-in-out 3; }
@keyframes call-ring { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .call-live-item.new { animation: none; } }
audio { max-width: 260px; height: 34px; }
/* Zalo OA: hộp thư hội thoại */
.ig-zalo { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 10px; background: #0068ff; color: #fff; font-weight: 800; font-size: 18px; }
.zl-wrap { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; align-items: start; }
.zl-list { padding: 0; overflow: hidden; }
.zl-tools { padding: 10px; border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; }
.zl-tools input { width: 100%; }
.zl-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.zl-filters a { padding: 4px 10px; border-radius: 99px; font-size: 13px; color: var(--ink-2); background: var(--line-2); }
.zl-filters a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.zl-filters a:hover { text-decoration: none; }
#zl-items { max-height: calc(100vh - 260px); overflow-y: auto; }
.zl-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; color: inherit; }
a.zl-item:hover { text-decoration: none; }
.zl-item:hover { background: var(--line-2); }
.zl-item.active { background: var(--brand-soft); }
.zl-item.unread .zl-n, .zl-item.unread .zl-s { font-weight: 700; color: var(--ink); }
.zl-av { width: 40px; height: 40px; border-radius: 50%; background: #0068ff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex: none; }
.zl-av img { width: 100%; height: 100%; object-fit: cover; }
.zl-it { display: grid; min-width: 0; gap: 2px; }
.zl-n, .zl-s, .zl-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-s { color: var(--ink-2); font-size: 13px; }
.zl-c { font-size: 12px; color: var(--ink-3); }
.zl-thread { padding: 0; display: flex; flex-direction: column; min-height: 420px; max-height: calc(100vh - 170px); }
.zl-thread > .empty { margin: auto; }
.zl-head { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.zl-hn { flex: 1; min-width: 180px; }
.zl-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.zl-msg { display: flex; flex-direction: column; max-width: 75%; }
.zl-msg.in { align-self: flex-start; }
.zl-msg.out { align-self: flex-end; align-items: flex-end; }
.zl-bub { padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); word-break: break-word; }
.zl-msg.out .zl-bub { background: #e5efff; border-color: #c7dcff; color: #0b2a5b; }
.zl-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.zl-img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; margin-top: 4px; }
.zl-att { margin-top: 4px; }
.zl-send { border-top: 1px solid var(--line-2); padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.zl-send .notice { grid-column: 1 / -1; margin: 0; }
.zl-send textarea { width: 100%; resize: vertical; min-height: 44px; }
@media (max-width: 760px) {
  .zl-wrap { grid-template-columns: 1fr; }
  #zl-items { max-height: 40vh; }
  .zl-msg { max-width: 90%; }
}
.zl-wrap > .card { margin: 0; }

/* Chat nội bộ */
.ch-wrap { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 14px; align-items: start; }
.ch-wrap > .card { margin: 0; }
.ch-side { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.ch-side-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-2); gap: 8px; }
.ch-side > input { margin: 8px 10px; width: calc(100% - 20px); }
#ch-rooms { overflow-y: auto; flex: 1; }
.ch-room { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; color: inherit; border-bottom: 1px solid var(--line-2); }
.ch-room:hover { background: var(--line-2); text-decoration: none; }
.ch-room.active { background: var(--brand-soft); }
.ch-room.unread .ch-rn, .ch-room.unread .ch-rl { font-weight: 700; color: var(--ink); }
.ch-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 700; flex: none; }
.ch-av.k-team { background: #0f766e; } .ch-av.k-announce { background: #b45309; } .ch-av.k-group { background: #7c3aed; } .ch-av.k-doc { background: #475569; }
.ch-rt { display: grid; min-width: 0; gap: 2px; }
.ch-rn, .ch-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rl { font-size: 13px; color: var(--ink-2); }
.ch-rm { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ch-main { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 110px); min-height: 420px; }
.ch-main > .empty { margin: auto; }
.ch-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.ch-hn { flex: 1; min-width: 0; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--bg); }
.ch-sys { align-self: center; font-size: 12px; color: var(--ink-3); margin: 6px 0; }
.ch-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; margin-top: 8px; }
.ch-msg.cont { margin-top: 2px; }
.ch-msg.mine { align-self: flex-end; align-items: flex-end; }
.ch-who { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 2px 4px; }
.ch-bub { position: relative; padding: 7px 11px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); word-break: break-word; }
.ch-msg.mine .ch-bub { background: #e5efff; border-color: #c7dcff; }
.ch-msg.bot .ch-bub { background: #fff7e6; border-color: #fde3a7; }
.ch-text { white-space: pre-wrap; }
.ch-quote { font-size: 12px; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 6px; margin-bottom: 4px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-mention { color: var(--brand); font-weight: 600; }
.ch-mention.me { background: #fff3c4; border-radius: 4px; padding: 0 2px; }
.ch-code { font-family: var(--mono, monospace); font-weight: 600; }
.ch-card { margin-top: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; }
.ch-img { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; margin-top: 4px; }
.ch-file { display: block; margin-top: 4px; }
.ch-pin { position: absolute; top: -8px; right: -6px; font-size: 12px; }
.ch-reacts { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.ch-react { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 0 7px; font-size: 12px; cursor: pointer; }
.ch-react.mine { border-color: var(--brand); background: var(--brand-soft); }
.ch-tools { display: none; gap: 2px; position: absolute; top: -14px; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1px 3px; box-shadow: var(--shadow); z-index: 2; }
.ch-msg:not(.mine) .ch-tools { right: auto; left: 40%; }
.ch-msg:hover .ch-tools, .ch-tools:focus-within { display: flex; }
.ch-tools button, .ch-emo button { border: 0; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.ch-emo { display: inline-flex; border-left: 1px solid var(--line); margin-left: 2px; }
.ch-ack { margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.ch-seen { margin-top: 2px; }
.ch-compose { border-top: 1px solid var(--line-2); padding: 8px 10px; position: relative; }
.ch-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: end; }
.ch-row textarea { width: 100%; resize: none; min-height: 40px; max-height: 160px; }
.ch-attach { cursor: pointer; }
.ch-replybar { font-size: 13px; background: var(--line-2); border-radius: 8px; padding: 5px 9px; margin-bottom: 6px; }
.ch-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ch-fchip { font-size: 12px; background: var(--line-2); border-radius: 99px; padding: 2px 8px; }
.ch-at { position: absolute; bottom: 100%; left: 50px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; min-width: 200px; z-index: 5; }
.ch-at button { border: 0; background: none; text-align: left; padding: 7px 10px; cursor: pointer; }
.ch-at button:hover, .ch-at button:first-child { background: var(--brand-soft); }
.ch-pinitem { border-bottom: 1px solid var(--line-2); padding: 8px 0; }
.ch-memlist > div { padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.pp-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; display: grid; }
.pp-item { display: block; text-align: left; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line-2); background: none; cursor: pointer; color: inherit; }
.pp-item:hover { background: var(--line-2); }
.linklike { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 0; }
.dg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dg-tile { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-align: center; }
.dg-tile b { font-size: 24px; color: var(--brand); }
.dg-tile:hover { text-decoration: none; background: var(--line-2); }
.dg-list { display: grid; gap: 6px; }
.dg-item { display: block; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; color: inherit; }
.dg-item.warn { border-left-color: var(--warn); } .dg-item.danger { border-left-color: var(--bad); }
.dg-item:hover { text-decoration: none; background: var(--line-2); }
@media (max-width: 760px) {
  .ch-wrap { grid-template-columns: 1fr; }
  .ch-side { max-height: 38vh; }
  .ch-main { height: 70vh; }
  .ch-msg { max-width: 92%; }
  .dg-grid { grid-template-columns: 1fr; }
}

.ch-sendbox { display: inline-flex; gap: 4px; align-items: end; }
.ch-fwrap { display: grid; gap: 2px; justify-items: start; }
.ch-cardact { display: flex; gap: 6px; margin-top: 6px; }
.ch-remopts { display: grid; gap: 8px; }

.ch-back { display: none; }
.ch-msg.tools-on .ch-tools { display: flex; }
@media (max-width: 760px) {
  .ch-wrap.has-room .ch-side { display: none; }
  .ch-wrap.has-room .ch-back { display: inline-flex; }
  .ch-main { height: calc(100vh - 120px); height: calc(100dvh - 120px); }
  .ch-wrap:not(.has-room) .ch-main { display: none; }
  .ch-wrap:not(.has-room) .ch-side { max-height: none; }
}
/* Giám sát chat (chỉ đọc) */
.ch-mon-f { display: grid; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
#mon-rooms { overflow-y: auto; flex: 1; }
.ch-mon-f select, .ch-mon-f input { width: 100%; }
.ch-mon-bar { padding: 8px 12px; background: #fff7e6; border-bottom: 1px solid #fde3a7; font-size: 12.5px; color: #8a5a00; }
.ch-mon-bar details { margin-top: 4px; color: var(--ink-2); }
.ch-recalled { color: #b45309; margin-bottom: 2px; }
.ch-msg.ch-hit .ch-bub { outline: 2px solid #f59e0b; }
.ch-mon-link { display: block; margin: -2px 12px 8px; }
.ch-room.res { grid-template-columns: 1fr auto; }
/* Tổng quan kế toán: thẻ màu + biểu đồ */
.fo-tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.fo-tiles.fo-3 { --cols: 3; }
/* Màu theo tông: --c đậm, --c2 đậm hơn (nền tầng 1), --soft nền nhạt (tầng 2) */
.fo-tile.t-blue { --c: #2f5fb3; --c2: #1f3f7a; --soft: #eaf1fb; }
.fo-tile.t-green { --c: #2e8b57; --c2: #1d6340; --soft: #e7f5ec; }
.fo-tile.t-red { --c: #c0453f; --c2: #8f2d29; --soft: #fcebea; }
.fo-tile.t-amber { --c: #c27c1a; --c2: #8f5a12; --soft: #fdf3e2; }
.fo-tile.t-violet { --c: #6f52b5; --c2: #4c3787; --soft: #f0ecfa; }
.fo-tile.t-teal { --c: #23857d; --c2: #175f59; --soft: #e5f4f2; }
.fo-tile.t-slate { --c: #5b6b82; --c2: #3d4a5c; --soft: #eef1f5; }
/* Tầng 1: nền đậm trầm, chữ trắng */
.fo-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 14px; border-radius: 14px; color: #fff; text-decoration: none; overflow: hidden;
  background: linear-gradient(135deg, var(--c2), var(--c)); box-shadow: 0 4px 12px rgba(16, 24, 40, .10); transition: transform .12s, box-shadow .12s; }
a.fo-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .16); text-decoration: none; color: #fff; }
.fo-tile::after { content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.fo-tile .fo-ico { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.fo-tile .fo-k { font-size: 12.5px; opacity: .92; font-weight: 600; }
.fo-tile .fo-v { font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.fo-tile .fo-s { font-size: 12px; opacity: .9; }
.fo-tile.warn { outline: 3px solid #f4c430; outline-offset: -3px; }
/* Tầng 2: nền nhạt, số theo màu tông */
.fo-tiles.soft .fo-tile { background: var(--soft); color: var(--ink); box-shadow: none; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.fo-tiles.soft .fo-tile::after { background: color-mix(in srgb, var(--c) 10%, transparent); }
.fo-tiles.soft .fo-tile .fo-v, .fo-tiles.soft .fo-tile .fo-k { color: var(--c2); }
.fo-tiles.soft a.fo-tile:hover { color: var(--ink); }
/* Tầng 3: nền trắng, viền màu phía trên */
.fo-tiles.line .fo-tile { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border-top: 4px solid var(--c); }
.fo-tiles.line .fo-tile::after { display: none; }
.fo-tiles.line .fo-tile .fo-v { color: var(--c2); }
.fo-tiles.line .fo-tile .fo-k { color: var(--ink-2); }
.fo-tiles.line .fo-tile .fo-s { color: var(--ink-3); opacity: 1; }
.fo-tiles.line a.fo-tile:hover { color: var(--ink); }
.fo-tiles.soft .fo-tile.warn, .fo-tiles.line .fo-tile.warn { outline: 2px solid #dc2626; outline-offset: -2px; }
.fo-sec { margin: 4px 0 10px; font-size: 15px; color: var(--ink-2); }
.fo-chart { width: 100%; height: auto; display: block; padding: 10px 14px 0; box-sizing: border-box; }
.fo-chart .fo-ax { font-size: 11px; fill: var(--ink-3); }
.fo-chart .fo-lb { font-size: 10px; fill: var(--ink-2); font-weight: 600; }
.fo-chart .fo-grid { stroke: var(--line-2); }
.fo-chart .fo-base { stroke: var(--line); }
.fo-legend { display: flex; gap: 16px; justify-content: center; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.fo-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fo-legend .lg-in { background: #16a34a; } .fo-legend .lg-out { background: #ef4444; }
.fo-hbars { display: grid; gap: 12px; padding: 12px 18px 16px; }
.fo-hb-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.fo-hb-track { height: 10px; background: var(--line-2); border-radius: 6px; overflow: hidden; }
.fo-hb-fill { height: 100%; border-radius: 6px; width: 0; transition: width .5s ease; }
@media (max-width: 760px) {
  .fo-tiles, .fo-tiles.fo-3 { --cols: 2 !important; gap: 10px; }
  .fo-tile { padding: 12px 12px 10px; }
  .fo-tiles.fo-3 > :last-child { grid-column: span 2; }
  .fo-tile .fo-v { font-size: 18px; }
  .fo-tile .fo-ico { font-size: 18px; }
}
/* Đề xuất thăng tiến: không có ảnh đại diện -> khuôn riêng (tên rộng, không đè chữ) */
.cp-row.cp-promo { grid-template-columns: minmax(240px, 1.3fr) minmax(200px, 2fr) auto; }
.cp-row.cp-promo .pf-who, .cp-row.cp-promo .pf-who > * { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.cp-row.cp-promo .pf-who > span { display: block; line-height: 1.45; margin-top: 2px; }
.cp-row.cp-promo .cp-act { grid-column: auto; }
@media (max-width: 900px) { .cp-row.cp-promo { grid-template-columns: 1fr; } .cp-row.cp-promo .cp-meter { width: 100%; } }
/* Mã chứng từ trong trao đổi / lịch sử -> link */
.code-link { font-weight: 600; white-space: nowrap; }

/* Hiệu suất Kế toán: soát hóa đơn bán ra */
.pf-inv { margin-top: 16px; }
.pf-inv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pf-inv-kpis > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--line-2); font-size: 12px; color: var(--ink-2); }
.pf-inv-kpis > span b { font-size: 20px; color: var(--ink); }
.pf-inv-kpis > span.bad { background: var(--bad-soft); } .pf-inv-kpis > span.bad b { color: var(--bad); }
.pf-inv-kpis > span.ok { background: var(--ok-soft); } .pf-inv-kpis > span.ok b { color: var(--ok); }
.pf-inv-h { margin: 14px 0 6px; font-size: 14px; }
.pf-inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Kế toán: Tồn kho MISA */
.ms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ms-kpi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ms-kpi > span { font-size: 20px; } .ms-kpi > b { font-size: 22px; color: var(--ink); min-width: 28px; }
.ms-kpi.warn { background: var(--warn-soft); } .ms-kpi.warn > b { color: var(--warn); }
.ms-kpi.bad { background: var(--bad-soft); } .ms-kpi.bad > b { color: var(--bad); }
.ms-tbl th { font-size: 12px; }
.ms-tbl td { vertical-align: top; }
.ms-diff { background: var(--warn-soft); }
.ms-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ms-sum > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--line-2); font-size: 12px; color: var(--ink-2); }
.ms-sum > span b { font-size: 18px; color: var(--ink); } .ms-sum > span small { color: var(--ink-3, var(--ink-2)); }
.ms-sum > span.strong { background: var(--ok-soft); } .ms-sum > span.bad { background: var(--bad-soft); } .ms-sum > span.bad b { color: var(--bad); }
.ms-h { margin: 16px 0 8px; font-size: 14px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ms-steps { margin: 0 0 12px 18px; padding: 0; }
.ms-ivhead { padding: 10px 12px; border-radius: 10px; background: var(--line-2); margin: 10px 0; line-height: 1.6; }
.ms-lines td { vertical-align: top; }
.ms-lines textarea { width: 100%; min-width: 220px; font-size: 12px; }
.ms-lines .ln-unit { width: 64px; } .ms-lines .ln-qty { width: 80px; text-align: right; }
.ms-lines .ln-item { width: 100%; min-width: 240px; }
.ms-lines .ln-item.ms-missing { border-color: var(--bad); background: var(--bad-soft); }
/* Tồn kho MISA: hộp thoại hóa đơn / mã rộng hơn; ô lưới trong thân hộp thoại không đẩy tràn ngang */
.modal.wide:has(#iv-lines), .modal.wide:has(.ms-sum) { max-width: min(1180px, 96vw); }
.modal-body:has(#iv-lines) > *, .modal-body:has(.ms-sum) > * { min-width: 0; }
#iv-review { display: grid; gap: 10px; min-width: 0; }
#iv-review select, .modal-body:has(#iv-lines) .form-grid select { width: 100%; max-width: 100%; }
.ms-lines textarea { min-width: 0; width: 100%; }
.ms-lines td:nth-child(2) { width: 46%; }
.ms-lines .ln-item { min-width: 200px; }
.ms-tbl th { white-space: normal; min-width: 60px; line-height: 1.3; }
.ms-tbl td:nth-child(2) { min-width: 240px; }
.ms-tbl td:nth-child(3) { min-width: 150px; }
.ms-tbl th, .ms-tbl td { padding-left: 7px; padding-right: 7px; }
.ms-tbl td { font-size: 13px; }
.ms-tbl td:nth-child(2) { min-width: 200px; }
.ms-tbl td:nth-child(3) { min-width: 120px; }
#mp-add { min-width: 380px; }
.ms-tbl th.num { width: 66px; min-width: 0; }
table.tbl.ms-tbl th.num { white-space: normal; }

.ms-tbl td:nth-child(2), .ms-tbl td:nth-child(3) { min-width: 0; }
.ms-tbl td:nth-child(3) { min-width: 200px; }
.ms-tbl td:nth-child(4) { min-width: 120px; }
.ms-hist { margin-top: 14px; padding: 4px 12px 10px; }

/* Ô chọn nhiều nhân sự gọn (peoplePick.js) */
.pp { position: relative; max-width: 560px; }
.pp-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pp-trigger:hover { border-color: var(--brand); }
.pp-val { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pp-tag { background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pp-more { color: var(--ink-2); font-size: 13px; font-weight: 600; padding: 2px 4px; }
.pp-caret { color: var(--ink-3); font-size: 12px; }
.pp-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 35; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; }
.pp .pp-q { width: 100%; }
.pp .pp-list { max-height: 260px; overflow: auto; margin-top: 6px; display: grid; gap: 2px; }
.pp .pp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.pp .pp-item:hover { background: var(--line-2); }
.pp .pp-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pp .pp-item input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.pp .pp-none { padding: 8px 10px; }

/* Liên quan (trang khách): lưới nút mở từng danh sách */
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rel-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.rel-tile:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.rel-tile.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.rel-ic { font-size: 26px; line-height: 1; }
@media (max-width: 720px) { .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Công nợ khách + bảng thống kê công nợ */
.dbt-filter { padding: 0 16px; align-items: flex-end; }
.dbt-filter .field { margin: 0; }
.dbt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.dbt-kpi { border: 1px solid #f0dcb4; background: #fffaf0; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.dbt-kpi span { color: #555; font-size: .92em; }
.dbt-kpi b { font-size: 1.25em; }
.dbt-kpi.ok b { color: var(--ok); }
.dbt-kpi.bad { background: #fff3ea; }
.dbt-kpi.bad b { color: var(--bad); }
.txt-bad { color: var(--bad); }
.dbt-title { color: #c0262d; }
.dbt-to { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 12px 0 6px; }
.dbt-to span { display: inline-block; min-width: 70px; color: #555; }
.dbt-range { text-align: center; margin: 6px 0; }
.dbt-tbl { font-size: 11px; }
.dbt-tbl th { white-space: normal; padding: 4px 3px; }
.dbt-tbl td { padding: 4px 4px; }
.dbt-tbl td { vertical-align: middle; }
.dbt-code { color: var(--qp-accent, #1d3a8a); font-weight: 700; white-space: nowrap; }
.dbt-red { color: #c0262d; }
.dbt-tbl .dbt-sum td { background: #fff59d; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qprint.paper-A4L { max-width: 297mm; }
.qp-wrap .qprint.paper-A4L { min-width: 1100px; }
@media print { .qprint.paper-A4L { page: a4land; padding: 0; } .qp-wrap .qprint.paper-A4L { min-width: 0; } .dbt-kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 720px) { .dbt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dbt-tbl .dbt-prod { min-width: 150px; }
/* Form thêm / sửa khách: 3 cột gọn (kiểu Getfly) — cột 1 Thông tin chung · Liên hệ · Địa chỉ; cột 2 Phân loại · Người liên hệ; cột 3 Xuất HĐ · Thanh toán · Kinh doanh */
.cf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cf-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cf-col > .card { margin: 0; }
#cf .card-head { padding: 9px 14px; }
#cf .card-head h2 { font-size: 15px; }
#cf .card-head .sub { font-size: 12px; }
#cf .card-body { padding: 12px 14px; }
#cf .form-grid { gap: 10px 12px; }
#cf label.field { gap: 4px; }
#cf input[type=text], #cf input[type=email], #cf input[type=tel], #cf input[type=date], #cf input[type=number], #cf select { height: 34px; padding: 0 10px; }
#cf textarea { min-height: 56px; }
#cf .cus-contact { padding: 8px 10px; }
#cf .pp { max-width: none; }
#cf .pp-trigger { min-height: 34px; padding: 4px 10px; }
@media (max-width: 1280px) { .cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cf-cols, .cf-col:last-child { grid-template-columns: minmax(0, 1fr); } }
#cf input[type=number] { border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); width: 100%; }
#cd-rel-panels > .card, .cd-inv-con { margin-top: 16px; }
/* Trang khách: gộp Liên hệ / Địa chỉ / Thanh toán / Kinh doanh vào 1 khung, chia cột tự cân */
.cd-info { columns: 3 300px; column-gap: 32px; }
.cd-info section { break-inside: avoid; margin-bottom: 18px; }
.cd-info h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.cd-info .kv { grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; }
.audit-rel { font-weight: 600; }
/* Đơn hàng bán: ô Vận chuyển (cột phải, dưới Quy trình xử lý) */
.so-side { display: grid; gap: 16px; min-width: 0; }
.so-side > .card { margin: 0; }
.shp-card .card-body { padding: 12px 14px; display: grid; gap: 10px; }
.shp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shp-nums > div { background: var(--line-2); border-radius: 8px; padding: 6px 8px; display: grid; gap: 2px; }
.shp-nums span { color: var(--ink-3); font-size: 11px; }
.shp-nums b { font-size: 13px; }
.shp-steps { display: grid; gap: 8px; }
.shp-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; }
.shp-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.shp-step.done .shp-dot { background: var(--ok); border-color: var(--ok); }
.shp-step.wait .shp-dot { border-color: var(--warn); background: var(--warn-soft); }
.shp-step.todo .shp-dot { border-color: var(--brand); }
.shp-step.skip { opacity: .6; } .shp-step.skip .shp-dot { color: var(--ink-3); }
.shp-btns { display: flex; flex-wrap: wrap; gap: 6px; }
/* Form tạo / sửa đơn bán: 2 khung cạnh nhau (khách & giao hàng | xuất hóa đơn VAT) */
.sof-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.sof-top > .card { margin: 0; }
.sof-top + .card { margin-top: 16px; }
#sof .card-head { padding: 10px 14px; }
#sof .card-body { padding: 12px 14px; }
#sof .form-grid { gap: 10px 14px; }
#sof input[type=text], #sof input[type=search], #sof input[type=date], #sof select { height: 34px; }
.sof-inv-list .so-addr-opt span { display: grid; gap: 2px; }
.q-lines td.ql-code { min-width: 80px; max-width: 120px; color: var(--ink-2); white-space: normal; word-break: break-all; }
.q-lines td.ql-code + td { min-width: 280px; }
@media (max-width: 1000px) { .sof-top { grid-template-columns: minmax(0, 1fr); } }
/* Đơn hàng bán: ô Hóa đơn VAT */
.inv-state { padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--line-2); }
.inv-state.done { background: var(--ok-soft); }
.inv-state.wait { background: var(--warn-soft); }
.inv-state.late { background: var(--bad-soft); color: var(--bad); }
.inv-reqs { display: grid; gap: 6px; }
.inv-req { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; }
.ms-late td { background: var(--bad-soft); }
/* Tồn kho MISA: bảng gọn, nhóm cột, tên 2 dòng */
.ms-how { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.ms-how summary { cursor: pointer; color: var(--brand); font-weight: 600; width: max-content; }
.ms-how > div { margin-top: 6px; padding: 8px 12px; background: var(--line-2); border-radius: 8px; max-width: 900px; }
.ms-tbl2 { font-size: 13px; }
.ms-tbl2 thead th { font-size: 11.5px; white-space: nowrap; vertical-align: bottom; }
.ms-tbl2 thead tr:first-child th.ms-grp { text-align: center; background: var(--brand-soft); color: var(--brand); border-bottom: 2px solid var(--brand); }
.ms-tbl2 thead tr:first-child th.ms-grp.real { background: var(--line-2); color: var(--ink-2); border-bottom-color: var(--line); }
.ms-tbl2 td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
.ms-tbl2 td.num { white-space: nowrap; }
.ms-tbl2 .ms-real { background: color-mix(in srgb, var(--line-2) 55%, transparent); }
.ms-namecell { min-width: 260px; max-width: 420px; }
.ms-code { font-size: 13px; }
.ms-unit { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.ms-name { color: var(--ink-2); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-real-p { min-width: 180px; max-width: 280px; font-size: 12px; }
.ms-name1 { color: var(--ink-2); }
.ms-chip { font-size: 11px; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ms-z { color: var(--ink-3); opacity: .55; }
.ms-pill { display: inline-block; min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 999px; font-weight: 700; background: var(--line-2); color: var(--ink-2); }
.ms-pill.ok { background: var(--ok-soft); color: var(--ok); }
.ms-pill.bad { background: var(--bad-soft); color: var(--bad); }
.ms-kpi { box-shadow: var(--shadow); }
.ms-tbl2 td.ms-diff { background: var(--warn-soft); }
.inv-state.todo { background: var(--brand-soft); }
/* Chứng từ cho khách (ô Hóa đơn & chứng từ của đơn bán) */
.dr-sec { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; display: grid; gap: 8px; }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.dr-linked { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip { border: 1px solid var(--line); background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
.dr-chip:hover { border-color: var(--brand); }
.dr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dr-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.dr-opt { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.dr-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.dr-opt.dis { opacity: .6; cursor: default; }
@media (max-width: 600px) { .dr-pick { grid-template-columns: minmax(0, 1fr); } }
/* Ô Hóa đơn & chứng từ: 2 phần có tiêu đề, dòng yêu cầu gọn, nút lưới 2 cột */
#sd-inv-card .rq-body { display: grid; gap: 14px; }
.rq-sec { display: grid; gap: 8px; }
.rq-sec + .rq-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.rq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rq-head .btn { text-transform: none; letter-spacing: 0; }
.rq-to { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.rq-to .muted { font-size: 12px; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rq-grid .btn { justify-content: center; text-align: center; white-space: nowrap; }
.rq-grid .rq-wide, .rq-grid .btn:only-child { grid-column: 1 / -1; }
.rq-list { display: grid; gap: 6px; }
.rq-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 3px; font-size: 13px; }
.rq-item.pending { border-left: 3px solid #d97706; }
.rq-item.done { border-left: 3px solid #16a34a; }
.rq-item.cancelled { opacity: .65; }
.rq-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rq-top b { line-height: 1.3; }
.rq-pill { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--line); color: var(--muted); white-space: nowrap; }
.rq-pill.warn { background: var(--warn-soft); color: #b45309; }
.rq-pill.ok { background: #dcfce7; color: #15803d; }
.rq-meta { font-size: 12px; color: var(--muted); }
.rq-note { font-size: 12px; background: var(--brand-soft); border-radius: 6px; padding: 4px 8px; }
.rq-res { font-size: 12px; display: grid; gap: 2px; }
.rq-res a { margin-right: 6px; }
.rq-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rq-empty { font-size: 12px; color: var(--muted); }
/* Chi tiết đơn bán: cột trái gom sản phẩm + giữ hàng + thanh toán (không trống khi cột phải dài) */
.so-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.so-main > .card { margin: 0; }
.so-main > .card.hidden { display: none; }
/* File hóa đơn trên đơn bán: sale tải về gửi khách */
.inv-files { display: grid; gap: 6px; }
.inv-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; text-decoration: none; color: inherit; font-size: 13px; }
.inv-file:hover { border-color: var(--brand); background: var(--brand-soft); }
.inv-file.new { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.inv-file-ic { font-size: 10px; font-weight: 700; color: #fff; background: #dc2626; border-radius: 4px; padding: 3px 5px; }
.inv-file span:nth-child(2) { display: grid; min-width: 0; }
.inv-file small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-file-dl { color: var(--brand); font-weight: 600; font-size: 12px; white-space: nowrap; }
/* Đối chiếu hóa đơn MISA với đơn bán */
.iv-chk { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.iv-chk.ok { border-color: #86efac; background: #f0fdf4; }
.iv-chk.warn { border-color: #fcd34d; background: var(--warn-soft); }
.iv-chk.bad { border-color: #fca5a5; background: var(--bad-soft); }
.iv-chk ul { margin: 6px 0 0; padding-left: 4px; list-style: none; display: grid; gap: 3px; }
.iv-chk li.o { color: var(--muted); }
.iv-chk-list { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; }
/* Chuông 3 tab: mới (chấm xanh, chữ đậm) · đã xem (thường) · đã xử lý (xám, ✓) */
.bell-n.old { background: #94a3b8; }
.bell-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.bell-tab { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--ink); }
.bell-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bell-tn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #94a3b8; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.bell-tn.new { background: var(--bad); }
.bell-tab.active .bell-tn { background: #fff; color: var(--brand); }
.bell-item { position: relative; }
.bell-item.new { background: var(--brand-soft); }
.bell-item.new .bell-tx > div:first-child { font-weight: 600; }
.bell-item.seen { opacity: .9; }
.bell-item.done { opacity: .55; }
.bell-item.done .bell-ic { color: #16a34a; font-weight: 700; }
.bell-tx { flex: 1; min-width: 0; }
.bell-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-top: 6px; }
.bell-sec { margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; }
/* ===== Giao hàng ===== */
.dl-tools { flex-wrap: wrap; gap: 8px; }
.dl-tools .grow { flex: 1; }
.dl-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding: 10px; }
.dl-col { background: var(--line-2); border-radius: 10px; padding: 8px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.dl-col.focus { outline: 2px solid var(--brand); }
.dl-col-h { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.dl-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 3px; font-size: 13px; }
.dl-card.failed { border-left: 3px solid #dc2626; }
.dl-card.shipping, .dl-card.handed { border-left: 3px solid var(--brand); }
.dl-card.delivered { opacity: .8; border-left: 3px solid #16a34a; }
.dl-card-h { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.dl-card-h a { margin-right: auto; }
.dl-m { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dl-addr { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dl-flags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dl-ph { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--bad-soft); color: #b91c1c; }
.dl-ph.ok { background: #dcfce7; color: #15803d; }
.dl-none { padding: 6px; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dl-grid > .card { margin: 0; }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } .dl-board { grid-template-columns: repeat(5, 260px); } }
.dl-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.dl-shots { display: grid; gap: 10px; }
.dl-shot { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.dl-shot.need { border-color: #fca5a5; background: var(--bad-soft); }
.dl-shot.ok { border-color: #86efac; }
.dl-shot-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dl-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-thumb { display: grid; width: 96px; font-size: 10px; color: var(--muted); text-decoration: none; }
.dl-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.dl-sign { width: 100%; height: auto; border: 2px dashed var(--line); border-radius: 8px; touch-action: none; background: #fff; }
.dl-actions { flex-wrap: wrap; }
.dl-mine-card { display: grid; gap: 4px; padding: 14px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); text-decoration: none; font-size: 15px; }
.dl-mine-card.failed { border-left: 4px solid #dc2626; }
.dl-mine-card.shipping { border-left: 4px solid var(--brand); }
.dl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 10px; }
.dl-kpis .kpi { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.dl-kpis .kpi b { font-size: 20px; }
/* In: bill giao A5 / K80, nhãn kiện 100x75 */
@page dla5 { size: A5 portrait; margin: 7mm; }
@page dlk80 { size: 80mm 297mm; margin: 2mm 3mm; }
@page dllbl { size: 100mm 75mm; margin: 0; }
body.dl-print { background: #fff; color: #111; font: 12.5px/1.4 Arial, Helvetica, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.dl-a5 { page: dla5; }
body.dl-k80 { page: dlk80; font-size: 11px; }
body.dl-label { page: dllbl; }
.dlp-page { max-width: 134mm; margin: 0 auto 8mm; break-after: page; }
.dlp-page.k80 { max-width: 74mm; }
.dlp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4mm; border-bottom: 2px solid #111; padding-bottom: 2mm; }
.dlp-co { font-size: 11px; color: #333; }
.dlp-co-n { font-size: 14px; font-weight: 700; color: #111; text-transform: uppercase; }
.dlp-qr { text-align: center; flex: none; }
.dlp-qr .qr-svg { display: block; margin: 0 auto; }
.dlp-qr-c { font: 700 11px Arial, sans-serif; letter-spacing: .5px; }
.dlp-qr-t { font-size: 8.5px; color: #555; }
.dlp-title { text-align: center; font-size: 19px; font-weight: 700; line-height: 1.5; margin: 3mm 0 0; }
.dlp-sub { text-align: center; color: #444; margin-bottom: 3mm; }
.dlp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.dlp-card { border: 1px solid #999; border-radius: 2mm; padding: 2mm 3mm; }
.dlp-lab { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; color: #555; margin-bottom: 1mm; }
.dlp-big { font-size: 15px; font-weight: 700; line-height: 1.25; }
.dlp-phone { font-size: 14px; font-weight: 700; margin: .5mm 0; }
.dlp-muted { color: #555; font-size: 11px; margin-top: 1mm; }
.dlp-kv { display: grid; grid-template-columns: 22mm 1fr; gap: 1mm; padding: .4mm 0; }
.dlp-kv span:first-child { color: #555; }
.dlp-tbl { width: 100%; border-collapse: collapse; margin: 3mm 0 2mm; }
.dlp-tbl th { background: #e9ecef; font-size: 11px; text-transform: uppercase; }
.dlp-tbl th, .dlp-tbl td { border: 1px solid #888; padding: 1.2mm 1.6mm; text-align: left; vertical-align: top; }
.dlp-tbl .c { text-align: center; } .dlp-tbl .r { text-align: right; white-space: nowrap; }
.dlp-tbl .mono { font-family: Consolas, monospace; font-size: 11px; white-space: nowrap; }
.dlp-tbl tfoot td { background: #f6f7f8; font-weight: 600; }
.dlp-cod { display: flex; justify-content: space-between; align-items: center; border: 2px solid #111; border-radius: 2mm; padding: 2mm 3mm; margin: 2mm 0; font-weight: 700; }
.dlp-cod b { font-size: 17px; }
.dlp-nocod { color: #555; font-style: italic; margin: 1mm 0 2mm; }
.dlp-note { border-left: 3px solid #999; padding: 1mm 2mm; margin: 2mm 0; background: #f6f7f8; }
.dlp-sign { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 4mm; min-height: 26mm; }
.dlp-sign div { display: flex; flex-direction: column; gap: .5mm; }
.dlp-sign i { font-size: 10px; color: #555; }
.dlp-foot { border-top: 1px dashed #999; margin-top: 3mm; padding-top: 1.5mm; font-size: 10px; color: #555; text-align: center; }
/* K80: 1 cột, gọn */
.dlp-page.k80 .dlp-head { flex-direction: column; align-items: center; text-align: center; }
.dlp-page.k80 .dlp-cols { grid-template-columns: 1fr; gap: 2mm; }
.dlp-page.k80 .dlp-title { font-size: 16px; }
.dlp-page.k80 .dlp-tbl th:nth-child(2), .dlp-page.k80 .dlp-tbl td:nth-child(2), .dlp-page.k80 .dlp-tbl th:nth-child(4), .dlp-page.k80 .dlp-tbl td:nth-child(4) { display: none; }
.dlp-page.k80 .dlp-tbl tfoot td[colspan] { }
.dlp-page.k80 .dlp-sign { grid-template-columns: 1fr 1fr; }
.dlp-page.k80 .dlp-sign div:first-child { display: none; }
.dlp-page.k80 .dlp-kv { grid-template-columns: 20mm 1fr; }
/* Nhãn kiện 100 x 75 mm */
.dlp-label { width: 100mm; height: 75mm; box-sizing: border-box; padding: 3.5mm 4mm; break-after: page; display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.5mm; overflow: hidden; }
.dlp-lh { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #111; padding-bottom: 1mm; font-size: 11px; }
.dlp-lh b { font-size: 17px; letter-spacing: .5px; }
.dlp-lb { display: flex; justify-content: space-between; gap: 3mm; align-items: flex-start; }
.dlp-label .dlp-big { font-size: 17px; }
.dlp-label .dlp-phone { font-size: 16px; }
.dlp-addr { font-size: 12px; line-height: 1.3; }
.dlp-lf { display: flex; justify-content: space-between; align-items: center; gap: 2mm; font-size: 12px; font-weight: 600; }
.dlp-cod-s { border: 2px solid #111; padding: .5mm 2mm; font-size: 13px; font-weight: 800; white-space: nowrap; }
.dlp-from { font-size: 10px; color: #555; border-top: 1px dashed #999; padding-top: 1mm; }
/* Báo cáo giao hàng: tiêu đề mục có lề, bảng không tràn khung */
#rp-body { padding: 0 0 12px; }
#rp-body .rp-h { margin: 16px 14px 8px; font-size: 15px; }
#rp-body .rp-sec { margin: 0 14px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
#rp-body .rp-tbl th, #rp-body .rp-tbl td { white-space: nowrap; }
#rp-body .rp-note { margin: 10px 14px 0; }
#rp-body .dl-kpis .kpi { min-width: 0; overflow: hidden; }
#rp-body .dl-kpis .kpi .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1100px) { #rp-body .dl-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dl-card[data-open] { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.dl-card[data-open]:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); transform: translateY(-1px); }
.dl-mine-card { transition: box-shadow .15s; } .dl-mine-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
/* Khung Thông tin giao sửa trực tiếp */
.dl-form { margin-top: 8px; }
.dl-form .dl-method select { font-weight: 600; }
.dl-form > div[data-for] { display: contents; }
.dl-form > div[data-for][hidden] { display: none; }
.dl-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
#dl-info .card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dl-form [hidden] { display: none !important; }
/* Trang phiếu giao: khoảng cách giữa các khung */
.dl-grid + .card, #dl-notes, #dl-notes + .card { margin-top: 16px; }
#dl-info .card-body > table { margin-top: 12px; }
/* Ô Vận chuyển (đơn bán): phiếu giao hàng */
.shp-dl { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 6px; }
.shp-dl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shp-card .card-body > .shp-dl:first-child { border-top: 0; padding-top: 0; }
/* Định nghĩa dữ liệu (trường tự thêm) */
.req { color: #dc2626; }
.cf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cf-form { margin-top: 8px; }
.cf-label { border-top: 1px dashed var(--line); padding-top: 8px; }
.cf-label b { font-size: 14px; }
.cf-cell { overflow: hidden; text-overflow: ellipsis; }
.cf-w1 { min-width: 100px; max-width: 100px; } .cf-w2 { min-width: 200px; max-width: 200px; } .cf-w3 { min-width: 300px; max-width: 300px; } .cf-w4 { min-width: 400px; max-width: 400px; } .cf-w5 { min-width: 500px; max-width: 500px; }
.cf-sep td { background: var(--bg-2, #f6f7f9); }
.cf-builtin td { color: var(--ink-2, #475467); }
.card-body > .cf-form:first-child { margin-top: 0; }
/* Cài đặt hồ sơ khách đầy đủ */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.pr-cfg { order: 2; margin-left: auto; }
.hub-tabs { margin-bottom: 12px; }
/* Trao đổi kiểu Getfly: thích / trả lời / ghim */
.nt-item { position: relative; }
.nt-tools { display: inline-flex; gap: 2px; margin-left: 8px; opacity: 0; transition: opacity .12s; vertical-align: middle; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 1px 3px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.nt-item:hover > .tl-meta .nt-tools, .nt-item:focus-within > .tl-meta .nt-tools { opacity: 1; }
@media (hover: none) { .nt-tools { opacity: 1; } }
.nt-btn { border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 13px; line-height: 1.4; }
.nt-btn:hover { background: var(--bg-2, #f2f4f7); }
.nt-btn.on { background: #fff4e5; }
.nt-pin { color: #e8590c; }
.nt-likes { font-size: 12px; color: var(--ink-2, #475467); margin-left: 4px; }
.nt-reply { margin-left: 28px; border-left: 3px solid var(--line); padding-left: 10px; }
.nt-pinbox { background: #fffaf2; border: 1px solid #fde4c3; border-radius: 10px; padding: 6px 8px; margin-bottom: 10px; }
.nt-pinhead { font-size: 12px; font-weight: 650; color: #b54708; margin-bottom: 4px; }
.nt-replybox:not(:empty) { margin-top: 8px; }
/* Ô tìm quyền (bảng phân quyền) */
.perm-search { display: flex; align-items: center; gap: 10px; margin: 0; position: sticky; top: 0; z-index: 3; background: var(--card, #fff); padding: 10px 18px; border-bottom: 1px solid var(--line); }
.perm-search input { flex: 1; max-width: 560px; }
.chip-toggle.pm-hit { outline: 2px solid #f59e0b; outline-offset: 1px; }
/* ===== Cơ hội bán hàng (opportunities.js) ===== */
.opp-tools .grow { flex: 1; }
.opp-mb { margin-bottom: 10px; }
.opp-board { display: flex; gap: 12px; overflow-x: auto; padding: 12px 14px 16px; align-items: flex-start; }
.opp-col { flex: 0 0 260px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 75vh; }
.opp-col.over { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-soft); }
.opp-col.fc-won { background: var(--ok-soft); }
.opp-col.fc-lost { background: var(--bad-soft); }
.opp-col.fc-won .opp-col-h, .opp-col.fc-lost .opp-col-h { border-bottom-style: dashed; }
.opp-col-h { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.opp-col-t { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.opp-col-b { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.opp-none { text-align: center; padding: 10px 0; }
.opp-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 8px 10px; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; }
.opp-card:hover { border-color: var(--brand); }
.opp-card[draggable="true"] { cursor: grab; }
.opp-card.dragging { opacity: .45; }
.opp-card.won { border-left-color: var(--ok); }
.opp-card.lost { border-left-color: var(--bad); opacity: .85; }
.opp-card.overdue { border-left-color: var(--bad); }
.opp-card-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.opp-card-name { font-weight: 600; overflow-wrap: anywhere; }
.opp-card-cus { overflow-wrap: anywhere; }
.opp-card-f { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.opp-stagebar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; }
.opp-chev { position: relative; flex: 1 1 120px; border: 0; background: var(--line-2); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13px; padding: 9px 14px 9px 22px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.opp-chev:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.opp-chev:not(:disabled):hover { background: var(--brand-soft); color: var(--brand); }
.opp-chev:disabled { cursor: default; }
.opp-chev-p { font-size: 11px; font-weight: 500; opacity: .8; }
.opp-chev.done { background: #c7d6fb; color: #1b3a99; }
.opp-chev.cur { background: var(--brand); color: var(--brand-ink); }
.opp-chev.cur.fc-won { background: var(--ok); }
.opp-chev.cur.fc-lost { background: var(--bad); }
.opp-chev.fc-won:not(.cur) { background: var(--ok-soft); color: var(--ok); }
.opp-chev.fc-lost:not(.cur) { background: var(--bad-soft); color: var(--bad); }
.opp-timeline { list-style: none; margin: 0; padding: 12px 18px 14px 34px; position: relative; }
.opp-timeline li { position: relative; padding: 0 0 12px; }
.opp-timeline li::before { content: ""; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.opp-timeline li::after { content: ""; position: absolute; left: -14px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.opp-timeline li:last-child::after { display: none; }
.opp-lines .q-ship { display: none; }
.opp-bar { display: inline-block; vertical-align: middle; width: 140px; height: 10px; background: var(--line-2); border-radius: 99px; margin-right: 8px; overflow: hidden; }
.opp-bar > span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 99px; }
.opp-bar.pass > span { background: #93b0f5; }
.opp-bar.fc-won > span { background: var(--ok); }
.opp-bar.fc-lost > span { background: var(--bad); }
.opp-bar.fc-commit > span { background: #5b21b6; }
.opp-bar.amt > span { background: var(--warn); }
.opp-rep-h { margin: 0 0 4px; font-size: 16px; }
.opp-rep-sec { margin-top: 14px; }
.opp-rep-sec h3 { margin: 0 0 6px; font-size: 14px; }
.opp-rep-card { margin: 16px 14px; }
.opp-rep-note { padding: 8px 18px 12px; }
.opp-reasons h3 { margin: 0 0 8px; font-size: 14px; }
.opp-rrow { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.opp-rrow .or-name { flex: 1; }
.opp-stage-ed input[type=number] { width: 80px; }
.opp-stage-ed input.ps-name { min-width: 180px; }
@media (max-width: 860px) {
  .opp-col { flex-basis: 230px; }
  .opp-bar { width: 80px; }
  .opp-chev { flex-basis: 45%; }
}

/* Chia lead & Kho số */
.lead-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lead-chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; margin-top: 6px; max-height: 220px; overflow: auto; }
.lead-chk-grid .check-inline { font-weight: 400; }
.lead-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
@media (max-width: 860px) {
  .lead-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ô "Phát sinh từ cơ hội nào?" (oppPick.js) + ô bắt buộc còn trống */
.opp-pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opp-pick-row select { flex: 1; min-width: 220px; }
.opp-pick-direct { margin-top: 10px; }
.opp-pick-ini { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 6px; }
.opp-pick-ini input { width: auto; }
.op-note-wrap { margin-top: 8px; }
input.need-fill, select.need-fill, textarea.need-fill { border-color: var(--bad); background: var(--bad-soft); }
.card.need-fill { outline: 2px solid var(--bad); outline-offset: -2px; }

/* Sales pipe (oppPipe.js): tác nghiệp ở chi tiết cơ hội, Việc cần làm, thiết lập luật + chạy thử */
.hv-tabs { flex-wrap: wrap; }
.opp-card-task { border-top: 1px dashed var(--line-2); padding-top: 4px; margin-top: 2px; overflow-wrap: anywhere; }
td .opp-card-task { border-top: 0; padding-top: 2px; }
.pp-open { padding: 12px 14px 4px; }
.pp-task { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.pp-task.overdue { border-left-color: var(--bad); }
.pp-task-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-rf { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pp-rf select { width: auto; flex: 1 1 200px; min-width: 0; max-width: 360px; }
.pp-rf textarea { flex: 2 1 200px; min-height: 36px; resize: vertical; }
.pp-prev { flex-basis: 100%; color: var(--brand); }
.pp-prev:empty { display: none; }
.pp-task-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-resch { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pp-resch input { width: auto; }
.pp-sec-h { padding: 10px 14px 2px; font-weight: 600; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line-2); }
.pp-hist-l { list-style: none; margin: 0; padding: 4px 14px 10px; }
.pp-hist-l li { padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.pp-hist-l li:last-child { border-bottom: 0; }
.pp-hist-note { white-space: pre-wrap; color: var(--ink-2); margin-top: 2px; }
.pp-more-w { padding: 0 14px 12px; }
.pp-empty { padding: 20px; }
.pp-ftabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px 0; }
.pp-ft { border: 1px solid var(--line-2); background: var(--panel); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pp-ft.on { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.pp-ft .n { background: var(--line-2); color: var(--ink-2); border-radius: 99px; padding: 0 7px; font-size: 12px; }
.pp-ft.bad .n { background: var(--bad); color: #fff; }
.pp-rows { display: flex; flex-direction: column; }
.pp-row { display: grid; grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.9fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); align-items: start; }
.pp-row.overdue { box-shadow: inset 3px 0 0 var(--bad); }
.pp-row > div { min-width: 0; overflow-wrap: anywhere; }
.pp-c-task { display: flex; flex-direction: column; gap: 6px; }
.pp-tel { font-weight: 600; white-space: nowrap; }
.pp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.pp-lib { border-right: 1px solid var(--line-2); padding: 12px; }
.pp-lib-h { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; margin: 12px 0 6px; }
.pp-lib-k { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-kind { border: 1px solid var(--line-2); background: var(--panel); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.pp-kind.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pp-kind:disabled { cursor: default; }
.pp-board { display: flex; gap: 10px; overflow-x: auto; padding: 12px 14px 16px; align-items: flex-start; }
.pp-col { flex: 0 0 220px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.pp-col:hover { border-color: var(--brand); }
.pp-col.sel { outline: 2px solid var(--brand); outline-offset: -1px; }
.pp-col.end { cursor: default; }
.pp-col.end:hover { border-color: var(--line-2); }
.pp-col.fc-won { background: var(--ok-soft); }
.pp-col.fc-lost { background: var(--bad-soft); }
.pp-col-h { padding: 8px 10px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.pp-col-b { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pp-chip { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; padding: 5px 8px; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.pp-chip.first { border-left-color: var(--warn); }
.pp-chip.off { opacity: .5; }
.pp-rt td { vertical-align: top; }
.pp-rt tbody { border-top: 2px solid var(--line); }
.pp-tc { min-width: 230px; background: var(--bg); }
.pp-tc > * + * { margin-top: 6px; }
.pp-tc-h { display: flex; gap: 6px; align-items: center; }
.pp-tc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-tc-row select { flex: 1; min-width: 140px; }
.pp-tc-row label.small { display: inline-flex; gap: 6px; align-items: center; }
input.pp-num { width: 72px; height: 32px; padding: 0 8px; }
.pp-tc-row label.small { white-space: nowrap; }
.pp-rt input[data-r="name"] { min-width: 170px; }
.pp-rt select[data-r] { min-width: 150px; }
.pp-rt select.pp-unit { min-width: 0; width: auto; margin-left: 4px; }
.pp-dirty { display: none; }
.pp-tb.dirty .pp-dirty { display: inline-flex; }
.pp-hint { margin-top: 3px; }
.pp-foot td { background: var(--bg); }
.pp-sim-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-sim-top select { width: auto; min-width: 180px; }
.pp-sim-log { margin: 12px 0; padding-left: 22px; }
.pp-sim-log li { margin-bottom: 4px; }
.pp-sim-cur { border: 1px dashed var(--brand); border-radius: 8px; padding: 10px 12px; background: var(--brand-soft); }
.pp-sim-rs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 860px) {
  .pp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pp-layout { grid-template-columns: minmax(0, 1fr); }
  .pp-lib { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .pp-col { flex-basis: 190px; }
  .pp-rf select, .pp-rf textarea { max-width: none; flex-basis: 100%; }
}

/* Mẫu tin / kịch bản của tác nghiệp */
.pp-script-l { display: flex; flex-direction: column; gap: 4px; }
.pp-script-in { width: 100%; min-height: 72px; resize: vertical; font: inherit; }
.pp-script-hint { margin-top: 2px; }
.pp-script-view { width: 100%; min-height: 180px; white-space: pre-wrap; resize: vertical; font: inherit; line-height: 1.5; }

/* ô số nằm cùng dòng chữ: giữ nhỏ (kiểu chung cho ô số đặt rộng 100%) */
.pe-rk input { width: 70px; height: 32px; padding: 0 8px; }

/* Cơ hội tạo nhanh: dải nhắc cập nhật tiến trình */
.opp-quick-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Cơ hội tạo nhanh chờ cập nhật tiến trình: nổi bật trong danh sách / Kanban */
.tbl tr.quick-row td { background: var(--warn-soft); }
.tbl tr.quick-row td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tbl tr.quick-row.click:hover td { background: #ffe8c4; }
.opp-card.quick { border-left-color: var(--warn); background: var(--warn-soft); }
a.badge.opp-quick-b { text-decoration: none; white-space: nowrap; }
.opp-quick-f.on { color: var(--warn); font-weight: 600; }