/* ============================================================================
   Social Icons (Brand) - Scoped styles only
   ----------------------------------------------------------------------------
   ใช้สำหรับไอคอน Social เท่านั้น โดยต้องครอบด้วย class:
   - .social-icons-brand
   และกำหนดสีแบรนด์ต่อไอคอนด้วย CSS variable:
   - style="--social-color: #1877F2;"
   
   หมายเหตุ: Override .th-social และ .style-black จาก theme CSS
   ============================================================================ */

/* Default: brand background + white icon */
.social-icons-brand a,
.th-social.social-icons-brand a,
.th-social.style-black.social-icons-brand a {
  /* พื้นหลังสีแบรนด์ */
  background-color: var(--social-color, #111827) !important;
  /* ขอบสีแบรนด์ */
  border: 1px solid var(--social-color, #111827) !important;
  /* Icon สีขาว */
  color: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.15s ease;
}

/* Force icon to follow anchor color (override theme icon colors) */
.social-icons-brand a i,
.social-icons-brand a .fa,
.social-icons-brand a .fas,
.social-icons-brand a .far,
.social-icons-brand a .fab,
.social-icons-brand a .fal,
.th-social.social-icons-brand a i,
.th-social.social-icons-brand a .fa,
.th-social.social-icons-brand a .fas,
.th-social.social-icons-brand a .far,
.th-social.social-icons-brand a .fab,
.th-social.social-icons-brand a .fal,
.th-social.style-black.social-icons-brand a i,
.th-social.style-black.social-icons-brand a .fa,
.th-social.style-black.social-icons-brand a .fas,
.th-social.style-black.social-icons-brand a .far,
.th-social.style-black.social-icons-brand a .fab,
.th-social.style-black.social-icons-brand a .fal {
  color: inherit !important;
}

/* Hover: พื้นหลังคงเดิม (สีแบรนด์) + เปลี่ยนเฉพาะ icon (opacity/transform) */
.social-icons-brand a:hover,
.social-icons-brand a:focus,
.social-icons-brand a:focus-visible,
.th-social.social-icons-brand a:hover,
.th-social.social-icons-brand a:focus,
.th-social.social-icons-brand a:focus-visible,
.th-social.style-black.social-icons-brand a:hover,
.th-social.style-black.social-icons-brand a:focus,
.th-social.style-black.social-icons-brand a:focus-visible {
  /* พื้นหลังคงเดิม - ไม่เปลี่ยน */
  background-color: var(--social-color, #111827) !important;
  /* ขอบคงเดิม */
  border-color: var(--social-color, #111827) !important;
  /* Icon สีขาว (เหมือนเดิม) แต่เพิ่ม opacity/transform effect */
  color: #ffffff !important;
  opacity: 0.85;
  text-decoration: none;
  outline: none;
  transform: translateY(-2px) scale(1.1);
}