.main-widget {

    position: fixed;

    right: 15px;

    bottom: 80px;

    z-index: 3;

    top: auto !important;

}

.def-content {

    position: absolute;

    bottom: 62px;

    right: 0;

    background: #fff;

    border-radius: 8px;

    transition: 0.2s all;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    width: 300px;

    z-index: 1;

}

.def-content:before {

    position: absolute;

    bottom: -8px;

    right: 22px;

    left: auto;

    display: inline-block !important;

    border-right: 8px solid transparent;

    border-top: 8px solid #fff;

    border-left: 8px solid transparent;

    content: '';

}

.def-header {

    padding: 10px;

    border-radius: 8px 8px 0 0;

    color: #fff;

    position: relative;

}

.def-content .def-header .close-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    position: absolute;

    right: 10px;

    top: 10px;

    left: initial;

    padding: 0;

    margin: 0;

    border: none;

    background: var(--support-color);

    line-height: 1;

    width: 26px;

    height: 26px;

    cursor: pointer;

    color: #fff;

    border-radius: 50%;

    text-align: center;

}

.main-widget .close-icon svg {

    width: 25px;

    height: 25px;

}

.def-content .item > a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 10px;

    transition: 0.3s linear all;

}

.def-content .item.phone > a .img {

    background: #dc3232;

}

.def-content .item > a .img {

    flex-grow: 0;

    flex: none;

    height: 34px;

    width: 34px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 10px;

    border-radius: 50%;

    color: #fff !important;

}

.def-content .item > a .img svg {

    height: 20px;

    width: 20px;

}

.def-content .item svg {

    fill: #fff;

}

.def-content .item > a .detail {

    flex-grow: 1;

    line-height: 1.2;

    height: 34px;

}

.def-content .item > a .arcu-item-title {

display: block;

    line-height: 1.2;

    color: #000;

    font-size: 14px;

    font-weight: bold

}

.def-content .item > a .arcu-item-subtitle {

    font-size: 14px;

    color: #787878;

}

.def-content .item.mess>a .img {

    background: #31ADFF;

}

.out-circle {overflow: hidden;padding: 5px;border-radius: 100%;width: 60px;height: 60px;}

.pregan {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: -2;

    border-radius: 100%;

    opacity: 0.6;

    animation: zoomzoom 3s linear .2s infinite

}

.pregan:nth-child(1) {

    animation-delay: .5s

}

@keyframes zoomzoom{

    0% {

        transform: scale(0);

    }

    100% {

        transform: scale(1.2);

    }

}

.main-icon {line-height: 0;color: #fff;width: 100%;height: 100%;display: flex;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;align-items: center;justify-content: center;flex-direction: column;}

.main-icon svg {width: 20px;height: 20px;fill: #fff;margin-bottom: 0;}

.main-icon p {

    font-size: 1rem;

    color: #fff;

    margin: 0px;

}

.close-toggle {

    opacity: 1;

    transition: all .25s ease;

}



.close-toggle.unsee {

    opacity: 0;

    pointer-events: none;

    transform: scale(0.8);

}

.process {

    display: inline-flex;

    transform: translateX(0px);

    transition: 0.15s linear transform;

    line-height: 0

}

.main-widget .close-icon {display: flex;justify-content: center;align-items: center;position: absolute;font-size: 25px;top: 0;padding: 10px;left: 0;width: 60px;height: 60px;line-height: 1;text-align: center;color: #fff;background: #6d0201;border-radius: 100%;transition: .2s all;transform: rotate(0);cursor: pointer}

.main-widget .close-icon svg {

    width: 25px;

    height: 25px

}

.main-icon p {font-size: 13px;margin-top: 0;}

.close-icon.unsee {

    transform: rotate(180deg)

}

.main-widget .def-content {

    opacity: 1;

    transform: translateY(0) scale(1);

    pointer-events: auto;

    transition: all .35s cubic-bezier(.4,0,.2,1);

}

.main-widget .def-content.unsee {

    opacity: 0;

    pointer-events: none;

    transform: translateY(20px) scale(.95);

}

.def-content .item.zalo > a .img {

    background: #0165f8;

}

.def-content .item.hotline > a .img {
    background: #dc3232;
}

.def-content .item.zalo > a .img {
    background: #0165f8;
}

.def-content .item.messenger > a .img {
    background: #31adff;
}

.def-content .item.tiktok > a .img {
    background: #111827;
}

.def-content .item.maps > a .img {
    background: #16a34a;
}

.def-content .item > a .img svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}
.def-content .item > a .img img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}