// th{
//   position: relative;         // เทียบเท่า class "relative"
//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
//   text-align: center !important;  // เทียบเท่า "!text-center"

//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
//   font-weight: 600;
//   border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
  background-color: rgb(96 165 250 / 0.1) !important;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
  background: rgb(96 165 250) !important;
  color: #fff;
  opacity: 1 !important;
}


.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
  background-color: rgb(96 165 250) !important;
  border-color: transparent;
  color: #fff;
}

.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
  border: 1px solid !important;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-family: "e-icons";
  height: 18px;
  line-height: 10px;
  padding: 2px 0;
  text-align: center;
  vertical-align: middle;
  width: 1rem !important;
  border-color: #64748b !important;
}

.e-grid td.e-selectionbackground {
  background-color: #aec2ec !important;
}






.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
}

@for $i from 1 through 12 {
  $width: (
    $i / 12) * 100%;

  .col-#{$i} {
    flex: 0 0 $width;
    max-width: $width;
  }
}


@for $i from 1 through 100 {
  .m-#{$i}rem {
    margin: #{$i}rem;
  }

  .mt-#{$i}rem {
    margin-top: #{$i}rem;
  }

  .ml-#{$i}rem {
    margin-left: #{$i}rem;
  }

  .mb-#{$i}rem {
    margin-bottom: #{$i}rem;
  }

  .mr-#{$i}rem {
    margin-right: #{$i}rem;
  }

  .p-#{$i}rem {
    padding: #{$i}rem;
  }

  .pt-#{$i}rem {
    padding-top: #{$i}rem;
  }

  .pl-#{$i}rem {
    padding-left: #{$i}rem;
  }

  .pb-#{$i}rem {
    padding-bottom: #{$i}rem;
  }

  .pr-#{$i}rem {
    padding-right: #{$i}rem;
  }
}

@media print {
  body * {
    visibility: hidden;
    /* ซ่อนทุก element */
  }

  #printArea,
  #printArea * {
    visibility: visible;
    /* แสดงเฉพาะ #printArea */
  }

  #printArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

.pdf-container { 
  transform: translateZ(0
  );
}