/* GIAO DIỆN MÁY TÍNH / LAPTOP MỚI - dựng lại theo bản điện thoại.
   ===========================================================================
   Chỉ có hiệu lực khi <html> mang lớp .pc-moi (base_site.html đặt khi màn
   rộng từ 900px và KHÔNG phải app điện thoại). Bản điện thoại (.la-webapp) và
   màn hẹp không bị đụng tới chút nào.

   Bố cục:
     ┌──────────┬─────────────────────────────────────────────┐
     │ THANH BÊN│  THANH TRÊN: lời chào · ô tìm · 📷           │
     │ (kính)   ├─────────────────────────────────────────────┤
     │ mục      │  đường dẫn                                   │
     │ trạm     │  NỘI DUNG TRANG (rộng hết phần còn lại)      │
     │ ♥ yêu    │                                              │
     │ thích    │                                              │
     │ 👤 người │                                              │
     └──────────┴─────────────────────────────────────────────┘
   - Thanh bên = mục thanh đáy + ô trang chủ + menu ⋯ (Mục yêu thích) + 👤 của
     điện thoại (templates/admin/_pc_ben.html).
   - Thanh trên = CHÍNH thanh trên của điện thoại (.app-tren: ô tìm toàn hệ
     thống, nút 📷 tìm theo ảnh) - dùng lại nguyên thẻ, chỉ đổi dáng ở đây.
   - 👤 mở đúng bảng "Cá nhân" của điện thoại (.app-sheet), ở đây thành bảng
     nổi cạnh góc dưới thanh bên.
   - Bỏ dải tiêu đề + thanh bên » của Django admin (#header, #nav-sidebar).
   Màu theo biến của Liquid Glass (--kinh-*, --nm-*) nên tự theo sáng / tối và
   theo thanh trượt mức kính.
   =========================================================================== */

.pc-ben { display: none; }

html.pc-moi {
  --pc-le: 14px;                     /* khoảng hở quanh thanh bên / thanh trên */
  --pc-ben: 260px;                   /* bề rộng thanh bên */
  --pc-tren: 60px;                   /* chiều cao thanh trên */
  --pc-trai: calc(var(--pc-ben) + var(--pc-le) * 2);
}

/* --- Bỏ khung cũ của Django admin + những thứ chỉ dành cho điện thoại ----- */
html.pc-moi body:not(.login) #header,
html.pc-moi #nav-sidebar,
html.pc-moi #toggle-nav-sidebar,
html.pc-moi .app-duoi .app-nav,
html.pc-moi #app-menu-khoi,
html.pc-moi .app-tren-menu,
html.pc-moi .app-tren-ca-nhan { display: none !important; }

/* --- Chừa chỗ cho thanh bên + thanh trên --------------------------------- */
html.pc-moi body:not(.login) #container {
  padding-left: var(--pc-trai);
  padding-top: calc(var(--pc-tren) + var(--pc-le) * 2);
  box-sizing: border-box;
  min-height: 100vh;
}
html.pc-moi body:not(.login) #main { display: block; }
html.pc-moi body:not(.login) #content-start { width: 100%; }
/* Django trừ chỗ cho thanh bên » (đã ẩn) bằng luật có id - `.main >
   #nav-sidebar + .content { max-width: calc(100% - 23px / 299px) }` - nên
   phải nêu đúng #nav-sidebar mới thắng, không thì nội dung hụt 23px so với
   mép phải thanh trên. */
html.pc-moi body:not(.login) .main > #nav-sidebar + .content,
html.pc-moi body:not(.login) .main.shifted > #nav-sidebar + .content { max-width: none; }
/* .main > .content là #content-start BỌC NGOÀI #content: đệm chỉ đặt ở một
   lớp (#content), đặt cả hai là mép phải hụt gấp đôi. */
html.pc-moi body:not(.login) .main > .content { padding: 0 !important; }
html.pc-moi body:not(.login) #content,
html.pc-moi body:not(.login) .main > .content {
  /* KHÔNG ghim bề rộng: mép trái / phải của nội dung THẲNG HÀNG với thanh
     trên (ô tìm kiếm) - người dùng yêu cầu mọi trang bung bằng thanh ấy.
     Thanh trên nằm từ --pc-trai tới cách mép phải --pc-le. */
  max-width: none;
  margin: 0;
  padding: 4px var(--pc-le) 40px 0;
  box-sizing: border-box;
}

/* =========================================================================
   THANH BÊN
   ========================================================================= */
html.pc-moi body:not(.login) .pc-ben {
  display: flex; flex-direction: column;
  position: fixed; z-index: 45;
  top: var(--pc-le); bottom: var(--pc-le); left: var(--pc-le);
  width: var(--pc-ben); box-sizing: border-box;
  padding: 14px 10px 10px;
  border-radius: 26px;
  background: var(--kinh-thanh, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: var(--kinh-mo, blur(24px) saturate(180%));
  backdrop-filter: var(--kinh-mo, blur(24px) saturate(180%));
  border: 1px solid var(--kinh-vien, rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 1px 0 var(--kinh-mep, rgba(255, 255, 255, 0.75)),
              0 12px 34px rgba(15, 23, 42, 0.12);
}
.pc-ben-hieu {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 10px 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(127, 145, 170, 0.2);
  text-decoration: none !important; color: var(--nm-ink, #1f2a3a) !important;
}
.pc-ben-hieu img {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--nm-nut-giua, #fff);
}
.pc-ben-hieu span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pc-ben-hieu b { font-size: 15.5px; font-weight: 800; letter-spacing: 0.02em; }
.pc-ben-hieu small { font-size: 11.5px; color: var(--nm-ink-soft, #64748b); }

/* Danh sách cuộn được khi nhiều trạm / nhiều tài liệu yêu thích. */
.pc-ben-ds {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 2px; margin: 0 -2px;
  scrollbar-width: thin;
}
.pc-nhom {
  padding: 14px 12px 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--nm-ink-soft, #64748b);
}
.pc-muc {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 13px;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--nm-ink, #1f2a3a) !important; text-decoration: none !important;
  transition: background 0.15s ease;
}
.pc-muc > span:not(.pc-muc-icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-muc:hover { background: rgba(127, 145, 170, 0.14); }
.pc-muc.pc-chon {
  background: #2563eb;              /* cố định: --nm-accent ở nền tối là xanh nhạt, chữ trắng không đọc được */
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}
.pc-muc-icon {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
}
.pc-muc-icon img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.pc-cham { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #94a3b8; }
.pc-cham-tot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.pc-cham-mat { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

/* Mục yêu thích trong thanh bên: cùng thẻ với menu ⋯ điện thoại, gọn lại. */
.pc-ben-yt { margin-top: 12px; }
.pc-ben .app-yt-dau {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 13px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--nm-ink, #1f2a3a);
  background: rgba(127, 145, 170, 0.10);
}
.pc-ben .app-yt-dau::-webkit-details-marker { display: none; }
.pc-ben .app-yt-dau:hover { background: rgba(127, 145, 170, 0.18); }
.pc-ben .app-yt-tim { color: #ef4444; width: 24px; text-align: center; font-size: 16px; }
.pc-ben .app-yt-ten { flex: 1; }
.pc-ben .app-yt-so {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; box-sizing: border-box;
  text-align: center; font-size: 11.5px; font-weight: 800; color: #fff; background: #ef4444;
}
.pc-ben .app-yt-mui { width: 16px; height: 16px; color: var(--nm-ink-soft, #64748b); transition: transform 0.2s ease; }
.pc-ben .app-yt[open] .app-yt-mui { transform: rotate(90deg); }
.pc-ben .app-yt-ds { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pc-ben .app-yt-dong { position: relative; border-radius: 12px; }
.pc-ben .app-yt-mo {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 38px 7px 12px; border-radius: 12px;
  text-decoration: none !important; color: var(--nm-ink, #1f2a3a) !important;
}
.pc-ben .app-yt-mo:hover { background: rgba(127, 145, 170, 0.14); }
.pc-ben .app-yt-icon { font-size: 17px; width: 24px; text-align: center; flex: none; }
.pc-ben .app-menu-chu { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pc-ben .app-menu-chu b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ben .app-menu-chu small { font-size: 11px; color: var(--nm-ink-soft, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Máy tính: không vuốt - nút × nhỏ hiện khi rê chuột vào dòng. */
.pc-ben .app-yt-xoa {
  position: absolute; z-index: 2; top: 50%; right: 6px; left: auto; bottom: auto;
  width: 26px; height: 26px; margin-top: -13px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(220, 38, 38, 0.12); color: #dc2626;
  visibility: visible; opacity: 0; transition: opacity 0.15s ease;
}
.pc-ben .app-yt-xoa span { display: none; }
.pc-ben .app-yt-xoa svg { width: 15px; height: 15px; }
.pc-ben .app-yt-dong:hover .app-yt-xoa,
.pc-ben .app-yt-xoa:focus-visible { opacity: 1; }
.pc-ben .app-yt-xoa:hover { background: #dc2626; color: #fff; }
.pc-ben .app-menu-trong,
.pc-ben .app-yt-goi { margin: 6px 12px; font-size: 12px; color: var(--nm-ink-soft, #64748b); }
.pc-ben .app-yt-goi { display: none; }
.pc-ben .app-yt-trong[hidden] { display: none; }

/* Chân thanh bên: phân quyền + thẻ người dùng (mở bảng Cá nhân). */
.pc-ben-cuoi {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px; border-top: 1px solid rgba(127, 145, 170, 0.2);
}
.pc-nguoi {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 14px; cursor: pointer;
  color: var(--nm-ink, #1f2a3a);
}
.pc-nguoi:hover { background: rgba(127, 145, 170, 0.14); }
.pc-nguoi-anh {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.pc-nguoi-ten { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pc-nguoi-ten b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nguoi-ten small { font-size: 11.5px; color: var(--nm-ink-soft, #64748b); }
.pc-nguoi svg { width: 16px; height: 16px; flex: none; color: var(--nm-ink-soft, #64748b); }

/* =========================================================================
   THANH TRÊN - dùng lại .app-tren của điện thoại
   ========================================================================= */
html.pc-moi body:not(.login) .app-tren {
  display: block;
  position: fixed; z-index: 44;
  top: var(--pc-le); left: var(--pc-trai); right: var(--pc-le);
  height: var(--pc-tren); box-sizing: border-box;
  margin: 0; padding: 0;
  border-radius: 22px;
  background: var(--kinh-thanh, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: var(--kinh-mo, blur(24px) saturate(180%));
  backdrop-filter: var(--kinh-mo, blur(24px) saturate(180%));
  border: 1px solid var(--kinh-vien, rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 1px 0 var(--kinh-mep, rgba(255, 255, 255, 0.75)),
              0 10px 28px rgba(15, 23, 42, 0.10);
}
html.pc-moi .app-tren::before,
html.pc-moi .app-tren::after { display: none !important; }
html.pc-moi .app-tren-thanh {
  display: flex; align-items: center; gap: 14px;
  height: 100%; padding: 0 12px 0 22px; box-sizing: border-box;
}
/* Lời chào bên trái, ô tìm ở giữa, 📷 bên phải. */
html.pc-moi .app-tren-dan {
  order: 1; flex: 0 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; font-weight: 700; color: var(--nm-ink, #1f2a3a);
}
html.pc-moi .app-tren-evn { height: 1.15em; width: auto; vertical-align: -0.15em; border-radius: 50%; background: #fff; }
html.pc-moi .app-tren-tim {
  order: 2; flex: 1 1 auto;
  display: flex; align-items: center;
  max-width: 640px; height: 42px; margin-left: auto;
  padding: 0 6px 0 4px; box-sizing: border-box;
  border-radius: 999px;
  background: var(--nm-light, rgba(255, 255, 255, 0.8));
  border: 1px solid rgba(127, 145, 170, 0.28);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
html.pc-moi .app-tren-tim:focus-within { border-color: var(--nm-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
html.pc-moi .app-tren-mo,
html.pc-moi .app-tren-dong { display: none !important; }
html.pc-moi .app-tren-gui {
  display: grid !important; place-items: center;
  width: 34px; height: 34px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: none; box-shadow: none;
  font-size: 16px; cursor: pointer;
}
html.pc-moi .app-tren-o {
  flex: 1; min-width: 0; height: 100%;
  border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important;
  font: inherit; font-size: 15px; color: var(--nm-ink, #1f2a3a);
  padding: 0 8px;
}
html.pc-moi .app-tren-nut.app-camera {
  order: 3; flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  color: var(--nm-ink, #1f2a3a);
  background: var(--nm-light, rgba(255, 255, 255, 0.8));
  border: 1px solid rgba(127, 145, 170, 0.28);
}
html.pc-moi .app-tren-nut.app-camera:hover { background: var(--nm-accent, #2563eb); color: #fff; }
html.pc-moi .app-camera svg { width: 21px; height: 21px; display: block; }

/* Hỏi AI: trang chat tự có thanh đầu riêng - như điện thoại, bỏ thanh trên,
   khung chat dùng trọn chiều cao bên phải thanh bên. */
html.pc-moi body.trang-hoi-ai .app-tren { display: none !important; }
html.pc-moi body.trang-hoi-ai #container { padding-top: var(--pc-le); }
html.pc-moi body.trang-hoi-ai nav[aria-label] > .breadcrumbs,
html.pc-moi body.trang-hoi-ai div.breadcrumbs { display: none !important; }

/* --- Đường dẫn (Trang chủ › ...) -------------------------------------------- */
html.pc-moi body:not(.login) nav[aria-label] > .breadcrumbs,
html.pc-moi body:not(.login) div.breadcrumbs {
  margin: 0 0 6px; padding: 2px 6px 10px;
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-size: 13px; color: var(--nm-ink-soft, #64748b);
}

/* =========================================================================
   BẢNG CÁ NHÂN - bảng nổi cạnh thẻ người dùng ở chân thanh bên
   ========================================================================= */
html.pc-moi .app-sheet-nen {
  display: block; position: fixed; inset: 0; z-index: 60;
  background: transparent; visibility: hidden;
}
html.pc-moi .app-mo-sheet:checked ~ .app-sheet-nen { visibility: visible; }
html.pc-moi .app-sheet {
  display: block; position: fixed; z-index: 61;
  left: calc(var(--pc-le) + 8px); bottom: calc(var(--pc-le) + 66px);
  width: 340px; max-height: calc(100vh - 120px); overflow-y: auto;
  box-sizing: border-box; padding: 6px 12px 12px;
  border-radius: 22px;
  /* ĐẶC MÀU: bảng nổi đè lên thanh bên và nội dung - trong suốt là chữ hai
     lớp lẫn vào nhau, không đọc được. */
  background: #f6f9fd;
  border: 1px solid rgba(127, 145, 170, 0.25);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
html.pc-moi .app-mo-sheet:checked ~ .app-sheet { opacity: 1; visibility: visible; transform: none; }
html.pc-moi[data-theme="dark"] .app-sheet { background: #1c2230; border-color: rgba(255, 255, 255, 0.1); }
@media (prefers-color-scheme: dark) {
  html.pc-moi[data-theme="auto"] .app-sheet { background: #1c2230; border-color: rgba(255, 255, 255, 0.1); }
}
html.pc-moi .app-sheet-dau { display: flex; align-items: center; gap: 12px; padding: 12px 6px 6px; position: relative; }
html.pc-moi .app-sheet-ten { flex: 1; font-size: 15px; font-weight: 700; color: var(--nm-ink, #1f2a3a); }
html.pc-moi .app-sheet-dong {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 18px; line-height: 1; color: var(--nm-red, #dc2626);
  background: rgba(127, 145, 170, 0.14);
}
html.pc-moi .app-nhom {
  padding: 12px 8px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--nm-ink-soft, #64748b);
}
html.pc-moi .app-dong {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 4px; padding: 10px 14px; box-sizing: border-box;
  border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px;
  color: var(--nm-ink, #1f2a3a) !important; text-decoration: none !important;
  background: rgba(127, 145, 170, 0.10); box-shadow: none;
}
html.pc-moi .app-dong:hover { background: rgba(127, 145, 170, 0.20); }
html.pc-moi .app-dong-icon { font-size: 17px; line-height: 1; flex: none; }
html.pc-moi .app-dong-ten { flex: 1; }
html.pc-moi .app-dong-mui { font-size: 18px; line-height: 1; color: var(--nm-ink-soft, #64748b); }
html.pc-moi .app-dong-thoat { color: var(--nm-red, #dc2626) !important; }
html.pc-moi .app-sheet .kinh-ghi-chu { font-size: 12px; margin: 4px 8px 8px; color: var(--nm-ink-soft, #64748b); }

/* Màn laptop hẹp (900-1180px): thanh bên gọn hơn. */
@media (max-width: 1180px) {
  html.pc-moi { --pc-ben: 224px; }
  html.pc-moi .app-tren-dan { display: none; }
}

/* =========================================================================
   TRANG CHỦ (máy tính)
   -------------------------------------------------------------------------
   Ba tầng, từ trên xuống:
     1. TỔ MÁY   - bốn ô công suất / tốc độ trải hết bề ngang;
     2. ỨNG DỤNG - các ô (Kho tài liệu, PXSC PLC, CCDC, Mã KKS, trạm...) thành
                   THẺ NGANG: biểu tượng bên trái, tên + trạng thái bên phải -
                   gọn hơn ô vuông 168px, nhiều thẻ một hàng mà không trống;
     3. HOẠT ĐỘNG GẦN ĐÂY + danh sách Core của admin.
   Màn rất rộng (từ 1560px) thì "Hoạt động gần đây" thành cột phải cạnh tầng 2.
   Bản cũ để cột phải ở MỌI cỡ màn: laptop có phóng to chữ (125-175%) là tầng
   tổ máy bị bóp còn 4 cột hẹp, chữ "Tổ máy 1" gãy ba dòng, các ô một cột.
   ========================================================================= */
/* Django ghim .dashboard #content ở 600px (base.css). */
html.pc-moi .dashboard #content {
  width: auto; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start;
}
html.pc-moi .dashboard #content > * { grid-column: 1; min-width: 0; }
html.pc-moi .dashboard #content > .dash-tuabin { order: 1; }
html.pc-moi .dashboard #content > .dash-luoi { order: 2; }
html.pc-moi .dashboard #content-related { order: 3; }
html.pc-moi .dashboard #content-main { order: 4; }
html.pc-moi .dashboard #content-main { float: none; width: auto; }
html.pc-moi .dashboard #content-related { float: none; width: auto; margin: 0; position: static; }
html.pc-moi .dashboard .colMS { margin-right: 0; }

/* Tên tầng (TỔ MÁY / ỨNG DỤNG & TRẠM / HOẠT ĐỘNG) - nhãn nhỏ như thanh bên. */
html.pc-moi .dashboard #content > .dash-tuabin::before,
html.pc-moi .dashboard #content > .dash-luoi::before,
html.pc-moi .dashboard #content-related > .dash-luoi::before {
  grid-column: 1 / -1; margin: 0 0 -4px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--nm-ink-soft, #64748b);
}
/* "Tổ máy · vận hành" nay là thẻ thật (.dash-tb-tieu, có nút "+") - không dựng bằng ::before. */
html.pc-moi .dashboard #content > .dash-luoi::before { content: "Ứng dụng & trạm"; }
html.pc-moi .dashboard #content-related > .dash-luoi::before { content: "Hoạt động"; }

/* --- 1. Tổ máy: luôn BỐN ô một hàng (đúng bốn thông số), màn hẹp mới 2x2 - */
html.pc-moi .dashboard #content > .dash-tuabin {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin: 2px 0 26px;
}
@media (max-width: 1020px) {
  html.pc-moi .dashboard #content > .dash-tuabin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.pc-moi .dashboard .dash-tb-o { aspect-ratio: auto; min-height: 150px; padding: 16px 18px 14px; }
html.pc-moi .dashboard .dash-tb-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
html.pc-moi .dashboard .dash-tb-gt { font-size: 34px; }

/* --- 2. Ứng dụng & trạm: thẻ ngang ------------------------------------------ */
html.pc-moi .dashboard #content > .dash-luoi,
html.pc-moi .dashboard #content-related > .dash-luoi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px; margin: 0 0 26px;
}
html.pc-moi .dashboard #content > .dash-luoi > .dash-muc,
html.pc-moi .dashboard #content > .dash-luoi > .dash-o-boc,
html.pc-moi .dashboard #content-related > .dash-luoi > .dash-muc { display: flex; flex-direction: column; min-width: 0; }
html.pc-moi .dashboard #content > .dash-luoi > .dash-muc[open],
html.pc-moi .dashboard #content-related > .dash-luoi > .dash-muc[open] { grid-column: 1 / -1; }
/* Ô = lưới hai cột: biểu tượng (chiếm hai hàng) | tên / trạng thái. Nút 🔒 ✎
   vốn định vị tuyệt đối ở góc phải trên - chừa lề phải cho chúng. */
html.pc-moi .dashboard #content > .dash-luoi .dash-o,
html.pc-moi .dashboard #content-related > .dash-luoi .dash-o {
  display: grid; grid-template-columns: 60px minmax(0, 1fr);
  grid-template-areas: "icon ten" "icon mo";
  column-gap: 16px; row-gap: 4px; align-content: center; justify-items: start;
  width: 100%; height: auto; min-height: 104px; box-sizing: border-box;
  padding: 18px 76px 18px 18px; text-align: left;
}
html.pc-moi .dashboard #content > .dash-luoi > .dash-o-boc > .dash-o { flex: 1 1 auto; }
html.pc-moi .dashboard .dash-luoi .dash-o > .dash-o-icon {
  grid-area: icon; width: 60px; height: 60px; margin: 0; font-size: 32px;
  display: grid; place-items: center;
}
html.pc-moi .dashboard .dash-luoi .dash-o > .dash-o-icon img { max-width: 40px; max-height: 40px; }
html.pc-moi .dashboard .dash-luoi .dash-o > .dash-o-ten {
  grid-area: ten; align-self: end; margin: 0;
  font-size: 15px; line-height: 1.25; text-align: left;
}
html.pc-moi .dashboard .dash-luoi .dash-o > .dash-o-mo {
  grid-area: mo; align-self: start; margin: 0;
  font-size: 12.5px; line-height: 1.35; text-align: left;
}
/* Mục đang mở (Kho tài liệu, Team PLC...): ẩn các mục mở/thu khác như điện
   thoại; nội dung bung ra (số liệu, ô con) cũng xếp lưới thẻ ngang. */
html.pc-moi .dashboard #content > .dash-luoi:has(> .dash-muc[open]) > .dash-muc:not([open]) { display: none; }
html.pc-moi .dashboard #content > .dash-luoi > .dash-muc[open] > .dash-o { min-height: 84px; }
html.pc-moi .dashboard .dash-noi-dung.dash-luoi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin: 16px 0 0;
}
html.pc-moi .dashboard .dash-noi-dung.dash-luoi::before { content: none; }
html.pc-moi .dashboard .dash-noi-dung.dash-luoi > .dash-o-boc { display: flex; }
html.pc-moi .dashboard .dash-noi-dung.dash-luoi > .dash-o-boc > .dash-o { flex: 1 1 auto; }
html.pc-moi .dashboard .nm-kpis.dash-noi-dung { margin-top: 16px; }

/* --- 3. Màn rất rộng: "Hoạt động gần đây" thành cột phải cạnh tầng 2 ------ */
@media (min-width: 1560px) {
  /* Xếp HÀNG TƯỜNG MINH: để lưới tự xếp thì cột phải chiếm hàng 1 trước,
     tầng tổ máy bị đẩy xuống dưới, chừa một khoảng trống to ở đầu trang. */
  html.pc-moi .dashboard #content { grid-template-columns: minmax(0, 1fr) 340px; }
  html.pc-moi .dashboard #content > .dash-tuabin { grid-column: 1 / -1; grid-row: 1; }
  html.pc-moi .dashboard #content > .dash-luoi { grid-column: 1; grid-row: 2; }
  html.pc-moi .dashboard #content-main { grid-column: 1; grid-row: 3; }
  html.pc-moi .dashboard #content-related {
    grid-column: 2; grid-row: 2 / span 2;
    position: sticky; top: calc(var(--pc-tren) + var(--pc-le) * 2);
  }
  html.pc-moi .dashboard #content-related > .dash-luoi { grid-template-columns: minmax(0, 1fr); }
}
html.pc-moi[data-theme="dark"] .pc-ben-ds { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
@media (prefers-color-scheme: dark) {
  html.pc-moi[data-theme="auto"] .pc-ben-ds { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
}
/* "Hoạt động gần đây" chỉ có nút ✎ (không có 🔒): lề phải hẹp hơn, tên khỏi gãy dòng. */
html.pc-moi .dashboard #content-related > .dash-luoi .dash-o { padding-right: 48px; }

/* =========================================================================
   CÁC TRANG KHÁC (máy tính)
   ========================================================================= */
/* --- Bỏ ô tìm RIÊNG của từng trang: thanh trên đã có ô tìm toàn hệ thống
   (tra cả tài liệu, thư mục, thiết bị, mã lỗi, CCDC, mã KKS...) - y như bản
   điện thoại (app-nav.css ẩn đúng ba ô này). Ô LỌC NGƯỜI DÙNG trong Bảng
   phân quyền / Giao đề thì giữ: nó lọc bảng đang mở, ô tìm chung không thay
   được. */
html.pc-moi .tl-timkiem,          /* Kho tài liệu */
html.pc-moi .tb-tim,              /* Hồ sơ thiết bị / bảng mã lỗi */
html.pc-moi .tk-tim { display: none !important; }   /* trang kết quả tìm kiếm */

/* --- Nội dung BUNG THEO BỀ NGANG màn máy tính -------------------------------
   Các khung trang từng ghim bề rộng cho vừa màn cũ (CCDC / Mã KKS 980px, Trắc
   nghiệm 900px, Giao việc 820px, Team PLC 1180px...) - màn rộng thì hai bên
   trống, nội dung dồn giữa. Nay dùng hết phần bên phải thanh bên; lưới bên
   trong tự thêm cột theo bề ngang. */
html.pc-moi .cc-trang,
html.pc-moi .tp-trang,
html.pc-moi .tb-trang,
html.pc-moi .tn-trang,
html.pc-moi .pq,
html.pc-moi .tp-form { max-width: none !important; margin-left: 0; margin-right: 0; }

/* Quản lý CCDC: 6 chức năng, ô đếm, biểu mẫu. */
html.pc-moi .cc-luoi { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
html.pc-moi .cc-so { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
html.pc-moi .cc-form-luoi { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 18px; }
/* Mã KKS: thẻ danh sách, khối 5 mục thông tin trang chi tiết. */
html.pc-moi .kks-ds { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
html.pc-moi .kks-tt { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Kho tài liệu: ô thư mục. */
html.pc-moi .tl-kv-luoi { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* Hỏi AI: khung chat 740px -> rộng hơn trên màn máy tính, vẫn chừa lề đọc. */
html.pc-moi .ai-trang { max-width: min(1100px, 100%); }

/* Team PLC (và mọi trang khác dùng ô .dash-luoi): thẻ ngang như trang chủ. */
html.pc-moi body:not(.dashboard) .dash-luoi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px; margin: 18px 0 24px;
}
html.pc-moi body:not(.dashboard) .dash-luoi > .dash-o-boc,
html.pc-moi body:not(.dashboard) .dash-luoi > .dash-muc { display: flex; flex-direction: column; min-width: 0; }
html.pc-moi body:not(.dashboard) .dash-luoi > .dash-o-boc > .dash-o { flex: 1 1 auto; }
html.pc-moi body:not(.dashboard) .dash-luoi .dash-o {
  display: grid; grid-template-columns: 60px minmax(0, 1fr);
  grid-template-areas: "icon ten" "icon mo";
  column-gap: 16px; row-gap: 4px; align-content: center; justify-items: start;
  width: 100%; height: auto; min-height: 104px; box-sizing: border-box;
  padding: 18px 76px 18px 18px; text-align: left;
}
html.pc-moi body:not(.dashboard) .dash-luoi .dash-o > .dash-o-icon {
  grid-area: icon; width: 60px; height: 60px; margin: 0; font-size: 32px; display: grid; place-items: center;
}
html.pc-moi body:not(.dashboard) .dash-luoi .dash-o > .dash-o-ten { grid-area: ten; align-self: end; margin: 0; font-size: 15px; text-align: left; }
html.pc-moi body:not(.dashboard) .dash-luoi .dash-o > .dash-o-mo { grid-area: mo; align-self: start; margin: 0; font-size: 12.5px; text-align: left; }