/* ============================================================================
   QUẢN LÝ NHÂN SỰ — HỆ THỐNG GIAO DIỆN
   ----------------------------------------------------------------------------
   Một bộ dùng cho cả máy tính và điện thoại. Không có bản "mobile" riêng:
   cùng một trang, bố cục tự đổi theo bề ngang màn hình.

   Điểm gãy:  ≤ 720px  điện thoại — thanh dưới, thẻ xếp dọc, bảng thành phiếu
              ≤ 1080px máy tính bảng — thanh trái thu về biểu tượng
              > 1080px máy tính — thanh trái đầy đủ

   Màu: khai báo bằng biến, đổi sang nền tối chỉ là đổi bộ biến.
   ========================================================================== */

:root {
  --nen:        #f1f5f9;
  --the:        #ffffff;
  --the-2:      #f8fafc;
  --vien:       #e2e8f0;
  --vien-dam:   #cbd5e1;
  --chu:        #0f172a;
  --chu-2:      #475569;
  --chu-3:      #94a3b8;

  --chinh:      #0f766e;
  --chinh-dam:  #115e59;
  --chinh-nhat: #ecfdf5;
  --chinh-vien: #99f6e4;

  --xanh:       #059669;
  --xanh-nhat:  #ecfdf5;
  --vang:       #b45309;
  --vang-nhat:  #fffbeb;
  --do:         #dc2626;
  --do-nhat:    #fef2f2;
  --tim:        #7c3aed;
  --tim-nhat:   #f5f3ff;

  --bong:       0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --bong-2:     0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --bong-3:     0 20px 45px rgba(15,23,42,.18);

  --r:          10px;
  --r-2:        14px;
  --rail:       220px;
  --dau-trang:  48px;

  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

[data-nen="toi"] {
  --nen: #0b1120; --the: #111827; --the-2: #0f172a;
  --vien: #1f2937; --vien-dam: #334155;
  --chu: #e5e7eb; --chu-2: #9ca3af; --chu-3: #6b7280;
  --chinh: #2dd4bf; --chinh-dam: #14b8a6; --chinh-nhat: #042f2e; --chinh-vien: #134e4a;
  --xanh: #34d399; --xanh-nhat: #064e3b;
  --vang: #fbbf24; --vang-nhat: #451a03;
  --do: #f87171; --do-nhat: #450a0a;
  --tim: #a78bfa; --tim-nhat: #2e1065;
  --bong: 0 1px 2px rgba(0,0,0,.4);
  --bong-2: 0 4px 12px rgba(0,0,0,.5);
  --bong-3: 0 20px 45px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--chinh); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--vien-dam); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

/* ===================== KHUNG ỨNG DỤNG ===================== */
#ung-dung { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
/* Cột nội dung không được nở theo min-content của con (lưới auto-fit, bảng rộng…) — nở là cả trang
   tràn sang phải, phần bên phải bị cắt (3.40) */
#ung-dung > div { min-width: 0; }

#rail {
  background: var(--the); border-right: 1px solid var(--vien);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30;
}
.rail-dau {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--vien); min-height: var(--dau-trang);
}
.rail-dau .huy-hieu {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--chinh), var(--tim));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
.rail-dau b { font-size: 13.5px; display: block; line-height: 1.25; }
.rail-dau small { color: var(--chu-3); font-size: 11px; }

/* Menu dài hơn màn hình thì phải nhìn ra là còn cuộn được nữa, không thì
   người dùng tưởng nhóm cuối cùng là hết — đúng ca "không thấy Ca làm việc". */
#rail nav, #rail-menu { flex: 1; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
#rail nav::-webkit-scrollbar, #rail-menu::-webkit-scrollbar { width: 8px; }
#rail nav::-webkit-scrollbar-thumb, #rail-menu::-webkit-scrollbar-thumb {
  background: var(--vien-dam); border-radius: 4px;
  border: 2px solid var(--the);
}
#rail nav::-webkit-scrollbar-thumb:hover, #rail-menu::-webkit-scrollbar-thumb:hover { background: var(--chu-3); }
/* KHÔNG đặt lại position ở đây: dòng này trước ghi "position: relative" và nó
   đè lên "position: sticky" khai ở trên (cùng độ ưu tiên, dòng sau thắng), nên
   trang nào có bảng dài là cuộn xuống menu trôi mất theo. Sticky cũng tự làm
   gốc toạ độ cho phần tử con đặt tuyệt đối, nên chẳng cần relative. */
/* dải mờ ở đáy: còn mục bên dưới thì thấy ngay */
#rail-menu.con-nua, #rail nav.con-nua { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.rail-nhom { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chu-3); padding: 14px 10px 6px; font-weight: 700; }
.rail-muc {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; color: var(--chu-2); text-align: left; font-size: 13.5px;
  transition: background .12s, color .12s;
}
.rail-muc:hover { background: var(--the-2); color: var(--chu); }
.rail-muc.on { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
.rail-muc .bt { width: 18px; text-align: center; font-size: 15px; flex: none; }
.rail-muc .so { margin-left: auto; background: var(--do); color: #fff; font-size: 10.5px;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.rail-chan { padding: 10px; border-top: 1px solid var(--vien); font-size: 11px; color: var(--chu-3); }

/* ===================== THANH TRÊN ===================== */
#dau-trang {
  position: sticky; top: 0; z-index: 25; background: var(--the);
  border-bottom: 1px solid var(--vien); min-height: var(--dau-trang);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
#dau-trang .tim-nhanh { flex: 1; max-width: 460px; position: relative; }
#dau-trang .tim-nhanh input {
  width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--the-2); outline: none;
}
#dau-trang .tim-nhanh input:focus { border-color: var(--chinh); background: var(--the); }
#dau-trang .tim-nhanh .bt { position: absolute; left: 11px; top: 8px; color: var(--chu-3); }
.dau-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Đồng hồ phiên xem lương -----------------------------------------------
   Mở khoá lương xong là có một cửa sổ ngắn rồi tự đóng. Trước đây không ai
   biết còn mấy phút, đang xem dở thì bảng trắng ra đòi mật khẩu. Nay đếm
   ngược ngay cạnh nút tải lại, bấm vào là khoá luôn cho yên tâm khi rời máy. */
.chip-khoa {
  display: inline-flex; align-items: center; gap: 5px; height: 28px;
  padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--xanh); background: var(--xanh-nhat); color: var(--xanh);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap;
}
.chip-khoa:hover { filter: brightness(.96); }
.chip-khoa .ck-bt { font-size: 12.5px; }
/* Còn dưới một phút thì chuyển vàng và nhấp nháy nhẹ — đủ để liếc thấy */
.chip-khoa.sap { border-color: var(--vang); background: var(--vang-nhat); color: var(--vang);
  animation: ck-nhay 1s ease-in-out infinite; }
.chip-khoa.dong { border-color: var(--vien-dam); background: var(--the-2); color: var(--chu-2);
  cursor: default; animation: none; }
@keyframes ck-nhay { 50% { opacity: .55; } }
@media (max-width: 640px) { .chip-khoa { padding: 0 8px; font-size: 11.5px; } }

.nguoi-dung {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px;
  border: 1px solid var(--vien); border-radius: 999px; background: var(--the); cursor: pointer;
}
.nguoi-dung:hover { background: var(--the-2); }
.chu-cai {
  position: relative; overflow: hidden;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--chinh); color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
}
.chu-cai i { font-style: normal; }
/* Có ảnh thì ảnh phủ kín, chữ cái nằm dưới làm nền lúc ảnh chưa về */
.chu-cai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nguoi-dung .ten { font-size: 13px; font-weight: 600; line-height: 1.1; }
.nguoi-dung .vai { font-size: 10.5px; color: var(--chu-3); }

/* ===================== NỘI DUNG ===================== */
#than { padding: 12px 16px 104px; max-width: 1560px; }   /* đáy chừa bong bóng chat (56px + 30px) — cuối trang không bị đè */
.trang-dau { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.trang-dau h1 { font-size: 19px; }
.trang-dau p { margin: 1px 0 0; color: var(--chu-2); font-size: 12.5px; }
.trang-dau .viec { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================== THẺ ===================== */
.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-2);
  box-shadow: var(--bong); overflow: hidden;
}
.the + .the { margin-top: 10px; }
.the-dau {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--vien); background: var(--the-2);
}
.the-dau h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-2); }
.the-dau .viec { margin-left: auto; display: flex; gap: 8px; }
.the-than { padding: 12px 14px; }
.the-than.khit { padding: 0; }

.luoi { display: grid; gap: 10px; }
.luoi.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.luoi.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.luoi.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.luoi.trai-phai { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }

/* Ô số liệu */
.o-so {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-2);
  padding: 10px 12px; box-shadow: var(--bong);
}
/* Nhãn của ô số trùng tên lớp với cái NHÃN dạng viên thuốc (.nhan) nên bị ăn
   nền và viền của nó — trên ô nhấn mạnh thì thành chữ trắng trên nền trắng,
   đọc không ra. Trả nó về đúng một dòng chữ. */
.o-so .nhan { display: block; background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 11.5px; color: var(--chu-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.o-so .so { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 1px; }
.o-so .phu { font-size: 11.5px; color: var(--chu-2); margin-top: 1px; }
.o-so.nhan-manh { background: linear-gradient(135deg, var(--chinh), var(--chinh-dam)); border-color: transparent; color: #fff; }
.o-so.nhan-manh .nhan, .o-so.nhan-manh .phu { color: rgba(255,255,255,.85); }

/* ===================== NÚT ===================== */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--vien); background: var(--the); color: var(--chu);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.nut:hover { background: var(--the-2); border-color: var(--vien-dam); }
.nut:active { transform: translateY(1px); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; font-weight: 600; }
.nut.chinh:hover { background: var(--chinh-dam); }
.nut.nguy { background: var(--do); border-color: var(--do); color: #fff; }
.nut.cam  { background: var(--cam, #d97706); border-color: var(--cam, #d97706); color: #fff; }
/* Ô nhập tiền: số dóng phải, chữ số đều nhau — đọc 35.000.000 không phải đếm */
.o-tien { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.nut.phang { border-color: transparent; background: none; }
.nut.phang:hover { background: var(--the-2); }
.nut.nho { height: 30px; padding: 0 10px; font-size: 12.5px; }
.nut.tron { width: 36px; padding: 0; border-radius: 50%; }
.nhom-nut { display: inline-flex; border: 1px solid var(--vien); border-radius: 9px; overflow: hidden; }
.nhom-nut .nut { border: 0; border-radius: 0; }
.nhom-nut .nut + .nut { border-left: 1px solid var(--vien); }
.nhom-nut .nut.on { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }

/* ===================== TAB ===================== */
.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--vien); overflow-x: auto; margin-bottom: 8px; }
/* 3.20: tab nhỏ lại (12.5px, đệm 5×10) — màn nhiều tab hiện đủ trên một hàng, nhường chỗ cho nội dung */
.tab button {
  border: 0; background: none; padding: 5px 10px; cursor: pointer; white-space: nowrap;
  color: var(--chu-2); font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab button:hover { color: var(--chu); }
/* Tab đang chọn có NỀN chứ không chỉ đổi màu chữ: trên màn sáng, chữ xanh
   nhạt cạnh chữ xám đen rất khó nhận ra đang đứng ở tab nào. */
.tab button.on { color: var(--chinh); border-bottom-color: var(--chinh); font-weight: 600;
  background: var(--chinh-nhat); border-radius: 9px 9px 0 0; }

/* ===================== BẢNG ===================== */
.bang-cuon { overflow-x: auto; }
table.bang { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bang th {
  text-align: left; padding: 6px 10px; background: var(--the-2); color: var(--chu-2);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1px solid var(--vien); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.bang th.xep { cursor: pointer; user-select: none; }
table.bang th.xep:hover { color: var(--chinh); }
table.bang td { padding: 6px 10px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
table.bang tbody tr:hover { background: var(--the-2); }
table.bang tbody tr.bam { cursor: pointer; }
table.bang .so { text-align: right; font-variant-numeric: tabular-nums; }
table.bang .ma { font-family: var(--mono); font-size: 12px; color: var(--chu-2); }
.bang-trong { padding: 24px 14px; text-align: center; color: var(--chu-3); }
.bang-trong .bt { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

/* ===================== NHÃN TRẠNG THÁI ===================== */
.nhan {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--the-2); color: var(--chu-2);
  border: 1px solid var(--vien); white-space: nowrap;
}
.nhan.xanh { background: var(--xanh-nhat); color: var(--xanh); border-color: transparent; }
.nhan.vang { background: var(--vang-nhat); color: var(--vang); border-color: transparent; }
.nhan.do   { background: var(--do-nhat);   color: var(--do);   border-color: transparent; }
.nhan.lam  { background: var(--chinh-nhat);color: var(--chinh);border-color: transparent; }
.nhan.tim  { background: var(--tim-nhat);  color: var(--tim);  border-color: transparent; }
.nhan.cam  { background: #ffedd5; color: #c2410c; border-color: transparent; }

/* ===================== Ô NHẬP ===================== */
.o { margin-bottom: 9px; }
.o > label { display: block; font-size: 12px; font-weight: 600; color: var(--chu-2); margin-bottom: 5px; }
.o > label .bb { color: var(--do); }
.o input, .o select, .o textarea, input.o-nhap, select.o-nhap {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--vien); background: var(--the); outline: none;
}
.o textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 84px; line-height: 1.55; }
.o input:focus, .o select:focus, .o textarea:focus { border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nhat); }
.o input:disabled, .o select:disabled { background: var(--the-2); color: var(--chu-2); }
.o .goi-y { font-size: 11.5px; color: var(--chu-3); margin-top: 4px; }
.o.loi input, .o.loi select { border-color: var(--do); }
.o.loi .goi-y { color: var(--do); }
.hang { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chon-dong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.chon-dong input { width: 16px; height: 16px; accent-color: var(--chinh); }

/* ===================== HỘP THOẠI ===================== */
.man-che {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 100; padding: 16px; animation: hien .12s ease;
  /* Cột lưới KHÔNG được rộng hơn màn hình. Mặc định grid cho ô rộng bằng nội
     dung nhỏ nhất, nên một bảng rộng trong hộp thoại đẩy cả hộp ra ngoài mép
     phải — trên điện thoại là mất luôn nút ✕ và hàng nút dưới đáy. */
  grid-template-columns: minmax(0, 1fr);
}
.man-che.lop2 { z-index: 120; background: rgba(15,23,42,.45); }
@keyframes hien { from { opacity: 0 } }
.hop {
  background: var(--the); border-radius: 16px; box-shadow: var(--bong-3);
  width: min(720px, 100%); max-width: 100%; min-width: 0; box-sizing: border-box;
  max-height: 88vh; max-height: min(88vh, calc(100svh - 24px));
  display: flex; flex-direction: column; overflow: hidden; justify-self: center;
  animation: len .16s cubic-bezier(.2,.8,.3,1);
}
.hop.rong { width: min(1080px, 100%); }
.hop.hep  { width: min(460px, 100%); }
@keyframes len { from { transform: translateY(12px) scale(.99); opacity: 0 } }
.hop-dau {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--vien); flex: none;
}
.hop-dau > div:first-child { min-width: 0; }
.hop-dau h3 { overflow-wrap: anywhere; }
.hop-dau .dong { flex: none; }
.hop-dau h3 { font-size: 15.5px; }
.hop-dau .phu { font-size: 12px; color: var(--chu-3); margin-top: 2px; }
.hop-dau .dong { margin-left: auto; }
/* Nút đóng hộp: to, dễ bấm — máy tính là vòng tròn 40px, điện thoại là nút "Đóng ✕" có chữ */
.hop-dau .nut.dong { width: 40px; height: 40px; font-size: 20px; line-height: 1; border: 1px solid var(--vien); background: var(--the-2); color: var(--chu-2); }
.hop-dau .nut.dong:hover { background: var(--do-nhat, #fee2e2); color: var(--do); border-color: var(--do); }
@media (max-width: 600px) {
  .hop-dau .nut.dong { width: auto; height: 36px; border-radius: 10px; padding: 0 12px; font-size: 13.5px; font-weight: 650; }
  .hop-dau .nut.dong::before { content: "Đóng "; }
}
/* Thân hộp cuộn cả hai chiều: bảng rộng thì cuộn ngang TRONG hộp, không đẩy
   hộp rộng ra; min-height 0 để thân co lại nhường chỗ cho đầu và chân hộp. */
.hop-than { padding: 14px; overflow: auto; flex: 1 1 auto; min-height: 0; min-width: 0;
  -webkit-overflow-scrolling: touch; }
/* Ảnh trong hộp thoại không bao giờ được đẩy hộp rộng ra ngoài màn hình */
.hop-than img { max-width: 100%; height: auto; }
.hop-chan {
  display: flex; gap: 9px; justify-content: flex-end; padding: 13px 18px;
  border-top: 1px solid var(--vien); background: var(--the-2); flex-wrap: wrap; flex: none;
}
.hop-chan .trai { margin-right: auto; }

/* ===================== VÙNG KÉO THẢ TỆP ===================== */
.tha-tep {
  border: 2px dashed var(--vien-dam); border-radius: 14px; background: var(--the-2);
  padding: 30px 20px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s, transform .06s;
}
.tha-tep:hover { border-color: var(--chinh); background: var(--chinh-nhat); }
.tha-tep:active { transform: scale(.995); }
.tha-tep input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tha-tep .bt-lon { font-size: 34px; line-height: 1; display: block; margin-bottom: 10px; opacity: .8; }
.tha-tep .loi-moi { font-size: 15px; font-weight: 600; }
.tha-tep .goi { font-size: 12.5px; color: var(--chu-3); margin-top: 5px; }
.tha-tep .nut { margin-top: 12px; pointer-events: none; }

/* Đang rê tệp qua: cả vùng sáng lên để biết thả được */
.tha-tep.dang-keo {
  border-color: var(--chinh); background: var(--chinh-nhat);
  border-style: solid; box-shadow: 0 0 0 4px var(--chinh-nhat);
}
.tha-tep.dang-keo .bt-lon { transform: translateY(-3px); }

/* Đã chọn tệp: đổi hẳn sang thẻ thông tin, không còn giống ô trống */
.tha-tep.co-tep {
  border-style: solid; border-color: var(--xanh); background: var(--xanh-nhat);
  text-align: left; padding: 14px 16px; display: flex; align-items: center; gap: 13px;
}
.tha-tep.co-tep .bt-lon { margin: 0; font-size: 27px; }
.tha-tep.co-tep .ten-tep { font-weight: 650; font-size: 14px; word-break: break-all; }
.tha-tep.co-tep .co-tep-phu { font-size: 12px; color: var(--chu-2); margin-top: 2px; }
.tha-tep .doi-tep {
  margin-left: auto; flex: none; position: relative; z-index: 2; pointer-events: auto;
}
.tha-tep.loi-tep { border-color: var(--do); background: var(--do-nhat); }

@media (max-width: 720px) {
  .tha-tep { padding: 24px 14px; }
  .tha-tep .bt-lon { font-size: 30px; }
}

/* ===================== NHẮN NHANH ===================== */
#khay-nhan { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.nhan-nhanh {
  background: var(--chu); color: var(--nen); padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--bong-3); font-size: 13.5px; max-width: 90vw; animation: len .16s;
}
.nhan-nhanh.loi { background: var(--do); color: #fff; }
.nhan-nhanh.xong { background: var(--xanh); color: #fff; }

/* ===================== LỜI NHẮC TRONG TRANG ===================== */
.loi-nhac {
  display: flex; gap: 9px; padding: 9px 12px; border-radius: var(--r);
  background: var(--chinh-nhat); border: 1px solid var(--chinh-vien); font-size: 13px; line-height: 1.55;
}
.loi-nhac.canh { background: var(--vang-nhat); border-color: transparent; }
.loi-nhac.nguy { background: var(--do-nhat); border-color: transparent; }
.loi-nhac.xong { background: var(--xanh-nhat); border-color: transparent; }
.loi-nhac .bt { font-size: 16px; line-height: 1.2; }

/* ===================== ĐĂNG NHẬP ===================== */
#man-dang-nhap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 20% -10%, var(--chinh-nhat), var(--nen));
}
.hop-dang-nhap {
  width: min(400px, 100%); background: var(--the); border: 1px solid var(--vien);
  border-radius: 18px; box-shadow: var(--bong-2); padding: 28px;
}
.hop-dang-nhap .hieu {
  width: auto; min-width: 48px; padding: 0 12px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  justify-self: start; letter-spacing: .04em;
  background: linear-gradient(140deg, var(--chinh), var(--tim));
  color: #fff; display: grid; place-items: center; font-weight: 800;
}
.hop-dang-nhap h1 { font-size: 20px; }
.hop-dang-nhap p.phu { color: var(--chu-2); font-size: 13px; margin: 4px 0 20px; }

/* ===================== THANH DƯỚI (ĐIỆN THOẠI) ===================== */
#thanh-duoi { display: none; }
/* THANH NHANH trên đầu trang (3.32) — máy tính: 6 ô giữa logo và góc phải, cùng bộ với thanh dưới điện thoại */
#thanh-nhanh { flex: 0 1 auto; margin: 0 auto; min-width: 0; display: flex; justify-content: safe center; gap: 2px; align-self: stretch; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#thanh-nhanh::-webkit-scrollbar { display: none; }
#dau-trang .nguoi-dung { flex: none; } #dau-trang .nguoi-dung .ten, #dau-trang .nguoi-dung .vai { white-space: nowrap; }
@media (max-width: 1000px) { #thanh-nhanh button { padding: 4px 7px; } }
#thanh-nhanh button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 13px; border-radius: 10px;
  font: inherit; font-size: 10.5px; color: var(--chu-3); cursor: pointer; position: relative; white-space: nowrap; line-height: 1.2; }
#thanh-nhanh button .bt { font-size: 19px; line-height: 1.15; }
#thanh-nhanh button:hover { background: var(--the-2); color: var(--chu); }
#thanh-nhanh button.on { color: var(--chinh); background: var(--chinh-nhat); font-weight: 650; }
#thanh-nhanh .hh { position: absolute; top: 0; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
@media (max-width: 700px) { #thanh-nhanh { display: none; } }
/* bảng ô to của một nhóm (Của tôi · Quản lý · HCNS · Thêm) */
.nn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nn-nhom { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--chu-3); margin: 6px 2px 0; }
.nn-o { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--vien); border-radius: 13px; background: var(--the-2);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--chu); cursor: pointer; text-align: center; position: relative; line-height: 1.25; min-height: 78px; justify-content: center; }
.nn-o .bt { font-size: 28px; line-height: 1; } .nn-o:hover { border-color: var(--chinh); background: var(--chinh-nhat); } .nn-o:active { transform: translateY(1px); }
.nn-o .hh { position: absolute; top: 6px; right: 6px; margin: 0; }
@media (max-width: 700px) { .nn-luoi { grid-template-columns: 1fr 1fr; } .nn-o { min-height: 84px; font-size: 13px; } }

/* ===================== ĐIỆN THOẠI ===================== */
@media (max-width: 1080px) {
  :root { --rail: 62px; }
  .rail-dau b, .rail-dau small, .rail-muc .nh, .rail-nhom, .rail-chan { display: none; }
  .rail-muc { justify-content: center; padding: 10px 0; }
  .luoi.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .luoi.trai-phai { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #ung-dung { grid-template-columns: 1fr; }
  #rail { display: none; }
  /* Chừa chỗ cho thanh dưới (cao ~56px) cộng vạch home của iPhone, nếu không
     thì dòng cuối mọi trang bị che */
  #than { padding: 10px 10px calc(74px + env(safe-area-inset-bottom, 0px)); }
  #dau-trang { padding: 0 12px; }
  #dau-trang .tim-nhanh { max-width: none; }
  .nguoi-dung .ten, .nguoi-dung .vai { display: none; }
  .nguoi-dung { padding: 4px; border: 0; }
  .luoi.c2, .luoi.c3, .luoi.c4 { grid-template-columns: 1fr; }
  /* Ô số liệu thì xếp hai cột cho đỡ phải cuộn — bốn ô gọn trong hai hàng */
  .luoi.c2:has(.o-so), .luoi.c3:has(.o-so), .luoi.c4:has(.o-so) {
    grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
  }
  .o-so .so { font-size: 19px; }
  .trang-dau h1 { font-size: 17px; }
  .trang-dau .viec { width: 100%; margin-left: 0; }
  /* Điện thoại: hộp thành tấm kéo từ đáy, cao tối đa gần hết màn hình THẬT
     (svh/dvh — trừ thanh địa chỉ), chừa vạch home của iPhone. */
  .hop { max-height: 94vh; max-height: calc(100dvh - 10px); width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; }
  .man-che { padding: 0; align-items: flex-end; }
  .hop-dau { padding: 12px 14px; }
  .hop-than { padding: 12px; }
  .hop-chan { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hop-chan .nut { flex: 1; min-width: 0; }

  /* Bảng thành phiếu: mỗi dòng một khối, có nhãn cột ở trước */
  table.bang.phieu, table.bang.phieu tbody, table.bang.phieu tr, table.bang.phieu td { display: block; width: 100%; }
  table.bang.phieu thead { display: none; }
  table.bang.phieu tr {
    border: 1px solid var(--vien); border-radius: var(--r); margin-bottom: 7px;
    padding: 4px 9px; background: var(--the);
  }
  table.bang.phieu td { border: 0; padding: 3px 0; display: flex; gap: 10px; align-items: baseline;
    text-align: left; justify-content: flex-start; }
  /* Nhãn chỉ chiếm ĐÚNG BỀ RỘNG CỦA NÓ (tối thiểu 76px, tối đa 40%) chứ không
     ăn cứng 40% — dán cứng thì tên dự án dài bị bóp thành năm dòng trong khi
     nửa bên phải bỏ trống. */
  table.bang.phieu td::before {
    content: attr(data-nhan); flex: 0 0 auto; min-width: 76px; max-width: 40%;
    color: var(--chu-3);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  }
  table.bang.phieu td.so, table.bang.phieu td.phai, table.bang.phieu td.giua {
    text-align: left; justify-content: flex-start;
  }
  table.bang.phieu td.chinh { font-weight: 650; font-size: 14.5px; }
  table.bang.phieu td.chinh::before { display: none; }

  /* Cột phụ: trên điện thoại ẩn đi cho phiếu ngắn lại, máy tính vẫn hiện đủ */
  .an-dt { display: none !important; }

  #thanh-duoi {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--the); border-top: 1px solid var(--vien);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  #thanh-duoi button {
    border: 0; background: none; display: grid; gap: 2px; justify-items: center; min-width: 0;
    padding: 5px 0; color: var(--chu-3); font-size: 10.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #thanh-duoi button .bt { font-size: 19px; }
  #thanh-duoi button.on { color: var(--chinh); font-weight: 650; }
}

/* ===================== IN ===================== */
@media print {
  #rail, #dau-trang, #thanh-duoi, .trang-dau .viec, .nut { display: none !important; }
  #ung-dung { display: block; }
  #than { padding: 0; max-width: none; }
  .the { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
  /* Bảng rộng: khung cuộn phải mở hết ra, cột dính (sticky) trả về tĩnh, nếu
     không giấy chỉ in được phần đang nhìn thấy trên màn hình. */
  .bang-cuon { overflow: visible !important; }
  table.bang th, table.bang td { position: static !important; }
  /* Màu nền ô (ngày nghỉ, cột sáng, giờ theo đơn) phải ra giấy */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================== TIỆN ÍCH ===================== */
.chu-mo { color: var(--chu-3); }
.chu-nho { font-size: 12px; }
.mono { font-family: var(--mono); }
.giua { text-align: center; }
.phai { text-align: right; }
.dam { font-weight: 650; }
.gian { display: flex; align-items: center; gap: 8px; }
.gian.doc { flex-direction: column; align-items: stretch; }
.gian.giua { justify-content: center; }
.gian.day { justify-content: space-between; }
.gian.quan { flex-wrap: wrap; }
.day-du { width: 100%; }
.tach { height: 1px; background: var(--vien); margin: 10px 0; }
.an { display: none !important; }
.dang-tai { display: grid; place-items: center; padding: 28px; color: var(--chu-3); }
.vong {
  width: 22px; height: 22px; border: 2.5px solid var(--vien); border-top-color: var(--chinh);
  border-radius: 50%; animation: quay .7s linear infinite; margin-bottom: 10px;
}
@keyframes quay { to { transform: rotate(360deg) } }


/* ---------------------------------------------------------------------------
   Ô chọn có gõ tìm — dùng thay dropdown khi danh sách dài
   ------------------------------------------------------------------------ */
.tim-chon { position: relative; }
.tim-chon .tc-o { padding-right: 26px; }
.tim-chon .tc-bo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--chu-3); cursor: pointer;
  font-size: 12px; padding: 3px 5px; border-radius: 6px; line-height: 1;
}
.tim-chon .tc-bo:hover { background: var(--the-2); color: var(--do); }
/* Hộp kết quả gắn thẳng vào <body> (xem timChon ở lib.js) — z-index phải cao
   hơn hộp thoại lớp 2 (120) và thấp hơn khay nhắn (200) */
.tc-ds {
  display: none; position: fixed; z-index: 150; max-height: 260px; overflow: auto;
  background: var(--the); border: 1px solid var(--vien-dam);
  border-radius: 10px; box-shadow: var(--bong-3); padding: 4px; font-size: 13px;
}
.tc-ds.mo { display: block; }
.tc-dong {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.tc-dong:hover, .tc-dong.nhay { background: var(--the-2); }
.tc-dong.on { background: var(--chinh-nhat); }
.tc-dong.tc-trong { color: var(--chu-3); font-style: italic; }
.tc-ma { font-size: 11px; color: var(--chinh); min-width: 62px; }
/* Tên không được bị chữ phụ (công ty · bộ phận · chức vụ) đè mất: tên giữ tối
   thiểu 45% bề rộng, chữ phụ co lại và cắt "…" khi hộp hẹp */
.tc-ten { flex: 1 1 45%; min-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.tc-phu { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--chu-3); }
.tc-them { padding: 6px 8px; font-size: 11.5px; color: var(--chu-3); }
/* Chữ khớp khi tìm nhanh (toSangTim ở lib.js) */
mark.tim, .tim-sang mark { background: rgba(250,204,21,.55); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Nhãn loại đơn — ba màu: tăng ca cam, xác nhận công xanh dương, xin nghỉ xanh lá */
.nhan.don-tc { background: #fff1e0; color: #b45309; border-color: #f6c58a; }
.nhan.don-xn { background: #e8f0ff; color: #1d4ed8; border-color: #a9c2f5; }
/* Xin nghỉ để màu ĐỎ: trong bảng đơn dày đặc, nghỉ là thứ người duyệt phải
   nhìn ra trước tiên (mất người ngày đó), xanh lá đọc như "đã xong". */
.nhan.don-nghi { background: #fdeaea; color: #b91c1c; border-color: #f3b6b6; }

/* Điện thoại: trang KHÔNG trượt ngang — chỉ bảng (.bang-cuon) tự cuộn trong khung của nó */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  #than { overflow-x: hidden; max-width: 100vw; }
  .luoi > *, .hang > *, .the, .the-than { min-width: 0; }
  .bang-cuon { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .trang-dau .viec { flex-wrap: wrap; max-width: 100%; }
  .thanh-thang { max-width: 100%; }
  .thanh-thang input[type=month] { max-width: 150px; }
}

/* iPhone: chạm vào ô nhập có chữ nhỏ hơn 16px là Safari tự phóng to cả trang — đặt 16px cho mọi ô nhập trên điện thoại */
@media (max-width: 600px) {
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { font-size: 16px; }
}

/* Tấm "Thêm" trên điện thoại: thanh dưới vẫn nổi lên trên để chuyển nhanh */
@media (max-width: 600px) {
  body.menu-day-du #thanh-duoi { z-index: 130; box-shadow: 0 -8px 22px rgba(15,23,42,.18); }
  body.menu-day-du .man-che { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.menu-day-du .hop { max-height: calc(100dvh - 70px); }
}

/* Logo công ty trên thanh trên — đổi được ở Danh mục & tổ chức */
#dau-trang .logo-cty { border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex: none; }
#dau-trang .logo-cty img { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
@media (max-width: 600px) { #dau-trang .logo-cty img { height: 26px; max-width: 150px; } }
@media print { #dau-trang .logo-cty { display: none; } }

/* Huy hiệu số việc đang chờ — trên thực đơn và thanh dưới */
.hh {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--do); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; margin-left: 6px; flex: none;
}
/* [hidden] của trình duyệt yếu hơn display của .hh — phải nói rõ, không thì
   huy hiệu rỗng vẫn hiện thành chấm đỏ trên mọi nút */
.hh[hidden] { display: none !important; }
.rail-muc .hh { margin-left: auto; }
#rail.gon .rail-muc .hh { position: absolute; top: 4px; right: 4px; margin: 0; }
#rail.gon .rail-muc { position: relative; }
#thanh-duoi button { position: relative; }
#thanh-duoi .hh { position: absolute; top: 0; right: 22%; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }

/* ===========================================================================
   THU GỌN CHO ĐIỆN THOẠI
   ---------------------------------------------------------------------------
   Hai chỗ ăn màn hình nhất trên máy 6 inch:

     · THANH LỌC — sáu ô lọc, mỗi ô một dòng, hết nửa màn hình trước khi thấy
       được dòng dữ liệu đầu tiên. Xếp hai ô một hàng, ô thấp và chữ nhỏ lại;
       riêng ô tìm kiếm giữ trọn một dòng vì đó là ô gõ nhiều nhất.

     · HỘP THOẠI GỬI ĐƠN — nhãn to gần bằng nội dung, ba thẻ tab không đủ chỗ
       nên chữ bị cắt cụt, ô ngày thì iOS căn giữa lệch hẳn so với ô khác.

   Chỉ đụng từ 600px trở xuống; máy tính giữ nguyên.
   ========================================================================= */
@media (max-width: 600px) {
  /* ---- Thanh lọc: hai ô một hàng ---- */
  .the-dau > select.o-nhap, .the-dau > input.o-nhap,
  .trang-dau .viec > select.o-nhap, .trang-dau .viec > input.o-nhap,
  .trang-dau .viec > input[type="month"], .trang-dau .viec > input[type="date"] {
    /* Mấy ô lọc này đặt height và max-width thẳng trong thẻ (style="…"), mà
       kiểu viết trong thẻ thắng bảng kiểu — nên hai dòng này phải !important,
       không thì thu gọn xong vẫn y nguyên. */
    height: 31px !important; max-width: none !important;
    font-size: 12.5px; padding: 0 8px; min-width: 0; width: auto;
    flex: 1 1 calc(50% - 5px);
  }
  /* Ô tìm kiếm ăn trọn một dòng và LÊN ĐẦU: nó là ô gõ nhiều nhất, mà để nằm
     giữa thì nó cắt đôi hàng, đẩy ô đứng trước phải nằm trơ một mình. */
  .the-dau > input.o-nhap[placeholder*="Tìm"],
  .the-dau > input.o-nhap[placeholder*="tìm"],
  .trang-dau .viec > input.o-nhap[placeholder*="Tìm"] { flex-basis: 100%; order: -1; }
  .the-dau { gap: 6px; padding: 7px 10px; }
  .the-dau > .nut.nho { height: 31px; padding: 0 10px; font-size: 12.5px; }
  .trang-dau .viec { gap: 6px; }

  /* ---- Hộp thoại ---- */
  .hop-dau h3 { font-size: 14.5px; }
  .hop-dau .phu { font-size: 11.5px; }
  .hop-than .o { margin-bottom: 7px; }
  .hop-than .o > label { font-size: 11.5px; margin-bottom: 3px; }
  .hop-than .o input, .hop-than .o select { height: 34px; padding: 0 9px; }
  .hop-than .o textarea { min-height: 62px; padding: 7px 9px; }
  .hop-than .o .goi-y { font-size: 11px; margin-top: 3px; }
  /* Hai ô ngắn (giờ vào / giờ ra, từ ngày / đến ngày) đứng cạnh nhau được */
  .hop-than .hang { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .hop-than .loi-nhac { padding: 8px 10px; font-size: 12px; gap: 7px; }
  .hop-than .loi-nhac .bt { font-size: 14px; }
  .hop-than .tab { margin-bottom: 8px; }
  /* Ba thẻ tab phải đủ chỗ trên một dòng — cắt cụt chữ "Xin nghỉ" thì người
     dùng không biết còn thẻ thứ ba */
  .hop-than .tab { gap: 0 }
  .hop-than .tab button { padding: 6px 5px; font-size: 11.5px; }
  .hop-than .chip-gio .chip { font-size: 11px; padding: 4px 7px; }
  .hop-than .chon-dong { font-size: 12.5px; }
  /* iOS căn giữa chữ trong ô ngày / giờ — lệch hẳn so với mọi ô khác */
  .hop-than input[type="date"], .hop-than input[type="month"],
  .hop-than input[type="time"] { text-align: left; }
}

/* Biểu tượng ↻ trên thanh đầu xoay trong lúc chờ tải lại */
@keyframes xoay { to { transform: rotate(360deg); } }

/* ===========================================================================
   ĐIỆN THOẠI — 3.20: thanh lọc NHỎ, bỏ lời hướng dẫn, dành chỗ cho nội dung
   ---------------------------------------------------------------------------
   Trên màn 6 inch, một hàng lọc 38px + hai dòng gợi ý là mất một phần tư màn
   trước khi thấy dữ liệu. Ở đây ô lọc / tab / nút lọc đều thu về 28–30px chữ
   12px, còn các câu "ℹ hướng dẫn", phụ đề trang, gợi ý dưới ô nhập thì ẩn hẳn —
   ai cần đọc thì đọc trên máy tính.
   ======================================================================== */
@media (max-width: 720px) {
  .trang-dau p { display: none; }
  .trang-dau h1 { font-size: 17px; }
  .loi-nhac:not(.nguy):not(.canh):not(.xong) { display: none; }
  .o .goi-y, .the-dau .phu, .the-dau > div > .phu { display: none; }
  .the-dau h3 { font-size: 12.5px; }
  /* mọi ô lọc trong đầu thẻ, thanh lọc, đầu trang */
  .the-dau .o-nhap, .the-dau .viec .o-nhap, .rv-loc .o-nhap, .trang-dau .viec .o-nhap,
  .the-dau input[type="date"], .the-dau input[type="month"], .the-dau select {
    height: 29px !important; min-height: 0; font-size: 12px !important; padding: 0 7px !important; border-radius: 7px;
  }
  .the-dau .viec, .rv-loc { gap: 5px !important; padding: 6px 8px; }
  .the-dau .viec .nut, .the-dau .viec .nut.nho, .rv-loc .nut, .thanh-thang .nut, .thanh-thang .nut.nho,
  .trang-dau .viec .nut { height: 29px !important; padding: 0 8px; font-size: 12px; }
  .thanh-thang input[type="month"] { height: 29px !important; font-size: 12px; }
  .tab { margin-bottom: 6px; }
  .tab button { padding: 6px 8px; font-size: 12px; }
  .tab .rv-dem, .tab .ph-dem { min-width: 15px; height: 15px; font-size: 10px; }
  .rv-so-hang, .ph-so-hang { gap: 5px; }
  .rv-so b, .ph-so b { font-size: 17px; } .rv-so i, .ph-so i { display: none; }
  .luoi-loc, .bo-loc { gap: 5px; }
}

/* ---- Điện thoại, đợt 2 (3.20): chữ nhỏ hơn trên hộp thoại, đầu thẻ ---- */
@media (max-width: 720px) {
  .trang-dau .viec .nut, .trang-dau .viec .nut.chinh { height: 32px; font-size: 12.5px; padding: 0 10px; }
  .the > .the-dau h3, .the-dau h3 { font-size: 12px; letter-spacing: .3px; }
  .hop-dau .phu { display: none; }
  .hop-dau h3 { font-size: 14px; }
  .hop-dau .nut.dong { width: auto; height: 32px; padding: 0 10px; font-size: 13px; }
  .hop-than { padding: 8px; }
  .hop-chan .nut { height: 36px; font-size: 13px; padding: 0 12px; }
  .hop-than .o > label { font-size: 10.5px; margin-bottom: 2px; }
  .hop-than .o input, .hop-than .o select, .hop-than .o textarea, .hop-than .tim-chon .tc-o, .hop-than input.o-nhap, .hop-than select.o-nhap { height: 30px !important; font-size: 12px !important; padding: 0 7px; border-radius: 7px; }
  .hop-than .o textarea { height: auto !important; padding: 6px 7px; }
  .hop-than .chon-dong { font-size: 12px; } .hop-than .chon-dong input { width: 15px; height: 15px; }
  .bang.phieu td { font-size: 12.5px; }
}