/* ==================================================
   VIP SEO FOOTER (PRE-CONTACT)
   FINAL ABSOLUTE SAFE VERSION
   ✔ NO 100vw
   ✔ NO HORIZONTAL OVERFLOW
   ✔ MOBILE / TABLET / DESKTOP SAFE
================================================== */

/* ==================================================
   ROOT SAFETY
================================================== */

html, body{
  width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden; /* 🔒 ล็อกระดับระบบ */
}

/* ==================================================
   VARIABLES
================================================== */

:root{
  --vip-primary:#0b2a55;
  --vip-max-width:1440px;
  --vip-padding-x:clamp(20px, 4vw, 64px);
}

/* ==================================================
   SECTION
================================================== */

.vip-seo-footer{
  position:relative;
  width:100%;
  padding:clamp(64px, 6vw, 96px) 0;

  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f6f9fc 100%
  );

  overflow:hidden; /* 🔑 ตัด pseudo-element ทุกกรณี */
}

/* ==================================================
   INNER CONTAINER
================================================== */

.vip-seo-footer-inner{
  width:100%;
  max-width:var(--vip-max-width);

  margin-left:auto;
  margin-right:auto;

  padding:clamp(36px, 4vw, 56px) var(--vip-padding-x);

  background:#ffffff;
  border-radius:22px;

  box-shadow:0 24px 64px rgba(11,42,85,.08);

  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}

/* watermark */
.vip-seo-footer-inner::after{
  content:"VIP-HAT";
  position:absolute;
  right:clamp(16px, 3vw, 32px);
  bottom:clamp(16px, 3vw, 24px);

  font-size:clamp(42px, 6vw, 72px);
  font-weight:700;
  letter-spacing:.08em;

  color:rgba(11,42,85,.035);
  pointer-events:none;
}

/* ==================================================
   TEXT
================================================== */

.vip-seo-footer-title{
  font-size:clamp(26px, 3vw, 32px);
  font-weight:700;
  color:var(--vip-primary);
  margin-bottom:16px;
}

.vip-seo-footer-desc{
  font-size:16px;
  line-height:1.85;
  color:#425a78;

  max-width:900px;
  margin-bottom:24px;
}

.vip-seo-footer-desc strong{
  color:var(--vip-primary);
  font-weight:600;
}

/* links */
.vip-seo-footer-links{
  font-size:15px;
  color:#425a78;
}

.vip-seo-footer-links a{
  color:var(--vip-primary);
  font-weight:600;
  text-decoration:none;
  position:relative;
}

.vip-seo-footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;

  width:0;
  height:2px;

  background:linear-gradient(90deg,#c9a96a,#f1d18a);
  transition:width .35s ease;
}

.vip-seo-footer-links a:hover::after{
  width:100%;
}

/* ==================================================
   FADE-IN ON SCROLL
================================================== */

.js-vip-fade{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.js-vip-fade.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==================================================
   MOBILE / TABLET FIX (ABSOLUTE SAFE)
================================================== */

@media (max-width:768px){

  section,
  .vip-seo-footer,
  .vip-seo-footer-inner{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* ❌ ไม่ใช้ vw เด็ดขาด */
  .vip-seo-footer::before{
    width:100%;
    max-width:calc(100% - 40px);
  }

  .vip-seo-footer-inner{
    padding:32px 20px;
    border-radius:18px;
  }

  .vip-seo-footer-title{
    font-size:26px;
  }
}