@media screen and (min-width: 768px) {
    #listActionCustomer {
        position: fixed;
        right: 15px;
        bottom: 15px;
        z-index: 1049;
        font-size: 15px;
    }

    #listActionCustomer .popupShow {
        display: flex !important;
        height: 30em;
        flex-direction: column;
    }

    #popupChat {
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        width: 24em;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        overflow: hidden;
        border: 1px solid #d7d7d7;
        background: #f4f4f4;
        position: absolute;
        right: 55px;
        bottom: -15px;
        z-index: 1010;
        display: none;
    }

    #popupChat .chatHeader {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f4f4f4;
        border-bottom: 1px solid #d1d1d1;
        padding: 8px 10px;
    }

    #popupChat .chatLogo {
        position: relative;
    }

    #popupChat .chatImage {
        height: 26px;
        width: 26px;
        border-radius: 100%;
        overflow: hidden;
    }

    #popupChat .chatImage img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    #popupChat .chatTitle {
        width: calc(100% - 66px);
        padding-left: 10px;
        padding-right: 10px;
        color: #333;
        font-weight: 500;
        font-size: 1em;
        line-height: 1.6;
    }

    #popupChat .chatAction {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 40px;
    }

    #popupChat .chatAction > a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 25px;
        height: 25px;
        margin-left: 8px;
        margin-right: -10px;
        padding-right: 10px;
        color: #222;
        -webkit-transition: .3s all ease-in;
        -o-transition: .3s all ease-in;
        transition: .3s all ease-in;
    }

    #popupChat .chatAction > a:hover {
        color: #017D63;
    }

    #popupChat .chatAction > a:first-of-type {
        margin-left: 0;
    }

    #popupChat .chatFooter {
        background-color: #f4f4f4;
        border-top: 1px solid #d1d1d1;
        padding: 8px;
        position: relative;
    }

    #popupChat .chatFooter textarea {
        max-width: 100%;
        border-radius: 15px;
        margin-right: 5px;
        margin-left: 5px;
        padding: 4px 10px;
        height: 34px;
        min-height: 34px;
        max-height: 100px;
        border: 1px solid #d1d1d1;
        background-color: #fff;
        width: 100%;
        resize: none;
        outline: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        line-height: 1.5;
    }

    #popupChat .chatFooter #sendMessage {
        background-color: transparent;
        outline: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 1px solid transparent;
        border-radius: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
        font-size: 1.05em;
        flex-shrink: 0;
        color: blue;
    }

    #popupChat .chatFooter .callEmoji {
        background-color: transparent;
        outline: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 1px solid transparent;
        border-radius: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: -5px;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
        font-size: 1.2em;
        color: blue;
        flex-shrink: 0;
    }

    #popupChat .chatFooter .callEmoji:active,
    #popupChat .chatFooter .callEmoji:hover,
    #popupChat .chatFooter button:active,
    #popupChat .chatFooter button:hover {
        background-color: #fff;
        border-color: #f4f4f4;
    }

    #popupChat .chatFooter .emoji-float {
        position: absolute;
        bottom: 41px;
        left: 0.5em;
        padding: 8px;
        background: #fff;
        box-shadow: 0 0 10px 0 rgb(0, 0, 0, 8%);
        border: 1px solid #e1e4e4;
        border-radius: 4px;
        z-index: 999;
        width: 80%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0);
        transform-origin: left bottom;
        transition: .1s all ease-in-out;
    }

    #popupChat .chatFooter .emoji-float.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        pointer-events: auto;
    }

    #popupChat .chatFooter .emoji-float .emoji-tab {
        padding: 0 10px;
        border-bottom: 1px solid #e1e4e4;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #popupChat .chatFooter .emoji-float .emoji-tab .emoji-tab_item {
        display: inline-block;
        color: #232323;
        font-weight: 600;
        font-size: .9em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 4px 0 6px;
        margin: 6px auto 0;
        position: relative;
        transition: .3s all ease-in-out;
    }

    #popupChat .chatFooter .emoji-float .emoji-tab .emoji-tab_item:before {
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: calc(100% + 20px);
        background: transparent;
        display: block;
        content: "";
        opacity: 0;
        visibility: hidden;
        transition: .3s all ease-in-out;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body {
        padding: 10px 0 0 0;
        margin-right: -5px;
        height: 200px;
        overflow-y: auto;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_list {
        display: flex;
        align-items: center;
        margin: 0;
        flex-wrap: wrap;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_list .chat-Iemoji {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
        width: calc(100% / 8);
        padding: 5px;
        cursor: pointer;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body::-webkit-scrollbar {
        width: 5px;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body::-webkit-scrollbar-track {
        background: #fff;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body::-webkit-scrollbar-thumb {
        background: #acacac;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body::-webkit-scrollbar-thumb:hover {
        background: #7b7b7b;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink_group .chat-Slink_title {
        font-size: .825em;
        margin-bottom: 4px;
        color: #6f6f6f;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink_group + .chat-Slink_group {
        margin-top: 20px;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink {
        display: flex;
        padding: 7px 0;
        border-bottom: 1px dashed #e1e4e4;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink > .chat-Slink_text {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-height: 1.4;
        font-size: .9em;
        width: 100%;
        color: #232323;
        font-weight: 400;
        margin-right: 10px;
        /*text-align: justify;*/
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink > .chat-Slink_btn {
        width: 30px;
        color: #0d6efd;
        text-align: center;
        flex-shrink: 0;
        font-size: .825em;
        cursor: pointer;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink > .chat-Slink_btn > i {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #edf0f3;
        font-size: .9em;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item .emoji-content_body .chat-Slink > .chat-Slink_btn:active {
        color: #0f57c1;
    }

    #popupChat .chatFooter .emoji-float .emoji-tab .emoji-tab_item.active {
        color: #017D63;
    }

    #popupChat .chatFooter .emoji-float .emoji-tab .emoji-tab_item.active:before {
        background: #017D63;
        visibility: visible;
        opacity: 1;
    }

    #popupChat .chatFooter .emoji-float .emoji-content .emoji-content_item {
        -webkit-animation: fadeEffect .2s;
        animation: fadeEffect .2s;
    }

    @-webkit-keyframes fadeEffect {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    #popupChat .chatBody {
        background-color: #fff;
        padding: 10px;
        height: 100%;
        overflow-y: auto;
    }

    #popupChat .chatBody .divTime {
        border-bottom: 1px solid #ddd;
        position: relative;
        margin: 1.3em 0;
    }

    #popupChat .chatBody .divTime span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        padding: 3px 5px;
        border-radius: 12px;
        background: #9a9999;
        color: #fff;
        font-size: .82em;
    }

    #popupChat .chatBody .chatWrapper:not(:first-of-type) {
        margin-top: 0.8em;
    }

    #popupChat .chatBody .chat-you + .chat-you,
    #popupChat .chatBody .chat-me + .chat-me {
        margin-top: .35em;
    }

    #popupChat .chatBody .chat-you .chatText + .chatText .chatDetail .chatDetailAvatar img {
        display: none;
    }

    #popupChat .chatBody .chatText .chatDetail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        max-width: 80%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /*  Sửa */
    #popupChat .chatBody .chat-me .chatText .chatDetail {
        margin-left: auto;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailAvatar {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        overflow: hidden;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailAvatar img {
        width: 100%;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailContent {
        max-width: calc(100% - 30px);
    }

    /*  Sửa */
    #popupChat .chatBody .chat-me .chatText .chatDetail .chatDetailContent {
        max-width: 100%;
    }

    #popupChat .chatBody .chatWrapper .chatText + .chatText {
        margin-top: 0.15em;
    }

    #popupChat .chatBody .chatWrapper span.time {
        display: none !important;
        font-style: italic;
    }

    #popupChat .chatBody .chatWrapper .chatText:last-child span.time {
        display: block !important;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailContent .chatDetailContentMessage {
        color: #2b2d39;
        font-size: .9em;
        padding: 5px 10px;
        border-radius: 8px;
        display: inline-block;
        overflow-wrap: anywhere;
        overflow: hidden;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailContent .chatDetailContentMessage span {
        margin-top: .8em;
        font-size: .75em;
        color: #666;
        text-align: left;
        display: block;
    }

    /*  Sửa */
    #popupChat .chatBody .chat-me .chatText .chatDetail .chatDetailContent .chatDetailContentMessage span {
        color: #b4b4b4;
    }

    #popupChat .chatBody .chatText .chatDetail .chatDetailContent .chatDetailContentMessage:first-of-type {
        margin-top: 0;
    }

    /*  Sửa */
    #popupChat .chatBody .chat-me .chatText .chatDetail .chatDetailContent .chatDetailContentMessage {
        background-color: #2f3a3b;
        box-shadow: 0 0 1px #7c8f96;
        color: #fff;
    }

    #popupChat .chatBody .chat-me .chatText .chatDetail .chatDetailContent .chatDetailContentMessage .warningText {
        color: #FFA34A;
    }

    #popupChat .chatBody .chat-you .chatText .chatDetail .chatDetailContent {
        padding-left: 10px;
        text-align: left;
    }

    #popupChat .chatBody .chat-you .chatText .chatDetail .chatDetailContent .chatDetailContentMessage {
        background-color: #f4f4f4;
        box-shadow: 0 0 1px #949494;
    }

    #popupChat .chatBody .chat-you .chatText .chatDetail .chatDetailContent .chatDetailContentMessage .warningText {
        color: darkred;
    }

    #popupChat .chatLoading {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #popupChat .chatLoading img {
        width: 40px;
    }

    #popupChat .alertHidden {
        height: 30px;
        line-height: 30px;
        clear: both;
        background: #8ebbe2;
        padding: 0 10px;
        font-size: .9em;
        color: darkred;
        display: none;
    }

    #popupChat .alertHidden .btnShowHidden {
        float: right;
        text-decoration: underline;
        cursor: pointer;
        color: blue;
    }

    #popupChat.hiddenInfo .alertHidden {
        display: block;
    }

    /*#popupChat.hiddenInfo .chatBody {*/
    /*    height: calc(313px - 30px);*/
    /*}*/

    #listActionCustomer > ul {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
        visibility: hidden;
        display: none;
        -webkit-transition: 0.2s opacity ease-in, 0.2s visibility ease-in, 0.1s display ease-in, 0.2s -webkit-transform cubic-bezier(0.04, 0.5, 1, 1.51);
        transition: 0.2s opacity ease-in, 0.2s visibility ease-in, 0.1s display ease-in, 0.2s -webkit-transform cubic-bezier(0.04, 0.5, 1, 1.51);
        -o-transition: 0.2s opacity ease-in, 0.2s visibility ease-in, 0.2s transform cubic-bezier(0.04, 0.5, 1, 1.51), 0.1s display ease-in;
    }

    #listActionCustomer > ul.showNoti {
        opacity: 1;
        visibility: visible;
        display: block;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    #listActionCustomer > ul > .actionCustomerItem {
        position: relative;
        cursor: pointer;
        z-index: 2;
        -webkit-transition: .3s all ease-in;
        -o-transition: .3s all ease-in;
        transition: .3s all ease-in;
        margin-top: 1em;
    }

    #listActionCustomer > ul > .actionCustomerItem:first-of-type {
        margin-top: 0;
    }

    #listActionCustomer > ul > .actionCustomerItem > .actionCustomerItemMain {
        height: 48px;
        width: 48px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 1.5em;
        border-radius: 100%;
        overflow: hidden;
        background-color: #02528E;
        color: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
    }

    #listActionCustomer > ul > .actionCustomerItem.showCount > .actionCustomerItemMain {
        background-color: #029C7D;
        color: #fff;
    }

    #listActionCustomer > ul > .actionCustomerItem .countNumber {
        position: absolute;
        top: -5px;
        right: -5px;
        background-color: #e80a0a;
        color: #fff;
        min-height: 20px;
        min-width: 22px;
        font-size: .75em;
        padding: 2px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 100%;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .1s all cubic-bezier(0.04, 0.5, 1, 1.51);
        -o-transition: .1s all cubic-bezier(0.04, 0.5, 1, 1.51);
        transition: .1s all cubic-bezier(0.04, 0.5, 1, 1.51);
    }

    #listActionCustomer > ul > .actionCustomerItem .countNumber.noti-hide {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    #listActionCustomer .actionCustomerPopup #popupNoti {
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        overflow: hidden;
        border: 1px solid #d7d7d7;
        background: #fff;
        position: absolute;
        right: 55px;
        bottom: -15px;
        z-index: 1010;
        width: 24em;
        display: none;
        padding: 0;
        margin-bottom: 0;
        -webkit-transition: .3s all cubic-bezier(0.04, 0.5, 1, 1.51);
        -o-transition: .3s all cubic-bezier(0.04, 0.5, 1, 1.51);
        transition: .3s all cubic-bezier(0.04, 0.5, 1, 1.51);
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiHeader {
        position: relative;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiHeader p {
        color: #333;
        padding: 10px 15px 10px 10px;
        font-weight: 500;
        display: block;
        margin-bottom: 0;
        border-bottom: 1px solid #d1d1d1;
        font-size: 1em;
        background-color: #f1f1f1;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiHeader a {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 10px;
        color: #222;
        font-size: 1em;
        -webkit-transition: .1s all ease-in;
        -o-transition: .1s all ease-in;
        transition: .1s all ease-in;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiHeader a:hover {
        color: #029C7D;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody {
        height: 100%;
        overflow-y: auto;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody > span {
        padding: 10px;
        display: block;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem {
        padding: 10px !important;
        border-bottom: 1px solid #d1d1d1;
        background-color: #fff;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiIcon {
        width: 40px;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 100%;
        font-size: 2em;
    }

    .notiBlue {
        color: #0640ee;
    }

    .notiOrange {
        color: #F6891F;
    }

    .notiRed {
        color: #d9151b;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiContent {
        width: calc(100% - 48px);
        padding-left: 10px;
        padding-right: 10px;
        line-height: 1em;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiContent .notiTitle {
        font-size: 1.05em;
        color: #333;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiContent .notiTime {
        font-size: .85em;
        color: #777;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiView {
        height: 8px;
        width: 8px;
        background-color: #029C7D;
        border-radius: 100%;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem .notiView.notiViewed {
        display: none;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem:hover {
        background-color: #fbfbfb;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody .notiItem:hover .notiContent .notiTitle {
        color: #029C7D;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody::-webkit-scrollbar,
    #listActionCustomer .actionCustomerPopup #popupUser .chatUserBody::-webkit-scrollbar,
    #listActionCustomer .actionCustomerPopup #popupChat .chatBody::-webkit-scrollbar {
        width: 5px;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody::-webkit-scrollbar-track,
    #listActionCustomer .actionCustomerPopup #popupUser .chatUserBody::-webkit-scrollbar-track,
    #listActionCustomer .actionCustomerPopup #popupChat .chatBody::-webkit-scrollbar-track {
        background: #fff;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody::-webkit-scrollbar-thumb,
    #listActionCustomer .actionCustomerPopup #popupUser .chatUserBody::-webkit-scrollbar-thumb,
    #listActionCustomer .actionCustomerPopup #popupChat .chatBody::-webkit-scrollbar-thumb {
        background: #acacac;
    }

    #listActionCustomer .actionCustomerPopup #popupNoti .notiBody::-webkit-scrollbar-thumb:hover,
    #listActionCustomer .actionCustomerPopup #popupUser .chatUserBody::-webkit-scrollbar-thumb:hover,
    #listActionCustomer .actionCustomerPopup #popupChat .notiBody::-webkit-scrollbar-thumb:hover {
        background: #7b7b7b;
    }

    #toast-container > div {
        opacity: 1;
    }

    #popupUser {
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .2);
        width: 24em;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        overflow: hidden;
        border: 1px solid #d7d7d7;
        background: #f4f4f4;
        position: absolute;
        right: 55px;
        bottom: -15px;
        z-index: 1010;
        display: none;
    }

    #popupUser .chatUserHeader {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f4f4f4;
        border-bottom: 1px solid #d1d1d1;
        padding: 10px;
    }

    #popupUser .chatUserHeader .chatUserTitle {
        width: calc(100% - 30px);
        color: #333;
        font-weight: 500;
        font-size: 0.9em;
    }

    #popupUser .chatUserHeader .chatUserAction {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 30px;
    }

    #popupUser .chatUserHeader .chatUserAction > a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        margin-left: 0;
        color: #222;
        -webkit-transition: .3s all ease-in;
        -o-transition: .3s all ease-in;
        transition: .3s all ease-in;
    }

    #popupUser .chatUserBody {
        background-color: #fff;
        height: 100%;
        overflow-y: auto;
    }

    #popupUser .chatUserBody .userItem {
        padding: 10px !important;
        border-bottom: 1px solid #d1d1d1;
        background-color: #fff;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
    }

    #popupUser .chatUserBody .userItem .userItemAvatar {
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 100%;
        flex-shrink: 0;
    }

    #popupUser .chatUserBody .userItem .userItemAvatar img {
        object-fit: contain;
        height: 100%;
        width: 100%;
    }

    #popupUser .chatUserBody .userItem .userItemContent {
        width: calc(100% - 60px);
        padding-left: 10px;
        padding-right: 10px;
    }

    #popupUser .chatUserBody .userItem .userItemContent .userItemName {
        color: #2b2d39;
        font-weight: 500;
        font-size: 1em;
        line-height: 1.3;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-transition: .2s all ease-in;
        -o-transition: .2s all ease-in;
        transition: .2s all ease-in;
    }

    #popupUser .chatUserBody .userItem .userItemContent .userItemMess {
        color: #767676;
        margin-top: .35em;
        font-size: .9em;
        line-height: 1.2;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 1.191em;
    }

    #popupUser .chatUserBody .userItem .countDataNum {
        background-color: #e80a0a;
        color: #fff;
        height: 20px;
        width: 20px;
        font-size: 0.75em;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 50%;
    }

    #popupUser .chatUserBody .userItem:hover {
        background-color: #fbfbfb;
    }

    #popupUser .chatUserBody .userItem:hover .userItemContent .userItemName {
        color: #029C7D;
    }

    #popupUser.pushLeft,
    #popupChat.pushLeft {
        right: calc(24em + 75px);
    }

    #popupUser .chatFunctions,
    #popupChat .chatFunctions {
        position: relative;
    }

    #popupUser .chatFunctions a.openListFuncs,
    #popupChat .chatFunctions a.openListFuncs {
        color: #333;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -10px;
        display: inline-block;
        cursor: pointer;
    }

    #popupUser .chatFunctions .listFuncs,
    #popupChat .chatFunctions .listFuncs {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        padding: 10px 0;
    }

    #popupUser .chatFunctions .listFuncs.show,
    #popupChat .chatFunctions .listFuncs.show {
        display: block;
        z-index: 3;
    }

    #popupUser .chatFunctions .listFuncs a,
    #popupChat .chatFunctions .listFuncs a {
        white-space: nowrap;
        color: #333;
        display: block;
        padding: 4px 15px;
    }

    #popupChat .chatFunctions .listFuncs a.disabled {
        cursor: not-allowed;
        color: darkgray;
    }

    #popupUser .chatFunctions .listFuncs a:hover,
    #popupChat .chatFunctions .listFuncs a:hover {
        background-color: #f8f9fa;
    }

    #popupUser .chatUserBody .userItem.prevent {
        display: none !important;
    }

    #popupUser.showPrevent .chatUserBody .userItem {
        display: none !important;
    }

    #popupUser.showPrevent .chatUserBody .userItem.prevent {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    #popupUser .chatUserTitle span.titlePrevent {
        display: none;
    }

    #popupUser.showPrevent .chatUserTitle span {
        display: none;
    }

    #popupUser.showPrevent .chatUserTitle span.titlePrevent {
        display: block !important;
    }

    #popupChat .chatBody .chat-me .chatText .chatShare .chatShareContent {
        max-width: 100%;
        margin-left: 0;
    }

    .chatShareContent .chatShare-header {
        display: flex;
        margin-bottom: 6px;
    }

    .chatShareContent .chatShare-header .chatShareThumbnail {
        width: 4.2em;
        height: 4.2em;
        border-radius: 6px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .chatShareContent .chatShare-header .chatShareThumbnail img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .chatShareContent .chatShare-header .chatShareTitle {
        width: 100%;
        padding-left: 10px;
        font-size: 1em;
        color: #fff;
        font-weight: 400;
        line-height: 1.4em;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .chatShareContent .chatShareDesc {
        font-size: .95em;
        color: #ccc;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 7;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .chatShareContent .chatShareLink {
        font-size: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        color: #5597fa;
        margin: 0 0 6px;
    }

    .chatShareContent span.time {
        margin-top: .8em;
        font-size: .75em;
        color: #ccc;
        text-align: left;
    }

    #popupChat .chatBody .chat-you .chatText .chatDetail .chatDetailContent .chatShareContent .chatShare-header .chatShareTitle {
        color: #232323;
    }

    #popupChat .chatBody .chat-you .chatText .chatDetail .chatDetailContent .chatDetailContentMessage .chatShareContent .chatShareDesc {
        color: #666;
    }

    #listActionCustomer .d-none {
        display: none !important;
    }

}