/* PREMILAC V24.6
   NỀN LIỀN MẠCH CHO TOÀN BỘ TRANG CHI TIẾT SỮA NƯỚC
   Áp dụng: Grow IQ, Pedia, Fresh Cam, Fresh Dâu, Pure Ít Đường, Pure Có Đường
*/

.product-detail-page.product-liquid{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  /* Bỏ toàn bộ nền ảnh cũ và nền lặp theo từng section */
  background-color:#fff9fc !important;
  background-image:
    /* Bong bóng kính rất nhẹ */
    radial-gradient(circle at 8% 8%,
      rgba(255,255,255,.96) 0 26px,
      rgba(245,171,207,.18) 27px 30px,
      transparent 31px),
    radial-gradient(circle at 92% 12%,
      rgba(255,255,255,.92) 0 17px,
      rgba(237,42,140,.12) 18px 21px,
      transparent 22px),
    radial-gradient(circle at 13% 38%,
      rgba(255,255,255,.90) 0 12px,
      rgba(246,180,214,.16) 13px 16px,
      transparent 17px),
    radial-gradient(circle at 88% 55%,
      rgba(255,255,255,.92) 0 22px,
      rgba(237,42,140,.11) 23px 27px,
      transparent 28px),
    radial-gradient(circle at 10% 75%,
      rgba(255,255,255,.90) 0 15px,
      rgba(246,180,214,.15) 16px 19px,
      transparent 20px),

    /* Các dải sữa trắng mềm chạy xuyên suốt trang */
    radial-gradient(125% 12% at 2% 22%,
      transparent 0 62%,
      rgba(255,255,255,.72) 62.5% 67%,
      transparent 67.5%),
    radial-gradient(130% 11% at 98% 48%,
      transparent 0 61%,
      rgba(255,255,255,.64) 61.5% 66%,
      transparent 66.5%),
    radial-gradient(135% 12% at 4% 72%,
      transparent 0 62%,
      rgba(255,255,255,.70) 62.5% 67%,
      transparent 67.5%),

    /* Nền hồng pastel pha trắng */
    linear-gradient(
      155deg,
      #ffffff 0%,
      #fff8fc 18%,
      #fff0f7 42%,
      #ffe8f3 68%,
      #fff7fb 88%,
      #ffffff 100%
    ) !important;

  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:100% 100% !important;
  background-attachment:scroll !important;
}

/* Tạo dải sữa lớn ở cuối trang */
.product-detail-page.product-liquid::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-10%;
  right:-10%;
  bottom:-90px;
  height:390px;
  pointer-events:none;
  opacity:.96;

  background:
    radial-gradient(72% 72% at 18% 100%,
      rgba(255,255,255,.98) 0 53%,
      transparent 53.7%),
    radial-gradient(72% 67% at 78% 100%,
      rgba(255,255,255,.93) 0 52%,
      transparent 52.7%),
    radial-gradient(115% 54% at 50% 115%,
      rgba(255,255,255,.98) 0 55%,
      transparent 55.7%);
  filter:drop-shadow(0 -18px 34px rgba(237,42,140,.055));
}

/* Tháp Eiffel màu hồng do người dùng cung cấp — chỉ đặt nhỏ ở cuối nền */
.product-detail-page.product-liquid::after{
  content:"";
  position:absolute;
  z-index:0;
  left:clamp(14px,3vw,52px);
  bottom:24px;
  width:clamp(78px,7.5vw,132px);
  aspect-ratio:0.50;
  pointer-events:none;

  background-image:url("eiffel-pink-premilac.png");
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:contain;

  opacity:.28;
  filter:
    drop-shadow(0 10px 18px rgba(211,57,132,.10))
    saturate(.86);
}

/* Nội dung luôn nổi phía trên nền */
.product-detail-page.product-liquid .product-detail-shell{
  position:relative;
  z-index:1;
}

/* Ngăn các section bên trong phủ nền riêng lên nền chung */
.product-detail-page.product-liquid .product-detail-shell,
.product-detail-page.product-liquid .product-detail-main,
.product-detail-page.product-liquid .product-detail-grid,
.product-detail-page.product-liquid section{
  background-color:transparent !important;
  background-image:none !important;
}

/* Card vẫn giữ nền trắng mờ để nội dung rõ ràng */
.product-detail-page.product-liquid .product-info-card,
.product-detail-page.product-liquid .product-summary,
.product-detail-page.product-liquid .product-feature-strip,
.product-detail-page.product-liquid .product-warning{
  background:rgba(255,255,255,.91) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* MOBILE */
@media(max-width:700px){
  .product-detail-page.product-liquid{
    background-image:
      radial-gradient(circle at 8% 7%,
        rgba(255,255,255,.96) 0 18px,
        rgba(245,171,207,.18) 19px 22px,
        transparent 23px),
      radial-gradient(circle at 91% 10%,
        rgba(255,255,255,.92) 0 11px,
        rgba(237,42,140,.12) 12px 15px,
        transparent 16px),
      radial-gradient(circle at 12% 39%,
        rgba(255,255,255,.90) 0 9px,
        rgba(246,180,214,.16) 10px 13px,
        transparent 14px),
      radial-gradient(circle at 88% 64%,
        rgba(255,255,255,.92) 0 15px,
        rgba(237,42,140,.11) 16px 19px,
        transparent 20px),

      radial-gradient(145% 8% at 0% 24%,
        transparent 0 63%,
        rgba(255,255,255,.70) 63.5% 68%,
        transparent 68.5%),
      radial-gradient(150% 8% at 100% 50%,
        transparent 0 62%,
        rgba(255,255,255,.64) 62.5% 67%,
        transparent 67.5%),
      radial-gradient(145% 9% at 0% 76%,
        transparent 0 62%,
        rgba(255,255,255,.70) 62.5% 67%,
        transparent 67.5%),

      linear-gradient(
        160deg,
        #ffffff 0%,
        #fff8fc 19%,
        #fff0f7 46%,
        #ffe8f3 71%,
        #fff8fc 90%,
        #ffffff 100%
      ) !important;

    background-size:100% 100% !important;
  }

  .product-detail-page.product-liquid::before{
    left:-35%;
    right:-35%;
    bottom:-65px;
    height:280px;
    opacity:.94;
  }

  .product-detail-page.product-liquid::after{
    left:10px;
    bottom:18px;
    width:66px;
    opacity:.24;
  }
}