/* ============================================================
   static-other-drawer.css — Floating Hamburger + Drawer Overlay
   เฉพาะหน้า static_other.php (VIP calculator) เท่านั้น

   เฟส 1: กลไก Drawer พื้นฐาน (ตำแหน่ง/เลื่อน/backdrop/ปุ่มลอย) เท่านั้น
   สียังเป็นค่ากลางชั่วคราว — รอเฟส 3 ปรับให้เข้ากับสกิน SmartAdmin (smart-style-4)
   ของเว็บนี้โดยเฉพาะ

   ทุก selector สโคปผ่าน #show_s2 / #bt_show_s2 / .sov2-drawer-backdrop /
   .static-other-drawer-root ซึ่งมีเฉพาะในหน้านี้เท่านั้นในทั้งเว็บ (ตรวจแล้ว)
   จึงไม่ต้องพึ่ง body class เพิ่ม ปลอดภัยแม้ไฟล์นี้จะถูกโหลดจาก body_headder.php
   ที่ใช้ร่วมกับทุกหน้า

   ลำดับ z-index ทั้งชุด: content(auto) < backdrop(1030) < drawer(1040) < toggle(1045)
   < Bootstrap modal/Bootbox (1050 ของระบบเดิม, ไม่แตะ)
   ============================================================ */

/* ── ระยะห่างจากขอบบน: วัดจริงจาก #main ด้วย JS (ดู updateDrawerTopOffset ใน static_other.php)
   เพราะหน้านี้มีทั้ง #header (เขียว) และแถบไอคอนเมนู (#left-panel, สูงไม่คงที่ ขึ้นกับจอ/ฟอนต์)
   ซ้อนกันอยู่ด้านบน ค่าคงที่เดียวไม่พอ ตัวเลข 72px ที่เป็น fallback ด้านล่างจะถูกแทนที่ทันทีที่ JS รันสำเร็จ */
/* ── กล่องเมนูซ้าย: Drawer overlay (เดิมเป็น Bootstrap column ธรรมดา) ── */
#show_s2 {
  position: fixed;
  top: var(--sov2-content-top, 72px);
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 88vw;
  z-index: 1040;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 18px rgba(0,0,0,.18);
  transform: translateX(-105%);
  transition: transform .22s ease;
}
.static-other-drawer-root.sov2-drawer-open #show_s2 {
  transform: translateX(0);
}

/* ── Backdrop: แสดงเฉพาะตอน Drawer เปิด ── */
.sov2-drawer-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.3);
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.static-other-drawer-root.sov2-drawer-open .sov2-drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

/* ── ปุ่มลอย 3 ขีด — ผูก id เดิม #bt_show_s2 ร่วมกับ class ใหม่เฉพาะปุ่มนี้ ── */
.static-other-drawer-root > #bt_show_s2.sov2-floating-menu-toggle {
  position: fixed;
  /* ค่าตำแหน่งยืนยันจากผู้ใช้จริงหลังทดสอบเห็นภาพ ไม่ต้องคำนวณจาก #main อีกต่อไป */
  top: 120px;
  left: 20px;
  z-index: 1045;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2fa66d 0%, #1f8256 100%); /* เขียวเดียวกับ #header ของเว็บนี้ */
  border: 1px solid #155c41;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  cursor: pointer;
  visibility: visible;
  opacity: 1;
  transform: none;
  flex: none;
  float: none;
  text-align: center;
  white-space: nowrap;
  transition: left .22s ease;
}
.static-other-drawer-root.sov2-drawer-open > #bt_show_s2.sov2-floating-menu-toggle {
  left: 312px;
}
@media (max-width: 767px) {
  .static-other-drawer-root.sov2-drawer-open > #bt_show_s2.sov2-floating-menu-toggle {
    left: auto;
    right: 10px;
  }
}
/* ซ่อนข้อความยาวแบบ visually-hidden (ไม่ใช่ display:none) — ยังอ่านได้ด้วย screen reader */
#sp_show_s2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#fa_show_s2 {
  color: #fff;
  font-size: 20px;
}

/* ── ฝั่งเนื้อหา: ต้องเต็มความกว้างเสมอไม่ว่า Drawer จะเปิดหรือปิด ──
   สคริปต์เดิมยังสลับ class col-sm-10/col-sm-11 ให้ #show_s10 อยู่ (คงไว้เพื่อลด diff)
   แต่ตอนนี้ #show_s2 ลอยทับแบบ overlay ไม่ได้ดันเนื้อหาแล้ว จึงบังคับเต็มความกว้างที่นี่แทน
   #show_s10 เป็น ID selector อยู่แล้วจึง specificity สูงกว่า .col-sm-10/.col-sm-11 ไม่ต้องใช้ !important */
.static-other-drawer-root #show_s10 {
  width: 100%;
  min-width: 0;
}

/* ── ชื่อเมนูเต็ม: เลิกตัดคำ (...) ──
   lotto_style.css มีกฎ "#show_s2 .btn-group-vertical .s_all{white-space:nowrap;overflow:hidden;
   text-overflow:ellipsis}" ทำไว้ตั้งแต่สมัย #show_s2 ยังบีบแคบเป็น col-sm-1 ได้ (โหมดย่อเดิม)
   ตอนนี้ #show_s2 เป็น Drawer กว้างคงที่ 300px มีที่พออยู่แล้ว จึงยกเลิกการตัดคำ

   ตัวการจริงที่ทำให้ยังขึ้นบรรทัดสั้นๆ ทีละคำ (เจอจาก DevTools): smartadmin-production.min.css
   มีกฎ ".flag+span{max-width:150px;...}" ครอบทุกหน้า และในช่วงจอ 768–979px มีกฎซ้อนอีกชั้น
   "@media(min-width:768px)and(max-width:979px){.flag+span{max-width:30px !important}}"
   — ใช้ !important ซึ่งชนะทุก selector ที่ไม่ใช่ !important ไม่ว่าจะ specificity สูงแค่ไหน
   จึงต้องใส่ !important สู้กลับเฉพาะ max-width (เราชนะแน่นอนเพราะ specificity ของเรา
   (.static-other-drawer-root #show_s2 .btn-group-vertical .s_all) สูงกว่า .flag+span อยู่แล้ว
   พอเป็น !important ทั้งคู่ก็เทียบ specificity กันตามปกติ) */
.static-other-drawer-root #show_s2 .btn-group-vertical .s_all {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none !important;
  min-width: 0;
}

/* ── เมนูที่กำลังเลือกอยู่ในลิ้นชัก: ของเดิมใช้สี Bootstrap default (#e6e6e6 เทาอ่อนจืดๆ)
   เปลี่ยนเป็นเขียวเข้มธีมเดียวกับปุ่มลอย/header ให้เด่นขึ้นชัดเจนว่ากำลังดูหน้าไหนอยู่
   #bt_show_s2 ถูกย้ายออกจาก #show_s2 ไปแล้ว จึงไม่เข้าเงื่อนไขนี้ ไม่ต้องกัน :not() ซ้ำ */
#show_s2 .btn-group-vertical label.btn.active {
  background: linear-gradient(180deg, #2fa66d 0%, #1f8256 100%);
  border-color: #155c41;
  color: #fff;
}
#show_s2 .btn-group-vertical label.btn.active:hover {
  background: linear-gradient(180deg, #2fa66d 0%, #1a744d 100%);
}

/* ── ตารางผลลัพธ์ h_manual/puk_onlyALL.php ไม่เต็มความกว้าง ──
   ตารางในไฟล์นั้นมี inline style="width:400px" ตายตัวมาแต่เดิม สมัยที่ #show_s10 แคบกว่านี้
   ไม่เห็นชัด ตอนนี้ #show_s10 กว้างเต็ม 100% แล้ว (ดู #show_s10 ด้านบน) เลยเหลือพื้นที่ว่างขวา
   เยอะ พอร์ตเฉพาะส่วน "เต็มความกว้าง" มาจาก h-manual-result-textarea-v2.css ของ V2 เท่านั้น
   ไม่พอร์ตสี/ธีม เพราะผู้ใช้เลือกไว้ก่อนหน้านี้ว่าเว็บเก่าใช้ธีมของตัวเองต่อไป ไม่ต้องพอร์ตสี
   (ไม่ใช้ table-layout:fixed เพราะเคยลองแล้วพังจาก colspan ไม่ตรงจำนวนคอลัมน์จริงใน V2 มาก่อน) */
.static-other-drawer-root #show_s10 table:has(textarea.txt-color-blueDark) {
  width: 100% !important;
}
.static-other-drawer-root #show_s10 table:has(textarea.txt-color-blueDark) textarea.txt-color-blueDark {
  width: 100% !important;
  box-sizing: border-box;
}

/* ── มือถือ: ข้อความในกล่อง "ปักสิบบน/ปักหน่วยบน ฯลฯ" ตัดขึ้นบรรทัดใหม่กลางบรรทัดข้อมูล ──
   แต่ละแถวข้อมูล (เช่น "2025-10-01=38256=>876978-77 *") ยาวกว่าความกว้างจริงของ textarea
   บนจอมือถือ (5 คอลัมน์แบ่งความกว้าง ~1230px ตาม meta viewport ที่บังคับไว้ ทำให้แต่ละคอลัมน์
   แคบกว่าที่ตั้งใจไว้เดิม) เบราว์เซอร์เลยตัดขึ้นบรรทัดใหม่กลางคัน ทำให้ตามดูสถิติย้อนหลังยาก
   แก้ด้วยการห้ามตัดบรรทัด (white-space:pre) แล้วให้เลื่อนแนวนอนได้แทนถ้าเนื้อหายาวเกิน */
.static-other-drawer-root #show_s10 table:has(textarea.txt-color-blueDark) textarea.txt-color-blueDark {
  white-space: pre;
  overflow-x: auto;
}