/* ================= shell ================= */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:0 0 var(--side);background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:40}
.side-brand{padding:15px 16px 13px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:11px}
.side-brand img{width:38px;height:38px;border-radius:9px;flex:0 0 38px;object-fit:cover}
.side-brand .bt{min-width:0}
.side-brand b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.side-brand span{font-size:11.5px;color:var(--muted)}
.topbar .mbrand img{width:28px;height:28px;border-radius:7px;vertical-align:-8px;margin-right:7px}
.side nav{padding:11px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.side nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14.5px;color:var(--muted);font-weight:520}
.side nav button:hover{background:var(--surface-2);color:var(--text)}
.side nav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.side nav .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 7px}
.side nav button[aria-current="true"] .dot{opacity:1}
.side-meter{border-top:1px dashed var(--border-strong);padding:10px 14px;
  display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.side-meter b{font-family:var(--mono);color:var(--text);font-weight:650;font-size:13px}
.side-meter button{background:none;border:1px solid var(--border);border-radius:20px;
  padding:2px 8px;font-size:10.5px;color:var(--muted)}

.mainwrap{flex:1;margin-left:var(--side);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:38;background:var(--surface);
  border-bottom:1px solid var(--border);padding:9px 26px;
  display:flex;align-items:center;gap:12px}
.topbar .mbrand{display:none;font-weight:700;font-size:14.5px}
.topbar .spacer{flex:1}
main{padding:22px 26px 70px;max-width:1120px;width:100%}

/* ai đang trực — dropdown góc phải */
.whodd{position:relative}
.whodd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  border:1px solid var(--border);background:var(--surface-2);border-radius:22px;
  padding:6px 13px 6px 10px;font-size:13.5px}
.whodd>summary::-webkit-details-marker{display:none}
.whodd>summary:hover{border-color:var(--border-strong)}
.whodd .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:660}
.whodd .n{font-weight:650}
.whodd .av{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 24px}
.whodd .chev{color:var(--muted);font-size:10px}
.whodd[open]>summary{border-color:var(--accent);background:var(--accent-soft)}
.whomenu{position:absolute;right:0;top:calc(100% + 7px);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--pop);
  padding:6px;min-width:216px;z-index:60}
.whomenu .h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:660;padding:7px 10px 6px}
.whomenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;padding:9px 10px;border-radius:var(--r-sm);font-size:14px}
.whomenu button:hover{background:var(--surface-2)}
.whomenu button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:640}
.whomenu .tick{margin-left:auto;font-size:12px}
.whomenu .note2{font-size:11.5px;color:var(--muted);padding:7px 10px 5px;border-top:1px solid var(--border);
  margin-top:5px;line-height:1.42}

.h1{font-size:22px;font-weight:680;letter-spacing:-.02em;margin:0 0 3px;text-wrap:balance}
/* Tên màn hình cũng có nền riêng, nhưng cam chứ không xanh — hai tầng, hai màu:
   cam = "đang ở màn nào / phòng nào", xanh = "đang ở khối nào trong màn đó". Nhờ thế
   liếc một cái là định vị được, không phải đọc.
   Cam ở đây là phần khung của trang, không phải dữ liệu; trong vùng dữ liệu thì cam vẫn
   giữ đúng một nghĩa cũ là đồng hồ đang chạy (thẻ phòng, khối "Đang chơi" trên lịch).
   Chỉ h1 mới có nền — h2 ở giữa trang ("Lịch đặt phòng hôm nay", "Booking hôm nay") để
   trơn, nếu không một màn hình có tới ba mảng cam thì hết cái nào là mốc nữa. */
h1.h1{display:inline-block;padding:4px 12px;border-radius:6px;background:var(--hl-title);margin-bottom:6px}
/* Mục con PHỤ THUỘC vào phần chính của màn hình — "Lịch đặt phòng hôm nay" và "Booking
   hôm nay" chỉ có nghĩa khi đứng dưới "Tình trạng phòng". Đó mới là h2. Trước đây chỗ này
   mượn class .h1 rồi đè font-size — nhìn code thì thành ra "h2 đội lốt h1", nên mới có
   cảm giác đánh cấp sai. Cùng màu cam với h1 cho liền mạch, nhưng nhỏ hơn một bậc.

   Không phải màn nào cũng chỉ có một h1. Màn Đặt phòng có hai nửa ngang hàng — đặt chỗ
   mới và sửa chỗ đã đặt — nên cả hai là h1, và màn đó không có tiêu đề bao ngoài. Thêm
   một cái chỉ để "có một h1 duy nhất" là chép lại tên tab rồi đẩy việc thật xuống một bậc. */
h2.h2{display:inline-block;padding:3px 11px;border-radius:6px;background:var(--hl-title);
  font-size:18px;font-weight:670;letter-spacing:-.018em;margin:0 0 4px}
.sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.screen{display:none}
.screen.on{display:block;animation:fade .16s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1}}
/* Breadcrumb mảnh. Trước đây đây là một nút pill nặng đứng cạnh một chữ mờ, và chữ đó
   lặp lại đúng tiêu đề H1 ngay bên dưới — ba mức đậm nhạt tranh nhau trong 60px.
   Giờ còn một dòng duy nhất: nơi quay về (bấm được) › màn đang đứng.
   margin-left âm bằng đúng padding của nút để chữ thẳng hàng quang học với H1. */
.backbar{display:flex;align-items:center;gap:1px;margin:0 0 12px -9px}
.backbar button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  border-radius:7px;padding:9px;min-height:40px;
  font-size:12.5px;font-weight:560;color:var(--muted);letter-spacing:-.005em}
.backbar button .ar{font-size:14px;line-height:1;transition:transform .14s ease}
.backbar button:hover{background:var(--surface-2);color:var(--text)}
.backbar button:hover .ar{transform:translateX(-2px)}
.backbar .sep{color:var(--faint);font-size:13px;padding:0 3px}
.backbar .crumb{font-size:12.5px;color:var(--faint);padding:9px 6px}

/* ================= rooms ================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:13px}
.room{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:15px;box-shadow:var(--sh);border-left:3px solid var(--border-strong);
  display:flex;flex-direction:column}
.room.run{border-left-color:var(--run);background:linear-gradient(180deg,var(--run-soft) 0%,var(--surface) 44%)}
.room.free{border-left-color:var(--accent-line)}
.room-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}
.room-code{font-weight:670;font-size:15px;letter-spacing:-.01em}
.room-nick{font-size:11.5px;color:var(--muted)}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2.5px 8px;border-radius:20px;white-space:nowrap}
.pill.run{background:var(--run);color:var(--run-ink)}
.pill.free{background:var(--surface-3);color:var(--muted)}
.room-body{margin-top:11px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.elapsed{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.running-money{font-family:var(--mono);font-size:14px;color:var(--run);font-weight:650;text-align:right}
.running-money small{display:block;font-size:11px;color:var(--muted);font-family:var(--sans);font-weight:400}
.room-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.room .cta{margin-top:13px;width:100%;text-align:center;background:var(--accent);
  color:var(--accent-ink);border:none;padding:11px;border-radius:var(--r-sm);
  font-weight:640;font-size:14.5px}
/* màn xếp phòng không có khối booking, nên để dòng mô tả giữ vai trò đó */
#asgRooms .room-meta{flex:1}
.room .cta.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
/* khối này hút hết chỗ thừa để nút hành động luôn nằm sát đáy thẻ,
   dù thẻ bên cạnh có thêm dòng ghi chú chuẩn bị hay tên khách đặt */
.nextbk{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;
  display:flex;align-items:flex-start;gap:9px;min-height:44px;flex:1}
.nextbk .bar{width:3px;align-self:stretch;border-radius:2px;background:var(--accent);flex:0 0 3px}
.nextbk.warn .bar{background:var(--run)}
.nextbk.none .bar{background:var(--border)}
.nextbk .t{flex:1;min-width:0}
.nextbk .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:660;color:var(--muted)}
.nextbk.warn .k{color:var(--run)}
.nextbk .v{font-size:13.5px;font-weight:580;margin-top:1px}
.nextbk .d{font-size:12px;color:var(--muted);margin-top:1px}
.nextbk.none .v{color:var(--faint);font-weight:450;font-size:13px}
.countdown{font-family:var(--mono);font-size:12.5px;font-weight:660;padding:3px 8px;
  border-radius:20px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.countdown.warn{background:var(--run);color:var(--run-ink)}
.countdown.soon{background:var(--run-soft);color:var(--run);border:1px solid var(--run-line)}