/* =====================================================
   PAYROLL DETAIL
===================================================== */

.payroll-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 14px;
}

/* ===== Tổng thực nhận nổi bật ===== */
.payroll-total {
  font-size: 22px;
  font-weight: 700;
  color: #2e7d32;
  text-align: right;            /* đổi từ center → right */
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

/* ===== Section block ===== */
.payroll-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payroll-section-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

/* ===== Row thông tin ===== */
/* ===== Row 2 cột ===== */
.payroll-row {
  display: grid;
  grid-template-columns: 2.9fr 1.1fr; 
  gap: 10px;
  align-items: center;
}

.payroll-row span:last-child {
  text-align: right;
  font-weight: 600;
}

.payroll-grid-3 {
  display: grid;
  grid-template-columns: 1.8fr 1.1fr 1.1fr;
  gap: 8px;
}

.payroll-grid-3 div:nth-child(2),
.payroll-grid-3 div:nth-child(3) {
  text-align: right;
  font-weight: 600;
}


.payroll-grid-3.header {
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  margin-bottom: 4px;
}


/* Chú thích đơn vị */
.payroll-unit {
  font-size: 13px;
  color: #666;
  font-weight: 500;
  margin-top: 4px;
}

/* Đơn vị tiền chung */
.payroll-unit-row {
  text-align: right;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}




/* ===== THỰC NHẬN – DÒNG NỔI BẬT NHẤT ===== */
.payroll-total-row {
  display: grid;
  grid-template-columns: 2.9fr 1.1fr; 
  align-items: baseline;
  padding: 10px 0 14px;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 8px;
}

.payroll-total-label {
  font-size: 20px;
  font-weight: 600;
  color: #1b5e20;   /* ✅ cùng màu với số */
}

.payroll-total-value {
  text-align: right;
  font-size: 26px;
  font-weight: 700;
  color: #1b5e20;
  letter-spacing: 0.5px;
}