/* ==========================================================
   FILE NÀY DÙNG ĐỂ: Style dùng chung cho toàn bộ giao diện
   PACOBOOKS — trang đăng nhập + khung 3 cột (Dashboard).
   ========================================================== */

/* Font Be Vietnam Pro (đợt sửa giao diện, 31/08/2026 — nạp qua <link> trong dashboard-cap1.html);
   vẫn giữ Arial làm phương án dự phòng nếu font chưa kịp tải. */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Be Vietnam Pro", Arial, sans-serif; }
/* Khoá cứng bề ngang toàn trang (đợt sửa 07/09/2026, Ông Paco yêu cầu) — dù có ô/khối nào bên
   trong lỡ rộng hơn màn hình (chữ dài, thẻ không co kịp...) cũng KHÔNG được đẩy cả trang rộng ra
   ngoài nữa (gây thanh cuộn ngang). Trang rộng hơn màn hình là nguyên nhân khiến iPhone lẫn lộn
   giữa "vuốt để cuộn dọc" và "phóng to/thu nhỏ cả trang", đúng kiểu lỗi phải zoom ra-vào vài lần
   mới vuốt lại được. */
html, body { overflow: hidden; overscroll-behavior: none; height: 100%; max-width: 100%; }
body { background: #f4f5f7; color: #222; }

/* ----- Màn hình KHOÁ TOÀN BỘ khi công ty bị Cấp 1 TẮT (đợt sửa 20, 21/08) — thay hẳn cả trang,
   nền xanh navy-gold đồng bộ thương hiệu PACOAI, logo giữa màn hình, đúng 1 thông điệp ngắn bên
   dưới. Cấp 2/3 thật KHÔNG có nút gì; Cấp 1 đang đóng vai thì có nút "Quay lại"
   (khung-chung.js: hienThiKhoaCongTy) ----- */
.man-hinh-khoa-cong-ty {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0b1f4d 0%, #16326e 55%, #0b1f4d 100%);
  color: #fff; text-align: center; padding: 24px;
}
.man-hinh-khoa-cong-ty img { width: 220px; max-width: 60vw; margin-bottom: 28px; }
.man-hinh-khoa-cong-ty .thong-diep-khoa-cong-ty {
  font-size: 16px; font-weight: 700; line-height: 1.8; margin: 0; letter-spacing: 0.3px;
  color: #f5d67c;
  background: linear-gradient(90deg, #f6e3a1, #d9a84e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.man-hinh-khoa-cong-ty button {
  margin-top: 30px; padding: 10px 22px; border-radius: 6px; border: 1px solid #d9a84e;
  background: transparent; color: #f5d67c; font-size: 13px; cursor: pointer;
}
.man-hinh-khoa-cong-ty button:hover { background: rgba(217, 168, 78, 0.15); }

/* ----- Trang đăng nhập -----
   Nền xanh lục thẫm (đã cho sáng hơn 1 chút), logo nằm sát phía trên
   khung trắng (khung trắng làm mờ 40%), chữ nhãn căn trái theo ô nhập. */
.trang-dang-nhap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e4632; /* xanh lục thẫm, sáng hơn bản trước */
}
.nhom-dang-nhap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo-trang-dang-nhap {
  width: 440px; /* lớn hơn 100% so với bản trước (220px) */
  max-width: 90%;
  height: auto;
  margin-bottom: 8px; /* để sát khung trắng bên dưới */
}
.hop-dang-nhap {
  background: rgba(107, 114, 128, 0.6); /* nền xám, mờ đi 40% (kính mờ) */
  backdrop-filter: blur(6px);
  padding: 18px 40px 26px; /* giảm chiều cao, chỉ rộng hơn dữ liệu 1 chút */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  width: 320px;
}
.hop-dang-nhap h1 {
  text-align: center; margin-bottom: 4px;
  color: #f5c451; /* vàng gold, nổi bật trên nền xám-xanh, khớp tông logo */
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.phu-de { text-align: center; color: #e5e7eb; margin-bottom: 14px; }
.hop-dang-nhap label { display: block; text-align: left; margin-top: 10px; margin-bottom: 4px; font-size: 14px; color: #fff; }
.hop-dang-nhap input {
  width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px;
  background: #fff;
}
.quen-mat-khau {
  display: block;
  text-align: right;
  margin-top: 8px;
  font-size: 13px;
}
.quen-mat-khau a { color: #93c5fd; text-decoration: none; }
.quen-mat-khau a:hover { text-decoration: underline; }
.hop-dang-nhap button {
  width: 100%; margin-top: 16px; padding: 10px; background: #2563eb;
  color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 15px;
}
.hop-dang-nhap button:hover { background: #1d4ed8; }
.thong-bao-loi { color: #dc2626; margin-top: 10px; font-size: 14px; min-height: 18px; }

/* ----- Khung 3 cột (mục 1.1 - 1.2 Kế hoạch) -----
   Cột trái (menu) rộng theo nội dung (max-content) — không cố định 260px nữa,
   để menu chữ ngắn thì cột hẹp lại, đỡ tốn chỗ. */
/* Chiều cao thanh logo/header — dùng chung 1 biến để mọi trang giống hệt nhau
   (đã giảm bớt 1 chút so với bản 168px trước) */
:root {
  --cao-thanh-logo: 130px;

  /* Bảng màu MỚI (đợt sửa giao diện, 31/08/2026 — Ông Paco chốt): nền trắng làm chủ đạo, navy
     là màu cấu trúc (header, icon, nút chính), vàng gold chỉ còn dùng làm ĐIỂM NHẤN nhỏ (badge,
     1 nút chính) — không tô nền lớn nữa. Chỉ mới ÁP DỤNG cho bản điện thoại (@media
     max-width:768px) theo đúng yêu cầu "chỉ sửa cho bản điện thoại" của Ông Paco — khai báo biến
     dùng chung ở đây, các quy tắc nền/chữ lớn ngoài @media đó GIỮ NGUYÊN như cũ. */
  --navy-900:#0a1a3d; --navy-800:#0f2350; --navy-700:#1c3d7a; --navy-600:#2c5299;
  --gold-500:#d9a84e; --gold-300:#f3d98b; --gold-100:#fbf0d9;
  --bg:#ffffff; --surface-2:#f6f5f2;
  --border:#e2ddd0; --border-strong:#cbc4b0;
  --ink:#1c1a15; --ink-muted:#6f6a5c; --ink-faint:#a29c8a;
  --ok:#1f8a52; --warn:#c07a1c; --danger:#c23b3b;
}

/* ----- 4 lớp nút dùng chung MỚI (đợt sửa giao diện, 31/08/2026) — chỉ áp dụng cho các phần tử
   MỚI thêm ở đợt này (Cấp 1, điện thoại), KHÔNG đi sửa lại các nút cũ đã có sẵn trong hệ thống
   để tránh rủi ro vỡ giao diện chỗ khác ngoài phạm vi đợt sửa này. ----- */
.bt-primary, .bt-secondary, .bt-ghost, .bt-danger {
  border-radius: 10px; padding: 11px 20px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.bt-primary { background: var(--gold-500); color: var(--navy-900); border: none; }
.bt-primary:hover { background: var(--gold-300); }
.bt-secondary { background: transparent; color: var(--navy-700); border: 1.5px solid var(--navy-700); }
.bt-secondary:hover { background: var(--navy-700); color: #fff; }
.bt-ghost { background: var(--surface-2); color: var(--ink); border: none; }
.bt-ghost:hover { background: var(--border); }
.bt-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.bt-danger:hover { background: var(--danger); color: #fff; }

.khung-dashboard {
  display: grid;
  /* Trái (theo nội dung) - Giữa (lớn nhất) - thanh kéo (6px) - Phải (co giãn được, mục 1.2 Kế hoạch) */
  grid-template-columns: max-content 1fr 6px var(--rong-view, 300px);
  grid-template-rows: var(--cao-thanh-logo) 1fr;
  /* Đợt sửa 05/09/2026 (Ông Paco báo trên điện thoại giao diện hay "xê dịch"/thẻ chat tự
     phóng-thu nhỏ, phải bấm zoom ra mới lướt được, VD rõ nhất ở "Kiến thức sản phẩm") — gốc lỗi:
     100vh trên điện thoại tính theo chiều cao lớn nhất có thể (như khi thanh địa chỉ ẩn hẳn),
     không tự cập nhật khi thanh địa chỉ/bàn phím ảo ẩn-hiện thật, khiến khung chat bên trong
     (flex:1 + min-height:0, xem .khung-hoc-ai/.ds-hoi-dap) tính sai chiều cao còn lại, phải zoom
     tay để trình duyệt tính lại mới đúng. Đổi sang 100dvh (chiều cao thật đang thấy, tự cập nhật
     theo thanh địa chỉ/bàn phím) — khai 100vh trước để trình duyệt cũ không hỗ trợ vẫn chạy được
     bình thường, trình duyệt mới hơn sẽ đọc dòng 100dvh đứng sau và ghi đè đúng. */
  height: 100vh;
  height: 100dvh;
}
/* Khung View đang bị ẩn (đã chốt 21/08) — thu về 0, thanh kéo vẫn còn để bấm hiện lại */
.khung-dashboard.view-dang-an {
  grid-template-columns: max-content 1fr 6px 0;
}
.khung-dashboard.view-dang-an .khung-view { padding: 0; border-left: none; overflow: hidden; }
.khung-dashboard.view-dang-an .noi-dung-khung-view { display: none; }

/* ----- Thanh header: Logo PACOAI khoá cố định bên trái + khung quảng cáo chạy chữ (mục 1.3 Kế hoạch) ----- */
.thanh-header {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  background: #111827; color: #fff;
  overflow: hidden; /* để chữ quảng cáo chạy không tràn ra ngoài */
}
.logo-pacoai {
  flex-shrink: 0; /* logo không bao giờ bị co lại, luôn khoá 1 vị trí góc trái */
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0;
  border-right: 1px solid #333;
}
.logo-pacoai img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.khung-quang-cao {
  flex: 1; /* chiếm hết phần còn lại, từ logo kéo dài sang phải */
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center;
}
.chuoi-quang-cao {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  padding-left: 100%; /* bắt đầu từ ngoài mép phải */
  /* Tốc độ chạy (đợt sửa 13/09/2026 — Cấp 1 tự chỉnh được ở trang "Quảng cáo", xem
     quang-cao.js/quang-cao-quan-ly.js): đọc biến CSS "--qc-toc-do" do JS gán trực tiếp lên phần
     tử này, còn 100s là mặc định khi CHƯA cấu hình gì (giữ đúng trải nghiệm cũ). */
  animation: chay-quang-cao var(--qc-toc-do, 100s) linear infinite;
}
.chuoi-quang-cao .muc-quang-cao {
  /* Cỡ chữ (đợt sửa 13/09/2026 — tương tự tốc độ ở trên) — đọc biến CSS "--qc-co-chu", 14px là
     mặc định cũ khi chưa cấu hình. Áp dụng CHUNG mọi kích thước màn hình (Ông Paco chốt: banner
     này hiển thị cả 3 Cấp, không tách riêng theo máy tính/điện thoại) — không còn khai riêng
     trong @media điện thoại nữa (đã gỡ 2 chỗ cũ, xem ghi chú ở đó). */
  font-size: var(--qc-co-chu, 14px); color: #cbd5e1; display: flex; align-items: center; gap: 6px;
}
@keyframes chay-quang-cao {
  from { transform: translateX(0); }
  to   { transform: translateX(-200%); }
}
.thong-tin-tai-khoan {
  flex-shrink: 0;
  margin-left: auto; font-size: 14px; display: flex; gap: 12px; align-items: center;
  padding: 0 16px; height: 100%;
  border-left: 1px solid #333;
}
.thanh-header button {
  background: transparent; border: 1px solid #555; color: #fff;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
}

/* ----- Menu cây bên trái (mục 1.4 Kế hoạch) -----
   Mỗi mục cha là 1 "hộp" tách biệt, bấm vào xổ mục con ra.
   Sidebar chia 2 phần: phần cuộn (menu-cuon) ở trên, phần chân cố định
   (chan-menu: Cài đặt hệ thống + tên tài khoản/đăng xuất) ở dưới. */
.menu-trai {
  background: #fff; border-right: 1px solid #e5e7eb;
  display: flex; flex-direction: column;
  min-width: 170px; /* không hẹp quá khi tên mục ngắn */
  overflow: hidden;
}
.menu-cuon {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* cuộn mượt/có đà trên iOS Safari (đợt sửa mobile 07/09/2026) */
  padding: 0; /* sát khung menu dọc, không chừa lề 2 bên */
}
.chan-menu {
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
  padding: 0;
}
/* "Báo cáo / Xin ý kiến" ghim cố định ở chân menu, NẰM TRÊN "Cài đặt hệ thống"
   (không nằm trong menu cuộn nữa) — luôn thấy được, bấm mở thẳng màn hình Báo cáo (21/08). */
.hang-bao-cao-chan {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  background: #dfe1e4;
  border-bottom: 1px solid #e5e7eb;
}
.hang-bao-cao-chan:hover { background: #d3d5d9; }
.thong-tin-tai-khoan-chan {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  font-size: 13.5px;
  white-space: nowrap;
}
.thong-tin-tai-khoan-chan button {
  background: #fff; border: 1px solid #ccc; color: #333;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.hop-muc-menu {
  border: none;
  border-bottom: 1px solid #e5e7eb; /* chỉ 1 gạch ngăn cách, sát 2 bên khung menu */
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}
/* Cấp 1 (ngoài cùng, vd PACOBOOKS, + Thêm dự án) — màu xám */
.tieu-de-muc-menu {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  background: #dfe1e4;
}
.tieu-de-muc-menu:hover { background: #d3d5d9; }
.khu-phai-tieu-de {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tieu-de-muc-menu .mui-ten {
  font-size: 11px; color: #666; transition: transform 0.2s ease; flex-shrink: 0;
}
.hop-muc-menu.dang-mo .mui-ten { transform: rotate(180deg); }

/* Cấp 2 (mục con của cấp 1, vd Bot AI, Huấn luyện AI...) — nhạt hơn */
.danh-sach-muc-con {
  max-height: 0;
  overflow: hidden;
  background: #eef0f2;
  transition: max-height 0.3s ease;
}
/* Để đủ chỗ khi nhiều cấp cùng mở lồng nhau (PACOBOOKS > Bot AI > Facebook...) */
.hop-muc-menu.dang-mo > .danh-sach-muc-con { max-height: 2000px; }

/* Mục lồng cấp 2 trở lên (vd Bot AI, Huấn luyện AI bên trong PACOBOOKS) — thu nhỏ,
   thụt vào bằng viền trái (không dùng margin nổi để vẫn sát khung menu dọc) */
.danh-sach-muc-con .hop-muc-menu-con {
  border: none;
  border-bottom: 1px solid #e3e5e8;
  border-left: 3px solid #c7cbd1;
  margin: 0;
}
.danh-sach-muc-con .hop-muc-menu-con .tieu-de-muc-menu {
  padding: 8px 10px 8px 8px;
  font-size: 13px;
  font-weight: 400;
  background: #eef0f2; /* cùng tông với danh-sach-muc-con cha, không tự vẽ thêm màu riêng */
}
.danh-sach-muc-con .hop-muc-menu-con .tieu-de-muc-menu:hover { background: #e4e7ea; }
/* KHÔNG để dấu gạch cạnh các mục có mũi tên xổ xuống (chỉ mục lá .muc-con mới có dấu gạch) */

/* Cấp 3 (mục lá trong cùng, vd Facebook, Zalo... hoặc Nhân viên 1, 2...) — nhạt nhất */
.danh-sach-muc-con .hop-muc-menu-con .danh-sach-muc-con {
  background: #f7f8fa;
}
.muc-con {
  padding: 8px 12px 8px 22px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  border-top: 1px solid #ececec;
}
.muc-con::before {
  content: '– '; /* dấu gạch đầu dòng cho mục lá đã thụt vào */
  color: #9aa0a8;
}
.muc-con:hover { background: #e9edf1; }

/* Mục nhân viên có kèm nút Bật/Tắt (Cấp 2) */
.muc-con-bat-tat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.muc-con-bat-tat::before { content: none; } /* không dùng dấu gạch chung, đã có nút riêng */
.nut-bat-tat {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.nut-bat-tat.dang-bat { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.nut-bat-tat.dang-tat { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.nut-bat-tat.bi-khoa,
.nut-bat-tat:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nut-bat-tat.chi-xem { cursor: default; } /* nhãn chỉ xem, không bấm được — chỉ Cấp 1 mới khoá/mở được */

/* Mục bị khoá bởi cấp trên (đợt sửa khoá-mờ, mục 1.10b2 Kế hoạch): CHỈ hiện mờ + vô hiệu hoá
   thao tác/xem thật (opacity thấp + pointer-events tắt), KHÔNG ẩn khỏi giao diện, KHÔNG kèm
   chữ/nhãn/tooltip giải thích nào — khác hẳn cơ chế khoá-cả-công-ty (dùng màn hình riêng, xem
   .man-hinh-khoa-cong-ty, KHÔNG đụng vào ở đây). Dùng ở Cấp 2/3 — Cấp 1 không bao giờ bị gắn lớp
   này (biKhoaTheoCap luôn false ở Cấp 1). */
.muc-bi-khoa {
  opacity: 0.45;
  pointer-events: none;
  cursor: default !important;
}
.danh-sach-muc-con .hop-muc-menu-con .muc-con {
  padding-left: 24px;
  font-size: 13px;
}

/* min-height:0 khai tường minh (đợt sửa 07/09/2026) — Safari (iPhone) không tự tính đúng chiều
   cao giới hạn cho khung cuộn lồng bên trong nếu thiếu dòng này, dù overflow-y:auto về lý thuyết
   đã ngầm định — gây vuốt không phản hồi, phải zoom ra/vào mới ép tính lại (Chrome/Firefox không
   dính, chỉ Safari). Xem flexbugs #106 + WebKit bug 275209. */
.khu-vuc-giua { padding: 20px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; min-height: 0; max-width: 100%; }
.khu-vuc-giua h2 { margin-bottom: 10px; }

/* ----- Tiêu đề Trang chủ Cấp 2 — "PACOBOOKS / Tri thức sách & Tri thức số" (22/08) -----
   Căn giữa, 2 dòng, đặt trên nền navy-gold thu nhỏ (đồng bộ mẫu thẻ thương hiệu chung của app)
   để chữ vàng gradient đủ tương phản — dòng 1 tên thương hiệu to đậm, dòng 2 slogan nhỏ hơn. */
.tieu-de-trang-chu-cap2 {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; margin: 0 0 20px; padding: 18px 24px;
  background: linear-gradient(135deg, #0b1f4d 0%, #16326e 55%, #0b1f4d 100%);
  border-radius: 12px;
}
.tieu-de-trang-chu-cap2 .dong-1 {
  font-size: 26px; font-weight: 800; letter-spacing: 0.5px;
  background: linear-gradient(90deg, #f6e3a1, #d9a84e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tieu-de-trang-chu-cap2 .dong-2 {
  font-size: 14px; font-weight: 500; color: #cfe0ff; letter-spacing: 0.3px;
}

/* ----- Màn hình làm việc khi chọn 1 Bot (mục 1.5 Kế hoạch) -----
   4/5 phía trên: lưới các phiên chat nhỏ | 1/5 phía dưới: ô nhập trả lời */
.ghi-chu-mock {
  color: #9aa0a8; font-size: 12.5px; margin-bottom: 12px; font-style: italic;
}
/* Cảnh báo đỏ "từng cảnh báo trùng lặp" trong kho Kiến thức sản phẩm (mục thống nhất 04/09/2026,
   Ông Paco chốt: hiện đỏ NGAY CẢ SAU KHI đã duyệt vào kho, để dễ nhận biết câu nào từng nghi trùng). */
.canh-bao-trung-lap {
  color: #dc2626; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; display: inline-block;
}
.man-hinh-bot { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Bên trong màn hình 1 Bot, lưới thẻ phiên chiếm 4/5 phía trên, cuộn riêng nếu dài (mục 1.5) —
   dùng chung mẫu thẻ ".luoi-1-hang" với Trang chủ Cấp 3, chỉ ghi đè phần chiếm chỗ (đợt sửa 6,
   21/08; đổi sang ".luoi-1-hang"/".the-1-hang" đợt đồng bộ layout thẻ, 31/08/2026 lần 3). */
.man-hinh-bot .luoi-1-hang { flex: 4; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 12px; margin-top: 0; align-content: start; }
/* Ông Paco báo (30/08) nút "Tham gia" ở màn Bot AI (điện thoại) nhìn như bị lệch/tràn đè lên
   thẻ hàng dưới. Chốt chặn thêm cho ĐÚNG khu vực này (không đụng các lưới thẻ khác): mỗi thẻ
   có ngữ cảnh xếp lớp riêng (isolation) + khoảng cách hàng dư dả hơn, để chắc chắn không thẻ
   nào đè lên thẻ khác dù nội dung tin nhắn dài ngắn khác nhau. */
.man-hinh-bot .the-1-hang { position: relative; isolation: isolate; }
.khung-nhap-chat {
  flex: 1; min-height: 64px; display: flex; gap: 8px; align-items: flex-start;
  border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 8px;
}
.khung-nhap-chat input {
  flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 6px;
  /* Đợt sửa 05/09/2026 — chữ < 16px làm iPhone tự ZOOM VÀO mỗi khi bấm gõ (đúng hiện tượng
     Ông Paco báo "cửa sổ chát tự phóng lên"), zoom xong lệch vị trí -> tưởng như "xê dịch". Nâng
     lên 16px (mức sàn để trình duyệt không tự zoom) là đủ, không cần khoá zoom cả trang. */
  font-size: 16px;
}
.khung-nhap-chat button {
  padding: 10px 18px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.khung-nhap-chat input:disabled, .khung-nhap-chat button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Bot Website THẬT — khung chat chi tiết 1 phiên (mục mới, 03/09/2026) ----- */
.khu-chi-tiet-phien-chat-web:empty { display: none; }
/* Đợt sửa 07/09/2026 — dòng này trước đây CHỈ khai trong @media điện thoại (bên dưới file), bản
   máy tính bị THIẾU hẳn -> khung chat không bị giới hạn chiều cao, phình to hết theo nội dung
   thay vì tự cuộn bên trong -> cả khối (kể cả thanh ghim "Quay lại danh sách") bị cuốn theo cuộn
   ngoài .khu-vuc-giua, khiến thanh ghim vô tác dụng. Đưa xuống đây để áp dụng chung mọi kích
   thước màn hình — không đụng dòng khai riêng trong @media điện thoại (giữ nguyên, dù trùng lặp
   nhưng vô hại, để không ảnh hưởng các đợt sửa mobile khác đã ghi chú tại đó). */
.khu-chi-tiet-phien-chat-web:not(:empty) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.khung-chi-tiet-phien-chat-web {
  display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid #e5e7eb;
  border-radius: 8px; overflow: hidden; background: #fff;
}
/* .khung-nhap-chat vốn có "flex:1" (dùng cho màn minh hoạ Facebook/Zalo/Telegram, ăn theo tỉ lệ
   4:1 với ".luoi-1-hang" ở đó) — ở ĐÂY thì nó lại chia đôi khoảng trống thừa với khung tin nhắn
   bên trên (.bong-tin-nhan-web-khung cũng flex:1), khiến khung tin nhắn nhỏ lại còn ô nhập liệu
   tự phình to ra một khoảng trắng vô ích bên dưới hàng input/nút Gửi (chính là ô trống Ông Paco
   liên tục báo, gốc lỗi tìm ra 03/09/2026) -> ép về flex cố định, chỉ cao đúng theo nội dung. */
.khung-chi-tiet-phien-chat-web .khung-nhap-chat { flex: 0 0 auto; margin-top: auto; }
.khung-chi-tiet-phien-chat-web-dau {
  /* Ghim cố định thanh này (nút "Quay lại danh sách" + tên khách + nút "Trả lại cho AI") luôn
     nổi trên cùng khung chat khi cuộn xem tin nhắn dài, không bị trôi mất — Ông Paco yêu cầu
     07/09/2026, áp dụng cả bản máy tính lẫn điện thoại. sticky tự bám theo đúng vùng đang cuộn
     (dù là .bong-tin-nhan-web-khung hay .khu-vuc-giua bên ngoài), không cần biết trước chỗ nào
     đang thực sự cuộn. z-index cao hơn bong bóng tin nhắn để không bị đè lên. */
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f5f9;
  border-bottom: 1px solid #e5e7eb; font-size: 13px; color: #374151; flex-wrap: wrap;
}
.khung-chi-tiet-phien-chat-web-dau button {
  font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer;
}
.khung-chi-tiet-phien-chat-web-dau span { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: break-word; text-align: center; }
/* overflow-x: hidden (đợt sửa 07/09/2026, Ông Paco báo 1 số ô chat bị đẩy ngang) — khung này chỉ
   khai overflow-y trước đây, mà theo đúng chuẩn CSS hễ 1 trục có overflow khác "visible" thì trục
   kia tự động cũng thành "auto" -> tự nó có thêm 1 thanh cuộn ngang riêng nếu có nội dung nào lỡ
   rộng hơn khung (VD tin nhắn dán 1 chuỗi/link dài không dấu cách). Khoá thẳng overflow-x: hidden
   ở đây (không cần cuộn ngang, chỉ cuộn dọc) + bắt chữ trong bong bóng PHẢI xuống dòng dù không có
   dấu cách (xem .bong-tin-nhan-web p bên dưới) để xử lý tận gốc, không chỉ chặn phần ngọn. */
.bong-tin-nhan-web-khung { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bong-tin-nhan-web { max-width: 78%; min-width: 0; }
.bong-tin-nhan-web p {
  margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; background: #f1f5f9; color: #111827;
}
.bong-tin-nhan-web-nhan { font-size: 11px; color: #9aa0a8; }
.bong-tin-nhan-web.khach { margin-right: auto; text-align: left; }
/* Đợt sửa 04/09/2026 (Ông Paco báo): trước đó bên AI/Nhân viên bị canh PHẢI (text-align: right)
   khiến chữ nhiều dòng lởm chởm khó đọc — đổi về canh TRÁI cho cả 2 bên (giống Messenger/Zalo),
   chỉ vị trí bong bóng (trái/phải màn hình, qua margin-left/right auto) phân biệt ai đang nói,
   không canh chữ theo phía. Dùng chung 1 file CSS nên áp dụng luôn cho mọi nền tảng (Website,
   Facebook...), không cần sửa riêng từng nơi. */
.bong-tin-nhan-web.ai, .bong-tin-nhan-web.nhan_vien { margin-left: auto; text-align: left; }
.bong-tin-nhan-web.ai p, .bong-tin-nhan-web.nhan_vien p { background: #2563eb; color: #fff; }

.khung-view {
  background: #fff; border-left: 1px solid #e5e7eb; padding: 16px; overflow-y: auto;
}

/* ----- Thanh kéo co giãn / nút ẩn-hiện khung View (giống app Claude, mục 1.2 Kế hoạch) ----- */
.thanh-keo-view {
  position: relative;
  background: #e5e7eb;
  cursor: col-resize;
}
.thanh-keo-view:hover { background: #cbd5e1; }
.nut-an-hien-view {
  /* Đặt lên SÁT ĐỈNH thanh kéo (không phải giữa) để không đè lên vùng người dùng
     hay bấm vào để kéo giãn — tránh nhầm giữa "kéo" và "bấm ẩn/hiện". */
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 30px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; cursor: pointer; font-size: 13px; color: #6b7280;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.nut-an-hien-view:hover { background: #f3f4f6; color: #374151; }

/* ----- Màn hình "Huấn luyện AI" (mục 1.6 Kế hoạch) -----
   Bố cục kiểu cửa sổ chat (giống app Claude): danh sách các cặp đã dạy cuộn ở TRÊN,
   ô nhập (chọn Sản phẩm + Câu hỏi + Câu trả lời + Gửi) đứng CỐ ĐỊNH ở DƯỚI CÙNG. */
.khung-hoc-ai { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Khung "Thử chat với AI" (đợt sửa 31/08/2026, màn Bot AI) — khối đứng riêng, bình thường (KHÔNG
   dùng chung .khung-hoc-ai vì class đó set flex:1/min-height:0 dành riêng cho khung cuộn kiểu cửa
   sổ chat ở màn "Kiến thức sản phẩm" — dùng nhầm khiến khối này bị co lại, đè lên danh sách phiên
   khách bên dưới). */
.khung-thu-chat-ai {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2, #f8f8f6); border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 14px; margin-bottom: 18px;
}
.khung-thu-chat-ai select { width: 100%; }
#ketQuaThuChat { padding-top: 4px; }
#ketQuaThuChat p { margin: 0; word-break: break-word; }
.form-hoc-ai {
  flex-shrink: 0; /* luôn đứng yên ở dưới, không bị đẩy trôi theo danh sách */
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border-top: 1px solid #e5e7eb; padding: 14px 4px 4px;
  margin-top: 8px;
}
.form-hoc-ai select,
.form-hoc-ai input,
.form-hoc-ai textarea {
  /* 16px (thay vì 14px, đợt sửa 05/09/2026) — chống iPhone tự zoom vào khi bấm gõ, đúng chỗ Ông
     Paco báo "vào Kiến thức sản phẩm đôi khi phải thu nhỏ lại mới lướt được". */
  padding: 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: inherit;
}
.form-hoc-ai textarea { min-height: 60px; resize: vertical; }
.form-hoc-ai button {
  align-self: flex-end; padding: 9px 24px; background: #2563eb; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.form-hoc-ai button:hover { background: #1d4ed8; }
.nhan-so-phut-tu-an { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.nhan-so-phut-tu-an input { padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }

.ds-hoi-dap { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.nhom-hoi-dap-sp { display: flex; flex-direction: column; gap: 10px; }
.tieu-de-nhom-hoi-dap {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 10px; font-size: 13px;
  background: #eef2ff; color: #1e3a8a; border-radius: 6px;
}
.dong-hoi-dap {
  /* Việc 3 (30/08): tăng nhẹ khoảng đệm cho thẻ đỡ trông chật/nhỏ so với khoảng trống bên dưới. */
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; background: #fff;
}
.dong-hoi-dap-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dong-hoi-dap p { font-size: 14px; color: #374151; margin-top: 4px; line-height: 1.5; }
.dong-hoi-dap-nut { margin-top: 8px; display: flex; gap: 8px; }
.dong-hoi-dap-nut button,
.the-nhan-vien-nut button,
.nut-luu-sua {
  font-size: 12.5px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid #ccc; background: #fff;
}
.dong-hoi-dap-nut .nut-duyet { background: #2563eb; color: #fff; border-color: #2563eb; }
.dong-hoi-dap-nut .nut-xoa-nhan-vien,
.the-nhan-vien-nut .nut-xoa-nhan-vien,
.dong-hoi-dap-nut .nut-xoa-hoi-dap { color: #dc2626; border-color: #fca5a5; }
.dong-hoi-dap-nut .nut-xoa-nhan-vien:hover,
.the-nhan-vien-nut .nut-xoa-nhan-vien:hover,
.dong-hoi-dap-nut .nut-xoa-hoi-dap:hover { background: #fef2f2; }
.dong-hoi-dap input,
.dong-hoi-dap textarea {
  /* font-size:16px thêm mới (đợt sửa 05/09/2026, cùng lý do chống zoom ở trên — đây là ô sửa
     trực tiếp câu hỏi-đáp trong "Kiến thức sản phẩm"). */
  width: 100%; padding: 8px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 16px;
}
.nhan-trang-thai {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid transparent; flex-shrink: 0;
}
.nhan-trang-thai.cho-duyet { background: #fef9c3; color: #a16207; border-color: #fde047; }
.nhan-trang-thai.da-duyet { background: #dcfce7; color: #16a34a; border-color: #86efac; }

/* ----- Khung "Đang chờ duyệt" nổi bật trên đầu "Kiến thức sản phẩm" (mục mới, 03/09) ----- */
.khung-cho-duyet-noi-bat:empty { display: none; }
.khung-cho-duyet-noi-bat { flex-shrink: 0; margin-bottom: 10px; }
.khung-cho-duyet-noi-bat .dong-hoi-dap { border-color: #fde047; background: #fffbeb; }
.tieu-de-cho-duyet-noi-bat { margin: 0 0 8px; font-size: 13px; color: #a16207; }
.nut-xem-tat-ca-cho-duyet {
  margin-top: 8px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #374151; font-size: 12.5px; cursor: pointer;
}
.ds-cho-duyet-con-lai { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* Dòng gọn: 1 dòng câu hỏi, không hiện sẵn phần Đáp — bấm "Sửa" mới xổ ra ô nhập (mục sửa lại
   theo yêu cầu Ông Paco, tránh chiếm quá nhiều diện tích khi có nhiều câu chờ duyệt). */
.dong-cho-duyet-gon {
  padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cho-duyet-gon-noi-dung { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cho-duyet-gon-cau-hoi {
  font-size: 13.5px; color: #374151; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.dong-cho-duyet-gon .dong-hoi-dap-nut { margin-top: 0; flex-shrink: 0; }

/* ----- "Huấn luyện hàng loạt" — tải file Excel/CSV (mục 1.6 Kế hoạch) ----- */
.hang-nut-tren-danh-sach { flex-shrink: 0; display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nut-mo-hang-loat,
.nut-mo-them-hoi-dap {
  padding: 8px 16px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
  color: #374151; font-size: 13.5px; cursor: pointer;
}
.nut-mo-hang-loat:hover,
.nut-mo-them-hoi-dap:hover { background: #f3f4f6; }
.khung-them-hoi-dap {
  flex-shrink: 0; margin-bottom: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa;
}
.khung-hang-loat {
  margin-top: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa;
}
.hang-hang-loat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hang-hang-loat input[type="file"] { font-size: 12.5px; }
.hang-hang-loat button,
.khung-hang-loat > button {
  padding: 7px 16px; border: 1px solid #2563eb; border-radius: 6px; background: #2563eb;
  color: #fff; font-size: 13px; cursor: pointer;
}
.hang-hang-loat button:hover,
.khung-hang-loat > button:hover { background: #1d4ed8; }
.bang-xem-truoc-hang-loat { overflow-x: auto; margin: 10px 0; max-height: 320px; overflow-y: auto; }
.bang-xem-truoc-hang-loat table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bang-xem-truoc-hang-loat th,
.bang-xem-truoc-hang-loat td {
  border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; vertical-align: top;
}
.bang-xem-truoc-hang-loat th { background: #f3f4f6; position: sticky; top: 0; }
.nhan-trang-thai.hop-le { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.nhan-trang-thai.trung { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.nhan-trang-thai.loi { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ----- Danh sách lô "Huấn luyện hàng loạt" đã gửi ----- */
.khu-lo-hang-loat { flex-shrink: 0; margin-top: 12px; }
/* Khi chưa có lô nào (innerHTML rỗng) -> bỏ margin-top thừa, để khu nhập liệu phía trên nó xuống
   sát thanh menu dưới cùng hơn (Ông Paco duyệt 31/08/2026, lần 6 — màn "Kiến thức sản phẩm"). */
.khu-lo-hang-loat:empty { margin-top: 0; }
.tieu-de-lo-hang-loat { font-size: 14.5px; margin-bottom: 8px; }
.ds-lo-hang-loat { display: flex; flex-direction: column; gap: 8px; }
.the-lo-hang-loat { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; background: #fff; }
.the-lo-hang-loat-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Ô đính kèm ảnh/tài liệu (Huấn luyện AI, Báo cáo/Xin ý kiến) */
.nhan-tep-dinh-kem { font-size: 12.5px; color: #6b7280; display: flex; flex-direction: column; gap: 4px; }
.nhan-tep-dinh-kem input[type="file"] { font-size: 12.5px; }

/* Hàng 2 nút trong form Báo cáo/Xin ý kiến — "Gửi cho Sếp" + "Mời Sếp vào làm giúp"
   (mục 3 — đợt sửa 12, 21/08). */
.hang-nut-bao-cao { display: flex; justify-content: flex-end; gap: 8px; }
.hang-nut-bao-cao button { align-self: auto; }
.hang-nut-bao-cao #nutMoiSep { background: #fff; color: #b45309; border: 1px solid #f59e0b; }
.hang-nut-bao-cao #nutMoiSep:hover { background: #fffbeb; }
.nhan-moi-sep { font-size: 12px; color: #b45309; font-weight: 600; margin: 2px 0 4px; }

/* ----- Màn hình "Lịch sử thao tác" (mục 1.10l Kế hoạch) ----- */
.ds-audit-log { display: flex; flex-direction: column; gap: 6px; }
.dong-audit-log {
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; background: #fff;
  font-size: 13px; color: #374151; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.audit-log-luc { color: #9ca3af; font-size: 12px; }
.audit-log-nguoi { font-weight: 600; }
.audit-log-truoc-sau { color: #6b7280; font-size: 12px; }

/* ----- Đổi mật khẩu (mục 1.10e Kế hoạch) ----- */
.form-doi-mat-khau {
  display: flex; flex-direction: column; gap: 6px; max-width: 360px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;
}
.form-doi-mat-khau label { font-size: 13px; color: #374151; margin-top: 6px; }
.form-doi-mat-khau input {
  padding: 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;
}
.form-doi-mat-khau button {
  margin-top: 14px; padding: 9px 20px; background: #2563eb; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 14px; align-self: flex-start;
}
.form-doi-mat-khau button:hover { background: #1d4ed8; }
.thong-bao-doi-mat-khau { font-size: 13px; margin-top: 8px; min-height: 16px; }
.thong-bao-doi-mat-khau.loi { color: #dc2626; }
.thong-bao-doi-mat-khau.thanh-cong { color: #16a34a; }

/* ----- Báo cáo / Xin ý kiến (mục 1.7, 1.8 Kế hoạch) ----- */
.huy-hieu-bao-cao {
  flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: #dc2626; color: #fff; font-weight: 600;
}
.tra-loi-bao-cao { margin-top: 8px; display: flex; gap: 8px; }
.o-tra-loi-bao-cao {
  flex: 1; padding: 7px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-family: inherit;
}

/* Hộp thông báo báo cáo MỚI — hiện ngay ở chân menu, TRÊN "Cài đặt hệ thống" (mới, 21/08):
   khi có báo cáo mới, hiện luôn nội dung tóm tắt (ai báo cáo gì) thay vì chỉ số đếm, kèm nút
   "Xem thêm" để mở đúng màn hình trao đổi/duyệt ở cột giữa. */
.thong-bao-bao-cao-moi {
  padding: 10px 12px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-thong-bao-bao-cao { display: flex; flex-direction: column; gap: 6px; }
.dong-thong-bao-bao-cao {
  font-size: 12.5px; color: #7f1d1d; line-height: 1.4;
}
.dong-thong-bao-bao-cao strong { color: #991b1b; }
.nut-xem-them-bao-cao {
  align-self: flex-start;
  background: #fff; border: 1px solid #fca5a5; color: #b91c1c;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 500;
}
.nut-xem-them-bao-cao:hover { background: #fee2e2; }

/* ----- Thống kê (mục 1.10o Kế hoạch) ----- */
.luoi-thong-ke { display: flex; gap: 16px; flex-wrap: wrap; }
.the-thong-ke {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 28px; min-width: 140px;
}
.the-thong-ke .so-thong-ke { font-size: 30px; font-weight: 700; color: #2563eb; }
.the-thong-ke span:last-child { font-size: 13px; color: #6b7280; text-align: center; }

/* ----- Trang chủ Tổng quan — Cấp 1/2 (mục 1.2 Kế hoạch, 21/08) ----- */
.tieu-de-nho-trang-chu { margin-top: 24px; margin-bottom: 10px; font-size: 15px; color: #374151; }
.luoi-the-cong-ty { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.the-cong-ty {
  background: linear-gradient(135deg, #0b1f4d 0%, #16326e 55%, #0b1f4d 100%);
  border: 1px solid #22346f; border-radius: 14px; padding: 22px 26px;
  width: 100%; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 4px 14px rgba(11, 31, 77, 0.25); transition: transform 0.15s, box-shadow 0.15s;
}
.the-cong-ty:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 31, 77, 0.35); }
/* Banner quảng cáo kiểu "Ảnh" (Trang chủ Cấp 1 + khung xem trước ở trang Quảng cáo quản lý) —
   dùng CHUNG 1 class để 2 nơi luôn giống hệt kích thước/tỉ lệ (đợt sửa "Banner lên đầu trang +
   màu nền" 31/08/2026). */
.anh-banner-quang-cao {
  width: 100%; border-radius: 14px; display: block; aspect-ratio: 2.5 / 1; object-fit: cover;
  /* Việc "ảnh sát mép khung" (đợt sửa 03/09/2026, lần 6 — Ông Paco: bỏ khoảng đệm quanh ảnh,
     chỉ giữ hiệu ứng nhẹ làm điểm nhấn) — viền mảnh + đổ bóng nhẹ THAY CHO khoảng đệm dày trước
     đó, ảnh vẫn chiếm trọn khung. */
  border: 1px solid #d9a84e; box-shadow: 0 4px 14px rgba(11, 31, 77, 0.25);
}
/* Khung banner (Trang chủ Cấp 1 + khung xem trước ở trang Quảng cáo quản lý) — Việc 1+2 (đợt sửa
   03/09/2026, lần 4+6 — Ông Paco: "viền trống lớn hơn hình nhiều quá" -> "ảnh sát mép khung luôn,
   chỉ cần hiệu ứng nhẹ") — bỏ hẳn khoảng đệm (padding: 0), nền/viền/bóng của khung ".the-cong-ty"
   cũng bỏ luôn (ảnh đã tự có viền+bóng riêng ở trên) để không còn khung kép. */
/* CHỈ áp dụng khi banner là ẢNH (class "banner-la-anh" do JS tự gắn) — banner kiểu CHỮ vẫn giữ
   nguyên khung nền/viền/đệm cũ của ".the-cong-ty" (chữ cần đệm xung quanh mới đẹp, khác ảnh). */
#theBannerQuangCaoTrangChu.banner-la-anh, #xemTruocBanner.banner-la-anh {
  padding: 0; background: none; border: none; box-shadow: none; position: relative;
}
/* Banner nhiều ảnh (tối đa 5), tự đổi ảnh 10 giây/lần — hiệu ứng "lướt nhẹ" (đợt sửa 04/09/2026,
   Ông Paco: "banner riêng từng công ty... thêm hình, 10s đổi 1 lần"). Ảnh đang hiện (.dang-hien)
   nằm đúng vị trí bình thường trong dòng chảy để khung ".khung-anh-banner-xoay" có chiều cao thật
   (theo aspect-ratio của ".anh-banner-quang-cao"); các ảnh còn lại xếp chồng lên trên bằng
   position:absolute, mờ dần + trượt nhẹ sang khi đổi ảnh. Chỉ 1 ảnh -> không cần khung này (JS
   không gắn transition, ảnh hiện bình thường). */
.khung-anh-banner-xoay { position: relative; }
.khung-anh-banner-xoay .anh-banner-xoay {
  position: absolute; inset: 0; opacity: 0; transform: translateX(14px);
  transition: opacity 0.9s ease, transform 0.9s ease; pointer-events: none;
}
.khung-anh-banner-xoay .anh-banner-xoay.dang-hien {
  position: relative; opacity: 1; transform: translateX(0); pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .khung-anh-banner-xoay .anh-banner-xoay { transition: opacity 0.3s ease; transform: none; }
}
/* Hiệu ứng "bụi bay" nhẹ phủ trên banner ẢNH (đợt sửa 04/09/2026) — các hạt nhỏ bay chậm từ dưới
   lên, mờ dần, trung tính (không phụ thuộc nội dung ảnh) nên hợp cả khi sau này banner đổi sang
   ảnh người/sản phẩm khác. Không chặn việc bấm vào banner (pointer-events: none). */
.hieu-ung-bui-bay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.hieu-ung-bui-bay .hat-bui {
  position: absolute; bottom: -10px; left: var(--trai, 50%);
  width: var(--co, 2.5px); height: var(--co, 2.5px); border-radius: 50%;
  /* Sửa 04/09/2026 (Ông Paco báo "chưa thấy"): hạt trắng mờ 1.5-4px gần như biến mất trên nền
     banner sáng màu — thêm viền tối mỏng (box-shadow đen nhạt) NGOÀI quầng sáng cũ để luôn nổi
     bật dù nền ảnh sáng hay tối, và tăng độ đục đỉnh (opacity) lên để dễ thấy hơn. */
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 1.5px rgba(0, 0, 0, 0.45);
  opacity: 0; animation: bui-bay-len var(--thoi-gian, 9s) linear infinite;
  animation-delay: var(--tre, 0s);
}
@keyframes bui-bay-len {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  /* Sửa lỗi thật (04/09/2026, lần 2): đổi "%" (tính theo kích thước hạt bụi, gần như không di
     chuyển) sang "--quang-duong" (px thật theo chiều cao banner, JS đo và gán — trang-chu.js) để
     hạt bụi thật sự bay xuyên hết chiều cao banner, không còn bị cắt mất ngay sát mép dưới. */
  55% { transform: translate(var(--dat-ngang, 12px), calc(var(--quang-duong, 200px) * -0.6)) scale(1); opacity: 0.75; }
  90% { opacity: 0.2; }
  100% { transform: translate(calc(var(--dat-ngang, 12px) * 2), calc(var(--quang-duong, 200px) * -1.15)) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hieu-ung-bui-bay { display: none; }
}
.the-cong-ty-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.the-cong-ty strong {
  font-size: 19px; color: #f5d67c;
  background: linear-gradient(90deg, #f6e3a1, #d9a84e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.den-hoat-dong { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #a7f3d0; white-space: nowrap; }
.cham-led {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 6px #22c55e; animation: nhapNhayDenHoatDong 1.4s ease-in-out infinite;
}
@keyframes nhapNhayDenHoatDong {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.the-cong-ty-so-lieu { display: flex; gap: 16px; flex-wrap: wrap; }
.the-cong-ty-so-lieu span { font-size: 12.5px; color: #cbd5e1; }
.nut-xem-them-cong-ty {
  align-self: flex-start; padding: 7px 16px; border-radius: 6px; border: 1px solid #d9a84e;
  background: transparent; color: #f5d67c; font-size: 12.5px; cursor: pointer;
}
.nut-xem-them-cong-ty:hover { background: rgba(217, 168, 78, 0.15); }

/* ----- Quản lý nhân viên — thẻ card ở màn hình giữa (Task #2) -----
   Đổi từ lưới 2 cột sang xếp 1 thẻ/hàng (đợt đồng bộ layout thẻ "1 hàng", 31/08/2026 lần 3 —
   Ông Paco yêu cầu áp dụng cho TẤT CẢ danh sách thẻ, không riêng công ty/danh mục/phiên làm
   việc) — CHỈ đổi cách xếp (1 cột thay vì lưới), KHÔNG đụng cấu trúc bên trong từng thẻ
   (.the-card-pacoai.the-nhan-vien vẫn giữ nguyên, có 4 nút thao tác nên chưa gộp vào khuôn
   ".the-1-hang" như thẻ công ty/danh mục). */
.luoi-the-nhan-vien { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

/* ----- Trang chủ Cấp 2 — thẻ hạng mục + đường kẻ ngăn cách (Task #4) ----- */
.luoi-the-hang-muc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }

/* ----- Mẫu thẻ card DÙNG CHUNG cho mọi nơi (nền công ty, hạng mục, nền tảng, nhân viên) —
   giống hệt mẫu thẻ "Đối tác đang hoạt động" ở trang chủ Cấp 1 (đợt sửa 3, 21/08).
   Dùng lưới CSS Grid cột đều nhau (thay vì flex-wrap) để MỌI thẻ card cùng 1 hàng luôn
   bằng nhau tuyệt đối cả chiều rộng lẫn chiều cao, không co giãn theo độ dài chữ (đợt sửa 4). ----- */
.the-card-pacoai {
  background: linear-gradient(135deg, #0b1f4d 0%, #16326e 55%, #0b1f4d 100%);
  border: 1px solid #22346f; border-radius: 14px; padding: 18px 22px;
  width: 100%; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 12px;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(11, 31, 77, 0.25); transition: transform 0.15s, box-shadow 0.15s;
}
.the-card-pacoai:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 31, 77, 0.35); }
.the-card-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.the-card-dau strong {
  font-size: 16px; color: #f5d67c;
  background: linear-gradient(90deg, #f6e3a1, #d9a84e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Icon đầu thẻ ".the-card-pacoai" nói chung (vd thẻ nhân viên) — icon KHÔNG tô gradient chữ như
   text cạnh nó (đợt sửa 03/09/2026, lần 7). Thẻ nổi bật lớn (.luoi-2-cot-noi-bat) có kiểu riêng
   to hơn, xếp trên chữ — xem ".luoi-2-cot-noi-bat .the-card-icon" (ghi đè rule này). */
.the-card-icon { -webkit-text-fill-color: initial; margin-right: 8px; display: inline-block; }
.den-trang-thai { display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.den-trang-thai.dang-bat { color: #a7f3d0; }
.den-trang-thai.dang-tat { color: #fca5a5; }
.den-trang-thai .cham-led { animation: nhapNhayDenHoatDong 1.4s ease-in-out infinite; }
.den-trang-thai.dang-bat .cham-led { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.den-trang-thai.dang-tat .cham-led { background: #ef4444; box-shadow: 0 0 6px #ef4444; animation: none; opacity: 0.7; }
.the-card-so-lieu { display: flex; gap: 16px; flex-wrap: wrap; }
.the-card-so-lieu span { font-size: 12.5px; color: #cbd5e1; }

/* Khối "Form đặt hàng nhanh" trong thẻ Sản phẩm (đợt sửa 08/09/2026) — tick hiện/ẩn + % giảm +
   giá xem trước, cùng tông chữ sáng/viền vàng gold như phần còn lại của thẻ (nền navy-gold). */
.the-card-qdh {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin: 4px 0;
  border: 1px dashed rgba(217, 168, 78, 0.4); border-radius: 6px; font-size: 12px; color: #cbd5e1;
}
.dong-qdh-tick { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dong-qdh-tick input[type="checkbox"] { width: 15px; height: 15px; accent-color: #d9a84e; cursor: pointer; }
.dong-qdh-giam { display: flex; align-items: center; gap: 6px; }
.dong-qdh-giam input {
  width: 56px; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(217, 168, 78, 0.5);
  background: rgba(255, 255, 255, 0.06); color: #f5d67c; font-size: 12px;
}
.qdh-gia-xem-truoc { color: #a7f3d0; }
.qdh-gia-xem-truoc strong { color: #6ee7b7; }
/* "Giá trong form" tự gõ sửa thẳng được (đợt sửa 08/09/2026 lần 2) — cùng tông với ô % giảm ở
   trên, chỉ đổi màu chữ sang xanh lá nhạt để phân biệt đây là GIÁ BÁN cuối cùng. */
.dong-qdh-gia-ban { display: flex; align-items: center; gap: 6px; color: #a7f3d0; }
.dong-qdh-gia-ban input {
  width: 90px; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(110, 231, 183, 0.5);
  background: rgba(255, 255, 255, 0.06); color: #6ee7b7; font-size: 12px; font-weight: bold;
}
/* Thẻ "Quản lý nhân viên" (đợt sửa 31/08/2026, lần 5 — Ông Paco: "hàng đang hoạt động thẳng với
   hàng email, hàng nút xem thẳng hàng với hàng nút và dưới giữa trạng thái") — "Đang hoạt động"
   nằm cùng hàng với email (đẩy sang phải), nút "Xem" nằm cùng hàng với 3 nút thao tác (đẩy sang
   phải) -> 2 cột phải xếp thẳng cột với nhau nhờ cùng dùng justify-content: space-between. */
.the-nhan-vien .the-card-so-lieu { justify-content: space-between; align-items: center; }
.the-nhan-vien .the-card-nut { justify-content: space-between; align-items: center; }
.nhom-nut-trai-nhan-vien { display: flex; gap: 8px; flex-wrap: wrap; }
.nhom-nut-phai-nhan-vien { display: flex; gap: 8px; flex-wrap: wrap; }
.nut-vao-xem-nhan-vien {
  padding: 5px 14px; border-radius: 6px; border: 1px solid #d9a84e;
  background: transparent; color: #f5d67c; font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.nut-vao-xem-nhan-vien:hover { background: rgba(217, 168, 78, 0.15); }
.the-card-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.the-card-nut button {
  padding: 7px 14px; border-radius: 6px; border: 1px solid #d9a84e;
  background: transparent; color: #f5d67c; font-size: 12.5px; cursor: pointer;
  /* Việc 4 (30/08): ở cột hẹp (khung View, điện thoại) chữ nút hay bị BỌC XUỐNG DÒNG bên
     trong khiến nút trông như lệch/tràn khỏi thẻ — ép chữ nằm 1 dòng và không cho co hẹp lại. */
  white-space: nowrap; flex-shrink: 0;
}
.the-card-nut button:hover { background: rgba(217, 168, 78, 0.15); }

/* Form "Sửa" (họ tên + email) hiện NGAY TRONG thẻ card nền tối (Quản lý tài khoản, Cấp 1) —
   khác .form-doi-mat-khau (nền trắng, dùng ở màn hình riêng), ở đây cần chữ sáng cho hợp nền. */
.form-sua-tai-khoan { display: flex; flex-direction: column; gap: 6px; }
.form-sua-tai-khoan label { font-size: 12px; color: #cbd5e1; margin-top: 4px; }
.form-sua-tai-khoan input { padding: 7px 9px; border: 1px solid #d9a84e; border-radius: 6px; font-size: 16px; }
.form-sua-tai-khoan .the-card-nut { margin-top: 4px; }
.form-sua-tai-khoan .thong-bao-doi-mat-khau { color: #fca5a5; }
.the-card-nut button:disabled { opacity: 0.5; cursor: not-allowed; }
.the-card-nut button:disabled:hover { background: transparent; }
.the-card-nut button.nguy-hiem { border-color: #ef4444; color: #fca5a5; }
.the-card-nut button.nguy-hiem:hover { background: rgba(239, 68, 68, 0.15); }

/* ----- "Danh sách sản phẩm" (Quản lý sản phẩm & Đơn hàng, 30/08) — thẻ Sản phẩm dùng chung
   mẫu ".the-card-pacoai", thêm ảnh thu nhỏ + mô tả rút gọn. ----- */
.anh-san-pham { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.mo-ta-san-pham {
  margin: 0; font-size: 12.5px; color: #cbd5e1; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mo-ta-san-pham em { color: #94a3b8; }

/* ----- Thư viện ảnh phụ của sản phẩm (đợt sửa 04/09/2026: nhiều ảnh) — đổi 05/09/2026 (Ông Paco
   báo dải ảnh 2 hàng + nút riêng dưới mỗi tấm đẩy thẻ cao xấu) sang dạng XOÈ CHỒNG LÊN NHAU 1
   hàng duy nhất (giữ chiều cao thẻ gần như không đổi dù có nhiều ảnh). Ảnh đang là ảnh bìa chính
   viền vàng gold để phân biệt, không còn huy hiệu ⭐ nổi góc. Nút ⭐ (đặt làm chính)/✕ (xoá) ẩn
   mặc định, chỉ hiện khi rê chuột vào đúng tấm ảnh đó, tránh rối mắt. ----- */
/* SỬA LỖI 05/09/2026 (Ông Paco báo "ảnh đầy tràn lề, chạy tùm lum hết cả") — dải ảnh nhiều tấm
   (7-8 ảnh) rộng hơn bề ngang thẻ, tràn lố ra khỏi thẻ, đè sang thẻ bên cạnh. Ông Paco chốt lại:
   "không cần hiển thị hết, xếp gọn cho đẹp và cân đối, khoá khung bằng nhau, không tràn" — nên
   phía JS (san-pham.js, SO_ANH_HIEN_TOI_DA) đã KHOÁ CỨNG tối đa 5 ảnh hiện ra (ảnh dư ẩn hẳn,
   không cần xem hết) -> bề rộng dải ảnh giờ luôn CỐ ĐỊNH 1 mức, không còn tràn nữa nên bỏ hẳn
   kiểu cuộn ngang, dùng overflow:hidden gọn gàng. Ảnh cũng thu nhỏ lại (52px -> 44px, sát nhau
   hơn) cho cân đối, đỡ chiếm chỗ. Thêm padding-top để ảnh nổi lên lúc hover/chạm (translateY)
   không bị cắt mất phần trên bởi overflow-y:hidden. */
.thu-vien-anh-san-pham {
  display: flex; align-items: flex-end; padding: 12px 10px 2px 2px;
  overflow: hidden;
}
.anh-thu-vien-san-pham {
  position: relative; flex-shrink: 0; width: 44px; height: 44px;
  transition: transform 0.15s ease, z-index 0s;
}
.anh-thu-vien-san-pham:not(:first-child) { margin-left: -18px; }
.anh-thu-vien-san-pham img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block;
  border: 2px solid #16326e; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.anh-thu-vien-san-pham.chinh { z-index: 3; }
.anh-thu-vien-san-pham.chinh img { border-color: #d9a84e; box-shadow: 0 3px 10px rgba(217, 168, 78, 0.45); }
.anh-thu-vien-san-pham:hover { transform: translateY(-8px) scale(1.12); z-index: 6; }
.thu-vien-anh-hanh-dong {
  position: absolute; top: -8px; right: -6px; display: flex; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.anh-thu-vien-san-pham:hover .thu-vien-anh-hanh-dong,
.anh-thu-vien-san-pham.mo-rong .thu-vien-anh-hanh-dong { opacity: 1; pointer-events: auto; }
.anh-thu-vien-san-pham.mo-rong { transform: translateY(-8px) scale(1.12); z-index: 6; }
.thu-vien-anh-hanh-dong button {
  width: 18px; height: 18px; font-size: 10px; line-height: 1; padding: 0;
  border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; cursor: pointer;
}

/* ----- Trang chủ Cấp 3 — thẻ phiên làm việc (khách), LỚN HƠN thẻ thường, có nút "Tham gia"
   ở góc dưới bên phải để mọi cấp vào can thiệp (mục 1.5/1.8/1.10r Kế hoạch, đợt sửa 5, 21/08) ----- */
.luoi-phien-lam-viec { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 14px; }
.the-phien-lam-viec-lon { padding: 24px 26px; gap: 14px; min-height: 150px; }
.the-phien-lam-viec-lon .the-card-dau strong { font-size: 18px; }
.tin-nhan-moi-nhat-phien { margin: 0; font-size: 13px; color: #cbd5e1; font-style: italic; }
.the-phien-lam-viec-lon .the-card-nut { justify-content: flex-end; }

/* ----- Khung View bên phải — xem trước các phiên làm việc trực tuyến, dùng chung cả 3 trang
   Cấp 1/2/3 (mục 3, đợt sửa 14, 21/08). Cột hẹp hơn ".luoi-phien-lam-viec" (150px thay vì
   300px) để vừa bề rộng khung (220–640px, xem thietLapKhungView) — mở khung càng to thì auto-fill
   càng nhiều cột/thẻ hiện ra, không cần tính toán bằng JS. ----- */
.tieu-de-khung-view { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #64748b; }
.luoi-khung-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Khoá chiều cao thẻ bằng nhau tuyệt đối (Ông Paco báo 05/09/2026: tin nhắn dài đẩy thẻ cao lên
   xấu) — chiều cao cố định + rút gọn tin nhắn tối đa 2 dòng bằng "...", không co giãn nữa. */
.luoi-khung-view .the-card-pacoai { padding: 14px 16px; gap: 8px; height: 128px; overflow: hidden; }
.luoi-khung-view .the-card-dau strong { font-size: 13px; }
.luoi-khung-view .tin-nhan-moi-nhat-phien {
  font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.luoi-khung-view .the-card-nut button { padding: 5px 10px; font-size: 11px; }

/* ----- Nút mở form "+ Thêm nhân viên" — ẩn form theo mặc định, chỉ hiện khi bấm (đợt sửa 3, 21/08) ----- */
.nut-mo-form-them-nhan-vien {
  align-self: flex-start; padding: 8px 18px; border-radius: 6px; border: 1px dashed #9ca3af;
  background: #fff; color: #374151; font-size: 13px; cursor: pointer;
}
.nut-mo-form-them-nhan-vien:hover { background: #f3f4f6; }

.duong-ke-trang-chu {
  margin: 26px 0; border: none; height: 1px;
  background: linear-gradient(90deg, transparent, #d9a84e, transparent);
}
.luoi-the-hang-muc-nhom2 { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #e5e7eb; }

/* ===== Thẻ 1 hàng (đợt sửa "layout thẻ mới", chốt 31/08/2026) ===== */
.luoi-1-hang{display:flex;flex-direction:column;gap:8px;}
.the-1-hang{
  display:flex;align-items:stretch;border:1px solid var(--border,#e2ddd0);border-radius:10px;
  background:var(--bg,#fff);min-height:52px;overflow:hidden;cursor:pointer;
}
.the-1-hang-ten{
  flex:1 1 68%;min-width:0;display:flex;align-items:center;padding:0 12px;
  font-size:13px;font-weight:700;color:var(--navy-900,#0a1a3d);
}
.the-1-hang-gach{width:2px;flex:0 0 2px;align-self:stretch;background:#a8a08a;margin:10px 0;}
.the-1-hang-phai{
  flex:0 0 32%;min-width:88px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:6px 6px;
}
.the-1-hang-trang-thai{
  display:inline-flex;align-items:center;gap:3px;font-size:10px;white-space:normal;
  text-align:center;line-height:1.25;justify-content:center;color:var(--ok,#1f8a52);
}
.the-1-hang-trang-thai.tat{color:var(--ink-faint,#a29c8a);}
.the-1-hang-cham{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--ok,#1f8a52);}
.the-1-hang-cham.tat{background:var(--ink-faint,#a29c8a);}
.the-1-hang-nut{padding:3px 0;width:100%;border:none;background:none;color:var(--navy-700,#1c3d7a);font-size:10px;font-weight:700;cursor:pointer;}

/* Biến thể "đơn" — KHÔNG có cột phải (không trạng thái, không nút), tên chiếm trọn hàng (đợt
   sửa đồng bộ "Bot AI"/"Huấn luyện AI" sub-mục, 31/08/2026 lần 3) */
.the-1-hang.don .the-1-hang-ten{flex:1 1 100%;}

/* Biến thể "kép" — 2 nút Bật/Tắt riêng cạnh nhau (VD Facebook: Tin nhắn/Bình luận, đợt sửa
   04/09/2026) — thu hẹp cột tên lại để đủ chỗ 2 nhóm nút nhỏ bên phải, không tràn hàng. */
.the-1-hang.kep .the-1-hang-ten{flex:1 1 38%;}
.the-1-hang.kep .the-1-hang-phai{flex:1 1 62%;flex-direction:row;min-width:0;padding:6px 8px;gap:8px;}
.nhom-nut-bat-tat-nho{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;}
.nhan-nut-bat-tat-nho{font-size:9.5px;color:var(--ink-faint,#a29c8a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.nhom-nut-bat-tat-nho .nut-bat-tat{padding:2px 8px;font-size:10px;}

/* Biến thể "gọn" — chỉ có nút, KHÔNG có trạng thái (dùng cho danh sách hạng mục Cấp 2) */
.the-1-hang.gon{min-height:64px;}
/* Việc 2+4 (đợt sửa 03/09/2026, phản hồi bản điện thoại — Ông Paco: "tiêu đề thẻ danh mục còn
   nhỏ nên còn nhiều diện tích", "icon danh mục lớn lên, chữ vừa hoặc thêm 1 size") — icon tách
   riêng lớn hơn (xem .the-1-hang-icon), chữ tiêu đề tăng 1 nấc (13px -> 15px). */
.the-1-hang.gon .the-1-hang-ten{flex:1 1 80%;padding:0 10px;font-size:15px;align-items:center;}
/* Việc 1 (đợt sửa 03/09/2026, lần 3 — Ông Paco: "icon các thẻ thẳng nhau, có kẻ mờ phân tách
   icon/chữ, chữ tiêu đề thẳng hàng căn trái") — cột icon rộng CỐ ĐỊNH (không co giãn theo icon
   to/nhỏ khác nhau) + viền mờ bên phải làm đường kẻ phân tách -> chữ tiêu đề luôn bắt đầu ĐÚNG 1
   vị trí ở mọi hàng, thẳng cột với nhau. Áp dụng chung cho MỌI nơi dùng ".the-1-hang-icon" (cả
   danh mục Trang chủ lẫn thẻ con bên trong 1 hạng mục — xem .the-hang-muc ở menu.js, Việc 2). */
.the-1-hang-icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 26px;width:26px;font-size:19px;line-height:1;
  margin-right:10px;padding-right:10px;border-right:1px solid var(--border,#e2ddd0);
}
.the-1-hang.gon .the-1-hang-phai{flex:0 0 20%;min-width:64px;padding:6px 4px;justify-content:center;}
.the-1-hang.gon .the-1-hang-nut{font-size:9.5px;}

/* Biến thể "phiên làm việc" (Cấp 3) — cao hơn, có thêm dòng tin nhắn mới nhất */
.the-1-hang.phien{min-height:74px;}

/* Thẻ công ty ở Trang chủ Cấp 1 (mục 4, đợt bàn "menu Cấp 1", 31/08/2026) — cao hơn thẻ thường
   + icon bánh răng đầu thẻ (chỉ trang trí, không có hành động riêng). */
.the-1-hang-cong-ty{min-height:66px;}
.the-1-hang-cong-ty .the-1-hang-ten{gap:8px;}
.icon-banh-rang-the-cong-ty{flex:0 0 auto;color:var(--navy-700,#1c3d7a);}

/* Dải thẻ nổi bật ngay dưới banner Trang chủ Cấp 2 ("Quản lý doanh nghiệp"/"Xem hoạt động") và
   Cấp 3 ("Bot AI"/"Quản lý sản phẩm"/"Quản lý đơn hàng"/"Thống kê") (đợt sửa 31/08/2026) — LUÔN
   2 cột, cả điện thoại lẫn máy tính. Dùng ĐÚNG kiểu thẻ ".the-card-pacoai" chuẩn (giống thẻ
   "Phiên làm việc trực tuyến"/"Quản lý đơn hàng", không thu gọn/căn giữa riêng nữa — Ông Paco
   chốt mục 3, 31/08/2026) — không có nút/kẻ dọc, bấm cả thẻ là vào thẳng. */
.luoi-2-cot-noi-bat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
/* Việc 2+3 (đợt sửa 03/09/2026 — Ông Paco: 2 thẻ nổi bật Cấp 2 + 4 thẻ nổi bật Cấp 3 làm LỚN HƠN,
   giống cỡ thẻ "Phiên làm việc trực tuyến" — xem .the-phien-lam-viec-lon) — đặc tả riêng cho
   thẻ bên trong ".luoi-2-cot-noi-bat" (2 lớp class, thắng cả rule ".the-card-pacoai" gọn hơn ở
   khối @media (max-width:768px) phía dưới nên áp dụng ĐÚNG cả máy tính lẫn điện thoại). */
.luoi-2-cot-noi-bat .the-card-pacoai { padding: 24px 22px; min-height: 92px; }
/* Phản hồi bản điện thoại (đợt sửa 03/09/2026, lần 2) — Ông Paco: "chữ ở thẻ card chính nhỏ
   xuống, icon lớn lên" -> tách icon riêng (xem .the-card-icon), chữ giảm còn 14px, icon+chữ
   canh giữa cho gọn thẻ (trước đây canh trái do "justify-content: space-between" chỉ có 1 phần
   tử -> nhìn lệch, đúng như Ông Paco phản ánh "không căn lề"). */
.luoi-2-cot-noi-bat .the-card-dau { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
/* Sửa lỗi 03/09/2026, lần 3 (Ông Paco — bản máy tính: "quản lý doanh nghiệp bị màu vàng làm
   mờ") — thẻ nổi bật nền navy dùng chữ TÔ GRADIENT (.the-card-dau strong mặc định,
   -webkit-background-clip:text) vốn hợp với thẻ nhỏ, nhưng ở thẻ LỚN này lại bị mờ/khó đọc ->
   đổi sang màu vàng ĐẶC (không tô gradient nữa) cho rõ chữ, khác thẻ nền trắng Cấp 3 (đã có màu
   đặc riêng, xem .the-card-noi-bat-trang .the-card-dau strong bên dưới). */
.luoi-2-cot-noi-bat .the-card-dau strong {
  font-size: 14px; color: #f5d67c;
  background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #f5d67c;
}
.luoi-2-cot-noi-bat .the-card-icon { display: block; font-size: 28px; line-height: 1; margin-bottom: 8px; }
/* Cấp 3 — nền TRẮNG thay vì navy (Ông Paco chốt mục 3: "cấp 2 đúng màu nền như trực tuyến, cấp 3
   nền trắng"), tái dùng đúng cặp màu ".the-cong-ty"/".the-card-pacoai" bản điện thoại (biến CSS
   --bg/--border/--navy-800) nhưng áp dụng cho MỌI cỡ màn hình ở đây. */
/* Việc 2 (đợt sửa 03/09/2026, lần 7 — Ông Paco: "nền trắng thì phải có viền mỏng tạo điểm
   nhấn") — đổi viền xám mờ (--border) sang viền VÀNG (đúng màu nhấn hiện có của hệ thống) cho
   rõ ràng, khác biệt hẳn với nền trắng xung quanh, không mờ nhạt như trước. */
.the-card-noi-bat-trang{
  background:var(--bg);border:1.5px solid #d9a84e;box-shadow:0 2px 10px rgba(217,168,78,0.18);
}
.the-card-noi-bat-trang:hover{box-shadow:0 4px 16px rgba(217,168,78,0.3);}
.the-card-noi-bat-trang .the-card-dau strong{color:var(--navy-800);-webkit-text-fill-color:var(--navy-800);}
.the-1-hang.phien .the-1-hang-ten{flex:1 1 62%;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 12px;}
.the-1-hang.phien .the-1-hang-phai{flex:0 0 38%;min-width:100px;}
.the-1-hang-ten-chinh{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.the-1-hang-tin-nhan{
  display:block;width:100%;font-size:10.5px;font-weight:400;color:var(--ink-muted,#6f6a5c);margin-top:2px;
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;
}

/* ===== Biểu đồ cột "Thống kê" (đợt sửa 31/08/2026 — Ông Paco chốt: gộp "Hiệu quả theo nền
   tảng" + "Phiên chat AI theo thời gian" thành 2 biểu đồ, máy tính 1 hàng 2 cột, điện thoại 2
   hàng — xem @media (max-width:768px) bên dưới) ===== */
.luoi-thong-ke-bieu-do { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.khung-bieu-do-thong-ke {
  border: 1px solid var(--border, #e2ddd0); border-radius: 10px; background: var(--bg, #fff);
  padding: 14px 16px 18px;
}
.tieu-de-bieu-do-thong-ke { margin: 0 0 4px; font-size: 14.5px; color: var(--navy-900, #0a1a3d); }
.khung-chua-co-so-lieu {
  display: flex; align-items: center; justify-content: center; min-height: 160px;
  color: var(--ink-faint, #a29c8a); font-size: 12.5px; font-style: italic; text-align: center;
  border: 1px dashed var(--border, #e2ddd0); border-radius: 8px; padding: 12px;
}
.nhan-bieu-do-minh-hoa {
  margin: 0 0 6px; font-size: 11px; font-style: italic; color: var(--ink-faint, #a29c8a); text-align: right;
}
.bieu-do-cot { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 190px; padding-top: 6px; }
.cot-bieu-do { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.nhan-phan-tram-cot { font-size: 12px; font-weight: 700; color: var(--navy-900, #0a1a3d); margin-bottom: 4px; }
.than-cot-bieu-do { width: 70%; max-width: 46px; border-radius: 6px 6px 0 0; transition: height .3s ease; }
.nhan-ten-cot { font-size: 11px; font-weight: 600; color: var(--ink, #2a2620); margin-top: 6px; text-align: center; }
.nhan-so-luong-cot { font-size: 10px; color: var(--ink-muted, #6f6a5c); }

/* Đợt sửa 31/08/2026 lần 3 — mỗi cột đổi thành 1 NHÓM 2 CỘT trái ngược (2 màu) + chú thích. */
.nhom-cot-bieu-do { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cap-cot-bieu-do { display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%; justify-content: center; }
.cap-cot-bieu-do .cot-bieu-do { flex: 0 1 auto; width: 50%; }
.cap-cot-bieu-do .than-cot-bieu-do { width: 100%; max-width: 26px; }
.chu-thich-bieu-do { display: flex; gap: 14px; margin-bottom: 8px; }
.muc-chu-thich { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-muted, #6f6a5c); }
.muc-chu-thich i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Bộ lọc Nền tảng + Thời gian phía trên 2 biểu đồ (Ông Paco: "sao tự ý bỏ mục chọn"). */
.hang-loc-thong-ke { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 4px; }
.hang-loc-thong-ke label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-muted, #6f6a5c); }
.hang-loc-thong-ke select {
  font-size: 13px; padding: 6px 8px; border: 1px solid var(--border, #e2ddd0); border-radius: 6px;
  background: var(--bg, #fff); color: var(--ink, #2a2620);
}

/* Máy tính (rộng hơn điện thoại, > 768px) — xếp thẻ "1 hàng" thành 2 CỘT cho cân đối, đỡ
   trống trải, thay vì kéo dài 1 cột hết chiều ngang màn hình (Ông Paco chốt 31/08/2026, đợt
   sửa giao diện máy tính). Áp dụng cho MỌI danh sách dùng ".luoi-1-hang" — Trang chủ (Cấp
   1/2/3), các màn "hạng mục" (Bot AI/Sáng tạo nội dung/Quản lý doanh nghiệp/Huấn luyện
   AI/Thống kê), và danh sách phiên chat trong màn hình Bot. Điện thoại (≤768px) GIỮ NGUYÊN 1
   cột như cũ — không đụng tới khối @media (max-width:768px) phía dưới. */
@media (min-width: 769px) {
  .luoi-1-hang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
}

/* ----- Nút Home ở menu trái (đợt sửa 2, 21/08) ----- */
/* Tách hàng Trang chủ thành 2 nút cạnh nhau: trái = Trang chủ, phải = Quản lý (Cấp 1 -> Cấp 2,
   Cấp 2 -> Cấp 3) — mỗi nút chiếm đều 1 nửa hàng; Cấp 3 không có nút Quản lý nên chỉ 1 nút vẫn
   tự chiếm trọn hàng bình thường (đợt sửa 7, 21/08). */
.hang-home-menu { padding: 10px 8px 0; display: flex; gap: 6px; }
.nut-home-menu, .hang-home-menu .nut-vao-nhu-cap2 {
  flex: 1; width: auto; min-width: 0; padding: 9px 4px; border-radius: 8px; border: 1px solid #d9a84e;
  background: linear-gradient(135deg, #0b1f4d, #16326e); color: #f5d67c;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nut-home-menu:hover, .hang-home-menu .nut-vao-nhu-cap2:hover { opacity: 0.9; }

/* ----- Đường kẻ ngăn cách nhóm hạng mục trong menu cây (đợt sửa 2, 21/08) ----- */
.duong-ke-menu { margin: 10px 14px; border: none; height: 1px; background: #e5e7eb; }
.hang-loi-tat-trang-chu { display: flex; gap: 10px; flex-wrap: wrap; }
.nut-loi-tat-trang-chu {
  padding: 10px 18px; border: 1px solid #ccc; border-radius: 6px; background: #fff;
  cursor: pointer; font-size: 13.5px;
}
.nut-loi-tat-trang-chu:hover { background: #f3f4f6; }
.logo-pacoai { cursor: pointer; }

/* ----- "Quên mật khẩu" trên trang đăng nhập (mục 1.10p Kế hoạch) ----- */
.form-quen-mat-khau { display: flex; flex-direction: column; gap: 2px; }

/* ----- Cài đặt API / Cài đặt kết nối Bot (mục 1.10e, 1.10f, 1.10h Kế hoạch) ----- */
.tieu-de-co-nut-cai-dat { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nut-cai-dat-ket-noi {
  flex-shrink: 0; padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #374151; font-size: 12.5px; cursor: pointer;
}
.nut-cai-dat-ket-noi:hover { background: #f3f4f6; }

.tieu-de-phu-cai-dat { font-size: 14.5px; margin: 18px 0 8px; }

.bang-cai-dat-api { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.bang-cai-dat-api th, .bang-cai-dat-api td {
  border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; background: #fff;
}
.bang-cai-dat-api th { background: #f3f4f6; }
.bang-cai-dat-api .nut-doi-api,
.bang-cai-dat-api .chon-api-cong-viec {
  font-size: 12.5px; padding: 4px 10px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer;
}

.ds-the-api { display: flex; flex-direction: column; gap: 10px; }
.the-cai-dat-api { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; background: #fff; }
.the-cai-dat-api-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.the-cai-dat-api .nut-nhap-key-api {
  margin-top: 6px; padding: 6px 14px; border-radius: 6px; border: 1px solid #2563eb;
  background: #fff; color: #2563eb; font-size: 12.5px; cursor: pointer;
}
.the-cai-dat-api .nut-nhap-key-api:hover { background: #eff6ff; }
.form-nhap-key-api { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-nhap-key-api .o-nhap-key-api { flex: 1; min-width: 220px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
.form-nhap-key-api .nut-kiem-tra-key-api {
  padding: 8px 16px; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer;
}
.form-nhap-key-api .nut-kiem-tra-key-api:hover { background: #1d4ed8; }
.form-nhap-key-api .ket-qua-kiem-tra-bao-mat { flex-basis: 100%; }

.ds-dung-rieng-api { display: flex; flex-direction: column; gap: 6px; }
.dong-dung-rieng-api {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; background: #fff; font-size: 13.5px;
}
.nut-toggle-dung-rieng { font-size: 12px; padding: 4px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.nut-toggle-dung-rieng:hover { background: #f3f4f6; }

.khung-cai-dat-ket-noi { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; background: #fff; max-width: 480px; }

/* Khối панel đứng riêng, XẾP CHỒNG NHIỀU CÁI trong 1 màn hình (khác .khung-hoc-ai — chỉ dành cho
   ĐÚNG 1 khối chiếm hết chiều cao .khu-vuc-giua) — dùng cho "Tài khoản & bảo mật" (đợt 22/08),
   nơi 1 màn hình có nhiều mục nhỏ xếp dọc (Đổi mật khẩu / Quên mật khẩu / Đổi email / Danh sách...). */
.khung-panel-nho {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; background: #fff;
  margin-bottom: 16px; max-width: 640px;
}
.khung-panel-nho h3 { margin: 0 0 10px; font-size: 15px; }
.khung-panel-nho h4 { margin: 14px 0 8px; font-size: 13.5px; }
.khung-panel-nho label { display: block; margin: 8px 0 4px; font-size: 13px; color: #4b5563; }
.khung-panel-nho select { width: 100%; padding: 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; }
.form-cai-dat-ket-noi { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.form-cai-dat-ket-noi label { font-size: 13px; color: #374151; margin-top: 6px; }
.form-cai-dat-ket-noi input {
  padding: 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: inherit;
}
.form-cai-dat-ket-noi button {
  align-self: flex-start; margin-top: 10px; padding: 8px 18px; background: #2563eb; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.form-cai-dat-ket-noi button:hover { background: #1d4ed8; }
.nut-quay-lai-bot {
  margin-top: 14px; padding: 7px 16px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #374151; font-size: 13px; cursor: pointer;
}
.nut-quay-lai-bot:hover { background: #f3f4f6; }

/* ----- Nút "‹ Quay lại" dùng chung cho các trang riêng full-màn-hình MỚI (đợt sửa giao diện,
   31/08/2026 — hienThiCaiDatHeThongTrangRieng ở cai-dat-trang-rieng.js) ----- */
.dau-trang-rieng { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nut-quay-lai-trang {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong, #cbd5e1); background: #fff; color: var(--navy-800, #16326e);
  font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nut-quay-lai-trang:hover { background: var(--surface-2, #f3f4f6); }
.dau-trang-rieng h2 { margin: 0; }

/* ----- Nút "‹ Quay lại" CHUNG cho mọi màn hình con mở qua menu (đợt sửa 31/08/2026, mục 4 —
   xem dieu-huong.js) — tự chèn vào CUỐI #khu-vuc-giua (đợt sửa lần 2 — Ông Paco: "để ở cuối bên
   góc trái"), khác nút tròn ".nut-quay-lai-trang" ở trên (chỉ dùng cho "trang riêng"). Chỉ rộng
   vừa chữ (không chiếm hết bề ngang), căn trái, ẩn khi không có gì để lùi. ----- */
.nut-quay-lai-chung {
  /* #khu-vuc-giua là flex column (align-items mặc định "stretch") -> MỌI phần tử con đều bị kéo
     giãn hết bề ngang bất kể "display" của chính nó là gì (inline-block cũng bị "blockify" theo
     đúng đặc tả CSS flex item) — phải tự đặt "align-self: flex-start" để thoát kéo giãn đó, nút
     mới co gọn theo đúng chữ và nằm bên trái. */
  align-self: flex-start;
  margin: 18px 0 4px; padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--border-strong, #cbd5e1); background: #fff; color: var(--navy-800, #16326e);
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.nut-quay-lai-chung:hover { background: var(--surface-2, #f3f4f6); }
.nut-quay-lai-chung .mui-ten-quay-lai-chung { font-size: 15px; line-height: 1; }
.nut-quay-lai-chung .tieu-de-quay-lai-chung:empty::before { content: 'Quay lại'; }

/* Danh sách mục con trong trang "Cài đặt hệ thống" riêng — mỗi hàng là 1 mục, bấm để mở đúng
   màn hình tương ứng (dùng lại các hàm hienThiXxx sẵn có qua click() vào mục cũ trong khay). */
/* Bộ lọc "Tất cả / Chưa xem" ở màn Thông báo (mục thống nhất 04/09/2026, học giao diện Tiki). */
.bo-loc-thong-bao { display: flex; gap: 8px; margin-bottom: 12px; }
.chip-loc-thong-bao {
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-strong, #cbd5e1);
  background: #fff; color: var(--ink-muted, #6f6a5c); font-size: 13.5px; cursor: pointer;
}
.chip-loc-thong-bao.dang-chon {
  border-color: var(--navy-700, #1c3d7a); background: var(--navy-700, #1c3d7a); color: #fff; font-weight: 600;
}
.ds-dong-cai-dat-rieng { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; }
.dong-cai-dat-rieng {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; font-size: 14.5px; color: var(--ink, #1f2937); cursor: pointer;
  border-bottom: 1px solid var(--border, #f0f0f0);
}
.dong-cai-dat-rieng:last-child { border-bottom: none; }
.dong-cai-dat-rieng:hover { background: var(--surface-2, #f6f5f2); }
.dong-cai-dat-rieng .mui-ten-cai-dat-rieng { color: var(--ink-faint, #9ca3af); flex-shrink: 0; }
/* Thông báo ĐÃ XEM (đợt sửa 03/09/2026, lần 2 — Ông Paco: "cơ chế tự động mờ khi đã xem thông
   báo") — vẫn hiện dòng, chỉ làm mờ đi để phân biệt với thông báo còn mới. */
.dong-cai-dat-rieng.da-xem { opacity: 0.5; }
/* Dòng "Thông báo đẩy" (đợt sửa 31/08/2026, lần 7) — không điều hướng đi đâu khi bấm trúng cả
   hàng, chỉ nút Bật/Tắt bên phải mới có tác dụng -> bỏ con trỏ tay + màu hover đổi trang. */
.dong-thong-bao-day-rieng { cursor: default; }
.dong-thong-bao-day-rieng:hover { background: transparent; }

/* ----- Danh sách màn "Thông báo" (đợt sửa 05/09/2026 — Ông Paco: "gọn lại từng dòng, chỉ 1
   hàng nhỏ, đầu dòng chữ đậm ghi rõ loại thông báo, nền đã đọc/chưa đọc phải khác để dễ phân
   biệt"). Dùng RIÊNG ".ds-thong-bao"/".dong-thong-bao" (không dùng chung
   ".ds-dong-cai-dat-rieng"/".dong-cai-dat-rieng" ở trên — class đó còn dùng cho các hàng mục
   trong "Cài đặt hệ thống riêng", sửa chung sẽ ảnh hưởng nhầm màn đó). ----- */
.ds-thong-bao { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Thanh nút "Đã đọc tất cả" / "Đã đọc" (đợt sửa 11/09/2026) — chia đều chiều ngang, không
   xuống dòng kể cả khổ điện thoại. */
.thanh-hanh-dong-thong-bao { display: flex; gap: 8px; margin-bottom: 12px; }
.nut-hanh-dong-thong-bao {
  flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--border-strong, #cbd5e1);
  background: #fff; color: var(--navy-700, #1c3d7a); font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.nut-hanh-dong-thong-bao:hover:not(:disabled) { background: var(--surface-2, #f6f5f2); }
.nut-hanh-dong-thong-bao:disabled { opacity: 0.45; cursor: default; }
.dong-thong-bao .chk-dong-thong-bao { flex-shrink: 0; margin: 0; width: 16px; height: 16px; cursor: pointer; }
.dong-thong-bao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px; font-size: 13px; color: var(--ink, #1f2937); cursor: pointer;
  border-bottom: 1px solid var(--border, #f0f0f0);
  /* CHƯA XEM: nền đậm hơn hẳn (tint navy nhạt) để nổi bật, giống cách Gmail/Messenger phân biệt
     tin chưa đọc. */
  background: #e8edf7;
}
.dong-thong-bao:last-child { border-bottom: none; }
.dong-thong-bao:hover { background: #dde5f3; }
.dong-thong-bao .noi-dung-dong-thong-bao {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dong-thong-bao .nhan-loai-thong-bao { color: var(--navy-800, #0a1a3d); }
/* ĐÃ XEM (giữ cơ chế đánh dấu sẵn có, xem thong-bao.js) — nền về trắng + chữ nhạt hơn, KHÔNG
   còn làm mờ cả dòng bằng opacity như trước (mờ opacity làm khó đọc nhãn đậm đầu dòng). */
.dong-thong-bao.da-xem { background: #fff; color: var(--ink-muted, #6f6a5c); }
.dong-thong-bao.da-xem:hover { background: var(--surface-2, #f6f5f2); }
.dong-thong-bao.da-xem .nhan-loai-thong-bao { color: var(--ink-muted, #6f6a5c); }

/* Hàng "Quay lại cấp gốc"/"Đăng xuất" ghim CỐ ĐỊNH ở cuối trang "Cài đặt hệ thống" riêng (đợt
   sửa 31/08/2026, lần 4 — Ông Paco báo danh sách mục cài đặt càng ngày càng dài (thêm Quảng
   cáo, Tiêu đề hiển thị...) đẩy "Đăng xuất" khuất phía dưới, phải cuộn mới thấy). Tách thành 1
   khối RIÊNG, dán cố định (sticky) ở đáy vùng cuộn .khu-vuc-giua — không phụ thuộc danh sách
   mục cài đặt bên trên dài ngắn bao nhiêu, luôn nhìn thấy ngay không cần cuộn. */
.chan-cai-dat-rieng {
  position: sticky; bottom: 0; margin-top: 14px;
  box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, 0.12);
}

.ket-qua-kiem-tra-bao-mat { font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.ket-qua-kiem-tra-bao-mat.thanh-cong { color: #16a34a; }
.ket-qua-kiem-tra-bao-mat.loi { color: #dc2626; }

/* ----- Trang riêng "Quảng cáo" (Cấp 1, đợt sửa "Trang quản lý Quảng cáo" 31/08/2026) —
   quang-cao-quan-ly.js. Danh sách dòng chữ chạy đầu trang + khung xem trước header. ----- */
.ds-dong-quang-cao-dau-trang { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dong-quang-cao-dau-trang { display: flex; gap: 8px; align-items: center; }
.dong-quang-cao-dau-trang input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 13.5px;
}
.chu-dong-quang-cao-dau-trang {
  flex: 1; padding: 8px 10px; font-size: 13.5px; color: var(--text, #111827);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nut-sua-dong-quang-cao {
  flex-shrink: 0; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border-strong, #cbd5e1);
  background: #fff; color: #374151; font-size: 12.5px; cursor: pointer;
}
.nut-sua-dong-quang-cao:hover { background: var(--surface-2, #f3f4f6); }
.nut-luu-dong-quang-cao {
  flex-shrink: 0; padding: 6px 16px; border: none; border-radius: 6px;
  background: #2563eb; color: #fff; font-size: 12.5px; cursor: pointer;
}
.nut-luu-dong-quang-cao:hover { background: #1d4ed8; }
.nut-xoa-dong-quang-cao {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 6px; border: 1px solid #fca5a5;
  background: #fff; color: #b91c1c; cursor: pointer; font-size: 13px;
}
.nut-xoa-dong-quang-cao:hover { background: #fee2e2; }
.nut-them-dong-quang-cao {
  margin-top: 10px; padding: 7px 16px; border: 1px dashed var(--border-strong, #cbd5e1); border-radius: 6px;
  background: #fff; color: #374151; font-size: 13px; cursor: pointer;
}
.nut-them-dong-quang-cao:hover { background: var(--surface-2, #f3f4f6); }
/* flex-shrink:0 (đợt sửa 31/08/2026, lần 4 — lỗi tiềm ẩn phát hiện khi rà soát): .khu-vuc-giua
   là flex-column có overflow-y:auto, khung này lại có overflow:hidden riêng -> theo đúng quy tắc
   flexbox, min-height tự động của nó tính là 0 (khác các khối chữ/nút khác có overflow:visible,
   min-height tính theo nội dung) nên bị flexbox NÉN VỀ 0, khiến khung xem trước "Quảng cáo đầu
   trang" luôn trống trơn không nhìn thấy dù dữ liệu bên trong đã có đúng. */
.khung-xem-truoc-header { margin-top: 10px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.khung-xem-truoc-header .thanh-header { border-radius: 10px; }
.nut-luu-quang-cao {
  margin-top: 14px; padding: 9px 20px; border: none; border-radius: 6px;
  background: #2563eb; color: #fff; font-size: 13.5px; cursor: pointer;
}
.nut-luu-quang-cao:hover { background: #1d4ed8; }
.hang-nut-banner-quang-cao { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.hang-nut-banner-quang-cao button.nguy-hiem {
  padding: 9px 16px; border-radius: 6px; border: 1px solid #ef4444; background: #fff;
  color: #b91c1c; font-size: 13.5px; cursor: pointer;
}
.hang-nut-banner-quang-cao button.nguy-hiem:hover { background: #fee2e2; }
#xemTruocBanner { min-height: 60px; justify-content: center; align-items: center; }

/* ----- Nút phụ ở tiêu đề màn hình Bot: Chạy thử / Mẫu câu trả lời nhanh (21/08, đợt sửa) ----- */
.khu-nut-tieu-de-bot { display: flex; gap: 8px; flex-wrap: wrap; }
.nut-chay-thu, .nut-mau-cau-tra-loi {
  flex-shrink: 0; padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #374151; font-size: 12.5px; cursor: pointer;
}
.nut-chay-thu:hover, .nut-mau-cau-tra-loi:hover { background: #f3f4f6; }
.nut-chay-thu.dang-bat-chay-thu { background: #fef3c7; color: #b45309; border-color: #fcd34d; }

/* ----- "Mẫu câu trả lời nhanh" (mục 1.5 Kế hoạch) ----- */
.khung-mau-cau-tra-loi {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; background: #fff; margin-bottom: 12px;
}
.ds-mau-cau-tra-loi { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* Riêng khung "Mẫu câu trả lời nhanh" thu gọn trong màn Bot (#khungMauCauTraLoi, không phải
   trang riêng đầy đủ trong Huấn luyện AI) — giới hạn chỉ hiện ~3 câu, cuộn thêm bên trong, đỡ
   đẩy tràn xuống chiếm hết chỗ của khung chat bên dưới (Ông Paco báo 03/09/2026). */
#khungMauCauTraLoi .ds-mau-cau-tra-loi { max-height: 220px; overflow-y: auto; }
.dong-mau-cau-tra-loi { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; background: #f9fafb; }
.dong-mau-cau-tra-loi p { margin: 0 0 6px; font-size: 13.5px; white-space: pre-wrap; }
.dong-mau-cau-tra-loi .dong-hoi-dap-nut { align-items: center; justify-content: space-between; }
.nut-sao-chep-mau { background: #2563eb; color: #fff; border-color: #2563eb; }
.nut-xoa-mau { color: #dc2626; border-color: #fca5a5; }

/* ----- Hạng mục thống kê tự thêm (mục 1.10o Kế hoạch, "+ Thêm hạng mục thống kê") ----- */
.the-thong-ke-tuy-chinh .so-thong-ke { color: #9ca3af; }

/* ----- Thông báo sự cố hệ thống (mục 1.10n Kế hoạch) ----- */
.banner-thong-bao-su-co {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px;
}
.nut-an-banner-thong-bao {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer; font-size: 13px; color: #92400e;
}

/* ----- "Mời nhân viên khác tham gia thảo luận" (mục 1.7, 1.8 Kế hoạch) ----- */
.hang-nut-thanh-vien-bao-cao { margin-top: 8px; }
.nut-xem-thanh-vien-bao-cao {
  font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #374151;
}
.khung-thanh-vien-bao-cao {
  margin-top: 8px; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f9fafb;
}
.ds-thanh-vien-bao-cao { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dong-thanh-vien-bao-cao { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hang-moi-them-thanh-vien { display: flex; gap: 8px; }
.hang-moi-them-thanh-vien select {
  flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 13px;
}
.hang-moi-them-thanh-vien button {
  padding: 6px 14px; border-radius: 6px; border: 1px solid #2563eb; background: #2563eb; color: #fff; cursor: pointer;
}

/* ----- Sao lưu & dọn dẹp dữ liệu (mục 1.10m Kế hoạch) ----- */
.hang-nut-sao-luu { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.nut-tai-sao-luu {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px;
  border: 1px solid #2563eb; background: #2563eb; color: #fff; font-size: 13px; cursor: pointer;
  text-decoration: none;
}
.nut-tai-sao-luu:hover { background: #1d4ed8; }
.nut-khoi-phuc-sao-luu { background: #fff; color: #2563eb; }
.nut-khoi-phuc-sao-luu:hover { background: #eff6ff; }
.ds-don-dep-du-lieu { max-height: 360px; margin-bottom: 10px; }
.dong-don-dep {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
/* Ghi đè lại width/padding/margin-bottom mà quy tắc chung ".dong-hoi-dap input" (dùng cho ô
   nhập sửa câu hỏi-đáp) lỡ áp luôn vào đây — nếu không, checkbox bị kéo to hết chiều ngang,
   đẩy chữ bên cạnh bị bóp thành cột dọc (lỗi hiển thị 22/08, Ông Paco báo). */
.dong-don-dep input[type="checkbox"] {
  width: auto; flex: none; padding: 0; margin: 3px 0 0; flex-shrink: 0;
}
.don-dep-noi-dung {
  font-size: 13.5px; display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word;
}

/* ----- Cài đặt PWA — cài app + Thông báo đẩy (mục 1.10t Kế hoạch) ----- */
/* Gộp thành 1 hàng gọn (giống hàng nút Chạy thử/Mẫu câu trả lời nhanh) — cài đặt chỉ bấm 1 lần
   nên không cần chiếm hẳn 2 dòng riêng (Ông Paco phản ánh 22/08). */
.khung-pwa { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 8px 12px 4px; }
.nut-pwa {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; color: #374151; font-size: 11.5px; cursor: pointer;
}
.nut-pwa:hover { background: #f3f4f6; }
.trang-dang-nhap .khung-pwa { padding: 12px 0 0; justify-content: center; }
.trang-dang-nhap .nut-pwa {
  flex: none; max-width: 200px; padding: 5px 12px; font-size: 11px;
  background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); color: #e5e7eb;
}
.trang-dang-nhap .nut-pwa:hover { background: rgba(255, 255, 255, 0.25); }
.loi-bao-mat { color: #dc2626 !important; }

/* ============================================================
   GIAO DIỆN ĐIỆN THOẠI (≤768px) — thêm 23/08/2026
   Hướng 2 đã được Ông Paco duyệt: 1 thanh menu cố định dưới đáy màn hình gồm
   Trang chủ / Bot AI / Huấn luyện / Báo cáo / Cài đặt (tuỳ trang, xem menu-di-dong.js).
   Không đổi bố cục/CSS desktop — chỉ thêm quy tắc mới trong @media, và biến menu-trai
   sẵn có thành 1 khay kéo lên (bottom sheet) khi bấm các nút này trên màn hình hẹp.
   ============================================================ */
.thanh-menu-di-dong { display: none; }
.mdd-lop-phu { display: none; }
.mdd-tay-cam { display: none; }

@media (max-width: 768px) {
  .khung-dashboard,
  .khung-dashboard.view-dang-an {
    display: flex;
    flex-direction: column;
    /* Đợt sửa 05/09/2026 — cùng lý do 100vh -> 100dvh ở bản máy tính phía trên file, áp lại lần
       nữa vì bản điện thoại đổi sang display:flex riêng, không kế thừa được dòng ở trên. */
    height: 100vh;
    height: 100dvh;
  }
  /* Thanh header — logo phải co lại đúng theo chiều cao 52px, KHÔNG dùng height:100% lồng
     nhiều lớp nữa (gây lỗi logo phóng to tràn màn hình, đè mất chữ quảng cáo — Ông Paco báo
     23/08) — đặt thẳng 1 chiều cao cố định (px) cho ảnh logo, chắc chắn không lệ thuộc vào
     việc phần tử cha có "chiều cao xác định" hay không. */
  /* Đổi màu header từ đen-navy cũ (#111827) sang navy chuẩn bảng màu mới (đợt sửa giao diện,
     31/08/2026) — vẫn là màu cấu trúc, chỉ đổi đúng sắc navy thống nhất toàn hệ thống. */
  .thanh-header { flex: 0 0 52px; height: 52px; padding: 0 10px; gap: 10px; background: var(--navy-900); }
  .logo-pacoai { height: auto; padding: 0; border-right: none; }
  .logo-pacoai img { height: 34px; width: auto; max-width: 130px; }
  .khung-quang-cao { min-width: 0; }
  .chuoi-quang-cao { gap: 28px; }
  /* .chuoi-quang-cao .muc-quang-cao — cỡ chữ giờ Cấp 1 tự chỉnh được (xem khai báo gốc phía trên file), gỡ khai riêng điện thoại ở đây (đợt sửa 13/09/2026). */

  /* Các thẻ card (công ty/hạng mục/nhân viên...) — xếp gọn 2 cột đều nhau trên điện thoại,
     thay vì auto-fill co dãn dễ bị lệch/lẻ hàng như trên máy tính (Ông Paco phản ánh 23/08). */
  .luoi-the-cong-ty,
  .luoi-the-nhan-vien,
  .luoi-the-hang-muc,
  .luoi-phien-lam-viec {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* Thẻ card (công ty/hạng mục...) — đổi nền navy-gold cũ sang nền TRẮNG + viền mảnh (đợt sửa
     giao diện, 31/08/2026: navy/gold giờ chỉ còn là điểm nhấn, không tô kín nền thẻ nữa). */
  .the-cong-ty, .the-card-pacoai {
    padding: 14px 12px; gap: 8px; min-width: 0;
    background: var(--bg); border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(28, 26, 21, 0.06);
  }
  .the-cong-ty:hover, .the-card-pacoai:hover { box-shadow: 0 4px 14px rgba(28, 26, 21, 0.1); }
  .the-cong-ty strong, .the-card-dau strong {
    /* Việc 4 (đợt sửa 03/09/2026 — Ông Paco: tổng quan trên điện thoại nhìn hơi nhỏ, thử tăng cỡ
       cố định thêm ~2px trước khi làm nút gạt tuỳ chỉnh) — 14px -> 16px, chỉ áp dụng điện thoại. */
    font-size: 16px;
    /* Chữ tiêu đề thẻ trước đây là chữ vàng gradient (hợp nền navy) -> đổi thành navy đặc trên
       nền trắng mới; -webkit-text-fill-color ghi đè lại hiệu ứng "background-clip: text" cũ. */
    color: var(--navy-800); -webkit-text-fill-color: var(--navy-800);
  }
  /* Tên công ty + trạng thái "Đang hoạt động" bị cụt chữ do không đủ chỗ trên 1 hàng ở khổ
     2 cột điện thoại (Ông Paco phản ánh 23/08) -> cho xuống dòng thay vì cắt, không tràn ra
     ngoài thẻ (Ông Paco phản ánh lần 2, 23/08 — áp dụng luôn cho mọi thẻ có dòng tiêu đề
     tương tự: Cài đặt API, danh sách câu hỏi-đáp/báo cáo...). */
  .the-cong-ty-dau, .the-card-dau, .the-cai-dat-api-dau, .dong-hoi-dap-dau {
    flex-wrap: wrap;
  }
  .the-cong-ty strong, .the-card-dau strong, .the-cai-dat-api-dau strong {
    overflow-wrap: anywhere;
  }
  .den-trang-thai { white-space: normal; }
  /* Nhãn trạng thái Bật/Tắt trước đây dùng màu pastel sáng cho hợp nền tối -> đổi sang màu đậm
     hơn cho đủ tương phản trên nền trắng (đợt sửa giao diện, 31/08/2026). */
  .den-trang-thai.dang-bat, .den-hoat-dong { color: var(--ok); }
  .den-trang-thai.dang-tat { color: var(--danger); }
  .the-cong-ty-so-lieu span, .the-card-so-lieu span { font-size: 11px; color: var(--ink-muted); }
  .tin-nhan-moi-nhat-phien { color: var(--ink-muted); }
  /* Nút "Xem thêm/Quản lý" trong thẻ — trước đây viền/chữ vàng trên nền navy, nay đổi kiểu
     ".bt-secondary" (viền/chữ navy trên nền trắng) cho khớp bảng màu mới. */
  .the-card-nut button, .nut-xem-them-cong-ty, .nut-vao-xem-nhan-vien {
    padding: 6px 10px; font-size: 11.5px;
    border-color: var(--navy-700); color: var(--navy-700); background: transparent;
  }
  .the-card-nut button:hover, .nut-xem-them-cong-ty:hover,
  .nut-vao-xem-nhan-vien:hover { background: var(--navy-700); color: #fff; }
  /* Thẻ "phiên làm việc" (khách chat trong Bot AI/Trang chủ Cấp 3) — đang to hơn thẻ thường,
     thu gọn lại để vừa khổ 2 cột (Ông Paco yêu cầu 23/08: mọi khung phiên làm việc phải chia
     2 cột cân đối như các thẻ khác). */
  .the-phien-lam-viec-lon { padding: 14px 12px; gap: 8px; min-height: 0; }
  .the-phien-lam-viec-lon .the-card-dau strong { font-size: 14px; }
  .tin-nhan-moi-nhat-phien { font-size: 11.5px; }

  /* Tiêu đề màn hình Bot ("Bot Website"...) + 2 nút "Chạy thử"/"Mẫu câu trả lời nhanh" đang bị
     xuống 2 dòng do không đủ chỗ nằm chung 1 hàng với tiêu đề -> tách tiêu đề xuống dòng riêng,
     2 nút xếp chung 1 hàng ngang, thu nhỏ chữ cho vừa (Ông Paco phản ánh 23/08). */
  .tieu-de-co-nut-cai-dat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .khu-nut-tieu-de-bot { width: 100%; flex-wrap: nowrap; }
  .nut-chay-thu, .nut-mau-cau-tra-loi, .nut-cai-dat-ket-noi {
    flex: 1; min-width: 0; padding: 6px 4px; font-size: 11px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-align: center;
  }

  /* Mọi khung có ô nhập liệu (form, khung chat Huấn luyện AI, Cài đặt kết nối, Đổi mật
     khẩu...) đang bị giới hạn bề rộng cố định (max-width theo px cho máy tính) -> bỏ giới
     hạn đó, cho chiếm hết chiều ngang màn hình điện thoại (Ông Paco yêu cầu 23/08). */
  .form-doi-mat-khau,
  .khung-cai-dat-ket-noi,
  .khung-panel-nho {
    max-width: 100%;
  }

  /* Ẩn khung View (Phiên làm việc trực tuyến) trên điện thoại — màn quá hẹp để chia
     thêm 1 cột nữa. Có thể bổ sung lại thành 1 tab riêng sau nếu cần. */
  .thanh-keo-view, .khung-view { display: none !important; }

  .khu-vuc-giua {
    flex: 1;
    min-height: 0;
    padding: 14px 14px 86px; /* chừa chỗ phía dưới cho thanh menu di động cố định (đã cao thêm ở Việc 6) */
  }
  /* Đợt sửa mobile 07/09/2026 (Ông Paco báo: vào "Bot ..." / "Huấn luyện AI" trên điện thoại lúc
     lướt ngon lúc bị đơ, phải thu-phóng vài lần mới cuộn lại được; khung chat đôi khi lệch lề) —
     gốc lỗi: .khu-vuc-giua VÀ khung con bên trong (.man-hinh-bot/.khung-hoc-ai, qua các cháu
     .ds-hoi-dap/.bong-tin-nhan-web-khung/.luoi-1-hang) CÙNG có overflow-y:auto -> 2 LỚP CUỘN LỒNG
     NHAU, đúng kiểu lỗi khiến Safari iOS "kẹt cuộn". Chỉ tắt cuộn ở .khu-vuc-giua khi bên trong nó
     có 1 trong 2 khung này (dùng :has, KHÔNG đụng các trang khác vẫn cần .khu-vuc-giua tự cuộn
     bình thường — chỉ 2 màn hình chat/huấn luyện mới có khung con tự quản lý cuộn riêng). */
  .khu-vuc-giua:has(> .man-hinh-bot),
  .khu-vuc-giua:has(> .khung-hoc-ai) {
    overflow-y: hidden;
  }

  /* Thanh quay lại chừa thêm chỗ phía TRÊN khi đang hiện (đợt sửa 04/09/2026 — xem dieu-huong.js
     bật/tắt lớp "co-thanh-quay-lai-di-dong" trên <body>) — 14px gốc + 52px cao thanh. */
  body.co-thanh-quay-lai-di-dong .khu-vuc-giua { padding-top: 66px; }
  /* Thanh logo cũ (.thanh-header) vẫn CHIẾM CHỖ dù đã bị thanh quay lại đè lên che mất, khiến
     khoảng trống phía trên bị CỘNG DỒN cả 2 (52px thanh logo ẩn + 66px chừa cho thanh quay lại =
     118px, gần gấp đôi mức cần) — Ông Paco phát hiện qua so sánh ảnh Trang chủ (không thanh quay
     lại, khoảng hở chỉ 52px) với màn con (khoảng hở lớn bất thường), đo trực tiếp xác nhận đúng
     nguyên nhân (đợt sửa 04/09/2026). Ẩn hẳn thanh logo khi thanh quay lại đang hiện — nó đã bị
     che mất nên ẩn đi không mất gì, chỉ còn đúng 1 khoảng chừa 66px của thanh quay lại. */
  body.co-thanh-quay-lai-di-dong .thanh-header { display: none; }

  /* Thanh quay lại kiểu Tiki — cố định TRÊN CÙNG màn hình, mũi tên bên trái + tên màn hình ở
     giữa (Ông Paco chốt 04/09/2026: "học giao diện Tiki", chỉ đổi phần này, giữ nguyên mọi hiển
     thị khác bên trong từng màn hình). CHỈ áp dụng cho điện thoại — máy tính vẫn giữ nguyên kiểu
     nút nhỏ nằm cuối trang như cũ (khai báo gốc ngoài @media, phía trên). */
  .nut-quay-lai-chung {
    position: fixed;
    top: 0; left: 0; right: 0;
    margin: 0; padding: 0 14px;
    height: 52px;
    border: none; border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(28, 26, 21, .06);
    z-index: 85; /* trên nội dung, dưới lớp phủ menu (.mdd-lop-phu z-index 60 thấp hơn — vẫn ổn) */
  }
  .nut-quay-lai-chung .mui-ten-quay-lai-chung { font-size: 24px; }
  .nut-quay-lai-chung .tieu-de-quay-lai-chung {
    flex: 1;
    text-align: center;
    margin-right: 24px; /* bù lại bề rộng mũi tên để tiêu đề thực sự nằm giữa thanh */
    font-size: 16px; font-weight: 700; color: var(--ink, #1c1a15);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Khung chat chi tiết 1 phiên (Bot Website thật) — CHỈ áp dụng riêng cho điện thoại. Đã dùng
     DevTools soi trực tiếp (Ông Paco gửi ảnh Inspect, 03/09/2026 lần 6) xác nhận đúng: khoảng
     trắng KHÔNG nằm trong khung chat, mà là phần dư của #khuManHinhBot (flex:1, cao đúng hết màn
     hình) khi khung chat bên trong lại để tự co nhỏ theo nội dung (bản thử trước, flex:0 0 auto)
     -> quay lại cho khung chat GIÃN HẾT full #khuManHinhBot (flex:1 kế thừa qua #khuChiTietPhien-
     ChatWeb), giờ giãn đúng vì gốc lỗi thật sự (".khung-nhap-chat" tranh flex với khung tin nhắn)
     đã sửa ở khai báo gốc phía trên rồi — không còn khe hở nào nữa. */
  .khu-chi-tiet-phien-chat-web:not(:empty) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .khung-chi-tiet-phien-chat-web { flex: 1; min-height: 0; }

  /* Thanh đầu khung chat chi tiết — xếp lại thành 2 dòng CHỈ RIÊNG điện thoại (Ông Paco chốt
     07/09/2026, cập nhật lại cùng ngày: dòng 1 = nút "Quay lại" canh trái + nút "Trả lại cho AI"
     canh phải (nếu có), dòng 2 = tên khách + trạng thái riêng 1 dòng, canh giữa. Có nút "Trả lại
     cho AI" hay không cũng đều cân đối như nhau, không còn xô lệch 3 dòng lộn xộn. Chỉ đổi bằng
     "order" + "justify-content" + buộc span xuống dòng riêng (flex-basis 100%) — không cần sửa
     HTML. */
  .khung-chi-tiet-phien-chat-web-dau { justify-content: space-between; }
  .khung-chi-tiet-phien-chat-web-dau button { order: 1; }
  .khung-chi-tiet-phien-chat-web-dau span { order: 2; flex: 1 1 100%; text-align: center; }

  /* Lưới thẻ thống kê ở Trang chủ (Công ty/Câu hỏi-đáp/Báo cáo...) — xếp gọn 2 cột đều
     nhau, tránh tình trạng thẻ lẻ cuối cùng bị kéo dài hết hàng khi flex-wrap tự xuống
     dòng (Ông Paco phản ánh 23/08). */
  .luoi-thong-ke {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .the-thong-ke { min-width: 0; padding: 14px 10px; }
  .the-thong-ke .so-thong-ke { font-size: 24px; }

  /* 2 biểu đồ "Thống kê" — điện thoại xếp 2 HÀNG (1 cột) cho vừa khổ, thay vì 2 cột chật hẹp
     như máy tính (Ông Paco chốt 31/08/2026). */
  .luoi-thong-ke-bieu-do { grid-template-columns: 1fr; gap: 14px; }

  /* menu-trai (Bot AI/Huấn luyện AI/Cài đặt...) -> khay trượt ra từ mép trái, ẩn theo mặc định,
     chỉ hiện khi bấm 1 trong các nút của thanh-menu-di-dong (menu-di-dong.js).
     Đợt sửa 6 (30/08, sau cùng — Ông Paco: bản trước cao kín từ nóc màn hình xuống, phải gọn
     lại, nằm sát PHÍA DƯỚI, ngay trên thanh menu chân trang, cao vừa đủ nội dung chứ không kéo
     hết màn hình): bỏ top:0, neo khay từ DƯỚI lên (bottom), chỉ cao tối đa 60% màn hình — nếu
     nội dung dài hơn thì tự cuộn bên trong (menu-cuon đã có sẵn overflow-y: auto), sát mép
     trái, viền phải để phân tách với nội dung, trượt vào từ bên trái. */
  .menu-trai {
    position: fixed;
    left: 0; right: auto; top: auto;
    width: 50%;
    bottom: 66px; /* dừng ngay trên thanh menu dưới cùng, không đè lên */
    /* Đợt sửa mobile 07/09/2026 — cùng lý do 100vh -> 100dvh ở trên file: vh trên điện thoại tính
       theo chiều cao lớn nhất có thể (thanh địa chỉ ẩn hẳn), không tự cập nhật khi thanh địa chỉ
       ẩn/hiện, khiến khay menu (position:fixed) tính sai chiều cao tối đa. Khai vh trước để trình
       duyệt cũ vẫn chạy được, dvh đứng sau ghi đè đúng ở trình duyệt mới hỗ trợ. */
    max-height: 60vh;
    max-height: 60dvh;
    min-width: 0;
    border: none;
    border-right: 1.5px solid var(--gold-500);
    border-radius: 0 14px 0 0;
    box-shadow: 6px -4px 24px rgba(11, 26, 61, .28);
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: none;
    transition: transform .22s ease;
    z-index: 70;
  }
  .menu-trai.mdd-mo { transform: translateX(0); pointer-events: auto; }
  .hang-home-menu { display: none; } /* đã có nút Trang chủ riêng ở thanh dưới, khỏi lặp */

  /* Việc E (đợt sửa giao diện, 31/08/2026): "Cài đặt hệ thống" ở Cấp 1 điện thoại giờ là 1
     TRANG RIÊNG đầy đủ (xem cai-dat-trang-rieng.js), không còn dùng khay xổ mục con trong
     menu-trai nữa -> ẩn hẳn khối "Cài đặt hệ thống" cũ khỏi khay để khỏi trùng lặp/rối. CHỈ ẩn
     trên điện thoại — bên máy tính (ngoài @media này) GIỮ NGUYÊN như cũ. */
  .chan-menu #hopCaiDat { display: none; }

  /* Đợt sửa 5 (30/08 — Ông Paco: bản trước cho xuống dòng 2 làm nút Bật-Tắt/Quản lý tràn hẳn
     ra ngoài khung menu — SAI). Sửa lại đúng ý: GIỮ NGUYÊN 1 DÒNG duy nhất, mũi tên luôn ở
     cuối dòng; nếu tên mục dài không đủ chỗ thì rút gọn tên bằng dấu "..." (KHÔNG bao giờ đẩy
     nút/nhãn ra ngoài khung menu) — nút Bật-Tắt/Quản lý/mũi tên luôn giữ nguyên kích thước,
     luôn nằm trọn trong khung. */
  .tieu-de-muc-menu {
    flex-wrap: nowrap;
    overflow: hidden;
    /* Việc 4 (đợt sửa 03/09/2026 — Ông Paco: mục lục menu nhìn hơi nhỏ trên điện thoại) — tăng
       cỡ chữ cố định thêm ~2px, chỉ áp dụng điện thoại. */
    font-size: 16px;
  }
  .danh-sach-muc-con .hop-muc-menu-con .tieu-de-muc-menu { font-size: 15px; }
  .muc-con { font-size: 15.5px; }
  .tieu-de-muc-menu > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .khu-phai-tieu-de {
    flex-shrink: 0;
  }
  /* Thu nhỏ thêm nhãn Bật-Tắt/nút Quản lý trên điện thoại để đủ chỗ cho tên mục + mũi tên
     trong khung menu hẹp (1/2 màn hình) mà không bị tràn. */
  .nut-bat-tat {
    font-size: 10px;
    padding: 2px 6px;
  }
  .nut-vao-nhu-cap2 {
    font-size: 11px;
    padding: 3px 7px;
  }

  /* Hàng tên tài khoản + nút Quay lại (khi đang đóng vai)/Đăng xuất ở chân menu — cùng lỗi
     tràn ra ngoài khung như trên (Ông Paco báo mất hẳn nút "Đăng xuất" khi có thêm nút "Quay
     lại"): cho xuống dòng khi không đủ chỗ thay vì cắt/mất nút, tên tài khoản rút gọn bằng
     "..." nếu dài, các nút giữ nguyên hiện đủ chữ. */
  .thong-tin-tai-khoan-chan {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 6px;
  }
  .thong-tin-tai-khoan-chan #tenNguoiDung {
    flex: 1;
    min-width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thong-tin-tai-khoan-chan button {
    flex-shrink: 0;
    font-size: 11.5px;
    padding: 4px 8px;
  }

  /* Ông Paco yêu cầu (30/08, đợt sửa 4): bỏ nút "Máy tính/Điện thoại" (chỉ dùng để xem thử trên
     máy tính, không cần trên điện thoại thật) và nút "Cài đặt ứng dụng" khỏi bản điện thoại. */
  .hang-xem-thu-giao-dien,
  .nut-cai-dat-pwa {
    display: none !important;
  }

  .mdd-tay-cam {
    display: block;
    width: 40px; height: 4px; border-radius: 3px; background: #d8dbe2;
    margin: 10px auto 2px; flex-shrink: 0; cursor: pointer;
  }

  /* Lớp phủ mờ phía sau khay — bấm vào để đóng lại */
  .mdd-lop-phu {
    display: block;
    position: fixed; inset: 0; background: rgba(11, 26, 61, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
    z-index: 60;
  }
  .mdd-lop-phu.mdd-mo { opacity: 1; pointer-events: auto; }

  /* Thanh menu dưới cùng — cố định, tối đa 5 nút (Trang chủ/Bot AI/Huấn luyện/Báo cáo/Cài đặt) */
  .thanh-menu-di-dong {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    /* Việc 6 (30/08): tăng khoảng 15%. Đợt sửa 05/09/2026 (Ông Paco: "menu chân trang nhìn hơi
       nhỏ, tăng thêm cho tổng quan ổn hơn, icon vẫn phải đều nhau/chữ không tụt dòng, tự canh
       theo máy to/nhỏ") — đổi từ 1 số cố định sang clamp() theo bề rộng màn hình (vw): máy nhỏ
       (iPhone SE ~375px) gần như giữ nguyên mức cũ, máy to hơn (iPhone Pro Max, Android to...)
       tự lớn thêm dần tới mức trần, không cần đoán riêng từng dòng máy. Cao thêm 1 chút để có
       chỗ cho phần chữ+icon lớn hơn, không bị đẩy sát mép dưới màn hình.
       padding-bottom cộng thêm vùng an toàn safe-area (tai thỏ/thanh vuốt iPhone) để icon/chữ
       không bị thanh điều hướng hệ điều hành che mất mép dưới. */
    height: clamp(66px, 17vw, 78px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(28, 26, 21, .08);
    z-index: 80;
  }
  .mdd-nut {
    position: relative;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: none; color: var(--ink-muted); font-family: inherit;
    /* Việc 3 (03/09/2026, lần 2): hạ cỡ chữ (14px -> 12px) để icon+chữ vừa khít 1 hàng. Đợt sửa
       05/09/2026: dùng clamp() thay số cố định — 12px vẫn là mức sàn (máy nhỏ giữ nguyên, không
       xuống dòng), máy to hơn tự tăng dần tới tối đa 14px. */
    font-size: clamp(12px, 3.2vw, 14px); padding: 4px 2px; cursor: pointer;
  }
  .mdd-nut > span:nth-child(2) { white-space: nowrap; }
  /* Chấm đỏ số lượng thông báo trên nút "Thông báo" ở thanh dưới (đợt sửa 31/08/2026, lần 7). */
  .mdd-huy-hieu {
    position: absolute; top: 0; right: calc(50% - 22px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
    background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
  }
  /* Icon giờ là SVG nét viền (đợt sửa giao diện, 31/08/2026 — xem menu-di-dong.js), trừ Bot AI
     vẫn giữ emoji 🤖 theo đúng yêu cầu Ông Paco ("icon robot cũ nhìn đẹp hơn"). SVG dùng
     stroke="currentColor" nên tự đổi màu theo "color" của nút — không cần riêng nữa.
     Đợt sửa 05/09/2026: cỡ icon cũng đổi sang clamp() cùng nhịp với chữ ở trên, để icon/chữ
     luôn lớn lên ĐỀU NHAU (không lệch tỉ lệ) trên mọi cỡ máy. */
  .mdd-nut .mdd-icon { font-size: clamp(21px, 5.6vw, 25px); line-height: 1; display: flex; align-items: center; justify-content: center; }
  .mdd-nut .mdd-icon svg { display: block; }
  .mdd-nut.mdd-dang-chon { color: var(--navy-700); font-weight: 600; }
  /* Đang chọn: icon SVG tô màu vàng gold làm điểm nhấn nhỏ (giữ đúng tinh thần bảng màu mới —
     gold chỉ dùng làm điểm nhấn, không tô nền lớn), chữ nhãn vẫn navy ở trên. */
  .mdd-nut.mdd-dang-chon .mdd-icon svg { stroke: var(--gold-500); }

  /* Thẻ "khách/hội thoại" trong Bot AI (Facebook/Zalo/Telegram/Website — .the-1-hang.phien,
     xem bot-va-huan-luyen.js) trên ĐIỆN THOẠI đang nhỏ (Ông Paco báo 05/09/2026) — phóng to
     khoảng 20% CHỈ ở bản điện thoại, giữ nguyên bản máy tính. Không đụng tới các biến thể khác
     của ".the-1-hang" (.gon/.kep/.don) — chỉ nhắm đúng ".phien". */
  .the-1-hang.phien { min-height: 89px; }
  .the-1-hang.phien .the-1-hang-ten { font-size: 15.5px; padding: 12px 14px; }
  .the-1-hang.phien .the-1-hang-tin-nhan { font-size: 12.5px; }
  .the-1-hang.phien .the-1-hang-phai { min-width: 120px; gap: 6px; padding: 7px 7px; }
  .the-1-hang.phien .the-1-hang-trang-thai { font-size: 12px; }
  .the-1-hang.phien .the-1-hang-cham { width: 6px; height: 6px; flex-basis: 6px; }
  .the-1-hang.phien .the-1-hang-nut { font-size: 12px; }

  /* Trang đăng nhập — KHÓA CỨNG cả khung nền (Ông Paco yêu cầu 23/08, lần 4: "khóa tổng quan
     nền và khung đăng nhập... cần khóa cứng thì thương hiệu với chuẩn"). Lỗi trước: dùng
     min-height nên khi bàn phím ảo mở ra (viewport thu hẹp), khối logo+form cần nhiều chỗ hơn
     khung hiện có -> ĐẨY DÀI CẢ TRANG ra và cuộn được -> nền html phía sau (trong suốt) có thể
     lộ ra, thấy "chưa khóa". Nay dùng position:fixed + inset:0 để khung nền LUÔN đúng bằng
     đúng viewport thật đang thấy (không phụ thuộc bàn phím/thanh địa chỉ ẩn-hiện), tự cuộn BÊN
     TRONG nếu logo+form không đủ chỗ (overflow-y:auto) — nền xanh luôn phủ kín, không bao giờ
     lộ khoảng trống. overscroll-behavior chặn hiệu ứng "co giãn dội" của Safari lộ nền trắng.
     html/body cũng đặt cùng màu nền dự phòng — nhỡ có khung nào tính sai vẫn cùng 1 màu, không
     bao giờ thấy màu lạ (chuẩn thương hiệu). */
  /* html ĐẶT overflow:hidden RIÊNG (không gộp overflow-y:auto của .trang-dang-nhap ở dưới vào
     chung body) — theo đúng chuẩn CSS, nếu html không khai báo overflow thì trình duyệt sẽ TỰ
     ĐẨY overflow của body lên cho html/viewport cuộn thay (gọi là "propagation"), khiến phần tử
     body (đang position:fixed) đứng yên không nhúc nhích còn cả TRANG thì cuộn đi chỗ khác —
     test thật bằng Playwright: ép el.scrollTop vẫn luôn về lại 0, không cuộn được (đây chính là
     nguyên nhân sâu xa khiến "không khóa được", 23/08 lần 4). Khai báo overflow:hidden trên html
     để tắt hẳn kiểu đẩy lên đó — cuộn giờ chỉ còn xảy ra Ở TRONG body/.trang-dang-nhap. */
  /* CHỈ áp dụng cho trang đăng nhập (body.trang-dang-nhap) — html:has(...) để không ảnh hưởng
     tới 3 trang Dashboard (Cấp 1/2/3) đang dùng CHUNG file CSS này, các trang đó vẫn cần cuộn
     bình thường như cũ. (Sửa lại 23/08, lần 4b — bản đầu lỡ đặt "html, body" trần, áp cho MỌI
     trang, sẽ làm hỏng cuộn ở Dashboard — phát hiện và sửa ngay khi tự kiểm tra lại.) */
  html:has(body.trang-dang-nhap) { height: 100%; overflow: hidden; background: #0e4632; }
  body.trang-dang-nhap { height: 100%; background: #0e4632; overscroll-behavior: none; }
  .trang-dang-nhap {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px;
    box-sizing: border-box;
    /* Huỷ align-items/justify-content:center kế thừa từ bản máy tính (phía trên file) — 2 thuộc
       tính đó khi kết hợp overflow:auto có LỖI TRÌNH DUYỆT khá phổ biến: phần ĐẦU nội dung tràn
       ra sẽ bị cắt và KHÔNG THỂ cuộn lên để thấy lại (kiểm tra thật bằng Playwright: logo bị đẩy
       lên trên y=-14px, cuộn thế nào cũng không thấy lại được) — đây chính là nguồn gốc cảm giác
       "chưa khóa cứng, còn lộn xộn" khi bàn phím ảo mở ra làm khung hẹp lại. Thay bằng 2 khoảng
       đệm co giãn (::before/::after bên dưới): đủ chỗ thì tự đẩy khối logo+form vào giữa y hệt
       center, không đủ chỗ thì tự co về 0 và neo khối lên đỉnh — luôn cuộn được trọn vẹn. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .trang-dang-nhap::before,
  .trang-dang-nhap::after {
    content: '';
    flex: 1 0 0;
  }
  /* Khung logo + form + nút cài đặt đều là con trực tiếp của nhom-dang-nhap -> dùng lưới
     (grid) để xếp đúng thứ tự logo/form/nút cài đặt mà không cần sửa HTML. */
  .nhom-dang-nhap {
    display: grid;
    grid-template-areas: "logo" "form" "pwa";
    justify-items: center;
    align-content: center;
    width: 100%;
    max-width: 420px;
    gap: 6px;
  }
  .logo-trang-dang-nhap {
    grid-area: logo;
    width: min(58vw, 260px);
    max-width: 260px;
    aspect-ratio: 1672 / 941; /* giữ đúng tỉ lệ logo thật, tránh xô lệch bố cục khi ảnh tải xong */
    height: auto;
    margin-bottom: 0;
  }
  .hop-dang-nhap { grid-area: form; width: 100%; box-sizing: border-box; padding: 20px 22px 24px; }
  /* Nút "Cài đặt ứng dụng" — nằm NGAY DƯỚI khung đăng nhập (không đè lên trên), lệch về góc
     phải, chỉ ở điện thoại (Ông Paco chốt lại 23/08, lần 3). */
  .trang-dang-nhap .khung-pwa {
    grid-area: pwa;
    justify-self: end;
    margin: 0 4px 0 0;
    padding: 0;
  }
}

/* ============================================================
   XEM THỬ GIAO DIỆN MÁY TÍNH/ĐIỆN THOẠI — CHỈ CẤP 1 (thêm 23/08/2026)
   Cho Admin tổng đang ngồi máy tính vẫn xem trước được giao diện điện thoại thật để
   duyệt, không cần cầm điện thoại — không phụ thuộc @media (max-width) ở trên, vì đây
   là 1 khung điện thoại giả lập (iframe) có bề rộng cố định 390px, tự kích hoạt đúng
   @media bên trong nó dù đang mở trên màn hình máy tính to.
   ============================================================ */
.hang-xem-thu-giao-dien { padding: 8px 8px 0; display: flex; gap: 6px; }
.nut-xem-thu {
  flex: 1; padding: 6px 4px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; color: #374151; font-size: 12px; cursor: pointer;
}
.nut-xem-thu[data-dang-chon="true"] { background: #16326e; color: #fff; border-color: #16326e; }

.lop-phu-xem-thu-dt {
  display: none;
  position: fixed; inset: 0; background: rgba(11, 26, 61, .72);
  z-index: 500; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
}
.lop-phu-xem-thu-dt.mo { display: flex; }
.khung-dien-thoai-gia-lap {
  width: 390px; height: 844px; max-height: 88vh;
  background: #000; border-radius: 36px; padding: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.khung-dien-thoai-gia-lap iframe {
  width: 100%; height: 100%; border: none; border-radius: 26px; background: #fff;
}
.nut-dong-xem-thu-dt {
  background: #fff; border: none; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; cursor: pointer; color: #16326e; font-weight: 600;
}

/* ----- "Quản lý đơn hàng" (mục 1.12c Kế hoạch) -----
   Khu 1: Trạng thái đơn — dùng đúng mẫu thẻ chung ".the-card-pacoai" (nền navy-gold), xếp
   ĐÚNG 1 HÀNG DUY NHẤT bằng grid-auto-flow: column, cuộn NGANG khi tràn (Ông Paco chốt lại
   31/08/2026, lần 2: "1 hàng và hàng đó 3 đơn" ở máy tính, 2 đơn ở điện thoại — KHÔNG phải 2
   hàng như bản trước, đơn đã xác nhận sẽ bị đẩy sang trái/ra khỏi màn hình để đơn mới đặt tiếp
   theo lên đúng vị trí đầu). */
.tieu-de-khu-don-hang { margin: 22px 0 4px; font-size: 15px; color: #374151; }
.tieu-de-khu-don-hang:first-of-type { margin-top: 10px; }
.khu-trang-thai-don {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  /* Cột co giãn theo bề rộng khung, để đúng 3 thẻ vừa 1 màn hình (máy tính) trước khi phải cuộn
     ngang. Bản điện thoại đổi lại thành 2 thẻ/màn hình, xem @media (max-width:768px) bên dưới. */
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}
/* Bản điện thoại — 2 thẻ vừa 1 màn hình trước khi cuộn ngang (máy tính ở trên là 3). Đặt SAU
   quy tắc máy tính ở trên (không nằm trong khối @media chung ở đầu file) để chắc chắn thắng thế
   trên điện thoại — cùng độ ưu tiên CSS thì luật đứng SAU trong file luôn thắng. */
@media (max-width: 768px) {
  .khu-trang-thai-don { grid-auto-columns: calc((100% - 12px) / 2); }
}
.the-don-hang { padding: 12px 14px; gap: 8px; min-height: 110px; }
/* (Ông Paco báo 31/08/2026 mục 2: nhãn trạng thái "Giao thành công" bị lòi ra ngoài thẻ khi
   tiêu đề dài) — cho phép xuống dòng thay vì ép nằm 1 hàng, để nhãn không tràn ra ngoài viền thẻ. */
.the-don-hang .the-card-dau { flex-wrap: wrap; }
.the-don-hang .the-card-dau strong { font-size: 13.5px; }
.the-don-hang-noi-dung { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #e2e8f0; }
.the-don-hang-noi-dung .ghi-chu-mock { color: #9fb0d0; margin-bottom: 0; }
.the-don-hang .the-card-nut button { padding: 5px 10px; font-size: 11.5px; }

/* Khu 2: Dữ liệu khách hàng — tái dùng khung bảng cuộn ".bang-xem-truoc-hang-loat" (Huấn luyện
   hàng loạt) cho đồng nhất, không tự vẽ bảng mới. */
.hang-nut-don-hang { display: flex; gap: 10px; margin-bottom: 10px; }
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat { max-height: 420px; }
/* (Đợt sửa 31/08/2026, mục 2 — Ông Paco: cột phải "vừa khổ nội dung" như Mã/SĐT/Họ tên, chỉ
   riêng "Địa chỉ" được xuống dòng) — đổi bảng này sang table-layout tự nhiên (không ép 100% đều
   cột như ".bang-xem-truoc-hang-loat table" mặc định), mọi cột không xuống dòng TRỪ "Địa chỉ"
   (cột thứ 6) được rộng hơn + xuống dòng bình thường. */
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat table { table-layout: auto; }
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat th,
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat td { white-space: nowrap; }
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat th:nth-child(6),
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat td:nth-child(6) { white-space: normal; min-width: 160px; }
/* Cột STT (đợt sửa 11/09/2026, Ông Paco chốt) — căn giữa số thứ tự, chừa khoảng cách với nút
   Copy nằm ngay dưới. */
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat td:first-child { text-align: center; }
.bang-du-lieu-khach-hang .bang-xem-truoc-hang-loat td:first-child .nut-sao-chep-dong-don-hang { margin-top: 6px; }
/* "Kết quả giao" — 2 lựa chọn xếp DỌC (thay vì cùng 1 hàng) để cột này chỉ rộng bằng đúng 1 nhãn
   dài nhất ("Không thành công"), không kéo cột này rộng hơn các cột khác. */
.bang-du-lieu-khach-hang td label { display: block; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.bang-du-lieu-khach-hang td label input { margin-right: 3px; }


/* Khung "Thông báo" cao thêm ~3 dòng trên điện thoại (Ông Paco chốt 11/09/2026) — đang để trống
   khoảng dưới trước khi chạm thanh menu, kéo dài khung gần sát menu hơn cho đẹp. CHỈ điện thoại,
   máy tính giữ nguyên 60vh như cũ. */
@media (max-width: 768px) {
  .ds-thong-bao { max-height: 78vh; }
}


/* Tăng cỡ chữ nội dung bên trong (Tin nhắn, Huấn luyện, Sản phẩm, Đơn hàng) trên điện thoại
   (Ông Paco chốt 13/09/2026) — chữ nội dung đang nhỏ, khó đọc trên màn hình bé. Tăng thêm khoảng
   2pt (~2.5px) so với cỡ gốc, CHỈ áp dụng điện thoại — máy tính giữ nguyên như cũ. Đặt SAU mọi
   khai báo gốc/khối @media khác trong file để chắc chắn thắng thế (luật đứng sau luôn thắng khi
   cùng độ ưu tiên). */
@media (max-width: 768px) {
  /* Tin nhắn — nội dung bong bóng chat + dòng xem trước tin nhắn mới nhất trong danh sách phiên. */
  .bong-tin-nhan-web p { font-size: 16.5px; }
  .tin-nhan-moi-nhat-phien { font-size: 14px; }
  /* Huấn luyện — nội dung câu hỏi/câu trả lời đã dạy. */
  .dong-hoi-dap p { font-size: 16.5px; }
  /* Sản phẩm — mô tả rút gọn trên thẻ sản phẩm. */
  .mo-ta-san-pham { font-size: 15px; }
  /* Đơn hàng — nội dung thẻ đơn hàng + tiêu đề thẻ + bảng "Dữ liệu khách hàng" (dùng chung khung
     bảng với Huấn luyện hàng loạt nên tăng ở đây áp dụng cho cả 2 nơi). */
  .the-don-hang-noi-dung { font-size: 15px; }
  .the-don-hang .the-card-dau strong { font-size: 16px; }
  .bang-xem-truoc-hang-loat table { font-size: 15px; }
  /* Thông báo — nội dung từng dòng trong danh mục thông báo (Ông Paco báo thêm 13/09/2026). */
  .dong-thong-bao { font-size: 15.5px; }
}

/* Cho phép bôi đen/chọn chữ dễ dàng trong các khung nội dung trên (Ông Paco báo bôi đen để copy
   đang khó, không mượt như app khác, 13/09/2026) — khai rõ user-select: text (thay vì để mặc
   định/kế thừa) để chắc chắn trình duyệt/app điện thoại luôn cho phép chạm-giữ để chọn chữ. */
.bong-tin-nhan-web p,
.dong-hoi-dap p,
.mo-ta-san-pham,
.the-don-hang-noi-dung,
.bang-xem-truoc-hang-loat td {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}


/* Tăng thêm 2pt (~2.5px) nữa cho TOÀN BỘ chữ trên điện thoại (Ông Paco chốt 13/09/2026, sau khi
   xem lại bản đã tải lên — đợt trước tăng vài chỗ riêng lẻ vẫn chưa đủ, lần này tăng đều khắp
   giao diện điện thoại). CHỈ áp dụng điện thoại — máy tính giữ nguyên như cũ. Đặt SAU CÙNG file
   để chắc chắn thắng thế mọi khai báo/khối @media phía trên (luật đứng sau luôn thắng khi cùng
   độ ưu tiên) — không sửa trực tiếp các khối cũ để khỏi lẫn lộn, chỉ ghi đè thêm ở đây. */
@media (max-width: 768px) {
  /* Header trên cùng + thanh quay lại trang riêng */
  .nut-quay-lai-chung .mui-ten-quay-lai-chung { font-size: 26.5px; }
  .nut-quay-lai-chung .tieu-de-quay-lai-chung { font-size: 18.5px; }
  /* .chuoi-quang-cao .muc-quang-cao — cỡ chữ giờ Cấp 1 tự chỉnh được (xem khai báo gốc phía trên file), gỡ khai riêng điện thoại ở đây (đợt sửa 13/09/2026). */

  /* Thẻ card (công ty/hạng mục/sản phẩm/đơn hàng...) + số liệu thống kê */
  .the-cong-ty strong, .the-card-dau strong { font-size: 18.5px; }
  .the-cong-ty-so-lieu span, .the-card-so-lieu span { font-size: 13.5px; }
  .the-card-nut button, .nut-xem-them-cong-ty, .nut-vao-xem-nhan-vien { font-size: 14px; }
  .the-phien-lam-viec-lon .the-card-dau strong { font-size: 16.5px; }
  .the-thong-ke .so-thong-ke { font-size: 26.5px; }
  .nut-chay-thu, .nut-mau-cau-tra-loi, .nut-cai-dat-ket-noi { font-size: 13.5px; }

  /* Danh sách khách/hội thoại (Bot AI) */
  .the-1-hang.phien .the-1-hang-ten { font-size: 18px; }
  .the-1-hang.phien .the-1-hang-tin-nhan { font-size: 15px; }
  .the-1-hang.phien .the-1-hang-trang-thai { font-size: 14.5px; }
  .the-1-hang.phien .the-1-hang-nut { font-size: 14.5px; }

  /* Menu trái + chân menu tài khoản */
  .tieu-de-muc-menu { font-size: 18.5px; }
  .danh-sach-muc-con .hop-muc-menu-con .tieu-de-muc-menu { font-size: 17.5px; }
  .muc-con { font-size: 18px; }
  .nut-bat-tat { font-size: 12.5px; }
  .nut-vao-nhu-cap2 { font-size: 13.5px; }
  .thong-tin-tai-khoan-chan button { font-size: 14px; }

  /* Thanh menu dưới cùng */
  .mdd-nut { font-size: clamp(14.5px, 3.2vw, 16.5px); }
  .mdd-huy-hieu { font-size: 12.5px; }
  .mdd-nut .mdd-icon { font-size: clamp(23.5px, 5.6vw, 27.5px); }

  /* Danh mục Thông báo — bộ lọc, nút hành động, từng dòng thông báo */
  .chip-loc-thong-bao { font-size: 16px; }
  .nut-hanh-dong-thong-bao { font-size: 15.5px; }
  .dong-thong-bao { font-size: 18px; }
  .dong-cai-dat-rieng { font-size: 17px; }

  /* Giao diện Tin nhắn — thanh đầu khung chat, nhãn người gửi, ô nhập, nội dung tin nhắn */
  .khung-chi-tiet-phien-chat-web-dau { font-size: 15.5px; }
  .khung-chi-tiet-phien-chat-web-dau button { font-size: 14.5px; }
  .bong-tin-nhan-web-nhan { font-size: 13.5px; }
  .khung-nhap-chat input { font-size: 18.5px; }
  .bong-tin-nhan-web p { font-size: 19px; }
  .tin-nhan-moi-nhat-phien { font-size: 16.5px; }

  /* Huấn luyện AI, Sản phẩm, Đơn hàng, bảng dữ liệu */
  .dong-hoi-dap p { font-size: 19px; }
  .mo-ta-san-pham { font-size: 17.5px; }
  .the-don-hang-noi-dung { font-size: 17.5px; }
  .the-don-hang .the-card-dau strong { font-size: 18.5px; }
  .bang-xem-truoc-hang-loat table { font-size: 17.5px; }
}

/* ----- "Cấu hình phong cách" — thẻ chọn Phong cách + danh sách Bổ sung riêng (13/09/2026) ----- */
.ds-phong-cach { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.the-phong-cach {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; background: #fff;
}
.the-phong-cach.dang-chon { border-color: #2563eb; background: #eff6ff; }
.the-phong-cach.chua-co-noi-dung { opacity: 0.6; }
.the-phong-cach-ten { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.the-phong-cach-mo-ta { font-size: 13.5px; color: #4b5563; margin-bottom: 8px; }
.the-phong-cach-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.the-phong-cach-nut button {
  padding: 6px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff;
  color: #374151; font-size: 12.5px; cursor: pointer;
}
.the-phong-cach-nut .nut-chon-phong-cach { border-color: #2563eb; background: #2563eb; color: #fff; }
.the-phong-cach-nut button:disabled { cursor: not-allowed; opacity: 0.6; }
#formBoSungPhongCach { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
#formBoSungPhongCach textarea {
  padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 14px;
}
#formBoSungPhongCach button {
  align-self: flex-start; padding: 7px 16px; border: none; border-radius: 6px;
  background: #2563eb; color: #fff; cursor: pointer; font-size: 13.5px;
}