/* THÀNH PHẦN — nút, ô nhập, nhãn, thẻ, toast, hộp thoại, khung tin.
 * Chỉ dùng token khai trong nen.css, không viết màu hay số đo tại chỗ. */

/* ===== Nút =============================================================== */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k2);
  padding: 0 var(--k4);
  height: 36px;
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  white-space: nowrap;
  transition: background var(--nhanh), border-color var(--nhanh), color var(--nhanh);
}

.nut:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nut:active:not(:disabled) {
  transform: translateY(1px);
}

.nut-chinh {
  background: var(--xanh);
  color: var(--tren-xanh);
}

.nut-chinh:hover:not(:disabled) {
  background: var(--xanh-dam);
}

.nut-vien {
  background: var(--nen-tam);
  color: var(--chu-vua);
  border: 1px solid var(--vien-dam);
}

.nut-vien:hover:not(:disabled) {
  background: var(--nen-chim);
  border-color: var(--xam-5);
}

.nut-ngam {
  color: var(--chu-vua);
}

.nut-ngam:hover:not(:disabled) {
  background: var(--nen-chim);
}

.nut-nguy {
  background: var(--loi);
  color: #fff;
}

.nut-nguy:hover:not(:disabled) {
  filter: brightness(1.08);
}

.nut-nho {
  height: 30px;
  padding: 0 var(--k3);
  font-size: var(--chu-1);
}

.nut-rong {
  width: 100%;
}

/* Nút chỉ có biểu tượng — luôn phải kèm aria-label trong HTML */
.nut-bieu-tuong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--goc-2);
  color: var(--chu-mo);
  font-size: var(--chu-4);
  line-height: 1;
  transition: background var(--nhanh), color var(--nhanh);
}

.nut-bieu-tuong:hover {
  background: var(--nen-chim);
  color: var(--chu);
}

/* ===== Ô nhập ============================================================ */

.o-sua,
.chon-tt,
.o-tim,
textarea.o-sua {
  width: 100%;
  min-height: 36px;
  padding: var(--k2) var(--k3);
  background: var(--nen-tam);
  color: var(--chu);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

textarea.o-sua {
  resize: vertical;
  line-height: 1.5;
}

.o-sua:focus,
.chon-tt:focus,
.o-tim:focus {
  outline: none;
  border-color: var(--xanh);
  box-shadow: 0 0 0 3px var(--xanh-nen);
}

.chon-tt {
  cursor: pointer;
  width: auto;
  min-width: 0;
}

.o-tim {
  padding-left: var(--k6);
  /* Kính lúp là ảnh nền data URI nên KHÔNG ăn được var(). Mã màu ở đây phải
   * chép tay từ --xam-6; đổi bảng màu thì nhớ đổi luôn chỗ này, không thì cả
   * trang sang lam mà riêng cái kính lúp còn ám lục.
   *
   * Cố ý dùng màu của chủ đề sáng cho cả hai chế độ: ở chế độ tối nó nằm trên
   * nền ô nhập tối nên vẫn đọc ra hình, và tách được thành hai ảnh theo chủ đề
   * thì phải nhân đôi cả chuỗi data URI. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7f9c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--k2) center;
  background-size: 15px;
}

/* Nhóm nhãn + ô nhập trong panel bên phải */
.nhom-sua {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding: var(--k4) var(--k4) var(--k5);
  border-bottom: 1px solid var(--vien);
}

.nhan-sua {
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

/* ===== Segmented control (phân đoạn) ===================================== */

.phan-doan {
  display: flex;
  padding: 3px;
  gap: 3px;
  background: var(--nen-chim);
  border-radius: var(--goc-2);
}

.phan-doan button {
  flex: 1;
  height: 30px;
  /* Nhãn KHÔNG được xuống dòng. Nút cao cố định 30px nên chữ tràn hai dòng là
   * lòi ra ngoài khung — "Khuyến mãi" từng bị bẻ đôi trong thanh công cụ. */
  white-space: nowrap;
  padding: 0 var(--k3);
  border-radius: var(--goc-1);
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  color: var(--chu-mo);
  transition: background var(--nhanh), color var(--nhanh);
}

.phan-doan button:hover {
  color: var(--chu);
}

.phan-doan button.dang-chon {
  background: var(--nen-tam);
  color: var(--xanh);
  box-shadow: var(--bong-1);
}

/* ===== Công tắc AI ======================================================= */

.cong-tac {
  display: inline-flex;
  align-items: center;
  gap: var(--k2);
  cursor: pointer;
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  white-space: nowrap;
}

.cong-tac input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ray {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background: var(--xam-4);
  border-radius: var(--goc-tron);
  transition: background var(--nhanh);
}

.ray::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--nhanh);
}

.cong-tac input:checked + .ray {
  background: var(--xanh);
}

.cong-tac input:checked + .ray::after {
  transform: translateX(16px);
}

.cong-tac input:focus-visible + .ray {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
}

/* ===== Chip lọc ========================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k1);
  padding: 5px var(--k3);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-tron);
  font-size: var(--chu-1);
  font-weight: var(--dam-vua);
  color: var(--chu-vua);
  transition: background var(--nhanh), border-color var(--nhanh), color var(--nhanh);
}

.chip:hover {
  border-color: var(--vien-dam);
  background: var(--nen-chim);
}

.chip[aria-pressed='true'] {
  background: var(--xanh);
  border-color: var(--xanh);
  color: var(--tren-xanh);
}

.chip[aria-pressed='true'] .chu-phu {
  color: rgba(255, 255, 255, 0.75);
}

.chip .badge {
  min-width: 17px;
  padding: 0 5px;
  background: var(--cho);
  color: #fff;
  border-radius: var(--goc-tron);
  font-size: 10px;
  font-weight: var(--dam-day);
  text-align: center;
}

.chip[aria-pressed='true'] .badge {
  background: rgba(255, 255, 255, 0.28);
}

/* ===== Nhãn (badge) ====================================================== */

.nhan {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k2);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-weight: var(--dam-vua);
  white-space: nowrap;
}

.nhan-cho {
  background: var(--cho-nen);
  color: var(--cho);
}

.nhan-hen {
  background: var(--mau-tim-nen);
  color: var(--mau-tim);
}

.nhan-spam {
  background: var(--loi-nen);
  color: var(--loi);
}

/* Quá cửa sổ 24 giờ của Facebook: không nhắn được cho khách nữa.
 *
 * Nhãn ĐẶC nền chứ không nhạt như mọi nhãn khác — đây là chuyện nặng nhất có
 * thể xảy ra với một hội thoại, phải nhìn thấy trước tiên trong một hàng nhãn. */
/* Đảo vai hai token của nhãn lỗi: nền ĐẶC, chữ là màu nền nhạt của cặp đó.
 * KHÔNG viết cứng #fff — chế độ tối có --loi sáng hơn hẳn, chữ trắng trên nó
 * chỉ được 2,2:1, đọc không ra. Đảo vai thì cả hai chế độ đều đúng vì hai token
 * này vốn được chọn để đi cùng nhau (test/mauSac.test.js kiểm cặp này). */
.nhan-qua-han {
  background: var(--loi);
  color: var(--loi-nen);
  font-weight: var(--dam-nua);
}

/* Đã chờ bao lâu. Ba mức khớp đúng ba mốc nhắc của lớp thông báo
 * (src/thongbao/lichNhac.js): dưới 15 phút, 15–60 phút, trên 60 phút. */
.nhan-cho-lau {
  background: var(--nen-chim);
  color: var(--chu-mo);
}

.nhan-cho-lau.muc-vua {
  background: var(--cho-nen);
  color: var(--cho);
}

.nhan-cho-lau.muc-cao {
  background: var(--loi-nen);
  color: var(--loi);
  font-weight: var(--dam-nua);
}

.nhan-si {
  background: var(--mau-tim-nen);
  color: var(--mau-tim);
}

.nhan-le {
  background: var(--nen-chim);
  color: var(--chu-mo);
}

.nhan-don {
  background: var(--nen-chim);
  color: var(--chu-mo);
}

.nhan-ai-tat {
  background: var(--loi-nen);
  color: var(--loi);
}

.nhan-khach-nho,
.nhan-loai-hinh,
.nhan-phu-trach {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k2);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-weight: var(--dam-vua);
  white-space: nowrap;
  background: var(--mau-xam-nen);
  color: var(--mau-xam);
}

.nhan-phu-trach {
  background: var(--xanh-nen);
  color: var(--xanh-dam);
}

/* Bảng màu chung cho nhãn khách và loại hình */
.mau-xanh {
  background: var(--mau-xanh-nen);
  color: var(--mau-xanh);
}
.mau-tim {
  background: var(--mau-tim-nen);
  color: var(--mau-tim);
}
.mau-cam {
  background: var(--mau-cam-nen);
  color: var(--mau-cam);
}
.mau-do {
  background: var(--mau-do-nen);
  color: var(--mau-do);
}
.mau-vang {
  background: var(--mau-vang-nen);
  color: var(--mau-vang);
}
.mau-lam {
  background: var(--mau-lam-nen);
  color: var(--mau-lam);
}
.mau-hong {
  background: var(--mau-hong-nen);
  color: var(--mau-hong);
}
.mau-xam {
  background: var(--mau-xam-nen);
  color: var(--mau-xam);
}

/* Chip nhãn bấm được trong panel sửa khách */
.nhan-sua-chip {
  padding: 4px var(--k3);
  background: var(--nen-chim);
  border: 1px solid transparent;
  border-radius: var(--goc-tron);
  font-size: var(--chu-1);
  font-weight: var(--dam-vua);
  color: var(--chu-mo);
  transition: all var(--nhanh);
}

.nhan-sua-chip:hover {
  border-color: var(--vien-dam);
}

.nhan-sua-chip[aria-pressed='true'] {
  border-color: currentColor;
}

.cac-nhan-sua {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
}

/* Nhãn trạng thái đơn và loại giá */
.nhan-tt {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k2);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  white-space: nowrap;
}

.nhan-tt.tt-new {
  background: var(--tt-new-nen);
  color: var(--tt-new);
}
.nhan-tt.tt-confirmed {
  background: var(--tt-confirmed-nen);
  color: var(--tt-confirmed);
}
.nhan-tt.tt-shipping {
  background: var(--tt-shipping-nen);
  color: var(--tt-shipping);
}
.nhan-tt.tt-done {
  background: var(--tt-done-nen);
  color: var(--tt-done);
}
.nhan-tt.tt-cancelled {
  background: var(--tt-cancelled-nen);
  color: var(--tt-cancelled);
}

.nhan-gia {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k2);
  border-radius: var(--goc-1);
  font-size: 10px;
  font-weight: var(--dam-day);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.nhan-gia.le {
  background: var(--nen-chim);
  color: var(--chu-mo);
}

.nhan-gia.si {
  background: var(--mau-tim-nen);
  color: var(--mau-tim);
}

.nhan-vai-tro {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--k2);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
}

.nhan-vai-tro.vt-owner {
  background: var(--mau-vang-nen);
  color: var(--mau-vang);
}
.nhan-vai-tro.vt-admin {
  background: var(--mau-lam-nen);
  color: var(--mau-lam);
}
.nhan-vai-tro.vt-staff {
  background: var(--nen-chim);
  color: var(--chu-mo);
}

/* ===== Avatar ============================================================ */

.avatar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--xam-5);
  color: #fff;
  font-size: var(--chu-4);
  font-weight: var(--dam-nua);
  user-select: none;
}

/* Ảnh đại diện CHỒNG LÊN chữ cái, không thay thế nó.
 *
 * Link ảnh Facebook có hạn dùng. Ảnh chết thì js gỡ thẻ img ra và chữ cái màu
 * bên dưới lộ lại — không có nhịp nào người dùng thấy ô trống hay biểu tượng
 * ảnh vỡ. Vì vậy nền chữ cái phải luôn được vẽ, kể cả khi có ảnh.
 *
 * Chấm trạng thái nằm ngoài, z-index cao hơn để ảnh không đè lên nó. */
.avatar .anh-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar .cham {
  z-index: 1;
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--nen-tam);
}

.cham-cho {
  background: var(--cho);
}
.cham-ai {
  background: var(--xanh);
}
.cham-nguoi {
  background: var(--tin);
}
.cham-hen {
  background: var(--mau-tim);
}
.cham-dong {
  background: var(--xam-5);
}

/* Dấu hiệu thương hiệu.
 *
 * ẢNH CHỒNG LÊN CHỮ CÁI, không thay thế nó — cùng lối với avatar khách (xem
 * mục "Hồ sơ Facebook" trong CLAUDE.md). Thẻ div vẽ sẵn chữ "M" trên nền xanh
 * thương hiệu, rồi ::after phủ tệp logo lên trên.
 *
 * Được gì: chưa đặt logo.png vào, hoặc đặt sai tên, hoặc tệp hỏng → ::after
 * không vẽ được gì nên chữ "M" lộ lại y như cũ. Không có nhịp nào người dùng
 * thấy ô trống hay biểu tượng ảnh vỡ, và cũng không cần một dòng JS nào.
 *
 * Dùng ::after chứ KHÔNG phải background của chính thẻ div: đặt ảnh vào div thì
 * phải đặt kèm background-color, mà màu đó vẫn tô khi ảnh 404 — che mất chữ
 * cái, thành ra một ô trống. */
.logo-tron {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--k3);
  border-radius: var(--goc-tron);
  background: var(--xanh);
  color: #fff;
  font-size: var(--chu-6);
  font-weight: var(--dam-day);
  overflow: hidden;
}

/* CHỈ khai background-image, tuyệt đối không kèm background-color. */
.logo-tron::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../logo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logo-tron.nho {
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: var(--chu-4);
}

/* ===== Thẻ chung ========================================================= */

.dau-panel {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
  padding: var(--k3) var(--k4);
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

/* ===== Khoảng trống ====================================================== */

.trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--k2);
  height: 100%;
  padding: var(--k8);
  text-align: center;
  color: var(--chu-mo);
}

.trong-icon {
  font-size: 44px;
  opacity: 0.55;
}

.trong h2 {
  font-size: var(--chu-4);
  font-weight: var(--dam-nua);
  color: var(--chu-vua);
}

.trong p {
  font-size: var(--chu-2);
  max-width: 34ch;
}

.trong-nho {
  padding: var(--k6) var(--k4);
  text-align: center;
  font-size: var(--chu-2);
  color: var(--chu-mo);
}

/* ===== Skeleton lúc đang tải ============================================= */

.xuong {
  background: linear-gradient(
    90deg,
    var(--nen-chim) 25%,
    var(--xam-3) 37%,
    var(--nen-chim) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--goc-1);
  animation: xuong-troi 1.3s ease-in-out infinite;
}

@keyframes xuong-troi {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.muc-xuong {
  display: flex;
  gap: var(--k3);
  padding: var(--k3) var(--k4);
  border-bottom: 1px solid var(--vien);
}

.muc-xuong .tron {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}

.muc-xuong .cot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding-top: var(--k1);
}

.muc-xuong .cot span:first-child {
  height: 11px;
  width: 45%;
}

.muc-xuong .cot span:last-child {
  height: 11px;
  width: 80%;
}

/* ===== Băng cảnh báo ===================================================== */

.bang-canh-bao {
  padding: var(--k2) var(--k4);
  background: var(--cho-nen);
  border-bottom: 1px solid var(--vien);
  color: var(--cho);
  font-size: var(--chu-2);
}

.bang-canh-bao code {
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
}

.bang-tin {
  margin: var(--k3) var(--k5) 0;
  padding: var(--k2) var(--k3);
  background: var(--cho-nen);
  border-left: 3px solid var(--cho);
  border-radius: var(--goc-1);
  color: var(--cho);
  font-size: var(--chu-2);
}

/* Băng mất kết nối: dính đỉnh vùng làm việc, không đẩy bố cục */
#bang-mat-ket-noi {
  position: absolute;
  top: var(--k3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--k2);
  padding: var(--k2) var(--k4);
  background: var(--loi);
  color: #fff;
  border-radius: var(--goc-tron);
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  box-shadow: var(--bong-2);
}

/* ===== Toast ============================================================= */

#khay-toast {
  position: fixed;
  right: var(--k4);
  bottom: var(--k4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--k2);
  max-width: 380px;
  padding: var(--k3) var(--k4);
  background: var(--xam-8);
  color: var(--xam-0);
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  box-shadow: var(--bong-2);
  pointer-events: auto;
  animation: toast-vao var(--vua) both;
}

.toast.dang-tat {
  animation: toast-ra var(--nhanh) both;
}

.toast::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xanh-sang);
  flex-shrink: 0;
}

.toast.loi::before {
  background: var(--loi);
}

.toast.canh-bao::before {
  background: var(--cho);
}

.toast.tin::before {
  background: var(--tin);
}

/* Mô tả hộp thoại giữ nguyên xuống dòng.
 *
 * Nội dung vào bằng textContent (luật: không bao giờ innerHTML), nên muốn xuống
 * dòng thì phải nhờ CSS. pre-line chứ không pre: vẫn gộp khoảng trắng thừa,
 * chỉ giữ ký tự xuống dòng — hộp thoại nào cũng có câu dài phải tự ngắt. */
#hop-mo-ta {
  white-space: pre-line;
}

/* Ảnh xem trước trong hộp thoại xác nhận. Nền ô caro nhạt để ảnh PNG có phần
 * trong suốt vẫn nhìn ra rìa — ảnh cắt màn hình rất hay có góc trong suốt. */
.hop-xem-truoc {
  display: flex;
  justify-content: center;
  padding: var(--k2);
  background: var(--nen-chim);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
}

.anh-xem-truoc {
  max-width: 100%;
  /* Chặn theo chiều cao chứ không chỉ chiều ngang: ảnh chụp cả màn hình điện
     thoại rất cao, để tự do là hộp thoại dài quá màn hình và nút Gửi trôi mất. */
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--goc-1);
}

/* Toast bấm được để nhảy tới hội thoại. Phải TRÔNG NHƯ bấm được — con trỏ đổi
 * hình và có phản hồi khi rê vào, không thì không ai nghĩ tới chuyện bấm nó. */
.toast.bam-duoc {
  cursor: pointer;
  border: 1px solid var(--xam-6);
}

.toast.bam-duoc:hover,
.toast.bam-duoc:focus-visible {
  background: var(--xam-7);
  border-color: var(--xanh-sang);
}

@keyframes toast-vao {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes toast-ra {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* ===== Hộp thoại ========================================================= */

/* Dùng thẻ <dialog> của trình duyệt: đã có sẵn khoá tiêu điểm và đóng bằng Esc,
 * không phải tự viết lại hai thứ rất dễ làm sai. */
dialog.hop-thoai {
  width: min(440px, calc(100vw - var(--k8)));
  padding: 0;
  background: var(--nen-tam);
  color: var(--chu);
  border: none;
  border-radius: var(--goc-3);
  box-shadow: var(--bong-3);
}

dialog.hop-thoai::backdrop {
  background: var(--phu-modal);
  backdrop-filter: blur(2px);
}

dialog.hop-thoai[open] {
  animation: hop-vao var(--vua) both;
}

@keyframes hop-vao {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

.hop-dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--k3);
  padding: var(--k5) var(--k5) 0;
}

.hop-dau h2 {
  font-size: var(--chu-5);
  font-weight: var(--dam-nua);
}

.hop-than {
  padding: var(--k3) var(--k5) 0;
  font-size: var(--chu-3);
  color: var(--chu-vua);
}

.hop-than .o-sua {
  margin-top: var(--k3);
}

.hop-chan {
  display: flex;
  justify-content: flex-end;
  gap: var(--k2);
  padding: var(--k5);
}

/* ===== Băng cửa sổ 24 giờ ================================================ */

.bang-24h {
  margin-bottom: var(--k2);
  padding: var(--k2) var(--k3);
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  line-height: 1.45;
}

.bang-24h.sap-het {
  background: var(--cho-nen);
  color: var(--cho);
}

.bang-24h.het-han {
  background: var(--loi-nen);
  color: var(--loi);
  font-weight: var(--dam-vua);
}

/* ===== Bảng chọn câu trả lời mẫu ========================================= */

.bang-mau {
  position: absolute;
  left: var(--k4);
  right: var(--k4);
  bottom: calc(100% - var(--k2));
  z-index: 20;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--nen-tam);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-3);
  box-shadow: var(--bong-2);
  overflow: hidden;
}

.dau-bang-mau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
  padding: var(--k2) var(--k3);
  border-bottom: 1px solid var(--vien);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

#danh-sach-mau {
  overflow-y: auto;
}

.muc-mau {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: var(--k2) var(--k3);
  text-align: left;
  border-bottom: 1px solid var(--vien);
  transition: background var(--nhanh);
}

.muc-mau:hover,
.muc-mau.dang-chon {
  background: var(--xanh-nen);
}

.tieu-de-mau {
  font-size: var(--chu-2);
  font-weight: var(--dam-nua);
}

.xem-truoc-mau {
  font-size: var(--chu-1);
  color: var(--chu-mo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Danh sách quản lý mẫu trong hộp thoại */
.hang-mau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k3);
  padding: var(--k2) 0;
  border-bottom: 1px solid var(--vien);
}

.chu-mau {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nut-mau-hang {
  display: flex;
  gap: var(--k1);
  flex-shrink: 0;
}

#luoi-mau {
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: var(--k3);
}

dialog.hop-rong {
  width: min(560px, calc(100vw - var(--k8)));
}

/* ===== Đèn xem ảnh ======================================================= */

dialog.hop-anh {
  max-width: 96vw;
  max-height: 96dvh;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

dialog.hop-anh::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

dialog.hop-anh img {
  display: block;
  max-width: 96vw;
  max-height: 96dvh;
  border-radius: var(--goc-2);
}

.nut-dong-anh {
  position: absolute;
  top: calc(var(--k3) * -1);
  right: calc(var(--k3) * -1);
  background: var(--nen-tam);
  color: var(--chu);
  border-radius: 50%;
  box-shadow: var(--bong-2);
}

/* Dòng ghi nhận ảnh nhân viên đã gửi (không có URL để hiện lại) */
.da-gui-anh {
  display: inline-flex;
  align-items: center;
  padding: var(--k1) var(--k2);
  border-radius: var(--goc-1);
  background: rgba(255, 255, 255, 0.18);
  font-size: var(--chu-2);
}

/* ===== Khung tin nhắn ==================================================== */

.tin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  max-width: 74%;
  margin-bottom: var(--k3);
  padding: var(--k2) var(--k3);
  border-radius: var(--goc-3);
  font-size: var(--chu-3);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--bong-1);
}

.tin .nguoi-gui {
  font-size: 10px;
  font-weight: var(--dam-day);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

.tin .luc {
  align-self: flex-end;
  font-size: var(--chu-1);
  opacity: 0.6;
}

.tin img {
  max-width: 240px;
  margin-top: var(--k1);
  border-radius: var(--goc-2);
  cursor: zoom-in;
}

/* Viền mảnh để bong bóng trắng tách khỏi nền cột chat ở chế độ sáng. Ở chế độ
 * tối --vien đã đủ tối nên viền gần như vô hình, không hại gì. */
.tin.khach {
  align-self: flex-start;
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-bottom-left-radius: var(--goc-1);
}

/* ===== Ticket đề xuất thương hiệu / danh mục ============================== */

#luoi-de-xuat {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  max-height: 48vh;
  overflow-y: auto;
  margin-top: var(--k3);
}

.the-ticket {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  width: 100%;
  padding: var(--k3);
  text-align: left;
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--cho);
  border-radius: var(--goc-2);
  transition: border-color var(--nhanh), background var(--nhanh);
}

.the-ticket:hover {
  background: var(--nen-chim);
}

.the-ticket.tt-da_duyet {
  border-left-color: var(--tot);
}

.the-ticket.tt-tu_choi {
  border-left-color: var(--loi);
}

.ticket-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
}

.ticket-ten {
  font-size: var(--chu-3);
  font-weight: var(--dam-nua);
}

.the-ticket.tt-moi {
  border-left-color: var(--cho);
}

.the-ticket.tt-dang_xu_ly {
  border-left-color: var(--tin);
}

.the-ticket.dang-chon {
  border-color: var(--xanh);
  box-shadow: 0 0 0 2px var(--xanh-nen);
}

/* ===== Hộp thông báo ===================================================== */

/* Chấm đỏ trên chuông. Neo vào nút nên nút phải position: relative. */
#nut-hop-thong-bao {
  position: relative;
}

.cham-do {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--goc-tron);
  background: var(--loi);
  color: #fff;
  font-size: 10px;
  font-weight: var(--dam-day);
  line-height: 15px;
  text-align: center;
}

#luoi-thong-bao {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  max-height: 56vh;
  overflow-y: auto;
  margin-top: var(--k2);
}

.muc-thong-bao {
  display: flex;
  gap: var(--k3);
  width: 100%;
  padding: var(--k3);
  text-align: left;
  border-radius: var(--goc-2);
  border-left: 3px solid var(--xanh);
  background: var(--xanh-nen-nhat);
  transition: background var(--nhanh);
}

/* Đã đọc thì nhạt đi, còn chưa đọc nổi bật lên — mắt tự tìm tới cái mới. */
.muc-thong-bao.da-doc {
  background: transparent;
  border-left-color: var(--vien-dam);
  opacity: 0.72;
}

.muc-thong-bao:hover {
  background: var(--nen-chim);
}

.bt-thong-bao {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  color: var(--xanh);
}

.than-thong-bao {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tb-tieu-de {
  font-size: var(--chu-2);
  font-weight: var(--dam-nua);
}

.tb-noi-dung {
  font-size: var(--chu-2);
  color: var(--chu-vua);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Bảng chọn sản phẩm để phân công =================================== */

#luoi-chon-sp {
  max-height: 44vh;
  overflow-y: auto;
  margin-top: var(--k3);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
}

.dong-chon-sp {
  display: flex;
  align-items: center;
  gap: var(--k2);
  padding: var(--k2) var(--k3);
  border-bottom: 1px solid var(--vien);
  cursor: pointer;
}

.dong-chon-sp:hover {
  background: var(--nen-chim);
}

.dong-chon-sp input {
  width: 16px;
  height: 16px;
  accent-color: var(--xanh);
  flex-shrink: 0;
}

.chu-chon-sp {
  display: flex;
  align-items: center;
  gap: var(--k2);
  min-width: 0;
}

.stt-sp {
  flex-shrink: 0;
  min-width: 26px;
  font-size: var(--chu-1);
  color: var(--chu-mo);
  text-align: right;
}

.ten-chon-sp {
  font-size: var(--chu-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nút "hiện thêm" dưới danh sách phân công. Danh sách có tới vài nghìn dòng
 * nên chỉ vẽ từng khúc — nút này là đường đi bằng bàn phím, còn chuột thì cuộn
 * tới đáy là tự nạp. */
#nut-pc-them {
  margin-top: var(--k2);
}

/* ===== Thanh tiến độ sửa sản phẩm ======================================== */

#luoi-tien-do {
  display: flex;
  flex-direction: column;
  gap: var(--k3);
  margin-top: var(--k3);
}

.the-tien-do {
  padding: var(--k3);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
  background: var(--nen-tam);
}

.dau-tien-do {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k2);
  margin-bottom: var(--k2);
}

.ten-tien-do {
  font-size: var(--chu-3);
  font-weight: var(--dam-vua);
}

.so-tien-do {
  font-size: var(--chu-2);
  color: var(--chu-mo);
  font-variant-numeric: tabular-nums;
}

/* Dựng bằng div chứ không dùng <progress>: thẻ đó gần như không tạo kiểu được
 * đồng bộ giữa các trình duyệt, mà chỗ này cần đúng màu token của trang. Vai
 * trò trợ năng đã khai bằng role="progressbar" trong js. */
.thanh-tien-do {
  height: 8px;
  border-radius: var(--goc-1);
  background: var(--nen-chim);
  overflow: hidden;
}

.ruot-tien-do {
  height: 100%;
  background: var(--xanh);
  border-radius: var(--goc-1);
  transition: width var(--nhanh) ease;
}

.the-tien-do .hang-nhan {
  margin-top: var(--k2);
}

/* ===== Phân trang ======================================================== */

.phan-trang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k3);
  padding: var(--k4) 0 var(--k6);
}

.phan-trang .chu-phu {
  font-variant-numeric: tabular-nums;
}

/* Ticket của mình có cập nhật chưa đọc: một vệt xanh bên trái, cùng ngôn ngữ
 * với hội thoại chưa đọc ở tab Chat. */
.the-ticket.chua-doc {
  border-left: 3px solid var(--xanh);
}

/* Đã sửa xong thì đổi sang màu "hoàn tất" để lướt mắt qua lưới là thấy ngay
 * còn bao nhiêu chưa đụng tới. */
.nhan-phu-trach.da-sua {
  background: var(--mau-xanh-nen);
  color: var(--mau-xanh);
}

/* Danh sách mục mô tả còn trống có thể dài, cắt bớt và để nguyên trong title */
.thieu-mo-ta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mã ticket: gõ lại được qua điện thoại nên cho font đều nhau, dễ đọc từng ký tự */
.ma-ticket {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  letter-spacing: 0.02em;
  color: var(--chu-mo);
}

/* Trao đổi trong ticket: của mình dạt sang phải như khung chat cho quen mắt */
.binh-luan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 86%;
  margin-bottom: var(--k2);
  padding: var(--k2) var(--k3);
  background: var(--nen-chim);
  border-radius: var(--goc-2);
}

.binh-luan.cua-toi {
  align-self: flex-end;
  margin-left: auto;
  background: var(--xanh-nen);
}

.bl-ai {
  font-size: var(--chu-1);
  color: var(--chu-mo);
}

.bl-noi-dung {
  font-size: var(--chu-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.tin.bot {
  align-self: flex-end;
  background: var(--xanh-nen);
  color: var(--chu);
  border-bottom-right-radius: var(--goc-1);
}

.tin.nhan-vien {
  align-self: flex-end;
  background: var(--xanh);
  color: var(--tren-xanh);
  border-bottom-right-radius: var(--goc-1);
}

.tin.nhan-vien a {
  color: inherit;
}

.tin.noi-bat {
  animation: nhay-len 2s ease;
}

@keyframes nhay-len {
  0%,
  100% {
    box-shadow: var(--bong-1);
  }
  20%,
  70% {
    box-shadow: 0 0 0 3px var(--xanh);
  }
}

/* ===== Thẻ đơn hàng ====================================================== */

.the-don {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  padding: var(--k4);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xam-4);
  border-radius: var(--goc-2);
  cursor: pointer;
  transition: box-shadow var(--nhanh), border-color var(--nhanh), transform var(--nhanh);
}

.the-don:hover {
  box-shadow: var(--bong-2);
  transform: translateY(-1px);
}

.the-don.dang-chon {
  border-color: var(--xanh);
  box-shadow: 0 0 0 2px var(--xanh-nen);
}

.the-don.tt-new {
  border-left-color: var(--tt-new);
}
.the-don.tt-confirmed {
  border-left-color: var(--tt-confirmed);
}
.the-don.tt-shipping {
  border-left-color: var(--tt-shipping);
}
.the-don.tt-done {
  border-left-color: var(--tt-done);
}
.the-don.tt-cancelled {
  border-left-color: var(--tt-cancelled);
  opacity: 0.7;
}

.don-dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--k2);
}

.don-nhan-phai {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--k1);
}

/* Cùng hàng nhãn đó nhưng nằm đầu panel chi tiết thì căn trái */
.don-nhan-phai.trai {
  justify-content: flex-start;
  margin-top: var(--k1);
}

/* Nút đứng ngay dưới một ô nhập trong khối chi tiết */
.nut-duoi-o {
  margin-top: var(--k2);
}

.don-ma {
  font-size: var(--chu-3);
  font-weight: var(--dam-day);
  letter-spacing: 0.02em;
}

.don-khach {
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  margin-top: var(--k1);
}

.don-sdt {
  font-size: var(--chu-2);
  color: var(--chu-mo);
}

.don-sp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--k2) 0;
  padding-top: var(--k2);
  border-top: 1px dashed var(--vien);
  font-size: var(--chu-2);
  color: var(--chu-vua);
}

.don-sp li {
  display: flex;
  justify-content: space-between;
  gap: var(--k2);
}

.don-sp .sl {
  flex-shrink: 0;
  color: var(--chu-mo);
}

.don-chan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k2);
}

.don-tong {
  font-size: var(--chu-4);
  font-weight: var(--dam-day);
  color: var(--xanh-dam);
}

.ghi-chu-tren-the {
  margin-top: var(--k2);
  padding: var(--k2) var(--k3);
  background: var(--mau-vang-nen);
  border-radius: var(--goc-1);
  color: var(--mau-vang);
  font-size: var(--chu-1);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thẻ đơn thu nhỏ trong panel khách */
/* Thẻ đơn giờ là <button> vì bấm được để mở chi tiết. Phải gỡ hết kiểu mặc
 * định của nút và trả lại canh trái, nếu không chữ bị canh giữa. */
.the-don-nho {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  width: calc(100% - var(--k4) * 2);
  margin: var(--k3) var(--k4);
  padding: var(--k3);
  background: var(--nen-chim);
  border: 1px solid transparent;
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.the-don-nho:hover {
  border-color: var(--vien-dam);
}

/* Đơn đã huỷ vẫn hiện, chỉ mờ đi. Giấu hẳn thì nhân viên không hiểu vì sao
 * khách nhắc tới một mã đơn không thấy đâu. */
.the-don-nho.don-da-huy {
  opacity: 0.6;
}

.the-don-nho .dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
}

.the-don-nho .ma {
  font-weight: var(--dam-day);
}

.the-don-nho ul {
  color: var(--chu-mo);
  font-size: var(--chu-1);
}

/* --- Bảng giá bot vừa báo cho khách --------------------------------------- */

#bang-gia-bot {
  padding: var(--k2) var(--k4) var(--k3);
}

.dong-gia-bot {
  display: flex;
  align-items: baseline;
  gap: var(--k2);
  padding: var(--k1) 0;
  font-size: var(--chu-2);
  border-bottom: 1px solid var(--vien);
}

.dong-gia-bot:last-of-type {
  border-bottom: 0;
}

.stt-gia-bot {
  flex-shrink: 0;
  min-width: 18px;
  color: var(--chu-mo);
  font-variant-numeric: tabular-nums;
}

/* Tên dài thì cắt, không đẩy con số tiền ra khỏi panel */
.ten-gia-bot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tien-gia-bot {
  flex-shrink: 0;
  font-weight: var(--dam-nua);
  font-variant-numeric: tabular-nums;
}

/* ===== Khối chi tiết đơn ================================================= */

.khoi-ct {
  padding: var(--k4);
  border-bottom: 1px solid var(--vien);
}

.khoi-ct h3 {
  margin-bottom: var(--k3);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

.dong-ct {
  display: flex;
  justify-content: space-between;
  gap: var(--k4);
  padding: 3px 0;
  font-size: var(--chu-2);
}

.dong-ct span:first-child {
  flex-shrink: 0;
  color: var(--chu-mo);
}

.dong-ct span:last-child {
  text-align: right;
  word-break: break-word;
}

.dong-ct.tong span:last-child {
  font-weight: var(--dam-day);
  font-size: var(--chu-4);
  color: var(--xanh-dam);
}

/* Tên sản phẩm một dòng riêng, số lượng và thành tiền dòng dưới: tên dài không
 * còn đẩy panel tràn ngang như bố cục hai cột cũ. */
.dong-sp-ct {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--k2) 0;
  border-bottom: 1px dashed var(--vien);
  font-size: var(--chu-2);
}

.dong-sp-ct .ten-sp {
  line-height: 1.4;
  word-break: break-word;
}

.dong-sp-ct .gia-sp {
  display: flex;
  justify-content: space-between;
  gap: var(--k3);
  color: var(--chu-mo);
}

.dong-sp-ct .gia-sp b {
  color: var(--chu);
}

.moc-ls {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--k2) 0 var(--k2) var(--k3);
  border-left: 2px solid var(--vien);
  font-size: var(--chu-2);
}

.hang-luu-tt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
}

.hang-luu-tt .chon-tt {
  flex: 1;
  min-width: 130px;
}

.hang-ma-don {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k1);
  margin-top: var(--k1);
}

.ma-don-bam {
  padding: 2px var(--k2);
  background: var(--xanh-nen);
  border: 1px solid transparent;
  border-radius: var(--goc-1);
  color: var(--xanh-dam);
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  transition: border-color var(--nhanh);
}

.ma-don-bam:hover {
  border-color: var(--xanh);
}

/* ===== Nút "Báo sai" trên bong bóng tin của bot ========================== */

/* Chỉ hiện khi rê chuột hoặc khi có tiêu điểm bàn phím: thứ này dùng vài lần
 * một ngày, không đáng chiếm chỗ thường trực trong khung chat. */
.nut-bao-sai {
  position: absolute;
  top: 2px;
  right: 6px;
  padding: 1px var(--k2);
  border-radius: var(--goc-1);
  background: var(--loi);
  color: #fff;
  font-size: 10px;
  font-weight: var(--dam-nua);
  opacity: 0;
  transition: opacity var(--nhanh);
}

.tin:hover .nut-bao-sai,
.tin:focus-within .nut-bao-sai {
  opacity: 1;
}

/* Ba câu đặt cạnh nhau: khách hỏi, bot trả lời, câu đúng */
.khoi-doi-chieu {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  margin: var(--k3) 0;
}

.doi-chieu {
  padding: var(--k2) var(--k3);
  background: var(--nen-chim);
  border-left: 3px solid var(--vien-dam);
  border-radius: var(--goc-1);
}

.doi-chieu.sai {
  background: var(--loi-nen);
  border-left-color: var(--loi);
}

.doi-chieu.dung {
  background: var(--tot-nen);
  border-left-color: var(--tot);
}

.doi-chieu p {
  margin-top: 2px;
  font-size: var(--chu-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Danh sách gợi ý khi tìm sản phẩm liên quan */
.ket-qua-tim {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-2);
}

/* ===== Thẻ báo lỗi AI ==================================================== */

.the-bao-loi {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  padding: var(--k4);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--cho);
  border-radius: var(--goc-2);
}

.the-bao-loi.tt-da_xu_ly {
  border-left-color: var(--tot);
}

.the-bao-loi.tt-bo_qua {
  border-left-color: var(--xam-5);
  opacity: 0.72;
}

/* ===== Thẻ số và biểu đồ cột ============================================= */

.hang-the-so {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k3);
  margin: var(--k3) 0;
}

.the-so {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 130px;
  padding: var(--k3) var(--k4);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
}

.so-lon {
  font-size: var(--chu-6);
  font-weight: var(--dam-day);
  color: var(--xanh-dam);
  line-height: 1.1;
}

.nhan-so {
  font-size: var(--chu-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chu-mo);
}

.khoi-bieu-do {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding: var(--k4);
  margin-bottom: var(--k3);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
}

/* Biểu đồ cột vẽ bằng div, không thêm thư viện chỉ để hiện năm con số. */
.cac-cot {
  display: flex;
  align-items: flex-end;
  gap: var(--k3);
  height: 140px;
  padding-top: var(--k3);
}

.cot-loi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--k1);
  height: 100%;
  min-width: 0;
}

.cot-loi .thanh {
  width: 100%;
  max-width: 56px;
  min-height: 4px;
  border-radius: var(--goc-1) var(--goc-1) 0 0;
  background: currentColor;
}

.so-cot {
  font-size: var(--chu-2);
  font-weight: var(--dam-nua);
}

.ten-cot {
  font-size: var(--chu-1);
  color: var(--chu-mo);
  text-align: center;
  line-height: 1.25;
}

/* ===== Thẻ sản phẩm ====================================================== */

.the-sp {
  display: flex;
  gap: var(--k3);
  padding: var(--k3);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
  cursor: pointer;
  transition: box-shadow var(--nhanh), border-color var(--nhanh), transform var(--nhanh);
}

.the-sp:hover {
  box-shadow: var(--bong-2);
  transform: translateY(-1px);
}

.the-sp.ngung-ban {
  opacity: 0.62;
}

.anh-sp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--goc-2);
  background: var(--nen-chim);
  font-size: 26px;
  overflow: hidden;
}

.anh-sp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.than-sp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ten-sp-the {
  font-size: var(--chu-3);
  font-weight: var(--dam-vua);
  line-height: 1.35;
}

.hang-gia-sp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--k2);
  margin-top: var(--k1);
}

.gia-le-sp {
  font-size: var(--chu-3);
  font-weight: var(--dam-day);
  color: var(--xanh-dam);
}

/* Ô chọn kèm nút "thêm mới" ngay dưới. Nút phải có hàng riêng, không thì nó
 * trôi lên nằm cạnh nhãn của ô kế tiếp. */
.o-chon-kem-them {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  margin-bottom: var(--k3);
}

.hang-them-moi {
  display: flex;
}

/* Nhóm trường trong form sản phẩm */
.nhom-truong {
  margin: 0;
  padding: var(--k3) var(--k4) var(--k4);
  border: none;
  border-bottom: 1px solid var(--vien);
}

.nhom-truong legend {
  padding: 0;
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

.nhom-truong .nhom-sua {
  padding: var(--k2) 0 0;
  border-bottom: none;
}

/* Hàng trong màn dọn dẹp danh mục */
.hang-mau.la-cha .tieu-de-mau {
  font-weight: var(--dam-nua);
}

.hang-mau.la-con {
  padding-left: var(--k5);
}

.hang-mau.dong-loi {
  background: var(--loi-nen);
  border-radius: var(--goc-1);
  padding-left: var(--k2);
}

/* ===== Thẻ tài khoản ===================================================== */

.the-tk {
  display: flex;
  gap: var(--k3);
  padding: var(--k4);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
}

.the-tk.bi-khoa {
  opacity: 0.6;
}

/* Cột dọc: các dòng bên trong là <span> nên phải xếp bằng flex, không thì
 * tên và tên đăng nhập dính vào nhau trên một dòng. */
.the-tk .than {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.the-tk .ten-tk {
  font-size: var(--chu-3);
  font-weight: var(--dam-nua);
}

.the-tk .username {
  font-size: var(--chu-2);
  color: var(--chu-mo);
}

.hang-tk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k2);
  margin-top: var(--k2);
}

.dem-quyen {
  font-size: var(--chu-1);
  color: var(--chu-mo);
}

.nut-tk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
  margin-top: var(--k3);
}

.o-quyen {
  display: flex;
  align-items: flex-start;
  gap: var(--k2);
  padding: var(--k2);
  border-radius: var(--goc-1);
  cursor: pointer;
  transition: background var(--nhanh);
}

.o-quyen:hover {
  background: var(--nen-chim);
}

.o-quyen input {
  margin-top: 3px;
  accent-color: var(--xanh);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.o-quyen > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.o-quyen .ten-quyen {
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
}

.o-quyen .mo-ta-quyen {
  font-size: var(--chu-1);
  color: var(--chu-mo);
  line-height: 1.4;
}

.dong-nhat-ky {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--k3) var(--k4);
  border-bottom: 1px solid var(--vien);
  font-size: var(--chu-2);
}

.dong-nhat-ky .hd {
  font-weight: var(--dam-vua);
}

.dong-nhat-ky .luc {
  font-size: var(--chu-1);
  color: var(--chu-mo);
}

/* --- Sửa dòng hàng và tạo đơn thủ công ------------------------------------ */

/* Một dòng hàng: tên co giãn, số lượng và đơn giá hẹp cố định, nút xoá cuối.
 * Trên điện thoại thì xuống thành hai hàng cho đỡ chật. */
.dong-sua-hang {
  display: grid;
  grid-template-columns: 1fr 70px 110px auto;
  gap: var(--k2);
  align-items: center;
  margin-bottom: var(--k2);
}

@media (max-width: 560px) {
  .dong-sua-hang {
    grid-template-columns: 1fr 70px auto;
  }
  /* Đơn giá tụt xuống hàng dưới, chiếm hết bề ngang còn lại */
  .dong-sua-hang .o-hep:last-of-type {
    grid-column: 1 / -1;
  }
}

.o-hep {
  text-align: right;
}

/* Lý do đổi trạng thái trong dòng lịch sử. Thụt vào và nghiêng để tách khỏi
 * phần máy sinh (thời điểm, người thao tác). */
.ly-do-ls {
  display: block;
  margin-top: var(--k1);
  padding-left: var(--k2);
  border-left: 2px solid var(--vien-dam);
  color: var(--chu-vua);
  font-size: var(--chu-2);
  font-style: italic;
}

/* ===== Tab phí ship & khuyến mãi ========================================== */

/* Thẻ cài đặt. Khác .khoi-ct (chỉ có gạch dưới, hợp với panel dọc) vì ở đây
 * mỗi khối là một việc độc lập nằm cạnh nhau trong lưới — cần đường bao rõ để
 * mắt biết ô nhập nào thuộc việc nào. */
.the-cd {
  display: flex;
  flex-direction: column;
  gap: var(--k3);
  padding: var(--k5);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-3);
}

.the-cd h3 {
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chu-mo);
}

.dau-the-cd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k3);
}

.nhom-cd {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  min-width: 0;
}

/* Hai ô số đi cùng nhau (phí / miễn phí từ, giảm % / chốt giá) */
.cap-o {
  display: grid;
  gap: var(--k3);
  grid-template-columns: 1fr 1fr;
}

.nhan-tick {
  display: inline-flex;
  align-items: center;
  gap: var(--k2);
  font-size: var(--chu-2);
  color: var(--chu-mo);
  cursor: pointer;
}

/* --- Kết quả thử địa chỉ --- */

.ket-qua-thu {
  padding: var(--k3);
  border-radius: var(--goc-2);
  font-size: var(--chu-2);
  line-height: 1.5;
  background: var(--tot-nen);
  color: var(--tot);
}

/* KHÔNG TÌM THẤY TỈNH KHÔNG PHẢI LÀ MIỄN PHÍ. Tô màu cảnh báo chứ không tô
 * xanh, để người đặt quy tắc thấy ngay là còn thiếu chứ không phải đã xong. */
.ket-qua-thu.chua-co {
  background: var(--luu-y-nen);
  color: var(--luu-y);
}

/* --- Bảng tỉnh đang áp dụng --- */

.dong-tinh {
  display: grid;
  gap: var(--k2) var(--k3);
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: var(--k3) 0;
  border-bottom: 1px solid var(--vien);
}

.dong-tinh:last-child {
  border-bottom: none;
}

.dong-tinh .ten-tinh {
  font-size: var(--chu-3);
  font-weight: var(--dam-vua);
}

.dong-tinh .ten-khac-tinh {
  display: block;
  color: var(--chu-mo);
  font-size: var(--chu-1);
}

.dong-tinh .muc-phi {
  font-variant-numeric: tabular-nums;
  font-size: var(--chu-2);
  text-align: right;
}

.dong-tinh .mien-tu {
  display: block;
  color: var(--tot);
  font-size: var(--chu-1);
}

.dong-tinh.ngung-ban {
  opacity: 0.55;
}

/* --- Thẻ chương trình khuyến mãi --- */

.the-km {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding: var(--k3);
  margin-top: var(--k2);
  background: var(--nen-chim);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh);
  border-radius: var(--goc-2);
}

.the-km.tam-dung {
  border-left-color: var(--vien-dam);
  opacity: 0.62;
}

.the-km .dau-km {
  display: flex;
  align-items: center;
  gap: var(--k2);
  flex-wrap: wrap;
}

.the-km .ten-km {
  flex: 1;
  min-width: 0;
  font-size: var(--chu-3);
  font-weight: var(--dam-nua);
}

.the-km .pham-vi-km {
  color: var(--chu-mo);
  font-size: var(--chu-2);
}

.cac-bac-km {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
}

.bac-km {
  padding: 2px var(--k2);
  background: var(--nen-tam);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-variant-numeric: tabular-nums;
}

/* Một dòng bậc trong hộp thoại: mốc số lượng, giảm %, hoặc chốt giá, nút xoá */
.dong-bac {
  display: grid;
  gap: var(--k2);
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  margin-bottom: var(--k2);
}

@media (max-width: 560px) {
  .dong-bac {
    grid-template-columns: 1fr 1fr auto;
  }
  .dong-bac .o-hep:last-of-type {
    grid-column: 1 / -1;
  }
  .cap-o {
    grid-template-columns: 1fr;
  }
}

/* ===== Mục chọn Facebook Page ============================================
 *
 * Nằm trên cùng cột danh sách hội thoại, trên cả ô tìm: chọn page là chọn
 * "đang trực hộp thư nào", nó bao ngoài mọi bộ lọc khác chứ không ngang hàng.
 *
 * Chỉ hiện khi shop có từ hai page trở lên (js/chat.js tự ẩn) — một page thì
 * thanh này chỉ chiếm chỗ mà không cho người dùng lựa chọn nào. */
.cac-muc-page {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: var(--k2) var(--k3) 0;
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien-cot);
  overflow-x: auto;
  scrollbar-width: none;
}

.cac-muc-page::-webkit-scrollbar {
  display: none;
}

.muc-page {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--k2);
  padding: var(--k2) var(--k3);
  border-radius: var(--goc-2) var(--goc-2) 0 0;
  color: var(--chu-mo);
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  white-space: nowrap;
  /* Gạch chân là thứ báo "đang chọn", nên chừa sẵn chỗ cho nó ở MỌI mục —
     không thì chữ nhảy lên nhảy xuống mỗi lần đổi page. */
  border-bottom: 2px solid transparent;
  transition: color var(--nhanh), background var(--nhanh);
}

.muc-page:hover {
  color: var(--chu);
  background: var(--nen-chim);
}

.muc-page[aria-selected='true'] {
  color: var(--xanh);
  border-bottom-color: var(--xanh);
}

/* Số hội thoại chưa đọc của page đó. Ẩn hẳn khi bằng 0 — con số 0 nằm đó chỉ
   làm mắt phải đọc thêm một thứ vô nghĩa. */
.muc-page .dem-page {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--goc-tron);
  background: var(--loi);
  color: #fff;
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  line-height: 18px;
  text-align: center;
}

/* Chấm nhỏ cho page đang tắt, để nhân viên hiểu vì sao không có tin mới. */
.muc-page .cham-tat {
  width: 6px;
  height: 6px;
  border-radius: var(--goc-tron);
  background: var(--chu-mo);
}

/* Thẻ Facebook Page trong màn quản lý */
.the-page {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding: var(--k3);
  margin-bottom: var(--k2);
  background: var(--nen-chim);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh);
  border-radius: var(--goc-2);
}

.the-page.tam-dung {
  border-left-color: var(--vien-dam);
  opacity: 0.65;
}

.the-page .dong-page {
  display: block;
  font-size: var(--chu-2);
  color: var(--chu-vua);
  font-variant-numeric: tabular-nums;
}

/* Thẻ sản phẩm trong combo: có nút bỏ nằm trong thẻ, nên phải là flex và tự
   xuống dòng khi combo nhiều món. */
.the-sp-combo {
  display: inline-flex;
  align-items: center;
  gap: var(--k1);
  max-width: 100%;
}

/* Ô số lượng ngay trên thẻ món. Combo "3 chai dầu gội" là MỘT món số lượng 3,
 * không phải ba thẻ — nên số lượng phải sửa được tại chỗ. */
.o-sl-combo {
  width: 42px;
  flex-shrink: 0;
  padding: 0 var(--k1);
  background: var(--nen-tam);
  color: var(--chu);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-1);
  font-size: var(--chu-1);
  font-weight: var(--dam-vua);
  text-align: center;
}

.the-sp-combo .nut-bieu-tuong {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}