/* Cài đặt. Màn của quản lý, mở vài lần một tuần — nên nó ưu tiên ĐỌC RÕ hơn là
   ít thao tác: mỗi con số ở đây là giá của mọi hoá đơn về sau. */

/* Con số đang có hiệu lực phải to hơn hẳn mọi thứ quanh nó. Một bảng giá mà
   đơn giá cùng cỡ chữ với nhãn là bảng giá phải đọc hai lần. */
.setbig{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 10px}
.setbig b{font-family:var(--mono);font-size:27px;font-weight:650;letter-spacing:-.02em}
.setbig span{font-size:12.5px;color:var(--muted)}

/* Form mở ngay tại chỗ, không phải hộp thoại: người sửa giá cần thấy con số cũ
   nằm ngay trên con số mới đang gõ. */
.setform{margin-top:13px;padding:13px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:11px}
/* Ép MỘT chiều cao cho mọi ô. Để trình duyệt tự quyết thì ô chữ 43px, ô chọn
   40px, ô ngày 45px — mỗi widget gốc một kiểu. Đứng rời nhau thì không ai thấy,
   nhưng ở đây chúng xếp thành cột và nằm cạnh nhau theo cặp, nên ba con số đó
   thành ba mép lệch. 44px là chiều cao đã dùng cho ô ngày ở thanh lọc và ô chọn
   ở màn booking — lấy lại đúng nó, đừng đẻ thêm một con số thứ tư. */
.setform input,.setform select{width:100%;height:44px}
.setform .hint{margin:0}
/* Tên ô trong form cài đặt đậm và màu chữ chính (chủ quán 08/10/2026): xám nhạt
   thì tên ô chìm ngang với dòng gợi ý, người nhập phải dò mới thấy ô nào là ô nào. */
.setform .field .lbl{color:var(--text);font-weight:700}
.setact{display:flex;gap:8px;flex-wrap:wrap}

/* Nút "Thêm món mới" đứng một mình, căn trái, không khối bao. */
.setadd{margin-bottom:15px}
/* Khi nút "Thêm…" đứng SAU một khối (tab Ngày lễ: công tắc rồi mới tới nút) thì
   nó cần khoảng hở trên bằng khoảng hở dưới. Ở tab Thực đơn nút đứng đầu màn nên
   không có luật này — thêm margin-top vô điều kiện là đẩy nó tụt khỏi đỉnh.
   15px lấy đúng con số `.card + .card` đang dùng, đừng đẻ thêm số thứ hai. */
.card + .setadd{margin-top:15px}
.btn.them{background:var(--accent);color:var(--accent-ink);font-weight:640}

/* ---- Nút trên từng dòng món ----
 *
 * Trước 07/09/2026 ba nút này dùng .btn.quiet: chữ xám nhạt, viền mờ, nền trong
 * suốt. Chúng đọc ra như NHÃN chứ không như nút — chủ quán hỏi thẳng "cái này
 * bấm được à". Một nút mà người dùng phải hỏi thì lỗi ở nút.
 *
 * Giờ mỗi nút mang màu của việc nó làm, theo đúng ba màu của base.css:
 *   xanh cobalt = hành động của hệ thống · đỏ = việc gỡ đi thứ đang chạy.
 * "Sửa tên" cố ý để trung tính — nó không đụng tới tiền, và ba nút cùng màu thì
 * chẳng nút nào nổi.
 */
.setbtns .btn{padding:7px 13px;font-size:13px;font-weight:600;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--surface)}
.setbtns .btn:hover{filter:none}

.setbtns .s-gia{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.setbtns .s-gia:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.setbtns .s-sua{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.setbtns .s-sua:hover{background:var(--surface-3);border-color:var(--text)}

.setbtns .s-ngung{color:var(--danger);border-color:var(--danger-line);background:var(--danger-soft)}
.setbtns .s-ngung:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Món đang ngưng: dòng bị làm mờ, nên nút mang nó trở lại phải là nút ĐẶC —
   viền mỏng ở độ mờ 55% thì gần như biến mất. */
.setbtns .s-ban{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* Xoá là việc không có đường về, nên nó đậm hơn Ngưng bán / Tắt — hai nút kia
   đều lùi lại được. Cùng màu cảnh báo, khác độ nặng. */
.setbtns .s-xoa{background:var(--danger);color:#fff;border-color:var(--danger)}
.setbtns .s-xoa:hover{filter:brightness(.92)}

.setname{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;flex:1}
.setname b{font-size:14.5px;font-weight:620}
/* Mã món và mã phòng là đường tra ngược về sổ cũ (CLAUDE.md), nên chúng luôn
   hiện cạnh cái tên — nhưng bằng chữ máy, mờ, để mắt không đọc nhầm là tên. */
.setcode{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.setbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Món đã ngưng bán và phòng đang khoá: mờ đi, nhưng KHÔNG ẩn — ẩn rồi thì
   không còn đường nào mở lại. */
.row.off{opacity:.55}
.row.sub2{padding-top:0;border-top:none;font-size:12.5px}
.row.sub2 .lbl{color:var(--muted)}

@media(max-width:620px){
  .setbig b{font-size:23px}
  /* Dòng có nút (món, khuyến mãi…) xuống hàng trên điện thoại: tên một hàng, con
     số một hàng, nút một hàng. `.row` gốc không xuống hàng, nên trước 08/10/2026
     ba phần bị nén vào một hàng 390px — tên còn hai chữ mỗi dòng và câu ưu đãi
     đè lên tên. */
  .row:has(> .setbtns){flex-wrap:wrap;row-gap:8px}
  .row:has(> .setbtns) > .setname{flex:1 1 100%}
  .row .setbtns{width:100%;justify-content:flex-start}
  .setform{padding:11px}
}

/* Hai ô nhập đi thành cặp — "chơi 3 tính 2", "từ ngày / tới ngày". Tách chúng
   thành hai dòng rời làm mất chính cái quan hệ khiến chúng có nghĩa. */
.kmcap{display:flex;gap:11px;flex-wrap:wrap}
.kmcap .field{flex:1;min-width:150px}
/* Nhãn một bên dài hai dòng ("Khách vào từ (để trống là cả ngày)") thì ô của
   nó tụt thấp hơn ô bên cạnh. Ép ô nhập xuống đáy: hai ô luôn thẳng hàng, nhãn
   vẫn bắt đầu ở cùng một mép trên. */
.kmcap .field > :last-child{margin-top:auto}

/* Chọn kiểu ưu đãi: ba nút, chọn một. Dùng lại .yesno của màn mở phiên nên
   nhân viên đã quen hình dạng này. */
.setform .yesno{flex-wrap:wrap}
.setform .yesno button{min-width:118px;flex:1}

/* Bảy nút thứ. Không dùng checkbox: ở đây chọn nhiều là chuyện thường, mà bảy ô
   vuông tí xíu kèm bảy cái nhãn thì vừa khó bấm vừa chiếm hai dòng. */
.kmthu{display:flex;gap:6px;flex-wrap:wrap}
.kmthu button{flex:1;min-width:52px;height:40px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;
  font-weight:600;color:var(--muted)}
.kmthu button:hover{border-color:var(--border-strong);color:var(--text)}
.kmthu button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent)}

/* ---- giá thường / giá lễ (D-131) ----
   Tab NHỎ, nằm trong một tab lớn. Thấp hơn .rseg của thanh trên cùng một bậc để
   thứ bậc đọc được ngay: thanh trên là "đang ở màn nào", thanh này là "đang xem
   bảng giá nào của màn đó". Cùng hình dạng, khác kích cỡ — không dựng kiểu tab
   thứ ba. */
.setsub{height:36px;margin:0 0 15px}
.setsub button{padding:0 15px;font-size:13.5px}

/* Công tắc giá lễ. Không viền màu, không nền màu: nó đứng đầu tab và nếu tô đậm
   thì nó tranh chỗ với chính bảng giá — thứ người ta vào đây để đọc. Trạng thái
   nằm ở hai cái nút, chỗ nó thuộc về. */
.lecongtac .row{align-items:center;gap:12px}
.lecongtac .rseg{height:38px;flex:none}
.lecongtac .rseg button{padding:0 16px;font-size:13.5px}

/* ---- cấp khoá duyệt: mã QR + đường lui gõ tay (D-137) ---- */

/* Nền TRẮNG cố định, không lấy theo tông nền. Máy quét đọc tương phản sáng/tối;
   một mã QR nằm trên nền tối là một mã không quét được. Ảnh do thư viện sinh ra
   đã có sẵn viền trắng 8 ô, nên khối này chỉ cần không phá nó đi. */
.qrbox{display:flex;justify-content:center;background:#fff;
  padding:14px;border-radius:var(--r-sm);border:1px solid var(--border);
  margin:0 0 13px}
.qrbox img{width:228px;max-width:100%;height:auto;
  /* Ảnh GIF phóng to bị nhoè nếu trình duyệt làm mượt — nhoè là quét trượt. */
  image-rendering:pixelated}

/* Gõ tay là đường LUI, nên gập lại. Để mở sẵn thì hai đường cùng đòi chú ý,
   và người ta sẽ gõ tay 32 ký tự trong khi có sẵn mã quét ngay bên trên. */
.khoatay{margin:0 0 13px}
.khoatay > summary{cursor:pointer;font-size:13px;color:var(--muted);
  padding:6px 0;user-select:none}
.khoatay > summary:hover{color:var(--text)}
.khoatay[open] > summary{margin-bottom:8px}


/* Một dòng nhân viên: tên, tag vai (viền), tag cơ sở (khối màu, cùng lớp
   .cs-pill với thanh bên — xem shell.css). Xuống dòng được trên điện thoại. */
.nvdong{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; min-width:0; }
.nvdong b{ font-size:14px; font-weight:650; margin-right:2px; }
/* Dropdown "Làm ở": ô đóng trông như một ô nhập, chở tag các cơ sở đang chọn. */
.msel{ position:relative; }
.msel summary{ list-style:none; display:flex; align-items:center; gap:6px; min-height:40px;
  padding:6px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer; }
.msel summary::-webkit-details-marker{ display:none; }
.msel .msel-tags{ display:flex; flex-wrap:wrap; gap:5px; flex:1; }
.msel .chev{ font-size:9px; color:var(--muted); }
.msel .cs-pill{ font-size:12px; line-height:20px; }
/* Mở ra thì ĐẨY nội dung xuống, không nổi đè: bản nổi che mất nút Lưu ngay
   bên dưới, và cú bấm Lưu rơi vào ô tick — bỏ chọn đúng cơ sở vừa chọn. */
.msel-ds{ margin-top:4px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:6px; }
.msel-ds label{ display:flex; align-items:center; gap:8px; min-height:40px; padding:0 8px;
  border-radius:var(--r-sm); cursor:pointer; }
.msel-ds label:hover{ background:var(--surface-2); }
.msel-ds input{ width:18px; height:18px; }
.msel-ds .msel-ten{ color:var(--muted); font-size:13px; }