/* ===============================
   PAGE HEADER SERVICES
=============================== */
.page-header-service{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: url("assets/icons/service-header-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header-service::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(5,8,20,.50), rgba(5,8,20,.70));
  z-index: 0;
}

.page-header-service .container{
  position: relative;
  z-index: 1;
}

/* ===============================
   SERVICE CARD BASE FIX
=============================== */
.card-service-monthly,
.card-service-lumpsum,
.card-service-half-full{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block;

  border: 0 !important;
  border-radius: 16px;
  padding: 24px 22px !important;

  background-color: transparent !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* กัน style จาก .card-link::after เดิมไม่ให้ดูทะลุขอบ */
.card-service-monthly.card-link::after,
.card-service-lumpsum.card-link::after,
.card-service-half-full.card-link::after{
  z-index: 1;
  opacity: .55;
  right: 12px;
}

/* ===============================
   MONTHLY
=============================== */
.card-service-monthly{
  background-image: url("assets/icons/service-monthly-bg.png");
  background-position: center 60%;
}

.card-service-monthly::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(8,18,40,.55),
    rgba(8,18,40,.72)
  );
  z-index: 0;
}

/* ===============================
   LUMP SUM
=============================== */
.card-service-lumpsum{
  background-image: url("assets/icons/service-lumpsum-bg.png");
  background-position: center 55%;
}

.card-service-lumpsum::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(8,18,40,.55),
    rgba(8,18,40,.72)
  );
  z-index: 0;
}

/* ===============================
   HALF / FULL DAY
=============================== */
.card-service-half-full{
  background-image: url("assets/icons/service-half-full-bg.png");
  background-position: center;
}

.card-service-half-full::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(8,18,40,.55),
    rgba(8,18,40,.72)
  );
  z-index: 0;
}

/* ===============================
   CONTENT ABOVE OVERLAY
=============================== */
.card-service-monthly > *,
.card-service-lumpsum > *,
.card-service-half-full > *{
  position: relative;
  z-index: 1;
}

.card-service-monthly h3,
.card-service-lumpsum h3,
.card-service-half-full h3{
  color: #fff;
  margin-top: 0;
  margin-bottom: 12px;
}

.card-service-monthly p,
.card-service-lumpsum p,
.card-service-half-full p{
  color: #e5e7eb;
  line-height: 1.75;
  margin: 0 0 8px;
}

.card-service-monthly p:last-child,
.card-service-lumpsum p:last-child,
.card-service-half-full p:last-child{
  margin-bottom: 0;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px){
  .card-service-monthly,
  .card-service-lumpsum,
  .card-service-half-full{
    padding: 22px 18px !important;
  }
}
.card-link:hover{
  box-shadow:
    0 0 0 2px #ff7a00,
    0 10px 25px rgba(255,122,0,.18);
}