.mspb-progress-list{
  width:var(--mspb-max-width);
  max-width:100%;
  padding:var(--mspb-padding);
  font-family:var(--mspb-font);
  box-sizing:border-box;
}
.mspb-progress-list *{box-sizing:border-box}
.mspb-progress-item{
  position:relative;
  margin-bottom:var(--mspb-gap);
  padding-top:0;
}
.mspb-progress-item:last-child{
  margin-bottom:0;
}

/* Hàng chữ phía trên */
.mspb-progress-head{
  position:relative;
  min-height:calc(var(--mspb-title-size) * 1.18);
  margin-bottom:var(--mspb-title-gap);
  color:var(--mspb-text);
  line-height:1.15;
}

/* Tiêu đề cố định bên trái */
.mspb-progress-title{
  font-size:var(--mspb-title-size);
  font-weight:var(--mspb-title-weight);
  line-height:1.15;
  padding-right:160px;
}

/* Số % chạy theo đầu thanh màu xanh */
.mspb-progress-number{
  position:absolute;
  top:0;
  left:clamp(0px, calc(var(--mspb-current) * 1%), 100%);
  transform:translateX(-50%);
  font-size:var(--mspb-percent-size);
  font-weight:var(--mspb-percent-weight);
  line-height:1.15;
  white-space:nowrap;
  color:var(--mspb-text);
  font-variant-numeric:tabular-nums;
  will-change:left;
  z-index:2;
}

/* Nếu % gần mép phải thì kéo ngược lại để không tràn */
.mspb-progress-item[style*="--mspb-current:100"] .mspb-progress-number{
  transform:translateX(-100%);
}

.mspb-progress-track{
  width:100%;
  height:var(--mspb-height);
  background:var(--mspb-track);
  border-radius:var(--mspb-radius);
  overflow:hidden;
}
.mspb-progress-fill{
  height:100%;
  background:var(--mspb-bar);
  border-radius:var(--mspb-radius);
  transition:width var(--mspb-duration) ease;
}

@media (max-width:767px){
  .mspb-progress-head{
    min-height:calc(var(--mspb-mobile-title) * 1.2);
    margin-bottom:12px;
  }
  .mspb-progress-title{
    font-size:var(--mspb-mobile-title);
    padding-right:90px;
  }
  .mspb-progress-number{
    font-size:var(--mspb-mobile-percent);
  }
  .mspb-progress-track{
    height:var(--mspb-mobile-height);
  }
  .mspb-progress-item{
    margin-bottom:36px;
  }
}