.i-semi-close,
.i-semi-comment {
    background-color: currentColor;
    display: inline-block;
}

.float-button-chat-bot {
    width: 48px;
    height: 48px;
    bottom: 32px;
    right: 32px;
    position: fixed;
    z-index: 10;
}

.float-button-chat-bot .btn-chat-bot {
    background-color: #007aff;
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
}

.float-button-chat-bot .i-semi-comment {
    background: url(../images/icon/icon-chat.png);
    background-size: contain;
    width: 24px;
    height: 24px;
}
.float-button-chat-bot .i-semi-location {
    background: url(data:image/svg+xml;utf8;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDExIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMTIiPjwvZGVmcz48ZyBpZD0iU3ZnanNHMTAxMyI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNDU3LjQ1NyA0NDAuNDYzQzQ1Ny40NTcgNDc1LjU1NCAzNjcuMjYyIDUwNCAyNTYgNTA0UzU0LjU0MyA0NzUuNTU0IDU0LjU0MyA0NDAuNDYzYzAtMjcuNTY2IDU1LjY2Ni01MS4wMjggMTMzLjQ3NS01OS44MjUgOS4zMjQgMTIuNTM4IDE4LjQyMyAyNC4zODkgMjYuODk5IDM1LjI0LTI5LjYwNiA0LjIwOC00OS44OTkgMTIuODItNDkuODk5IDIyLjc2MiAwIDE0LjA4NiA0MC43MzQgMjUuNTA1IDkwLjk4MiAyNS41MDVzOTAuOTgyLTExLjQxOSA5MC45ODItMjUuNTA1YzAtOS45MzMtMjAuMjU3LTE4LjUzOS00OS44MjEtMjIuNzUxIDguNTI2LTEwLjg2NyAxNy42NjItMjIuNzExIDI3LjAxNC0zNS4yMjkgNzcuNzA4IDguODEzIDEzMy4yODIgMzIuMjU5IDEzMy4yODIgNTkuODAzek0yNTYgOEMxNjcuOTg4IDggOTYuNjQgNzkuMzQ4IDk2LjY0IDE2Ny4zNmMwIDczLjEzOSAxMDYuMjMzIDIwOC4yMTUgMTU1LjQ2MiAyNjkuNjY3Ljk3OSAxLjIyMyAyLjMyOCAxLjg3IDMuODk3IDEuODcgMS41NjcuMDAzIDIuOTE1LS42NDUgMy44OTctMS44NjUgNDcuMTktNTguODA1IDE1NS40NjMtMTk0LjUyNCAxNTUuNDYzLTI2OS42NzJDNDE1LjM2IDc5LjM0OCAzNDQuMDEyIDggMjU2IDh6bTAgNzUuNjY0YzQ2LjExNiAwIDgzLjUwMiAzNy4zODYgODMuNTAyIDgzLjUwMiAwIDQ2LjExNy0zNy4zODUgODMuNTAyLTgzLjUwMiA4My41MDJzLTgzLjUwMi0zNy4zODUtODMuNTAyLTgzLjUwMmMwLTQ2LjExNiAzNy4zODUtODMuNTAyIDgzLjUwMi04My41MDJ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJjb2xvcjAwMCBzdmdTaGFwZSI+PC9wYXRoPjwvc3ZnPjwvZz48L3N2Zz4=);
    background-size: contain;
    width: 24px;
    height: 24px;
}
.float-button-chat-bot .btn-chat-bot.active .i-semi-comment {
    background: url(../images/icon/icon-close.png);
    background-size: contain;
    width: 24px;
    height: 24px;
}

.t-btn-support-contact {
    background-color: #fc8800;
}

.t-btn-support-zalo {
    background-color: #007aff;
}

.t-btn-support-telegram {
    background: linear-gradient(203.2deg, #37aee2 21.67%, #1e96c8 70%);
}

.t-btn-support-facebook {
    background: linear-gradient(220.97deg, #ff666d 8.67%, #9539fe 52.12%, #0191ff 87.37%);
}
.t-btn-support-location{
    background: red;
}

.t-btn-support-caresoft {
    background-color: #f93920;
}

.float-wrapper {
    display: flex;
    flex-direction: column;
    bottom: 100%;
    position: absolute;
    right: 0;
}

.float-wrapper .float-item {
    --duration: 200ms;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    transition: opacity .2s ease-in-out;
    transition: opacity var(--duration) ease-in-out;
    margin-bottom: 8px;
    opacity: 0;
    z-index: -1;
}

.float-wrapper .float-item.active {
    opacity: 1;
    z-index: 1;
}

.float-wrapper .float-item span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 150%;
    white-space: nowrap;
}

.float-wrapper .float-item a {
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 6px;
}

.overlays {
    display: none;
    overflow: hidden;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.overlays.active {
    display: block;
}

@media (max-width: 767px) {
    .float-button-chat-bot {
        bottom: 90px;
        right: 8px;
    }
}