/* cong-cu.css: máy tính quyền lợi và nhật ký giờ làm (meocam.vn). Nạp sau giao-dien.css và bai.css,
   dùng chung biến màu và một họ chữ của site. Số trong bảng và ô kết quả canh phải. */
.cong-cu{max-width:820px}
.cong-cu [hidden]{display:none !important}
.cong-cu .muc-luc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0}
.cong-cu .muc-luc a{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid var(--vien-dam);
  background:var(--trang);color:var(--muc-2);font-size:14.5px;font-weight:600;text-decoration:none}
.cong-cu .muc-luc a:hover{border-color:var(--cam);color:var(--cam-dam)}

.cc-muc{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:22px 22px 18px;
  margin:0 0 26px;scroll-margin-top:84px}
.cc-muc>h2{margin-top:0}
.cc-muc>p{margin-bottom:14px}
.cc-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;margin:0 0 14px}
.cc-o{display:flex;flex-direction:column;gap:5px;min-width:0}
.cc-o>span{font-size:14.5px;font-weight:600;color:var(--muc);line-height:1.4}
.cc-o small{font-size:13px;line-height:1.45;color:var(--muc-mo)}
.cc-o input,.cc-o select,.cc-o textarea{font:inherit;font-size:16px;color:var(--muc);background:var(--nen);
  border:1px solid var(--vien-dam);border-radius:var(--bo-nho);padding:10px 12px;width:100%;min-width:0}
.cc-o input{font-variant-numeric:tabular-nums}
.cc-o input.so{text-align:right}
.cc-o input:focus,.cc-o select:focus,.cc-o textarea:focus{outline:2px solid var(--cam);outline-offset:1px;border-color:var(--cam)}
.cc-nhom{border:1px solid var(--vien);border-radius:var(--bo-nho);padding:12px 14px 14px;margin:0 0 12px;min-width:0}
.cc-nhom legend{font-size:14px;font-weight:700;color:var(--cam-dam);padding:0 6px}
.cc-nhom .cc-luoi{margin:0}
.cc-hai{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-hai label{display:flex;align-items:center;gap:6px;min-width:0}
.cc-hai label span{font-size:14px;color:var(--muc-2);white-space:nowrap}

.cc-kq{background:var(--nen-2);border-radius:var(--bo-nho);padding:16px 18px;margin:6px 0 14px}
.cc-kq .cho{margin:0;color:var(--muc-mo);font-size:15.5px;text-align:left}
.cc-kq .ket{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:0 0 10px}
.cc-kq .ket span{font-size:15px;color:var(--muc-2);font-weight:600}
.cc-kq .ket b{font-size:clamp(24px,5vw,30px);line-height:1.15;color:var(--cam-dam);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-align:right}
.cc-kq .ket.phu b{font-size:20px;color:var(--muc)}
.cc-kq ol{margin:0 0 6px;padding-left:22px}
.cc-kq ol li{font-size:15px;line-height:1.6;margin:0 0 6px;text-align:left}
.cc-kq .canh{background:#FFF0E0;border-left:3px solid var(--cam);padding:9px 12px;border-radius:0 6px 6px 0;
  font-size:14.5px;line-height:1.55;margin:8px 0 0;text-align:left;color:var(--muc)}
.cc-kq .ghi{font-size:14px;color:var(--muc-2);margin:8px 0 0;text-align:left}
.cc-can-cu,.cc-hoc{font-size:14.5px !important;line-height:1.6 !important;margin:0 0 6px !important;text-align:left !important}
.cc-can-cu b,.cc-hoc b{color:var(--muc)}

/* Nhật ký giờ làm */
.nk-thanh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.nk-thanh .nut{padding:11px 18px;font-size:15px}
.nk-thanh select{font:inherit;font-size:15px;border:1px solid var(--vien-dam);border-radius:999px;padding:9px 14px;
  background:var(--trang);color:var(--muc)}
.nk-bao{font-size:14.5px;line-height:1.55;margin:0 0 12px;padding:10px 14px;border-radius:var(--bo-nho);
  background:var(--tot-mo);color:var(--tot);text-align:left}
.nk-bao.loi{background:#FDE8E1;color:#9A2D0C}
.nk-tong{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.nk-tong .o{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:12px 14px}
.nk-tong b{display:block;font-size:24px;line-height:1.1;color:var(--cam-dam);font-variant-numeric:tabular-nums}
.nk-tong span{display:block;font-size:13.5px;line-height:1.4;color:var(--muc-2);margin-top:4px}
.nk-ds{margin:0 0 10px}
.nk-dong{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr)) auto;gap:6px 12px;align-items:center;
  padding:11px 4px;border-top:1px solid var(--vien);font-size:15px}
.nk-dong.nk-tieu{border-top:0;font-size:13px;font-weight:700;color:var(--muc-mo);text-transform:uppercase;letter-spacing:.04em;padding-top:0}
.nk-dong .so{text-align:right;font-variant-numeric:tabular-nums}
.nk-dong .ngay b{display:block;color:var(--muc)}
.nk-dong .ngay small{display:block;color:var(--muc-mo);font-size:13px;line-height:1.4}
.nk-dong .nk-nut{display:flex;gap:4px;justify-content:flex-end}
.nk-dong button{font:inherit;font-size:13.5px;border:1px solid var(--vien-dam);background:var(--trang);color:var(--muc-2);
  border-radius:999px;padding:5px 10px;cursor:pointer}
.nk-dong button:hover{border-color:var(--cam);color:var(--cam-dam)}
.nk-dong .ghi-chu{grid-column:1/-1;font-size:13.5px;color:var(--muc-2);margin-top:-2px}
.nk-dong .canh-dong{grid-column:1/-1;font-size:13.5px;color:#9A2D0C}
.nk-trong{color:var(--muc-mo);font-size:15px;padding:10px 0}
.nk-in-dau{display:none}
@media (max-width:560px){
  .cc-muc{padding:18px 14px 14px}
  .cc-luoi{grid-template-columns:1fr}
  .cc-nhom .cc-luoi{grid-template-columns:1fr 1fr;gap:10px 10px}
  .cc-nhom .cc-luoi:has(> :only-child){grid-template-columns:1fr}
  .cc-nhom .cc-o{justify-content:flex-end}
  .cc-nhom .cc-o>span{font-size:13.5px}
  .nk-dong{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nk-dong .ngay{grid-column:1/-1}
  .nk-dong .nk-nut{grid-column:1/-1;justify-content:flex-start}
  .nk-dong.nk-tieu{display:none}
  .nk-dong .so::before{content:attr(data-nhan);display:block;font-size:12px;color:var(--muc-mo);text-align:left}
  .nk-dong .so{text-align:left}
}
@media print{
  header.dau,footer.chan,.bai-dau .nhan-cm,.cong-cu .khong-in,.cong-cu .hoidap,.cong-cu h2:has(+ .hoidap),.nk-dong .nk-nut{display:none !important}
  body{background:#fff}
  .cc-muc{border:0;padding:0}
  .nk-in-dau{display:block}
  .nk-dong{break-inside:avoid}
}
