@charset "UTF-8";

/* --------------------------------------------------
 กรอบมือถือกว้าง 440 สำหรับจอ desktop (หน้าเว็บหลัก flow88.app)
 โหลดเฉพาะ media="screen and (min-width: 768px)"
 มือถือจริง (< 768) ไม่โหลดไฟล์นี้ -> แสดงเต็มจอเหมือนเดิม
 คู่กับไฟล์ css/*.d440.css ที่สร้างจาก @make-d440.py
 (ชุดเดียวกับที่ใช้ในเว็บสมาชิก member.flow88.app)
-------------------------------------------------- */

/* พื้นที่ว่างสองข้าง — น้ำเงินดำเข้ม */
html {
    background: #010221;
}

body {
    width: 440px;
    min-width: 440px;
    max-width: 440px;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------
 position: fixed

 ห้ามใส่ transform ที่ body เพื่อกักกรอบ — transform จะทำให้ fixed
 กลายเป็นยึดกับ body แล้วเลื่อนหนีตามหน้าเว็บ (หัวเว็บไม่ค้างบน
 แถบเมนูล่างไม่ติดก้นจอ) จึงปล่อยให้ fixed ยึด viewport ตามปกติ
 แล้วเลื่อนเข้ามาในคอลัมน์เอง — ขอบซ้ายคอลัมน์ = 50% - 220px

 ถ้าหน้าไหนมี element fixed ตัวใหม่โผล่มาแล้วหลุดออกนอกกรอบ
 ให้เพิ่ม selector ในบล็อกนี้
-------------------------------------------------- */

/* แถบเต็มความกว้าง */
#header,
.mobile-shortcut,
.drw-nav-close,
.modal,
.modal-backdrop {
    left: calc(50% - 220px);
    right: auto;
    width: 440px;
    max-width: 440px;
}

/* ลิ้นชักเมนู กว้าง 400 ของตัวเอง จัดกลางด้วย margin:auto ใน base.css
   จึงต้องผูกทั้ง left และ right ให้เป็นขอบคอลัมน์ ห้ามตั้ง right:auto
   ไม่งั้นจะไปชิดซ้าย */
#drw-nav {
    left: calc(50% - 220px);
    right: calc(50% - 220px);
}

/* ปุ่มแฮมเบอร์เกอร์ เดิม left: 10px */
.drw-nav-btn {
    left: calc(50% - 210px);
    right: auto;
}

/* ภาพพื้นหลังของ body (fixed, กว้าง 440 จาก .d440 แล้ว) */
body::before {
    left: calc(50% - 220px);
}