.menuInfo {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #03A9F4;
    border-radius: 5px;
    overflow: hidden;
    align-items: center
}

.menuInfo__headerInfo {
    padding: 16px 16px 5px 0px;
    display: flex;
    align-items: flex-start;
    width: 100%
}

.menuInfo__headerInfo .avatar img {
    height: 80px
}

.userInfo_ycoin {
    width: 39.5%
}

@media only screen and (max-width:480px) {
    .menuInfo__headerInfo .avatar img {
        height: 100px
    }

    .menuInfo {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width:480px) {
    .menuInfo__headerInfo {
        height: 130px
    }
}

.menuInfo__headerInfo .userInfo {
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    color: var(--default_color);
    height: 80px
}

@media only screen and (max-width:480px) {
    .menuInfo__headerInfo .userInfo {
        height: 100%
    }
}

.menuInfo__headerInfo .userInfo .inactive {
    color: gray
}

.menuInfo__headerInfo .userInfo div {
    margin-bottom: 0px;
    margin-top: 4px;
}

.menuInfo__headerInfo .userInfo .row-coin {
    display: flex;
    align-items: flex-start;
    flex-direction: column
}

.menuInfo__headerInfo .userInfo .row-coin>div {
    margin-bottom: 2px;
    display: flex
}

.menuInfo__headerInfo .userInfo .row-coin * {
    margin-right: 5px;
    margin-left: 2px;
}

.menuInfo__headerInfo .userInfo .row-coin img {
    width: 25px;
    height: 25px;
}

@media only screen and (max-width:480px) {
    .menuInfo__headerInfo .userInfo .row-coin {
        flex-direction: row
    }
}

.menuInfo__headerInfo .userInfo__buttonNavigate {
    width: 80%
}

.menuInfo__headerInfo .userInfo__buttonNavigate a {
    margin: 0
}

.menuInfo__headerInfo .userInfo__buttonNavigate img {
    width: 100px;
    margin-right: 0
}

@media only screen and (max-width:768px) {
    .menuInfo__headerInfo .userInfo__buttonNavigate img {
        width: 100%
    }
}

@media (max-width:320px) {
    .menuInfo__headerInfo .userInfo__buttonNavigate img {
        width: 80px
    }
}

.menuInfo__buttonNavigate {
    display: flex;
    width: 100%;
    padding: 16px
}

.menuInfo__buttonNavigate img {
    width: 50%
}

@media only screen and (max-width:768px) {
    .menuInfo__buttonNavigate {
        padding: 0 16px 16px 16px
    }
}

@media only screen and (max-width:480px) {
    .menuInfo__buttonNavigate {
        display: none
    }
}

.menuInfo__bodyInfo {
    display: flex;
    width: 100%
}

.menuInfo__bodyInfo ul {
    width: 100%
}

.menuInfo__bodyInfo ul li {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
    border-top: 1px solid #03A9F4;
    text-align: center;
    cursor: pointer;
    position: relative
}

.menuInfo__bodyInfo ul li .has_notification {
    margin-left: 5px;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    z-index: 100
}

.menuInfo__bodyInfo ul .new:after {
    content: '';
    position: absolute;
    margin-left: 5px;
    width: 25px;
    height: 25px;
    left: 65%;
    background: url(https://cdn.game.vn/game/game.vn/images/ico/ico_new_game.gif);
    background-size: cover;

    z-index: 100;

}

@media only screen and (max-width:768px) {
    .menuInfo__bodyInfo ul li .has_notification {
        right: 29%
    }
}

.menuInfo__bodyInfo ul li a {
    position: relative;
    width: 100%;
    padding: 20px 16px;
    color: #5b545b;
    font-weight: 700;
    font-size: var(--large_text);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menuInfo__bodyInfo ul li a img {
    width: 70px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%)
}

.menuInfo__bodyInfo ul li a.active {
    background-image: linear-gradient(to right, rgba(178, 178, 178, 0), rgba(178, 178, 178, .5));
    border-right: 3px solid #03A9F4
}

@media only screen and (max-width:480px) {

    .menuInfo__bodyInfo,
    .menuInfo__buttonNavigate {
        display: none
    }
}