.online-support {
    display: block;
    position: fixed;
    left: 10px;
    bottom: calc(10% - 50px);
    z-index: 9;
    border: 1px solid rgba(0,0,0,.2);
    background-color: #fff;
    border-radius: 4px;
    width: 30px;
    transition: width .5s;
    overflow: hidden;
}

    .online-support:hover {
        width: 134px;
    }

    .online-support li::after {
        display: block;
        clear: both;
        content: "";
    }

    .online-support li a {
        line-height: 24px;
        font-size: 14px;
        color: #000;
        display: block;
        margin: 5px;
        white-space: nowrap;
    }

        .online-support li a:hover {
            color: var(--maincolor);
        }

        .online-support li a span {
            line-height: 24px;
            vertical-align: super;
        }

.icon-icon-zalo {
    background-image: url(../Content/images/zalo.png);
    background-size: 100%;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

i[class^=icon-] {
    display: inline-block;
    text-align: center;
}

.online-support li i {
    vertical-align: middle;
    margin: 0 5px;
    float: left;
}

.icon-icon-chat {
    background-image: url(..//Content/images/chat.png);
    background-size: 100%;
    width: 20px;
    height: 20px;
}

.icon-icon-phone {
    background-image: url(../Content/images/call-phone.png);
    background-size: 100%;
    width: 24px;
    height: 24px;
    margin-left: 2px !important;
}

.online-support.open {
    width: 134px;
}