.selected { 
background: #365fed !important;
  color: white;
  box-shadow: 0 0 5px #000;
}
div.charax {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 5px; /* Khoảng cách giữa các hình ảnh */
}
 
.charax img:hover { 
  box-shadow: 0 0 5px #000;   
  /* background: #303030; */
  cursor: pointer;
}

.chara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 2px; /* Khoảng cách giữa các hình ảnh */
  padding-top: 5px;
}
.chara img {
  width: 100%;
  height: auto; 
  border-radius: 7px;
}
.chara_full a {
  display: flex;
  justify-content: space-between;
}
.chara_full span {
  border-radius: 0 7px 7px 0;
  border: 0;
  background: #494d4e;
  align-items: center;
  display: flex;
  padding: 5px;
  justify-content: center;
  width: 10%;
}
.chara_full span img {
  border-radius: 7px;
}
.chara_full img {
  width: 90%;
  height: auto; 
  border-radius: 7px 0 0 7px;
}
.chara_full_post img {
  width: 100%;
  height: auto; 
  border-radius: 7px;
}


@media screen and (max-width: 492px){
div.charax {
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
}
.chara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 2px; /* Khoảng cách giữa các hình ảnh */
}
div.charax {
  text-align: center;
}
.i {
  padding: 12px;  
}
}