/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-cjihyrkak7] {
    display: flex;
    min-height: 100vh;
    background-color: var(--ems-nen);
}

/* Cột dọc để mục Đăng xuất trong NavMenu đẩy được xuống đáy bằng margin-top:auto. */
.sidebar[b-cjihyrkak7] {
    flex: 0 0 17.5rem;
    width: 17.5rem;
    background: var(--ems-sidebar);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.main[b-cjihyrkak7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ----- Thanh trên cùng ----- */

.topbar[b-cjihyrkak7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border-bottom: 1px solid var(--ems-vien);
    padding: 0 1.75rem;
    height: 4rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tieu-de[b-cjihyrkak7] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ems-chu);
}

.nguoi-dung[b-cjihyrkak7] {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.avatar[b-cjihyrkak7] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ems-nen-nhat);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.avatar-svg-cu svg[b-cjihyrkak7] {
    width: 1.4rem;
    height: 1.4rem;
}

.thong-tin[b-cjihyrkak7] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ten[b-cjihyrkak7] {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ems-chu);
}

.phu[b-cjihyrkak7] {
    font-size: .75rem;
    color: var(--ems-chu-mo);
}

/* ----- Vùng nội dung ----- */

.noi-dung[b-cjihyrkak7] {
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem;
}

/* Màn hình hẹp chỉ nới chỗ cho nội dung. Thanh bên xử lý riêng ở khối bên dưới. */
@media (max-width: 62rem) {
    .topbar[b-cjihyrkak7] {
        padding: 0 1rem;
    }

    .noi-dung[b-cjihyrkak7] {
        padding: 1rem;
    }

    .thong-tin[b-cjihyrkak7] {
        display: none;
    }
}


/* ================= Thanh bên: thương hiệu + thẻ hồ sơ ================= */

/* ================= Công tắc thanh bên =================

   Ô đánh dấu ẩn đứng ngay trước .shell, nên với tới được bằng dấu ~.

   Ẩn bằng clip chứ không display:none - display:none làm nó rơi khỏi thứ tự
   Tab, người dùng bàn phím sẽ không mở được menu.
   ===================================================== */
.cong-tac[b-cjihyrkak7] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Màn rộng: thanh bên hiện sẵn, đánh dấu thì thu đi cho rộng chỗ. */
.cong-tac:checked ~ .shell .sidebar[b-cjihyrkak7] {
    display: none;
}

/* Bàn phím Tab tới ô đánh dấu thì viền sáng lên ở nút ☰. */
.cong-tac:focus-visible ~ .shell .nut-thu-gon[b-cjihyrkak7] {
    outline: 2px solid var(--ems-xanh);
    outline-offset: 2px;
}

.thuong-hieu[b-cjihyrkak7] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.thuong-hieu .logo[b-cjihyrkak7] {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    object-fit: contain;
    /* Logo đỏ trên nền xanh đậm nên phải có nền sáng, không thì chìm. */
    background: #fff;
    border-radius: .5rem;
    padding: .28rem;
}

.thuong-hieu .chu[b-cjihyrkak7] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.ten-he-thong[b-cjihyrkak7] {
    color: #fff;
    font-weight: 700;
    font-size: 1.0625rem;
}

.thuong-hieu .mo-ta[b-cjihyrkak7] {
    color: rgba(255, 255, 255, .55);
    font-size: .6875rem;
}

/* ----- Thẻ nhân viên ----- */

.the-ho-so[b-cjihyrkak7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.25rem 1rem .875rem;
}

.the-ho-so .anh[b-cjihyrkak7] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: linear-gradient(140deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.the-ho-so .ma[b-cjihyrkak7] {
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
}

.the-ho-so .ho-ten[b-cjihyrkak7] {
    color: rgba(255, 255, 255, .75);
    font-size: .8125rem;
    text-align: center;
}

.the-vai-tro[b-cjihyrkak7] {
    margin-top: .25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, .25);
    color: #bfdbfe;
    font-size: .6875rem;
    font-weight: 600;
}

/* ----- Khối thông tin ----- */

.khoi-ho-so[b-cjihyrkak7] {
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nhan-khoi[b-cjihyrkak7] {
    color: rgba(255, 255, 255, .45);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .625rem;
}

.ds-ho-so[b-cjihyrkak7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem .5rem;
    margin: 0;
    font-size: .75rem;
    align-items: baseline;
}

.ds-ho-so dt[b-cjihyrkak7] {
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}

.ds-ho-so dd[b-cjihyrkak7] {
    margin: 0;
    color: #fff;
    text-align: right;
    font-weight: 500;
}

/* ----- Đăng xuất ----- */

/* Đổi mật khẩu đứng ngay trên Đăng xuất, cùng kiểu dáng. Nó nhận margin-top:auto
   để đẩy cả cụm xuống đáy thanh bên; Đăng xuất bên dưới thì thôi. */
.doi-mk[b-cjihyrkak7] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .9375rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.doi-mk:hover[b-cjihyrkak7] {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.doi-mk svg[b-cjihyrkak7] {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.dang-xuat[b-cjihyrkak7] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .9375rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.dang-xuat:hover[b-cjihyrkak7] {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.dang-xuat svg[b-cjihyrkak7] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

/* ================= Thanh trên cùng ================= */

.nut-thu-gon[b-cjihyrkak7] {
    background: none;
    border: none;
    padding: .35rem;
    cursor: pointer;
    /* Là thẻ <label> chứ không phải <button>: bấm nhanh hai lần sẽ bôi đen chữ
       nếu không chặn. */
    user-select: none;
    color: var(--ems-chu-mo);
    display: grid;
    place-items: center;
    border-radius: .375rem;
}

.nut-thu-gon:hover[b-cjihyrkak7] {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu);
}

.nut-thu-gon svg[b-cjihyrkak7] {
    width: 1.35rem;
    height: 1.35rem;
}

/* Tiêu đề đẩy phần còn lại sang phải, thay cho justify-content: space-between. */
.tieu-de[b-cjihyrkak7] {
    margin-right: auto;
}

.chuong[b-cjihyrkak7] {
    color: var(--ems-chu-mo);
    display: grid;
    place-items: center;
    padding: .35rem;
    border-radius: .375rem;
}

.chuong:hover[b-cjihyrkak7] {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu);
}

.chuong svg[b-cjihyrkak7] {
    width: 1.3rem;
    height: 1.3rem;
}

/* Avatar trên thanh trên cùng giờ là chữ cái đầu, không còn hình người. */
.avatar[b-cjihyrkak7] {
    background: linear-gradient(140deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

/* ================= Thanh bên trên điện thoại và máy tính bảng =================

   Màn rộng  : thanh bên luôn hiện, bấm nút thì ẩn đi cho rộng chỗ.
   Màn hẹp   : ẩn sẵn, bấm nút thì TRƯỢT RA đè lên nội dung, đủ chữ như màn rộng.

   Cùng một ô đánh dấu mang hai nghĩa ngược nhau ở hai khổ màn hình. Nhìn thì lạ,
   nhưng đúng với cái nút: nó luôn là "đảo trạng thái thanh bên", còn trạng thái
   mặc định thì mỗi khổ màn hình một khác.
   ============================================================================ */
@media (max-width: 62rem) {
    .sidebar[b-cjihyrkak7] {
        display: none;
    }

    /* Màn hẹp thì ngược lại: ẩn sẵn, đánh dấu mới trượt ra. Cùng một cái công
       tắc nhưng hai khổ màn hình hiểu ngược nhau - đúng với cái nút, vì nó luôn
       là "đảo trạng thái", còn mặc định thì mỗi khổ một khác. */
    .cong-tac:checked ~ .shell .sidebar[b-cjihyrkak7] {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        /* Rộng như màn lớn để chữ đủ chỗ, nhưng không quá 85% màn hình - phải
           chừa một dải để bấm ra ngoài mà đóng lại. */
        width: min(17.5rem, 85vw);
        flex-basis: auto;
        height: 100vh;
        z-index: 30;
        box-shadow: 0 0 40px rgba(0, 0, 0, .45);
    }

    /* Nền mờ phía sau: vừa làm rõ ngăn kéo đang đè lên nội dung, vừa là chỗ
       bấm để đóng lại. Nút đóng nằm trong MainLayout.razor. */
    .cong-tac:checked ~ .shell .nen-mo[b-cjihyrkak7] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(10, 20, 40, .5);
        border: none;
        cursor: pointer;
    }
}

/* Màn rộng không bao giờ cần nền mờ. */
.nen-mo[b-cjihyrkak7] {
    display: none;
}



/* ================= Trau chuốt thanh bên ================= */

.sidebar[b-cjihyrkak7] {
    /* Chuyển màu nhẹ theo chiều dọc, đỡ phẳng lì như một mảng đặc. */
    background: linear-gradient(180deg, #1b3057 0%, var(--ems-sidebar) 42%, #12203c 100%);
}

.thuong-hieu:hover[b-cjihyrkak7] {
    background: rgba(255, 255, 255, .04);
}

.ten-he-thong[b-cjihyrkak7] {
    letter-spacing: .03em;
}

/* ----- Thẻ nhân viên ----- */

.the-ho-so[b-cjihyrkak7] {
    padding: 1.4rem 1rem 1rem;
}

.the-ho-so .anh[b-cjihyrkak7] {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.4rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .09);
}

.the-ho-so .ma[b-cjihyrkak7] {
    font-size: .875rem;
    letter-spacing: .02em;
}

.the-ho-so .ho-ten[b-cjihyrkak7] {
    font-size: .875rem;
    color: rgba(255, 255, 255, .88);
    font-weight: 500;
}

.the-vai-tro[b-cjihyrkak7] {
    margin-top: .45rem;
}

/* ----- Khối thông tin ----- */

.khoi-ho-so[b-cjihyrkak7] {
    margin: 0 .875rem 0;
    padding: .875rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: .625rem;
}

.ds-ho-so dt[b-cjihyrkak7] {
    font-size: .7188rem;
}

.ds-ho-so dd[b-cjihyrkak7] {
    font-size: .7188rem;
}

/* Dòng kẻ mảnh giữa các mục cho dễ dò mắt theo hàng. */
.ds-ho-so dt:not(:first-of-type)[b-cjihyrkak7],
.ds-ho-so dd:not(:first-of-type)[b-cjihyrkak7] {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: .45rem;
}

/* ================= Trau chuốt thanh trên ================= */

.topbar[b-cjihyrkak7] {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: 0 1.5rem 0 1rem;
    gap: .75rem;
}

.tieu-de[b-cjihyrkak7] {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.nguoi-dung[b-cjihyrkak7] {
    padding: .35rem .75rem .35rem .35rem;
    border-radius: 999px;
    border: 1px solid var(--ems-vien);
    background: #fff;
}

.noi-dung[b-cjihyrkak7] {
    padding: 1.25rem 1.5rem 2rem;
}


/* ================= Nới thanh bên cho chữ nằm gọn một dòng ================= */

/* Nhãn co lại vừa đúng nội dung, phần dư dồn hết cho cột giá trị bên phải,
   nên "1 năm 7 tháng" hay "Nghiền Tráng Men" không bị bẻ xuống dòng. */
.ds-ho-so[b-cjihyrkak7] {
    grid-template-columns: max-content 1fr;
    column-gap: .75rem;
}

.ds-ho-so dd[b-cjihyrkak7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logo giữ nguyên tỷ lệ, không bị bóp méo trong khung vuông. */
.thuong-hieu .logo[b-cjihyrkak7] {
    width: 2.5rem;
    height: 2.5rem;
}


/* Không có khối hồ sơ thì thẻ nhân viên tự chừa khoảng dưới, để menu ngay sau
   nó không dính sát vào nhãn vai trò. */
.the-ho-so:last-of-type[b-cjihyrkak7] {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar (trong MainLayout) là flex column, nên .chan tự đẩy xuống đáy. */
.thuong-hieu[b-lvubpcwmwe] {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.125rem 1.25rem;
    color: #fff;
}

.logo[b-lvubpcwmwe] {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--ems-xanh);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.logo svg[b-lvubpcwmwe] {
    width: 1.2rem;
    height: 1.2rem;
}

.ten-app[b-lvubpcwmwe] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.menu[b-lvubpcwmwe] {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .625rem;
}

.chan[b-lvubpcwmwe] {
    margin-top: auto;
    padding: .625rem .625rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------------
   BẮT BUỘC dùng ::deep cho thẻ <a>.
   NavLink là một component, thẻ <a> do chính nó sinh ra nên KHÔNG mang thuộc
   tính scoped (b-xxxxx) của NavMenu. Viết selector .muc trực tiếp sẽ biên dịch
   thành .muc[b-xxxxx] và không khớp gì cả - menu sẽ trơ ra thành link xanh
   gạch chân mặc định của trình duyệt.
   ::deep bỏ ràng buộc scoped cho phần tử con, neo từ .menu / .chan là hai
   phần tử viết thẳng trong NavMenu nên có scoped.
   --------------------------------------------------------------------------- */
.menu[b-lvubpcwmwe]  .muc,
.chan[b-lvubpcwmwe]  .muc {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    color: #cbd5e1;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.2;
    transition: background-color .12s ease, color .12s ease;
}

.menu[b-lvubpcwmwe]  .muc:hover,
.chan[b-lvubpcwmwe]  .muc:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* NavLink tự gắn class active cho mục đang mở. */
.menu[b-lvubpcwmwe]  .muc.active,
.chan[b-lvubpcwmwe]  .muc.active {
    background: var(--ems-xanh);
    color: #fff;
    font-weight: 600;
}

.icon[b-lvubpcwmwe] {
    flex: 0 0 auto;
    display: inline-flex;
}

.icon svg[b-lvubpcwmwe] {
    width: 1.15rem;
    height: 1.15rem;
}

.nhan[b-lvubpcwmwe] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trước đây màn hẹp co thanh bên thành dải icon không chữ. Bỏ đi: nhìn mỗi
   icon thì không đoán được "Tổng hợp công" với "Duyệt công" cái nào là cái nào,
   mà vẫn ăn mất 64px của màn hình điện thoại vốn đã chật.

   Giờ màn hẹp ẩn hẳn thanh bên, bấm nút mới trượt ra - xem MainLayout.razor.css */


/* Nhãn cho biết đang ở trong phân hệ nào - thanh bên còn có thẻ hồ sơ phía trên. */
.nhan-phan-he[b-lvubpcwmwe] {
    padding: .875rem 1.25rem .35rem;
    color: rgba(255, 255, 255, .45);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* /Components/Pages/BangChamCom.razor.rz.scp.css */
/* Khung bảng dùng lại cách trình bày của Tổng hợp công cho hai màn nhất quán. */
.thanh-loc[b-s3y4fu6kfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.chon-bo-phan[b-s3y4fu6kfs] {
    width: auto;
    min-width: 14rem;
}

/* Điện thoại: bỏ bề rộng ép, không thì ô này một mình đã 224px trên màn 360px. */
@media (max-width: 40rem) {
    .chon-bo-phan[b-s3y4fu6kfs] {
        width: 100%;
        min-width: 0;
    }
}
.ten-bo-phan[b-s3y4fu6kfs] {
    font-size: 1.05rem;
    font-weight: 700;
}
.thang[b-s3y4fu6kfs] {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.ten-thang[b-s3y4fu6kfs] {
    font-weight: 700;
    min-width: 9rem;
    text-align: center;
}
.nut-thang[b-s3y4fu6kfs] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    background: #fff;
    color: var(--ems-chu);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.nut-thang:hover:not(:disabled)[b-s3y4fu6kfs] {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}
.nut-thang:disabled[b-s3y4fu6kfs] {
    opacity: .4;
    cursor: not-allowed;
}
.bang-cuon[b-s3y4fu6kfs] {
    overflow-x: auto;
}
.cot-ten[b-s3y4fu6kfs] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    text-align: left !important;
    min-width: 11rem;
    border-right: 1px solid var(--ems-vien);
    padding-left: .75rem !important;
}
.luoi-cong thead .cot-ten[b-s3y4fu6kfs] {
    z-index: 3;
    background: var(--ems-nen-nhat);
}
.lien-ket:hover .ho-ten[b-s3y4fu6kfs] {
    text-decoration: underline;
}
.ma[b-s3y4fu6kfs] {
    font-weight: 600;
    color: var(--ems-xanh);
    margin-right: .35rem;
}
.ho-ten[b-s3y4fu6kfs] {
    color: var(--ems-chu);
}
.chuc-vu[b-s3y4fu6kfs] {
    display: block;
    font-size: .6875rem;
    color: var(--ems-chu-mo);
}
.cot-ngay[b-s3y4fu6kfs] {
    width: 2.6rem;
}
.cot-ngay.cuoi-tuan[b-s3y4fu6kfs] {
    color: var(--ems-do);
}
.cot-tong[b-s3y4fu6kfs] {
    min-width: 3.5rem;
    border-left: 1px solid var(--ems-vien);
}
.cot-tong.manh[b-s3y4fu6kfs] {
    font-weight: 700;
    color: var(--ems-xanh-la);
}
.cot-tong.cam[b-s3y4fu6kfs] {
    color: var(--ems-cam);
}
.chu-thich[b-s3y4fu6kfs] {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    align-items: center;
}
.chu-thich .o-ngay[b-s3y4fu6kfs] {
    margin-right: .3rem;
    vertical-align: -4px;
}
.cot-tong.tang-ca[b-s3y4fu6kfs] {
    color: var(--ems-xanh);
    font-weight: 600;
}

/* ----- Riêng bảng chấm cơm ----- */

.luoi-com[b-s3y4fu6kfs] {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: .875rem;
}

.luoi-com th[b-s3y4fu6kfs],
.luoi-com td[b-s3y4fu6kfs] {
    border: 1px solid var(--ems-vien);
    padding: .3rem .25rem;
}

/* Ô có suất tô nổi lên, ô không ăn để dấu chấm mờ - mắt bắt ngay ngày nào có cơm. */
.o-suat[b-s3y4fu6kfs] {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.5rem;
    padding: 0 .3rem;
    border-radius: .3rem;
    background: #fff4e5;
    color: #c2410c;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.o-suat.ngay[b-s3y4fu6kfs] {
    background: var(--ems-xanh-nhat);
    color: var(--ems-xanh);
}

.o-trong[b-s3y4fu6kfs] {
    color: #cbd5e1;
}

.tong-thang[b-s3y4fu6kfs] {
    float: right;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ems-cam);
}

.luoi-com tfoot td[b-s3y4fu6kfs] {
    background: var(--ems-nen-nhat);
    font-weight: 600;
}

/* Nút trên thanh lọc: một cái là thẻ liên kết, một cái là nút thật nên phải
   tự căn cho giống nhau. */
.nut-xuat[b-s3y4fu6kfs] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    background: #fff;
    color: var(--ems-chu);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nut-xuat:hover[b-s3y4fu6kfs] {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}

.nut-xuat svg[b-s3y4fu6kfs] {
    width: 1rem;
    height: 1rem;
}

/* Ô chọn thay cho ô số khi quản đốc bật chế độ sửa. */
.o-sua-com[b-s3y4fu6kfs] {
    width: 100%;
    min-width: 2.4rem;
    padding: .15rem .1rem;
    border: 1px solid var(--ems-vien);
    border-radius: .3rem;
    font-size: .8125rem;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    background: #fff;
    color: var(--ems-chu);
    appearance: none;
}

.o-sua-com:focus[b-s3y4fu6kfs] {
    outline: none;
    border-color: var(--ems-xanh);
    box-shadow: 0 0 0 2px var(--ems-xanh-nhat);
}

/* ==========================================================================
   ĐIỆN THOẠI

   Bảng 33 cột không dùng được - cất đi, thay bằng thẻ. Kiểu dáng thẻ nằm ở
   app.css vì màn tổng hợp công cũng dùng; ở đây chỉ quyết định màn NÀY đổi
   sang thẻ. Việc ẩn bảng không để chung được: bảy màn dùng .bang-cuon, phần
   lớn chưa có thẻ thay thế.
   ========================================================================== */
@media (max-width: 40rem) {
    .bang-cuon[b-s3y4fu6kfs] { display: none; }

    /* Số suất bếp nấu trong ngày - cùng cỡ với ô chọn bên các thẻ trên để
       hai danh sách đọc thẳng hàng nhau. */
    .so-bep[b-s3y4fu6kfs] {
        font-size: 1rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 40rem) and (orientation: landscape) {
    .bang-cuon[b-s3y4fu6kfs] { display: block; }
}
/* /Components/Pages/BangLuong.razor.rz.scp.css */
/* Dải kết quả tính lại ngay khi kế toán gõ, để thấy hệ quả trước khi lưu. */
.ket-qua[b-jz2r5f5wtx] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: .75rem 1rem;
    background: var(--ems-nen-nhat);
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--ems-chu-mo);
}

.ket-qua strong[b-jz2r5f5wtx] {
    color: var(--ems-chu);
    font-variant-numeric: tabular-nums;
    margin-left: .25rem;
}

.ket-qua .manh strong[b-jz2r5f5wtx] {
    color: var(--ems-xanh);
    font-size: 1.05rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ----- Lời chào ----- */

.loi-chao[b-vdxc043fn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* Dải màu nhạt để dòng chào tách khỏi nền xám, không phải một hộp trắng nữa. */
    background: linear-gradient(105deg, #eff6ff 0%, #fdfdff 55%, #fff 100%);
    border: 1px solid #dbeafe;
    border-radius: .875rem;
    padding: 1.35rem 1.6rem;
    margin-bottom: 1.25rem;
}

.loi-chao h2[b-vdxc043fn1] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ems-chu);
}

.loi-chao h2 strong[b-vdxc043fn1] {
    color: var(--ems-xanh);
}

.loi-chao p[b-vdxc043fn1] {
    margin: .3rem 0 0;
    color: var(--ems-chu-mo);
    font-size: .9375rem;
}

.moc-thoi-gian[b-vdxc043fn1] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: var(--ems-chu-mo);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ----- Bảng chọn phân hệ ----- */

.luoi-phan-he[b-vdxc043fn1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.the-phan-he[b-vdxc043fn1] {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-radius: .875rem;
    padding: 1.6rem 1.25rem 1.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

/* Vệt màu mỏng trên đỉnh thẻ - dấu hiệu nhận phân hệ nhanh nhất. */
.vet-mau[b-vdxc043fn1] {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

.the-phan-he:not(.chua-co):hover[b-vdxc043fn1] {
    box-shadow: 0 .75rem 1.5rem rgba(16, 24, 40, .1);
    transform: translateY(-3px);
    border-color: #cfd9e6;
}

.the-phan-he.chua-co[b-vdxc043fn1] {
    background: #fbfcfe;
    border-style: dashed;
    box-shadow: none;
}

.the-phan-he.chua-co .bieu-tuong[b-vdxc043fn1],
.the-phan-he.chua-co h3[b-vdxc043fn1],
.the-phan-he.chua-co p[b-vdxc043fn1] {
    opacity: .55;
}

.bieu-tuong[b-vdxc043fn1] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
}

.bieu-tuong svg[b-vdxc043fn1] {
    width: 1.65rem;
    height: 1.65rem;
}

.the-phan-he h3[b-vdxc043fn1] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--ems-chu);
}

.the-phan-he p[b-vdxc043fn1] {
    margin: 0;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
    line-height: 1.55;
    flex: 1 1 auto;
}

.nut-vao[b-vdxc043fn1] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding: .55rem 1.25rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: filter .15s ease;
}

.nut-vao:not(.khoa):hover[b-vdxc043fn1] {
    filter: brightness(1.08);
}

.nut-vao.khoa[b-vdxc043fn1] {
    background: #eef2f7;
    color: #9aa8bb;
    cursor: default;
    font-weight: 500;
}

/* Mỗi phân hệ một màu để nhận ra ngay, không phải đọc chữ. */
.xanh    .bieu-tuong[b-vdxc043fn1] { background: #e0edff; color: #1d4ed8; }
.xanh-la .bieu-tuong[b-vdxc043fn1] { background: #dcfce7; color: #15803d; }
.cam     .bieu-tuong[b-vdxc043fn1] { background: #ffedd5; color: #c2410c; }
.tim     .bieu-tuong[b-vdxc043fn1] { background: #ede9fe; color: #6d28d9; }

.xanh    .vet-mau[b-vdxc043fn1] { background: #2563eb; }
.xanh-la .vet-mau[b-vdxc043fn1] { background: #16a34a; }
.cam     .vet-mau[b-vdxc043fn1] { background: #ea580c; }
.tim     .vet-mau[b-vdxc043fn1] { background: #7c3aed; }

.chua-co .vet-mau[b-vdxc043fn1] { background: #dfe5ee; }

.xanh    .nut-vao:not(.khoa)[b-vdxc043fn1] { background: #2563eb; }
.xanh-la .nut-vao:not(.khoa)[b-vdxc043fn1] { background: #16a34a; }
.cam     .nut-vao:not(.khoa)[b-vdxc043fn1] { background: #ea580c; }
.tim     .nut-vao:not(.khoa)[b-vdxc043fn1] { background: #7c3aed; }

/* ----- Hai thẻ dưới ----- */

.luoi-bang[b-vdxc043fn1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 1rem;
    /* Hai thẻ cao bằng nhau, không thẻ nào hụt xuống trông lệch. */
    align-items: stretch;
}

.luoi-bang > .the[b-vdxc043fn1] {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.luoi-bang .the-than[b-vdxc043fn1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.ds-thong-bao[b-vdxc043fn1] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ds-thong-bao li[b-vdxc043fn1] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .75rem;
    margin: 0 -.25rem;
    border-radius: .5rem;
    font-size: .9375rem;
    line-height: 1.5;
    transition: background-color .12s ease;
}

.ds-thong-bao li:hover[b-vdxc043fn1] {
    background: var(--ems-nen-nhat);
}

.ds-thong-bao a[b-vdxc043fn1] {
    color: var(--ems-chu);
    text-decoration: none;
}

.ds-thong-bao a:hover[b-vdxc043fn1] {
    color: var(--ems-xanh);
}

/* Chấm màu theo mức độ: đỏ là việc phải làm ngay, cam là nhắc, xanh là tin. */
.cham[b-vdxc043fn1] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: .45rem;
}

.gap .cham[b-vdxc043fn1]   { background: var(--ems-do); box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.luu-y .cham[b-vdxc043fn1] { background: var(--ems-cam); box-shadow: 0 0 0 3px rgba(217, 119, 6, .14); }
.tin .cham[b-vdxc043fn1]   { background: var(--ems-xanh); box-shadow: 0 0 0 3px rgba(22, 104, 196, .14); }

/* Trạng thái rỗng: có hình cho đỡ trơ, và nói rõ là đã xong chứ không phải lỗi. */
.rong[b-vdxc043fn1] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.5rem 0;
    color: var(--ems-chu-mo);
    text-align: center;
}

.rong svg[b-vdxc043fn1] {
    width: 2.5rem;
    height: 2.5rem;
    color: #b6c8dd;
}

.rong p[b-vdxc043fn1] {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
}

/* ----- Ô số tóm tắt ----- */

.luoi-so[b-vdxc043fn1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: .625rem;
    margin-bottom: 1.1rem;
}

.o-so[b-vdxc043fn1] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem .8rem;
    background: var(--ems-nen-nhat);
    border: 1px solid transparent;
    border-radius: .625rem;
    transition: border-color .12s ease, background-color .12s ease;
}

.o-so:hover[b-vdxc043fn1] {
    background: #fff;
    border-color: var(--ems-vien);
}

.o-so .nhan[b-vdxc043fn1] {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ems-chu-mo);
}

.o-so .so[b-vdxc043fn1] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ems-chu);
}

.o-so .so.xanh-la[b-vdxc043fn1] { color: var(--ems-xanh-la); }
.o-so .so.cam[b-vdxc043fn1]     { color: var(--ems-cam); }
.o-so .so.do[b-vdxc043fn1]      { color: var(--ems-do); }
.o-so .so.xanh[b-vdxc043fn1]    { color: var(--ems-xanh); }

.loi-tat[b-vdxc043fn1] {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--ems-vien);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    font-size: .8125rem;
}

.loi-tat a[b-vdxc043fn1] {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--ems-xanh-nhat);
    color: var(--ems-xanh);
    text-decoration: none;
    font-weight: 600;
    transition: background-color .12s ease;
}

.loi-tat a:hover[b-vdxc043fn1] {
    background: #d9e7fb;
}
/* /Components/Pages/LichSuCong.razor.rz.scp.css */
.cot[b-m5u9vw9wuh] {
    max-width: 46rem;
}

/* ----- Thanh chọn tháng ----- */

.thanh-thang[b-m5u9vw9wuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ten-thang[b-m5u9vw9wuh] {
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 11rem;
    text-align: center;
}

.nut-thang[b-m5u9vw9wuh] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    background: #fff;
    color: var(--ems-chu);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.nut-thang:hover:not(:disabled)[b-m5u9vw9wuh] {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}

.nut-thang:disabled[b-m5u9vw9wuh] {
    opacity: .4;
    cursor: not-allowed;
}

/* ----- Ô tổng hợp ----- */

.o-tong[b-m5u9vw9wuh] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .625rem;
    margin-bottom: 1rem;
}

.o[b-m5u9vw9wuh] {
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-radius: .625rem;
    padding: .75rem .5rem;
    text-align: center;
}

.o .nhan[b-m5u9vw9wuh] {
    display: block;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    margin-bottom: .25rem;
}

.o .so[b-m5u9vw9wuh] {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.xanh-la[b-m5u9vw9wuh] { color: var(--ems-xanh-la); }
.cam[b-m5u9vw9wuh]     { color: var(--ems-cam); }
.do[b-m5u9vw9wuh]      { color: var(--ems-do); }
.mo[b-m5u9vw9wuh]      { color: var(--ems-chu-mo); }

/* ----- Lịch tháng ----- */

.luoi[b-m5u9vw9wuh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .375rem;
}

.dau-cot[b-m5u9vw9wuh] {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ems-chu-mo);
    padding-bottom: .25rem;
}

.o-ngay[b-m5u9vw9wuh] {
    aspect-ratio: 1;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    border: 2px solid transparent;
    font-size: .875rem;
}

.o-ngay.trong[b-m5u9vw9wuh] {
    background: none;
}

.o-ngay .so-ngay[b-m5u9vw9wuh] {
    font-weight: 600;
    line-height: 1;
}

.o-ngay .ca[b-m5u9vw9wuh] {
    font-size: .6875rem;
    opacity: .8;
    line-height: 1;
}

.o-ngay.du[b-m5u9vw9wuh]   { background: #e8f7ee; color: #15803d; }
.o-ngay.nua[b-m5u9vw9wuh]  { background: #fef6e7; color: #b45309; }
.o-ngay.nghi[b-m5u9vw9wuh] { background: #fdecec; color: #b91c1c; }
.o-ngay.chua[b-m5u9vw9wuh] { background: var(--ems-nen-nhat); color: #94a3b8; }

/* Đã gửi nhưng tổ trưởng chưa chốt. */
.o-ngay.cho-duyet[b-m5u9vw9wuh] {
    border-color: var(--ems-cam);
}

/* ----- Chú thích ----- */

.chu-thich[b-m5u9vw9wuh] {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    align-items: center;
}

.cham[b-m5u9vw9wuh] {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: .25rem;
    margin-right: .3rem;
    vertical-align: -1px;
}

.cham.du[b-m5u9vw9wuh]   { background: #a7e3bf; }
.cham.nua[b-m5u9vw9wuh]  { background: #fcd9a0; }
.cham.nghi[b-m5u9vw9wuh] { background: #f7bcbc; }
.cham.chua[b-m5u9vw9wuh] { background: #dfe5ec; }

.vien-cho[b-m5u9vw9wuh]::before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border: 2px solid var(--ems-cam);
    border-radius: .25rem;
    margin-right: .3rem;
    vertical-align: -2px;
}

/* ----- Bảng chi tiết ----- */

.bang-cuon[b-m5u9vw9wuh] {
    overflow-x: auto;
}

.bang[b-m5u9vw9wuh] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.bang th[b-m5u9vw9wuh] {
    text-align: left;
    padding: .625rem 1rem;
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
    font-weight: 600;
    font-size: .8125rem;
    white-space: nowrap;
}

.bang td[b-m5u9vw9wuh] {
    padding: .625rem 1rem;
    border-top: 1px solid var(--ems-vien);
    vertical-align: middle;
}

.bang .phai[b-m5u9vw9wuh] {
    text-align: right;
}

.bang tr.mo-di td[b-m5u9vw9wuh] {
    color: var(--ems-chu-mo);
}

.trong-rong[b-m5u9vw9wuh] {
    text-align: center;
    color: var(--ems-chu-mo);
    padding: 1.5rem !important;
}

.thu[b-m5u9vw9wuh] {
    color: var(--ems-chu-mo);
    font-size: .75rem;
    margin-left: .3rem;
}

.da-sua[b-m5u9vw9wuh] {
    display: inline-block;
    margin-left: .375rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
    font-size: .6875rem;
}

.ghi-chu[b-m5u9vw9wuh] {
    color: var(--ems-chu-mo);
    max-width: 12rem;
}

.luu-y-cuoi[b-m5u9vw9wuh] {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
}

@media (max-width: 40rem) {
    .o-tong[b-m5u9vw9wuh] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/PhieuLuongCuaToi.razor.rz.scp.css */
.cot[b-zftd5sgnt2] {
    max-width: 34rem;
}

.thanh-thang[b-zftd5sgnt2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ten-thang[b-zftd5sgnt2] {
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 11rem;
    text-align: center;
}

.nut-thang[b-zftd5sgnt2] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    background: #fff;
    color: var(--ems-chu);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.nut-thang:hover:not(:disabled)[b-zftd5sgnt2] {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}

.nut-thang:disabled[b-zftd5sgnt2] {
    opacity: .4;
    cursor: not-allowed;
}

/* ----- Phiếu ----- */

.bang-phieu[b-zftd5sgnt2] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.bang-phieu th[b-zftd5sgnt2],
.bang-phieu td[b-zftd5sgnt2] {
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--ems-vien);
}

.bang-phieu th[b-zftd5sgnt2] {
    text-align: left;
    font-weight: 400;
    color: var(--ems-chu-mo);
    width: 45%;
}

.bang-phieu td[b-zftd5sgnt2] {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Đường kẻ đậm mở đầu mỗi nhóm cho dễ đọc. */
.bang-phieu tr.nhom th[b-zftd5sgnt2],
.bang-phieu tr.nhom td[b-zftd5sgnt2] {
    border-top: 2px solid var(--ems-vien);
}

.bang-phieu tr.manh td[b-zftd5sgnt2] {
    color: var(--ems-xanh);
    font-size: 1rem;
}

.bang-phieu tr.tru td[b-zftd5sgnt2] {
    color: var(--ems-do);
}

.bang-phieu tr.tru td[b-zftd5sgnt2]::before {
    content: "− ";
}

.bang-phieu tr.thuc-linh th[b-zftd5sgnt2],
.bang-phieu tr.thuc-linh td[b-zftd5sgnt2] {
    border-top: 2px solid var(--ems-xanh);
    background: var(--ems-xanh-nhat);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.bang-phieu tr.thuc-linh th[b-zftd5sgnt2] {
    font-weight: 700;
    color: var(--ems-chu);
}

.bang-phieu tr.thuc-linh td[b-zftd5sgnt2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ems-xanh);
}

.ghi-chu-phieu[b-zftd5sgnt2] {
    padding: .875rem 1.25rem;
    font-size: .875rem;
    color: var(--ems-chu-mo);
    border-top: 1px solid var(--ems-vien);
}

.luu-y-cuoi[b-zftd5sgnt2] {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
    line-height: 1.6;
}
/* /Components/Pages/TongHopCong.razor.rz.scp.css */
/* ----- Thanh lọc ----- */

.thanh-loc[b-sdbl51a231] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chon-bo-phan[b-sdbl51a231] {
    width: auto;
    min-width: 14rem;
}

/* Điện thoại: bỏ bề rộng ép, không thì ô này một mình đã 224px trên màn 360px. */
@media (max-width: 40rem) {
    .chon-bo-phan[b-sdbl51a231] {
        width: 100%;
        min-width: 0;
    }
}

.ten-bo-phan[b-sdbl51a231] {
    font-size: 1.05rem;
    font-weight: 700;
}

.thang[b-sdbl51a231] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ten-thang[b-sdbl51a231] {
    font-weight: 700;
    min-width: 9rem;
    text-align: center;
}

.nut-thang[b-sdbl51a231] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    background: #fff;
    color: var(--ems-chu);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.nut-thang:hover:not(:disabled)[b-sdbl51a231] {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}

.nut-thang:disabled[b-sdbl51a231] {
    opacity: .4;
    cursor: not-allowed;
}

/* ----- Lưới công ----- */

.bang-cuon[b-sdbl51a231] {
    overflow-x: auto;
}

.luoi-cong[b-sdbl51a231] {
    border-collapse: collapse;
    font-size: .8125rem;
    width: 100%;
}

.luoi-cong th[b-sdbl51a231],
.luoi-cong td[b-sdbl51a231] {
    border-bottom: 1px solid var(--ems-vien);
    padding: .3rem .25rem;
    text-align: center;
    white-space: nowrap;
}

.luoi-cong thead th[b-sdbl51a231] {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* Cột tên dính bên trái khi cuộn ngang qua 31 ngày. */
.cot-ten[b-sdbl51a231] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    text-align: left !important;
    min-width: 11rem;
    border-right: 1px solid var(--ems-vien);
    padding-left: .75rem !important;
}

.luoi-cong thead .cot-ten[b-sdbl51a231] {
    z-index: 3;
    background: var(--ems-nen-nhat);
}

.lien-ket[b-sdbl51a231] {
    display: block;
    text-decoration: none;
    color: inherit;
    line-height: 1.25;
}

.lien-ket:hover .ho-ten[b-sdbl51a231] {
    text-decoration: underline;
}

.ma[b-sdbl51a231] {
    font-weight: 600;
    color: var(--ems-xanh);
    margin-right: .35rem;
}

.ho-ten[b-sdbl51a231] {
    color: var(--ems-chu);
}

.chuc-vu[b-sdbl51a231] {
    display: block;
    font-size: .6875rem;
    color: var(--ems-chu-mo);
}

/* Đủ chỗ cho ký hiệu dài nhất là "N3/2". */
.cot-ngay[b-sdbl51a231] {
    width: 2.6rem;
}

.cot-ngay.cuoi-tuan[b-sdbl51a231] {
    color: var(--ems-do);
}

.cot-tong[b-sdbl51a231] {
    min-width: 3.5rem;
    border-left: 1px solid var(--ems-vien);
}

.cot-tong.manh[b-sdbl51a231] {
    font-weight: 700;
    color: var(--ems-xanh-la);
}

.cot-tong.cam[b-sdbl51a231] {
    color: var(--ems-cam);
}

/* ----- Ô từng ngày ----- */

.o-ngay[b-sdbl51a231] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 1.4rem;
    padding: 0 .2rem;
    border-radius: .3rem;
    border: 2px solid transparent;
    font-size: .7rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
}

.o-ngay.du[b-sdbl51a231]   { background: #e8f7ee; color: #15803d; }
.o-ngay.nua[b-sdbl51a231]  { background: #fef6e7; color: #b45309; }
.o-ngay.nghi[b-sdbl51a231] { background: #fdecec; color: #b91c1c; }
.o-ngay.chua[b-sdbl51a231] { background: var(--ems-nen-nhat); color: #b6c2d2; }

.o-ngay.cho-duyet[b-sdbl51a231] {
    border-color: var(--ems-cam);
}

/* ----- Chân bảng ----- */

.luoi-cong tfoot td[b-sdbl51a231] {
    background: var(--ems-nen-nhat);
    font-weight: 600;
    border-bottom: none;
}

.ghi-chu-chan[b-sdbl51a231] {
    color: var(--ems-chu-mo);
    font-weight: 400;
    text-align: right !important;
    padding-right: .75rem !important;
}

/* ----- Chú thích ----- */

.chu-thich[b-sdbl51a231] {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    align-items: center;
}

/* Chú thích dùng lại đúng ô như trong bảng để nhìn là khớp ngay. */
.chu-thich .o-ngay[b-sdbl51a231] {
    margin-right: .3rem;
    vertical-align: -4px;
}

.vien-cho[b-sdbl51a231]::before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border: 2px solid var(--ems-cam);
    border-radius: .25rem;
    margin-right: .3rem;
    vertical-align: -2px;
}

/* Giờ tăng ca đứng cạnh cột công nên phải khác màu, không thì đọc nhầm là công. */
.cot-tong.tang-ca[b-sdbl51a231] {
    color: var(--ems-xanh);
    font-weight: 600;
}

/* ----- Chốt bảng công ----- */

.hang-chot[b-sdbl51a231] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.nut-chot[b-sdbl51a231] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Ô điểm cộng / điểm trừ nằm trong cột tổng nên phải hẹp. */
.o-diem[b-sdbl51a231] {
    width: 4.5rem;
    padding: .2rem .35rem;
    border: 1px solid var(--ems-vien);
    border-radius: .3rem;
    text-align: right;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ems-chu);
    background: #fff;
}

.o-diem:focus[b-sdbl51a231] {
    outline: none;
    border-color: var(--ems-xanh);
    box-shadow: 0 0 0 2px var(--ems-xanh-nhat);
}

/* ----- Lọc nhân lực theo kíp ----- */

.chon-kip[b-sdbl51a231] {
    width: auto;
    min-width: 9rem;
}

/* Quân số của kíp đang lọc, đứng nhẹ bên phải tiêu đề bảng. */
.quan-so[b-sdbl51a231] {
    float: right;
    font-weight: 400;
    color: var(--ems-chu-mo);
    text-transform: none;
    letter-spacing: 0;
}

.nhac-loc[b-sdbl51a231] {
    font-size: .8125rem;
    color: var(--ems-chu-mo);
}

/* Ô chọn thay cho ô ký hiệu khi quản đốc bật chế độ sửa công. Giữ đúng cỡ ô
   cũ để bảng không giãn ra khi bật/tắt chế độ. */
.o-sua-cong[b-sdbl51a231] {
    width: 100%;
    min-width: 2.9rem;
    padding: .15rem .1rem;
    border: 1px solid var(--ems-vien);
    border-radius: .3rem;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    background-color: #fff;
    color: var(--ems-chu);
    appearance: none;
}

.o-sua-cong:focus[b-sdbl51a231] {
    outline: none;
    border-color: var(--ems-xanh);
    box-shadow: 0 0 0 2px var(--ems-xanh-nhat);
}

/* Ô tăng ca đang bị sửa tay - phải nhìn ra ngay, vì số này ghi đè lên tổng
   cộng theo ngày và chảy thẳng sang phiếu lương. */
.o-diem.sua-tay[b-sdbl51a231] {
    border-color: var(--ems-xanh);
    background: var(--ems-xanh-nhat);
    color: var(--ems-xanh);
}

/* ----- Cột đếm ký hiệu (K1, K1/2, X, CN...) ----- */

.cot-dem[b-sdbl51a231] {
    width: 2.6rem;
    min-width: 2.6rem;
    text-align: center;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--ems-chu-mo);
    border-left: 1px solid var(--ems-vien);
    padding: .35rem .2rem;
}

/* Số 0 làm nhạt đi để mắt bắt ngay ô nào có số thật. */
.cot-dem.manh[b-sdbl51a231] {
    font-weight: 700;
    color: var(--ems-chu);
}

th.cot-dem[b-sdbl51a231] {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--ems-chu);
    white-space: nowrap;
}

/* Nút Xuất Excel là thẻ liên kết nên phải tự căn cho giống nút thật. */
a.nut-chot[b-sdbl51a231] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
}

a.nut-chot svg[b-sdbl51a231] {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   Bản thẻ cho điện thoại.

   Màn rộng dùng bảng, màn hẹp dùng thẻ - cùng dữ liệu, khác cách bày. Đổi qua
   lại bằng CSS nên không cần biết màn hình rộng bao nhiêu, và không phải viết
   hai đường xử lý trong mã.
   ========================================================================== */
@media (max-width: 40rem) {
    /* Bảng 47 cột không dùng được trên điện thoại - cất đi, thay bằng thẻ.
       Kiểu dáng thẻ nằm ở app.css vì màn chấm cơm cũng dùng; ở đây chỉ quyết
       định màn NÀY đổi sang thẻ, và mấy màu riêng của nó. */
    .bang-cuon[b-sdbl51a231] { display: none; }

    .so-lieu dd.cho[b-sdbl51a231]  { color: var(--ems-cam); }
    .so-lieu dd.cong[b-sdbl51a231] { color: var(--ems-xanh-la); }
    .so-lieu dd.tru[b-sdbl51a231]  { color: var(--ems-do); }
}

@media (max-width: 40rem) and (orientation: landscape) {
    .bang-cuon[b-sdbl51a231] { display: block; }
}
/* /Components/Pages/XacNhanCong.razor.rz.scp.css */
/* Màn hình này dùng trên máy tính bảng đặt ở xưởng nên giới hạn bề ngang,
   không kéo dài hết màn hình cho khó đọc. */
.cot[b-kv7rk7zbri] {
    max-width: 34rem;
}

/* ----- Khối thông tin nhân viên ----- */

.bang-tt[b-kv7rk7zbri] {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: .75rem 1.25rem;
    margin: 0;
    align-items: baseline;
}

.bang-tt dt[b-kv7rk7zbri] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    color: var(--ems-chu-mo);
    font-size: .9375rem;
}

.bang-tt dd[b-kv7rk7zbri] {
    margin: 0;
    /* Ô lưới mặc định min-width:auto, nghĩa là cột KHÔNG chịu co xuống dưới bề
       rộng nội dung. Mà <select> thì rộng bằng mục dài nhất của nó - ở đây là
       "-- Chọn ca đã làm --". Thiếu dòng này, ô chọn banh cột ra, kéo cả thẻ
       vượt khỏi màn hình điện thoại và đẩy trang lệch sang ngang. */
    min-width: 0;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ems-chu);
}

.bang-tt .ico[b-kv7rk7zbri] {
    width: 1.05rem;
    height: 1.05rem;
    color: #94a3b8;
    flex: 0 0 auto;
}

.mo[b-kv7rk7zbri] {
    color: var(--ems-chu-mo);
    font-weight: 400;
}

/* ----- Nhóm chọn tình trạng ----- */

.nhom-chon[b-kv7rk7zbri] {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-bottom: 1.25rem;
}

.o-chon[b-kv7rk7zbri] {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.o-chon:hover:not(.khoa)[b-kv7rk7zbri] {
    border-color: #b9d2f0;
}

.o-chon.dang-chon[b-kv7rk7zbri] {
    border-color: var(--ems-xanh);
    background: var(--ems-xanh-nhat);
}

.o-chon.khoa[b-kv7rk7zbri] {
    cursor: not-allowed;
    opacity: .65;
}

/* Ẩn radio thật, vẽ lại vòng tròn để khớp thiết kế nhưng vẫn dùng được bàn phím. */
.o-chon input[b-kv7rk7zbri] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cham[b-kv7rk7zbri] {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid #b6c2d2;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    transition: border-color .12s ease;
}

.o-chon.dang-chon .cham[b-kv7rk7zbri] {
    border-color: var(--ems-xanh);
}

.o-chon.dang-chon .cham[b-kv7rk7zbri]::after {
    content: "";
    position: absolute;
    inset: .2rem;
    border-radius: 50%;
    background: var(--ems-xanh);
}

/* Viền hiện rõ khi di chuyển bằng phím Tab. */
.o-chon input:focus-visible + .cham[b-kv7rk7zbri] {
    box-shadow: 0 0 0 3px var(--ems-xanh-nhat), 0 0 0 4px var(--ems-xanh);
}

.chu[b-kv7rk7zbri] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ten[b-kv7rk7zbri] {
    font-weight: 600;
    font-size: .9375rem;
}

.ten.xanh-la[b-kv7rk7zbri] { color: var(--ems-xanh-la); }
.ten.cam[b-kv7rk7zbri]     { color: var(--ems-cam); }
.ten.do[b-kv7rk7zbri]      { color: var(--ems-do); }

.cong[b-kv7rk7zbri] {
    font-size: .8125rem;
    color: var(--ems-chu-mo);
}

/* ----- Ghi chú ----- */

.dem-ky-tu[b-kv7rk7zbri] {
    text-align: right;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    margin: .3rem 0 1.25rem;
}

/* ----- Trạng thái ----- */

.mo-ta[b-kv7rk7zbri] {
    margin: .75rem 0 0;
    color: var(--ems-chu-mo);
    font-size: .875rem;
}

.mo-ta:last-child[b-kv7rk7zbri] {
    margin-bottom: 0;
}

/* Ô chọn ca nằm ngay trong bảng thông tin nên phải gọn, không như ô nhập thường. */
.o-ca[b-kv7rk7zbri] {
    border: 1px solid var(--ems-vien);
    border-radius: .375rem;
    padding: .3rem .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ems-chu);
    background: #fff;
    max-width: 100%;
    min-width: 0;
}

.o-ca:focus[b-kv7rk7zbri] {
    outline: none;
    border-color: var(--ems-xanh);
    box-shadow: 0 0 0 3px var(--ems-xanh-nhat);
}

.o-ca:disabled[b-kv7rk7zbri] {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
}

/* ----- Ô giờ tăng ca ----- */

.hang-tang-ca[b-kv7rk7zbri] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.o-gio[b-kv7rk7zbri] {
    width: 7rem;
    text-align: right;
}

.don-vi[b-kv7rk7zbri] {
    color: var(--ems-chu-mo);
    font-size: .9375rem;
}

.goi-y[b-kv7rk7zbri] {
    font-size: .75rem;
    color: var(--ems-chu-mo);
    margin: .3rem 0 1.25rem;
}

/* ----- Chấm cơm ----- */

.nhom-com[b-kv7rk7zbri] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.o-com[b-kv7rk7zbri] {
    flex: 1 1 5rem;
    text-align: center;
    padding: .6rem .5rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ems-chu);
    background: #fff;
    transition: border-color .12s ease, background-color .12s ease;
}

.o-com:hover:not(.khoa)[b-kv7rk7zbri] {
    border-color: #b9d2f0;
}

.o-com.dang-chon[b-kv7rk7zbri] {
    border-color: var(--ems-xanh);
    background: var(--ems-xanh-nhat);
    color: var(--ems-xanh);
}

.o-com.khoa[b-kv7rk7zbri] {
    cursor: not-allowed;
    opacity: .65;
}

/* Ẩn radio thật nhưng vẫn dùng được bàn phím. */
.o-com input[b-kv7rk7zbri] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.o-com input:focus-visible + span[b-kv7rk7zbri] {
    outline: 2px solid var(--ems-xanh);
    outline-offset: 3px;
    border-radius: .2rem;
}

/* ==========================================================================
   ĐIỆN THOẠI (dưới 40rem ~ 640px)

   Cùng nguyên tắc với app.css: không ô nào được ép bề rộng cứng. Màn 360px
   trừ lề thẻ chỉ còn khoảng 328px, nhãn đã chiếm 8rem là 128px - phần còn
   lại không đủ cho ô chọn ca.
   ========================================================================== */
@media (max-width: 40rem) {

    /* Nhãn hẹp lại, nhường chỗ cho giá trị. */
    .bang-tt[b-kv7rk7zbri] {
        grid-template-columns: minmax(5.5rem, auto) 1fr;
        gap: .6rem .75rem;
    }

    .bang-tt dt[b-kv7rk7zbri],
    .bang-tt dd[b-kv7rk7zbri] {
        font-size: .875rem;
    }

    /* Điền hết chỗ được chia, thay vì rộng theo mục dài nhất. */
    .o-ca[b-kv7rk7zbri] {
        width: 100%;
    }
}