.wrap-nguyen-nhan-nang-luong{
  --nnnl-cyan:#1DB4FF;
  --nnnl-text:#fff;
  --nnnl-bg:#f3f3f3;
  --overlap:64px;
  max-width:90rem;
  margin:0 auto;
  box-sizing:border-box;
}

.hero-nguyen-nhan-nang-luong p{
  position:relative;
  z-index:0; /* hero dưới card */
  background:var(--nnnl-cyan);
  color:var(--nnnl-text);
  border-radius:2.5rem;
  padding:2.75rem 3rem;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 18px 24px rgba(0,0,0,.10);
  overflow:visible;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px!important;
        text-align: justify !important;
}

.cards-scroll-nguyen-nhan-nang-luong{
  position:relative;
  top: calc(var(--overlap) * -1); 
  z-index:1;
  overflow-x:visible;              
  padding-top:40px;
  padding-bottom:0;
  padding-left:1.25rem;           
  padding-right:1.25rem;
}

.cards-scroll-nguyen-nhan-nang-luong::before{
  content:"";
  position:absolute;
  z-index:0;                      
  left:1rem;                  
  right:1rem;
  top: 72px;                       
  height: 128px;                 
  background: var(--nnnl-bg);
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  pointer-events:none;            
}

.cards-nguyen-nhan-nang-luong{
  --cols:6;                       
  --gap:1.5rem;                   
  position:relative;
  z-index:1;                   
  display:flex;
  flex-wrap:nowrap;                
  justify-content:space-between;  
  gap:var(--gap);
  width:100%;
}

.card-nguyen-nhan-nang-luong{
  width: calc( (100% - (var(--cols) - 1) * var(--gap)) / var(--cols) );
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-nguyen-nhan-nang-luong:hover{ transform:translateY(-2px) }

.thumb-nguyen-nhan-nang-luong{
  width:100%;
  aspect-ratio:1/1;               
  background:#fff center/cover no-repeat;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  display:grid; place-items:center;
  color:#111; font-weight:700; letter-spacing:.5px;
}

.pill-nguyen-nhan-nang-luong{
  margin-top:-1rem;               
  background:var(--nnnl-cyan);
  color:#fff;
  border:none;
  padding:.5rem 1.25rem;
  border-radius:.75rem;
  font-size:16px;
  min-width:9.5rem;
  text-align:center;
  box-shadow:0 6px 12px rgba(0,0,0,.10);
}

@media (max-width: 1199.98px){
  .cards-scroll-nguyen-nhan-nang-luong{
    overflow-x:auto;              
    padding-bottom:.5rem;
    -webkit-overflow-scrolling:touch;
  }
  .cards-scroll-nguyen-nhan-nang-luong::before{
    left:.5rem; right:.5rem;
    top: 64px;
    height: 116px;
  }
  .cards-nguyen-nhan-nang-luong{
    justify-content:flex-start;    
    gap:1.25rem;
  }
  .card-nguyen-nhan-nang-luong{ width:12.5rem; }  
  .thumb-nguyen-nhan-nang-luong{ width:12.5rem; aspect-ratio:1/1; }

  .cards-scroll-nguyen-nhan-nang-luong::-webkit-scrollbar{ height:8px; }
  .cards-scroll-nguyen-nhan-nang-luong::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.2); border-radius:8px;
  }
}

@media (max-width: 767.98px){
  .cards-nguyen-nhan-nang-luong{ gap:.875rem; }
  .card-nguyen-nhan-nang-luong{ width:11.5rem; }
  .thumb-nguyen-nhan-nang-luong{ width:11.5rem; aspect-ratio:1/1; }
  .pill-nguyen-nhan-nang-luong{
 min-width:auto; padding:.45rem 1rem;
  }
}