/* แถบทางลัดลอยของสมาชิก — แคปซูลกลางล่างจอ ปุ่มกลางนูนขึ้น (โทนทองเดียวกับทั้งเว็บ) */
.qbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 130;
  display: grid; grid-template-columns: repeat(5, minmax(66px, 1fr)); align-items: end; gap: 2px;
  width: min(620px, calc(100% - 24px)); padding: 9px 12px; border-radius: 22px;
  background: rgba(14, 12, 8, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 182, 93, .3); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.qbar a, .qbar button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  color: #e9d6a6; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center;
  border-radius: 14px; transition: .18s;
}
.qbar a:hover, .qbar button:hover { background: rgba(217, 182, 93, .14); color: #ffdf9a; }
.qbar i { display: block; width: 23px; height: 23px; font-style: normal; }
.qbar i svg { width: 100%; height: 100%; display: block; }
/* ปุ่มกลางนูนขึ้นเหนือแถบ */
.qbar .qbar-main { margin-top: -34px; gap: 6px; }
.qbar .qbar-main i {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: #120c04;
  box-shadow: 0 8px 22px rgba(201, 153, 47, .45), 0 0 0 4px rgba(14, 12, 8, .93), inset 0 0 0 1px rgba(217, 182, 93, .5);
}
.qbar .qbar-main i img { width: 34px; height: 34px; display: block; }
.qbar .qbar-main:hover { background: transparent; }
.qbar .qbar-main:hover i { filter: brightness(1.08); }
.qbar .qbar-main span { color: #ffdf9a; font-weight: 700; }
/* เว้นที่ท้ายหน้าไม่ให้แถบทับเนื้อหา */
html.is-member body { padding-bottom: 96px; }
@media (max-width: 600px) {
  .qbar { bottom: 8px; gap: 0; padding: 7px 4px; border-radius: 18px; width: calc(100% - 10px); grid-template-columns: repeat(5, 1fr); }
  .qbar a, .qbar button { font-size: 10.5px; padding: 5px 0; }
  .qbar i { width: 21px; height: 21px; }
  .qbar .qbar-main { margin-top: -30px; }
  .qbar .qbar-main i { width: 50px; height: 50px; }
  .qbar .qbar-main i img { width: 31px; height: 31px; }
  html.is-member body { padding-bottom: 150px; }
}