#reward-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}

.reward-mask {
  background-color: #00000088;
  width: 100%;
  height: 100%;
}

.reward-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 47.5vw;
  max-height: min(80%, 500px);
}

.reward-bg {
  height: 80%;
}

.reward-page {
  position: absolute;
  left: 75%;
  top: 64%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  z-index: 2;
}

.reward-content-container {
  position: absolute;
  left: 36%;
  top: 41%;
  transform: translate(-50%, -50%);
  width: 68%;
  height: 72%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;

}

.reward-content-container-video {
  position: absolute;
  left: 23%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 56%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;

}

.reward-content-container-photo {
  position: absolute;
  left: 56%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 26%;
  height: 56%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;

}

/* กำหนดความกว้างของแถบ Scrollbar ทั้งหมด */
.reward-content-container-video::-webkit-scrollbar,
.reward-content-container-photo::-webkit-scrollbar {
  width: 20px;
  /* ปรับความกว้างให้พอดีกับรูปจรวด */
}

.item-content-container::-webkit-scrollbar {
  width: 20px;
  /* ปรับตัวเลขนี้เพื่อให้พื้นที่สำหรับจรวดกว้างขึ้น (เดิม 20px) */
}

/* 1) ส่วนที่เป็น "เส้นทาง" (Track) - ใส่รูปไม้บรรทัดหรือเส้นยาวๆ */
.reward-content-container-video::-webkit-scrollbar-track,
.reward-content-container-photo::-webkit-scrollbar-track,
.item-content-container::-webkit-scrollbar-track {
  background-image: url('../img/reward/scroll-line.png');
  /* เปลี่ยนเป็น path รูปเส้นของคุณ */
  background-repeat: repeat-y;
  background-position: center;

  background-color: #f3e9dc;
  /* สีครีมอ่อนที่เป็นขอบนอกสุด (ถ้ามี) หรือตั้งเป็น transparent */
  border-radius: 20px;
  /* ใช้ box-shadow หรือ border เพื่อสร้างเส้นสีน้ำตาลเข้มข้างใน */
  border: 5px solid transparent;
  border-color: #f7dec7;
  /* เว้นระยะขอบ */
  box-shadow: inset 0 0 0 10px #9b7e63;

  /* นี่คือเส้นสีน้ำตาลที่คุณต้องการ */
  /* ทำให้พื้นหลังโปร่งใส */

}

/* 2) ส่วนที่เป็น "ตัวเลื่อน" (Thumb) - ใส่รูปจรวด */
.reward-content-container-video::-webkit-scrollbar-thumb,
.reward-content-container-photo::-webkit-scrollbar-thumb {
  background-image: url('../img/course-desc-popup/scrollthrumb.png');
  /* ใช้รูปจรวดที่คุณมีอยู่แล้ว */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0px;
  /* หมายเหตุ: thumb จะยืดหดตามปริมาณ Content ถ้าไม่อยากให้รูปเบี้ยว 
       ควรกำหนด min-height หรือใช้รูปที่สมมาตรครับ */
}

.item-content-container::-webkit-scrollbar-thumb {
  background-image: url('../img/course-desc-popup/scrollthrumb.png');
  background-size: contain;
  /* ให้รูปขยายเต็มพื้นที่ความกว้างที่ตั้งไว้ */
  background-repeat: no-repeat;
  background-position: center;

  /* หากต้องการให้จรวดดูตัวใหญ่/ยาวขึ้น สามารถเพิ่ม min-height ได้ */
  min-height: 50px;
}

/* ปรับแต่งสำหรับ Firefox (ถ้าจำเป็น) */
.reward-content-container-video,
.reward-content-container-photo {
  scrollbar-width: auto;
  scrollbar-color: #fc9a1c;
  /* Firefox ยังไม่รองรับรูปภาพใน scrollbar */
}

.reward-content-container-video,
.reward-content-container-photo {
  /* height: 350px; */
  /* หรือความสูงตามดีไซน์ของคุณ */
  overflow-y: auto;
  /* เปิดให้ scroll ได้ */
  overflow-x: hidden;
  padding-right: 10px;
  /* เว้นที่ให้ scrollbar ไม่ทับเนื้อหา */
}

.reward-content {
  width: 70%;
  text-align: center;
  white-space: nowrap;
  -ms-flex: 3;
  flex: 3;
}

.reward-content-slot {
  width: 45%;
  display: inline-block;
  height: 35%;
  padding-top: 1%;
  position: relative;
  margin-left: 10px;
}

.reward-content-slot-bg {
  /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%); */
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.reward-slot-lock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reward-gem-content {
  width: 30%;
  text-align: center;
  white-space: nowrap;
  -ms-flex: 1;
  flex: 1;
  transform: translateX(7.5%);
  margin-right: 5%;
}

.reward-gem-content-slot {
  width: 100px;
  /* หรือขนาดที่ใช้ในโปรเจกต์ */
  height: 100px;
  position: relative;
  display: inline-block;
  /* position: relative; */
  /* display: block; */
  cursor: pointer;
  padding: 1%;
  margin-right: 10px;
  margin-bottom: 10px;

}

.reward-gem-content-slot-bg {
  display: block;
  margin: 0 auto;
  width: 40%;
  height: 100%;
  object-fit: cover;
}


.reward-layer-back {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reward-layer-front {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#reward-close-btn {
  position: absolute;
  top: 20%;
  right: -1.65%;
  width: 6%;
  content: url("../img/item-canvas/close-intem.png");
  cursor: pointer;
}

#reward-close-btn:active {
  content: url("../img/item-canvas/close-intem (1).png");
}