/* CLINIC-SCOPE: shared */
/* ============================================================================
nen-chung.css — NỀN CHUNG của host: bôi đen văn bản, khung #divBody,
menu người dùng góc phải, ô tích, dấu * trường bắt buộc.
----------------------------------------------------------------------------
Trước 2026-09-21 tên là master.css và là một HỘP TẠP: ôm thêm ~130 dòng skin
lịch flatpickr (nay tách sang datepicker-skin.css) và 6 class không còn ai
dùng (.btnMaster, .ColorBase, .titleControl, .bodyControl, #divTongQuanYeuCau).
============================================================================ */
/* ════════════════════════════════════════════════════════════════════════════
MÀU THƯƠNG HIỆU HỆ CŨ — KHÔNG dùng cho màn mới.
----------------------------------------------------------------------------
THỐNG NHẤT 2026-09-21 — hệ thống từng có HAI sắc teal cùng làm màu thương hiệu:
--main-color #055952 <- khối này, hệ cũ, 182 chỗ
--brand #1d6f5c <- design-tokens.css, hệ mới, 515 chỗ
Chúng chỉ chênh nhau 1,36:1 nên đứng riêng gần như không phân biệt được, nhưng
cạnh nhau trên cùng màn thì lộ vệt chuyển sắc. Trước đó đã có tiền lệ: vạch
dòng đang chọn từng bị hai sắc này làm lệch (wdGrid lấy --brand, 3 lưới kia
lấy --main-color) và phải gom về --row-sel-bar.
NAY CHỐT LẤY #055952 cho cả hai. --brand giữ giá trị đó ở design-tokens.css,
còn --main-color dưới đây chỉ là BÍ DANH trỏ về --brand — một nguồn duy nhất,
đổi màu thương hiệu toàn hệ = sửa đúng một dòng bên design-tokens.css.
Hệ quả: 515 chỗ dùng --brand sẫm lại một bậc; tương phản với chữ trắng tăng
6,03 -> 8,21. Đối chiếu hai màu: docs/mocks/giao-dien-chung/hai-mau-thuong-hieu.html
════════════════════════════════════════════════════════════════════════════ */
:root {
--main-color: var(--brand); /* BÍ DANH của --brand — đừng đặt lại giá trị ở đây */
--lever2-color: #1d4ed8; /* cấp 2 — 3 chỗ (xanh dương theo brand, 06/10/2026) */
--tranfer-color: #2563eb85; /* chủ đạo, mờ 52% — 4 chỗ */
--tranfer-color2: #2563eb33;/* chủ đạo, mờ 20% — 1 chỗ */
/* Đã bỏ --constrast-color (#440000): sai chính tả "constrast" và 0 nơi dùng. */
}
/* Boi den van ban: truoc day khong khai gi nen dung xam mac dinh cua trinh duyet,
nhin khong ra dang chon toi dau. Lay DUNG nguon mau chon dung chung cua he
(--row-sel / --dk-grid-sel o tokens.css), khong che mau rieng -> boi den van ban
va dong dang chon o luoi cung mot sac. */
::selection {
background: var(--row-sel);
color: var(--text);
text-shadow: none;
}
::-moz-selection {
background: var(--row-sel);
color: var(--text);
text-shadow: none;
}
/* Vach nhay + con tro chu I chi thuoc ve cho GO DUOC.
Trinh duyet dang bat duyet bang con tro (caret browsing, F7) ve vach nhay o MOI doan chu
bam vao, ke ca o readonly -> nguoi dung tuong go duoc. Mac dinh trong suot, chi tra lai
cho o nhap/vung soan con mo; o readonly/disabled them con tro mui ten thay chu I.
:where() = specificity 0 nen rule rieng cua man (pointer o o bam-mo-popup, not-allowed
cua khoa-man.css, flatpickr...) van thang ma khong can !important. */
:where(html) {
caret-color: transparent;
}
:where(input, textarea, [contenteditable]:not([contenteditable="false"])) {
caret-color: auto;
}
:where(input, textarea):where([readonly], :disabled) {
caret-color: transparent;
cursor: default;
}
#divBody {
min-height: calc(100vh - 80px);
width: calc(100% - 220px);
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
}
.button {
padding: 5px;
border: 1px solid var(--main-color);
background: var(--surface, #fff);
text-align: center;
font-size: 14px;
cursor: pointer
}
.button:hover {
background: var(--main-color);
color: var(--btn-on, #fff);
}
.buttonactive {
background: var(--main-color);
color: var(--btn-on, #fff);
}
.buttondeactive {
background: var(--surface, #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: var(--surface, #fff);
border-radius: var(--radius, 2px);
border: 1px solid var(--line, #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
}
@media (max-width: 768px) {
#divBody {
width: 100%
}
}
input[type="checkbox"] {
box-sizing: border-box !important;
flex: 0 0 16px;
width: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
height: 16px !important;
min-height: 16px !important;
max-height: 16px !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle;
accent-color: var(--main-color) !important;
}
/* Dấu * đánh dấu trường bắt buộc — MỘT chỗ khai cho toàn hệ.
Trước đây ~29 màn mỗi nơi tự khai một kiểu (#dc2626 / #b42318 / #d92d20 / #d33,
hoặc mượn --act-delete / --btn-danger / --hi / --st-danger-text) nên cùng một ký
hiệu ra 4 sắc đỏ khác nhau, mà màn Lịch hẹn lại chẳng khai gì -> dấu * đen như
chữ thường. Màn mới chỉ cần *, KHÔNG khai màu lại. */
/* Dạng phổ biến: markup tự viết * cạnh nhãn -> tô đỏ chính nó. */
.req, .xn-req, .ckh-req, .dc-req, .ksk-field-req {
color: var(--req);
font-weight: var(--fw-bold);
font-style: normal;
}
/* Dạng thứ hai: .req nằm TRÊN chính