/* ===== Wrapper ===== */
.bio-stats-wrapper{
  --card-w: 300px;
  --radius: 44px;
  --c-blue: #18BDFA;                 /* màu theo figma */
  width:100%;
  box-sizing:border-box;
  padding:48px 24px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(var(--card-w), 1fr));
  gap:40px;
  max-width:1440px;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Card (flex center) ===== */
.bio-stat{
  background:#fff;
  border-radius:var(--radius);
    min-height: 230px;              
  padding:32px;                      
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;

  display:flex;                      /* căn giữa số */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;                          /* khoảng giữa số & caption */
}

/* ===== Number ===== */
.bio-number{
  color:var(--c-blue);
  font-weight:800;
  line-height:.9;
  letter-spacing:1px;
  font-size: clamp(48px, 6vw, 106px);
  margin:0;                          /* không đẩy lệch */
}

/* ===== Label ===== */
.bio-label {
  color: var(--c-blue);
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(11px, 1.07vw, 15px);
  max-width: 78%; 
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .bio-stats-wrapper{
    grid-template-columns:repeat(2, minmax(var(--card-w), 1fr));
    gap:32px;
  }
  .bio-stat{ min-height:300px; }
}
/* ===== Mobile (≤640px) tối ưu hơn ===== */
@media (max-width:640px){
  .bio-stats-wrapper{
    grid-template-columns:1fr; 
    gap:20px;
    padding:32px 16px;          
    max-width:480px;              
  }

  .bio-stat{
    border-radius:24px;
    min-height:200px;                
    padding:24px 16px;             
  }

  .bio-number{
font-size: clamp(40px, 12vw, 64px);
    line-height:1;
  }

  .bio-label{
    font-size: clamp(15px, 4.5vw, 18px); 
    max-width:100%; 
  }
}