:root {
  --bg: #f5f6f8; --surface: #fff; --text: #1d2330; --muted: #5d6676; --line: #dfe3ea;
  --accent: #1f5fbf; --accent-text: #fff; --ok-bg: #e5f4ea; --ok: #1d6b38; --warn-bg: #fff4dc; --warn: #7a5200;
  --bad-bg: #fde8e8; --bad: #a12020; --tag: #eef1f6;
  /* UI0: màu nút đặc theo nghĩa, dùng chung mọi màn. */
  --ok-solid: #15803d; --ok-solid-text: #fff; --bad-solid: #b91c1c; --bad-solid-text: #fff;
  --info-solid: #1d4ed8; --info-solid-text: #fff; --warn-solid: #92400e; --warn-solid-text: #fff;
  color-scheme: light;
}
/* Tối theo máy, trừ khi người dùng chọn Sáng; hoặc người dùng chọn Tối. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171c; --surface: #1d2128; --text: #e7eaf0; --muted: #9aa3b2; --line: #2f3540;
    --accent: #5b9bff; --accent-text: #0b1220; --ok-bg: #173323; --ok: #8fdcaa; --warn-bg: #3a2e12; --warn: #f2cc7a;
    --bad-bg: #3d1a1a; --bad: #ff9d9d; --tag: #2a303a;
    --ok-solid: #22c55e; --ok-solid-text: #03190a; --bad-solid: #f87171; --bad-solid-text: #2a0606;
    --info-solid: #60a5fa; --info-solid-text: #041327; --warn-solid: #fbbf24; --warn-solid-text: #2a1b00;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #14171c; --surface: #1d2128; --text: #e7eaf0; --muted: #9aa3b2; --line: #2f3540;
    --accent: #5b9bff; --accent-text: #0b1220; --ok-bg: #173323; --ok: #8fdcaa; --warn-bg: #3a2e12; --warn: #f2cc7a;
    --bad-bg: #3d1a1a; --bad: #ff9d9d; --tag: #2a303a;
    --ok-solid: #22c55e; --ok-solid-text: #03190a; --bad-solid: #f87171; --bad-solid-text: #2a0606;
    --info-solid: #60a5fa; --info-solid-text: #041327; --warn-solid: #fbbf24; --warn-solid-text: #2a1b00;
    color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.3rem; margin: 0; }

.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.top nav { display: flex; gap: 4px; flex: 1; }
.top nav a { white-space: nowrap; text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.top nav a.on { color: var(--text); background: var(--tag); font-weight: 600; }
.who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin: 0; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.login { max-width: 360px; margin: 10vh auto 0; display: grid; gap: 12px; }

button, .btn { font: inherit; border-radius: 8px; padding: 10px 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
button.link { border: 0; background: none; padding: 4px 0; color: var(--accent); justify-self: start; }

input, select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { background: var(--bg); }
.form { display: grid; gap: 12px; }
.form label, .login label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.form label input, .form label select, .form label textarea, .login input { color: var(--text); font-size: 1rem; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
label.check input { width: auto; }
.label { font-size: .9rem; color: var(--muted); }
.field { display: grid; gap: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.seg { display: flex; gap: 8px; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; }
.seg span { display: block; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--text); }
.seg input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.contact { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 8px; }
.credit, .confirm { border-top: 1px solid var(--line); padding-top: 12px; }
.confirm { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.confirm p { margin: 0; }

.search { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.search input[name=q] { flex: 1; }
.search label.check { white-space: nowrap; font-size: .9rem; }
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; padding: 10px 14px; text-decoration: none; color: var(--text); }
.list a:hover { background: var(--bg); }
.code { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; grid-row: span 2; padding-top: 2px; }
.meta { color: var(--muted); font-size: .9rem; }
.tag { display: inline-block; background: var(--tag); border-radius: 6px; padding: 0 6px; margin-left: 4px; font-size: .8rem; }

.alert { padding: 10px 12px; border-radius: 8px; margin: 0 0 12px; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.bad { background: var(--bad-bg); color: var(--bad); }
.hint, .empty { color: var(--muted); font-size: .9rem; margin: 4px 0; }
.empty { padding: 24px; text-align: center; }

@media (max-width: 600px) {
  main { padding: 12px; }
  .row2, .contact { grid-template-columns: 1fr; }
  .contact { border-left: 3px solid var(--line); padding-left: 8px; }
  .list a { grid-template-columns: 1fr; }
  .code { grid-row: auto; }
  .who span { display: none; }
  .top { gap: 8px; padding: 8px 12px; }
  .top nav a { padding: 8px; }
  .search { flex-wrap: wrap; }
}

/* Kho: nút chọn và dòng hàng co theo màn hình, không dùng bảng cuộn ngang. */
.top nav { flex-wrap: wrap; min-width: 0; }
.stock-seg { flex-wrap: wrap; }
.stock-seg label { flex: 0 1 auto; min-width: 56px; max-width: 100%; }
.stock-seg span { min-height: 44px; overflow-wrap: anywhere; }
.stock-line, .stock-balance, .stock-ledger-row { min-width: 0; overflow-wrap: anywhere; }
.stock-line { display: grid; gap: 8px; }
.stock-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-actions button { flex: 1; min-height: 48px; }
.stock-cancel, .stock-list { margin-top: 16px; }
.product-options { display: grid; gap: 4px; }
.product-options button { text-align: left; min-height: 44px; overflow-wrap: anywhere; }
.stock-balance { display: grid; gap: 4px; text-decoration: none; color: var(--text); }
dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 0; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .top nav { flex-basis: 100%; }
  .card { padding: 12px; }
  main input, main select, main textarea { min-width: 0; max-width: 100%; }
}


/* Bảng lỗi CSV vừa màn hình điện thoại, kể cả mã hoặc lời lỗi dài. */
.opening-errors { margin-bottom: 16px; }
.opening-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); }
.opening-table caption { text-align: left; font-weight: 600; padding: 8px 0; }
.opening-table th, .opening-table td { text-align: left; vertical-align: top; padding: 8px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.opening-table th:first-child { width: 20%; }
.opening-table th:nth-child(2) { width: 30%; }

.device-sites { margin-top: 20px; }
.device-sites h2, .device-sites h3 { margin: 4px 0; overflow-wrap: anywhere; }
.device-options { display: grid; gap: 4px; }
.device-options button { text-align: left; min-height: 44px; overflow-wrap: anywhere; }
.device-list a, [data-device-form] { overflow-wrap: anywhere; }
[data-picker] { min-width: 0; }

.device-header h1 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Dịch vụ: các nhóm nút tự xuống dòng ở màn hình 360px. */
.service-filters { margin-bottom: 16px; }
.service-action { margin-top: 16px; }
.service-action h2, .service-summary h2 { font-size: 1.1rem; margin: 0 0 8px; }
.service-summary, .service-action, .service-list li { min-width: 0; overflow-wrap: anywhere; }
.service-overdue { background: var(--bad-bg); color: var(--bad); }
.service-overdue a, .service-overdue .meta, .service-overdue .code { color: var(--bad); }
.service-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.service-history { padding-left: 22px; }
.service-history li { padding: 8px 0; }
.service-action button, .service-filters button, .service-filters .seg span { min-height: 44px; }
.service-picker { display: grid; gap: 6px; min-width: 0; }
.service-picker a.btn { text-align: center; min-height: 44px; }

.photo-upload-grid, .photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.photo-upload-grid form, .photo-item { min-width: 0; }
.photo-capture { min-height: 64px; display: grid; place-items: center; font-weight: 600; background: var(--tag); }
.photo-upload-grid input[type=file] { padding: 6px; font-size: .85rem; }
.photo-item img { display: block; width: 100%; height: 160px; object-fit: contain; background: var(--bg); border-radius: 8px; }
.photo-name { display: block; overflow-wrap: anywhere; }
.photo-item summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.acceptance-report { background: white; color: #111; padding: 24px; overflow-wrap: anywhere; }
.acceptance-report header { text-align: center; }
.acceptance-report h2 { font-size: 1.05rem; }
.report-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.report-photos figure { margin: 0; break-inside: avoid; }
.report-photos img { display: block; width: 100%; max-height: 90mm; object-fit: contain; }
.report-photos figcaption { font-size: .85rem; }
.report-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; gap: 12px; min-height: 45mm; break-inside: avoid; }
@page { size: A4; margin: 15mm; }
@media print {
  body { background: white; color: black; }
  .top, .report-tools, body > script { display: none !important; }
  main { padding: 0; margin: 0; max-width: none; }
  .acceptance-report { padding: 0; font-size: 11pt; }
  .acceptance-report h1 { font-size: 16pt; }
  .acceptance-report dt { color: #333; }
}
@media (max-width: 600px) {
  .acceptance-report { padding: 12px; }
  .report-photos { grid-template-columns: 1fr; }
}

.charge-line { display: grid; gap: 8px; min-width: 0; margin: 12px 0; overflow-wrap: anywhere; }
.charge-line .bar { margin-bottom: 0; }
.charge-preview, .charge-saved { margin: 12px 0; padding: 12px; background: var(--bg); border-radius: 8px; }
.charge-receivables a { overflow-wrap: anywhere; }
[data-charge-form] button { min-height: 44px; }

.dispatch-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dispatch-tiles a { display: grid; gap: 8px; text-decoration: none; color: var(--text); text-align: center; padding: 12px 6px; overflow-wrap: anywhere; }
.dispatch-tiles strong { font-size: 1.6rem; }
.dispatch-tiles a.on { border-color: var(--accent); }
.dispatch-dates { margin-bottom: 12px; }
.dispatch-table { border-collapse: collapse; width: 100%; margin-top: 16px; background: var(--surface); font-size: .9rem; }
.dispatch-table caption { text-align: left; font-weight: 700; font-size: 1.1rem; padding: 8px 0; }
.dispatch-table th, .dispatch-table td { padding: 10px 8px; border: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .dispatch-table, .dispatch-table tbody, .dispatch-table tr, .dispatch-table caption { display: block; }
  .dispatch-table thead { display: none; }
  .dispatch-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .dispatch-table td, .dispatch-table tbody th { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 10px; }
  .dispatch-table td + td { border-top: 1px solid var(--line); }
  .dispatch-table [data-label]::before { content: attr(data-label); color: var(--muted); }
}

.quote-filters { margin-bottom: 16px; }
.quote-line { display: grid; gap: 8px; min-width: 0; margin: 12px 0; overflow-wrap: anywhere; }
.quote-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.quote-actions form { flex: 1; }
.quote-actions button { width: 100%; min-height: 44px; }
.quote-list a { overflow-wrap: anywhere; }
.quote-expired { color: var(--bad); background: var(--bad-bg); }
.quote-print-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .85rem; }
.quote-print-table th, .quote-print-table td { border: 1px solid #777; padding: 6px 4px; vertical-align: top; overflow-wrap: anywhere; }
.quote-print-table th:nth-child(1) { width: 6%; }
.quote-print-table th:nth-child(2) { width: 30%; }
.quote-print-table th:nth-child(3), .quote-print-table th:nth-child(4), .quote-print-table th:nth-child(6) { width: 9%; }
.quote-print-table th:nth-child(5) { width: 17%; }
.quote-print-table th:nth-child(7) { width: 20%; }
@media screen and (max-width:600px) {
  .quote-print-table, .quote-print-table tbody, .quote-print-table tr { display: block; }
  .quote-print-table thead { display: none; }
  .quote-print-table tr { margin: 12px 0; border: 1px solid #777; }
  .quote-print-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; }
  .quote-print-table td::before { content: attr(data-label); font-weight: 600; }
}
@media print {
  .quote-print { font-size: 10pt; }
  .quote-print header p { margin: 5px 0; }
  .quote-print table { break-inside: auto; }
  .quote-print tr { break-inside: avoid; }
  .quote-print thead { display: table-header-group; }
}

[data-order-goods][hidden] { display: none; }
[data-order-goods] { min-width: 0; }
[data-order-form] textarea { overflow-wrap: anywhere; }

.receipt-grid { display: grid; gap: 12px; margin-top: 16px; }
.receipt-card { min-width: 0; overflow-wrap: anywhere; }
.receipt-card .form, .receipt-card form { margin-top: 12px; }
.receipt-card button { min-height: 44px; }
.receipt-balance { padding: 12px; }
.receipt-balance dd { min-width: 0; overflow-wrap: anywhere; }

.sales-report-section { margin-top: 28px; min-width: 0; }
.sales-report-presets { margin-bottom: 12px; }
.sales-report-presets a { min-height: 44px; }
.sales-report-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .9rem; }
.sales-report-table th, .sales-report-table td { padding: 10px 8px; border: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.sales-report-table tfoot { font-weight: 700; }
.sales-aging-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.sales-aging-cards a { display: grid; gap: 8px; color: var(--text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.sales-aging-cards a.on { border-color: var(--accent); }
@media (max-width:600px) {
  .sales-aging-cards { grid-template-columns: 1fr; }
  .sales-report-table, .sales-report-table tbody, .sales-report-table tfoot, .sales-report-table tr { display: block; }
  .sales-report-table thead { display: none; }
  .sales-report-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .sales-report-table td, .sales-report-table th { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; border: 0; padding: 10px; min-width: 0; }
  .sales-report-table [data-label]::before { content: attr(data-label); color: var(--muted); }
}

.finance-nav { margin: 16px 0; }
.finance-mappings { display: grid; gap: 16px; }
.finance-mappings .card { min-width: 0; overflow-wrap: anywhere; }
.finance-mappings input { min-width: 0; width: 100%; }
.finance-mappings button, .finance-nav .btn { min-height: 44px; }
.finance-unmapped { color: #a61b1b; background: #fff0f0; font-weight: 700; }

.finance-nav, .cash-kind, .cash-funds { flex-wrap: wrap; }
.cash-kind .btn { flex: 1 1 80px; min-height: 44px; }
.cash-funds label { flex: 1 1 120px; min-width: 0; }
.cash-funds span { overflow-wrap: anywhere; min-height: 44px; }
.cash-cancel { margin-top: 24px; }
.cash-signatures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 48px; text-align: center; }
.cash-signatures section { min-height: 160px; }
.cash-signatures h2 { font-size: 1rem; }
.fund-current { padding: 0 12px 12px; overflow-wrap: anywhere; }
@media screen and (max-width:600px) { .cash-signatures { grid-template-columns: 1fr; } }

.closing-grid { display: grid; gap: 16px; margin-top: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.closing-grid .card { min-width: 0; overflow-wrap: anywhere; }
.closing-grid form { margin-top: 12px; }
.closing-grid button, [data-correction-form] button { min-height: 44px; }

/* M5: wide financial tables scroll inside the viewport, including at 360px. */
.purchase-report-scroll{max-width:100%;min-width:0;overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:12px;overscroll-behavior-x:contain}
.purchase-report-table{width:100%;min-width:650px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.purchase-report-table th,.purchase-report-table td{padding:12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.purchase-report-table th:first-child,.purchase-report-table td:first-child{text-align:left;white-space:normal;min-width:170px;max-width:260px;overflow-wrap:anywhere}
.purchase-report-table tfoot{font-weight:700;background:var(--bg)}
.purchase-loss{color:var(--bad);background:var(--bad-bg)}

/* R1: two summary columns at 360px, four on desktop. */
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.overview-tile{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:112px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;overflow-wrap:anywhere;color:var(--text)}
.overview-tile strong{font-size:1.25rem;font-variant-numeric:tabular-nums}.overview-tile small{color:var(--muted)}
.overview-tile:hover,.overview-tile:focus-visible{border-color:var(--accent);outline:2px solid var(--accent)}
.overview-chart{display:block;width:100%;height:auto;color:var(--accent)}.overview-chart text{fill:var(--text);font-size:17px}
.overview-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.overview-days a{display:flex;justify-content:space-between;gap:8px;padding:10px 0;font-variant-numeric:tabular-nums}
@media(min-width:760px){.overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.overview-chart+details summary{cursor:pointer;min-height:44px;padding:12px 0}.overview-days a{min-height:44px;overflow-wrap:anywhere}

@media(max-width:600px){.overview-chart text{font-size:35px}}

/* R2: grouped rule alerts remain readable and tappable at 360px. */
.overview-alerts{margin-top:20px}.alert-group{border-top:1px solid var(--line);margin-top:12px}
.alert-group summary{min-height:48px;padding:12px 0;cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.alert-group ul{list-style:none;margin:0;padding:0}.alert-group li+li{border-top:1px solid var(--line)}
.alert-group li a{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;min-height:48px;padding:12px 0;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.alert-group li a:focus-visible{outline:2px solid var(--accent)}.alert-detail{display:block;margin-top:4px;color:var(--muted)}
.alert-dot{width:10px;height:10px;margin-top:6px;border-radius:50%}.alert-dot-red{background:#b42318}.alert-dot-yellow{background:#c89200}.alert-more{color:var(--muted)}

/* R3: văn bản dài xuống dòng, bảng số dùng được ở 360px. */
.digest-text { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6; }
.digest-numbers { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; }
.digest-numbers dt { overflow-wrap:anywhere; }
.digest-numbers dd { margin:0; text-align:right; font-weight:600; }
@media(max-width:480px) { .digest-numbers { grid-template-columns:minmax(0,1fr); gap:4px; } .digest-numbers dd { text-align:left; margin-bottom:12px; } }

/* U1: một menu từ nav.py, nhóm native details/summary, điều khiển 44px. */
.top { align-items:center; }
.menu-shell { flex:1; min-width:0; }
.menu-shell > .menu-toggle { display:none; }
.top .role-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.role-nav a, .nav-group > summary, .menu-toggle { min-height:44px; padding:10px 12px; border-radius:8px; }
.top .role-nav a { display:block; white-space:normal; overflow-wrap:anywhere; }
.nav-group { position:relative; }
.nav-group > summary { cursor:pointer; list-style-position:inside; }
.nav-group.on > summary, .nav-group[open] > summary, .top .role-nav a.on { color:var(--text); background:var(--tag); font-weight:600; }
.nav-children { position:absolute; top:100%; left:0; z-index:20; min-width:210px; max-width:min(320px,90vw); padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px #0002; }
.top .who { margin-left:auto; flex-shrink:0; }
.top .who .identity { display:flex; flex-direction:column; max-width:230px; overflow-wrap:anywhere; }
.identity small { font-size:.8rem; }
@media(max-width:900px) {
  .top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .brand { grid-column:1; grid-row:1; }
  .top .who { grid-column:2; grid-row:1; max-width:220px; flex-wrap:wrap; justify-content:flex-end; }
  .top .who .identity { display:flex; max-width:170px; text-align:right; }
  .menu-shell { grid-column:1/-1; grid-row:2; }
  .menu-shell > .menu-toggle { display:list-item; cursor:pointer; width:fit-content; border:1px solid var(--line); }
  .top .role-nav { display:flex; flex-direction:column; align-items:stretch; padding:8px 0; }
  .nav-children { position:static; min-width:0; max-width:none; margin-left:12px; box-shadow:none; }
  .nav-group > summary { width:100%; }
}

/* U2: nhóm công việc, một nút chính ở đầu chứng từ. */
.work-group, .next-step { margin:16px 0; }
.work-group h2 { font-size:1.1rem; }
.work-rows { display:grid; gap:8px; margin:12px 0; }
.work-row { display:grid; gap:6px; padding:14px; border:1px solid var(--line); border-radius:8px; color:var(--text); text-decoration:none; overflow-wrap:anywhere; min-width:0; }
.work-row .tag { width:fit-content; }
.work-overdue { border-left:4px solid var(--bad); }
.next-step { display:grid; gap:10px; }
.next-step h2 { margin:0; font-size:1.1rem; }
.next-step .next-primary { width:100%; min-height:48px; text-align:center; }

/* S1: trạng thái giữ hàng; các form thao tác vẫn vừa màn 360px. */
.reservation-short { border-color: #b7791f; background: #fffbeb; }
.order-overdue { border-left: 5px solid #b91c1c; background: #fef2f2; }
.stock-overreserved { color: #b91c1c; font-weight: 700; }
.stock-balance article, #dang-giu article { overflow-wrap: anywhere; }

/* UX1a: màn thợ, giữ nút chính trong tầm tay trên điện thoại. */
.tho-screen { font-size: 16px; display: grid; gap: 16px; padding-bottom: 90px; min-width: 0; }
.tho-screen h2 { font-size: 1.1rem; margin: 0 0 8px; }
.tho-screen .form label, .tho-screen .hint, .tho-screen .meta { font-size: 1rem; }
.tho-screen button, .tho-screen .btn { min-height: 48px; }
.tho-screen .card, .tho-screen form, .tho-screen div { min-width: 0; overflow-wrap: anywhere; }
.tho-jobs, .tho-other-forms { display: grid; gap: 16px; }
.tho-job-next, .tho-screen form > button { width: 100%; text-align: center; }
.tho-one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tho-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tho-contact .btn { flex: 1; text-align: center; }
.tho-progress { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; font-size: 1rem; }
.tho-progress li { padding: 8px 2px; text-align: center; border-bottom: 3px solid var(--line); }
.tho-progress [aria-current] { color: var(--accent); font-weight: 700; border-color: var(--accent); }
.tho-checks { list-style: none; padding: 0; }
.tho-checks li { padding: 8px 0; }
.tho-other > summary { min-height: 48px; cursor: pointer; padding: 12px 0; font-weight: 700; }
.tho-bottom-action { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 860px; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); z-index: 10; }
.tho-bottom-action > button, .tho-bottom-action > a { width: 100%; text-align: center; min-height: 48px; }
.tho-bottom-action button:disabled { opacity: .5; cursor: not-allowed; }

/* UX1c: bộ chọn hẹn không tạo bảng ngang trên điện thoại. */
.appointment-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.appointment-buttons label{position:relative;flex:1 1 130px;min-width:0}
.appointment-buttons label input{position:absolute;opacity:0;width:1px;height:1px}
.appointment-buttons label span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px;border:1px solid #cbd5e1;border-radius:8px;text-align:center}
.appointment-buttons input:checked+span{background:#215fc4;color:white}
.appointment-buttons input:focus-visible+span{outline:3px solid #215fc4;outline-offset:2px}

.return-damage-photo{display:block;max-width:100%;width:200px;max-height:200px;object-fit:contain;border-radius:8px}

/* UX2: progressive summaries; collapsed fields keep their original form names. */
.picked-block { min-width:0; margin-block:.6rem; }
[data-picked-summary] { padding:.65rem; border:1px solid #cbd5e1; border-radius:.5rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; overflow-wrap:anywhere; }
[data-picked-summary][hidden], [data-picked-detail][hidden] { display:none; }
[data-picked-summary] button { flex-shrink:0; }
[data-line-summary] { display:none; width:100%; padding:.6rem; cursor:pointer; border:1px solid #cbd5e1; border-radius:.5rem; text-align:left; overflow-wrap:anywhere; }
.line-enhanced > [data-line-summary] { display:block; }
.line-enhanced:not(.line-open) > [data-line-detail] { display:none; }
.line-error { border:2px solid #b91c1c; }
[data-last-price-hint] { display:block; color:#475569; }
[data-line-totals] { padding:.75rem; background:#f1f5f9; overflow-wrap:anywhere; }

/* Shared workflow: one main action, visible steps and collapsible exceptions. */
.workflow-steps {display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:.65rem 0;}
.workflow-steps li {padding:.4rem .6rem;border-radius:.5rem;background:#e2e8f0;color:#475569;}
.workflow-steps [aria-current=step] {background:#1d4ed8;color:white;font-weight:700;}
.workflow-action {padding:.75rem 0;}
.workflow-checks {list-style:none;padding:0;margin:0 0 .5rem;}
.workflow-checks [data-ok="0"] {color:#b91c1c;}
.workflow-action button:disabled {opacity:.5;}
.workflow-other-content {display:grid;gap:.7rem;margin-top:.7rem;}
.workflow-terminal {background:#e5e7eb;color:#991b1b;}
.workflow-other summary, [data-order-readonly]>summary {cursor:pointer;overflow-wrap:anywhere;}
.saved-total {font-weight:600;}
@media(max-width:600px){
 body:has([data-workflow-action]) main {padding-bottom:calc(40vh + 1rem);}
 .workflow-action {position:fixed;bottom:0;left:0;right:0;z-index:30;background:white;border-top:1px solid #cbd5e1;padding:.6rem .75rem;max-height:40vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -2px 8px #0001;}
 .workflow-action>.next-primary {width:100%;}
 .workflow-checks {font-size:.85rem;}
 .workflow-steps {font-size:.85rem;gap:.3rem;}
}

.workflow-buttons {display:flex;gap:.4rem;}
.workflow-buttons>* {flex:1;min-width:0;white-space:normal;}

@media(max-width:600px){
 .workflow-action>[data-workflow-checks] {min-height:0;overflow:auto;}
 .workflow-action>.workflow-buttons, .workflow-action>h2 {flex-shrink:0;}
 .workflow-action>[data-primary-missing] {max-height:3rem;overflow:auto;flex-shrink:0;}
}

.warehouse-short {background:#fffbeb;border-color:#f59e0b;}
.warehouse-bottom {margin:1rem 0;}
.warehouse-bottom>.primary {width:100%;min-height:48px;}
@media(max-width:600px){
 body:has(.warehouse-bottom) main {padding-bottom:7rem;}
 .warehouse-bottom {position:fixed;bottom:0;left:0;right:0;padding:.75rem;margin:0;background:white;border-top:1px solid #cbd5e1;z-index:30;}
}

main:has([data-receipt-queue]) {max-width:1280px;}
.receipt-row {display:grid;grid-template-columns:1.1fr 1fr 1.2fr 1fr .9fr .9fr 1fr 1.6fr;align-items:center;gap:.6rem;padding:.8rem;border-bottom:1px solid #cbd5e1;background:white;overflow-wrap:anywhere;}
.receipt-row>* {min-width:0;}
.receipt-row-actions {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.receipt-row-actions form {margin:0;}
.receipt-row:has(details[open]) .receipt-row-actions {grid-column:1/-1;}
.receipt-row-actions details[open] {flex-basis:100%;}
.receipt-row-actions textarea {width:100%;}
.cash-group-confirm {margin-bottom:.7rem;}
.cash-group-confirm summary {cursor:pointer;font-weight:600;padding:.6rem;}
@media(max-width:800px){
 .receipt-row {grid-template-columns:1fr 1fr;}
 .receipt-row-amount {font-size:1.1rem;}
 .receipt-row-actions {grid-column:1/-1;}
 .cash-group {padding:.6rem;}
}

.tech-material {display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--line);}
.tech-material>span {min-width:0;overflow-wrap:anywhere;}.tech-material small {display:block;color:var(--muted);}
.tech-stepper {display:flex;gap:.2rem;align-items:center;flex-shrink:0;}.tech-stepper input {width:4rem;text-align:center;}.tech-stepper button {min-width:44px;min-height:44px;padding:.4rem;}
.tech-collection {flex-wrap:nowrap;}.tech-collection label {flex:1;min-width:0;}.tech-collection span {padding:.6rem .25rem;font-size:.9rem;}
.tech-other-list>details {border-bottom:1px solid var(--line);padding:.5rem 0;}.tech-other-list>details>summary {display:flex;justify-content:space-between;cursor:pointer;padding:.7rem .2rem;min-height:44px;}
.tech-other-list>details>summary::marker {content:'';}.tech-other-list .card {padding:.6rem;}
.tech-photos .bar {margin-bottom:0;}.tech-photos .photo-capture {position:relative;cursor:pointer;}.tech-photos input[type=file] {position:absolute;width:1px;height:1px;opacity:0;}
.tech-photo-list {display:flex;flex-wrap:wrap;gap:.5rem;}.tech-photo {width:94px;display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;}.tech-photo img {width:94px;height:94px;object-fit:cover;border-radius:8px;}.tech-photo button {padding:.35rem;min-height:36px;}.tech-photo small {font-size:.8rem;}
@media(max-width:400px){.tech-material {align-items:flex-start;flex-direction:column;}.tech-stepper {align-self:flex-end;}}

.account-list {display:grid;gap:.6rem;margin-top:1rem;}.account-row {display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.6rem;align-items:center;overflow-wrap:anywhere;}.account-row h2 {font-size:1.1rem;margin:0;}.account-row>* {min-width:0;}
.account-actions {display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0;}.account-actions form {margin:0;}.account-roles label {flex:0 1 auto;}.account-secret {font-family:monospace;font-size:1.7rem;letter-spacing:.12em;text-align:center;}.who [data-account-item] {font-size:.9rem;}
@media(max-width:600px){.account-row {grid-template-columns:1fr 1fr;}.account-row h2,.account-row small {grid-column:1/-1;}.account-actions>* {flex:1 1 100%;}.account-actions button {width:100%;}.who {flex-wrap:wrap;justify-content:flex-end;}}

.pending-totals {display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0;}.pending-totals>.card {display:flex;flex:1 1 150px;flex-direction:column;gap:.3rem;min-width:0;}.pending-list {display:grid;gap:.6rem;margin-top:1rem;}.pending-row {display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;overflow-wrap:anywhere;}.pending-row h2 {width:100%;font-size:1.05rem;margin:0;}.pending-overdue {color:#a20e16;border:1px solid currentColor;border-radius:6px;padding:.2rem .4rem;}.pending-groups label {flex:0 1 auto;}.pending-photos {display:flex;gap:.5rem;flex-wrap:wrap;}.pending-photos img {width:100px;height:100px;object-fit:cover;}[data-pending-supplier][hidden] {display:none;}
@media(max-width:400px){.pending-row>span,.pending-row>strong {width:100%;}.pending-totals>.card {flex-basis:130px;}}

/* ===== UI0: quy chuẩn giao diện chung ===== */
.btn-ok, .btn-danger, .btn-info, .btn-ghost { min-height: 48px; border-radius: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ok { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--ok-solid-text); }
.btn-danger { background: var(--bad-solid); border-color: var(--bad-solid); color: var(--bad-solid-text); }
.btn-info { background: var(--info-solid); border-color: var(--info-solid); color: var(--info-solid-text); }
.btn-ghost { background: var(--surface); border: 2px solid var(--muted); color: var(--text); }
.btn-block { width: 100%; }
button:disabled, .btn[aria-disabled="true"], button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.why-disabled { font-size: .9rem; font-weight: 600; color: var(--bad); margin: 4px 0 0; }
@media (max-width: 640px) { .btn-ok, .btn-danger, .btn-info, .btn-ghost { min-height: 56px; font-size: 1.05rem; } }
/* Vòng xoay trên nút đang gửi (khóa bấm lại ở base.jinja). */
form[data-submitting] button:disabled::before, form[data-submitting] .btn:disabled::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: td-spin .8s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { form[data-submitting] button:disabled::before { animation: none; } }
/* Thanh nút cố định ở đáy trên điện thoại. */
.action-bar { display: grid; gap: 10px; margin-top: 16px; }
@media (max-width: 1023px) {
  .action-bar { position: sticky; bottom: 0; z-index: 4; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 2px solid var(--line); }
}
/* Thông báo nhỏ. */
.toast-stack { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 50; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: 520px; width: 100%; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.3); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.toast.bad { background: var(--bad-solid); color: var(--bad-solid-text); }
.toast button { background: none; border: 0; color: inherit; font-weight: 800; padding: 4px 8px; }
/* Vuốt để xác nhận: không JS vẫn là nút submit thường. */
.swipe { position: relative; margin-inline: 8px; }
.swipe > button { width: 100%; min-height: 64px; border-radius: 999px; font-weight: 800; }
.swipe.swipe-on > button { background: var(--tag); border: 2px solid var(--muted); color: var(--text); padding-left: 68px; }
.swipe-knob { position: absolute; left: 6px; top: 50%; transform: translate(var(--x, 0px), -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--ok-solid); color: var(--ok-solid-text); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; font-size: 1.6rem; font-weight: 800; user-select: none; }
.swipe[data-tone="danger"] .swipe-knob { background: var(--bad-solid); color: var(--bad-solid-text); }
.swipe[data-tone="info"] .swipe-knob { background: var(--info-solid); color: var(--info-solid-text); }
.swipe.swipe-off .swipe-knob { background: var(--muted); color: var(--bg); cursor: not-allowed; }
/* Chip: input thật, chọn một (radio) hoặc nhiều (checkbox). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border: 2px solid var(--muted); border-radius: 12px; cursor: pointer; font-weight: 700; color: var(--text); background: var(--surface); }
.chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Danh sách tick nhiều mã, mỗi dòng có số lượng. */
.pick-list { display: grid; gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.pick-row:has(input[type=checkbox]:checked) { border-color: var(--text); }
.pick-row > label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; color: var(--text); }
.pick-row > label input { width: 26px; height: 26px; flex: none; accent-color: var(--ok-solid); }
.pick-row small { display: block; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; padding: 0; font-size: 1.3rem; font-weight: 800; border-radius: 10px; }
.stepper input { width: 56px; text-align: center; font-weight: 800; padding: 8px 4px; }
/* Lỗi đúng ô, giữ nguyên giá trị đã nhập. */
.field-invalid input, .field-invalid select, .field-invalid textarea, input.field-invalid { border: 2px solid var(--bad); }
.field-error { display: block; color: var(--bad); font-size: .9rem; font-weight: 600; }
/* Trang mẫu /ui/quy-chuan. */
.ui-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ui-swatches span { display: flex; align-items: flex-end; min-height: 64px; padding: 8px; border-radius: 10px; font-weight: 700; font-size: .85rem; }
.ui-section { display: grid; gap: 10px; margin-bottom: 16px; }
.ui-section h2 { font-size: 1.05rem; margin: 0; }
.disposition-tabs {display:flex;gap:.5rem;flex-wrap:wrap;}.disposition-tabs>details {min-width:0;flex:1 1 110px;}.disposition-tabs>details>summary {cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:.7rem;text-align:center;}.disposition-tabs>details[open] {flex-basis:100%;}.disposition-tabs>details[open]>summary {background:var(--primary,#1c5dba);color:white;}

/* ===== Thẻ A: màn thợ theo quy chuẩn UI0 ===== */
.swipe:has(button:disabled) .swipe-knob { background: var(--muted); color: var(--bg); cursor: not-allowed; }
.chip-btn { min-height: 44px; padding: 0 12px; border: 2px solid var(--muted); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 700; }
.chip-btn.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.fill-chips { margin-bottom: 4px; }
.tho-screen { padding-bottom: 190px; font-size: 17px; }
.tho-screen h1, .tho-screen h2 { font-weight: 800; }
.tho-screen .seg span { min-height: 48px; display: flex; align-items: center; justify-content: center; border-width: 2px; font-weight: 700; }
.tho-screen .seg input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.tho-symptom { display: inline-block; max-width: 100%; background: var(--warn-solid); color: var(--warn-solid-text); font-weight: 800; padding: 4px 10px; border-radius: 8px; }
.tho-locked { margin: 0 0 6px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.tho-info { border-style: dashed; }
.tho-bottom-action { display: grid; gap: 10px; background: var(--bg); border-top: 2px solid var(--line); }
.tho-bottom-action .row2 { gap: 10px; }
.tho-bottom-action .row2 .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tho-bottom-action .swipe { margin-inline: 8px; }
.tho-bottom-action > .btn-ok { min-height: 56px; font-size: 1.1rem; }
.tho-contact .btn-info, .tho-contact .btn-ghost { font-weight: 700; }

/* Khung thợ theo bản mẫu: tương phản cao, thanh trên gọn, tab dưới, thẻ bấm cả khối. */
body.tho-app { --bg: #fff; --surface: #f1f3f6; --surface2: #e2e6ec; --text: #0b0d10; --muted: #3a4350; --line: #6b7280; --tag: #e2e6ec; font-size: 17px; line-height: 1.35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tho-app { --bg: #0a0d12; --surface: #161b22; --surface2: #232b36; --text: #fff; --muted: #c5cdd8; --line: #5a6573; --tag: #232b36; }
}
:root[data-theme="dark"] body.tho-app { --bg: #0a0d12; --surface: #161b22; --surface2: #232b36; --text: #fff; --muted: #c5cdd8; --line: #5a6573; --tag: #232b36; }
.tho-app main { max-width: 560px; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.tho-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 16px; background: var(--bg); border-bottom: 2px solid var(--line); }
.tho-title { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tho-icb { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; list-style: none; }
.tho-icb::-webkit-details-marker { display: none; }
.tho-account { position: relative; }
.tho-account-menu { position: absolute; right: 0; top: 52px; width: 240px; display: grid; gap: 8px; padding: 12px; margin: 0; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.tho-account-menu .identity { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.tho-account-menu .identity small { color: var(--muted); }
.tho-account-menu .btn, .tho-account-menu button { min-height: 48px; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tho-back { min-height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: 16px; text-decoration: none; flex: none; }
.tho-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--bg); border-top: 2px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tho-tabs a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; }
.tho-tabs a.on { color: var(--text); box-shadow: inset 0 4px 0 var(--ok-solid); }
.tho-app .card { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.tho-app h1.tho-dup { display: none; }
.tho-app .btn, .tho-app button { font-weight: 700; }
.tho-app .tag { font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin: 0; white-space: nowrap; }
.tag.tone-info { background: var(--info-solid); color: var(--info-solid-text); }
.tag.tone-warn { background: var(--warn-solid); color: var(--warn-solid-text); }
.tag.tone-ok { background: var(--ok-solid); color: var(--ok-solid-text); }
.tag.tone-bad { background: var(--bad-solid); color: var(--bad-solid-text); }
.tag.tone-mute { background: var(--surface2, var(--tag)); color: var(--text); }
/* Hôm nay */
.tho-date { margin: 0; font-weight: 700; color: var(--muted); }
.tho-grp { margin: 8px 0 -4px; font-size: 15px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
a.tho-job { display: flex; flex-direction: column; gap: 4px; padding: 14px; color: var(--text); text-decoration: none; }
a.tho-job:active { transform: scale(.99); }
.tho-job .cardtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; }
.tho-job .cardtop > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tho-job b { font-size: 19px; }
.tho-job .mu { color: var(--muted); }
.tho-job .tho-symptom { align-self: flex-start; }
.tho-job .tho-created { font-size: 13px; color: var(--muted); }
.tho-job .tho-next { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-weight: 800; color: var(--ok); }
.tho-job.service-overdue { border-color: var(--bad-solid); }
.tho-job .tho-late { color: var(--bad); }
/* Phiếu */
.tho-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 6px; }
.tho-steps li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); border: 0; padding: 0; text-align: left; }
.tho-steps li::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--surface2, var(--tag)); }
.tho-steps li.done::before { background: var(--ok-solid); }
.tho-steps li[aria-current] { color: var(--text); }
.tho-steps li[aria-current]::before { background: var(--text); }
.tho-kv { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tho-kv span { font-size: 14px; font-weight: 700; color: var(--muted); }
.tho-kv b { font-size: 18px; }
.tho-info { display: flex; flex-direction: column; gap: 10px; }
.tho-info .tho-locked { display: flex; justify-content: space-between; align-items: center; margin: 0; }
.tho-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tho-head b { font-size: 19px; }
.tho-screen > section.card h2, .tho-screen .tech-photos .bar strong { font-size: 18px; font-weight: 800; }
.tho-other[open] { position: fixed; inset: 0; z-index: 30; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.62); display: flex; flex-direction: column; justify-content: flex-end; }
.tho-other[open] > summary { background: var(--bg); border-radius: 20px 20px 0 0; border-top: 2px solid var(--line); padding: 14px 16px; font-size: 20px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.tho-other[open] > summary::-webkit-details-marker { display: none; }
.tho-other[open] > summary::after { content: "✕"; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tho-other[open] > .tech-other-list { background: var(--bg); max-height: 78vh; overflow-y: auto; padding: 4px 16px 24px; display: grid; gap: 10px; }
.tho-other .tech-other-list > details > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; font-size: 18px; font-weight: 700; list-style: none; cursor: pointer; }
.tho-other .tech-other-list > details[open] > summary { background: var(--text); color: var(--bg); border-color: var(--text); }
.tho-app .tho-bottom-action { max-width: 560px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
.tho-app .tho-bottom-action .row2 .btn { min-height: 52px; font-size: 17px; font-weight: 800; border-radius: 14px; }
.tho-app .tho-bottom-action > .btn-ok, .tho-app .tho-bottom-action > .btn { min-height: 60px; font-size: 19px; font-weight: 800; border-radius: 14px; }
.tho-app .tho-screen { padding-bottom: 200px; }
.tho-more { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
/* Hàng / Tiền tôi giữ */
.tho-stock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tho-stock-row .tho-qty { font-size: 26px; font-weight: 800; }
.tho-money { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.tho-app .stock-actions.tho-hang-actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 19; width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px; margin: 0; background: var(--bg); border-top: 2px solid var(--line); }
.tho-app .stock-actions.tho-hang-actions .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; border-radius: 14px; }
body.tho-app:has(.tho-hang-actions) main { padding-bottom: 180px; }
.tho-stock-row .tho-qty small { font-size: 13px; font-weight: 700; color: var(--muted); }
.tho-app [data-customer-charge] .stock-actions button, .tho-app .fill-chips .chip-btn { min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); padding: 0 14px; font-weight: 700; }
.tho-app [data-customer-charge] input { font-size: 26px; font-weight: 800; text-align: right; min-height: 56px; border: 2px solid var(--text); border-radius: 12px; }
.tho-back ~ .tho-account { display: none; }
.tho-info .tho-symptom { align-self: flex-start; }
.tho-plain-primary { display: none; }
.tho-app .tho-other:not([open]) { display: none; }
.tho-app .tech-onsite legend { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.tho-kv span.tho-symptom { color: var(--warn-solid-text); font-size: 17px; font-weight: 800; }
/* CXL3: retain table semantics on narrow screens, scroll within each report. */
.pending-report-scroll{max-width:100%;overflow:auto;margin:12px 0;border:1px solid var(--line);border-radius:8px}
.pending-report-table{border-collapse:separate;border-spacing:0;width:100%;white-space:nowrap;font-variant-numeric:tabular-nums}
.pending-report-table th,.pending-report-table td{padding:12px;text-align:right;border-bottom:1px solid var(--line)}
.pending-report-table tr>:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--surface,#fff);min-width:125px;max-width:180px;white-space:normal}
.pending-report-table thead th,.pending-report-table tfoot th,.pending-report-table tfoot td{font-weight:700;background:var(--surface,#fff)}
.pending-report-table small,.pending-report-total small{display:block;font-weight:400}

/* NS1: common profiles and director-only pay forms. */
.employee-section{margin-top:20px;min-width:0}
.employee-table-scroll{max-width:100%;overflow:auto;margin:16px 0}
.employee-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.employee-table th,.employee-table td{padding:12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.employee-info{overflow-wrap:anywhere}.employee-info dt{font-weight:700;margin-top:12px}.employee-info dd{margin:4px 0 12px}
.employee-option{width:100%;text-align:left;justify-content:flex-start;margin-top:8px;padding:8px;overflow-wrap:anywhere}
.employee-replace{margin-top:12px}.employee-salary-form{margin-top:16px}

/* NS2: one ordinary tap for punches; wide month board scrolls inside the page. */
.attendance-section{margin-top:20px;min-width:0;overflow-wrap:anywhere}
.attendance-today{margin-top:16px}.attendance-punch-panel{min-height:28vh;display:flex;flex-direction:column;justify-content:flex-end}
.attendance-main{width:100%;min-height:96px;font-size:1.6rem}.attendance-days>a{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.attendance-days>a>strong{min-width:50px}.attendance-request{border-top:1px solid var(--line);padding:12px 0}
.attendance-board-scroll{max-width:100%;overflow:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px}
.attendance-board{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums;white-space:nowrap}
.attendance-board th,.attendance-board td{padding:12px;border-bottom:1px solid var(--line);text-align:center}
.attendance-board tr>:first-child{position:sticky;left:0;z-index:1;min-width:135px;max-width:180px;text-align:left;white-space:normal;background:var(--surface)}
.attendance-board td>a{display:block;min-width:24px;min-height:24px}

.attendance-punch-panel>.action-bar,.attendance-lock-form>.action-bar{margin-left:0;margin-right:0}

/* NS3: scoped KPI cards and horizontally scrollable, sticky-name matrices. */
.kpi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-block:16px}
.kpi-card{min-width:0;overflow-wrap:anywhere}.kpi-value{font-size:1.8rem;font-weight:700}.kpi-value small{font-size:1rem;font-weight:400}
.kpi-meter{display:block;width:100%;height:18px;accent-color:#238347}.kpi-meter.warn{accent-color:#a76a00}.kpi-meter.bad{accent-color:#b52e2e}
.kpi-good{background:#e6f5eb;color:#163d25}.kpi-warn{background:#fff3cf;color:#593b00}.kpi-bad{background:#fce8e8;color:#751c1c}.kpi-improved{color:#18703a}
.kpi-scroll{overflow-x:auto;max-width:100%;margin-block:16px;border:1px solid var(--line);border-radius:8px}
.kpi-table{width:100%;min-width:650px;margin:0;border-collapse:separate;border-spacing:0}.kpi-table th,.kpi-table td{min-width:150px;vertical-align:top;padding:12px;text-align:left;border-bottom:1px solid var(--line)}
.kpi-table tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface,#fff);min-width:130px;max-width:180px;overflow-wrap:anywhere}
.kpi-table input:not([type=hidden]){min-width:140px;width:100%}.kpi-target-form{min-width:0}.kpi-target-form>.action-bar{margin-inline:0}
@media(max-width:600px){.kpi-cards{grid-template-columns:1fr}.kpi-table tr>:first-child{min-width:110px;max-width:130px}}

.kpi-meter.good::-webkit-meter-optimum-value,.kpi-meter.good::-webkit-meter-suboptimum-value{background:#238347}
.kpi-meter.warn::-webkit-meter-optimum-value,.kpi-meter.warn::-webkit-meter-suboptimum-value{background:#a76a00}
.kpi-meter.bad::-webkit-meter-optimum-value,.kpi-meter.bad::-webkit-meter-suboptimum-value{background:#b52e2e}
.kpi-meter.good::-moz-meter-bar{background:#238347}.kpi-meter.warn::-moz-meter-bar{background:#a76a00}.kpi-meter.bad::-moz-meter-bar{background:#b52e2e}

/* NS4: immutable commission summaries, phone-friendly tables and signed adjustments. */
.commission-scroll{overflow-x:auto;max-width:100%;margin-block:16px;border:1px solid var(--line);border-radius:8px}
.commission-table{width:100%;min-width:650px;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.commission-table th,.commission-table td{padding:12px;min-width:125px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.commission-table tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface);min-width:130px;max-width:180px;overflow-wrap:anywhere}
.commission-negative{color:var(--bad-solid);font-weight:700}.commission-total{font-size:1.4rem;font-weight:700}
.commission-picker{min-width:0}.commission-people{max-height:240px;overflow-y:auto;padding:8px 0}.commission-people [hidden]{display:none}
.commission-lock-form>.action-bar{margin-inline:0}.commission-lock-form{min-width:0}
@media(max-width:600px){.commission-table tr>:first-child{min-width:110px;max-width:130px}}
/* Hàng tôi giữ / Trả kho / Xin linh kiện: gọn, chữ vừa phải, việc chính lên trước. */
.tho-app .tho-wh h2 { font-size: 15px; font-weight: 800; color: var(--muted); margin: 4px 0 0; }
.tho-app .work-rows { gap: 10px; }
.tho-app .work-row { padding: 12px 14px; gap: 2px; }
.tho-meta { font-size: 13px; color: var(--muted); }
.tho-meta a { color: var(--muted); }
.tho-hist { padding: 0; }
.tho-hist > summary { min-height: 52px; padding: 12px 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.tho-hist > summary b { color: var(--warn); }
.tho-hist > :not(summary) { margin: 0 14px; }
.tho-hist > :last-child { margin-bottom: 12px; }
.tho-hist .work-row { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.tho-hist .work-row p, .tho-hist > p { margin: 0; font-size: 15px; }
.tho-hist .work-row form { margin: 0; }
.tho-app h1.tho-dup + .tho-dup-link, .tho-app .tho-dup-bar { display: none; }
.tho-return h3 { margin: 0; font-size: 17px; }
.tho-return-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tho-return-head .btn-ghost { min-height: 40px; padding: 0 14px; }
.tho-return .hint { margin: 4px 0 8px; font-size: 14px; }
[data-return-rows] { display: grid; gap: 10px; }
.tho-ret { margin: 0; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; display: grid; gap: 8px; }
.tho-ret:has([data-return-pick]:checked) { border-color: var(--text); }
.tho-ret-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tho-ret-pick { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; cursor: pointer; }
.tho-ret-pick input { width: 26px; height: 26px; flex: none; accent-color: var(--ok-solid); margin: 0; }
.tho-ret-pick span { display: flex; flex-direction: column; min-width: 0; }
.tho-ret-pick b { font-size: 16px; line-height: 1.25; }
.tho-ret-pick small { font-size: 13px; color: var(--muted); }
.tho-ret .stepper { flex: none; }
.tho-ret .stepper button { width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 20px; }
.tho-ret .stepper input { width: 52px; min-height: 40px; text-align: center; font-size: 17px; font-weight: 800; padding: 0 4px; }
.tho-ret-detail { display: grid; gap: 8px; }
.tho-ret-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tho-ret-line select { flex: 1 1 140px; min-width: 0; min-height: 40px; font-size: 15px; }
.tho-ret-cond { gap: 6px; flex-wrap: nowrap; }
.tho-ret-cond .chip span { min-height: 40px; padding: 0 12px; font-size: 15px; }
.tho-ret .fill-chips { gap: 6px; }
.tho-ret .fill-chips .chip-btn { min-height: 38px; padding: 0 10px; font-size: 14px; border-radius: 10px; }
.tho-ret label { font-size: 14px; }
.tho-ret textarea { min-height: 0; font-size: 15px; }
.tho-ret-photo input { font-size: 14px; }
.tho-ret [data-return-split] { justify-self: start; font-size: 14px; min-height: 36px; padding: 0; }
.tho-app #return-create .tho-bottom-action, .tho-app [data-part-multi] .tho-bottom-action { max-width: 560px; }
.tho-app main h2 { font-size: 18px; }
.tho-app main h1 { font-size: 20px; }
.tho-app .card h2 { margin: 0 0 8px; }
.form label.tho-ret-pick { display: flex; flex-direction: row; color: var(--text); font-size: 16px; }
.form .tho-ret-cond label.chip { display: inline-block; }
.tho-app .tho-hang-actions .btn { font-size: 16px; }