/* app.dkharvest — bố cục và phần nhìn.
   Chỉ ba độ đậm 400 / 600 / 700 — không dùng 500, để ranh giới nhấn và không
   nhấn luôn rõ. Số luôn tabular-nums. Vàng cam chỉ xuất hiện ở diện tích nhỏ. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--muted)}
.lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
     color:var(--muted)}
.h2{font-size:17px;font-weight:600;letter-spacing:-.025em;margin:0 0 11px}

/* =====================================================================
   Ô NHẬP — khai một lần cho MỌI ô, kể cả <select> ngoài biểu mẫu.
   Trước đây chỉ khai trong `.form` nên cái select ở danh sách chat rơi về
   kiểu mặc định của hệ điều hành, lạc hẳn khỏi phần còn lại.
   ===================================================================== */
input, select, textarea, button{font-family:var(--sans);font-size:14px;color:var(--ink)}
input[type=text], input[type=date], input[type=search], input:not([type]),
textarea, select{
  width:100%;padding:9px 12px;border:1px solid var(--hair);
  border-radius:var(--r-nav);background:var(--panel);
  -webkit-appearance:none;appearance:none;
}
select{
  padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23756C63' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
select[multiple]{background-image:none;padding:6px}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
input::placeholder, textarea::placeholder{color:var(--muted)}
/* Ruột của ô chọn tệp do trình duyệt vẽ và KHÔNG xuống dòng: nút "Chọn tệp"
   cộng câu "Không có tệp nào được chọn" dài hơn hộp thoại trên điện thoại,
   tràn ra ngoài mép. Chữ nhỏ hơn một nấc là vừa khung, mà vẫn đọc được. */
input[type=file]{padding:8px;background:var(--panel-2);
                 border:1px dashed var(--hair);max-width:100%;font-size:12.5px}
input[type=checkbox]{width:auto;-webkit-appearance:auto;appearance:auto}

/* `[hidden]` của trình duyệt chỉ là display:none với độ ưu tiên thấp nhất —
   BẤT KỲ lớp nào khai display cũng thắng nó. Nên `el.hidden = true` trong JS
   im lặng không có tác dụng trên .btn, .cn-goi-y, .tin-nut… Cả app dùng
   `el.hidden` ở nhiều chỗ, nên chốt một dòng ở đây thay vì đi nhớ từng nơi. */
[hidden]{display:none!important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border:0;border-radius:var(--r-nav);cursor:pointer;
  background:var(--brand);color:var(--brown);font-weight:600;font-size:14px;
  white-space:nowrap;
  /* line-height PHẢI khai rõ. Cùng lớp .btn nhưng <a> lấy line-height 1.55 của
     body còn <button> lấy `normal` (~1.2) của trình duyệt, nên hai nút cạnh
     nhau lệch nhau 4px — đúng chỗ nút Xoá thụt lên so với Xem / Tải về. */
  line-height:1.5;
}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:var(--panel);color:var(--ink-2);border:1px solid var(--hair)}
.btn.ghost:hover{background:var(--panel-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}

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

.side{
  width:236px;flex:0 0 236px;background:var(--panel-2);
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  transition:width .16s ease,flex-basis .16s ease;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px;
       border-bottom:1px solid var(--hair)}
/* Logo công ty. Hình tròn nên KHÔNG bo góc vuông: bo góc một hình tròn là
   cắt mất vành nâu của logo. */
.brand .mark{width:32px;height:32px;flex:0 0 32px;display:block}
.brand .mark img{width:100%;height:100%;display:block}
.brand .nm{font-weight:700;font-size:15px;letter-spacing:-.025em}

.nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px;flex:1}
.nhom-nav{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);padding:0 12px 9px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;
       border-radius:var(--r-nav);color:var(--ink-2);font-weight:400}
.nav a:hover{background:var(--hair-2)}
.nav a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav a .ic{width:19px;height:19px;flex:0 0 19px}
.nav a .badge{margin-left:auto;font-size:11.5px;font-weight:600;
              background:var(--brand);color:var(--brown);
              border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.nav a.on .badge{background:var(--brand-ink);color:var(--panel)}
.nav-mo{display:flex;align-items:center;gap:11px;padding:10px 12px;
        color:var(--muted);opacity:.6;cursor:default}
.badge-mo{margin-left:auto;font-size:11.5px}

.me{display:flex;align-items:center;gap:10px;padding:14px 18px;
    border-top:1px solid var(--hair);min-width:0}
.me-chu{min-width:0}
.me .t1,.me .t2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .av{width:34px;height:34px;flex:0 0 34px;border-radius:999px;
        background:var(--brand-soft);color:var(--brand-ink);font-weight:600;
        display:grid;place-items:center;font-size:12.5px}
.me .t1{font-weight:600;font-size:13px;line-height:1.25}
.me .t2{font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------------------------
   THU GỌN THANH MENU
   Bốn ô menu thì tên ô không phải thứ cần nhìn cả ngày — nhưng bỏ hẳn chữ
   như mấy thanh chỉ-biểu-tượng thì lại phải đoán biểu tượng nghĩa là gì.
   Nên bản gọn vẫn giữ chữ, chỉ xếp xuống dưới biểu tượng và thu nhỏ lại.
   Trạng thái nhớ trong máy người dùng và đặt TRƯỚC khi trang vẽ (base.html),
   nên mở trang mới không thấy thanh bung ra rồi co lại.
   --------------------------------------------------------------------- */
.nut-gon{margin-left:auto;flex:0 0 28px;width:28px;height:28px;border:0;
         border-radius:9px;background:transparent;color:var(--muted);
         display:grid;place-items:center;cursor:pointer;padding:0}
.nut-gon:hover{background:var(--hair-2);color:var(--ink-2)}
.nut-gon .ic{transition:transform .16s ease}

:root[data-menu="gon"] .side{width:76px;flex-basis:76px}

/* Khối thương hiệu xếp dọc: logo trên, nút dưới. Để nút nằm cùng hàng với
   logo ở bề ngang 76px thì cả hai bị bóp còn một nửa. */
:root[data-menu="gon"] .brand{flex-direction:column;gap:8px;padding:14px 8px}
:root[data-menu="gon"] .brand .nm{display:none}
:root[data-menu="gon"] .nut-gon{margin:0}
:root[data-menu="gon"] .nut-gon .ic{transform:scaleX(-1)}

:root[data-menu="gon"] .nav{padding:12px 8px;gap:3px}
:root[data-menu="gon"] .nhom-nav{display:none}
:root[data-menu="gon"] .nav a,
:root[data-menu="gon"] .nav-mo{flex-direction:column;gap:5px;padding:9px 3px;
                               text-align:center;position:relative}
/* `flex:0 0 19px` là bề RỘNG khi xếp ngang, nhưng thành CHIỀU CAO khi xếp
   dọc — để nguyên thì biểu tượng bị ép dẹt. */
:root[data-menu="gon"] .nav a .ic,
:root[data-menu="gon"] .nav-mo .ic{flex:0 0 auto}
:root[data-menu="gon"] .nav-ten{font-size:10.5px;line-height:1.2;
                                font-weight:600;letter-spacing:-.01em}
/* Số chưa đọc nhảy lên vai biểu tượng: để nguyên `margin-left:auto` thì nó
   rơi xuống thành dòng thứ ba, đẩy ô menu cao gấp rưỡi. */
:root[data-menu="gon"] .nav a .badge{position:absolute;top:3px;right:6px;
                                     margin:0;font-size:10.5px;padding:0 5px;
                                     line-height:1.5}
:root[data-menu="gon"] .badge-mo{display:none}
/* Ô "Số" của giai đoạn 2 nằm ngay dưới bốn ô thật mà tiêu đề nhóm đã bị ẩn —
   không có gì ngăn thì nó trông như ô thứ năm bị mờ vì lỗi. Một đường kẻ mảnh
   nói được điều mà chữ "Giai đoạn 2" vừa nói, trong 76px. */
:root[data-menu="gon"] .nav-mo{margin-top:10px;padding-top:13px;
                               border-top:1px solid var(--hair)}

:root[data-menu="gon"] .me{justify-content:center;padding:14px 8px;gap:0}
:root[data-menu="gon"] .me-chu{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
     padding:14px 24px;border-bottom:1px solid var(--hair);background:var(--panel);
     position:sticky;top:0;z-index:20}
.tieu-de{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.top h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.033em}
.top .sub{font-size:13px;color:var(--muted)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Hai nút công cụ — cùng cỡ, cùng hàng, biểu tượng căn giữa tuyệt đối */
.cong-cu{order:9;display:flex;align-items:center;gap:8px}
.nut-tron{width:40px;height:40px;flex:0 0 40px;padding:0;position:relative;
          display:grid;place-items:center;border:1px solid var(--hair);
          border-radius:var(--r-nav);background:var(--panel);color:var(--ink-2);
          cursor:pointer;line-height:0}
.nut-tron:hover{background:var(--panel-2)}
.nut-tron .ic{width:19px;height:19px}
/* Chuông đang mở: tô nền để thấy rõ đây là trạng thái bật, bấm nữa là tắt */
.nut-tb.on{background:var(--brand-soft);border-color:var(--brand);
           color:var(--brand-ink)}
.nut-tb.on:hover{background:var(--brand-soft)}
.nut-tb .dot{position:absolute;top:-6px;right:-6px;
             min-width:19px;height:19px;padding:0 5px;border-radius:999px;
             background:var(--alert);color:#fff;font-size:11px;font-weight:600;
             display:grid;place-items:center;font-variant-numeric:tabular-nums;
             line-height:1}
.body{padding:22px 24px 90px;flex:1}

/* =====================================================================
   THẺ · BẢNG · VIÊN
   ===================================================================== */
.card{background:var(--panel);border:1px solid var(--hair);
      border-radius:var(--r-card);padding:16px 18px}
.cards{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
a.card:hover{border-color:var(--brand);background:var(--panel-2)}
.trong{padding:44px 20px;text-align:center;color:var(--muted)}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;
      font-size:11.5px;font-weight:600}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.alert{background:var(--alert-soft);color:var(--alert)}
.tt{display:inline-block;padding:3px 10px;border-radius:999px;
    font-size:12px;font-weight:600;white-space:nowrap}
.vien{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
      font-weight:600;white-space:nowrap}
.vien i{width:7px;height:7px;border-radius:999px;background:currentColor;
        display:inline-block}

.tbl{width:100%;border-collapse:collapse;background:var(--panel);
     border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.tbl th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.08em;
        text-transform:uppercase;color:var(--muted);padding:11px 16px;
        background:var(--panel-2);border-bottom:1px solid var(--hair)}
.tbl td{padding:13px 16px;border-top:1px solid var(--hair-2);font-size:13px;
        vertical-align:top}
.tbl tr:first-child td{border-top:0}
.tbl tr:hover td{background:var(--panel-2)}
.tbl .ma{font-weight:600;color:var(--brand-ink);font-variant-numeric:tabular-nums;
         white-space:nowrap}
.tbl .viec{font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.tbl .han{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Tab ngay trên thanh tiêu đề, kèm số việc */
.tabs-dau{display:flex;gap:4px;flex-wrap:wrap}
.tabs-dau a{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:600;
            color:var(--ink-2);border:1px solid transparent}
.tabs-dau a:hover{background:var(--panel-2)}
.tabs-dau a.on{background:var(--brand-soft);color:var(--brand-ink)}
.tabs-dau .dim{font-weight:400}

/* Biểu mẫu */
.form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.form label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
            text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hang{display:flex;gap:12px;flex-wrap:wrap}
.hang > *{flex:1;min-width:180px}
.ho-so{width:100%;border-collapse:collapse}
.ho-so td{padding:13px 0;border-top:1px solid var(--hair-2);font-size:14px}
.ho-so tr:first-child td{border-top:0}
.ho-so td:first-child{width:190px;color:var(--muted)}
.bs-hang{display:grid;grid-template-columns:2fr 110px 2fr;gap:12px;align-items:end}

/* Ba thứ chỉ có ở bản điện thoại — khai ẩn Ở ĐÂY, trước media query.
   Media query KHÔNG làm tăng độ ưu tiên, nên luật nào viết sau thì thắng:
   để dòng ẩn xuống cuối tệp là thanh menu dưới biến mất sạch. */
.the-task{display:none}
.nut-tao{display:none}
.tabbar{display:none}

/* =====================================================================
   CHAT
   ===================================================================== */
/* Trang chat chiếm đúng chiều cao màn hình, không hơn.
   Trước đây tính bằng calc(100vh - 158px) — con số 158 là đoán chiều cao
   thanh tiêu đề; tiêu đề dài hai dòng là khung chat thò xuống dưới màn hình,
   ô nhập che mất mấy tin cuối. Nay để trình duyệt tự chia phần còn lại. */
.trang-chat .main{height:100dvh;overflow:hidden}
.trang-chat .body{flex:1;min-height:0;overflow:hidden;padding-bottom:20px}
.chat{display:grid;grid-template-columns:308px 1fr;gap:14px;
      height:100%;min-height:0}
.chat > *{min-height:0}
/* Khung danh sách là một CỘT: ô tìm và dòng Bản tin cố định trên đầu, chỉ
   phần danh sách bên dưới cuộn.

   Trước đây cả khung cùng cuộn và ô tìm giữ chỗ bằng `position:sticky`. Sticky
   chỉ chống được cú cuộn CỦA CHÍNH khung đó — mà thứ làm ô tìm mất tích lại là
   cú cuộn của `.body` bên ngoài: ô nhắn tin mang `autofocus`, trình duyệt tự
   kéo nó vào tầm nhìn, `.body` (overflow:hidden nhưng vẫn cuộn được bằng mã)
   trôi xuống đúng chiều cao ô tìm và cắt nó khỏi vùng nhìn thấy. F5 lại đúng
   như vậy. Cột + phần cuộn nằm TRONG thì không có gì để trôi nữa. */
.ds-ht{background:var(--panel);border:1px solid var(--hair);
       border-radius:var(--r-card);overflow:hidden;
       display:flex;flex-direction:column}
.ds-cuon{flex:1 1 auto;min-height:0;overflow-y:auto}
.o-rieng{display:flex;gap:7px;padding:12px;border-bottom:1px solid var(--hair);
         background:var(--panel-2);flex:0 0 auto;z-index:2}
.o-rieng select{flex:1;min-width:0;font-size:13px;padding:8px 30px 8px 11px}
.o-rieng .chon-nguoi{flex:1;min-width:0}
.ds-ht a{display:flex;gap:11px;align-items:center;padding:12px 14px;
         border-bottom:1px solid var(--hair-2)}
.ds-ht a:hover{background:var(--panel-2)}
.ds-ht a.on{background:var(--brand-soft)}
.av-ht{width:36px;height:36px;flex:0 0 36px;border-radius:999px;
       background:var(--brand-soft);color:var(--brand-ink);font-weight:600;
       font-size:12.5px;display:grid;place-items:center;text-transform:uppercase}
.ds-ht .ten{font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px}
.ds-ht .ten span.badge{margin-left:auto;background:var(--alert);color:#fff;
                       border-radius:999px;font-size:10.5px;font-weight:600;
                       padding:1px 7px;font-variant-numeric:tabular-nums}
.ds-ht .cuoi{font-size:12.5px;color:var(--muted);margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-ht .auto{font-size:10.5px;color:var(--brand-ink);font-weight:600;
             background:var(--brand-soft);border-radius:999px;padding:0 6px}

.khung-ht{display:flex;flex-direction:column;background:var(--panel);
          border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.dau-ht{padding:12px 16px;border-bottom:1px solid var(--hair);
        display:flex;align-items:center;gap:11px;background:var(--panel)}
.dau-ht .quay-lai{display:none}
.tin-ds{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;
        gap:12px;background:var(--ground)}
.tin{max-width:min(560px,80%)}
.tin .noi-dung{background:var(--panel);border:1px solid var(--hair);
               border-radius:14px;padding:10px 14px;font-size:13.5px;line-height:1.5;
               word-wrap:break-word}
/* Giữ nguyên xuống dòng người ta đã gõ (Shift+Enter) — chỉ trên phần chữ,
   không phải cả bóng chat. */
.tin .chu{white-space:pre-wrap}
.tin .ai-noi{display:block;font-weight:600;color:var(--brand-ink);font-size:12.5px;
             margin-bottom:3px}
.tin.minh{align-self:flex-end}
.tin.minh .noi-dung{background:var(--brand-soft);border-color:var(--brand)}
.tin .gio{font-size:10.5px;color:var(--muted);margin-top:4px;
          font-variant-numeric:tabular-nums}
.tin.minh .gio{text-align:right}
.ref{font-weight:600;color:var(--brand-ink)}
a.ref{background:var(--brand-soft);border-radius:6px;padding:1px 6px}
.ref.sku{background:var(--brand-soft);border-radius:6px;padding:1px 6px}
.o-go{display:flex;gap:9px;padding:12px;border-top:1px solid var(--hair);
      background:var(--panel);align-items:flex-end}
/* Ô nhắn tin là textarea một dòng, tự cao dần khi xuống dòng.
   `resize:none` vì góc kéo của trình duyệt kéo ra là vỡ cả bố cục cột;
   cao tối đa ~5 dòng rồi tự cuộn trong ô, để ô gõ không nuốt hết chỗ đọc tin. */
.o-go input,.o-go textarea{flex:1;border-radius:20px;padding:10px 16px;min-width:0}
.o-go textarea{resize:none;max-height:132px;overflow-y:auto;line-height:1.45;
               font-family:inherit}

.hop{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--panel);
     color:var(--ink);padding:22px;max-width:430px;width:calc(100% - 32px)}
.hop::backdrop{background:rgba(43,38,34,.45)}

/* Hàng task được nhắc từ chat — nổi lên khoảng 2 giây rồi tắt */
@keyframes noi-bat{0%,70%{background:var(--brand-soft)}100%{background:transparent}}
.noi-bat td,.noi-bat{animation:noi-bat 2.2s ease-out 1}

/* =====================================================================
   ĐIỆN THOẠI — dựng lại cho màn hình cầm một tay, không phải bản máy tính
   thu nhỏ. Thanh menu xuống đáy: ngón cái với tới đáy dễ hơn đỉnh.
   ===================================================================== */
@media (max-width:820px){
  /* iOS phóng to trang khi bấm vào ô nhập có cỡ chữ < 16px. Cho đủ 16px là
     hết phóng — cách này không đụng tới quyền tự phóng to của người dùng,
     khác với việc khoá maximum-scale. */
  input, select, textarea{font-size:16px}
  .o-rieng select{font-size:16px}
  .o-go input,.o-go textarea{font-size:16px}

  .side{display:none}
  .body{padding:14px 14px calc(92px + env(safe-area-inset-bottom))}

  .top{padding:14px 16px 12px;align-items:flex-start;position:relative;gap:0}
  .top h1{font-size:27px}
  .tieu-de{flex-direction:column;align-items:flex-start;gap:2px;
           padding-right:100px}    /* chừa chỗ cho hai nút công cụ */
  .top .right{width:100%;margin-left:0;margin-top:12px;flex-wrap:wrap}
  /* Hai nút công cụ neo ở góc trên bên phải, ngang hàng nhau */
  .cong-cu{position:absolute;top:14px;right:16px}

  .tabs-dau{width:100%;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tabs-dau a{white-space:nowrap;border-color:var(--hair);background:var(--panel)}
  .tabs-dau a.on{border-color:transparent}

  /* Task: bảng bốn cột không nhét vừa 390px nên đổi hẳn sang thẻ */
  .tbl{display:none}
  .the-task{display:block}
  .the-task a{display:block;background:var(--panel);border:1px solid var(--hair);
              border-left:4px solid var(--hair);border-radius:var(--r-card);
              padding:13px 15px;margin-bottom:10px}
  .the-task .d1{display:flex;align-items:center;gap:9px;margin-bottom:5px}
  .the-task .ma{font-weight:600;color:var(--brand-ink);font-size:12.5px;
                font-variant-numeric:tabular-nums}
  .the-task .viec{font-size:15.5px;font-weight:600;letter-spacing:-.015em;
                  line-height:1.35}
  .the-task .d2{display:flex;gap:7px;margin-top:7px;font-size:12.5px;
                color:var(--muted);flex-wrap:wrap}
  .the-task .d2 .gach{color:var(--hair)}
  /* Nút chính chiếm hết bề ngang — ngón cái không phải ngắm */
  .nut-tao{display:flex;width:100%;justify-content:center;padding:14px;
           font-size:15px;margin-top:4px}

  /* Chat một tầng: danh sách trước, chạm mới vào hội thoại */
  .chat{grid-template-columns:1fr;height:auto;gap:0}
  .chat.co-ht .ds-ht{display:none}
  .ds-ht{border-radius:var(--r-card)}
  .ds-ht a{padding:14px 16px}
  .av-ht{display:none}            /* trên điện thoại tên đã đủ nhận ra nhau */
  .ds-ht .ten{font-size:15.5px}
  .ds-ht .cuoi{font-size:13px;margin-top:3px}
  .ds-ht .ten span.badge{background:var(--alert);padding:2px 8px;font-size:11px}
  .khung-ht{height:calc(100vh - 208px);border-radius:var(--r-card)}
  .dau-ht .quay-lai{display:grid;place-items:center;width:36px;height:36px;
                    flex:0 0 36px;border:1px solid var(--hair);
                    border-radius:11px;color:var(--ink-2);background:var(--panel)}
  .dau-ht .av-ht{display:none}
  .tin{max-width:88%}
  .o-go{padding:11px}
  /* Vùng chạm của nút Gửi và nút kẹp tệp: tối thiểu 44px như Apple khuyến
     nghị. Nút cao 39px thì ngón cái trượt hụt vài lần trong mười, mà mỗi lần
     hụt người ta lại tưởng app không nhận. */
  .o-go .btn{min-height:44px;padding-left:17px;padding-right:17px}
  .o-go .nut-kep{min-width:44px;min-height:44px}

  .cards{grid-template-columns:1fr;gap:10px}
  .hang{gap:10px}
  .hang > *{min-width:100%}
  .bs-hang{grid-template-columns:110px 1fr;gap:9px;padding-top:12px;
           border-top:1px solid var(--hair-2)}
  .bs-hang .ten{grid-column:1/-1}
  .bs-hang label{display:none}
  .ho-so td:first-child{width:118px}
  .form{max-width:100%}

  /* Thanh menu dưới */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
          background:var(--panel);border-top:1px solid var(--hair);
          padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
            padding:7px 2px;border-radius:11px;font-size:11.5px;font-weight:600;
            color:var(--muted);position:relative}
  .tabbar a.on{color:var(--brand-ink);background:var(--brand-soft)}
  .tabbar a .badge{position:absolute;top:1px;right:calc(50% - 22px);
                   background:var(--alert);color:#fff;border-radius:999px;
                   min-width:17px;height:17px;padding:0 5px;font-size:10.5px;
                   font-weight:600;display:grid;place-items:center;
                   font-variant-numeric:tabular-nums}
}

/* Thẻ trong mục Công ty và hàng mục trong Tài khoản — có mũi tên dẫn tiếp */
.the-cty{display:flex;align-items:center;gap:12px}
.mui-ten{margin-left:auto;color:var(--muted);font-size:20px;line-height:1}
.chip{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.06em;
      text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);
      border-radius:999px;padding:3px 9px;white-space:nowrap}
.hang-muc{background:var(--panel);border:1px solid var(--hair);
          border-radius:var(--r-card);overflow:hidden;margin-top:11px}
.hang-muc a{display:flex;align-items:center;gap:11px;padding:14px 16px;
            border-top:1px solid var(--hair-2)}
.hang-muc a:first-child{border-top:0}
.hang-muc a:hover{background:var(--panel-2)}
.tao-tren{margin-left:6px}
@media (max-width:820px){ .tao-tren{display:none} }

/* Nút chuyển sáng / tối — biểu tượng đổi theo chế độ đang dùng */
.nut-che-do::before{content:"🌙";font-size:17px;line-height:1}
:root[data-theme="dark"] .nut-che-do::before{content:"☀️"}

/* =====================================================================
   CHAT TRÊN ĐIỆN THOẠI — mỗi lúc chỉ MỘT màn.
   Danh sách chiếm trọn màn hình; chạm vào một hội thoại thì hội thoại
   chiếm trọn màn hình, thoát bằng nút quay lại. Không bao giờ hiện nửa
   nọ nửa kia như bản máy tính.
   ===================================================================== */
@media (max-width:820px){
  /* Danh sách: bỏ hẳn khung hội thoại rỗng bên dưới */
  .chat:not(.co-ht) .khung-ht{display:none}
  .chat:not(.co-ht) .ds-ht{
    min-height:calc(100dvh - 232px);   /* đầy màn, dư thì tự cuộn */
    max-height:calc(100dvh - 232px);
    /* Cuộn đã dời vào .ds-cuon bên trong, nên ô tìm ở lại trên đầu ở đây nữa. */
  }

  /* Đang trong hội thoại: PHỦ KÍN MÀN HÌNH, giấu luôn thanh menu dưới.
     Trong một cuộc trò chuyện thì việc duy nhất đang làm là đọc và nhắn —
     bốn cái icon Chat/Task/Công ty/Tài khoản nằm dưới chỉ ăn mất một dải màn
     hình, mà ai muốn đi chỗ khác thì đã có nút ← ở đầu hội thoại. Back ra
     danh sách là thanh menu hiện lại.

     Ẩn bằng `display:none` chứ không đẩy ra ngoài màn: đẩy ra ngoài thì nó
     vẫn bắt được chạm ở mép dưới, ngón tay quẹt trúng là nhảy sang mục khác
     giữa lúc đang gõ. */
  .toan-man .top{display:none}
  .trang-chat.toan-man .body{padding:0}
  .toan-man .chat{gap:0}
  /* Dấu ~ chứ không phải khoảng trắng: <nav class="tabbar"> là ANH EM của
     .wrap trong base.html, không nằm trong nó. Viết kiểu con cháu thì luật
     không khớp gì cả và thanh menu vẫn đứng đó. */
  .trang-chat.toan-man ~ .tabbar{display:none}
  .chat.co-ht{
    position:fixed;left:0;right:0;top:0;z-index:30;
    /* Chiều cao và vị trí do chatlive.js đặt theo visualViewport. Dòng dưới
       chỉ là mức nền cho lúc JS chưa chạy hoặc trình duyệt không hỗ trợ. */
    height:100dvh;
  }
  /* Thanh menu đã đi thì ô nhập phải TỰ chừa vạch home của iPhone — trước đây
     chỗ trống đó là do thanh menu đứng dưới cùng tạo ra. */
  .chat.co-ht .o-go{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  /* Nhưng bàn phím mở ra thì vạch home bị che, chừa nữa là thừa một dải trống
     thứ hai ngay trên bàn phím. */
  body.co-ban-phim .chat.co-ht .o-go{padding-bottom:11px}
  .chat.co-ht .khung-ht{
    height:100%;border:0;border-radius:0;
    padding-top:env(safe-area-inset-top);
  }
  /* Đầu hội thoại KHÔNG cuộn theo tin: nó là hàng đầu của khung flex, và phải
     đục (không trong suốt) để tin trượt qua dưới nó không lộ ra nửa vời. */
  .chat.co-ht .dau-ht{flex:0 0 auto;position:relative;z-index:3;
                      background:var(--panel);
                      padding-top:calc(12px + env(safe-area-inset-top))}
  .chat.co-ht .khung-ht{padding-top:0}
  /* Ô nhập LUÔN dính đáy: vùng tin nhắn co giãn, ô nhập là phần tử cuối */
  .chat.co-ht .tin-ds{flex:1 1 auto;min-height:0}
  .chat.co-ht .o-go{flex:0 0 auto;position:sticky;bottom:0}
}

/* Hộp gợi ý @người · #task — nổi NGAY TRÊN ô nhập, không che tin nhắn */
.o-go{position:relative}
.goi-y{display:none;position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);
       background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);
       box-shadow:0 10px 30px rgba(43,38,34,.16);max-height:270px;overflow-y:auto;
       z-index:60}
.gy-dong{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
         border-top:1px solid var(--hair-2);font-size:14px}
.gy-dong:first-child{border-top:0}
.gy-dong.chon,.gy-dong:hover{background:var(--brand-soft)}
.gy-trai{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gy-phai{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.gy-ma{font-weight:600;color:var(--brand-ink);font-variant-numeric:tabular-nums}

/* =====================================================================
   ĐÍNH KÈM TRONG CHAT
   ===================================================================== */
.nut-kep{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
         border:1px solid var(--hair);border-radius:999px;background:var(--panel);
         cursor:pointer;font-size:17px;line-height:1}
.nut-kep:hover{background:var(--panel-2)}

/* Xem trước những tệp sắp gửi — nổi trên ô nhập */
.xem-truoc{display:none;position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);
           gap:8px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--hair);
           border-radius:var(--r-card);padding:10px;z-index:50;
           box-shadow:0 10px 30px rgba(43,38,34,.14)}
.xt-mot{display:flex;align-items:center;gap:8px;background:var(--panel-2);
        border:1px solid var(--hair-2);border-radius:10px;padding:6px 8px;
        font-size:12.5px;max-width:100%}
.xt-mot img{width:34px;height:34px;object-fit:cover;border-radius:7px;display:block}
.xt-ten{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        color:var(--ink-2)}
.xt-bo{border:0;background:transparent;color:var(--muted);font-size:17px;
       cursor:pointer;line-height:1;padding:0 2px}
.xt-bo:hover{color:var(--alert)}

/* Tệp đã gửi, hiện trong bóng chat */
.dinh-kem{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.dinh-kem:last-child{margin-bottom:0}
.dk-anh img{max-width:100%;max-height:280px;border-radius:10px;display:block}
/* Tệp mất khỏi đĩa: nói thẳng, đừng để trình duyệt hiện ô ảnh vỡ */
.dk-mat{display:block;font-size:12.5px;color:var(--muted);background:var(--panel-2);
        border:1px dashed var(--hair);border-radius:10px;padding:9px 11px}
.dinh-kem video{max-width:100%;max-height:300px;border-radius:10px;display:block;
                background:#000}
.dk-tep{display:flex;align-items:center;gap:9px;padding:9px 11px;
        background:var(--panel-2);border:1px solid var(--hair-2);
        border-radius:10px;font-size:13px}
.dk-tep:hover{border-color:var(--brand)}
.dk-ten{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        font-weight:600}
.dk-co{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
.tin.minh .dk-tep{background:var(--panel);border-color:var(--hair)}

/* Kéo tệp vào khung chat */
.khung-ht.dang-keo{outline:2px dashed var(--brand);outline-offset:-4px}

/* Một lần task bị trả lại */
.lan-tra{margin-top:12px;padding:12px 14px;background:var(--alert-soft);
         border-left:3px solid var(--alert);border-radius:var(--r-nav)}
.lan-tra .dinh-kem{gap:8px}
.lan-tra .dk-anh img{max-height:200px}
/* Báo cáo gửi duyệt dùng chung khung với lần trả, chỉ đổi màu: xanh là việc
   chạy đúng mạch, đỏ đất là bị trả lại. Nhìn lướt là phân biệt được ngay. */
.lan-bao{background:var(--good-soft);border-left-color:var(--good)}

/* Ô chọn người: gõ tên → gợi ý → thành thẻ.
   Ô chọn nhiều của hệ điều hành không nhận màu nền tối (nền trắng, dòng chọn
   màu hồng) và bắt phải giữ Ctrl mới chọn được nhiều người — nên dựng lại
   bằng phần tử thường để nó theo đúng bộ màu và bấm được bằng ngón tay. */
.chon-nguoi{position:relative}
/* Cao đúng bằng ô nhập thường bên cạnh: một dòng chữ + 8px trên dưới + viền.
   Ô nhập bên trong KHÔNG được ăn `padding:9px 12px` của luật chung — cộng hai
   lớp đệm vào nhau là ô này cao hơn ô ngày giờ 19px, nhìn lệch hẳn một bậc.
   Phải viết `.cn-o .cn-nhap` (hai lớp) mới thắng được `input[type=text]`. */
.cn-o{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
      border:1px solid var(--hair);border-radius:var(--r-nav);
      background:var(--panel);padding:8px 10px;cursor:text}
.cn-o:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.cn-o .cn-nhap{flex:1;min-width:110px;border:0;outline:0;background:none;
               color:var(--ink);font-family:inherit;font-size:14px;
               line-height:21px;padding:0 2px;height:21px}
.cn-the{display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);
        color:var(--brand-ink);border-radius:999px;padding:0 5px 0 10px;
        font-size:12.5px;line-height:21px;font-weight:600;max-width:100%}
.cn-the span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-the button{border:0;background:none;color:inherit;cursor:pointer;
               font-size:15px;line-height:1;padding:0 4px;opacity:.7}
.cn-the button:hover{opacity:1}
.cn-goi-y{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
          background:var(--panel);border:1px solid var(--hair);
          border-radius:var(--r-nav);box-shadow:0 10px 26px rgba(0,0,0,.18);
          max-height:230px;overflow:auto}
.cn-mot{padding:9px 12px;font-size:13.5px;cursor:pointer;display:flex;
        align-items:center;gap:8px}
.cn-mot.sang,.cn-mot:hover{background:var(--brand-soft);color:var(--brand-ink)}
/* Nhãn "nhóm" bên phải dòng gợi ý: một cái tên có thể vừa là tên nhóm vừa là
   biệt danh của ai đó, không ghi rõ thì chọn xong mới biết mình vào đâu. */
.cn-nhan{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:700;
         letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);
         background:var(--brand-soft);border-radius:999px;padding:2px 7px}
.cn-mot.sang .cn-nhan,.cn-mot:hover .cn-nhan{background:var(--panel)}
.cn-trong{padding:10px 12px;font-size:12.5px;color:var(--muted)}
/* Đặt CUỐI file, sau luật gốc ở trên: cùng độ ưu tiên thì luật đứng sau mới
   thắng. Trên điện thoại chữ phải 16px, dưới 16px là bấm vào ô nào màn hình
   cũng tự phóng to rồi không lùi lại. */
@media (max-width:820px){
  .cn-o .cn-nhap{font-size:16px;line-height:24px;height:24px}
  .cn-the{line-height:24px}
}

/* Bảng tick chọn loại thông báo */
.hang-tick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.o-tick{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
        text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);
        cursor:pointer;line-height:1.45}
.o-tick input{width:auto;margin-top:2px;flex:0 0 auto}
.o-tick .dim{font-size:12px}

/* Nút chuông ở đầu hội thoại + dấu tắt tiếng trong danh sách */
.nut-chuong{margin-left:auto;flex:0 0 auto;width:36px;height:36px;border-radius:11px;
            border:1px solid var(--hair);background:var(--panel);cursor:pointer;
            font-size:15px;line-height:1;display:grid;place-items:center}
.nut-chuong:hover{background:var(--panel-2)}
.nut-chuong.dang-tat{border-color:var(--brand);background:var(--brand-soft)}
.ds-ht .im{font-size:11px;opacity:.75}
.cot-nut{display:flex;flex-direction:column;gap:7px}
.cot-nut .btn{width:100%;justify-content:center;margin:0}

/* =====================================================================
   MỤC TASK — ba tab, ba cách nhìn khác nhau
   Mục gập bằng <details> của trình duyệt, không phải JavaScript tự chế:
   bấm được bằng bàn phím, đọc được bằng trình đọc màn hình, và không có
   cảnh JavaScript hỏng thì cả trang thành một cục không mở ra được.
   ===================================================================== */
.tk-hom-nay{display:flex;align-items:center;gap:13px;padding:14px 16px}
.tk-mat-troi{width:38px;height:38px;flex:0 0 38px;border-radius:11px;font-size:19px;
             display:grid;place-items:center;background:var(--brand-soft)}

.tk-so3,.tk-so4{display:grid;gap:10px;margin-top:11px}
.tk-so3{grid-template-columns:repeat(3,1fr)}
.tk-so4{grid-template-columns:repeat(4,1fr)}
.tk-o{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);
      padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tk-o .num{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tk-o span:last-child{font-size:12px;color:var(--muted)}
.tk-o.do .num{color:var(--alert)}
.tk-o.vang .num{color:var(--brand-ink)}
.tk-o.xanh .num{color:var(--good)}
.tk-o.duong .num{color:var(--info)}
.tk-o.luc .num{color:var(--ink-2)}

.tk-tim{position:relative;margin-top:11px;display:flex;align-items:center;gap:9px}
.tk-tim input{flex:1;min-width:0}
.tk-tim-so{font-size:12px;white-space:nowrap}

.tk-muc{margin-top:11px;background:var(--panel);border:1px solid var(--hair);
        border-radius:var(--r-card);overflow:hidden}
.tk-muc > summary{display:flex;align-items:center;gap:9px;padding:13px 15px;
                  cursor:pointer;font-weight:600;font-size:14.5px;list-style:none;
                  user-select:none}
.tk-muc > summary::-webkit-details-marker{display:none}
.tk-muc > summary::after{content:'▾';margin-left:auto;color:var(--muted);
                         font-size:12px;transition:transform .15s}
.tk-muc[open] > summary::after{transform:rotate(180deg)}
.tk-muc > summary:hover{background:var(--panel-2)}
.tk-muc .dem{background:var(--hair-2);color:var(--ink-2);border-radius:999px;
             padding:1px 8px;font-size:12px;font-weight:600}
.tk-muc .phu{font-weight:400;font-size:12px}
.tk-muc .dem-loc{margin-left:8px;font-size:11.5px;color:var(--brand-ink);
                 font-weight:600}
.tk-muc.trong-loc{opacity:.55}
.tk-than{border-top:1px solid var(--hair-2);padding:6px 0}
.tk-than.khong-dem{padding:0}
.cham{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.cham.do{background:var(--alert)}
.cham.vang{background:var(--brand)}
.cham.xanh{background:var(--good)}
.cham.duong{background:var(--info)}
.cham.luc{background:var(--hair)}

.tk-ngay{padding:9px 15px 4px;font-size:11.5px;font-weight:600;color:var(--muted);
         text-transform:uppercase;letter-spacing:.05em}
.tk-hang{display:flex;align-items:center;gap:11px;padding:10px 15px;
         border-left:3px solid transparent}
.tk-hang:hover{background:var(--panel-2)}
.tk-hang .tk-d1{display:flex;align-items:baseline;gap:8px;min-width:0}
.tk-hang .ma{font-size:12px;color:var(--brand-ink);font-weight:600;flex:0 0 auto}
.tk-hang .tk-ten{font-size:13.5px;font-weight:600;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
.tk-hang .tk-d2{font-size:11.5px;margin-top:2px}
.tk-hang .tk-han{font-size:12px;flex:0 0 auto;white-space:nowrap}
.tk-hang.noi-bat{background:var(--brand-soft)}
.tk-than .trong{padding:16px 15px;font-size:13px}

@media (max-width:560px){
  /* Màn hẹp: bỏ câu giải thích trong tiêu đề mục, giữ lại tên và con số */
  .tk-muc .phu{display:none}
}
@media (max-width:820px){
  .tk-so3,.tk-so4{grid-template-columns:repeat(2,1fr)}
  .tk-o .num{font-size:20px}
  .tk-hang{flex-wrap:wrap;gap:6px 10px}
  .tk-hang .tk-han{margin-left:auto}
}

/* Cây task cha – con ở trang chi tiết */
.cay-task{margin:0 0 14px;padding:11px 13px;background:var(--panel-2);
          border:1px solid var(--hair-2);border-radius:var(--r-nav)}
.cay-hang{display:flex;align-items:center;gap:9px;padding:6px 0;min-width:0}
.cay-hang + .cay-hang{border-top:1px solid var(--hair-2)}
.cay-hang .ma{color:var(--brand-ink);font-weight:600;font-size:12.5px;flex:0 0 auto}
.cay-hang .ten{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap;flex:1;min-width:0}
.cay-hang:hover .ten{text-decoration:underline}
.cay-hang.cha{padding-bottom:9px}
.cay-hang.cha .lbl{flex:0 0 auto}

/* =====================================================================
   ĐÀO TẠO — danh sách bài và trình học
   ===================================================================== */
.tt-hoc{flex:0 0 auto;font-size:11.5px;font-weight:600;border-radius:999px;
        padding:3px 10px;white-space:nowrap}
.tt-hoc.chua{background:var(--hair-2);color:var(--muted)}
.tt-hoc.dang{background:var(--brand-soft);color:var(--brand-ink)}
.tt-hoc.xong{background:var(--good-soft);color:var(--good)}

.bh{max-width:760px;margin:0 auto}
.bh-chang{display:flex;gap:6px}
.bh-chang div{flex:1;height:5px;border-radius:99px;background:var(--hair-2);
              overflow:hidden}
.bh-chang div i{display:block;height:100%;width:0;background:var(--brand);
                transition:width .35s ease}
.bh-chang div.xong i{width:100%;background:var(--good)}
.bh-nhan{display:flex;gap:6px;margin:5px 0 14px}
.bh-nhan span{flex:1;font-size:10.5px;color:var(--muted);text-align:center;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-nhan span.on{color:var(--brand-ink);font-weight:600}
.bh-the{background:var(--panel);border:1px solid var(--hair);
        border-radius:var(--r-card);padding:22px;margin-bottom:12px}
.bh-the h1{font-size:22px;line-height:1.25;letter-spacing:-.025em;margin:7px 0 12px;
           color:var(--brand-ink)}
.bh-the h2{font-size:15.5px;margin:18px 0 6px}
.bh-the p{margin:0 0 11px}
.bh-the code{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
             background:var(--brand-soft);color:var(--brand-ink);padding:2px 6px;
             border-radius:5px;white-space:nowrap}
.bh-the table{width:100%;border-collapse:collapse;margin:0 0 13px;font-size:13.5px}
.bh-the th,.bh-the td{text-align:left;padding:7px 9px;
                      border-bottom:1px solid var(--hair-2);vertical-align:top}
.bh-the th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
           color:var(--muted);background:var(--panel-2)}
.bh-the tr:last-child td{border-bottom:0}
/* `bh-bang`, KHÔNG dùng lại tên `vien`: trong app `.vien` là viên trạng thái
   và nó đặt white-space:nowrap. Bảng thừa hưởng nowrap thì chữ không xuống
   dòng được, bảng phình ra rồi bị overflow cắt mất chữ cuối — đúng lỗi
   07/09/2026. Ghi rõ white-space ở đây để lần sau có ai thêm luật chung thì
   bảng vẫn xuống dòng. */
.bh-the table.bh-bang{border:1px solid var(--hair);border-radius:var(--r-nav);
                      overflow:hidden}
.bh-the table th,.bh-the table td{white-space:normal;overflow-wrap:break-word}
/* `bh-hop`, KHÔNG dùng lại tên `hop`: trong app `.hop` là hộp thoại và nó có
   max-width:430px — khung nhấn trong bài học thừa hưởng cái trần đó nên chỉ
   rộng 430px giữa một thẻ rộng 1400px. Cùng một bài học với `.vien`: đừng
   mượn tên lớp đã có nghĩa khác trong app. */
.bh-the .bh-hop{border-radius:var(--r-nav);padding:11px 13px;margin:0 0 12px;
                border-left:3px solid var(--brand);background:var(--brand-soft);
                width:auto;max-width:none}
.bh-the .bh-hop.good{border-left-color:var(--good);background:var(--good-soft)}
.bh-the .bh-hop.alert{border-left-color:var(--alert);background:var(--alert-soft)}
.bh-the .bh-hop p:last-child{margin-bottom:0}
.bh-the ol.buoc{list-style:none;padding:0;margin:0 0 13px;counter-reset:b}
.bh-the ol.buoc li{counter-increment:b;position:relative;padding-left:29px;
                   margin-bottom:8px}
.bh-the ol.buoc li::before{content:counter(b);position:absolute;left:0;top:1px;
                           width:20px;height:20px;border-radius:6px;
                           background:var(--brand);color:var(--brown);
                           font-size:11px;font-weight:700;display:grid;
                           place-items:center}
.bh .cau{background:var(--panel);border:1px solid var(--hair);
         border-radius:var(--r-card);padding:15px 16px;margin-bottom:11px}
.bh .so-cau{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);
            text-transform:uppercase}
.bh .de{font-weight:600;margin:5px 0 11px}
.bh .dap{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
         background:var(--panel);border:1px solid var(--hair);
         border-radius:var(--r-nav);padding:10px 12px;margin-bottom:7px;
         font:inherit;color:inherit;cursor:pointer}
.bh .dap:hover:not(:disabled){background:var(--panel-2);border-color:var(--brand)}
.bh .dap:disabled{cursor:default}
.bh .dap .ky{flex:0 0 20px;height:20px;border-radius:5px;background:var(--hair-2);
             color:var(--ink-2);font-size:11.5px;font-weight:700;display:grid;
             place-items:center}
.bh .dap.dung{border-color:var(--good);background:var(--good-soft)}
.bh .dap.dung .ky{background:var(--good);color:#fff}
.bh .dap.sai{border-color:var(--alert);background:var(--alert-soft)}
.bh .dap.sai .ky{background:var(--alert);color:#fff}
.bh .giai{margin-top:9px;font-size:13.5px;padding:10px 12px;
          border-radius:var(--r-nav);background:var(--panel-2);
          border-left:3px solid var(--hair)}
.bh .giai.dung{border-left-color:var(--good)}
.bh .giai.sai{border-left-color:var(--alert)}
/* Nút Tiếp tục nằm NGAY DƯỚI thẻ nội dung, không dán đáy màn hình: đọc hết
   trang là tay đã ở đó, không phải với xuống cuối màn hình. Cuộn theo nội
   dung cũng cho biết rõ "hết trang rồi" — thanh dán đáy thì lúc nào cũng
   thấy, chẳng nói được gì. */
.bh-duoi{display:flex;align-items:center;gap:11px;background:var(--panel);
         border:1px solid var(--hair);border-radius:var(--r-card);
         padding:11px 14px;margin-bottom:12px}
.bh-xong{text-align:center}
.bh-tich{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;
         background:var(--good-soft);color:var(--good);display:grid;
         place-items:center;font-size:29px}
@media (max-width:820px){
  .bh-nhan{display:none}
  .bh-the{padding:16px 13px}
  .bh-the h1{font-size:19px}
  /* Bảng trên màn hẹp: chữ nhỏ hơn, đệm mỏng hơn, cột đầu không rộng quá
     nửa bảng — để cột nội dung còn chỗ mà xuống dòng. */
  .bh-the table{font-size:12.5px}
  .bh-the table th,.bh-the table td{padding:6px 7px}
  .bh-the table td:first-child,.bh-the table th:first-child{max-width:34%}
  .bh-the ol.buoc li{padding-left:26px}
}

/* =====================================================================
   TRANG CHI TIẾT TASK — hai cột: việc bên trái, dòng thời gian bên phải
   ===================================================================== */
.ct{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;
    align-items:start}
.ct-the{padding:22px 24px}
.ct-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ct-dau .ma{font-weight:600;color:var(--brand-ink);font-size:14px}
.ct-tao{font-size:12px}
.ct-ten{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.3;
        margin:9px 0 11px}
.ct-mo-ta{margin:0 0 14px;white-space:pre-wrap;font-size:14px;line-height:1.6;
          color:var(--ink-2)}

.ct-cha{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:11px;
        background:var(--panel-2);border:1px solid var(--hair-2);
        border-radius:var(--r-nav);min-width:0}
.ct-cha .lbl{flex:0 0 auto;margin:0}
.ct-cha .ma{color:var(--brand-ink);font-weight:600;font-size:12.5px}
.ct-cha-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap;font-size:13.5px}

.ct-khoi{border:1px solid var(--hair-2);border-radius:var(--r-nav);
         margin-bottom:14px;overflow:hidden}
.ct-khoi-dau{display:flex;align-items:center;gap:12px;padding:10px 12px;
             background:var(--panel-2);flex-wrap:wrap}
.ct-khoi-dau .lbl{margin:0}
.ct-tien-do{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px}
.ct-vach{width:96px;height:6px;border-radius:99px;background:var(--hair-2);
         overflow:hidden;display:block}
.ct-vach i{display:block;height:100%;background:var(--good)}
.ct-con{display:flex;align-items:center;gap:9px;padding:10px 12px;
        border-top:1px solid var(--hair-2);min-width:0}
.ct-con:hover{background:var(--panel-2)}
.ct-con .ma{color:var(--brand-ink);font-weight:600;font-size:12.5px;flex:0 0 auto}
.ct-con-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap;font-size:13.5px}

.ct-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
         padding:14px 0;border-top:1px solid var(--hair-2);
         border-bottom:1px solid var(--hair-2)}
.ct-nguoi{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.ct-av{width:26px;height:26px;flex:0 0 26px;border-radius:999px;
       background:var(--brand-soft);color:var(--brand-ink);font-size:10.5px;
       font-weight:700;display:grid;place-items:center;text-transform:uppercase}
.ct-av.toi{width:32px;height:32px;flex:0 0 32px;font-size:11.5px}
.ct-con-lai{font-size:12.5px;font-weight:600;margin-top:2px}

.ct-tep{padding:14px 0 0}
.ct-tep-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
           gap:9px;margin-top:8px}
.ct-tep-o{display:flex;align-items:center;gap:10px;padding:9px 11px;
          border:1px solid var(--hair);border-radius:var(--r-nav);
          background:var(--panel);min-width:0}
.ct-tep-o:hover{background:var(--panel-2);border-color:var(--brand)}
.ct-tep-icon{width:30px;height:30px;flex:0 0 30px;border-radius:8px;
             display:grid;place-items:center;font-size:14px;
             background:var(--panel-2)}
.ct-tep-icon.anh{background:var(--good-soft)}
.ct-tep-ten{display:block;font-size:13px;font-weight:600;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}
.ct-tep-co{display:block;font-size:11.5px;margin-top:1px}

.ct-nut{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding-top:16px}
.ct-nut form{display:contents}
.ct-nut .btn{margin:0}
.ct-ghi{font-size:11.5px;margin:12px 0 0}

/* ---- cột phải: nhật ký & thảo luận ---- */
.ct-ky{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ct-ky-ten{font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin:0;
           display:flex;align-items:center;gap:8px}
.ct-loc{display:flex;gap:6px;flex-wrap:wrap}
.ct-loc button{background:none;border:1px solid var(--hair);color:var(--ink-2);
               border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;
               cursor:pointer;display:flex;gap:5px;align-items:center}
.ct-loc button:hover{background:var(--panel-2)}
.ct-loc button.on{background:var(--brand-soft);border-color:var(--brand);
                  color:var(--brand-ink);font-weight:600}
.ct-dong-tg{max-height:60vh;overflow:auto;margin:0 -4px;padding:0 4px}
.ct-ngay{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
         color:var(--muted);padding:10px 0 6px;position:sticky;top:0;
         background:var(--panel)}
.ct-muc{display:grid;grid-template-columns:40px 30px minmax(0,1fr);gap:9px;
        padding:7px 0}
.ct-muc-gio{font-size:11.5px;color:var(--muted);padding-top:5px}
.ct-muc-av{width:30px;height:30px;border-radius:999px;display:grid;
           place-items:center;font-size:10.5px;font-weight:700;
           background:var(--brand-soft);color:var(--brand-ink);
           text-transform:uppercase}
.ct-muc-av.hd{background:var(--hair-2);color:var(--ink-2)}
.ct-muc-ai{font-size:13.5px;font-weight:600;line-height:1.4}
.ct-muc-ai .dim{font-weight:400}
.ct-muc-chu{margin:4px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
            background:var(--panel-2);border-radius:var(--r-nav);padding:9px 11px}
.ct-muc.bao .ct-muc-chu{background:var(--good-soft)}
.ct-muc.tra .ct-muc-chu{background:var(--alert-soft)}
.ct-nhan{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 7px;
         background:var(--hair-2);color:var(--muted);letter-spacing:.02em}
.ct-nhan.bao{background:var(--good-soft);color:var(--good)}
.ct-nhan.tra{background:var(--alert-soft);color:var(--alert)}
.ct-muc-tep{display:grid;gap:7px;margin-top:7px}

.ct-viet{display:flex;gap:9px;align-items:flex-start;
         border-top:1px solid var(--hair-2);padding-top:12px}
.ct-viet-o{flex:1;min-width:0;border:1px solid var(--hair);
           border-radius:var(--r-nav);background:var(--panel);overflow:hidden}
.ct-viet-o:focus-within{border-color:var(--brand)}
.ct-viet textarea{width:100%;border:0;outline:0;background:none;resize:none;
                  font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);
                  padding:10px 12px;max-height:140px;display:block}
.ct-viet-duoi{display:flex;align-items:center;gap:9px;padding:6px 8px 7px 10px;
              border-top:1px solid var(--hair-2)}
.ct-kep{cursor:pointer;font-size:15px;line-height:1;opacity:.75}
.ct-kep:hover{opacity:1}
.ct-viet-duoi .btn{margin-left:auto;padding:7px 16px;font-size:13.5px}

@media (max-width:980px){
  .ct{grid-template-columns:minmax(0,1fr)}
  .ct-dong-tg{max-height:none}
}
@media (max-width:640px){
  .ct-the{padding:16px 15px}
  .ct-ten{font-size:19px}
  .ct-luoi{grid-template-columns:minmax(0,1fr);gap:11px;padding:12px 0}
  .ct-ky{padding:14px 13px}
  .ct-muc{grid-template-columns:34px 26px minmax(0,1fr);gap:7px}
  .ct-muc-av{width:26px;height:26px}
  .ct-tep-ds{grid-template-columns:minmax(0,1fr)}
}

/* Hộp XEM NHANH task, mở từ liên kết #mã trong chat */
.tn-hop{max-width:520px;padding:0}
.tn-trong{padding:18px 20px 20px}
.tn-cho{padding:26px 4px;text-align:center;color:var(--muted);font-size:13.5px}
.tn-dau{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.tn-dau .ma{font-size:13px;font-weight:600;color:var(--brand-ink)}
.tn-x{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:9px;
      border:1px solid var(--hair);background:var(--panel);color:var(--ink-2);
      font-size:17px;line-height:1;cursor:pointer}
.tn-x:hover{background:var(--panel-2)}
.tn-ten{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35;
        margin:0 0 10px}
.tn-mo-ta{margin:0 0 12px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
          color:var(--ink-2);max-height:9.6em;overflow:auto}
.tn-luoi{display:flex;gap:18px;flex-wrap:wrap;padding:11px 0;
         border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
         font-size:13.5px}
.tn-dong{display:flex;align-items:baseline;gap:8px;padding:8px 0;font-size:13.5px;
         border-bottom:1px solid var(--hair-2)}
.tn-dong .lbl{flex:0 0 auto;margin:0}
.tn-dong a{color:var(--brand-ink);font-weight:600;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.tn-bao{margin-top:11px;padding:10px 12px;border-radius:var(--r-nav);
        background:var(--good-soft);border-left:3px solid var(--good)}
.tn-bao.tra{background:var(--alert-soft);border-left-color:var(--alert)}
.tn-bao p{margin:4px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap;
          max-height:7.5em;overflow:auto}
.tn-mo{width:100%;justify-content:center;margin-top:14px}
.tn-loi{padding:20px;font-size:13.5px;display:flex;align-items:center;gap:10px}
@media (max-width:560px){
  .tn-hop{max-width:none;width:calc(100% - 20px)}
  .tn-trong{padding:15px 15px 17px}
  .tn-luoi{gap:12px}
}

/* Danh sách quy trình (SOP) */
.sop-hang{display:flex;align-items:center;gap:12px;padding:12px 14px;
          border-bottom:1px solid var(--hair-2)}
.sop-hang:last-child{border-bottom:0}
.sop-icon{flex:0 0 34px;height:34px;display:grid;place-items:center;font-size:17px;
          background:var(--panel-2);border-radius:var(--r-nav)}
.sop-nut{display:flex;align-items:center;gap:7px;flex:0 0 auto}
/* Nút Xoá nằm trong <form> để gửi POST được. Không có dòng này thì cái form là
   một khối riêng, mang line-height của chính nó, nên nút bị đẩy lệch lên so
   với Xem và Tải về. `display:contents` cho nút leo thẳng vào hàng flex. */
.sop-nut form{display:contents}
.sop-nut .btn{padding:6px 12px;font-size:12.5px;margin:0}
@media (max-width:520px){
  .sop-hang{flex-wrap:wrap}
  .sop-nut{width:100%;padding-left:46px}
  .sop-nut .btn{flex:1;justify-content:center}
}

/* Tên nhóm ở đầu hội thoại là một cái NÚT: ai cũng thử bấm vào tên nhóm để
   xem có ai trong đó, nên chỗ đó phải bấm được thật. Trông vẫn như chữ thường,
   chỉ đổi nền khi rê chuột và có dấu › gợi ý bấm được. */
.ten-nhom{background:none;border:0;padding:5px 8px;margin:-5px -8px;
          text-align:left;font:inherit;color:inherit;cursor:pointer;
          border-radius:var(--r-nav);min-width:0}
.ten-nhom:hover{background:var(--panel-2)}
.ten-nhom:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* Danh sách thành viên trong hộp thông tin nhóm */
.ds-tv{max-height:46vh;overflow:auto;border:1px solid var(--hair-2);
       border-radius:var(--r-nav)}
.tv-hang{display:flex;align-items:center;gap:10px;padding:7px 10px;
         border-bottom:1px solid var(--hair-2)}
.tv-hang:last-child{border-bottom:0}

/* Hàng nút: nút nằm trong <form> vẫn phải thẳng hàng với nút đứng ngoài.
   `display:contents` cho cái form biến mất khỏi bố cục, để chính nút bên
   trong thành phần tử của hàng — thay vì cả cái form thành một khối lệch
   một nhịp so với hai nút kia. */
.hang-nut{display:flex;gap:9px;flex-wrap:wrap;align-items:stretch;margin-top:12px}
.hang-nut form{display:contents}
.hang-nut .btn{margin:0}

/* Bảng tự kiểm thông báo */
.chan-doan{display:flex;flex-direction:column;gap:0;background:var(--panel-2);
           border:1px solid var(--hair-2);border-radius:var(--r-card);overflow:hidden}
.cd-dong{display:flex;align-items:center;gap:9px;padding:9px 13px;font-size:13px;
         border-top:1px solid var(--hair-2)}
.cd-dong:first-child{border-top:0}
.cd-cham{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.cd-cham.tot{background:var(--good)}
.cd-cham.xau{background:var(--alert)}
.cd-nhan{font-weight:600}
.cd-gia{margin-left:auto;color:var(--muted);font-size:12px;text-align:right}

/* Thanh báo trong app — góc phải trên, dưới thanh tiêu đề */
.khay-bao{position:fixed;top:14px;right:16px;z-index:900;display:flex;
          flex-direction:column;gap:9px;max-width:min(360px,calc(100vw - 32px))}
.bao-noi{display:block;position:relative;background:var(--panel);
         border:1px solid var(--hair);border-left:4px solid var(--brand);
         border-radius:var(--r-card);padding:12px 34px 12px 14px;
         box-shadow:0 12px 34px rgba(43,38,34,.2);
         opacity:0;transform:translateX(14px);transition:.24s ease}
.bao-noi.vao{opacity:1;transform:none}
.bao-noi.gap{border-left-color:var(--alert)}
.bn-tieu-de{font-weight:600;font-size:13.5px;line-height:1.35}
.bn-than{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.bn-dong{position:absolute;top:7px;right:9px;border:0;background:transparent;
         color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0}
.bn-dong:hover{color:var(--ink)}
@media (max-width:820px){
  .khay-bao{top:auto;bottom:calc(72px + env(safe-area-inset-bottom));
            left:12px;right:12px;max-width:none}
  .bao-noi{transform:translateY(14px)}
}

/* =====================================================================
   LỚP PHỦ KHI ĐANG TẢI TỆP — khoá luôn thao tác cho tới khi xong
   ===================================================================== */
.lop-tai{position:fixed;inset:0;z-index:1000;display:none;
         align-items:center;justify-content:center;padding:22px;
         background:rgba(43,38,34,.5);-webkit-backdrop-filter:blur(2px);
         backdrop-filter:blur(2px)}
.lop-tai.mo{display:flex}
body.khoa-cuon{overflow:hidden}
.lt-hop{background:var(--panel);border:1px solid var(--hair);
        border-radius:var(--r-card);padding:24px 26px;max-width:340px;width:100%;
        text-align:center;box-shadow:0 18px 50px rgba(43,38,34,.3)}
.lt-vong{width:34px;height:34px;margin:0 auto 14px;border-radius:999px;
         border:3px solid var(--hair);border-top-color:var(--brand);
         animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
.lt-chu{font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}
.lt-thanh{height:6px;border-radius:999px;background:var(--hair-2);
          margin:12px 0 10px;overflow:hidden}
.lt-thanh i{display:block;height:100%;width:0;background:var(--brand);
            border-radius:999px;transition:width .18s ease}
.lt-phu{font-size:11.5px;color:var(--muted);line-height:1.5}

/* =====================================================================
   XEM ẢNH TRONG APP — không mở tab mới, vì PWA không có nút quay lại
   ===================================================================== */
.xem-anh{position:fixed;inset:0;z-index:1100;display:none;
         background:rgba(19,16,12,.94)}
.xem-anh.mo{display:block}
.xa-khung{position:absolute;inset:0;display:flex;align-items:center;
          justify-content:center;padding:16px;overflow:auto}
.xa-khung img{max-width:100%;max-height:100%;object-fit:contain;
              border-radius:8px;cursor:zoom-in}
.xem-anh.phong .xa-khung{align-items:flex-start;justify-content:flex-start}
.xem-anh.phong .xa-khung img{max-width:none;max-height:none;width:210%;
                             cursor:zoom-out;border-radius:0}
.xa-dong{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;
         z-index:2;width:44px;height:44px;border:0;border-radius:999px;
         background:rgba(255,253,249,.14);color:#fff;font-size:26px;line-height:1;
         cursor:pointer;display:grid;place-items:center}
.xa-dong:hover{background:rgba(255,253,249,.26)}
.xa-tai{position:absolute;top:calc(18px + env(safe-area-inset-top));left:16px;
        z-index:2;color:#fff;font-size:13.5px;font-weight:600;opacity:.85;
        background:rgba(255,253,249,.14);padding:8px 14px;border-radius:999px}
.xa-tai:hover{opacity:1}
/* Hai nút cùng hàng bên trái, "Mở to" đứng trước "Tải về" — thứ tự theo mức
   thường dùng: xem kỹ thì nhiều, tải hẳn về máy thì ít hơn. */
.xa-to{left:auto;right:70px}
.xa-luu{left:16px}

/* ---------------------------------------------- Sơ đồ tổ chức bốn tầng ----
   Ba cột bộ phận trên máy tính, xếp dọc trên điện thoại. Mọi khối đều là
   <details> mở sẵn: ai cần gọn thì tự gập, không phải bấm mở từng cái. */
/* 58ch ≈ hai dòng ngắn. Dài hơn thì mắt phải quét ngang cả màn hình
   rồi mới xuống dòng — đọc mệt mà chẳng ai đọc. */
.sd-dek{margin:0 0 13px;font-size:13px;max-width:58ch}
.sd-so{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px;
       max-width:600px}
.sd-o{padding:13px 16px}
.sd-o .num{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sd-o .lbl{margin-top:3px}
.sd-ceo{max-width:340px;margin-bottom:11px;padding:13px 16px}
.sd-ten{font-size:16px;font-weight:600;letter-spacing:-.02em}
.sd-cot{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:start}
.sd-bp{padding:0 0 11px}
.sd-bp>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
               align-items:baseline;gap:9px;padding:13px 16px 7px}
.sd-bp>summary::-webkit-details-marker{display:none}
.sd-dem{font-size:12.5px;white-space:nowrap}
.sd-truong{padding:0 16px 8px}
.sd-ten2{font-size:14.5px;font-weight:600}
.sd-ten3{font-size:13.5px;font-weight:600}
.sd-nh{margin:0 10px 7px;background:var(--panel-2);border:1px solid var(--hair-2);
       border-radius:var(--r-nav);padding:0 0 7px}
.sd-nh>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
               align-items:baseline;gap:8px;padding:9px 12px 5px}
.sd-nh>summary::-webkit-details-marker{display:none}
.sd-nten{font-size:14px;font-weight:600;letter-spacing:-.006em}
.sd-nh .sd-truong{padding:0 12px 5px}
.sd-ds{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:2px}
.sd-ds li{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;
          gap:5px;flex-wrap:wrap}
.sd-ngang{flex-direction:row;flex-wrap:wrap;gap:3px 16px;padding:0}
.sd-tg{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
       color:var(--muted);border:1px solid var(--hair);border-radius:999px;
       padding:0 6px;line-height:16px}
.sd-ok{color:var(--good);font-weight:700}
.sd-kiem{font-weight:400;color:var(--muted)}
.sd-trong{font-size:12.5px;color:var(--muted);padding:2px 12px 4px}
.sd-le{margin-top:11px}
.sd-chu{margin:12px 0 0;font-size:12.5px}
.sd-h2{margin:26px 0 4px}
@media (max-width:900px){
  .sd-cot{grid-template-columns:1fr}
  .sd-so{grid-template-columns:repeat(3,1fr);max-width:none}
  .sd-ceo{max-width:none}
}
@media (max-width:520px){
  /* Ba con số vẫn nằm một hàng — bỏ xuống hai hàng thì thẻ thứ ba trơ trọi
     một mình, nhìn như bị lỗi. Thu chữ lại là vừa khít 375px. */
  .sd-o{padding:10px 11px}
  .sd-o .num{font-size:19px}
  .sd-o .lbl{font-size:10px;letter-spacing:.04em}
}

/* ---- Hỏi lại trước khi làm việc không lùi được ---- */
.xn-hop{max-width:380px}
.xn-chu{font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.4}
.xn-phu{font-size:13px;margin:7px 0 0;line-height:1.55}
.xn-nut{display:flex;gap:8px;margin-top:15px}
.xn-nut .btn{flex:1}
/* Nút phá huỷ mang màu cảnh báo, KHÔNG mang màu thương hiệu: màu vàng cam ở
   app này là "nút chính, cứ bấm đi" — dùng nó cho nút xoá là mời người ta
   bấm nhầm đúng cái không nên bấm. */
.xn-nguy{background:var(--alert);border-color:var(--alert);color:#fff}
.xn-nguy:hover{background:var(--alert);filter:brightness(1.08)}

/* @all — gọi cả nhóm. Đậm hơn @tên một người để đọc lướt là thấy khác. */
.ref-all{font-weight:700}

/* ---- Thu hồi tin nhắn ---- */
.tin{position:relative}
.tin-thu-hoi{font-style:italic;color:var(--muted);font-size:13px}
.da-thu-hoi .noi-dung{background:var(--panel-2);border:1px dashed var(--hair)}
.tin-xem-lai{margin-top:7px;padding-top:7px;border-top:1px dashed var(--hair);
             display:flex;flex-direction:column;gap:2px}
.tin-xem-lai .chu{font-size:13px;color:var(--ink-2)}
/* Nút thu hồi: nằm ngoài bóng chat, chỉ rõ khi trỏ vào hoặc khi chạm — để
   không biến mỗi tin nhắn thành một cái nút mời bấm. */
.tin-nut{position:absolute;top:2px;right:100%;margin-right:5px;opacity:0;
         transition:opacity .12s}
.tin:hover .tin-nut,.tin-nut:focus-within{opacity:1}
.tin-nut button{width:26px;height:26px;border-radius:999px;border:1px solid var(--hair);
                background:var(--panel);color:var(--muted);font-size:13px;
                line-height:1;cursor:pointer;padding:0}
.tin-nut button:hover{color:var(--alert);border-color:var(--alert)}
@media (max-width:820px){
  /* Trên điện thoại không có chuột để trỏ vào — hiện mờ sẵn, chạm thì rõ. */
  .tin-nut{opacity:.5}
}

/* ---- Tài liệu nhắc trong chat (~12) + hộp xem nhanh ---- */
.ref.tl{font-weight:600}
.ref.tl.mat{color:var(--muted);font-weight:400;font-style:italic}
.tl-hop{max-width:640px}
.tl-xem{border:1px solid var(--hair);border-radius:var(--r-nav);overflow:hidden;
        background:var(--panel-2)}
.tl-xem img,.tl-xem video{display:block;width:100%;max-height:64vh;
                          object-fit:contain;background:#000}
.tl-xem audio{display:block;width:100%;padding:11px}
/* Khung nhúng cần chiều cao rõ ràng: iframe mặc định 150px, PDF nhồi vào đó
   thì chỉ thấy đúng cái mép trên của trang đầu. */
.tl-xem iframe{display:block;width:100%;height:62vh;border:0;background:#fff}
.tl-ghi{font-size:11.5px;margin:8px 0 0;line-height:1.5}
.tl-khong-xem{text-align:center;padding:26px 18px;background:var(--panel-2);
              border:1px dashed var(--hair);border-radius:var(--r-nav)}
.tl-khong-icon{font-size:31px;line-height:1;margin-bottom:7px}
.tn-nut{display:flex;gap:8px;margin-top:12px}
.tn-nut .btn{flex:1;justify-content:center}
@media (max-width:520px){
  .tl-xem iframe{height:56vh}
}

/* ---- Biệt danh + ảnh đại diện (đầu mục Tài khoản) ---- */
.dt{padding:18px 22px 20px}
.dt-dek{margin:7px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55;
        max-width:82ch}
.dt-than{display:flex;gap:26px;align-items:flex-start;margin-top:17px}

/* --- cột ảnh --- */
.dt-cot-anh{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
            gap:9px}
/* Vành sáng quanh ảnh: nói rằng đây là thứ bấm được, chứ không phải một cái
   hình trang trí. Cả vòng tròn là nút, không riêng biểu tượng máy ảnh — trên
   điện thoại ngón tay không nhắm nổi một cái nút 30px. */
.dt-vong{position:relative;display:block;cursor:pointer;border-radius:999px;
         padding:3px;background:var(--brand);line-height:0}
.dt-vong:hover{background:var(--brand-d)}
.dt-vong:focus-within{outline:2px solid var(--brand-ink);outline-offset:2px}
/* Lớp riêng nên phải tự khai đủ hình dạng vòng tròn: `av()` chỉ đổi TÊN LỚP,
   nó không mang theo kiểu của .av-ht. Thiếu display thì <span> là inline,
   width/height bị bỏ qua và ô đại diện teo còn bằng bề rộng hai chữ cái. */
.dt-av{width:112px;height:112px;flex:0 0 112px;border-radius:999px;
       display:grid;place-items:center;background:var(--brand-soft);
       color:var(--brand-ink);font-weight:600;font-size:34px;
       letter-spacing:-.02em;text-transform:uppercase}
.dt-may{position:absolute;right:-1px;bottom:-1px;width:34px;height:34px;
        border-radius:999px;background:var(--brand);color:var(--brown);
        display:grid;place-items:center;border:3px solid var(--panel)}
.dt-nhac{font-size:12px;color:var(--ink-2);background:var(--panel-2);
         border:1px solid var(--hair);border-radius:999px;padding:4px 11px;
         white-space:nowrap}

/* --- cột ô nhập --- */
.dt-cot-o{flex:1;min-width:0}
.dt-nhan{display:flex;align-items:center;gap:8px}
.dt-nhan label{margin:0}
.dt-but{width:26px;height:26px;flex:0 0 26px;border-radius:8px;cursor:pointer;
        background:none;border:1px solid var(--brand);color:var(--brand-ink);
        display:grid;place-items:center;padding:0}
.dt-but:hover{background:var(--brand-soft)}
/* width:100% — <input> không tự giãn theo cột flex, thiếu dòng này thì ô co
   lại còn bằng bề rộng mặc định của trình duyệt và đẩy tràn cả thẻ. */
#dt-nick{width:100%;margin-top:7px;font-size:15px;padding:11px 13px}
.dt-y{margin:5px 0 0;font-size:12.5px;color:var(--muted)}
.dt-duoi{display:flex;align-items:center;gap:13px;margin-top:15px;flex-wrap:wrap}
.dt-luu{margin-left:auto}
.dt-bo{display:flex;align-items:center;gap:8px;
       text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;
       color:var(--ink-2);cursor:pointer}
.dt-xong{margin:13px 0 0;font-size:12.5px;color:var(--good)}
@media (max-width:640px){
  .dt{padding:16px 15px 18px}
  /* Điện thoại: ảnh lên trên, ô nhập xuống dưới — hai cột 112px + ô nhập thì
     ô nhập còn chưa nổi 150px, gõ biệt danh không thấy mình gõ gì. */
  .dt-than{flex-direction:column;align-items:stretch;gap:15px}
  .dt-cot-anh{align-self:center}
  .dt-luu{margin-left:0;flex:1;justify-content:center}
}
/* Ô đại diện có ẢNH: ảnh phủ kín vòng tròn, không méo. Dùng chung cho mọi cỡ
   ô — av-ht, ct-av, ct-muc-av, dt-av — nên chỉ khai một lần ở đây. */
.co-anh{padding:0;overflow:hidden;background:var(--hair-2)}
.co-anh img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ---- Bóng chat "đang gửi" ---- */
/* Bóng vẽ trước khi máy chủ trả lời: mờ đi một chút để mắt biết nó chưa chắc,
   nhưng vẫn đọc được rõ. Mờ quá thì thành ra như lỗi. */
.tin.dang-gui .noi-dung{opacity:.72}
.dg{color:var(--brand-ink)}
.dg::after{content:"…"}
@keyframes dk-nhap-nhay{0%,100%{opacity:1}50%{opacity:.35}}
.dg{animation:dk-nhap-nhay 1.1s ease-in-out infinite}
/* Người tắt hiệu ứng chuyển động trong cài đặt máy thì đừng nhấp nháy vào mắt
   họ — vẫn giữ màu để phân biệt được trạng thái. */
@media (prefers-reduced-motion:reduce){
  .dg{animation:none}
}
.dk-tep.dk-cho{opacity:.7}

/* ---- Task riêng tư ---- */
.rt-vien{font-size:10.5px;font-weight:700;letter-spacing:.03em;
         color:var(--alert);background:var(--alert-soft);border-radius:999px;
         padding:2px 9px;white-space:nowrap}
/* `.form label` là NHÃN Ô — chữ nhỏ, in hoa, giãn chữ. Dòng này là một CÂU
   người đọc, không phải nhãn, nên phải thắng lại kiểu đó. Viết `.form .rt-bat`
   chứ không phải `.rt-bat`: `.form label` có kèm tên thẻ nên nặng hơn một lớp
   trơ trọi — để `.rt-bat` không thì cả câu bị hét lên thành chữ in hoa. */
.form .rt-bat{display:flex;align-items:flex-start;gap:9px;text-transform:none;
        letter-spacing:0;font-size:14px;font-weight:400;color:var(--ink);
        cursor:pointer;line-height:1.5}
.rt-bat input{margin-top:3px;flex:0 0 auto}
/* KHÔNG thụt vào cho thẳng hàng với mọi ô khác của biểu mẫu: thụt vào thì ô
   chọn người hẹp hơn các ô còn lại, mắt đọc thành "phần phụ" chứ không phải
   một ô phải điền. */
.rt-khoi{margin-top:2px}
.rt-ds{padding-bottom:6px}

/* ------------------------------------------------------------- BẢN TIN ----
   Bảng tin chung, ghim đầu mục Chat. Bài đọc từ trên xuống nên mọi thứ xếp
   một cột — không chia cột, không thẻ ngang: trên điện thoại là chính. */
.bt-ghim{display:flex;gap:11px;align-items:center;padding:12px 14px;
         border-bottom:1px solid var(--hair-2);background:var(--brand-soft);
         flex:0 0 auto}
.bt-ghim:hover{background:var(--brand-soft)}
.bt-ghim .ten{font-weight:600;font-size:14px;display:flex;align-items:center;
              gap:7px}
.bt-ghim .ten .badge{margin-left:auto;background:var(--alert);color:#fff;
                     border-radius:999px;font-size:10.5px;font-weight:600;
                     padding:1px 7px;font-variant-numeric:tabular-nums}
.bt-ghim .cuoi{font-size:12.5px;color:var(--muted);margin-top:2px;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-av{background:var(--brand);color:#fff}
.bt-ghim-gio{font-size:11px;flex:0 0 auto;align-self:flex-start;padding-top:2px}

/* Ô mời đăng: trông như ô nhập nhưng là một cái NÚT — bấm vào mở hộp đăng. */
.bt-moi{margin-bottom:12px}
.bt-moi-hang{display:flex;align-items:center;gap:10px}
.bt-o-mo{flex:1;min-width:0;text-align:left;background:var(--panel-2);
         border:1px solid var(--hair);border-radius:999px;padding:10px 16px;
         font-size:14px;color:var(--muted);cursor:pointer}
.bt-o-mo:hover{background:var(--ground)}
.bt-chip{display:flex;gap:8px;margin-top:11px;padding-top:11px;
         border-top:1px solid var(--hair-2);flex-wrap:wrap}
/* nowrap + min-width:0 để "📌 Thông báo" không tự gãy làm hai dòng, kéo hai
   chip bên cạnh cao theo — ba cái nút cùng hàng mà lệch chiều cao thì trông
   như hỏng. */
.bt-nut-chip{flex:1 1 auto;min-width:0;white-space:nowrap;background:var(--panel);
             border:1px solid var(--hair);border-radius:var(--r-nav);
             padding:9px 8px;font-size:12.5px;font-weight:600;color:var(--ink);
             cursor:pointer;line-height:1.5}
.bt-nut-chip:hover{background:var(--panel-2)}

/* Dòng tin KHÔNG kéo hết chiều ngang màn hình rộng: đọc một đoạn dài suốt
   1500px thì mắt phải quét ngang cả màn hình mới xuống được dòng — cùng lý do
   đã chốt cho sơ đồ tổ chức. */
.bt-cot{max-width:680px}
.bt-bai{margin-bottom:12px}
.bt-dau{display:flex;align-items:flex-start;gap:10px}
.bt-ten{font-weight:600;font-size:14.5px}
.bt-gio{font-size:12px;margin-top:1px}
.bt-vien{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--alert);
         background:var(--alert-soft);border-radius:999px;padding:3px 9px;
         white-space:nowrap;flex:0 0 auto}
.bt-go{flex:0 0 auto}
.bt-nut-go{width:28px;height:28px;border:0;border-radius:8px;background:none;
           color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.bt-nut-go:hover{background:var(--panel-2);color:var(--alert)}
.bt-chu{font-size:14.5px;line-height:1.62;margin-top:11px;white-space:pre-wrap;
        word-wrap:break-word}
.bt-tep{margin-top:11px;display:flex;flex-direction:column;gap:8px}
/* KHUNG ẢNH CỐ ĐỊNH, ẢNH THU VỪA KHUNG, nền tối chừa hai bên.

   Trước đây ảnh để `width:100%` cùng với `max-height` thừa kế từ ảnh trong
   chat: trình duyệt tính chiều cao theo tỉ lệ rồi bị max-height cắt lại, tức
   là ép co theo chiều dọc — ảnh chụp màn hình ngang thì méo dí, chữ trong ảnh
   đọc không ra. `object-fit:contain` giữ đúng tỉ lệ gốc; phần thừa của khung
   để nền tối, không cắt mất mép ảnh như `cover`.
   Khung cùng một tỉ lệ cho mọi bài cũng làm dòng tin đều nhịp, mắt lướt được.
   Ai cần soi kỹ thì bấm vào ảnh — khung xem ảnh mở ra toàn màn hình, phóng
   to và kéo xem được. */
.bt-anh{display:block;aspect-ratio:16/10;background:#17130f;overflow:hidden;
        border-radius:var(--r-nav);border:1px solid var(--hair);
        /* Chặn trần chiều cao: trên màn hình rộng, khung 16/10 mà ăn hết chiều
           ngang thì cao gần nghìn điểm — một ảnh chiếm cả màn hình, phải cuộn
           mới thấy nút Thích. Cụt trần thì khung hoá ra rộng hơn 16/10, ảnh
           vẫn vừa khung và chừa nền hai bên, đúng ý cần. */
        max-height:460px}
/* max-height:none để hoá giải `max-height:280px` của ảnh trong chat (cùng thẻ
   này mang cả lớp .dk-anh để bấm vào là mở khung xem ảnh). Không hoá giải thì
   ảnh cao 280 nằm lệch trong khung 350, thừa một dải tối phía dưới. */
.bt-anh img{display:block;width:100%;height:100%;max-height:none;
            object-fit:contain;border:0;border-radius:0}
.bt-tep video{display:block;width:100%;max-height:70vh;background:#17130f;
              border-radius:var(--r-nav);border:1px solid var(--hair)}
.bt-dem{font-size:12px;margin-top:11px}
/* Hàng Thích | Bình luận: hai nút bằng nhau, có vạch ngăn trên và giữa —
   đúng mẫu anh Khanh gửi, và cũng là chỗ ngón tay tìm tới đầu tiên. */
.bt-hd{display:flex;margin-top:9px;border-top:1px solid var(--hair-2)}
.bt-hd-nut{flex:1;background:none;border:0;padding:11px 8px;font-size:13.5px;
           font-weight:600;color:var(--muted);cursor:pointer;display:flex;
           align-items:center;justify-content:center;gap:7px;line-height:1.5}
.bt-hd-nut + .bt-hd-nut{border-left:1px solid var(--hair-2)}
.bt-hd-nut:hover{background:var(--panel-2)}
.bt-hd-nut.da{color:var(--alert)}
.bt-tim{font-size:15px;line-height:1}

.bt-cmt{border-top:1px solid var(--hair-2);padding-top:11px;
        display:flex;flex-direction:column;gap:9px}
.bt-cmt-mot{display:flex;gap:9px;align-items:flex-start}
.bt-cmt-bong{background:var(--panel-2);border-radius:14px;padding:8px 13px;
             min-width:0;flex:1}
.bt-cmt-ai{font-weight:600;font-size:12.5px;color:var(--brand-ink)}
.bt-cmt-chu{font-size:13.5px;line-height:1.5;white-space:pre-wrap;
            word-wrap:break-word;margin-top:1px}
.bt-cmt-gio{font-size:10.5px;margin-top:3px}
.bt-cmt-go{display:flex;gap:9px;align-items:center}
.bt-cmt-go input{flex:1;min-width:0;border-radius:999px;padding:9px 15px;
                 font-size:13.5px}
/* Ô đại diện của Bản tin KHÔNG dùng lớp `.av-ht`: trên điện thoại có luật
   `.av-ht{display:none}` cho danh sách chat (ở đó tên đã đủ nhận ra nhau).
   Bản tin thì ngược lại — bài của ai là thông tin đầu tiên mắt tìm, giấu đi
   là mọi bài trông như nhau. Nên khai lớp riêng, và khai đủ kiểu vòng tròn
   vì lớp riêng không thừa kế gì từ .av-ht.
   Ảnh đại diện bình luận nhỏ hơn của bài: bình luận là tầng dưới. */
.bt-av-o,.bt-cav{border-radius:999px;background:var(--brand-soft);
                 color:var(--brand-ink);font-weight:600;flex:0 0 auto;
                 display:grid;place-items:center;text-transform:uppercase;
                 overflow:hidden}
.bt-av-o{width:38px;height:38px;font-size:13px}
.bt-cav{width:28px;height:28px;font-size:10.5px;align-self:flex-start}

.bt-hop{max-width:560px}
.bt-hop textarea{width:100%;min-height:112px;line-height:1.6}
/* Nút Đăng lúc đang chạy: mờ đi và nhấp nháy nhẹ, đủ để biết máy đang làm
   việc mà không giật màn hình. */
.btn.dang-chay{opacity:.75;cursor:progress;animation:bt-tho 1.1s ease-in-out infinite}
@keyframes bt-tho{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.btn.dang-chay{animation:none}}

/* ------------------------------------------- TRUNG TÂM 40 HỆ THỐNG -------
   Bố cục hai khung như màn Chat: danh sách trái đứng yên, nội dung mở bên
   phải. Ô tìm và dòng việc cần làm nằm ở phần CỐ ĐỊNH của cột, chỉ danh sách
   cuộn — cùng bài học với danh sách hội thoại ngày 10/09. */
/* Dòng dưới tiêu đề của mục Công ty: chữ nhỏ in hoa, đúng mẫu anh Khanh gửi.
   Nó vừa là danh tính vừa là phép kiểm sống — nhân viên xưởng mà thấy 40/40
   thì biết ngay quyền đang hỏng. */
.trang-cty .top .sub{text-transform:uppercase;letter-spacing:.07em;
                     font-size:11px;font-weight:600}
.trang-cty .main{height:100dvh;overflow:hidden;overflow:clip}
.trang-cty .body{flex:1;min-height:0;overflow:hidden;overflow:clip;padding-bottom:20px}
.cty{display:grid;grid-template-columns:340px 1fr;gap:14px;height:100%;min-height:0}
.cty > *{min-height:0}

.cty-ds{background:var(--panel);border:1px solid var(--hair);
        border-radius:var(--r-card);overflow:hidden;
        display:flex;flex-direction:column}
.cty-tim{flex:0 0 auto;padding:12px;border-bottom:1px solid var(--hair);
         background:var(--panel-2)}
.cty-tim input{width:100%;border-radius:999px;padding:9px 15px;font-size:13.5px}
.cty-cuon{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px}

/* Tiêu đề nhóm: chữ nhỏ in hoa, đủ để mắt biết đang sang nhóm khác mà không
   ăn mất chỗ của chính các dòng. */
.cty-nhan{font-size:10.5px;font-weight:700;letter-spacing:.09em;
          text-transform:uppercase;color:var(--muted);margin:15px 3px 7px}
.cty-cuon > .cty-nhan:first-child{margin-top:2px}
.cty-o{padding:0;overflow:hidden;margin:0}

.cty-hang{display:flex;align-items:center;gap:10px;padding:12px 14px;
          border-bottom:1px solid var(--hair-2)}
.cty-o .cty-hang:last-child{border-bottom:0}
.cty-hang:hover{background:var(--panel-2)}
.cty-hang.on{background:var(--brand-soft)}
.cty-ten{font-size:14px;min-width:0;flex:1}
.cty-so{font-size:12.5px;color:var(--muted);text-align:right;flex:0 0 auto;
        font-variant-numeric:tabular-nums}
.cty-so.do{color:var(--alert);font-weight:600}
.cty-so.duong{color:var(--info);font-weight:600}
.cty-so.xanh{color:var(--good);font-weight:600}
.cty-mui{color:var(--hair);font-size:15px;flex:0 0 auto;line-height:1}

/* DEMO phải đọc được ngay trên mặt thẻ. Thẻ trông như thật mà số bên trong là
   số bịa thì có người sẽ ra quyết định dựa trên nó — nguy hiểm hơn hẳn việc
   chưa có mục đó. */
.cty-demo{font-size:9.5px;font-weight:700;letter-spacing:.06em;
          text-transform:uppercase;color:var(--muted);background:var(--panel-2);
          border:1px solid var(--hair);border-radius:999px;padding:2px 8px;
          flex:0 0 auto}
.cty-ngoai{font-size:10px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.cty-ngoai::after{content:" ↗"}

/* Việc đang chờ chính người này — nằm trên cùng, trước cả sáu nhóm. */
.cty-viec{padding:0;overflow:hidden;margin:0 0 4px}
.cty-viec-hang{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;
               border-bottom:1px solid var(--hair-2)}
.cty-viec-hang:last-child{border-bottom:0}
.cty-viec-hang:hover{background:var(--panel-2)}
.cty-cham{width:7px;height:7px;flex:0 0 7px;border-radius:999px;margin-top:6px;
          background:var(--muted)}
.cty-cham.duong{background:var(--info)}
.cty-cham.do{background:var(--alert)}
.cty-viec-chu{display:block;font-size:14px;font-weight:600;line-height:1.4}
.cty-viec-phu{display:block;font-size:12px;margin-top:2px}
.cty-trong{padding:22px 14px;text-align:center;color:var(--muted);font-size:13px}
.cty-chan{font-size:12px;line-height:1.6;margin:14px 3px 4px}

/* ---- Khung nội dung bên phải ---- */
.cty-khung{background:var(--panel);border:1px solid var(--hair);
           border-radius:var(--r-card);overflow:auto;
           display:flex;flex-direction:column}
.cty-dau{flex:0 0 auto;padding:16px 22px;border-bottom:1px solid var(--hair);
         display:flex;align-items:center;gap:12px;background:var(--panel)}
.cty-dau .quay-lai{display:none}
.cty-h2{margin:2px 0 0;font-size:22px;font-weight:700;letter-spacing:-.028em}
.cty-than{padding:20px 22px;max-width:640px}
.cty-mota{font-size:14px;line-height:1.65;color:var(--ink-2);margin:0 0 16px}
.cty-hop{background:var(--panel-2);border:1px solid var(--hair);
         border-radius:var(--r-card);padding:22px}
.cty-hop-icon{font-size:24px;line-height:1;margin-bottom:9px;color:var(--muted)}
.cty-chua-chon{flex:1;display:grid;place-items:center;align-content:center;
               padding:30px}

@media (max-width:820px){
  /* Một tầng: danh sách trước, chạm mới mở hệ thống — như màn Chat. */
  .cty{grid-template-columns:1fr;gap:0;height:auto}
  .trang-cty .main{height:auto;overflow:visible}
  .trang-cty .body{overflow:visible}
  .cty:not(.co-he) .cty-khung{display:none}
  .cty.co-he .cty-ds{display:none}
  .cty-ds{border-radius:var(--r-card)}
  .cty-cuon{overflow:visible}
  .cty-tim input{font-size:16px}   /* dưới 16px là iOS tự phóng to trang */
  .cty-ten{font-size:15px}
  .cty-hang{padding:14px 16px}
  .cty-than{padding:16px}
  .cty-dau{padding:14px 16px}
  .cty-dau .quay-lai{display:grid;place-items:center;width:36px;height:36px;
                     flex:0 0 36px;border:1px solid var(--hair);
                     border-radius:11px;color:var(--ink-2);background:var(--panel)}
}

/* Khung bên phải khi nạp NỘI DUNG THẬT: bỏ trần 640px, vì sơ đồ tổ chức và
   danh sách tệp cần cả chiều ngang. Trần đó chỉ hợp cho mấy đoạn chữ giới
   thiệu của thẻ demo. */
.cty-than.rong{max-width:none}
/* Hàng nút "+ Thêm mới" đi theo mảnh, nên nó có mặt ở cả trang đứng riêng lẫn
   khung bên phải — không phụ thuộc vào thanh tiêu đề của trang. */
.ct-thanh-nut{display:flex;justify-content:flex-end;margin-bottom:12px}

/* Sơ đồ tổ chức khi nằm TRONG khung bên phải: khung chỉ rộng ~560px, mà luật
   ba cột của sơ đồ lại tính theo chiều rộng MÀN HÌNH chứ không theo chiều
   rộng khung chứa nó. Nên ở máy tính vẫn ra ba cột, và cột thứ ba bị cắt.
   Ở đây cho cột tự co theo chỗ thật sự có. */
.cty-than .sd-cot{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media (min-width:1500px){
  /* Màn rộng thì khung bên phải đủ chỗ cho ba cột như trang đứng riêng. */
  .cty-than .sd-cot{grid-template-columns:repeat(3,1fr)}
}

/* ---- Bản mô tả vai trò: hai bảng, chưa có xếp trước ---- */
.mtv-dau{display:flex;align-items:center;gap:10px;margin:0 2px 9px}
.mtv-h3{margin:0;font-size:14.5px;font-weight:700;display:flex;
        align-items:center;gap:9px}
.mtv-dem{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;
         background:var(--panel-2);color:var(--muted)}
.mtv-dem.do{background:var(--alert-soft);color:var(--alert)}
.mtv-dem.xanh{background:var(--good-soft);color:var(--good)}
.mtv-bang{padding:0;overflow-x:auto}
.mtv{width:100%;border-collapse:collapse;font-size:13.5px}
.mtv th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.07em;
        text-transform:uppercase;color:var(--muted);padding:10px 14px;
        border-bottom:1px solid var(--hair);background:var(--panel-2);
        white-space:nowrap}
.mtv td{padding:10px 14px;border-bottom:1px solid var(--hair-2);
        vertical-align:top}
.mtv tr:last-child td{border-bottom:0}
.mtv-stt{width:46px;color:var(--muted);font-size:12.5px}
.mtv-ten{font-weight:600}
.mtv-bp{font-size:11.5px;margin-top:1px}
.mtv-vai{color:var(--ink-2)}
.mtv-cot-ban{white-space:nowrap}
.mtv-xong{display:flex;align-items:center;gap:9px}
.mtv-co{color:var(--good);font-weight:600;font-size:12.5px}
/* "Chưa có" của người ĐÃ CHÍNH THỨC là việc phải đòi, nhưng chưa cháy — để
   xám. Đỏ dành riêng cho người đang THỬ VIỆC: hết thử việc mà thiếu bản mô tả
   thì lấy gì mà xét. Tô đỏ cả trăm dòng thì màu đỏ hết nghĩa. */
.mtv-chua{color:var(--muted);font-weight:600;font-size:12.5px}
.mtv-chua.gap{color:var(--alert)}
.mtv-xem{padding:4px 12px;font-size:12.5px}
.mtv-ngay{font-size:11px;margin-top:3px}
.mtv-o-chu .mtv-ngay{margin-top:2px;white-space:nowrap}
@media (max-width:820px){
  /* Bảng bốn cột không co được nữa thì cho cuộn ngang TRONG khung của nó,
     không để cả trang trôi ngang. */
  .mtv{min-width:470px}
  .mtv th,.mtv td{padding:9px 11px}
}

/* ---- Chấm công: bản báo cáo cho CEO và IT ---- */
.cc-dau{display:flex;align-items:flex-start;gap:12px;margin:0 2px 12px}
.cc-tom{font-size:13.5px;line-height:1.6;margin:0}
.cc-tom .do{color:var(--alert)}
.cc-bang{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--brand-ink)}
.cc-canh{padding:0;overflow:hidden;margin-bottom:14px}
.cc-canh-hang{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;
              border-bottom:1px solid var(--hair-2)}
.cc-canh-hang:last-child{border-bottom:0}
.cc-canh-chu{display:block;font-size:14px;font-weight:600;line-height:1.4}
.cc-canh-phu{display:block;font-size:12.5px;margin-top:2px;line-height:1.5}

/* Bốn kỳ xem. Là thẻ <a> chứ không phải nút JS: bấm xong địa chỉ đổi theo,
   nên gửi được cho nhau và F5 vẫn ở đúng kỳ đang xem. */
.cc-ky{display:flex;gap:8px;flex-wrap:wrap;margin:0 2px 14px}
.cc-vien{padding:7px 16px;border:1px solid var(--hair);border-radius:999px;
         font-size:13px;font-weight:600;color:var(--ink-2);background:var(--panel)}
.cc-vien:hover{background:var(--panel-2)}
.cc-vien.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}

.cc-nhan{font-size:10.5px;font-weight:700;letter-spacing:.09em;
         text-transform:uppercase;color:var(--muted);margin:16px 3px 7px}
.cc-o{padding:0;overflow:hidden;margin:0}
.cc-hang{display:flex;align-items:center;gap:12px;padding:12px 15px;
         border-bottom:1px solid var(--hair-2)}
.cc-o .cc-hang:last-child{border-bottom:0}
.cc-ten{font-size:14px;min-width:0;flex:1}
.cc-gio{font-size:13px;color:var(--muted);flex:0 0 auto;text-align:right}
.cc-gio .do{color:var(--alert)}
.cc-phep{color:var(--info)}
@media (max-width:820px){
  .cc-dau{flex-direction:column;gap:6px}
  .cc-ten{font-size:14.5px}
  .cc-gio{font-size:12.5px}
}

/* ---- Hồ sơ nhân sự ---- */
.hs-dau{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.hs-ten{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.hs-phu{font-size:12.5px;margin-top:3px}
.hs-tt{font-weight:600}
.hs-tt.active{color:var(--good)}
.hs-tt.probation{color:var(--info)}
.hs-tt.left{color:var(--muted)}
.hs-thieu{border-color:var(--alert);color:var(--alert);font-size:13px;
          line-height:1.6;margin-bottom:14px}
.hs-nhom{font-size:10.5px;font-weight:700;letter-spacing:.09em;
         text-transform:uppercase;color:var(--muted);margin:16px 3px 7px}
.hs-form .hs-nhom:first-child{margin-top:0}
.hs-o{padding:0;overflow:hidden;margin:0}
/* Nhãn bên trái, ô nhập bên phải: mắt dò xuống một cột nhãn nhanh hơn hẳn so
   với nhãn nằm trên từng ô. Màn hẹp thì xếp dọc lại. */
.hs-hang{display:flex;align-items:center;gap:14px;padding:9px 15px;
         border-bottom:1px solid var(--hair-2)}
.hs-o .hs-hang:last-child{border-bottom:0}
.hs-nhan{flex:0 0 190px;font-size:13px;color:var(--muted);
         text-transform:none;letter-spacing:0;font-weight:400;margin:0}
.hs-hang input,.hs-hang select{flex:1;min-width:0;font-size:13.5px;
                               padding:7px 11px}
.hs-hang input:disabled,.hs-hang select:disabled{background:var(--panel-2);
                                                 color:var(--ink-2);opacity:1}
.hs-luu{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.hs-ghi{margin-top:16px;font-size:12.5px;line-height:1.65}
.hs-log{display:flex;gap:12px;padding:9px 15px;border-bottom:1px solid var(--hair-2);
        font-size:12.5px;line-height:1.55}
.hs-o .hs-log:last-child{border-bottom:0}
.hs-log-gio{flex:0 0 82px;font-size:11.5px}
.hs-cu{color:var(--muted);text-decoration:line-through}
.hs-moi{color:var(--good);font-weight:600}

.hs-tim{margin-bottom:12px}
.hs-tim input{width:100%;border-radius:999px;padding:9px 16px;font-size:13.5px}
.hs-bang-o{padding:0;overflow-x:auto}
.hs-lien{font-weight:600;color:var(--brand-ink)}
.hs-bp{font-size:11.5px;margin-top:1px}
.hs-cot-tt{white-space:nowrap}
@media (max-width:820px){
  .hs-hang{flex-direction:column;align-items:stretch;gap:5px;padding:11px 14px}
  .hs-nhan{flex:none}
  .hs-hang input,.hs-hang select{font-size:16px}  /* dưới 16px iOS tự phóng to */
  .hs-bang{min-width:560px}
}

/* ---- Ảnh căn cước hai mặt ---- */
.cccd-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
           gap:12px}
.cccd-o{padding:13px}
.cccd-dau{display:flex;align-items:center;justify-content:space-between;
          gap:9px;font-size:13.5px;margin-bottom:10px}
/* Khung ảnh cố định, ảnh thu vừa khung, nền tối chừa hai bên — cùng luật với
   ảnh trên Bản tin: căn cước có cái ngang cái dọc, `cover` là cắt mất số. */
.cccd-anh{display:block;aspect-ratio:16/10;background:#17130f;overflow:hidden;
          border-radius:var(--r-nav);border:1px solid var(--hair)}
.cccd-anh img{display:block;width:100%;height:100%;max-height:none;
              object-fit:contain;border:0;border-radius:0}
.cccd-trong{display:grid;place-items:center;aspect-ratio:16/10;
            background:var(--panel-2);border:1px dashed var(--hair);
            border-radius:var(--r-nav);color:var(--muted);font-size:12.5px}
.cccd-ten{font-size:11.5px;margin-top:7px;line-height:1.5;word-break:break-word}
.cccd-nut{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.cccd-nut form{display:contents}
.cccd-chon{cursor:pointer}

/* ---- Tuyển dụng: bảng sáu bước ---- */
.td-buoc{display:flex;align-items:center;gap:9px;margin:18px 3px 8px;
         font-size:14px}
.td-buoc:first-child{margin-top:0}
.td-so{width:22px;height:22px;flex:0 0 22px;border-radius:999px;
       background:var(--panel-2);color:var(--muted);font-size:11.5px;
       font-weight:700;display:grid;place-items:center}
.td-so.duong{background:var(--info-soft);color:var(--info)}
.td-so.xanh{background:var(--good-soft);color:var(--good)}
.td-so.do{background:var(--alert-soft);color:var(--alert)}
.td-o{padding:0;overflow:hidden;margin:0}
.td-hang{display:flex;align-items:center;gap:11px;padding:11px 15px;
         border-bottom:1px solid var(--hair-2);flex-wrap:wrap}
.td-o .td-hang:last-child{border-bottom:0}
.td-ten{font-size:14px;font-weight:600}
.td-phu{font-size:12px;margin-top:2px;line-height:1.5}
.td-ghi{font-size:12px;margin-top:3px;line-height:1.5}
/* Nút thao tác phải THẲNG MỘT CỘT giữa các dòng.

   Hai thứ làm nó lệch, và cả hai đều không nhìn thấy bằng mắt trong mã:
   · mỗi nút nằm trong một <form> riêng, mà form là một hộp có kích thước —
     nên dòng nào nhiều form hơn thì cả cụm nút xê dịch. `display:contents`
     xoá cái hộp đó đi, nút thành phần tử con trực tiếp của hàng, form vẫn
     gửi đúng như cũ.
   · chữ trong nút dài ngắn khác nhau ("Loại" vs "Nhận thử việc") nên mỗi nút
     một bề ngang. Đặt bề ngang tối thiểu bằng nhau thì mép nút xếp thành cột.
   Mắt dò một cột nút thẳng hàng nhanh hơn hẳn so với một hàng răng cưa. */
.td-hang form{display:contents}
.td-nho{padding:5px 12px;font-size:12.5px;flex:0 0 auto;
        min-width:92px;justify-content:center;text-align:center}
.td-nut-nhom{gap:7px}
/* Khung ảnh tin đăng: nhỏ, cố định, ảnh thu vừa khung — tin tuyển dụng có
   cái dọc cái ngang, `cover` là cắt mất nửa nội dung. */
.td-anh{display:block;width:62px;height:62px;flex:0 0 62px;background:#17130f;
        border-radius:10px;overflow:hidden;border:1px solid var(--hair)}
.td-anh img{width:100%;height:100%;max-height:none;object-fit:contain;
            border:0;border-radius:0;display:block}
.td-them{display:flex;gap:8px;align-items:center;padding:11px 15px;
         background:var(--panel-2);border-bottom:1px solid var(--hair);
         flex-wrap:wrap}
.td-them input[name="ten"],.td-them input[name="dt"]{flex:1;min-width:120px;
         font-size:13.5px;padding:7px 11px}
.td-them select{width:auto;font-size:13.5px;padding:7px 30px 7px 11px}
@media (max-width:820px){
  .td-hang{gap:8px}
  .td-them input[name="ten"],.td-them input[name="dt"]{font-size:16px}
}

/* =====================================================================
   TỒN KHO — Đơn giá tồn kho và Giá trị tồn kho
   ===================================================================== */
/* Dải số ở đầu màn. Ô đầu to hơn hẳn vì nó là CON SỐ người ta mở màn này để
   xem; mấy ô sau chỉ để biết con số đó ghép từ đâu ra. */
.tk-so{display:grid;gap:10px;margin:0 0 14px;
       grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.tk-o,.tk-o-lon{background:var(--panel);border:1px solid var(--hair);
                border-radius:var(--r-card);padding:13px 15px;min-width:0}
.tk-o-lon{grid-column:span 2;background:var(--brand-soft);
          border-color:transparent}
.tk-lon{font-size:23px;font-weight:700;margin-top:3px;
        color:var(--brand-ink);overflow-wrap:anywhere}
.tk-vua{font-size:17px;font-weight:600;margin-top:3px;overflow-wrap:anywhere}
.tk-vua.do{color:var(--alert)} .tk-vua.xanh{color:var(--good)}
.tk-vua.duong{color:var(--info)}

/* Thanh công cụ: ô nhập và nút phải CAO BẰNG NHAU. Để mỗi thứ tự tính chiều
   cao theo padding của nó thì ra ba con số khác nhau — ô nhập ~42px, nút nền
   39px, nút viền 41px — và ba thứ cạnh nhau lệch nhau thấy rõ. Ấn định một
   chiều cao rồi bỏ padding dọc: chữ một dòng tự căn giữa. */
.tk-thanh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          margin-bottom:12px}
.tk-thanh input,.tk-thanh select,.tk-thanh .btn{height:40px;
                                                padding-top:0;padding-bottom:0}
.tk-thanh form{display:contents}
.tk-ty-le{display:flex;align-items:center;gap:7px;font-size:13px}
.tk-ty-le label{margin:0;text-transform:none;letter-spacing:0;font-size:13px;
                color:var(--ink-2);font-weight:600}
.tk-ty-le input{width:72px;text-align:right;padding:7px 9px;font-size:13.5px}
.tk-tim{flex:1;min-width:150px;border-radius:999px;padding:8px 15px;
        font-size:13.5px}
.tk-nhac{font-size:12.5px;line-height:1.65;margin-top:12px}
.tk-canh{font-size:12.5px;line-height:1.65;margin-bottom:12px;
         border-color:var(--alert);color:var(--ink-2)}

.tk-bang{font-size:13px}
.tk-ma{white-space:nowrap;font-size:12.5px}
.tk-dvt{white-space:nowrap;width:64px}
.tk-p{text-align:right;white-space:nowrap}
.tk-tong{font-weight:700;color:var(--brand-ink)}
.tk-phu{display:block;font-size:11.5px;margin-top:2px}
.tk-khop{font-weight:600;color:var(--good);font-size:12.5px}
.tk-hong{color:var(--alert);font-weight:600;font-size:11.5px}
.tk-tay,.tk-chung{font-size:10.5px;font-weight:700;border-radius:999px;
                  padding:1px 7px;background:var(--panel-2);color:var(--muted);
                  margin-left:5px;white-space:nowrap}
.tk-nut-cot{width:64px;text-align:right}
.tk-nho{padding:4px 11px;font-size:12.5px}
.tk-nhom td{background:var(--panel-2);font-weight:700}
.tk-thieu td{background:var(--alert-soft)}
.tk-tong-hang td{background:var(--panel-2);font-weight:700;
                 border-top:1px solid var(--hair)}

/* Danh sách biên bản kiểm kê: chọn kỳ nào thì xem giá trị kỳ đó. */
.tk-bb{display:flex;gap:8px;flex-wrap:wrap;margin:0 2px 14px}
.tk-bb-o{display:flex;flex-direction:column;gap:1px;padding:8px 14px;
         border:1px solid var(--hair);border-radius:12px;background:var(--panel);
         font-size:13px;font-weight:600;color:var(--ink-2)}
.tk-bb-o span{font-size:11.5px;font-weight:600}
.tk-bb-o:hover{background:var(--panel-2)}
.tk-bb-o.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.tk-bb-o.on span{color:var(--panel);opacity:.7}

/* Hộp sửa dòng định mức: rộng hơn hộp thường vì một dòng có tới năm cụm vật
   tư, mỗi cụm ba ô. Nhồi vào 430px thì mỗi ô còn một dòng chữ. */
.tk-hop-rong{max-width:660px}
.tk-form{max-width:none;gap:12px;max-height:78vh;overflow-y:auto}
.tk-luoi{display:grid;gap:10px;
         grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.tk-luoi .tk-rong{grid-column:span 2}
.tk-phan{border:1px solid var(--hair);border-radius:var(--r-card);
         padding:11px 13px;background:var(--panel-2)}
.tk-phan-dau{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;
             flex-wrap:wrap;font-size:12.5px}
.tk-phan-ten{font-size:13px}
.tk-chon-nut{width:100%;text-align:left;border:1px solid var(--hair);
             border-radius:10px;padding:9px 12px;font-size:13.5px;
             background:var(--panel);color:var(--ink);
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-chon-nut:hover{border-color:var(--brand)}
.tk-tam{font-size:12.5px;line-height:1.6}

.tk-chon-ds{max-height:46vh;overflow-y:auto;border:1px solid var(--hair);
            border-radius:var(--r-card)}
.tk-chon-hang{display:block;width:100%;text-align:left;padding:9px 13px;
              border:0;border-bottom:1px solid var(--hair-2);
              background:var(--panel);color:var(--ink);font-size:13.5px}
.tk-chon-hang:last-child{border-bottom:0}
.tk-chon-hang:hover{background:var(--brand-soft)}
.tk-chon-hang span{display:block;font-size:11.5px;margin-top:1px}
.tk-chon-trong{padding:18px 13px;text-align:center;font-size:13px}

@media (max-width:820px){
  .tk-bang{min-width:620px}
  .tk-o-lon{grid-column:span 2}
  .tk-tim{font-size:16px}
  .tk-ty-le input{font-size:16px}
}

/* Mặt hàng. Khung bên phải chỉ rộng chừng 790px mà bảng có bảy cột, nên mọi
   cột phụ đều bị đóng khung cứng — để chúng tự co giãn thì cột TÊN, thứ duy
   nhất người ta thật sự đọc, lại là cột bị bóp nhỏ nhất. */
/* `table-layout:fixed` chứ không để trình duyệt tự chia: dòng tên nhà cung
   cấp bên dưới tên hàng không xuống dòng, nên ở chế độ tự chia nó kéo cột TÊN
   rộng bằng cả chuỗi "CÔNG TY TNHH THƯƠNG MẠI…" và đẩy bốn cột cuối — kể cả
   nút Sửa — ra khỏi màn hình. */
#mh-bang{table-layout:fixed}
#mh-bang .mtv-stt{width:44px}
#mh-bang .tk-ma{width:116px}
#mh-bang .tk-dvt{width:56px}
.mh-cot-nhom{width:92px}
#mh-bang .tk-p{width:100px}
#mh-bang .tk-nut-cot{width:62px}
#mh-bang td{overflow-wrap:anywhere}
/* Tên nhà cung cấp dài ngoằng (CÔNG TY TNHH THƯƠNG MẠI…) xuống ba dòng là mỗi
   hàng cao gấp đôi. Cắt gọn một dòng, muốn đọc đủ thì rê chuột. */
.mh-phu-ncc{display:block;overflow:hidden;text-overflow:ellipsis;
            white-space:nowrap;max-width:100%}

/* =====================================================================
   NHẬP KHO
   ===================================================================== */
#nk-bang{table-layout:fixed}
#nk-bang .mtv-stt{width:44px}
#nk-bang .tk-ma{width:130px}
.nk-cot-ngay{width:96px;white-space:nowrap}
#nk-bang .tk-p{width:92px}
#nk-bang .tk-nut-cot{width:62px}
#nk-bang td{overflow-wrap:anywhere}
/* Cảnh báo "phiếu ghi xong nhưng Zalo chưa gửi" phải NẰM LẠI, không phải một
   câu chớp rồi tắt: người đọc nó xong mới biết còn việc phải làm tay. */
.nk-canh{border-color:var(--brand);background:var(--brand-soft);
         color:var(--brand-ink);font-size:13px;line-height:1.65;
         margin-bottom:12px}
.nk-cot-nhan{width:120px}
.nk-cot-nhan input{text-align:right;padding:6px 9px;font-size:13.5px}
#nk-goi-y{margin-top:7px;max-height:40vh}

/* Xuất kho — cùng khuôn với Nhập kho, thêm cột mục đích. */
#xk-bang{table-layout:fixed}
#xk-bang .mtv-stt{width:44px}
#xk-bang .tk-ma{width:120px}
#xk-bang .tk-p{width:86px}
#xk-bang .tk-nut-cot{width:62px}
#xk-bang td{overflow-wrap:anywhere}
.xk-cot-muc{width:132px}
/* Tiêu đề cột được XUỐNG DÒNG ở hai bảng này. `.mtv th` khai nowrap, mà bảng
   chia cột cứng thì "NGƯỜI / BỘ PHẬN NHẬN" dài hơn ô của nó và tràn đè lên
   tiêu đề bên cạnh — hai chữ chồng lên nhau, không đọc được chữ nào. */
#xk-bang th,#nk-bang th{white-space:normal}
.xk-cot-dvt{width:78px}
.xk-muc{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;
        padding:2px 9px;background:var(--brand-soft);color:var(--brand-ink)}
/* Ô gợi ý mặt hàng nổi lên trên dòng dưới, nên ô chứa nó không được cắt. */
#xk-bang-hang td{overflow:visible;position:relative}
#xk-bang-hang input{width:100%;padding:6px 9px;font-size:13.5px}
.xk-goi-hang{position:absolute;left:8px;right:8px;top:calc(100% - 6px);z-index:5;
             background:var(--panel);box-shadow:0 10px 28px rgba(43,38,34,.18);
             max-height:32vh}
#xk-goi-ncc,#xk-goi-ref{margin-top:7px;max-height:36vh}

/* Thẻ hệ thống ĐANG KHOÁ: vẫn thấy để biết công ty có mục đó, nhưng mờ đi và
   không bấm được. Con trỏ giữ hình mũi tên thường — hiện bàn tay rồi bấm
   không ra gì mới là thứ làm người ta bấm đi bấm lại. */
.cty-hang.khoa{opacity:.55;cursor:default}
.cty-hang.khoa:hover{background:transparent}

/* =====================================================================
   KIỂM KÊ
   ===================================================================== */
.kk-dau{display:flex;align-items:center;gap:12px;margin:0 2px 14px;flex-wrap:wrap}
.kk-nhap{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;
         background:var(--brand-soft);color:var(--brand-ink)}
/* Ô nạp là thứ người đếm kho dùng suốt buổi: để nó rộng và nằm một hàng trên
   máy tính, xuống dòng gọn trên điện thoại. */
.kk-nap{margin-bottom:12px;position:relative}
.kk-nap-luoi{display:grid;gap:10px;align-items:end;
             grid-template-columns:minmax(200px,1fr) 120px 96px auto}
.kk-o-hang{position:relative;min-width:0}
.kk-o-nut .btn{height:40px}
#kk-goi-y{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;
          background:var(--panel);box-shadow:0 10px 28px rgba(43,38,34,.18);
          max-height:44vh}
#kk-bang,#kk-bang-bb,#kk-bang-dc,#kk-bang-srm{table-layout:fixed}
/* Cột STT 44px vừa đủ cho một chữ số; tới "10" là số bị bẻ làm hai dòng. */
#kk-bang .mtv-stt,#kk-bang-dc .mtv-stt{width:52px}
#kk-bang-srm .mtv-stt{width:70px}
#kk-bang-bb .tk-ma{width:118px}
/* Giá trị tồn của một dòng lên tới hàng tỉ ("3.061.912.500"), nên cột số ở
   đây phải rộng hơn mặc định và ô phải hẹp bớt lề — không thì cột cuối bị đẩy
   ra ngoài mép khung, đúng cột người ta mở màn này để đọc. */
#kk-bang .tk-p,#kk-bang-bb .tk-p,#kk-bang-dc .tk-p,#kk-bang-srm .tk-p{width:112px}
#kk-bang td,#kk-bang th{padding-left:10px;padding-right:10px}
#kk-bang th,#kk-bang-bb th,#kk-bang-dc th,#kk-bang-srm th{white-space:normal}
#kk-bang td,#kk-bang-bb td,#kk-bang-dc td,#kk-bang-srm td{overflow-wrap:anywhere}
.kk-cot-tt{width:120px}
.kk-cot-nut{width:112px;text-align:right;white-space:nowrap}
.kk-cot-nut form{display:inline}
@media (max-width:820px){
  .kk-nap-luoi{grid-template-columns:1fr 1fr}
  .kk-o-hang{grid-column:1/-1}
  .kk-o-nut{grid-column:1/-1}
  .kk-o-nut .btn{width:100%}
}

/* Nhà cung cấp */
#ncc-bang{table-layout:fixed}
#ncc-bang .mtv-stt{width:44px}
#ncc-bang .tk-ma{width:112px}
#ncc-bang .tk-p{width:86px}
#ncc-bang .tk-nut-cot{width:58px}
#ncc-bang th{white-space:normal}
#ncc-bang td{overflow-wrap:anywhere}
/* Tên công ty là cột duy nhất người ta thật sự đọc, nên mọi cột phụ
   đều đóng khung cứng để nó được phần còn lại. */
.ncc-cot-hang{width:92px}
.ncc-cot-lh{width:132px}
/* Khối "thêm một dòng con" (người liên hệ, ngân hàng, mặt hàng): nằm ngay dưới
   bảng của chính nó, nhạt hơn một nấc để mắt không lẫn với dữ liệu đã có. */
.ncc-them{background:var(--panel-2);margin-top:-2px}
.ncc-them-nut{display:flex;align-items:center;gap:12px;margin-top:10px;
              flex-wrap:wrap}
.ncc-them-nut .btn{margin-left:auto}

/* Đơn mua */
#dm-bang{table-layout:fixed}
#dm-bang .mtv-stt{width:44px}
.dm-cot-ma{width:120px}
#dm-bang .tk-p{width:116px}
.dm-cot-nhan{width:88px}
#dm-bang .tk-nut-cot{width:56px}
#dm-bang th,#dm-bang-hang th{white-space:normal}
/* `anywhere` CHỈ cho cột mã (một chuỗi liền không dấu cách). Bật cho cả bảng
   thì tên công ty bị bẻ từng CHỮ CÁI một — "CÔNG TY TNHH" xuống mười dòng. */
#dm-bang .dm-cot-ma,#dm-bang-hang td{overflow-wrap:anywhere}
#dm-bang-hang{table-layout:fixed}
#dm-bang-hang .tk-p{width:104px}
.dm-cot-xoa{width:46px;text-align:center}
.dm-cot-o{width:104px}
.dm-cot-vat{width:72px}
/* Ô nhập nằm TRONG bảng: nhỏ lại một nấc và căn phải như con số nó thay thế,
   để bảng lúc sửa không nhảy khác hẳn bảng lúc xem. */
.dm-o-so,#dm-bang-moi input{width:100%;padding:6px 9px;font-size:13px;
                            text-align:right}
#dm-bang-moi select{padding:6px 28px 6px 9px;font-size:13px}
/* Dải số của một đơn chở toàn số tiền hàng trăm triệu — ô 132px làm
   "180.576.000" bị bẻ làm hai dòng giữa con số. */
.tk-so.tk-so-tien{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.dm-dot{border:1px solid var(--hair);border-radius:var(--r-card);padding:11px 13px;
        margin-bottom:8px;background:var(--panel-2)}
.dm-dot:last-of-type{margin-bottom:0}
.dm-dot-dau{display:flex;gap:10px;align-items:baseline;font-size:13px;
            margin-bottom:6px}
.dm-dot-hang{display:flex;gap:10px;justify-content:space-between;font-size:13px;
             padding:3px 0}
.dm-dot-ghi{font-size:12px;margin-top:5px}

/* Hoá đơn NCC */
#hd-bang{table-layout:fixed}
#hd-bang .mtv-stt{width:44px}
.hd-cot-so{width:104px}
.hd-cot-don{width:128px}
.hd-cot-vat{width:62px}
#hd-bang .tk-p{width:116px}
#hd-bang .tk-nut-cot{width:56px}
#hd-bang th{white-space:normal}
#hd-bang .hd-cot-so,#hd-bang .hd-cot-don{overflow-wrap:anywhere}
.hd-bang-hang input{width:100%;padding:6px 9px;font-size:13px}
.hd-bang-hang .tk-p input{text-align:right}
.hd-tam{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.hd-tam .dim{margin-left:auto;font-size:12.5px}
/* Thẻ đơn đã chọn — một hoá đơn gộp được nhiều đơn, thẻ đầu là đơn chính. */
.hd-the-don{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.hd-the{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
        font-weight:600;background:var(--brand-soft);color:var(--brand-ink);
        border-radius:999px;padding:3px 5px 3px 11px}
.hd-the b{font-weight:600;opacity:.7}
.hd-the button{border:0;background:transparent;color:inherit;cursor:pointer;
               font-size:15px;line-height:1;padding:0 5px}
#hm-don-goi,#hs-don-goi,#hd-px-goi{margin-top:7px;max-height:40vh}
.hd-nhac{font-size:12px;margin:7px 0 0;line-height:1.6}
.hd-nhac.hd-canh{color:var(--alert);font-weight:600}

/* =====================================================================
   THANH TOÁN NHÂN SỰ — ba loại đề nghị, bảng kê chi phí theo dòng
   ===================================================================== */
/* Ba loại là ba SỔ RIÊNG (mã đơn khác nhau, luật chứng từ khác nhau), nên
   chúng là tab chứ không phải bộ lọc: đứng ở đâu phải thấy rõ, vì gửi nhầm
   loại là kế toán phải trả về từ đầu. */
.nv-tab{display:flex;gap:8px;flex-wrap:wrap;margin:0 2px 14px}
.nv-tab-o{display:flex;flex-direction:column;gap:1px;padding:8px 14px;
          border:1px solid var(--hair);border-radius:12px;background:var(--panel);
          font-size:13px;font-weight:600;color:var(--ink-2)}
.nv-tab-o span{font-size:11.5px;font-weight:600;color:var(--muted)}
.nv-tab-o:hover{background:var(--panel-2)}
.nv-tab-o.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.nv-tab-o.on span{color:var(--panel);opacity:.7}

.nv-loc{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:150px}
.nv-loc-o{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
          border:1px solid var(--hair);color:var(--ink-2);background:var(--panel)}
.nv-loc-o span{opacity:.6;margin-left:4px}
.nv-loc-o:hover{background:var(--panel-2)}
.nv-loc-o.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}

/* Nhãn trạng thái. Bốn màu cho bảy trạng thái: chờ / đang chạy / xong / hỏng —
   đủ để liếc qua là biết đơn đang nằm ở đâu, mà không thành bảy sắc cầu vồng. */
.nv-tt{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;
       padding:2px 9px;white-space:nowrap}
.nv-tt.cho{background:var(--brand-soft);color:var(--brand-ink)}
.nv-tt.duyet{background:var(--info-soft);color:var(--info)}
.nv-tt.xong{background:var(--good-soft);color:var(--good)}
.nv-tt.tu-choi{background:var(--alert-soft);color:var(--alert)}
/* Nháp KHÔNG phải một trạng thái — nó là cờ riêng chồng lên trạng thái, nên
   nhãn xám trung tính, đứng cạnh chứ không thay nhãn trạng thái. */
.nv-tt.nhap{background:var(--hair-2);color:var(--muted);margin-left:5px}

#nv-bang{table-layout:fixed}
#nv-bang .mtv-stt{width:44px}
/* Mã đơn KHÔNG được xuống dòng: "NV-TT/2026/0206" bẻ ở dấu gạch thành hai
   dòng, và cột mã cao gấp đôi trong khi cột Nội dung — cái người ta thật sự
   đọc — bị bóp lại. Cho nó đủ chỗ một lần rồi khoá. */
.nv-cot-ma{width:132px;white-space:nowrap}
.nv-cot-nguoi{width:126px}
.nv-cot-tt{width:104px}
#nv-bang .tk-p{width:112px}
#nv-bang .tk-nut-cot{width:56px}
#nv-bang th{white-space:normal}
#nv-bang-dong{table-layout:fixed}
#nv-bang-dong .mtv-stt{width:44px}
#nv-bang-dong .tk-p{width:112px}
#nv-bang-dong th{white-space:normal}
/* Hai nút ＋tệp và Bỏ phải nằm CẠNH nhau: xếp chồng thì mỗi dòng bảng kê cao
   thêm 30px, mà bảng kê hoàn ứng có hàng chục dòng. */
#nv-bang-dong .tk-nut-cot{width:126px}
.nv-cot-ct{width:184px;font-size:12px}

/* Chứng từ của một dòng: tên tệp + nút xoá dính liền, xuống dòng riêng để tên
   tệp dài không đẩy vỡ cột tiền. */
/* Tên tệp do người dùng đặt, có cái dài 90 ký tự — cắt bằng ba chấm và giữ
   tên đầy đủ ở tooltip, thay vì để nó đổ mười dòng trong một ô 184px. */
.nv-tep{display:flex;align-items:center;gap:2px;margin-top:3px;min-width:0}
.nv-tep a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nv-tep form{flex:0 0 auto}
.nv-x{border:0;background:transparent;color:var(--muted);cursor:pointer;
      font-size:14px;line-height:1;padding:0 3px}
.nv-x:hover{color:var(--alert)}

/* Một dòng bảng kê trong form tạo: đóng khung để mắt thấy ranh giới giữa các
   dòng — mười dòng ô nhập không khung thì không biết ô nào thuộc dòng nào. */
.nv-dong{border:1px solid var(--hair);border-radius:var(--r-card);
         padding:11px 13px;background:var(--panel);margin-bottom:8px;
         display:flex;flex-direction:column;gap:9px}
.nv-dong .nv-bo{align-self:flex-start}
.nv-them-dong{gap:11px;margin-bottom:12px}

/* Danh bạ người thụ hưởng — CHỈ của chính mình, nên để ngay trong form thay
   vì một màn riêng. */
.nv-danh-ba{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.nv-ba-o{display:flex;flex-direction:column;gap:1px;text-align:left;
         border:1px solid var(--hair);border-radius:10px;background:var(--panel);
         padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2);
         cursor:pointer}
.nv-ba-o span{font-size:11px;font-weight:500}
.nv-ba-o:hover{background:var(--brand-soft);border-color:var(--brand)}

/* =====================================================================
   CÔNG NỢ — báo cáo, đối chiếu, cấn cọc dư
   ===================================================================== */
.cn-bang{table-layout:fixed}
/* Cột số của bảng này ăn bớt padding ngang: `.mtv td` mặc định 14px mỗi bên,
   tức một ô 108px chỉ còn 80px cho chữ — không đủ cho "14.636.500.663". */
.cn-bang .cn-cot-don{width:58px;text-align:right;padding-left:4px;padding-right:8px}
.cn-bang .tk-p{width:112px;padding-left:6px;padding-right:10px}
.cn-bang th{white-space:normal}
/* Bốn nút xếp 2×2 chứ không thành một hàng ngang: hàng ngang chiếm 250px trong
   khung rộng 700px, và cột duy nhất người ta thật sự đọc — tên công ty — chỉ
   còn chỗ để vỡ thành chữ cái. */
.cn-bang .cn-cot-nut{width:150px;padding-left:4px;padding-right:8px}
.cn-nut-o{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
/* Hẹp hơn `tk-nho` một nấc nữa: bốn nút phải vừa HAI HÀNG trong 150px, xuống
   bốn hàng thì mỗi dòng nhà cung cấp cao gấp ba.
   ⚠️ Ba khai báo width ở trên PHẢI viết `.cn-bang .cn-cot-*`, không viết
   `.cn-cot-*` trơ: `.mtv td{padding:10px 14px}` nặng hơn một lớp trơ, nên
   padding không bị đè và ô chỉ còn 122px — vừa đủ hụt để nút rơi xuống dòng. */
.cn-nut-o .btn{flex:0 0 auto;padding:4px 8px;font-size:12px}
/* Đã thanh toán là tiền ĐÃ RA KHỎI công ty — xanh để phân biệt ngay với cột
   tổng hoá đơn (mờ, chỉ để đối chiếu) và cột số tiền còn lại (đậm). */
.cn-tra{color:var(--good)}
/* Số tiền ở đây tới mười ba chữ số (14.636.500.663) — ô 158px của dải số
   chung bẻ nó làm hai dòng giữa con số. */
.tk-so.cn-so{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* Mã đơn là một chuỗi liền không dấu cách — `anywhere` chỉ cho cột này, bật cho
   cả bảng thì tên công ty bị bẻ từng CHỮ CÁI. */
.cn-cot-ma{width:132px;overflow-wrap:anywhere;font-size:12.5px}
#cn-bang-dc{table-layout:fixed}
#cn-bang-dc .tk-p{width:112px}
#cn-bang-dc th{white-space:normal}
#cn-bang-don{table-layout:fixed}
#cn-bang-don .tk-p{width:112px}
#cn-bang-ls .tk-p{width:116px}
#cn-bang-khac .tk-p{width:112px}
/* Số dư của NCC là tiền MÌNH đang gửi ở chỗ họ, không phải nợ — khác màu để
   không ai đọc nhầm thành khoản phải trả. */
.cn-du{color:var(--good)}
.cn-am{color:var(--good)}
.cn-vuot{color:var(--alert)}
#cn-bang-rot select,#cn-bang-rot input{width:100%;padding:6px 9px;font-size:13px}


/* =====================================================================
   YÊU CẦU THANH TOÁN — lệnh chi cho nhà cung cấp
   ===================================================================== */
/* Bốn trạng thái là bốn SỔ, nên chúng là thẻ lọc có kèm SỐ TIỀN: bấm duyệt
   hay không thường phụ thuộc vào "đợt này tổng bao nhiêu", chứ không phải
   "có bao nhiêu phiếu". */
.yc-loc{display:grid;gap:9px;margin:0 0 12px;
        grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}
.yc-o{background:var(--panel);border:1px solid var(--hair);
      border-radius:var(--r-card);padding:10px 13px;min-width:0;display:block}
.yc-o:hover{background:var(--panel-2)}
.yc-o.on{border-color:var(--brand);background:var(--brand-soft)}
.yc-n{font-size:19px;font-weight:700;line-height:1.2;margin-top:2px}
.yc-t{font-size:11.5px;margin-top:1px;overflow-wrap:anywhere}

/* Một yêu cầu là một THẺ chứ không phải một dòng bảng: nó chở tên nhà cung
   cấp, số tài khoản, người đề nghị, người duyệt, người chi — nhồi vào bảy cột
   trong khung 700px thì cột nào cũng không đọc được. */
.yc-the{margin-bottom:10px}
.yc-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
        padding-bottom:9px;border-bottom:1px solid var(--hair-2)}
.yc-tien{margin-left:auto;font-size:16px;font-weight:700;color:var(--brand-ink)}
.yc-than{display:grid;gap:2px 22px;padding:9px 0;
         grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.yc-d{display:flex;gap:10px;font-size:12.5px;padding:2px 0;align-items:baseline}
.yc-d > span:first-child{flex:0 0 104px;color:var(--muted);font-size:11.5px}
.yc-d.yc-thieu b{color:var(--alert)}
.yc-ghi{font-size:12.5px;margin:0 0 8px;padding:7px 11px;border-radius:10px;
        line-height:1.6}
.yc-ghi.xau{background:var(--alert-soft);color:var(--alert)}
.yc-ghi.tot{background:var(--good-soft);color:var(--good)}
/* Hàng nút của một yêu cầu: nút rời, nút trong form, và ô nhập nằm lẫn nhau.
   Để mỗi thứ tự tính chiều cao theo padding của nó thì ra ba con số khác nhau —
   ô nhập cao hơn nút vài pixel — và cả hàng răng cưa. Ấn định MỘT chiều cao rồi
   bỏ padding dọc: chữ một dòng tự căn giữa. Cùng cách đã dùng ở `.tk-thanh`.
   `form{margin:0}` là bắt buộc: thẻ <form> mang margin mặc định của trình duyệt,
   nên nút nằm trong form bị đẩy lệch so với nút đứng trơ. */
.yc-nut{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.yc-nut form{display:flex;gap:6px;align-items:center;margin:0}
.yc-nut .btn,.yc-nut input{height:32px;padding-top:0;padding-bottom:0}
.yc-tu-choi input,.yc-chi input{padding-left:10px;padding-right:10px;
                                font-size:12.5px;min-width:150px;width:auto}

/* =====================================================================
   LỊCH THANH TOÁN — bốn nguồn gom về đợt chi Thứ 3 / Thứ 5
   ===================================================================== */
.ltt-d{padding:10px 0;border-bottom:1px solid var(--hair-2)}
.ltt-d:last-child{border-bottom:0;padding-bottom:0}
.ltt-d:first-child{padding-top:0}
/* Phiếu quá hạn nhuộm nền nhạt chứ không chỉ gắn chữ: nó nằm lẫn trong đợt
   cùng mọi phiếu khác, một cái nhãn nhỏ thì trôi mất giữa sáu dòng. */
.ltt-d.tre{background:var(--alert-soft);margin:0 -13px;padding-left:13px;
           padding-right:13px;border-radius:10px}
.ltt-d1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ltt-ma{font-size:13px;font-weight:600}
.ltt-tien{margin-left:auto;font-size:14.5px;color:var(--brand-ink)}
.ltt-d2{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px;
        font-size:12.5px}
.ltt-ai{font-weight:600}
.ltt-nd{font-size:12px;margin-top:3px;line-height:1.55}
.ltt-co{font-size:11.5px;font-weight:700;color:var(--alert)}
/* Bốn nguồn bốn màu — nhìn một đợt là biết ngay tiền đi cho NCC hay cho người
   trong công ty, hai việc đó kế toán xử lý khác nhau. */
.ltt-ng{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;
        white-space:nowrap}
.ltt-ng.ng-ncc{background:var(--brand-soft);color:var(--brand-ink)}
.ltt-ng.ng-payment{background:var(--info-soft);color:var(--info)}
.ltt-ng.ng-advance{background:var(--hair-2);color:var(--ink-2)}
.ltt-ng.ng-settle{background:var(--good-soft);color:var(--good)}
.ltt-doi{display:flex;gap:6px;align-items:center;margin-top:6px}
.ltt-doi select{width:auto;min-width:150px;padding:5px 26px 5px 9px;
                font-size:12.5px}

/* =====================================================================
   NGHỈ PHÉP — nửa quản lý
   ===================================================================== */
/* Một đơn là một THẺ: nó chở người, khoảng ngày, lý do, chứng từ, và ô phân
   loại lúc duyệt. Nhồi vào một hàng bảng thì ô phân loại không còn chỗ, mà
   chính ô đó mới là việc chính của màn này. */
.ph-don{margin-bottom:9px}
.ph-don.cho{border-color:var(--brand)}
.ph-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ph-ngay{margin-left:auto;font-size:12.5px;color:var(--ink-2)}
.ph-so{font-size:14.5px;color:var(--brand-ink);white-space:nowrap}
.ph-than{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-top:5px}
.ph-ai{margin-left:6px;font-size:11.5px}
.ph-mo{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:600;
       color:var(--muted)}
.ph-mo:hover{color:var(--brand-ink)}

/* Hàng phân loại lúc duyệt: ô nhập và nút phải cao bằng nhau, cùng cách đã
   dùng ở `.tk-thanh` và `.yc-nut`. */
.ph-duyet{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
          margin-top:9px;padding-top:9px;border-top:1px solid var(--hair-2)}
.ph-duyet label{display:flex;flex-direction:column;gap:3px;margin:0;
                font-size:10.5px;font-weight:700;letter-spacing:.06em;
                text-transform:uppercase;color:var(--muted)}
.ph-duyet input,.ph-duyet select{height:32px;padding-top:0;padding-bottom:0;
                                 font-size:13px;width:auto}
.ph-duyet input{width:84px;text-align:right}
.ph-duyet select{min-width:132px}
.ph-duyet .btn{height:32px;padding-top:0;padding-bottom:0}
.ph-nhac{font-size:11.5px;padding-bottom:7px}
.ph-nhac.ph-lech{color:var(--alert);font-weight:600}
.ph-tu-choi{display:inline-block;margin-top:8px}

/* Hàng "Kỳ lương ghi" của đơn ĐÃ duyệt: chỉ một nhãn và hai nút chọn, nên căn
   GIỮA và nút nhỏ hơn hẳn nút hành động. Dùng lại `.ph-duyet` thì nó căn đáy
   theo ô nhập cao 32px của hàng duyệt, mà hàng này không có ô nhập nào — nhãn
   tụt xuống dưới hai nút, đúng chỗ đã lệch. */
.ph-luong{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;
          padding-top:9px;border-top:1px solid var(--hair-2)}
.ph-luong form{display:flex;margin:0}
.ph-luong .dim{font-size:11.5px;margin-right:2px}
.ph-luong .btn{height:26px;padding:0 11px;font-size:12px;line-height:1}

.ph-bang{table-layout:fixed}
.ph-bang .tk-p{width:86px}
.ph-cot-db{width:190px;font-size:12px}
.ph-bang th{white-space:normal}
.ph-bang .tk-nut-cot{width:56px}
/* Người đã nghỉ quá quota: nền nhạt để lướt bảng là thấy, vì đó là những dòng
   kỳ lương sẽ trừ tiền. */
.ph-vuot td{background:var(--alert-soft)}
.ph-bang-thang{table-layout:fixed}
.ph-bang-thang .tk-p{width:118px}
.ph-bang-thang th{white-space:normal}
/* Tháng chưa tới thì làm mờ — số "còn lại" của nó là dự kiến, không phải sự thật. */
.ph-sau td{opacity:.45}
.ph-cot-tt{width:104px}

/* =====================================================================
   CHẤM CÔNG — bảng công ba khối
   ===================================================================== */
/* Bảng công là 31 cột ngày + 7 cột tổng: KHÔNG có cách nào nhét vừa khung
   790px, nên nó cuộn ngang TRONG khung của nó, cột tên và cụm cột tổng dính
   lại hai mép. Không dính thì cuộn tới ngày 20 là mất tên người, mà bảng công
   không có tên người thì vô dụng. */
.cc-cuon{overflow-x:auto;position:relative}
/* ⚠️ TÊN LỚP LÀ `cc-lich`, KHÔNG PHẢI `cc-bang`. `.cc-bang` đã có chủ từ bản
   báo cáo — đó là cái link "Xem dạng bảng". Đặt trùng tên rồi cho `min-width:
   100%` là cái link phình hết chiều ngang và đè lên câu tóm tắt bên cạnh. */
.cc-lich{font-size:12px;border-collapse:separate;border-spacing:0;
         table-layout:auto;min-width:100%}
.cc-lich th,.cc-lich td{padding:5px 4px;border-bottom:1px solid var(--hair-2);
                        white-space:nowrap;vertical-align:middle}
/* ⚠️ Phải ghi là `td.cc-cot-ten` / `th.cc-cot-ten`. Khai trơ `.cc-cot-ten`
   thì nó THUA `.cc-lich td{white-space:nowrap}` ngay bên trên (cùng một lớp
   nhưng luật kia có thêm tên thẻ), nên tên bộ phận dài không xuống dòng mà
   TRÀN ra đè lên các cột số — cột dính trái vẫn dính, chữ thì chạy đi. */
td.cc-cot-ten, th.cc-cot-ten{position:sticky;left:0;z-index:2;
            background:var(--panel);
            min-width:150px;max-width:170px;white-space:normal;
            font-weight:600;padding-left:11px!important;
            box-shadow:1px 0 0 var(--hair)}
.cc-lich thead .cc-cot-ten{z-index:3;background:var(--panel-2)}
.cc-cot-ten .tk-phu{font-weight:400}
.cc-cot-bac{min-width:76px}
.cc-lich thead th{background:var(--panel-2);position:sticky;top:0;z-index:1;
                  font-size:10px;font-weight:700;color:var(--muted);
                  text-transform:uppercase;letter-spacing:.04em;
                  border-bottom:1px solid var(--hair)}
/* ⚠️ `cc-ngay` / `cc-chot`, KHÔNG phải `cc-o` / `cc-nhan`. Hai tên kia đã có
   chủ ở bản báo cáo cũ: `.cc-o` là THẺ chứa danh sách người của một bộ phận,
   `.cc-nhan` là nhãn tên bộ phận. Đặt trùng rồi cho `width:28px` là cái thẻ
   danh sách co lại còn 28px, tên người vỡ dọc từng chữ cái. Cùng họ với vụ
   `.cc-bang` ngay bên trên — ba lần một lỗi trong một lần thi công. */
.cc-ngay{width:28px;text-align:center;font-size:11.5px}
.cc-ngay span{display:block;font-size:8.5px;font-weight:600;opacity:.6}
.cc-ngay.cn,.cc-ngay-live.cn{color:var(--muted)}
.cc-ngay-live{width:40px;text-align:center;font-size:11px}
.cc-ngay-live span{display:block;font-size:8.5px;font-weight:600;opacity:.6}
.cc-gd{display:block;color:var(--ink)}
.cc-gn{display:block;color:var(--info);font-weight:600}
/* Cụm cột tổng — thứ kế toán đem đi đối soát, nên nền khác hẳn phần lịch. */
.cc-tong{background:var(--panel-2);font-size:12px;padding-left:7px!important;
         padding-right:9px!important}
.cc-chot{background:var(--brand-soft);font-weight:700}
.cc-tre{color:var(--alert);font-weight:600}
/* Màu ô theo loại ngày: nhìn một dòng là thấy tháng đó người ta đi làm ra sao,
   không phải đọc từng con số. */
.k-lam{font-weight:600}
.k-lam_le{font-weight:600;background:var(--brand-soft)}
.k-le{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.k-nghi,.k-nghi_nua{background:var(--info-soft);color:var(--info);font-weight:700}
.k-vang{background:var(--alert-soft);color:var(--alert);font-weight:700}
.k-cn{color:var(--hair)}
.k-sau,.k-trong,.k-khong_cham{color:var(--hair-2)}
/* Chuyển kỳ */
.cc-cot-ky{width:150px;white-space:nowrap}
.cc-cot-xn{width:152px;text-align:right}
.cc-xn{display:flex;gap:5px;justify-content:flex-end}
.cc-xn .btn{padding:4px 10px;font-size:12px}
#cc-bang-ck .tk-p{width:72px}
.cc-cho td{background:var(--brand-soft)}
@media (max-width:820px){
  .cc-cot-ten{min-width:120px}
}
/* Lịch 31 cột nằm trong <details>: bảng tổng hợp mới là thứ mở ra là thấy. */
.cc-chi-tiet{margin-top:14px}
.cc-chi-tiet > summary{cursor:pointer;font-weight:600;font-size:13px;
                       color:var(--ink-2);padding:9px 2px;list-style-position:inside}
.cc-chi-tiet > summary:hover{color:var(--brand-ink)}
/* Tám cột số + cột tên trong khung 700px: cột số phải hẹp lại, nếu không cột
   TÊN chỉ còn 90px và mỗi cái tên vỡ thành bốn dòng. */
.cc-th{table-layout:fixed}
.cc-th .tk-p{width:66px;padding-left:5px!important;padding-right:8px!important}
.cc-th .cc-chot{background:var(--brand-soft)}
.cc-th th{white-space:normal;font-size:10px}
.cc-th td:first-child{overflow-wrap:anywhere}

/* Ô <input type="month"> của Chrome hiện "tháng 9 năm 2026" kèm icon lịch —
   150px cắt cụt mất phần năm. */
/* ⚠️ `input.cc-o-thang`, không phải `.cc-o-thang`: ô tháng ở Chấm công nằm
   trong `label.tk-ty-le`, mà `.tk-ty-le input{width:72px}` có thêm tên thẻ nên
   THẮNG lớp trơ — ô co lại 72px và hiện đúng chữ "thán". Cùng một cái bẫy độ
   ưu tiên với `.cc-cot-ten` ở trên. */
input.cc-o-thang{width:190px}
/* Ô lý do từ chối trong hàng duyệt bổ sung công: để tự do thì nó dãn hết hàng,
   nhìn như một khung nhập khổng lồ cạnh hai cái nút bé. */
.ph-luong input[name="note"]{width:220px;height:32px;padding:0 11px;
                             font-size:12.5px}

/* =====================================================================
   LIVESTREAM — giờ live theo tuần, lương host theo bậc
   ===================================================================== */
/* Lưới nhập 14 ngày × 2 ô mỗi ngày: ô phải nhỏ hết mức còn bấm được, nếu
   không lưới tràn ra ngoài và phải kéo ngang hai vòng mới nhập xong một host. */
.lv-o{width:52px;text-align:center;font-size:11px;padding:3px!important}
.lv-o span{display:block;font-size:8.5px;font-weight:600;opacity:.6}
.lv-o.cn{color:var(--muted)}
/* Ngày ×1.5 tô nền: nhập giờ vào đúng ngày đó là tiền gấp rưỡi, người nhập
   phải thấy trước khi gõ chứ không phải sau khi ra bảng lương. */
.lv-o.bonus{background:var(--brand-soft)}
.lv-nhap thead .lv-o.tuan-nay{box-shadow:inset 0 -2px 0 var(--brand)}
/* ⚠️ `display:block` là BẮT BUỘC. `.cc-lich td` đặt `white-space:nowrap`, mà
   <input> mặc định là inline-block — hai ô ngày/đêm nằm CẠNH nhau rồi tràn ra
   khỏi cột 52px, chỉ nhìn thấy ô đầu. Đúng lỗi đã thấy ở ảnh chụp đầu tiên. */
.lv-nhap input{display:block;width:100%;padding:2px 3px;font-size:11.5px;
               text-align:center;height:22px;border-radius:6px}
.lv-nhap input.lv-dem{margin-top:2px;color:var(--info);
                      border-color:var(--info-soft)}
.lv-nhap td.lv-o{padding:4px 3px!important}
.lv-nhap input:focus{border-color:var(--brand)}

/* Nhãn bậc host — năm bậc, năm màu, vì đơn giá của mỗi bậc khác nhau. */
.lv-bac{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;
        padding:2px 9px;white-space:nowrap;background:var(--hair-2);
        color:var(--ink-2)}
.lv-bac.b-junior{background:var(--info-soft);color:var(--info)}
.lv-bac.b-senior{background:var(--good-soft);color:var(--good)}
.lv-bac.b-manager{background:var(--brand-soft);color:var(--brand-ink)}
.lv-bac.b-lead{background:var(--ink);color:var(--panel)}
/* Tuần đã chi: viền xanh cho biết con số đã đóng băng, không tính lại nữa. */
.lv-chot{border-color:var(--good)}

.lv-bang-bac{table-layout:fixed}
.lv-bang-bac .tk-p{width:96px}
.lv-cot-bac{width:104px}
.lv-cot-doi{width:270px}
.lv-doi{display:flex;gap:5px;align-items:center;justify-content:flex-end}
.lv-doi select{width:auto;min-width:104px;height:30px;padding:0 24px 0 8px;
               font-size:12.5px}
.lv-doi input[type="date"]{width:auto;height:30px;padding:0 6px;font-size:12px}
.lv-doi .btn{height:30px;padding-top:0;padding-bottom:0}
.lv-bang-thang{table-layout:fixed}
.lv-bang-thang .tk-p{width:84px}
.lv-bang-thang th{white-space:normal}

/* =====================================================================
   LƯƠNG — bảng lương nháp có version, hồ sơ lương, phiếu lương
   ===================================================================== */
/* Thanh vòng đời: trạng thái kỳ + ĐÚNG những nút được phép bấm ở bước đó.
   Bấm nhầm nút ở màn này là chuyển sai tiền, nên nút nào chưa tới lượt thì
   không hiện, chứ không hiện rồi báo lỗi sau khi bấm. */
.lg-buoc{margin-bottom:14px;display:flex;flex-direction:column;gap:9px}
.lg-buoc.da-chi{border-color:var(--good)}
.lg-buoc-tt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.lg-nhan{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;
         white-space:nowrap;background:var(--panel-2);color:var(--ink-2)}
.lg-nhan.xong{background:var(--brand-soft);color:var(--brand-ink)}
.lg-nhan.chi{background:var(--good-soft);color:var(--good)}
.lg-nhan.dang-sua{background:var(--alert-soft);color:var(--alert)}
/* `form{display:contents}` để mỗi nút là một biểu mẫu riêng mà vẫn nằm thẳng
   hàng — cùng cách đã dùng ở `.tk-thanh`. Cao cố định 34px cho cả nút lẫn ô,
   nếu không nút có chữ dài tự cao hơn và cả hàng lệch. */
.lg-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lg-nut form{display:contents}
.lg-nut .btn{height:34px;padding-top:0;padding-bottom:0;display:inline-flex;
             align-items:center}
.lg-giai-thich{font-size:12.5px;line-height:1.65;margin:0}

/* Thanh lọc: `select` toàn cục là `width:100%`, nên trong `.tk-thanh` mỗi ô
   chọn tự chiếm trọn một dòng — thanh lọc bốn ô thành bốn tầng. Cho `auto`
   kèm sàn tối thiểu để chúng nằm cùng hàng mà vẫn đọc được nhãn dài. */
.lg-loc select{width:auto;min-width:170px;max-width:100%}
.lg-loc select[name="nv"]{min-width:280px}
/* Cùng cái bẫy: `input[type=date]` và `input` không khai type đều là
   `width:100%` toàn cục, nên mỗi ô chiếm một dòng riêng. */
.lg-loc input[type=date]{width:168px}
.lg-loc input[name="amount"]{width:140px;text-align:right}
.lg-loc .lg-o-ghi{width:auto;flex:1;min-width:140px}
/* Câu giải thích ăn trọn một dòng, để cụm ô điều khiển nằm gọn hàng dưới. */
.lg-cau{flex:1 0 100%;font-size:12.5px;line-height:1.65}
/* Danh sách thành phần của một giai đoạn: dòng phụ, xuống dòng thoải mái. */
.lg-muc{white-space:normal;line-height:1.55}
/* Cột thao tác của bảng thành phần chở một ô NGÀY + hai nút. 152px là hai nút
   rơi xuống dòng dưới, lệch hẳn khỏi hàng. */
.lg-cot-tt{width:238px;text-align:right}
/* `display:contents` để ô ngày và hai nút của HAI biểu mẫu khác nhau vẫn là
   ba ô cùng một hàng flex — không có nó thì mỗi <form> là một khối riêng và
   nút "Đóng" rơi xuống dưới ô ngày. Cùng cách đã dùng ở `.tk-thanh`. */
.lg-cot-tt form{display:contents}
.lg-cot-tt input[type=date]{width:132px;height:30px;padding:0 8px;font-size:12.5px}
.lg-cot-tt .btn{padding:4px 10px;font-size:12px}

/* Bảng lương 16-18 cột trong khung ~760px: cột số phải hẹp, cột tên dính trái. */
.lg-bang .tk-p{padding-left:6px!important;padding-right:8px!important}
.lg-bang .cc-cot-xn{width:128px;text-align:left}
.lg-bang .cc-cot-xn select{width:100%;height:28px;padding:0 22px 0 7px;
                           font-size:12px}
.lg-tt{white-space:nowrap}
.lg-tt .btn{padding:3px 9px;font-size:11.5px}
.lg-tt .btn + .btn{margin-left:4px}
.lg-tt .btn.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}

/* Hàng "khoản nhập tay" bung ra dưới một người. Nền khác hẳn để không lẫn với
   dòng lương thật ở trên. */
.lg-khoan > td{background:var(--panel-2);padding:12px 13px!important;
               white-space:normal!important}
/* Ô này nằm trong BẢNG CUỘN NGANG rộng gấp đôi khung, nên nếu để biểu mẫu ăn
   theo bề ngang của ô thì nút "Lưu khoản" nằm tít bên phải, phải kéo ngang mới
   bấm được. `position:sticky;left:0` ghim nó vào mép trái vùng đang nhìn, còn
   bề ngang lấy theo MÀN HÌNH (vw) chứ không theo ô — ô rộng bao nhiêu kệ nó. */
.lg-khoan > td > .lg-form{position:sticky;left:0;
                          width:min(680px, calc(100vw - 40px))}
.lg-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.lg-o{display:flex;flex-direction:column;gap:3px;min-width:150px}
.lg-o-rong{flex:1;min-width:200px}
.lg-o > span{font-size:10.5px;font-weight:700;letter-spacing:.06em;
             text-transform:uppercase;color:var(--muted)}
.lg-o input{height:32px;padding:0 10px;font-size:12.5px}
.lg-o input + input{margin-top:3px}
.lg-o-nut{display:flex;gap:8px;align-items:center;margin-left:auto}
.lg-o-nut .btn{height:32px;padding-top:0;padding-bottom:0;display:inline-flex;
               align-items:center}
.lg-tick{display:flex;flex-wrap:wrap;gap:9px 15px;width:100%;font-size:12.5px}
.lg-tick label{display:flex;align-items:center;gap:5px;margin:0;
               text-transform:none;letter-spacing:0;font-weight:600;
               color:var(--ink-2)}
.lg-tick input{width:auto;height:auto;margin:0}
@media (max-width:820px){
  .lg-o,.lg-o-rong{min-width:100%}
  .lg-o-nut{margin-left:0}
}

/* =====================================================================
   CÔNG CỦA TÔI — bảng công cá nhân của người quét vân tay dưới xưởng
   ===================================================================== */
.cg-bang{font-size:12.5px}
.cg-bang td,.cg-bang th{white-space:normal}
.cg-ngay{width:78px;white-space:nowrap!important}
.cg-tt{width:190px;text-align:right}
.cg-cn td{color:var(--muted)}
.cg-le td{background:var(--brand-soft)}
.cg-viec{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.cg-viec form{display:contents}
.cg-nut{padding:3px 9px!important;font-size:11.5px!important;height:auto!important}
.cg-nut.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
/* Hộp gửi đơn bung ra NGAY DƯỚI ngày đang xem: người ta vừa nhìn giờ máy ghi
   vừa gõ giờ đúng, hai thứ đó phải nằm cạnh nhau chứ không phải hai màn hình. */
.cg-form > td{background:var(--panel-2);padding:12px 13px!important}
.cg-hop{display:flex;flex-direction:column;gap:12px}
.cg-hop .lg-form{padding:10px 12px;border:1px solid var(--hair);
                 border-radius:var(--r-card);background:var(--panel)}

/* Ô sửa mức tạm ứng ngay trong bảng đề xuất + cụm nút xử lý đơn tạm ứng. */
.lg-o-ung{width:104px;height:28px;padding:0 8px;font-size:12.5px;text-align:right}
.lg-cot-tt .cc-xn{flex-wrap:wrap;gap:5px}
.lg-cot-tt input[name="amount"]{width:96px;height:28px;padding:0 8px;
                                font-size:12.5px;text-align:right}
.lg-cot-tt input[name="reason"]{width:130px;height:28px;padding:0 8px;
                                font-size:12.5px}
.lg-cot-tt select{width:auto;min-width:150px;height:28px;padding:0 22px 0 7px;
                  font-size:12.5px}

/* Cột ghép mã máy chở một ô chọn người + ô tick + nút: 238px là cả cụm rơi
   xuống hai dòng, nhìn như hai việc khác nhau. */
.cc-may-tt{width:330px;text-align:right}
/* ⚠️ KHÔNG đặt `display:contents` cho form ở đây: form CHÍNH LÀ `.cc-xn`, tức
   là cái hộp flex. Cho nó `contents` là xoá luôn hộp flex, ba ô rơi xuống ba
   dòng — khác hẳn mấy cột kia, nơi form chỉ bọc bên trong hộp. */
.cc-may-tt .cc-xn{flex-wrap:nowrap;align-items:center}
.cc-may-tt select{width:auto;flex:1;min-width:0;height:30px;padding:0 24px 0 8px;
                  font-size:12.5px}
.cc-may-tt .btn{padding:4px 10px;font-size:12px;white-space:nowrap}
.cc-may-tt label{margin:0;font-size:11.5px;text-transform:none;letter-spacing:0;
                 white-space:nowrap;color:var(--muted);font-weight:600}

/* =====================================================================
   QUẢN TRỊ TRUY CẬP — ma trận quyền theo phòng ban và theo người
   ===================================================================== */
/* Lưới thẻ thay vì bảng 43 cột: mắt đọc theo NHÓM (Con người, Hàng hoá…) chứ
   không đọc theo hàng ngang 43 ô — bảng ngang đó phải kéo hai vòng mới hết. */
.qt-luoi{display:grid;gap:10px;padding:12px 13px;
         grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.qt-o{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
      border:1px solid var(--hair);border-radius:var(--r-card);
      padding:9px 11px;background:var(--panel)}
.qt-o.khoa{opacity:.6}
.qt-ten{flex:1;min-width:130px;font-size:13px;font-weight:600;line-height:1.35}
.qt-ten .tk-phu{font-weight:400}
/* Ba trạng thái, ba màu — bấm nhầm ô ở đây là cả phòng mất đường vào, nên
   phải nhìn một cái là biết đang chọn gì, không phải soi dấu chấm bé tí. */
.qt-chon{display:flex;gap:4px;flex:0 0 auto}
.qt-nhan{display:inline-flex;align-items:center;margin:0;cursor:pointer;
         font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;
         border:1px solid var(--hair);border-radius:999px;padding:4px 10px;
         color:var(--muted);background:var(--panel);white-space:nowrap}
.qt-nhan input{position:absolute;opacity:0;width:0;height:0;margin:0}
.qt-nhan:hover{border-color:var(--brand)}
.qt-nhan.on.mo{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.qt-nhan.on.khoa{background:var(--alert-soft);color:var(--alert);
                 border-color:var(--alert)}
.qt-nhan.on.mac_dinh,.qt-nhan.on.theo_phong{background:var(--ink);
                 color:var(--panel);border-color:var(--ink)}
.qt-nhan:has(input:disabled){cursor:default;opacity:.65}

.qt-loat{display:flex;flex-direction:column;gap:10px}
.qt-loat-dau{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
             font-size:13.5px}
.qt-loat-dau .dim{font-size:12.5px}
.qt-loat-he{display:grid;gap:8px;
            grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.qt-loat-nhom > summary{cursor:pointer;font-size:12.5px;font-weight:600;
                        color:var(--ink-2);padding:6px 2px;
                        list-style-position:inside}
.qt-loat-tick{display:flex;flex-direction:column;gap:5px;padding:4px 2px 8px 14px}
.qt-loat-tick label{display:flex;align-items:center;gap:6px;margin:0;
                    font-size:12.5px;font-weight:500;text-transform:none;
                    letter-spacing:0;color:var(--ink-2)}
.qt-loat-tick input{width:auto;height:auto;margin:0}
@media (max-width:820px){
  .qt-luoi{grid-template-columns:1fr}
  .qt-o{align-items:flex-start;flex-direction:column}
}

/* Nội quy: nhãn cho biết bản nào ĐANG ÁP DỤNG. Một kệ toàn văn bản trông
   giống hệt nhau thì người mở ra không biết đọc bản nào — mà đọc nhầm bản cũ
   là cãi nhau về lương với một quy chế đã hết hiệu lực. */
.nq-nhan{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;
         padding:1px 8px;margin-left:6px;white-space:nowrap;vertical-align:middle}
.nq-nhan.dang{background:var(--good-soft);color:var(--good)}
.nq-nhan.sap{background:var(--brand-soft);color:var(--brand-ink)}
.nq-nhan.cu{background:var(--hair-2);color:var(--muted)}
.sop-hang.nq-cu{opacity:.62}

/* ---- Bản mô tả vai trò: một bảng + ba bộ lọc + nút tải ngay trên dòng ---- */
.mtv-thanh{gap:12px;flex-wrap:wrap}
/* Nút lọc ĐANG CHỌN tô vàng thương hiệu, đúng mẫu anh Tân gửi. CHỈ trong màn
   này — ba màn khác (Phép, Thanh toán nhân sự, Nội quy) vẫn dùng nền đen như
   cũ, đổi hết một lượt là một quyết định khác, không lẫn vào đây. */
.mtv-thanh .nv-loc-o.on{background:var(--brand);border-color:var(--brand);
                        color:#fff}
.mtv-thanh .nv-loc-o.on span{opacity:.75}
.mtv-thanh .nv-loc{flex:1 1 auto}
/* Bộ chuyển "đang xem với vai": chỉ đổi cái HIỆN RA, không đổi cái LÀM ĐƯỢC.
   Để nó trông như một cặp nút gạt chứ không như một ô chọn quyền — người dùng
   phải hiểu ngay đây là xem thử, không phải đổi vai thật. */
.mtv-vai-xem{display:flex;align-items:center;gap:8px;font-size:12.5px;
             flex:0 0 auto}
.mtv-doi{display:inline-flex;border:1px solid var(--hair);border-radius:999px;
         overflow:hidden;background:var(--panel)}
.mtv-doi-o{padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2);
           white-space:nowrap}
.mtv-doi-o + .mtv-doi-o{border-left:1px solid var(--hair)}
.mtv-doi-o:hover{background:var(--panel-2)}
.mtv-doi-o.on{background:var(--brand);color:#fff}
/* Cột bản mô tả: chữ bên trái, nút tròn dính lề phải, LUÔN cùng một hàng.
   `flex-wrap:nowrap` khai rõ chứ không dựa vào mặc định — ô này nằm trong
   `.mtv-cot-ban` vốn đã `white-space:nowrap`, lỡ ai gỡ dòng đó thì nút rơi
   xuống dưới chữ, trông như hai thứ rời nhau. */
.mtv-o{display:flex;align-items:center;justify-content:flex-end;gap:9px;
       flex-wrap:nowrap}
.mtv-o-chu{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
/* Nút TRÒN, nền vàng thương hiệu — cùng họ với nút chính của app, không phải
   cái ô vuông xám mặc định của trình duyệt. Đây là hành động chính của cả màn
   (tải bản mô tả lên), nên nó phải trông như một cái nút thật. */
.mtv-them{flex:0 0 auto;width:28px;height:28px;border-radius:999px;border:0;
          background:var(--brand);color:#fff;font-size:17px;font-weight:600;
          line-height:1;padding:0;cursor:pointer;
          display:inline-flex;align-items:center;justify-content:center;
          box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mtv-them:hover{filter:brightness(1.07)}
.mtv-them:active{transform:translateY(1px)}
/* Nút lịch sử thì nhạt hơn hẳn: nó là việc phụ, không được tranh chỗ với
   nút tải lên. */
.mtv-ls{flex:0 0 auto;width:28px;height:28px;border-radius:999px;
        border:1px solid var(--hair);background:var(--panel);color:var(--muted);
        font-size:14px;line-height:1;letter-spacing:1px;
        display:inline-flex;align-items:center;justify-content:center}
.mtv-ls:hover{border-color:var(--brand);color:var(--brand-ink);
              background:var(--brand-soft)}
/* Nhãn TV: gọn hết mức để không đẩy cột tên, nhưng đủ thấy khi lướt. Nền nhạt
   thay vì chỉ có viền — viền mảnh trên nền trắng nhìn như lỗi hiển thị. */
.mtv-tv{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.4px;
        background:var(--alert-soft);color:var(--alert);border-radius:5px;
        padding:1px 5px;vertical-align:1px}
.mtv-toi td{background:var(--brand-soft)}
.mtv-cu td{opacity:.62}
.mtv a.mtv-co{border-bottom:1px dashed var(--good)}
@media (max-width:820px){
  .mtv-vai-xem{width:100%;justify-content:space-between}
}

/* ===================================================== BÁO CÁO
   Hàng phòng ban là một thẻ BẤM ĐƯỢC CẢ HÀNG (thẻ <a>), nên phải tự bỏ gạch
   chân và tự lấy lại màu chữ — .sop-hang vốn dựng cho <div>. */
.bc-hang{text-decoration:none;color:inherit}
.bc-hang:hover{background:var(--panel-2)}
.bc-mui{color:var(--muted);font-size:17px;line-height:1}

/* Viên trạng thái. "Thiếu" dùng màu cảnh báo, "đủ" dùng màu tốt, "chưa có
   mục" dùng xám — ba trạng thái khác nhau hẳn khi đọc lướt cả danh sách. */
.bc-vien{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;
  padding:3px 9px;letter-spacing:.02em;white-space:nowrap}
.bc-vien.thieu{background:var(--alert-soft);color:var(--alert)}
.bc-vien.du{background:var(--good-soft);color:var(--good)}
.bc-vien.chua{background:var(--hair-2);color:var(--muted)}
/* QUÁ HẠN phải NẶNG HƠN "thiếu n tệp": chưa nộp mà còn hạn là bình thường,
   chưa nộp mà đã trễ là việc phải xử lý hôm nay. Cùng màu mà khác độ đậm thì
   đọc lướt cả danh sách không tách được hai loại. */
.bc-vien.tre{background:var(--alert);color:#fff}
/* Đúng NGÀY hạn cũng cần một viên riêng: hôm nay còn kịp làm, mai là trễ —
   mà nếu để chung "CHƯA NỘP" thì ngày duy nhất còn kịp lại trông y như mọi
   ngày khác. */
.bc-vien.nay{background:var(--brand);color:#fff}

.bc-dau{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin-bottom:12px}
/* Khối tên phải giữ được một bề ngang tối thiểu. Để nó co tự do thì bốn cái
   nút (Nhắc nộp · Thêm mục · Sửa · Xoá) bóp tên kỳ xuống còn hai ba chữ mỗi
   dòng — thà cho hàng nút rơi xuống dưới. */
.bc-dau > div:first-child{flex:1 1 250px;min-width:250px}
.bc-dau-nut{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bc-dau-nut form{display:contents}
.bc-dau-nut .btn{margin:0}

.bc-muc{border-bottom:1px solid var(--hair)}
.bc-muc:last-child{border-bottom:0}
.bc-muc-dau{display:flex;align-items:center;gap:12px;padding:12px 14px}
.bc-muc.xong .sop-icon{background:var(--good-soft);color:var(--good)}

/* Tệp đã nộp nằm THỤT VÀO dưới mục của nó, trên nền chìm: nhìn lướt là thấy
   ngay tệp thuộc mục nào, không phải dò theo khoảng cách. */
.bc-tep-ds{background:var(--panel-2);border-top:1px solid var(--hair);
  padding:6px 14px 8px 60px}
.bc-tep{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap}
.bc-tep form{display:contents}
.bc-tep .btn{padding:5px 10px;font-size:12px;margin:0}
.bc-tep-icon{flex:0 0 auto;font-size:14px}
.bc-tep-ten{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bc-tep-ten:hover{text-decoration:underline}
.bc-tep-phu{font-size:11.5px;flex:1;min-width:0}

/* Hộp nhắc: danh sách người cuộn được, vì phòng đông tới 20 người mà hộp dài
   quá màn hình thì nút Gửi rơi xuống dưới, không ai thấy. */
.bc-hop-nhac{max-width:440px}
/* `.form label` (0,1,1) NẶNG HƠN `.bc-nguoi` (0,1,0) — đúng cái bẫy đã dính
   ba lần ở .cc-cot-ten, .cc-o-thang, .cc-may-tt. Hàng người trong hộp nhắc là
   một <label> nằm trong .form, nên không kèm tên thẻ thì tên người bị in hoa
   và giãn chữ như nhãn ô: "LÊ PHƯƠNG NAM · TRƯỞNG BỘ PHẬN". */
.form label.bc-nguoi{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:0}
.form label.bc-nguoi:hover{background:var(--panel-2)}
.form label.bc-nguoi.mo{opacity:.5;cursor:default}
.form label.bc-nguoi input{width:17px;height:17px;flex:0 0 auto;margin:0}
.form label.bc-tat-ca{border:1px solid var(--hair);background:var(--panel-2)}
.bc-nguoi-ds{max-height:46vh;overflow:auto;margin:0 -4px;padding:0 4px}

@media (max-width:720px){
  .bc-tep-ds{padding-left:16px}
  .bc-dau{flex-direction:column;align-items:stretch}
}

/* Nhãn của chủ đề, hiện khi đang xem "Tất cả" — bỏ nó đi thì ở chế độ đó hai
   kỳ của hai loại báo cáo nằm cạnh nhau mà không phân biệt được. */
.bc-nhan-vien{display:inline-block;font-size:10.5px;font-weight:600;
  border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px;
  background:var(--brand-soft);color:var(--brand-ink);white-space:nowrap}

/* ===================================================== TRUY CẬP NGOÀI
   Bốn trạng thái của một tài khoản khách, và bốn cái phải khác nhau hẳn khi
   đọc lướt: đang chạy (xanh), hết hạn (xám đậm), đã thu hồi (xám), treo vì
   chưa chọn người mẫu (vàng cam — đây là lỗi cấu hình, không phải trạng thái
   bình thường). */
.ng-vien{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;
  padding:3px 9px;white-space:nowrap}
.ng-vien.chay{background:var(--good-soft);color:var(--good)}
.ng-vien.het{background:var(--hair-2);color:var(--ink-2)}
.ng-vien.tat{background:var(--hair-2);color:var(--muted)}
.ng-vien.treo{background:var(--brand-soft);color:var(--brand-ink)}
/* Dòng đã thu hồi / hết hạn mờ đi, nhưng KHÔNG ẩn: thu hồi rồi còn phải trả
   lời được "hồi tháng 3 ai vào được những gì". */
.ng-hang{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--hair)}
.ng-hang:last-child{border-bottom:0}
.ng-hang.mo{opacity:.6}
.ng-hang .sop-nut{flex:0 0 auto;padding-top:2px}
.ng-hang .ng-vien{margin-left:6px;vertical-align:1px}
@media (max-width:720px){
  .ng-hang{flex-wrap:wrap}
  .ng-hang .sop-nut{width:100%;justify-content:flex-end}
}
/* Chân thanh bên của KHÁCH NGOÀI: một vạch màu nhận diện bên trái. Nhẹ thôi —
   đủ để họ thấy mình khác, không tới mức trông như cảnh báo lỗi. */
.me-khach{border-left:3px solid var(--brand);padding-left:9px}
.me-khach .t2{line-height:1.45}

/* ===================================================== TIN ZALO NCC */
.zl-hang{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--hair)}
.zl-hang:last-child{border-bottom:0}
.zl-hang.mo{background:var(--alert-soft)}
.zl-hang .sop-nut{flex:0 0 auto;padding-top:2px}
.zl-hang .bc-vien,.zl-hang .bc-nhan-vien{margin-left:6px;vertical-align:1px}
/* Tin gửi ra ngoài phải hiện NGUYÊN VĂN, kể cả khoảng trắng và xuống dòng —
   đó chính là thứ đối tác sẽ đọc. Dùng <pre> chứ không phải <p>. */
.zl-tin{background:var(--panel-2);border:1px solid var(--hair);border-radius:10px;
  padding:12px 14px;margin:10px 0 0;font-size:12.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;max-height:52vh;overflow:auto;
  font-family:inherit}
.zl-nhom-ds{display:flex;flex-wrap:wrap;gap:6px}
.zl-nhom-ds .btn{font-size:12px;padding:5px 10px;margin:0}
@media (max-width:720px){
  .zl-hang{flex-wrap:wrap}
  .zl-hang .sop-nut{width:100%;justify-content:flex-end}
}

/* ============================== BÁO CÁO · MẪU TỆP
   Bảng cấu trúc mẫu hiện NGUYÊN các dòng và cột của tệp thật, kể cả dòng
   trống — người đọc phải thấy đúng cái khung mình sắp điền, không phải một
   bản tóm tắt. */
.bc-mau-sheet{margin-bottom:12px}
.bc-mau-bang td,.bc-mau-bang th{white-space:normal}
.bc-mau-bang tr.dam td{background:var(--panel-2);font-weight:700}
.bc-mau-bang tr.nhom td{background:var(--brand-soft);font-weight:700;
  color:var(--brand-ink);letter-spacing:.02em}
.bc-mau-ghi{font-size:11.5px}
/* Ô XLSX vuông, chữ nhỏ — để nhận ra ngay đây là tệp Excel chứ không phải
   một mục phải nộp. */
.sop-icon.bc-xlsx{font-size:9px;font-weight:700;letter-spacing:.03em;
  background:var(--good-soft);color:var(--good)}
/* Mẫu CHƯA có tệp: ô xám, nền hàng chìm nhẹ. Đủ để đọc lướt cả danh sách là
   thấy ngay còn mấy mẫu chưa ai đưa tệp lên, mà không trông như báo lỗi.
   ⚠️ Tên lớp là `chua`, KHÔNG phải `trong`: `.trong` là lớp TOÀN CỤC của khung
   rỗng (padding 44px, canh giữa chữ). Dùng lại tên đó thì hàng mẫu bị canh
   giữa và cao gấp đôi — đã dính đúng lỗi này lúc dựng. */
.sop-icon.bc-xlsx.chua{background:var(--hair-2);color:var(--muted);
  font-size:15px}
.bc-mau-hang{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--hair)}
.bc-mau-hang:last-child{border-bottom:0}
.bc-mau-hang.chua{background:var(--panel-2)}
.bc-mau-hang .sop-nut{flex:0 0 auto}
@media (max-width:720px){
  .bc-mau-hang{flex-wrap:wrap}
  .bc-mau-hang .sop-nut{width:100%;justify-content:flex-end}
}
.bc-nhom-ten{padding:11px 14px 3px;display:block}