/* ============================================================
   HUTU SPA — Ambiance layer (hiệu ứng nền chuyên nghiệp, rõ hơn)
   transform/opacity/background-position (GPU), reduced-motion safe.
   ============================================================ */

/* Banded sections — content nổi lên trên lớp nền */
.hs-hero,.hs-cta,.hs-pagehero,.hs-why{position:relative;overflow:hidden;isolation:isolate}
.hs-hero > .container,
.hs-cta  > .container,
.hs-why  > .container,
.hs-pagehero > .container{position:relative;z-index:2}

/* ---------- HERO: aurora ánh đồng chuyển động chậm ---------- */
.hs-hero{
  background:
    radial-gradient(1100px 620px at 18% 0%,rgba(209,172,99,.22),transparent 55%),
    radial-gradient(900px 560px at 88% 18%,rgba(138,101,66,.20),transparent 58%),
    radial-gradient(700px 500px at 60% 100%,rgba(209,172,99,.12),transparent 60%),
    linear-gradient(180deg,#191510,#151210);
  background-size:170% 170%;
  animation:hsAurora 20s ease-in-out infinite;
}
@keyframes hsAurora{0%,100%{background-position:0% 0%}33%{background-position:100% 50%}66%{background-position:40% 100%}}

/* glow orbs rõ hơn + "thở" nhẹ */
.hs-hero::before,.hs-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(30px);will-change:transform,opacity;
  background:radial-gradient(circle at 50% 50%,rgba(209,172,99,.55),rgba(209,172,99,0) 70%);
}
.hs-hero::before{width:600px;height:600px;top:-210px;right:-130px;opacity:.6;animation:hsFloatA 18s ease-in-out infinite}
.hs-hero::after {width:480px;height:480px;bottom:-200px;left:-140px;opacity:.42;
  background:radial-gradient(circle at 50% 50%,rgba(234,211,154,.5),rgba(234,211,154,0) 70%);
  animation:hsFloatB 24s ease-in-out infinite}

@keyframes hsFloatA{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.6}50%{transform:translate3d(-50px,44px,0) scale(1.18);opacity:.42}}
@keyframes hsFloatB{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.42}50%{transform:translate3d(54px,-40px,0) scale(1.14);opacity:.26}}

/* ---------- Ảnh nền MỜ + PARALLAX cho các dải ---------- */
.hs-cta::before,.hs-pagehero::before,.hs-why::before{
  content:"";position:absolute;inset:-60px;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(6px) saturate(.95) brightness(.74);
  transform:scale(1.1) translateY(var(--hspar,0px));will-change:transform;
}
.hs-cta::before{
  background-image:
    radial-gradient(900px 420px at 78% -10%,rgba(209,172,99,.28),transparent 60%),
    linear-gradient(120deg,rgba(22,16,11,.78),rgba(18,14,10,.88)),
    url(/assets/uploads/hutu-about.jpg);
}
.hs-pagehero::before{
  background-image:
    radial-gradient(900px 400px at 80% -16%,rgba(209,172,99,.24),transparent 60%),
    linear-gradient(120deg,rgba(20,15,10,.80),rgba(18,14,10,.9)),
    url(/assets/uploads/hutu-hero.jpg);
}
.hs-why::before{
  background-image:
    radial-gradient(900px 480px at 20% -10%,rgba(209,172,99,.2),transparent 62%),
    linear-gradient(120deg,rgba(20,16,11,.86),rgba(16,13,10,.93)),
    url(/assets/uploads/15_3.jpg);
}
/* glow phụ trôi trên các dải có ảnh nền (rõ hơn) */
.hs-cta::after,.hs-why::after{
  content:"";position:absolute;z-index:1;pointer-events:none;border-radius:50%;
  width:520px;height:520px;top:-160px;left:30%;filter:blur(44px);opacity:.3;
  background:radial-gradient(circle at 50% 50%,rgba(209,172,99,.6),rgba(209,172,99,0) 70%);
  animation:hsFloatA 24s ease-in-out infinite;will-change:transform;
}

/* ---------- Ảnh hero bồng bềnh ---------- */
.hs-hero-media{animation:hsBob 7.5s ease-in-out infinite;will-change:transform}
@keyframes hsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Ảnh dịch vụ: zoom mềm khi hover ---------- */
.hs-svc-media{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hs-svc-card:hover .hs-svc-media{transform:scale(1.07)}

/* ---------- Nút primary: ánh sáng quét ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after{left:150%}

/* ---------- Film grain toàn trang ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ---------- Divider ánh đồng dưới tiêu đề section ---------- */
.section-head .section-title::after,.section-head h2::after{
  content:"";display:block;width:64px;height:3px;margin:.7rem auto 0;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
  background-size:200% 100%;animation:hsShine 4s linear infinite;
}
@keyframes hsShine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Footer: nền ảnh spa sang trọng (đẹp & chuyên nghiệp) ---------- */
.hs-footer{position:relative;overflow:hidden;isolation:isolate;background:#0f0d0b}
.hs-footer > *{position:relative;z-index:2}
.hs-footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,11,9,.90),rgba(11,9,7,.96) 72%,rgba(10,8,6,.99)),
    radial-gradient(760px 420px at 12% 0%,rgba(209,172,99,.16),transparent 60%),
    radial-gradient(680px 360px at 92% 8%,rgba(138,101,66,.12),transparent 62%),
    url(/assets/uploads/hutu-about.jpg) center/cover no-repeat;
  filter:saturate(.92);
}
/* đường kẻ đồng tinh tế phía trên footer */
.hs-footer::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(209,172,99,.7),transparent);
}

/* ---------- An toàn chuyển động ---------- */
@media(prefers-reduced-motion:reduce){
  .hs-hero,.hs-hero::before,.hs-hero::after,.hs-cta::after,.hs-why::after,
  .hs-hero-media,.section-head .section-title::after,.section-head h2::after{animation:none !important}
  .btn-primary::after{display:none}
  .hs-svc-card:hover .hs-svc-media{transform:none}
  .hs-cta::before,.hs-pagehero::before,.hs-why::before{transform:scale(1.08) !important}
}