/* ==========================================================================
   BO NUT CHIA SE MANG XA HOI  (libraries/sample/social/share.php)
   - .social-share            : khung bao
   - .share-btn               : 1 nut tron
   - [data-device="mobile"]   : mang chi chay tren app dien thoai -> an tren PC
   - [data-device="native"]   : nut Web Share API -> chi hien khi trinh duyet ho tro
   ========================================================================== */

.social-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    --share-size: 34px;
    --share-gap: 6px;
}

.social-share--sm {
    --share-size: 28px;
    --share-gap: 5px;
}

.social-share--lg {
    --share-size: 42px;
    --share-gap: 8px;
}

.social-share__label {
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.social-share__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--share-gap);
    min-height: var(--share-size);
}

/* --------------------------------------------------------------- Nut tron */
.share-btn {
    --share-color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--share-size);
    height: var(--share-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--share-color);
    color: #fff !important;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.share-btn__icon {
    width: 56%;
    height: 56%;
    display: block;
    pointer-events: none;
}

.share-btn:hover,
.share-btn:focus-visible {
    color: #fff !important;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 16px -8px var(--share-color), 0 2px 6px rgba(0, 0, 0, .2);
    filter: saturate(1.15);
}

.share-btn:focus-visible {
    outline: 2px solid var(--share-color);
    outline-offset: 2px;
}

.share-btn:active {
    transform: translateY(-1px) scale(.97);
}

/* ------------------------------------------------------------ Mau thuong hieu */
.share-btn--facebook  { --share-color: #1877f2; }
.share-btn--messenger { --share-color: #0084ff; }
.share-btn--zalo      { --share-color: #0068ff; }
.share-btn--twitter   { --share-color: #000000; }
.share-btn--telegram  { --share-color: #229ed9; }
.share-btn--whatsapp  { --share-color: #25d366; }
.share-btn--linkedin  { --share-color: #0a66c2; }
.share-btn--pinterest { --share-color: #e60023; }
.share-btn--email     { --share-color: #ea4335; }
.share-btn--sms       { --share-color: #34a853; }
.share-btn--viber     { --share-color: #7360f2; }
.share-btn--copy      { --share-color: #5f6368; }
.share-btn--native    { --share-color: #111827; }
.share-btn--more      { --share-color: #ffc107; }

/* Zalo: chu "Zalo" trong vong tron */
.share-btn--zalo .share-btn__icon {
    width: 82%;
    height: 82%;
}

/* Nut Zalo chinh chu (zalo_sdk = true) */
.share-btn--zalo-sdk {
    background: none;
    box-shadow: none;
    width: auto;
    height: var(--share-size);
    border-radius: 0;
}

.share-btn--zalo-sdk:hover {
    transform: none;
    box-shadow: none;
}

/* Da sao chep link */
.share-btn--copy.is-copied {
    --share-color: #28a745;
}

/* Nut "+" khi dang mo rong */
.share-btn--more[aria-expanded="true"] .share-btn__icon {
    transform: rotate(45deg);
    transition: transform .25s ease;
}

.share-btn--more .share-btn__icon {
    transition: transform .25s ease;
}

/* ==========================================================================
   AN / HIEN THEO THIET BI
   Mac dinh: an cac mang chi chay tren app dien thoai + nut Web Share.
   JS (assets/js/share.js) gan class len <html>:
     .is-mobile-device  -> thiet bi di dong
     .can-native-share  -> trinh duyet ho tro navigator.share
   ========================================================================== */

.social-share [data-device="mobile"],
.social-share [data-device="native"] {
    display: none;
}

html.is-mobile-device .social-share [data-device="mobile"],
html.can-native-share .social-share [data-device="native"] {
    display: inline-flex;
}

/* Du phong khi JS bi tat: man hinh cam ung -> coi nhu mobile */
@media (hover: none) and (pointer: coarse) {
    html:not(.share-js) .social-share [data-device="mobile"] {
        display: inline-flex;
    }
}

/* Thuoc tinh hidden luon thang display cua .share-btn */
.share-btn[hidden] {
    display: none !important;
}

/* Nut bi thu gon sau nut "+" */
.social-share .share-btn.is-extra {
    display: none !important;
}

.social-share.is-expanded .share-btn.is-extra {
    display: inline-flex !important;
    animation: shareFadeIn .25s ease both;
}

@keyframes shareFadeIn {
    from {
        opacity: 0;
        transform: scale(.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tuong thich khung .share san co trong base.css:
   dua nhan "Chia se" nam ngang hang voi day nut */
.share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 15px;
}

.share > b {
    display: inline-block;
    margin-right: 0;
    white-space: nowrap;
}

.share .social-plugin,
.share .social-share {
    margin-top: 0;
}

@media (max-width: 575.98px) {
    .social-share {
        --share-size: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .share-btn,
    .share-btn:hover,
    .social-share.is-expanded .share-btn.is-extra {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}