/* 🌟 CSS ที่ใช้ร่วมกันทุกหน้า (โหลดผ่าน views/partials/head.ejs) — ย้ายมาจาก <style> ที่เคยก็อปวางซ้ำในแทบทุกไฟล์ .html เดิม กฎที่เจาะจงเฉพาะบางหน้ายังคงอยู่ inline ในไฟล์นั้นๆ ตามเดิม ไม่ย้ายมาที่นี่ */

.hidden-element { display: none !important; }

/* 🌟 กู้สไตล์พื้นฐานของ Rich Text HTML (จาก Quill Editor ฝั่ง Admin, ผ่าน sanitize-html แล้วเสมอ) ที่ Tailwind Preflight ริบไปหมด (ไม่มีปลั๊กอิน typography โหลดอยู่ในหน้าทั่วไป) — ใช้กับ #display-screen-guidance-content และเนื้อหา rich text อื่นๆ ที่ตั้งผ่าน .rich-text-content ในอนาคต ครอบเฉพาะ Tag ที่ SANITIZE_OPTIONS อนุญาตไว้เท่านั้น (p, br, strong, em, h1-h4, ul, ol, li, a, blockquote, span)
   ใส่ !important ทุกกฎ กัน Preflight ของ Tailwind (โหลดทีหลังผ่าน CDN script แบบ dynamic) แซงทับ แม้ Selector ฝั่งเราจะ specificity สูงกว่าอยู่แล้วก็ตาม — เจอบั๊กจริง: ไม่ใส่ !important แล้ว H1-H4/list ไม่ขึ้นบน Modal เลย */
.rich-text-content, #display-screen-guidance-content { line-height: 1.6 !important; }
.rich-text-content h1, #display-screen-guidance-content h1 { font-size: 1.8em !important; font-weight: 700 !important; margin: 0.6em 0 0.3em !important; line-height: 1.3 !important; }
.rich-text-content h2, #display-screen-guidance-content h2 { font-size: 1.5em !important; font-weight: 700 !important; margin: 0.6em 0 0.3em !important; line-height: 1.3 !important; }
.rich-text-content h3, #display-screen-guidance-content h3 { font-size: 1.25em !important; font-weight: 700 !important; margin: 0.6em 0 0.3em !important; line-height: 1.3 !important; }
.rich-text-content h4, #display-screen-guidance-content h4 { font-size: 1.1em !important; font-weight: 700 !important; margin: 0.6em 0 0.3em !important; line-height: 1.3 !important; }
.rich-text-content p, #display-screen-guidance-content p { margin: 0.5em 0 !important; }
.rich-text-content ul, #display-screen-guidance-content ul { list-style: disc !important; padding-left: 1.5em !important; margin: 0.5em 0 !important; }
.rich-text-content ol, #display-screen-guidance-content ol { list-style: decimal !important; padding-left: 1.5em !important; margin: 0.5em 0 !important; }
.rich-text-content li, #display-screen-guidance-content li { margin: 0.2em 0 !important; display: list-item !important; }
.rich-text-content a, #display-screen-guidance-content a { color: #2563eb !important; text-decoration: underline !important; }
.rich-text-content blockquote, #display-screen-guidance-content blockquote { border-left: 3px solid #d1d5db !important; padding-left: 0.75em !important; margin: 0.5em 0 !important; color: #6b7280 !important; font-style: italic !important; }
.rich-text-content strong, #display-screen-guidance-content strong, .rich-text-content b, #display-screen-guidance-content b { font-weight: 700 !important; }
.rich-text-content em, #display-screen-guidance-content em, .rich-text-content i, #display-screen-guidance-content i { font-style: italic !important; }

/* 🌟 สกอลบาร์บาง — ใช้ร่วมกันในหน้าที่มีแถบเลื่อนแนวนอน/แนวตั้งเยอะ (ตาราง, ปฏิทินกะงาน ฯลฯ) เจอซ้ำเป๊ะใน 16 ไฟล์จากการสำรวจ */
.thin-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
.thin-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* 🌟 ครอบ <table> ให้เลื่อนแนวนอนได้แทนโดนหนีบคอลัมภ์ — ใส่ที่ div ชั้นในสุดที่ประกบ <table> โดยตรง (ไม่ใช่ div การ์ดชั้นนอกที่มี overflow-hidden ไว้ตัดมุมโค้ง) ใช้คู่กับ thin-scrollbar เช่น class="table-scroll thin-scrollbar" */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 🌟 (2026-08-28) แค่ overflow-x ยังไม่พอ — ตารางส่วนใหญ่ใช้ class min-w-full ซึ่งแปลว่า "อย่างน้อยเท่าพ่อ"
   บนจอมือถือมันจึงยอมหดลงมาเท่าจอแล้วบีบตัวอักษรตัดบรรทัดจนอ่านไม่ออก แทนที่จะเลื่อนแนวนอน (แถบเลื่อนไม่เคยโผล่เลย)
   กำหนดความกว้างขั้นต่ำที่ "อ่านรู้เรื่อง" ให้ทุกตารางในกรอบเลื่อน ถ้าจอแคบกว่านี้จึงค่อยเลื่อนซ้าย-ขวาเอา
   ตารางไหนคอลัมน์น้อยจริงๆ และอยากให้พอดีจอเล็ก ใส่ class="table-fit" ที่ <table> เพื่อยกเว้นได้ */
.table-scroll > table:not(.table-fit) { min-width: 640px; }

/* 🌟 แถบแท็บ (nav ของปุ่ม tab) ให้เลื่อนแนวนอนได้แทนตัวอักษรโดนบีบจนตัดขึ้นบรรทัดใหม่ — ใส่ที่ตัว container ของปุ่ม tab เอง (ตัวที่มี class flex อยู่แล้ว) เช่น class="flex space-x-6 tab-scroll thin-scrollbar" ปุ่มลูกจะไม่หดและไม่ตัดบรรทัดเพราะ flex-shrink:0 + white-space:nowrap */
.tab-scroll { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.tab-scroll > * { flex-shrink: 0; white-space: nowrap; }

/* 🌟 กันฟอร์ม/ตัวกรองล้นขอบจอมือถือ — ปุ่ม/input/select ในฟอร์มห้ามกว้างเกิน container ของตัวเอง เผื่อกรณีที่มี fixed width หลุดมา */
input, select, textarea { max-width: 100%; }

/* 🌟 พิมพ์เฉพาะ #print-area — ใช้ร่วมกันในหน้ารายงาน/เอกสารที่พิมพ์ออกมาเป็นพื้นที่เดียว (store-pos.html มี layout การพิมพ์ใบเสร็จ/ใบกำกับภาษี/ใบส่งของที่ซับซ้อนกว่านี้ ยังต้องเก็บ @media print ของตัวเองแยกไว้ ไม่ใช้กฎนี้ร่วม) */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: absolute; left: 0; top: 0; width: 100%; display: block !important; }
    #sidebar-container { display: none !important; }
}

/* 🌟 แสดงผลข้อความ Rich Text (Quill) ของแชทสนับสนุนฝั่งแอดมิน ภายในบับเบิลแชท (ดู scRenderBubble ใน global.js) — sanitize มาจาก server แล้วเสมอก่อนถึงจุดนี้ (utils/supportChatHelpers.js) ใช้ร่วมกันทั้งหน้าร้าน/หน้าแอดมินเพราะทั้งคู่ต้อง "อ่าน" ข้อความนี้ได้ แม้จะพิมพ์ได้แค่ฝั่งแอดมิน
   ลิงก์ใช้ color:inherit + ขีดเส้นใต้แทนสีฟ้าตายตัว เพราะบับเบิลมีทั้งพื้นน้ำเงิน (ตัวอักษรขาว) และพื้นขาว (ตัวอักษรเข้ม) สีตายตัวจะอ่านไม่ออกในกรณีใดกรณีหนึ่งเสมอ */
.sc-rich-content p { margin: 0; }
.sc-rich-content p + p { margin-top: 0.5em; }
.sc-rich-content ul, .sc-rich-content ol { margin: 0.25em 0; padding-left: 1.25em; }
.sc-rich-content a { color: inherit; text-decoration: underline; word-break: break-all; }