/* ====================================================================================
STYLE.CSS — NGUỒN CSS DUY NHẤT, 4 VÙNG (USER chốt 30-07-2026):
1) ==PDF-FONT== : @font-face Be Vietnam Pro self-host — GIÁ TRỊ nền móng.
2) ==PDF-TOKEN== : :root bảng màu chuẩn — GIÁ TRỊ nền móng (RULE CAO NHẤT §1.1).
3) [PHẦN A] CSS MÀN HÌNH — mọi rule bọc trong @media screen. CẤM bản in/PDF dùng.
4) [PHẦN B] CSS IN/PDF (==PDF-IN==) — @media print TỰ CHỨA 100%. CẤM mượn PHẦN A.
Mạch xuất PDF (css_pdf trong lib/pdf.php) CHỈ trích vùng 1 + 2 + 4. 0 rule ngoài 4 vùng.
==================================================================================== */
/*==PDF-FONT==*/
/* FONT CHUẨN DUY NHẤT: Be Vietnam Pro — self-host để mọi máy render (Windows/điện thoại/
VPS xuất PDF) cùng MỘT font, đủ glyph tiếng Việt. */
@font-face {
font-family: "Be Vietnam Pro";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("fonts/BeVietnamPro-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Be Vietnam Pro";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("fonts/BeVietnamPro-Bold.woff2") format("woff2");
}
/* Times New Roman thật (subset Việt+Latin) self-host cho QUYẾT ĐỊNH — VPS không có font này nên
trước đây rơi về Liberation Serif; nhúng bản thật để PDF sắc nét, khớp 1:1 file Word. */
@font-face {
font-family: "Times New Roman";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("fonts/TimesNewRoman-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Times New Roman";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("fonts/TimesNewRoman-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Times New Roman";
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("fonts/TimesNewRoman-Italic.woff2") format("woff2");
}
@font-face {
font-family: "Times New Roman";
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("fonts/TimesNewRoman-BoldItalic.woff2") format("woff2");
}
/*==/PDF-FONT==*/
/*==PDF-TOKEN==*/
:root {
/* Font stack chuẩn — nguồn DUY NHẤT cho PHẦN A + PHẦN B + tài liệu PDF (lib/pdf.php) */
--font-chu: "Be Vietnam Pro", "Segoe UI", Tahoma, Arial, sans-serif;
/* Bề rộng nội dung time.php (USER chốt 11/08/2026) — nguồn DUY NHẤT: thanh dashboard,
khung 4 tab và mọi bảng đều tham chiếu token này (bảng trong card trừ 2px viền). */
--rong-trang: 1200px;
/* ==== BỘ MÀU: áp 1:1 từ cskh (memory cskh-bo-mau-chuan) — GIỮ tên token, đổi giá trị = cskh ==== */
--brand: #154052;
/* Nút của time.php — NHẠT hơn --brand một bậc (USER chốt 13/08): cùng mã màu thì nút nhỏ
trên nền trắng nhìn ĐẬM hơn dải menu (tương phản đồng thời). Chữ trắng trên màu này
đạt 7.91:1 — vượt WCAG 2.1 AA (4.5:1). */
--nut-tm: #1f5770;
/* BRAND CHÍNH THỨC = #154052 (topbar, nút, tiêu đề phiếu, số liệu) */
--border: #e4e9ea;
/* = cskh --hair (viền thẻ/card/stat/feature) */
--hairline: #eef1f5;
/* vạch NGĂN HÀNG trong bảng dữ liệu — nhạt hơn --border để hàng xen kẽ không bị gợn sọc.
Nguồn duy nhất: bảng chặng (.tv-tbl), khối .emp-hd và lưới chấm công (.cc-form) dùng chung. */
--muted: #626f76;
/* = cskh --mut (chữ phụ mờ) */
--muted-2: #7e8a90;
/* = cskh --vien-nhap (chữ mờ nhạt) */
--muted-3: #556067;
/* = cskh --qmut (chữ phụ trang Quản trị .pg-quantri) */
--muted-4: #646f75;
/* = cskh --qfaint (chữ mờ nhạt trang Quản trị .pg-quantri) */
--brand-cskh: #1f5770;
/* = cskh --p (primary gốc cskh — chỉ dùng trong scope .pg-quantri, trùng tông --shadow-hover) */
--tint: #ecf5f6;
/* = cskh --okbg (nền nhạt th/icon/stat-ico) */
--surface-2: #f6f7f6;
/* = cskh --bg (nền body / zebra / ô readonly) */
--row-hover: #faf6ec;
/* = cskh --rowhover (hover mọi bảng) */
--topbar-ink: #c8dbe2;
/* = cskh --header-nhat (chữ mờ trên topbar) */
--ink: #13343b;
/* = cskh --ink (chữ tiêu đề đậm) */
--brand-soft: #1a6670;
/* = cskh --oktext (chữ phụ tông brand) */
/* ---- Dashboard card ---- */
--card-border: #bcd9dd;
/* = cskh --okbd (viền ngoài card) */
--border-2: #154052;
/* = cskh --pd (viền card hover đậm) */
--ico-a: #ecf5f6;
/* = cskh --okbg (chip icon: gradient sáng) */
--ico-b: #bcd9dd;
/* = cskh --okbd (chip icon: gradient đậm) */
--ico-border: #bcd9dd;
/* = cskh --okbd (viền chip icon) */
--shadow-card: 0 1px 2px rgba(15, 40, 50, 0.06),
0 4px 12px rgba(15, 40, 50, 0.05);
--shadow-hover: 0 10px 26px rgba(31, 87, 112, 0.18);
/* ---- Accent card (sắc nhấn trái) = 4 màu cskh ---- */
--acc-1: #154052;
/* brand #154052 */
--acc-2: #21808d;
/* = cskh --ok (teal) */
--acc-3: #d9730d;
/* = cskh --cam (cam) */
--acc-4: #f0bf71;
/* = cskh --gold (vàng) */
--err: #c0152f;
/* đỏ cảnh báo dùng chung: chưa chấm công, nhãn HÔM NAY, badge bị chặn */
--goldbg: #fdf6e7;
/* nền vàng nhạt dùng chung: hàng hôm nay, hàng tổng, băng nhắc việc */
/* ---- Màn bấm giờ (.man-bam-gio) + màn đăng nhập: hệ màu RIÊNG, tiền tố --cc-* ----
KHÔNG sửa --brand: --brand #154052 đang sơn thanh trên của 11 trang quản trị, đổi nó là
đổi cả phần mềm. Màn nhân viên là hệ hai khối tối/sáng nên cần bộ token của riêng nó. */
--cc-nen-dam: #111c2e;
/* nền khối tối (đỉnh dải chuyển sắc) */
--cc-nen-dam-2: #18253a;
/* nền khối tối (đáy dải chuyển sắc) */
--cc-ke-dam: rgba(255, 255, 255, 0.09);
/* vạch ngăn TRÊN nền tối */
--cc-vien-tren: rgba(255, 255, 255, 0.26);
/* viền nút viền-rỗng đặt TRÊN nền tối (nút Đăng xuất ở thanh trên) */
--cc-bong-nut: rgba(17, 28, 46, 0.5);
/* bóng đổ nút tròn — chính --cc-nen-dam ở 50% độ mờ */
--cc-chu-mo: rgba(255, 255, 255, 0.66);
/* chữ phụ trên nền tối */
--cc-vao: #0e7c5a;
/* nút VÀO LÀM — chữ trắng trên nền này đạt 5,19:1 (WCAG AA) */
--cc-vao-mo: rgba(14, 124, 90, 0.2);
/* quầng sáng ô nhập đang lấy nét — CÙNG màu --cc-vao, khai riêng để không chép tay mã màu */
--cc-ra: #a85812;
/* nút TAN CA — chữ trắng trên nền này đạt 5,16:1 (WCAG AA) */
--cc-sang: #f4f6f8;
/* nền khối đáy và nền nút vô hiệu */
--cc-vien: #dde2e5;
/* viền cột ứng dụng và vạch trên khối đáy */
--cc-tat-vien: #ccd5da;
/* vành trong của nút tròn khi bị vô hiệu */
--cc-ok: #14713f;
--cc-ok-nen: #eef7f2;
--cc-ok-vien: #cbe4d7;
/* viên trạng thái ĐÃ GHI NHẬN */
--cc-la: #8a5300;
--cc-la-nen: #fdf6ea;
--cc-la-vien: #f0dcb6;
/* viên trạng thái ĐI TRỄ — 5,77:1 trên nền của chính nó */
--cc-no-nen: #f5f7f8;
--cc-no-vien: #e2e8ea;
/* viên trạng thái CHƯA GHI NHẬN, chữ dùng --muted */
--cc-er: #a31212;
--cc-er-nen: #fdf0f0;
--cc-er-vien: #f2cccc;
/* viên trạng thái LỖI */
/* Băng thông báo NẰM TRÊN nền tối — khác hẳn .flash nền sáng của trang quản trị.
Hai nền phải là mã ĐỤC, KHÔNG dùng rgba trong suốt: thẻ .flash là con của .wrap chứ không
nằm trong hộp navy nào, nên nền trong suốt sẽ phủ lên nền TRẮNG của body thành hồng nhạt,
chữ trắng trên đó chỉ còn 1,06:1 — đọc không ra. Đã chụp và xác nhận lỗi này trên máy thật.
Hai mã dưới là kết quả tính sẵn của lớp trong suốt cũ chồng lên #111c2e, nên nhìn giống hệt
bản demo mà không phụ thuộc nền phía sau. */
--cc-flash-ok-nen: #163138;
--cc-flash-ok-chu: #8fe3b8;
--cc-flash-ok-ray: #2ea06e;
--cc-flash-er-nen: #312635;
--cc-flash-er-ray: #d65a5a;
--bg-gap: #fdecec;
--bd-gap: #f3c0c0;
/* nền/viền đỏ nhạt dùng chung: flash lỗi, pill gấp ở card Nhắc nhở */
/* ---- Badge mô hình KD/KT — bảng màu dùng chung PHẦN A + PHẦN B (§1.1) ---- */
--badge-nen: #e7edf4;
--badge-kd-nen: #e2eefb;
--badge-kd-chu: #175bb5;
--badge-kt-nen: #eae4fb;
--badge-kt-chu: #5b3bb0;
/* ---- Các biến khử hardcode ---- */
--white: #fff;
--sf: #ffffff;
--err-ink: #c0392b;
--err-btn: #a11;
--err-bg-2: #fdecea;
--err-bd-2: #efc4cc;
--err-bg-3: #fbeff1;
--ok-btn: #0a7d3c;
--ok-alt: #37864f;
--ok-ink: #216e39;
--ok-bg-2: #e6f4ea;
--ok-bd-2: #b7e0c2;
--inp-bd: #c6d0dc;
}
/*==/PDF-TOKEN==*/
/* ====================================================================================
[PHẦN A] CSS MÀN HÌNH — MỘT khối @media screen DUY NHẤT, TỰ CHỨA 100%.
Khối responsive (max-width) lồng bên trong. CẤM bản in/PDF dùng rule ở đây.
==================================================================================== */
@media screen {
/* ===== A01 · BASE — reset, khung chữ, phần tử nhập liệu toàn cục ===== */
* {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
margin: 0;
font-family: var(--font-chu);
color: var(--ink);
background: var(--surface-2);
}
h1 {
font-size: 22px;
margin: 0 0 16px;
}
h2 {
font-size: 17px;
margin: 22px 0 10px;
}
label {
display: block;
font-size: 13px;
color: var(--muted);
margin-bottom: 4px;
}
input,
select {
font: inherit;
height: 38px;
padding: 0 9px;
border: 1px solid var(--inp-bd);
border-radius: 6px;
background: var(--white);
width: 100%;
}
select {
padding-right: 28px;
}
option {
padding: 6px 9px;
}
/* ===== A02 · BẢNG DỮ LIỆU DÙNG CHUNG — table/th/td, zebra, hover, cột thao tác ===== */
.table-scroll {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
background: var(--white);
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
th,
td {
border: 0;
border-bottom: 1px solid var(--border);
padding: 7px 9px;
text-align: left;
}
th {
background: var(--tint);
color: var(--muted);
border: 0;
border-bottom: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
font-weight: 600;
padding: 10px 9px;
}
td.num,
th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
tr.sub td {
background: var(--tint);
font-weight: 600;
}
table tr:nth-child(odd):not(.sec):not(.sub):not(.total):not(.note):not(.nay)>td:not(:only-child):not(.payslip *) {
background: var(--surface-2);
}
table tr:not(.sec):not(.sub):not(.total):not(.note):hover>td:not(:only-child):not(.payslip *) {
background: var(--row-hover);
cursor: default;
transition: background-color 0.15s ease;
}
tr.total td {
background: var(--goldbg);
font-weight: 700;
}
th.col-act,
td.col-act {
width: 1%;
white-space: nowrap;
text-align: center;
}
td.col-act>.icon-btn,
td.col-act>.btn,
td.col-act>.form-ke {
vertical-align: middle;
}
/* ===== A03 · KHUNG TRANG — topbar, wrap, hàng/cột layout, footer, flash ===== */
/* Thanh trên LUÔN MỘT HÀNG ở mọi bề rộng — cụm người dùng không bao giờ rơi xuống hàng hai.
Cơ chế: nav co chữ theo bề rộng màn (clamp bên dưới), hết chỗ thật sự thì nav TỰ CUỘN NGANG
trong hàng của nó (khuôn tab-bar chuẩn) thay vì bẻ hàng. Gap cũng co theo màn. */
.topbar {
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 24px);
background: var(--brand);
color: var(--white);
padding: 0 20px;
min-height: 52px;
}
.topbar .brand {
font-weight: 700;
letter-spacing: 0.3px;
white-space: nowrap; /* tên phần mềm là một khối, cấm ngắt giữa chừng */
}
/* Thanh điều hướng rỗng vẫn là một ô flex, nên vẫn ăn thêm một khoảng hở 24px giữa tên
phần mềm và cụm người dùng. Với vai trò nhân viên, nav luôn rỗng — bỏ hẳn ô đó đi. */
.topbar nav:empty {
display: none;
}
/* Vai trò là chữ thừa khi thiếu chỗ: người dùng biết mình là ai. Ngưỡng 1366 (không phải chỉ
điện thoại) vì dưới cỡ đó nhường ~60px cho nav là đủ giữ trọn 12 mục không phải cuộn. */
@media (max-width: 1366px) {
.topbar .user-box .vt {
display: none;
}
}
/* flex:1 + min-width:0 cho nav nhận trọn khoảng giữa và ĐƯỢC PHÉP hẹp hơn nội dung — thiếu
min-width:0 thì flex từ chối co, đẩy cụm người dùng tràn ra ngoài. Tràn thật thì cuộn ngang
trong hàng; ẩn thanh cuộn bằng thuộc tính chuẩn, vẫn vuốt/lăn được. */
.topbar nav {
display: flex;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
/* Cỡ chữ và đệm co giãn theo bề rộng màn trong dải đã chốt: màn rộng đúng 14px như cũ, màn
vừa co dần để 12 mục vẫn nằm một hàng — KHÔNG bẻ hàng, KHÔNG cắt chữ giữa chừng. */
.topbar nav a {
color: var(--topbar-ink);
text-decoration: none;
padding: 8px clamp(5px, 0.45vw, 8px);
border-radius: 6px;
font-size: clamp(12px, 0.88vw, 14px);
white-space: nowrap;
}
.topbar nav a:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
}
.topbar nav a.on {
background: var(--white);
color: var(--brand);
}
/* flex:0 0 auto — cụm người dùng KHÔNG co, KHÔNG rơi hàng: nav bên cạnh mới là bên nhường. */
.topbar .user-box {
margin-left: auto;
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 10px;
font-size: 13px;
color: var(--topbar-ink);
white-space: nowrap;
}
.topbar .user-box form {
margin: 0;
}
.wrap {
max-width: 1120px;
margin: 22px auto;
padding: 0 18px;
}
.wrap.full {
max-width: 1400px;
margin: 22px auto;
padding: 0 22px;
}
.row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
}
.row>div {
flex: 1 1 160px;
}
.col-fit,
.row>.col-fit {
flex: 0 0 auto;
}
div.row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
align-items: flex-end;
}
th.col-stt,
td.col-stt {
text-align: center;
white-space: nowrap;
}
.flash {
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 14px;
font-size: 14px;
}
.flash.ok {
background: var(--ok-bg-2);
color: var(--ok-ink);
border: 1px solid var(--ok-bd-2);
}
.flash.err {
background: var(--bg-gap);
color: var(--err-btn);
border: 1px solid var(--bd-gap);
}
.foot {
text-align: center;
color: var(--muted-2);
font-size: 12px;
padding: 22px;
}
/* ===== A04 · NÚT & BADGE DÙNG CHUNG — .btn, .icon-btn, .badge, .muted ===== */
.btn-group {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
/* Nút đang bị khoá — trước đây JS tiêm thẳng style.opacity vào thẻ, nên nút bị khoá sẵn
bằng thuộc tính disabled (ví dụ nút Xác thực thủ công khi cấu hình proxy lệch) trông y hệt
nút còn bấm được. Diện mạo thuộc về CSS, JS chỉ đặt trạng thái. */
.btn:disabled,
.icon-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
background: var(--brand);
color: var(--white);
border: 0;
padding: 0 16px;
border-radius: 6px;
cursor: pointer;
font: inherit;
line-height: 1;
white-space: nowrap;
text-decoration: none;
vertical-align: middle;
}
.btn.sm {
height: 30px;
padding: 0 10px;
font-size: 13px;
}
.btn.alt {
background: var(--ok-alt);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: var(--white);
border: 1px solid var(--inp-bd);
border-radius: 6px;
color: var(--brand);
cursor: pointer;
vertical-align: middle;
text-decoration: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.icon-btn+.icon-btn {
margin-left: 6px;
}
.icon-btn:hover {
background: var(--tint);
border-color: var(--brand);
}
.icon-btn svg {
width: 17px;
height: 17px;
display: block;
}
.icon-btn.danger {
color: var(--err-ink);
}
.icon-btn.danger:hover {
background: var(--err-bg-2);
border-color: var(--err-ink);
}
.btn.danger {
background: var(--err-ink);
}
.btn.ok {
background: var(--ok-btn);
}
.muted {
color: var(--muted-2);
}
.badge {
font-size: 12px;
padding: 2px 8px;
border-radius: 20px;
background: var(--badge-nen);
}
.badge.KD {
background: var(--badge-kd-nen);
color: var(--badge-kd-chu);
}
.badge.KT {
background: var(--badge-kt-nen);
color: var(--badge-kt-chu);
}
.btn-cc {
gap: 8px;
font-weight: 600;
}
.btn-cc:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-cc svg {
width: 17px;
height: 17px;
}
/* ===== A05 · TRANG ĐĂNG NHẬP — .login-* ===== */
.login-body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand), var(--brand-soft));
padding: 20px;
}
.login-card {
width: 380px;
max-width: 100%;
background: var(--white);
border-radius: 10px;
box-shadow: 0 18px 50px rgba(15, 76, 129, 0.35);
padding: 28px 26px;
border-top: 4px solid var(--brand);
}
.login-brand {
font-size: 20px;
font-weight: 800;
color: var(--brand);
text-align: center;
}
.login-sub {
font-size: 12px;
color: var(--muted);
text-align: center;
margin: 4px 0 18px;
}
.login-form {
display: flex;
flex-direction: column;
}
.login-form label {
font-size: 12px;
font-weight: 700;
color: var(--muted);
margin-top: 10px;
}
.login-form input {
margin-top: 4px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
}
.login-form input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.14);
}
.login-form .btn {
margin-top: 18px;
justify-content: center;
}
.login-loi {
background: rgba(192, 57, 43, 0.08);
color: var(--err-ink);
border-left: 3px solid var(--err-ink);
border-radius: 6px;
padding: 9px 12px;
font-size: 13px;
margin-bottom: 12px;
}
.login-hint {
font-size: 11.5px;
color: var(--muted);
text-align: center;
margin-top: 16px;
}
/* ===== A06 · TRANG CHỦ / DASHBOARD — .dash, .card, .stat, .feature, .grid-cards, .cb-* ===== */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.grid-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.grid-cards a {
text-decoration: none;
color: inherit;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 8px;
}
.stat,
.grid-cards .feature {
background: var(--white);
border: 1px solid var(--border);
border-left: 2px solid var(--brand);
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.stat-grid .stat:nth-child(4n + 1),
.grid-cards .feature:nth-child(4n + 1) {
border-left-color: var(--acc-1);
}
.stat-grid .stat:nth-child(4n + 2),
.grid-cards .feature:nth-child(4n + 2) {
border-left-color: var(--acc-2);
}
.stat-grid .stat:nth-child(4n + 3),
.grid-cards .feature:nth-child(4n + 3) {
border-left-color: var(--acc-3);
}
.stat-grid .stat:nth-child(4n + 4),
.grid-cards .feature:nth-child(4n + 4) {
border-left-color: var(--acc-4);
}
.stat {
display: flex;
align-items: center;
gap: 14px;
min-height: 60px;
padding: 18px 20px;
}
.stat-link {
text-decoration: none;
color: inherit;
}
.stat-link:hover,
.grid-cards .feature:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.stat-ico,
.feature-ico {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
background: linear-gradient(145deg, var(--ico-a), var(--ico-b));
border: 1px solid var(--ico-border);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.stat-num {
font-size: 25px;
font-weight: 800;
color: var(--brand);
line-height: 1.15;
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
}
.stat-lbl {
font-size: 13px;
color: var(--brand-soft);
margin-top: 2px;
}
.dash-h {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand);
margin: 26px 0 12px;
}
.dash-h::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 4px;
height: 13px;
margin-right: 8px;
border-radius: 2px;
background: linear-gradient(180deg, var(--brand), var(--brand-soft));
}
.grid-cards .feature {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 118px;
padding: 18px 20px;
text-decoration: none;
color: inherit;
}
.grid-cards .feature b {
font-size: 15px;
color: var(--brand);
margin-top: 2px;
}
.grid-cards .feature .muted {
font-size: 13px;
line-height: 1.45;
color: var(--brand-soft);
}
.feature-ico {
margin-bottom: 6px;
}
.card-cc {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 14px;
align-items: end;
}
.card-cc label {
display: block;
}
.card-cc select:disabled {
background: var(--surface-2);
color: var(--muted-2);
}
.cb-card {
margin-top: 18px;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.cb-card .cb-head {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
border-bottom: 1px solid var(--border);
}
.cb-card .cb-head .ic {
width: 38px;
height: 38px;
border-radius: 9px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--goldbg);
border: 1px solid var(--acc-4);
font-size: 18px;
}
.cb-card .cb-head h2 {
margin: 0;
font-size: 17px;
color: var(--brand);
}
.cb-card .cb-head p {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--muted);
}
.cb-card .cb-tong {
margin-left: auto;
font-size: 12.5px;
font-weight: 700;
color: var(--err);
background: var(--bg-gap);
border: 1px solid var(--bd-gap);
border-radius: 20px;
padding: 3px 12px;
}
.cb-card .tbl-wrap {
overflow-x: auto;
}
.cb-card table {
border-collapse: collapse;
width: 100%;
min-width: 700px;
}
/* Đệm ngang 12px thay vì 20px: bảng 7 cột, mỗi ô 20px hai bên là 280px chỉ riêng đệm —
thủ phạm làm khung tràn ngang và cột nội dung bị bóp gãy 3 dòng. Hai mép ngoài của bảng
giữ 20px bằng cặp rule first/last bên dưới. */
.cb-card thead th {
text-align: left;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--brand-soft);
background: var(--white);
padding: 10px 10px;
border-bottom: 2px solid var(--brand);
white-space: nowrap;
}
.cb-card thead th:first-child,
.cb-card tbody td:first-child {
padding-left: 20px;
}
.cb-card thead th:last-child,
.cb-card tbody td:last-child {
padding-right: 20px;
}
.cb-card thead th.dt {
width: 1%;
}
.cb-card thead th.cl {
width: 1%;
text-align: right;
}
.cb-card tbody td {
padding: 9px 10px;
border-top: 1px solid var(--hairline);
vertical-align: middle;
line-height: 1.5;
}
/* Ngày không được gãy dòng, số thẳng cột. */
.cb-card td.dt {
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: 13px;
}
.cb-card tbody tr:hover td {
background: var(--row-hover);
}
.cb-card tbody tr:first-child.grp td {
border-top: 0;
}
.cb-card tr.grp td {
padding: 7px 20px;
border-top: 1px solid var(--border);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
color: var(--brand-soft);
background: var(--tint);
}
/* Tên một dòng, BỘ PHẬN xuống dòng nhỏ bên dưới — cột hẹp lại ~80px, phần đó dồn cho cột
Nội dung để câu nhắc không gãy quá 2 dòng. */
.cb-card td.ai {
white-space: nowrap;
width: 1%;
}
.cb-card td.ai .bp {
display: block;
margin-top: 1px;
font-size: 12px;
}
.cb-card td.ai b {
color: var(--brand);
}
.cb-card td.ai .bp {
color: var(--muted-2);
font-size: 12.5px;
}
.cb-card td.dt {
white-space: nowrap;
width: 1%;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.cb-card td.cl {
white-space: nowrap;
width: 1%;
text-align: right;
}
/* Pill là CẢNH BÁO, không phải hăm doạ: chữ 11.5px/600, thân gọn. */
/* Badge cột Tình trạng: MỘT cỡ chung cho mọi trạng thái (width cố định — yêu cầu USER
10-08 "kích thước bằng nhau"), chữ nhỏ, nền họ *-bg-2 nhạt — cảnh báo chứ không hù doạ. */
.cb-card .pill {
display: inline-block;
width: 112px;
text-align: center;
font-size: 10.5px;
font-weight: 600;
border: 1px solid;
border-radius: 20px;
padding: 3px 0;
white-space: nowrap;
}
.cb-card .pill.gap {
color: var(--err-ink);
background: var(--err-bg-3);
border-color: var(--bd-gap);
}
.cb-card .pill.qua {
color: var(--err-ink);
background: var(--err-bg-2);
border-color: var(--err-bd-2);
}
.cb-card .pill.sap {
color: var(--acc-3);
background: var(--goldbg);
border-color: var(--acc-4);
}
.cb-card .pill.xa {
color: var(--muted);
background: var(--surface-2);
border-color: var(--border);
}
.cb-card .pill.xong {
color: var(--ok-ink);
background: var(--ok-bg-2);
border-color: var(--ok-bd-2);
}
.cb-card td.xl {
text-align: right;
white-space: nowrap;
}
.cb-card td.xl .icon-btn {
width: 30px;
height: 26px;
}
/* Toast xác nhận của nút Xử lý — một hộp duy nhất dùng chung cho mọi hàng. */
.nhac-toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
z-index: 50;
width: calc(100% - 32px);
max-width: 520px;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: 10px;
box-shadow: var(--shadow-hover);
padding: 14px 16px;
}
.nhac-toast[hidden] {
display: none;
}
.nhac-toast p {
margin: 0 0 10px;
font-size: 13.5px;
line-height: 1.5;
color: var(--ink);
}
.nhac-toast .nt-nut {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.nhac-toast .nt-huy {
background: var(--white);
color: var(--muted);
border: 1px solid var(--border);
}
@media (max-width: 900px) {
.stat-grid,
.grid-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.stat-grid,
.grid-cards {
grid-template-columns: 1fr;
}
}
/* ===== A07 · TRANG NHÂN SỰ — .ns-*, .emp-*, .nv-*, #sel-nv-tv ===== */
.ns-khung {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ns-khung table {
box-shadow: none;
}
.ns-khung>table>tbody>tr>td {
border: none;
padding: 10px 14px;
}
.ns-khung>table>tbody>tr>td>p:first-child {
margin-top: 0;
}
.ns-khung .table-scroll {
border-radius: 8px;
overflow: hidden;
}
.ns-khung .table-scroll>table {
border-collapse: separate;
border-spacing: 0;
}
.ns-khung .table-scroll>table th,
.ns-khung .table-scroll>table td {
border-width: 0 1px 1px 0;
}
.ns-khung .table-scroll>table tr:first-child th,
.ns-khung .table-scroll>table tr:first-child td {
border-top-width: 1px;
}
.ns-khung .table-scroll>table th:first-child,
.ns-khung .table-scroll>table td:first-child {
border-left-width: 1px;
}
.ns-khung .table-scroll>table tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.ns-khung .table-scroll>table tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.ns-khung .table-scroll>table tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.ns-khung .table-scroll>table tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.emp {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04),
0 6px 16px rgba(16, 42, 67, 0.05);
margin-bottom: 20px;
overflow: hidden;
}
.emp-hd {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
border-bottom: 1px solid var(--hairline);
flex-wrap: wrap;
}
.emp-hd .nm {
font-size: 16px;
font-weight: 700;
color: var(--brand);
letter-spacing: 0.2px;
}
.emp-hd .pill {
font-size: 11.5px;
font-weight: 700;
padding: 3px 11px;
border-radius: 20px;
letter-spacing: 0.3px;
white-space: nowrap;
background: var(--goldbg);
color: var(--acc-3);
}
.emp-meta {
color: var(--muted);
font-size: 12.5px;
margin-left: auto;
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.emp-meta b {
color: var(--ink);
font-weight: 600;
}
.emp-meta .k {
color: var(--muted-2);
font-weight: 500;
margin-right: 4px;
}
.nv-dd {
position: relative;
}
.nv-dd.san-sang select {
display: none;
}
.nv-dd-nut {
font: inherit;
height: 38px;
padding: 0 28px 0 9px;
border: 1px solid var(--inp-bd);
border-radius: 6px;
background: var(--white);
width: 100%;
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nv-dd-nut::after {
content: "▾";
position: absolute;
right: 10px;
color: var(--muted);
pointer-events: none;
}
.nv-dd-nut:hover {
border-color: var(--brand);
}
.nv-dd-nut:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
}
.nv-dd-panel {
display: none;
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 320px;
overflow-y: auto;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: 8px;
box-shadow: var(--shadow-hover);
}
.nv-dd.mo .nv-dd-panel {
display: block;
}
.nv-dd-panel table {
border-collapse: collapse;
width: 100%;
}
.nv-dd-panel td {
padding: 8px 14px;
border-top: 1px solid var(--hairline);
white-space: nowrap;
cursor: pointer;
}
.nv-dd-panel td+td {
border-left: 1px solid var(--hairline);
}
.nv-dd-panel tr:first-child td {
border-top: 0;
}
.nv-dd-panel tr:hover td {
background: var(--row-hover);
}
.nv-dd-panel tr.chon td {
background: var(--tint);
color: var(--brand);
font-weight: 600;
}
/* ===== A08 · TRANG THỬ VIỆC — .tv-* ===== */
.tv-tbl {
width: 100%;
border-collapse: collapse;
font-size: 14px;
box-shadow: none;
}
/* Bảng CHUYÊN CẦN (chuyencan.php): 10 cột width CỐ ĐỊNH khớp DỮ LIỆU THẬT (đo max-content bằng
trình duyệt với font thật, đệm ngang 8px). 9 cột ngắn set khít giá trị dài nhất (tên
"Nguyễn Hồng Yến Nhi" 166, "Đoàn Phú" 86, "Xử phạt 100K" 110, "Không tính chế tài" 144...) →
không dư/thiếu. Ba cột free-text (Chuyên cần, Lý do, Xem xét) chứa tối đa 27/85/46 ký tự — bất
khả 1 dòng; Lý do (360) nhận phần còn lại của khung làm CHỖ TRỐNG DÀNH RIÊNG cho lý do dài, giá
trị dài hiếm tự xuống dòng. Tổng 1356px = bề rộng khung .wrap.full; width:auto TẮT kéo giãn 100%
nên KHÔNG rải khoảng trắng thừa vào cột ngắn. NGUỒN DUY NHẤT khai width — phạm vi .cc-bang. */
.cc-bang { table-layout: fixed; width: auto; max-width: 100%; }
/* Thu nhỏ đệm ngang 16→8px CHỈ cho bảng này → khoảng cách giữa các cột hẹp lại, dồn chỗ cho cột
Xử lý ("Xử phạt 100K") mà KHÔNG phải rút cột Lý do. Đệm dọc giữ nguyên; acts-col có riêng. */
.tv-tbl.cc-bang th,
.tv-tbl.cc-bang td { padding-left: 8px; padding-right: 8px; }
/* Cột STT chỉ chứa số 1-2 chữ số → lề trái 16px cho số không dính mép, lề phải 4px để cột vẫn
gọn (số căn trái nên phải trống). Header "STT" (25px) là mức sàn cho bề rộng cột. */
.tv-tbl.cc-bang th:first-child,
.tv-tbl.cc-bang td:first-child { padding-left: 16px; padding-right: 4px; }
.cc-c-stt { width: 48px; }
.cc-c-nv { width: 166px; }
.cc-c-ngay { width: 104px; }
.cc-c-cc { width: 116px; }
.cc-c-lydo { width: 360px; }
.cc-c-xem { width: 118px; }
.cc-c-xuly { width: 110px; }
.cc-c-ql { width: 86px; }
.cc-c-capdo { width: 144px; }
.cc-c-hanhdong { width: 104px; }
.tv-tbl th.acts-col,
.tv-tbl td.acts-col {
width: 1%;
white-space: nowrap;
padding-right: 12px;
}
.tv-tbl td.acts-col .acts {
width: 100%;
justify-content: flex-end;
}
.tv-tbl th {
background: var(--tint);
color: var(--muted);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 11px 16px;
text-align: left;
white-space: nowrap;
border: 0;
border-bottom: 1px solid var(--border);
}
.tv-tbl th.r,
.tv-tbl td.r {
text-align: right;
}
.tv-tbl th.c,
.tv-tbl td.c {
text-align: center;
}
.tv-tbl td {
padding: 0 16px;
height: 52px;
border: 0;
border-bottom: 1px solid var(--hairline);
color: var(--ink);
vertical-align: middle;
}
.tv-tbl tr:last-child td {
border-bottom: 0;
}
.tv-tbl .chip {
display: inline-block;
background: var(--tint);
color: var(--brand);
font-weight: 600;
font-size: 13px;
padding: 3px 12px;
border-radius: 7px;
}
.tv-tbl .dt {
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.tv-tbl .num {
font-variant-numeric: tabular-nums;
}
.tv-tbl .money {
font-weight: 700;
color: var(--ok-btn);
}
.tv-tbl .z {
color: var(--muted-2);
}
.tv-tbl .acts {
display: flex;
gap: 5px;
justify-content: flex-end;
}
.tv-tbl .acts .icon-btn+.icon-btn {
margin-left: 0;
}
/* ===== A09 · TRANG CHẤM CÔNG — .cc-* ===== */
.thuong-ps {
background: var(--surface-2);
color: var(--muted);
cursor: default;
}
.cc-form {
table-layout: fixed;
width: 100%;
min-width: var(--cc-min, 0);
}
.cc-form th,
.cc-form td {
vertical-align: middle;
}
.cc-form td {
padding-top: 0;
padding-bottom: 0;
border: 0;
border-bottom: 1px solid var(--hairline);
}
.cc-form input {
background: transparent;
height: 42px;
border: 0;
border-radius: 0;
padding: 0 4px;
text-align: center;
}
.cc-form input:focus {
background: var(--white);
box-shadow: inset 0 0 0 1px var(--brand);
outline: none;
}
.cc-form input[readonly]:focus {
background: transparent;
box-shadow: none;
}
.cc-form input[name^="giamsat"],
.cc-form input[name^="lydo"] {
text-align: left;
padding-left: 15px;
}
.cc-form tr.tuan td {
border-top: 1px solid var(--brand-soft);
}
.cc-grid-wrap {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-card);
background: var(--white);
}
.cc-grid-wrap table {
box-shadow: none;
}
.cc-form th {
background: var(--tint);
color: var(--brand);
border: 0;
border-bottom: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
font-weight: 600;
padding: 10px 9px;
}
.cc-form td:first-child,
.cc-form td:nth-child(2) {
color: var(--ink);
font-weight: 500;
padding-left: 10px;
}
.cc-form tr:last-child td {
border-bottom: 0;
}
.cc-form input[readonly] {
color: var(--muted);
}
.cc-form tr.sun td:first-child,
.cc-form tr.sun td:nth-child(2) {
color: var(--muted);
}
.cc-week {
margin: 0 0 16px;
}
.cc-week-hd {
display: flex;
align-items: center;
gap: 12px;
padding: 0 2px 8px;
}
.cc-wk-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 5px 9px;
border-radius: 10px;
background: var(--tint);
border: 1px solid var(--border);
line-height: 1;
}
.cc-wk-badge b {
font-size: 16px;
color: var(--brand);
}
.cc-wk-badge i {
margin-top: 3px;
font-size: 10px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted-2);
}
.cc-wk-range {
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.cc-wk-count {
margin-left: auto;
font-size: 12px;
color: var(--muted);
background: var(--tint);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 11px;
}
.cc-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-card);
padding: 22px;
margin: 18px 0;
}
.cc-head {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 2px;
}
.cc-head .ic {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
background: var(--tint);
color: var(--brand-soft);
flex: 0 0 auto;
}
.cc-head h2 {
font-size: 16px;
margin: 0;
font-weight: 700;
color: var(--ink);
}
.cc-head p {
margin: 1px 0 0;
font-size: 12.5px;
color: var(--muted);
}
.cc-card svg {
display: block;
}
.cc-fields {
display: flex;
gap: 14px;
margin-top: 16px;
}
.cc-field {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
}
.cc-field .cc-inwrap {
margin-top: auto;
}
.cc-field label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.cc-field .hint {
display: block;
font-size: 11.5px;
color: var(--muted-2);
margin-bottom: 8px;
min-height: 15px;
}
.cc-inwrap {
position: relative;
}
.cc-inwrap input {
width: 100%;
height: 46px;
border: 1.5px solid var(--inp-bd);
border-radius: 11px;
padding: 0 14px;
font: inherit;
font-size: 15px;
background: var(--white);
color: var(--ink);
}
.cc-inwrap.money input {
padding-right: 30px;
}
.cc-inwrap.money::after {
content: "\20AB";
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-2);
font-size: 14px;
}
.cc-inwrap input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}
#ktRows {
display: grid;
gap: 8px;
margin-top: 10px;
}
.kt-row {
display: flex;
gap: 8px;
align-items: center;
}
.kt-row > input,
.kt-row > .cc-inwrap {
flex: 1;
}
.kt-them {
margin-top: 10px;
}
.cc-hero {
display: flex;
align-items: center;
gap: 16px;
background: var(--tint);
color: var(--ink);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 20px;
margin-top: 14px;
}
.cc-hero .ring {
width: 52px;
height: 52px;
border-radius: 12px;
flex: 0 0 auto;
background: var(--white);
border: 1px solid var(--border);
color: var(--brand);
display: grid;
place-items: center;
}
.cc-hero .big {
font-size: 30px;
font-weight: 800;
line-height: 1;
color: var(--brand);
}
.cc-hero .big small {
font-size: 15px;
font-weight: 600;
color: var(--muted);
margin-left: 5px;
}
.cc-hero .lbl {
font-size: 13px;
color: var(--muted);
margin-top: 5px;
}
.cc-tiles {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 16px;
}
.cc-tile {
border: 1px solid var(--border);
border-radius: 13px;
padding: 14px 13px;
background: var(--white);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
min-width: 0;
}
.cc-tile .val .so {
display: inline-block;
min-width: 30px;
text-align: center;
}
.cc-tile .ti {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--tint);
color: var(--brand-soft);
flex: 0 0 auto;
}
.cc-tile .tl {
font-size: 12px;
color: var(--muted);
font-weight: 600;
line-height: 1.25;
}
.cc-tile .val {
grid-column: 1 / -1;
font-size: 24px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.2px;
}
.cc-tile .val .u {
font-size: 12px;
color: var(--muted-2);
font-weight: 600;
margin-left: 3px;
}
.cc-tile.zero .val {
color: var(--muted-2);
}
.cc-tile.zero .ti {
color: var(--muted-2);
}
.tt-dong {
margin-top: 10px;
font-size: 13px;
color: var(--muted);
}
.tt-dong b.chua {
color: var(--err);
}
.tt-dong b.roi {
color: var(--acc-2);
}
.tt-tuluu {
margin: -6px 0 12px;
}
.tt-tuluu #ccSaveStatus {
color: var(--acc-2);
font-weight: 600;
}
.cc-form tr.nay td {
background: var(--goldbg);
}
.cc-form tr.nay td:first-child {
box-shadow: inset 3px 0 0 var(--brand);
font-weight: 700;
}
@media (max-width: 860px) {
.cc-tiles {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 560px) {
.cc-tiles {
grid-template-columns: repeat(2, 1fr);
}
.cc-hero .big {
font-size: 28px;
}
}
/* ===== A10 · TRANG TÁC PHONG — .tp-* ===== */
/* Bảng nhật ký tác phong — lưới cột TƯỜNG MINH bằng colgroup .tp-c-* (bỏ nth-child: chèn/
bớt cột là lệch cả lưới mà không báo lỗi). border-collapse: separate (spacing 0) cho CÙNG
hình ảnh vì ô chỉ kẻ border-bottom, nhưng thoát lỗi Chrome: bảng collapse rộng 100% tại
bề rộng lẻ (zoom 125%) bị dôi 1px làm hiện thanh cuộn ma — đã tái hiện và đo được. */
.tp-bang {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
.tp-c-stt { width: 56px; }
.tp-c-nv { width: 190px; }
.tp-c-ngay { width: 130px; }
.tp-c-lydo { width: auto; }
.tp-c-ql { width: 120px; }
.tp-c-xuly { width: 132px; }
.tp-c-hanhdong { width: 110px; }
.tp-bang td {
vertical-align: middle;
overflow-wrap: break-word;
}
/* Cột STT: số 2 chữ số không bị bẻ dòng dù bảng table-layout:fixed */
.tp-bang th:first-child,
.tp-bang td:first-child {
white-space: nowrap;
overflow-wrap: normal;
}
.tp-bang .icon-btn {
width: 30px;
height: 30px;
}
/* KHUÔN NHẬT KÝ nk-* — dùng chung cho CẶP trang song sinh Chuyên cần + Tác phong:
ô nhập chia đều 1fr tuyệt đối lấp trọn bề ngang; track nút = auto ôm gọn nút, không
sinh khoảng chết. align-items: end thay hack label rỗng (label vô nghĩa với
trình đọc màn hình — WCAG 1.3.1). nk-day: hàng có nút đứng cạnh ô nhập, căn đáy. */
.nk-loc {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: 16px;
align-items: end;
}
.form-nhap .row.nk-ghi {
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
gap: 16px;
align-items: end;
}
.form-nhap .row.nk-day {
align-items: end;
}
/* Ô nút (nk-nut) căn GIỮA cột ở MỌI cỡ màn — nút đứng chính giữa so với ô nhập cùng cột
phía trên; với nút nằm trong track auto (ôm sát nút) căn giữa không đổi vị trí. */
.nk-nut {
text-align: center;
}
/* Màn hẹp: các dãy về lưới 2 cột (thay vai trò cot-5 cũ của dãy ghi). */
@media (max-width: 720px) {
.nk-loc,
.form-nhap .row.nk-ghi {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ===== A11 · FORM NHẬP LIỆU DÙNG CHUNG — .form-*, #form-ho-so ===== */
.form-inline {
display: inline;
margin: 0;
}
.form-nhap {
padding: 20px 22px 24px;
}
.form-nhap .row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 16px;
}
.form-nhap .row+.row {
margin-top: 14px;
}
.form-nhap label {
color: var(--muted-3);
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
}
.form-nhap label .muted {
font-weight: 400;
}
.form-nhap:is(input,
select) {
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-nhap:is(input,
select):hover {
border-color: var(--brand);
}
.form-nhap:is(input,
select):focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
}
.form-nhap div:has(> input[required]) label::after {
content: " *";
color: var(--err-ink);
}
.form-nhap>p.muted {
margin: 18px 0 0;
padding: 10px 12px;
background: var(--surface-2);
border-left: 3px solid var(--brand);
border-radius: 6px;
font-size: 13px;
}
.form-nhap .o-2 {
grid-column: span 2;
}
.form-nhap .o-3 {
grid-column: span 3;
}
.form-nhap .o-full {
grid-column: 1 / -1;
}
.form-nhap .row.cot-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#form-ho-so {
counter-reset: nhom;
}
#form-ho-so .dash-h {
counter-increment: nhom;
display: flex;
align-items: center;
gap: 9px;
margin: 26px 0 14px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 14px;
font-weight: 700;
color: var(--brand);
letter-spacing: 0.2px;
}
#form-ho-so .dash-h::before {
content: counter(nhom);
flex: 0 0 auto;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tint);
color: var(--brand);
border-radius: 50%;
font-size: 12px;
margin-right: 0;
}
#form-ho-so .dash-h:first-of-type {
margin-top: 2px;
padding-top: 0;
border-top: 0;
}
.form-sua-user {
display: flex;
gap: 16px;
align-items: flex-end;
flex-wrap: wrap;
}
.form-sua-user>.fld {
flex: 1 1 0;
min-width: 170px;
}
.form-sua-user>.btn-group {
flex: 0 0 auto;
}
.form-ke {
display: inline-block;
margin: 0 0 0 6px;
}
@media (max-width: 900px) {
.form-nhap .row,
.form-nhap .row.cot-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-nhap:is(.o-2,
.o-3) {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.form-sua-user>.fld {
flex: 1 1 100%;
}
.form-sua-user>.btn-group {
width: 100%;
}
}
@media (max-width: 560px) {
.form-nhap .row,
.form-nhap .row.cot-5 {
grid-template-columns: 1fr;
}
}
/* ===== A12 · TRANG BẢNG LƯƠNG — .bl-* ===== */
.bl-luong {
table-layout: fixed;
width: 100%;
}
.bl-luong th {
vertical-align: middle;
text-align: center;
white-space: nowrap;
font-size: 10px;
}
.bl-luong td.num,
.bl-luong th.num {
text-align: center;
}
.bl-luong td.bl-c-tongluong {
text-align: right;
}
.bl-luong th.bl-c-hoten {
text-align: left;
}
.bl-luong td.bl-c-mohinh {
text-align: center;
}
.bl-luong tr.total td {
background: var(--white);
font-weight: 400;
}
.bl-luong tr.total td[colspan] {
font-weight: 400;
text-align: right;
}
.bl-luong td.bl-c-hoten {
white-space: nowrap;
}
.bl-luong td.bl-c-chetai,
.bl-luong th.bl-c-chetai {
text-align: center;
}
.bl-c-hoten {
width: 14%;
}
.bl-c-mohinh {
width: 4%;
}
.bl-c-chetai {
width: 5%;
}
.bl-c-lcb {
width: 7%;
}
.bl-c-cc {
width: 6%;
}
.bl-c-tn {
width: 6%;
}
.bl-c-tienan {
width: 6%;
}
.bl-c-cong {
width: 4%;
}
.bl-c-phucap {
width: 6%;
}
.bl-c-khac {
width: 6%;
}
.bl-c-tongluong {
width: 8%;
}
.bl-c-bhxh {
width: 9%;
}
.bl-c-ung {
width: 6%;
}
.bl-c-vipham {
width: 5%;
}
.bl-c-thucnhan {
width: 8%;
}
.bl-dept {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 22px;
}
.bl-dept-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-left: 3px solid var(--brand);
background: var(--surface-2);
}
.bl-dept-head .nm {
font-size: 15px;
font-weight: 700;
color: var(--brand);
}
.bl-dept-head .mt {
font-size: 12.5px;
color: var(--muted);
font-weight: 600;
}
.bl-dept .table-scroll {
overflow-x: auto;
}
.bl-dept .bl-luong {
box-shadow: none;
}
.bl-grand-wrap {
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 22px;
}
.bl-grand td {
color: var(--brand);
font-weight: 700;
font-size: 15px;
}
.bl-grand tr.bl-grand-main td[colspan] {
text-align: left;
letter-spacing: 0.3px;
}
.bl-grand td.bl-c-thucnhan {
text-align: right;
}
.bl-grand tr.bl-grand-aux td {
text-align: left;
font-weight: 600;
color: var(--muted);
}
/* ===== A13 · PHIẾU LƯƠNG (HIỂN THỊ) — .payslip ===== */
.payslip {
max-width: 760px;
margin: 0 auto;
background: var(--white);
border: 1px solid var(--border);
border-top: 4px solid var(--brand);
border-radius: 12px;
padding: 40px 46px 34px;
box-shadow: 0 6px 24px rgba(15, 76, 129, 0.08);
--gap-header: 12px;
--dem-doc-o: 7px;
--cao-thanh-nhom: 30px;
--cao-thanh-tongluong: 35px;
--vien-thanh: var(--border);
}
.payslip .cty {
text-align: center;
padding-bottom: 18px;
border-bottom: 2px solid var(--tint);
}
.payslip .cty .name {
font-weight: 700;
font-size: 19px;
letter-spacing: 0.4px;
color: var(--brand);
text-transform: uppercase;
}
.payslip .cty>div:not(.name) {
font-size: 12.5px;
color: var(--muted);
margin-top: 3px;
}
.payslip h2.title {
text-align: center;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.4px;
color: var(--brand);
text-transform: uppercase;
margin: 22px 0 8px;
}
.payslip .emp-name {
text-align: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.4px;
color: var(--ink);
text-transform: uppercase;
margin: 0 0 4px;
}
.payslip table {
box-shadow: none;
margin-top: var(--gap-header);
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
.payslip th,
.payslip td {
border: 0;
padding: var(--dem-doc-o) 4px;
font-size: 14px;
vertical-align: middle;
}
.payslip b {
font-weight: 700;
}
.payslip td:first-child {
color: var(--ink);
}
.payslip td:last-child {
width: 42%;
}
.payslip .pl-info {
position: relative;
text-align: center;
}
.payslip .pl-info .k {
position: absolute;
left: 4px;
font-weight: 400;
color: var(--ink);
}
.payslip tr.sec td:first-child,
.payslip tr.sub td:first-child,
.payslip tr.pl-thuc-nhan td:first-child,
.payslip tr.pl-tong-luong td:first-child {
position: relative;
}
.payslip tr.sec td:first-child::after,
.payslip tr.sub td:first-child::after,
.payslip tr.pl-thuc-nhan td:first-child::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 2px;
background: var(--surface-2);
}
.payslip tr.pl-tong-luong td:first-child::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 2px;
background: var(--brand);
}
.payslip tr.sec td,
.payslip tr.sub td,
.payslip tr.pl-thuc-nhan td {
background: var(--surface-2);
background-clip: padding-box;
color: var(--brand);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.6px;
text-transform: uppercase;
border-top: var(--gap-header) solid var(--white);
border-bottom: 1px solid var(--vien-thanh);
padding-top: calc((var(--cao-thanh-nhom) - 1cap) / 2);
padding-bottom: calc((var(--cao-thanh-nhom) - 1cap) / 2);
text-box: trim-both cap alphabetic;
}
.payslip tr.sec:first-child td {
border-top: 0;
}
.payslip tr.pl-tong-luong td {
background: var(--brand);
background-clip: padding-box;
color: var(--white);
font-weight: 700;
font-size: 16px;
border: 0;
border-top: var(--gap-header) solid var(--white);
padding-top: calc((var(--cao-thanh-tongluong) - 1cap) / 2);
padding-bottom: calc((var(--cao-thanh-tongluong) - 1cap) / 2);
text-box: trim-both cap alphabetic;
}
.payslip .benefit {
margin-top: var(--gap-header);
}
.payslip .benefit tr:first-child td {
border-top: 0;
}
.payslip table.benefit td:last-child {
width: 24%;
}
.payslip tr.note td {
color: var(--muted);
font-weight: 400;
font-size: 11px;
}
.payslip .sign {
display: flex;
justify-content: flex-end;
margin-top: 32px;
text-align: center;
}
.payslip .sign>div {
min-width: 210px;
}
/* Dòng ngày ký + "Xuất lúc" + bảng nối liền — bản MÀN HÌNH; bản in có bộ riêng trong PDF-IN. */
.payslip .ky-ngay {
text-align: right;
margin-top: 16px;
}
.payslip.phu-luc .ky-ngay {
margin-top: 0;
}
.payslip .xuat-luc {
margin-top: 10px;
font-size: 11px;
}
.payslip table.lien-truoc {
margin-top: 0;
}
.payslip.phu-luc {
display: flex;
flex-direction: column;
min-height: 900px;
}
.payslip.phu-luc .pl-footer {
margin-top: auto;
padding-top: 18px;
}
.payslip.phu-luc table {
table-layout: auto;
width: 100%;
}
.payslip.phu-luc td:first-child {
width: 1%;
white-space: nowrap;
vertical-align: top;
padding-right: 16px;
}
.payslip.phu-luc td:last-child {
width: auto;
vertical-align: top;
}
.payslip.phu-luc tr:not(.sec):not(.sub) td {
border-bottom: 1px solid var(--hairline);
}
.payslip.phu-luc tr.sub td {
background: var(--white);
color: var(--muted);
font-size: 11px;
letter-spacing: 0.4px;
border-top: 0;
border-bottom: 1px solid var(--border);
padding: 5px 4px;
}
/* ===== A14 · TRANG QUẢN TRỊ / NGƯỜI DÙNG — .pg-quantri ===== */
.pg-quantri {
--o-0: 2px;
--o-1: 4px;
--o-2: 8px;
--o-3: 12px;
--o-4: 16px;
--o-5: 20px;
--o-6: 24px;
--chu-nhan: 12px;
--chu-phu: 14px;
--chu-than: 16px;
--chu-kpi: 22px;
--chu-h1: 22px;
--hair: var(--border);
--bg: var(--surface-2);
--p: var(--brand-cskh);
--qmut: var(--muted-3);
--qfaint: var(--muted-4);
--qhov: var(--row-hover);
--goldink: var(--acc-3);
--goldbd: var(--acc-4);
--errbg: var(--err-bg-3);
--errbd: var(--err-bd-2);
--bo-vua: 8px;
--bo-tron: 999px;
}
.pg-quantri .headrow {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--o-2) var(--o-6);
margin: 0 0 var(--o-5);
}
.pg-quantri .headrow h1 {
margin: 0;
font-size: var(--chu-h1);
font-weight: 600;
color: var(--p);
letter-spacing: -0.01em;
}
.pg-quantri .headrow .sub {
color: var(--qmut);
font-size: var(--chu-phu);
}
.pg-quantri .tomtat {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--o-3);
margin: 0 0 var(--o-6);
}
.pg-quantri .tt {
background: var(--sf);
border: 1px solid var(--hair);
border-radius: var(--bo-vua);
padding: var(--o-3) var(--o-4);
display: flex;
flex-direction: column;
gap: var(--o-0);
}
.pg-quantri .tt .l {
font-size: var(--chu-nhan);
color: var(--qfaint);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pg-quantri .tt .v {
font-size: var(--chu-kpi);
font-weight: 700;
color: var(--p);
font-variant-numeric: tabular-nums;
line-height: 1.25;
}
.pg-quantri .tt .v.chu {
font-size: var(--chu-than);
font-weight: 600;
line-height: 1.4;
color: var(--goldink);
}
.pg-quantri .tt .d {
font-size: var(--chu-nhan);
color: var(--qmut);
}
.pg-quantri .seclbl {
font-size: var(--chu-nhan);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--qfaint);
margin: var(--o-6) 0 var(--o-2);
display: block;
}
.pg-quantri .seclbl:first-of-type {
margin-top: 0;
}
.pg-quantri .rows {
background: var(--sf);
border: 1px solid var(--hair);
border-radius: var(--bo-vua);
overflow-x: auto;
display: block;
margin: 0;
}
.pg-quantri .rw {
display: grid;
grid-template-columns: 0.4fr 0.9fr 0.9fr 0.8fr 0.6fr 0.6fr 1.3fr 0.6fr;
gap: var(--o-2);
align-items: center;
padding: var(--o-2) var(--o-4);
border-bottom: 1px solid var(--hair);
font-size: var(--chu-phu);
min-width: 760px;
margin: 0;
}
.pg-quantri .rw:last-child {
border-bottom: none;
}
.pg-quantri .rw.hd {
font-size: var(--chu-nhan);
color: var(--qfaint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
position: sticky;
top: 0;
background: var(--sf);
}
.pg-quantri .rw:not(.hd):hover {
background: var(--qhov);
}
.pg-quantri .rw .num {
font-variant-numeric: tabular-nums;
color: var(--qmut);
}
.pg-quantri .rw b {
font-weight: 600;
}
.pg-quantri .rw .note {
color: var(--qmut);
font-size: var(--chu-nhan);
}
.pg-quantri .bdg {
font-size: var(--chu-nhan);
padding: var(--o-0) var(--o-2);
border-radius: var(--bo-tron);
background: var(--bg);
color: var(--qmut);
border: 1px solid var(--hair);
white-space: nowrap;
justify-self: start;
}
.pg-quantri .bdg.ql {
background: var(--goldbg);
border-color: var(--goldbd);
color: var(--goldink);
font-weight: 600;
}
.pg-quantri .bdg.off {
background: var(--errbg);
border-color: var(--errbd);
color: var(--err);
font-weight: 600;
}
.pg-quantri .rong {
background: var(--sf);
border: 1px dashed var(--hair);
border-radius: var(--bo-vua);
padding: var(--o-6) var(--o-5);
text-align: center;
color: var(--qmut);
font-size: var(--chu-phu);
}
.pg-quantri .rong b {
display: block;
color: var(--ink);
font-size: var(--chu-phu);
margin-bottom: var(--o-1);
}
.pg-quantri .hang-cap-quyen {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--o-3);
align-items: end;
}
.pg-quantri .hang-cap-quyen label {
display: block;
}
.pg-quantri .hang-cap-quyen select {
width: 100%;
}
/* ===== A15 · MÀN HÌNH BẤM GIỜ — .bg-* =====
BẢNG BẬC MÀN HÌNH — MOBILE-FIRST, nguồn kích thước DUY NHẤT cho màn bấm giờ + màn đăng
nhập. Gốc là bậc NHỎ NHẤT, ba media min-width nâng dần — đúng chuẩn mobile-first, máy nào
rơi vào bậc nấy, không có khoảng ngang nào vô chủ:
Bậc 1 · 320–359px · iPhone SE đời 1, Android cũ
Bậc 2 · 360–389px · Galaxy A/S 360, iPhone SE 2/3 + 13 mini 375
Bậc 3 · 390–429px · iPhone 12–16 390, Pixel 393, XR/Plus 412–414 ← đúng bản đã duyệt
Bậc 4 · ≥430px · Pro Max 430–440, máy bàn (cột khoá 430)
Giá trị dẫn xuất (kéo nút cưỡi ranh, chừa chỗ trong khối tối) TÍNH BẰNG calc TỪ --cc-nut
ngay tại chỗ dùng — đổi bậc là mọi con số ăn theo, không thể lệch nhau. */
.man-bam-gio,
body.sg-page {
--cc-nut: 144px; /* đường kính nút tròn */
--cc-nut-icon: 27px; /* biểu tượng trong nút */
--cc-nut-chu: 17px; /* nhãn VÀO LÀM / TAN CA */
--cc-nut-phu: 12px; /* dòng giờ dưới nhãn */
--cc-ten: 19px; /* họ tên / tiêu đề đăng nhập */
--cc-le: 16px; /* lề ngang mọi khối */
--cc-chip-chu: 11.5px; /* chữ viên trạng thái */
/* Ba giá trị dùng chung mọi bậc — khai một lần, cấm rải số lặp trong rule: */
--cc-chu-phu: 12.5px; /* chữ phụ: băng thông báo, hướng dẫn, phụ đề */
--cc-chu-nhan: 9.5px; /* nhãn hoa nhỏ: nhãn ô nhập, dòng bản quyền */
--cc-vach: 1px solid var(--cc-vien); /* vạch ngăn khối đáy */
}
@media (min-width: 360px) {
.man-bam-gio,
body.sg-page {
--cc-nut: 156px;
--cc-nut-icon: 29px;
--cc-nut-chu: 18.5px;
--cc-nut-phu: 12.5px;
--cc-ten: 20.5px;
--cc-le: 18px;
--cc-chip-chu: 12px;
}
}
@media (min-width: 390px) {
.man-bam-gio,
body.sg-page {
--cc-nut: 168px;
--cc-nut-icon: 31px;
--cc-nut-chu: 20px;
--cc-nut-phu: 13px;
--cc-ten: 22px;
--cc-le: 20px;
--cc-chip-chu: 12.5px;
}
}
@media (min-width: 430px) {
.man-bam-gio,
body.sg-page {
--cc-nut: 176px;
--cc-nut-icon: 32px;
}
}
/* Bố cục HAI KHỐI: khối tối mang danh tính và hành động, khối sáng là sổ ghi nhận. Nút tròn
ngồi trên đường ranh giữa hai khối — đó là mỏ neo thị giác duy nhất, nên mọi thứ còn lại
xếp trên cùng một trục giữa với nó. */
/* Cột ứng dụng: điện thoại chiếm trọn bề ngang, máy bàn khoá 430px và căn giữa để bố cục
KHÔNG đổi theo khổ màn. Hai viền dọc để trên máy bàn cột không trôi giữa nền trắng. */
/* KHÔNG đặt min-height 100dvh: bản vẽ là một cột cao ĐÚNG bằng nội dung, khối đáy nằm ngay
dưới câu hướng dẫn. Ép cao trọn khung nhìn thì khối đáy bị ghim xuống đáy màn, tách khỏi
nội dung 293px — đo được, và đó là sai lệch so với bản vẽ. */
.man-bam-gio {
max-width: 430px;
margin: 0 auto;
display: flex;
flex-direction: column;
/* Bản vẽ đặt line-height 1.6 ở body; body của phần mềm KHÔNG đặt nên mọi dòng chữ không
khai riêng sẽ rơi về "normal" (~1.2) và lệch chiều cao so với bản vẽ. Khai một lần ở gốc
màn này để mọi thứ bên trong thừa kế đúng, thay vì vá từng thẻ. */
line-height: 1.6;
/* Cao TRỌN khung nhìn nhưng KHÔNG kéo giãn khối nào bên trong — mọi khối giữ đúng chiều cao
bản vẽ, phần dư phía dưới chỉ là nền. Nền đó lấy --cc-sang trùng màu khối đáy, nên khối
đáy trông như chạy thẳng xuống mép màn thay vì đứt ngang rồi hụt một mảng trắng. */
min-height: 100vh;
min-height: 100dvh;
/* KHÔNG viền dọc: trên điện thoại là 2px thừa lòi ra hai mép, trên máy bàn thì nền
--cc-sang của body đã tự lan kín hai bên nên cột không cần viền để tách. */
background: var(--cc-sang);
}
/* Thanh trên dùng CHUNG nền với .bg-ai để hai khối nối liền, không thấy mối nối.
KHÔNG đặt flex-wrap:nowrap — đã đo: nowrap và wrap cho cùng kết quả (98px, không tràn) vì
.topbar nav tự gói, nên nowrap chỉ là rule chết. Với nhân viên nav rỗng nên thanh một hàng
đúng bản vẽ; với admin nav 12 mục thì thanh cao 98px, vẫn liền khối tối. */
.man-bam-gio .topbar,
.sg-top {
gap: 10px;
min-height: 54px;
padding: 0 var(--cc-le);
background: var(--cc-nen-dam);
border-bottom: 1px solid var(--cc-ke-dam);
}
.man-bam-gio .topbar .brand,
.sg-top b {
font-size: 13px;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* Họ tên đã nằm ngay dưới, cỡ 22px, làm tiêu đề của chính màn này — in thêm lần nữa trên
thanh là chữ thừa, và chính chuỗi đó đẩy cụm người dùng xuống hàng thứ hai trên mọi khổ
điện thoại (360–430px). */
.man-bam-gio .topbar .user-box .ten {
display: none;
}
/* height:auto là BẮT BUỘC — .btn khai height:38px cứng, padding không hạ được chiều cao.
Đã đo: thiếu dòng này thì nút vẫn 38px, dày hơn bản vẽ 8px. */
.man-bam-gio .topbar .btn {
height: auto;
padding: 7px 12px;
border: 1px solid var(--cc-vien-tren);
border-radius: 6px;
background: transparent;
color: var(--white);
font-size: 11.5px;
font-weight: 600;
}
/* Băng thông báo nằm TRONG khối tối nên phải lật tông — .flash mặc định của trang quản trị
là nền sáng, đặt nguyên lên đây thì như một mảng trắng vá giữa dải navy. */
/* .sg-alert (đăng nhập) dùng CHUNG rule — một băng thông báo, một nguồn giá trị. */
.man-bam-gio .flash,
.sg-alert {
margin: 0;
padding: 13px var(--cc-le);
border: 0;
border-bottom: 1px solid var(--cc-ke-dam);
border-left: 3px solid;
border-radius: 0;
font-size: var(--cc-chu-phu);
font-weight: 600;
line-height: 1.55;
}
.man-bam-gio .flash.ok {
background: var(--cc-flash-ok-nen);
color: var(--cc-flash-ok-chu);
border-left-color: var(--cc-flash-ok-ray);
}
/* Chữ TRẮNG, không dùng tông hồng: trên nền đỏ mờ thì chữ hồng và nền hồng cùng tông nên câu
báo lỗi chìm hẳn. Thanh dọc đỏ bên trái đã đủ báo hiệu đây là lỗi. */
.man-bam-gio .flash.err,
.sg-alert {
background: var(--cc-flash-er-nen);
color: var(--white);
border-left-color: var(--cc-flash-er-ray);
}
/* .wrap mặc định có max-width 1120px và lề 22px/18px — trên màn này phải về 0, vì khối tối
và khối sáng đều tràn hết bề ngang cột, lề của .wrap sẽ cắt đôi dải màu. */
/* flex:1 để .wrap nuốt trọn chiều cao dư, nhờ đó chân trang bị đẩy xuống CHẠM đáy màn thay vì
lửng lơ giữa một mảng xám. Phần dư đó được .bg-ai bên trong hấp thụ, xem chú thích ở đó. */
.man-bam-gio .wrap {
flex: 1;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.bg-man {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
background: var(--white);
}
/* padding-bottom 106px chừa chỗ cho nửa trên của nút tròn cưỡi lên ranh giới.
CHIA CHIỀU CAO DƯ: bản vẽ là khung cứng 390×544, điện thoại cao ~740px sau khi trừ thanh
địa chỉ — dư ~200px mà bản vẽ không định nghĩa. Dồn hết phần dư vào ĐÂY, tức vào nền tối:
khoảng trống trên nền tối chỉ là một mảng màu liền mạch, còn để nó rơi xuống vùng trắng thì
mắt đọc ngay ra là trang bị hụt. justify-content:flex-end ghim danh tính sát mép dưới khối
tối nên nó luôn nằm ngay trên nút, không trôi lên giữa.
Mọi kích thước bên trong GIỮ NGUYÊN bản vẽ: nút 168px, chip 36px, cỡ chữ và đệm không đổi. */
/* CHIA ĐỀU TỪ GỐC: danh tính đứng GIỮA vùng tối còn lại (giữa thanh trên và nút) — không
dán xuống mép dưới. Dán mép là nguồn của "lệch trên": tên nép sát nút, còn toàn bộ khoảng
trống phình thành một mảng tối rỗng đè phía trên. flex:1 = vùng tối và vùng trắng nhận
phần dư BẰNG NHAU, đường ranh (và tâm nút cưỡi trên nó) về giữa màn. */
.bg-ai {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 26px var(--cc-le) calc(var(--cc-nut) / 2 + 22px);
background: linear-gradient(178deg, var(--cc-nen-dam) 0%, var(--cc-nen-dam-2) 100%);
color: var(--white);
text-align: center;
}
.bg-ai b {
display: block;
font-size: var(--cc-ten);
font-weight: 700;
letter-spacing: -0.026em;
line-height: 1.2;
}
/* line-height PHẢI khai tường minh: body của phần mềm không đặt line-height nên dòng này rơi
về "normal" (~1.2) và khối tối tụt 4px so với bản vẽ, kéo mọi mốc bên dưới lệch theo. */
.bg-ai span {
display: block;
margin-top: 6px;
font-size: var(--cc-chu-phu);
line-height: 1.6;
color: var(--cc-chu-mo);
}
/* -84px = đúng NỬA đường kính nút (168 / 2). Kéo ít hơn thì nút lệch xuống khối sáng, kéo
nhiều hơn thì lệch lên khối tối — con số này buộc tâm nút trùng đường ranh. */
.bg-than {
display: flex;
justify-content: center;
margin: calc(var(--cc-nut) / -2) 0 0;
padding-bottom: 20px;
}
.bg-nut {
display: grid;
place-items: center;
align-content: center;
gap: 2px;
width: var(--cc-nut);
height: var(--cc-nut);
border: 0;
border-radius: 50%;
color: var(--white);
font: inherit;
cursor: pointer;
/* Vành trắng 9px cắt gọn nút qua CẢ HAI nền tối và sáng, kèm đường kẻ xám 1px BAO NGOÀI
vành trắng: nửa dưới vành nằm trên nền trắng, không có kẻ thì vành tan vào nền và vòng
tròn ngoài mất một nửa — lỗi USER chỉ ra trên máy thật 10/08/2026. */
box-shadow: 0 0 0 9px var(--white), 0 0 0 10px var(--cc-tat-vien),
0 16px 30px -10px var(--cc-bong-nut);
transition: transform 0.16s ease, filter 0.16s ease;
}
.bg-nut svg {
width: var(--cc-nut-icon);
height: var(--cc-nut-icon);
margin-bottom: 3px;
}
.bg-nut .t {
font-size: var(--cc-nut-chu);
font-weight: 700;
letter-spacing: 0.05em;
}
.bg-nut .s {
font-size: var(--cc-nut-phu);
font-weight: 600;
opacity: 0.86;
font-variant-numeric: tabular-nums;
}
.bg-vao {
background: var(--cc-vao);
}
.bg-ra {
background: var(--cc-ra);
}
/* .bg-tat (ĐÃ XONG) nền xanh --cc-vao (USER chốt 13/08 — trạng thái thành công, cùng họ nút
VÀO LÀM); vẫn not-allowed vì hết việc để bấm. */
.bg-tat {
background: var(--cc-vao);
color: var(--white);
cursor: not-allowed;
box-shadow: 0 0 0 9px var(--white), 0 0 0 10px var(--cc-tat-vien);
}
/* .bg-khoa (BỊ CHẶN) nền sáng. Vành trong 2px là BẮT BUỘC: nền nút vô hiệu và vành trắng
bao quanh gần cùng độ sáng, thiếu vành trong thì nút thành một đĩa nhạt không rõ mép. */
.bg-khoa {
background: var(--cc-sang);
color: var(--muted);
cursor: not-allowed;
box-shadow: 0 0 0 9px var(--white), 0 0 0 10px var(--cc-tat-vien),
inset 0 0 0 2px var(--cc-tat-vien);
}
.bg-khoa .t {
color: var(--ink);
}
.bg-nut:not(:disabled):hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
/* --ink đạt 12,8:1 với vành trắng. KHÔNG dùng --acc-4 (#f0bf71): chỉ 1,69:1, trượt ngưỡng
3:1 của WCAG 2.1 SC 1.4.11 — người dùng bàn phím sẽ không thấy nút nào đang được chọn. */
.bg-nut:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 5px;
}
/* MỖI VIÊN MỘT HÀNG, luôn luôn. Xếp cột là bố cục xác định — để tự xuống hàng thì số hàng
đổi theo độ dài chữ, cùng một màn hình mà hôm nay một kiểu, mai một kiểu. */
/* Vùng GIỮA của nửa trắng: nhận phần dư ngang hàng với .bg-ai (flex:1 mỗi bên) và căn cụm
viên trạng thái + hướng dẫn vào chính giữa phần nó được chia — nội dung không dán mép. */
.bg-giua {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.bg-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 var(--cc-le);
}
.bg-chip .ch {
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
padding: 8px 15px;
border: 1px solid;
border-radius: 999px;
font-size: var(--cc-chip-chu);
font-weight: 600;
line-height: 1.45;
text-align: left;
font-variant-numeric: tabular-nums;
}
.bg-chip .ch::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.bg-chip .ok {
background: var(--cc-ok-nen);
border-color: var(--cc-ok-vien);
color: var(--cc-ok);
}
.bg-chip .la {
background: var(--cc-la-nen);
border-color: var(--cc-la-vien);
color: var(--cc-la);
}
.bg-chip .no {
background: var(--cc-no-nen);
border-color: var(--cc-no-vien);
color: var(--muted);
}
.bg-chip .er {
background: var(--cc-er-nen);
border-color: var(--cc-er-vien);
color: var(--cc-er);
}
.bg-hd {
margin: 0;
padding: 16px calc(var(--cc-le) + 2px) 20px;
color: var(--muted);
font-size: var(--cc-chu-phu);
line-height: 1.6;
text-align: center;
text-wrap: pretty;
}
/* Giờ làm việc + tên công ty hợp thành MỘT khối đáy: cùng nền, cùng lề, cách nhau một vạch.
CẤM margin-top:auto — ghim xuống đáy khung nhìn là tách khối đáy khỏi câu hướng dẫn 293px,
sai bản vẽ. Bản vẽ đặt nó NGAY dưới câu hướng dẫn. */
/* Hai dòng nằm trong MỘT hộp: vạch trên + đệm 12px, hai dòng cách nhau 4px, đệm dưới 14px.
Vì .bg-ref và .foot là hai thẻ ở hai nhánh DOM khác nhau, hộp đó được ghép lại bằng cách
chia đôi bộ đệm: .bg-ref giữ vạch trên và đệm trên, .foot giữ khoảng cách 4px và đệm dưới.
Cả hai PHẢI khai line-height tường minh — body của phần mềm không đặt, để trống là lệch. */
.bg-ref {
margin: 0;
padding: 12px var(--cc-le) 0;
background: var(--cc-sang);
border-top: var(--cc-vach);
color: var(--muted);
font-size: 12px;
line-height: 1.6;
font-variant-numeric: tabular-nums;
text-align: center;
}
.man-bam-gio .foot {
margin: 4px 0 0;
padding: 0 var(--cc-le) 14px;
background: var(--cc-sang);
color: var(--muted-2);
font-size: var(--cc-chu-nhan);
line-height: 1.6;
letter-spacing: 0.1em;
}
/* Phòng chưa khai giờ làm việc thì .bg-ref không in ra — khi đó .foot phải tự mang vạch trên
và đệm trên, nếu không khối đáy dính liền vào nền trắng phía trên. */
.man-bam-gio:not(:has(.bg-ref)) .foot {
margin-top: 0;
padding-top: 12px;
border-top: var(--cc-vach);
}
/* ----- MÀN ĐĂNG NHẬP — .sg-* -----
Nằm CHUNG A15 với màn bấm giờ: hai màn nhân viên là MỘT hệ giao diện, auth.php chỉ
tới đây, không còn