:root {
  --cam: #ff5722;
  --cam-dam: #f4511e;
  --cam-nhat: #fff3ef;
  --do: #e11d48;
  --luc: #16a34a;
  --mo: #767e87;
  --vien: #e4e7ea;
  --nen: #f4f5f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--nen);
  color: #1f2328;
  font-size: 14px;
}

.an { display: none !important; }
.phu { color: var(--mo); font-size: 13px; }
.nho { font-size: 12px; }
.sao { color: var(--do); }
.loi { color: var(--do); margin: 10px 0; min-height: 18px; }
.giua { text-align: center; }
.phai { text-align: right; }

/* ---------- Nút ---------- */
.nut {
  border: 1px solid var(--vien);
  background: #fff;
  color: #33393f;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.nut:hover { background: #f7f8f9; }
.nut.chinh { background: var(--cam); border-color: var(--cam); color: #fff; font-weight: 600; }
.nut.chinh:hover { background: var(--cam-dam); }
.nut.chinh:disabled { opacity: .55; cursor: default; }
/* Lúc máy đang lưu thì khoá cả nút thường và nút ✕, cho thấy rõ là đang bận */
.nut:disabled, .nut-x:disabled { opacity: .5; cursor: default; }
/* Nút "+ Tải ảnh lên" là cái nhãn bọc ngoài ô chọn tệp, phải mờ theo ô bên trong */
.nut.nho:has(#f-anh:disabled) { opacity: .5; pointer-events: none; }
.nut.nho { padding: 5px 10px; font-size: 12.5px; }
.nut.rong { width: 100%; padding: 11px; }
/* Nút việc lành màu xanh, nút việc nặng màu đỏ. Dùng ở danh sách hàng: "Sửa" xanh,
   "Ngừng bán" đỏ, để bấm nhầm một cái là thấy ngay chứ không phải hai nút trắng giống hệt. */
.nut.nut-xanh { color: var(--luc); border-color: #b7e4c7; }
.nut.nut-xanh:hover { background: #f0fdf4; border-color: var(--luc); }
.nut.nut-do { color: var(--do); border-color: #f6c2ce; }
.nut.nut-do:hover { background: #fff1f3; border-color: var(--do); }

/* Nút "Xem hàng" của thẻ đơn: mở bằng máy tính thì KHÔNG cần, vì danh sách món đã bày sẵn
   ngay trên thẻ. Chỉ hiện khi màn hẹp (xem khối luật cuối file). */
.nut-xem-hang { display: none; }
/* Nút việc lành tô xanh đặc: "Xác nhận đơn", "Đã giao xong". Cạnh nó là nút đỏ "Huỷ đơn",
   hai màu khác hẳn nhau nên khó bấm nhầm. */
.nut.chinh.xanh-dam { background: var(--luc); border-color: var(--luc); }
.nut.chinh.xanh-dam:hover { background: #12833c; border-color: #12833c; }
/* Danh sách món lúc nằm trong cửa sổ bật lên: có đường kẻ ngăn cho dễ đọc. */
.don-hang-ds.trong-cua-so .dong-hang { padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
.don-hang-ds.trong-cua-so .dong-hang:last-child { border-bottom: 0; }
.don-tong-cua-so { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vien); font-size: 15px; }
.nut-x { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--mo); }

/* ---------- Đăng nhập ---------- */
/* Dải đỏ "BẢN TẬP". KHÔNG dính trên đầu, để khỏi tranh chỗ với thanh trên vốn đã dính ở top:0.
   Cuộn xuống là nó trôi đi, nhìn thấy lúc mới mở trang là đủ. */
.dai-ban-tap {
  background: #dc2626; color: #fff; text-align: center;
  font-size: 13px; font-weight: 700; padding: 4px 10px;
}
.man-dang-nhap {
  /* Trừ đi chiều cao dải báo, không thì màn đăng nhập cao hơn màn hình và sinh ra thanh cuộn thừa.
     Không có dải thì biến này là 0, y như cũ. */
  min-height: calc(100vh - var(--cao-ban-tap, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hop-dang-nhap {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 6px 28px rgba(16, 24, 40, .1);
}
.hop-dang-nhap h1 { margin: 0 0 4px; font-size: 21px; }

/* ---------- Khung chính ---------- */
.thanh-tren {
  /* Cuộn trang xuống thì thanh này vẫn nằm im trên đầu. Ba mức dính chồng nhau:
     thanh trên → thanh mục → vùng lọc. Chiều cao hai thanh đầu do app.js đo rồi ghi vào
     --cao-thanh-tren và --cao-hai-thanh, vì thanh trên xuống dòng khi màn hẹp. */
  position: sticky; top: 0; z-index: 40;
  background: var(--cam);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ten-trang { font-size: 17px; font-weight: 600; }
.thanh-phai { display: flex; align-items: center; gap: 10px; }
.thanh-phai .phu { color: rgba(255,255,255,.9); }

/* 🧨 Cái DÍNH trên đầu là LỚP BỌC, không phải thanh thẻ bên trong. Để thanh thẻ tự dính thì
   trên điện thoại nó vừa dính vừa vuốt ngang, hai việc đá nhau; mà hai vệt mờ báo "còn nút nữa"
   cũng phải đứng yên chứ không được trôi theo lúc vuốt. */
.hop-thanh-muc {
  position: sticky; top: var(--cao-thanh-tren, 52px); z-index: 39;
  background: #fff; border-bottom: 1px solid var(--vien);
}
.thanh-muc { padding: 0 12px; display: flex; }
.muc {
  border: 0; background: transparent; padding: 13px 16px;
  font-size: 14px; font-family: inherit; cursor: pointer; color: #545b62;
  border-bottom: 2px solid transparent;
}
.muc.dang-chon { color: var(--cam); font-weight: 600; border-bottom-color: var(--cam); }
.muc:disabled { color: #b3b9bf; cursor: default; }

.than { padding: 16px; max-width: 1400px; margin: 0 auto; }

.o-tim {
  /* Không cho ô tìm kéo dài hết màn hình. Kéo dài thì mấy nút lọc và nút Thêm mặt hàng
     bị đẩy văng sang mép phải, nhìn rời rạc như không cùng một nhóm. */
  flex: 0 1 420px; min-width: 220px;
  border: 1px solid var(--vien); border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.the-loc { display: flex; gap: 6px; }
/* 🧨 Bo góc NHẸ thôi, đừng tròn xoe. Chủ shop chốt 17/08: cho mọi nút trong trang cùng một
   kiểu bo góc, tròn xoe nhìn rời rạc so với mấy nút còn lại. */
.the {
  border: 1px solid var(--vien); background: #fff; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-family: inherit; cursor: pointer; color: #545b62;
}
.the.dang-chon { background: var(--cam); border-color: var(--cam); color: #fff; }

/* ---------- Bảng ---------- */
.khung-bang { background: #fff; border-radius: 12px; overflow: auto; border: 1px solid var(--vien); }
.bang { width: 100%; border-collapse: collapse; white-space: nowrap; }
.bang th {
  text-align: left; font-size: 12.5px; color: #5b6167; font-weight: 600;
  padding: 11px 12px; border-bottom: 1px solid var(--vien); background: #fafbfc;
  position: sticky; top: 0;
}
.bang td { padding: 10px 12px; border-bottom: 1px solid #f0f2f4; vertical-align: middle; }
.bang tr:last-child td { border-bottom: 0; }
.bang tbody tr:hover { background: #fcfcfd; }

.o-ma { color: var(--cam-dam); font-weight: 600; }
.o-ten { white-space: normal; min-width: 220px; }
.o-tien { font-variant-numeric: tabular-nums; }
.o-von { cursor: pointer; color: var(--mo); font-variant-numeric: tabular-nums; }
.anh-nho { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #eef0f2; display: block; }
.anh-trong {
  width: 42px; height: 42px; border-radius: 8px; background: #eef0f2;
  display: flex; align-items: center; justify-content: center; color: #a9b0b7; font-size: 16px;
}
.nhan { font-size: 12px; padding: 3px 9px; border-radius: 999px; display: inline-block; }
.nhan.on { background: #e7f7ed; color: var(--luc); }
.nhan.off { background: #fdeaea; color: var(--do); }
.cham-mau-nho {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid var(--vien); margin-right: 3px; vertical-align: -2px;
}
.trong { padding: 40px; text-align: center; color: var(--mo); }

/* ---------- Hộp thoại ---------- */
.lop-phu {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.hop, .hop-to {
  background: #fff; border-radius: 14px; width: 100%; display: flex; flex-direction: column;
  max-height: 92vh;
}
.hop { max-width: 420px; }
.hop-to { max-width: 860px; }
.hop-dau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--vien);
}
.hop-dau h2 { margin: 0; font-size: 17px; }
.hop-than { padding: 18px; overflow-y: auto; }
.hop-cuoi {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--vien);
}

label { display: block; font-size: 13px; color: #4a5057; margin: 12px 0 5px; font-weight: 500; }
input, textarea, select {
  width: 100%; border: 1px solid var(--vien); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; font-family: inherit; background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--cam-nhat); border-color: var(--cam); }
textarea { resize: vertical; }
.ghi-chu { font-size: 12px; color: var(--mo); margin-top: 4px; }
/* Dòng xem trước "giá gạch" ngay dưới ô nhập, nổi hơn ghi chú thường. */
.ghi-chu.xem-gia-gach { color: var(--cam-dam); font-weight: 600; margin-top: 6px; }
.xem-gia-gach s { color: var(--mo); font-weight: 400; margin-right: 2px; }
.xem-gia-gach b { color: var(--do); }

/* Ô mật khẩu có nút con mắt */
.o-mk { position: relative; }
.o-mk input { padding-right: 42px; }
.nut-mat {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer;
  color: var(--mo); padding: 3px; display: flex; align-items: center; justify-content: center;
}
.nut-mat:hover { color: var(--cam-dam); }
.nut-mat svg { width: 20px; height: 20px; }

.luoi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.luoi3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.luoi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.rong-het { max-width: none; margin-bottom: 16px; }
.ds-bac { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.o-bac {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--vien);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 400;
}
.o-bac input { width: 17px; height: 17px; margin: 0; }
.o-bac.khoa { opacity: .6; cursor: default; }
.chon-nhom { padding: 5px 8px; font-size: 13px; border-radius: 7px; max-width: 180px; }
.nhan-bac {
  display: inline-block; background: var(--cam-nhat); color: var(--cam-dam);
  font-size: 12px; padding: 2px 8px; border-radius: 999px; margin-right: 4px;
}

/* Mỗi phần của form là một khối có viền riêng, để mắt nhảy được từ phần này sang phần kia.
   Trước đây cả form là một dải chữ dài, phần nào cũng nặng như phần nào. */
.phan {
  margin-top: 16px; border: 1px solid var(--vien); border-radius: 12px;
  padding: 16px; background: #fcfcfd;
}
.phan > label:first-child, .phan > .luoi2:first-child { margin-top: 0; }
.phan-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phan-dau h3 { margin: 0; font-size: 15px; }
.phan-dau + .ghi-chu { margin-top: 6px; }

.bang-mau { margin-top: 10px; white-space: normal; }
.bang-mau input { padding: 7px 9px; font-size: 13px; }
.bang-mau td { padding: 7px 8px; }
.bang-mau .o-chon-mau { display: inline-flex; }

.ds-anh { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.o-anh-to { position: relative; }
.o-anh-to img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--vien); }
.xoa-anh {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--do); color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}
/* Ảnh mới chọn, chưa gửi lên máy chủ: viền cam đứt nét cho khác hẳn ảnh đã lưu */
.o-anh-to { width: 92px; }
.o-anh-to img { display: block; }
.o-anh-cho img { border: 1px dashed var(--cam); }
.anh-nhan-cho {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
  background: rgba(255, 87, 34, .92); color: #fff; font-size: 10px; text-align: center;
  border-radius: 0 0 10px 10px; letter-spacing: .2px;
}

/* ---------- Đơn hàng ---------- */
.the-don { margin-bottom: 12px; flex-wrap: wrap; }
.tom-tat { color: var(--mo); font-size: 13px; margin-bottom: 12px; }

.the-don-hang {
  background: #fff; border: 1px solid var(--vien); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.don-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.don-dau .nhan { margin-left: 8px; }
.don-khach { margin: 10px 0; padding: 10px 0; border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.don-hang-ds .dong-hang {
  display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px;
}
.don-cuoi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.don-tong { font-size: 15px; }
.don-tong b { color: var(--do); }
/* Tổng cân của đơn, để biết mà báo tiền gửi hàng. Nhỏ và mờ hơn số tiền. */
.don-can { font-size: 13px; color: var(--mo); margin-left: 6px; }
.don-can b { color: #3d4348; }
.can-thieu { color: var(--cam-dam); }
.don-nut { display: flex; gap: 8px; }

/* ---------- Cài đặt shop ---------- */
.hop-caidat {
  background: #fff; border: 1px solid var(--vien); border-radius: 12px;
  padding: 20px; max-width: 720px;
}
.hop-caidat h2 { margin: 0 0 4px; font-size: 18px; }
.cong-tac { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 12px; cursor: pointer; font-weight: 400; }
.cong-tac input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 18px; }
.xem-logo { margin-top: 12px; }
.xem-logo img {
  width: 110px; height: 110px; object-fit: contain;
  border: 1px solid var(--vien); border-radius: 12px; background: #fafbfc; padding: 6px;
}

.nhac { background: var(--cam-nhat); border: 1px solid #ffd8cc; border-radius: 8px; padding: 10px 12px; font-size: 13px; }

.thong-bao {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1f2328; color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90;
}
.thong-bao.hien { opacity: 1; }
.thong-bao.loi-bao { background: var(--do); }

@media (max-width: 720px) {
  .luoi2, .luoi3 { grid-template-columns: 1fr; }
  /* Bốn ô giá xuống hai hàng, không xuống một cột: để một cột thì ô nào cũng thừa chỗ,
     để bốn cột thì mỗi ô còn ~78px và chữ nhắc trong ô bị cắt cụt thành "Nhập gi…". */
  .luoi4 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Màn Khách hàng ---------- */


.vien-cam { border-color: var(--cam) !important; }

/* ⚠️ .hop-caidat viết SAU .rong-het trong file nên nó đè mất, hộp bị khoá ở 720px.
   Phải viết hai tên lớp dính nhau mới đủ mạnh để nới hộp ra hết bề ngang. */
.hop-caidat.rong-het { max-width: none; }

/* Danh sách khách đang chờ duyệt */
.ds-cho { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.the-cho {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; background: #fff;
}
.the-cho-ten { flex: 1 1 200px; min-width: 200px; }
.the-cho-ten b { display: block; font-size: 15px; }
.the-cho-nut { display: flex; gap: 8px; align-items: center; }

/* Vòng tròn chữ cái đầu của tên khách */
.vong-ten {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: var(--cam-nhat); color: var(--cam-dam);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
}
.o-khach { display: flex; align-items: center; gap: 10px; }

.nhan.cho { background: #fff3ef; color: var(--cam-dam); }
.nut.tu-choi { color: var(--do); }
.nut.tu-choi:hover { background: #fdeaea; }


/* ---------- Form sửa hàng ---------- */

/* Dòng chữ xám dưới mỗi ô bậc giá: nhóm khách nào đang được xem bậc đó. */
.ai-xem { font-size: 11.5px; color: var(--mo); margin-top: 5px; min-height: 30px; line-height: 1.35; }
.ai-xem b { color: var(--cam-dam); font-weight: 600; }
.ai-xem-trong { font-style: italic; }

/* Khối giá vốn tách riêng, không nằm chung với bốn bậc giá, vì nó không phải giá bán. */
.phan-von { background: #fbfaf8; border-color: #ece7df; }
.nhan-kin {
  font-size: 11.5px; font-weight: 600; color: #8a6d3b;
  background: #fdf3e2; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.lai-am { color: var(--do); font-weight: 600; }
.lai-duong { color: var(--luc); font-weight: 600; }

/* ---------- Màn Cài đặt shop ---------- */

/* Đầu màn: tiêu đề bên trái, nút Lưu bên phải. Nút nằm ngay tầm mắt, không phải
   cuộn xuống đáy mới thấy. Nút dính theo khi cuộn để lúc nào cũng bấm được. */
.dau-man {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; position: sticky; top: 0; z-index: 6;
  background: rgba(244,245,247,.92); backdrop-filter: blur(6px); padding: 12px 0;
}
.dau-man h2 { margin: 0 0 2px; font-size: 20px; }
.dau-man-phai { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.dau-man-phai .loi { margin: 0; }

/* Hai cột: bên trái là thứ gõ, bên phải là logo và khung xem trước.
   Trước đây tất cả dồn vào một hộp hẹp giữa màn hình rộng, thừa nửa màn bỏ trống. */
.luoi-caidat { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.cot-caidat { display: flex; flex-direction: column; gap: 16px; }

/* Công tắc gạt thật, không phải ô tích nhỏ. Đây là cài đặt nặng nhất màn này,
   bật nhầm là Zalo không duyệt app, nên phải nhìn phát biết đang bật hay tắt. */
.cong-tac-to {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1px solid var(--vien); border-radius: 12px; padding: 14px; margin: 12px 0;
  background: #fff; transition: border-color .15s, background .15s;
}
.cong-tac-to input { position: absolute; opacity: 0; width: 0; height: 0; }
.gat {
  position: relative; flex: 0 0 46px; width: 46px; height: 26px; border-radius: 999px;
  background: #cfd4da; transition: background .18s; margin-top: 1px;
}
.gat::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.cong-tac-to input:checked ~ .gat { background: var(--cam); }
.cong-tac-to input:checked ~ .gat::after { transform: translateX(20px); }
.cong-tac-to input:focus-visible ~ .gat { outline: 2px solid var(--cam-dam); outline-offset: 2px; }
.cong-tac-to:has(input:checked) { border-color: var(--cam); background: var(--cam-nhat); }
.gat-chu { display: flex; flex-direction: column; gap: 2px; }
.gat-chu b { font-size: 14px; }
.gat-chu .ghi-chu { margin-top: 0; }

/* Khung xem trước đầu trang chủ app khách */
.xem-truoc {
  margin-top: 12px; border: 1px solid var(--vien); border-radius: 14px; overflow: hidden;
  background: #f2f3f5; max-width: 300px;
}
.xt-dai-cam { background: linear-gradient(180deg, #ff5722 0%, #f4511e 100%); padding: 10px 12px 11px; }
.xt-dau-shop { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; }
.xt-dau-shop img {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; object-fit: contain; flex: 0 0 30px;
}
.xt-ten {
  color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.xt-phu { color: rgba(255,255,255,.85); font-size: 11px; line-height: 1.2; }
.xt-o-tim {
  background: #fff; border-radius: 999px; height: 30px; display: flex; align-items: center;
  padding: 0 12px; color: #b0b6bd; font-size: 12.5px;
}
.xt-than { background: #fff; padding: 12px; }
.xt-khoi { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.xt-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xt-luoi span { display: block; height: 62px; border-radius: 8px; background: #f1f3f5; }

@media (max-width: 1000px) {
  .luoi-caidat { grid-template-columns: 1fr; }
}

/* ---------- Thanh lọc màn Khách hàng ---------- */

.chon-loc { flex: 0 0 auto; width: 170px; max-width: 170px; height: 38px; }

@media (max-width: 1100px) {
  .hop-caidat .phan-dau { flex-wrap: wrap; }
  }

/* Ô tìm dính sát mép trên của bảng danh sách nhìn như một khối liền.
   Chừa khoảng hở, và câu nhắc cách gõ nằm giữa hai thứ đó. */
.ghi-chu-tim { margin: 10px 0 0; }
.hop-caidat .khung-bang { margin-top: 14px; }
.hop-caidat .phan-dau + .khung-bang { margin-top: 16px; }

/* Hàng nhập mật khẩu mới kèm nút tự đặt */
.hang-mkk { display: flex; gap: 8px; align-items: center; }
.hang-mkk input { flex: 1; }
.hang-mkk .nut { flex: 0 0 auto; white-space: nowrap; }

/* Cửa sổ nhóm khách: rộng vừa, đủ chỗ cho bảng nhóm và ô thêm mới */
.hop-vua { max-width: 640px; }


/* ═══════ BỘ LỌC KIỂU PHẦN MỀM Ở QUẦY ═══════
   Chép cách bày của POS GLP: hàng ô số liệu pastel, một thẻ lọc trắng gom ô tìm,
   viên chọn ngày bật ra hai tờ lịch, và nút Xoá lọc. */

/* ---- Hàng ô số liệu ---- */
.pills {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 10px; margin-bottom: 10px;
}
.pill {
  flex: 0 0 auto; min-width: 150px; border-radius: 13px; border: 1px solid;
  padding: 8px 12px; text-align: left; font-family: inherit; cursor: pointer;
  background: none; transition: transform .12s, box-shadow .12s;
}
.pill .t { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.pill .v { font-size: 20px; font-weight: 700; margin: 1px 0; font-variant-numeric: tabular-nums; }
.pill .s { font-size: 11px; font-weight: 600; opacity: .82; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16,24,40,.10); }
.pill.dang-chon { box-shadow: 0 0 0 3px rgba(255,87,34,.20); }
.pill[disabled] { cursor: default; }
.pill[disabled]:hover { transform: none; box-shadow: none; }

/* Bảng màu pastel lấy đúng bên quầy: viền dùng tông ĐẬM của chính ô đó. */
.p-lam  { background: #EFF6FF; border-color: #1D4ED8; } .p-lam .t,  .p-lam .s  { color: #1D4ED8; } .p-lam .v  { color: #1E40AF; }
.p-luc  { background: #F0FDF4; border-color: #15803D; } .p-luc .t,  .p-luc .s  { color: #15803D; } .p-luc .v  { color: #166534; }
.p-teal { background: #F0FDFA; border-color: #0F766E; } .p-teal .t, .p-teal .s { color: #0F766E; } .p-teal .v { color: #115E59; }
.p-cam  { background: #FFF7ED; border-color: #C2410C; } .p-cam .t,  .p-cam .s  { color: #C2410C; } .p-cam .v  { color: #9A3412; }
.p-do   { background: #FEE2E2; border-color: #991B1B; } .p-do .t,   .p-do .s   { color: #991B1B; } .p-do .v   { color: #7F1D1D; }

/* ---- Thẻ lọc trắng ---- */
.the-loc-pos {
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 9px 12px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.the-loc-pos .the-loc { flex: 0 0 auto; }

/* ---- Ô tìm có biểu tượng và nút xoá bên trong ---- */
.o-tim-pos {
  flex: 1 1 320px; min-width: 240px; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; background: #fff;
  border: 1px solid var(--vien); border-radius: 10px;
}
.o-tim-pos:focus-within { border-color: var(--cam); box-shadow: 0 0 0 3px var(--cam-nhat); }
.o-tim-pos svg { color: var(--cam); flex: none; }
.o-tim-pos input { flex: 1; border: 0; padding: 0; height: 100%; background: transparent; font-size: 13.5px; }
.o-tim-pos input:focus { outline: 0; }
.o-tim-pos .sclr {
  border: 0; background: transparent; color: var(--mo); cursor: pointer;
  font-size: 14px; padding: 2px 4px; line-height: 1; display: none;
}
.o-tim-pos.co-chu .sclr { display: block; }

/* ⚠️ Dùng tên `ben-phai` chứ KHÔNG dùng `phai`: lớp `.phai` là kiểu căn phải của ô bảng
   (`text-align:right`), gắn vào popup là mọi dòng bên trong bị đẩy chữ sang phải. */

/* ---- Viên chọn khoảng ngày ---- */
.dpill { position: relative; display: inline-flex; flex: 0 0 auto; }
.dpill > .nut-ngay {
  height: 36px; border: 1px solid var(--vien); background: #fff; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 6px;
  font-family: inherit; font-size: 13.5px; color: #33393f; white-space: nowrap;
}
.dpill > .nut-ngay:hover { border-color: #cbd5e1; background: #f8fafc; }
.dpill.co-loc > .nut-ngay { border-color: var(--cam); background: var(--cam-nhat); font-weight: 600; }
.nut-ngay .cic {
  width: 26px; height: 26px; border-radius: 7px; background: var(--cam-nhat); color: var(--cam-dam);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.nut-ngay .cv { color: #94a3b8; display: flex; flex: none; }

.dpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff;
  border: 1px solid var(--vien); border-radius: 14px; padding: 14px;
  box-shadow: 0 12px 34px rgba(16,24,40,.16); display: none;
}
.dpop.ben-phai { left: auto; right: 0; }
.dpop.hien { display: block; }
.dpop .hai { display: flex; gap: 16px; }
.dpop .cot { width: 232px; }
.dpop .nhan { font-size: 12.5px; font-weight: 700; margin: 0 2px 6px; }
.dpop .nhan.tu { color: #16a34a; } .dpop .nhan.den { color: #2563eb; }

.lich-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lich-dau b { font-size: 13px; }
.lich-dau button {
  border: 1px solid var(--vien); background: #fff; border-radius: 7px; width: 26px; height: 26px;
  cursor: pointer; color: #475569; font-family: inherit; line-height: 1;
}
.lich-dau button:hover { background: #f1f5f9; }
.lich-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lich-luoi .thu { font-size: 10.5px; color: var(--mo); text-align: center; padding: 3px 0; font-weight: 600; }
.lich-luoi button {
  border: 0; background: none; border-radius: 7px; height: 28px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: #33393f;
}
.lich-luoi button:hover { background: #f1f5f9; }
.lich-luoi button.ngoai { color: #c9ced4; }
.lich-luoi button.trong-khoang { background: var(--cam-nhat); border-radius: 0; }
.lich-luoi button.dau-khoang { background: #16a34a; color: #fff; }
.lich-luoi button.cuoi-khoang { background: #2563eb; color: #fff; }
.lich-luoi button.hom-nay { box-shadow: inset 0 0 0 1px var(--cam); }

.dpop .duoi {
  border-top: 1px solid var(--vien); margin-top: 12px; padding-top: 10px;
  display: flex; align-items: center; gap: 10px;
}
.dpop .nhanh { position: relative; }
.dpop .nhanh > button {
  border: 1px solid var(--vien); background: #fff; border-radius: 9px; padding: 7px 12px;
  cursor: pointer; font-family: inherit; font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.dpop .nhanh > button:hover { background: #f1f5f9; }
.dpop .nhanhdd {
  position: absolute; bottom: calc(100% + 6px); left: 0; background: #fff;
  border: 1px solid var(--vien); border-radius: 11px; padding: 5px; min-width: 156px;
  box-shadow: 0 10px 26px rgba(16,24,40,.16); display: none; z-index: 5;
}
.dpop .nhanhdd.hien { display: block; }
.dpop .nhanhdd button {
  width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none;
  cursor: pointer; padding: 7px 9px; border-radius: 8px; font-family: inherit; font-size: 13px; text-align: left;
}
.dpop .nhanhdd button:hover { background: #f1f5f9; }
.dpop .nhanhdd .cham { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dpop .goi { font-size: 12px; color: var(--mo); flex: 1; }
.dpop .xoa {
  border: 1px solid var(--vien); background: #fff; border-radius: 9px; padding: 7px 12px;
  cursor: pointer; font-family: inherit; font-size: 13px; color: var(--do);
}
.dpop .xoa:hover { background: #fdeaea; }

@media (max-width: 760px) {
  .dpop .hai { flex-direction: column; }
  .dpop .cot { width: 100%; }
}

/* ---- Ô chọn nhóm hàng: bung ra hai cột, cha bên trái, con bên phải ---- */
.hopchon { position: relative; display: inline-flex; flex: 0 0 auto; }
.hopchon > .nut-chon {
  height: 36px; min-width: 190px; border: 1px solid var(--vien); background: #fff;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; font-family: inherit; font-size: 13.5px; color: #94a3b8; white-space: nowrap;
}
.hopchon > .nut-chon:hover { border-color: #cbd5e1; background: #f8fafc; }
.hopchon.co-loc > .nut-chon { border-color: var(--cam); background: var(--cam-nhat); color: var(--cam-dam); font-weight: 600; }
.nut-chon .chu { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.nut-chon .cv { color: #94a3b8; flex: none; }

.hopchon .dd {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff;
  border: 1px solid var(--vien); border-radius: 12px; padding: 4px;
  box-shadow: 0 12px 34px rgba(16,24,40,.16); display: none;
}
.hopchon .dd.ben-phai { left: auto; right: 0; }
.hopchon .dd.hien { display: block; }
.hopchon .hai-cot { display: flex; }
.hopchon .cot-cha { min-width: 210px; max-height: 320px; overflow: auto; border-right: 1px solid #eef1f4; }
.hopchon .cot-con { min-width: 200px; max-height: 320px; overflow: auto; padding: 4px; }
.hopchon .it {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px; white-space: nowrap;
}
.hopchon .it:hover { background: #f1f5f9; }
.hopchon .it input { width: 15px; height: 15px; margin: 0; flex: none; }
.hopchon .it .ten { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.hopchon .it .dem { color: var(--mo); font-size: 11.5px; }
.hopchon .it .mui { color: #94a3b8; font-size: 11px; }
.hopchon .it.khoa { opacity: .5; cursor: default; }
.hopchon .it.dang-re { background: #f1f5f9; }
.hopchon .goi-cot { padding: 10px; color: #94a3b8; font-size: 12px; white-space: normal; max-width: 190px; }
.hopchon .duoi {
  border-top: 1px solid var(--vien); margin-top: 4px; padding: 8px 6px 4px;
  display: flex; align-items: center; gap: 10px;
}
.hopchon .duoi .goi { font-size: 12px; color: var(--mo); flex: 1; }
.hopchon .duoi .xoa {
  border: 1px solid var(--vien); background: #fff; border-radius: 9px; padding: 6px 11px;
  cursor: pointer; font-family: inherit; font-size: 13px; color: var(--do);
}
.hopchon .duoi .xoa:hover { background: #fdeaea; }

@media (max-width: 760px) {
  .hopchon .hai-cot { flex-direction: column; }
  .hopchon .cot-cha { border-right: 0; border-bottom: 1px solid #eef1f4; }
}

/* ---- Cột tích chọn và thanh việc hàng loạt ---- */
.o-tich { width: 40px; }
.bang td.o-tich, .bang th.o-tich { padding-left: 14px; padding-right: 6px; }
.bang input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.bang tr.dang-tich { background: var(--cam-nhat); }
.bang tr.dang-tich:hover { background: #ffeae1; }

.thanh-chon {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #1f2328; color: #fff; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(16,24,40,.22);
}
.thanh-chon .dem-chon { margin-right: 6px; font-size: 13.5px; }
.thanh-chon .dem-chon b { font-size: 16px; }
.thanh-chon .nut { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.thanh-chon .nut:hover { background: rgba(255,255,255,.22); }
.thanh-chon .nut-xoa-loat { background: var(--do); border-color: var(--do); font-weight: 600; }
.thanh-chon .nut-xoa-loat:hover { background: #c81040; }

/* ---- Hộp đổi nhóm hàng: hai cột chọn, cha bên trái con bên phải ---- */
.doi-nhom-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dn-cot { display: flex; flex-direction: column; min-width: 0; }
.dn-dau { font-size: 13px; font-weight: 600; color: #4a5057; margin-bottom: 6px; }
.dn-ds {
  border: 1px solid var(--vien); border-radius: 10px; background: #fff;
  height: 232px; overflow: auto; padding: 4px;
}
.dn-ds .it {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px;
}
.dn-ds .it:hover { background: #f1f5f9; }
.dn-ds .it.dang-chon { background: var(--cam-nhat); color: var(--cam-dam); font-weight: 600; }
.dn-ds .it .ten { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-ds .it .dem { color: var(--mo); font-size: 11.5px; font-weight: 400; }
.dn-ds .it.trong-nhom { color: var(--mo); font-style: italic; }
.dn-ds .goi-ds { padding: 12px; color: #94a3b8; font-size: 12.5px; }
.dn-moi { margin-top: 8px; font-size: 13px; padding: 8px 10px; }

/* Dòng chốt lại sẽ chuyển đi đâu */
.dn-ket {
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--vien); font-size: 13.5px; color: var(--mo);
}
.dn-ket.xong { background: var(--cam-nhat); border-color: #ffd8cc; color: #1f2328; }
.dn-ket b { color: var(--cam-dam); }

/* ---- Bảng màu bấm chọn, thay cho ô mã màu ---- */
.o-mau-chon { position: relative; display: inline-flex; }
.o-mau-chon > .nut-mau-hien {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px;
  border: 1px solid var(--vien); border-radius: 9px; background: #fff; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: #33393f; white-space: nowrap;
}
.o-mau-chon > .nut-mau-hien:hover { border-color: #cbd5e1; background: #f8fafc; }
.o-mau-chon .cuc-mau {
  width: 26px; height: 24px; border-radius: 6px; flex: none;
  border: 1px solid rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.o-mau-chon .ten-mau-hien { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.o-mau-chon .cv { color: #94a3b8; font-size: 10px; }

.bang-mau-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; background: #fff;
  border: 1px solid var(--vien); border-radius: 12px; padding: 10px;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .18); display: none; width: 316px;
}
.bang-mau-pop.ben-phai { left: auto; right: 0; }
.bang-mau-pop.hien { display: block; }
.bang-mau-pop .luoi-mau { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bang-mau-pop .o-mau {
  border: 1px solid var(--vien); border-radius: 9px; background: #fff; cursor: pointer;
  padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bang-mau-pop .o-mau:hover { border-color: var(--cam); background: var(--cam-nhat); }
.bang-mau-pop .o-mau.dang-chon { border-color: var(--cam); box-shadow: 0 0 0 2px var(--cam-nhat); }
.bang-mau-pop .o-mau .cuc {
  width: 100%; height: 26px; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.bang-mau-pop .o-mau .ten {
  font-size: 9.5px; color: #5b6167; line-height: 1.1; text-align: center;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bang-mau-pop .duoi {
  border-top: 1px solid var(--vien); margin-top: 9px; padding-top: 9px;
  display: flex; align-items: center; gap: 8px;
}
.bang-mau-pop .duoi .ghi-chu { margin: 0; flex: 1; }
.bang-mau-pop .duoi input[type="color"] { width: 46px; height: 30px; padding: 2px; flex: none; }
.bang-mau-pop .duoi .bo-mau {
  border: 1px solid var(--vien); background: #fff; border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--mo);
}
.bang-mau-pop .duoi .bo-mau:hover { background: #f1f5f9; }

/* ---- Hộp hỏi tự vẽ, thay cho confirm và alert của trình duyệt ---- */
.hoi-chu { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.hoi-chu b { color: #1f2328; }
.hoi-chu .ds-giu {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: #fbfaf8; border: 1px solid #ece7df; font-size: 13px; max-height: 190px; overflow: auto;
}
.hoi-chu .ds-giu div { padding: 2px 0; }
#lop-hoi .nut.nguy-hiem { background: var(--do); border-color: var(--do); color: #fff; font-weight: 600; }
#lop-hoi .nut.nguy-hiem:hover { background: #c81040; }

/* ---- Vùng dính: hàng ô số liệu và thẻ lọc, không trôi khi cuộn ---- */
.vung-dinh {
  position: sticky; top: var(--cao-hai-thanh, 97px); z-index: 25;
  background: var(--nen);
  /* Kéo rộng ra hai bên rồi đệm lại, để nội dung cuộn bên dưới không lú ra mép. */
  margin: 0 -16px; padding: 10px 16px 0;
  box-shadow: 0 6px 10px -8px rgba(16, 24, 40, .22);
}
.vung-dinh > *:last-child { margin-bottom: 0; }
.vung-dinh .tom-tat { padding-bottom: 10px; }
.vung-dinh .ghi-chu-tim { padding-bottom: 10px; }

/* Thanh việc hàng loạt dính NGAY DƯỚI vùng lọc, không đè lên nó. */
.thanh-chon { top: var(--cao-dinh-het, 200px); }

/* ═══════ MÀN TÍCH ĐIỂM ═══════
   Tên lớp đều bắt đầu bằng "diem-" hoặc "ct-" cho khỏi trùng lớp cũ:
   cả hai file kiểu đều phẳng, đặt tên một chữ chung chung là dính nhau. */

/* Nút nguy hiểm nằm ngay trên thẻ lọc, phải nhìn ra ngay là việc mất dữ liệu. */
.nut-dat-lai-het { margin-left: auto; color: var(--do); border-color: #f7c9d4; }
.nut-dat-lai-het:hover { background: #fdeaea; border-color: var(--do); }

.so-diem { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--cam-dam); }
.diem-cong { color: var(--luc); font-variant-numeric: tabular-nums; }
.diem-tru { color: var(--do); font-variant-numeric: tabular-nums; }

.diem-tom-tat {
  background: var(--cam-nhat); border: 1px solid #ffd8cc; border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px;
}
.diem-tom-tat .so-diem { font-size: 16px; }

/* Hai nút Cộng thêm và Trừ bớt trong hộp cộng trừ, dùng lại kiểu thẻ lọc. */
.ct-huong { margin-top: 6px; }

/* ═══════ TAB DỮ LIỆU: NGUỒN KHO HÀNG ═══════ */

/* Thẻ chọn nguồn kho. Dùng "dl-" cho khỏi trùng lớp cũ. */
.dl-the { position: relative; }

/* Thẻ đang dùng viền cam nhạt cho nổi. */
.dl-the-chon { border-color: var(--cam); box-shadow: 0 0 0 3px rgba(255,87,34,.10); }

/* Thẻ khoá làm mờ đi, cho biết chưa bật được. */
.dl-the-khoa { opacity: .72; background: #fbfbfc; }
.dl-the-khoa h3 { color: #6b7178; }

/* Viên nhãn góc phải đầu thẻ: "Đang dùng" hoặc "Sắp có". */
.dl-huy { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dl-huy-dung { background: #e7f7ed; color: var(--luc); }
.dl-huy-sapco { background: #eef1f4; color: #8a9099; }

/* ═══════ TAB BÀN GIAO SHOP MỚI ═══════ */

.bg-kiem { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* Mỗi dòng kiểm là một nút bấm được, xanh là xong, đỏ là thiếu. */
.bg-dong {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--vien); border-radius: 10px; padding: 11px 12px; background: #fff;
  font-size: 14px; cursor: pointer;
}
.bg-dong:hover { background: #f7f8f9; }
.bg-cham {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff;
}
.bg-xong .bg-cham { background: var(--luc); }
.bg-thieu .bg-cham { background: var(--do); }
.bg-ten { flex: 0 0 auto; font-weight: 600; }
.bg-val { flex: 1; text-align: right; color: var(--mo); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-thieu .bg-val { color: var(--do); }

.bg-ky-thuat { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: #33393f; }

.bg-dem { margin: 12px 0; font-size: 14px; }

/* Nút xoá to, đỏ, cho biết là việc mạnh tay. */
.bg-nut-xoa { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }

/* ============ Màn "Giới thiệu": bộ ảnh quảng cáo, ưu đãi ============
   Tên lớp đều có tiền tố gt- riêng, không lấy tên một chữ chung chung,
   vì file kiểu này phẳng và dùng chung cho cả trang, rất dễ trùng tên lớp cũ. */
.gt-ds { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }

.gt-bo {
  border: 1px solid var(--vien);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px 12px;
}
.gt-bo.gt-an { opacity: .55; }

.gt-bo-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gt-stt { font-weight: 700; font-size: 14px; }
.gt-co { color: var(--mo); font-size: 12.5px; margin-right: auto; }

/* Hàng ảnh trong một bộ: xếp ngang, tràn thì kéo ngang, đúng như khách vuốt. */
.gt-hang { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.gt-tam { flex: 0 0 240px; border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.gt-tam-anh { position: relative; background: #f4f5f7; line-height: 0; }
.gt-tam-anh img { width: 100%; height: auto; display: block; }
.gt-tam-viec { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--vien); }

.gt-tam-so {
  position: absolute;
  /* 🧨 Khung ảnh để line-height: 0 cho ảnh khỏi hở chân, viên chữ nằm trong đó bị lây
     và xẹp còn 4 điểm ảnh, chữ số bị cắt đôi. Phải trả lại chiều cao dòng cho riêng nó. */
  line-height: 1.5;
  left: 8px;
  bottom: 8px;
  background: rgba(31, 35, 40, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 20px;
}

.gt-nhan-dong,
.gt-nhan-clip,
.gt-nhan-an {
  line-height: 1.5;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
}
.gt-nhan-dong { position: absolute; top: 8px; left: 8px; background: rgba(22, 163, 74, .92); }
/* Nhãn trên tấm bìa của clip, kèm độ dài clip. Màu khác hẳn nhãn ảnh động cho khỏi lẫn. */
.gt-nhan-clip { position: absolute; top: 8px; left: 8px; background: rgba(37, 99, 235, .92); }
.gt-nhan-an { background: rgba(31, 35, 40, .78); }

/* Dòng đếm "đã đăng mấy clip, còn mấy chỗ". Hết chỗ thì đổi màu cho biết là đang chặn. */
.gt-dem-clip {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mo);
}
.gt-dem-clip.gt-het-cho { color: var(--do); }

/* Dòng nhắc "máy chủ chưa cài bộ đổi clip". Chỉ hiện khi đúng là chưa có, nên phải nổi lên. */
.gt-nhac {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}

/* Dòng "đang tải clip lên: 45%". Màu xám, tách hẳn khỏi dòng báo lỗi màu đỏ ngay dưới nó. */
.gt-dang {
  margin: 8px 0;
  font-size: 13px;
  color: var(--mo);
}

/* Đang tải ảnh lên thì nhãn "+ Tải ảnh lên" mờ đi và không bấm được nữa. */
.dang-ban { opacity: .5; pointer-events: none; }

/* Ô chọn "bấm vào ảnh thì đi đâu", nằm dưới mỗi tấm trong bộ. */
.gt-dich { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.gt-dich select,
.gt-dich input { width: 100%; font-size: 13px; padding: 7px 8px; }
.gt-nhan-dich {
  padding: 0 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mo);
}

/* Chữ nhắc "chưa bấm Lưu chỗ đến" và nhãn "ảnh trong bộ lệch cỡ nhau". */
.gt-chua-luu { color: var(--do); }
.gt-nhan-lech {
  line-height: 1.5;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(217, 119, 6, .92);
}

/* Dòng phụ "giá · còn bán hay không" nằm dưới tên hàng. Mở bằng máy tính thì GIẤU ĐI,
   vì trên đó đã có sẵn cột Giá bán và cột Trạng thái riêng. */
.dong-dt { display: none; }

/* ============================================================================
   MÀN TIN NHẮN
   ============================================================================
   Máy tính: hai cột, trái là danh sách khách, phải là khung trò chuyện.
   Điện thoại: mỗi lúc một cột (luật ở khối màn hẹp cuối tệp).
   🧨 Mọi tên lớp ở đây đều mang tiền tố "chat-": hai tệp kiểu của trang đều phẳng,
   đặt tên một chữ chung chung là trúng ngay lớp cũ của màn khác.
   ========================================================================== */

/* Chấm đỏ trên tên thẻ "Tin nhắn" */
.chat-cham {
  display: inline-block;
  min-width: 17px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 20px;
  background: var(--do);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  vertical-align: 1px;
}

/* Cao đúng phần màn còn lại, để danh sách và khung tin tự cuộn BÊN TRONG,
   chứ không đẩy cả trang dài ra rồi ô gõ chữ tụt xuống tận đáy. */
.chat-khung {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  height: calc(100vh - var(--cao-hai-thanh, 100px) - 32px);
  min-height: 420px;
}

.chat-trai,
.chat-phai {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 10px;
  overflow: hidden;
}

.chat-tim-boc { padding: 10px; border-bottom: 1px solid var(--vien); }
.chat-tim-boc .o-tim-pos { width: 100%; }

.chat-ds { flex: 1; overflow-y: auto; }

.chat-muc {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 42px 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--vien);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.chat-muc:hover { background: #fafbfc; }
.chat-muc.chat-dang-mo { background: var(--cam-nhat); }

.chat-muc-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-muc-dau b { font-size: 14px; }
.chat-muc-dau small { color: var(--mo); font-size: 11.5px; white-space: nowrap; }

/* Câu cuối chỉ một dòng, dài thì cắt bằng ba chấm. Bọc chữ vào thẻ con thì mới cắt được. */
.chat-muc-cau {
  display: block;
  margin-top: 2px;
  color: var(--mo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-muc-sdt { display: block; margin-top: 2px; color: var(--mo); font-size: 11.5px; }

.chat-muc-so {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 19px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--do);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.chat-dau {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vien);
}
.chat-dau-ten { flex: 1; min-width: 0; }
.chat-dau-ten b { display: block; font-size: 15px; }
.chat-dau-ten small { color: var(--mo); font-size: 12px; }
.chat-xoa { flex: 0 0 auto; }
/* Nút quay lại danh sách chỉ có nghĩa trên điện thoại, nơi mỗi lúc chỉ hiện một cột. */
.chat-lui { display: none; }

.chat-tin {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: var(--nen);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bong {
  max-width: 72%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  /* Tin nhắn có xuống dòng thì giữ nguyên chỗ xuống dòng đó.
     🧨 Chỉ cho bẻ chữ GIỮA HAI CHỮ, đừng cho bẻ thoải mái: bẻ thoải mái thì tên và
     số điện thoại khách gõ trong tin bị gãy làm mấy khúc, nhìn như tin hỏng. */
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}
.chat-cua-khach { align-self: flex-start; background: #fff; border: 1px solid var(--vien); }
.chat-cua-shop { align-self: flex-end; background: var(--cam); color: #fff; }

.chat-gio { display: block; margin-top: 3px; font-size: 11px; opacity: .7; text-align: right; }

/* Ảnh trong tin nhắn: thu nhỏ vừa bong bóng, bấm vào mới mở cỡ thật. */
.chat-anh {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  margin-bottom: 4px;
  cursor: zoom-in;
}

/* Lớp phủ xem ảnh cỡ thật. Bấm chỗ nào cũng đóng. */
.chat-xem-anh {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.chat-xem-anh img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* Cái kẹp giấy gọi ô chọn ảnh. Vuông vắn cho cân với nút Gửi bên kia. */
.chat-kep { flex: 0 0 auto; min-height: 38px; padding: 0 11px; font-size: 16px; }

.chat-go {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--vien);
}
.chat-go textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--vien);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.chat-go textarea:focus { outline: none; border-color: var(--cam); }
.chat-go .nut { min-height: 38px; }

.chat-trong { padding: 30px 16px; text-align: center; color: var(--mo); }

/* ============================================================================
   MỞ BẰNG ĐIỆN THOẠI (màn hẹp dưới 760 điểm ảnh)
   ============================================================================
   Trang này vốn dựng theo khuôn phần mềm bán hàng ở quầy, tức là cho màn hình máy tính.
   Mở bằng điện thoại thì: hai thẻ cuối ("Cài đặt shop", "Bàn giao") nằm ngoài màn không bấm
   tới được, cả trang bị bóp nhỏ lại, và bảng hàng 12 cột rộng gấp bốn lần màn hình.
   Khối luật dưới đây chỉ chạy khi màn hẹp, KHÔNG đụng gì tới lúc mở bằng máy tính.
   ========================================================================== */
@media (max-width: 760px) {
  /* ---- Thanh thẻ trang: xuống dòng cho thấy đủ 8 thẻ ----
     🧨 Đây cũng là thủ phạm làm cả trang bị bóp nhỏ: nó là một hàng ngang không chịu xuống
     dòng, rộng 522 điểm ảnh, nên trang không bao giờ hẹp hơn ngần ấy dù màn chỉ 390. */
  /* Trên điện thoại, thẻ trang vẽ thành NÚT BẤM tròn cạnh chứ không phải chữ trơn gạch chân:
     chữ trơn xếp hai hàng nhìn như một đoạn văn bị ngắt, không ra chỗ bấm. Chủ shop chốt 17/08.
     Mở bằng máy tính vẫn là thẻ gạch chân như cũ. */
  /* MỘT HÀNG NGANG, VUỐT TRÁI PHẢI để tìm thẻ. Xếp hai hàng thì nhìn xấu và chiếm chỗ.
     Cố ý KHÔNG dùng kiểu "vuốt ăn khớp từng nút": để nút kế tiếp ló ra một nửa ở mép,
     nhìn là biết còn nữa mà vuốt. */
  .thanh-muc {
    flex-wrap: nowrap; gap: 5px; padding: 7px 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .thanh-muc::-webkit-scrollbar { display: none; }

  /* ---- Khuôn chung cho MỌI hàng nút vuốt ngang (thanh thẻ trang, mấy viên lọc) ----
     Hai vệt mờ hai bên: bên nào CÒN NÚT thì bên đó mờ dần và có bóng, vuốt hết thì tắt. */
  .hop-vuot { position: relative; }
  .hop-thanh-muc.hop-vuot { position: sticky; }
  .hop-vuot::before, .hop-vuot::after {
    content: ""; position: absolute; top: 0; bottom: 1px; width: 34px;
    pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 1;
  }
  .hop-vuot::before {
    left: 0;
    background: linear-gradient(to right, #fff 35%, rgba(255, 255, 255, 0));
    box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .35) inset;
  }
  .hop-vuot::after {
    right: 0;
    background: linear-gradient(to left, #fff 35%, rgba(255, 255, 255, 0));
    box-shadow: -6px 0 8px -6px rgba(16, 24, 40, .35) inset;
  }
  .hop-vuot.con-trai::before, .hop-vuot.con-phai::after { opacity: 1; }
  .muc {
    flex: 0 0 auto;
    border: 1px solid var(--vien); border-radius: 8px; background: #fff;
    padding: 7px 12px; font-size: 13px; color: #545b62;
  }
  .muc.dang-chon {
    background: var(--cam); border-color: var(--cam); color: #fff; font-weight: 600;
    border-bottom-color: var(--cam);
  }

  /* ---- Vùng lọc THÔI DÍNH trên đầu ----
     Trên máy tính thì dính rất tiện. Trên điện thoại, hàng ô số liệu cộng thẻ lọc chiếm gần
     nửa màn hình; dính luôn ở đó thì còn chỗ đâu mà xem danh sách. */
  .vung-dinh { position: static; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  /* Thanh việc hàng loạt dính theo vùng lọc, mà vùng lọc hết dính rồi thì nó dính ngay dưới
     hai thanh trên, không thì nó neo hụt xuống giữa màn. */
  .thanh-chon { top: var(--cao-hai-thanh, 97px); }

  .than { padding: 12px; }

  /* ---- Ô số liệu: MỖI Ô MỘT DÒNG, chữ nằm ngang ----
     Xếp hai ô một hàng mà chữ vẫn xếp dọc ba tầng (tên, số, chú thích) thì riêng hàng ô số liệu
     đã ngốn gần nửa màn điện thoại, phải cuộn mãi mới thấy danh sách. Chủ shop chốt 17/08:
     mỗi ô một dòng, đọc như một câu "MẶT HÀNG: 28 · Trong bộ lọc đang bật". Cao còn chưa tới
     một nửa. */
  /* Mỗi ô chiếm trọn một hàng, RIÊNG ô nào đánh dấu "o-nua" thì hai ô ghép chung một hàng
     (mấy ô số ngắn như "Sắp hết", "Hết hàng"). Chủ shop chốt 17/08. */
  .pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pill { grid-column: span 2; }
  .pill.o-nua { grid-column: span 1; }
  .pill { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 7px 12px; }
  /* 🧨 Bỏ khoảng hở BÊN TRONG tên ô, không thì dấu hai chấm bị đẩy ra xa thành "MẶT HÀNG : 28".
     Tên ô vốn là một hàng ngang có chừa khoảng hở sẵn cho biểu tượng, mà ở đây chỉ có chữ. */
  .pill .t { font-size: 12px; gap: 0; }
  .pill .t::after { content: ":"; }
  .pill .v { font-size: 16px; margin: 0; }
  /* 🧨 Giấu dòng chú thích nhỏ. Giữ lại thì mấy ô có số dài ("TIỀN VỐN TỒN: 120.390.000đ ·
     Tồn kho nhân giá vốn") gãy làm hai dòng, không còn gọn nữa. Chủ shop chốt: mỗi ô ĐÚNG MỘT
     DÒNG. Mở bằng máy tính thì chú thích vẫn còn đủ. */
  .pill .s { display: none; }

  /* ---- Thẻ lọc: mỗi thứ một hàng, bấm cho dễ trúng ---- */
  .the-loc-pos { padding: 10px; gap: 8px; }
  /* Mấy viên lọc cũng MỘT HÀNG NGANG VUỐT được, y như thanh thẻ trang (chủ shop chốt 17/08).
     Trước đó thử cho xuống dòng thành hai hàng, chủ shop bảo làm giống thanh thẻ cho đồng bộ. */
  .the-loc-pos .hop-vuot { flex: 1 1 100%; min-width: 0; }
  .the-loc-pos .the-loc {
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 1px 0;
  }
  .the-loc-pos .the-loc::-webkit-scrollbar { display: none; }
  .the-loc-pos .the-loc .the { flex: 0 0 auto; }
  /* Ô tìm CO GIÃN chứ không chiếm trọn một hàng: chiếm trọn thì viên chọn ngày (và nút Xoá lọc)
     bị đẩy xuống hàng dưới, nằm chỏng chơ một mình bên trái, chừa một mảng trống to bên phải.
     Chủ shop chốt 17/08: cho cùng một hàng. Hẹp quá thì nó vẫn tự xuống dòng. */
  .o-tim-pos { flex: 1 1 160px; min-width: 0; height: 40px; }
  /* Ô chọn nhóm hàng và ô chọn nhóm khách cũng CO GIÃN để đứng cùng hàng với ô tìm.
     Để mỗi thứ chiếm trọn một hàng thì thẻ lọc dài ngoằng, đẩy danh sách xuống tận đáy màn. */
  .chon-loc, .hopchon { flex: 1 1 140px; width: auto; max-width: none; min-width: 0; }
  .hopchon > .nut-chon { width: 100%; min-width: 0; }
  .the-loc-pos .nut { flex: 1 1 auto; }

  /* ---- Bảng: giấu bớt cột phụ ----
     Giữ lại đúng những cột nhìn là biết món gì, còn lại xem trên máy tính hoặc bấm vào
     dòng để mở ra xem đủ. Bảng vẫn kéo ngang được nếu cần. */
  .bang th, .bang td { padding: 10px 8px; }

  /* Quản lý hàng: bỏ ô tích, mã công ty, nhóm hàng, GIÁ BÁN, giá vốn, màu, trạng thái.
     Giá bán và trạng thái không mất đi đâu: chúng chui xuống ngay dưới tên hàng (dòng .dong-dt),
     nhờ vậy nhìn một cột là biết đủ tên, giá, còn bán hay không. */
  #man-hang .bang th:nth-child(1), #man-hang .bang td:nth-child(1),
  #man-hang .bang th:nth-child(4), #man-hang .bang td:nth-child(4),
  #man-hang .bang th:nth-child(6), #man-hang .bang td:nth-child(6),
  #man-hang .bang th:nth-child(7), #man-hang .bang td:nth-child(7),
  #man-hang .bang th:nth-child(8), #man-hang .bang td:nth-child(8),
  #man-hang .bang th:nth-child(9), #man-hang .bang td:nth-child(9),
  #man-hang .bang th:nth-child(11), #man-hang .bang td:nth-child(11) { display: none; }

  /* Dòng phụ dưới tên hàng: chỉ hiện khi mở bằng điện thoại. */
  .dong-dt { display: block; font-size: 12px; color: var(--mo); font-weight: 600; margin-top: 3px; }

  /* 🧨 Chia bề ngang CỨNG cho từng cột, đừng để bảng tự co giãn. Để bảng tự tính thì tên hàng
     dài chiếm hết chỗ (đo được 220 điểm ảnh cho riêng cột tên), cả bảng phình 533 trong khi
     màn chỉ có 364, thế là vẫn phải kéo ngang. Cột tên ăn phần còn lại và tự xuống dòng. */
  #man-hang .bang { table-layout: fixed; width: 100%; }
  #man-hang .bang th:nth-child(2), #man-hang .bang td:nth-child(2) { width: 44px; }
  #man-hang .bang th:nth-child(3), #man-hang .bang td:nth-child(3) { width: 70px; }
  /* 🧨 Mã hàng KHÔNG được bẻ giữa chừng. Cho bẻ thoải mái thì "PK0003" xuống dòng thành
     "PK00" và "03", nhìn như hai mã khác nhau. */
  #man-hang .bang td:nth-child(3) { overflow-wrap: normal; word-break: keep-all; }
  #man-hang .bang th:nth-child(10), #man-hang .bang td:nth-child(10) { width: 46px; }
  #man-hang .bang th:nth-child(12), #man-hang .bang td:nth-child(12) { width: 66px; }
  /* 🧨 Bảng vốn cấm chữ xuống dòng (white-space: nowrap) cho gọn trên máy tính. Trên điện thoại
     chính chỗ đó làm cột không chịu hẹp lại: tên cột "Tên sản phẩm" giữ nguyên một hàng là bảng
     phình ra, đã chỉnh bề ngang từng cột mà vẫn thừa. Cho phép xuống dòng thì mới ăn. */
  .bang, .bang th, .bang td { white-space: normal; }
  /* 🧨 Cho xuống dòng GIỮA HAI CHỮ thôi, TUYỆT ĐỐI không bẻ giữa một chữ. Đã dính: để bẻ thoải
     mái thì tên khách "Võ Thị Kim Ngân" gãy thành "Võ Thị Ki / m Ng / ân", số điện thoại gãy làm
     ba khúc, cả bảng khách hàng nhìn như hỏng. */
  .bang td, .bang th { overflow-wrap: normal; word-break: normal; }
  .bang td:last-child .nut { padding: 5px 6px; font-size: 12px; }

  /* Hai nút cuối dòng xếp dọc cho cột hẹp lại. Nút "Ngừng bán" có lề trái viết thẳng trong
     mã nên phải ép bỏ, không thì nó vẫn thụt sang phải. */
  .bang td:last-child { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
  /* Chữ trong nút được phép xuống dòng. Ép một hàng thì nút "Ngừng bán" rộng hơn ô chứa nó,
     kéo cả bảng phình ra 17 điểm ảnh, chỉnh bề ngang cột kiểu gì cũng không hết. */
  /* Nút chỉ được xuống dòng GIỮA HAI CHỮ, không bẻ giữa một chữ: "Ngừng bán" mà bẻ bậy
     thành "Ngừ / ng bán" thì đọc không ra. */
  .bang td:last-child .nut { margin-left: 0 !important; overflow-wrap: normal; word-break: keep-all; }
  .anh-nho, .anh-trong { width: 40px; height: 40px; }

  /* Khách hàng: SỐ ĐIỆN THOẠI chui xuống ngay dưới tên (chủ shop chốt 17/08), nên bỏ hẳn cột
     số điện thoại riêng. Chỗ trống dành cho Ô CHỌN NHÓM KHÁCH: nhóm quyết định khách xem được
     giá nào, giấu đi thì mở bằng điện thoại không xếp nhóm cho khách được. */
  #man-khach .bang th:nth-child(2), #man-khach .bang td:nth-child(2),
  #man-khach .bang th:nth-child(5), #man-khach .bang td:nth-child(5),
  #man-khach .bang th:nth-child(6), #man-khach .bang td:nth-child(6),
  #man-khach .bang th:nth-child(7), #man-khach .bang td:nth-child(7) { display: none; }
  #man-khach .bang { table-layout: fixed; width: 100%; }
  #man-khach .bang th:nth-child(3), #man-khach .bang td:nth-child(3) { width: 88px; }
  #man-khach .bang th:nth-child(4), #man-khach .bang td:nth-child(4) { width: 58px; }
  #man-khach .bang th:nth-child(8), #man-khach .bang td:nth-child(8) { width: 66px; }
  #man-khach .bang select { font-size: 12px; padding: 6px 4px; }
  /* Tên cột "Nhóm khách, quyết định giá" dài quá, gãy làm ba dòng làm đầu bảng cao ngồng.
     Trên điện thoại rút gọn còn "Nhóm", trên máy tính vẫn ghi đủ. */
  #man-khach .bang th:nth-child(3) { font-size: 0; }
  #man-khach .bang th:nth-child(3)::after { content: "Nhóm"; font-size: 12.5px; }

  /* 🧨 Giấu vòng tròn chữ cái đầu tên. Nó chiếm gần 50 điểm ảnh, mà chỗ đó đang phải chia cho
     tên khách; để lại thì tên gãy thành bốn dòng "Võ / Thị / Kim / Ngân". */
  .vong-ten { display: none; }

  /* Tích điểm: cũng gộp số điện thoại xuống dưới tên. */
  #man-diem .bang th:nth-child(2), #man-diem .bang td:nth-child(2) { display: none; }
  #man-diem .bang { table-layout: fixed; width: 100%; }
  #man-diem .bang th:nth-child(4), #man-diem .bang td:nth-child(4) { width: 74px; }
  #man-diem .bang th:nth-child(7), #man-diem .bang td:nth-child(7) { width: 72px; }

  /* Ô tên khách: vòng tròn chữ cái bên trái, tên và số điện thoại xếp dọc bên phải. */
  .o-khach { align-items: flex-start; gap: 8px; }
  .o-khach-chu { min-width: 0; }

  /* Tích điểm: bỏ nhóm khách, quy ra tiền, thay đổi gần nhất */
  #man-diem .bang th:nth-child(3), #man-diem .bang td:nth-child(3),
  #man-diem .bang th:nth-child(5), #man-diem .bang td:nth-child(5),
  #man-diem .bang th:nth-child(6), #man-diem .bang td:nth-child(6) { display: none; }

  /* ---- Thẻ đơn hàng: giấu danh sách món, thay bằng nút "Xem hàng" ----
     Bày cả danh sách món ra ngoài thì mỗi đơn dài cả màn hình, lướt tìm đơn rất mệt. */
  .the-don-hang > .don-hang-ds { display: none; }
  .nut-xem-hang { display: inline-flex; align-items: center; }
  /* Dòng tổng tiền nằm riêng một hàng, ba cái nút chia đều hàng dưới. Nhét chung một hàng thì
     nút nào cũng hẹp còn hơn ngón tay, chữ trong nút gãy làm ba dòng. */
  .don-cuoi { flex-wrap: wrap; gap: 8px; }
  .don-tong { flex: 1 1 100%; }
  .don-nut { flex: 1 1 100%; }
  .don-nut .nut { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 9px 6px; }

  /* ---- Cửa sổ bật lên: chiếm gần hết màn, các cột xếp dọc ---- */
  .lop-phu { padding: 8px; align-items: flex-start; }
  .hop, .hop-to { max-height: 94vh; }
  .luoi2, .luoi3, .luoi4 { grid-template-columns: 1fr; }
  .dpop { left: 0; right: 0; width: auto; max-width: calc(100vw - 24px); }
  .dpop .cot { width: 100%; }

  /* ---- Màn Cài đặt shop và Bàn giao: một cột ---- */
  .luoi-caidat { grid-template-columns: 1fr; }
  .hop-caidat .phan-dau { flex-wrap: wrap; gap: 8px; }

  /* ---- Màn Giới thiệu: tấm ảnh trong bộ rộng gần hết màn ---- */
  .gt-tam { flex: 0 0 78%; }

  /* ---- Nút bấm to hơn cho vừa ngón tay ---- */
  .nut { min-height: 38px; }
  .nut.nho { min-height: 34px; }

  /* ---- Màn Tin nhắn: MỖI LÚC MỘT CỘT ----
     Màn 390 điểm ảnh mà chia hai cột thì cột nào cũng hẹp tới mức không đọc được.
     Mặc định hiện danh sách khách; bấm một khách thì đổi sang khung trò chuyện,
     và nút "←" đưa quay lại danh sách. */
  .chat-khung {
    grid-template-columns: 1fr;
    /* Thanh thẻ trang trên điện thoại thôi dính, nên chừa chỗ theo chiều cao thật của nó. */
    height: calc(100vh - var(--cao-hai-thanh, 100px) - 24px);
    min-height: 360px;
  }
  .chat-phai { display: none; }
  .chat-khung.chat-dang-xem .chat-trai { display: none; }
  .chat-khung.chat-dang-xem .chat-phai { display: flex; }
  .chat-lui { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; }
  .chat-bong { max-width: 86%; }
  /* Nút xoá rút còn mỗi chữ "Xoá": để cả câu thì nó chiếm hết chỗ của tên khách. */
  .chat-xoa-dai { display: none; }
}