/* GIAO DIỆN PHẲNG (flat) - thay vẻ Liquid Glass / Neumorphism.
   ===========================================================================
   Theo mẫu người dùng gửi (lưới ứng dụng kiểu "Công dân số"):
     - nền sáng xanh nhạt, hình TRỐNG ĐỒNG mờ ở giữa (static/trong-dong-*.png,
       chế từ Logo/vector-trong-dong-7.jpg: giữ hoa văn, tô một màu, rất mờ);
     - mặt phẳng ĐẶC MÀU, không làm mờ kính, bóng đổ rất nhẹ;
     - ô ứng dụng = KHỐI VUÔNG TRẮNG bo góc chứa biểu tượng, TÊN NẰM DƯỚI ô,
       xếp lưới (điện thoại 4 cột).
   Nạp SAU liquid-glass.css + pc.css. Làm phẳng chủ yếu bằng cách ĐẶT LẠI các
   biến mà hai tệp ấy dùng (--kinh-*, --nm-*), nên mọi thanh / bảng / thẻ đổi
   theo một lượt; phần ô ứng dụng mới viết luật riêng (có !important vì đè
   bố cục ô cũ ở nhiều chỗ: dashboard.css, pc.css).
   =========================================================================== */

/* --- 1. Bảng màu phẳng -----------------------------------------------------
   PHẢI nêu cả [data-theme="light"]: liquid-glass.css khai bộ biến nền sáng
   bằng `html:root[data-theme="light"]` - mạnh hơn `html:root`, viết thiếu là
   ở nền sáng mọi biến phẳng (kể cả hình trống đồng) bị đè mất (đã gặp thật).

   KHÔNG đụng các biến của THANH TRÊN / THANH ĐÁY (--kinh-thanh, --kinh-mo,
   --kinh-mep, --nm-thanh*, --kinh-muc): người dùng muốn hai thanh và các nút
   trên đó GIỮ NGUYÊN Liquid Glass, còn mọi trang / menu / bảng thì phẳng.
   Các bảng nổi dùng chung biến kính (Cá nhân, menu ⋯, thanh bên máy tính)
   làm phẳng riêng ở mục 1b. */
html:root,
html:root[data-theme="light"] {
  /* NỀN SÁNG BE ẤM (người dùng chọn sau khi thử cả bốn màu): giống màu giấy,
     hợp trống đồng đỏ vàng, bớt vẻ "kỹ thuật". Sau đó người dùng muốn ĐẬM
     HƠN một nấc - cả nền, ô vuông biểu tượng, thanh trên / dưới (bản be nhạt
     trước: nền #f7efe1 -> #ecdec5, thẻ #fffaf1, ô #fbf1e1, viền ô #e6cfa8,
     thanh #f2e5cc -> #fbf5ea). Thẻ kem, nền be, trống đồng tô
     đỏ nâu (trong-dong-be.png), tiêu đề nâu đỏ; chữ giữ xanh đen cho rõ.
     Ô vuông biểu tượng (--phang-o-ic), thanh trên chứa 🔍 và DẢI GIỜ / PIN của
     iPhone (--nm-thanh*, cùng bảng _MAU_THANH ở dashboard_tags.py) cũng be.
     Các bản đã thử (đổi lại chỉ cần thay các số dưới):
       - xám xanh: nền #edf0f4 -> #dde3ea, thẻ #f7f9fb, viền #d6dde6,
         tiêu đề #2f4b66, nhấn #3d6b98, ảnh trong-dong-xam.png;
       - xanh ngọc: nền #e2f5ef -> #cfebe3, thẻ #f1fbf8, viền #c5e6dd,
         tiêu đề #0e6f68, nhấn #0e8f84, ảnh trong-dong-ngoc.png;
       - xanh nhạt: nền #e4eefa -> #d6e5f6, thẻ #f3f8fe, viền #cfdff1,
         tiêu đề #12599a, nhấn #2563eb, ảnh trong-dong-sang.png. */
  --phang-o: #f9efdc;                          /* mặt ô / thẻ: kem */
  --phang-o-ic: #f1dfbd;                       /* ô vuông chứa biểu tượng: be đậm hơn thẻ */
  --phang-o-menu: rgba(249, 239, 220, .65);    /* thẻ chữ nhật trong menu ⋯: trong ~35%, thấy trống đồng */
  /* Ô / thẻ ở MỌI TRANG: CÙNG MỘT MÀU BE ĐẬM, hơi trong (~15%) cho thấy nền
     phía sau - ô vuông biểu tượng, ô tổ máy, thẻ chữ nhật kiểu "Hoạt động gần
     đây" và nội dung sổ xuống, khối nội dung các trang (--nm-bg / --nm-surface
     mà neumorphism.css và CSS từng trang dùng). Người dùng giảm dần độ trong:
     45% -> 25% -> 15%. Bảng nổi (Cá nhân, khung đồ thị... mục 1b) giữ đặc. */
  --phang-o-trong: rgba(241, 223, 189, .85);
  --phang-o-ic-trong: rgba(241, 223, 189, .85);
  --phang-vien-ic: #d4b17c;                    /* viền ô biểu tượng */
  --phang-vien: #dfc69c;                       /* viền mảnh be */
  --phang-bong: 0 1px 2px rgba(90, 55, 20, .10), 0 3px 10px rgba(90, 55, 20, .09);
  --phang-nhan: #8a3412;                       /* chữ tiêu đề nhóm: nâu đỏ đồng */
  --phang-nhan-nut: #b4532a;                   /* nút "+", mục đang chọn: đất nung */
  --phang-nut-mau: #b4532a;                    /* nút "+" kính phẳng: màu dấu + và ánh kính */
  /* Mặt GƯƠNG của bảng Cá nhân (như menu ⋯ mục 6): hoa văn trống đồng + be trong. */
  --phang-guong:
    url("/static/trong-dong-be.png") center 46% / 540px no-repeat,
    rgba(242, 229, 202, .88);
  /* Khung đồ thị: đục hơn gương ~20% (lớp phủ trên hoa văn + nền dày hơn) -
     chỉ thấy MỜ hình nền, đường đồ thị nổi rõ (người dùng). Nền dưới cùng
     ĐỤC HẲN: lớp phủ không còn làm mờ trang (mục 14b), nền còn trong một
     chút là chữ trang phía sau lộ qua thành bóng sắc nét. */
  --phang-guong-dt:
    linear-gradient(rgba(242, 229, 202, .20), rgba(242, 229, 202, .20)),
    url("/static/trong-dong-be.png") center 46% / 540px no-repeat,
    rgb(242, 229, 202);

  --nm-bg: rgba(241, 223, 189, .85);
  --nm-surface: rgba(241, 223, 189, .85);
  --nm-light: #fcf5e8;
  --nm-dark: #dcc59c;
  --nm-out: var(--phang-bong);
  --nm-out-sm: var(--phang-bong);
  --nm-in-sm: inset 0 0 0 1px var(--phang-vien);
  --nm-in: inset 0 0 0 1px var(--phang-vien);
  --kinh-bang: #f9efdc;
  --kinh-hop: #f9efdc;
  --kinh-vien: var(--phang-vien);
  /* Thanh trên + dải giờ (màu ĐẶC - xem liquid-glass.css, plcDongBoMauThanh). */
  --nm-thanh: #eddcba;
  --nm-thanh-0: #e9d6b1;
  --nm-thanh-1: #f2e4c8;
  --kinh-nen:
    url("/static/trong-dong-be.png") center 58% / min(118vmin, 1000px) no-repeat,
    linear-gradient(180deg, #efe1c5 0%, #e0c9a1 100%);
  /* Màu ĐÁY của --kinh-nen: tô <html> trang đăng nhập (dang-nhap.css) để
     dải iOS bỏ trống dưới đáy lúc khung hụt cũng liền màu với nền. */
  --phang-nen-day: #e0c9a1;
}
/* Nền tối: cùng kiểu trong như nền sáng (người dùng), rồi trong thêm 5% -
   thẻ / ô ~20%, dòng menu ⋯ ~40%; bảng nổi (--phang-o, --kinh-bang, --kinh-hop) giữ đặc. */
html:root[data-theme="dark"] {
  --phang-o: #1b2333;
  --phang-o-ic: #1b2333;
  --phang-o-menu: rgba(27, 35, 51, .60);
  --phang-o-trong: rgba(27, 35, 51, .80);
  --phang-o-ic-trong: rgba(27, 35, 51, .80);
  --phang-nut-mau: #5aa2ff;
  --phang-guong:
    url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
    rgba(17, 24, 39, .86);
  --phang-guong-dt:
    linear-gradient(rgba(17, 24, 39, .20), rgba(17, 24, 39, .20)),
    url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
    rgb(17, 24, 39);
  --phang-vien-ic: rgba(255, 255, 255, .08);
  --phang-vien: rgba(255, 255, 255, .08);
  --phang-bong: 0 1px 2px rgba(0, 0, 0, .35);
  --phang-nhan: #8cc4ff;

  --nm-bg: rgba(27, 35, 51, .80);
  --nm-surface: rgba(27, 35, 51, .80);
  --nm-light: #232d41;
  --nm-dark: rgba(255, 255, 255, .08);
  --kinh-bang: #1b2333;
  --kinh-hop: #1b2333;
  --kinh-vien: var(--phang-vien);
  --kinh-nen:
    url("/static/trong-dong-toi.png") center 58% / min(118vmin, 1000px) no-repeat,
    linear-gradient(180deg, #111827 0%, #0c1220 100%);
  --phang-nen-day: #0c1220;
}
@media (prefers-color-scheme: dark) {
  html:root[data-theme="auto"] {
    --phang-o: #1b2333;
    --phang-o-ic: #1b2333;
    --phang-o-menu: rgba(27, 35, 51, .60);
    --phang-o-trong: rgba(27, 35, 51, .80);
    --phang-o-ic-trong: rgba(27, 35, 51, .80);
    --phang-nut-mau: #5aa2ff;
    --phang-guong:
      url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
      rgba(17, 24, 39, .86);
    --phang-guong-dt:
      linear-gradient(rgba(17, 24, 39, .20), rgba(17, 24, 39, .20)),
      url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
      rgb(17, 24, 39);
    --phang-vien-ic: rgba(255, 255, 255, .08);
    --phang-vien: rgba(255, 255, 255, .08);
    --phang-bong: 0 1px 2px rgba(0, 0, 0, .35);
    --phang-nhan: #8cc4ff;
    --nm-bg: rgba(27, 35, 51, .80);
    --nm-surface: rgba(27, 35, 51, .80);
    --nm-light: #232d41;
    --nm-dark: rgba(255, 255, 255, .08);
    --kinh-bang: #1b2333;
    --kinh-hop: #1b2333;
    --kinh-vien: var(--phang-vien);
    --kinh-nen:
      url("/static/trong-dong-toi.png") center 58% / min(118vmin, 1000px) no-repeat,
      linear-gradient(180deg, #111827 0%, #0c1220 100%);
    --phang-nen-day: #0c1220;
  }
}

/* --- 1b. Bảng nổi & thanh bên: phẳng (đặc màu, viền mảnh, không làm mờ) ----
   Bảng Cá nhân (.app-sheet), thanh bên máy tính
   (.pc-ben), khung đổi tên ô / đồ thị (.dtm-hop, .dash-hop-sua...).
   Thanh trên, thanh đáy KHÔNG nằm trong danh sách - giữ Glass. */
html:root .pc-ben,
html:root.la-webapp .app-sheet,
html:root.pc-moi .app-sheet,
html:root :is(.dtm-hop, .dash-hop-sua, .lt-the),
html:root .app-bao-day {
  background: var(--phang-o) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--phang-vien) !important;
  box-shadow: var(--phang-bong), 0 12px 32px rgba(15, 23, 42, .12) !important;
}
html:root .pc-ben { box-shadow: var(--phang-bong) !important; }
html:root.la-webapp .app-mo-sheet:checked ~ .app-sheet {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Đường dẫn "Trang chủ › ..." dưới thanh trên: thẻ phẳng. */
html:root .breadcrumbs {
  background: var(--phang-o-trong, var(--phang-o)) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--phang-vien);
}
html:root.pc-moi body:not(.login) div.breadcrumbs { background: none !important; border: 0; }

/* --- 2. Ô ỨNG DỤNG: khối vuông trắng + tên bên dưới -------------------------
   Áp cho lưới ô trang chủ, ô con khi mở một mục (PXSC PLC...), trang Team PLC.
   TRỪ "Hoạt động gần đây" (#content-related): danh sách mở ngay trong ô, giữ
   dạng thẻ. */
html:root .dash-luoi:not(#content-related .dash-luoi):not(.nm-kpis) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px 10px !important;
  align-items: start;
}
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi):not(.nm-kpis) {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
  gap: 26px 14px !important;
}
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) {
  display: block !important; position: relative; min-width: 0; flex: none !important;
}
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o,
html:root .dash-luoi:not(#content-related .dash-luoi) > a.dash-o {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important; height: auto !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; text-align: center !important;
  text-decoration: none !important; color: inherit !important;
}
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o:hover,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o:hover { transform: none !important; }
/* Khối vuông chứa biểu tượng. */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o > .dash-o-icon,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-icon,
html:root .dash-luoi:not(#content-related .dash-luoi) > a.dash-o > .dash-o-icon {
  width: 72px !important; height: 72px !important; max-width: 100%;
  margin: 0 !important; display: grid !important; place-items: center;
  font-size: 36px !important; line-height: 1;
  border-radius: 20px !important;
  background: var(--phang-o) !important;
  border: 1px solid var(--phang-vien);
  box-shadow: var(--phang-bong) !important;
  transition: transform .12s ease;
}
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o > .dash-o-icon,
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-icon {
  width: 84px !important; height: 84px !important; font-size: 42px !important; border-radius: 22px !important;
}
html:root .dash-luoi:not(#content-related .dash-luoi) .dash-o:active > .dash-o-icon { transform: scale(.94); }
html:root .dash-luoi:not(#content-related .dash-luoi) .dash-o:hover > .dash-o-icon { border-color: #9cc3ef; }
html:root .dash-luoi:not(#content-related .dash-luoi) .dash-o-icon img { max-width: 62%; max-height: 62%; }
/* Tên dưới ô: chữ thường, căn giữa, tối đa 2 dòng (như mẫu). */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o > .dash-o-ten,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-ten,
html:root .dash-luoi:not(#content-related .dash-luoi) > a.dash-o > .dash-o-ten {
  margin: 0 !important; padding: 0 2px; align-self: center !important;
  font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.3 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-align: center !important;
  color: var(--nm-ink, #1f2a3a) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) .dash-o > .dash-o-ten { font-size: 14.5px !important; }
/* Dòng trạng thái (12 mã · 7 dưới tồn..., ● Mất kết nối...) - nhỏ, 2 dòng. */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o > .dash-o-mo,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-mo,
html:root .dash-luoi:not(#content-related .dash-luoi) > a.dash-o > .dash-o-mo {
  margin: -4px 0 0 !important; align-self: center !important; font-size: 11px !important; line-height: 1.3 !important;
  text-align: center !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-mo::after { content: "" !important; }
/* ✎ 🔒 (chỉ admin): nhỏ, đậu ở góc trên phải KHỐI VUÔNG. */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-sua,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-quyen,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-sua,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-quyen {
  width: 22px !important; height: 22px !important; font-size: 10px !important;
  top: -6px !important; background: var(--phang-o) !important;
  border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
}
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-sua,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-sua { right: calc(50% - 46px) !important; }
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-quyen,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-quyen { right: calc(50% - 22px) !important; }
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-quyen.dash-quyen-don { right: calc(50% - 46px) !important; }
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-sua,
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-sua { right: calc(50% - 52px) !important; }
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-quyen,
html:root.pc-moi .dash-luoi:not(#content-related .dash-luoi) > .dash-muc > .dash-o > .dash-quyen { right: calc(50% - 28px) !important; }

/* Mục đang MỞ (Kho tài liệu, PXSC PLC...): thanh ngang phẳng chiếm cả hàng. */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc[open] { grid-column: 1 / -1; }
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc[open] > .dash-o {
  background: var(--phang-o) !important; border: 1px solid var(--phang-vien) !important;
  box-shadow: var(--phang-bong) !important; border-radius: 16px !important;
}

/* --- 3. Tiêu đề nhóm (như "Công dân số" ở mẫu) ------------------------------- */
html:root .dashboard #content > .dash-luoi::before,
html:root .dashboard #content > .dash-tuabin::before {
  grid-column: 1 / -1;
  display: block; margin: 0 0 2px 2px !important;
  font-size: 21px !important; font-weight: 800 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--phang-nhan) !important;
}
html:root .dashboard #content > .dash-luoi::before { content: "Ứng dụng & trạm"; }
/* Tiêu đề hàng tổ máy là thẻ thật .dash-tb-tieu (mục 9). */
html:root.pc-moi .dashboard #content-related > .dash-luoi::before {
  font-size: 21px !important; font-weight: 800 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--phang-nhan) !important; margin-bottom: 2px !important;
}
/* "Hoạt động gần đây" vẫn là thẻ ngang (danh sách mở ra ngay trong ô). */
html:root #content-related .dash-luoi:not(.nm-kpis) { grid-template-columns: minmax(0, 1fr) !important; }

/* --- 4. Thẻ phẳng: ô tổ máy, khối nội dung các trang ------------------------- */
html:root .dash-tb-o,
html:root .cc-khoi, html:root .cc-o, html:root .cc-so > *, html:root .kks-the,
html:root .tl-kv-the, html:root .tl-bang, html:root .module,
html:root .tk-khoi, html:root .tp-the {
  background: var(--phang-o-trong, var(--phang-o)) !important;
  border: 1px solid var(--phang-vien) !important;
  box-shadow: var(--phang-bong) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:root .dash-tb-o { border-radius: 18px !important; }

/* --- 5. Cùng kiểu Ô VUÔNG cho các lưới khác --------------------------------
   Quản lý CCDC (6 chức năng), Kho tài liệu (thư mục), Hồ sơ thiết bị (khu
   vực): bỏ thẻ chữ nhật, còn khối vuông trắng chứa biểu tượng + tên bên dưới. */
html:root .cc-luoi,
html:root .tl-kv-luoi,
html:root .tb-kv-luoi {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px 10px !important; align-items: start;
}
html:root.pc-moi .cc-luoi,
html:root.pc-moi .tl-kv-luoi,
html:root.pc-moi .tb-kv-luoi {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
  gap: 26px 14px !important;
}
/* Vỏ ô: trong suốt, không viền, không bóng. */
html:root .cc-luoi > .cc-o,
html:root .tl-kv-luoi > .tl-kv-the,
html:root .tb-kv-luoi > .tb-kv-the {
  position: relative; min-width: 0;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; transform: none !important;
}
html:root .cc-luoi > .cc-o,
html:root .tl-kv-the > .tl-kv-mo,
html:root .tb-kv-the > .tb-kv-mo {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: flex-start !important; gap: 8px !important;
  min-height: 0 !important; padding: 0 !important; text-align: center !important;
  background: none !important; box-shadow: none !important; border: 0 !important;
}
/* Khối vuông. */
html:root .cc-o > .cc-o-icon,
html:root .tl-kv-mo > .tl-kv-icon,
html:root .tb-kv-mo > .tb-kv-icon {
  width: 72px; height: 72px; flex: none; box-sizing: border-box;
  display: grid; place-items: center;
  font-size: 36px !important; line-height: 1;
  border-radius: 20px; background: var(--phang-o);
  border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
  transition: transform .12s ease;
}
html:root.pc-moi .cc-o > .cc-o-icon,
html:root.pc-moi .tl-kv-mo > .tl-kv-icon,
html:root.pc-moi .tb-kv-mo > .tb-kv-icon { width: 84px; height: 84px; font-size: 42px !important; border-radius: 22px; }
html:root .cc-o:active > .cc-o-icon,
html:root .tl-kv-mo:active > .tl-kv-icon,
html:root .tb-kv-mo:active > .tb-kv-icon { transform: scale(.94); }
html:root .cc-o:hover > .cc-o-icon,
html:root .tl-kv-mo:hover > .tl-kv-icon,
html:root .tb-kv-mo:hover > .tb-kv-icon { border-color: #9cc3ef; }
/* Tên + dòng phụ dưới ô. */
html:root .cc-o > .cc-o-ten,
html:root .tl-kv-mo > .tl-kv-ten,
html:root .tb-kv-mo > .tb-kv-ten {
  font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.3 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--nm-ink, #1f2a3a) !important; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
html:root.pc-moi .cc-o > .cc-o-ten,
html:root.pc-moi .tl-kv-mo > .tl-kv-ten,
html:root.pc-moi .tb-kv-mo > .tb-kv-ten { font-size: 14.5px !important; }
html:root .cc-o > .cc-o-mo,
html:root .tl-kv-mo > .tl-kv-so,
html:root .tb-kv-mo > .tb-kv-so {
  margin-top: -4px; font-size: 11px !important; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Nút ✎ của thư mục / 🔐 ✎ 🗑 của khu vực: nhỏ, đậu trên mép trên khối vuông. */
html:root .tl-kv-the > .tl-kv-sua {
  top: -6px !important; right: calc(50% - 46px) !important;
  width: 22px !important; height: 22px !important; font-size: 10px !important;
  background: var(--phang-o) !important; border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
}
html:root.pc-moi .tl-kv-the > .tl-kv-sua { right: calc(50% - 52px) !important; }
html:root .tb-kv-the > .tb-kv-thao-tac {
  position: absolute; top: -8px; left: 0; right: 0; z-index: 1;
  display: flex; justify-content: center; gap: 3px; padding: 0;
}
html:root .tb-kv-thao-tac > .tb-kv-nut {
  width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important;
  display: grid; place-items: center; font-size: 10px !important; border-radius: 50% !important;
  background: var(--phang-o) !important; border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong) !important;
}

/* Ô dẫn thẳng sang trang (không mở / thu): bỏ dấu ▾ cuối dòng trạng thái. */
html:root .dash-luoi > .dash-o-boc > .dash-o > .dash-o-mo::after { content: "" !important; }

/* --- 6. MENU ⋯ (trang chủ, tab An toàn / TeamPLC / Mã KKS) ---------------
   Bảng dạng GƯƠNG: nền mờ trong + hoa văn trống đồng riêng của bảng (luôn
   thấy trống đồng, dù phía sau bảng là gì). Các dòng bên trong (Mục yêu
   thích, từng tài liệu, Cá nhân) là THẺ PHẲNG chữ nhật cùng kiểu ô "Ứng dụng
   & trạm": mặt trắng, viền mảnh, bóng nhẹ, biểu tượng trong khối vuông nhỏ. */
html:root.la-webapp .app-menu-trai {
  background:
    url("/static/trong-dong-be.png") center 46% / 540px no-repeat,
    rgba(242, 229, 202, .88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .8), 10px 0 34px rgba(15, 23, 42, .16) !important;
}
html:root[data-theme="dark"].la-webapp .app-menu-trai {
  background:
    url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
    rgba(17, 24, 39, .86) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 10px 0 34px rgba(0, 0, 0, .4) !important;
}
@media (prefers-color-scheme: dark) {
  html:root[data-theme="auto"].la-webapp .app-menu-trai {
    background:
      url("/static/trong-dong-toi.png") center 46% / 540px no-repeat,
      rgba(17, 24, 39, .86) !important;
    border-color: rgba(255, 255, 255, .08) !important;
  }
}
/* "Menu": chữ tiêu đề nhóm như "Ứng dụng & trạm". */
html:root .app-menu-trai .app-menu-ten {
  font-size: 21px; font-weight: 800; color: var(--phang-nhan);
}
/* Thẻ phẳng: Mục yêu thích (tiêu đề gập / sổ), từng tài liệu, Cá nhân. */
html:root .app-menu-trai .app-yt-dau,
html:root .app-menu-trai .app-yt-mo,
html:root .app-menu-trai .app-menu-muc {
  /* Nền sáng: mặt be TRONG một nửa (--phang-o-menu) cho thấy hoa văn trống
     đồng của bảng phía sau; khối vuông biểu tượng giữ đặc (mục 11). */
  background: var(--phang-o-menu, var(--phang-o)) !important;
  border: 1px solid var(--phang-vien) !important;
  box-shadow: var(--phang-bong) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
}
html:root .app-menu-trai .app-yt-dau:active,
html:root .app-menu-trai .app-menu-muc:active { box-shadow: inset 0 0 0 1px var(--phang-vien) !important; }
html:root .app-menu-trai .app-yt-dong { border-radius: 16px; }
html:root .app-menu-trai .app-yt-xoa { border-radius: 16px; }
html:root .app-menu-trai .app-yt-ds { gap: 10px; margin-top: 2px; }
/* Biểu tượng của mỗi thẻ nằm trong khối vuông nhỏ (như ô ứng dụng). */
html:root .app-menu-trai .app-yt-tim,
html:root .app-menu-trai .app-yt-icon,
html:root .app-menu-trai .app-menu-ca-nhan > svg {
  flex: none; box-sizing: border-box;
  width: 38px !important; height: 38px !important;
  display: grid; place-items: center;
  border-radius: 11px; background: var(--phang-o);
  border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
  font-size: 19px; line-height: 1;
}
html:root .app-menu-trai .app-menu-ca-nhan > svg { padding: 8px; color: var(--nm-ink-soft, #64748b); }
html:root .app-menu-trai .app-menu-cuoi { border-top-color: rgba(127, 145, 170, .22); }
html:root .app-menu-trai .app-yt-goi,
html:root .app-menu-trai .app-yt-trong { color: var(--nm-ink-soft, #64748b); }

/* --- 7. Menu ⋯ GỌN: dòng thấp hơn, nhóm "Ứng dụng & trạm" ----------------- */
html:root .app-menu-trai .app-menu-ds { gap: 6px; }
html:root .app-menu-trai .app-yt-dau,
html:root .app-menu-trai .app-yt-mo,
html:root .app-menu-trai .app-menu-muc {
  padding: 6px 10px !important; border-radius: 13px !important; gap: 10px !important;
  font-size: 14px !important; min-height: 0;
}
html:root .app-menu-trai .app-yt-dong,
html:root .app-menu-trai .app-yt-xoa { border-radius: 13px; }
html:root .app-menu-trai .app-yt-ds { gap: 6px; }
html:root .app-menu-trai .app-yt[open] .app-yt-dau { margin-bottom: 6px; }
html:root .app-menu-trai .app-yt-tim,
html:root .app-menu-trai .app-yt-icon,
html:root .app-menu-trai .app-menu-ca-nhan > svg,
html:root .app-menu-trai .app-menu-ic {
  width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 16px !important;
}
html:root .app-menu-trai .app-menu-ca-nhan > svg { padding: 6px; }
html:root .app-menu-trai .app-menu-chu b { font-size: 14px; }
html:root .app-menu-trai .app-menu-chu small { font-size: 11px; }
/* Nhóm Ứng dụng & trạm. */
html:root .app-menu-ud { margin-top: 10px; }
html:root .app-menu-nhom {
  margin: 4px 4px 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--phang-nhan);
}
html:root .app-menu-ud-ds { display: flex; flex-direction: column; gap: 6px; }
html:root .app-menu-ud .app-menu-muc {
  display: flex; align-items: center; text-decoration: none !important;
  color: var(--nm-ink, #1f2a3a) !important;
}
html:root .app-menu-ud .app-menu-muc > b {
  flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root .app-menu-ic {
  flex: none; box-sizing: border-box; display: grid; place-items: center; line-height: 1;
  background: var(--phang-o); border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
}
html:root .app-menu-cham { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #94a3b8; }
html:root .app-menu-cham-tot { background: #16a34a; }
html:root .app-menu-cham-mat { background: #dc2626; }
/* Menu dài (nhiều trạm / mở Mục yêu thích) thì cuộn - thanh cuộn mảnh, không trắng toát ở nền tối. */
html:root .app-menu-trai { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
html:root[data-theme="dark"] .app-menu-trai { scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* --- 8. Menu ⋯: Trang chủ (đầu menu), Lịch sử hỏi (dưới Mục yêu thích) --- */
html:root .app-menu-trai .app-menu-muc > b {
  flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root .app-menu-trai a.app-menu-muc { text-decoration: none !important; color: var(--nm-ink, #1f2a3a) !important; }
/* Số đoạn chat: xanh (số yêu thích là đỏ). */
html:root .app-menu-trai .app-ls-so { background: #2563eb !important; }
html:root .app-ls-het {
  display: block; margin: 2px 6px 0; font-size: 12px; font-weight: 600;
  color: var(--phang-nhan) !important; text-decoration: none !important;
}
html:root .app-menu-trai .app-ls .app-menu-chu { flex: 1; min-width: 0; }
html:root .app-menu-trai .app-ls .app-menu-chu b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root .app-ls-het[hidden] { display: none; }

/* --- 10. Nền sáng: mục đang chọn ở thanh bên theo màu nhấn của
   bảng màu đang dùng (--phang-nhan-nut) cho hài hoà (nền tối giữ xanh dương). */
html:root:not([data-theme="dark"]) .pc-muc.pc-chon { background: var(--phang-nhan-nut); box-shadow: 0 6px 16px -6px rgba(180, 83, 42, .55); }
@media (prefers-color-scheme: dark) {
  html:root[data-theme="auto"] .pc-muc.pc-chon { background: #2563eb; }
}

/* --- 11. Ô vuông biểu tượng theo bảng màu (be: kem ấm, viền be). Nền tối:
   --phang-o-ic = mặt thẻ. */
html:root .dash-luoi .dash-o-icon,
html:root .cc-o > .cc-o-icon,
html:root .tl-kv-mo > .tl-kv-icon,
html:root .tb-kv-mo > .tb-kv-icon,
html:root .app-menu-trai .app-menu-ic,
html:root .app-menu-trai .app-yt-tim,
html:root .app-menu-trai .app-yt-icon,
html:root .app-menu-trai .app-menu-ca-nhan > svg {
  background: var(--phang-o-ic, var(--phang-o)) !important;
  border-color: var(--phang-vien-ic, var(--phang-vien)) !important;
}
html:root:not([data-theme="dark"]) .app-menu-trai .app-ls-so { background: var(--phang-nhan-nut) !important; }

/* --- 12. Nền sáng: 🔍 ⋯ 📷 ở thanh trên và THANH ĐÁY - LIQUID GLASS RÕ NÉT ---
   Người dùng: "làm rõ nét Liquid Glass". Trên thanh be đậm, kính trắng mờ của
   liquid-glass.css chìm vào nền. Nay: chỏm bắt sáng trắng sắc ở nửa trên, hắt
   sáng ở đáy (khúc xạ), viền trắng trong + MỘT NÉT MẢNH nâu bên ngoài cho rõ
   mép, bóng tiếp xúc 1px (KHÔNG bóng toả mờ quanh 🔍 - người dùng đã bỏ).
   Nút vẫn KHÔNG backdrop-filter (Safari vẽ nhoè biểu tượng - xem
   liquid-glass.css). Thanh đáy: mặt kính ánh be, làm mờ + tăng bão hoà mạnh
   hơn, viền đôi (nâu mảnh ngoài, trắng trong) chạy cả cung khoét quanh nút
   giữa. Nền tối giữ nguyên. Chỉ nền sáng và "tự động" khi máy đang sáng. */
@media (max-width: 860px) {
  html:root[data-theme="light"] :is(.app-tren-tim, .app-tren-thanh > .app-tren-nut) {
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .95) 0%,
                      rgba(255, 255, 255, .50) 40%, rgba(255, 255, 255, 0) 64%),
      radial-gradient(90% 48% at 50% 100%, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, 0) 72%),
      rgba(255, 248, 234, .30);
    box-shadow:
      0 0 0 .5px rgba(110, 70, 25, .42),
      inset 0 0 0 1px rgba(255, 255, 255, .92),
      inset 0 1.5px 0 #fff,
      inset 0 -1.5px 1px rgba(255, 255, 255, .65),
      inset 0 -4px 7px rgba(150, 100, 40, .14),
      0 1px 1.5px rgba(90, 55, 20, .22);
  }
  html:root[data-theme="light"] .app-tren-thanh > .app-tren-nut:active {
    background: rgba(120, 80, 30, .10);
    box-shadow: 0 0 0 .5px rgba(110, 70, 25, .42), inset 0 1px 2px rgba(90, 55, 20, .22);
  }
  html:root[data-theme="light"] .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim {
    background: rgba(255, 251, 243, .78);
    box-shadow: 0 0 0 .5px rgba(110, 70, 25, .42), inset 0 0 0 1px rgba(255, 255, 255, .92);
  }

  html:root[data-theme="light"] .app-nav-nen {
    box-shadow: 0 12px 28px -8px rgba(90, 55, 20, .34), 0 2px 6px -2px rgba(90, 55, 20, .18);
  }
  html:root[data-theme="light"] .app-nav-nen::after {
    background:
      radial-gradient(circle at 50% -4px,
        rgba(255, 255, 255, 0) 29px, rgba(110, 70, 25, .35) 29.4px, #fff 30.2px,
        rgba(255, 255, 255, .45) 31.8px, rgba(255, 255, 255, 0) 34px),
      linear-gradient(180deg,
        rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .20) 38%,
        rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .30) 100%),
      rgba(240, 224, 194, calc(.22 + .45 * var(--kinh-muc)));
    -webkit-backdrop-filter: blur(14px) saturate(240%) brightness(1.06) contrast(1.05);
    backdrop-filter: blur(14px) saturate(240%) brightness(1.06) contrast(1.05);
    box-shadow:
      inset 0 0 0 .5px rgba(110, 70, 25, .40),
      inset 0 0 0 1.5px rgba(255, 255, 255, .92),
      inset 0 2px 0 rgba(255, 255, 255, .95),
      inset 0 -2px 3px rgba(255, 255, 255, .60);
  }
}
@media (max-width: 860px) and (prefers-color-scheme: light) {
  html:root[data-theme="auto"] :is(.app-tren-tim, .app-tren-thanh > .app-tren-nut) {
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .95) 0%,
                      rgba(255, 255, 255, .50) 40%, rgba(255, 255, 255, 0) 64%),
      radial-gradient(90% 48% at 50% 100%, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, 0) 72%),
      rgba(255, 248, 234, .30);
    box-shadow:
      0 0 0 .5px rgba(110, 70, 25, .42),
      inset 0 0 0 1px rgba(255, 255, 255, .92),
      inset 0 1.5px 0 #fff,
      inset 0 -1.5px 1px rgba(255, 255, 255, .65),
      inset 0 -4px 7px rgba(150, 100, 40, .14),
      0 1px 1.5px rgba(90, 55, 20, .22);
  }
  html:root[data-theme="auto"] .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim {
    background: rgba(255, 251, 243, .78);
  }
  html:root[data-theme="auto"] .app-nav-nen {
    box-shadow: 0 12px 28px -8px rgba(90, 55, 20, .34), 0 2px 6px -2px rgba(90, 55, 20, .18);
  }
  html:root[data-theme="auto"] .app-nav-nen::after {
    background:
      radial-gradient(circle at 50% -4px,
        rgba(255, 255, 255, 0) 29px, rgba(110, 70, 25, .35) 29.4px, #fff 30.2px,
        rgba(255, 255, 255, .45) 31.8px, rgba(255, 255, 255, 0) 34px),
      linear-gradient(180deg,
        rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .20) 38%,
        rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .30) 100%),
      rgba(240, 224, 194, calc(.22 + .45 * var(--kinh-muc)));
    -webkit-backdrop-filter: blur(14px) saturate(240%) brightness(1.06) contrast(1.05);
    backdrop-filter: blur(14px) saturate(240%) brightness(1.06) contrast(1.05);
    box-shadow:
      inset 0 0 0 .5px rgba(110, 70, 25, .40),
      inset 0 0 0 1.5px rgba(255, 255, 255, .92),
      inset 0 2px 0 rgba(255, 255, 255, .95),
      inset 0 -2px 3px rgba(255, 255, 255, .60);
  }
}

/* --- 13. Nền sáng, CÁC TRANG: ô vuông / thẻ chữ nhật bao quanh biểu tượng
   hơi trong (~15%, xem --phang-o-trong) như thẻ trong menu ⋯ (người dùng: thấy hình nền phía sau) -
   biểu tượng, chữ, viền giữ nguyên. Gồm khối vuông trang chủ, CCDC, Kho tài
   liệu, Hồ sơ thiết bị; ô tổ máy, thanh mục đang mở, "Hoạt động gần đây" và ô
   con sổ xuống. Khối nội dung các trang theo --nm-bg / mục 4 (cùng màu, cùng
   độ trong). Nền tối: cùng độ trong, mặt xanh đen.
   Lặp đúng bộ chọn của mục 2 (có #content-related trong :not() nên mạnh hơn
   mục 11), khác đi là luật này thua. */
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-o-boc > .dash-o > .dash-o-icon,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc:not([open]) > .dash-o > .dash-o-icon,
html:root .dash-luoi:not(#content-related .dash-luoi) > a.dash-o > .dash-o-icon,
html:root .cc-o > .cc-o-icon,
html:root .tl-kv-mo > .tl-kv-icon,
html:root .tb-kv-mo > .tb-kv-icon,
html:root #content-related .dash-o-icon,
html:root .dash-o-con .dash-o-icon,
html:root .dash-muc[open] .dash-o-icon {
  background: var(--phang-o-ic-trong, var(--phang-o-ic, var(--phang-o))) !important;
}
html:root .dash-tb-o,
html:root .dash-luoi:not(#content-related .dash-luoi) > .dash-muc[open] > .dash-o,
html:root #content-related .dash-luoi .dash-o,
html:root .dash-muc[open] .dash-o.dash-o-con,
html:root .dash-o-con {
  background: var(--phang-o-trong, var(--phang-o)) !important;
}

/* --- 14. Nút "+" thêm thông số (hàng "Tổ máy · Vận hành"): PHẲNG + TRONG --
   Người dùng: bản kính (vệt bắt sáng, bóng) -> "dạng phẳng nhưng vẫn để
   nguyên kiểu trong suốt". Chỉ còn mặt trong ánh màu nhấn và viền mảnh cùng
   màu; không vệt sáng, không bóng. Dấu + mang màu nhấn (nền sáng đất nung,
   nền tối xanh). */
html:root .dash-tb-them {
  color: var(--phang-nut-mau, #2563eb) !important;
  font-weight: 400 !important;
  background: color-mix(in srgb, var(--phang-nut-mau, #2563eb) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--phang-nut-mau, #2563eb) 42%, transparent) !important;
  box-shadow: none !important;
}
html:root .dash-tb-them:active {
  background: color-mix(in srgb, var(--phang-nut-mau, #2563eb) 24%, transparent) !important;
}
/* Điện thoại: CỠ BẰNG NÚT 📷 trên thanh trên (34px, máy hẹp 32px - xem
   --app-tren-nut-co ở liquid-glass.css). Máy tính giữ 36px (nút 📷 bản máy
   tính 42px - to hơn, người dùng muốn nút + nhỏ lại). */
@media (max-width: 860px) {
  html:root .dash-tb-them { width: 34px !important; height: 34px !important; font-size: 22px !important; }
}
@media (max-width: 400px) {
  html:root .dash-tb-them { width: 32px !important; height: 32px !important; font-size: 21px !important; }
}

/* --- 14b. KHUNG ĐỒ THỊ (bấm ô công suất tổ máy / thông số trang chủ / trạm):
   mặt GƯƠNG như bảng Cá nhân, menu ⋯ - thấy hoa văn trống đồng mờ phía sau
   (người dùng). Đồ thị SVG nền trong nên hoa văn lộ qua giữa các đường. Không
   gắn backdrop-filter lên chính khung (Safari vẽ nội dung thẻ có lớp mờ thành
   ảnh nhoè - đường đồ thị nhoè); lớp phủ .dtm đã làm mờ trang phía sau. */
html:root .dtm .dtm-hop {
  background: var(--phang-guong-dt, var(--phang-guong)) !important;
}
/* Mở khung ÊM, không giật (người dùng: "bấm công suất hiện đồ thị cảm thấy
   giật cục"):
   - BỎ lớp làm mờ cả trang trên lớp phủ (liquid-glass.css): iPhone phải làm
     mờ lại toàn màn hình - ô kính, ô số đang cập nhật - ngay lúc khung bật
     lên, khựng một nhịp. Hoa văn mờ đã nằm trong chính mặt khung.
   - Điện thoại: khung GHIM PHÍA TRÊN thay vì căn giữa. Số liệu về sau (đồ
     thị, dòng kWh) làm khung cao thêm - căn giữa thì cả khung nhảy lên nửa
     khoảng ấy; ghim trên thì chỉ phần dưới dài ra.
   - Hiện dần 0,2 giây bằng opacity / transform (máy vẽ thẳng, không dựng
     lại trang). */
html:root .dtm {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: dtm-hien .16s ease-out;
}
html:root .dtm .dtm-hop { animation: dtm-hop-hien .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes dtm-hien { from { opacity: 0; } }
@keyframes dtm-hop-hien { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (max-width: 860px) {
  html:root .dtm {
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + max(12px, 8vh));
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root .dtm, html:root .dtm .dtm-hop { animation: none; }
}

/* --- 15. Bảng CÁ NHÂN: gương trống đồng + dòng chữ nhật trong bo nhẹ ------
   Đồng bộ với menu ⋯ (mục 6-7): mặt bảng là gương (hoa văn trống đồng, nền
   trong), mỗi chức năng là thẻ chữ nhật trong (--phang-o-menu) bo 13px, biểu
   tượng trong khối vuông nhỏ đặc. Làm mờ phía sau CHỈ lúc bảng mở (xem
   liquid-glass.css: thẻ trong suốt nằm ngoài màn hình vẫn bị vẽ lớp mờ). */
html:root.la-webapp .app-sheet,
html:root.pc-moi .app-sheet {
  background: var(--phang-guong) !important;
}
html:root.la-webapp .app-mo-sheet:checked ~ .app-sheet,
html:root.pc-moi .app-mo-sheet:checked ~ .app-sheet {
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
}
/* :is(..., #_) mang độ ưu tiên của MỘT id: luật viên thuốc 999px của
   liquid-glass.css có `#user-tools a` trong :is() nên mạnh ngang một id -
   viết thường là thua, dòng vẫn tròn hai đầu (đã gặp). */
html:root .app-sheet :is(.app-dong, #_),
html:root .app-sheet .kinh-chinh {
  background: var(--phang-o-menu, var(--phang-o)) !important;
  border: 1px solid var(--phang-vien) !important;
  box-shadow: var(--phang-bong) !important;
  border-radius: 13px !important;
  margin: 0 0 6px !important;
}
html:root .app-sheet .app-dong { padding: 6px 10px !important; gap: 10px !important; font-size: 14px !important; }
html:root .app-sheet .kinh-chinh { padding: 8px 14px !important; }
html:root .app-sheet .app-dong:active { box-shadow: inset 0 0 0 1px var(--phang-vien) !important; }
html:root .app-sheet .app-dong-icon {
  width: 30px; height: 30px; box-sizing: border-box; flex: none;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  border-radius: 9px;
  background: var(--phang-o-ic, var(--phang-o));
  border: 1px solid var(--phang-vien-ic, var(--phang-vien));
  box-shadow: var(--phang-bong);
}
html:root .app-sheet .app-nhom {
  padding: 10px 4px 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--phang-nhan);
}

/* --- 16. Menu ⋯: mục "Đồng bộ" dưới Cá nhân (chưa có chức năng) ---------- */
html:root .app-menu-trai .app-menu-dong-bo {
  width: 100%; margin-top: 6px; font: inherit; text-align: left; cursor: default;
  display: flex; align-items: center; color: var(--nm-ink, #1f2a3a);
  -webkit-tap-highlight-color: transparent;
}
html:root .app-menu-trai .app-menu-dong-bo small { color: var(--nm-ink-soft, #64748b); }

/* --- 17. Ứng dụng iPhone: nền đứng yên lúc mở trang ----------------------
   iOS có lúc mở ứng dụng với khung trang HỤT một dải giờ rồi mới bung đủ.
   Lớp nền trống đồng (body::before, liquid-glass.css) đo theo CAO MÀN HÌNH
   (--man-cao, đặt trong <head> ở base_site.html) thay cho khung: khung hụt
   hay đủ thì hoa văn vẫn đứng yên, không trượt một nhịp. Nền <html> = màu
   ĐÁY nền: phần đáy iOS bỏ trống lúc khung hụt liền màu với nền, không cần
   đổi thẻ viewport / tải lại trang để chữa (cái "nháy" người dùng báo).
   Bàn phím mở (.ban-phim) thì giữ kiểu cũ của liquid-glass.css. */
html:root.la-webapp:not(.ban-phim) body::before {
  bottom: auto;
  height: var(--man-cao, 100%);
}
@media (max-width: 860px) {
  html:root.la-webapp:not(.ban-phim) { background: var(--phang-nen-day) !important; }
}

/* --- 18. Ứng dụng: trang chưa dựng xong thì CHƯA HIỆN -----------------------
   .dang-mo do <head> base_site.html gắn, script cuối trang gỡ (xem "HIỆN
   TRANG MỘT LẦN" ở đó). Chỉ ẩn nội dung - nền trống đồng (body::before) và
   dải giờ vẫn vẽ. visibility trên MỌI phần tử con (kể cả thứ tự khai
   visibility: visible), không dùng opacity: opacity làm mất kính thanh đáy.
   Dải giờ tô đúng màu thanh trên (như trang đăng nhập) để lúc thanh hiện ra
   vùng giờ không đổi màu. */
html:root.dang-mo body * { visibility: hidden !important; }
@media (max-width: 860px) {
  html:root.la-webapp.dang-mo body::after {
    background: var(--nm-thanh);
    background: color-mix(in srgb, var(--nm-thanh-0),
                var(--nm-thanh-1) calc(var(--kinh-muc) * 100%));
  }
}

/* --- 19. Trang chủ (ứng dụng điện thoại): hàng "Tổ máy · vận hành" + nút
   "+" sát thanh trên như các trang khác. Trang khác mở đầu bằng dòng
   "Trang chủ › ..." nằm NGOÀI #content, cách mép thanh trên đúng khoảng hở
   chung (12px, app-nav.css); trang chủ không có dòng ấy nên hàng đầu tiên
   nằm TRONG #content và ăn thêm lề trên 15px của Django admin - xa hơn hẳn
   (người dùng báo). Bỏ lề ấy: hàng đầu cũng cách thanh trên 12px. */
@media (max-width: 860px) {
  html:root.la-webapp .dashboard #content { padding-top: 0 !important; }
}

/* --- 20. MỤC ĐANG KHOÁ (core/khoa_muc.py) ----------------------------------
   Mục khoá vẫn HIỆN (người dùng yêu cầu: "vẫn thấy dạng thư mục icon nhưng
   hiện ổ khoá"): ổ khoá tròn nhỏ ở góc dưới phải khối biểu tượng, biểu tượng
   ngả xám, chữ nhạt đi. Bấm vào -> trang "Đang khoá" (admin vẫn vào). */
html:root .dash-o-icon { position: relative; }
html:root .dash-khoa-dau {
  position: absolute; right: -6px; bottom: -6px;
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 14px; line-height: 1;
  border-radius: 50%;
  background: var(--phang-o, #f9efdc);
  border: 1px solid var(--phang-vien, #dfc69c);
  box-shadow: var(--phang-bong);
  filter: none;
}
html:root .dash-bi-khoa .dash-o-icon { filter: grayscale(.7); }
html:root .dash-bi-khoa .dash-o-ten,
html:root .dash-bi-khoa .dash-o-mo { opacity: .65; }
html:root .dash-o.dash-bi-khoa .dash-o-icon { filter: grayscale(.7); }
html:root .dash-o.dash-bi-khoa .dash-o-ten,
html:root .dash-o.dash-bi-khoa .dash-o-mo { opacity: .65; }

/* Thanh đáy: ổ khoá nhỏ ở góc trên phải biểu tượng. Nút giữa (vòng logo)
   xếp chồng bằng grid-area 1/1 - ổ khoá nằm cùng ô, dạt góc trên phải. */
html:root .app-nav-icon { position: relative; }
html:root .app-nav-dau-khoa {
  position: absolute; right: -9px; top: -5px;
  font-size: 11px; line-height: 1;
}
html:root .app-nav-giua-vong > .app-nav-dau-khoa {
  position: relative; right: auto; top: auto;
  grid-area: 1 / 1; place-self: start end; z-index: 2;
  font-size: 13px;
}
html:root .app-nav-khoa .app-nav-ten { opacity: .65; }

/* Menu ⋯: ổ khoá cuối dòng. */
html:root .app-menu-khoa { margin-left: auto; font-style: normal; font-size: 13px; }

/* Khung ✎ trang chủ: công tắc "Khoá mục này". */
html:root .dash-sua-khoa {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 2px; font-size: 14px; cursor: pointer;
}
html:root .dash-sua-khoa input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
html:root .dash-sua-khoa small { color: var(--nm-ink-soft, #64748b); font-size: 12px; }

/* Trang "Đang khoá". */
html:root .khoa-muc {
  max-width: 420px; margin: 48px auto 24px; padding: 32px 24px 28px;
  text-align: center; border-radius: 24px;
  background: var(--phang-o-menu, rgba(249, 239, 220, .65));
  border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
}
html:root .khoa-muc-o { font-size: 54px; line-height: 1; margin-bottom: 14px; }
html:root #content .khoa-muc-ten { font-size: 20px; margin: 0 0 10px; color: var(--phang-nhan); }
html:root .khoa-muc-chu { font-size: 14px; line-height: 1.5; color: var(--nm-ink-soft, #64748b); margin: 0 0 20px; }
html:root .khoa-muc-ve {
  display: inline-block; padding: 11px 22px; border-radius: 14px;
  background: var(--phang-nut-mau); color: #fff !important; font-weight: 700;
  text-decoration: none !important;
}

/* Trang "Thanh điều hướng" (menu ⋯ > Cài đặt). */
html:root .tdh { max-width: 640px; }
html:root .tdh-goi { font-size: 13.5px; color: var(--nm-ink-soft, #64748b); margin: 4px 0 14px; }
html:root .tdh-dong {
  margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 18px;
  background: var(--phang-o-menu, rgba(249, 239, 220, .65));
  border: 1px solid var(--phang-vien); box-shadow: var(--phang-bong);
}
html:root .tdh-dau {
  display: flex; align-items: center; gap: 8px; padding: 0 4px;
  font-weight: 800; color: var(--phang-nhan); font-size: 15px;
}
html:root .tdh-bt { font-size: 20px; line-height: 1; }
html:root .tdh-bt img { height: 1.05em; width: auto; }
html:root .tdh-nhan-khoa { font-size: 12px; font-weight: 700; color: #b4532a; }
html:root .tdh-o { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; }
html:root .tdh-o input, html:root .tdh-o select { font-size: 16px; padding: 8px 10px; border-radius: 10px; }
html:root .tdh-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; font-size: 14px; }
html:root .tdh-hang label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
html:root .tdh-hang input[type=checkbox] { width: 18px; height: 18px; }
html:root .tdh-quyen { font-weight: 700; text-decoration: none !important; }
html:root .tdh-dang-khoa { border-color: #d4a373; }
html:root .tdh-luu {
  padding: 11px 28px; border-radius: 14px; border: 0; font-weight: 700; font-size: 15px;
  background: var(--phang-nut-mau); color: #fff; cursor: pointer;
}

/* --- 21. KHOÁ THEO NGƯỜI: phạm vi khoá + danh sách tài khoản ------------------
   Khung ✎ trang chủ và trang Thanh điều hướng. Phạm vi chỉ hiện khi đã tick
   "Khoá mục này"; danh sách người chỉ hiện khi chọn "Chỉ khoá người được chọn". */
html:root .khoa-pham-vi { display: none; margin: 6px 0 4px 26px; font-size: 14px; }
html:root .khoa-pham-vi > label { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
html:root .khoa-pham-vi input[type=radio] { width: 18px; height: 18px; margin: 0; }
html:root .dash-sua-khoa-hop:has(input[name=dang_khoa]:checked) .khoa-pham-vi,
html:root .tdh-dong:has(input[name^="khoa_"]:checked) .khoa-pham-vi { display: block; }
html:root .tdh-hang .khoa-pham-vi { flex-basis: 100%; margin-left: 0; }
html:root .khoa-nguoi { display: none; margin-top: 6px; }
html:root .khoa-pham-vi:has(input[value=chon]:checked) .khoa-nguoi { display: block; }
html:root .khoa-nguoi-loc {
  width: 100%; box-sizing: border-box; font-size: 16px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px;
}
html:root .khoa-nguoi-ds {
  max-height: 210px; overflow: auto; border-radius: 12px; padding: 4px;
  background: var(--phang-o-trong, var(--phang-o));
  border: 1px solid var(--phang-vien);
}
html:root .khoa-nguoi-o {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer;
}
html:root .khoa-nguoi-o[hidden] { display: none; }
html:root .khoa-nguoi-o input { width: 18px; height: 18px; margin: 0; align-self: center; flex: none; }
html:root .khoa-nguoi-o small { color: var(--nm-ink-soft, #64748b); font-size: 12px; }
html:root .khoa-nguoi-trong { font-size: 13px; color: var(--nm-ink-soft, #64748b); margin: 6px; }