/* ===== lịch trống: phòng nằm ngang, ô 30 phút chạy dọc (FR-12) ===== */
.datebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}
/* ‹ ngày › là MỘT control liền khối, không phải ba thứ rời nhau: hai mũi tên phải dính
   sát nhãn ngày, nếu không trên điện thoại chúng bị đẩy ra hai mép màn hình (feedback 6) */
.daynav{display:inline-flex;align-items:stretch;height:44px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.daynav .nav{background:none;border:none;border-radius:0;width:38px;
  display:grid;place-items:center;font-size:19px;line-height:1;color:var(--muted)}
.daynav .nav:hover{background:var(--surface-2);color:var(--text)}
.daynav .cur{min-width:108px;padding:0 6px;text-align:center;font-weight:660;font-size:15px;
  line-height:1.15;display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid var(--border);border-right:1px solid var(--border)}
.daynav .cur small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;font-family:var(--mono)}
.datebar input[type=date]{width:auto;padding:0 13px;height:44px;font-size:15px;min-width:172px}
.datebar #dToday{height:44px;padding:0 15px}   /* cùng chiều cao với ‹ ngày › và ô chọn ngày */
.datebar select{width:auto;height:44px;min-width:158px;font-size:15px;padding:0 12px}
.datebar #btnPaste{height:44px;padding:0 15px}
.gcwrap{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--sh);overflow:hidden}
.gchead{display:grid;grid-template-columns:46px repeat(6,1fr);
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.gchead>div{padding:7px 3px;text-align:center;font-size:11px;font-weight:650;
  line-height:1.25;border-left:1px solid var(--border)}
.gchead>div:first-child{border-left:none}
.gchead .ty{display:block;font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.05em}
.gcbody{max-height:60vh;overflow-y:auto}
.gc{display:grid;grid-template-columns:46px repeat(6,1fr);--slot:30px;position:relative}
.gc-now{position:absolute;left:46px;right:0;height:2px;background:var(--danger);z-index:4;pointer-events:none}
.gc-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--danger)}
.gc-t{grid-column:1;font-size:10.5px;color:var(--muted);font-family:var(--mono);
  text-align:right;padding-right:6px;line-height:var(--slot);border-right:1px solid var(--border)}
.gc-t.half{visibility:hidden}
.gc-f{border:none;border-left:1px solid var(--border);border-top:1px solid var(--border);
  background:none;padding:0;min-height:var(--slot)}
.gc-f.hr{border-top-color:var(--border-strong)}
.gc-f:hover{background:var(--accent-soft)}
/* ô đã qua: gạch chéo mờ, không bấm được */
.gc-f.gone{background:repeating-linear-gradient(135deg,var(--surface-2) 0 5px,transparent 5px 10px);
  cursor:not-allowed}
.gc-f.gone:hover{background:repeating-linear-gradient(135deg,var(--surface-2) 0 5px,transparent 5px 10px)}
.gc-b{border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:5px;
  margin:1px 2px;padding:3px 5px;overflow:hidden;font-size:10.5px;line-height:1.24;
  text-align:left;background:var(--accent-soft)}
.gc-b[data-bkopen]{cursor:pointer}
.gc-b[data-bkopen]:hover{border-color:var(--accent);box-shadow:var(--sh)}
.hc-b[data-bkopen]{cursor:pointer}
.hc-b[data-bkopen]:hover{border-color:var(--accent);box-shadow:var(--sh)}
/* khối đang chơi bấm được → vào thẳng màn phiên của phòng đó */
.gc-b[data-livesess],.hc-b[data-livesess]{cursor:pointer}
.gc-b[data-livesess]:hover,.hc-b[data-livesess]:hover{border-color:var(--run);box-shadow:var(--sh)}
.gc-b b{display:block;font-weight:640;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
/* Dòng giờ giờ có thêm số người nên nó dài ra. Cắt bằng ellipsis chứ không cho xuống
   hàng: khối 30 phút chỉ cao đủ hai dòng, xuống hàng là đẩy ghi chú ⚑ ra khỏi khối. */
.gc-b span{display:block;color:var(--muted);font-family:var(--mono);font-size:9.5px;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
/* Số người: sans chứ không mono, để nó không bị đọc nhầm thành một mốc giờ nữa. */
.gc-b .px{font-family:var(--sans);font-size:9.5px;font-weight:600;color:var(--text)}
.gc-b.live{background:var(--run-soft);border-color:var(--run-line);border-left-color:var(--run);
  border-bottom-style:dashed}
.gc-b.live b{color:var(--run)}
/* Phiên đang chạy và phần dự kiến còn lại là MỘT khối, không phải hai: cùng một phiên
   của cùng một khách. Phần đã chơi tô đặc, phần dự kiến tô sọc, cắt nhau đúng ở vạch
   "bây giờ" (--p). Không cần chữ "dự kiến" — sọc chéo và vạch đỏ đã nói đủ. */
.gc-b.live.hasproj{
  background:linear-gradient(to bottom,var(--run-soft) 0 var(--p),transparent var(--p)),
             repeating-linear-gradient(135deg,var(--run-soft) 0 5px,transparent 5px 10px)}
.gc-b .pn{display:block;color:var(--run);font-size:9.5px;font-weight:640;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden}
.gc-sel{margin:1px 2px;border:none;text-align:left;border-radius:5px;background:var(--accent);
  color:var(--accent-ink);padding:4px 6px;line-height:1.3;overflow:hidden;box-shadow:var(--pop)}
.gc-sel b{display:block;font-size:11px;font-weight:700}
.gc-sel span{display:block;font-size:9.5px;font-weight:500;opacity:.92}
.gclegend{display:flex;gap:15px;margin-top:11px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.gclegend b{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px}

/* ===== lịch ngang ở tab Quản lý phòng: chỉ để nhìn, có vạch đỏ "bây giờ" ===== */
.hcwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh)}
.hcal{min-width:920px;position:relative}
.hc-head,.hc-row{display:grid;grid-template-columns:126px 1fr}
.hc-head{border-bottom:1px solid var(--border)}
.hc-head .hc-room{background:var(--surface-2);font-size:11px;font-weight:650;color:var(--muted)}
.hc-hours{display:grid;background:var(--surface-2)}
.hc-hours div{font-size:10.5px;font-family:var(--mono);color:var(--muted);
  text-align:center;padding:8px 0;border-left:1px solid var(--border)}
.hc-row{border-bottom:1px solid var(--border);min-height:62px}
.hc-row:last-child{border-bottom:none}
.hc-room{padding:9px 12px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  position:sticky;left:0;background:var(--surface);z-index:2}
.hc-room b{font-size:13px;font-weight:640}
.hc-room span{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.hc-track{position:relative;background-image:repeating-linear-gradient(to right,var(--border) 0 1px,transparent 1px calc(100%/16))}
.hc-b{position:absolute;top:5px;bottom:5px;border-radius:5px;padding:4px 7px;overflow:hidden;
  font-size:11.5px;line-height:1.28;background:var(--accent-soft);
  border:1px solid var(--accent-line);border-left:3px solid var(--accent)}
.hc-b b{display:block;font-weight:640;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.hc-b span{display:block;color:var(--muted);font-family:var(--mono);font-size:10px;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.hc-b .px{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--text)}
/* mở phiên từ booking thì khối "Đang chơi" phải nói luôn đang chơi là ai —
   nhìn lịch mà không biết tên thì vẫn phải mở từng phòng ra xem */
.hc-b .pn{display:block;color:var(--run);font-family:var(--sans);font-size:10.5px;font-weight:640;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.hc-b.live{background:var(--run-soft);border-color:var(--run-line);border-left-color:var(--run)}
.hc-b.live b{color:var(--run)}
/* Phiên đã chốt bill: vẫn cam vì nó là phiên chơi thật, nhưng mờ hơn hẳn khối đang chạy —
   nhìn một cái là biết cái nào còn sống, cái nào đã xong. Không dùng xám: xám ở đây sẽ
   đọc thành "trống", mà cả điểm của khối này là chỗ đó KHÔNG trống. */
/* Phiên ĐÃ CHƠI XONG: xám trung tính, không phải cam.
   base.css đặt luật "Cam = phòng đang chạy đồng hồ". Một phiên đã xong thì
   không còn đồng hồ nào chạy, nên nó không được mang màu đó — mắt phải bắt
   ngay được phòng nào đang tính tiền giữa một biểu đồ đầy khối.

   Và KHÔNG dùng opacity để làm nhạt. Hai khối mờ chồng lên nhau thì chỗ giao
   đậm hơn cả hai, nên phần chồng lấn — thứ đáng ngờ nhất — lại trông nổi bật
   nhất. Dùng màu xám thật, giữ nguyên độ đục. */
.hc-b.past{background:color-mix(in srgb, var(--surface-2) 20%, var(--surface));
           border-color:color-mix(in srgb, var(--border) 32%, var(--surface));
           border-left-color:color-mix(in srgb, var(--border-strong) 45%, var(--surface));
           opacity:1}
/* Cái tạo cảm giác "mờ" là NỀN và VIỀN, không phải chữ. Nền khối giờ gần như
   trùng nền hàng (#FDFCFA), viền chỉ còn đủ để thấy ranh giới.

   Chữ dừng ở --faint và không nhạt thêm. Đã thử nhạt hơn: tên và tiền rơi xuống
   tương phản 2,11:1, giờ và ghi chú xuống 1,70:1 — mức đó là không đọc được nữa,
   mà đây là con số tiền của một phiên đã chốt. Làm nhạt để bớt gây nhiễu thì
   được; làm nhạt tới mức phải ghé sát màn hình mới đọc được thì không.

   Chạm vào khối vẫn trả lại tương phản đầy đủ (xem [data-hist]:hover bên dưới). */
.hc-b.past b,
.hc-b.past .pn,
.hc-b.past .px,
.hc-b.past span{color:var(--faint)}
.hc-b[data-hist]{cursor:pointer}
.hc-b[data-hist]:hover{background:var(--surface-3);border-color:var(--border-strong);
                       box-shadow:var(--sh)}
.hc-b[data-hist]:hover b,
.hc-b[data-hist]:hover .pn{color:var(--text)}
.hc-b.live.hasproj{
  background:linear-gradient(to right,var(--run-soft) 0 var(--p),transparent var(--p)),
             repeating-linear-gradient(135deg,var(--run-soft) 0 6px,transparent 6px 12px);
  border-right-style:dashed}
/* vạch đỏ chỉ mốc hiện tại — chỉ vẽ khi đang trong giờ mở cửa */
.hc-after{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,
  var(--surface-2) 0 6px,transparent 6px 12px);opacity:.75;z-index:1;pointer-events:none}
.hc-now{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:3;pointer-events:none}
.hc-now::before{content:"";position:absolute;top:-2px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--danger)}

/* ===== thẻ xem nhanh khi rê chuột lên một khối lịch =====
   Chỉ là lớp đọc thêm cho chuột. Máy tính bảng và điện thoại không có hover, nên
   chạm vẫn phải mở đúng những gì nó vẫn mở — thẻ này không được thay thế cú chạm nào. */
.hovcard{position:fixed;z-index:90;width:272px;padding:12px 13px 11px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);
  box-shadow:0 8px 26px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
  font-size:12.5px;line-height:1.5;color:var(--text);pointer-events:none;
  opacity:0;transform:translateY(3px);transition:opacity .11s ease,transform .11s ease}
.hovcard.on{opacity:1;transform:none}
.hovcard .hv-h{font-weight:670;font-size:14px;letter-spacing:-.01em;margin:5px 0 1px}
.hovcard .hv-r{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.hovcard .hv-r b{color:var(--text);font-weight:620;font-variant-numeric:tabular-nums}
.hovcard .hv-money{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.hovcard .hv-money .hv-r+.hv-r{margin-top:3px}
.hovcard .hv-big b{font-size:15px}
.hovcard .hv-note{margin-top:7px;color:var(--run);font-weight:620}
.hovcard .hv-hint{margin-top:9px;padding-top:8px;border-top:1px solid var(--border);
  color:var(--faint);font-size:11.5px}
@media(hover:none){.hovcard{display:none}}

/* ===== dòng booking dùng chung cho tab Quản lý phòng và Quản lý booking ===== */
.bkrow{display:flex;align-items:flex-start;gap:13px;padding:13px 0;flex-wrap:wrap}
.bkrow+.bkrow{border-top:1px solid var(--border)}
.bkrow .bk-t{flex:1;min-width:200px}
.bkrow .bk-n{font-weight:650;font-size:14.5px}
.bkrow .bk-d{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.bkrow .bk-p{font-size:12.5px;color:var(--run);font-weight:620;margin-top:2px}
/* ba nút phải bằng nhau và cùng đường tim — chữ dài ngắn khác nhau không được làm lệch */
.bkrow .bk-a{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bkrow .bk-a .btn{height:40px;min-width:88px;padding:0 15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600}
.bkrow.off{opacity:.55}
.st{display:inline-block;font-size:10.5px;font-weight:660;padding:2px 8px;border-radius:20px;
  margin-left:7px;vertical-align:1px;white-space:nowrap}
.st.wait{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.st.in{background:var(--run-soft);color:var(--run);border:1px solid var(--run-line)}
.st.dead{background:var(--surface-3);color:var(--muted);border:1px solid var(--border)}
.st.late{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-line)}

/* chọn xong hiện ở đây */
.selbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.selbar .sb-r{font-weight:670;font-size:15px}
.selbar .sb-t{font-family:var(--mono);font-size:16px;font-weight:640}
.sugg{display:flex;flex-direction:column;gap:6px;margin-top:11px}
.sugg button{display:flex;align-items:center;justify-content:space-between;gap:11px;width:100%;
  text-align:left;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 13px;font-size:13.5px}
.sugg button:hover{border-color:var(--accent);background:var(--accent-soft)}
.sugg .sg-w{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.quick button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}