/* ==================================================================
   Vận hành SOP (/van-hanh-sop) — Pha 2.
   Global (MudDrawer/MudDialog portal ra body, CSS isolation không reach).
   Token cục bộ --vhs-* map sang MudBlazor palette.
   ================================================================== */
.vhs-page,
.vhs-drawer,
.vhs-wizard,
.vhs-sum-dlg {
    --vhs-brand:        var(--mud-palette-primary, #0a4174);
    --vhs-brand-soft:   var(--mud-palette-primary-lighten, #e8f0fb);
    --vhs-success:      var(--mud-palette-success, #2e7d32);
    --vhs-success-soft: rgba(46, 125, 50, 0.10);
    --vhs-warning:      var(--mud-palette-warning, #ed6c02);
    --vhs-error:        var(--mud-palette-error, #c62828);
    --vhs-error-soft:   rgba(198, 40, 40, 0.10);
    --vhs-info:         var(--mud-palette-info, #0277bd);
    --vhs-info-soft:    rgba(2, 119, 189, 0.10);
    --vhs-neutral:      var(--mud-palette-text-secondary, #546e7a);
    --vhs-neutral-soft: rgba(84, 110, 122, 0.10);
    --vhs-border:       var(--mud-palette-lines-default, #e0e0e0);
    --vhs-card:         var(--mud-palette-surface, #fff);
    --vhs-soft:         var(--mud-palette-background-grey, #f5f5f5);
    --vhs-fg:           var(--mud-palette-text-primary, #1a1a1a);
    --vhs-fg2:          var(--mud-palette-text-secondary, #555);
    --vhs-fg3:          var(--mud-palette-text-disabled, #999);
}

.vhs-page { padding: 8px 4px; }

/* A11y (review 011 A11Y-FOCUS-1): FOCUS-RING rõ cho control tuỳ biến của Vận hành SOP. */
.vhs-tab:focus-visible,
.vhs-seg-btn:focus-visible,
.vhs-row:focus-visible,
.vhs-stat-chip:focus-visible,
.vhs-stat-card:focus-visible,
.vhs-step-add-btn:focus-visible,
.vhs-log-action:focus-visible,
.vhs-chip-mini:focus-visible,
.vhs-card-head:focus-visible {
    outline: 2px solid var(--vhs-brand, #0a4174);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Header */
.vhs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vhs-breadcrumb { font-size: 12px; color: var(--vhs-fg3); }
.vhs-title { font-size: 22px; font-weight: 700; margin: 2px 0; color: var(--vhs-fg); }
.vhs-subtitle { font-size: 13px; color: var(--vhs-fg2); max-width: 640px; line-height: 1.5; }
.vhs-link-inline { font-size: 13px; margin-left: 6px; }
.vhs-fg3 { color: var(--vhs-fg3); }
.vhs-mono { font-family: ui-monospace, 'Consolas', monospace; font-size: 12px; }

/* Stat strip — chip PILL gọn 1 hàng wrap (bám .sop-stat-mini-row): chấm màu + nhãn + giá trị đậm.
   Bấm chuyển tab; chip ứng với tab đang mở có viền + nền nhạt theo accent. */
.vhs-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vhs-stat-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
    border: 1px solid var(--vhs-border); border-radius: 999px; background: var(--vhs-card);
    font: inherit; font-size: 12.5px; color: var(--vhs-fg2); cursor: pointer; white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.vhs-stat-chip:hover { border-color: var(--vhs-fg3); }
.vhs-stat-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--vhs-neutral); }
.vhs-stat-chip-label { color: var(--vhs-fg2); }
.vhs-stat-chip-val { color: var(--vhs-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* màu chấm theo accent */
.vhs-stat-chip.chip-brand   .vhs-stat-dot { background: var(--vhs-brand); }
.vhs-stat-chip.chip-error   .vhs-stat-dot { background: var(--vhs-error); }
.vhs-stat-chip.chip-success .vhs-stat-dot { background: var(--vhs-success); }
.vhs-stat-chip.chip-info    .vhs-stat-dot { background: var(--vhs-info); }
.vhs-stat-chip.chip-warning .vhs-stat-dot { background: var(--vhs-warning); }
.vhs-stat-chip.chip-neutral .vhs-stat-dot { background: var(--vhs-neutral); }   /* VH-10(b): "Đã huỷ" */
/* active (tab tương ứng đang mở) — viền + nền nhạt 12% theo accent */
.vhs-stat-chip.is-active.chip-brand   { border-color: var(--vhs-brand);   background: color-mix(in srgb, var(--vhs-brand) 12%, var(--vhs-card)); }
.vhs-stat-chip.is-active.chip-success { border-color: var(--vhs-success); background: color-mix(in srgb, var(--vhs-success) 12%, var(--vhs-card)); }
.vhs-stat-chip.is-active.chip-info    { border-color: var(--vhs-info);    background: color-mix(in srgb, var(--vhs-info) 12%, var(--vhs-card)); }
.vhs-stat-chip.is-active.chip-warning { border-color: var(--vhs-warning); background: color-mix(in srgb, var(--vhs-warning) 12%, var(--vhs-card)); }
.vhs-stat-chip.is-active.chip-neutral { border-color: var(--vhs-neutral); background: color-mix(in srgb, var(--vhs-neutral) 12%, var(--vhs-card)); }

/* Tabs — segmented toggle (bám .sop-view-toggle): track xám nhạt, segment active nền trắng nổi */
.vhs-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--vhs-soft); border: 1px solid var(--vhs-border); border-radius: 12px; }
.vhs-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: none; background: transparent; color: var(--vhs-fg2); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 9px; }
.vhs-tab:hover { color: var(--vhs-brand); }
.vhs-tab.active { background: var(--vhs-card); color: var(--vhs-brand); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10); }
.vhs-tab-count { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 10px; background: var(--vhs-card); color: var(--vhs-fg2); }
.vhs-tab.active .vhs-tab-count { background: var(--vhs-brand-soft); color: var(--vhs-brand); }

/* Toolbar — tabs trái; ô lọc SOP GIÃN lấp hết khoảng trống; ô tìm cố định bên phải */
.vhs-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.vhs-toolbar-spacer { flex: 0 0 0; }                       /* không còn đẩy — ô lọc SOP tự lấp khoảng trống */
.vhs-sopfilter { flex: 1 1 auto; width: auto; min-width: 180px; max-width: 100%; }
.vhs-search { flex: 0 0 260px; width: 260px; max-width: 100%; }
/* Dropdown popover (portal ra body) — chiều cao cố định vừa màn hình + cuộn khi nhiều item */
.vhs-ac-list { max-height: min(50vh, 360px) !important; overflow-y: auto !important; }
/* Item dropdown 2 dòng: tên/tiêu đề (chính) + mã/đơn-vị/phòng-ban (phụ) — xem là nắm sơ bộ */
.vhs-ac-item { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
.vhs-ac-item-main { font-size: 13px; font-weight: 600; color: var(--vhs-fg); white-space: normal; }
.vhs-ac-item-sub { font-size: 11.5px; color: var(--vhs-fg3); }
.vhs-ac-item-sub code { font-family: ui-monospace, 'Consolas', monospace; font-size: 11px; }
@media (max-width: 720px) {
    .vhs-toolbar-spacer { display: none; }
    .vhs-tabs { width: 100%; justify-content: flex-start; }
    .vhs-sopfilter, .vhs-search { width: 100% !important; flex: 1 1 100%; }
}

/* Empty */
.vhs-empty { text-align: center; padding: 48px 16px; color: var(--vhs-fg2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vhs-empty-icon { color: var(--vhs-fg3); opacity: 0.6; }
.vhs-empty-sub { font-size: 12.5px; color: var(--vhs-fg3); max-width: 420px; line-height: 1.5; }

/* Card head (bảng định kỳ) */
.vhs-card-head { margin-bottom: 10px; }
.vhs-card-head-title { font-size: 15px; font-weight: 700; color: var(--vhs-fg); }
.vhs-card-head-sub { font-size: 12.5px; color: var(--vhs-fg3); margin-top: 2px; }

/* Row mờ khi lịch tắt */
.vhs-row-muted { opacity: 0.55; }

/* Mode pill "Định kỳ" — warning + chữ HOA (bám design) */
.vhs-mode-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 1px 7px; border-radius: 8px; background: rgba(237,108,2,0.12); color: var(--vhs-warning); }

/* Bar sub (X/Y bước dưới bar) */
.vhs-bar-sub { font-size: 12px; color: var(--vhs-fg3); margin-top: 2px; }

/* Person cell (avatar + tên) */
.vhs-person { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.vhs-av { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex: 0 0 auto; }
.vhs-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-person-sub { display: block; font-size: 11px; color: var(--vhs-fg3); margin-left: 33px; }

/* Số metric tô màu (card thống kê) */
.vhs-num-brand { color: var(--vhs-brand); }
.vhs-num-success { color: var(--vhs-success); }
.vhs-stat-card-rate { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.vhs-stat-card-rate span:first-child { font-size: 12px; }
.vhs-stat-card-rate-val { font-weight: 700; color: var(--vhs-fg); }

/* Table */
.vhs-tablewrap { overflow-x: auto; border: 1px solid var(--vhs-border); border-radius: 12px; background: var(--vhs-card); }
.vhs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vhs-table thead th { text-align: left; padding: 10px 12px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; color: var(--vhs-fg3); border-bottom: 1px solid var(--vhs-border); white-space: nowrap; }
.vhs-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--vhs-border); vertical-align: top; }
.vhs-table tbody tr:last-child td { border-bottom: none; }
.vhs-row { cursor: pointer; }
.vhs-row:hover { background: var(--vhs-soft); }
/* Lần áp dụng đang MỞ chi tiết (drawer) → tô nền + vạch trái brand để biết đang xem dòng nào */
.vhs-row.is-active,
.vhs-row.is-active:hover { background: var(--vhs-brand-soft); box-shadow: inset 3px 0 0 var(--vhs-brand); }
.vhs-run-name { font-weight: 600; color: var(--vhs-fg); }
.vhs-run-sub { font-size: 12.5px; color: var(--vhs-fg3); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
/* +1 size cho BẢNG danh sách (YC 2026-07-10) — badge trạng thái trong bảng to hơn 1 nấc, KHÔNG đụng badge ở drawer */
.vhs-table .vhs-badge { font-size: 12.5px; }
/* "Việc của tôi" trong run (YC 2026-07-09) — badge bo tròn viền CHẤM (dotted), nêu ngắn vai trò/việc người xem. */
.vhs-mine-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.35; padding: 3px 12px; border-radius: 999px; color: var(--vhs-fg2); background: transparent; border: 1.5px dotted var(--vhs-fg3); }
.vhs-mine-tag .vhs-mine-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--vhs-fg3); }
.vhs-mine-tag .vhs-mine-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bước mình phụ trách ĐANG mở (cần làm ngay) → nhấn tone brand + nền mềm. */
.vhs-mine-tag.is-do { color: var(--vhs-brand); font-weight: 700; background: var(--vhs-brand-soft); border-color: var(--vhs-brand); }
.vhs-mine-tag.is-do .vhs-mine-dot { background: var(--vhs-brand); }
.vhs-row-actions { display: inline-flex; align-items: center; gap: 4px; }
/* YC 2026-07-10: icon cụm tùy chọn/xem TO hơn (override .vhs-table .mud-icon-root 13px) — nút icon-only nên được lớn. */
.vhs-table .vhs-row-actions .mud-icon-root { font-size: 20px !important; }
.vhs-cur-step { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
/* Badge "B{n}/{tổng}" trước tên bước hiện tại (YC #56) — biết đang ở đâu trong quy trình. */
.vhs-cur-step-no { flex: 0 0 auto; font-size: 12px; font-weight: 800; line-height: 1; padding: 2px 7px; border-radius: 999px; color: var(--vhs-brand); background: var(--vhs-brand-soft); }
.vhs-cur-step-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Dialog TỔNG KẾT quy trình (YC #55) ── */
.vhs-sum-ttl { display: flex; align-items: center; gap: 10px; }
.vhs-sum-ttl .vhs-sum-ttl-ico { color: var(--vhs-brand); }
.vhs-sum-ttl-main { font-size: 16px; font-weight: 800; color: var(--vhs-fg); line-height: 1.2; }
.vhs-sum-ttl-sub { font-size: 12.5px; color: var(--vhs-fg2); margin-top: 1px; }
.vhs-sum-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--vhs-line, rgba(0,0,0,.08)); }
.vhs-sum-sop { font-size: 12.5px; color: var(--vhs-fg2); }
.vhs-sum-kpis { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 12px 0 4px; }
.vhs-sum-kpi { display: flex; flex-direction: column; gap: 1px; }
.vhs-sum-kpi-l { font-size: 11px; color: var(--vhs-fg3); }
.vhs-sum-kpi-v { font-size: 14px; font-weight: 700; color: var(--vhs-fg); }
.vhs-sum-kpi-v.ok { color: var(--vhs-success); }
.vhs-sum-kpi-v.late { color: var(--vhs-warning); }
.vhs-sum-steps-h { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--vhs-fg3); margin: 14px 0 6px; }
/* Mỗi bước = CỘT badge "B{n}" (trái) + CỘT nội dung (phải) → meta/kết quả/tệp THỤT LỀ thẳng tiêu đề bước (YC #57). */
.vhs-sum-step { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--vhs-border, rgba(0,0,0,.10)); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; background: var(--vhs-card, #fff); }
.vhs-sum-step:last-child { margin-bottom: 0; }
.vhs-sum-step-no { flex: 0 0 auto; margin-top: 1px; font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; color: var(--vhs-brand); background: var(--vhs-brand-soft); }
.vhs-sum-step-body { flex: 1 1 auto; min-width: 0; }
.vhs-sum-step-h { display: flex; align-items: center; gap: 8px; }
.vhs-sum-step-name { font-size: 13.5px; font-weight: 700; color: var(--vhs-fg); flex: 1 1 auto; min-width: 0; }
.vhs-sum-step-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--vhs-fg2); }
.vhs-sum-step-meta .vhs-sum-step-mico { font-size: 14px; width: 14px; height: 14px; }
.vhs-sum-step-time { color: var(--vhs-fg3); }
.vhs-sum-step-note { font-size: 13px; color: var(--vhs-fg); line-height: 1.5; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.vhs-sum-step-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--vhs-fg2); }
.vhs-sum-step-file .vhs-sum-step-fico { font-size: 15px; width: 15px; height: 15px; color: var(--vhs-fg3); }
.vhs-sum-step-empty { font-size: 12px; color: var(--vhs-fg3); font-style: italic; margin-top: 6px; }

/* Tổng kết — đa-tệp kết quả: thanh chọn + nhóm Ảnh (lưới thumbnail) + Tệp (danh sách), xem/tải/checkbox. */
.vhs-sum-steps-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vhs-sum-selbar { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; }
.vhs-sum-selcnt { font-size: 12px; font-weight: 600; color: var(--vhs-brand); }
.vhs-sum-imggrid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.vhs-sum-img { position: relative; width: 72px; height: 72px; }
.vhs-sum-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; border-radius: 8px; border: 1px solid var(--vhs-border); }
.vhs-sum-img.sel img { outline: 2px solid var(--vhs-brand); outline-offset: 1px; }
.vhs-sum-img-cb { position: absolute; top: -8px; left: -8px; background: var(--mud-palette-surface); border-radius: 50%; }
.vhs-sum-img-dl { position: absolute; bottom: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; text-decoration: none; }
.vhs-sum-img-dl .mud-icon-root { font-size: 14px !important; color: #fff; }
.vhs-sum-img-dl:hover { background: rgba(0,0,0,.78); }
.vhs-sum-filelist { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.vhs-sum-filerow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vhs-fg); padding: 2px 0; }
.vhs-sum-filerow .vhs-sum-fico { font-size: 18px; flex: none; }
.vhs-sum-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.vhs-sum-fname:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--vhs-brand); }
.vhs-sum-dl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--vhs-fg2); text-decoration: none; border-radius: 6px; }
.vhs-sum-dl:hover { background: var(--vhs-soft); color: var(--vhs-brand); }
.vhs-pager { display: flex; justify-content: center; margin-top: 14px; }
/* Nút "Tải thêm" (YC #52) — căn giữa dưới bảng run, thay phân trang. */
.vhs-loadmore { display: flex; justify-content: center; margin-top: 14px; }

/* Chip mini */
.vhs-chip-mini { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--vhs-brand-soft); color: var(--vhs-brand); }

/* Badge tone */
.vhs-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 12px; white-space: nowrap; }
.vhs-badge .vhs-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vhs-badge.tone-info    { background: var(--vhs-info-soft);    color: var(--vhs-info); }
.vhs-badge.tone-error   { background: var(--vhs-error-soft);   color: var(--vhs-error); }
.vhs-badge.tone-success { background: var(--vhs-success-soft); color: var(--vhs-success); }
.vhs-badge.tone-warning { background: rgba(237,108,2,0.12);    color: var(--vhs-warning); }
.vhs-badge.tone-neutral { background: var(--vhs-neutral-soft); color: var(--vhs-neutral); }

/* VH-14 — dialog CHỌN NHÁNH: mỗi nhánh 1 ô, ô đang chọn nổi viền/nền info */
.vhs-branch-opt { border: 1px solid var(--vhs-border, rgba(0,0,0,0.12)); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; transition: border-color .12s, background .12s; }
.vhs-branch-opt.on { border-color: var(--vhs-info); background: var(--vhs-info-soft); }
.vhs-branch-name { font-weight: 600; }
.vhs-branch-count { font-size: 12px; opacity: 0.7; margin-left: 4px; }
.vhs-branch-steps { font-size: 12px; opacity: 0.75; margin: 2px 0 0 30px; }

/* Bar */
.vhs-bar { display: flex; align-items: center; gap: 8px; }
.vhs-bar-track { flex: 1; height: 6px; border-radius: 4px; background: var(--vhs-soft); overflow: hidden; min-width: 60px; }
.vhs-bar-fill { height: 100%; background: var(--vhs-brand); border-radius: 4px; }
.vhs-bar-fill.is-error { background: var(--vhs-error); }
.vhs-bar-num { font-size: 12.5px; color: var(--vhs-fg2); white-space: nowrap; }

/* Stat card (thống kê theo SOP) */
.vhs-stat-card { border: 1px solid var(--vhs-border); border-radius: 12px; padding: 14px; background: var(--vhs-card); }
.vhs-stat-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.vhs-stat-card-title { font-weight: 600; color: var(--vhs-fg); }
.vhs-stat-card-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.vhs-stat-card-metrics > div { display: flex; flex-direction: column; }
.vhs-stat-card-metrics span { font-size: 11.5px; }
.vhs-stat-card-metrics b { font-size: 16px; color: var(--vhs-fg); }

/* ── Drawer ── */
.vhs-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.vhs-drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--vhs-border); }
.vhs-drawer-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--vhs-brand-soft); color: var(--vhs-brand); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vhs-drawer-head-body { flex: 1; min-width: 0; }
.vhs-drawer-meta { font-size: 11.5px; color: var(--vhs-fg3); }
.vhs-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
/* Meta strip — 5 thẻ viền riêng, label HOA (bám .sr-meta) */
.vhs-drawer-meta-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
/* 2 cụm: định danh (SOP + điều phối) và thời gian (Bắt đầu · Hạn hoàn tất · Ước tính · Thực tế).
   Cụm thời gian basis đủ rộng để 3 thẻ chính LUÔN chung hàng, không rớt "Ước tính" xuống dòng lẻ. */
.vhs-meta-group { display: grid; gap: 10px; min-width: 0; }
.vhs-meta-group-id { flex: 1 1 240px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.vhs-meta-group-time { flex: 3 1 360px; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.vhs-meta-cell { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--vhs-border); border-radius: 10px; padding: 10px 12px; }
.vhs-meta-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vhs-fg3); margin-bottom: 5px; }
.vhs-meta-cell b { font-size: 13px; color: var(--vhs-fg); display: inline-flex; align-items: center; gap: 4px; }
.vhs-meta-sub { font-size: 11.5px; color: var(--vhs-fg3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-sop-link { font-family: ui-monospace, 'Consolas', monospace; font-size: 13px; font-weight: 700; color: var(--vhs-brand); }

/* Progress — thẻ viền: count phải-trên + % cuối thanh (bám .sr-progress-block) */
.vhs-drawer-progress { border: 1px solid var(--vhs-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.vhs-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vhs-progress-label { font-size: 13px; font-weight: 700; color: var(--vhs-fg); }
.vhs-progress-count { font-size: 12.5px; color: var(--vhs-fg3); }
.vhs-bar-num-lg { font-size: 14px; font-weight: 700; color: var(--vhs-fg); min-width: 38px; text-align: right; }
.vhs-bar-num-lg.is-error { color: var(--vhs-error); }

.vhs-drawer-section { margin-bottom: 16px; }
.vhs-drawer-section > header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vhs-fg); margin-bottom: 8px; }

/* Hàng tiêu đề bước + toggle Timeline/Checklist (bám .sr-view-row) */
.vhs-steps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vhs-steps-title { font-size: 13.5px; font-weight: 700; color: var(--vhs-fg); }
.vhs-viewswitch { display: inline-flex; border: 1px solid var(--vhs-border); border-radius: 10px; overflow: hidden; }
.vhs-viewswitch button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: none; background: var(--vhs-card); color: var(--vhs-fg2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vhs-viewswitch button + button { border-left: 1px solid var(--vhs-border); }
.vhs-viewswitch button.active { background: var(--vhs-brand-soft); color: var(--vhs-brand); }

/* Header nhật ký — title trái + switch ẩn/hiện phải */
.vhs-log-head { justify-content: space-between; }
.vhs-log-head-title { display: inline-flex; align-items: center; gap: 6px; }

/* Timeline — bám .sr-tl: cột rail (chấm + line) | thẻ. Line là phần tử RIÊNG nằm DƯỚI chấm
   (không xuyên qua → chấm rỗng vẫn thấy số); flex:1 lấp đầy giữa 2 chấm = rail liền mạch. */
.vhs-timeline { list-style: none; padding: 0; margin: 0; }

.vhs-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; }
.vhs-tl-rail { display: flex; flex-direction: column; align-items: center; }
.vhs-tl-line { flex: 1; width: 2px; min-height: 14px; margin: 3px 0; border-radius: 999px; background: var(--vhs-border); }
.vhs-tl-item:last-child .vhs-tl-line { display: none; }
.vhs-tl-item.tone-success .vhs-tl-line { background: color-mix(in srgb, var(--vhs-success) 45%, transparent); }
.vhs-tl-item.is-parallel .vhs-tl-line { background: color-mix(in srgb, var(--vhs-brand) 40%, var(--vhs-border)); }

/* Chấm trạng thái (bám .sr-tl-dot): chờ = nền TRONG + viền xám; done = tô đặc xanh lá + ✓;
   đang xử lý (tone-info) = viền + chữ + quầng BRAND (navy), nền trong; quá hạn = đỏ */
.vhs-tl-dot { width: 26px; height: 26px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--vhs-border); background: transparent; color: var(--vhs-fg3); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vhs-tl-dot .mud-icon-root { font-size: 16px !important; }
.vhs-tl-item.tone-success .vhs-tl-dot { background: var(--vhs-success); border-color: var(--vhs-success); color: #fff; }
.vhs-tl-item.tone-info .vhs-tl-dot { border-color: var(--vhs-brand); color: var(--vhs-brand); box-shadow: 0 0 0 4px var(--vhs-brand-soft); }
.vhs-tl-item.tone-error .vhs-tl-dot { border-color: var(--vhs-error); color: var(--vhs-error); box-shadow: 0 0 0 4px var(--vhs-error-soft); }
.vhs-tl-item.tone-warning .vhs-tl-dot { border-color: var(--vhs-warning); color: var(--vhs-warning); box-shadow: 0 0 0 4px rgba(237,108,2,0.12); }  /* "Chờ duyệt" (migration 098) — đồng bộ màu chấm với badge amber */

/* Thẻ bước (bám .sr-tl-card): viền 1px bo 10px, KHÔNG bóng nền; đang xử lý/quá hạn = viền + quầng;
   chờ/bỏ qua = mờ 0.75. KHÔNG vạch trái xanh cho done (đúng source). */
.vhs-tl-body { min-width: 0; border: 1px solid var(--vhs-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--vhs-card); }
.vhs-tl-item.tone-info .vhs-tl-body { border-color: var(--vhs-brand); box-shadow: 0 0 0 3px var(--vhs-brand-soft); }
.vhs-tl-item.tone-error .vhs-tl-body { border-color: var(--vhs-error); box-shadow: 0 0 0 3px var(--vhs-error-soft); }
.vhs-tl-item.tone-neutral .vhs-tl-body { opacity: 0.75; }

.vhs-tl-title { font-weight: 700; font-size: 13.5px; color: var(--vhs-fg); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vhs-tl-title-text { flex: 1; min-width: 0; }
.vhs-tl-title-right { flex: none; display: inline-flex; align-items: center; gap: 2px; }
/* nút Sửa bước (điều phối) — icon nhỏ, tông phụ; hover nổi brand */
.vhs-tl-edit { padding: 2px !important; }
.vhs-tl-edit .mud-icon-root { font-size: 16px !important; color: var(--vhs-fg3); }
.vhs-tl-edit:hover .mud-icon-root { color: var(--vhs-brand); }
.vhs-tl-meta { font-size: 12px; color: var(--vhs-fg3); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; }
.vhs-tl-deptrole { display: inline-flex; align-items: center; gap: 4px; color: var(--vhs-fg3); }
.vhs-tl-form { font-size: 12px; color: var(--vhs-brand); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.vhs-tl-assignee { font-size: 13px; color: var(--vhs-fg); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; }
/* Nhãn ngắn trước người (Xử lý:/Duyệt:) — phân biệt người xử lý vs người duyệt (maker-checker mig 098). */
.vhs-rwho-lbl { font-size: 11.5px; font-weight: 600; color: var(--vhs-fg3); }
/* Block người DUYỆT — tách tông (shield) khỏi người xử lý; gap nhỏ hơn để bám sát dòng xử lý. */
.vhs-tl-approver { margin-top: 5px; }
.vhs-tl-approver > .mud-icon-root { color: var(--vhs-info); }
.vhs-tl-deadchip { font-size: 12px; color: var(--vhs-fg2); display: inline-flex; align-items: center; gap: 4px; }
.vhs-tl-deadchip b { color: var(--vhs-fg); }
.vhs-tl-output { font-size: 11.5px; color: var(--vhs-warning); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }

/* Khối kết quả (done/bỏ qua) — ngăn bằng đường gạch đứt trên (bám .sr-tl-result) */
.vhs-tl-result-group { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--vhs-border); display: flex; flex-direction: column; gap: 4px; }
.vhs-tl-resultline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vhs-fg2); }
.vhs-tl-resultline.is-done { color: var(--vhs-success); }
.vhs-tl-resultline.is-skip { color: var(--vhs-neutral); }
.vhs-tl-resultline.is-file { color: var(--vhs-brand); font-weight: 600; }
.vhs-tl-resultline .mud-icon-root { font-size: 10px !important; }

/* ── Bước dạng list: dòng "● Nhãn: giá trị" thụt thẳng tiêu đề bước (YC — đồng bộ #58 chi tiết SOP) ── */
.vhs-tl-facts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.vhs-tl-fact { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--vhs-fg2); min-width: 0; }
.vhs-tl-fact .vhs-step-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--vhs-fg3); }
.vhs-tl-fact-label { flex: none; font-weight: 600; color: var(--vhs-fg2); }
.vhs-tl-fact-val { min-width: 0; color: var(--vhs-fg); overflow-wrap: anywhere; }
.vhs-tl-fact-val b { font-weight: 700; }
/* phê duyệt = tông amber (maker-checker) */
.vhs-tl-fact.is-approve .vhs-step-dot { background: var(--vhs-warning); }
.vhs-tl-fact.is-approve .vhs-tl-fact-label { color: var(--vhs-warning); }
/* khối kết quả — ngăn bằng gạch đứt trên (giữ ngữ nghĩa .vhs-tl-result-group cũ) */
.vhs-tl-result-facts { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--vhs-border); }
.vhs-tl-fact.is-done .vhs-step-dot { background: var(--vhs-success); }
.vhs-tl-fact.is-done .vhs-tl-fact-label, .vhs-tl-fact.is-done .vhs-tl-fact-val { color: var(--vhs-success); }
.vhs-tl-fact.is-file .vhs-step-dot { background: var(--vhs-brand); }
.vhs-tl-fact.is-file .vhs-tl-fact-label, .vhs-tl-fact.is-file .vhs-tl-fact-val { color: var(--vhs-brand); font-weight: 600; }
.vhs-tl-fact.is-skip .vhs-tl-fact-val { color: var(--vhs-neutral); }
/* dòng điều hướng (Xem ở Công việc) — chấm dot + chữ link brand, bỏ icon external.
   text-decoration:none: element nay là <a> (R1 §6.19) → bỏ gạch chân mặc định UA, giữ gạch chân khi :hover (dòng dưới). */
.vhs-tl-fact-link { cursor: pointer; text-decoration: none; }
.vhs-tl-fact-link .vhs-step-dot { background: var(--vhs-brand); }
.vhs-tl-fact-link .vhs-tl-fact-val { color: var(--vhs-brand); font-weight: 600; }
.vhs-tl-fact-link:hover .vhs-tl-fact-val { text-decoration: underline; text-underline-offset: 2px; }

/* ── Chip đúng/trễ hạn — so ƯỚC TÍNH vs THỰC TẾ (meta "Thực tế" của run + dòng "Hoàn thành" từng bước) ── */
.vhs-est-chip {
    display: inline-flex; align-items: center;
    margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.vhs-est-chip.is-ontime { color: var(--vhs-success); background: var(--vhs-success-soft); }
.vhs-est-chip.is-late   { color: var(--vhs-error);   background: var(--vhs-error-soft); }
.vhs-est-late   { color: var(--vhs-error); }
.vhs-est-ontime { color: var(--vhs-success); }

/* Tệp kết quả dạng CHIP badge nhỏ — gói trên 1 hàng (flex-wrap), gọn thay vì mỗi tệp 1 dòng full-width (rối). */
.vhs-tl-kqrow { align-items: flex-start; }
.vhs-tl-kqchips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.vhs-kqchip { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; padding: 1px 8px;
    border: 1px solid var(--vhs-border); border-radius: 999px; background: var(--vhs-soft); color: var(--vhs-brand);
    font-size: 11px; font-weight: 600; line-height: 1.7; cursor: pointer; }
.vhs-kqchip:hover { border-color: var(--vhs-brand); }
.vhs-kqchip .vhs-kqchip-ico { font-size: 12px !important; width: 12px; height: 12px; flex: none; }
.vhs-kqchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vhs-tl-note { font-size: 12px; color: var(--vhs-fg2); background: var(--vhs-soft); border-radius: 8px; padding: 6px 10px; margin-top: 5px; }
.vhs-tl-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vhs-coop { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.vhs-av-xs { width: 20px; height: 20px; font-size: 9px; }

/* Checklist — compact: chấm nhỏ, thẻ gọn; VẪN hiện kẻ dọc rail nối các bước (YC 2026-07-10). */
.vhs-timeline.is-checklist .vhs-tl-line { min-height: 8px; background: var(--vhs-border); }
.vhs-timeline.is-checklist .vhs-tl-dot { width: 24px; height: 24px; }
.vhs-timeline.is-checklist .vhs-tl-body { padding: 9px 12px; margin-bottom: 8px; }
.vhs-timeline.is-checklist .vhs-tl-title { font-size: 12.5px; }
.vhs-timeline.is-checklist .vhs-tl-assignee { margin-top: 4px; }
.vhs-timeline.is-checklist .vhs-tl-actions { margin-top: 6px; }

/* Nhóm song song (bám .sr-tl-grouphead/joinhead): brand gạch đứt cho grouphead, slate cho joinhead */
.vhs-tl-grouphead { list-style: none; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--vhs-brand); background: var(--vhs-brand-soft); border: 1px dashed color-mix(in srgb, var(--vhs-brand) 45%, transparent); border-radius: 8px; padding: 6px 12px; margin: 2px 0 12px 40px; }
.vhs-tl-joinhead { list-style: none; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--vhs-fg3); background: var(--vhs-soft); border-radius: 8px; padding: 6px 12px; margin: 2px 0 12px 40px; }
.vhs-tl-item.is-parallel .vhs-tl-body { border-left: 3px solid color-mix(in srgb, var(--vhs-brand) 55%, transparent); }
@media (max-width: 520px) { .vhs-tl-grouphead, .vhs-tl-joinhead { margin-left: 30px; } }

/* ── Nhóm song song = KHUNG BỌC quanh CỘT THÂN (rail nằm ngoài trái) — đồng bộ look "Chạy song song"
   ở Chi tiết SOP: đỉnh khung là grouphead bo góc trên + nền brand nhạt, thân các bước nối liền viền
   đứt 2 bên, bước cuối bo góc dưới. Áp cho CẢ Timeline lẫn Checklist (default là Checklist). ── */
.vhs-timeline .vhs-tl-grouphead {
    margin: 4px 0 0 40px;                                     /* dính đỉnh khung với thân (bỏ margin-bottom cũ) */
    border: 1px dashed color-mix(in srgb, var(--vhs-brand) 42%, transparent);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: color-mix(in srgb, var(--vhs-brand) 5%, transparent);
    padding: 8px 12px;
}
.vhs-timeline .vhs-tl-item.is-parallel .vhs-tl-body {
    border-left: 1px dashed color-mix(in srgb, var(--vhs-brand) 42%, transparent);
    border-right: 1px dashed color-mix(in srgb, var(--vhs-brand) 42%, transparent);
    border-top: 1px dashed color-mix(in srgb, var(--vhs-brand) 24%, transparent);   /* kẻ ngăn cách giữa các bước gộp trong khung */
    border-bottom: none;
    border-radius: 0;
    background: color-mix(in srgb, var(--vhs-brand) 5%, transparent);
    box-shadow: none;                                         /* tránh "vòng sáng" tone-info/-error phá khung */
    margin-bottom: 0;
}
.vhs-timeline .vhs-tl-item.is-parallel.is-pend .vhs-tl-body {
    border-bottom: 1px dashed color-mix(in srgb, var(--vhs-brand) 42%, transparent);
    border-radius: 0 0 12px 12px;
    margin-bottom: 12px;                                      /* tách khỏi bước kế sau khi hợp lưu */
}
/* Trong khung: đường rail nối các chấm mảnh hơn cho gọn (trạng thái vẫn đọc qua chấm ở rail). */
.vhs-timeline:not(.is-checklist) .vhs-tl-item.is-parallel .vhs-tl-line { background: color-mix(in srgb, var(--vhs-brand) 30%, transparent); }

/* Log — "Nhật ký thực hiện" là TIÊU ĐỀ (heading section, .vhs-drawer-section>header 13px/700).
   Toàn bộ NỘI DUNG bên dưới = text THƯỜNG + NHỎ + THỤT LỀ chung 1 rail trái (không để dòng hành
   động đậm/to lấn heading). */
.vhs-log { list-style: none; margin: 2px 0 0 8px; padding: 4px 0 0 14px; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid var(--vhs-border); }
.vhs-log-line { font-size: 12px; font-weight: 400; color: var(--vhs-fg3); }
.vhs-log-line b { font-weight: 600; color: var(--vhs-fg2); }
/* Dòng hành động: text thường, nhỏ (KHÔNG đậm/to như cũ — tránh trông như tiêu đề). */
.vhs-log-action { font-size: 12.5px; font-weight: 400; color: var(--vhs-fg2); line-height: 1.45; margin-top: 1px; }
/* Ghi chú: chip nền nhạt, cùng cấp thụt lề với nội dung (rail của cả khối lo phần thụt). */
.vhs-log-note { font-size: 12px; color: var(--vhs-fg2); background: var(--vhs-soft); border-radius: 8px; padding: 6px 10px; margin: 6px 0 0 0; }

/* Drawer footer */
.vhs-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--vhs-border); }

/* ── Dialog / Wizard ── */
.vhs-dlg-stepname { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; color: var(--vhs-fg); }
.vhs-field { margin-bottom: 12px; }
.vhs-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--vhs-fg2); margin-bottom: 6px; }
.vhs-req { color: var(--vhs-error); margin-left: 3px; }
.vhs-field-hint { font-size: 12px; color: var(--vhs-fg3); margin-top: 5px; line-height: 1.45; }
/* Segmented "Chế độ áp dụng" (bám .sop-seg): track xám + pill TRẮNG nổi cho mục active */
.vhs-seg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--vhs-soft); border-radius: 10px; }
.vhs-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 6px; border: none; border-radius: 7px; background: transparent; color: var(--vhs-fg3); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 0; transition: all .14s ease; }
.vhs-seg-btn:hover { color: var(--vhs-fg); }
.vhs-seg-btn.active { background: var(--vhs-card); color: var(--vhs-brand); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10); }
.vhs-seg-btn > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Hàng bước = timeline item: rail (dot số + đường nối liền mạch) | body (bordered). Đồng nhất bước 3. */
.vhs-wstep-list { display: flex; flex-direction: column; }
.vhs-wstep { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; align-items: stretch; }
.vhs-wstep.is-off { opacity: 0.5; }
.vhs-wstep-rail { display: flex; flex-direction: column; align-items: center; }
.vhs-wstep-dot { width: 28px; height: 28px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--vhs-border); background: var(--vhs-card); color: var(--vhs-fg3); font-family: ui-monospace, 'Consolas', monospace; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vhs-wstep-line { flex: 1; width: 2px; min-height: 14px; margin: 3px 0; border-radius: 999px; background: var(--vhs-border); }
.vhs-wstep:last-child .vhs-wstep-line { display: none; }
.vhs-wstep.is-grouped .vhs-wstep-dot { border-color: color-mix(in srgb, var(--vhs-brand) 55%, transparent); color: var(--vhs-brand); }
.vhs-wstep.is-grouped:not(.group-last) .vhs-wstep-line { background: color-mix(in srgb, var(--vhs-brand) 50%, var(--vhs-border)); }
/* Body bước (bám .sr-wstep-row): [check | main | xoá] — SLA nằm CHUNG row với input bên trong main */
.vhs-wstep-body { display: grid; grid-template-columns: 24px 1fr 32px; gap: 10px; align-items: start; border: 1px solid var(--vhs-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--vhs-card); }
.vhs-wstep.is-grouped .vhs-wstep-body { border-color: color-mix(in srgb, var(--vhs-brand) 35%, var(--vhs-border)); background: color-mix(in srgb, var(--vhs-brand) 4%, transparent); }
/* Checkbox vuông tuỳ biến (bám .sr-wstep-check) — thay MudCheckBox để không vỡ cột 24px */
.vhs-wstep-check { appearance: none; cursor: pointer; align-self: start; margin-top: 1px; width: 20px; height: 20px; padding: 0; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--vhs-fg3) 55%, var(--vhs-card)); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vhs-wstep-check.on { background: var(--vhs-brand); border-color: var(--vhs-brand); }
.vhs-wstep-check .mud-icon-root { font-size: 12px !important; }
.vhs-wstep-title { font-size: 13.5px; font-weight: 600; color: var(--vhs-fg); line-height: 1.3; flex: none; }
/* Hàng meta: tiêu đề bước + toggle Cần duyệt/Song song + chip — gom lên CÙNG row để tiết kiệm chiều cao */
.vhs-wstep-metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.vhs-wstep-metarow > .vhs-toggle, .vhs-wstep-metarow > .vhs-form-chip { flex: none; }
/* Chip "Ngày N" đẩy về phải hàng meta (top-right, sát nút xoá) */
.vhs-wstep-metarow > .vhs-wstep-when { margin-left: auto; flex: none; }
.vhs-wstep-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vhs-wstep-sub { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; font-size: 11.5px; color: var(--vhs-fg3); min-width: 0; }
.vhs-wstep-sub > .vhs-toggle, .vhs-wstep-sub > .vhs-form-chip { flex: none; }
.vhs-wstep-deptrole { color: var(--vhs-fg3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-wstep-parallel { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 7px; min-width: 0; }
.vhs-wstep-parnote { font-size: 11.5px; color: var(--vhs-fg3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-wstep-parnote b { color: var(--vhs-brand); }
/* Hàng input tên bước + cột SLA đứng CHUNG 1 row (flex trên wrapper div, KHÔNG trên MudTextField — tránh bug giãn cao) */
.vhs-wstep-inputrow { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.vhs-wstep-tenbuoc { flex: 1 1 200px; min-width: 0; }
.vhs-wstep-slabox { flex: 0 0 128px; width: 128px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.vhs-wstep-del { margin-top: 2px; }
/* Chip biểu mẫu đính bước (bám .sr-form-chip) */
.vhs-form-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; color: var(--vhs-info); background: var(--vhs-info-soft); white-space: nowrap; }

/* Wizard head — ô icon + tiêu đề + phụ đề (bám design modal head) */
.vhs-wiz-head { display: flex; align-items: center; gap: 12px; }
.vhs-wiz-head-icon { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--vhs-brand-soft); color: var(--vhs-brand); }
.vhs-wiz-head-icon .mud-icon-root { font-size: 18px !important; }
.vhs-wiz-head-text { min-width: 0; }
.vhs-wiz-head-title { font-size: 18px; font-weight: 700; color: var(--vhs-fg); line-height: 1.2; }
.vhs-wiz-head-sub { font-size: 12.5px; color: var(--vhs-fg3); margin-top: 2px; }

/* Wizard stepper — chấm số + nối line, ngăn cách header bằng border trên */
.vhs-wiz-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--vhs-border); }
.vhs-wiz-step { appearance: none; border: none; background: transparent; cursor: default; padding: 4px 6px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--vhs-fg3); }
.vhs-wiz-step.active { color: var(--vhs-fg); }
.vhs-wiz-step.done { color: var(--vhs-success); cursor: pointer; }
.vhs-wiz-step.done:hover { background: var(--vhs-soft); }
.vhs-wiz-sep { width: 22px; height: 2px; background: var(--vhs-border); flex: 0 0 auto; }
.vhs-wiz-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--vhs-soft); color: var(--vhs-fg2); }
.vhs-wiz-step.active .vhs-wiz-num { background: var(--vhs-brand); color: #fff; }
.vhs-wiz-step.done .vhs-wiz-num { background: var(--vhs-success); color: #fff; }

/* Callout */
.vhs-callout { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--vhs-fg2); background: var(--vhs-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.45; }
.vhs-callout.is-summary { background: var(--vhs-brand-soft); color: var(--vhs-brand); }
.vhs-empty-steps { font-size: 12.5px; color: var(--vhs-fg3); padding: 12px; border: 1px dashed var(--vhs-border); border-radius: 8px; text-align: center; }

/* Wizard step toggles + preview */
.vhs-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--vhs-border); background: transparent; color: var(--vhs-fg3); cursor: pointer; white-space: nowrap; }
.vhs-toggle:hover:not(:disabled) { background: var(--vhs-soft); }
.vhs-toggle.on { border-style: solid; border-color: transparent; background: var(--vhs-brand-soft); color: var(--vhs-brand); }
.vhs-toggle.is-approve.on { background: var(--vhs-info-soft); color: var(--vhs-info); }
.vhs-toggle:disabled { opacity: .5; cursor: default; }
.vhs-wstep-when { font-size: 11px; color: var(--vhs-fg3); display: inline-flex; align-items: center; gap: 3px; background: var(--vhs-soft); padding: 1px 8px; border-radius: 999px; align-self: center; white-space: nowrap; }
.vhs-wstep-when.is-par { color: var(--vhs-brand); background: var(--vhs-brand-soft); }
.vhs-step-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 1px dashed var(--vhs-brand); background: var(--vhs-brand-soft); color: var(--vhs-brand); font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.vhs-wiz-total { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vhs-fg2); background: var(--vhs-soft); border-radius: 8px; padding: 8px 12px; margin-top: 12px; }

/* Wizard bước 3 — giao người: timeline rail (dot B# + đường nối liền mạch) + thẻ nội dung.
   Bám phong cách .vhs-tl-* ở drawer; nhóm song song tô rail/thân xanh (bám design is-grouped). */
.vhs-assign-list { display: flex; flex-direction: column; }
.vhs-assign-card { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; align-items: stretch; }
.vhs-assign-rail { display: flex; flex-direction: column; align-items: center; }
.vhs-assign-dot { width: 26px; height: 26px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--vhs-border); background: var(--vhs-card); color: var(--vhs-fg3); font-family: ui-monospace, 'Consolas', monospace; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.vhs-assign-line { flex: 1; width: 2px; min-height: 14px; margin: 3px 0; border-radius: 999px; background: var(--vhs-border); }
.vhs-assign-card:last-child .vhs-assign-line { display: none; }
.vhs-assign-card.is-grouped .vhs-assign-dot { border-color: color-mix(in srgb, var(--vhs-brand) 55%, transparent); color: var(--vhs-brand); }
.vhs-assign-card.is-grouped:not(.group-last) .vhs-assign-line { background: color-mix(in srgb, var(--vhs-brand) 50%, var(--vhs-border)); }
.vhs-assign-main { min-width: 0; display: flex; flex-direction: column; gap: 11px; border: 1px solid var(--vhs-border); border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; background: var(--vhs-card); }
.vhs-assign-card.is-grouped .vhs-assign-main { border-color: color-mix(in srgb, var(--vhs-brand) 35%, var(--vhs-border)); background: color-mix(in srgb, var(--vhs-brand) 4%, transparent); }
.vhs-assign-head { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vhs-assign-name { font-weight: 600; font-size: 13.5px; color: var(--vhs-fg); line-height: 1.35; }
.vhs-assign-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--vhs-fg3); }
.vhs-assign-deptrole { color: var(--vhs-fg3); }
.vhs-assign-day { display: inline-flex; align-items: center; gap: 4px; color: var(--vhs-fg2); font-weight: 600; }
.vhs-assign-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.vhs-assign-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vhs-assign-field > label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vhs-fg3); }
.vhs-assign-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--vhs-fg3); }
.vhs-approve-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; color: var(--vhs-info); background: var(--vhs-info-soft); white-space: nowrap; }
.vhs-output-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; color: var(--vhs-success); background: var(--vhs-success-soft); white-space: nowrap; }
/* Phối hợp: select chọn 1 người full-width (chọn xong tự clear + mở lại để chọn tiếp), chip xếp xuống dưới. */
.vhs-coop-add { width: 100%; }
.vhs-coop-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.vhs-coop-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 12px; background: var(--vhs-brand-soft); color: var(--vhs-brand); }
.vhs-coop-x { cursor: pointer; font-weight: 700; }

/* Responsive wizard ≤720px — stack body hàng bước (giữ rail timeline 28px) + 1 cột giao người */
@media (max-width: 720px) {
    .vhs-wstep-body { grid-template-columns: 24px 1fr; }
    .vhs-wstep-check { grid-row: 1; grid-column: 1; }
    .vhs-wstep-del { grid-row: 1; grid-column: 2; justify-self: end; margin-top: 0; }
    .vhs-wstep-main { grid-row: 2; grid-column: 1 / 3; }
    .vhs-assign-fields { grid-template-columns: 1fr; }
}

/* Quy tắc text > icon — thu nhỏ icon module Vận hành SOP */
.vhs-tab .mud-icon-root { font-size: 12px !important; }                 /* chữ 13.5px */
.vhs-table .mud-icon-root { font-size: 13px !important; }               /* chữ 14px — icon vẫn nhỏ hơn chữ */
.vhs-meta-cell b .mud-icon-root { font-size: 11px !important; }         /* chữ 12.5px */
.vhs-viewswitch button .mud-icon-root { font-size: 11px !important; }   /* chữ 12.5px */
.vhs-drawer-section > header .mud-icon-root { font-size: 12px !important; }  /* chữ 13px */
.vhs-chip-mini .mud-icon-root { font-size: 9px !important; }            /* chữ 10.5px */
.vhs-tl-meta .mud-icon-root,
.vhs-tl-form .mud-icon-root,
.vhs-tl-assignee .mud-icon-root,
.vhs-tl-result .mud-icon-root,
.vhs-tl-output .mud-icon-root,
.vhs-tl-deadchip .mud-icon-root { font-size: 10px !important; }         /* chữ 11.5px */
.vhs-callout .mud-icon-root { font-size: 11px !important; }             /* chữ 12px */
.vhs-seg-btn .mud-icon-root { font-size: 12px !important; }             /* chữ 13px */
.vhs-toggle .mud-icon-root { font-size: 10px !important; }              /* chữ 11.5px */
.vhs-wstep-when .mud-icon-root { font-size: 10px !important; }          /* chữ 11px */
.vhs-form-chip .mud-icon-root,
.vhs-approve-chip .mud-icon-root,
.vhs-output-chip .mud-icon-root,
.vhs-assign-day .mud-icon-root { font-size: 10px !important; }          /* chữ 11–11.5px */
.vhs-step-add-btn .mud-icon-root { font-size: 12px !important; }        /* chữ 13px */
.vhs-wiz-total .mud-icon-root { font-size: 11px !important; }           /* chữ 12.5px */

/* ── Chạy nhanh SOP (QuickRunDialog) — 1 màn xác nhận gọn ──────────── */
.qr-center {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 4px;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-size: 13.5px;
}
.qr-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #6b7280);
}
.qr-table td { vertical-align: top; }
.qr-step-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 14px;
}
.qr-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary, #6b7280);
}
.qr-meta .mud-icon-root { font-size: 11px !important; }                 /* icon < chữ 13px */
.qr-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.qr-chip-duyet { background: #fef3c7; color: #92400e; }
.qr-row-unassigned td { background: #fff7ed; }                          /* bước chưa gán người → nền cam nhạt nhắc chọn */

/* ── Việc của tôi (inbox bước SOP chờ xử lý) ───────────────────────── */
.vhs-tab-count.is-accent {
    background: var(--vhs-brand, #0a4174);
    color: #fff;
}
.vhs-tasklist { display: flex; flex-direction: column; gap: 10px; }
.vhs-task {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--vhs-border, #e0e0e0);
    border-radius: 12px;
    background: var(--vhs-card, #fff);
}
.vhs-task.is-overdue { border-color: var(--vhs-error, #c62828); background: var(--vhs-error-soft, rgba(198,40,40,.06)); }
.vhs-task-main { flex: 1; min-width: 0; }
.vhs-task-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.vhs-task-stepno { font-size: 12px; font-weight: 600; color: var(--vhs-fg2, #555); }
.vhs-task-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
}
.vhs-task-chip.chip-approve { background: #fef3c7; color: #92400e; }
.vhs-task-chip.chip-role    { background: var(--vhs-neutral-soft, rgba(84,110,122,.10)); color: var(--vhs-fg2, #555); }
.vhs-task-chip.chip-due     { background: var(--vhs-info-soft, rgba(2,119,189,.10)); color: var(--vhs-info, #0277bd); }
.vhs-task-chip.chip-overdue { background: var(--vhs-error-soft, rgba(198,40,40,.10)); color: var(--vhs-error, #c62828); }
.vhs-task-chip .mud-icon-root { font-size: 10px !important; }           /* icon < chữ chip 11px */
.vhs-task-name { font-size: 15px; font-weight: 600; color: var(--vhs-fg, #1a1a1a); }
.vhs-task-desc {
    font-size: 13px; color: var(--vhs-fg2, #555); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vhs-task-sub { font-size: 12.5px; color: var(--vhs-fg2, #555); margin-top: 4px; }
.vhs-task-outputs {
    display: flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--vhs-fg2, #555); margin-top: 4px;
}
.vhs-task-outputs .mud-icon-root { font-size: 11px !important; }        /* icon < chữ 12.5px */
.vhs-task-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Áp dụng SOP — TỐI GIẢN (biến thể A · 1 màn). Bám design SopRunsScreen.apply.v2.
   ══════════════════════════════════════════════════════════════════════ */

/* Caret xoay khi mở (toggle affordance — KHÔNG áp .9em như icon đi kèm chữ) */
.vhs-caret { transition: transform .15s ease; color: var(--vhs-fg3); }
.vhs-caret.is-open { transform: rotate(90deg); }
.vhs-caret .mud-icon-root, .vhs-caret.mud-icon-root { font-size: 16px !important; }

/* ── Tùy chọn nâng cao (gập gọn) ── */
.vhs-opts { border: 1px solid var(--vhs-border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.vhs-opts-toggle { width: 100%; appearance: none; border: none; background: var(--vhs-card); cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 11px 14px; font-family: inherit; text-align: left; }
.vhs-opts-toggle:hover { background: var(--vhs-soft); }
.vhs-opts-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--vhs-fg); white-space: nowrap; }
.vhs-opts-lbl .mud-icon-root { color: var(--vhs-fg3); }
.vhs-opts-sum { margin-left: auto; font-size: 12px; color: var(--vhs-fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vhs-opts-body { padding: 14px; border-top: 1px solid var(--vhs-border); background: var(--vhs-soft); }

/* ── Quy trình sẽ chạy (preview card) ── */
.vhs-preview { border: 1px solid var(--vhs-border); border-radius: 12px; background: var(--vhs-soft); overflow: hidden; margin-top: 4px; }
.vhs-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--vhs-border); background: var(--vhs-card); }
.vhs-preview-toggle { appearance: none; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; padding: 0; min-width: 0; }
.vhs-preview-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--vhs-fg); }
.vhs-preview-title .mud-icon-root { color: var(--vhs-brand); }
.vhs-adv-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--vhs-brand); font-family: inherit; background: var(--vhs-brand-soft); border: 1px solid transparent; border-radius: 8px; padding: 5px 11px; white-space: nowrap; flex: none; }
.vhs-adv-btn:hover { border-color: color-mix(in srgb, var(--vhs-brand) 40%, transparent); }
.vhs-adv-btn.on { background: var(--vhs-success-soft); color: var(--vhs-success); }

/* ── Dòng tin cậy ── */
.vhs-trust { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px; font-size: 12.5px; color: var(--vhs-fg2); border-bottom: 1px solid var(--vhs-border); background: var(--vhs-card); }
.vhs-trust-n { display: inline-flex; align-items: center; gap: 4px; }
.vhs-trust-n strong { color: var(--vhs-fg); font-variant-numeric: tabular-nums; }
.vhs-trust-n .mud-icon-root { color: var(--vhs-fg3); }
.vhs-trust-approve .mud-icon-root { color: var(--vhs-info); }
.vhs-trust-par .mud-icon-root { color: var(--vhs-brand); }
.vhs-trust-dot { width: 3px; height: 3px; border-radius: 99px; background: var(--vhs-fg3); opacity: .5; flex: none; }
.vhs-trust-due { margin-left: auto; color: var(--vhs-fg3); white-space: nowrap; }
.vhs-trust-due strong { color: var(--vhs-fg); }
/* Callout mô hình việc cha–con + "người chạy theo dõi việc cha" (dưới dòng tổng quan). */
.vhs-runner-note {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 8px 14px; font-size: 12px; line-height: 1.5;
    color: var(--vhs-fg2); background: var(--vhs-info-soft);
    border-bottom: 1px solid var(--vhs-border);
}
.vhs-runner-note > .mud-icon-root { color: var(--vhs-info); flex: none; margin-top: 1px; }
.vhs-runner-note strong { color: var(--vhs-fg); }

/* Issue 2 — card nhập kết quả BƯỚC 1 (bước do người chạy tự thực hiện) ngay DƯỚI "Nêu yêu cầu" trong modal Áp dụng.
   Style lớn/nổi bật hơn (full-width khớp field, viền + bóng nhẹ) để người chạy thấy rõ phải nhập gì trước khi chạy. */
.vhs-step1-card {
    margin: 0 0 12px; padding: 16px 18px; border-radius: 12px;
    background: var(--vhs-brand-soft); border: 1.5px solid color-mix(in srgb, var(--vhs-brand) 35%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--vhs-brand) 12%, transparent);
}
.vhs-step1-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--vhs-fg); margin-bottom: 8px; }
.vhs-step1-head > .mud-icon-root { color: var(--vhs-brand); flex: none; font-size: 22px; }
.vhs-step1-head b { font-weight: 800; }
/* Yêu cầu bước 1: chip "Cần nộp" + chip tài liệu liên quan (biểu mẫu, bấm xem).
   Badge size TO RÕ, viền CHẤM (dotted), ĐỒNG MÀU 1 tông trung tính (bỏ xanh-lá + xanh-dương lẫn lộn). */
.vhs-step1-req { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.vhs-step1-req .vhs-output-chip,
.vhs-step1-req .vhs-form-chip {
    font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 9px; gap: 6px;
    color: var(--vhs-fg2); background: transparent; border: 1.5px dotted var(--vhs-fg3);
}
/* !important để thắng rule thu nhỏ icon 10px ở dòng 441-444; giữ icon ≤ chữ 13px (quy tắc icon < chữ). */
.vhs-step1-req .mud-icon-root { font-size: 12px !important; color: var(--vhs-fg3); }
.vhs-step1-req .vhs-form-chip-link { cursor: pointer; }
.vhs-step1-req .vhs-form-chip-link:hover {
    color: var(--vhs-brand); border-color: var(--vhs-brand); background: var(--vhs-brand-soft); box-shadow: none;
}
.vhs-step1-req .vhs-form-chip-link:hover .mud-icon-root { color: var(--vhs-brand); }
/* Ô "Mô tả / ghi chú kết quả bước 1": cách hàng chip yêu cầu phía trên 10px (nhãn outlined nổi
   không còn chen sát chip "Cần nộp"). Thay cho .mt-1 (4px) trước đây. */
.vhs-step1-note { margin-top: 10px; }
.vhs-step1-warn { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--vhs-warning); }
.vhs-step1-warn > .mud-icon-root { color: var(--vhs-warning); flex: none; }
/* Bước 1 CÓ biểu mẫu: hướng dẫn hoàn thành ở việc liên kết (không nhập ở wizard). */
.vhs-step1-note-info { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--vhs-fg2); }
.vhs-step1-note-info > .mud-icon-root { color: var(--vhs-brand); flex: none; margin-top: 1px; }

/* Chip biểu mẫu BẤM ĐƯỢC → preview tệp (DocumentViewer). Reset nút + con trỏ + hover rõ là click được. */
.vhs-form-chip-link { border: none; cursor: pointer; font-family: inherit; transition: background .12s, box-shadow .12s; }
.vhs-form-chip-link:hover { background: color-mix(in srgb, var(--vhs-info) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vhs-info) 45%, transparent) inset; }
.vhs-form-chip-link:focus-visible { outline: 2px solid var(--vhs-info); outline-offset: 1px; }

/* Inbox "Việc của tôi": tên lần áp dụng ("Nêu yêu cầu") đứng cạnh tên bước → task tự mô tả ngữ cảnh SOP. */
.vhs-task-runname { font-weight: 500; color: var(--vhs-fg3, #8a8a8a); font-size: 13.5px; }

/* Số bước (B#) — vòng tròn nhỏ dùng chung read-only + edit */
.vhs-cnum { width: 26px; height: 26px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--vhs-border); background: var(--vhs-card); color: var(--vhs-fg3); font-family: ui-monospace, 'Consolas', monospace; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* ── Danh sách bước CHỈ ĐỌC ── */
.vhs-rsteps { padding: 6px 8px; display: flex; flex-direction: column; }
.vhs-rstep { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; }
.vhs-rstep + .vhs-rstep { border-top: 1px solid var(--vhs-border); border-radius: 0; }
.vhs-rstep.is-grouped { background: color-mix(in srgb, var(--vhs-brand) 4%, transparent); }
.vhs-rstep.is-grouped.g-first::before { content: 'NHÓM SONG SONG'; position: absolute; top: -2px; left: 38px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: var(--vhs-brand); }
.vhs-rstep-main { min-width: 0; }
.vhs-rstep-name { font-size: 13px; font-weight: 600; color: var(--vhs-fg); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.35; }
.vhs-rstep-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--vhs-fg3); margin-top: 3px; }
.vhs-rstep-dr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-rstep-day { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--vhs-fg3); }
.vhs-rstep-who { display: inline-flex; align-items: center; gap: 7px; max-width: 190px; min-width: 0; }
.vhs-rwho-name { font-size: 12px; font-weight: 600; color: var(--vhs-fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hàng bước CÓ THỂ SỬA ── */
.vhs-erows { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.vhs-erow { position: relative; display: grid; grid-template-columns: 20px 26px 1fr 120px 32px; align-items: start; gap: 9px; padding: 10px; border: 1px solid var(--vhs-border); border-radius: 10px; background: var(--vhs-card); }
.vhs-erow.is-off { opacity: .55; }
.vhs-erow.is-grouped { border-color: color-mix(in srgb, var(--vhs-brand) 35%, var(--vhs-border)); }
.vhs-erow > .vhs-wstep-check { margin-top: 7px; }
.vhs-erow > .vhs-cnum { margin-top: 5px; }
.vhs-erow-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vhs-erow-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--vhs-fg3); }
.vhs-erow-dr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vhs-fg3); }
.vhs-erow-assign { display: flex; align-items: center; gap: 7px; min-width: 0; }
.vhs-erow-assign > :not(.vhs-av):not(.vhs-erow-rolelbl) { flex: 1; min-width: 0; }
.vhs-erow-sla { min-width: 0; }
/* Nhãn vai trò trong dòng sửa (Xử lý / Duyệt / Theo dõi) — đồng bộ "đủ người" với bản xem read-only. */
.vhs-erow-rolelbl { flex: none; display: inline-flex; align-items: center; gap: 3px; min-width: 56px; font-size: 11.5px; font-weight: 600; color: var(--vhs-fg2); }
.vhs-erow-rolelbl .mud-icon-root, .vhs-erow-rolelbl svg { font-size: 13px !important; width: 13px; height: 13px; }
.vhs-erow-assign-duyet .vhs-erow-rolelbl { color: var(--vhs-warning); }   /* Duyệt = amber như chip read-only */
.vhs-erow-assign-duyet .vhs-erow-rolelbl svg { stroke: var(--vhs-warning); }
.vhs-erow-watch { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--vhs-fg2); }
.vhs-erow-watch .vhs-erow-rolelbl { color: var(--vhs-fg3); }
.vhs-erow-watchname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Migration 143 — editor CHỌN TAY người vai RACI phụ (phối hợp/tham vấn/theo dõi/thông báo) ở "Tùy chỉnh bước":
   nhãn vai + chip người đã chọn (nút xoá) + picker thêm người trong phòng ban của vai. */
.vhs-erow-roleedit { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.vhs-erow-roleedit .vhs-erow-rolelbl { color: var(--vhs-fg3); margin-top: 6px; }
.vhs-erow-rolebody { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vhs-role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 5px; border-radius: 999px;
    background: var(--vhs-soft); border: 1px solid var(--vhs-border); font-size: 11.5px; color: var(--vhs-fg2); max-width: 100%; }
.vhs-role-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-role-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none;
    border: 0; background: transparent; border-radius: 50%; color: var(--vhs-fg3); cursor: pointer; padding: 0; }
.vhs-role-chip-x:hover { background: var(--vhs-error-soft); color: var(--vhs-error); }
.vhs-role-chip-x svg { width: 11px; height: 11px; }
/* Ô thêm người: chiếm phần còn lại của hàng nhưng có sàn để không bị bóp quá hẹp khi nhiều chip. */
.vhs-erow-roleac { flex: 1 1 150px; min-width: 140px; }

/* Quy tắc text > icon — module Áp dụng SOP tối giản */
.vhs-trust .mud-icon-root        { font-size: 11px !important; }   /* chữ 12.5px */
.vhs-preview-title .mud-icon-root { font-size: 12px !important; }  /* chữ 13px */
.vhs-adv-btn .mud-icon-root      { font-size: 11px !important; }   /* chữ 12.5px */
.vhs-opts-lbl .mud-icon-root     { font-size: 11px !important; }   /* chữ 13px */
.vhs-rstep-day .mud-icon-root    { font-size: 10px !important; }   /* chữ 11.5px */
.vhs-rstep-name .mud-icon-root   { font-size: 9px !important; }    /* chip 10–11px */
.vhs-erow-row .mud-icon-root     { font-size: 10px !important; }   /* chữ 11.5px */

/* Responsive ≤720px — gập SLA xuống dưới, hàng bước 1 cột chính */
@media (max-width: 720px) {
    .vhs-erow { grid-template-columns: 20px 26px 1fr 32px; }
    .vhs-erow-sla { grid-column: 3 / 4; }
    .vhs-trust-due { margin-left: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Header — danh tính người dùng + nhãn cấp + bộ lọc đơn vị (bám .sr-actor-switch/.sr-unit-switch)
   ══════════════════════════════════════════════════════════════════════ */
.vhs-head-left { min-width: 0; flex: 1 1 320px; }
.vhs-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Cụm lọc/hành động trong header: desktop TRONG SUỐT (display:contents → phẳng vào .vhs-head-tools như cũ);
   mobile tách hàng + gập cụm lọc lại (xem @media ≤520). Nút "Bộ lọc" chỉ hiện trên mobile. */
.vhs-head-filters, .vhs-head-actions { display: contents; }
.vhs-filter-toggle { display: none; }
/* MODAL sheet lọc mobile — header + backdrop; desktop ẩn (bật trong @media ≤520 phía dưới; ĐẶT SAU base → thắng source-order). */
.vhs-filter-mhead { display: none; align-items: center; justify-content: space-between; gap: 8px;
    padding: 13px 16px; border-bottom: 1px solid var(--vhs-border); font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.vhs-filter-mhead > span { display: inline-flex; align-items: center; gap: 8px; }
.vhs-filter-mhead > span .mud-icon-root { font-size: 14px !important; }   /* icon < chữ 15px */
.vhs-filter-mclose { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: inherit; flex: 0 0 auto; }
.vhs-filter-mclose:hover { background: var(--vhs-soft); }
.vhs-filter-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 2400;
    cursor: pointer; touch-action: manipulation; }
@keyframes vhs-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.vhs-actor { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--vhs-border); border-radius: 999px; padding: 4px 10px 4px 4px; background: var(--vhs-card); }
.vhs-actor-av { width: 32px; height: 32px; font-size: 12px; }
.vhs-actor-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vhs-actor-name { font-size: 12.5px; font-weight: 700; color: var(--vhs-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.vhs-actor-role { font-size: 11px; color: var(--vhs-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
/* VH-11: đã BỎ pill "cấp" (.vhs-tier-pill/.is-director/.is-manager/.is-staff) — quyền do BE tính, không suy từ chức danh. */
.vhs-unit-ac { width: 190px; max-width: 100%; }
@media (max-width: 720px) {
    .vhs-head-tools { width: 100%; justify-content: flex-start; }
    .vhs-unit-ac { flex: 1 1 45%; width: auto; }
    .vhs-actor-name, .vhs-actor-role { max-width: 110px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Tab Tổng quan — Dashboard quản lý (bám SRMgmtDashboard: 4 KPI + Tải theo người + Điểm nghẽn)
   ══════════════════════════════════════════════════════════════════════ */
.vhs-dash { display: flex; flex-direction: column; gap: 14px; }
/* VH-09: 5 KPI (thêm "Treo lâu"). auto-fit thay vì repeat(5,1fr) — 5 ô cứng ở 1024px làm số bị bóp,
   auto-fit tự xuống 3+2 rồi 2+2+1 theo bề rộng thật. */
.vhs-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.vhs-dash-kpi { border: 1px solid var(--vhs-border); border-radius: 14px; padding: 16px 18px; background: var(--vhs-card); display: flex; flex-direction: column; gap: 4px; }
.vhs-dash-kpi-val { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vhs-dash-kpi-label { font-size: 12.5px; color: var(--vhs-fg2); }
.vhs-dash-kpi.kpi-brand   .vhs-dash-kpi-val { color: var(--vhs-brand); }
.vhs-dash-kpi.kpi-error   .vhs-dash-kpi-val { color: var(--vhs-error); }
.vhs-dash-kpi.kpi-warning .vhs-dash-kpi-val { color: var(--vhs-warning); }
.vhs-dash-kpi.kpi-success .vhs-dash-kpi-val { color: var(--vhs-success); }
@media (max-width: 900px) { .vhs-dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vhs-dash-kpis { grid-template-columns: 1fr; } }

/* VH-09: 3 panel (thêm "Bước treo lâu") — auto-fit để màn hẹp tự xuống 2 rồi 1 cột, không ép 3 cột chật. */
.vhs-dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
@media (max-width: 900px) { .vhs-dash-panels { grid-template-columns: 1fr; } }
.vhs-dash-panel { border: 1px solid var(--vhs-border); border-radius: 14px; padding: 16px; background: var(--vhs-card); }
.vhs-dash-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vhs-dash-panel-icon { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.vhs-dash-panel-icon.tone-brand { background: var(--vhs-brand-soft); color: var(--vhs-brand); }
.vhs-dash-panel-icon.tone-error { background: var(--vhs-error-soft); color: var(--vhs-error); }
/* VH-09 — panel "Bước treo lâu": tông CẢNH BÁO chứ không phải LỖI; treo lâu là rủi ro bị bỏ quên,
   khác hẳn "đã vi phạm hạn" (đỏ) ở panel bên cạnh. Không có biến --vhs-warning-soft nên pha tại chỗ. */
.vhs-dash-panel-icon.tone-warning { background: color-mix(in srgb, var(--vhs-warning) 14%, var(--vhs-card)); color: var(--vhs-warning); }
.vhs-dash-panel-title { font-size: 14px; font-weight: 700; color: var(--vhs-fg); }
.vhs-dash-panel-sub { font-size: 12px; color: var(--vhs-fg3); margin-top: 1px; }
.vhs-dash-emptyline { font-size: 12.5px; color: var(--vhs-fg3); padding: 14px 2px; }
.vhs-dash-emptyline.is-ok { color: var(--vhs-success); display: flex; align-items: center; gap: 6px; }

/* Tải theo người */
.vhs-dash-load { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vhs-dash-load-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* flex 0 1 (co được) + min-width:0: ở dải 3 cột panel hẹp (~288px nội dung) hàng tải-theo-người không tràn viền thẻ —
   tên người thu nhỏ + ellipsis thay vì đẩy "N bước"/"N trễ" ra ngoài (auto-fit minmax 300px, chưa tới media 900px). */
.vhs-dash-load-name { font-size: 12.5px; font-weight: 600; color: var(--vhs-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 120px; min-width: 0; max-width: 120px; }
.vhs-dash-load-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--vhs-soft); overflow: hidden; min-width: 50px; }
.vhs-dash-load-fill { display: block; height: 100%; border-radius: 999px; background: var(--vhs-brand); }
.vhs-dash-load-fill.is-error { background: var(--vhs-error); }
.vhs-dash-load-total { font-size: 11.5px; color: var(--vhs-fg2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vhs-dash-load-late { font-size: 11px; font-weight: 700; color: var(--vhs-error); white-space: nowrap; }

/* Điểm nghẽn SLA */
.vhs-dash-blockers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vhs-dash-blocker { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--vhs-border); border-radius: 10px; cursor: pointer; }
.vhs-dash-blocker:hover { background: var(--vhs-soft); border-color: var(--vhs-fg3); }
.vhs-dash-blocker-late { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--vhs-error); background: var(--vhs-error-soft); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
/* VH-09 — số ngày TREO (bước không hạn): vàng, phân biệt với số ngày TRỄ (đỏ) — hai thước đo khác nhau. */
.vhs-dash-blocker-late.is-stuck { color: var(--vhs-warning); background: color-mix(in srgb, var(--vhs-warning) 14%, var(--vhs-card)); }
.vhs-dash-blocker-body { flex: 1; min-width: 0; }
.vhs-dash-blocker-step { font-size: 12.5px; font-weight: 600; color: var(--vhs-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhs-dash-blocker-meta { font-size: 11px; color: var(--vhs-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhs-dash-blocker-who { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════
   Drawer — nhãn "Chờ … xử lý" (đã gỡ banner "ai đang thao tác + quyền")
   ══════════════════════════════════════════════════════════════════════ */
/* Bước không phải của mình + không có quyền giám sát → dòng chờ (không nút) */
.vhs-step-wait { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--vhs-fg3); background: var(--vhs-soft); border-radius: 8px; padding: 7px 10px; }
.vhs-step-wait b { color: var(--vhs-fg2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   Wizard — empty-state đơn vị không có SOP (bám .srv-sop-empty)
   ══════════════════════════════════════════════════════════════════════ */
.srv-sop-empty { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--vhs-warning) 45%, var(--vhs-border)); border-radius: 12px; background: rgba(237, 108, 2, 0.06); margin-bottom: 12px; }
.srv-sop-empty-ic { color: var(--vhs-warning); flex: 0 0 auto; margin-top: 1px; }
.srv-sop-empty-title { font-size: 13.5px; font-weight: 700; color: var(--vhs-fg); }
.srv-sop-empty-sub { font-size: 12.5px; color: var(--vhs-fg2); margin-top: 3px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   Picker "Tạo việc theo quy trình" — drawer phải chọn SOP trước wizard (bám .vhs-drawer)
   ══════════════════════════════════════════════════════════════════════ */
.vhs-picker-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--vhs-border); flex-wrap: wrap; }
.vhs-picker-search { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--vhs-border); border-radius: 10px; background: var(--vhs-card); }
.vhs-picker-search .mud-icon-root { font-size: 18px; color: var(--vhs-fg3); }
.vhs-picker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--vhs-fg); font-family: inherit; }
.vhs-picker-search-input::placeholder { color: var(--vhs-fg3); }
.vhs-picker-pb-wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--vhs-border); border-radius: 10px; background: var(--vhs-card); }
.vhs-picker-pb-wrap .mud-icon-root { font-size: 17px; color: var(--vhs-fg3); }
.vhs-picker-pb { border: none; outline: none; background: transparent; font-size: 13px; color: var(--vhs-fg); font-family: inherit; max-width: 160px; cursor: pointer; }

/* Thanh minh bạch lọc đơn vị (header) trong picker + lối thoát "Xem tất cả đơn vị" (đối xứng ?apply= không lọc đơn vị) */
.vhs-picker-unitbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--vhs-border); background: var(--vhs-soft); }
.vhs-picker-unitbar > .mud-icon-root { font-size: 17px; color: var(--vhs-fg3); flex: 0 0 auto; }
.vhs-picker-unitbar-txt { font-size: 12.5px; color: var(--vhs-fg2); line-height: 1.4; }
.vhs-picker-unitbar-btn { flex: 0 0 auto; margin-left: auto; text-transform: none; }
/* Nút "Xem quy trình của tất cả đơn vị" trong empty-state picker */
.srv-sop-empty-act { margin-top: 10px; text-transform: none; }

.vhs-picker-body { display: flex; flex-direction: column; gap: 12px; background: var(--vhs-soft); }
.vhs-pick-card { border: 1px solid var(--vhs-border); border-radius: 12px; background: var(--vhs-card); padding: 14px; }
.vhs-pick-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.vhs-pick-code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--vhs-brand); background: var(--vhs-brand-soft); padding: 2px 8px; border-radius: 6px; }
.vhs-pick-ver { font-size: 11px; font-weight: 700; color: var(--vhs-fg2); background: var(--vhs-soft); border: 1px solid var(--vhs-border); padding: 1px 7px; border-radius: 999px; }
.vhs-pick-steps { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--vhs-fg3); }
.vhs-pick-steps .mud-icon-root { font-size: 11px !important; }   /* icon < chữ (§6 text>icon) */
.vhs-pick-title { font-size: 14.5px; font-weight: 700; color: var(--vhs-fg); line-height: 1.35; }
.vhs-pick-desc { font-size: 12.5px; color: var(--vhs-fg2); line-height: 1.55; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vhs-pick-card-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.vhs-pick-dept { font-size: 12.5px; color: var(--vhs-fg3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhs-pick-apply { flex: 0 0 auto; }
.vhs-picker-count { font-size: 12.5px; color: var(--vhs-fg3); font-weight: 600; }

/* Item dropdown "SOP áp dụng" (wizard) — nhiều thông tin: mã·ver·bước / tiêu đề / phòng ban·mô tả */
.vhs-sopopt { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; min-width: 0; width: 100%; }
.vhs-sopopt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vhs-sopopt-code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--vhs-brand); background: var(--vhs-brand-soft); padding: 1px 7px; border-radius: 6px; }
.vhs-sopopt-ver { font-size: 10.5px; font-weight: 700; color: var(--vhs-fg2); background: var(--vhs-soft); border: 1px solid var(--vhs-border); padding: 0 6px; border-radius: 999px; }
.vhs-sopopt-steps { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--vhs-fg3); }
.vhs-sopopt-steps .mud-icon-root { font-size: 11px !important; }
.vhs-sopopt-title { font-size: 13.5px; font-weight: 600; color: var(--vhs-fg); white-space: normal; line-height: 1.35; }
.vhs-sopopt-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--vhs-fg3); min-width: 0; }
.vhs-sopopt-dept { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.vhs-sopopt-dept .mud-icon-root { font-size: 11px !important; }
.vhs-sopopt-desc { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vhs-fg2); }

/* text > icon cho icon đi kèm chữ (VmIcon tự sizing 18px → ép nhỏ hơn chữ ở các dòng inline) */
.vhs-step-wait .vm-icon,
.vhs-dash-emptyline .vm-icon,
.vhs-dash-load-late .vm-icon { width: 13px !important; height: 13px !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   §6.19 RESPONSIVE MOBILE (CLAUDE.md §6.19) — thu gọn & tương tác chạm cho ĐIỆN THOẠI.
   Đúc từ trang Công việc + trang SOP biểu mẫu (cùng pattern). Toàn bộ bọc trong @media
   phone (≤600 / ≤520) đặt CUỐI file → desktop/tablet >600 KHÔNG đổi; source-order cuối
   file nên mọi override thắng chắc. Class "vhs-*" chỉ thuộc trang này (không giẫm sop.css). */
@media (max-width: 600px) {
    /* R5(b) — Drawer chi tiết run FULL bề rộng (Width=600px tràn khỏi phone). */
    .mud-drawer.vhs-drawer { width: 100vw !important; max-width: 100vw !important; }

    /* R5(b) — Wizard "Áp dụng SOP" (form dài nhất) FULL màn hình; thu padding ngang content. */
    .vhs-wizard.mud-dialog {
        width: 100vw !important;  max-width: 100vw !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: 100vh !important; max-height: 100dvh !important;
        margin: 0 !important; border-radius: 0 !important;
    }
    .vhs-wizard .mud-dialog-content { padding-left: 12px !important; padding-right: 12px !important; }

    /* R5(b) — Bản Tổng kết quy trình (KPI + kết quả từng bước + lưới ảnh) FULL màn hình. */
    .vhs-sum-dlg.mud-dialog {
        width: 100vw !important;  max-width: 100vw !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: 100vh !important; max-height: 100dvh !important;
        margin: 0 !important; border-radius: 0 !important;
    }

    /* R4(a) — hit target ≥40px cho vùng bấm nhỏ trên phone. */
    .vhs-stat-chip { min-height: 40px; }
    .vhs-tab { min-height: 40px; }
    .vhs-viewswitch button { min-height: 40px; }
    .vhs-row-actions .mud-icon-button,
    .vhs-tl-title-right .mud-icon-button { min-width: 40px; min-height: 40px; }
    .vhs-tl-edit { padding: 8px !important; }
    .vhs-table td .mud-button-root { min-height: 40px; }
    .vhs-table td .mud-icon-button { min-width: 40px; min-height: 40px; }

    /* R3(a) — bỏ 300ms tap-delay + double-tap-zoom cho vùng bấm tuỳ biến (touch-only → desktop không đổi). */
    .vhs-stat-chip,
    .vhs-tab,
    .vhs-row,
    .vhs-dash-blocker,
    .vhs-viewswitch button,
    .vhs-tl-fact-link { touch-action: manipulation; }
}

@media (max-width: 520px) {
    /* R16(b)/R8 — ẩn breadcrumb + mô tả dài (giữ tiêu đề .vhs-title). */
    .vhs-breadcrumb,
    .vhs-subtitle { display: none; }

    /* R8 — thu gọn actor pill: giữ avatar + nhãn cấp (tier quyết định quyền), ẩn tên + chức vụ. */
    .vhs-actor-text { display: none; }

    /* R7/§6.19 c — header GỌN trên phone: hàng CHÍNH = [Áp dụng SOP] + [Bộ lọc]; cụm lọc (danh tính + đơn vị)
       GẬP lại, bấm "Bộ lọc" mới mở → giảm nhiều hàng lọc chồng nhau. */
    .vhs-head-tools { flex-direction: column; align-items: stretch; }
    .vhs-head-actions { display: flex; gap: 8px; order: -1; }
    .vhs-head-actions .mud-button-root { min-height: 40px; white-space: nowrap; }
    .vhs-apply-btn { flex: 1 1 auto; }
    .vhs-filter-toggle { display: inline-flex; flex: 0 0 auto; }
    .vhs-head-filters { display: none; flex-direction: column; gap: 8px; }
    /* Bấm "Bộ lọc" → MODAL bottom-sheet (thay vì đẩy inline). */
    .vhs-head-filters.is-open {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; max-width: 100%;
        max-height: 85dvh; z-index: 2401; margin: 0; padding: 0 14px 16px;
        background: var(--vhs-card); border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.24); overflow-y: auto;
        animation: vhs-sheet-up 200ms ease;
    }
    .vhs-head-filters.is-open .vhs-filter-mhead { display: flex; margin: 0 -14px 4px; }
    .vhs-filter-backdrop { display: block; }

    /* R16(a) — 5 chip lọc → DẢI CUỘN NGANG 1 hàng (bám .sop-stats) thay vì wrap 2-3 hàng. */
    .vhs-stats {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; margin: 0 -4px 12px; padding: 0 4px 2px;
    }
    .vhs-stats::-webkit-scrollbar { display: none; }
    .vhs-stat-chip { flex: 0 0 auto; }

    /* R10 — 5 tab segmented → dải CUỘN NGANG 1 hàng (không vỡ 2-3 dòng khó bấm). */
    .vhs-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .vhs-tabs::-webkit-scrollbar { display: none; }
    .vhs-tab { flex: 0 0 auto; white-space: nowrap; }

    /* Thu gọn 1 hàng: ô lọc SOP + ô tìm kiếm CÙNG 1 hàng trên phone (thay vì mỗi ô chiếm 1 hàng riêng). */
    .vhs-toolbar .vhs-sopfilter,
    .vhs-toolbar .vhs-search { flex: 1 1 0 !important; width: auto !important; min-width: 0; }

    /* R16(c)/§6.19 e — Bảng "Đang chạy/Hoàn tất" → dạng THẺ trên phone: TÊN ÁP DỤNG ưu tiên FULL-WIDTH
       hàng đầu (hết cảnh bóp hẹp xuống dòng vụn), Trạng thái + Tiến độ + nút ⋮ xuống hàng dưới. Ẩn header
       bảng + cột phụ (#, Bước hiện tại, Hạn, Điều phối, Kết quả…). Giữ ⋮ (cột cuối) ở góc phải. */
    .vhs-runs-table thead { display: none; }
    .vhs-runs-table tbody { display: block; }
    .vhs-runs-table tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 10px; padding: 12px;
        border-bottom: 1px solid var(--vhs-border);
    }
    .vhs-runs-table td { display: block; padding: 0; border: none; }
    .vhs-runs-table td:first-child { display: none; }                     /* # */
    .vhs-runs-table td:nth-child(2) { flex: 1 1 100%; min-width: 0; }      /* Tên áp dụng — full hàng đầu */
    .vhs-runs-table td:nth-child(3) { flex: 0 0 auto; }                    /* Trạng thái */
    .vhs-runs-table td:nth-child(4) { flex: 1 1 auto; min-width: 120px; }  /* Tiến độ */
    .vhs-runs-table td:nth-child(n+5):not(:last-child) { display: none; }  /* cột phụ */
    .vhs-runs-table td:last-child { flex: 0 0 auto; margin-left: auto; }   /* ⋮ → góc phải */

    /* R16(c) — Bảng Định kỳ: giữ Lịch chạy·Chu kỳ·Kích hoạt·Thao tác; ẩn Lần kế tiếp·Điều phối·Đã chạy. */
    .vhs-sched-table thead th:nth-child(3), .vhs-sched-table tbody td:nth-child(3),
    .vhs-sched-table thead th:nth-child(4), .vhs-sched-table tbody td:nth-child(4),
    .vhs-sched-table thead th:nth-child(5), .vhs-sched-table tbody td:nth-child(5) { display: none; }

    /* R13 — nút "Tải thêm" full-width, dễ chạm 1 ngón. */
    .vhs-loadmore { margin-top: 12px; }
    .vhs-loadmore .mud-button-root { width: 100%; min-height: 44px; }

    /* R14 — cụm nút thao tác bước (drawer timeline) xếp dọc full-width ≥40px thay vì wrap rối. */
    .vhs-tl-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    .vhs-tl-actions .mud-button-root { width: 100%; min-height: 40px; }

    /* R14 — footer drawer đủ chạm ≥40px; giãn nhẹ khoảng cách icon hành động trong bảng. */
    .vhs-drawer-foot .mud-button-root { min-height: 40px; }
    .vhs-row-actions { gap: 4px; }
}

/* Ưu tiên bề rộng cột "Lần áp dụng" (tên) — cột quan trọng nhất, tránh bị các cột width-cố-định bóp
   hẹp làm tiêu đề xuống dòng vụn (1 chữ/dòng). Chỉ áp desktop/tablet (>520) — mobile dùng layout THẺ
   riêng ở @media ≤520 (tên đã full-width). Bảng .vhs-tablewrap có overflow-x:auto nên nếu tràn thì cuộn. */
@media (min-width: 521px) {
    .vhs-runs-table th:nth-child(2),
    .vhs-runs-table td:nth-child(2) { min-width: 300px; }
}