/* ==========================================================================
   Bảng màu dùng chung. Đổi ở đây là đổi toàn hệ thống.
   ========================================================================== */
:root {
    --ems-sidebar: #16294c;
    --ems-xanh: #1668c4;
    --ems-xanh-dam: #1257a5;
    --ems-xanh-nhat: #eaf2fd;

    --ems-nen: #f4f6fa;
    --ems-nen-nhat: #eef2f7;
    --ems-vien: #e3e8ef;

    --ems-chu: #1e293b;
    --ems-chu-mo: #64748b;

    --ems-xanh-la: #16a34a;
    --ems-cam: #d97706;
    --ems-do: #dc2626;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--ems-nen);
    color: var(--ems-chu);
}

a {
    color: var(--ems-xanh);
}

h1:focus {
    outline: none;
}

/* ==========================================================================
   Thẻ nội dung - dùng lại ở mọi màn hình
   ========================================================================== */
.the {
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-radius: .625rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 1rem;
}

.the-dau {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--ems-vien);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ems-xanh);
}

.the-than {
    padding: 1.25rem;
}

/* ==========================================================================
   Nút
   ========================================================================== */
.nut-chinh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1rem;
    border: none;
    border-radius: .5rem;
    background: var(--ems-xanh);
    color: #fff;
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .12s ease;
}

.nut-chinh:hover:not(:disabled) {
    background: var(--ems-xanh-dam);
}

.nut-chinh:disabled {
    background: #9db9dc;
    cursor: not-allowed;
}

.nut-chinh svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* ==========================================================================
   Nhãn trạng thái
   ========================================================================== */
.nhan-tt {
    display: inline-block;
    padding: .3rem .625rem;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
}

.nhan-tt.cho {
    background: #fef6e7;
    color: #b45309;
    border-color: #fcd9a0;
}

.nhan-tt.xong {
    background: #e8f7ee;
    color: #15803d;
    border-color: #a7e3bf;
}

.nhan-tt.chua {
    background: #fdecec;
    color: #b91c1c;
    border-color: #f7bcbc;
}

/* ==========================================================================
   Thông báo
   ========================================================================== */
.bao {
    padding: .75rem 1rem;
    border-radius: .5rem;
    font-size: .875rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.bao.loi {
    background: #fdecec;
    color: #b91c1c;
    border-color: #f7bcbc;
}

.bao.ok {
    background: #e8f7ee;
    color: #15803d;
    border-color: #a7e3bf;
}

.bao.luu-y {
    background: #eef5fd;
    color: #1e40af;
    border-color: #c3dcf7;
}

/* ==========================================================================
   Ô nhập
   ========================================================================== */
.o-nhap {
    width: 100%;
    padding: .5625rem .75rem;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    font-size: .9375rem;
    color: var(--ems-chu);
    background: #fff;
}

.o-nhap:focus {
    outline: none;
    border-color: var(--ems-xanh);
    box-shadow: 0 0 0 3px var(--ems-xanh-nhat);
}

.o-nhap:disabled {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
}

.nhan-o {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ems-xanh);
    margin-bottom: .375rem;
}

/* ==========================================================================
   Lỗi & trang đăng nhập
   ========================================================================== */
.validation-message {
    color: var(--ems-do);
    font-size: .8125rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Đã xảy ra lỗi."
}

.dang-nhap-nen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ems-nen);
    padding: 1rem;
}

.dang-nhap-hop {
    width: 100%;
    max-width: 22rem;
    background: #fff;
    padding: 2rem;
    border-radius: .625rem;
    box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .08);
}

/* Ô nhập tăng ca trên bảng duyệt công: đủ hẹp để không đẩy vỡ bảng. */
.o-tang-ca {
    width: 5.5rem;
    display: inline-block;
    text-align: right;
}

/* Ô đơn giá chung cả tháng trên bảng lương. */
.o-don-gia {
    max-width: 9rem;
}


/* ==========================================================================
   Trau chuốt chung: bo góc mềm hơn, tiêu đề thẻ bớt gắt
   ========================================================================== */
.the {
    border-radius: .875rem;
}

.the-dau {
    font-size: .75rem;
    letter-spacing: .05em;
    color: var(--ems-chu-mo);
    background: linear-gradient(180deg, #fbfcfe, #fff);
    border-top-left-radius: .875rem;
    border-top-right-radius: .875rem;
}

/* Chữ số trong bảng dùng chữ số đều bề ngang để các cột thẳng hàng. */
table, .so, .cot-tong, .cot-ngay {
    font-variant-numeric: tabular-nums;
}

/* Logo trên trang đăng nhập - bản có sẵn chữ VNHOME. */
.logo-dang-nhap {
    display: block;
    width: 11rem;
    max-width: 70%;
    height: auto;
    margin: 0 auto .75rem;
}

/* ==========================================================================
   Phân hệ Vật tư

   Để ở đây chứ không dùng CSS scoped theo trang: ba trang vật tư cộng khối
   thao tác đều dùng chung bộ lớp này, mà scoped CSS thì mỗi file một bản sao.
   ========================================================================== */
.thanh-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.thanh-loc .chon-kho {
    min-width: 13rem;
    font-weight: 600;
}

.thanh-loc .o-tim {
    min-width: 16rem;
    flex: 1 1 16rem;
}

.o-tick {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--ems-chu-mo);
    cursor: pointer;
    white-space: nowrap;
}

.nut-phu {
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-radius: .5rem;
    padding: .45rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ems-chu);
    cursor: pointer;
}

.nut-phu:hover {
    border-color: var(--ems-xanh);
    color: var(--ems-xanh);
}

.nut-nho {
    background: transparent;
    border: 1px solid var(--ems-vien);
    border-radius: .375rem;
    padding: .2rem .55rem;
    font-size: .8125rem;
    color: var(--ems-xanh);
    cursor: pointer;
}

.nut-nho:hover {
    background: var(--ems-xanh-nhat);
}

/* ----- Ô thống kê đầu trang ----- */
.luoi-o-so {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.o-thong-ke {
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-left: 3px solid var(--ems-chu-mo);
    border-radius: .625rem;
    padding: .75rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.o-thong-ke .nhan {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ems-chu-mo);
}

.o-thong-ke .so {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.o-thong-ke .phu {
    font-size: .75rem;
    color: var(--ems-chu-mo);
}

.o-thong-ke.xanh-la { border-left-color: var(--ems-xanh-la); }
.o-thong-ke.xanh { border-left-color: var(--ems-xanh); }
.o-thong-ke.cam { border-left-color: var(--ems-cam); }
.o-thong-ke.tim { border-left-color: #7c3aed; }

/* ----- Bảng chính + cột chi tiết bên phải ----- */
.khung-vat-tu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1rem;
    align-items: start;
}

/* Màn hẹp thì xếp dọc: bảng vật tư nhiều cột, ép thêm cột bên cạnh
   nữa là cả hai đều không đọc được. */
@media (max-width: 1200px) {
    .khung-vat-tu {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bang-cuon {
    overflow-x: auto;
}

.luoi-vat-tu {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.luoi-vat-tu th {
    background: var(--ems-nen-nhat);
    border-bottom: 1px solid var(--ems-vien);
    padding: .5rem .65rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ems-chu-mo);
    white-space: nowrap;
}

.luoi-vat-tu td {
    border-bottom: 1px solid var(--ems-vien);
    padding: .5rem .65rem;
    vertical-align: middle;
}

.luoi-vat-tu tbody tr {
    cursor: pointer;
}

.luoi-vat-tu tbody tr:hover {
    background: var(--ems-xanh-nhat);
}

.luoi-vat-tu tbody tr.dang-chon {
    background: var(--ems-xanh-nhat);
    box-shadow: inset 3px 0 0 var(--ems-xanh);
}

.luoi-vat-tu .ma {
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 600;
    color: var(--ems-xanh);
    white-space: nowrap;
}

.luoi-vat-tu .phai,
.luoi-ton-nho .phai {
    text-align: right;
    white-space: nowrap;
}

.luoi-vat-tu .manh,
.luoi-ton-nho .manh {
    font-weight: 700;
}

.luoi-vat-tu .mo,
.luoi-ton-nho .mo {
    color: var(--ems-chu-mo);
}

/* ----- Huy hiệu tình trạng ----- */
.huy-hieu {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.huy-hieu.con { background: #dcfce7; color: #15803d; }
.huy-hieu.sap-het { background: #fef3c7; color: #b45309; }
.huy-hieu.het { background: #fee2e2; color: #b91c1c; }
.huy-hieu.chuyen { background: var(--ems-xanh-nhat); color: var(--ems-xanh-dam); }

.the-nho {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: .3rem;
    background: var(--ems-nen-nhat);
    border: 1px solid var(--ems-vien);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--ems-chu-mo);
}

/* ----- Cột chi tiết ----- */
.cot-ben .the-than {
    padding: .9rem;
}

.ten-vat-tu {
    margin: 0 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
}

.ds-thuoc-tinh {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    margin: 0 0 1rem;
    font-size: .8125rem;
}

.ds-thuoc-tinh dt {
    color: var(--ems-chu-mo);
    font-weight: 500;
}

.ds-thuoc-tinh dd {
    margin: 0;
    font-weight: 600;
}

.nhan-khoi {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ems-chu-mo);
    margin-bottom: .4rem;
}

.luoi-ton-nho {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.luoi-ton-nho th {
    text-align: left;
    font-size: .6875rem;
    text-transform: uppercase;
    color: var(--ems-chu-mo);
    border-bottom: 1px solid var(--ems-vien);
    padding: .3rem .4rem;
}

.luoi-ton-nho td {
    border-bottom: 1px solid var(--ems-vien);
    padding: .35rem .4rem;
}

.luoi-ton-nho tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--ems-vien);
    font-weight: 600;
}

.luoi-ton-nho .het { color: var(--ems-do); }
.luoi-ton-nho .sap-het { color: var(--ems-cam); }

.rong-gon {
    margin: 0;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
}

/* ----- Khối thao tác kho ----- */
.nhom-nut-viec {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .75rem;
}

.nut-viec {
    background: var(--ems-nen-nhat);
    border: 1px solid var(--ems-vien);
    border-radius: .4rem;
    padding: .3rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ems-chu-mo);
    cursor: pointer;
}

.nut-viec:hover {
    border-color: var(--ems-xanh);
}

.nut-viec.dang-chon {
    background: var(--ems-xanh);
    border-color: var(--ems-xanh);
    color: #fff;
}

.khung-thao-tac .o-nhap {
    margin-bottom: .6rem;
}

.khung-thao-tac .nut-chinh {
    width: 100%;
    justify-content: center;
}

.dong-vat-tu {
    margin: 0 0 .6rem;
    font-size: .875rem;
}

/* ----- Form danh mục ----- */
.luoi-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
    margin-bottom: .9rem;
}

.luoi-form .rong-hai-cot {
    grid-column: 1 / -1;
}

.nhom-nut {
    display: flex;
    gap: .5rem;
}

.chu-thich {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
    margin-top: .5rem;
}

.tong-thang {
    float: right;
    font-weight: 500;
    color: var(--ems-chu-mo);
    font-size: .8125rem;
}

/* Huy hiệu "Khai tồn ban đầu": xám trung tính, không phải nhập cũng không
   phải xuất - đây là số gốc lúc bắt đầu dùng phần mềm. */
.huy-hieu.ban-dau {
    background: var(--ems-nen-nhat);
    color: var(--ems-chu-mo);
    border: 1px solid var(--ems-vien);
}

/* Lời nhắc trong khung thao tác: nhỏ hơn thông báo lỗi vì nó chỉ là hướng dẫn. */
.khung-thao-tac .bao.goi-y {
    font-size: .75rem;
    padding: .45rem .6rem;
    margin-bottom: .6rem;
}

/* ==========================================================================
   Khối "Bắt đầu nạp dữ liệu" - chỉ hiện khi danh mục còn trống.

   Bước nào là việc của người đang xem thì tô đậm lên; bước của người khác để
   mờ nhưng vẫn hiện, để ai cũng thấy được toàn bộ quy trình và biết mình đang
   chờ ai.
   ========================================================================== */
.khoi-huong-dan {
    border-left: 3px solid var(--ems-xanh);
}

.cac-buoc {
    margin: 0 0 .25rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.cac-buoc li {
    color: var(--ems-chu-mo);
}

.cac-buoc li.viec-cua-ban {
    color: var(--ems-chu);
}

.cac-buoc .dong-dau {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .15rem;
}

.cac-buoc .dong-dau b {
    font-size: .9375rem;
}

.cac-buoc .ai-lam {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ems-chu-mo);
    background: var(--ems-nen-nhat);
    border: 1px solid var(--ems-vien);
    border-radius: .3rem;
    padding: .05rem .4rem;
}

.cac-buoc li.viec-cua-ban .ai-lam {
    color: var(--ems-xanh-dam);
    background: var(--ems-xanh-nhat);
    border-color: transparent;
}

.cac-buoc p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
}

.cac-buoc .cho-buoc-truoc {
    margin-top: .2rem;
    font-style: italic;
    opacity: .8;
}

.nut-buoc {
    display: inline-block;
    margin-top: .45rem;
    text-decoration: none;
}

/* Mã hàng nhà sản xuất: chữ đều nét vì đây là mã có cả chữ lẫn số, dễ đọc
   nhầm 0 với O, 1 với l nếu dùng font thường. */
.ma-nsx {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .8125rem;
    color: var(--ems-chu);
}

/* Trong bảng chính, mã hàng nằm dưới tên chứ không chiếm thêm một cột - bảng
   đã có 9 cột, thêm nữa là phải cuộn ngang mới đọc được. */
.ma-nsx.duoi-ten {
    display: block;
    font-size: .75rem;
    color: var(--ems-chu-mo);
    margin-top: .1rem;
}

.ghi-chu-o {
    margin-top: .2rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--ems-chu-mo);
}

/* ---- Danh sách vị trí trong khung chi tiết vật tư ---- */
.ds-vi-tri {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ds-vi-tri li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    font-size: .8125rem;
    padding: .25rem .45rem;
    background: var(--ems-nen-nhat);
    border-radius: .3rem;
}

.ds-vi-tri .ma {
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 600;
    color: var(--ems-xanh);
}

.ds-vi-tri .mo {
    margin-left: auto;
    color: var(--ems-chu-mo);
    font-size: .75rem;
}

/* ---- Chọn vật tư gán cho một vị trí ---- */
.ds-chon {
    max-height: 20rem;
    overflow-y: auto;
    margin-top: .6rem;
    border: 1px solid var(--ems-vien);
    border-radius: .4rem;
}

.dong-chon {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--ems-vien);
    font-size: .8125rem;
    cursor: pointer;
}

.dong-chon:last-child { border-bottom: none; }
.dong-chon:hover { background: var(--ems-xanh-nhat); }

.dong-chon .ten { display: flex; flex-direction: column; gap: .05rem; }

.dong-chon .ma {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .6875rem;
    color: var(--ems-xanh);
}

.nut-them-vt { width: 100%; margin-top: .6rem; }

.the-nho.canh-bao {
    background: #fee2e2;
    border-color: transparent;
    color: #b91c1c;
}

/* Tên vật tư trong bảng nhỏ của màn vị trí */
.luoi-ton-nho .ten-dong { display: block; margin-top: .05rem; }

/* ---- Bộ lọc sổ kho ---- */
.o-ngay {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--ems-chu-mo);
}

.o-ngay .o-nhap { width: auto; }

.chon-nhanh {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: -.5rem 0 1rem;
}

.nut-ky {
    background: #fff;
    border: 1px solid var(--ems-vien);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .8125rem;
    color: var(--ems-chu-mo);
    cursor: pointer;
}

.nut-ky:hover { border-color: var(--ems-xanh); color: var(--ems-xanh); }

.nut-ky.dang-chon {
    background: var(--ems-xanh);
    border-color: var(--ems-xanh);
    color: #fff;
    font-weight: 600;
}

/* ==========================================================================
   Khung báo mất kết nối.

   Blazor tự bật/tắt khung này bằng cách gắn lớp lên thẻ #components-reconnect-modal:
     components-reconnect-show    - đang thử kết nối lại
     components-reconnect-failed  - thử hết lượt, thua
     components-reconnect-rejected - máy chủ đã bỏ phiên
   Không có lớp nào thì ẩn hẳn.
   ========================================================================== */
.bao-mat-ket-noi {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(22, 41, 76, .82);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.bao-mat-ket-noi.components-reconnect-show,
.bao-mat-ket-noi.components-reconnect-failed,
.bao-mat-ket-noi.components-reconnect-rejected {
    display: flex;
}

.bao-mat-ket-noi .hop {
    background: #fff;
    border-radius: .75rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    max-width: 20rem;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.bao-mat-ket-noi p {
    margin: 0;
    font-size: .9375rem;
    color: var(--ems-chu);
}

/* Đang thử lại thì hiện vòng quay; thua rồi mới hiện nút. */
.bao-mat-ket-noi .mat-han,
.bao-mat-ket-noi .nut-tai-lai { display: none; }

.components-reconnect-failed .vong-quay,
.components-reconnect-rejected .vong-quay,
.components-reconnect-failed .dang-noi,
.components-reconnect-rejected .dang-noi { display: none; }

.components-reconnect-failed .mat-han,
.components-reconnect-rejected .mat-han,
.components-reconnect-failed .nut-tai-lai,
.components-reconnect-rejected .nut-tai-lai { display: block; }

.bao-mat-ket-noi .vong-quay {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 auto .9rem;
    border: 3px solid var(--ems-vien);
    border-top-color: var(--ems-xanh);
    border-radius: 50%;
    animation: xoay 0.9s linear infinite;
}

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

/* Máy đọc màn hình và người nhạy cảm với chuyển động: bỏ xoay, giữ nguyên nghĩa. */
@media (prefers-reduced-motion: reduce) {
    .bao-mat-ket-noi .vong-quay { animation: none; }
}

.bao-mat-ket-noi .nut-tai-lai {
    margin: 1rem auto 0;
    background: var(--ems-xanh);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .6rem 1.4rem;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   Khi chạy như app trên màn hình chính điện thoại, không có thanh địa chỉ nên
   nội dung đụng vào phần tai thỏ / thanh trạng thái. Chừa ra đúng phần đó.
   ========================================================================== */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Thẻ thay cho dòng bảng: mặc định ẩn, chỉ bung ra ở màn hẹp bên dưới.
   Cùng một dữ liệu, chỉ khác cách bày, nên ẩn hiện bằng CSS chứ không bằng mã -
   không phải viết hai đường xử lý và không cần biết màn rộng bao nhiêu. */
.ds-the-nguoi,
.nhac-xoay-ngang {
    display: none;
}

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

   Nguyên tắc: không ô nào được ép bề rộng cứng. Màn 360px trừ lề chỉ còn
   ~328px, mà một ô "min-width: 16rem" là đã 256px - hai ô cạnh nhau là tràn
   ra ngoài khung, kéo cả trang lệch sang phải.
   ========================================================================== */
@media (max-width: 40rem) {

    /* ----- Thanh lọc: mỗi ô một dòng, không ô nào ép bề rộng ----- */
    .thanh-loc {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .thanh-loc > *,
    .thanh-loc .o-nhap,
    .thanh-loc .chon-kho,
    .thanh-loc .o-tim {
        width: 100%;
        min-width: 0;
    }

    .o-tick { justify-content: flex-start; }

    /* ----------------------------------------------------------------------
       THẺ THAY CHO DÒNG BẢNG

       Bảng ba bốn chục cột không dùng được trên điện thoại. Các màn đó đổi
       sang mỗi người một thẻ. Kiểu dáng để chung ở đây vì đã có hai màn dùng
       (tổng hợp công, bảng chấm cơm); chép ra hai bản thì sau này sửa một nơi
       quên nơi kia.

       Việc ẨN BẢNG thì KHÔNG để chung: bảy màn dùng .bang-cuon, phần lớn chưa
       có thẻ thay thế, ẩn toàn cục là mất trắng nội dung của chúng. Mỗi màn tự
       khai trong file css riêng của nó.
       ---------------------------------------------------------------------- */
    .ds-the-nguoi {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;
    }

    .the-nguoi {
        border: 1px solid var(--ems-vien);
        border-radius: .5rem;
        background: #fff;
        overflow: hidden;
    }

    /* Đầu thẻ: mã, tên, chức vụ đi liền nhau thành một cụm. */
    .the-nguoi .dau-the {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .2rem .5rem;
        padding: .6rem .75rem;
        background: var(--ems-nen-nhat);
        border-bottom: 1px solid var(--ems-vien);
    }

    .the-nguoi .dau-the .ma {
        font-family: Consolas, 'Courier New', monospace;
        font-size: .75rem;
        font-weight: 600;
        color: var(--ems-xanh);
    }

    .the-nguoi .dau-the .ten {
        font-weight: 700;
        font-size: 1rem;
    }

    .the-nguoi .dau-the .chuc-vu {
        font-size: .8125rem;
        color: var(--ems-chu-mo);
    }

    .the-nguoi .dau-the .chuc-vu::before { content: "· "; }

    /* Ô số: số TO ở trên, nhãn nhỏ ở dưới. Đặt nhãn cạnh số thì đọc liền thành
       "Tổng công 22 Suất cơm 6", mắt phải dừng lại ghép xem số nào của nhãn nào.

       Không kẻ ô: lưới auto-fit thì cột cuối và hàng cuối luôn thừa ra một nét
       viền lơ lửng, mà không nhắm được bằng nth-child vì số cột đổi theo bề
       ngang máy. */
    .the-nguoi .so-lieu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
        margin: 0;
        padding: .25rem 0 .5rem;
    }

    .the-nguoi .so-lieu > div {
        display: flex;
        flex-direction: column-reverse;   /* HTML là dt rồi dd; đảo lại để SỐ nằm trên nhãn */
        align-items: center;
        justify-content: flex-end;
        gap: .1rem;
        padding: .55rem .25rem;
    }

    .the-nguoi .so-lieu dt {
        font-size: .6875rem;
        line-height: 1.2;
        text-align: center;
        color: var(--ems-chu-mo);
    }

    .the-nguoi .so-lieu dd {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    /* Sửa từng ngày. Trong bảng, ô chọn bị ép còn khoảng 2.9rem và chữ 0.75rem
       cho vừa 31 cột. Ở đây ngược lại: mỗi lúc chỉ một ngày, nên cho nó rộng
       hết dòng và cao đủ để bấm trúng bằng ngón tay. */
    .sua-ngay {
        border-top: 1px solid var(--ems-vien);
    }

    .sua-ngay > summary {
        padding: .65rem .75rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--ems-xanh);
        cursor: pointer;
    }

    .sua-ngay ul {
        display: flex;
        flex-direction: column;
        gap: .4rem;
        margin: 0;
        padding: .25rem .75rem .75rem;
        list-style: none;
    }

    .sua-ngay li {
        display: grid;
        grid-template-columns: 4.75rem 1fr;
        align-items: center;
        gap: .6rem;
    }

    .sua-ngay .nhan-ngay {
        font-size: .8125rem;
        color: var(--ems-chu-mo);
    }

    .sua-ngay li.cuoi-tuan .nhan-ngay { color: var(--ems-do); }

    .sua-ngay select {
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;          /* ngưỡng bấm được bằng ngón tay */
        padding: .35rem .5rem;
        font-size: .95rem;
        text-align: left;
        text-align-last: left;
        appearance: auto;            /* trả lại mũi tên, cho thấy bấm được */
    }

    .nhac-xoay-ngang {
        display: block;
        margin: 0;
        padding: 0 .75rem .75rem;
        font-size: .8125rem;
        color: var(--ems-chu-mo);
    }

    /* ----- Ô thống kê: một cột, số nhỏ lại ----- */
    .luoi-o-so { grid-template-columns: 1fr; }
    .o-thong-ke { padding: .6rem .8rem; }
    .o-thong-ke .so { font-size: 1.4rem; }

    /* ----- Nút chọn kỳ trong sổ kho: cho xuống dòng ----- */
    .chon-nhanh { gap: .3rem; }
    .nut-ky { flex: 0 0 auto; }

    /* ----- Form: một cột ----- */
    .luoi-form { grid-template-columns: 1fr; }

    /* ----- Bảng: chữ nhỏ lại, ô sát lại cho thấy nhiều cột hơn ----- */
    .luoi-vat-tu { font-size: .8125rem; }
    .luoi-vat-tu th,
    .luoi-vat-tu td { padding: .4rem .45rem; }

    /* ----- Chừa lề để ngón tay cuộn được bảng ----- */
    .bang-cuon { -webkit-overflow-scrolling: touch; }
}

/* Bảng nhỏ trong khung chi tiết vật tư chưa có khung cuộn riêng. */
.luoi-ton-nho { display: block; overflow-x: auto; }
.luoi-ton-nho thead,
.luoi-ton-nho tbody,
.luoi-ton-nho tfoot { display: table; width: 100%; }

/* Xoay ngang điện thoại thì màn rộng ra, quay lại dùng bảng. Việc BẬT LẠI bảng
   để từng màn tự khai, vì không phải màn nào cũng có thẻ để mà cất. */
@media (max-width: 40rem) and (orientation: landscape) {
    .ds-the-nguoi,
    .nhac-xoay-ngang { display: none; }
}