/* ill.vn — Trang quản trị. CSS thuần, không phụ thuộc thư viện ngoài (đúng tinh thần dự án: ít phụ
   thuộc, dễ bảo trì — xưởng in ở nhiều nơi mạng có thể yếu, không nên phụ thuộc CDN ngoài). */

:root {
  --nen: #f6f7f5;
  --mat-the: #ffffff;
  --vien: #e2e5e0;
  --chu: #24291f;
  --chu-nhat: #6b7161;
  --chinh: #2f6b4f;
  --chinh-dam: #24523d;
  --chinh-nhat: #eaf3ee;
  --nguy-hiem: #b3432b;
  --nguy-hiem-nhat: #fbeae5;
  --canh-bao: #9a6b12;
  --canh-bao-nhat: #fbf1de;
  --bo-radius: 10px;
  --bong: 0 1px 2px rgba(36, 41, 31, 0.06), 0 1px 12px rgba(36, 41, 31, 0.04);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--chinh-dam); }

/* ===== Bố cục khung: sidebar + nội dung ===== */
.khung {
  display: flex;
  min-height: 100vh;
}
.thanh-ben {
  width: 240px;
  flex: none;
  background: var(--mat-the);
  border-right: 1px solid var(--vien);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 4px;
}
.thanh-ben .logo {
  font-weight: 700;
  font-size: 17px;
  color: var(--chinh-dam);
  padding: 4px 10px 18px;
  letter-spacing: 0.2px;
}
.thanh-ben nav { display: flex; flex-direction: column; gap: 2px; }
.thanh-ben nav a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--chu);
  text-decoration: none;
  font-size: 14px;
}
.thanh-ben nav a:hover { background: var(--nen); }
.thanh-ben nav a.dang-chon { background: var(--chinh-nhat); color: var(--chinh-dam); font-weight: 600; }

/* Khối menu "gấp gọn" (VD nhóm "Cấu hình") — nút tiêu đề nhỏ, chữ hoa nhẹ, mũi tên xoay khi mở; các
   mục con dùng "display:contents" để khi MỞ thì xếp y như mục thường trong cột (không lồng thêm 1 cấp
   thụt lề) — chỉ ẩn/hiện cả khối bằng thuộc tính [hidden] của trình duyệt. */
.thanh-ben nav .nhom-tieu-de {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--chu-nhat);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.thanh-ben nav .nhom-tieu-de:hover { background: var(--nen); color: var(--chu); }
.thanh-ben nav .nhom-tieu-de .mui-ten { display: inline-block; transition: transform 0.15s ease; }
.thanh-ben nav .nhom-tieu-de.dang-mo .mui-ten { transform: rotate(90deg); }
.thanh-ben nav .nhom-noi-dung { display: contents; }
.thanh-ben nav .nhom-noi-dung[hidden] { display: none; }

.thanh-ben .khoang-day { flex: 1; }
.thanh-ben .thong-tin-tk {
  border-top: 1px solid var(--vien);
  padding-top: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--chu-nhat);
}
.thanh-ben .thong-tin-tk .ten { color: var(--chu); font-weight: 600; display: block; margin-bottom: 6px; }
.thanh-ben .thong-tin-tk button { width: 100%; margin-top: 8px; }
.thanh-ben .thong-tin-tk a.doi-mk {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--vien);
  border-radius: 8px;
  background: var(--mat-the);
  color: var(--chu);
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  box-sizing: border-box;
}
.thanh-ben .thong-tin-tk a.doi-mk:hover { background: var(--nen); }
.thanh-ben .thong-tin-tk a.doi-mk.dang-chon { background: var(--chinh-nhat); border-color: #bfe0cf; color: var(--chinh-dam); font-weight: 600; }

.noi-dung {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 60px;
  max-width: 980px;
}
.noi-dung h1 { margin: 0 0 6px; font-size: 22px; }
.mo-ta-trang { color: var(--chu-nhat); margin: 0 0 28px; max-width: 62ch; }

/* ===== Thẻ / khối nội dung ===== */
.the {
  background: var(--mat-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-radius);
  box-shadow: var(--bong);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.the.the-hep { max-width: 420px; }
.the h2 { margin: 0 0 4px; font-size: 16px; }
.the .the-mo-ta { color: var(--chu-nhat); font-size: 13.5px; margin: 0 0 16px; }

/* ===== Form ===== */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--chu); }
.goi-y { font-weight: 400; color: var(--chu-nhat); font-size: 12.5px; margin-top: 3px; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--vien);
  border-radius: 7px;
  font-size: 14px;
  background: var(--mat-the);
  color: var(--chu);
  font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--chinh);
  outline-offset: 1px;
}
.truong { margin-bottom: 14px; }
.hang-truong { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ghi-chu-truong { display: block; margin-top: 4px; font-size: 12px; color: var(--chu-nhat); }

/* Nút "hiện mật khẩu" (con mắt) — cho khách tự kiểm tra đã gõ đúng mật khẩu chưa trước khi bấm đăng
   ký/đổi mật khẩu (góp ý 10/09: khách hay gõ sai mà không biết vì ô password che hết). Bọc input
   trong .boc-mat-khau (position:relative) để neo nút vào đúng góc phải trong ô, cùng nguyên tắc với
   .truong-co-goi-y ở trên. Áp dụng qua ganNutHienMatKhau() dùng chung trong app.js. */
.boc-mat-khau { position: relative; }
.boc-mat-khau input { padding-right: 40px; }
.nut-hien-mat-khau {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  background: none; border: none; padding: 6px 8px; font-size: 12.5px; font-weight: 600;
  color: var(--chu-nhat); cursor: pointer; border-radius: 5px;
}
.nut-hien-mat-khau:hover { color: var(--chu); background: var(--nen); }

/* Gợi ý khách hàng cũ khi lên đơn (don-hang.js) — dropdown nổi ngay dưới ô "Người đặt hàng"/"Điện
   thoại", cần .truong bọc ngoài đặt position:relative để neo đúng vị trí. */
.truong-co-goi-y { position: relative; }
.goi-y-khach-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--mat-the); border: 1px solid var(--vien); border-radius: 8px;
  margin-top: 4px; max-height: 220px; overflow-y: auto; box-shadow: var(--bong);
}
.goi-y-khach-dropdown .muc-goi-y { padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--vien); }
.goi-y-khach-dropdown .muc-goi-y:last-child { border-bottom: none; }
.goi-y-khach-dropdown .muc-goi-y:hover { background: var(--chinh-nhat); }
.goi-y-khach-dropdown .muc-goi-y .ten-chinh { font-weight: 600; color: var(--chu); }
.goi-y-khach-dropdown .muc-goi-y .chi-tiet-phu { color: var(--chu-nhat); font-size: 12px; }

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  cursor: pointer;
}
button.chinh { background: var(--chinh); color: #fff; }
button.chinh:hover { background: var(--chinh-dam); }
button.phu { background: var(--mat-the); border-color: var(--vien); color: var(--chu); }
button.phu:hover { background: var(--nen); }
button.nguy-hiem { background: var(--mat-the); border-color: var(--nguy-hiem); color: var(--nguy-hiem); }
button.nguy-hiem:hover { background: var(--nguy-hiem-nhat); }
button.nho { padding: 5px 10px; font-size: 12.5px; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ===== Bộ lọc / tìm kiếm / phân trang (danh sách dài — Đơn hàng, Hội thoại) ===== */
.hang-bo-loc { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.hang-bo-loc input[type="text"] { flex: 1; min-width: 200px; }
.hang-bo-loc select { width: auto; min-width: 160px; }
.hang-phan-trang { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--chu-nhat); }

/* ===== Bảng ===== */
.boc-bang { overflow-x: auto; border: 1px solid var(--vien); border-radius: 9px; }
.boc-bang.co-le-duoi { margin-bottom: 16px; }
.bang-minh-hoa-sp { font-size: 12.5px; margin: 6px 0 0; }
.bang-minh-hoa-sp summary { cursor: pointer; color: var(--chinh-dam); font-weight: 600; }
.mo-ta-moc-rieng { font-size: 12.5px; color: var(--chu-nhat); margin: 2px 0 0; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--vien); }
th { background: var(--nen); color: var(--chu-nhat); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbf9; }
td.so { text-align: right; font-variant-numeric: tabular-nums; }
td.hanh-dong { text-align: right; white-space: nowrap; }
td.hanh-dong button { margin-left: 6px; }

/* ===== Thông báo / toast ===== */
#khu-thong-bao { position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.thong-bao {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  box-shadow: var(--bong);
  border: 1px solid var(--vien);
  background: var(--mat-the);
}
.thong-bao.thanh-cong { background: var(--chinh-nhat); border-color: #bfe0cf; color: var(--chinh-dam); }
.thong-bao.loi { background: var(--nguy-hiem-nhat); border-color: #f0c6ba; color: var(--nguy-hiem); }

.the-loi { background: var(--nguy-hiem-nhat); border: 1px solid #f0c6ba; color: var(--nguy-hiem); border-radius: 8px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 14px; }
.the-loi[hidden] { display: none; }

.huy { color: var(--chu-nhat); font-size: 13px; }
.nhan { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.nhan.hoat-dong { background: var(--chinh-nhat); color: var(--chinh-dam); }
.nhan.khoa { background: var(--nguy-hiem-nhat); color: var(--nguy-hiem); }
.nhan.chu { background: var(--canh-bao-nhat); color: var(--canh-bao); }
.nhan.moi { background: var(--canh-bao-nhat); color: var(--canh-bao); }
.nhan.dang-lam { background: var(--chinh-nhat); color: var(--chinh-dam); }
.nhan.hoan-thanh { background: #e4ecf7; color: #2b5490; }
.nhan.da-huy { background: var(--nguy-hiem-nhat); color: var(--nguy-hiem); }
select.chon-trang-thai-dong { font-size: 12.5px; padding: 4px 6px; width: auto; }

.trong-rong { color: var(--chu-nhat); font-style: italic; padding: 18px 4px; }

.nhan-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 8px; }
.o-checkbox { width: auto; }

/* Máy tính giá — lưới checkbox "Sản phẩm đang kinh doanh" */
.luoi-san-pham { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; margin-bottom: 14px; }
.luoi-san-pham .nhan-checkbox { margin-bottom: 0; }

/* Máy tính giá — khối kết quả 1 lượt tính */
.ket-qua-mtg { display: flex; flex-direction: column; gap: 10px; }
.ket-qua-mtg .gia-ban { font-size: 26px; font-weight: 700; color: var(--chinh-dam); }
.ket-qua-mtg .don-gia { color: var(--chu-nhat); font-size: 13.5px; }
.ket-qua-mtg .nguon-gia { font-size: 12.5px; color: var(--chu-nhat); }
.ket-qua-mtg ul.mo-ta-gia-cong { margin: 0; padding-left: 18px; font-size: 13.5px; }
.ket-qua-mtg details { font-size: 12.5px; color: var(--chu-nhat); }
.ket-qua-mtg pre { white-space: pre-wrap; word-break: break-word; background: var(--nen); border: 1px solid var(--vien); border-radius: 8px; padding: 10px; font-size: 12px; }
button.quyen-toggle { background: var(--nen); border: 1px solid var(--vien); color: var(--chu-nhat); margin: 2px 4px 2px 0; }
button.quyen-toggle.bat { background: var(--chinh-nhat); border-color: #bfe0cf; color: var(--chinh-dam); }
td:has(button.quyen-toggle) { white-space: normal; min-width: 200px; }

/* ===== Trang đăng nhập (không có sidebar) ===== */
.man-dang-nhap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hop-dang-nhap { width: 100%; max-width: 380px; }
.hop-dang-nhap .logo { text-align: center; font-weight: 700; font-size: 20px; color: var(--chinh-dam); margin-bottom: 20px; }
.hop-dang-nhap button.chinh { width: 100%; margin-top: 6px; }

/* ===== Thẻ liên kết trang chủ ===== */
.luoi-lien-ket { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.the-lien-ket { display: block; text-decoration: none; }
.the-lien-ket h2 { color: var(--chu); }
.the-lien-ket:hover { border-color: var(--chinh); }

/* ===== Hội thoại — 2 cột (danh sách + khung chat) =====
   Trang này KHÔNG dùng giới hạn .noi-dung { max-width: 980px } chung của các trang quản trị khác
   (hợp lý cho bảng/form, nhưng bó hẹp không cần thiết cho khung chat trên màn hình rộng) — xem
   .noi-dung-rong bên dưới, gắn ở public/hoi-thoai.html. */
.noi-dung-rong { max-width: none; }
.hai-cot { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: calc(100vh - 150px); min-height: 420px; }
.cot-danh-sach { display: flex; flex-direction: column; overflow: hidden; }
.cot-danh-sach > input[type="text"] { margin-bottom: 10px; flex: none; }
.cot-danh-sach .ds-cuoc { flex: 1; overflow-y: auto; }
.muc-cuoc-hoi-thoai { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--vien); padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.muc-cuoc-hoi-thoai:hover { background: var(--nen); }
.muc-cuoc-hoi-thoai.dang-chon { background: var(--chinh-nhat); }
.muc-cuoc-hoi-thoai .ten-khach { font-weight: 600; font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; }
.muc-cuoc-hoi-thoai .tin-cuoi { color: var(--chu-nhat); font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muc-cuoc-hoi-thoai .luc { color: var(--chu-nhat); font-size: 11.5px; font-weight: 400; flex: none; }

.cot-chi-tiet { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.cot-chi-tiet .dau-chat { padding: 14px 18px; border-bottom: 1px solid var(--vien); }
.cot-chi-tiet .dau-chat h2 { margin: 0 0 2px; font-size: 15px; }
.hang-dau-chat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.khu-chi-dinh { display: flex; align-items: center; gap: 6px; flex: none; }
.khu-chi-dinh select { padding: 5px 7px; font-size: 12.5px; }
.khung-tin-nhan { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bong-tin { max-width: 72%; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.bong-tin .nguon { display: block; font-size: 10.5px; opacity: 0.65; margin-top: 3px; }
.bong-tin.vao { align-self: flex-start; background: var(--nen); border: 1px solid var(--vien); border-bottom-left-radius: 3px; }
.bong-tin.ra { align-self: flex-end; background: var(--chinh); color: #fff; border-bottom-right-radius: 3px; }
.bong-tin.ra.tu-nv { background: var(--chinh-dam); }
.khu-tra-loi { border-top: 1px solid var(--vien); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.khu-tra-loi textarea { width: 100%; resize: vertical; min-height: 60px; padding: 9px 11px; border: 1px solid var(--vien); border-radius: 7px; font: inherit; }
.hang-tra-loi-duoi { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hang-tra-loi-duoi > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hang-tra-loi-duoi .truong-nho { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--chu-nhat); }
.hang-tra-loi-duoi input[type="number"] { width: 70px; padding: 5px 7px; }
.the-canh-bao-zalo { background: var(--canh-bao-nhat); border: 1px solid #ecd9ab; color: var(--canh-bao); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; word-break: break-all; }
.the-canh-bao-zalo a { color: var(--chinh-dam); }
.the-canh-bao-zalo button { margin-left: 4px; }

/* ===== Cấu hình mẫu in — xem trước logo, nút xoá hồ sơ ===== */
.xem-truoc-logo { display: block; max-width: 160px; max-height: 80px; margin-top: 8px; border: 1px solid var(--vien); border-radius: 6px; padding: 4px; background: #fff; object-fit: contain; }
.form-mau-in .nut-xoa-ho-so { margin-left: 8px; }

/* ===== Hội thoại — ảnh/file đính kèm trong khung chat (thêm 05/09) ===== */
.anh-dinh-kem-chat { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: 2px; object-fit: cover; }
.tep-dinh-kem-chat { display: inline-block; text-decoration: none; font-weight: 600; }
.bong-tin.vao .tep-dinh-kem-chat { color: var(--chinh-dam); }
.bong-tin.ra .tep-dinh-kem-chat { color: #fff; text-decoration: underline; }

/* ===== Hội thoại — thu hồi tin nhắn (thêm 08/09/2026): nội dung GIỮ NGUYÊN, chỉ gạch ngang + làm mờ
   — chỉ đánh dấu nội bộ, không xoá được tin thật đã nằm bên Zalo của khách (xem hoiThoai.js). ===== */
.bong-tin.tin-da-thu-hoi { opacity: 0.5; text-decoration: line-through; }
.bong-tin.tin-da-thu-hoi .nguon { text-decoration: none; } /* dòng giờ/tên không cần gạch ngang theo, chỉ nội dung tin mới cần */
.nut-thu-hoi-tin { border: none; background: none; padding: 0; margin-left: 6px; font-size: 10.5px; text-decoration: underline; cursor: pointer; color: inherit; opacity: 0.85; }
.nut-thu-hoi-tin:hover { opacity: 1; }

@media (max-width: 760px) {
  .khung { flex-direction: column; }
  .thanh-ben { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--vien); }
  .thanh-ben nav { flex-direction: row; flex-wrap: wrap; }
  .thanh-ben .khoang-day { display: none; }
  .thanh-ben .thong-tin-tk { border-top: none; margin-top: 0; }
  .noi-dung { padding: 22px 18px 40px; }
}