@import '_content/BlazorDateRangePicker/BlazorDateRangePicker.iitr8bszy4.bundle.scp.css';

/* /Components/FIN/ModalList_Ingredient.razor.rz.scp.css */
/* ModalList_Ingredient.razor.css — Thành phần định lượng (prefix ig-) */

/* Tô xen kẽ theo sản phẩm: các dòng thành phần của cùng 1 sản phẩm cùng màu (đậm hơn table-light để dễ phân biệt) */
.ig-alt[b-swh73rce22] {
    --vz-table-bg: rgba(var(--vz-primary-rgb), .08);
}
/* /Components/FO/ModalList_PriceBook.razor.rz.scp.css */
/* ModalList_PriceBook.razor.css — Thiết lập bảng giá (prefix pb-) */

/* Ma trận giá: cột hạng phòng/chỗ cố định (sticky-col trong common.css); ô giá đủ rộng cho số tiền khi cuộn ngang trên điện thoại */
.pb-matrix .pb-class-col[b-r38473jdmo] {
    min-width: 170px;
}

    .pb-matrix .pb-class-col > div[b-r38473jdmo] {
        max-width: 260px;
    }

.pb-matrix .pb-price-col[b-r38473jdmo] {
    min-width: 130px;
}

.pb-matrix .pb-count-col[b-r38473jdmo] {
    width: 1%;
    white-space: nowrap;
}
/* /Components/HR/DocumentLink.razor.rz.scp.css */
/* File đính kèm của giấy tờ: icon theo loại file + tên gốc, quá dài thì "..." */
.doc-file-link[b-3t1ox2at18] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: min(100%, 14rem);
    color: var(--vz-body-color);
    text-decoration: none;
}

    .doc-file-link i[b-3t1ox2at18] {
        flex-shrink: 0;
        font-size: 1.125rem;
    }

    .doc-file-link:hover .doc-file-name[b-3t1ox2at18] {
        color: var(--vz-link-color);
        text-decoration: underline;
    }

.doc-file-name[b-3t1ox2at18] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/HR/ModalView_DayOffDetail.razor.rz.scp.css */
/* ============================================================
   ModalView_DayOffDetail.razor.css — Bảng tổng hợp ngày nghỉ (prefix lb-)
   - Cùng bộ token với AttendanceRecord/Contact: màu lấy từ biến app (--vz-*).
   - Mỗi loại nghỉ một tông màu cố định (màu ca DO/CLDO/CLPH/AL trong Bảng ca đều đỏ nên không dùng).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
.lb-modal[b-92qjj1siq7] {
    --c-ink: var(--vz-body-color);
    --c-muted: var(--vz-secondary-color);
    --c-line: var(--vz-border-color);
    --c-surface: var(--vz-body-bg);
    --c-card: var(--vz-secondary-bg);
    --c-brand: var(--vz-primary);
    --c-brand-rgb: var(--vz-primary-rgb);
    --c-hover: rgba(var(--vz-primary-rgb), .05);
    --c-hover-line: rgba(var(--vz-primary-rgb), .35);
    --c-r-md: 12px;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    color: var(--c-ink);
}

.lb-dialog[b-92qjj1siq7] {
    max-width: 560px;
}

.num[b-92qjj1siq7] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ---------- 2. Header ---------- */
.lb-head[b-92qjj1siq7] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-card);
}

.lb-head-icon[b-92qjj1siq7] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--c-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--vz-success-bg-subtle);
    color: var(--vz-success-text-emphasis);
}

.lb-head-main[b-92qjj1siq7] {
    flex: 1 1 auto;
    min-width: 0;
}

.lb-title[b-92qjj1siq7] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.lb-sub[b-92qjj1siq7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .15rem;
    font-size: 12.5px;
    color: var(--c-muted);
}

    .lb-sub > span + span[b-92qjj1siq7]::before {
        content: "·";
        margin: 0 .4rem;
    }

.lb-sub-name[b-92qjj1siq7] {
    font-weight: 600;
    color: var(--c-ink);
}

/* ---------- 3. Nội dung ---------- */
.lb-body[b-92qjj1siq7] {
    padding: 1rem 1.1rem 1.2rem;
    background: var(--c-surface);
}

.lb-state[b-92qjj1siq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 180px;
    text-align: center;
    font-size: 13px;
    color: var(--c-muted);
}

    .lb-state > i[b-92qjj1siq7] {
        font-size: 22px;
        color: var(--vz-warning);
    }

.lb-retry[b-92qjj1siq7] {
    height: 32px;
    padding: 0 .9rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-card);
    color: var(--c-ink);
    font-size: 12.5px;
    font-weight: 500;
    transition: background-color .15s, border-color .15s;
}

    .lb-retry:hover[b-92qjj1siq7] {
        border-color: var(--c-hover-line);
        background: var(--c-hover);
    }

.lb-hint[b-92qjj1siq7] {
    margin: .7rem 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-muted);
}

.lb-section-title[b-92qjj1siq7] {
    margin: 1.1rem 0 .55rem;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* Mã loại nghỉ: mỗi loại một tông cố định */
.lb-code[b-92qjj1siq7] {
    flex: 0 0 auto;
    min-width: 46px;
    height: 26px;
    padding: 0 .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vz-border-radius);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(var(--vz-body-color-rgb), .07);
    color: var(--c-muted);
}

    .lb-code.is-off[b-92qjj1siq7] {
        background: var(--vz-warning-bg-subtle);
        color: var(--vz-warning-text-emphasis);
    }

    .lb-code.is-do[b-92qjj1siq7] {
        background: var(--vz-primary-bg-subtle);
        color: var(--vz-primary-text-emphasis);
    }

    .lb-code.is-clph[b-92qjj1siq7] {
        background: var(--vz-danger-bg-subtle);
        color: var(--vz-danger-text-emphasis);
    }

    .lb-code.is-cldo[b-92qjj1siq7] {
        background: var(--vz-info-bg-subtle);
        color: var(--vz-info-text-emphasis);
    }

    .lb-code.is-al[b-92qjj1siq7] {
        background: var(--vz-success-bg-subtle);
        color: var(--vz-success-text-emphasis);
    }

/* ---------- 4. Đăng ký nghỉ (OFF) ---------- */
.lb-off[b-92qjj1siq7] {
    padding: .85rem .95rem;
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-md);
    background: var(--c-card);
}

    .lb-off.has-days[b-92qjj1siq7] {
        border-color: rgba(var(--vz-warning-rgb), .45);
        background: linear-gradient(180deg, rgba(var(--vz-warning-rgb), .07), var(--c-card) 70%);
    }

.lb-off-head[b-92qjj1siq7] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.lb-off-main[b-92qjj1siq7] {
    flex: 1 1 auto;
    min-width: 0;
}

.lb-off-title[b-92qjj1siq7] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.lb-off-sub[b-92qjj1siq7] {
    margin-top: .1rem;
    font-size: 12px;
    color: var(--c-muted);
}

.lb-off-count[b-92qjj1siq7] {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-size: 12.5px;
    color: var(--c-muted);
}

    .lb-off-count > b[b-92qjj1siq7] {
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        color: var(--c-ink);
    }

.lb-off.has-days .lb-off-count > b[b-92qjj1siq7] {
    color: var(--vz-warning-text-emphasis);
}

.lb-dates[b-92qjj1siq7] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .8rem;
}

.lb-date[b-92qjj1siq7] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 28px;
    padding: 0 .6rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-card);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .lb-date.is-ph[b-92qjj1siq7] {
        border-color: rgba(var(--vz-danger-rgb), .35);
    }

.lb-date-wd[b-92qjj1siq7] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c-muted);
}

.lb-date-tag[b-92qjj1siq7] {
    padding: 0 .3rem;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--vz-warning-bg-subtle);
    color: var(--vz-warning-text-emphasis);
}

    .lb-date-tag.is-ph[b-92qjj1siq7] {
        background: var(--vz-danger-bg-subtle);
        color: var(--vz-danger-text-emphasis);
    }

/* ---------- 5. Số dư từng loại nghỉ ---------- */
.lb-grid[b-92qjj1siq7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.lb-card[b-92qjj1siq7] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-md);
    background: var(--c-card);
}

.lb-card-head[b-92qjj1siq7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.lb-card-name[b-92qjj1siq7] {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-card-balance[b-92qjj1siq7] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-size: 12.5px;
    color: var(--c-muted);
}

    .lb-card-balance > b[b-92qjj1siq7] {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--c-ink);
    }

    .lb-card-balance.is-negative > b[b-92qjj1siq7] {
        color: var(--vz-danger-text-emphasis);
    }

/* Thanh đã dùng / tổng */
.lb-bar[b-92qjj1siq7] {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--vz-body-color-rgb), .08);
}

    .lb-bar > span[b-92qjj1siq7] {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--c-muted);
        transition: width .3s;
    }

.lb-card.is-do .lb-bar > span[b-92qjj1siq7] {
    background: var(--vz-primary);
}

.lb-card.is-clph .lb-bar > span[b-92qjj1siq7] {
    background: var(--vz-danger);
}

.lb-card.is-cldo .lb-bar > span[b-92qjj1siq7] {
    background: var(--vz-info);
}

.lb-card.is-al .lb-bar > span[b-92qjj1siq7] {
    background: var(--vz-success);
}

.lb-card-meta[b-92qjj1siq7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .1rem .5rem;
    font-size: 12px;
    color: var(--c-muted);
}

    /* Nhãn và số luôn đi liền nhau; thẻ hẹp thì hai cặp tự xuống dòng */
    .lb-card-meta > span[b-92qjj1siq7] {
        white-space: nowrap;
    }

    .lb-card-meta b[b-92qjj1siq7] {
        font-weight: 600;
        color: var(--c-ink);
    }

/* ---------- 6. Điện thoại ---------- */
@media (max-width: 575.98px) {
    .lb-head[b-92qjj1siq7],
    .lb-body[b-92qjj1siq7] {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .lb-off-head[b-92qjj1siq7] {
        flex-wrap: wrap;
    }

    /* Họ tên một dòng riêng, mã NV · kỳ ở dòng dưới (không để dòng mới bắt đầu bằng dấu ·) */
    .lb-sub-name[b-92qjj1siq7] {
        flex-basis: 100%;
    }

        .lb-sub > .lb-sub-name + span[b-92qjj1siq7]::before {
            content: none;
        }

    /* Thẻ hẹp: tên loại nghỉ xuống dòng thay vì bị cắt */
    .lb-card-head[b-92qjj1siq7] {
        align-items: flex-start;
    }

    .lb-card-name[b-92qjj1siq7] {
        white-space: normal;
        line-height: 1.3;
        padding-top: .2rem;
    }
}

@media (max-width: 359.98px) {
    .lb-grid[b-92qjj1siq7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/SYSTEM/AppUpdate.razor.rz.scp.css */
/* ============================================================
 * Màn hình cập nhật phiên bản mới (_newVersionAvailable)
 * ============================================================ */

/* Phủ kín app phía sau (nền đặc), thẻ ở giữa; nằm trên cả popup license của MainLayout (9998/10000) */
.nk-update[b-d7ncr6b1sj] {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 15% 10%, rgba(38, 127, 195, .16), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(33, 48, 100, .14), transparent 45%),
        #f4f6fb;
    animation: nk-update-fade-b-d7ncr6b1sj .25s ease-out;
}

.nk-update-card[b-d7ncr6b1sj] {
    width: 100%;
    max-width: 420px;
    padding: 36px 28px 24px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(33, 48, 100, .28), 0 2px 6px rgba(33, 48, 100, .06);
    animation: nk-update-rise-b-d7ncr6b1sj .35s cubic-bezier(.2, .8, .2, 1);
}

/* Biểu tượng + vòng sóng lan tỏa */
.nk-update-icon[b-d7ncr6b1sj] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #267fc3, #213064);
    border-radius: 22px;
    box-shadow: 0 12px 24px -8px rgba(38, 127, 195, .55);
}

    .nk-update-icon[b-d7ncr6b1sj]::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 2px solid rgba(38, 127, 195, .35);
        border-radius: 26px;
        animation: nk-update-pulse-b-d7ncr6b1sj 1.8s ease-out infinite;
    }

    .nk-update-icon i[b-d7ncr6b1sj] {
        animation: nk-update-float-b-d7ncr6b1sj 1.6s ease-in-out infinite;
    }

    .nk-update-icon.is-done[b-d7ncr6b1sj] {
        background: linear-gradient(135deg, #34c38f, #0ab39c);
        box-shadow: 0 12px 24px -8px rgba(10, 179, 156, .55);
    }

        .nk-update-icon.is-done[b-d7ncr6b1sj]::before {
            border-color: rgba(10, 179, 156, .35);
        }

        .nk-update-icon.is-done i[b-d7ncr6b1sj] {
            animation: nk-update-pop-b-d7ncr6b1sj .4s cubic-bezier(.2, 1.4, .4, 1);
        }

.nk-update-title[b-d7ncr6b1sj] {
    margin-bottom: 6px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2a44;
}

.nk-update-desc[b-d7ncr6b1sj] {
    margin-bottom: 16px;
    font-size: .875rem;
    color: #7a8499;
}

/* Phiên bản đang dùng → phiên bản mới */
.nk-update-version[b-d7ncr6b1sj] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin-bottom: 24px;
    padding: 5px 14px;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    background: rgba(38, 127, 195, .08);
    border: 1px solid rgba(38, 127, 195, .18);
    border-radius: 999px;
}

    .nk-update-version > i[b-d7ncr6b1sj] {
        font-size: .75rem;
        color: #9aa3b5;
    }

.nk-ver-label[b-d7ncr6b1sj] {
    color: #7a8499;
}

.nk-ver-old[b-d7ncr6b1sj] {
    color: #9aa3b5;
}

.nk-ver-new[b-d7ncr6b1sj] {
    font-weight: 600;
    color: #267fc3;
}

/* Thanh tiến trình */
.nk-update-track[b-d7ncr6b1sj] {
    height: 8px;
    overflow: hidden;
    background: #edf1f7;
    border-radius: 999px;
}

.nk-update-fill[b-d7ncr6b1sj] {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #267fc3, #4fb3f6);
    border-radius: inherit;
    transition: width .2s linear;
}

    /* Ánh sáng chạy trên thanh */
    .nk-update-fill[b-d7ncr6b1sj]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
        transform: translateX(-100%);
        animation: nk-update-shimmer-b-d7ncr6b1sj 1.2s linear infinite;
    }

.nk-update-status[b-d7ncr6b1sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: .8125rem;
    text-align: left;
    color: #6b7489;
}

.nk-update-percent[b-d7ncr6b1sj] {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1f2a44;
}

.nk-update-progress.is-done .nk-update-fill[b-d7ncr6b1sj] {
    background: linear-gradient(90deg, #0ab39c, #34c38f);
}

    .nk-update-progress.is-done .nk-update-fill[b-d7ncr6b1sj]::after {
        display: none;
    }

.nk-update-progress.is-done .nk-update-status[b-d7ncr6b1sj],
.nk-update-progress.is-done .nk-update-percent[b-d7ncr6b1sj] {
    color: #0ab39c;
}

@keyframes nk-update-fade-b-d7ncr6b1sj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nk-update-rise-b-d7ncr6b1sj {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes nk-update-pulse-b-d7ncr6b1sj {
    0% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes nk-update-float-b-d7ncr6b1sj {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes nk-update-pop-b-d7ncr6b1sj {
    from { transform: scale(.4); }
    to { transform: scale(1); }
}

@keyframes nk-update-shimmer-b-d7ncr6b1sj {
    to { transform: translateX(100%); }
}

@media (max-width: 400px) {
    .nk-update-card[b-d7ncr6b1sj] {
        padding: 32px 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nk-update[b-d7ncr6b1sj],
    .nk-update *[b-d7ncr6b1sj] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
 * Popup cài đặt ứng dụng (#pwaInstallModal) — logic ở site.js §16
 * ============================================================ */

.pwa-install[b-hoxq43pdft] {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(33, 48, 100, .35), 0 2px 6px rgba(33, 48, 100, .06);
}

    .pwa-install .modal-body[b-hoxq43pdft] {
        padding: 28px 20px 20px;
        background: radial-gradient(circle at 50% -20%, rgba(38, 127, 195, .14), transparent 55%) no-repeat, #fff;
    }

/* Nút X góc phải (đóng = để sau): đứng yên trên modal-content, không cuộn theo ảnh */
.pwa-install-close[b-hoxq43pdft] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1rem;
    color: #7a8499;
    background: rgba(243, 245, 249, .92);
    border: 0;
    border-radius: 50%;
}

    .pwa-install-close:hover[b-hoxq43pdft] {
        color: #1f2a44;
        background: #e9edf3;
    }

/* Biểu tượng + tiêu đề (cùng kiểu màn hình cập nhật AppUpdate) */
.pwa-install-icon[b-hoxq43pdft] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, #267fc3, #213064);
    border-radius: 20px;
    box-shadow: 0 12px 24px -8px rgba(38, 127, 195, .55);
}

.pwa-install-title[b-hoxq43pdft] {
    margin-bottom: 16px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2a44;
}

/* Lợi ích khi cài */
.pwa-perks[b-hoxq43pdft] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.pwa-perk[b-hoxq43pdft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: .75rem;
    line-height: 1.35;
    text-wrap: balance;
    color: #4b5568;
    background: #f5f8fc;
    border-radius: 14px;
}

.pwa-perk-icon[b-hoxq43pdft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: .95rem;
    color: #267fc3;
    background: rgba(38, 127, 195, .12);
    border-radius: var(--vz-border-radius);
}

/* Android: cài một chạm (.d-none của Bootstrap có !important nên vẫn ẩn được) */
.pwa-install-now[b-hoxq43pdft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 18px;
    padding: 11px 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #34c38f, #0ab39c);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 20px -8px rgba(10, 179, 156, .6);
}

    .pwa-install-now:hover[b-hoxq43pdft],
    .pwa-install-now:focus[b-hoxq43pdft],
    .pwa-install-now:active[b-hoxq43pdft] {
        color: #fff;
        filter: brightness(1.05);
    }

/* Mở trong Zalo/Facebook */
.pwa-inapp[b-hoxq43pdft] {
    margin-bottom: 18px;
    padding: 14px;
    text-align: left;
    background: #fff8ec;
    border: 1px solid #fde3b4;
    border-radius: 14px;
}

.pwa-inapp-head[b-hoxq43pdft] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: #8a5a00;
}

.pwa-inapp-icon[b-hoxq43pdft] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: .8rem;
    color: #d48806;
    background: #ffe7bd;
    border-radius: 50%;
}

.pwa-inapp-text[b-hoxq43pdft] {
    margin-bottom: 10px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6b5a3a;
}

.pwa-inapp-link[b-hoxq43pdft] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    background: #fff;
    border: 1px solid #f0dcb3;
    border-radius: 999px;
}

    .pwa-inapp-link:focus-within[b-hoxq43pdft] {
        border-color: rgba(38, 127, 195, .5);
        box-shadow: 0 0 0 3px rgba(38, 127, 195, .12);
    }

    .pwa-inapp-link > i[b-hoxq43pdft] {
        font-size: .8125rem;
        color: #b08a4a;
    }

    .pwa-inapp-link input[b-hoxq43pdft] {
        flex: 1;
        min-width: 0;
        padding: 0;
        font-size: .8125rem;
        color: #4b5568;
        background: transparent;
        border: 0;
        outline: 0;
    }

    .pwa-inapp-link .btn[b-hoxq43pdft] {
        flex-shrink: 0;
        padding: 5px 12px;
        border-radius: 999px;
    }

/* Ảnh hướng dẫn */
.pwa-guide-head[b-hoxq43pdft] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.pwa-guide-title[b-hoxq43pdft] {
    font-size: .8125rem;
    font-weight: 600;
    color: #1f2a44;
}

.pwa-guide-hint[b-hoxq43pdft] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #9aa3b5;
}

.pwa-guide[b-hoxq43pdft] {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: none;
    border: 1px solid #e9edf3;
    border-radius: 14px;
}

    .pwa-guide img[b-hoxq43pdft] {
        display: block;
        width: 100%;
        height: auto;
    }

/* Xem ảnh toàn màn hình: nằm trong .modal (position: fixed, không transform) nên phủ cả màn hình */
.pwa-viewer[b-hoxq43pdft] {
    position: fixed;
    inset: 0;
    z-index: 2;
    background: rgba(15, 20, 35, .94);
    animation: pwa-viewer-in-b-hoxq43pdft .2s ease-out;
}

.pwa-viewer-scroll[b-hoxq43pdft] {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

    /* Vừa bề ngang màn hình điện thoại, căn giữa theo chiều dọc (margin: auto không cắt mép trên khi ảnh cao hơn màn hình) */
    .pwa-viewer-scroll img[b-hoxq43pdft] {
        display: block;
        width: 100%;
        height: auto;
        margin: auto;
    }

.pwa-viewer-close[b-hoxq43pdft] {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 1.15rem;
    color: #1f2a44;
    background: rgba(255, 255, 255, .95);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

@keyframes pwa-viewer-in-b-hoxq43pdft {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
 * Popup license (_isSuspended): 1 = cảnh báo (đóng được), 2 = tạm ngừng dịch vụ (chặn hẳn)
 * ============================================================ */

.nk-license[b-hoxq43pdft] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    animation: nk-license-fade-b-hoxq43pdft .25s ease-out;
}

    /* Cảnh báo: thấy mờ app phía sau */
    .nk-license.is-alert[b-hoxq43pdft] {
        z-index: 9998;
        background: rgba(244, 246, 251, .78);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Tạm ngừng: nền đặc che hẳn app */
    .nk-license.is-suspended[b-hoxq43pdft] {
        z-index: 10000;
        background:
            radial-gradient(circle at 15% 10%, rgba(240, 101, 72, .12), transparent 45%),
            radial-gradient(circle at 85% 90%, rgba(33, 48, 100, .12), transparent 45%),
            #f4f6fb;
    }

.nk-license-card[b-hoxq43pdft] {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 36px 28px 24px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(33, 48, 100, .28), 0 2px 6px rgba(33, 48, 100, .06);
    animation: nk-license-rise-b-hoxq43pdft .35s cubic-bezier(.2, .8, .2, 1);
}

.nk-license-close[b-hoxq43pdft] {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1rem;
    color: #7a8499;
    background: #f3f5f9;
    border: 0;
    border-radius: 50%;
}

    .nk-license-close:hover[b-hoxq43pdft] {
        color: #1f2a44;
        background: #e9edf3;
    }

/* Biểu tượng + vòng sóng (cùng kiểu màn hình cập nhật) */
.nk-license-icon[b-hoxq43pdft] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #fff;
    border-radius: 22px;
}

    .nk-license-icon[b-hoxq43pdft]::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 2px solid currentColor;
        border-radius: 26px;
        opacity: 0;
        animation: nk-license-pulse-b-hoxq43pdft 1.8s ease-out infinite;
    }

    .nk-license-icon.is-warning[b-hoxq43pdft] {
        background: linear-gradient(135deg, #f7b84b, #f1963b);
        box-shadow: 0 12px 24px -8px rgba(241, 150, 59, .6);
    }

        .nk-license-icon.is-warning[b-hoxq43pdft]::before {
            border-color: rgba(247, 184, 75, .55);
        }

    .nk-license-icon.is-danger[b-hoxq43pdft] {
        background: linear-gradient(135deg, #f06548, #c0392b);
        box-shadow: 0 12px 24px -8px rgba(240, 101, 72, .6);
    }

        .nk-license-icon.is-danger[b-hoxq43pdft]::before {
            border-color: rgba(240, 101, 72, .45);
        }

.nk-license-title[b-hoxq43pdft] {
    margin-bottom: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2a44;
}

.nk-license-desc[b-hoxq43pdft] {
    margin-bottom: 22px;
    font-size: .875rem;
    line-height: 1.55;
    color: #6b7489;
    text-wrap: balance;
}

/* Nút liên hệ: hotline nổi bật, email viền nhẹ */
.nk-license-actions[b-hoxq43pdft] {
    display: grid;
    gap: 10px;
}

.nk-license-btn[b-hoxq43pdft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    font-weight: 600;
    color: #213064;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 999px;
}

    .nk-license-btn:hover[b-hoxq43pdft] {
        color: #213064;
        background: #f5f8fc;
    }

    .nk-license-btn.is-primary[b-hoxq43pdft] {
        color: #fff;
        background: linear-gradient(135deg, #267fc3, #213064);
        border-color: transparent;
        box-shadow: 0 10px 20px -8px rgba(33, 48, 100, .55);
    }

        .nk-license-btn.is-primary:hover[b-hoxq43pdft] {
            color: #fff;
            filter: brightness(1.08);
        }

.nk-license-footer[b-hoxq43pdft] {
    margin-top: 24px;
    padding-top: 16px;
    font-size: .8125rem;
    color: #8a94a6;
    border-top: 1px dashed #e3e7ef;
}

.nk-license-company[b-hoxq43pdft] {
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #4b5568;
}

.nk-license-links[b-hoxq43pdft] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
}

    .nk-license-links a[b-hoxq43pdft] {
        color: inherit;
    }

        .nk-license-links a:hover[b-hoxq43pdft] {
            color: #267fc3;
        }

@keyframes nk-license-fade-b-hoxq43pdft {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nk-license-rise-b-hoxq43pdft {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes nk-license-pulse-b-hoxq43pdft {
    0% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

@media (max-width: 400px) {
    .nk-license-card[b-hoxq43pdft] {
        padding: 32px 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nk-license[b-hoxq43pdft],
    .nk-license *[b-hoxq43pdft] {
        animation: none !important;
    }
}
/* /Layout/Topbar.razor.rz.scp.css */
.notification-center-scroll[b-wy6xgf4uq7] {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.notification-center-item[b-wy6xgf4uq7] {
    border: 0;
    border-bottom: 1px solid var(--vz-border-color);
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.notification-center-item:last-child[b-wy6xgf4uq7] {
    border-bottom: 0;
}

.notification-center-item-unread[b-wy6xgf4uq7] {
    background-color: rgba(var(--vz-primary-rgb), 0.055);
}

.notification-center-item:hover[b-wy6xgf4uq7],
.notification-center-item:focus-visible[b-wy6xgf4uq7] {
    background-color: rgba(var(--vz-primary-rgb), 0.09);
}

.notification-center-title[b-wy6xgf4uq7] {
    color: var(--vz-heading-color);
}
/* /Pages/FIN/Cart.razor.rz.scp.css */
/* ============================================================
   Cart.razor.css — CSS isolation cho /FIN/Cart
   - Màu lấy từ biến app (--vz-*) → tự đổi theo theme & dark mode.
   - ::deep dùng cho phần tử do component con / JS sinh ra:
     EditForm (<form>), InputTextArea, DebounceInput,
     Virtualize (spacer), bootstrap-select.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
.cart-page[b-i7kakgazv2],
.cart-modal[b-i7kakgazv2] {
    --c-offset: 172px; /* topbar + header + footer để tính chiều cao vùng cuộn */
    --c-ink: var(--vz-body-color);
    --c-muted: var(--vz-secondary-color);
    --c-line: var(--vz-border-color);
    --c-surface: var(--vz-body-bg);
    --c-card: var(--vz-secondary-bg);
    --c-brand: var(--vz-primary);
    --c-brand-rgb: var(--vz-primary-rgb);
    --c-brand-soft: var(--vz-primary-bg-subtle);
    --c-go: var(--vz-success);
    --c-go-strong: var(--vz-success-text-emphasis);
    --c-go-soft: var(--vz-success-bg-subtle);
    --c-red: var(--vz-danger);
    --c-red-rgb: var(--vz-danger-rgb);
    --c-red-soft: var(--vz-danger-bg-subtle);
    --c-amber: var(--vz-warning-text-emphasis);
    --c-amber-soft: var(--vz-warning-bg-subtle);
    --c-hover: rgba(var(--vz-primary-rgb), .05);
    --c-hover-line: rgba(var(--vz-primary-rgb), .35);
    --c-r-lg: 16px;
    --c-r-md: 12px;
    --c-r-sm: 10px;
    --c-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04);
    color: var(--c-ink);
}

.num[b-i7kakgazv2] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.min-w-0[b-i7kakgazv2] {
    min-width: 0;
}

/* Không đặt outline :focus-visible chung cho cả trang: ô nhập khớp :focus-visible cả khi click → viền đậm chồng viền
   (trông thô); còn a/button thì app.min.css đã tắt outline (!important). Mỗi ô nhập tự có kiểu focus mềm bên dưới. */

/* ---------- 2. Panel ---------- */
.cart-panel[b-i7kakgazv2] {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-lg);
    box-shadow: var(--c-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 85px);
}

/* ---------- 3. Nút ---------- */
.cart-btn[b-i7kakgazv2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: var(--c-r-sm);
    padding: .5rem .9rem;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .08s, box-shadow .15s;
}

    .cart-btn:active[b-i7kakgazv2] {
        transform: scale(.98);
    }

.cart-btn-lg[b-i7kakgazv2] {
    padding: .65rem 1.3rem;
    font-size: 14.5px;
    border-radius: var(--c-r-md);
}

.cart-btn-go[b-i7kakgazv2] {
    background: var(--c-go-strong);
    color: #fff;
}

    .cart-btn-go:hover[b-i7kakgazv2] {
        filter: brightness(1.08);
        color: #fff;
        box-shadow: 0 4px 14px rgba(var(--vz-success-rgb), .28);
    }

.cart-btn-ghost[b-i7kakgazv2] {
    background: var(--c-card);
    border-color: var(--c-line);
    color: var(--c-ink);
}

    .cart-btn-ghost:hover[b-i7kakgazv2] {
        border-color: var(--c-hover-line);
        background: var(--c-hover);
        color: var(--c-ink);
    }

/* ---------- 4. Header của panel giỏ hàng ---------- */
.cart-head[b-i7kakgazv2] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
}

.cart-head-icon[b-i7kakgazv2] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--c-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--c-brand-soft);
    color: var(--c-brand);
}

.cart-head-title[b-i7kakgazv2] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.cart-head-sub[b-i7kakgazv2] {
    margin: .1rem 0 0;
    font-size: 12.5px;
    color: var(--c-muted);
}

.cart-count-badge[b-i7kakgazv2] {
    font-size: 11.5px;
    font-weight: 600;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: var(--c-brand-soft);
    color: var(--c-brand);
}

/* ---------- 5. Bảng giỏ hàng ---------- */
.cart-table-wrap[b-i7kakgazv2] {
    flex: 1 1 auto;
    overflow: auto;
    padding: .25rem .35rem;
}

.cart-table[b-i7kakgazv2] {
    margin: 0;
    color: var(--c-ink);
}

    .cart-table > thead th[b-i7kakgazv2] {
        top: 0;
        z-index: 2;
        background: var(--c-surface);
        border: 0;
        padding: .6rem .75rem;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--c-muted);
    }

    .cart-table > tbody td[b-i7kakgazv2] {
        border: 0;
        padding: .5rem .75rem;
        vertical-align: middle;
    }

    .cart-table > tbody tr[b-i7kakgazv2] {
        transition: background-color .12s;
    }

        .cart-table > tbody tr + tr td[b-i7kakgazv2] {
            border-top: 1px dashed var(--c-line);
        }

        .cart-table > tbody tr:hover[b-i7kakgazv2] {
            background: var(--c-hover);
        }

.cart-item-name[b-i7kakgazv2] {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
}

.cart-unit-chip[b-i7kakgazv2] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: var(--vz-border-radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--c-muted);
    background: rgba(var(--vz-body-color-rgb), .06);
}

/* Ô số lượng (input native trong razor → không cần ::deep) */
.cart-qty[b-i7kakgazv2] {
    width: 100%;
    max-width: 92px;
    height: 36px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1.5px solid var(--c-line);
    border-radius: var(--c-r-sm);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

    .cart-qty:hover[b-i7kakgazv2] {
        border-color: var(--c-hover-line);
    }

    .cart-qty:focus[b-i7kakgazv2] {
        background: var(--c-card);
        border-color: rgba(var(--c-brand-rgb), .4);
        box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
    }

/* Ô ghi chú (textarea native) */
.cart-note[b-i7kakgazv2] {
    width: 100%;
    min-height: 36px;
    resize: vertical;
    padding: .4rem .6rem;
    font-size: 13px;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1.5px solid var(--c-line);
    border-radius: var(--c-r-sm);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

    .cart-note[b-i7kakgazv2]::placeholder {
        color: var(--c-muted);
    }

    .cart-note:hover[b-i7kakgazv2] {
        border-color: var(--c-hover-line);
    }

    .cart-note:focus[b-i7kakgazv2] {
        background: var(--c-card);
        border-color: rgba(var(--c-brand-rgb), .4);
        box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
    }

/* Nút xóa dòng */
.cart-del[b-i7kakgazv2] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--c-r-sm);
    background: transparent;
    color: var(--c-red);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s, transform .08s;
}

    .cart-del:hover[b-i7kakgazv2] {
        background: var(--c-red-soft);
    }

    .cart-del:active[b-i7kakgazv2] {
        transform: scale(.92);
    }

/* ---------- 6. Footer (tổng kết + gửi yêu cầu) ---------- */
.cart-foot[b-i7kakgazv2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--c-line);
    background: var(--c-surface);
}

.cart-foot-summary[b-i7kakgazv2] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 1 1 auto;
}

.cart-sum-item[b-i7kakgazv2] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.cart-sum-label[b-i7kakgazv2] {
    font-size: 11.5px;
    color: var(--c-muted);
}

.cart-sum-value[b-i7kakgazv2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
}

.cart-sum-divider[b-i7kakgazv2] {
    width: 1px;
    align-self: stretch;
    background: var(--c-line);
}

/* ---------- 7. Cột danh mục mặt hàng ---------- */
.cart-catalog-head[b-i7kakgazv2] {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--c-line);
}

.cart-search[b-i7kakgazv2] {
    position: relative;
}

    .cart-search > i[b-i7kakgazv2] {
        position: absolute;
        left: .9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-muted);
        font-size: 15px;
        pointer-events: none;
        z-index: 1;
    }

    /* DebounceInput tự render <input> → ::deep */
    .cart-search[b-i7kakgazv2]  .form-control {
        height: 44px;
        padding-left: 2.5rem;
        border-radius: var(--c-r-md);
        border: 1px solid var(--c-line);
        background: var(--c-surface);
        color: var(--c-ink);
        font-size: 14px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }

        .cart-search[b-i7kakgazv2]  .form-control:focus {
            outline: none;
            background: var(--c-card);
            border-color: rgba(var(--c-brand-rgb), .4);
            box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
        }

    .cart-search:focus-within > i[b-i7kakgazv2] {
        color: var(--c-brand);
    }

.cart-catalog-body[b-i7kakgazv2] {
    flex: 1 1 auto;
    overflow: auto;
    padding: .35rem;
}

/* Dòng sản phẩm */
.cart-prod[b-i7kakgazv2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: var(--c-r-md);
    cursor: pointer;
    transition: background-color .12s;
}

    .cart-prod:hover[b-i7kakgazv2] {
        background: var(--c-hover);
    }

        .cart-prod:hover .cart-prod-add[b-i7kakgazv2] {
            background: var(--c-brand);
            border-color: var(--c-brand);
            color: #fff;
        }

.cart-prod-thumb[b-i7kakgazv2] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--c-r-sm);
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
}

    .cart-prod-thumb img[b-i7kakgazv2] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.cart-prod-body[b-i7kakgazv2] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-prod-name[b-i7kakgazv2] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-prod-unit[b-i7kakgazv2] {
    margin-top: .1rem;
    font-size: 12px;
    color: var(--c-muted);
}

.cart-prod-add[b-i7kakgazv2] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    color: var(--c-muted);
    transition: all .15s;
}

/* ---------- 8. Empty state ---------- */
.cart-empty[b-i7kakgazv2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 240px;
}

.cart-empty-icon[b-i7kakgazv2] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--c-muted);
    background: rgba(var(--vz-body-color-rgb), .05);
    margin-bottom: .9rem;
}

.cart-empty-title[b-i7kakgazv2] {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
}

.cart-empty-sub[b-i7kakgazv2] {
    margin-top: .25rem;
    font-size: 13px;
    color: var(--c-muted);
}

/* ---------- 9. Modal ---------- */
.cart-modal-content[b-i7kakgazv2] {
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-lg);
    overflow: visible;
    background: var(--c-card);
}

.cart-modal-head[b-i7kakgazv2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
}

.cart-modal-icon[b-i7kakgazv2] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--c-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--c-go-soft);
    color: var(--c-go-strong);
}

.cart-modal-title[b-i7kakgazv2] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.cart-modal-sub[b-i7kakgazv2] {
    margin: .15rem 0 0;
    font-size: 12.5px;
    color: var(--c-muted);
}

.cart-modal-body[b-i7kakgazv2] {
    padding: 1.1rem;
}

.cart-label[b-i7kakgazv2] {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-muted);
    margin-bottom: .35rem;
}

/* InputTextArea / bootstrap-select sinh DOM riêng → ::deep */
.cart-modal[b-i7kakgazv2]  .cart-input.form-control {
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-sm);
    padding: .55rem .75rem;
    font-size: 14px;
    color: var(--c-ink);
    background-color: var(--c-card);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cart-modal[b-i7kakgazv2]  .cart-input.form-control:focus {
        outline: none;
        border-color: rgba(var(--c-brand-rgb), .4);
        box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
    }

.cart-modal[b-i7kakgazv2]  .cart-textarea {
    resize: vertical;
    min-height: 80px;
}

.cart-modal[b-i7kakgazv2]  .bootstrap-select > .dropdown-toggle {
    min-height: 42px;
    border-radius: var(--c-r-sm);
    border-color: var(--c-line);
    background-color: var(--c-card);
    color: var(--c-ink);
    transition: border-color .15s, box-shadow .15s;
}

    /* bootstrap-select mặc định vẽ vòng focus của trình duyệt (!important) → thay bằng kiểu giống ô nhập */
    .cart-modal[b-i7kakgazv2]  .bootstrap-select > .dropdown-toggle:focus,
    .cart-modal[b-i7kakgazv2]  .bootstrap-select > .dropdown-toggle.show {
        outline: none !important;
        border-color: rgba(var(--c-brand-rgb), .4) !important;
        box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
    }

.cart-modal[b-i7kakgazv2]  .validation-message {
    display: block;
    margin-top: .3rem;
    font-size: 12px;
    color: var(--c-red);
}

.cart-modal-foot[b-i7kakgazv2] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--c-line);
}

/* ---------- 10. Thanh cuộn mảnh ---------- */
.cart-table-wrap[b-i7kakgazv2]::-webkit-scrollbar,
.cart-catalog-body[b-i7kakgazv2]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cart-table-wrap[b-i7kakgazv2]::-webkit-scrollbar-thumb,
.cart-catalog-body[b-i7kakgazv2]::-webkit-scrollbar-thumb {
    background: rgba(var(--vz-body-color-rgb), .18);
    border-radius: 999px;
}

    .cart-table-wrap[b-i7kakgazv2]::-webkit-scrollbar-thumb:hover,
    .cart-catalog-body[b-i7kakgazv2]::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--vz-body-color-rgb), .3);
    }

/* ---------- 11. Responsive ---------- */
@media (max-width: 991.98px) {
    .cart-panel[b-i7kakgazv2] {
        height: auto;
        max-height: none;
    }

    .cart-cartcol .cart-table-wrap[b-i7kakgazv2] {
        max-height: 60vh;
    }

    .cart-catalog-body[b-i7kakgazv2] {
        max-height: 65vh;
    }
}
/* /Pages/FIN/POS.razor.rz.scp.css */
/* ============================================================
   POS.razor.css — CSS isolation cho /FIN/POS
   - Màu lấy từ biến app → tự đổi theo theme & dark mode.
   - ::deep dùng cho phần tử do component con / JS sinh ra:
     EditForm (<form>), InputTextArea, DebounceInput, DateRangePicker,
     Virtualize (spacer), bootstrap-select.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
.pos-page[b-munf1lc6e2],
.pos-modal[b-munf1lc6e2] {
    --pos-offset: 85px; /* chiều cao topbar + padding page-content */
    --pos-sticky-top: 70px; /* chiều cao topbar cố định; chỉnh nếu thanh ghim bị lệch */
    --pos-ink: var(--vz-body-color);
    --pos-muted: var(--vz-secondary-color);
    --pos-line: var(--vz-border-color);
    --pos-surface: var(--vz-body-bg);
    --pos-card: var(--vz-secondary-bg);
    --pos-card-rgb: var(--vz-secondary-bg-rgb);
    --pos-brand: var(--vz-primary);
    --pos-brand-rgb: var(--vz-primary-rgb);
    --pos-brand-soft: var(--vz-primary-bg-subtle);
    --pos-go: var(--vz-success);
    --pos-go-strong: var(--vz-success-text-emphasis);
    --pos-go-soft: var(--vz-success-bg-subtle);
    --pos-go-line: var(--vz-success-border-subtle);
    --pos-red: var(--vz-danger);
    --pos-red-soft: var(--vz-danger-bg-subtle);
    --pos-amber: var(--vz-warning-text-emphasis);
    --pos-amber-soft: var(--vz-warning-bg-subtle);
    --pos-hover: rgba(var(--vz-primary-rgb), .04);
    --pos-hover-line: rgba(var(--vz-primary-rgb), .35);
    --pos-r-lg: 16px;
    --pos-r-md: 12px;
    --pos-r-sm: 10px;
    color: var(--pos-ink);
}

.num[b-munf1lc6e2] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Không đặt outline :focus-visible chung cho cả trang: ô nhập khớp :focus-visible cả khi click → viền đậm chồng viền
   (trông thô); còn a/button thì app.min.css đã tắt outline (!important). Mỗi ô nhập tự có kiểu focus mềm bên dưới. */

.pos-muted[b-munf1lc6e2] {
    color: var(--pos-muted);
}

/* ---------- 2. Panel & nút ---------- */
.pos-panel[b-munf1lc6e2] {
    background: var(--pos-card);
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-lg);
    overflow: hidden;
}

.pos-btn[b-munf1lc6e2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: var(--pos-r-sm);
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .08s;
}

    .pos-btn:active[b-munf1lc6e2] {
        transform: scale(.98);
    }

    .pos-btn:disabled[b-munf1lc6e2] {
        opacity: .45;
        pointer-events: none;
    }

.pos-btn-go[b-munf1lc6e2] {
    background: var(--pos-go-strong);
    color: #fff;
}

    .pos-btn-go:hover[b-munf1lc6e2] {
        background: var(--pos-go);
        color: #fff;
    }

.pos-btn-ghost[b-munf1lc6e2] {
    background: var(--pos-card);
    border-color: var(--pos-line);
    color: var(--pos-ink);
}

    .pos-btn-ghost:hover[b-munf1lc6e2] {
        border-color: var(--pos-hover-line);
        background: var(--pos-hover);
        color: var(--pos-ink);
    }

.pos-btn-soft[b-munf1lc6e2] {
    background: var(--pos-brand-soft);
    color: var(--pos-brand);
}

    .pos-btn-soft:hover[b-munf1lc6e2] {
        background: rgba(var(--pos-brand-rgb), .22);
        color: var(--pos-brand);
    }

/* ---------- 3. Input ---------- */
/* ::deep vì InputTextArea / DateRangePicker tự render <textarea>/<input> */
.pos-page[b-munf1lc6e2]  .pos-input.form-control,
.pos-modal[b-munf1lc6e2]  .pos-input.form-control {
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-sm);
    padding: .6rem .8rem;
    font-size: 15px;
    color: var(--pos-ink);
    background-color: var(--pos-card);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

    .pos-page[b-munf1lc6e2]  .pos-input.form-control:focus,
    .pos-modal[b-munf1lc6e2]  .pos-input.form-control:focus {
        outline: none;
        border-color: rgba(var(--pos-brand-rgb), .4);
        box-shadow: 0 0 0 3px rgba(var(--pos-brand-rgb), .08);
    }

.pos-modal[b-munf1lc6e2]  .pos-input.is-money {
    text-align: right;
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.pos-label[b-munf1lc6e2] {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pos-muted);
    margin-bottom: .3rem;
}

.pos-search[b-munf1lc6e2] {
    position: relative;
}

    .pos-search i[b-munf1lc6e2] {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pos-muted);
        font-size: 18px;
        pointer-events: none;
        z-index: 1;
    }

    .pos-search[b-munf1lc6e2]  .form-control {
        padding-left: 2.5rem;
        height: 44px;
        border-radius: var(--pos-r-md);
        border: 1px solid var(--pos-line);
        background: var(--pos-surface);
        font-size: 14px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }

        .pos-search[b-munf1lc6e2]  .form-control:focus {
            outline: none;
            background: var(--pos-card);
            border-color: rgba(var(--pos-brand-rgb), .4);
            box-shadow: 0 0 0 3px rgba(var(--pos-brand-rgb), .08);
        }

    .pos-search:focus-within i[b-munf1lc6e2] {
        color: var(--pos-brand);
    }

/* bootstrap-select do JS sinh DOM → phải ::deep */

.pos-modal[b-munf1lc6e2]  .bootstrap-select {
    border-radius: var(--pos-r-sm);
}

    .pos-page[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle,
    .pos-modal[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle {
        min-height: 42px;
        border-radius: var(--pos-r-sm);
        border-color: var(--pos-line);
        background-color: var(--pos-card);
        color: var(--pos-ink);
        transition: border-color .15s, box-shadow .15s;
    }

        /* bootstrap-select mặc định vẽ vòng focus của trình duyệt (!important) → thay bằng kiểu giống ô nhập */
        .pos-page[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle:focus,
        .pos-page[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle.show,
        .pos-modal[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle:focus,
        .pos-modal[b-munf1lc6e2]  .bootstrap-select > .dropdown-toggle.show {
            outline: none !important;
            border-color: rgba(var(--pos-brand-rgb), .4) !important;
            box-shadow: 0 0 0 3px rgba(var(--pos-brand-rgb), .08);
        }

/* ---------- 4. Segmented tabs & chips ---------- */
.pos-seg[b-munf1lc6e2] {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0;
    list-style: none;
    background: var(--pos-surface);
    border-radius: var(--pos-r-md);
}

    .pos-seg .nav-item[b-munf1lc6e2] {
        flex: 1;
    }

    .pos-seg .nav-link[b-munf1lc6e2] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        border-radius: var(--vz-border-radius);
        padding: .55rem .75rem;
        color: var(--pos-muted);
        font-weight: 600;
        font-size: 14px;
        background: transparent;
        border: 0;
    }

        .pos-seg .nav-link:hover[b-munf1lc6e2] {
            color: var(--pos-ink);
        }

        .pos-seg .nav-link.active[b-munf1lc6e2] {
            background: var(--pos-card);
            color: var(--pos-ink);
            box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--pos-line);
        }

    .pos-seg .count[b-munf1lc6e2] {
        font-size: 11.5px;
        font-weight: 600;
        padding: .1rem .45rem;
        border-radius: 999px;
        background: rgba(var(--vz-body-color-rgb), .08);
    }

    .pos-seg .nav-link.active .count[b-munf1lc6e2] {
        background: var(--pos-go-soft);
        color: var(--pos-go-strong);
    }

.pos-chips[b-munf1lc6e2] {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow-x: auto;
    padding: .1rem 0 .3rem;
}

    .pos-chips .nav-link[b-munf1lc6e2] {
        flex: 0 0 auto;
        white-space: nowrap;
        border-radius: 999px;
        padding: .4rem .95rem;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--pos-ink);
        background: var(--pos-card);
        border: 1px solid var(--pos-line);
    }

        .pos-chips .nav-link:hover[b-munf1lc6e2] {
            border-color: var(--pos-hover-line);
            color: var(--pos-ink);
        }

        .pos-chips .nav-link.active[b-munf1lc6e2] {
            background: var(--pos-brand);
            border-color: var(--pos-brand);
            color: #fff;
        }

/* ---------- 5. Hóa đơn (phiếu tính tiền) ---------- */
.pos-ticket[b-munf1lc6e2] {
    display: flex;
    flex-direction: column;
}

.pos-ticket-top[b-munf1lc6e2] {
    padding: .9rem 1rem .75rem;
    border-bottom: 1px solid var(--pos-line);
}

.pos-vnum[b-munf1lc6e2] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.pos-ticket-list[b-munf1lc6e2] {
    flex: 1 1 auto;
    overflow: auto;
    padding: .25rem 0;
}

.pos-line[b-munf1lc6e2] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 1rem;
    cursor: pointer;
    transition: background-color .12s;
}

    .pos-line + .pos-line[b-munf1lc6e2] {
        border-top: 1px dashed var(--pos-line);
    }

    .pos-line:hover[b-munf1lc6e2] {
        background: var(--pos-hover);
    }

.pos-line-qty[b-munf1lc6e2] {
    flex: 0 0 auto;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .4rem;
    border-radius: var(--vz-border-radius);
    background: var(--pos-brand-soft);
    color: var(--pos-brand);
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-line-body[b-munf1lc6e2] {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-line-name[b-munf1lc6e2] {
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    word-break: break-word;
}

.pos-line-meta[b-munf1lc6e2] {
    font-size: 12.5px;
    color: var(--pos-muted);
    margin-top: .1rem;
}

.pos-line-note[b-munf1lc6e2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: 12px;
    color: var(--pos-amber);
    background: var(--pos-amber-soft);
    padding: .1rem .5rem;
    border-radius: var(--vz-border-radius);
}

.pos-line-amt[b-munf1lc6e2] {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14.5px;
}

    .pos-line-amt .disc[b-munf1lc6e2] {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--pos-red);
    }

.pos-line-del[b-munf1lc6e2] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: .05rem -.35rem 0 0;
    border: 0;
    border-radius: var(--vz-border-radius);
    background: transparent;
    color: var(--pos-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s, color .12s, opacity .12s;
}

    .pos-line-del:hover[b-munf1lc6e2] {
        background: var(--pos-red-soft);
        color: var(--pos-red);
    }

.pos-line.is-group[b-munf1lc6e2] {
    background: var(--pos-surface);
    padding: .45rem 1rem;
}

    .pos-line.is-group .pos-line-name[b-munf1lc6e2] {
        font-size: 12.5px;
        color: var(--pos-muted);
    }

/* đường xé phiếu — lỗ khuyết lấy màu nền trang */
.pos-tear[b-munf1lc6e2] {
    position: relative;
    height: 0;
    margin: 0 1rem;
    border-top: 2px dashed var(--pos-line);
}

    .pos-tear[b-munf1lc6e2]::before,
    .pos-tear[b-munf1lc6e2]::after {
        content: "";
        position: absolute;
        top: -10px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--pos-surface);
        border: 1px solid var(--pos-line);
    }

    .pos-tear[b-munf1lc6e2]::before {
        left: -26px;
    }

    .pos-tear[b-munf1lc6e2]::after {
        right: -26px;
    }

.pos-sum[b-munf1lc6e2] {
    padding: .8rem 1rem .4rem;
}

.pos-sum-row[b-munf1lc6e2] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13.5px;
    color: var(--pos-muted);
    padding: .1rem 0;
}

    .pos-sum-row.is-disc span:last-child[b-munf1lc6e2] {
        color: var(--pos-red);
    }

    .pos-sum-row.is-total[b-munf1lc6e2] {
        color: var(--pos-ink);
        margin-top: .35rem;
    }

        .pos-sum-row.is-total span:first-child[b-munf1lc6e2] {
            font-weight: 600;
            font-size: 14px;
        }

        .pos-sum-row.is-total span:last-child[b-munf1lc6e2] {
            font-weight: 700;
            font-size: 24px;
        }

.pos-tools[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    padding: .25rem .6rem .5rem;
}

.pos-tool[b-munf1lc6e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .55rem .2rem;
    border: 0;
    border-radius: var(--pos-r-sm);
    background: transparent;
    color: var(--pos-ink);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: background-color .12s;
}

    .pos-tool i[b-munf1lc6e2] {
        font-size: 17px;
        color: var(--pos-muted);
    }

    .pos-tool:hover[b-munf1lc6e2] {
        background: var(--pos-surface);
    }

    .pos-tool:disabled[b-munf1lc6e2] {
        opacity: .4;
        pointer-events: none;
    }

    .pos-tool.is-danger[b-munf1lc6e2],
    .pos-tool.is-danger i[b-munf1lc6e2] {
        color: var(--pos-red);
    }

    .pos-tool span[b-munf1lc6e2] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pos-paybar[b-munf1lc6e2] {
    padding: 0 1rem 1rem;
}

    .pos-paybar .pos-btn[b-munf1lc6e2] {
        width: 100%;
        justify-content: space-between;
        padding: .95rem 1.15rem;
        font-size: 16px;
        border-radius: var(--pos-r-md);
        box-shadow: 0 6px 16px -6px rgba(var(--vz-success-rgb), .55);
    }

.pos-empty[b-munf1lc6e2] {
    text-align: center;
    color: var(--pos-muted);
    padding: 2.5rem 1.25rem;
    font-size: 13.5px;
}

    .pos-empty .ico[b-munf1lc6e2] {
        width: 56px;
        height: 56px;
        margin: 0 auto .75rem;
        border-radius: 50%;
        background: var(--pos-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--pos-muted);
    }

    .pos-empty strong[b-munf1lc6e2] {
        display: block;
        color: var(--pos-ink);
        font-weight: 600;
        font-size: 14.5px;
        margin-bottom: .15rem;
    }


/* Màn hình chờ chọn điểm bán */
.pos-welcome[b-munf1lc6e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 2rem;
}

.pos-cal[b-munf1lc6e2] {
    width: 92px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--pos-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pos-card);
}

.pos-cal-m[b-munf1lc6e2] {
    background: var(--pos-brand-soft);
    color: var(--pos-brand);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: .3rem 0;
}

.pos-cal-d[b-munf1lc6e2] {
    font-size: 40px;
    font-weight: 700;
    color: var(--pos-ink);
    text-align: center;
    line-height: 1.1;
    padding: .5rem 0 .1rem;
}

.pos-cal-w[b-munf1lc6e2] {
    font-size: 12px;
    color: var(--pos-muted);
    text-align: center;
    padding-bottom: .5rem;
}

/* ---------- 6. Điểm bán ---------- */
.pos-hero[b-munf1lc6e2] {
    padding: 1.25rem 1.25rem .5rem;
}

    .pos-hero h4[b-munf1lc6e2] {
        font-weight: 700;
        margin: 0;
    }

.pos-outlets[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
}

.pos-outlet[b-munf1lc6e2] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    background: var(--pos-card);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

    .pos-outlet:hover[b-munf1lc6e2] {
        border-color: var(--pos-brand);
        background: var(--pos-hover);
    }

.pos-outlet-ico[b-munf1lc6e2] {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pos-brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-outlet-name[b-munf1lc6e2] {
    font-weight: 600;
    font-size: 15px;
    color: var(--pos-ink);
}

.pos-outlet .chev[b-munf1lc6e2] {
    margin-left: auto;
    color: var(--pos-muted);
}

/* ---------- 7. Phòng / bàn ---------- */
.pos-legend[b-munf1lc6e2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 12.5px;
    color: var(--pos-muted);
}

    .pos-legend .dot[b-munf1lc6e2] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: .35rem;
        vertical-align: middle;
    }

        .pos-legend .dot.is-idle[b-munf1lc6e2] {
            background: var(--pos-line);
            box-shadow: inset 0 0 0 1px var(--pos-muted);
        }

        .pos-legend .dot.is-open[b-munf1lc6e2] {
            background: var(--pos-go);
        }

.pos-zone-title[b-munf1lc6e2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-muted);
    margin: 1rem 0 .5rem;
}

    .pos-zone-title[b-munf1lc6e2]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--pos-line);
    }

.pos-rooms[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}

.pos-room[b-munf1lc6e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 118px;
    padding: .75rem .8rem .7rem 1rem;
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    background: var(--pos-card);
    text-align: left;
    color: var(--pos-ink);
    transition: border-color .15s, box-shadow .15s;
}

    .pos-room[b-munf1lc6e2]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--pos-muted);
        opacity: .35;
    }

    .pos-room:hover[b-munf1lc6e2] {
        border-color: var(--pos-hover-line);
        box-shadow: 0 4px 14px -8px rgba(0,0,0,.25);
    }

.pos-room-name[b-munf1lc6e2] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.pos-room-area[b-munf1lc6e2] {
    font-size: 12px;
    color: var(--pos-muted);
}

.pos-room-idle[b-munf1lc6e2] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 12.5px;
    color: var(--pos-muted);
}

.pos-room.is-open[b-munf1lc6e2] {
    background: var(--pos-go-soft);
    border-color: var(--pos-go-line);
}

    .pos-room.is-open[b-munf1lc6e2]::before {
        background: var(--pos-go);
        opacity: 1;
    }

.pos-room-info[b-munf1lc6e2] {
    font-size: 12px;
    color: var(--pos-ink);
    margin-top: .4rem;
    line-height: 1.55;
}

    .pos-room-info i[b-munf1lc6e2] {
        width: 14px;
        color: var(--pos-go-strong);
        margin-right: .2rem;
    }

.pos-room-amt[b-munf1lc6e2] {
    margin-top: auto;
    padding-top: .35rem;
    font-weight: 700;
    font-size: 15px;
    color: var(--pos-go-strong);
}

/* ---------- 8. Menu ---------- */
.pos-items[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
    padding: .25rem 0 .5rem;
}
    /* Spacer của <Virtualize> không có scope attribute → ::deep; kéo dài full hàng để không chiếm ô lưới */
    .pos-items[b-munf1lc6e2]  > div {
        grid-column: 1 / -1;
    }

.pos-item[b-munf1lc6e2] {
    display: flex;
    flex-direction: column;
    background: var(--pos-card);
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--pos-ink);
    transition: border-color .15s, box-shadow .15s, transform .08s;
}

    .pos-item:hover[b-munf1lc6e2] {
        border-color: var(--pos-hover-line);
        box-shadow: 0 8px 20px -12px rgba(0,0,0,.35);
        color: var(--pos-ink);
    }

    .pos-item:active[b-munf1lc6e2] {
        transform: scale(.98);
    }
/* Khung ảnh cố định tỉ lệ 1:1 bằng padding-top (ổn định cả trên WebView cũ),
   ảnh đặt tuyệt đối nên kích thước gốc của ảnh không làm khung cao/thấp */
.pos-item-img[b-munf1lc6e2] {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--pos-line);
}

    .pos-item-img img[b-munf1lc6e2] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: .6rem .6rem 1.9rem;
        display: block;
    }
/* Icon thay ảnh: luôn nằm dưới, ảnh (nền trắng) phủ lên. Ảnh rỗng/lỗi → icon lộ ra */
.pos-item-noimg[b-munf1lc6e2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.3rem;
    background: var(--pos-surface);
    color: var(--pos-muted);
    font-size: 2.6rem;
}

    .pos-item-noimg i[b-munf1lc6e2] {
        opacity: .5;
    }

.pos-item-img img[b-munf1lc6e2] {
    background: #fff;
}
    /* Ảnh chụp thật (đồ uống pha chế, món ăn) muốn phủ kín khung: thêm class is-cover cho <img> */
    .pos-item-img img.is-cover[b-munf1lc6e2] {
        object-fit: cover;
        padding: 0;
    }

.pos-item-price[b-munf1lc6e2] {
    position: absolute;
    left: .45rem;
    bottom: .45rem;
    padding: .2rem .5rem;
    border-radius: var(--vz-border-radius);
    background: rgba(var(--pos-card-rgb), .94);
    font-weight: 700;
    font-size: 13px;
    color: var(--pos-ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.pos-item-body[b-munf1lc6e2] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: .5rem .6rem .6rem;
}

.pos-item-name[b-munf1lc6e2] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    max-height: 2.7em;
}

.pos-item-unit[b-munf1lc6e2] {
    margin-top: auto;
    padding-top: .15rem;
    font-size: 12px;
    color: var(--pos-muted);
}

/* ---------- 9. Modal ---------- */
/* Selector đủ mạnh để thắng .modal-dialog:not(.modal-dialog-scrollable) .modal-header của Velzon */
.modal.pos-modal .modal-dialog .modal-content[b-munf1lc6e2] {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pos-card);
}
    /* <form> do EditForm render → ::deep */
    .modal.pos-modal .modal-dialog .modal-content[b-munf1lc6e2]  > form {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

.modal.pos-modal .modal-dialog .modal-header[b-munf1lc6e2] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pos-line);
}

.modal.pos-modal .modal-dialog .modal-title[b-munf1lc6e2] {
    font-weight: 700;
    font-size: 17px;
}

.modal.pos-modal .modal-dialog .modal-body[b-munf1lc6e2] {
    padding: 1.25rem;
    overflow-y: auto;
}

.modal.pos-modal .modal-dialog .modal-footer[b-munf1lc6e2] {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--pos-line);
    background: var(--pos-card);
}

    .modal.pos-modal .modal-dialog .modal-footer > div[b-munf1lc6e2] {
        margin: 0;
    }

.pos-stepper[b-munf1lc6e2] {
    display: flex;
    align-items: center;
    background: var(--pos-surface);
    border-radius: 999px;
    padding: 4px;
}

    .pos-stepper button[b-munf1lc6e2] {
        flex: 0 0 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: var(--pos-card);
        color: var(--pos-ink);
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
    }

        .pos-stepper button.is-plus[b-munf1lc6e2] {
            background: var(--pos-brand);
            color: #fff;
        }

    .pos-stepper input[b-munf1lc6e2] {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        text-align: center;
        font-weight: 700;
        font-size: 18px;
        color: var(--pos-ink);
    }

        .pos-stepper input:focus[b-munf1lc6e2] {
            outline: none;
        }

.pos-affix[b-munf1lc6e2] {
    position: relative;
}

.modal.pos-modal .pos-affix .pos-input.form-control[b-munf1lc6e2] {
    padding-right: 3.2rem;
}

.pos-affix > span[b-munf1lc6e2] {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pos-muted);
    pointer-events: none;
}

.pos-presets[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: .35rem;
}

    .pos-presets button[b-munf1lc6e2] {
        border: 1px solid var(--pos-line);
        background: var(--pos-card);
        border-radius: var(--vz-border-radius);
        padding: .45rem 0;
        font-weight: 600;
        font-size: 13.5px;
        color: var(--pos-ink);
    }

        .pos-presets button:hover[b-munf1lc6e2] {
            border-color: var(--pos-brand);
            color: var(--pos-brand);
        }

/* thanh toán */
.pos-due[b-munf1lc6e2] {
    background: var(--pos-brand);
    color: #fff;
    border-radius: var(--pos-r-lg);
    padding: 1rem 1.15rem;
}

    .pos-due small[b-munf1lc6e2] {
        color: rgba(255,255,255,.7);
        font-size: 12.5px;
    }

    .pos-due .amt[b-munf1lc6e2] {
        display: block;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.15;
        margin-top: .15rem;
    }

.pos-methods[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.pos-method[b-munf1lc6e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .85rem .3rem .75rem;
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    background: var(--pos-card);
    color: var(--pos-ink);
    font-weight: 600;
    font-size: 13px;
    transition: border-color .15s, background-color .15s;
}

    .pos-method i[b-munf1lc6e2] {
        font-size: 20px;
        color: var(--pos-muted);
    }

    .pos-method:hover[b-munf1lc6e2] {
        border-color: var(--pos-hover-line);
    }

    .pos-method.is-active[b-munf1lc6e2] {
        border-color: var(--pos-go);
        background: var(--pos-go-soft);
        box-shadow: inset 0 0 0 1px var(--pos-go);
    }

        .pos-method.is-active i[b-munf1lc6e2] {
            color: var(--pos-go-strong);
        }

        .pos-method.is-active[b-munf1lc6e2]::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--pos-go);
            box-shadow: 0 0 0 3px var(--pos-card);
        }

    .pos-method:disabled[b-munf1lc6e2] {
        opacity: .45;
    }

.pos-balance[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    background: var(--pos-card);
    overflow: hidden;
}

    .pos-balance > div[b-munf1lc6e2] {
        padding: .7rem .9rem;
    }

        .pos-balance > div + div[b-munf1lc6e2] {
            border-left: 1px solid var(--pos-line);
        }

    .pos-balance small[b-munf1lc6e2] {
        display: block;
        font-size: 12.5px;
        color: var(--pos-muted);
    }

    .pos-balance strong[b-munf1lc6e2] {
        font-size: 19px;
        font-weight: 700;
    }

    .pos-balance .is-change[b-munf1lc6e2] {
        background: var(--pos-go-soft);
    }

        .pos-balance .is-change strong[b-munf1lc6e2] {
            color: var(--pos-go-strong);
        }

    .pos-balance .is-debt[b-munf1lc6e2] {
        background: var(--pos-red-soft);
    }

        .pos-balance .is-debt small[b-munf1lc6e2],
        .pos-balance .is-debt strong[b-munf1lc6e2] {
            color: var(--pos-red);
        }

.pos-payrow[b-munf1lc6e2] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem .5rem .9rem;
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    background: var(--pos-card);
    margin-bottom: .5rem;
}

    .pos-payrow label[b-munf1lc6e2] {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        font-weight: 600;
        font-size: 14px;
        min-width: 7.5rem;
    }

        .pos-payrow label i[b-munf1lc6e2] {
            color: var(--pos-muted);
            width: 18px;
            text-align: center;
        }

.modal.pos-modal .pos-payrow[b-munf1lc6e2]  .pos-input.form-control {
    border-color: transparent;
    background: var(--pos-surface);
}

    /* Selector trên mạnh hơn kiểu focus chung của .pos-input → đặt lại viền khi focus */
    .modal.pos-modal .pos-payrow[b-munf1lc6e2]  .pos-input.form-control:focus {
        border-color: rgba(var(--pos-brand-rgb), .4);
        background: var(--pos-card);
    }

.pos-quick[b-munf1lc6e2] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .pos-quick button[b-munf1lc6e2] {
        border: 1px solid var(--pos-line);
        background: var(--pos-card);
        border-radius: 999px;
        padding: .35rem .85rem;
        font-weight: 600;
        font-size: 13.5px;
        color: var(--pos-brand);
    }

        .pos-quick button:hover[b-munf1lc6e2] {
            background: var(--pos-brand-soft);
            border-color: transparent;
        }

.pos-keypad[b-munf1lc6e2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

    .pos-keypad button[b-munf1lc6e2] {
        height: 52px;
        border: 1px solid var(--pos-line);
        border-radius: var(--pos-r-sm);
        background: var(--pos-card);
        font-size: 19px;
        font-weight: 600;
        color: var(--pos-ink);
        transition: background-color .1s;
    }

        .pos-keypad button:active[b-munf1lc6e2] {
            background: var(--pos-surface);
        }

    .pos-keypad .is-fn[b-munf1lc6e2] {
        grid-row: span 2;
        height: auto;
        color: var(--pos-muted);
        font-size: 18px;
    }

.pos-modal .form-switch .form-check-input[b-munf1lc6e2] {
    width: 2.4em;
    height: 1.3em;
}

    .pos-modal .form-switch .form-check-input:checked[b-munf1lc6e2] {
        background-color: var(--pos-go);
        border-color: var(--pos-go);
    }

.pos-invoice[b-munf1lc6e2] {
    border: 1px solid var(--pos-line);
    border-radius: var(--pos-r-md);
    padding: .85rem;
    background: var(--pos-surface);
}

/* ---------- 10. Thanh dưới cùng (mobile) ---------- */
.pos-mobile-bar[b-munf1lc6e2] {
    display: none;
}

/* ---------- 11. Desktop ≥ 992px ---------- */
@media (min-width: 992px) {
    .pos-fill[b-munf1lc6e2] {
        height: calc(100vh - var(--pos-offset));
    }

    .pos-flex[b-munf1lc6e2] {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .pos-grow[b-munf1lc6e2] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .pos-scroll-y[b-munf1lc6e2] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .pos-panel .tab-content[b-munf1lc6e2] {
        flex: 1 1 auto;
        min-height: 0;
    }

        .pos-panel .tab-content > .active[b-munf1lc6e2] {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
        }

    .pos-line-del[b-munf1lc6e2] {
        opacity: 0;
    }

        .pos-line:hover .pos-line-del[b-munf1lc6e2],
        .pos-line-del:focus-visible[b-munf1lc6e2] {
            opacity: 1;
        }
}

/* ---------- 12. Mobile / tablet dọc ---------- */
@media (max-width: 991.98px) {
    .pos-page[b-munf1lc6e2] {
        padding-bottom: 84px;
    }

    /* Ghim ô tìm món + bộ lọc nhóm khi cuộn menu (mobile) */
    .pos-panel.pos-menu-panel[b-munf1lc6e2] {
        overflow: visible; /* mở overflow để position:sticky bên trong hoạt động */
    }

    .pos-menu-head[b-munf1lc6e2] {
        position: sticky;
        top: var(--pos-sticky-top);
        z-index: 20;
        background: var(--pos-card);
        box-shadow: 0 6px 8px -8px rgba(0, 0, 0, .18);
    }

    .pos-paybar[b-munf1lc6e2] {
        display: none;
    }

    .pos-mobile-bar[b-munf1lc6e2] {
        display: flex;
        align-items: center;
        gap: .6rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(var(--pos-card-rgb), .96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--pos-line);
    }

        .pos-mobile-bar .pos-btn[b-munf1lc6e2] {
            height: 50px;
            border-radius: var(--pos-r-md);
        }

        .pos-mobile-bar .toggle[b-munf1lc6e2] {
            flex: 0 0 auto;
            position: relative;
        }

            .pos-mobile-bar .toggle .badge[b-munf1lc6e2] {
                position: absolute;
                top: -6px;
                right: -6px;
                font-size: 11px;
                min-width: 20px;
            }

        .pos-mobile-bar .pay[b-munf1lc6e2] {
            flex: 1 1 auto;
            justify-content: space-between;
        }

    .pos-rooms[b-munf1lc6e2],
    .pos-items[b-munf1lc6e2] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Modal toàn màn hình: bỏ bo góc đúng breakpoint của Bootstrap */
@media (max-width: 767.98px) {
    .modal.pos-modal .modal-fullscreen-md-down .modal-content[b-munf1lc6e2] {
        border-radius: 0;
    }
}

@media (max-width: 575.98px) {
    .modal.pos-modal .modal-fullscreen-sm-down .modal-content[b-munf1lc6e2] {
        border-radius: 0;
    }

    .modal.pos-modal .modal-dialog .modal-body[b-munf1lc6e2] {
        padding: 1rem;
    }

    .pos-due .amt[b-munf1lc6e2] {
        font-size: 28px;
    }

    .pos-payrow label[b-munf1lc6e2] {
        min-width: 6.25rem;
        font-size: 13px;
    }

    .pos-keypad button[b-munf1lc6e2] {
        height: 48px;
    }

    .pos-items[b-munf1lc6e2],
    .pos-rooms[b-munf1lc6e2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .pos-sum-row.is-total span:last-child[b-munf1lc6e2] {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pos-page *[b-munf1lc6e2],
    .pos-modal *[b-munf1lc6e2] {
        transition: none !important;
    }
}
/* /Pages/FIN/Request.razor.rz.scp.css */
/* ============================================================
   Request.razor.css — CSS isolation cho /FIN/Request (yêu cầu cấp hàng)
   - Giao diện thẻ ribbon giữ nguyên bản gốc; file này chỉ tô màu các tab trạng thái.
   - Màu lấy từ biến app (--vz-*) → tự đổi theo theme & dark mode.
   ============================================================ */

/* Tab trạng thái: mỗi tab một màu, khớp màu ribbon của phiếu (Chờ duyệt vàng, Đã duyệt xanh lá, Chưa bàn giao xanh dương) */
.req-tab[b-zyl0v5m5l0] {
    --t: var(--vz-primary);
    --t-rgb: var(--vz-primary-rgb);
    --t-text: var(--vz-primary-text-emphasis);
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .req-tab.is-pending[b-zyl0v5m5l0] {
        --t: var(--vz-warning);
        --t-rgb: var(--vz-warning-rgb);
        --t-text: var(--vz-warning-text-emphasis);
    }

    .req-tab.is-approved[b-zyl0v5m5l0] {
        --t: var(--vz-success);
        --t-rgb: var(--vz-success-rgb);
        --t-text: var(--vz-success-text-emphasis);
    }

    .req-tab.is-handover[b-zyl0v5m5l0] {
        --t: var(--vz-info);
        --t-rgb: var(--vz-info-rgb);
        --t-text: var(--vz-info-text-emphasis);
    }

.req-tabs .req-tab:not(.active)[b-zyl0v5m5l0] {
    color: var(--t-text);
}

    .req-tabs .req-tab:not(.active):hover[b-zyl0v5m5l0] {
        background: rgba(var(--t-rgb), .1);
    }

.req-tabs .req-tab.active[b-zyl0v5m5l0] {
    background-color: var(--t);
    color: #fff;
}

/* Mũi tên dưới tab đang chọn cùng màu tab (Velzon mặc định màu primary) */
.req-tabs.arrow-navtabs .nav-link.req-tab.active[b-zyl0v5m5l0]::before {
    border-top-color: var(--t);
}

.req-tab-dot[b-zyl0v5m5l0] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t);
}

.req-tab.active .req-tab-dot[b-zyl0v5m5l0] {
    background: rgba(255, 255, 255, .85);
}

/* Số phiếu chờ duyệt trên tab */
.req-tab-count[b-zyl0v5m5l0] {
    min-width: 20px;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--t);
    color: #fff;
}

    .req-tab-count.is-zero[b-zyl0v5m5l0] {
        background: rgba(var(--vz-body-color-rgb), .08);
        color: var(--vz-secondary-color);
    }

.req-tab.active .req-tab-count[b-zyl0v5m5l0] {
    background: #fff;
    color: var(--t-text);
}
/* /Pages/FO/Availability.razor.rz.scp.css */
/* ===== Tình trạng phòng trống ===== */

/* Khung cuộn của bảng: có chiều cao tối đa để dòng ngày (sticky-top) và cột hạng phòng (sticky-col) dính khi cuộn */
.av-scroll[b-qturltrjug] {
    max-height: max(320px, calc(100vh - 270px));
    overflow-y: auto;
}

.av-date[b-qturltrjug] {
    width: 130px;
}

/* Khoảng trống giữa hai điểm bán */
.av-pos-gap > td[b-qturltrjug] {
    height: 16px;
    padding: 0 !important;
    background-color: var(--vz-card-bg, #fff) !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

/* Ô còn trống. !important để thắng nền thứ 7, chủ nhật (bg-saturday, bg-sunday) */
.av-full[b-qturltrjug] {
    background-color: var(--vz-danger-bg-subtle) !important;
    color: var(--vz-danger) !important;
}

.av-low[b-qturltrjug] {
    background-color: var(--vz-warning-bg-subtle) !important;
    color: var(--vz-warning-text-emphasis) !important;
}

.av-over[b-qturltrjug] {
    background-color: var(--vz-danger) !important;
    color: #fff !important;
}

/* Cột hôm nay: viền hai bên, không đổi nền để giữ màu trạng thái của ô */
th.av-today[b-qturltrjug],
td.av-today[b-qturltrjug] {
    border-left: 2px solid rgba(var(--vz-primary-rgb), .55) !important;
    border-right: 2px solid rgba(var(--vz-primary-rgb), .55) !important;
}

th.av-today[b-qturltrjug] {
    color: var(--vz-primary);
}

/* Chú thích ở chân bảng */
.av-swatch[b-qturltrjug] {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 1px solid var(--vz-border-color);
    border-radius: 3px;
}

.av-swatch-today[b-qturltrjug] {
    border: 2px solid rgba(var(--vz-primary-rgb), .55);
}
/* /Pages/FO/RoomMap.razor.rz.scp.css */
/* ===== Sơ đồ phòng theo tầng ===== */

/* Khung cuộn (chiều ngang) — bằng bề rộng màn hình; mobile vuốt ngang để xem hết tầng */
.room-plan-scroll[b-zo44k5dtn8] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y; /* cho phép cuộn trang + vuốt ngang khi CHỈ xem */
    border: 1px solid #e5e7eb;
    border-radius: var(--vz-border-radius);
    background: #fafafa;
}

/* Vùng vẽ thật của tầng (rộng theo toạ độ phòng) */
.room-plan-canvas[b-zo44k5dtn8] {
    position: relative;
    transform-origin: top left; /* zoom neo góc trái-trên để cuộn đúng */
}

    /* Khi đang sửa: hiện lưới mờ + khoá vuốt để kéo–thả mượt */
    .room-plan-canvas.editing[b-zo44k5dtn8] {
        touch-action: none;
        background-image: linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
        background-size: 8px 8px;
    }

.room-plan-card[b-zo44k5dtn8] {
    position: absolute;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: var(--vz-border-radius);
    padding: 6px 8px;
    overflow: hidden;
    cursor: pointer; /* xem: click mở booking */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .1s ease, opacity .15s ease;
    user-select: none;
}

    .room-plan-card:hover[b-zo44k5dtn8] {
        box-shadow: 0 3px 10px rgba(0,0,0,.15);
        z-index: 5;
    }

    /* Phòng không khớp filter (tìm kiếm / trạng thái) -> làm mờ, vẫn giữ vị trí */
    .room-plan-card.dimmed[b-zo44k5dtn8] {
        opacity: .3;
    }

    .room-plan-card.draggable[b-zo44k5dtn8] {
        cursor: grab;
    }

        .room-plan-card.draggable:active[b-zo44k5dtn8] {
            cursor: grabbing;
            box-shadow: 0 6px 18px rgba(0,0,0,.25);
            z-index: 10;
        }

/* Thanh zoom */
.plan-zoom-label[b-zo44k5dtn8] {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
}

.fs-10[b-zo44k5dtn8] {
    font-size: 10px;
}

.fs-11[b-zo44k5dtn8] {
    font-size: 11px;
}

.fs-12[b-zo44k5dtn8] {
    font-size: 12px;
}

/* Segmented control Danh sách / Sơ đồ (.view-toggle) dùng chung → common.css §9 */
/* /Pages/HR/Contact.razor.rz.scp.css */
/* ============================================================
   Contact.razor.css — CSS isolation cho /HR/Contact (danh bạ)
   - Màu lấy từ biến app (--vz-*) → tự đổi theo theme & dark mode.
   - ::deep dùng cho phần tử do component con / JS sinh ra:
     DebounceInput (<input>), bootstrap-select.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
.ct-page[b-5t364blwvd] {
    --c-ink: var(--vz-body-color);
    --c-muted: var(--vz-secondary-color);
    --c-line: var(--vz-border-color);
    --c-surface: var(--vz-body-bg);
    --c-card: var(--vz-secondary-bg);
    --c-brand: var(--vz-primary);
    --c-brand-rgb: var(--vz-primary-rgb);
    --c-brand-soft: var(--vz-primary-bg-subtle);
    --c-go-strong: var(--vz-success-text-emphasis);
    --c-go-soft: var(--vz-success-bg-subtle);
    --c-bday: var(--vz-warning-text-emphasis);
    --c-bday-rgb: var(--vz-warning-rgb);
    --c-bday-soft: var(--vz-warning-bg-subtle);
    --c-hover: rgba(var(--vz-primary-rgb), .05);
    --c-hover-line: rgba(var(--vz-primary-rgb), .35);
    --c-r-lg: 16px;
    --c-r-md: 12px;
    --c-r-sm: 10px;
    --c-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04);
    color: var(--c-ink);
}

.num[b-5t364blwvd] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.min-w-0[b-5t364blwvd] {
    min-width: 0;
}

/* Không đặt outline :focus-visible chung cho cả trang: ô nhập khớp :focus-visible cả khi click → viền đậm chồng viền
   (trông thô); còn a/button thì app.min.css đã tắt outline (!important). Mỗi ô nhập tự có kiểu focus mềm bên dưới. */

/* ---------- 2. Panel ---------- */
.ct-panel[b-5t364blwvd] {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-lg);
    box-shadow: var(--c-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 85px);
    height: calc(100dvh - 85px);
}

/* ---------- 3. Header + bộ lọc ---------- */
.ct-head[b-5t364blwvd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
}

.ct-head-main[b-5t364blwvd] {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1 1 220px;
    min-width: 0;
}

.ct-head-tools[b-5t364blwvd] {
    flex: 999 1 560px;
}

.ct-head-icon[b-5t364blwvd] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--c-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--c-brand-soft);
    color: var(--c-brand);
}

.ct-head-title[b-5t364blwvd] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.ct-head-sub[b-5t364blwvd] {
    margin: .1rem 0 0;
    font-size: 12.5px;
    color: var(--c-muted);
}

/* Nút lọc dạng chip (sinh nhật tháng, xóa bộ lọc) */
.ct-chip[b-5t364blwvd] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 .85rem;
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-md);
    background: var(--c-card);
    color: var(--c-ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

    .ct-chip:hover[b-5t364blwvd] {
        border-color: var(--c-hover-line);
        background: var(--c-hover);
    }

    .ct-chip > i[b-5t364blwvd] {
        color: var(--c-muted);
    }

    .ct-chip.active[b-5t364blwvd] {
        background: var(--c-bday-soft);
        border-color: rgba(var(--c-bday-rgb), .55);
        color: var(--c-bday);
    }

        .ct-chip.active > i[b-5t364blwvd] {
            color: var(--c-bday);
        }

.ct-chip-count[b-5t364blwvd] {
    min-width: 22px;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    background: rgba(var(--vz-body-color-rgb), .07);
}

.ct-chip.active .ct-chip-count[b-5t364blwvd] {
    background: rgba(var(--c-bday-rgb), .22);
}

/* Ô tìm kiếm — DebounceInput tự render <input> → ::deep */
.ct-search[b-5t364blwvd] {
    position: relative;
}

    .ct-search > i[b-5t364blwvd] {
        position: absolute;
        left: .9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--c-muted);
        font-size: 14px;
        pointer-events: none;
        z-index: 1;
    }

    .ct-search[b-5t364blwvd]  .form-control {
        height: 40px;
        padding-left: 2.4rem;
        border-radius: var(--c-r-md);
        border: 1px solid var(--c-line);
        background: var(--c-surface);
        color: var(--c-ink);
        font-size: 14px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }

        .ct-search[b-5t364blwvd]  .form-control:focus {
            outline: none;
            background: var(--c-card);
            border-color: rgba(var(--c-brand-rgb), .4);
            box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
        }

    .ct-search:focus-within > i[b-5t364blwvd] {
        color: var(--c-brand);
    }

/* Chọn bộ phận — bootstrap-select sinh DOM riêng → ::deep */
.ct-head-tools[b-5t364blwvd]  .bootstrap-select {
    width: 100% !important;
}

    .ct-head-tools[b-5t364blwvd]  .bootstrap-select > .dropdown-toggle {
        height: 40px;
        display: flex;
        align-items: center;
        border-radius: var(--c-r-md);
        border-color: var(--c-line) !important;
        background-color: var(--c-card);
        color: var(--c-ink);
        font-size: 13.5px;
        transition: border-color .15s, box-shadow .15s;
    }

        /* bootstrap-select mặc định vẽ vòng focus của trình duyệt (!important) → thay bằng kiểu giống ô tìm kiếm */
        .ct-head-tools[b-5t364blwvd]  .bootstrap-select > .dropdown-toggle:focus,
        .ct-head-tools[b-5t364blwvd]  .bootstrap-select > .dropdown-toggle.show {
            outline: none !important;
            border-color: rgba(var(--c-brand-rgb), .4) !important;
            box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .08);
        }

/* ---------- 4. Vùng danh sách ---------- */
.ct-body[b-5t364blwvd] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 1.1rem 1.1rem;
    background: var(--c-surface);
}

.ct-group + .ct-group[b-5t364blwvd] {
    margin-top: .5rem;
}

/* Tên bộ phận dính trên đầu khi cuộn */
.ct-group-head[b-5t364blwvd] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem .15rem .6rem;
    background: var(--c-surface);
}

.ct-group-title[b-5t364blwvd] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-muted);
}

.ct-group-count[b-5t364blwvd] {
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--c-brand-soft);
    color: var(--c-brand);
}

.ct-grid[b-5t364blwvd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: .75rem;
}

/* ---------- 5. Thẻ liên hệ ---------- */
.ct-card[b-5t364blwvd] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-md);
    background: var(--c-card);
    transition: border-color .15s, box-shadow .15s;
}

    .ct-card:hover[b-5t364blwvd] {
        border-color: var(--c-hover-line);
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
    }

    /* Sinh nhật hôm nay */
    .ct-card.is-bday[b-5t364blwvd] {
        border-color: rgba(var(--c-bday-rgb), .6);
        background: linear-gradient(180deg, rgba(var(--c-bday-rgb), .1), var(--c-card) 70%);
    }

.ct-card-top[b-5t364blwvd] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Avatar: chữ viết tắt nằm dưới, ảnh phủ lên; ảnh lỗi → ẩn ảnh, còn chữ */
.ct-avatar[b-5t364blwvd] {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
}

    .ct-avatar img[b-5t364blwvd] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--c-card);
    }

.ct-tone-0[b-5t364blwvd] {
    background: var(--vz-primary-bg-subtle);
    color: var(--vz-primary-text-emphasis);
}

.ct-tone-1[b-5t364blwvd] {
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-secondary-text-emphasis);
}

.ct-tone-2[b-5t364blwvd] {
    background: var(--vz-success-bg-subtle);
    color: var(--vz-success-text-emphasis);
}

.ct-tone-3[b-5t364blwvd] {
    background: var(--vz-info-bg-subtle);
    color: var(--vz-info-text-emphasis);
}

.ct-tone-4[b-5t364blwvd] {
    background: var(--vz-warning-bg-subtle);
    color: var(--vz-warning-text-emphasis);
}

/* overflow:hidden (để có "…") cắt cả phần nhô lên trên khung dòng → dấu chồng của chữ HOA (Ễ, Ấ, Ỗ)
   bị mất nếu line-height thấp; chừa thêm chỗ phía trên bằng line-height + padding-top */
.ct-pos[b-5t364blwvd] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tên không cắt: hiện đủ, dài thì xuống dòng */
.ct-name[b-5t364blwvd] {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

.ct-pos[b-5t364blwvd] {
    padding-top: 1px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-muted);
}

.ct-meta[b-5t364blwvd] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .ct-meta:empty[b-5t364blwvd] {
        display: none;
    }

.ct-meta-line[b-5t364blwvd] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: 12.5px;
    color: var(--c-muted);
}

    .ct-meta-line > i[b-5t364blwvd] {
        flex: 0 0 14px;
        text-align: center;
    }

    .ct-meta-line.is-month > i[b-5t364blwvd] {
        color: var(--vz-warning);
    }

a.ct-link[b-5t364blwvd] {
    text-decoration: none;
}

    a.ct-link:hover[b-5t364blwvd] {
        color: var(--c-brand);
    }

.ct-bday-badge[b-5t364blwvd] {
    padding: .08rem .5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--c-bday-soft);
    color: var(--c-bday);
}

/* Hàng nút gọi / sao chép, luôn nằm cuối thẻ */
.ct-actions[b-5t364blwvd] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px dashed var(--c-line);
}

.ct-call[b-5t364blwvd] {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 36px;
    border-radius: var(--c-r-sm);
    background: var(--c-go-soft);
    color: var(--c-go-strong);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s, transform .08s;
}

    .ct-call:hover[b-5t364blwvd] {
        background: var(--c-go-strong);
        color: #fff;
    }

    .ct-call:active[b-5t364blwvd],
    .ct-icon-btn:active[b-5t364blwvd] {
        transform: scale(.97);
    }

.ct-icon-btn[b-5t364blwvd] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-sm);
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}

    .ct-icon-btn:hover[b-5t364blwvd] {
        border-color: var(--c-hover-line);
        background: var(--c-hover);
        color: var(--c-brand);
    }

.ct-no-phone[b-5t364blwvd] {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    font-size: 12.5px;
    color: var(--c-muted);
}

/* ---------- 6. Empty state ---------- */
.ct-empty[b-5t364blwvd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 100%;
}

.ct-empty-icon[b-5t364blwvd] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--c-muted);
    background: rgba(var(--vz-body-color-rgb), .05);
    margin-bottom: .9rem;
}

.ct-empty-title[b-5t364blwvd] {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
}

.ct-empty-sub[b-5t364blwvd] {
    margin-top: .25rem;
    font-size: 13px;
    color: var(--c-muted);
}

/* ---------- 7. Thanh cuộn mảnh ---------- */
.ct-body[b-5t364blwvd]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ct-body[b-5t364blwvd]::-webkit-scrollbar-thumb {
    background: rgba(var(--vz-body-color-rgb), .18);
    border-radius: 999px;
}

    .ct-body[b-5t364blwvd]::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--vz-body-color-rgb), .3);
    }

/* ---------- 8. Responsive ---------- */
@media (max-width: 575.98px) {
    .ct-head[b-5t364blwvd] {
        padding: .75rem .85rem;
    }

    .ct-body[b-5t364blwvd] {
        padding: 0 .75rem .75rem;
    }

    .ct-grid[b-5t364blwvd] {
        grid-template-columns: 1fr;
        gap: .6rem;
    }

    .ct-card[b-5t364blwvd] {
        padding: .8rem;
    }
}
/* /Pages/HR/Document.razor.rz.scp.css */
/* ===== Danh sách giấy tờ (/DOC/Document/{nhóm}) ===== */

/* Tiêu đề cột bấm để sắp xếp */
.doc-sortable[b-ijbup9k3bv] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.doc-owner[b-ijbup9k3bv],
.doc-title[b-ijbup9k3bv] {
    min-width: 11rem;
}

.doc-issue[b-ijbup9k3bv],
.doc-exp[b-ijbup9k3bv] {
    white-space: nowrap;
}

.doc-exp-date[b-ijbup9k3bv] {
    display: inline-block;
    min-width: 5.5rem;
}

/* Ghi chú: 1 dòng, rê chuột xem đủ (tooltip) */
.doc-note-text[b-ijbup9k3bv] {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vạch màu đầu dòng: đã hết hạn / sắp hết hạn (thay cho tô đỏ cả dòng).
   Bootstrap tô nền ô (hover, striped…) bằng box-shadow inset 9999px → phải giữ lớp đó, nếu không ô đầu mất màu hover */
tr.doc-expired > td:first-child[b-ijbup9k3bv] {
    box-shadow: inset 3px 0 0 var(--vz-danger),
                inset 0 0 0 9999px var(--vz-table-bg-state, var(--vz-table-bg-type, var(--vz-table-accent-bg)));
}

tr.doc-expiring > td:first-child[b-ijbup9k3bv] {
    box-shadow: inset 3px 0 0 var(--vz-warning),
                inset 0 0 0 9999px var(--vz-table-bg-state, var(--vz-table-bg-type, var(--vz-table-accent-bg)));
}

/* Điện thoại: mỗi giấy tờ là một thẻ, nút Sửa ở góc phải */
@media (max-width: 767.98px) {
    .doc-table thead[b-ijbup9k3bv] {
        display: none;
    }

    .doc-table[b-ijbup9k3bv],
    .doc-table tbody[b-ijbup9k3bv] {
        display: block;
    }

        .doc-table tbody tr[b-ijbup9k3bv] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            row-gap: .25rem;
            column-gap: .5rem;
            padding: .625rem .75rem;
            border-bottom: 1px solid var(--vz-border-color);
        }

        .doc-table td[b-ijbup9k3bv] {
            display: block;
            grid-column: 1;
            padding: 0;
            border: 0;
            text-align: left !important;
        }

            .doc-table td.doc-actions[b-ijbup9k3bv] {
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: start;
            }

            .doc-table td.doc-issue[b-ijbup9k3bv]::before {
                content: attr(data-label) ": ";
                color: var(--vz-secondary-color);
            }

            .doc-table td.doc-issue:empty[b-ijbup9k3bv],
            .doc-table td.doc-note:empty[b-ijbup9k3bv] {
                display: none;
            }

    .doc-owner[b-ijbup9k3bv],
    .doc-title[b-ijbup9k3bv] {
        min-width: 0;
    }

    .doc-note-text[b-ijbup9k3bv] {
        max-width: 100%;
    }

    tr.doc-expired > td:first-child[b-ijbup9k3bv],
    tr.doc-expiring > td:first-child[b-ijbup9k3bv] {
        box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state, var(--vz-table-bg-type, var(--vz-table-accent-bg)));
    }

    .doc-table tbody tr.doc-expired[b-ijbup9k3bv] {
        box-shadow: inset 3px 0 0 var(--vz-danger);
    }

    .doc-table tbody tr.doc-expiring[b-ijbup9k3bv] {
        box-shadow: inset 3px 0 0 var(--vz-warning);
    }
}
/* /Pages/HR/EmplTrf.razor.rz.scp.css */
/* ===== Lịch điều động ===== */

/* Khung cuộn của bảng: có chiều cao tối đa để dòng tiêu đề (sticky-top) dính khi cuộn.
   169px = mức 229px của /HR/DutyRoster trừ thanh phân trang (~60px) — trang này không có card-footer */
.et-scroll[b-89ps8sukxx] {
    max-height: max(320px, calc(100vh - 169px));
    overflow-y: auto;
}

/* Cột Ca làm việc cố định khi cuộn ngang. Nền đặc (trắng như cũ, không dùng nền xám của .sticky-col)
   để không lộ ô phía sau; ô tiêu đề giữ màu cam inline. Nằm dưới thead (.table .sticky-top z-index 3) */
.table .et-sticky-col[b-89ps8sukxx] {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--vz-card-bg, #fff);
}

/* Một nhân viên trong ô: cả dòng là vùng bấm, tô nhẹ khi rê chuột */
.et-empl[b-89ps8sukxx] {
    margin: 0 -3px;
    padding: 1px 3px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s;
}

    .et-empl:hover[b-89ps8sukxx] {
        background-color: rgba(0, 0, 0, .08);
    }

/* Ghi chú của ô: chiếm cả bề ngang ô cho dễ bấm (nhất là trên điện thoại) */
.et-note[b-89ps8sukxx] {
    display: block;
    font-size: 12px;
    cursor: pointer;
}

/* Ô mã ca trong modal (InputText là component con → cần ::deep): chữ in đậm giữa ô như lưới Phân ca */
[b-89ps8sukxx] .et-shift {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
}
/* /Pages/HR/Profile.razor.rz.scp.css */
/* ===== Sơ đồ nhân sự (TypeView 1) dạng sitemap: Đơn vị → Khối → Nhóm vị trí → Bộ phận → Nhân viên ===== */

/* Nền canvas chấm bi; rộng theo nội dung (cuộn ngang trong .table-responsive), tối thiểu bằng khung để căn giữa */
.pf-sitemap[b-em0rpzuz1b] {
    --sm-line: #cfd6de;
    --sm-gap: 24px;
    --sm-accent: #405189;
    --sm-accent-rgb: 64, 81, 137;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    padding: 24px 24px 40px;
    background-color: var(--vz-body-bg, #f2f2f7);
    background-image: radial-gradient(rgba(135, 138, 153, .28) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* ----- Gốc: đơn vị đang chọn ----- */
.pf-sm-root[b-em0rpzuz1b] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--vz-primary, #213064), #405189);
    box-shadow: 0 8px 20px rgba(33, 48, 100, .22);
}

    .pf-sm-root.has-children[b-em0rpzuz1b]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        height: var(--sm-gap);
        border-left: 2px solid var(--sm-line);
        transform: translateX(-1px);
    }

.pf-sm-root-icon[b-em0rpzuz1b] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    font-size: 20px;
}

.pf-sm-root-name[b-em0rpzuz1b] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .2px;
}

.pf-sm-root-stats[b-em0rpzuz1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: .9;
}

/* ----- Hàng ngang dùng chung (khối, nhóm vị trí): thanh nối ngang + nhánh xuống từng cột ----- */
.pf-sm-row[b-em0rpzuz1b] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: var(--sm-gap);
}

.pf-sm-col[b-em0rpzuz1b] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sm-gap) 10px 0;
}

    .pf-sm-col[b-em0rpzuz1b]::before,
    .pf-sm-col[b-em0rpzuz1b]::after {
        content: "";
        position: absolute;
        top: 0;
        width: 50%;
        height: var(--sm-gap);
        border-top: 2px solid var(--sm-line);
    }

    .pf-sm-col[b-em0rpzuz1b]::before {
        right: 50%;
    }

    .pf-sm-col[b-em0rpzuz1b]::after {
        left: 50%;
        margin-left: -1px;
        border-left: 2px solid var(--sm-line);
    }

    .pf-sm-col:first-child[b-em0rpzuz1b]::before,
    .pf-sm-col:last-child[b-em0rpzuz1b]::after {
        border: 0 none;
    }

    .pf-sm-col:last-child[b-em0rpzuz1b]::before {
        margin-right: -1px;
        border-right: 2px solid var(--sm-line);
        border-top-right-radius: 10px;
    }

    .pf-sm-col:first-child[b-em0rpzuz1b]::after {
        border-top-left-radius: 10px;
    }

.pf-sm-count[b-em0rpzuz1b] {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--sm-accent-rgb), .12);
    color: var(--sm-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* ----- Cấp 1: khối ----- */
.pf-sm-group-node[b-em0rpzuz1b] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    padding: 10px 12px;
    background: var(--vz-secondary-bg, #fff);
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-top: 3px solid var(--sm-accent);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

    /* Đường nối xuống hàng nhóm vị trí */
    .pf-sm-group-node[b-em0rpzuz1b]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        height: var(--sm-gap);
        border-left: 2px solid var(--sm-line);
        transform: translateX(-1px);
    }

.pf-sm-group-icon[b-em0rpzuz1b] {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--vz-border-radius);
    background: rgba(var(--sm-accent-rgb), .12);
    color: var(--sm-accent);
    font-size: 14px;
}

.pf-sm-group-name[b-em0rpzuz1b] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--vz-heading-color, #495057);
}

/* ----- Cấp 2: nhóm vị trí ----- */
.pf-sm-posgrp[b-em0rpzuz1b] {
    width: 300px;
    align-items: stretch;
}

.pf-sm-pos-node[b-em0rpzuz1b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(var(--sm-accent-rgb), .08);
    border: 1px solid rgba(var(--sm-accent-rgb), .28);
    border-radius: var(--vz-border-radius);
}

.pf-sm-pos-icon[b-em0rpzuz1b] {
    flex: 0 0 18px;
    font-size: 13px;
    text-align: center;
    color: var(--sm-accent);
}

.pf-sm-pos-name[b-em0rpzuz1b] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vz-heading-color, #495057);
}

/* ----- Cấp 3: bộ phận xếp dọc dưới nhóm vị trí, nhánh vuông góc bên trái ----- */
.pf-sm-depts[b-em0rpzuz1b] {
    margin-left: 19px; /* thẳng dưới icon của nhóm vị trí */
}

.pf-sm-dept[b-em0rpzuz1b] {
    position: relative;
    padding: 12px 0 0 16px;
}

    .pf-sm-dept[b-em0rpzuz1b]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-left: 2px solid var(--sm-line);
    }

    .pf-sm-dept[b-em0rpzuz1b]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 30px;
        width: 16px;
        border-top: 2px solid var(--sm-line);
    }

    /* Bộ phận cuối: đường dọc dừng ở nhánh, bo góc */
    .pf-sm-dept:last-child[b-em0rpzuz1b]::before {
        bottom: auto;
        width: 16px;
        height: 32px;
        border-bottom: 2px solid var(--sm-line);
        border-bottom-left-radius: 10px;
    }

    .pf-sm-dept:last-child[b-em0rpzuz1b]::after {
        display: none;
    }

.pf-sm-dept-card[b-em0rpzuz1b] {
    overflow: hidden;
    background: var(--vz-secondary-bg, #fff);
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    transition: box-shadow .2s ease;
}

    .pf-sm-dept-card:hover[b-em0rpzuz1b] {
        box-shadow: 0 6px 16px rgba(15, 23, 42, .09);
    }

.pf-sm-dept-head[b-em0rpzuz1b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(var(--sm-accent-rgb), .05);
    border-left: 3px solid var(--sm-accent);
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
}

.pf-sm-dept-name[b-em0rpzuz1b] {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vz-heading-color, #495057);
}

/* ----- Nhân viên ----- */
.pf-sm-emps[b-em0rpzuz1b] {
    padding: 4px 6px 6px;
}

.pf-sm-emp[b-em0rpzuz1b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border: 1px solid transparent;
    border-radius: var(--vz-border-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .pf-sm-emp:hover[b-em0rpzuz1b] {
        background: var(--vz-tertiary-bg, #eff2f7);
    }

    .pf-sm-emp.is-selected[b-em0rpzuz1b] {
        background: rgba(var(--vz-primary-rgb, 33, 48, 100), .08);
        border-color: rgba(var(--vz-primary-rgb, 33, 48, 100), .35);
    }

.pf-sm-avatar[b-em0rpzuz1b] {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--vz-light, #f1f4f7);
    box-shadow: 0 0 0 2px var(--vz-secondary-bg, #fff), 0 0 0 3px var(--vz-border-color, #e9ebec);
}

.pf-sm-emp.is-leader .pf-sm-avatar[b-em0rpzuz1b] {
    box-shadow: 0 0 0 2px var(--vz-secondary-bg, #fff), 0 0 0 4px #f7b84b;
}

.pf-sm-emp-info[b-em0rpzuz1b] {
    flex: 1;
    min-width: 0;
}

/* Họ tên không cắt — xuống dòng nếu dài */
.pf-sm-emp-name[b-em0rpzuz1b] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vz-body-color, #212529);
}

.pf-sm-emp.is-selected .pf-sm-emp-name[b-em0rpzuz1b] {
    color: var(--vz-primary, #213064);
}

/* Dòng 2: mã · vị trí bên trái, lương (nếu có quyền) bên phải → họ tên được trọn chiều ngang;
   thiếu chỗ thì lương xuống dòng (vẫn canh phải) thay vì bẻ vụn mã · vị trí */
.pf-sm-emp-meta[b-em0rpzuz1b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--vz-secondary-color, #878a99);
}

.pf-sm-emp-sal[b-em0rpzuz1b] {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--vz-heading-color, #495057);
}

.pf-sm-leader[b-em0rpzuz1b] {
    font-size: 11px;
    color: #f7b84b;
}

.pf-sm-empty[b-em0rpzuz1b] {
    margin-top: 28px;
    font-size: 13px;
    color: var(--vz-secondary-color, #878a99);
}

/* ----- Màu nhấn theo khối (xoay vòng), áp cho cả nhánh con ----- */
.pf-sm-c0[b-em0rpzuz1b] { --sm-accent: #405189; --sm-accent-rgb: 64, 81, 137; }
.pf-sm-c1[b-em0rpzuz1b] { --sm-accent: #0ab39c; --sm-accent-rgb: 10, 179, 156; }
.pf-sm-c2[b-em0rpzuz1b] { --sm-accent: #3577f1; --sm-accent-rgb: 53, 119, 241; }
.pf-sm-c3[b-em0rpzuz1b] { --sm-accent: #d4931d; --sm-accent-rgb: 212, 147, 29; }
.pf-sm-c4[b-em0rpzuz1b] { --sm-accent: #f06548; --sm-accent-rgb: 240, 101, 72; }
.pf-sm-c5[b-em0rpzuz1b] { --sm-accent: #299cdb; --sm-accent-rgb: 41, 156, 219; }
.pf-sm-c6[b-em0rpzuz1b] { --sm-accent: #6559cc; --sm-accent-rgb: 101, 89, 204; }

/* Điện thoại: chuyển sang cây dọc (khối, nhóm vị trí xếp chồng, nhánh bên trái) thay vì cuộn ngang */
@media (max-width: 575.98px) {
    .pf-sitemap[b-em0rpzuz1b] {
        width: 100%;
        align-items: stretch;
        padding: 16px 12px 32px;
    }

    .pf-sm-root[b-em0rpzuz1b] {
        padding: 12px 16px;
    }

        .pf-sm-root.has-children[b-em0rpzuz1b]::after,
        .pf-sm-group-node[b-em0rpzuz1b]::after {
            display: none;
        }

    .pf-sm-row[b-em0rpzuz1b] {
        flex-direction: column;
        align-items: stretch;
        margin: 0 0 0 14px;
    }

    .pf-sm-col[b-em0rpzuz1b],
    .pf-sm-posgrp[b-em0rpzuz1b] {
        width: auto;
        align-items: stretch;
        padding: 12px 0 0 14px;
    }

    .pf-sm-group-node[b-em0rpzuz1b] {
        width: auto;
    }

    /* Độ cao nhánh = padding-top cột + nửa chiều cao nút */
    .pf-sm-group[b-em0rpzuz1b] {
        --sm-elbow: 40px;
    }

    .pf-sm-posgrp[b-em0rpzuz1b] {
        --sm-elbow: 30px;
    }

        .pf-sm-col[b-em0rpzuz1b]::before,
        .pf-sm-col:first-child[b-em0rpzuz1b]::before,
        .pf-sm-col:last-child[b-em0rpzuz1b]::before {
            left: 0;
            right: auto;
            top: 0;
            bottom: 0;
            width: 0;
            height: auto;
            margin: 0;
            border: 0 none;
            border-left: 2px solid var(--sm-line);
            border-radius: 0;
        }

        .pf-sm-col[b-em0rpzuz1b]::after,
        .pf-sm-col:first-child[b-em0rpzuz1b]::after {
            left: 0;
            top: calc(var(--sm-elbow) - 1px);
            width: 14px;
            height: 0;
            margin: 0;
            border: 0 none;
            border-top: 2px solid var(--sm-line);
            border-radius: 0;
        }

        .pf-sm-col:last-child[b-em0rpzuz1b]::before {
            bottom: auto;
            width: 14px;
            height: calc(var(--sm-elbow) + 1px);
            border-bottom: 2px solid var(--sm-line);
            border-bottom-left-radius: 10px;
        }

        .pf-sm-col:last-child[b-em0rpzuz1b]::after {
            display: none;
        }
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
 * Trang đăng nhập — chỉnh nhẹ trên khung Velzon (AuthLayout)
 * ============================================================ */

.login-brand[b-b4p5z8ph0b] {
    color: #f1f2f2;
}

.login-card[b-b4p5z8ph0b] {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 50px -20px rgba(33, 48, 100, .35), 0 2px 6px rgba(33, 48, 100, .06);
    animation: login-rise-b-b4p5z8ph0b .35s cubic-bezier(.2, .8, .2, 1);
}

/* Ô nhập có biểu tượng bên trái */
.login-field-icon[b-b4p5z8ph0b] {
    position: absolute;
    top: 50%;
    left: .9rem;
    z-index: 1;
    font-size: 1rem;
    line-height: 1;
    color: var(--vz-secondary-color);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color .15s ease;
}

.login-field:focus-within .login-field-icon[b-b4p5z8ph0b] {
    color: var(--vz-primary);
}

.login-field[b-b4p5z8ph0b]  .form-control {
    padding-top: .6rem;
    padding-bottom: .6rem;
    padding-left: 2.5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .login-field[b-b4p5z8ph0b]  .form-control:focus {
        outline: none;
        border-color: rgba(var(--vz-primary-rgb), .4);
        box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .08);
    }

/* Nút mắt cao bằng ô mật khẩu, icon nằm giữa */
.login-field .password-addon[b-b4p5z8ph0b] {
    display: flex;
    align-items: center;
    height: 100%;
}

.login-submit[b-b4p5z8ph0b] {
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-weight: 500;
    box-shadow: 0 8px 18px -10px rgba(var(--vz-primary-rgb), .8);
}

/* Logo đơn vị dưới form, ngăn bằng đường kẻ đứt */
.login-tenant[b-b4p5z8ph0b] {
    border-top: 1px dashed var(--vz-border-color);
}

    .login-tenant img[b-b4p5z8ph0b] {
        max-height: 100px;
    }

@keyframes login-rise-b-b4p5z8ph0b {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card[b-b4p5z8ph0b] {
        animation: none;
    }
}