/* ==============================================================
   IIKANZI Trợ lý trả lời khách — trang NỘI BỘ
   Bố cục 2026-09-05 theo chỉ dẫn của anh Tường:
     • Header gánh hết đồ nghề (kênh · người trực · tài khoản · khách mới)
     • Thân trang chỉ còn hội thoại — không nút, không ghi chú
     • Đáy: hàng chủ đề → hàng câu sẵn, chỗ NGÓN CÁI với tới
     • Nút copy nằm MÉP PHẢI ngay dưới câu trả lời, icon hai tờ giấy
   Điện thoại và máy tính dùng chung một bố cục, chỉ giãn ra theo màn.
   ============================================================== */

:root {
  --ck-bg: #0f172a;
  --ck-panel: #16213c;
  --ck-panel-2: #1d2a4a;
  --ck-line: #2b3a5c;
  --ck-text: #e6edf7;
  --ck-dim: #93a4c3;
  --ck-accent: #38bdf8;
  --ck-accent-2: #0ea5e9;
  --ck-good: #34d399;
  --ck-warn: #f59e0b;
  --ck-bad: #f87171;
  --ck-radius: 14px;
}

* { box-sizing: border-box; }

/* ⚠️ Phải đứng TRƯỚC mọi rule có `display` — nếu không `display:flex/grid` đè
   thuộc tính `hidden` và các màn trạng thái hiện chồng lên nhau. */
[hidden] { display: none !important; }

body.ck-app {
  margin: 0;
  height: 100dvh;
  background: var(--ck-bg);
  color: var(--ck-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Header: logo trái · tên giữa · người dùng phải ---------- */
.ck-header {
  flex: none;
  /* 1fr | auto | 1fr → chữ giữa đứng ĐÚNG giữa dù hai bên rộng khác nhau
     (anh Tường 5/9: "Trợ lý iikanzi không căn giữa header rồi") */
  /* Lưới 1fr | auto | 1fr → khối giữa (Live · Đơn) đứng ĐÚNG GIỮA header dù hai bên rộng
     hẹp khác nhau. Cột 3 giữ nguyên bề rộng nội dung nên nút không bao giờ bị bóp;
     cột 1 được phép co (min-width:0 ở .ck-header-trai) nên chữ cắt "…" trước. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto 1fr; align-items: center; gap: 8px;
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--ck-panel); border-bottom: 1px solid var(--ck-line);
  position: relative; z-index: 30;
}
/* `1 1 auto` + min-width:0: khe ở 375px chỉ còn 9px, máy nào font rộng hơn một chút là tràn.
   Cho khối trái co lại và chữ tự cắt bằng "…" thay vì đẩy các nút ra ngoài màn. */
.ck-header-trai { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Logo đã bỏ nền (`cskh-logo.png`) — ⛔ KHÔNG đặt border-radius hay nền:
   trước đây logo là ảnh vuông có nền xanh đen nên phải bo góc; giờ nền trong suốt,
   bo góc chỉ cắt cụt phần hình. */
/* Anh Tường 7/9: *"logo ở header đang bị to quá, thu nhỏ lại cho cân đối"*.
   33px = gần bằng chiều cao nút việc (36px) nên logo át cả thanh; 24px cân với chữ 15px. */
.ck-logo-img { width: auto; height: 24px; display: block; flex: none; }
/* Anh Tường 5/9: *"chữ iikanzi cho về bên trái"* — bỏ hẳn kiểu neo giữa cũ
   (`position:absolute; left:50%`), giờ giữa header là chỗ của hai nút việc. */
.ck-title {
  font-size: 15px; letter-spacing: .3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Chữ IIKANZI màu TRẮNG. Đã thử cam #FF8A3D cho khớp logo, anh Tường xem rồi bảo
   *"chữ này nó cam nên xấu, để màu trắng"* (2026-09-05) → ⛔ đừng đổi lại cam.
   Trắng cũng để logo cam đứng một mình nổi hơn, không hai thứ cùng tranh màu. */
.ck-title strong { color: #FFFFFF; }

/* Giữa: hai nút việc — Live · Đặt hàng */
.ck-header-giua { display: flex; align-items: center; gap: 6px; flex: none; }
/* Hai nút việc. Anh Tường 5/9: *"nút live, đặt hàng sửa lại cho đẹp hơn"*.
   → Bỏ emoji (mỗi máy vẽ một kiểu, trông rẻ), dùng nét mảnh cùng tông với icon copy và
   mũi tên ‹ ›. Nền hơi sáng hơn thanh header một chút để nổi lên mà không chói. */
.ck-tab {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 999px;
  height: 36px; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ck-tab:hover { border-color: var(--ck-accent); color: var(--ck-accent); background: rgba(56,189,248,.10); }
.ck-tab:active { transform: translateY(1px); }
.ck-tab-icon { flex: none; }

/* Nút Live: chấm đỏ tự vẽ + vòng loang rất nhẹ, đủ để mắt biết đây là chỗ "đang phát" */
.ck-tab-live:hover { border-color: #f87171; color: #fca5a5; background: rgba(248,113,113,.10); }
.ck-cham-live {
  position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
}
.ck-cham-live::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(239,68,68,.55); animation: ck-loang 2.4s ease-out infinite;
}
@keyframes ck-loang {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Máy nào tắt hiệu ứng chuyển động thì để chấm đứng yên, đừng nháy. */
@media (prefers-reduced-motion: reduce) {
  .ck-cham-live::after { animation: none; opacity: .5; }
}

.ck-header-right { display: flex; align-items: center; gap: 6px; justify-self: end; }

/* Lời tạm trong hộp thoại chưa có ruột (mục ② ③ của kế hoạch) */
.ck-sap-co {
  margin: 0; padding: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ck-dim);
  background: var(--ck-panel-2); border: 1px dashed var(--ck-line); border-radius: 12px;
}

/* Người đang đăng nhập: chữ cái đầu trong ô vuông + tên (tên ẩn trên màn hẹp) */
.ck-nguoi {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 10px; padding: 4px 4px 4px 10px; color: var(--ck-text);
  font: inherit; max-width: 40vw;
}
.ck-nguoi:hover { border-color: var(--ck-accent); }
.ck-nguoi-chu {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: linear-gradient(180deg, var(--ck-accent), var(--ck-accent-2));
  color: #06283d; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-nguoi-ten {
  font-size: 13px; color: var(--ck-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ck-icon-btn {
  appearance: none; cursor: pointer; position: relative;
  background: var(--ck-panel-2); color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 10px;
  width: 38px; height: 36px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-icon-btn:hover { color: var(--ck-text); border-color: var(--ck-accent); }
/* chấm cam: có người đang chờ duyệt */
.ck-cham {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ck-warn); border: 2px solid var(--ck-panel);
}

/* Menu tài khoản thả xuống */
.ck-menu {
  position: absolute; top: 52px; right: 10px; z-index: 40;
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 12px; padding: 8px; min-width: 210px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.ck-menu-mail {
  font-size: 12px; color: var(--ck-dim); padding: 6px 8px 8px;
  border-bottom: 1px solid var(--ck-line); word-break: break-all;
}
.ck-menu-item {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--ck-text);
  padding: 10px 8px; font: inherit; font-size: 14px; border-radius: 8px;
}
.ck-menu-item:hover { background: rgba(56,189,248,.12); color: var(--ck-accent); }

/* ---------- Nút chung ---------- */
.ck-btn {
  appearance: none; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--ck-accent), var(--ck-accent-2));
  color: #06283d; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: var(--ck-radius);
  transition: transform .08s ease, filter .15s ease;
}
.ck-btn:hover { filter: brightness(1.07); }
.ck-btn:active { transform: translateY(1px); }
.ck-btn:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
.ck-btn-lg { width: 100%; padding: 15px 20px; font-size: 16.5px; }
.ck-btn-ghost {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 10px;
  padding: 9px 13px; font-size: 14px;
}
.ck-btn-ghost:hover { color: var(--ck-text); border-color: var(--ck-accent); }

/* ---------- Màn trạng thái ---------- */
.ck-state { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; overflow-y: auto; }
.ck-gate { max-width: 400px; text-align: center; }
.ck-gate-icon { font-size: 46px; display: block; margin-bottom: 10px; }
.ck-gate h2 { margin: 0 0 10px; font-size: 21px; }
.ck-gate p { margin: 0 0 22px; color: var(--ck-dim); font-size: 14.5px; }
.ck-gate-alt { margin-top: 14px; }
.ck-gate .ck-err { text-align: left; }
.ck-spinner {
  width: 30px; height: 30px; margin: 0 auto 12px;
  border: 3px solid var(--ck-line); border-top-color: var(--ck-accent);
  border-radius: 50%; animation: ck-spin .8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-state[data-state="loading"] { flex-direction: column; color: var(--ck-dim); }

.ck-input {
  width: 100%; display: block; margin-bottom: 12px;
  background: var(--ck-panel); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: var(--ck-radius);
  padding: 13px 14px; font: inherit; font-size: 16px; /* 16px: iOS khỏi tự phóng to */
  text-align: center;
}
.ck-input::placeholder { color: #5f7297; }
.ck-input:focus { outline: none; border-color: var(--ck-accent); box-shadow: 0 0 0 3px rgba(56,189,248,.15); }

/* ---------- Màn làm việc ---------- */
.ck-main {
  flex: 1; min-height: 0;
  width: 100%; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column;
}

/* Hội thoại */
.ck-chat {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 14px 4px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.ck-welcome { margin: auto 0; text-align: center; padding: 10px 4px; color: var(--ck-dim); }
.ck-welcome-icon { font-size: 40px; display: block; margin-bottom: 6px; }
.ck-welcome h2 { margin: 0 0 6px; font-size: 18px; color: var(--ck-text); }

/* Ba bước hướng dẫn — người trực mới vào ca nhìn phát biết làm gì */
.ck-huong-dan { display: grid; gap: 8px; max-width: 380px; margin: 0 auto; text-align: left; }
.ck-hd-dong {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--ck-panel); border: 1px solid var(--ck-line);
  border-radius: 10px; padding: 9px 11px; font-size: 13px; line-height: 1.5;
}
.ck-hd-dong span {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(56,189,248,.16); color: var(--ck-accent);
  font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Bong bóng */
.ck-msg { display: flex; flex-direction: column; gap: 5px; max-width: 100%; }
.ck-msg-khach { align-items: flex-end; }
.ck-msg-troly { align-items: flex-start; }
.ck-bubble {
  max-width: 90%;
  border-radius: 16px; padding: 11px 14px;
  font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.ck-msg-khach .ck-bubble {
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-bottom-right-radius: 5px;
}
.ck-msg-troly .ck-bubble {
  background: rgba(56,189,248,.09); border: 1px solid rgba(56,189,248,.32);
  border-bottom-left-radius: 5px;
}
.ck-bubble.is-loi { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.4); color: var(--ck-bad); }

/* Con trỏ nhấp nháy lúc chữ đang chảy */
.ck-bubble-text.is-typing::after {
  content: "▍"; margin-left: 1px; color: var(--ck-accent);
  animation: ck-nhay 1s steps(2) infinite;
}
@keyframes ck-nhay { 50% { opacity: 0; } }

/* Cờ đỏ trong bong bóng */
.ck-flags { display: grid; gap: 6px; margin-bottom: 9px; }
.ck-flag {
  background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.45);
  color: #fcd9a0; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45;
}
.ck-flag b { color: var(--ck-warn); }

/* Hàng dưới câu trả lời: nhãn bên trái, NÚT COPY DÍNH MÉP PHẢI (tầm ngón cái) */
.ck-msg-troly .ck-msg-tools {
  width: 90%;
  display: flex; align-items: center; gap: 8px;
  padding-left: 3px;
}
.ck-msg-tag { font-size: 11.5px; color: var(--ck-dim); }
.ck-msg-lang { padding: 2px 8px; border-radius: 999px; background: rgba(56,189,248,.12); color: var(--ck-accent); }
.ck-src { font-size: 11.5px; color: var(--ck-dim); }
.ck-src summary { cursor: pointer; list-style: none; user-select: none; }
.ck-src summary::-webkit-details-marker { display: none; }
.ck-src-list { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; word-break: break-all; }

.ck-copy {
  appearance: none; cursor: pointer;
  margin-left: auto;                    /* ⬅️ đẩy nút copy sang mép phải */
  background: var(--ck-panel-2); color: var(--ck-accent);
  border: 1px solid rgba(56,189,248,.4); border-radius: 10px;
  width: 40px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.ck-copy svg { width: 17px; height: 17px; }
.ck-copy:hover { background: rgba(56,189,248,.16); }
.ck-copy:active { transform: translateY(1px); }
.ck-copy.is-done { background: var(--ck-good); border-color: var(--ck-good); color: #06283d; }

/* ---------- Ô nhập ---------- */
.ck-composer { flex: none; padding: 8px 14px 6px; }
.ck-composer-row {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--ck-panel); border: 1px solid var(--ck-line);
  border-radius: 16px; padding: 5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ck-composer-row:focus-within { border-color: var(--ck-accent); box-shadow: 0 0 0 3px rgba(56,189,248,.13); }
.ck-composer-input {
  flex: 1; min-width: 0; resize: none;
  background: transparent; border: 0; color: var(--ck-text);
  font: inherit; font-size: 16px; /* 16px: iOS khỏi tự phóng to */
  line-height: 1.5; padding: 8px 4px; max-height: 180px;
  /* ⚠️ min-height BẮT BUỘC: lúc trang vừa tải, khung làm việc còn `hidden` nên
     scrollHeight đo ra 0 → ô nhập bị dẹp lép, chữ gợi ý cắt ngang (đã dính 5/9). */
  min-height: 40px;
}
.ck-composer-input:focus { outline: none; }
.ck-composer-input::placeholder { color: #5f7297; }
/* Chọn kênh — cạnh ô dán tin. ⚠️ PHẢI `appearance:none`: để mặc định thì macOS/iOS vẽ ô
   NỀN TRẮNG chữ đen, lệch hàng, chọi hẳn với nền tối (anh Tường 5/9 chỉ ra).
   ⚠️ Rule này từng bị mất khi viết lại khối header → select rơi về kiểu hệ điều hành. */
.ck-kenh {
  appearance: none; -webkit-appearance: none;
  flex: none; align-self: flex-end; height: 38px;
  background-color: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 10px;
  /* 🪤 16px chứ KHÔNG phải 12.5px — xem ghi chú chống phóng to của `.ck-ql-than .ck-input`.
     Ô hẹp nên bù bằng cách bóp chữ lại, không bóp cỡ chữ. */
  padding: 0 20px 0 9px; font: inherit; font-size: 16px; max-width: 104px;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393a4c3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 10px;
}
@media (pointer: fine) { .ck-kenh { font-size: 12.5px; padding: 0 22px 0 10px; } }
.ck-kenh:hover { border-color: var(--ck-accent); }
.ck-kenh:focus { outline: none; border-color: var(--ck-accent); }
.ck-kenh option { background: var(--ck-panel-2); color: var(--ck-text); }

/* Nút Khách mới — đứng đầu hàng nhập. Nền sáng hơn hẳn vì emoji chổi trên nền tối
   nhìn chìm nghỉm (anh Tường 5/9: "cái chổi bị tối quá"). */
.ck-mini-btn {
  appearance: none; cursor: pointer; flex: none; align-self: flex-end; height: 38px;
  background: rgba(56,189,248,.14); color: var(--ck-text);
  border: 1px solid rgba(56,189,248,.45); border-radius: 10px;
  width: 40px; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-mini-btn:hover { background: rgba(56,189,248,.24); }
.ck-mini-btn:active { transform: translateY(1px); }

.ck-send {
  appearance: none; border: 0; cursor: pointer; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, var(--ck-accent), var(--ck-accent-2));
  color: #06283d; font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-send:hover { filter: brightness(1.07); }
.ck-send:disabled { opacity: .55; cursor: default; }

.ck-err {
  margin: 0 0 8px; font-size: 13.5px; color: var(--ck-bad);
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35);
  border-radius: 10px; padding: 8px 11px;
}

/* Câu báo TIN VUI (đã gửi thư đặt lại mật khẩu…) — cùng khuôn với `.ck-err`, đổi màu xanh. */
.ck-ok {
  margin: 0 0 8px; font-size: 13.5px; color: var(--ck-good);
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.35);
  border-radius: 10px; padding: 8px 11px; text-align: left;
}

/* ---------- Màn đăng nhập (anh Tường 8/9 chốt lại thứ tự: Google TRÊN, tài khoản DƯỚI) ---------- */

/* Nút Google nền TRẮNG chữ đen — kiểu Google khuyên dùng, và trên nền tối của trang thì nó
   nổi hẳn lên đúng vai "đường đi đầu tiên". Logo là SVG vẽ thẳng trong HTML, không tải mạng. */
/* ⛔ Đã gỡ `.ck-google` + `.ck-google-g` (anh Tường 8/9 đợt 3): bỏ hẳn đăng nhập Google. */

/* Gạch ngang có chữ ở giữa, tách hai đường đăng nhập. */
/* ⛔ Đã gỡ `.ck-dn-hoac` (gạch "hoặc dùng tài khoản"): không còn hai đường để phân cách. */

/* Ô nhập dùng chung `.ck-input` (đã 16px sẵn — ⛔ đừng bóp nhỏ, iOS sẽ tự phóng to trang). */
.ck-dn { margin-bottom: 10px; }
.ck-dn .ck-input { text-align: left; }        /* email/mật khẩu đọc từ trái, không căn giữa */
/* Hai nút NGANG HÀNG. "Đăng nhập" rộng gấp rưỡi "Đăng ký" để mắt bắt đúng nút chính trước. */
.ck-dn-nut { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; }
.ck-dn-nut .ck-btn, .ck-dn-nut .ck-btn-ghost { min-height: 50px; font-size: 15.5px; padding: 12px 10px; }
/* Nút đặt lại mật khẩu — ẩn sẵn, chỉ hiện khi đăng nhập hỏng. */
.ck-dn-quen { width: 100%; margin-top: 6px; min-height: 46px; }
.ck-dn-quen[hidden] { display: none; }
/* Dòng chỉ đường cho người quen bấm Google, chưa từng có mật khẩu (anh Tường 8/9 đợt 2).
   Chữ nhỏ + mờ để KHÔNG tranh chỗ với hai nút chính phía trên, nhưng vẫn đọc được:
   ⛔ đừng hạ dưới 12,5px, đây là câu người trực phải đọc HIỂU mới làm theo được. */
.ck-dn-chi {
  margin: 8px 0 0; text-align: left; font-size: 12.5px; line-height: 1.55; color: var(--ck-dim);
}
.ck-dn-chi b { color: var(--ck-text); font-weight: 600; }

/* ---------- Kho câu sẵn ở ĐÁY ---------- */
.ck-kho {
  flex: none;
  border-top: 1px solid var(--ck-line);
  background: var(--ck-panel);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
/* Khung một hàng: nút ‹ bên trái · vùng cuộn ở giữa · nút › bên phải.
   Anh Tường 5/9: *"hai bên trái phải có hai nút <> với góc lớn hơn 120 độ cho đẹp và gọn"*.
   Nút chỉ hiện khi hàng thật sự dài hơn màn — JS bật/tắt bằng thuộc tính hidden. */
.ck-hang { display: flex; align-items: stretch; position: relative; }
.ck-hang + .ck-hang { border-top: 1px solid var(--ck-line); }
.ck-hang > [data-truot-vung] { flex: 1; min-width: 0; }

.ck-mui {
  appearance: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 30px; padding: 0; border: 0;
  background: var(--ck-panel-2); color: var(--ck-dim);
}
.ck-hang:has(.ck-kho-nhom) .ck-mui { background: var(--ck-panel); }
.ck-mui-trai { border-right: 1px solid var(--ck-line); }
.ck-mui-phai { border-left: 1px solid var(--ck-line); }
.ck-mui:hover { color: var(--ck-accent); }
.ck-mui:active { color: var(--ck-accent); transform: scale(.9); }
.ck-mui[disabled] { opacity: .3; cursor: default; }

/* hàng câu con — nằm TRÊN hàng chủ đề để ngón cái không che mất lúc bấm */
.ck-kho-cau {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  padding: 9px 12px;
  background: var(--ck-panel-2);
}
.ck-kho-cau::-webkit-scrollbar { display: none; }
/* Khối chữ nhật bo góc nhẹ, chữ ngắn — anh Tường 5/9: "chữ dài quá, chiếm diện tích" */
.ck-cau {
  appearance: none; cursor: pointer; flex: none;
  background: var(--ck-bg); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; white-space: nowrap;
}
.ck-cau:hover { border-color: var(--ck-accent); color: var(--ck-accent); }
.ck-cau:active { transform: translateY(1px); }

.ck-kho-nhom {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 12px;
}
.ck-kho-nhom::-webkit-scrollbar { display: none; }
.ck-nhom {
  appearance: none; cursor: pointer; flex: none;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; white-space: nowrap;
}
.ck-nhom:hover { color: var(--ck-text); }
.ck-nhom.is-mo {
  background: rgba(56,189,248,.14); color: var(--ck-accent);
  border-color: rgba(56,189,248,.5); font-weight: 600;
}

/* ---------- Tấm phủ: bảng người trực ---------- */
.ck-tam {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,10,24,.72);
  display: flex; align-items: flex-start; justify-content: center;
  /* 🪤 Anh Tường 6/9: *"nút gửi đơn bị che, không ấn được"*. Nguyên nhân: hộp cao `90vh`
     mà lớp nền còn cộng thêm 34px trên + 12px dưới ⇒ tổng > màn hình, phần đuôi hộp
     (đúng chỗ nút Ghi vào sổ) tụt xuống DƯỚI mép màn, mà lớp nền lại không cuộn được.
     Vá: lớp nền tự cuộn được + chừa mép an toàn của iPhone. */
  padding: 34px 12px max(12px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
/* Anh Tường 6/9: *"vào bên trong hộp thoại để điền, trước khi điền nó đang có thể vuốt trái
   vuốt phải — đừng cho vuốt trái phải, chỉ lên xuống nếu màn hình nhỏ thôi"*.
   `touch-action: pan-y` = ngón tay chỉ kéo được lên/xuống, vuốt ngang bị bỏ qua hẳn.
   `overscroll-behavior: contain` = cuộn hết hộp thì DỪNG, không đẩy sang trang nền. */
.ck-tam { touch-action: pan-y; overscroll-behavior: contain; }
/* Lưới an toàn cho bẫy "kẹt lệch ngang": `touch-action: pan-y` chặn vuốt ngang, nên NẾU còn
   chỗ nào lỡ tràn ra thì phải CẮT chứ đừng cho cuộn ngang — cuộn ra rồi là không về được. */
.ck-tam, .ck-tam-hop, .ck-tam-than { overflow-x: hidden; }

.ck-tam-hop {
  touch-action: pan-y; overscroll-behavior: contain;
  width: 100%; max-width: 560px; overflow-y: auto;
  /* `dvh` = chiều cao THẬT còn lại sau khi trừ thanh địa chỉ trình duyệt điện thoại.
     `vh` tính cả phần bị thanh đó che ⇒ đáy hộp nằm ngoài màn. Dòng `vh` để dự phòng
     cho trình duyệt cũ chưa biết `dvh`. */
  max-height: 90vh;
  max-height: calc(100dvh - 46px);
  background: var(--ck-panel); border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius); box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.ck-tam-dau {
  position: sticky; top: 0; background: var(--ck-panel);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-bottom: 1px solid var(--ck-line);
  font-size: 14.5px; font-weight: 700; letter-spacing: .3px;
}
.ck-tam-than { padding: 11px 13px 18px; display: grid; gap: 8px; }

/* ---------- Tấm phủ kiểu TRANG (màn Đơn hàng) ---------- */
/* Anh Tường 7/9: *"vẫn nằm trong trang trợ lý nhưng không phải mở hộp thoại"*.
   `ck-trang` gỡ nền mờ + viền hộp, cho ruột chiếm trọn màn hình. Vì không còn nền để
   bấm ra ngoài, lối thoát DUY NHẤT là nút "← Trợ lý" ⇒ ⛔ đừng gỡ nút đó. */
.ck-trang { padding: 0; background: var(--ck-bg); overflow: hidden; }
.ck-trang .ck-tam-hop {
  max-width: none; width: 100%;
  max-height: 100vh; max-height: 100dvh; height: 100dvh;
  border: 0; border-radius: 0; box-shadow: none; background: var(--ck-bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.ck-trang .ck-tam-dau { background: var(--ck-bg); }
/* 🪤 iPhone 15 (anh Tường 8/9): *"block quản lý bị đẩy lên cao chỗ tai thỏ nên không thoát ra
   được"*. Nguyên nhân: `.ck-trang` gỡ sạch `padding` của lớp nền, mà trang khai
   `viewport-fit=cover` ⇒ header dính (chứa nút "← Trợ lý" — LỐI THOÁT DUY NHẤT của màn này)
   nằm lọt dưới Dynamic Island, bấm không trúng. Header tự chừa mép an toàn; phần đệm mang
   màu nền nên nhìn vẫn liền khối. Máy không tai thỏ thì inset = 0, padding giữ nguyên 10px. */
.ck-trang .ck-tam-dau { padding-top: calc(10px + env(safe-area-inset-top)); }
.ck-ve {
  appearance: none; cursor: pointer; flex: none;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 9px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.ck-ve:hover { color: var(--ck-text); border-color: var(--ck-accent); }
.ck-ve-bu { width: 62px; flex: none; }   /* giữ tiêu đề đứng giữa, cân với nút bên trái */
@media (max-width: 430px) { .ck-ve-bu { width: 0; } }

/* Màn rộng: bố cục RIÊNG 2 cột, không kéo dài cột hẹp của điện thoại ra giữa màn hình. */
@media (min-width: 900px) {
  .ck-trang .ck-tam-than { max-width: 1180px; margin: 0 auto; width: 100%; padding: 18px 24px 30px; }
  .ck-trang .ck-don-the { max-width: 420px; }
  /* Màn GHI ĐƠN: nửa trái nhập đơn, nửa phải danh sách đơn gần đây (anh Tường 7/9).
     ⛔ Đừng cho form tự chia 2 cột ở đây nữa: cột trái chỉ còn ~600px, mà trong form đã có
     sẵn các cặp ô đôi (mã bưu điện · điện thoại) ⇒ chia tiếp là mỗi ô còn ~140px, chật. */
  .ck-trang [data-don-man="ghi"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 26px; align-items: start;
  }
  .ck-trang .ck-ghi-phai {
    position: sticky; top: 0; max-height: calc(100dvh - 132px); overflow-y: auto;
    display: grid; gap: 12px; align-content: start;
  }
  .ck-trang .ck-don-gan { margin-top: 0; border-top: 0; padding-top: 0; }
  .ck-trang .ck-don-gan-ten { font-size: 13.5px; color: var(--ck-text); }

  /* Màn QUẢN LÝ: nửa trái danh sách đơn, nửa phải ô sửa của đơn đang chọn. */
  /* Anh Tường 7/9: hai cột phải ĐỀU NHAU (trước là 1fr + 380px, nhìn lệch hẳn). */
  .ck-ql-khung {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px; align-items: start;
  }
  .ck-ql-chitiet {
    display: block; position: sticky; top: 0;
    background: var(--ck-panel-2); border: 1px solid var(--ck-line);
    border-radius: 12px; padding: 13px;
    max-height: calc(100dvh - 132px); overflow-y: auto;
  }
  .ck-ql-chitiet .ck-ql-than { border-top: 0; padding: 0; }
  .ck-ql-mot.is-chon { border-color: var(--ck-accent); }
  .ck-trang .ck-ql-tim { max-width: 460px; }
}

.ck-person {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 12px; padding: 10px 12px;
}
.ck-person-info { flex: 1; min-width: 150px; }
.ck-person-ten { font-size: 14.5px; font-weight: 600; }
.ck-person-mail { font-size: 12.5px; color: var(--ck-dim); word-break: break-all; }
.ck-person-trangthai { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ck-person-trangthai.on { background: rgba(52,211,153,.15); color: var(--ck-good); }
.ck-person-trangthai.off { background: rgba(245,158,11,.15); color: var(--ck-warn); }
.ck-person .ck-btn { padding: 8px 14px; font-size: 13.5px; }
/* Ô chọn loại cộng tác viên — để hẹp, tên loại đã ngắn; hàng người trực vẫn vừa một dòng
   trên máy 375px (tên + trạng thái + loại + nút). */
/* Ô gõ giá dịch vụ — chỉ hiện khi chọn món nhóm "Dịch vụ" (giá mỗi hồ sơ một khác).
   Chiếm trọn dòng dưới cho dễ bấm; ô chọn món ở dòng trên giữ nguyên bề ngang. */
.ck-dong-mon .ck-gia-tay { flex: 1 0 100%; }

.ck-person-loai {
  font-size: 12.5px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--ck-vien); background: var(--ck-nen-2); color: var(--ck-chu);
  max-width: 140px;
}
.ck-admin-empty { font-size: 13.5px; color: var(--ck-dim); margin: 0; }

/* ---------- Hộp lịch ca live ---------- */
/* Thanh tuần: ‹ tháng · khoảng ngày › (anh Tường 6/9) */
.ck-tuan {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.ck-tuan-nut {
  appearance: none; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ck-panel-2); color: var(--ck-dim);
  border: 1px solid var(--ck-line);
}
.ck-tuan-nut:hover { color: var(--ck-accent); border-color: var(--ck-accent); }
.ck-tuan-nut:active { transform: scale(.92); }
.ck-tuan-giua { text-align: center; min-width: 0; }
.ck-tuan-thang { font-size: 14px; font-weight: 700; }
.ck-tuan-ngay { font-size: 12px; color: var(--ck-dim); margin-top: 1px; }
/* Khung xám lúc chờ máy chủ trả "ai lấy ca nào" — có khung sẵn thì đỡ cảm giác đứng hình */
.ck-ca.dang-cho { opacity: .45; pointer-events: none; }

/* 7 ngày CHIA ĐỀU vừa một màn — anh Tường 6/9: *"7 này trong tuần nó đang không gọn vào một
   màn hình"*. Trước để `flex` + `min-width:62px` ⇒ 7 nút ăn 476px, tràn khỏi màn 375px phải
   cuộn ngang. Giờ lưới 7 cột bằng nhau, cột tự co theo màn. */
.ck-ngay-hang {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ck-line);
}
.ck-ngay {
  appearance: none; cursor: pointer; min-width: 0;
  display: grid; gap: 1px; justify-items: center;
  background: var(--ck-panel-2); color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 10px;
  padding: 7px 2px; font: inherit;
}
.ck-ngay:hover { border-color: var(--ck-accent); color: var(--ck-text); }
/* Hôm nay: viền sáng hơn để nhận ra ngay, kể cả khi đang xem tuần khác */
.ck-ngay.la-hom-nay { border-color: rgba(56,189,248,.55); }
.ck-ngay.la-hom-nay .ck-ngay-so { color: var(--ck-accent); }
.ck-ngay.is-mo {
  background: rgba(56,189,248,.14); color: var(--ck-accent);
  border-color: rgba(56,189,248,.5);
}
.ck-ngay-thu { font-size: 11px; white-space: nowrap; }
.ck-ngay-so { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
/* Tháng in nhỏ cạnh số ngày, chỉ ở ngày đầu tháng — đủ để thấy chỗ chuyển tháng
   mà không chiếm chỗ như "1/9" (cột chỉ rộng ~43px). */
.ck-ngay-thangnho { font-size: 9.5px; font-weight: 500; font-style: normal; opacity: .6; }
/* Chấm đếm ca: cột chỉ còn ~43px nên KHÔNG ghi được "1 ca" — chỉ số, hoặc dấu chấm mờ */
.ck-ngay-cham { font-size: 10px; opacity: .8; line-height: 1.2; }
.ck-ngay.is-mo .ck-ngay-cham { opacity: 1; }

.ck-ca-ds { display: grid; gap: 8px; }
.ck-ca {
  appearance: none; text-align: left; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 12px;
  padding: 11px 13px; font: inherit; font-size: 14px; cursor: pointer;
}
.ck-ca:hover:not(:disabled) { border-color: var(--ck-accent); }
/* Giờ giữ nguyên một dòng, phần chữ bên phải mới được xuống dòng — không thì "12:00 – 13:00"
   bị bẻ đôi trông như hai ca (đã dính 5/9). */
.ck-ca > span:first-child { flex: none; white-space: nowrap; }
.ck-ca-gio { font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-ca-nhan { font-size: 12px; color: var(--ck-dim); font-weight: 400; margin-left: 7px; }
.ck-ca-ai { font-size: 12.5px; color: var(--ck-dim); text-align: right; flex: 1; min-width: 0; }

/* Ca của mình: xanh, bấm lần nữa là bỏ */
.ck-ca.la-toi {
  background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.45);
}
.ck-ca.la-toi .ck-ca-ai { color: var(--ck-good); font-weight: 600; }
/* Ca người khác đã lấy, hoặc ca đã qua: không bấm được */
.ck-ca:disabled { cursor: default; opacity: .55; }
.ck-ca.la-nguoi-khac { background: transparent; }

.ck-ca-chan { margin: 14px 0 0; font-size: 12.5px; color: var(--ck-dim); text-align: center; }
.ck-ca-chan b { color: var(--ck-text); }

/* ---------- Hộp đặt hàng ---------- */
/* Anh Tường 5/9: *"các ô đang to quá… cho chữ tiêu đề và chữ trong ô nó hài hoà… để nó gọn
   lại vào một màn hình"*. Cách làm: bóp PADDING và khoảng cách (chỗ tốn chiều cao thật),
   giữ hai ô ngắn nằm cạnh nhau kể cả trên điện thoại, chữ nhãn nhỏ hơn chữ trong ô. */
.ck-don { display: grid; gap: 7px; }
/* Anh Tường 7/9: *"cái nút ghi vào sổ đơn em để cao và thoáng chút đi, giờ đằng nào cũng có
   ở phía dưới rồi nên để ra cho thoáng"* — nút đã ghim sẵn đáy khung cuộn nên hết lo bị khuất
   ⇒ cho cao hơn, chữ to hơn. ⛔ Đừng gỡ phần ghim đáy ở cuối file. */
.ck-don .ck-btn-lg { padding: 11px 16px; font-size: 14.5px; }
.ck-don [data-don-gui] { padding: 17px 20px; font-size: 16px; }
.ck-o { display: grid; gap: 3px; }
.ck-o-ten { font-size: 11.5px; color: var(--ck-dim); font-weight: 600; letter-spacing: .2px; }
.ck-o-ten b { color: #f87171; font-weight: 700; }
/* ⛔ KHÔNG cho xuống một cột trên điện thoại: bốn ô ngắn thành bốn hàng là form tràn khỏi
   màn ngay. Ở 375px mỗi cột vẫn còn ~150px, đủ cho ô chọn. */
/* 🪤 `1fr` KHÔNG cho con co dưới bề rộng nội tại của nó — ô ngày của iOS rộng hơn cột ⇒ đè
   sang ô bên. `minmax(0, 1fr)` + `min-width: 0` mới ép co thật (cùng họ với bẫy 7). */
.ck-o-doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ck-o { min-width: 0; }
.ck-o .ck-input, .ck-o .ck-chon { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Ô trong form: gọn hơn hẳn ô ở màn đăng nhập (căn giữa, cao 48px) */
.ck-don .ck-input, .ck-don .ck-chon {
  margin-bottom: 0; text-align: left;
  padding: 8px 11px; border-radius: 10px;
}
/* ⚠️ Chữ trong ô phải >= 16px trên máy CẢM ỨNG, không thì iOS tự phóng to trang lúc bấm vào ô.
   Máy có chuột thì không dính chuyện đó nên để 14px cho gọn mắt. */
@media (pointer: fine) {
  .ck-don .ck-input, .ck-don .ck-chon { font-size: 14px; }
}
.ck-don textarea.ck-input { line-height: 1.45; }

/* MỌI ô trong form đều nền xám sáng — anh Tường 5/9 lần đầu: *"các ô phải điền em để nền hơi
   xám trắng"*, rồi chốt tiếp: *"ô streamer, ghi chú cũng cho xám đi"* ⇒ để đều tất cả.
   Cái đánh dấu ô BẮT BUỘC giờ là **dấu * đỏ** ở nhãn, không phải màu nền nữa.

   ⚠️ Không làm trắng hẳn được: chữ trong ô là chữ SÁNG trên nền tối, nền trắng thì không đọc nổi.
   ⚠️ Phải dùng `background-color`, KHÔNG dùng `background` gộp — dạng gộp xoá luôn
      `background-image` là hình mũi tên của ô chọn (đã dính: ô Kênh mất mũi tên). */
.ck-don .ck-input, .ck-don .ck-chon {
  background-color: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.22);
}


/* Ô chọn: PHẢI appearance:none, không thì macOS/iOS vẽ nền trắng chữ đen chọi hẳn nền tối
   (đã dính ở ô chọn kênh 5/9 — xem .ck-kenh). */
.ck-chon {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393a4c3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.ck-chon option { background: var(--ck-panel-2); color: var(--ck-text); }

/* `flex-wrap` để ô giá dịch vụ tụt xuống dòng dưới thay vì bóp nát ô chọn món trên máy 375px. */
.ck-dong-mon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.ck-dong-mon .ck-chon { flex: 1; min-width: 0; }
.ck-dong-mon .ck-sl { flex: none; width: 50px; text-align: center; padding-left: 4px; padding-right: 4px; }
.ck-bo-mon {
  appearance: none; cursor: pointer; flex: none;
  width: 30px; height: 35px; border-radius: 10px;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); font-size: 15px; line-height: 1;
}
.ck-bo-mon:hover { color: #f87171; border-color: #f87171; }
.ck-them-mon { justify-self: start; font-size: 12.5px; padding: 4px 9px; }

/* Tổng tiền — người trực nhìn được ngay tiền hàng và hoa hồng của đơn này */
.ck-tong {
  display: grid; gap: 2px;
  background: rgba(56,189,248,.09); border: 1px solid rgba(56,189,248,.3);
  border-radius: 10px; padding: 8px 11px; font-size: 13px;
}
.ck-tong-dong { display: flex; justify-content: space-between; gap: 10px; }
.ck-tong-dong b { font-variant-numeric: tabular-nums; }
.ck-tong-hh { color: var(--ck-accent); }
.ck-tong-ghi { font-size: 11.5px; color: var(--ck-dim); line-height: 1.4; margin-top: 2px; }

/* Ba ô tick tự xếp theo bề ngang: 375px ra 2 cột, màn rộng ra 3 cột — không vỡ chữ. */
.ck-tick-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 4px 8px; }
.ck-tick { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.ck-tick input { width: 16px; height: 16px; accent-color: var(--ck-accent); flex: none; }

.ck-don-xong {
  margin: 0; padding: 8px 11px; border-radius: 10px; font-size: 13px;
  background: rgba(52,211,153,.13); border: 1px solid rgba(52,211,153,.42); color: var(--ck-good);
}
/* Anh Tường 7/9: *"dưới chỗ nút báo đơn có đường kẻ phân cách, cho nó cách xa một chút"*.
   Ở điện thoại khối này rơi ngay dưới nút "Ghi vào sổ đơn" ⇒ nới hẳn khoảng cách.
   (Máy tính khối này nằm cột phải, `.ck-trang .ck-don-gan` ở khối 900px đã gỡ viền + margin.) */
.ck-don-gan { margin-top: 34px; border-top: 1px solid var(--ck-line); padding-top: 16px; }
.ck-don-gan-ten { font-size: 12.5px; color: var(--ck-dim); font-weight: 600; margin-bottom: 8px; }
/* Ô đơn gần đây — bấm được, mở thẳng đơn đó ở màn Quản lý (anh Tường 7/9). */
.ck-don-mot {
  display: grid; gap: 3px; width: 100%; text-align: left;
  appearance: none; cursor: pointer; font: inherit; color: var(--ck-text);
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; font-size: 13px;
}
.ck-don-mot:hover { border-color: var(--ck-accent); }
.ck-don-mot-dau { display: flex; align-items: center; gap: 7px; }
.ck-don-mot-stt { color: var(--ck-dim); font-variant-numeric: tabular-nums; }
.ck-don-mot-ma { font-weight: 600; }
.ck-don-mot-tt { margin-left: auto; font-size: 12px; flex: none; }
.ck-don-mot-ten { font-weight: 600; }
.ck-don-mot-mon { color: var(--ck-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-don-mot-chan { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
/* Anh Tường 7/9: *"đơn gần đây ở điện thoại đang bị cao quá, cái hàng này có khi để một hàng
   thôi"* ⇒ ở khổ hẹp gộp tên món và tiền vào MỘT hàng (món trái, tiền + người nhập phải).
   🪤 Con của grid mặc định `min-width: auto` (bẫy 7) ⇒ phải cho co, không thì món dài đẩy
   rộng cả ô thay vì cắt bằng `…`. */
.ck-don-mot-duoi { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.ck-don-mot-duoi .ck-don-mot-mon { flex: 1 1 auto; min-width: 0; }
.ck-don-mot-duoi .ck-don-mot-chan { flex: none; justify-content: flex-end; }
/* Máy tính giữ nguyên 2 dòng — cột phải ở đó rộng 555px, không cần tiết kiệm chiều cao. */
@media (min-width: 900px) {
  .ck-don-mot-duoi { display: grid; gap: 3px; }
  .ck-don-mot-duoi .ck-don-mot-chan { justify-content: space-between; }
}
.ck-don-mot-tien { font-variant-numeric: tabular-nums; color: var(--ck-good); }
.ck-don-mot-tien.is-no { color: var(--ck-warn); }
.ck-don-mot-ai { color: var(--ck-dim); }

/* Khung chi tiết đơn (cột phải màn Quản lý) — điện thoại KHÔNG dùng: ô sửa mở ngay
   dưới dòng đơn, nên khung này ẩn hẳn và chỉ bật lên ở màn rộng.
   🪤 Phải viết bằng `max-width` chứ KHÔNG phải `.ck-ql-chitiet { display:none }` trần: khối
   này nằm SAU khối `@media (min-width: 900px)` trong file ⇒ rule trần sẽ đè mất cột phải
   (đã dính 7/9: màn Quản lý ở máy tính chỉ hiện một cột). */
@media (max-width: 899.98px) { .ck-ql-chitiet { display: none; } }
/* Ô sửa khi nằm trong HỘP THOẠI điện thoại: bỏ viền trên + thụt lề của kiểu "mở xổ". */
[data-qlsua-noi] .ck-ql-than { border-top: 0; padding: 0; }
[data-qlsua-lop] .ck-tam-than { padding: 13px 13px 20px; }
/* Anh Tường 8/9: *"để nó hơi bám phía dưới màn hình chút cho dễ làm việc, nếu có bàn phím thì
   hộp thoại bám sát bàn phím"* ⇒ neo hộp xuống ĐÁY tấm phủ, còn chiều cao tấm phủ thì
   `qlHopTheoBanPhim()` trong cskh.js ép theo `visualViewport` mỗi khi bàn phím bật/tắt.
   Ngón cái với tới nút bấm dễ hơn hẳn so với hộp neo trên đầu màn. */
[data-qlsua-lop] { align-items: flex-end; padding-top: 12px; }
[data-qlsua-lop] .ck-tam-hop { max-height: 100%; }
.ck-ql-goi { color: var(--ck-dim); font-size: 13px; margin: 0; line-height: 1.5; }
/* 🪤 `.ck-tam-than` là grid ⇒ con của nó mặc định `min-width: auto`, KHÔNG co lại được, nên
   dòng đơn dài đẩy danh sách rộng hơn màn (đo 7/9: 379px trong khung 349px, chữ bị cắt).
   Hai tầng div mới của màn Quản lý phải tự cho phép co. */
.ck-ql-khung, .ck-ql-cot, [data-don-man] { min-width: 0; }

/* ---------- Trang cá nhân ---------- */
.ck-cn-nhom { margin-bottom: 14px; }
.ck-cn-nhom:last-child { margin-bottom: 0; }
.ck-cn-ten {
  font-size: 12px; color: var(--ck-dim); font-weight: 700; letter-spacing: .3px;
  margin-bottom: 7px; text-transform: uppercase;
}
.ck-cn-o {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px;
}
.ck-cn-the {
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 12px; padding: 10px 12px;
}
.ck-cn-so { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ck-cn-nhan { font-size: 11.5px; color: var(--ck-dim); margin-top: 2px; }
/* Ô tiền — thứ người trực mở trang ra để xem */
.ck-cn-the.la-tien {
  background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4);
  grid-column: 1 / -1;
}
.ck-cn-the.la-tien .ck-cn-so { color: var(--ck-good); font-size: 24px; }
.ck-cn-chitiet { display: grid; gap: 3px; margin-top: 8px; font-size: 12.5px; }
.ck-cn-dong { display: flex; justify-content: space-between; gap: 10px; color: var(--ck-dim); }
.ck-cn-dong b { color: var(--ck-text); font-variant-numeric: tabular-nums; font-weight: 600; }
.ck-cn-cho {
  margin-top: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); color: var(--ck-warn);
}

/* ---------- Trang cá nhân: phần thêm cho khối A→E (2026-09-06) ---------- */
/* Đầu hộp: ‹ tháng › + nút đóng (khối E — xem lại tháng cũ) */
.ck-cn-dieu { display: flex; align-items: center; gap: 4px; }
.ck-cn-dieu b { font-size: 13px; min-width: 58px; text-align: center; color: var(--ck-dim); font-weight: 600; }
.ck-cn-mui {
  width: 26px; height: 26px; flex: none; line-height: 1;
  background: var(--ck-panel-2); color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 8px;
  font-size: 16px; cursor: pointer;
}
.ck-cn-mui:hover { color: var(--ck-accent); border-color: var(--ck-accent); }

/* Dòng chi tiết tiền: nhãn + ghi chú nhỏ bên trái, số bên phải.
   Ghi chú là thứ khiến người ta TIN con số — "12 đơn mang tên tôi" — nên đừng bỏ đi cho gọn. */
.ck-cn-dong { align-items: flex-start; }
.ck-cn-dong-trai { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ck-cn-dong-trai small { font-size: 11px; color: #6f81a3; line-height: 1.35; }
.ck-cn-chitiet { gap: 7px; }

/* Ô "số đơn cá nhân" và ô "đội đã đạt ngưỡng" — hai con số cần nổi hơn ô thường */
.ck-cn-the.la-nhan { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.35); }
.ck-cn-the.la-nhan .ck-cn-so { color: var(--ck-accent); }
.ck-cn-the.la-dat { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.35); }
.ck-cn-the.la-dat .ck-cn-so { color: var(--ck-good); }

/* Khối bấm mở: danh sách đơn · cách tính tiền */
.ck-cn-xem {
  margin-top: 10px; background: var(--ck-panel-2);
  border: 1px solid var(--ck-line); border-radius: 12px; padding: 9px 12px;
}
.ck-cn-xem > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ck-accent);
  list-style: none;
}
.ck-cn-xem > summary::-webkit-details-marker { display: none; }
.ck-cn-xem > summary::before { content: "▸ "; }
.ck-cn-xem[open] > summary::before { content: "▾ "; }
.ck-cn-xem[open] > summary { margin-bottom: 8px; }
.ck-cn-xem .ck-btn-ghost { margin-top: 8px; }

.ck-cn-donds { display: grid; gap: 5px; }
.ck-cn-don {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 6px 0; border-top: 1px solid var(--ck-line);
}
.ck-cn-don-ngay { flex: none; color: var(--ck-dim); font-variant-numeric: tabular-nums; }
.ck-cn-don-mon { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cn-don-nhan { flex: none; display: flex; gap: 4px; }
.ck-cn-don-tien { flex: none; font-variant-numeric: tabular-nums; }
.ck-the-nho {
  font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--ck-panel); border: 1px solid var(--ck-line); color: var(--ck-dim);
}
.ck-the-nho.la-toi { color: var(--ck-accent); border-color: rgba(56,189,248,.4); }
.ck-the-nho.la-cho { color: var(--ck-warn); border-color: rgba(245,158,11,.4); }

/* Bảng thi đua — ⛔ CHỈ giờ live · số đơn · %. Không có cột tiền, cố ý (mục 10). */
.ck-cn-thidua {
  margin-top: 10px; background: var(--ck-panel-2);
  border: 1px solid var(--ck-line); border-radius: 12px; overflow: hidden;
}
.ck-cn-thidua-dong {
  display: grid; grid-template-columns: 1fr 62px 78px 52px; gap: 6px;
  padding: 8px 12px; font-size: 12.5px; align-items: center;
  border-top: 1px solid var(--ck-line);
}
.ck-cn-thidua-dong:first-child { border-top: 0; }
.ck-cn-thidua-dong > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ck-cn-thidua-dong.la-dau { color: var(--ck-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.ck-cn-thidua-dong.la-toi { background: rgba(56,189,248,.09); font-weight: 600; }

.ck-cn-quy {
  margin-top: 10px; padding: 9px 12px; border-radius: 12px;
  display: grid; gap: 3px; font-size: 12.5px; line-height: 1.5;
  background: rgba(147,164,195,.08); border: 1px solid var(--ck-line); color: var(--ck-dim);
}
.ck-cn-quy b { color: var(--ck-text); font-size: 13.5px; }
.ck-cn-chi { display: grid; gap: 4px; margin-top: 6px; }
.ck-cn-chi-dong {
  display: flex; gap: 8px; align-items: baseline;
  padding-top: 5px; border-top: 1px solid var(--ck-line); font-size: 12px;
}
.ck-cn-chi-viec { flex: 1; min-width: 0; color: var(--ck-text); }
.ck-cn-chi-dong b { font-size: 12px; color: var(--ck-warn); font-variant-numeric: tabular-nums; }
/* Ô ghi khoản chi — chỉ chủ thấy */
.ck-cn-chi-them { display: flex; gap: 6px; margin-top: 8px; }
.ck-cn-chi-them .ck-input { padding: 7px 10px; font-size: 16px; }
@media (pointer: fine) { .ck-cn-chi-them .ck-input { font-size: 12.5px; } }
.ck-cn-chi-them .ck-cn-chi-tien { width: 84px; flex: none; }
.ck-cn-chi-them .ck-btn { padding: 7px 14px; font-size: 12.5px; flex: none; }

/* Ô "Khách đặt lúc" — chú thích nhỏ nằm cạnh nhãn, không xuống dòng riêng cho đỡ tốn chỗ */
.ck-o-ten small { font-weight: 400; color: var(--ck-dim); font-size: 11px; margin-left: 5px; }
/* Safari iOS vẽ datetime-local cao hơn input thường → ép bằng nhau kẻo hàng bị lệch */
input[type="datetime-local"].ck-input { min-height: 42px; }

/* ---------- Nạp file đơn TikTok (chỉ chủ) ---------- */
.ck-nap {
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 4px;
}
.ck-nap > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ck-accent); list-style: none;
}
.ck-nap > summary::-webkit-details-marker { display: none; }
.ck-nap[open] > summary { margin-bottom: 8px; }
.ck-ghi-phai .ck-nap { margin-top: 0; }
.ck-ghi-phai .ck-nap > summary { font-size: 12.5px; color: var(--ck-dim); }
.ck-nap-chu { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--ck-dim); }
.ck-nap-chu b { color: var(--ck-text); font-weight: 600; }
.ck-nap input[type="file"] { font-size: 12px; padding: 8px 10px; }
.ck-nap .ck-btn { margin-top: 9px; }
.ck-nap-tom {
  margin: 9px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ck-text);
}
/* Bảng xem trước: ngày · món · máy gán cho ai · quỹ. Dài thì cuộn trong khung của nó. */
/* Bốn thứ (ngày · món · máy gán · quỹ) không nhét vừa một dòng ở màn 375px — cột tiền bị cắt
   và cả hộp trôi ngang. Xếp lưới 2 hàng: ngày·món·tiền trên, ghi chú xuống dưới. */
.ck-nap-dong {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1px 8px; align-items: baseline; font-size: 12px;
  padding: 6px 0; border-top: 1px solid var(--ck-line);
}
.ck-nap-dong.la-bo { color: var(--ck-dim); }
.ck-nap-dong.la-loi { color: var(--ck-bad); }
.ck-nap-ngay { grid-area: 1 / 1; color: var(--ck-dim); font-variant-numeric: tabular-nums; }
.ck-nap-mon { grid-area: 1 / 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-nap-dong b { grid-area: 1 / 3; font-variant-numeric: tabular-nums; }
.ck-nap-gan { grid-area: 2 / 2 / 3 / 4; font-size: 11px; color: var(--ck-dim); }
/* Dòng lỗi chỉ có chữ, cho trải hết bề ngang kẻo bị ép thành cột hẹp */
.ck-nap-dong.la-loi .ck-nap-mon { grid-area: 1 / 2 / 2 / 4; white-space: normal; }
.ck-cn-chu { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ck-dim); }

/* ---------- Màn QUY CHẾ THU NHẬP ---------- */
/* Đây là văn bản về TIỀN của các bạn — phải dễ đọc trên điện thoại, không nén chữ cho ngắn. */
.ck-qc { display: block; font-size: 13.5px; line-height: 1.65; }
.ck-qc-tieude { margin: 2px 0 12px; font-size: 18px; line-height: 1.35; }
.ck-qc h2 {
  margin: 22px 0 8px; font-size: 15.5px; line-height: 1.4;
  padding-bottom: 6px; border-bottom: 1px solid var(--ck-line);
}
.ck-qc h3 { margin: 16px 0 6px; font-size: 14px; color: var(--ck-accent); }
.ck-qc p { margin: 0 0 9px; }
.ck-qc ul, .ck-qc ol { margin: 0 0 9px; padding-left: 20px; }
.ck-qc li { margin-bottom: 5px; }
.ck-qc hr { border: 0; border-top: 1px solid var(--ck-line); margin: 16px 0; }
.ck-qc blockquote {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25);
  font-size: 13px;
}
.ck-qc code {
  background: var(--ck-panel-2); border: 1px solid var(--ck-line);
  border-radius: 5px; padding: 1px 5px; font-size: 12px;
}
.ck-qc strong { color: #fff; }
/* Bảng hoa hồng rộng hơn màn điện thoại → cuộn NGANG trong khung của nó,
   ⛔ đừng để tràn ra làm cả trang trôi ngang. */
.ck-qc-bang { overflow-x: auto; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.ck-qc-bang table { border-collapse: collapse; width: 100%; min-width: 340px; font-size: 12.5px; }
.ck-qc-bang th, .ck-qc-bang td {
  border: 1px solid var(--ck-line); padding: 6px 9px; text-align: left; vertical-align: top;
}
.ck-qc-bang th { background: var(--ck-panel-2); color: var(--ck-dim); font-size: 11.5px; white-space: nowrap; }
.ck-qc-bang td { font-variant-numeric: tabular-nums; }

/* Mở tấm phủ thì khoá cuộn trang nền — không thì vuốt trên hộp lại kéo trang phía sau,
   và hàng nút ở đáy (vốn cuộn ngang được) ăn mất cú vuốt ngang. */
body.ck-khoa-cuon { overflow: hidden; }

/* ---------- Toast ---------- */
.ck-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 120px; z-index: 100;
  background: var(--ck-panel-2); color: var(--ck-text);
  border: 1px solid var(--ck-accent); border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: ck-toast-in .2s ease;
}
@keyframes ck-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* Màn hẹp: giấu TÊN người dùng, chỉ để ô chữ cái — không thì khối bên phải nở ra
   và đè lên chữ "Trợ lý IIKANZI" đang neo giữa header (đã dính 5/9). */
@media (max-width: 560px) {
  .ck-nguoi-ten { display: none; }
  .ck-nguoi { padding: 4px; }
}

/* Màn rất hẹp: header giờ gánh 2 nút việc + 3 nút phải. Bỏ chữ "IIKANZI" (đã có logo)
   và thu hai nút việc còn chữ ngắn, để không món nào bị đẩy tràn. */
/* Màn rất hẹp: anh Tường chốt **GIỮ chữ IIKANZI**, nên chỗ phải bù ở nơi khác —
   nút "Đặt hàng" rút thành "Đơn" (trong HTML), rồi thu padding nút và bề ngang nút icon. */
@media (max-width: 430px) {
  .ck-header { padding-left: 9px; padding-right: 9px; gap: 6px; }
  .ck-header-trai { gap: 6px; }
  .ck-logo-img { height: 22px; }
  .ck-title { font-size: 14px; }
  .ck-tab { padding: 0 10px; gap: 6px; font-size: 13px; }
  .ck-icon-btn { width: 32px; }
  .ck-header-right { gap: 5px; }
  .ck-header-giua { gap: 5px; }
}

/* ---------- Màn rộng ---------- */
@media (min-width: 900px) {
  .ck-chat { padding: 22px 22px 6px; }
  .ck-composer { padding: 10px 22px 8px; }
  /* ⛔ Trước đây màn rộng cho `flex-wrap: wrap` → nút tràn thành nhiều dòng, xấu
     (anh Tường 5/9). Giờ giữ MỘT hàng, dài thì cuộn bằng hai nút ‹ ›. */
  .ck-kho-cau, .ck-kho-nhom { padding-left: 16px; padding-right: 16px; }
  .ck-mui { width: 34px; }
  .ck-kenh { max-width: 130px; }
  .ck-bubble { max-width: 78%; }
  .ck-msg-troly .ck-msg-tools { width: 78%; }
}

/* ---------- Màn QUẢN LÝ ĐƠN (thẻ 📦 Quản lý trong hộp Đơn) ---------- */
/* Anh Tường 6/9: cả đội xem và sửa chung trạng thái đơn ngay trên trang, Sheets chỉ xem tổng. */

.ck-don-the { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.ck-don-the-nut {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 10px;
  padding: 9px 6px; font-size: 13.5px; font-weight: 600;
}
.ck-don-the-nut.is-chon { color: var(--ck-text); border-color: var(--ck-accent); background: var(--ck-panel-2); }

.ck-ql-tim { margin-bottom: 9px; }

/* Hàng lọc: cuộn ngang khi chật, ⛔ đừng để xuống dòng làm nhảy bố cục ở 375px. */
.ck-ql-loc { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; margin-bottom: 11px; }
.ck-ql-loc::-webkit-scrollbar { display: none; }
.ck-loc-nut {
  appearance: none; cursor: pointer; white-space: nowrap; flex: none;
  background: transparent; color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 999px;
  padding: 6px 11px; font-size: 12.5px;
}
.ck-loc-nut b { color: var(--ck-text); font-weight: 700; margin-left: 2px; }
.ck-loc-nut.is-chon { color: var(--ck-text); border-color: var(--ck-accent); background: var(--ck-panel-2); }

.ck-ql-ds { display: flex; flex-direction: column; gap: 7px; }
.ck-ql-chu { color: var(--ck-dim); font-size: 12px; margin: 11px 0 0; text-align: center; }
.ck-ql-trong { color: var(--ck-dim); font-size: 13px; text-align: center; padding: 18px 0; margin: 0; }

.ck-ql-mot { background: var(--ck-panel-2); border: 1px solid var(--ck-line); border-radius: 10px; overflow: hidden; }
.ck-ql-dau {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--ck-text);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 11px; font-size: 13px; font-family: inherit;
}
.ck-ql-dau:hover { background: rgba(56, 189, 248, .06); }
.ck-ql-trai { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-ql-ma { font-weight: 600; }
.ck-ql-ten { color: var(--ck-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-ql-phai { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex: none; }
.ck-ql-tt { font-size: 12px; }
.ck-ql-tien { font-size: 12px; color: var(--ck-good); }
.ck-ql-tien.is-no { color: var(--ck-warn); }

.ck-ql-than { display: flex; flex-direction: column; gap: 9px; padding: 4px 11px 12px; border-top: 1px solid var(--ck-line); }
.ck-ql-dc { color: var(--ck-dim); font-size: 12.5px; line-height: 1.5; user-select: text; }
/* Ba dòng chỉ-đọc: kênh · người nhận hoa hồng · người nhập đơn. Nhãn cố định 108px để
   ba giá trị thẳng cột; `min-width: 0` cho giá trị dài không đẩy vỡ cột (bẫy 7). */
.ck-ql-meta { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  background: var(--ck-panel); border: 1px solid var(--ck-line); border-radius: 9px; }
.ck-ql-mdong { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; min-width: 0; }
.ck-ql-mten { flex: none; width: 106px; color: var(--ck-dim); }
/* Mã đơn là dòng ĐẦU và là thứ người trực đối chiếu nhiều nhất ⇒ cho đậm, dễ bắt mắt. */
.ck-ql-mma { font-weight: 700; letter-spacing: .3px; }
.ck-ql-mgt { flex: 1; min-width: 0; color: var(--ck-text); overflow-wrap: anywhere; user-select: text; }
/* Anh Tường 8/9: bấm ô nào chép đúng ô đó (mã bưu điện · địa chỉ · số điện thoại…).
   Vẫn để `user-select: text` để ai muốn bôi đen tay vẫn làm được như cũ. */
.ck-ql-mgt.is-chep {
  cursor: pointer; border-radius: 5px; padding: 1px 5px; margin: -1px -5px;
  border: 1px dashed transparent; transition: background .12s, border-color .12s;
}
.ck-ql-mgt.is-chep:hover { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.45); }
.ck-ql-mgt.is-chep-xong {
  background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.55); color: var(--ck-text);
}
.ck-ql-mgt.is-chep-xong::after { content: " ✓"; color: #4ade80; font-weight: 700; }

/* Ba nút trạng thái — anh Tường 8/9: *"để 3 nút này thoáng ra và hình chữ nhật bo góc nhẹ"*.
   Chia đều 3 cột để nút nào cũng to bằng nhau, ngón tay bấm không trượt. */
.ck-ql-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-ql-tt-nut {
  appearance: none; cursor: pointer; font-family: inherit;
  background: var(--ck-panel); color: var(--ck-dim);
  border: 1px solid var(--ck-line); border-radius: 8px;   /* bo góc NHẸ, không phải viên thuốc */
  padding: 12px 6px; font-size: 13px; font-weight: 600;
  min-width: 0; text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ck-ql-tt-nut:hover { border-color: var(--ck-accent); color: var(--ck-text); }
.ck-ql-tt-nut.is-chon {
  color: var(--ck-text); border-color: var(--ck-accent);
  background: rgba(56,189,248,.13); box-shadow: inset 0 0 0 1px var(--ck-accent);
}
/* 🪤 font-size PHẢI ≥ 16px. Dưới 16px thì Safari iOS TỰ PHÓNG TO trang khi bấm vào ô —
   trang rộng hơn màn hình, mà `.ck-tam` lại đặt `touch-action: pan-y` (chặn vuốt ngang)
   ⇒ người trực KẸT, không kéo về được. Anh Tường 8/9: *"nó bị lệch trái phải, đến lúc gì
   không quay lại được"*. ⛔ Đừng hạ xuống cho "gọn". */
.ck-ql-than .ck-input { background: var(--ck-panel); border: 1px solid var(--ck-line); border-radius: 9px;
  color: var(--ck-text); padding: 9px 10px; font-size: 16px; font-family: inherit;
  width: 100%; min-width: 0; box-sizing: border-box; }
@media (pointer: fine) { .ck-ql-than .ck-input { font-size: 14px; } }
/* 🪤 Safari iOS vẽ `input[type=date]` theo kiểu riêng: cao hơn ô chữ và có bề rộng tối thiểu
   khá lớn ⇒ trong cột hẹp nó ĐÈ sang ô bên cạnh và lệch chiều cao (anh Tường 8/9:
   *"ngày gửi và mã bưu kiện đang bị đè nhau và sai chiều cao"*).
   `appearance: none` gỡ kiểu riêng đó, `height` cố định ép hai ô bằng nhau. */
.ck-ql-than input[type="date"].ck-input {
  appearance: none; -webkit-appearance: none; line-height: normal;
}
/* Ép hai ô của hàng đôi CAO BẰNG NHAU. Không dựa vào chiều cao tự tính: ô ngày và ô chữ mỗi
   trình duyệt tính một kiểu (đo 8/9 ở Chrome: 42 và 45) ⇒ cứ cho số cứng cho cả hai. */
.ck-ql-than .ck-o-doi .ck-input { height: 44px; }

/* ẢNH BIÊN LAI — hàng nút ngay dưới ô tick "Khách đã trả tiền".
   Hai nút cùng cao 44px cho ngón tay bấm không trượt; chữ trạng thái đẩy sang phải. */
.ck-ql-anh-hang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-ql-anh-nut, .ck-ql-anh-xem {
  appearance: none; cursor: pointer; font-family: inherit;
  background: var(--ck-panel); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 8px;
  padding: 0 13px; min-height: 44px; font-size: 13px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.ck-ql-anh-nut:hover, .ck-ql-anh-xem:hover { border-color: var(--ck-accent); }
.ck-ql-anh-nut:disabled, .ck-ql-anh-xem:disabled { opacity: .55; cursor: default; }
/* Chữ trạng thái ("đã có ảnh" / "đã lưu · 165KB"). ⛔ Đừng `margin-left: auto`: trên điện
   thoại hai nút đã chiếm hết hàng nên nó tụt xuống dòng dưới, dạt sang phải trông lạc lõng. */
.ck-ql-anh-tinh { font-size: 12px; color: var(--ck-dim); }

/* Xem ảnh to: PHẢI nằm trên hộp sửa đơn (z-index 60) — mở từ trong hộp đó ra. */
.ck-anh-lop { z-index: 70; }
.ck-anh-to { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; }

/* 🪤 NÚT GỬI ĐƠN KHÔNG BAO GIỜ ĐƯỢC KHUẤT — anh Tường 6/9: *"không cuộn lên được,
   nút ấn gửi đơn bị che mất không ấn được"*.
   Cách chắc ăn nhất là ghim nút ở đáy khung cuộn: dù hộp cao bao nhiêu, bàn phím điện thoại
   bật lên che mất bao nhiêu, cuộn tới đâu — nút vẫn nằm sẵn ở mép dưới, luôn bấm được.
   ⛔ Đừng đổi thành `position: fixed` — hộp thoại tự cuộn, fixed sẽ trôi ra ngoài hộp. */
.ck-don [data-don-gui] {
  position: sticky; bottom: 0; z-index: 3;
  /* Viền nền cùng màu hộp để chữ trong form không lộ ra sau nút khi cuộn qua. */
  outline: 8px solid var(--ck-panel);
  /* Khoảng trắng trên/dưới cho nút thở (anh Tường 7/9). */
  margin-top: 12px; margin-bottom: 8px;
}