/* Source: design/costing-redesign/design-demos/v8-b-split.html — bản thiết kế bước Tính giá đã được duyệt
   (direction-approved.md, «chọn hướng B»), đưa nguyên sang app theo DDR-004. Mọi giá trị đều là token --bms-*;
   file này nằm ngoài core cascade nên không thuộc phạm vi đóng băng thiết kế. Selector đổi #costingSplit → #costingFields. */

/* Bước Tính giá chiếm trọn chiều ngang của .form-grid bao ngoài (mặc định .span-2 chỉ ăn 2 trên 4 cột). */
#costingFields { grid-column: 1 / -1; }

/* ---- Bố cục hai cột: y hệt .ofs-layout của bước Tạo đơn hàng ---- */
#costingFields .cs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--bms-space-5); align-items: start; }

/* ---- Cột trái: một thẻ duy nhất, 7 nhóm ngăn bằng đường kẻ (thay 8 thẻ xếp dọc) ---- */
#costingFields .cs-card { padding: var(--bms-space-6); }
#costingFields .cs-group { padding-bottom: var(--bms-space-5); margin-bottom: var(--bms-space-5); border-bottom: 1px solid var(--bms-border); }
#costingFields .cs-group:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

/* Hàng tiêu đề nhóm: mảnh, có tổng tiền + % */
#costingFields .cs-group-head { display: flex; align-items: center; gap: var(--bms-space-3); margin-bottom: var(--bms-space-3); }
#costingFields .cs-group-head .cs-letter { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--bms-radius-1); color: var(--bms-primary); background: var(--bms-primary-soft); font: 700 12px/1 var(--bms-font-data); }
#costingFields .cs-group-head h3 { flex: 1 1 auto; min-width: 0; color: var(--bms-text); font: 700 14px/1.3 var(--bms-font-ui); }
#costingFields .cs-group-head .cs-sum { color: var(--bms-text); font: 700 14px/1.3 var(--bms-font-data); letter-spacing: -.02em; white-space: nowrap; }
#costingFields .cs-group-head .cs-pct { flex: 0 0 auto; min-width: 54px; padding: 3px var(--bms-space-2); border-radius: var(--bms-radius-round); color: var(--bms-text-muted); background: var(--bms-surface-subtle); font: 600 12px/1.3 var(--bms-font-data); text-align: center; white-space: nowrap; }
#costingFields .cs-group-head .cs-pct.is-revenue { color: var(--bms-primary); background: var(--bms-primary-soft); }
#costingFields .cs-group-head .cs-pct.is-lead { color: var(--bms-warning); background: var(--bms-warning-soft); }

/* Bảng gọn hơn: bỏ min-width 1080px, cột cố định, ô nhập thấp hơn */
#costingFields .table-wrap { border-radius: var(--bms-radius-1); }
#costingFields table.warehouse-table { min-width: 0; width: 100%; table-layout: fixed; }
#costingFields table.warehouse-table th:nth-child(1), #costingFields table.warehouse-table td:nth-child(1) { width: 34%; }
#costingFields table.warehouse-table th:nth-child(2), #costingFields table.warehouse-table td:nth-child(2) { width: 22%; }
#costingFields table.warehouse-table th:nth-child(3), #costingFields table.warehouse-table td:nth-child(3) { width: 22%; }
#costingFields table.warehouse-table th:nth-child(4), #costingFields table.warehouse-table td:nth-child(4) { width: 22%; }
#costingFields table.warehouse-table :is(th, td) { padding: var(--bms-space-2) var(--bms-space-3); font-size: 13px; vertical-align: middle; }
#costingFields table.warehouse-table th { font-size: 12px; }
#costingFields table.warehouse-table th:nth-child(n+2), #costingFields table.warehouse-table td:nth-child(n+2) { text-align: right; }
#costingFields table.warehouse-table tbody tr { cursor: default; }
#costingFields table.warehouse-table tbody tr:hover { background: transparent; }
#costingFields .cs-cell { display: flex; align-items: center; justify-content: flex-end; gap: var(--bms-space-2); }
#costingFields .cs-cell .cs-unit { flex: 0 0 auto; color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); white-space: nowrap; }
#costingFields .cs-none { color: var(--bms-text-subtle); }
#costingFields .cs-cell input { min-height: var(--bms-control-compact); padding: var(--bms-space-1) var(--bms-space-2); border-radius: var(--bms-radius-1); font: 600 13px/1.3 var(--bms-font-data); text-align: right; }
#costingFields .cs-cell input.cs-amount { font-weight: 700; }
#costingFields .cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Cột phải: thẻ kết quả dính, cùng họ với .ofs-preview ---- */
#costingFields .cs-result { position: sticky; top: var(--bms-space-6); padding: var(--bms-space-6); border-radius: var(--bms-radius-3); color: var(--bms-frame-800); background: var(--bms-frame-950); box-shadow: var(--bms-shadow-2); }
#costingFields .cs-result h3 { margin: 0 0 var(--bms-space-1); color: color-mix(in srgb, var(--bms-frame-800) 62%, var(--bms-frame-950)); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#costingFields .cs-result .cs-order { margin: 0 0 var(--bms-space-4); color: var(--bms-frame-800); font: 700 16px/1.35 var(--bms-font-ui); }

#costingFields .cs-ladder { border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 22%, transparent); }
#costingFields .cs-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); padding: var(--bms-space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--bms-frame-800) 14%, transparent); }
#costingFields .cs-row span { color: color-mix(in srgb, var(--bms-frame-800) 68%, var(--bms-frame-950)); font: 600 12px/1.35 var(--bms-font-ui); }
#costingFields .cs-row b { color: var(--bms-frame-800); font: 600 13px/1.35 var(--bms-font-data); white-space: nowrap; }
#costingFields .cs-row.is-revenue span, #costingFields .cs-row.is-revenue b { color: var(--bms-frame-800); font-size: 13px; font-weight: 700; }
#costingFields .cs-row.is-total { margin-top: var(--bms-space-3); padding-top: var(--bms-space-3); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 30%, transparent); border-bottom: 0; align-items: baseline; }
#costingFields .cs-row.is-total span { color: color-mix(in srgb, var(--bms-frame-800) 70%, var(--bms-frame-950)); font-size: 12px; }
#costingFields .cs-row.is-total strong { color: var(--bms-success); font: 700 24px/1.15 var(--bms-font-data); letter-spacing: -.03em; }
#costingFields .cs-row.is-total strong.is-loss { color: var(--bms-danger); }
#costingFields .cs-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bms-space-2); margin-top: var(--bms-space-3); }
#costingFields .cs-sub { padding: var(--bms-space-3); border-radius: var(--bms-radius-1); background: color-mix(in srgb, var(--bms-frame-800) 10%, transparent); }
#costingFields .cs-sub span { display: block; color: color-mix(in srgb, var(--bms-frame-800) 68%, var(--bms-frame-950)); font: 600 11px/1.3 var(--bms-font-ui); }
#costingFields .cs-sub strong { display: block; margin-top: var(--bms-space-1); color: var(--bms-frame-800); font: 700 17px/1.2 var(--bms-font-data); letter-spacing: -.02em; }

/* Thanh tỉ trọng chi phí dọc — div + token, không thư viện, không biểu đồ tròn */
#costingFields .cs-mix { margin-top: var(--bms-space-5); padding-top: var(--bms-space-4); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 22%, transparent); }
#costingFields .cs-mix h4 { margin: 0 0 var(--bms-space-3); color: color-mix(in srgb, var(--bms-frame-800) 62%, var(--bms-frame-950)); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#costingFields .cs-mix-body { display: flex; gap: var(--bms-space-3); align-items: stretch; }
#costingFields .cs-bar { flex: 0 0 auto; width: 26px; height: 196px; display: flex; flex-direction: column; border-radius: var(--bms-radius-1); overflow: hidden; }
#costingFields .cs-bar > i { display: block; }
#costingFields .cs-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--bms-space-1); }
#costingFields .cs-leg { display: flex; align-items: center; gap: var(--bms-space-2); }
#costingFields .cs-leg > i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--bms-radius-round); }
#costingFields .cs-leg em { flex: 1 1 auto; min-width: 0; color: color-mix(in srgb, var(--bms-frame-800) 74%, var(--bms-frame-950)); font: 600 12px/1.3 var(--bms-font-ui); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#costingFields .cs-leg b { flex: 0 0 auto; color: var(--bms-frame-800); font: 600 12px/1.3 var(--bms-font-data); }
#costingFields .cs-note { margin: var(--bms-space-4) 0 0; color: color-mix(in srgb, var(--bms-frame-800) 58%, var(--bms-frame-950)); font: 500 11px/1.5 var(--bms-font-ui); }

/* Màu các lớp chi phí: chỉ trộn từ token */
#costingFields .seg-b { background: var(--bms-primary); }
#costingFields .seg-c { background: color-mix(in srgb, var(--bms-primary) 70%, var(--bms-surface)); }
#costingFields .seg-d { background: color-mix(in srgb, var(--bms-primary) 48%, var(--bms-surface)); }
#costingFields .seg-e { background: color-mix(in srgb, var(--bms-primary) 32%, var(--bms-surface)); }
#costingFields .seg-f { background: color-mix(in srgb, var(--bms-primary) 20%, var(--bms-surface)); }
#costingFields .seg-g { background: color-mix(in srgb, var(--bms-primary) 12%, var(--bms-surface)); }
#costingFields .seg-p { background: var(--bms-success); }

#costingFields .cs-foot { margin-top: var(--bms-space-4); }

@media (max-width: 900px) {
  #costingFields .cs-layout { grid-template-columns: minmax(0, 1fr); }
  #costingFields .cs-result { position: static; }
  #costingFields .cs-card { padding: var(--bms-space-4); }
}

/* --- Loại đơn «Bán máy» (DDR-017): hồ sơ máy cũ và phiếu tính giá vốn ----------------------------
   Số hóa PHIẾU TÍNH TOÁN GIÁ VỐN MÁY MÓC CŨ v1.0 của ZAMIO. Chỉ dùng token --bms-*. */
#machineOrderFields[hidden], #machineCostingFields[hidden] { display: none; }
#machineOrderFields, #machineCostingFields { grid-column: 1 / -1; display: grid; gap: var(--bms-space-4); }
#machineOrderFields .zmc-card, #machineCostingFields .zmc-card { padding: var(--bms-space-5); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
#machineOrderFields .zmc-head, #machineCostingFields .zmc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); margin-bottom: var(--bms-space-3); }
#machineOrderFields .zmc-head h3, #machineCostingFields .zmc-head h3 { margin: 0; color: var(--bms-text); font: 700 15px/1.3 var(--bms-font-ui); }
#machineOrderFields .zmc-head span, #machineCostingFields .zmc-head span { color: var(--bms-primary); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#machineOrderFields .zmc-head p, #machineCostingFields .zmc-head p { flex: 1 0 100%; margin: 0; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }
#machineOrderFields .zmc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bms-space-3); }
#machineOrderFields .zmc-grid label { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }
#machineOrderFields .zmc-grid label.zmc-wide { grid-column: 1 / -1; }
/* --- Bước 2 đơn bán máy, bố cục hướng B (DDR-028) -------------------------------------------------
   Cột trái cuộn dài để nhập, cột phải DÍNH giữ mục 5 + mục 7 luôn trong tầm mắt. Ngữ pháp bố cục mượn
   từ trình soạn hoá đơn của Stripe; màu và phông vẫn nguyên token --bms-* của v8. */
#machineCostingFields .zmc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: var(--bms-space-5); align-items: start; }
#machineCostingFields .zmc-main { display: grid; gap: var(--bms-space-5); min-width: 0; }
#machineCostingFields .zmc-card { overflow: hidden; padding: 0; }
#machineCostingFields .zmc-card-head { display: flex; align-items: center; gap: var(--bms-space-3); padding: var(--bms-space-3) var(--bms-space-4); border-bottom: 1px solid var(--bms-border); }
#machineCostingFields .zmc-card-head h4 { margin: 0; color: var(--bms-text); font: 650 14px/1.35 var(--bms-font-ui); }
#machineCostingFields .zmc-card-meta { margin-left: auto; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--bms-radius-round); background: var(--bms-primary-soft); color: var(--bms-primary); font: 700 12px/1 var(--bms-font-data); font-style: normal; }

#machineCostingFields .zmc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#machineCostingFields .zmc-table thead th { padding: var(--bms-space-2) var(--bms-space-4); border-bottom: 1px solid var(--bms-border); background: color-mix(in srgb, var(--bms-canvas) 60%, var(--bms-surface)); color: var(--bms-text-subtle); font: 620 11px/1.4 var(--bms-font-ui); letter-spacing: .05em; text-transform: uppercase; text-align: left; }
#machineCostingFields .zmc-table td { padding: 5px var(--bms-space-4); border-bottom: 1px solid color-mix(in srgb, var(--bms-border) 60%, transparent); vertical-align: middle; }
#machineCostingFields .zmc-table tbody tr:hover td { background: color-mix(in srgb, var(--bms-primary-soft) 35%, transparent); }
#machineCostingFields .zmc-idx { width: 40px; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-data); text-align: right; }
#machineCostingFields .zmc-lbl { font: 500 14px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-hint { display: block; margin-top: 1px; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); }
#machineCostingFields :is(.zmc-num, .zmc-right) { text-align: right; }
#machineCostingFields .zmc-num { font: 600 13px/1.4 var(--bms-font-data); font-variant-numeric: tabular-nums; }
#machineCostingFields .zmc-table-parts :is(th, td) { padding-left: 8px; padding-right: 8px; }
#machineCostingFields .zmc-table-parts :is(thead th, tbody td, tfoot td):first-child { padding-left: var(--bms-space-4); }
#machineCostingFields .zmc-table-parts :is(thead th, tbody td, tfoot td):last-child { padding-right: var(--bms-space-4); }

/* Ô nhập kiểu «ghost»: chỉ hiện viền khi rê chuột hoặc focus, nhờ đó mật độ dòng cao mà không rối. */
#machineCostingFields .zmc-in { width: 100%; min-height: var(--bms-control-compact); padding: 0 10px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); background: var(--bms-surface); color: var(--bms-text); font: 500 14px/1.3 var(--bms-font-ui); }
#machineCostingFields .zmc-in-money { text-align: right; font: 560 14px/1.3 var(--bms-font-data); font-variant-numeric: tabular-nums; }
#machineCostingFields .zmc-in-ghost { border-color: transparent; background: transparent; }
#machineCostingFields .zmc-table tbody tr:hover .zmc-in-ghost { border-color: var(--bms-border); background: var(--bms-surface); }
#machineCostingFields .zmc-in:focus { border-color: var(--bms-primary); }

#machineCostingFields .zmc-sum td { padding: var(--bms-space-2) var(--bms-space-4); border-top: 1px solid var(--bms-border-strong); border-bottom: 0; background: color-mix(in srgb, var(--bms-canvas) 60%, var(--bms-surface)); }
#machineCostingFields .zmc-sum-lbl { color: var(--bms-text-muted); font: 700 11px/1.4 var(--bms-font-ui); letter-spacing: .06em; text-transform: uppercase; }
#machineCostingFields .zmc-sum-val { color: var(--bms-text); font: 700 16px/1.3 var(--bms-font-data); font-variant-numeric: tabular-nums; text-align: right; }
#machineCostingFields .zmc-note { margin: 0; padding: var(--bms-space-2) var(--bms-space-4); border-top: 1px solid var(--bms-border); background: var(--bms-info-soft); color: color-mix(in srgb, var(--bms-info) 80%, var(--bms-text)); font: 500 12px/1.5 var(--bms-font-ui); }

/* Cột phải dính — đây là điểm mấu chốt của hướng B: gõ chi phí bên trái, thấy F và I đổi ngay bên phải. */
#machineCostingFields .zmc-rail { position: sticky; top: var(--bms-space-4); display: grid; gap: var(--bms-space-4); }
#machineCostingFields .zmc-scale { overflow: hidden; border: 1px solid var(--bms-border-strong); border-radius: var(--bms-radius-2); background: var(--bms-surface); box-shadow: var(--bms-shadow-2); }
#machineCostingFields .zmc-scale-head { padding: var(--bms-space-3) var(--bms-space-4); border-bottom: 1px solid var(--bms-border); background: color-mix(in srgb, var(--bms-canvas) 60%, var(--bms-surface)); }
#machineCostingFields .zmc-scale-head h4 { margin: 0; color: var(--bms-text); font: 650 14px/1.35 var(--bms-font-ui); }
#machineCostingFields .zmc-scale-head p { margin: 2px 0 0; color: var(--bms-text-subtle); font: 500 12px/1.45 var(--bms-font-ui); }
#machineCostingFields .zmc-ladder { padding: var(--bms-space-3) var(--bms-space-4) var(--bms-space-4); }
#machineCostingFields .zmc-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; }
#machineCostingFields .zmc-code { color: var(--bms-text-subtle); font: 700 12px/1 var(--bms-font-data); font-style: normal; }
#machineCostingFields .zmc-line-lbl { color: var(--bms-text-muted); font: 500 13px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-line-val { color: var(--bms-text); font: 600 14px/1.4 var(--bms-font-data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#machineCostingFields .zmc-line-key .zmc-code { color: var(--bms-text); }
#machineCostingFields .zmc-line-key .zmc-line-lbl { color: var(--bms-text); font-weight: 650; }
#machineCostingFields .zmc-line-key .zmc-line-val { font: 700 17px/1.3 var(--bms-font-data); }
#machineCostingFields .zmc-line-input { padding: 4px 0; }
#machineCostingFields .zmc-line-input .zmc-in { max-width: 160px; justify-self: end; }
#machineCostingFields .zmc-cost { margin-top: var(--bms-space-2); padding: var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); background: var(--bms-neutral-soft); }
#machineCostingFields .zmc-cost .zmc-line-val { font: 750 20px/1.25 var(--bms-font-data); }
#machineCostingFields .zmc-sell { margin-top: var(--bms-space-3); padding: var(--bms-space-3); border: 1px solid color-mix(in srgb, var(--bms-primary) 32%, transparent); border-radius: var(--bms-radius-1); background: var(--bms-primary-soft); }
#machineCostingFields .zmc-sell .zmc-code { color: var(--bms-primary); }
#machineCostingFields .zmc-sell .zmc-line-lbl { color: color-mix(in srgb, var(--bms-primary) 80%, var(--bms-text)); font-weight: 650; }
#machineCostingFields :is(.zmc-cost, .zmc-sell).zmc-line { padding: var(--bms-space-3); }

#machineCostingFields .zmc-gap { margin-top: var(--bms-space-3); padding: var(--bms-space-3); border: 1px solid color-mix(in srgb, var(--bms-success) 34%, transparent); border-radius: var(--bms-radius-1); background: var(--bms-success-soft); }
#machineCostingFields .zmc-gap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#machineCostingFields .zmc-gap-lbl { color: color-mix(in srgb, var(--bms-success) 72%, var(--bms-text)); font: 700 11px/1.4 var(--bms-font-ui); letter-spacing: .05em; text-transform: uppercase; }
#machineCostingFields .zmc-gap-val { color: color-mix(in srgb, var(--bms-success) 78%, var(--bms-text)); font: 750 22px/1.2 var(--bms-font-data); font-variant-numeric: tabular-nums; }
#machineCostingFields .zmc-gap-rate { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--bms-success) 26%, transparent); }
#machineCostingFields .zmc-gap-rate span { color: color-mix(in srgb, var(--bms-success) 70%, var(--bms-text)); font: 600 13px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-gap-rate b { color: color-mix(in srgb, var(--bms-success) 78%, var(--bms-text)); font: 750 20px/1.2 var(--bms-font-data); font-variant-numeric: tabular-nums; }
/* Lỗ thì cả khối đổi sang màu cảnh báo — đây là lúc người dùng phải dừng lại. */
#machineCostingFields .zmc-profit.is-loss { color: var(--bms-danger); }
#machineCostingFields .zmc-bar { display: flex; height: 10px; margin-top: var(--bms-space-3); border-radius: var(--bms-radius-round); overflow: hidden; background: var(--bms-border); }
#machineCostingFields .zmc-bar i { display: block; height: 100%; }
#machineCostingFields .zmc-bar [data-machine-bar="A"] { background: color-mix(in srgb, var(--bms-primary) 82%, var(--bms-text)); }
#machineCostingFields .zmc-bar [data-machine-bar="B"] { background: color-mix(in srgb, var(--bms-primary) 52%, var(--bms-surface)); }
#machineCostingFields .zmc-bar [data-machine-bar="C"] { background: color-mix(in srgb, var(--bms-primary) 30%, var(--bms-surface)); }
#machineCostingFields .zmc-bar [data-machine-bar="E"] { background: var(--bms-neutral); }
#machineCostingFields .zmc-bar [data-machine-bar="H"] { background: var(--bms-success); }
#machineCostingFields .zmc-bar.is-loss [data-machine-bar="H"] { background: var(--bms-danger); }
#machineCostingFields .zmc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-legend span { display: inline-flex; align-items: center; gap: 6px; }
#machineCostingFields .zmc-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--bms-radius-round); }
#machineCostingFields .zmc-dot-a { background: color-mix(in srgb, var(--bms-primary) 82%, var(--bms-text)); }
#machineCostingFields .zmc-dot-b { background: color-mix(in srgb, var(--bms-primary) 52%, var(--bms-surface)); }
#machineCostingFields .zmc-dot-c { background: color-mix(in srgb, var(--bms-primary) 30%, var(--bms-surface)); }
#machineCostingFields .zmc-dot-e { background: var(--bms-neutral); }
#machineCostingFields .zmc-dot-h { background: var(--bms-success); }

/* Mục 7 là CỔNG chứ không phải ghi chú cuối trang — nên nó nằm ngay dưới phép cân, viền màu review. */
#machineCostingFields .zmc-gate { overflow: hidden; border: 1px solid var(--bms-review); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
#machineCostingFields .zmc-gate-head { padding: var(--bms-space-3) var(--bms-space-4); border-bottom: 1px solid color-mix(in srgb, var(--bms-review) 40%, transparent); background: var(--bms-review-soft); }
#machineCostingFields .zmc-gate-head h4 { margin: 0; color: color-mix(in srgb, var(--bms-review) 72%, var(--bms-text)); font: 650 14px/1.35 var(--bms-font-ui); }
#machineCostingFields .zmc-gate-head p { margin: 3px 0 0; color: color-mix(in srgb, var(--bms-review) 66%, var(--bms-text)); font: 500 12px/1.45 var(--bms-font-ui); }
#machineCostingFields .zmc-gate-body { padding: var(--bms-space-2) var(--bms-space-4) var(--bms-space-4); }
#machineCostingFields .zmc-q { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3); padding: var(--bms-space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--bms-border) 70%, transparent); font: 500 13px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-toggle { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--bms-border-strong); border-radius: var(--bms-radius-1); }
#machineCostingFields .zmc-toggle label { display: inline-flex; }
#machineCostingFields .zmc-toggle label + label { border-left: 1px solid var(--bms-border); }
#machineCostingFields .zmc-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#machineCostingFields .zmc-toggle span { padding: 4px 12px; background: var(--bms-surface); color: var(--bms-text-muted); font: 650 12px/1.5 var(--bms-font-ui); }
#machineCostingFields .zmc-toggle input[value="YES"]:checked + span { background: var(--bms-success); color: var(--bms-surface); }
#machineCostingFields .zmc-toggle input[value="NO"]:checked + span { background: var(--bms-warning); color: var(--bms-surface); }
#machineCostingFields .zmc-toggle input:focus-visible + span { outline: 2px solid var(--bms-focus); outline-offset: -2px; }
#machineCostingFields .zmc-decide { display: flex; align-items: center; gap: var(--bms-space-3); margin-top: var(--bms-space-3); }
#machineCostingFields .zmc-decide label { color: var(--bms-text); font: 650 13px/1.4 var(--bms-font-ui); }
#machineCostingFields .zmc-decide .zmc-in { max-width: 210px; }
#machineCostingFields .zmc-gate-state { margin: var(--bms-space-3) 0 0; color: var(--bms-text-muted); font: 600 12px/1.5 var(--bms-font-ui); }
#machineCostingFields .zmc-gate-state.is-bad { color: var(--bms-danger); }

#machineCostingFields .zmc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bms-space-3); padding: var(--bms-space-4); }
#machineCostingFields .zmc-field { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }
#machineCostingFields .zmc-field-cell { display: flex; align-items: center; gap: var(--bms-space-2); }
#machineCostingFields .zmc-field-cell em { flex: none; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); font-style: normal; }
#machineCostingFields .zmc-field.is-lock b { display: inline-flex; align-items: center; min-height: var(--bms-control-compact); color: var(--bms-text); font: 700 14px/1.3 var(--bms-font-data); }
#machineCostingFields .zmc-guide { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--bms-space-3); padding: var(--bms-space-4); }
#machineCostingFields .zmc-guide dt { color: var(--bms-text-muted); font: 600 12px/1.5 var(--bms-font-ui); }
#machineCostingFields .zmc-guide dd { margin: 0; color: var(--bms-text); font: 500 12px/1.5 var(--bms-font-ui); }
#machineCostingFields .zmc-rule { margin: 0 0 var(--bms-space-4); padding: var(--bms-space-3) var(--bms-space-4); border-left: 3px solid var(--bms-warning); border-radius: 0 var(--bms-radius-1) var(--bms-radius-1) 0; background: var(--bms-warning-soft); color: color-mix(in srgb, var(--bms-warning) 78%, var(--bms-text)); font: 620 13px/1.5 var(--bms-font-ui); }
@media (max-width: 1180px) {
  #machineCostingFields .zmc-grid { grid-template-columns: minmax(0, 1fr); }
  #machineCostingFields .zmc-rail { position: static; }
}

/* --- Bước 7 của đơn bán máy: tiến độ phục hồi máy (DDR-019) ------------------------------------- */
#machineRestorePreview[hidden] { display: none; }
#machineRestorePreview { grid-column: 1 / -1; display: grid; gap: var(--bms-space-4); }
#machineRestorePreview .zmr-card { padding: var(--bms-space-5); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
#machineRestorePreview .zmr-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); margin-bottom: var(--bms-space-3); }
#machineRestorePreview .zmr-head h3 { margin: 0; color: var(--bms-text); font: 700 15px/1.3 var(--bms-font-ui); }
#machineRestorePreview .zmr-head span { color: var(--bms-primary); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#machineRestorePreview .zmr-head p { flex: 1 0 100%; margin: 0; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }
#machineRestorePreview .zmr-bar { height: 10px; border-radius: 999px; background: var(--bms-neutral-soft); overflow: hidden; }
#machineRestorePreview .zmr-bar i { display: block; height: 100%; border-radius: 999px; background: var(--bms-success); }
#machineRestorePreview .zmr-table { width: 100%; border-collapse: collapse; }
#machineRestorePreview .zmr-table :is(th, td) { padding: var(--bms-space-2) var(--bms-space-3); border-bottom: 1px solid var(--bms-border); font-size: 13px; text-align: left; vertical-align: middle; }
#machineRestorePreview .zmr-table th { color: var(--bms-text-muted); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .05em; text-transform: uppercase; }
#machineRestorePreview .zmr-table td strong { display: block; color: var(--bms-text); font: 700 13px/1.4 var(--bms-font-ui); }
#machineRestorePreview .zmr-table td small { display: block; color: var(--bms-text-muted); font: 500 12px/1.4 var(--bms-font-ui); }
#machineRestorePreview .zmr-table input[type="text"] { width: 100%; min-height: var(--bms-control-compact); }
#machineRestorePreview .zmr-opts { display: flex; gap: var(--bms-space-3); white-space: nowrap; }
#machineRestorePreview .zmr-opts label { display: inline-flex; align-items: center; gap: 6px; color: var(--bms-text); font: 600 12px/1.3 var(--bms-font-ui); }

/* --- Bước 10 của đơn bán máy: biên bản lắp đặt và nghiệm thu (DDR-026) ------------------------- */
#machineAcceptance[hidden] { display: none; }
#machineAcceptance { display: grid; gap: var(--bms-space-4); margin-bottom: var(--bms-space-4); }
#machineAcceptance .zac-card { padding: var(--bms-space-5); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
#machineAcceptance .zac-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); margin-bottom: var(--bms-space-4); }
#machineAcceptance .zac-head span { color: var(--bms-text-subtle); font: 600 11px/1.4 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#machineAcceptance .zac-head h3 { margin: 2px 0 0; color: var(--bms-text); font: 700 17px/1.3 var(--bms-font-ui); }
#machineAcceptance .zac-head p { margin: 0; max-width: 46ch; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }

#machineAcceptance .zac-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bms-space-3); margin: 0; }
#machineAcceptance .zac-profile-grid dt { color: var(--bms-text-subtle); font: 600 11px/1.5 var(--bms-font-ui); letter-spacing: .04em; text-transform: uppercase; }
#machineAcceptance .zac-profile-grid dd { margin: 2px 0 0; color: var(--bms-text); font: 600 13px/1.5 var(--bms-font-ui); }

#machineAcceptance .zac-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--bms-space-5); }
#machineAcceptance .zac-group h4 { display: flex; align-items: center; gap: var(--bms-space-2); margin: 0 0 var(--bms-space-2); color: var(--bms-text); font: 700 13px/1.4 var(--bms-font-ui); }
#machineAcceptance .zac-group h4 i { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; border-radius: var(--bms-radius-1); background: color-mix(in srgb, var(--bms-surface) 88%, var(--bms-info)); color: var(--bms-info); font: 700 11px/1 var(--bms-font-data); font-style: normal; }
#machineAcceptance .zac-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bms-space-3); padding: var(--bms-space-2) 0 var(--bms-space-2) var(--bms-space-3); border-bottom: 1px solid var(--bms-border); border-left: 2px solid transparent; }
#machineAcceptance .zac-row > span { color: var(--bms-text-muted); font: 500 13px/1.45 var(--bms-font-ui); }
#machineAcceptance .zac-row > span b { margin-left: 3px; color: var(--bms-danger); font-weight: 700; }
#machineAcceptance .zac-row select { width: 150px; min-height: var(--bms-control-compact); }
/* Hạng mục bắt buộc chưa đạt phải nhìn ra ngay — đó là thứ đang chặn việc ký biên bản. */
#machineAcceptance .zac-row.is-waiting { border-left-color: var(--bms-warning); }
#machineAcceptance .zac-row.is-rework { border-left-color: var(--bms-danger); }
#machineAcceptance .zac-row.is-passed { border-left-color: var(--bms-success); }

#machineAcceptance .zac-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--bms-space-3); }
#machineAcceptance .zac-record-row { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }
#machineAcceptance .zac-record-row :is(input, textarea) { width: 100%; min-height: var(--bms-control-compact); }

#machineAcceptance .zac-verdict { margin: var(--bms-space-4) 0 var(--bms-space-3); padding: var(--bms-space-3) var(--bms-space-4); border-radius: var(--bms-radius-2); font: 700 13px/1.5 var(--bms-font-ui); }
#machineAcceptance .zac-verdict.is-ok { background: color-mix(in srgb, var(--bms-surface) 88%, var(--bms-success)); color: var(--bms-success); }
#machineAcceptance .zac-verdict.is-warn { background: color-mix(in srgb, var(--bms-surface) 88%, var(--bms-warning)); color: var(--bms-warning); }
#machineAcceptance .zac-verdict.is-bad { background: color-mix(in srgb, var(--bms-surface) 88%, var(--bms-danger)); color: var(--bms-danger); }