/* ธีมสีดึงจากโลโก้ BEYBLADE X บ้านชาร์ม — "Crisp Pop" (Boss เลือก 27 ส.ค. 2026 จากหน้าเทียบสี — ตัดกันชัดสุด) */ :root { --ink: #17110d; /* เกือบดำสนิท จากขอบโลโก้ */ --paper: #fdf8f0; /* ขาวอมครีมบางๆ */ --bg: var(--paper); --card: #ffffff; --line: #ecdfc9; /* เส้นขอบโทนครีมเข้ม */ --accent: #ef2b2b; /* แดงจัดสุดจากโลโก้ */ --accent-dark: #c11f1f; --accent-soft: #fde2e0; --gold: #e0a83c; /* ทองเหลืองสดจากหมวก */ --gold-soft: #faf0da; --muted: #877260; --ok: #2f7a4f; --ok-soft: #e5f4ea; --err: #b3392c; --err-soft: #fbe6e2; --warn: #9c6b0a; --warn-soft: #fdf1d8; --info: #1a5ba8; --info-soft: #e2eefc; --hold: #6b3fa0; --hold-soft: #efe6fb; --flat: #8a7867; --flat-soft: #eeeeee; --radius: 12px; /* 🌙 สีทึบตัด (ป้าย/แถบ/หัวตาราง) — ตั้งใจไม่เปลี่ยนตามธีม เพื่อให้ตัวหนังสือขาวที่คู่กันอ่านออกเสมอ */ --solid: #17110d; font-variant-numeric: tabular-nums; } /* 🌙 ดาร์กโหมด — "Deep Espresso" (Boss เลือก 27 ส.ค. 2026 — ดำอุ่นแบบกาแฟเข้ม ไม่ใช่ดำเย็นแบบ noir) สลับด้วย data-theme บน (ตั้งจาก JS ก่อนวาดหน้าจอ กัน flash สีผิด) */ :root[data-theme="dark"] { --ink: #f2e6d3; /* ครีมอุ่น อ่านออกบนพื้นมืด */ --paper: #12100d; /* ดำอุ่นแบบกาแฟเข้ม */ --bg: var(--paper); --card: #201a15; --line: #4d3f30; --accent: #ff5b4a; /* แดงจากโลโก้ สว่างขึ้นให้เด้งบนพื้นดำ */ --accent-dark: #ff8a7a; /* ใช้เป็นสีลิงก์ ต้องอ่านออกบนพื้นมืด */ --accent-soft: #3a1a15; --gold: #f0c66b; /* ทองน้ำผึ้งจากหมวกโลโก้ */ --gold-soft: #332714; --muted: #b0a08e; --ok: #74dba0; --ok-soft: #14281f; --err: #ff9086; --err-soft: #3a1915; --warn: #ffcf6e; --warn-soft: #3a2c12; --info: #86baff; --info-soft: #152a42; --hold: #cda6ff; --hold-soft: #2a1f3a; --flat: #ad9f8f; --flat-soft: #242019; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Segoe UI", "Noto Sans Thai", -apple-system, sans-serif; background: var(--paper); color: var(--ink); line-height: 1.55; } /* mobile-first: ทุกเว็บของ Boss ต้องใช้จากมือถือได้ลื่นเป็นหลัก ไม่ใช่แค่ไม่พัง */ input, textarea, select, button { font-size: 16px; /* กัน iOS Safari ซูมอัตโนมัติตอนแตะช่องกรอก (ต่ำกว่านี้จะซูม) */ } .btn, button, input[type=submit] { min-height: 44px; /* ขนาดแตะขั้นต่ำ */ } .chip, a.chip { min-height: 36px; display: inline-flex; align-items: center; } a { color: var(--accent-dark); text-decoration: none; } a:hover { text-decoration: underline; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 3px solid var(--ink); /* เส้นหนาแบบสติกเกอร์ให้เข้ากับโลโก้ */ box-shadow: 0 2px 0 var(--accent); position: sticky; top: 0; z-index: 10; } /* 🔴 หัวเว็บตั้งใจให้ "สว่างเสมอ" ไม่ว่าจะสลับธีมไหน (คู่กับ .site-footer ที่ตั้งใจให้มืดเสมอ) เพราะโลโก้ไฟล์ .jpg พื้นขาว ใช้ mix-blend-mode:multiply กลืนกับพื้นขาวเท่านั้น — ถ้าพื้นหลังเปลี่ยนเป็นมืด ตัวหนังสือที่อิง var(--ink) จะพลิกเป็นสีอ่อนบนพื้นขาว **อ่านไม่ออก** (Boss เจอจริง 27 ส.ค. 2026) → ตัวหนังสือในหัวเว็บใช้ var(--solid) ที่ตั้งใจไม่เปลี่ยนตามธีมแทน */ .brand { display: flex; align-items: center; gap: 10px; color: var(--solid); min-width: 0; } .brand:hover { text-decoration: none; } .brand img { width: 46px; height: 46px; flex-shrink: 0; mix-blend-mode: multiply; /* ตัดพื้นขาวของไฟล์โลโก้ให้กลืนกับพื้นหลัง (หัวเว็บพื้นขาวเสมอ ใช้ได้ทุกธีม) */ } .brand-text { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; } .brand-text small { display: block; font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; } .site-nav { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } /* กล่องลิงก์ข้อความ — บนจอกว้างเรียงปกติ · จอแคบเลื่อนนิ้วได้ (ดูกฎในบล็อก 560px) */ .nav-scroll { display: flex; gap: 6px; align-items: center; min-width: 0; } .site-nav a { font-weight: 700; color: var(--solid); font-size: 14px; padding: 9px 13px; border-radius: 999px; border: 2px solid transparent; } .site-nav a:hover { text-decoration: none; background: rgba(220, 47, 38, .08); } /* คงที่ไม่เปลี่ยนตามธีม — หัวเว็บพื้นขาวเสมอ */ .site-nav a.cart-link { border-color: var(--solid); background: var(--gold-soft); min-width: 44px; text-align: center; } /* ปุ่มสลับภาษา — เล็ก ไม่แย่งสายตาจากปุ่มซื้อ แต่หาเจอทันทีถ้าอ่านไทยไม่ออก */ .site-nav a.lang-sw { font-weight: 900; letter-spacing: .5px; background: var(--solid); color: #fff; border-color: var(--solid); min-width: 38px; text-align: center; } .site-nav a.lang-sw:hover { background: var(--accent); } /* ปุ่มสลับสว่าง/มืด — หน้าตาเดียวกับปุ่มสลับภาษา ให้อยู่คู่กันเป็นชุดเดียว */ .theme-sw { font-size: 16px; min-width: 38px; min-height: 36px; text-align: center; border-radius: 999px; border: 2px solid var(--line); background: var(--card); cursor: pointer; line-height: 1; padding: 0; } .theme-sw:hover { background: var(--gold-soft); } .container { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; } .site-footer { text-align: center; padding: 28px 20px 36px; color: #fbf5e9; /* ครีมตายตัว — ฟุตเตอร์ตั้งใจให้มืดเสมอไม่ว่าจะสลับธีมไหน */ font-size: 13px; background: var(--solid); border-top: 4px solid var(--accent); margin-top: 40px; } .site-footer img { width: 64px; height: 64px; opacity: .95; margin-bottom: 8px; border-radius: 50%; } .site-footer p { margin: 4px 0; opacity: .85; } .flash-wrap { max-width: 1080px; margin: 16px auto 0; padding: 0 20px; } .flash { padding: 11px 16px; border-radius: var(--radius); margin-bottom: 10px; font-weight: 700; border: 2px solid currentColor; } .flash-ok { background: var(--ok-soft); color: var(--ok); } .flash-error { background: var(--err-soft); color: var(--err); } /* ── catalog ── */ .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .search-box { flex: 1; min-width: 200px; display: flex; } .search-box input { flex: 1; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); font-size: 14px; } .search-box button { padding: 9px 16px; border: none; background: var(--accent); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; font-weight: 600; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } .card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 3px 3px 0 var(--ink); /* เงาแข็งแบบสติกเกอร์ ให้อารมณ์เดียวกับโลโก้ */ transition: transform .12s, box-shadow .12s; } .card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); } /* การ์ดหมด/ยังไม่มีขาย (โผล่ตอนค้นหน้าแรกไม่เจอของขาย แต่ตรงกับฐานการ์ด) — เทาๆ + คลิกไปหน้าการ์ดทั้งเซ็ต */ .soon-hint { margin: 4px 0 10px; } .soon-grid { margin-bottom: 20px; } .card.out { opacity: .9; cursor: pointer; } .card.out .card-thumb img { filter: grayscale(1) contrast(.85) brightness(1.05); } .card.out .card-stock { color: var(--muted); } .shop-card.is-reserved .card-thumb img { filter: grayscale(.6) contrast(.9) brightness(1.02); } .shop-card.is-reserved .card-stock { color: var(--warn); } .card-status-badge { position: absolute; top: 8px; left: 8px; } .reserved-note { flex: 1; text-align: center; font-weight: 800; font-size: 13px; color: var(--warn); padding: 8px 0; } .card-thumb { position: relative; aspect-ratio: 1/1; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 2px solid var(--ink); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; } .card-thumb.empty { color: var(--muted); font-size: 40px; } .card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .card-title { font-weight: 800; font-size: 14px; } .card-cat { font-size: 12px; color: var(--muted); font-weight: 600; } .card-price { margin-top: auto; font-size: 18px; font-weight: 900; color: var(--accent); } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } /* ── item detail ── */ .item-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (max-width: 720px) { .item-layout { grid-template-columns: 1fr; } } /* คำโปรยใต้ชื่อร้าน ("CONSIGNMENT · COLLECTIBLES") ต้องหายตั้งแต่แท็บเล็ตลงมา — พอเพิ่มเมนู "เข้าสู่ระบบ" เมนูดันมาทับคำโปรยที่ 768px (ตัวตรวจหน้าจอจับได้ 20 ส.ค. 2026) */ @media (max-width: 1000px) { .brand-text small { display: none; } } .item-gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 10px; } .item-info h1 { font-size: 24px; margin: 0 0 6px; } .item-price { font-size: 30px; font-weight: 900; color: var(--accent); margin: 10px 0; } .item-desc { white-space: pre-wrap; color: var(--ink); margin: 16px 0; } .tag { display: inline-block; background: var(--gold-soft); color: var(--ink); border: 2px solid var(--ink); padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; } /* จำนวนคงเหลือ — ในการจำลอง ลูกค้าทุกคนต้องเดาเองว่าเหลือกี่ชิ้น */ .item-stock { display: inline-block; background: var(--gold-soft); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 14px; margin: 0 0 12px; } .item-gallery img { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } .btn { display: inline-block; padding: 11px 22px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 2px solid var(--ink); font-weight: 800; font-size: 15px; cursor: pointer; text-align: center; box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s; } .btn:hover { background: var(--accent-dark); text-decoration: none; } .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); } .btn.secondary { background: var(--card); color: var(--ink); } .btn.danger { background: var(--err); } .btn.small { padding: 8px 14px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* ── ปุ่มติดต่อแอดมินผ่าน LINE ── */ .contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .contact-row .btn { flex: 1 1 160px; } .btn-line { background: #06c755; } .btn-line:hover { background: #05a648; } .btn-ghost { background: var(--card); color: var(--ink); } .btn-ghost:hover { background: var(--gold-soft); } .contact-note { font-size: 13px; color: var(--muted); margin-top: 8px; } .floor-hint { font-size: 12px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; } .floor-hint.muted { color: var(--muted); font-weight: 500; } /* ── cart / checkout ── */ .cart-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cart-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--accent-soft); } .cart-row .info { flex: 1; } .cart-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; color: var(--ink); } .cart-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 800; padding: 12px 0 18px; border-top: 2px solid var(--ink); margin-top: 6px; } /* margin-top กันฟอร์มไปชนกล่องด้านบน (กล่องมีเงาแข็ง 3px ยื่นลงมา) */ .form-grid { display: grid; gap: 14px; max-width: 480px; margin-top: 18px; } label { font-weight: 700; font-size: 14px; display: block; margin-bottom: 4px; } input[type=text], input[type=tel], input[type=number], textarea, select { width: 100%; padding: 11px 13px; border: 2px solid var(--line); border-radius: 8px; font-family: inherit; background: var(--card); color: var(--ink); } input[type=text]:focus, input[type=tel]:focus, input[type=number]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { resize: vertical; min-height: 80px; } .pay-box { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px; max-width: 480px; box-shadow: 4px 4px 0 var(--ink); } .pay-box .amount { font-size: 32px; font-weight: 900; color: var(--accent); } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 2px solid currentColor; } .status-pending_payment { background: var(--warn-soft); color: var(--warn); } .status-pending_verify { background: var(--warn-soft); color: var(--warn); } .status-verified { background: var(--ok-soft); color: var(--ok); } .status-shipped { background: var(--info-soft); color: var(--info); } .status-cancelled { background: var(--err-soft); color: var(--err); } .status-available { background: var(--ok-soft); color: var(--ok); } .status-reserved { background: var(--warn-soft); color: var(--warn); } .status-sold { background: var(--flat-soft); color: var(--flat); } .status-withdrawn { background: var(--flat-soft); color: var(--flat); } .status-incoming { background: var(--info-soft); color: var(--info); } /* ของกำลังมา ยังไม่ขึ้นเว็บ */ .status-hold { background: var(--hold-soft); color: var(--hold); } /* กันไว้ไม่ขาย เก็บใช้เอง */ /* QR รับเงิน — ต้องใหญ่พอให้สแกนจากจอมือถืออีกเครื่องได้ */ .payqr { display: block; width: 100%; max-width: 300px; margin: 0 auto 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; } .qr-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; } /* ── admin ── */ /* เมนูหลังร้านยาวขึ้นเรื่อยๆ ตามฟีเจอร์ — ต้องขึ้นบรรทัดใหม่ ไม่ใช่ทับกัน (ui_audit จับได้ 26 ส.ค. 2026 ตอนเพิ่มเมนู "ของรอตรวจ/ผู้ฝากขาย" แล้วตัวหนังสือซ้อนกัน) */ .admin-bar { background: var(--solid); color: #fff; padding: 10px 24px; font-size: 13px; border-bottom: 3px solid var(--accent); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } .admin-bar a { color: #fff; font-weight: 700; white-space: nowrap; } .pending-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 900; text-align: center; } .stat-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .stat { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 20px; min-width: 120px; box-shadow: 3px 3px 0 var(--ink); } .stat .n { font-size: 26px; font-weight: 900; color: var(--accent); } .stat .label { font-size: 12px; color: var(--muted); } table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; } th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; } th { background: var(--solid); color: #fbf5e9; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; } tr:last-child td { border-bottom: none; } .table-wrap { overflow-x: auto; } .slip-thumb { max-width: 240px; border-radius: 8px; border: 1px solid var(--line); } /* ── responsive tables: ตารางแอดมิน → การ์ดซ้อนกันบนมือถือ (ไม่ใช่แค่เลื่อนซ้าย-ขวา) ── */ @media (max-width: 640px) { table.responsive thead { display: none; } table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; } table.responsive tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table.responsive td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: right; } table.responsive td:last-child { border-bottom: none; } table.responsive td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-align: left; flex-shrink: 0; } .site-header { padding: 8px 12px; } .brand img { width: 40px; height: 40px; } .brand-text { font-size: 15px; } .container { padding: 16px 14px 48px; } /* มือถือ: เลื่อนแนวนอนแถวเดียว (นิ้วปัดง่ายกว่าไล่หาหลายบรรทัด) */ .admin-bar { padding: 4px 14px; overflow-x: auto; white-space: nowrap; display: block; } /* แถบแอดมิน Boss กดจากมือถือทุกวัน — เดิมสูงแค่ 20px นิ้วโป้งกดพลาดลิงก์ข้างๆ */ .admin-bar a { margin-right: 14px; display: inline-block; padding: 11px 2px; min-height: 44px; min-width: 44px; text-align: center; } /* ลิงก์ "แก้ไข/ดู" ในตารางแอดมิน — เดิม 32×22px เล็กกว่านิ้วโป้ง กดโดนแถวข้างๆ */ table.responsive td a, .table-wrap td a { display: inline-block; padding: 11px 10px; min-height: 44px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .item-price { font-size: 24px; } .pay-box .amount { font-size: 26px; } } /* ลิงก์เข้าแคตตาล็อกการ์ด + ข้อความสถานะ — ใช้บนหน้าแรกด้วย จึงอยู่ในไฟล์นี้ ไม่ใช่ catalog.css */ .cat-cta { margin: 0 0 14px; } .cat-cta a { display: block; text-align: center; text-decoration: none; font-weight: 800; background: var(--gold-soft); border: 2px dashed var(--ink); border-radius: 12px; padding: 12px; color: var(--ink); } .cat-status { text-align: center; color: var(--muted); font-size: 14px; padding: 8px 0 24px; } /* รูปการ์ดทางการที่ใช้แทนรูปถ่าย — สัดส่วนการ์ด 5:7 ไม่ใช่ crop สี่เหลี่ยมจัตุรัสแบบรูปสินค้า */ .card-thumb img.art { object-fit: contain; background: var(--gold-soft); padding: 4px; } .art-full { width: 100%; max-width: 320px; border-radius: 10px; border: 2px solid var(--ink); } .art-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; } /* ══════════ มือถือมาก่อน (Boss สั่ง 18 ส.ค. 2026 "ปรับให้เหมาะกับโทรศัพเป็นหลัก") ══════════ ของเดิมเขียนแบบจอใหญ่ก่อนแล้วค่อยย่อ · ส่วนนี้บังคับพฤติกรรมฝั่งมือถือให้ถูกก่อน หลักที่ยึด: ปุ่ม/ลิงก์กดได้ ≥44px · ช่องกรอก ≥16px (ไม่งั้น iOS ซูมเอง) · ไม่มีอะไรล้นจอแนวนอน */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* 2 คอลัมน์เต็มจอ ไม่ใช่ auto-fill */ .card-title { font-size: 14px; line-height: 1.3; } .card-price { font-size: 17px; } /* แถบค้นหา: เกาะบนจอ + ช่องกรอกเต็มบรรทัด ปุ่มไม่บีบ 🔴 top ต้องเท่าความสูงหัวเว็บจริง (--header-h) ไม่ใช่ 0 — ไม่งั้นไปเกาะทับหัวเว็บที่ sticky top:0 เหมือนกัน (เจอจริง 27 ส.ค. 2026 ที่หน้า /catalog บั๊กแบบเดียวกัน — .toolbar ใช้ top:0 มาแต่แรกด้วย) */ .toolbar { position: sticky; top: var(--header-h, 56px); z-index: 5; background: var(--bg); padding-top: 8px; } .search-box { display: flex; gap: 8px; width: 100%; } .search-box input { flex: 1; min-width: 0; font-size: 16px; padding: 12px 14px; } .search-box button { flex: 0 0 auto; padding: 12px 18px; font-size: 15px; } .chips { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .chip { display: inline-block; padding: 9px 14px; font-size: 14px; } /* ปุ่มหลัก (ใส่ตะกร้า/ชำระเงิน) เต็มความกว้าง กดง่ายด้วยนิ้วโป้ง */ .btn, button[type="submit"] { min-height: 46px; font-size: 16px; } .btn-primary, .item-actions .btn { width: 100%; justify-content: center; } .item-actions { display: flex; flex-direction: column; gap: 10px; } input, select, textarea { font-size: 16px; } /* ลิงก์ที่อยู่ในเนื้อความ (กลับหน้าแรก · ฝากขายท้ายเว็บ · ดูสถานะ · เปิดออเดอร์) — เดิมสูง 17–21px นิ้วโป้งกดพลาดไปโดนอย่างอื่น */ .site-footer a, main > p > a:only-child, main > a:not(.btn), .stat a { display: inline-block; padding: 10px 6px; min-height: 44px; } } /* ══════════ หัวเว็บบนมือถือ — แก้ 19 ส.ค. 2026 หลังตรวจด้วยเบราว์เซอร์จริง (`ui_audit.py`) ══════════ ที่เจอ: จอ 320px แถวหัวเว็บยาว 352px → **ทั้งเว็บเลื่อนซ้าย-ขวาได้** ทุกหน้า และชื่อร้านถูกบีบเหลือกว้าง 26px ตัวหนังสือทะลุออกมา **ทับคำว่า "หน้าแรก"** ตั้งแต่จอ 390px วิธีแก้: ชื่อร้านห้ามถูกบีบจนตัวหนังสือล้น · แถวเมนูเลื่อนในตัวเอง (ไม่ดันหน้าเว็บ) · จอเล็กมากเหลือโลโก้ */ @media (max-width: 560px) { /* บีบให้ทุกอย่างอยู่ **แถวเดียว** — หัวเว็บ 2 แถวกินพื้นที่จอสูง 110px บนมือถือ (flex-wrap ไว้เป็นตาข่ายกันพลาดเฉยๆ ปกติต้องไม่ได้ใช้) */ .site-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } .brand { flex: 0 1 auto; } .brand img { width: 38px; height: 38px; } .brand-text { font-size: 15px; } .site-nav a { font-size: 13px; padding: 9px 10px; } .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-text small { display: none; } /* คำโปรย 9px เล็กเกินอ่าน — ตัดทิ้งบนมือถือ */ /* 🔴 เจอจริง 22 ส.ค. 2026 — ต้องเปิด "รูปหน้าจอ" ดูถึงเห็น ตัวตรวจอัตโนมัติทุกตัวบอกว่าผ่าน: เดิมทั้งแถบเป็นกล่องเดียว `justify-content: flex-end` + `overflow-x: auto` พอเมนูยาวเกินช่อง ของจะล้นออกทาง **ซ้าย** ซึ่งเลื่อนกลับไปดูไม่ได้ (พฤติกรรม flexbox + overflow) ผลจริงบนจอ 320/360/390px: เมนู "การ์ด" ไปอยู่ตำแหน่งติดลบ = มองไม่เห็น กดไม่ได้ หายไปเฉยๆ แก้: แยกเป็น 2 ส่วน — ลิงก์ข้อความอยู่ใน `.nav-scroll` (เลื่อนได้) ปุ่มตะกร้า/ภาษาอยู่นอกกล่อง = ติดขวาเสมอ ไม่หลุดจอและไม่ทับลิงก์อื่น ⚠️ เคยลองใช้ `position: sticky` กับปุ่มตะกร้าแทน → มันไป**ทับ**ลิงก์ "เช็คเด็ค/ออเดอร์ฉัน" จนกดไม่ได้ (`ui_audit.py` จับได้ 49 จุด) อย่าย้อนกลับไปทำแบบนั้น */ .site-nav { flex: 1 1 auto; min-width: 0; } .nav-scroll { flex: 1 1 auto; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav-scroll > a:first-child { margin-left: auto; } /* ที่ว่างพอ = ชิดขวาเหมือนเดิม */ .nav-scroll::-webkit-scrollbar { display: none; } .site-nav a { flex: 0 0 auto; } /* ตัดลิงก์ "หน้าแรก" ทิ้งบนมือถือ — โลโก้ทำหน้าที่นี้อยู่แล้ว เอาที่ว่างไปโชว์ชื่อร้านแทน (ถ้าไม่ตัด ชื่อร้านจะหายตั้งแต่จอ 390px ซึ่งเป็นขนาดมือถือที่คนใช้เยอะที่สุด) */ .site-nav a.nav-home { display: none; } } @media (max-width: 430px) { /* วัดจริงที่ 390px: ชื่อร้าน 122px + เมนู 242px + ระยะขอบ = 420px > จอ 390px → ต้องเลือกอย่างใดอย่างหนึ่ง เลือก **เก็บเมนูไว้ครบ ตัดชื่อร้านออก** เพราะหัวเว็บ 2 แถวสูง 107px กินจอเปล่าๆ ทุกหน้า · โลโก้ยังบอกว่าร้านไหน และกดกลับหน้าแรกได้ */ .brand-text { display: none; } .brand { min-width: 44px; min-height: 44px; justify-content: center; } /* โลโก้ = ปุ่มกลับหน้าแรก ต้องกดง่าย */ .brand img { width: 44px; height: 44px; } .site-nav a { font-size: 13px; padding: 10px 7px; } .site-nav { gap: 3px; } /* เหลือแค่ไอคอน 👤 — คำว่า "เข้าสู่ระบบ" กว้าง ~70px ทำให้ปุ่มตะกร้ากับ EN หลุดขอบจอที่ 360px */ .nav-label { display: none; } .nav-account { min-width: 44px; text-align: center; } .site-nav a.lang-sw { min-width: 44px; } /* ต่ำกว่า 44px นิ้วโป้งกดพลาด */ /* 🔴 ปุ่มธีมตกหล่นจากรอบแก้ปุ่มเล็กครั้งนี้ — เพิ่มตอนทำดาร์กโหมดทีหลัง (27 ส.ค. 2026) ui_audit.py เจอ 38×36px ทุกหน้าบนมือถือ */ .theme-sw { min-width: 44px; min-height: 44px; } } /* ══════════ ไทม์ไลน์สถานะออเดอร์ + หน้าตรวจสลิป (Boss สั่ง 20 ส.ค. 2026) ══════════ หลังพี่ตั้มลองสั่งจริง: ลูกค้าไม่รู้ว่าออเดอร์ถึงขั้นไหน · Boss ดูรูปสลิปไม่ได้ */ .track { list-style: none; display: grid; gap: 6px; padding: 0; margin: 14px 0 18px; max-width: 600px; } .track li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--muted); font-size: 14px; } .track li::before { content: "○"; font-size: 15px; } .track li.done { border-color: var(--ink); color: var(--ink); background: var(--gold-soft); } .track li.done::before { content: "●"; color: var(--ok, #2f7a4d); } .track li b { font-weight: 800; } .track li span { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; } .od-grid { display: grid; gap: 12px; margin: 14px 0; } @media (min-width: 760px) { .od-grid { grid-template-columns: 1fr 1fr; } } .od-box { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; box-shadow: 3px 3px 0 var(--ink); } .od-box h2 { font-size: 16px; margin: 0 0 6px; } .od-box p { margin: 3px 0; font-size: 14px; } .od-total { font-size: 18px; font-weight: 900; color: var(--accent); margin-top: 8px !important; } .od-slip { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; } .od-zoom { display: block; text-align: center; font-size: 13px; color: var(--muted); padding: 6px 0; } .od-check { margin: 14px 0; } .od-fields { display: grid; gap: 10px; margin: 10px 0; } @media (min-width: 620px) { .od-fields { grid-template-columns: 1fr 1fr; } } .od-fields label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; } .od-fields input, .od-fields select { font-size: 16px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; } .od-checks { display: grid; gap: 8px; margin: 10px 0 12px; } .od-checks label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 10px 12px; border: 1.5px dashed var(--ink); border-radius: 10px; min-height: 44px; } .od-checks input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 auto; } /* ⚠️ ยอดงวดเปลี่ยนหลังจ่ายเงินผู้ฝากขายไปแล้ว — ต้องสะดุดตาในตารางจ่ายเงิน */ .warn-note { margin-top: 6px; padding: 6px 9px; border-left: 3px solid var(--err); background: var(--err-soft); color: var(--err); border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.45; max-width: 360px; } /* 🔴 hidden ต้องชนะ display ของ class เสมอ — `.pick{display:flex}` ข้างล่างเคยทับ attribute `hidden` ทำให้กล่อง "โซนนัดรับ + วิธีจ่ายเงิน" **โผล่ตลอด** แม้ลูกค้าเลือกส่งพัสดุ (เจอ 24 ส.ค. 2026 ตอนสอบสวนว่าทำไมลูกค้าสั่ง 2 ออเดอร์ซ้อน — เขาเห็นช่องที่ไม่ควรเห็น) */ [hidden] { display: none !important; } /* ── เลือกวิธีรับของ / โซนนัดรับ (checkout) — แตะง่ายบนมือถือ ปุ่มสูง ≥44px ── */ .pick { display: flex; flex-direction: column; gap: 8px; } .pick > label:not(.pick-opt) { font-weight: 700; font-size: 14px; } .pick-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; font-size: 15px; } .pick-opt.on { border-color: var(--accent); background: var(--accent-soft); } .pick-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); margin: 0; } .pick-opt span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; } .pick-opt small { color: var(--muted); font-size: 12px; font-weight: 500; } .pick-opt b { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ปุ่มเข้าสู่ระบบด้วย Facebook (คู่กับ .btn-line ที่มีอยู่แล้ว) */ .btn-fb { background: #1877F2; color: #fff; border-color: #1877F2; } .btn-fb:hover { background: #145dbf; border-color: #145dbf; } .ac-links { max-width: 420px; margin: 14px 0 20px; font-size: 14px; } .ac-links p { margin: 6px 0; } /* ลิงก์สลับ สมัคร/เข้าสู่ระบบ/ลืมรหัส — ต้องกดถูกด้วยนิ้วโป้ง (≥44px) */ .ac-links a { display: inline-block; min-height: 44px; padding: 12px 6px; font-weight: 700; } /* คำอธิบายใต้ช่องที่อยู่ในหน้าสมัคร — เล็กกว่า 12px อ่านไม่ออกบนมือถือ */ .form-grid label small.muted { font-size: 12px; line-height: 1.5; }