/* =====================================================================
 * quote-order.css — MODULE 10 · BÁO GIÁ & ĐƠN HÀNG
 * FORM : WEBAPP-QUOTE-ORDER-UI-V1-01
 * CONT : …-CONT-01-GLOBAL-REFINE-01 · AMAN-WEBAPP-GLOBAL-UI-BASELINE-01 (21/09/2026)
 *
 * BASELINE THỊ GIÁC = ảnh "KPI · Quản lý KPI" do Chủ sở hữu cung cấp.
 * Kế thừa NGỮ PHÁP, không chép nội dung:
 *   đầu module thấp (← Trang chủ · tên module · MỘT dòng mô tả) · tab gạch chân ngay
 *   dưới đầu module · MỘT hàng lọc có NHÃN NẰM TRONG Ô VIỀN · thẻ viền nhẹ bo 10px ·
 *   đầu bảng nền chìm · hàng đang chọn rõ mà không đậm · huy hiệu trạng thái nhỏ.
 *
 * VÌ SAO LÀ TỆP RIÊNG, KHÔNG NỐI VÀO styles.css (đo được, không phải sở thích):
 *   Bộ kiểm hồi quy của các FORM trước (CRM Vòng A · AI Quảng cáo) cắt styles.css
 *   "từ mốc của họ tới HẾT TỆP" rồi khẳng định phần đó chỉ chứa lớp của chính họ.
 *   Nối thêm ở cuối styles.css làm 4 phép kiểm của hai bộ đó chuyển đỏ — không phải
 *   vì CSS sai, mà vì phép cắt của họ ôm luôn phần mới. Tách tệp giữ styles.css
 *   GIỐNG HỆT TỪNG BYTE so với trước FORM ⇒ 0 hồi quy đo được.
 *
 * ĐÂY KHÔNG PHẢI HỆ THIẾT KẾ THỨ HAI:
 *   0 token mới · 0 mã màu hex · 0 rgba · 0 cỡ chữ dưới sàn 12,5px.
 *   Toàn bộ giá trị lấy từ :root canonical trong styles.css.
 *   Mọi bộ chọn nằm trong .qo-* nên không rò sang CRM/Product/KPI/Bài đăng/Quảng cáo.
 *   LIGHT_ONLY_V1 — không có khối theo chế độ màu của hệ điều hành.
 * ===================================================================== */

/* ---- 1 · ĐẦU MODULE — thấp, ba tầng chữ, không phải khối nhận diện ---- */
.qo-mod { min-width: 0; }
.qo-head { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--space-3); min-width: 0; }
.qo-head-back { display: flex; }
.qo-backhome {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: var(--font-meta); font-weight: var(--weight-semibold); color: var(--text-link);
}
.qo-backhome:hover { text-decoration: underline; }
.qo-backhome:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.qo-head-main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.qo-head-title {
  margin: 0; min-width: 0;
  font-size: var(--font-page-title); font-weight: var(--weight-bold);
  color: var(--brand-primary-hover); line-height: var(--line-tight);
}
.qo-head-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.qo-head-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
/* CONT-04 §3 — dòng mô tả thường trực dưới tiêu đề ĐÃ GỠ khỏi template.
   Hai lớp dưới đây giữ lại vì HELP_TEXT và các câu ghi chú khác còn dùng ngữ pháp
   này; đầu module nay chỉ còn: ← Trang chủ · TÊN MODULE · ⓘ · chip · Trợ lý AI. */
.qo-head-sub {
  margin: 0; font-size: var(--font-help); color: var(--text-secondary);
  line-height: var(--line-normal); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.qo-dotsep { color: var(--text-disabled); }
.qo-assistant-btn { white-space: nowrap; }
.qo-test-toggle {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--font-meta); color: var(--text-secondary);
  padding: 0 var(--space-3); height: var(--control-h-sm);
  border: 1px solid var(--border-default); border-radius: var(--control-radius);
  background: var(--bg-surface);
}

/* Chip trạng thái: phạm vi theo vai · THẬT/THỬ · cổng đang khoá.
   Ba thứ người bán phải biết TRƯỚC khi đọc bất kỳ con số nào — và mỗi thứ
   chỉ nói MỘT lần, không lặp lại bằng nút hay băng lớn. */
.qo-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px var(--space-3); border-radius: 999px;
  font-size: var(--font-badge); font-weight: var(--weight-semibold);
  border: 1px solid var(--border-soft); background: var(--bg-surface-soft); color: var(--text-secondary);
}
.qo-chip-scope { background: var(--bg-subtle); }
.qo-chip-real  { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success); }
.qo-chip-test  { background: var(--status-warning-soft); color: var(--status-warning); border-color: var(--status-warning); }
.qo-chip-lock  { background: var(--status-danger-soft);  color: var(--status-danger);  border-color: var(--status-danger); }

/* Dấu ⓘ — nơi chứa lời giải thích KỸ THUẬT, để nó không chiếm một hàng thường trực. */
.qo-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; flex: none;
  border: 0; border-radius: 999px; cursor: help;
  background: var(--bg-subtle); color: var(--text-muted);
  font-size: var(--font-badge); line-height: 1;
}
.qo-info:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
.qo-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg-subtle); color: var(--text-muted); font-size: var(--font-badge); line-height: 1;
}
.qo-help:hover, .qo-help[aria-expanded="true"] { background: var(--brand-primary-soft); color: var(--brand-primary); }
.qo-help-pop {
  position: absolute; z-index: var(--sticky-z-topbar); max-width: 460px;
  margin-top: var(--space-2); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-floating);
  font-size: var(--font-help); color: var(--text-secondary); line-height: var(--line-relaxed);
}
.qo-help-title { font-size: var(--font-card-title); font-weight: var(--weight-semibold);
  color: var(--text-primary); margin-bottom: var(--space-2); }
.qo-help-item + .qo-help-item { margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px dashed var(--border-soft); }
.qo-help-item b { color: var(--text-primary); }
.qo-help-pop .btn { margin-top: var(--space-3); }

/* ---- 2 · VỎ DÍNH TẦNG 3 — công thức chung B6, KHÔNG tự cộng offset ---- */
.qo-shell-sentinel { height: 1px; margin-bottom: -1px; }
.qo-shell {
  position: sticky; top: var(--sticky-module-top); z-index: var(--sticky-z-module);
  background: var(--bg-app); padding: 0 0 var(--space-2); margin: 0 0 var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--sticky-edge);
  min-width: 0;
}
.qo-shell.is-compact { padding-bottom: 6px; gap: 6px; }
.qo-shell.is-compact .qo-field-label { display: none; }
.qo-shell.is-compact .qo-field { padding-top: 0; padding-bottom: 0; height: var(--control-h); }

/* Tab: ĐÚNG ngữ pháp gạch chân của baseline — chữ đủ lớn, khoảng cách rộng,
   tab đang mở đậm + gạch dày. KHÔNG để chữ tab nhỏ hay chìm. */
.qo-tabs {
  display: flex; align-items: center; gap: var(--space-6); margin: 0;
  border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: thin; min-width: 0;
}
.qo-tabs .tab { flex: none; white-space: nowrap; font-size: var(--font-card-title); }

.qo-nav-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.qo-back { flex: none; white-space: nowrap; }
.qo-crumbs {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0;
  font-size: var(--font-meta); color: var(--text-secondary);
}
.qo-crumbs .crumb-sep { color: var(--text-muted); }
.qo-crumbs b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.qo-crumbs .crumb-link { color: var(--text-link); cursor: pointer; text-decoration: none; }
.qo-crumbs .crumb-link:hover { text-decoration: underline; }
.qo-crumb-mid { color: var(--text-secondary); }
.qo-work-header { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* ---- 3 · HÀNG LỌC — nhãn NẰM TRONG ô viền, đúng baseline ---- */
.qo-fbar { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; margin: 0; min-width: 0; }
.qo-field {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; flex: 1 1 128px;
  padding: 5px var(--control-pad-x);
  border: 1px solid var(--border-default); border-radius: var(--control-radius);
  background: var(--bg-surface);
}
/* Ô tìm co được: tab Đơn hàng có 7 ô lọc + tìm + xoá, ép basis rộng là hàng
   lọc vỡ làm hai ở 1440 — đúng thứ baseline cấm. Cho co, rồi để flex-grow
   chia lại phần dư nên ở màn rộng ô vẫn to như cũ. */
.qo-field-search { flex: 2 1 180px; }
.qo-field-label { font-size: var(--font-meta); color: var(--text-muted); }
.qo-field-act {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--space-2);
  border: 0; background: none; padding: 0;
}
.qo-input {
  border: 0; background: none; color: var(--text-primary);
  padding: 0; font-size: var(--font-body); font-weight: var(--weight-medium);
  width: 100%; min-width: 0; height: 20px;
}
.qo-input:focus { outline: none; }
.qo-field:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-primary-soft); }

/* ---- 4 · DẢI VIỆC CẦN XỬ LÝ — MỘT hàng ngang thấp, không phải thẻ KPI ---- */
.qo-quick {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.qo-quick-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex: 1 1 172px; min-width: 0; min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--tone-line); border-radius: var(--radius-md);
  background: var(--tone-bg); color: var(--text-primary);
  font: inherit; cursor: pointer; text-align: left;
}
.qo-quick-item:hover { box-shadow: var(--shadow-sm); }
.qo-quick-item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.qo-quick-ico { font-size: var(--font-body); color: var(--tone-fg); line-height: 1; flex: none; }
.qo-quick-label { font-size: var(--font-meta); font-weight: var(--weight-semibold); color: var(--tone-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qo-quick-num { margin-left: auto; font-size: var(--font-section-title); font-weight: var(--weight-bold);
  color: var(--tone-fg); line-height: 1; font-variant-numeric: tabular-nums; }
/* Màu nói NGHĨA (B3): vàng = cần người xử lý · xanh dương = tin trung tính · đỏ = gấp. */
.qo-tone-wait   { --tone-bg: var(--status-warning-soft); --tone-fg: var(--status-warning); --tone-line: var(--status-warning); }
.qo-tone-info   { --tone-bg: var(--status-info-soft);    --tone-fg: var(--status-info);    --tone-line: var(--status-info); }
.qo-tone-urgent { --tone-bg: var(--status-danger-soft);  --tone-fg: var(--status-danger);  --tone-line: var(--status-danger); }
/* "Cần HÀNH ĐỘNG" dùng màu hành động của hệ thống (--brand-primary, cùng màu nút chính).
   ⚠️ Đo được: --status-info-soft và --brand-primary-soft là CÙNG MỘT màu (#eff6ff), và
   hai màu chữ đều thuộc họ xanh lam ⇒ nếu giữ nền nhạt thì "Chờ đặt cọc" và "Đơn cần xử lý"
   gần như lẫn nhau. Nên thẻ hành động dùng NỀN TRẮNG + vạch trái dày — trông "bấm được",
   khác hẳn thẻ thông tin. Không tạo token màu mới. */
.qo-tone-action { --tone-bg: var(--bg-surface);            --tone-fg: var(--brand-primary);  --tone-line: var(--brand-primary); }
.qo-quick-item.qo-tone-action { box-shadow: inset 4px 0 0 0 var(--brand-primary); }

/* ---- 5 · KHUNG MASTER → DETAIL ---- */
.qo-panel { min-width: 0; }
.qo-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 34%); gap: var(--space-3); align-items: start; }
.qo-master { min-width: 0; }
.qo-detail { min-width: 0; align-self: start; display: flex; flex-direction: column; gap: var(--space-2); }
.qo-panel .panel { padding: var(--card-pad); border-radius: var(--radius-md); }
.qo-panel .panel-title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.qo-detail-head { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.qo-detail-head .panel-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.qo-detail-x {
  flex: none; width: var(--control-h-sm); height: var(--control-h-sm);
  border: 1px solid var(--border-default); border-radius: var(--control-radius);
  background: var(--bg-surface); color: var(--text-muted); cursor: pointer; font-size: var(--font-body);
}
.qo-detail-x:hover { border-color: var(--border-focus); color: var(--brand-primary); }
.qo-detail-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: none; }
/* BẪY ĐÃ DẪM Ở MODULE QUẢNG CÁO: panel là flex cột; nếu KHÔNG ghim flex:none cho
   các phần cố định thì phần đầu/chân bị bóp dẹt khi thân dài. Chỉ THÂN được cuộn. */
.qo-detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* CONT-05 §12 — trừ ĐỦ phần vỏ + dải 4 việc phía trên panel (≈410px ở Tổng quan, gồm hai hàng nút)
     để cụm nút hành động luôn nằm TRONG màn hình, không phải cuộn trang mới thấy.
     Đo trước khi sửa: 1440×1100 nút nằm ở y=1096–1132, tức ngoài màn hình. */
  max-height: clamp(300px, calc(100vh - var(--sticky-module-top, 69px) - 410px), 760px); }
.qo-detail-acts { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.qo-detail-acts .btn { flex: 1 1 auto; justify-content: center; }

/* Ảnh đại diện model — ô vuông nhỏ cạnh mã, đúng khuôn ảnh sản phẩm của baseline. */
.qo-mdl-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.qo-mdl-img { width: 72px; height: 72px; flex: none; object-fit: contain;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface-soft); }
.qo-mdl-img-empty { display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--font-badge); color: var(--text-disabled); padding: 4px; }
.qo-mdl-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qo-mdl-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- 6 · BẢNG ---- */
.qo-table-wrap { overflow-x: auto; min-width: 0; }
.qo-list, .qo-tree, .qo-mini { width: 100%; }
/* CONT-07 — hàng danh sách GỌN để 8 hàng + dải phân trang nằm trong màn hình 900px.
   Mã chứng từ, thẻ trạng thái, ngày, tiền, người phụ trách KHÔNG xuống dòng; chỉ tên
   khách được tối đa 2 dòng. Đo trước khi sửa: mỗi hàng ~100px, dải phân trang ở y≈1065. */
.qo-list td:first-child, .qo-list td.num, .qo-list th { white-space: nowrap; }
.qo-list td:nth-child(2) { min-width: 140px; }
/* Không để mã chứng từ gãy thành 3 dòng: chữ nhỏ hơn một chút, không xuống dòng. */
.qo-list td:first-child code { white-space: nowrap; }
/* Cột đầu của Kho mẫu là TÊN MẪU (dài), không phải mã chứng từ ⇒ được xuống dòng.
   Không có ngoại lệ này thì tên mẫu đẩy cột Trạng thái/AI/Cập nhật ra khỏi khung (đã đo). */
.qo-tw-center .qo-list td:first-child { white-space: normal; }
/* CHỈ bảng cây (5 cột) được xuống dòng ở đầu cột số — nó PHẢI vừa khung vì là bảng
   chính của Tổng quan. Bảng Báo giá (8 cột) và Đơn hàng (10 cột) giữ nowrap và CUỘN
   NGANG TRONG KHUNG: cho xuống dòng ở đó thì "Giá hiện tại" vỡ thành ba dòng một chữ. */
.qo-tree th.num { white-space: normal; }
.qo-tree th { vertical-align: bottom; }
/* Bảng nhỏ trong panel phải: đừng để tên model vỡ thành mỗi dòng một chữ.
   Thà cuộn ngang trong khung còn hơn cắt vụn chữ (luật B7). */
.qo-mini th, .qo-mini td { white-space: nowrap; }
.qo-row-link { cursor: pointer; }
/* Hàng đang chọn: RÕ mà KHÔNG đậm — nền nhạt + vạch trái, đúng baseline. */
.qo-row-link.is-sel { background: var(--pm-select-bg); box-shadow: inset 3px 0 0 0 var(--pm-select); }
/* CONT-05 §2 — DÒNG và MODEL phải khác nhau nhìn là thấy.
   Dòng: nền nhóm + viền trên + chữ đậm cỡ lớn hơn + mũi tên có ô + số model trên hàng.
   Model: thụt sâu + đường nối cây ├─ └─ + chữ thường. Chọn: nền + vạch trái dày + chữ đậm vừa. */
.qo-fam-row { cursor: pointer; background: var(--bg-surface-soft); }
.qo-fam-row td { border-top: 1px solid var(--border-default); }
.qo-fam-row.is-open { background: var(--bg-subtle); }
.qo-fam-row:hover { background: var(--bg-subtle); }
.qo-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 4px; border-radius: var(--radius-sm);
  background: var(--bg-surface); border: 1px solid var(--border-soft); color: var(--text-secondary);
  font-size: var(--font-meta); vertical-align: middle;
}
.qo-fam-name { font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); }
.qo-fam-count {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  font-size: var(--font-badge); font-weight: var(--weight-semibold); color: var(--text-secondary);
}
.qo-model-row { cursor: pointer; }
.qo-model-row td:first-child { padding-left: var(--space-6); }
.qo-model-row:hover { background: var(--bg-surface-soft); }
.qo-model-row.is-sel { background: var(--pm-select-bg); box-shadow: inset 4px 0 0 0 var(--pm-select); }
.qo-model-row.is-sel .qo-model-name { font-weight: var(--weight-semibold); color: var(--brand-primary-hover); }
.qo-branch { display: inline-block; width: 22px; margin-left: 18px; color: var(--text-disabled); font-family: monospace; }
.qo-dot { display: inline-block; width: 14px; color: var(--pm-select); }
.qo-model-name { font-weight: var(--weight-normal); color: var(--text-primary); }
/* TÊN lớn hơn và đậm hơn MÃ (B2) — mã chỉ để tra cứu. */
.qo-code { font-size: var(--font-meta); color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.qo-muted { color: var(--text-muted); }

/* ---- 7 · KHỐI NỘI DUNG TRONG PANEL ---- */
.qo-h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-body);
  font-weight: var(--weight-semibold); color: var(--text-primary);
  padding-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.qo-h4:first-child { margin-top: 0; }
.qo-note { margin: var(--space-2) 0 0; font-size: var(--font-help); color: var(--text-muted);
  line-height: var(--line-relaxed); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qo-loading { padding: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--font-help); }
.qo-kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.qo-kv-list { display: flex; flex-direction: column; gap: var(--space-2); }
.qo-kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qo-kv > span { font-size: var(--font-meta); color: var(--text-secondary); }
.qo-kv > b { font-size: var(--font-body); color: var(--text-primary); word-break: break-word; }
.qo-kv-gap { font-size: var(--font-help); color: var(--text-muted); line-height: var(--line-relaxed);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Ô GIÁ: dữ liệu chính phải nổi hơn chữ quanh nó. */
.qo-price { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--bg-surface-soft); border: 1px solid var(--border-soft); }
.qo-price-label { font-size: var(--font-meta); color: var(--text-secondary); }
.qo-price-val { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary);
  font-variant-numeric: tabular-nums; }

.qo-tpl { padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-surface-soft); margin-bottom: var(--space-2); }
.qo-tpl-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qo-tpl-meta { font-size: var(--font-help); color: var(--text-secondary); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.qo-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.qo-stat { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-soft);
  border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
.qo-stat > b { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); }

/* Lineage thương lượng: nhìn ra ngay giá chuẩn -> R0 -> R1 -> ... -> bản đang xem. */
.qo-lineage { display: flex; flex-direction: column; gap: 2px; }
.qo-lin-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 6px var(--space-3); border-radius: var(--control-radius); background: var(--bg-surface-soft);
  font-size: var(--font-body); }
.qo-lin-row > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qo-lin-std { background: var(--bg-subtle); color: var(--text-secondary); }
.qo-lin-row.is-cur { background: var(--brand-primary-soft); box-shadow: inset 3px 0 0 0 var(--brand-primary); }

.qo-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.qo-timeline > li { padding-left: var(--space-3); border-left: 2px solid var(--border-strong);
  font-size: var(--font-body); display: flex; flex-direction: column; gap: 1px; }

/* Ba cấp mẫu báo giá — cấp nào CHƯA CÓ thì nói thẳng, không vẽ ô rỗng. */
.qo-sub { margin: 0 0 var(--space-3); }
.qo-sub-title { font-size: var(--font-body); font-weight: var(--weight-semibold);
  color: var(--text-primary); margin-bottom: var(--space-2); }
.qo-lvl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.qo-lvl-item { padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-surface-soft); font-size: var(--font-help); color: var(--text-secondary); min-width: 0; }
.qo-lvl-item > b { display: block; font-size: var(--font-body); color: var(--text-primary); margin: 2px 0; }
.qo-lvl-tag { display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  font-size: var(--font-badge); font-weight: var(--weight-semibold);
  background: var(--bg-subtle); color: var(--text-secondary); }
.qo-lvl-on  { background: var(--status-success-soft); color: var(--status-success); }
.qo-lvl-gap { background: var(--status-warning-soft); color: var(--status-warning); }

/* Tên dòng sản phẩm thuộc khối NHẬN DIỆN của model (CONT-04 §12), không phải
   một dòng trong bảng thông số. */
.qo-mdl-fam { font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-semibold); }

.qo-modal .modal-card { max-width: min(760px, 100%); }

/* ---- 7b · BỘ LỌC NÂNG CAO (CONT-04 §7–§9) ---------------------------- *
   Hàng lọc thường trực chỉ giữ ô dùng hằng ngày; ô ít dùng nằm trong popover
   này. Huy hiệu số cho biết đang có mấy điều kiện phụ bật — người dùng không
   bao giờ bị lọc ngầm mà không thấy.                                        */
.qo-advbtn { white-space: nowrap; }
.qo-advbtn.is-on { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-soft); }
.qo-advnum {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 999px; background: var(--brand-primary); color: var(--bg-surface);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center;
}
.qo-advpop {
  position: absolute; right: 0; z-index: var(--sticky-z-topbar);
  margin-top: var(--space-2); padding: var(--space-4); width: min(520px, calc(100vw - 32px));
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-floating);
}
.qo-advpop-title {
  font-size: var(--font-card-title); font-weight: var(--weight-semibold);
  color: var(--text-primary); margin-bottom: var(--space-3);
}
.qo-advpop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.qo-advpop-grid .qo-field { flex: 1 1 auto; }
.qo-advpop-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.qo-field-act { position: relative; }

/* Khối "Mẫu báo giá nguồn" là KIẾN THỨC NỀN — đóng sẵn, mở khi cần, đúng ngữ
   pháp "chỉ dựng chi tiết khi người dùng cần" đang áp cho KPI. */
.qo-sub-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
}
.qo-sub-fold > summary::-webkit-details-marker { display: none; }
.qo-sub-fold > summary::before { content: "▸"; color: var(--text-muted); font-size: var(--font-meta); }
.qo-sub-fold[open] > summary::before { content: "▾"; }

/* ---- 7c · CONT-05 --------------------------------------------------- */
/* Tỷ trọng %: THÔNG TIN PHỤ — nhỏ hơn, nhạt hơn con số chính. */
.qo-quick-pct {
  margin-left: 4px; font-size: var(--font-meta); font-weight: var(--weight-semibold);
  color: var(--tone-fg, var(--text-muted)); opacity: .8;
}

/* Hành động panel model: MỘT nút chính, hai nút phụ. */
/* Panel phải chỉ rộng ~270px ở 1440 (đo) ⇒ ba nút KHÔNG vừa một hàng mà không cắt
   chữ ("Báo giá khách (3" bị cụt). Dùng flex co giãn: đủ rộng thì 3 nút một hàng;
   hẹp thì nút chính chiếm trọn hàng trên, hai nút phụ chia đôi hàng dưới. */
.qo-mdl-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qo-mdl-acts .btn { justify-content: center; white-space: nowrap; }
.qo-mdl-acts .qo-act-primary { flex: 1 1 100%; }
.qo-mdl-acts .qo-act-sec { flex: 1 1 0; min-width: 0; }
/* Đo theo BỀ RỘNG PANEL, không theo màn hình: panel ≥ 560px (ví dụ 1024 khi panel
   xuống dưới danh sách và trải rộng) thì đủ chỗ cho ba nút cùng một hàng. */
.qo-detail { container-type: inline-size; }
@container (min-width: 560px) {
  .qo-mdl-acts .qo-act-primary { flex: 1.4 1 0; }
}
.qo-act-sec { background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary); }
.qo-act-sec:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-soft); }
.qo-act-primary:focus-visible, .qo-act-sec:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Công tắc khung con của tab 4 — là ĐIỀU HƯỚNG (CONT-07 §1–§2), không phải bộ lọc.
   To hơn ô lọc, có biểu tượng, chữ đậm. Đang chọn khác KHÔNG chỉ bằng màu: nền trắng +
   gạch chân 3px (cùng ngữ pháp tab chính) + chữ đậm hơn. Không dùng màu trạng thái
   (đỏ/cam/xanh lá) cho điều hướng. Có khoảng cách rõ với ô lọc phía sau. */
.qo-subsw {
  display: inline-flex; align-self: stretch; flex: none; padding: 4px; gap: 4px;
  margin-right: var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle);
}
.qo-subsw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 var(--space-4); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-sm); background: none;
  font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-secondary);
}
.qo-subsw-btn:hover { background: var(--bg-surface); color: var(--text-primary); }
.qo-subsw-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.qo-subsw-btn.is-on {
  background: var(--bg-surface); color: var(--brand-primary); font-weight: var(--weight-bold);
  border-color: var(--border-default); box-shadow: var(--shadow-sm), inset 0 -3px 0 0 var(--brand-primary);
}
.qo-subsw-n {
  display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: var(--font-badge); font-weight: var(--weight-semibold);
  background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-soft);
}
.qo-subsw-btn.is-on .qo-subsw-n { background: var(--brand-primary-soft); color: var(--brand-primary); border-color: transparent; }
/* Ô tìm ở tab 4: CHỈ rộng vừa đủ — nhường chỗ cho điều hướng, bộ lọc chính và hành động. */
.qo-field.qo-field-search-sm { flex: 0 1 170px; min-width: 140px; max-width: 220px; }
/* Tab 4 có thêm công tắc khung con + nút Cấu hình ⇒ các ô lọc chính co hẹp hơn một
   chút để CẢ thanh công cụ vẫn là MỘT hàng ở 1440 (đo trước khi sửa: 2 hàng, dư ~150px). */
.qo-fbar-t4 > .qo-field:not(.qo-field-act):not(.qo-field-search-sm) { flex-basis: 112px; }

/* Kho mẫu: 3 vùng — cây · danh sách · chi tiết. */
.qo-tplw { display: grid; grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.8fr) minmax(300px, 1fr); gap: var(--space-3); align-items: start; }
.qo-tplw > .panel { min-width: 0; }
.qo-tw-tree { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow-y: auto; }
.qo-tw-famrow, .qo-tw-node {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; padding: 6px var(--space-2); border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: var(--font-body);
}
.qo-tw-famrow { background: var(--bg-surface-soft); margin-top: 4px; }
.qo-tw-famrow:hover, .qo-tw-node:hover { background: var(--bg-subtle); }
.qo-tw-node { padding-left: var(--space-2); }
.qo-tw-sum { font-weight: var(--weight-semibold); }
.qo-tw-node.is-sel { background: var(--pm-select-bg); box-shadow: inset 3px 0 0 0 var(--pm-select); font-weight: var(--weight-semibold); }
.qo-tw-n { margin-left: auto; font-size: var(--font-badge); color: var(--text-secondary); white-space: nowrap; }
.qo-tw-n.is-zero { color: var(--text-muted); font-style: italic; }
.qo-tw-center .tag { white-space: nowrap; }
/* Tên mẫu là cột CHÍNH — không để nó bị bóp thành 5 dòng vì các cột phụ giành chỗ
   (đo ở 1440: cột giữa 607px, tên mẫu gãy 5 dòng). Cột phụ không xuống dòng. */
.qo-tw-center td:first-child { min-width: 170px; }
.qo-tw-center td:not(:first-child), .qo-tw-center th { white-space: nowrap; }
.qo-warnlist { margin: 0; padding-left: var(--space-4); font-size: var(--font-help); color: var(--status-warning); }
.qo-notif-ledger { flex-wrap: wrap; }
.qo-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: var(--tone-bg); border: 2px solid var(--tone-line); }
.qo-cfg td { vertical-align: middle; }
/* Đo được: hộp 760px thì 7 cột cấu hình bóp các ô chọn còn "T", "Bậ", "Hiệ".
   Hộp cấu hình rộng hơn và mỗi ô chọn có bề rộng tối thiểu; hẹp hơn nữa thì
   bảng cuộn ngang TRONG khung của nó, không bóp chữ. */
.qo-modal .modal-card:has(.qo-cfg) { max-width: min(1040px, 100%); }
.qo-cfg select, .qo-cfg input { min-width: 108px; }
.qo-cfg td:first-child { min-width: 170px; }

/* ---- 7e · CONT-07 · PHÂN TRANG DÙNG CHUNG ----------------------------------------
   Một dải cho cả 4 danh sách, nằm ở ĐÁY khung danh sách. Trang hiện tại khác bằng
   nền + viền + chữ đậm (không chỉ màu); nút ←/→ tắt hẳn ở đầu/cuối. */
.qo-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-soft);
}
.qo-pager.is-single { justify-content: flex-start; }
.qo-pager-info { font-size: var(--font-meta); color: var(--text-secondary); }
.qo-pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.qo-page {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary);
  font-size: var(--font-body); font-weight: var(--weight-medium);
}
.qo-page:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.qo-page:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.qo-page.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--bg-surface); font-weight: var(--weight-bold); }
.qo-page:disabled { opacity: .45; cursor: not-allowed; }
.qo-page-gap { padding: 0 4px; color: var(--text-muted); }
.qo-pager-compact { display: none; font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); padding: 0 6px; }
.qo-stat-sub { display: block; margin-top: 2px; font-size: var(--font-meta); font-weight: var(--weight-normal); color: var(--text-secondary); }

/* ---- 7d · CONT-06 · dữ liệu THỬ dựng sẵn ---- */
/* Thẻ đang lọc ở tab 4 phải nhìn thấy là "đang chọn" — trước đây bấm xong không có dấu hiệu gì. */
.qo-quick-item.is-on { box-shadow: 0 0 0 2px var(--tone-line); }
.qo-quick-item.qo-tone-action.is-on { box-shadow: inset 4px 0 0 0 var(--brand-primary), 0 0 0 2px var(--tone-line); }
/* Nhãn THỬ nhỏ cạnh trường mà CHỈ dữ liệu dựng sẵn có (backend thật chưa có cột). */
.qo-fx-tag { font-size: var(--font-badge); padding: 0 6px; vertical-align: middle; }
.qo-sections { margin: 0 0 var(--space-2); padding-left: var(--space-5); font-size: var(--font-help); color: var(--text-secondary); columns: 2; column-gap: var(--space-4); }
@media (max-width: 767px) { .qo-sections { columns: 1; } }

/* ---- 8 · RESPONSIVE — kế thừa mốc khung chung, không tự đặt mốc riêng ---- */
@media (max-width: 1180px) {
  .qo-work { grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); }
}
@media (max-width: 1180px) {
  /* Kho mẫu: chi tiết xuống dưới, cây + danh sách giữ song song. */
  .qo-tplw { grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.6fr); }
  .qo-tplw > .qo-tw-right { grid-column: 1 / -1; order: 0; }
}
@media (max-width: 1024px) {
  /* Tablet: panel xuống dưới danh sách, vẫn là MỘT trang — không đổi bố cục thông tin. */
  .qo-work { grid-template-columns: minmax(0, 1fr); }
  .qo-detail { order: -1; }
  .qo-detail-body { max-height: clamp(240px, 46vh, 520px); }
  .qo-lvl, .qo-stat-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* Điện thoại: vỏ module KHÔNG dính (đồng bộ Bài đăng/Quảng cáo), danh sách đọc trước. */
  .qo-shell { position: static; box-shadow: none; }
  .qo-head-right { margin-left: 0; width: 100%; }
  .qo-head-right .pm-tab-assistant { flex: 1 1 auto; justify-content: center; }
  .qo-kv-grid { grid-template-columns: minmax(0, 1fr); }
  .qo-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .qo-quick-item { flex: 0 0 auto; min-width: 158px; }
  .qo-detail-acts .btn { flex: 1 1 100%; }
  /* Tầm chạm: .btn-xs chỉ cao 28px — quá nhỏ cho ngón tay. */
  .qo-back { flex: 1 1 100%; justify-content: center; min-height: 40px; }
  .qo-detail-body { max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
  /* Điện thoại: KHÔNG giữ 3 cột. Kho mẫu xếp chồng cây → danh sách → chi tiết. */
  .qo-tplw { grid-template-columns: minmax(0, 1fr); }
  .qo-tplw > .qo-tw-right { grid-column: auto; }
  /* .qo-detail có "order:-1" ở ≤1024 (đưa chi tiết lên trước danh sách). Kho mẫu thì
     KHÔNG: đo được chi tiết nhảy lên TRƯỚC cả cây. Thứ tự đúng: cây → danh sách → chi tiết. */
  .qo-tplw > .qo-tw-right { order: 0; }
  .qo-tw-tree { max-height: 40vh; }
  /* Nút hành động model: nút chính cả hàng, hai nút phụ chia đôi hàng dưới. */
  .qo-mdl-acts .qo-act-primary { flex-basis: 100%; }
  .qo-mdl-acts .btn { min-height: 40px; }
  .qo-subsw { width: 100%; margin-right: 0; }
  .qo-subsw-btn { flex: 1 1 50%; min-height: 44px; justify-content: center; padding: 0 var(--space-2); }
  /* Ô tìm trên điện thoại: một hàng riêng nhưng KHÔNG ép dài hết — vừa với ngón tay. */
  .qo-field.qo-field-search-sm { flex: 1 1 60%; max-width: none; }
  /* Phân trang rút gọn: ← 2 / 4 → — bấm được bằng ngón tay (44px). */
  .qo-pager { justify-content: center; }
  .qo-pager-info { width: 100%; text-align: center; }
  .qo-pager-btns .qo-page:not(.qo-page-nav), .qo-page-gap { display: none; }
  .qo-pager-compact { display: inline-block; }
  .qo-page-nav { min-width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  /* CONT-07 §4 · §21 — tab 4 trên điện thoại: ô tìm KHÔNG chiếm hết chiều ngang; nó
     chung một hàng với cụm hành động. Đo trước khi sửa: ô tìm rộng 375/375px. */
  .qo-fbar-t4 > .qo-field.qo-field-search-sm { flex: 1 1 52%; max-width: 60%; }
  .qo-fbar-t4 > .qo-field-act { flex: 1 1 40%; }
  /* Điện thoại: popover lọc nâng cao trải NGUYÊN chiều ngang của hàng lọc.
     .qo-field-act là một hàng flex, nên phải cho nó xuống dòng thì popover mới
     chiếm trọn bề ngang — đặt width:100% mà không wrap thì nó chỉ được ~196px
     (đã đo trên máy 375px). */
  .qo-field-act { flex-wrap: wrap; }
  .qo-advpop { position: static; width: 100%; flex: 1 1 100%; margin-top: var(--space-2); }
  .qo-advpop-grid { grid-template-columns: minmax(0, 1fr); }
  .qo-field, .qo-field-search { flex: 1 1 100%; }
  .qo-field-act { flex: 1 1 100%; }
  .qo-field-act .btn { flex: 1 1 auto; min-height: 40px; }
  .qo-test-toggle { flex: 1 1 100%; justify-content: center; }
  .qo-head-title { font-size: var(--font-section-title); }
}


/* =====================================================================
 * CONT-03 · HÀNH ĐỘNG BÁO GIÁ / ĐƠN HÀNG · TRỢ LÝ AI · NHẬP NGOÀI
 * Vẫn chỉ token canonical · vẫn khoá trong .qo-* · LIGHT_ONLY_V1.
 * ===================================================================== */

/* Hàng tiêu đề của thẻ danh sách: tên thẻ bên trái, hành động chính bên phải. */
.qo-master-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qo-master-head .panel-title { flex: 1 1 auto; min-width: 0; }
.qo-add { flex: none; white-space: nowrap; }

/* Menu "+ Thêm" — hai lựa chọn, mỗi lựa chọn có một dòng giải thích ngắn. */
.qo-addmenu {
  position: absolute; z-index: var(--sticky-z-topbar); min-width: 296px; max-width: 360px;
  margin-top: 4px; padding: var(--space-2);
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-floating);
  display: flex; flex-direction: column; gap: 2px;
}
.qo-addmenu-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--control-radius);
  background: none; cursor: pointer; font: inherit; color: var(--text-primary);
}
.qo-addmenu-item:hover { background: var(--brand-primary-soft); }
.qo-addmenu-item > b { font-size: var(--font-body); }
.qo-addmenu-item > span { font-size: var(--font-help); color: var(--text-muted); }

/* Nút bị khoá: nhạt đi nhưng VẪN ĐỌC ĐƯỢC, và luôn kèm ổ khoá + lý do ở tooltip.
   Cố ý không ẩn — ẩn thì không phân biệt được "có mà bị khoá" với "không có". */
.qo-locked { opacity: .62; cursor: not-allowed; }
.qo-lock { font-size: var(--font-badge); }
.qo-lockstate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--space-3); font-size: var(--font-badge);
}
.qo-acts-wrap { margin-top: 0; }
.qo-src { font-weight: var(--weight-medium); }

/* Trợ lý AI ngay trong báo giá */
.qo-ai { display: flex; flex-direction: column; gap: var(--space-3); }
.qo-ai-ctx, .qo-ai-ask, .qo-ai-out {
  padding: var(--space-3); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); background: var(--bg-surface-soft);
}
.qo-ai-ctx-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-2);
  font-size: var(--font-meta); font-weight: var(--weight-semibold); color: var(--text-secondary);
}
.qo-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qo-ai-chip {
  padding: 5px var(--space-3); border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); font-size: var(--font-help); cursor: pointer; text-align: left;
}
.qo-ai-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-soft); }
.qo-ai-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* Biểu mẫu ĐỀ XUẤT (nhập ngoài / tạo với AI) — ô nhập vô hiệu, không gửi đi đâu. */
.qo-pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.qo-pf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qo-pf-label { font-size: var(--font-meta); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.qo-pf-hint { font-size: var(--font-help); color: var(--text-muted); }
.qo-pf-in {
  height: var(--control-h); padding: 0 var(--control-pad-x);
  border: 1px solid var(--border-default); border-radius: var(--control-radius);
  background: var(--bg-surface-soft); color: var(--text-secondary); font-size: var(--font-body);
}
textarea.qo-pf-in { height: auto; padding: 6px var(--control-pad-x); }
/* ⚠️ ĐỆM DỌC CỦA HỘP THOẠI CHUNG ĐÈ MẤT ĐỆM Ở TRÊN — đo được: chữ Việt trong
   <select> bị CẮT MẤT DẤU DƯỚI (ọ, ộ) ở cả máy tính lẫn điện thoại.
   Lý do: `.modal-form select` của styles.css có độ đặc hiệu (0,1,1) > `.qo-pf-in`
   (0,1,0), nên padding 9px trên/dưới thắng; cộng viền thì lòng ô chỉ còn 14px
   trong khi dòng chữ 13.5px cần ~16px. Nâng độ đặc hiệu để đệm của module
   thắng lại, KHÔNG đổi chiều cao ô. */
.qo-sheet-body .qo-pf-in { height: var(--control-h); padding: 0 var(--control-pad-x); }
.qo-sheet-body textarea.qo-pf-in { height: auto; padding: 6px var(--control-pad-x); }
.qo-sheet-body { max-height: min(62dvh, 620px); overflow-y: auto; }

/* Phân loại đơn nhập ngoài: A lưu lịch sử · B đang thực hiện (chưa mở) */
.qo-cls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.qo-cls-item {
  padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--bg-surface-soft); font-size: var(--font-help); color: var(--text-secondary);
}
.qo-cls-item > b { display: block; font-size: var(--font-body); color: var(--text-primary); margin-bottom: 2px; }

/* Bảng bản thương lượng: hàng đang xem nổi nhẹ, không đậm. */
.qo-rev tbody tr.is-sel { background: var(--brand-primary-soft); }

@media (max-width: 767px) {
  .qo-pf-grid, .qo-cls { grid-template-columns: minmax(0, 1fr); }
  .qo-addmenu { min-width: 0; width: calc(100vw - 32px); }
  .qo-master-head .qo-add { flex: 1 1 100%; }
}