/* ==========================================================================
   SHARE BUTTONS COMPONENT (ปุ่มแชร์ต่อบทความ)
   ========================================================================== */
/* ==========================================================================
   SHARE BUTTONS COMPONENT (ปุ่มแชร์ต่อบทความปรับปรุงสีสันเด่นชัด)
   ========================================================================== */
.article-share-footer-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0;
    margin: 30px 0;
    border-top: 1px dashed #e2e8f0;
    border-bottom: 1px dashed #e2e8f0;
}
.share-label-text {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
}
.share-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* ปรับลดช่องว่างระหว่างปุ่มลงเล็กน้อยเพื่อให้กระชับขึ้น */
}

.btn-share-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* กระชับช่องว่างระหว่างไอคอนกับตัวอักษรด้านใน */
    height: 38px; /* ปรับความสูงลงเล็กน้อยให้ดูเพรียวเข้ากับความกว้างใหม่ */
    width: 112px; /* 🔥 แก้ไขจุดนี้: ปรับลดจาก 130px เพื่อให้ดันขึ้นมาแถวเดียวกันได้ทั้งหมด */
    border-radius: 50px;
    font-size: 13px; /* ปรับขนาดอักษรลง 1px เพื่อไม่ให้ข้อความเบียดขอบปุ่ม */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffffff !important;
    box-sizing: border-box;
}
.btn-share-social i {
    color: #ffffff !important;
    font-size: 15px;
}
.btn-share-social:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ย้ายมากำหนดสีหลักประจำค่ายโซเชียลมีเดียแบบดั้งเดิม ให้แสดงสีสวยงามทันทีตั้งแต่แรกโหลด */
.btn-share-social.line { background-color: #06c755; }
.btn-share-social.fb { background-color: #1877f2; }
.btn-share-social.messenger { background-color: #006aff; }
.btn-share-social.pinterest { background-color: #bd081c; }
.btn-share-social.twitter { background-color: #000000; }
.btn-share-social.copy-link { background-color: #475569; }

/* เอฟเฟกต์เงาและเปลี่ยนระดับมิติเวลาเปิดการ Hover เมาส์ชี้ปุ่ม */
.btn-share-social.line:hover { box-shadow: 0 4px 12px rgba(6, 199, 85, 0.35); }
.btn-share-social.fb:hover { box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35); }
.btn-share-social.messenger:hover { box-shadow: 0 4px 12px rgba(0, 106, 255, 0.35); }
.btn-share-social.pinterest:hover { box-shadow: 0 4px 12px rgba(189, 8, 28, 0.35); }
.btn-share-social.twitter:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.btn-share-social.copy-link:hover { background-color: #1e293b; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.35); }

@media (max-width: 576px) {
    .article-share-footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .share-buttons-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .btn-share-social {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 10px 12px;
        height: 42px;
    }
}