.hidden {
    display: none !important;
}
#bonamCanvas {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#bonuCanvas {
    display: block; 
    width: 100%;  
    height: 100%;
    object-fit: contain;
}
#matnamCanvas {
    display: block;
    width: 100%;  
    height: 100%; 
    object-fit: contain;
}
#matnuCanvas {
    display: block;
    width: 100%; 
    height: 100%;
    object-fit: contain;
}
#petCanvas {
    display: block;
    width: 100%;  
    height: 100%; 
    object-fit: contain;
}
#bonam {
    visibility: hidden;
}

#bonam {
    display: none;
}

#bonu {
    visibility: hidden;
}

#bonu {
    display: none;
}
#matnam {
    visibility: hidden;
}

#matnam {
    display: none;
}

#matnu {
    visibility: hidden;
}

#matnu {
    display: none;
}
#pet {
    visibility: hidden;
}

#pet {
    display: none;
}
.avatar-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    pointer-events: none;
    
}


#background {
    z-index: 1;
}

#vong {
    z-index: 2;
}

#canh {
    z-index: 3;
}

#aonam {
    z-index: 6;
}

#aonu {
    z-index: 6;
}

#bonamCanvas {
    z-index: 4;
}

#bonuCanvas {
    z-index: 4;
}

#matnamCanvas {
    z-index: 4;
}

#matnuCanvas {
    z-index: 4;
}

#tocnam {
    z-index: 5;
}

#tocnu {
    z-index: 5;
}

#non {
    z-index: 7;
}

#kinh {
    z-index: 8;
}

#trangsuc {
    z-index: 9;
}

#vukhi {
    z-index: 10;
}

#petCanvas {
    z-index: 11;
}

#effect {
    z-index: 12;
}
.user-avata {
    right: 8px;
    width: 70px;
    height: 100px;
    position: relative;
    height: 80px;
}

.comment-block.avatar-mode-character {
    position: relative;
    bottom: 15px;
}

.user-avata, .users-comment .avatar, .frame-avatar {
  display: none;
}
.comment-block.avatar-mode-character .user-avata {
  display: block;
}
.comment-block.avatar-mode-basic .users-comment .avatar,
.comment-block.avatar-mode-basic .frame-avatar {
  display: block;
}