/* ================= generic ================= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh);padding:17px}
.card+.card{margin-top:15px}
/* Tên block ôm lấy một mảng màu riêng. Chỉ tăng cỡ chữ thì chưa đủ: chữ to vẫn là chữ
   nằm trên cùng một nền trắng với nội dung, nên mắt vẫn phải đọc mới biết đâu là tên khối.
   Cả app tông kem-be, nên một mảng xanh lạnh là thứ mắt bắt được trước tiên — không cần
   to hay đậm thêm nữa.

   Màu này đi qua token --hl chứ không dùng thẳng var(--accent-soft), dù hai giá trị đang
   bằng nhau. Lý do: xanh nhạt hiện cũng là màu "đang chọn / đang active" (mục menu, ô lịch
   trỏ vào, chương trình khuyến mãi đang áp, booking đã gắn). Nhãn tĩnh mặc chung bộ đồ với
   trạng thái động là chỗ có thể phải tách ra sau này — có token riêng thì sửa một dòng,
   không phải đi lùng sáu chỗ. Tuyệt đối không dùng cam ở đây: cam = đồng hồ đang chạy. */
.card h3{margin:0 0 14px;padding:4px 10px;background:var(--hl);border-radius:5px;
  display:inline-block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.card.locked{opacity:.5;pointer-events:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.row+.row{border-top:1px solid var(--border)}
.btn{background:var(--accent);color:var(--accent-ink);border:none;padding:10px 17px;
  border-radius:var(--r-sm);font-weight:640;font-size:14.5px}
.btn.big{width:100%;padding:14px;font-size:16px}
.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border);font-weight:560}
.btn.quiet{background:none;border:1px solid var(--border);color:var(--muted);font-weight:500;
  padding:7px 12px;font-size:13px}
/* nút hành động trên dòng khách — phải nhìn ra ngay là bấm được */
.btn.act{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
  font-weight:600;padding:7px 15px;font-size:13px;border-radius:20px;box-shadow:var(--sh)}
.btn.act:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn.act.warn{color:var(--run);border-color:var(--run-line);background:var(--run-soft)}
.btn.act.warn:hover{background:var(--run);color:var(--run-ink);border-color:var(--run)}
.btn:disabled{opacity:.42;cursor:not-allowed}

/* Có / Không */
.yesno{display:flex;gap:7px;margin-bottom:4px}
.yesno button{flex:1;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px;font-size:14.5px;font-weight:600}
.yesno button:hover{border-color:var(--border-strong)}
.yesno button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bkgroup{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:660;
  color:var(--muted);padding:9px 2px 3px}

/* dropdown chương trình khuyến mãi */
.ctkmdd{position:relative;margin-top:5px}
.ctkmdd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);padding:11px 13px}
.ctkmdd>summary::-webkit-details-marker{display:none}
.ctkmdd>summary:hover{border-color:var(--border-strong)}
.ctkmdd[open]>summary{border-color:var(--accent)}
.ctkmdd.active>summary{border-color:var(--accent);background:var(--accent-soft)}
.ctkmdd .s-t{flex:1;min-width:0}
.ctkmdd .s-n{font-size:14px;font-weight:620;display:block}
.ctkmdd .s-d{font-size:12px;color:var(--muted);margin-top:1px}
.ctkmdd.active .s-n{color:var(--accent)}
.ctkmdd .s-a{font-family:var(--mono);font-weight:670;font-size:14px;white-space:nowrap;color:var(--accent)}
.ctkmdd .chev{color:var(--muted);font-size:10px}
.ctkmmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--pop);padding:6px;z-index:55}
.ctkmmenu button{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:none;border:none;padding:11px 12px;border-radius:var(--r-sm)}
.ctkmmenu button:hover{background:var(--surface-2)}
.ctkmmenu button[aria-pressed="true"]{background:var(--accent-soft)}
.ctkmmenu .o-t{flex:1;min-width:0}
.ctkmmenu .o-n{font-size:13.5px;font-weight:620;display:block}
.ctkmmenu button[aria-pressed="true"] .o-n{color:var(--accent)}
.ctkmmenu .o-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.42}
.ctkmmenu .o-a{font-family:var(--mono);font-size:13px;font-weight:660;white-space:nowrap;color:var(--accent)}
.ctkmmenu .o-a.zero{color:var(--faint);font-weight:500}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.stepper button{border:none;background:var(--surface-2);padding:9px 15px;font-size:17px;font-weight:600;line-height:1}
.stepper .v{padding:0 20px;font-family:var(--mono);font-size:18px;font-weight:600;min-width:52px;text-align:center}
/* Số người gõ thẳng được, không phải bấm + mười lần cho một nhóm 12 người.
   Vẫn giữ + / − vì đa số ca là 1–4 người, bấm một cái vẫn nhanh hơn gõ. */
.stepper input.v{border:none;background:none;width:58px;padding:0;-moz-appearance:textfield}
.stepper input.v::-webkit-outer-spin-button,.stepper input.v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input.v:focus{outline:none;background:var(--accent-soft);border-radius:4px}
.stepper.sm input.v{width:36px}
.stepper.sm button{padding:5px 10px;font-size:14px}
.stepper.sm .v{padding:0 11px;font-size:14px;min-width:30px}
.quick{display:flex;gap:7px;flex-wrap:wrap}
.quick button{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
  padding:6px 14px;font-size:13.5px;font-weight:560}
.quick button:hover{border-color:var(--accent-line);background:var(--accent-soft)}
input[type=text],input[type=number],input[type=time],input[type=date],input[type=search],select,textarea{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 11px;width:100%}
textarea{resize:vertical;min-height:56px}
.field{display:flex;flex-direction:column;gap:5px}
.field .lbl{font-size:11px}
.hint{font-size:12.5px;color:var(--muted)}
/* dropdown chọn được nhiều trạng thái cùng lúc — một cái nhìn thấy được cả "sắp tới" lẫn
   "đang trễ" là đúng cách nhân viên nghĩ: đây là danh sách việc còn phải làm */
.mdd{position:relative;flex:1;min-width:184px}
.mdd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;height:42px;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);padding:0 12px;font-size:15px}
.mdd>summary::-webkit-details-marker{display:none}
.mdd>summary:hover{border-color:var(--border-strong)}
.mdd[open]>summary{border-color:var(--accent)}
.mdd .s-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdd .chev{color:var(--muted);font-size:10px}
.mddmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--pop);padding:6px;z-index:56;min-width:216px}
.mddmenu label{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:14px;cursor:pointer}
.mddmenu label:hover{background:var(--surface-2)}
.mddmenu input{margin:0;width:17px;height:17px;flex:0 0 17px}
/* Chọn một trong nhiều: cùng khung, cùng khoảng cách, cùng kiểu tô như dòng nhiều lựa chọn —
   chỉ khác dấu tick thay cho ô vuông. Một thứ trông giống nhau thì bấm cũng giống nhau. */
.mddmenu .opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
  border:none;padding:10px;border-radius:var(--r-sm);font-size:14px}
.mddmenu .opt:hover{background:var(--surface-2)}
.mddmenu .opt[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:640}
.mddmenu .opt .tick{margin-left:auto;font-size:12px}
/* Ngày cụ thể nằm trong cùng dropdown với "Hôm nay / Sắp tới / Đã qua": bốn lựa chọn
   nhanh phủ gần hết việc thường ngày, ô ngày là lối thoát cho phần còn lại. Tách ra
   một ô riêng ngoài thanh lọc thì chiếm chỗ suốt ngày cho một việc hiếm. */
/* Xếp dọc chứ không để nhãn và ô nằm ngang: ô ngày của trình duyệt tự quyết bề rộng
   theo định dạng ngày của máy, nên hàng ngang sẽ cắt mất phần năm ở một số máy. */
.mddmenu .mdd-date{border-top:1px solid var(--border);margin-top:5px;padding:9px 6px 3px}
.mddmenu .mdd-date span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.mddmenu .mdd-date input{width:100%;height:38px;font-size:14px}
.mddmenu .mdd-a{display:flex;gap:7px;border-top:1px solid var(--border);margin-top:5px;padding:7px 4px 2px}
.mddmenu .mdd-a button{flex:1;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px;font-size:12.5px;color:var(--muted)}
/* thanh lọc dùng chung: một ô tìm + mấy dropdown. Dropdown thay cho dãy nút vì
   ba bốn nút xếp ngang chiếm hết một hàng trên điện thoại mà chỉ chọn được một */
.filtbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:13px}
.filtbar input[type=search]{flex:2;min-width:180px}
.filtbar select{flex:1;min-width:150px;height:42px;width:auto}
.filtbar .mdd{flex:1;min-width:150px}
/* Trên điện thoại thanh lọc xếp 2×2, nên dropdown cột phải mà bung ra rộng hơn nút của
   nó sẽ thò qua mép phải và làm cả trang cuộn ngang. Ở khổ hẹp thì menu rộng đúng bằng
   nút — 150px vẫn đủ cho nhãn dài nhất ("Đã nhận phòng") lẫn ô chọn ngày. */
@media(max-width:620px){.filtbar .mddmenu,.datebar .mddmenu{min-width:0}}
.datebar .mdd{flex:0 0 auto;min-width:168px}
.datebar .mdd>summary{height:44px}
/* đọc tin nhắn khách: bảng đối chiếu "đọc ra được gì" */
.parsebox{margin-top:12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);padding:4px 12px}
.pfield{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px}
.pfield+.pfield{border-top:1px dashed var(--border)}
.pfield .k{color:var(--muted);font-size:12.5px;white-space:nowrap}
.pfield .v{font-weight:640;text-align:right}
.pfield .v.miss{color:var(--faint);font-weight:450}
.pfield .v.guess{color:var(--run)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.split{display:grid;grid-template-columns:1fr 350px;gap:15px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
.sticky{position:sticky;top:74px}

/* booking search */
.bksearch{position:relative}
.bkres{margin-top:9px;display:flex;flex-direction:column;gap:6px;max-height:290px;overflow-y:auto}
.bkitem{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface-2);text-align:left;width:100%}
.bkitem:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.bkitem .t{flex:1;min-width:0}
.bkitem .n{font-weight:620;font-size:14px}
.bkitem .d{font-size:12px;color:var(--muted);margin-top:1px}
.bkitem .rm{font-size:11.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.bkitem[disabled]{opacity:.45;cursor:not-allowed}
.linked{border:1px solid var(--accent);border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:var(--r-sm);padding:12px 13px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.linked .n{font-weight:660;font-size:14px;color:var(--accent)}
.linked .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.linked button{background:none;border:none;color:var(--accent);text-decoration:underline;font-size:12.5px;padding:0}
.moved{margin-top:9px;border:1px solid var(--run-line);background:var(--run-soft);color:var(--run);
  border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;font-weight:560;line-height:1.45}

/* Huỷ phiên: nằm ngay dưới Chốt bill vì đó là hai lối kết thúc phiên, nhưng để chìm —
   không viền, không nền, chữ nhỏ. Chặn bấm nhầm bằng popup chứ không bằng khoảng cách. */
.cancelzone{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.cancelzone button{display:block;width:100%;background:none;border:none;padding:7px 0;
  font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cancelzone button:hover{color:var(--danger)}
.cancelzone .cz-no{margin:0;font-size:12px;color:var(--faint);line-height:1.45;text-align:center}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;
  background:rgba(25,27,44,.55);animation:fade .14s ease}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--pop);padding:20px;max-width:430px;width:100%;
  border-top:3px solid var(--accent);max-height:88vh;overflow-y:auto}
.modal-card.danger{border-top-color:var(--danger)}
.modal-card.wide{max-width:540px}
.modal-card .m-h{font-size:17px;font-weight:680;letter-spacing:-.01em;margin-bottom:8px}
.modal-card .m-b{font-size:13.5px;line-height:1.55;margin-bottom:17px}
.modal-card .m-b .soft{color:var(--muted)}
.modal-card .m-b .warn{color:var(--danger);font-weight:600}
.modal-card .m-b .field{margin-bottom:12px}
.modal-card .m-b .field .lbl{display:block;margin-bottom:5px}
/* ô Ngày và ô Phòng phải cao bằng nhau — trình duyệt cho input date và select chiều cao khác nhau */
.modal-card input[type=text],.modal-card input[type=date],.modal-card select{
  height:44px;padding:0 12px;font-size:15px}
.req{color:var(--danger);font-style:normal;margin-left:2px;font-weight:700}
/* .field là flex column nên stepper bị kéo hết chiều rộng — neo lại và cho cao bằng ô khác */
.modal-card .m-b .stepper{align-self:flex-start;height:44px}
.modal-card .m-b .stepper button{height:44px;padding:0 17px;font-size:17px}
.modal-card .m-b .stepper .v{display:flex;align-items:center;justify-content:center;
  font-size:16px;min-width:44px;padding:0}
.actlist{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.actlist button{display:block;width:100%;text-align:left;border-radius:var(--r-sm);
  padding:13px 14px;font-size:14px;font-weight:590;
  border:1px solid var(--border);background:var(--surface-2)}
.actlist button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.actlist button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.actlist button.primary:hover{filter:brightness(1.07)}
.actlist button.danger{color:var(--danger);border-color:var(--danger-line);background:none}
.actlist button.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.m-ctx{font-size:12.5px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;line-height:1.5}
.m-ctx b{font-weight:660}
.m-err{font-size:12.5px;color:var(--danger);font-weight:560;margin-bottom:12px}
/* trùng phòng phải báo ngay lúc đang chọn giờ, không đợi bấm Xác nhận —
   bấm rồi mới biết là đã gõ xong cả phiếu, phải sửa ngược lại từ đầu */
.m-live{font-size:12.5px;font-weight:560;margin-bottom:12px;padding:9px 11px;
  border-radius:var(--r-sm);line-height:1.45;display:flex;gap:8px;align-items:flex-start}
.m-live.bad{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-line)}
.m-live.ok{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
.m-live b{font-weight:680}
/* CTKM chọn sẵn lúc đặt: dropdown, chỉ liệt kê chương trình mà khung giờ này đủ điều kiện */
.ckpick .none{font-size:12.5px;color:var(--muted);padding:9px 11px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);line-height:1.45}
.ckpick select{height:44px}
.reasons{display:flex;flex-direction:column;gap:7px}
.reasons button{display:block;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}
.reasons button:hover{border-color:var(--border-strong)}
.reasons button[aria-pressed="true"]{background:var(--danger-soft);border-color:var(--danger);
  color:var(--danger);font-weight:620}
.donebox{text-align:center;padding:6px 0 2px}
.donebox .dt{width:54px;height:54px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-size:26px;font-weight:700;margin:0 auto 13px}
.modal-card .m-btns{display:flex;gap:9px}
.modal-card .m-btns .btn{flex:1;padding:12px}
.modal-card .m-a{font-size:11.5px;color:var(--faint);line-height:1.45;margin-top:15px;
  border-top:1px dashed var(--border);padding-top:11px}

/* guests + items */
.guest{padding:9px 0}
.guest+.guest{border-top:1px solid var(--border)}
.guest-r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.guest-n{font-weight:600;font-size:14px}
.guest-t{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.guest-e{margin-top:10px;padding:15px 11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;position:relative}
/* Một hàng: ô giờ bên trái, nút dồn sát mép phải và cùng đường đáy với ô giờ — mắt đi
   ngang một lượt là xong. Dấu × nằm hẳn phía trên, nên phần trên chừa thêm chỗ cho nó.
   Màn hẹp thì nút tự xuống hàng dưới, vẫn dồn phải. */
.guest-e .g-fields{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;flex:1;min-width:0;padding-right:34px}
.guest-e .g-btns{display:flex;justify-content:flex-end;gap:7px;margin-left:auto}
/* Màn hẹp thì hai ô giờ đã chiếm trọn bề ngang; ép nút nằm cùng hàng nữa là ô giờ bị bóp
   còn một mẩu. Dưới ngưỡng này nút xuống hàng riêng, vẫn dồn phải. */
@media(max-width:620px){
  /* Màn hẹp: nút xuống hàng riêng, và hai ô giờ tự xếp dọc khi không đủ chỗ. Không bóp ô
     lại cho vừa một hàng — bóp nữa là số lại bị cắt, đúng cái lỗi vừa sửa. Thà thêm một
     hàng còn hơn đọc nhầm giờ. */
  .guest-e .g-fields{flex:1 1 100%;padding-right:14px}
  .guest-e .g-btns{width:100%}
}
/* Đóng ô sửa bằng × ở góc — không phải bằng một nút "Thôi" nằm ngay cạnh "Lưu".
   Hai nút chữ cạnh nhau trông như hai lựa chọn ngang hàng, mà người đang vội bấm nhầm
   là mất luôn cái vừa gõ. × ở góc thì không ai nhầm nó với một hành động ghi lại. */
.guest-e .ex{position:absolute;top:6px;right:7px;background:none;border:none;color:var(--faint);
  font-size:20px;line-height:1;width:31px;height:31px;border-radius:50%;display:grid;place-items:center}
.guest-e .ex:hover{background:var(--surface-3);color:var(--danger)}
/* giờ vô lý thì ô phải đỏ ngay lúc gõ, không đợi tới lúc bấm nút */
.hm.bad{border-color:var(--danger);background:var(--danger-soft)}
.hm.bad input{color:var(--danger)}
.badmsg{font-size:12.5px;color:var(--danger);font-weight:560;margin-top:8px;line-height:1.45}
/* ô giờ tự dựng — input type=time bám theo vùng của máy nên vẫn ra AM/PM, không dùng được */
.hm{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:5px 9px;position:relative}
.hm input{width:38px;border:none;background:none;padding:4px 0;text-align:center;
  font-family:var(--mono);font-size:16px;font-weight:620;-moz-appearance:textfield}
.hm input::-webkit-outer-spin-button,.hm input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hm input:focus{outline:none;background:var(--accent-soft);border-radius:4px}
.hm .sep{font-family:var(--mono);font-size:16px;font-weight:620;color:var(--muted)}
.hm .clr{background:none;border:none;color:var(--faint);font-size:15px;padding:0 0 0 5px;line-height:1}
.hm .clr:hover{color:var(--danger)}
/* Gõ được mà cũng chọn được. Gõ nhanh hơn khi biết rõ giờ; bảng chọn cứu lúc một tay cầm
   máy, tay kia đang bận — và nó bỏ luôn khả năng gõ ra một giờ không tồn tại. */
.hm .pick{background:none;border:none;color:var(--muted);font-size:10px;padding:0 1px 0 6px;line-height:1}
.hm .pick:hover{color:var(--accent)}
.hmmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:70;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--pop);padding:10px;
  display:flex;gap:12px;max-width:calc(100vw - 34px)}
.hmmenu .ttl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:660;margin-bottom:5px}
/* Danh sách dọc, đủ 00–23 giờ và 00–59 phút. Không rút gọn phút xuống bội số của 5:
   giờ vào của khách là giờ thật, 17:07 phải chọn được đúng 07. */
.hmmenu .list{max-height:212px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  padding-right:3px;scrollbar-width:thin}
.hmmenu .list button{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;
  padding:8px 16px;font-family:var(--mono);font-size:13.5px;font-weight:600;text-align:center}
.hmmenu .list button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.hmmenu .list button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.gactions{display:flex;gap:6px}
/* nút trong ô sửa giờ: cùng chiều cao, cùng đường tim, và nhỏ hơn nút chính —
   đây là thao tác phụ, không đáng chiếm chỗ bằng nút hành động của cả màn */
.guest-e .btn{height:36px;padding:0 15px;display:inline-flex;align-items:center;
  justify-content:center;line-height:1;font-size:13px}

/* phòng nhân viên: sổ ghi món, không đồng hồ, không hoá đơn */
.slog{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13.5px}
.slog+.slog{border-top:1px solid var(--border)}
.slog .nm{flex:1;min-width:0}
.slog .mt{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.slog .by{font-size:11.5px;font-weight:620;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:20px;padding:2px 9px;white-space:nowrap}
.slog .x{background:none;border:none;color:var(--faint);font-size:17px;padding:2px 4px;line-height:1}
.slog .x:hover{color:var(--danger)}
.free0{font-family:var(--mono);font-size:12px;color:var(--muted)}
/* align-content:start là bắt buộc khi khoá chiều cao: mặc định lưới kéo giãn các hàng
   cho đầy khung, nên ô món tự cao lên, lần đo sau lại ra số lớn hơn — càng đổi nhóm càng phình */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:7px;align-content:start}
.menu-grid button{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 9px;text-align:left;line-height:1.28}
.menu-grid button:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.menu-grid .mi-n{font-size:13.5px;font-weight:580;display:block}
.menu-grid .mi-p{font-size:12px;color:var(--muted);font-family:var(--mono)}
.cat{display:flex;gap:5px;margin-bottom:11px;flex-wrap:wrap}
.cat button{background:none;border:1px solid var(--border);border-radius:20px;padding:5px 13px;
  font-size:13px;color:var(--muted)}
.cat button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.iline{display:flex;align-items:center;gap:9px;padding:8px 0}
.iline+.iline{border-top:1px solid var(--border)}
.iline .nm{flex:1;min-width:0;font-size:13.5px}
.iline .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;min-width:64px;text-align:right}
.iline .x{background:none;border:none;color:var(--faint);font-size:17px;padding:2px 4px;line-height:1}
.iline .x:hover{color:var(--danger)}
.line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:14px}
.line+.line{border-top:1px solid var(--border)}
.line .qty{font-family:var(--mono);color:var(--muted);font-size:13px;min-width:26px}
.line .amt{font-family:var(--mono);font-variant-numeric:tabular-nums}
.total-big{font-family:var(--mono);font-size:31px;font-weight:670;letter-spacing:-.025em;line-height:1.1}

/* bill */
.seg{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px}
.seg+.seg{border-top:1px dashed var(--border)}
.seg .who-s{font-weight:560}
.seg .det{font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:1px}
.chip{display:inline-block;font-size:10.5px;font-weight:650;padding:1.5px 7px;border-radius:20px;
  background:var(--run-soft);color:var(--run);border:1px solid var(--run-line);margin-left:6px;
  letter-spacing:.02em;vertical-align:1px}
.ctkm-d{margin-top:8px;font-size:12.5px;color:var(--muted);padding:9px 11px;background:var(--surface-2);
  border-radius:var(--r-sm);border:1px solid var(--border);line-height:1.45}
.ctkm-d.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.manual-open{background:none;border:none;color:var(--muted);font-size:13px;
  text-decoration:underline;text-underline-offset:3px;padding:11px 0 0}
.manual-open:hover{color:var(--danger)}
.manual{margin-top:12px;border:1px solid var(--danger-line);border-left:3px solid var(--danger);
  border-radius:var(--r-sm);background:var(--danger-soft);padding:13px}
.manual .m-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:660;color:var(--danger);margin-bottom:4px}
.manual .m-w{font-size:12px;color:var(--danger);opacity:.9;margin-bottom:11px;line-height:1.42}
.manual .m-f{display:grid;grid-template-columns:150px 1fr;gap:9px}
@media(max-width:600px){.manual .m-f{grid-template-columns:1fr}}
.manual input{background:var(--surface);border-color:var(--danger-line)}
/* giảm số tiền hay giảm %, chọn một. Ô còn lại khoá lại chứ không biến mất —
   biến mất thì nhân viên tưởng app hỏng, còn khoá thì thấy ngay vì sao không gõ được */
.manual .m-two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
@media(max-width:600px){.manual .m-two{grid-template-columns:1fr}}
.manual .m-one .lbl{display:block;font-size:11px;margin-bottom:4px;color:var(--danger)}
.manual .m-one .u{position:relative;display:block}
.manual .m-one .u input{width:100%;padding-right:38px}
.manual .m-one .u i{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:12.5px;color:var(--danger);opacity:.8;pointer-events:none}
.manual input:disabled{background:var(--surface-2);opacity:.5;cursor:not-allowed}
.manual .m-lock{font-size:11.5px;color:var(--danger);opacity:.85;margin-top:4px}
.manual .m-off{font-size:12px;color:var(--danger);opacity:.85;margin-bottom:9px;line-height:1.42;
  padding:7px 9px;border:1px dashed var(--danger-line);border-radius:var(--r-sm)}
.manual-applied{margin-top:11px;border:1px solid var(--danger-line);border-left:3px solid var(--danger);
  border-radius:var(--r-sm);background:var(--danger-soft);padding:11px 13px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.manual-applied .ma-n{font-size:13px;font-weight:660;color:var(--danger)}
.manual-applied .ma-r{font-size:12.5px;color:var(--danger);opacity:.92;margin-top:2px}
.manual-applied .ma-a{font-family:var(--mono);font-weight:660;color:var(--danger);white-space:nowrap}
.manual-applied button{background:none;border:none;color:var(--danger);opacity:.7;font-size:12px;
  text-decoration:underline;padding:0;margin-top:5px}
.printbox{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-sm);
  padding:12px;margin-top:13px}
.printbox.done{border-color:var(--border);background:var(--surface-2)}
.printbox .ph{font-size:12.5px;color:var(--accent);font-weight:600;margin-bottom:9px;line-height:1.45}
.printbox.done .ph{color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px}
.pay-methods button{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px;font-size:14px;font-weight:580}
.pay-methods button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.confirm-box{margin-top:9px;display:flex;align-items:flex-start;gap:9px;padding:10px 12px;
  border:1px solid var(--run-line);background:var(--run-soft);border-radius:var(--r-sm);font-size:13px}
.confirm-box input{margin:2px 0 0}
.confirm-box.ok{border-color:var(--accent-line);background:var(--accent-soft)}
.recv{display:flex;gap:7px;margin-top:9px}
.recv input{font-family:var(--mono);font-size:16px;text-align:right}
.diff{font-size:12.5px;color:var(--muted);margin-top:7px;display:flex;justify-content:space-between}
.diff b{font-family:var(--mono);color:var(--accent)}
/* D-100: thu thiếu phần lẻ là hợp lệ nhưng không được trôi qua mắt như một dòng
   bình thường — D-83 bắt mọi khoản lệch phải được nói lại với nhân viên trước khi
   chốt. Thu dư dùng accent, thu thiếu dùng cam --run — không dùng --danger, vì bỏ
   phần lẻ là hợp lệ và màu đỏ sẽ dạy nhân viên rằng mình vừa làm sai. */
.diff.short b{color:var(--run)}
.err{font-size:12.5px;color:var(--danger);margin-top:7px;font-weight:560}

/* done screen */
.done-wrap{max-width:470px;margin:34px auto;text-align:center}
.done-tick{width:66px;height:66px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:32px;margin:0 auto 17px;font-weight:700}
.done-wrap h2{margin:0 0 6px;font-size:23px;font-weight:680;letter-spacing:-.02em}
.done-amt{font-family:var(--mono);font-size:35px;font-weight:680;letter-spacing:-.03em;margin:16px 0 4px}
.done-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh);padding:20px;margin:19px 0;text-align:left}

/* D-91: thẻ phòng hiện hai số riêng — tiền giờ và tiền món — không bao giờ cộng.
   Xếp dọc, tiền món nhỏ và nhạt hơn để mắt bắt tiền giờ trước. */
.money-col{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.running-money.items{ font-size:.82em; color:var(--faint,#8b8177); font-weight:600; }