/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Blazor Reconnect Modal ──
   Đồng bộ với theme TASATRADING (xanh lá #0f9d4f) */

.components-reconnect-first-attempt-visible[b-fdadp3cnza],
.components-reconnect-repeated-attempt-visible[b-fdadp3cnza],
.components-reconnect-failed-visible[b-fdadp3cnza],
.components-pause-visible[b-fdadp3cnza],
.components-resume-failed-visible[b-fdadp3cnza],
.components-rejoining-animation[b-fdadp3cnza] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-retrying[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-failed[b-fdadp3cnza],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fdadp3cnza] {
    display: block;
}


#components-reconnect-modal[b-fdadp3cnza] {
    background-color: #fff;
    width: 22rem;
    margin: 20vh auto;
    padding: 2rem 1.8rem;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06);
    opacity: 0;
    transition: display .5s allow-discrete, overlay .5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fdadp3cnza .5s both;
    font-family: Roboto, Arial, sans-serif;
    color: #0f172a;
}

#components-reconnect-modal[open][b-fdadp3cnza] {
    animation: components-reconnect-modal-slideUp-b-fdadp3cnza 1.5s cubic-bezier(.05, .89, .25, 1.02) .3s,
               components-reconnect-modal-fadeInOpacity-b-fdadp3cnza .5s ease-in-out .3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-fdadp3cnza]::backdrop {
    background-color: rgba(15, 23, 42, .45);
    animation: components-reconnect-modal-fadeInOpacity-b-fdadp3cnza .5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fdadp3cnza {
    0%   { transform: translateY(30px) scale(.95); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fdadp3cnza {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fdadp3cnza {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-fdadp3cnza] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}

#components-reconnect-modal p[b-fdadp3cnza] {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}

#components-reconnect-modal p.components-reconnect-failed-visible[b-fdadp3cnza] {
    color: #c0392b;
}

#components-reconnect-modal button[b-fdadp3cnza] {
    border: 0;
    background-color: #0f9d4f;
    color: #fff;
    padding: 8px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

#components-reconnect-modal button:hover[b-fdadp3cnza] {
    background-color: #0b7a3d;
}

#components-reconnect-modal button:active[b-fdadp3cnza] {
    background-color: #0f9d4f;
}

.components-rejoining-animation[b-fdadp3cnza] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-fdadp3cnza] {
    position: absolute;
    border: 3px solid #0f9d4f;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-fdadp3cnza 1.5s cubic-bezier(0, .2, .8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-fdadp3cnza] {
    animation-delay: -.5s;
}

@keyframes components-rejoining-animation-b-fdadp3cnza {
    0%   { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5%   { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0px;  left: 0px;  width: 80px; height: 80px; opacity: 0; }
}
/* /Components/Pages/BaoCao/BaoCaoSanLuong.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Báo cáo sản lượng — UI hiện đại
   ═══════════════════════════════════════════════════════════════════════ */

.bcsl-view[b-0r1dt3vlki] {
    display: flex;
    flex-direction: column;
}

/* ── Date range trên toolbar ── */
.bcsl-date-range[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bcsl-date-icon[b-0r1dt3vlki] {
    color: var(--brand);
    font-size: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.bcsl-date-sep[b-0r1dt3vlki] {
    color: var(--text-faint);
    font-size: 11px;
    flex-shrink: 0;
}

.bcsl-date-range .inputd-shell[b-0r1dt3vlki] {
    height: 30px;
    min-height: 30px;
    border-radius: 7px;
}

.bcsl-date-range .inputd-input[b-0r1dt3vlki] {
    font-size: 12.5px;
    padding: 0 6px 0 10px;
}

/* ── Filter dialog ── */
.bcsl-filter-form[b-0r1dt3vlki] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
}

.bcsl-filter-row[b-0r1dt3vlki] {
    display: flex;
    gap: 10px;
}

.bcsl-filter-section-title[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.bcsl-filter-section-title:first-child[b-0r1dt3vlki] {
    margin-top: 0;
}

.bcsl-filter-section-title span:last-child[b-0r1dt3vlki] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .4px;
}

.bcsl-accent-bar[b-0r1dt3vlki] {
    width: 4px;
    height: 16px;
    border-radius: 99px;
    flex-shrink: 0;
}

.bcsl-accent-time .bcsl-accent-bar[b-0r1dt3vlki] { background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.bcsl-accent-customer .bcsl-accent-bar[b-0r1dt3vlki] { background: linear-gradient(180deg, #3b82f6, #06b6d4); }
.bcsl-accent-transport .bcsl-accent-bar[b-0r1dt3vlki] { background: linear-gradient(180deg, #f59e0b, #ef4444); }
.bcsl-accent-hr .bcsl-accent-bar[b-0r1dt3vlki] { background: linear-gradient(180deg, #10b981, #14b8a6); }
.bcsl-accent-docs .bcsl-accent-bar[b-0r1dt3vlki] { background: linear-gradient(180deg, #8b5cf6, #ec4899); }

/* ── Error / info banners ── */
.bcsl-error-banner[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(220, 38, 38, .18);
}

.bcsl-info-banner[b-0r1dt3vlki] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    margin-bottom: 6px;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.5;
    display:none;
}

.bcsl-info-banner-error[b-0r1dt3vlki] {
    color: var(--danger);
}

/* ── Loading state ── */
.bcsl-loading[b-0r1dt3vlki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 0;
    color: var(--text-muted);
}

.bcsl-loading-spinner[b-0r1dt3vlki] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    animation: bcsl-spin-b-0r1dt3vlki .85s linear infinite;
}

.bcsl-loading p[b-0r1dt3vlki] {
    font-size: 13px;
    margin: 0;
}

@keyframes bcsl-spin-b-0r1dt3vlki {
    to { transform: rotate(360deg); }
}

/* ── GroupBy segmented bar - nổi bật, fullwidth ── */
.bcsl-groupby-bar[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    flex-shrink: 0;
}

.bcsl-groupby-nav[b-0r1dt3vlki] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s ease;
}

.bcsl-groupby-nav:hover[b-0r1dt3vlki] {
    border-color: var(--brand);
    color: var(--brand-700);
    background: var(--brand-soft);
}

.bcsl-groupby-nav:active[b-0r1dt3vlki] {
    transform: scale(.92);
}

.bcsl-groupby-scroll[b-0r1dt3vlki] {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    flex: 1 1 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.bcsl-groupby-scroll[b-0r1dt3vlki]::-webkit-scrollbar { display: none; }

.bcsl-groupby-chip[b-0r1dt3vlki] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.bcsl-groupby-chip i[b-0r1dt3vlki] {
    font-size: 13px;
}

.bcsl-groupby-chip:hover[b-0r1dt3vlki] {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 3px 8px rgba(15, 157, 79, .15);
}

.bcsl-groupby-chip.active[b-0r1dt3vlki] {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-700);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 157, 79, .15);
}

/* ── Detail toggle trong toolbar - compact, đẹp ── */
.bcsl-detail-toggle[b-0r1dt3vlki] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all .16s ease;
    height: 26px;
}

.bcsl-detail-toggle:hover[b-0r1dt3vlki] {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.bcsl-detail-toggle input[b-0r1dt3vlki] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bcsl-detail-toggle-track[b-0r1dt3vlki] {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 99px;
    background: #cbd5e1;
    transition: background var(--transition);
    flex-shrink: 0;
}

.bcsl-detail-toggle-thumb[b-0r1dt3vlki] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform var(--transition);
}

.bcsl-detail-toggle input:checked + .bcsl-detail-toggle-track[b-0r1dt3vlki] {
    background: var(--brand);
}

.bcsl-detail-toggle input:checked + .bcsl-detail-toggle-track .bcsl-detail-toggle-thumb[b-0r1dt3vlki] {
    transform: translateX(14px);
}

.bcsl-detail-toggle-label[b-0r1dt3vlki] {
    font-size: 11.5px;
    color: #475569;
    font-weight: 500;
}

/* ── Data table - fix scrollbar và footer sticky ── */
.bcsl-data-grid[b-0r1dt3vlki] {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    min-height: 400px;
}

.bcsl-table-scroll[b-0r1dt3vlki] {
    overflow: auto;
    position: relative;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar nhỏ gọn */
.bcsl-table-scroll[b-0r1dt3vlki]::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.bcsl-table-scroll[b-0r1dt3vlki]::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.bcsl-table-scroll[b-0r1dt3vlki]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}
.bcsl-table-scroll[b-0r1dt3vlki]::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
}

.bcsl-grid-table[b-0r1dt3vlki] {
    min-width: 100% !important;
    table-layout: auto !important;
}

.bcsl-grid-table td[b-0r1dt3vlki],
.bcsl-grid-table th[b-0r1dt3vlki] {
    padding: 0 10px !important;
}

/* ── Sticky columns - left set động bởi JS ── */
.bcsl-grid-table .sticky-col-sl[b-0r1dt3vlki] {
    position: sticky !important;
    z-index: 6 !important;
    box-shadow: 1px 0 0 var(--border), 4px 0 8px rgba(15, 23, 42, .04);
}

.bcsl-grid-table thead th.sticky-col-sl[b-0r1dt3vlki] {
    position: sticky !important;
    z-index: 12 !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
}

.bcsl-grid-table tfoot td.sticky-col-sl[b-0r1dt3vlki] {
    position: sticky !important;
    z-index: 11 !important;
    background: #cbd5e1 !important;
    color: #1e293b !important;
}
.bcsl-col-nhom[b-0r1dt3vlki] { min-width: 110px; max-width: 110px; }
.bcsl-col-sl[b-0r1dt3vlki] { width: 70px; min-width: 70px; white-space: nowrap; }
.bcsl-col-khoan[b-0r1dt3vlki] { min-width: 95px; }
.bcsl-col-money[b-0r1dt3vlki] { width: 105px; min-width: 105px; white-space: nowrap; }
.bcsl-col-money-sm[b-0r1dt3vlki] { width: 90px; min-width: 90px; white-space: nowrap; }
.bcsl-col-percent[b-0r1dt3vlki] { width: 62px; min-width: 62px; white-space: nowrap; }
.bcsl-col-phantom[b-0r1dt3vlki] { width: 100%; border: none !important; background: transparent !important; }

/* ── Header nhẹ nhàng ── */
.bcsl-grid-table thead th[b-0r1dt3vlki] {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0 !important;
    height: 28px !important;
    line-height: 28px !important;
    vertical-align: middle !important;
    z-index: 4 !important;
}

.bcsl-grid-table thead th.sticky-col[b-0r1dt3vlki] {
    background: #f1f5f9 !important;
    color: #334155 !important;
    z-index: 8;
}

.bcsl-grid-table thead th.sticky-col-sl[b-0r1dt3vlki] {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* Header group dòng 1 - sticky top:0, căn giữa */
.bcsl-thead-group th[b-0r1dt3vlki] {
    position: sticky;
    top: 0;
    z-index: 5;
    text-align: center !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
    background: #f8fafc !important;
}

.bcsl-thead-group th.sticky-col[b-0r1dt3vlki] {
    z-index: 12 !important;
    background: #f1f5f9 !important;
}

.bcsl-thead-group th.sticky-col-sl[b-0r1dt3vlki] {
    z-index: 12 !important;
    background: #e2e8f0 !important;
}

/* Header detail dòng 2 - sticky top: 28px chính xác, no border-top */
.bcsl-thead-detail th[b-0r1dt3vlki] {
    position: sticky !important;
    top: 28px !important;
    z-index: 6 !important;
    background: #f8fafc !important;
    border-top: 0 !important;
}

.bcsl-thead-detail th.sticky-col-sl[b-0r1dt3vlki] {
    z-index: 12 !important;
    background: #e2e8f0 !important;
}

/* Header cột 1 căn trái */
.bcsl-grid-table thead th.bcsl-col-nhom[b-0r1dt3vlki] {
    text-align: left !important;
    padding-left: 12px !important;
}

/* Header zone colors - nhẹ nhàng, không gradient */
.bcsl-grid-table thead .bcsl-zone-thu[b-0r1dt3vlki]      { background: #dcfce7 !important; color: #15803d !important; border-left: 2px solid #86efac !important; }
.bcsl-grid-table thead .bcsl-zone-chi[b-0r1dt3vlki]      { background: #fee2e2 !important; color: #b91c1c !important; border-left: 2px solid #fca5a5 !important; }
.bcsl-grid-table thead .bcsl-zone-thu-ho[b-0r1dt3vlki]   { background: #eff6ff !important; color: #1d4ed8 !important; border-left: 2px solid #93c5fd !important; }
.bcsl-grid-table thead .bcsl-zone-chi-ho[b-0r1dt3vlki]   { background: #fffbeb !important; color: #b45309 !important; border-left: 2px solid #fcd34d !important; }
.bcsl-grid-table thead .bcsl-zone-loinhuan[b-0r1dt3vlki] { background: #f0fdf4 !important; color: #15803d !important; border-left: 2px solid #4ade80 !important; }
.bcsl-grid-table thead .bcsl-zone-tysuatln[b-0r1dt3vlki] { background: #f0fdf4 !important; color: #15803d !important; }
.bcsl-grid-table thead .bcsl-zone-khoan-thu[b-0r1dt3vlki] { background: #f0fdf4 !important; color: #065f46 !important; border-left: 3px solid #34d399 !important; }
.bcsl-grid-table thead .bcsl-zone-khoan-chi[b-0r1dt3vlki] { background: #fef2f2 !important; color: #991b1b !important; border-left: 3px solid #f87171 !important; }

/* ── Body cells ── */
.bcsl-grid-table tbody td[b-0r1dt3vlki] {
    height: 30px !important;
    font-size: 11.5px !important;
}

.bcsl-grid-table tbody tr:hover td[b-0r1dt3vlki]                   { background: #f8fafc !important; }
.bcsl-grid-table tbody tr:hover td.sticky-col[b-0r1dt3vlki]        { background: #f1f5f9 !important; }
.bcsl-grid-table tbody tr:hover td.sticky-col-sl[b-0r1dt3vlki]     { background: #e9eef5 !important; }
.bcsl-grid-table tbody tr:hover .bcsl-zone-thu[b-0r1dt3vlki]       { background: rgba(187,247,208,.55) !important; }
.bcsl-grid-table tbody tr:hover .bcsl-zone-chi[b-0r1dt3vlki]       { background: rgba(252,165,165,.45) !important; }
.bcsl-grid-table tbody tr:hover .bcsl-zone-loinhuan[b-0r1dt3vlki]  { background: rgba(110,231,183,.35) !important; }
.bcsl-grid-table tbody tr:hover .bcsl-zone-khoan-thu[b-0r1dt3vlki] { background: rgba(167,243,208,.4) !important; }
.bcsl-grid-table tbody tr:hover .bcsl-zone-khoan-chi[b-0r1dt3vlki] { background: rgba(254,202,202,.4) !important; }

.bcsl-grid-table tbody td.cell-strong[b-0r1dt3vlki] { font-weight: 600; }
.bcsl-grid-table tbody .bcsl-zone-thu[b-0r1dt3vlki]      { background: rgba(220,252,231,.35) !important; color: #166534; }
.bcsl-grid-table tbody .bcsl-zone-chi[b-0r1dt3vlki]      { background: rgba(254,226,226,.35) !important; color: #991b1b; }
.bcsl-grid-table tbody .bcsl-zone-thu-ho[b-0r1dt3vlki]   { background: rgba(219,234,254,.3)  !important; color: #1e40af; }
.bcsl-grid-table tbody .bcsl-zone-chi-ho[b-0r1dt3vlki]   { background: rgba(254,243,199,.35) !important; color: #92400e; }
.bcsl-grid-table tbody .bcsl-zone-loinhuan[b-0r1dt3vlki] { background: rgba(209,250,229,.4)  !important; }
.bcsl-grid-table tbody .bcsl-zone-tysuatln[b-0r1dt3vlki] { background: rgba(209,250,229,.2)  !important; }
.bcsl-grid-table tbody .bcsl-zone-khoan-thu[b-0r1dt3vlki] { background: rgba(220,252,231,.2) !important; color: #166534; font-size: 11px !important; border-left: 1px solid rgba(52,211,153,.25) !important; }
.bcsl-grid-table tbody .bcsl-zone-khoan-chi[b-0r1dt3vlki] { background: rgba(254,226,226,.2) !important; color: #991b1b; font-size: 11px !important; border-left: 1px solid rgba(248,113,113,.25) !important; }

.bcsl-stt[b-0r1dt3vlki] { color: var(--text-faint); font-size: 9.5px; margin-right: 3px; }

/* ── Footer sticky - gọn gàng, nhẹ nhàng ── */
.bcsl-grid-table tfoot[b-0r1dt3vlki] { 
    position: sticky; 
    bottom: 0; 
    z-index: 10; 
}

.bcsl-total-row td[b-0r1dt3vlki] {
    background: #f8fafc !important;
    font-weight: 600;
    font-size: 11px !important;
    height: 30px !important;
    border-top: 2px solid #cbd5e1 !important;
    box-shadow: 0 -3px 8px rgba(0,0,0,.08);
    color: #334155 !important;
}

.bcsl-total-row td.sticky-col[b-0r1dt3vlki] {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    z-index: 11;
}

.bcsl-total-row td.sticky-col-sl[b-0r1dt3vlki] {
    background: #cbd5e1 !important;
    color: #1e293b !important;
    z-index: 11;
}

.bcsl-total-row td.sticky-col i[b-0r1dt3vlki]  { color: #475569; font-size: 11px; margin-right: 4px; }
.bcsl-total-row td i[b-0r1dt3vlki]             { margin-right: 3px; font-size: 10px; opacity: .6; }

.bcsl-total-row .bcsl-zone-thu[b-0r1dt3vlki]      { background: rgba(220,252,231,.6) !important; color: #166534 !important; }
.bcsl-total-row .bcsl-zone-chi[b-0r1dt3vlki]      { background: rgba(254,226,226,.6) !important; color: #991b1b !important; }
.bcsl-total-row .bcsl-zone-thu-ho[b-0r1dt3vlki]   { background: rgba(219,234,254,.5) !important; color: #1e40af !important; }
.bcsl-total-row .bcsl-zone-chi-ho[b-0r1dt3vlki]   { background: rgba(254,243,199,.5) !important; color: #92400e !important; }
.bcsl-total-row .bcsl-zone-loinhuan[b-0r1dt3vlki] { background: rgba(187,247,208,.6) !important; color: #14532d !important; }
.bcsl-total-row .bcsl-zone-tysuatln[b-0r1dt3vlki] { background: rgba(209,250,229,.5) !important; color: #065f46 !important; }
.bcsl-total-row .bcsl-zone-khoan-thu[b-0r1dt3vlki] { background: rgba(220,252,231,.4) !important; color: #166534 !important; border-left: 2px solid #86efac !important; }
.bcsl-total-row .bcsl-zone-khoan-chi[b-0r1dt3vlki] { background: rgba(254,226,226,.4) !important; color: #991b1b !important; border-left: 2px solid #fca5a5 !important; }

/* ── Toolbar đẹp và tách biệt ── */
.bcsl-view .page-toolbar[b-0r1dt3vlki] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 5px 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

.bcsl-view .page-toolbar-left[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Input date compact tối đa */
.bcsl-date-range .inputd-shell[b-0r1dt3vlki] {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 6px;
    line-height: 26px !important;
}

.bcsl-date-range .inputd-input[b-0r1dt3vlki] {
    font-size: 11.5px !important;
    padding: 0 4px 0 6px !important;
    height: 24px !important;
    line-height: 24px !important;
}

.bcsl-date-range .inputd-calendar-icon[b-0r1dt3vlki] {
    font-size: 12px !important;
}

/* ── Footer bar - ngoài scroll div ── */
.bcsl-footer-bar[b-0r1dt3vlki] {
    flex-shrink: 0;
    overflow: hidden;
    border-top: 2px solid #cbd5e1;
    box-shadow: 0 -3px 8px rgba(0,0,0,.08);
}

.bcsl-footer-table[b-0r1dt3vlki] {
    min-width: 100% !important;
    table-layout: auto !important;
}

/* ── Search group trên toolbar ── */
.bcsl-search-group[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid #e2e8f0;
    margin-left: 2px;
}

.bcsl-search-input[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease;
}

.bcsl-search-input:focus-within[b-0r1dt3vlki] {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(15,157,79,.1);
}

.bcsl-search-input i[b-0r1dt3vlki] {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
}

.bcsl-search-input input[b-0r1dt3vlki] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 11.5px;
    color: #334155;
    width: 120px;
    padding: 0;
    height: 28px;
}

.bcsl-search-input input[b-0r1dt3vlki]::placeholder {
    color: #94a3b8;
}

.page-toolbar-left .form-control[b-0r1dt3vlki] {
    height: 30px !important;
    border-radius: 12px;
}

.inputd-shell .inputd-input[b-0r1dt3vlki] {
    padding-right: 60px;
    height: 30px !important;
    font-size: 13px !important;
    text-align: center;
    border-radius: 6px;
}
.bcsl-grid-table tfoot[b-0r1dt3vlki]{
    background-color:#fff;
}
/* ── Filter button badge ── */
.bcsl-filter-btn-wrap[b-0r1dt3vlki] {
    position: relative;
    display: inline-flex;
}

.bcsl-filter-badge[b-0r1dt3vlki] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 1.5px solid #fff;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Expand Detail — accordion drill-down
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Master row — clickable ── */
.bcsl-master-row[b-0r1dt3vlki] {
    cursor: pointer;
    transition: background .12s ease;
}

.bcsl-master-row:hover td[b-0r1dt3vlki] {
    background: #f0fdf4 !important;
}

.bcsl-master-row:hover td.sticky-col[b-0r1dt3vlki] {
    background: #e8f5e9 !important;
}

.bcsl-master-row:hover td.sticky-col-sl[b-0r1dt3vlki] {
    background: #dcedc8 !important;
}

/* Master row khi đang expand — highlight rõ, sticky */
.bcsl-master-expanded td[b-0r1dt3vlki] {
    background: #d1fae5 !important;
    font-weight: 700;
    border-bottom: 2px solid var(--brand) !important;
}

.bcsl-master-expanded td.sticky-col[b-0r1dt3vlki] {
    background: #bbf7d0 !important;
    border-left: 3px solid var(--brand) !important;
}

.bcsl-master-expanded td.sticky-col-sl[b-0r1dt3vlki] {
    background: #86efac !important;
}

/* Master expanded — sticky top để luôn nhìn thấy khi scroll detail */
.bcsl-master-expanded td[b-0r1dt3vlki] {
    position: sticky;
    top: 56px;
    z-index: 3;
}

/* Chevron icon */
.bcsl-expand-icon[b-0r1dt3vlki] {
    font-size: 10px;
    color: #94a3b8;
    margin-right: 4px;
    transition: color .15s;
    display: inline-block;
}

.bcsl-master-expanded .bcsl-expand-icon[b-0r1dt3vlki] {
    color: var(--brand);
}

/* ── Detail row — trực tiếp trong tbody master ── */
.bcsl-detail-row td[b-0r1dt3vlki] {
    height: 26px !important;
    font-size: 10.5px !important;
    background: #fafcfe !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.bcsl-detail-row td:first-child[b-0r1dt3vlki] {
    border-left: 3px solid var(--brand) !important;
}

.bcsl-detail-row:hover td[b-0r1dt3vlki] {
    background: #eff6ff !important;
}

/* Detail row zone colors — nhạt hơn master */
.bcsl-detail-row .bcsl-zone-thu[b-0r1dt3vlki]      { background: rgba(220,252,231,.15) !important; color: #166534; }
.bcsl-detail-row .bcsl-zone-chi[b-0r1dt3vlki]      { background: rgba(254,226,226,.15) !important; color: #991b1b; }
.bcsl-detail-row .bcsl-zone-thu-ho[b-0r1dt3vlki]   { background: rgba(219,234,254,.1) !important; color: #1e40af; }
.bcsl-detail-row .bcsl-zone-chi-ho[b-0r1dt3vlki]   { background: rgba(254,243,199,.15) !important; color: #92400e; }
.bcsl-detail-row .bcsl-zone-loinhuan[b-0r1dt3vlki] { background: rgba(209,250,229,.18) !important; }
.bcsl-detail-row .bcsl-zone-tysuatln[b-0r1dt3vlki] { background: rgba(209,250,229,.08) !important; }
.bcsl-detail-row .bcsl-zone-khoan-thu[b-0r1dt3vlki] { background: rgba(220,252,231,.08) !important; color: #166534; border-left: 1px solid rgba(52,211,153,.12) !important; }
.bcsl-detail-row .bcsl-zone-khoan-chi[b-0r1dt3vlki] { background: rgba(254,226,226,.08) !important; color: #991b1b; border-left: 1px solid rgba(248,113,113,.12) !important; }

/* ── Detail cell name: SốQT + ⓘ + Ngày giờ ── */
.bcsl-detail-cell-name[b-0r1dt3vlki] {
    padding-left: 20px !important;
    white-space: nowrap;
    overflow: visible !important;
}

/* Số quyết toán — màu tối, rõ nét */
.bcsl-detail-qt[b-0r1dt3vlki] {
    font-weight: 700;
    color: #1e293b;
    font-size: 11px;
    margin-right: 2px;
}

/* Ngày giờ — rõ nét hơn */
.bcsl-detail-date[b-0r1dt3vlki] {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    margin-left: auto;
    padding-left: 8px;
    float: right;
}

/* ── Tooltip icon ── */
.bcsl-detail-info-icon[b-0r1dt3vlki] {
    font-size: 11px;
    color: #94a3b8;
    margin: 0 5px;
    cursor: help;
    transition: color .15s;
}

.bcsl-detail-info-icon:hover[b-0r1dt3vlki] {
    color: var(--brand);
}

/* ── Chuyến chưa có quyết toán — bôi mờ, cell trống ── */
.bcsl-detail-no-qt td[b-0r1dt3vlki] {
    opacity: .35;
}

.bcsl-detail-no-qt:hover td[b-0r1dt3vlki] {
    opacity: .55;
}

/* ── Loading row ── */
.bcsl-detail-loading-row > td[b-0r1dt3vlki] {
    background: #fafcfe !important;
    border-left: 3px solid var(--brand) !important;
}

.bcsl-detail-loading[b-0r1dt3vlki] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    color: #64748b;
    font-size: 12px;
}

.bcsl-loading-spinner-sm[b-0r1dt3vlki] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    border-top-color: var(--brand);
    animation: bcsl-spin-b-0r1dt3vlki .7s linear infinite;
}

/* ── Empty row ── */
.bcsl-detail-empty-row > td[b-0r1dt3vlki] {
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    padding: 14px 0 !important;
    background: #fafcfe !important;
    border-left: 3px solid var(--brand) !important;
}

.bcsl-detail-empty-row i[b-0r1dt3vlki] {
    margin-right: 4px;
}

/* ── Thanh cuộn chính — luôn hiển thị ── */
.bcsl-table-scroll[b-0r1dt3vlki] {
    scrollbar-gutter: stable;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-welcome[b-q17e9xtgnm] {
    height: calc(100dvh - var(--topbar-h, 60px));
    min-height: 460px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: stretch;
    padding: 0;
    color: #102018;
    user-select: none;
    -webkit-user-select: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(15, 157, 79, .22), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(242, 184, 75, .26), transparent 24%),
        radial-gradient(circle at 70% 88%, rgba(47, 115, 217, .18), transparent 30%),
        #fff;
    isolation: isolate;
}

.home-welcome[b-q17e9xtgnm],
.home-welcome *[b-q17e9xtgnm] {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.home-welcome[b-q17e9xtgnm]::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .24) 42%, rgba(255, 255, 255, .68)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 18px);
    backdrop-filter: blur(22px) saturate(1.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), inset 0 0 90px rgba(15, 157, 79, .08);
    pointer-events: none;
    z-index: -1;
}

.home-welcome[b-q17e9xtgnm]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 157, 79, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 157, 79, .045) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at center, #000 0 56%, transparent 82%);
    animation: gridDrift-b-q17e9xtgnm 12s linear infinite;
    z-index: -2;
}

.home-glow[b-q17e9xtgnm] {
    position: absolute;
    border-radius: 999px;
    filter: blur(16px);
    opacity: 1;
    z-index: -3;
}

.home-glow-a[b-q17e9xtgnm] {
    width: 420px;
    height: 420px;
    left: -7%;
    top: -12%;
    background: rgba(15, 157, 79, .22);
    animation: floatGlowStrong-b-q17e9xtgnm 6.5s ease-in-out infinite;
}

.home-glow-b[b-q17e9xtgnm] {
    width: 380px;
    height: 380px;
    right: -8%;
    bottom: -16%;
    background: rgba(242, 184, 75, .26);
    animation: floatGlowStrong-b-q17e9xtgnm 7.5s ease-in-out infinite reverse;
}

.home-orbit[b-q17e9xtgnm] {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(15, 157, 79, .28);
    pointer-events: none;
}

.home-orbit-a[b-q17e9xtgnm] {
    width: min(880px, 82vw);
    height: min(880px, 82vw);
    left: 50%;
    top: 50%;
    transform-origin: center;
    animation: orbitSpinA-b-q17e9xtgnm 18s linear infinite;
}

.home-orbit-b[b-q17e9xtgnm] {
    width: min(600px, 58vw);
    height: min(600px, 58vw);
    right: 8%;
    top: 12%;
    border-color: rgba(242, 184, 75, .32);
    animation: orbitSpin-b-q17e9xtgnm 14s linear infinite reverse;
}

.motion-field[b-q17e9xtgnm] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.motion-dot[b-q17e9xtgnm] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0f9d4f;
    box-shadow: 0 0 0 8px rgba(15, 157, 79, .08);
    opacity: .78;
    animation: dotFloat-b-q17e9xtgnm 4.8s ease-in-out infinite;
}

.dot-1[b-q17e9xtgnm] { left: 12%; top: 20%; animation-delay: -.2s; }
.dot-2[b-q17e9xtgnm] { left: 21%; top: 72%; width: 6px; height: 6px; animation-delay: -.9s; }
.dot-3[b-q17e9xtgnm] { left: 32%; top: 13%; background: #f2b84b; animation-delay: -1.4s; }
.dot-4[b-q17e9xtgnm] { left: 44%; top: 82%; width: 5px; height: 5px; animation-delay: -2.1s; }
.dot-5[b-q17e9xtgnm] { left: 57%; top: 18%; animation-delay: -2.8s; }
.dot-6[b-q17e9xtgnm] { left: 69%; top: 75%; background: #f2b84b; animation-delay: -3.2s; }
.dot-7[b-q17e9xtgnm] { left: 84%; top: 26%; width: 6px; height: 6px; animation-delay: -3.8s; }
.dot-8[b-q17e9xtgnm] { left: 88%; top: 62%; animation-delay: -4.3s; }
.dot-9[b-q17e9xtgnm] { left: 8%; top: 50%; width: 5px; height: 5px; animation-delay: -4.9s; }
.dot-10[b-q17e9xtgnm] { left: 27%; top: 38%; background: #f2b84b; animation-delay: -5.4s; }
.dot-11[b-q17e9xtgnm] { left: 74%; top: 43%; width: 5px; height: 5px; animation-delay: -5.9s; }
.dot-12[b-q17e9xtgnm] { left: 52%; top: 58%; animation-delay: -6.4s; }
.dot-13[b-q17e9xtgnm] { left: 38%; top: 26%; width: 4px; height: 4px; animation-delay: -7s; }
.dot-14[b-q17e9xtgnm] { left: 62%; top: 88%; width: 4px; height: 4px; animation-delay: -7.6s; }

.motion-dot[b-q17e9xtgnm]::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 1px;
    top: 50%;
    right: 12px;
    background: linear-gradient(90deg, transparent, currentColor);
    color: rgba(15, 157, 79, .16);
}

.welcome-content[b-q17e9xtgnm] {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: clamp(28px, 7vw, 92px);
    text-align: center;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    animation: contentIn-b-q17e9xtgnm .58s ease both;
}

.brand-mark[b-q17e9xtgnm] {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #0f9d4f 0%, #08763b 100%);
    box-shadow: 0 18px 36px rgba(15, 157, 79, .26);
}

.brand-mark i[b-q17e9xtgnm] {
    font-size: 38px;
    animation: truckBreathe-b-q17e9xtgnm 2.8s ease-in-out infinite;
}

.welcome-kicker[b-q17e9xtgnm] {
    margin: 0 0 14px;
    color: #0b7f41;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.welcome-content h1[b-q17e9xtgnm] {
    max-width: min(960px, 92vw);
    margin: 0;
    font-size: clamp(42px, 7.8vw, 104px);
    line-height: 1;
    letter-spacing: -.06em;
    font-weight: 950;
}

.welcome-content h1 span[b-q17e9xtgnm] {
    display: block;
    margin-top: 6px;
    color: #08763b;
}

.welcome-text[b-q17e9xtgnm] {
    max-width: 680px;
    margin: 18px 0 0;
    color: #607268;
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.68;
}

.welcome-line[b-q17e9xtgnm] {
    width: min(360px, 74%);
    height: 6px;
    overflow: hidden;
    margin: 24px 0 18px;
    border-radius: 999px;
    background: rgba(15, 157, 79, .10);
}

.welcome-line span[b-q17e9xtgnm] {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f9d4f, #f2b84b);
    animation: lineMove-b-q17e9xtgnm 2.8s ease-in-out infinite;
}

.welcome-note[b-q17e9xtgnm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #476057;
    font-size: 14px;
    font-weight: 750;
}

.welcome-note i[b-q17e9xtgnm] {
    color: #0f9d4f;
}

@keyframes contentIn-b-q17e9xtgnm {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes truckBreathe-b-q17e9xtgnm {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(4px); }
}

@keyframes lineMove-b-q17e9xtgnm {
    0%, 100% { transform: translateX(-8%); }
    50% { transform: translateX(150%); }
}

@keyframes floatGlow-b-q17e9xtgnm {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(18px, -16px, 0); }
}

@keyframes floatGlowStrong-b-q17e9xtgnm {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(42px, -34px, 0) scale(1.12); }
}

@keyframes orbitSpin-b-q17e9xtgnm {
    to { transform: rotate(360deg); }
}

@keyframes orbitSpinA-b-q17e9xtgnm {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dotFloat-b-q17e9xtgnm {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
    50% { transform: translate3d(30px, -34px, 0) scale(1.34); opacity: 1; }
}

@keyframes gridDrift-b-q17e9xtgnm {
    to { background-position: 44px 44px; }
}

@media (max-width: 680px) {
    .home-welcome[b-q17e9xtgnm] {
        height: calc(100dvh - var(--topbar-h, 60px));
        min-height: 0;
        padding: 14px;
    }

    .home-welcome[b-q17e9xtgnm]::before {
        inset: 10px;
        border-radius: 20px;
    }

    .welcome-content[b-q17e9xtgnm] {
        padding: 24px 18px;
    }

    .brand-mark[b-q17e9xtgnm] {
        width: 64px;
        height: 64px;
        margin-bottom: 14px;
    }

    .welcome-kicker[b-q17e9xtgnm] {
        font-size: 11px;
        letter-spacing: .12em;
    }

    .welcome-text[b-q17e9xtgnm] {
        font-size: 14px;
        line-height: 1.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-content[b-q17e9xtgnm],
    .brand-mark i[b-q17e9xtgnm],
    .welcome-line span[b-q17e9xtgnm],
    .home-glow[b-q17e9xtgnm],
    .home-orbit[b-q17e9xtgnm],
    .motion-dot[b-q17e9xtgnm],
    .home-welcome[b-q17e9xtgnm]::after {
        animation: none;
    }
}
/* /Components/Pages/Index/PageDoiMatKhau.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   PageDoiMatKhau · Gọn - Hiện đại - Icon sống động
   ═══════════════════════════════════════════════ */

/* ── Vùng nền ── */
.cpw-bg[b-nh6bxsbf1t] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100dvh - var(--topbar-h, 60px));
    padding: 32px 20px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(15, 157, 79, .12), transparent),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(47, 115, 217, .08), transparent),
        radial-gradient(ellipse 50% 40% at 10% 40%, rgba(242, 184, 75, .10), transparent),
        linear-gradient(175deg, #f6faf3 0%, #edf5ef 40%, #e8f2eb 100%);
}

.cpw-bg[b-nh6bxsbf1t]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .35;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(15, 23, 42, .015) 2px, rgba(15, 23, 42, .015) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(15, 23, 42, .012) 2px, rgba(15, 23, 42, .012) 4px);
    pointer-events: none;
}

/* ── Floating icon orbs ── */
.cpw-orb[b-nh6bxsbf1t] {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.cpw-orb i[b-nh6bxsbf1t] { font-size: 22px; }
.cpw-orb--1[b-nh6bxsbf1t] { top: 10%; left: 6%;  color: #0f9d4f; animation: orbFloat-b-nh6bxsbf1t 6s ease-in-out infinite; }
.cpw-orb--2[b-nh6bxsbf1t] { top: 18%; right: 8%;  color: #2563eb; animation: orbFloat-b-nh6bxsbf1t 7s ease-in-out .4s infinite; }
.cpw-orb--3[b-nh6bxsbf1t] { bottom: 14%; left: 10%; color: #7c3aed; animation: orbFloat-b-nh6bxsbf1t 6.5s ease-in-out 1.1s infinite; }
.cpw-orb--4[b-nh6bxsbf1t] { bottom: 8%; right: 10%; color: #f59e0b; animation: orbFloat-b-nh6bxsbf1t 7.5s ease-in-out .7s infinite; }

.cpw-orb[b-nh6bxsbf1t]::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    z-index: -1;
    opacity: .28;
    filter: blur(18px);
    animation: orbGlow-b-nh6bxsbf1t 4s ease-in-out infinite;
}
.cpw-orb--1[b-nh6bxsbf1t]::after { background: rgba(15, 157, 79, .5); animation-delay: 0s; }
.cpw-orb--2[b-nh6bxsbf1t]::after { background: rgba(37, 99, 235, .45); animation-delay: .6s; }
.cpw-orb--3[b-nh6bxsbf1t]::after { background: rgba(124, 58, 237, .4); animation-delay: 1.2s; }
.cpw-orb--4[b-nh6bxsbf1t]::after { background: rgba(245, 158, 11, .45); animation-delay: .9s; }

/* ── Card chính ── */
.cpw-card[b-nh6bxsbf1t] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        0 4px 6px rgba(15, 23, 42, .04),
        0 12px 32px rgba(15, 23, 42, .07),
        0 32px 64px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: cardIn-b-nh6bxsbf1t .5s cubic-bezier(.22, .61, .36, 1) both;
    display: grid;
    gap: 20px;
    user-select:none;
}

/* ── Header card ── */
.cpw-head[b-nh6bxsbf1t] {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp-b-nh6bxsbf1t .4s ease .1s both;
}

.cpw-head-icon[b-nh6bxsbf1t] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg, #0f9d4f 0%, #08763b 100%);
    box-shadow: 0 10px 22px rgba(15, 157, 79, .30), inset 0 1px 0 rgba(255, 255, 255, .35);
    animation: iconBounce-b-nh6bxsbf1t 2.8s ease-in-out infinite;
}

.cpw-head h1[b-nh6bxsbf1t] {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #0f172a;
}

.cpw-head p[b-nh6bxsbf1t] {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #58675f;
}

/* ── Các trường input ── */
.cpw-fields[b-nh6bxsbf1t] {
    display: grid;
    gap: 14px;
}

.cpw-field[b-nh6bxsbf1t] {
    display: grid;
    gap: 6px;
    animation: fadeUp-b-nh6bxsbf1t .35s ease both;
}
.cpw-field:nth-child(1)[b-nh6bxsbf1t] { animation-delay: .15s; }
.cpw-field:nth-child(2)[b-nh6bxsbf1t] { animation-delay: .20s; }
.cpw-field:nth-child(3)[b-nh6bxsbf1t] { animation-delay: .25s; }

.cpw-field label[b-nh6bxsbf1t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: .01em;
}

.cpw-field label i[b-nh6bxsbf1t] {
    font-size: 14px;
    color: #0f9d4f;
}

.cpw-input-wrap[b-nh6bxsbf1t] {
    position: relative;
}

.cpw-input-wrap input[b-nh6bxsbf1t] {
    width: 100%;
    min-height: 46px;
    padding: 10px 46px 10px 14px;
    border: 1.5px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.cpw-input-wrap input[b-nh6bxsbf1t]::placeholder { color: #9ca3af; }

.cpw-input-wrap input:focus[b-nh6bxsbf1t] {
    border-color: rgba(15, 157, 79, .50);
    box-shadow: 0 0 0 4px rgba(15, 157, 79, .10);
    background: #fff;
}

/* ── Nút toggle hiện/ẩn mật khẩu ── */
.cpw-eye[b-nh6bxsbf1t] {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.cpw-eye:hover[b-nh6bxsbf1t] { color: #0f9d4f; background: rgba(15, 157, 79, .08); }
.cpw-eye i[b-nh6bxsbf1t] { font-size: 17px; transition: transform .2s ease; }
.cpw-eye:active i[b-nh6bxsbf1t] { transform: scale(.85); }

/* ── Thanh độ mạnh ── */
.cpw-strength[b-nh6bxsbf1t] {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .025);
    border: 1px solid rgba(15, 23, 42, .05);
    animation: fadeUp-b-nh6bxsbf1t .35s ease .28s both;
    display: grid;
    gap: 8px;
    margin-top:10px;
    margin-bottom:10px;
}

.cpw-strength-track[b-nh6bxsbf1t] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, .07);
}

.cpw-strength-bar[b-nh6bxsbf1t] {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width .35s cubic-bezier(.34, 1.56, .64, 1), background .35s ease;
}

/* Trạng thái thanh */
.cpw-strength.none .cpw-strength-bar[b-nh6bxsbf1t] { width: 8%; background: rgba(15, 23, 42, .18); }
.cpw-strength.weak .cpw-strength-bar[b-nh6bxsbf1t] { width: 34%; background: linear-gradient(90deg, #fb7185, #f59e0b); }
.cpw-strength.mid  .cpw-strength-bar[b-nh6bxsbf1t] { width: 68%; background: linear-gradient(90deg, #f59e0b, #0f9d4f); }
.cpw-strength.strong .cpw-strength-bar[b-nh6bxsbf1t] { width: 100%; background: linear-gradient(90deg, #0f9d4f, #2563eb); }

/* Pulse dot khi strong */
.cpw-strength-pulse[b-nh6bxsbf1t] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s ease, right .35s cubic-bezier(.34, 1.56, .64, 1);
}
.cpw-strength.none   .cpw-strength-pulse[b-nh6bxsbf1t] { right: 8%; }
.cpw-strength.weak   .cpw-strength-pulse[b-nh6bxsbf1t] { right: 66%; background: #fb7185; }
.cpw-strength.mid    .cpw-strength-pulse[b-nh6bxsbf1t] { right: 32%; background: #f59e0b; }
.cpw-strength.strong .cpw-strength-pulse[b-nh6bxsbf1t] { right: 0%; background: #2563eb; opacity: 1; animation: pulseDot-b-nh6bxsbf1t 1.5s ease-in-out infinite; }

.cpw-strength-text[b-nh6bxsbf1t] {
    font-size: 12px;
    color: #516157;
    line-height: 1.5;
}

/* ── Nút hành động ── */
.cpw-actions[b-nh6bxsbf1t] {
    display: flex;
    gap: 10px;
    align-items: center;
    animation: fadeUp-b-nh6bxsbf1t .35s ease .32s both;
}

.cpw-btn[b-nh6bxsbf1t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    position: relative;
    overflow: hidden;
}

.cpw-btn[b-nh6bxsbf1t]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: rgba(255, 255, 255, .15);
    transition: opacity .2s ease;
}
.cpw-btn:hover:not(:disabled)[b-nh6bxsbf1t]::after { opacity: 1; }

.cpw-btn--primary[b-nh6bxsbf1t] {
    color: #fff;
    background: linear-gradient(135deg, #0f9d4f 0%, #0a7d3e 100%);
    box-shadow: 0 10px 24px rgba(15, 157, 79, .28);
}
.cpw-btn--primary:hover:not(:disabled)[b-nh6bxsbf1t] {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 157, 79, .35);
}
.cpw-btn--primary:active:not(:disabled)[b-nh6bxsbf1t] { transform: translateY(0); }

.cpw-btn--ghost[b-nh6bxsbf1t] {
    color: #0f172a;
    background: rgba(15, 23, 42, .05);
}
.cpw-btn--ghost:hover:not(:disabled)[b-nh6bxsbf1t] { background: rgba(15, 23, 42, .10); }

.cpw-btn:disabled[b-nh6bxsbf1t] { opacity: .55; cursor: not-allowed; }

/* ── Animations ── */
@keyframes cardIn-b-nh6bxsbf1t {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeUp-b-nh6bxsbf1t {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes iconBounce-b-nh6bxsbf1t {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-5px) rotate(-4deg); }
    60%      { transform: translateY(-1px) rotate(2deg); }
}

@keyframes orbFloat-b-nh6bxsbf1t {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(6px, -12px) scale(1.05); }
    50%      { transform: translate(-4px, -4px) scale(.97); }
    75%      { transform: translate(-8px, 8px) scale(1.04); }
}

@keyframes orbGlow-b-nh6bxsbf1t {
    0%, 100% { opacity: .18; transform: scale(.9); }
    50%      { opacity: .38; transform: scale(1.15); }
}

@keyframes pulseDot-b-nh6bxsbf1t {
    0%, 100% { transform: translate(50%, -50%) scale(1); opacity: .9; }
    50%      { transform: translate(50%, -50%) scale(1.8); opacity: .35; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .cpw-card[b-nh6bxsbf1t], .cpw-head[b-nh6bxsbf1t], .cpw-field[b-nh6bxsbf1t],
    .cpw-strength[b-nh6bxsbf1t], .cpw-actions[b-nh6bxsbf1t], .cpw-orb[b-nh6bxsbf1t],
    .cpw-orb[b-nh6bxsbf1t]::after, .cpw-head-icon[b-nh6bxsbf1t], .cpw-strength-pulse[b-nh6bxsbf1t] {
        animation: none !important; transition: none !important;
    }
    .cpw-strength-pulse[b-nh6bxsbf1t] { opacity: 0 !important; }
}

/* ── Responsive ── */
@media (max-width: 500px) {
    .cpw-bg[b-nh6bxsbf1t] { padding: 16px 12px; }
    .cpw-card[b-nh6bxsbf1t] { padding: 22px 18px; border-radius: 22px; gap: 16px; }
    .cpw-head-icon[b-nh6bxsbf1t] { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
    .cpw-head h1[b-nh6bxsbf1t] { font-size: 20px; }
    .cpw-actions[b-nh6bxsbf1t] { flex-direction: column; }
    .cpw-btn[b-nh6bxsbf1t] { width: 100%; }
    .cpw-orb[b-nh6bxsbf1t] { width: 38px; height: 38px; border-radius: 12px; }
    .cpw-orb i[b-nh6bxsbf1t] { font-size: 18px; }
    .cpw-orb--1[b-nh6bxsbf1t] { top: 6%; left: 3%; }
    .cpw-orb--2[b-nh6bxsbf1t] { top: 10%; right: 3%; }
    .cpw-orb--3[b-nh6bxsbf1t] { bottom: 8%; left: 4%; }
    .cpw-orb--4[b-nh6bxsbf1t] { bottom: 5%; right: 4%; }
}
/* /Components/Pages/Index/PageHoSoCaNhan.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   HỒ SƠ CÁ NHÂN — Sidebar Profile Layout
   Gọn gàng, tập trung vào nội dung chính
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:where(.pf-layout, .pf-loading)[b-t9petkrt0r] {
    --pf-green: #0f9d4f;
    --pf-green-dark: #08763b;
    --pf-blue: #2f73d9;
    --pf-text: #0f172a;
    --pf-sub: #64748b;
    --pf-border: rgba(15,23,42,.07);
    --pf-bg: #f4f6f9;
    --pf-card: #fff;
    --pf-radius: 16px;
    --pf-shadow: 0 2px 12px rgba(15,23,42,.05);
}

/* ── Loading skeleton ── */
.pf-loading[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 80px 20px;
    min-height: calc(100dvh - var(--topbar-h, 60px));
    background: var(--pf-bg);
    user-select: none;
}

.pf-skel[b-t9petkrt0r] {
    border-radius: 12px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f1f5f9 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: pfShimmer-b-t9petkrt0r 1.8s ease-in-out infinite;
}

.pf-skel-avatar[b-t9petkrt0r] { width: 80px; height: 80px; border-radius: 50%; }
.pf-skel-line[b-t9petkrt0r]   { height: 16px; }

@keyframes pfShimmer-b-t9petkrt0r {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Layout ── */
.pf-layout[b-t9petkrt0r] {
    display: flex;
    gap: 20px;
    height: calc(100dvh - var(--topbar-h, 60px));
    padding: 20px;
    background: #eef3f8;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 30%, rgba(15,157,79,.09) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 70%, rgba(47,115,217,.07) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124,58,237,.04) 0%, transparent 60%);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow:hidden;
}

.pf-layout *[b-t9petkrt0r] {
    user-select: none;
    -webkit-user-select: none;
}

.pf-layout[b-t9petkrt0r]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 35% at 25% 55%, rgba(15,157,79,.05) 0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 75% 45%, rgba(47,115,217,.05) 0%, transparent 50%),
        radial-gradient(ellipse 35% 25% at 50% 85%, rgba(217,119,6,.04) 0%, transparent 50%);
    animation: pfBgShift-b-t9petkrt0r 10s ease-in-out infinite alternate;
}

@keyframes pfBgShift-b-t9petkrt0r {
    0%   { opacity: .5; transform: scale(1) rotate(0deg); }
    33%  { opacity: 1; transform: scale(1.05) rotate(1deg); }
    66%  { opacity: .6; transform: scale(.98) rotate(-1deg); }
    100% { opacity: .8; transform: scale(1.02) rotate(0deg); }
}

/* ── Floating particles ── */
.pf-layout[b-t9petkrt0r]::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(15,157,79,.14);
    box-shadow:
        150px 90px 0 rgba(15,157,79,.09),
        370px 50px 0 rgba(47,115,217,.1),
        540px 260px 0 rgba(15,157,79,.08),
        720px 110px 0 rgba(124,58,237,.08),
        80px 360px 0 rgba(47,115,217,.06),
        460px 400px 0 rgba(15,157,79,.1),
        650px 460px 0 rgba(217,119,6,.06),
        310px 300px 0 rgba(15,157,79,.05),
        880px 200px 0 rgba(47,115,217,.04);
    animation: pfFloat-b-t9petkrt0r 18s ease-in-out infinite;
}

@keyframes pfFloat-b-t9petkrt0r {
    0%,100% { transform: translate(0, 0) scale(1); opacity: .6; }
    25%     { transform: translate(40px, -30px) scale(1.4); opacity: 1; }
    50%     { transform: translate(-25px, -50px) scale(.8); opacity: .4; }
    75%     { transform: translate(30px, -20px) scale(1.2); opacity: .8; }
}

/* ── Sidebar ── */
.pf-sidebar[b-t9petkrt0r] {
    width: 255px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(15,157,79,.1);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(15,23,42,.08),
        0 2px 8px rgba(15,157,79,.06),
        inset 0 1px 0 rgba(255,255,255,.8);
    animation: pfIn-b-t9petkrt0r .4s cubic-bezier(.22,.61,.36,1) both;
    transition: box-shadow .4s ease, border-color .4s ease;
}

.pf-sidebar:hover[b-t9petkrt0r] {
    box-shadow:
        0 12px 40px rgba(15,23,42,.1),
        0 4px 14px rgba(15,157,79,.1),
        inset 0 1px 0 rgba(255,255,255,.9);
    border-color: rgba(15,157,79,.18);
}

@keyframes pfIn-b-t9petkrt0r {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Identity ── */
.pf-identity[b-t9petkrt0r] {
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pf-border);
}

.pf-av-ring[b-t9petkrt0r] {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 50%;
    margin-bottom: 10px;
    background: conic-gradient(from 0deg, var(--pf-green), var(--pf-blue), var(--pf-green-dark), var(--pf-green), var(--pf-blue));
    animation: pfAvSpin-b-t9petkrt0r 8s linear infinite;
    box-shadow: 0 0 24px rgba(15,157,79,.18), 0 0 0 6px rgba(15,157,79,.06);
}

.pf-av-ring[b-t9petkrt0r]::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 120deg, transparent, rgba(15,157,79,.12), transparent, rgba(47,115,217,.1), transparent);
    animation: pfAvGlow-b-t9petkrt0r 3s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

.pf-av-ring.sm[b-t9petkrt0r] { animation: none; box-shadow: none; }
.pf-av-ring.sm[b-t9petkrt0r]::after { display: none; }

@keyframes pfAvSpin-b-t9petkrt0r {
    to { transform: rotate(360deg); }
}

@keyframes pfAvGlow-b-t9petkrt0r {
    0%   { opacity: .5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.15); }
}

.pf-name[b-t9petkrt0r] {
    display: block;
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 850;
    color: #0a1628;
    line-height: 1.2;
    letter-spacing: -.2px;
}

.pf-username[b-t9petkrt0r] {
    display: block;
    font-size: 12px;
    color: #0f7b43;
    font-weight: 650;
    margin-bottom: 4px;
}

.pf-username i[b-t9petkrt0r] {
    margin-right: 3px;
    font-size: 11px;
    opacity: .7;
}

.pf-role[b-t9petkrt0r] {
    display: inline-block;
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pf-green), var(--pf-blue));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 12px rgba(15,157,79,.25);
}

/* ── Stats row ── */
.pf-stats[b-t9petkrt0r] {
    display: flex;
    gap: 0;
    border: 1px solid rgba(15,157,79,.12);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,157,79,.06);
}

.pf-stat[b-t9petkrt0r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px;
    background: #fff;
    transition: background .18s, transform .18s;
    position: relative;
}

.pf-stat:hover[b-t9petkrt0r] {
    background: #f6fdf9;
    transform: translateY(-1px);
}

.pf-stat + .pf-stat[b-t9petkrt0r] {
    border-left: 1px solid rgba(15,157,79,.08);
}

.pf-stat i[b-t9petkrt0r] {
    font-size: 16px;
}

.pf-stat:nth-child(1) i[b-t9petkrt0r] { color: #0f9d4f; }
.pf-stat:nth-child(2) i[b-t9petkrt0r] { color: #2f73d9; }
.pf-stat:nth-child(3) i[b-t9petkrt0r] { color: #d97706; }

.pf-sv[b-t9petkrt0r] {
    font-size: 12px;
    font-weight: 900;
    color: #0a1628;
    line-height: 1;
}

.pf-sl[b-t9petkrt0r] {
    font-size: 10px;
    font-weight: 750;
    color: #5a6677;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
    display:none;
}

/* ── Meta chips ── */
.pf-meta[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-chip[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 10px;
    border-left: 3px solid var(--pf-green);
    background: linear-gradient(90deg, rgba(15,157,79,.06), rgba(15,157,79,.01));
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    transition: all .22s ease;
    overflow: hidden;
}

.pf-chip.department[b-t9petkrt0r] {
    border-left-color: #7c3aed;
    background: linear-gradient(90deg, rgba(124,58,237,.08), rgba(124,58,237,.01));
    color: #4c1d95;
    font-weight: 700;
}

.pf-chip i[b-t9petkrt0r] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--pf-green), var(--pf-green-dark));
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}

.pf-chip.department i[b-t9petkrt0r] {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.pf-chip:hover[b-t9petkrt0r] {
    background: linear-gradient(90deg, rgba(15,157,79,.12), rgba(15,157,79,.04));
    border-left-color: var(--pf-green-dark);
    transform: translateX(3px);
}

.pf-chip.department:hover[b-t9petkrt0r] {
    background: linear-gradient(90deg, rgba(124,58,237,.14), rgba(124,58,237,.04));
    border-left-color: #5b21b6;
}

.pf-chip span[b-t9petkrt0r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sidebar nav ── */
.pf-nav[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.pf-nav-item[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #4a5568;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    text-align: left;
    width: 100%;
}

.pf-nav-item i[b-t9petkrt0r] { font-size: 14px; flex-shrink: 0; opacity: .6; transition: opacity .22s, color .22s; }

.pf-nav-item:hover[b-t9petkrt0r] {
    background: rgba(15,157,79,.06);
    color: var(--pf-text);
    border-color: rgba(15,157,79,.15);
}

.pf-nav-item:hover i[b-t9petkrt0r] { opacity: 1; color: var(--pf-green); }

.pf-nav-item.active[b-t9petkrt0r] {
    background: linear-gradient(135deg, rgba(15,157,79,.14), rgba(47,115,217,.08));
    color: #065f46;
    font-weight: 700;
    border-color: rgba(15,157,79,.3);
    box-shadow: 0 4px 16px rgba(15,157,79,.14), inset 0 1px 0 rgba(255,255,255,.7);
}

.pf-nav-item.active i[b-t9petkrt0r] {
    opacity: 1;
    color: var(--pf-green);
}

/* ── Reload button ── */
.pf-reload[b-t9petkrt0r] {
    align-self: center;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    transition: all .2s ease;
    padding: 0;
}

.pf-reload:hover:not(:disabled)[b-t9petkrt0r] {
    color: var(--pf-green);
    border-color: rgba(15,157,79,.3);
    background: rgba(15,157,79,.06);
}

.pf-reload:active:not(:disabled) i[b-t9petkrt0r] {
    animation: pfSpin-b-t9petkrt0r .5s ease;
}

.pf-reload:disabled[b-t9petkrt0r] {
    opacity: .4;
    cursor: not-allowed;
}

@keyframes pfSpin-b-t9petkrt0r { to { transform: rotate(360deg); } }

/* ── Main content ── */
.pf-main[b-t9petkrt0r] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: pfMainIn-b-t9petkrt0r .45s cubic-bezier(.22,.61,.36,1) .1s both;
    position: relative;
    z-index: 1;
}

@keyframes pfMainIn-b-t9petkrt0r {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Section card ── */
.pf-section[b-t9petkrt0r] {
    background: var(--pf-card);
    border: 1px solid var(--pf-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--pf-shadow);
    transition: box-shadow .3s ease;
    position: relative;
}

.pf-section.pf-section-tree[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.pf-section:hover[b-t9petkrt0r] {
    box-shadow: 0 4px 20px rgba(15,23,42,.08);
}

.pf-section + .pf-section[b-t9petkrt0r] { margin-top: 14px; }

.pf-shead[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 750;
    color: var(--pf-text);
    letter-spacing: -.1px;
    flex-shrink: 0;
}

.pf-shead i[b-t9petkrt0r] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 15px;
    flex-shrink: 0;
}

.pf-shead i.s-icon-green[b-t9petkrt0r]  { color: #fff; background: linear-gradient(135deg, var(--pf-green), var(--pf-green-dark)); }
.pf-shead i.s-icon-blue[b-t9petkrt0r]   { color: #fff; background: linear-gradient(135deg, #2f73d9, #1e40af); }
.pf-shead i.s-icon-purple[b-t9petkrt0r] { color: #fff; background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.pf-shead i.s-icon-amber[b-t9petkrt0r]  { color: #fff; background: linear-gradient(135deg, #d97706, #92400e); }

/* ── Info grid ── */
.pf-info-grid[b-t9petkrt0r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.pf-info-item[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: #fafbfc;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.pf-info-item:hover[b-t9petkrt0r] {
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    border-color: rgba(15,157,79,.15);
}

.pf-info-item > i[b-t9petkrt0r] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(15,157,79,.08);
    color: var(--pf-green);
    font-size: 13px;
    flex-shrink: 0;
}

.pf-info-item > div[b-t9petkrt0r] {
    min-width: 0;
}

.pf-info-item span[b-t9petkrt0r] {
    display: block;
    font-size: 10px;
    font-weight: 750;
    color: var(--pf-sub);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 1px;
}

.pf-info-item strong[b-t9petkrt0r] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-text);
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.pf-span2[b-t9petkrt0r] { grid-column: span 2; }

/* ── Avatar zone ── */
.pf-avatar-zone[b-t9petkrt0r] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
    border: 2px dashed rgba(15,157,79,.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15,157,79,.025), rgba(47,115,217,.015));
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
    position: relative;
    overflow: hidden;
}

.pf-avatar-zone[b-t9petkrt0r]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(15,157,79,.06) 0%, transparent 50%);
    pointer-events: none;
}

.pf-avatar-zone:hover[b-t9petkrt0r] {
    border-color: rgba(15,157,79,.4);
    box-shadow: 0 0 0 6px rgba(15,157,79,.04);
    background: linear-gradient(135deg, rgba(15,157,79,.04), rgba(47,115,217,.02));
}

.pf-av-preview[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pf-av-hint[b-t9petkrt0r] {
    font-size: 11px;
    color: var(--pf-sub);
    text-align: center;
}

.pf-upload-area[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 18px;
    border: 2px dashed rgba(15,157,79,.28);
    border-radius: 18px;
    cursor: pointer;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    position: relative;
    min-height: 100px;
    background: rgba(15,157,79,.015);
    overflow: hidden;
}

.pf-upload-area[b-t9petkrt0r]::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 14px;
    border: 1px dashed rgba(15,157,79,.08);
    pointer-events: none;
    transition: border-color .28s ease;
}

.pf-upload-area:hover[b-t9petkrt0r] {
    border-color: var(--pf-green);
    background: rgba(15,157,79,.05);
    box-shadow: 0 0 0 10px rgba(15,157,79,.04);
    transform: translateY(-2px);
}

.pf-upload-area:hover[b-t9petkrt0r]::after {
    border-color: rgba(15,157,79,.2);
}

.pf-upload-area i.upload-icon[b-t9petkrt0r] {
    font-size: 32px;
    color: rgba(15,157,79,.3);
    transition: all .28s ease;
    animation: pfBounce-b-t9petkrt0r 2.2s ease-in-out infinite;
}

@keyframes pfBounce-b-t9petkrt0r {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
}

.pf-upload-area:hover i.upload-icon[b-t9petkrt0r] {
    color: var(--pf-green);
    animation: none;
    transform: scale(1.12) translateY(-3px);
}

.pf-upload-area .upload-text[b-t9petkrt0r] {
    font-size: 13px;
    font-weight: 750;
    color: #475569;
    transition: color .28s;
}

.pf-upload-area:hover .upload-text[b-t9petkrt0r] {
    color: var(--pf-green-dark);
}

.pf-upload-area .upload-sub[b-t9petkrt0r] {
    font-size: 11px;
    color: #94a3b8;
}

.pf-upload-area[b-t9petkrt0r]  input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

.pf-file-name[b-t9petkrt0r] {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--pf-green-dark);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,157,79,.06);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* ── Form field ── */
.pf-field[b-t9petkrt0r] {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.pf-field > span[b-t9petkrt0r] {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.pf-field textarea[b-t9petkrt0r] {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    padding: 12px 15px;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    background: #fafbfc;
    color: var(--pf-text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.pf-field textarea:focus[b-t9petkrt0r] {
    border-color: rgba(15,157,79,.5);
    box-shadow: 0 0 0 4px rgba(15,157,79,.08);
    background: #fff;
}

/* ── Action buttons ── */
.pf-actions[b-t9petkrt0r] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pf-btn[b-t9petkrt0r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border: none;
    border-radius: 13px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}

.pf-btn:disabled[b-t9petkrt0r] {
    opacity: .5;
    cursor: not-allowed;
}

.pf-btn-primary[b-t9petkrt0r] {
    color: #fff;
    background: linear-gradient(135deg, var(--pf-green), var(--pf-green-dark));
    box-shadow: 0 8px 18px rgba(15,157,79,.2);
}

.pf-btn-primary:hover:not(:disabled)[b-t9petkrt0r] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15,157,79,.28);
}

.pf-btn-ghost[b-t9petkrt0r] {
    color: #475569;
    background: rgba(15,23,42,.05);
}

.pf-btn-ghost:hover:not(:disabled)[b-t9petkrt0r] {
    background: rgba(15,23,42,.1);
}

.pf-btn-danger-sm[b-t9petkrt0r] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    border: 1.5px solid #fecaca; border-radius: 8px;
    background: transparent; color: #dc2626; cursor: pointer;
    transition: all .15s; margin-top: 6px;
}
.pf-btn-danger-sm:hover[b-t9petkrt0r] { background: #fef2f2; border-color: #fca5a5; }
.pf-btn-danger-sm:disabled[b-t9petkrt0r] { opacity: .5; cursor: not-allowed; }

/* ── Group grid ── */
.pf-group-grid[b-t9petkrt0r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.pf-group-card[b-t9petkrt0r] {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    position: relative;
    overflow: hidden;
}

.pf-group-card[b-t9petkrt0r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0 2px 2px 0;
}

.pf-group-card:nth-child(6n+1)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #0f9d4f, #08763b); }
.pf-group-card:nth-child(6n+2)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #2f73d9, #1e40af); }
.pf-group-card:nth-child(6n+3)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #7c3aed, #5b21b6); }
.pf-group-card:nth-child(6n+4)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #d97706, #92400e); }
.pf-group-card:nth-child(6n+5)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #059669, #047857); }
.pf-group-card:nth-child(6n+6)[b-t9petkrt0r]::before { background: linear-gradient(180deg, #dc2626, #991b1b); }

.pf-group-card:hover[b-t9petkrt0r] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,.07);
    border-color: rgba(15,157,79,.18);
}

.pf-group-icon[b-t9petkrt0r] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 16px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid;
}

.pf-group-card:nth-child(6n+1) .pf-group-icon[b-t9petkrt0r] { color: #0f9d4f; border-color: rgba(15,157,79,.3); }
.pf-group-card:nth-child(6n+2) .pf-group-icon[b-t9petkrt0r] { color: #2f73d9; border-color: rgba(47,115,217,.3); }
.pf-group-card:nth-child(6n+3) .pf-group-icon[b-t9petkrt0r] { color: #7c3aed; border-color: rgba(124,58,237,.3); }
.pf-group-card:nth-child(6n+4) .pf-group-icon[b-t9petkrt0r] { color: #d97706; border-color: rgba(217,119,6,.3); }
.pf-group-card:nth-child(6n+5) .pf-group-icon[b-t9petkrt0r] { color: #059669; border-color: rgba(5,150,105,.3); }
.pf-group-card:nth-child(6n+6) .pf-group-icon[b-t9petkrt0r] { color: #dc2626; border-color: rgba(220,38,38,.3); }

.pf-group-card strong[b-t9petkrt0r] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pf-text);
    margin-bottom: 1px;
}

.pf-group-card span[b-t9petkrt0r] {
    font-size: 11px;
    color: var(--pf-sub);
    line-height: 1.4;
}

/* ── Permission tree ── */
.pf-tree-search[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(15,157,79,.15);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.03);
    transition: border-color .2s, box-shadow .2s;
    flex-shrink: 0;
}

.pf-tree-search:focus-within[b-t9petkrt0r] {
    border-color: rgba(15,157,79,.4);
    box-shadow: 0 0 0 4px rgba(15,157,79,.06);
}

.pf-tree-search i[b-t9petkrt0r] {
    color: #94a3b8;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 8px;
}

.pf-tree-search input[b-t9petkrt0r] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #1e293b;
    padding: 0;
}

.pf-tree-search input[b-t9petkrt0r]::placeholder {
    color: #94a3b8;
}

.pf-search-clear[b-t9petkrt0r] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(15,23,42,.06);
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s;
}

.pf-search-clear:hover[b-t9petkrt0r] {
    background: rgba(220,38,38,.12);
    color: #dc2626;
}

.pf-tree[b-t9petkrt0r] {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
}

.pf-tree[b-t9petkrt0r]::-webkit-scrollbar {
    width: 5px;
}

.pf-tree[b-t9petkrt0r]::-webkit-scrollbar-track {
    background: transparent;
}

.pf-tree[b-t9petkrt0r]::-webkit-scrollbar-thumb {
    background: rgba(15,157,79,.12);
    border-radius: 3px;
}

.pf-tree[b-t9petkrt0r]::-webkit-scrollbar-thumb:hover {
    background: rgba(15,157,79,.25);
}

.pf-tree-page[b-t9petkrt0r] {
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 14px;
    background: #fff;
}

/* Page head */
.pf-tree-page-head[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fafdfb 0%, #f5faf7 100%);
    border-bottom: 1px solid rgba(15,157,79,.1);
    font-size: 13px;
}

.pf-tree-page-head i[b-t9petkrt0r] {
    font-size: 16px;
    color: var(--pf-green);
    flex-shrink: 0;
}

.pf-tree-page-head strong[b-t9petkrt0r] {
    flex: 1;
    min-width: 0;
    color: #1e3a5f;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-tree-badge[b-t9petkrt0r] {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(15,157,79,.1);
    color: var(--pf-green-dark);
    font-size: 11px;
    font-weight: 750;
    flex-shrink: 0;
}

/* Features container */
.pf-tree-features[b-t9petkrt0r] {
    padding: 6px 10px 10px;
    background: #fcfdfc;
}

/* Feature group */
.pf-tree-feature[b-t9petkrt0r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 8px;
}

.pf-tree-feature-head[b-t9petkrt0r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(99,102,241,.08);
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    white-space: nowrap;
    flex-shrink: 0;
}

.pf-tree-feature-head i[b-t9petkrt0r] {
    font-size: 10px;
    color: #818cf8;
}

/* Permission items */
.pf-tree-item[b-t9petkrt0r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 7px;
    transition: all .18s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
}

.pf-tree-item:hover[b-t9petkrt0r] {
    background: #f6fdf9;
    border-color: rgba(15,157,79,.25);
    box-shadow: 0 3px 10px rgba(15,157,79,.1);
    transform: translateY(-1px);
}

.pf-tree-name[b-t9petkrt0r] {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.pf-tree-item code[b-t9petkrt0r] {
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(15,157,79,.08);
    color: #0f5c32;
    font-size: 10px;
    font-weight: 650;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: .2px;
}

.pf-tree-item:hover code[b-t9petkrt0r] {
    background: rgba(15,157,79,.15);
    color: #064e24;
}

/* ── Empty state ── */
.pf-empty[b-t9petkrt0r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: #94a3b8;
    text-align: center;
}

.pf-empty i[b-t9petkrt0r] {
    font-size: 2.2rem;
    opacity: .25;
}

.pf-empty p[b-t9petkrt0r] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    *[b-t9petkrt0r], *[b-t9petkrt0r]::before, *[b-t9petkrt0r]::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .pf-layout[b-t9petkrt0r] {
        flex-direction: column;
        height: auto;
        min-height: calc(100dvh - var(--topbar-h, 60px));
        padding: 14px;
        gap: 14px;
        overflow-y: auto;
    }

    .pf-main[b-t9petkrt0r] {
        overflow-y: visible;
    }

    .pf-sidebar[b-t9petkrt0r] {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 18px;
    }

    .pf-identity[b-t9petkrt0r] { 
        text-align: left;
        display: flex;
        align-items: center;
        gap: 14px;
        border-bottom: none;
        padding-bottom: 0;
        flex: 1;
        min-width: 0;
    }

    .pf-av-ring[b-t9petkrt0r] { margin-bottom: 0; }
    .pf-av-ring[b-t9petkrt0r]::after { display: none; }
    .pf-name[b-t9petkrt0r],
    .pf-username[b-t9petkrt0r],
    .pf-role[b-t9petkrt0r] { display: none; }

    .pf-stats[b-t9petkrt0r] {
        flex: 0 0 auto;
    }
    .pf-meta[b-t9petkrt0r]   { display: none; }
    .pf-nav[b-t9petkrt0r]    { flex-direction: row; width: 100%; flex: auto; order: 10; overflow-x: auto; }
    .pf-nav-item[b-t9petkrt0r] { white-space: nowrap; flex-shrink: 0; }
    .pf-reload[b-t9petkrt0r] { order: 9; }

    .pf-info-grid[b-t9petkrt0r] { grid-template-columns: 1fr; }
    .pf-span2[b-t9petkrt0r]     { grid-column: auto; }
}

@media (max-width: 480px) {
    .pf-layout[b-t9petkrt0r] { padding: 10px; gap: 10px; }

    .pf-sidebar[b-t9petkrt0r] { padding: 14px; gap: 10px; }

    .pf-section[b-t9petkrt0r] {
        padding: 16px;
        border-radius: 16px;
        flex: none;
    }

    .pf-name[b-t9petkrt0r] { font-size: 15px; }
    .pf-av-ring[b-t9petkrt0r] { transform: scale(.85); }

    .pf-group-grid[b-t9petkrt0r] { grid-template-columns: 1fr; }

    .pf-avatar-zone[b-t9petkrt0r] { grid-template-columns: 1fr; }
}
/* /Components/Pages/TacNghiep/BoTriXe.razor.rz.scp.css */
/* ── Status segment ── */
.status-segment[b-heq1p0ousl] {
    display: inline-flex;
    gap: 3px;
    margin-left: 0px;
    background: var(--surface);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--border);
}
.status-segment-item[b-heq1p0ousl] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}
.status-segment-item:hover[b-heq1p0ousl] {
    color: #374151;
}
.status-segment-item.active[b-heq1p0ousl] {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.status-segment-item input[b-heq1p0ousl] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.status-segment-item .status-segment-dot[b-heq1p0ousl] { display: none; }
.status-segment-item i[b-heq1p0ousl] {
    font-size: 14.5px;
    transition: color 0.2s;
}

/* ── Page filter bar ── */
.page-filter[b-heq1p0ousl] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px;
    flex-wrap: wrap;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border);
}
.page-filter .toolbar-search[b-heq1p0ousl] { width: 200px; margin-right: 0; flex: 0 0 auto; }
.page-filter .cmbgt-root[b-heq1p0ousl] { flex: 0 0 auto; }
.page-filter .cmbgt-shell[b-heq1p0ousl],
.page-filter .inputd-shell[b-heq1p0ousl] {
    min-height: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.page-filter .cmbgt-shell:hover:not(.disabled):not(.readonly)[b-heq1p0ousl],
.page-filter .cmbgt-shell:focus-within[b-heq1p0ousl],
.page-filter .inputd-shell:focus-within[b-heq1p0ousl] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.page-filter .cmbgt-shell-main[b-heq1p0ousl] { padding-left: 10px; }
.page-filter .cmbgt-shell-label[b-heq1p0ousl],
.page-filter .inputd-input[b-heq1p0ousl] {
    font-size: 13px;
    color: var(--text-main);
}
.page-filter .cmbgt-shell-label.is-placeholder[b-heq1p0ousl] { color: var(--text-muted); }
.page-filter .form-control[b-heq1p0ousl],
.page-filter .inputd-input[b-heq1p0ousl] {
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 32px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* ── InputD trong toolbar chính ── */
.page-toolbar .form-control[b-heq1p0ousl],
.page-toolbar .inputd-input[b-heq1p0ousl] {
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}
.page-toolbar .inputd-shell[b-heq1p0ousl] { height: 34px !important; }

/* ── Xe / Lái xe / GN / TT cell ── */
.btx-xe[b-heq1p0ousl] { font-weight: 600; font-size: 12px; color: #37474f; }
.btx-laixe[b-heq1p0ousl] { font-size: 11px; color: #78909c; }
.btx-gn[b-heq1p0ousl] { font-size: 11px; color: #1565c0; }
.btx-tt[b-heq1p0ousl] { font-size: 11px; color: #6a1b9a; }
.btx-cont[b-heq1p0ousl] { font-weight: 600; font-size: 12px; }
.btx-seal[b-heq1p0ousl] { font-size: 11px; color: #ef6c00; }

/* ── Batch select buttons ── */
.ike-btn-send-batch[b-heq1p0ousl] {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}
.ike-btn-send-batch:hover[b-heq1p0ousl] {
    background: #047857 !important;
    border-color: #047857 !important;
}
.ike-btn-send-batch:disabled[b-heq1p0ousl] {
    background: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

/* ── Soft red outline cancel button ── */
.btn-outline-danger-soft[b-heq1p0ousl] {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: transparent !important;
}
.btn-outline-danger-soft:hover[b-heq1p0ousl] {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}

/* /Components/Pages/TacNghiep/KeHoach.razor.rz.scp.css */
/* ── Status segment ── */
.status-segment[b-zaq2isd8zm] {
    display: inline-flex;
    gap: 3px;
    margin-left: 12px;
    background: var(--surface);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--border);
}
.status-segment-item[b-zaq2isd8zm] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}
.status-segment-item:hover[b-zaq2isd8zm] {
    color: #374151;
}
.status-segment-item.active[b-zaq2isd8zm] {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.status-segment-item input[b-zaq2isd8zm] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.status-segment-item .status-segment-dot[b-zaq2isd8zm] { display: none; }
.status-segment-item i[b-zaq2isd8zm] {
    font-size: 14.5px;
    transition: color 0.2s;
}

/* ── Page filter bar ── */
.page-filter[b-zaq2isd8zm] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px;
    flex-wrap: wrap;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border);
}
.page-filter .toolbar-search[b-zaq2isd8zm] { width: 200px; margin-right: 0; flex: 0 0 auto; }
.page-filter .cmbgt-root[b-zaq2isd8zm] { flex: 0 0 auto; }
.page-filter .cmbgt-shell[b-zaq2isd8zm],
.page-filter .inputd-shell[b-zaq2isd8zm] {
    min-height: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.page-filter .cmbgt-shell:hover:not(.disabled):not(.readonly)[b-zaq2isd8zm],
.page-filter .cmbgt-shell:focus-within[b-zaq2isd8zm],
.page-filter .inputd-shell:focus-within[b-zaq2isd8zm] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.page-filter .cmbgt-shell-main[b-zaq2isd8zm] { padding-left: 10px; }
.page-filter .cmbgt-shell-label[b-zaq2isd8zm],
.page-filter .inputd-input[b-zaq2isd8zm] {
    font-size: 13px;
    color: var(--text-main);
}
.page-filter .cmbgt-shell-label.is-placeholder[b-zaq2isd8zm] { color: var(--text-muted); }
.page-filter .form-control[b-zaq2isd8zm],
.page-filter .inputd-input[b-zaq2isd8zm] {
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 32px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* ── InputD trong toolbar chính ── */
.page-toolbar .form-control[b-zaq2isd8zm],
.page-toolbar .inputd-input[b-zaq2isd8zm] {
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}
.page-toolbar .inputd-shell[b-zaq2isd8zm] { height: 34px !important; }

/* ── Batch send button color ── */
.ike-btn-send-batch[b-zaq2isd8zm] {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}
.ike-btn-send-batch:hover[b-zaq2isd8zm] {
    background: #047857 !important;
    border-color: #047857 !important;
}
.ike-btn-send-batch:disabled[b-zaq2isd8zm] {
    background: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

/* ── Soft red outline cancel button ── */
.btn-outline-danger-soft[b-zaq2isd8zm] {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: transparent !important;
}
.btn-outline-danger-soft:hover[b-zaq2isd8zm] {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}