/* ===== พื้นฐาน ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Sarabun", sans-serif;
  background: #1a1a1a;              /* พื้นเทาเข้ม รอบๆ กรอบมือถือ */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== กรอบหน้าจอมือถือ ===== */
.phone {
  position: relative;
  width: 360px;
  height: 844px;
  background: #050505;              /* พื้นหลังดำ */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== แสงเรืองพื้นหลัง (สีชมพู-ม่วง) ===== */
.glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
}
.glow-left {
  top: 40px;
  left: -80px;
  background: #7b2ff7;             /* ม่วง */
}
.glow-right {
  bottom: 40px;
  right: -80px;
  background: #ff2e9a;             /* ชมพู */
}

/* ===== แถบหัวด้านบน (สูง 46px เท่ากับหน้าอื่น) ===== */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 46px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
}

/* ===== ไอคอนเมนู (แฮมเบอร์เกอร์) — อยู่ในแถบหัว ===== */
.hamburger {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
}
.hamburger:active { opacity: 0.6; }

/* ===== โลโก้ ===== */
.logo {
  position: absolute;
  z-index: 1;
  left: 50%;                       /* กึ่งกลางแนวนอน */
  transform: translateX(-50%);
  top: 60px;                       /* ใต้แถบหัว 46px */
}
.logo-img {
  width: 230px;
  height: auto;
  display: block;
}

/* ===== ปุ่ม ===== */
.btn {
  position: absolute;
  z-index: 1;
  left: 30px;                     /* x = 30 (เว้นซ้าย-ขวาเท่ากัน) */
  width: 300px;                   /* 360 - 30 - 30 */
  height: 78px;
  border: none;
  border-radius: 22px;
  background: #ff1f8e;            /* ชมพูสด */
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

/* ปุ่มบน: y = 137 + 30 = 167 */
.btn-top {
  top: 167px;
}
/* ปุ่มล่าง: 245 + 30 = 275 */
.btn-bottom {
  top: 275px;
}
.btn:hover {
  background: #ff3d9f;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}