ตรวจจับ Tablet แนวตั้ง (โค้ดเดิมของคุณ)
@media only screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  #rotation-overlay {
    display: flex !important;
  }
  body {
    overflow: hidden;
  }
}
#rotation-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  color: white;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* เพิ่มเติมจากโค้ดเดิมของคุณ */
#rotation-overlay .message {
  padding: 20px;
}

#rotation-overlay .phone-icon {
  font-size: 50px;
  margin-bottom: 20px;
  animation: rotateDevice 2s infinite ease-in-out;
}

@keyframes rotateDevice {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1184px) and (orientation: landscape) {
  /* 1. เปลี่ยน Table ให้เป็น Grid */
  .table.table-transposable {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 1 คอลัมน์หัวข้อ + 7 วัน */
    border-collapse: collapse;
    overflow-x: auto;
  }

  /* 2. บังคับให้หัวตาราง (thead) และตัวตาราง (tbody) แสดงผลต่อเนื่องกัน */
  .table.table-transposable thead,
  .table.table-transposable tbody,
  .table.table-transposable tr {
    display: contents;
  }

  /* 3. จัดตำแหน่ง Cell ใหม่ (Row -> Column) */
  .table.table-transposable td,
  .table.table-transposable th {
    display: block;
    padding: 10px 5px;
    border: 1px solid #dee2e6;
    text-align: center;
    min-width: 80px; /* ป้องกันเนื้อหาเบียดกันเกินไป */
  }

  /* 4. เทคนิคการเรียงลำดับใหม่ */
  /* ปกติ Table จะเรียง จันทร์(เช้า, บ่าย, ค่ำ) -> อังคาร(เช้า, บ่าย, ค่ำ) */
  /* ถ้าต้องการให้ "เช้า" อยู่แถวเดียวกันหมด ต้องใช้การสลับตำแหน่งด้วย Grid Row */

  /* หัวข้อ "วัน" */
  .table.table-transposable tr td:first-child {
    grid-row: 1;
    background-color: #f8f9fa;
    font-weight: bold;
  }

  /* ช่องข้อมูล เช้า */
  .table.table-transposable tr td:nth-child(2) {
    grid-row: 2;
  }
  /* ช่องข้อมูล บ่าย */
  .table.table-transposable tr td:nth-child(3) {
    grid-row: 3;
  }
  /* ช่องข้อมูล ค่ำ */
  .table.table-transposable tr td:nth-child(4) {
    grid-row: 4;
  }

  /* ซ่อนหัวตารางเดิม (ถ้ามี colspan) เพราะจะทำให้ Grid เพี้ยน */
  .table.table-transposable thead {
    display: none;
  }
}