: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;
    /* 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;
}

[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;
}

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" phủ lên ô vừa copy (reportpatient.js, worklist.js): chữ ô chỉ bị ẩn bằng CSS, nội dung giữ nguyên nên
   ai đọc textContent lúc đó vẫn ra đúng mã. */
.da-copy {
    position: relative;
    color: transparent !important;
}

    .da-copy * {
        visibility: hidden;
    }

    .da-copy::after {
        content: "\f0c5\00a0\00a0Đã copy";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: inherit;
        color: var(--status-done);
        font-family: "Font Awesome 6 Free", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 600;
        white-space: nowrap;
        visibility: visible;
    }

/* ===== 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);
}