:root {
    --bg-body: #ffffff;
    --main-body-color: #055952;
    --main-font-color: #fff;
    --main-color: #055952;
    --lever2-color: #0a8a80;
    --tranfer-color: #05595285;
    --tranfer-color2: #05595233;
    --constrast-color: #ff7b3d;
    /* Chiều cao ô nhập / ô chọn / ô ngày của mọi màn — chỉnh ở đây. CSS trong module ghi var(--ctl-h, 28px)
       (có dự phòng) vì DLL module có thể lên trước bản CSS dùng chung này. */
    --ctl-h: 26px;
    /* Trạng thái: đang tiến hành / đã xong. Dùng chung cho nhãn trạng thái ca chụp, dải "Máy báo"
       (MPPS) và phản hồi "Đã copy" — cùng một nghĩa nên đừng chép hex vào từng file JS.
       Cố ý KHÔNG khai lại trong [data-theme='dark']: nền tối kế thừa đúng hai màu này, giữ nguyên
       hiển thị như trước. Muốn chỉnh riêng cho nền tối thì thêm hai dòng vào khối dark là xong. */
    --status-progress: #1565c0;
    --status-done: #2e7d32;
    --copy-text: var(--status-done); /* chữ "Đã copy" (.da-copy) */
    /* Bảng (Tabulator) — sáng */
    --grid-bg: #ffffff;
    --grid-text: #111827;
    --grid-border: #d9dee5;
    --grid-header-bg: #ffffff;
    --grid-row-even: #eef1f4;
    --grid-row-hover: #e3f0ef;
    --grid-row-selected: #d6ebe8; /* dòng đang chọn — đậm hơn hover để phân biệt rõ */
    --grid-input-bg: #ffffff;
    --grid-input-border: #cbd5e1;
    --grid-edit-accent: #0a8a80; /* viền ô đang sửa trong lưới */
}

[data-theme='dark'] {
    --bg-body: #1f2022;
    --main-body-color: #fff;
    --main-font-color: #fff;
    --main-color: #2b2d30;
    --lever2-color: #3a3d42;
    --tranfer-color: #ff9a5c85;
    --tranfer-color2: #ff9a5c33;
    --constrast-color: #ff9a5c;
    /* Bảng (Tabulator) — tối, không lóa */
    --grid-bg: #26282b;
    --grid-text: #e5e7eb;
    --grid-border: #3a3d42;
    --grid-header-bg: #2b2d30;
    --grid-row-even: #2f3134;
    --grid-row-hover: #3a3d42;
    --grid-row-selected: #143f3c; /* dòng đang chọn — tông xanh đậm nổi trên nền tối */
    --grid-input-bg: #2b2d30;
    --grid-input-border: #4a4d52;
    --grid-edit-accent: #ff9a5c; /* teal chìm trên dòng đang chọn (nền teal đậm) — dùng màu nhấn cam của nền tối */
    --copy-text: #81c784; /* xanh đậm --status-done chìm trên dòng đang chọn tối */
}

body {
    background: var(--bg-body);
    color: var(--main-body-color)
}

input {
    background: var(--bg-body);
    color: var(--main-font-color);
}

textarea {
    background: var(--bg-body);
    color: var(--main-font-color)
}

#divHeader {
    height: 35px;
    background: var(--main-color);
    color: #fff;
    padding: 5px;
    width: 100%;
    float: left;
    border-bottom: 2px solid gray;
}

#divFooter {
    height: 35px;
    background: var(--main-color);
    color: #fff;
    padding: 5px;
    width: 100%;
    float: left;
    border-top: 2px solid gray;
}

#divMenu {
    width: 220px;
    float: left;
    min-height: calc(100vh - 70px);
    background: var(--main-color);
    color: var(--main-font-color);
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 2px solid gray;
}

    #divMenu td {
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #fff;
        cursor: pointer
    }

    #divMenu a {
        color: var(--main-font-color);
        text-decoration: none;
        cursor: pointer
    }

    #divMenu td:hover a {
        font-weight: bold;
        color: var(--constrast-color);
    }

#divBody {
    height: calc(100vh - 70px);
    overflow: auto;
    width: calc(100% - 225px);
    user-select: none;
    float: left;
}

    #divBody .e-spinner-pane {
        background: rgba(0,0,0,0.4);
    }

.divTitle {
    width: 100%;
    float: left;
    border-bottom: 1px solid var(--main-color);
    padding: 5px;
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: bold;
    color: var(--main-body-color)
}

.button {
    padding: 5px;
    border: 1px solid var(--main-color);
    /* --bg-color chưa từng được khai ở đâu: nút mất nền, nền tối thì chữ chìm vào nền trang.
       --bg-body là biến nền đúng, có cả ở :root lẫn [data-theme='dark']. */
    background: var(--bg-body);
    text-align: center;
    font-size: 14px;
    cursor: pointer
}

    .button:hover {
        background: var(--main-color);
        color: var(--main-font-color);
    }

.buttonactive {
    background: var(--main-color);
    color: var(--main-font-color);
}

.buttondeactive {
    background: #fff;
    color: var(--main-color);
}

.divBot {
    width: 100%;
    float: left;
    margin-top: 10px;
    padding: 5px;
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: bold
}

#divNguoiDung {
    position: relative;
    float: right;
    text-align: right;
    cursor: pointer;
    width: 150px;
    user-select: none;
}

#divThongTin {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 160px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    padding: 0px !important;
    padding-bottom: 10px !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 100000;
}

#divTenDangNhap:hover #divThongTin {
    font-weight: bold;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#divTenDangNhap:hover div {
    opacity: 1;
    display: block
}

.btnMaster {
    width: 100%;
    float: left;
    padding: 5px;
    padding-left: 10px;
    text-align: left;
    border-bottom: 1px solid var(--main-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

    .btnMaster:hover a {
        color: var(--main-color) !important;
        font-weight: bold
    }

@media (max-width: 768px) {
    #divBody {
        width: 100%
    }

    #divTongQuanYeuCau {
        margin-top: 25px !important
    }
}

.ColorBase {
    color: var(--main-color) !important;
}

/* Nhãn cạnh ô nhập cùng cỡ chữ ô (14px); mặc định 16px của trang thì to lệch hẳn. */
.titleControl {
    width: 100px;
    float: left;
    font-size: 14px;
    padding-top: 3px !important
}

.bodyControl {
    width: calc(100% - 100px);
    float: left
}

    .bodyControl input {
        border-radius: 3px;
        border-width: 1px;
        border-color: var(--main-color);
        width: 100%;
        height: var(--ctl-h);
    }

/* Nút chỉ có icon (⌃ ⛶ 📌 …) và nút «?» hướng dẫn — MỘT khuôn cho mọi màn: ô tròn 24px, màu theo chữ nơi đặt,
   rê chuột lên màu nhấn. Các nút đứng cạnh nhau thì bọc trong .cum-nut-icon (hàng flex cách 2px): tự thẳng hàng,
   cách đều — đừng canh top/right từng nút.
   .nut-icon: <button type="button" class="nut-icon" title="…"><i class="fa-solid fa-…"></i></button>
   .help-btn: addHelpButton (07-help.js) dựng sẵn; nút tự đặt chỉ cần <button type="button" class="help-btn"
   title="…" aria-label="…"></button> — icon do CSS vẽ, đừng chèn chữ "?". */
.nut-icon,
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

    .nut-icon:hover,
    .help-btn:hover {
        color: var(--constrast-color);
        background: color-mix(in srgb, var(--constrast-color) 14%, transparent);
    }

    /* Reboot của Bootstrap 4 vẽ vòng focus sẫm (`button:focus{outline:5px auto …}`) cả khi BẤM CHUỘT — bấm xong nút còn
       đeo vòng đen. Chỉ giữ vòng cho bàn phím (Tab), bằng màu nhấn. */
    .nut-icon:focus:not(:focus-visible),
    .help-btn:focus:not(:focus-visible) {
        outline: none;
    }

    .nut-icon:focus-visible,
    .help-btn:focus-visible {
        outline: 2px solid var(--constrast-color);
        outline-offset: 1px;
    }

/* Vòng tròn nét mảnh 16px trông bằng icon đặc 15px đứng cạnh. Không lề: khoảng cách do khung chứa (gap) lo; chỉ nút
   đứng ngay sau chữ tiêu đề trang (.divTitle) mới cần lề trái. */
.help-btn {
    font-size: 16px;
}

.divTitle > .help-btn {
    margin-left: 6px;
}

    .help-btn::before {
        content: "\f059";
        font: var(--fa-font-regular, normal 400 1em/1 "Font Awesome 6 Free");
    }

.cum-nut-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Nút viền mảnh không nền cho việc phụ (Thôi, Tải lại, Gắn ảnh…): màu theo chữ nơi đặt. Cỡ do nơi dùng đặt. */
.nut-vien {
    border: 1px solid var(--grid-border);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .nut-vien:hover {
        background: var(--grid-row-hover);
    }

/* Báo "Đã copy" — MỘT kiểu cho mọi chỗ copy vào bộ nhớ tạm (ô Mã WorkList, Mã BN/KCB, danh mục, tham số mẫu in, hộp SQL):
   chữ "Đã copy" thay chỗ vừa copy ~1s — chỉ chữ, không nhãn nền, không icon (user chốt 01/10/2026). Chỗ copy mới cũng gắn
   lớp này, đừng dựng toast riêng. Chữ gốc chỉ bị ẩn (text-fill trong suốt, giữ nguyên color để nút lấy được màu chữ của nút),
   nội dung giữ nguyên nên ai đọc textContent lúc đó vẫn ra đúng mã. Đừng đưa Font Awesome vào font-family của chữ này:
   FA6 có glyph cho cả chữ Latin thường (icon chữ cái), "copy" hiện thành "COPY". */
.da-copy {
    position: relative;
    -webkit-text-fill-color: transparent;
}

    .da-copy * {
        visibility: hidden;
    }

    .da-copy::before {
        content: "Đã copy";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: var(--copy-text);
        -webkit-text-fill-color: currentColor;
        font-style: normal;
        font-weight: 600;
        white-space: nowrap;
        visibility: visible;
        pointer-events: none;
        animation: da-copy-hien .16s ease-out;
    }

    /* Ô lưới (Ctrl+C ở danh mục): dời theo đệm trái 10px của ô (04-grid.js) cho thẳng chữ. */
    .tabulator-cell.da-copy::before {
        left: 10px;
    }

    /* Nút (Copy câu lệnh): chữ giữa nút, màu chữ của chính nút — chữ xanh chìm trên nền nút. */
    button.da-copy::before {
        right: 0;
        text-align: center;
        color: inherit;
    }

@keyframes da-copy-hien {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .da-copy::before {
        animation: none;
    }
}

/* ===== CHROME / EDGE / SAFARI ===== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--tranfer-color2);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, var(--lever2-color), var(--main-color) );
    border-radius: 20px;
    border: 2px solid var(--tranfer-color2);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--constrast-color);
    }

::-webkit-scrollbar-corner {
    background: var(--tranfer-color2);
}


/* ===== FIREFOX ===== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--tranfer-color2);
}