html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

:root {
    --app-blue: #075bbb;
    --app-blue-2: #0b6fe8;
    --app-orange: #ff8a3d;
    --app-yellow: #ffc928;
    --app-bg: #f4f8fd;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-border: #dbe7f4;
}

html, body {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--app-text);
    background: var(--app-bg);
}

/* Login */
.auth-body {
    overflow: hidden;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: radial-gradient(circle at 0% 0%, rgba(7, 91, 187, .18) 0, rgba(7, 91, 187, .10) 18%, transparent 36%), radial-gradient(circle at 100% 100%, rgba(255, 138, 61, .22) 0, rgba(255, 138, 61, .12) 20%, transparent 42%), linear-gradient(135deg, #f7fbff 0%, #ffffff 45%, #fff7ef 100%);
}

.auth-card {
    width: min(470px, 100%);
    border: 2px solid var(--app-orange);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 70px rgba(15, 23, 42, .14);
    padding: 34px 38px;
}

.auth-logo {
    width: 210px;
    height: 78px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    font-weight: 800;
}

.brand-coop {
    color: #0674c9;
    font-size: 20px;
}

.brand-smile {
    color: #ff5b22;
    font-style: italic;
    font-size: 20px;
}

.brand-cheers {
    color: #0b57aa;
    background: #ffd64d;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 13px;
    margin-left: 6px;
}

.auth-card h1 {
    text-align: center;
    color: #075bbb;
    font-size: 25px;
    font-weight: 900;
    margin: 0 0 8px;
    letter-spacing: 0;
}

.auth-subtitle {
    text-align: center;
    color: var(--app-muted);
    margin-bottom: 18px;
}

.auth-input .input-group-text {
    width: 48px;
    justify-content: center;
    background: #f8fbff;
    color: #3065a8;
    border-color: #c8d8ee;
}

.auth-input .form-control {
    height: 48px;
    border-color: #c8d8ee;
}

    .auth-input .form-control:focus {
        border-color: var(--app-blue-2);
        box-shadow: 0 0 0 .2rem rgba(11, 111, 232, .12);
    }

.auth-submit {
    height: 48px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(90deg, #1475e8, #075bbb);
    box-shadow: 0 12px 22px rgba(7, 91, 187, .24);
}

.auth-note {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #ffd078;
    border-radius: 10px;
    background: #fff7df;
    color: #7a5314;
    font-size: 14px;
}

/* App layout */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 246px 1fr;
    background: #f3f7fc;
}

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--app-border);
    padding: 20px 14px;
}

.app-sidebar-brand {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-blue);
    font-weight: 900;
}

.app-nav {
    margin-top: 22px;
    display: grid;
    gap: 8px;
}

    .app-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        padding: 0 14px;
        border-radius: 10px;
        color: #475569;
        font-weight: 700;
        text-decoration: none;
    }

        .app-nav a.active,
        .app-nav a:hover {
            background: #eaf3ff;
            color: var(--app-blue);
        }

.app-main {
    min-width: 0;
}

.app-topbar {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: linear-gradient(90deg, #075bbb, #0b6fe8);
    color: #fff;
    box-shadow: 0 8px 20px rgba(7, 91, 187, .18);
}

.app-content {
    padding: 28px 34px;
}

.app-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
}

/* Global loading */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(9, 24, 49, .82);
    backdrop-filter: blur(3px);
}

    .app-loading.show {
        display: flex;
    }

.app-loading-box {
    text-align: center;
    color: #fff;
    font-weight: 800;
}

.app-spinner {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 7px solid rgba(255, 255, 255, .22);
    border-top-color: var(--app-yellow);
    border-right-color: #18a2ff;
    animation: appSpin .85s linear infinite;
}

.app-loading-small {
    margin-top: 8px;
    color: #ffc928;
    font-size: 14px;
}

@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: none;
    }

    .app-content {
        padding: 20px 16px;
    }
}

:root {
    --app-primary: #0756B8;
    --app-primary-dark: #06469A;
    --app-primary-light: #EAF3FF;
    --app-orange: #F58A00;
    --app-yellow: #FFC928;
    --app-bg: #F4F7FB;
    --app-text: #172033;
    --app-muted: #667085;
    --app-border: #E2E8F0;
    --app-shadow: 0 8px 28px rgba(15, 38, 74, .07);
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Login */
/* Login background - hotfix */
.login-page {
    position: relative;
    overflow: hidden;
    background: radial-gradient(900px 420px at 0% 0%, rgba(56, 152, 255, .22) 0%, rgba(56, 152, 255, 0) 62%), radial-gradient(920px 460px at 100% 100%, rgba(255, 145, 35, .20) 0%, rgba(255, 145, 35, 0) 64%), linear-gradient(150deg, #063a86 0%, #0a4ea7 48%, #0e63bc 100%);
}

    .login-page::before,
    .login-page::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 0;
        border-radius: 999px;
        filter: blur(1px);
        box-sizing: border-box;
    }

    .login-page::before {
        width: 420px;
        height: 190px;
        left: -150px;
        top: -72px;
        background: linear-gradient(130deg, rgba(83, 176, 255, .34) 0%, rgba(28, 112, 222, .20) 56%, rgba(255, 150, 44, .28) 100%);
        transform: rotate(-15deg);
        opacity: .78;
    }

    .login-page::after {
        width: 500px;
        height: 220px;
        right: -180px;
        bottom: -96px;
        background: linear-gradient(135deg, rgba(44, 164, 255, .22) 0%, rgba(41, 164, 92, .22) 52%, rgba(255, 138, 24, .30) 100%);
        transform: rotate(-12deg);
        opacity: .82;
    }

.login-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.login-decoration-top {
    width: 520px;
    height: 170px;
    top: -36px;
    left: -210px;
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(70, 170, 255, .22), rgba(255, 153, 51, .18) 62%, transparent 100%);
    transform: rotate(-12deg);
    opacity: .78;
}

.login-decoration-bottom {
    width: 560px;
    height: 190px;
    right: -220px;
    bottom: -60px;
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(44, 164, 255, .18), rgba(53, 182, 90, .20) 52%, rgba(255, 138, 24, .22) 100%);
    transform: rotate(-14deg);
    opacity: .82;
}

/* Remove old animation causing transform override */
@media (max-width: 576px) {
    .login-page::before {
        width: 280px;
        height: 130px;
        left: -110px;
        top: -50px;
    }

    .login-page::after {
        width: 300px;
        height: 150px;
        right: -120px;
        bottom: -70px;
    }

    .login-decoration-top,
    .login-decoration-bottom {
        opacity: .62;
    }
}

/* [MỚI] Viền LED cam của form đăng nhập - sáng đậm rồi mờ dần, lặp lại,
   cùng kiểu hiệu ứng với Toast thông báo và trang Hướng dẫn sử dụng. */
@keyframes loginLedGlowOrange {
    0%, 100% {
        border-color: rgba(245, 138, 0, .45);
        box-shadow: 0 22px 60px rgba(24, 58, 105, .14), 0 0 8px rgba(245, 138, 0, .22);
    }

    50% {
        border-color: rgba(245, 138, 0, 1);
        box-shadow: 0 22px 60px rgba(24, 58, 105, .14), 0 0 32px 6px rgba(245, 138, 0, .70);
    }
}

.login-card {
    position: relative;
    z-index: 2;
    width: min(100%, 470px);
    padding: 34px 38px;
    background: rgba(255, 255, 255, .96);
    border: 2px solid rgba(245, 138, 0, .72);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(24, 58, 105, .14);
    /* [MỚI - 08/09/2026] Thêm fadeIn 1 lần lúc trang vừa hiện (dùng chung keyframe
       appContentFadeIn với .app-content) - chạy song song, không đụng property
       với loginLedGlowOrange (border-color/box-shadow) nên không xung đột. */
    animation: loginLedGlowOrange 2.6s ease-in-out infinite, appContentFadeIn .22s ease-out;
}

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

.login-logo-wrap {
    width: 210px;
    height: 78px;
    border-radius: 18px;
    background: #fff;
    padding: 10px 18px;
    box-shadow: 0 8px 24px rgba(7, 86, 184, .12);
}

    .login-logo-wrap img,
    .header-logo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.login-title {
    color: var(--app-primary);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.login-subtitle {
    margin-top: 7px;
    color: var(--app-muted);
    font-size: .95rem;
}

/* [MỚI - không có trong GAS] Icon badge dùng cho các màn hình xác thực dùng chung
   khung .login-card (ví dụ màn hình bắt buộc đổi mật khẩu), tham khảo phong cách
   .must-change-icon bên GAS (Phân ca). */
.login-icon-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--app-primary-light);
    color: var(--app-primary);
    font-size: 1.6rem;
}

.app-input-group .input-group-text,
.app-input-group .form-control,
.password-toggle {
    min-height: 48px;
    border-color: #C9D5E5;
}

.app-input-group .input-group-text {
    background: #fff;
    color: #64748B;
}

.app-input-group .form-control:focus {
    border-color: #6FA7E8;
    box-shadow: 0 0 0 .22rem rgba(7, 86, 184, .10);
}

.password-toggle {
    border-left: 0;
    background: #fff;
    color: #64748B;
}

.app-btn-primary {
    background: linear-gradient(135deg, #0B67D8 0%, #0756B8 100%);
    border: 0;
    color: #fff;
    min-height: 46px;
    font-weight: 700;
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(7, 86, 184, .20);
}

    .app-btn-primary:hover {
        color: #fff;
        background: linear-gradient(135deg, #0756B8 0%, #06469A 100%);
    }

.login-security {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #FFF8DF;
    border: 1px solid #F6DF8A;
    color: #765C00;
    font-size: .82rem;
}

/* App layout */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    height: 74px;
    color: #fff;
    background: linear-gradient(100deg, #064AA2 0%, #0756B8 60%, #0A63C9 100%);
    box-shadow: 0 3px 16px rgba(0, 46, 112, .18);
}

.header-inner {
    height: 74px;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

    .app-brand:hover {
        color: #fff;
    }

.header-logo-wrap {
    width: 150px;
    height: 46px;
    flex: 0 0 150px;
    border-radius: 9px;
    background: #fff;
    padding: 6px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.13);
}

.app-brand-title {
    font-size: 1.12rem;
    font-weight: 750;
    white-space: nowrap;
}

.header-user {
    line-height: 1.25;
}

.header-user-role {
    margin-top: 3px;
    font-size: .78rem;
    color: rgba(255,255,255,.78);
}

.header-divider {
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,.32);
}

.header-icon-btn {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 9px;
}

    .header-icon-btn:hover {
        color: #fff;
        background: rgba(255,255,255,.12);
    }

/* ============================================================
   [MỚI] Chuông thông báo (badge đỏ + bảng thả xuống) + Toast
   chủ động viền cam sáng đèn LED. Xem notifications.js.
   ============================================================ */
.notif-wrap {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--app-primary-dark);
}

.notif-panel {
    position: fixed;
    z-index: 25000;
    right: 18px;
    top: 68px;
    width: min(420px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 100px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 38, 74, .22);
    border: 1px solid var(--app-border);
    overflow: hidden;
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 800;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-primary-light);
}

.notif-panel-body {
    overflow-y: auto;
    padding: 6px;
}

.notif-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--app-muted);
    font-size: 14px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

    .notif-item:hover {
        background: var(--app-primary-light);
    }

.notif-item-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-primary-light);
    color: var(--app-primary);
}

.notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-item-title {
    font-weight: 700;
    color: var(--app-text);
    font-size: 14px;
}

.notif-item-meta {
    font-size: 12px;
    color: var(--app-muted);
}

.notif-item-message {
    font-size: 13px;
    color: var(--app-text);
    white-space: normal;
    word-break: break-word;
}

/* ---- Toast chủ động, viền cam sáng đèn LED ---- */
.notif-toast-host {
    position: fixed;
    z-index: 26000;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
}

@keyframes notifLedGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 138, 0, .55), 0 10px 26px rgba(15, 38, 74, .20);
    }

    50% {
        box-shadow: 0 0 16px 4px rgba(245, 138, 0, .60), 0 10px 26px rgba(15, 38, 74, .20);
    }
}

.notif-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--app-orange);
    border-radius: 12px;
    animation: notifLedGlow 1.6s ease-in-out infinite;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
}

.notif-toast-hide {
    opacity: 0;
    transform: translateY(8px);
}

.notif-toast-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF2E0;
    color: var(--app-orange);
}

.notif-toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.notif-toast-title {
    font-weight: 800;
    font-size: 13px;
    color: var(--app-text);
}

.notif-toast-summary {
    font-size: 12px;
    color: var(--app-muted);
}

.notif-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.app-btn-logout {
    min-height: 39px;
    color: #fff;
    background: var(--app-yellow);
    border: 0;
    color: #7A4E00;
    font-weight: 800;
    border-radius: 9px;
    padding-inline: 18px;
}

.app-shell {
    display: grid;
    grid-template-columns: 246px 1fr;
    min-height: calc(100vh - 74px);
}

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--app-border);
}

.sidebar-content {
    min-height: calc(100vh - 74px);
    display: flex;
    flex-direction: column;
    padding: 22px 10px 16px;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 10px;
    color: #4B5565;
    font-weight: 700;
    text-decoration: none;
}

    .app-nav-link i {
        font-size: 1.05rem;
    }

    .app-nav-link.active,
    .app-nav-link:hover {
        background: var(--app-primary-light);
        color: var(--app-primary);
    }

.sidebar-support {
    padding-top: 18px;
}

.support-card {
    padding: 16px;
    border-radius: 12px;
    background: #FFF7DF;
    border: 1px solid #F6DF8A;
}

.support-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--app-orange);
    background: #fff;
    border-radius: 9px;
    margin-bottom: 10px;
}

.app-content {
    min-width: 0;
    padding: 30px 34px;
    /* [MỚI - 08/09/2026] Mỗi lần chuyển menu là 1 lần tải lại trang đầy đủ (không
       phải SPA) - nội dung "đập" thẳng vào màn hình ngay khi tải xong trông hơi
       cứng/giật. Fade-in nhẹ 180ms làm cảm giác chuyển trang mượt hơn mà không
       trì hoãn thời điểm hiển thị (khác overlay loading - overlay lo phần "đang
       chờ", còn hiệu ứng này lo phần "vừa xong, hiện ra cho mượt"). */
    animation: appContentFadeIn .18s ease-out;
}

@keyframes appContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-content {
        animation: none;
    }
}

/* Global loading */
.global-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 49, .86);
    backdrop-filter: blur(4px);
}

    .global-loading.show {
        display: flex;
    }

.global-loading-box {
    text-align: center;
    color: #fff;
}

.global-spinner {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 7px solid rgba(255,255,255,.20);
    border-top-color: var(--app-yellow);
    border-right-color: #20A7FF;
    animation: appSpin .8s linear infinite;
}

.global-loading-title {
    font-weight: 800;
    font-size: 1rem;
}

.global-loading-subtitle {
    margin-top: 8px;
    color: var(--app-yellow);
    font-size: .9rem;
    font-weight: 700;
}

@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 992px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: none;
    }

    .app-content {
        padding: 22px 16px;
    }

    .app-brand-title {
        display: none;
    }
}

:root {
    --app-orange-strong: #e85d04;
}

/* Top tabbar: viền cam đậm ở đáy */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    overflow: hidden;
}

    .app-header::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #ff8a00 0%, var(--app-orange-strong) 100%);
    }

/* Nới rộng sidebar để text menu 1 hàng. [SỬA 22/09/2026] Thêm @media (min-width: 993px) -
   trước đây 2 rule này KHÔNG có media query, áp dụng ở MỌI độ rộng kể cả mobile (≤992px, lúc
   .app-sidebar đã display:none) - .app-shell vẫn giữ nguyên cột lưới đầu tiên 300px dù không
   còn gì bên trong (CSS Grid vẫn cấp đủ track theo kích thước khai báo, không tự co lại chỉ vì
   phần tử con display:none), khiến TOÀN BỘ trang (mọi màn hình dùng chung _Layout.cshtml, không
   riêng gì "Quản lý nhân sự") bị tràn ngang ~300px so với khung nhìn thật trên điện thoại/màn
   hẹp - phát hiện tình cờ khi dựng lại đúng cấu trúc .app-frame/.app-shell/.app-sidebar thật để
   kiểm tra layout tab "Tài khoản đăng nhập" mới thêm (đo bằng scrollWidth > innerWidth thật sự,
   không phải đoán qua ảnh chụp). Bọc lại trong @media (min-width: 993px) - đúng ý định gốc của
   comment "Nới rộng SIDEBAR" (chỉ có ý nghĩa khi sidebar đang HIỂN THỊ, tức desktop). */
@media (min-width: 993px) {
    .app-shell {
        grid-template-columns: 300px 1fr;
    }

    .app-sidebar {
        width: 300px;
        min-width: 300px;
    }
}

.app-nav-link {
    min-height: 54px;
    padding: 0 16px;
}

    .app-nav-link span {
        white-space: nowrap;
        line-height: 1.25;
    }

    /* Active + hover: pha xanh + viền cam */
    .app-nav-link.active,
    .app-nav-link:hover {
        color: #0756B8;
        background: linear-gradient(90deg, rgba(7, 86, 184, .16) 0%, rgba(7, 86, 184, .06) 100%);
        border: 1px solid rgba(232, 93, 4, .78);
        box-shadow: inset 4px 0 0 #0756B8, 0 8px 16px rgba(7, 86, 184, .10);
    }

/* Mobile offcanvas sidebar */
.mobile-sidebar .offcanvas-header {
    background: linear-gradient(100deg, #064AA2 0%, #0756B8 60%, #0A63C9 100%);
    color: #fff;
    border-bottom: 3px solid #ff8a00;
}

.mobile-sidebar .offcanvas-title {
    color: #fff;
}

.mobile-sidebar .btn-close {
    filter: invert(1);
}

/* Responsive */
@media (max-width: 992px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .app-content {
        padding: 18px 12px;
    }

    .app-brand-title {
        display: inline-block;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 576px) {
    .app-header,
    .header-inner {
        height: 64px;
    }

    .header-logo-wrap {
        width: 118px;
        height: 38px;
        flex: 0 0 118px;
        padding: 5px 9px;
    }

    .app-btn-logout {
        min-height: 34px;
        padding-inline: 10px;
        font-size: .88rem;
    }
}

/* ===== Bottom bar giống GAS ===== */
.app-frame {
    min-height: calc(100vh - 74px);
    display: flex;
    flex-direction: column;
}

.app-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 34px;
    background: #fff;
    border-top: 1px solid var(--app-border);
    color: #7b8798;
    font-size: .78rem;
}

@media (max-width: 992px) {
    .app-frame {
        min-height: calc(100vh - 74px);
    }

    .app-footer {
        padding: 14px 20px;
    }
}

@media (max-width: 576px) {
    .app-frame {
        min-height: calc(100vh - 66px);
    }

    .app-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
        gap: 8px;
    }
}

.login-page {
    min-height: 100dvh;
}

    .login-page .container {
        min-height: 100dvh;
        align-items: center !important;
        justify-content: center !important;
    }

@media (max-width: 576px) {
    .login-page .container {
        min-height: 100dvh;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .login-card {
        width: calc(100vw - 28px);
        max-width: 410px;
        margin: 0 auto;
        padding: 26px 18px;
        border-radius: 18px;
    }

    .login-logo-wrap {
        width: min(180px, 62vw);
        height: 72px;
    }

    .login-title {
        font-size: 1.45rem;
    }

    .login-subtitle {
        font-size: .95rem;
    }
}
    .app-input-group .input-group-text,
    .app-input-group .form-control,
    .password-toggle {
        min-height: 50px;
    }

    .app-btn-primary {
        min-height: 50px;
        font-size: 1rem;
    }


@media (max-width: 576px) {
    .app-header {
        overflow: visible;
    }

    .header-inner {
        gap: 6px;
    }

    .app-brand {
        min-width: 0;
        gap: 6px;
        flex: 1 1 auto;
    }

    .header-logo-wrap {
        width: 96px;
        height: 34px;
        flex: 0 0 96px;
        padding: 4px 8px;
    }

    .app-brand-title {
        display: inline-block;
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .86rem;
    }

    .header-actions {
        margin-left: auto;
        flex-shrink: 0;
        gap: 6px !important;
    }

    .header-icon-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 8px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    #changePasswordBtn {
        display: inline-flex !important;
    }

    #notificationBtn {
        display: inline-flex !important;
    }

    .app-btn-logout {
        min-height: 34px;
        min-width: 40px;
        padding: 0 10px;
        border-radius: 8px;
        white-space: nowrap;
        font-size: .84rem;
    }
}

/* Máy rất hẹp: ưu tiên nút chức năng hơn title */
@media (max-width: 430px) {
    .app-brand-title {
        display: none;
    }
}

/* [SỬA 21/09/2026] "Quản lý nhân sự" (5 nút ở .page-meta - nhiều nhất trong số các trang
   dùng chung .page-heading/.page-meta này: WorkPlanLog/CheckinLog/LeaveApproval/GpsAnomaly/
   StoreAdmin) lộ ra lỗi đã có sẵn từ trước ở CHUNG khối này - .page-heading/.page-meta trước
   đó không có "flex-wrap: wrap" nên khi tổng bề rộng khối tiêu đề + đủ nút KHÔNG đủ chỗ trên
   đúng 1 hàng (màn hình vừa/hẹp, NHƯNG CHƯA chạm ngưỡng @media 992px chuyển sang xếp cột bên
   dưới), trình duyệt không có cách nào khác ngoài để tràn ra ngoài khung nhìn - nút cuối cùng
   ("Thêm nhân sự") bị đẩy khuất hẳn ra ngoài (mất góc/mất hẳn nút, đúng như ảnh chụp anh Tân
   gửi), tiêu đề cũng có thể bị bóp hẹp bất thường theo. Thêm "flex-wrap: wrap" ở CẢ 2 cấp
   (khối cha .page-heading VÀ khối nút .page-meta) - khối nút tự xuống hẳn 1 hàng riêng bên
   dưới tiêu đề khi không đủ chỗ, và nếu 1 hàng nút vẫn còn quá dài thì TỰ xuống hàng tiếp theo
   thay vì tràn/mất nút - không cần chờ tới đúng ngưỡng 992px mới xử lý. */
.page-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

/* Khối tiêu đề (luôn là <div> đầu tiên trong .page-heading ở mọi trang đang dùng chung class
   này) - giữ chiều rộng tối thiểu hợp lý, tự co giãn theo khoảng trống còn lại thay vì bị bóp
   nhỏ dần về gần 0 khi .page-meta chiếm hết chỗ (nguyên nhân tiêu đề từng bị xuống dòng theo
   TỪNG CHỮ trong ảnh chụp anh Tân gửi). */
.page-heading > :first-child {
    flex: 1 1 260px;
    min-width: 0;
}

.page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: #1b2438;
    letter-spacing: .01em;
}

.page-subtitle {
    margin: 4px 0 0;
    color: #5c6c84;
    font-size: 1rem;
}

.page-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #71809a;
    font-size: .84rem;
    white-space: nowrap;
}

.app-btn-outline {
    border: 1px solid #94b7ec;
    color: #1b5fbf;
    background: #fff;
    font-weight: 700;
}

    .app-btn-outline:hover {
        color: #0f4ca0;
        border-color: #5f96e0;
        background: #eef5ff;
    }

/* Nút xóa (viền đỏ nhạt, cùng cỡ/độ đậm với .app-btn-outline) */
.app-btn-outline-danger {
    border: 1px solid #f0b4b4;
    color: #c0392b;
    background: #fff;
    font-weight: 700;
}

    .app-btn-outline-danger:hover,
    .app-btn-outline-danger:focus-visible {
        color: #a52a1d;
        border-color: #e08a8a;
        background: #fdf0f0;
    }

.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #fff;
    padding: 18px 16px 16px;
    box-shadow: 0 10px 22px rgba(15, 39, 78, .06);
}

    .stat-card::after {
        content: "";
        position: absolute;
        top: -22px;
        right: -22px;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        opacity: .22;
    }

.stat-blue::after {
    background: #5fa8ff;
}

.stat-orange::after {
    background: #ffa347;
}

.stat-yellow::after {
    background: #ffd44f;
}

.stat-green::after {
    background: #7eddb0;
}

.stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: #0e57b3;
    background: #eaf3ff;
}

.stat-orange .stat-icon {
    color: #d96a00;
    background: #fff1e3;
}

.stat-yellow .stat-icon {
    color: #b88400;
    background: #fff7da;
}

.stat-green .stat-icon {
    color: #1a8f5d;
    background: #e8faef;
}

.stat-label {
    color: #60728e;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 2rem;
    line-height: 1;
    font-weight: 850;
    color: #1a2740;
    margin: 4px 0 6px;
}

.stat-note {
    color: #90a0b8;
    font-size: .8rem;
    font-weight: 600;
}

.app-card {
    border: 1px solid #e1eaf6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 38, 74, .06);
}

/* [MỚI 20/09/2026] Viền đèn LED cam bao quanh MỌI .app-card trên toàn app - trước đây chỉ
   áp dụng lẻ tẻ ở 1 vài trang (#employeeAdminPage, xem ghi chú cũ bên dưới - đã gộp về đây
   cho khỏi trùng khai báo) - anh Tân yêu cầu đồng bộ hoá cho tất cả các view sau khi thấy
   "Quản lý địa điểm" dùng đúng khung/màu này đẹp hơn hẳn khung viền xám nhạt mặc định. */
.app-card {
    border: 1.5px solid #ff9d3d;
    box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 10px 22px rgba(180, 90, 10, .10);
}

.app-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #e8eef7;
}

.app-card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1c2a44;
}

.app-card-subtitle {
    margin-top: 4px;
    color: #74839a;
    font-size: .88rem;
}

.app-table th {
    border: 0;
    background: #1058b8;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 11px 14px;
    text-transform: uppercase;
}

.app-table td {
    padding: 11px 14px;
    vertical-align: middle;
    border-color: #edf2fa;
    color: #1f2a3d;
}

.hr-dashboard-mini-card {
    border-top: 2px solid #f58a00;
}

@media (max-width: 992px) {
    .page-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    /* [SỬA 21/09/2026] "flex: 1 1 260px" ở rule gốc (áp cho layout HÀNG NGANG ở màn rộng) đổi
       ý nghĩa hoàn toàn khi .page-heading chuyển sang "flex-direction: column" ở đây -
       flex-basis lúc đó tính theo trục chính MỚI LÀ CHIỀU DỌC, vô tình ép khối tiêu đề cao
       tối thiểu 260px, tạo khoảng trắng rất lớn giữa tiêu đề và hàng nút bên dưới. Trả lại
       auto để khối tiêu đề chỉ cao đúng bằng nội dung thật của nó như trước khi sửa. */
    .page-heading > :first-child {
        flex: none;
    }

    /* [SỬA 21/09/2026] "justify-content: space-between" cũ giãn đều các nút ra sát 2 mép màn
       hình - đẹp khi ĐỦ ĐẦY 1 hàng, nhưng xấu/rời rạc khi nút xuống hàng 2 (hàng cuối thường
       không đủ nút để lấp hết bề ngang, khoảng cách giữa vài nút lẻ trông rất bất thường -
       đúng lỗi "chen dòng" trong ảnh chụp anh Tân gửi ở khúc ~992px). Đổi sang canh trái + gap
       cố định (đã khai ở rule gốc .page-meta) - đều đặn ở MỌI hàng, kể cả hàng cuối lẻ nút. */
    .page-meta {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .page-title {
        font-size: 1.6rem;
    }

    .page-subtitle {
        font-size: .92rem;
    }

    .stat-value {
        font-size: 1.7rem;
    }

    .app-card-title {
        font-size: 1.03rem;
    }

    .app-card-subtitle {
        font-size: .82rem;
    }

    .app-table th,
    .app-table td {
        padding: 10px 11px;
        font-size: .85rem;
    }
}

/* [MỚI] Modal đổi mật khẩu - giao diện desktop (trước đây chỉ có style cho mobile,
   modal hiển thị mặc định của Bootstrap nên trông sơ sài). Tái sử dụng lại
   .app-input-group/.password-toggle/.app-btn-primary đã dùng ở trang Đăng nhập để
   đảm bảo đồng bộ giao diện toàn ứng dụng. */
#changePasswordModal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 38, 74, .22);
}

#changePasswordModal .modal-header {
    align-items: center;
    padding: 20px 24px;
    border-bottom: 0;
    background: linear-gradient(135deg, #0B67D8 0%, #0756B8 100%);
    color: #fff;
}

    #changePasswordModal .modal-header .modal-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        font-size: 1.12rem;
    }

    #changePasswordModal .modal-header .change-password-icon-badge {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .18);
        font-size: 1.15rem;
    }

    #changePasswordModal .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: .85;
    }

        #changePasswordModal .modal-header .btn-close:hover {
            opacity: 1;
        }

#changePasswordModal .modal-body {
    padding: 26px 26px 10px;
}

#changePasswordModal .form-label {
    color: #344054;
}

#changePasswordModal .modal-footer {
    padding: 16px 26px 22px;
    border-top: 1px solid #EEF2F6;
}

    #changePasswordModal .modal-footer .btn {
        min-height: 44px;
        border-radius: 9px;
        font-weight: 700;
    }

/* Change password modal - mobile safe */
@media (max-width: 576px) {
    #changePasswordModal .modal-dialog {
        margin: 0.6rem auto;
        max-width: calc(100vw - 0.8rem);
    }

    #changePasswordModal .modal-content {
        max-height: calc(100dvh - 1.2rem);
        border-radius: 14px;
        overflow: hidden;
    }

    #changePasswordModal .modal-header {
        padding: 12px 14px;
    }

    #changePasswordModal .modal-title {
        font-size: 1.05rem;
    }

    #changePasswordModal .modal-body {
        padding: 12px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #changePasswordModal .form-label {
        font-size: 0.94rem;
        margin-bottom: 0.32rem;
    }

    #changePasswordModal .form-control {
        min-height: 44px;
        font-size: 1rem;
    }

    #changePasswordModal .modal-footer {
        padding: 10px 14px 12px;
        gap: 8px;
    }

        #changePasswordModal .modal-footer .btn {
            flex: 1 1 0;
            min-height: 40px;
            white-space: nowrap;
        }
}

@media (max-width: 390px) {
    #changePasswordModal .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 0.6rem);
    }

    #changePasswordModal .modal-title {
        font-size: 1rem;
    }
}

/* ===== Sidebar Theme V2: Thick Stripe 3D ===== */
.app-sidebar {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 70% at 10% -10%, rgba(110, 182, 255, .28), transparent 55%), radial-gradient(90% 60% at 100% 110%, rgba(255, 145, 32, .22), transparent 58%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%);
    border-right: 1px solid rgba(255, 255, 255, .16);
}

    .app-sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient( 90deg, rgba(255,255,255,.20) 0 2px, rgba(0,0,0,.12) 2px 4px, rgba(255,255,255,.05) 4px 18px );
        opacity: .5;
        mix-blend-mode: screen;
    }

    .app-sidebar::after {
        content: "";
        position: absolute;
        left: -35%;
        bottom: -18%;
        width: 130%;
        height: 42%;
        pointer-events: none;
        background: linear-gradient(110deg, rgba(63, 176, 255, .28), rgba(63, 176, 255, 0) 58%), linear-gradient(110deg, rgba(255, 151, 41, .20), rgba(255, 151, 41, 0) 62%);
        transform: rotate(-7deg);
    }

.sidebar-content {
    position: relative;
    z-index: 1;
}

.app-nav-link {
    color: #edf5ff;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .04);
    transition: .2s ease;
}

    .app-nav-link i {
        color: #c2ddff;
        transition: .2s ease;
    }

    .app-nav-link span {
        color: #eef6ff;
        font-weight: 750;
    }

    .app-nav-link:hover {
        border-color: rgba(255, 158, 62, .8);
        background: linear-gradient(95deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
        box-shadow: inset 4px 0 0 #6ab4ff, 0 10px 20px rgba(6, 37, 92, .3);
        transform: translateY(-1px);
    }

        .app-nav-link:hover i,
        .app-nav-link:hover span {
            color: #fff;
        }

    /* Active glow orange */
    .app-nav-link.active {
        border-color: rgba(255, 142, 25, .95);
        background: linear-gradient(95deg, rgba(117, 192, 255, .22), rgba(255,255,255,.08));
        box-shadow: inset 4px 0 0 #fff, 0 0 0 1px rgba(255, 173, 82, .2), 0 0 12px rgba(255, 146, 40, .5), 0 0 24px rgba(255, 146, 40, .32);
    }

        .app-nav-link.active i,
        .app-nav-link.active span {
            color: #ffd58a;
            text-shadow: 0 0 8px rgba(255, 180, 80, .75), 0 0 18px rgba(255, 150, 46, .5);
        }

/* [MỚI 20/09/2026] Nhãn "Quản trị" tách nhóm chức năng dùng chung (Tổng quan/Chấm công/
   Lịch sử/Nghỉ phép/Kế hoạch làm việc/Biểu mẫu - ai cũng thấy) khỏi nhóm chỉ HR/ADMIN mới
   thấy (Kế hoạch Tổng hợp/Nhật ký chấm công/Kiểm tra bất thường/Duyệt nghỉ phép/Quản lý
   cửa hàng) - trước đó 2 nhóm nối liền nhau không phân biệt được, danh sách đã dài thêm
   nhiều mục nên cần tách rõ. Kẻ 1 đường viền mảnh phía trên làm ranh giới trực quan, chữ
   nhỏ/viết hoa/mờ hơn nav-link thường - đúng quy ước "section label" phổ biến ở sidebar có
   nhóm, không lấn át các nav-link cạnh nó. */
.nav-section-label {
    margin-top: 10px;
    padding: 12px 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .92rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

/* Keep support card harmonious */
.support-card {
    background: linear-gradient(145deg, rgba(255, 246, 220, .97), rgba(255, 236, 186, .96));
    border: 1px solid rgba(245, 191, 98, .85);
    box-shadow: 0 10px 20px rgba(7, 39, 95, .26);
}

/* ===== V2 fix for mobile offcanvas menu ===== */
@media (max-width: 992px) {
    .mobile-sidebar .offcanvas-header {
        background: radial-gradient(120% 70% at 10% -10%, rgba(110, 182, 255, .24), transparent 55%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%);
        border-bottom: 3px solid #ff8f2a;
    }

    .mobile-sidebar .offcanvas-title {
        color: #f3f8ff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    }

    /* [SỬA 22/09/2026] "overflow: hidden" chặn luôn cả cuộn dọc (Bootstrap mặc định
       "overflow-y: auto" cho .offcanvas-body, bị ghi đè mất) - trên máy cao (PC) danh
       sách menu vừa đủ 1 màn hình nên không ai để ý, nhưng màn hình thấp hơn (iPhone
       15 Pro Max...) menu dài hơn viewport, mục cuối ("Phân quyền" - mới thêm mục 47)
       bị cắt mất hẳn, không có cách nào cuộn xuống để bấm được. Đổi sang chỉ chặn
       tràn ngang (overflow-x, giữ đúng mục đích ban đầu của rule - không cho hoạ tiết
       sọc trang trí ở ::before bên dưới tràn ra ngoài khung bo tròn), cho phép cuộn
       dọc khi menu dài hơn khung nhìn. */
    .mobile-sidebar .offcanvas-body {
        position: relative;
        background: radial-gradient(90% 55% at 100% 110%, rgba(255, 145, 32, .18), transparent 58%), linear-gradient(180deg, #0a4ea7 0%, #0b63bc 52%, #0a55af 100%) !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .mobile-sidebar .offcanvas-body::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient( 90deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.10) 2px 4px, rgba(255,255,255,.04) 4px 18px );
            opacity: .42;
            mix-blend-mode: screen;
        }

        .mobile-sidebar .offcanvas-body nav {
            position: relative;
            z-index: 1;
        }

    .mobile-sidebar .app-nav-link {
        color: #eef6ff !important;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, .05);
    }

        .mobile-sidebar .app-nav-link i,
        .mobile-sidebar .app-nav-link span {
            color: #eaf3ff !important;
            text-shadow: none;
        }

        .mobile-sidebar .app-nav-link:hover {
            border-color: rgba(255, 158, 62, .82);
            background: linear-gradient(95deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
            box-shadow: inset 4px 0 0 #6ab4ff, 0 10px 20px rgba(6, 37, 92, .30);
        }

        .mobile-sidebar .app-nav-link.active {
            border-color: rgba(255, 142, 25, .95);
            background: linear-gradient(95deg, rgba(117, 192, 255, .24), rgba(255,255,255,.10));
            box-shadow: inset 4px 0 0 #ffffff, 0 0 0 1px rgba(255, 173, 82, .20), 0 0 12px rgba(255, 146, 40, .50), 0 0 24px rgba(255, 146, 40, .32);
        }

            .mobile-sidebar .app-nav-link.active i,
            .mobile-sidebar .app-nav-link.active span {
                color: #ffd58a !important;
                text-shadow: 0 0 8px rgba(255, 180, 80, .75), 0 0 18px rgba(255, 150, 46, .50);
            }
}

.ot-stepper {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

.ot-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    color: #64748b;
    font-size: .95rem;
    white-space: nowrap;
    font-weight: 700;
}

    .ot-step span {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #cbd5e1;
        background: #fff;
        font-weight: 800;
    }

    .ot-step.active {
        color: #0756b8;
    }

        .ot-step.active span {
            color: #fff;
            background: #0756b8;
            border-color: #0756b8;
        }

    .ot-step.done span {
        color: #fff;
        background: #16a34a;
        border-color: #16a34a;
    }

.ot-step-line {
    height: 1px;
    min-width: 28px;
    flex: 1 1 auto;
    background: #dbe5f1;
}

.ot-review-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #f8fbff;
}

.ot-review-item {
    border: 1px solid #e5edf8;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    height: 100%;
}

.ot-review-label {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.ot-review-value {
    color: #1f2a44;
    font-size: .95rem;
    font-weight: 700;
    word-break: break-word;
}

@media (max-width: 576px) {
    .ot-stepper {
        padding: .8rem .9rem;
    }

    .ot-step strong {
        font-size: .86rem;
    }

    .ot-step-line {
        min-width: 16px;
    }
}

.employee-work-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.employee-work-card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.employee-work-entry {
    border: 1px solid #edf0f2;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    margin-bottom: 10px;
}

    .employee-work-entry:last-child {
        margin-bottom: 0;
    }

/* ===== Overtime Wizard Timeline - Theme C (Orange Neon Pro) ===== */
.ot-stepper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    border: 2px solid #ff7a00;
    border-radius: 16px;
    background: radial-gradient(110% 120% at 5% -10%, rgba(255, 140, 40, 0.22), rgba(255, 255, 255, 0) 48%), linear-gradient(180deg, #fffaf4 0%, #fff 100%);
    box-shadow: 0 10px 24px rgba(255, 122, 0, 0.16), inset 0 0 0 1px rgba(255, 171, 92, 0.28);
    overflow-x: auto;
}

.ot-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    color: #5f6f87;
    font-size: 0.96rem;
    font-weight: 800;
    white-space: nowrap;
}

    .ot-step span {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffb56c;
        background: linear-gradient(180deg, #fff4e6 0%, #ffe5c8 100%);
        color: #d05a00;
        font-weight: 900;
        transition: all .2s ease;
    }

    .ot-step strong {
        letter-spacing: .01em;
    }

.ot-step-line {
    height: 3px;
    min-width: 34px;
    flex: 1 1 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd9b3 0%, #ffedda 100%);
}

/* Active: bright neon orange */
.ot-step.active {
    color: #9f4200;
}

    .ot-step.active span {
        color: #fff;
        border-color: #ff7a00;
        background: linear-gradient(180deg, #ffab4d 0%, #ff7a00 55%, #f15f00 100%);
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.22), 0 0 20px rgba(255, 122, 0, 0.62), 0 6px 16px rgba(205, 87, 0, 0.38);
        animation: otStepNeonPulse 1.6s ease-in-out infinite;
    }

/* Done: cool green balance */
.ot-step.done {
    color: #146a45;
}

    .ot-step.done span {
        color: #fff;
        border-color: #1f9d63;
        background: linear-gradient(180deg, #37bf7f 0%, #1f9d63 100%);
        box-shadow: 0 0 0 3px rgba(31, 157, 99, 0.16), 0 6px 14px rgba(20, 110, 71, 0.22);
    }

.ot-step-line.done {
    background: linear-gradient(90deg, #37bf7f 0%, #1f9d63 100%);
}

@keyframes otStepNeonPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.2), 0 0 16px rgba(255, 122, 0, 0.48), 0 4px 12px rgba(205, 87, 0, 0.34);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 122, 0, 0.28), 0 0 26px rgba(255, 122, 0, 0.72), 0 8px 20px rgba(205, 87, 0, 0.42);
    }
}

@media (max-width: 768px) {
    .ot-stepper {
        padding: .8rem .92rem;
        border-radius: 14px;
    }

    .ot-step {
        font-size: .88rem;
    }

        .ot-step span {
            width: 30px;
            height: 30px;
            font-size: .86rem;
        }

    .ot-step-line {
        min-width: 16px;
        height: 2px;
    }
}

.search-picker-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1090;
    border: 1px solid #d7e3f4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(15, 38, 74, .14);
    overflow: hidden;
}

.search-picker-options {
    max-height: 280px;
    overflow-y: auto;
}

.search-picker-item {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    padding: 10px 12px;
    color: #1f2a44;
    font-weight: 600;
}

    .search-picker-item:hover {
        background: #f2f7ff;
        color: #0756b8;
    }

.search-picker-empty {
    padding: 10px 12px;
    color: #74839a;
    font-size: .88rem;
}

/* Premium polish for request detail modal (SweetAlert2) */
.swal2-container .swal2-popup {
    border: 1px solid #dbe7f4;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(12, 33, 67, 0.22);
    padding: 1.1rem 1.1rem 1.25rem;
}

.swal2-container .swal2-title {
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #13294b;
    margin-bottom: 0.8rem;
}

.swal2-container .swal2-html-container {
    margin: 0.2rem 0 0;
    text-align: left;
}

    /* Header info card spacing */
    .swal2-container .swal2-html-container .card {
        border: 1px solid #e7eef8;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(16, 42, 79, 0.08);
    }

        .swal2-container .swal2-html-container .card .card-body {
            padding: 1rem 1.05rem;
        }

    /* Nicer badge */
    .swal2-container .swal2-html-container .badge {
        font-weight: 700;
        font-size: 0.75rem;
        letter-spacing: 0.2px;
        padding: 0.42rem 0.58rem;
        border-radius: 999px;
    }

    /* Table wrapper and sticky header */
    .swal2-container .swal2-html-container .table-responsive {
        border: 1px solid #e1eaf6;
        border-radius: 12px;
        max-height: 44vh;
        overflow: auto;
        background: #fff;
    }

    .swal2-container .swal2-html-container .table {
        margin-bottom: 0;
        font-size: 0.93rem;
    }

        .swal2-container .swal2-html-container .table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: linear-gradient(180deg, #f8fbff 0%, #eef4fd 100%);
            color: #17345f;
            font-weight: 700;
            white-space: nowrap;
            border-bottom: 1px solid #d8e4f4;
        }

        /* Better row readability */
        .swal2-container .swal2-html-container .table tbody tr:nth-child(even) {
            background: #fbfdff;
        }

        .swal2-container .swal2-html-container .table td,
        .swal2-container .swal2-html-container .table th {
            vertical-align: middle;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

    /* Action buttons in modal */
    .swal2-container .swal2-html-container .btn {
        border-radius: 9px;
        font-weight: 600;
    }

        .swal2-container .swal2-html-container .btn i {
            position: relative;
            top: -1px;
        }

/* Mobile tune */
@media (max-width: 768px) {
    .swal2-container .swal2-popup {
        width: min(98vw, 98vw) !important;
        padding: 0.9rem 0.8rem 1rem;
        border-radius: 14px;
    }

    .swal2-container .swal2-title {
        font-size: 1.2rem;
        margin-bottom: 0.65rem;
    }

    .swal2-container .swal2-html-container .table {
        font-size: 0.86rem;
    }

    .swal2-container .swal2-html-container .table-responsive {
        max-height: 50vh;
    }
}

/* Status badge skin - request list + detail modal */
#overtimeRequestsPage .badge,
.swal2-container .swal2-html-container .ot-status-badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 0.74rem;
    line-height: 1.15;
    padding: 0.36rem 0.56rem;
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

    /* Keep list badges pretty while still using current Bootstrap classes */
    #overtimeRequestsPage .badge.text-bg-secondary {
        background: #64748b !important;
        border-color: #5b6a80;
    }

    #overtimeRequestsPage .badge.text-bg-primary {
        background: #1d63d6 !important;
        border-color: #1a58be;
    }

    #overtimeRequestsPage .badge.text-bg-warning {
        background: #f59e0b !important;
        color: #1f2937 !important;
        border-color: #dd8e09;
    }

    #overtimeRequestsPage .badge.text-bg-success {
        background: #1f8f55 !important;
        border-color: #1a7b49;
    }

    #overtimeRequestsPage .badge.text-bg-info {
        background: #0ea5b7 !important;
        border-color: #0c8f9e;
    }

    #overtimeRequestsPage .badge.text-bg-dark {
        background: #334155 !important;
        border-color: #2b3748;
    }

    #overtimeRequestsPage .badge.text-bg-danger {
        background: #dc3545 !important;
        border-color: #c12e3c;
    }

/* Modal status badge classes */
.swal2-container .swal2-html-container .ot-status-badge--draft {
    background: #64748b;
    border-color: #5b6a80;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--submitted {
    background: #1d63d6;
    border-color: #1a58be;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--returned {
    background: #f59e0b;
    border-color: #dd8e09;
    color: #1f2937;
    box-shadow: none;
}

.swal2-container .swal2-html-container .ot-status-badge--approved {
    background: #1f8f55;
    border-color: #1a7b49;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--published {
    background: #0f766e;
    border-color: #0d6660;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--timesheet {
    background: #0ea5b7;
    border-color: #0c8f9e;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--completed {
    background: #334155;
    border-color: #2b3748;
    color: #fff;
}

.swal2-container .swal2-html-container .ot-status-badge--rejected {
    background: #dc3545;
    border-color: #c12e3c;
    color: #fff;
}

/* Request action buttons: symmetric and evenly spaced */
#overtimeRequestsPage .request-action-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 6px;
    min-width: 206px;
    justify-items: stretch;
    align-items: stretch;
}

#overtimeRequestsPage .request-action-btn {
    height: 34px;
    min-width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 10px;
    white-space: nowrap;
}

#overtimeRequestsPage td.text-end {
    vertical-align: middle;
}

/* Modal action area */
.swal2-container .swal2-html-container .request-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

    .swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
        min-width: 120px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

@media (max-width: 768px) {
    #overtimeRequestsPage .request-action-group {
        grid-template-columns: repeat(2, minmax(86px, 1fr));
        min-width: 178px;
        gap: 5px;
    }

    #overtimeRequestsPage .request-action-btn {
        min-width: 86px;
        height: 32px;
        padding: 0 8px;
        font-size: 0.82rem;
    }

    .swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
        min-width: 102px;
        height: 34px;
        font-size: 0.86rem;
    }
}

/* Requests page: align table headers + symmetric action buttons */
#overtimeRequestsPage .app-table thead th {
    text-align: center !important;
    vertical-align: middle;
}

/* Keep action column stable and centered */
#overtimeRequestsPage .app-table th:last-child,
#overtimeRequestsPage .app-table td:last-child {
    text-align: center !important;
    vertical-align: middle;
}

/* Action group layout */
#overtimeRequestsPage .request-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 210px;
}

/* Uniform button size */
#overtimeRequestsPage .request-action-btn {
    min-width: 96px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
}

/* Modal actions aligned and equal spacing */
.swal2-container .swal2-html-container .request-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

    .swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
        min-width: 118px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* Mobile tune */
@media (max-width: 768px) {
    #overtimeRequestsPage .request-action-group {
        min-width: 176px;
        gap: 5px;
    }

    #overtimeRequestsPage .request-action-btn {
        min-width: 84px;
        height: 32px;
        font-size: 0.82rem;
        padding: 0 8px;
    }

    .swal2-container .swal2-html-container .request-modal-actions .request-action-btn {
        min-width: 102px;
        height: 34px;
        font-size: 0.86rem;
    }
}

.hr-quick-preview {
    position: fixed;
    z-index: 2100;
    pointer-events: none;
}

.hr-quick-preview-card {
    width: 290px;
    max-width: 340px;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(20, 46, 86, 0.20);
    padding: 10px 12px;
    color: #1f2f47;
    font-size: 0.92rem;
    line-height: 1.35;
}

.hr-quick-preview-card {
    position: relative;
    width: 300px;
    max-width: min(340px, calc(100vw - 24px));
    border: 1px solid #ffbe7a; /* light orange edge */
    border-radius: 12px;
    background: #ffffff; /* keep panel clean */
    box-shadow: 0 0 0 1px rgba(255, 190, 122, 0.55), 0 0 10px rgba(255, 170, 90, 0.45), 0 0 22px rgba(255, 150, 70, 0.28), 0 10px 24px rgba(35, 20, 6, 0.14);
    animation: hrBorderGlow 1.8s ease-in-out infinite;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.hr-quick-preview-title {
    font-weight: 700;
    color: #0b4ea2;
    margin-bottom: 4px;
}

/* Icon action mode for request list */
#overtimeRequestsPage .request-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: auto;
}

#overtimeRequestsPage .request-action-btn.request-action-btn--icon3d {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}

    #overtimeRequestsPage .request-action-btn.request-action-btn--icon3d i {
        font-size: 0.9rem;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
    }

    #overtimeRequestsPage .request-action-btn.request-action-btn--icon3d:hover {
        transform: translateY(-2px);
        filter: saturate(1.06);
    }

    #overtimeRequestsPage .request-action-btn.request-action-btn--icon3d:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
    }

/* Per action tone */
#overtimeRequestsPage .request-action-btn.tone-view {
    color: #fff;
    border-color: #1f78e2;
    background: linear-gradient(180deg, #56a6ff 0%, #1f78e2 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 11px rgba(31,120,226,.35);
}

#overtimeRequestsPage .request-action-btn.tone-print {
    color: #fff;
    border-color: #3f69d7;
    background: linear-gradient(180deg, #7ba3ff 0%, #3f69d7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(63,105,215,.35);
}

#overtimeRequestsPage .request-action-btn.tone-submit {
    color: #fff;
    border-color: #1f8a7a;
    background: linear-gradient(180deg, #42b8a3 0%, #1f8a7a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,138,122,.33);
}

#overtimeRequestsPage .request-action-btn.tone-approve {
    color: #fff;
    border-color: #1f8f55;
    background: linear-gradient(180deg, #3bbf79 0%, #1f8f55 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,143,85,.33);
}

#overtimeRequestsPage .request-action-btn.tone-return {
    color: #5b3b00;
    border-color: #e5a500;
    background: linear-gradient(180deg, #ffd45e 0%, #ffb300 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 11px rgba(255,179,0,.35);
}

#overtimeRequestsPage .request-action-btn.tone-reopen {
    color: #6d3e00;
    border-color: #ee8e22;
    background: linear-gradient(180deg, #ffc072 0%, #f59a2f 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 11px rgba(245,154,47,.34);
}

#overtimeRequestsPage .request-action-btn.tone-delete {
    color: #fff;
    border-color: #d7374d;
    background: linear-gradient(180deg, #ff6b80 0%, #d7374d 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(215,55,77,.33);
}

/* [MOI] Nut "Sua" (chuc nang Sua ho so lam them gio) */
#overtimeRequestsPage .request-action-btn.tone-edit {
    color: #fff;
    border-color: #6b4fd1;
    background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}

.ot-action-tooltip .tooltip-inner {
    background: #0f2747;
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 600;
}

.ot-action-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #0f2747;
}

@media (max-width: 768px) {
    #overtimeRequestsPage .request-action-btn.request-action-btn--icon3d {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 10px;
    }
}

#overtimeRequestsPage .badge.ot-status-badge--no-registration {
    background: #eef3fb !important;
    color: #4b5f7a !important;
    border-color: #c9d8ee;
}

.request-summary-inline {
    margin-left: auto;
    font-size: .88rem;
    font-weight: 700;
    color: #51627e;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .request-summary-inline {
        width: 100%;
        margin-top: 6px;
        white-space: normal;
        font-size: .84rem;
    }
}

/* =========================================================================
   [MỚI] Quản lý đợt làm thêm (OvertimeAdmin) - đồng bộ style bảng + icon 3D
   với bảng "Danh sách hồ sơ" (#overtimeRequestsPage), và tab nổi bật kiểu
   LED cam giống trạng thái active của menu trái (.app-nav-link.active).
   ========================================================================= */

/* ----- Tabs: chữ xanh đậm (primary), tab đang chọn sáng cam như đèn LED ----- */
#overtimeAdminPage .ot-admin-tabs {
    border-bottom: 0;
    gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
}

#overtimeAdminPage .ot-admin-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7e6fb;
    border-radius: 12px;
    padding: 10px 22px;
    font-weight: 800;
    font-size: .95rem;
    color: #0b4ea2;
    background: #f3f8ff;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

    #overtimeAdminPage .ot-admin-tabs .nav-link i {
        color: #1058b8;
        transition: color .18s ease;
    }

    #overtimeAdminPage .ot-admin-tabs .nav-link:hover {
        border-color: #9cc4f5;
        background: #e8f1ff;
        color: #08386e;
        transform: translateY(-1px);
    }

    /* Tab đang chọn: sáng cam như đèn LED - khớp .app-nav-link.active bên sidebar. */
    #overtimeAdminPage .ot-admin-tabs .nav-link.active {
        color: #fff;
        border-color: #ff8f2a;
        background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
        box-shadow: 0 0 0 1px rgba(255, 173, 82, .35), 0 0 12px rgba(255, 146, 40, .55), 0 0 22px rgba(255, 146, 40, .35), 0 6px 14px rgba(180, 90, 10, .28);
        text-shadow: 0 0 8px rgba(255, 214, 160, .65);
    }

        #overtimeAdminPage .ot-admin-tabs .nav-link.active i {
            color: #fff;
        }

@media (max-width: 576px) {
    #overtimeAdminPage .ot-admin-tabs .nav-link {
        padding: 8px 14px;
        font-size: .88rem;
    }
}

/* ----- Đường viền "ôm" phân định vùng nội dung của tab đang active -
   sáng cam như đèn LED, bao quanh toàn bộ nội dung bên dưới hàng tab, cùng
   tông màu với glow của tab đang chọn ở trên. Không nối liền với tab (chỉ
   bao quanh vùng nội dung), theo đúng yêu cầu bỏ viền nối. ----- */
#overtimeAdminPage .tab-content {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1.5px solid #ff9d3d;
    background: linear-gradient(180deg, rgba(255, 180, 84, .07) 0%, rgba(255, 180, 84, 0) 90px);
    box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 10px 22px rgba(180, 90, 10, .10);
}

@media (max-width: 576px) {
    #overtimeAdminPage .tab-content {
        padding: 12px;
        border-radius: 14px;
    }
}

/* ----- Bảng: căn giữa cột STT/trạng thái/thao tác giống bảng Hồ sơ làm thêm giờ ----- */
#overtimeAdminPage .app-table thead th {
    text-align: center !important;
    vertical-align: middle;
}

#overtimeAdminPage .app-table th:last-child,
#overtimeAdminPage .app-table td:last-child {
    text-align: center !important;
    vertical-align: middle;
}

/* ----- Icon thao tác 3D - dùng lại đúng class .request-action-btn--icon3d ----- */
#overtimeAdminPage .request-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

#overtimeAdminPage .request-action-btn.request-action-btn--icon3d {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}

    #overtimeAdminPage .request-action-btn.request-action-btn--icon3d i {
        font-size: 0.9rem;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
    }

    #overtimeAdminPage .request-action-btn.request-action-btn--icon3d:hover {
        transform: translateY(-2px);
        filter: saturate(1.06);
    }

    #overtimeAdminPage .request-action-btn.request-action-btn--icon3d:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
    }

/* Tông màu theo hành động - Sửa (tím)/Xóa (đỏ) dùng lại đúng màu bên Hồ sơ làm thêm giờ */
#overtimeAdminPage .request-action-btn.tone-edit {
    color: #fff;
    border-color: #6b4fd1;
    background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}

#overtimeAdminPage .request-action-btn.tone-delete {
    color: #fff;
    border-color: #d7374d;
    background: linear-gradient(180deg, #ff6b80 0%, #d7374d 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(215,55,77,.33);
}

#overtimeAdminPage .request-action-btn.tone-approve {
    color: #fff;
    border-color: #1f8f55;
    background: linear-gradient(180deg, #3bbf79 0%, #1f8f55 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(31,143,85,.33);
}

/* [MỚI] Tông "Ngừng dùng/Đóng đợt" - trung tính, không dùng lại tone-return
   (màu cam của tone-return đã mang nghĩa "Trả lại hồ sơ" bên Hồ sơ làm thêm giờ). */
#overtimeAdminPage .request-action-btn.tone-deactivate {
    color: #fff;
    border-color: #55637a;
    background: linear-gradient(180deg, #8a97ab 0%, #55637a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 11px rgba(85,99,122,.30);
}

@media (max-width: 768px) {
    #overtimeAdminPage .request-action-btn.request-action-btn--icon3d {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 10px;
    }
}

/* =========================================================================
   [MỚI - ADR-0006] Quản lý nhân sự (EmployeeAdmin) - áp lại đúng style LED
   cam của trang Quản lý đợt làm thêm (#overtimeAdminPage) cho 3 cụm nội
   dung của trang: (1) hàng tab, (2) cụm tìm kiếm/lọc nhanh, (3) cụm bảng
   danh sách nhân sự. Dùng chung tông màu/khoảng sáng để đồng bộ giao diện.
   ========================================================================= */

/* ----- (1) Hàng tab: y hệt #overtimeAdminPage .ot-admin-tabs, chữ xanh đậm
   (primary) khi chưa chọn, sáng cam như đèn LED khi active. ----- */
#employeeAdminPage .ot-admin-tabs {
    border-bottom: 0;
    gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
}

#employeeAdminPage .ot-admin-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7e6fb;
    border-radius: 12px;
    padding: 10px 22px;
    font-weight: 800;
    font-size: .95rem;
    color: #0b4ea2;
    background: #f3f8ff;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

    #employeeAdminPage .ot-admin-tabs .nav-link i {
        color: #1058b8;
        transition: color .18s ease;
    }

    #employeeAdminPage .ot-admin-tabs .nav-link:hover:not(.disabled) {
        border-color: #9cc4f5;
        background: #e8f1ff;
        color: #08386e;
        transform: translateY(-1px);
    }

    /* Tab đang chọn: sáng cam như đèn LED - khớp .ot-admin-tabs bên Quản lý đợt làm thêm. */
    #employeeAdminPage .ot-admin-tabs .nav-link.active {
        color: #fff;
        border-color: #ff8f2a;
        background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
        box-shadow: 0 0 0 1px rgba(255, 173, 82, .35), 0 0 12px rgba(255, 146, 40, .55), 0 0 22px rgba(255, 146, 40, .35), 0 6px 14px rgba(180, 90, 10, .28);
        text-shadow: 0 0 8px rgba(255, 214, 160, .65);
    }

        #employeeAdminPage .ot-admin-tabs .nav-link.active i {
            color: #fff;
        }

    /* [MỚI] Tab chưa mở ở giai đoạn này (disabled) - giữ mờ, không ăn theo
       màu/hiệu ứng hover-active của các tab đang dùng được. */
    #employeeAdminPage .ot-admin-tabs .nav-link.disabled {
        color: #9aa7bb;
        background: #f3f5f8;
        border-color: #e3e7ee;
        cursor: not-allowed;
    }

@media (max-width: 576px) {
    #employeeAdminPage .ot-admin-tabs .nav-link {
        padding: 8px 14px;
        font-size: .88rem;
    }
}

/* ----- (2) Cụm tìm kiếm/lọc nhanh và (3) cụm bảng danh sách nhân sự: viền cam sáng đèn
   LED bao quanh từng cụm .app-card, cùng tông màu với tab active ở trên và viền nội dung
   của trang Quản lý đợt làm thêm. [SỬA 20/09/2026] Đã gộp lên thành rule GLOBAL trên mọi
   .app-card (xem gần định nghĩa gốc .app-card ở đầu file) - không còn cần khai báo riêng ở
   đây nữa, tránh trùng lặp. ----- */

/* ----- [MỚI - ADR-0006 GĐ 2] Nút "Sửa" trên bảng Danh sách nhân sự - dùng lại
   đúng class .request-action-btn--icon3d/.tone-edit đã có, cần khai báo riêng vì
   các rule gốc chỉ scope theo #overtimeAdminPage/#overtimeRequestsPage. ----- */
#employeeAdminPage .request-action-btn.request-action-btn--icon3d {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 10px rgba(14, 29, 56, .18), 0 0 0 1px rgba(255,255,255,.06);
}

    #employeeAdminPage .request-action-btn.request-action-btn--icon3d i {
        font-size: 0.9rem;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
    }

    #employeeAdminPage .request-action-btn.request-action-btn--icon3d:hover {
        transform: translateY(-2px);
        filter: saturate(1.06);
    }

    #employeeAdminPage .request-action-btn.request-action-btn--icon3d:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 2px 6px rgba(14, 29, 56, .14);
    }

#employeeAdminPage .request-action-btn.tone-edit {
    color: #fff;
    border-color: #6b4fd1;
    background: linear-gradient(180deg, #9c85f0 0%, #6b4fd1 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 11px rgba(107,79,209,.33);
}

@media (max-width: 768px) {
    #employeeAdminPage .request-action-btn.request-action-btn--icon3d {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 10px;
    }
}

/* [MỚI 20/09/2026, TỔNG QUÁT HOÁ 22/09/2026] QUY ƯỚC CHUNG cho MỌI nút "Thêm..." dạng nhỏ
   đứng cạnh nút "Làm mới" trong .page-meta (EmployeeAdmin/StoreAdmin/RoleAdmin và MỌI trang
   sau này dùng lại đúng khuôn mẫu class="btn btn-sm app-btn-primary") - .app-btn-primary gốc
   có min-height:46px dành riêng cho nút LỚN (trang Đăng nhập), khi ghép với .btn-sm làm nút
   bị to lệch hẳn so với .app-btn-outline (dùng .btn-sm không bị ép min-height) đứng cùng
   hàng. Từng phải sửa lặp lại riêng cho #employeeAdminPage rồi #storeAdminPage - GOM thành 1
   rule DÙNG CHUNG không cần khai riêng theo từng trang nữa: bất kỳ trang mới nào chỉ cần
   đúng khuôn mẫu class trên, không cần thêm CSS riêng. */
.app-btn-primary.btn-sm {
    min-height: 0;
    box-shadow: 0 4px 10px rgba(7, 86, 184, .18);
}

/* [MỚI 20/09/2026] Bảng "Danh sách cửa hàng" đang tự xuống dòng trong từng ô (đặc biệt cột
   "Tên cửa hàng") vì .table Bootstrap mặc định width:100% ép các cột co hẹp lại vừa khung
   nhìn - làm bảng cao lên nhiều dòng, khó đọc. Ép KHÔNG xuống dòng (white-space: nowrap) để
   mỗi dòng dữ liệu luôn gọn 1 dòng - bảng khi đó sẽ tự rộng ra vượt quá khung nhìn, và
   .table-responsive bọc ngoài (class Bootstrap có sẵn) tự cho cuộn ngang, không cần thêm
   CSS nào khác cho phần cuộn.
   [SỬA 20/09/2026] Đổi từ scope riêng #storeAdminPage thành rule GLOBAL trên mọi .app-table
   - anh Tân yêu cầu áp dụng đồng bộ cho MỌI bảng danh sách trong app (CheckinLog/
   GpsAnomaly/LeaveApproval/WorkPlanLog cũng dùng .app-table, đều đã có sẵn .table-responsive
   bọc ngoài nên cùng 1 rule global là đủ, không cần lặp lại theo từng #...Page). */
.app-table th,
.app-table td {
    white-space: nowrap;
}

/* [MỚI 20/09/2026] Ô dữ liệu quá dài (vd "Lý do bất thường" cả câu dài) sẽ khiến bảng kéo
   quá rộng dù đã cho cuộn ngang - cắt bớt bằng dấu "..." khi vượt quá 1 độ rộng hợp lý,
   rê chuột vào xem lại đầy đủ (tooltip gốc trình duyệt qua thuộc tính title, gắn tự động ở
   site.js - CHỈ gắn khi ô THỰC SỰ bị cắt, không gắn tràn lan cho ô đã đủ chỗ hiển thị hết).
   300px là mức chọn tạm cho vừa đủ 1 câu ngắn/địa chỉ vừa phải (~35-45 ký tự tiếng Việt ở
   cỡ chữ đang dùng) mà không kéo bảng quá khổ - áp dụng đồng nhất cho mọi cột thay vì tuỳ
   biến riêng từng cột, các cột vốn đã ngắn (Mã CH/Trạng thái/STT...) không bị ảnh hưởng vì
   nội dung chưa bao giờ chạm ngưỡng này. */
.app-table td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- [MỚI] Modal Thêm/Sửa nhân sự (#empFormModal) - đồng bộ viền/đèn LED
   cam của trang (khớp .ot-admin-tabs khi active + .app-card), tái sử dụng bố
   cục modal đổi mật khẩu (#changePasswordModal) làm khung sườn nhưng đổi tông
   xanh sang cam. ----- */
#empFormModal .modal-content {
    border: 1.5px solid #ff9d3d;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 24px 60px rgba(15, 38, 74, .22);
}

#empFormModal .modal-header {
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 0;
    background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
    color: #fff;
}

    #empFormModal .modal-header .modal-title {
        font-weight: 800;
        font-size: 1.12rem;
        text-shadow: 0 0 8px rgba(255, 214, 160, .5);
    }

    #empFormModal .emp-form-header-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .22);
        font-size: 1.15rem;
        flex: 0 0 auto;
    }

    #empFormModal .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: .85;
    }

        #empFormModal .modal-header .btn-close:hover {
            opacity: 1;
        }

#empFormModal .modal-body {
    padding: 22px 26px 8px;
}

#empFormModal .emp-form-section-label {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: .84rem;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #b45a0a;
    margin-bottom: 10px;
}

    #empFormModal .emp-form-section-label:not(:first-child) {
        margin-top: 18px;
    }

    #empFormModal .emp-form-section-label i {
        color: #ff8f2a;
    }

#empFormModal .emp-form-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

#empFormModal .emp-form-flex-field {
    flex: 1 1 170px;
    min-width: 150px;
}

#empFormModal .form-label {
    color: #344054;
}

/* Hai nút Hủy/Lưu cân đối đều nhau: cùng chiều cao, cùng bo góc, cùng độ đậm chữ. */
#empFormModal .modal-footer {
    padding: 16px 26px 22px;
    border-top: 1px solid #FFE3BE;
    gap: 10px;
}

    #empFormModal .modal-footer .btn {
        min-height: 44px;
        min-width: 112px;
        border-radius: 9px;
        font-weight: 700;
    }

/* Modal Thêm/Sửa nhân sự - giao diện mobile an toàn */
@media (max-width: 576px) {
    #empFormModal .modal-dialog {
        margin: 0.6rem auto;
        max-width: calc(100vw - 0.8rem);
    }

    #empFormModal .modal-content {
        max-height: calc(100dvh - 1.2rem);
        border-radius: 14px;
        overflow: hidden;
    }

    #empFormModal .modal-header {
        padding: 12px 14px;
    }

    #empFormModal .modal-title {
        font-size: 1.05rem;
    }

    #empFormModal .modal-body {
        padding: 12px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #empFormModal .emp-form-flex-row {
        gap: 10px;
    }

    #empFormModal .modal-footer {
        padding: 10px 14px 12px;
    }

        #empFormModal .modal-footer .btn {
            flex: 1 1 0;
            min-height: 40px;
            white-space: nowrap;
        }
}

/* ============================================================
   [MỚI - ADR-0006 GĐ 3] Class DÙNG CHUNG cho mọi modal từ GĐ 3 trở đi
   (.emp-led-modal) - lặp lại ĐÚNG bộ rule của #empFormModal ở trên nhưng theo
   class thay vì id, để tab "Phân công & Điều chuyển" (và các tab sau: Tài
   khoản đăng nhập, Báo cáo...) tự động có viền/đèn LED cam đồng bộ mà không
   phải khai riêng từng #id - đúng yêu cầu "các tab sau cũng dùng style UI
   đồng bộ như vậy" (anh Tân xác nhận 06/09/2026). KHÔNG sửa lại #empFormModal
   ở trên để tránh động vào CSS đã kiểm thử ở GĐ 2.

   [SỬA 06/09/2026] Bỏ tiền tố "#employeeAdminPage " trước ".emp-led-modal":
   4 modal (Thêm phân công, Điều chuyển, Bổ nhiệm CHT, Kết thúc phân công)
   được khai báo trong Index.cshtml SAU thẻ đóng </section> của
   #employeeAdminPage (là anh/em ngang hàng, KHÔNG phải phần tử con), nên các
   rule có dạng "#employeeAdminPage .emp-led-modal ..." không bao giờ khớp -
   đây là lý do viền LED cam không hiện dù class .emp-led-modal đã có. Chỉ
   cần chọn theo class .emp-led-modal (không ràng buộc vị trí DOM), giống
   cách #empFormModal đã hoạt động đúng từ đầu vì chỉ dùng selector theo id. */
.emp-led-modal .modal-content {
    border: 1.5px solid #ff9d3d;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 173, 82, .28), 0 0 14px rgba(255, 146, 40, .45), 0 0 26px rgba(255, 146, 40, .22), 0 24px 60px rgba(15, 38, 74, .22);
}

.emp-led-modal .modal-header {
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 0;
    background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
    color: #fff;
}

    .emp-led-modal .modal-header .modal-title {
        font-weight: 800;
        font-size: 1.12rem;
        text-shadow: 0 0 8px rgba(255, 214, 160, .5);
    }

    .emp-led-modal .emp-form-header-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .22);
        font-size: 1.15rem;
        flex: 0 0 auto;
    }

    .emp-led-modal .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: .85;
    }

        .emp-led-modal .modal-header .btn-close:hover {
            opacity: 1;
        }

.emp-led-modal .modal-body {
    padding: 22px 26px 8px;
}

.emp-led-modal .form-label {
    color: #344054;
}

.emp-led-modal .modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid #FFE3BE;
    gap: 8px;
}

    /* [SỬA 06/09/2026] Thu nhỏ + cân đối nút chức năng theo yêu cầu (nhỏ hơn
       #empFormModal vì các modal này thao tác nhanh/gọn, ít nút hơn). */
    .emp-led-modal .modal-footer .btn {
        min-height: 38px;
        padding: 6px 18px;
        border-radius: 8px;
        font-weight: 700;
        font-size: .88rem;
    }

/* Hộp cảnh báo "cần xác nhận" (thay CHT / cửa hàng sẽ mồ côi) - tông vàng cam
   cảnh báo, có nút "Vẫn tiếp tục" để gọi lại API với cờ xác nhận = true.
   [SỬA 06/09/2026] Bỏ tiền tố "#employeeAdminPage " (lý do như trên - hộp
   này được showConfirmBox() chèn vào bên trong modal-body của các modal
   emp-led-modal, vốn nằm ngoài #employeeAdminPage). */
.emp-confirm-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #FFF6E8;
    border: 1px solid #FFCE87;
    color: #7A4A00;
    font-size: .88rem;
    margin-bottom: 14px;
}

    .emp-confirm-box .btn {
        align-self: flex-end;
        min-height: 34px;
        font-weight: 700;
        border-radius: 8px;
    }

@media (max-width: 576px) {
    .emp-led-modal .modal-dialog {
        margin: 0.6rem auto;
        max-width: calc(100vw - 0.8rem);
    }

    .emp-led-modal .modal-content {
        max-height: calc(100dvh - 1.2rem);
        border-radius: 14px;
        overflow: hidden;
    }

    .emp-led-modal .modal-header {
        padding: 12px 14px;
    }

    .emp-led-modal .modal-title {
        font-size: 1.05rem;
    }

    .emp-led-modal .modal-body {
        padding: 12px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .emp-led-modal .modal-footer {
        padding: 10px 14px 12px;
    }

        .emp-led-modal .modal-footer .btn {
            flex: 1 1 0;
            min-height: 36px;
            white-space: nowrap;
        }
}

/* ----- [MỚI - ADR-0006 GĐ 3] Tab "Phân công & Điều chuyển": ô tìm/chọn nhân
   sự (danh sách kết quả dạng thẻ bấm được) + bảng lịch sử phân công. ----- */
#employeeAdminPage .lifecycle-picker-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e3ebf6;
    border-radius: 10px;
    padding: 6px;
    background: #fff;
}

#employeeAdminPage .lifecycle-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f6f9ff;
    cursor: pointer;
    text-align: left;
    font-size: .88rem;
    color: #1b2a4a;
    transition: background-color .15s ease, border-color .15s ease;
}

    #employeeAdminPage .lifecycle-picker-item:hover {
        background: #eaf1ff;
        border-color: #b9d2f7;
    }

    #employeeAdminPage .lifecycle-picker-item .lifecycle-picker-item-name {
        font-weight: 700;
    }

    #employeeAdminPage .lifecycle-picker-item .lifecycle-picker-item-meta {
        font-size: .78rem;
        color: #71809a;
    }

#employeeAdminPage .lifecycle-cht-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ffb454 0%, #ff8f2a 60%, #f4740a 100%);
}

#employeeAdminPage .lifecycle-row-closed {
    opacity: .6;
}

/* [MỚI 06/09/2026 - phản hồi anh Tân] Cột "Cửa hàng" ở bảng lịch sử phân công
   quá rộng so với các cột còn lại -> giới hạn chiều rộng + rút gọn (ellipsis)
   nếu tên cửa hàng dài, xem đầy đủ qua title (tooltip trình duyệt). */
#employeeAdminPage .lifecycle-timeline-table td:first-child {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* [MỚI 06/09/2026] Badge màu cho cột Trạng thái (đang hiệu lực = xanh lá, đã kết
   thúc = xám) - trước đó là chữ thường, khó phân biệt nhanh bằng mắt. */
#employeeAdminPage .lifecycle-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

    #employeeAdminPage .lifecycle-status-badge--open {
        color: #0a6b3a;
        background: #E3F8EC;
    }

    #employeeAdminPage .lifecycle-status-badge--closed {
        color: #64748b;
        background: #EEF1F6;
    }

/* [MỚI 06/09/2026 - ADR-0006 mục 13] Hộp thông tin "đang chờ tự kích hoạt" -
   hiển thị cho HR biết hệ thống ĐÃ ghi nhận thay đổi ngày hiệu lực tương lai và
   sẽ tự áp dụng, không cần làm gì thêm (tránh cảm giác "lưu xong mà không thấy
   gì đổi" khi ngày hiệu lực chưa tới). */
#employeeAdminPage .lifecycle-pending-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #FFF6E8;
    border: 1px solid #FFCE87;
    color: #7A4A00;
    font-size: .8rem;
}

    #employeeAdminPage .lifecycle-pending-box .lifecycle-pending-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #employeeAdminPage .lifecycle-pending-box i {
        color: #F58A00;
    }

/* [CẬP NHẬT 06/09/2026 - phản hồi anh Tân lần 2] "Ô chọn cửa hàng" có tìm kiếm -
   bỏ component tự viết (.store-combo, bị lỗi hiển thị trùng mã cửa hàng) để DÙNG
   LẠI ĐÚNG component "search-picker" đã có sẵn, đã kiểm thử ở Bước 1 màn "Đăng ký
   làm thêm giờ" (wwwroot/js/overtime-create.js, CSS .search-picker-menu/-options/
   -item/-empty ở phần trên file này) - style/hành vi đồng bộ tuyệt đối, không có
   bộ CSS riêng thứ 2 cho cùng 1 kiểu control. Style .search-picker-* dùng chung
   toàn app (không cần lặp lại/scope riêng #employeeAdminPage). */

/* ============================================================
   [MỚI] Trang "Hướng dẫn sử dụng" (#guidePage).
   Đồng bộ khung/thẻ với .app-card đang dùng ở các trang khác (bo góc,
   đổ bóng, tiêu đề đậm), cộng thêm viền "đèn LED" cam/xanh primary xen kẽ
   theo yêu cầu - cùng kiểu hiệu ứng với Toast thông báo (notif-toast).
   ============================================================ */
.guide-role-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--app-primary-light);
    color: var(--app-primary-dark);
    font-weight: 700;
    margin-bottom: 18px;
}

    .guide-role-banner i {
        font-size: 1.1rem;
    }

@keyframes guideLedGlowBlue {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(7, 86, 184, .16), 0 12px 28px rgba(15, 38, 74, .07), 0 0 10px rgba(7, 86, 184, .14);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(7, 86, 184, .30), 0 12px 28px rgba(15, 38, 74, .07), 0 0 20px rgba(7, 86, 184, .34);
    }
}

@keyframes guideLedGlowOrange {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(245, 138, 0, .18), 0 12px 28px rgba(15, 38, 74, .07), 0 0 10px rgba(245, 138, 0, .16);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(245, 138, 0, .34), 0 12px 28px rgba(15, 38, 74, .07), 0 0 20px rgba(245, 138, 0, .38);
    }
}

/* Thẻ từng mục - khớp bo góc/đổ bóng nền của .app-card, xen kẽ viền LED
   xanh primary / cam theo thứ tự lẻ - chẵn. */
.guide-accordion .accordion-item {
    border: 1px solid var(--app-border);
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
}

    .guide-accordion .accordion-item:nth-child(odd) {
        border-color: rgba(7, 86, 184, .30);
        animation: guideLedGlowBlue 3.4s ease-in-out infinite;
    }

    .guide-accordion .accordion-item:nth-child(even) {
        border-color: rgba(245, 138, 0, .34);
        animation: guideLedGlowOrange 3.4s ease-in-out infinite;
    }

.guide-accordion .accordion-button {
    font-weight: 800;
    font-size: 1.02rem;
    color: #1c2a44;
    background: #fff;
    padding: 15px 18px;
}

    .guide-accordion .accordion-button:not(.collapsed) {
        color: var(--app-primary-dark);
        background: var(--app-primary-light);
        box-shadow: none;
    }

    .guide-accordion .accordion-button:focus {
        box-shadow: none;
        border-color: var(--app-border);
    }

.guide-accordion .accordion-body {
    color: var(--app-text);
    font-size: .94rem;
    line-height: 1.6;
    padding: 18px;
    border-top: 1px solid #e8eef7;
}

    .guide-accordion .accordion-body h3 {
        font-size: 1rem;
        font-weight: 800;
        color: var(--app-primary-dark);
        margin: 14px 0 8px;
    }

        .guide-accordion .accordion-body h3:first-child {
            margin-top: 0;
        }

    .guide-accordion .accordion-body ul,
    .guide-accordion .accordion-body ol {
        padding-left: 1.25rem;
        margin-bottom: 10px;
    }

    .guide-accordion .accordion-body li {
        margin-bottom: 4px;
    }

/* Khung bọc bảng dữ liệu trong bài hướng dẫn - viền LED xanh primary sáng
   nhẹ, bo góc để đồng bộ với .app-table đang dùng ở các trang khác. */
.guide-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(7, 86, 184, .28);
    box-shadow: 0 0 0 1px rgba(7, 86, 184, .10), 0 0 14px rgba(7, 86, 184, .16);
    margin: 8px 0 14px;
}

.guide-accordion .accordion-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin: 0;
}

    .guide-accordion .accordion-body th,
    .guide-accordion .accordion-body td {
        border-bottom: 1px solid var(--app-border);
        padding: 8px 12px;
        text-align: left;
        vertical-align: top;
    }

    .guide-accordion .accordion-body tr:last-child td {
        border-bottom: 0;
    }

    .guide-accordion .accordion-body th {
        background: var(--app-primary-light);
        color: var(--app-primary-dark);
        font-weight: 700;
    }

/* Chip trạng thái dùng trong bài hướng dẫn - cùng bảng màu với badge trạng
   thái thật ở trang Hồ sơ làm thêm giờ, để người đọc liên tưởng đúng. */
.guide-status-chip {
    display: inline-block;
    border-radius: 999px;
    font-weight: 700;
    font-size: .74rem;
    padding: 0.3rem 0.6rem;
    color: #fff;
}

.guide-status-chip--draft { background: #64748b; }
.guide-status-chip--submitted { background: #1d63d6; }
.guide-status-chip--returned { background: #f59e0b; color: #1f2937; }
.guide-status-chip--approved { background: #1f8f55; }

/* [MỚI - ADR-0006 GĐ 3 phần 2, 07/09/2026] Thao tác hàng loạt ở tab "Danh sách
   nhân sự" - thanh công cụ khi có dòng được chọn, khối "áp dụng cho" và danh
   sách kết quả từng người trong 3 modal empBulkTransferModal/empBulkTypeModal/
   empBulkLeaveModal. Dùng lại đúng tông cam LED (#FFE3BE/#FFCE87/#FFF6E8/#7A4A00)
   đã chốt cho .emp-confirm-box để đồng bộ, không tạo bảng màu mới. */
.emp-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #FFF6E8;
    border: 1px solid #FFCE87;
}

.emp-bulk-count {
    font-weight: 700;
    color: #7A4A00;
    margin-right: 4px;
}

.emp-bulk-target-list {
    max-height: 160px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF6E8;
    border: 1px solid #FFCE87;
    color: #7A4A00;
    font-size: .85rem;
}

    .emp-bulk-target-list .emp-bulk-target-chip {
        display: inline-block;
        margin: 2px 4px 2px 0;
        padding: 2px 8px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #FFCE87;
        font-weight: 600;
    }

.emp-bulk-results {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

.emp-bulk-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--app-border);
    font-size: .88rem;
}

    .emp-bulk-result-row:last-child {
        border-bottom: 0;
    }

    .emp-bulk-result-row .emp-bulk-result-info {
        min-width: 0;
    }

    .emp-bulk-result-row .emp-bulk-result-name {
        font-weight: 700;
    }

    .emp-bulk-result-row .emp-bulk-result-message {
        color: #6b7280;
        font-size: .8rem;
    }

    .emp-bulk-result-row .btn {
        flex: none;
        min-height: 30px;
        padding: 3px 12px;
        font-size: .8rem;
        font-weight: 700;
        border-radius: 8px;
    }

/* [MỚI - ADR-0006 GĐ 4, 07/09/2026] Hộp hiển thị mật khẩu tạm sau khi Cấp tài
   khoản/Reset mật khẩu (empBulkResult tái dùng .alert-success của Bootstrap nên
   chỉ cần style riêng cho chữ mật khẩu - to, đơn cách, dễ đọc/dễ chép). */
.emp-temp-password-code {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #b6e2c8;
    color: #14532d;
}

/* [MỚI - ADR-0006 GĐ 5, 07/09/2026] Tab "Báo cáo & Cảnh báo" - tái dùng nguyên
   .stat-card/.app-card/.app-table đã có, chỉ thêm 2 tiện ích nhỏ: bảng gọn cho
   danh sách headcount/xu hướng theo tháng, và trạng thái "bấm được" cho các thẻ
   số liệu nhảy sang Tab 1 với đúng bộ lọc nhanh. */
#employeeAdminPage .app-table-sm th,
#employeeAdminPage .app-table-sm td {
    padding: 6px 4px;
    font-size: .86rem;
    border-bottom: 1px solid #eef2f7;
}

    #employeeAdminPage .app-table-sm tr:last-child th,
    #employeeAdminPage .app-table-sm tr:last-child td {
        border-bottom: none;
    }

#employeeAdminPage .report-clickable {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    #employeeAdminPage .report-clickable:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 26px rgba(15, 39, 78, .12);
    }

/* Thẻ cảnh báo nhỏ trong lưới "Cảnh báo cần xử lý" / "Dữ liệu cần dọn". */
#employeeAdminPage .report-warn-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    width: 100%;
}

    #employeeAdminPage .report-warn-item.report-clickable:hover {
        border-color: #ffcf94;
        background: #fff8ef;
    }

    #employeeAdminPage .report-warn-item .report-warn-label {
        font-size: .86rem;
        color: #3a4a63;
        font-weight: 600;
    }

    #employeeAdminPage .report-warn-item .report-warn-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: #b3541e;
    }

    #employeeAdminPage .report-warn-item .report-warn-value.report-warn-value--ok {
        color: #1a8f5d;
    }

@media (prefers-reduced-motion: reduce) {
    .guide-accordion .accordion-item:nth-child(odd),
    .guide-accordion .accordion-item:nth-child(even) {
        animation: none;
    }
}

/* =========================================================================
   [MỚI - GpsAttendance, 19/09/2026] "gps-form-card" / "gps-form-page" - áp
   lại đúng kiểu viền cam sáng đèn LED của #overtimeAdminPage .tab-content
   (Overtime) cho các trang dạng form 1 cột của app GPS (Chấm công, Đăng ký
   nghỉ phép, ...). CỐ Ý KHÔNG animate như .login-card ở trang Đăng nhập -
   trang này NV mở lặp lại nhiều lần/ngày, glow động liên tục gây mỏi mắt,
   không phù hợp như 1 khoảnh khắc "spotlight" lúc đăng nhập; đúng tinh thần
   #overtimeAdminPage .tab-content (tĩnh) chứ không phải .login-card (động).
   ========================================================================= */
.gps-form-page {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
}

.gps-form-card {
    position: relative;
    border-radius: 16px;
    border: 1.5px solid #ff9d3d;
    background:
        linear-gradient(180deg, rgba(255, 180, 84, .08) 0%, rgba(255, 180, 84, 0) 110px),
        #ffffff;
    box-shadow:
        0 0 0 1px rgba(255, 173, 82, .26),
        0 0 12px rgba(255, 146, 40, .32),
        0 0 22px rgba(255, 146, 40, .16),
        0 10px 24px rgba(20, 38, 74, .08);
    overflow: hidden;
}

.gps-form-card .card-body {
    padding: 20px;
}

.gps-form-card .form-label {
    color: #1c2a44;
    font-size: .88rem;
    letter-spacing: .01em;
}

.gps-form-card .form-control,
.gps-form-card .form-select {
    border: 1.5px solid #d7e6fb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .95rem;
    background-color: #fbfdff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.gps-form-card .form-control:focus,
.gps-form-card .form-select:focus {
    border-color: #0b6fe8;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(11, 111, 232, .15);
    outline: none;
}

.gps-form-card .form-control::placeholder {
    color: #9aa7bd;
}

/* Listbox nhiều dòng (vd chọn cửa hàng) - polish được trong phạm vi CSS cho
   phép với native <select size>, đầy đủ trên Chrome/Edge (trình duyệt chính
   nhân viên/HR đang dùng); các trình duyệt khác vẫn dùng được, chỉ không
   đổi được màu dòng đang chọn. */
.gps-form-card select[size] {
    padding: 6px;
}

.gps-form-card select[size] option {
    padding: 9px 10px;
    border-radius: 8px;
    margin-bottom: 2px;
}

.gps-form-card select[size] option:hover {
    background-color: #eef5ff;
}

/* [SUA 20/09/2026] Doi tu xanh duong dam sang cam nen trong suot nhe - theo yeu
   cau anh Tan, dong bo mau voi bo LED cam cua .gps-form-card thay vi mau xanh
   lac long voi tong mau chu dao cua trang. */
.gps-form-card select[size] option:checked {
    background-color: rgba(255, 148, 40, .18);
    color: #b35900;
    font-weight: 600;
    /* [SUA 20/09/2026] Phong to nguyen dong dang chon (khong the tach rieng
       kich thuoc emoji voi ten cua hang trong 1 <option> - xem han che ky
       thuat da ghi o ADR-0001 muc 20) - tang chung font-size vua du de emoji
       📌 noi bat hon ma khong lam vo layout listbox 6 dong. */
    font-size: 1.08em;
}

/* [MOI 20/09/2026] Nut do lai GPS - truoc gio muon dinh vi lai phai F5 ca trang
   (anh Tan bao bat tien), gio bam nut nay goi lai navigator.geolocation ngay
   tai cho (xem refreshGeolocation() trong checkin.js). */
.gps-btn-refresh-gps {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #ffb464;
    background-color: #fff6ec;
    color: #d9720f;
    font-size: 1.05rem;
    transition: transform .15s ease, background-color .15s ease;
}

.gps-btn-refresh-gps:hover,
.gps-btn-refresh-gps:focus {
    background-color: #ffe6c8;
    color: #b35900;
}

.gps-btn-refresh-gps.gps-refreshing i {
    animation: gpsRefreshSpin .7s linear infinite;
}

@keyframes gpsRefreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.gps-form-card .btn-outline-danger {
    border-width: 1.5px;
    font-weight: 700;
    border-radius: 10px;
}

.gps-form-card .btn-outline-danger:hover {
    background-color: #d7374d;
    border-color: #d7374d;
}

@media (max-width: 576px) {
    .gps-form-card .card-body {
        padding: 16px;
    }
}

/* [MỚI - 19/09/2026] Bootstrap .text-warning mặc định (#ffc107, vàng) tương phản
   RẤT KÉM trên nền trắng/kem (~1.5:1, gần như không đọc được) - đây là lỗi thật đã
   phát hiện trên trang Chấm công, không phải chỉ để đẹp hơn. Đổi sang tông cam đậm đủ
   tương phản (đạt chuẩn WCAG AA cho chữ thường), vẫn giữ đúng Ý NGHĨA màu cam/vàng =
   cảnh báo mềm (không chặn) như đã dùng nhất quán trong toàn app. */
.gps-text-warning {
    color: #b35900;
    font-weight: 600;
}

/* Dòng tiêu đề trạng thái đầu trang (vd "Chưa check-in hôm nay" / "Đang ở: ...") -
   đây là thông tin quan trọng nhất trên trang nên cần nổi bật hơn hẳn text-muted mặc
   định của Bootstrap (quá nhạt, dễ bị bỏ qua khi liếc nhanh trên điện thoại). */
.gps-status-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #1c2a44;
}

/* =========================================================================
   [MỚI - 19/09/2026] Hàng nút lối tắt (quick-link) - style "3D" nhẹ, dùng lại
   đúng tông gradient xanh dương của .login-gps-badge (trang Đăng nhập) và cùng
   nguyên tắc box-shadow nổi khối với .request-action-btn--icon3d (Overtime) -
   để bấm nhanh sang Lịch sử/Nghỉ phép/Biểu mẫu ngay từ trang Chấm công, quan
   trọng nhất trên điện thoại vì menu trái bị ẩn sau nút hamburger.
   ========================================================================= */
.gps-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gps-quicklink {
    flex: 1 1 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1px solid #e1eaf6;
    background: #ffffff;
    text-decoration: none;
    color: #1c2a44;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    box-shadow: 0 4px 10px rgba(15, 38, 74, .06);
}

.gps-quicklink:hover {
    color: #0b6fe8;
    border-color: #bcd8ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 38, 74, .12);
}

.gps-quicklink-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(180deg, #4fa3ff 0%, #0b6fe8 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(11,111,232,.35);
}

/* Icon riêng cho trang Biểu mẫu - tông cam thay vì xanh dương để tách biệt rõ với
   nhóm thao tác chấm công hằng ngày (nhóm việc "in ấn/hành chính" khác nhóm
   "chấm công thực địa"). */
.gps-form-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(180deg, #ffb066 0%, var(--app-orange-strong, #e85d04) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(232,93,4,.28);
    flex: none;
}

.gps-badge-pending {
    background: #fff4e6;
    color: #b35900;
    font-weight: 600;
    font-size: .74rem;
    padding: 5px 10px;
    border-radius: 999px;
}

/* [MỚI - 20/09/2026] Mã màu theo loại địa điểm ở view "Kế hoạch - Tổng hợp"
   (HR/ADMIN) - giúp nhìn lướt cột Địa điểm là phân biệt ngay VP/cửa hàng/nơi
   khác, không phải đọc chữ. Cùng họ pill với .gps-badge-pending, chỉ đổi màu
   theo đúng nhóm màu đã dùng ở nơi khác trong app (VP xanh dương như
   .gps-quicklink-icon, cửa hàng cam như .gps-form-icon/.gps-badge-pending). */
.gps-badge-office {
    background: #e8f1ff;
    color: #0b5ed7;
    font-weight: 600;
    font-size: .74rem;
    padding: 5px 10px;
    border-radius: 999px;
}

.gps-badge-store {
    background: #fff4e6;
    color: #b35900;
    font-weight: 600;
    font-size: .74rem;
    padding: 5px 10px;
    border-radius: 999px;
}

.gps-badge-other {
    background: #eef0f3;
    color: #495057;
    font-weight: 600;
    font-size: .74rem;
    padding: 5px 10px;
    border-radius: 999px;
}

/* [MỚI - 20/09/2026, SỬA 24/09/2026 lần 3] Nút "Tìm" ở thanh lọc "Kế hoạch - Tổng hợp"/"Công
   tác phí - Tổng hợp" cao hơn hẳn ô ngày/tháng kế bên dù cùng hàng align-items-end - ĐO THẬT
   bằng Playwright (dựng lại đúng HTML + bootstrap.min.css thật, không đoán qua đọc code) mới
   thấy có 2 nguyên nhân CỘNG DỒN, không phải chỉ 1 như tưởng ban đầu:
   1. `.app-btn-primary` có sẵn `min-height:46px` (dành cho nút lớn ở trang Đăng nhập) trong
      khi `.form-control` không đặt min-height riêng (~38px theo padding/line-height chuẩn
      Bootstrap) → bỏ min-height riêng cho 2 nút này (không đổi `.app-btn-primary` gốc).
   2. SAU KHI bỏ min-height vẫn còn lệch ĐÚNG 2px - `.app-btn-primary` có `border: 0` trong khi
      `.form-control` có `border: 1px` (trên+dưới = 2px) - cùng padding/line-height/font-size
      nên riêng border là phần chênh còn lại. Thêm `border: 1px solid transparent` (viền
      TRONG SUỐT - không đổi màu/hiện viền gì cả, chỉ chiếm đúng 1px mỗi cạnh như input) để 2 ô
      cao bằng nhau TUYỆT ĐỐI (đã đo lại = 38px cả 2, không còn lệch dù chỉ 1px).
   [Lần trước từng thử né bằng label rỗng (`invisible`) phía trên nút - KHÔNG đúng nguyên nhân
   thật (label rỗng không đụng gì tới min-height/border), đã gỡ bỏ khỏi cả 2 view.]

   [SỬA 29/09/2026] Thêm #tetSearchBtn (nút "Tìm" ở tab "Tổng hợp" mới thêm - mục 81) - bị lệch
   giống hệt #tesSearchBtn vì cùng dùng class="btn app-btn-primary", nhưng lúc thêm tab đó chưa
   gộp vào rule này nên vẫn cao hơn ô "Tháng" kế bên (anh Tân chụp ảnh chỉ ra). Cùng 1 nguyên
   nhân/cách sửa như 2 nút kia, không cần phân tích lại. */
#workPlanLogPage #wplSearchBtn,
#travelExpenseSummaryPage #tesSearchBtn,
#travelExpenseSummaryPage #tetSearchBtn {
    min-height: 0;
    border: 1px solid transparent;
}

/* [MỚI 29/09/2026] Modal "Sửa chặng công tác phí" (#tesEditLegModal) - nút "Lưu" dùng
   .app-btn-primary (min-height 46px, border 0) trong khi nút "Huỷ" dùng .btn-outline-secondary
   mặc định Bootstrap (~38px, border 1px) nên 2 nút lệch chiều cao rõ - đồng bộ lại theo đúng
   cách đã áp cho #changePasswordModal .modal-footer .btn. */
#tesEditLegModal .modal-footer .btn {
    min-height: 44px;
    border-radius: 9px;
    font-weight: 700;
}

/* [MỚI 20/09/2026] Dòng lọc theo từng cột (dưới hàng tiêu đề xanh) - nền trắng nhạt
   riêng để không bị nhầm là 1 phần của header xanh, padding nhỏ hơn .app-table th mặc
   định (11px 14px quá rộng cho 1 ô input nhỏ). */
#workPlanLogPage .wpl-filter-row th {
    background: #f7fafd;
    padding: 6px 8px;
    text-transform: none;
    letter-spacing: normal;
}

#workPlanLogPage .wpl-sort-btn {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}

#workPlanLogPage .wpl-sort-btn:hover {
    opacity: .85;
}

/* [MỚI - 20/09/2026] Picker chọn cửa hàng cho "Kế hoạch làm việc" - thay cho
   <select> native. Danh mục cửa hàng nhiều chục dòng, native <select> trên
   điện thoại chỉ là 1 bánh xe cuộn dài không tìm được, phải kéo tay từng dòng
   (anh Tân báo không dùng nổi). Đổi sang: 1 nút giống .form-select mở modal
   (.emp-led-modal tái dùng từ Overtime - cùng khung LED cam với .gps-form-card
   nên đồng bộ luôn, không cần vẽ style modal mới) chứa ô tìm + danh sách cuộn
   riêng - modal tự nổi trên mọi thứ nên không lo bị .gps-form-card cắt mất
   (card đó có overflow:hidden, 1 dropdown "thả xuống" tại chỗ sẽ bị cắt cụt
   nếu đặt giữa card thay vì ở cuối). */
.gps-store-trigger {
    cursor: pointer;
    text-align: left;
    background-color: #fbfdff;
}

.gps-store-picker-list {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gps-store-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .95rem;
    color: #1c2a44;
}

    .gps-store-picker-item:hover {
        background-color: #eef5ff;
    }

    /* [MỚI 26/09/2026] Chip gợi ý nhanh (quick-reasons.js) đang được CHỌN (bấm tay hoặc tự
       chọn mặc định theo bộ phận lúc mở trang Check-in) - cùng gradient xanh với
       .gps-store-picker-item.active bên dưới cho nhất quán "đang chọn = nền xanh". */
    .gps-quick-reason-chip.active {
        background: linear-gradient(180deg, #4fa3ff 0%, #0b6fe8 100%);
        color: #fff;
        border-color: #0b6fe8;
        font-weight: 600;
    }

    .gps-store-picker-item.active {
        background: linear-gradient(180deg, #4fa3ff 0%, #0b6fe8 100%);
        color: #fff;
        font-weight: 600;
    }

.gps-store-picker-empty {
    text-align: center;
    color: #8a94a6;
    padding: 28px 12px;
    font-size: .9rem;
}

    .gps-store-picker-empty i {
        font-size: 1.4rem;
    }

/* [MỚI 21/09/2026] Danh sách cửa hàng ở trang Chấm công (#storeList) - tái dùng đúng
   .gps-store-picker-list/.gps-store-picker-item ở trên (vốn dựng cho modal /WorkPlan) NHƯNG
   hiện TRỰC TIẾP trên trang (không phải trong modal nổi) nên cần khung/kích thước riêng:
   viền + bo góc giống 1 ô input, chiều cao ~6 dòng (khớp cảm giác <select size="6"> gốc đã
   thay thế) thay vì 50vh (quá cao/thấp tuỳ màn hình khi đặt thẳng trên trang). */
.gps-checkin-store-list {
    max-height: 270px;
    border: 1px solid #d7e1f0;
    border-radius: 10px;
    padding: 4px;
    background: #fff;
}

/* [MỚI 24/09/2026] Bí danh chung cho DANH SÁCH LỌC ĐẶT THẲNG TRÊN TRANG (không phải modal nổi)
   - cùng style với .gps-checkin-store-list ở trên nhưng đặt tên KHÔNG gắn riêng "checkin" vì
   giờ dùng lại ở nhiều nơi khác (vd 3 ô "Chọn bộ phận"/"Chọn nhân sự" ở trang Biểu mẫu - anh
   Tân báo dropdown gốc khó tìm khi danh sách dài, đổi sang input tìm + danh sách lọc ngay dưới,
   thấp hơn .gps-store-picker-list gốc (50vh, dựng cho modal) để không chiếm hết màn hình. */
.gps-inline-picker-list {
    max-height: 220px;
    border: 1px solid #d7e1f0;
    border-radius: 10px;
    padding: 4px;
    background: #fff;
}

/* [MỚI 21/09/2026] Nền LED cam nhạt sáng nhấp nháy cho cửa hàng ĐANG CHỌN - thay cho cách
   né cũ (chỉ nhấp nháy icon 📌 trong chữ vì <option> gốc không tô nền/animation được, đặc
   biệt trên iOS Safari - xem ghi chú trong checkin.js/Index.cshtml). Scope riêng
   #checkinPage để KHÔNG đổi màu xanh .active gốc đang dùng ở modal chọn cửa hàng /WorkPlan
   (2 nơi khác mục đích: xanh = "đang chọn trong modal, chưa lưu"; cam nhấp nháy ở đây =
   "đang là lựa chọn thật sẽ check-in vào"). */
@keyframes gpsCheckinStoreBlink {
    0%, 100% {
        background: #fff3e2;
        box-shadow: inset 0 0 0 1px rgba(255, 157, 61, .4);
    }
    50% {
        background: #ffd9a3;
        box-shadow: inset 0 0 0 1px rgba(255, 146, 40, .75), 0 0 12px rgba(255, 146, 40, .5);
    }
}

/* [SỬA] .gps-store-picker-item.active gốc dùng SHORTHAND "background: linear-gradient(...)"
   (đặt background-image, không phải background-color) - override bằng "background-color"
   đơn thuần KHÔNG đủ để thay thế lớp gradient đó (gradient vẫn đè lên trên, chỉ đổi được
   background-color ẩn phía dưới, không thấy gì khác biệt trên màn hình). Phải dùng lại
   ĐÚNG shorthand "background" ở đây (và trong @keyframes ở trên) để tự reset hẳn
   background-image về none, gradient xanh gốc mới thật sự biến mất. */
#checkinPage .gps-store-picker-item.active {
    background: #ffe0b8;
    color: #8a4400;
    font-weight: 700;
    animation: gpsCheckinStoreBlink 1.2s ease-in-out infinite;
}

/* [MỚI 21/09/2026] Thêm lại icon GPS nhấp nháy ở góc phải dòng đang chọn (trước đây nhấp nháy
   icon 📌 ngay trong chữ - anh Tân muốn giữ lại icon này bên cạnh nền cam mới, không thay thế
   hẳn bằng nền màu). Mặc định ẩn - CHỈ hiện đúng dòng đang ".active"; nhấp nháy riêng bằng
   opacity+scale (khác biệt keyframe với nền để nhìn rõ 2 lớp hiệu ứng), không dùng lại
   gpsCheckinStoreBlink (keyframe đó chỉ đổi màu nền, không hợp để nhấp nháy 1 icon nhỏ). */
.gps-store-picker-item .gps-blink-icon {
    display: none;
    flex: none;
    font-size: 1rem;
}

#checkinPage .gps-store-picker-item.active .gps-blink-icon {
    display: inline-block;
    animation: gpsCheckinIconBlink 1.2s ease-in-out infinite;
}

@keyframes gpsCheckinIconBlink {
    0%, 100% {
        opacity: .35;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* =========================================================================
   [MỚI - 19/09/2026] Đồng bộ UI trang Lịch sử + Nghỉ phép với trang Chấm công:
   tab lọc dạng viên thuốc (thay .btn-group 2 nút cứng nhắc), thẻ danh sách nhẹ
   (khác gps-form-card - dùng cho DANH SÁCH nhiều dòng, không phải 1 khối hành
   động chính nên không viền LED, tránh rối mắt khi lặp lại nhiều lần), tiêu đề
   mục con, và trạng thái rỗng có viền đứt + icon thay vì chữ mờ trôi nổi một
   mình (nguyên nhân khiến "Đơn của tôi" trông như label lạc lõng, không rõ nó
   đang giới thiệu cho khối nội dung nào bên dưới).
   ========================================================================= */
.gps-tab-group {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #eaf1fc;
    border-radius: 12px;
}

.gps-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 12px;
    border-radius: 9px;
    font-weight: 700;
    font-size: .88rem;
    color: #4a5a78;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.gps-tab.active {
    background: #ffffff;
    color: #0b6fe8;
    box-shadow: 0 2px 8px rgba(15, 38, 74, .14);
}

.gps-list-item {
    border: 1px solid #e7edf6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 38, 74, .05);
}

.gps-list-item .card-body {
    padding: 12px 14px;
}

/* [MỚI 22/09/2026] Danh sách kết quả picker "Tìm nhân sự" ở tab Tài khoản đăng nhập
   (Quản lý nhân sự) - mỗi dòng là 1 lựa chọn bấm được (khác .gps-list-item thường chỉ hiển
   thị, không tương tác) nên cần cursor/hover/trạng thái đang chọn riêng. */
.gps-account-picker-row {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gps-account-picker-row:hover {
    border-color: #94b7ec;
}

.gps-list-item-active {
    border-color: #0b6fe8;
    box-shadow: 0 0 0 2px rgba(11, 111, 232, .18);
}

.gps-section-title {
    font-size: .92rem;
    font-weight: 700;
    color: #1c2a44;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gps-empty-state {
    border: 1.5px dashed #d7e6fb;
    border-radius: 12px;
    background: #fbfdff;
    color: #74839a;
}

.gps-empty-state i {
    font-size: 1.4rem;
    color: #b7c9e6;
}

/* =========================================================================
   [MỚI - 19/09/2026] Timeline "lộ trình đã đi" cho trang Lịch sử - nối các
   .gps-list-item (đổi tên bên trong thành .gps-route-stop khi dùng trong
   nhóm theo ngày) bằng 1 đường kẻ dọc + chấm tròn, chặng di chuyển giữa 2
   điểm hiện thành 1 dòng nhãn riêng trên đường kẻ. Dữ liệu này (khoảng cách
   từng chặng) sau này dùng lại để điền mẫu công tác phí (D.7 mẫu 4) - xem
   CheckinService.GetHistoryAsync (CheckinHistoryItemDto.LegDistanceMeters).
   ========================================================================= */
.gps-route-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 8px;
    font-size: .84rem;
}

.gps-route-day-date {
    font-weight: 700;
    color: #1c2a44;
    text-transform: capitalize;
}

.gps-route-day-summary {
    color: #5a6b8a;
    white-space: nowrap;
}

.gps-route-timeline {
    position: relative;
    padding-left: 30px;
}

.gps-route-timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(180deg, #0b6fe8 0%, #bcd8ff 100%);
}

.gps-route-stop {
    position: relative;
    margin-bottom: 10px;
}

/* [SỬA 20/09/2026] Đánh số thứ tự điểm (1, 2, 3...) ngay trong chấm tròn -
   anh Tân yêu cầu để biết điểm nào đầu tiên/kế tiếp trong ngày mà không phải
   tự đếm bằng mắt. Số lấy từ data-order (JS set theo thứ tự trong ngày, xem
   checkin-history.js renderRouteStop) qua attr() - không cần thêm phần tử
   con nào, tận dụng đúng ::before đang vẽ chấm tròn sẵn có. Chấm tròn phóng
   to từ 13px lên 20px để chữ số không bị bóp méo. */
.gps-route-stop::before {
    content: attr(data-order);
    position: absolute;
    left: -30px;
    top: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0b6fe8;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 0 2px #0b6fe8;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-family: var(--bs-body-font-family, inherit);
}

.gps-route-stop--open::before {
    background: #1a8f5d;
    box-shadow: 0 0 0 2px #1a8f5d, 0 0 0 5px rgba(26, 143, 93, .18);
}

.gps-route-leg {
    position: relative;
    margin: -4px 0 10px 2px;
    font-size: .78rem;
    color: #5a6b8a;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gps-route-leg i {
    color: #0b6fe8;
}

@media (max-width: 380px) {
    .gps-route-timeline {
        padding-left: 27px;
    }

    .gps-route-stop::before {
        left: -27px;
        width: 18px;
        height: 18px;
        font-size: .6rem;
    }
}

/* =========================================================================
   [MỚI - 21/09/2026] Tab "Đồng nghiệp" (trang Kế hoạch làm việc tự phục vụ) -
   lưới thu gọn kế hoạch NV khác trong ngày, mỗi ô 1 NV. auto-fill + minmax
   để tự co giãn: 1 cột trên điện thoại hẹp, 2 cột trở lên khi màn rộng hơn -
   không cần media query riêng, CSS Grid tự tính.
   ========================================================================= */
.gps-team-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.gps-team-plan-card {
    border: 1px solid #e7edf6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 38, 74, .05);
    padding: 10px 12px;
}

.gps-team-plan-name {
    font-weight: 700;
    font-size: .88rem;
    color: #1c2a44;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gps-team-plan-name i {
    color: #0b6fe8;
}

/* =========================================================================
   [MỚI - 21/09/2026] Cây tổ chức bộ phận văn phòng - trang "Quản lý nhân sự"
   (EmployeeAdmin). Thụt lề bằng padding-left + viền trái mảnh lặp lại theo cấp
   (không dùng bảng/khung riêng từng cấp) - đơn giản, tự đúng ở mọi độ sâu.
   ========================================================================= */
.org-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-dept {
    border: 1px solid #e7edf6;
    border-radius: 10px;
    background: #fff;
    cursor: grab;
}

.org-dept:active {
    cursor: grabbing;
}

.org-dept.org-dragging {
    opacity: .4;
}

.org-dept.org-drag-over > .org-dept-header {
    background: #eaf3ff;
    box-shadow: inset 0 0 0 2px #0b6fe8;
    border-radius: 9px;
}

.org-dept-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}

.org-dept-icon {
    color: #0b6fe8;
    font-size: 1rem;
    flex: none;
}

.org-dept-name {
    font-weight: 700;
    font-size: .92rem;
    color: #1c2a44;
}

.org-dept-head {
    font-size: .78rem;
    color: #b35900;
    background: #fff4e6;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.org-dept-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.org-btn {
    border: none;
    background: transparent;
    color: #5a6b8a;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

.org-btn:hover {
    background: #eef5ff;
    color: #0b6fe8;
}

.org-dept-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 10px 26px;
    border-left: 2px solid #e7edf6;
    margin-left: 18px;
}

.org-dept-children:empty {
    display: none;
}

/* [MỚI 22/09/2026] Thu gọn/bung nhánh cây - mặc định các nhánh GỐC thu gọn sẵn (xem
   collapsedDeptIds trong employee-admin.js), bấm chevron ở đầu mỗi bộ phận để mở/thu riêng
   nhánh đó, hoặc dùng nút "Mở rộng tất cả" ở tiêu đề "Cây tổ chức" để mở/thu toàn bộ 1 lần. */
.org-dept.org-dept-collapsed > .org-dept-children {
    display: none;
}

.org-dept-toggle {
    color: #0b6fe8;
}

.org-dept-toggle-spacer {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: none;
}

.org-emp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f8fafd;
    font-size: .86rem;
    color: #1c2a44;
    cursor: grab;
}

.org-emp:active {
    cursor: grabbing;
}

.org-emp:hover {
    background: #eef5ff;
}

.org-emp.org-dragging {
    opacity: .4;
}

.org-emp i {
    color: #6c86ad;
    flex: none;
}

.org-emp-position {
    color: #74839a;
    font-size: .78rem;
}

.org-emp-inactive {
    opacity: .55;
}

.org-emp-badge {
    font-size: .72rem;
    font-weight: 700;
    color: #b02a37;
    background: #f8d7da;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
}

/* [MỚI 25/09/2026] Icon "Sửa hồ sơ nhân sự" trên mỗi dòng NV - margin-left:auto tự đẩy sát mép
   phải kể cả khi không có .org-emp-badge đứng trước nó (NV còn ACTIVE); có badge thì nút này
   tự nằm sát ngay sau badge (badge đã chiếm phần margin-left:auto trước) - cả 2 trường hợp đều
   ra đúng cụm nằm bên phải như dãy icon của dòng bộ phận. width/height nhỏ hơn .org-btn gốc
   (30px, dựng cho dòng bộ phận rộng hơn) cho vừa dòng NV thấp hơn. */
.org-btn-edit-emp {
    flex: none;
    margin-left: auto;
    width: 26px;
    height: 26px;
    font-size: .8rem;
}

.org-root-drop {
    border: 1.5px dashed #0b6fe8;
    border-radius: 10px;
    background: #eaf3ff;
    color: #0b6fe8;
    font-weight: 600;
    font-size: .84rem;
    text-align: center;
    padding: 12px;
    margin-bottom: 10px;
}

.org-root-drop.org-drag-over {
    background: #d7e9ff;
    box-shadow: inset 0 0 0 2px #0b6fe8;
}

/* [MỚI 30/09/2026] "Trạng thái = Offline" ở Công tác phí - Tổng hợp (tab Chi tiết) - dòng tô
   đỏ nhạt CHỈ khi CHƯA có ai xem lại (NeedsReview) - tô mất ngay sau khi Trưởng bộ phận/HR/
   ADMIN bấm "Sửa" + lưu, nhưng badge "Offline" ở cột Trạng thái vẫn còn để tra cứu sau này. */
.tes-row-offline-alert > td {
    background-color: #fdecea !important;
}

.tes-badge-offline {
    background-color: #dc3545;
    color: #fff;
    font-weight: 600;
    font-size: .72rem;
    padding: 4px 8px;
    border-radius: 999px;
}

/* [MỚI 30/09/2026] "Chấm công offline" - thẻ thay thế Check-in/Check-out khi có thao tác
   đang chờ đồng bộ VÀ đã có mạng trở lại (checkin.js) - chặn NV bấm Check-in tiếp (sợ trùng
   chặng) cho tới khi bấm "Đồng bộ dữ liệu". Dùng cùng khung .gps-form-card cho đồng bộ giao
   diện, viền cam đậm hơn để nổi bật hơn hẳn trạng thái bình thường. */
.gps-offline-sync-card {
    border-color: var(--app-orange-strong, #e85d04) !important;
    box-shadow: 0 0 0 2px rgba(232, 93, 4, .15);
}

.gps-offline-sync-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gps-offline-sync-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed #e3d5c8;
}

.gps-offline-sync-list li:last-child {
    border-bottom: none;
}

/* [MỚI 30/09/2026] Băng nhỏ "còn N thao tác chờ đồng bộ" hiện PHÍA TRÊN form Check-in/
   Check-out trong lúc CÒN MẤT MẠNG (NV vẫn thao tác tiếp bình thường - khác hẳn
   .gps-offline-sync-card, cái đó CHẶN thao tác, chỉ hiện khi ĐÃ có mạng trở lại). */
.gps-offline-pending-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #b35900;
    background: #fff3e6;
    border: 1px solid #ffd9a8;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

/* [MỚI 30/09/2026] Cạnh chuông thông báo - chỉ báo kết nối mạng, luôn hiện cho MỌI tài khoản
   (không gate quyền, ai chấm công cũng cần biết đang online/offline) - chấm tròn nhấp nháy nhẹ
   khi offline để dễ nhận ra hơn khi liếc nhanh trên điện thoại. */
.conn-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.conn-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.conn-status-online {
    color: #198754;
    background: #e9f7ef;
}

.conn-status-online .conn-status-dot {
    background: #198754;
}

.conn-status-offline {
    color: #dc3545;
    background: #fdecea;
    animation: connStatusPulse 1.6s ease-in-out infinite;
}

.conn-status-offline .conn-status-dot {
    background: #dc3545;
}

@keyframes connStatusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* [MỚI 30/09/2026] Băng nhỏ dùng chung "Lịch sử"/"Kế hoạch làm việc" khi đang xem dữ liệu Service
   Worker đã lưu tạm lúc mất mạng - xem window.GpsOfflineNotice (site.js). */
.gps-offline-data-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #b35900;
    background: #fff3e6;
    border: 1px solid #ffd9a8;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
}