.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(47px, 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(74px, 1fr));
  gap: 2px; /* Khoảng cách giữa các hình ảnh */
  padding-top: 5px;
  text-align: center;
  font-size: 0.8rem;
  color: #bcbcbc;
}
.chara span {
  background: #303030;
  border-radius: 5px;
  padding-bottom: 4px;
}
.chara img {
  width: 100%;
  height: auto; 
  border-radius: 7px;
}

p.chara_full {
    display: flex;          /* Hiển thị flex */
    flex-wrap: nowrap;      /* Không xuống dòng, giữ trên 1 hàng */
    overflow-x: auto;       /* Hiện thanh cuộn ngang nếu nội dung vượt */
    padding: 7px 0;
}

p.chara_full img {
    width: 420px;
    border-radius: 7px;
    padding-right: 5px;
}

p.chara_full_show {
    padding: 7px 0;
}
p.chara_full_show img {
    width: 100%;
    border-radius: 7px;
    padding-bottom: 5px;
}


@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;  
}
p.chara_full img {
    width: 300px;
}
}