/* 🪑 BÀN HỘI TỨ LINH — lớp phủ toàn màn hình, Cổng học viên. Xem BAN-GIAO-TU-LINH-TRO-GIANG.md §7/§9.3.
   Cùng bảng màu/phong cách với nhom-tu-linh.css (nền kem #fffaf0/#fffdf7, viền #e0d3ae, chữ chính
   #4f5c39/#3a2f22, chữ phụ #8a7f63, nút chính gradient #7a8c47→#5b7a2a — công thức của .ntl-tg-vao).
   Học viên trung niên/lớn tuổi: chữ ≥16px, vùng chạm ≥44px. Mọi :hover bọc @media (hover:hover). */

.tbh-ov {
  position: fixed; inset: 0; z-index: 5000; display: none; flex-direction: column;
  background: #fffaf0; color: #3a2f22; font-family: inherit;
}
.tbh-ov.open { display: flex; }

.tbh-head {
  flex: none; position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  background: #fffdf7; border-bottom: 1px solid #e0d3ae;
}
.tbh-head .tbh-t { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 800; color: #4f5c39; }
.tbh-t-icon { flex: none; width: 28px; height: 28px; display: inline-flex; }
.tbh-t-icon svg { width: 100%; height: 100%; }
.tbh-x {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: #f1e7cd; color: #6d6144;
  font-size: 1.05rem; font-weight: 800; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.tbh-x:active { transform: scale(.93); }
@media (hover: hover) { .tbh-x:hover { background: #ecdfba; } }

.tbh-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}

.tbh-gt { font-size: .92rem; color: #8a7f63; line-height: 1.5; margin: 0 0 10px; }
.tbh-trong {
  padding: 26px 16px; text-align: center; font-size: .95rem; color: #8a7f63;
  border: 1px dashed #ddceab; border-radius: 16px; background: #fffdf7;
}
.tbh-dem {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800;
  color: #41571f; background: #eaf0dc; border: 1px solid #bfcfa1; border-radius: 999px;
  padding: 6px 13px; margin: 0 0 14px;
}

/* 🕓 banner "đang xếp hàng chờ" / 🎉 "được mời" — đứng riêng đầu màn, không cần cuộn mới thấy */
.tbh-cho, .tbh-moi {
  font-size: .88rem; font-weight: 700; line-height: 1.5; border-radius: 14px;
  padding: 11px 14px; margin: 0 0 14px;
}
.tbh-cho { color: #8a6a1c; background: #fbf1d9; border: 1px solid #ecd8a1; }
.tbh-moi { color: #41571f; background: #eaf0dc; border: 1px solid #bfcfa1; }

/* nút to "Xếp tôi vào bàn còn chỗ" */
.tbh-nut-to {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 58px; padding: 14px 18px; margin-bottom: 16px;
  border: none; border-radius: 18px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7a8c47, #5b7a2a);
  box-shadow: 0 10px 20px -14px rgba(60, 70, 25, .95), inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.tbh-nut-to:active { transform: scale(.965); }
.tbh-nut-to[disabled] {
  opacity: 1; cursor: default; transform: none; color: #8a7f63;
  background: #efe6ce; box-shadow: none;
}
@media (hover: hover) { .tbh-nut-to:not([disabled]):hover { filter: brightness(1.06); } }

/* lưới các bàn */
.tbh-luoi { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .tbh-luoi { grid-template-columns: 1fr 1fr; } }

.tbh-ban {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 20px;
  background: #fffdf7; border: 1.5px solid #e0d3ae;
  box-shadow: 0 8px 20px -16px rgba(60, 45, 15, .5);
  transition: box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
}
.tbh-ban.mo {
  border-color: #b7cf8a;
  box-shadow: 0 8px 20px -16px rgba(60, 45, 15, .5), 0 0 0 1px rgba(122, 140, 71, .1), 0 0 22px -6px rgba(143, 196, 84, .55);
}
.tbh-ban.dong { opacity: .62; }
.tbh-ban.dong .tbh-ban-top > :first-child { filter: grayscale(70%) opacity(85%); }
.tbh-ban.toi-o { border-color: #6b7a4f; border-width: 2px; background: #f7fbf1; opacity: 1; }
.tbh-ban.toi-o .tbh-ban-top > :first-child { filter: none; }
.tbh-ban.day:not(.toi-o) { opacity: .82; }
.tbh-ban.duoc-moi {
  opacity: 1; border-color: #d8a33d; border-width: 2px; background: #fffaf0;
  box-shadow: 0 8px 20px -16px rgba(60, 45, 15, .5), 0 0 0 3px rgba(216, 163, 61, .22), 0 0 22px -4px rgba(216, 163, 61, .6);
}
.tbh-ban.duoc-moi .tbh-ban-top > :first-child { filter: none; }

.tbh-ban-top { display: flex; align-items: center; gap: 12px; }
.tbh-ban-tt { min-width: 0; flex: 1; }
.tbh-ban-tenhang { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tbh-ban-tenhang .ten {
  font-size: 1.02rem; font-weight: 800; color: #4f5c39;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbh-den {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #d8cead; box-shadow: inset 0 0 0 1px rgba(160, 138, 82, .35);
}
.tbh-den.sang {
  background: #5fbf3f;
  box-shadow: 0 0 0 3px rgba(95, 191, 63, .22), 0 0 8px 1px rgba(95, 191, 63, .55);
  animation: tbhDen 2.2s ease-in-out infinite;
}
@keyframes tbhDen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(95, 191, 63, .22), 0 0 8px 1px rgba(95, 191, 63, .55); }
  50% { box-shadow: 0 0 0 5px rgba(95, 191, 63, .12), 0 0 14px 3px rgba(95, 191, 63, .7); }
}
.tbh-ban-tt .cd {
  font-size: .85rem; color: #8a7f63; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* bốn ô ghế */
.tbh-ghe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tbh-o {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px;
  border-radius: 12px; background: #f6f1e2; border: 1px solid #e5d9bf;
}
.tbh-o .tx { min-width: 0; display: flex; flex-direction: column; }
.tbh-o .nm {
  font-size: .82rem; font-weight: 700; color: #3a2f22;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbh-o .nhom { font-size: .68rem; font-weight: 800; color: #a08a52; }
.tbh-o.trong {
  justify-content: center; border-style: dashed; border-color: #ddceab;
  color: #a99b78; font-size: .8rem; font-weight: 700; background: transparent;
}

/* nút ngồi/rời của từng bàn */
.tbh-nut {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7a8c47, #5b7a2a);
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1), filter .14s ease;
}
.tbh-nut:active { transform: scale(.965); }
.tbh-nut[disabled] { opacity: 1; cursor: default; transform: none; background: #efe6ce; color: #8a7f63; }
.tbh-ban.toi-o .tbh-nut { background: #efe6ce; color: #4f5c39; }
.tbh-nut.cho { background: linear-gradient(135deg, #d8a33d, #b9822a); }
@media (hover: hover) { .tbh-nut:not([disabled]):hover { filter: brightness(1.06); } }

@media (max-width: 359px) {
  .tbh-ban-tt .ten { font-size: .96rem; }
  .tbh-o .nm { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tbh-nut, .tbh-nut-to, .tbh-x, .tbh-ban { transition: none; }
  .tbh-den.sang { animation: none; }
}