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) {
    #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; }




@media (max-width: 576px) {
  .hk_img_list {
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
  }
}

.hk_img_list {
  width: 100%;
  max-width: 176px;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s;
}

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


.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,
.hk-team_2nd,
.hk-position_2nd {
  margin: 0;
  padding: 4px 6px;
  font-weight:550;
  font-size: 14px;
  vertical-align: middle;
  border: 2px solid #747474; /* เพิ่มเส้นขอบแทน */
}
.hk-team,.hk-team_2nd {
  background-color: #f49030;
  color: #fff;
  border-radius: 10px 0 0 10px;
  border-right: none; /* ให้ขอบไม่ซ้อนกัน */
}

.hk-position,.hk-position_2nd {
  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, .hk-draw {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

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

}

.hk-attack {
  background-color: #f80000;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}


.hk-draw {
  background-color: #5213a3;
  /* background-color: #e7b13b; */
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}

.hk-receive {
  background-color: #0a0c9b;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}

.hk-block {
  background-color: #757575;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}

.hk-toss {
  background-color: #008d18;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}

.hk-serve {
  background-color: #daa637;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 4px 4px 4px;
}




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

.hk-shutdown {
  background-color: #5171ff;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 15px 15px 15px 15px;
  display: inline-block;
}

.hk-turn {
  background-color: #bb2f69;
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 10px 10px 10px 10px;
  display: inline-block;
}

.hk-skill-power {
  font-size: 16px;
  color: #5171ff;
  font-weight: 500;
  font-style: bold;
  background-color: #ffffff;
  font-family: 'Sarabun', sans-serif;
  border-radius: 30px 30px 30px 30px;
  padding: 2px 4px 2px 4px;
}




.hk-receive-phase {
  background: linear-gradient(to bottom right, #da2889, #3f0023);
  color: #fff;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px 10px 10px 4px;

}

.hk-onhand {
  background-color: #ffffff;
  color: #000000;
  padding: 2px 4px 2px 4px;
  font-weight: 500;
  font-style: bold;
  text-align: center;
  font-size: 16px;


}

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