/* ============================================================ Together · FIT-WIDTH + ขอบขาว 10px รอบ content (founder 2026-07-08) วิธี: frame ที่ เอง = ครอบ "เนื้อหาทั้งหน้า" เหมือนกันทุกหน้า (reliable) - html = backdrop จาง (plum-tint · ไม่เทา) → ให้ขอบขาวรอบ content เห็นได้ - body = พื้นขาว + ขอบขาว 10px + มุมมน · เต็มความกว้าง (fit-width) · ตามความสูง content - ไม่ใช่กรอบรอบอุปกรณ์ — กรอบรอบเนื้อหา ยาวลงไปเท่าไรก็ตาม inject ทุกหน้า ============================================================ */ html { background: #D3C7DE !important; /* backdrop จาง (plum-tint) */ overflow-x: hidden; } body { background: #fff !important; /* พื้นเนื้อหา = ขาว */ border: 10px solid #fff !important; /* ← ขอบขาว 10px รอบ content */ border-radius: 24px !important; box-sizing: border-box !important; /* กรอบมนบน "ต่ำกว่า" status bar/notch อุปกรณ์ (safe-area) · ล่างเว้น safe-area ด้วย */ margin: calc(10px + env(safe-area-inset-top, 0px)) auto calc(10px + env(safe-area-inset-bottom, 0px)) !important; min-height: calc(100vh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 20px) !important; /* จอเล็ก = เกือบเต็ม */ overflow-x: hidden; } /* fit-width cap ตามจอ (จอใหญ่ = cap กว้าง · founder: จอใหญ่ cap แคบ) */ @media (min-width:1240px){ body { max-width: 1180px !important; } } @media (min-width:1560px){ body { max-width: 1480px !important; } } /* container ภายในไม่ต้อง cap แคบอีก (ปล่อยเต็ม body) — กันคอนเทนต์บีบแคบซ้อน */ :is(.wrap, .phone, .container, .page, .shell, main.zones, #app) { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* ── fixed bars (footer CTA / dock / topbar) ให้อยู่ในกรอบ เท่า body frame ── ยึด viewport → center + max-width เท่า body (100%-20px · จอใหญ่ 1180) กัน "หลุดกรอบ" ยกเว้น .tg-fab (kit center ปุ่มเองอยู่แล้ว) */ :is([class*="foot"], [class*="topbar"], #cartFoot, #cfoot, .cfoot, .lfoot):not(.tg-fab) { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: min(calc(100% - 20px), 1180px) !important; width: calc(100% - 20px) !important; box-sizing: border-box !important; } @media (min-width:1560px){ :is([class*="foot"], [class*="topbar"], #cartFoot, #cfoot, .cfoot, .lfoot):not(.tg-fab) { max-width: 1480px !important; } } /* ── dock (bottom nav) = floating pill แคบกว่า footer (founder 2026-07-10): ข้างละ 16px · cap 412 (mobile) / 752 (tablet+) · footer/topbar ยังเต็มกรอบเหมือนเดิม ── */ :is(.dock, .ttdock):not(.tg-fab){ width: calc(100% - 32px) !important; max-width: 412px !important; } @media (min-width:641px){ :is(.dock, .ttdock):not(.tg-fab){ max-width: 752px !important; } } /* ── founder 2026-07-08: content ด้านบนถูกบีบแคบ "อีกชั้น" ที่ tablet/desktop ── ต้นเหตุ: chrome .zones มี padding-inline ~4vw (ที่ 744=30px · 1280=51px) ซ้อน body-frame + .block(18px) → padding ซ้อนหลายชั้น content แคบมาก. แก้: ลด .zones เกือบ 0 (ให้ .block 18px เป็น gutter หลัก) · .top เหลือ 16px (logo/ปุ่มไม่ชิดขอบ) · breakpoint 601px (ครอบ iPad mini 744 ที่ media 768 พลาด) · มือถือ <601 ไม่แตะ (padding เดิมพอดี) */ @media (min-width:601px){ :is(main.zones, .zones) { padding-left: 4px !important; padding-right: 4px !important; } :is(.top, .access-bar, [id$="header-group"], [class*="header-group"]) { padding-left: 16px !important; padding-right: 16px !important; } } @media (min-width:1280px){ :is(main.zones, .zones) { padding-left: 12px !important; padding-right: 12px !important; } :is(.top, .access-bar, [id$="header-group"], [class*="header-group"]) { padding-left: 22px !important; padding-right: 22px !important; } }