/* Màn hình có form: Cài đặt, Hồ sơ doanh nghiệp, chế độ Chủ shop, hướng dẫn lần đầu. Dùng biến màu trong app.css */

/* Chế độ Dev / Chủ shop: ẩn mục của chế độ kia */
body.mode-shop [data-mode="dev"], body.mode-dev [data-mode="shop"] { display: none !important; }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 600 11px/18px var(--body); text-align: center; }

.page { max-width: 960px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 40px; display: grid; gap: 14px; align-content: start; }
.page h2 { font: 700 20px var(--display); margin: 0; }
.page h3 { font: 600 15px var(--body); margin: 0; }
.page > p { margin: 0; }
.small { font-size: 12px; }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.bad-text { color: var(--bad); }
.card-form { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.card-form p { margin: 0; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row > input, .row > textarea { flex: 1; min-width: 0; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field > input, .field > select, .field > textarea { align-self: start; }
.field.inline { display: flex; align-items: center; gap: 8px; }
.field label { font-weight: 500; font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.field small, .card-form small { color: var(--muted); font-size: 12px; }
.page input:not([type=checkbox]):not([type=file]), .page select, .page textarea,
.modal-box input:not([type=checkbox]):not([type=file]), .modal-box select, .modal-box textarea,
.onboard-box input:not([type=checkbox]), .onboard-box select, .onboard-box textarea {
  border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 7px 10px; min-width: 0; width: 100%;
}
.page .row > select, .page .row label input:not([type=checkbox]) { width: auto; }
.page textarea, .modal-box textarea { resize: vertical; line-height: 1.45; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
@media(max-width:600px) { .grid2 { grid-template-columns: minmax(0,1fr); } }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400 !important; cursor: pointer; }
.switch { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 13px; }
.switch input { width: 34px; height: 20px; appearance: none; border-radius: 10px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.switch input:checked { background: var(--ok); }
.switch.warn input:checked { background: var(--warn); }
.switch input:checked::after { left: 16px; }
.switch input:disabled { opacity: .45; cursor: not-allowed; }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.bad { color: var(--bad); border-color: var(--bad); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; color: var(--muted); }
.tabs button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tabs button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.tabs button.dim { opacity: .55; }
.tab-body { display: grid; gap: 14px; }
.test-out { font-size: 13px; color: var(--muted); }
.test-out.ok { color: var(--ok); }
.test-out.bad { color: var(--bad); }
details > summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 2px 0; }
details[open] > summary { margin-bottom: 8px; }
.fields { display: grid; gap: 10px; margin-bottom: 10px; }
.sticky-save { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); z-index: 1; }

/* Thẻ chọn chế độ */
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mode-card { display: grid; gap: 6px; text-align: left; border: 2px solid var(--line); background: var(--raise); border-radius: 12px; padding: 14px; align-content: start; }
.mode-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.mode-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--raise)); }
.mode-card b { font: 700 16px var(--display); }
.mode-card span:last-child { color: var(--muted); font-size: 13px; }
.mode-ic { font-size: 24px; }

/* Danh sách project / nguồn kho / tin nhắn */
.plist, .srcs, .msgs { display: grid; gap: 8px; }
.pitem { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.pitem code { font: 12px var(--mono); color: var(--muted); word-break: break-all; }
.picker { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: var(--bg); }
.picker-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.picker-head code { font: 12px var(--mono); word-break: break-all; }
.picker-list { max-height: 220px; overflow: auto; display: grid; }
.picker-list button { border: 0; background: none; text-align: left; padding: 5px 10px; }
.picker-list button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.picker .row { padding: 8px 10px; border-top: 1px solid var(--line); }
.offer { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
#offers { display: grid; gap: 10px; }

/* Số liệu, bảng */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--raise); border-radius: 12px; padding: 12px 14px; }
.kpi:hover { border-color: var(--accent); }
.kpi b { font: 700 26px var(--display); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.warn b { color: var(--warn); }
.kpi.bad b { color: var(--bad); }
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; white-space: nowrap; }
table.data td:nth-child(2) { white-space: normal; min-width: 160px; }
table.data th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.low td { background: color-mix(in srgb, var(--bad) 6%, transparent); }
.activity { display: grid; gap: 4px; font-size: 13px; max-height: 280px; overflow: auto; }
.quote { border-left: 3px solid var(--line); padding: 2px 10px; white-space: pre-wrap; color: var(--ink); overflow-wrap: anywhere; }
.suggest.left { justify-content: flex-start; margin-top: 0; }
.job .row label { display: inline-flex; gap: 6px; align-items: center; }

/* Hộp thoại, hướng dẫn lần đầu, thông báo nhanh */
.modal, .onboard { position: fixed; inset: 0; background: rgb(10 14 20 / .55); display: grid; place-items: center; padding: 16px; z-index: 40; }
.modal-box, .onboard-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.modal-box h3, .onboard-box h2 { margin: 0; font: 700 18px var(--display); }
.onboard-box h2 { font-size: 22px; }
.onboard-box p { margin: 0; }
.onboard-box .choice { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.onboard-box a { color: var(--accent); }
.steps { display: flex; gap: 6px; }
.steps span { width: 28px; height: 4px; border-radius: 2px; background: var(--line); }
.steps span.on { background: var(--accent); }
.steps span.done { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 24px rgb(0 0 0 / .25); font-size: 13px; white-space: pre-line; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.warn { background: var(--warn); color: #fff; }
@media (max-width: 900px) {
  .kpi b { font-size: 22px; }
  .modal, .onboard { padding: 8px; }
  .page { padding-inline: 16px; }
}

.btn:disabled, .icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.card-form > .btn, .card-form > button.btn { justify-self: start; }

/* Chế độ Chủ shop: không có cột vault (khái niệm dành cho dev), tên cửa hàng trên thanh trên */
body.mode-shop .vault { display: none !important; }
body.mode-shop .shell, body.mode-shop .shell.no-vault { grid-template-columns: var(--side-w, 220px) minmax(0, 1fr); }
.shop-name { font: 700 16px var(--display); }
@media (max-width: 900px) {
  body.mode-shop .shell, body.mode-shop .shell.no-vault { grid-template-columns: minmax(0, 1fr); }
}
.tabs.sub { border-bottom: 0; padding-bottom: 0; }
.tabs.sub button { font-size: 13px; padding: 4px 10px; }

/* Tổng quan cửa hàng */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dash-head h2 { margin: 0; }
.row.wrap { flex-wrap: wrap; }
.setup .meter { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.setup .meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.setup-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px; }
.setup-step, .todo-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--raise); border-radius: 10px; padding: 8px 12px; color: var(--ink); font: inherit; cursor: pointer; }
.setup-step:hover, .todo-item:hover { border-color: var(--accent); }
.setup-step .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.setup-step.done { color: var(--muted); }
.setup-step.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-step .go, .todo-item .go { margin-left: auto; color: var(--muted); }
.todo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; }
.todo-item { border-left-width: 4px; }
.todo-item b { font: 700 20px var(--display); font-variant-numeric: tabular-nums; min-width: 28px; }
.todo-item.bad { border-left-color: var(--bad); }
.todo-item.bad b { color: var(--bad); }
.todo-item.warn { border-left-color: var(--warn); }
.todo-item.warn b { color: var(--warn); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.stat { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--raise); border-radius: 12px; padding: 14px 16px; color: var(--ink); font: inherit; cursor: pointer; }
.stat:hover { border-color: var(--accent); }
.stat-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat-value { font: 700 26px/1.15 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-sub { font-size: 12px; color: var(--muted); }
.stat-sub em { font-style: normal; }
.stat.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.trend { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; padding-top: 8px; border-bottom: 1px solid var(--line); }
.trend-col { position: relative; display: grid; gap: 4px; justify-items: center; outline: none; }
.trend-area { height: 140px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.trend-bar { display: block; width: min(36px, 70%); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.trend-col.today .trend-bar { background: var(--accent); }
.trend-bar.none { height: 2px; background: none; border-top: 2px dashed var(--line); border-radius: 0; }
.trend-x { white-space: nowrap; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 4px; }
.trend-col.today .trend-x { color: var(--ink); font-weight: 600; }
.trend-col .tip { display: none; position: absolute; bottom: calc(100% - 20px); left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; font-size: 12px; background: var(--ink); color: var(--raise); padding: 6px 9px; border-radius: 8px; pointer-events: none; }
.trend-col:hover .tip, .trend-col:focus .tip { display: block; }
.trend-col:hover .trend-bar { filter: brightness(1.1); }
.empty-chart { display: grid; gap: 8px; justify-items: start; padding: 24px 0; }
.mini-h { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rank { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 13px; }
.rank li span { display: inline-block; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rank li b { float: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* Đơn hàng, khách hàng */
table.data td.wrap-cell { white-space: normal; min-width: 180px; max-width: 320px; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td, table.data tr.click:focus td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.o-item input { width: 100%; }
.o-item td:first-child { min-width: 220px; }
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stats.compact .stat-value { font-size: 20px; }

/* Lãi lỗ, sổ thu chi */
.cash-note { margin: 0; overflow-wrap: anywhere; }
table.data td.cash-empty { white-space: normal; padding: 18px 8px; }
table.data.pl tr.total td { border-top: 2px solid var(--line); font-weight: 600; }
table.data.pl tr.sub td { color: var(--muted); font-size: 12px; }
table.data.pl tr.total.neg td:nth-child(2) { color: var(--bad); }
table.data.pl tr.total.pos td:nth-child(2) { color: var(--ok); }
table.data.pl .indent { padding-left: 16px; display: inline-block; }
table.data tr.cur td { background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight: 600; }

/* Vận chuyển */
.cod-group { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; display: grid; gap: 8px; }
.cod-group h3 { margin: 0; }
.ship-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
@media (max-width: 600px) {
  .stats, .stats.compact { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat-value { font-size: 19px; }
}
table.data.pl td:first-child { white-space: normal; min-width: 0; }
@media (max-width: 600px) {
  table.data.pl { font-size: 12px; }
  table.data.pl th, table.data.pl td { padding: 5px 4px; }
  table.data.pl .indent { padding-left: 8px; }
}

/* AI chiến lược, kế hoạch */
.ins-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); font-size: 13px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tool-card { display: grid; gap: 6px; align-content: start; text-align: left; border: 1px solid var(--line); background: var(--raise); border-radius: 14px; padding: 16px; color: var(--ink); font: inherit; cursor: pointer; min-height: 170px; }
.tool-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgb(0 0 0 / .06); }
.tool-card b { font: 600 15px var(--body); }
.tool-card span { font-size: 12.5px; color: var(--muted); }
.tool-card em { font-style: normal; color: var(--accent); font-weight: 600; font-size: 13px; margin-top: auto; }
.tool-ic { font-size: 22px !important; color: var(--accent) !important; }
.run-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.run-row > div { flex: 1; min-width: 0; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.report { display: grid; gap: 10px; }
.report .md table { border-collapse: collapse; width: 100%; font-size: 13px; display: block; overflow-x: auto; }
.report .md th, .report .md td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.plan .meter { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.plan .meter i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.steps-list { display: grid; gap: 4px; }
.step-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); }
.step-row.done b { text-decoration: line-through; color: var(--muted); }
.step-row.doing { border-left: 3px solid var(--accent); }
.step-row details p { margin: 4px 0 0; }
.step-row input[type=checkbox] { width: 18px; height: 18px; }
.add-step input[name=t] { flex: 1; min-width: 160px; }
@media (max-width: 700px) { .step-row { grid-template-columns: auto minmax(0, 1fr); } .step-row > .pill, .step-row > .small, .step-row > .row { grid-column: 2; } }
.modal-box.wide { width: min(1000px, 96vw); max-width: 96vw; }

/* Hộp Tạo / sửa đơn: trái = khung chat Tạo nhanh, phải = đơn hàng; nút lưu cố định ở đáy */
.modal-box.xl { width: min(1180px, 96vw); max-width: 96vw; height: min(860px, calc(100vh - 32px)); padding: 0; gap: 0; overflow: hidden; display: block; }
.om { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.om.with-ai { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.om-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.o-del { border: 0; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; flex: none; }
.o-del:hover { background: var(--raise); color: var(--bad); }

.om-ai { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.om-ai.drag { outline: 2px dashed var(--accent); outline-offset: -6px; }
.om-ai-head { display: grid; gap: 2px; padding: 12px 16px 8px; }
.om-ai-body { overflow-y: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.oi-empty { display: grid; gap: 8px; }
.oi-empty p { margin: 0; }
.oi-tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.oi-tips b { color: var(--ink); font-weight: 600; }
.oi-log { display: flex; flex-direction: column; gap: 8px; }
.oi-msg { font-size: 13px; padding: 8px 11px; border-radius: 12px; max-width: 94%; line-height: 1.5; overflow-wrap: anywhere; }
.oi-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink, #fff); border-bottom-right-radius: 4px; }
.oi-msg.ai { align-self: flex-start; background: var(--raise); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.oi-msg.bad { color: var(--bad); }
.oi-ask ul { margin: 4px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.oi-ask li.req { font-weight: 600; }
.oi-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.oi-pick > span { width: 100%; }
.oi-chip { border: 1px solid var(--line); background: var(--panel); color: inherit; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; text-align: left; line-height: 1.4; }
.oi-chip:hover { border-color: var(--accent); color: var(--accent); }
.oi-cards { display: grid; gap: 6px; }
.oi-card { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); cursor: pointer; }
.oi-card.warn { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.oi-card-main { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.oi-card input { margin-top: 3px; }
.oi-bulk { width: 100%; }

.oi-box { margin: 0 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.oi-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.modal-box .oi-box textarea { width: 100%; border: 0; background: transparent; resize: none; min-height: 64px; max-height: 160px; padding: 10px 12px 4px; box-shadow: none; }
.oi-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px; }
.oi-bar .oi-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.oi-icon:hover { background: var(--raise); color: var(--ink); }
.oi-icon:disabled { opacity: .4; cursor: not-allowed; }
#oi-mic.rec { background: var(--bad); color: #fff; animation: pulse 1.2s infinite; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

.om-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.om-scroll { overflow-y: auto; padding: 4px 20px 16px; }
.om-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.om-sec > * + * { margin-top: 14px; }
.card-form > form, .modal-box > form { display: grid; gap: 16px; }
.card-form > form > .btn { justify-self: start; }
.modal-box.xl:not(:has(.om)):not(:has(.document-workspace)) { padding: 20px; overflow-y: auto; height: auto; max-height: calc(100vh - 32px); display: grid; gap: 16px; }
.om-sec:last-child { border-bottom: 0; }
.om-sec h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.om-sec h4 .link-btn { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.om-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.om-grid .span2 { grid-column: 1 / -1; }
#o-cinfo:empty { display: none; }
#o-cinfo { margin: 8px 0 0; }
.o-lines { width: 100%; border-collapse: collapse; }
.o-lines th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 6px 6px; }
.o-lines th.num, .o-lines td.num { text-align: right; }
.o-lines td { padding: 3px 6px; vertical-align: middle; }
.o-lines td:first-child, .o-lines th:first-child { padding-left: 0; }
.o-lines td:last-child { padding-right: 0; width: 34px; }
.o-lines .o-qty { width: 64px; }
.o-lines .o-price { width: 110px; }
.o-lines .o-line { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 90px; }
.om-pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.om-sum { display: grid; grid-template-columns: 1fr 140px; gap: 6px 12px; margin: 0; align-items: center; font-size: 14px; }
.om-sum dt { color: var(--muted); }
.om-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.om-sum dd input { text-align: right; padding-block: 5px; }
.om-sum .tot { border-top: 1px solid var(--line); padding-top: 8px; color: var(--ink); font-weight: 700; }
.om-sum dd.tot b { font: 700 20px var(--display); }
.om-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); }

@media (max-width: 900px) {
  .modal-box.xl { height: auto; max-height: calc(100vh - 16px); overflow-y: auto; }
  .om, .om.with-ai { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .om-ai { border-right: 0; border-bottom: 1px solid var(--line); }
  .om-ai-body { max-height: 40vh; }
  .om-scroll { overflow: visible; padding-inline: 16px; }
  .om-foot { position: sticky; bottom: 0; }
  .om-pay-grid { grid-template-columns: minmax(0, 1fr); }
  .o-lines .o-price { width: 86px; }
  .o-lines .o-line { min-width: 0; }
}
@media (max-width: 520px) { .om-grid { grid-template-columns: minmax(0, 1fr); } }
.om > *, .om-form > *, .om-ai > * { min-width: 0; }
.om-form { grid-template-columns: minmax(0, 1fr); }
.modal-box .o-lines input.o-qty { width: 64px; }
.modal-box .o-lines input.o-price { width: 110px; }
.o-lines td:nth-child(1) { width: 100%; }
.modal-box .oi-box textarea:focus { outline: none; box-shadow: none; border: 0; }
@media (max-width: 900px) {
  .modal-box .o-lines input.o-price { width: 84px; }
  .modal-box .o-lines input.o-qty { width: 52px; }
  .o-lines th:nth-child(4), .o-lines td.o-line { display: none; }
  .om-foot { flex-wrap: wrap; padding-inline: 16px; }
  .om-foot .btn { flex: 1 1 auto; }
}
.o-lines { table-layout: fixed; }
.o-lines th:nth-child(2) { width: 76px; } .o-lines th:nth-child(3) { width: 126px; } .o-lines th:nth-child(4) { width: 110px; } .o-lines th:nth-child(5) { width: 34px; }
.o-lines td:nth-child(1) { width: auto; }
.modal-box .o-lines input.o-qty, .modal-box .o-lines input.o-price { width: 100%; }
@media (max-width: 900px) {
  .o-lines th:nth-child(2) { width: 58px; } .o-lines th:nth-child(3) { width: 92px; }
  .modal-box .o-lines input.o-qty, .modal-box .o-lines input.o-price { width: 100%; }
}
/* Hộp nhập dùng chung: chọn Thu / Chi, ô số tiền chữ lớn, lãi gộp */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 12px; background: var(--bg); }
.seg label { position: relative; padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-box input.big-num { font: 700 18px var(--display); padding-block: 8px; }
.p-margin { font: 600 15px var(--display); padding-top: 7px; }
.om-sec details summary { cursor: pointer; list-style: none; }
.om-sec details summary::-webkit-details-marker { display: none; }
.om-sec details summary h4 { margin: 0; }
.om-sec details summary::before { content: '▸ '; color: var(--muted); }
.om-sec details[open] summary::before { content: '▾ '; }
.om-foot .btn.danger { margin-right: auto; }
.field .row .check { flex: none; white-space: nowrap; display: inline-flex; }
/* Hộp sửa (không có khung nhập nhanh): co theo nội dung, hẹp hơn; chân nút dính đáy khi cuộn */
.modal-box.xl:has(.om:not(.with-ai)) { width: min(880px, 96vw); height: auto; max-height: calc(100vh - 32px); overflow-y: auto; }
.om:not(.with-ai) { height: auto; }
.om:not(.with-ai) .om-scroll { overflow: visible; }
.om:not(.with-ai) .om-foot { position: sticky; bottom: 0; }
/* Nút In ▾ */
.print-menu { position: relative; display: inline-block; }
.print-menu > summary { list-style: none; cursor: pointer; }
.print-menu > summary::-webkit-details-marker { display: none; }
.print-pop { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50; background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: grid; gap: 2px; min-width: 210px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.print-pop .link-btn { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.print-pop .link-btn:hover { background: var(--panel); }
/* Bảng phiếu nhập có cột HSD; bảng lô; bảng kiểm kho */
.o-lines.pu-lines th:nth-child(2) { width: 70px; } .o-lines.pu-lines th:nth-child(3) { width: 110px; } .o-lines.pu-lines th:nth-child(4) { width: 140px; } .o-lines.pu-lines th:nth-child(5) { width: 100px; } .o-lines.pu-lines th:nth-child(6) { width: 34px; }
.o-lines.lot-lines th:nth-child(2) { width: 160px; } .o-lines.lot-lines th:nth-child(3) { width: 110px; } .o-lines.lot-lines th:nth-child(4) { width: 34px; }
.o-lines.st-lines th:nth-child(2) { width: 80px; } .o-lines.st-lines th:nth-child(3) { width: 96px; } .o-lines.st-lines th:nth-child(4) { width: 64px; } .o-lines.st-lines th:nth-child(5) { width: 100px; } .o-lines.st-lines th:nth-child(6) { width: 170px; }
.modal-box .o-lines input.pu-e, .modal-box .o-lines input.lot-exp { padding-inline: 6px; }
@media (max-width: 900px) { .o-lines.pu-lines th:nth-child(4) { width: 118px; } .o-lines.st-lines th:nth-child(5), .o-lines.st-lines td:nth-child(5) { display: none; } .o-lines.st-lines th:nth-child(6) { width: 110px; } }
.o-lines.rt-lines th:nth-child(2) { width: 120px; } .o-lines.rt-lines th:nth-child(3) { width: 80px; } .o-lines.rt-lines th:nth-child(4) { width: 150px; } .o-lines.rt-lines th:nth-child(5) { width: 100px; }
@media (max-width: 900px) { .o-lines.rt-lines th:nth-child(4) { width: 110px; } .o-lines.rt-lines th:nth-child(2) { width: 70px; } }
.om-sum .om-sum-note { grid-column: 1 / -1; text-align: right; margin-top: -4px; }
.om-sum .om-sum-note:empty { display: none; }
.o-lines.tier-lines th:nth-child(2) { width: 160px; } .o-lines.tier-lines th:nth-child(3) { width: 110px; } .o-lines.tier-lines th:nth-child(4) { width: 34px; }
/* Quét mã vạch */
.scan-ui { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .7); display: grid; place-items: center; padding: 12px; }
.scan-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(520px, 100%); display: grid; gap: 10px; padding: 12px; }
.scan-head { display: flex; justify-content: space-between; align-items: center; }
.scan-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.scan-view { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 22% 10%; border: 2px solid #3be07a; border-radius: 10px; box-shadow: 0 0 0 999px rgb(0 0 0 / .25); }
.scan-last { min-height: 20px; font-size: 13px; }
.scan-manual { display: flex; gap: 6px; }
.scan-manual input { flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 7px 10px; }
.om-sec h4 .scan-btn { width: 28px; height: 28px; }
#o-vc::placeholder, #v-code::placeholder { text-transform: none; }
/* Đăng nhập nhân viên / CTV */
.login-ui { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; place-items: center; padding: 16px; }
.login-box { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 12px; }
.login-box h2 { margin: 0; text-align: center; font: 700 20px var(--display); }
.login-box .logo-big { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 800 22px var(--display); margin: 0 auto; }
.login-box input { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 9px 11px; font-size: 15px; }
.login-box .row input { flex: 1; }
.login-box #login-msg:empty { display: none; }
.who-chip { margin-left: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Tài khoản hạn chế: ẩn phần của chủ shop (máy chủ vẫn chặn theo quyền) */
body.role-limited #dock-toggle, body.role-limited #dock-fab, body.role-limited .composer, body.role-limited .bell-wrap, body.role-limited #view-chat, body.role-limited .dock-resizer { display: none !important; }
body.role-limited.mode-shop .main, body.role-limited.mode-shop.dock-open .main { grid-template-columns: minmax(0, 1fr) !important; }
body.role-limited #shop-orders details.card-form, body.role-limited #src-add, body.role-limited #sync, body.role-limited .srcs, body.role-limited #lowdef, body.role-limited #expdays, body.role-limited #padd, body.role-limited [data-pedit], body.role-limited #o-sync { display: none !important; }
body.role-limited #shop-products .card-form:first-of-type { display: none; }
body.role-ctv [data-onext], body.role-ctv #o-labels, body.role-ctv #p-stocktake, body.role-ctv #p-expiry, body.role-ctv #p-tags, body.role-ctv #o-ship, body.role-ctv #o-return, body.role-ctv #o-edit, body.role-ctv [data-ost]:not([data-ost="cancelled"]), body.role-ctv #o-del, body.role-ctv #o-qr { display: none !important; }
body.role-limited #o-del { display: none !important; }

/* Sản phẩm có biến thể: dòng tên chung + các biến thể thụt vào */
.data tr.v-head td { background: var(--panel); }
.data tr.v-child td:nth-child(2) { padding-left: 28px; }
.data tr.v-child .v-opts { color: var(--muted); }
.vg-lines input { min-width: 80px; }
.vg-lines input.vr-sku { min-width: 120px; }
.vo-lines th:first-child { width: 30%; }
.vo-lines th:last-child { width: 36px; }
.vo-lines input, .vg-lines input { width: 100%; }
.vg-lines td:nth-child(2) { min-width: 120px; }

/* Bán tại quầy: tìm / lưới sản phẩm bên trái, giỏ hàng + thanh toán bên phải */
.pos-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.pos-left, .pos-right { background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.pos-left #pos-q { flex: 1; font-size: 16px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; max-height: calc(100vh - 230px); overflow: auto; }
.pos-tile { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.pos-tile:hover, .pos-tile:focus-visible { border-color: var(--accent); }
.pos-tile b { font-size: 13px; line-height: 1.3; }
.pos-right { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; }
.pos-lines { max-height: 38vh; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pos-line:last-child { border-bottom: 0; }
.pos-qty { display: flex; align-items: center; gap: 2px; }
.pos-empty { padding: 16px 0; }
.pos-right .om-sum.pos-sum dd input { width: 140px; max-width: 100%; }
.pos-qr { display: flex; align-items: center; gap: 10px; }
.pos-qr img { width: 150px; height: auto; background: #fff; border-radius: 6px; }
.pos-open { max-width: 420px; }

/* Bảng phân tích: cột sắp xếp được */
.data th.sortable { cursor: pointer; user-select: none; }
.data th.sortable.on { color: var(--accent); }

/* Dòng giỏ hàng: tầng trên tên + nút bỏ, tầng dưới giá · số lượng · thành tiền (thắng kiểu chung .page input) */
.pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name rm" "meta qty amt"; gap: 4px 10px; align-items: center; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.pos-line .pos-ln { grid-area: name; line-height: 1.35; overflow-wrap: anywhere; }
.pos-line .pos-rm { grid-area: rm; align-self: start; }
.pos-line .pos-meta { grid-area: meta; display: flex; align-items: center; gap: 6px; min-width: 0; }
.page .pos-line .pos-meta select.pos-u { width: auto; padding-block: 2px; }
.pos-line .pos-qty { grid-area: qty; }
.pos-line .pos-qty .btn { width: 30px; height: 30px; padding: 0; }
.page .pos-line .pos-qty input.pos-q { width: 48px; height: 30px; padding: 0 4px; text-align: center; }
.pos-line .pos-amt { grid-area: amt; min-width: 84px; text-align: right; }
.page .pos-right .om-sum.pos-sum dd input { width: 150px; }
.btn.pos-pay { flex: 1; height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; }
.pos-right > .row:last-child .btn:not(.pos-pay) { height: 48px; }
/* Theo bề rộng vùng bán hàng (mở khung trợ lý AI thì vùng này hẹp lại), không theo cửa sổ */
.pos-page { container-type: inline-size; }
@container (max-width: 980px) { .pos { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 10px; } .pos-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .pos-tile { padding: 8px; } }
@container (max-width: 600px) { .pos { grid-template-columns: 1fr; } .pos-right { position: static; } .pos-grid { max-height: 40vh; } }

/* Ô số lượng + đơn vị (thùng, lốc…) nằm cùng một hàng trong bảng hàng của đơn / báo giá / phiếu nhập */
.modal-box .o-item input.o-qty, .modal-box .q-row input.q-q, .modal-box .pu-item input.pu-q { width: 64px; }
.modal-box .o-item td:nth-child(2), .modal-box .q-row td:nth-child(2), .modal-box .pu-item td:nth-child(2) { white-space: nowrap; }
.modal-box .o-item select.o-unit, .modal-box .q-row select.q-u, .modal-box .pu-item select.pu-u { width: auto; min-width: 84px; margin-left: 4px; vertical-align: middle; }
/* Bảng có dòng chọn đơn vị lớn (thùng, lốc…): nới cột SL cho đủ ô số lượng + ô đơn vị */
.o-lines:has(select.o-unit:not([hidden]), select.q-u:not([hidden]), select.pu-u:not([hidden])) th:nth-child(2) { width: 190px; }

/* ---------- Biểu đồ (charts.js): màu theo thứ tự cố định, đã kiểm tra mù màu trên nền app sáng #fff và tối #1d2530 */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; } }
:root[data-theme="dark"] { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; }
.xc { position: relative; }
.xc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.xc-legend i, .xc-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.xc-plot { width: 100%; overflow: hidden; }
.xc-plot svg { display: block; max-width: 100%; height: auto; font: 11px var(--body); }
.xc-grid line { stroke: var(--line); stroke-width: 1; opacity: .7; }
.xc-grid text, .xc-x { fill: var(--muted); }
.xc-zero { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.xc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xc-dot { stroke: var(--raise); stroke-width: 2; }
.xc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.xc-hit { fill: transparent; cursor: crosshair; }
.xc-hit.on { fill: var(--ink); opacity: .05; }
.xc-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--raise); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; }
.xc-tip b { font-variant-numeric: tabular-nums; }
.xc-foot { display: flex; justify-content: flex-end; }
.xc-table { margin-top: 6px; max-height: 280px; overflow: auto; }
.xc-hbars { display: flex; flex-direction: column; gap: 6px; }
.xc-hrow { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.xc-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-ht { height: 12px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.xc-ht i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.xc-hv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 80px; }
.xc-hv small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
@media (forced-colors: active) { .xc-line { stroke: CanvasText; } .xc-ht i, .xc-bars path { fill: CanvasText; background: CanvasText; } }

/* Báo cáo: danh mục bên trái, nội dung bên phải */
.rp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.rp-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.rp-nav button { text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.rp-nav button:hover { background: var(--panel); }
.rp-nav button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rp-nav button[data-go] { color: var(--muted); font-size: 13px; }
.rp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rp-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.rp-charts .card-form { margin: 0; }
@media (max-width: 860px) { .rp-layout { grid-template-columns: 1fr; } .rp-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* Giám sát hệ thống */
.mon-overall { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--raise); margin-bottom: 12px; }
.mon-overall b { font-size: 17px; }
.mon-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--ok); }
.mon-overall.warn .mon-ico { background: var(--warn); } .mon-overall.bad .mon-ico { background: var(--bad); }
.mon-list { display: flex; flex-direction: column; }
.mon-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mon-row:last-child { border-bottom: 0; }
.mon-row .pill { justify-self: start; white-space: nowrap; }

/* Hướng dẫn sử dụng */
.hp-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.hp-side { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; }
.hp-side nav { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 220px); overflow: auto; }
.hp-side nav button { text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 10px; color: var(--ink); cursor: pointer; font: inherit; font-size: 13.5px; }
.hp-side nav button:hover { background: var(--panel); }
.hp-side nav button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.hp-article { margin: 0; min-height: 300px; }
.hp-article h3 { margin-top: 0; }
.hp-article .md li { margin: 4px 0; }
.hp-foot { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 860px) { .hp-layout { grid-template-columns: 1fr; } .hp-side { position: static; } .hp-side nav { max-height: 30vh; } }
/* Nút Báo cáo trên thanh trên cùng: chỉ chủ shop (báo cáo có số liệu tài chính) */
body.role-limited #reports-btn { display: none; }

/* Thanh tab của nhóm trang (chế độ Chủ shop): nằm đầu trang, dính trên cùng khi cuộn */
.hub-tabs { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); }
.hub-tabs-in { max-width: 1440px; margin: 0 auto; padding: 8px 24px 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.hub-tabs button { flex: none; border: 0; background: none; padding: 9px 14px 10px; font: 500 14px var(--body); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.hub-tabs button:hover { color: var(--ink); }
.hub-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.hub-tabs .hub-act { margin-left: auto; color: var(--accent); }
.nav button .nav-badge + .nav-badge { margin-left: 4px; }
.nav-badge.warn { background: var(--warn); }
@media (max-width: 700px) { .hub-tabs-in { padding-inline: 12px; } .hub-tabs button { padding-inline: 10px; } }

.nav button.locked { opacity: .6; }
.nav-tier { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }

/* Tổng quan: luồng vận hành theo phòng ban (trái → phải), xuống hàng trên màn hẹp */
.flow-row { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.flow-step { position: relative; min-width: 0; }
.flow-step:not(:last-child)::after { content: '→'; position: absolute; right: -15px; top: 18px; color: var(--muted); font-size: 14px; }
.flow-step > button { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.flow-step > button:hover, .flow-step > button:focus-visible { border-color: var(--accent); }
.flow-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 600 11px var(--body); margin-bottom: 2px; }
.flow-step dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.flow-step dl div { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.flow-step dt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-step dd { margin: 0; color: var(--muted); }
.flow-step dl div.warn dt { color: var(--warn); } .flow-step dl div.bad dt { color: var(--bad); }
.flow { container-type: inline-size; }
@container (max-width: 1150px) { .flow-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-step:nth-child(3)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -17px; } }
@container (max-width: 560px) { .flow-row { grid-template-columns: 1fr 1fr; } .flow-step::after { display: none; } }

/* Thanh bên chế độ Chủ shop: phòng ban là mục chính (số thứ tự theo luồng), trang con thụt vào; chỉ phòng đang làm việc mở ra */
.nav button.nav-group { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 2px; padding: 7px 10px; border-radius: 7px; font: 600 14px var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.nav button.nav-group::before { content: none; }
.nav button.nav-group > i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font: 600 11px var(--body); font-style: normal; color: var(--muted); flex: none; }
.nav button.nav-group:hover { background: var(--bg); }
.nav button.nav-group.on { color: var(--accent); }
.nav button.nav-group.on > i { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nav button.nav-group[data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 600 11px/18px var(--body); text-align: center; }
body.mode-shop .nav button[data-mode="shop"]:not(.nav-group):not([data-view="shop-home"]) { padding-left: 40px; font-size: 13.5px; }
body.mode-shop .nav button[data-mode="shop"]:not(.nav-group):not([data-view="shop-home"]) > i { display: none; }
.shell.side-mini .nav button.nav-group { justify-content: center; padding: 8px 0; font-size: 0; }
.shell.side-mini .nav button.nav-group::after { display: none; }

/* Thanh phòng ban đầu trang: tên + mô tả phòng ban, các trang dạng tab */
.dept-tabs .hub-tabs-in { flex-direction: column; align-items: stretch; gap: 4px; padding-top: 10px; }
.dept-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dept-name b { font: 700 15px var(--display); }
.dept-n { align-self: center; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 600 12px var(--body); }
.dept-tabs-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.dept-tabs-row .nav-badge { margin-left: 4px; vertical-align: 1px; }

/* Bán tại quầy toàn màn hình: ẩn thanh bên, thanh trên cùng, trợ lý AI */
body.pos-full .side, body.pos-full .vault, body.pos-full .bar, body.pos-full #view-chat, body.pos-full .composer, body.pos-full .dock-fab { display: none !important; }
body.pos-full .shell, body.pos-full .shell.no-vault { grid-template-columns: minmax(0, 1fr) !important; }
body.pos-full .main { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
body.pos-full .main > section.view { grid-row: 1 !important; grid-column: 1 !important; }
body.pos-full .pos-page { max-width: none; }
body.pos-full .pos-grid { max-height: calc(100vh - 150px); }
body.mode-shop .shell.side-mini .nav button[data-mode="shop"]:not(.nav-group) { padding-left: 0; font-size: 0; }
body.mode-shop .shell.side-mini .nav button[data-mode="shop"]:not(.nav-group) > i { display: inline; }
.nav button.nav-folded { display: none !important; }
body.pos-full .hub-tabs { display: none !important; }

/* Báo cáo / Phân tích hàng hoá toàn màn hình (trình chiếu, họp): ẩn thanh bên, thanh trên cùng, trợ lý; giữ tab Báo cáo · Phân tích */
body.page-full .side, body.page-full .vault, body.page-full .bar, body.page-full #view-chat, body.page-full .composer, body.page-full .dock-fab { display: none !important; }
body.page-full .shell, body.page-full .shell.no-vault { grid-template-columns: minmax(0, 1fr) !important; }
body.page-full .main { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
body.page-full .main > section.view { grid-row: 1 !important; grid-column: 1 !important; }
body.page-full .rp-nav { top: 56px; }
/* Thanh tab: chỉ cuộn ngang khi quá dài (vuốt / Shift + lăn chuột), không hiện thanh cuộn dọc / ngang thừa */
.hub-tabs-in, .dept-tabs-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.hub-tabs-in::-webkit-scrollbar, .dept-tabs-row::-webkit-scrollbar { display: none; }
.dept-tabs .hub-tabs-in { overflow: visible; }
.dept-tabs-row { align-items: flex-end; }
.dept-tabs-row .hub-act { margin-left: auto; }

/* Nhân viên AI (chế độ Chủ shop): cách đội AI vận hành + thẻ từng nhân viên */
.ai-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: aist; }
.ai-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); counter-increment: aist; font-size: 13px; }
.ai-steps li b::before { content: counter(aist); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; }
.ai-steps li span { color: var(--muted); }
.ai-steps li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 14px; color: var(--muted); }
.ai-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.ai-stats b { color: var(--ink); font-size: 15px; }
.ai-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ai-card { margin: 0; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--ai); }
.ai-card header { display: flex; gap: 14px; align-items: center; }
.ai-ava { width: 64px; height: 64px; flex: none; }
.ai-card header div { display: flex; flex-direction: column; align-items: flex-start; }
.ai-name { font: 700 17px var(--display); }
.ai-role { color: var(--muted); font-size: 13px; }
.ai-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ai-jobs li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: start; }
.ai-jobs .pill { justify-self: start; white-space: nowrap; }
.ai-asks { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.ai-asks .btn { height: auto; min-height: 32px; padding: 6px 10px; text-align: left; white-space: normal; }
.ai-how { container-type: inline-size; }
@container (max-width: 760px) { .ai-steps { grid-template-columns: 1fr 1fr; } .ai-steps li::after { display: none; } }

/* Ảnh sản phẩm: ảnh thật hoặc ô biểu tượng theo loại hàng (màu theo mã) */
.pic { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 8px; background: hsl(var(--ph, 210) 60% 92%); vertical-align: middle; }
:root[data-theme="dark"] .pic.ph { background: hsl(var(--ph, 210) 30% 22%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pic.ph { background: hsl(var(--ph, 210) 30% 22%); } }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.pic.sm { width: 30px; height: 30px; font-size: 16px; margin-right: 8px; border-radius: 6px; }
.pic.lg { width: 96px; height: 96px; font-size: 44px; margin-right: 14px; border-radius: 12px; border: 1px solid var(--line); }
.pos-grid.with-img { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pos-tile .pic.tile { width: calc(100% + 20px); margin: -10px -10px 8px; aspect-ratio: 4 / 3; border-radius: 8px 8px 0 0; font-size: 42px; }
.pos-tile .pic.tile img { object-position: 50% 35%; } /* ảnh vuông trong ô 4:3: giữ phần trên (nắp, vòi bơm) */
.pos-tile:hover .pic.tile img { transform: scale(1.04); transition: transform .2s; }
.pos-imgsw { flex: none; white-space: nowrap; }

/* Nhân viên AI: bấm ảnh / tên để sửa; tab Tự động làm · Đã làm hôm nay */
.ai-edit-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; flex: none; }
.ai-edit-btn img.ai-ava { object-fit: cover; border-radius: 18px; }
.ai-pen { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--raise); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.ai-edit-btn:hover .ai-pen, .ai-edit-btn:focus-visible .ai-pen { opacity: 1; }
.link-plain { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); text-align: left; }
.link-plain:hover { color: var(--accent); }
.ai-prev .ai-ava { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; }
.ai-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.ai-tabs button { border: 0; background: none; padding: 7px 10px 8px; font: 600 12px var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ai-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.ai-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0; }
.ai-done li > div { line-height: 1.45; }
.ai-jobs li.muted { display: block; padding: 6px 0; }

/* Tuỳ chọn cửa hàng: dòng công tắc */
.opt-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.opt-row:last-of-type { border-bottom: 0; }
.opt-row > span:first-child { display: flex; flex-direction: column; gap: 2px; max-width: 70ch; }
.opt-row .switch { flex: none; }

/* Thanh bên "doanh nghiệp 1 người": thẻ đầu menu (bạn + đội AI) và nhân viên AI phụ trách từng phòng ban */
.nav-org { display: flex; flex-direction: column; gap: 6px; margin: 8px 10px 10px; flex: none; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--raise)), var(--raise)); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.nav-org:hover { border-color: var(--accent); }
.nav-org:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.org-kicker { font: 700 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.org-team { display: flex; align-items: center; gap: 4px; }
.org-me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 10.5px var(--body); flex: none; box-shadow: 0 0 0 2px var(--raise); }
.org-plus { color: var(--muted); font-weight: 700; }
.org-avas { display: flex; }
.org-avas .ai-ava { width: 26px; height: 26px; border-radius: 8px; margin-left: -6px; box-shadow: 0 0 0 2px var(--raise); background: var(--raise); object-fit: cover; }
.org-avas .ai-ava:first-child { margin-left: 0; }
.org-line { font-size: 12px; line-height: 1.4; color: var(--muted); }
.org-line b { color: var(--ink); font-weight: 600; }
.org-stat { font-size: 11.5px; color: var(--muted); padding-top: 6px; border-top: 1px dashed var(--line); }
.org-stat b { color: var(--ink); }
.org-stat .warn-text { color: var(--warn, #b7791f); }
/* Phòng ban: ảnh nhân viên AI (số thứ tự ở góc), tên phòng + "… · AI phụ trách" */
.nav button.nav-group.nav-dept { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 6px 10px; }
.nav button.nav-group.nav-dept > i { grid-row: 1 / 3; grid-column: 1; position: relative; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; overflow: visible; }
.nav button.nav-group.nav-dept > i .ai-ava { width: 30px; height: 30px; border-radius: 9px; display: block; object-fit: cover; }
.nav button.nav-group.nav-dept > i em { position: absolute; left: -5px; top: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--raise); border: 1px solid var(--line);
  font: 700 9.5px/14px var(--body); font-style: normal; color: var(--muted); text-align: center; }
.nav button.nav-group.nav-dept.on > i { background: none; }
.nav button.nav-group.nav-dept.on > i em { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nav button.nav-group.nav-dept.on > i .ai-ava { box-shadow: 0 0 0 2px var(--accent); }
.nav-who { grid-column: 2; grid-row: 2; font: 400 11.5px var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button.nav-group.nav-dept::after { grid-column: 3; grid-row: 1 / 3; }
.shell.side-mini .nav-org { display: none; }
.shell.side-mini .nav button.nav-group.nav-dept { display: flex; justify-content: center; }
.shell.side-mini .nav-who { display: none; }
@media (max-width: 760px) { .nav-org, .nav-who { display: none; } .nav button.nav-group.nav-dept { display: flex; } }
@media (max-height: 820px) { .nav-org { gap: 4px; padding: 8px 10px; margin-top: 6px; } .nav-org .org-line { display: none; } .org-stat { padding-top: 4px; } }

/* Thẻ "Doanh nghiệp 1 người" co lại khi menu xổ dài (shop.js fitOrg): một dòng, rồi ẩn hẳn nếu vẫn thiếu chỗ */
.org-short { display: none; }
.nav-org.org-mini { flex-direction: row; align-items: center; gap: 8px; padding: 7px 10px; }
.nav-org.org-mini .org-kicker, .nav-org.org-mini .org-line, .nav-org.org-mini .org-stat, .nav-org.org-mini .org-plus { display: none; }
.nav-org.org-mini .org-me { width: 24px; height: 24px; font-size: 8px; }
.nav-org.org-mini .org-avas .ai-ava { width: 20px; height: 20px; border-radius: 6px; margin-left: -7px; }
.nav-org.org-mini .org-short { display: inline; margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nav-org.org-mini .org-short b { color: var(--ink); }
.nav-org.org-off { display: none; }
/* Menu shop: không hiện thanh cuộn; còn mục bên dưới thì mờ dần ở mép dưới */
body.mode-shop .nav { scrollbar-width: none; }
body.mode-shop .nav::-webkit-scrollbar { display: none; }
body.mode-shop .nav.nav-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }

/* Thương hiệu cửa hàng ở góc trên thanh bên (chế độ Chủ shop) */
.logo .logo-shop { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; object-fit: cover; background: var(--raise); box-shadow: 0 0 0 1px var(--line); }
.brand-ini { display: grid; place-items: center; background: var(--bm); color: #fff; font: 700 14px var(--display); letter-spacing: .02em; box-shadow: none; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-txt b { font: 700 15.5px var(--display); letter-spacing: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-txt small { font: 600 9.5px var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo .logo-shop span { font: inherit; letter-spacing: normal; color: inherit; }
.logo .logo-shop .brand-ini { color: #fff; font: 700 14px var(--display); }
.logo .logo-shop small { color: var(--accent); }
.shell.side-mini .logo .logo-shop { display: flex; flex: none; }
.shell.side-mini .logo .logo-shop .brand-ini { display: grid; }
.shell.side-mini .logo .logo-shop .brand-txt { display: none; }
body.mode-dev .logo .logo-shop { display: none; }
.side-foot b { font-weight: 600; color: var(--ink); }
/* Ô logo ở Thông tin cửa hàng */
.pc-logo { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--c1); color: #fff; font: 700 26px var(--display); box-shadow: 0 0 0 1px var(--line); }
.pc-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
body.mode-shop .side-foot { font: 11px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Gói của tôi */
.note-card { border-left: 4px solid var(--accent); }
.plan-now { display: grid; gap: 14px; }
.plan-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-big b { font: 700 30px var(--display); }
.plan-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.plan-meta div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.plan-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-col { padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.plan-col.cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-col b { font: 700 18px var(--display); }
.plan-col ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
@media (max-width: 760px) { .plan-cols { grid-template-columns: 1fr; } }

/* Linh vật kiến: ảnh nhân viên AI (ảnh thật thay cho SVG), ảnh minh hoạ đội AI */
img.ai-ava { border-radius: 16px; object-fit: cover; background: var(--raise); }
.ai-how { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 20px; align-items: start; }
.ai-how > :not(.ai-how-img) { grid-column: 2; }
.ai-how-img { grid-column: 1; grid-row: 1 / span 3; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
@media (max-width: 900px) { .ai-how { grid-template-columns: 1fr; } .ai-how > * { grid-column: 1 !important; } .ai-how-img { grid-row: auto; margin-bottom: 12px; } }

/* Khung trợ lý (Chủ shop): linh vật kiến ở màn hình trống và trạng thái đang làm / lỗi */
.empty .ant-hero { display: block; width: 112px; height: 112px; margin: 0 auto 4px; object-fit: contain; }
.ant-state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ant-state img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ant-state:not(.err) img { animation: antbob 1.6s ease-in-out infinite; }
.ant-state.err span { color: var(--bad, #e03131); }
@keyframes antbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ant-state img { animation: none !important; } }

/* ---------- Marketing: lịch nội dung, chiến dịch · Hiệu suất (biz.js) */
.mk-day h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mk-item { margin-bottom: 8px; }
.mk-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; padding: 10px 12px; margin: 8px 0; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); max-height: 420px; overflow: auto; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 400 !important; margin-right: 10px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kpi-card { display: grid; gap: 8px; margin: 0; }
.kpi-val b { font: 700 26px var(--display); margin-right: 6px; }
.kpi-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; min-width: 80px; }
.kpi-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.kpi-bar i.ok { background: var(--ok); }
td .kpi-bar { display: inline-block; width: 90px; vertical-align: middle; margin-right: 6px; }
.k-set input { width: 140px; }
.ok-text { color: var(--ok); font-weight: 600; }
.ind-h { margin: 18px 0 8px; font-size: 14px; }
.ind-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
.ind-cards .mode-card:disabled { opacity: .5; cursor: not-allowed; }
/* Tổng quan ngành văn phòng (biz.js) */
.bh-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bh-dept { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise, var(--panel)); cursor: pointer; font: inherit; color: inherit; }
.bh-dept:hover { border-color: var(--accent); }
.bh-dept img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.bh-dept b { display: block; font-size: 14px; }
.bh-dept small { display: block; color: var(--muted); font-size: 12px; }
.bh-dept em { display: block; font-style: normal; font-size: 13px; margin-top: 4px; }
.bh-todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bh-todo li { cursor: pointer; font-size: 14px; }
.bh-todo li:hover { color: var(--accent); }
.bh-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bh-kpis b { display: block; font: 700 18px var(--display); margin: 2px 0 6px; }
.bh-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.bh-charts.wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.bh-charts .card-form { margin: 0; min-width: 0; }
@media (max-width: 900px) { .bh-charts, .bh-charts.wide { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { .bh-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Hiệu quả marketing */
.mk-metrics { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--muted); }
.mk-metrics b { color: var(--ink); }
.pf-funnel { display: grid; gap: 10px; }
.pf-funnel div { display: grid; grid-template-columns: 90px 1fr 80px 110px; align-items: center; gap: 10px; font-size: 13.5px; }
.pf-funnel i { display: block; height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--c2, #eb6834))); }
.pf-funnel b { text-align: right; }
.pf-funnel em { font-style: normal; color: var(--muted); font-size: 12px; }
.warn-box { border-color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 8%, var(--panel)) !important; }
/* Khách tiềm năng, kịch bản tự động */
.pipe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.pipe button { display: grid; justify-items: start; gap: 2px; min-width: 120px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: inherit; }
.pipe button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.pipe b { font: 700 22px var(--display); }
.pipe span { font-size: 12.5px; color: var(--muted); }
.pipe i { font-style: normal; color: var(--muted); }
.fm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.fl-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.fl-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fl-step { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.bh-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
.bh-money { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line); background: var(--panel); font-size: 14px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.bh-money > b { color: var(--ink); } .bh-money span b { color: var(--ink); } .bh-money em { margin-left: auto; font-style: normal; color: var(--accent); font-weight: 600; }
.sv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sv-stars { color: #f5a623; letter-spacing: 1px; }
.sv-stars.bad-text { color: var(--bad); }
.mono-ta { font: 13px/1.55 var(--mono) !important; }
.kb-log { display: grid; gap: 14px; margin-top: 14px; }
.kb-q { font-weight: 600; margin: 0 0 6px; }
.clinic-arch { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.clinic-tooth { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; background: transparent; color: inherit; cursor: pointer; }
.clinic-tooth.du_kien { background: #f3d48a; color: #3a2a00; }
.clinic-tooth.da_lam { background: var(--accent); color: #fff; }
.clinic-tooth.ghi_nhan { box-shadow: inset 0 0 0 2px var(--accent); }
.clinic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.clinic-tile { text-align: left; min-height: 76px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; }
button.clinic-tile { cursor: pointer; }
.clinic-tile b { display: block; font-size: 18px; }
.clinic-tile span, .clinic-tile small { display: block; color: var(--muted); font-size: 12.5px; }
.clinic-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clinic-scroll table { min-width: 640px; }
.clinic-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clinic-actions .btn, .clinic-tabs .btn { min-height: 44px; }
.clinic-late { color: var(--bad); font-weight: 700; }
.clinic-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.clinic-suggest { border: 1px solid var(--line); border-radius: 8px; max-height: 200px; overflow: auto; margin-top: 4px; }
.clinic-suggest button { display: block; width: 100%; text-align: left; background: transparent; color: inherit; border: 0; border-top: 1px solid var(--line); padding: 8px 10px; min-height: 44px; cursor: pointer; font: inherit; }
.stay-home-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.stay-home-grid .list-row { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); }
.stay-home-grid .list-row:last-child { border-bottom:0; }
@media(max-width:800px) { .stay-home-grid { grid-template-columns:1fr; } .stay-home-grid .list-row { grid-template-columns:60px minmax(0,1fr); } .stay-home-grid .list-row .pill { grid-column:2; justify-self:start; } }

/* Popup dùng thử: một form riêng, tránh khoảng cách grid của hộp thoại chung. */
body:has(.modal:not([hidden]) .trial-onboarding) { overflow:hidden; }
.modal-box:has(.trial-onboarding) { width:min(880px,100%);padding:0;display:block; }
.trial-onboarding { color:var(--ink); }
.trial-onboarding p,.trial-onboarding h2 { margin:0; }
.trial-hero { display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:24px;padding:26px 28px;background:linear-gradient(120deg,var(--panel),var(--bg));border-bottom:1px solid var(--line); }
.trial-eyebrow { font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--accent); }
.trial-hero h2 { font:700 26px var(--display);margin:7px 0 10px; }
.trial-hero p { font-size:14px;line-height:1.6;color:var(--muted); }
.trial-hero .trial-industry { display:inline-flex;border:1px solid var(--line);padding:4px 9px;border-radius:6px;font-size:12px;margin-bottom:10px;color:var(--ink); }
.trial-hero img { width:150px;height:110px;object-fit:contain; }
.trial-form { display:block;padding:22px 28px 0; }
.trial-form fieldset { border:0;padding:0;margin:0;min-width:0; }
.trial-form legend { padding:0;margin-bottom:12px;font-weight:700; }
.trial-area-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.trial-area { position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;padding:12px 10px;border:1px solid var(--line);border-radius:12px;min-width:0;background:var(--panel); }
.trial-area:hover { border-color:var(--accent); }
.trial-area:has(input:checked) { border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
.modal-box .trial-area input[type=radio] { position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0; }
.trial-area:has(input:focus-visible) { outline:3px solid var(--accent);outline-offset:2px; }
.trial-area img { width:52px;height:52px;flex:none;object-fit:contain; }
.trial-area b { display:block;font-size:14px;line-height:1.4; }
.trial-area small { display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:3px; }
.trial-area i { display:none;position:absolute;right:6px;top:4px;color:var(--accent);font-style:normal; }
.trial-area:has(input:checked) i { display:block; }
.trial-preview { border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:14px 16px;margin-top:16px; }
.trial-preview-title { font-size:12px;font-weight:700; }
.trial-preview p { font-size:13px;line-height:1.5;margin-top:6px;color:var(--muted); }
.trial-includes { display:flex;flex-wrap:wrap;gap:6px;margin-top:10px; }
.trial-includes span { font-size:11px;padding:3px 7px;background:var(--panel);border:1px solid var(--line);border-radius:5px; }
.trial-form .trial-note { font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0; }
.trial-form #trial-error:empty { display:none; }
.trial-form #trial-error { margin:12px 0;font-size:13px; }
.trial-actions { display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--line);background:var(--panel); }
.trial-actions .btn { min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:normal; }
@media(max-width:680px) { .trial-area-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .trial-hero { grid-template-columns:minmax(0,1fr) 85px;gap:12px;padding:18px; } .trial-hero img { width:85px;height:85px; } .trial-hero h2 { font-size:22px; } .trial-form { padding:16px 18px 0; } }
@media(max-width:400px) { .trial-area { padding:10px 8px;gap:6px; } .trial-area img { width:36px;height:36px; } .trial-area b { font-size:13px; } .trial-hero { grid-template-columns:1fr; } .trial-hero img { display:none; } .trial-actions .primary { flex:1; } }

/* Phản hồi Pilot: tab riêng, lịch sử và câu trả lời có nhịp đọc rõ ràng. */
#pilot-feedback-btn { position: relative; display: inline-grid; place-items: center; }
#pilot-feedback-btn[hidden] { display:none; }
.pilot-feedback { display:grid; gap:20px; min-width:0; }
.pilot-feedback p { margin:0; }
.pilot-feedback header > div { display:grid; gap:6px; }
.feedback-history { display:grid; gap:14px; max-height:60vh; overflow-y:auto; }
.feedback-history[hidden] { display:none; }
.feedback-message { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.feedback-reply { display:grid; gap:8px; padding:14px; border-left:3px solid var(--accent); background:var(--bg); border-radius:8px; }
.feedback-empty { display:grid; gap:10px; padding:28px 12px; text-align:center; }

/* Không để nút cuối form nằm sau khung cuộn. */
.document-workspace { display:flex; flex-direction:column; height:100%; min-height:0; }
.document-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
.document-header h2,.document-header p { margin:0; }
.document-header p { margin-top:6px; }
.document-library { display:flex; align-items:end; gap:12px; padding:14px 24px; background:var(--raise); }
.document-library .field { flex:1; }
.document-tools { display:grid; gap:12px; padding:0 24px 12px; border-bottom:1px solid var(--line); }
.document-tools select { width:auto; max-width:100%; }
.document-body { flex:1; min-height:0; overflow:auto; background:var(--bg); padding:24px; }
.document-body [hidden],.document-tools [hidden] { display:none; }
.document-paper { max-width:794px; min-height:520px; margin:0 auto; padding:36px 48px; background:#fff; color:#17202a; border:1px solid #d8dde4; box-shadow:0 4px 16px #0001; font:16px/1.65 'Times New Roman',serif; overflow-wrap:anywhere; }
.document-paper p { margin:6px 0; white-space:pre-wrap; }
.document-paper h3 { margin:16px 0 8px; font:bold 18px/1.5 'Times New Roman',serif; }
.document-center { text-align:center; font-weight:bold; }
.document-space { height:14px; }
.document-paper mark { background:#edf2ff; color:#304aa0; border-radius:3px; padding:1px 3px; }
.document-paper table { border-collapse:collapse; width:100%; font-size:14px; }
.document-paper td,.document-paper th { border:1px solid #b8bec7; padding:7px; }
.modal-box textarea.document-source { display:block; max-width:794px; margin:auto; min-height:520px; background:var(--raise); font:16px/1.65 'Times New Roman',serif; padding:28px; }
.document-footer { flex-shrink:0; display:grid; gap:10px; padding:14px 24px; border-top:1px solid var(--line); background:var(--raise); }
.document-footer p { margin:0; }
@media(max-width:600px){
 .modal-box.xl:has(.document-workspace) { height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); overflow:hidden; }
 .document-header,.document-library,.document-tools,.document-footer { padding:12px 14px; }
 .document-library { flex-wrap:wrap; align-items:start; }
 .document-library .field { flex-basis:100%; }
 .document-body { padding:12px; }
 .document-paper { padding:24px 18px; font-size:15px; }
 .document-tools .row { gap:6px; }
 .document-footer .small { font-size:11px; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px){ .modal-box.xl:has(.document-workspace) { height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); overflow:hidden; } }

@media(max-width:900px){
 body.mode-shop .bar-actions { max-width:100%; overflow-x:auto; padding:8px 0 4px; margin-block:-8px -4px; }
 body.mode-shop .bar-actions > button, body.mode-shop .bar-actions > .bell-wrap { flex-shrink:0; white-space:nowrap; }
}

.document-signatures { display:flex; justify-content:space-between; gap:24px; }

@media(max-width:600px){
 .document-tools #tp-toolbar { flex-wrap:nowrap; overflow-x:auto; min-height:40px; }
 .document-tools #tp-toolbar > * { flex-shrink:0; white-space:nowrap; }
 .document-tools #tp-toolbar select { max-width:180px; }
}