@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

/* _content/NVOPASL/Components/Accounting/Pages/AccountingVoucherExcelImport.razor.rz.scp.css */
.page-header[b-cy70x6kmhr] {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 16px;
        background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background-gray) 100%);
    }

    .upload-zone[b-cy70x6kmhr] {
        min-height: 220px;
        border: 1.5px dashed var(--mud-palette-primary);
        border-radius: 14px;
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
    }

    .file-input[b-cy70x6kmhr] { max-width: 100%; font-size: .85rem; }
    .h-100[b-cy70x6kmhr] { height: 100%; }
    .search-box[b-cy70x6kmhr] { min-width: min(420px, 100%); }

    .kpi-card[b-cy70x6kmhr] {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        padding: 12px 14px;
        height: 100%;
    }

    .empty-state[b-cy70x6kmhr] {
        border: 1px dashed var(--mud-palette-lines-default);
        border-radius: 12px;
        text-align: center;
    }

    .action-bar[b-cy70x6kmhr] {
        position: sticky;
        bottom: 12px;
        z-index: 5;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
        backdrop-filter: blur(10px);
    }

    @media (max-width: 600px) {
        .search-box[b-cy70x6kmhr] { width: 100%; min-width: 100%; }
    }
/* _content/NVOPASL/Components/Accounting/Pages/GeneralLedgerExcelImport.razor.rz.scp.css */
.gl-header[b-0jpqgjxr39] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mud-palette-background-grey) 0%, var(--mud-palette-surface) 100%);
}

.gl-upload[b-0jpqgjxr39] {
    min-height: 190px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

.gl-file-input[b-0jpqgjxr39] {
    max-width: 100%;
}

.gl-kpi[b-0jpqgjxr39] {
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
}

.h-100[b-0jpqgjxr39] {
    height: 100%;
}
/* _content/NVOPASL/Components/Accounting/Pages/PostingInbox_10_0.razor.rz.scp.css */
/* 10.0 Chứng từ cần hạch toán — dùng biến màu MudBlazor để theo theme sáng / tối */
.pi[b-zbvsv5n9x5] {
    --pi-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --pi-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --pi-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --pi-primary: var(--mud-palette-primary, #1976d2);
    --pi-surface: var(--mud-palette-surface, #fff);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px 16px;
    color: var(--mud-palette-text-primary);
}

.pi-head[b-zbvsv5n9x5] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pi-title[b-zbvsv5n9x5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.pi-title h1[b-zbvsv5n9x5] { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.pi-title p[b-zbvsv5n9x5] { margin: 2px 0 0; font-size: .8rem; color: var(--pi-muted); }

.pi-title-icon[b-zbvsv5n9x5] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--pi-primary), color-mix(in srgb, var(--pi-primary) 55%, #8e24aa));
}

.pi-period[b-zbvsv5n9x5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pi-period[b-zbvsv5n9x5]  .pi-date { width: 150px; }

/* ---------- Thẻ nguồn ---------- */
.pi-cards[b-zbvsv5n9x5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.pi-card[b-zbvsv5n9x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    background: var(--pi-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.pi-card:hover[b-zbvsv5n9x5] { border-color: color-mix(in srgb, var(--pi-primary) 45%, transparent); }

.pi-card.on[b-zbvsv5n9x5] {
    border-color: var(--pi-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-primary) 20%, transparent);
}

.pi-card-icon[b-zbvsv5n9x5] {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.pi-card-body[b-zbvsv5n9x5] { display: flex; flex-direction: column; min-width: 0; }
.pi-card-label[b-zbvsv5n9x5] { font-size: .78rem; font-weight: 600; color: var(--pi-muted); }
.pi-card-num[b-zbvsv5n9x5] { font-size: .85rem; }
.pi-card-num b[b-zbvsv5n9x5] { font-size: 1.15rem; margin-right: 2px; }
.pi-card.has-pending .pi-card-num b[b-zbvsv5n9x5] { color: var(--mud-palette-error); }
.pi-card small[b-zbvsv5n9x5] { font-size: .72rem; color: var(--pi-muted); }

.src-sales[b-zbvsv5n9x5] { color: #1976d2; background: color-mix(in srgb, #1976d2 12%, transparent); }
.src-purchase[b-zbvsv5n9x5] { color: #00897b; background: color-mix(in srgb, #00897b 12%, transparent); }
.src-receipt[b-zbvsv5n9x5] { color: #43a047; background: color-mix(in srgb, #43a047 12%, transparent); }
.src-payment[b-zbvsv5n9x5] { color: #f57c00; background: color-mix(in srgb, #f57c00 14%, transparent); }
.src-payroll[b-zbvsv5n9x5] { color: #8e24aa; background: color-mix(in srgb, #8e24aa 12%, transparent); }
.src-stock[b-zbvsv5n9x5] { color: #6d4c41; background: color-mix(in srgb, #6d4c41 14%, transparent); }

/* ---------- Lưới ---------- */
.pi-grid-card[b-zbvsv5n9x5] {
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    background: var(--pi-surface);
    overflow: hidden;
}

.pi-toolbar[b-zbvsv5n9x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pi-line);
}

.pi-chips[b-zbvsv5n9x5] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pi-chip[b-zbvsv5n9x5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border: 1px solid var(--pi-line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.pi-chip.on[b-zbvsv5n9x5] {
    color: var(--pi-primary);
    border-color: color-mix(in srgb, var(--pi-primary) 55%, transparent);
    background: color-mix(in srgb, var(--pi-primary) 10%, transparent);
}

.pi-chip.st-pending b[b-zbvsv5n9x5] { color: var(--mud-palette-error); }

.pi-toolbar[b-zbvsv5n9x5]  .pi-search { flex: 1 1 260px; max-width: 420px; margin-left: auto; margin-top: 0; }

.pi-grid-card[b-zbvsv5n9x5]  .pi-grid .mud-table-head .mud-table-cell {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pi-muted);
    background: var(--pi-soft);
}

.pi-grid-card[b-zbvsv5n9x5]  .pi-num { text-align: right; font-variant-numeric: tabular-nums; }
.pi-grid-card[b-zbvsv5n9x5]  .pi-mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }

.pi-src[b-zbvsv5n9x5], .pi-state[b-zbvsv5n9x5] {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.st-pending[b-zbvsv5n9x5] { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.st-draft[b-zbvsv5n9x5] { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.st-posted[b-zbvsv5n9x5] { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }

.pi-chip.st-pending[b-zbvsv5n9x5], .pi-chip.st-draft[b-zbvsv5n9x5], .pi-chip.st-posted[b-zbvsv5n9x5] { background: transparent; color: inherit; }

.pi-row-actions[b-zbvsv5n9x5] { display: flex; align-items: center; gap: 2px; white-space: nowrap; }

.pi-empty[b-zbvsv5n9x5] { padding: 24px; text-align: center; color: var(--pi-muted); }

.pi-foot[b-zbvsv5n9x5] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: .75rem;
    color: var(--pi-muted);
    border-top: 1px solid var(--pi-line);
}
/* _content/NVOPASL/Components/AirFreightRate/Pages/AirFreightRateEdit_Dialog.razor.rz.scp.css */
.afr-dialog[b-wb1y42hn88] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 4px;
}

.afr-section-title[b-wb1y42hn88] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.afr-tiers[b-wb1y42hn88] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.afr-tier[b-wb1y42hn88] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 8px;
    border-radius: 6px;
}

.afr-tier-min[b-wb1y42hn88] {
    background: var(--mud-palette-background-gray);
}

.afr-tier-label[b-wb1y42hn88] {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}

.afr-tier-note[b-wb1y42hn88],
.afr-tier-warn[b-wb1y42hn88] {
    font-size: .72rem;
    text-align: right;
}

.afr-tier-note[b-wb1y42hn88] {
    color: var(--mud-palette-text-secondary);
}

.afr-tier-warn[b-wb1y42hn88] {
    color: var(--mud-palette-warning-darken);
}

[b-wb1y42hn88] .afr-num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.afr-meta[b-wb1y42hn88] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}
/* _content/NVOPASL/Components/Approval/Pages/ApprovalCenter.razor.rz.scp.css */
.apc[b-ypth8k8ohv] {
    --apc-line: var(--mud-palette-lines-default, #e3e8ef);
    --apc-surface: var(--mud-palette-surface, #fff);
    --apc-soft: var(--mud-palette-background-grey, #f5f7fa);
    --apc-text: var(--mud-palette-text-primary, #1f2937);
    --apc-muted: var(--mud-palette-text-secondary, #64748b);
}

.apc-body[b-ypth8k8ohv] {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

/* ---------- Cột loại chứng từ ---------- */
.apc-side[b-ypth8k8ohv] {
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--apc-line);
    border-radius: 12px;
    background: var(--apc-surface);
    max-height: calc(100vh - 170px);
    overflow: auto;
}
.apc-group[b-ypth8k8ohv] {
    margin: 10px 8px 2px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--apc-muted);
}
.apc-kind[b-ypth8k8ohv] {
    --k: var(--mud-palette-primary, #1f6fb2);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--apc-text);
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.apc-kind:hover:not(:disabled)[b-ypth8k8ohv] { background: var(--apc-soft); }
.apc-kind.on[b-ypth8k8ohv] { background: color-mix(in srgb, var(--k) 12%, transparent); border-left-color: var(--k); font-weight: 600; }
.apc-kind.locked[b-ypth8k8ohv] { opacity: .45; cursor: not-allowed; }
.apc-kind-name[b-ypth8k8ohv] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apc-count[b-ypth8k8ohv] {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--k);
    color: #fff;
    font-size: .72rem;
    text-align: center;
}
.apc-lock[b-ypth8k8ohv], .apc-clear[b-ypth8k8ohv] { opacity: .55; }
.apc-clear[b-ypth8k8ohv] { color: #1b8a4b; }

/* ---------- KPI + bộ lọc ---------- */
.apc-main[b-ypth8k8ohv] { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.apc-kpis[b-ypth8k8ohv] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.apc-kpi[b-ypth8k8ohv] {
    padding: 9px 12px;
    border: 1px solid var(--apc-line);
    border-left: 4px solid var(--mud-palette-primary, #1f6fb2);
    border-radius: 10px;
    background: var(--apc-surface);
}
.apc-kpi small[b-ypth8k8ohv] { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--apc-muted); }
.apc-kpi b[b-ypth8k8ohv] { font-size: 1.35rem; line-height: 1.3; color: var(--apc-text); }
.apc-kpi em[b-ypth8k8ohv] { display: block; font-style: normal; font-size: .7rem; color: var(--apc-muted); }
.apc-kpi.warn[b-ypth8k8ohv] { border-left-color: #d97706; }
.apc-kpi.ok[b-ypth8k8ohv] { border-left-color: #1b8a4b; }
.apc-kpi.muted[b-ypth8k8ohv] { border-left-color: #94a3b8; }

.apc-filters[b-ypth8k8ohv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--apc-line);
    border-radius: 10px;
    background: var(--apc-surface);
}
.apc-filters[b-ypth8k8ohv]  .apc-search { flex: 1 1 280px; }
.apc-filters[b-ypth8k8ohv]  .apc-creator { flex: 0 1 220px; }
.apc-spacer[b-ypth8k8ohv] { flex: 1; }

/* ---------- Bảng ---------- */
.apc-table-wrap[b-ypth8k8ohv] {
    border: 1px solid var(--apc-line);
    border-radius: 10px;
    background: var(--apc-surface);
    overflow: auto;
    max-height: calc(100vh - 330px);
}
.apc-table[b-ypth8k8ohv] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.apc-table thead th[b-ypth8k8ohv] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    background: var(--apc-soft);
    border-bottom: 1px solid var(--apc-line);
    color: var(--apc-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.apc-table tbody td[b-ypth8k8ohv] { padding: 7px 10px; border-bottom: 1px solid var(--apc-line); vertical-align: middle; color: var(--apc-text); }
.apc-table tbody tr[b-ypth8k8ohv] { cursor: pointer; transition: background .12s; }
.apc-table tbody tr:hover[b-ypth8k8ohv] { background: var(--apc-soft); }
.apc-table tbody tr.sel[b-ypth8k8ohv] { background: color-mix(in srgb, var(--mud-palette-primary, #1f6fb2) 8%, transparent); }
.apc-table tbody tr.focus td:first-child[b-ypth8k8ohv] { box-shadow: inset 3px 0 0 var(--mud-palette-primary, #1f6fb2); }
.apc-table input[type=checkbox][b-ypth8k8ohv] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--mud-palette-primary, #1f6fb2); }
.c-check[b-ypth8k8ohv] { width: 34px; text-align: center !important; }
.c-kind[b-ypth8k8ohv] { width: 150px; }
.c-party[b-ypth8k8ohv] { width: 18%; max-width: 220px; }
.c-party span[b-ypth8k8ohv] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-amt[b-ypth8k8ohv] { width: 130px; text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-amt small[b-ypth8k8ohv] { color: var(--apc-muted); }
.c-date[b-ypth8k8ohv] { width: 92px; white-space: nowrap; }
.c-wait[b-ypth8k8ohv] { width: 80px; }
.c-who[b-ypth8k8ohv] { width: 190px; }
.c-act[b-ypth8k8ohv] { width: 84px; white-space: nowrap; text-align: right !important; }

.apc-chip[b-ypth8k8ohv] {
    --k: var(--mud-palette-primary, #1f6fb2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--k) 12%, transparent);
    color: var(--k);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.apc-no[b-ypth8k8ohv] { font-weight: 600; }
.apc-sum[b-ypth8k8ohv] { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--apc-muted); }
.apc-wait[b-ypth8k8ohv] { padding: 1px 7px; border-radius: 999px; background: var(--apc-soft); font-size: .72rem; white-space: nowrap; }
.apc-wait.late[b-ypth8k8ohv] { background: #fdecea; color: #b42318; font-weight: 700; }
.apc-wait.new[b-ypth8k8ohv] { background: #e8f5ec; color: #1b6e3a; }

.c-who[b-ypth8k8ohv] { white-space: nowrap; }
.apc-avatar[b-ypth8k8ohv] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #1f6fb2);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    vertical-align: middle;
}
.apc-avatar.unknown[b-ypth8k8ohv] { background: #94a3b8; }
.apc-who[b-ypth8k8ohv] { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: 145px; }
.apc-who b[b-ypth8k8ohv] { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.apc-who small[b-ypth8k8ohv] { overflow: hidden; text-overflow: ellipsis; font-size: .68rem; color: var(--apc-muted); }

.apc-empty td[b-ypth8k8ohv] { padding: 40px 10px !important; text-align: center; color: var(--apc-muted); cursor: default; }
.apc-more[b-ypth8k8ohv] { text-align: center; }

/* ---------- Chi tiết ---------- */
.apc-detail[b-ypth8k8ohv] {
    --k: var(--mud-palette-primary, #1f6fb2);
    position: sticky;
    top: 8px;
    width: 320px;
    max-height: calc(100vh - 170px);
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--apc-line);
    border-top: 4px solid var(--k);
    border-radius: 12px;
    background: var(--apc-surface);
    color: var(--apc-text);
    animation: apc-slide-b-ypth8k8ohv .2s ease-out;
}
.apc-detail .apc-chip[b-ypth8k8ohv] { --k: inherit; }
.apc-detail-head[b-ypth8k8ohv] { display: flex; align-items: center; justify-content: space-between; }
.apc-detail h3[b-ypth8k8ohv] { margin: 8px 0 2px; font-size: 1.15rem; word-break: break-word; }
.apc-detail-party[b-ypth8k8ohv] { font-size: .85rem; color: var(--apc-muted); }
.apc-detail-amt[b-ypth8k8ohv] { margin-top: 6px; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.apc-detail-amt small[b-ypth8k8ohv] { font-size: .8rem; color: var(--apc-muted); }
.apc-detail-sum[b-ypth8k8ohv] { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--apc-soft); font-size: .84rem; }
.apc-detail dl[b-ypth8k8ohv] { display: grid; grid-template-columns: 112px 1fr; gap: 5px 8px; margin: 12px 0; font-size: .82rem; }
.apc-detail dt[b-ypth8k8ohv] { color: var(--apc-muted); }
.apc-detail dd[b-ypth8k8ohv] { margin: 0; word-break: break-word; }
.apc-detail-who[b-ypth8k8ohv] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--apc-line); }
.apc-detail-who div[b-ypth8k8ohv] { display: flex; flex-direction: column; }
.apc-detail-who small[b-ypth8k8ohv] { font-size: .72rem; color: var(--apc-muted); }
.apc-detail-who small.ok[b-ypth8k8ohv] { color: #1b6e3a; }
.apc-detail-who small.warn[b-ypth8k8ohv] { color: #b45309; }
.apc-detail-actions[b-ypth8k8ohv] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }

@keyframes apc-slide-b-ypth8k8ohv { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ---------- Vừa xử lý / hộp thoại ---------- */
.apc-recent[b-ypth8k8ohv] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: .78rem; color: var(--apc-muted); }
.apc-recent-item[b-ypth8k8ohv] { padding: 2px 8px; border-radius: 999px; background: var(--apc-soft); }
.apc-recent-item.ok[b-ypth8k8ohv] { color: #1b6e3a; }
.apc-recent-item.ret[b-ypth8k8ohv] { color: #b45309; }
.apc-dlg-list[b-ypth8k8ohv] { max-height: 160px; overflow: auto; font-size: .85rem; line-height: 1.5; }

/* ---------- Màn hẹp ---------- */
@media (max-width: 1280px) {
    .apc-kpis[b-ypth8k8ohv] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .apc-body[b-ypth8k8ohv] { grid-template-columns: 200px minmax(0, 1fr); }
    .apc-detail[b-ypth8k8ohv] { grid-column: 1 / -1; width: auto; position: static; max-height: none; }
}
@media (max-width: 760px) {
    .apc-body[b-ypth8k8ohv] { grid-template-columns: 1fr; }
    .apc-side[b-ypth8k8ohv] { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .apc-side .apc-kind[b-ypth8k8ohv] { width: auto; }
    .apc-group[b-ypth8k8ohv] { width: 100%; }
    .apc-kpis[b-ypth8k8ohv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* _content/NVOPASL/Components/ExcelImport/Pages/ExcelImport_RowDialog.razor.rz.scp.css */
.excel-import-row-fields[b-rfcavr249v]  .mud-input-label {
    font-size: 1rem;
    font-weight: 600;
}
/* _content/NVOPASL/Components/Invoice_BKAV_NEW/Pages/Index.razor.rz.scp.css */
/* 5.12 Hóa đơn điện tử BKAV — dùng biến màu MudBlazor để theo theme sáng / tối */
.bk[b-tfeqh52sgc] {
    --bk-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --bk-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --bk-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --bk-primary: var(--mud-palette-primary, #1976d2);
    --bk-surface: var(--mud-palette-surface, #fff);
    --bk-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px 24px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Header ---------- */
.bk-head[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bk-title[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.bk-title h1[b-tfeqh52sgc] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.bk-title p[b-tfeqh52sgc] {
    margin: 2px 0 0;
    font-size: .8rem;
    color: var(--bk-muted);
}

.bk-title-icon[b-tfeqh52sgc] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--bk-primary), color-mix(in srgb, var(--bk-primary) 55%, #e53935));
}

.bk-conn[b-tfeqh52sgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 12px;
    border: 1px solid var(--bk-line);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--bk-surface);
}

.bk-conn.ok[b-tfeqh52sgc] { color: var(--mud-palette-success); }
.bk-conn.warn[b-tfeqh52sgc] { color: var(--mud-palette-warning); }

/* ---------- Card ---------- */
.bk-card[b-tfeqh52sgc] {
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    overflow: hidden;
}

.bk-card-head[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bk-line);
}

.bk-step[b-tfeqh52sgc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
}

.bk-step span[b-tfeqh52sgc] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .75rem;
    color: #fff;
    background: var(--bk-primary);
}

.bk-seg[b-tfeqh52sgc] {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--bk-soft);
}

.bk-seg button[b-tfeqh52sgc] {
    padding: 4px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bk-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.bk-seg button.on[b-tfeqh52sgc] {
    color: var(--bk-primary);
    background: var(--bk-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.bk-card-head[b-tfeqh52sgc]  .bk-search {
    flex: 1 1 240px;
    max-width: 380px;
    margin-top: 0;
}

.bk-head-actions[b-tfeqh52sgc] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ---------- Lọc trạng thái ---------- */
.bk-chips[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
}

.bk-chip[b-tfeqh52sgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border: 1px solid var(--bk-line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.bk-chip.on[b-tfeqh52sgc] {
    color: var(--bk-primary);
    border-color: color-mix(in srgb, var(--bk-primary) 55%, transparent);
    background: color-mix(in srgb, var(--bk-primary) 10%, transparent);
}

.bk-hint[b-tfeqh52sgc] {
    margin-left: auto;
    font-size: .75rem;
    color: var(--bk-muted);
}

/* ---------- Trạng thái ---------- */
.bk-status[b-tfeqh52sgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.bk-status[b-tfeqh52sgc]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.st-none[b-tfeqh52sgc] { color: var(--bk-muted); background: var(--bk-soft); }
.st-draft[b-tfeqh52sgc] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.st-wait[b-tfeqh52sgc] { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.st-issued[b-tfeqh52sgc] { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.st-other[b-tfeqh52sgc] { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }

/* ---------- Lưới ---------- */
.bk-card[b-tfeqh52sgc]  .bk-grid .mud-table-head .mud-table-cell {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bk-muted);
    background: var(--bk-soft);
}

.bk-card[b-tfeqh52sgc]  .bk-grid .bk-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bk-card[b-tfeqh52sgc]  .bk-grid tr.bk-row-selected > td {
    background: color-mix(in srgb, var(--bk-primary) 10%, transparent) !important;
}

.bk-card[b-tfeqh52sgc]  .bk-grid tbody tr {
    cursor: pointer;
}

.bk-cus b[b-tfeqh52sgc] {
    display: block;
    font-weight: 600;
}

.bk-cus small[b-tfeqh52sgc] {
    color: var(--bk-muted);
    font-size: .72rem;
}

.bk-mono[b-tfeqh52sgc] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .78rem;
}

.bk-empty[b-tfeqh52sgc] {
    padding: 24px;
    text-align: center;
    color: var(--bk-muted);
}

.bk-placeholder[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    color: var(--bk-muted);
    border-style: dashed;
}

/* ---------- Tóm tắt hóa đơn ---------- */
.bk-summary[b-tfeqh52sgc] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bk-line);
    background: color-mix(in srgb, var(--bk-primary) 4%, transparent);
}

.bk-sum-main[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bk-sum-grid[b-tfeqh52sgc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.bk-sum-grid .wide[b-tfeqh52sgc] {
    grid-column: 1 / -1;
}

.bk-sum-grid dt[b-tfeqh52sgc] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bk-muted);
}

.bk-sum-grid dd[b-tfeqh52sgc] {
    margin: 2px 0 0;
    font-size: .88rem;
    word-break: break-word;
}

.bk-sum-grid dd.num[b-tfeqh52sgc] {
    font-variant-numeric: tabular-nums;
}

/* ---------- Tab ---------- */
.bk-card[b-tfeqh52sgc]  .bk-tabs .mud-tabs-toolbar {
    border-bottom: 1px solid var(--bk-line);
}

.bk-card[b-tfeqh52sgc]  .bk-tab-panel {
    padding: 14px;
}

.bk-tip[b-tfeqh52sgc] {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--bk-muted);
}

.bk-subtitle[b-tfeqh52sgc] {
    margin: 12px 0 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bk-form[b-tfeqh52sgc] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px 12px;
}

.bk-form[b-tfeqh52sgc]  .span-1 { grid-column: span 1; }
.bk-form[b-tfeqh52sgc]  .span-2 { grid-column: span 2; }
.bk-form[b-tfeqh52sgc]  .span-3 { grid-column: span 3; }
.bk-form[b-tfeqh52sgc]  .span-4 { grid-column: span 4; }

.bk-form[b-tfeqh52sgc]  .bk-mono-input input {
    font-family: ui-monospace, Consolas, monospace;
}

@media (max-width: 960px) {
    .bk-form[b-tfeqh52sgc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-form[b-tfeqh52sgc]  .span-1,
    .bk-form[b-tfeqh52sgc]  .span-2,
    .bk-form[b-tfeqh52sgc]  .span-3,
    .bk-form[b-tfeqh52sgc]  .span-4 { grid-column: span 2; }
}

.bk-note[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.bk-note[b-tfeqh52sgc]  .mud-input-control {
    flex: 1 1 auto;
}

.bk-actions[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.bk-actions .bk-hint[b-tfeqh52sgc] {
    margin-left: 4px;
}

.bk-group[b-tfeqh52sgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--bk-line);
}

.bk-group-label[b-tfeqh52sgc] {
    flex: 0 0 100%;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bk-group[b-tfeqh52sgc]  .bk-inline-input { flex: 0 1 280px; }
.bk-group[b-tfeqh52sgc]  .bk-inline-input-s { flex: 0 1 150px; }
.bk-group[b-tfeqh52sgc]  .bk-inline-input-l { flex: 1 1 420px; }

/* ---------- Vùng nguy hiểm ---------- */
.bk-danger[b-tfeqh52sgc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.bk-danger > div[b-tfeqh52sgc] {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    border-radius: var(--bk-radius);
    background: color-mix(in srgb, var(--mud-palette-error) 4%, transparent);
}

.bk-danger h3[b-tfeqh52sgc] {
    margin: 0;
    font-size: .95rem;
    color: var(--mud-palette-error);
}

.bk-danger p[b-tfeqh52sgc] {
    margin: 4px 0 6px;
    font-size: .8rem;
    color: var(--bk-muted);
}

/* ---------- Công cụ khác ---------- */
.bk[b-tfeqh52sgc]  .bk-tools {
    border-radius: var(--bk-radius);
}

.bk[b-tfeqh52sgc]  .bk-tools .bk-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* MST sai / thiếu địa chỉ người mua: cảnh báo + nút sửa nhanh khách hàng */
.bk-buyer-issue[b-tfeqh52sgc] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
}

/* Thao tác trên dòng: xuất nháp / ký / tải PDF */
.bk-row-actions[b-tfeqh52sgc] { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
/* _content/NVOPASL/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ajmi4pinny] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ajmi4pinny] {
    flex: 1;
}

.sidebar[b-ajmi4pinny] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ajmi4pinny] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ajmi4pinny]  a, .top-row[b-ajmi4pinny]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ajmi4pinny]  a:hover, .top-row[b-ajmi4pinny]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ajmi4pinny]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.bi[b-ajmi4pinny] {
  display: inline-block;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  top: -1px;
  background-size: cover;
}

.bi-person-fill[b-ajmi4pinny] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='blue' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

@media (max-width: 640.98px) {
    .top-row[b-ajmi4pinny] {
        justify-content: space-between;
    }

    .top-row[b-ajmi4pinny]  a, .top-row[b-ajmi4pinny]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ajmi4pinny] {
        flex-direction: row;
    }

    .sidebar[b-ajmi4pinny] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ajmi4pinny] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ajmi4pinny]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ajmi4pinny], article[b-ajmi4pinny] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ajmi4pinny] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ajmi4pinny] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/NVOPASL/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-mosohuqhjf] {
  appearance: none;
  cursor: pointer;
  width: 3.5rem;
  height: 2.5rem;
  color: white;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

  .navbar-toggler:checked[b-mosohuqhjf] {
    background-color: rgba(255, 255, 255, 0.5);
  }

.top-row[b-mosohuqhjf] {
  height: 3.5rem;
  background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-mosohuqhjf] {
  font-size: 1.1rem;
}

.bi[b-mosohuqhjf] {
  display: inline-block;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  top: -1px;
  background-size: cover;
}

.bi-house-door-fill-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-mosohuqhjf] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-mosohuqhjf] {
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
}

  .nav-item:first-of-type[b-mosohuqhjf] {
    padding-top: 1rem;
  }

  .nav-item:last-of-type[b-mosohuqhjf] {
    padding-bottom: 1rem;
  }

  .nav-item[b-mosohuqhjf]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
  }

  .nav-item[b-mosohuqhjf]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
  }

  .nav-item[b-mosohuqhjf]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
  }

.nav-scrollable[b-mosohuqhjf] {
  display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-mosohuqhjf] {
  display: block;
}

@media (min-width: 641px) {
  .navbar-toggler[b-mosohuqhjf] {
    display: none;
  }

  .nav-scrollable[b-mosohuqhjf] {
    /* Never collapse the sidebar for wide screens */
    display: block;
    /* Allow sidebar to scroll for tall menus */
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
}

/* ---------- Ô tìm màn hình (wwwroot/js/nav-search.js) ---------- */
.nav-search[b-mosohuqhjf] {
    position: relative;
    margin: 6px 12px 10px;
}

.nav-search input[b-mosohuqhjf] {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 5%, transparent);
    color: inherit;
    font: inherit;
    font-size: .85rem;
    outline: none;
}

.nav-search input:focus[b-mosohuqhjf] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.nav-search[b-mosohuqhjf]  .nav-search-icon {
    position: absolute;
    left: 9px;
    top: 9px;
    opacity: .55;
    pointer-events: none;
}

.nav-search-results[b-mosohuqhjf] {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1300;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,.12));
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

.nav-search.open .nav-search-results[b-mosohuqhjf] {
    display: block;
}

.nav-search[b-mosohuqhjf]  .nav-search-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-search[b-mosohuqhjf]  .nav-search-item.active,
.nav-search[b-mosohuqhjf]  .nav-search-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.nav-search[b-mosohuqhjf]  .nav-search-name {
    font-size: .85rem;
    font-weight: 600;
}

.nav-search[b-mosohuqhjf]  .nav-search-path {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.nav-search[b-mosohuqhjf]  .nav-search-empty {
    padding: 10px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Tiêu đề lĩnh vực / tiêu đề nhỏ ---------- */
.nav-section[b-mosohuqhjf] {
    margin: 14px 16px 4px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .6;
}

.nav-subsection[b-mosohuqhjf] {
    margin: 10px 16px 2px 28px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .5;
}

/* ---------- Nhóm con: đường thụt lề cho dễ nhìn cấp menu ---------- */
.nav-menu-full-height[b-mosohuqhjf]  .mud-nav-group .mud-collapse-wrapper-inner {
    margin-left: 14px;
    border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.nav-menu-full-height[b-mosohuqhjf]  .mud-nav-link {
    border-radius: 6px;
}

.nav-menu-full-height[b-mosohuqhjf]  .mud-nav-link:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}
/* _content/NVOPASL/Components/LCC_POL_VN/Pages/LccPolVietnamEdit_Dialog.razor.rz.scp.css */
.lcc-dialog[b-1q9mnhz2ul] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 4px;
}

.lcc-section-title[b-1q9mnhz2ul] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[b-1q9mnhz2ul] .lcc-num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lcc-meta[b-1q9mnhz2ul] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}
/* _content/NVOPASL/Components/Pemission/Pages/Index.razor.rz.scp.css */
/* 1.6 Phân quyền — dùng biến màu MudBlazor để theo theme sáng / tối */
.pm[b-c2vz3uj9tp] {
    --pm-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --pm-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --pm-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --pm-primary: var(--mud-palette-primary, #1976d2);
    --pm-surface: var(--mud-palette-surface, #fff);
    --pm-radius: 10px;
    --pm-cols: minmax(220px, 1fr) repeat(5, 58px) 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px 72px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Header ---------- */
.pm-head[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pm-title[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.pm-title h1[b-c2vz3uj9tp] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.pm-title p[b-c2vz3uj9tp] {
    margin: 2px 0 0;
    font-size: .8rem;
    color: var(--pm-muted);
}

.pm-title-icon[b-c2vz3uj9tp] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--pm-primary), color-mix(in srgb, var(--pm-primary) 60%, #7c4dff));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pm-primary) 35%, transparent);
}

.pm-mode[b-c2vz3uj9tp] {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--pm-soft);
    border: 1px solid var(--pm-line);
}

.pm-mode button[b-c2vz3uj9tp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--pm-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pm-mode button.on[b-c2vz3uj9tp] {
    background: var(--pm-surface);
    color: var(--pm-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.pm-tools[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Layout 2 cột ---------- */
.pm-body[b-c2vz3uj9tp] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.pm-side[b-c2vz3uj9tp],
.pm-card[b-c2vz3uj9tp],
.pm-mod[b-c2vz3uj9tp] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-radius);
}

.pm-side[b-c2vz3uj9tp] {
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
    overflow: hidden;
}

.pm-side-search[b-c2vz3uj9tp] {
    padding: 10px 10px 4px;
}

.pm-side > .pm-chips[b-c2vz3uj9tp] {
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--pm-line);
    max-height: 92px;
    overflow-y: auto;
}

.pm-list[b-c2vz3uj9tp] {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
}

.pm-list-group[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-muted);
}

.pm-user[b-c2vz3uj9tp],
.pm-fnitem[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background .12s;
}

.pm-user:hover[b-c2vz3uj9tp],
.pm-fnitem:hover[b-c2vz3uj9tp] {
    background: var(--pm-soft);
}

.pm-user.sel[b-c2vz3uj9tp],
.pm-fnitem.sel[b-c2vz3uj9tp] {
    background: color-mix(in srgb, var(--pm-primary) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--pm-primary);
}

.pm-user-main[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pm-user-main b[b-c2vz3uj9tp],
.pm-fnitem-name[b-c2vz3uj9tp] {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-fnitem-name[b-c2vz3uj9tp] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.pm-user-main small[b-c2vz3uj9tp] {
    font-size: .72rem;
    color: var(--pm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-count[b-c2vz3uj9tp] {
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    background: var(--pm-soft);
    color: var(--pm-muted);
}

.pm-user.sel .pm-count[b-c2vz3uj9tp],
.pm-fnitem.sel .pm-count[b-c2vz3uj9tp] {
    background: var(--pm-primary);
    color: #fff;
}

.pm-dot[b-c2vz3uj9tp] {
    position: absolute;
    top: 6px;
    left: 34px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-warning, #ff9800);
    border: 2px solid var(--pm-surface);
}

.pm-avatar[b-c2vz3uj9tp] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.pm-avatar.sm[b-c2vz3uj9tp] { width: 28px; height: 28px; font-size: .66rem; }
.pm-avatar.lg[b-c2vz3uj9tp] { width: 52px; height: 52px; font-size: 1rem; }

/* ---------- Cột chính ---------- */
.pm-main[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.pm-userhead[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.pm-userhead-main[b-c2vz3uj9tp] {
    flex: 1;
    min-width: 200px;
}

.pm-userhead-main h2[b-c2vz3uj9tp] {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
}

.pm-userhead-main p[b-c2vz3uj9tp] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pm-tag[b-c2vz3uj9tp] {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--pm-soft);
    border: 1px solid var(--pm-line);
}

.pm-muted[b-c2vz3uj9tp] { font-size: .78rem; color: var(--pm-muted); }

.pm-key[b-c2vz3uj9tp],
.pm-fn-name code[b-c2vz3uj9tp] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .7rem;
    color: var(--pm-muted);
}

.pm-stat[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.pm-stat b[b-c2vz3uj9tp] {
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--pm-primary);
}

.pm-stat b span[b-c2vz3uj9tp] { font-size: .85rem; color: var(--pm-muted); font-weight: 600; }
.pm-stat small[b-c2vz3uj9tp] { font-size: .72rem; color: var(--pm-muted); }

.pm-meter[b-c2vz3uj9tp] {
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--pm-soft);
    overflow: hidden;
}

.pm-meter i[b-c2vz3uj9tp] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pm-primary);
    transition: width .2s;
}

.pm-copy[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
}

.pm-copy[b-c2vz3uj9tp]  .mud-input-control { margin: 0; }

/* ---------- Bộ lọc ---------- */
.pm-filter[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-filter[b-c2vz3uj9tp]  .pm-filter-search {
    flex: 0 1 320px;
    margin: 0;
}

.pm-chips[b-c2vz3uj9tp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pm-chips button[b-c2vz3uj9tp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--pm-line);
    background: var(--pm-surface);
    color: inherit;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.pm-chips button:hover[b-c2vz3uj9tp] { border-color: var(--pm-primary); }

.pm-chips button.on[b-c2vz3uj9tp] {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    color: #fff;
}

.pm-chips button i[b-c2vz3uj9tp] {
    font-style: normal;
    font-size: .68rem;
    opacity: .75;
}

.pm-switch[b-c2vz3uj9tp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    cursor: pointer;
    user-select: none;
    margin-left: auto;
}

.pm-switch input[b-c2vz3uj9tp] { position: absolute; opacity: 0; pointer-events: none; }

.pm-switch span[b-c2vz3uj9tp] {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--pm-line);
    transition: background .15s;
}

.pm-switch span[b-c2vz3uj9tp]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform .15s;
}

.pm-switch input:checked + span[b-c2vz3uj9tp] { background: var(--pm-primary); }
.pm-switch input:checked + span[b-c2vz3uj9tp]::after { transform: translateX(14px); }

/* ---------- Ma trận quyền ---------- */
.pm-matrix[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-mod[b-c2vz3uj9tp] { overflow: hidden; }

.pm-grid[b-c2vz3uj9tp] {
    display: grid;
    grid-template-columns: var(--pm-cols);
    align-items: center;
}

.pm-mod-head[b-c2vz3uj9tp] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--pm-primary) 6%, var(--pm-surface));
    border-bottom: 1px solid var(--pm-line);
}

.pm-mod-title[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pm-mod-title > span:last-child[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
}

.pm-mod-title b[b-c2vz3uj9tp] { font-size: .9rem; }
.pm-mod-title small[b-c2vz3uj9tp] { font-size: .72rem; color: var(--pm-muted); }

.pm-mod-icon[b-c2vz3uj9tp] {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--pm-primary);
    background: color-mix(in srgb, var(--pm-primary) 14%, transparent);
}

.pm-mod-icon.lg[b-c2vz3uj9tp] { width: 52px; height: 52px; border-radius: 14px; }

.pm-colall[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pm-muted);
    cursor: pointer;
}

.pm-colall input[b-c2vz3uj9tp] {
    width: 14px;
    height: 14px;
    accent-color: var(--pm-primary);
    cursor: pointer;
}

.pm-row[b-c2vz3uj9tp] {
    padding: 6px 12px;
    border-bottom: 1px solid var(--pm-line);
    transition: background .1s;
}

.pm-row:last-child[b-c2vz3uj9tp] { border-bottom: 0; }
.pm-row:hover[b-c2vz3uj9tp] { background: var(--pm-soft); }
.pm-row.on .pm-fn-name[b-c2vz3uj9tp] { font-weight: 600; }

.pm-row.dirty[b-c2vz3uj9tp] {
    background: color-mix(in srgb, var(--mud-palette-warning, #ff9800) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-warning, #ff9800);
}

.pm-fn[b-c2vz3uj9tp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pm-code[b-c2vz3uj9tp] {
    flex: none;
    min-width: 54px;
    max-width: 110px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pm-primary);
    background: color-mix(in srgb, var(--pm-primary) 10%, transparent);
}

.pm-fn-name[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .85rem;
}

.pm-fn-name code[b-c2vz3uj9tp] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox tùy biến */
.pm-cb[b-c2vz3uj9tp] {
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pm-cb input[b-c2vz3uj9tp] { position: absolute; opacity: 0; pointer-events: none; }

.pm-cb span[b-c2vz3uj9tp] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--pm-line);
    background: var(--pm-surface);
    display: grid;
    place-items: center;
    transition: background .12s, border-color .12s, transform .08s;
}

.pm-cb:hover span[b-c2vz3uj9tp] { border-color: var(--pm-primary); }
.pm-cb:active span[b-c2vz3uj9tp] { transform: scale(.9); }

.pm-cb input:checked + span[b-c2vz3uj9tp] {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
}

.pm-cb input:checked + span[b-c2vz3uj9tp]::after {
    content: "";
    width: 5px;
    height: 10px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pm-cb input:focus-visible + span[b-c2vz3uj9tp] {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}

.pm-cb.all input:checked + span[b-c2vz3uj9tp] {
    background: var(--mud-palette-success, #2e7d32);
    border-color: var(--mud-palette-success, #2e7d32);
}

/* ---------- Trạng thái rỗng ---------- */
.pm-empty[b-c2vz3uj9tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 360px;
    padding: 24px;
    border: 1px dashed var(--pm-line);
    border-radius: var(--pm-radius);
    color: var(--pm-muted);
}

.pm-empty h2[b-c2vz3uj9tp] { margin: 6px 0 0; font-size: 1.05rem; color: var(--mud-palette-text-primary); }
.pm-empty p[b-c2vz3uj9tp] { margin: 0; max-width: 380px; font-size: .85rem; }

.pm-empty-sm[b-c2vz3uj9tp] {
    padding: 18px;
    text-align: center;
    font-size: .82rem;
    color: var(--pm-muted);
}

/* ---------- Thanh lưu ---------- */
.pm-savebar[b-c2vz3uj9tp] {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(720px, calc(100vw - 32px));
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-line);
    border-left: 4px solid var(--mud-palette-warning, #ff9800);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    font-size: .85rem;
    animation: pm-up-b-c2vz3uj9tp .18s ease-out;
}

@keyframes pm-up-b-c2vz3uj9tp {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Màn hình hẹp ---------- */
@media (max-width: 960px) {
    .pm-body[b-c2vz3uj9tp] { grid-template-columns: minmax(0, 1fr); }
    .pm-side[b-c2vz3uj9tp] { position: static; max-height: 320px; }
    .pm-switch[b-c2vz3uj9tp] { margin-left: 0; }
    .pm-copy[b-c2vz3uj9tp] { min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
    .pm[b-c2vz3uj9tp] { --pm-cols: minmax(140px, 1fr) repeat(5, 36px) 40px; }
    .pm-code[b-c2vz3uj9tp] { display: none; }
    .pm-colall span[b-c2vz3uj9tp] { font-size: .58rem; }
    .pm-row[b-c2vz3uj9tp], .pm-mod-head[b-c2vz3uj9tp] { padding-left: 8px; padding-right: 8px; }
}
/* _content/NVOPASL/Components/PricingOceanFreightRate/Pages/PricingRateEdit_Dialog.razor.rz.scp.css */
.ofr-dialog[b-f8goh9opnd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 4px;
}

.ofr-section-title[b-f8goh9opnd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ofr-rate-scroll[b-f8goh9opnd] {
    overflow-x: auto;
}

.ofr-rate-table[b-f8goh9opnd] {
    min-width: 600px;
    display: flex;
    flex-direction: column;
}

.ofr-rate-row[b-f8goh9opnd] {
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(120px, 1fr));
    gap: 10px;
    align-items: start;
    padding: 4px 8px;
    border-radius: 6px;
}

.ofr-rate-head[b-f8goh9opnd] {
    padding-top: 0;
    padding-bottom: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-weight: 600;
}

.ofr-num-head[b-f8goh9opnd] {
    text-align: right;
    padding-right: 14px;
}

.ofr-rate-label[b-f8goh9opnd] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    line-height: 1.2;
}

    .ofr-rate-label small[b-f8goh9opnd] {
        color: var(--mud-palette-text-secondary);
        font-size: .7rem;
    }

.ofr-rate-total[b-f8goh9opnd] {
    margin: 2px 0;
    background: var(--mud-palette-background-gray);
}

    .ofr-rate-total .ofr-rate-label span[b-f8goh9opnd] {
        font-weight: 600;
    }

.ofr-rate-grand .ofr-rate-label span[b-f8goh9opnd] {
    color: var(--mud-palette-primary);
}

.ofr-rate-grand[b-f8goh9opnd]  input {
    font-weight: 700;
}

[b-f8goh9opnd] .ofr-num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ofr-hint[b-f8goh9opnd] {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--mud-palette-warning-darken);
    font-size: .72rem;
    text-align: right;
    cursor: pointer;
}

    .ofr-hint:hover[b-f8goh9opnd],
    .ofr-hint:focus-visible[b-f8goh9opnd] {
        text-decoration: underline;
    }

.ofr-meta[b-f8goh9opnd] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}
/* _content/NVOPASL/Components/Shared/OwlBoard.razor.rz.scp.css */
/* 1.1 Dashboard — phần cú mèo (cùng tông màu với nút cú mèo: nâu cú, xanh / cam / đỏ theo mức) */
.ob[b-2azigdp05o] {
    --ob-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --ob-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --ob-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --ob-surface: var(--mud-palette-surface, #fff);
    --ob-ok: #43a047;
    --ob-info: #1e88e5;
    --ob-warn: #fb8c00;
    --ob-crit: #e53935;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px 0 18px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Hero ---------- */
.ob-hero[b-2azigdp05o] {
    --c: var(--ob-ok);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(120deg, #4e342e 0%, #6d4c41 45%, color-mix(in srgb, var(--c) 75%, #5d4037) 100%);
    box-shadow: 0 10px 28px rgba(78,52,46,.25);
}

.ob-hero.lvl-info[b-2azigdp05o] { --c: var(--ob-info); }
.ob-hero.lvl-warn[b-2azigdp05o] { --c: var(--ob-warn); }
.ob-hero.lvl-crit[b-2azigdp05o] { --c: var(--ob-crit); }

.ob-face[b-2azigdp05o] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fff 0%, #f3e9dc 70%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent);
}

.ob-ear[b-2azigdp05o] { fill: #6d4c41; }
.ob-head[b-2azigdp05o] { fill: #8d6e63; }
.ob-mask[b-2azigdp05o] { fill: #efebe9; }
.ob-iris[b-2azigdp05o] { fill: var(--c); }
.ob-pupil[b-2azigdp05o] { fill: #212121; }
.ob-glint[b-2azigdp05o] { fill: #fff; }
.ob-beak[b-2azigdp05o] { fill: #ffb300; }
.ob-brow[b-2azigdp05o] { fill: none; stroke: #4e342e; stroke-width: 2.4; stroke-linecap: round; }
.ob-eyes[b-2azigdp05o] { transform-origin: 32px 32px; animation: ob-blink-b-2azigdp05o 5s infinite; }

@keyframes ob-blink-b-2azigdp05o {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(.1); }
}

.ob-hero-text[b-2azigdp05o] { flex: 1 1 auto; min-width: 0; }
.ob-hero-text h2[b-2azigdp05o] { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ob-hero-text p[b-2azigdp05o] { margin: 2px 0; font-size: .92rem; }
.ob-hero-text small[b-2azigdp05o] { opacity: .8; font-size: .75rem; }

.ob-levels[b-2azigdp05o] { display: flex; gap: 8px; }

.ob-level[b-2azigdp05o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border-top: 3px solid var(--lc, #fff);
}

.ob-level.crit[b-2azigdp05o] { --lc: #ff8a80; }
.ob-level.warn[b-2azigdp05o] { --lc: #ffd180; }
.ob-level.info[b-2azigdp05o] { --lc: #82b1ff; }
.ob-level.users[b-2azigdp05o] { --lc: #b9f6ca; }
.ob-level b[b-2azigdp05o] { font-size: 1.4rem; line-height: 1.2; }
.ob-level span[b-2azigdp05o] { font-size: .7rem; opacity: .9; white-space: nowrap; }

.ob-refresh[b-2azigdp05o] {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    color: #fff;
    cursor: pointer;
}

.ob-refresh:hover[b-2azigdp05o] { background: rgba(255,255,255,.3); }
.ob[b-2azigdp05o]  .ob-spin { animation: ob-rot-b-2azigdp05o 1s linear infinite; }
@keyframes ob-rot-b-2azigdp05o { to { transform: rotate(360deg); } }

/* ---------- Ô lĩnh vực ---------- */
.ob-areas[b-2azigdp05o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.ob-area[b-2azigdp05o] {
    --c: var(--ob-ok);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 8px;
    padding: 10px 12px;
    border: 1px solid var(--ob-line);
    border-left: 4px solid var(--c);
    border-radius: 12px;
    background: var(--ob-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}

.ob-area:hover[b-2azigdp05o] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ob-area.on[b-2azigdp05o] { box-shadow: 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 7%, var(--ob-surface)); }
.ob-area.lvl-info[b-2azigdp05o] { --c: var(--ob-info); }
.ob-area.lvl-warn[b-2azigdp05o] { --c: var(--ob-warn); }
.ob-area.lvl-crit[b-2azigdp05o] { --c: var(--ob-crit); }
.ob[b-2azigdp05o]  .ob-area-icon { color: var(--c); font-size: 1.3rem; }
.ob-area-name[b-2azigdp05o] { font-size: .82rem; font-weight: 600; }
.ob-area b[b-2azigdp05o] { font-size: 1.15rem; color: var(--c); }

.ob-area small[b-2azigdp05o] {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--ob-muted);
    font-size: .7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Cột ---------- */
.ob-main[b-2azigdp05o] { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.ob-main.single[b-2azigdp05o] { grid-template-columns: 1fr; }
.ob-col[b-2azigdp05o] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ob-col-head[b-2azigdp05o] { display: flex; align-items: baseline; gap: 10px; }
.ob-col-head h3[b-2azigdp05o] { margin: 0; font-size: 1rem; font-weight: 700; }
.ob-col-head small[b-2azigdp05o] { color: var(--ob-muted); font-size: .74rem; }
.ob-col-head .ob-link[b-2azigdp05o] { margin-left: auto; }

.ob-card[b-2azigdp05o], .ob-flow-card[b-2azigdp05o] {
    padding: 12px 14px;
    border: 1px solid var(--ob-line);
    border-radius: 12px;
    background: var(--ob-surface);
}

.ob-empty[b-2azigdp05o] {
    padding: 20px 12px;
    border: 1px dashed var(--ob-line);
    border-radius: 12px;
    color: var(--ob-muted);
    font-size: .85rem;
    text-align: center;
}

.ob-empty.small[b-2azigdp05o] { padding: 6px 2px; border: 0; text-align: left; font-size: .8rem; }
.ob-empty.ok[b-2azigdp05o] { color: var(--ob-ok); }

/* ---------- Thẻ cảnh báo ---------- */
.ob-alerts[b-2azigdp05o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ob-alert[b-2azigdp05o] {
    --c: var(--ob-info);
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid var(--ob-line);
    border-top: 4px solid var(--c);
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, var(--ob-surface)) 0%, var(--ob-surface) 60%);
}

.ob-alert.lvl-warn[b-2azigdp05o] { --c: var(--ob-warn); }
.ob-alert.lvl-crit[b-2azigdp05o] { --c: var(--ob-crit); }
.ob-alert-top[b-2azigdp05o] { display: flex; align-items: center; justify-content: space-between; }
.ob-tag[b-2azigdp05o] { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }

.ob-count[b-2azigdp05o] {
    min-width: 28px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.ob-alert h4[b-2azigdp05o] { margin: 4px 0 2px; font-size: .92rem; }
.ob-alert p[b-2azigdp05o] { margin: 0; color: var(--ob-muted); font-size: .78rem; }
.ob-alert ul[b-2azigdp05o] { flex: 1 1 auto; margin: 6px 0 0; padding-left: 16px; font-size: .76rem; }
.ob-alert .ob-link[b-2azigdp05o] { align-self: flex-start; margin-top: 8px; }

.ob-link[b-2azigdp05o] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.ob-link:hover[b-2azigdp05o] { text-decoration: underline; }

/* ---------- Luồng chứng từ ---------- */
.ob-flow-card h5[b-2azigdp05o] {
    margin: 0 0 8px;
    color: var(--ob-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ob-flow[b-2azigdp05o] { display: flex; flex-direction: column; gap: 9px; }
.ob-step-head[b-2azigdp05o] { display: flex; align-items: center; gap: 8px; font-size: .84rem; }

.ob-step-no[b-2azigdp05o] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: .7rem;
    font-weight: 700;
}

.ob-step-name[b-2azigdp05o] { margin-right: auto; }
.ob-step-head small[b-2azigdp05o] { width: 40px; color: var(--ob-muted); text-align: right; }
.ob-bar[b-2azigdp05o] { height: 9px; margin: 4px 0 0 28px; border-radius: 999px; background: var(--ob-soft); overflow: hidden; }

.ob-bar span[b-2azigdp05o] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d4c41, color-mix(in srgb, var(--mud-palette-primary) 70%, var(--ob-ok)));
}

.ob-stuck[b-2azigdp05o] { margin: 3px 0 0 28px; color: var(--ob-warn); font-size: .72rem; }

/* ---------- Người dùng / xung đột ---------- */
.ob-user[b-2azigdp05o] { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--ob-line); font-size: .84rem; }
.ob-user:last-child[b-2azigdp05o], .ob-row:last-child[b-2azigdp05o] { border-bottom: 0; }
.ob-user small[b-2azigdp05o], .ob-row small[b-2azigdp05o] { color: var(--ob-muted); font-size: .72rem; }
.ob-dot[b-2azigdp05o] { flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ob-line); }
.ob-dot.live[b-2azigdp05o] { background: var(--ob-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-ok) 25%, transparent); }
.ob-screens[b-2azigdp05o] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ob-screen[b-2azigdp05o] { padding: 0 8px; border-radius: 999px; background: var(--ob-soft); font-size: .7rem; }
.ob-screen.active[b-2azigdp05o] { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); font-weight: 600; }
.ob-row[b-2azigdp05o] { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px dashed var(--ob-line); font-size: .82rem; }
.ob-row.conflict b[b-2azigdp05o] { color: var(--ob-crit); }

@media (max-width: 1100px) {
    .ob-main[b-2azigdp05o] { grid-template-columns: 1fr; }
    .ob-hero[b-2azigdp05o] { flex-wrap: wrap; }
    .ob-levels[b-2azigdp05o] { order: 3; width: 100%; }
    .ob-level[b-2azigdp05o] { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 600px) {
    .ob-face[b-2azigdp05o] { flex-basis: 52px; width: 52px; height: 52px; }
    .ob-areas[b-2azigdp05o] { grid-template-columns: repeat(2, 1fr); }
}

/* Dòng mẫu có nút thao tác (vd "Tạo Job" trên booking chưa có lô hàng) */
.ob-li-act[b-2azigdp05o] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ob-li-act > span[b-2azigdp05o] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-act[b-2azigdp05o] { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
          color: #fff; background: #1976d2; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ob-act:hover[b-2azigdp05o] { background: #1565c0; }

/* Logo công ty thay cú mèo */
.ob-logo[b-2azigdp05o] { object-fit: contain; background: #fff; }
/* _content/NVOPASL/Components/Shared/OwlWidget.razor.rz.scp.css */
/* Cú mèo cảnh báo — nút nổi góc phải dưới (bên trái nút trợ lý AI) + bảng cảnh báo */
.owl-fab[b-6wfp6uqtvt] {
    --owl-c: #43a047;
    position: fixed;
    right: 96px;
    bottom: 26px;
    z-index: 1400;
    width: 60px;
    height: 60px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fff 0%, #f3e9dc 70%);
    box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 3px color-mix(in srgb, var(--owl-c) 55%, transparent);
    cursor: pointer;
    transition: transform .15s;
}

.owl-fab:hover[b-6wfp6uqtvt] { transform: translateY(-2px) scale(1.04); }
.owl-fab.lvl-info[b-6wfp6uqtvt] { --owl-c: #1e88e5; }
.owl-fab.lvl-warn[b-6wfp6uqtvt] { --owl-c: #fb8c00; }
.owl-fab.lvl-crit[b-6wfp6uqtvt] { --owl-c: #e53935; animation: owl-nudge-b-6wfp6uqtvt 3.5s ease-in-out infinite; }

.owl-face[b-6wfp6uqtvt] { width: 100%; height: 100%; display: block; }
.owl-head[b-6wfp6uqtvt] { fill: #8d6e63; }
.owl-ear[b-6wfp6uqtvt] { fill: #6d4c41; }
.owl-mask[b-6wfp6uqtvt] { fill: #efebe9; }
.owl-iris[b-6wfp6uqtvt] { fill: var(--owl-c); }
.owl-pupil[b-6wfp6uqtvt] { fill: #212121; }
.owl-glint[b-6wfp6uqtvt] { fill: #fff; }
.owl-beak[b-6wfp6uqtvt] { fill: #ffb300; }
.owl-brow[b-6wfp6uqtvt] { fill: none; stroke: #4e342e; stroke-width: 2.4; stroke-linecap: round; }
.owl-fab.lvl-crit .owl-brow[b-6wfp6uqtvt] { stroke-width: 3; }
.owl-eyes[b-6wfp6uqtvt] { transform-origin: 32px 32px; animation: owl-blink-b-6wfp6uqtvt 5s infinite; }

.owl-badge[b-6wfp6uqtvt] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--owl-c);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

@keyframes owl-blink-b-6wfp6uqtvt {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(.1); }
}

@keyframes owl-nudge-b-6wfp6uqtvt {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-9deg); }
    92% { transform: rotate(8deg); }
    95% { transform: rotate(-5deg); }
}

/* ---------- Bảng cảnh báo ---------- */
.owl-panel[b-6wfp6uqtvt] {
    --owl-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --owl-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --owl-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    position: fixed;
    right: 96px;
    bottom: 96px;
    z-index: 1401;
    width: min(440px, calc(100vw - 32px));
    max-height: min(74vh, 760px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--owl-line);
    border-radius: 14px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
    overflow: hidden;
}

.owl-head-bar[b-6wfp6uqtvt] {
    --owl-c: #43a047;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    color: #fff;
    background: linear-gradient(135deg, #5d4037, color-mix(in srgb, var(--owl-c) 70%, #5d4037));
}

.owl-head-bar.lvl-info[b-6wfp6uqtvt] { --owl-c: #1e88e5; }
.owl-head-bar.lvl-warn[b-6wfp6uqtvt] { --owl-c: #fb8c00; }
.owl-head-bar.lvl-crit[b-6wfp6uqtvt] { --owl-c: #e53935; }
.owl-head-bar > div[b-6wfp6uqtvt] { display: flex; flex-direction: column; margin-right: auto; }
.owl-head-bar small[b-6wfp6uqtvt] { opacity: .85; font-size: .74rem; }

.owl-icon-btn[b-6wfp6uqtvt] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
}

.owl-icon-btn:hover[b-6wfp6uqtvt] { background: rgba(255,255,255,.28); }
.owl-panel[b-6wfp6uqtvt]  .owl-spin { animation: owl-rot-b-6wfp6uqtvt 1s linear infinite; }
@keyframes owl-rot-b-6wfp6uqtvt { to { transform: rotate(360deg); } }

.owl-tabs[b-6wfp6uqtvt] {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--owl-line);
}

.owl-tabs button[b-6wfp6uqtvt] {
    padding: 6px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--owl-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.owl-tabs button.on[b-6wfp6uqtvt] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.owl-tabs b[b-6wfp6uqtvt] {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    background: var(--owl-soft);
}

.owl-body[b-6wfp6uqtvt] {
    flex: 1 1 auto;
    padding: 10px 12px 14px;
    overflow-y: auto;
}

.owl-empty[b-6wfp6uqtvt] {
    padding: 22px 10px;
    text-align: center;
    color: var(--owl-muted);
    font-size: .85rem;
}

.owl-empty.small[b-6wfp6uqtvt] { padding: 6px 4px; text-align: left; font-size: .78rem; }
.owl-empty.ok[b-6wfp6uqtvt] { color: var(--mud-palette-success); }

/* ---------- Thẻ cảnh báo ---------- */
.owl-alert[b-6wfp6uqtvt] {
    --owl-c: var(--mud-palette-info);
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--owl-line);
    border-left: 4px solid var(--owl-c);
    border-radius: 10px;
    background: color-mix(in srgb, var(--owl-c) 5%, transparent);
}

.owl-alert.lvl-warn[b-6wfp6uqtvt] { --owl-c: var(--mud-palette-warning); }
.owl-alert.lvl-crit[b-6wfp6uqtvt] { --owl-c: var(--mud-palette-error); }

.owl-alert-top[b-6wfp6uqtvt] { display: flex; align-items: center; justify-content: space-between; }

.owl-area[b-6wfp6uqtvt] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--owl-c);
}

.owl-count[b-6wfp6uqtvt] {
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: var(--owl-c);
}

.owl-alert h4[b-6wfp6uqtvt] { margin: 4px 0 2px; font-size: .9rem; }
.owl-alert p[b-6wfp6uqtvt] { margin: 0; font-size: .78rem; color: var(--owl-muted); }
.owl-alert ul[b-6wfp6uqtvt] { margin: 6px 0 0; padding-left: 16px; font-size: .76rem; }
.owl-alert li[b-6wfp6uqtvt] { margin: 1px 0; }

.owl-go[b-6wfp6uqtvt] {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Luồng chứng từ ---------- */
.owl-note[b-6wfp6uqtvt] { margin: 0 0 8px; font-size: .76rem; color: var(--owl-muted); }

.owl-sub[b-6wfp6uqtvt] {
    margin: 12px 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--owl-muted);
}

.owl-flow[b-6wfp6uqtvt] { display: flex; flex-direction: column; gap: 8px; }
.owl-step-head[b-6wfp6uqtvt] { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; }
.owl-step-head span[b-6wfp6uqtvt] { margin-right: auto; }
.owl-step-head small[b-6wfp6uqtvt] { width: 38px; text-align: right; color: var(--owl-muted); }

.owl-bar[b-6wfp6uqtvt] {
    height: 8px;
    margin-top: 3px;
    border-radius: 999px;
    background: var(--owl-soft);
    overflow: hidden;
}

.owl-bar span[b-6wfp6uqtvt] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 55%, #43a047));
}

.owl-stuck[b-6wfp6uqtvt] {
    margin-top: 3px;
    font-size: .72rem;
    color: var(--mud-palette-warning);
}

/* ---------- Người dùng / xung đột ---------- */
.owl-user[b-6wfp6uqtvt] { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--owl-line); font-size: .82rem; }
.owl-user small[b-6wfp6uqtvt] { color: var(--owl-muted); font-size: .72rem; }
.owl-dot[b-6wfp6uqtvt] { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--owl-line); }
.owl-dot.live[b-6wfp6uqtvt] { background: var(--mud-palette-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 25%, transparent); }
.owl-screens[b-6wfp6uqtvt] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.owl-screen[b-6wfp6uqtvt] {
    padding: 0 7px;
    border-radius: 999px;
    font-size: .7rem;
    background: var(--owl-soft);
}

.owl-screen.active[b-6wfp6uqtvt] {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-weight: 600;
}

.owl-row[b-6wfp6uqtvt], .owl-conflict[b-6wfp6uqtvt] {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    border-bottom: 1px dashed var(--owl-line);
    font-size: .8rem;
}

.owl-row small[b-6wfp6uqtvt], .owl-conflict small[b-6wfp6uqtvt] { color: var(--owl-muted); font-size: .72rem; }
.owl-conflict b[b-6wfp6uqtvt] { color: var(--mud-palette-error); }


/* ---------- Cấu hình ngưỡng ---------- */
.owl-field[b-6wfp6uqtvt] {
    display: grid;
    grid-template-columns: 1fr 72px 74px;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: .8rem;
}

.owl-field input[b-6wfp6uqtvt] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--owl-line);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: right;
}

.owl-field small[b-6wfp6uqtvt] { color: var(--owl-muted); font-size: .72rem; }
.owl-rules[b-6wfp6uqtvt] { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.owl-rule[b-6wfp6uqtvt] { display: flex; align-items: center; gap: 6px; font-size: .78rem; cursor: pointer; }
.owl-empty.err[b-6wfp6uqtvt] { color: var(--mud-palette-error); }

.owl-actions[b-6wfp6uqtvt] {
    position: sticky;
    bottom: -14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 12px -12px -14px;
    padding: 10px 12px;
    border-top: 1px solid var(--owl-line);
    background: var(--mud-palette-surface, #fff);
}

.owl-btn[b-6wfp6uqtvt] {
    padding: 6px 14px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.owl-btn.ghost[b-6wfp6uqtvt] { background: transparent; color: var(--mud-palette-primary); }
.owl-btn:disabled[b-6wfp6uqtvt] { opacity: .6; cursor: default; }

@media (max-width: 600px) {
    .owl-fab[b-6wfp6uqtvt] { right: 16px; bottom: 96px; width: 52px; height: 52px; }
    .owl-panel[b-6wfp6uqtvt] { right: 16px; bottom: 156px; }
}

/* Dòng mẫu có nút thao tác (vd "Tạo Job" trên booking chưa có lô hàng) */
.owl-li-act[b-6wfp6uqtvt] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.owl-li-act > span[b-6wfp6uqtvt] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owl-act[b-6wfp6uqtvt] { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
           color: #fff; background: #1976d2; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.owl-act:hover[b-6wfp6uqtvt] { background: #1565c0; }

/* Tổng quan: tổng số Booking / Báo giá / HBL / Debit / Credit */
.owl-totals[b-6wfp6uqtvt] { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 10px; }
.owl-total[b-6wfp6uqtvt] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; text-align: left; cursor: pointer;
             border: 1px solid var(--owl-line); border-radius: 10px; background: var(--owl-soft); color: inherit; }
.owl-total:hover[b-6wfp6uqtvt] { border-color: #1976d2; background: #e3f2fd; }
.owl-total-name[b-6wfp6uqtvt] { font-size: 11px; color: var(--owl-muted); font-weight: 600; }
.owl-total b[b-6wfp6uqtvt] { font-size: 18px; line-height: 1.1; }
.owl-total small[b-6wfp6uqtvt] { font-size: 10px; color: var(--owl-muted); }

/* Logo công ty thay cú mèo: nền trắng tròn, ảnh nằm gọn trong nút */
.owl-logo[b-6wfp6uqtvt] { object-fit: contain; border-radius: 50%; background: #fff; }

/* Kéo để di chuyển cú mèo */
.owl-fab[b-6wfp6uqtvt] { touch-action: none; }
.owl-fab.dragging[b-6wfp6uqtvt] { cursor: grabbing; transition: none; transform: scale(1.08); animation: none; }

/* ---------- Bong bóng lời chào / sinh nhật / chúc mừng lưu thành công ---------- */
.owl-bubble[b-6wfp6uqtvt] {
    position: absolute;
    right: -6px;
    bottom: calc(100% + 12px);
    width: max-content;
    max-width: min(300px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #222);
    border: 2px solid var(--owl-c);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    font-size: .84rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    animation: owl-bubble-in-b-6wfp6uqtvt .35s cubic-bezier(.2,1.4,.4,1) both;
}
.owl-bubble[b-6wfp6uqtvt]::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: -9px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-right: 2px solid var(--owl-c);
    border-bottom: 2px solid var(--owl-c);
    transform: rotate(45deg);
}
.owl-bubble.k-bday[b-6wfp6uqtvt] { border-color: #ec407a; }
.owl-bubble.k-bday[b-6wfp6uqtvt]::after { border-color: #ec407a; }
.owl-bubble.k-party[b-6wfp6uqtvt] { border-color: #43a047; font-weight: 600; }
.owl-bubble.k-party[b-6wfp6uqtvt]::after { border-color: #43a047; }
.owl-bubble.k-approve[b-6wfp6uqtvt] { border-color: #1b8a4b; max-width: min(340px, calc(100vw - 40px)); }
.owl-bubble.k-approve[b-6wfp6uqtvt]::after { border-color: #1b8a4b; }
.owl-bubble.k-approve .owl-bubble-line:first-child[b-6wfp6uqtvt] { font-weight: 700; color: #1b6e3a; }
.owl-bubble.k-return[b-6wfp6uqtvt] { border-color: #d97706; max-width: min(340px, calc(100vw - 40px)); }
.owl-bubble.k-return[b-6wfp6uqtvt]::after { border-color: #d97706; }
.owl-bubble.k-return .owl-bubble-line:first-child[b-6wfp6uqtvt] { font-weight: 700; color: #b45309; }
.owl-bubble-line + .owl-bubble-line[b-6wfp6uqtvt] { padding-top: 4px; border-top: 1px dashed var(--mud-palette-lines-default, rgba(0,0,0,.12)); font-weight: 400; }

@keyframes owl-bubble-in-b-6wfp6uqtvt {
    from { opacity: 0; transform: translateY(8px) scale(.85); }
    to { opacity: 1; transform: none; }
}

/* Lưu thành công: logo nhảy + nhấp nháy viền xanh + pháo giấy */
.owl-fab.owl-party[b-6wfp6uqtvt] { animation: owl-party-jump-b-6wfp6uqtvt .65s ease-in-out 3, owl-party-glow-b-6wfp6uqtvt .65s ease-in-out 4; }
@keyframes owl-party-jump-b-6wfp6uqtvt {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-14px) rotate(-8deg) scale(1.08); }
    60% { transform: translateY(0) rotate(7deg); }
}
@keyframes owl-party-glow-b-6wfp6uqtvt {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 3px #43a047; }
    50% { box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 9px rgba(67,160,71,.35), 0 0 22px 8px rgba(255,214,0,.7); }
}
.owl-confetti[b-6wfp6uqtvt] { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.owl-confetti i[b-6wfp6uqtvt] {
    position: absolute;
    font-style: normal;
    font-size: 18px;
    animation: owl-confetti-fly-b-6wfp6uqtvt 1.4s ease-out both;
}
@keyframes owl-confetti-fly-b-6wfp6uqtvt {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(40deg); }
}
/* _content/NVOPASL/Components/Shipment/Pages/ContainerTab_EditDialog.razor.rz.scp.css */
/* Hộp thoại thêm / sửa container: form theo nhóm bên trái, bảng kiểm tra thông tin bên phải */
.cte-title[b-7ukazozou4] { display: flex; align-items: center; gap: 12px; }
.cte-title[b-7ukazozou4]  .cte-title-icon { width: 38px; height: 38px; padding: 7px; border-radius: 10px; color: #fff; background: var(--mud-palette-primary); }
.cte-title-main[b-7ukazozou4] { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.cte-title-sub[b-7ukazozou4] { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.cte-chip[b-7ukazozou4] { padding: 1px 8px; border-radius: 999px; font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .04em;
            color: #fff; background: var(--mud-palette-primary); }
.cte-chip.soft[b-7ukazozou4] { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }

.cte-layout[b-7ukazozou4] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }

.cte-section[b-7ukazozou4] { margin-bottom: 12px; padding: 10px 14px 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
               background: var(--mud-palette-surface); }
.cte-section > header[b-7ukazozou4] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; font-weight: 700;
                        color: var(--mud-palette-text-primary); }
.cte-section > header small[b-7ukazozou4] { font-weight: 400; color: var(--mud-palette-text-secondary); }
.cte-step[b-7ukazozou4] { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem;
            color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }

/* Số container: chữ in hoa, font đều; viền theo kết quả kiểm tra ISO 6346 */
.cte-form[b-7ukazozou4]  .cte-contno input { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cte-form[b-7ukazozou4]  .cte-contno.is-ok .mud-input-helper-text { color: var(--mud-palette-success); }
.cte-form[b-7ukazozou4]  .cte-contno.is-warn .mud-input-helper-text { color: var(--mud-palette-warning); font-weight: 600; }
.cte-form[b-7ukazozou4]  .cte-contno.is-warn .mud-input-outlined-border { border-color: var(--mud-palette-warning); }

/* ---------- Kiểm tra thông tin ---------- */
.cte-check[b-7ukazozou4] { position: sticky; top: 0; padding: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
             background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface)); }
.cte-check-head[b-7ukazozou4] { display: flex; align-items: baseline; justify-content: space-between; font-size: .85rem; font-weight: 700; }
.cte-check-head b[b-7ukazozou4] { font-size: 1.2rem; }
.cte-meter[b-7ukazozou4] { height: 6px; margin: 6px 0 8px; border-radius: 999px; background: var(--mud-palette-lines-default); overflow: hidden; }
.cte-meter span[b-7ukazozou4] { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.cte-meter span.ok[b-7ukazozou4] { background: var(--mud-palette-success); }
.cte-meter span.warn[b-7ukazozou4] { background: var(--mud-palette-warning); }
.cte-meter span.bad[b-7ukazozou4] { background: var(--mud-palette-error); }
.cte-check-sum[b-7ukazozou4] { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: .78rem; font-weight: 600; }

.ok[b-7ukazozou4] { color: var(--mud-palette-success); }
.warn[b-7ukazozou4] { color: var(--mud-palette-warning); }
.bad[b-7ukazozou4] { color: var(--mud-palette-error); }
.info[b-7ukazozou4] { color: var(--mud-palette-info); }

.cte-issues[b-7ukazozou4] { margin: 0; padding: 0; list-style: none; max-height: 52vh; overflow-y: auto; }
.cte-issue[b-7ukazozou4] { --c: var(--mud-palette-info); margin-bottom: 6px; padding: 6px 8px; border-left: 3px solid var(--c); border-radius: 6px;
             background: color-mix(in srgb, var(--c) 7%, transparent); }
.cte-issue.warn[b-7ukazozou4] { --c: var(--mud-palette-warning); color: inherit; }
.cte-issue.error[b-7ukazozou4] { --c: var(--mud-palette-error); }
.cte-issue-top[b-7ukazozou4] { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--c); }
.cte-issue p[b-7ukazozou4] { margin: 2px 0 0 24px; font-size: .74rem; line-height: 1.35; color: var(--mud-palette-text-secondary); }
.cte-legend[b-7ukazozou4] { margin: 6px 0 0; font-size: .7rem; color: var(--mud-palette-text-secondary); }

.cte-actions[b-7ukazozou4] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 8px; }
.cte-actions-note[b-7ukazozou4] { margin-right: auto; font-size: .8rem; font-weight: 600; }

@media (max-width: 960px) {
    .cte-layout[b-7ukazozou4] { grid-template-columns: 1fr; }
    .cte-check[b-7ukazozou4] { position: static; }
}
/* _content/NVOPASL/Components/Shipment/Pages/ContainerTracking.razor.rz.scp.css */
/* Theo dõi cont hàng nhập / xuất — dùng biến màu MudBlazor để theo theme sáng / tối */
.ict[b-m8m18qpzrl] {
    --ict-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --ict-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --ict-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --ict-primary: var(--mud-palette-primary, #1976d2);
    --ict-surface: var(--mud-palette-surface, #fff);
    --ict-edit: color-mix(in srgb, var(--ict-primary) 5%, transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 4px 12px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Header ---------- */
.ict-head[b-m8m18qpzrl] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ict-title[b-m8m18qpzrl] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.ict-title h1[b-m8m18qpzrl] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.ict-title p[b-m8m18qpzrl] {
    margin: 2px 0 0;
    font-size: .8rem;
    color: var(--ict-muted);
}

.ict-title-icon[b-m8m18qpzrl] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--ict-primary), color-mix(in srgb, var(--ict-primary) 55%, #00897b));
}

.ict-actions[b-m8m18qpzrl] {
    display: flex;
    gap: 8px;
}

/* ---------- Bộ lọc ---------- */
.ict-filters[b-m8m18qpzrl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ict-filters[b-m8m18qpzrl]  .ict-f-date { flex: 0 0 150px; }
.ict-filters[b-m8m18qpzrl]  .ict-f-select { flex: 0 0 150px; }
.ict-filters[b-m8m18qpzrl]  .ict-f-search { flex: 1 1 260px; max-width: 420px; }

.ict-chips[b-m8m18qpzrl] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ict-chip[b-m8m18qpzrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--ict-line);
    border-radius: 999px;
    background: var(--ict-surface);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.ict-chip b[b-m8m18qpzrl] {
    font-weight: 700;
}

.ict-chip.on[b-m8m18qpzrl] {
    color: var(--ict-primary);
    border-color: color-mix(in srgb, var(--ict-primary) 55%, transparent);
    background: color-mix(in srgb, var(--ict-primary) 10%, transparent);
}

.ict-chip.warn b[b-m8m18qpzrl] { color: var(--mud-palette-error); }

/* ---------- Bảng ---------- */
.ict-card[b-m8m18qpzrl] {
    border: 1px solid var(--ict-line);
    border-radius: 10px;
    background: var(--ict-surface);
    overflow: hidden;
}

.ict-scroll[b-m8m18qpzrl] {
    overflow: auto;
    max-height: calc(100vh - 290px);
}

.ict-table[b-m8m18qpzrl] {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8rem;
}

.ict-table th[b-m8m18qpzrl] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 8px;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
    background: #1f4e79;
    border-right: 1px solid rgba(255,255,255,.15);
}

.ict-table th.ed[b-m8m18qpzrl] {
    background: #2e6da4;
}

.ict-table td[b-m8m18qpzrl] {
    height: 38px;
    padding: 2px 8px;
    white-space: nowrap;
    border-bottom: 1px solid var(--ict-line);
    border-right: 1px solid var(--ict-line);
    vertical-align: middle;
}

.ict-table td.ed[b-m8m18qpzrl] {
    padding: 2px 4px;
    background: var(--ict-edit);
}

.ict-table tbody tr:hover td[b-m8m18qpzrl] {
    background: color-mix(in srgb, var(--ict-primary) 8%, transparent);
}

.ict-table tbody tr.over td:first-child[b-m8m18qpzrl] {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

.ict-table .mono[b-m8m18qpzrl] { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
.ict-table .strong[b-m8m18qpzrl] { font-weight: 700; }
.ict-table .center[b-m8m18qpzrl] { text-align: center; }
.ict-table .nowrap[b-m8m18qpzrl] { white-space: nowrap; }
.ict-table .clip[b-m8m18qpzrl] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.ict-in[b-m8m18qpzrl] {
    width: 130px;
    height: 28px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8rem;
}

.ict-in.w-s[b-m8m18qpzrl] { width: 80px; }
.ict-in.w-l[b-m8m18qpzrl] { width: 200px; }
.ict-in[type=date][b-m8m18qpzrl] { width: 130px; }

.ict-in:hover:not(:disabled)[b-m8m18qpzrl] {
    border-color: var(--ict-line);
    background: var(--ict-surface);
}

.ict-in:focus[b-m8m18qpzrl] {
    outline: none;
    border-color: var(--ict-primary);
    background: var(--ict-surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ict-primary) 20%, transparent);
}

.ict-in:disabled[b-m8m18qpzrl] {
    cursor: default;
}

.ict-over[b-m8m18qpzrl] {
    font-weight: 600;
}

.ict-over.bad[b-m8m18qpzrl] { color: var(--mud-palette-error); }
.ict-over.ok[b-m8m18qpzrl] { color: var(--mud-palette-success); }

.ict-empty[b-m8m18qpzrl] {
    padding: 28px !important;
    text-align: center;
    color: var(--ict-muted);
}

.ict-foot[b-m8m18qpzrl] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: .75rem;
    color: var(--ict-muted);
    border-top: 1px solid var(--ict-line);
}

/* ---------- Chọn cột (ẩn / hiện, thứ tự — lưu theo user) ---------- */
.ict-colwrap[b-m8m18qpzrl] {
    position: relative;
}

.ict-colpanel[b-m8m18qpzrl] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 300px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ict-line);
    border-radius: 10px;
    background: var(--ict-surface);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.ict-colpanel-head[b-m8m18qpzrl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ict-line);
}

.ict-colpanel-head small[b-m8m18qpzrl] {
    color: var(--ict-muted);
    font-size: .72rem;
}

.ict-colpanel ul[b-m8m18qpzrl] {
    flex: 1 1 auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overflow-y: auto;
}

.ict-colpanel li[b-m8m18qpzrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 12px;
    font-size: .8rem;
}

.ict-colpanel li:hover[b-m8m18qpzrl] {
    background: var(--ict-soft);
}

.ict-colpanel li.off label[b-m8m18qpzrl] {
    color: var(--ict-muted);
}

.ict-colpanel label[b-m8m18qpzrl] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.ict-colpanel li button[b-m8m18qpzrl] {
    width: 22px;
    height: 22px;
    border: 1px solid var(--ict-line);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: .6rem;
    cursor: pointer;
}

.ict-colpanel li button:disabled[b-m8m18qpzrl] {
    opacity: .3;
    cursor: default;
}

.ict-colpanel-foot[b-m8m18qpzrl] {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-top: 1px solid var(--ict-line);
}

.ict-table th[draggable=true][b-m8m18qpzrl] {
    cursor: grab;
}

.ict-table th.dragging[b-m8m18qpzrl] {
    opacity: .5;
}
/* _content/NVOPASL/Components/UserList/Pages/Edit.razor.rz.scp.css */
/* 1.2 Thêm / sửa user — chia nhóm thông tin, dùng biến màu MudBlazor theo theme */
.ue[b-4oflk8rvbs] {
    --ue-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --ue-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --ue-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --ue-primary: var(--mud-palette-primary, #1976d2);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 8px;
}

.ue-section[b-4oflk8rvbs] {
    padding: 12px 14px 14px;
    border: 1px solid var(--ue-line);
    border-radius: 10px;
}

.ue-section > header[b-4oflk8rvbs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ue-primary);
}

.ue-grid[b-4oflk8rvbs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: 14px;
}

.ue-label[b-4oflk8rvbs] {
    margin: 12px 0 6px;
    font-size: .8rem;
    color: var(--ue-muted);
}

.ue-hint[b-4oflk8rvbs] {
    margin: 0 0 4px;
    font-size: .8rem;
    color: var(--ue-muted);
}

.ue-roles[b-4oflk8rvbs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ue-role[b-4oflk8rvbs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--ue-line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ue-role:hover[b-4oflk8rvbs] {
    background: var(--ue-soft);
}

.ue-role.on[b-4oflk8rvbs] {
    color: var(--ue-primary);
    border-color: color-mix(in srgb, var(--ue-primary) 55%, transparent);
    background: color-mix(in srgb, var(--ue-primary) 10%, transparent);
}

.ue-toggles[b-4oflk8rvbs] {
    display: flex;
    flex-direction: column;
}

.ue-toggle[b-4oflk8rvbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--ue-line);
}

.ue-toggle:last-child[b-4oflk8rvbs] {
    border-bottom: none;
}

.ue-toggle b[b-4oflk8rvbs] {
    display: block;
    font-size: .88rem;
    font-weight: 600;
}

.ue-toggle small[b-4oflk8rvbs] {
    color: var(--ue-muted);
    font-size: .75rem;
}

.ue-actions[b-4oflk8rvbs] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 8px 6px;
}
/* _content/NVOPASL/Components/UserList/Pages/UserList.razor.rz.scp.css */
/* 1.2 Danh sách user — cùng phong cách 1.6 Phân quyền, dùng biến màu MudBlazor để theo theme sáng / tối */
.ul[b-cgrjqkn09o] {
    --ul-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --ul-soft: var(--mud-palette-background-grey, rgba(0,0,0,.04));
    --ul-muted: var(--mud-palette-text-secondary, rgba(0,0,0,.6));
    --ul-primary: var(--mud-palette-primary, #1976d2);
    --ul-surface: var(--mud-palette-surface, #fff);
    --ul-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px 16px;
    color: var(--mud-palette-text-primary);
}

/* ---------- Header ---------- */
.ul-head[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ul-title[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.ul-title h1[b-cgrjqkn09o] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.ul-title p[b-cgrjqkn09o] {
    margin: 2px 0 0;
    font-size: .8rem;
    color: var(--ul-muted);
}

.ul-title-icon[b-cgrjqkn09o] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--ul-primary), color-mix(in srgb, var(--ul-primary) 60%, #7c4dff));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ul-primary) 35%, transparent);
}

.ul-actions[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ul-actions a[b-cgrjqkn09o] {
    text-decoration: none;
}

/* ---------- Thống kê ---------- */
.ul-stats[b-cgrjqkn09o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.ul-stat[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ul-line);
    border-radius: var(--ul-radius);
    background: var(--ul-surface);
}

.ul-stat b[b-cgrjqkn09o] {
    display: block;
    font-size: 1.25rem;
    line-height: 1.1;
}

.ul-stat small[b-cgrjqkn09o] {
    color: var(--ul-muted);
    font-size: .75rem;
}

.ul-stat-icon[b-cgrjqkn09o] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.ul-c-primary[b-cgrjqkn09o] { color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.ul-c-success[b-cgrjqkn09o] { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.ul-c-info[b-cgrjqkn09o] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.ul-c-warning[b-cgrjqkn09o] { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }

/* ---------- Bảng ---------- */
.ul-card[b-cgrjqkn09o] {
    border: 1px solid var(--ul-line);
    border-radius: var(--ul-radius);
    background: var(--ul-surface);
    overflow: hidden;
}

.ul-filters[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ul-line);
}

.ul-filters[b-cgrjqkn09o]  .ul-search {
    flex: 1 1 260px;
    max-width: 380px;
}

.ul-filters[b-cgrjqkn09o]  .ul-filter {
    flex: 0 0 170px;
}

.ul-count[b-cgrjqkn09o] {
    margin-left: auto;
    font-size: .8rem;
    color: var(--ul-muted);
    white-space: nowrap;
}

.ul-card[b-cgrjqkn09o]  .ul-table .mud-table-head .mud-table-cell {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ul-muted);
    background: var(--ul-soft);
}

.ul-card[b-cgrjqkn09o]  .ul-table .mud-table-body .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom-color: var(--ul-line);
}

.ul-card[b-cgrjqkn09o]  .ul-table .mud-table-row.selected .mud-table-cell {
    background: color-mix(in srgb, var(--ul-primary) 8%, transparent);
}

.ul-person[b-cgrjqkn09o] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.ul-person b[b-cgrjqkn09o] {
    display: block;
    font-weight: 600;
    line-height: 1.2;
}

.ul-person small[b-cgrjqkn09o] {
    color: var(--ul-muted);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .75rem;
}

.ul-avatar[b-cgrjqkn09o] {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.ul-email[b-cgrjqkn09o] {
    font-size: .85rem;
}

.ul-muted[b-cgrjqkn09o] {
    color: var(--ul-muted);
}

.ul-tag[b-cgrjqkn09o] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--ul-soft);
}

.ul-tag-outline[b-cgrjqkn09o] {
    background: transparent;
    border: 1px solid var(--ul-line);
}

.ul-roles[b-cgrjqkn09o] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ul-role[b-cgrjqkn09o] {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--ul-primary);
    background: color-mix(in srgb, var(--ul-primary) 10%, transparent);
}

.ul-status[b-cgrjqkn09o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
}

.ul-status[b-cgrjqkn09o]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ul-line);
}

.ul-status.on[b-cgrjqkn09o] { color: var(--mud-palette-success); }
.ul-status.on[b-cgrjqkn09o]::before { background: var(--mud-palette-success); }
.ul-status.off[b-cgrjqkn09o] { color: var(--ul-muted); }

.ul-approve[b-cgrjqkn09o] {
    display: inline-block;
    min-width: 30px;
    margin: 0 2px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--ul-muted);
    border: 1px dashed var(--ul-line);
}

.ul-approve.on[b-cgrjqkn09o] {
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.ul-empty[b-cgrjqkn09o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    color: var(--ul-muted);
}