/* Tab "Sảnh" (sanh.js): phòng chờ, chat, danh sách bàn, và màn bàn cờ khi bé đã ngồi.
   Màu lấy hết từ token giao diện của bé (giao-dien.css): bé đổi giao diện thì sảnh đổi theo, không màu cứng.
   Mục tiêu là "Operate": bé cần tìm bạn, ngồi vào, đánh — chữ rõ, nút to, không chuyển động trang trí. */

.man-sanh { display: grid; gap: 14px; }

.sanh-dau { display: grid; gap: 6px; }
.sanh-dau h1 { margin: 0; font: 900 1.5rem/1.15 var(--chu-to); color: var(--muc); }
/* .nut-nho dùng chung cao 40px; nút điều hướng chính của màn phải đủ 44px cho ngón tay bé. */
.sanh-dau .s-ve { justify-self: start; min-height: 44px; }
.s-trang-thai { margin: 0; min-height: 1.4em; color: var(--mo); font-size: .92rem; }

/* —— thanh tạo bàn —— */
.s-thanh { display: grid; gap: 10px; padding: 14px; border-radius: var(--bo); background: var(--the); box-shadow: var(--bong); }
.s-thanh .s-tao { width: 100%; }
.s-cai summary { min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--muc2); font-weight: 800; cursor: pointer; list-style: none; }
.s-cai summary::-webkit-details-marker { display: none; }
.s-cai summary::before { content: "▸"; color: var(--mo); }
.s-cai[open] summary::before { content: "▾"; }
.s-cai summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.s-cai-noi { display: grid; gap: 8px; padding: 6px 0 2px; }
.s-cai-noi label { font-weight: 700; color: var(--muc2); font-size: .9rem; }
.s-cai-noi input[type="number"] { min-height: 44px; padding: 0 10px; border: 2px solid var(--vien); border-radius: 12px; background: var(--the); color: var(--muc); font: 700 1rem var(--chu); }
.s-mau { margin: 0; padding: 8px 10px; border: 2px solid var(--vien); border-radius: 12px; }
.s-mau legend { padding: 0 6px; font-weight: 800; color: var(--muc2); font-size: .9rem; }
.s-mau label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: 12px; }

/* —— thanh phân đoạn (cùng kiểu .hs-the của Bảng của thầy) —— */
.sanh-the { display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--nen2); overflow-x: auto; scrollbar-width: none; }
.sanh-the::-webkit-scrollbar { display: none; }
.sanh-the button { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--muc2); font: 800 .95rem/1 var(--chu); white-space: nowrap; cursor: pointer; }
.sanh-the button:hover { background: var(--the); color: var(--muc); }
.sanh-the button[aria-current="page"] { background: var(--nhan); color: var(--nhan-chu); }
.sanh-the button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sanh-cot { display: grid; gap: 14px; }
.s-phan { padding: 16px; border-radius: var(--bo); background: var(--the); box-shadow: var(--bong); }
/* Khổ hẹp: mỗi lúc một phần, chọn bằng .man-sanh[data-the]. Không bật tắt thuộc tính `hidden` trong JS:
   làm thế thì ở khổ rộng, lúc thầy mở mục Thầy, hai cột Bàn và Trò chuyện biến mất. */
.s-phan { display: none; }
.man-sanh[data-the="ban"] .s-phan[data-phan="ban"],
.man-sanh[data-the="chat"] .s-phan[data-phan="chat"],
.man-sanh[data-the="thay"] .s-phan[data-phan="thay"] { display: block; }
.s-phan h2 { margin: 0 0 10px; font: 900 1.15rem/1.2 var(--chu-to); color: var(--muc); }
.s-phan h3 { margin: 14px 0 6px; font: 800 .98rem/1.2 var(--chu-to); color: var(--muc2); }
.s-giai, .s-trong { margin: 0 0 8px; color: var(--mo); font-size: .9rem; }
.s-trong { font-style: normal; }

/* —— ai đang ở sảnh —— */
.s-ds-nguoi { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s-ds-nguoi li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--nhan-nhat); color: var(--muc); font-weight: 700; font-size: .9rem; }
.s-ds-nguoi li.s-trong { background: none; color: var(--mo); font-weight: 400; }
.s-ds-nguoi .s-thay-chip { background: var(--vang-nhan); color: #2a2000; }
.s-cham { width: 8px; height: 8px; border-radius: 50%; background: var(--tot); }

/* —— hộp chat —— */
.s-tin { display: grid; gap: 7px; max-height: 42vh; min-height: 120px; margin: 0; padding: 8px; overflow-y: auto; list-style: none; border: 2px solid var(--vien); border-radius: 14px; background: var(--nen2); overflow-wrap: anywhere; }
.s-tin li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 6px; }
.s-tin li.s-trong { display: block; }
.s-tin b { color: var(--nhan-dam); font-size: .9rem; }
.s-tin-gio { color: var(--mo); font-size: .75rem; font-variant-numeric: tabular-nums; }
.s-tin-cau { color: var(--muc); }
.s-tin-thay b { color: #7a5c00; }
.s-xoa-tin { min-width: 28px; min-height: 28px; border: 0; border-radius: 8px; background: none; color: var(--mo); font-size: 1rem; cursor: pointer; }
.s-xoa-tin:hover { background: var(--the); color: var(--xau); }

.s-chat-form { display: flex; gap: 8px; margin-top: 10px; }
.s-chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid var(--vien); border-radius: 999px; background: var(--the); color: var(--muc); font: 600 1rem var(--chu); }
.s-chat-form input:focus-visible, .s-cai-noi input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.s-chat-form input:disabled { background: var(--nen2); color: var(--mo); }
.s-chat-form button { min-height: 44px; padding: 0 16px; }
.s-chat-nhac { margin: 8px 0 0; min-height: 1.3em; color: var(--xau); font-weight: 700; font-size: .9rem; }

/* —— thẻ bàn —— */
.s-ds-ban { display: grid; gap: 10px; }
.s-ban { padding: 12px 14px; border: 2px solid var(--vien); border-left: 6px solid var(--nhan); border-radius: 14px; background: var(--the); }
.s-ban-cho { border-left-color: var(--tot); }
.s-ban-xong { border-left-color: var(--vien); opacity: .78; }
.s-ban-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 800 1.02rem/1.3 var(--chu-to); color: var(--muc); }
.s-vs { color: var(--mo); }
.s-ghe-trong { color: var(--mo); font-style: normal; font-weight: 600; }
.s-quan { width: 18px; height: 18px; border: 2px solid var(--muc2); border-radius: 50%; }
.s-quan-w { background: #fff; }
.s-quan-b { background: var(--muc); }
.s-ban-phu { margin: 4px 0 10px; color: var(--mo); font-size: .88rem; }
.s-ban-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.s-ban-nut button { min-height: 44px; }

/* —— phần của thầy —— */
.s-thay-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.s-khoa-ds { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s-khoa-ds li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 4px; border-bottom: 1px dashed var(--vien); font-weight: 700; }
.s-nk { display: grid; gap: 5px; max-height: 50vh; margin: 0; padding: 8px; overflow-y: auto; list-style: none; border: 2px solid var(--vien); border-radius: 12px; background: var(--nen2); font-size: .9rem; overflow-wrap: anywhere; }
.s-nk-chan { color: var(--xau); }
.s-nk-chan em { font-style: normal; font-weight: 700; }

/* —— màn bàn cờ —— */
.sanh-ban[hidden] { display: none; }
.sb-khung { display: grid; gap: 14px; }
.sb-cot-ban { display: grid; gap: 8px; }
.sb-nguoi { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; border: 2px solid var(--vien); border-radius: 14px; background: var(--the); }
.sb-nguoi.sb-di { border-color: var(--nhan); background: var(--nhan-nhat); }
.sbn-ten { font: 800 1.02rem/1.2 var(--chu-to); color: var(--muc); overflow-wrap: anywhere; }
.sbn-gio { flex: none; padding: 3px 10px; border-radius: 10px; background: var(--nen2); color: var(--muc); font: 900 1.3rem/1 var(--chu-to); font-variant-numeric: tabular-nums; }
.sb-di .sbn-gio { background: var(--muc); color: var(--the); }
.sbn-gap { color: var(--xau); }
.sb-di .sbn-gap { background: var(--xau); color: #fff; }

.sb-ben { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--bo); background: var(--the); box-shadow: var(--bong); }
.sb-ben h3 { margin: 8px 0 4px; font: 800 .95rem/1.2 var(--chu-to); color: var(--muc2); }
.sb-trang-thai { margin: 0; min-height: 1.4em; color: var(--muc); font-weight: 700; }
.sb-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-nut button { min-height: 44px; }
.sb-khan { margin: 0; min-height: 1.2em; color: var(--mo); font-size: .88rem; }
.sb-nuoc { display: flex; flex-wrap: wrap; gap: 2px 6px; max-height: 22vh; margin: 0; padding: 8px; overflow-y: auto; list-style: none; border: 2px solid var(--vien); border-radius: 12px; background: var(--nen2); font-variant-numeric: tabular-nums; }
.sb-nuoc li { font-weight: 700; color: var(--muc); }
.sb-nuoc .s-so { color: var(--mo); font-weight: 600; }
.sb-tin { max-height: 24vh; min-height: 80px; }

/* —— khổ rộng: bàn một bên, chat và danh sách bên kia —— */
@media (min-width: 900px) {
  .sanh-cot { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  .sanh-cot .s-phan[data-phan="ban"] { grid-column: 1; }
  .sanh-cot .s-phan[data-phan="chat"] { grid-column: 2; grid-row: 1; }
  .sanh-cot .s-phan[data-phan="thay"] { grid-column: 1 / -1; }
  /* đủ rộng thì luôn hiện cả hai cột; thanh phân đoạn chỉ còn dùng để mở mục "Thầy" */
  .man-sanh .s-phan[data-phan="ban"], .man-sanh .s-phan[data-phan="chat"] { display: block; }
  .man-sanh:not([data-the="thay"]) .s-phan[data-phan="thay"] { display: none; }
  .sanh-the button[data-the="ban"], .sanh-the button[data-the="chat"] { display: none; }
  .sanh-the:not(:has(button[data-the="thay"]:not([hidden]))) { display: none; }
  .s-thanh { grid-template-columns: auto 1fr; align-items: center; }
  .s-thanh .s-tao { width: auto; }
  .sb-khung { grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); align-items: start; }
  .s-ds-ban { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Bàn cờ: cùng khung với màn ván cờ của bé (ban-co-cg.css lo phần quân và ô). */
.sanh-ban .ban-cg { width: 100%; max-width: min(92vw, 560px); margin: 0 auto; }
@media (min-width: 900px) { .sanh-ban .ban-cg { max-width: min(58vw, 620px); } }