/* Bàn học: the Quán tab (js/quan-view.js): the count of people per branch, the ticket, the links of the café.
   Same tokens as app.css; the ticket is the one lamp-yellow card on the page. */
.view--quan { padding-bottom: 28px; }
.quan-card {
  display: grid; gap: 12px; margin: 0 0 14px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2);
}
.quan-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; }
.quan-note { margin: 0; color: #d8d1c4; }
.quan-note + .btn { margin-top: 14px; }

/* Còn chỗ không? */
.seat-body { display: grid; gap: 10px; }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.seat { display: grid; gap: 7px; }
.seat-line { margin: 0; font-size: 1.04rem; }
.seat-line b { font-weight: 600; }
.seat--stale .seat-line span, .seat--none .seat-line span { color: var(--muted); }
.seat--level .seat-line span { font-weight: 600; }
.seat--vang .seat-line span { color: #6fcf7a; }
.seat--trung-binh .seat-line span { color: #d9d04a; }
.seat--dong .seat-line span { color: #f0913a; }
.seat--day .seat-line span { color: #ef6a5e; }
.seat-bar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.seat-step { fill: var(--ink-3); }
.seat-step--vang { fill: #6fcf7a; }
.seat-step--trung-binh { fill: #d9d04a; }
.seat-step--dong { fill: #f0913a; }
.seat-step--day { fill: #ef6a5e; }
.seat-note { margin: 0; color: var(--muted); font-size: 0.86rem; }

/* Vé của bạn */
.ticket {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r);
  background: var(--lamp); color: var(--lamp-ink);
}
.ticket--ended { background: var(--ink-3); color: var(--paper); border: 1px solid var(--line); }
.ticket p { margin: 0; }
.ticket-kicker { font-size: 0.86rem; font-weight: 600; opacity: 0.8; }
.ticket-left { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ticket-left b { font-variant-numeric: tabular-nums; }
.ticket-times { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.ticket-remind { margin-top: 4px; font-weight: 600; }
.ticket-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.ticket-actions .link-btn { color: inherit; opacity: 0.85; }
.ticket-why { font-size: 0.82rem; opacity: 0.75; }

/* Gắn bill (js/bill-attach.js, also inside Máy in): the photo button, the line that says the boxes are filled */
.bill-photo { gap: 10px; }
.bill-photo svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bill-status { margin: 0; color: var(--lamp); font-size: 0.95rem; }

/* Ở quán */
.quan-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quan-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--ink); text-decoration: none;
}
.quan-link:active { background: var(--ink-3); }
.quan-link b { display: block; font-weight: 600; }
.quan-link::after { content: "›"; color: var(--muted); font-size: 1.5rem; line-height: 1; flex: none; }