/* ==========================================================================
   AGGROW Pricing/Quotation/Analytics (trang) — class trích từ inline style, theme-aware.
   ========================================================================== */

/* ==========================================================================
   Procurement (/procurement) — "Gọi Hàng Thông Minh"
   ========================================================================== */

/* ── Tiêu đề + icon nhấn xanh lá (brand accent giữ nguyên) ── */
.pp-proc-title-icon       { vertical-align: middle; color: var(--mud-palette-success); }

/* ── Surface card chung (panel, lưới, empty) ── */
.pp-proc-surface          { background: var(--mud-palette-surface); border-radius: 12px; }

/* ── Summary KPI cards (gradient brand giữ #fff) ── */
.pp-proc-kpi              { border-radius: 12px; }
.pp-proc-kpi--red         { background: linear-gradient(135deg, var(--mud-palette-error-darken), var(--mud-palette-error)); }
.pp-proc-kpi--orange      { background: linear-gradient(135deg, #e65100, #f57c00); }
.pp-proc-kpi--blue        { background: linear-gradient(135deg, #1a237e, #283593); }
.pp-proc-kpi--teal        { background: linear-gradient(135deg, #004d40, #00897b); }
.pp-proc-kpi-label        { color: rgba(255, 255, 255, 0.70); }
.pp-proc-kpi-value        { color: #fff; font-weight: 700; }

/* ── Ma trận ABC-XYZ ── */
.pp-proc-matrix           { display: grid; grid-template-columns: 60px repeat(3, 1fr); gap: 4px; max-width: 600px; }
.pp-proc-matrix-xyz       { text-align: center; font-size: 0.7rem; font-weight: 700; color: rgba(var(--ag-fg-rgb), 0.6); padding: 4px; }
.pp-proc-matrix-abc       { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: rgba(var(--ag-fg-rgb), 0.6); }
.pp-proc-matrix-cell      { border-radius: 8px; text-align: center; cursor: pointer; transition: transform 0.2s; }
.pp-proc-matrix-cell-count { color: #fff; font-weight: 700; }
.pp-proc-matrix-cell-label { color: rgba(255, 255, 255, 0.70); font-size: 0.6rem; }

/* ── Lưới dữ liệu — text phụ trên surface ── */
.pp-proc-muted            { color: rgba(var(--ag-fg-rgb), 0.5); }
.pp-proc-faint            { color: rgba(var(--ag-fg-rgb), 0.3); }
.pp-proc-mono             { font-family: monospace; font-size: 0.75rem; }
.pp-proc-vendor-suggest   { color: var(--mud-palette-success); }
.pp-proc-empty-icon       { font-size: 80px; color: rgba(var(--ag-fg-rgb), 0.15); }

/* ── Detail dialog ── */
.pp-proc-dialog-table     { background: transparent; }
.pp-proc-dialog-sub       { color: rgba(var(--ag-fg-rgb), 0.5); }

/* ==========================================================================
   CustomerPriceView (/customer-price-view) — "Xem Giá theo Khách hàng"
   ========================================================================== */

.pp-cpv-surface           { border-radius: 12px; background: var(--mud-palette-surface); }

/* ── Strip thông tin khách ── */
.pp-cpv-info-strip        { border-radius: 8px; background: var(--ag-surface-raised); border: 1px solid var(--ag-border); }

/* ── Bảng ma trận giá ── */
.pp-cpv-table-wrap        { overflow-x: auto; border-radius: 10px; border: 1px solid var(--ag-border); }
.pp-cpv-table             { border-collapse: collapse; width: 100%; }
.pp-cpv-th                { padding: 8px 6px; font-weight: 600; font-size: 0.78rem; white-space: nowrap; vertical-align: middle; }
.pp-cpv-td                { vertical-align: middle; }
.pp-cpv-row-head         { background: rgba(var(--ag-fg-rgb), 0.06); }
.pp-cpv-row-subhead      { background: rgba(var(--ag-fg-rgb), 0.03); }
.pp-cpv-cell-divider     { border-right: 1px solid rgba(var(--ag-fg-rgb), 0.1); }
.pp-cpv-cell-divider-soft { border-right: 1px solid rgba(var(--ag-fg-rgb), 0.06); }
.pp-cpv-uom-head         { text-align: center; color: rgba(var(--ag-fg-rgb), 0.5); }
.pp-cpv-period-th        { text-align: center; padding: 6px 8px; cursor: pointer; }
.pp-cpv-period-name      { font-size: 0.82rem; font-weight: 700; color: var(--mud-palette-primary); }
.pp-cpv-period-code      { font-size: 0.72rem; color: rgba(var(--ag-fg-rgb), 0.6); margin: 1px 0; }
.pp-cpv-status-badge     { display: inline-block; font-size: 0.68rem; font-weight: 600; color: #fff; padding: 1px 6px; border-radius: 10px; }
.pp-cpv-pricelist-code   { font-size: 0.65rem; color: rgba(var(--ag-fg-rgb), 0.4); margin-top: 2px; }
.pp-cpv-daterow-label    { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.35); padding: 3px 10px; }
.pp-cpv-daterow-cell     { text-align: center; font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.4); }
.pp-cpv-prod-cell        { padding: 6px 10px; }
.pp-cpv-prod-name        { font-size: 0.82rem; font-weight: 500; line-height: 1.3; }
.pp-cpv-prod-code        { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.45); }
.pp-cpv-uom-cell         { text-align: center; font-size: 0.75rem; color: rgba(var(--ag-fg-rgb), 0.55); }
.pp-cpv-price-cell       { text-align: right; padding: 6px 10px; }
.pp-cpv-price-cell--empty { color: rgba(var(--ag-fg-rgb), 0.2); }
.pp-cpv-price-val        { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.pp-cpv-price-range      { font-size: 0.65rem; color: rgba(var(--ag-fg-rgb), 0.35); }
.pp-cpv-price-dash       { font-size: 0.8rem; }
.pp-cpv-empty-row        { text-align: center; padding: 24px; color: rgba(var(--ag-fg-rgb), 0.3); font-style: italic; }
.pp-cpv-body-row         { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); }
.pp-cpv-body-row:hover td { background: rgba(var(--ag-fg-rgb), 0.03); }

/* ── Legend chú thích màu (giá tăng đỏ / giảm xanh) ── */
.pp-cpv-legend-up        { color: var(--mud-palette-error); font-weight: 600; }
.pp-cpv-legend-down      { color: var(--mud-palette-success); font-weight: 600; }

/* ==========================================================================
   PeriodCoveragePanel (component) — độ phủ Báo Giá kỳ này
   ========================================================================== */

.pp-cov-loading          { border-radius: 8px; border: 1px dashed var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), 0.04); }
.pp-cov-panel            { border-radius: 8px; border: 1px solid var(--ag-border); overflow: hidden; }
.pp-cov-header           { background: var(--ag-surface-sunken); padding: 8px 16px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); display: flex; align-items: center; cursor: pointer; }
.pp-cov-covered          { color: var(--mud-palette-success); }
.pp-cov-body             { padding: 16px; background: var(--ag-surface-soft); max-height: 450px; overflow-y: auto; }

/* ── Nhóm theo Alliance ── */
.pp-cov-group            { margin-bottom: 12px; }
.pp-cov-group-head       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pp-cov-alliance-label   { color: var(--mud-palette-warning); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pp-cov-alliance-pl      { color: var(--mud-palette-tertiary); margin-left: 8px; }
.pp-cov-alliance-btn     { font-weight: 700; border-radius: 4px; height: 24px; padding: 0 8px; }
.pp-cov-other-label      { color: var(--mud-palette-info); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; }

/* ── Bảng team ── */
.pp-cov-table            { font-size: 0.75rem; border: 1px solid rgba(var(--ag-fg-rgb), 0.05); }
.pp-cov-table thead tr   { background: rgba(var(--ag-fg-rgb), 0.02); }
.pp-cov-th               { font-weight: 700; }
.pp-cov-th--center       { font-weight: 700; text-align: center; }
.pp-cov-team-name        { font-weight: 400; color: rgba(var(--ag-fg-rgb), 0.6); }
.pp-cov-cell-pl          { color: var(--mud-palette-tertiary); }
.pp-cov-team-btn         { font-weight: 600; }

/* ==========================================================================
   MarginQuickAnalysis (/margin-quick) — "Phân Tích Biên Độ Nhanh"
   ========================================================================== */

/* ── Loading overlay (full-screen) ── */
.pp-mqa-overlay          { position: fixed; inset: 0; z-index: 9999; background: rgba(var(--ag-shadow-rgb), 0.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.pp-mqa-overlay-title    { color: rgba(var(--ag-fg-rgb), 0.7); margin-top: 14px; font-size: 14px; font-weight: 500; }
.pp-mqa-overlay-sub      { color: rgba(var(--ag-fg-rgb), 0.35); margin-top: 4px; font-size: 12px; }

/* ── Toolbar / header ── */
.pp-mqa-toolbar          { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.pp-mqa-toolbar-icon     { color: var(--mud-palette-warning); font-size: 28px; }
.pp-mqa-toolbar-title    { font-weight: 700; margin: 0; }
.pp-mqa-toolbar-hint     { color: rgba(var(--ag-fg-rgb), 0.4); margin: 0; }
.pp-mqa-upload-panel     { border: 1px solid var(--ag-border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.pp-mqa-upload-row       { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pp-mqa-parse-info       { color: rgba(var(--ag-fg-rgb), 0.4); margin-top: 6px; display: block; }

/* ── KPI compact cards (filter) — biến thể accent/bg theme-aware ── */
.pp-mqa-kpi-click        { cursor: pointer; }
.pp-mqa-kpi--slate       { --kpi-bg: rgba(var(--ag-fg-rgb), 0.05);             --kpi-accent: var(--ag-text-muted); }
.pp-mqa-kpi--blue        { --kpi-bg: rgba(var(--mud-palette-info-rgb), 0.07);  --kpi-accent: var(--mud-palette-info); }
.pp-mqa-kpi--amber       { --kpi-bg: rgba(var(--mud-palette-warning-rgb), 0.07); --kpi-accent: var(--mud-palette-warning); }
.pp-mqa-kpi--green       { --kpi-bg: rgba(var(--mud-palette-success-rgb), 0.07); --kpi-accent: var(--mud-palette-success); }
.pp-mqa-kpi--orange      { --kpi-bg: rgba(249, 115, 22, 0.07);                 --kpi-accent: #f97316; }
.pp-mqa-kpi--red         { --kpi-bg: rgba(var(--mud-palette-error-rgb), 0.07); --kpi-accent: var(--mud-palette-error); }
.pp-mqa-kpi--gray        { --kpi-bg: rgba(100, 116, 139, 0.07);                --kpi-accent: #64748b; }
.pp-mqa-kpi--purple      { --kpi-bg: rgba(167, 139, 250, 0.07);                --kpi-accent: #a78bfa; }

/* ── Filter bar ── */
.pp-mqa-filter-row       { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-mqa-count            { color: rgba(var(--ag-fg-rgb), 0.4); margin-left: auto; }
.pp-mqa-sub-faint        { font-size: 0.8rem; opacity: 0.5; }

/* ── Volume toggle ── */
.pp-mqa-vol-toggle       { display: flex; align-items: center; gap: 4px; background: rgba(var(--ag-fg-rgb), 0.05); border-radius: 6px; padding: 2px 4px; }
.pp-mqa-vol-label        { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.4); padding: 0 4px; }
.pp-mqa-vol-btn          { border: none; border-radius: 4px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-weight: 600; background: transparent; color: rgba(var(--ag-fg-rgb), 0.45); }
.pp-mqa-vol-btn.active    { background: var(--mud-palette-warning); color: #000; }

/* ── Hint row ── */
.pp-mqa-hint             { color: rgba(var(--ag-fg-rgb), 0.25); margin-bottom: 6px; display: block; }
.pp-mqa-hint-barcode     { color: var(--mud-palette-info); }
.pp-mqa-hint-cost        { color: var(--mud-palette-success); }

/* ── Result table ── */
.pp-mqa-table-wrap       { border-radius: 8px; border: 1px solid var(--ag-border); overflow: auto; max-height: calc(100vh - 470px); }
.pp-mqa-table            { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 960px; }
.pp-mqa-thead            { position: sticky; top: 0; z-index: 1; }
.pp-mqa-thead tr         { background: var(--ag-surface-sunken); text-align: left; }
.pp-mqa-th               { padding: 7px 10px; font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.45); white-space: nowrap; }
.pp-mqa-th--text         { padding: 7px 10px; font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.45); }
.pp-mqa-th--right        { padding: 7px 10px; font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.45); text-align: right; }
.pp-mqa-th--right-nowrap { padding: 7px 10px; font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.45); text-align: right; white-space: nowrap; }
.pp-mqa-th-editable      { font-size: 9px; color: var(--mud-palette-success); font-weight: 400; margin-left: 4px; }
.pp-mqa-th-vol           { padding: 7px 10px; font-weight: 600; color: rgba(var(--ag-fg-rgb), 0.45); text-align: right; white-space: nowrap; cursor: pointer; }
.pp-mqa-th-vol-icon      { color: var(--mud-palette-warning); }
.pp-mqa-row              { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); }
.pp-mqa-td-idx           { padding: 6px 10px; color: rgba(var(--ag-fg-rgb), 0.3); font-size: 11px; }
.pp-mqa-td-barcode-edit  { padding: 4px 6px; white-space: nowrap; }
.pp-mqa-bc-loading       { font-family: monospace; font-size: 11px; color: rgba(var(--mud-palette-info-rgb), 0.5); }
.pp-mqa-bc-spinner       { width: 12px; height: 12px; margin-left: 4px; vertical-align: middle; }
.pp-mqa-bc-link          { font-family: monospace; font-size: 11px; color: var(--mud-palette-info); cursor: pointer; border-bottom: 1px dashed rgba(var(--mud-palette-info-rgb), 0.4); padding-bottom: 1px; }
.pp-mqa-ac-item          { font-size: 11px; padding: 2px 4px; line-height: 1.5; }
.pp-mqa-ac-barcode       { font-family: monospace; color: var(--mud-palette-info); }
.pp-mqa-ac-itemcode      { color: rgba(var(--ag-fg-rgb), 0.35); margin-left: 6px; font-size: 10px; }
.pp-mqa-ac-uom           { background: rgba(var(--mud-palette-warning-rgb), 0.15); color: var(--mud-palette-warning); border-radius: 3px; padding: 1px 5px; font-size: 10px; margin-left: 4px; }
.pp-mqa-ac-name          { color: rgba(var(--ag-fg-rgb), 0.7); font-size: 10px; margin-top: 1px; }
.pp-mqa-td-itemcode      { padding: 6px 10px; font-family: monospace; color: var(--mud-palette-info); white-space: nowrap; font-size: 11px; }
.pp-mqa-td-name          { padding: 6px 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-mqa-td-uom           { padding: 6px 10px; color: rgba(var(--ag-fg-rgb), 0.5); }
.pp-mqa-td-status        { padding: 6px 10px; white-space: nowrap; }
.pp-mqa-td-sell          { padding: 6px 10px; text-align: right; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.pp-mqa-td-cost          { padding: 4px 8px; text-align: right; white-space: nowrap; }
.pp-mqa-cost-input       { width: 90px; background: rgba(var(--mud-palette-success-rgb), 0.07); border: 1px solid var(--mud-palette-success); border-radius: 4px; color: var(--mud-palette-text-primary); padding: 3px 6px; font-size: 11px; text-align: right; outline: none; }
.pp-mqa-cost-link        { cursor: pointer; border-bottom: 1px dashed rgba(var(--mud-palette-success-rgb), 0.35); padding-bottom: 1px; }
.pp-mqa-tag-period       { font-size: 9px; color: #818cf8; background: rgba(99, 102, 241, 0.15); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.pp-mqa-tag-edited       { font-size: 9px; color: #a78bfa; background: rgba(167, 139, 250, 0.15); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.pp-mqa-td-num           { padding: 6px 10px; text-align: right; white-space: nowrap; }
.pp-mqa-pct-bar          { display: block; height: 3px; margin-top: 2px; border-radius: 2px; opacity: 0.6; }
.pp-mqa-td-simqty        { padding: 6px 10px; text-align: right; white-space: nowrap; color: rgba(var(--ag-fg-rgb), 0.55); }
.pp-mqa-td-simrev        { padding: 6px 10px; text-align: right; white-space: nowrap; color: var(--mud-palette-info); font-weight: 500; }
.pp-mqa-td-simprofit     { padding: 6px 10px; text-align: right; white-space: nowrap; }
.pp-mqa-dash             { color: rgba(var(--ag-fg-rgb), 0.2); }
.pp-mqa-empty-row        { padding: 24px; text-align: center; color: rgba(var(--ag-fg-rgb), 0.3); }
.pp-mqa-tfoot-row        { background: var(--ag-surface-sunken); border-top: 2px solid rgba(var(--ag-fg-rgb), 0.12); }
.pp-mqa-foot-label       { padding: 6px 10px; font-weight: 700; color: rgba(var(--ag-fg-rgb), 0.6); font-size: 11px; }
.pp-mqa-foot-qty         { padding: 6px 10px; text-align: right; font-weight: 700; color: rgba(var(--ag-fg-rgb), 0.55); }
.pp-mqa-foot-rev         { padding: 6px 10px; text-align: right; font-weight: 700; color: var(--mud-palette-info); }
.pp-mqa-foot-profit      { padding: 6px 10px; text-align: right; font-weight: 700; }

/* ==========================================================================
   CustomerMarginTargets (/customer-margin-targets) — Margin mục tiêu theo Khách
   ========================================================================== */

/* ── Loading overlay ── */
.pp-cmt-overlay          { position: fixed; inset: 0; z-index: 9999; background: rgba(var(--ag-shadow-rgb), 0.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.pp-cmt-overlay-text     { color: rgba(var(--ag-fg-rgb), 0.7); margin-top: 14px; font-size: 14px; font-weight: 500; }

/* ── Page header ── */
.pp-cmt-header           { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pp-cmt-header-icon-box  { width: 44px; height: 44px; border-radius: 10px; background: rgba(251, 191, 36, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pp-cmt-header-icon      { color: #fbbf24; font-size: 26px; }
.pp-cmt-header-main      { flex: 1; min-width: 200px; }
.pp-cmt-breadcrumb       { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.3); margin-bottom: 2px; flex-wrap: wrap; }
.pp-cmt-breadcrumb-cur   { color: rgba(var(--ag-fg-rgb), 0.5); }
.pp-cmt-breadcrumb-period { background: rgba(52, 211, 153, 0.15); color: #34d399; border-radius: 4px; padding: 1px 8px; font-weight: 600; }
.pp-cmt-title            { font-size: 18px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.pp-cmt-subtitle         { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.45); margin-top: 2px; }

/* ── Control panel ── */
.pp-cmt-panel            { border: 1px solid var(--ag-border); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.pp-cmt-panel-body       { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: rgba(var(--ag-fg-rgb), 0.015); }
.pp-cmt-panel-tag        { display: flex; align-items: center; gap: 6px; min-width: 72px; align-self: center; }
.pp-cmt-panel-tag-icon   { color: #a78bfa; font-size: 16px; }
.pp-cmt-panel-tag-label  { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: rgba(var(--ag-fg-rgb), 0.35); text-transform: uppercase; }

/* ── Period select-item ── */
.pp-cmt-opt              { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pp-cmt-opt-status       { width: 52px; font-size: 10px; font-weight: 700; }
.pp-cmt-opt-date         { color: rgba(var(--ag-fg-rgb), 0.35); font-size: 10px; }

/* ── Summary chips ── */
.pp-cmt-chips            { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.pp-cmt-chip            { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.pp-cmt-chip--green      { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.pp-cmt-chip--purple     { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); }
.pp-cmt-chip--neutral    { background: rgba(var(--ag-fg-rgb), 0.05); color: rgba(var(--ag-fg-rgb), 0.5); border: 1px solid rgba(var(--ag-fg-rgb), 0.12); }
.pp-cmt-chip--red        { background: rgba(248, 113, 113, 0.12); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); }
.pp-cmt-chip--amber      { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
.pp-cmt-chip--info       { background: rgba(96, 165, 250, 0.12); color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.3); }
.pp-cmt-chip--btn        { cursor: pointer; user-select: none; transition: filter .12s, box-shadow .12s; }
.pp-cmt-chip--btn:hover  { filter: brightness(1.18); }
.pp-cmt-chip--sel        { box-shadow: 0 0 0 2px rgba(var(--ag-fg-rgb), 0.55); filter: brightness(1.15); }
.pp-cmt-chip--clear      { background: rgba(var(--ag-fg-rgb), 0.06); color: rgba(var(--ag-fg-rgb), 0.7); border: 1px solid rgba(var(--ag-fg-rgb), 0.18); }
.pp-cmt-chip-sep         { width: 1px; height: 18px; background: rgba(var(--ag-fg-rgb), 0.1); }
.pp-cmt-count            { color: rgba(var(--ag-fg-rgb), 0.4); margin-left: auto; }

/* ── AI suggestion banner ── */
.pp-cmt-ai-banner        { margin-bottom: 10px; }
.pp-cmt-ai-text          { font-size: 13px; line-height: 1.45; }
.pp-cmt-ai-note          { color: rgba(var(--ag-fg-rgb), 0.6); }
.pp-cmt-ai-meta          { margin-top: 4px; font-size: 11.5px; color: rgba(var(--ag-fg-rgb), 0.55); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pp-cmt-ai-meta strong   { color: rgba(var(--ag-fg-rgb), 0.85); }
.pp-cmt-ai-link          { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.pp-cmt-ai-link-ic       { font-size: 14px !important; }
.pp-cmt-ai-refresh       { padding: 2px !important; }
.pp-cmt-ai-rule          { color: rgba(245, 158, 11, 0.9); }

/* ── Margin 3 kỳ (trend) ── */
.pp-cmt-trend            { display: inline-flex; gap: 9px; align-items: baseline; justify-content: center; }
.pp-cmt-trend-pt         { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pp-cmt-trend-lbl        { font-size: 9px; color: rgba(var(--ag-fg-rgb), 0.4); }
.pp-cmt-trend-val        { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.8); font-variant-numeric: tabular-nums; }
.pp-cmt-trend-arrow      { font-size: 13px; font-weight: 700; align-self: center; }

/* ── Targets table ── */
.pp-cmt-table            { border: 1px solid var(--ag-border); border-radius: 10px; overflow: hidden; }
.pp-cmt-cell-code        { font-family: monospace; color: #93c5fd; font-size: 12px; font-weight: 600; }
.pp-cmt-cell-name        { color: rgba(var(--ag-fg-rgb), 0.8); font-size: 12px; }
.pp-cmt-cell-dash        { color: rgba(var(--ag-fg-rgb), 0.25); font-size: 12px; }
.pp-cmt-cell-default     { color: rgba(var(--ag-fg-rgb), 0.35); font-size: 12px; }
.pp-cmt-cell-empty       { color: rgba(var(--ag-fg-rgb), 0.2); }
.pp-cmt-cell-actual      { font-family: monospace; color: rgba(var(--ag-fg-rgb), 0.7); font-size: 12px; font-weight: 600; }
.pp-cmt-input            { width: 130px; margin: 0 auto; }
.pp-cmt-badge            { font-size: 11px; padding: 2px 9px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.pp-cmt-norecords        { color: rgba(var(--ag-fg-rgb), 0.35); padding: 24px; text-align: center; }

/* ── Empty state ── */
.pp-cmt-empty            { border: 1px dashed rgba(var(--ag-fg-rgb), 0.12); border-radius: 12px; padding: 48px 24px; text-align: center; }
.pp-cmt-empty-icon       { color: rgba(var(--ag-fg-rgb), 0.2); font-size: 48px; }
.pp-cmt-empty-text       { color: rgba(var(--ag-fg-rgb), 0.4); margin-top: 8px; }

/* ==========================================================================
   QuotationCreate (/quotations/create) — class trích từ inline style (.pp-qc-).
   Phần động (width:@x, color:@bien điều kiện) vẫn giữ inline mỏng trong .razor.
   ========================================================================== */

/* ── Tiện ích chữ/typo dùng lại ── */
.pp-qc-fw600            { font-weight: 600; }
.pp-qc-italic           { font-style: italic; }
.pp-qc-icon-mid         { vertical-align: middle; }
.pp-qc-icon-text-bottom { vertical-align: text-bottom; }

/* ── Filter bar (expansion panels): nền nổi nhẹ + viền theo theme ── */
.pp-qc-filter-panels {
    border-radius: var(--ag-radius, 8px);
    background: var(--ag-surface-raised);
    border: 1px solid var(--ag-border);
}

/* ── Nút "Tạo từ Excel" (sizing + weight) ── */
.pp-qc-btn-upload { height: 40px; min-width: 180px; font-weight: 600; }

/* ── Empty-state (chưa chọn kỳ) ── */
.pp-qc-empty-paper { background: var(--mud-palette-surface); border-radius: 12px; text-align: center; }
.pp-qc-empty-icon  { font-size: 64px; color: rgba(var(--ag-fg-rgb), 0.15); }

/* ── Cảnh báo "chưa có giá vốn": gradient error→warning + viền error ── */
.pp-qc-warn-paper {
    background: linear-gradient(135deg,
                rgba(var(--mud-palette-error-rgb), 0.08),
                rgba(var(--mud-palette-warning-rgb), 0.06));
    border-radius: 12px;
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.30);
}
.pp-qc-warn-icon  { font-size: 56px; color: var(--mud-palette-error); }
.pp-qc-warn-title { font-weight: 700; color: var(--mud-palette-error); }

/* ── Nút "Xác nhận nạp giá vốn" (sizing/shape, không màu) ── */
.pp-qc-btn-loadcost { font-weight: 700; letter-spacing: 0.5px; border-radius: 24px; padding: 8px 24px; }

/* ── Link tới Kỳ báo giá + caption mờ ── */
.pp-qc-muted-6 { opacity: 0.6; }
.pp-qc-link    { color: var(--mud-palette-primary); font-weight: 600; text-decoration: underline; }

/* ── Alert chiến lược: viền dashed info, bỏ shadow ── */
.pp-qc-strategy-alert { border-radius: 6px; box-shadow: none; border: 1px dashed var(--mud-palette-info); }

/* ── Overlay loading: chữ trên nền scrim tối → giữ trắng ── */
.pp-qc-overlay-text { color: #fff; }

/* ── Khung lưới sản phẩm ── */
.pp-qc-grid-paper { background: var(--mud-palette-surface); border-radius: 8px 8px 0 0; }

/* ── Ô "Sản phẩm" ── */
.pp-qc-item-code  { font-weight: 600; color: var(--mud-palette-primary); }
.pp-qc-item-group { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.30); margin-left: 3px; }
.pp-qc-item-name  { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Cột "Giá vốn / Tham khảo": các dòng phụ (sizing + màu mờ) ── */
.pp-qc-ref-md   { font-size: 0.78rem; }
.pp-qc-ref-sm   { font-size: 0.75rem; }
.pp-qc-hist-line { border-top: 1px dashed rgba(var(--ag-fg-rgb), 0.10); margin-top: 1px; padding-top: 1px; }

/* ── Cột "Giá Chung & Policy" ── */
.pp-qc-policy-sub { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.50); }

/* ── Nhãn so sánh % (vs T.trước / vs Cùng kỳ) ── */
.pp-qc-cmp-label { color: rgba(var(--ag-fg-rgb), 0.45); }

/* ── Tooltip SL dự tính ── */
.pp-qc-qty-cap { font-size: 0.65rem; color: rgba(var(--ag-fg-rgb), 0.40); }
.pp-qc-qty-val { font-weight: 700; font-size: 0.88rem; color: var(--mud-palette-info); }

/* ── Badge gợi ý (BG Gốc / T-1 / YoY): phần TĨNH; màu giữ inline động ── */
.pp-qc-badge        { font-size: 0.63rem; font-weight: 600; margin-bottom: 1px; }
.pp-qc-badge-strong { font-weight: 700; }
.pp-qc-badge-mb2    { margin-bottom: 2px; }

/* ── Khối 3 mức giá gợi ý ── */
.pp-qc-sug-mid     { font-weight: 700; color: var(--mud-palette-success); cursor: pointer; }
.pp-qc-sug-lowhigh { font-size: 0.68rem; display: flex; gap: 6px; justify-content: flex-end; }
.pp-qc-sug-low     { color: var(--mud-palette-info); cursor: pointer; }
.pp-qc-sug-high    { color: var(--mud-palette-warning); cursor: pointer; }
.pp-qc-sug-margin  { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.40); }

/* ── Giá trị màu semantic dùng lại trong bảng ── */
.pp-qc-v-error    { color: var(--mud-palette-error); }
.pp-qc-v-warning  { color: var(--mud-palette-warning); }
.pp-qc-v-success  { color: var(--mud-palette-success); }
.pp-qc-v-info     { color: var(--mud-palette-info); }
.pp-qc-v-disabled { color: var(--mud-palette-text-disabled); }
.pp-qc-v-faint    { color: rgba(var(--ag-fg-rgb), 0.50); }
.pp-qc-v-empty    { color: rgba(var(--ag-fg-rgb), 0.20); }

/* ── Sticky bottom bar: nền surface + viền trên primary ── */
.pp-qc-sticky-bar {
    border-radius: 0 0 8px 8px;
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--mud-palette-surface);
    border-top: 2px solid var(--mud-palette-primary);
}
.pp-qc-stat-label { color: rgba(var(--ag-fg-rgb), 0.50); }
.pp-qc-stat-val   { margin-left: 4px; }

/* ==========================================================================
   BulkPivotGrid (component) — inline → semantic classes (prefix pp-bpg-).
   Giữ nguyên toàn bộ class bq-* (bulk-quotation.css).
   ========================================================================== */

/* ── Header: cột BG Gốc (viền phải mảnh phân tách vùng sticky) ── */
.pp-bpg-col-bg { border-right: 1px solid rgba(var(--ag-fg-rgb), 0.1); }

/* ── Header: hàng "n KH" + nút xem danh sách KH ── */
.pp-bpg-header-cust { display: flex; align-items: center; gap: 4px; justify-content: center; }
.pp-bpg-cust-btn { padding: 0; min-width: 20px; width: 20px; height: 20px; color: var(--mud-palette-info); }

/* ── Dải biên GP (sàn ~ trần) — dùng ở body BG cell; head override cỡ chữ ── */
.pp-bpg-band-hint { font-size: 0.58rem; color: rgba(var(--ag-fg-rgb), 0.35); margin-top: 1px; line-height: 1.2; }
.pp-bpg-band-hint-head { font-size: 0.55rem; color: rgba(var(--ag-fg-rgb), 0.3); font-weight: 400; margin-top: 0; line-height: normal; }
.pp-bpg-band-floor { color: var(--mud-palette-error); }
.pp-bpg-band-ceil  { color: var(--mud-palette-success); }

/* ── Cột Sản phẩm (sticky) ── */
.pp-bpg-name-cell { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-bpg-name-meta { font-size: 0.75rem; color: var(--mud-palette-info); }
.pp-bpg-meta-barcode { color: var(--mud-palette-warning); }

/* ── Cột Giá Vốn (sticky) ── */
.pp-bpg-cost-cell { text-align: right; color: rgba(var(--ag-fg-rgb), 0.7); font-variant-numeric: tabular-nums; }
/* Dòng nhỏ muted: giá vốn KỲ TRƯỚC (để hiểu vì sao giá bán kỳ trước như vậy).
   Nhãn rất nhỏ, căn phải thẳng cột số; chỉ hiện khi khác giá vốn hiện tại. */
.pp-bpg-prevcost {
    margin-top: 1px;
    font-size: 0.56rem;
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(var(--ag-fg-rgb), 0.4);
    font-variant-numeric: tabular-nums;
    cursor: help;
}
/* Giá vốn ĐANG TĂNG (kỳ trước thấp hơn hiện tại) → tông cảnh báo nhạt. */
.pp-bpg-prevcost-up   { color: rgba(var(--mud-palette-error-rgb), 0.7); }
/* Giá vốn ĐANG GIẢM (kỳ trước cao hơn hiện tại) → tông tích cực nhạt. */
.pp-bpg-prevcost-down { color: rgba(var(--mud-palette-success-rgb), 0.7); }

/* ── Cột Giá T-1 (sticky) — cột giá so sánh, căn phải, màu phụ ── */
.pp-bpg-t1-cell { text-align: right; color: rgba(var(--ag-fg-rgb), 0.78); font-variant-numeric: tabular-nums; }
.pp-bpg-col-t1 { color: rgba(var(--ag-fg-rgb), 0.72); }

/* ── Cột BG Gốc (sticky) — viền phải mảnh ── */
.pp-bpg-bg-cell { text-align: right; font-weight: 700; color: var(--mud-palette-primary); border-right: 1px solid rgba(var(--ag-fg-rgb), 0.05); font-variant-numeric: tabular-nums; }

/* ── Khối nội dung 1 ô: gom decision-hint + input + badge + panel thành MỘT
   cụm căn giữa. max-width = 280px (trần): khi cột rộng (1 nhóm) khối KHÔNG
   giãn 2 đầu; khi cột hẹp (nhiều nhóm) width:100% co theo ô → không vỡ.
   Đổi con số 280px ở đây nếu muốn khối rộng/hẹp hơn. ── */
.pp-bpg-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/* ── Thân ô giá: dọc, gọn (decision-chip + giá gợi ý + lý do) ── */
.pp-bpg-cell-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 0 4px;
}

/* Hàng input: ô nhập "Giá gợi ý" + nút chi tiết "i". Giới hạn bề rộng & căn
   giữa để ô không kéo dài quá khổ khi chỉ hiển thị 1 nhóm (cột giãn rộng). */
.pp-bpg-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px 4px;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.pp-bpg-input-row .bq-price-wrapper { flex: 1 1 auto; min-width: 0; }

/* Nút "i": mở/đóng panel LS bán · SL · YoY · giả lập doanh thu. */
.pp-bpg-detail-btn {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.18);
    background: rgba(var(--ag-fg-rgb), 0.04);
    color: rgba(var(--ag-fg-rgb), 0.6);
    font-size: 0.66rem; font-weight: 800; font-style: italic; line-height: 1;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.pp-bpg-detail-btn:hover {
    background: rgba(var(--mud-palette-info-rgb), 0.16);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info);
}
.pp-bpg-detail-btn.active {
    background: var(--mud-palette-info);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-primary-text, #fff);
}

/* ── Hàng nút LẤY GIÁ NHANH cho RIÊNG từng ô (T-1 / Mong muốn) ──
   Đặt ngay dưới ô nhập trong .pp-bpg-cell-body. Pill nhỏ, đủ rõ để user thấy &
   bấm; màu phân biệt: T-1 = info (xanh dương), Mong muốn = success (xanh lá). */
.pp-bpg-fetch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 1px;
}
.pp-bpg-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.16);
    background: rgba(var(--ag-fg-rgb), 0.04);
    color: rgba(var(--ag-fg-rgb), 0.7);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pp-bpg-fetch-t1:hover {
    background: rgba(var(--mud-palette-info-rgb), 0.16);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info);
}
.pp-bpg-fetch-bg:hover {
    background: rgba(var(--mud-palette-success-rgb), 0.16);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

/* Chuỗi số 3 kỳ (LS bán / SL) trong panel chi tiết. */
.pp-bpg-series { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; text-align: right; }
.pp-bpg-series em { font-style: normal; font-weight: 600; }

/* ── Icon khoá khi dòng đã duyệt ── */
.pp-bpg-lock-icon { margin-right: 3px; font-size: 0.65rem; }

/* ── Nhãn "đã gồm VAT": CHIP nhỏ inline cạnh ô giá, GỘP 2 phần — tag "VAT n%"
   (warning) + "trước thuế <số>" (muted) — để liếc ngay số trước thuế mà không
   phải mở tooltip. Ô nhập vẫn là giá sau thuế; số trước thuế = FinalPrice/(1+VAT%). ── */
.pp-bpg-vat-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.6;
    color: rgba(var(--mud-palette-warning-rgb), 0.85);
    background: rgba(var(--mud-palette-warning-rgb), 0.1);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.2);
    cursor: help;
}
/* Tag % VAT (giữ tông warning đậm). */
.pp-bpg-vat-chip .pp-bpg-vat-tag { color: rgba(var(--mud-palette-warning-rgb), 0.95); }
/* Giá trước thuế: tông muted, phân tách bằng vạch mảnh — đỡ chói, dễ đọc số. */
.pp-bpg-vat-chip .pp-bpg-pretax {
    padding-left: 4px;
    border-left: 1px solid rgba(var(--mud-palette-warning-rgb), 0.28);
    color: rgba(var(--ag-fg-rgb), 0.62);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Dòng SẢN LƯỢNG tóm tắt: "SL trước 1.200 → dự tính 1.500" ──
   Một hàng nhỏ, muted, đặt ngay dưới ô nhập trong .pp-bpg-cell-body. Nhãn mờ,
   số tô đậm nhẹ (tabular-nums cho thẳng cột số); mũi tên tông success nhạt.
   Ở mode 1 cột cell-body căn trái (align-items:flex-start) → dòng này thẳng
   cùng mốc ô giá. Không tự đặt width cố định để khỏi phá grid 2 cột. ── */
.pp-bpg-qty-row {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 1px;
    font-size: 0.58rem;
    line-height: 1.4;
    color: rgba(var(--ag-fg-rgb), 0.42);
    cursor: help;
}
.pp-bpg-qty-label { font-weight: 600; letter-spacing: 0.01em; }
.pp-bpg-qty-val {
    font-weight: 800;
    color: rgba(var(--ag-fg-rgb), 0.72);
    font-variant-numeric: tabular-nums;
}
.pp-bpg-qty-proj { color: rgba(var(--mud-palette-success-rgb), 0.92); }
.pp-bpg-qty-arrow { color: rgba(var(--mud-palette-success-rgb), 0.7); font-weight: 700; padding: 0 1px; }

/* ── Ô trống (group không có giá) ── */
.pp-bpg-empty-cell { text-align: center; color: rgba(var(--ag-fg-rgb), 0.2); }

/* ── Footer: cụm nút batch action (sticky, colspan=4) ── */
.pp-bpg-foot-actions-cell { padding: 4px 6px; }
.pp-bpg-foot-actions { flex-wrap: wrap; }

/* ── Footer: ô tổng doanh thu / delta theo cột ── */
.pp-bpg-foot-amt { font-size: 0.68rem; font-weight: 700; color: var(--mud-palette-primary); }
.pp-bpg-foot-delta { font-size: 0.68rem; font-weight: 800; margin-left: 3px; }
.pp-bpg-foot-empty { font-size: 0.58rem; color: rgba(var(--ag-fg-rgb), 0.2); }

/* ── Dialog danh sách KH: bảng cuộn dọc ── */
.pp-bpg-cust-table { max-height: 400px; overflow-y: auto; }

/* ──────────────────────────────────────────────────────────────────────────
   BANNER HEADER (mode 1 CỘT) — thanh ngang gọn phía trên bảng gom toàn bộ
   thông tin nhóm (tên · N KH · DT/LN · Sàn/Trần/LS · ⚖ trọng số · Bias/Mùa vụ
   · cụm chỉnh cột). Các cụm phân tách bằng vạch dọc mảnh, cuộn ngang khi chật.
   Chỉ render khi VisibleGroups.Count == 1 → header cột <th> bên dưới thu mảnh.
   ────────────────────────────────────────────────────────────────────────── */
.pp-bpg-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 8px 14px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--ag-surface-sunken);
    border: 1px solid var(--ag-border);
    box-shadow: inset 0 1px 0 rgba(var(--ag-fg-rgb), 0.03);
}
/* Cụm con: vạch dọc mảnh ngăn cách (trừ cụm đầu). */
.pp-bpg-banner > * + * {
    position: relative;
    padding-left: 18px;
}
.pp-bpg-banner > * + *::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 24px;
    background: rgba(var(--ag-fg-rgb), 0.1);
}

/* ── Cụm nhận diện nhóm ── */
.pp-bpg-banner-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-bpg-banner-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mud-palette-info);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.pp-bpg-banner-cust { display: inline-flex; align-items: center; gap: 2px; }
.pp-bpg-banner-custcount {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(var(--ag-fg-rgb), 0.55);
}
.pp-bpg-banner-preset {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--mud-palette-warning);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-warning-rgb), 0.1);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.22);
    white-space: nowrap;
    cursor: help;
}

/* ── Cụm KPI DT / LN ── */
.pp-bpg-banner-kpis { display: flex; align-items: center; gap: 10px; cursor: help; }
.pp-bpg-banner-kpi {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}
.pp-bpg-banner-kpi b { color: var(--mud-palette-text-secondary); font-weight: 800; font-size: 0.62rem; }
.pp-bpg-banner-kpi-amt { font-weight: 800; color: rgba(var(--ag-fg-rgb), 0.88); font-variant-numeric: tabular-nums; }
.pp-bpg-banner-kpi em { font-style: normal; font-weight: 900; font-size: 0.66rem; }
.pp-bpg-banner-kpi em.up { color: var(--mud-palette-success); }
.pp-bpg-banner-kpi em.down { color: var(--mud-palette-error); }
.pp-bpg-banner-kpi em.flat { color: rgba(var(--ag-fg-rgb), 0.42); }

/* ── Cụm chiến lược (tái dùng .bq-strat-* từ bulk-quotation.css) ── */
.pp-bpg-banner-strategy {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.66rem;
    line-height: 1.3;
}
.pp-bpg-banner-wp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: rgba(var(--ag-fg-rgb), 0.5);
    font-size: 0.64rem;
    white-space: nowrap;
    cursor: help;
}

/* ── Cụm chỉnh cột (tái dùng .bq-adj-btn) ── */
.pp-bpg-banner-adjust { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.pp-bpg-banner-adjust-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(var(--ag-fg-rgb), 0.42);
    margin-right: 3px;
    white-space: nowrap;
}

/* Header cột THU MẢNH ở mode 1 cột — chỉ còn tên nhóm, căn trái cho gọn. */
.pp-bpg-col-header-slim { padding-top: 6px !important; padding-bottom: 6px !important; }
.pp-bpg-col-header-slim .bq-col-header-name { text-align: left; }

/* ──────────────────────────────────────────────────────────────────────────
   MODE 1 CỘT (.pp-bpg-single) — hay gặp ở chế độ Lịch sử.
   Thông tin nhóm đã lên banner phía trên; trong ô chỉ còn cụm nhập giá +
   chip + badge + nút "i".

   BỐ CỤC: CĂN TRÁI theo CỘT CỐ ĐỊNH (grid) để MỌI HÀNG thẳng cột dọc —
   trước đây căn giữa (margin:0 auto / justify-content:center) khiến mỗi hàng
   có số badge khác nhau → điểm bắt đầu trôi ngang → nhìn so le "nghiêng nghẹo".

   DOM trong ô: cell-stack > [ cell-body (decision-chip + input-row + lý do) ,
   bq-badges , bq-explain-panel ]. Vì BADGES là anh em của cell-body (KHÔNG nằm
   trong nó), grid phải đặt ở CELL-STACK:
     · Slot 1 — cell-body (ô giá + chip VAT + nút "i", + decision-chip/lý do trên)
                : rộng cố định --bpg-c1
     · Slot 2 — bq-badges (LN/T-1/BG/Lệch LS/REVIEW…) : phần còn lại, wrap nội bộ
   Bên TRONG slot 1, ô giá (--bpg-price) & chip VAT (--bpg-vat) có bề rộng cố định
   → ô giá và chip cũng thẳng cột con giữa các hàng. Panel chi tiết (khi mở) trải
   full 2 cột. Không phải đổi markup (vat-chip vẫn là con của input-row).
   Đổi các biến --bpg-* để chỉnh độ rộng.
   Khi ≥2 cột KHÔNG có class này → giữ nguyên layout dọc căn giữa. ── */
.pp-bpg-single {
    --bpg-price: 150px;   /* ô nhập giá (slot con)   */
    --bpg-vat: 150px;     /* chip VAT / "trước thuế"  */
    --bpg-info: 20px;     /* nút "i" (PriceExplainPopover) — cộng đủ để KHÔNG tràn slot 1 */
    /* cell-body = slot 1 = ô giá + chip VAT + nút "i" + 2 gap(8px) của input-row */
    --bpg-c1: calc(var(--bpg-price) + var(--bpg-vat) + var(--bpg-info) + 16px);
    --bpg-pad-left: 10px;
}
/* Stack = lưới 2 cột cố-định-trái: [cell-body --bpg-c1][badges co giãn]. */
.pp-bpg-single .pp-bpg-cell-stack {
    display: grid;
    grid-template-columns: var(--bpg-c1) minmax(0, 1fr);
    align-items: center;
    /* Khoảng đệm rõ giữa slot 1 (ô giá + chip VAT + nút "i") và slot 2 (badges)
       → nút "i" không bao giờ chạm/đè badge "LN…" đầu tiên. */
    column-gap: 18px;
    row-gap: 3px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--bpg-pad-left);
}
/* Slot 1 — cell-body: xếp DỌC (decision-chip / input-row / lý do), căn trái. */
.pp-bpg-single .pp-bpg-cell-body {
    grid-column: 1;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    padding: 0;
}
.pp-bpg-single .pp-bpg-cell-body > .bq-decision-chip { align-self: flex-start; }
/* Hàng nhập: ô giá + chip VAT + nút "i", căn TRÁI, không tràn slot. */
.pp-bpg-single .pp-bpg-input-row {
    width: 100%;
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px 8px;
}
/* Ô giá & chip VAT có bề rộng cố định → thẳng cột con giữa các hàng. */
.pp-bpg-single .pp-bpg-input-row .bq-price-wrapper {
    flex: 0 0 var(--bpg-price);
    width: var(--bpg-price);
    min-width: 0;
}
.pp-bpg-single .pp-bpg-input-row .pp-bpg-vat-chip {
    flex: 0 0 var(--bpg-vat);
    width: var(--bpg-vat);
    min-width: 0;
    overflow: hidden;
}
/* Nút "i" — bề rộng cố định, KHÔNG co/giãn → nằm gọn cuối slot 1, không tràn sang badge. */
.pp-bpg-single .pp-bpg-input-row .pp-bpg-detail-btn { flex: 0 0 var(--bpg-info); }
/* Slot 2 — badges: cột cuối, căn TRÁI, wrap NỘI BỘ (không đẩy lệch slot khác). */
.pp-bpg-single .bq-badges {
    grid-column: 2;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
}
/* Panel chi tiết (khi mở) trải full 2 cột, xuống dưới hàng nội dung. */
.pp-bpg-single .bq-explain-panel {
    grid-column: 1 / -1;
    margin-top: 2px;
}
/* Cột hẹp (rất hiếm ở 1 cột): xếp dọc 1 cột, vẫn căn trái cho khỏi vỡ. */
@media (max-width: 720px) {
    .pp-bpg-single .pp-bpg-cell-stack {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 6px;
    }
    .pp-bpg-single .pp-bpg-input-row { flex-wrap: wrap; }
    .pp-bpg-single .pp-bpg-input-row .bq-price-wrapper,
    .pp-bpg-single .pp-bpg-input-row .pp-bpg-vat-chip { flex: 0 0 auto; width: auto; }
    .pp-bpg-single .bq-badges { grid-column: 1; justify-content: flex-start; }
    .pp-bpg-banner { gap: 6px 12px; }
    .pp-bpg-banner-adjust { margin-left: 0; }
}