/* ============================================================
   HỆ THỐNG THIẾT KẾ — Phòng họp số, UBND phường Nghĩa Lộ
   Nạp TRƯỚC style.css ở mọi trang. Tệp này định nghĩa màu, chữ, thành phần dùng chung
   và khung ứng dụng (thanh bên, thanh đáy điện thoại) của trang chủ.
   ============================================================ */

/* ---------- Phông Be Vietnam Pro — phục vụ tại chỗ (cong-cu/dung-giao-dien.js) ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Biến thiết kế ----------
   19/10/2026: thiết kế lại theo tasteskill v2.1 (app screens), phong cách "Achromatic ledger" (seed 975038293,
   .taste-skill/app/direction.json). Khung không màu: nền giấy sổ xanh-xám rất nhạt, mực gần đen, nút chính gần đen;
   MỘT màu dữ liệu (--mau-du-lieu, #1d5fbf) chỉ dành cho "bây giờ", cuộc họp đang diễn ra, mục chương trình đang chạy.
   Tên biến cũ (--xanh-600…) giữ lại để mã cũ chạy, nhưng trỏ về mực/màu dữ liệu — không thêm màu mới vào khung. */
:root {
  /* 20/10/2026: anh Tùng chọn phương án 3 "Một sắc xanh, bậc thang nhạt" (tasteskill accent-ladder, seed 975038293).
     MỘT màu xanh của hệ thống: đậm (--xanh-600) chỉ ở dấu nhỏ — nút chính, biểu tượng mục đang chọn, dữ liệu;
     sắc nhạt của nó (--mau-du-lieu-nen) phủ diện tích — hàng điều hướng đang chọn, huy hiệu vai trò, khối đang diễn ra.
     Không thêm họ màu thứ hai; xanh lá / cam / đỏ chỉ cho trạng thái. Chữ mực gần đen, nền trắng-xanh rất nhạt. */
  --muc:        #121826;       /* mực: chữ chính, nền thông báo nổi */
  --muc-nhat:   #1f2633;
  --chu-tren-muc: #ffffff;     /* chữ trên nền đậm (nút chính, logo); đảo ở giao diện tối */
  --mau-du-lieu: #1d5fbf;      /* màu của hệ thống — 6,1:1 trên trắng */
  --mau-du-lieu-nen: #eaf1fb;  /* sắc nhạt: mục đang chọn, huy hiệu, khối đang diễn ra */
  --mau-du-lieu-vach: #d6e3f6; /* sắc nhạt hơn một bậc: rãnh thanh tiến độ */
  --mau-du-lieu-dam: #0f3a7a;  /* chữ trên sắc nhạt — 10,4:1 trên #eaf1fb */

  --xanh-950: #121826;         /* tên cũ giữ để mã cũ chạy */
  --xanh-900: #1f2633;
  --xanh-800: #2a3342;
  --xanh-700: #1d5fbf;
  --xanh-600: #1d5fbf;         /* màu chính: nút chính */
  --xanh-500: #1d5fbf;
  --xanh-100: #eaf1fb;
  --xanh-50:  #f2f5f9;         /* nền nhạt trung tính: hàng chọn, tin chưa đọc */

  --nen:       #f7f9fc;        /* nền trang: một bậc về phía sắc nhạt nhất của màu hệ thống */
  --mat:       #ffffff;
  --mat-2:     #f2f5f9;
  --vien:      #e3e8ef;
  --vien-dam:  #cfd6e0;        /* ô nhập, nút viền */
  --chu:       #121826;
  --chu-nhat:  #5b6573;        /* 6,0:1 trên trắng, 5,7:1 trên nền trang */
  --chu-mo:    #5b6573;

  --luc: #247b50;  --luc-nen: #dcfae5;
  --cam: #92400e;  --cam-nen: #fffbeb;
  --do:  #c4242a;  --do-nen:  #ffedea;
  --tim: #0f3a7a;  --tim-nen: #eaf1fb;          /* tên cũ "tím" → huy hiệu sắc nhạt của màu hệ thống */
  --xanh-ngoc: #3d4654; --xanh-ngoc-nen: #eef2f7; --xanh-ngoc-chu: #3d4654;
  --vang-nen: #fffbeb; --vang-chu: #92400e;

  --mat-hover: #eef2f7;
  --mat-kinh: #f7f9fc;
  --mat-kinh-dam: #ffffff;
  --vien-xanh: #cfd6e0;
  --nen-giay:  #e9edf3;
  --nut-hover: #174c99; --do-dac: #c4242a; --luc-dac: #247b50; --cam-dac: #92400e;

  --bo-nho: 6px;               /* thẻ 8, nút 6 */
  --bo-goc: 8px;
  --bo-goc-to: 8px;
  --bong-1: none;              /* thẻ nằm yên không có bóng */
  --bong-2: none;
  --bong-3: 0 12px 28px rgba(18, 24, 38, .14);   /* chỉ thứ nổi: menu, hộp thoại, thông báo */

  --rong-thanh-ben: 230px;     /* thanh bên có chữ; máy tính bảng thu về 56px (cuối tệp) */
  --cao-thanh-tren: 64px;
  --cao-thanh-duoi: 60px;
}

* { box-sizing: border-box; }

/* Thuộc tính hidden phải thắng display của mọi thành phần — không có dòng này thì
   nút ẩn vẫn hiện, vì `.nut { display: inline-flex }` ghi đè lên nó. */
[hidden] { display: none !important; }

/* Khoá phóng to kiểu app: chỉ cho cuộn — xem giải thích ở public/js/chung.js */
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
/* Trang đọc PDF: VẪN phóng to bằng hai ngón như bình thường (yêu cầu 30/9/2026) */
html.cho-phong-to { touch-action: auto; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 600; }
a { color: var(--chu); text-decoration: none; }
a:hover { text-decoration: underline; }
.so-deu { font-variant-numeric: tabular-nums; }

/* ---------- Biểu tượng (Lucide, public/icons/bieu-tuong.svg) ---------- */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
.ic.nho { width: 15px; height: 15px; vertical-align: -2px; }
.ic.to  { width: 22px; height: 22px; }

/* ---------- Nút ---------- */
button, .nut {
  font: inherit; font-weight: 500; font-size: 14px; line-height: 20px;
  cursor: pointer; border: 1px solid transparent; border-radius: var(--bo-nho);
  padding: 9px 16px; min-height: 40px;
  background: var(--xanh-600); color: var(--chu-tren-muc);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover, .nut:hover { background: var(--nut-hover); text-decoration: none; }
button:focus-visible, .nut:focus-visible, input:focus-visible { outline: 2px solid var(--mau-du-lieu); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.phu, .nut.phu { background: var(--mat); color: var(--chu); border-color: var(--vien-dam); }
button.phu:hover, .nut.phu:hover { background: var(--mat-2); border-color: var(--chu-mo); }

button.nhat, .nut.nhat { background: transparent; color: var(--chu-nhat); }
button.nhat:hover, .nut.nhat:hover { background: var(--mat-hover); color: var(--chu); }

button.do, .nut.do { background: var(--do-dac); }
button.do:hover, .nut.do:hover { background: #a31d22; }
button.nhat.do, .nut.nhat.do { background: transparent; color: var(--do); }
button.nhat.do:hover { background: var(--do-nen); }
button.cam, .nut.cam { background: var(--mat); color: var(--chu); border-color: var(--vien-dam); }
button.cam:hover, .nut.cam:hover { background: var(--mat-hover); }
button.luc, .nut.luc { background: var(--xanh-600); color: var(--chu-tren-muc); }
button.luc:hover, .nut.luc:hover { background: var(--nut-hover); }

button.nho, .nut.nho { padding: 6px 12px; min-height: 34px; font-size: 13px; }
button.vuong, .nut.vuong { padding: 0; width: 40px; }
button.vuong.nho { width: 34px; }

/* ---------- Ô nhập ---------- */
label { display: block; margin: 16px 0 6px; font-weight: 500; font-size: 13px; color: var(--chu); }
input, select, textarea {
  font: inherit; font-size: 14px; width: 100%; padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--vien-dam); border-radius: var(--bo-nho);
  background: var(--mat); color: var(--chu);
  transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--chu-mo); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--chu); }
textarea { resize: vertical; min-height: auto; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--xanh-600); }

/* Ô chọn ngày giờ trên iPhone (Safari) có bề rộng tối thiểu RIÊNG, bỏ qua width: 100%
   và minmax(0, 1fr) — nên đè lên ô bên cạnh (anh Tùng chụp màn hình 27/9/2026).
   appearance: none + min-width: 0 mới ép được nó co lại. */
input[type="datetime-local"], input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; display: block;
}
input::-webkit-date-and-time-value { text-align: left; }

/* Ô có biểu tượng bên trái (ô tìm kiếm) */
.o-co-ic { position: relative; }
.o-co-ic > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--chu-mo); pointer-events: none; }
.o-co-ic > input { padding-left: 38px; }

/* ---------- Thẻ ---------- */
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc); }
.the-dau {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--vien);
}
/* Tiêu đề giữ một dòng; thiếu chỗ thì các nút bên phải xuống dòng, không bóp tiêu đề thành 4 dòng */
.the-dau h3 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.the-dau h3 .ic { color: var(--chu-nhat); }
.the-than { padding: 20px; }

/* ---------- Nhãn trạng thái ---------- */
.nhan {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; line-height: 18px; padding: 2px 9px; border-radius: 99px;
  background: var(--mat-hover); color: var(--xanh-ngoc-chu); white-space: nowrap;
}
.nhan .ic { width: 13px; height: 13px; vertical-align: 0; }
.nhan.luc  { background: var(--luc-nen); color: var(--luc); }
.nhan.cam  { background: var(--cam-nen); color: var(--cam); }
.nhan.do   { background: var(--do-nen);  color: var(--do); }
.nhan.tim  { background: var(--tim-nen); color: var(--tim); }
.nhan.xam  { background: var(--mat-hover); color: var(--chu-nhat); }
.nhan.ma   { font-variant-numeric: tabular-nums; letter-spacing: .04em; background: var(--mat-hover); color: var(--chu-nhat); }
.nhan.dang { background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu-dam); }   /* trạng thái: sắc nhạt + chữ đậm, nút bấm mới là xanh đặc */
.nhan.cham::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nhan.cham.nhap-nhay::before { animation: nhap-nhay 1.6s ease-in-out infinite; }
@keyframes nhap-nhay { 50% { opacity: .25; } }

/* ---------- Ảnh đại diện (chữ cái đầu, màu theo tên) ---------- */
.dai-dien {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 12px; font-weight: 600; color: var(--chu); background: var(--mat-hover); border: 1px solid var(--vien-dam);
  text-transform: uppercase;
}
.dai-dien.to { width: 40px; height: 40px; font-size: 15px; }
.chong-dai-dien { display: inline-flex; }
.chong-dai-dien .dai-dien { width: 26px; height: 26px; font-size: 10.5px; outline: 2px solid var(--mat); margin-left: -6px; }
.chong-dai-dien .dai-dien:first-child { margin-left: 0; }
.chong-dai-dien .dai-dien.them { background: var(--vien); color: var(--chu-nhat); }

/* ============================================================
   KHUNG ỨNG DỤNG: thanh bên (máy tính) · thanh trên · thanh đáy (điện thoại)
   ============================================================ */
.app { min-height: 100vh; min-height: 100dvh; }

.thanh-ben {
  position: fixed; inset: 0 auto 0 0; width: var(--rong-thanh-ben); z-index: 40;
  background: var(--xanh-950); color: #c8d3e6;
  display: flex; flex-direction: column; padding: 18px 14px;
  border-right: 1px solid rgba(255, 255, 255, .04);
}
.thuong-hieu { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; color: #fff; text-decoration: none; }
.thuong-hieu:hover { text-decoration: none; }
.thuong-hieu .logo {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--xanh-600);
}
.thuong-hieu .logo .ic { color: var(--chu-tren-muc); width: 20px; height: 20px; }
.thuong-hieu b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.thuong-hieu small { display: block; font-size: 12px; color: #8b9bb7; font-weight: 400; margin-top: 1px; }

.nhom-dh { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #5f6f8c; padding: 14px 10px 6px; }
.muc-dh {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; color: #b6c2d8; border: none; box-shadow: none;
  padding: 10px 12px; min-height: 42px; border-radius: 9px; font-weight: 500; justify-content: flex-start;
  position: relative;
}
.muc-dh .ic { color: #7f8fab; }
.muc-dh:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.muc-dh.dang { background: rgba(59, 130, 246, .16); color: #fff; }
.muc-dh.dang .ic { color: #93b4ff; }
.muc-dh.dang::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mau-du-lieu); }
.muc-dh .so-dem { margin-left: auto; font-size: 12px; font-weight: 600; background: #dc2626; color: #fff; border-radius: 99px; padding: 0 7px; line-height: 19px; }

.day-thanh-ben { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.the-app { display: none; }
.the-app b { color: #fff; display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.the-app a { color: #93b4ff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }

/* Vùng chính bên phải thanh bên */
.vung-chinh { margin-left: var(--rong-thanh-ben); min-height: 100vh; display: flex; flex-direction: column; }

.thanh-tren {
  position: sticky; top: 0; z-index: 30; height: var(--cao-thanh-tren);
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--nen); border-bottom: 1px solid var(--vien);
}
.thanh-tren .tieu-de-trang-tren { font-size: 17px; font-weight: 600; }
.thanh-tren .thuong-hieu-nho { display: none; }
.day-ra { flex: 1; }

/* Khối tài khoản trên thanh trên */
.tai-khoan { position: relative; }
.tai-khoan > .mo {
  display: flex; align-items: center; gap: 10px; background: transparent; color: var(--chu);
  border: 1px solid transparent; box-shadow: none; padding: 4px 8px 4px 4px; min-height: 44px; border-radius: 99px;
}
.tai-khoan > .mo:hover { background: var(--mat-hover); }
.tai-khoan .ten { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left; }
.tai-khoan .ten small { display: block; font-weight: 400; font-size: 12px; color: var(--chu-nhat); }
.tai-khoan .mo > .ic { color: var(--chu-mo); }

.menu-tha {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px;
  background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); box-shadow: var(--bong-3);
  padding: 6px; display: none; z-index: 50;
}
.menu-tha.hien { display: block; animation: hien-ra .14s ease-out; }
@keyframes hien-ra { from { opacity: 0; transform: translateY(-4px); } }
.menu-tha .dau-menu { display: flex; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--vien); margin-bottom: 6px; }
.menu-tha .dau-menu b { display: block; font-size: 14px; }
.menu-tha .dau-menu span { font-size: 13px; color: var(--chu-nhat); }
.menu-tha button, .menu-tha a.nut {
  display: flex; width: 100%; justify-content: flex-start; gap: 11px;
  background: transparent; color: var(--chu); box-shadow: none; border: none;
  padding: 9px 12px; min-height: 38px; border-radius: 8px; font-size: 13px; font-weight: 500;
  white-space: normal; text-align: left;
}
.menu-tha button .ic, .menu-tha a.nut .ic { color: var(--chu-nhat); }
.menu-tha button:hover, .menu-tha a.nut:hover { background: var(--mat-hover); }
.menu-tha .ke { height: 1px; background: var(--vien); margin: 6px 0; }
.menu-tha button.thoat, .menu-tha button.thoat .ic { color: var(--do); }
.menu-tha button.thoat:hover { background: var(--do-nen); }
/* Lập cuộc họp, Thống kê, Quản trị chuyển vào menu tài khoản (5/10/2026) */
.menu-tha { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.menu-tha .nhan-menu { padding: 8px 12px 2px; font-size: 12px; font-weight: 500; color: var(--chu-nhat); }
.menu-tha button.dang, .menu-tha button.dang .ic { color: var(--chu); }
.menu-tha button.dang { background: var(--mat-hover); }

/* Nội dung trang */
.khung { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 28px 64px; }

/* Thanh đáy (chỉ điện thoại) */
.thanh-duoi { display: none; }

/* ---------- Đầu trang ---------- */
.tieu-de-trang { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.tieu-de-trang h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.tieu-de-trang p { margin: 4px 0 0; color: var(--chu-nhat); font-size: 14px; }

/* ---------- Ô số liệu ---------- */
.hang-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 24px;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; }
.o-so { background: var(--mat); padding: 16px 20px; display: flex; align-items: center; gap: 14px; text-align: left; }
.o-so + .o-so { border-left: 1px solid var(--vien); }
/* Ô số liệu bấm được: lọc danh sách cuộc họp theo ô đó (trang-chu.js LOC_NHANH) */
.o-so[data-loc-nhanh] { cursor: pointer; transition: background .15s; }
.o-so[data-loc-nhanh]:hover { background: var(--mat-2); }
.o-so[data-loc-nhanh]:focus-visible { outline: 2px solid var(--mau-du-lieu); outline-offset: -2px; }
.o-so.dang { background: var(--mau-du-lieu-nen); }
.o-so.dang .so, .o-so.dang .nhan-so { color: var(--mau-du-lieu-dam); }
.dong-loc-nhanh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 14px;
  border-radius: var(--bo-nho); background: var(--xanh-50); border: 1px solid var(--vien-xanh); font-size: 13.5px; scroll-margin-top: 80px; }
.dong-loc-nhanh .ic { color: var(--xanh-600); }
.dong-loc-nhanh button { margin-left: auto; }
.o-so .bong { display: none; }       /* biểu tượng trong ô màu là dấu hiệu bảng điều khiển sinh tự động — bỏ */
.o-so > div { display: flex; flex-direction: column-reverse; }
.o-so .so { font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.o-so .nhan-so { font-size: 13px; color: var(--chu-nhat); margin-bottom: 4px; }

/* ---------- Cuộc họp đang diễn ra (khối nổi bật) ---------- */
/* Cuộc họp đang diễn ra = câu trả lời của màn Tổng quan: khối lớn nhất, màu dữ liệu chỉ ở dấu "đang diễn ra" */
.noi-bat {
  position: relative; border-radius: var(--bo-goc); margin-bottom: 24px;
  background: var(--mau-du-lieu-nen); border: none;
  color: var(--chu); padding: 20px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.noi-bat .nhan { background: var(--mat); color: var(--mau-du-lieu-dam); }
.noi-bat h2 { font-size: 20px; font-weight: 600; margin: 8px 0 4px; }
.noi-bat .phu-de { color: var(--chu-nhat); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.noi-bat .phu-de span { display: inline-flex; align-items: center; gap: 6px; }
.noi-bat .nut-noi-bat { padding: 11px 20px; min-height: 44px; }
.noi-bat .noi-dung { flex: 1; min-width: 240px; position: relative; z-index: 1; }

/* ---------- Thanh công cụ danh sách ---------- */
.thanh-cong-cu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.thanh-cong-cu .o-co-ic { flex: 1; min-width: 220px; max-width: 420px; }
.hang-tim { display: flex; gap: 8px; align-items: center; }
.hang-tim #oMaHop {
  width: 150px; text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

/* ---------- Mục (khối có tiêu đề) ---------- */
.muc { margin-bottom: 28px; }
.muc-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.muc-dau h2 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.muc-dau h2 .ic { color: var(--chu-nhat); }
.muc-dau .dem { font-size: 12px; font-weight: 500; color: var(--chu-nhat); background: var(--mat-hover); border-radius: 99px; padding: 1px 9px; }

/* ---------- Hàng cuộc họp ---------- */
.ds-hop { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; }
.hop {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start;
  padding: 16px 20px; border-bottom: 1px solid var(--vien); transition: background .12s;
}
.hop:last-child { border-bottom: none; }
.hop:hover { background: var(--mat-2); }
.hop-ngay {
  width: 64px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--vien);
  background: var(--mat);
}
.hop-ngay .thang { display: block; font-size: 12px; color: var(--chu-nhat); padding: 4px 0 0; }
.hop-ngay .ngay { display: block; font-size: 22px; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.hop-ngay .thu { display: block; font-size: 12px; color: var(--chu-nhat); padding-bottom: 5px; }
.hop.hom-nay .hop-ngay { border-color: var(--mau-du-lieu); }
.hop.hom-nay .hop-ngay .ngay { color: var(--mau-du-lieu-dam); }
.hop.dang-hop .hop-ngay { border-color: transparent; background: var(--mau-du-lieu-nen); }
.hop.dang-hop .hop-ngay .ngay { color: var(--mau-du-lieu); }
.hop.hoan .hop-ngay .ngay { text-decoration: line-through; color: var(--chu-nhat); }

.hop-noi-dung { min-width: 0; }
.hop .ten { font-size: 15px; font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hop .ten a { color: var(--chu); }
.hop .dong { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--chu-nhat); margin-top: 5px; }
.hop .dong > span { display: inline-flex; align-items: center; gap: 6px; }
.hop .dong .ic { color: var(--chu-mo); width: 15px; height: 15px; }
.hop .nhan-dong { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.hop .ghi-phu { font-size: 13px; color: var(--chu-nhat); margin-top: 7px; overflow-wrap: anywhere; }
.hop .ghi-phu.do { color: var(--do); }
.hop .cuoi { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; max-width: 440px; align-self: center; }
.hop.xong { background: var(--mat-2); }
.hop.xong .ten { color: var(--chu-nhat); }

/* ---------- Trống ---------- */
.trong-rong {
  text-align: center; padding: 44px 20px; color: var(--chu-nhat);
  border: 1px dashed var(--vien-dam); border-radius: var(--bo-goc); background: var(--mat);
}
.ds-hop .trong-rong { border: none; border-radius: 0; }
.trong-rong .vong { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; color: var(--chu-nhat); }
.trong-rong .vong .ic { width: 26px; height: 26px; }
.trong-rong b { display: block; color: var(--chu); font-size: 15px; margin-bottom: 4px; }

/* ---------- Bảng ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--vien); font-size: 14px; vertical-align: middle; }
th { color: var(--chu-nhat); font-size: 12px; font-weight: 400; }
tbody tr:hover { background: var(--mat-2); }
tbody tr:last-child td { border-bottom: none; }
.o-nguoi { display: flex; align-items: center; gap: 12px; }
.o-nguoi b { display: block; font-weight: 600; }
.o-nguoi small { color: var(--chu-nhat); font-size: 13px; }

/* ---------- Lưới hai cột ---------- */
.cot-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
/* Ô lưới mặc định không co nhỏ hơn nội dung (min-width: auto): một bảng rộng hay một tên dài
   là đẩy cả thẻ tràn ra ngoài màn hình điện thoại. Cho co lại, phần rộng tự cuộn ngang bên trong. */
.cot-2 > * { min-width: 0; }
#bangTaiKhoan { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cot-phai { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Chọn người (danh sách có ô tích) ---------- */
.loc-nguoi { margin-bottom: 8px; }
.chon-nguoi {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 4px; background: var(--mat);
}
.chon-nguoi label {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 10px; border-radius: 6px; font-weight: 400; font-size: 14px; color: var(--chu);
  cursor: pointer;
}
.chon-nguoi label:hover { background: var(--mat-2); }
.chon-nguoi label:has(input:checked) { background: var(--mat-hover); }
.chon-nguoi .dai-dien { width: 28px; height: 28px; font-size: 11px; }
.chon-nguoi small { color: var(--chu-mo); margin-left: auto; font-size: 12px; }

/* ---------- Hàng "thời gian bắt đầu | thời lượng" ---------- */
.hang-gio { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; }

/* ---------- Hộp thoại ---------- */
dialog {
  border: none; border-radius: var(--bo-goc-to); padding: 0;
  width: var(--rong-hop, 480px); max-width: calc(100vw - 32px);   /* --rong-hop: hộp thoại rộng hơn (phong-mo-rong.js) */ box-shadow: var(--bong-3); color: var(--chu);
  max-height: calc(100vh - 48px);
}
dialog[open] { animation: hien-hop .18s ease-out; }
@keyframes hien-hop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog > * { margin-left: 24px; margin-right: 24px; }
/* Ô nhập nằm thẳng trong hộp thoại: width 100% cộng lề 2 × 24px là tràn mép phải, hiện thanh cuộn ngang
   (đổi mật khẩu, mật khẩu cuộc họp, lý do hoãn, ghi chú tài liệu…). Trừ phần lề ra. */
dialog > :is(input, select, textarea) { width: calc(100% - 48px); }
dialog > .o-tich { margin-left: 24px; margin-right: 24px; }
dialog > h3 {
  margin-top: 22px; margin-bottom: 4px; font-size: 18px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
dialog > h3 .ic { color: var(--chu-nhat); width: 22px; height: 22px; }
dialog > p:first-of-type { margin-top: 0; }
.nut-hop-thoai {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 0 !important; padding: 14px 24px; border-top: 1px solid var(--vien); background: var(--mat-2);
}

.loi { color: var(--do); font-size: 13px; min-height: 18px; margin-top: 8px; }
.loi:empty { min-height: 0; margin: 0; }
.mo-chu { color: var(--chu-nhat); font-size: 13px; }

.o-tich {
  display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 0;
  padding: 12px 14px; border: 1px solid var(--vien); border-radius: var(--bo-nho);
  background: var(--mat); font-weight: 400; color: var(--chu); cursor: pointer; transition: border-color .12s, background .12s;
}
.o-tich:hover { border-color: var(--vien-dam); }
.o-tich:has(input:checked) { border-color: var(--chu); }
.o-tich input { margin-top: 2px; flex: none; }
.o-tich span { line-height: 1.45; font-size: 14px; }

/* ---------- Thông báo nổi (toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--muc); color: var(--chu-tren-muc); padding: 12px 18px; border-radius: 8px;
  font-size: 14px; box-shadow: var(--bong-3); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Quả chuông thông báo ---------- */
.o-chuong { position: relative; }
.o-chuong .chuong {
  position: relative; background: transparent; color: var(--chu-nhat); box-shadow: none;
  border: 1px solid transparent; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%;
}
.o-chuong .chuong:hover { background: var(--mat-hover); color: var(--chu); }
.o-chuong .chuong .ic { width: 20px; height: 20px; }

/* Cuộc họp quá giờ chưa kết thúc chặn việc lập họp mới (trang-chu.js veHopTreo) */
.hop-treo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hop-treo > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--bo-nho);
  background: var(--do-nen); color: var(--chu); font-weight: 500; }
.hop-treo > div > span { flex: 1 1 200px; min-width: 0; }

/* Ô chọn phòng họp trước ô địa điểm gõ tay (public/js/chung.js ganChonPhong) */
.chon-phong + input:not([hidden]) { margin-top: 8px; }
.chon-phong.dang-ban { border-color: var(--do); }

/* Trang Phòng họp: lịch sử dụng phòng theo ngày (public/js/lich-phong.js) */
.thanh-ngay-phong { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.thanh-ngay-phong input[type="date"] { width: auto; min-height: 38px; }
.lich-phong { overflow-x: auto; }
.lp-dau, .lp-hang { display: grid; grid-template-columns: 180px minmax(560px, 1fr); }
.lp-dau { border-bottom: 1px solid var(--vien); background: var(--mat-2); position: sticky; top: 0; }
.lp-gio { position: relative; height: 30px; }
.lp-gio span { position: absolute; top: 8px; font-size: 11px; color: var(--chu-mo); transform: translateX(-50%); white-space: nowrap; }
.lp-gio span:first-child { transform: none; padding-left: 4px; }
.lp-hang + .lp-hang { border-top: 1px solid var(--vien); }
.lp-ten { padding: 10px 14px; border-right: 1px solid var(--vien); min-width: 0; }
.lp-ten b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ten small { font-size: 12px; color: var(--chu-mo); }
#phQuanLy { margin-top: 22px; }
.lp-truc { position: relative; min-height: 64px;
  background-image: linear-gradient(to right, var(--vien) 1px, transparent 1px); background-size: calc(100% / var(--so-gio)) 100%; }  /* taste-skill-ignore: vạch giờ của lịch phòng, không phải màu chuyển */
.lich-phong.lap-duoc .lp-truc { cursor: copy; }
.lich-phong.lap-duoc .lp-truc:hover { background-color: var(--mat-2); }
.lp-khoi { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; padding: 4px 8px; overflow: hidden;
  font-size: 12px; line-height: 1.3; color: var(--chu); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  background: var(--mau-du-lieu-nen); border-left: 3px solid var(--mau-du-lieu); text-decoration: none; cursor: default; }
a.lp-khoi { cursor: pointer; }
a.lp-khoi:hover { text-decoration: none; filter: brightness(.96); }
.lp-khoi small { display: block; font-size: 11px; font-weight: 600; color: var(--chu-nhat); white-space: nowrap; }
.lp-khoi.lich { background: var(--mat-hover); border-left-color: var(--chu-nhat); }
.lp-bay-gio { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--mau-du-lieu); pointer-events: none; }
.bang-phong { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bang-phong th { text-align: left; font-size: 12px; font-weight: 600; color: var(--chu-nhat); padding: 10px 14px; border-bottom: 1px solid var(--vien); }
.bang-phong td { padding: 10px 14px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
.bang-phong tr:last-child td { border-bottom: none; }
.bang-phong tr.ngung td { color: var(--chu-mo); }
.bang-phong .nut-dong { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .lp-dau, .lp-hang { grid-template-columns: 110px minmax(520px, 1fr); }
  .lp-ten { padding: 8px 10px; position: sticky; left: 0; background: var(--mat); z-index: 1; }
  .bang-phong thead { display: none; }
  .bang-phong tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--vien); }
  .bang-phong td { display: block; border: none; padding: 2px 14px; }
  .bang-phong td[data-nhan]:not(:first-child)::before { content: attr(data-nhan) ": "; color: var(--chu-nhat); font-size: 12px; }
  .bang-phong .nut-dong { text-align: left; padding-top: 6px; }
}

/* Nút giao diện sáng / tối cạnh quả chuông (public/js/giao-dien.js dựng SVG).
   Sáng: mặt trời nhô lên khỏi dãy núi. Tối: mặt trời lặn sau núi, mặt trăng mọc, sao nhấp nháy.
   Thiên thể bị cắt theo sống núi (clipPath) nên trông như khuất sau núi thật. */
.o-giao-dien .chuong svg { width: 22px; height: 22px; overflow: visible; }
.gd-nui { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gd-troi, .gd-trang { transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.gd-troi { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition-delay: .3s; }
.gd-troi circle { fill: #fbbf24; }
.gd-tia { transform-box: fill-box; transform-origin: center; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .3s; }
.gd-trang { fill: #c7d2fe; stroke: #a5b4fc; stroke-width: 1; transform: translateY(12px); opacity: 0; transition-delay: 0s; }
.gd-sao { fill: #e0e7ff; opacity: 0; transition: opacity .4s ease; }
:root[data-theme="dark"] .gd-troi { transform: translateY(12px); opacity: 0; transition-delay: 0s; }
:root[data-theme="dark"] .gd-tia { transform: rotate(-90deg); transition-delay: 0s; }
:root[data-theme="dark"] .gd-trang { transform: none; opacity: 1; transition-delay: .3s; }
:root[data-theme="dark"] .gd-sao { opacity: 1; transition-delay: .9s; animation: gd-lap-lanh 2.6s ease-in-out 1.3s infinite; }
:root[data-theme="dark"] .gd-sao + .gd-sao { animation-delay: 2.2s; }
@keyframes gd-lap-lanh { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .gd-troi, .gd-trang, .gd-tia, .gd-sao { transition: none !important; animation: none !important; }
}
.o-chuong .chuong.rung .ic { animation: rung-chuong .9s ease; transform-origin: 50% 10%; }
@keyframes rung-chuong {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); }
  45% { transform: rotate(-10deg); }  60% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); }
}
.dem-chuong {
  position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 99px; background: var(--do-dac); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
}
.hop-chuong {
  position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: calc(100vw - 24px);
  background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); box-shadow: var(--bong-3);
  display: none; z-index: 50; overflow: hidden;
}
.hop-chuong.hien { display: block; animation: hien-ra .14s ease-out; }
.dau-chuong { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--vien); }
.dau-chuong b { font-size: 15px; }
.ds-chuong { max-height: min(440px, 62vh); overflow-y: auto; }
.ds-chuong .tin {
  display: flex; gap: 12px; padding: 12px 16px; text-decoration: none;
  color: var(--chu); border-bottom: 1px solid var(--vien); position: relative;
}
.ds-chuong .tin:last-child { border-bottom: none; }
.ds-chuong .tin:hover { background: var(--mat-2); text-decoration: none; }
.ds-chuong .tin.moi { background: var(--xanh-50); }
.ds-chuong .tin.moi::after { content: ""; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--mau-du-lieu); }
.ds-chuong .tin .bt { width: 20px; height: 20px; display: grid; place-items: center; flex: none; color: var(--chu-nhat); margin-top: 1px; }
.ds-chuong .tin .bt .ic { width: 17px; height: 17px; }
.ds-chuong .tin .nd { display: block; font-size: 13px; line-height: 1.45; padding-right: 14px; }
.ds-chuong .tin .luc { display: block; font-size: 12px; color: var(--chu-mo); margin-top: 3px; }

/* ---------- Lịch công tác ---------- */
.dau-lich { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dau-lich .thang { font-size: 18px; font-weight: 700; min-width: 170px; margin: 0 6px; }
.chu-giai { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--chu-nhat); }
.chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.chu-giai i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.luoi-lich {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden;
}
.luoi-lich .dau-thu {
  color: var(--chu-nhat); text-align: center; border-bottom: 1px solid var(--vien);
  font-size: 12px; font-weight: 400; padding: 10px 2px;
}
.o-ngay {
  min-height: 116px; padding: 8px; border-right: 1px solid var(--vien); border-bottom: 1px solid var(--vien);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.o-ngay:nth-child(7n) { border-right: none; }
.o-ngay.ngoai-thang { background: var(--mat-2); }
.o-ngay .so { font-size: 13px; font-weight: 600; color: var(--chu); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.o-ngay .so .thu-dt { display: none; }
.o-ngay.ngoai-thang .so { color: var(--chu-mo); font-weight: 400; }
.o-ngay.hom-nay .so { background: var(--mau-du-lieu); color: var(--chu-tren-muc); }
.o-ngay .viec-ds { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-ngay .viec {
  display: block; width: 100%; text-align: left; font-size: 12px; font-weight: 500; line-height: 1.35;
  padding: 4px 7px; min-height: 0; border-radius: 6px; border: none; box-shadow: none;
  border-left: 3px solid var(--vien-dam); background: var(--mat-2); color: var(--chu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.o-ngay .viec.hop { border-left-color: var(--chu); }
.o-ngay .viec:hover { filter: brightness(.96); }
.o-ngay .viec.hoan { border-left-color: var(--do); background: var(--do-nen); color: var(--do); text-decoration: line-through; }
.o-ngay .viec.ket-thuc, .o-ngay .viec.qua-gio { opacity: .55; }

/* ============================================================
   MÁY TÍNH BẢNG
   ============================================================ */
@media (max-width: 1180px) {
  .hang-so { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-2 { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1024px) {
  .khung { padding: 24px 20px 56px; }
  .thanh-tren { padding: 0 20px; }
  .cot-2 { grid-template-columns: minmax(0, 1fr); }
  .hop { grid-template-columns: 56px minmax(0, 1fr); }
  .hop-ngay { width: 56px; }
  .hop .cuoi { grid-column: 2; justify-content: flex-start; max-width: none; }
}

/* ============================================================
   ĐIỆN THOẠI — thanh bên thành THANH ĐÁY như ứng dụng di động
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .thanh-ben { display: none; }
  .vung-chinh { margin-left: 0; padding-bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom)); }

  .thanh-tren { padding: 0 12px 0 16px; height: 52px; gap: 6px; }
  .thanh-tren .tieu-de-trang-tren { display: none; }
  .thanh-tren .thuong-hieu-nho { display: flex; align-items: center; gap: 10px; color: var(--chu); font-weight: 600; font-size: 15px; }
  .thanh-tren .thuong-hieu-nho .logo { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--xanh-600); }
  .thanh-tren .thuong-hieu-nho .logo .ic { color: var(--chu-tren-muc); }
  .tai-khoan .ten, .tai-khoan .mo > .ic { display: none; }
  .tai-khoan > .mo { padding: 4px; }
  .menu-tha, .hop-chuong { position: fixed; left: 8px; right: 8px; top: 64px; width: auto; max-width: none; min-width: 0; }

  .thanh-duoi {
    display: grid; grid-template-columns: repeat(var(--so-muc, 4), 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--mat); border-top: 1px solid var(--vien);
  }
  .thanh-duoi button {
    flex-direction: column; gap: 3px; background: transparent; color: var(--chu-mo); box-shadow: none; border: none;
    border-radius: 0; padding: 8px 2px 6px; min-height: 0; font-size: 12px; font-weight: 500; position: relative;
  }
  .thanh-duoi button .ic { width: 22px; height: 22px; }
  .thanh-duoi button.dang { color: var(--chu); font-weight: 600; }

  .khung { padding: 18px 14px 28px; }
  .tieu-de-trang { margin-bottom: 16px; }
  .tieu-de-trang h1 { font-size: 21px; }
  .tieu-de-trang p { font-size: 13px; }

  .hang-so { gap: 10px; margin-bottom: 18px; }
  .o-so { padding: 12px; gap: 10px; }
  .o-so .bong { width: 36px; height: 36px; border-radius: 10px; }
  .o-so .bong .ic { width: 19px; height: 19px; }
  .o-so .so { font-size: 21px; }
  .o-so .nhan-so { font-size: 12px; }

  .noi-bat { padding: 18px; gap: 14px; }
  .noi-bat h2 { font-size: 17px; }
  .noi-bat .nut-noi-bat { width: 100%; }

  .thanh-cong-cu .o-co-ic { max-width: none; flex: 1 1 100%; }
  /* Ô nhập có bề rộng tự nhiên ~20 ký tự: không đặt width 0 thì nó cộng với nút bên cạnh
     thành 405px trên màn 390px (đo 29/9/2026) */
  .hang-tim { flex: 1 1 100%; min-width: 0; }
  .hang-tim #oMaHop { flex: 1 1 0; width: 0; min-width: 0; }

  .hop { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .hop-ngay { width: 50px; }
  .hop-ngay .ngay { font-size: 19px; }
  .hop .ten { font-size: 14px; }
  .hop .cuoi { grid-column: 1 / -1; }
  .hop .cuoi button { flex: 1 1 auto; }

  /* 16px: iOS không tự phóng to khi chạm vào ô nhập */
  input, select, textarea { font-size: 16px; }
  .hang-gio { grid-template-columns: 1fr; gap: 0; }

  dialog[open] {
    width: auto; max-width: none; margin: 0; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 18px 18px 0 0; max-height: 92vh; animation: truot-len .22s ease-out;
  }
  @keyframes truot-len { from { transform: translateY(40px); opacity: .6; } }
  dialog > * { margin-left: 18px; margin-right: 18px; }
  dialog > :is(input, select, textarea) { width: calc(100% - 36px); }
  dialog > .o-tich { margin-left: 18px; margin-right: 18px; }
  .nut-hop-thoai { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .nut-hop-thoai button { flex: 1; }

  /* Lịch tháng trên điện thoại: 7 cột thì mỗi cột 50px, không đọc được. Đổi sang danh
     sách theo ngày — xem lịch trên điện thoại là để biết hôm nay làm gì. */
  .luoi-lich { display: block; }
  .luoi-lich .dau-thu { display: none; }
  .o-ngay { min-height: 0; border-right: none; padding: 12px 14px; flex-direction: row; align-items: flex-start; gap: 12px; }
  .o-ngay .so { width: 44px; height: auto; border-radius: 6px; flex: none; flex-direction: column; font-size: 17px; padding: 4px 0; display: flex; align-items: center; background: var(--mat-2); }
  .o-ngay .so .thu-dt { display: block; font-size: 12px; font-weight: 500; color: var(--chu-nhat); }
  .o-ngay.hom-nay .so .thu-dt { color: #fff; }
  .o-ngay .viec-ds { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .o-ngay.trong-ngay { display: none; }
  .o-ngay .viec { white-space: normal; font-size: 13px; padding: 8px 10px; }
  .dau-lich .thang { min-width: 0; font-size: 16px; }
  .chu-giai { width: 100%; }
}

@media (max-width: 380px) {
  .hang-so { grid-template-columns: 1fr 1fr; }
  .o-so .bong { display: none; }
}

/* Các bước cài lên iPhone */
.buoc-cai { margin: 12px 24px 4px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.buoc-cai li::marker { color: var(--chu); font-weight: 600; }

/* ---------- Thông báo đẩy: dòng trong quả chuông + dải gợi ý ở Tổng quan ---------- */
.day-tb { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--vien); background: var(--mat-2); font-size: 13px; }
.day-tb > .ic { color: var(--chu-nhat); margin-top: 1px; }
.day-tb.da-bat { background: var(--luc-nen); }
.day-tb.da-bat > .ic { color: var(--luc); }
.day-tb.bi-chan, .day-tb.apk, .day-tb.khong-ho-tro { background: var(--cam-nen); }
.day-tb.bi-chan > .ic, .day-tb.apk > .ic { color: var(--cam); }
.day-tb > div { flex: 1; min-width: 0; }
.day-tb b { display: block; font-weight: 600; }
.day-tb small { display: block; color: var(--chu-nhat); margin-top: 2px; line-height: 1.45; }
/* Gợi ý bật thông báo: một dòng mảnh, nút viền — không giành chỗ của cuộc họp (20/10/2026) */
.goi-y-tb {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 8px 8px 8px 14px;
  background: var(--mat-2); border: 1px solid var(--vien); border-radius: var(--bo-goc); font-size: 13px;
}
.goi-y-tb > .ic { color: var(--chu-nhat); flex: none; }
.goi-y-tb .bong { display: none; }
.goi-y-tb > div { flex: 1; min-width: 0; }
.goi-y-tb b { font-weight: 600; }
.goi-y-tb small { color: var(--chu-nhat); font-size: 13px; margin-left: 6px; }
@media (max-width: 720px) {
  .goi-y-tb small { display: none; }       /* điện thoại: chỉ tiêu đề + nút + đóng, một dòng */
  .goi-y-tb [data-bat-day] { width: auto; flex: none; }
}

/* ================= TRANG CHỦ — nâng cấp 2/10/2026 ================= */
.dong-tl { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--vien); color: var(--chu); }
.dong-tl:last-child { border-bottom: none; }
.dong-tl:hover { background: var(--mat-2); text-decoration: none; }
.dong-tl b { display: block; font-weight: 600; }
.dong-tl small { display: block; color: var(--chu-nhat); font-size: 13px; }
.viec-ca { align-items: flex-start; }
.viec-ca .o-xong { width: 22px; height: 22px; margin: 4px 4px 0 0; flex: none; }
.viec-ca.xong .ten { text-decoration: line-through; color: var(--chu-nhat); }
.viec-ca.qua-han { border-left: 3px solid var(--do); }
.loc-thoi-gian { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.loc-thoi-gian input { width: auto; }
.bang-cuon { overflow-x: auto; }
.bang-tk { width: 100%; border-collapse: collapse; font-size: 14px; }
.bang-tk th { text-align: left; font-size: 12px; font-weight: 400; color: var(--chu-nhat); padding: 10px 14px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-tk td { padding: 10px 14px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-tk td:first-child { display: flex; align-items: center; gap: 8px; }
.bang-tk .chu-do { color: var(--do); }
.ty-le { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--mau-du-lieu-vach); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.ty-le i { display: block; height: 100%; background: var(--mau-du-lieu); }
.ty-le i.thap { background: var(--chu-nhat); }

/* ================= VÙNG BẤM TRÊN ĐIỆN THOẠI (đo 2/10/2026: 15 nút chỉ cao 34px) =================
   Khuyến nghị iOS / Android: tối thiểu 44px. Nút "nhỏ" trên máy tính vẫn nhỏ, chỉ to ra trên điện thoại. */
@media (max-width: 720px) {
  button, .nut { min-height: 44px; }
  button.nho, .nut.nho { min-height: 44px; padding: 8px 14px; }
  button.vuong, .nut.vuong, button.vuong.nho { width: 44px; }
}

/* Màn chào mừng đã bỏ 19/10/2026 (tasteskill: màn hình ứng dụng không có hoạt cảnh mở đầu; app Android có splash riêng). */

/* ============================================================
   LỊCH CÔNG TÁC THEO TUẦN (5/10/2026): bảng hành chính, ma trận lãnh đạo, in A4 ngang
   ============================================================ */
.ds-chuong .tin .bt.viec { background: var(--tim-nen); color: var(--tim); }
.cong-cu-lich { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cong-cu-lich select { width: auto; min-width: 150px; }
.nhom-nut { display: inline-flex; border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.nhom-nut button { border: none; border-radius: 0; box-shadow: none; margin: 0; }
.nhom-nut button + button { border-left: 1px solid var(--vien); }
.nhom-nut button[aria-pressed="true"] { background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu-dam); font-weight: 600; }

.o-ngay .viec.han { border-left-color: var(--cam); background: var(--cam-nen); color: var(--cam); }
.o-ngay .viec.han.sap-han { border-left-color: #ca8a04; background: var(--vang-nen); color: var(--vang-chu); }
.o-ngay .viec.han.qua-han { border-left-color: var(--do); background: var(--do-nen); color: var(--do); font-weight: 600; }
.o-ngay .viec.han.xong { opacity: .55; text-decoration: line-through; }

.vung-lich { min-width: 0; }
.trang-thai-lich { margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.dau-in { display: none; }
.bang-tuan {
  width: 100%; border-collapse: collapse; background: var(--mat); font-size: 13px;
  border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden;
}
.bang-tuan th { color: var(--chu-nhat); font-size: 12px; font-weight: 400; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vien); }
.bang-tuan td { padding: 8px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang-tuan td small { display: block; color: var(--chu-nhat); font-size: 12px; margin-top: 2px; }
.bang-tuan .o-thu { width: 92px; border-right: 1px solid var(--vien); }
.bang-tuan .o-thu b, .bang-tuan .o-thu span { display: block; }
.bang-tuan .o-thu span { color: var(--chu-nhat); font-size: 12px; }
.bang-tuan .o-thu.hom-nay { box-shadow: inset 3px 0 0 var(--mau-du-lieu); }   /* taste-skill-ignore: vạch chỉ báo "hôm nay" trong ô, không phải bóng; viền trái làm lệch ô gộp hàng */
.bang-tuan .o-thu.hom-nay b { color: var(--mau-du-lieu); }
.bang-tuan .o-gio { width: 56px; font-weight: 600; white-space: nowrap; }
.bang-tuan .dong-lich { cursor: pointer; }
.bang-tuan .dong-lich:hover td:not(.o-thu) { background: var(--mat-2); }
.bang-tuan .dong-lich.loai-hop .o-nd b { color: var(--chu); }
.bang-tuan .dong-lich.hoan td:not(.o-thu) { color: var(--do); text-decoration: line-through; }
/* Hàng hạn việc: không tô cả hàng (màu phải dưới 3 % mặt trang) — chỉ chữ giờ "Hạn" đổi màu khi sắp/quá hạn */
.bang-tuan .dong-lich.loai-han .o-gio { color: var(--chu-nhat); }
.bang-tuan .dong-lich.loai-han.sap-han .o-gio { color: var(--cam); font-weight: 600; }
.bang-tuan .dong-lich.loai-han.qua-han .o-gio { color: var(--do); font-weight: 600; }
.bang-tuan .dong-lich.loai-han.xong td:not(.o-thu) { opacity: .6; }
.bang-tuan .o-buoi { width: 54px; color: var(--chu-nhat); font-size: 12px; }
/* Hôm nay (7/10/2026): việc đã xong mờ đi, việc đang diễn ra có thanh tiến độ, vạch đỏ "bây giờ" giữa các việc */
.bang-tuan .o-gio { width: 96px; }
.bang-tuan .dong-lich.tt-xong td:not(.o-thu) { opacity: .55; }
.bang-tuan .dong-lich.tt-dang td:not(.o-thu) { background: var(--mau-du-lieu-nen); }
.bang-tuan .dau-tt { display: inline-block; width: 14px; margin-right: 3px; color: var(--chu-nhat); font-size: 11px; }
.bang-tuan .dau-tt.dang { color: var(--mau-du-lieu); }
.tien-trinh { height: 6px; border-radius: 3px; background: var(--mau-du-lieu-vach); margin: 6px 0 2px; overflow: hidden; max-width: 360px; }
.tien-trinh span { display: block; height: 100%; border-radius: 3px; background: var(--mau-du-lieu); }
.bang-tuan td small.chu-tien-trinh { color: var(--mau-du-lieu); font-weight: 500; }
.bang-tuan .vach-bay-gio td { padding: 0; height: 0; border-bottom: 1px solid var(--mau-du-lieu); position: relative; }
.bang-tuan .vach-bay-gio td.o-thu { padding: 8px 10px; height: auto; border-bottom: 1px solid var(--vien); }   /* ô ngày gộp hàng rơi vào hàng "bây giờ" thì giữ đệm như mọi ô ngày */
.nhan-bay-gio { position: absolute; left: 8px; top: -9px; background: var(--mau-du-lieu); color: var(--chu-tren-muc); font-size: 11px; font-weight: 600;
  line-height: 16px; padding: 0 6px; border-radius: 8px; white-space: nowrap; }
.o-ngay .viec.tt-xong { opacity: .55; }
.o-ngay .viec.tt-dang { border-left-color: var(--mau-du-lieu); background: var(--mau-du-lieu-nen); }
.bang-tuan.ma-tran td { min-width: 160px; }
.bang-tuan.ma-tran .o-thu { min-width: 88px; }
.bang-tuan.ma-tran .o-buoi { min-width: 0; }
.bang-tuan.ma-tran tr:not(.buoi-chieu) td { border-bottom-style: dashed; }
.muc-ld {
  display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 5px 8px; min-height: 0; font-size: 12.5px; font-weight: 500;
  border: none; border-left: 3px solid var(--vien-dam); background: var(--mat-2); color: var(--chu); border-radius: 6px;
}
.muc-ld.loai-hop { border-left-color: var(--chu); }
.cuon-ngang { overflow-x: auto; }
.bo-khoi-lich { margin: 10px 0 0; font-size: 13px; color: var(--cam); }
label.chon-mot { display: flex; gap: 8px; align-items: center; font-weight: 500; margin-top: 10px; }
label.chon-mot input { width: auto; min-height: 0; }

/* Thân hộp thoại cuộn được (trang phòng họp có sẵn ở style.css; trang chủ cần ở đây) */
.than-hop-thoai { max-height: min(62vh, 600px); overflow: auto; padding-bottom: 4px; }
/* Giao việc: mỗi người một ô chọn vai */
.chon-vai { max-height: 240px; overflow-y: auto; border: 1px solid var(--vien); border-radius: 10px; margin-top: 6px; }
.dong-vai { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--vien); }
.dong-vai:last-child { border-bottom: none; }
.dong-vai > span { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dong-vai select { width: 130px; flex: none; }

@media (max-width: 720px) {
  .cong-cu-lich .chu-nut, .tieu-de-trang .chu-nut { display: none; }
  .cong-cu-lich .nhom-nut { flex: 1 1 100%; }
  .cong-cu-lich .nhom-nut button { flex: 1; }
  .cong-cu-lich select { min-width: 0; flex: 1; }
  .cong-cu-lich .day-ra { display: none; }
  .dau-lich { gap: 6px; }
  .dau-lich .thang { order: -1; flex: 1 1 100%; margin: 0; font-size: 16px; }
  .chu-giai { gap: 10px; font-size: 12px; flex-wrap: wrap; }
  /* Bảng tuần trên điện thoại: mỗi việc một thẻ, ngày là dòng tiêu đề */
  .bang-tuan:not(.ma-tran), .bang-tuan:not(.ma-tran) tbody, .bang-tuan:not(.ma-tran) tr, .bang-tuan:not(.ma-tran) td { display: block; width: auto; }
  .bang-tuan:not(.ma-tran) thead { display: none; }
  .bang-tuan:not(.ma-tran) .o-thu { width: auto; display: flex; gap: 8px; align-items: baseline; border-right: none; padding: 10px 12px; }
  .bang-tuan:not(.ma-tran) .dong-trong { display: none; }
  .bang-tuan:not(.ma-tran) .dong-lich td { border-bottom: none; padding: 2px 12px; }
  .bang-tuan:not(.ma-tran) .dong-lich td:empty { display: none; }
  .bang-tuan:not(.ma-tran) .dong-lich .o-gio { padding-top: 10px; color: var(--xanh-700); }
  .bang-tuan:not(.ma-tran) .dong-lich td:last-child { padding-bottom: 10px; border-bottom: 1px solid var(--vien); }
  .bang-tuan:not(.ma-tran) td[data-nhan]::before { content: attr(data-nhan) ": "; color: var(--chu-nhat); font-size: 12px; }
  .bang-tuan:not(.ma-tran) .vach-bay-gio td { margin: 10px 12px 12px; }
  .bang-tuan:not(.ma-tran) .dong-lich .o-gio { width: auto; }
  .dong-vai select { width: 112px; }
}

/* In lịch tuần: A4 ngang, chỉ phần lịch, đầu trang có tên cơ quan và số tuần */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; }
  body * { visibility: hidden; }
  .vung-in, .vung-in * { visibility: visible; }
  .vung-in { position: absolute; left: 0; top: 0; width: 100%; }
  .dau-in { display: block; text-align: center; margin-bottom: 8px; color: #000; }
  .dau-in-cq { text-align: left; font-size: 12px; }
  .dau-in h2 { font-size: 16px; margin: 6px 0 2px; }
  .dau-in p { margin: 0; font-size: 12px; font-style: italic; }
  .trang-thai-lich, .cuon-ngang { overflow: visible; }
  .trang-thai-lich { display: none; }
  .bang-tuan { box-shadow: none; border: 1px solid #000; font-size: 11px; color: #000; }
  .bang-tuan th, .bang-tuan td { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; padding: 4px 6px; }
  .bang-tuan tr { break-inside: avoid; }
  .bang-tuan .dong-trong .mo-chu { color: #000; }
  .nhan.cam { display: none; }                       /* "chờ phát hành" là ghi chú nội bộ, không in */
  /* Đầu văn bản (6/10/2026, đề xuất L5 đợt hai): cơ quan + số bên trái, quốc hiệu + ngày bên phải; khối ký cuối bên phải */
  .dau-vb { display: flex; justify-content: space-between; gap: 24px; text-align: center; font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
  .dau-vb-trai { flex: 0 0 38%; }
  .dau-vb-phai { flex: 1; }
  .dau-vb .so-vb { display: inline-block; margin-top: 4px; }
  .dau-in .ghi-chu-in { font-size: 10.5px; font-style: italic; margin-top: 2px; }
  .chan-in { display: flex; justify-content: flex-end; margin-top: 14px; break-inside: avoid; color: #000; }
  .chan-in-ky { width: 40%; text-align: center; font-size: 12px; line-height: 1.5; }
  .chan-in-ky .cho-ky { display: block; height: 60px; }   /* chỗ ký tay / ký số */
  .nut-doi-ngay { display: none !important; }
  .nhan { border: 1px solid #000; background: #fff !important; color: #000 !important; }
  .muc-ld { background: #fff !important; color: #000 !important; border-left: none; padding: 0; }
  /* Bản in là lịch chính thức: không in vạch "bây giờ", thanh tiến độ, dấu trạng thái, không làm mờ việc đã xong */
  .vach-bay-gio, .tien-trinh, .chu-tien-trinh, .dau-tt { display: none !important; }
  .bang-tuan .dong-lich.tt-xong td { opacity: 1 !important; }
}

/* ============================================================
   CÂY TỔ CHỨC ở trang Tài khoản (5/10/2026): cơ quan → phòng ban → người
   ============================================================ */
.cay-tk { padding: 4px 0 8px; }
.nut-cay > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--vien); background: var(--mat-2);
  padding-left: calc(16px + var(--sau, 0) * 20px);
}
.nut-cay > summary::-webkit-details-marker { display: none; }
.nut-cay > summary::before { content: "▸"; color: var(--chu-mo); font-size: 12px; transition: transform .15s; }
.nut-cay[open] > summary::before { transform: rotate(90deg); }
.ten-dv { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ten-dv b { overflow: hidden; text-overflow: ellipsis; }
.con-cay .dong-tk { padding-left: calc(36px + var(--sau, 0) * 20px); }
.dong-tk { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--vien); flex-wrap: wrap; }
.dong-tk .o-nguoi { flex: 1; min-width: 180px; }
.nhan-tk { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.nut-tk { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.chua-xep > summary { background: var(--cam-nen); }
.dong-vai > span > span { display: flex; flex-direction: column; min-width: 0; }
.dong-vai small { color: var(--chu-nhat); font-size: 12px; }
.nhom-chon { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.nhom-chon label { display: flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; }
.nhom-chon input { width: auto; min-height: 0; }
@media (max-width: 720px) {
  .con-cay .dong-tk { padding-left: 16px; }
  .nut-cay > summary { padding-left: calc(12px + var(--sau, 0) * 10px); flex-wrap: wrap; }
  .nut-cay > summary .ten-dv { min-width: 62%; }
  .nut-tk .chu-nut { display: none; }
}
/* Chuyển giữa hai mục quản trị (Tài khoản · Cơ cấu tổ chức) — cần nhất trên điện thoại, nơi thanh đáy chỉ có một nút "Quản trị" */
.chuyen-qt { margin-bottom: 14px; }
.huong-dan-cc p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) { .chuyen-qt { display: flex; } .chuyen-qt button { flex: 1; } }

/* Lịch tháng: cuộc họp đang diễn ra phải khác cuộc họp sắp tới (trước đây trông giống hệt) */
.o-ngay .viec.hop.dang-dien-ra { border-left-color: var(--mau-du-lieu); background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu); font-weight: 600; }

/* Nhập nhiều tài khoản từ tệp mẫu */
.buoc-nhap { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 12px; }
.buoc-nhap li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.buoc-nhap li::marker { color: var(--chu); font-weight: 600; }
.buoc-nhap label.nut { cursor: pointer; margin: 0; }
.tong-nhap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; }
.bang-nhap { width: 100%; border-collapse: collapse; font-size: 13px; }
.bang-nhap th { text-align: left; background: var(--mat-2); color: var(--chu-nhat); font-size: 12px; padding: 7px 8px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-nhap td { padding: 7px 8px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang-nhap tr.loi td { background: var(--do-nen); }
.nut-nhap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* Thông tin tác giả (5/10/2026): chân màn chào, chân thanh bên, cuối menu tài khoản, trang đăng nhập */
.tac-gia { display: none; }
.tac-gia a, .tac-gia-menu a, .tac-gia-dn a, .dn-chan a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tac-gia-menu { font-size: 12px; line-height: 1.5; color: var(--chu-nhat); padding: 8px 14px 4px; border-top: 1px solid var(--vien); margin-top: 6px; }
.tac-gia-dn { display: none; font-size: 12px; line-height: 1.5; color: var(--chu-nhat); text-align: center; margin: 18px 0 0; }
@media (max-width: 1024px) { .thanh-ben .tac-gia { display: none; } }

/* ---------- Mời dự họp dạng cây cơ quan, giấy mời liên cơ quan (đợt 2, 5/10/2026) ---------- */
.cay-chon { max-height: 380px; }
.cay-chon details > summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.cay-chon details > summary::-webkit-details-marker { display: none; }
/* Mũi tên bung / gập: chữ ▸ xoay, không cần thêm biểu tượng */
.cay-chon details > summary::before { content: "▸"; color: var(--chu-mo); font-size: 12px; width: 10px; transition: transform .15s; }
.cay-chon details[open] > summary::before { transform: rotate(90deg); }
.cay-chon details > summary:hover { background: var(--mat-2); }
.cay-chon details > summary small { color: var(--chu-mo); margin-left: auto; font-size: 12px; font-weight: 400; }
.cay-chon .nhanh { padding-left: 18px; border-left: 1px dashed var(--vien); margin-left: 14px; }
.cay-chon .ten-dong, .chon-nguoi .ten-dong { min-width: 0; overflow-wrap: anywhere; }
.chon-nguoi label.mo-di { opacity: .55; cursor: not-allowed; }
.chon-nguoi label.mo-di small { flex: none; white-space: nowrap; }
.chon-nguoi label .ic.nho { color: var(--chu-mo); flex: none; }

/* Mời dự họp: hộp thoại lớn với cây cơ quan (5/10/2026) — thẻ trên form chỉ tóm tắt */
.da-chon-moi { display: flex; flex-wrap: wrap; gap: 6px; }
.da-chon-moi .mo-chu { margin: 0; }
.the-ten { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 10px; border-radius: 999px;
  background: var(--mat-hover); color: var(--chu); font-size: 13px; overflow-wrap: anywhere; }
.the-ten.co-quan { background: var(--mat-2); color: var(--chu); }
.the-ten.them { background: transparent; color: var(--chu-nhat); }
dialog.ht-moi-du { --rong-hop: min(1100px, calc(100vw - 32px)); height: min(88vh, 900px); }
dialog.ht-moi-du[open] { display: flex; flex-direction: column; }
dialog.ht-moi-du > h3 .nhan { font-size: 13px; font-weight: 600; }
dialog.ht-moi-du > .loc-nguoi { margin-top: 12px; }
.ht-moi-than { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.ht-moi-than:not(:has(#theGiayMoiDi:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.ht-moi-than > section { display: flex; flex-direction: column; min-height: 0; }
.ht-moi-than > section[hidden] { display: none; }
.ht-moi-than h4 { margin: 4px 0 4px; font-size: 14px; }
.ht-moi-than .mo-chu { margin: 0 0 8px; }
.ht-moi-than .cay-chon { flex: 1; min-height: 160px; max-height: none; }
@media (max-width: 760px) {
  dialog.ht-moi-du[open] { top: 0; height: 100dvh; max-height: none; border-radius: 0; }
  .ht-moi-than { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .ht-moi-than .cay-chon { flex: none; max-height: 60vh; }
}

/* Ô tìm người chủ trì: danh sách gợi ý thả xuống */
.tim-chu-tri { position: relative; }
.ds-goi-y {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 300px; overflow: hidden auto;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nho); box-shadow: var(--bong-3); padding: 4px;
}
.ds-goi-y button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; min-height: 0; white-space: normal;
  background: none; color: var(--chu); border: none; box-shadow: none; padding: 7px 10px; border-radius: 6px; font-weight: 400;
}
.ds-goi-y button:hover { background: var(--mat-2); }
.ds-goi-y button .dai-dien { width: 28px; height: 28px; font-size: 11px; flex: none; }
.ds-goi-y button span { display: flex; flex-direction: column; min-width: 0; }
.ds-goi-y button small { color: var(--chu-nhat); font-size: 12px; }
.ds-goi-y p { margin: 8px 10px; }

/* Giấy mời đến: mục đã qua gom dưới "Đã qua"; cuộn tới (/?tab=giaymoi) thì chừa chỗ thanh trên dính */
#mucGiayMoi { scroll-margin-top: 76px; }
.gm-da-qua > summary { padding: 10px 16px; font-size: 13px; color: var(--chu-nhat); cursor: pointer; border-top: 1px solid var(--vien); }
/* Phòng họp: mục "Cơ quan được mời" trong thông tin cuộc họp */
.ds-co-quan-moi { display: grid; gap: 8px; }
.dong-co-quan-moi small { display: block; color: var(--chu-nhat); font-size: 12.5px; margin-top: 2px; }

/* Ô chọn đơn vị dạng cây (public/js/chung.js chonDonViCay, 5/10/2026) — thay ô thả xuống khi cây có hàng nghìn đơn vị */
.chon-an { position: absolute !important; opacity: 0; width: 1px !important; height: 1px; pointer-events: none; }
.o-chon-cay {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 8px; min-height: 40px; padding: 8px 12px;
  background: var(--mat); color: var(--chu); border: 1px solid var(--vien); border-radius: var(--bo-nho); box-shadow: none;
  font-weight: 400; text-align: left; white-space: normal;
}
.o-chon-cay:hover { background: var(--mat-2); }
.o-chon-cay > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.o-chon-cay.trong > span { color: var(--chu-mo); }
.o-chon-cay .ic { color: var(--chu-mo); flex: none; }
dialog.ht-chon-cay { --rong-hop: min(640px, calc(100vw - 32px)); height: min(80vh, 760px); }
dialog.ht-chon-cay[open] { display: flex; flex-direction: column; }
dialog.ht-chon-cay > .loc-nguoi { margin-top: 12px; }
.chon-cay-than { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--vien); border-radius: var(--bo-nho); padding: 4px; }
.chon-cay-than button {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 8px; min-height: 34px; padding: 6px 8px;
  background: transparent; color: var(--chu); border: none; box-shadow: none; font-weight: 400; text-align: left;
}
.chon-cay-than button:hover { background: var(--mat-2); }
.chon-cay-than button.dang { background: var(--mat-hover); color: var(--chu); font-weight: 600; }
.chon-cay-than button.rong { color: var(--chu-nhat); font-style: italic; }
.chon-cay-than button.ket-qua { flex-direction: column; align-items: flex-start; gap: 2px; }
.chon-cay-than button.ket-qua small { color: var(--chu-mo); font-size: 12px; }
.chon-cay-than details > summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; }
.chon-cay-than details > summary::-webkit-details-marker { display: none; }
.chon-cay-than details > summary::before { content: "▸"; color: var(--chu-mo); font-size: 12px; width: 12px; flex: none; transition: transform .15s; }
.chon-cay-than details[open] > summary::before { transform: rotate(90deg); }
.chon-cay-than details > summary small { color: var(--chu-mo); font-size: 12px; padding-right: 8px; }
.chon-cay-than .la { padding-left: 16px; }
.chon-cay-than .nhanh { padding-left: 14px; border-left: 1px dashed var(--vien); margin-left: 6px; }
.chon-cay-than > .mo-chu { padding: 8px; margin: 0; }
@media (max-width: 760px) { dialog.ht-chon-cay[open] { height: 88dvh; } }
.chon-cay-than button { white-space: normal; }

/* ---------- Thống kê mở rộng (6/10/2026, đề xuất H4 + P3 đợt hai) — trang-chu.js taiThongKe ----------
   Bảng dùng lại .bang-phong (điện thoại xếp dọc theo data-nhan); ô số dùng lại .hang-so .o-so. */
.tk-hang { margin: 0 16px 8px; padding-top: 14px; }
.tk-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tk-de { font-size: 13px; font-weight: 600; color: var(--chu-nhat); margin: 14px 14px 4px; }
.tk-trong { padding: 16px 14px 20px; color: var(--chu-nhat); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.tk-trong .ic { color: var(--chu-mo); }
.bang-phong .chu-do { color: var(--do); }
.bang-phong .chu-luc { color: var(--luc); font-weight: 600; }
.bang-phong td small { display: inline; }
.bang-phong a { color: var(--chu); text-decoration: none; }
.bang-phong a:hover { text-decoration: underline; }
@media (max-width: 1000px) { .tk-hai-cot { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .tk-hang { margin: 0 10px 6px; } }
/* ---------- Ngày nghỉ, làm bù trên lịch; hộp thoại quản trị (6/10/2026, đề xuất L2 đợt hai) ----------
   Ngày nghỉ: nền đỏ nhạt + tên ngày lễ; thứ Bảy / Chủ nhật làm bù: nền xanh lục nhạt + chữ "làm bù". */
.bang-tuan .o-thu.nghi, .o-ngay.nghi { background: var(--do-nen); }
.bang-tuan .o-thu.nghi b { color: var(--do); }
.bang-tuan .o-thu.lam-bu, .o-ngay.lam-bu { background: var(--luc-nen); }
.bang-tuan .o-thu .ten-nghi, .o-ngay .ten-nghi { display: block; font-size: 11px; line-height: 1.3; margin-top: 3px; color: var(--do); overflow-wrap: anywhere; }
.bang-tuan .o-thu.lam-bu .ten-nghi, .o-ngay.lam-bu .ten-nghi { color: var(--luc); }
.o-ngay .ten-nghi { margin: 0 0 4px; }
.o-ngay.nghi .so, .o-ngay.lam-bu .so { font-weight: 700; }
dialog.ht-ngay-nghi { --rong-hop: min(640px, calc(100vw - 32px)); }
dialog.ht-ngay-nghi > h4 { margin: 18px 24px 6px; font-size: 14px; }
.nn-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.nn-dau label { margin: 0; }
.nn-dau input { width: 96px; }
/* Bảng trong hộp thoại: width 100% cộng lề 2 × 24px là tràn mép phải (như ô nhập, xem `dialog > :is(input…)`) */
dialog.ht-ngay-nghi > .bang-ngay-nghi { width: calc(100% - 48px); table-layout: fixed; font-size: 13px; }
.bang-ngay-nghi th { text-align: left; color: var(--chu-nhat); font-size: 12px; font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--vien); }
.bang-ngay-nghi td { padding: 4px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
.bang-ngay-nghi input, .bang-ngay-nghi select { width: 100%; min-width: 0; margin: 0; min-height: 36px; padding: 6px 8px; }
.bang-ngay-nghi th:first-child { width: 150px; }
.bang-ngay-nghi th:nth-child(3) { width: 110px; }
.bang-ngay-nghi th:last-child { width: 44px; }
.bang-ngay-nghi td:last-child { text-align: right; }
.bang-ngay-nghi .trong td { color: var(--chu-nhat); font-style: italic; padding: 10px 4px; }
.nn-gio { display: flex; gap: 18px; flex-wrap: wrap; }
.nn-gio label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.nn-gio input { width: auto; margin: 0; min-height: 36px; padding: 6px 8px; }
/* Cảnh báo mềm dưới ô giờ của form lập họp (đề xuất P1 đợt hai): không chặn, chỉ nhắc */
.canh-bao-mem { color: var(--cam); font-size: 13px; margin-top: 6px; line-height: 1.45; }
.canh-bao-mem:empty { display: none; }
@media (max-width: 760px) {
  /* Điện thoại: hộp thoại ~340px — ô ngày, ô loại thu nhỏ, bỏ lề ô để còn chỗ cho tên ngày lễ */
  .bang-ngay-nghi th:first-child { width: 118px; }
  .bang-ngay-nghi th:nth-child(3) { width: 86px; }
  .bang-ngay-nghi th:last-child { width: 34px; }
  .bang-ngay-nghi td { padding: 4px 2px; }
  .bang-ngay-nghi input, .bang-ngay-nghi select { padding: 6px 4px; font-size: 14px; }
}
/* ---------- Lịch đợt hai (6/10/2026, đề xuất L1, L3, L5): khe giờ gợi ý, nút dời, khối ký chỉ khi in ---------- */
.chan-in { display: none; }
.ds-khe:empty { display: none; }
.ds-khe { margin-top: 8px; }
.ds-khe > p { margin: 4px 0 6px; font-size: 13px; }
.ds-khe button[data-khe] {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin: 0 0 6px; padding: 8px 12px;
  min-height: 0; font-weight: 500; background: var(--mat-2); color: var(--chu); border: 1px solid var(--vien); box-shadow: none;
}
.ds-khe button[data-khe]:hover { border-color: var(--chu); }
.ds-khe button[data-khe].du { border-left: 3px solid var(--luc); }
.ds-khe button[data-khe] span { font-size: 12px; color: var(--chu-nhat); font-weight: 400; }
.hang-doi-gio { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bang-tuan .o-thu .nut-doi-ngay { margin-top: 6px; padding: 2px 8px; min-height: 0; font-size: 11.5px; color: var(--chu-nhat); white-space: nowrap; }
.bang-tuan .o-thu .nut-doi-ngay:hover { color: var(--chu); }
@media (max-width: 720px) { .bang-tuan:not(.ma-tran) .o-thu .nut-doi-ngay { margin: 0 0 0 auto; } }

/* ---------- Nhận tệp chia sẻ từ Zalo, Thư viện ảnh (7/10/2026, đợt ba mục C — public/chia-se.html) ----------
   Trang một cột hẹp, dùng được trên điện thoại 375px; màu đều là biến nên giao diện tối tự theo. */
.cs-khung { max-width: 640px; padding-top: 16px; }
.cs-khung .the + .the { margin-top: 14px; }
.cs-bao h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; color: var(--cam); }
.cs-bao p { margin: 0 0 14px; line-height: 1.55; }
.cs-ds-tep { list-style: none; margin: 0; padding: 0; }
.cs-ds-tep li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vien); }
.cs-ds-tep li:last-child { border-bottom: 0; }
.cs-ds-tep .cs-ten { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cs-ds-tep .cs-ten b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trang-thai { font-size: 12.5px; color: var(--chu-nhat); text-align: right; max-width: 40%; }
.cs-trang-thai.xong { color: var(--luc); }
.cs-trang-thai.hong { color: var(--do); }
.cs-trang-thai:empty { display: none; }
.trang-chia-se select { margin: 6px 0 0 24px; width: calc(100% - 24px); }
.trang-chia-se select:disabled { opacity: .5; }
.cs-viec-moi { margin: 0 0 0 24px; }
.cs-viec-moi label { margin-top: 10px; }
.cs-hai-o { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.cs-hai-o > div { min-width: 0; }     /* ô datetime-local có bề rộng tự nhiên to, không ép thì tràn khỏi thẻ ở 375px */
@media (max-width: 480px) {
  .trang-chia-se .dau-phong { padding: 10px 12px; }
  .trang-chia-se select, .cs-viec-moi { margin-left: 0; width: 100%; }
}
/* ---------- Passkey — vân tay / khoá máy (7/10/2026, đề xuất B đợt ba): nút ở trang đăng nhập, danh sách thiết bị ---------- */
.nut-van-tay { margin-top: 10px; }
.ds-passkey { list-style: none; padding: 0; margin: 12px 24px 0; border: 1px solid var(--vien); border-radius: var(--bo-nho); }
.ds-passkey li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--vien); }
.ds-passkey li:first-child { border-top: none; }
.ds-passkey li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-passkey li small { color: var(--chu-nhat); font-size: 12px; }
.ds-passkey li.trong { color: var(--chu-nhat); font-size: 13px; justify-content: center; }
.ds-passkey button { flex: none; }
/* ---------- Lịch cá nhân, giấy mời đính kèm việc (7/10/2026, đợt ba) ---------- */
.tep-lich:empty { display: none; }
.tep-lich { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--vien); }
.tep-lich h4 { margin: 0 0 4px; font-size: 13px; color: var(--chu-nhat); display: flex; align-items: center; gap: 6px; }
.tep-lich h4 button { margin-left: auto; }
.tep-lich ul { list-style: none; margin: 0; padding: 0; }
.tep-lich li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--vien); }
.tep-lich li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tep-lich li small { color: var(--chu-nhat); white-space: nowrap; }
.tep-lich .mo-chu { margin: 2px 0 0; font-size: 12.5px; }
.ic.dinh-kem-viec { color: var(--chu-nhat); margin-left: 2px; }
.vl-nguoi-khoa { padding: 6px 0; }

/* ---------- Giao diện tối (6/10/2026) ----------
   public/js/giao-dien.js đặt <html data-theme="dark|light"> TRƯỚC khi vẽ trang: theo lựa chọn trong
   menu tài khoản, hoặc theo máy nếu chọn "Theo máy". Chỉ đổi biến màu ở đây, các thành phần tự theo.
   Chỉ áp cho màn hình: bản in (lịch tuần, biên bản) luôn là giấy trắng chữ đen. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --muc: #ffffff; --muc-nhat: #e6e6e6; --chu-tren-muc: #0b0f16;
    --mau-du-lieu: #7aa7ea; --mau-du-lieu-nen: #15213a; --mau-du-lieu-vach: #24324d; --mau-du-lieu-dam: #c9dcf7;
    --xanh-950: #000000; --xanh-900: #111111; --xanh-800: #222222;
    --xanh-700: #7aa7ea; --xanh-600: #7aa7ea; --xanh-500: #7aa7ea;
    --xanh-100: #15213a; --xanh-50: #1a1a1a;

    --nen:       #000000;       /* một nền đen trung tính, bậc sáng làm phân lớp */
    --mat:       #111111;
    --mat-2:     #161616;
    --mat-hover: #222222;
    --mat-kinh:  #000000;
    --mat-kinh-dam: #111111;
    --vien:      #2a2a2a;
    --vien-dam:  #444444;
    --vien-xanh: #444444;
    --chu:       #ffffff;
    --chu-nhat:  #b4b4b4;
    --chu-mo:    #949494;
    --nen-giay:  #0a0a0a;

    --luc: #3fc07a;  --luc-nen: #172a1d;
    --cam: #e5a93b;  --cam-nen: #2b2414;
    --do:  #e5566f;  --do-nen:  #2c1a20;
    --tim: #c9dcf7;  --tim-nen: #15213a;
    --xanh-ngoc: #d4d4d4; --xanh-ngoc-nen: #222222; --xanh-ngoc-chu: #d4d4d4;
    --vang-nen: #2b2414; --vang-chu: #e5a93b;
    --nut-hover: #93b8f0; --do-dac: #c4242a; --cam-dac: #92400e; --luc-dac: #2e7d32;
    --bong-3: 0 12px 28px rgba(0, 0, 0, .6);
  }
}

/* ============================================================
   THIẾT KẾ LẠI 19–20/10/2026 — tasteskill, phương án 3 "Một sắc xanh, bậc thang nhạt" (accent-ladder).
   Khung chữ T: thanh bên 230px + thanh trên 64px cùng nền trang, chia bằng vạch 1px. Mục đang chọn: sắc nhạt,
   chữ đậm của màu hệ thống, biểu tượng xanh đặc. Nhóm "Làm việc" chữ thường. Tiêu đề màn 32px.
   Máy tính bảng (≤1024px) thu về thanh biểu tượng 56px; điện thoại (≤720px) gập xuống thanh đáy.
   ============================================================ */
.thanh-ben {
  background: var(--nen); color: var(--chu-nhat); border-right: 1px solid var(--vien);
  padding: 14px 12px; gap: 2px;
}
.thanh-ben .thuong-hieu { padding: 4px 8px 14px; color: var(--chu); }
.thanh-ben .thuong-hieu b { font-size: 15px; font-weight: 600; }
.thanh-ben .thuong-hieu .logo .ic { color: var(--chu-tren-muc); }
.nhom-dh { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--chu-nhat); padding: 10px 10px 4px; }
.muc-dh { height: 40px; min-height: 0; padding: 0 10px; gap: 10px; border-radius: 6px; font-size: 14px; color: var(--chu-nhat); }
.muc-dh .ic { color: inherit; width: 18px; height: 18px; }
.muc-dh:hover { background: var(--mat-hover); color: var(--chu); }
.muc-dh.dang { background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu-dam); font-weight: 600; }
.muc-dh.dang .ic { color: var(--mau-du-lieu); }
.muc-dh.dang::before { display: none; }
.muc-dh .so-dem { background: var(--do-dac); line-height: 18px; min-width: 18px; padding: 0 6px; font-size: 11px; text-align: center; }
.day-thanh-ben { margin-top: auto; }
.khung { max-width: 1248px; padding: 28px 32px 56px; }
.thanh-tren .tieu-de-trang-tren { font-size: 15px; font-weight: 600; color: var(--chu); }
.tieu-de-trang { margin-bottom: 20px; }
.tieu-de-trang h1 { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.tieu-de-trang p { font-size: 14px; }
.muc-dau h2 { font-size: 18px; }
.o-so .so { font-size: 24px; }
.dai-dien { background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu-dam); border-color: transparent; }
@media (max-width: 1024px) {
  :root { --rong-thanh-ben: 56px; }
  .thanh-ben { padding: 12px 0; align-items: center; }
  .thanh-ben .thuong-hieu { justify-content: center; padding: 0 0 14px; }
  .thanh-ben .thuong-hieu > span:not(.logo), .nhom-dh, .muc-dh .chu { display: none; }
  .muc-dh { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 8px; }
  .muc-dh .ic { width: 20px; height: 20px; }
  .muc-dh .so-dem { position: absolute; top: 4px; right: 4px; margin: 0; padding: 0 4px; min-width: 17px; line-height: 17px; }
}
@media (max-width: 720px) {
  .tieu-de-trang h1 { font-size: 26px; }
  .thanh-duoi button.dang { color: var(--mau-du-lieu); }
}
.tai-khoan > .mo { min-height: 40px; }
.menu-tha { border-radius: 8px; }
.hop-chuong { border-radius: 8px; }
/* Ô số liệu: dải chia vạch, giá trị 28/500 trên nhãn xám */
.hang-so .o-so { min-width: 0; }
@media (max-width: 1180px) { .hang-so .o-so:nth-child(3) { border-left: 0; } .hang-so .o-so:nth-child(n + 3) { border-top: 1px solid var(--vien); } }
@media (max-width: 720px) {
  .hang-so { gap: 0; }
  .o-so { padding: 12px 14px; }
  .o-so .so { font-size: 22px; }
  .o-so .nhan-so { font-size: 12px; }
}
@media (max-width: 380px) { .hang-so { grid-template-columns: 1fr 1fr; } }
/* Bảng: số cột phải, bảng-số đều */
td.so, th.so { text-align: right; font-variant-numeric: tabular-nums; }
/* Mục đang chạy trong chương trình họp, thanh biểu quyết, việc: màu dữ liệu */
.bq-thanh i { background: var(--mau-du-lieu); }

/* ---------- Tổng quan ưu tiên (20/10/2026): nhóm quá giờ, menu "Khác" trên thẻ cuộc họp ---------- */
.ghi-chu-muc { margin: -4px 0 10px; color: var(--chu-nhat); font-size: 13px; }
.menu-them { position: relative; }
.menu-them > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-them > summary::-webkit-details-marker { display: none; }
.menu-them[open] > summary { background: var(--mat-hover); }
.menu-them-ds {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 190px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong-3);
}
.menu-them-ds button { justify-content: flex-start; width: 100%; color: var(--chu); }
.menu-them-ds button.do { color: var(--do); }
.menu-them-ds button:hover { background: var(--mat-hover); }
.hop .cuoi { flex-wrap: nowrap; }
@media (max-width: 720px) {
  .hop .cuoi { flex-wrap: wrap; }
  .hop .cuoi > button { flex: 1 1 0; }
  .hop .cuoi > .menu-them { flex: none; order: -1; }
  .menu-them-ds { left: 0; right: auto; }
}
/* Danh sách cuộc họp không cắt tràn nữa để menu "Khác" ở hàng cuối không bị cụt; bo góc chuyển xuống hàng đầu/cuối */
.ds-hop { overflow: visible; }
.ds-hop > :first-child { border-top-left-radius: var(--bo-goc); border-top-right-radius: var(--bo-goc); }
.ds-hop > :last-child { border-bottom-left-radius: var(--bo-goc); border-bottom-right-radius: var(--bo-goc); }
/* Điện thoại: gợi ý thông báo gọn một dòng — có nút thì nút mang chữ, tiêu đề ẩn (iOS chưa cài app thì không có nút, giữ tiêu đề) */
@media (max-width: 720px) {
  .goi-y-tb:has([data-bat-day]) > div { display: none; }
  .goi-y-tb [data-bat-day] { flex: 1 1 auto; justify-content: flex-start; }
}

/* ---------- Việc (20/10/2026, lib/viec.js): ô bên trái là HẠN, màu theo tình trạng; không còn ô đánh dấu ---------- */
.viec-ca { grid-template-columns: 64px minmax(0, 1fr) auto; }
.viec-ca.qua-han { border-left: none; }
.han-viec .thang { padding-top: 4px; }
.viec-ca.sap-han .han-viec { border-color: var(--cam); }
.viec-ca.sap-han .han-viec .ngay { color: var(--cam); }
.viec-ca.qua-han .han-viec { border-color: var(--do); background: var(--do-nen); }
.viec-ca.qua-han .han-viec .ngay, .viec-ca.qua-han .han-viec .thang { color: var(--do); }
.viec-ca.da-xong .ten { text-decoration: none; color: var(--chu-nhat); }
.viec-ca.da-xong .han-viec { opacity: .6; }
.viec-ca.nhan-manh { background: var(--mau-du-lieu-nen); box-shadow: inset 3px 0 0 var(--mau-du-lieu); }   /* taste-skill-ignore: vạch đánh dấu việc mở từ lời nhắc, không phải bóng */
.nhat-ky-viec { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13px; line-height: 1.5; }
.nhat-ky-viec li::marker { color: var(--chu-nhat); }
@media (max-width: 720px) { .viec-ca { grid-template-columns: 50px minmax(0, 1fr); } }

/* ---------- Việc đợt hai (20/10/2026): checklist, ảnh tiến độ, chi tiết, lọc nhanh ---------- */
.loc-viec { margin: -6px 0 18px; flex-wrap: wrap; }
.loc-viec button[aria-pressed="true"] { background: var(--mau-du-lieu-nen); color: var(--mau-du-lieu-dam); font-weight: 600; }
.ds-muc-kiem { margin-top: 8px; font-size: 13px; }
.ds-muc-kiem > summary { cursor: pointer; color: var(--chu-nhat); font-weight: 500; }
.ds-muc-kiem ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ds-muc-kiem label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0; }
.ds-muc-kiem input { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ds-muc-kiem input:checked + span { text-decoration: line-through; color: var(--chu-nhat); }
.anh-tien-do { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.anh-tien-do img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vien); display: block; }
.chi-tiet-viec { margin-top: 12px; border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 8px 12px; }
.chi-tiet-viec > summary { cursor: pointer; font-weight: 500; color: var(--chu); }
.hai-o { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
@media (max-width: 480px) { .hai-o { grid-template-columns: 1fr; } }
li.chu-do > b { color: var(--do); }