/* ============================================================
   COMPONENTS.CSS – All Section Styles – PRINTPACK
   ============================================================ */

/* ───────────────── HERO ───────────────── */
#hero{
  width:100%;
  overflow:hidden;
  position:relative;

  padding:0;
  margin:0;

  background:#f5f8f4;
}

/* bỏ giới hạn width */
#hero .container{
  width:100%;
  max-width:100%;
  padding:0;
  margin:0;
}

/* IMAGE */
.hero-banner{
  width:100vw;
  height:auto;
  padding-top:40px ;

  display:block;

  object-fit:cover;
}

/* nếu muốn full chiều cao màn hình */
.hero-banner.fullscreen{
  width:100vw;
  height:100vh;
  object-fit:cover;
}

/* Overlay */
.hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Mobile */
@media(max-width:768px){

  #hero{
    min-height: auto;
  }

  .hero-banner{
    padding-top: 60px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hero-overlay{
    align-items: flex-end;
    padding: 20px;
    padding-bottom: 40px;
  }

  .hero-title{
    font-size: 36px;
  }

  .hero-desc{
    font-size: 14px;
    line-height: 1.6;
  }

  .hero-btn{
    width: 100%;
  }

}