@import '_content/VTTGROUP.Application/VTTGROUP.Application.hwuwqhpscj.bundle.scp.css';
@import '_content/VTTGROUP.Domain/VTTGROUP.Domain.wal0038ovn.bundle.scp.css';
@import '_content/VTTGROUP.Infrastructure/VTTGROUP.Infrastructure.odtsrlf45b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-roj0b6ax6i] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    #blazor-error-ui .dismiss[b-roj0b6ax6i] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .nav-scrollable[b-ojyz87fz9k] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/BangLuongNhanVien/Detail.razor.rz.scp.css */
/* ============================================================
   PAYROLL DETAIL - CLEAN RESPONSIVE HR ENTERPRISE UI
   File: BangLuongNhanVienDetail.razor.css
============================================================ */

/* ============================================================
   PAGE SHELL
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv] {
    width: 100%;
    max-width: 100%;
    padding: 10px 0 18px;
    background: #f6f8fc;
    color: #24395c;
    overflow: visible;
}

.payroll-detail-shell[b-6dxgl0f8uv] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

/* ============================================================
   HEADER / TOOLBAR
============================================================ */

.pd-toolbar[b-6dxgl0f8uv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.pd-title-area[b-6dxgl0f8uv] {
    min-width: 0;
    flex: 1;
}

.pd-breadcrumb[b-6dxgl0f8uv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
}

    .pd-breadcrumb b[b-6dxgl0f8uv] {
        color: #50627c;
        font-weight: 650;
    }

.pd-bc-sep[b-6dxgl0f8uv] {
    color: #b4bfce;
    font-weight: 650;
}

.pd-title-row[b-6dxgl0f8uv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .pd-title-row h2[b-6dxgl0f8uv] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.pd-pill[b-6dxgl0f8uv] {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.pd-period[b-6dxgl0f8uv] {
    color: #346bd7;
    background: #eff6ff;
    border: 1px solid #cfe0fb;
}

.pd-status.draft[b-6dxgl0f8uv],
.pd-mini-status.draft[b-6dxgl0f8uv] {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.pd-status.pending[b-6dxgl0f8uv],
.pd-mini-status.pending[b-6dxgl0f8uv] {
    color: #b7832d;
    background: #faf0dd;
    border: 1px solid #eedfbc;
}

.pd-status.approved[b-6dxgl0f8uv],
.pd-mini-status.approved[b-6dxgl0f8uv],
.pd-status.locked[b-6dxgl0f8uv],
.pd-mini-status.locked[b-6dxgl0f8uv] {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

/* ============================================================
   HEADER ACTION BUTTONS
============================================================ */

.pd-actions[b-6dxgl0f8uv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.pd-action-btn[b-6dxgl0f8uv] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .pd-action-btn:hover:not(:disabled)[b-6dxgl0f8uv] {
        transform: translateY(-1px);
    }

    .pd-action-btn:active:not(:disabled)[b-6dxgl0f8uv] {
        transform: translateY(0);
        box-shadow: none;
    }

    .pd-action-btn:disabled[b-6dxgl0f8uv] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .pd-action-btn:focus-visible[b-6dxgl0f8uv] {
        outline: none;
    }

.pd-action-icon[b-6dxgl0f8uv] {
    width: 15px;
    height: 15px;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pd-action-icon svg[b-6dxgl0f8uv] {
        width: 15px !important;
        height: 15px !important;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2 !important;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Quay lại */
.pd-action-back[b-6dxgl0f8uv] {
    color: #d97706;
    border-color: #f4a261;
    background: #ffffff;
}

    .pd-action-back:hover:not(:disabled)[b-6dxgl0f8uv] {
        color: #b45309;
        background: #fff7ed;
        border-color: #ea8a2f;
        box-shadow: 0 6px 14px rgba(217, 119, 6, .10);
    }

    .pd-action-back:focus-visible[b-6dxgl0f8uv] {
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
    }

/* In phiếu lương */
.pd-action-print[b-6dxgl0f8uv] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #ffffff;
}

    .pd-action-print:hover:not(:disabled)[b-6dxgl0f8uv] {
        color: #1d4ed8;
        background: #eff6ff;
        border-color: #93c5fd;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .10);
    }

    .pd-action-print:focus-visible[b-6dxgl0f8uv] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
    }

/* Xuất PDF */
.pd-action-pdf[b-6dxgl0f8uv] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}

    .pd-action-pdf:hover:not(:disabled)[b-6dxgl0f8uv] {
        color: #065f46;
        background: #d1fae5;
        border-color: #4ade80;
        box-shadow: 0 6px 14px rgba(5, 150, 105, .12);
    }

    .pd-action-pdf:focus-visible[b-6dxgl0f8uv] {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
    }

/* ============================================================
   LEGACY BUTTONS
   Giữ lại để dùng cho loading/empty state hoặc button nội bộ khác
============================================================ */

.pd-btn[b-6dxgl0f8uv] {
    min-height: 42px;
    padding: 0 15px 0 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .035);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .pd-btn:hover:not(:disabled)[b-6dxgl0f8uv] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
    }

    .pd-btn:disabled[b-6dxgl0f8uv] {
        opacity: .65;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

.pd-btn-icon[b-6dxgl0f8uv],
.pd-section-icon[b-6dxgl0f8uv],
.pd-kpi-icon[b-6dxgl0f8uv],
.pd-state-icon[b-6dxgl0f8uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-btn-icon[b-6dxgl0f8uv] {
    width: 27px;
    height: 27px;
    border-radius: 9px;
}

    .pd-btn-icon svg[b-6dxgl0f8uv] {
        width: 15px !important;
        height: 15px !important;
    }

.pd-btn-blue[b-6dxgl0f8uv] {
    color: #1d4ed8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #bfdbfe;
}

    .pd-btn-blue .pd-btn-icon[b-6dxgl0f8uv] {
        color: #1d4ed8;
        background: #eff6ff;
    }

.pd-btn-green[b-6dxgl0f8uv] {
    color: #047857;
    background: #ecfdf5;
    border-color: #86efac;
}

    .pd-btn-green .pd-btn-icon[b-6dxgl0f8uv] {
        color: #047857;
        background: #d1fae5;
    }

/* ============================================================
   MAIN LAYOUT
============================================================ */

.pd-layout[b-6dxgl0f8uv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 14px;
    align-items: start;
}

.pd-main[b-6dxgl0f8uv],
.pd-side[b-6dxgl0f8uv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   CARD BASE
============================================================ */

.pd-employee-card[b-6dxgl0f8uv],
.pd-kpi-card[b-6dxgl0f8uv],
.pd-card[b-6dxgl0f8uv],
.pd-side-card[b-6dxgl0f8uv] {
    background: #ffffff;
    border: 1px solid #e8edf5;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
}

.pd-card[b-6dxgl0f8uv],
.pd-side-card[b-6dxgl0f8uv] {
    border-radius: 14px;
    overflow: hidden;
}

.pd-card-title[b-6dxgl0f8uv],
.pd-side-title[b-6dxgl0f8uv] {
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
}

    .pd-card-title h3[b-6dxgl0f8uv],
    .pd-side-title h3[b-6dxgl0f8uv] {
        margin: 0;
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
    }

/* ============================================================
   SECTION ICONS
============================================================ */

.pd-section-icon[b-6dxgl0f8uv] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

    .pd-section-icon svg[b-6dxgl0f8uv] {
        width: 15px !important;
        height: 15px !important;
        stroke-width: 1.9 !important;
    }

    .pd-section-icon.blue[b-6dxgl0f8uv] {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid rgba(37, 99, 235, .08);
    }

    .pd-section-icon.green[b-6dxgl0f8uv] {
        color: #16a34a;
        background: #ecfdf5;
        border: 1px solid rgba(22, 163, 74, .08);
    }

    .pd-section-icon.red[b-6dxgl0f8uv] {
        color: #ef4444;
        background: #fff1f2;
        border: 1px solid rgba(239, 68, 68, .08);
    }

    .pd-section-icon.yellow[b-6dxgl0f8uv] {
        color: #d97706;
        background: #fff7ed;
        border: 1px solid rgba(217, 119, 6, .10);
    }

/* ============================================================
   EMPLOYEE CARD
============================================================ */

.pd-employee-card[b-6dxgl0f8uv] {
    min-height: 92px;
    padding: 14px 16px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 62px 180px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.pd-avatar[b-6dxgl0f8uv] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: inset 0 -9px 16px rgba(0, 0, 0, .10);
}

.pd-employee-name[b-6dxgl0f8uv] {
    min-width: 0;
}

    .pd-employee-name h3[b-6dxgl0f8uv] {
        margin: 0 0 6px;
        color: #1e3355;
        font-size: 18.5px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

    .pd-employee-name span[b-6dxgl0f8uv],
    .pd-employee-meta span[b-6dxgl0f8uv] {
        display: block;
        margin-bottom: 4px;
        color: #7b8aa2;
        font-size: 12px;
        font-weight: 600;
    }

    .pd-employee-name b[b-6dxgl0f8uv],
    .pd-employee-meta b[b-6dxgl0f8uv] {
        display: block;
        color: #405b78;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        word-break: break-word;
    }

.pd-employee-meta[b-6dxgl0f8uv] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 1px solid #eef2f7;
}

    .pd-employee-meta div[b-6dxgl0f8uv] {
        min-height: 48px;
        padding: 0 16px;
        border-right: 1px solid #eef2f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .pd-employee-meta div:last-child[b-6dxgl0f8uv] {
            border-right: 0;
        }

/* ============================================================
   KPI CARDS
============================================================ */

.pd-kpi-grid[b-6dxgl0f8uv] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pd-kpi-card[b-6dxgl0f8uv] {
    position: relative;
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .pd-kpi-card:hover[b-6dxgl0f8uv] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.pd-kpi-icon[b-6dxgl0f8uv] {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

    .pd-kpi-icon svg[b-6dxgl0f8uv] {
        width: 22px !important;
        height: 22px !important;
    }

.pd-kpi-card.income .pd-kpi-icon[b-6dxgl0f8uv],
.pd-kpi-card.net .pd-kpi-icon[b-6dxgl0f8uv] {
    color: #16a34a;
    background: #ecfdf5;
}

.pd-kpi-card.deduction .pd-kpi-icon[b-6dxgl0f8uv] {
    color: #ef4444;
    background: #fff1f2;
}

.pd-kpi-card.company .pd-kpi-icon[b-6dxgl0f8uv] {
    color: #7c3aed;
    background: #f5f3ff;
}

.pd-kpi-body[b-6dxgl0f8uv] {
    min-width: 0;
}

    .pd-kpi-body span[b-6dxgl0f8uv] {
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.2;
        white-space: nowrap;
    }

    .pd-kpi-body b[b-6dxgl0f8uv] {
        display: block;
        color: #2f5f98;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -0.015em;
        white-space: nowrap;
    }

    .pd-kpi-body small[b-6dxgl0f8uv] {
        display: block;
        margin-top: 4px;
        color: #8a98ad;
        font-size: 11.5px;
        font-weight: 500;
        white-space: nowrap;
    }

.pd-kpi-card.deduction .pd-kpi-body b[b-6dxgl0f8uv] {
    color: #ef4444;
}

.pd-kpi-card.net .pd-kpi-body b[b-6dxgl0f8uv] {
    color: #059669;
}

.pd-kpi-card.company .pd-kpi-body b[b-6dxgl0f8uv] {
    color: #7c3aed;
}

/* ============================================================
   TWO COLUMN BLOCKS
============================================================ */

.pd-two-cols[b-6dxgl0f8uv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
    gap: 14px;
}

.pd-money-cols[b-6dxgl0f8uv] {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

/* ============================================================
   TABLE COMMON
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  table.pd-info-table,
.payroll-detail-page[b-6dxgl0f8uv]  table.pd-work-table,
.payroll-detail-page[b-6dxgl0f8uv]  table.pd-money-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    background: #ffffff;
}

/* ============================================================
   THÔNG TIN HỢP ĐỒNG
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table tr {
    display: table-row;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table td,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table .pd-info-cell {
    display: table-cell;
    width: auto;
    height: 68px;
    padding: 10px 14px;
    vertical-align: middle;
    text-align: left;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table tr:last-child td {
    border-bottom: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table td:last-child {
    border-right: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table .pd-cell-label,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table span {
    display: block;
    min-height: 17px;
    margin: 0 0 6px;
    color: #7b8aa2;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table .pd-cell-value,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table b {
    display: block;
    color: #405b78;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

/* ============================================================
   CÔNG & CHẤM CÔNG KỲ LƯƠNG
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table tr {
    display: table-row;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table td,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table .pd-work-cell {
    display: table-cell;
    width: auto;
    height: 68px;
    padding: 9px 8px;
    vertical-align: middle;
    text-align: center;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table tr:last-child td {
    border-bottom: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table td:last-child {
    border-right: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table .pd-cell-label,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table span {
    display: block;
    min-height: 28px;
    margin: 0 0 4px;
    color: #7b8aa2;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table .pd-work-value,
.payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table b {
    display: block;
    color: #3f6fd8;
    font-size: 15.5px;
    font-weight: 750;
    line-height: 1.15;
    word-break: break-word;
}

/* ============================================================
   CHI TIẾT THU NHẬP / KHẤU TRỪ
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table thead th {
    height: 38px;
    padding: 9px 12px;
    background: #f6f7fb;
    color: #40536f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table thead th:last-child {
        border-right: 0;
    }

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody td {
    height: 34px;
    padding: 7px 12px;
    background: #ffffff;
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    vertical-align: middle;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody td:first-child {
        color: #405b78;
        font-weight: 600;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody td:nth-child(2) {
        color: #53647f;
        font-weight: 500;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody td:last-child {
        border-right: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        font-weight: 650;
    }

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody tr:hover td {
    background: #fbfcff;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tfoot td {
    height: 38px;
    padding: 8px 12px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 0;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tfoot td:last-child {
        border-right: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.payroll-detail-page[b-6dxgl0f8uv]  .pd-income-table tfoot td {
    background: #ecfdf5;
    color: #047857;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-deduction-table tfoot td {
    background: #fff1f2;
    color: #dc2626;
}

/* ============================================================
   TEXT COLORS
============================================================ */

.income-text[b-6dxgl0f8uv],
.payroll-detail-page[b-6dxgl0f8uv]  .income-text {
    color: #059669 !important;
    font-weight: 750 !important;
}

.danger-text[b-6dxgl0f8uv],
.payroll-detail-page[b-6dxgl0f8uv]  .danger-text {
    color: #ef4444 !important;
    font-weight: 750 !important;
}

.blue-text[b-6dxgl0f8uv] {
    color: #3f6fd8 !important;
    font-weight: 700 !important;
}

.purple-text[b-6dxgl0f8uv] {
    color: #7c3aed !important;
    font-weight: 700 !important;
}

/* ============================================================
   TỔNG HỢP THANH TOÁN
============================================================ */

.pd-payment-grid[b-6dxgl0f8uv] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

    .pd-payment-grid div[b-6dxgl0f8uv] {
        min-height: 68px;
        padding: 12px 14px;
        border-right: 1px solid #eaedf4;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .pd-payment-grid div:last-child[b-6dxgl0f8uv] {
            border-right: 0;
        }

    .pd-payment-grid span[b-6dxgl0f8uv] {
        display: block;
        margin-bottom: 6px;
        color: #7b8aa2;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
    }

    .pd-payment-grid b[b-6dxgl0f8uv] {
        font-size: 15.5px;
        line-height: 1.15;
        white-space: nowrap;
        font-weight: 700;
    }

/* ============================================================
   SIDEBAR - TÓM TẮT PHIẾU LƯƠNG
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list {
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-item,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
        min-height: 33px;
        padding: 5px 0;
        border-bottom: 1px solid #f1f4f8;
    }

        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-item:last-child,
        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div:last-child {
            border-bottom: 0;
        }

        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-label,
        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div > span {
            display: block;
            color: #7b8aa2;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
            white-space: nowrap;
        }

        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-value,
        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div > b:not(.pd-mini-status) {
            display: block;
            min-width: 0;
            color: #405b78;
            font-size: 13.5px;
            font-weight: 600;
            line-height: 1.35;
            word-break: break-word;
        }

.payroll-detail-page[b-6dxgl0f8uv]  .pd-mini-status {
    width: fit-content;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
}

/* ============================================================
   SIDEBAR - CƠ CẤU LƯƠNG
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-structure {
    min-height: 176px;
    padding: 22px 20px;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    background: #ffffff;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-donut-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-donut {
    position: relative;
    width: 128px;
    height: 128px;
    min-width: 128px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045), 0 8px 18px rgba(15, 23, 42, .04);
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-donut-hole {
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #edf1f7;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 11px;
    min-height: 20px;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    min-width: 11px;
    border-radius: 999px;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-dot.blue {
        background: #4f8ee9;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-dot.green {
        background: #3ab795;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-dot.yellow {
        background: #f6c453;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-dot.purple {
        background: #8b5cf6;
    }

.payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-item label {
    display: block;
    margin: 0;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-item b {
    display: block;
    color: #405b78;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SIDEBAR - GHI CHÚ HR
============================================================ */

.payroll-detail-page[b-6dxgl0f8uv]  .pd-hr-note {
    margin: 18px 20px 20px;
    padding: 14px 15px;
    border-radius: 10px;
    border: 1px solid #f1cf79;
    background: #fff8df;
    color: #7c4a03;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-hr-note span {
        display: block;
        color: #7c4a03;
        font-size: 13px;
        line-height: 1.55;
        font-weight: 600;
    }

/* ============================================================
   STATE
============================================================ */

.pd-state-card[b-6dxgl0f8uv] {
    min-height: 280px;
    border: 1px dashed #d9e2ef;
    border-radius: 14px;
    background: #fbfdff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8a98ad;
    text-align: center;
    gap: 10px;
}

.pd-state-icon[b-6dxgl0f8uv] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #3b82f6;
    background: #eff6ff;
}

    .pd-state-icon svg[b-6dxgl0f8uv] {
        width: 22px !important;
        height: 22px !important;
    }

.pd-state-card b[b-6dxgl0f8uv] {
    color: #1e3355;
    font-size: 16px;
    font-weight: 750;
}

.pd-state-card span[b-6dxgl0f8uv] {
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   FORMULA TOOLTIP
============================================================ */

@media (min-width: 769px) {
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-card {
        overflow: visible;
    }
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula {
    position: relative;
    cursor: help;
}

.payroll-detail-page[b-6dxgl0f8uv]  .formula-value {
    text-decoration: underline dotted rgba(59, 130, 246, .45);
    text-underline-offset: 3px;
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula::after {
    content: attr(data-formula);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    z-index: 99999;
    min-width: 280px;
    max-width: 420px;
    padding: 11px 13px;
    color: #1e3355;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 11px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
    white-space: pre-line;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    z-index: 100000;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid #dbe4ef;
    border-bottom: 1px solid #dbe4ef;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula:hover::after,
.payroll-detail-page[b-6dxgl0f8uv]  .has-formula:hover::before {
    opacity: 1;
    visibility: visible;
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula:hover::after {
    transform: translateX(-50%) translateY(0);
}

.payroll-detail-page[b-6dxgl0f8uv]  .has-formula:hover::before {
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table td.has-formula:last-child::after {
    left: auto;
    right: 8px;
    transform: translateX(0) translateY(4px);
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table td.has-formula:last-child::before {
    left: auto;
    right: 28px;
    transform: translateX(0) translateY(4px) rotate(45deg);
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table td.has-formula:last-child:hover::after {
    transform: translateX(0) translateY(0);
}

.payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table td.has-formula:last-child:hover::before {
    transform: translateX(0) translateY(0) rotate(45deg);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1500px) {
    .pd-layout[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
    }

    .pd-side[b-6dxgl0f8uv] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure {
        grid-template-columns: 132px minmax(0, 1fr);
        column-gap: 18px;
        padding: 20px 18px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-donut {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-donut-hole {
        inset: 32px;
    }
}

@media (max-width: 1366px) {
    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 18px 18px 16px;
    }

    .pd-kpi-body b[b-6dxgl0f8uv] {
        font-size: 18px;
    }

    .pd-kpi-icon[b-6dxgl0f8uv] {
        width: 40px;
        height: 40px;
    }

    .pd-employee-card[b-6dxgl0f8uv] {
        grid-template-columns: 58px 170px minmax(0, 1fr);
        padding: 13px 14px;
    }

    .pd-avatar[b-6dxgl0f8uv] {
        width: 50px;
        height: 50px;
    }

    .pd-employee-meta div[b-6dxgl0f8uv] {
        padding: 0 13px;
    }
}

@media (max-width: 1200px) {
    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 16px;
    }

    .pd-toolbar[b-6dxgl0f8uv] {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-actions[b-6dxgl0f8uv] {
        justify-content: flex-end;
    }

    .pd-employee-card[b-6dxgl0f8uv] {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .pd-employee-meta[b-6dxgl0f8uv] {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-left: 0;
        border-top: 1px solid #eef2f7;
        padding-top: 12px;
    }

        .pd-employee-meta div[b-6dxgl0f8uv] {
            padding: 0 14px;
        }

    .pd-kpi-grid[b-6dxgl0f8uv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-two-cols[b-6dxgl0f8uv],
    .pd-money-cols[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
    }

    .pd-side[b-6dxgl0f8uv] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pd-payment-grid[b-6dxgl0f8uv] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .pd-payment-grid div[b-6dxgl0f8uv] {
            border-bottom: 1px solid #eaedf4;
        }

            .pd-payment-grid div:nth-child(3n)[b-6dxgl0f8uv] {
                border-right: 0;
            }

            .pd-payment-grid div:nth-last-child(-n + 3)[b-6dxgl0f8uv] {
                border-bottom: 0;
            }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure {
        grid-template-columns: 142px minmax(0, 1fr);
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-donut {
        width: 128px;
        height: 128px;
        min-width: 128px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-donut-hole {
        inset: 34px;
    }
}

@media (max-width: 992px) {
    .payroll-detail-page[b-6dxgl0f8uv] {
        padding: 8px 0 16px;
    }

    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 15px;
        border-radius: 16px;
    }

    .pd-title-row[b-6dxgl0f8uv] {
        gap: 9px;
    }

        .pd-title-row h2[b-6dxgl0f8uv] {
            width: 100%;
            font-size: 21px;
        }

    .pd-actions[b-6dxgl0f8uv] {
        justify-content: flex-start;
    }

    .pd-btn[b-6dxgl0f8uv] {
        min-height: 40px;
    }

    .pd-employee-card[b-6dxgl0f8uv] {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }

    .pd-employee-meta[b-6dxgl0f8uv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .pd-employee-meta div[b-6dxgl0f8uv] {
            min-height: 54px;
            padding: 10px 14px;
            border-bottom: 1px solid #eef2f7;
        }

            .pd-employee-meta div:nth-child(2n)[b-6dxgl0f8uv] {
                border-right: 0;
            }

            .pd-employee-meta div:nth-last-child(-n + 2)[b-6dxgl0f8uv] {
                border-bottom: 0;
            }

    .pd-kpi-card[b-6dxgl0f8uv] {
        min-height: 78px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table td,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-info-table .pd-info-cell,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table td,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-work-table .pd-work-cell {
        height: 64px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-side-card {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .payroll-detail-page[b-6dxgl0f8uv] {
        padding: 8px 0 14px;
    }

    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 14px;
        border-radius: 14px;
    }

    .pd-toolbar[b-6dxgl0f8uv] {
        gap: 14px;
        padding-bottom: 14px;
        margin-bottom: 14px;
    }

    .pd-breadcrumb[b-6dxgl0f8uv] {
        font-size: 12px;
        gap: 6px;
    }

    .pd-title-row h2[b-6dxgl0f8uv] {
        font-size: 20.5px;
    }

    .pd-pill[b-6dxgl0f8uv] {
        min-height: 28px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .pd-actions[b-6dxgl0f8uv] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pd-btn[b-6dxgl0f8uv],
    .pd-action-btn[b-6dxgl0f8uv] {
        width: 100%;
        min-height: 40px;
        justify-content: center;
    }

    .pd-layout[b-6dxgl0f8uv],
    .pd-main[b-6dxgl0f8uv],
    .pd-side[b-6dxgl0f8uv] {
        gap: 12px;
    }

    .pd-employee-card[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 16px 14px;
    }

    .pd-avatar[b-6dxgl0f8uv] {
        width: 54px;
        height: 54px;
    }

    .pd-employee-name h3[b-6dxgl0f8uv] {
        font-size: 18px;
    }

    .pd-employee-meta[b-6dxgl0f8uv] {
        width: 100%;
        grid-template-columns: 1fr;
        border-top: 1px solid #eef2f7;
    }

        .pd-employee-meta div[b-6dxgl0f8uv] {
            min-height: auto;
            padding: 10px 0;
            border-right: 0;
            border-bottom: 1px solid #eef2f7;
        }

            .pd-employee-meta div:last-child[b-6dxgl0f8uv] {
                border-bottom: 0;
            }

    .pd-kpi-grid[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pd-kpi-card[b-6dxgl0f8uv] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .pd-kpi-body b[b-6dxgl0f8uv] {
        font-size: 18.5px;
    }

    .pd-card-title[b-6dxgl0f8uv],
    .pd-side-title[b-6dxgl0f8uv] {
        min-height: 42px;
        padding: 0 14px;
    }

        .pd-card-title h3[b-6dxgl0f8uv],
        .pd-side-title h3[b-6dxgl0f8uv] {
            font-size: 13.5px;
        }

    .pd-card[b-6dxgl0f8uv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .pd-card[b-6dxgl0f8uv]::-webkit-scrollbar {
            height: 7px;
        }

        .pd-card[b-6dxgl0f8uv]::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .pd-card[b-6dxgl0f8uv]::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-info-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-work-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-money-table {
        min-width: 680px;
    }

    .pd-payment-grid[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
    }

        .pd-payment-grid div[b-6dxgl0f8uv] {
            border-right: 0 !important;
            border-bottom: 1px solid #eaedf4 !important;
        }

            .pd-payment-grid div:last-child[b-6dxgl0f8uv] {
                border-bottom: 0 !important;
            }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-item,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure {
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding: 22px 18px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-list {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .has-formula::after {
        min-width: 240px;
        max-width: 300px;
        font-size: 11.5px;
    }
}

@media (max-width: 576px) {
    .payroll-detail-page[b-6dxgl0f8uv] {
        padding: 6px 0 12px;
    }

    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 12px;
        border-radius: 12px;
    }

    .pd-breadcrumb[b-6dxgl0f8uv] {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .pd-title-row[b-6dxgl0f8uv] {
        gap: 8px;
    }

        .pd-title-row h2[b-6dxgl0f8uv] {
            font-size: 19px;
        }

    .pd-pill[b-6dxgl0f8uv] {
        max-width: 100%;
    }

    .pd-avatar[b-6dxgl0f8uv] {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .pd-kpi-card[b-6dxgl0f8uv] {
        min-height: 72px;
        border-radius: 12px;
    }

    .pd-kpi-icon[b-6dxgl0f8uv] {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

        .pd-kpi-icon svg[b-6dxgl0f8uv] {
            width: 20px !important;
            height: 20px !important;
        }

    .pd-kpi-body span[b-6dxgl0f8uv] {
        font-size: 11.5px;
    }

    .pd-kpi-body b[b-6dxgl0f8uv] {
        font-size: 17px;
    }

    .pd-kpi-body small[b-6dxgl0f8uv] {
        font-size: 11px;
    }

    .pd-card[b-6dxgl0f8uv],
    .pd-side-card[b-6dxgl0f8uv] {
        border-radius: 12px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-info-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-work-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-money-table {
        min-width: 620px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table thead th,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tbody td,
    .payroll-detail-page[b-6dxgl0f8uv]  .pd-money-table tfoot td {
        padding-left: 10px;
        padding-right: 10px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list {
        padding: 12px 14px 14px;
    }

        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-item,
        .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div {
            grid-template-columns: 96px minmax(0, 1fr);
            column-gap: 12px;
        }

            .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-label,
            .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div > span {
                font-size: 12.5px;
            }

            .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-value,
            .payroll-detail-page[b-6dxgl0f8uv]  .pd-summary-list > div > b:not(.pd-mini-status) {
                font-size: 13px;
            }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-hr-note {
        margin: 14px;
        padding: 12px;
        font-size: 12.5px;
    }
}

@media (max-width: 420px) {
    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 10px;
    }

    .pd-title-row h2[b-6dxgl0f8uv] {
        font-size: 18px;
    }

    .pd-btn[b-6dxgl0f8uv],
    .pd-action-btn[b-6dxgl0f8uv] {
        font-size: 12.5px;
    }

    .pd-employee-name h3[b-6dxgl0f8uv] {
        font-size: 17px;
    }

    .pd-payment-grid b[b-6dxgl0f8uv] {
        font-size: 15px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-info-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-work-table,
    .payroll-detail-page[b-6dxgl0f8uv]  table.pd-money-table {
        min-width: 590px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-list {
        max-width: 250px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-structure-item {
        grid-template-columns: 10px minmax(0, 1fr) auto;
        column-gap: 9px;
    }

    .payroll-detail-page[b-6dxgl0f8uv]  .pd-dot {
        width: 10px;
        height: 10px;
        min-width: 10px;
    }
}

/* ============================================================
   PRINT
============================================================ */

@media print {
    .pd-actions[b-6dxgl0f8uv],
    .pd-breadcrumb[b-6dxgl0f8uv] {
        display: none !important;
    }

    .payroll-detail-page[b-6dxgl0f8uv] {
        padding: 0;
        background: #ffffff !important;
    }

    .payroll-detail-shell[b-6dxgl0f8uv] {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .pd-toolbar[b-6dxgl0f8uv] {
        margin-bottom: 12px;
    }

    .pd-layout[b-6dxgl0f8uv] {
        grid-template-columns: 1fr;
    }

    .pd-side[b-6dxgl0f8uv] {
        display: none;
    }

    .pd-card[b-6dxgl0f8uv],
    .pd-employee-card[b-6dxgl0f8uv],
    .pd-kpi-card[b-6dxgl0f8uv] {
        break-inside: avoid;
        box-shadow: none;
    }
}
/* /Components/Pages/BangLuongNhanVien/Index.razor.rz.scp.css */
/* ============================================================
   BANG LUONG NHAN VIEN - CLEAN CSS
   Chuẩn HR enterprise, compact, đồng bộ chi tiết bảng lương
============================================================ */

/* ============================================================
   PAGE LAYOUT
============================================================ */

.payroll-page[b-megut0321s] {
    padding: 10px 0 18px;
    background: #f6f8fc;
    overflow: visible;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
    --payroll-sticky-top: 0px;
    --payroll-table-min-width: 1403px;
}

.payroll-container[b-megut0321s] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

.payroll-content[b-megut0321s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0;
}

    .payroll-content.has-drawer[b-megut0321s] {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

.payroll-main[b-megut0321s] {
    min-width: 0;
}

/* ============================================================
   HEADER
============================================================ */

.payroll-title-row[b-megut0321s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.payroll-title-left[b-megut0321s] {
    min-width: 0;
}

.payroll-breadcrumb[b-megut0321s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.payroll-title-wrap[b-megut0321s] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .payroll-title-wrap h2[b-megut0321s] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.period-pill[b-megut0321s],
.status-pill[b-megut0321s] {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.period-pill[b-megut0321s] {
    color: #346bd7;
    background: #eff6ff;
    border: 1px solid #cfe0fb;
}

.status-pill.orange[b-megut0321s] {
    color: #de7c1f;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.payroll-actions[b-megut0321s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ============================================================
   BUTTONS - BASE
============================================================ */

.payroll-btn[b-megut0321s] {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .payroll-btn i[b-megut0321s],
    .icon-btn i[b-megut0321s],
    .drawer-close i[b-megut0321s] {
        line-height: 1;
    }

    .payroll-btn:disabled[b-megut0321s] {
        opacity: .65;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .payroll-btn.outline[b-megut0321s] {
        color: #334155;
        background: #ffffff;
        border-color: #dbe4ef;
    }

        .payroll-btn.outline:hover:not(:disabled)[b-megut0321s] {
            background: #f7f9fc;
        }

    .payroll-btn.blue[b-megut0321s] {
        color: #ffffff;
        background: linear-gradient(180deg, #4f8ee9 0%, #3d7dde 100%);
        border-color: #3d7dde;
        box-shadow: 0 6px 14px rgba(59, 130, 246, .12);
    }

        .payroll-btn.blue:hover:not(:disabled)[b-megut0321s] {
            background: linear-gradient(180deg, #4386e6 0%, #2f72d6 100%);
            border-color: #2f72d6;
        }

    .payroll-btn.full[b-megut0321s] {
        width: 100%;
    }

/* ============================================================
   HEADER ACTION BUTTONS
   Đồng bộ style với Chi tiết bảng lương
============================================================ */

.payroll-action-btn[b-megut0321s] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .payroll-action-btn:hover:not(:disabled)[b-megut0321s] {
        transform: translateY(-1px);
    }

    .payroll-action-btn:active:not(:disabled)[b-megut0321s] {
        transform: translateY(0);
        box-shadow: none;
    }

    .payroll-action-btn:disabled[b-megut0321s] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .payroll-action-btn:focus-visible[b-megut0321s] {
        outline: none;
    }

.payroll-action-icon[b-megut0321s] {
    width: 15px;
    height: 15px;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
}

    .payroll-action-icon i[b-megut0321s] {
        font-size: 15px;
        line-height: 1;
    }

.payroll-action-icon-text[b-megut0321s] {
    width: auto;
    min-width: 18px;
    height: 15px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Tính lương - xanh dương */
.payroll-action-calc[b-megut0321s] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #ffffff;
}

    .payroll-action-calc:hover:not(:disabled)[b-megut0321s] {
        color: #1d4ed8;
        background: #eff6ff;
        border-color: #93c5fd;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .10);
    }

    .payroll-action-calc:focus-visible[b-megut0321s] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
    }

/* Phân bổ công trình - tím */
.payroll-action-purple[b-megut0321s] {
    color: #6d28d9;
    border-color: #d8b4fe;
    background: #ffffff;
}

    .payroll-action-purple:hover:not(:disabled)[b-megut0321s] {
        color: #5b21b6;
        background: #faf5ff;
        border-color: #c4b5fd;
        box-shadow: 0 6px 14px rgba(109, 40, 217, .10);
    }

    .payroll-action-purple:focus-visible[b-megut0321s] {
        border-color: #a78bfa;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
    }

/* Gửi duyệt - xanh dương chủ đạo */
.payroll-action-submit[b-megut0321s] {
    color: #2563eb;
    border-color: #93c5fd;
    background: #eff6ff;
}

    .payroll-action-submit:hover:not(:disabled)[b-megut0321s] {
        color: #1d4ed8;
        background: #dbeafe;
        border-color: #60a5fa;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .12);
    }

    .payroll-action-submit:focus-visible[b-megut0321s] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

/* Chốt lương - cam */
.payroll-action-warning[b-megut0321s] {
    color: #d97706;
    border-color: #f4a261;
    background: #ffffff;
}

    .payroll-action-warning:hover:not(:disabled)[b-megut0321s] {
        color: #b45309;
        background: #fff7ed;
        border-color: #ea8a2f;
        box-shadow: 0 6px 14px rgba(217, 119, 6, .10);
    }

    .payroll-action-warning:focus-visible[b-megut0321s] {
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
    }

/* Xuất Excel - xanh lá */
.payroll-action-excel[b-megut0321s] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}

    .payroll-action-excel:hover:not(:disabled)[b-megut0321s] {
        color: #065f46;
        background: #d1fae5;
        border-color: #4ade80;
        box-shadow: 0 6px 14px rgba(5, 150, 105, .12);
    }

    .payroll-action-excel:focus-visible[b-megut0321s] {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
    }

/* ============================================================
   ALERT
============================================================ */

.payroll-alert[b-megut0321s] {
    min-height: 42px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

    .payroll-alert.danger[b-megut0321s] {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .payroll-alert.success[b-megut0321s] {
        color: #047857;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
    }

/* ============================================================
   KPI - INLINE SVG ENTERPRISE STYLE
============================================================ */

.payroll-kpi-grid[b-megut0321s] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.payroll-kpi-card[b-megut0321s] {
    position: relative;
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .payroll-kpi-card:hover[b-megut0321s] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.kpi-icon[b-megut0321s] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .13);
}

    .kpi-icon[b-megut0321s]  svg {
        width: 25px;
        height: 25px;
        display: block;
        fill: currentColor !important;
    }

    .kpi-icon[b-megut0321s]  path {
        fill: currentColor !important;
    }

.kpi-symbol[b-megut0321s] {
    display: none;
}

.kpi-icon.blue[b-megut0321s] {
    background: linear-gradient(135deg, #12b7ff 0%, #0677f8 100%);
}

.kpi-icon.green[b-megut0321s] {
    background: linear-gradient(135deg, #13b84f 0%, #06973d 100%);
}

.kpi-icon.red[b-megut0321s] {
    background: linear-gradient(135deg, #ff4d5e 0%, #ff233f 100%);
}

.kpi-icon.blue2[b-megut0321s] {
    background: linear-gradient(135deg, #2563eb 0%, #0b5cff 100%);
}

.kpi-icon.purple[b-megut0321s] {
    background: linear-gradient(135deg, #7d3ff2 0%, #5b25c9 100%);
}

.kpi-icon.pie[b-megut0321s] {
    background: linear-gradient(135deg, #20c997 0%, #16a34a 100%);
}

.kpi-body[b-megut0321s] {
    min-width: 0;
}

.kpi-label[b-megut0321s] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.kpi-value[b-megut0321s] {
    display: block;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.kpi-note[b-megut0321s] {
    display: block;
    margin-top: 4px;
    color: #8a98ad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.payroll-kpi-card:has(.kpi-icon.green) .kpi-value[b-megut0321s],
.payroll-kpi-card:has(.kpi-icon.pie) .kpi-value[b-megut0321s] {
    color: #16a34a;
}

.payroll-kpi-card:has(.kpi-icon.red) .kpi-value[b-megut0321s] {
    color: #ef4444;
}

.payroll-kpi-card:has(.kpi-icon.blue2) .kpi-value[b-megut0321s] {
    color: #2563eb;
}

.payroll-kpi-card:has(.kpi-icon.purple) .kpi-value[b-megut0321s] {
    color: #6d28d9;
}

/* ============================================================
   FILTER
============================================================ */

.payroll-filter-card[b-megut0321s] {
    position: relative;
    z-index: 600;
    margin-bottom: 14px;
    padding: 10px;
    background: #f7f9fc;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.payroll-filter-grid[b-megut0321s] {
    display: grid;
    grid-template-columns: 90px 90px 180px 260px minmax(320px, 1fr) auto;
    gap: 8px;
    align-items: end;
    overflow: visible;
}

.form-group[b-megut0321s] {
    min-width: 0;
}

    .form-group label[b-megut0321s] {
        display: block;
        margin-bottom: 6px;
        color: #66758d;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.25;
    }

    .form-group input[b-megut0321s],
    .form-group select[b-megut0321s] {
        width: 100%;
        height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
    }

        .form-group input[b-megut0321s]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

.input-icon[b-megut0321s] {
    position: relative;
}

    .input-icon input[b-megut0321s] {
        padding-right: 36px;
    }

    .input-icon i[b-megut0321s] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa9bd;
    }

.filter-actions[b-megut0321s] {
    display: flex;
    align-items: end;
    gap: 8px;
}

.payroll-checkbox[b-megut0321s] {
    min-height: 28px;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #66758d;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

    .payroll-checkbox input[b-megut0321s] {
        width: 15px;
        height: 15px;
    }

/* ============================================================
   TABLE CARD / PAGING
============================================================ */

.payroll-table-card[b-megut0321s] {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.payroll-table-title[b-megut0321s] {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

    .payroll-table-title h3[b-megut0321s] {
        margin: 0;
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .payroll-table-title p[b-megut0321s] {
        margin: 5px 0 0;
        color: #7f8da5;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.4;
    }

.payroll-table-status[b-megut0321s] {
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.loading-pill[b-megut0321s] {
    color: #4c87e7;
    font-weight: 700;
}

.payroll-grid-top[b-megut0321s] {
    min-height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid #e8edf5;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.payroll-grid-count[b-megut0321s] {
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.payroll-grid-pager[b-megut0321s] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

    .payroll-grid-pager > *[b-megut0321s],
    .table-footer > *:last-child[b-megut0321s] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .payroll-grid-pager select[b-megut0321s],
    .payroll-grid-pager button[b-megut0321s],
    .table-footer select[b-megut0321s],
    .table-footer button[b-megut0321s],
    .payroll-grid-pager .page-link[b-megut0321s],
    .table-footer .page-link[b-megut0321s] {
        height: 32px;
        min-width: 32px;
        padding: 0 10px;
        border-radius: 9px;
        border: 1px solid #dce5ef;
        background: #ffffff;
        color: #334155;
        font-size: 13px;
        font-weight: 650;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .payroll-grid-pager select[b-megut0321s],
    .table-footer select[b-megut0321s] {
        min-width: 82px;
        padding: 0 9px;
        cursor: pointer;
    }

    .payroll-grid-pager button[b-megut0321s],
    .table-footer button[b-megut0321s] {
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        .payroll-grid-pager button:hover:not(:disabled)[b-megut0321s],
        .table-footer button:hover:not(:disabled)[b-megut0321s] {
            background: #f3f7fd;
            border-color: #c8d7eb;
            color: #2563eb;
        }

        .payroll-grid-pager button:disabled[b-megut0321s],
        .table-footer button:disabled[b-megut0321s] {
            opacity: .55;
            cursor: not-allowed;
        }

        .payroll-grid-pager button.active[b-megut0321s],
        .payroll-grid-pager .active[b-megut0321s],
        .table-footer button.active[b-megut0321s],
        .table-footer .active[b-megut0321s] {
            background: #4c87e7 !important;
            color: #ffffff !important;
            border-color: #4c87e7 !important;
            box-shadow: 0 5px 12px rgba(76, 135, 231, .16);
        }

    .payroll-grid-pager .pagination[b-megut0321s],
    .table-footer .pagination[b-megut0321s] {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .payroll-grid-pager .page-item.active .page-link[b-megut0321s],
    .table-footer .page-item.active .page-link[b-megut0321s] {
        background: #4c87e7;
        color: #ffffff;
        border-color: #4c87e7;
    }

    .payroll-grid-pager .page-item.disabled .page-link[b-megut0321s],
    .table-footer .page-item.disabled .page-link[b-megut0321s] {
        opacity: .55;
        cursor: not-allowed;
    }

/* ============================================================
   TABLE SHELL / SCROLL
============================================================ */

.payroll-table-shell[b-megut0321s] {
    position: relative;
    border-top: 0;
    background: #ffffff;
    overflow: visible;
}

.payroll-head-sticky-wrap[b-megut0321s] {
    position: sticky;
    top: var(--payroll-sticky-top);
    z-index: 300;
    background: #ffffff;
    border-bottom: 1px solid #e7ebf3;
    overflow: visible;
}

.payroll-head-scroll-mirror[b-megut0321s] {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    background: #ffffff;
}

    .payroll-head-scroll-mirror table[b-megut0321s] {
        will-change: transform;
        transform: translateX(0);
    }

.payroll-table-scroll[b-megut0321s] {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

    .payroll-table-scroll[b-megut0321s]::-webkit-scrollbar {
        height: 10px;
    }

    .payroll-table-scroll[b-megut0321s]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .payroll-table-scroll[b-megut0321s]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

        .payroll-table-scroll[b-megut0321s]::-webkit-scrollbar-thumb:hover {
            background: #aebbd0;
        }

/* ============================================================
   TABLE
============================================================ */

.payroll-table[b-megut0321s] {
    width: 100%;
    min-width: var(--payroll-table-min-width);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.payroll-table-head[b-megut0321s],
.payroll-table-body[b-megut0321s] {
    margin: 0;
}

.payroll-table thead[b-megut0321s] {
    position: relative;
    z-index: 1;
}

    .payroll-table thead th[b-megut0321s] {
        height: 46px;
        padding: 8px 10px;
        background: #f6f7fb;
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center !important;
        vertical-align: middle;
        letter-spacing: 0;
        border-right: 1px solid #eaedf4;
        border-bottom: none;
        white-space: nowrap;
        position: static;
        top: auto;
        z-index: auto;
        box-shadow: none;
    }

        .payroll-table thead th:last-child[b-megut0321s] {
            border-right: none;
        }

.payroll-table tbody td[b-megut0321s] {
    height: 56px;
    padding: 10px 10px;
    background: #ffffff;
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    vertical-align: middle;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}

    .payroll-table tbody td:last-child[b-megut0321s] {
        border-right: none;
    }

.payroll-table tbody tr:hover td[b-megut0321s] {
    background: #fbfcff;
}

.payroll-table tbody tr.selected td[b-megut0321s] {
    background: #f8fbff;
}

.payroll-table tbody td:first-child[b-megut0321s] {
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
}

.text-center[b-megut0321s] {
    text-align: center !important;
}

.text-end[b-megut0321s] {
    text-align: right !important;
}

.text-green[b-megut0321s] {
    color: #059669 !important;
}

/* ============================================================
   TABLE HEADER MULTI LINE
============================================================ */

.table-head-multi[b-megut0321s] {
    min-height: 34px;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.15;
    white-space: normal;
}

    .table-head-multi span[b-megut0321s] {
        display: block;
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.15;
    }

    .table-head-multi small[b-megut0321s] {
        display: block;
        color: #7b8aa2;
        font-size: 11.7px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 0;
    }

.payroll-table th.th-compact[b-megut0321s] {
    padding-top: 7px;
    padding-bottom: 7px;
    white-space: normal;
}

/* ============================================================
   EMPLOYEE / TEXT CELLS
============================================================ */

.employee-cell[b-megut0321s] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.employee-info[b-megut0321s],
.drawer-employee-info[b-megut0321s] {
    min-width: 0;
}

.employee-avatar[b-megut0321s] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    flex-shrink: 0;
    box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .08);
}

    .employee-avatar.big[b-megut0321s] {
        width: 54px;
        height: 54px;
        font-size: 22px;
        background: linear-gradient(135deg, #7c3aed, #4f46e5);
    }

.emp-name[b-megut0321s] {
    color: #1e3355;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.emp-code[b-megut0321s],
.bank-info[b-megut0321s] {
    margin-top: 3px;
    color: #3f6fd8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.dept-text[b-megut0321s] {
    display: inline-block;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.work-main[b-megut0321s] {
    color: #1e3355;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.2;
}

.work-sub[b-megut0321s] {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.ot-hours[b-megut0321s] {
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff3e4;
    color: #d28b31;
    font-size: 12px;
    font-weight: 650;
}

.money[b-megut0321s] {
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

    .money.danger[b-megut0321s] {
        color: #ef4444;
        font-weight: 650;
    }

    .money.strong[b-megut0321s] {
        color: #059669;
        font-weight: 700;
    }

/* ============================================================
   STATUS
============================================================ */

.status-badge[b-megut0321s] {
    min-height: 26px;
    padding: 0 11px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

    .status-badge.draft[b-megut0321s] {
        color: #6d28d9;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }

    .status-badge.pending[b-megut0321s] {
        color: #b7832d;
        background: #faf0dd;
        border: 1px solid #eedfbc;
    }

    .status-badge.approved[b-megut0321s] {
        color: #ffffff;
        background: #70c4b8;
        border: 1px solid #70c4b8;
    }

    .status-badge.locked[b-megut0321s] {
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }

/* ============================================================
   ROW ACTIONS
============================================================ */

.payroll-row-actions[b-megut0321s] {
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.icon-btn[b-megut0321s] {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .icon-btn i[b-megut0321s] {
        font-size: 15px;
        line-height: 1;
    }

    .icon-btn.view[b-megut0321s] {
        color: #2563eb;
        background: #eff6ff;
        border-color: #dbeafe;
    }

        .icon-btn.view:hover[b-megut0321s] {
            color: #1d4ed8;
            background: #dbeafe;
            border-color: #bfdbfe;
            box-shadow: 0 6px 14px rgba(37, 99, 235, .12);
            transform: translateY(-1px);
        }

    .icon-btn.allocate[b-megut0321s] {
        color: #7c3aed;
        background: #f5f3ff;
        border-color: #ede9fe;
    }

        .icon-btn.allocate:hover[b-megut0321s] {
            color: #6d28d9;
            background: #ede9fe;
            border-color: #ddd6fe;
            box-shadow: 0 6px 14px rgba(124, 58, 237, .12);
            transform: translateY(-1px);
        }

    .icon-btn.more[b-megut0321s] {
        color: #475569;
        background: #f8fafc;
        border-color: #e2e8f0;
    }

        .icon-btn.more:hover[b-megut0321s] {
            color: #334155;
            background: #f1f5f9;
            border-color: #cbd5e1;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
            transform: translateY(-1px);
        }

    .icon-btn:active[b-megut0321s] {
        transform: translateY(0);
        box-shadow: none;
    }

/* ============================================================
   EMPTY
============================================================ */

.empty-state[b-megut0321s] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
}

    .empty-state i[b-megut0321s] {
        font-size: 40px;
        color: #a7b3c5;
    }

    .empty-state div[b-megut0321s] {
        margin-top: 8px;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
    }

    .empty-state span[b-megut0321s] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
    }

/* ============================================================
   FOOTER
============================================================ */

.table-footer[b-megut0321s] {
    position: relative;
    z-index: 2;
    min-height: 50px;
    padding: 12px 14px;
    border-top: 1px solid #e8edf5;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
}

    .table-footer > span[b-megut0321s] {
        white-space: nowrap;
    }

.pager[b-megut0321s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ============================================================
   DRAWER
============================================================ */

.payroll-drawer[b-megut0321s] {
    height: calc(100vh - 150px);
    position: sticky;
    top: 86px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.drawer-header[b-megut0321s] {
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .drawer-header h3[b-megut0321s] {
        margin: 0;
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

.drawer-close[b-megut0321s] {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e9f2;
    background: #ffffff;
    color: #7b8798;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

    .drawer-close:hover[b-megut0321s] {
        background: #f6f8fc;
        color: #24395c;
    }

.drawer-employee-card[b-megut0321s] {
    margin: 14px;
    padding: 14px;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    background: #fbfdff;
}

.drawer-tabs[b-megut0321s] {
    padding: 0 14px 10px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

    .drawer-tabs button[b-megut0321s] {
        height: 32px;
        padding: 0;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #66758d;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

        .drawer-tabs button.active[b-megut0321s] {
            color: #4c87e7;
            border-bottom-color: #4c87e7;
        }

.drawer-body[b-megut0321s] {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
}

.drawer-card[b-megut0321s] {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #ffffff;
}

    .drawer-card h4[b-megut0321s] {
        margin: 0 0 12px;
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

.detail-row[b-megut0321s] {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

    .detail-row b[b-megut0321s] {
        color: #405b78;
        font-size: 13px;
        font-weight: 600;
        text-align: right;
    }

    .detail-row.strong b[b-megut0321s],
    .detail-row.strong span[b-megut0321s] {
        color: #059669;
        font-weight: 700;
    }

    .detail-row.danger b[b-megut0321s],
    .detail-row.danger span[b-megut0321s] {
        color: #ef4444;
        font-weight: 700;
    }

.drawer-empty[b-megut0321s] {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}

.drawer-footer[b-megut0321s] {
    padding: 14px;
    border-top: 1px solid #e8edf5;
    background: #fbfcff;
}

/* ============================================================
   PROJECT ALLOCATION CARD
============================================================ */

.project-alloc-card[b-megut0321s] {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    background: #fbfdff;
}

.project-alloc-head[b-megut0321s] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

    .project-alloc-head b[b-megut0321s] {
        display: block;
        color: #24395c;
        font-size: 13px;
        font-weight: 700;
    }

    .project-alloc-head span[b-megut0321s] {
        display: block;
        margin-top: 2px;
        color: #64748b;
        font-size: 12px;
    }

    .project-alloc-head strong[b-megut0321s] {
        color: #4c87e7;
        font-size: 13px;
    }

.project-note[b-megut0321s] {
    margin-top: 8px;
    padding: 8px;
    border-radius: 9px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 12px;
}

/* ============================================================
   DEPARTMENT TREE SELECT
============================================================ */

.payroll-dept-filter[b-megut0321s] {
    position: relative;
    z-index: 700;
    overflow: visible;
}

    .payroll-dept-filter:has(.payroll-tree-select.is-open)[b-megut0321s] {
        z-index: 1200;
    }

.payroll-tree-select[b-megut0321s] {
    position: relative;
    width: 100%;
    z-index: 1;
}

    .payroll-tree-select.is-open[b-megut0321s] {
        z-index: 1300;
    }

.payroll-tree-select__control[b-megut0321s] {
    width: 100%;
    height: 38px;
    padding: 0 9px 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .payroll-tree-select__control:hover[b-megut0321s] {
        border-color: #bfd0e6;
        background: #fbfdff;
    }

.payroll-tree-select.is-open .payroll-tree-select__control[b-megut0321s] {
    border-color: #7fb3ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.payroll-tree-select__value[b-megut0321s] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.payroll-tree-select__clear[b-megut0321s],
.payroll-select-dropdown__clear[b-megut0321s] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .payroll-tree-select__clear:hover[b-megut0321s],
    .payroll-select-dropdown__clear:hover[b-megut0321s] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

.payroll-tree-select__chevron[b-megut0321s],
.payroll-select-dropdown__chevron[b-megut0321s] {
    width: 18px;
    height: 18px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

    .payroll-tree-select__chevron[b-megut0321s]::before,
    .payroll-select-dropdown__chevron[b-megut0321s]::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
        transform: translateY(1px);
    }

.payroll-tree-select__panel[b-megut0321s],
.payroll-select-dropdown__panel[b-megut0321s] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 360px;
    max-width: min(360px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.payroll-tree-select__panel[b-megut0321s] {
    z-index: 1400;
}

.payroll-select-dropdown__panel[b-megut0321s] {
    z-index: 1450;
}

.payroll-tree-select__search[b-megut0321s],
.payroll-select-dropdown__search[b-megut0321s] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .payroll-tree-select__search input[b-megut0321s],
    .payroll-select-dropdown__search input[b-megut0321s] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 32px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .payroll-tree-select__search input[b-megut0321s]::placeholder,
        .payroll-select-dropdown__search input[b-megut0321s]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .payroll-tree-select__search input:focus[b-megut0321s],
        .payroll-select-dropdown__search input:focus[b-megut0321s] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

.payroll-tree-select__search-icon[b-megut0321s],
.payroll-select-dropdown__search-icon[b-megut0321s] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.payroll-tree-select__list[b-megut0321s],
.payroll-select-dropdown__list[b-megut0321s] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

    .payroll-tree-select__list[b-megut0321s]::-webkit-scrollbar,
    .payroll-select-dropdown__list[b-megut0321s]::-webkit-scrollbar {
        width: 8px;
    }

    .payroll-tree-select__list[b-megut0321s]::-webkit-scrollbar-thumb,
    .payroll-select-dropdown__list[b-megut0321s]::-webkit-scrollbar-thumb {
        background: #dbe4f0;
        border-radius: 999px;
    }

    .payroll-tree-select__list[b-megut0321s]::-webkit-scrollbar-track,
    .payroll-select-dropdown__list[b-megut0321s]::-webkit-scrollbar-track {
        background: transparent;
    }

.payroll-tree-select__row[b-megut0321s] {
    position: relative;
    min-height: 34px;
    margin: 2px 0;
    padding-top: 0;
    padding-right: 9px;
    padding-bottom: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .payroll-tree-select__row[b-megut0321s]::before,
    .payroll-select-dropdown__option[b-megut0321s]::before {
        content: "";
        position: absolute;
        left: 4px;
        border-radius: 999px;
        background: transparent;
    }

    .payroll-tree-select__row[b-megut0321s]::before {
        top: 7px;
        bottom: 7px;
        width: 2px;
    }

    .payroll-tree-select__row:hover[b-megut0321s],
    .payroll-select-dropdown__option:hover[b-megut0321s] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .payroll-tree-select__row.is-selected[b-megut0321s],
    .payroll-select-dropdown__option.is-selected[b-megut0321s] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .payroll-tree-select__row.is-selected[b-megut0321s]::before,
        .payroll-select-dropdown__option.is-selected[b-megut0321s]::before {
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
            width: 3px;
        }

    .payroll-tree-select__row.is-matched:not(.is-selected)[b-megut0321s] {
        background: #fff9ed;
        border-color: #fde6c5;
        box-shadow: inset 3px 0 0 #f59e0b;
    }

.payroll-tree-select__row--all[b-megut0321s] {
    padding-left: 10px;
    font-weight: 800;
}

.payroll-tree-select__toggle[b-megut0321s] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

    .payroll-tree-select__toggle:hover[b-megut0321s] {
        background: #e9eef7;
        color: #0f172a;
    }

.payroll-tree-select__toggle--empty[b-megut0321s] {
    cursor: default;
    opacity: .35;
}

    .payroll-tree-select__toggle--empty:hover[b-megut0321s] {
        background: transparent;
    }

.payroll-tree-select__node-icon[b-megut0321s] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
}

    .payroll-tree-select__node-icon.root[b-megut0321s] {
        color: #2563eb;
        background: #eff6ff;
    }

    .payroll-tree-select__node-icon.parent[b-megut0321s] {
        color: #0284c7;
        background: #e0f2fe;
    }

    .payroll-tree-select__node-icon.leaf[b-megut0321s] {
        color: #16a34a;
        background: #ecfdf5;
    }

.payroll-tree-select__row.is-selected .payroll-tree-select__node-icon[b-megut0321s] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.payroll-tree-select__label[b-megut0321s] {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.payroll-tree-select__empty[b-megut0321s],
.payroll-select-dropdown__empty[b-megut0321s] {
    margin: 4px;
    padding: 18px 12px;
    border: 1px dashed #d9e2ef;
    border-radius: 12px;
    background: #fbfdff;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ============================================================
   PROJECT SELECT
============================================================ */

.payroll-project-filter[b-megut0321s] {
    position: relative;
    z-index: 650;
    overflow: visible;
}

    .payroll-project-filter:has(.payroll-select-dropdown.is-open)[b-megut0321s] {
        z-index: 1250;
    }

.payroll-select-dropdown[b-megut0321s] {
    position: relative;
    width: 100%;
    z-index: 1;
}

    .payroll-select-dropdown.is-open[b-megut0321s] {
        z-index: 1350;
    }

.payroll-select-dropdown__control[b-megut0321s] {
    width: 100%;
    height: 38px;
    padding: 0 9px 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .payroll-select-dropdown__control:hover[b-megut0321s] {
        border-color: #bfd0e6;
        background: #fbfdff;
    }

.payroll-select-dropdown.is-open .payroll-select-dropdown__control[b-megut0321s] {
    border-color: #7fb3ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.payroll-select-dropdown__value[b-megut0321s] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.payroll-select-dropdown__option[b-megut0321s] {
    position: relative;
    min-height: 38px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .payroll-select-dropdown__option[b-megut0321s]::before {
        top: 8px;
        bottom: 8px;
        width: 2px;
    }

.payroll-select-dropdown__option--all[b-megut0321s] {
    font-weight: 800;
}

.payroll-select-dropdown__option-icon[b-megut0321s] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
}

    .payroll-select-dropdown__option-icon.all[b-megut0321s] {
        color: #2563eb;
        background: #eff6ff;
    }

    .payroll-select-dropdown__option-icon.project[b-megut0321s] {
        color: #7c3aed;
        background: #f5f3ff;
    }

.payroll-select-dropdown__option.is-selected .payroll-select-dropdown__option-icon[b-megut0321s] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.payroll-select-dropdown__option-content[b-megut0321s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payroll-select-dropdown__option-text[b-megut0321s] {
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.payroll-select-dropdown__option-code[b-megut0321s] {
    color: #7b8aa2;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
}

.payroll-select-dropdown__option.is-selected .payroll-select-dropdown__option-code[b-megut0321s] {
    color: #3b6fd9;
}

/* Dropdown z-index guards */
.payroll-filter-card:has(.payroll-tree-select.is-open)[b-megut0321s],
.payroll-filter-card:has(.payroll-select-dropdown.is-open)[b-megut0321s] {
    z-index: 1500;
}

    .payroll-filter-card:has(.payroll-tree-select.is-open) + .payroll-table-card[b-megut0321s],
    .payroll-filter-card:has(.payroll-select-dropdown.is-open) + .payroll-table-card[b-megut0321s] {
        z-index: 1;
    }

/* ============================================================
   SCROLL TO TOP
============================================================ */

.payroll-scroll-top-btn[b-megut0321s] {
    position: fixed;
    right: 28px;
    bottom: 42px;
    z-index: 9999;
    min-width: 118px;
    height: 42px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    border: 1px solid #d7e5fb;
    background: rgba(255, 255, 255, .96);
    color: #2563eb;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.97);
    pointer-events: none;
    backdrop-filter: blur(8px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .payroll-scroll-top-btn.show[b-megut0321s] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .payroll-scroll-top-btn .scroll-top-icon[b-megut0321s] {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        font-weight: 900;
        box-shadow: 0 5px 12px rgba(37, 99, 235, .2);
        transform: translateY(-1px);
    }

    .payroll-scroll-top-btn span[b-megut0321s] {
        line-height: 1;
        white-space: nowrap;
    }

    .payroll-scroll-top-btn:hover[b-megut0321s] {
        border-color: #9cc4fb;
        color: #1d4ed8;
        box-shadow: 0 14px 30px rgba(37, 99, 235, .16);
        transform: translateY(-2px) scale(1);
    }

    .payroll-scroll-top-btn:active[b-megut0321s] {
        transform: translateY(0) scale(.98);
        box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
    }

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1500px) {
    .payroll-content.has-drawer[b-megut0321s] {
        grid-template-columns: 1fr;
    }

    .payroll-drawer[b-megut0321s] {
        position: relative;
        top: 0;
        height: auto;
        max-height: none;
    }
}

@media (max-width: 1400px) {
    .payroll-kpi-grid[b-megut0321s] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .payroll-filter-grid[b-megut0321s] {
        grid-template-columns: 90px 90px minmax(180px, 1fr) minmax(240px, 1.4fr);
    }

    .form-group.search[b-megut0321s] {
        grid-column: span 3;
    }

    .filter-actions[b-megut0321s] {
        justify-content: flex-end;
    }
}

@media (max-width: 1366px) {
    .payroll-title-wrap h2[b-megut0321s] {
        font-size: 21.5px;
    }

    .kpi-value[b-megut0321s] {
        font-size: 18px;
    }

    .payroll-kpi-card[b-megut0321s] {
        min-height: 80px;
    }
}

@media (max-width: 992px) {
    .payroll-title-row[b-megut0321s] {
        flex-direction: column;
        align-items: stretch;
    }

    .payroll-actions[b-megut0321s] {
        justify-content: flex-end;
    }

    .payroll-kpi-grid[b-megut0321s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payroll-filter-grid[b-megut0321s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group.search[b-megut0321s] {
        grid-column: span 2;
    }

    .filter-actions[b-megut0321s] {
        grid-column: span 2;
        justify-content: flex-end;
    }

    .payroll-grid-top[b-megut0321s],
    .table-footer[b-megut0321s] {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .payroll-grid-pager[b-megut0321s] {
        margin-left: 0;
        justify-content: flex-end;
    }

    .payroll-table thead th[b-megut0321s],
    .table-head-multi span[b-megut0321s] {
        font-size: 12.8px;
    }

    .payroll-table tbody td[b-megut0321s] {
        height: 54px;
        font-size: 13px;
    }

    .kpi-value[b-megut0321s] {
        font-size: 18px;
    }

    .payroll-tree-select__panel[b-megut0321s],
    .payroll-select-dropdown__panel[b-megut0321s] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .payroll-scroll-top-btn[b-megut0321s] {
        right: 16px;
        bottom: 18px;
        width: 44px;
        min-width: 44px;
        padding: 0;
    }

        .payroll-scroll-top-btn span[b-megut0321s] {
            display: none;
        }
}

@media (max-width: 640px) {
    .payroll-container[b-megut0321s] {
        padding: 16px;
    }

    .payroll-title-wrap h2[b-megut0321s] {
        font-size: 19px;
        font-weight: 750;
    }

    .period-pill[b-megut0321s],
    .status-pill[b-megut0321s] {
        font-size: 12.5px;
        font-weight: 650;
    }

    .payroll-kpi-grid[b-megut0321s] {
        grid-template-columns: 1fr;
    }

    .payroll-kpi-card[b-megut0321s] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .kpi-icon[b-megut0321s] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 13px;
    }

        .kpi-icon[b-megut0321s]  svg {
            width: 23px;
            height: 23px;
        }

    .kpi-label[b-megut0321s] {
        font-size: 11.5px;
    }

    .kpi-value[b-megut0321s] {
        font-size: 17px;
    }

    .kpi-note[b-megut0321s] {
        font-size: 11px;
    }

    .payroll-filter-grid[b-megut0321s] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-megut0321s] {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .payroll-actions[b-megut0321s] {
        flex-direction: column;
        align-items: stretch;
    }

    .payroll-btn[b-megut0321s],
    .payroll-action-btn[b-megut0321s] {
        width: 100%;
        min-height: 40px;
    }

    .payroll-grid-top[b-megut0321s],
    .table-footer[b-megut0321s] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

        .payroll-grid-pager[b-megut0321s],
        .table-footer > *:last-child[b-megut0321s] {
            justify-content: flex-end;
            width: 100%;
        }

    .payroll-table thead th[b-megut0321s],
    .table-head-multi span[b-megut0321s] {
        font-size: 12.5px;
    }

    .table-head-multi small[b-megut0321s] {
        font-size: 11.3px;
    }

    .payroll-table tbody td[b-megut0321s] {
        font-size: 13px;
    }
}
/* /Components/Pages/ChamCong/Index.razor.rz.scp.css */
/* ============================================================
   TÌNH HÌNH RA VÀO - CLEAN CSS
   Layout outer card giống Tổng hợp công tháng
   Header + thông tin nhân viên + thao tác nhanh
   Đã tối ưu phòng ban / ca hiện tại khi tên dài
============================================================ */

/* ============================================================
   1. PAGE LAYOUT - OUTER CARD
============================================================ */

.thrv-page[b-4x5spa0kk0] {
    --thrv-text: #24395c;
    --thrv-title: #1e3355;
    --thrv-muted: #8492a8;
    --thrv-border: #e8edf5;
    --thrv-border-soft: #eef2f7;
    --thrv-bg: #f6f8fc;
    --thrv-card-bg: #ffffff;
    --thrv-blue: #2563eb;
    --thrv-green: #059669;
    --thrv-red: #ef4444;
    --thrv-purple: #7c3aed;
    --thrv-amber: #d97706;
    --thrv-orange: #ea580c;
    --thrv-sticky-top: 0px;
    --thrv-table-min-width: 1400px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 10px 0 18px;
    padding: 20px 22px 18px;
    background: var(--thrv-card-bg);
    color: var(--thrv-text);
    border: 1px solid var(--thrv-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 13px;
    font-weight: 500;
}

    .thrv-page .text-center[b-4x5spa0kk0] {
        text-align: center !important;
    }

    .thrv-page .text-end[b-4x5spa0kk0] {
        text-align: right !important;
    }

/* ============================================================
   2. HEADER - NẰM TRONG OUTER CARD
============================================================ */

.thrv-head[b-4x5spa0kk0] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.35fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 0 0 16px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--thrv-border-soft);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

    .thrv-head[b-4x5spa0kk0]::before {
        display: none;
    }

.thrv-head-left[b-4x5spa0kk0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.thrv-back[b-4x5spa0kk0] {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6a88cc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .thrv-back:hover[b-4x5spa0kk0] {
        background: #eff6ff;
        color: var(--thrv-blue);
        transform: translateX(-1px);
    }

    .thrv-back i[b-4x5spa0kk0] {
        font-size: 22px;
        line-height: 1;
    }

.thrv-head-text[b-4x5spa0kk0] {
    min-width: 0;
}

    .thrv-head-text h1[b-4x5spa0kk0] {
        margin: 0;
        color: var(--thrv-title);
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.thrv-sub[b-4x5spa0kk0] {
    max-width: 560px;
    margin-top: 6px;
    color: var(--thrv-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* ============================================================
   3. EMPLOYEE INFO IN HEADER
============================================================ */

.thrv-head-employee[b-4x5spa0kk0] {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #e4ecf7;
    border-radius: 16px;
    background: rgba(248, 251, 255, .92);
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    overflow: hidden;
}

    .thrv-head-employee[b-4x5spa0kk0]::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background: #edf2f8;
    }

.thrv-head-emp-avatar[b-4x5spa0kk0] {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dbe7fb;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .055);
}

.thrv-head-emp-avatar-img[b-4x5spa0kk0] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.thrv-head-emp-avatar-fallback[b-4x5spa0kk0] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: .02em;
    user-select: none;
}

.thrv-head-emp-info[b-4x5spa0kk0] {
    min-width: 0;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.thrv-head-emp-main[b-4x5spa0kk0] {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.thrv-head-emp-code[b-4x5spa0kk0] {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.thrv-head-emp-name[b-4x5spa0kk0] {
    min-width: 0;
    color: var(--thrv-title);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Meta chip row */
.thrv-head-emp-meta[b-4x5spa0kk0] {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Chip chung: mềm hơn, không còn đậm gắt */
.thrv-head-emp-chip[b-4x5spa0kk0] {
    min-width: 0;
    min-height: 30px;
    max-width: 185px;
    padding: 5px 9px;
    border-radius: 10px;
    border: 1px solid #e8eef7;
    background: rgba(255, 255, 255, .82);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    box-shadow: none;
}

    /* Phòng ban cho rộng hơn nhưng vẫn không phá layout */
    .thrv-head-emp-chip:first-child[b-4x5spa0kk0] {
        flex: 1 1 230px;
        max-width: 260px;
    }

    /* Chức vụ giữ vừa đủ */
    .thrv-head-emp-chip:nth-child(2)[b-4x5spa0kk0] {
        flex: 0 1 150px;
        max-width: 170px;
    }

/* Ca hiện tại cho rộng hơn vì tên ca hay dài */
.thrv-head-emp-chip--ca[b-4x5spa0kk0] {
    flex: 1 1 220px;
    max-width: 280px;
    border-color: #dbe8fb;
    background: rgba(243, 248, 255, .82);
}

/* Label nhẹ lại, không đập vào mắt */
.thrv-head-emp-chip-label[b-4x5spa0kk0] {
    color: #9aa8bb;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Value nhẹ hơn, ellipsis chắc chắn khi dài */
.thrv-head-emp-chip-value[b-4x5spa0kk0] {
    min-width: 0;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Riêng phòng ban giảm độ đậm thêm một chút */
.thrv-head-emp-chip:first-child .thrv-head-emp-chip-value[b-4x5spa0kk0] {
    color: #52637a;
    font-weight: 590;
}

/* Ca hiện tại: pill mềm, không quá xanh đậm */
.thrv-head-emp-ca[b-4x5spa0kk0] {
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f6ff;
    color: #2563eb;
    border: 1px solid #d4e3ff;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 680;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================================================
   4. HEADER ACTION BUTTONS
============================================================ */

.thrv-head-actions[b-4x5spa0kk0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid #edf2f8;
}

.thrv-action-btn[b-4x5spa0kk0] {
    min-width: auto;
    width: auto;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .thrv-action-btn:hover:not(:disabled)[b-4x5spa0kk0] {
        transform: translateY(-1px);
    }

    .thrv-action-btn:active:not(:disabled)[b-4x5spa0kk0] {
        transform: translateY(0);
        box-shadow: none;
    }

    .thrv-action-btn:disabled[b-4x5spa0kk0] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .thrv-action-btn:focus-visible[b-4x5spa0kk0] {
        outline: none;
    }

.thrv-action-icon[b-4x5spa0kk0] {
    width: 15px;
    height: 15px;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
}

    .thrv-action-icon i[b-4x5spa0kk0] {
        font-size: 15px;
        line-height: 1;
    }

.thrv-action-icon-text[b-4x5spa0kk0] {
    width: auto;
    min-width: 18px;
    height: 15px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.thrv-action-today[b-4x5spa0kk0] {
    color: #2563eb !important;
    border-color: #bfdbfe !important;
    background: #ffffff !important;
}

    .thrv-action-today:hover:not(:disabled)[b-4x5spa0kk0] {
        color: #1d4ed8 !important;
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .10) !important;
    }

    .thrv-action-today:focus-visible[b-4x5spa0kk0] {
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .14) !important;
    }

.thrv-action-excel[b-4x5spa0kk0] {
    color: #047857 !important;
    border-color: #86efac !important;
    background: #ecfdf5 !important;
}

    .thrv-action-excel:hover:not(:disabled)[b-4x5spa0kk0] {
        color: #065f46 !important;
        background: #d1fae5 !important;
        border-color: #4ade80 !important;
        box-shadow: 0 6px 14px rgba(5, 150, 105, .12) !important;
    }

    .thrv-action-excel:focus-visible[b-4x5spa0kk0] {
        border-color: #22c55e !important;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .14) !important;
    }

.thrv-action-primary[b-4x5spa0kk0] {
    color: #6d28d9 !important;
    border-color: #d8b4fe !important;
    background: #ffffff !important;
}

    .thrv-action-primary:hover:not(:disabled)[b-4x5spa0kk0] {
        color: #5b21b6 !important;
        background: #faf5ff !important;
        border-color: #c4b5fd !important;
        box-shadow: 0 6px 14px rgba(109, 40, 217, .10) !important;
    }

.thrv-btn-spinner[b-4x5spa0kk0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(21, 128, 61, .25);
    border-top-color: #15803d;
    border-radius: 50%;
    animation: thrv-spin-b-4x5spa0kk0 .7s linear infinite;
    flex-shrink: 0;
}

@keyframes thrv-spin-b-4x5spa0kk0 {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   5. KPI - INLINE SVG ENTERPRISE STYLE
============================================================ */

.thrv-kpi-grid[b-4x5spa0kk0] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.thrv-kpi-card[b-4x5spa0kk0] {
    position: relative;
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--thrv-border);
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .thrv-kpi-card:hover[b-4x5spa0kk0] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.thrv-kpi-icon[b-4x5spa0kk0] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .13);
}

    .thrv-kpi-icon[b-4x5spa0kk0]  svg {
        width: 25px;
        height: 25px;
        display: block;
        fill: currentColor !important;
    }

    .thrv-kpi-icon[b-4x5spa0kk0]  path {
        fill: currentColor !important;
    }

.thrv-kpi-symbol[b-4x5spa0kk0] {
    display: none;
}

.thrv-kpi-icon.blue[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #12b7ff 0%, #0677f8 100%);
}

.thrv-kpi-icon.green[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #13b84f 0%, #06973d 100%);
}

.thrv-kpi-icon.amber[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.thrv-kpi-icon.orange[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #ff9b14 0%, #ff7a00 100%);
}

.thrv-kpi-icon.purple[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #7d3ff2 0%, #5b25c9 100%);
}

.thrv-kpi-icon.red[b-4x5spa0kk0] {
    background: linear-gradient(135deg, #ff4d5e 0%, #ff233f 100%);
}

.thrv-kpi-body[b-4x5spa0kk0] {
    min-width: 0;
}

.thrv-kpi-label[b-4x5spa0kk0] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.thrv-kpi-value[b-4x5spa0kk0] {
    display: block;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.thrv-kpi-note[b-4x5spa0kk0] {
    display: block;
    margin-top: 4px;
    color: #8a98ad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.thrv-kpi-card:has(.thrv-kpi-icon.green) .thrv-kpi-value[b-4x5spa0kk0] {
    color: #16a34a;
}

.thrv-kpi-card:has(.thrv-kpi-icon.amber) .thrv-kpi-value[b-4x5spa0kk0],
.thrv-kpi-card:has(.thrv-kpi-icon.orange) .thrv-kpi-value[b-4x5spa0kk0] {
    color: #f97316;
}

.thrv-kpi-card:has(.thrv-kpi-icon.red) .thrv-kpi-value[b-4x5spa0kk0] {
    color: #ef4444;
}

.thrv-kpi-card:has(.thrv-kpi-icon.purple) .thrv-kpi-value[b-4x5spa0kk0] {
    color: #6d28d9;
}

/* ============================================================
   6. FILTER BAR
============================================================ */

.thrv-filter-card[b-4x5spa0kk0] {
    position: relative;
    z-index: 600;
    padding: 10px;
    background: #f7f9fc;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.thrv-filter-grid[b-4x5spa0kk0] {
    display: grid;
    grid-template-columns: 90px 90px 210px 130px 130px minmax(280px, 1fr);
    gap: 8px;
    align-items: end;
    overflow: visible;
}

.thrv-form-group[b-4x5spa0kk0] {
    min-width: 0;
    position: relative;
    overflow: visible;
}

    .thrv-form-group label[b-4x5spa0kk0] {
        display: block;
        margin-bottom: 6px;
        color: #66758d;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.25;
    }

.thrv-input-icon[b-4x5spa0kk0] {
    position: relative;
}

    .thrv-input-icon input[b-4x5spa0kk0] {
        width: 100%;
        height: 38px;
        padding: 0 36px 0 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        .thrv-input-icon input[b-4x5spa0kk0]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .thrv-input-icon input:focus[b-4x5spa0kk0] {
            border-color: #93c5fd;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

    .thrv-input-icon i[b-4x5spa0kk0] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa9bd;
        font-size: 15px;
        line-height: 1;
    }

.thrv-filter-extra[b-4x5spa0kk0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.thrv-filter-check[b-4x5spa0kk0] {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #e3eaf3;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
}

    .thrv-filter-check:hover[b-4x5spa0kk0] {
        border-color: #cfe0ff;
        background: #f7fbff;
        color: #1d4ed8;
    }

    .thrv-filter-check input[b-4x5spa0kk0] {
        margin: 0;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* ============================================================
   7. CUSTOM SELECT DROPDOWN
============================================================ */

.thrv-select-dropdown[b-4x5spa0kk0] {
    position: relative;
    width: 100%;
    z-index: 1;
}

    .thrv-select-dropdown.is-open[b-4x5spa0kk0] {
        z-index: 1400;
    }

.thrv-select-dropdown__control[b-4x5spa0kk0] {
    width: 100%;
    height: 38px;
    padding: 0 9px 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .thrv-select-dropdown__control:hover[b-4x5spa0kk0] {
        border-color: #bfd0e6;
        background: #fbfdff;
    }

.thrv-select-dropdown.is-open .thrv-select-dropdown__control[b-4x5spa0kk0] {
    border-color: #7fb3ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.thrv-select-dropdown__value[b-4x5spa0kk0] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.thrv-select-dropdown__clear[b-4x5spa0kk0] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .thrv-select-dropdown__clear:hover[b-4x5spa0kk0] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

.thrv-select-dropdown__chevron[b-4x5spa0kk0] {
    width: 18px;
    height: 18px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

    .thrv-select-dropdown__chevron[b-4x5spa0kk0]::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
        transform: translateY(1px);
    }

.thrv-select-dropdown__panel[b-4x5spa0kk0] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 340px;
    max-width: min(340px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
    z-index: 1500;
}

.thrv-month-panel[b-4x5spa0kk0],
.thrv-year-panel[b-4x5spa0kk0],
.thrv-day-panel[b-4x5spa0kk0] {
    width: 260px;
}

.thrv-status-panel[b-4x5spa0kk0] {
    width: 360px;
}

.thrv-select-dropdown__search[b-4x5spa0kk0] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .thrv-select-dropdown__search input[b-4x5spa0kk0] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 32px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
    }

        .thrv-select-dropdown__search input[b-4x5spa0kk0]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .thrv-select-dropdown__search input:focus[b-4x5spa0kk0] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

.thrv-select-dropdown__search-icon[b-4x5spa0kk0] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.thrv-select-dropdown__list[b-4x5spa0kk0] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

    .thrv-select-dropdown__list[b-4x5spa0kk0]::-webkit-scrollbar {
        width: 8px;
    }

    .thrv-select-dropdown__list[b-4x5spa0kk0]::-webkit-scrollbar-thumb {
        background: #dbe4f0;
        border-radius: 999px;
    }

    .thrv-select-dropdown__list[b-4x5spa0kk0]::-webkit-scrollbar-track {
        background: transparent;
    }

.thrv-select-dropdown__option[b-4x5spa0kk0] {
    position: relative;
    min-height: 38px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .thrv-select-dropdown__option[b-4x5spa0kk0]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .thrv-select-dropdown__option:hover[b-4x5spa0kk0] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .thrv-select-dropdown__option.is-selected[b-4x5spa0kk0] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .thrv-select-dropdown__option.is-selected[b-4x5spa0kk0]::before {
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        }

.thrv-select-dropdown__option--all[b-4x5spa0kk0] {
    font-weight: 800;
}

.thrv-select-dropdown__option-icon[b-4x5spa0kk0] {
    width: 28px;
    height: 24px;
    min-width: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
}

    .thrv-select-dropdown__option-icon.all[b-4x5spa0kk0],
    .thrv-select-dropdown__option-icon.day[b-4x5spa0kk0] {
        color: #2563eb;
        background: #eff6ff;
    }

    .thrv-select-dropdown__option-icon.ok[b-4x5spa0kk0],
    .thrv-select-dropdown__option-icon.leave[b-4x5spa0kk0] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .thrv-select-dropdown__option-icon.late[b-4x5spa0kk0],
    .thrv-select-dropdown__option-icon.early[b-4x5spa0kk0] {
        color: #d97706;
        background: #fff7ed;
    }

    .thrv-select-dropdown__option-icon.absent[b-4x5spa0kk0] {
        color: #ef4444;
        background: #fff1f2;
    }

    .thrv-select-dropdown__option-icon.travel[b-4x5spa0kk0] {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .thrv-select-dropdown__option-icon.off[b-4x5spa0kk0] {
        color: #64748b;
        background: #f1f5f9;
    }

.thrv-select-dropdown__option.is-selected .thrv-select-dropdown__option-icon[b-4x5spa0kk0] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.thrv-select-dropdown__option-content[b-4x5spa0kk0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thrv-select-dropdown__option-text[b-4x5spa0kk0] {
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thrv-select-dropdown__option-code[b-4x5spa0kk0] {
    color: #7b8aa2;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================================================
   8. TABLE SHELL
============================================================ */

.thrv2-table-shell[b-4x5spa0kk0] {
    position: relative;
    border: 1px solid var(--thrv-border);
    border-radius: 14px;
    background: #ffffff;
    overflow: visible;
}

.thrv2-table-head[b-4x5spa0kk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf1f7;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border-radius: 14px 14px 0 0;
}

.thrv2-table-head-left[b-4x5spa0kk0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.thrv2-table-title[b-4x5spa0kk0] {
    color: var(--thrv-title);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.thrv2-table-sub[b-4x5spa0kk0] {
    color: #7b8ba1;
    font-size: 12px;
    font-weight: 500;
}

.thrv2-table-badge-count[b-4x5spa0kk0] {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.thrv2-head-sticky-wrap[b-4x5spa0kk0] {
    position: sticky;
    top: var(--thrv-sticky-top);
    z-index: 300;
    background: #ffffff;
    border-bottom: 1px solid #e7ebf3;
    overflow: visible;
}

.thrv2-head-scroll-mirror[b-4x5spa0kk0] {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    background: #ffffff;
}

    .thrv2-head-scroll-mirror table[b-4x5spa0kk0] {
        will-change: transform;
        transform: translateX(0);
    }

.thrv2-table-scroll[b-4x5spa0kk0] {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

    .thrv2-table-scroll[b-4x5spa0kk0]::-webkit-scrollbar {
        height: 10px;
    }

    .thrv2-table-scroll[b-4x5spa0kk0]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .thrv2-table-scroll[b-4x5spa0kk0]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

        .thrv2-table-scroll[b-4x5spa0kk0]::-webkit-scrollbar-thumb:hover {
            background: #aebbd0;
        }

/* ============================================================
   9. MAIN TABLE
============================================================ */

.thrv2-table[b-4x5spa0kk0] {
    width: 100%;
    min-width: var(--thrv-table-min-width);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

    .thrv2-table thead[b-4x5spa0kk0] {
        position: relative;
        z-index: 1;
    }

        .thrv2-table thead th[b-4x5spa0kk0] {
            height: 42px;
            padding: 7px 10px;
            background: #f5f7fb;
            color: #334863;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.25;
            text-align: center !important;
            vertical-align: middle;
            letter-spacing: 0;
            border-right: 1px solid #e7ebf3;
            border-bottom: none;
            white-space: nowrap;
            position: static;
            top: auto;
            z-index: auto;
            box-shadow: none;
            text-transform: lowercase;
        }

            .thrv2-table thead th[b-4x5spa0kk0]::first-letter {
                text-transform: uppercase;
            }

            .thrv2-table thead th:last-child[b-4x5spa0kk0] {
                border-right: none;
            }

            .thrv2-table thead th:nth-child(1)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(2)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(3)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(4)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(5)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(6)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(7)[b-4x5spa0kk0] {
                background: #f3f8ff;
            }

            .thrv2-table thead th:nth-child(8)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(9)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(10)[b-4x5spa0kk0] {
                background: #fff8ef;
            }

            .thrv2-table thead th:nth-child(11)[b-4x5spa0kk0],
            .thrv2-table thead th:nth-child(12)[b-4x5spa0kk0] {
                background: #f5fbf7;
            }

            .thrv2-table thead th:nth-child(13)[b-4x5spa0kk0] {
                background: #f8fafc;
            }

    .thrv2-table tbody td[b-4x5spa0kk0] {
        height: 50px;
        padding: 8px 10px;
        background: #ffffff;
        color: #3f5875;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.32;
        vertical-align: middle;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

        .thrv2-table tbody td:last-child[b-4x5spa0kk0] {
            border-right: none;
        }

        .thrv2-table tbody td:nth-child(1)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(2)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(3)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(4)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(5)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(6)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(7)[b-4x5spa0kk0] {
            background: #fbfdff;
        }

        .thrv2-table tbody td:nth-child(8)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(9)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(10)[b-4x5spa0kk0] {
            background: #fffdf9;
        }

        .thrv2-table tbody td:nth-child(11)[b-4x5spa0kk0],
        .thrv2-table tbody td:nth-child(12)[b-4x5spa0kk0] {
            background: #fcfffd;
        }

.thrv2-row[b-4x5spa0kk0] {
    cursor: pointer;
}

    .thrv2-row:hover td[b-4x5spa0kk0] {
        background: #fbfcff !important;
    }

        .thrv2-row:hover td:nth-child(1)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(2)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(3)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(4)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(5)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(6)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(7)[b-4x5spa0kk0] {
            background: #f5faff !important;
        }

        .thrv2-row:hover td:nth-child(8)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(9)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(10)[b-4x5spa0kk0] {
            background: #fff8ef !important;
        }

        .thrv2-row:hover td:nth-child(11)[b-4x5spa0kk0],
        .thrv2-row:hover td:nth-child(12)[b-4x5spa0kk0] {
            background: #f6fcf8 !important;
        }

.thrv2-row-weekend td[b-4x5spa0kk0] {
    background: #fffdf8;
}

.thrv2-row-weekend:hover td[b-4x5spa0kk0] {
    background: #fffaf0 !important;
}

.thrv2-row-expanded td[b-4x5spa0kk0] {
    background: #fcfdff;
}

.thrv2-empty[b-4x5spa0kk0] {
    padding: 42px 20px !important;
    text-align: center;
    color: #8593a9;
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   10. TABLE CELL ATOMS
============================================================ */

.thrv-date-cell[b-4x5spa0kk0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thrv-date-badge[b-4x5spa0kk0] {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #3b82f6;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}

.thrv-date-badge-off[b-4x5spa0kk0] {
    background: #e2e8f0;
    color: #64748b;
}

.thrv-date-badge-absent[b-4x5spa0kk0] {
    background: #ef4444;
}

.thrv-date-badge-leave[b-4x5spa0kk0] {
    background: #22c55e;
}

.thrv-date-badge-weekend[b-4x5spa0kk0] {
    background: #cbd5e1;
    color: #475569;
}

.thrv-date-badge-late[b-4x5spa0kk0] {
    background: #ea580c;
}

.thrv-date-badge-early[b-4x5spa0kk0] {
    background: #d97706;
}

.thrv-date-badge-late-early[b-4x5spa0kk0] {
    background: #c2410c;
}

.thrv-date-badge-travel[b-4x5spa0kk0] {
    background: #7c3aed;
}

.thrv-date-badge-noshift[b-4x5spa0kk0] {
    background: #94a3b8;
}

.thrv-date-text[b-4x5spa0kk0],
.thrv-ca-label[b-4x5spa0kk0],
.thrv-cell-thu[b-4x5spa0kk0],
.thrv-cell-time[b-4x5spa0kk0],
.thrv-cell-note[b-4x5spa0kk0] {
    font-size: 13px;
}

.thrv-date-text[b-4x5spa0kk0] {
    color: #334155;
    font-weight: 650;
    white-space: nowrap;
}

.thrv-cell-thu[b-4x5spa0kk0] {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.thrv-cell-thu--wknd[b-4x5spa0kk0] {
    color: #94a3b8;
    font-style: italic;
}

.thrv-ca-label[b-4x5spa0kk0] {
    display: inline-block;
    max-width: 150px;
    color: #334155;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.thrv-cell-time[b-4x5spa0kk0] {
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.thrv-cell-muted[b-4x5spa0kk0] {
    color: #a0aec0;
    font-size: 12px;
}

.thrv-cell-zero[b-4x5spa0kk0] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
}

.thrv-cell-note[b-4x5spa0kk0] {
    max-width: 172px;
    color: #64748b;
    line-height: 1.48;
    word-break: break-word;
}

/* ============================================================
   11. BADGES / STATUS
============================================================ */

.thrv-badge[b-4x5spa0kk0] {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.8px;
    font-weight: 650;
    white-space: nowrap;
    line-height: 1;
}

.thrv-badge-late[b-4x5spa0kk0],
.thrv-badge-early[b-4x5spa0kk0] {
    background: #fff5e8;
    color: #d19445;
}

.thrv-status-badge[b-4x5spa0kk0] {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.thrv-status-ok[b-4x5spa0kk0] {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #047857;
}

.thrv-status-late[b-4x5spa0kk0] {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.thrv-status-early[b-4x5spa0kk0] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.thrv-status-absent[b-4x5spa0kk0],
.thrv-status-missing[b-4x5spa0kk0] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.thrv-status-leave[b-4x5spa0kk0] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.thrv-status-off[b-4x5spa0kk0] {
    background: #f3f6fa;
    border-color: #e2e8f0;
    color: #475569;
}

.thrv-status-travel[b-4x5spa0kk0] {
    background: #f3ecff;
    border-color: #ddd1ff;
    color: #6d28d9;
}

.thrv-status-noshift[b-4x5spa0kk0] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.thrv-status-default[b-4x5spa0kk0] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

.thrv-status-phu[b-4x5spa0kk0] {
    max-width: 220px;
    color: #6b7b90;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.55;
}

/* ============================================================
   12. ROW ACTION BUTTON
============================================================ */

.thrv2-table-shell .thrv-action-btn[b-4x5spa0kk0] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0 auto;
    border-radius: 11px;
    border: 1px solid #d7e6ff;
    background: #f4f8ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: all .18s ease;
}

    .thrv2-table-shell .thrv-action-btn i[b-4x5spa0kk0] {
        font-size: 17px;
        line-height: 1;
        transition: transform .18s ease;
    }

    .thrv2-table-shell .thrv-action-btn:hover[b-4x5spa0kk0] {
        background: #eaf2ff;
        border-color: #bdd3ff;
        color: #1d4ed8;
        transform: none;
    }

.thrv2-table-shell .thrv-action-btn-active[b-4x5spa0kk0] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

    .thrv2-table-shell .thrv-action-btn-active i[b-4x5spa0kk0] {
        transform: rotate(180deg);
    }

/* ============================================================
   13. EXPAND ROW / LOG CARD
   Chi tiết bản ghi chấm công - clean, gọn, không override trùng
============================================================ */

.thrv2-expand-row > td[b-4x5spa0kk0] {
    padding: 0 !important;
    background: #f7fbff !important;
    border-top: 1px solid #dbeafe !important;
    border-bottom: 1px solid #dbeafe !important;
}

.thrv-log-outer[b-4x5spa0kk0] {
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f6f9fd 100%);
}

.thrv-log-card[b-4x5spa0kk0] {
    padding: 13px 14px 12px;
    border-radius: 13px;
    border: 1px solid #dce8f6;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035), inset 0 1px 0 rgba(255, 255, 255, .9);
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.thrv-log-header[b-4x5spa0kk0] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.thrv-log-datebox[b-4x5spa0kk0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.thrv-log-dateicon[b-4x5spa0kk0] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    background: #eef5ff;
    border: 1px solid #cfe0ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.thrv-log-datetext[b-4x5spa0kk0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thrv-log-datevalue[b-4x5spa0kk0] {
    color: #1e3355;
    font-size: 14px;
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thrv-log-datesub[b-4x5spa0kk0] {
    color: #7b8ba1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.thrv-log-chips[b-4x5spa0kk0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.thrv-log-chip[b-4x5spa0kk0] {
    width: 116px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #e4ebf5;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: none;
    flex-shrink: 0;
}

.thrv-log-chip-icon[b-4x5spa0kk0] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.thrv-log-chip-body[b-4x5spa0kk0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thrv-log-chip-val[b-4x5spa0kk0] {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.015em;
}

.thrv-log-chip-lbl[b-4x5spa0kk0] {
    color: #8b9aaf;
    font-size: 10.8px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.thrv-log-chip--orange[b-4x5spa0kk0] {
    border-color: #fed7aa;
    background: #fffaf5;
}

    .thrv-log-chip--orange .thrv-log-chip-icon[b-4x5spa0kk0] {
        background: #ffedd5;
        color: #ea580c;
    }

    .thrv-log-chip--orange .thrv-log-chip-val[b-4x5spa0kk0] {
        color: #ea580c;
    }

.thrv-log-chip--blue[b-4x5spa0kk0] {
    border-color: #bfdbfe;
    background: #f8fbff;
}

    .thrv-log-chip--blue .thrv-log-chip-icon[b-4x5spa0kk0] {
        background: #dbeafe;
        color: #2563eb;
    }

    .thrv-log-chip--blue .thrv-log-chip-val[b-4x5spa0kk0] {
        color: #2563eb;
    }

.thrv-log-chip--red[b-4x5spa0kk0] {
    border-color: #fecaca;
    background: #fffafa;
}

    .thrv-log-chip--red .thrv-log-chip-icon[b-4x5spa0kk0] {
        background: #fee2e2;
        color: #dc2626;
    }

    .thrv-log-chip--red .thrv-log-chip-val[b-4x5spa0kk0] {
        color: #dc2626;
    }

.thrv-log-section[b-4x5spa0kk0] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 2px 0 0;
}

.thrv-log-section-bar[b-4x5spa0kk0] {
    width: 3px;
    min-width: 3px;
    height: 28px;
    margin-top: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}

.thrv-log-section-title[b-4x5spa0kk0] {
    color: #1e3355;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.2;
}

.thrv-log-section-sub[b-4x5spa0kk0] {
    margin-top: 2px;
    color: #7b8ba1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.thrv-log-empty[b-4x5spa0kk0] {
    padding: 12px 13px;
    border-radius: 10px;
    border: 1px dashed #cbd8ea;
    background: #f8fafc;
    color: #8492a8;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
}

    .thrv-log-empty i[b-4x5spa0kk0] {
        font-size: 15px;
        color: #94a3b8;
    }

/* ============================================================
   14. LOG TABLE
============================================================ */

.thrv-log-table-wrap[b-4x5spa0kk0] {
    border: 1px solid #dfe7f2;
    border-radius: 11px;
    overflow: hidden;
    background: #ffffff;
}

.thrv-log-table[b-4x5spa0kk0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: fixed;
}

    .thrv-log-table thead tr[b-4x5spa0kk0] {
        height: 36px;
        background: #f4f7fb;
    }

    .thrv-log-table thead th[b-4x5spa0kk0] {
        padding: 0 12px;
        border-right: 1px solid #e5ebf4;
        border-bottom: 1px solid #dfe7f2;
        color: #52637a;
        font-size: 11px;
        font-weight: 800;
        text-transform: lowercase;
        letter-spacing: .02em;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }

        .thrv-log-table thead th[b-4x5spa0kk0]::first-letter {
            text-transform: uppercase;
        }

        .thrv-log-table thead th:last-child[b-4x5spa0kk0] {
            border-right: none;
        }

    .thrv-log-table tbody tr[b-4x5spa0kk0] {
        height: 38px;
        background: #ffffff;
        transition: background-color .12s ease;
    }

        .thrv-log-table tbody tr:hover[b-4x5spa0kk0] {
            background: #f8fbff;
        }

        .thrv-log-table tbody tr:last-child td[b-4x5spa0kk0] {
            border-bottom: none;
        }

    .thrv-log-table tbody td[b-4x5spa0kk0] {
        padding: 0 12px;
        border-right: 1px solid #edf1f6;
        border-bottom: 1px solid #edf1f6;
        vertical-align: middle;
        color: #334155;
        font-size: 13px;
        font-weight: 500;
    }

        .thrv-log-table tbody td:last-child[b-4x5spa0kk0] {
            border-right: none;
        }

.thrv-log-stt[b-4x5spa0kk0] {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    border: 1px solid #cfe0ff;
    background: #eef4ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.thrv-log-time[b-4x5spa0kk0] {
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

.thrv-log-time-icon[b-4x5spa0kk0] {
    color: #94a3b8;
    font-size: 13px;
}

.thrv-log-text[b-4x5spa0kk0] {
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thrv-log-code[b-4x5spa0kk0] {
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid #dfe7f2;
    background: #f8fafc;
    color: #334155;
    display: inline-flex;
    align-items: center;
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thrv-log-muted[b-4x5spa0kk0] {
    color: #9aa8bb;
    font-size: 12px;
    font-weight: 500;
}

.thrv-log-footer[b-4x5spa0kk0] {
    min-height: 36px;
    padding: 8px 12px;
    border-top: 1px solid #e5ebf4;
    background: #fbfdff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.thrv-log-footer-count[b-4x5spa0kk0] {
    color: #8492a8;
    font-size: 12px;
    font-weight: 600;
}

.thrv-log-footer-link[b-4x5spa0kk0] {
    border: none;
    background: transparent;
    padding: 0;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    transition: color .14s ease, transform .14s ease;
}

    .thrv-log-footer-link:hover[b-4x5spa0kk0] {
        color: #1d4ed8;
        text-decoration: none;
        transform: translateX(1px);
    }

/* ============================================================
   15. RESPONSIVE
============================================================ */

@media (max-width: 1500px) {
    .thrv-head[b-4x5spa0kk0] {
        grid-template-columns: minmax(240px, .85fr) minmax(360px, 1.2fr) auto;
        gap: 14px;
    }

    .thrv-head-emp-chip:first-child[b-4x5spa0kk0] {
        flex-basis: 200px;
        max-width: 230px;
    }

    .thrv-head-emp-chip:nth-child(2)[b-4x5spa0kk0] {
        max-width: 150px;
    }

    .thrv-head-emp-chip--ca[b-4x5spa0kk0] {
        flex-basis: 190px;
        max-width: 230px;
    }

    .thrv-kpi-grid[b-4x5spa0kk0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .thrv-filter-grid[b-4x5spa0kk0] {
        grid-template-columns: 90px 90px minmax(200px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr);
    }

    .thrv-search-group[b-4x5spa0kk0] {
        grid-column: span 5;
    }
}

@media (max-width: 1280px) {
    .thrv-head[b-4x5spa0kk0] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title actions"
            "employee employee";
        align-items: start;
    }

    .thrv-head-left[b-4x5spa0kk0] {
        grid-area: title;
    }

    .thrv-head-actions[b-4x5spa0kk0] {
        grid-area: actions;
    }

    .thrv-head-employee[b-4x5spa0kk0] {
        grid-area: employee;
        width: 100%;
    }

        .thrv-head-employee[b-4x5spa0kk0]::before {
            display: none;
        }

    .thrv-head-emp-meta[b-4x5spa0kk0] {
        flex-wrap: wrap;
        overflow: visible;
    }

    .thrv-head-emp-chip:first-child[b-4x5spa0kk0],
    .thrv-head-emp-chip--ca[b-4x5spa0kk0] {
        flex: 1 1 260px;
        max-width: none;
    }

    .thrv-head-emp-chip:nth-child(2)[b-4x5spa0kk0] {
        flex: 0 1 180px;
        max-width: 220px;
    }
}

@media (max-width: 992px) {
    .thrv-page[b-4x5spa0kk0] {
        padding: 16px;
        border-radius: 16px;
    }

    .thrv-head[b-4x5spa0kk0] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "employee"
            "actions";
        padding-bottom: 14px;
    }

    .thrv-head-actions[b-4x5spa0kk0] {
        width: 100%;
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid #edf2f8;
        justify-content: flex-start;
    }

    .thrv-head-employee[b-4x5spa0kk0] {
        padding: 10px;
    }

    .thrv-kpi-grid[b-4x5spa0kk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thrv-filter-grid[b-4x5spa0kk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thrv-search-group[b-4x5spa0kk0] {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .thrv-head-employee[b-4x5spa0kk0] {
        align-items: flex-start;
    }

    .thrv-head-emp-meta[b-4x5spa0kk0] {
        align-items: stretch;
    }

    .thrv-head-emp-chip[b-4x5spa0kk0],
    .thrv-head-emp-chip:first-child[b-4x5spa0kk0],
    .thrv-head-emp-chip:nth-child(2)[b-4x5spa0kk0],
    .thrv-head-emp-chip--ca[b-4x5spa0kk0] {
        max-width: none;
        flex: 1 1 100%;
    }

    .thrv-head-actions[b-4x5spa0kk0] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .thrv-action-btn[b-4x5spa0kk0] {
        width: 100%;
    }

    .thrv-log-header[b-4x5spa0kk0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .thrv-log-chips[b-4x5spa0kk0] {
        flex-wrap: wrap;
    }

    .thrv-log-table-wrap[b-4x5spa0kk0] {
        overflow-x: auto;
    }

    .thrv-log-table[b-4x5spa0kk0] {
        min-width: 480px;
    }
}

@media (max-width: 640px) {
    .thrv-page[b-4x5spa0kk0] {
        margin: 8px 0 14px;
        padding: 14px;
    }

    .thrv-kpi-grid[b-4x5spa0kk0] {
        grid-template-columns: 1fr;
    }

    .thrv-filter-grid[b-4x5spa0kk0] {
        grid-template-columns: 1fr;
    }

    .thrv-search-group[b-4x5spa0kk0] {
        grid-column: auto;
    }

    .thrv-select-dropdown__panel[b-4x5spa0kk0],
    .thrv-month-panel[b-4x5spa0kk0],
    .thrv-year-panel[b-4x5spa0kk0],
    .thrv-day-panel[b-4x5spa0kk0],
    .thrv-status-panel[b-4x5spa0kk0] {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }

    .thrv-kpi-card[b-4x5spa0kk0] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .thrv-kpi-icon[b-4x5spa0kk0] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 13px;
    }

        .thrv-kpi-icon[b-4x5spa0kk0]  svg {
            width: 23px;
            height: 23px;
        }

    .thrv-kpi-label[b-4x5spa0kk0] {
        font-size: 11.5px;
    }

    .thrv-kpi-value[b-4x5spa0kk0] {
        font-size: 17px;
    }

    .thrv-kpi-note[b-4x5spa0kk0] {
        font-size: 11px;
    }
}

@media (max-width: 520px) {
    .thrv-head-left[b-4x5spa0kk0] {
        align-items: flex-start;
    }

    .thrv-head-text h1[b-4x5spa0kk0] {
        font-size: 19px;
    }

    .thrv-head-employee[b-4x5spa0kk0] {
        flex-direction: column;
    }

    .thrv-head-emp-avatar[b-4x5spa0kk0] {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .thrv-head-emp-main[b-4x5spa0kk0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        overflow: visible;
    }

    .thrv-head-emp-name[b-4x5spa0kk0] {
        width: 100%;
        white-space: normal;
    }

    .thrv-head-emp-meta[b-4x5spa0kk0] {
        width: 100%;
        flex-direction: column;
    }

    .thrv-head-emp-chip[b-4x5spa0kk0],
    .thrv-head-emp-chip:first-child[b-4x5spa0kk0],
    .thrv-head-emp-chip:nth-child(2)[b-4x5spa0kk0],
    .thrv-head-emp-chip--ca[b-4x5spa0kk0] {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }

    .thrv-head-actions[b-4x5spa0kk0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CongTrinh/Create.razor.rz.scp.css */
/* ════════════════════════════════════════════════════
   CongTrinh Create — Check-in / Fingerprint Locations
   Clean CSS - scoped for Create.razor
   ════════════════════════════════════════════════════ */

/* =========================================================
   ROOT
========================================================= */

.ct-location-card[b-jh5tw4uplk] {
    overflow: hidden;
}

.ct-location-card--mock[b-jh5tw4uplk] {
    border: 1px solid #dbe7f7 !important;
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}

    .ct-location-card--mock .ct-svg[b-jh5tw4uplk] {
        display: inline-flex;
        width: 1em;
        height: 1em;
        fill: currentColor;
        flex: 0 0 auto;
    }

/* =========================================================
   HERO
========================================================= */

.ct-location-hero[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #e8eef7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.ct-location-hero__icon[b-jh5tw4uplk] {
    width: 44px;
    height: 44px;
    border: 1px solid #cfe0ff;
    border-radius: 11px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px rgba(37, 99, 235, .08);
}

    .ct-location-hero__icon .ct-svg-hero-pin[b-jh5tw4uplk] {
        width: 32px;
        height: 32px;
    }

.ct-location-hero__content[b-jh5tw4uplk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-location-hero__title[b-jh5tw4uplk] {
    color: #172554;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ct-location-hero__subtitle[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.ct-location-layout[b-jh5tw4uplk] {
    display: grid;
    grid-template-columns: 330px minmax(460px, 520px) minmax(300px, 1fr);
    background: #ffffff;
}

.ct-location-layout--mock[b-jh5tw4uplk] {
    grid-template-columns: 360px minmax(520px, 600px) minmax(440px, 1fr);
    gap: 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e8eef7;
    background: #fbfdff;
}

.ct-location-list-panel[b-jh5tw4uplk],
.ct-location-form-panel[b-jh5tw4uplk],
.ct-map-panel[b-jh5tw4uplk] {
    min-width: 0;
}

.ct-location-layout--mock .ct-location-list-panel[b-jh5tw4uplk],
.ct-location-layout--mock .ct-location-form-panel[b-jh5tw4uplk],
.ct-location-layout--mock .ct-map-panel[b-jh5tw4uplk] {
    border: 1px solid #dfe7f3 !important;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}

.ct-location-layout--mock .ct-location-list-panel[b-jh5tw4uplk] {
    display: flex;
    flex-direction: column;
}

.ct-location-layout--mock .ct-location-form-panel[b-jh5tw4uplk],
.ct-location-layout--mock .ct-map-panel[b-jh5tw4uplk] {
    padding: 16px 18px 15px;
}

/* =========================================================
   LEFT PANEL - TOOLBAR
========================================================= */

.ct-location-list-toolbar[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 8px;
}

.ct-list-title[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #172554;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.ct-list-title__icon[b-jh5tw4uplk] {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eef5ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-list-title__icon .ct-svg[b-jh5tw4uplk] {
        width: 18px;
        height: 18px;
    }

.ct-toolbar-right[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ct-sort-btn[b-jh5tw4uplk] {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .03);
}

    .ct-sort-btn:hover[b-jh5tw4uplk] {
        border-color: #bfdbfe;
        color: #1d4ed8;
        background: #f8fbff;
    }

    .ct-sort-btn svg[b-jh5tw4uplk] {
        width: 16px;
        height: 16px;
        fill: currentColor;
        flex-shrink: 0;
    }

    .ct-sort-btn .ct-sort-chevron[b-jh5tw4uplk] {
        width: 15px;
        height: 15px;
    }

.ct-location-list-count[b-jh5tw4uplk] {
    padding: 0 16px 12px 54px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

/* =========================================================
   LEFT PANEL - LIST CARD
========================================================= */

.ct-location-list[b-jh5tw4uplk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 390px;
    padding: 0 12px 12px;
    overflow-y: auto;
}

    .ct-location-list[b-jh5tw4uplk]::-webkit-scrollbar {
        width: 6px;
    }

    .ct-location-list[b-jh5tw4uplk]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #cbd5e1;
    }

.ct-location-item[b-jh5tw4uplk] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 58px;
    gap: 8px;
    min-height: 112px;
    padding: 14px 10px 12px 12px;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .025);
}

    .ct-location-item:hover[b-jh5tw4uplk] {
        border-color: #bcd4ff;
        box-shadow: 0 12px 26px rgba(37, 99, 235, .08);
        transform: translateY(-1px);
    }

    .ct-location-item.is-active[b-jh5tw4uplk] {
        border-color: #2563eb;
        background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .12), 0 14px 30px rgba(37, 99, 235, .08);
    }

.ct-location-pin[b-jh5tw4uplk] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
}

.ct-location-pin-ring[b-jh5tw4uplk] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d3ddea;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #ffffff;
}

    .ct-location-pin-ring.is-selected[b-jh5tw4uplk] {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(37, 99, 235, .18);
    }

.ct-location-item__content[b-jh5tw4uplk] {
    min-width: 0;
}

.ct-location-item__top[b-jh5tw4uplk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 10px;
}

.ct-location-name[b-jh5tw4uplk] {
    max-width: 100%;
    color: #172554;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-badges[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ct-badge[b-jh5tw4uplk],
.ct-badge--active[b-jh5tw4uplk],
.ct-badge--warning[b-jh5tw4uplk],
.ct-badge--inactive[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ct-badge--default[b-jh5tw4uplk] {
    background: #ffedd5;
    color: #c2410c;
}

.ct-badge--active[b-jh5tw4uplk] {
    background: #dcfce7;
    color: #15803d;
}

.ct-badge--warning[b-jh5tw4uplk] {
    background: #fef3c7;
    color: #b45309;
}

.ct-badge--inactive[b-jh5tw4uplk] {
    background: #f1f5f9;
    color: #64748b;
}

.ct-location-meta-line[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

    .ct-location-meta-line .ct-svg[b-jh5tw4uplk] {
        width: 15px;
        height: 15px;
        color: #6b7a90;
    }

/* =========================================================
   LEFT PANEL - ADD LOCATION CTA
   Tone vàng enterprise nhẹ, không chói
========================================================= */

.ct-add-location-card-btn[b-jh5tw4uplk] {
    position: relative;
    isolation: isolate;
    min-height: 66px;
    margin: 0 12px 14px;
    padding: 11px 14px;
    border: 1px solid #f3d08a;
    border-radius: 10px;
    background: radial-gradient(circle at 96% 50%, rgba(245, 158, 11, .08) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(251, 191, 36, .14) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
    color: #b7791f;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(146, 64, 14, .055);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

    .ct-add-location-card-btn[b-jh5tw4uplk]::before {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -42px;
        width: 126px;
        height: 126px;
        border-radius: 999px;
        background: rgba(254, 243, 199, .46);
        z-index: -1;
    }

    .ct-add-location-card-btn[b-jh5tw4uplk]::after {
        content: "";
        position: absolute;
        right: 36px;
        top: 23px;
        width: 28px;
        height: 28px;
        border: 7px solid rgba(245, 158, 11, .06);
        border-radius: 999px;
        z-index: -1;
    }

    .ct-add-location-card-btn:hover[b-jh5tw4uplk] {
        border-color: #eab549;
        background: radial-gradient(circle at 96% 50%, rgba(245, 158, 11, .10) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(251, 191, 36, .18) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #fff7e6 100%);
        box-shadow: 0 10px 20px rgba(146, 64, 14, .085);
        transform: translateY(-1px);
    }

    .ct-add-location-card-btn:active[b-jh5tw4uplk] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(146, 64, 14, .07);
    }

.ct-add-location-card-btn__icon[b-jh5tw4uplk] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f0a526 0%, #d98212 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(217, 130, 18, .20);
}

    .ct-add-location-card-btn__icon .ct-svg[b-jh5tw4uplk] {
        width: 21px;
        height: 21px;
    }

.ct-add-location-card-btn__content[b-jh5tw4uplk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-add-location-card-btn__title[b-jh5tw4uplk] {
    color: #b7791f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-add-location-card-btn__subtitle[b-jh5tw4uplk] {
    color: #78716c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-add-location-card-btn__arrow[b-jh5tw4uplk] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #c47a11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
    transition: transform .15s ease, opacity .15s ease;
}

    .ct-add-location-card-btn__arrow .ct-svg[b-jh5tw4uplk] {
        width: 18px;
        height: 18px;
    }

.ct-add-location-card-btn:hover .ct-add-location-card-btn__arrow[b-jh5tw4uplk] {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .ct-add-location-card-btn[b-jh5tw4uplk] {
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        min-height: 64px;
        padding: 10px 13px;
    }

    .ct-add-location-card-btn__icon[b-jh5tw4uplk] {
        width: 36px;
        height: 36px;
    }

    .ct-add-location-card-btn__title[b-jh5tw4uplk] {
        font-size: 13px;
    }

    .ct-add-location-card-btn__subtitle[b-jh5tw4uplk] {
        font-size: 11.5px;
    }
}
/* =========================================================
   EMPTY LOCATION
========================================================= */

.ct-empty-location[b-jh5tw4uplk] {
    min-height: 185px;
    padding: 24px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.ct-empty-location__svg[b-jh5tw4uplk] {
    width: 42px;
    height: 42px;
}

.ct-empty-location span[b-jh5tw4uplk] {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.ct-empty-location small[b-jh5tw4uplk] {
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================================
   CENTER FORM
========================================================= */

.ct-form-title[b-jh5tw4uplk] {
    margin-bottom: 13px;
    color: #3d5166;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ct-location-form-grid[b-jh5tw4uplk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
}

.ct-field--span2[b-jh5tw4uplk] {
    grid-column: span 2;
}

.ct-location-form-panel .nv-label[b-jh5tw4uplk] {
    color: #172554;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ct-location-form-panel .nv-input[b-jh5tw4uplk],
.ct-location-form-panel .textarea-input[b-jh5tw4uplk],
.ct-location-form-panel .nv-select[b-jh5tw4uplk] {
    min-height: 34px;
    border-color: #d3ddea;
    border-radius: 7px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    background-color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .035);
}

    .ct-location-form-panel .nv-input:focus[b-jh5tw4uplk],
    .ct-location-form-panel .textarea-input:focus[b-jh5tw4uplk],
    .ct-location-form-panel .nv-select:focus[b-jh5tw4uplk] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
        outline: none;
    }

.ct-location-placeholder[b-jh5tw4uplk] {
    min-height: 310px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

/* =========================================================
   COORDINATE HELPER
========================================================= */

.ct-coordinate-helper[b-jh5tw4uplk] {
    display: block !important;
    padding: 12px 14px 10px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
}

.ct-coordinate-helper__title[b-jh5tw4uplk] {
    margin-bottom: 10px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}

.ct-coordinate-steps[b-jh5tw4uplk] {
    display: grid;
    grid-template-columns: 1fr 18px 1.1fr 18px 1.25fr;
    align-items: center;
    gap: 8px;
}

.ct-coordinate-step[b-jh5tw4uplk] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ct-coordinate-step__icon[b-jh5tw4uplk] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf2ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-coordinate-step__icon .ct-svg[b-jh5tw4uplk] {
        width: 25px;
        height: 25px;
    }

.ct-coordinate-step__icon--maps[b-jh5tw4uplk] {
    background: #eff6ff;
}

.ct-coordinate-step b[b-jh5tw4uplk] {
    display: block;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.05;
}

.ct-coordinate-step span[b-jh5tw4uplk] {
    display: block;
    color: #334155;
    font-size: 11.2px;
    font-weight: 600;
    line-height: 1.24;
}

.ct-coordinate-step strong[b-jh5tw4uplk] {
    color: #172554;
    font-weight: 800;
}

.ct-coordinate-arrow[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.ct-coordinate-example[b-jh5tw4uplk] {
    min-height: 28px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ebf4ff;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

    .ct-coordinate-example .ct-svg[b-jh5tw4uplk] {
        width: 15px;
        height: 15px;
        color: #60a5fa;
    }

    .ct-coordinate-example b[b-jh5tw4uplk] {
        color: #0b5ed7;
        font-weight: 800;
    }

.ct-coordinate-helper__footer[b-jh5tw4uplk] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* =========================================================
   GOOGLE MAP CTA CARD - compact như nút thêm vị trí
========================================================= */

.ct-coordinate-helper__footer[b-jh5tw4uplk] {
    margin-top: 10px;
}

.ct-google-map-card-btn[b-jh5tw4uplk] {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 66px;
    padding: 11px 14px;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    background: radial-gradient(circle at 96% 50%, rgba(37, 99, 235, .08) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(147, 197, 253, .16) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    color: #1d4ed8;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .07);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

    .ct-google-map-card-btn[b-jh5tw4uplk]::before {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -42px;
        width: 126px;
        height: 126px;
        border-radius: 999px;
        background: rgba(219, 234, 254, .50);
        z-index: -1;
    }

    .ct-google-map-card-btn[b-jh5tw4uplk]::after {
        content: "";
        position: absolute;
        right: 36px;
        top: 23px;
        width: 28px;
        height: 28px;
        border: 7px solid rgba(37, 99, 235, .06);
        border-radius: 999px;
        z-index: -1;
    }

    .ct-google-map-card-btn:hover[b-jh5tw4uplk] {
        border-color: #3b82f6;
        background: radial-gradient(circle at 96% 50%, rgba(37, 99, 235, .11) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(147, 197, 253, .22) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
        box-shadow: 0 10px 20px rgba(37, 99, 235, .11);
        transform: translateY(-1px);
    }

    .ct-google-map-card-btn:active[b-jh5tw4uplk] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(37, 99, 235, .08);
    }

.ct-google-map-card-btn__visual[b-jh5tw4uplk] {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: radial-gradient(circle at 45% 42%, rgba(255, 255, 255, .96) 0 12px, transparent 13px), linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .75);
}

.ct-google-map-card-btn__orbit[b-jh5tw4uplk] {
    position: absolute;
    inset: 4px;
    border: 1.5px solid rgba(59, 130, 246, .22);
    border-radius: 999px;
    transform: rotate(-18deg);
}

    .ct-google-map-card-btn__orbit[b-jh5tw4uplk]::before,
    .ct-google-map-card-btn__orbit[b-jh5tw4uplk]::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 74%;
        height: 1px;
        background: rgba(59, 130, 246, .14);
        transform: translateX(-50%);
    }

    .ct-google-map-card-btn__orbit[b-jh5tw4uplk]::before {
        top: 10px;
    }

    .ct-google-map-card-btn__orbit[b-jh5tw4uplk]::after {
        bottom: 10px;
    }

.ct-google-map-card-btn__pin[b-jh5tw4uplk] {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 8px rgba(37, 99, 235, .20));
}

    .ct-google-map-card-btn__pin .ct-svg[b-jh5tw4uplk] {
        width: 27px;
        height: 27px;
    }

.ct-google-map-card-btn__content[b-jh5tw4uplk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-google-map-card-btn__title[b-jh5tw4uplk] {
    color: #172554;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-google-map-card-btn__subtitle[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-google-map-card-btn__actions[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: #2563eb;
}

.ct-google-map-card-btn__open[b-jh5tw4uplk],
.ct-google-map-card-btn__chevron[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-google-map-card-btn__open .ct-svg[b-jh5tw4uplk] {
        width: 17px;
        height: 17px;
    }

.ct-google-map-card-btn__chevron[b-jh5tw4uplk] {
    color: #94a3b8;
    transition: transform .15s ease, color .15s ease;
}

    .ct-google-map-card-btn__chevron .ct-svg[b-jh5tw4uplk] {
        width: 17px;
        height: 17px;
    }

.ct-google-map-card-btn:hover .ct-google-map-card-btn__chevron[b-jh5tw4uplk] {
    color: #2563eb;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .ct-google-map-card-btn[b-jh5tw4uplk] {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        min-height: 64px;
        padding: 10px 13px;
    }

    .ct-google-map-card-btn__visual[b-jh5tw4uplk] {
        width: 36px;
        height: 36px;
    }

    .ct-google-map-card-btn__pin[b-jh5tw4uplk],
    .ct-google-map-card-btn__pin .ct-svg[b-jh5tw4uplk] {
        width: 25px;
        height: 25px;
    }

    .ct-google-map-card-btn__title[b-jh5tw4uplk] {
        font-size: 13px;
    }

    .ct-google-map-card-btn__subtitle[b-jh5tw4uplk] {
        font-size: 11.5px;
    }
}

/* =========================================================
   FIELD HELPERS
========================================================= */

.ct-input-with-unit[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ct-input-with-unit input[b-jh5tw4uplk] {
        max-width: 180px;
    }

    .ct-input-with-unit span[b-jh5tw4uplk] {
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

.ct-checkbox-row[b-jh5tw4uplk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-checkbox[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ct-checkbox input[b-jh5tw4uplk] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

.ct-checkbox-row small[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
    padding-left: 24px;
}

.ct-note-field[b-jh5tw4uplk] {
    grid-column: auto !important;
}

.ct-note[b-jh5tw4uplk] {
    min-height: 54px !important;
    max-height: 70px;
    resize: none;
}

.ct-note-counter[b-jh5tw4uplk] {
    margin-top: -19px;
    padding-right: 8px;
    color: #94a3b8;
    font-size: 11px;
    text-align: right;
    pointer-events: none;
}

/* =========================================================
   MAP PANEL
========================================================= */

.ct-map-panel[b-jh5tw4uplk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-map-frame[b-jh5tw4uplk] {
    position: relative;
    min-height: 356px;
    border: 1px solid #d3ddea;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
    overflow: hidden;
}

.ct-map-canvas[b-jh5tw4uplk] {
    width: 100%;
    height: 356px;
    min-height: 356px;
    background: transparent;
}

.ct-map-empty-state[b-jh5tw4uplk] {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 22px 24px;
    background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .10), transparent 32%), linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.ct-map-illustration[b-jh5tw4uplk] {
    width: 390px;
    max-width: 76%;
    margin-bottom: 2px;
}

.ct-map-illustration__svg[b-jh5tw4uplk] {
    display: block;
    width: 100%;
    height: auto;
}

.ct-map-empty-state .ct-map-manual-fallback__title[b-jh5tw4uplk] {
    color: #172554;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.ct-map-empty-state .ct-map-manual-fallback__desc[b-jh5tw4uplk] {
    max-width: 520px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.ct-map-fallback-actions[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ct-map-primary-btn[b-jh5tw4uplk],
.ct-map-secondary-btn[b-jh5tw4uplk] {
    height: 38px;
    padding: 0 18px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .15s ease;
}

.ct-map-primary-btn[b-jh5tw4uplk] {
    border: 1px solid #1d4ed8;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, .20);
}

    .ct-map-primary-btn:hover[b-jh5tw4uplk] {
        filter: brightness(1.03);
        transform: translateY(-1px);
    }

.ct-map-secondary-btn[b-jh5tw4uplk] {
    border: 1px solid #bfd3f6;
    background: #ffffff;
    color: #1d4ed8;
}

    .ct-map-secondary-btn:hover[b-jh5tw4uplk] {
        background: #f5f9ff;
        border-color: #93c5fd;
    }

.ct-map-tech-note[b-jh5tw4uplk] {
    width: min(520px, 92%);
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(241, 245, 249, .82);
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

    .ct-map-tech-note .ct-svg[b-jh5tw4uplk] {
        width: 17px;
        height: 17px;
        color: #64748b;
    }

.ct-expand-btn[b-jh5tw4uplk] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, .55);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

    .ct-expand-btn:hover[b-jh5tw4uplk] {
        background: #ffffff;
        color: #1d4ed8;
    }

/* =========================================================
   MAP GUIDE + SEARCH
========================================================= */

.ct-map-hint[b-jh5tw4uplk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid #dbe7ff;
    border-radius: 10px;
    background: #fbfdff;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

    .ct-map-hint .ct-svg[b-jh5tw4uplk] {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: #475569;
    }

.ct-map-guide div[b-jh5tw4uplk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-map-guide strong[b-jh5tw4uplk] {
    color: #172554;
    font-size: 12.5px;
    font-weight: 800;
}

.ct-map-guide span[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
}

.ct-map-guide b[b-jh5tw4uplk] {
    color: #1d4ed8;
    font-weight: 800;
}

.ct-search-wrap[b-jh5tw4uplk] {
    position: relative;
}

.ct-search-box[b-jh5tw4uplk] {
    height: 38px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    padding: 0 8px 0 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ct-search-box:focus-within[b-jh5tw4uplk] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    }

.ct-search-icon[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 16px;
    flex-shrink: 0;
}

.ct-search-input[b-jh5tw4uplk] {
    min-width: 0;
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #334155;
    font-size: 13px;
}

    .ct-search-input[b-jh5tw4uplk]::placeholder {
        color: #94a3b8;
    }

.ct-search-btn[b-jh5tw4uplk] {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}

    .ct-search-btn:hover[b-jh5tw4uplk] {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

/* =========================================================
   LOCATION TABLE - đồng bộ table Phiếu tăng ca
========================================================= */

.ct-location-table-card[b-jh5tw4uplk] {
    margin-top: 12px;
}

.ct-location-table-wrap[b-jh5tw4uplk] {
    margin: 0 !important;
    padding: 12px 16px 16px;
}

#tblCongTrinhViTris[b-jh5tw4uplk],
#tblCongTrinhViTris tbody[b-jh5tw4uplk],
#tblCongTrinhViTris tr[b-jh5tw4uplk],
#tblCongTrinhViTris td[b-jh5tw4uplk] {
    overflow: visible;
}

#tblCongTrinhViTris[b-jh5tw4uplk] {
    margin-bottom: 0 !important;
}

    #tblCongTrinhViTris th[b-jh5tw4uplk],
    #tblCongTrinhViTris td[b-jh5tw4uplk] {
        vertical-align: middle;
    }

    #tblCongTrinhViTris tbody tr[b-jh5tw4uplk] {
        cursor: pointer;
    }

        #tblCongTrinhViTris tbody tr.ct-row-selected[b-jh5tw4uplk],
        #tblCongTrinhViTris tbody tr:hover[b-jh5tw4uplk] {
            background: #f8fbff;
        }

.ct-table-actions[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ct-table-default-badge[b-jh5tw4uplk] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ct-check[b-jh5tw4uplk] {
    color: #16a34a;
    font-size: 17px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .ct-location-table-wrap[b-jh5tw4uplk] {
        overflow-x: auto;
    }

    #tblCongTrinhViTris[b-jh5tw4uplk] {
        min-width: 980px;
    }
}

/* =========================================================
   FULLSCREEN MAP
========================================================= */

.ct-fs-overlay[b-jh5tw4uplk] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(15, 23, 42, .58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ctFsIn-b-jh5tw4uplk .18s ease;
}

    .ct-fs-overlay.ct-fs-hidden[b-jh5tw4uplk] {
        display: none;
    }

@keyframes ctFsIn-b-jh5tw4uplk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ct-fs-panel[b-jh5tw4uplk] {
    width: 100%;
    max-width: 1180px;
    height: calc(100vh - 60px);
    max-height: 860px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
}

.ct-fs-header[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ct-fs-header__left[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .35px;
}

    .ct-fs-header__left .bi[b-jh5tw4uplk] {
        color: #2563eb;
    }

.ct-fs-header__right[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-fs-coords[b-jh5tw4uplk] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.ct-fs-close-btn[b-jh5tw4uplk] {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}

    .ct-fs-close-btn:hover[b-jh5tw4uplk] {
        background: #fef2f2;
        color: #dc2626;
        border-color: #fecaca;
    }

.ct-fs-search-wrap[b-jh5tw4uplk] {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    flex-shrink: 0;
}

.ct-fs-map[b-jh5tw4uplk] {
    flex: 1;
    min-height: 0;
}

.ct-fs-footer[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ct-fs-footer__hint[b-jh5tw4uplk] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
}

.ct-fs-confirm-btn[b-jh5tw4uplk] {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
}

    .ct-fs-confirm-btn:hover[b-jh5tw4uplk] {
        background: #1d4ed8;
    }

.ct-google-badge[b-jh5tw4uplk] {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

[b-jh5tw4uplk](.ct-fs-body-lock) {
    overflow: hidden;
}

[b-jh5tw4uplk](.pac-container) {
    z-index: 2000 !important;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    font-family: inherit;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1500px) {
    .ct-location-layout--mock[b-jh5tw4uplk] {
        grid-template-columns: 330px minmax(450px, 540px) minmax(360px, 1fr);
    }

    .ct-coordinate-steps[b-jh5tw4uplk] {
        grid-template-columns: 1fr;
    }

    .ct-coordinate-arrow[b-jh5tw4uplk] {
        display: none;
    }
}

@media (max-width: 1200px) {
    .ct-location-layout--mock[b-jh5tw4uplk] {
        grid-template-columns: 1fr;
    }

        .ct-location-layout--mock .ct-location-list[b-jh5tw4uplk] {
            max-height: 340px;
        }

    .ct-note-field[b-jh5tw4uplk] {
        grid-column: span 2 !important;
    }

    .ct-map-canvas[b-jh5tw4uplk],
    .ct-map-frame[b-jh5tw4uplk] {
        min-height: 320px;
    }

    .ct-map-canvas[b-jh5tw4uplk] {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .ct-location-hero[b-jh5tw4uplk] {
        align-items: flex-start;
        padding: 16px;
    }

    .ct-location-hero__icon[b-jh5tw4uplk] {
        width: 42px;
        height: 42px;
    }

    .ct-location-hero__title[b-jh5tw4uplk] {
        font-size: 14px;
    }

    .ct-location-hero__subtitle[b-jh5tw4uplk] {
        font-size: 11.8px;
    }

    .ct-location-layout--mock[b-jh5tw4uplk] {
        padding: 12px;
        gap: 12px;
    }

    .ct-location-form-grid[b-jh5tw4uplk] {
        grid-template-columns: 1fr;
    }

    .ct-field--span2[b-jh5tw4uplk],
    .ct-note-field[b-jh5tw4uplk] {
        grid-column: span 1 !important;
    }

    .ct-location-table-shell[b-jh5tw4uplk] {
        overflow-x: auto;
    }

    .ct-location-detail-table[b-jh5tw4uplk] {
        min-width: 980px;
    }

    .ct-map-illustration[b-jh5tw4uplk] {
        max-width: 92%;
    }

    .ct-map-fallback-actions[b-jh5tw4uplk] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ct-map-primary-btn[b-jh5tw4uplk],
    .ct-map-secondary-btn[b-jh5tw4uplk],
    .ct-google-link-btn[b-jh5tw4uplk] {
        width: 100%;
    }

    .ct-fs-overlay[b-jh5tw4uplk] {
        padding: 0;
    }

    .ct-fs-panel[b-jh5tw4uplk] {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .ct-fs-footer__hint[b-jh5tw4uplk] {
        display: none;
    }
}
/* /Components/Pages/CongTrinh/Edit.razor.rz.scp.css */
/* ════════════════════════════════════════════════════
   CongTrinh Edit — Check-in / Fingerprint Locations
   Clean CSS - scoped for Edit.razor
   ════════════════════════════════════════════════════ */

/* =========================================================
   ROOT
========================================================= */

.ct-location-card[b-xb6mysnafv] {
    overflow: hidden;
}

.ct-location-card--mock[b-xb6mysnafv] {
    border: 1px solid #dbe7f7 !important;
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}

    .ct-location-card--mock .ct-svg[b-xb6mysnafv] {
        display: inline-flex;
        width: 1em;
        height: 1em;
        fill: currentColor;
        flex: 0 0 auto;
    }

/* =========================================================
   HERO
========================================================= */

.ct-location-hero[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #e8eef7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.ct-location-hero__icon[b-xb6mysnafv] {
    width: 44px;
    height: 44px;
    border: 1px solid #cfe0ff;
    border-radius: 11px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px rgba(37, 99, 235, .08);
}

    .ct-location-hero__icon .ct-svg-hero-pin[b-xb6mysnafv] {
        width: 32px;
        height: 32px;
    }

.ct-location-hero__content[b-xb6mysnafv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-location-hero__title[b-xb6mysnafv] {
    color: #172554;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ct-location-hero__subtitle[b-xb6mysnafv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.ct-location-layout[b-xb6mysnafv] {
    display: grid;
    grid-template-columns: 330px minmax(460px, 520px) minmax(300px, 1fr);
    background: #ffffff;
}

.ct-location-layout--mock[b-xb6mysnafv] {
    grid-template-columns: 360px minmax(520px, 600px) minmax(440px, 1fr);
    gap: 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e8eef7;
    background: #fbfdff;
}

.ct-location-list-panel[b-xb6mysnafv],
.ct-location-form-panel[b-xb6mysnafv],
.ct-map-panel[b-xb6mysnafv] {
    min-width: 0;
}

.ct-location-layout--mock .ct-location-list-panel[b-xb6mysnafv],
.ct-location-layout--mock .ct-location-form-panel[b-xb6mysnafv],
.ct-location-layout--mock .ct-map-panel[b-xb6mysnafv] {
    border: 1px solid #dfe7f3 !important;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}

.ct-location-layout--mock .ct-location-list-panel[b-xb6mysnafv] {
    display: flex;
    flex-direction: column;
}

.ct-location-layout--mock .ct-location-form-panel[b-xb6mysnafv],
.ct-location-layout--mock .ct-map-panel[b-xb6mysnafv] {
    padding: 16px 18px 15px;
}

/* =========================================================
   LEFT PANEL - TOOLBAR
========================================================= */

.ct-location-list-toolbar[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 8px;
}

.ct-list-title[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #172554;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.ct-list-title__icon[b-xb6mysnafv] {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eef5ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-list-title__icon .ct-svg[b-xb6mysnafv] {
        width: 18px;
        height: 18px;
    }

.ct-toolbar-right[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ct-sort-btn[b-xb6mysnafv] {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .03);
}

    .ct-sort-btn:hover[b-xb6mysnafv] {
        border-color: #bfdbfe;
        color: #1d4ed8;
        background: #f8fbff;
    }

    .ct-sort-btn svg[b-xb6mysnafv] {
        width: 16px;
        height: 16px;
        fill: currentColor;
        flex-shrink: 0;
    }

    .ct-sort-btn .ct-sort-chevron[b-xb6mysnafv] {
        width: 15px;
        height: 15px;
    }

.ct-location-list-count[b-xb6mysnafv] {
    padding: 0 16px 12px 54px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

/* =========================================================
   LEFT PANEL - LIST CARD
========================================================= */

.ct-location-list[b-xb6mysnafv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 390px;
    padding: 0 12px 12px;
    overflow-y: auto;
}

    .ct-location-list[b-xb6mysnafv]::-webkit-scrollbar {
        width: 6px;
    }

    .ct-location-list[b-xb6mysnafv]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #cbd5e1;
    }

.ct-location-item[b-xb6mysnafv] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 58px;
    gap: 8px;
    min-height: 112px;
    padding: 14px 10px 12px 12px;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .025);
}

    .ct-location-item:hover[b-xb6mysnafv] {
        border-color: #bcd4ff;
        box-shadow: 0 12px 26px rgba(37, 99, 235, .08);
        transform: translateY(-1px);
    }

    .ct-location-item.is-active[b-xb6mysnafv] {
        border-color: #2563eb;
        background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .12), 0 14px 30px rgba(37, 99, 235, .08);
    }

.ct-location-pin[b-xb6mysnafv] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
}

.ct-location-pin-ring[b-xb6mysnafv] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d3ddea;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #ffffff;
}

    .ct-location-pin-ring.is-selected[b-xb6mysnafv] {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 3px rgba(37, 99, 235, .18);
    }

.ct-location-item__content[b-xb6mysnafv] {
    min-width: 0;
}

.ct-location-item__top[b-xb6mysnafv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 10px;
}

.ct-location-name[b-xb6mysnafv] {
    max-width: 100%;
    color: #172554;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-badges[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ct-badge[b-xb6mysnafv],
.ct-badge--active[b-xb6mysnafv],
.ct-badge--warning[b-xb6mysnafv],
.ct-badge--inactive[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ct-badge--default[b-xb6mysnafv] {
    background: #ffedd5;
    color: #c2410c;
}

.ct-badge--active[b-xb6mysnafv] {
    background: #dcfce7;
    color: #15803d;
}

.ct-badge--warning[b-xb6mysnafv] {
    background: #fef3c7;
    color: #b45309;
}

.ct-badge--inactive[b-xb6mysnafv] {
    background: #f1f5f9;
    color: #64748b;
}

.ct-location-meta-line[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

    .ct-location-meta-line .ct-svg[b-xb6mysnafv] {
        width: 15px;
        height: 15px;
        color: #6b7a90;
    }

/* =========================================================
   LEFT PANEL - ADD LOCATION CTA
   Tone vàng enterprise nhẹ, không chói
========================================================= */

.ct-add-location-card-btn[b-xb6mysnafv] {
    position: relative;
    isolation: isolate;
    min-height: 66px;
    margin: 0 12px 14px;
    padding: 11px 14px;
    border: 1px solid #f3d08a;
    border-radius: 10px;
    background: radial-gradient(circle at 96% 50%, rgba(245, 158, 11, .08) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(251, 191, 36, .14) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
    color: #b7791f;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(146, 64, 14, .055);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

    .ct-add-location-card-btn[b-xb6mysnafv]::before {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -42px;
        width: 126px;
        height: 126px;
        border-radius: 999px;
        background: rgba(254, 243, 199, .46);
        z-index: -1;
    }

    .ct-add-location-card-btn[b-xb6mysnafv]::after {
        content: "";
        position: absolute;
        right: 36px;
        top: 23px;
        width: 28px;
        height: 28px;
        border: 7px solid rgba(245, 158, 11, .06);
        border-radius: 999px;
        z-index: -1;
    }

    .ct-add-location-card-btn:hover[b-xb6mysnafv] {
        border-color: #eab549;
        background: radial-gradient(circle at 96% 50%, rgba(245, 158, 11, .10) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(251, 191, 36, .18) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #fff7e6 100%);
        box-shadow: 0 10px 20px rgba(146, 64, 14, .085);
        transform: translateY(-1px);
    }

    .ct-add-location-card-btn:active[b-xb6mysnafv] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(146, 64, 14, .07);
    }

.ct-add-location-card-btn__icon[b-xb6mysnafv] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f0a526 0%, #d98212 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(217, 130, 18, .20);
}

    .ct-add-location-card-btn__icon .ct-svg[b-xb6mysnafv] {
        width: 21px;
        height: 21px;
    }

.ct-add-location-card-btn__content[b-xb6mysnafv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-add-location-card-btn__title[b-xb6mysnafv] {
    color: #b7791f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-add-location-card-btn__subtitle[b-xb6mysnafv] {
    color: #78716c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-add-location-card-btn__arrow[b-xb6mysnafv] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #c47a11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
    transition: transform .15s ease, opacity .15s ease;
}

    .ct-add-location-card-btn__arrow .ct-svg[b-xb6mysnafv] {
        width: 18px;
        height: 18px;
    }

.ct-add-location-card-btn:hover .ct-add-location-card-btn__arrow[b-xb6mysnafv] {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .ct-add-location-card-btn[b-xb6mysnafv] {
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        min-height: 64px;
        padding: 10px 13px;
    }

    .ct-add-location-card-btn__icon[b-xb6mysnafv] {
        width: 36px;
        height: 36px;
    }

    .ct-add-location-card-btn__title[b-xb6mysnafv] {
        font-size: 13px;
    }

    .ct-add-location-card-btn__subtitle[b-xb6mysnafv] {
        font-size: 11.5px;
    }
}
/* =========================================================
   EMPTY LOCATION
========================================================= */

.ct-empty-location[b-xb6mysnafv] {
    min-height: 185px;
    padding: 24px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.ct-empty-location__svg[b-xb6mysnafv] {
    width: 42px;
    height: 42px;
}

.ct-empty-location span[b-xb6mysnafv] {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.ct-empty-location small[b-xb6mysnafv] {
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================================
   CENTER FORM
========================================================= */

.ct-form-title[b-xb6mysnafv] {
    margin-bottom: 13px;
    color: #3d5166;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ct-location-form-grid[b-xb6mysnafv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
}

.ct-field--span2[b-xb6mysnafv] {
    grid-column: span 2;
}

.ct-location-form-panel .nv-label[b-xb6mysnafv] {
    color: #172554;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ct-location-form-panel .nv-input[b-xb6mysnafv],
.ct-location-form-panel .textarea-input[b-xb6mysnafv],
.ct-location-form-panel .nv-select[b-xb6mysnafv] {
    min-height: 34px;
    border-color: #d3ddea;
    border-radius: 7px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    background-color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .035);
}

    .ct-location-form-panel .nv-input:focus[b-xb6mysnafv],
    .ct-location-form-panel .textarea-input:focus[b-xb6mysnafv],
    .ct-location-form-panel .nv-select:focus[b-xb6mysnafv] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
        outline: none;
    }

.ct-location-placeholder[b-xb6mysnafv] {
    min-height: 310px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

/* =========================================================
   COORDINATE HELPER
========================================================= */

.ct-coordinate-helper[b-xb6mysnafv] {
    display: block !important;
    padding: 12px 14px 10px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
}

.ct-coordinate-helper__title[b-xb6mysnafv] {
    margin-bottom: 10px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}

.ct-coordinate-steps[b-xb6mysnafv] {
    display: grid;
    grid-template-columns: 1fr 18px 1.1fr 18px 1.25fr;
    align-items: center;
    gap: 8px;
}

.ct-coordinate-step[b-xb6mysnafv] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ct-coordinate-step__icon[b-xb6mysnafv] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf2ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-coordinate-step__icon .ct-svg[b-xb6mysnafv] {
        width: 25px;
        height: 25px;
    }

.ct-coordinate-step__icon--maps[b-xb6mysnafv] {
    background: #eff6ff;
}

.ct-coordinate-step b[b-xb6mysnafv] {
    display: block;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.05;
}

.ct-coordinate-step span[b-xb6mysnafv] {
    display: block;
    color: #334155;
    font-size: 11.2px;
    font-weight: 600;
    line-height: 1.24;
}

.ct-coordinate-step strong[b-xb6mysnafv] {
    color: #172554;
    font-weight: 800;
}

.ct-coordinate-arrow[b-xb6mysnafv] {
    color: #64748b;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.ct-coordinate-example[b-xb6mysnafv] {
    min-height: 28px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ebf4ff;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

    .ct-coordinate-example .ct-svg[b-xb6mysnafv] {
        width: 15px;
        height: 15px;
        color: #60a5fa;
    }

    .ct-coordinate-example b[b-xb6mysnafv] {
        color: #0b5ed7;
        font-weight: 800;
    }

.ct-coordinate-helper__footer[b-xb6mysnafv] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* =========================================================
   GOOGLE MAP CTA CARD - compact như nút thêm vị trí
========================================================= */

.ct-coordinate-helper__footer[b-xb6mysnafv] {
    margin-top: 10px;
}

.ct-google-map-card-btn[b-xb6mysnafv] {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 66px;
    padding: 11px 14px;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    background: radial-gradient(circle at 96% 50%, rgba(37, 99, 235, .08) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(147, 197, 253, .16) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    color: #1d4ed8;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .07);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

    .ct-google-map-card-btn[b-xb6mysnafv]::before {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -42px;
        width: 126px;
        height: 126px;
        border-radius: 999px;
        background: rgba(219, 234, 254, .50);
        z-index: -1;
    }

    .ct-google-map-card-btn[b-xb6mysnafv]::after {
        content: "";
        position: absolute;
        right: 36px;
        top: 23px;
        width: 28px;
        height: 28px;
        border: 7px solid rgba(37, 99, 235, .06);
        border-radius: 999px;
        z-index: -1;
    }

    .ct-google-map-card-btn:hover[b-xb6mysnafv] {
        border-color: #3b82f6;
        background: radial-gradient(circle at 96% 50%, rgba(37, 99, 235, .11) 0 34px, transparent 35px), radial-gradient(circle at 103% 72%, rgba(147, 197, 253, .22) 0 76px, transparent 77px), linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
        box-shadow: 0 10px 20px rgba(37, 99, 235, .11);
        transform: translateY(-1px);
    }

    .ct-google-map-card-btn:active[b-xb6mysnafv] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(37, 99, 235, .08);
    }

.ct-google-map-card-btn__visual[b-xb6mysnafv] {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: radial-gradient(circle at 45% 42%, rgba(255, 255, 255, .96) 0 12px, transparent 13px), linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .75);
}

.ct-google-map-card-btn__orbit[b-xb6mysnafv] {
    position: absolute;
    inset: 4px;
    border: 1.5px solid rgba(59, 130, 246, .22);
    border-radius: 999px;
    transform: rotate(-18deg);
}

    .ct-google-map-card-btn__orbit[b-xb6mysnafv]::before,
    .ct-google-map-card-btn__orbit[b-xb6mysnafv]::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 74%;
        height: 1px;
        background: rgba(59, 130, 246, .14);
        transform: translateX(-50%);
    }

    .ct-google-map-card-btn__orbit[b-xb6mysnafv]::before {
        top: 10px;
    }

    .ct-google-map-card-btn__orbit[b-xb6mysnafv]::after {
        bottom: 10px;
    }

.ct-google-map-card-btn__pin[b-xb6mysnafv] {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 8px rgba(37, 99, 235, .20));
}

    .ct-google-map-card-btn__pin .ct-svg[b-xb6mysnafv] {
        width: 27px;
        height: 27px;
    }

.ct-google-map-card-btn__content[b-xb6mysnafv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-google-map-card-btn__title[b-xb6mysnafv] {
    color: #172554;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-google-map-card-btn__subtitle[b-xb6mysnafv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-google-map-card-btn__actions[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: #2563eb;
}

.ct-google-map-card-btn__open[b-xb6mysnafv],
.ct-google-map-card-btn__chevron[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ct-google-map-card-btn__open .ct-svg[b-xb6mysnafv] {
        width: 17px;
        height: 17px;
    }

.ct-google-map-card-btn__chevron[b-xb6mysnafv] {
    color: #94a3b8;
    transition: transform .15s ease, color .15s ease;
}

    .ct-google-map-card-btn__chevron .ct-svg[b-xb6mysnafv] {
        width: 17px;
        height: 17px;
    }

.ct-google-map-card-btn:hover .ct-google-map-card-btn__chevron[b-xb6mysnafv] {
    color: #2563eb;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .ct-google-map-card-btn[b-xb6mysnafv] {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        min-height: 64px;
        padding: 10px 13px;
    }

    .ct-google-map-card-btn__visual[b-xb6mysnafv] {
        width: 36px;
        height: 36px;
    }

    .ct-google-map-card-btn__pin[b-xb6mysnafv],
    .ct-google-map-card-btn__pin .ct-svg[b-xb6mysnafv] {
        width: 25px;
        height: 25px;
    }

    .ct-google-map-card-btn__title[b-xb6mysnafv] {
        font-size: 13px;
    }

    .ct-google-map-card-btn__subtitle[b-xb6mysnafv] {
        font-size: 11.5px;
    }
}

/* =========================================================
   FIELD HELPERS
========================================================= */

.ct-input-with-unit[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ct-input-with-unit input[b-xb6mysnafv] {
        max-width: 180px;
    }

    .ct-input-with-unit span[b-xb6mysnafv] {
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

.ct-checkbox-row[b-xb6mysnafv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-checkbox[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ct-checkbox input[b-xb6mysnafv] {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

.ct-checkbox-row small[b-xb6mysnafv] {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
    padding-left: 24px;
}

.ct-note-field[b-xb6mysnafv] {
    grid-column: auto !important;
}

.ct-note[b-xb6mysnafv] {
    min-height: 54px !important;
    max-height: 70px;
    resize: none;
}

.ct-note-counter[b-xb6mysnafv] {
    margin-top: -19px;
    padding-right: 8px;
    color: #94a3b8;
    font-size: 11px;
    text-align: right;
    pointer-events: none;
}

/* =========================================================
   MAP PANEL
========================================================= */

.ct-map-panel[b-xb6mysnafv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-map-frame[b-xb6mysnafv] {
    position: relative;
    min-height: 356px;
    border: 1px solid #d3ddea;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
    overflow: hidden;
}

.ct-map-canvas[b-xb6mysnafv] {
    width: 100%;
    height: 356px;
    min-height: 356px;
    background: transparent;
}

.ct-map-empty-state[b-xb6mysnafv] {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 22px 24px;
    background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .10), transparent 32%), linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.ct-map-illustration[b-xb6mysnafv] {
    width: 390px;
    max-width: 76%;
    margin-bottom: 2px;
}

.ct-map-illustration__svg[b-xb6mysnafv] {
    display: block;
    width: 100%;
    height: auto;
}

.ct-map-empty-state .ct-map-manual-fallback__title[b-xb6mysnafv] {
    color: #172554;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.ct-map-empty-state .ct-map-manual-fallback__desc[b-xb6mysnafv] {
    max-width: 520px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.ct-map-fallback-actions[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ct-map-primary-btn[b-xb6mysnafv],
.ct-map-secondary-btn[b-xb6mysnafv] {
    height: 38px;
    padding: 0 18px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .15s ease;
}

.ct-map-primary-btn[b-xb6mysnafv] {
    border: 1px solid #1d4ed8;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, .20);
}

    .ct-map-primary-btn:hover[b-xb6mysnafv] {
        filter: brightness(1.03);
        transform: translateY(-1px);
    }

.ct-map-secondary-btn[b-xb6mysnafv] {
    border: 1px solid #bfd3f6;
    background: #ffffff;
    color: #1d4ed8;
}

    .ct-map-secondary-btn:hover[b-xb6mysnafv] {
        background: #f5f9ff;
        border-color: #93c5fd;
    }

.ct-map-tech-note[b-xb6mysnafv] {
    width: min(520px, 92%);
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(241, 245, 249, .82);
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

    .ct-map-tech-note .ct-svg[b-xb6mysnafv] {
        width: 17px;
        height: 17px;
        color: #64748b;
    }

.ct-expand-btn[b-xb6mysnafv] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, .55);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

    .ct-expand-btn:hover[b-xb6mysnafv] {
        background: #ffffff;
        color: #1d4ed8;
    }

/* =========================================================
   MAP GUIDE + SEARCH
========================================================= */

.ct-map-hint[b-xb6mysnafv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid #dbe7ff;
    border-radius: 10px;
    background: #fbfdff;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

    .ct-map-hint .ct-svg[b-xb6mysnafv] {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: #475569;
    }

.ct-map-guide div[b-xb6mysnafv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-map-guide strong[b-xb6mysnafv] {
    color: #172554;
    font-size: 12.5px;
    font-weight: 800;
}

.ct-map-guide span[b-xb6mysnafv] {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
}

.ct-map-guide b[b-xb6mysnafv] {
    color: #1d4ed8;
    font-weight: 800;
}

.ct-search-wrap[b-xb6mysnafv] {
    position: relative;
}

.ct-search-box[b-xb6mysnafv] {
    height: 38px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    padding: 0 8px 0 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ct-search-box:focus-within[b-xb6mysnafv] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    }

.ct-search-icon[b-xb6mysnafv] {
    color: #64748b;
    font-size: 16px;
    flex-shrink: 0;
}

.ct-search-input[b-xb6mysnafv] {
    min-width: 0;
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #334155;
    font-size: 13px;
}

    .ct-search-input[b-xb6mysnafv]::placeholder {
        color: #94a3b8;
    }

.ct-search-btn[b-xb6mysnafv] {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}

    .ct-search-btn:hover[b-xb6mysnafv] {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

/* =========================================================
   LOCATION TABLE - đồng bộ table Phiếu tăng ca
========================================================= */

.ct-location-table-card[b-xb6mysnafv] {
    margin-top: 12px;
}

.ct-location-table-wrap[b-xb6mysnafv] {
    margin: 0 !important;
    padding: 12px 16px 16px;
}

#tblCongTrinhViTris[b-xb6mysnafv],
#tblCongTrinhViTris tbody[b-xb6mysnafv],
#tblCongTrinhViTris tr[b-xb6mysnafv],
#tblCongTrinhViTris td[b-xb6mysnafv] {
    overflow: visible;
}

#tblCongTrinhViTris[b-xb6mysnafv] {
    margin-bottom: 0 !important;
}

    #tblCongTrinhViTris th[b-xb6mysnafv],
    #tblCongTrinhViTris td[b-xb6mysnafv] {
        vertical-align: middle;
    }

    #tblCongTrinhViTris tbody tr[b-xb6mysnafv] {
        cursor: pointer;
    }

        #tblCongTrinhViTris tbody tr.ct-row-selected[b-xb6mysnafv],
        #tblCongTrinhViTris tbody tr:hover[b-xb6mysnafv] {
            background: #f8fbff;
        }

.ct-table-actions[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ct-table-default-badge[b-xb6mysnafv] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ct-check[b-xb6mysnafv] {
    color: #16a34a;
    font-size: 17px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .ct-location-table-wrap[b-xb6mysnafv] {
        overflow-x: auto;
    }

    #tblCongTrinhViTris[b-xb6mysnafv] {
        min-width: 980px;
    }
}

/* =========================================================
   FULLSCREEN MAP
========================================================= */

.ct-fs-overlay[b-xb6mysnafv] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(15, 23, 42, .58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ctFsIn-b-xb6mysnafv .18s ease;
}

    .ct-fs-overlay.ct-fs-hidden[b-xb6mysnafv] {
        display: none;
    }

@keyframes ctFsIn-b-xb6mysnafv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ct-fs-panel[b-xb6mysnafv] {
    width: 100%;
    max-width: 1180px;
    height: calc(100vh - 60px);
    max-height: 860px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
}

.ct-fs-header[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ct-fs-header__left[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .35px;
}

    .ct-fs-header__left .bi[b-xb6mysnafv] {
        color: #2563eb;
    }

.ct-fs-header__right[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-fs-coords[b-xb6mysnafv] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.ct-fs-close-btn[b-xb6mysnafv] {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}

    .ct-fs-close-btn:hover[b-xb6mysnafv] {
        background: #fef2f2;
        color: #dc2626;
        border-color: #fecaca;
    }

.ct-fs-search-wrap[b-xb6mysnafv] {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    flex-shrink: 0;
}

.ct-fs-map[b-xb6mysnafv] {
    flex: 1;
    min-height: 0;
}

.ct-fs-footer[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ct-fs-footer__hint[b-xb6mysnafv] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
}

.ct-fs-confirm-btn[b-xb6mysnafv] {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
}

    .ct-fs-confirm-btn:hover[b-xb6mysnafv] {
        background: #1d4ed8;
    }

.ct-google-badge[b-xb6mysnafv] {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

[b-xb6mysnafv](.ct-fs-body-lock) {
    overflow: hidden;
}

[b-xb6mysnafv](.pac-container) {
    z-index: 2000 !important;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    font-family: inherit;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1500px) {
    .ct-location-layout--mock[b-xb6mysnafv] {
        grid-template-columns: 330px minmax(450px, 540px) minmax(360px, 1fr);
    }

    .ct-coordinate-steps[b-xb6mysnafv] {
        grid-template-columns: 1fr;
    }

    .ct-coordinate-arrow[b-xb6mysnafv] {
        display: none;
    }
}

@media (max-width: 1200px) {
    .ct-location-layout--mock[b-xb6mysnafv] {
        grid-template-columns: 1fr;
    }

        .ct-location-layout--mock .ct-location-list[b-xb6mysnafv] {
            max-height: 340px;
        }

    .ct-note-field[b-xb6mysnafv] {
        grid-column: span 2 !important;
    }

    .ct-map-canvas[b-xb6mysnafv],
    .ct-map-frame[b-xb6mysnafv] {
        min-height: 320px;
    }

    .ct-map-canvas[b-xb6mysnafv] {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .ct-location-hero[b-xb6mysnafv] {
        align-items: flex-start;
        padding: 16px;
    }

    .ct-location-hero__icon[b-xb6mysnafv] {
        width: 42px;
        height: 42px;
    }

    .ct-location-hero__title[b-xb6mysnafv] {
        font-size: 14px;
    }

    .ct-location-hero__subtitle[b-xb6mysnafv] {
        font-size: 11.8px;
    }

    .ct-location-layout--mock[b-xb6mysnafv] {
        padding: 12px;
        gap: 12px;
    }

    .ct-location-form-grid[b-xb6mysnafv] {
        grid-template-columns: 1fr;
    }

    .ct-field--span2[b-xb6mysnafv],
    .ct-note-field[b-xb6mysnafv] {
        grid-column: span 1 !important;
    }

    .ct-location-table-shell[b-xb6mysnafv] {
        overflow-x: auto;
    }

    .ct-location-detail-table[b-xb6mysnafv] {
        min-width: 980px;
    }

    .ct-map-illustration[b-xb6mysnafv] {
        max-width: 92%;
    }

    .ct-map-fallback-actions[b-xb6mysnafv] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ct-map-primary-btn[b-xb6mysnafv],
    .ct-map-secondary-btn[b-xb6mysnafv],
    .ct-google-link-btn[b-xb6mysnafv] {
        width: 100%;
    }

    .ct-fs-overlay[b-xb6mysnafv] {
        padding: 0;
    }

    .ct-fs-panel[b-xb6mysnafv] {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .ct-fs-footer__hint[b-xb6mysnafv] {
        display: none;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.hr-dashboard-page[b-3jchgvn4ja] {
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding: 10px 0 18px;
    background: #f6f8fc !important;
    background-image: none !important;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
    overflow: visible;
}

    .hr-dashboard-page[b-3jchgvn4ja]::before,
    .hr-dashboard-page[b-3jchgvn4ja]::after {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }

    .hr-dashboard-page *[b-3jchgvn4ja] {
        box-sizing: border-box;
    }

.hr-dashboard-container[b-3jchgvn4ja] {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: #ffffff;
    background-image: none !important;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

.hr-topbar[b-3jchgvn4ja] {
    position: relative;
    z-index: 1600;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.hr-title-row[b-3jchgvn4ja] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .hr-title-row h1[b-3jchgvn4ja] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.hr-topbar p[b-3jchgvn4ja] {
    margin: 7px 0 0;
    color: #66758d;
    font-size: 13px;
    font-weight: 500;
}

.hr-top-actions[b-3jchgvn4ja] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.hr-filter-btn[b-3jchgvn4ja] {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 8px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

    .hr-filter-btn:hover[b-3jchgvn4ja] {
        background: #f7f9fc;
        border-color: #c8d7eb;
        transform: translateY(-1px);
    }

.hr-update[b-3jchgvn4ja] {
    color: #66758d;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
}

.hr-panel[b-3jchgvn4ja],
.hr-kpi-card[b-3jchgvn4ja],
.hr-ai-wide-card[b-3jchgvn4ja] {
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
}

.hr-kpi-grid[b-3jchgvn4ja],
.hr-ai-wide-card[b-3jchgvn4ja],
.hr-main-grid[b-3jchgvn4ja] {
    position: relative;
    z-index: 1;
}

.hr-kpi-grid[b-3jchgvn4ja] {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.hr-kpi-grid-6[b-3jchgvn4ja] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hr-kpi-card[b-3jchgvn4ja] {
    min-height: 82px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 54px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .hr-kpi-card:hover[b-3jchgvn4ja] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.hr-kpi-icon[b-3jchgvn4ja] {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 21px;
    flex-shrink: 0;
}

.hr-kpi-card > div:nth-child(2)[b-3jchgvn4ja] {
    min-width: 0;
}

.hr-kpi-card.orange .hr-kpi-icon[b-3jchgvn4ja] {
    color: #f97316;
    background: #fff7ed;
}

.hr-kpi-card.green .hr-kpi-icon[b-3jchgvn4ja] {
    color: #16a34a;
    background: #ecfdf5;
}

.hr-kpi-card.red .hr-kpi-icon[b-3jchgvn4ja] {
    color: #ef4444;
    background: #fff1f2;
}

.hr-kpi-card.blue .hr-kpi-icon[b-3jchgvn4ja] {
    color: #2563eb;
    background: #eff6ff;
}

.hr-kpi-card.pink .hr-kpi-icon[b-3jchgvn4ja] {
    color: #ec4899;
    background: #fdf2f8;
}

.hr-kpi-card span[b-3jchgvn4ja] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.hr-kpi-card strong[b-3jchgvn4ja] {
    display: block;
    margin-top: 4px;
    color: #1e3355;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.hr-kpi-card p[b-3jchgvn4ja] {
    margin: 5px 0 0;
    color: #8a98ad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
}

.success[b-3jchgvn4ja] {
    color: #059669 !important;
}

.danger[b-3jchgvn4ja] {
    color: #ef4444 !important;
}

.hr-sparkline[b-3jchgvn4ja] {
    width: 52px;
    height: 30px;
    justify-self: end;
    opacity: .95;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.up-line[b-3jchgvn4ja] {
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='34' viewBox='0 0 58 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1,28 10,21 18,23 28,14 38,18 48,6 57,10' fill='none' stroke='%2316a34a' stroke-width='2.2'/%3E%3C/svg%3E");
}

.danger-line[b-3jchgvn4ja] {
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='34' viewBox='0 0 58 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1,29 10,23 19,25 29,15 38,18 48,7 57,12' fill='none' stroke='%23ef4444' stroke-width='2.2'/%3E%3C/svg%3E");
}

.orange-line[b-3jchgvn4ja] {
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='34' viewBox='0 0 58 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1,22 10,14 19,18 29,10 38,17 48,23 57,28' fill='none' stroke='%23f97316' stroke-width='2.2'/%3E%3C/svg%3E");
}

.hr-ai-wide-card[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 14px;
}

.hr-ai-title[b-3jchgvn4ja] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1e3355;
    font-size: 13px;
    font-weight: 700;
}

.hr-ai-icon[b-3jchgvn4ja] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 18px;
    flex-shrink: 0;
}

.hr-ai-main h2[b-3jchgvn4ja] {
    margin: 0 0 14px;
    color: #1e3355;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.hr-ai-metrics[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

    .hr-ai-metrics div[b-3jchgvn4ja] {
        border-right: 1px solid #e8edf5;
        padding-right: 18px;
    }

        .hr-ai-metrics div:last-child[b-3jchgvn4ja] {
            border-right: 0;
        }

    .hr-ai-metrics span[b-3jchgvn4ja] {
        display: block;
        color: #66758d;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .hr-ai-metrics strong[b-3jchgvn4ja] {
        display: block;
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 650;
    }

.hr-primary-btn[b-3jchgvn4ja] {
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

.hr-panel[b-3jchgvn4ja] {
    padding: 14px 16px;
}

.hr-panel-header[b-3jchgvn4ja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    min-height: 34px;
}

    .hr-panel-header h3[b-3jchgvn4ja] {
        margin: 0;
        color: #1e3355;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
    }

        .hr-panel-header h3 small[b-3jchgvn4ja] {
            color: #66758d;
            font-size: 12px;
            font-weight: 500;
        }

    .hr-panel-header button[b-3jchgvn4ja],
    .hr-panel-header a[b-3jchgvn4ja] {
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #334155;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 650;
        text-decoration: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        line-height: 1;
        box-shadow: none;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }

        .hr-panel-header button:hover[b-3jchgvn4ja],
        .hr-panel-header a:hover[b-3jchgvn4ja] {
            background: #f7f9fc;
            border-color: #c8d7eb;
            color: #1d4ed8;
            transform: translateY(-1px);
        }

.hr-main-grid[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: 1fr 1fr .9fr;
    gap: 14px;
    margin-bottom: 10px;
    align-items: stretch;
}

    .hr-main-grid > .hr-panel[b-3jchgvn4ja] {
        align-self: stretch;
        min-height: 312px;
        display: flex;
        flex-direction: column;
    }

.hr-people-overview[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 170px;
    gap: 18px;
    align-items: center;
    min-height: 222px;
    flex: 1;
}

.hr-donut[b-3jchgvn4ja] {
    width: 165px;
    height: 165px;
    margin: auto;
    border-radius: 50%;
    background: conic-gradient(#16a34a 0 76.6%, #f97316 76.6% 81.7%, #f59e0b 81.7% 84.3%, #2563eb 84.3% 88.1%, #ef4444 88.1% 94.5%, #7c3aed 94.5% 97.9%, #0891b2 97.9% 100%);
    position: relative;
    display: grid;
    place-items: center;
}

    .hr-donut[b-3jchgvn4ja]::after {
        content: "";
        width: 90px;
        height: 90px;
        background: #ffffff;
        border-radius: 50%;
        position: absolute;
    }

.hr-donut-center[b-3jchgvn4ja] {
    position: relative;
    z-index: 1;
    text-align: center;
}

    .hr-donut-center strong[b-3jchgvn4ja] {
        display: block;
        color: #1e3355;
        font-size: 25px;
        font-weight: 800;
        line-height: 1;
    }

    .hr-donut-center span[b-3jchgvn4ja] {
        display: block;
        margin-top: 6px;
        color: #66758d;
        font-size: 12px;
        font-weight: 600;
    }

.hr-status-list[b-3jchgvn4ja] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .hr-status-list div[b-3jchgvn4ja] {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr) 44px 52px;
        align-items: center;
        gap: 8px;
        color: #53647f;
        font-size: 13px;
        font-weight: 500;
    }

    .hr-status-list label[b-3jchgvn4ja] {
        margin: 0;
        color: #53647f;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

    .hr-status-list strong[b-3jchgvn4ja] {
        color: #1e3355;
        text-align: right;
        font-size: 13px;
        font-weight: 650;
    }

    .hr-status-list em[b-3jchgvn4ja] {
        color: #66758d;
        font-style: normal;
        text-align: right;
        font-size: 12.5px;
        font-weight: 500;
    }

.dot[b-3jchgvn4ja] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.green[b-3jchgvn4ja] {
        background: #16a34a;
    }

    .dot.orange[b-3jchgvn4ja] {
        background: #f97316;
    }

    .dot.amber[b-3jchgvn4ja] {
        background: #f59e0b;
    }

    .dot.blue[b-3jchgvn4ja] {
        background: #2563eb;
    }

    .dot.red[b-3jchgvn4ja] {
        background: #ef4444;
    }

    .dot.purple[b-3jchgvn4ja] {
        background: #7c3aed;
    }

    .dot.cyan[b-3jchgvn4ja] {
        background: #0891b2;
    }

.hr-compare-box[b-3jchgvn4ja] {
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 12px;
    background: #fbfdff;
}

    .hr-compare-box h4[b-3jchgvn4ja] {
        margin: 0 0 10px;
        color: #1e3355;
        font-size: 13px;
        font-weight: 700;
    }

    .hr-compare-box div[b-3jchgvn4ja] {
        display: grid;
        grid-template-columns: 1fr 42px;
        margin-bottom: 7px;
        color: #53647f;
        font-size: 12.5px;
        font-weight: 500;
    }

    .hr-compare-box span[b-3jchgvn4ja] {
        text-align: right;
        font-weight: 700;
    }

.hr-line-legend[b-3jchgvn4ja] {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #53647f;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 4px;
}

    .hr-line-legend span[b-3jchgvn4ja] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .hr-line-legend i[b-3jchgvn4ja] {
        width: 16px;
        height: 3px;
        border-radius: 99px;
        display: inline-block;
    }

        .hr-line-legend i.blue[b-3jchgvn4ja] {
            background: #2563eb;
        }

        .hr-line-legend i.orange[b-3jchgvn4ja] {
            background: #f97316;
        }

.hr-line-chart[b-3jchgvn4ja] {
    height: auto;
    min-height: 206px;
    display: flex;
    align-items: center;
    flex: 1;
    padding-right: 4px;
    padding-top: 2px;
}

    .hr-line-chart svg[b-3jchgvn4ja] {
        width: 100%;
        height: 100%;
        min-height: 206px;
        overflow: visible;
    }

    .hr-line-chart .axis[b-3jchgvn4ja] {
        stroke: #e5e7eb;
        stroke-width: 1;
    }

.line-blue[b-3jchgvn4ja],
.line-orange[b-3jchgvn4ja] {
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.line-blue[b-3jchgvn4ja] {
    stroke: #3b82f6;
}

.line-orange[b-3jchgvn4ja] {
    stroke: #fb923c;
}

.points-blue circle[b-3jchgvn4ja],
.points-orange circle[b-3jchgvn4ja] {
    r: 3.6;
}

.points-blue circle[b-3jchgvn4ja] {
    fill: #2563eb;
}

.points-orange circle[b-3jchgvn4ja] {
    fill: #f97316;
}

.axis-label[b-3jchgvn4ja] {
    fill: #66758d;
    font-size: 11.5px;
    font-weight: 600;
}

.label-blue[b-3jchgvn4ja] {
    fill: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.label-orange[b-3jchgvn4ja] {
    fill: #f97316;
    font-size: 12px;
    font-weight: 700;
}

.hr-pill[b-3jchgvn4ja] {
    background: #f2f4f7;
    color: #66758d;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 650;
}

.hr-task-list[b-3jchgvn4ja] {
    display: flex;
    flex-direction: column;
}

.hr-task[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
}

    .hr-task > span[b-3jchgvn4ja] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hr-task > i:first-child[b-3jchgvn4ja] {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-size: 13px;
    }

    .hr-task > i.green[b-3jchgvn4ja] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .hr-task > i.blue[b-3jchgvn4ja] {
        color: #2563eb;
        background: #eff6ff;
    }

    .hr-task > i.orange[b-3jchgvn4ja] {
        color: #f97316;
        background: #fff7ed;
    }

    .hr-task > i.purple[b-3jchgvn4ja] {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .hr-task > i.red[b-3jchgvn4ja] {
        color: #ef4444;
        background: #fff1f2;
    }

    .hr-task em[b-3jchgvn4ja] {
        font-style: normal;
        background: #fff1f2;
        color: #ef4444;
        border-radius: 7px;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 650;
        white-space: nowrap;
    }

        .hr-task em.blue[b-3jchgvn4ja] {
            background: #eff6ff;
            color: #2563eb;
        }

        .hr-task em.warning[b-3jchgvn4ja] {
            background: #fff7ed;
            color: #f97316;
        }

.hr-view-all[b-3jchgvn4ja] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #2563eb;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.hr-operation-panel[b-3jchgvn4ja] {
    margin-top: 0;
    margin-bottom: 14px;
}

.hr-operation-grid[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.hr-operation-card[b-3jchgvn4ja] {
    min-height: 74px;
    padding: 12px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
}

    .hr-operation-card > i[b-3jchgvn4ja] {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 17px;
    }

    .hr-operation-card.green > i[b-3jchgvn4ja] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .hr-operation-card.purple > i[b-3jchgvn4ja] {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .hr-operation-card.orange > i[b-3jchgvn4ja] {
        color: #f97316;
        background: #fff7ed;
    }

    .hr-operation-card.blue > i[b-3jchgvn4ja] {
        color: #2563eb;
        background: #eff6ff;
    }

    .hr-operation-card span[b-3jchgvn4ja] {
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 650;
    }

    .hr-operation-card strong[b-3jchgvn4ja] {
        display: block;
        margin-top: 3px;
        color: #1e3355;
        font-size: 19px;
        font-weight: 750;
    }

    .hr-operation-card p[b-3jchgvn4ja] {
        margin: 4px 0 0;
        color: #66758d;
        font-size: 11.5px;
    }

.hr-quick-panel[b-3jchgvn4ja] {
    margin-top: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .hr-quick-panel h3[b-3jchgvn4ja] {
        margin: 0 0 16px;
        color: #1e3355;
        font-size: 15px;
        font-weight: 780;
    }

.hr-quick-grid[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

    .hr-quick-grid a[b-3jchgvn4ja],
    .hr-quick-grid button[b-3jchgvn4ja] {
        position: relative;
        min-height: 58px;
        padding: 0 12px;
        border: 1px solid #d9e6f7;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #1e3355;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.2;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    }

        .hr-quick-grid a i[b-3jchgvn4ja],
        .hr-quick-grid button i[b-3jchgvn4ja] {
            width: 30px;
            height: 30px;
            min-width: 30px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: #eff6ff;
            color: #2563eb;
            font-size: 15px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
            transition: background-color .15s ease, color .15s ease, transform .15s ease;
        }

        .hr-quick-grid a span[b-3jchgvn4ja],
        .hr-quick-grid button span[b-3jchgvn4ja] {
            min-width: 0;
            color: inherit;
            font-size: 13px;
            font-weight: 760;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hr-quick-grid a:hover[b-3jchgvn4ja],
        .hr-quick-grid button:hover[b-3jchgvn4ja] {
            background: #ffffff;
            border-color: #93c5fd;
            color: #1d4ed8;
            box-shadow: 0 12px 26px rgba(37, 99, 235, .12);
            transform: translateY(-1px);
        }

            .hr-quick-grid a:hover i[b-3jchgvn4ja],
            .hr-quick-grid button:hover i[b-3jchgvn4ja] {
                background: #dbeafe;
                color: #1d4ed8;
                transform: scale(1.03);
            }

        .hr-quick-grid a:active[b-3jchgvn4ja],
        .hr-quick-grid button:active[b-3jchgvn4ja] {
            transform: translateY(0);
            box-shadow: 0 6px 14px rgba(37, 99, 235, .09);
        }

        .hr-quick-grid a[href="/user/process"][b-3jchgvn4ja] {
            border-color: #c7d2fe;
            background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
            color: #1e40af;
            box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
        }

            .hr-quick-grid a[href="/user/process"][b-3jchgvn4ja]::after {
                content: "";
                position: absolute;
                top: 14px;
                right: 13px;
                width: 6px;
                height: 6px;
                border-radius: 999px;
                background: #ef4444;
                box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
            }

            .hr-quick-grid a[href="/user/process"] i[b-3jchgvn4ja] {
                background: #e0e7ff;
                color: #4f46e5;
            }

            .hr-quick-grid a[href="/user/process"]:hover[b-3jchgvn4ja] {
                border-color: #a5b4fc;
                color: #3730a3;
                box-shadow: 0 14px 30px rgba(79, 70, 229, .14);
            }

                .hr-quick-grid a[href="/user/process"]:hover i[b-3jchgvn4ja] {
                    background: #c7d2fe;
                    color: #4338ca;
                }

        .hr-quick-grid a[href="/bang-luong-nhan-vien"][b-3jchgvn4ja],
        .hr-quick-grid a[href="/hop-dong-lao-dong"][b-3jchgvn4ja] {
            color: #1e3355;
            font-weight: 760;
        }

            .hr-quick-grid a[href="/bang-luong-nhan-vien"] span[b-3jchgvn4ja],
            .hr-quick-grid a[href="/hop-dong-lao-dong"] span[b-3jchgvn4ja] {
                font-weight: 770;
            }

            .hr-quick-grid a[href="/bang-luong-nhan-vien"] i[b-3jchgvn4ja],
            .hr-quick-grid a[href="/hop-dong-lao-dong"] i[b-3jchgvn4ja] {
                background: #eef4ff;
                color: #1d4ed8;
            }

.dashboard-filter-wrap[b-3jchgvn4ja] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dashboard-month-panel[b-3jchgvn4ja] {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1800;
    width: 236px;
    padding: 12px;
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
}

.dashboard-month-grid[b-3jchgvn4ja] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.dashboard-month-item[b-3jchgvn4ja] {
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .dashboard-month-item:hover[b-3jchgvn4ja] {
        background: #f8fbff;
        border-color: #bfdbfe;
        color: #2563eb;
    }

    .dashboard-month-item.is-selected[b-3jchgvn4ja] {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

.dashboard-year-row[b-3jchgvn4ja] {
    height: 38px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf2f8;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
}

    .dashboard-year-row button[b-3jchgvn4ja] {
        width: 34px;
        height: 30px;
        border: 1px solid #e2e8f0;
        border-radius: 9px;
        background: #ffffff;
        color: #475569;
        cursor: pointer;
    }

    .dashboard-year-row strong[b-3jchgvn4ja] {
        text-align: center;
        color: #1e3355;
        font-size: 14px;
        font-weight: 800;
    }

.dashboard-dept-filter[b-3jchgvn4ja] {
    z-index: 1700;
}

.dashboard-dept-btn[b-3jchgvn4ja] {
    max-width: 270px;
}

    .dashboard-dept-btn span:not(.dashboard-tree-select__clear)[b-3jchgvn4ja] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dashboard-tree-select[b-3jchgvn4ja] {
    position: relative;
    width: 100%;
    z-index: 1;
}

    .dashboard-tree-select.is-open[b-3jchgvn4ja] {
        z-index: 1900;
    }

.dashboard-tree-select__clear[b-3jchgvn4ja] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 850;
    cursor: pointer;
}

    .dashboard-tree-select__clear:hover[b-3jchgvn4ja] {
        background: #fee2e2;
        color: #dc2626;
    }

.dashboard-tree-select__panel[b-3jchgvn4ja] {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    z-index: 1900;
    width: 360px;
    max-width: min(360px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.dashboard-tree-select__search[b-3jchgvn4ja] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .dashboard-tree-select__search input[b-3jchgvn4ja] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 32px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
    }

.dashboard-tree-select__search-icon[b-3jchgvn4ja] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
}

.dashboard-tree-select__list[b-3jchgvn4ja] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

.dashboard-tree-select__row[b-3jchgvn4ja] {
    position: relative;
    min-height: 34px;
    margin: 2px 0;
    padding-right: 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .dashboard-tree-select__row:hover[b-3jchgvn4ja] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .dashboard-tree-select__row.is-selected[b-3jchgvn4ja] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
    }

    .dashboard-tree-select__row.is-matched:not(.is-selected)[b-3jchgvn4ja] {
        background: #fff9ed;
        border-color: #fde6c5;
        box-shadow: inset 3px 0 0 #f59e0b;
    }

.dashboard-tree-select__row--all[b-3jchgvn4ja] {
    padding-left: 10px;
    font-weight: 800;
}

.dashboard-tree-select__toggle[b-3jchgvn4ja] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-tree-select__toggle:hover[b-3jchgvn4ja] {
        background: #e9eef7;
        color: #0f172a;
    }

.dashboard-tree-select__toggle--empty[b-3jchgvn4ja] {
    cursor: default;
    opacity: .35;
}

.dashboard-tree-select__node-icon[b-3jchgvn4ja] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

    .dashboard-tree-select__node-icon.root[b-3jchgvn4ja] {
        color: #2563eb;
        background: #eff6ff;
    }

    .dashboard-tree-select__node-icon.parent[b-3jchgvn4ja] {
        color: #0284c7;
        background: #e0f2fe;
    }

    .dashboard-tree-select__node-icon.leaf[b-3jchgvn4ja] {
        color: #16a34a;
        background: #ecfdf5;
    }

.dashboard-tree-select__label[b-3jchgvn4ja] {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-tree-select__empty[b-3jchgvn4ja] {
    margin: 4px;
    padding: 18px 12px;
    border: 1px dashed #d9e2ef;
    border-radius: 12px;
    background: #fbfdff;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1600px) {
    .hr-kpi-grid-6[b-3jchgvn4ja] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hr-main-grid[b-3jchgvn4ja] {
        grid-template-columns: 1fr;
        align-items: start;
    }

        .hr-main-grid > .hr-panel[b-3jchgvn4ja] {
            align-self: start;
            min-height: unset;
        }

    .hr-operation-grid[b-3jchgvn4ja] {
        grid-template-columns: repeat(3, 1fr);
    }

    .hr-quick-grid[b-3jchgvn4ja] {
        grid-template-columns: repeat(4, 1fr);
    }

    .hr-people-overview[b-3jchgvn4ja] {
        min-height: unset;
        flex: unset;
    }

    .hr-line-chart[b-3jchgvn4ja],
    .hr-line-chart svg[b-3jchgvn4ja] {
        min-height: 198px;
    }
}

@media (max-width: 1100px) {
    .hr-dashboard-container[b-3jchgvn4ja] {
        padding: 16px;
    }

    .hr-topbar[b-3jchgvn4ja],
    .hr-ai-wide-card[b-3jchgvn4ja] {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .hr-ai-metrics[b-3jchgvn4ja] {
        grid-template-columns: 1fr 1fr;
    }

        .hr-ai-metrics div[b-3jchgvn4ja] {
            border-right: 0;
            padding-right: 0;
        }

    .hr-top-actions[b-3jchgvn4ja] {
        justify-content: flex-start;
    }

    .hr-people-overview[b-3jchgvn4ja] {
        grid-template-columns: 1fr;
    }

    .hr-donut[b-3jchgvn4ja] {
        width: 190px;
        height: 190px;
    }

    .hr-operation-grid[b-3jchgvn4ja] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .hr-kpi-grid-6[b-3jchgvn4ja],
    .hr-operation-grid[b-3jchgvn4ja],
    .hr-quick-grid[b-3jchgvn4ja],
    .hr-ai-metrics[b-3jchgvn4ja] {
        grid-template-columns: 1fr;
    }

    .hr-alert-list.timeline div[b-3jchgvn4ja] {
        column-gap: 12px;
    }

    .hr-alert-list small[b-3jchgvn4ja] {
        padding-left: 10px;
    }
}
/* /Components/Pages/GiamSatChamCongNhanVien/GiamSatNhanVienDetail.razor.rz.scp.css */
/* =========================================================
   DETAIL PANEL - FIXED WORKSPACE
========================================================= */

.gsnv-detail-panel[b-24wo2rjmvv] {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3000;
    width: min(82vw, 1500px);
    min-width: min(1280px, 82vw);
    height: 100dvh;
    max-height: 100dvh;
    background: #f8fafc;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid #e7edf5;
    box-shadow: -18px 0 48px rgba(15, 23, 42, .10);
    animation: gsnvSlideIn-b-24wo2rjmvv .22s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    isolation: isolate;
}

    .gsnv-detail-panel[b-24wo2rjmvv]::before {
        content: none !important;
        display: none !important;
    }

@keyframes gsnvSlideIn-b-24wo2rjmvv {
    from {
        opacity: .94;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   SVG BASE
========================================================= */

.gsnv-svg[b-24wo2rjmvv],
.gsnv-btn-svg[b-24wo2rjmvv] {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.gsnv-profile-icon svg[b-24wo2rjmvv],
.gsnv-status-icon svg[b-24wo2rjmvv],
.gsnv-status-sub svg[b-24wo2rjmvv],
.gsnv-insight-suggestion svg[b-24wo2rjmvv] {
    display: block;
}

/* =========================================================
   HEADER
========================================================= */

.gsnv-detail-header[b-24wo2rjmvv] {
    height: 58px;
    padding: 0 24px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.gsnv-detail-header-left[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gsnv-header-icon-btn[b-24wo2rjmvv] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .gsnv-header-icon-btn:hover[b-24wo2rjmvv] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(15, 23, 42, .05);
    }

.gsnv-detail-title[b-24wo2rjmvv] {
    color: #0f172a;
    font-size: 15.5px;
    line-height: 1.2;
    font-weight: 780;
    letter-spacing: -.012em;
}

/* =========================================================
   TAB
========================================================= */

.gsnv-tab-nav[b-24wo2rjmvv] {
    height: 50px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    gap: 28px;
}

.gsnv-tab[b-24wo2rjmvv] {
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 720;
    line-height: 1;
    position: relative;
    cursor: pointer;
    transition: color .16s ease;
}

    .gsnv-tab:hover[b-24wo2rjmvv],
    .gsnv-tab.active[b-24wo2rjmvv] {
        color: #2563eb;
    }

        .gsnv-tab.active[b-24wo2rjmvv]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #2563eb;
            border-radius: 999px;
        }

/* =========================================================
   PROFILE
========================================================= */

.gsnv-profile-wrapper[b-24wo2rjmvv] {
    padding: 22px 24px 0;
    position: relative;
    z-index: 1;
}

.gsnv-profile-top[b-24wo2rjmvv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 560px);
    gap: 34px;
    align-items: stretch;
}

.gsnv-profile-left[b-24wo2rjmvv] {
    min-height: 176px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 0 0 2px;
}

.gsnv-avatar-wrap[b-24wo2rjmvv] {
    position: relative;
    flex: 0 0 auto;
    margin-top: 0;
}

.gsnv-avatar[b-24wo2rjmvv] {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .12);
}

    .gsnv-avatar img[b-24wo2rjmvv] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .gsnv-avatar span[b-24wo2rjmvv] {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
    }

.gsnv-online-status[b-24wo2rjmvv] {
    display: none !important;
}

.gsnv-profile-info[b-24wo2rjmvv] {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

.gsnv-name[b-24wo2rjmvv] {
    margin-top: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.018em;
}

.gsnv-meta[b-24wo2rjmvv] {
    margin-top: 8px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .gsnv-meta .separator[b-24wo2rjmvv] {
        color: #94a3b8;
        font-size: 13px;
    }

.gsnv-profile-detail-list[b-24wo2rjmvv] {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.gsnv-profile-detail-item[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #52627a;
    font-size: 12.5px;
    line-height: 1.32;
    font-weight: 500;
}

.gsnv-profile-icon[b-24wo2rjmvv] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    color: #7b8aa1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gsnv-profile-icon svg[b-24wo2rjmvv] {
        width: 17px;
        height: 17px;
    }

.gsnv-profile-btn[b-24wo2rjmvv] {
    margin-top: 16px;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .gsnv-profile-btn:hover[b-24wo2rjmvv] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
    }

/* =========================================================
   STATUS CARD - FINAL MATCH MOCK
========================================================= */

.gsnv-status-card[b-24wo2rjmvv] {
    min-height: 176px;
    border-radius: 18px;
    border: 1px solid #d7efe0;
    background: linear-gradient(180deg, #fbfffc 0%, #ffffff 100%);
    padding: 24px 34px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .010), 0 8px 22px rgba(15, 23, 42, .025);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gsnv-status-main[b-24wo2rjmvv] {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex: 1;
    padding: 0 8px 2px;
}

.gsnv-status-icon[b-24wo2rjmvv] {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 999px;
    border: 1px solid #d7efe0;
    background: #ffffff;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .02);
}

    .gsnv-status-icon svg[b-24wo2rjmvv] {
        width: 30px;
        height: 30px;
    }

.gsnv-status-content[b-24wo2rjmvv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1px;
}

.gsnv-status-label[b-24wo2rjmvv] {
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .005em;
}

.gsnv-status-value[b-24wo2rjmvv] {
    margin-top: 13px;
    color: #16a34a;
    font-size: 29px;
    line-height: .95;
    font-weight: 700;
    letter-spacing: -.032em;
    text-transform: uppercase;
}

.gsnv-status-sub[b-24wo2rjmvv] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #16a34a;
    font-size: 11.2px;
    line-height: 1;
    font-weight: 600;
}

    .gsnv-status-sub svg[b-24wo2rjmvv] {
        width: 12px;
        height: 12px;
    }

.gsnv-status-footer[b-24wo2rjmvv] {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #e8f1ed;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gsnv-status-footer-item[b-24wo2rjmvv] {
    position: relative;
    text-align: center;
    min-width: 0;
}

    .gsnv-status-footer-item:not(:last-child)[b-24wo2rjmvv]::after {
        content: "";
        position: absolute;
        top: 3px;
        right: 0;
        width: 1px;
        height: 28px;
        background: #e8eef4;
    }

.gsnv-status-footer-label[b-24wo2rjmvv] {
    color: #94a3b8;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.gsnv-status-footer-value[b-24wo2rjmvv] {
    margin-top: 6px;
    color: #1f2d46;
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   KPI STRIP
========================================================= */

.gsnv-kpi-strip[b-24wo2rjmvv] {
    margin: 18px 24px 0;
    border-radius: 18px;
    border: 1px solid #edf2f7;
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .010), 0 4px 12px rgba(15, 23, 42, .020);
    position: relative;
    z-index: 1;
}

.gsnv-kpi-item[b-24wo2rjmvv] {
    min-height: 78px;
    padding: 11px 14px;
    border-right: 1px solid #edf2f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .gsnv-kpi-item.no-border[b-24wo2rjmvv] {
        border-right: none;
    }

.gsnv-kpi-label[b-24wo2rjmvv] {
    color: #64748b;
    font-size: 10px;
    line-height: 1;
    font-weight: 730;
    letter-spacing: .01em;
}

.gsnv-kpi-value[b-24wo2rjmvv] {
    margin-top: 7px;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
}

    .gsnv-kpi-value.green[b-24wo2rjmvv] {
        color: #16a34a;
    }

    .gsnv-kpi-value.blue[b-24wo2rjmvv] {
        color: #2563eb;
    }

.gsnv-kpi-sub[b-24wo2rjmvv] {
    margin-top: 7px;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 620;
}

/* =========================================================
   COMMON CARD
========================================================= */

.gsnv-card[b-24wo2rjmvv] {
    border-radius: 18px;
    border: 1px solid #edf2f7;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .010), 0 4px 12px rgba(15, 23, 42, .020);
}

.gsnv-card-title[b-24wo2rjmvv] {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 780;
    letter-spacing: -.012em;
}

/* =========================================================
   ANALYTICS
========================================================= */

.gsnv-analytics-grid[b-24wo2rjmvv] {
    padding: 16px 24px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

/* =========================================================
   INSIGHT
========================================================= */

.gsnv-insight-list[b-24wo2rjmvv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gsnv-insight-item[b-24wo2rjmvv] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.gsnv-insight-dot[b-24wo2rjmvv] {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    flex-shrink: 0;
}

    .gsnv-insight-dot.green[b-24wo2rjmvv] {
        background: #22c55e;
    }

.gsnv-insight-suggestion[b-24wo2rjmvv] {
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #2563eb;
    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 650;
}

    .gsnv-insight-suggestion svg[b-24wo2rjmvv] {
        width: 15px;
        height: 15px;
        min-width: 15px;
        margin-top: 1px;
    }

/* =========================================================
   PERFORMANCE
========================================================= */

.gsnv-performance-layout[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.gsnv-progress-ring[b-24wo2rjmvv] {
    width: 116px;
    height: 116px;
    min-width: 116px;
    border-radius: 999px;
    background: radial-gradient(closest-side, #ffffff 76%, transparent 77% 100%), conic-gradient(#22c55e 0 96%, #e2e8f0 96% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsnv-progress-inner[b-24wo2rjmvv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gsnv-progress-value[b-24wo2rjmvv] {
    color: #0f172a;
    font-size: 23px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.03em;
    text-align: center;
}

.gsnv-progress-label[b-24wo2rjmvv] {
    margin-top: 5px;
    color: #16a34a;
    font-size: 10.8px;
    line-height: 1;
    font-weight: 760;
    text-align: center;
}

.gsnv-performance-stats[b-24wo2rjmvv] {
    flex: 1;
    min-width: 0;
}

.gsnv-performance-row[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 650;
}

    .gsnv-performance-row:last-child[b-24wo2rjmvv] {
        margin-bottom: 0;
    }

    .gsnv-performance-row strong[b-24wo2rjmvv] {
        color: #0f172a;
        font-size: 12px;
        font-weight: 800;
    }

        .gsnv-performance-row strong.green[b-24wo2rjmvv] {
            color: #16a34a;
        }

        .gsnv-performance-row strong.orange[b-24wo2rjmvv] {
            color: #ea580c;
        }

        .gsnv-performance-row strong.blue[b-24wo2rjmvv] {
            color: #2563eb;
        }

.gsnv-performance-footer[b-24wo2rjmvv] {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1;
    font-weight: 650;
}

    .gsnv-performance-footer .up[b-24wo2rjmvv] {
        color: #16a34a;
        font-weight: 800;
    }

/* =========================================================
   TREND
========================================================= */

.gsnv-trend-chart[b-24wo2rjmvv] {
    min-height: 166px;
}

.gsnv-trend-header[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

    .gsnv-trend-header .legend[b-24wo2rjmvv] {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #22c55e;
    }

.gsnv-chart-area[b-24wo2rjmvv] {
    height: 128px;
}

    .gsnv-chart-area svg[b-24wo2rjmvv] {
        width: 100%;
        height: 100%;
        display: block;
    }

.gsnv-trend-labels[b-24wo2rjmvv],
.gsnv-chart-labels[b-24wo2rjmvv] {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 650;
    text-align: center;
}

/* =========================================================
   BOTTOM GRID - CALENDAR + HISTORY
========================================================= */

.gsnv-bottom-grid[b-24wo2rjmvv] {
    padding: 16px 24px 22px;
    display: grid;
    grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

    .gsnv-calendar-card[b-24wo2rjmvv],
    .gsnv-history-card[b-24wo2rjmvv],
    .gsnv-bottom-grid > .gsnv-card[b-24wo2rjmvv] {
        min-height: 258px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid #edf2f7;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .010), 0 4px 12px rgba(15, 23, 42, .020);
    }

/* =========================================================
   CALENDAR
========================================================= */

.gsnv-calendar-header[b-24wo2rjmvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

    .gsnv-calendar-header .gsnv-card-title[b-24wo2rjmvv],
    .gsnv-history-card .gsnv-card-title[b-24wo2rjmvv],
    .gsnv-bottom-grid > .gsnv-card > .gsnv-card-title[b-24wo2rjmvv] {
        margin-bottom: 0;
        color: #0f172a;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 780;
        letter-spacing: -.012em;
    }

.gsnv-calendar-actions[b-24wo2rjmvv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

    .gsnv-calendar-actions button[b-24wo2rjmvv] {
        height: 30px;
        min-width: 30px;
        padding: 0 10px;
        border-radius: 9px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
        font-weight: 720;
        line-height: 1;
        cursor: pointer;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

        .gsnv-calendar-actions button:hover[b-24wo2rjmvv] {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #0f172a;
            transform: translateY(-1px);
        }

        .gsnv-calendar-actions button.today[b-24wo2rjmvv] {
            min-width: 64px;
            color: #475569;
        }

.gsnv-calendar-grid[b-24wo2rjmvv] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.gsnv-calendar-day[b-24wo2rjmvv] {
    min-height: 58px;
    padding: 8px 8px 7px;
    border-radius: 14px;
    border: 1px solid #edf2f7;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #334155;
    cursor: default;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}

    .gsnv-calendar-day:hover[b-24wo2rjmvv] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    }

    .gsnv-calendar-day.active[b-24wo2rjmvv] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .08), 0 8px 20px rgba(37, 99, 235, .08);
    }

    .gsnv-calendar-day .weekday[b-24wo2rjmvv] {
        color: #94a3b8;
        font-size: 9.5px;
        line-height: 1;
        font-weight: 760;
        text-transform: uppercase;
    }

    .gsnv-calendar-day .date[b-24wo2rjmvv] {
        color: #0f172a;
        font-size: 16px;
        line-height: 1.05;
        font-weight: 820;
        letter-spacing: -.02em;
    }

    .gsnv-calendar-day .status-dot[b-24wo2rjmvv],
    .gsnv-calendar-legend .dot[b-24wo2rjmvv] {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        display: inline-block;
        flex-shrink: 0;
    }

        .gsnv-calendar-day .status-dot.green[b-24wo2rjmvv],
        .gsnv-calendar-legend .dot.green[b-24wo2rjmvv] {
            background: #22c55e;
        }

        .gsnv-calendar-day .status-dot.red[b-24wo2rjmvv],
        .gsnv-calendar-legend .dot.red[b-24wo2rjmvv] {
            background: #ef4444;
        }

        .gsnv-calendar-day .status-dot.purple[b-24wo2rjmvv],
        .gsnv-calendar-legend .dot.purple[b-24wo2rjmvv] {
            background: #8b5cf6;
        }

        .gsnv-calendar-day .status-dot.gray[b-24wo2rjmvv],
        .gsnv-calendar-legend .dot.gray[b-24wo2rjmvv] {
            background: #cbd5e1;
        }

.gsnv-calendar-legend[b-24wo2rjmvv] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

    .gsnv-calendar-legend .legend-item[b-24wo2rjmvv] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #64748b;
        font-size: 11.5px;
        line-height: 1;
        font-weight: 650;
        white-space: nowrap;
    }

/* =========================================================
   HISTORY TABLE
========================================================= */

.gsnv-history-table[b-24wo2rjmvv] {
    width: 100%;
    margin-top: 12px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    overflow: hidden;
    border-radius: 12px;
}

    .gsnv-history-table thead th[b-24wo2rjmvv] {
        height: 38px;
        padding: 0 12px;
        background: #f8fafc;
        border-bottom: 1px solid #edf2f7;
        color: #64748b;
        font-size: 11px;
        line-height: 1.15;
        font-weight: 780;
        text-align: left;
        white-space: nowrap;
    }

    .gsnv-history-table tbody td[b-24wo2rjmvv] {
        height: 40px;
        padding: 0 12px;
        border-bottom: 1px solid #edf2f7;
        color: #334155;
        font-size: 11.5px;
        line-height: 1.2;
        font-weight: 650;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gsnv-history-table tbody tr:last-child td[b-24wo2rjmvv] {
        border-bottom: none;
    }

    .gsnv-history-table tbody tr:hover td[b-24wo2rjmvv] {
        background: #fbfdff;
    }

    .gsnv-history-table th:nth-child(1)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(1)[b-24wo2rjmvv] {
        width: 120px;
    }

    .gsnv-history-table th:nth-child(2)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(2)[b-24wo2rjmvv],
    .gsnv-history-table th:nth-child(3)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(3)[b-24wo2rjmvv] {
        width: 86px;
    }

    .gsnv-history-table th:nth-child(4)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(4)[b-24wo2rjmvv] {
        width: 92px;
    }

    .gsnv-history-table th:nth-child(5)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(5)[b-24wo2rjmvv] {
        width: 118px;
    }

    .gsnv-history-table th:nth-child(6)[b-24wo2rjmvv],
    .gsnv-history-table td:nth-child(6)[b-24wo2rjmvv] {
        width: 92px;
    }

    .gsnv-history-table .status[b-24wo2rjmvv],
    .gsnv-history-table span[class*="status"][b-24wo2rjmvv] {
        min-height: 24px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10.5px;
        font-weight: 780;
        line-height: 1;
        white-space: nowrap;
    }

        .gsnv-history-table .status.green[b-24wo2rjmvv] {
            color: #16a34a;
            background: #eaf8ef;
        }

        .gsnv-history-table .status.blue[b-24wo2rjmvv],
        .gsnv-history-table .status.orange[b-24wo2rjmvv] {
            color: #2563eb;
            background: #edf5ff;
        }

        .gsnv-history-table .status.red[b-24wo2rjmvv] {
            color: #dc2626;
            background: #fff1f2;
        }

        .gsnv-history-table .status.gray[b-24wo2rjmvv] {
            color: #64748b;
            background: #f1f5f9;
        }

.gsnv-history-link[b-24wo2rjmvv] {
    margin-top: 12px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 780;
    line-height: 1;
    cursor: pointer;
}

    .gsnv-history-link .gsnv-btn-svg[b-24wo2rjmvv] {
        width: 14px;
        height: 14px;
    }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1700px) {
    .gsnv-detail-panel[b-24wo2rjmvv] {
        width: 82vw;
    }

    .gsnv-profile-top[b-24wo2rjmvv] {
        grid-template-columns: minmax(0, 1fr) minmax(500px, 540px);
        gap: 34px;
    }
}

@media (max-width: 1500px) {
    .gsnv-profile-top[b-24wo2rjmvv] {
        grid-template-columns: 1fr;
    }

    .gsnv-status-card[b-24wo2rjmvv] {
        max-width: none;
    }

    .gsnv-analytics-grid[b-24wo2rjmvv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gsnv-bottom-grid[b-24wo2rjmvv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .gsnv-detail-panel[b-24wo2rjmvv] {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
    }

    .gsnv-kpi-strip[b-24wo2rjmvv] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gsnv-analytics-grid[b-24wo2rjmvv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .gsnv-detail-header[b-24wo2rjmvv],
    .gsnv-tab-nav[b-24wo2rjmvv] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gsnv-profile-wrapper[b-24wo2rjmvv],
    .gsnv-analytics-grid[b-24wo2rjmvv],
    .gsnv-bottom-grid[b-24wo2rjmvv] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gsnv-profile-left[b-24wo2rjmvv] {
        gap: 14px;
    }

    .gsnv-avatar[b-24wo2rjmvv] {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .gsnv-name[b-24wo2rjmvv] {
        font-size: 21px;
    }

    .gsnv-meta[b-24wo2rjmvv] {
        font-size: 12.5px;
    }

    .gsnv-status-card[b-24wo2rjmvv] {
        padding: 18px;
    }

    .gsnv-status-main[b-24wo2rjmvv] {
        justify-content: flex-start;
        gap: 16px;
    }

    .gsnv-status-icon[b-24wo2rjmvv] {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

        .gsnv-status-icon svg[b-24wo2rjmvv] {
            width: 28px;
            height: 28px;
        }

    .gsnv-status-value[b-24wo2rjmvv] {
        font-size: 27px;
    }

    .gsnv-status-footer[b-24wo2rjmvv] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .gsnv-status-footer-item:not(:last-child)[b-24wo2rjmvv]::after {
        display: none;
    }

    .gsnv-kpi-strip[b-24wo2rjmvv] {
        margin-left: 14px;
        margin-right: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gsnv-history-table[b-24wo2rjmvv] {
        min-width: 680px;
    }

    .gsnv-history-card[b-24wo2rjmvv],
    .gsnv-bottom-grid > .gsnv-card:last-child[b-24wo2rjmvv] {
        overflow-x: auto;
    }
}


/* =========================================================
   ENTERPRISE STATUS / KPI / INSIGHT COLOR SYSTEM
   Mapping màu theo trạng thái thật + mức độ nghiêm trọng
========================================================= */

/* Status card tone */
.gsnv-status-card.tone-success[b-24wo2rjmvv] {
    border-color: #d7efe0;
    background: linear-gradient(180deg, #fbfffc 0%, #ffffff 100%);
}

.gsnv-status-card.tone-warning[b-24wo2rjmvv] {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.gsnv-status-card.tone-danger[b-24wo2rjmvv] {
    border-color: #fecdd3;
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.gsnv-status-card.tone-purple[b-24wo2rjmvv] {
    border-color: #ddd6fe;
    background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
}

.gsnv-status-card.tone-neutral[b-24wo2rjmvv] {
    border-color: #e2e8f0;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.gsnv-status-card.tone-info[b-24wo2rjmvv] {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.gsnv-status-icon.tone-success[b-24wo2rjmvv],
.gsnv-status-value.tone-success[b-24wo2rjmvv],
.gsnv-status-sub.tone-success[b-24wo2rjmvv] {
    color: #16a34a;
}

.gsnv-status-icon.tone-warning[b-24wo2rjmvv],
.gsnv-status-value.tone-warning[b-24wo2rjmvv],
.gsnv-status-sub.tone-warning[b-24wo2rjmvv] {
    color: #ea580c;
}

.gsnv-status-icon.tone-danger[b-24wo2rjmvv],
.gsnv-status-value.tone-danger[b-24wo2rjmvv],
.gsnv-status-sub.tone-danger[b-24wo2rjmvv] {
    color: #dc2626;
}

.gsnv-status-icon.tone-purple[b-24wo2rjmvv],
.gsnv-status-value.tone-purple[b-24wo2rjmvv],
.gsnv-status-sub.tone-purple[b-24wo2rjmvv] {
    color: #7c3aed;
}

.gsnv-status-icon.tone-info[b-24wo2rjmvv],
.gsnv-status-value.tone-info[b-24wo2rjmvv],
.gsnv-status-sub.tone-info[b-24wo2rjmvv] {
    color: #2563eb;
}

.gsnv-status-icon.tone-neutral[b-24wo2rjmvv],
.gsnv-status-value.tone-neutral[b-24wo2rjmvv],
.gsnv-status-sub.tone-neutral[b-24wo2rjmvv] {
    color: #475569;
}

.gsnv-status-card.tone-warning .gsnv-status-footer[b-24wo2rjmvv],
.gsnv-status-card.tone-danger .gsnv-status-footer[b-24wo2rjmvv],
.gsnv-status-card.tone-purple .gsnv-status-footer[b-24wo2rjmvv],
.gsnv-status-card.tone-neutral .gsnv-status-footer[b-24wo2rjmvv],
.gsnv-status-card.tone-info .gsnv-status-footer[b-24wo2rjmvv] {
    border-top-color: #edf2f7;
}

/* KPI value tone */
.gsnv-kpi-value.orange[b-24wo2rjmvv] {
    color: #ea580c;
}

.gsnv-kpi-value.red[b-24wo2rjmvv] {
    color: #dc2626;
}

.gsnv-kpi-value.purple[b-24wo2rjmvv] {
    color: #7c3aed;
}

.gsnv-kpi-value.gray[b-24wo2rjmvv] {
    color: #64748b;
}

/* Performance tone */
.gsnv-progress-label.green[b-24wo2rjmvv] {
    color: #16a34a;
}

.gsnv-progress-label.blue[b-24wo2rjmvv] {
    color: #2563eb;
}

.gsnv-progress-label.orange[b-24wo2rjmvv] {
    color: #ea580c;
}

.gsnv-progress-label.red[b-24wo2rjmvv] {
    color: #dc2626;
}

.gsnv-performance-row strong.red[b-24wo2rjmvv] {
    color: #dc2626;
}

.gsnv-performance-row strong.purple[b-24wo2rjmvv] {
    color: #7c3aed;
}

.gsnv-performance-row strong.gray[b-24wo2rjmvv] {
    color: #64748b;
}

/* Insight dots */
.gsnv-insight-dot.blue[b-24wo2rjmvv] {
    background: #2563eb;
}

.gsnv-insight-dot.orange[b-24wo2rjmvv] {
    background: #f97316;
}

.gsnv-insight-dot.red[b-24wo2rjmvv] {
    background: #ef4444;
}

.gsnv-insight-dot.purple[b-24wo2rjmvv] {
    background: #8b5cf6;
}

.gsnv-insight-dot.gray[b-24wo2rjmvv] {
    background: #94a3b8;
}

/* Calendar color system */
.gsnv-calendar-day .status-dot.orange[b-24wo2rjmvv],
.gsnv-calendar-legend .dot.orange[b-24wo2rjmvv] {
    background: #f97316;
}

.gsnv-calendar-day .status-dot.blue[b-24wo2rjmvv],
.gsnv-calendar-legend .dot.blue[b-24wo2rjmvv] {
    background: #2563eb;
}

/* History badge full mapping */
.gsnv-history-table .status.orange[b-24wo2rjmvv] {
    color: #ea580c;
    background: #fff7ed;
}

.gsnv-history-table .status.blue[b-24wo2rjmvv] {
    color: #2563eb;
    background: #eff6ff;
}

.gsnv-history-table .status.purple[b-24wo2rjmvv] {
    color: #7c3aed;
    background: #f5f3ff;
}

.gsnv-history-table .status.red[b-24wo2rjmvv] {
    color: #dc2626;
    background: #fff1f2;
}

.gsnv-history-table .status.green[b-24wo2rjmvv] {
    color: #16a34a;
    background: #eaf8ef;
}

.gsnv-history-table .status.gray[b-24wo2rjmvv] {
    color: #475569;
    background: #f1f5f9;
}

/* Trend chart polish */
.gsnv-chart-area svg text[b-24wo2rjmvv] {
    paint-order: stroke;
    stroke: rgba(255,255,255,.82);
    stroke-width: 3px;
    stroke-linejoin: round;
}
/* /Components/Pages/GiamSatChamCongNhanVien/Index.razor.rz.scp.css */
.attendance-monitor-page[b-ga3q7m1cdv] {
    padding: 10px 0 18px;
    background: #f6f8fc;
}

.attendance-monitor-container[b-ga3q7m1cdv] {
    width: auto;
    max-width: 100%;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e7edf6;
    border-radius: 22px;
    box-shadow: 0 10px 32px rgba(15,23,42,.04);
}

.attendance-monitor-layout[b-ga3q7m1cdv] {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
}

    /* =========================================================
   DETAIL OPEN STATE - FIX BUG DETAIL BỊ APPEND XUỐNG DƯỚI
   Detail panel đã fixed ở GiamSatNhanVienDetail.razor.css,
   vì vậy layout cha chỉ giữ main content ở normal flow.
========================================================= */

    .attendance-monitor-layout.has-detail[b-ga3q7m1cdv] {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0;
    }

.attendance-monitor-main[b-ga3q7m1cdv] {
    min-width: 0;
    transition: opacity .22s ease, filter .22s ease;
}

    .attendance-monitor-main.detail-opened[b-ga3q7m1cdv] {
        opacity: .42;
        filter: grayscale(.08) blur(.3px);
        pointer-events: none;
        user-select: none;
    }

/* =========================================================
   MAIN WHEN DETAIL OPEN
========================================================= */

.attendance-monitor-main[b-ga3q7m1cdv] {
    min-width: 0;
    transition: opacity .22s ease, filter .22s ease;
}

    .attendance-monitor-main.detail-opened[b-ga3q7m1cdv] {
        opacity: .42;
        filter: grayscale(.08);
        pointer-events: none;
        user-select: none;
    }

/* =========================================================
   HEADER
   Đồng bộ bảng lương nhân viên
========================================================= */

.attendance-monitor-header[b-ga3q7m1cdv] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.attendance-breadcrumb[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.attendance-title-row[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .attendance-title-row h2[b-ga3q7m1cdv] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.attendance-period-pill[b-ga3q7m1cdv] {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: #eff6ff;
    color: #346bd7;
    border: 1px solid #cfe0fb;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
}

.attendance-subtitle[b-ga3q7m1cdv] {
    margin-top: 6px;
    color: #7f8da5;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

.attendance-header-actions[b-ga3q7m1cdv] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.attendance-action-btn[b-ga3q7m1cdv] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .attendance-action-btn:hover[b-ga3q7m1cdv] {
        transform: translateY(-1px);
    }

    .attendance-action-btn.excel[b-ga3q7m1cdv] {
        color: #ffffff;
        background: linear-gradient(180deg,#4f8ee9 0%,#3d7dde 100%);
        border-color: #3d7dde;
        box-shadow: 0 6px 14px rgba(59,130,246,.12);
    }

        .attendance-action-btn.excel:hover[b-ga3q7m1cdv] {
            background: linear-gradient(180deg,#4386e6 0%,#2f72d6 100%);
            border-color: #2f72d6;
        }

/* ============================================================
   ATTENDANCE KPI
   EXECUTIVE / PAYROLL QUALITY
============================================================ */

.attendance-kpi-grid[b-ga3q7m1cdv] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.attendance-kpi-card[b-ga3q7m1cdv] {
    position: relative;
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #e8edf5;
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.015), 0 6px 18px rgba(15,23,42,.032);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .attendance-kpi-card[b-ga3q7m1cdv]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 44%);
        pointer-events: none;
    }

    .attendance-kpi-card:hover[b-ga3q7m1cdv] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(15,23,42,.045), 0 2px 6px rgba(15,23,42,.02);
    }

/* ============================================================
   TOP
============================================================ */

.attendance-kpi-top[b-ga3q7m1cdv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ============================================================
   ICON
============================================================ */

.attendance-kpi-icon[b-ga3q7m1cdv] {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    overflow: hidden;
    box-shadow: inset 0 -4px 10px rgba(0,0,0,.04), 0 5px 12px rgba(15,23,42,.08);
}

    .attendance-kpi-icon[b-ga3q7m1cdv]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,.16), transparent 58% );
        pointer-events: none;
    }

    /* ============================================================
   SVG FIX
============================================================ */

    .attendance-kpi-icon[b-ga3q7m1cdv]  svg {
        width: 19px !important;
        height: 19px !important;
        display: block;
        position: relative;
        z-index: 2;
    }

    .attendance-kpi-icon[b-ga3q7m1cdv]  path {
        fill: currentColor !important;
    }

    /* ============================================================
   SOFT COLORS
============================================================ */

    .attendance-kpi-icon.orange[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#f8b35b 0%,#f28b34 100%);
    }

    .attendance-kpi-icon.red[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#fb7185 0%,#ef5d74 100%);
    }

    .attendance-kpi-icon.purple[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#8b5cf6 0%,#7650df 100%);
    }

    .attendance-kpi-icon.blue[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#5d8df3 0%,#3d74ea 100%);
    }

    .attendance-kpi-icon.green[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#34c971 0%,#22b45d 100%);
    }

    .attendance-kpi-icon.cyan[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#46b7f5 0%,#2c96ea 100%);
    }

/* ============================================================
   META
============================================================ */

.attendance-kpi-meta[b-ga3q7m1cdv] {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   TITLE
============================================================ */

.attendance-kpi-title[b-ga3q7m1cdv] {
    display: block;
    margin-bottom: 4px;
    color: #6b7b91;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   VALUE
============================================================ */

.attendance-kpi-value[b-ga3q7m1cdv] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 17px;
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -.02em;
    white-space: nowrap;
}

    .attendance-kpi-value span[b-ga3q7m1cdv] {
        color: #8a99ad;
        font-size: 11px;
        font-weight: 650;
    }

/* ============================================================
   BOTTOM
============================================================ */

.attendance-kpi-bottom[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

/* ============================================================
   TREND
============================================================ */

.attendance-kpi-trend[b-ga3q7m1cdv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.15;
    white-space: nowrap;
}

    .attendance-kpi-trend.up[b-ga3q7m1cdv] {
        color: #16a34a;
    }

    .attendance-kpi-trend.down[b-ga3q7m1cdv] {
        color: #ef4444;
    }

    .attendance-kpi-trend.warning[b-ga3q7m1cdv] {
        color: #ea580c;
    }

/* ============================================================
   NOTE
============================================================ */

.attendance-kpi-note[b-ga3q7m1cdv] {
    color: #97a6ba;
    font-size: 10.5px;
    font-weight: 620;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   VALUE COLORS
============================================================ */

.attendance-kpi-card.orange .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #e97a16;
}

.attendance-kpi-card.red .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #ef4f66;
}

.attendance-kpi-card.purple .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #7448db;
}

.attendance-kpi-card.blue .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #2f6fe6;
}

.attendance-kpi-card.green .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #1ca454;
}

.attendance-kpi-card.cyan .attendance-kpi-value[b-ga3q7m1cdv] {
    color: #238fe0;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:1400px) {

    .attendance-kpi-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width:992px) {

    .attendance-kpi-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px) {

    .attendance-kpi-grid[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }

    .attendance-kpi-card[b-ga3q7m1cdv] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .attendance-kpi-icon[b-ga3q7m1cdv] {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

        .attendance-kpi-icon[b-ga3q7m1cdv]  svg {
            width: 18px !important;
            height: 18px !important;
        }

    .attendance-kpi-value[b-ga3q7m1cdv] {
        font-size: 16px;
    }
}

/* =========================================================
   AI INSIGHT
   EXECUTIVE HR STYLE
========================================================= */

.attendance-ai-card[b-ga3q7m1cdv],
.attendance-action-card[b-ga3q7m1cdv] {
    border-radius: 16px;
    border: 1px solid #e8eef7;
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.012), 0 4px 14px rgba(15,23,42,.022);
}

/* =========================================================
   AI SECTION
========================================================= */

.attendance-ai-section[b-ga3q7m1cdv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}

.attendance-ai-card[b-ga3q7m1cdv],
.attendance-action-card[b-ga3q7m1cdv] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   HEADER
========================================================= */

.attendance-ai-header[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.attendance-ai-title-wrap[b-ga3q7m1cdv] {
    min-width: 0;
}

.attendance-ai-title[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #172554;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-rendering: optimizeLegibility;
}

    .attendance-ai-title span:last-child[b-ga3q7m1cdv] {
        position: relative;
        top: -0.5px;
    }

.attendance-ai-subtitle[b-ga3q7m1cdv] {
    margin-top: 4px;
    color: #7f8ea4;
    font-size: 11.5px;
    font-weight: 560;
    line-height: 1.45;
}

.attendance-ai-dot[b-ga3q7m1cdv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    position: relative;
    top: 1px;
}

    .attendance-ai-dot.purple[b-ga3q7m1cdv] {
        background: #7c3aed;
        box-shadow: 0 0 0 4px rgba(124,58,237,.10);
    }

.attendance-ai-badge[b-ga3q7m1cdv] {
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(180deg,#effcf4 0%,#e7f9ee 100%);
    color: #16a34a;
    border: 1px solid #cbeed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 760;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px rgba(22,163,74,.06);
}

/* =========================================================
   LIST
========================================================= */

.attendance-ai-list[b-ga3q7m1cdv] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

/* =========================================================
   ITEM
========================================================= */

.attendance-ai-item[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    padding: 11px 13px;
    border-radius: 13px;
    border: 1px solid #edf2f7;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .attendance-ai-item:hover[b-ga3q7m1cdv] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(15,23,42,.035);
    }

.attendance-ai-item-left[b-ga3q7m1cdv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* =========================================================
   ICON
========================================================= */

.attendance-ai-item-icon[b-ga3q7m1cdv] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.04);
}

/* =========================================================
   CONTENT
========================================================= */

.attendance-ai-item-content[b-ga3q7m1cdv] {
    min-width: 0;
}

.attendance-ai-item-title[b-ga3q7m1cdv] {
    font-size: 12.8px;
    font-weight: 760;
    line-height: 1.28;
    letter-spacing: -.01em;
    transition: color .15s ease;
}

/* =========================================================
   LEFT AI INSIGHT TITLE COLORS
========================================================= */

.attendance-ai-card .attendance-ai-item.orange .attendance-ai-item-title[b-ga3q7m1cdv] {
    color: #ea7a12;
}

.attendance-ai-card .attendance-ai-item.red .attendance-ai-item-title[b-ga3q7m1cdv] {
    color: #ef4444;
}

.attendance-ai-card .attendance-ai-item.purple .attendance-ai-item-title[b-ga3q7m1cdv] {
    color: #7c3aed;
}

.attendance-ai-card .attendance-ai-item.green .attendance-ai-item-title[b-ga3q7m1cdv] {
    color: #16a34a;
}

.attendance-ai-item-sub[b-ga3q7m1cdv] {
    margin-top: 3px;
    color: #7b8ba2;
    font-size: 11px;
    font-weight: 560;
    line-height: 1.4;
}

/* =========================================================
   META
========================================================= */

.attendance-ai-item-meta[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.attendance-ai-item-time[b-ga3q7m1cdv] {
    color: #7f8da3;
    font-size: 10.5px;
    font-weight: 650;
    white-space: nowrap;
    letter-spacing: .01em;
}

.attendance-ai-action-btn[b-ga3q7m1cdv] {
    min-width: 92px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dbe5f1;
    border-radius: 9px;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    color: #ff911c;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15,23,42,.02);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .attendance-ai-action-btn:hover[b-ga3q7m1cdv] {
        background: #f8fbff;
        border-color: #bfd2ea;
        color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(59,92,204,.08);
    }

/* =========================================================
   COLORS
========================================================= */

.attendance-ai-item.orange[b-ga3q7m1cdv] {
    background: #fffaf4;
    border-color: #fde6c7;
}

    .attendance-ai-item.orange .attendance-ai-item-icon[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#f8b35b 0%,#f28b34 100%);
    }

.attendance-ai-item.red[b-ga3q7m1cdv] {
    background: #fff7f7;
    border-color: #ffd8dd;
}

    .attendance-ai-item.red .attendance-ai-item-icon[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#fb7185 0%,#ef5d74 100%);
    }

.attendance-ai-item.purple[b-ga3q7m1cdv] {
    background: #faf8ff;
    border-color: #e8ddff;
}

    .attendance-ai-item.purple .attendance-ai-item-icon[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#8b5cf6 0%,#7650df 100%);
    }

.attendance-ai-item.green[b-ga3q7m1cdv] {
    background: #f6fdf8;
    border-color: #d7f3e0;
}

    .attendance-ai-item.green .attendance-ai-item-icon[b-ga3q7m1cdv] {
        background: linear-gradient(135deg,#34c971 0%,#22b45d 100%);
    }

.attendance-ai-item.neutral[b-ga3q7m1cdv] {
    background: #ffffff;
}

/* =========================================================
   ACTION ICON
========================================================= */

.attendance-ai-item-icon.green[b-ga3q7m1cdv] {
    background: linear-gradient(135deg,#34c971 0%,#22b45d 100%);
}

.attendance-ai-item-icon.purple[b-ga3q7m1cdv] {
    background: linear-gradient(135deg,#8b5cf6 0%,#7650df 100%);
}

.attendance-ai-item-icon.orange[b-ga3q7m1cdv] {
    background: linear-gradient(135deg,#f8b35b 0%,#f28b34 100%);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1200px) {

    .attendance-ai-section[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {

    .attendance-ai-item[b-ga3q7m1cdv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .attendance-ai-item-meta[b-ga3q7m1cdv] {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
   FILTER
========================================================= */

.attendance-filter-card[b-ga3q7m1cdv] {
    position: relative;
    z-index: 500;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1px solid #e8eef7;
    background: #f8fafc;
}

.attendance-filter-grid[b-ga3q7m1cdv] {
    display: grid;
    grid-template-columns: minmax(90px,110px) minmax(80px,90px) minmax(150px,1fr) minmax(140px,1fr) minmax(140px,1fr) minmax(220px,1.2fr) auto;
    gap: 12px;
    align-items: start;
    min-width: 0;
}

    .attendance-filter-grid > *[b-ga3q7m1cdv] {
        min-width: 0;
    }

.attendance-filter-card .form-group[b-ga3q7m1cdv] {
    min-width: 0;
}

.form-group label[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    height: 18px;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.form-group select[b-ga3q7m1cdv],
.form-group input[b-ga3q7m1cdv] {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    transition: .2s ease;
}

    .form-group select:hover[b-ga3q7m1cdv],
    .form-group input:hover[b-ga3q7m1cdv] {
        border-color: #bfd2ea;
    }

    .form-group select:focus[b-ga3q7m1cdv],
    .form-group input:focus[b-ga3q7m1cdv] {
        outline: none;
        border-color: #6aa8ff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.08);
    }

.attendance-input-search[b-ga3q7m1cdv] {
    position: relative;
}

    .attendance-input-search input[b-ga3q7m1cdv] {
        padding-right: 38px;
    }

    .attendance-input-search i[b-ga3q7m1cdv] {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 16px;
    }

.attendance-filter-actions[b-ga3q7m1cdv] {
    display: flex;
    align-items: flex-end;
    padding-top: 24px;
    gap: 8px;
}

/* =========================================================
   BUTTON
========================================================= */

.attendance-btn[b-ga3q7m1cdv] {
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .attendance-btn:hover:not(:disabled)[b-ga3q7m1cdv] {
        transform: translateY(-1px);
    }

    .attendance-btn:disabled[b-ga3q7m1cdv] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

/* =========================================================
   LÀM MỚI
========================================================= */

.attendance-action-btn.refresh[b-ga3q7m1cdv] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #ffffff;
}

    .attendance-action-btn.refresh:hover:not(:disabled)[b-ga3q7m1cdv] {
        background: #eff6ff;
        border-color: #93c5fd;
        box-shadow: 0 6px 14px rgba(37,99,235,.10);
    }

/* =========================================================
   XUẤT EXCEL
========================================================= */

.attendance-action-btn.excel[b-ga3q7m1cdv] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
    box-shadow: none;
}

    .attendance-action-btn.excel:hover:not(:disabled)[b-ga3q7m1cdv] {
        background: #d1fae5;
        border-color: #4ade80;
        box-shadow: 0 6px 14px rgba(5,150,105,.12);
    }

/* =========================================================
   BUTTON LỌC
========================================================= */

.attendance-btn.search-yellow[b-ga3q7m1cdv] {
    min-width: 82px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid #e3a008;
    background: #f5ad0d;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: none;
}

    .attendance-btn.search-yellow:hover:not(:disabled)[b-ga3q7m1cdv] {
        background: #e9a006;
        border-color: #d89205;
        color: #ffffff;
        transform: translateY(-1px);
    }

    .attendance-btn.search-yellow:disabled[b-ga3q7m1cdv] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

/* =========================================================
   CHỨC VỤ DROPDOWN
========================================================= */

.attendance-select-dropdown__control[b-ga3q7m1cdv] {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.attendance-select-dropdown__panel[b-ga3q7m1cdv] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    min-width: 240px;
    width: max-content;
    max-width: 320px;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(15,23,42,.15);
    overflow: hidden;
}

.attendance-select-dropdown__search[b-ga3q7m1cdv] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
}

    .attendance-select-dropdown__search input[b-ga3q7m1cdv] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 34px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        font-size: 12.5px;
    }

.attendance-select-dropdown__search-icon[b-ga3q7m1cdv] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

/* =========================================================
   TREE PHÒNG BAN
========================================================= */

.attendance-dept-filter[b-ga3q7m1cdv] {
    position: relative;
    z-index: 700;
}

.attendance-tree-select[b-ga3q7m1cdv] {
    position: relative;
    width: 100%;
}

    .attendance-tree-select.is-open[b-ga3q7m1cdv] {
        z-index: 1300;
    }

.attendance-tree-select__control[b-ga3q7m1cdv] {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.attendance-tree-select__value[b-ga3q7m1cdv] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.attendance-tree-select__chevron[b-ga3q7m1cdv] {
    width: 18px;
    height: 18px;
    position: relative;
}

    .attendance-tree-select__chevron[b-ga3q7m1cdv]::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 5px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
    }

.attendance-tree-select__panel[b-ga3q7m1cdv] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 360px;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(15,23,42,.15);
    overflow: hidden;
    z-index: 1400;
}

.attendance-tree-select__search[b-ga3q7m1cdv] {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #edf2f8;
}

    .attendance-tree-select__search input[b-ga3q7m1cdv] {
        width: 100%;
        height: 38px;
        padding: 0 11px 0 36px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
    }

.attendance-tree-search-icon[b-ga3q7m1cdv] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.attendance-tree-select__list[b-ga3q7m1cdv] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
}

.attendance-tree-select__row[b-ga3q7m1cdv] {
    min-height: 38px;
    margin: 2px 0;
    padding-right: 9px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

    .attendance-tree-select__row:hover[b-ga3q7m1cdv] {
        background: #f8fbff;
    }

    .attendance-tree-select__row.is-selected[b-ga3q7m1cdv] {
        background: #eaf3ff;
        color: #1d4ed8;
    }

.attendance-tree-select__toggle[b-ga3q7m1cdv] {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
}

.attendance-tree-select__toggle--empty[b-ga3q7m1cdv] {
    opacity: .35;
}

.attendance-tree-select__node-icon[b-ga3q7m1cdv] {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

    .attendance-tree-select__node-icon.root[b-ga3q7m1cdv] {
        color: #2563eb;
        background: #eff6ff;
    }

    .attendance-tree-select__node-icon.parent[b-ga3q7m1cdv] {
        color: #0284c7;
        background: #e0f2fe;
    }

    .attendance-tree-select__node-icon.leaf[b-ga3q7m1cdv] {
        color: #16a34a;
        background: #ecfdf5;
    }

.attendance-tree-select__label[b-ga3q7m1cdv] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   TABLE
========================================================= */

.attendance-table-card[b-ga3q7m1cdv] {
    border-radius: 22px;
    border: 1px solid #e8eef7;
    overflow: hidden;
    background: #ffffff;
}

.attendance-table-top[b-ga3q7m1cdv] {
    min-height: 60px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.attendance-table-count[b-ga3q7m1cdv] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.attendance-table-scroll[b-ga3q7m1cdv] {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
}

.attendance-table[b-ga3q7m1cdv] {
    width: 100%;
    min-width: 1450px;
    border-collapse: separate;
    border-spacing: 0;
}

    .attendance-table thead th[b-ga3q7m1cdv] {
        height: 50px;
        padding: 8px 10px;
        background: #f8fafd;
        color: #42526b;
        font-size: 12.5px;
        font-weight: 750;
        text-align: center;
        border-right: 1px solid #eaedf4;
    }

    .attendance-table tbody td[b-ga3q7m1cdv] {
        height: 64px;
        padding: 12px 10px;
        background: #ffffff;
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

    .attendance-table tbody tr:hover td[b-ga3q7m1cdv] {
        background: #f9fbff;
    }

.attendance-employee[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendance-avatar[b-ga3q7m1cdv] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg,#60a5fa 0%,#2563eb 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .attendance-avatar img[b-ga3q7m1cdv] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.employee-name[b-ga3q7m1cdv] {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
}

.employee-sub[b-ga3q7m1cdv] {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
}

.attendance-status[b-ga3q7m1cdv] {
    min-width: 84px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

    .attendance-status.green[b-ga3q7m1cdv] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .attendance-status.orange[b-ga3q7m1cdv] {
        color: #ea580c;
        background: #fff7ed;
    }

    .attendance-status.red[b-ga3q7m1cdv] {
        color: #dc2626;
        background: #fef2f2;
    }

    .attendance-status.gray[b-ga3q7m1cdv] {
        color: #64748b;
        background: #f1f5f9;
    }

.attendance-icon-btn[b-ga3q7m1cdv] {
    width: 34px;
    height: 34px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    transition: .2s ease;
}

    .attendance-icon-btn:hover[b-ga3q7m1cdv] {
        background: #eff6ff;
        color: #2563eb;
        border-color: #bfdbfe;
    }

.time-green[b-ga3q7m1cdv] {
    color: #16a34a;
    font-weight: 700;
}

.time-red[b-ga3q7m1cdv] {
    color: #dc2626;
    font-weight: 700;
}

.late-text[b-ga3q7m1cdv],
.early-text[b-ga3q7m1cdv] {
    font-weight: 700;
    color: #ea580c;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1400px) {

    .attendance-kpi-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .attendance-monitor-layout.has-detail[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }

    .attendance-detail-drawer[b-ga3q7m1cdv] {
        width: 100%;
    }
}

@media (max-width:1200px) {

    .attendance-filter-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:768px) {

    .attendance-monitor-header[b-ga3q7m1cdv] {
        flex-direction: column;
    }

    .attendance-kpi-grid[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }

    .attendance-filter-grid[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }

    .attendance-kpi-card[b-ga3q7m1cdv] {
        min-height: 82px;
    }

    .kpi-value[b-ga3q7m1cdv] {
        font-size: 18px;
    }

    .attendance-detail-stat-grid[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CLEAR BUTTON
========================================================= */

.attendance-tree-select__clear[b-ga3q7m1cdv],
.attendance-select-dropdown__clear[b-ga3q7m1cdv] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .attendance-tree-select__clear:hover[b-ga3q7m1cdv],
    .attendance-select-dropdown__clear:hover[b-ga3q7m1cdv] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

/* =========================================================
   CHUC VU DROPDOWN
========================================================= */

.attendance-project-filter[b-ga3q7m1cdv] {
    position: relative;
    z-index: 750;
}

.attendance-select-dropdown[b-ga3q7m1cdv] {
    position: relative;
    width: 100%;
}

    .attendance-select-dropdown.is-open[b-ga3q7m1cdv] {
        z-index: 1400;
    }

.attendance-select-dropdown__control[b-ga3q7m1cdv] {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.attendance-select-dropdown__value[b-ga3q7m1cdv] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.attendance-select-dropdown__chevron[b-ga3q7m1cdv] {
    width: 18px;
    height: 18px;
    position: relative;
}

    .attendance-select-dropdown__chevron[b-ga3q7m1cdv]::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 5px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
    }

.attendance-select-dropdown__panel[b-ga3q7m1cdv] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 100%;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(15,23,42,.15);
    overflow: hidden;
}

.attendance-select-dropdown__search[b-ga3q7m1cdv] {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #edf2f8;
}

    .attendance-select-dropdown__search input[b-ga3q7m1cdv] {
        width: 100%;
        height: 38px;
        padding: 0 11px 0 36px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
    }

.attendance-select-dropdown__search-icon[b-ga3q7m1cdv] {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.attendance-select-dropdown__list[b-ga3q7m1cdv] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
}

.attendance-select-dropdown__option[b-ga3q7m1cdv] {
    min-height: 40px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .15s ease;
}

    .attendance-select-dropdown__option:hover[b-ga3q7m1cdv] {
        background: #f8fbff;
    }

    .attendance-select-dropdown__option.is-selected[b-ga3q7m1cdv] {
        background: #eaf3ff;
        color: #1d4ed8;
    }

.attendance-select-dropdown__option-icon[b-ga3q7m1cdv] {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
}

    .attendance-select-dropdown__option-icon.all[b-ga3q7m1cdv] {
        color: #2563eb;
        background: #eff6ff;
    }

    .attendance-select-dropdown__option-icon.project[b-ga3q7m1cdv] {
        color: #7c3aed;
        background: #f5f3ff;
    }

.attendance-select-dropdown__option-content[b-ga3q7m1cdv] {
    flex: 1;
    min-width: 0;
}

.attendance-select-dropdown__option-text[b-ga3q7m1cdv] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   EMPLOYEE CELL - PAYROLL STYLE
========================================================= */

.attendance-stt-cell[b-ga3q7m1cdv] {
    text-align: center;
    color: #52627a;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.attendance-employee-cell[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.attendance-employee-avatar[b-ga3q7m1cdv] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b8def 0%, #2563eb 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    box-shadow: inset 0 -8px 14px rgba(0,0,0,.08);
}

.attendance-employee-info[b-ga3q7m1cdv] {
    min-width: 0;
}

.attendance-employee-name[b-ga3q7m1cdv] {
    color: #1e3355;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.28;
    white-space: normal;
    word-break: break-word;
}

.attendance-employee-code[b-ga3q7m1cdv] {
    margin-top: 3px;
    color: #3f6fd8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/* table row đồng bộ payroll */

.attendance-table tbody td[b-ga3q7m1cdv] {
    height: 58px;
    vertical-align: middle;
}
/* =========================================================
   TABLE HEADER MULTI
========================================================= */

.attendance-th-multi[b-ga3q7m1cdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
}

    .attendance-th-multi span[b-ga3q7m1cdv] {
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
    }

    .attendance-th-multi small[b-ga3q7m1cdv] {
        color: #8a97ab;
        font-size: 11px;
        font-weight: 600;
    }

/* =========================================================
   CA CELL
========================================================= */

.attendance-ca-cell[b-ga3q7m1cdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}

    .attendance-ca-cell .main[b-ga3q7m1cdv] {
        color: #1e3355;
        font-size: 13px;
        font-weight: 700;
    }

    .attendance-ca-cell .sub[b-ga3q7m1cdv] {
        color: #7f8da5;
        font-size: 11px;
        font-weight: 600;
    }

/* =========================================================
   TIME CELL
========================================================= */

.attendance-time-cell[b-ga3q7m1cdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}

    .attendance-time-cell .main[b-ga3q7m1cdv] {
        font-size: 13px;
        font-weight: 700;
    }

    .attendance-time-cell .sub[b-ga3q7m1cdv] {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 600;
    }

/* =========================================================
   MINI FILTER
========================================================= */

.attendance-mini-filter[b-ga3q7m1cdv] {
    min-width: 0;
}

    .attendance-mini-filter .attendance-select-dropdown[b-ga3q7m1cdv] {
        width: 100%;
    }

    .attendance-mini-filter .attendance-select-dropdown__control[b-ga3q7m1cdv] {
        height: 36px;
        padding: 0 10px 0 11px;
        border-radius: 10px;
        font-size: 12.5px;
        font-weight: 600;
    }

.attendance-mini-dropdown[b-ga3q7m1cdv] {
    width: 100%;
    min-width: 132px;
}

    .attendance-mini-dropdown .attendance-select-dropdown__list[b-ga3q7m1cdv] {
        max-height: 260px;
    }

@media (max-width: 1400px) {

    .attendance-filter-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 992px) {

    .attendance-filter-grid[b-ga3q7m1cdv] {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px) {

    .attendance-filter-grid[b-ga3q7m1cdv] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   TABLE NO OT
========================================================= */

.attendance-table-no-ot[b-ga3q7m1cdv] {
    min-width: 1320px;
}

/* =========================================================
   TABLE COUNT
========================================================= */

.attendance-table-count[b-ga3q7m1cdv] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.count-highlight[b-ga3q7m1cdv] {
    color: #0f172a;
    font-weight: 800;
}


/* =========================================================
   FINAL DETAIL WORKSPACE OVERRIDE
   Detail fixed panel không còn nằm trong layout flow.
   Main content chỉ dim phía sau, không blur nặng để tránh cảm giác mờ sai.
========================================================= */

.attendance-monitor-layout.has-detail[b-ga3q7m1cdv] {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 !important;
}

.attendance-monitor-main.detail-opened[b-ga3q7m1cdv] {
    opacity: .38 !important;
    filter: grayscale(.04) !important;
    pointer-events: none !important;
    user-select: none !important;
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
.login-page[b-vavpc8ubfk] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 42px 56px 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #07162d;
}

    .login-page[b-vavpc8ubfk]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/assets/images/bg-login-2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: saturate(1.02) contrast(1.02) brightness(1.01);
        z-index: 0;
    }

    .login-page[b-vavpc8ubfk]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 28%, rgba(7,22,45,0.04) 48%, rgba(2,10,28,0.15) 100%), radial-gradient(circle at 50% 48%, rgba(255,255,255,0.05) 0%, rgba(7,22,45,0.04) 42%, rgba(2,10,28,0.24) 100%);
        z-index: 0;
        pointer-events: none;
    }

.brand-panel[b-vavpc8ubfk] {
    position: absolute;
    top: 42px;
    left: 58px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo[b-vavpc8ubfk] {
    width: 66px;
    height: 66px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-panel h1[b-vavpc8ubfk] {
    margin: 0 0 7px;
    color: #102a5c;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.brand-panel p[b-vavpc8ubfk] {
    margin: 0;
    color: #334155;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.login-card[b-vavpc8ubfk] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 374px;
    margin-top: 22px;
    padding: 31px 33px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.982);
    border: 1px solid rgba(226, 232, 240, 0.94);
    box-shadow: 0 22px 52px rgba(2, 8, 23, 0.28), 0 8px 18px rgba(15, 23, 42, 0.09);
    overflow: hidden;
}

    .login-card[b-vavpc8ubfk]::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, #f59e0b 0%, #f97316 48%, #4f46e5 100%);
    }

.login-header[b-vavpc8ubfk] {
    text-align: center;
    margin-bottom: 22px;
}

.login-title[b-vavpc8ubfk] {
    margin: 0;
    color: #0f1f44;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

    .login-title[b-vavpc8ubfk]::after {
        content: "";
        display: block;
        width: 34px;
        height: 2px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, #b8c8e4, transparent);
    }

.login-subtitle[b-vavpc8ubfk] {
    margin: 9px 0 0;
    color: #52637c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.login-error[b-vavpc8ubfk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 13px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12.75px;
    font-weight: 500;
    line-height: 1.4;
}

    .login-error .mdi[b-vavpc8ubfk] {
        font-size: 16px;
        line-height: 1.2;
        flex-shrink: 0;
    }

.field-label[b-vavpc8ubfk] {
    margin: 0 0 7px;
    color: #14213d;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.25;
}

.input-wrapper[b-vavpc8ubfk] {
    margin-bottom: 14px;
}

.input-group-inner[b-vavpc8ubfk] {
    position: relative;
}

.input-icon[b-vavpc8ubfk] {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 16px;
    pointer-events: none;
}

[b-vavpc8ubfk] .field-input {
    display: block;
    width: 100%;
    height: 43px;
    padding: 9px 42px 9px 41px;
    border: 1px solid #cfd9ea;
    border-radius: 10px;
    outline: none;
    background: #edf4ff;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 550;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    [b-vavpc8ubfk] .field-input::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

    [b-vavpc8ubfk] .field-input:focus {
        border-color: #f59e0b;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
    }

    [b-vavpc8ubfk] .field-input:disabled {
        cursor: not-allowed;
        opacity: 0.72;
    }

.toggle-password[b-vavpc8ubfk] {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 23px;
    height: 23px;
    padding: 0;
    border: none;
    background: transparent;
    color: #8797af;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .toggle-password:hover:not(:disabled)[b-vavpc8ubfk] {
        color: #475569;
    }

[b-vavpc8ubfk] .field-error {
    display: block;
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 400;
}

.remember-row[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 1px 0 18px;
}

.remember-label[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.remember-checkbox[b-vavpc8ubfk] {
    width: 14px;
    height: 14px;
    accent-color: #f59e0b;
    cursor: pointer;
}

.forgot-link[b-vavpc8ubfk] {
    color: #f05a24;
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

    .forgot-link:hover[b-vavpc8ubfk] {
        text-decoration: underline;
    }

.login-btn[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 19px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #f59e0b 0%, #ff5b22 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.16s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .login-btn:hover:not(:disabled)[b-vavpc8ubfk] {
        transform: translateY(-1px);
        box-shadow: 0 13px 25px rgba(249, 115, 22, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .login-btn:active:not(:disabled)[b-vavpc8ubfk] {
        transform: translateY(0);
    }

    .login-btn:disabled[b-vavpc8ubfk] {
        cursor: not-allowed;
        opacity: 0.72;
    }

    .login-btn .mdi[b-vavpc8ubfk] {
        font-size: 18px;
    }

.module-grid[b-vavpc8ubfk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    padding-top: 17px;
    border-top: 1px solid #eaf0f7;
}

.module-item[b-vavpc8ubfk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.module-icon[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 7px 14px rgba(15, 23, 42, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.module-item:hover .module-icon[b-vavpc8ubfk] {
    transform: translateY(-2px);
    box-shadow: 0 10px 19px rgba(15, 23, 42, 0.16);
}

.module-blue[b-vavpc8ubfk] {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}

.module-indigo[b-vavpc8ubfk] {
    background: linear-gradient(135deg, #8176ff 0%, #5145e5 100%);
}

.module-green[b-vavpc8ubfk] {
    background: linear-gradient(135deg, #2ed28b 0%, #059669 100%);
}

.module-orange[b-vavpc8ubfk] {
    background: linear-gradient(135deg, #ff9a3c 0%, #f05a24 100%);
}

.module-item span[b-vavpc8ubfk] {
    display: block;
    width: 100%;
    color: #25324b;
    font-size: 11.25px;
    font-weight: 550;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secure-note[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: #475569;
    font-size: 12.25px;
    font-weight: 500;
}

    .secure-note .mdi[b-vavpc8ubfk] {
        color: #4d6b9a;
        font-size: 17px;
    }

.feature-bar[b-vavpc8ubfk] {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 2;
    width: min(1120px, calc(100% - 90px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 42px;
}

.feature-item[b-vavpc8ubfk] {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
}

    .feature-item > i[b-vavpc8ubfk] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 32px;
        text-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    }

    .feature-item strong[b-vavpc8ubfk] {
        display: block;
        margin-bottom: 5px;
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 750;
        line-height: 1.25;
    }

    .feature-item span[b-vavpc8ubfk] {
        display: block;
        color: rgba(219, 234, 254, 0.78);
        font-size: 12.75px;
        font-weight: 400;
        line-height: 1.35;
    }

@media (max-width: 1200px) {
    .brand-panel[b-vavpc8ubfk] {
        left: 34px;
    }

    .feature-bar[b-vavpc8ubfk] {
        gap: 24px;
        width: calc(100% - 64px);
    }
}

@media (max-width: 992px) {
    .login-page[b-vavpc8ubfk] {
        padding: 110px 20px 34px;
    }

    .brand-panel[b-vavpc8ubfk] {
        top: 28px;
        left: 28px;
    }

        .brand-panel h1[b-vavpc8ubfk] {
            font-size: 18px;
        }

        .brand-panel p[b-vavpc8ubfk] {
            font-size: 13.5px;
        }

    .feature-bar[b-vavpc8ubfk] {
        display: none;
    }
}

@media (max-width: 560px) {
    .login-page[b-vavpc8ubfk] {
        padding: 110px 14px 24px;
    }

    .brand-panel[b-vavpc8ubfk] {
        left: 18px;
        right: 18px;
        gap: 11px;
    }

    .brand-logo[b-vavpc8ubfk] {
        width: 54px;
        height: 54px;
    }

    .brand-panel h1[b-vavpc8ubfk] {
        font-size: 14px;
    }

    .brand-panel p[b-vavpc8ubfk] {
        font-size: 12px;
    }

    .login-card[b-vavpc8ubfk] {
        max-width: 100%;
        margin-top: 14px;
        padding: 32px 22px 20px;
        border-radius: 18px;
    }

    .login-title[b-vavpc8ubfk] {
        font-size: 21px;
    }

    .module-grid[b-vavpc8ubfk] {
        gap: 8px;
    }

    .module-icon[b-vavpc8ubfk] {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 18px;
    }

    .module-item span[b-vavpc8ubfk] {
        font-size: 10.5px;
    }
}
/* /Components/Pages/NhanVien/Edit.razor.rz.scp.css */
/* ================================================
   NhanVien Edit - Page-specific overrides only.

   All reusable nv- component styles have been moved to:
     wwwroot/css/nv-components.css

   Add rules here ONLY for layout or visual tweaks
   that are unique to this page and not suitable for
   the shared component library.
   ================================================ */
/* /Components/Pages/PhepNamNhanVien/PhepNamNhanVien.razor.rz.scp.css */
.leave-page[b-m8rzyo0am0] {
    padding: 10px 0 18px;
    background: #f6f8fc;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
}

.leave-container[b-m8rzyo0am0] {
    max-width: 100%;
    padding: 20px 22px 18px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
}

/* HEADER */
.leave-title-row[b-m8rzyo0am0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.leave-breadcrumb[b-m8rzyo0am0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
}

.leave-title-wrap[b-m8rzyo0am0] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .leave-title-wrap h2[b-m8rzyo0am0] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        font-weight: 750;
        line-height: 1.25;
    }

.period-pill[b-m8rzyo0am0],
.status-pill[b-m8rzyo0am0] {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.period-pill[b-m8rzyo0am0] {
    color: #346bd7;
    background: #eff6ff;
    border: 1px solid #cfe0fb;
}

.status-pill.green[b-m8rzyo0am0] {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

.leave-actions[b-m8rzyo0am0] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.leave-action-btn[b-m8rzyo0am0],
.leave-btn[b-m8rzyo0am0] {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .leave-action-btn:hover:not(:disabled)[b-m8rzyo0am0],
    .leave-btn:hover:not(:disabled)[b-m8rzyo0am0] {
        transform: translateY(-1px);
    }

    .leave-action-btn:disabled[b-m8rzyo0am0],
    .leave-btn:disabled[b-m8rzyo0am0] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

.leave-action-sync[b-m8rzyo0am0] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #fff;
}

    .leave-action-sync:hover:not(:disabled)[b-m8rzyo0am0] {
        background: #eff6ff;
        border-color: #93c5fd;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .10);
    }

.leave-action-excel[b-m8rzyo0am0] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}

    .leave-action-excel:hover:not(:disabled)[b-m8rzyo0am0] {
        background: #d1fae5;
        border-color: #4ade80;
        box-shadow: 0 6px 14px rgba(5, 150, 105, .12);
    }

.filter-actions[b-m8rzyo0am0] {
    display: flex;
    align-items: end;
}

.leave-btn.search-yellow[b-m8rzyo0am0] {
    min-width: 86px;
    height: 38px;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1px solid #e3a008;
    background: #f5ad0d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

    .leave-btn.search-yellow:hover:not(:disabled)[b-m8rzyo0am0] {
        background: #e9a006;
        border-color: #d89205;
        color: #ffffff;
        transform: translateY(-1px);
    }

    .leave-btn.search-yellow:disabled[b-m8rzyo0am0] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

/* ALERT */
.leave-alert[b-m8rzyo0am0] {
    min-height: 42px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

    .leave-alert.danger[b-m8rzyo0am0] {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .leave-alert.success[b-m8rzyo0am0] {
        color: #047857;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
    }

/* FILTER */
.leave-filter-card[b-m8rzyo0am0] {
    position: relative;
    z-index: 600;
    margin-bottom: 14px;
    padding: 10px;
    background: #f7f9fc;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.leave-filter-grid[b-m8rzyo0am0] {
    display: grid;
    grid-template-columns: 100px 170px 170px 200px minmax(320px, 1fr) auto;
    gap: 8px;
    align-items: end;
    overflow: visible;
}

.form-group[b-m8rzyo0am0] {
    min-width: 0;
}

    .form-group label[b-m8rzyo0am0] {
        display: block;
        margin-bottom: 6px;
        color: #66758d;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.25;
    }

    .form-group input[b-m8rzyo0am0],
    .form-group select[b-m8rzyo0am0] {
        width: 100%;
        height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
    }

        .form-group input[b-m8rzyo0am0]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

.input-icon[b-m8rzyo0am0] {
    position: relative;
}

    .input-icon input[b-m8rzyo0am0] {
        padding-right: 36px;
    }

    .input-icon i[b-m8rzyo0am0] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa9bd;
    }

/* KPI */
.leave-overview-card[b-m8rzyo0am0] {
    margin-bottom: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.leave-kpi-grid[b-m8rzyo0am0] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.leave-kpi-card[b-m8rzyo0am0] {
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #e8edf5;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .leave-kpi-card:hover[b-m8rzyo0am0] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.kpi-icon[b-m8rzyo0am0] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .13);
}

    .kpi-icon[b-m8rzyo0am0]  svg {
        width: 25px;
        height: 25px;
        display: block;
        fill: currentColor !important;
    }

    .kpi-icon[b-m8rzyo0am0]  path {
        fill: currentColor !important;
    }

.kpi-symbol[b-m8rzyo0am0] {
    display: none;
}

.kpi-icon.blue[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #12b7ff 0%, #0677f8 100%);
}

.kpi-icon.blue2[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #1967ff 0%, #0759e8 100%);
}

.kpi-icon.green[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #13b84f 0%, #06973d 100%);
}

.kpi-icon.orange[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #ff9b14 0%, #ff7a00 100%);
}

.kpi-icon.red[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #ff4d5e 0%, #ff233f 100%);
}

.kpi-icon.purple[b-m8rzyo0am0] {
    background: linear-gradient(135deg, #7d3ff2 0%, #5b25c9 100%);
}

.kpi-body[b-m8rzyo0am0] {
    min-width: 0;
}

.kpi-label[b-m8rzyo0am0] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.kpi-value[b-m8rzyo0am0] {
    display: block;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.kpi-note[b-m8rzyo0am0] {
    display: block;
    margin-top: 4px;
    color: #8a98ad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.kpi-trend[b-m8rzyo0am0],
.kpi-link[b-m8rzyo0am0] {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

    .kpi-trend.up[b-m8rzyo0am0] {
        color: #16a34a;
    }

.kpi-link[b-m8rzyo0am0] {
    color: #2563eb;
}

.leave-kpi-card:has(.kpi-icon.green) .kpi-value[b-m8rzyo0am0] {
    color: #16a34a;
}

.leave-kpi-card:has(.kpi-icon.orange) .kpi-value[b-m8rzyo0am0] {
    color: #f97316;
}

.leave-kpi-card:has(.kpi-icon.red) .kpi-value[b-m8rzyo0am0] {
    color: #ef4444;
}

.leave-kpi-card:has(.kpi-icon.purple) .kpi-value[b-m8rzyo0am0] {
    color: #6d28d9;
}

/* INSIGHT */
.leave-insight-card[b-m8rzyo0am0] {
    margin-bottom: 14px;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.leave-insight-title[b-m8rzyo0am0] {
    min-height: 34px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eef2f7;
}

    .leave-insight-title span[b-m8rzyo0am0] {
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 750;
        line-height: 1.2;
        letter-spacing: .01em;
        text-transform: uppercase;
    }

.leave-insight-body[b-m8rzyo0am0] {
    display: grid;
    grid-template-columns: minmax(0, 1.68fr) minmax(380px, .92fr);
    gap: 0;
}

.leave-insight-left[b-m8rzyo0am0] {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.insight-card[b-m8rzyo0am0] {
    min-height: 76px;
    padding: 10px 11px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .insight-card:hover[b-m8rzyo0am0] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 8px 18px rgba(17, 24, 39, .04);
    }

    .insight-card.orange[b-m8rzyo0am0] {
        background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
    }

    .insight-card.red[b-m8rzyo0am0] {
        background: linear-gradient(180deg, #fff 0%, #fff7f8 100%);
    }

    .insight-card.blue[b-m8rzyo0am0] {
        background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
    }

.insight-icon[b-m8rzyo0am0] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .insight-icon[b-m8rzyo0am0]  svg {
        width: 21px;
        height: 21px;
        display: block;
        fill: currentColor !important;
    }

    .insight-icon[b-m8rzyo0am0]  path {
        fill: currentColor !important;
    }

    .insight-icon span[b-m8rzyo0am0] {
        display: none;
    }

.insight-card.orange .insight-icon[b-m8rzyo0am0] {
    color: #f97316;
    background: #fff3e6;
}

.insight-card.red .insight-icon[b-m8rzyo0am0] {
    color: #ef4444;
    background: #fff0f2;
}

.insight-card.blue .insight-icon[b-m8rzyo0am0] {
    color: #2563eb;
    background: #edf5ff;
}

.insight-card b[b-m8rzyo0am0] {
    display: block;
    color: #1e3355;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

.insight-card span[b-m8rzyo0am0] {
    display: block;
    margin-top: 3px;
    color: #7f8da5;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
}

.insight-card a[b-m8rzyo0am0] {
    display: inline-flex;
    margin-top: 5px;
    color: #2563eb;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

.usage-content[b-m8rzyo0am0] {
    width: 100%;
    min-width: 0;
}

.usage-row[b-m8rzyo0am0] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

    .usage-row strong[b-m8rzyo0am0] {
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 750;
        white-space: nowrap;
    }

.usage-bar[b-m8rzyo0am0] {
    width: 100%;
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: #e5eaf2;
    overflow: hidden;
}

    .usage-bar span[b-m8rzyo0am0] {
        display: block;
        height: 100%;
        margin: 0;
        background: linear-gradient(90deg, #60a5fa, #2563eb);
    }

.leave-trend-panel[b-m8rzyo0am0] {
    padding: 10px 14px 9px;
    border-left: 1px solid #e8edf5;
    background: #fff;
}

.trend-head[b-m8rzyo0am0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

    .trend-head b[b-m8rzyo0am0] {
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
    }

    .trend-head button[b-m8rzyo0am0] {
        height: 26px;
        padding: 0 9px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        color: #64748b;
        font-size: 11px;
        font-weight: 650;
        cursor: pointer;
    }

.trend-chart[b-m8rzyo0am0] {
    min-height: 108px;
}

    .trend-chart svg[b-m8rzyo0am0] {
        width: 100%;
        height: 86px;
        overflow: visible;
    }

    .trend-chart line[b-m8rzyo0am0] {
        stroke: #edf2f7;
        stroke-width: 1;
    }

    .trend-chart polyline[b-m8rzyo0am0] {
        fill: none;
        stroke: #2563eb;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .trend-chart circle[b-m8rzyo0am0] {
        fill: #2563eb;
        stroke: #fff;
        stroke-width: 2;
    }

.trend-months[b-m8rzyo0am0] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* TABLE CARD */
.leave-table-card[b-m8rzyo0am0] {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    overflow: hidden;
}

.leave-table-title[b-m8rzyo0am0] {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

    .leave-table-title h3[b-m8rzyo0am0] {
        margin: 0;
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .leave-table-title p[b-m8rzyo0am0] {
        margin: 5px 0 0;
        color: #7f8da5;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.4;
    }

.leave-table-status[b-m8rzyo0am0],
.leave-grid-count[b-m8rzyo0am0],
.table-footer[b-m8rzyo0am0] {
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
}

.loading-pill[b-m8rzyo0am0] {
    color: #4c87e7;
    font-weight: 700;
}

.leave-grid-top[b-m8rzyo0am0] {
    min-height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid #e8edf5;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leave-table-scroll[b-m8rzyo0am0] {
    max-width: 100%;
    overflow-x: auto;
}

    .leave-table-scroll[b-m8rzyo0am0]::-webkit-scrollbar {
        height: 10px;
    }

    .leave-table-scroll[b-m8rzyo0am0]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .leave-table-scroll[b-m8rzyo0am0]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

/* TABLE */
.leave-table[b-m8rzyo0am0] {
    width: 100%;
    min-width: 1300px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

    .leave-table thead th[b-m8rzyo0am0] {
        height: 46px;
        padding: 8px 10px;
        background: #f6f7fb;
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center !important;
        vertical-align: middle;
        border-right: 1px solid #eaedf4;
        border-bottom: 1px solid #eaedf4;
        white-space: nowrap;
    }

        .leave-table thead th small[b-m8rzyo0am0] {
            display: block;
            margin-top: 3px;
            color: #7b8aa2;
            font-size: 11.7px;
            font-weight: 600;
            line-height: 1.15;
        }

        .leave-table thead th.group[b-m8rzyo0am0] {
            color: #fff;
            font-size: 12.5px;
            font-weight: 700;
            text-transform: uppercase;
            border-right: 1px solid rgba(255, 255, 255, .22);
            border-bottom: 1px solid rgba(255, 255, 255, .22);
        }

    .leave-table thead tr:nth-child(2) th[b-m8rzyo0am0] {
        height: 46px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        border-right: 1px solid rgba(255, 255, 255, .22);
        border-bottom: 1px solid #e7ebf3;
        white-space: normal;
    }

    .leave-table thead th.teal[b-m8rzyo0am0],
    .leave-table thead th.sub-teal[b-m8rzyo0am0] {
        background: #0f8f9c;
    }

    .leave-table thead th.orange[b-m8rzyo0am0],
    .leave-table thead th.sub-orange[b-m8rzyo0am0] {
        background: #d98a12;
    }

    .leave-table thead th.blue[b-m8rzyo0am0],
    .leave-table thead th.sub-blue[b-m8rzyo0am0] {
        background: #2f6fd6;
    }

    .leave-table thead th.purple[b-m8rzyo0am0] {
        color: #fff;
        background: #5f46c7;
    }

    .leave-table tbody td[b-m8rzyo0am0] {
        height: 56px;
        padding: 10px;
        background: #fff;
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        vertical-align: middle;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

    .leave-table tbody tr:hover td[b-m8rzyo0am0] {
        background: #fbfcff;
    }

    .leave-table tbody td:first-child[b-m8rzyo0am0] {
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
    }

.text-center[b-m8rzyo0am0] {
    text-align: center !important;
}

.employee-cell[b-m8rzyo0am0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.employee-avatar[b-m8rzyo0am0] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    flex-shrink: 0;
    box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .08);
}

.emp-name[b-m8rzyo0am0] {
    color: #1e3355;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.emp-code[b-m8rzyo0am0] {
    margin-top: 3px;
    color: #3f6fd8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.dept-text[b-m8rzyo0am0] {
    display: inline-block;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.role-text[b-m8rzyo0am0] {
    margin-top: 3px;
    color: #7b8aa2;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
}

.strong-day[b-m8rzyo0am0] {
    color: #1e3355;
    font-size: 13px;
    font-weight: 600;
}

.remain-day[b-m8rzyo0am0] {
    color: #059669;
    font-size: 13px;
    font-weight: 700;
}

/* EMPTY */
.empty-state[b-m8rzyo0am0] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
}

    .empty-state i[b-m8rzyo0am0] {
        font-size: 40px;
        color: #a7b3c5;
    }

    .empty-state div[b-m8rzyo0am0] {
        margin-top: 8px;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
    }

    .empty-state span[b-m8rzyo0am0] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
    }

/* FOOTER / PAGING */
.table-footer[b-m8rzyo0am0] {
    min-height: 50px;
    padding: 12px 14px;
    border-top: 1px solid #e8edf5;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .leave-grid-top select[b-m8rzyo0am0],
    .leave-grid-top button[b-m8rzyo0am0],
    .table-footer select[b-m8rzyo0am0],
    .table-footer button[b-m8rzyo0am0],
    .leave-grid-top .page-link[b-m8rzyo0am0],
    .table-footer .page-link[b-m8rzyo0am0] {
        height: 32px;
        min-width: 32px;
        padding: 0 10px;
        border-radius: 9px;
        border: 1px solid #dce5ef;
        background: #fff;
        color: #334155;
        font-size: 13px;
        font-weight: 650;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .leave-grid-top .pagination[b-m8rzyo0am0],
    .table-footer .pagination[b-m8rzyo0am0] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .leave-grid-top .page-item.active .page-link[b-m8rzyo0am0],
    .table-footer .page-item.active .page-link[b-m8rzyo0am0] {
        background: #4c87e7;
        color: #fff;
        border-color: #4c87e7;
    }

/* CUSTOM SELECT DROPDOWN */
.leave-dept-filter[b-m8rzyo0am0],
.leave-role-filter[b-m8rzyo0am0],
.leave-project-filter[b-m8rzyo0am0] {
    position: relative;
    overflow: visible;
}

    .leave-dept-filter:has(.payroll-tree-select.is-open)[b-m8rzyo0am0],
    .leave-role-filter:has(.payroll-select-dropdown.is-open)[b-m8rzyo0am0],
    .leave-project-filter:has(.payroll-select-dropdown.is-open)[b-m8rzyo0am0] {
        z-index: 1300;
    }

.payroll-tree-select[b-m8rzyo0am0],
.payroll-select-dropdown[b-m8rzyo0am0] {
    position: relative;
    width: 100%;
}

.payroll-tree-select__control[b-m8rzyo0am0],
.payroll-select-dropdown__control[b-m8rzyo0am0] {
    width: 100%;
    height: 38px;
    padding: 0 9px 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #fff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}

.payroll-tree-select.is-open .payroll-tree-select__control[b-m8rzyo0am0],
.payroll-select-dropdown.is-open .payroll-select-dropdown__control[b-m8rzyo0am0] {
    border-color: #7fb3ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.payroll-tree-select__value[b-m8rzyo0am0],
.payroll-select-dropdown__value[b-m8rzyo0am0] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.payroll-tree-select__clear[b-m8rzyo0am0],
.payroll-select-dropdown__clear[b-m8rzyo0am0] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 850;
    cursor: pointer;
}

    .payroll-tree-select__clear:hover[b-m8rzyo0am0],
    .payroll-select-dropdown__clear:hover[b-m8rzyo0am0] {
        background: #fee2e2;
        color: #dc2626;
    }

.payroll-tree-select__chevron[b-m8rzyo0am0],
.payroll-select-dropdown__chevron[b-m8rzyo0am0] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .payroll-tree-select__chevron[b-m8rzyo0am0]::before,
    .payroll-select-dropdown__chevron[b-m8rzyo0am0]::before {
        content: "";
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
    }

.payroll-tree-select__panel[b-m8rzyo0am0],
.payroll-select-dropdown__panel[b-m8rzyo0am0] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 360px;
    max-width: min(360px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
    z-index: 1500;
}

.payroll-tree-select__search[b-m8rzyo0am0],
.payroll-select-dropdown__search[b-m8rzyo0am0] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

    .payroll-tree-select__search input[b-m8rzyo0am0],
    .payroll-select-dropdown__search input[b-m8rzyo0am0] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 32px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #fff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
    }

.payroll-tree-select__search-icon[b-m8rzyo0am0],
.payroll-select-dropdown__search-icon[b-m8rzyo0am0] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
}

.payroll-tree-select__list[b-m8rzyo0am0],
.payroll-select-dropdown__list[b-m8rzyo0am0] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
}

.payroll-tree-select__row[b-m8rzyo0am0],
.payroll-select-dropdown__option[b-m8rzyo0am0] {
    position: relative;
    min-height: 34px;
    margin: 2px 0;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.payroll-tree-select__row[b-m8rzyo0am0] {
    padding-right: 9px;
}

.payroll-select-dropdown__option[b-m8rzyo0am0] {
    min-height: 38px;
    padding: 6px 10px;
    gap: 9px;
}

    .payroll-tree-select__row:hover[b-m8rzyo0am0],
    .payroll-select-dropdown__option:hover[b-m8rzyo0am0] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .payroll-tree-select__row.is-selected[b-m8rzyo0am0],
    .payroll-select-dropdown__option.is-selected[b-m8rzyo0am0] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
    }

.payroll-tree-select__row.is-matched:not(.is-selected)[b-m8rzyo0am0] {
    background: #fff9ed;
    border-color: #fde6c5;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.payroll-tree-select__row--all[b-m8rzyo0am0],
.payroll-select-dropdown__option--all[b-m8rzyo0am0] {
    font-weight: 800;
}

.payroll-tree-select__toggle[b-m8rzyo0am0] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payroll-tree-select__toggle--empty[b-m8rzyo0am0] {
    cursor: default;
    opacity: .35;
}

.payroll-tree-select__node-icon[b-m8rzyo0am0],
.payroll-select-dropdown__option-icon[b-m8rzyo0am0] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
}

    .payroll-tree-select__node-icon.root[b-m8rzyo0am0],
    .payroll-select-dropdown__option-icon.all[b-m8rzyo0am0] {
        color: #2563eb;
        background: #eff6ff;
    }

    .payroll-tree-select__node-icon.parent[b-m8rzyo0am0] {
        color: #0284c7;
        background: #e0f2fe;
    }

    .payroll-tree-select__node-icon.leaf[b-m8rzyo0am0] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .payroll-select-dropdown__option-icon.project[b-m8rzyo0am0] {
        color: #7c3aed;
        background: #f5f3ff;
    }

.payroll-tree-select__label[b-m8rzyo0am0],
.payroll-select-dropdown__option-text[b-m8rzyo0am0] {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.payroll-select-dropdown__option-content[b-m8rzyo0am0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payroll-select-dropdown__option-code[b-m8rzyo0am0] {
    color: #7b8aa2;
    font-size: 11.5px;
    font-weight: 650;
}

/* RESPONSIVE */
@media (max-width: 1600px) {
    .leave-kpi-card[b-m8rzyo0am0] {
        min-height: 80px;
        padding: 12px 13px;
    }

    .kpi-value[b-m8rzyo0am0] {
        font-size: 18px;
    }
}

@media (max-width: 1400px) {
    .leave-kpi-grid[b-m8rzyo0am0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leave-filter-grid[b-m8rzyo0am0] {
        grid-template-columns: 100px 1fr 1fr 1fr;
    }

    .form-group.search[b-m8rzyo0am0] {
        grid-column: span 3;
    }

    .leave-insight-body[b-m8rzyo0am0] {
        grid-template-columns: 1fr;
    }

    .leave-insight-left[b-m8rzyo0am0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leave-trend-panel[b-m8rzyo0am0] {
        border-left: none;
        border-top: 1px solid #e8edf5;
    }
}

@media (max-width: 992px) {
    .leave-title-row[b-m8rzyo0am0],
    .leave-table-title[b-m8rzyo0am0],
    .leave-grid-top[b-m8rzyo0am0],
    .table-footer[b-m8rzyo0am0] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .leave-kpi-grid[b-m8rzyo0am0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-filter-grid[b-m8rzyo0am0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group.search[b-m8rzyo0am0] {
        grid-column: span 2;
    }

    .leave-insight-left[b-m8rzyo0am0] {
        grid-template-columns: 1fr;
    }

    .leave-trend-panel[b-m8rzyo0am0] {
        display: none;
    }
}

@media (max-width: 640px) {
    .leave-container[b-m8rzyo0am0] {
        padding: 16px;
    }

    .leave-title-wrap h2[b-m8rzyo0am0] {
        font-size: 19px;
    }

    .leave-kpi-grid[b-m8rzyo0am0],
    .leave-filter-grid[b-m8rzyo0am0] {
        grid-template-columns: 1fr;
    }

    .form-group.search[b-m8rzyo0am0] {
        grid-column: auto;
    }

    .leave-actions[b-m8rzyo0am0],
    .filter-actions[b-m8rzyo0am0] {
        flex-direction: column;
    }

    .leave-action-btn[b-m8rzyo0am0],
    .leave-btn[b-m8rzyo0am0] {
        width: 100%;
    }

    .leave-kpi-card[b-m8rzyo0am0] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .kpi-icon[b-m8rzyo0am0] {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

        .kpi-icon[b-m8rzyo0am0]  svg {
            width: 23px;
            height: 23px;
        }

    .kpi-label[b-m8rzyo0am0] {
        font-size: 11.5px;
    }

    .kpi-value[b-m8rzyo0am0] {
        font-size: 17px;
    }

    .kpi-note[b-m8rzyo0am0] {
        font-size: 11px;
    }

    .insight-icon[b-m8rzyo0am0] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

        .insight-icon[b-m8rzyo0am0]  svg {
            width: 20px;
            height: 20px;
        }
}

.trend-empty[b-m8rzyo0am0] {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.trend-range-select[b-m8rzyo0am0] {
    height: 26px;
    padding: 0 26px 0 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
    outline: none;
    cursor: pointer;
}

    .trend-range-select:disabled[b-m8rzyo0am0] {
        opacity: .65;
        cursor: not-allowed;
    }
/* /Components/Pages/PhieuLuongNhanVien/Index.razor.rz.scp.css */
/* ============================================================
   PHIEU LUONG CA NHAN
   Giữ nguyên UI hiện tại, chỉ đồng bộ font theo Bảng lương nhân viên
============================================================ */

.personal-payroll-page[b-5sz663tj57] {
    padding: 10px 0 18px;
    background: #f6f8fc;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
    overflow: visible;
}

.personal-payroll-container[b-5sz663tj57] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

/* ============================================================
   HEADER
============================================================ */

.personal-payroll-title-row[b-5sz663tj57] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.personal-payroll-title-left[b-5sz663tj57] {
    min-width: 0;
}

.personal-payroll-breadcrumb[b-5sz663tj57] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.personal-payroll-title-wrap[b-5sz663tj57] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .personal-payroll-title-wrap h2[b-5sz663tj57] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

/* Year select mới ở title */
.year-select-shell[b-5sz663tj57] {
    position: relative;
    height: 36px;
    min-width: 122px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #cfe0fb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .05);
    overflow: hidden;
    flex-shrink: 0;
}

    .year-select-shell:focus-within[b-5sz663tj57] {
        border-color: #93b4ff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    }

.year-select-icon[b-5sz663tj57] {
    position: absolute;
    left: 11px;
    width: 15px;
    height: 15px;
    color: #2563eb;
    pointer-events: none;
    display: inline-flex;
}

.year-select-chevron[b-5sz663tj57] {
    position: absolute;
    right: 10px;
    width: 15px;
    height: 15px;
    color: #64748b;
    pointer-events: none;
    display: inline-flex;
}

.year-select[b-5sz663tj57] {
    width: 100%;
    height: 100%;
    padding: 0 30px 0 32px;
    border: none;
    outline: none;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .year-select:disabled[b-5sz663tj57] {
        opacity: .65;
        cursor: not-allowed;
    }

.personal-filter-card select[b-5sz663tj57] {
    height: 38px;
    min-width: 118px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #ffffff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 650;
    outline: none;
}

/* ============================================================
   HEADER ACTION BUTTONS
============================================================ */

.personal-payroll-actions[b-5sz663tj57] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.personal-action-btn[b-5sz663tj57] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    opacity: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .personal-action-btn:hover:not(:disabled)[b-5sz663tj57] {
        transform: translateY(-1px);
    }

    .personal-action-btn:active:not(:disabled)[b-5sz663tj57] {
        transform: translateY(0);
        box-shadow: none;
    }

    .personal-action-btn:disabled[b-5sz663tj57] {
        opacity: .72;
        cursor: wait;
        transform: none;
        box-shadow: none;
    }

    .personal-action-btn.purple[b-5sz663tj57] {
        color: #6d28d9;
        border-color: #d8b4fe;
        background: #ffffff;
    }

        .personal-action-btn.purple:hover:not(:disabled)[b-5sz663tj57] {
            color: #5b21b6;
            background: #faf5ff;
            border-color: #c4b5fd;
            box-shadow: 0 6px 14px rgba(109, 40, 217, .10);
        }

    .personal-action-btn.blue[b-5sz663tj57] {
        color: #2563eb;
        border-color: #bfdbfe;
        background: #ffffff;
    }

        .personal-action-btn.blue:hover:not(:disabled)[b-5sz663tj57] {
            color: #1d4ed8;
            background: #eff6ff;
            border-color: #93c5fd;
            box-shadow: 0 6px 14px rgba(37, 99, 235, .10);
        }

    .personal-action-btn.green[b-5sz663tj57] {
        color: #047857;
        border-color: #86efac;
        background: #ecfdf5;
    }

        .personal-action-btn.green:hover:not(:disabled)[b-5sz663tj57] {
            color: #065f46;
            background: #d1fae5;
            border-color: #4ade80;
            box-shadow: 0 6px 14px rgba(5, 150, 105, .12);
        }

.action-svg[b-5sz663tj57] {
    width: 15px;
    height: 15px;
    display: inline-flex;
}

    .action-svg[b-5sz663tj57]  svg,
    .info-icon[b-5sz663tj57]  svg,
    .latest-icon[b-5sz663tj57]  svg,
    .latest-meta-icon[b-5sz663tj57]  svg,
    .kpi-mini-icon[b-5sz663tj57]  svg,
    .insight-icon[b-5sz663tj57]  svg,
    .row-svg[b-5sz663tj57]  svg,
    .latest-btn-svg[b-5sz663tj57]  svg,
    .year-select-icon[b-5sz663tj57]  svg,
    .year-select-chevron[b-5sz663tj57]  svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor !important;
    }

/* ============================================================
   ALERT
============================================================ */

.personal-alert[b-5sz663tj57] {
    min-height: 42px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

    .personal-alert.danger[b-5sz663tj57] {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .personal-alert.success[b-5sz663tj57] {
        color: #047857;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
    }

/* ============================================================
   EMPLOYEE SUMMARY
============================================================ */

.employee-summary-card[b-5sz663tj57] {
    min-height: 126px;
    padding: 20px 22px;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .035);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.employee-main[b-5sz663tj57] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding-right: 18px;
    border-right: 1px solid #eef2f7;
}

.employee-avatar-lg[b-5sz663tj57] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 760;
    box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.employee-identity[b-5sz663tj57] {
    min-width: 0;
}

    .employee-identity h3[b-5sz663tj57] {
        margin: 0;
        color: #1e3355;
        font-size: 17px;
        font-weight: 750;
        line-height: 1.25;
    }

    .employee-identity a[b-5sz663tj57] {
        display: inline-block;
        margin-top: 4px;
        color: #2563eb;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
    }

.working-pill[b-5sz663tj57] {
    width: fit-content;
    min-height: 26px;
    margin-top: 9px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

    .working-pill.active[b-5sz663tj57] {
        color: #059669;
        background: #dcfce7;
    }

    .working-pill.inactive[b-5sz663tj57] {
        color: #64748b;
        background: #f1f5f9;
    }

.employee-info-grid[b-5sz663tj57] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
}

.employee-info-item[b-5sz663tj57] {
    min-height: 58px;
    padding: 0 16px;
    border-right: 1px solid #eef2f7;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-content: center;
}

    .employee-info-item:last-child[b-5sz663tj57] {
        border-right: none;
    }

.info-icon[b-5sz663tj57] {
    grid-row: 1 / span 2;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: #2563eb;
}

.employee-info-item small[b-5sz663tj57] {
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.employee-info-item b[b-5sz663tj57] {
    margin-top: 4px;
    color: #1e3355;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   OVERVIEW
============================================================ */

.personal-payroll-overview[b-5sz663tj57] {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
}

.latest-payroll-card[b-5sz663tj57] {
    min-height: 236px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #bcd2ff;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 26px rgba(37, 99, 235, .06);
}

.latest-head[b-5sz663tj57] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.latest-title[b-5sz663tj57] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #40536f;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

.latest-icon[b-5sz663tj57] {
    width: 18px;
    height: 18px;
    color: #2563eb;
}

.latest-period[b-5sz663tj57] {
    margin-top: 18px;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.latest-label[b-5sz663tj57] {
    margin-top: 16px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.latest-money[b-5sz663tj57] {
    margin-top: 5px;
    color: #2563eb;
    font-size: 22px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.latest-meta[b-5sz663tj57] {
    margin-top: 14px;
    display: grid;
    gap: 7px;
}

    .latest-meta div[b-5sz663tj57] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #53647f;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.35;
    }

.latest-meta-icon[b-5sz663tj57] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.latest-actions[b-5sz663tj57] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(106px, 1.04fr) minmax(0, 1.46fr);
    gap: 8px;
    align-items: stretch;
}

.latest-btn[b-5sz663tj57] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .latest-btn:hover:not(:disabled)[b-5sz663tj57] {
        transform: translateY(-1px);
    }

    .latest-btn:active:not(:disabled)[b-5sz663tj57] {
        transform: translateY(0);
        box-shadow: none;
    }

.latest-btn-svg[b-5sz663tj57] {
    width: 15px;
    height: 15px;
    display: inline-flex;
    color: currentColor;
    flex-shrink: 0;
}

.latest-btn.view[b-5sz663tj57] {
    min-width: 108px;
    padding-left: 15px;
    padding-right: 15px;
    color: #8a4b00;
    background: linear-gradient(180deg, #fff4d8 0%, #ffe9ad 100%);
    border-color: #e7bd63;
    box-shadow: 0 4px 10px rgba(227, 160, 8, .10);
}

    .latest-btn.view:hover:not(:disabled)[b-5sz663tj57] {
        color: #6f3b00;
        background: linear-gradient(180deg, #ffeec2 0%, #ffde84 100%);
        border-color: #d99a1e;
        box-shadow: 0 7px 16px rgba(227, 160, 8, .16);
    }

.latest-btn.download[b-5sz663tj57] {
    color: #2f55a4;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border-color: #b9ccff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .07);
}

    .latest-btn.download:hover:not(:disabled)[b-5sz663tj57] {
        color: #21458e;
        background: linear-gradient(180deg, #f1f6ff 0%, #e2ecff 100%);
        border-color: #93b4ff;
        box-shadow: 0 7px 16px rgba(37, 99, 235, .11);
    }

.latest-empty[b-5sz663tj57] {
    padding: 28px 6px;
    color: #64748b;
    display: grid;
    gap: 8px;
}

    .latest-empty b[b-5sz663tj57] {
        color: #1e3355;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .latest-empty span[b-5sz663tj57] {
        color: #7f8da5;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.4;
    }

/* ============================================================
   KPI
============================================================ */

.kpi-section[b-5sz663tj57] {
    min-width: 0;
}

.personal-kpi-grid[b-5sz663tj57] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.personal-kpi-card[b-5sz663tj57] {
    position: relative;
    min-height: 146px;
    padding: 16px 16px 14px;
    border-radius: 16px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    display: block;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .035);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .personal-kpi-card:hover[b-5sz663tj57] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

    .personal-kpi-card.income[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }

    .personal-kpi-card.net[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    }

    .personal-kpi-card.deduction[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
    }

    .personal-kpi-card.tax[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    }

    .personal-kpi-card.insurance[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
    }

    .personal-kpi-card.closed[b-5sz663tj57] {
        background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    }

.kpi-mini-icon[b-5sz663tj57] {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .kpi-mini-icon[b-5sz663tj57]  svg {
        width: 17px;
        height: 17px;
    }

.income .kpi-mini-icon[b-5sz663tj57] {
    color: #16a34a;
    background: #dcfce7;
}

.net .kpi-mini-icon[b-5sz663tj57] {
    color: #2563eb;
    background: #dbeafe;
}

.deduction .kpi-mini-icon[b-5sz663tj57] {
    color: #ef4444;
    background: #fee2e2;
}

.tax .kpi-mini-icon[b-5sz663tj57] {
    color: #7c3aed;
    background: #ede9fe;
}

.insurance .kpi-mini-icon[b-5sz663tj57] {
    color: #f97316;
    background: #ffedd5;
}

.closed .kpi-mini-icon[b-5sz663tj57] {
    color: #0284c7;
    background: #e0f2fe;
}

.kpi-label[b-5sz663tj57] {
    display: block;
    margin-bottom: 0;
    color: #40536f;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.kpi-value[b-5sz663tj57] {
    display: block;
    margin-top: 9px;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.income .kpi-value[b-5sz663tj57] {
    color: #16a34a;
}

.net .kpi-value[b-5sz663tj57] {
    color: #2563eb;
}

.deduction .kpi-value[b-5sz663tj57] {
    color: #ef4444;
}

.tax .kpi-value[b-5sz663tj57] {
    color: #7c3aed;
}

.insurance .kpi-value[b-5sz663tj57] {
    color: #f97316;
}

.closed .kpi-value[b-5sz663tj57] {
    color: #2563eb;
}

.kpi-note[b-5sz663tj57] {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.trend-pill[b-5sz663tj57] {
    width: fit-content;
    min-height: 27px;
    margin-top: 16px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.closed-progress[b-5sz663tj57] {
    width: 100%;
    height: 7px;
    margin-top: 15px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

    .closed-progress span[b-5sz663tj57] {
        height: 100%;
        display: block;
        border-radius: inherit;
        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    }

.closed small[b-5sz663tj57] {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: right;
}

/* ============================================================
   INSIGHT
============================================================ */

.payroll-insight[b-5sz663tj57] {
    min-height: 48px;
    margin-top: 13px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #bfd7ff;
    background: #f8fbff;
    color: #40536f;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

    .payroll-insight b[b-5sz663tj57] {
        color: #2563eb;
        font-weight: 700;
    }

.insight-icon[b-5sz663tj57] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    color: #2563eb;
    background: #eaf2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

/* ============================================================
   FILTER
============================================================ */

.personal-filter-card[b-5sz663tj57] {
    position: relative;
    z-index: 600;
    min-height: 64px;
    margin-bottom: 0;
    padding: 12px 14px;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e8edf5;
    border-bottom: none;
    background: #ffffff;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}

.filter-left[b-5sz663tj57] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.personal-filter-card select[b-5sz663tj57] {
    height: 38px;
    min-width: 118px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #425b7f;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

/* ============================================================
   TABLE
============================================================ */

.personal-table-card[b-5sz663tj57] {
    position: relative;
    z-index: 1;
    border-radius: 0 0 16px 16px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    overflow: hidden;
    box-shadow: none;
}

.personal-table-scroll[b-5sz663tj57] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .personal-table-scroll[b-5sz663tj57]::-webkit-scrollbar {
        height: 10px;
    }

    .personal-table-scroll[b-5sz663tj57]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .personal-table-scroll[b-5sz663tj57]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

        .personal-table-scroll[b-5sz663tj57]::-webkit-scrollbar-thumb:hover {
            background: #aebbd0;
        }

.personal-payroll-table[b-5sz663tj57] {
    width: 100%;
    min-width: 1380px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

    .personal-payroll-table thead th[b-5sz663tj57] {
        height: 48px;
        padding: 8px 10px;
        background: #f6f7fb;
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center !important;
        vertical-align: middle;
        letter-spacing: 0;
        border-right: 1px solid #eaedf4;
        border-bottom: 1px solid #e8edf5;
        white-space: nowrap;
    }

        .personal-payroll-table thead th:last-child[b-5sz663tj57] {
            border-right: none;
        }

    .personal-payroll-table tbody td[b-5sz663tj57] {
        height: 48px;
        padding: 9px 10px;
        background: #ffffff;
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

        .personal-payroll-table tbody td:last-child[b-5sz663tj57] {
            border-right: none;
        }

    .personal-payroll-table tbody tr:hover td[b-5sz663tj57] {
        background: #fbfcff;
    }

.period-cell[b-5sz663tj57] {
    color: #1e3355 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.2;
}

.money[b-5sz663tj57] {
    text-align: right !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

.income-text[b-5sz663tj57] {
    color: #059669 !important;
    font-weight: 650 !important;
}

.danger-text[b-5sz663tj57] {
    color: #ef4444 !important;
    font-weight: 650 !important;
}

.net-col[b-5sz663tj57],
.net-cell[b-5sz663tj57] {
    background: #f0fdf4 !important;
}

.net-cell[b-5sz663tj57] {
    color: #059669 !important;
    font-weight: 700 !important;
}

.muted-row td[b-5sz663tj57] {
    color: #94a3b8 !important;
    background: #fcfdff !important;
}

.muted-row .net-cell[b-5sz663tj57] {
    color: #94a3b8 !important;
}

/* ============================================================
   STATUS
============================================================ */

.personal-status[b-5sz663tj57] {
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

    .personal-status.locked[b-5sz663tj57] {
        color: #059669;
        background: #dcfce7;
        border: none;
    }

    .personal-status.approved[b-5sz663tj57] {
        color: #2563eb;
        background: #dbeafe;
        border: none;
    }

    .personal-status.processing[b-5sz663tj57] {
        color: #d97706;
        background: #fff7ed;
        border: none;
    }

    .personal-status.empty[b-5sz663tj57] {
        color: #64748b;
        background: #f1f5f9;
        border: none;
    }

    .personal-status.future[b-5sz663tj57] {
        color: #64748b;
        background: #eef2ff;
        border: none;
    }

/* ============================================================
   ROW ACTIONS
============================================================ */

.row-actions[b-5sz663tj57] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.row-icon[b-5sz663tj57] {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .row-icon:disabled[b-5sz663tj57] {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .row-icon.view[b-5sz663tj57] {
        color: #8a4b00;
        background: #fff4d8;
        border-color: #e7bd63;
        box-shadow: 0 3px 8px rgba(227, 160, 8, .09);
    }

        .row-icon.view:hover:not(:disabled)[b-5sz663tj57] {
            color: #6f3b00;
            background: #ffe9ad;
            border-color: #d99a1e;
            box-shadow: 0 6px 14px rgba(227, 160, 8, .14);
            transform: translateY(-1px);
        }

    .row-icon.download[b-5sz663tj57] {
        color: #2f55a4;
        background: #f7faff;
        border-color: #b9ccff;
        box-shadow: 0 3px 8px rgba(37, 99, 235, .06);
    }

        .row-icon.download:hover:not(:disabled)[b-5sz663tj57] {
            color: #21458e;
            background: #eef4ff;
            border-color: #93b4ff;
            box-shadow: 0 6px 14px rgba(37, 99, 235, .10);
            transform: translateY(-1px);
        }

.row-svg[b-5sz663tj57] {
    width: 15px;
    height: 15px;
    display: inline-flex;
    color: currentColor;
}

/* ============================================================
   EMPTY
============================================================ */

.personal-empty[b-5sz663tj57] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
    display: grid;
    gap: 7px;
    justify-items: center;
}

    .personal-empty i[b-5sz663tj57] {
        font-size: 40px;
        color: #a7b3c5;
    }

    .personal-empty b[b-5sz663tj57] {
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .personal-empty span[b-5sz663tj57] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1500px) {
    .employee-summary-card[b-5sz663tj57] {
        grid-template-columns: 1fr;
    }

    .employee-main[b-5sz663tj57] {
        border-right: none;
        border-bottom: 1px solid #eef2f7;
        padding-right: 0;
        padding-bottom: 16px;
    }

    .employee-info-grid[b-5sz663tj57] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .personal-payroll-overview[b-5sz663tj57] {
        grid-template-columns: 1fr;
    }

    .personal-kpi-grid[b-5sz663tj57] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1366px) {
    .personal-payroll-title-wrap h2[b-5sz663tj57] {
        font-size: 21.5px;
    }

    .kpi-value[b-5sz663tj57] {
        font-size: 18px;
    }

    .latest-money[b-5sz663tj57] {
        font-size: 21px;
    }

    .personal-kpi-card[b-5sz663tj57] {
        min-height: 138px;
    }
}

@media (max-width: 992px) {
    .personal-payroll-title-row[b-5sz663tj57],
    .personal-filter-card[b-5sz663tj57] {
        flex-direction: column;
        align-items: stretch;
    }

    .personal-payroll-actions[b-5sz663tj57],
    .filter-left[b-5sz663tj57] {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .employee-info-grid[b-5sz663tj57] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal-kpi-grid[b-5sz663tj57] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal-payroll-table thead th[b-5sz663tj57] {
        font-size: 12.8px;
    }

    .personal-payroll-table tbody td[b-5sz663tj57] {
        height: 54px;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .personal-payroll-container[b-5sz663tj57] {
        padding: 16px;
    }

    .personal-payroll-title-wrap h2[b-5sz663tj57] {
        font-size: 19px;
        font-weight: 750;
    }

    .personal-action-btn[b-5sz663tj57] {
        width: 100%;
        min-height: 40px;
    }

    .employee-info-grid[b-5sz663tj57],
    .personal-kpi-grid[b-5sz663tj57] {
        grid-template-columns: 1fr;
    }

    .personal-kpi-card[b-5sz663tj57] {
        min-height: 128px;
        padding: 14px;
    }

    .kpi-mini-icon[b-5sz663tj57] {
        width: 30px;
        height: 30px;
    }

    .kpi-label[b-5sz663tj57] {
        font-size: 12px;
    }

    .kpi-value[b-5sz663tj57] {
        font-size: 17px;
    }

    .kpi-note[b-5sz663tj57] {
        font-size: 11px;
    }

    .latest-actions[b-5sz663tj57] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .latest-btn[b-5sz663tj57] {
        width: 100%;
    }

    .personal-payroll-actions[b-5sz663tj57] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/TongHopCongCuaToi/ChiTietTheoNgay.razor.rz.scp.css */
/* ============================================================
   TAB CHI TIẾT THEO NGÀY - COMPONENT RIÊNG
   Font size / weight giữ đồng bộ với màn Tổng hợp công của tôi
============================================================ */

:host[b-tsfautesyh] {
    display: block;
}

.detail-toolbar-enhanced[b-tsfautesyh] {
    min-height: 58px;
    padding: 9px 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
    overflow: visible;
}

.detail-date-range[b-tsfautesyh] {
    align-self: center;
    color: #1473ff;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

    .detail-date-range span[b-tsfautesyh] {
        color: #40536f;
        font-weight: 650;
    }

.detail-actions[b-tsfautesyh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-actions-filter[b-tsfautesyh] {
    display: grid;
    grid-template-columns: 176px 176px minmax(260px, 1fr) 162px 164px 86px;
    gap: 8px;
    align-items: center;
    justify-content: end;
    min-width: 0;
    overflow: visible;
}

.detail-actions > button > span[b-tsfautesyh],
.detail-actions .daily-search-icon[b-tsfautesyh],
.detail-actions .daily-clear-icon[b-tsfautesyh] {
    width: 15px;
    height: 15px;
    display: inline-flex;
    flex-shrink: 0;
}

.daily-form-group[b-tsfautesyh] {
    min-width: 0;
    position: relative;
    overflow: visible;
}

.daily-form-group-inline[b-tsfautesyh] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

    .daily-form-group-inline label[b-tsfautesyh] {
        margin: 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 750;
        line-height: 1;
        white-space: nowrap;
    }

/* ============================================================
   CUSTOM SELECT2-LIKE DROPDOWN FOR FROM/TO DAY + STATUS
============================================================ */

.daily-select-dropdown[b-tsfautesyh] {
    position: relative;
    width: 100%;
    min-width: 0;
    z-index: 1;
}

    .daily-select-dropdown.is-open[b-tsfautesyh] {
        z-index: 1600;
    }

.daily-select-dropdown__control[b-tsfautesyh] {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0 8px 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid #d7e3f2 !important;
    background: #ffffff !important;
    color: #425b7f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .daily-select-dropdown__control:hover[b-tsfautesyh] {
        border-color: #bfd0e6 !important;
        background: #fbfdff !important;
    }

.daily-select-dropdown.is-open .daily-select-dropdown__control[b-tsfautesyh] {
    border-color: #7fb3ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.daily-select-dropdown__value[b-tsfautesyh] {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    color: #425b7f;
    display: block !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.daily-select-dropdown__clear[b-tsfautesyh] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .daily-select-dropdown__clear:hover[b-tsfautesyh] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

.daily-select-dropdown__chevron[b-tsfautesyh] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    color: #64748b;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

    .daily-select-dropdown__chevron[b-tsfautesyh]::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
        transform: translateY(1px);
    }

.daily-select-dropdown__panel[b-tsfautesyh] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 260px;
    max-width: min(260px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
    z-index: 1700;
}

.daily-day-panel[b-tsfautesyh] {
    width: 260px;
}

.daily-status-dropdown[b-tsfautesyh] {
    width: 162px;
    min-width: 162px;
}

.daily-status-panel[b-tsfautesyh] {
    width: 360px;
    max-width: min(360px, calc(100vw - 48px));
}

.daily-select-dropdown__search[b-tsfautesyh] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .daily-select-dropdown__search input[b-tsfautesyh] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 34px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .daily-select-dropdown__search input[b-tsfautesyh]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .daily-select-dropdown__search input:focus[b-tsfautesyh] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

.daily-select-dropdown__search-icon[b-tsfautesyh] {
    position: absolute;
    left: 21px;
    top: 50%;
    width: 15px !important;
    height: 15px !important;
    transform: translateY(-50%);
    color: #94a3b8;
    display: inline-flex !important;
    pointer-events: none;
}

.daily-select-dropdown__list[b-tsfautesyh] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

    .daily-select-dropdown__list[b-tsfautesyh]::-webkit-scrollbar {
        width: 8px;
    }

    .daily-select-dropdown__list[b-tsfautesyh]::-webkit-scrollbar-thumb {
        background: #dbe4f0;
        border-radius: 999px;
    }

    .daily-select-dropdown__list[b-tsfautesyh]::-webkit-scrollbar-track {
        background: transparent;
    }

.daily-select-dropdown__option[b-tsfautesyh] {
    position: relative;
    min-height: 44px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .daily-select-dropdown__option[b-tsfautesyh]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .daily-select-dropdown__option:hover[b-tsfautesyh] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .daily-select-dropdown__option.is-selected[b-tsfautesyh] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .daily-select-dropdown__option.is-selected[b-tsfautesyh]::before {
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        }

.daily-select-dropdown__option--all[b-tsfautesyh] {
    font-weight: 800;
}

.daily-select-dropdown__option-icon[b-tsfautesyh] {
    width: 28px !important;
    height: 24px !important;
    min-width: 28px;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
    flex-shrink: 0;
}

    .daily-select-dropdown__option-icon.all[b-tsfautesyh],
    .daily-select-dropdown__option-icon.day[b-tsfautesyh] {
        color: #2563eb;
        background: #eff6ff;
    }

    .daily-select-dropdown__option-icon.ok[b-tsfautesyh],
    .daily-select-dropdown__option-icon.leave[b-tsfautesyh] {
        color: #16a34a;
        background: #ecfdf5;
    }

    .daily-select-dropdown__option-icon.late[b-tsfautesyh],
    .daily-select-dropdown__option-icon.early[b-tsfautesyh] {
        color: #d97706;
        background: #fff7ed;
    }

    .daily-select-dropdown__option-icon.absent[b-tsfautesyh] {
        color: #ef4444;
        background: #fff1f2;
    }

    .daily-select-dropdown__option-icon.travel[b-tsfautesyh] {
        color: #7c3aed;
        background: #f5f3ff;
    }

    .daily-select-dropdown__option-icon.off[b-tsfautesyh] {
        color: #64748b;
        background: #f1f5f9;
    }

.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.ok[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.leave[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.late[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.early[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.absent[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.travel[b-tsfautesyh],
.daily-select-dropdown__option.is-selected .daily-select-dropdown__option-icon.off[b-tsfautesyh] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.daily-select-dropdown__option-content[b-tsfautesyh] {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 3px;
}

.daily-select-dropdown__option-text[b-tsfautesyh] {
    width: auto !important;
    height: auto !important;
    color: inherit;
    display: block !important;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.daily-select-dropdown__option-code[b-tsfautesyh] {
    width: auto !important;
    height: auto !important;
    color: #7b8aa2;
    display: block !important;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.daily-status-dropdown .daily-select-dropdown__control[b-tsfautesyh] {
    height: 32px;
    min-height: 32px;
}

.daily-status-dropdown .daily-select-dropdown__value[b-tsfautesyh] {
    color: #425b7f;
    font-weight: 600;
}

/* ============================================================
   OTHER FILTER CONTROLS
============================================================ */

.daily-search-box[b-tsfautesyh] {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .daily-search-box:focus-within[b-tsfautesyh] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(20, 115, 255, .08);
    }

    .daily-search-box span[b-tsfautesyh] {
        color: #94a3b8;
        display: inline-flex;
        flex-shrink: 0;
    }

    .daily-search-box input[b-tsfautesyh] {
        width: 100%;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        color: #40536f;
        font-size: 12.5px;
        font-weight: 600;
    }

        .daily-search-box input[b-tsfautesyh]::placeholder {
            color: #9aa8bb;
            font-weight: 500;
        }

.daily-check-filter[b-tsfautesyh] {
    width: 164px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    color: #40536f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

    .daily-check-filter input[b-tsfautesyh] {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: #1473ff;
        flex-shrink: 0;
    }

    .daily-check-filter span[b-tsfautesyh] {
        width: auto !important;
        height: auto !important;
        display: inline-flex;
        white-space: nowrap;
    }

.daily-clear-filter-btn[b-tsfautesyh] {
    width: 86px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px !important;
    border-radius: 8px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #40536f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* ============================================================
   TABLE + PAGING
============================================================ */

.my-daily-table-card[b-tsfautesyh] {
    border-top: 1px solid #edf2f7;
    background: #ffffff;
    overflow: hidden;
}

.my-daily-table-top[b-tsfautesyh] {
    min-height: 60px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
}

.my-daily-table-count[b-tsfautesyh] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

.my-daily-table-paging[b-tsfautesyh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

    .my-daily-table-paging[b-tsfautesyh]  .pagination,
    .my-daily-table-paging[b-tsfautesyh]  .paging,
    .my-daily-table-paging[b-tsfautesyh]  .pager {
        margin: 0;
    }

    .my-daily-table-paging[b-tsfautesyh]  select {
        height: 34px;
        min-width: 86px;
        padding: 0 28px 0 10px;
        border-radius: 8px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 600;
        outline: none;
    }

    .my-daily-table-paging[b-tsfautesyh]  button {
        font-weight: 600;
    }

.attendance-table-scroll[b-tsfautesyh] {
    width: 100%;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .attendance-table-scroll[b-tsfautesyh]::-webkit-scrollbar {
        height: 10px;
    }

    .attendance-table-scroll[b-tsfautesyh]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .attendance-table-scroll[b-tsfautesyh]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

.my-daily-table-card .my-daily-table-scroll[b-tsfautesyh] {
    padding: 0 16px;
}

.attendance-detail-table[b-tsfautesyh] {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid #e8edf5;
    border-radius: 10px;
    overflow: hidden;
}

.my-daily-detail-table[b-tsfautesyh] {
    min-width: 1780px;
}

.attendance-detail-table thead th[b-tsfautesyh] {
    height: 38px;
    padding: 7px 10px;
    background: #f6f7fb;
    color: #40536f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #eaedf4;
    border-bottom: 1px solid #e8edf5;
    white-space: nowrap;
}

    .attendance-detail-table thead th:last-child[b-tsfautesyh] {
        border-right: none;
    }

.attendance-detail-table tbody td[b-tsfautesyh] {
    height: 38px;
    padding: 7px 10px;
    background: #ffffff;
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}

    .attendance-detail-table tbody td:last-child[b-tsfautesyh] {
        border-right: none;
    }

.attendance-detail-table tbody tr:hover td[b-tsfautesyh],
.my-daily-detail-table tbody tr:hover td[b-tsfautesyh] {
    background: #f8fbff !important;
}

.my-daily-detail-table tbody tr.warning-row td[b-tsfautesyh] {
    background: #fffdf8;
}

.my-daily-detail-table tbody tr.danger-row td[b-tsfautesyh] {
    background: #fffafa;
}

.my-daily-detail-table tbody tr.success-row td[b-tsfautesyh] {
    background: #fbfffd;
}

.my-daily-detail-table tbody tr.muted-row td[b-tsfautesyh] {
    background: #fbfcfd;
}

/* ============================================================
   CELLS
============================================================ */

.daily-date-cell[b-tsfautesyh] {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.daily-date-badge[b-tsfautesyh] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #3b82f6;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

    .daily-date-badge.weekend[b-tsfautesyh],
    .daily-date-badge.off[b-tsfautesyh] {
        background: #e2e8f0;
        color: #64748b;
    }

    .daily-date-badge.warning[b-tsfautesyh] {
        background: #ea580c;
        color: #ffffff;
    }

    .daily-date-badge.danger[b-tsfautesyh] {
        background: #ef4444;
        color: #ffffff;
    }

    .daily-date-badge.leave[b-tsfautesyh] {
        background: #22c55e;
        color: #ffffff;
    }

    .daily-date-badge.business[b-tsfautesyh] {
        background: #7c3aed;
        color: #ffffff;
    }

.daily-weekday[b-tsfautesyh] {
    color: #40536f;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

    .daily-weekday.weekend[b-tsfautesyh] {
        color: #94a3b8;
        font-style: italic;
    }

.daily-time-cell[b-tsfautesyh] {
    color: #1e3355;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .daily-time-cell.late-time[b-tsfautesyh] {
        color: #ea580c;
    }

    .daily-time-cell.early-time[b-tsfautesyh] {
        color: #d97706;
    }

.daily-zero[b-tsfautesyh] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.daily-minute-badge[b-tsfautesyh],
.daily-overtime[b-tsfautesyh] {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.8px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

    .daily-minute-badge.late[b-tsfautesyh],
    .daily-minute-badge.early[b-tsfautesyh] {
        color: #c2410c;
        background: #fff7ed;
        border: 1px solid #fed7aa;
    }

.daily-overtime[b-tsfautesyh] {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.daily-status[b-tsfautesyh] {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

    .daily-status.work[b-tsfautesyh] {
        color: #047857;
        background: #ecfdf5;
        border-color: #bbf7d0;
    }

    .daily-status.late[b-tsfautesyh] {
        color: #c2410c;
        background: #fff7ed;
        border-color: #fed7aa;
    }

    .daily-status.early[b-tsfautesyh] {
        color: #92400e;
        background: #fffbeb;
        border-color: #fde68a;
    }

    .daily-status.warning[b-tsfautesyh] {
        color: #c2410c;
        background: #fff7ed;
        border-color: #fdba74;
    }

    .daily-status.leave[b-tsfautesyh] {
        color: #065f46;
        background: #ecfdf5;
        border-color: #a7f3d0;
    }

    .daily-status.business[b-tsfautesyh] {
        color: #6d28d9;
        background: #f5f3ff;
        border-color: #ddd6fe;
    }

    .daily-status.holiday[b-tsfautesyh],
    .daily-status.normal[b-tsfautesyh] {
        color: #475569;
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    .daily-status.missing[b-tsfautesyh] {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

.daily-sub-status[b-tsfautesyh] {
    max-width: 180px;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.daily-source[b-tsfautesyh] {
    max-width: 140px;
    color: #40536f;
    font-size: 12.5px;
    font-weight: 650;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-empty-text[b-tsfautesyh] {
    color: #a0aec0;
    font-size: 12px;
    font-weight: 600;
}

.note-cell[b-tsfautesyh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #40536f;
    font-size: 13px;
    font-weight: 500;
}

.attendance-empty[b-tsfautesyh] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
    display: grid;
    gap: 8px;
    justify-items: center;
}

    .attendance-empty span[b-tsfautesyh] {
        width: 38px;
        height: 38px;
        color: #a7b3c5;
        display: inline-flex;
    }

    .attendance-empty b[b-tsfautesyh] {
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .attendance-empty small[b-tsfautesyh] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

/* ============================================================
   SVG
============================================================ */

.detail-toolbar-enhanced[b-tsfautesyh]  svg,
.my-daily-table-card[b-tsfautesyh]  svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1680px) {
    .detail-toolbar-enhanced[b-tsfautesyh] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .detail-date-range[b-tsfautesyh] {
        justify-self: start;
    }

    .detail-actions-filter[b-tsfautesyh] {
        grid-template-columns: 176px 176px minmax(220px, 1fr) 162px 164px 86px;
        justify-content: stretch;
    }

    .daily-search-box[b-tsfautesyh] {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .detail-actions-filter[b-tsfautesyh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-form-group-inline[b-tsfautesyh] {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .daily-search-box[b-tsfautesyh],
    .daily-check-filter[b-tsfautesyh],
    .daily-clear-filter-btn[b-tsfautesyh],
    .daily-status-dropdown[b-tsfautesyh] {
        width: 100%;
        min-width: 0;
    }

    .daily-status-panel[b-tsfautesyh] {
        width: min(360px, calc(100vw - 48px));
    }
}

@media (max-width: 768px) {
    .my-daily-table-top[b-tsfautesyh] {
        align-items: stretch;
        flex-direction: column;
    }

    .my-daily-table-count[b-tsfautesyh] {
        white-space: normal;
    }

    .my-daily-table-paging[b-tsfautesyh] {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    .detail-actions-filter[b-tsfautesyh] {
        grid-template-columns: 1fr;
    }

    .daily-form-group-inline[b-tsfautesyh] {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .daily-select-dropdown__panel[b-tsfautesyh] {
        width: min(260px, calc(100vw - 48px));
    }
}
/* /Components/Pages/TongHopCongCuaToi/Index.razor.rz.scp.css */
/* ============================================================
   TONG HOP CONG CUA TOI
   Font size / weight đồng bộ theo Phiếu lương cá nhân
============================================================ */

.my-attendance-page[b-fvlxhblux3] {
    padding: 10px 0 18px;
    background: #f6f8fc;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
    overflow: visible;
}

.my-attendance-container[b-fvlxhblux3] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

.my-attendance-header[b-fvlxhblux3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.my-attendance-title-area[b-fvlxhblux3] {
    min-width: 0;
}

.my-attendance-breadcrumb[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8492a8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.breadcrumb-chevron[b-fvlxhblux3] {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    display: inline-flex;
}

.my-attendance-title-wrap[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .my-attendance-title-wrap h2[b-fvlxhblux3] {
        margin: 0;
        color: #1e3355;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.005em;
    }

.title-star[b-fvlxhblux3] {
    width: 22px;
    height: 22px;
    color: #64748b;
    display: inline-flex;
}

.my-attendance-subtitle[b-fvlxhblux3] {
    margin-top: 5px;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.my-attendance-actions[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.period-select-shell[b-fvlxhblux3] {
    position: relative;
    height: 42px;
    min-width: 154px;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.period-picker-btn[b-fvlxhblux3] {
    width: 100%;
    height: 42px;
    min-width: 154px;
    padding: 0 42px 0 16px;
    border: 1px solid #d7e3f2;
    outline: none;
    border-radius: 10px;
    background: #ffffff;
    color: #1e3355;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .04);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .period-picker-btn:hover:not(:disabled)[b-fvlxhblux3],
    .period-select-shell.is-open .period-picker-btn[b-fvlxhblux3] {
        border-color: #b9d3ff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .07);
    }

    .period-picker-btn:disabled[b-fvlxhblux3] {
        opacity: .65;
        cursor: not-allowed;
    }

.period-picker-main[b-fvlxhblux3] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.period-icon[b-fvlxhblux3] {
    position: absolute;
    right: 34px;
    width: 16px;
    height: 16px;
    color: #1e3355;
    pointer-events: none;
    display: inline-flex;
}

.period-chevron[b-fvlxhblux3] {
    position: absolute;
    right: 12px;
    width: 15px;
    height: 15px;
    color: #64748b;
    pointer-events: none;
    display: inline-flex;
}

.period-month-panel[b-fvlxhblux3] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 238px;
    padding: 12px;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
    z-index: 999;
}

    .period-month-panel[b-fvlxhblux3]::before {
        content: "";
        position: absolute;
        top: -6px;
        right: 28px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #dce7f5;
        border-top: 1px solid #dce7f5;
        transform: rotate(45deg);
    }

.period-month-grid[b-fvlxhblux3] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    z-index: 1;
}

.period-month-item[b-fvlxhblux3] {
    height: 34px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .period-month-item:hover[b-fvlxhblux3] {
        color: #1473ff;
        border-color: #b9d3ff;
        background: #f4f8ff;
    }

    .period-month-item.is-selected[b-fvlxhblux3] {
        color: #1473ff;
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px rgba(20, 115, 255, .08);
    }

.period-year-row[b-fvlxhblux3] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

    .period-year-row button[b-fvlxhblux3] {
        width: 34px;
        height: 34px;
        border: 1px solid #dbe4ef;
        border-radius: 9px;
        background: #ffffff;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

        .period-year-row button:hover[b-fvlxhblux3] {
            color: #1473ff;
            border-color: #b9d3ff;
            background: #f4f8ff;
        }

        .period-year-row button svg[b-fvlxhblux3] {
            width: 15px;
            height: 15px;
        }

    .period-year-row strong[b-fvlxhblux3] {
        text-align: center;
        color: #1e3355;
        font-size: 13px;
        font-weight: 750;
        line-height: 1;
    }

.attendance-action-btn[b-fvlxhblux3] {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .attendance-action-btn:hover:not(:disabled)[b-fvlxhblux3] {
        transform: translateY(-1px);
    }

    .attendance-action-btn:disabled[b-fvlxhblux3] {
        cursor: default;
    }

    .attendance-action-btn.status.locked[b-fvlxhblux3] {
        color: #059669;
        background: #ecfdf5;
        border-color: #bbf7d0;
    }

    .attendance-action-btn.status.pending[b-fvlxhblux3] {
        color: #d97706;
        background: #fff7ed;
        border-color: #fed7aa;
    }

    .attendance-action-btn.export[b-fvlxhblux3] {
        min-width: 138px;
        color: #ffffff;
        background: #08a35a;
        border-color: #08a35a;
        box-shadow: 0 8px 18px rgba(8, 163, 90, .18);
    }

        .attendance-action-btn.export:hover:not(:disabled)[b-fvlxhblux3] {
            background: #078a4d;
            border-color: #078a4d;
            box-shadow: 0 10px 22px rgba(8, 163, 90, .22);
        }

.btn-svg[b-fvlxhblux3],
.btn-chevron[b-fvlxhblux3],
.alert-svg[b-fvlxhblux3] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    color: currentColor;
}

/* ============================================================
   SVG
============================================================ */

.my-attendance-page[b-fvlxhblux3]  svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor !important;
}

.banner-svg[b-fvlxhblux3]  svg,
.banner-link span[b-fvlxhblux3]  svg,
.overview-info[b-fvlxhblux3]  svg,
.message-svg[b-fvlxhblux3]  svg,
.kpi-info[b-fvlxhblux3]  svg,
.note-svg[b-fvlxhblux3]  svg {
    fill: none !important;
}

.banner-svg[b-fvlxhblux3]  circle,
.banner-svg[b-fvlxhblux3]  path,
.banner-link span[b-fvlxhblux3]  circle,
.banner-link span[b-fvlxhblux3]  path,
.overview-info[b-fvlxhblux3]  circle,
.overview-info[b-fvlxhblux3]  path,
.message-svg[b-fvlxhblux3]  circle,
.message-svg[b-fvlxhblux3]  path,
.kpi-info[b-fvlxhblux3]  circle,
.kpi-info[b-fvlxhblux3]  path,
.note-svg[b-fvlxhblux3]  circle,
.note-svg[b-fvlxhblux3]  path {
    vector-effect: non-scaling-stroke;
}

/* ============================================================
   ALERT
============================================================ */

.my-attendance-alert[b-fvlxhblux3] {
    min-height: 42px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

    .my-attendance-alert.danger[b-fvlxhblux3] {
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .my-attendance-alert.success[b-fvlxhblux3] {
        color: #047857;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
    }

/* ============================================================
   EMPLOYEE CARD
============================================================ */

.employee-attendance-card[b-fvlxhblux3] {
    padding: 18px 20px 14px;
    margin-bottom: 14px;
    border-radius: 18px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .035);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
}

.employee-main-block[b-fvlxhblux3] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 20px;
    border-right: 1px solid #e8edf5;
}

.employee-avatar[b-fvlxhblux3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #1d74ff;
    background: linear-gradient(135deg, #eaf3ff 0%, #f8fbff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 760;
    box-shadow: inset 0 -8px 18px rgba(37, 99, 235, .08);
    flex-shrink: 0;
}

.employee-identity[b-fvlxhblux3] {
    min-width: 0;
}

.employee-name[b-fvlxhblux3] {
    color: #1e3355;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.25;
}

.employee-meta-row[b-fvlxhblux3] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40536f;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

.employee-tag[b-fvlxhblux3] {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    color: #2563eb;
    background: #eaf2ff;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
}

.employee-info-strip[b-fvlxhblux3] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
}

.employee-info-item[b-fvlxhblux3] {
    min-height: 58px;
    padding: 0 18px;
    border-right: 1px solid #e8edf5;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .employee-info-item:last-child[b-fvlxhblux3] {
        border-right: none;
    }

    .employee-info-item.status[b-fvlxhblux3] {
        align-items: center;
    }

.info-svg[b-fvlxhblux3] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: #1473ff;
    display: inline-flex;
}

.employee-info-item small[b-fvlxhblux3] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.employee-info-item b[b-fvlxhblux3] {
    display: block;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    color: #1e3355;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Riêng cột Ca làm việc: cho xuống tối đa 2 dòng để không tràn qua Chức danh */
.employee-info-strip .employee-info-item:nth-child(2) b[b-fvlxhblux3] {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.28;
    word-break: break-word;
}

/* Bọc text an toàn trong từng item */
.employee-info-item[b-fvlxhblux3],
.employee-info-item > div[b-fvlxhblux3] {
    min-width: 0;
    overflow: hidden;
}

    /* Icon không bị co khi text dài */
    .employee-info-item .info-svg[b-fvlxhblux3] {
        flex-shrink: 0;
    }

.period-status[b-fvlxhblux3] {
    width: fit-content;
    min-height: 24px;
    margin-top: 4px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

    .period-status span[b-fvlxhblux3] {
        width: 13px;
        height: 13px;
    }

    .period-status.locked[b-fvlxhblux3] {
        color: #059669;
        background: #dcfce7;
    }

    .period-status.pending[b-fvlxhblux3] {
        color: #d97706;
        background: #fff7ed;
    }

.attendance-info-banner[b-fvlxhblux3] {
    grid-column: 1 / -1;
    min-height: 36px;
    margin-top: 16px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid #d9e9ff;
    background: #f8fbff;
    color: #40536f;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.banner-svg[b-fvlxhblux3] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    color: #1473ff;
    display: inline-flex;
}

.banner-link[b-fvlxhblux3] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .banner-link span[b-fvlxhblux3] {
        width: 16px;
        height: 16px;
        display: inline-flex;
    }

/* ============================================================
   KPI - STYLE GIỐNG MOCK HÌNH 2
   Card trắng, icon nổi, border nhẹ, featured viền xanh
============================================================ */

.attendance-kpi-grid[b-fvlxhblux3] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.attendance-kpi-card[b-fvlxhblux3] {
    min-height: 88px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid #e7edf6;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
    display: flex;
    align-items: flex-start;
    gap: 13px;
    position: relative;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .attendance-kpi-card[b-fvlxhblux3]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18px 16px, rgba(20, 115, 255, .055), transparent 42%);
        opacity: 0;
        pointer-events: none;
    }

    .attendance-kpi-card:hover[b-fvlxhblux3] {
        transform: translateY(-1px);
        border-color: #d7e3f2;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .065);
    }

    .attendance-kpi-card.featured[b-fvlxhblux3] {
        border-color: #2f7df6;
        box-shadow: 0 10px 24px rgba(47, 125, 246, .12);
    }

        .attendance-kpi-card.featured[b-fvlxhblux3]::before {
            opacity: 1;
        }

.kpi-icon-wrap[b-fvlxhblux3] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.kpi-icon[b-fvlxhblux3] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    padding: 11px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .16);
}

.attendance-kpi-card.blue .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-cong-chuan .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #1473ff 0%, #2563eb 100%);
}

.attendance-kpi-card.green .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-ngay-di-lam .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
}

.attendance-kpi-card.indigo .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-cong-tinh-luong .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
}

.attendance-kpi-card.purple .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-tang-ca .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.attendance-kpi-card.orange .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-nghi-phep .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.attendance-kpi-card.amber .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-di-tre-ve-som .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.attendance-kpi-card.red .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-khong-cham-cong .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #fb3f5f 0%, #dc2626 100%);
}

.kpi-content[b-fvlxhblux3] {
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.kpi-title[b-fvlxhblux3] {
    min-width: 0;
    color: #40536f;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

    .kpi-title > span:first-child[b-fvlxhblux3] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.kpi-info[b-fvlxhblux3] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    color: #64748b;
    display: inline-flex;
}

.kpi-value-row[b-fvlxhblux3] {
    margin-top: 9px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

    .kpi-value-row strong[b-fvlxhblux3] {
        color: #1e3355;
        font-size: 19px;
        font-weight: 760;
        line-height: 1.05;
        letter-spacing: -0.015em;
    }

    .kpi-value-row small[b-fvlxhblux3] {
        color: #1e3355;
        font-size: 12px;
        font-weight: 650;
        line-height: 1;
    }

.kpi-note[b-fvlxhblux3] {
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    margin-top: 9px;
    padding: 0 9px;
    border-radius: 999px;
    color: #059669;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.kpi-note-icon[b-fvlxhblux3] {
    width: 12px;
    height: 12px;
    min-width: 12px;
    color: #059669;
    display: inline-flex;
}

/* Badge nghỉ phép trong mock là cam nhẹ */
.attendance-kpi-card.kpi-nghi-phep .kpi-note[b-fvlxhblux3] {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fed7aa;
}

.attendance-kpi-card.kpi-nghi-phep .kpi-note-icon[b-fvlxhblux3] {
    color: #ea580c;
}

/* Card không chấm công giữ cảm giác cảnh báo nhưng không đỏ quá mạnh */
.attendance-kpi-card.kpi-khong-cham-cong[b-fvlxhblux3] {
    border-color: #fecaca;
}

    .attendance-kpi-card.kpi-khong-cham-cong:hover[b-fvlxhblux3] {
        border-color: #fca5a5;
    }

/* Responsive giữ 7 card khi đủ rộng, xuống dòng khi màn nhỏ */
@media (max-width: 1560px) {
    .attendance-kpi-grid[b-fvlxhblux3] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .attendance-kpi-grid[b-fvlxhblux3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .attendance-kpi-grid[b-fvlxhblux3] {
        grid-template-columns: 1fr;
    }

    .attendance-kpi-card[b-fvlxhblux3] {
        min-height: 82px;
    }
}

/* ============================================================
   KPI ICON FIX - SÁT MOCK HÌNH 2
   Áp dụng cho KPI card + icon tổng quan kỳ công
============================================================ */

.attendance-kpi-card.kpi-cong-chuan .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-cong-tinh-luong .kpi-icon[b-fvlxhblux3],
.attendance-kpi-card.kpi-tang-ca .kpi-icon[b-fvlxhblux3] {
    padding: 9px;
}

    .attendance-kpi-card.kpi-cong-chuan .kpi-icon svg[b-fvlxhblux3],
    .attendance-kpi-card.kpi-cong-tinh-luong .kpi-icon svg[b-fvlxhblux3],
    .attendance-kpi-card.kpi-tang-ca .kpi-icon svg[b-fvlxhblux3] {
        transform: scale(1.08);
        transform-origin: center;
    }

/* Công chuẩn: icon xanh kiểu calendar/task */
.attendance-kpi-card.kpi-cong-chuan .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #1473ff 0%, #2563eb 100%);
}

/* Công tính lương: icon xanh tím, giống card nổi bật trong mock */
.attendance-kpi-card.kpi-cong-tinh-luong .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
}

/* Tăng ca: icon tím clock gọn hơn */
.attendance-kpi-card.kpi-tang-ca .kpi-icon[b-fvlxhblux3] {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Icon trong Tổng quan kỳ công dùng chung SVG, cần nét gọn hơn */
.overview-row .overview-svg[b-fvlxhblux3] {
    width: 15px;
    height: 15px;
    min-width: 15px;
}

    .overview-row .overview-svg svg[b-fvlxhblux3] {
        transform: scale(1.04);
        transform-origin: center;
    }

/* Riêng dòng Công chuẩn / Công tính lương / Tăng ca trong tổng quan nhìn rõ hơn */
.overview-row.featured .overview-svg[b-fvlxhblux3] {
    color: #1473ff;
}

.overview-row .overview-svg svg path[b-fvlxhblux3] {
    vector-effect: non-scaling-stroke;
}

/* ============================================================
   OVERVIEW - CHỈNH SÁT MOCK
============================================================ */

.attendance-overview-layout[b-fvlxhblux3] {
    display: grid;
    grid-template-columns: minmax(420px, 1.03fr) minmax(560px, 1.27fr) minmax(340px, .88fr);
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}

.attendance-side-stack[b-fvlxhblux3] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
    min-width: 0;
}

.attendance-panel[b-fvlxhblux3] {
    border-radius: 16px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .035);
    padding: 16px;
    min-width: 0;
}

    .attendance-panel.overview[b-fvlxhblux3] {
        min-height: 292px;
    }

    .attendance-panel.chart[b-fvlxhblux3] {
        min-height: 292px;
        padding: 16px 18px 14px;
        display: flex;
        flex-direction: column;
    }

    .attendance-panel.note[b-fvlxhblux3] {
        min-height: 152px;
    }

    .attendance-panel.support[b-fvlxhblux3] {
        min-height: 128px;
    }

.panel-title[b-fvlxhblux3] {
    color: #1e3355;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    margin-bottom: 14px;
}

.overview-list[b-fvlxhblux3] {
    display: grid;
    gap: 0;
}

.overview-row[b-fvlxhblux3] {
    min-height: 27px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #edf2f7;
    color: #40536f;
}

    .overview-row:last-child[b-fvlxhblux3] {
        border-bottom: none;
    }

    .overview-row.featured[b-fvlxhblux3] {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 8px;
        background: #eef6ff;
        color: #1473ff;
    }

.overview-svg[b-fvlxhblux3] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .88;
}

.overview-row.featured .overview-svg[b-fvlxhblux3] {
    opacity: 1;
}

.overview-info[b-fvlxhblux3] {
    width: 13px;
    height: 13px;
    min-width: 13px;
    color: #8da0b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
}

.overview-row.featured .overview-info[b-fvlxhblux3] {
    color: #1473ff;
    opacity: .95;
}

.overview-name[b-fvlxhblux3] {
    color: inherit;
    font-size: 13px;
    font-weight: 600;
}

.overview-value[b-fvlxhblux3] {
    color: #1e3355;
    font-size: 13px;
    font-weight: 625;
    white-space: nowrap;
}

.overview-row.featured .overview-value[b-fvlxhblux3] {
    color: #1473ff;
}

/* ============================================================
   DONUT - CHỈNH SÁT MOCK
============================================================ */

.chart-content[b-fvlxhblux3] {
    flex: 1;
    min-height: 170px;
    display: grid;
    grid-template-columns: 190px 420px;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

.donut-wrap[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-chart[b-fvlxhblux3] {
    width: 164px;
    height: 164px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-inner[b-fvlxhblux3] {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: #ffffff;
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px #edf2f7;
}

    .donut-inner strong[b-fvlxhblux3] {
        color: #1e3355;
        font-size: 22px;
        font-weight: 760;
        line-height: 1.1;
    }

    .donut-inner span[b-fvlxhblux3] {
        margin-top: 6px;
        color: #40536f;
        font-size: 12px;
        font-weight: 650;
    }

.chart-legend[b-fvlxhblux3] {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 11px;
    align-content: center;
    justify-self: start;
}

.legend-row[b-fvlxhblux3] {
    display: grid;
    grid-template-columns: 11px minmax(150px, 1fr) 74px 48px;
    gap: 9px;
    align-items: center;
    color: #40536f;
    font-size: 13px;
    font-weight: 600;
}

.legend-dot[b-fvlxhblux3] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

    .legend-dot.blue[b-fvlxhblux3] {
        background: #2f7df6;
    }

    .legend-dot.orange[b-fvlxhblux3] {
        background: #f59e0b;
    }

    .legend-dot.purple[b-fvlxhblux3] {
        background: #7c3aed;
    }

    .legend-dot.green[b-fvlxhblux3] {
        background: #16a34a;
    }

    .legend-dot.red[b-fvlxhblux3] {
        background: #ef4444;
    }

    .legend-dot.slate[b-fvlxhblux3] {
        background: #94a3b8;
    }

.legend-name[b-fvlxhblux3] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-value[b-fvlxhblux3],
.legend-percent[b-fvlxhblux3] {
    color: #1e3355;
    font-size: 13px;
    font-weight: 625;
    white-space: nowrap;
}

.legend-value[b-fvlxhblux3] {
    text-align: right;
}

.legend-percent[b-fvlxhblux3] {
    text-align: right;
}

.completion-message[b-fvlxhblux3] {
    min-height: 48px;
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #d9e9ff;
    background: #f8fbff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-svg[b-fvlxhblux3] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.completion-message b[b-fvlxhblux3] {
    display: block;
    color: #1473ff;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.completion-message span[b-fvlxhblux3] {
    display: block;
    margin-top: 3px;
    color: #40536f;
    font-size: 12px;
    font-weight: 500;
}

/* ============================================================
   NOTE + SUPPORT
============================================================ */

.note-box[b-fvlxhblux3] {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #c8f3dc;
    background: #ecfdf5;
    color: #1e3355;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.note-svg[b-fvlxhblux3] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.note-box b[b-fvlxhblux3] {
    display: block;
    margin-bottom: 8px;
    color: #1e3355;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.note-box span[b-fvlxhblux3] {
    display: block;
    color: #1e3355;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
}

.note-link[b-fvlxhblux3] {
    margin-top: 11px;
    border: none;
    background: transparent;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .note-link span[b-fvlxhblux3] {
        width: 14px;
        height: 14px;
        display: inline-flex;
    }

.attendance-panel.support p[b-fvlxhblux3] {
    margin: 0 0 10px;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.support-main-btn[b-fvlxhblux3],
.support-sub-btn[b-fvlxhblux3] {
    min-height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.support-main-btn[b-fvlxhblux3] {
    width: 100%;
    color: #ffffff;
    background: #1473ff;
    border: 1px solid #1473ff;
    box-shadow: 0 8px 16px rgba(20, 115, 255, .16);
}

.support-sub-btn[b-fvlxhblux3] {
    margin-top: 8px;
    padding: 0 12px;
    color: #1473ff;
    background: #ffffff;
    border: 1px solid #bfdbfe;
}

    .support-main-btn span[b-fvlxhblux3],
    .support-sub-btn span[b-fvlxhblux3] {
        width: 15px;
        height: 15px;
        display: inline-flex;
    }

/* ============================================================
   TABS + TABLE
============================================================ */

.attendance-tabs-card[b-fvlxhblux3] {
    border-radius: 16px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .035);
    overflow: hidden;
}

.attendance-tabs[b-fvlxhblux3] {
    height: 48px;
    border-bottom: 1px solid #e8edf5;
    display: flex;
    align-items: stretch;
    background: #ffffff;
}

    .attendance-tabs button[b-fvlxhblux3] {
        min-width: 160px;
        padding: 0 18px;
        border: none;
        border-right: 1px solid #edf2f7;
        background: #ffffff;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        position: relative;
    }

        .attendance-tabs button.active[b-fvlxhblux3] {
            color: #1473ff;
            background: #ffffff;
        }

            .attendance-tabs button.active[b-fvlxhblux3]::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px;
                height: 3px;
                background: #1473ff;
            }

        .attendance-tabs button span[b-fvlxhblux3] {
            width: 17px;
            height: 17px;
            display: inline-flex;
        }

.detail-toolbar[b-fvlxhblux3] {
    min-height: 45px;
    padding: 8px 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.detail-date-range[b-fvlxhblux3] {
    color: #1473ff;
    font-size: 13px;
    font-weight: 750;
}

    .detail-date-range span[b-fvlxhblux3] {
        color: #40536f;
        font-weight: 650;
    }

.detail-timezone[b-fvlxhblux3] {
    justify-self: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #1473ff;
    background: #f0f7ff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

    .detail-timezone span[b-fvlxhblux3] {
        width: 14px;
        height: 14px;
        display: inline-flex;
    }

.detail-actions[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-actions button[b-fvlxhblux3] {
        min-height: 32px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #40536f;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
    }

    .detail-actions span[b-fvlxhblux3] {
        width: 15px;
        height: 15px;
        display: inline-flex;
    }

.attendance-table-scroll[b-fvlxhblux3] {
    width: 100%;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .attendance-table-scroll[b-fvlxhblux3]::-webkit-scrollbar {
        height: 10px;
    }

    .attendance-table-scroll[b-fvlxhblux3]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .attendance-table-scroll[b-fvlxhblux3]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

.attendance-detail-table[b-fvlxhblux3] {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid #e8edf5;
    border-radius: 10px;
    overflow: hidden;
}

    .attendance-detail-table thead th[b-fvlxhblux3] {
        height: 38px;
        padding: 7px 10px;
        background: #f6f7fb;
        color: #40536f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid #eaedf4;
        border-bottom: 1px solid #e8edf5;
        white-space: nowrap;
    }

        .attendance-detail-table thead th:last-child[b-fvlxhblux3] {
            border-right: none;
        }

    .attendance-detail-table tbody td[b-fvlxhblux3] {
        height: 38px;
        padding: 7px 10px;
        background: #ffffff;
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

        .attendance-detail-table tbody td:last-child[b-fvlxhblux3] {
            border-right: none;
        }

    .attendance-detail-table tbody tr:hover td[b-fvlxhblux3] {
        background: #fbfcff;
    }

    .attendance-detail-table tbody tr.warning-row td[b-fvlxhblux3] {
        background: #fff7e8;
    }

    .attendance-detail-table tbody tr.danger-row td[b-fvlxhblux3] {
        background: #fff1f2;
    }

.late-time[b-fvlxhblux3] {
    color: #ea580c !important;
    font-weight: 700 !important;
}

.daily-status[b-fvlxhblux3] {
    min-height: 22px;
    min-width: 74px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

    .daily-status.work[b-fvlxhblux3] {
        color: #059669;
        background: #dcfce7;
    }

    .daily-status.late[b-fvlxhblux3],
    .daily-status.early[b-fvlxhblux3],
    .daily-status.warning[b-fvlxhblux3] {
        color: #ea580c;
        background: #ffedd5;
    }

    .daily-status.leave[b-fvlxhblux3] {
        color: #7c3aed;
        background: #ede9fe;
    }

    .daily-status.business[b-fvlxhblux3] {
        color: #2563eb;
        background: #dbeafe;
    }

    .daily-status.holiday[b-fvlxhblux3],
    .daily-status.normal[b-fvlxhblux3] {
        color: #64748b;
        background: #f1f5f9;
    }

    .daily-status.missing[b-fvlxhblux3] {
        color: #dc2626;
        background: #fee2e2;
    }

.note-cell[b-fvlxhblux3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #40536f;
    font-size: 13px;
    font-weight: 500;
}

.attendance-pagination[b-fvlxhblux3] {
    min-height: 48px;
    padding: 9px 16px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
}

    .attendance-pagination > span[b-fvlxhblux3] {
        color: #53647f;
        font-size: 13px;
        font-weight: 500;
    }

.pager[b-fvlxhblux3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pager button[b-fvlxhblux3] {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #40536f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

        .pager button span[b-fvlxhblux3],
        .pager button svg[b-fvlxhblux3] {
            width: 14px;
            height: 14px;
        }

        .pager button.active[b-fvlxhblux3] {
            color: #1473ff;
            border-color: #1473ff;
            background: #eef6ff;
        }

        .pager button:disabled[b-fvlxhblux3] {
            opacity: .45;
            cursor: not-allowed;
        }

.attendance-pagination select[b-fvlxhblux3] {
    height: 32px;
    min-width: 94px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #dbe4ef;
    background: #ffffff;
    color: #1e3355;
    font-size: 12.5px;
    font-weight: 700;
    outline: none;
}

/* ============================================================
   RELATED FORMS
============================================================ */

.related-form-list[b-fvlxhblux3] {
    padding: 16px;
    display: grid;
    gap: 10px;
}

.related-form-card[b-fvlxhblux3] {
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e8edf5;
    background: #ffffff;
    display: grid;
    grid-template-columns: 42px minmax(0, 1.2fr) minmax(0, 1fr) 130px minmax(0, 1.2fr);
    gap: 14px;
    align-items: center;
}

.related-form-icon[b-fvlxhblux3] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #1473ff;
    background: #eef6ff;
    padding: 10px;
    display: inline-flex;
}

.related-form-card b[b-fvlxhblux3] {
    display: block;
    color: #1e3355;
    font-size: 13px;
    font-weight: 700;
}

.related-form-card span[b-fvlxhblux3],
.related-form-card small[b-fvlxhblux3] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.related-status[b-fvlxhblux3] {
    width: fit-content;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    color: #059669 !important;
    background: #dcfce7;
    display: inline-flex !important;
    align-items: center;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.related-note[b-fvlxhblux3] {
    color: #40536f;
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   EMPTY
============================================================ */

.attendance-empty[b-fvlxhblux3] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
    display: grid;
    gap: 8px;
    justify-items: center;
}

    .attendance-empty span[b-fvlxhblux3] {
        width: 38px;
        height: 38px;
        color: #a7b3c5;
        display: inline-flex;
    }

    .attendance-empty b[b-fvlxhblux3] {
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .attendance-empty small[b-fvlxhblux3] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1560px) {   

    .attendance-overview-layout[b-fvlxhblux3] {
        grid-template-columns: minmax(410px, .98fr) minmax(540px, 1.18fr);
    }

    .attendance-side-stack[b-fvlxhblux3] {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .chart-content[b-fvlxhblux3] {
        grid-template-columns: 190px minmax(360px, 420px);
        justify-content: center;
    }
}

@media (max-width: 1366px) {
    .my-attendance-title-wrap h2[b-fvlxhblux3] {
        font-size: 21.5px;
    }

    .employee-attendance-card[b-fvlxhblux3] {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .employee-main-block[b-fvlxhblux3] {
        border-right: none;
        border-bottom: 1px solid #e8edf5;
        padding-right: 0;
        padding-bottom: 16px;
    }

    .employee-info-strip[b-fvlxhblux3] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .attendance-overview-layout[b-fvlxhblux3] {
        grid-template-columns: 1fr;
    }

    .attendance-side-stack[b-fvlxhblux3] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .my-attendance-header[b-fvlxhblux3],
    .detail-toolbar[b-fvlxhblux3] {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .my-attendance-actions[b-fvlxhblux3] {
        justify-content: flex-start;
    }

    .employee-info-strip[b-fvlxhblux3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-content[b-fvlxhblux3] {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .chart-legend[b-fvlxhblux3] {
        max-width: 100%;
        justify-self: stretch;
    }

    .attendance-side-stack[b-fvlxhblux3] {
        grid-template-columns: 1fr;
    }

    .attendance-tabs[b-fvlxhblux3] {
        overflow-x: auto;
    }

    .attendance-pagination[b-fvlxhblux3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .my-attendance-container[b-fvlxhblux3] {
        padding: 16px;
    }

    .my-attendance-title-wrap h2[b-fvlxhblux3] {
        font-size: 19px;
        font-weight: 750;
    }

    .attendance-kpi-grid[b-fvlxhblux3],
    .employee-info-strip[b-fvlxhblux3] {
        grid-template-columns: 1fr;
    }

    .employee-info-item[b-fvlxhblux3] {
        border-right: none;
        border-bottom: 1px solid #eef2f7;
        padding: 12px 0;
    }

        .employee-info-item:last-child[b-fvlxhblux3] {
            border-bottom: none;
        }

    .my-attendance-actions[b-fvlxhblux3] {
        flex-direction: column;
        align-items: stretch;
    }

    .period-select-shell[b-fvlxhblux3],
    .period-picker-btn[b-fvlxhblux3],
    .attendance-action-btn[b-fvlxhblux3] {
        width: 100%;
    }

    .period-month-panel[b-fvlxhblux3] {
        left: 0;
        right: auto;
        width: min(238px, calc(100vw - 56px));
    }
}
/* /Components/Pages/TongHopCongCuaToi/PhieuLienQuanTab.razor.rz.scp.css */
.related-tab-panel[b-bp9vqn1w9y] {
    padding: 18px 16px 16px;
    background: #ffffff;
    color: #24395c;
    font-size: 13px;
    font-weight: 500;
}

    .related-tab-panel[b-bp9vqn1w9y]  svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor !important;
    }

.related-info-icon[b-bp9vqn1w9y]  svg {
    fill: none !important;
}

.related-info-icon[b-bp9vqn1w9y]  circle,
.related-info-icon[b-bp9vqn1w9y]  path {
    vector-effect: non-scaling-stroke;
}

/* HEADER */

.related-tab-header[b-bp9vqn1w9y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: 18px;
    align-items: start;
    margin-bottom: 14px;
}

.related-title-block[b-bp9vqn1w9y] {
    min-width: 0;
    padding-top: 2px;
}

    .related-title-block h3[b-bp9vqn1w9y] {
        margin: 0;
        color: #1e3355;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.35;
    }

    .related-title-block p[b-bp9vqn1w9y] {
        margin: 7px 0 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
    }

.related-info-box[b-bp9vqn1w9y] {
    min-height: 82px;
    padding: 15px 18px;
    border-radius: 13px;
    border: 1px solid #cfe2ff;
    background: linear-gradient(135deg, #f8fbff 0%, #f4f8ff 100%);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 8px 18px rgba(20, 115, 255, .035);
}

.related-info-icon[b-bp9vqn1w9y] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: #1473ff;
    display: inline-flex;
    margin-top: 1px;
}

.related-info-box b[b-bp9vqn1w9y] {
    display: block;
    color: #1e3355;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.related-info-box span[b-bp9vqn1w9y] {
    display: block;
    margin-top: 8px;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

/* SUMMARY */

.related-summary-grid[b-bp9vqn1w9y] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 2.3fr);
    gap: 12px;
    margin-bottom: 14px;
}

.related-summary-card[b-bp9vqn1w9y] {
    min-height: 96px;
    padding: 16px 17px;
    border-radius: 14px;
    border: 1px solid #e2eaf5;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .025);
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .related-summary-card:hover[b-bp9vqn1w9y] {
        transform: translateY(-1px);
        border-color: #d5e2f2;
        box-shadow: 0 10px 22px rgba(17, 24, 39, .045);
    }

.related-summary-icon[b-bp9vqn1w9y] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 13px;
    padding: 11px;
    display: inline-flex;
}

.related-summary-card.leave .related-summary-icon[b-bp9vqn1w9y] {
    color: #7c3aed;
    background: #f3e8ff;
}

.related-summary-card.overtime .related-summary-icon[b-bp9vqn1w9y] {
    color: #f97316;
    background: #fff4e8;
}

.related-summary-card.business .related-summary-icon[b-bp9vqn1w9y] {
    color: #2563eb;
    background: #eff6ff;
}

.related-summary-card.supplement .related-summary-icon[b-bp9vqn1w9y] {
    color: #059669;
    background: #ecfdf5;
}

.related-summary-card.total .related-summary-icon[b-bp9vqn1w9y] {
    color: #64748b;
    background: #f1f5f9;
}

.related-summary-card small[b-bp9vqn1w9y] {
    display: block;
    color: #53647f;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.related-summary-card strong[b-bp9vqn1w9y] {
    display: block;
    margin-top: 6px;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1;
}

.related-summary-card em[b-bp9vqn1w9y] {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
}

.related-summary-card.overtime em[b-bp9vqn1w9y],
.related-summary-card.supplement em[b-bp9vqn1w9y],
.related-summary-card.total em[b-bp9vqn1w9y] {
    color: #059669;
}

.related-summary-card.leave em[b-bp9vqn1w9y] {
    color: #64748b;
}

/* FILTER */

.related-filter-bar[b-bp9vqn1w9y] {
    min-height: 68px;
    padding: 12px;
    margin-bottom: 0;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(450px, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .018);
}

.related-filter-left[b-bp9vqn1w9y],
.related-filter-right[b-bp9vqn1w9y] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.related-filter-right[b-bp9vqn1w9y] {
    justify-content: flex-end;
}

.related-form-group[b-bp9vqn1w9y] {
    min-width: 0;
    position: relative;
    overflow: visible;
}

.related-form-group-inline[b-bp9vqn1w9y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 250px;
}

    .related-form-group-inline label[b-bp9vqn1w9y] {
        margin: 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 750;
        line-height: 1;
        white-space: nowrap;
    }

/* SELECT DAY */

.related-select-dropdown[b-bp9vqn1w9y] {
    position: relative;
    width: 100%;
    min-width: 0;
    z-index: 1;
}

    .related-select-dropdown.is-open[b-bp9vqn1w9y] {
        z-index: 1600;
    }

.related-select-dropdown__control[b-bp9vqn1w9y] {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 10px 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid #d7e3f2 !important;
    background: #ffffff !important;
    color: #425b7f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .related-select-dropdown__control:hover[b-bp9vqn1w9y] {
        border-color: #bfd0e6 !important;
        background: #fbfdff !important;
    }

.related-select-dropdown.is-open .related-select-dropdown__control[b-bp9vqn1w9y] {
    border-color: #7fb3ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.related-select-dropdown__value[b-bp9vqn1w9y] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    display: block !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.related-select-dropdown__clear[b-bp9vqn1w9y] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .related-select-dropdown__clear:hover[b-bp9vqn1w9y] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

.related-select-dropdown__chevron[b-bp9vqn1w9y] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    color: #64748b;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

    .related-select-dropdown__chevron[b-bp9vqn1w9y]::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
        transform: translateY(1px);
    }

.related-select-dropdown__panel[b-bp9vqn1w9y] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 260px;
    max-width: min(260px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
    z-index: 1700;
}

.related-day-panel[b-bp9vqn1w9y] {
    width: 260px;
}

.related-select-dropdown__list[b-bp9vqn1w9y] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

    .related-select-dropdown__list[b-bp9vqn1w9y]::-webkit-scrollbar {
        width: 8px;
    }

    .related-select-dropdown__list[b-bp9vqn1w9y]::-webkit-scrollbar-thumb {
        background: #dbe4f0;
        border-radius: 999px;
    }

.related-select-dropdown__option[b-bp9vqn1w9y] {
    position: relative;
    min-height: 44px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .related-select-dropdown__option[b-bp9vqn1w9y]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .related-select-dropdown__option:hover[b-bp9vqn1w9y] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .related-select-dropdown__option.is-selected[b-bp9vqn1w9y] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .related-select-dropdown__option.is-selected[b-bp9vqn1w9y]::before {
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        }

.related-select-dropdown__option-icon[b-bp9vqn1w9y] {
    width: 28px !important;
    height: 24px !important;
    min-width: 28px;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
    flex-shrink: 0;
}

.related-select-dropdown__option-content[b-bp9vqn1w9y] {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    gap: 3px;
}

.related-select-dropdown__option-text[b-bp9vqn1w9y] {
    color: inherit;
    display: block !important;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.related-select-dropdown__option-code[b-bp9vqn1w9y] {
    color: #7b8aa2;
    display: block !important;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* SEARCH */

.related-search-box[b-bp9vqn1w9y] {
    width: min(620px, 100%);
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 360px;
}

    .related-search-box:focus-within[b-bp9vqn1w9y] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(20, 115, 255, .08);
    }

    .related-search-box span[b-bp9vqn1w9y] {
        width: 15px;
        height: 15px;
        min-width: 15px;
        color: #94a3b8;
        display: inline-flex;
    }

    .related-search-box input[b-bp9vqn1w9y] {
        width: 100%;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        color: #40536f;
        font-size: 12.5px;
        font-weight: 600;
    }

        .related-search-box input[b-bp9vqn1w9y]::placeholder {
            color: #9aa8bb;
            font-weight: 500;
        }

.related-refresh-btn[b-bp9vqn1w9y] {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #cfe0f5;
    background: #ffffff;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .related-refresh-btn:hover[b-bp9vqn1w9y] {
        background: #f8fbff;
        border-color: #b9d3ff;
        box-shadow: 0 0 0 3px rgba(20, 115, 255, .06);
    }

    .related-refresh-btn span[b-bp9vqn1w9y] {
        width: 15px;
        height: 15px;
        display: inline-flex;
    }

/* TABLE */

.related-table-card[b-bp9vqn1w9y] {
    margin-top: 0;
    background: #ffffff;
    overflow: visible;
}

.related-table-top[b-bp9vqn1w9y] {
    min-height: 58px;
    padding: 14px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
}

.related-table-count[b-bp9vqn1w9y] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

.related-table-paging[b-bp9vqn1w9y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

    .related-table-paging[b-bp9vqn1w9y]  .pagination,
    .related-table-paging[b-bp9vqn1w9y]  .paging,
    .related-table-paging[b-bp9vqn1w9y]  .pager {
        margin: 0;
    }

    .related-table-paging[b-bp9vqn1w9y]  select {
        height: 34px;
        min-width: 86px;
        padding: 0 28px 0 10px;
        border-radius: 8px;
        border: 1px solid #dbe4ef;
        background: #ffffff;
        color: #1e3355;
        font-size: 12.5px;
        font-weight: 600;
        outline: none;
    }

    .related-table-paging[b-bp9vqn1w9y]  button {
        font-weight: 600;
    }

.related-table-scroll[b-bp9vqn1w9y] {
    width: 100%;
    border: 1px solid #e2eaf5;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

    .related-table-scroll[b-bp9vqn1w9y]::-webkit-scrollbar {
        height: 10px;
    }

    .related-table-scroll[b-bp9vqn1w9y]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .related-table-scroll[b-bp9vqn1w9y]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

.related-table[b-bp9vqn1w9y] {
    width: 100%;
    min-width: 1700px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .related-table thead th[b-bp9vqn1w9y] {
        height: 42px;
        padding: 8px 10px;
        background: #f6f7fb;
        color: #1e3355;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid #eaedf4;
        border-bottom: 1px solid #e8edf5;
        white-space: nowrap;
    }

        .related-table thead th:last-child[b-bp9vqn1w9y] {
            border-right: none;
        }

    .related-table tbody td[b-bp9vqn1w9y] {
        height: 52px;
        padding: 8px 10px;
        background: #ffffff;
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        vertical-align: middle;
        text-align: center;
        border-right: 1px solid #eef1f6;
        border-bottom: 1px solid #eef1f6;
    }

        .related-table tbody td:last-child[b-bp9vqn1w9y] {
            border-right: none;
        }

    .related-table tbody tr:last-child td[b-bp9vqn1w9y] {
        border-bottom: none;
    }

    .related-table tbody tr:hover td[b-bp9vqn1w9y] {
        background: #fbfcff;
    }

/* CELLS */

.related-type-cell[b-bp9vqn1w9y] {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
}

    .related-type-cell span:last-child[b-bp9vqn1w9y] {
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
    }

.related-type-icon[b-bp9vqn1w9y] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    padding: 7px;
    display: inline-flex;
}

    .related-type-icon.leave[b-bp9vqn1w9y] {
        color: #7c3aed;
        background: #f3e8ff;
    }

    .related-type-icon.overtime[b-bp9vqn1w9y] {
        color: #f97316;
        background: #fff4e8;
    }

    .related-type-icon.business[b-bp9vqn1w9y] {
        color: #2563eb;
        background: #eff6ff;
    }

    .related-type-icon.supplement[b-bp9vqn1w9y] {
        color: #059669;
        background: #ecfdf5;
    }

    .related-type-icon.default[b-bp9vqn1w9y] {
        color: #64748b;
        background: #f1f5f9;
    }

.related-code[b-bp9vqn1w9y] {
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.related-date-cell[b-bp9vqn1w9y] {
    display: grid;
    gap: 3px;
    justify-items: center;
    line-height: 1.25;
}

    .related-date-cell b[b-bp9vqn1w9y] {
        color: #405b78;
        font-size: 13px;
        font-weight: 500;
    }

    .related-date-cell small[b-bp9vqn1w9y] {
        color: #64748b;
        font-size: 12px;
        font-weight: 500;
    }

.related-time-range[b-bp9vqn1w9y] {
    color: #405b78;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.related-content-cell[b-bp9vqn1w9y] {
    text-align: left !important;
    color: #334155 !important;
}

.related-impact[b-bp9vqn1w9y] {
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

    .related-impact.positive[b-bp9vqn1w9y] {
        color: #059669;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
    }

    .related-impact.negative[b-bp9vqn1w9y] {
        color: #ef4444;
        background: #fff1f2;
        border: 1px solid #fecdd3;
    }

    .related-impact.neutral[b-bp9vqn1w9y] {
        color: #64748b;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

.related-approve-status[b-bp9vqn1w9y] {
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    color: #059669;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.related-note-cell[b-bp9vqn1w9y] {
    max-width: 170px;
    color: #40536f;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}

.related-view-btn[b-bp9vqn1w9y] {
    height: 30px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: #1473ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px;
    transition: background-color .15s ease;
}

    .related-view-btn:hover[b-bp9vqn1w9y] {
        background: #eff6ff;
    }

    .related-view-btn span[b-bp9vqn1w9y] {
        width: 15px;
        height: 15px;
        display: inline-flex;
    }

/* EMPTY */

.related-empty[b-bp9vqn1w9y] {
    padding: 42px 20px;
    text-align: center;
    color: #8593a9;
    display: grid;
    gap: 8px;
    justify-items: center;
}

    .related-empty span[b-bp9vqn1w9y] {
        width: 38px;
        height: 38px;
        color: #a7b3c5;
        display: inline-flex;
    }

    .related-empty b[b-bp9vqn1w9y] {
        color: #334155;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .related-empty small[b-bp9vqn1w9y] {
        color: #8593a9;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
    }

/* RESPONSIVE */

@media (max-width: 1560px) {
    .related-summary-grid[b-bp9vqn1w9y] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .related-summary-card.total[b-bp9vqn1w9y] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1366px) {
    .related-tab-header[b-bp9vqn1w9y] {
        grid-template-columns: 1fr;
    }

    .related-summary-grid[b-bp9vqn1w9y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .related-summary-card.total[b-bp9vqn1w9y] {
        grid-column: auto;
    }

    .related-filter-bar[b-bp9vqn1w9y] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .related-filter-right[b-bp9vqn1w9y] {
        justify-content: flex-start;
    }

    .related-search-box[b-bp9vqn1w9y] {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .related-filter-left[b-bp9vqn1w9y],
    .related-filter-right[b-bp9vqn1w9y] {
        flex-direction: column;
        align-items: stretch;
    }

    .related-form-group-inline[b-bp9vqn1w9y] {
        min-width: 0;
    }

    .related-search-box[b-bp9vqn1w9y] {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .related-tab-panel[b-bp9vqn1w9y] {
        padding: 12px;
    }

    .related-summary-grid[b-bp9vqn1w9y] {
        grid-template-columns: 1fr;
    }

    .related-table-top[b-bp9vqn1w9y] {
        align-items: stretch;
        flex-direction: column;
    }

    .related-table-count[b-bp9vqn1w9y] {
        white-space: normal;
    }

    .related-table-paging[b-bp9vqn1w9y] {
        justify-content: flex-start;
        overflow-x: auto;
    }
}
/* /Components/Pages/TongHopCongThang/Index.razor.rz.scp.css */
/* ============================================================
   TONG HOP CONG THANG - FINAL CLEAN CSS
   Đồng bộ UI với Bảng lương nhân viên / Chi tiết bảng lương
============================================================ */

/* ============================================================
   1. PAGE LAYOUT
============================================================ */

.thcct-page[b-4obtlqem0q] {
    --thcct-text: #24395c;
    --thcct-title: #1e3355;
    --thcct-muted: #8492a8;
    --thcct-border: #e8edf5;
    --thcct-border-soft: #eef2f7;
    --thcct-bg: #f6f8fc;
    --thcct-card-bg: #ffffff;
    --thcct-blue: #2563eb;
    --thcct-green: #059669;
    --thcct-red: #ef4444;
    --thcct-purple: #7c3aed;
    --thcct-amber: #d97706;
    --thcct-sticky-top: 0px;
    --thcct-table-min-width: 1500px;
    padding: 10px 0 18px;
    background: var(--thcct-bg);
    color: var(--thcct-text);
    font-size: 13px;
    font-weight: 500;
    overflow: visible;
}

.thcct-container[b-4obtlqem0q] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 20px 22px 18px;
    background: var(--thcct-card-bg);
    border: 1px solid var(--thcct-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .03);
    overflow: visible;
}

/* ============================================================
   2. HEADER
============================================================ */

.thcct-head[b-4obtlqem0q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--thcct-border-soft);
}

.thcct-head-left[b-4obtlqem0q] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.thcct-back[b-4obtlqem0q] {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6a88cc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .thcct-back:hover[b-4obtlqem0q] {
        background: #eff6ff;
        color: var(--thcct-blue);
        transform: translateX(-1px);
    }

    .thcct-back i[b-4obtlqem0q] {
        font-size: 22px;
        line-height: 1;
    }

.thcct-head-text h1[b-4obtlqem0q] {
    margin: 0;
    color: var(--thcct-title);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.005em;
}

.thcct-sub[b-4obtlqem0q] {
    margin-top: 6px;
    color: var(--thcct-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.thcct-head-actions[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ============================================================
   3. ACTION BUTTONS
============================================================ */

.thcct-action-btn[b-4obtlqem0q] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .thcct-action-btn:hover:not(:disabled)[b-4obtlqem0q] {
        transform: translateY(-1px);
    }

    .thcct-action-btn:active:not(:disabled)[b-4obtlqem0q] {
        transform: translateY(0);
        box-shadow: none;
    }

    .thcct-action-btn:disabled[b-4obtlqem0q] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.thcct-action-icon[b-4obtlqem0q] {
    width: 15px;
    height: 15px;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
}

    .thcct-action-icon i[b-4obtlqem0q] {
        font-size: 15px;
        line-height: 1;
    }

.thcct-action-icon-text[b-4obtlqem0q] {
    width: auto;
    min-width: 18px;
    height: 15px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.thcct-action-chevron[b-4obtlqem0q] {
    margin-left: -2px;
    font-size: 15px;
    line-height: 1;
}

.thcct-action-excel[b-4obtlqem0q],
.thcct-action-close[b-4obtlqem0q] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}

    .thcct-action-excel:hover:not(:disabled)[b-4obtlqem0q],
    .thcct-action-close:hover:not(:disabled)[b-4obtlqem0q] {
        color: #065f46;
        background: #d1fae5;
        border-color: #4ade80;
        box-shadow: 0 6px 14px rgba(5, 150, 105, .12);
    }

    .thcct-action-excel:focus-visible[b-4obtlqem0q],
    .thcct-action-close:focus-visible[b-4obtlqem0q] {
        outline: none;
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
    }

.thcct-action-import[b-4obtlqem0q] {
    color: #6d28d9;
    border-color: #d8b4fe;
    background: #ffffff;
}

    .thcct-action-import:hover:not(:disabled)[b-4obtlqem0q] {
        color: #5b21b6;
        background: #faf5ff;
        border-color: #c4b5fd;
        box-shadow: 0 6px 14px rgba(109, 40, 217, .10);
    }

    .thcct-action-import:focus-visible[b-4obtlqem0q] {
        outline: none;
        border-color: #a78bfa;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
    }

/* ============================================================
   4. KPI - INLINE SVG ENTERPRISE STYLE
============================================================ */

.thcct-kpi-grid[b-4obtlqem0q] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.thcct-kpi-card[b-4obtlqem0q] {
    position: relative;
    min-height: 82px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--thcct-border);
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .035);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .thcct-kpi-card:hover[b-4obtlqem0q] {
        transform: translateY(-1px);
        border-color: #dbe5f2;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
    }

.thcct-kpi-icon[b-4obtlqem0q] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .13);
}

    .thcct-kpi-icon[b-4obtlqem0q]  svg {
        width: 25px;
        height: 25px;
        display: block;
        fill: currentColor !important;
    }

    .thcct-kpi-icon[b-4obtlqem0q]  path {
        fill: currentColor !important;
    }

.thcct-kpi-symbol[b-4obtlqem0q] {
    display: none;
}

.thcct-kpi-icon.blue[b-4obtlqem0q] {
    background: linear-gradient(135deg, #12b7ff 0%, #0677f8 100%);
}

.thcct-kpi-icon.green[b-4obtlqem0q] {
    background: linear-gradient(135deg, #13b84f 0%, #06973d 100%);
}

.thcct-kpi-icon.blue2[b-4obtlqem0q] {
    background: linear-gradient(135deg, #2563eb 0%, #0b5cff 100%);
}

.thcct-kpi-icon.purple[b-4obtlqem0q] {
    background: linear-gradient(135deg, #7d3ff2 0%, #5b25c9 100%);
}

.thcct-kpi-icon.amber[b-4obtlqem0q] {
    background: linear-gradient(135deg, #ff9b14 0%, #ff7a00 100%);
}

.thcct-kpi-icon.red[b-4obtlqem0q] {
    background: linear-gradient(135deg, #ff4d5e 0%, #ff233f 100%);
}

.thcct-kpi-body[b-4obtlqem0q] {
    min-width: 0;
}

.thcct-kpi-label[b-4obtlqem0q] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.thcct-kpi-value[b-4obtlqem0q] {
    display: block;
    color: #1e3355;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.thcct-kpi-note[b-4obtlqem0q] {
    display: block;
    margin-top: 4px;
    color: #8a98ad;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.thcct-kpi-card:has(.thcct-kpi-icon.green) .thcct-kpi-value[b-4obtlqem0q] {
    color: #16a34a;
}

.thcct-kpi-card:has(.thcct-kpi-icon.blue2) .thcct-kpi-value[b-4obtlqem0q] {
    color: #2563eb;
}

.thcct-kpi-card:has(.thcct-kpi-icon.amber) .thcct-kpi-value[b-4obtlqem0q] {
    color: #f97316;
}

.thcct-kpi-card:has(.thcct-kpi-icon.purple) .thcct-kpi-value[b-4obtlqem0q] {
    color: #6d28d9;
}

.thcct-kpi-card:has(.thcct-kpi-icon.red) .thcct-kpi-value[b-4obtlqem0q] {
    color: #ef4444;
}

/* ============================================================
   5. FILTER
============================================================ */

.thcct-filter-card[b-4obtlqem0q] {
    position: relative;
    z-index: 600;
    margin-bottom: 14px;
    padding: 10px;
    background: #f7f9fc;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.thcct-filter-grid[b-4obtlqem0q] {
    display: grid;
    grid-template-columns: 90px 90px 280px 280px minmax(320px, 1fr);
    gap: 8px;
    align-items: end;
    overflow: visible;
}

.thcct-form-group[b-4obtlqem0q] {
    min-width: 0;
}

    .thcct-form-group label[b-4obtlqem0q] {
        display: block;
        margin-bottom: 6px;
        color: #66758d;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.25;
    }

    .thcct-form-group input[b-4obtlqem0q],
    .thcct-form-group select[b-4obtlqem0q] {
        width: 100%;
        height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        .thcct-form-group input[b-4obtlqem0q]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .thcct-form-group input:focus[b-4obtlqem0q],
        .thcct-form-group select:focus[b-4obtlqem0q] {
            border-color: #93c5fd;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

.thcct-input-icon[b-4obtlqem0q] {
    position: relative;
}

    .thcct-input-icon input[b-4obtlqem0q] {
        padding-right: 36px;
    }

    .thcct-input-icon i[b-4obtlqem0q] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa9bd;
        font-size: 15px;
        line-height: 1;
    }

/* ============================================================
   6. CUSTOM SELECT: PHÒNG BAN + LOẠI CA
============================================================ */

.thcct-dept-filter[b-4obtlqem0q],
.thcct-shift-filter[b-4obtlqem0q] {
    position: relative;
    overflow: visible;
}

.thcct-dept-filter[b-4obtlqem0q] {
    z-index: 700;
}

.thcct-shift-filter[b-4obtlqem0q] {
    z-index: 650;
}

.thcct-dept-filter:has(.thcct-tree-select.is-open)[b-4obtlqem0q] {
    z-index: 1200;
}

.thcct-shift-filter:has(.thcct-select-dropdown.is-open)[b-4obtlqem0q] {
    z-index: 1250;
}

.thcct-tree-select[b-4obtlqem0q],
.thcct-select-dropdown[b-4obtlqem0q] {
    position: relative;
    width: 100%;
    z-index: 1;
}

    .thcct-tree-select.is-open[b-4obtlqem0q] {
        z-index: 1300;
    }

    .thcct-select-dropdown.is-open[b-4obtlqem0q] {
        z-index: 1350;
    }

.thcct-tree-select__control[b-4obtlqem0q],
.thcct-select-dropdown__control[b-4obtlqem0q] {
    width: 100%;
    height: 38px;
    padding: 0 9px 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e3f2;
    background: #ffffff;
    color: #425b7f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .thcct-tree-select__control:hover[b-4obtlqem0q],
    .thcct-select-dropdown__control:hover[b-4obtlqem0q] {
        border-color: #bfd0e6;
        background: #fbfdff;
    }

.thcct-tree-select.is-open .thcct-tree-select__control[b-4obtlqem0q],
.thcct-select-dropdown.is-open .thcct-select-dropdown__control[b-4obtlqem0q] {
    border-color: #7fb3ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.thcct-tree-select__value[b-4obtlqem0q],
.thcct-select-dropdown__value[b-4obtlqem0q] {
    flex: 1;
    min-width: 0;
    color: #425b7f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.thcct-tree-select__clear[b-4obtlqem0q],
.thcct-select-dropdown__clear[b-4obtlqem0q] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 850;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

    .thcct-tree-select__clear:hover[b-4obtlqem0q],
    .thcct-select-dropdown__clear:hover[b-4obtlqem0q] {
        background: #fee2e2;
        color: #dc2626;
        transform: scale(1.04);
    }

.thcct-tree-select__chevron[b-4obtlqem0q],
.thcct-select-dropdown__chevron[b-4obtlqem0q] {
    width: 18px;
    height: 18px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

    .thcct-tree-select__chevron[b-4obtlqem0q]::before,
    .thcct-select-dropdown__chevron[b-4obtlqem0q]::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #64748b;
        transform: translateY(1px);
    }

.thcct-tree-select__panel[b-4obtlqem0q],
.thcct-select-dropdown__panel[b-4obtlqem0q] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    width: 360px;
    max-width: min(360px, calc(100vw - 48px));
    border: 1px solid #d7e3f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.thcct-tree-select__panel[b-4obtlqem0q] {
    z-index: 1400;
}

.thcct-select-dropdown__panel[b-4obtlqem0q] {
    z-index: 1450;
}

.thcct-shift-panel[b-4obtlqem0q] {
    width: 340px;
}

.thcct-tree-select__search[b-4obtlqem0q],
.thcct-select-dropdown__search[b-4obtlqem0q] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #edf2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

    .thcct-tree-select__search input[b-4obtlqem0q],
    .thcct-select-dropdown__search input[b-4obtlqem0q] {
        width: 100%;
        height: 34px;
        padding: 0 11px 0 32px;
        border: 1px solid #dce5f0;
        border-radius: 9px;
        background: #ffffff;
        color: #425b7f;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .thcct-tree-select__search input[b-4obtlqem0q]::placeholder,
        .thcct-select-dropdown__search input[b-4obtlqem0q]::placeholder {
            color: #a4afbf;
            font-weight: 500;
        }

        .thcct-tree-select__search input:focus[b-4obtlqem0q],
        .thcct-select-dropdown__search input:focus[b-4obtlqem0q] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

.thcct-tree-select__search-icon[b-4obtlqem0q],
.thcct-select-dropdown__search-icon[b-4obtlqem0q] {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.thcct-tree-select__list[b-4obtlqem0q],
.thcct-select-dropdown__list[b-4obtlqem0q] {
    max-height: 292px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
}

    .thcct-tree-select__list[b-4obtlqem0q]::-webkit-scrollbar,
    .thcct-select-dropdown__list[b-4obtlqem0q]::-webkit-scrollbar {
        width: 8px;
    }

    .thcct-tree-select__list[b-4obtlqem0q]::-webkit-scrollbar-thumb,
    .thcct-select-dropdown__list[b-4obtlqem0q]::-webkit-scrollbar-thumb {
        background: #dbe4f0;
        border-radius: 999px;
    }

    .thcct-tree-select__list[b-4obtlqem0q]::-webkit-scrollbar-track,
    .thcct-select-dropdown__list[b-4obtlqem0q]::-webkit-scrollbar-track {
        background: transparent;
    }

/* Department rows */

.thcct-tree-select__row[b-4obtlqem0q] {
    position: relative;
    min-height: 34px;
    margin: 2px 0;
    padding-top: 0;
    padding-right: 9px;
    padding-bottom: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .thcct-tree-select__row[b-4obtlqem0q]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 7px;
        bottom: 7px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .thcct-tree-select__row:hover[b-4obtlqem0q] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .thcct-tree-select__row.is-selected[b-4obtlqem0q] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .thcct-tree-select__row.is-selected[b-4obtlqem0q]::before {
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        }

    .thcct-tree-select__row.is-matched:not(.is-selected)[b-4obtlqem0q] {
        background: #fff9ed;
        border-color: #fde6c5;
        box-shadow: inset 3px 0 0 #f59e0b;
    }

.thcct-tree-select__row--all[b-4obtlqem0q] {
    padding-left: 10px;
    font-weight: 800;
}

.thcct-tree-select__toggle[b-4obtlqem0q] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

    .thcct-tree-select__toggle:hover[b-4obtlqem0q] {
        background: #e9eef7;
        color: #0f172a;
    }

.thcct-tree-select__toggle--empty[b-4obtlqem0q] {
    cursor: default;
    opacity: .35;
}

    .thcct-tree-select__toggle--empty:hover[b-4obtlqem0q] {
        background: transparent;
    }

.thcct-tree-select__node-icon[b-4obtlqem0q] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
}

    .thcct-tree-select__node-icon.root[b-4obtlqem0q] {
        color: #2563eb;
        background: #eff6ff;
    }

    .thcct-tree-select__node-icon.parent[b-4obtlqem0q] {
        color: #0284c7;
        background: #e0f2fe;
    }

    .thcct-tree-select__node-icon.leaf[b-4obtlqem0q] {
        color: #16a34a;
        background: #ecfdf5;
    }

.thcct-tree-select__row.is-selected .thcct-tree-select__node-icon[b-4obtlqem0q] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.thcct-tree-select__label[b-4obtlqem0q] {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Shift rows */

.thcct-select-dropdown__option[b-4obtlqem0q] {
    position: relative;
    min-height: 38px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #334155;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .thcct-select-dropdown__option[b-4obtlqem0q]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        border-radius: 999px;
        background: transparent;
    }

    .thcct-select-dropdown__option:hover[b-4obtlqem0q] {
        background: #f8fbff;
        border-color: #e2eaf4;
    }

    .thcct-select-dropdown__option.is-selected[b-4obtlqem0q] {
        background: linear-gradient(180deg, #eaf3ff 0%, #e4efff 100%);
        border-color: #9fc3ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }

        .thcct-select-dropdown__option.is-selected[b-4obtlqem0q]::before {
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
        }

.thcct-select-dropdown__option--all[b-4obtlqem0q] {
    font-weight: 800;
}

.thcct-select-dropdown__option-icon[b-4obtlqem0q] {
    width: 28px;
    height: 24px;
    min-width: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .045);
}

    .thcct-select-dropdown__option-icon.all[b-4obtlqem0q] {
        color: #2563eb;
        background: #eff6ff;
    }

    .thcct-select-dropdown__option-icon.shift-required[b-4obtlqem0q] {
        color: #d97706;
        background: #fff7ed;
    }

    .thcct-select-dropdown__option-icon.shift-free[b-4obtlqem0q] {
        color: #16a34a;
        background: #ecfdf5;
    }

.thcct-select-dropdown__option.is-selected .thcct-select-dropdown__option-icon[b-4obtlqem0q] {
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.thcct-select-dropdown__option-content[b-4obtlqem0q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thcct-select-dropdown__option-text[b-4obtlqem0q] {
    color: inherit;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thcct-select-dropdown__option-code[b-4obtlqem0q] {
    color: #7b8aa2;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thcct-tree-select__empty[b-4obtlqem0q],
.thcct-select-dropdown__empty[b-4obtlqem0q] {
    margin: 4px;
    padding: 18px 12px;
    border: 1px dashed #d9e2ef;
    border-radius: 12px;
    background: #fbfdff;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ============================================================
   7. INSIGHT
============================================================ */

.thcct-insight[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: #f7f8fc;
    border: 1px solid #e9edf4;
    border-radius: 13px;
}

.thcct-insight-title[b-4obtlqem0q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 2px;
    color: var(--thcct-text);
    font-size: 14px;
    font-weight: 750;
}

.thcct-insight-dot[b-4obtlqem0q] {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #f0d9a7;
    background: #fff5db;
    color: #d19a33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.thcct-insight-chip[b-4obtlqem0q] {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 9px;
    border: 1px solid #e6eaf2;
    background: #ffffff;
    color: #4a5670;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
}

.thcct-chip-warn[b-4obtlqem0q] {
    background: #fffaf0;
}

.thcct-chip-blue[b-4obtlqem0q] {
    background: #f7faff;
}

.thcct-chip-purple[b-4obtlqem0q] {
    background: #faf7ff;
}

.thcct-chip-gray[b-4obtlqem0q] {
    background: #fbfcfe;
}

.thcct-chip-mint[b-4obtlqem0q] {
    background: #f2fbf8;
    border-color: #d9f0e8;
}

.thcct-chip-info[b-4obtlqem0q] {
    color: #b1bbca;
}

.thcct-insight-more[b-4obtlqem0q] {
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid #e2e7ef;
    background: #ffffff;
    color: #97a3b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   8. GRID TOP + PAGING
============================================================ */

.thcct-grid-top[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.thcct-grid-count[b-4obtlqem0q] {
    color: #67778f;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.thcct-grid-pager[b-4obtlqem0q] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

    .thcct-grid-pager > *[b-4obtlqem0q],
    .thcct-table-foot > *:last-child[b-4obtlqem0q] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .thcct-grid-pager select[b-4obtlqem0q],
    .thcct-grid-pager button[b-4obtlqem0q],
    .thcct-table-foot select[b-4obtlqem0q],
    .thcct-table-foot button[b-4obtlqem0q],
    .thcct-grid-pager .page-link[b-4obtlqem0q],
    .thcct-table-foot .page-link[b-4obtlqem0q] {
        height: 32px;
        min-width: 32px;
        padding: 0 10px;
        border-radius: 9px;
        border: 1px solid #dce5ef;
        background: #ffffff;
        color: #334155;
        font-size: 13px;
        font-weight: 650;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .thcct-grid-pager select[b-4obtlqem0q],
    .thcct-table-foot select[b-4obtlqem0q] {
        min-width: 82px;
        padding: 0 9px;
        cursor: pointer;
    }

    .thcct-grid-pager button[b-4obtlqem0q],
    .thcct-table-foot button[b-4obtlqem0q] {
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        .thcct-grid-pager button:hover:not(:disabled)[b-4obtlqem0q],
        .thcct-table-foot button:hover:not(:disabled)[b-4obtlqem0q] {
            background: #f3f7fd;
            border-color: #c8d7eb;
            color: #2563eb;
        }

        .thcct-grid-pager button:disabled[b-4obtlqem0q],
        .thcct-table-foot button:disabled[b-4obtlqem0q] {
            opacity: .55;
            cursor: not-allowed;
        }

        .thcct-grid-pager button.active[b-4obtlqem0q],
        .thcct-grid-pager .active[b-4obtlqem0q],
        .thcct-table-foot button.active[b-4obtlqem0q],
        .thcct-table-foot .active[b-4obtlqem0q],
        .thcct-grid-pager .page-item.active .page-link[b-4obtlqem0q],
        .thcct-table-foot .page-item.active .page-link[b-4obtlqem0q] {
            background: #4c87e7 !important;
            color: #ffffff !important;
            border-color: #4c87e7 !important;
            box-shadow: 0 5px 12px rgba(76, 135, 231, .16);
        }

    .thcct-grid-pager .pagination[b-4obtlqem0q],
    .thcct-table-foot .pagination[b-4obtlqem0q] {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .thcct-grid-pager .page-item.disabled .page-link[b-4obtlqem0q],
    .thcct-table-foot .page-item.disabled .page-link[b-4obtlqem0q] {
        opacity: .55;
        cursor: not-allowed;
    }

/* ============================================================
   9. TABLE SHELL
============================================================ */

.thcct-table-shell[b-4obtlqem0q] {
    position: relative;
    border: 1px solid var(--thcct-border);
    border-radius: 14px;
    background: #ffffff;
    overflow: visible;
}

.thcct-head-sticky-wrap[b-4obtlqem0q] {
    position: sticky;
    top: var(--thcct-sticky-top);
    z-index: 300;
    background: #ffffff;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #e7ebf3;
    overflow: visible;
}

.thcct-head-scroll-mirror[b-4obtlqem0q] {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    background: #ffffff;
    border-radius: 14px 14px 0 0;
}

    .thcct-head-scroll-mirror table[b-4obtlqem0q] {
        will-change: transform;
        transform: translateX(0);
    }

.thcct-table-scroll[b-4obtlqem0q] {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

    .thcct-table-scroll[b-4obtlqem0q]::-webkit-scrollbar {
        height: 10px;
    }

    .thcct-table-scroll[b-4obtlqem0q]::-webkit-scrollbar-track {
        background: #f1f4f8;
        border-radius: 999px;
    }

    .thcct-table-scroll[b-4obtlqem0q]::-webkit-scrollbar-thumb {
        background: #c7d2e3;
        border-radius: 999px;
    }

        .thcct-table-scroll[b-4obtlqem0q]::-webkit-scrollbar-thumb:hover {
            background: #aebbd0;
        }

/* ============================================================
   10. TABLE
============================================================ */

.thcct-table[b-4obtlqem0q] {
    width: 100%;
    min-width: var(--thcct-table-min-width);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

    .thcct-table thead[b-4obtlqem0q] {
        position: relative;
        z-index: 1;
    }

        .thcct-table thead th[b-4obtlqem0q] {
            height: 42px;
            padding: 7px 10px;
            background: #f5f7fb;
            color: #334863;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.25;
            text-align: center !important;
            vertical-align: middle;
            letter-spacing: 0;
            border-right: 1px solid #e7ebf3;
            border-bottom: none;
            white-space: nowrap;
            position: static;
            top: auto;
            z-index: auto;
            box-shadow: none;
        }

            .thcct-table thead th:last-child[b-4obtlqem0q] {
                border-right: none;
            }

.thcct-head-sticky-wrap .thcct-table thead th:first-child[b-4obtlqem0q] {
    border-top-left-radius: 14px;
}

.thcct-head-sticky-wrap .thcct-table thead th:last-child[b-4obtlqem0q] {
    border-top-right-radius: 14px;
}

.thcct-table tbody td[b-4obtlqem0q] {
    height: 50px;
    padding: 8px 10px;
    background: #ffffff;
    color: #3f5875;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.32;
    vertical-align: middle;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}

    .thcct-table tbody td:last-child[b-4obtlqem0q] {
        border-right: none;
    }

.thcct-row[b-4obtlqem0q] {
    cursor: pointer;
}

    .thcct-row:hover td[b-4obtlqem0q] {
        background: #fbfcff;
    }

.thcct-row-expanded td[b-4obtlqem0q] {
    background: #fcfdff;
}

.thcct-page .text-center[b-4obtlqem0q] {
    text-align: center !important;
}

.thcct-page .text-end[b-4obtlqem0q] {
    text-align: right !important;
}

/* ============================================================
   11. TABLE COLUMN COLORS
============================================================ */

.thcct-table thead th.thcct-th-work[b-4obtlqem0q] {
    background: #f3f8ff;
}

.thcct-table thead th.thcct-th-leave[b-4obtlqem0q] {
    background: #f5fbf7;
}

.thcct-table thead th.thcct-th-violation[b-4obtlqem0q] {
    background: #fff8ef;
}

.thcct-table thead th.thcct-th-payroll[b-4obtlqem0q] {
    background: #f0f5f5 !important;
}

.thcct-td-work[b-4obtlqem0q] {
    background: #fbfdff !important;
}

.thcct-td-leave[b-4obtlqem0q] {
    background: #fcfffd !important;
}

.thcct-td-violation[b-4obtlqem0q] {
    background: #fffdf9 !important;
}

.thcct-row:hover .thcct-td-work[b-4obtlqem0q] {
    background: #f5faff !important;
}

.thcct-row:hover .thcct-td-leave[b-4obtlqem0q] {
    background: #f6fcf8 !important;
}

.thcct-row:hover .thcct-td-violation[b-4obtlqem0q] {
    background: #fff8ef !important;
}

.thcct-cell-soft[b-4obtlqem0q] {
    background: #f4f8f8 !important;
    font-weight: 700;
}

/* ============================================================
   12. EMPLOYEE CELL
============================================================ */

.thcct-col-nhanvien[b-4obtlqem0q] {
    width: 200px;
    min-width: 200px;
}

.thcct-td-nhanvien[b-4obtlqem0q] {
    white-space: nowrap;
}

.thcct-emp[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.thcct-avatar[b-4obtlqem0q] {
    width: 29px;
    height: 29px;
    border-radius: 999px;
    background: linear-gradient(135deg, #edf3ff 0%, #dce8fb 100%);
    color: #4f73ba;
    border: 1px solid #d7e3f8;
    font-size: 10.5px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.thcct-emp-name-wrap[b-4obtlqem0q] {
    min-width: 0;
}

.thcct-name[b-4obtlqem0q] {
    color: var(--thcct-title);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.thcct-code-sub[b-4obtlqem0q],
.thcct-code[b-4obtlqem0q] {
    margin-top: 2px;
    color: #3f6fd8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.thcct-col-dept[b-4obtlqem0q] {
    width: 190px;
    min-width: 190px;
}

.thcct-dept[b-4obtlqem0q] {
    display: inline-block;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.thcct-ctl-low[b-4obtlqem0q] {
    color: #d64f4f;
    font-weight: 650;
}

.thcct-ctl-ok[b-4obtlqem0q] {
    color: #238861;
    font-weight: 650;
}

/* ============================================================
   13. MINI BADGE
============================================================ */

.thcct-mini-badge[b-4obtlqem0q] {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.8px;
    font-weight: 650;
    line-height: 1;
}

.thcct-mini-warn[b-4obtlqem0q] {
    background: #fff5e8;
    color: #d19445;
}

.thcct-mini-danger[b-4obtlqem0q] {
    background: #fdf0f1;
    color: #d88787;
}

/* ============================================================
   14. TOOLTIP
============================================================ */

.thcct-payroll-head[b-4obtlqem0q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.thcct-help-wrap[b-4obtlqem0q] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #8ba0b8;
    cursor: help;
}

    .thcct-help-wrap i[b-4obtlqem0q] {
        font-size: 15px;
    }

.thcct-tooltip[b-4obtlqem0q] {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    width: 310px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #172033;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .15s ease;
    z-index: 9000;
}

    .thcct-tooltip[b-4obtlqem0q]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #172033 transparent;
    }

.thcct-help-wrap:hover .thcct-tooltip[b-4obtlqem0q] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   15. EXPAND ROW
============================================================ */

.thcct-expand-row td[b-4obtlqem0q] {
    padding: 0 !important;
}

.thcct-expand[b-4obtlqem0q] {
    padding: 10px 14px 14px;
    background: #fafcff;
    border-top: 1px solid #edf1f6;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.thcct-expand-left[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.thcct-expand-name[b-4obtlqem0q] {
    margin-right: 4px;
    color: #2a3d5e;
    font-size: 14px;
    font-weight: 750;
}

.thcct-expand-chip[b-4obtlqem0q] {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 10px;
    background: #eef2fb;
    color: #65759a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
}

.thcct-expand-chip-icon[b-4obtlqem0q] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #7f98d8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.thcct-expand-chip-soft[b-4obtlqem0q] {
    background: #eefaf6;
    color: #4b927c;
}

    .thcct-expand-chip-soft .thcct-expand-chip-icon[b-4obtlqem0q] {
        background: #82c9b4;
    }

.thcct-expand-chip-danger[b-4obtlqem0q] {
    background: #fff1f1;
    color: #c96f6f;
}

    .thcct-expand-chip-danger .thcct-expand-chip-icon[b-4obtlqem0q] {
        background: #dc8b8b;
    }

.thcct-expand-text[b-4obtlqem0q],
.thcct-expand-note[b-4obtlqem0q] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6b7b93;
    font-size: 13px;
    font-weight: 500;
}

    .thcct-expand-note i[b-4obtlqem0q] {
        color: #d5943b;
    }

/* ============================================================
   16. TABLE FOOTER / EMPTY
============================================================ */

.thcct-table-foot[b-4obtlqem0q] {
    position: relative;
    z-index: 2;
    min-height: 50px;
    padding: 12px 14px;
    border-top: 1px solid var(--thcct-border);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.thcct-empty[b-4obtlqem0q] {
    padding: 42px 20px !important;
    text-align: center;
    color: #8593a9;
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   17. SPINNER / TOAST
============================================================ */

.thcct-spinner[b-4obtlqem0q] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(37, 99, 235, .22);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: thcct-spin-b-4obtlqem0q .7s linear infinite;
}

.thcct-spinner-sm[b-4obtlqem0q] {
    border: 2px solid #d7dfec;
    border-top-color: #5f8fe7;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes thcct-spin-b-4obtlqem0q {
    to {
        transform: rotate(360deg);
    }
}

.thcct-toast[b-4obtlqem0q] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}

.thcct-toast-success[b-4obtlqem0q] {
    background: linear-gradient(180deg, #39c978 0%, #21b667 100%);
}

.thcct-toast-error[b-4obtlqem0q] {
    background: linear-gradient(180deg, #ef6e6e 0%, #df5555 100%);
}

/* ============================================================
   18. CONFIRM MODAL
============================================================ */

.thcct-confirm-backdrop[b-4obtlqem0q] {
    position: fixed;
    inset: 0;
    z-index: 9997;
    padding: 24px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thcct-confirm-modal[b-4obtlqem0q] {
    width: 460px;
    max-width: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 18px;
    box-shadow: 0 28px 86px rgba(15, 23, 42, .25);
    animation: thcct-modal-pop-b-4obtlqem0q .18s ease-out;
}

.thcct-confirm-icon[b-4obtlqem0q] {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eaf8f0 0%, #e7f0ff 100%);
    color: #43a478;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.thcct-confirm-body h3[b-4obtlqem0q] {
    margin: 0;
    color: var(--thcct-title);
    font-size: 18px;
    font-weight: 750;
}

.thcct-confirm-body p[b-4obtlqem0q] {
    margin: 10px 0 0;
    color: #53647f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.thcct-confirm-note[b-4obtlqem0q] {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    color: #6d7d94;
    font-size: 13px;
    line-height: 1.5;
}

.thcct-confirm-foot[b-4obtlqem0q] {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.thcct-confirm-btn[b-4obtlqem0q] {
    min-height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.thcct-confirm-btn-outline[b-4obtlqem0q] {
    background: #ffffff;
    border: 1px solid #dce3ee;
    color: #56657b;
}

.thcct-confirm-btn-primary[b-4obtlqem0q] {
    color: #ffffff;
    background: linear-gradient(180deg, #6dc7ab 0%, #55b493 100%);
    border: 1px solid #5dbb9f;
    box-shadow: 0 8px 18px rgba(85, 180, 147, .18);
}

.thcct-confirm-btn:disabled[b-4obtlqem0q] {
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   19. IMPORT MODAL
============================================================ */

.thcct-modal-backdrop[b-4obtlqem0q] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    padding: 24px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thcct-import-modal[b-4obtlqem0q] {
    width: 560px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26);
    animation: thcct-modal-pop-b-4obtlqem0q .18s ease-out;
}

@keyframes thcct-modal-pop-b-4obtlqem0q {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.thcct-import-modal-head[b-4obtlqem0q] {
    position: relative;
    min-height: 82px;
    padding: 18px 58px 16px 20px;
    border-bottom: 1px solid #edf2f7;
    background: radial-gradient(circle at 18% 0%, rgba(111, 130, 223, .12), transparent 30%), linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.thcct-import-head-main[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.thcct-import-head-icon[b-4obtlqem0q] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf8f0 0%, #dff2ff 100%);
    color: #2f9d66;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.thcct-import-modal-head h3[b-4obtlqem0q] {
    margin: 0;
    color: var(--thcct-title);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 750;
}

.thcct-import-modal-sub[b-4obtlqem0q] {
    margin-top: 5px;
    color: #7b8aa3;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.thcct-modal-close[b-4obtlqem0q] {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e9f2;
    border-radius: 999px;
    background: #ffffff;
    color: #7b8798;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .thcct-modal-close:hover[b-4obtlqem0q] {
        background: #f6f8fc;
        color: var(--thcct-text);
    }

.thcct-import-modal-body[b-4obtlqem0q] {
    padding: 18px 20px;
}

.thcct-import-note[b-4obtlqem0q] {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid #fde6c5;
    background: #fff9ed;
    color: #8a5a16;
    font-size: 13px;
    line-height: 1.5;
}

.thcct-import-note-title[b-4obtlqem0q] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-weight: 750;
    color: #a16207;
}

.thcct-import-note ul[b-4obtlqem0q] {
    margin: 0;
    padding-left: 18px;
}

.thcct-import-step[b-4obtlqem0q] {
    min-height: 58px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--thcct-border);
    border-radius: 14px;
    background: #ffffff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.thcct-step-index[b-4obtlqem0q] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 750;
}

.thcct-step-title[b-4obtlqem0q] {
    color: var(--thcct-title);
    font-size: 13.5px;
    font-weight: 700;
}

.thcct-step-sub[b-4obtlqem0q] {
    margin-top: 3px;
    color: #7f8da5;
    font-size: 12.5px;
    font-weight: 500;
}

.thcct-template-btn[b-4obtlqem0q],
.thcct-file-choose[b-4obtlqem0q],
.thcct-modal-btn[b-4obtlqem0q] {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.thcct-template-btn[b-4obtlqem0q] {
    color: #047857;
    border-color: #86efac;
    background: #ecfdf5;
}

    .thcct-template-btn:hover:not(:disabled)[b-4obtlqem0q] {
        background: #d1fae5;
        border-color: #4ade80;
    }

.thcct-file-drop[b-4obtlqem0q] {
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 12px;
}

.thcct-file-selected[b-4obtlqem0q] {
    border-color: #86efac;
    background: #f0fdf4;
}

.thcct-file-icon[b-4obtlqem0q] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.thcct-file-info[b-4obtlqem0q] {
    flex: 1;
    min-width: 0;
}

.thcct-file-title[b-4obtlqem0q] {
    color: var(--thcct-title);
    font-size: 13.5px;
    font-weight: 700;
}

.thcct-file-sub[b-4obtlqem0q] {
    margin-top: 3px;
    color: #7f8da5;
    font-size: 12.5px;
    font-weight: 500;
}

.thcct-file-choose[b-4obtlqem0q] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #ffffff;
}

.thcct-file-input[b-4obtlqem0q] {
    display: none;
}

.thcct-import-modal-foot[b-4obtlqem0q] {
    padding: 14px 20px;
    border-top: 1px solid #edf2f7;
    background: #fbfcff;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.thcct-modal-btn-outline[b-4obtlqem0q] {
    color: #56657b;
    border-color: #dce3ee;
    background: #ffffff;
}

.thcct-modal-btn-primary[b-4obtlqem0q] {
    color: #ffffff;
    background: linear-gradient(180deg, #4f8ee9 0%, #3d7dde 100%);
    border-color: #3d7dde;
}

.thcct-disabled[b-4obtlqem0q],
.thcct-modal-btn:disabled[b-4obtlqem0q],
.thcct-template-btn:disabled[b-4obtlqem0q] {
    opacity: .65;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   20. RESPONSIVE
============================================================ */

@media (max-width: 1500px) {
    .thcct-kpi-grid[b-4obtlqem0q] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .thcct-filter-grid[b-4obtlqem0q] {
        grid-template-columns: 90px 90px minmax(220px, 1fr) minmax(220px, 1fr);
    }

    .thcct-search-group[b-4obtlqem0q] {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {
    .thcct-head[b-4obtlqem0q] {
        flex-direction: column;
        align-items: stretch;
    }

    .thcct-head-actions[b-4obtlqem0q] {
        justify-content: flex-end;
    }

    .thcct-kpi-grid[b-4obtlqem0q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thcct-filter-grid[b-4obtlqem0q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thcct-search-group[b-4obtlqem0q] {
        grid-column: span 2;
    }

    .thcct-grid-top[b-4obtlqem0q],
    .thcct-table-foot[b-4obtlqem0q] {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .thcct-grid-pager[b-4obtlqem0q] {
        margin-left: 0;
        justify-content: flex-end;
    }

    .thcct-expand[b-4obtlqem0q] {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .thcct-container[b-4obtlqem0q] {
        padding: 16px;
        border-radius: 14px;
    }

    .thcct-head-actions[b-4obtlqem0q] {
        flex-direction: column;
        align-items: stretch;
    }

    .thcct-action-btn[b-4obtlqem0q] {
        width: 100%;
        justify-content: center;
    }

    .thcct-kpi-grid[b-4obtlqem0q] {
        grid-template-columns: 1fr;
    }

    .thcct-filter-grid[b-4obtlqem0q] {
        grid-template-columns: 1fr;
    }

    .thcct-search-group[b-4obtlqem0q] {
        grid-column: auto;
    }

    .thcct-tree-select__panel[b-4obtlqem0q],
    .thcct-select-dropdown__panel[b-4obtlqem0q],
    .thcct-shift-panel[b-4obtlqem0q] {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }

    .thcct-insight-more[b-4obtlqem0q] {
        margin-left: 0;
    }

    .thcct-import-step[b-4obtlqem0q] {
        grid-template-columns: auto 1fr;
    }

    .thcct-template-btn[b-4obtlqem0q] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .thcct-file-drop[b-4obtlqem0q] {
        align-items: flex-start;
        flex-direction: column;
    }

    .thcct-file-choose[b-4obtlqem0q] {
        width: 100%;
    }

    .thcct-import-modal-foot[b-4obtlqem0q],
    .thcct-confirm-foot[b-4obtlqem0q] {
        flex-direction: column-reverse;
    }

    .thcct-modal-btn[b-4obtlqem0q],
    .thcct-confirm-btn[b-4obtlqem0q] {
        width: 100%;
        justify-content: center;
    }

    .thcct-kpi-card[b-4obtlqem0q] {
        min-height: 76px;
        padding: 12px 13px;
    }

    .thcct-kpi-icon[b-4obtlqem0q] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 13px;
    }

        .thcct-kpi-icon[b-4obtlqem0q]  svg {
            width: 23px;
            height: 23px;
        }

    .thcct-kpi-label[b-4obtlqem0q] {
        font-size: 11.5px;
    }

    .thcct-kpi-value[b-4obtlqem0q] {
        font-size: 17px;
    }

    .thcct-kpi-note[b-4obtlqem0q] {
        font-size: 11px;
    }
}