/* ─────────────────────────────────────────────────────────────────────────
   bao-loi.css — Công cụ "Báo lỗi sản phẩm" (FAB nổi + panel báo lỗi tại chỗ).
   GLOBAL (không scoped) vì:
     - Icon render qua MarkupString (VmIcons.Wrap) KHÔNG nhận scope attribute của .razor.css.
     - Picker overlay (qa-capture.js) tạo phần tử ngoài cây component.
   Prefix `qa-` cho mọi class. Màu/đổ bóng dùng token app.css (var(--brand) / var(--mud-palette-error)
   / var(--app-*)); chỉ dùng rgba literal cho ĐỔ BÓNG (theo tiền lệ dock-nav.css).

   Thang z-index (đồng bộ qa-capture.js: pick-box 2500 / pick-bar 2600):
     - FAB         = 1350 (trên Dock 1300, dưới scrim panel)
     - scrim panel = 2380
     - panel       = 2390  (dưới picker overlay để picker "khoét" được panel khi cần)
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --qa-danger:      var(--mud-palette-error, #ef4444);
    --qa-danger-soft: color-mix(in srgb, var(--mud-palette-error, #ef4444) 12%, #fff);
    --qa-radius:      16px;
    --qa-surface:     var(--app-surface, #fff);
    --qa-border:      var(--border-1, #e6e9ee);
    --qa-text:        var(--app-text-primary, #1f2937);
    --qa-muted:       var(--app-text-secondary, #6b7280);
}

/* ═══════════════════════ FAB (nút nổi) ═══════════════════════ */
.qa-fab {
    position: fixed;
    right: 22px;
    bottom: 152px;                 /* NẰM TRÊN dock đáy */
    width: 52px;
    height: 52px;
    border: none;
    border-radius: var(--qa-radius);
    background: var(--qa-danger);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1350;
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--qa-danger) 70%, transparent),
                0 4px 10px -4px rgba(8, 24, 40, .28);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
    will-change: transform;
    padding: 0;
}
.qa-fab:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--qa-danger) 88%, #000);
    box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--qa-danger) 78%, transparent),
                0 6px 14px -4px rgba(8, 24, 40, .32);
}
.qa-fab:active { transform: translateY(0); }
.qa-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--qa-danger) 45%, transparent); outline-offset: 2px; }
.qa-fab svg { width: 26px; height: 26px; display: block; }

/* Tooltip trái */
.qa-fab-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: #0f172a;
    color: #fff;
    font: 500 12.5px/1.4 var(--app-font, system-ui, sans-serif);
    padding: 6px 11px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
.qa-fab:hover .qa-fab-tip,
.qa-fab:focus-visible .qa-fab-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 900px) {
    .qa-fab { width: 48px; height: 48px; right: 16px; bottom: 144px; }
    .qa-fab svg { width: 24px; height: 24px; }
}
/* Nút nổi FAB ĐÃ ẨN ở MỌI kích thước (YC 2026-07-09 — gỡ nút góc dưới-phải gây vướng). Lối vào "Báo lỗi"
   chuyển hẳn lên nút trên topbar (MainLayout, mở panel qua BaoLoiLauncher) cho cả desktop lẫn mobile.
   Panel vẫn mở bình thường (bottom-sheet ở ≤520). Muốn bật lại FAB: bỏ rule display:none dưới đây. */
.qa-fab { display: none !important; }

/* ═══════════════════════ Scrim + Panel ═══════════════════════ */
.qa-scrim {
    position: fixed;
    inset: 0;
    z-index: 2380;
    background: rgba(15, 23, 42, .28);
    animation: qaFade .14s ease;
}
@keyframes qaFade { from { opacity: 0; } to { opacity: 1; } }

/* Shell bọc panel + pane nháp đặt cạnh nhau; align-items:stretch → 2 pane cao bằng nhau (top ngang banner) */
.qa-shell {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2390;
    display: flex;
    align-items: stretch;
    gap: 12px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 44px);
}
.qa-panel {
    position: relative;
    flex: 0 1 420px;
    max-width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 18px;
    box-shadow: 0 24px 64px -12px rgba(8, 24, 40, .34), 0 8px 20px -10px rgba(8, 24, 40, .2);
    overflow: hidden;
    /* Easing "ra mượt" (ease-out mạnh) + nâng layer compositor để mở panel không khựng. */
    animation: qaPanelIn .2s cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform, opacity;
    color: var(--qa-text);
}
@keyframes qaPanelIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Pane NHÁP bên trái — cùng chiều cao panel qua shell stretch → top ngang banner "Báo lỗi sản phẩm" */
.qa-drafts-pane {
    flex: 0 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 18px;
    box-shadow: 0 24px 64px -12px rgba(8, 24, 40, .34), 0 8px 20px -10px rgba(8, 24, 40, .2);
    overflow: hidden;
    animation: qaPanelIn .2s cubic-bezier(.22, 1, .36, 1) both;
    color: var(--qa-text);
}

/* ═══════════ "Chụp + cắt" — khoanh vùng trực tiếp trên trang (snipping, như chọn phần tử) ═══════════ */
.qa-region-active, .qa-region-active * { cursor: crosshair !important; }
.qa-region-box {
    position: fixed; z-index: 2500; pointer-events: none;
    border: 2px solid var(--qa-danger, #ef4444);
    background: color-mix(in srgb, var(--qa-danger, #ef4444) 8%, transparent);
    /* Lỗ khoét sáng giữa vùng chọn, làm tối phần còn lại (kiểu công cụ cắt ảnh). */
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .34);
    /* KHÔNG transition → khung bám con trỏ TỨC THÌ khi kéo, không trễ/khựng. */
}
.qa-region-bar {
    position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
    z-index: 2600; pointer-events: none;
    background: #0f172a; color: #fff;
    font: 500 13px/1.4 var(--app-font, system-ui, sans-serif);
    padding: 8px 16px; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    animation: qaFade .14s ease both;
}

/* Tôn trọng "giảm chuyển động" của HĐH + tránh khựng máy yếu: tắt animation/transition của công cụ. */
@media (prefers-reduced-motion: reduce) {
    .qa-fab, .qa-fab-tip, .qa-scrim, .qa-panel, .qa-region-bar,
    .qa-btn, .qa-chip, .qa-more-toggle svg, .qa-shot {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 520px) {
    .qa-shell {
        right: 0; left: 0; bottom: 0;
        max-width: none;
        max-height: 92vh;
        gap: 0;
    }
    .qa-panel {
        flex: 1 1 auto;
        max-width: none;
        border-radius: 18px 18px 0 0;
    }
    /* Hẹp: pane nháp chiếm trọn bề ngang, ẩn panel khi đang xem nháp (không đủ chỗ đặt cạnh) */
    .qa-drafts-pane { flex: 1 1 auto; border-radius: 18px 18px 0 0; }
    .qa-shell--drafts .qa-panel { display: none; }
}

/* ── Ẩn/hiện công cụ theo bề rộng ──────────────────────────────────────────────
   Mobile (≤520px) rút gọn form báo lỗi còn 3 phần: Chụp màn hình + Mô tả + Loại lỗi.
   Ẩn: "Chọn phần tử" + "Chụp + cắt" (cần con trỏ chính xác) và "Xem thêm" (chi tiết kỹ thuật).
   Web (>520px) mở hết công cụ. */
.qa-mobile-only { display: none; }
@media (max-width: 520px) {
    .qa-desktop-only,
    .qa-btn--desktop-only { display: none !important; }
    .qa-mobile-only { display: block; }
}

/* ── Header ── */
.qa-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 12px 16px;
    border-bottom: 1px solid var(--qa-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--qa-danger) 7%, #fff), var(--qa-surface));
}
.qa-head-ico {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--qa-danger) 14%, #fff);
    color: var(--qa-danger);
}
.qa-head-ico svg { width: 19px; height: 19px; }
.qa-head-txt { flex: 1 1 auto; min-width: 0; }
.qa-head-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.qa-head-sub {
    font-size: 12px; color: var(--qa-muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa-head-sub b { color: var(--qa-text); font-weight: 600; }
.qa-head-x {
    flex: 0 0 auto;
    border: none; background: transparent; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--qa-muted);
}
.qa-head-x:hover { background: color-mix(in srgb, var(--qa-danger) 10%, transparent); color: var(--qa-danger); }
.qa-head-x svg { width: 17px; height: 17px; }

/* Nút "Nháp (N)" trên header soạn thảo → mở danh sách nháp chưa gửi */
.qa-head-drafts {
    flex: 0 0 auto; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--qa-border));
    background: var(--brand-soft); color: var(--brand);
    font: 700 11.5px/1 var(--app-font, system-ui, sans-serif);
    padding: 6px 10px; border-radius: 999px; margin-right: 2px;
    transition: all .12s ease; white-space: nowrap;
}
.qa-head-drafts:hover { background: color-mix(in srgb, var(--brand) 18%, #fff); }
/* Nút "Danh sách" trên header soạn thảo → mở trang /bao-loi (gate quyền DAILY.BAOLOI View) */
.qa-head-list {
    flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-text);
    font: 600 11.5px/1 var(--app-font, system-ui, sans-serif);
    padding: 6px 10px; border-radius: 999px; margin-right: 2px;
    transition: all .12s ease; white-space: nowrap;
}
.qa-head-list:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--qa-border)); color: var(--brand); background: var(--brand-soft); }
.qa-head-list svg { width: 13px; height: 13px; }
/* Nút quay lại (←) ở header danh sách nháp */
.qa-head-back {
    flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; font-size: 19px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; color: var(--qa-text);
}
.qa-head-back:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }

/* ── Danh sách nháp chưa gửi ── */
.qa-drafts { display: flex; flex-direction: column; gap: 9px; }
.qa-draft {
    position: relative;
    border: 1px solid var(--qa-border); border-radius: 11px; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.qa-draft:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--qa-border)); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.qa-draft-open {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: none; background: transparent; padding: 10px 40px 10px 12px;
    border-radius: 11px; color: inherit; font-family: inherit;
}
.qa-draft-top { display: flex; align-items: baseline; gap: 8px; }
.qa-draft-screen { font-size: 12.5px; font-weight: 700; color: var(--brand); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-draft-time { font-size: 11px; color: var(--qa-muted); flex: 0 0 auto; }
.qa-draft-desc {
    font-size: 12.5px; color: var(--qa-text); margin-top: 3px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qa-draft-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.qa-draft-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font: 600 10.5px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-muted);
    background: var(--qa-surface, #f8fafc); border: 1px solid var(--qa-border);
    padding: 3px 7px; border-radius: 999px;
}
.qa-draft-badge--el { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--qa-border)); background: var(--brand-soft); }
.qa-draft-badge--el svg { width: 11px; height: 11px; }
.qa-draft-del {
    position: absolute; top: 7px; right: 7px;
    border: none; background: transparent; cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px; color: var(--qa-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.qa-draft-del:hover { background: color-mix(in srgb, var(--qa-danger) 12%, transparent); color: var(--qa-danger); }
.qa-draft-del svg { width: 15px; height: 15px; }
.qa-draft-confirm {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--qa-border); border-radius: 9px;
    padding: 4px 7px; box-shadow: 0 3px 12px rgba(0,0,0,.12);
    font-size: 11.5px; color: var(--qa-text);
}
.qa-draft-cfm-yes, .qa-draft-cfm-no {
    border: none; cursor: pointer; font: 700 11px/1 var(--app-font, system-ui, sans-serif);
    padding: 4px 9px; border-radius: 7px;
}
.qa-draft-cfm-yes { background: var(--qa-danger); color: #fff; }
.qa-draft-cfm-no { background: var(--qa-border); color: var(--qa-text); }

/* ── Body (cuộn) ── */
.qa-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.qa-sect { margin-bottom: 16px; }
.qa-sect:last-child { margin-bottom: 4px; }
.qa-label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--qa-text);
    margin-bottom: 7px;
}
.qa-label .qa-req { color: var(--qa-danger); margin-left: 2px; }
.qa-hint { font-size: 11.5px; color: var(--qa-muted); margin-top: 5px; }

/* ── Nút phụ (chọn phần tử / chụp ảnh) ── */
.qa-btn-line { display: flex; flex-wrap: nowrap; gap: 8px; }
/* 3 nút Công cụ LUÔN nằm trên 1 hàng — chia đều bề ngang, canh giữa, không xuống dòng */
.qa-btn-line .qa-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.qa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--qa-border); background: #fff;
    color: var(--qa-text);
    font: 600 12.5px/1 var(--app-font, system-ui, sans-serif);
    padding: 8px 12px; border-radius: 9px; cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.qa-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.qa-btn:disabled { opacity: .55; cursor: default; }
.qa-btn svg { width: 15px; height: 15px; }
.qa-btn--pick:hover:not(:disabled) { border-color: var(--qa-danger); color: var(--qa-danger); background: var(--qa-danger-soft); }

/* ── Textarea / input ── */
.qa-textarea, .qa-input {
    width: 100%;
    border: 1px solid var(--qa-border);
    border-radius: 10px;
    padding: 9px 11px;
    font: 400 13.5px/1.5 var(--app-font, system-ui, sans-serif);
    color: var(--qa-text);
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
}
.qa-textarea { min-height: 78px; }
.qa-textarea:focus, .qa-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── Card phần tử đã chọn ── */
.qa-el-card {
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--qa-border));
    background: color-mix(in srgb, var(--brand) 5%, #fff);
    border-radius: 10px; padding: 9px 11px;
    position: relative;
}
.qa-el-tag {
    font: 700 11.5px/1.4 ui-monospace, monospace;
    color: var(--brand);
    word-break: break-all;
}
.qa-el-text { font-size: 12px; color: var(--qa-text); margin-top: 3px; }
.qa-el-meta { font: 400 11px/1.4 ui-monospace, monospace; color: var(--qa-muted); margin-top: 3px; word-break: break-all; }
.qa-el-x {
    position: absolute; top: 7px; right: 7px;
    border: none; background: transparent; cursor: pointer; color: var(--qa-muted);
    width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
}
.qa-el-x:hover { background: color-mix(in srgb, var(--qa-danger) 12%, transparent); color: var(--qa-danger); }
.qa-el-x svg { width: 13px; height: 13px; }

/* ── Vùng kéo-thả ảnh ── */
.qa-drop {
    border: 1.5px dashed var(--qa-border); border-radius: 11px;
    padding: 12px; text-align: center; color: var(--qa-muted);
    font-size: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
    margin-top: 10px;
}
.qa-drop:hover, .qa-drop.qa-dragover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.qa-drop input[type=file] { display: none; }

/* ── Lưới thumbnail ảnh ── */
.qa-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 10px; }
.qa-shot {
    position: relative; border: 1px solid var(--qa-border); border-radius: 9px; overflow: hidden;
    aspect-ratio: 4 / 3; background: #f3f4f6;
}
.qa-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; position: relative; z-index: 1; }
.qa-shot-acts { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; z-index: 2; }
.qa-shot-btn {
    border: none; cursor: pointer; width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .58); color: #fff;
}
.qa-shot-btn:hover { background: rgba(15, 23, 42, .82); }
.qa-shot-btn.qa-shot-del:hover { background: var(--qa-danger); }
.qa-shot-btn svg { width: 12px; height: 12px; }
.qa-shot-crop-flag {
    position: absolute; left: 4px; bottom: 4px; z-index: 2;
    font: 700 9px/1 var(--app-font, system-ui, sans-serif); letter-spacing: .3px;
    background: rgba(15, 23, 42, .62); color: #fff; padding: 2px 5px; border-radius: 5px;
}

/* Thẻ "đang tải" (viền đứt) khi ảnh vừa crop/chụp đang decode — NẰM DƯỚI ảnh (z:0) nên ảnh decode
   xong tự PHỦ lên; dù event onload lỡ, ảnh vẫn che thẻ → không kẹt spinner. */
.qa-shot-loading {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--qa-border); border-radius: 9px;
    background: #f8fafc; color: var(--qa-muted);
}
.qa-shot-loading-txt { font: 600 9.5px/1 var(--app-font, system-ui, sans-serif); letter-spacing: .2px; }
.qa-shot-spin {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--qa-border); border-top-color: var(--qa-danger);
    animation: qaSpin .7s linear infinite;
}

/* Xem to ảnh đính kèm (lightbox) — NỔI trên panel/scrim (z cao nhất) nên không bị "dưới nền". */
.qa-imgview {
    position: fixed; inset: 0; z-index: 2700;
    display: flex; align-items: center; justify-content: center;
    padding: 32px; cursor: zoom-out;
    background: rgba(8, 16, 28, .82);
    animation: qaFade .14s ease both;
}
.qa-imgview img {
    max-width: 94vw; max-height: 92vh; object-fit: contain;
    border-radius: 10px; background: #fff; cursor: default;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .6);
}
.qa-imgview-x {
    position: fixed; top: 18px; right: 22px; width: 40px; height: 40px;
    border: none; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, .14); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s ease;
}
.qa-imgview-x:hover { background: rgba(255, 255, 255, .26); }
.qa-imgview-x svg { width: 20px; height: 20px; }

/* ── "Xem thêm" disclosure ── */
.qa-more-toggle {
    display: flex; align-items: center; gap: 6px; width: 100%;
    border: none; background: transparent; cursor: pointer;
    font: 600 12.5px/1 var(--app-font, system-ui, sans-serif); color: var(--brand);
    padding: 4px 0;
}
.qa-more-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.qa-more-toggle.qa-open svg { transform: rotate(90deg); }

/* ── Chip loại lỗi ── */
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-chip {
    border: 1px solid var(--qa-border); background: #fff; cursor: pointer;
    font: 600 12px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-text);
    padding: 6px 11px; border-radius: 999px; transition: all .12s ease;
}
.qa-chip:hover { border-color: var(--brand); color: var(--brand); }
.qa-chip.qa-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* ── Khối ngữ cảnh tự động / console / json ── */
.qa-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; }
.qa-meta-k { color: var(--qa-muted); white-space: nowrap; }
.qa-meta-v { color: var(--qa-text); word-break: break-word; }

.qa-console {
    margin-top: 8px; max-height: 168px; overflow-y: auto;
    border: 1px solid var(--qa-border); border-radius: 9px; background: #0f172a;
    padding: 8px 10px;
    font: 400 11px/1.5 ui-monospace, monospace;
}
.qa-log { display: flex; gap: 6px; padding: 1px 0; }
.qa-log-lv { flex: 0 0 auto; font-weight: 700; text-transform: uppercase; }
.qa-log-error .qa-log-lv { color: #f87171; }
.qa-log-warn .qa-log-lv { color: #fbbf24; }
.qa-log-info .qa-log-lv, .qa-log-log .qa-log-lv { color: #93c5fd; }
.qa-log-msg { color: #e5e7eb; word-break: break-word; white-space: pre-wrap; }
.qa-console-empty { color: var(--qa-muted); font-size: 11.5px; }

.qa-count-badge {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    font: 700 10px/1 var(--app-font, system-ui, sans-serif);
    padding: 2px 6px; border-radius: 999px;
}
.qa-count-error { background: color-mix(in srgb, var(--qa-danger) 14%, #fff); color: var(--qa-danger); }
.qa-count-warn { background: color-mix(in srgb, #f59e0b 16%, #fff); color: #b45309; }

.qa-json-box {
    margin-top: 8px; max-height: 200px; overflow: auto;
    border: 1px solid var(--qa-border); border-radius: 9px; background: #f8fafc;
    padding: 9px 11px; font: 400 11px/1.5 ui-monospace, monospace; color: var(--qa-text);
    white-space: pre; word-break: normal;
}

/* ── Footer ── */
.qa-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-top: 1px solid var(--qa-border); background: var(--qa-surface);
}
.qa-foot-status { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--qa-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-foot-status.qa-err { color: var(--qa-danger); }
.qa-btn-cancel {
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-text);
    font: 600 13px/1 var(--app-font, system-ui, sans-serif); padding: 9px 14px; border-radius: 9px; cursor: pointer;
}
.qa-btn-cancel:hover { background: #f3f4f6; }
.qa-btn-send {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: var(--qa-danger); color: #fff;
    font: 700 12.5px/1 var(--app-font, system-ui, sans-serif); padding: 8px 11px; border-radius: 9px; cursor: pointer;
    transition: background .12s ease;
}
.qa-btn-send:hover:not(:disabled) { background: color-mix(in srgb, var(--qa-danger) 88%, #000); }
.qa-btn-send:disabled { opacity: .5; cursor: default; }
.qa-btn-send svg { width: 15px; height: 15px; }
.qa-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
    border-radius: 50%; animation: qaSpin .7s linear infinite; }
@keyframes qaSpin { to { transform: rotate(360deg); } }

/* Footer compose 2 tầng: dòng trạng thái (nếu có) + thanh nút — Danh sách (trái) · Cải tiến · Báo lỗi (phải) */
.qa-foot--compose { flex-direction: column; align-items: stretch; gap: 8px; }
.qa-foot--compose .qa-foot-status { flex: 0 0 auto; }
/* 4 nút footer (Danh sách · Xoá form · [spacer] · Cải tiến · Báo lỗi) LUÔN trên 1 hàng */
.qa-foot-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.qa-foot-bar > button { white-space: nowrap; flex: 0 0 auto; }
.qa-foot-spacer { flex: 1 1 auto; min-width: 2px; }
.qa-foot-list {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-muted);
    font: 600 12px/1 var(--app-font, system-ui, sans-serif); padding: 7px 8px; border-radius: 9px;
}
.qa-foot-list:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--qa-border)); color: var(--brand); background: var(--brand-soft); }
.qa-foot-list svg { width: 14px; height: 14px; }
/* Nút "Xoá form" — nền giống "Danh sách" nhưng hover sắc đỏ (gợi ý làm trắng) + có trạng thái disabled. */
.qa-foot-clear {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-muted);
    font: 600 12px/1 var(--app-font, system-ui, sans-serif); padding: 7px 8px; border-radius: 9px;
}
.qa-foot-clear:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--mud-palette-error, #dc2626) 45%, var(--qa-border));
    color: var(--mud-palette-error, #dc2626);
    background: color-mix(in srgb, var(--mud-palette-error, #dc2626) 7%, #fff);
}
.qa-foot-clear:disabled { opacity: .45; cursor: default; }
.qa-foot-clear svg { width: 14px; height: 14px; }
.qa-btn-improve {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--qa-border)); background: color-mix(in srgb, #7c3aed 8%, #fff); color: #7c3aed;
    font: 700 12.5px/1 var(--app-font, system-ui, sans-serif); padding: 8px 10px; border-radius: 9px; transition: background .12s ease;
}
.qa-btn-improve:hover:not(:disabled) { background: color-mix(in srgb, #7c3aed 16%, #fff); }
.qa-btn-improve:disabled { opacity: .5; cursor: default; }
.qa-btn-improve svg { width: 15px; height: 15px; }

/* ═══════════════════════ Màn hình thành công ═══════════════════════ */
.qa-success { padding: 26px 22px; text-align: center; }
.qa-success-ico {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-success, #16a34a) 14%, #fff);
    color: var(--mud-palette-success, #16a34a);
}
.qa-success-ico svg { width: 28px; height: 28px; }
.qa-success-title { font-size: 16px; font-weight: 700; }
.qa-success-sub { font-size: 13px; color: var(--qa-muted); margin-top: 5px; }
.qa-success-code {
    display: inline-block; margin-top: 12px;
    font: 700 15px/1 ui-monospace, monospace; letter-spacing: .5px;
    color: var(--brand); background: var(--brand-soft); padding: 8px 14px; border-radius: 9px;
}
/* Mã lỗi bấm-được ở màn "đã gửi" → deep-link sang /bao-loi?id= */
.qa-success-code--link { border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .12s ease; }
.qa-success-code--link:hover { background: color-mix(in srgb, var(--brand) 18%, #fff); }
.qa-success-code-go { display: inline-flex; }
.qa-success-code-go svg { width: 15px; height: 15px; }
.qa-success-acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* ═══════════════════════ Crop dialog ═══════════════════════ */
/* #A (review 003): stage PHẢI bọc SÁT ảnh (width:fit-content) — nếu stage rộng hơn ảnh (ảnh dọc/hẹp
   letterbox 2 bên) thì toạ độ con trỏ đo theo mép stage ≠ theo mép ảnh → crop LỆCH. fit-content +
   bỏ căn-giữa img (img lấp đầy stage, gốc trên-trái) ⇒ elRect(stage) == box ảnh, offset khớp ảnh. */
.qa-crop-stage {
    position: relative; user-select: none; touch-action: none;
    width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0;
    background: #0f172a; border-radius: 10px; overflow: hidden;
}
.qa-crop-stage img { display: block; max-width: 100%; max-height: 60vh; pointer-events: none; }
.qa-crop-rect {
    position: absolute; border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .5);
    cursor: move;
}
.qa-crop-hint { font-size: 12px; color: var(--qa-muted); margin-top: 10px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN QUẢN TRỊ /bao-loi (Phase 3) — list–detail + timeline vòng đời QA.
   GLOBAL vì icon render qua MarkupString (VmIcons.Wrap) không nhận scope attribute.
   Prefix qa-bl- cho phần riêng màn quản trị (tránh đụng class FAB qa-head/qa-body/qa-btn…).
   Màu nền tảng dùng token app (--brand/--qa-*); status/severity/loại + console dark
   dùng literal semantic (đồng nhất tiền lệ phần FAB ở trên — console #0f172a, warn #f59e0b).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Màu trạng thái — đồng bộ design Claude MCP (BugReportScreen.css .bgq-statchip-dot) */
    --qa-st-pending: #7C3AED;                            /* Chờ duyệt — tím (design)            */
    --qa-st-waiting: #2563EB;                            /* Chờ fix — xanh dương (design info-600) */
    --qa-st-testing: #B45309;                            /* Đang sửa — nâu/amber (warning-700)   */
    --qa-st-cho_xac_nhan: #0891B2;                       /* Đã sửa · chờ xác nhận — cyan (gần xong) */
    --qa-st-fixed:   #16A34A;                            /* Đã xong — xanh lá (success-600)      */
    --qa-sev-critical: var(--qa-danger);
    --qa-sev-high:     #ea580c;
    --qa-sev-medium:   #d97706;
    --qa-sev-low:      #64748b;
}

/* Trang chiếm trọn khung nội dung: bỏ cuộn ngoài + padding container → header dính, thân tự cuộn. */
.app-main-content.mud-main-content:has(.qa-screen) { overflow: hidden; }
.app-main-content .mud-container:has(> .qa-screen) {
    padding: 0 !important; max-width: 100% !important;
    height: 100%; display: flex; flex-direction: column;
}
.qa-screen {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    color: var(--qa-text);
    font-family: var(--app-font, system-ui, sans-serif);
}

/* ── Dot trạng thái (dùng chung thẻ list + pill + stat-chip) ── */
.qa-st--pending { background: var(--qa-st-pending); }
.qa-st--waiting { background: var(--qa-st-waiting); }
.qa-st--testing { background: var(--qa-st-testing); }
.qa-st--cho_xac_nhan { background: var(--qa-st-cho_xac_nhan); }
.qa-st--fixed   { background: var(--qa-st-fixed); }

/* ═══════════ HEADER cố định ═══════════ */
.qa-bl-head {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--qa-border);
    background: var(--qa-surface);
}
.qa-bl-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qa-bl-title-ico {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--qa-danger) 14%, #fff); color: var(--qa-danger);
}
.qa-bl-title-ico svg { width: 21px; height: 21px; }
.qa-bl-title-txt { flex: 1 1 auto; min-width: 0; }
.qa-bl-title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.2; color: var(--qa-text); }
.qa-bl-title-sub { font-size: 12.5px; color: var(--qa-muted); }
.qa-bl-refresh {
    flex: 0 0 auto; border: 1px solid var(--qa-border); background: #fff; cursor: pointer;
    width: 36px; height: 36px; border-radius: 9px; color: var(--qa-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.qa-bl-refresh:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.qa-bl-refresh svg { width: 17px; height: 17px; }

/* Toolbar */
.qa-bl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qa-bl-segs { display: inline-flex; gap: 4px; background: var(--brand-soft); padding: 3px; border-radius: 10px; flex-wrap: wrap; }
.qa-bl-seg {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent; cursor: pointer;
    font: 600 12.5px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-muted);
    padding: 7px 11px; border-radius: 8px; transition: color .12s ease, background .12s ease;
}
.qa-bl-seg:hover { color: var(--brand); }
.qa-bl-seg.is-on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(8, 24, 40, .12); }
.qa-bl-seg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.qa-bl-seg-num {
    font-size: 11px; font-weight: 800; line-height: 1; color: var(--qa-muted);
    font-variant-numeric: tabular-nums; min-width: 17px; text-align: center;
    padding: 2px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--qa-muted) 13%, transparent);
}
.qa-bl-seg.is-on .qa-bl-seg-num { color: var(--brand); background: var(--brand-soft); }
.qa-bl-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.qa-bl-mhsel { min-width: 168px; max-width: 220px; }
/* #19: filter Màn hình dạng chip chọn (khi ít màn hình, đủ chỗ) — chip đang chọn tô nền brand */
.qa-bl-mhchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qa-bl-mhchip {
    border: 1px solid var(--qa-border); background: #fff; cursor: pointer;
    font: 600 12px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-muted);
    padding: 6px 11px; border-radius: 999px; white-space: nowrap;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.qa-bl-mhchip:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--qa-border)); }
.qa-bl-mhchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.qa-bl-search {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--qa-border); border-radius: 9px; background: #fff; padding: 0 10px;
    min-width: 210px;
}
.qa-bl-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qa-bl-search-ico { color: var(--qa-muted); display: inline-flex; }
.qa-bl-search-ico svg { width: 15px; height: 15px; }
.qa-bl-search input { border: none; outline: none; background: transparent; padding: 8px 0; font-size: 13px; width: 100%; color: var(--qa-text); }

/* ═══════════ BODY split ═══════════ */
.qa-bl-body {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: 380px 1fr;
    overflow: hidden;
}
@media (max-width: 1024px) {
    /* Master-detail: 1 cột, hiện ĐÚNG 1 pane/lần để tập trung trên mobile/tablet */
    .qa-bl-body { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .qa-bl-detail { display: none; }                       /* mặc định: xem danh sách */
    .qa-bl-body--detail .qa-bl-list   { display: none; }
    .qa-bl-body--detail .qa-bl-detail { display: flex; }   /* đã chọn → xem chi tiết */
}

/* Danh sách (trái) */
.qa-bl-list {
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--qa-border);
    background: color-mix(in srgb, var(--qa-border) 16%, #fff);
}
@media (max-width: 1024px) {
    .qa-bl-list { border-right: none; }
}

/* Nút "← Danh sách" — CHỈ hiện ở master-detail (mobile/tablet ≤1024px) */
.qa-bl-back { display: none; }
@media (max-width: 1024px) {
    .qa-bl-back {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 6px; min-height: 40px; padding: 8px 12px;
        border: 1px solid var(--qa-border); border-radius: 9px; background: #fff; cursor: pointer;
        font: 600 13px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-text);
    }
    .qa-bl-back:hover { border-color: var(--brand); color: var(--brand); }
    .qa-bl-back svg { width: 16px; height: 16px; }
    /* Chi tiết full-screen trên mobile → header chi tiết không cần sticky-top chồng header trang */
    .qa-bl-dhead { padding: 14px 16px 12px; }
}

/* Header trang gọn hơn + thanh seg cuộn ngang khi chật (phone) */
@media (max-width: 600px) {
    .qa-bl-head { padding: 12px 14px; gap: 10px; }
    .qa-bl-tools { margin-left: 0; width: 100%; }
    .qa-bl-mhsel, .qa-bl-search { flex: 1 1 100%; min-width: 0; max-width: none; }
    .qa-bl-segs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .qa-bl-seg { flex: 0 0 auto; }
    .qa-bl-listscroll { padding: 10px; }
}
.qa-bl-listscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.qa-bl-center { display: flex; justify-content: center; align-items: center; padding: 40px; }
.qa-bl-empty-list { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 16px; color: var(--qa-muted); text-align: center; font-size: 13px; }
.qa-bl-empty-ico { opacity: .4; }
.qa-bl-empty-ico svg { width: 34px; height: 34px; }

/* Thẻ báo lỗi */
.qa-bl-card {
    display: flex; flex-direction: column; gap: 10px;
    align-items: stretch;   /* <button> mặc định UA align-items:center → ép stretch để hàng con giãn full-width (mã/severity dàn 2 đầu, tiêu đề căn trái) */
    border: 1px solid var(--qa-border); background: #fff; cursor: pointer;
    border-radius: 12px; padding: 13px 14px; text-align: left; width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.qa-bl-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--qa-border)); box-shadow: 0 4px 14px -8px rgba(8, 24, 40, .22); }
.qa-bl-card.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), 0 4px 14px -8px rgba(8, 24, 40, .25); }
/* Thẻ đang MỞ FORM SỬA nội dung → dấu hiệu "đang thao tác".
   Ring vẽ bằng ::before + mask content-box (chỉ hiện viền, giữa trong suốt cho nội dung xuyên qua).
   #59 (cải tiến): BỎ viền chạy động (gradient chạy 1.6s — rối mắt) theo góp ý — thay bằng
   viền TĨNH mảnh màu brand (không animation). Cùng hướng "nhẹ không rối mắt" của #50. */
.qa-bl-card.is-editing { position: relative; }
.qa-bl-card.is-editing::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
    background: var(--brand-soft);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

/* #50 (re-fix): nhãn "Đang sửa" nhẹ, viền DOTTED nhấp nháy chậm — đặt cạnh mã lỗi trên thẻ danh sách
   (thay viền-chạy quanh thẻ theo góp ý "nhẹ không rối mắt"). Nhấp nháy = pulse opacity, KHÔNG chớp gắt. */
.qa-bl-fixing-mark {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; line-height: 1.5;
    letter-spacing: .2px; color: var(--brand); padding: 0 7px; border: 1px dotted var(--brand);
    border-radius: 999px; white-space: nowrap; animation: qa-bl-fixblink 1.7s ease-in-out infinite;
}
@keyframes qa-bl-fixblink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .qa-bl-fixing-mark { animation: none; } }
.qa-bl-card-top { display: flex; align-items: center; gap: 8px; }
.qa-bl-code { font: 700 12.5px/1.2 ui-monospace, monospace; color: var(--brand); letter-spacing: .2px; }
/* Badge mức độ — đồng bộ design (.bgq-sev-tag): tag mono nền-nhạt "P2 · nhãn" thay vì ô đặc */
.qa-bl-sev { margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; letter-spacing: .3px; white-space: nowrap; }
.qa-sev--critical { color: var(--qa-sev-critical); background: color-mix(in srgb, var(--qa-sev-critical) 13%, #fff); }
.qa-sev--high { color: var(--qa-sev-high); background: color-mix(in srgb, var(--qa-sev-high) 13%, #fff); }
.qa-sev--medium { color: var(--qa-sev-medium); background: color-mix(in srgb, var(--qa-sev-medium) 15%, #fff); }
.qa-sev--low { color: var(--qa-sev-low); background: color-mix(in srgb, var(--qa-sev-low) 14%, #fff); }
.qa-bl-card-title {
    font-size: 15px; font-weight: 600; color: var(--qa-text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qa-bl-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Pill trạng thái — đồng bộ design (.bgq-pill): chip nền-tint theo trạng thái (qa-stp--*) */
.qa-bl-pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.qa-bl-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.qa-stp--pending { color: var(--qa-st-pending); background: color-mix(in srgb, var(--qa-st-pending) 12%, #fff); }
.qa-stp--waiting { color: var(--qa-st-waiting); background: color-mix(in srgb, var(--qa-st-waiting) 12%, #fff); }
.qa-stp--testing { color: var(--qa-st-testing); background: color-mix(in srgb, var(--qa-st-testing) 12%, #fff); }
.qa-stp--cho_xac_nhan { color: var(--qa-st-cho_xac_nhan); background: color-mix(in srgb, var(--qa-st-cho_xac_nhan) 12%, #fff); }
.qa-stp--fixed   { color: var(--qa-st-fixed);   background: color-mix(in srgb, var(--qa-st-fixed) 13%, #fff); }
.qa-bl-loai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--qa-muted); }
.qa-bl-loai-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; }
.qa-lo--ui { background: #3b82f6; }
.qa-lo--func { background: #8b5cf6; }
.qa-lo--perf { background: #f59e0b; }
.qa-lo--data { background: #10b981; }
.qa-lo--other { background: #94a3b8; }
.qa-bl-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--qa-muted); border-top: 1px solid var(--qa-border); padding-top: 9px; margin-top: 1px; }
.qa-bl-foot-i { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.qa-bl-foot-i svg { width: 12px; height: 12px; flex: 0 0 auto; }
.qa-bl-foot-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.qa-bl-foot-date { margin-left: auto; }

/* #48: hành động nhanh (Duyệt/Xoá) trên thẻ — hiện khi hover/chọn/focus (KHÔNG kích hoạt chọn thẻ nhờ stopPropagation) */
.qa-bl-card { outline: none; }
.qa-bl-card:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
/* #48: nút Duyệt / Xoá nhanh dạng BADGE — hiển thị CỐ ĐỊNH trên thẻ (không chỉ khi hover).
   Mỗi nút là 1 "badge" nhỏ có nền tint theo màu hành động (xanh = Duyệt, đỏ = Xoá) để nhận biết ngay. */
.qa-bl-card-quick { margin-left: 6px; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* Item "Đang sửa" ẩn hết nút (Xoá bị khoá, không phải pending) → span rỗng: bỏ margin thừa cho khỏi lệch layout. */
.qa-bl-card-quick:empty { margin-left: 0; }
.qa-bl-qbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--qa-border); background: #fff; color: var(--qa-muted); cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.qa-bl-qbtn:disabled { opacity: .5; cursor: default; }
.qa-bl-qbtn svg { width: 14px; height: 14px; }
/* Badge tint MẶC ĐỊNH (không cần hover) — đọc rõ là badge "Duyệt" / "Xoá". */
.qa-bl-qbtn--ok  { color: var(--qa-st-fixed); border-color: color-mix(in srgb, var(--qa-st-fixed) 35%, var(--qa-border)); background: color-mix(in srgb, var(--qa-st-fixed) 8%, #fff); }
.qa-bl-qbtn--ok:hover:not(:disabled)  { border-color: var(--qa-st-fixed); background: color-mix(in srgb, var(--qa-st-fixed) 16%, #fff); }
.qa-bl-qbtn--del { color: var(--qa-danger); border-color: color-mix(in srgb, var(--qa-danger) 30%, var(--qa-border)); background: var(--qa-danger-soft); }
.qa-bl-qbtn--del:hover:not(:disabled) { border-color: color-mix(in srgb, var(--qa-danger) 55%, var(--qa-border)); background: color-mix(in srgb, var(--qa-danger) 16%, #fff); }

/* #46: chỉ báo trạng thái trên THẺ = 1 chấm màu + chữ trung tính; loại/phân-loại đơn sắc (giảm nhiều màu) */
.qa-bl-cstat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--qa-text); white-space: nowrap; }
.qa-bl-cstat-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.qa-bl-clspl { font-size: 11.5px; font-weight: 600; color: var(--qa-muted); }

/* Phân trang */
.qa-bl-pager {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 9px 12px; border-top: 1px solid var(--qa-border); background: var(--qa-surface);
}
.qa-bl-pg-btn {
    border: 1px solid var(--qa-border); background: #fff; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px; color: var(--qa-text);
    display: inline-flex; align-items: center; justify-content: center;
}
.qa-bl-pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.qa-bl-pg-btn:disabled { opacity: .4; cursor: default; }
.qa-bl-pg-btn svg { width: 15px; height: 15px; }
.qa-bl-pg-info { font-size: 12.5px; color: var(--qa-muted); font-weight: 600; }

/* ═══════════ Chi tiết (phải) ═══════════ */
.qa-bl-detail { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--qa-surface); }
.qa-bl-detail-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; text-align: center; color: var(--qa-muted); }
.qa-bl-detail-empty-ico { opacity: .22; }
.qa-bl-detail-empty-ico svg { width: 58px; height: 58px; }
.qa-bl-detail-empty-title { font-size: 16px; font-weight: 700; color: var(--qa-text); }
.qa-bl-detail-empty-sub { font-size: 13px; max-width: 360px; }

.qa-bl-dhead {
    flex: 0 0 auto; padding: 18px 22px 14px; border-bottom: 1px solid var(--qa-border);
    position: sticky; top: 0; background: var(--qa-surface); z-index: 2;
}
.qa-bl-dhead-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.qa-bl-dhead .qa-bl-code { font-size: 12.5px; }
.qa-bl-dhead .qa-bl-sev { font-size: 13px; }   /* #12a: chữ mức độ ưu tiên ở header chi tiết to hơn (card danh sách giữ 11px) */
/* #12b: dropdown chọn mức độ ưu tiên trong form Sửa (native select, bám khung input sửa) */
.qa-bl-edit-sev { font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 5px 9px; border: 1px solid var(--qa-border); border-radius: 7px; background: #fff; color: var(--qa-text); cursor: pointer; }
.qa-bl-edit-sev:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
/* #43 (cải tiến): trạng thái "Chờ duyệt" → badge chọn nhanh mức độ (native select mang màu theo mức độ).
   Đứng cùng lớp .qa-bl-edit-sev nên thừa hưởng nền trắng + viền làm FALLBACK khi color-mix không hỗ trợ. */
.qa-bl-quick-sev { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px; border-radius: 6px; }
.qa-bl-quick-sev:disabled { opacity: .6; cursor: default; }
.qa-bl-quick-sev.qa-sev--critical { color: var(--qa-sev-critical); background: color-mix(in srgb, var(--qa-sev-critical) 13%, #fff); border-color: color-mix(in srgb, var(--qa-sev-critical) 35%, #fff); }
.qa-bl-quick-sev.qa-sev--high     { color: var(--qa-sev-high);     background: color-mix(in srgb, var(--qa-sev-high) 13%, #fff);     border-color: color-mix(in srgb, var(--qa-sev-high) 35%, #fff); }
.qa-bl-quick-sev.qa-sev--medium   { color: var(--qa-sev-medium);   background: color-mix(in srgb, var(--qa-sev-medium) 13%, #fff);   border-color: color-mix(in srgb, var(--qa-sev-medium) 35%, #fff); }
.qa-bl-quick-sev.qa-sev--low      { color: var(--qa-sev-low);      background: color-mix(in srgb, var(--qa-sev-low) 13%, #fff);      border-color: color-mix(in srgb, var(--qa-sev-low) 35%, #fff); }
.qa-bl-dtitle { font-size: 18px; font-weight: 700; color: var(--qa-text); margin: 0 0 10px; line-height: 1.3; }
/* #16: trạng thái + mức độ nay nằm CHUNG hàng mã (header còn 3 hàng) — đẩy cụm này về bên phải, đứng cạnh nhau */
.qa-bl-dhead-row .qa-bl-statuspush { margin-left: auto; }
.qa-bl-dhead-row .qa-bl-sev { margin-left: 0; }
.qa-bl-dhead-row .qa-bl-edit-sev { margin-left: 0; }
.qa-bl-dhead-row .qa-bl-quick-sev { margin-left: 0; }
/* Badge MỤC ĐÍCH (phan_loai): Lỗi vs Cải tiến — chiều riêng cạnh loại (card + detail) */
.qa-bl-pl { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700; white-space: nowrap; }
.qa-bl-pl svg { width: 12px; height: 12px; }
.qa-bl-pl--loi { color: var(--qa-danger); background: var(--qa-danger-soft); }
.qa-bl-pl--cai_tien { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, #fff); }
.qa-bl-edit-title {
    width: 100%; font-size: 16px; font-weight: 600; box-sizing: border-box;
    border: 1px solid var(--qa-border); border-radius: 9px; padding: 9px 11px; margin: 0 0 12px; color: var(--qa-text);
}
.qa-bl-edit-title:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qa-bl-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* #49: nút menu "Tùy chọn" (MudMenu built-in Label) — bỏ viết hoa, canh cỡ hợp hàng hành động */
.qa-bl-optmenu.mud-button-root { text-transform: none; border-radius: 8px; font-weight: 600; }
/* #15/#17: BĂNG "đã trả lại · chưa đạt" — nổi bật ngay dưới header (viền + tint amber), kèm nút Sửa lý do / Hoàn tác */
.qa-bl-reject {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    margin: 14px 22px 0; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--qa-st-testing) 32%, var(--qa-border));
    border-left: 3px solid var(--qa-st-testing);
    background: color-mix(in srgb, var(--qa-st-testing) 8%, #fff);
    border-radius: 10px;
}
.qa-bl-reject-main { display: flex; align-items: flex-start; gap: 9px; flex: 1 1 260px; min-width: 0; }
.qa-bl-reject-ico { flex: 0 0 auto; color: var(--qa-st-testing); margin-top: 1px; }
.qa-bl-reject-ico svg { width: 16px; height: 16px; }
.qa-bl-reject-body { min-width: 0; }
.qa-bl-reject-lbl { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--qa-st-testing) 85%, #000); margin-bottom: 3px; }
.qa-bl-reject-txt { font-size: 13.5px; line-height: 1.5; color: var(--qa-text); margin: 0; white-space: pre-wrap; word-break: break-word; }
.qa-bl-reject-acts { display: flex; gap: 8px; flex: 0 0 auto; align-items: flex-start; }
.qa-bl-act {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-text);
    font: 600 12.5px/1 var(--app-font, system-ui, sans-serif); padding: 8px 13px; border-radius: 9px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.qa-bl-act:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.qa-bl-act:disabled { opacity: .5; cursor: default; }
.qa-bl-act svg { width: 15px; height: 15px; }
.qa-bl-act--primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.qa-bl-act--primary:hover:not(:disabled) { background: var(--brand-hover, #093a66); color: #fff; }
.qa-bl-act--success { border-color: var(--qa-st-fixed); background: var(--qa-st-fixed); color: #fff; }
.qa-bl-act--success:hover:not(:disabled) { background: color-mix(in srgb, var(--qa-st-fixed) 86%, #000); color: #fff; }
.qa-bl-act--danger { color: var(--qa-danger); border-color: color-mix(in srgb, var(--qa-danger) 35%, var(--qa-border)); }
.qa-bl-act--danger:hover:not(:disabled) { background: var(--qa-danger-soft); border-color: var(--qa-danger); color: var(--qa-danger); }
/* Chip nhắc "đã khoá" khi báo lỗi ĐÃ XONG (fixed = trạng thái cuối, đọc-only — không còn nút vòng đời) */
.qa-bl-locked-hint {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 12px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-muted);
    border: 1px dashed var(--qa-border); border-radius: 9px; padding: 7px 12px; background: var(--qa-soft, #f8fafc); }
.qa-bl-locked-hint svg { width: 14px; height: 14px; }

/* #57 (cải tiến): stepper vòng đời (.qa-bl-steps) ĐƯA LÊN ĐẦU chi tiết cho dễ thấy — canh lề ngang
   khớp header + tách khỏi banner/nội dung dưới (base .qa-bl-steps có margin-bottom:0). */
.qa-bl-steps--top { margin: 2px 16px 14px; }

.qa-bl-dbody { padding: 18px 22px 80px; }

/* Timeline 3 node — đồng bộ design (.bgq-tl-*): icon TRÒN, màu in=xám/proc=navy/done=xanh */
.qa-bl-node { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.qa-bl-node-rail { display: flex; flex-direction: column; align-items: center; }
.qa-bl-node-ico {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; color: #fff; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.qa-bl-node-ico svg { width: 16px; height: 16px; }
.qa-bl-node-ico--in { background: var(--qa-muted); }
.qa-bl-node-ico--proc { background: var(--brand); }
.qa-bl-node-ico--done { background: var(--qa-st-fixed); }
/* Node Kết quả khi CHƯA fix — xám nhạt slate-300 (đồng bộ design .bgq-tl-dot.out, nhạt hơn --in của node Input) */
.qa-bl-node-ico--out { background: #cbd5e1; }
.qa-bl-node-line { flex: 1 1 auto; width: 2px; background: var(--qa-border); margin: 4px 0; min-height: 18px; }
.qa-bl-node-body { padding: 2px 0 22px; min-width: 0; }
.qa-bl-node--last .qa-bl-node-body { padding-bottom: 0; }
/* Đầu node: badge bước (Input/Xử lý/Kết quả) + phụ đề (.bgq-tl-head/.bgq-tl-step/.bgq-tl-t) */
.qa-bl-node-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; flex-wrap: wrap; }
.qa-bl-node-step { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 6px; }
.qa-bl-node-t { font-size: 14px; font-weight: 700; color: var(--qa-text); }
.qa-bl-node-title { font-size: 14px; font-weight: 700; color: var(--qa-text); margin-bottom: 4px; }
.qa-bl-node-meta { font-size: 12px; color: var(--qa-muted); margin-bottom: 10px; }
.qa-bl-node-meta b { color: var(--qa-text); }
.qa-bl-meta-ico svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; color: var(--qa-muted); }

.qa-bl-desc { font-size: 13.5px; line-height: 1.55; color: var(--qa-text); margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; }
.qa-bl-mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* #14: nếu chỉ còn 1 ô (ô kia trống đã ẩn) → chiếm trọn hàng, không để nửa cột trống */
.qa-bl-mt-grid > .qa-bl-mt-card:only-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .qa-bl-mt-grid { grid-template-columns: 1fr; } }
.qa-bl-mt-card { border: 1px solid var(--qa-border); border-radius: 10px; padding: 9px 11px; }
.qa-bl-mt-expect { background: color-mix(in srgb, var(--qa-st-fixed) 7%, #fff); border-color: color-mix(in srgb, var(--qa-st-fixed) 25%, var(--qa-border)); }
.qa-bl-mt-actual { background: var(--qa-danger-soft); border-color: color-mix(in srgb, var(--qa-danger) 25%, var(--qa-border)); }
.qa-bl-mt-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--qa-muted); margin-bottom: 3px; }
.qa-bl-mt-val { font-size: 13px; color: var(--qa-text); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.qa-bl-f-label { display: block; font-size: 12px; font-weight: 600; color: var(--qa-muted); margin: 8px 0 4px; }
.qa-bl-f-area {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--qa-border); border-radius: 9px; padding: 8px 10px;
    font: 400 13px/1.5 var(--app-font, system-ui, sans-serif); color: var(--qa-text);
}
.qa-bl-f-area:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.qa-bl-attach { margin: 6px 0 8px; }

/* Vùng ảnh đính kèm — đồng bộ design (.bgq-attzone): 1 khung gạch đứt, lưới thumbnail + dải kéo-thả.
   Overlay InputFile của MudFileUpload chỉ phủ .qa-bl-dropline → thumbnail (sibling ở trên) vẫn bấm-được. */
.qa-bl-attzone { border: 1.5px dashed var(--qa-border); border-radius: 11px; padding: 12px; transition: border-color .12s, background .12s; }
.qa-bl-attzone.over { border-color: var(--brand); background: var(--brand-soft); }
.qa-bl-shots { display: flex; gap: 9px; flex-wrap: wrap; }
.qa-bl-shot { width: 110px; height: 74px; border-radius: 9px; overflow: hidden; border: 1px solid var(--qa-border); background: #f1f5f9; position: relative; }
.qa-bl-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.qa-bl-shot.is-busy { opacity: .55; }
.qa-bl-shot-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Nút xoá nổi góc — hiện khi hover ô ảnh (owner-only do can_delete) */
.qa-bl-shot-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 6px; border: none;
    background: rgba(15, 23, 42, 0.66); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s, background .12s; }
.qa-bl-shot:hover .qa-bl-shot-x { opacity: 1; }
.qa-bl-shot-x:hover { background: var(--qa-danger); }
.qa-bl-shot-x svg { width: 12px; height: 12px; }
/* Dải kéo-thả/bấm-chọn — phân cách thumbnail bằng viền gạch đứt trên (đồng bộ .bgq-dropzone) */
.qa-bl-dropline { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border-top: 1px dashed var(--qa-border); padding: 11px 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--qa-muted);
    cursor: pointer; transition: color .12s; }
.qa-bl-attzone:hover .qa-bl-dropline { color: var(--brand); }
.qa-bl-attzone.over .qa-bl-dropline { color: var(--brand); border-top-color: var(--brand); }
.qa-bl-dropline .qa-bl-sec-ico svg { width: 16px; height: 16px; }
.qa-bl-dropline--full { cursor: default; }
.qa-bl-attzone-err { font-size: 12.5px; color: var(--qa-danger); padding: 9px 11px; border: 1px dashed var(--qa-danger); border-radius: 9px; }

/* Toggle + khối dữ liệu kỹ thuật */
/* Toggle dữ liệu kỹ thuật — đồng bộ design (.bgq-input-toggle): nút khung full-width + gợi ý */
.qa-bl-tech-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 14px;
    padding: 11px 14px; border-radius: 11px; cursor: pointer;
    font: 600 13px/1 var(--app-font, system-ui, sans-serif); color: var(--qa-muted);
    background: #f8fafc; border: 1px solid var(--qa-border); transition: all .12s ease;
}
.qa-bl-tech-toggle:hover { background: #fff; border-color: color-mix(in srgb, var(--brand) 35%, var(--qa-border)); color: var(--qa-text); }
.qa-bl-tech-toggle.is-open { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.qa-bl-tech-toggle svg { width: 15px; height: 15px; transition: transform .15s ease; flex-shrink: 0; }
.qa-bl-tech-toggle.is-open svg { transform: rotate(90deg); }
.qa-bl-tech-toggle span { flex-shrink: 0; }
.qa-bl-tech-toggle em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--qa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qa-bl-tech { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.qa-bl-tech-lbl { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--qa-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
/* Icon dẫn đầu nhãn mục (đồng bộ design .bgq-sec-title svg: 14px) — span riêng để KHÔNG đụng svg nút Sao chép */
.qa-bl-sec-ico { display: inline-flex; align-items: center; flex-shrink: 0; }
.qa-bl-sec-ico svg { width: 14px; height: 14px; }
.qa-bl-steps-ol { margin: 0; padding-left: 18px; font-size: 13px; color: var(--qa-text); line-height: 1.6; }
/* Khối "Phần tử bị lỗi" — đồng bộ design (.bgq-code): nền tối kiểu terminal */
.qa-bl-pre {
    margin: 0; background: #0f1729; border: 1px solid var(--qa-border); border-radius: 10px; padding: 12px 14px;
    font: 400 11.5px/1.6 ui-monospace, monospace; color: #c9d6e5; white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.qa-bl-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12px; }
.qa-bl-kv-k { color: var(--qa-muted); white-space: nowrap; }
.qa-bl-kv-v { color: var(--qa-text); word-break: break-word; }

/* Môi trường — đồng bộ design (.bgq-env): lưới 3 ô có viền (KHÔNG dùng chung qa-bl-kv) */
.qa-bl-env { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .qa-bl-env { grid-template-columns: repeat(2, 1fr); } }
.qa-bl-env-cell { border: 1px solid var(--qa-border); border-radius: 9px; padding: 9px 11px; }
.qa-bl-env-k { font-size: 11px; color: var(--qa-muted); }
.qa-bl-env-v { font-size: 13px; color: var(--qa-text); font-weight: 600; margin-top: 2px; }

/* Người dùng & quyền (ngữ cảnh người báo — debug) */
.qa-bl-uctx-sub { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--qa-muted); text-transform: uppercase; letter-spacing: .3px; }
.qa-bl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.qa-bl-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #eef2f7; border: 1px solid var(--qa-border); font-size: 11.5px; font-weight: 600; color: var(--qa-text); }
.qa-bl-perm { margin-top: 5px; max-height: 220px; overflow-y: auto; border: 1px solid var(--qa-border); border-radius: 9px; }
.qa-bl-perm-row { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 10px; padding: 4px 10px; font-size: 11.5px; border-bottom: 1px solid var(--qa-border); }
.qa-bl-perm-row:last-child { border-bottom: 0; }
.qa-bl-perm-page { font-family: ui-monospace, monospace; color: var(--qa-text); font-weight: 600; word-break: break-all; }
.qa-bl-perm-acts { color: var(--qa-muted); }

/* Chẩn đoán kỹ thuật — lỗi API server-side gần đây */
.qa-bl-mono { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }
.qa-bl-apierr { margin-top: 5px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.qa-bl-apierr-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--qa-border); border-radius: 9px; background: #f8fafc; }
.qa-bl-apierr-st { flex: 0 0 auto; min-width: 36px; text-align: center; padding: 1px 6px; border-radius: 6px; font: 700 11px/1.6 ui-monospace, monospace; color: #fff; }
.qa-bl-apierr-st--err { background: #dc2626; }
/* amber-700: chữ trắng đạt ≥4.5:1 (WCAG AA); #d97706 cũ chỉ ~3.2:1 */
.qa-bl-apierr-st--warn { background: #b45309; }
.qa-bl-apierr-st--info { background: #2563eb; }
.qa-bl-apierr-st--net { background: #6b7280; }
.qa-bl-apierr-main { min-width: 0; flex: 1; }
.qa-bl-apierr-path { font-size: 12px; color: var(--qa-text); word-break: break-all; }
.qa-bl-apierr-msg { font-size: 11.5px; color: var(--qa-muted); margin-top: 2px; word-break: break-word; }
.qa-bl-apierr-cid { font: 400 10.5px/1.4 ui-monospace, monospace; color: #94a3b8; margin-top: 2px; word-break: break-all; }
.qa-bl-console { max-height: 200px; overflow-y: auto; border: 1px solid var(--qa-border); border-radius: 9px; background: #0f172a; padding: 8px 10px; font: 400 11px/1.5 ui-monospace, monospace; }
.qa-bl-log { display: flex; gap: 8px; padding: 1px 0; }
.qa-bl-log-lv { flex: 0 0 auto; font-weight: 700; }
.qa-log--error .qa-bl-log-lv { color: #f87171; }
.qa-log--warn .qa-bl-log-lv { color: #fbbf24; }
.qa-log--info .qa-bl-log-lv, .qa-log--log .qa-bl-log-lv { color: #93c5fd; }
.qa-bl-log-msg { color: #e5e7eb; word-break: break-word; white-space: pre-wrap; }
.qa-bl-copy {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid var(--qa-border); background: #fff; color: var(--qa-text);
    font: 600 11px/1 var(--app-font, system-ui, sans-serif); padding: 5px 9px; border-radius: 7px;
    text-transform: none; letter-spacing: 0;
}
.qa-bl-copy:hover { border-color: var(--brand); color: var(--brand); }
.qa-bl-copy svg { width: 12px; height: 12px; }
/* Nút "Đầy đủ" (bản phụ) — nhạt hơn nút "Sao chép" gọn; margin-left thường (không auto)
   để 2 nút nhóm sát cạnh nhau thay vì bị đẩy tách đôi 2 bên. */
.qa-bl-copy--ghost { margin-left: 6px; background: transparent; color: #64748b; font-weight: 500; }
.qa-bl-copy--ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
/* JSON — đồng bộ design (.bgq-json): nền tối kiểu terminal */
.qa-bl-json { margin: 0; max-height: 280px; overflow: auto; background: #0f1729; border: 1px solid var(--qa-border); border-radius: 10px; padding: 12px; font: 400 10.5px/1.5 ui-monospace, monospace; color: #c9d6e5; white-space: pre; }

/* Stepper trạng thái (node Xử lý) — đồng bộ design (.bgq-status-flow): đóng khung, nhãn CẠNH chấm */
.qa-bl-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--qa-border); border-radius: 12px; }
.qa-bl-step { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.qa-bl-step-dot {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; background: #e2e8f0; color: var(--qa-muted);
    border: 1.5px solid transparent; box-sizing: border-box;
}
.qa-bl-step-dot svg { width: 13px; height: 13px; }
/* #10 ĐÃ QUA (done): nền NHẠT + viền màu + icon check màu (bỏ tô đặc xanh/trắng) */
.qa-bl-step.is-done .qa-bl-step-dot { background: color-mix(in srgb, var(--qa-st-fixed) 14%, #fff); border-color: var(--qa-st-fixed); color: var(--qa-st-fixed); }
/* #10 ĐANG CHẠY (current): nền brand nhạt + vòng loading quay (thay số) */
.qa-bl-step.is-current .qa-bl-step-dot { background: var(--brand-soft); color: var(--brand); }
/* #10 BƯỚC CUỐI đã hoàn tất (final = fixed): nền ĐẬM + check trắng + đổ bóng nhấn */
.qa-bl-step.is-final .qa-bl-step-dot { background: var(--qa-st-fixed); border-color: var(--qa-st-fixed); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--qa-st-fixed) 42%, transparent); }
.qa-bl-step-lbl { font-size: 12.5px; font-weight: 600; color: var(--qa-muted); white-space: nowrap; }
.qa-bl-step.is-done .qa-bl-step-lbl,
.qa-bl-step.is-final .qa-bl-step-lbl { color: var(--qa-text); }
.qa-bl-step.is-current .qa-bl-step-lbl,
.qa-bl-step.is-final .qa-bl-step-lbl { color: var(--qa-text); font-weight: 700; }
.qa-bl-step-bar { width: 22px; height: 2px; border-radius: 2px; background: var(--qa-border); flex: 0 0 auto; }
.qa-bl-step-bar.is-done { background: var(--qa-st-fixed); }

/* #10: vòng loading (spinner) ở bước ĐANG chạy */
.qa-bl-step-spin { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--brand) 28%, transparent); border-top-color: var(--brand); animation: qaStepSpin .7s linear infinite; }
@keyframes qaStepSpin { to { transform: rotate(360deg); } }
/* #10: chỉ báo "đang xử lý" cạnh Người fix (giữ từ bản trước) */
@keyframes qaWorkerBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.qa-bl-worker-live { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--brand); }
.qa-bl-worker-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: qaWorkerBlink 1.2s ease-in-out infinite; }
/* #56: chip "Sửa mất …" ở node Xử lý — thời gian bắt đầu sửa → xong. Đang sửa (is-run) đổi màu amber. */
.qa-bl-fixdur { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--qa-muted); white-space: nowrap; }
.qa-bl-fixdur svg { width: 13px; height: 13px; }
.qa-bl-fixdur.is-run { color: var(--qa-st-testing); }
@media (prefers-reduced-motion: reduce) {
    .qa-bl-step-spin { animation: none; }
    .qa-bl-worker-live i { animation: none; }
}

/* Ghi chú trạng thái — khung nền nhạt (đồng bộ design .bgq-tl-note) */
.qa-bl-note { font-size: 12.5px; line-height: 1.5; color: var(--qa-text); margin: 10px 0 0; padding: 9px 12px; background: #f8fafc; border-radius: 9px; }

/* Node Kết quả */
.qa-bl-result { border: 1px solid color-mix(in srgb, var(--qa-st-fixed) 28%, var(--qa-border)); background: color-mix(in srgb, var(--qa-st-fixed) 7%, #fff); border-radius: 11px; padding: 12px 14px; }
.qa-bl-result-sum { font-size: 13.5px; line-height: 1.55; color: var(--qa-text); margin: 0 0 8px; white-space: pre-wrap; word-break: break-word; }
.qa-bl-result-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--qa-muted); }
.qa-bl-result-meta b { color: var(--qa-text); }
/* Kết quả khi chưa fix — khung gạch đứt + icon đồng hồ (đồng bộ design .bgq-result-pending) */
.qa-bl-result-empty { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--qa-muted); padding: 13px 15px; border: 1px dashed var(--qa-border); border-radius: 11px; background: #f8fafc; }

/* ═══════════════════════ Hit-target ≥ 40px trên mobile ═══════════════════════
   DESIGN.md §20.4: nút/link chạm ≥ 40px ở mobile. Chỉ NÂNG ở mobile (720px = breakpoint
   chuẩn) — GIỮ NGUYÊN desktop. Mẫu tham chiếu đã đúng: .qa-bl-back (min-height: 40px).
   min-width/min-height ép vượt các kích thước cứng nhỏ hơn (30/32px) lên 40px.
   (Nút ✕ nổi trên thumbnail/thẻ như .qa-shot-btn/.qa-el-x giữ nhỏ có chủ đích:
    40px sẽ phủ kín ô ảnh và KHÔNG phải "nút action chính" theo §20.4.) */
@media (max-width: 720px) {
    /* Tab lọc trạng thái (màn quản trị /bao-loi) */
    .qa-bl-seg { min-height: 40px; }
    /* Nút phân trang trước/sau (mặc định 30×30) */
    .qa-bl-pg-btn { min-width: 40px; min-height: 40px; }
    /* Nút icon chính trong panel FAB: đóng (30×30) + quay lại (32×32) */
    .qa-head-x, .qa-head-back { min-width: 40px; min-height: 40px; }
}

/* ═══════════════════════ Dialog THỐNG KÊ (#54 — BugChartDialog) ═══════════════════════ */
.qa-bl-chart-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--qa-text); }
.qa-bl-chart-title .qa-bl-sec-ico svg { width: 20px; height: 20px; }

.qa-bl-chart-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.qa-bl-chart-range { display: inline-flex; gap: 4px; padding: 3px; background: #f1f5f9; border-radius: 10px; }
.qa-bl-chart-rbtn { border: none; background: transparent; color: var(--qa-muted); font-size: 12.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.qa-bl-chart-rbtn:hover:not(:disabled) { color: var(--brand); }
.qa-bl-chart-rbtn.on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.qa-bl-chart-rbtn:disabled { opacity: .55; cursor: default; }
.qa-bl-chart-total { font-size: 12.5px; color: var(--qa-muted); }
.qa-bl-chart-total b { color: var(--qa-text); font-size: 14px; }

.qa-bl-chart-center { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--qa-muted); font-size: 13px; }
.qa-bl-chart-sec-lbl { font-size: 13px; font-weight: 800; color: var(--qa-text); margin: 14px 0 8px; }
.qa-bl-chart-empty { font-size: 12.5px; color: var(--qa-muted); padding: 14px; text-align: center;
    border: 1px dashed var(--qa-border); border-radius: 11px; background: #f8fafc; }

/* Chú giải */
.qa-bl-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.qa-bl-chart-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qa-muted); }
.qa-bl-chart-lg i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.qa-bl-chart-lg--total i { background: var(--brand); }
.qa-bl-chart-lg--loi i   { background: var(--qa-danger); }
.qa-bl-chart-lg--cai i   { background: var(--qa-st-fixed); }

/* SVG sóng theo ngày.
   vector-effect:non-scaling-stroke → nét lưới/đường giữ đúng độ dày CSS-px dù viewBox co nhỏ trên mobile
   (nếu không, stroke 1px scale 0.5 ~ 0.5px gần như tàng hình). Chữ để 12 (user-unit) + lưới tương phản hơn. */
.qa-bl-chart-svg { width: 100%; height: auto; display: block; }
.qa-bl-chart-grid { stroke: color-mix(in srgb, var(--qa-muted) 28%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.qa-bl-chart-ytxt, .qa-bl-chart-xtxt { fill: var(--qa-muted); font-size: 12px; font-weight: 600; }
.qa-bl-chart-area { fill: color-mix(in srgb, var(--brand) 12%, transparent); stroke: none; }
.qa-bl-chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.qa-bl-chart-line--total { stroke: var(--brand); stroke-width: 2.2; }
.qa-bl-chart-line--loi   { stroke: var(--qa-danger); stroke-width: 1.4; opacity: .85; }
.qa-bl-chart-line--cai   { stroke: var(--qa-st-fixed); stroke-width: 1.4; opacity: .85; }
.qa-bl-chart-dot { fill: var(--brand); }

/* Thanh ngang theo trang */
.qa-bl-chart-bars { display: flex; flex-direction: column; gap: 7px; }
.qa-bl-chart-barrow { display: grid; grid-template-columns: minmax(0, 200px) 1fr auto; align-items: center; gap: 10px; }
.qa-bl-chart-barlbl { font-size: 12px; color: var(--qa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-bl-chart-bartrack { position: relative; height: 14px; background: #f1f5f9; border-radius: 7px; overflow: hidden; }
.qa-bl-chart-barfill { position: absolute; inset: 0 auto 0 0; height: 100%; min-width: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 80%, #fff), var(--brand)); border-radius: 7px; }
.qa-bl-chart-barval { font-size: 12.5px; font-weight: 800; color: var(--qa-text); min-width: 22px; text-align: right; }

@media (max-width: 600px) {
    .qa-bl-chart-barrow { grid-template-columns: minmax(0, 120px) 1fr auto; }
}