/* BỐ CỤC — màn đăng nhập, thanh điều hướng dọc, ba cột làm việc, điện thoại.
 *
 * Máy tính:  [ thanh dọc ] [ danh sách | nội dung | panel ]
 * Điện thoại: ba màn trượt, thanh điều hướng chuyển xuống đáy.
 *
 * Dùng dvh (dynamic viewport height) thay vh để bàn phím ảo trên điện thoại
 * không đẩy ô soạn tin ra ngoài màn hình.
 */

/* ===== Màn đăng nhập ===================================================== */

.phu-kin {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--k4);
  background: var(--nen-app);
}

.the-dang-nhap {
  display: flex;
  flex-direction: column;
  gap: var(--k3);
  width: min(360px, 100%);
  padding: var(--k7) var(--k6) var(--k6);
  background: var(--nen-tam);
  border-radius: var(--goc-3);
  box-shadow: var(--bong-2);
  text-align: center;
}

.the-dang-nhap h1 {
  font-size: var(--chu-5);
  font-weight: var(--dam-nua);
}

.the-dang-nhap .chu-phu {
  margin-top: calc(var(--k2) * -1);
}

.the-dang-nhap input {
  width: 100%;
  height: 42px;
  padding: 0 var(--k3);
  background: var(--nen-tam);
  color: var(--chu);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-2);
  font-size: var(--chu-3);
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

.the-dang-nhap input:focus {
  outline: none;
  border-color: var(--xanh);
  box-shadow: 0 0 0 3px var(--xanh-nen);
}

.the-dang-nhap button[type='submit'] {
  height: 42px;
  background: var(--xanh);
  color: var(--tren-xanh);
  border-radius: var(--goc-2);
  font-size: var(--chu-3);
  font-weight: var(--dam-nua);
  transition: background var(--nhanh);
}

.the-dang-nhap button[type='submit']:hover {
  background: var(--xanh-dam);
}

/* ===== Khung ứng dụng ==================================================== */

#ung-dung {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100dvh;
  overflow: hidden;
}

.vung-lam-viec {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ===== Thanh điều hướng dọc ============================================== */

.ray-doc {
  display: flex;
  flex-direction: column;
  width: var(--ray-rong);
  padding: var(--k3) var(--k2);
  background: var(--nen-ray);
  color: var(--chu-ray);
  transition: width var(--vua);
}

#ung-dung[data-ray='hep'] .ray-doc {
  width: var(--ray-hep);
}

.ray-hieu {
  display: flex;
  align-items: center;
  gap: var(--k2);
  padding: var(--k2);
  margin-bottom: var(--k4);
  font-size: var(--chu-4);
  font-weight: var(--dam-nua);
  white-space: nowrap;
  overflow: hidden;
}

.ray-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.muc-ray {
  display: flex;
  align-items: center;
  gap: var(--k3);
  height: var(--cham-toi-thieu);
  padding: 0 var(--k3);
  border-radius: var(--goc-2);
  color: var(--chu-ray-mo);
  font-size: var(--chu-3);
  font-weight: var(--dam-vua);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--nhanh), color var(--nhanh);
}

.muc-ray:hover {
  background: var(--nen-ray-chon);
  color: var(--chu-ray);
}

.muc-ray[aria-selected='true'] {
  background: var(--xanh);
  color: var(--tren-xanh);
}

.muc-ray .bt {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  justify-content: center;
  font-size: var(--chu-4);
  line-height: 1;
}

.muc-ray .nhan-chu {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dem-tab {
  flex-shrink: 0;
  min-width: 19px;
  padding: 1px 6px;
  background: var(--cho);
  color: #fff;
  border-radius: var(--goc-tron);
  font-size: var(--chu-1);
  font-weight: var(--dam-day);
  text-align: center;
}

.muc-ray[aria-selected='true'] .dem-tab {
  background: rgba(255, 255, 255, 0.28);
}

.dem-tab:empty {
  display: none;
}

.ray-chan {
  display: flex;
  flex-direction: column;
  gap: var(--k1);
  padding-top: var(--k3);
  margin-top: var(--k3);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Khối người dùng giờ là NÚT mở trình đơn, nên phải trông bấm được. */
.ray-nguoi {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--k2);
  padding: var(--k2) var(--k3);
  overflow: hidden;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--goc-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ray-nguoi:hover,
.ray-nguoi[aria-expanded='true'] {
  background: var(--nen-ray-chon);
}

.mui-trinh-don {
  margin-left: auto;
  display: inline-flex;
  color: var(--chu-ray-mo);
  transition: transform var(--nhanh);
}

.ray-nguoi[aria-expanded='true'] .mui-trinh-don {
  transform: rotate(180deg);
}

/* ===== Trình đơn của tôi =================================================
 *
 * Mở LÊN TRÊN vì nút nằm ở đáy thanh dọc. Đặt position:absolute trong .ray-chan
 * chứ không dùng <dialog>: đây là trình đơn cạnh nút, không phải hộp thoại chặn
 * cả trang — bấm ra ngoài là đóng, không có nền mờ. */
.ray-chan {
  position: relative;
}

.trinh-don {
  position: absolute;
  bottom: calc(100% - var(--k3));
  left: var(--k1);
  right: var(--k1);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--k1);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-2);
  box-shadow: var(--bong-3);
}

.muc-trinh-don {
  display: flex;
  align-items: center;
  gap: var(--k2);
  width: 100%;
  padding: var(--k2) var(--k3);
  background: none;
  border: 0;
  border-radius: var(--goc-1);
  color: var(--chu);
  font: inherit;
  font-size: var(--chu-2);
  text-align: left;
  cursor: pointer;
}

.muc-trinh-don:hover,
.muc-trinh-don:focus-visible {
  background: var(--xanh-nen);
  color: var(--xanh);
}

.muc-trinh-don .bt {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--chu-mo);
}

.muc-trinh-don:hover .bt,
.muc-trinh-don:focus-visible .bt {
  color: inherit;
}

.muc-trinh-don.muc-nguy:hover,
.muc-trinh-don.muc-nguy:focus-visible {
  background: var(--loi-nen);
  color: var(--loi);
}

.ngan-trinh-don {
  height: 1px;
  margin: var(--k1) var(--k2);
  background: var(--vien);
}

/* Thanh dọc thu gọn: trình đơn không nhét vừa 64px nên nó bung ra bên phải. */
#ung-dung[data-ray='hep'] .trinh-don {
  left: calc(100% + var(--k2));
  right: auto;
  width: 240px;
}

#ung-dung[data-ray='hep'] .mui-trinh-don {
  display: none;
}

.ray-nguoi .avatar {
  width: 30px;
  height: 30px;
  font-size: var(--chu-2);
}

.ray-nguoi .khoi-ten {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ray-nguoi .ten {
  font-size: var(--chu-2);
  font-weight: var(--dam-vua);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.hang-nut-ray .nut-bieu-tuong {
  color: var(--chu-ray-mo);
}

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

.hang-nut-ray .nut-bieu-tuong[aria-pressed='true'] {
  color: var(--xanh-sang);
}

/* Thu gọn: giấu chữ, chỉ chừa biểu tượng */
#ung-dung[data-ray='hep'] .nhan-chu,
#ung-dung[data-ray='hep'] .ray-hieu strong,
#ung-dung[data-ray='hep'] .ray-nguoi .khoi-ten {
  display: none;
}

#ung-dung[data-ray='hep'] .ray-hieu,
#ung-dung[data-ray='hep'] .muc-ray,
#ung-dung[data-ray='hep'] .ray-nguoi {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

#ung-dung[data-ray='hep'] .hang-nut-ray {
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== Vùng màn ========================================================== */

.man {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--cot-ds) minmax(0, 1fr) auto;
}

/* Chỉ tab Hội thoại có ba cột. Mọi tab khác là "nội dung + panel bên phải",
 * panel rộng auto và biến mất khi đóng.
 *
 * QUÊN THÊM TAB MỚI VÀO ĐÂY LÀ HỎNG NGAY: tab sẽ ăn khuôn ba cột ở trên, cột
 * nội dung bị nhét vào 332px của danh sách hội thoại, và cột thứ ba trống trơn
 * thành một mảng trắng bên phải màn hình. */
#man-don,
#man-san-pham,
#man-cai-thien-ai,
#man-ticket,
#man-ban-hang,
#man-tai-khoan {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* --- Cột danh sách hội thoại --- */

#cot-danh-sach {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--nen-tam);
  border-right: 1px solid var(--vien-cot);
}

.hop-loc {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
  padding: var(--k3);
  border-bottom: 1px solid var(--vien);
}

.hang-tim {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--k1);
}

.hang-tim .o-tim {
  flex: 1;
  min-width: 0;
}

/* Nút thu gọn bộ lọc.
 *
 * Mười một chip cộng hai ô chọn ăn gần nửa chiều cao cột trái, mà phần lớn
 * thời gian nhân viên chỉ nhìn danh sách hội thoại. Thu lại thì được chỗ, NHƯNG
 * bộ lọc đang bật mà không thấy được là một cái bẫy: người ta tưởng hội thoại
 * biến mất. Nên nút luôn chở theo tóm tắt của bộ lọc hiện tại. */
.nut-loc {
  display: flex;
  align-items: center;
  gap: var(--k2);
  width: 100%;
  padding: 6px var(--k2);
  background: var(--nen-tam);
  border: 1px solid var(--vien);
  border-radius: var(--goc-tron);
  font-size: var(--chu-2);
  color: var(--chu-vua);
  text-align: left;
  transition: background var(--nhanh), border-color var(--nhanh);
}

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

.nut-loc-nhan {
  font-weight: var(--dam-vua);
}

/* Tóm tắt chiếm hết chỗ thừa và cắt bằng ba chấm: tên nhãn khách có thể dài,
   nhưng cột trái thì hẹp và mũi tên phải luôn nằm đúng mép phải. */
.tom-tat-loc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--chu-mo);
  font-size: var(--chu-1);
}

/* Đang lọc thì nút phải nhìn ra ngay, kể cả khi khối lọc đã thu lại. */
.nut-loc.dang-loc {
  border-color: var(--xanh-sang);
  background: var(--xanh-nen-nhat);
}

.nut-loc.dang-loc .tom-tat-loc {
  color: var(--xanh);
  font-weight: var(--dam-vua);
}

.nut-loc-mui {
  display: inline-flex;
  color: var(--chu-mo);
  transition: transform var(--nhanh);
}

/* Mũi chỉ LÊN khi đang mở (bấm nữa là thu lại), chỉ XUỐNG khi đang đóng. */
.nut-loc[aria-expanded='false'] .nut-loc-mui {
  transform: rotate(180deg);
}

.khoi-loc {
  display: flex;
  flex-direction: column;
  gap: var(--k2);
}

.cac-chip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k1);
}

.hang-loc-chon {
  display: flex;
  gap: var(--k2);
}

.hang-loc-chon .chon-tt {
  flex: 1;
  min-width: 0;
  font-size: var(--chu-1);
}

#danh-sach {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#danh-sach li {
  display: flex;
  gap: var(--k3);
  padding: var(--k3) var(--k4);
  border-bottom: 1px solid var(--vien);
  cursor: pointer;
  transition: background var(--nhanh);
}

#danh-sach li:hover {
  background: var(--nen-chim);
}

#danh-sach li.dang-chon {
  background: var(--xanh-nen);
}

#danh-sach li.dang-chon .chu-phu,
#danh-sach li.dang-chon .xem-truoc {
  color: var(--chu-vua);
}

/* CHƯA ĐỌC — hai dấu hiệu, không phải một.
 *
 * Chấm màu là dấu hiệu chính, nhưng chỉ mỗi chấm thì người mù màu hoặc người
 * liếc nhanh dễ bỏ qua. Kèm thêm chữ đậm lên cho cả dòng: dày hơn thì mắt bắt
 * được ngay cả khi không phân biệt được màu. */
#danh-sach li.chua-doc .ten,
#danh-sach li.chua-doc .xem-truoc {
  font-weight: var(--dam-nua);
  color: var(--chu);
}

.cham-chua-doc {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--k1);
  border-radius: 50%;
  background: var(--xanh);
  vertical-align: middle;
  flex-shrink: 0;
}

.than-muc {
  flex: 1;
  min-width: 0;
}

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

.dong-ten .ten {
  font-size: var(--chu-3);
  font-weight: var(--dam-nua);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dong-ten .luc {
  flex-shrink: 0;
  font-size: var(--chu-1);
  color: var(--chu-mo);
}

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

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

/* --- Cột chat --- */

#cot-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--nen-chat);
}

#khung-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* THANH TRÊN XUỐNG DÒNG, KHÔNG BAO GIỜ BÓP NÁT NHAU.
 *
 * Hai lần hỏng liên tiếp ở đây, cùng một gốc: cột chat hẹp lại thì hai khối
 * tranh nhau chỗ.
 *
 *   Lần 1 — tên khách dài, công tắc AI đè lên chữ.
 *   Lần 2 — mở panel Thông tin, cột chat còn ~650px. Nguyên nhóm điều khiển
 *           bên phải (công tắc AI, ô Phân công, ô trạng thái, nút Thông tin)
 *           đòi khoảng 560px và KHÔNG chịu co, nên khối trái bị ép về gần 0.
 *           Avatar thì flex-shrink: 0 nên nó tràn ra khỏi ô rộng 0 của mình và
 *           nằm đè lên công tắc, còn tên khách biến mất hoàn toàn.
 *
 * Chữa bằng cách cho chính #thanh-tren xuống dòng: hết chỗ thì nhóm điều khiển
 * tụt xuống hàng thứ hai, chứ không giành phần của tên khách. Không cần biết
 * panel đang mở hay đóng, không cần media query đoán bề rộng — hết chỗ thì
 * xuống dòng, đúng theo cái đang có thật.
 *
 * Chốt chặn để không tái diễn cảnh đè lên nhau: khối trái có flex-basis THẬT
 * (220px). Nhóm bên phải hết chỗ thì tụt xuống hàng dưới, và khi đó khối trái
 * được nguyên một hàng — không còn đường nào ép nó xuống dưới 38px của avatar
 * để avatar phải tràn ra ngoài.
 *
 * CỐ Ý KHÔNG đặt overflow: hidden ở khối trái: chấm trạng thái trên avatar nằm
 * ở right/bottom -1px, tức thò ra ngoài khung avatar một chút, cắt là mất chấm. */
#thanh-tren {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--k2) var(--k3);
  padding: var(--k2) var(--k4);
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien-cot);
}

.thanh-tren-trai {
  display: flex;
  align-items: center;
  gap: var(--k3);
  /* 220px là chỗ vừa đủ cho avatar cộng một cái tên đọc được. Đây là phần
   * KHÔNG được lấy đi: mất tên khách thì nhân viên không biết đang nói chuyện
   * với ai, tệ hơn hẳn việc mấy cái ô chọn phải tụt xuống hàng dưới. */
  flex: 1 1 220px;
  min-width: 0;
}

.thanh-tren-trai .avatar {
  width: 38px;
  height: 38px;
  font-size: var(--chu-3);
  flex-shrink: 0;
}

/* Khối chữ bọc tên và dòng phụ. Thiếu min-width: 0 ở ĐÂY là mọi thứ bên trên
 * vô nghĩa: phần tử flex mặc định không co xuống dưới kích thước nội dung, nên
 * tên dài vẫn đẩy tràn ra ngoài dù cha đã cho phép co. */
.khoi-ten-khach {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.thanh-tren-trai .ten-lon,
.thanh-tren-trai .chu-phu {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thanh-tren-phai {
  display: flex;
  align-items: center;
  gap: var(--k2);
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Co được nhưng không nhỏ hơn nội dung: hết chỗ thì cả nhóm xuống hàng dưới
   * (nhờ flex-wrap của #thanh-tren) chứ không bóp méo từng cái ô. */
  flex: 0 1 auto;
}

.nhan-phan-cong {
  display: flex;
  align-items: center;
  gap: var(--k1);
  font-size: var(--chu-1);
  color: var(--chu-mo);
}

#khung-tin {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--k4) var(--k5);
}

#vung-soan {
  /* position: relative để bảng chọn câu mẫu neo được vào đây */
  position: relative;
  padding: var(--k3) var(--k4) var(--k4);
  background: var(--nen-tam);
  border-top: 1px solid var(--vien-cot);
}

#form-soan {
  display: flex;
  align-items: flex-end;
  gap: var(--k2);
}

#o-soan {
  flex: 1;
  min-height: 40px;
  max-height: 140px;
  padding: var(--k2) var(--k3);
  background: var(--nen-tam);
  color: var(--chu);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-3);
  font-size: var(--chu-3);
  line-height: 1.5;
  resize: none;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

#o-soan:focus {
  outline: none;
  border-color: var(--xanh);
  box-shadow: 0 0 0 3px var(--xanh-nen);
}

#form-soan .nut {
  height: 40px;
}

/* --- Panel bên phải --- */

.panel-phai {
  display: flex;
  flex-direction: column;
  width: var(--cot-panel);
  min-height: 0;
  overflow-y: auto;
  background: var(--nen-tam);
  border-left: 1px solid var(--vien-cot);
}

#thong-tin-khach {
  padding: var(--k3) var(--k4);
}

#thong-tin-khach dt {
  font-size: var(--chu-1);
  font-weight: var(--dam-nua);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chu-mo);
  margin-top: var(--k3);
}

#thong-tin-khach dd {
  font-size: var(--chu-2);
  word-break: break-word;
}

/* --- Cột đơn hàng --- */

#cot-don {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#bo-loc-don {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k2);
  padding: var(--k3) var(--k4);
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien);
}

#bo-loc-don .o-tim {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.nhan-ngay {
  display: flex;
  align-items: center;
  gap: var(--k1);
  font-size: var(--chu-1);
  color: var(--chu-mo);
  white-space: nowrap;
}

.nhan-ngay input {
  width: auto;
}

#luoi-don {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--k3);
  padding: var(--k4);
  align-content: start;
}

/* --- Cột sản phẩm và cải thiện AI --- */

#cot-san-pham,
#cot-cai-thien-ai,
#cot-ticket,
#cot-ban-hang {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Thanh công cụ hai hàng: hàng trên lọc, hàng dưới hành động.
 * Nhồi cả bảy thứ vào một hàng thì màn hẹp là mỗi nút rơi xuống một dòng. */
#thanh-san-pham,
#thanh-cai-thien-ai,
#thanh-ticket,
#thanh-ban-hang {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k2);
  padding: var(--k3) var(--k4);
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien);
}

/* Khối lọc sản phẩm thu gọn được — nút chỉ hiện trên điện thoại, xem
 * .nut-loc ở khối @media phía dưới. Trên máy tính khối này luôn mở. */
#sp-khoi-loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k2);
  width: 100%;
}

#thanh-san-pham .nut-loc {
  width: 100%;
}

.hang-loc-sp,
.hang-nut-sp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k2);
  width: 100%;
}

.hang-nut-sp {
  justify-content: flex-end;
}

/* Chèn giữa hai nhóm trên cùng một hàng để đẩy nhóm sau sang phải */
.day-ra-phai {
  flex: 1;
}

#thanh-san-pham .o-tim {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

#thanh-san-pham .chon-tt {
  flex: 0 1 auto;
  min-width: 140px;
}

/* Đúng MỘT vùng cuộn cho mỗi tab. Lồng khung cuộn trong khung cuộn là thứ
 * khiến màn hình đầy thanh kéo ngang dọc, không ai muốn dùng. */
.vung-cuon {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--k4);
}

#luoi-san-pham {
  display: grid;
  gap: var(--k3);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  align-content: start;
}

#luoi-bao-loi {
  display: grid;
  gap: var(--k3);
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  align-content: start;
}

#luoi-ticket {
  display: grid;
  gap: var(--k3);
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  align-content: start;
}

#cot-ct-ticket {
  width: min(420px, 100vw);
}

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

/* Thanh công cụ tab này chỉ có mỗi nút chọn mục, nên nó là flex item duy nhất
 * và co lại bằng min-content — chữ "Khuyến mãi" bị bẻ đôi. Cho một bề ngang
 * thoải mái thay vì để nó tự co. */
#thanh-ban-hang .phan-doan {
  flex: 0 0 auto;
  min-width: 260px;
}

/* Một màn = một cột dọc các thẻ; bên trong mới chia lưới. Làm vậy để khối
 * "đang áp dụng" luôn nằm dưới cùng và ăn hết bề ngang, không bị lưới kéo lên
 * cạnh mấy ô nhập rồi phải cuộn ngang mới đọc hết bảng. */
.man-cd {
  display: flex;
  flex-direction: column;
  gap: var(--k5);
}

.luoi-cd {
  display: grid;
  gap: var(--k5);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

#khoi-thong-ke-ai {
  margin-bottom: var(--k4);
}

/* Hai khối biểu đồ nằm cạnh nhau khi đủ rộng, xuống dòng khi hẹp */
.hang-bieu-do {
  display: grid;
  gap: var(--k3);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

#cot-form-sp {
  width: min(440px, 100vw);
}

/* --- Bộ lọc nhật ký --- */

#loc-nhat-ky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
  padding: var(--k3) var(--k4);
  border-bottom: 1px solid var(--vien);
}

#loc-nhat-ky .chon-tt {
  flex: 1;
  min-width: 120px;
  font-size: var(--chu-1);
}

/* --- Cột tài khoản --- */

#cot-tai-khoan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#thanh-tai-khoan {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k2);
  padding: var(--k3) var(--k4);
  background: var(--nen-tam);
  border-bottom: 1px solid var(--vien);
}

#luoi-tai-khoan {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--k3);
  padding: var(--k4);
  align-content: start;
}

#form-tai-khoan {
  padding-bottom: var(--k4);
}

/* ===== Nút quay lại chỉ có trên điện thoại =============================== */

.chi-dien-thoai {
  display: none;
}

/* ===== Màn hình vừa: gộp panel thành lớp phủ =============================
 *
 * NGƯỠNG TÍNH RA CHỨ KHÔNG ĐOÁN. Ba cột chỉ đứng cạnh nhau được khi cộng lại
 * vẫn còn chỗ cho cột chat đọc được:
 *
 *   thanh dọc 212 + danh sách 292 + panel 340 = 844px
 *   cột chat cần tối thiểu ~520px để khung tin và thanh trên còn thở
 *   → dưới khoảng 1364px thì phải cho panel phủ lên
 *
 * Ngưỡng cũ là 1180px, tức là ở dải 1181–1400px panel vẫn chen vào hàng và bóp
 * cột chat còn hơn 300px — đúng chỗ hỏng người dùng báo: mở panel Thông tin là
 * tên khách biến mất, avatar đè lên công tắc AI. Màn 1366x768 là cỡ laptop phổ
 * biến nhất nên nó rơi thẳng vào dải đó. */

@media (max-width: 1400px) {
  .man {
    grid-template-columns: var(--cot-ds) minmax(0, 1fr);
  }

  .panel-phai {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(var(--cot-panel), 100vw);
    box-shadow: var(--bong-3);
  }
}

@media (max-width: 1360px) {
  #ung-dung {
    --cot-ds: 292px;
  }
}

/* ===== Điện thoại ======================================================== */

@media (max-width: 820px) {
  /* Thanh điều hướng xuống đáy, ứng dụng xếp dọc.
   *
   * PHẢI LÀ minmax(0, 1fr), KHÔNG PHẢI 1fr. Đây là gốc của lỗi "màn hình điện
   * thoại bị cắt cụt bên phải": một cột `1fr` vẫn có bề rộng tối thiểu bằng
   * min-content của nội dung, mà nội dung ở đây là thanh điều hướng bảy tab —
   * nó không co được nên kéo cả cột rộng hơn màn hình. Cộng với `overflow:
   * hidden` ở #ung-dung, phần thừa bị CẮT chứ không cuộn được: mọi tab đều mất
   * mép phải, kể cả chính thanh điều hướng. */
  #ung-dung {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .ray-doc {
    order: 2;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: var(--k1) var(--k2);
    padding-bottom: max(var(--k1), env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ray-hieu {
    display: none;
  }

  /* KHỐI NGƯỜI DÙNG ĐÓNG VAI Ô THỨ NĂM CỦA THANH DƯỚI — nút "Thêm".
   *
   * Nó vốn đã là cửa vào trình đơn chứa Zalo, đổi mật khẩu và ĐĂNG XUẤT, nên
   * gom nốt mấy tab không còn chỗ vào đây là đúng chỗ — thêm một nút "Thêm"
   * riêng cạnh nó thì lại chật đúng như cũ. Trông y hệt một tab để không ai
   * phải học thêm gì. */
  .ray-nguoi {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: auto;
    min-width: 56px;
    max-width: 96px;
    min-height: var(--cham-toi-thieu);
    padding: 5px 4px;
    color: var(--chu-ray-mo);
    font-size: 11px;
    line-height: 1.2;
  }

  .ray-nguoi .khoi-ten,
  .mui-trinh-don {
    display: none;
  }

  .ray-nguoi .avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Đang đứng ở một tab nằm trong trình đơn: sáng lên như tab đang chọn, không
     thì cả thanh không chỗ nào sáng và người ta không biết mình đang ở đâu. */
  .ray-nguoi.dang-chon {
    background: var(--xanh);
    color: var(--tren-xanh);
  }

  .nhan-them {
    display: block;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #cham-trinh-don-toi {
    position: absolute;
    top: 4px;
    right: 10px;
  }

  /* Loa, chuông và nút thu gọn: đã dời vào trình đơn (loa, chuông) hoặc vốn
     chỉ có trên máy tính (thu gọn). Giữ lại là quay về mười thứ một hàng. */
  .hang-nut-ray {
    display: none;
  }

  /* .chi-dien-thoai đặt inline-flex, mà mục trình đơn cần chiếm trọn bề ngang. */
  .muc-trinh-don.chi-dien-thoai {
    display: flex;
  }

  #trinh-don-tab-tran {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Trình đơn bung LÊN TRÊN từ thanh dưới, neo mép phải cho khỏi tràn màn hình. */
  .trinh-don {
    left: auto;
    right: 0;
    bottom: calc(100% + var(--k2));
    width: min(260px, calc(100vw - var(--k4)));
  }

  /* THANH DƯỚI: NHIỀU NHẤT NĂM Ô, KHÔNG CẮT CHỮ, KHÔNG CUỘN NGANG.
   *
   * Bảy tab cộng avatar, loa, chuông là mười thứ chia nhau 360px — mỗi cái
   * 36px, nhãn co thành "H…", "Đ…", "S…". Người trực nhìn vào không đoán nổi
   * cái nào là cái nào, tức là thanh điều hướng thôi điều hướng được.
   *
   * Giờ: bốn tab hay dùng + nút "Thêm" chứa phần còn lại (thanhDuoi.js chia).
   * Cuộn ngang đã thử và bỏ — tab nằm ngoài màn hình thì coi như không tồn
   * tại, vì không ai nghĩ tới việc vuốt một thanh điều hướng. */
  .ray-menu {
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    min-width: 0;
  }

  /* Tab không còn chỗ: giấu khỏi thanh, đã có mục tương ứng trong trình đơn. */
  .muc-ray.tab-tran {
    display: none;
  }

  .muc-ray {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: auto;
    min-height: var(--cham-toi-thieu);
    padding: 5px 4px;
    font-size: 11px;
    line-height: 1.2;
  }

  .muc-ray .nhan-chu {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Phải là block để ba chấm chạy: .chi-dien-thoai đặt display inline-flex,
     mà text-overflow không áp cho chữ nằm trong một hộp flex. */
  .muc-ray .nhan-chu.chi-dien-thoai {
    display: block;
  }

  /* Chấm số neo vào CHÍNH cái tab của nó.
   *
   * Thiếu `position: relative` ở .muc-ray thì absolute đi tìm mốc neo ở tận
   * ngoài và chấm rơi ra mép trái màn hình, tách hẳn khỏi tab — nhìn như một
   * vệt lỗi chứ không ai đoán được nó là số việc của Hội thoại.
   *
   * Neo bằng top/right thay cho margin âm: margin âm đo từ vị trí tự nhiên,
   * mà vị trí đó đổi theo bề ngang tab (bảy tab thì tab nào cũng co khác nhau). */
  .muc-ray .dem-tab {
    position: absolute;
    top: 2px;
    right: 6px;
    margin: 0;
  }

  .ray-chan {
    flex-direction: row;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: var(--k2);
    margin-left: var(--k2);
  }

  /* Ba màn trượt: mỗi lúc chỉ hiện một, đổi bằng data-buoc trên #man-chat.
   *
   * Danh sách này phải có ĐỦ MỌI TAB, đúng lý do đã ghi ở khuôn hai cột phía
   * trên: thiếu tab nào thì tab đó giữ cột thứ hai `auto`, và cột đó đo theo
   * nội dung nên đẩy cả màn rộng hơn điện thoại. */
  #man-chat,
  #man-don,
  #man-san-pham,
  #man-cai-thien-ai,
  #man-ticket,
  #man-ban-hang,
  #man-tai-khoan {
    grid-template-columns: minmax(0, 1fr);
  }

  #man-chat[data-buoc='danh-sach'] #cot-chat,
  #man-chat[data-buoc='chat'] #cot-danh-sach,
  #man-chat[data-buoc='thong-tin'] #cot-danh-sach,
  #man-chat[data-buoc='thong-tin'] #cot-chat {
    display: none;
  }

  .panel-phai {
    position: static;
    width: 100%;
    box-shadow: none;
    border-left: none;
  }

  /* Panel đơn hàng và tài khoản vẫn là lớp phủ toàn màn */
  #cot-chi-tiet-don,
  #cot-form-tai-khoan,
  #cot-nhat-ky {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
  }

  .chi-dien-thoai {
    display: inline-flex;
  }

  .chi-may-tinh {
    display: none;
  }

  /* Vùng bấm đủ lớn cho ngón tay */
  .nut,
  .chon-tt,
  .o-sua,
  .o-tim {
    min-height: var(--cham-toi-thieu);
  }

  .nut-bieu-tuong {
    width: var(--cham-toi-thieu);
    height: var(--cham-toi-thieu);
  }

  .tin {
    max-width: 88%;
  }

  #khung-tin {
    padding: var(--k3);
  }

  #luoi-don,
  #luoi-tai-khoan,
  #luoi-san-pham,
  #luoi-bao-loi {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--k3);
  }

  #cot-form-sp,
  #cot-ct-ticket {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
  }

  #luoi-ticket {
    grid-template-columns: minmax(0, 1fr);
  }

  #khay-toast {
    right: var(--k3);
    left: var(--k3);
    bottom: calc(var(--cham-toi-thieu) + var(--k4));
    align-items: stretch;
  }

  .toast {
    max-width: none;
  }
}