/* Vỏ bảng lương 26 cột + tổng hợp + phiếu lương (SPEC-BANG-LUONG đợt 3) — CO dựng từ mockup chốt B/C, LA soát + ghép 08/10/2026.
   LA gỡ 5 quy tắc trần đè lớp có sẵn của app (.bl-thong-tin · .dai-luong ×3 · .bl-doi-chieu — app đã có) và khoanh .bl-chu-thich dưới .bl-khung. */
.luong-khoi {
  --mk: var(--t700);
  --mk2: var(--t600);
  --mkn: var(--t50);
}

.luong-khoi-vang {
  --mk: var(--cam);
  --mk2: var(--cam);
  --mkn: var(--cam-nhat);
}

.luong-khoi-lam {
  --mk: var(--t700);
  --mk2: var(--t600);
  --mkn: var(--t50);
}

.bl-khung,
.pl-khung {
  min-width: 0;
}

.bl-dieu-khien {
  gap: 8px;
  margin-bottom: 12px;
}

.bl-bang {
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}

.bl-bang th {
  height:54px;
  padding:6px 8px;
  background:var(--t700);
  color:var(--t50);
  font-size:11px;
  line-height:1.25;
  white-space:normal;
}

.bl-bang td {
  height:54px;
  padding:6px 8px;
  border-bottom:1px solid var(--vien);
  white-space:nowrap;
}

.bl-bang .blc-ms {
  position:sticky;
  left:0;
  z-index:6;
  width:96px;
  min-width:96px;
  max-width:96px;
  text-align:left;
}

.bl-bang .blc-ten {
  position:sticky;
  left:96px;
  z-index:6;
  width:210px;
  min-width:210px;
  text-align:left;
  box-shadow:8px 0 10px -10px var(--t700);
}

.bl-bang td.blc-ms,
.bl-bang td.blc-ten {
  background:var(--t50);
}

.bl-bang tr.tong td {
  background:var(--cam-nhat);
  font-weight:800;
}

.bl-bang tr.tong td.blc-ms,
.bl-bang tr.tong td.blc-ten {
  background:var(--cam-nhat);
}

.bl-bang .blc-rong {
  width:140px;
  min-width:140px;
}

.bl-bang .blc-vua {
  width:112px;
  min-width:112px;
}

.bl-bang .blc-hep {
  width:92px;
  min-width:92px;
}

.bl-bang .blc-nhan {
  width:126px;
  min-width:126px;
}

.bl-bang .bl-nhan-manh {
  color:var(--t700);
  font-weight:800;
}

.bl-bang .bl-am {
  color:var(--cam);
  font-weight:700;
}

.bl-bang .bl-o {
  width:100%;
  min-width:92px;
  padding:5px 7px;
  border:1px solid var(--vien);
  border-radius:8px;
  background:var(--t50);
  color:var(--muc2);
  font-size:12px;
  text-align:right;
}

.bl-bang .bl-o:focus {
  border-color:var(--t600);
  outline:2px solid var(--t50);
}

.bl-bang .bl-phu-o {
  display:block;
  margin-top:3px;
  color:var(--muc2);
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
}

.bl-bang th .bl-phu-o {
  color:var(--t50);
}

.bl-but {
  width:26px;
  height:26px;
  margin-left:4px;
  padding:0;
  border:1px solid var(--vien);
  border-radius:8px;
  background:var(--t50);
  color:var(--t700);
  vertical-align:middle;
}

.bl-but:hover,
.bl-but:focus-visible {
  border-color:var(--t600);
}

.bl-bang .bl-ghi-dai {
  max-width:280px;
  white-space:normal;
}

.bl-rong-loi {
  padding:32px 16px !important;
  text-align:center;
}

.bl-rong-loi h3 {
  margin:0 0 6px;
  font-size:15px;
}

.bl-rong-loi p {
  margin:0;
  color:var(--muc2);
  font-size:12.5px;
}

.bl-kpi {
  margin-bottom:16px;
}

.bl-kpi .gt {
  overflow-wrap:anywhere;
}

.bl-tong-hop {
  min-width:1320px;
  border-collapse:collapse;
  font-size:12.5px;
}

.bl-tong-hop th {
  padding:8px;
  background:var(--t700);
  color:var(--t50);
  font-size:11px;
  line-height:1.25;
  white-space:normal;
}

.bl-tong-hop td {
  padding:8px;
  border-bottom:1px solid var(--vien);
  white-space:nowrap;
}

.bl-tong-hop tr[data-hanh-dong="xem-thang-luong"] {
  cursor:pointer;
}

.bl-tong-hop tr[data-hanh-dong="xem-thang-luong"]:hover td {
  background:var(--t50);
}

.bl-tong-hop .bl-mo td {
  background:var(--t50);
  color:var(--muc2);
  font-style:italic;
}

.bl-tong-hop tr.tong td {
  background:var(--cam-nhat);
  font-weight:800;
}

.bl-khung .bl-chu-thich {
  margin:10px 0 0;
  color:var(--muc2);
  font-size:11px;
}

.bl-chi-tiet {
  min-width:720px;
  border-collapse:collapse;
  font-size:12.5px;
}

.bl-chi-tiet th {
  padding:8px;
  background:var(--t700);
  color:var(--t50);
  font-size:11px;
}

.bl-chi-tiet td {
  padding:8px;
  border-bottom:1px solid var(--vien);
  white-space:nowrap;
}

.bl-chi-tiet tr.tong td {
  background:var(--cam-nhat);
  font-weight:800;
}

.pl-thang {
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.pl-thang h1 {
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
  text-align:center;
  font-size:18px;
  font-weight:800;
}

.pl-luong {
  padding:0;
  overflow:hidden;
}

.pl-dau {
  padding:16px;
}

.pl-dau-tren {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pl-dau h2 {
  margin:0 0 4px;
  overflow-wrap:anywhere;
  font-size:17px;
}

.pl-ma {
  color:var(--muc2);
  font-size:11px;
}

.pl-chuc {
  margin-top:3px;
  color:var(--muc2);
  font-size:12.5px;
}

.pl-nhan-phien {
  display:inline-flex;
  max-width:180px;
  padding:4px 8px;
  border-radius:10px;
  background:var(--t50);
  color:var(--t700);
  font-size:11px;
  font-weight:700;
  overflow-wrap:anywhere;
  text-align:right;
}

.pl-dai-vang {
  margin:0 14px 14px;
  padding:10px 12px;
  border-left:3px solid var(--cam);
  border-radius:0 10px 10px 0;
  background:var(--cam-nhat);
  color:var(--muc2);
  font-size:12.5px;
  overflow-wrap:anywhere;
}

.pl-nhom {
  padding:14px 16px;
  border-top:1px solid var(--vien);
}

.pl-nhom h3 {
  margin:0 0 9px;
  color:var(--t700);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.pl-cong {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.pl-o {
  min-width:0;
  padding:9px;
  border-radius:10px;
  background:var(--t50);
}

.pl-o span {
  display:block;
  min-height:34px;
  color:var(--muc2);
  font-size:11px;
  overflow-wrap:anywhere;
}

.pl-o strong {
  display:block;
  margin-top:4px;
  color:var(--t700);
  font-size:15px;
  overflow-wrap:anywhere;
}

.pl-dong {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
  padding:6px 0;
  font-size:12.5px;
}

.pl-dong span:first-child {
  min-width:0;
  overflow-wrap:anywhere;
}

.pl-dong span:last-child {
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.pl-dong.pl-tong {
  margin-top:5px;
  padding-top:10px;
  border-top:1px dashed var(--vien);
  color:var(--t700);
  font-weight:800;
}

.pl-thuc-nhan {
  padding:17px 16px;
  border-top:1px solid var(--vien);
  background:var(--t50);
}

.pl-thuc-nhan-label {
  color:var(--t700);
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
}

.pl-thuc-nhan-so {
  margin:3px 0;
  color:var(--t700);
  font-size:27px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.pl-chuyen {
  color:var(--muc2);
  font-size:11px;
  overflow-wrap:anywhere;
}

.pl-chu-thich {
  margin:12px 16px;
  padding:10px 12px;
  border-left:3px solid var(--t600);
  border-radius:0 10px 10px 0;
  background:var(--t50);
  color:var(--muc2);
  font-size:11px;
  overflow-wrap:anywhere;
}

.pl-hanh-dong {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 16px 16px;
}

.pl-hanh-dong > * {
  width:100%;
}

.pl-ket-qua {
  margin:0 16px 16px;
  padding:11px 12px;
  border-radius:11px;
  font-size:12.5px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.pl-ket-qua.pl-ok {
  background:var(--xanh-nhat);
  color:var(--t700);
}

.pl-ket-qua.pl-sai {
  background:var(--do-nhat);
  color:var(--muc2);
}

.pl-ly-do {
  display:block;
  margin-top:5px;
  font-weight:500;
  overflow-wrap:anywhere;
}

.pl-rong {
  padding:30px 18px;
  text-align:center;
}

.pl-rong h2 {
  margin:0 0 6px;
  font-size:16px;
}

.pl-rong p {
  max-width:330px;
  margin:0 auto 14px;
  color:var(--muc2);
  font-size:12.5px;
}

.pl-sheet {
  width:min(100%, 520px);
  padding:16px;
}

.pl-sheet-dau h2 {
  margin:0 0 16px;
  font-size:17px;
}

.pl-sheet label {
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:700;
}

.pl-sheet textarea {
  width:100%;
  min-height:120px;
  padding:10px 12px;
  border:1px solid var(--vien);
  border-radius:10px;
  resize:vertical;
}

.pl-sheet textarea:focus {
  border-color:var(--t600);
  outline:2px solid var(--t50);
}

.pl-bat-buoc {
  color:var(--cam);
}

.pl-sheet-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

@media (max-width:700px) {
  .bl-bang .blc-ten {
    width:184px;
    min-width:184px;
  }

  .bl-kpi {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:380px) {   /* mốc của mockup chốt C (380) — CO để 390 làm khổ 390 bị xếp dọc */
  .bl-kpi {
    grid-template-columns:1fr;
  }

  .pl-khung {
    width:100%;
    max-width:100%;   /* LA bỏ overflow:hidden của CO — giấu tràn thì phép đo tràn mù, tràn phải sửa tận gốc */
  }

  .pl-thang {
    grid-template-columns:40px minmax(0, 1fr) 40px;
  }

  .pl-thang h1 {
    font-size:16px;
  }

  .pl-dau-tren {
    display:block;
  }

  .pl-nhan-phien {
    max-width:none;
    margin-top:8px;
    text-align:left;
  }

  .pl-cong {
    grid-template-columns:1fr;
  }

  .pl-o span {
    min-height:0;
  }

  .pl-dong {
    gap:8px;
  }

  .pl-dong span:last-child {
    max-width:48vw;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .pl-thuc-nhan-so {
    font-size:24px;
  }
}