/* ══════════════════════════════════════════════════════════════ mobile-polish.css — กฎมือถือกลาง (Bhoon Kharn) ฉีดเข้าทุกหน้าอัตโนมัติผ่าน after_request → ยกระดับมือถือทั้งเว็บในที่เดียว ออกแบบให้ "ปลอดภัย/ตั้งรับ" — ไม่รื้อ layout เดิม แค่กันพัง + แตะง่ายบนจอเล็ก ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ .hidden ต้องชนะเสมอ — กฎที่สำคัญที่สุดในไฟล์นี้ (เพิ่ม 2026-08-20) บั๊กที่ทำให้ต้องมีกฎนี้: ทั้งเว็บซ่อนหน้าต่างป๊อปอัปด้วย `class="modal-bg hidden"` แต่ `.modal-bg { display:flex }` ถูกประกาศไว้ "หลัง" ไฟล์ tailwind ทั้งสองกฎน้ำหนักเท่ากัน (0,0,1,0) ตัวที่มาทีหลังจึงชนะ ผลคือ .hidden ไม่ทำงานเลย — เปิดหน้า /accounting แล้วหน้าต่าง "เพิ่มรายการ BOQ" เด้งขึ้นมาเอง และกดปิดก็ไม่หาย เพราะ closeModal ทำหน้าที่แค่ "ใส่ class hidden กลับเข้าไป" ซึ่งไม่มีผลอะไร ก่อนหน้านี้ไม่พังเพราะสคริปต์ tailwind จาก CDN ฉีดสไตล์ตอนรันไว้ ท้ายสุดของ พอถอด CDN ออก (มันโหลดไม่สำเร็จบนเว็บจริงอยู่แล้ว) ลำดับก็กลับด้าน — บั๊กที่ซ่อนอยู่จึงโผล่ออกมา ไฟล์นี้ถูกฉีดก่อน เสมอ กฎนี้จึงอยู่ท้ายสุดของทุกหน้า และใส่ !important กำกับไว้ เพื่อไม่ให้ขึ้นกับลำดับอีกต่อไป (ตรวจแล้วว่าไม่มีที่ไหนใช้ class hidden ค้างไว้แล้วสั่งโชว์ด้วย style.display — ทุกที่ใช้ classList.remove('hidden') ตามปกติ) ══════════════════════════════════════════════════════════════ */ .hidden { display: none !important; } [hidden] { display: none !important; } /* กันรูป/วิดีโอ/ตาราง/โค้ด ล้นออกนอกจอ */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } table, pre { max-width: 100%; } pre { overflow-x: auto; } /* ปุ่ม/ลิงก์-ปุ่ม แตะง่าย (>=44px) บนมือถือ ตามมาตรฐาน touch target */ @media (max-width: 640px) { button, .btn, a.btn, .side-item, .bnav-item, input[type="submit"], input[type="button"], [role="button"] { min-height: 44px; } /* ชิปที่เป็นลิงก์ (เช่น ตัวกรองหมวดใน /materials) — เดิมกฎ button ไม่ครอบ ทำให้แตะยากบนมือถือ หมายเหตุ: `.chip` ไม่ match `type-chip` ซึ่งเป็นแค่ป้ายกำกับ (ไม่ใช่ปุ่ม) จึงไม่กระทบ */ a.chip, .chip { min-height: 44px; display: inline-flex; align-items: center; } /* อินพุต >=16px กัน iOS ซูมอัตโนมัติเวลาแตะช่องกรอก */ input, select, textarea { font-size: max(16px, 1em); } } /* grid คอลัมน์เยอะ (inline style) → ยุบลงเมื่อจอแคบ กันล้น/บีบจนอ่านไม่ออก หมายเหตุ: เว้น auto-fill/auto-fit ไว้ (พวกนั้น responsive อยู่แล้ว) */ @media (max-width: 600px) { [style*="1fr 1fr 1fr 1fr"], [style*="repeat(4,"], [style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(7,"], [style*="repeat(8,"] { grid-template-columns: 1fr 1fr !important; } [style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]), [style*="repeat(3,"] { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 400px) { [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*="130px"]):not([style*="155px"]):not([style*="170px"]) { grid-template-columns: 1fr !important; } } /* ── แถบป้ายหมวดสินค้าต้องเลื่อนพ้นปุ่มลอยได้ ──────────────────────── (เพิ่ม 2026-08-26 · หลังย่อปุ่มผู้ช่วยแล้วยังเหลือป้ายสุดท้ายถูกทับ) แถบนี้เลื่อนแนวนอนได้อยู่แล้ว การเติมที่ว่างท้ายแถบจึง **ขยาย** ระยะที่เลื่อนได้ ไม่ได้บีบอะไรให้เล็กลง — ผู้ใช้ปัดนิดเดียวป้ายสุดท้าย ก็พ้นปุ่มลอย **ต่างจากบทเรียนเมื่อเช้า** ที่ผมไปเติม padding ให้เมนูข้างซึ่งเป็น กล่องความสูงคงที่ แล้วมันบีบจนของซ้อนกัน — ตรงนี้เป็นแถบเลื่อน การเติมที่ว่างจึงปลอดภัย แต่ก็ยังต้องวัดซ้ำหลังแก้อยู่ดี */ #cat-chips { padding-right: 132px; } /* ── ปุ่มผู้ช่วยคลี่ออกเมื่อมีคนสนใจ (faro เคาะ 2026-08-26) ────────── ค่าเริ่มต้นเป็นวงกลมไอคอนอย่างเดียว (ตั้งไว้ใน `bk-assist.js`) ตรงนี้คือส่วน "คลี่ออก" เมื่อเอาเมาส์ไปชี้หรือโฟกัสด้วยคีย์บอร์ด เหตุผลอยู่ในไฟล์ `bk-assist.js` — ย่อสรุป: แคปซูลเดิมกว้าง ~160px ทับป้ายหมวดสินค้าจนกดไม่โดน (วัดจากเบราว์เซอร์จริง) ใช้ `@media (hover:hover)` เพื่อไม่ให้มือถือคลี่ค้างจากการแตะ — บนมือถือปุ่มต้องเล็กตลอด เพราะที่นั่นแหละที่ทับกัน */ @media (hover: hover) and (pointer: fine) { #bk-fab-chat:hover, #bk-fab-chat:focus-visible { width: auto !important; padding: 0 18px 0 14px !important; gap: 8px !important; } #bk-fab-chat:hover #bk-fab-label, #bk-fab-chat:focus-visible #bk-fab-label { max-width: 160px !important; opacity: 1 !important; } } /* ── ปุ่มที่กำลังส่งข้อมูลอยู่ (ตั้งโดย bk-once.js) ───────────────── เป็นสถานะ**ชั่วคราวระหว่างรอคำตอบเท่านั้น** ไม่ใช่การเปลี่ยนหน้าตา ถาวร — มีไว้ให้ผู้ใช้รู้ว่า "กดไปแล้ว กำลังทำงาน" จะได้ไม่กดซ้ำ ซึ่งเป็นสาเหตุที่ทำให้เกิดของซ้ำตั้งแต่แรก */ .bk-busy { opacity: .62 !important; cursor: progress !important; } /* ══ กันหน้าเลื่อนออกข้าง ══════════════════════════════════════════ **คำเตือน — กฎนี้ตัดเนื้อหาจริง** (คอมเมนต์เดิมเขียนว่า "ไม่ตัด เนื้อหา" ซึ่งไม่จริง วัดแล้วเมื่อ 2026-08-26) `overflow-x:hidden` ทำให้หน้า**ไม่มีวันเลื่อนออกข้างได้เลย** ของที่กว้างเกินจึงไม่ได้แค่ "ล้น" แต่ **หายไปถาวร** ไม่มีแถบเลื่อน ไม่มีอะไรบอกผู้ใช้ว่ามีของอยู่ตรงนั้น ข้อดี: ไม่มีอาการปัดแล้วทั้งหน้าเบี้ยว ซึ่งน่ารำคาญกว่ามาก ข้อเสีย: **บั๊ก "กว้างเกิน" ทุกตัวจะเงียบสนิท** ตัวสแกนที่ถาม `scrollWidth > clientWidth` จะตอบว่าไม่มีปัญหาเสมอ จึงต้องมี `_internal/browser_check_mobile_fit.py` คู่กับกฎนี้ตลอดไป — มันถามคนละคำถาม: "ของชิ้นนี้ผู้ใช้ไปหาได้ไหม" (ดู [[assertion_blind_spots]] ข้อ "ตรวจปลายทางอย่างเดียวไม่พอถ้าระหว่างทางมีตัวกลบร่องรอย") */ @media (max-width: 640px) { html, body { max-width: 100%; overflow-x: hidden; } } /* ══ แถบนำทางบนต้องขึ้นบรรทัดใหม่บนจอแคบ ═══════════════════════════ (เพิ่ม 2026-08-26 · วัดจากเบราว์เซอร์จริงที่ 390px) ของในแถบที่ย่อไม่ได้ (`flex-shrink:0`) รวมกันแล้วกว้างเกินจอมือถือ: โลโก้ ~150 + "เครื่องมือฟรี" ~90 + "คุมงานสร้างบ้าน" ~110 + ปุ่มทอง ~130 + ช่องไฟ/ขอบ ~85 = ~565px บนจอ 390px ผลที่วัดได้: **ปุ่มทอง "แดชบอร์ดของฉัน / เข้าสู่ระบบ" เลยขอบขวา ไป 121px และถูก `overflow-x:hidden` ข้างบนตัดทิ้ง — หายไปเลย ทั้ง 30 หน้า** ซึ่งเป็นทางเข้าระบบทางเดียวบนแถบนี้ ══ นี่คือผลพวงจากที่ผมแก้เมนูเมื่อเช้าวันเดียวกัน ═══════════════ ของเดิมใส่ `overflow-x:auto` ที่กล่องนอกสุด ทุกอย่างจึงอยู่ในกล่อง ที่ปัดซ้ายขวาได้ ปุ่มทองยัง "ไปหาได้" แม้จะล้น พอผมย้าย `
` ออกนอกกล่อง (เพื่อให้เมนูกางได้) ปุ่มทองก็เลย กลายเป็นลูกตรงของแถวที่ไม่เลื่อน → ล้นแล้วถูกตัดทันที พิสูจน์ด้วยการใส่ `overflow-x:auto` กลับเข้าไปชั่วคราวแล้ววัดซ้ำ: ธงหาย → ยืนยันว่าเกิดจากการแก้ของผม ไม่ใช่ของเดิม ทางแก้: ให้แถวขึ้นบรรทัดใหม่ได้บนจอแคบ ไม่ใช่บีบให้อยู่บรรทัดเดียว (จอ 390px ไม่มีทางพอสำหรับทุกอย่างในบรรทัดเดียวจริง ๆ) **จอคอมไม่เปลี่ยนเลย** เพราะกฎอยู่ใน media query 640px */ @media (max-width: 640px) { #bk-site-nav > div { flex-wrap: wrap; row-gap: .45rem; column-gap: .7rem; } /* ตกไปบรรทัดสองแล้วให้ชิดขวา ดูตั้งใจ ไม่ใช่ดูหลุด */ #bk-site-nav > div > a[href="/dashboard"], #bk-site-nav > div > a[href="/login"] { margin-left: auto; } /* ══ กล่องเลื่อนที่ชิดขวา = ของที่ล้นไปทางซ้าย "ปัดกลับไม่ได้" ══ กล่องลิงก์กลางตั้ง `justify-content:flex-end` ไว้ (เพื่อให้จอคอม สวย) พอจอแคบจนลิงก์ล้น ของจะล้นออกไปทาง**ซ้าย** ซึ่ง **`scrollLeft` ติดลบไม่ได้ ผู้ใช้จึงปัดกลับไปหาไม่ได้เลย** วัดที่ 390px: **ลิงก์ "ตลาดวัสดุ" เลยขอบซ้าย 72px · `scrollLeft` เป็น 0 · กดไม่ได้ทั้ง 30 หน้า** — ซึ่งเป็นทางเข้าตลาดวัสดุ ที่เป็นหัวใจของเว็บ บนจอแคบจึงต้องเรียงจากซ้าย ของที่ล้นจะไปอยู่ทางขวาแทน ซึ่งปัดไปหาได้ตามปกติ · **จอคอมไม่แตะเลย** ต้องมี `!important` เพราะ `justify-content` เขียนเป็น inline style อยู่ในเทมเพลต — **inline ชนะกฎในไฟล์ CSS เสมอไม่ว่า selector จะ เจาะจงแค่ไหน** (รอบแรกผมใส่กฎไปแล้วตัวเลขไม่ขยับเลย เพราะลืมข้อนี้) */ #bk-site-nav > div > div[style*="overflow-x"] { justify-content: flex-start !important; } } /* ── ดูรูปเต็มจอทั้งเว็บ (image-viewer.js) ───────────────────────── */ #bk-viewer{ position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; background:rgba(12,10,8,.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #bk-viewer.on{ display:flex; } #bk-viewer .bk-v-img{ max-width:94vw; max-height:86vh; border-radius:12px; object-fit:contain; box-shadow:0 18px 50px rgba(0,0,0,.55); } #bk-viewer button{ position:absolute; border:none; cursor:pointer; color:#fff; background:rgba(255,255,255,.14); border-radius:999px; width:46px; height:46px; font-size:1.05rem; line-height:1; display:flex; align-items:center; justify-content:center; } #bk-viewer button:hover{ background:rgba(255,255,255,.26); } #bk-viewer .bk-v-close{ top:16px; right:16px; } #bk-viewer .bk-v-prev{ left:14px; top:50%; transform:translateY(-50%); } #bk-viewer .bk-v-next{ right:14px; top:50%; transform:translateY(-50%); } #bk-viewer .bk-v-bar{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px 18px; display:flex; gap:14px; align-items:center; justify-content:space-between; color:#fff; font-size:.86rem; background:linear-gradient(to top, rgba(0,0,0,.6), transparent); pointer-events:none; } #bk-viewer .bk-v-cap{ opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #bk-viewer .bk-v-cnt{ opacity:.75; flex-shrink:0; font-variant-numeric:tabular-nums; } /* ให้รู้ว่ารูปกดขยายได้ */ img[data-zoom]{ cursor:zoom-in; } @media (max-width:640px){ #bk-viewer .bk-v-prev{ left:6px; } #bk-viewer .bk-v-next{ right:6px; } #bk-viewer button{ width:40px; height:40px; } } /* ══════════════════════════════════════════════════════════════════ แก้ปัญหามือถือที่เจอจากการตรวจ 2026-08-17 ทุกกฎอยู่ในกรอบจอเล็กเท่านั้น จอใหญ่ไม่เปลี่ยนอะไรเลย ══════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* ── ตารางล้นจอ ────────────────────────────────────────────────── หลายหน้ามีตารางกว้างกว่าจอ แต่ไม่ได้ครอบด้วยกล่องที่เลื่อนได้ คอลัมน์ขวาจึงหายไปนอกจอโดยผู้ใช้ไม่รู้ว่ามีอยู่ (เจอที่หน้าบริหารโครงการ · เช็คราคา · จัดการร้าน) ทำให้ตารางเลื่อนแนวนอนได้เองโดยไม่ต้องไปแก้ทีละหน้า */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* กันหัวตารางกับเซลล์บีบจนอ่านไม่ออกเวลาเลื่อน */ table th, table td { white-space: nowrap; } /* ยกเว้นตารางที่หน้านั้นครอบกล่องเลื่อนไว้เองแล้ว จะได้ไม่ซ้อนสองชั้น */ .overflow-x-auto > table, [style*="overflow-x:auto"] > table, [style*="overflow-x: auto"] > table { display: table; overflow-x: visible; } /* ── ตัวหนังสือเล็กเกินอ่าน ────────────────────────────────────── ป้ายและข้อความช่วยเหลือหลายจุดตั้งไว้ 10-11px ซึ่งบนมือถืออ่านยากมาก ดันขึ้นเป็นอย่างน้อย 12px เฉพาะบนจอเล็ก */ [style*="font-size:12px"], [style*="font-size: 12px"], [style*="font-size:12px"], [style*="font-size: 12px"], [style*="font-size:12px"], [style*="font-size: 12px"], .text-\[10px\], .text-\[11px\] { font-size: 12px !important; } /* ── iOS ซูมหน้าจอเองตอนแตะช่องกรอก ───────────────────────────── Safari บน iPhone จะซูมเข้าอัตโนมัติถ้าช่องกรอกมีตัวอักษรเล็กกว่า 16px แล้วหน้าจะค้างอยู่ในสภาพซูมจนผู้ใช้ต้องถอยเอง — น่ารำคาญมาก บังคับ 16px ให้ทุกช่องกรอกบนจอเล็ก */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } } /* ══════════════════════════════════════════════════════════════════ ขยับของที่ติดขอบล่างขึ้น ตอนแถบคุกกี้โผล่ ══════════════════════════════════════════════════════════════════ `--bk-cookie-h` ตั้งโดย cookie-consent.js ตามความสูงจริงของแถบ ใช้ทุกขนาดจอ ไม่ใช่เฉพาะมือถือ เพราะบนจอคอมก็บังเหมือนกัน แค่บนมือถือแถบสูงกว่าเลยบังหนักกว่า */ html.bk-cookie-open .theme-toggle, html.bk-cookie-open #bk-assist-btn, html.bk-cookie-open #bk-search-btn, html.bk-cookie-open .bottom-nav, html.bk-cookie-open #bottom-nav, html.bk-cookie-open nav[class*="bottom"], html.bk-cookie-open .bar { bottom: calc(var(--bk-cookie-h, 0px) + 12px) !important; transition: bottom .18s ease; } /* ปุ่มลอยตัวที่สองซ้อนอยู่เหนือตัวแรก ต้องขยับขึ้นให้พ้นทั้งคู่ */ html.bk-cookie-open #bk-search-btn { bottom: calc(var(--bk-cookie-h, 0px) + 76px) !important; } /* ปุ่มอัปโหลดไอเดียบนหน้าแกลอรี่ อยู่เหนือปุ่มผู้ช่วยอยู่แล้ว (84px) ตอนแถบคุกกี้โผล่ต้องยกตามไปด้วย ไม่งั้นจะไปนั่งทับปุ่มผู้ช่วยพอดี */ html.bk-cookie-open #bk-ugc-fab { bottom: calc(var(--bk-cookie-h, 0px) + 84px) !important; } /* ══ ปุ่มลอยมุมซ้ายล่าง ต้องหลบเมนูข้าง ══════════════════════════════ (เพิ่ม 2026-08-26 · วัดจากเบราว์เซอร์จริง) มุมซ้ายล่างมีปุ่มลอยสองตัว: · "วิธีใช้หน้านี้" (`bk-guide.js`) left:14 bottom:14 · "กลับขึ้นบน" (`site-polish.js`) left:16 bottom:76 หน้าที่มีเมนูข้าง (`#sidebar` กว้าง 220px แบบ fixed) จึงถูกทับ — **ลิงก์ "ออกจากระบบ" ถูกปุ่ม "วิธีใช้หน้านี้" ทับไป 52%** ผู้ใช้กดออกจากระบบแล้วได้กล่องคำแนะนำเด้งขึ้นมาแทน ══ ทางที่ลองแล้วผิด — บันทึกไว้กันทำซ้ำ ══════════════════════════ รอบแรกผมแก้ด้วยการ**เว้นที่ท้ายเมนูข้าง** (`padding-bottom:128px`) ผลคือเมนูซึ่งเป็น `overflow:auto` เตี้ยลงจาก 775 เหลือ 647 แล้วรายการเริ่มซ้อนกัน — **กด "เครื่องมือทั้งหมด" แล้วออกจากระบบ** คือเปลี่ยนบั๊กเล็กให้เป็นบั๊กใหญ่กว่าเดิม (จับได้เพราะวัดซ้ำหลังแก้ ไม่ใช่เพราะเดาถูก) ทางที่ถูกคือ **ขยับปุ่มลอย ไม่ใช่ขยับเมนู** — ของที่ลอยควรหลบเนื้อหา ไม่ใช่ให้เนื้อหาหลบของที่ลอย */ body:has(#sidebar) #bk-guide-btn, body:has(#sidebar) #bk-to-top { left: 236px !important; } /* ══ ปุ่มลอย "ถามเรื่องบ้าน" ซ่อนไปเลยตอนแถบคุกกี้เปิดอยู่ ══════════ (แก้ 2026-08-26 · เดิมอยู่ในกฎข้างบนแล้วถูกยกขึ้นเหมือนตัวอื่น) ปัญหาที่วัดได้จากเบราว์เซอร์จริงบนจอ 1440x900: · แถบคุกกี้เปิดอยู่ → ปุ่มลอยถูกยกขึ้น 68px ไป**ทับกลางเนื้อหา** ลิงก์ "ดูทั้งหมด ›" ของแถบไอเดียแต่งบ้านถูกบัง 81% และ `elementFromPoint` กลางลิงก์คืน **ปุ่มแชท** ไม่ใช่ลิงก์ = ผู้ใช้กด "ดูทั้งหมด" แล้วได้หน้าต่างแชทเปิดมาแทน · กดยอมรับคุกกี้แล้ว → ปุ่มลอยกลับลงไปที่เดิม ทับ 0% กดโดนปกติ จึงเป็นบั๊กของ**คนที่เพิ่งเข้าเว็บครั้งแรก**เท่านั้น ซึ่งก็คือจังหวะที่สำคัญที่สุด ทำไมเลือก "ซ่อน" ไม่ใช่ "ยกขึ้นน้อยลง": ยกเท่าไหร่ก็ยังไปตกอยู่ในเนื้อหาอยู่ดี แค่คนละบรรทัด — ที่ปลอดภัย มีที่เดียวคือตำแหน่งปกติ (`bottom:18px`) ซึ่งมี `#bk-fab-gap` เว้นที่ไว้ให้แล้ว ระหว่างที่ยังไม่ตอบเรื่องคุกกี้ ผู้ใช้ก็ควรตอบ แถบนั้นก่อนอยู่แล้ว พอตอบเสร็จปุ่มโผล่กลับมาที่เดิมทันที หน้าตาหลังกดยอมรับ **ไม่เปลี่ยนเลยสักพิกเซล** */ html.bk-cookie-open #bk-fab, html.bk-cookie-open #bk-fab-panel { opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease; } /* เนื้อหาท้ายหน้าต้องไม่ถูกแถบทับจนอ่านบรรทัดสุดท้ายไม่ได้ */ html.bk-cookie-open body { padding-bottom: calc(var(--bk-cookie-h, 0px) + 8px); } /* ── เมนูข้างที่ยึดติดจอ ต้องเว้นที่ให้แถบคุกกี้ด้วย ────────────── `padding-bottom` ที่ body ไม่ช่วยเมนูพวกนี้เลย เพราะมันเป็น sticky/fixed จึงไม่ขยับตามความสูงของ body ผลที่วัดได้จริงด้วย browser_scan.py (2026-08-19): รายการล่างสุดของเมนูข้าง ในหน้าตลาด — "คำสั่งซื้อของฉัน" กับ "รายการที่อยากได้" — ถูกแถบคุกกี้ทับ จนกดไม่ได้ ผู้ใช้ใหม่ที่ยังไม่กดยอมรับคุกกี้จึงเข้าสองหน้านี้ไม่ได้เลย ซึ่งเป็นคนกลุ่มเดียวกับที่เพิ่งเข้าเว็บครั้งแรกพอดี */ html.bk-cookie-open .sidebar, html.bk-cookie-open .side-rail, html.bk-cookie-open aside[class*="side"], html.bk-cookie-open nav[class*="side"] { padding-bottom: calc(var(--bk-cookie-h, 0px) + 12px) !important; /* เมนูที่กำหนดความสูงเต็มจอไว้ ต้องหดลงเท่ากับความสูงของแถบ ไม่งั้นเพิ่มระยะขอบไปก็ยังล้นออกนอกจออยู่ดี */ max-height: calc(100vh - 56px - var(--bk-cookie-h, 0px)) !important; } /* ══════════════════════════════════════════════════════════════════ ปุ่มลอยต้องไม่ทับของที่อยู่มุมขวาล่าง ══════════════════════════════════════════════════════════════════ ปุ่มผู้ช่วยลอยอยู่ที่ bottom:18px มุมขวา ซึ่งเป็นตำแหน่งเดียวกับ • แถบเมนูล่าง (.bottom-nav สูงราว 62px) — ทับปุ่มขวาสุดเสมอ • ลิงก์ท้ายหน้า (สมาชิก · ชุมชน · นโยบายความเป็นส่วนตัว) ทั้งสองอย่างกดไม่ได้จริงบนมือถือ (พิสูจน์ด้วย browser_scan.py ที่ถามเบราว์เซอร์ว่า "จิ้มตรงนี้โดนอะไร" — ตอบว่าโดนปุ่มลอยทุกครั้ง) แก้สองทาง ไม่ต้องวัดความสูงอะไรตอนรัน จึงไม่มีทางพลาดเพราะวัดผิดจังหวะ 1. เว้นที่ท้ายหน้าให้เนื้อหาเลื่อนพ้นปุ่มลอยได้ 2. หน้าที่มีแถบเมนูล่าง ให้ปุ่มลอยขึ้นไปอยู่เหนือแถบ */ /* ── ที่เว้นท้ายหน้าบนจอคอม อยู่ใน bk-assist.js ไม่ใช่ที่นี่ ────────── เดิมกฎ `body { padding-bottom }` อยู่ในบล็อกมือถือบล็อกเดียว เพราะคิดว่าจอคอมกว้างพอจนปุ่มลอยไม่ทับอะไร — **ผิด** ปุ่มลอยเป็น `position:fixed` มุมขวาล่าง จึงทับของมุมนั้นทุกขนาดจอ พิสูจน์จากเบราว์เซอร์จริงบนจอ 1440x900 เมื่อ 2026-08-24: ปุ่ม "ดูทั้งหมด ›" บนหน้าแดชบอร์ด (ขนาด 69x26) **ถูกปุ่ม "ถามเรื่องบ้าน" บังไว้ 79% — กดไม่โดน** ทำไมไม่แก้ที่นี่ด้วย `body { padding-bottom }` เฉย ๆ: หลายหน้าตั้ง `body { min-height:100vh }` ไว้ ถ้าเพิ่ม padding ความสูงรวมจะเกินจอ → **มีแถบเลื่อนโผล่บนหน้าที่เนื้อหาสั้น** ซึ่งเป็นการเปลี่ยนหน้าตาที่ผู้ใช้เห็น จึงไปเว้นที่ด้วยกล่องเปล่าใน `bk-assist.js` แทน — กล่องอยู่ *ใน* body หน้าที่เนื้อหาสั้นจึงยังพอดีจอเหมือนเดิม ไม่มีแถบเลื่อนงอก */ @media (max-width: 768px) { /* บนมือถือมีแถบเมนูล่างด้วย จึงต้องเว้นมากกว่า */ body { padding-bottom: 96px; } /* หน้าที่มีแถบเมนูล่าง — ยกปุ่มลอยขึ้นเหนือแถบ (62px) + เว้นช่อง ถ้าแถบคุกกี้โผล่อยู่ด้วยก็บวกความสูงของมันเข้าไปอีก ── ยกเพิ่มอีก 20px เมื่อ 2026-08-27 (faro เคาะ "ขยับได้เลย") ── ที่ 76px ปุ่มไม่ได้ขโมยคลิกของอะไรแล้ว (พิสูจน์ด้วย browser_check_fab ได้ 0 จาก 8 หน้า) **แต่ขอบล่างของปุ่มยังชนขอบบนของแถบเมนูพอดี** และยังบังข้อความอธิบายในเมนูข้าง เช่น "เทียบราคา 5 ร้านใหญ่" ซึ่งวัดได้จริงด้วย elementsFromPoint ขยับ**ตัวปุ่ม**อย่างเดียว ไม่ไปเว้นที่ในเนื้อหา — รอบที่แล้วผมเผลอไปเว้นที่ในเมนูข้าง ทำให้กด "เครื่องมือทั้งหมด" แล้วหลุดไปโดนปุ่มออกจากระบบ หนักกว่าเดิม */ body:has(.bottom-nav) #bk-fab, body:has(.bottom-nav) .theme-toggle { bottom: calc(96px + var(--bk-cookie-h, 0px)) !important; } body:has(.bottom-nav) #bk-fab-panel { bottom: calc(160px + var(--bk-cookie-h, 0px)) !important; } /* เบราว์เซอร์เก่าที่ยังไม่รองรับ :has() จะข้ามกฎข้างบนไป ตัวสำรอง: หน้าที่มีแถบเมนูล่างติดป้าย data-has-bottom-nav ที่ body ได้ */ body[data-has-bottom-nav] #bk-fab, body[data-has-bottom-nav] .theme-toggle { bottom: calc(96px + var(--bk-cookie-h, 0px)) !important; } } /* ══════════════════════════════════════════════════════════════════ ปฏิกิริยาตอนกดปุ่ม — ทั้งเว็บ ══════════════════════════════════════════════════════════════════ ปุ่มที่กดแล้วไม่มีอะไรเปลี่ยนเลย ทำให้ผู้ใช้ไม่แน่ใจว่ากดติดหรือเปล่า แล้วกดซ้ำ ซึ่งบนหน้าสั่งซื้อกับหน้าส่งฟอร์มแปลว่าอาจส่งซ้ำสองครั้ง ใช้เวลาสั้นมาก (80ms) และย่อแค่ 2% เพื่อให้รู้สึกว่า "กดติด" โดยไม่รบกวนสายตา และไม่ทำให้ปุ่มขยับจนกดพลาด ────────────────────────────────────────────────────────────────── */ button:active:not(:disabled), [role="button"]:active, .btn:active:not(:disabled), input[type="submit"]:active:not(:disabled) { transform: scale(.98); filter: brightness(.95); transition: transform .08s ease, filter .08s ease; } /* ปุ่มที่กำลังทำงานอยู่ ต้องดูออกว่ากดไปแล้วและกดซ้ำไม่ได้ */ button:disabled, .btn:disabled, input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; } /* คนที่ตั้งค่าเครื่องว่าไม่ชอบภาพเคลื่อนไหว — ใช้แค่ความสว่างพอ */ @media (prefers-reduced-motion: reduce) { button:active:not(:disabled), [role="button"]:active, .btn:active:not(:disabled), input[type="submit"]:active:not(:disabled) { transform: none; } } /* ══════════════════════════════════════════════════════════════ คลาสที่เคยพึ่งสคริปต์ tailwind จาก CDN — ทำเองในไฟล์นี้แทน (เพิ่ม 2026-08-20) เรื่องที่เจอตอนไล่ตรวจ: · ตัวแปรสีของแบรนด์ (br / dk) ไม่เคยถูกตั้งค่าใน tailwind.config เลย เพราะทั้งเว็บไม่มีไฟล์ config อยู่แม้แต่ไฟล์เดียว แปลว่า `hover:text-br` `focus:ring-br` ฯลฯ **ไม่เคยทำงานตั้งแต่วันแรก** ต่อให้สคริปต์ CDN โหลดสำเร็จก็ตาม — เป็นบั๊กเงียบที่อยู่มานาน · `text-[12px]` เป็นรูปแบบ "ค่าอิสระ" ที่มีแต่ตัวสร้างตอนรันเท่านั้น ที่ทำให้ได้ พอถอด CDN ออก 8 หน้าจึงเสียขนาดตัวอักษรไป · หลายหน้าประกาศ .text-br / .bg-br ของตัวเองซ้ำ ๆ ด้วยค่าที่ไม่ตรงกัน (#75593c บ้าง #8C6A43 บ้าง #8B6C4A บ้าง) ตั้งค่ากลางไว้ที่นี่ หน้าไหนประกาศเองอยู่แล้วจะยังชนะตามเดิม เพราะที่นี่ไม่ใส่ !important ══════════════════════════════════════════════════════════════ */ .text-br { color: #75593C; } .text-dk { color: #1E1510; } .bg-br { background-color: #8B6C4A; } .border-br{ border-color: #8B6C4A; } .ring-br { box-shadow: 0 0 0 2px #8B6C4A; } .hover\:text-br:hover { color: #75593C; } .hover\:text-dk:hover { color: #1E1510; } .hover\:bg-br:hover { background-color: #8B6C4A; } .hover\:border-br:hover { border-color: #8B6C4A; } .focus\:border-br:focus { border-color: #8B6C4A; } .focus\:ring-br:focus { outline: none; box-shadow: 0 0 0 2px #8B6C4A; } /* ขนาดตัวอักษรแบบระบุค่าเอง — ใช้อยู่ 8 หน้า */ .text-\[12px\] { font-size: 12px; line-height: 1.45; } .text-\[13px\] { font-size: 13px; line-height: 1.5; } .text-\[11px\] { font-size: 11px; line-height: 1.4; } /* ชั้นความลึกและฟอนต์ที่ tailwind มาตรฐานไม่มี */ .z-60 { z-index: 60; } .font-sarabun { font-family: 'Sarabun', system-ui, sans-serif; } /* ══════════════════════════════════════════════════════════════ ลิงก์เล็ก ๆ ในแถบท้ายเว็บและแถบนำทาง (เพิ่ม 2026-08-20) ตรวจด้วยเบราว์เซอร์จริงบนจอมือถือแล้วพบว่าลิงก์ท้ายเว็บสูงแค่ 17px มาตรฐานการเข้าถึงระดับ AA (WCAG 2.5.8) กำหนดขั้นต่ำ 24px ไม่ดันไปถึง 44px เพราะจะทำให้แถวลิงก์ยืดจนเสียรูป — ใช้ padding แนวตั้งเพิ่มพื้นที่แตะแทน โดยไม่ขยับตัวหนังสือ ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* ใช้ !important เพราะลิงก์พวกนี้ถูกกำหนดสไตล์ inline มาจากตัวฉีดใน main.py ซึ่งชนะกฎธรรมดาเสมอ · line-height ช่วยให้สูงพอโดยไม่ขยับตัวหนังสือ */ #bk-global-footer a, footer a, .seo-foot a, a.navlink { display: inline-block !important; min-height: 26px !important; line-height: 26px !important; } /* ลิงก์ "ดูทั้งหมด ›" ที่เกาะอยู่หัวการ์ดต่าง ๆ */ a[href]:not(.btn):not(.side-item):not(.chip) > i.fa-chevron-right, .see-all, a.see-all { min-height: 26px; display: inline-flex; align-items: center; } } /* ══════════════════════════════════════════════════════════════════ WCAG 2.2 ข้อ 2.4.11 — กรอบโฟกัสต้องไม่ถูกแถบติดขอบทับ เพิ่ม 2026-08-21 ══════════════════════════════════════════════════════════════════ ทั้งเว็บมีแถบที่ position:fixed/sticky ติดขอบบนหรือล่างอยู่ 48 จุด (เมนูบนของหน้าแอดมิน · แถบล่างของตลาด · ปุ่มลอย · แถบคุกกี้) เวลาผู้ใช้กด Tab ไล่ลงไปเรื่อย ๆ เบราว์เซอร์จะเลื่อนหน้าให้ปุ่มนั้น มาอยู่ **ขอบจอพอดี** ซึ่งคือตำแหน่งที่แถบเหล่านี้ทับอยู่พอดีเช่นกัน → คนที่ใช้คีย์บอร์ดจะไม่เห็นเลยว่าตัวเองอยู่ที่ปุ่มไหน scroll-margin บอกเบราว์เซอร์ว่า "เวลาเลื่อนมาหาของชิ้นนี้ เว้นที่ไว้เท่านี้" เป็นการบอกเบราว์เซอร์เฉย ๆ **ไม่ได้ขยับอะไรบนหน้า หน้าตาไม่เปลี่ยนเลย** ค่าที่ใช้: บน 72px (สูงกว่าเมนูบนสุด) · ล่าง 96px (สูงกว่าแถบล่าง+ปุ่มลอย) */ :focus-visible, :target { scroll-margin-top: 72px; scroll-margin-bottom: 96px; } /* ══════════════════════════════════════════════════════════════════ จัดคิวชั้นลอยบนมือถือ — ทีละอย่าง ไม่ใช่พร้อมกันสี่ชั้น ══════════════════════════════════════════════════════════════════ ปัญหาที่วัดได้จริง (รายงานเบราว์เซอร์มือถือ · จอ 390px): เปิด /marketplace ครั้งแรกจะเจอพร้อมกัน — แถบคุกกี้ 15% + แถบล่าง 6% + แถบอีกอัน 14% + ปุ่มลอยผู้ช่วย 4% ≈ **หนึ่งในสามของจอถูกของลอยกิน ก่อนผู้ใช้ได้เห็นสินค้าชิ้นแรก** กฎที่มีอยู่ข้างบนแก้เรื่อง "ทับกัน" ไปแล้ว แต่ไม่ได้แก้เรื่อง "โผล่พร้อมกันหมด" ซึ่งเป็นคนละปัญหา — ของไม่ทับกันก็จริง แต่ยังกินพื้นที่รวมกันเท่าเดิม สำหรับคนที่ไม่เก่งเทคโนโลยี ของลอยสี่ชั้นในวินาทีแรกคือความสับสน แรกพบ เขาไม่รู้ว่าต้องกดอะไรก่อน และบางคนกดปิดผิดอันแล้วหลงทาง วิธีแก้: ให้ตอบเรื่องคุกกี้ให้จบก่อนอย่างเดียว แล้วตัวช่วยอื่นค่อยโผล่ ไม่ได้ลบอะไรทิ้ง แค่เลื่อนเวลา — พอกดยอมรับ/ปฏิเสธแล้วทุกอย่างกลับมาครบ ทำเฉพาะจอแคบ เพราะบนจอคอมพื้นที่เหลือเฟือ ไม่ได้บังอะไร และไม่แตะแถบนำทางหลักหรือปุ่มในเนื้อหา — ซ่อนเฉพาะ "ตัวช่วยลอย" ที่ไม่จำเป็นต่อการใช้หน้านั้น */ @media (max-width: 640px) { html.bk-cookie-open #bk-fab, html.bk-cookie-open #bk-assist-btn, html.bk-cookie-open #bk-search-btn, html.bk-cookie-open #calc-autosave-bar { /* ใช้ opacity + pointer-events แทน display:none เพื่อให้กลับมาแบบนุ่ม ๆ ไม่กระตุกตอนกดปิดแถบคุกกี้ และไม่ทำให้ตำแหน่งของอย่างอื่นขยับ (ไม่มี reflow) */ opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease; } /* แผงผู้ช่วยที่เปิดค้างไว้ ต้องไม่โดนซ่อนตาม ไม่งั้นคนที่กำลังพิมพ์คำถามอยู่จะเห็นมันหายไปเฉย ๆ */ html.bk-cookie-open #bk-fab-panel[style*="display:flex"], html.bk-cookie-open #bk-fab-panel.open { opacity: 1 !important; pointer-events: auto !important; } } /* ══════════════════════════════════════════════════════════════════ ลิงก์ "ข้ามไปยังเนื้อหา" — เพิ่ม 2026-08-22 ══════════════════════════════════════════════════════════════════ ที่มา: กวาดทั้ง templates/ และ static/ แล้วไม่เจอลิงก์แบบนี้เลยสักหน้า คนที่ใช้แป้นพิมพ์อย่างเดียว (มือข้างหนึ่งไม่สะดวก · ใช้โปรแกรมอ่านจอ · ผู้สูงอายุที่กดเมาส์ไม่แม่น) ต้องกด Tab ผ่านเมนูทั้งแถบก่อนถึงเนื้อหา **ทุกหน้า ทุกครั้งที่เปลี่ยนหน้า** บางหน้าของเรามีลิงก์ในเมนูเกิน 20 อัน หน้าตาไม่เปลี่ยนเลย: ซ่อนไว้เหนือขอบจอ โผล่เฉพาะตอนถูกโฟกัสด้วย Tab ห้ามใช้ display:none หรือ visibility:hidden เพราะของสองอย่างนั้น ทำให้โฟกัสไม่ได้ = ลิงก์ที่มีอยู่แต่ไม่มีใครไปถึง */ .bk-skip { position: absolute; left: 8px; top: -60px; /* ซ่อนเหนือขอบจอ ไม่ดันเนื้อหาลง */ z-index: 100000; /* เหนือแถบลอยทุกตัว ไม่งั้นโผล่มาแล้วถูกบัง */ background: #7A5C3A; color: #fff; padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 0 0 10px 10px; font: 600 1rem/1 'Sarabun', sans-serif; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: top .15s ease-out; } .bk-skip:focus, .bk-skip:focus-visible { top: 0; outline: 3px solid #F3D9A4; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bk-skip { transition: none; } }