html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.card-modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0 32px rgba(0,0,0,0.25);
    position: relative;
}
@media (max-width: 767.98px) {
    .card-modal-content {
        border-radius: 0;
        min-height: 70vh;
    }
    #modalCardImg {
        max-height: 40vh;
    }
    .hk-info-label { font-size: 1.2rem; }
}
@media (min-width: 992px) {
    #modalCardImg {
        max-height: 70vh;
    }
    .div-card-info {
        padding-top: 15px;
    }
}
    .hk-info-label { font-size: 1.5rem; }


.div_hk_img {
  display: inline-block;
  width: 172px;
  height: 234px;
  margin: 1px;  /*Adjust space between items*/
  /* border: 1px solid #ddd; */
  overflow: hidden;
  vertical-align: top;
  cursor: pointer;
  transition: transform 0.2s;
}

.hk_img_list {
  max-width: 234px;
  height: 100%;
  object-fit:contain;
}

.div_hk_img:hover {
  transform: scale(1.40); /* Slight zoom effect */
}

.hk-info-text{
  background-color: #f3f0ee ;
  padding: 10px;
}

.hk-info-label{
  font-weight: bold;
  font-size: 24px;
}

.hk-team,
.hk-position {
  margin: 0;
  padding: 5px 7px;
  font-weight:550;
  font-size: 16px;
  vertical-align: middle;
  border: 2px solid #747474; /* เพิ่มเส้นขอบแทน */
}
.hk-team {
  background-color: #f49030;
  color: #fff;
  border-radius: 10px 0 0 10px;
  border-right: none; /* ให้ขอบไม่ซ้อนกัน */
}

.hk-position {
  background-color: #fff;
  color: #000;
  border-radius: 0 10px 10px 0;
  
}

.hk-position {
  background-color: #fff;
  color: #000;
  border-radius: 0 10px 10px 0;
  border-left: none; /* ให้ขอบไม่ซ้อนกัน */
}

.hk-onplay,
.hk-attack,
.hk-receive, .hk-block,
.hk-toss, .hk-serve  {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.hk-onplay {
  background-color: #000000;
  color: #fff;
  padding: 4px 7px 4px 7px;
  font-weight: 500;
  text-align: center;
  font-size: 17px;
  border-radius: 4px 4px 4px 4px;
  border: 1.5px solid #5c5c5c;

}

.hk-attack {
  background-color: #f80000;
  color: #fff;
  padding: 4px 6px 4px 6px;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
  border: 1.5px solid #fff;
  border-left: none; /* ไม่ให้ขอบซ้อนกัน */
  /* border-radius: 4px 4px 4px 4px; */
}

.hk-receive {
  background-color: #0a0c9b;
  color: #fff;
  padding: 4px 6px 4px 6px;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
  border: 1.5px solid #fff;
  border-left: none; /* ไม่ให้ขอบซ้อนกัน */
  /* border-radius: 4px 4px 4px 4px; */
}

.hk-block {
  background-color: #757575;
  color: #fff;
  padding: 4px 6px 4px 6px;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
  border: 1.5px solid #fff;
  border-left: none; /* ไม่ให้ขอบซ้อนกัน */
  /* border-radius: 4px 4px 4px 4px; */
}

.hk-toss {
  background-color: #008d18;
  color: #fff;
  padding: 4px 6px 4px 6px;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
  border: 1.5px solid #fff;
  border-left: none; /* ไม่ให้ขอบซ้อนกัน */
  /* border-radius: 4px 4px 4px 4px; */
}

.hk-serve {
  background-color: #fbff00;
  color: #fff;
  padding: 4px 6px 4px 6px;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
  border: 1.5px solid #fff;
  border-left: none; /* ไม่ให้ขอบซ้อนกัน */
  /* border-radius: 4px 4px 4px 4px; */
}

.hk-obtian {
  font-size: 14px;
  color: #000;
  font-family: 'Sarabun', sans-serif;
  font-style: italic;
}