/* ==========================================================================
   Design tokens — Hệ thống KPI ITSS
   Phong cách: nền trắng/xám nhạt, thương hiệu xanh navy, thẻ bo góc mềm,
   badge dạng pill, đồng bộ theo tài liệu tham khảo D:\Works\VPS\KPI\Temp
   ========================================================================== */
:root {
    --brand-navy: #0f2a5e;
    --brand-navy-dark: #0a1d42;
    --brand-navy-darker: #071630;
    --brand-navy-light: #eaf0fb;
    --brand-accent: #2f6fed;
    --bg-page: #f4f6fb;
    --border-soft: #e5e9f2;
    --text-muted-soft: #5b6b8c;
    --radius-card: 14px;
    --radius-control: 10px;
    --radius-pill: 999px;
    --shadow-card: 0 2px 16px rgba(15, 42, 94, 0.07);
    --shadow-card-hover: 0 6px 22px rgba(15, 42, 94, 0.12);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    background: var(--bg-page);
    font-family: var(--font-sans);
    color: #1c2434;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #14213d;
}

/* ---- Buttons ---- */
.btn {
    border-radius: var(--radius-control);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-primary {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--brand-navy-dark) !important;
        border-color: var(--brand-navy-dark) !important;
    }

.btn-outline-primary {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .btn-outline-primary:hover {
        background-color: var(--brand-navy);
        border-color: var(--brand-navy);
    }

.btn-outline-secondary {
    color: var(--text-muted-soft);
    border-color: var(--border-soft);
}

    .btn-outline-secondary:hover {
        background-color: var(--bg-page);
        border-color: var(--text-muted-soft);
        color: #1c2434;
    }

.btn-link {
    color: var(--brand-navy);
    font-weight: 600;
    text-decoration: none;
}

    .btn-link:hover {
        text-decoration: underline;
    }

.btn-primary, .btn-outline-primary, .btn-success, .btn-outline-danger, .btn-danger {
    border-radius: var(--radius-pill);
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    font-weight: 600;
    padding: .9rem 1.15rem;
}

.card-body {
    padding: 1.15rem;
}

/* ---- Badges (pill) ---- */
.badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: .42em .85em;
    letter-spacing: .01em;
}

.text-primary {
    color: var(--brand-navy) !important;
}

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: var(--radius-control);
    border-color: var(--border-soft);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 .2rem rgba(47, 111, 237, .15);
    }

.form-label {
    font-weight: 600;
    color: #33415c;
    font-size: .875rem;
}

/* ---- Tables ---- (nâng cấp 23/10/2026, theo yêu cầu người dùng "chuyên nghiệp hơn, phân biệt
   dòng chẵn/lẻ" — áp dụng 1 lần ở đây cho MỌI bảng .table trong toàn app, không cần sửa từng trang,
   vì 39 trang danh sách đều dùng chung class table/table-hover, xem rà soát 23/10/2026.) */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

    .table thead th {
        background: var(--bg-page);
        color: var(--text-muted-soft);
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .05em;
        font-weight: 700;
        padding: .85rem 1rem;
        border-bottom: 2px solid var(--border-soft);
        white-space: nowrap;
    }

    .table td {
        padding: .65rem 1rem;
        border-color: var(--border-soft);
        vertical-align: middle;
    }

    /* Zebra — chỉ ở bảng chính (có table-hover); bảng nhỏ lồng trong tab (table-sm, không
       table-hover) giữ nền trắng để tránh rối mắt ở khu vực đã chật. */
    .table-hover > tbody > tr:nth-of-type(even) {
        background-color: var(--bg-page);
    }

    .table > tbody > tr:last-child > td {
        border-bottom: none;
    }

    .table-hover > tbody > tr:hover > * {
        background-color: var(--brand-navy-light);
    }

/* ---- Alerts ---- */
.alert {
    border-radius: var(--radius-control);
    border: 1px solid transparent;
}

/* ---- App shell ---- */
.app-topbar {
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
}

.avatar-chip {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}

/* Ảnh đại diện thật cỡ nhỏ (cùng kích thước .avatar-chip) — dùng ở cột "Họ và tên" kiểu
   avatar-chip trong các bảng danh sách (bổ sung 23/10/2026). */
.avatar-photo-sm {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-soft);
}

.user-chip-link {
    text-decoration: none;
    padding: .25rem .4rem;
    border-radius: var(--radius-control);
    transition: background-color .15s ease;
}

    .user-chip-link:hover {
        background-color: var(--brand-navy-light);
    }

.role-pill {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--brand-navy-light);
    color: var(--brand-navy);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---- Menu tài khoản (LoginDisplay) — dropdown tự làm bằng Blazor, không phụ thuộc bootstrap.js ---- */
.user-menu {
    position: relative;
}

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-control);
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .15);
    padding: .35rem;
}

.user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .65rem;
    border-radius: var(--radius-control);
    color: var(--text-body, #1e293b);
    text-decoration: none;
    font-size: .875rem;
    cursor: pointer;
}

    .user-menu-item:hover {
        background-color: var(--brand-navy-light);
        color: var(--brand-navy);
    }

.user-menu-item-danger:hover {
    background-color: #fee2e2;
    color: #b91c1c;
}

.user-menu-divider {
    height: 1px;
    background: var(--border-subtle, #e2e8f0);
    margin: .3rem 0;
}

/* ---- Chuông thông báo (NotificationBell) — cùng kiểu dropdown tự làm như .user-menu ở trên, đặt cạnh nó
   trong topbar nên dùng chung dải z-index 1040/1050. Bổ sung 01/10/2026. ---- */
.notif-bell {
    position: relative;
}

.notif-bell-btn {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-body, #1e293b);
    font-size: 1.05rem;
    transition: background-color .15s ease;
}

    .notif-bell-btn:hover {
        background-color: var(--brand-navy-light);
    }

.notif-badge {
    position: absolute;
    top: -.1rem;
    right: -.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: var(--radius-pill);
    background: #dc2626;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.notif-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 1050;
    width: 380px;
    max-width: calc(100vw - 2rem);
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .18);
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.notif-panel-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-body, #14213d);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.notif-badge-inline {
    display: inline-flex;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: var(--radius-pill);
    background: #dc2626;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

.notif-mark-all {
    border: none;
    background: transparent;
    color: #2f6fed;
    font-size: .8rem;
    font-weight: 600;
    padding: 0;
}

    .notif-mark-all:hover {
        text-decoration: underline;
    }

.notif-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: .85rem;
}

    .notif-empty .oi {
        font-size: 1.8rem;
        display: block;
        margin-bottom: .5rem;
        opacity: .4;
    }

.notif-group-label {
    padding: .5rem 1rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    background: #f8fafc;
}

.notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem 1rem .75rem .85rem;
    border-bottom: 1px solid var(--border-subtle, #eef1f6);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease;
}

    .notif-item:last-child {
        border-bottom: none;
    }

    .notif-item:hover {
        background-color: #f8fafc;
    }

.notif-item-unread {
    background-color: #f5f9ff;
    border-left-color: #2f6fed;
}

    .notif-item-unread:hover {
        background-color: #eef5ff;
    }

.notif-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-body, #14213d);
    line-height: 1.35;
}

.notif-item-message {
    font-size: .8rem;
    color: var(--text-muted, #64748b);
    margin-top: .15rem;
    line-height: 1.45;
}

.notif-item-footer {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
}

.notif-item-time {
    font-size: .7rem;
    color: var(--text-muted, #94a3b8);
}

.notif-item-view {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #2f6fed;
}

.notif-unread-dot {
    position: absolute;
    top: .9rem;
    right: .85rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #2f6fed;
    flex-shrink: 0;
}

/* ---- Stat tiles (báo cáo tổng hợp) ---- */
.stat-tile {
    flex-direction: row;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.2rem;
    min-width: 190px;
}

.stat-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

    .stat-tile-icon.bg-blue {
        background: #e8f0fe;
        color: var(--brand-accent);
    }

    .stat-tile-icon.bg-navy {
        background: var(--brand-navy-light);
        color: var(--brand-navy);
    }

    .stat-tile-icon.bg-green {
        background: #e5f6ee;
        color: #178a56;
    }

    .stat-tile-icon.bg-amber {
        background: #fdf1de;
        color: #b8720a;
    }

    .stat-tile-icon.bg-red {
        background: #fdecec;
        color: #b91c1c;
    }

    .stat-tile-icon.bg-teal {
        background: #e6f5f3;
        color: #0f766e;
    }

    .stat-tile-icon.bg-purple {
        background: #f1ebfb;
        color: #6d28d9;
    }

.stat-tile-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #14213d;
    line-height: 1.15;
}

.stat-tile-label {
    font-size: .74rem;
    color: var(--text-muted-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Thanh so sánh ngang (điểm trung bình theo vị trí) ---- */
.bar-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .4rem 0;
}

.bar-row-label {
    width: 190px;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #33415c;
}

.bar-row-track {
    flex: 1;
    background: var(--bg-page);
    border-radius: var(--radius-pill);
    height: 10px;
    overflow: hidden;
}

.bar-row-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-navy));
    border-radius: var(--radius-pill);
}

.bar-row-value {
    width: 56px;
    flex-shrink: 0;
    text-align: right;
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand-navy);
}

/* ---- Biểu đồ Canvas thuần cho các trang Tổng quan (Shared/Charts/HrmChart.razor) ---- */
.hrm-chart-wrap {
    position: relative;
    width: 100%;
}

.hrm-chart-wrap canvas {
    display: block;
}

/* ---- Widget box (bảng nhập KPI theo nhóm tiêu chí) ---- */
.widget-toggle {
    background: none;
    border: none;
    color: var(--text-muted-soft);
    padding: .15rem .35rem;
}

    .widget-toggle:hover {
        color: var(--brand-navy);
    }

/* Cột cố định chiều rộng (khai báo qua <colgroup>) để cột điểm luôn thẳng hàng giữa các
   nhóm tiêu chí — mỗi nhóm render 1 <table> riêng nên nếu để tự co giãn theo nội dung,
   độ dài tên tiêu chí khác nhau giữa các nhóm sẽ làm cột điểm bị lệch không thẳng hàng. */
.kpi-score-table {
    table-layout: fixed;
    width: 100%;
}

    .kpi-score-table td {
        overflow-wrap: break-word;
    }

/* ---- Hồ sơ cá nhân (Areas/Identity/Pages/Account/Manage/Index.cshtml) ---- */
.profile-banner {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #163a7a 100%);
    border-radius: var(--radius-card);
    padding: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    position: relative;
    color: #fff;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
    object-fit: cover; /* dùng chung cho biến thể <img> khi đã có AvatarUrl (bổ sung 15/10/2026) */
}

/* Đổi ảnh ngay tại "Quản lý tài khoản" — bổ sung 15/10/2026, cùng mẫu input ẩn đè lên icon hiển thị
   đã dùng ở .avatar-edit-wrap/.avatar-edit-btn (ChiTiet.razor) và .portal-hero-avatar-wrap (trang
   chủ) — trang này là Razor Page cổ điển (không phải Blazor) nên dùng <form>+submit thường thay vì
   InputFile, không cần JS ngoài. */
.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    margin: 0;
}

.profile-avatar-edit-btn {
    position: absolute;
    right: -.1rem;
    bottom: -.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    border: 2px solid var(--brand-navy-dark, #0a1d42);
    cursor: pointer;
    overflow: hidden;
}

.profile-avatar-edit-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.profile-banner-label {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,.65);
    font-weight: 700;
}

.profile-banner-name {
    font-size: 1.35rem;
    font-weight: 800;
}

.profile-banner-role {
    font-size: .85rem;
    color: rgba(255,255,255,.8);
}

.profile-banner-shield {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    font-size: 1.6rem;
    color: rgba(255,255,255,.22);
}

.profile-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--border-soft);
}

    .profile-row:last-child {
        border-bottom: none;
    }

.profile-row-icon {
    color: var(--brand-accent);
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

.profile-row-label {
    color: var(--text-muted-soft);
    font-size: .85rem;
    flex: 1;
}

.profile-row-value {
    font-weight: 600;
    color: #14213d;
    text-align: right;
}

.profile-security-box {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fdf6e3;
    border: 1px solid #f3e1ab;
    border-radius: var(--radius-card);
    padding: 1rem 1.2rem;
}

    .profile-security-box.profile-security-on {
        background: #e8f8f0;
        border-color: #bfe8d2;
    }

/* ---- Tab điều hướng bên trong 1 trang (bổ sung 23/10/2026, dùng chung cho "Quyền của tôi" VÀ "Email &
   Mật khẩu" — xem .inner-tab-pane/manage-tabs.js) — nav-pills có sẵn màu navy khi active (xem rule
   .nav-pills .nav-link.active bên trên); chỉ thêm viền trái màu nhấn cho nút đang active, khớp đúng màu
   viền trái của card nội dung bên dưới (--group-accent, bỏ trống thì không có viền — dùng khi các tab
   không gắn với 1 màu module cụ thể nào, VD "Email & Mật khẩu"). */
.inner-tabs {
    flex-wrap: wrap;
    gap: .35rem;
}

    .inner-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-pill);
        font-size: .85rem;
        font-weight: 600;
        padding: .4rem .95rem;
    }

        .inner-tabs .nav-link.active {
            box-shadow: inset 3px 0 0 var(--group-accent, transparent);
        }

/* ---- Card nội dung của 1 tab (bổ sung 23/10/2026) — viền trái + màu icon lấy đúng màu nhấn truyền vào
   (--group-accent, VD ModuleInfo.AccentColor ở "Quyền của tôi") để khớp hệ màu sidebar đã quen mắt, giúp
   quét nhanh "khối nào đang xem" khi trang có nhiều thẻ liên tiếp; mặc định viền xám nhạt khi không có
   màu nhấn riêng. */
.inner-tab-card {
    border-left: 4px solid var(--group-accent, var(--border-soft));
}

.inner-tab-card-icon {
    color: var(--group-accent, var(--brand-accent));
}

.inner-tab-card-subhead {
    padding: .65rem 1.15rem .3rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted-soft);
}

    .inner-tab-card-subhead.border-top {
        border-top: 1px solid var(--border-soft);
        margin-top: .3rem;
    }

    .profile-security-box .oi {
        font-size: 1.3rem;
        color: #b8720a;
    }

    .profile-security-box.profile-security-on .oi {
        color: #178a56;
    }

.profile-security-title {
    font-weight: 700;
    color: #14213d;
    font-size: .9rem;
}

.profile-security-desc {
    color: var(--text-muted-soft);
    font-size: .82rem;
}

/* Trạng thái "tài khoản không gắn hồ sơ nhân sự" ở trang Hồ sơ cá nhân (Quản lý tài khoản) — bổ sung
   15/10/2026, thay cho việc trả thẳng NotFound("...") (ActionResult thô, bỏ qua layout/CSS, hiện chữ
   đen thô trên nền trắng — người dùng báo lại không chuyên nghiệp). */
.profile-empty-state {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 480px;
    margin: 2rem auto;
}

.profile-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #fdf6e3;
    color: #b8720a;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

/* Đồng bộ màu tab điều hướng của khu vực Quản lý tài khoản (RCL Identity UI) với theme navy */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--brand-navy) !important;
}

/* ==========================================================================
   Trang đăng nhập (Areas/Identity/Pages/Account/Login.cshtml)
   ========================================================================== */
.login-page-body {
    background: linear-gradient(160deg, var(--brand-navy-darker) 0%, var(--brand-navy) 55%, #163a7a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: var(--font-sans);
}

.login-wrap {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(4, 12, 33, 0.35);
    padding: 2.25rem 2rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.login-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand-navy, #0f2a5e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.login-brand-title {
    font-weight: 800;
    font-size: 1rem;
    color: #14213d;
    line-height: 1.2;
}

.login-brand-subtitle {
    font-size: .8rem;
    color: var(--text-muted-soft);
}

.login-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .25rem;
    color: #14213d;
}

.login-desc {
    color: var(--text-muted-soft);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.login-card .form-floating > .form-control {
    border-radius: var(--radius-control);
}

.login-card .btn-primary {
    border-radius: var(--radius-control);
    font-size: .95rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.login-hint {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted-soft);
}

/* ---- Đăng nhập: chọn cách đăng nhập (mật khẩu / mã OTP qua email) ---- */
.login-tabs {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    margin-bottom: 1.1rem;
    background: var(--brand-navy-light, #eaf0fb);
    border-radius: var(--radius-control, 10px);
}

.login-tab {
    flex: 1;
    text-align: center;
    padding: .5rem .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted-soft, #5b6b8c);
    text-decoration: none;
    border-radius: 8px;
}

    .login-tab:hover {
        color: var(--brand-navy, #0f2a5e);
    }

    .login-tab.active {
        background: #fff;
        color: var(--brand-navy, #0f2a5e);
        box-shadow: 0 1px 4px rgba(15, 42, 94, .12);
    }

.login-otp-email {
    font-weight: 600;
    color: var(--brand-navy, #0f2a5e);
    overflow-wrap: anywhere;
}

.login-otp-input {
    font-size: 1.5rem;
    letter-spacing: .5rem;
    text-align: center;
    font-weight: 700;
}

.login-otp-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    font-size: .875rem;
}

/* ---- Animation vào trang cho card/stat-tile ở các trang Tổng quan (bổ sung 02/10/2026) ----
   Tôn trọng prefers-reduced-motion: người dùng bật "giảm hiệu ứng chuyển động" thì tắt hẳn, hiện
   ngay trạng thái cuối (không có media query ngược lại nên mặc định không animate gì thêm). */
@media (prefers-reduced-motion: no-preference) {
    .card, .stat-tile {
        animation: hrm-fade-in-up .45s ease-out backwards;
    }

    .stat-tile:nth-child(1) { animation-delay: .00s; }
    .stat-tile:nth-child(2) { animation-delay: .05s; }
    .stat-tile:nth-child(3) { animation-delay: .10s; }
    .stat-tile:nth-child(4) { animation-delay: .15s; }
    .stat-tile:nth-child(5) { animation-delay: .20s; }
    .stat-tile:nth-child(6) { animation-delay: .25s; }
    .stat-tile:nth-child(7) { animation-delay: .30s; }
    .stat-tile:nth-child(8) { animation-delay: .35s; }
}

/* Lưu ý 07/10/2026 — SỬA LẠI ghi chú 05/10/2026 bên dưới, ghi chú đó SAI một điểm quan trọng đã
   kiểm chứng thực tế qua DevTools/Playwright: dùng "animation-fill-mode: both" thì SAU khi animation
   chạy xong, "neutral keyframe" cho transform ở "to" KHÔNG nội suy về từ khoá "none" như tưởng —
   trình duyệt giữ lại ma trận ĐƠN VỊ (`matrix(1,0,0,1,0,0)`, tức translateY(0)) VĨNH VIỄN, vì
   "fill-mode:both" nghĩa là phần tử không bao giờ thực sự "thoát" animation để dùng lại style gốc.
   Ma trận đơn vị KHÔNG PHẢI "none" — theo đặc tả CSS, BẤT KỲ giá trị transform nào khác "none" (kể cả
   đơn vị) vẫn tạo containing block mới cho con position:fixed/absolute — nên lỗi "lịch DateInput định
   vị sai chỗ" ([[fix-dateinput-popover-position-2026-10-05]]) vẫn còn nguyên, chỉ đổi từ "bị đè" sang
   "lệch toạ độ đúng bằng khoảng cách từ đỉnh trang tới .card chứa nó" — xác nhận bằng cách đo
   getComputedStyle(.card).transform ngay sau khi mở lịch: ra "matrix(1,0,0,1,0,0)", không phải
   "none", dù đã đợi quá lâu so với .45s animation. Sửa đúng: đổi "both" thành "backwards" — "backwards"
   vẫn áp style của "from" TRƯỚC khi animation bắt đầu chạy (chống chớp nháy lúc có animation-delay ở
   .stat-tile) nhưng KHÔNG giữ lại style của "to" sau khi chạy xong; sau khi animation kết thúc, phần
   tử trả về đúng style CSS gốc của chính nó (opacity:1, transform:none — vì .card/.stat-tile không
   khai báo 2 thuộc tính này ở đâu khác), dứt điểm được containing block. Keyframe "to" vẫn để trống
   transform như cũ (không cần đổi) — gốc rễ nằm ở fill-mode, không phải ở keyframe. */
@keyframes hrm-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; }
}

/* ---- Banner chào mừng đầu trang Tổng quan (bổ sung 05/10/2026, theo mẫu tham khảo dashboard
   dạng "Xin chào ...") — nền gradient theo đúng tông thương hiệu sẵn có (navy -> xanh accent),
   không copy nguyên màu mẫu tham khảo. ---- */
.hero-banner {
    background: linear-gradient(135deg, var(--brand-navy, #0f2a5e) 0%, var(--brand-accent, #2f6fed) 100%);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.hero-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}

.hero-banner h2 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .2rem;
}

.hero-banner p {
    color: rgba(255, 255, 255, .85);
    margin: 0;
    font-size: .85rem;
}

/* ---- Con trỏ "đang xử lý" toàn màn hình (bổ sung 08/10/2026) ----
   Bật/tắt qua window.hrmBusyCursor (wwwroot/js/busy-cursor.js), gọi từ Services/BusyIndicator.cs mỗi
   khi 1 thao tác Lưu/Xoá đang chạy. Áp !important vì nhiều phần tử con (nút, input...) có cursor
   riêng (pointer, text...) cần bị ghi đè trong lúc đang bận. */
body.hrm-busy, body.hrm-busy * {
    cursor: wait !important;
}

/* ---- Ảnh đại diện nhân sự — khung lớn ở tab "Thông tin cá nhân" (bổ sung 13/10/2026) ----
   Biến thể lớn của .avatar-chip (2.1rem, dùng ở LoginDisplay) + ảnh thật qua .avatar-photo-lg khi
   đã có AvatarUrl. .avatar-edit-wrap/.avatar-edit-btn dựng kiểu nút sửa ảnh đè góc dưới-phải, theo
   đúng mẫu input ẩn đè lên icon hiển thị (input opacity:0 phủ kín nút) — không cần JS/thư viện icon
   ngoài, chỉ 1 SVG inline trong Razor. */
.avatar-chip-lg {
    width: 5rem;
    height: 5rem;
    font-size: 1.6rem;
}

.avatar-photo-lg {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-soft);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.avatar-edit-wrap {
    position: relative;
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
}

.avatar-edit-btn {
    position: absolute;
    right: -.15rem;
    bottom: -.15rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    border: 2px solid #fff;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .15s ease;
}

.avatar-edit-btn:hover {
    background: var(--brand-navy-dark);
}

.avatar-edit-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Dùng chung rule input[type=file] ẩn trong suốt cho nút đổi ảnh ở Trang chủ (bổ sung 15/10/2026) —
   PHẢI đặt ở đây (theme.css, global, không bị Blazor CSS-cô-lập) chứ không phải trong
   Pages/Index.razor.css: <InputFile> là component Blazor built-in, <input> nó tự render ra KHÔNG
   mang thuộc tính scope b-xxx như các thẻ viết tay trong cùng file .razor, nên rule đặt trong file
   .razor.css (tự động bị gắn thêm điều kiện scope khi build) sẽ KHÔNG BAO GIỜ khớp được — input gốc
   lộ ra ngoài, hiện chữ "Choose File"/"e..." bị cắt xén đè lên icon camera thay vì ẩn trong suốt.
   Phần định vị/màu sắc nút (.portal-hero-avatar-edit-btn chính nó) vẫn để trong Index.razor.css bình
   thường vì phần tử ĐÓ có mang scope attribute, không bị ảnh hưởng. */
.portal-hero-avatar-edit-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.avatar-section .avatar-actions {
    min-width: 0;
}