/* แถวรวม */
.social-links{
  display:flex;
  align-items:center;
  gap:10px;
}
.social-title{
  margin-right:8px;
  font-weight:700;
  font-size:18px;
  color:#fff;           /* ปรับตามธีม */
  white-space:nowrap;
}

/* ปุ่ม: เล็ก + กลางเป๊ะ */
.social-icon{
  width:36px; height:36px;
  display:grid;                 /* กลางทั้งแกน */
  place-items:center;           /* = align + justify center */
  border-radius:10px;           /* มุมโค้งกำลังดี */
  color:#fff;
  text-decoration:none;
  transition:transform .2s ease, opacity .2s ease;
}

/* ขนาดไอคอน + reset */
.social-icon i{
  font-size:18px;
  line-height:1;                /* กันลอย */
  display:block;                /* ลดผลของ baseline */
}

/* สีแบรนด์ */
.social-icon.fb{     background:#1877F2; }
.social-icon.tiktok{ background:#000000; }
.social-icon.yt{     background:#FF0000; }

/* Hover */
.social-icon:hover{
  transform:translateY(-2px);
  opacity:.9;
}

/* ---- Fine-tune offset รายไอคอน (สำคัญ) ---- */
/* ฟอนต์ของ FA บางตัวมีน้ำหนักไม่สมดุล จูนด้วย px เล็กน้อย */
.social-icon .fa-facebook-f{ position:relative; top:7px;  left:0.2px; }
.social-icon .fa-youtube{    position:relative; top:7px; }
.social-icon .fa-tiktok{     position:relative; top:7px; }

/* จอเล็กลงนิด */
@media (max-width:576px){
  .social-icon{ width:34px; height:34px; border-radius:9px; }
  .social-icon i{ font-size:17px; }
  .social-title{ font-size:16px; }
}