/* MindBalcony — global CSS ยกมาจาก <helmet> ของไฟล์ดีไซน์ต้นฉบับ
   (_design_source/html/*.html) ห้ามแก้ค่าใดโดยไม่แก้ที่ต้นฉบับก่อน */
body { margin: 0; background: #FAF4EC; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
* { box-sizing: border-box; }
a { color: #B4674A; text-decoration: none; }
a:hover { color: #8E4E35; }
@keyframes mbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── responsive ────────────────────────────────────────────────
   prototype สลับ display ด้วย state isMobile = window.innerWidth < 1080
   ที่นี่ใช้ media query จุดตัดเดียวกัน — ผลบนจอเท่ากันแต่ไม่กระพริบตอนโหลด
   ใช้เฉพาะ display:none เพื่อไม่ไปทับ inline style เดิมของ element */
@media (min-width: 1080px)   { .mb-mobile  { display: none !important; } }
@media (max-width: 1079.98px) { .mb-desktop { display: none !important; } }

/* ── เมนูมือถือ (state menuOpen) ── */
.mb-menu-panel { display: none; }
.mb-menu-panel.is-open { display: grid; }
@media (min-width: 1080px) { .mb-menu-panel { display: none !important; } }

/* ── accordion / panel ที่ซ่อน-แสดงด้วย state ──
   ใช้ attribute hidden ไม่ใช่คลาส เพราะ element เหล่านี้มี inline display ของตัวเอง
   (เช่น display: grid) ซึ่งจะชนะ selector ธรรมดา แต่แพ้ !important ตรงนี้
   เวลาเปิด เอา hidden ออก inline style เดิมก็ทำงานตามปกติ ไม่ถูกแตะเลย */
[hidden] { display: none !important; }
.mbh1:hover {
  background: #05A948 !important;
}
.mbh2:hover {
  background: #443A32 !important;
}
.mbh3:hover {
  background: #443A32 !important;
  color: #FFF9F3 !important;
}
.mbh4:hover {
  background: #4A4038 !important;
  color: #FFF9F3 !important;
}
.mbh5:hover {
  background: #4E443B !important;
}
.mbh6:hover {
  background: #B4674A !important;
}
.mbh7:hover {
  background: #C97B5A !important;
  color: #FFF9F3 !important;
}
.mbh8:hover {
  background: #F6EADF !important;
}
.mbh9:hover {
  background: #F7F0E6 !important;
}
.mbh10:hover {
  background: #FFF !important;
  color: #8E4E35 !important;
}
.mbh11:hover {
  border-color: #C97B5A !important;
}
.mbh12:hover {
  border-color: #C97B5A !important;
  background: #FFFDFA !important;
}
.mbh13:hover {
  border-color: #C97B5A !important;
  color: #B4674A !important;
}
.mbh14:hover {
  border-color: #D8C4AF !important;
}
.mbh15:hover {
  border-color: #DCC2AB !important;
}
.mbh16:hover {
  border-color: #DCC2AB !important;
  background: #FFF9F1 !important;
}
.mbh17:hover {
  border-color: #E0C7AE !important;
}
.mbh18:hover {
  color: #B4674A !important;
}
.mbh19:hover {
  color: #E0A583 !important;
}