/* ================================================== Global Layout System ใช้ร่วมทั้งเว็บ (Index / Contact / Services / About) รองรับจอ 1080p → 5K ================================================== */ :root{ /* ===== Container width ===== */ --layout-max: 1180px; /* baseline (โน้ตบุ๊ก / 1080p) */ --layout-pad-x: 20px; --layout-pad-top: 24px; --layout-pad-bottom: 64px; /* ===== Readability ===== */ --prose-max: 68ch; /* ความยาวบรรทัดที่อ่านสบาย */ } /* ---------- Responsive container width ---------- */ /* จอ ≥ 1440px */ @media (min-width: 1600px){ :root{ --layout-max: 1440px; } } /* จอ ≥ 1600px (4K / 5K) */ @media (min-width: 1600px){ :root{ --layout-max: 1400px; } } /* ---------- Main container ---------- */ .container-wide{ max-width: var(--layout-max); margin-inline: auto; padding: var(--layout-pad-top) var(--layout-pad-x) var(--layout-pad-bottom); } /* ---------- Text readability layer ---------- */ .prose{ max-width: var(--prose-max); } /* ใช้กับหัวข้อใหญ่ที่ไม่อยากให้ยาวเกิน */ .prose-lg{ max-width: 78ch; } /* ---------- Full-bleed helper (Hero / Banner) ---------- */ /* ใช้เมื่อต้องการ section เต็มจอ แต่ content ยังอยู่ใน container */ .full-bleed{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ---------- Safety ---------- */ img, video{ max-width: 100%; height: auto; } /* ================================================== Layout Debug Overlay (Tier badge) เปิดใช้งานด้วย: ================================================== */ html.layout-debug::before{ content: "LAYOUT • BASE • max 1180 ( <1440px )"; position: fixed; left: 14px; bottom: 14px; z-index: 99999; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.86); color: rgba(17,24,39,.92); font: 700 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .2px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.10); pointer-events: none; /* ไม่บังปุ่ม/คลิก */ user-select: none; } @media (min-width: 1440px){ html.layout-debug::before{ content: "LAYOUT • WIDE • max 1320 ( ≥1440px )"; } } @media (min-width: 1600px){ html.layout-debug::before{ content: "LAYOUT • ULTRA • max 1400 ( ≥1600px )"; } }