/* Mac dinh an ca 2 menu, media nao can thi bat menu do */
:root {
    --ishen-mbtm-overall-bg: #161615;
    --ishen-mbtm-overall-bg-96: rgba(22, 22, 21, 0.96);
    --ishen-mbtm-mobile-bg: #1f1e1b;
    --ishen-mbtm-mobile-bg-96: rgba(31, 30, 27, 0.96);
    --ishen-mbtm-desktop-bg: #161615;
    --ishen-mbtm-desktop-bg-96: rgba(22, 22, 21, 0.96);
    --ishen-mbtm-outer-border: #d9a24e;
    --ishen-mbtm-outer-border-08: rgba(217, 162, 78, 0.08);
    --ishen-mbtm-outer-border-16: rgba(217, 162, 78, 0.16);
    --ishen-mbtm-outer-border-18: rgba(217, 162, 78, 0.18);
    --ishen-mbtm-outer-border-28: rgba(217, 162, 78, 0.28);
    --ishen-mbtm-outer-border-35: rgba(217, 162, 78, 0.35);
    --ishen-mbtm-outer-border-42: rgba(217, 162, 78, 0.42);
    --ishen-mbtm-icon-main: #d9a24e;
    --ishen-mbtm-icon-active: #1f1710;
    --ishen-mbtm-text: #c9c2b6;
    --ishen-mbtm-hover-bg: rgba(240, 194, 113, 0.055);
    --ishen-mbtm-icon-border: #dea95b;
    --ishen-mbtm-icon-border-32: rgba(222, 169, 91, 0.32);
    --ishen-mbtm-icon-border-36: rgba(217, 162, 78, 0.36);
    --ishen-mbtm-icon-bg: #1b1a18;
    --ishen-mbtm-icon-bg-72: rgba(24, 23, 21, 0.72);
    --ishen-mbtm-main-bg: #d59c4d;
    --ishen-mbtm-main-bg-07: rgba(217, 162, 78, 0.07);
    --ishen-mbtm-main-bg-08: rgba(222, 169, 91, 0.08);
    --ishen-mbtm-main-bg-18: rgba(217, 162, 78, 0.18);
    --ishen-mbtm-main-bg-36: rgba(166, 109, 47, 0.36);
    --ishen-mbtm-main-bg-42: rgba(222, 169, 91, 0.42);
    --ishen-mbtm-main-border: #ffe6ae;
    --ishen-mbtm-main-border-75: rgba(255, 230, 174, 0.75);
    --ishen-mbtm-main-border-95: rgba(255, 244, 221, 0.95);
}

.ishen-mobile-bottom-menu,
.ishen-desktop-contact-menu {
    display: none;
}



/* Chi ap dung style khi man hinh toi da 768px */
@media (max-width: 768px) {

    .ishen-desktop-contact-menu {
        display: none;
    }

    /* Thanh menu co dinh sat day man hinh */
    .ishen-mobile-bottom-menu {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 6px;
        z-index: 99999;
        border-radius: 40px;
        height: 60px;
        background:
            radial-gradient(circle at 50% -35%, var(--ishen-mbtm-main-bg-18) 0%, var(--ishen-mbtm-main-bg-08) 30%, transparent 58%),
            linear-gradient(180deg, var(--ishen-mbtm-mobile-bg-96) 0%, var(--ishen-mbtm-overall-bg-96) 100%);
        border: 1px solid var(--ishen-mbtm-outer-border-16);
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow:
            inset 0 1px 0 rgba(255, 244, 221, 0.08),
            inset 0 -1px 0 rgba(0, 0, 0, 0.48),
            0 -10px 28px rgba(0, 0, 0, 0.24);
        overflow: hidden;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .ishen-mobile-bottom-menu::before {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 36px;
        border: 1px solid rgba(255, 244, 221, 0.05);
        background: linear-gradient(90deg, transparent 0%, var(--ishen-mbtm-main-bg-08) 50%, transparent 100%);
        pointer-events: none;
    }

    /* Moi nut chiem 20% vi menu co 5 nut */
    .ishen-bottom-item {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    /* Style chung cho cac icon tron trong menu */
    .ishen-bottom-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        color: var(--ishen-mbtm-icon-main);
        background: var(--ishen-mbtm-icon-bg-72);
        border: 1px solid var(--ishen-mbtm-icon-border-36);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    }


    .ishen-bottom-icon i,
    .ishen-bottom-icon .ishen-zalo-letter {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: var(--ishen-mbtm-icon-main);
        line-height: 1;
    }

    .ishen-bottom-icon i {
        font-size: 16px;
    }

    .ishen-bottom-icon .ishen-zalo-letter {
        font-size: 17px;
        font-weight: 800;
    }

    /* Mau rieng cho nut len dau trang */
    .ishen-top {
        font-size: 18px;
    }

    /* Nut goi dien chinh */
    .ishen-call-item {
        transform: none;
        z-index: 2;
    }

    /* Vong tron lon bao quanh icon dien thoai */
    .ishen-call-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        background: radial-gradient(circle at 36% 28%, var(--ishen-mbtm-main-border) 0%, var(--ishen-mbtm-main-bg) 56%, var(--ishen-mbtm-outer-border) 100%);
        color: var(--ishen-mbtm-icon-active);

        display: flex;
        align-items: center;
        justify-content: center;

        border: 4px solid var(--ishen-mbtm-main-border-95);
        box-shadow:
            0 0 0 5px var(--ishen-mbtm-main-bg-18),
            0 0 0 10px var(--ishen-mbtm-main-bg-07),
            0 6px 18px var(--ishen-mbtm-main-bg-36);
        position: relative;
    }

    /* Xoay nhe icon dien thoai de nhin giong nut hotline */
    .ishen-phone-icon {
        display: inline-flex;
        font-size: 26px;
        line-height: 1;
        transform: rotate(-12deg);
        transform-origin: center;
        animation: ishen-phone-shake 1.2s ease-in-out infinite;
    }


    .ishen-phone-icon i {
        color: var(--ishen-mbtm-icon-active);
        font-size: 22px;
        line-height: 1;
    }


    /* Tao vong pulse bao quanh nut goi dien */
    .ishen-call-circle::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 1px solid var(--ishen-mbtm-outer-border-35);
        animation: ishen-phone-pulse 1.6s infinite;
    }

    /* Animation phong to va mo dan cho vong pulse */
    @keyframes ishen-phone-pulse {
        0% {
            transform: scale(0.9);
            opacity: 0.9;
        }

        100% {
            transform: scale(1.25);
            opacity: 0;
        }
    }

    /* Animation rung nhe rieng cho icon dien thoai */
    @keyframes ishen-phone-shake {

        0%,
        100% {
            transform: rotate(-12deg);
        }

        10%,
        30%,
        50% {
            transform: rotate(-24deg);
        }

        20%,
        40%,
        60% {
            transform: rotate(2deg);
        }

        70% {
            transform: rotate(-12deg);
        }
    }
}

@media (min-width: 769px) {

    /* Mac dinh an menu mobile tren desktop */
    .ishen-mobile-bottom-menu {
        display: none;
    }

    .ishen-desktop-contact-menu {
        position: fixed;
        right: 22px;
        bottom: 64px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ishen-desktop-contact-list {
        display: flex;
        flex-direction: column;
    }

    /* Desktop kieu 2: floating icon khong nen, luon hien */
    .ishen-desktop-contact-menu--always-show {
        position: fixed;
        right: 22px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 9999;
    }

    /* Danh sach icon */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-list {
        position: static;
        align-items: center;
        gap: 16px;

        width: auto;
        padding: 0;
        margin: 0;

        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    /* An nut Lien he chinh */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-main {
        display: none;
    }

    /* Moi item chi con la 1 icon tron */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-item {
        width: 58px;
        height: 58px;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        background: transparent;
        border: none;
        box-shadow: none;

        text-decoration: none;
        animation: ishen-floating-contact-shake 2.2s infinite;
    }

    /* Bo text Facebook / Zalo / Hotline / Dia chi */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-item>span:not(.ishen-desktop-contact-icon) {
        display: none;
    }

    /* Icon chinh */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        background: var(--ishen-mbtm-overall-bg-96);
        border: 1px solid var(--ishen-mbtm-icon-border-36);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);

        position: relative;
    }

    /* Vong border day co dinh nam ngoai icon */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-icon::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 8px solid var(--ishen-mbtm-outer-border-16);
        pointer-events: none;
    }

    /* Vong toa bat dau tu ngoai vong border */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-icon::after {
        content: "";
        position: absolute;
        inset: -18px;
        border-radius: 50%;
        border: 4px solid var(--ishen-mbtm-outer-border-28);
        opacity: 0;
        pointer-events: none;
        animation: ishen-contact-pulse-ring-outer 2s ease-out infinite;
    }

    /* Icon font hotline */
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-icon i,
    .ishen-desktop-contact-menu--always-show .ishen-desktop-contact-icon .ishen-zalo-letter {
        width: 34px;
        height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        font-size: 22px;
        color: var(--ishen-mbtm-icon-main);
        background: transparent;
        font-weight: 800;

        position: relative;
        z-index: 2;
    }

    /* Hieu ung rung nhe gay chu y */
    @keyframes ishen-floating-contact-shake {
        0% {
            transform: translateX(0) rotate(0);
        }

        4% {
            transform: translateX(-2px) rotate(-4deg);
        }

        8% {
            transform: translateX(2px) rotate(4deg);
        }

        12% {
            transform: translateX(-2px) rotate(-3deg);
        }

        16% {
            transform: translateX(2px) rotate(3deg);
        }

        20% {
            transform: translateX(0) rotate(0);
        }

        100% {
            transform: translateX(0) rotate(0);
        }
    }

    @keyframes ishen-contact-pulse-ring-outer {
        0% {
            transform: scale(0.82);
            opacity: 0;
        }

        12% {
            opacity: 0.65;
        }

        75% {
            transform: scale(1.9);
            opacity: 0;
        }

        100% {
            transform: scale(1.9);
            opacity: 0;
        }
    }


    /* -------------------------------------------- Giao dien desktop mau vang/den */
    .ishen-desktop-contact-menu--toggle,
    .ishen-desktop-contact-menu--open-list {
        right: 28px;
        bottom: 54px;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-list {
        position: relative;
        width: 130px;
        gap: 0;
        margin-bottom: 18px;
        background: var(--ishen-mbtm-desktop-bg-96);
        border: 1px solid var(--ishen-mbtm-outer-border-08);
        border-radius: 6px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    }

    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-list {
        position: relative;
        width: 130px;
        gap: 0;
        margin-bottom: 18px;
        background: var(--ishen-mbtm-desktop-bg-96);
        border: 1px solid var(--ishen-mbtm-outer-border-08);
        border-radius: 6px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .ishen-desktop-contact-menu--toggle.is-active .ishen-desktop-contact-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-list::after,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-list::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -8px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid var(--ishen-mbtm-desktop-bg-96);
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-item,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-item {
        min-width: 0;
        width: 100%;
        min-height: 42px;
        padding: 10px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        color: var(--ishen-mbtm-text);
        font-size: 11px;
        font-weight: 400;
        line-height: 1.2;
        text-decoration: none;
        border-radius: 0;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-item:not(:last-child),
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-item:not(:last-child) {
        border-bottom: 1px solid var(--ishen-mbtm-outer-border-08);
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-item:hover,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-item:hover {
        color: var(--ishen-mbtm-icon-main);
        background: var(--ishen-mbtm-hover-bg);
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-icon,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-icon {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ishen-mbtm-icon-bg);
        border: 1px solid var(--ishen-mbtm-icon-border-32);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-item span:nth-child(2),
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-item span:nth-child(2) {
        font-size: 12px;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-icon i,
    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-icon .ishen-zalo-letter,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-icon i,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-icon .ishen-zalo-letter {
        color: var(--ishen-mbtm-icon-main);
        line-height: 1;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-icon i,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-icon i {
        font-size: 15px;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-icon .ishen-zalo-letter,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-icon .ishen-zalo-letter {
        font-size: 17px;
        font-weight: 800;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-main-icon,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-main-icon {
        font-size: 24px;
        line-height: 1;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-main,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-main {
        width: 72px;
        height: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        color: var(--ishen-mbtm-icon-active);
        background: radial-gradient(circle at 35% 28%, var(--ishen-mbtm-main-border) 0%, var(--ishen-mbtm-main-bg) 58%, var(--ishen-mbtm-outer-border) 100%);
        border: 3px solid var(--ishen-mbtm-main-border-75);
        border-radius: 50%;
        box-shadow:
            0 0 0 5px var(--ishen-mbtm-main-bg-18),
            0 0 0 10px var(--ishen-mbtm-main-bg-08),
            0 10px 28px var(--ishen-mbtm-main-bg-42);
        font-size: 12px;
        font-weight: 700;
        text-shadow: none;
        cursor: pointer;
        position: relative;
        overflow: visible;
        animation: ishen-contact-shake 1.6s infinite;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-main::before,
    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-main::after,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-main::before,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-main::after {
        content: "";
        position: absolute;
        inset: -9px;
        border: 2px solid var(--ishen-mbtm-outer-border-42);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        animation: ishen-contact-pulse 1.8s infinite;
    }

    .ishen-desktop-contact-menu--toggle .ishen-desktop-contact-main::after,
    .ishen-desktop-contact-menu--open-list .ishen-desktop-contact-main::after {
        animation-delay: 1s;
    }

    @keyframes ishen-contact-shake {

        0%,
        25%,
        100% {
            transform: rotate(0deg);
        }

        5%,
        15% {
            transform: rotate(-6deg);
        }

        10%,
        20% {
            transform: rotate(6deg);
        }
    }

    @keyframes ishen-contact-pulse {
        0% {
            transform: scale(0.85);
            opacity: 0.65;
        }

        70% {
            transform: scale(1.45);
            opacity: 0;
        }

        100% {
            transform: scale(1.45);
            opacity: 0;
        }
    }


}

/* =============================================== */