/* ========== WRAPPER GRID: desktop 6 cột để so-le, tablet 2, mobile 1 ========== */
.rectangle-layout-loi-ich-suc-khoe{
  --gap: clamp(20px, 3vw, 40px);
  --ratio: 3/2;
  --r: 28px;
  --shadow: 0 18px 28px rgba(0,0,0,.12);
  --pill: #1DB4FF;

  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: var(--gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 12px;
}

/* Hàng 1: (1–2)(3–4)(5–6) */
.slot-a{ grid-column: 1 / span 2; }
.slot-b{ grid-column: 3 / span 2; }
.slot-c{ grid-column: 5 / span 2; }

/* Hàng 2: (2–3)(4–5) => SO-LE thật */
.slot-d{ grid-column: 2 / span 2; }
.slot-e{ grid-column: 4 / span 2; }

/* Tablet: 2 cột → 2–2–1 */
@media (max-width:980px){
  .rectangle-layout-loi-ich-suc-khoe{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .slot-a, .slot-b, .slot-c, .slot-d{ grid-column: auto / span 1; }
  .slot-e{ grid-column: 1 / -1; }
}

/* Mobile: 1 cột */
@media (max-width:600px){
  .rectangle-layout-loi-ich-suc-khoe{ grid-template-columns: 1fr; gap: 24px; padding: 16px 12px; }
}

/* ========== CARD LAYERING: ảnh (z0) < gradient (z1) < pill (z2) ========== */
.box-loi-ich-suc-khoe{
  position: relative;
  aspect-ratio: var(--ratio);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  isolation: isolate;                /* stacking context riêng */
  background: #f5f7fb;
}

/* Ảnh luôn dưới cùng */
.box-loi-ich-suc-khoe > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;                        /* ↓ đặt z=0 cho chắc */
  transform: translateZ(0);
}

/* Gradient nhẹ (nếu không cần, bỏ block này) */
.box-loi-ich-suc-khoe::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.18) 100%);
  z-index: 1;
  pointer-events: none;
}

/* PILL: CHẮC CHẮN TRÊN ẢNH – chặn mọi rule theme (top:92%...) */
.rectangle-layout-loi-ich-suc-khoe .box-loi-ich-suc-khoe .box-text-loi-ich-suc-khoe{
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 12px !important;              /* pill nằm trên ảnh (đỉnh) */
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;             /* > gradient, > img */
}

/* Style pill */
.rectangle-layout-loi-ich-suc-khoe .box-text-loi-ich-suc-khoe .inner-box{
  display: inline-block;
  min-width: 220px;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--pill);
  color: #fff; font-weight: 700; font-size: 20px; line-height: 1;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
}

/* Tùy chọn: tăng độ lệch dọc rất nhẹ cho hàng dưới (chỉ desktop) */
@media (min-width:981px){
  .slot-d{ margin-top: 8px; }
  .slot-e{ margin-top: -8px; }
}