/* ===================================================================
   SỔ TAY ĐIỀU HÀNH — BỘ GIAO DIỆN DÙNG CHUNG  (phong cách sáng)
   -------------------------------------------------------------------
   Mọi màn hình phải dùng lại các lớp trong file này.
   Không tự đặt màu, không tự đặt cỡ chữ rời rạc trong từng trang.

   PHÂN CẤP THỊ GIÁC DỰNG THEO 3 TRỤC:
     Trục 1 — ĐỘ ĐẬM NỀN   : nền trang trắng, phân tầng bằng VIỀN MẢNH
                             chứ không bằng nền đậm hay đổ bóng nặng
     Trục 2 — CỠ & ĐẬM CHỮ : --cho-11 … --cho-30 kèm 4 mức đậm
     Trục 3 — ĐỘ BÃO HOÀ   : xám cho mọi thứ thường trực,
                             màu bão hoà CHỈ dành cho thứ cần chú ý

   Xem toàn bộ component tại: /bo-component.html
   =================================================================== */

/* ---------- TOKEN ---------- */
:root{
  /* Trục 1 — nền & viền */
  --nen-app:#FFFFFF;      /* vùng nội dung          */
  --nen-ben:#FCFCFD;      /* thanh bên (sáng)       */
  --nen-the:#FFFFFF;      /* mặt thẻ                */
  --nen-chim:#F9FAFB;     /* vùng chìm, đầu bảng    */
  --nen-chon:#F2F4F7;     /* mục đang chọn          */
  --vien:#EAECF0;
  --vien-dam:#D0D5DD;

  /* Trục 2 — chữ */
  --chu-1:#101828;        /* chính */
  --chu-2:#475467;        /* phụ   */
  --chu-3:#98A2B3;        /* mờ    */

  --cho-11:11.5px; --cho-12:12px;  --cho-13:13px;  --cho-14:14px;
  --cho-15:15px;   --cho-16:16px;  --cho-20:20px;  --cho-30:30px;

  /* Trục 3 — bão hoà: 1 màu đậm + 1 nền nhạt + 1 viền cho mỗi sắc thái */
  --nhan:#0E7490;   --nhan-nen:#ECFDFF;  --nhan-vien:#A5F0FC;
  --ok:#067647;     --ok-nen:#ECFDF3;    --ok-vien:#ABEFC6;
  --canh:#B42318;   --canh-nen:#FEF3F2;  --canh-vien:#FECDCA;
  --tre:#B54708;    --tre-nen:#FFFAEB;   --tre-vien:#FEDF89;
  --cho:#6941C6;    --cho-nen:#F4F3FF;   --cho-vien:#D9D6FE;

  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:20px; --k6:24px; --k8:32px;

  /* BO GÓC — ba bậc, và mỗi bậc gắn với MỘT LOẠI VẬT, không phải với kích
     thước. Trước đây có bốn giá trị dùng tuỳ chỗ, nên hai nút cạnh nhau bo
     khác nhau (nút chữ 8px, nút ✕ 6px) và hai cái nhãn cạnh nhau cũng khác
     nhau (nhãn trạng thái tròn hẳn, số đếm trên thanh bên 6px). Không ai
     gọi tên được cái sai, nhưng mắt thấy là giao diện chưa xong.

       --bo-bam   thứ BẤM VÀO hoặc GÕ VÀO — nút, ô nhập, dòng chọn được
       --bo-mat   MẶT chứa nội dung — thẻ, hộp thoại, lịch, dải trời
       --bo-tron  thứ vốn là VIÊN — nhãn trạng thái, thẻ nội dung, thanh %

     Bậc thứ tư cũ (6px) đã bỏ hẳn: nó không mang nghĩa nào mà ba bậc trên
     chưa nói, chỉ là một cái tên để lỡ tay chọn nhầm. */
  --bo-bam:8px; --bo-mat:10px; --bo-tron:999px;
  --bong-1:0 1px 2px rgba(16,24,40,.05);
  --bong-2:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --bong-3:0 20px 48px rgba(16,24,40,.18);

  /* BÁO CHO TRÌNH DUYỆT BIẾT app đang mặc màu nào. Thiếu dòng này thì mọi
     thứ do TRÌNH DUYỆT tự vẽ vẫn ở chế độ sáng: thanh cuộn trắng toát bên
     cạnh nội dung tối, lịch bật ra từ ô chọn ngày nền trắng, và <button>
     không khai màu thì lấy chữ ĐEN TUYỀN. Một dòng, sửa cả một lớp lỗi. */
  color-scheme:light;

  --rong-ben:248px;

}

/* ===================================================================
   NỀN TỐI
   -------------------------------------------------------------------
   CHỈ ĐỔI TOKEN, không đổi một luật bố cục nào. Đây là phần thưởng của
   việc bắt mọi màn hình phải dùng token ngay từ đầu: cả chế độ tối gói
   gọn trong một khối, và màn hình mới viết sau này tự có nó.

   BỐN QUYẾT ĐỊNH, không cái nào là đảo ngược máy móc:

   1. KHÔNG DÙNG ĐEN TUYỀN, cũng không dùng trắng tuyền. Nền #101319 và
      chữ #E7EAF0. Đen tuyền cạnh trắng tuyền cho tương phản cực đại, và
      mắt phải căng ra đúng lúc đang đọc bảng số liệu 12px hàng giờ.

   2. MẶT NỔI LÊN BẰNG SÁNG DẦN, không bằng bóng đổ. Trên nền tối, bóng
      đổ gần như vô hình — thẻ càng nổi thì nền nó càng phải sáng hơn nền
      trang. Nên --nen-the sáng hơn --nen-app, ngược hẳn với nền sáng.

   3. MÀU SẮC THÁI ĐẢO VAI. Ở nền sáng: chữ đậm trên nền nhạt. Ở nền tối
      phải ngược lại — chữ SÁNG trên nền TỐI cùng sắc. Bê nguyên #B42318
      sang nền tối thì chữ đỏ chìm nghỉm.

   4. VIỀN PHẢI ĐẬM LÊN TƯƠNG ĐỐI. Cả giao diện này phân tầng bằng viền
      mảnh (trục 1). Viền quá mờ trên nền tối là mất luôn ngôn ngữ ấy —
      bảng biểu rã thành một đám chữ trôi nổi.
   =================================================================== */
:root[data-nen="toi"]{
  color-scheme:dark;

  /* MẶT NỀN — bốn bậc nền tối của Untitled UI, dùng nguyên tên vai trò của
     chúng. Thanh bên nhích SÁNG hơn trang một bậc: ở nền tối, tách hai vùng
     bằng cách làm tối thêm là không còn chỗ để tối, vì trang đã ở đáy thang. */
  --nen-app:#0C111D;      /* bg-primary    — nền trang           */
  --nen-ben:#161B26;      /* bg-secondary  — thanh bên           */
  --nen-the:#161B26;      /* bg-secondary  — mặt thẻ             */
  --nen-chim:#1F242F;     /* bg-tertiary   — vùng chìm, rê chuột */
  --nen-chon:#333741;     /* bg-quaternary — mục đang chọn       */

  /* VIỀN cố ý KHÔNG soi gương y hệt. Soi đúng bậc thì --vien rơi vào
     Gray-600 #61646C, mà một đường #61646C trên nền #0C111D nổi mạnh hơn
     hẳn cái mà Gray-200 làm trên nền trắng — nền tối khuếch đại đường sáng.
     Soi gương bằng SỐ không cho ra soi gương bằng MẮT. Nên lùi một bậc, và
     hai giá trị dưới đây đúng là hai token viền tối của chính hệ. */
  --vien:#333741;         /* border-primary   */
  --vien-dam:#61646C;     /* border-secondary */

  --chu-1:#F5F5F6;        /* text-primary    */
  --chu-2:#CECFD2;        /* text-secondary  */
  --chu-3:#94969C;        /* text-tertiary   */

  /* SẮC THÁI — soi gương đúng luật của bản sáng:
       sáng dùng  700 (chữ) · 50  (nền) · 200 (viền)
       tối  dùng  400 (chữ) · 950 (nền) · 800 (viền)
     Đã đo cả năm cặp chữ-trên-nền: thấp nhất 5.00, đều đạt AA. */
  --nhan:#22D3EE;   --nhan-nen:#083344;  --nhan-vien:#155E75;
  --ok:#47CD89;     --ok-nen:#053321;    --ok-vien:#085D3A;
  --canh:#F97066;   --canh-nen:#55160C;  --canh-vien:#912018;
  --tre:#FDB022;    --tre-nen:#4E1D09;   --tre-vien:#93370D;
  --cho:#9B8AFB;    --cho-nen:#27115F;   --cho-vien:#4A1FB8;

  /* Bóng đậm hẳn lên: cùng một lớp bóng nhạt kia trên nền tối là không
     thấy gì. Hộp thoại vẫn cần tách khỏi trang phía sau. */
  --bong-1:0 1px 2px rgba(0,0,0,.45);
  --bong-2:0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --bong-3:0 20px 48px rgba(0,0,0,.65);
}

/* ===================================================================
   CHUYỂN ĐỘNG — chỉ hai thứ, và cả hai đều TRẢ LỜI MỘT CÂU HỎI
   -------------------------------------------------------------------
   App này từng có một lớp nền động chạy suốt ngày. Nó bị bỏ, và lý do
   đáng ghi lại: nó không nói gì cả. Một công cụ mở tám tiếng mỗi ngày thì
   chuyển động phải làm việc, không phải làm cảnh — cái gì động mà không
   mang tin thì chỉ còn là thứ kéo mắt khỏi chỗ đáng nhìn.

   Hai chuyển động còn lại, mỗi cái trả lời đúng một câu:

     "Máy đang chạy hay đứng?"  → vạch mảnh trên đỉnh trang
     "Vừa xảy ra gì, ở đâu?"    → nhịp sáng trên đúng dòng vừa đổi

   Cả hai đều NGẮN, đều TỰ TẮT, và đều biến mất khi người dùng đã tắt hiệu
   ứng chuyển động.
   =================================================================== */

/* ---- Vạch báo đang gọi máy chủ ----
   Không phải thanh tiến trình thật: HTTP không cho biết đã xong bao nhiêu
   phần trăm, nên vẽ một cái vạch bò từ 0 đến 100 là bịa. Đây là vạch CHẠY
   QUA LẠI — nó chỉ khẳng định "còn sống", đúng bằng những gì ta biết. */
.vach-tai{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .2s ease;
}
.vach-tai--chay{opacity:1}
.vach-tai>i{
  display:block; position:absolute; inset:0 auto 0 0; width:38%;
  background:linear-gradient(90deg,transparent,var(--nhan),transparent);
}
.vach-tai--chay>i{animation:vach-chay 1.15s ease-in-out infinite}
@keyframes vach-chay{
  from{transform:translateX(-100%)}
  to  {transform:translateX(340%)}
}

/* ---- Nhịp sáng trên dòng vừa đổi ----
   MỘT LẦN rồi thôi, 1.1 giây. Nhấp nháy lặp lại thì thành báo động, mà đây
   không phải chuyện khẩn — chỉ là "chỗ này, cái vừa nãy".
   Tô bằng --nhan-nen, tức đúng cái nền vẫn dùng cho thứ đang được chú ý,
   nên nó không đem thêm một ngôn ngữ màu nào mới vào bảng. */
tr.co-the--vua-doi>td{animation:nhay-dong 1.1s ease-out 1}
@keyframes nhay-dong{
  0%,22%{background:var(--nhan-nen)}
  100%  {background:transparent}
}

@media (prefers-reduced-motion:reduce){
  .vach-tai--chay>i{animation:none; width:100%; opacity:.5}
  tr.co-the--vua-doi>td{animation:none; background:var(--nhan-nen)}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--nen-app); color:var(--chu-1);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:var(--cho-14); line-height:1.5; -webkit-font-smoothing:antialiased;
}
.bt{width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
    stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}

/* ===================================================================
   1. KHUNG TRANG
   =================================================================== */
.khung{display:flex; min-height:100vh}

.ben{
  width:var(--rong-ben); flex:none; background:var(--nen-ben);
  border-right:1px solid var(--vien);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.ben__hieu{display:flex; align-items:center; gap:var(--k2); padding:var(--k5) var(--k4) var(--k3)}
.hieu-o{width:30px; height:30px; border-radius:var(--bo-bam); background:var(--chu-1);
        display:grid; place-items:center; flex:none}
/* Chấm giữa ô hiệu. Ô hiệu tô bằng --chu-1, mà ở nền tối --chu-1 là màu
   gần trắng — chấm trắng trên nền trắng là mất hẳn. Lấy màu NỀN TRANG thì
   nó luôn tương phản với ô, ở cả hai chế độ. */
.hieu-o span{width:11px; height:11px; border-radius:50%; background:var(--nen-app); display:block}
.ben__hieu h1{margin:0; font-size:var(--cho-16); font-weight:700; letter-spacing:-.02em; flex:1}
.ben__tim{padding:0 var(--k3) var(--k3)}
.ben__than{flex:1; padding:0 var(--k2) var(--k3)}
.ben__chan{padding:var(--k3); border-top:1px solid var(--vien)}
.ben__toi{display:flex; align-items:center; gap:10px; margin-bottom:var(--k3)}
.ben__chu-cai{width:32px; height:32px; background:var(--nhan-nen); color:var(--nhan);
              font-weight:700; font-size:var(--cho-13)}
.ben__toi-ten{flex:1; min-width:0}
.ben__toi-ho-ten{font-size:var(--cho-13); font-weight:600;
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Tên mình bấm được. Trông y hệt chữ thường cho tới khi rê chuột vào — nó
   là một tiện ích, không phải một nút cần mời gọi. */
.ben__sua-ten{display:block; width:100%; padding:0; border:none; background:none;
              font:inherit; font-size:var(--cho-13); font-weight:600;
              color:var(--chu-1); text-align:left; cursor:pointer}
.ben__sua-ten:hover{text-decoration:underline; text-underline-offset:3px}
.ben__doi-vai{font-size:var(--cho-12); padding:6px 8px; margin-bottom:var(--k2)}
.ben__nut-nguoi{width:100%}
.ben__nut-thoat{width:100%; margin-top:var(--k2)}
.ben__lien-ket{display:block; margin-top:10px; text-decoration:none}

/* Ba nút chọn nền, dính liền thành một dải — hình dạng nói ngay rằng đây là
   MỘT lựa chọn ba đường, không phải ba cái nút rời bấm được cùng lúc. */
.chon-nen{display:flex; margin-top:var(--k2);
          border:1px solid var(--vien); border-radius:var(--bo-bam); overflow:hidden}
.chon-nen__nut{
  flex:1; min-width:0; padding:5px 4px; border:none; background:none;
  font:inherit; font-size:var(--cho-11); font-weight:600; color:var(--chu-3);
  cursor:pointer; white-space:nowrap;
}
.chon-nen__nut+.chon-nen__nut{border-left:1px solid var(--vien)}
.chon-nen__nut:hover{background:var(--nen-chim); color:var(--chu-2)}
.chon-nen__nut--chon,
.chon-nen__nut--chon:hover{background:var(--nen-chon); color:var(--chu-1)}

.ben__nhom{
  font-size:var(--cho-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--chu-3); padding:var(--k4) var(--k3) var(--k1);
}
.muc{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border-radius:var(--bo-bam); border:none; background:none;
  color:var(--chu-2); font:inherit; font-size:var(--cho-14); font-weight:500;
  cursor:pointer; margin-bottom:1px; text-decoration:none;
}
.muc:hover{background:var(--nen-chon)}
.muc--chon, .muc--chon:hover{background:var(--nen-chon); color:var(--chu-1); font-weight:600}
.muc__ten{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Số đếm là một cái NHÃN, cùng loài với .the — nên tròn hẳn, không bo 8px
   như nút. Đây đúng là chỗ luật bo góc cũ trượt: hai vật cùng loài nằm cách
   nhau nửa màn hình mà mang hai hình khác nhau. */
.muc__dem{font-size:var(--cho-12); font-weight:600; color:var(--chu-2);
          background:var(--nen-app); border:1px solid var(--vien);
          border-radius:var(--bo-tron); padding:0 7px; min-width:22px; text-align:center}
.muc .bt{color:var(--chu-3)}
.muc--chon .bt{color:var(--nhan)}

/* KHÔNG tô nền: để lớp nền sống hiện qua. Nền trang đã do <body> tô, nên
   vùng này trong suốt vẫn ra đúng màu, chỉ thêm phần quầng sáng phía sau. */
.vung{flex:1; min-width:0; display:flex; flex-direction:column}
/* Thanh tiêu đề DÍNH, nằm trên lớp nền sống. Nếu tô đặc bằng --nen-app thì
   chân thanh thành một đường gãy: phía trên đặc, phía dưới trong suốt để lộ
   quầng sáng. Nên tô MỜ và làm nhoè thứ phía sau — vừa liền mạch với nền,
   vừa che được nội dung cuộn lên dưới gầm nó.
   Máy không hỗ trợ backdrop-filter thì rơi về nền đặc như cũ: mất cái đẹp,
   không mất cái đọc được. */
.thanh{
  border-bottom:1px solid var(--vien); background:var(--nen-app);
  padding:var(--k5) var(--k6); display:flex; align-items:center; gap:var(--k3); flex-wrap:wrap;
  position:sticky; top:0; z-index:5;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .thanh{
    background:color-mix(in srgb, var(--nen-app) 78%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
}
.thanh__day{flex:1; min-width:180px}
.thanh h2{margin:0; font-size:var(--cho-30); font-weight:700; letter-spacing:-.025em; line-height:1.2}
.thanh p{margin:3px 0 0; font-size:var(--cho-13); color:var(--chu-3)}
/* CANH GIỮA trên màn rộng. Bó 1120px là đúng — dòng dài hơn thì mắt lạc
   hàng — nhưng bó rồi mà vẫn dán vào mép trái thì trên màn 1920 nội dung
   nằm lệch hẳn một bên, để trống 800px bên phải. */
/* `--le` là lề ngang của khung nội dung, khai thành biến để thứ cần TRÀN RA
   sát mép khung (dải trời trên Trang chủ) tự bám theo mọi khổ màn — không
   phải chép lại con số ở từng điểm ngắt rồi quên mất một chỗ. */
.than{--le:var(--k6); padding:var(--le); max-width:1120px; width:100%; margin-inline:auto}

/* ===================================================================
   2. NÚT
   =================================================================== */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:inherit; font-size:var(--cho-14); font-weight:600; cursor:pointer;
  padding:9px 14px; border-radius:var(--bo-bam); border:1px solid transparent;
  background:none; color:var(--chu-2); white-space:nowrap;
}
.nut:disabled{opacity:.5; cursor:not-allowed}

/* ĐANG CHẠY — cú bấm đã nhận, đang chờ máy chủ.
   Đặt trên [aria-busy] chứ không chỉ trên một lớp CSS: thuộc tính ấy vừa
   là cái móc để tô màu, vừa là điều DUY NHẤT trình đọc màn hình hiểu được.
   Một cái nút chỉ mờ đi thì người khiếm thị không biết gì đã xảy ra.

   Mờ đi và ĐỔI CON TRỎ. Không thay chữ trên nút thành "Đang lưu…" như biểu
   mẫu vẫn làm: nút rời thường chỉ rộng bằng chữ của nó, đổi chữ là nút co
   giãn ngay dưới ngón tay, và những nút chỉ có một dấu ✕ thì không có chỗ
   mà đổi. */
[aria-busy="true"]{opacity:.55; cursor:progress; pointer-events:none}
/* Chữ trên nền bão hoà lấy màu NỀN TRANG, không phải trắng cứng.
   Ở nền sáng --nen-app là trắng nên không đổi gì. Ở nền tối, màu nhấn phải
   SÁNG lên mới nổi trên nền tối — mà chữ trắng trên một mảng cyan sáng chỉ
   còn tương phản 2.19, dưới chuẩn AA. Buộc chữ đi ngược chiều với nền là
   cách duy nhất đúng ở CẢ HAI chế độ mà không phải viết hai luật. */
.nut--chinh{background:var(--nhan); color:var(--nen-app); box-shadow:var(--bong-1)}
.nut--chinh:hover:not(:disabled){filter:brightness(1.08)}
.nut--phu{background:var(--nen-the); border-color:var(--vien-dam); color:var(--chu-2); box-shadow:var(--bong-1)}
.nut--phu:hover:not(:disabled){background:var(--nen-chim); color:var(--chu-1)}
.nut--nhe{color:var(--chu-2)}
.nut--nhe:hover:not(:disabled){background:var(--nen-chim); color:var(--chu-1)}
.nut--nguy{background:var(--nen-the); border-color:var(--canh-vien); color:var(--canh); box-shadow:var(--bong-1)}
.nut--nguy:hover:not(:disabled){background:var(--canh-nen)}
/* Nút kiểu liên kết mang TÊN do người dùng đặt (tên việc, tên dự án) nên
   phải xuống dòng được — .nut mặc định nowrap sẽ đẩy nó tràn khỏi màn hình */
.nut--lien{color:var(--nhan); font-weight:600; padding:6px 8px;
           white-space:normal; text-align:left; overflow-wrap:anywhere}
.nut--lien:hover:not(:disabled){background:var(--nhan-nen)}
.nut--nho{padding:6px 10px; font-size:var(--cho-13)}
.nut--bieu-tuong{padding:5px; color:var(--chu-3); border-radius:var(--bo-bam)}
.nut--bieu-tuong:hover:not(:disabled){color:var(--canh); background:var(--canh-nen)}

/* ===================================================================
   3. Ô NHẬP & TRƯỜNG
   =================================================================== */
.o-nhap{
  font:inherit; font-size:var(--cho-14); width:100%;
  border:1px solid var(--vien-dam); border-radius:var(--bo-bam); padding:9px 12px;
  background:var(--nen-the); color:var(--chu-1); box-shadow:var(--bong-1);
}
.o-nhap::placeholder{color:var(--chu-3)}
.o-nhap:focus{outline:3px solid var(--nhan-nen); outline-offset:0; border-color:var(--nhan)}
.o-nhap:disabled{background:var(--nen-chim); color:var(--chu-3); cursor:not-allowed; box-shadow:none}
textarea.o-nhap{resize:vertical; min-height:66px}

/* Ô tìm kiếm có icon */
.o-tim{position:relative; display:flex; align-items:center}
.o-tim .bt{position:absolute; left:11px; color:var(--chu-3)}
.o-tim .o-nhap{padding-left:34px}

.truong{margin-bottom:var(--k4)}
.truong__nhan{display:block; font-size:var(--cho-13); font-weight:600; color:var(--chu-2); margin-bottom:6px}
.truong__giup{font-size:var(--cho-12); color:var(--chu-3); margin:6px 0 0}
.hang-truong{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:var(--k3)}

/* ===================================================================
   4. NHÃN TRẠNG THÁI & CHIP
   =================================================================== */
.the{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--cho-12); font-weight:600; padding:2px 9px; border-radius:var(--bo-tron);
  background:var(--nen-chim); color:var(--chu-2); border:1px solid var(--vien); white-space:nowrap;
}
.the--nhan{background:var(--nhan-nen); color:var(--nhan); border-color:var(--nhan-vien)}
.the--ok  {background:var(--ok-nen);   color:var(--ok);   border-color:var(--ok-vien)}
.the--canh{background:var(--canh-nen); color:var(--canh); border-color:var(--canh-vien)}
.the--tre {background:var(--tre-nen);  color:var(--tre);  border-color:var(--tre-vien)}
.the--cho {background:var(--cho-nen);  color:var(--cho);  border-color:var(--cho-vien)}
.the--mo  {background:transparent; color:var(--chu-3)}


/* Mã việc đứng trước tiêu đề. Chữ đều nét và MỜ: nó là thứ để trích dẫn
   trong họp, không phải thứ để đọc lướt — tô đậm lên là nó tranh chỗ với
   chính nội dung đầu việc. */
.ma-viec{margin-right:var(--k2); color:var(--chu-3); font-weight:500;
         font-size:var(--cho-12); font-variant-numeric:tabular-nums;
         font-family:ui-monospace,"Cascadia Mono","Consolas",monospace;
         white-space:nowrap}

/* Khối gập trong hộp thoại — dành cho thứ dựng một lần rồi hầu như không
   đụng tới, ví dụ cơ cấu bộ phận. Bày thường trực chỉ làm rối hộp thoại. */
.hop__gap{margin-top:var(--k4); border-top:1px solid var(--vien); padding-top:var(--k3)}
.hop__gap>summary{cursor:pointer; font-size:var(--cho-12); font-weight:600;
                  letter-spacing:.04em; text-transform:uppercase; color:var(--chu-3);
                  min-height:44px; display:flex; align-items:center}
.hop__gap>summary:hover{color:var(--chu-2)}
.the__cham{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

.chip{
  font:inherit; font-size:var(--cho-13); font-weight:500; cursor:pointer;
  padding:6px 13px; border-radius:var(--bo-bam);
  border:1px solid transparent; background:transparent; color:var(--chu-2);
}
.chip:hover{background:var(--nen-chim); color:var(--chu-1)}
.chip--chon, .chip--chon:hover{background:var(--nen-the); border-color:var(--vien);
  color:var(--chu-1); font-weight:600; box-shadow:var(--bong-1)}

/* ===================================================================
   5. DẢI CHỈ SỐ (vừa xem số liệu, vừa bấm để lọc)
   =================================================================== */
.dai-so{display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-bottom:var(--k4)}

/* ---------- TRANG CHỦ ----------
   Rộng vừa mắt đọc, KHÔNG kéo hết bề ngang màn hình: đây là màn hình để
   đọc một lượt rồi quyết định, không phải bảng dữ liệu để rà. */
/* Trang chủ dùng HẾT bề ngang vùng nội dung. Trước đây tôi bó nó ở 720px —
   trên màn 1920 thì thành một cột hẹp lệch trái với một khoảng trống mênh
   mông bên phải.

   Nhưng KHÔNG để chữ dài chạy hết 1100px: dòng văn quá dài thì mắt lạc
   hàng khi xuống dòng. Nên bó riêng phần CHỮ, còn phần lưới số liệu thì
   trải rộng — chúng càng rộng càng dễ so. */
.nha{width:100%}
.nha__cau{max-width:680px}

/* ---- Dải trời ----
   BO GÓC như mọi mặt khác. Trước đây để vuông với lý do "giao diện phẳng"
   — nhưng phẳng nói về ĐỘ NỔI (không bóng, không nền đậm vô cớ), không nói
   về góc. Mà dải này thì có nền thật: ban đêm nó là một khối xanh đậm. Một
   khối đặc góc vuông nằm giữa toàn mặt bo 10px thì không phải là phẳng, chỉ
   là lạc lõng — và nó nằm ngay dòng đầu Trang chủ nên lạc rõ nhất.

   TRÀN RA ĐÚNG BẰNG LỀ KHUNG rồi thụt vào đúng bằng ngần ấy. Nhờ vậy chữ
   trong dải rơi đúng lên đường canh trái của cả trang, trong khi cái mặt
   vẫn chạy hết bề ngang — bo góc mà không phải trả giá bằng một dòng chữ
   lệch. Đây là lý do `--le` tồn tại. */
.nha__chao{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--vien); border-radius:var(--bo-mat);
  /* Trừ đi 1px của viền: box-sizing là border-box nên phần đệm nằm TRONG
     viền, không trừ thì chữ rơi lệch đúng một pixel khỏi đường canh chung.
     Một pixel thì không ai nhìn ra, nhưng luật canh lề phải đúng hẳn, không
     thì lần sau đọc lại không biết nó cố ý hay lỡ. */
  margin-inline:calc(-1 * var(--le)); padding:var(--k6) calc(var(--le) - 1px) var(--k5);
  margin-bottom:var(--k6); min-height:124px;
  display:flex; align-items:flex-end;
}
/* Lớp làm dịu dưới chân chữ. Bầu trời là thứ ĐỘNG và có thể sáng bất kỳ
   sắc nào; không có lớp này thì có hôm mây trắng trôi qua đúng sau dòng
   chữ và chữ tối gần như biến mất. Đây là bảo hiểm, không phải trang trí. */
.nha__chao::after{
  content:''; position:absolute; inset:auto 0 0 0; height:62%; z-index:0;
  background:linear-gradient(to top,var(--nen-app) 12%,rgba(255,255,255,0));
  pointer-events:none;
}
.nha__chao--dem::after{background:linear-gradient(to top,#0D1730 12%,rgba(13,23,48,0))}
.nha__chu{position:relative; z-index:1; max-width:680px}
.nha__ten{margin:0; font-size:var(--cho-30); font-weight:650; letter-spacing:-.02em}
.nha__ngay{margin:var(--k1) 0 0; font-size:var(--cho-13); color:var(--chu-3)}
/* Trời đêm: nền tối nên chữ phải đảo màu, không thì không đọc được */
/* Chữ trong dải trời ăn theo BẦU TRỜI, không ăn theo nền app. Trời ban
   ngày là mảng xanh nhạt dù app đang ở chế độ tối — để chữ lấy --chu-1 thì
   ở chế độ tối nó gần trắng, đặt trên nền xanh nhạt là không đọc nổi. Nên
   cả hai vế đều khai màu tuyệt đối, không qua token. */
.nha__chao .nha__ten{color:#101828}
.nha__chao .nha__ngay{color:#5A6678}
.nha__chao--dem .nha__ten{color:#F9FAFB}
.nha__chao--dem .nha__ngay{color:#CBD5E1}

.troi{position:absolute; inset:0; z-index:0}
.troi--ngay{background:linear-gradient(170deg,#EAF4FD 0%,#F7FAFC 70%)}
.troi--dem{background:linear-gradient(170deg,#111C36 0%,#24324F 100%)}
.troi--mua.troi--ngay,.troi--giong.troi--ngay{background:linear-gradient(170deg,#DDE5EC 0%,#F1F4F7 70%)}
.troi--mu.troi--ngay{background:linear-gradient(170deg,#E9ECEF 0%,#F6F7F8 70%)}

.troi__mat-troi{
  position:absolute; right:9%; top:18%; width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle,#FDE68A 0%,#FCD34D 55%,rgba(252,211,77,0) 72%);
  animation:tho 7s ease-in-out infinite;
}
.troi__sao{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#E2E8F0;
  animation:nhay 3.4s ease-in-out infinite;
}
.troi__may{
  position:absolute; height:20px; border-radius:var(--bo-tron);
  background:rgba(255,255,255,.92); box-shadow:0 6px 16px rgba(16,24,40,.06);
  animation:troi-di 46s linear infinite;
}
.troi--dem .troi__may{background:rgba(226,232,240,.16); box-shadow:none}
.troi__mua{
  position:absolute; top:-12%; width:1px; height:16px;
  background:linear-gradient(rgba(96,130,168,0),rgba(96,130,168,.6));
  animation:roi 1.05s linear infinite;
}
.troi--dem .troi__mua{background:linear-gradient(rgba(148,180,214,0),rgba(148,180,214,.55))}
.troi__mu{
  position:absolute; left:-30%; right:-30%; height:34%; top:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:troi-di 26s linear infinite;
}
.troi__chop{
  position:absolute; inset:0; background:#FFFFFF; opacity:0;
  animation:chop 9s ease-out infinite;
}

@keyframes tho     {0%,100%{transform:scale(1);opacity:.95} 50%{transform:scale(1.06);opacity:1}}
@keyframes nhay    {0%,100%{opacity:.25} 50%{opacity:1}}
@keyframes troi-di {from{transform:translateX(-16%)} to{transform:translateX(116%)}}
@keyframes roi     {from{transform:translateY(0)} to{transform:translateY(150px)}}
@keyframes chop    {0%,92%,100%{opacity:0} 94%{opacity:.5} 96%{opacity:0} 97%{opacity:.32}}

/* Ai đã tắt hiệu ứng chuyển động thì bầu trời đứng yên. Giữ nguyên màu và
   hình, chỉ bỏ phần động — thứ trang trí không đáng làm ai chóng mặt. */
@media (prefers-reduced-motion:reduce){
  .troi__mat-troi,.troi__sao,.troi__may,.troi__mua,.troi__mu,.troi__chop{animation:none}
  .troi__mua,.troi__chop{display:none}
}

/* Canh theo LỀ NỘI DUNG, không theo mép dải: dải tràn rộng hơn khung một
   khoảng --le, nên lấy mốc từ mép dải là nhãn thò ra ngoài đường canh phải
   mà mọi thứ khác đang bám. */
.troi__nhan{
  position:absolute; right:calc(var(--le) - 1px); bottom:var(--k3); z-index:1; margin:0;
  font-size:var(--cho-12); color:var(--chu-3);
}
.nha__chao--dem .troi__nhan{color:#94A3B8}

/* Câu mở đầu là dòng NGƯỜI ĐỌC TRƯỚC TIÊN, nên to hơn chữ thường một bậc */
.nha__cau{margin:0 0 var(--k6); font-size:var(--cho-16); color:var(--chu-2)}

/* Ô số KHÔNG kéo dãn hết màn: ba ô rộng 400px mỗi cái thì con số và nhãn
   trôi xa nhau, đọc thành ba mảnh rời. Bó ở 640px, phần dư nhường cho lưới
   góc nhìn bên dưới vốn có nhiều ô hơn. */
.nha__so{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
         max-width:640px; margin-bottom:var(--k6)}
.nha__khoi{margin-bottom:var(--k6)}
.nha__ghi{margin:var(--k2) 0 0}

.nha__nhip{display:flex; align-items:baseline; gap:var(--k2); flex-wrap:wrap}
.nha__nhip-so{font-size:var(--cho-30); font-weight:650; line-height:1;
              letter-spacing:-.02em; color:var(--ok); font-variant-numeric:tabular-nums}
.nha__nhip-nhan{font-size:var(--cho-13); color:var(--chu-2)}

/* Góc nhìn — mỗi ô một cách đọc khác về cùng bộ dữ liệu. Nền chìm, không
   viền: chúng là thứ đọc thêm cho vui mắt, không phải chỉ số phải theo dõi,
   nên không được tranh chấp với ba ô số ở trên. */
/* auto-FILL chứ không auto-fit: auto-fit gộp các cột trống lại nên ba góc
   nhìn bị kéo dãn mỗi ô 350px trên màn rộng — chữ "Le Chu" nằm giữa một
   khoảng mênh mông. auto-fill giữ nguyên bề rộng cột, ô thừa để trống. */
.nha__goc{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,240px));
          gap:var(--k4) 0; justify-content:start}
.goc{padding:var(--k2) var(--k4); border-left:1px solid var(--vien)}
.goc:first-child{padding-left:0; border-left:none}
.goc__nhan{font-size:var(--cho-11); font-weight:600; letter-spacing:.04em;
           text-transform:uppercase; color:var(--chu-3)}
.goc__chinh{font-size:var(--cho-20); font-weight:650; letter-spacing:-.01em;
            margin-top:var(--k1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.goc__phu{font-size:var(--cho-12); color:var(--chu-2); margin-top:2px;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* CANH TRÁI — cả Trang chủ đứng trên MỘT đường dọc ở x=0: nhãn mục, câu mở
   đầu, con số, ghi chú cuối khối. Dòng bấm được thì cần đệm ngang để lúc rê
   chuột nền không dán sát chữ — nhưng đệm suông sẽ đẩy chữ vào 8px, và thế
   là mọi dòng bấm được trong trang lệch khỏi đường dọc ấy.
   Kéo lại bằng lề âm đúng bằng phần đệm: NỀN rê chuột nở ra hai bên, còn
   CHỮ vẫn rơi đúng x=0. Cùng thủ pháp với .bdk__viec bên dưới. */
.nha__dong{color:var(--chu-1); display:flex; align-items:baseline; gap:var(--k2); min-width:0;
           padding:8px var(--k2); margin-inline:calc(-1 * var(--k2));
           width:calc(100% + var(--k2) * 2);
           border:none; background:none; border-radius:var(--bo-bam);
           font:inherit; text-align:left; cursor:pointer}
.nha__dong:hover{background:var(--nen-chim)}
.nha__dong-ten{flex:1; min-width:0; font-size:var(--cho-14);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nha__xong{flex:none; color:var(--ok); font-weight:700}

/* ---- Chưa xếp dự án ----
   Một hàng = một việc + một ô chọn. Ô chọn đặt NGAY TRÊN DÒNG chứ không sau
   một nút "Sửa" hay một hộp thoại: đây là thao tác dọn dẹp, người ta chỉ làm
   khi nó rẻ. Thêm một cú bấm là đủ để cả danh sách nằm đó mãi.

   Tên việc canh trái ở x=0 như mọi dòng khác; ô chọn dạt hẳn sang phải để
   ba bốn hàng liền nhau xếp thành một cột thẳng, mắt quét một lượt là xong. */
.nha__xep{display:flex; align-items:center; gap:var(--k3); min-width:0;
          padding:var(--k1) 0}
.nha__xep-ten{flex:1; min-width:0; padding:0; border:none; background:none;
              font:inherit; font-size:var(--cho-14); color:var(--chu-1);
              text-align:left; cursor:pointer;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nha__xep-ten:hover{text-decoration:underline; text-underline-offset:3px}
/* Ô chọn để MỜ khi chưa chọn gì: nó là lời mời, không phải một trường bắt
   buộc điền. Đậm lên thì bốn hàng chưa xếp trông như bốn chỗ đang thiếu. */
.nha__xep-chon{flex:none; width:auto; max-width:210px;
               font-size:var(--cho-13); padding:5px var(--k2);
               color:var(--chu-2); box-shadow:none; border-color:var(--vien)}
.nha__xep-chon:hover{border-color:var(--vien-dam); color:var(--chu-1)}

/* ---------- BẢNG ĐIỀU KHIỂN DỰ ÁN ----------
   Theo đúng trục 1 của bộ giao diện: phân tầng bằng VIỀN MẢNH, không dùng
   nền đậm hay bóng nặng. Màu bão hoà chỉ dành cho ô thật sự cần chú ý —
   ô "Chưa giao ai" bằng 0 thì để xám như mọi thứ thường trực. */
.bdk{border:1px solid var(--vien); border-radius:var(--bo-mat);
     padding:var(--k4); margin-bottom:var(--k4); background:var(--nen-the)}

/* Đếm ngược tới mốc gần nhất. Xám khi còn thong thả — chỉ chuyển sang màu
   cảnh báo khi còn 7 ngày trở xuống. Đỏ suốt ngày thì mắt quen, và lúc gấp
   thật thì không còn gì để nhấn mạnh nữa. */
.dem-nguoc{display:flex; align-items:baseline; gap:var(--k2); flex-wrap:wrap;
           padding-bottom:var(--k3); margin-bottom:var(--k3);
           border-bottom:1px solid var(--vien)}
.dem-nguoc__so{font-size:var(--cho-30); font-weight:650; line-height:1;
               letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--chu-1)}
.dem-nguoc__don{font-size:var(--cho-13); color:var(--chu-2)}
.dem-nguoc__viec{flex:1; min-width:0; font-size:var(--cho-13); color:var(--chu-2);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dem-nguoc--gap .dem-nguoc__so{color:var(--tre)}
.dem-nguoc--gap .dem-nguoc__don{color:var(--tre); font-weight:600}

/* Số ngày trễ nằm trong thẻ hạn chót. Xuống dòng ở màn rộng vì cột hẹp,
   nhưng KHÔNG tách thành thẻ riêng — nó là bổ ngữ của ngày, không phải
   một mẩu thông tin độc lập. */
.the__them{display:block; font-weight:600; font-size:var(--cho-11); opacity:.9}
.bdk__so{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--k3)}
/* Ô số PHẲNG: không nền, không bo, phân tách bằng ĐƯỜNG KẺ DỌC mảnh đúng
   như trục 1 quy định. Sắc thái nằm ở MÀU CON SỐ, đủ để mắt bắt được mà
   không cần thêm nền hay vạch màu nào nữa. */
.o-so{padding:var(--k2) var(--k4); border-left:1px solid var(--vien)}
.o-so:first-child{padding-left:0; border-left:none}
.o-so__so{font-size:var(--cho-30); font-weight:650; line-height:1.15;
          letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.o-so--ok .o-so__so{color:var(--ok)}
.o-so--canh .o-so__so{color:var(--canh)}
.o-so--nhac .o-so__so{color:var(--tre)}
.o-so__don{font-size:var(--cho-16); font-weight:500; margin-left:1px}
.o-so__nhan{font-size:var(--cho-12); color:var(--chu-2); margin-top:2px}

/* Ô số ở Trang chủ BẤM ĐƯỢC, khác ô số của bảng điều khiển dự án. Nút
   thật, nên phải gỡ viền mặc định của nút rồi trả lại con trỏ bàn tay.
   `border:none` xoá luôn đường kẻ dọc thừa hưởng từ .o-so nên phải khai
   lại — nhưng chỉ khai border-left, không khai bốn cạnh.

   Rê chuột KHÔNG tô nền: giao diện phẳng thì phản hồi bằng chữ, không bằng
   mảng màu. Gạch chân con số và làm đậm nhãn là đủ để biết bấm được. */
/* KHAI MÀU RÕ. <button> không khai màu thì lấy mặc định của trình duyệt —
   ở chế độ tối là chữ đen trên nền gần đen, tương phản 1.13, tức vô hình.
   color-scheme ở trên đã đỡ được, nhưng phó mặc màu chữ của thành phần mình
   tự dựng cho mặc định hệ thống là để ngỏ một chỗ hỏng. */
.o-so--bam{
  color:var(--chu-1);
  border:none; border-left:1px solid var(--vien); background:none;
  font:inherit; text-align:left; cursor:pointer; width:100%;
}
.nha__so .o-so--bam:first-child{border-left:none}
.o-so--bam:hover .o-so__nhan{color:var(--chu-1)}
.o-so--bam:hover .o-so__so{text-decoration:underline; text-underline-offset:3px}

.thanh-tien-do{height:6px; border-radius:var(--bo-tron); background:var(--nen-chon);
               overflow:hidden; margin-top:var(--k4)}
.thanh-tien-do>i{display:block; height:100%; background:var(--ok);
                 border-radius:inherit; transition:width .25s ease}

.bdk__cot{display:grid; grid-template-columns:1fr 1fr; gap:var(--k5);
          margin-top:var(--k5); padding-top:var(--k4); border-top:1px solid var(--vien)}
.bdk__khoi{min-width:0}
.bdk__ghi{margin:var(--k2) 0 0}

.bdk__nguoi{display:flex; align-items:center; gap:var(--k2); padding:5px 0; min-width:0}
.bdk__ten{flex:none; width:104px; font-size:var(--cho-13); color:var(--chu-1);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Thanh so sánh tải: dài nhất = người ôm nhiều việc nhất, không phải %.
   Ai cũng dưới 100% thì mắt không so được ai nặng hơn ai. */
.bdk__thanh{flex:1; min-width:24px; height:6px; border-radius:var(--bo-tron);
            background:var(--nen-chon); overflow:hidden}
.bdk__thanh>i{display:block; height:100%; background:var(--vien-dam); border-radius:inherit}
.bdk__dem{flex:none; font-size:var(--cho-12); color:var(--chu-2);
          font-variant-numeric:tabular-nums}

.bdk__viec{color:var(--chu-1); display:flex; align-items:baseline; gap:var(--k2);
           padding:6px var(--k2); margin-inline:calc(-1 * var(--k2));
           width:calc(100% + var(--k2) * 2);
           border:none; background:none; border-radius:var(--bo-bam);
           font:inherit; text-align:left; cursor:pointer; min-width:0}
.bdk__viec:hover{background:var(--nen-chim)}
.bdk__ngay{flex:none; font-size:var(--cho-12); color:var(--tre);
           font-variant-numeric:tabular-nums}
.bdk__viec-ten{flex:1; font-size:var(--cho-13); overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap}
.so-loc{
  display:inline-flex; align-items:baseline; gap:6px; font:inherit; cursor:pointer;
  border:1px solid transparent; background:none; color:var(--chu-2);
  padding:6px 12px; border-radius:var(--bo-bam);
}
.so-loc:hover{background:var(--nen-chim)}
.so-loc__so{font-size:var(--cho-16); font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--chu-2)}
.so-loc__ten{font-size:var(--cho-13); font-weight:500}
.so-loc--nhan .so-loc__so{color:var(--nhan)}
.so-loc--cho  .so-loc__so{color:var(--cho)}
.so-loc--canh .so-loc__so{color:var(--canh)}
/* Bằng 0 thì xám hẳn — không có gì đáng chú ý thì đừng tô màu */
.so-loc--khong .so-loc__so{color:var(--chu-3)}
/* Đang chọn phải thắng cả :hover, nếu không sẽ thành chữ trắng trên nền trắng */
/* Thùng rác — nhóm luôn ẩn, chỉ hiện chip khi trong thùng có gì.
   Tô nhạt để không tranh chỗ với các trạng thái thật của đầu việc. */
.so-loc--rac{margin-left:var(--k3); color:var(--chu-3)}
.so-loc--rac .so-loc__so{color:var(--chu-3)}
.co-the--xoa{opacity:.72}
.dong--tat{opacity:.6}

.so-loc--chon, .so-loc--chon:hover{background:var(--nen-the); border-color:var(--vien);
  box-shadow:var(--bong-1); color:var(--chu-1); font-weight:600}

.bao-tre{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto; cursor:pointer;
  background:var(--tre-nen); border:1px solid var(--tre-vien); color:var(--tre);
  border-radius:var(--bo-bam); padding:6px 12px; font:inherit; font-size:var(--cho-13); font-weight:600;
}
.bao-tre:hover{filter:brightness(.98)}

/* ===================================================================
   6. THẺ & KHỐI
   =================================================================== */
.the-bai{
  background:var(--nen-the); border:1px solid var(--vien);
  border-radius:var(--bo-mat); box-shadow:var(--bong-1); overflow:hidden;
}
/* Khung nhìn tự dựng bố cục riêng thì bỏ thẻ bao. Thẻ bao là đúng cho một
   BẢNG dữ liệu — nó gom các hàng lại thành một khối. Bọc quanh một bố cục
   đã tự phân tầng bằng đường kẻ thì nó chỉ là cái hộp thừa lồng ngoài. */
.the-bai--phang{background:none; border:none; border-radius:0; box-shadow:none; overflow:visible}
.the-bai__dau{display:flex; align-items:flex-start; gap:var(--k3); padding:var(--k5) var(--k5) var(--k4)}
.the-bai__ten{margin:0; font-size:var(--cho-16); font-weight:600; letter-spacing:-.01em}
.the-bai__phu{margin:2px 0 0; font-size:var(--cho-13); color:var(--chu-3)}
.the-bai__chim{background:var(--nen-chim); border-top:1px solid var(--vien); padding:var(--k5)}

/* ===================================================================
   7. BẢNG DỮ LIỆU
   =================================================================== */
.bang{width:100%; border-collapse:collapse; font-size:var(--cho-14)}
.bang thead th{
  background:var(--nen-chim); border-bottom:1px solid var(--vien);
  text-align:left; font-size:var(--cho-12); font-weight:600; color:var(--chu-2);
  padding:10px var(--k4); white-space:nowrap;
}
.bang tbody td{border-bottom:1px solid var(--vien); padding:12px var(--k4); vertical-align:middle}
.bang tbody tr:last-child td{border-bottom:none}
.bang tbody tr.co-the:hover{background:var(--nen-chim); cursor:pointer}
.bang tbody tr.mo-ra > td{border-bottom:none}
.bang__ten{font-weight:500; color:var(--chu-1)}
.bang__mo{color:var(--chu-3)}

/* Bảng theo dõi dự án: mọi cột phụ co về đúng bề rộng nội dung, chừa hết
   chỗ còn lại cho tên dự án. Không có luật này thì cột thao tác bị bóp đến
   mức nút Xoá rơi xuống dòng, còn chữ "Dự án" ở cột Loại thì vỡ đôi.
   Chỉ áp ở khổ rộng — khổ hẹp bảng này xếp thành thẻ. */
@media(min-width:1024px){
  .bang--du-an tbody td:not(:first-child),
  .bang--du-an thead th:not(:first-child){white-space:nowrap; width:1%}
  .bang--du-an td:last-child .hang-ngang{flex-wrap:nowrap}
}

/* ---- Phân cấp việc chính / việc phụ thuộc ----
   Việc con được xếp NGAY DƯỚI việc cha (xem xepTheoCay ở js/nhin/bang-viec.js),
   nên chỉ cần thụt vào kèm một đường nối dọc là đọc ra ngay quan hệ — khỏi
   phải nhắc lại tên việc cha ở từng dòng. */
.bang__nhanh{color:var(--chu-3); font-weight:400; margin-right:6px}

/* Nút gập/mở cụm việc con. Nằm cùng cột thị giác với dấu nhánh ↳ của việc
   con, để đọc dọc xuống là thấy ngay tầng bậc. Lùi trái bằng margin âm cho
   chữ tiêu đề vẫn thẳng hàng với các việc không có cụm con. */
.nut-gap{
  border:none; background:none; cursor:pointer; font:inherit; line-height:1;
  color:var(--chu-3); padding:4px 6px 4px 0; margin:-4px 0 -4px -2px;
}
.nut-gap:hover{color:var(--chu-1)}
.bang tbody tr.co-the--con > td:nth-child(2){
  position:relative; padding-left:calc(var(--k4) + var(--k6));
}
.bang tbody tr.co-the--con > td:nth-child(2)::before{
  content:''; position:absolute; left:var(--k5); top:0; bottom:0;
  border-left:2px solid var(--vien-dam);
}
.bang td.chi-tiet{padding:0; background:var(--nen-chim); border-bottom:1px solid var(--vien)}
.bang td.chi-tiet > div{padding:var(--k5)}
.bang__tich{width:38px}
.vung-tich{display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.o-tich{width:16px; height:16px; accent-color:var(--nhan); cursor:pointer}
.o-tich:disabled{cursor:not-allowed}

/* Mũi tên ưu tiên — đọc nhanh bằng hình dạng, không chỉ bằng màu */
.uu-tien{display:inline-flex; align-items:center; gap:6px; font-weight:500; white-space:nowrap}
.uu-tien--gap {color:var(--canh)}
.uu-tien--cao {color:var(--tre)}
.uu-tien--thuong{color:var(--chu-2)}
.uu-tien--thap{color:var(--chu-3)}

/* ===================================================================
   7b. LỊCH THÁNG
   =================================================================== */
.lich{border:1px solid var(--vien); border-radius:var(--bo-mat); overflow:hidden; background:var(--nen-the); box-shadow:var(--bong-1)}
.lich__thu{display:grid; grid-template-columns:repeat(7,1fr); background:var(--nen-chim); border-bottom:1px solid var(--vien)}
.lich__thu > div{padding:9px 6px; text-align:center; font-size:var(--cho-12); font-weight:600; color:var(--chu-2)}
.lich__luoi{display:grid; grid-template-columns:repeat(7,1fr)}
.o-ngay{min-height:98px; border-right:1px solid var(--vien); border-bottom:1px solid var(--vien);
        padding:6px; display:flex; flex-direction:column; gap:3px; overflow:hidden}
.o-ngay:nth-child(7n){border-right:none}
.o-ngay--ngoai{background:var(--nen-chim)}
.o-ngay--ngoai .o-ngay__so{color:var(--chu-3)}
.o-ngay--nay{background:var(--nhan-nen)}
.o-ngay--nay .o-ngay__so{color:var(--nhan); font-weight:700}
.o-ngay__so{font-size:var(--cho-12); font-weight:600; color:var(--chu-2)}
.viec-lich{font-size:var(--cho-11); font-weight:500; padding:2px 6px; border-radius:var(--bo-bam);
  background:var(--nen-chim); border:1px solid var(--vien); color:var(--chu-2); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-family:inherit}
.viec-lich:hover{filter:brightness(.96)}
.viec-lich--gap {background:var(--canh-nen); border-color:var(--canh-vien); color:var(--canh)}
.viec-lich--tre {background:var(--tre-nen);  border-color:var(--tre-vien);  color:var(--tre)}
.viec-lich--xong{background:var(--ok-nen);   border-color:var(--ok-vien);   color:var(--ok); text-decoration:line-through}

/* Lịch dạng danh sách — dùng ở màn hẹp thay cho lưới 7 cột */
.lich-ds{display:flex; flex-direction:column; gap:var(--k2)}
.lich-ds__ngay{background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-mat);
               box-shadow:var(--bong-1); padding:var(--k3) var(--k4);
               display:flex; flex-direction:column; gap:var(--k1)}
.lich-ds__ngay--nay{border-color:var(--nhan-vien); background:var(--nhan-nen)}
.lich-ds__dau{display:flex; align-items:baseline; gap:var(--k2); margin-bottom:var(--k1)}
.lich-ds__so{font-size:var(--cho-20); font-weight:700; letter-spacing:-.02em; line-height:1}
.lich-ds__ngay--nay .lich-ds__so{color:var(--nhan)}
/* Trong danh sách thì có chỗ, cho tiêu đề xuống dòng thay vì cắt cụt */
.lich-ds .viec-lich{white-space:normal; overflow:visible; overflow-wrap:anywhere;
                    padding:8px 10px; font-size:var(--cho-13); min-height:44px}

/* ===================================================================
   7c. GHI CHÚ
   =================================================================== */
.ghi-nhanh{display:flex; gap:var(--k2); align-items:flex-start; margin-bottom:var(--k5)}
.ghi-nhanh textarea{min-height:44px}

/* Ô ghi mới: tiêu đề trên, nội dung giữa, thẻ và nút dưới. Xếp dọc chứ
   không nhồi một hàng — ba ô trên một hàng thì mỗi ô còn chưa tới 200px. */
.ghi-moi{display:flex; flex-direction:column; gap:var(--k2);
         padding-bottom:var(--k5); margin-bottom:var(--k5);
         border-bottom:1px solid var(--vien)}
.ghi-moi textarea{min-height:44px}

/* LƯỚI THẺ. Ghi chú là những mẩu NGẮN và RỜI NHAU — xếp dọc thì mỗi mẩu
   chiếm trọn một hàng, cuộn mãi không hết mà mắt không so được cái nào với
   cái nào. auto-FILL giữ nguyên bề rộng cột; auto-fit sẽ kéo một thẻ đơn
   độc dãn ra hết màn hình. */
.luoi-ghi{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
          gap:var(--k3); align-items:start}

.the-ghi{position:relative;
         background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-mat);
         padding:var(--k4); display:flex; flex-direction:column; gap:var(--k2)}
.the-ghi--ghim{border-left:3px solid var(--nhan)}

/* Ngôi sao ghim đặt ở GÓC THẺ, không xếp hàng cùng Sửa/Tạo việc/Xoá: nó nói
   mẩu giấy này LÀ GÌ, không phải một việc phải làm với nó. Và vì đây là
   thao tác lặp nhiều nhất trong Ghi chú nên nó đáng có chỗ riêng.
   Chưa ghim thì để mờ — hàng chục ngôi sao đen kịt trên lưới thì cái đang
   ghim thật lại chìm mất. */
.the-ghi__ghim{
  position:absolute; top:var(--k2); right:var(--k2);
  width:28px; height:28px; display:grid; place-items:center;
  border:none; background:none; border-radius:var(--bo-bam);
  font-size:var(--cho-16); line-height:1; cursor:pointer;
  color:var(--chu-3); padding:0;
}
.the-ghi__ghim:hover{background:var(--nen-chim); color:var(--nhan)}
.the-ghi__ghim--bat{color:var(--nhan)}
/* Chừa chỗ cho ngôi sao, không thì tiêu đề dài chui xuống dưới nó */
.the-ghi__ten{padding-right:26px}
/* Thẻ đang sửa trải hết hàng: ba ô nhập nhét trong một ô lưới 260px thì
   không gõ nổi. */
.the-ghi--sua{grid-column:1/-1; border-color:var(--vien-dam)}
.the-ghi__ten{margin:0; font-size:var(--cho-14); font-weight:600; line-height:1.35;
              word-break:break-word}
/* Nội dung cắt còn 6 dòng: thẻ trong lưới phải cao gần bằng nhau, một ghi
   chú dài sẽ kéo cả hàng giãn theo. Muốn đọc hết thì bấm Sửa. */
.the-ghi__noi{white-space:pre-wrap; word-break:break-word; margin:0;
              font-size:var(--cho-13); color:var(--chu-2);
              display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
              overflow:hidden}
.the-ghi__the{display:flex; flex-wrap:wrap; gap:var(--k1)}
.the-ghi__chan{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap;
               margin-top:auto; padding-top:var(--k2)}
.the-ghi__nut{display:flex; align-items:center; gap:var(--k1); flex-wrap:wrap;
              padding-top:var(--k2); border-top:1px solid var(--vien)}

/* Hàng lọc: ô tìm riêng + các thẻ. Ô tìm bó 340px — kéo hết bề ngang thì
   nó át cả hàng thẻ bên cạnh, mà thẻ mới là thứ hay bấm hơn. */
.ghi-loc{display:flex; align-items:center; gap:var(--k3); flex-wrap:wrap;
         margin-bottom:var(--k4)}
.ghi-loc__tim{flex:1; min-width:220px; max-width:340px}

/* Thẻ (tag) — vừa là nhãn, vừa là nút lọc. */
.loc-the{display:flex; flex-wrap:wrap; gap:var(--k1)}
.the-loc{font:inherit; font-size:var(--cho-12); cursor:pointer;
         padding:4px 10px; border-radius:var(--bo-tron);
         border:1px solid var(--vien); background:var(--nen-the); color:var(--chu-2)}
.the-loc:hover{border-color:var(--vien-dam); color:var(--chu-1)}
.the-loc--chon{background:var(--nhan-nen); border-color:var(--nhan-vien); color:var(--nhan); font-weight:600}
.the-loc--nho{padding:2px 8px; font-size:var(--cho-11)}

/* ---- Chuông thông báo ---- */
.nut--chuong{position:relative; padding:9px 11px}
.chuong__so{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--bo-tron); background:var(--canh); color:var(--nen-app);
  font-size:var(--cho-11); font-weight:700; line-height:18px; text-align:center;
}
.tin{
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; font:inherit;
  border:1px solid var(--vien); border-radius:var(--bo-bam); background:var(--nen-the);
  padding:var(--k3) var(--k4); margin-bottom:var(--k2); cursor:pointer;
}
.tin:hover{background:var(--nen-chim)}
.tin--moi{border-left:3px solid var(--nhan); background:var(--nhan-nen)}
.tin__noi{font-size:var(--cho-14); color:var(--chu-1); overflow-wrap:anywhere}

/* Một lời trao đổi, cũng dùng cho một dòng nhật ký trong hộp Lịch sử */
.loi{background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-bam);
     padding:var(--k3) var(--k4); margin-bottom:var(--k2)}
.loi__dau{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap;
          font-size:var(--cho-13); margin-bottom:var(--k1)}
.loi__noi{margin:0; white-space:pre-wrap; overflow-wrap:anywhere;
          color:var(--chu-2); font-size:var(--cho-14)}

/* ===================================================================
   8. DÒNG DANH SÁCH
   =================================================================== */
.dong{
  display:flex; align-items:center; gap:var(--k3);
  background:var(--nen-the); border:1px solid var(--vien);
  border-radius:var(--bo-bam); padding:9px var(--k3); margin-bottom:6px;
}
.dong__day{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dong a{color:var(--nhan); font-weight:600; text-decoration:none}
.dong a:hover{text-decoration:underline}

/* ===================================================================
   9. THÔNG BÁO & TRẠNG THÁI RỖNG
   =================================================================== */
.canh-bao{
  border-radius:var(--bo-bam); padding:11px var(--k4); margin-bottom:var(--k4);
  font-size:var(--cho-13); font-weight:500;
  background:var(--canh-nen); color:var(--canh); border:1px solid var(--canh-vien);
}
.canh-bao--nhac{background:var(--nen-the); color:var(--chu-3); border:1px dashed var(--vien-dam)}
/* Việc đã chạy xong đúng — xanh, không phải đỏ */
.canh-bao--ok{background:var(--ok-nen); color:var(--ok); border-color:var(--ok-vien)}

/* ---- Thanh chọn nhiều ----
   Tắt thì nép hẳn sang phải và mờ: chọn nhiều để xoá là việc hiếm và nguy,
   không đáng chiếm chỗ trong tầm mắt mỗi ngày. Bật thì thành một dải rõ có
   viền, đủ để người dùng luôn đọc được rằng mình đang ở chế độ khác thường. */
.thanh-chon{display:flex; align-items:center; gap:var(--k3); flex-wrap:wrap;
            padding:var(--k2) var(--k3); margin-bottom:var(--k3);
            border:1px solid var(--vien-dam); border-radius:var(--bo-mat);
            background:var(--nen-chim)}
.thanh-chon--tat{border:none; background:none; padding:0 0 var(--k2);
                 justify-content:flex-end}
.thanh-chon__tat-ca{display:flex; align-items:center; gap:var(--k2);
                    font-size:var(--cho-13); color:var(--chu-2); cursor:pointer}
.thanh-chon__so{flex:1; min-width:0; font-size:var(--cho-13); color:var(--chu-2)}
.co-the--chon > td{background:var(--nhan-nen)}
.canh-bao.an{display:none}

.rong{text-align:center; padding:60px var(--k5); color:var(--chu-3)}
.rong__to{font-size:var(--cho-16); font-weight:600; color:var(--chu-2); margin-bottom:var(--k1)}

/* NHỊP DỌC — cả ứng dụng chỉ dùng hai khoảng, không hơn:
     --k6 giữa hai KHỐI   · --k2 giữa NHÃN và phần nó gọi tên
   Trước đây nhãn mục để 8px cứng còn các khối lúc k5 lúc k6, nên mắt đọc
   thấy chỗ thưa chỗ mau mà không có lý do nào. */
.nhan-muc{
  font-size:var(--cho-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--chu-3); margin:0 0 var(--k2);
}

/* ===================================================================
   10. HỘP THOẠI
   =================================================================== */
dialog{border:none; border-radius:var(--bo-mat); padding:0; width:min(580px,92vw); box-shadow:var(--bong-3)}
dialog::backdrop{background:rgba(16,24,40,.5)}
/* Nền tối cần màn che ĐẬM HƠN: lớp che nhạt trên một trang vốn đã tối thì
   không tách được hộp thoại khỏi thứ phía sau nó. */
:root[data-nen="toi"] dialog::backdrop{background:rgba(0,0,0,.66)}
.hop{padding:var(--k6)}
.hop__ten{margin:0 0 var(--k1); font-size:var(--cho-20); font-weight:700; letter-spacing:-.02em}
.hop__phu{margin:0 0 var(--k5); font-size:var(--cho-13); color:var(--chu-3)}
.hop__chan{display:flex; gap:var(--k2); justify-content:flex-end; margin-top:var(--k5); flex-wrap:wrap}
.hop__chan--trai{justify-content:space-between; align-items:center}

/* ===================================================================
   11. TIỆN ÍCH
   =================================================================== */
/* Chuỗi dài KHÔNG có dấu cách — đường dẫn Drive, mã hồ sơ, mã bệnh án — sẽ
   đẩy vỡ khung nếu không cho phép ngắt giữa chừng. Áp cho mọi chỗ hiện chữ
   do người dùng nhập. Dùng `anywhere` chứ không phải `break-word` vì nó tính
   cả vào bề rộng tối thiểu, nhờ vậy ô lưới và ô co giãn cũng không phình ra. */
.bang__ten, .chi-tiet p, .the-ghi__noi, .canh-bao,
.thanh h2, .thanh p, .hop__ten, .hop__phu{overflow-wrap:anywhere}

.day{flex:1}
.hang-ngang{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap}
.chu-phu{font-size:var(--cho-12); color:var(--chu-3)}
.chu-phu b{color:var(--chu-2); font-weight:600}

/* ===================================================================
   12. MÀN HÌNH HẸP
   =================================================================== */
/* Vì sao 1023 chứ không phải 900: ở 901px thanh bên cố định 248px chỉ chừa
   621px cho bảng 6 cột, cột "Đầu việc" co còn 101px và một tiêu đề 43 ký tự
   bị ép thành 6 dòng (hàng cao 249px). Đo được: 901→101px/6 dòng ·
   960→156px/3 dòng · 1024→216px/2 dòng. Dưới 1024 thì dạng thẻ luôn hơn. */
@media(max-width:1023px){
  /* ---- Khung: thanh bên xuống thành dải ngang ở trên ----
     Hàng 1: [dấu hiệu] [ô tìm kiếm] [danh tính · nút Thành viên]
     Hàng 2: [dải khung nhìn, cuộn ngang]                        */
  .khung{flex-direction:column}
  .ben{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    width:100%; height:auto; position:static;
    border-right:none; border-bottom:1px solid var(--vien);
  }
  /* Phải khai CẢ hàng lẫn cột: chỉ khai cột thì trình duyệt tự xếp theo thứ
     tự trong HTML và đẩy chân thanh bên xuống hàng thứ ba. */
  .ben__nhom{display:none}
  .ben__hieu{grid-area:1/1; padding:var(--k3) var(--k2) var(--k3) var(--k3)}
  .ben__tim{grid-area:1/2; padding:var(--k3) 0}    /* GIỮ ô tìm kiếm — trước đây bị ẩn */
  .ben__than{grid-area:2/1/auto/4; display:flex; gap:var(--k1); padding:0 var(--k2) var(--k2); overflow-x:auto}

  /* Chân thanh bên KHÔNG còn bị ẩn: nếu ẩn thì Sếp không mở được nút
     "Thành viên" từ điện thoại. Chỉ giữ chữ cái đầu và nút, bỏ phần dài. */
  .ben__chan{
    grid-area:1/3; border-top:none; padding:var(--k3) var(--k3) var(--k3) var(--k2);
    display:flex; align-items:center; gap:var(--k2);
  }
  .ben__toi{margin-bottom:0}
  .ben__toi-ten,.ben__doi-vai,.ben__lien-ket{display:none}
  .ben__nut-nguoi{width:auto; min-height:44px; white-space:nowrap; justify-content:center}
  /* Đăng xuất PHẢI còn ở màn hẹp — máy dùng chung hay là máy tính bảng
     đặt ở quầy, đúng chỗ cần thoát nhất. Chỉ thu lại cho vừa hàng ngang. */
  .ben__nut-thoat{width:auto; margin-top:0; min-height:44px; white-space:nowrap}

  /* Chọn nền ở màn hẹp: chân thanh bên nằm NGANG nên dải ba nút không được
     kéo giãn chia đều nữa — mỗi nút co về đúng bề rộng chữ của nó, nếu
     không chúng đè chữ lên nhau.
     GIỮ ĐỦ CẢ BA. Bỏ bớt "Theo máy" cho gọn thì ai đang dùng nó sẽ thấy
     không nút nào sáng, và không còn đường quay về mặc định — gọn hơn mà
     mất một chức năng thì không phải là gọn. Chỉ rút chữ, không bỏ nút. */
  .chon-nen{margin-top:0; flex:none}
  .chon-nen__nut{flex:none; padding:6px 10px; min-height:44px}
  .chon-nen__nut[data-doi-nen="may"]{font-size:0}
  .chon-nen__nut[data-doi-nen="may"]::after{content:'Máy'; font-size:var(--cho-11)}

  .muc{width:auto; white-space:nowrap; min-height:44px}
  .thanh{padding:var(--k4)}
  .than{--le:var(--k4); padding:var(--le)}

  /* Trang chủ ở màn hẹp: ba ô số vẫn xếp NGANG, cùng lý do với bảng điều
     khiển dự án — chồng dọc thì phải cuộn mới thấy hết, mà cuộn rồi thì
     không còn là cái nhìn một lượt. */
  .nha__chao{padding:var(--k5) var(--le); min-height:112px}
  .nha__ten{font-size:var(--cho-20)}
  .nha__cau{font-size:var(--cho-14)}
  /* Nhãn thời tiết nhường chỗ cho lời chào ở màn hẹp — chồng lên nhau thì
     mất cả hai. Đưa lên góc trên, nơi bầu trời còn trống. */
  .troi__nhan{top:var(--k3); bottom:auto; right:var(--k3)}
  .nha__so{gap:var(--k2)}
  .nha__so .o-so{padding:var(--k1) var(--k2)}
  .nha__so .o-so__so{font-size:var(--cho-20)}
  .nha__so .o-so__nhan{font-size:var(--cho-11)}
  .nha__dong{min-height:44px; align-items:baseline; flex-wrap:wrap; row-gap:2px}
  /* Tên việc chiếm trọn một dòng, chú thích tụt xuống dưới. Để chung một
     dòng thì tên bị cắt còn "Rà soát danh mụ…" — mất đúng thứ cần đọc. */
  .nha__dong-ten{flex:1 0 calc(100% - 28px); white-space:normal}
  .thanh h2{font-size:var(--cho-20)}

  /* Bảng theo dõi dự án cũng xếp thành thẻ, theo đúng lối của bảng đầu việc */
  .bang--du-an tbody tr{
    background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-mat);
    box-shadow:var(--bong-1); padding:var(--k3) var(--k4); margin-bottom:var(--k2);
  }
  .bang--du-an tbody td{display:flex; align-items:center; gap:var(--k2); padding:2px 0; border:none}
  .bang--du-an tbody td[data-nhan]::before{
    content:attr(data-nhan); flex:none; min-width:84px;
    font-size:var(--cho-12); color:var(--chu-3);
  }

  /* ---- Vùng chạm đủ lớn cho ngón tay ---- */
  .so-loc,.bao-tre{min-height:44px}

  /* Bảng điều khiển ở màn hẹp: ba ô số vẫn xếp NGANG — chồng dọc thì phải
     cuộn mới thấy hết, mà cuộn rồi thì không còn là cái nhìn tổng quan.
     Hai khối dưới thì chồng dọc, chúng cần bề ngang để đọc. */
  .bdk{padding:var(--k3)}
  .bdk__so{gap:var(--k2)}
  .o-so{padding:var(--k1) var(--k2)}
  .o-so__so{font-size:var(--cho-20)}
  .o-so__nhan{font-size:var(--cho-11)}
  .bdk__cot{grid-template-columns:1fr; gap:var(--k4)}
  .bdk__ten{width:88px}
  .bdk__viec{min-height:44px}
  .nut--chuong{min-width:44px; min-height:44px}
  .vung-tich{width:44px; height:44px}
  .o-tich{width:20px; height:20px}
  /* Nút và ô nhập vốn cao 41px — thiếu 3px so với mức 44px. Kê cho đủ, trừ
     ô nhiều dòng vì chúng đã tự cao hơn nhiều. */
  .nut,.o-nhap:not(textarea){min-height:44px}

  /* ---- BẢNG → THẺ ----
     Không giấu cột nào và không phải cuộn ngang: mỗi đầu việc thành một thẻ,
     nhãn cột đi kèm giá trị (lấy từ thuộc tính data-nhan).                  */
  .the-bai{background:none; border:none; box-shadow:none; border-radius:0; overflow:visible}
  .bang thead{display:none}
  .bang,.bang tbody,.bang tr,.bang td{display:block}

  .bang tbody tr.co-the{
    display:grid; grid-template-columns:auto 1fr auto; gap:var(--k1) var(--k2);
    background:var(--nen-the); border:1px solid var(--vien);
    border-radius:var(--bo-mat); box-shadow:var(--bong-1);
    padding:var(--k3) var(--k4) var(--k4); margin-bottom:var(--k2);
  }
  .bang tbody tr.co-the.mo-ra{margin-bottom:0; border-radius:var(--bo-mat) var(--bo-mat) 0 0}
  .bang tbody tr.co-the > td{padding:0; border:none}

  /* Ở dạng thẻ thì chính THẺ lùi vào, không phải chữ — bỏ đường nối dọc
     của bảng đi, thay bằng vạch trái đậm chạy hết chiều cao thẻ con. */
  .bang tbody tr.co-the--con{
    margin-left:var(--k5); border-left:3px solid var(--vien-dam);
  }
  .bang tbody tr.co-the--cha:not(.mo-ra){margin-bottom:var(--k1)}
  .bang tbody tr.co-the--con > td:nth-child(2){padding-left:0}
  .bang tbody tr.co-the--con > td:nth-child(2)::before{display:none}
  /* Vùng chạm 44px cho ngón tay. Nới bằng lớp phủ trong suốt chứ không bằng
     padding — padding sẽ đẩy tiêu đề lệch khỏi hàng của các việc không có
     cụm con, làm hỏng cột thị giác. */
  .nut-gap{padding:10px 12px 10px 0; margin:-10px 0 -10px -4px; position:relative}
  .nut-gap::after{content:''; position:absolute; inset:-6px -12px}

  .bang tbody tr.co-the > td:nth-child(1){grid-area:1/1; align-self:start}
  .bang tbody tr.co-the > td:nth-child(2){grid-area:1/2/auto/4; align-self:center}
  .bang tbody tr.co-the > td:nth-child(3){grid-area:2/2}          /* trạng thái */
  .bang tbody tr.co-the > td:nth-child(6){grid-area:2/3; text-align:right}  /* ưu tiên */
  .bang tbody tr.co-the > td:nth-child(4),
  .bang tbody tr.co-the > td:nth-child(5){
    grid-column:2/4; display:flex; align-items:center; gap:var(--k2); min-height:26px;
  }
  .bang tbody tr.co-the > td[data-nhan]::before{
    content:attr(data-nhan); flex:none; min-width:66px;
    font-size:var(--cho-12); color:var(--chu-3);
  }

  /* Khối chi tiết nối liền ngay dưới thẻ đang mở */
  .bang tbody tr:not(.co-the) > td.chi-tiet{
    border:1px solid var(--vien); border-top:none;
    border-radius:0 0 var(--bo-mat) var(--bo-mat); margin-bottom:var(--k2);
  }
  .bang td.chi-tiet > div{padding:var(--k4)}
}

/* ---- Thẻ trên màn vừa (máy tính bảng, cửa sổ chia đôi) ----
   Thẻ rộng gần 1000px thì ưu tiên bị đẩy ra tận mép phải, cách trạng thái
   một khoảng trống vô nghĩa. Gom hai thứ đó lại cạnh nhau. */
@media(min-width:700px) and (max-width:1023px){
  .bang tbody tr.co-the{grid-template-columns:auto auto 1fr}
  .bang tbody tr.co-the > td:nth-child(6){grid-area:2/3; text-align:left; justify-self:start}
}

/* ---- Màn RẤT hẹp: nhường hết chỗ ngang cho ô tìm kiếm ----
   Dưới ngưỡng này lịch cũng đổi sang danh sách theo ngày — lưới 7 cột chỉ
   còn ~48px mỗi ô, tiêu đề việc rút thành "R…" là vô dụng.
   Ngưỡng 560px phải TRÙNG với matchMedia trong public/js/nhin/lich.js. */
@media(max-width:560px){
  .ben__hieu h1{display:none}
  .ben__nut-nguoi .nut__chu{display:none}
  .ben__nut-nguoi{min-width:44px; padding:6px}
}

/* ---- Màn THẤP: điện thoại xoay ngang ----
   Ở 812×375 thanh trên cũ ăn 280/375px, chỉ còn 96px cho nội dung.
   Thu gọn ba tầng chồng nhau lại còn hai hàng sát nhau. */
@media(max-width:1023px) and (max-height:480px){
  .ben__hieu{padding:var(--k2) var(--k2) var(--k2) var(--k3)}
  .ben__hieu h1{display:none}
  .ben__tim{padding:var(--k2) 0}
  .ben__chan{padding:var(--k2) var(--k3) var(--k2) var(--k2)}
  .ben__than{padding:0 var(--k2) var(--k2)}
  .thanh{padding:var(--k2) var(--k4)}
  .thanh h2{font-size:var(--cho-16)}
  .than{--le:var(--k4); padding:var(--k3) var(--le)}
}