/* ปุ่มหลัก Trigger */
.contact-trigger {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* เส้น Hamburger */
.hamburger-box { width: 20px; height: 16px; position: relative; }
.h-inner, .h-inner::before, .h-inner::after { 
    width: 20px; height: 2px; background: white; 
    position: absolute; transition: 0.3s; border-radius: 2px; 
}
.h-inner { top: 50%; transform: translateY(-50%); }
.h-inner::before { content: ""; top: -6px; }
.h-inner::after { content: ""; bottom: -6px; }

/* แปลงเป็น X เมื่อ Active */
.contact-trigger.active .h-inner { background: transparent !important; }
.contact-trigger.active .h-inner::before { transform: translateY(6px) rotate(45deg); }
.contact-trigger.active .h-inner::after { transform: translateY(-6px) rotate(-45deg); }

/* กล่องเก็บไอคอน Social */
.contact-icons {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.contact-icons.active { 
    opacity: 1; 
    visibility: visible; 
    transform: translate(0,0) !important; 
}

/* วงกลมไอคอนแต่ละตัว */
.icon-circle {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    color: white;
    transition: transform 0.2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.icon-circle:hover { transform: scale(1.1); }

/* ปรับให้ Icon/Image อยู่ตรงกลางและมี Padding ตามที่ตั้งค่า */
.icon-circle i, 
.icon-circle svg, 
.icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box; /* สำคัญ: เพื่อให้ Padding ทำงานได้ถูกต้อง */
}