/* ============================================================
   CORY OFFICE — hệ thống giao diện (phỏng theo 1Office)
   Sửa màu / bo góc / khoảng cách: chỉnh ở khối :root bên dưới
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Màu thương hiệu ---
     Toàn bộ lấy từ 1Office, không lấy từ logo Cory. Logo chỉ đặt lên trên.
     #F94949 là màu 1Office dùng cho menu đang chọn, tiêu đề bài viết,
     đầu mục Thông báo hệ thống và chấm chưa đọc.
     Hai biến thể đậm hơn là để chữ đủ tương phản, xem ghi chú bên dưới. */
  --brand:        #F94949;   /* đúng mã 1Office — tô nền, kẻ viền, biểu tượng */
  --brand-ink:    #F94949;   /* chữ cũng để đúng mã này, boss chốt 25/09 */
  --brand-600:    #E83E3E;   /* chỉ dùng khi có chữ trắng đè lên */
  --brand-soft:   #FFF1F1;   /* nền nhạt, lấy từ nút Trả lời của 1Office */
  --orange:       #F0500A;   /* cam 1Office, chỉ dùng cho điểm nhấn nhỏ */
  --orange-soft:  #FEF1EC;

  /* --- Màu phụ đo từ 1Office --- */
  --bia-1:      #C6DCFF;   /* ảnh bìa thẻ hồ sơ, trái sang phải */
  --bia-2:      #CDD5FF;
  --bia-3:      #CDE0FF;
  --sinh-nhat:  #FF2D2D;   /* đầu mục Sinh nhật */
  --sn-nen:     #FFFFE4;
  --tb-cty:     #2B6AD1;   /* đầu mục Thông báo công ty */

  /* --- Màu trạng thái --- */
  --blue:   #2B6AD1;  --blue-soft:   #EDF3FD;
  --green:  #0FA968;  --green-soft:  #EDFBF4;
  --amber:  #C97C00;  --amber-soft:  #FFF6E5;
  --purple: #7C45E6;  --purple-soft: #F3EDFF;
  --pink:   #D6409F;  --pink-soft:   #FDEEF7;   /* Lịch cá nhân (boss 27/09) */
  --cyan:   #0AA5B8;  --cyan-soft:   #E6F8FA;   /* Ngày lễ Việt Nam (boss 27/09) */
  --red:    #E02D2D;  --red-soft:    #FEECEC;

  /* --- Nền & chữ --- */
  --bg:        #F4F2EE;   /* nền be ấm của 1Office, không phải xám lạnh */
  --card:      #FFFFFF;
  --card-2:    #F6F6F6;   /* nền mục đang chọn ở menu 1Office */
  --ink:       #1D232E;
  --ink-2:     #4A5160;
  --muted:     #83868C;
  --line:      #DFDEDA;
  --line-2:    #F0F1F4;
  --rail:      #FFFFFF;

  /* --- Hình khối --- */
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --shadow-1: 0 1px 2px rgba(29,35,46,.06), 0 1px 3px rgba(29,35,46,.04);
  --shadow-2: 0 4px 16px rgba(29,35,46,.10);

  --rail-w: 76px;
  --side-w: 236px;
  --head-h: 52px;

  /* --- Font ---
     Boss chốt 25/09: dùng font của Google.
     Google Drive thật ra chạy "Google Sans Text" nhưng font đó là của riêng
     Google, không phát hành công khai nên không dùng được. Roboto chính là
     font dự phòng trong chính chuỗi font của Google, và là font hệ thống
     của Android, tải miễn phí từ Google Fonts, có đủ dấu tiếng Việt.
     Đổi lại về Inter Tight (giống 1Office) thì sửa đúng hai dòng này. */
  /* --- Phông chữ ---
     Mặc định Roboto. Boss đổi được ngay trong web ở nút "Phông chữ"
     cột trái, lựa chọn lưu trong máy từng người. Bốn bộ bên dưới là
     kết quả tôi đo trực tiếp trên từng hệ thống thật, không đoán. */
  --font-ui:  Roboto, "Inter Tight", "Segoe UI", Arial, sans-serif;
  --font-num: Roboto, "Inter Tight", "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-ink:   #FF8080;
    --brand-soft:  #3A1F20;
    --orange-soft: #3A2318;
    --bia-1: #2A3550; --bia-2: #2E3355; --bia-3: #2A3A57;
    --sinh-nhat: #FF7A7A; --sn-nen: #33301B; --tb-cty: #7FAEFF;
    --blue:   #7FAEFF;  --blue-soft:   #1B2740;
    --green:  #3FD897;  --green-soft:  #14302A;
    --amber:  #F5BE4B;  --amber-soft:  #332818;
    --purple: #B78BFF;  --purple-soft: #271E3D;
    --pink:   #F17BC4;  --pink-soft:   #3A1D30;
    --cyan:   #4FD1DE;  --cyan-soft:   #10313A;
    --red:    #FF7B7B;  --red-soft:    #3A1D1F;
    --bg:      #13161B;
    --card:    #1A1E25;
    --card-2:  #1F242C;
    --ink:     #E9EBEF;
    --ink-2:   #B8BDC7;
    --muted:   #8A909C;
    --line:    #2B313B;
    --line-2:  #232830;
    --rail:    #1A1E25;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 6px 20px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-ink:   #FF8080;
  --brand-soft:  #3A1F20;
  --orange-soft: #3A2318;
  --bia-1: #2A3550; --bia-2: #2E3355; --bia-3: #2A3A57;
  --sinh-nhat: #FF7A7A; --sn-nen: #33301B; --tb-cty: #7FAEFF;
  --blue:   #7FAEFF;  --blue-soft:   #1B2740;
  --green:  #3FD897;  --green-soft:  #14302A;
  --amber:  #F5BE4B;  --amber-soft:  #332818;
  --purple: #B78BFF;  --purple-soft: #271E3D;
  --pink:   #F17BC4;  --pink-soft:   #3A1D30;
  --cyan:   #4FD1DE;  --cyan-soft:   #10313A;
  --red:    #FF7B7B;  --red-soft:    #3A1D1F;
  --bg:      #13161B;
  --card:    #1A1E25;
  --card-2:  #1F242C;
  --ink:     #E9EBEF;
  --ink-2:   #B8BDC7;
  --muted:   #8A909C;
  --line:    #2B313B;
  --line-2:  #232830;
  --rail:    #1A1E25;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 20px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
button { font: inherit; color: inherit; }
a { color: var(--blue); }

/* ====================== KHUNG ỨNG DỤNG ====================== */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--side-w) 1fr;
  min-height: 100dvh;
}

/* --- Cột icon dọc --- */
.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  height: 100dvh;
}
.rail-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand);
  color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
  margin-bottom: 10px;
}
/* Cột trái dựng theo đúng kiểu 1Office: biểu tượng nằm trong một ô bo góc
   riêng, mục đang chọn thì ô đó tô đặc màu thương hiệu và biểu tượng
   chuyển trắng, chữ đỏ nằm dưới ô chứ không tô nền cả hàng. */
.rail-item {
  width: 62px; padding: 5px 2px 6px;
  border: 0; background: transparent; border-radius: var(--r-md);
  display: grid; justify-items: center; gap: 4px;
  color: var(--muted); cursor: pointer;
  font-size: 10.5px; line-height: 1.2; text-align: center;
}
.rail-item svg {
  width: 38px; height: 38px; padding: 9px;
  box-sizing: border-box; border-radius: 12px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
@media (prefers-reduced-motion: reduce) { .rail-item svg { transition: none; } }

/* Mặc định để trắng trơn, không tô nền. */
.rail-item:hover { color: var(--ink-2); }
.rail-item:hover svg { background: var(--line-2); }

/* Mục đang mở: chỉ đổi màu chữ và biểu tượng sang đỏ, KHÔNG tô khối đỏ. */
.rail-item.is-active { color: var(--brand-ink); font-weight: 600; background: transparent; }
.rail-item.is-active svg { background: transparent; color: var(--brand); }
.rail-item.is-active:hover svg { background: var(--brand-soft); }

/* Chỉ lúc bấm chuột xuống mới hiện khối đỏ đặc, thả ra là hết. */
.rail-item:active svg { background: var(--brand); color: #fff; transform: scale(.92); }
.rail-spacer { flex: 1; }

/* --- Menu module --- */
.side {
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 12px 10px 24px;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  height: 100dvh;
  overflow-y: auto;
}
/* Đầu cột menu chỉ còn tên module và nút thu gọn. Logo đã có ở thanh trên
   cùng rồi nên bỏ ở đây, danh sách được đẩy lên sát trên. */
.side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px 6px 8px;
}
.side-head b { font-size: 14px; letter-spacing: -.01em; color: var(--ink); }
.side-head .grow { flex: 1; }
.side-thu {
  width: 28px; height: 28px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent;
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted); flex: none;
}
.side-thu svg { width: 17px; height: 17px; }
.side-thu:hover { background: var(--line-2); color: var(--ink-2); }
.side-thu:active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Thu gọn: cột menu biến mất, nút mở lại nằm cạnh logo trên thanh đầu. */
body.thu-side .app { grid-template-columns: var(--rail-w) 1fr; }
body.thu-side .side { display: none; }
/* Lúc cột menu đang co giãn: cắt phần chữ thò ra ngoài */
.app.side-chay .side { overflow: hidden; min-width: 0; white-space: nowrap; }
@media (max-width: 900px) { body.thu-side .app { grid-template-columns: 1fr; } }
.mo-side { margin-right: 2px; }
@media (max-width: 900px) { .mo-side { display: none; } }

.side-group {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 8px 6px;
}
.side-head + .side-group { padding-top: 2px; }
.side-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 1px;
  border: 0; background: transparent; border-radius: var(--r-md);
  color: var(--ink-2); cursor: pointer; font-size: 13.5px;
}
.side-item svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.side-item:hover { background: var(--line-2); }
.side-item.is-active { background: transparent; color: var(--brand-ink); font-weight: 600; }
.side-item.is-active svg { color: var(--brand-ink); }
.side-item .tag {
  margin-left: auto; font-size: 10px; color: var(--muted);
  background: var(--line-2); padding: 1px 6px; border-radius: 20px;
}
.side-item.is-soon { opacity: .55; }

/* --- Vùng nội dung --- */
.main { min-width: 0; display: flex; flex-direction: column; position: relative; }

.topbar {
  height: var(--head-h);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
}
/* Khi thanh trên cùng chật thì thứ tự nhường chỗ là: đồng hồ nhường nhiều
   nhất, rồi tới ô tìm kiếm, tên màn hình nhường sau cùng — vì tên màn hình
   cho biết mình đang đứng ở đâu. Số shrink nhỏ nghĩa là co ít. */
.topbar h1 {
  font-size: 16px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 0.15 auto; min-width: 0;
}
.topbar .grow { flex: 1 1 0; min-width: 0; }
/* Ô tìm kiếm co lại được. Nếu để min-width cứng thì khi màn hình hẹp nó
   đẩy ô đổi vai tràn ra khỏi mép phải. */
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 6px 12px;
  flex: 0 5 240px; min-width: 0;
  color: var(--muted);
}
.search input {
  border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; width: 100%;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-600); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.blue { background: var(--blue); }
.avatar.green { background: #0FA968; }
.avatar.purple { background: #7C45E6; }
.avatar.amber { background: #C97C00; }

.page { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

/* --- Thanh tab lọc --- */
.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin: -4px -16px 0; padding: 0 16px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 12px; white-space: nowrap;
  color: var(--ink-2); font-size: 13.5px;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 600; }
.tab .n { color: var(--muted); font-weight: 400; }
.tab.is-active .n { color: var(--brand-ink); }

/* --- Thanh công cụ --- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.hint { color: var(--muted); font-size: 12.5px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); border-radius: var(--r-md);
  padding: 6px 11px; cursor: pointer; font-size: 13px;
}
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 500;
}
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* --- Thẻ --- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.card-head h3 { font-size: 14px; }
.card-head .grow { flex: 1; }
.card-body { padding: 14px; }

/* --- Ô số liệu --- */
.kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px;
  display: grid; gap: 6px; box-shadow: var(--shadow-1);
}
.kpi .label {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.kpi .value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
}
.kpi .value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.kpi .foot { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.up { color: #0FA968; font-weight: 600; }
.down { color: var(--red); font-weight: 600; }

/* --- Thanh tiến độ --- */
.bar { height: 6px; border-radius: 20px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 20px; background: var(--brand); }
.bar.blue > i { background: var(--blue); }
.bar.green > i { background: #0FA968; }
.bar.amber > i { background: #C97C00; }
.bar.purple > i { background: #7C45E6; }
.bar.grey > i { background: var(--muted); opacity: .55; }

/* --- Nhãn trạng thái --- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.blue   { background: var(--blue-soft);   color: var(--blue); }
.pill.green  { background: var(--green-soft);  color: var(--green); }
.pill.amber  { background: var(--amber-soft);  color: var(--amber); }
.pill.red    { background: var(--red-soft);    color: var(--red); }
.pill.purple { background: var(--purple-soft); color: var(--purple); }
.pill.grey   { background: var(--line-2);      color: var(--muted); }
.pill.plain::before { display: none; }

/* --- Bảng --- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.grid {
  width: 100%; border-collapse: collapse;
  background: var(--card); font-size: 13.5px;
  min-width: 720px;
}
table.grid thead th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--card-2); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.grid td {
  padding: 11px 12px; border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
table.grid tbody tr:hover { background: var(--card-2); }
table.grid tbody tr:last-child td { border-bottom: 0; }
.cell-main { font-weight: 500; }
.cell-sub { color: var(--muted); font-size: 12px; }
.num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
th.num { text-align: right; }
.who { display: flex; align-items: center; gap: 7px; white-space: nowrap; }

/* --- Biểu đồ cột --- */
.chart {
  display: grid; grid-auto-flow: column; align-items: end;
  gap: 8px; height: 150px; padding-top: 6px;
}
.chart .col {
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 6px; justify-items: center; height: 100%; min-width: 0;
}
.chart .stack {
  width: 68%; min-width: 10px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.chart .fill {
  width: 100%; border-radius: 4px 4px 0 0; background: var(--brand);
  min-height: 2px;
}
.chart .col.dim .fill { background: var(--line); }
.chart .col.now .fill { background: var(--brand); }
.chart .cap { font-size: 11px; color: var(--muted); }
.chart .val {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--ink-2);
}

/* --- Danh sách tỉ lệ --- */
.rows { display: grid; gap: 12px; }
.row-item { display: grid; gap: 6px; }
.row-item .top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.row-item .top .grow { flex: 1; }
.row-item .top b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --- Lịch theo khung giờ --- */
.slots { display: grid; gap: 10px; }
.slot {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  align-items: stretch;
}
.slot .time {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--muted); padding-top: 12px;
  border-right: 1px solid var(--line-2);
}
.booking {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-md); background: var(--card);
  padding: 10px 12px; display: grid; gap: 6px;
}
.booking.done  { border-left-color: #0FA968; }
.booking.wait  { border-left-color: var(--green); }   /* Đã cọc: xanh lá (boss 27/09) */
.booking.late  { border-left-color: var(--purple); }  /* Chưa thu cọc: tím (boss 27/09) */
.booking .b-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.booking .b-top b { font-size: 13.5px; }
.booking .b-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; }
.booking .crew { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- Dải thông báo --- */
.notice {
  display: flex; align-items: center; gap: 10px;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 12.5px;
}
.notice svg { width: 16px; height: 16px; flex: none; }
.notice b { font-weight: 600; }

.empty {
  display: grid; gap: 8px; justify-items: center; text-align: center;
  padding: 56px 20px; color: var(--muted);
}
.empty h3 { color: var(--ink); font-size: 15px; }
.empty p { margin: 0; max-width: 46ch; font-size: 13px; }

/* minmax(0, …) là bắt buộc. Để "1.6fr 1fr" trơn thì cột lấy bề rộng tối thiểu
   của nội dung bên trong (ví dụ bảng có min-width 640px) rồi đẩy cả khối
   tràn ra khỏi màn hình. */
.split   { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.split-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .split-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .split   { grid-template-columns: minmax(0, 1fr); }
  .split-3 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Ô số liệu có icon tròn (kiểu dashboard 1Office) --- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 14px;
  display: flex; align-items: center; gap: 14px;
}
.tile .ring {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.tile .ring svg { width: 22px; height: 22px; }
.tile .txt { min-width: 0; }
.tile .txt span { display: block; font-size: 12.5px; color: var(--muted); }
.tile .txt b {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.tile.blue   .ring { background: var(--blue-soft); color: var(--blue); }
.tile.blue   .txt b { color: var(--blue); }
.tile.green  .ring { background: var(--green-soft); color: var(--green); }
.tile.green  .txt b { color: var(--green); }
.tile.amber  .ring { background: var(--amber-soft); color: var(--amber); }
.tile.amber  .txt b { color: var(--amber); }
.tile.red    .ring { background: var(--red-soft); color: var(--red); }
.tile.red    .txt b { color: var(--red); }
.tile.purple .ring { background: var(--purple-soft); color: var(--purple); }
.tile.purple .txt b { color: var(--purple); }

/* --- Chuông và bảng thông báo --- */
.bell { position: relative; }
.bell .dot {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--card);
}
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  flex: none; position: relative;
}
.icon-btn:hover { background: var(--line-2); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.9; }
.icon-btn.is-open { background: var(--brand-soft); color: var(--brand-ink); }
.icon-btn:active { background: var(--brand); color: #fff; }
.icon-btn.nho { width: 26px; height: 26px; }
.icon-btn.nho svg { width: 14px; height: 14px; }

.noti-panel {
  position: absolute; z-index: 60; right: 12px; top: calc(var(--head-h) + 10px);
  width: min(380px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; max-height: min(520px, 76dvh);
}
.noti-tabs {
  display: flex; gap: 0; padding: 6px 6px 0;
  border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none;
}
.noti-tabs::-webkit-scrollbar { display: none; }
/* Khung cao tối đa có hạn: chỉ danh sách co lại và cuộn, hàng tab và chân khung giữ nguyên cỡ */
.noti-tabs, .noti-foot { flex: none; }
.noti-list { overflow-y: auto; padding: 4px 0; flex: 1; min-height: 0; }
.noti-day {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-align: center; padding: 8px 0 4px;
}
.noti {
  display: grid; grid-template-columns: 32px 1fr 10px; gap: 10px;
  padding: 10px 12px; position: relative;
}
.noti:hover { background: var(--card-2); }
.noti .body { min-width: 0; font-size: 13px; line-height: 1.5; }
.noti .body b { font-weight: 600; }
.noti .quote { color: var(--ink-2); }
.noti .meta {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
}
.noti .reply {
  margin-top: 6px; font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-2); cursor: pointer;
}
.noti .reply:hover { border-color: var(--brand); color: var(--brand-ink); }
.noti .unread {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); align-self: center;
}
.noti-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--muted);
}
.noti-foot .grow { flex: 1; }
.noti-foot button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-2); font-size: 12.5px; padding: 0;
}
.noti-foot button:hover { color: var(--brand-ink); }
.mention { color: var(--brand-ink); font-weight: 600; }

/* --- Sơ đồ quy trình --- */
.flow { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.step .mark { display: grid; justify-items: center; gap: 0; }
.step .num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 600;
  background: var(--line-2); color: var(--muted);
  border: 1px solid var(--line);
}
.step .line { width: 2px; flex: 1; background: var(--line); min-height: 18px; }
.step:last-child .line { background: transparent; }
.step.done .num { background: var(--green-soft); color: var(--green); border-color: transparent; }
.step.done .line { background: color-mix(in srgb, var(--green) 35%, transparent); }
.step.now .num { background: var(--brand-600); color: #fff; border-color: transparent; }
.step .box {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 10px; background: var(--card);
  display: grid; gap: 4px;
}
.step.now .box { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.step .box b { font-size: 13.5px; }
.step .box .who-role { font-size: 12.5px; color: var(--muted); }

/* ====================== ĐỒNG HỒ HAI MÚI GIỜ ====================== */

.dong-ho {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--muted);
  padding: 4px 10px; border-radius: 20px;
  background: var(--card-2); border: 1px solid var(--line);
  white-space: nowrap;
  flex: 0 12 auto; min-width: 0; overflow: hidden;
}
.dong-ho .noi-gio.phu { min-width: 0; overflow: hidden; }
.dong-ho .noi-gio.phu span { overflow: hidden; text-overflow: ellipsis; }
.dong-ho .noi-gio { display: flex; align-items: baseline; gap: 5px; }
.dong-ho .noi-gio b {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--ink); letter-spacing: -.01em;
}
.dong-ho .vach { width: 1px; height: 16px; background: var(--line); }
.dong-ho .dang-lam { color: var(--brand-ink); font-weight: 500; }

@media (max-width: 1280px) { .dong-ho .noi-gio.phu { display: none; } }
@media (max-width: 1140px) { .dong-ho { display: none; } }

/* Dòng tình hình studio ngay đầu màn Sáng nay */
.bang-gio {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.the-gio {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; box-shadow: var(--shadow-1); display: grid; gap: 4px;
}
.the-gio .noi { font-size: 12.5px; color: var(--muted); }
.the-gio .gio {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.the-gio .ngay { font-size: 12.5px; color: var(--muted); }
.the-gio.chinh { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ====================== HỘP THOẠI & BIỂU MẪU ====================== */

.lop-phu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 18, 24, .48);
  display: grid; place-items: center;
  /* Khai cột rõ ràng: không có dòng này thì hộp nhiều chữ nở theo chữ, tràn ngang trên điện thoại */
  grid-template-columns: minmax(0, 1fr);
  padding: 16px;
  overflow-y: auto;
}
.hop {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  width: min(560px, 100%); max-height: 90dvh;
  display: flex; flex-direction: column;
}
.hop.to { width: min(920px, 100%); }
.hop-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
}
.hop-dau h3 { font-size: 15px; }
.hop-dau .grow { flex: 1; }
.hop-than { padding: 16px; overflow-y: auto; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.hop-chan {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line-2);
}
.hop-chan .grow { flex: 1; }

.o { display: grid; gap: 5px; }
.o > label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.o > label .sao-do { color: var(--brand-ink); }
.o input, .o select, .o textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 11px;
  outline: none;
}
.o input:focus, .o select:focus, .o textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.o textarea { min-height: 84px; resize: vertical; }
.o .loi { font-size: 12px; color: var(--red); }
.o-doi { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
/* Ô chọn gõ để tìm (biểu mẫu thêm mới) */
.o-tim { position: relative; }
.o .o-tim-o { padding-right: 34px; cursor: pointer; text-overflow: ellipsis; }
.o .o-tim-o:focus { cursor: text; }
.o-tim-mui { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; cursor: pointer; }
.o-tim-mui svg { width: 16px; height: 16px; }
.o-tim-ds { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 232px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; }
.o-tim-ds.len { top: auto; bottom: calc(100% + 4px); }
.o-tim-1 { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.o-tim-1.sang { background: var(--card-2); }
.o-tim-1.chon { color: var(--brand-ink); font-weight: 600; }
.o-tim-trong { padding: 10px; font-size: 13px; color: var(--muted); }

/* --- Ô sửa nhanh ngay trên bảng --- */
.sua-nhanh {
  border: 1px solid transparent; background: transparent;
  border-radius: 20px; padding: 0; cursor: pointer; font: inherit;
}
.sua-nhanh:hover { box-shadow: 0 0 0 2px var(--line); }

/* --- Dòng bấm được --- */
tr.bam-duoc { cursor: pointer; }

/* --- Thông báo nhỏ khi lưu xong --- */
.banh-mi {
  position: fixed; z-index: 120; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--card);
  padding: 10px 16px; border-radius: 20px;
  font-size: 13.5px; box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
}
.banh-mi svg { width: 16px; height: 16px; }
.banh-mi.loi { background: var(--red); color: #fff; }

/* --- Khu thảo luận trong màn chi tiết --- */
.thao-luan { display: grid; gap: 12px; align-content: start; }
.binh-luan { display: grid; grid-template-columns: 28px 1fr; gap: 9px; }
.binh-luan .noi {
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 9px 11px;
  font-size: 13.5px; min-width: 0;
}
.binh-luan .noi .ten { font-weight: 600; font-size: 13px; }
.binh-luan .noi .luc { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.soan {
  display: grid; gap: 8px;
  border-top: 1px solid var(--line-2); padding-top: 12px;
}
.soan .hang-nut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-nguoi {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 20px; padding: 3px 10px 3px 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; cursor: pointer; color: var(--ink-2);
}
.chip-nguoi:hover { border-color: var(--brand); color: var(--brand-ink); }

/* --- Cặp nhãn - giá trị trong màn chi tiết --- */
.cap { display: grid; gap: 3px; }
.cap .nhan { font-size: 12px; color: var(--muted); }
.cap .gia-tri { font-size: 13.5px; }
.luoi-cap { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

@media (max-width: 720px) {
  .o-doi, .luoi-cap { grid-template-columns: 1fr; }
  .hop.to { width: 100%; }
}

/* --- Thanh dưới cho điện thoại --- */
.mobilebar { display: none; }

/* ====================== ĐIỆN THOẠI / MÁY TÍNH BẢNG ====================== */

@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .side {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0;
    width: 260px; height: 100dvh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-2);
  }
  body.nav-open .side { transform: none; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 50;
    background: rgba(15,18,24,.45);
  }
  .page { padding: 14px 16px 84px; }
  .tabs { margin: -4px -16px 0; padding: 0 16px; }
  .kpi .value { font-size: 21px; }
  .split, .split-3 { grid-template-columns: minmax(0, 1fr); }

  .mobilebar {
    display: flex; position: fixed; z-index: 40;
    left: 0; right: 0; bottom: 0;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobilebar button {
    flex: 1; border: 0; background: transparent; cursor: pointer;
    display: grid; justify-items: center; gap: 3px;
    font-size: 10.5px; color: var(--muted); padding: 4px 2px;
  }
  .mobilebar button svg { width: 20px; height: 20px; }
  .mobilebar button.is-active { color: var(--brand-ink); }
}

.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--card); cursor: pointer;
  }
  .menu-btn svg { width: 17px; height: 17px; }
  .search { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   BẢNG LƯƠNG THÁNG & THU NHẬP CỦA TÔI
   ============================================================ */

.ghi-chu{ font-size:13px; color:var(--muted); margin:10px 2px 0; }
.sub{ font-size:12px; color:var(--muted); margin-top:2px; }
td.num.manh{ font-weight:700; color:var(--ink); }
td.num.do,.k.do b{ color:var(--red); }
tr.click{ cursor:pointer; }
tr.click:hover{ background:var(--brand-soft); }
.ma{ font-family:var(--font-num); font-size:12px; color:var(--muted); }

.nhan-o{ font-size:13px; color:var(--muted); align-self:center; }
.o-chon{
  font:inherit; font-size:14px; padding:7px 10px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--card,#fff); color:var(--ink); cursor:pointer;
}

.notice.amber{ background:#FFF6E5; border-color:#F3D9A4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notice.amber{ background:#3A2E12; border-color:#5A4718; }
}
:root[data-theme="dark"] .notice.amber{ background:#3A2E12; border-color:#5A4718; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .notice.amber{ background:#FFF6E5; border-color:#F3D9A4; } }

/* --- Thẻ thu nhập --- */
.the-thunhap{
  background:var(--card,#fff); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px; margin-top:12px;
}
.tn-dau{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.tn-ten{ font-size:19px; font-weight:700; }
.tn-vai{ font-size:13px; color:var(--muted); margin-top:2px; }
.tn-tong{ text-align:right; }
.tn-tong span{ display:block; font-size:12px; color:var(--muted); }
.tn-tong b{ font-family:var(--font-num); font-size:26px; color: var(--brand-ink); }

.vois{ display:grid; gap:10px; margin-top:16px; }
.voi{
  display:grid; grid-template-columns:150px 120px 1fr; align-items:center;
  gap:10px; padding:9px 0; border-top:1px solid var(--line);
}
.voi-dau{ font-size:14px; }
.voi-dau b{
  display:inline-grid; place-items:center; width:20px; height:20px; margin-right:7px;
  border-radius:50%; background:var(--brand-soft); color: var(--brand-ink);
  font-size:11px; font-weight:700; vertical-align:middle;
}
.voi-so{ font-family:var(--font-num); font-weight:600; text-align:right; }
.voi-thanh{ height:7px; border-radius:4px; background:var(--line); overflow:hidden; }
.voi-thanh i{ display:block; height:100%; background:var(--brand); border-radius:4px; }
.voi-ghi{ grid-column:1/-1; font-size:12px; color:var(--muted); margin-top:-4px; }
@media (max-width:640px){
  .voi{ grid-template-columns:1fr auto; }
  .voi-thanh{ grid-column:1/-1; }
}

.tn-tru{
  margin-top:14px; padding:9px 12px; border-radius:var(--r-md);
  background:#FDECEC; color:var(--red); font-size:13px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tn-tru{ background:#3A1A1A; }
}
:root[data-theme="dark"] .tn-tru{ background:#3A1A1A; }
.tn-goiy{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.tn-goiy-dau{ font-weight:600; margin-bottom:7px; }
.tn-goiy ul{ margin:0; padding-left:18px; }
.tn-goiy li{ font-size:14px; line-height:1.7; }

/* --- Hộp chi tiết lương --- */
.ct-tong{ margin-bottom:14px; }
.ct-tong div{ display:flex; justify-content:space-between; align-items:baseline; }
.ct-tong span{ font-size:13px; color:var(--muted); }
.ct-tong b{ font-family:var(--font-num); font-size:24px; color: var(--brand-ink); }

.ct-khoan{ display:grid; gap:1px; background:var(--line); border-radius:var(--r-md); overflow:hidden; }
.ct-khoan .k{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:9px 12px; background:var(--card,#fff);
}
.ct-khoan .k span{ font-size:14px; }
.ct-khoan .k b{ font-family:var(--font-num); text-align:right; }
.ct-khoan .k i{ grid-column:1/-1; font-size:12px; color:var(--muted); font-style:normal; }

.ct-muc{ font-weight:600; margin:18px 0 8px; }
.ct-ct{
  padding:11px 13px; border-radius:var(--r-md); background:var(--brand-soft);
  font-size:14px; line-height:1.6;
}
.ct-canh{
  display:flex; gap:8px; align-items:flex-start; margin-top:16px;
  padding:10px 12px; border-radius:var(--r-md); background:#FFF6E5;
  font-size:13px; color:var(--amber);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct-canh{ background:#3A2E12; }
}
:root[data-theme="dark"] .ct-canh{ background:#3A2E12; }
.ct-canh svg{ flex:none; width:16px; height:16px; }

table.grid.nho th,table.grid.nho td{ padding:7px 9px; font-size:13px; }
small.nhan-nho{font-size:11px;color: var(--brand-ink);font-weight:600;}

/* ============================================================
   BẢNG ĐIỀU KHIỂN — việc đang trễ
   ============================================================ */

.cb-khoi{
  background:var(--card,#fff); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px; margin-bottom:18px;
}
.cb-khoi.trong{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-color:#BFE3CE; background:#F1FAF4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cb-khoi.trong{ background:#16301F; border-color:#255437; }
}
:root[data-theme="dark"] .cb-khoi.trong{ background:#16301F; border-color:#255437; }
.cb-khoi.trong svg{ width:20px; height:20px; color:var(--green); flex:none; }
.cb-khoi.trong span{ color:var(--muted); font-size:14px; }

.cb-dau{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--red);
  margin-bottom:10px;
}
.cb-dau svg{ width:16px; height:16px; }
.cb-dem{ margin-left:auto; font-weight:500; color:var(--muted); letter-spacing:0; }
.cb-dau2{
  font-size:12px; font-weight:700; letter-spacing:.6px;
  color:var(--muted); margin:20px 2px 8px;
}

.cb{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; margin-bottom:6px; text-align:left;
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--bg,#FAFAFB); border:1px solid var(--line);
  border-radius:var(--r-md); cursor:pointer;
}
.cb:hover{ border-color:var(--brand); background:var(--brand-soft); }
.cb-cham{ width:8px; height:8px; border-radius:50%; flex:none; }
.cb.do .cb-cham{ background:var(--red); }
.cb.vang .cb-cham{ background:var(--amber); }
.cb-noi{ flex:1; }
.cb.do .cb-noi{ font-weight:600; }
.cb-phu{ font-size:12px; color:var(--muted); white-space:nowrap; }
.cb-mui{ display:flex; color:var(--muted); }
.cb-mui svg{ width:15px; height:15px; }
@media (max-width:560px){
  .cb{ flex-wrap:wrap; }
  .cb-phu{ width:100%; padding-left:18px; }
}
b.do{ color:var(--red); }

/* --- Nhãn dữ liệu mẫu trên thanh trên cùng --- */
.nhan-mau{
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.3px;
  padding:3px 8px; margin-left:10px; border-radius:99px; cursor:pointer;
  background:var(--brand-soft); color: var(--brand-ink); border:1px solid transparent;
}
.nhan-mau:hover{ border-color:var(--brand); }
@media (max-width:640px){ .nhan-mau{ display:none; } }

.canh-nho{ font-size:12px; color:var(--red); align-self:center; }

/* ============================================================
   BẢNG TIN — bố cục 3 cột giống 1Office
   Cột trái: hồ sơ + menu nội bộ + thông báo hệ thống
   Cột giữa: dòng bài viết
   Cột phải: sinh nhật, thông báo công ty, nhóm
   ============================================================ */

.btn.chinh { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 500; }
.btn.chinh:hover { background: #B83603; border-color: #B83603; color: #fff; }
.btn.nho { padding: 4px 9px; font-size: 12.5px; }
.avatar.to { width: 64px; height: 64px; font-size: 22px; }
.avatar.brand { background: var(--brand-600); }
.avatar.grey { background: var(--muted); }

.bt-lay {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 292px;
  gap: 14px; align-items: start;
}
.bt-lay.hai-cot { grid-template-columns: 264px minmax(0, 1fr); }

.bt-trai, .bt-phai { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 8px; }
.bt-giua { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* --- Thẻ hồ sơ --- */
.bt-ho-so {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 14px 16px; text-align: center;
}
.bt-bia {
  align-self: stretch; height: 74px; margin: 0 -14px 0;
  background: linear-gradient(100deg, var(--bia-1) 0%, var(--bia-2) 55%, var(--bia-3) 100%);
}
.bt-ho-so .avatar.to { margin-top: -32px; border: 3px solid var(--card); }
.bt-ho-so b { margin-top: 8px; font-size: 15px; }
.bt-ho-so .chuc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.bt-ho-so .phong { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* --- Menu nội bộ --- */
.bt-menu {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.bt-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: var(--r-md);
  color: var(--ink-2); font-size: 13.5px;
}
.bt-menu button svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.bt-menu button:hover { background: var(--card-2); color: var(--ink); }
.bt-menu button.is-active { background: transparent; color: var(--brand-ink); font-weight: 600; }
.bt-menu button.is-active svg { color: var(--brand-ink); }

/* --- Thẻ chung cột trái / phải --- */
.bt-the {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.bt-the-dau {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--tb-cty);
}
.bt-the-dau svg { width: 17px; height: 17px; }
.bt-the-dau.do { color: var(--brand-ink); }
.bt-the-dau.tiec {
  color: var(--sinh-nhat); border-bottom: 0;
  background: linear-gradient(90deg, var(--sn-nen), transparent);
}
.bt-the-than { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.bt-trong { padding: 10px 8px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* --- Dòng thông báo hệ thống --- */
.bt-ht, .bt-tbct, .bt-nhom {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 9px 8px; border-radius: var(--r-md);
}
.bt-ht:hover, .bt-tbct:hover, .bt-nhom:hover { background: var(--card-2); }
.bt-ht .cham { color: var(--muted); flex: none; margin-top: 1px; }
.bt-ht .cham svg { width: 16px; height: 16px; }
.bt-ht .chu, .bt-tbct .chu, .bt-nhom .chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-ht b, .bt-tbct b, .bt-nhom b {
  font-size: 12.8px; font-weight: 500; color: var(--ink); line-height: 1.35;
}
.bt-ht i, .bt-tbct i, .bt-nhom i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.bt-tbct b { color: var(--brand-ink); }

/* --- Sinh nhật --- */
.bt-sn-toi {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; border-top: 1px solid var(--line-2); margin-top: 2px;
}
.bt-sn-toi > span { font-size: 12.5px; color: var(--ink-2); }
.mat-nguoi { display: flex; margin-left: auto; }
.mat-nguoi .avatar { margin-left: -7px; border: 2px solid var(--card); }
.mat-nguoi .avatar:first-child { margin-left: 0; }
.bt-mui {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  display: grid; place-items: center; padding: 2px; border-radius: 50%;
}
.bt-mui:hover { background: var(--card-2); color: var(--ink); }
.bt-mui svg { width: 16px; height: 16px; }

.bt-nhom-anh {
  width: 34px; height: 34px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
}
.bt-nhom-anh svg { width: 18px; height: 18px; }
.bt-nhom-anh.vao { background: var(--green-soft); color: var(--green); }

/* --- Ô soạn bài --- */
.bt-soan {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 10px 12px;
}
/* Dòng mời viết — bấm vào mở hộp "Tạo bài viết" như Facebook */
.bt-mo-soan {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  border: 0; background: var(--card-2); border-radius: 999px;
  padding: 10px 16px; font: inherit; font-size: 14px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt-mo-soan:hover { background: var(--line-2); }
.bt-mo-soan.dang-do { color: var(--ink-2); font-style: italic; }

/* --- Bài viết --- */
.bt-bai {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 13px 15px 4px;
}
.bt-bai.sang { border-color: var(--brand); }
.bt-dau { display: flex; align-items: flex-start; gap: 10px; }
.bt-dau .chu { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bt-dau .chu b { font-size: 13.5px; }
.bt-dau .chu i { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.bt-dau .chu .khi { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.bt-dau .chu .khi svg { width: 13px; height: 13px; }
/* Cao bằng nút tích bên cạnh để hai icon nằm cùng một đường giữa */
.bt-ghim { color: var(--amber); display: grid; place-items: center; height: 36px; }
.bt-ghim svg { width: 16px; height: 16px; }

.bt-than { padding: 10px 0 2px; }
.bt-tieu-de {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--brand-ink);
  margin-bottom: 8px; line-height: 1.35;
}
.bt-tieu-de svg { width: 17px; height: 17px; flex: none; }
.bt-than p { font-size: 13.6px; line-height: 1.62; color: var(--ink-2); margin-bottom: 8px; }
.bt-than p:last-of-type { margin-bottom: 0; }
.bt-than b { color: var(--ink); font-weight: 600; }
.bt-them {
  border: 0; background: transparent; cursor: pointer; padding: 2px 0;
  color: var(--brand-ink); font-size: 13px; font-weight: 500;
}
.bt-them:hover { text-decoration: underline; }

.bt-dem {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 8px; font-size: 12.5px; color: var(--muted);
}
.bt-dem span, .bt-dem button { display: flex; align-items: center; gap: 5px; }
.bt-dem svg { width: 14px; height: 14px; color: var(--blue); }
.bt-dem button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: inherit; }
.bt-dem button:hover { color: var(--ink); text-decoration: underline; }

.bt-nut {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.bt-nut button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 6px; color: var(--ink-2); font-size: 13px; font-weight: 500;
}
.bt-nut button:hover { background: var(--card-2); }
.bt-nut button svg { width: 16px; height: 16px; }
.bt-nut button.da { color: var(--blue); }

.bt-o-bl { display: flex; align-items: center; gap: 9px; padding: 11px 0; }
.bt-o-bl input {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--card-2);
  border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13.2px;
  color: var(--ink); outline: none;
}
.bt-o-bl input:focus { border-color: var(--brand); background: var(--card); }
.bt-o-bl .icon-btn svg { color: var(--brand-ink); }

.bt-ds-bl { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 13px; }
.bt-bl { display: flex; gap: 9px; align-items: flex-start; }
.bt-bl .chu { flex: 1; min-width: 0; }
.bt-bl .chu b { font-size: 13px; }
.bt-bl .chu i { font-style: normal; font-size: 11.5px; color: var(--muted); display: block; }
.bt-bl .chu p { font-size: 13.2px; line-height: 1.55; color: var(--ink-2); margin-top: 3px; }
.bt-bl-nut { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.bt-bl-nut button {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.bt-bl-nut button:hover { color: var(--ink); }
.bt-bl-nut button.da { color: var(--blue); }
.bt-bl-nut .so { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.bt-bl-nut .so svg { width: 13px; height: 13px; color: var(--blue); }
.bt-bl .khi { font-size: 11.5px; color: var(--muted); flex: none; }

/* --- Danh sách nhóm ở màn Nhóm, thảo luận --- */
.bt-ds-nhom { display: flex; flex-direction: column; }
.bt-nhom-to {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.bt-nhom-to:last-child { border-bottom: 0; }
.bt-nhom-chu { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bt-nhom-chu b { font-size: 13.5px; }
.bt-nhom-chu span { font-size: 12px; color: var(--muted); }

/* --- Sơ đồ tổ chức --- */
.sodo { padding-bottom: 16px; }
.sodo-dinh { display: flex; justify-content: center; padding: 18px 0 0; }
.sodo-noi { width: 1px; height: 22px; background: var(--line); margin: 0 auto; }
.sodo-the {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; background: var(--card-2); min-width: 158px; text-align: center;
}
.sodo-the b { font-size: 13.5px; }
.sodo-the .chuc { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.sodo-the.la-sep { background: var(--brand-soft); border-color: var(--brand); }
.sodo-the.la-toi { border-color: var(--blue); }
.sodo-khoi { padding: 0 16px; margin-top: 16px; }
.sodo-ten-khoi {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding-bottom: 9px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px;
}
.sodo-ten-khoi span { font-weight: 400; color: var(--muted); font-size: 12px; }
.sodo-hang { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Ô đổi vai trên thanh trên cùng --- */
.doi-vai {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px 3px 3px; background: var(--card);
  flex: none;
}
.doi-vai select {
  border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 12.5px;
  max-width: 132px; cursor: pointer;
}

/* --- Thu hẹp dần --- */
@media (max-width: 1240px) {
  .bt-lay { grid-template-columns: 240px minmax(0, 1fr); }
  .bt-phai { display: none; }
}
@media (max-width: 900px) {
  .bt-lay, .bt-lay.hai-cot { grid-template-columns: minmax(0, 1fr); }
  .bt-trai { position: static; }
  .bt-ho-so, .bt-trai .bt-the { display: none; }
  .bt-menu { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .bt-menu button { white-space: nowrap; }
  .doi-vai select { max-width: 92px; }
}

/* Thanh trên cùng trên máy hẹp: ba nút chuông, chat, lối tắt phải nằm vừa
   cùng ô tìm kiếm và ô đổi vai, không được đẩy tràn ra ngoài màn hình. */
@media (max-width: 760px) {
  .topbar .search { min-width: 0; flex: 1; }
  .hang-icon { gap: 0; }
  .icon-btn { width: 34px; }
}
@media (max-width: 560px) {
  .topbar .search { display: none; }
  .doi-vai select { max-width: 74px; }
}
@media (max-width: 420px) {
  .doi-vai select { max-width: 0; padding: 0; opacity: 0; }
}
.the-toi { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.the-toi i { font-style: normal; font-size: 12px; color: var(--muted); }

/* Ở Bảng tin không có thanh bên — cột menu nằm trong chính trang */
body.an-side .app { grid-template-columns: var(--rail-w) 1fr; }
@media (max-width: 900px) { body.an-side .app { grid-template-columns: 1fr; } }
body.an-side .menu-btn { display: none; }

/* Cỡ mặc định cho mọi biểu tượng — tránh trường hợp một icon nở to
   ra vì khối chứa nó chưa được đặt kích thước (ô tìm kiếm là một ví dụ).
   Mọi quy tắc dạng .lop svg ở trên vẫn thắng quy tắc này. */
svg { width: 16px; height: 16px; flex: none; }
.search svg { width: 17px; height: 17px; color: var(--muted); }

/* --- Logo Cory --- */
.rail-logo.co-anh { background: #fff; border: 1px solid var(--line); padding: 3px; }
.rail-logo.co-anh img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-head .rail-logo.co-anh { padding: 2px; }

/* ============================================================
   NHÃN TRẠNG THÁI TRONG BẢNG THÔNG BÁO
   Đỏ = chưa xử lý · Xanh = đã xử lý (đúng cách 1Office phân màu)
   ============================================================ */
.noti { position: relative; cursor: pointer; }
.noti:hover { background: var(--card-2); }
.noti.chua-doc { background: var(--brand-soft); }
.noti.chua-doc:hover { background: #FFE8E8; }

.nhan-hang { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.nhan-tt {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.nhan-tt.chua { background: var(--red-soft);   color: var(--red); }
.nhan-tt.xong { background: var(--green-soft); color: var(--green); }
.nhan-tt.moi  { background: var(--brand-soft); color: var(--brand-ink); }
.nhan-tt.cu   { background: var(--card-2);     color: var(--muted); }

.noti .reply.xong { border-color: var(--green); color: var(--green); }
.noti-foot .meta-nho { font-size: 12px; color: var(--muted); }

/* Số chưa đọc trên chuông và trên chat.
   Trước đây badge 20px nằm giữa nút 32px nên nó đè kín cái chuông 18px,
   nhìn vào chỉ thấy con số đỏ. Giờ nút 36px, biểu tượng 20px, badge
   17px và đẩy hẳn ra góc, chỉ chạm nhẹ vào mép trên bên phải. */
.dem-chuong {
  position: absolute; top: -1px; right: -1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--brand-600); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
  border: 2px solid var(--card); box-sizing: border-box;
  pointer-events: none;
}
.dem-chuong.tinh { position: static; margin-left: auto; }
.icon-btn.co-dem { position: relative; overflow: visible; }
.hang-icon { display: flex; align-items: center; gap: 2px; flex: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .noti.chua-doc:hover { background: #4A2628; }
}
:root[data-theme="dark"] .noti.chua-doc:hover { background: #4A2628; }

/* 4 tab phải vừa một hàng, không tràn ngang */
.noti-tabs .tab { padding: 8px 7px; font-size: 12.5px; }
.noti-tabs .tab .n { font-size: 11px; }

/* ============================================================
   BẢNG ỨNG DỤNG — nút lưới góc trái trên, mở ra một ngăn kéo
   chia nhóm như 1Office
   ============================================================ */
.icon-btn.luoi svg { width: 19px; height: 19px; }

.app-lop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(29, 35, 46, .28);
}
/* Trượt ra, trượt vào (boss 27/09) */
@keyframes app-vao { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes lop-vao { from { opacity: 0; } to { opacity: 1; } }
.app-panel.vao { animation: app-vao .26s cubic-bezier(.2,.8,.2,1); }
.app-lop.vao { animation: lop-vao .26s ease; }
.app-panel.ra { transform: translateX(-100%); transition: transform .19s ease-in; }
.app-lop.ra { opacity: 0; transition: opacity .19s ease-in; }
@media (prefers-reduced-motion: reduce) { .app-panel.vao, .app-lop.vao { animation: none; } }
.app-panel {
  position: fixed; z-index: 71; left: 0; top: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--card); border-right: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
}
.app-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.app-dau b { font-size: 14px; letter-spacing: -.01em; }
.app-dau .grow { flex: 1; }

.app-tim {
  display: flex; align-items: center; gap: 8px; margin: 12px 14px 4px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 13px; color: var(--muted);
}
.app-tim input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 13.5px;
}

.app-than { overflow-y: auto; padding: 8px 14px 24px; }
.app-nhom {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-2); padding: 18px 2px 10px;
}
.app-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.app-o {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 2px; border-radius: var(--r-lg);
}
.app-o:hover { background: var(--card-2); }

/* Ô ứng dụng dựng theo đúng độ đậm của 1Office: ô to hơn, biểu tượng to
   hơn, nét dày hơn và màu bão hoà hẳn. Bản trước nhạt quá nên nhìn mờ. */
.app-icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; flex: none;
}
.app-icon svg { width: 25px; height: 25px; }
.app-ten {
  font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--ink-2);
}
.app-o.is-mo .app-icon { opacity: .5; }
.app-o.is-mo .app-ten  { color: var(--muted); }

/* Màu ô ứng dụng ĐO TỪ ẢNH CHỤP 1OFFICE ngày 25/09/2026.
   Điểm mấu chốt: 1Office để nền RẤT NHẠT và tô ĐẶC cả hình biểu tượng
   bằng màu tươi. Bản trước tôi làm ngược — nền đậm, hình nét mảnh —
   nên nhìn mờ và không giống. */
.app-icon svg { fill: currentColor; stroke: none; }
.app-icon.blue   { background: #EFF5FF; color: #2F7DFF; }
.app-icon.green  { background: #EDFBF4; color: #13CE74; }
.app-icon.amber  { background: #FFF9ED; color: #FFB014; }
.app-icon.purple { background: #F6F3FF; color: #9A5CFF; }
.app-icon.red    { background: #FEEEEE; color: #FF2D2D; }
.app-icon.brand  { background: #FEF1EC; color: #F0500A; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-icon.blue   { background: #17233A; color: #6FA6FF; }
  :root:not([data-theme="light"]) .app-icon.green  { background: #132B24; color: #35C98A; }
  :root:not([data-theme="light"]) .app-icon.amber  { background: #302614; color: #E5A536; }
  :root:not([data-theme="light"]) .app-icon.purple { background: #231B36; color: #A981F5; }
  :root:not([data-theme="light"]) .app-icon.red    { background: #34191B; color: #F26B6B; }
  :root:not([data-theme="light"]) .app-icon.brand  { background: #331D14; color: #E8712F; }
}
:root[data-theme="dark"] .app-icon.blue   { background: #17233A; color: #6FA6FF; }
:root[data-theme="dark"] .app-icon.green  { background: #132B24; color: #35C98A; }
:root[data-theme="dark"] .app-icon.amber  { background: #302614; color: #E5A536; }
:root[data-theme="dark"] .app-icon.purple { background: #231B36; color: #A981F5; }
:root[data-theme="dark"] .app-icon.red    { background: #34191B; color: #F26B6B; }
:root[data-theme="dark"] .app-icon.brand  { background: #331D14; color: #E8712F; }

@media (max-width: 480px) {
  .app-luoi { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   TRANG CHỦ CÁ NHÂN
   ============================================================ */
.tc-dau-trang {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 12px 16px;
}
.tc-dau-trang > div { display: flex; flex-direction: column; min-width: 0; }
.tc-dau-trang b { font-size: 15px; }
.tc-dau-trang span:not(.avatar):not(.grow) { font-size: 12.5px; color: var(--muted); }
.tc-dau-trang .grow { flex: 1; }

.tc-lay { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tc-cot-trai, .tc-cot-phai { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.tc-the {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden;
}
.tc-dau {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.tc-dau h3 { font-size: 14px; }
.tc-dau .grow { flex: 1; }
.tc-phu { font-size: 12px; color: var(--muted); }
.tc-nut {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  width: 24px; height: 24px; border-radius: var(--r-sm); font-size: 14px; line-height: 1;
}
.tc-nut:hover { background: var(--card-2); color: var(--ink); }
.tc-than { padding: 4px 0; }
.tc-trong { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Bảng việc và đề xuất */
.tc-bang { display: flex; flex-direction: column; }
.tc-hang {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px;
  gap: 12px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.tc-hang:last-child { border-bottom: 0; }
.tc-tieu {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--card-2); padding: 8px 14px;
}
.tc-viec { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tc-viec > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-viec b { font-size: 13.5px; color: var(--brand-ink); }
.tc-nho {
  font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.tc-nho svg { width: 13px; height: 13px; }
.tc-nho b { font-size: 12px; color: var(--ink); }
.tc-loai { font-size: 13px; color: var(--ink-2); }
.btn.xanh { background: var(--green); border-color: var(--green); color: #fff; }
.btn.xanh:hover { background: #0C8F58; border-color: #0C8F58; color: #fff; }
.btn.da-ky { border-color: var(--green); color: var(--green); }

/* Chấm công hôm nay */
.cc-hom-nay { display: grid; grid-template-columns: 1fr 1fr 78px; gap: 8px; padding: 12px 14px; }
.cc-khoi {
  display: flex; flex-direction: column; gap: 3px;
  border-radius: var(--r-md); padding: 10px 11px;
  background: var(--card-2); border: 1px solid var(--line-2);
}
.cc-khoi.xanh { background: var(--green-soft); border-color: transparent; }
.cc-khoi.do   { background: var(--red-soft);   border-color: transparent; }
.cc-khoi.cong { background: var(--blue-soft);  border-color: transparent; align-items: center; text-align: center; }
.cc-nhan { font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.cc-nhan svg { width: 13px; height: 13px; color: var(--green); }
.cc-khoi b { font-family: var(--font-num); font-size: 18px; letter-spacing: -.01em; }
.cc-khoi.xanh b { color: var(--green); }
.cc-khoi.do b { color: var(--red); }
.cc-khoi.cong b { color: var(--blue); font-size: 22px; }
.cc-phu { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.cc-phu svg { width: 12px; height: 12px; }

.cc-tom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 4px; }
.cc-o {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 9px 6px; border-radius: var(--r-md); background: var(--card-2);
}
.cc-o span { font-size: 11px; color: var(--muted); }
.cc-o b { font-family: var(--font-num); font-size: 17px; }
.cc-o.xanh { background: var(--green-soft); } .cc-o.xanh b { color: var(--green); }
.cc-o.do   { background: var(--red-soft); }   .cc-o.do b { color: var(--red); }
.cc-ds { padding: 6px 6px 10px; }
.cc-dong {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--r-md); font-size: 13px;
}
.cc-dong:hover { background: var(--card-2); }
.cc-dong .grow { flex: 1; }
.cc-gio { font-family: var(--font-num); font-size: 12.5px; min-width: 42px; text-align: right; }
.cc-gio.xanh { color: var(--green); } .cc-gio.do { color: var(--red); } .cc-gio.xam { color: var(--muted); }

/* Lịch đào tạo */
.dt-ds, .sk-ds { padding: 4px 0; }
.dt-dong, .sk-dong {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
}
.dt-dong:last-child, .sk-dong:last-child { border-bottom: 0; }
.dt-ngay, .sk-ngay {
  display: flex; flex-direction: column; align-items: center; flex: none;
  min-width: 52px; border-right: 2px solid var(--brand); padding-right: 10px;
}
.dt-ngay b, .sk-ngay b { font-size: 13px; }
.dt-ngay span, .sk-ngay span { font-size: 11px; color: var(--muted); }
.dt-chu, .sk-chu { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dt-chu b, .sk-chu b { font-size: 13px; color: var(--tb-cty); line-height: 1.35; }
.dt-chu span, .sk-chu span {
  font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
}
.sk-chu b { color: var(--ink); }
.sk-ngay { border-right-color: var(--line); }

/* Thu nhập nhanh */
.tn-nho { display: flex; flex-direction: column; gap: 6px; padding: 14px; align-items: flex-start; }
.tn-nho > span { font-size: 12px; color: var(--muted); }
.tn-nho > b { font-family: var(--font-num); font-size: 24px; color: var(--brand-ink); }
.tn-chia { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.tn-chia b { font-family: var(--font-num); color: var(--ink); }

/* Hộp tuỳ chỉnh trang chủ */
.tc-ds { display: flex; flex-direction: column; }
.tc-nhom {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 16px 2px 7px;
}
.tc-nhom:first-child { padding-top: 2px; }
.tc-nhom b {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.tc-nhom span { font-size: 11.5px; color: var(--muted); }

.tc-dong {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 10px; border-radius: var(--r-md);
  background: var(--card-2); border: 1px solid var(--line);
  margin-bottom: 4px;
  transition: background .18s ease, transform .18s ease;
}
.tc-so {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.tc-ten { flex: 1; min-width: 0; font-size: 13.5px; }
.tc-cot { font-size: 11.5px; color: var(--muted); }
.tc-day { display: flex; gap: 3px; flex: none; }
.tc-mui {
  width: 28px; height: 28px; border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center;
}
.tc-mui svg { width: 15px; height: 15px; }
.tc-mui:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-ink); }
.tc-mui:active:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.tc-mui:disabled { opacity: .3; cursor: default; }
.tc-bo {
  width: 28px; height: 28px; flex: none; border: 1px solid transparent; background: transparent;
  border-radius: var(--r-sm); cursor: pointer; color: var(--muted);
  display: grid; place-items: center;
}
.tc-bo svg { width: 15px; height: 15px; }
.tc-bo:hover { background: var(--red-soft); color: var(--red); }

/* Dòng vừa được đẩy lên hoặc xuống thì sáng lên một nhịp cho dễ nhận ra. */
.tc-dong.vua-doi { background: var(--brand-soft); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tc-dong { transition: none; } }

.tc-dong.la-tat { background: transparent; border-style: dashed; }
.tc-dong.la-tat .tc-ten { color: var(--muted); }
.tc-rong {
  font-size: 12.5px; color: var(--muted);
  padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-md);
  margin-bottom: 4px;
}

@media (max-width: 1100px) { .tc-lay { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .tc-hang { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tc-tieu { display: none; }
  .cc-hom-nay { grid-template-columns: 1fr 1fr; }
  .cc-khoi.cong { grid-column: 1 / -1; flex-direction: row; gap: 10px; justify-content: center; align-items: baseline; }
}

/* ============================================================
   MENU CHUỘT PHẢI
   ============================================================ */
.menu-chuot {
  position: fixed; z-index: 90; min-width: 232px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.mc-muc {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: var(--r-md);
  color: var(--ink); font-size: 13.2px;
}
.mc-muc svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.mc-muc span { flex: 1; min-width: 0; }
.mc-muc i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.mc-muc:hover { background: var(--card-2); }
.mc-muc.is-tat { color: var(--muted); cursor: default; }
.mc-muc.is-tat:hover { background: transparent; }
.mc-vach { height: 1px; background: var(--line-2); margin: 5px 2px; }

.mc-chon {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 6px;
  cursor: pointer; font-size: 13.2px; color: var(--ink);
}
.mc-chon:hover { border-color: var(--brand); }
.mc-chon.dang { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

/* ============================================================
   DANH SÁCH LIÊN HỆ
   ============================================================ */
.lh-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); margin: -4px -16px 0; padding: 0 16px;
}
.lh-tabs::-webkit-scrollbar { display: none; }

.lh-thanh {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 2px;
}
.lh-thanh .grow { flex: 1; }
.lh-dem, .lh-trang { font-size: 12.5px; color: var(--ink-2); }
.lh-trang { padding-left: 10px; border-left: 1px solid var(--line); }
.lh-tim {
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; color: var(--muted);
  min-width: 220px;
}
.lh-tim input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 13px;
}
.lh-nut { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lh-nut .grow { flex: 1; }
/* Dạng lịch: chế độ xem, số bản ghi, Lọc nằm chung một hàng */


.lh-da-chon {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--r-md); padding: 8px 12px; font-size: 13px; color: var(--brand-ink);
}
.lh-da-chon .grow { flex: 1; }
.lh-da-chon b { font-family: var(--font-num); }

.lh-bang th, .lh-bang td { white-space: nowrap; }
.lh-bang tr.da-chon > td { background: var(--brand-soft); }
.o-chon-td { width: 34px; text-align: center; }
.o-chon-td input { cursor: pointer; }
.ma-lh { font-family: var(--font-num); font-size: 12.5px; color: var(--ink-2); }
.trong { color: var(--muted); }
.sdt-o {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: 999px; padding: 3px 9px; font-size: 12.5px;
}
.sdt-o svg { width: 12px; height: 12px; }
.nhan-lh {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: var(--amber-soft); color: var(--amber);
  border-radius: 999px; padding: 3px 8px; margin-right: 4px;
}
.lh-bang b.so { font-family: var(--font-num); font-size: 13px; }

.canh-thieu {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: var(--r-md); padding: 10px 13px;
  font-size: 13px; color: var(--ink-2);
}
.canh-thieu svg { color: var(--amber); margin-top: 1px; }

/* --- Sắp xếp, lọc theo ô, Kanban --- */
.lh-tabs { align-items: center; }
.lh-kieu { display: flex; gap: 2px; margin-left: auto; padding-bottom: 4px; }
.lh-kieu button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 5px 10px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2);
}
.lh-kieu button.dang { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); font-weight: 600; }
.lh-tabs .grow { flex: 1; }

.th-sap {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit;
}
.th-sap i { font-style: normal; color: var(--muted); font-size: 11px; }
.th-sap:hover { color: var(--brand-ink); }
.th-sap.dang { color: var(--brand-ink); }
.th-sap.dang i { color: var(--brand-ink); }

.o-loc {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-align: left;
  border-bottom: 1px dashed transparent;
}
.o-loc:hover { border-bottom-color: var(--brand); }

.lh-chip { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chip-loc {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid var(--brand); border-radius: 999px;
  padding: 4px 6px 4px 11px; font-size: 12.5px;
}
.chip-loc.sap { background: var(--blue-soft); color: var(--tb-cty); border-color: var(--tb-cty); }
.chip-loc button {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 3px;
}
.chip-xoa {
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 12.5px; text-decoration: underline;
}
.chip-xoa:hover { color: var(--ink); }

.kb-lay {
  display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 6px;
}
.kb-cot { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 200px; }
.kb-dau {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-bottom: 2px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kb-dau b { font-size: 13px; }
.kb-dau span { font-size: 11.5px; color: var(--muted); }
.kb-dau.grey  { border-bottom-color: var(--muted); }
.kb-dau.blue  { border-bottom-color: var(--blue); }
.kb-dau.amber { border-bottom-color: var(--amber); }
.kb-dau.green { border-bottom-color: var(--green); }
.kb-dau.red   { border-bottom-color: var(--red); }
.kb-the-ds { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kb-the {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 11px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.kb-the:hover { border-color: var(--brand); }
.kb-the b { font-size: 13px; }
.kb-sdt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.kb-sdt svg { width: 12px; height: 12px; }
.kb-goi { font-size: 12px; color: var(--ink-2); }
.kb-goi b { font-family: var(--font-num); font-size: 12.5px; }
.kb-chan { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.kb-chan .grow { flex: 1; }
.kb-trong { padding: 16px 8px; text-align: center; color: var(--muted); font-size: 12px; }

@media (max-width: 900px) { .kb-lay { grid-template-columns: repeat(5, 200px); } }
.nhan-lh.do { background: var(--red-soft); color: var(--red); }
b.so.do { color: var(--red); }

/* --- Các màn trong vòng tròn phục vụ khách --- */
.ekip-o { display: flex; flex-wrap: wrap; gap: 6px; }
.ekip-1 { display: inline-flex; }
.sao-do { color: var(--amber); letter-spacing: 1px; font-size: 13px; }
.sao-do.green { color: var(--green); }
.sao-do.red   { color: var(--red); }
.nhan-lh.xanh { background: var(--green-soft); color: var(--green); }
b.so.xanh { color: var(--green); }
.dg-nguoi { display: flex; flex-direction: column; }
.dg-1 {
  display: grid; grid-template-columns: minmax(0,1fr) auto 44px 70px;
  gap: 10px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
}
.dg-1:last-child { border-bottom: 0; }
.dg-1 b.so { font-family: var(--font-num); text-align: right; }
.card-head .mo { font-size: 12px; color: var(--muted); }

/* --- Vòng tròn phục vụ khách --- */
.vt-mo {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--blue-soft); border: 1px solid var(--tb-cty);
  border-radius: var(--r-lg); padding: 13px 15px; font-size: 13.2px; color: var(--ink-2);
}
.vt-mo svg { color: var(--tb-cty); margin-top: 2px; flex: none; }

.vt-lay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vt-o {
  position: relative; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 14px 15px 13px; display: flex; flex-direction: column; gap: 4px;
}
.vt-o:hover { border-color: var(--brand); }
.vt-o.co-canh { border-left: 3px solid var(--brand); }
.vt-so {
  position: absolute; top: 12px; right: 13px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card-2); color: var(--muted);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.vt-ic { color: var(--tb-cty); }
.vt-ic svg { width: 20px; height: 20px; }
.vt-o b { font-size: 14px; margin-top: 2px; }
.vt-mo-nho { font-size: 12px; color: var(--muted); }
.vt-dem { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.vt-dem b { font-family: var(--font-num); font-size: 17px; color: var(--ink); }
.vt-canh, .vt-ok {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; margin-top: 3px;
}
.vt-canh { color: var(--brand-ink); }
.vt-ok { color: var(--green); }
.vt-canh svg, .vt-ok svg { width: 13px; height: 13px; }
.vt-mui {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  color: var(--line); z-index: 1;
}
.vt-mui svg { width: 18px; height: 18px; }
.vt-mui.quay { transform: translateY(-50%) rotate(180deg); right: auto; left: -10px; color: var(--brand); }

.vt-noi { display: flex; flex-direction: column; }
.vt-noi-1 {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.vt-noi-1:last-child { border-bottom: 0; }
.vt-noi-1 .grow { flex: 1; }
.vt-noi-1 b.so { font-family: var(--font-num); }

@media (max-width: 1100px) { .vt-lay { grid-template-columns: repeat(2, 1fr); } .vt-mui { display: none; } }
@media (max-width: 600px)  { .vt-lay { grid-template-columns: 1fr; } }


/* ============================================================
   BỐN BỘ PHÔNG CHỮ ĐỂ BOSS SO
   Đo ngày 25/09/2026 trên chính máy của boss:
   · 1Office  → Inter Tight 14px  (tải từ Google Fonts, máy nào cũng giống)
   · Google   → Google Sans Text, font riêng không phát hành.
                Roboto là font dự phòng trong chính chuỗi của Google.
   · Facebook → "Segoe UI Historic", "Segoe UI" 12px → ra Segoe UI
   · Lark     → chuỗi font hệ thống, trên Windows rơi vào Tahoma 16px
   Segoe UI và Tahoma là font có sẵn của Windows, máy Mac và điện thoại
   KHÔNG có, sẽ tự rơi về font khác. Chỉ Inter Tight và Roboto là tải về
   nên mọi thiết bị hiện giống hệt nhau.
   ============================================================ */
:root[data-font="1office"] {
  --font-ui:  "Inter Tight", Roboto, "Segoe UI", Arial, sans-serif;
  --font-num: "Inter Tight", Roboto, "Segoe UI", Arial, sans-serif;
}
:root[data-font="google"] {
  --font-ui:  Roboto, "Inter Tight", "Segoe UI", Arial, sans-serif;
  --font-num: Roboto, "Inter Tight", "Segoe UI", Arial, sans-serif;
}
:root[data-font="facebook"] {
  --font-ui:  "Segoe UI Historic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Segoe UI Historic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-font="lark"] {
  --font-ui:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, Roboto, Arial, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, Roboto, Arial, sans-serif;
}

/* Hộp chọn phông chữ */
.font-o {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 7px;
  cursor: pointer; text-align: left;
}
.font-o:hover { border-color: var(--brand); }
.font-o.dang { border-color: var(--brand); background: var(--brand-soft); }
.font-o .chu { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.font-o b { font-size: 13.5px; color: var(--ink); }
.font-o i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.font-o .thu { font-size: 15px; color: var(--ink); white-space: nowrap; }
.font-o .dau { color: var(--brand-ink); font-weight: 700; }

/* ============================================================
   NÚT LƯỚI Ở GÓC TRÁI TRÊN CÙNG — đúng vị trí của 1Office
   ============================================================ */
.rail-luoi {
  width: 42px; height: 42px; margin: 0 auto 6px;
  border: 1px solid var(--line); background: var(--card);
  border-radius: 13px; cursor: pointer;
  display: grid; place-items: center; color: var(--brand); flex: none;
  box-shadow: var(--shadow-1);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.rail-luoi svg { width: 20px; height: 20px; }
.rail-luoi:hover {
  background: var(--brand-soft); border-color: var(--brand);
  transform: translateY(-1px); box-shadow: var(--shadow-2);
}
/* Bình thường để trắng, bấm xuống mới hiện đỏ, đang mở bảng thì giữ cam */
.rail-luoi:active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  transform: scale(.94); box-shadow: none;
}
.rail-luoi.is-open {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.rail-luoi.is-open:hover { background: #D14205; border-color: #D14205; }
@media (prefers-reduced-motion: reduce) { .rail-luoi { transition: none; } }

/* Logo Cory chuyển sang cạnh tên màn hình */
.top-logo {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 2px;
}
.top-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 860px) { .top-logo { display: none; } }

/* Bấm một ô ứng dụng cũng loé cam một nhịp */
.app-o:active .app-icon { background: var(--orange-soft); color: var(--orange); }
.app-o:active { background: var(--orange-soft); }

/* Bấm chuột xuống mục nào thì mục đó hiện đỏ, thả ra là về trắng */
.side-item:active, .bt-menu button:active, .mobilebar button:active {
  background: var(--brand); color: #fff;
}
.side-item:active svg, .bt-menu button:active svg { color: #fff; }
.btn:active, .tab:active { background: var(--brand-soft); color: var(--brand-ink); }
.btn.chinh:active, .btn-primary:active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   CHAT NỘI BỘ VÀ LỐI TẮT — hai bảng thả xuống từ hàng biểu tượng
   ============================================================ */
/* Lớp phủ nằm DƯỚI thanh trên cùng (z-index 20), để lúc đang mở một bảng
   vẫn bấm thẳng sang chuông hay chat được, không phải đóng rồi mở lại. */
.lop-mo { position: fixed; inset: 0; z-index: 19; background: transparent; }

.tt-panel {
  position: absolute; z-index: 60; right: 12px; top: calc(var(--head-h) + 10px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
}
.tt-dau {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--line-2);
}
.tt-dau b { font-size: 14px; }
.tt-dau .grow { flex: 1; }
.tt-nhom {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 14px 6px; border-top: 1px solid var(--line-2);
}

/* --- Lối tắt --- */
.lt-panel { width: min(360px, calc(100vw - 24px)); max-height: min(560px, 80dvh); }
.lt-hien { padding: 8px; display: grid; gap: 2px; }
.lt-1 { display: flex; align-items: center; gap: 4px; }
.lt-di {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); text-align: left;
  font-size: 13.5px; color: var(--ink-2);
}
.lt-di:hover { background: var(--card-2); }
.lt-di:active { background: var(--brand-soft); color: var(--brand-ink); }
.lt-di .app-icon { width: 34px; height: 34px; border-radius: 10px; }
.lt-di .app-icon svg { width: 18px; height: 18px; }
.lt-trong {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 26px 18px; color: var(--muted);
}
.lt-trong svg { width: 26px; height: 26px; color: var(--line); }
.lt-trong b { font-size: 13.5px; color: var(--ink-2); }
.lt-trong span { font-size: 12px; line-height: 1.5; }

.lt-chon { padding: 4px 8px 12px; overflow-y: auto; display: grid; gap: 1px; }
.lt-chon-1 {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); text-align: left;
  font-size: 13px; color: var(--ink-2);
}
.lt-chon-1 svg { width: 16px; height: 16px; flex: none; color: var(--line); }
.lt-chon-1:hover { background: var(--card-2); }
.lt-chon-1.is-co svg { color: var(--amber); fill: var(--amber); }
.lt-chon-1.is-co { color: var(--ink); font-weight: 500; }

/* --- Chat --- */
.chat-panel { width: min(680px, calc(100vw - 24px)); height: min(560px, 80dvh); }
.chat-than { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.chat-ds { border-right: 1px solid var(--line-2); overflow-y: auto; padding: 6px; }
.chat-1 {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); text-align: left;
}
.chat-1:hover { background: var(--card-2); }
.chat-1.is-chon { background: var(--brand-soft); }
.chat-1.is-chon .chat-1-txt b { color: var(--brand-ink); }
.chat-1-txt { min-width: 0; flex: 1; display: grid; }
.chat-1-txt b { font-size: 13px; }
.chat-1-txt span {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-khung { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-dau-2 {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
.chat-dau-2 b { font-size: 13.5px; display: block; }
.chat-dau-2 span {
  font-size: 11.5px; color: var(--muted); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-tin { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.tin-1 { display: flex; gap: 8px; align-items: flex-start; max-width: 82%; }
.tin-1.cua-toi { margin-left: auto; flex-direction: row-reverse; }
.tin-bong {
  background: var(--card-2); border-radius: 12px; padding: 8px 11px;
  font-size: 13px; line-height: 1.5; min-width: 0;
}
.tin-bong b { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 2px; }
.tin-bong p { margin: 0; overflow-wrap: anywhere; }
.tin-gio { font-size: 10.5px; color: var(--muted); display: block; margin-top: 3px; }
.tin-1.cua-toi .tin-bong { background: var(--brand-soft); color: var(--ink); }
.tin-1.cua-toi .tin-gio { text-align: right; }
.chat-soan { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); }
.chat-soan input {
  flex: 1; min-width: 0; padding: 8px 12px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--ink);
}
.chat-soan input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.chat-soan .btn { border-radius: 20px; padding: 0 14px; }
.chat-chan {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 14px; border-top: 1px solid var(--line-2);
  background: var(--card-2); font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.chat-chan svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

@media (max-width: 700px) {
  .chat-panel { width: calc(100vw - 16px); right: 8px; }
  .chat-than { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .chat-ds { border-right: 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 4px; overflow-x: auto; }
  .chat-1 { width: auto; flex: none; }
  .chat-1-txt span { display: none; }
}

/* ============================================================
   MODULE LỊCH
   ============================================================ */
.lh-tuan {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
  margin-bottom: 14px;
}
/* Máy rất hẹp thì 7 ngày không vừa một hàng, cho kéo ngang thay vì bóp nát. */
@media (max-width: 420px) {
  .lh-tuan {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin-left: -12px; margin-right: -12px; padding: 0 12px 2px;
  }
  .lh-tuan::-webkit-scrollbar { display: none; }
  .lh-ngay { flex: 0 0 62px; }
}
.lh-ngay {
  display: grid; justify-items: center; gap: 1px;
  padding: 9px 4px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-2);
}
.lh-ngay .lh-thu { font-size: 11px; color: var(--muted); }
.lh-ngay b { font-size: 17px; font-weight: 600; line-height: 1.2; }
.lh-ngay .lh-dem { font-size: 10.5px; color: var(--muted); }
.lh-ngay:hover { background: var(--card-2); }
.lh-ngay.la-nay { border-color: var(--brand); }
.lh-ngay.la-nay b { color: var(--brand-ink); }
.lh-ngay.is-chon { background: var(--brand); border-color: var(--brand); color: #fff; }
.lh-ngay.is-chon .lh-thu, .lh-ngay.is-chon .lh-dem, .lh-ngay.is-chon b { color: #fff; }
.lh-ngay:active { background: var(--brand); border-color: var(--brand); color: #fff; }

.lh-ds { display: grid; }
.lh-ca {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent; cursor: default;
}
.lh-ca:last-child { border-bottom: 0; }
.lh-ca:hover { background: var(--card-2); }
.lh-ca.wait { border-left-color: var(--green); }
.lh-ca.done { border-left-color: var(--green); }
.lh-ca.late { border-left-color: var(--purple); }
.lh-ca.cua-toi { background: var(--brand-soft); }
.lh-gio { width: 62px; flex: none; display: grid; }
.lh-gio b { font-size: 14px; font-variant-numeric: tabular-nums; }
.lh-gio span { font-size: 11px; color: var(--muted); }
.lh-than { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lh-ten { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lh-mo { font-size: 12px; color: var(--muted); }
.lh-ekip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.lh-phai { display: grid; gap: 4px; justify-items: end; flex: none; }
.lh-phai .cell-sub { font-size: 11.5px; }

.lh-trong {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 34px 18px; color: var(--muted);
}
.lh-trong svg { width: 28px; height: 28px; color: var(--line); }
.lh-trong b { font-size: 14px; color: var(--ink-2); }
.lh-trong span { font-size: 12.5px; }

.lh-ns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.lh-ns-1 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
.lh-ns-1 .grow { flex: 1 1 0; min-width: 0; }
.lh-ns-1 .cell-sub { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lh-ns-1 .pill { white-space: nowrap; }

/* ============================================================
   BÁO CÁO CỦA TÔI
   ============================================================ */
.bc-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; padding: 14px; }
.bc-kpi-dau { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bc-kpi-dau span { font-size: 12.5px; color: var(--ink-2); }
.bc-kpi-dau b { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }

.bc-luong { display: grid; }
.bc-luong-1 {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.bc-luong-1 span { color: var(--ink-2); }
.bc-luong-1 b { margin-left: auto; font-variant-numeric: tabular-nums; }
.bc-luong-1.tru b { color: var(--red); }
.bc-luong-1.tong { background: var(--card-2); font-weight: 600; }
.bc-luong-1.tong b { font-size: 15px; color: var(--brand-ink); }
.cho-y { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.5; }
.cho-y svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* Nút trên thanh đầu có chức năng nhưng chưa chạy thật — để mờ cho rõ,
   bấm vào vẫn nói rõ vì sao và đưa sang chỗ làm được. */
.icon-btn.mo-di { color: var(--muted); opacity: .6; }
.icon-btn.mo-di:hover { opacity: 1; background: var(--line-2); }

/* Hồ sơ nhân sự */
.hs-ten { cursor: pointer; }
.hs-ten:hover { color: var(--brand-ink); }

/* ---- Chi tiết lương: từng dòng tiền ---- */
.lg-nhom {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 16px 0 8px;
}
.lg-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.lg-luoi .k { background: var(--card); padding: 10px 12px; display: grid; gap: 2px; }
.lg-luoi .k span { font-size: 12.5px; color: var(--ink-2); }
.lg-luoi .k b { font-size: 15px; font-variant-numeric: tabular-nums; }
.lg-luoi .k i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.lg-luoi .k.do b { color: var(--red); }
.lg-tong {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
}
.lg-tong b { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; }
.lg-tong.lg-cuoi { background: var(--brand-soft); border-color: var(--brand); }
.lg-tong.lg-cuoi b { color: var(--brand-ink); }

/* ---- Ô nhập trong Điều chỉnh tháng ---- */
.o-dc {
  width: 100%; min-width: 96px; padding: 6px 9px; font: inherit; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
}
.o-dc:hover { border-color: var(--ink-2); }
.o-dc:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.chua-co { color: var(--muted); font-size: 12.5px; font-style: italic; }
tr.mo-di-hang { opacity: .75; }
.canh-do { color: var(--red); font-size: 12.5px; line-height: 1.6; }
.canh-do svg { width: 14px; height: 14px; vertical-align: -2px; }
table.grid.nho td { font-size: 12.5px; padding: 7px 10px; }
.notice.xanh { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.notice.xanh svg { color: var(--green); }

/* Hộp chi tiết lương dùng nền trắng cho dễ đọc, .ct-ct nền hồng chỉ hợp với ghi chú ngắn */
.ct-ct.trang { background: transparent; padding: 0; }

/* ---- Ảnh đại diện nhân sự ---- */
.anh-ns {
  border-radius: 50%; object-fit: cover; flex: none;
  background: var(--card-2); border: 1px solid var(--line);
}
.hs-ten { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.hs-ten:hover span:last-child { color: var(--brand-ink); }
.hs-dau {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2);
}
.hs-dau b { font-size: 17px; display: block; }
.hs-dau > div > span { font-size: 13px; color: var(--muted); display: block; }
.hs-dau .hs-nhac { font-size: 12px; color: var(--amber); margin-top: 4px; }

/* ---- Kho giấy tờ CCCD trong hồ sơ nhân sự ---- */
.cc-khoi { margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card-2); }
.cc-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.cc-dau svg { width: 16px; height: 16px; color: var(--muted); }
.cc-ds { display: grid; gap: 6px; }
.cc-1 { display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cc-kieu { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 6px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.cc-ten { flex: 1; min-width: 0; display: grid; }
.cc-ten b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ten span { font-size: 11.5px; color: var(--muted); }
.cc-trong { font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.cc-them { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 7px 13px; border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--card); cursor: pointer; font-size: 13px; color: var(--ink-2); }
.cc-them:hover { border-color: var(--brand); color: var(--brand-ink); }
.cc-them svg { width: 15px; height: 15px; }
.cc-them input { display: none; }
.cc-them.dang-tai { opacity: .6; pointer-events: none; }
.cc-them.dang-tai span::after { content: "..."; }
.cc-nhac { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.cc-nhac svg { width: 13px; height: 13px; vertical-align: -2px; }
.cc-tat { display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.cc-tat svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ---- Báo lỗi ---- */
.rail-loi.is-active svg, .rail-loi:hover svg { color: var(--amber); }
.bl-mo { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.bl-ds { display: grid; gap: 10px; margin-top: 4px; }
.bl-1 {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; background: var(--card);
}
.bl-1.tt-Mới-báo   { border-left-color: var(--amber); }
.bl-1.tt-Đang-fix  { border-left-color: var(--blue); }
/* Đã fix thì tô xanh lá hẳn cho dễ thấy, không làm mờ đi — mờ trông như
   bị bỏ qua, ngược hẳn với ý nghĩa là đã sửa xong. */
.bl-1.tt-Đã-fix    { border-left-color: var(--green); background: var(--green-soft);
                     border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.bl-1.tt-Không-sửa { border-left-color: var(--line); opacity: .6; }
.bl-xong { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--green); color: #fff; }
.bl-xong svg { width: 13px; height: 13px; }
.bl-dem { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bl-dem-1 { display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; font-size: 12.5px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted); }
.bl-dem-1.con { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber); font-weight: 600; }
.bl-dem-1.xong { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green); font-weight: 600; }
.bl-dem-1 svg { width: 13px; height: 13px; }
.bl-xem { position: relative; display: inline-block; margin: 10px 0 0; }
.bl-xem img { max-width: 260px; max-height: 180px; border-radius: var(--r-md);
  border: 1px solid var(--line); display: block; }
.bl-xem .icon-btn { position: absolute; top: 5px; right: 5px; background: var(--card);
  border: 1px solid var(--line); width: 26px; height: 26px; }
.bl-xem .icon-btn svg { width: 14px; height: 14px; }
.bl-anh-xem { display: block; margin: 9px 0 0; }
.bl-anh-xem img { max-width: 100%; max-height: 260px; border-radius: var(--r-md);
  border: 1px solid var(--line); display: block; }
.bl-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bl-dau .grow { flex: 1; }
.bl-man { font-size: 11.5px; color: var(--muted); }
.bl-tt {
  font: inherit; font-size: 12px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--ink-2); cursor: pointer;
}
.bl-noi { margin: 0; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.bl-cach { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.bl-cach svg { width: 13px; height: 13px; vertical-align: -2px; }
.bl-chan { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--line-2); }

/* ---- Báo cáo tiến độ công việc ---- */
.bc-viec { padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.bc-viec b { font-size: 15px; display: block; }
.bc-viec span { font-size: 12.5px; color: var(--muted); }
.bc-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.bc-pt { display: flex; align-items: center; gap: 10px; }
.bc-pt input[type=range] { flex: 1; min-width: 0; accent-color: var(--brand); }
.bc-pt b { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.bc-pt-nho {
  font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bc-truoc { margin-top: 6px; }
.bc-ds { display: grid; gap: 8px; }
.bc-1 { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--card-2); }
.bc-1-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.bc-1-dau .grow { flex: 1; }
.bc-1-chan { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); }

/* =====================================================================
   SƠ ĐỒ TỔ CHỨC — cây có khung và đường nối, dựng theo 1Office
   ===================================================================== */
.sd-card { padding-bottom: 0; }

.sd-vung {
  position: relative;
  /* Thẻ giờ có đủ tên thành viên nên cao hơn — cho khung vẽ rộng chỗ hơn */
  min-height: 540px; max-height: 80vh;
  overflow: auto;
  background: var(--card-2);
  background-image: radial-gradient(circle, #D9D7D2 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin: 0 0 10px;
}
.sd-canvas { position: relative; transform-origin: 0 0; padding: 20px; width: max-content; }
.sd-cay    { position: relative; width: max-content; }

/* Lớp vẽ đường nối. Đặt đúng gốc toạ độ của cây (bằng phần đệm của khung
   ngoài) và tự cho kích thước trong style, không dùng inset để khỏi dính
   luật chung cho svg biểu tượng. */
.sd-day { position: absolute; top: 20px; left: 20px;
  pointer-events: none; overflow: visible; }
.sd-day path { fill: none; stroke: #C3C0BA; stroke-width: 1.6px; }

/* Thẻ cha đứng ngang hàng đầu thẻ con đầu tiên, như cây thư mục */
.sd-nhanh { display: flex; align-items: flex-start; }
.sd-con   { display: flex; flex-direction: column; gap: 12px; margin-left: 34px; }

.sd-o { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }

/* Thẻ đơn vị: đầu thẻ bấm được để xem, sửa; thân thẻ là người trong đơn vị */
.sd-the {
  width: 250px; background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(29,35,46,.07); overflow: hidden;
}
.sd-the.brand  { border-top-color: var(--brand); }
.sd-the.green  { border-top-color: var(--green); }
.sd-the.blue   { border-top-color: var(--blue); }
.sd-the.purple { border-top-color: var(--purple); }
.sd-the.amber  { border-top-color: var(--amber); }
.sd-the.da-gop { border-style: dashed; }

.sd-nut {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-2); cursor: pointer;
  font: inherit; text-align: left;
}
.sd-nut:hover { background: var(--card-2); }
.sd-nut:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.sd-ng-ds { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px; }
.sd-ng1 { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.sd-ng1 i { font-style: normal; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ng1 .anh-ns, .sd-ng1 .avatar { flex: none; }
.sd-ng1.truong { background: var(--amber-soft, #FFF6E5); }
.sd-ng1.truong i { font-weight: 600; color: var(--ink); }
.sd-ng1 em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 600; color: #B7791F;
  background: var(--card); border: 1px solid #F3D9A4; border-radius: 999px; padding: 1px 7px; }
.sd-trong { font-size: 12px; color: var(--muted); padding: 4px; }

.sd-ten { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; }

.sd-dem {
  flex: none; min-width: 24px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sd-nut.brand  .sd-dem { background: var(--brand); }
.sd-nut.green  .sd-dem { background: var(--green); }
.sd-nut.blue   .sd-dem { background: var(--blue); }
.sd-nut.purple .sd-dem { background: var(--purple); }
.sd-nut.amber  .sd-dem { background: var(--amber); }
.sd-dem.khong  { background: #C3C0BA !important; }

.sd-truong { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
  padding: 2px 8px 2px 2px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; }
.sd-truong i { font-style: normal; }

.sd-gop {
  flex: none; width: 20px; height: 20px; line-height: 1; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-2); font-size: 14px; font-weight: 700; cursor: pointer;
}
.sd-gop:hover { border-color: var(--brand); color: var(--brand); }


/* --- Thanh công cụ dưới cùng, đúng chỗ 1Office đặt --- */
.sd-thanh {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0 12px; border-top: 1px solid var(--line-2);
}
.sd-nhom-nut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-nhom-nut.phai { margin-left: auto; }

.sd-bat { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-2); cursor: pointer; background: var(--card); }
.sd-bat svg { width: 15px; height: 15px; }
.sd-bat input { accent-color: var(--brand); }

.sd-zoom { display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.sd-zoom span { min-width: 46px; text-align: center; font-size: 12.5px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- Hộp xem và chọn người cho một đơn vị --- */
.sd-hop-dau { display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.sd-hop-dau span { font-size: 12px; color: var(--muted); }
.sd-hop-dau b { font-size: 13px; color: var(--ink); }

.sd-ds-ng { display: flex; flex-direction: column; }
.sd-ng { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--line-2); }
.sd-ng:last-child { border-bottom: 0; }
.sd-ng .chu { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sd-ng .chu b { font-size: 13.5px; color: var(--ink); }
.sd-ng .chu i { font-style: normal; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-co { flex: none; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 600; }

.sd-chon { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.sd-chon > summary { padding: 9px 12px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.sd-chon > summary svg { width: 16px; height: 16px; }
.sd-chon > .o, .sd-chon > .cc-nhac { margin: 0 12px 12px; }
.sd-chon-ds { max-height: 260px; overflow: auto; border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.sd-tick { display: flex; align-items: center; gap: 9px; padding: 7px 12px; cursor: pointer; }
.sd-tick:hover { background: var(--card-2); }
.sd-tick.co { background: var(--brand-soft); }
.sd-tick input { accent-color: var(--brand); flex: none; }
.sd-tick .chu { display: flex; flex-direction: column; min-width: 0; }
.sd-tick .chu b { font-size: 13px; color: var(--ink); }
.sd-tick .chu i { font-style: normal; font-size: 11px; color: var(--muted); }

/* =====================================================================
   TƯỜNG CÔNG TY — ảnh bìa, hai tab, cột phải
   ===================================================================== */
.bt-lay.ba-cot { grid-template-columns: 264px minmax(0, 1fr) 292px; }

.tc-bia { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; }
.tc-anh { height: 156px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(110deg, var(--bia-1), var(--bia-2) 55%, var(--bia-3)); }
.tc-anh img { height: 70px; width: auto; }
.tc-dau { padding: 12px 16px 14px; }
.tc-dau h2 { margin: 0; font-size: 19px; color: var(--ink); }

.tc-tab { display: flex; gap: 8px; }
.tc-tab button { padding: 7px 16px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  font: inherit; font-size: 13px; color: var(--ink-2); }
.tc-tab button:hover { border-color: var(--brand); color: var(--brand-ink); }
.tc-tab button.chon { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.tc-ds { padding: 4px 0; }
.tc-dong { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; background: none; border: 0; border-bottom: 1px solid var(--line-2);
  cursor: pointer; text-align: left; font: inherit; }
.tc-ds .tc-dong:last-child { border-bottom: 0; }
.tc-dong:hover { background: var(--card-2); }
.tc-dong .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tc-dong .chu b { font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.tc-dong .chu b svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.tc-dong .chu i { font-style: normal; font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 5px; }
.tc-dong .chu i svg { width: 12px; height: 12px; }
.tc-them { font-style: normal; font-size: 11px; color: var(--muted); }

.tc-mat { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tc-mat > span { display: inline-flex; }
.tc-du { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft);
  color: var(--blue); font-size: 11.5px; font-weight: 600; }
.btn.rong { width: 100%; justify-content: center; }

.tc-qt { display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-bottom: 1px solid var(--line-2); }
.tc-qt:last-child { border-bottom: 0; }
.tc-qt .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-qt .chu b { font-size: 13px; color: var(--ink); }
.tc-qt .chu i { font-style: normal; font-size: 11px; color: var(--muted); }

.tc-muc { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-muc button { padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line-2);
  font: inherit; font-size: 11.5px; color: var(--ink-2); }
.tc-muc button:hover { background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-ink); }

/* --- Ô soạn bài: chỗ chọn bài thông báo --- */
.bt-soan-khung { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.bt-soan-khung .bt-soan { border: 0; border-radius: 0; margin: 0; }
.bt-soan-nut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin: 0 12px; padding: 6px 0 8px; border-top: 1px solid var(--line-2); }
.bt-soan-nut button { display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r-md);
  padding: 8px 6px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.bt-soan-nut button:hover { background: var(--card-2); }
.bt-soan-nut svg { width: 22px; height: 22px; display: block; }
.mau-do   { color: #F02849; display: grid; }
.mau-xanh { color: #45BD62; display: grid; }
.mau-cam  { color: #F7B928; display: grid; }
.mau-lam  { color: #1877F2; display: grid; }
@media (max-width: 520px) {
  .bt-soan-nut button { flex-direction: column; gap: 3px; font-size: 12px; padding: 7px 2px; }
}
.bt-tb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); }
/* Icon loa nằm trong dòng chữ sẽ bám theo đường chân chữ và bị đẩy lên cao,
   nên phải xếp bằng flex mới thẳng hàng với chữ và ô tick */
.bt-tb span { display: inline-flex; align-items: center; gap: 6px; }
.bt-tb svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.bt-tb input { accent-color: var(--brand); margin: 0; }
.bt-nhan-chon { padding: 5px 9px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: 12.5px; background: var(--card); }
.bt-nhan-chon:disabled { opacity: .5; }

/* --- Hộp "Tạo bài viết" --- */
.tbv { display: grid; gap: 10px; }
.tbv-nguoi { display: flex; align-items: center; gap: 10px; }
.tbv-nguoi .chu { display: flex; flex-direction: column; }
.tbv-nguoi .chu b { font-size: 14px; }
.tbv-nguoi .chu span { display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); }
.tbv-nguoi .chu svg { width: 13px; height: 13px; }
.tbv textarea { width: 100%; min-height: 120px; resize: vertical; border: 0; outline: none;
  background: transparent; font: inherit; font-size: 17px; line-height: 1.5; color: var(--ink); padding: 4px 0; }
.tbv textarea::placeholder { color: var(--muted); }
#o-sua-bai { font-size: 15px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.tbv-cx-hang { display: flex; justify-content: flex-end; margin-top: -6px; }
.tbv-cx { border: 0; background: transparent; cursor: pointer; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.tbv-cx:hover { background: var(--card-2); color: var(--ink-2); }
.tbv-cx svg { width: 24px; height: 24px; }
.tbv-tb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--r-md); background: var(--brand-soft); }
.tbv-tb[hidden] { display: none; }
.tbv-them { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px 8px 14px; }
.tbv-them > span { flex: 1; min-width: 150px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tbv-nut { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; }
.tbv-nut:hover { background: var(--card-2); }
.tbv-nut svg { width: 24px; height: 24px; }
.tbv-nut input { display: none; }
.tbv-nut.xanh { color: #45BD62; }
.tbv-nut.lam  { color: #1877F2; }
.tbv-nut.cam  { color: #F7B928; }
.tbv-nut.do   { color: #F02849; }
.tbv-nut.bat  { background: var(--brand-soft); }
.hop-chan .tbv-dang { flex: 1; justify-content: center; padding: 10px; font-size: 14px; }
.hop-chan .tbv-dang:disabled { background: var(--line-2); border-color: var(--line-2);
  color: var(--muted); cursor: not-allowed; }

.bt-anh-xem { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-anh-xem:empty { display: none; }
.bt-anh-1 { position: relative; width: 76px; height: 76px; flex: none;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.bt-anh-1 img, .bt-anh-1 video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-anh-1 .icon-btn { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.bt-anh-1 .icon-btn:hover { background: rgba(0, 0, 0, .75); }
.bt-anh-1 .icon-btn svg { width: 12px; height: 12px; }

/* --- Lưới ảnh trong bài --- */
.bt-luoi-anh { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-top: 10px; border-radius: var(--r-md); overflow: hidden; }
.bt-luoi-anh.so-1 { grid-template-columns: 1fr; }
.bt-anh { position: relative; display: block; border: 0; padding: 0; cursor: zoom-in;
  background: var(--card-2); aspect-ratio: 1 / 1; overflow: hidden; }
.bt-anh img, .bt-anh video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dấu phát trên ô video */
.bt-phat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none; }
.bt-phat svg { width: 24px; height: 24px; }
.bt-phat.nho { width: 28px; height: 28px; }
.bt-phat.nho svg { width: 14px; height: 14px; }
.bt-video { width: 100%; max-height: 520px; display: block; background: #000; }
/* Một ảnh thì giữ nguyên tỉ lệ, không cắt */
.so-1 .bt-anh { aspect-ratio: auto; }
.so-1 .bt-anh img { height: auto; max-height: 520px; object-fit: contain; }
/* Ba ảnh: ảnh đầu nằm ngang cả hàng, hai ảnh sau chia đôi hàng dưới */
.so-3 .bt-anh:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.bt-anh-con { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 24px; font-weight: 600; }
.cd-bai .bt-luoi-anh { margin: 10px 0 4px; max-width: 520px; }

/* --- Hộp xem ảnh to --- */
.bt-xem-anh { display: flex; align-items: center; gap: 8px; }
.bt-xem-anh img, .bt-xem-anh video { flex: 1; min-width: 0; max-height: 72vh; object-fit: contain;
  border-radius: var(--r-md); }

/* --- Bảng nổi: icon cảm xúc, gợi ý tên, menu "..." ---
   Nằm trên cả hộp thoại (hộp thoại z-index 100) */
.bang-icon, .goi-y-nhac, .menu-bai { position: fixed; z-index: 120; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.bang-icon { width: 340px; max-width: calc(100vw - 16px); padding: 6px 6px 8px; }
.bi-tab { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; }
.bi-tab button { flex: none; width: 34px; height: 32px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); font-size: 18px; opacity: .55; }
.bi-tab button.chon { opacity: 1; background: var(--card-2); box-shadow: inset 0 -2px 0 var(--brand); }
.bi-ten { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 7px 4px 3px; }
.bi-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 1px;
  max-height: 232px; overflow-y: auto; }
.bi-luoi button { height: 36px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); font-size: 22px; line-height: 1; }
.bi-luoi button:hover { background: var(--card-2); }
.goi-y-nhac { width: 280px; max-width: calc(100vw - 16px); padding: 6px; display: grid; gap: 2px; }
.goi-y-nhac button { display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r-md); padding: 7px 8px; }
.goi-y-nhac button.chon, .goi-y-nhac button:hover { background: var(--card-2); }
.goi-y-nhac .avatar svg { width: 14px; height: 14px; }
.goi-y-nhac .chu { display: flex; flex-direction: column; min-width: 0; }
.goi-y-nhac .chu b { font-size: 13.5px; color: var(--ink); }
.goi-y-nhac .chu i { font-style: normal; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Viết đủ .bt-than để thắng luật tô đen chữ đậm trong thân bài */
.nhac-ten, .bt-than .nhac-ten, .cd-than .nhac-ten { color: #1877F2; font-weight: 600; }
.menu-bai { width: 320px; max-width: calc(100vw - 16px); padding: 6px; }
.menu-bai button { width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r-md); padding: 9px 10px; }
.menu-bai button:hover { background: var(--card-2); }
.menu-bai svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink); }
.menu-bai span { display: flex; flex-direction: column; }
.menu-bai b { font-size: 14px; font-weight: 600; color: var(--ink); }
.menu-bai i { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; }
.menu-bai-vach { height: 1px; background: var(--line-2); margin: 5px 8px; }
.bt-ghim.luu { color: var(--blue); }
.bt-da-sua { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.bt-xem-anh .icon-btn:disabled { opacity: .3; cursor: default; background: transparent; }

/* =====================================================================
   BÀI VIẾT CHỜ DUYỆT
   ===================================================================== */

.cd-bai { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; }
.cd-bai > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cd-bai > header .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-bai > header .chu b { font-size: 13.5px; color: var(--ink); }
.cd-bai > header .chu i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cd-bai h3 { margin: 0 0 6px; font-size: 15px; color: var(--brand-ink);
  display: flex; align-items: center; gap: 7px; }
.cd-bai h3 svg { width: 16px; height: 16px; flex: none; }
.cd-nhan { display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--card-2); font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px; }
.cd-than p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.cd-nut { display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--line-2); }
.cd-cho { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cd-cho svg { width: 14px; height: 14px; }
.vien-nhan.cho { background: var(--amber-soft); color: var(--amber); }
.vien-nhan.xanh { background: var(--green-soft); color: var(--green); }

/* =====================================================================
   LỘ TRÌNH THĂNG TIẾN
   ===================================================================== */
.lt-cot { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.lt-bac { display: flex; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-md); background: var(--card); }
.lt-bac.brand  { border-left-color: var(--brand); }
.lt-bac.green  { border-left-color: var(--green); }
.lt-bac.blue   { border-left-color: var(--blue); }
.lt-bac.amber  { border-left-color: var(--amber); }
.lt-bac.purple { border-left-color: var(--purple, #8A5CF6); }
.lt-so { flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.lt-chu { flex: 1; min-width: 0; }
.lt-chu b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.lt-chu p { margin: 0 0 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.lt-thuong { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: var(--amber-soft);
  color: var(--amber); font-size: 11.5px; font-weight: 600; }
.lt-thuong svg { width: 13px; height: 13px; }
.lt-ng { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.lt-ng .who { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--card-2);
  font-size: 11.5px; color: var(--ink-2); }

/* =====================================================================
   QUÁ TRÌNH LÀM VIỆC
   ===================================================================== */
.qt-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.qt-the { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 14px; background: var(--card); }
.qt-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.qt-dau .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qt-dau .chu b { font-size: 13.5px; color: var(--ink); }
.qt-dau .chu i { font-style: normal; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qt-moc { position: relative; padding-left: 15px; }
.qt-moc::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
  border-left: 1.5px dashed var(--line); }
.qt-m { position: relative; padding: 0 0 11px; }
.qt-m:last-child { padding-bottom: 0; }
.qt-m .cham { position: absolute; left: -15px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.qt-m.dang .cham { border-color: var(--green); background: var(--green); }
.qt-m b { display: block; font-size: 13px; color: var(--ink); }
.qt-m i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.qt-ghi { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.qt-ghi svg { width: 13px; height: 13px; vertical-align: -2px; }

/* --- Màn hẹp --- */
@media (max-width: 1100px) {
  .bt-lay.ba-cot { grid-template-columns: 264px minmax(0, 1fr); }
  .bt-lay.ba-cot .bt-phai { display: none; }
}
@media (max-width: 880px) {
  .bt-lay.ba-cot { grid-template-columns: minmax(0, 1fr); }
  .sd-vung { min-height: 380px; }
  .sd-thanh { gap: 6px; }
  .sd-nhom-nut.phai { margin-left: 0; width: 100%; }
}

/* --- Giao diện tối --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sd-vung { background-image: radial-gradient(circle, #2E3340 1px, transparent 1px); }
  :root:not([data-theme="light"]) .sd-day path { stroke: #454B59; }
  :root:not([data-theme="light"]) .tc-du { background: #17233A; color: #6FA6FF; }
}
:root[data-theme="dark"] .sd-vung { background-image: radial-gradient(circle, #2E3340 1px, transparent 1px); }
:root[data-theme="dark"] .sd-day path { stroke: #454B59; }
:root[data-theme="dark"] .tc-du { background: #17233A; color: #6FA6FF; }

/* =====================================================================
   TÀI LIỆU TRONG BÀI, BÌNH LUẬN CÓ ĐÍNH KÈM
   ===================================================================== */
.bt-anh-1.la-tep { width: 150px; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 8px 10px; background: var(--card-2); }
.bt-anh-1 .tep-ten { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.tep-duoi { flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 22px;
  padding: 0 5px; border-radius: 5px; background: #1877F2; color: #fff; font-size: 10.5px; font-weight: 700;
  align-self: flex-start; }
.tep-duoi.pdf { background: #E5252A; }
.bt-ds-tep { display: grid; gap: 6px; margin-top: 10px; }
.bt-tep { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
  background: var(--card-2); border-radius: var(--r-md); }
.bt-tep .tep-duoi { align-self: center; }
.tep-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tep-chu b { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tep-chu i { font-style: normal; font-size: 12px; color: var(--muted); }
.bt-tep .icon-btn svg { color: #1877F2; }

.bt-o-bl { align-items: center; }
.bl-o { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); background: var(--card-2); border-radius: 999px; padding: 2px 6px 2px 0; }
.bl-o:focus-within { border-color: var(--brand); background: var(--card); }
.bt-o-bl .bl-o input { border: 0; background: transparent; }
.bl-nut { flex: none; width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.bl-nut:hover { background: var(--line-2); color: var(--ink-2); }
.bl-nut svg { width: 18px; height: 18px; }
.bl-nut input { display: none; }
.bl-nut.gui { color: var(--brand-ink); }
.bl-cho-gui { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px 40px;
  font-size: 12.5px; color: var(--ink-2); }
.bl-cho-gui svg { width: 14px; height: 14px; }
.bl-cho-gui span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-bl .bt-tep { margin-top: 6px; }
.bl-dinh { display: block; margin-top: 6px; max-width: 240px; border-radius: var(--r-md); overflow: hidden; }
.bl-dinh img, video.bl-dinh { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.o-link { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13px; }
.icon-btn.doc svg { transform: rotate(90deg); }

/* =====================================================================
   NHÓM — theo 1Office
   ===================================================================== */
.nh-khung { padding: 0; overflow: hidden; }
.nh-dau { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 0 18px; border-bottom: 1px solid var(--line-2); }
.nh-dau > button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px;
  color: var(--muted); padding: 16px 0 13px; border-bottom: 3px solid transparent; }
.nh-dau > button.chon { color: var(--ink); border-bottom-color: var(--brand); }
.nh-dau .grow { flex: 1; }
.nh-tim { display: flex; align-items: center; gap: 6px; color: var(--muted); padding: 8px 0; }
.nh-tim svg { width: 17px; height: 17px; }
.nh-tim input { border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; width: 150px; color: var(--ink); }
.nh-khung .empty { padding: 34px 18px; }

.nh-anh { flex: none; display: block; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.nh-anh.trong { display: grid; place-items: center; color: #A7AAB0; }
.nh-anh.nho { width: 40px; height: 40px; } .nh-anh.nho svg { width: 20px; height: 20px; }
.nh-anh.vua { width: 64px; height: 64px; } .nh-anh.vua svg { width: 30px; height: 30px; }
.nh-anh.to { width: 104px; height: 104px; border: 4px solid var(--card); } .nh-anh.to svg { width: 48px; height: 48px; }
.nh-anh.lon { width: 116px; height: 116px; border: 4px solid var(--card); } .nh-anh.lon svg { width: 52px; height: 52px; }

.nh-ds { display: grid; }
.nh-dong { display: flex; align-items: center; gap: 8px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line-2); }
.nh-dong[hidden], .nh-the[hidden] { display: none; }
.nh-mo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 0; }
.nh-mo .chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-mo b { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.nh-mo i { font-style: normal; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.nh-mo i svg { width: 14px; height: 14px; }
.nh-sao { color: #F7B928; display: inline-grid; } .nh-sao svg { width: 15px; height: 15px; }

.nh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 18px; }
.nh-the { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  display: flex; flex-direction: column; }
.nh-the-mo { border: 0; background: transparent; cursor: pointer; padding: 0 0 6px; display: flex;
  flex-direction: column; align-items: center; text-align: center; }
.nh-bia { display: block; width: 100%; height: 96px; overflow: hidden; }
.nh-bia img, .nh-bia-to img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nh-bia-mac { display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #FFE3D6, #FDF1D8 55%, #E9F3E4); }
.nh-bia-mac img { width: auto !important; height: 70% !important; object-fit: contain !important; opacity: .9; }
.nh-the-mo .nh-anh { margin-top: -52px; }
.nh-the-mo b { font-size: 16px; font-weight: 600; color: var(--ink); margin: 10px 12px 6px; }
.nh-the-mo i { font-style: normal; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.nh-the-mo i svg { width: 14px; height: 14px; }
.nh-the-nut { display: flex; justify-content: center; padding: 8px 12px 16px; margin-top: auto; }
.nh-da { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid #B9D3FB; color: #1877F2; font-size: 13px; font-weight: 500; background: var(--card); }
.nh-da svg { width: 14px; height: 14px; }

.nh-ve { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted); padding: 0 0 2px; justify-self: start; }
.nh-ve:hover { color: var(--ink); }
.nh-ve svg { width: 15px; height: 15px; }
.nh-trang-dau { padding: 0; overflow: hidden; }
.nh-bia-to { height: 220px; overflow: hidden; }
.nh-thong { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 0 20px 18px; }
.nh-thong .nh-anh { margin-top: -58px; }
.nh-ten { flex: 1; min-width: 180px; }
.nh-ten h2 { font-size: 22px; margin: 0 0 4px; }
.nh-ten span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.nh-ten span svg { width: 14px; height: 14px; }
.nh-nut { display: flex; align-items: center; gap: 6px; }
.nh-tab-bai { display: flex; gap: 8px; flex-wrap: wrap; }
.nh-tab-bai button { border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit;
  font-size: 13.5px; padding: 7px 16px; border-radius: 999px; color: var(--ink-2); }
.nh-tab-bai button.chon { background: var(--brand); border-color: var(--brand); color: #fff; }
.nh-tl { display: grid; gap: 10px; padding: 14px; }
.nh-tl-1 { display: grid; gap: 4px; }
.nh-tl-ai { font-size: 12px; color: var(--muted); padding-left: 4px; }
.nh-tl-ai a { color: #1877F2; }
.nh-xin { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.nh-xin b { flex: 1; font-size: 13.5px; }
.nh-khac { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.nh-khac:last-child { border-bottom: 0; }
.nh-khac .chu { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nh-khac-ten { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; }
.nh-khac-ten:hover { text-decoration: underline; }
.nh-khac i { font-style: normal; font-size: 12px; color: var(--muted); }
.nh-tt h4 { font-size: 15px; margin: 0 0 10px; }
.nh-tt p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.nh-tt p.mo { color: var(--muted); }
.nh-tt hr { border: 0; border-top: 1px solid var(--line-2); margin: 16px 0; }
.nh-chon-tv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px;
  max-height: 240px; overflow-y: auto; padding: 4px 0; }
.nh-tv-1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.nh-tv-1 label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nh-qt-chon { font-size: 12px; color: var(--muted); }
.nh-chon-anh { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .nh-bia-to { height: 140px; }
  .nh-thong .nh-anh.lon { width: 88px; height: 88px; margin-top: -44px; }
  .nh-dau { gap: 14px; }
  .nh-tim input { width: 110px; }
}

/* =====================================================================
   CHAT NHÓM — khung nổi góc phải dưới
   ===================================================================== */
.chat-nhom { position: fixed; right: 16px; bottom: 0; z-index: 90; width: 340px; max-width: calc(100vw - 16px);
  height: 460px; max-height: calc(100dvh - 80px); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2); }
.chat-nhom.thu { height: auto; }
.chat-nhom.thu .cn-than, .chat-nhom.thu .cn-chan { display: none; }
.chat-nhom.thu .cn-dau { cursor: pointer; }
.cn-dau { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--line-2); }
.cn-dau b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dau .nh-anh.nho { width: 30px; height: 30px; }
.cn-dau .grow { flex: 1; }
.cn-than { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cn-trong { margin: auto 0 0; text-align: center; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cn-trong b { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.cn-ngay { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 2px; }
.cn-tin { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; }
.cn-tin.toi { align-self: flex-end; flex-direction: row-reverse; }
.cn-tin i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin: 0 4px 2px; }
.cn-tin.toi i { text-align: right; }
.cn-tin p { margin: 0; padding: 8px 12px; border-radius: 18px; background: var(--card-2);
  font-size: 13.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.cn-tin.toi p { background: var(--brand); color: #fff; }
.cn-chan { display: flex; align-items: center; gap: 4px; padding: 8px 8px 10px; border-top: 1px solid var(--line-2); }
.cn-chan input { flex: 1; min-width: 0; border: 0; background: var(--card-2); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13.5px; outline: none; color: var(--ink); }
@media (max-width: 520px) {
  .chat-nhom { right: 0; width: 100vw; max-width: 100vw; height: 70dvh; }
}

/* =====================================================================
   THÔNG BÁO: trả lời nhanh, hộp Thảo luận
   ===================================================================== */
.noti-tl { display: flex; align-items: center; gap: 2px; margin-top: 8px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 2px 4px 2px 12px; }
.noti-tl:focus-within { border-color: var(--brand); }
.noti-tl input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px; padding: 7px 0; color: var(--ink); }
.tl-khung { display: grid; gap: 12px; }
.tl-bai { display: flex; gap: 10px; padding: 12px; background: var(--card-2); border-radius: var(--r-md); }
.tl-bai .chu { min-width: 0; }
.tl-bai b { font-size: 13.5px; }
.tl-bai i { font-style: normal; font-size: 12px; color: var(--muted); }
.tl-bai p { margin: 4px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-bai a { font-size: 12.5px; color: #1877F2; }
.tl-ds { max-height: 52vh; overflow-y: auto; padding: 2px 4px 2px 0; }
.hop-chan .tl-o { flex: 1; padding: 0; }

/* =====================================================================
   THẢO LUẬN DÙNG CHUNG — icon ở mỗi dòng và ngăn kéo bên phải
   ===================================================================== */
.nut-tl { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: transparent; cursor: pointer; display: grid; place-items: center; color: #A7AAB0; }
.nut-tl:hover { background: var(--card-2); color: var(--ink-2); }
.nut-tl.co { color: #1877F2; }
.nut-tl svg { width: 19px; height: 19px; }
.so-tl { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--card); }

.ngan-tl { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(430px, 100vw);
  display: flex; flex-direction: column; background: var(--card);
  border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(29,35,46,.12);
  animation: nt-vao .18s ease-out; }
@keyframes nt-vao { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ngan-tl { animation: none; } }
.nt-dau { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px 10px 18px; }
.nt-dau .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-dau b { font-size: 15.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-dau i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.nt-tab { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line-2); }
.nt-tab button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--muted); padding: 8px 0 10px; border-bottom: 2px solid transparent; }
.nt-tab button.chon { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 500; }
.nt-than { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.nt-trong { margin: auto 0; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; padding: 0 12px; }
.nt-tin { display: flex; gap: 9px; }
.nt-tin-than { flex: 1; min-width: 0; }
.nt-bong { background: var(--card-2); border-radius: 12px; padding: 9px 12px; }
.nt-bong > b { display: block; font-size: 13px; color: var(--brand-ink); margin-bottom: 2px; }
.nt-chu { font-size: 13.5px; line-height: 1.55; color: var(--ink); word-break: break-word; }
.nt-chu a { color: #1877F2; word-break: break-all; }
.nt-chu ul, .nt-chu ol { margin: 4px 0; padding-left: 20px; }
.nt-bong .bt-tep { margin-top: 6px; background: var(--card); }
.nt-tin-chan { display: flex; gap: 14px; padding: 4px 12px 0; font-size: 11.5px; color: var(--muted); }
.nt-tin-chan button { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: var(--ink-2); font-weight: 500; }
.nt-tin-chan button:hover { text-decoration: underline; }
.nt-hd { display: flex; flex-direction: column; gap: 10px; position: relative; }
.nt-hd-1 { display: flex; gap: 10px; }
.nt-hd-cham { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; }
.nt-hd-cham svg { width: 13px; height: 13px; }
.nt-hd-1 > div { flex: 1; background: var(--card-2); border-radius: var(--r-md); padding: 8px 12px; }
.nt-hd-1 p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.nt-hd-1 i { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.nt-hd-1 i svg { width: 12px; height: 12px; }
.nt-soan { border-top: 1px solid var(--line-2); padding: 6px 12px 12px; }
.nt-soan[hidden] { display: none; }
.nt-cong-cu { display: flex; align-items: center; gap: 2px; padding-bottom: 6px; }
.nt-cong-cu button { width: 30px; height: 28px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; display: grid; place-items: center; }
.nt-cong-cu button:hover { background: var(--card-2); }
.nt-cong-cu svg { width: 16px; height: 16px; }
.nt-so { font-size: 12px; font-weight: 700; }
.nt-vach { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.nt-o { display: flex; align-items: flex-end; gap: 2px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card-2); padding: 3px 4px 3px 12px; }
.nt-o:focus-within { border-color: var(--brand); background: var(--card); }
.nt-o textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; resize: none;
  font: inherit; font-size: 13.5px; line-height: 1.45; padding: 7px 0; max-height: 180px; color: var(--ink); }
#nt-dinh .bl-cho-gui { margin: 0 0 6px 4px; }
/* Khối thông tin phiếu trên đầu ngăn kéo */
.nt-tt { margin: 0 14px 8px; padding: 10px 12px 6px; background: var(--card-2); border-radius: var(--r-md); }
.nt-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.nt-tt:not(.mo) .nt-cap:nth-child(n+5) { display: none; }
.nt-cap { display: flex; flex-direction: column; min-width: 0; }
.nt-cap span { font-size: 11.5px; color: var(--muted); }
.nt-cap b { font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-tt.mo .nt-cap b { white-space: normal; }
.nt-tt-nut { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.nt-tt-nut button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px;
  color: #1877F2; padding: 2px 0; display: inline-flex; align-items: center; gap: 4px; }
.nt-tt-nut button svg { width: 13px; height: 13px; }
.nt-tt-nut .grow { flex: 1; }
/* Dòng đang được thảo luận: tô sáng để biết thông báo đưa mình tới phiếu nào */
tr.dong-sang > td { background: #FFF6E5 !important; }
tr.dong-sang > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
/* Màn rộng: nội dung lùi sang trái nhường chỗ cho ngăn kéo, không bị che */
@media (min-width: 1100px) {
  body.co-ngan .main { padding-right: min(430px, 100vw); }
}

/* =====================================================================
   NÉN ẢNH: ô chọn ảnh trong biểu mẫu, thanh tiến trình
   ===================================================================== */
.f-anh .cc-them { margin-top: 6px; }
.f-anh-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.f-anh-ds:empty { display: none; }
.f-anh-1 { position: relative; width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--card-2); }
.f-anh-1 img, .f-anh-ds a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-anh-ds > a { width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); display: block; }
.f-anh-1 .icon-btn { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; }
.f-anh-1 .icon-btn svg { width: 11px; height: 11px; }
.f-anh-pdf { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  width: 100%; height: 100%; min-width: 64px; min-height: 64px; font-size: 11px; font-weight: 700; color: #E5252A; text-decoration: none; }
.f-anh-pdf i { font-style: normal; font-weight: 400; font-size: 9.5px; color: var(--muted);
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-anh-nhac { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.cap-anh .gia-tri { white-space: normal; }
.lb-anh { display: inline-flex; align-items: center; gap: 3px; }
.lb-anh img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.lb-anh i { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.tien-do-nen { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 130;
  min-width: 240px; padding: 10px 14px; border-radius: var(--r-lg); background: #1D232E; color: #fff;
  font-size: 13px; box-shadow: var(--shadow-2); display: grid; gap: 7px; }
.tdn-thanh { height: 5px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.tdn-thanh i { display: block; height: 100%; background: var(--brand); transition: width .2s; }

/* =====================================================================
   BẢNG KIỂU LARK: lọc nhiều điều kiện, sắp xếp nhiều tầng, nhóm, view,
   tô màu có điều kiện, độ cao hàng, đóng băng cột đầu, tìm có tô sáng
   ===================================================================== */
.lh-vach { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.btn.cong-cu { background: transparent; border-color: transparent; color: var(--ink-2); padding-left: 9px; padding-right: 9px; }
.btn.cong-cu:hover { background: var(--card-2); }
.btn.cong-cu.dang-bat { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }

/* Hàng view */
.bv-hang { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.bv-nhan { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-right: 2px; }
.bv-nhan svg { width: 14px; height: 14px; }
.bv, .bv-them, .bv-luu { border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--ink-2); border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 5px; }
.bv svg { width: 13px; height: 13px; }
.bv:hover, .bv-them:hover { border-color: var(--brand); color: var(--brand-ink); }
.bv.chon, .bv-o.chon .bv { background: var(--brand); border-color: var(--brand); color: #fff; }
.bv-o { display: inline-flex; align-items: center; }
.bv-o .bv { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bv-o .bv:only-child { border-radius: 999px; }
.bv-menu { border: 1px solid var(--line); border-left: 0; background: var(--card); cursor: pointer; font-size: 13px;
  color: var(--muted); padding: 3px 8px; border-radius: 0 999px 999px 0; line-height: 1.2; }
.bv-o.chon .bv-menu { background: var(--brand); border-color: var(--brand); color: #fff; }
.bv-them { border-style: dashed; color: var(--muted); }
.bv-them svg { width: 13px; height: 13px; }
.bv-luu { background: #FFF6E5; border-color: #F3D9A4; color: #B7791F; font-weight: 500; }

/* Hộp Lọc / Sắp xếp / Nhóm / Tô màu */
.bl-dong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 0; }
.bl-dong select, .bl-dong input { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink); min-width: 0; }
.bl-dong > select:first-of-type { flex: 1 1 140px; }
.bl-dong input { flex: 1 1 140px; }
.bl-o-trong { flex: 1 1 140px; }
.bl-tang { font-size: 12.5px; color: var(--muted); min-width: 62px; }
.bl-cach { font-size: 13px; color: var(--ink-2); padding-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.bl-cach select { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 13px; }
.bl-trong { font-size: 12.5px; color: var(--muted); margin: 4px 0; line-height: 1.6; }
.bl-chan { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.bl-chan .grow { flex: 1; }
.bl-dem { font-size: 12px; color: var(--muted); }
.bl-o-mau { display: inline-flex; gap: 4px; }
.bl-o-mau button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; }
.bl-o-mau button.chon { outline: 2px solid var(--ink); outline-offset: 1px; }
.bl-cao { display: grid; gap: 8px; }
.bl-cao button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); padding: 10px 12px; font: inherit; }
.bl-cao button.chon { border-color: var(--brand); background: var(--brand-soft); }
.bl-cao b { font-size: 13.5px; } .bl-cao i { font-style: normal; font-size: 12px; color: var(--muted); }
.bl-chung { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; cursor: pointer; }
.bl-chung span { display: flex; flex-direction: column; }
.bl-chung b { font-size: 13.5px; } .bl-chung i { font-style: normal; font-size: 12px; color: var(--muted); }
.chip-loc.nhom { background: #F3EDFF; color: var(--purple); border-color: #D8C8FB; }

/* Nhóm theo trường */
table.grid tr.nhom-dau td { background: var(--card-2); padding: 7px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.nhom-nut { border: 0; background: transparent; cursor: pointer; font-size: 12px; color: var(--ink-2); width: 20px; }
.nhom-ten { color: var(--muted); } .nhom-ten b { color: var(--ink); }
.nhom-so { margin-left: 8px; font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px; }

/* Tô màu cả dòng */
table.grid tbody tr[style*="--nen-dong"] > td { background: var(--nen-dong); }

/* Độ cao hàng */
table.grid.cao-thap td { padding-top: 5px; padding-bottom: 5px; }
table.grid.cao-thap .cell-sub { display: none; }
table.grid.cao-cao td { padding-top: 18px; padding-bottom: 18px; }

/* Đóng băng cột đầu: ô chọn + cột dữ liệu đầu tiên đứng yên khi kéo ngang */
table.grid .o-chon-td { width: 42px; min-width: 42px; }
table.grid.dong-bang tr > :nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--card); }
table.grid.dong-bang tr > :nth-child(2) { position: sticky; left: 42px; z-index: 2; background: var(--card);
  box-shadow: 1px 0 0 var(--line); }
table.grid.dong-bang thead tr > :nth-child(-n+2) { z-index: 3; background: var(--card-2); }
table.grid.dong-bang tbody tr[style*="--nen-dong"] > :nth-child(-n+2) { background: var(--nen-dong); }

/* Tìm kiếm */
mark.tim-sang { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }
.tim-dem { font-size: 12px; color: var(--muted); min-width: 44px; text-align: center; }
table.grid tbody tr.dong-tim > td { box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber); }
table.grid tbody tr.dong-tim > td:first-child { box-shadow: inset 3px 0 0 var(--amber), inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber); }

/* ============================================================
   LỊCH KIỂU LARK (Lịch chụp · chế độ Lịch)
   ============================================================ */
.ll { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.ll-trai { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--head-h) + 8px); }
.ll-tao { justify-content: center; width: 100%; }
.ll-chinh { padding: 0; overflow: hidden; min-width: 0; }
.ll-dau { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ll-dau h3 { margin: 0 0 0 6px; font-size: 16px; font-weight: 600; }
.ll-dau .lh-kieu { margin-left: 0; padding-bottom: 0; }
.ll-cuon { overflow-x: auto; }

/* Lịch nhỏ */
.ll-mini { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; }
.ll-mini-dau { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; font-size: 13px; }
.ll-mini-dau .tc-nut { width: 24px; height: 24px; }
.ll-mini-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ll-mini-luoi span { font-size: 10.5px; color: var(--muted); padding: 2px 0; }
.ll-mini-luoi button {
  position: relative; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12px;
  height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
}
.ll-mini-luoi button:hover { background: var(--card-2); }
.ll-mini-luoi button.khac { color: var(--muted); opacity: .55; }
.ll-mini-luoi button.trong-khung { background: var(--brand-soft); border-radius: 4px; }
.ll-mini-luoi button.nay { color: var(--brand-ink); font-weight: 700; }
.ll-mini-luoi button.chon { background: var(--brand); color: #fff; border-radius: 50%; font-weight: 600; }
.ll-mini-luoi button.co-ca::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--blue);
}
.ll-mini-luoi button.chon.co-ca::after { background: #fff; }

/* Bật tắt loại lịch + chú giải màu */
.ll-loai { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ll-loai > b { font-size: 12px; color: var(--muted); font-weight: 600; }
.ll-loai-1 { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ll-loai-1 input { accent-color: var(--brand); margin: 0; }
.ll-loai-1 small { color: var(--muted); }
.ll-loai i, .ll-chu-giai i, .ll-pop-dau > i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ll-chu-giai { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-2); }
.ll-chu-giai span { display: inline-flex; align-items: center; gap: 5px; }
.ll i.blue, .ll-pop i.blue { background: var(--blue); }
.ll i.green, .ll-pop i.green { background: var(--green); }
.ll i.amber, .ll-pop i.amber { background: var(--amber); }
.ll i.red, .ll-pop i.red { background: var(--red); }
.ll i.purple, .ll-pop i.purple { background: var(--purple); }
.ll i.grey, .ll i.xam, .ll-pop i.grey, .ll-pop i.xam { background: #9A9DA3; }
.ll i.xam.cho, .ll-pop i.xam.cho { background: repeating-linear-gradient(135deg, #9A9DA3 0 3px, var(--line-2) 3px 6px); }
.ll i.sn, .ll-pop i.sn { background: var(--sinh-nhat); }

/* Lưới Ngày / Tuần */
.ll-luoi { max-height: calc(100vh - 290px); min-height: 420px; overflow-y: auto; position: relative; }
.ll-luoi.bay { min-width: 720px; }
.ll-dinh { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); }
.ll-hang { display: grid; grid-template-columns: 56px repeat(var(--so), minmax(0, 1fr)); }
.ll-goc { font-size: 11px; color: var(--muted); text-align: right; padding: 4px 8px 4px 0; }
.ll-thu {
  border: 0; background: none; font: inherit; cursor: pointer; color: var(--ink-2);
  display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0 6px;
}
.ll-thu span { font-size: 12px; }
.ll-thu b { font-size: 18px; font-weight: 500; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; }
.ll-thu:hover b { background: var(--card-2); }
.ll-thu.nay { color: var(--brand-ink); }
.ll-thu.nay b { background: var(--brand); color: #fff; }
.ll-cangay { border-top: 1px solid var(--line-2); min-height: 28px; }
.ll-cangay .ll-goc { align-self: center; }
.ll-cn-o { border-left: 1px solid var(--line-2); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ll-than { position: relative; }
.ll-cot-gio { position: relative; padding: 0; }
.ll-cot-gio span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.ll-cot {
  position: relative; border-left: 1px solid var(--line-2); cursor: cell;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px),
                    linear-gradient(transparent calc(var(--gio) / 2), color-mix(in srgb, var(--line-2) 55%, transparent) calc(var(--gio) / 2), transparent calc(var(--gio) / 2 + 1px));
  background-size: 100% var(--gio);
}
.ll-cot.nay { background-color: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.ll-bay-gio { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.ll-bay-gio::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* Một ca trên lưới giờ: nền nhạt, vạch màu bên trái như Lark */
.ll-sk {
  position: absolute; z-index: 1; overflow: hidden; text-align: left; cursor: pointer;
  border: 0; border-left: 3px solid; border-radius: 5px; padding: 3px 6px; font: inherit;
  display: flex; flex-direction: column; gap: 1px; box-shadow: 0 0 0 1px var(--card);
}
.ll-sk b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-sk span { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-sk.thap { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.ll-sk:hover { filter: brightness(.97); z-index: 2; box-shadow: var(--shadow-2); }
.ll-sk.blue, .ll-chip.blue { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.ll-sk.green, .ll-chip.green { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.ll-sk.amber, .ll-chip.amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.ll-sk.red, .ll-chip.red { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.ll-sk.purple, .ll-chip.purple { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.ll-sk.grey, .ll-chip.grey, .ll-chip.xam { background: var(--line-2); border-color: #9A9DA3; color: var(--ink-2); }
.ll-chip.xam.cho { background: repeating-linear-gradient(135deg, var(--line-2) 0 6px, var(--card) 6px 12px); }
.ll-chip.sn { background: var(--sn-nen); border-color: var(--sinh-nhat); color: var(--sinh-nhat); }
/* Boss 27/09: ngày lễ Việt Nam màu xanh ngọc; lễ nghỉ đậm, ngày kỷ niệm nhạt */
.ll-chip.le { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.ll-chip.kyniem { background: var(--cyan-soft); border-color: #7DD6E0; color: #0E7C8A; }
.ll-chip.am { background: #FFF6CC; border-color: #F5B400; color: #6B5300; }
.ll i.le, .ll-pop i.le { background: var(--cyan); }
.ll i.kyniem, .ll-pop i.kyniem { background: #7DD6E0; }
.ll i.am, .ll-pop i.am { background: #F5B400; }
/* Ngày lễ trong ô tháng: lễ đỏ, kỷ niệm tím nhạt, mùng 1 và rằm thanh vàng (boss 27/09: xám trùng màu nhân sự nghỉ, boss chọn vàng) */
.ll-thanh.le { background: var(--cyan); }
.ll-thanh.kyniem { background: #7DD6E0; color: #0B4F58; }
.ll-thanh.am { background: #FFE58A; color: #6B5300; }

/* Chip: dùng ở hàng Cả ngày và trong ô tháng */
.ll-chip {
  display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  border: 0; border-left: 3px solid; border-radius: 4px; padding: 2px 5px; font: inherit; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ll-chip i { font-style: normal; font-weight: 600; flex: none; }
.ll-chip svg { width: 12px; height: 12px; flex: none; }

/* Tháng */
.ll-thang { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ll-th-thu { font-size: 12px; color: var(--muted); padding: 8px; text-align: center; border-bottom: 1px solid var(--line); }
.ll-o {
  min-height: 112px; padding: 4px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: cell;
}
.ll-o:nth-child(7n) { border-right: 0; }
.ll-o.khac { background: var(--card-2); }
.ll-o.khac .ll-so { color: var(--muted); }
.ll-so {
  align-self: flex-start; border: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; color: var(--ink); padding: 0;
}
.ll-so:hover { background: var(--card-2); }
.ll-o.nay .ll-so { background: var(--brand); color: #fff; font-weight: 600; }
.ll-them { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--muted); text-align: left; cursor: pointer; padding: 1px 5px; }
.ll-them:hover { color: var(--brand-ink); }

/* Ô chi tiết khi bấm vào ca */
.ll-pop {
  position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.ll-pop-dau { display: flex; align-items: flex-start; gap: 8px; }
.ll-pop-dau > i { margin-top: 5px; }
.ll-pop-dau b { flex: 1; font-size: 15px; line-height: 1.35; }
.ll-pop-dong { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); line-height: 1.45; }
.ll-pop-dong svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--muted); }
.ll-pop-dong b { color: var(--ink); font-weight: 600; }
.ll-pop-dong .chu-do { color: var(--red); }
.ll-pop-dong .ma-lh { margin-left: 6px; }
.ll-pop-chan { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line-2); }

@media (max-width: 900px) {
  .ll { grid-template-columns: 1fr; }
  .ll-trai { position: static; order: 2; }
  .ll-luoi { max-height: 70vh; }
  .ll-o { min-height: 76px; }
}
@media (max-width: 560px) {
  .ll-dau h3 { order: -1; width: 100%; margin: 0 0 4px; }
  .ll-o { min-height: 64px; padding: 2px; }
  .ll-o .ll-chip i { display: none; }
  .ll-chip { font-size: 10.5px; padding: 1px 3px; }
}
.ll-mini-luoi button { width: 26px; justify-self: center; }

/* ============================================================
   APP CÔNG VIỆC (theo 1Office)
   ============================================================ */
.lien-ket { border: 0; background: none; padding: 0; font: inherit; color: var(--tb-cty); cursor: pointer; text-align: left; }
.lien-ket:hover { text-decoration: underline; }
.cv-tre { color: var(--red) !important; font-weight: 600; }
.cv-nho { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cv-mau { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600;
  background: var(--amber-soft); color: var(--amber); vertical-align: middle; }
i.cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
i.cham.blue { background: var(--blue); } i.cham.green { background: var(--green); } i.cham.amber { background: var(--amber); }
i.cham.red { background: var(--red); } i.cham.purple { background: var(--purple); } i.cham.grey { background: #9A9DA3; }
.cv-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.cv-hai > .card { margin: 0; }
.cv-khoi-than { padding: 12px 16px 16px; }

/* Ô trong bảng */
.cv-ten-o { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.cv-ten-o:hover { color: var(--brand-ink); }
.cell-sub svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.cv-nhom-ng { display: inline-flex; align-items: center; }
.cv-nhom-ng .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.cv-nhom-ng i { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.cv-thanh { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.cv-thanh .bar { flex: 1; }
.cv-thanh b { font-size: 12px; font-weight: 600; min-width: 32px; text-align: right; }
.cv-tt-nut { border: 0; background: none; padding: 0; cursor: pointer; }
.cv-tt-nut:disabled { cursor: default; }
.kb-the .cv-thanh { margin: 4px 0; }

/* Menu nhỏ (trạng thái, thao tác thêm) */
.cv-menu { position: fixed; z-index: 120; min-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; display: flex; flex-direction: column; }
.cv-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink); }
.cv-menu button:hover:not(:disabled) { background: var(--card-2); }
.cv-menu button:disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }
.cv-menu button svg { width: 15px; height: 15px; color: var(--muted); }
.cv-menu-vach { height: 1px; background: var(--line-2); margin: 4px 0; }

/* Trang chi tiết */
.cv-dau { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.cv-dau-trai { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.cv-duong { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cv-duong svg { width: 14px; height: 14px; vertical-align: -2px; }
.cv-dau h2 { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.3; }
.cv-dau-pill { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cv-dau-pill .pill svg { width: 12px; height: 12px; }
.cv-nut-dau { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-duyet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px;
  background: var(--purple-soft); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); border-radius: var(--r-lg); }
.cv-duyet > svg { width: 22px; height: 22px; color: var(--purple); flex: none; }
.cv-duyet div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cv-duyet span { color: var(--ink-2); }
.cv-ct { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.cv-trai { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-phai { position: sticky; top: calc(var(--head-h) + 10px); height: calc(100vh - 200px); min-height: 460px; }
.cv-khoi { margin: 0; }
.cv-khoi > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.cv-khoi > header h3 { font-size: 14px; margin: 0; }
.cv-dem { font-size: 12px; color: var(--muted); background: var(--card-2); border-radius: 10px; padding: 1px 8px; }
.cv-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-hang { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 16px;
  border-bottom: 1px dashed var(--line-2); font-size: 13px; align-items: center; }
.cv-hang > span { color: var(--muted); }
.cv-ds-ng { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cv-them-ng { width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--line); background: none; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--muted); padding: 0; }
.cv-them-ng:hover { border-color: var(--brand); color: var(--brand-ink); }
.cv-them-ng svg { width: 13px; height: 13px; }
.cv-quyen { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.cv-quyen span { display: flex; align-items: center; gap: 4px; }
.cv-quyen span.co { color: var(--ink); }
.cv-quyen svg { width: 13px; height: 13px; }
.cv-mota { padding: 12px 16px 16px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.cv-mota p { margin: 0; }
.cv-dv-ds { display: flex; flex-direction: column; }
.cv-dv { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.cv-dv input { accent-color: var(--green); width: 16px; height: 16px; margin: 0; flex: none; }
.cv-dv-ten { flex: 1; min-width: 0; }
.cv-dv.xong .cv-dv-ten { text-decoration: line-through; color: var(--muted); }
.cv-dv-trong { margin: 0; padding: 12px 16px; font-size: 13px; }
.cv-dv-them { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; }
.cv-dv-them > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.cv-dv-them input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit;
  font-size: 13.5px; padding: 6px 2px; color: var(--ink); outline: none; }
.cv-dv-them input:focus { border-bottom-color: var(--brand); }
.cv-con-ds { display: flex; flex-direction: column; }
.cv-con { display: grid; grid-template-columns: minmax(0, 1fr) auto 140px auto; gap: 10px; align-items: center; padding: 9px 16px;
  border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; font-size: 13px; cursor: pointer; text-align: left; color: var(--ink); }
.cv-con:hover { background: var(--card-2); }
.cv-con-ten { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dinh-ds { display: flex; flex-direction: column; }
.cv-dinh { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line-2); }
.cv-dinh .tep-chu { flex: 1; min-width: 0; }
.cv-dinh-anh { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); padding: 0; cursor: zoom-in; flex: none; background: var(--card-2); }
.cv-dinh-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-gio-ds { display: flex; flex-direction: column; }
.cv-gio { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.cv-gio .grow { flex: 1; min-width: 0; }
.cv-ky { padding: 10px 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cv-ky-dau { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.cv-ky-ds { display: flex; flex-direction: column; gap: 2px; }
.cv-ky-1 { color: var(--muted); }
.cv-ky-1.da_ky { color: var(--green); } .cv-ky-1.tu_choi { color: var(--red); } .cv-ky-1.luot { color: var(--amber); font-weight: 600; }
.cv-ky-nut { display: flex; gap: 6px; justify-content: flex-end; }
.cv-bc { padding: 10px 16px 14px; }
.cv-bc .ghi-chu { margin: 0; }

/* Thảo luận nhúng ở cột phải */
.ngan-tl.nhung { position: static; width: auto; height: 100%; z-index: auto; animation: none; box-shadow: none;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ngan-tl.nhung .nt-tab { padding-top: 6px; }

/* Chọn người (form) */
.cv-chon-ng { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.cv-chon-ng button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.cv-chon-ng button.chon { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
.cv-tick { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; cursor: pointer; }
.cv-tick input { accent-color: var(--brand); margin: 0; }
.lf-thu { display: flex; gap: 6px; flex-wrap: wrap; }
.lf-thu label { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 13px; cursor: pointer; }
.qt-ds { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; counter-reset: qt; }
.qt-dong { display: grid; grid-template-columns: 22px minmax(0, 1fr) 76px 28px; gap: 6px; align-items: center; }
.qt-so::before { counter-increment: qt; content: counter(qt) "."; font-size: 12.5px; color: var(--muted); }

/* Tổng quan */
.cv-trong-lon { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 30px 16px; margin-bottom: 14px; }
.cv-trong-lon > svg { width: 30px; height: 30px; color: var(--muted); }
.cv-trong-lon span { color: var(--muted); font-size: 13px; max-width: 520px; }
.cv-trong-nut { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.cv-tat { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; flex-wrap: wrap; }
.cv-tat > svg { width: 18px; height: 18px; color: var(--tb-cty); flex: none; }
.cv-tat div { display: flex; flex-direction: column; gap: 2px; }
.cv-tat .grow { flex: 1; }
.cv-ds-nho { display: flex; flex-direction: column; }
.cv-dong-nho { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--line-2);
  background: none; font: inherit; cursor: pointer; text-align: left; color: var(--ink); width: 100%; }
.cv-dong-nho:hover { background: var(--card-2); }
.cv-dong-nho .cv-thanh { width: 140px; flex: none; }
.cv-dn-ten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.cv-dn-ten b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dn-ten i { font-style: normal; font-size: 12px; color: var(--muted); }
.cv-tt-thanh { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-2); }
.cv-tt-thanh i.blue { background: var(--blue); } .cv-tt-thanh i.green { background: var(--green); }
.cv-tt-thanh i.amber { background: var(--amber); } .cv-tt-thanh i.purple { background: var(--purple); }
.cv-tt-thanh i.grey { background: #B5B8BD; } .cv-tt-thanh i.red { background: var(--red); }
.cv-tt-chu { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.cv-tt-chu span { display: inline-flex; align-items: center; gap: 5px; }

/* Dự án */
.cv-da-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.cv-da { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
button.cv-da:hover { border-color: var(--brand); }
.cv-da-dau { display: flex; align-items: center; gap: 8px; }
.cv-da-dau b { font-size: 14.5px; }
.cv-da-chan { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: auto; }
.cv-da-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cv-da-so > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cv-da-so span { color: var(--muted); font-size: 12px; }
.cv-da-tt .card { padding: 14px 16px; }
.cv-qt { cursor: default; }
.cv-qt-buoc { margin: 0; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.cv-qt-buoc i { color: var(--muted); font-style: normal; }
.cv-lap-nut { white-space: nowrap; }
.cv-loai-ds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* Tuỳ chỉnh: công tắc */
.cv-tn-ds { display: flex; flex-direction: column; }
.cv-tn { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line-2); cursor: pointer; }
.cv-tn-chu { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.cv-tn-chu i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.cv-cong-tac { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line); position: relative;
  cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.cv-cong-tac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cv-cong-tac:checked { background: var(--green); }
.cv-cong-tac:checked::after { left: 19px; }

/* Gantt */
.cv-gantt { padding: 0; overflow: auto; max-height: calc(100vh - 260px); margin-top: 10px; }
.cv-g-cuon { --o: 34px; min-width: calc(220px + var(--so) * var(--o)); }
.cv-g-hang { display: grid; grid-template-columns: 220px calc(var(--so) * var(--o)); border-bottom: 1px solid var(--line-2); }
.cv-g-dau { position: sticky; top: 0; z-index: 2; background: var(--card); }
.cv-g-ten { position: sticky; left: 0; z-index: 1; background: var(--card); padding: 8px 12px; font: inherit; font-size: 12.5px;
  border: 0; border-right: 1px solid var(--line); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
button.cv-g-ten { cursor: pointer; }
button.cv-g-ten:hover { color: var(--brand-ink); }
.cv-g-dau .cv-g-ten { font-weight: 600; color: var(--muted); }
.cv-g-dau { grid-template-columns: 220px repeat(var(--so), var(--o)); }
.cv-g-dau > .cv-g-ngay { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; color: var(--muted); padding: 4px 0; }
.cv-g-ngay b { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cv-g-ngay.cuoi-tuan { background: var(--card-2); }
.cv-g-ngay.nay b { color: #fff; background: var(--brand); border-radius: 50%; width: 20px; height: 20px; line-height: 20px; text-align: center; }
.cv-g-vung { position: relative; display: grid; grid-template-columns: repeat(var(--so), var(--o)); }
.cv-g-vung > i { border-left: 1px solid var(--line-2); }
.cv-g-vung > i.nay { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.cv-g-thanh { position: absolute; top: 7px; bottom: 7px; margin-left: 2px; border-radius: 5px; border: 0; padding: 0; overflow: hidden;
  cursor: pointer; background: var(--line); display: flex; align-items: center; }
.cv-g-thanh > i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .9; }
.cv-g-thanh span { position: relative; font-size: 10.5px; font-weight: 600; padding: 0 6px; color: var(--ink); }
.cv-g-thanh.blue { background: var(--blue-soft); } .cv-g-thanh.blue > i { background: color-mix(in srgb, var(--blue) 45%, transparent); }
.cv-g-thanh.green { background: var(--green-soft); } .cv-g-thanh.green > i { background: color-mix(in srgb, var(--green) 45%, transparent); }
.cv-g-thanh.amber { background: var(--amber-soft); } .cv-g-thanh.amber > i { background: color-mix(in srgb, var(--amber) 45%, transparent); }
.cv-g-thanh.purple { background: var(--purple-soft); } .cv-g-thanh.purple > i { background: color-mix(in srgb, var(--purple) 45%, transparent); }
.cv-g-thanh.grey > i { background: color-mix(in srgb, #9A9DA3 50%, transparent); }
.cv-g-thanh.tre { box-shadow: inset 0 0 0 2px var(--red); }
.tc-viec-ten b { color: var(--ink); }

@media (max-width: 1180px) {
  .cv-ct { grid-template-columns: minmax(0, 1fr); }
  .cv-phai { position: static; height: 560px; }
}
@media (max-width: 760px) {
  .cv-hai, .cv-luoi, .cv-da-so { grid-template-columns: minmax(0, 1fr); }
  .cv-hang { grid-template-columns: 120px minmax(0, 1fr); padding: 8px 12px; }
  .cv-con { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-con .cv-thanh { display: none; }
  .cv-dong-nho .cv-thanh { width: 90px; }
  .cv-nut-dau { width: 100%; }
  .cv-nut-dau .btn { flex: 1 1 auto; justify-content: center; }
  .cv-g-cuon { --o: 28px; }
  .cv-g-hang, .cv-g-dau { grid-template-columns: 130px calc(var(--so) * var(--o)); }
  .cv-g-dau { grid-template-columns: 130px repeat(var(--so), var(--o)); }
}
.cv-mau { align-self: flex-start; }
.cv-khoi > header .grow, .cv-dau .grow { flex: 1; }

/* ============================================================
   APP CÔNG VIỆC — giao diện giống 1Office (26/09)
   ============================================================ */
/* Cột icon trái */
@media (min-width: 861px) { body.co-side-icon:not(.thu-side) .app { grid-template-columns: var(--rail-w) 88px 1fr; } }
.side-icon { padding: 12px 6px 24px; display: flex; flex-direction: column; gap: 4px; }
.si-muc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 8px; border: 0; background: none;
  border-radius: 10px; font: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.si-muc svg { width: 22px; height: 22px; color: var(--muted); }
.si-muc span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.si-muc:hover { background: var(--line-2); }
.si-muc.is-active { background: var(--card-2); color: var(--brand-ink); font-weight: 500; }
.si-muc.is-active svg { color: var(--brand); }
.si-vach { height: 1px; background: var(--line); margin: 8px 12px; }
@media (max-width: 860px) { .side.side-icon { width: 96px; } }

/* Nút + cạnh tiêu đề */
.cv-cong { width: 28px; height: 28px; flex: none; padding: 0; margin-right: 2px; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--brand); border-radius: 6px; background: var(--card); color: var(--brand); }
.cv-cong svg { width: 18px; height: 18px; }
.cv-cong:hover { background: var(--brand-soft); }

/* Hàng tab */
.cv-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 6px; min-width: 0; }
.cv-tab-menu { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--brand); cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.cv-tab-menu:hover { background: var(--brand-soft); }
.cv-tab-menu svg { width: 20px; height: 20px; }
.cv-tab-ds { position: relative; flex: 1; min-width: 0; display: flex; overflow: hidden; white-space: nowrap; }
.cv-tab-ds .tab { flex: none; }
.cv-tab-them, .cv-kieu { flex: none; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; }
.cv-tab-them svg { width: 18px; height: 18px; }
.cv-tab-them.dang, .cv-tab-them:hover { color: var(--brand-ink); }
.cv-kieu { color: var(--brand-ink); font-size: 13px; }
.cv-kieu svg { width: 16px; height: 16px; }
.cv-kieu:hover, .cv-tab-them:hover { background: var(--brand-soft); }
.cv-menu { overflow-y: auto; }
.cv-menu button span { white-space: nowrap; }
.cv-menu button.dang { color: var(--brand-ink); background: var(--brand-soft); font-weight: 500; }
.cv-menu button.dang svg { color: var(--brand); }

/* Ô trong bảng */
.cv-td { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cv-td-ray { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #F4C20D; }
.cv-td-ray > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--blue); }
.cv-td-ray.du > i { width: 100% !important; }
.cv-td-ray > b { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 9px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card); }
.cv-td-ls { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.cv-td-ls svg { width: 16px; height: 16px; }
.cv-td-ls:hover { color: var(--brand-ink); }
.cv-uu { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cv-uu svg { width: 15px; height: 15px; }
.cv-uu.grey svg { color: var(--muted); } .cv-uu.blue svg { color: var(--orange); }
.cv-uu.amber svg { color: var(--amber); } .cv-uu.red svg { color: var(--red); }
.cv-han { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; white-space: nowrap;
  background: var(--line-2); color: var(--ink-2); }
.cv-han.do { background: var(--red-soft); color: var(--red); font-weight: 500; }
.cv-han.xanh { background: var(--green-soft); color: var(--green); }
.cv-trong-nho { padding: 12px 0; font-size: 13px; }
.cv-trong-nho .lien-ket { margin-left: 4px; }
.cv-lich { padding: 0; overflow: hidden; margin-top: 8px; }
.cv-mau-khoi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.cv-mau-khoi > span { flex: 1; min-width: 220px; }

/* Hộp Tuỳ chỉnh tab */
.tt-ds { display: flex; flex-direction: column; }
.tt-dong { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-2); background: var(--card); font-size: 14px; }
.tt-keo { width: 22px; flex: none; display: grid; place-items: center; color: var(--muted); cursor: grab; touch-action: none; }
.tt-keo svg { width: 18px; height: 18px; stroke-width: 2.6; }
.tt-ten { flex: 1; min-width: 0; }
.tt-khoa { color: var(--muted); display: grid; place-items: center; }
.tt-khoa svg { width: 17px; height: 17px; }
.tt-dong.dang-keo { background: var(--card-2); box-shadow: var(--shadow-2); position: relative; z-index: 1; }
.tt-dong .cv-cong-tac:checked { background: var(--brand); }
.tt-dong .cv-cong-tac:disabled { opacity: .75; cursor: not-allowed; }
.tt-mac { border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.tt-form { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tt-form-nut { display: flex; justify-content: flex-end; gap: 6px; }
/* Tiêu đề màn hình đừng bị cắt còn "Công vi..." — chỗ trống lấy bớt từ dải giờ */
@media (min-width: 861px) { .topbar h1 { flex-shrink: 0; max-width: 240px; } }

/* Bảng ứng dụng vẽ lại theo 1Office (26/09): ô to, nền nhạt có viền mảnh
   cùng màu, hình tô đặc, chữ đậm màu hơn và hàng cách nhau thoáng */
.app-panel { width: min(460px, 92vw); }
.app-than { padding: 4px 18px 28px; }
.app-nhom { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); padding: 22px 4px 12px; }
.app-luoi { gap: 10px 6px; }
.app-o { gap: 10px; padding: 10px 2px 8px; border-radius: 14px; }
.app-icon { width: 56px; height: 56px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.app-icon svg { width: 26px; height: 26px; }
.app-ten { font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.app-o.is-mo .app-icon { opacity: .45; }

/* Lịch tháng kiểu Lark (26/09): ô to kín màn hình, chấm màu + giờ + tên, thanh màu cho việc cả ngày */
.ll-thang { grid-template-rows: auto repeat(var(--tuan, 6), minmax(112px, 1fr)); height: max(640px, calc(100vh - 300px)); }
.ll-th-thu { text-align: left; padding: 10px 12px; font-size: 13px; }
.ll-o { padding: 6px 6px 4px; gap: 3px; min-height: 0; overflow: hidden; }
.ll-so { width: auto; min-width: 24px; height: auto; padding: 2px 6px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.ll-o.nay .ll-so { padding: 2px 8px; }
.ll-o.khac .ll-so { color: var(--muted); }
.ll-dong { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-2); padding: 2px 4px; border-radius: 4px; text-align: left; }
.ll-dong:hover { background: var(--card-2); }
.ll-dong .cham { width: 7px; height: 7px; }
.ll-dong b { font-weight: 500; flex: none; color: var(--ink-2); }
.ll-dong span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-thanh { display: block; width: 100%; border: 0; border-radius: 4px; padding: 3px 8px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: #fff; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-thanh.xam { background: #8B8F97; } .ll-thanh.sn { background: var(--green); }
.ll-thanh.xam.cho { background: repeating-linear-gradient(135deg, #8B8F97 0 6px, #A3A7AE 6px 12px); }
.ll-thanh.blue { background: var(--blue); } .ll-thanh.red { background: var(--red); }
.ll-them { font-size: 12.5px; padding: 1px 6px; }
/* Ô nhiều ca: không cho thanh cả ngày bị bóp dẹt mất chữ, phần thừa đã gom vào "x khác" */
.ll-o > .ll-thanh, .ll-o > .ll-dong { flex: none; }
@media (max-width: 900px) { .ll-thang { height: auto; grid-template-rows: auto repeat(var(--tuan, 6), minmax(76px, auto)); } }
@media (max-width: 900px) { .ll-thang .ll-o { max-height: 124px; } }
.ll-thang .ll-them { flex: none; }
/* Việc đã qua: mờ đi như Lark */
.ll-dong.qua, .ll-thanh.qua, .ll-chip.qua, .ll-sk.qua { opacity: .5; }
@media (max-width: 560px) { .ll-dong b { display: none; } .ll-dong, .ll-thanh { font-size: 10.5px; padding: 1px 2px; } .ll-so { font-size: 12px; } }

/* Sơ đồ tổ chức: khung vẽ cao tới đáy màn hình để cây không bị che, bên dưới không trống (boss 26/09) */
@media (min-width: 881px) { .sd-vung { height: max(540px, calc(100dvh - 236px)); max-height: none; } }

/* Phiếu check out / báo cáo tổng */
.pn-form { gap: 14px; }
.pn-luat { white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); border-radius: var(--r-md); padding: 10px 12px; }
.pn-o { display: flex; flex-direction: column; gap: 6px; }
.pn-nhan { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.pn-nhan .sao-do { font-style: normal; }
.pn-goi { font-size: 12px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.pn-tien { display: flex; align-items: center; gap: 6px; }
.pn-tien input { flex: 1; }
.pn-tep { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-tep:empty { display: none; }
.pn-anh { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--card-2); }
.pn-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-anh .f-anh-pdf { width: 100%; height: 100%; }
.pn-anh .icon-btn { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; width: 22px; height: 22px; }
.pn-dau input[type="date"] { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; background: var(--card); color: var(--ink); }
.pn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pn-the { margin: 0; display: flex; flex-direction: column; }
.pn-ds-cau { display: flex; flex-direction: column; }
.pn-cau { display: flex; flex-direction: column; gap: 4px; padding: 9px 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.pn-cau > span { font-size: 12px; color: var(--muted); }
.pn-file { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-file img, .pn-file video { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.pn-xet { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--card-2);
  margin-top: auto; font-size: 13px; }
.pn-xet textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; resize: vertical; background: var(--card); color: var(--ink); }
.pn-xet .btn { align-self: flex-end; }
.pn-chon { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12.5px; background: var(--card); color: var(--ink); }
@media (max-width: 560px) { .pn-luoi { grid-template-columns: minmax(0, 1fr); } }

/* Hộp Sinh nhật sắp tới, dựng theo 1Office */
.sn-tieu { display: inline-flex; align-items: center; gap: 8px; }
.sn-tieu svg { width: 22px; height: 22px; color: var(--sinh-nhat); }
.sn-hop { display: flex; flex-direction: column; gap: 6px; }
.sn-tim { margin: 0 0 4px; }
.sn-thang { padding: 12px 0 16px; border-bottom: 1px solid var(--line-2); }
.sn-thang:last-of-type { border-bottom: 0; }
.sn-thang > b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; letter-spacing: .02em; }
.sn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sn-the { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 20px 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.sn-the .avatar, .sn-the .anh-ns { border-radius: 50%; margin-bottom: 6px; }
.sn-the > b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sn-phong { font-size: 13px; color: var(--muted); }
.sn-ngay { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); margin-top: 4px; }
.sn-ngay svg { width: 16px; height: 16px; color: var(--red); }
.sn-ngay i { font-style: normal; color: var(--muted); }
.sn-con { font-size: 12px; color: var(--sinh-nhat); }

/* App Công việc nền trắng, gọn như 1Office (boss 26/09) */
body.co-side-icon { background: var(--card); }
body.co-side-icon .main { background: var(--card); }
body.co-side-icon .side-icon { background: var(--card); }
.cv-cc { display: flex; align-items: center; gap: 6px; padding: 6px 0 10px; flex-wrap: wrap; min-width: 0; }
.cv-cc-nut { position: relative; width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2); padding: 0; }
.cv-cc-nut:hover { background: var(--card-2); }
.cv-cc-nut.dang { color: var(--brand-ink); background: var(--brand-soft); }
.cv-cc-nut svg { width: 18px; height: 18px; }
.cv-cc-nut i { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--brand);
  color: #fff; font-size: 10px; font-style: normal; display: grid; place-items: center; padding: 0 3px; }
.cv-cc-view { font-size: 13px; font-weight: 500; color: var(--brand-ink); }
.cv-cc .lh-dem { font-size: 13.5px; color: var(--ink-2); margin-left: 6px; }
.cv-cc-tim { max-width: 260px; }
.cv-cc-chu { border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cv-cc-chu:hover { background: var(--card-2); color: var(--ink); }
.cv-cc-chu svg { width: 16px; height: 16px; }
body.co-side-icon .table-wrap.card { box-shadow: none; }
.cv-cc .grow { flex: 1; }

/* Chọn thành viên nhóm kiểu Lark */
.nh-pk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 340px; margin-top: 6px; }
.nh-pk-trai { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.nh-pk-tim { margin: 10px; }
.nh-pk-ds { overflow-y: auto; padding: 0 6px 8px; min-height: 0; }
.nh-pk-1 { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.nh-pk-1:hover { background: var(--card-2); }
.nh-pk-1 input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; flex: none; }
.nh-pk-1 span { display: flex; flex-direction: column; min-width: 0; }
.nh-pk-1 b { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.nh-pk-1 i { font-style: normal; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-pk-phai { display: flex; flex-direction: column; min-height: 0; }
.nh-pk-phai > b { padding: 14px 14px 8px; font-size: 13.5px; font-weight: 500; }
#nh-pk-chon { overflow-y: auto; padding: 0 8px 8px; min-height: 0; }
.nh-pk-2 { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--card-2); margin-bottom: 6px; }
.nh-pk-2 b { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-pk-2 select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; font: inherit; font-size: 12px; background: var(--card); color: var(--ink); }
.nh-khach { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; flex-wrap: wrap; }
.nh-khach > svg { width: 18px; height: 18px; color: var(--tb-cty); flex: none; }
.nh-khach > span { flex: 1; min-width: 200px; }
@media (max-width: 640px) { .nh-pk { grid-template-columns: minmax(0, 1fr); height: auto; } .nh-pk-ds, #nh-pk-chon { max-height: 220px; }
  .nh-pk-trai { border-right: 0; border-bottom: 1px solid var(--line); } }
.vien-nhan.do { background: var(--red-soft); color: var(--red); }
.nh-pk-2 select { width: auto !important; flex: none; }
.si-thu { align-self: center; width: 30px; height: 26px; border: 0; background: none; border-radius: 6px; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; margin-bottom: 2px; }
.si-thu:hover { background: var(--line-2); color: var(--ink-2); }
.si-thu svg { width: 17px; height: 17px; }
.nut-doc { border: 0; cursor: pointer; font: inherit; }
.nut-doc:hover { filter: brightness(.95); outline: 1px solid currentColor; }
/* Nút + tạo mới: nền đỏ khi rê chuột hoặc đang mở menu, như 1O */
.cv-cong:hover, .cv-cong:focus-visible { background: var(--brand); color: #fff; }

/* Menu chế độ xem kiểu Lark: mỗi hàng có nút ⋮ ở cuối */
.cv-menu-dong { display: flex; align-items: center; border-radius: 6px; }
.cv-menu-dong > button[data-cv-menu] { flex: 1; min-width: 0; }
.cv-menu-dong.co-them:hover { background: var(--card-2); }
.cv-menu-dong.co-them:hover > button[data-cv-menu]:not(.dang) { background: none; }
.cv-menu .cv-menu-them { flex: none; width: 28px; height: 28px; padding: 0; justify-content: center; opacity: 0; margin-left: 2px; }
.cv-menu-dong:hover .cv-menu-them, .cv-menu-dong .dang + .cv-menu-them, .cv-menu-them:focus-visible { opacity: 1; }
.cv-menu .cv-menu-them:hover { background: var(--line-2); }
@media (hover: none) { .cv-menu .cv-menu-them { opacity: 1; } }
/* Chip sắp xếp, lọc nằm chung hàng công cụ 1O */
.cv-cc-chip { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ============ Trang Tạo mới công việc (giống 1O) ============ */
.cvp { background: var(--card); border-radius: var(--r-lg); max-width: 980px; margin: 0 auto; padding: 18px 22px 0; min-width: 0; }
.cvp-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cvp-dau h2 { margin: 0; font-size: 19px; font-weight: 600; }
.cv-cong.tinh { cursor: default; border: 1.5px solid var(--brand); color: var(--brand); border-radius: 6px; background: none; }
.cv-cong.tinh:hover { background: none; color: var(--brand); }
.cvp-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cvp-tabs button { border: 0; background: none; font: inherit; font-size: 14px; padding: 10px 0; color: var(--ink-2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cvp-tabs button.chon { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 500; }
.cvp-trang { display: flex; flex-direction: column; gap: 10px; }
.cvp-khoi-dau { display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--brand-ink); padding: 6px 0; cursor: pointer; }
.cvp-khoi-dau svg { width: 16px; height: 16px; transition: transform .15s; }
.cvp-khoi.dong .cvp-khoi-dau svg { transform: rotate(-90deg); }
.cvp-khoi.dong .cvp-khoi-than { display: none; }
.cvp-khoi-than { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 14px; }
.cvp-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cvp-nhan { font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }

/* Ô có nhãn nổi như 1O: nhãn nằm trên viền khi có giá trị */
.cvp-o { position: relative; display: flex; align-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); padding: 0 12px; min-width: 0; width: 100%; box-sizing: border-box; text-align: left; font: inherit; color: var(--ink); }
.cvp-o:focus-within { border-color: var(--brand); }
.cvp-o > input, .cvp-o > textarea, .cvp-o > select { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink);
  width: 100%; padding: 11px 0; min-width: 0; }
.cvp-o > textarea { resize: vertical; min-height: 44px; }
.cvp-o.cao { align-items: flex-start; }
.cvp-o > span, .cvp-o-nhan { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); padding: 0 4px; background: var(--card);
  color: var(--muted); font-size: 14px; pointer-events: none; transition: top .12s, font-size .12s; max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvp-o.cao > span { top: 21px; }
.cvp-o > span i, .cvp-o-nhan i { color: var(--red); font-style: normal; }
.cvp-o:focus-within > span, .cvp-o > input:not(:placeholder-shown) + span, .cvp-o > textarea:not(:placeholder-shown) + span,
.cvp-o.co-gt > span, .cvp-o.co-gt .cvp-o-nhan, .cvp-o.chip:focus-within .cvp-o-nhan { top: 0; font-size: 11.5px; }
.cvp-o.chip .cvp-o-nhan { display: none; }
.cvp-o.chip.co-gt .cvp-o-nhan, .cvp-o.chip:focus-within .cvp-o-nhan { display: block; }
.cvp-o > svg { width: 16px; height: 16px; color: var(--muted); flex: none; margin-left: 6px; }
.cvp-o.chon > select { cursor: pointer; }
.cvp-o.chon.co-gt > select { padding-top: 13px; padding-bottom: 9px; }
button.cvp-o { cursor: pointer; }
.cvp-dd > b { font-weight: 400; font-size: 14px; flex: 1; padding: 11px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvp-xoa { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--muted); display: grid; place-items: center; flex: none; }
.cvp-xoa svg { width: 14px; height: 14px; }

.cvp-gio-ngay { display: flex; gap: 8px; }
.cvp-gio-ngay input { border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 10px; font: inherit; font-size: 14px;
  background: var(--card); color: var(--ink); min-width: 0; }
.cvp-gio-ngay input[type=time] { width: 110px; flex: none; }
.cvp-gio-ngay input[type=date] { flex: 1; }
.cvp-gio-ngay input:disabled { background: var(--card-2); color: var(--muted); }

.cvp-tick, .cvp-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; line-height: 1.45; }
.cvp-tick input, .cvp-radio input { accent-color: var(--brand); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.cvp-nhom-chon { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cvp-nhom-chon .cvp-nhan { font-size: 14px; color: var(--ink); font-weight: 500; margin: 0; }
.cvp-radio { padding-left: 4px; }
.cvp-mac { align-self: flex-start; margin-top: 4px; }

/* Dấu hỏi: rê chuột hay bấm vào thì hiện giải thích */
.cvp-hoi { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1px solid var(--muted); color: var(--muted); font-size: 11px; font-weight: 600; cursor: help; margin-top: 2px; }
.cvp-hoi:hover::after, .cvp-hoi:focus::after { content: attr(data-goi); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); width: max-content; max-width: min(340px, 80vw); white-space: pre-line; background: #2B2F36; color: #fff;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; padding: 8px 10px; border-radius: 6px; z-index: 50; text-align: left;
  box-shadow: var(--shadow-2); }
.cvp-hoi:not([data-goi]), .cvp-hoi[data-goi=""] { display: none; }

/* Ô chọn người: chip trong ô */
.cvp-o.chip { cursor: text; padding-top: 4px; padding-bottom: 4px; }
.cvp-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; align-items: center; }
.cvp-chips input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; flex: 1; min-width: 90px; padding: 6px 0; color: var(--ink); }
.cvp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card-2); border-radius: 999px; padding: 3px 4px 3px 10px;
  font-size: 13px; max-width: 100%; }
.cvp-chip button { border: 0; background: none; padding: 1px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.cvp-chip button svg { width: 12px; height: 12px; }
.cvp-goiy { max-height: 280px; z-index: 130; }
.cvp-goiy button { gap: 10px; }
.cvp-goiy button span { display: flex; flex-direction: column; min-width: 0; white-space: normal; }
.cvp-goiy button i { font-style: normal; font-size: 12px; color: var(--muted); }
.cvp-goiy button svg { width: 18px; height: 18px; }
.cvp-trong { padding: 10px; margin: 0; }

/* Ô chọn có dòng giải thích dưới mỗi lựa chọn */
.cvp-ddl { position: fixed; z-index: 130; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 4px; max-height: 60vh; overflow-y: auto; }
.cvp-ddl button { display: flex; flex-direction: column; gap: 3px; width: 100%; border: 0; background: none; font: inherit; text-align: left;
  padding: 9px 12px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.cvp-ddl button:hover:not(:disabled) { background: var(--card-2); }
.cvp-ddl button.dang { background: var(--brand-soft); }
.cvp-ddl button.dang b { color: var(--brand-ink); }
.cvp-ddl button b { font-weight: 500; font-size: 14px; }
.cvp-ddl button i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cvp-ddl button i.do { color: var(--red); }
.cvp-ddl button:disabled { cursor: not-allowed; }
.cvp-ddl button:disabled b { color: var(--muted); }

/* Đính kèm: khung kéo thả */
.cvp-dinh { position: relative; border: 1px dashed var(--line); border-radius: var(--r-md); padding: 22px 16px 16px; display: flex;
  flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cvp-dinh.keo { border-color: var(--brand); background: var(--brand-soft); }
.cvp-dinh-ten { position: absolute; top: -9px; left: 10px; background: var(--card); padding: 0 4px; font-size: 11.5px; color: var(--muted); }
.cvp-dinh-tron { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.cvp-dinh-tron svg { width: 22px; height: 22px; }
.cvp-dinh-chu { font-size: 13.5px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cvp-dinh-nut { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cvp-dinh-nut .btn { cursor: pointer; }
.cvp-ds-tep { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
.cvp-ds-tep:empty { display: none; }
.cvp-tep { display: inline-flex; align-items: center; gap: 5px; background: var(--card-2); border-radius: 6px; padding: 4px 6px 4px 8px;
  font-size: 12.5px; max-width: 100%; overflow: hidden; }
.cvp-tep svg { width: 13px; height: 13px; flex: none; }
.cvp-tep button { border: 0; background: none; cursor: pointer; padding: 1px; color: var(--muted); display: grid; place-items: center; }

.cvp-dt-dong { display: flex; align-items: center; gap: 6px; }
.cvp-dt-dong .cvp-o { flex: 1; }
.cvp-cong-tron { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--brand); color: var(--brand); background: var(--card);
  display: grid; place-items: center; cursor: pointer; align-self: flex-start; }
.cvp-cong-tron:hover { background: var(--brand-soft); }
.cvp-cong-tron svg { width: 16px; height: 16px; }
.cvp-nhan-o { cursor: pointer; padding-top: 6px; padding-bottom: 6px; }
.cvp-cho { color: var(--muted); font-size: 14px; padding: 4px 0; }

/* Nhãn công việc */
.cv-nhan { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  margin-left: 5px; vertical-align: middle; white-space: nowrap; background: var(--card-2); color: var(--ink-2); }
.cvp-chips .cv-nhan { margin-left: 0; font-size: 12.5px; padding: 3px 10px; }
.cv-nhan.blue { background: var(--blue-soft); color: var(--blue); } .cv-nhan.green { background: var(--green-soft); color: var(--green); }
.cv-nhan.amber { background: var(--amber-soft); color: var(--amber); } .cv-nhan.red { background: var(--red-soft); color: var(--red); }
.cv-nhan.purple { background: var(--purple-soft); color: var(--purple); }
.cv-nhan button { border: 0; background: none; padding: 0 0 0 2px; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
.cvp-mau { display: flex; gap: 10px; }
.cvp-mau label { cursor: pointer; display: grid; place-items: center; }
.cvp-mau input { position: absolute; opacity: 0; }
.cvp-mau i.cham { width: 22px; height: 22px; outline: 2px solid transparent; outline-offset: 2px; }
.cvp-mau input:checked + i.cham { outline-color: var(--ink); }
.cvp-mau input:focus-visible + i.cham { outline-color: var(--brand); }
.cv-loai-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-dt { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer; color: var(--blue); }
.cv-dt:hover { background: var(--blue-soft); }

.cvp-kho-ds { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.cvp-kho-1 { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 6px; cursor: pointer; }
.cvp-kho-1:hover { background: var(--card-2); }
.cvp-kho-1 input { accent-color: var(--brand); margin-top: 3px; }
.cvp-kho-1 span { display: flex; flex-direction: column; min-width: 0; }
.cvp-kho-1 b { font-weight: 500; font-size: 13.5px; overflow-wrap: anywhere; }
.cvp-kho-1 i { font-style: normal; font-size: 12px; color: var(--muted); }

.cvp-loi { margin: 12px 0 0; }
/* Chân trang dính dưới như 1O: CẬP NHẬT, HỦY BỎ */
.cvp-chan { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0; margin-top: 14px; background: var(--card);
  border-top: 1px solid var(--line-2); z-index: 5; }
.cvp-chan .btn { min-width: 110px; justify-content: center; }

@media (max-width: 700px) {
  .cvp { padding: 14px 14px 0; border-radius: 0; }
  .cvp-hai { grid-template-columns: 1fr; }
  .cvp-gio-ngay input[type=time] { width: 96px; }
}

/* Menu con cạnh mục cha (Sắp xếp danh sách, Gộp nhóm theo) */
.cv-menu button.co-con { padding-right: 8px; }
.cv-menu button.mo { background: var(--card-2); }
.cv-menu-mui { font-style: normal; margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 16px; line-height: 1; }
.cv-menu-duoi { font-style: normal; margin-left: auto; padding-left: 14px; color: var(--brand-ink); font-size: 12px; white-space: nowrap; }
.cv-menu-con { min-width: 220px; z-index: 121; }

/* Kéo thả dùng chung: dòng nhấc lên, chỗ trống nét đứt */
.dang-nhac { box-shadow: 0 10px 28px rgba(29,35,46,.18); background: var(--card) !important; border-radius: var(--r-md);
  cursor: grabbing; opacity: .97; scale: 1.02; }
.keo-cho { border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--card-2); box-sizing: border-box; }
body.dang-keo-tha, body.dang-keo-tha * { cursor: grabbing !important; user-select: none; }
[data-keo] { touch-action: none; cursor: grab; }

/* Khung "Trường hiển thị" bên phải như 1O */
.tc-lop { position: fixed; inset: 0; z-index: 110; background: rgba(29,35,46,0); transition: background .18s; }
.tc-lop.mo { background: rgba(29,35,46,.18); }
.tc-ngan { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: var(--card); display: flex;
  flex-direction: column; box-shadow: -8px 0 28px rgba(29,35,46,.12); transform: translateX(100%); transition: transform .18s ease; }
.tc-lop.mo .tc-ngan { transform: none; }
.tc-ngan-dau { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.tc-ngan-dau h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.tc-dong-x { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.tc-dong-x svg { width: 20px; height: 20px; }
.tc-tim { display: flex; align-items: center; gap: 8px; margin: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0 12px; }
.tc-tim:focus-within { border-color: var(--brand); }
.tc-tim input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; padding: 10px 0; color: var(--ink); min-width: 0; }
.tc-tim svg { width: 17px; height: 17px; color: var(--muted); }
.tc-than { flex: 1; overflow-y: auto; padding: 4px 12px 10px; }
.tc-nhom { font-size: 13px; color: var(--muted); padding: 10px 4px 4px; }
.tc-vach { height: 1px; background: var(--line-2); margin: 10px 4px 2px; }
.tc-dong { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font-size: 14px; background: var(--card); }
.tc-dong[hidden] { display: none; }
.tc-keo { width: 20px; flex: none; display: grid; place-items: center; color: var(--muted); }
.tc-keo svg { width: 16px; height: 16px; stroke-width: 2.6; }
.tc-ten { flex: 1; min-width: 0; }
.tc-khoa { color: var(--muted); display: grid; place-items: center; width: 38px; }
.tc-khoa svg { width: 15px; height: 15px; }
.tc-dong .cv-cong-tac:checked, .lt-chon-1 .cv-cong-tac:checked { background: var(--brand); }
.tc-mac { border: 0; border-top: 1px solid var(--line-2); background: var(--card); font: inherit; font-size: 14px; font-weight: 500;
  letter-spacing: .3px; padding: 14px; cursor: pointer; color: var(--ink); }
.tc-mac:hover { background: var(--card-2); }

/* Lối tắt: tay cầm kéo, nút gạt thay ngôi sao */
.lt-1 .tt-keo { width: 18px; }
.lt-chon-1 { justify-content: space-between; }
.lt-chon-1 .cv-cong-tac { flex: none; }

/* Import công việc */
.nhap-nut { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.nhap-nut label.btn { cursor: pointer; }
.nhap-tom { margin: 12px 0 6px; font-size: 13.5px; }
.nhap-loi { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--red); max-height: 140px; overflow-y: auto; }
.nhap-xem { max-height: 260px; overflow: auto; }
.nhap-xem td, .nhap-xem th { font-size: 12.5px; }
.cvp-trang[hidden] { display: none; }
#cvp-cach-cho, #cvp-dt-cha, #cvp-dt { display: flex; flex-direction: column; gap: 14px; }
#cvp-tytrong-cho:empty { display: none; }
/* Điện thoại: hàng CẬP NHẬT dính ngay trên thanh dưới, không bị che */
@media (max-width: 860px) {
  .cvp-chan { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Trang tạo mới sát trái như 1O */
.cvp { margin: 0; }
.cvp-o.tat { background: var(--card-2); }
.cvp-o.tat > input { cursor: not-allowed; }
.cvp-o.sai { border-color: var(--red); }

/* ---------- Ô soạn thảo Mô tả ---------- */
.rt { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: text; }
.rt.mo { border-color: var(--brand); }
.rt-nhan { position: absolute; top: -8px; left: 10px; padding: 0 4px; background: var(--card); font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.rt.mo .rt-nhan { color: var(--brand-ink); }
.rt-cong { display: none; flex-wrap: wrap; gap: 2px 4px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); margin: 0 6px; }
.rt.mo .rt-cong { display: flex; }
.rt-nut { width: 34px; height: 32px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; padding: 0; }
.rt-nut svg { width: 18px; height: 18px; }
.rt-nut:hover { background: var(--card-2); }
.rt-nut.dang { background: var(--brand-soft); color: var(--brand); }
.rt-soan { outline: 0; padding: 11px 12px; min-height: 20px; max-height: 66px; overflow: hidden; font-size: 14px; line-height: 1.55;
  overflow-wrap: anywhere; color: var(--ink); }
.rt.mo .rt-soan { min-height: 150px; max-height: 420px; overflow-y: auto; padding: 14px 16px; }
.rt-soan:empty::before { content: attr(data-cho); color: var(--muted); pointer-events: none; }
.rt-soan h1, .rt-noi h1 { font-size: 20px; margin: 6px 0; } .rt-soan h2, .rt-noi h2 { font-size: 17px; margin: 6px 0; }
.rt-soan h3, .rt-noi h3 { font-size: 15px; margin: 6px 0; }
.rt-soan p, .rt-noi p { margin: 0 0 4px; }
.rt-soan ul, .rt-soan ol, .rt-noi ul, .rt-noi ol { margin: 4px 0; padding-left: 22px; }
.rt-soan a, .rt-noi a { color: var(--blue); text-decoration: underline; }
.rt-soan hr, .rt-noi hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.rt-soan blockquote, .rt-noi blockquote { margin: 0 0 0 28px; }
table.rt-bang { border-collapse: collapse; margin: 6px 0; min-width: 50%; }
table.rt-bang td, table.rt-bang th { border: 1px solid var(--line); padding: 5px 8px; min-width: 50px; vertical-align: top; }
.rt-noi { overflow-x: auto; }
.rt.toan { position: fixed; inset: 12px; z-index: 115; box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.rt.toan .rt-soan { flex: 1; max-height: none; }
.rt-pop { position: fixed; z-index: 130; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 8px; }
.rt-mau { display: grid; grid-template-columns: repeat(5, 26px); gap: 6px; }
.rt-mau button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; color: var(--muted); padding: 0; }
.rt-mau button:hover { outline: 2px solid var(--brand); outline-offset: 1px; }
.rt-emoji { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; }
.rt-emoji button { width: 32px; height: 32px; border: 0; background: none; font-size: 19px; cursor: pointer; border-radius: 6px; padding: 0; }
.rt-emoji button:hover { background: var(--card-2); }
.rt-lk { display: flex; flex-direction: column; gap: 6px; width: min(300px, 80vw); }
.rt-lk input { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.rt-lk .btn { align-self: flex-end; }
.rt-luoi-bang { display: grid; grid-template-columns: repeat(6, 20px); gap: 3px; }
.rt-luoi-bang i { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.rt-luoi-bang i.sang { background: var(--brand-soft); border-color: var(--brand); }
.rt-bang-so { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }
@media (max-width: 700px) { .rt-nut { width: 30px; height: 30px; } .rt-emoji { grid-template-columns: repeat(6, 32px); } }

/* ---------- Ô chọn ngày và lịch như 1O ---------- */
.ngay-o { cursor: text; }
.ngay-o > input { letter-spacing: .2px; }
.ngay-nut { border: 0; background: none; padding: 2px; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.ngay-nut svg { width: 18px; height: 18px; }
.ngay-o:focus-within .ngay-nut { color: var(--brand); }
.cvp-gio-ngay .ngay-o { flex: 1; min-height: 40px; }
.ngay-pop { position: fixed; z-index: 140; width: 312px; max-width: calc(100vw - 16px); background: var(--card); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(29,35,46,.16); border: 1px solid var(--line-2); padding: 6px 8px 8px; }
.ngay-dau { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.ngay-dau button { border: 0; background: none; cursor: pointer; color: var(--ink); border-radius: 6px; padding: 5px; display: flex; align-items: center; gap: 4px; }
.ngay-dau button:hover { background: var(--card-2); }
.ngay-dau svg { width: 16px; height: 16px; }
.ngay-tieu { font: inherit; font-size: 15px; font-weight: 600; }
b.ngay-tieu { padding: 5px; }
.ngay-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ngay-luoi b { font-size: 12.5px; padding: 8px 0; }
.ngay-luoi button { border: 0; background: none; font: inherit; font-size: 13.5px; width: 38px; height: 38px; justify-self: center;
  border-radius: 50%; cursor: pointer; color: var(--ink); padding: 0; }
.ngay-luoi button:hover { background: var(--card-2); }
.ngay-luoi button.ngoai { color: var(--muted); }
.ngay-luoi button.nay { background: var(--card-2); }
.ngay-luoi button.chon { background: var(--brand); color: #fff; }
.ngay-thang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 4px; padding: 8px 0; text-align: center; }
.ngay-thang button { border: 0; background: none; font: inherit; font-size: 14px; width: 48px; height: 48px; border-radius: 50%; justify-self: center; cursor: pointer; color: var(--ink); }
.ngay-thang button:hover { background: var(--card-2); }
.ngay-thang button.chon { background: var(--brand); color: #fff; }
.ngay-chan { display: flex; justify-content: space-between; padding: 6px 4px 0; border-top: 1px solid var(--line-2); margin-top: 4px; }
.ngay-chan button { border: 0; background: none; color: var(--brand-ink); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ngay-chan button:hover { background: var(--brand-soft); }

/* ---------- Trang tạo mới dự án ---------- */
.dap-hang { display: grid; gap: 14px; }
.dap-hang.ma { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.dap-hang.ngay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(90px, .45fr); }
.dap-anh { width: 180px; height: 180px; border: 1px dashed var(--muted); border-radius: var(--r-md); display: grid; place-items: center;
  cursor: pointer; color: var(--muted); position: relative; overflow: hidden; background: var(--card); }
.dap-anh:hover { border-color: var(--brand); color: var(--brand); }
.dap-anh svg { width: 40px; height: 40px; stroke-width: 1.2; }
.dap-anh.co { cursor: default; border-style: solid; }
.dap-anh img { width: 100%; height: 100%; object-fit: cover; }
.dap-anh-bo { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55);
  color: #fff; display: grid; place-items: center; cursor: pointer; }
.dap-anh-bo svg { width: 14px; height: 14px; }
.cvp-o .cvp-hoi { margin: 0 4px; }
.da-ten-dau { display: flex; align-items: center; gap: 10px; }
.da-anh-nho { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.da-muc { display: block; margin-top: 14px; }
.da-nc { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 700px) {
  .dap-hang.ma, .dap-hang.ngay { grid-template-columns: 1fr; }
  .cvp-gio-ngay { flex-wrap: wrap; }
}
.cvp-o > span.cvp-hoi { position: relative; left: auto; top: auto; transform: none; padding: 0; background: none; font-size: 11px;
  color: var(--muted); max-width: none; overflow: visible; white-space: normal; pointer-events: auto; flex: none; margin: 0 6px; }
.cvp-gio-ngay .ngay-o > input { border: 0; border-radius: 0; padding: 9px 0; background: none; flex: 1; min-width: 0; }

/* Ô ngày trình duyệt đã bọc thành ô ngày kiểu 1O */
.ngay-bao { position: relative; max-width: 100%; }
.ngay-bao > input[data-ngay] { width: 100%; padding-right: 34px; box-sizing: border-box; }
.ngay-bao > .ngay-nut { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
input[data-ngay].sai { border-color: var(--red) !important; }

/* Menu tài khoản như 1O */
.tk-nut { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.tk-nut .avatar { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--brand); }
.tk-menu { position: fixed; z-index: 125; width: min(340px, calc(100vw - 16px)); background: var(--card); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(29,35,46,.16); border: 1px solid var(--line-2); overflow: hidden; }
.tk-dau { display: flex; align-items: center; gap: 16px; padding: 20px 20px 18px; border-bottom: 1px solid var(--line-2); }
.tk-anh { width: 64px; height: 64px; font-size: 26px; flex: none; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--brand); }
.tk-ten { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-ten b { font-size: 18px; font-weight: 600; color: var(--brand-ink); }
.tk-ten span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tk-ten svg { width: 15px; height: 15px; flex: none; }
.tk-ds { padding: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.tk-ds > button, .tk-vai button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; font: inherit;
  font-size: 14.5px; color: var(--ink); padding: 11px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.tk-ds > button:hover, .tk-vai button:hover { background: var(--card-2); }
.tk-ds > button svg { width: 19px; height: 19px; color: var(--ink-2); }
.tk-ds > button span { flex: 1; }
.tk-cham { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px currentColor; color: var(--line); }
.tk-vach { height: 1px; background: var(--line-2); margin: 6px 4px; }
.tk-nhom { font-size: 12px; color: var(--muted); padding: 6px 12px 2px; }
.tk-vai button { font-size: 13.5px; padding: 8px 12px; justify-content: space-between; }
.tk-vai button.dang { color: var(--brand-ink); font-weight: 500; }
.tk-vai button svg { width: 16px; height: 16px; color: var(--brand); }
.tk-mau { position: fixed; z-index: 126; background: var(--card); border-radius: 12px; box-shadow: 0 10px 34px rgba(29,35,46,.16);
  display: grid; grid-template-columns: repeat(3, 48px); gap: 14px 18px; padding: 20px 24px; }
.tk-mau button { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; }
.tk-mau button:hover { transform: scale(1.06); }
.tk-mau button svg { width: 22px; height: 22px; stroke-width: 2.6; }
.ngay-bao > input[data-ngay] { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 34px 8px 11px; outline: none; min-height: 36px; }
.ngay-bao > input[data-ngay]:focus { border-color: var(--brand); }
.ngay-bao > input[data-ngay]:disabled { background: var(--card-2); color: var(--muted); }
.ngay-bao:focus-within .ngay-nut { color: var(--brand); }
.tk-nut > .anh-ns, .tk-nut > .avatar { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--brand); object-fit: cover; }
img.anh-ns { border-radius: 50%; object-fit: cover; flex: none; }
.tk-anh { flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--brand); object-fit: cover; }

/* Cài đặt tài khoản */
.cdtk { margin: -4px 0 0; min-height: 420px; }
.cdtk-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.cdtk-tabs button { border: 0; background: none; font: inherit; font-size: 15px; color: var(--muted); padding: 10px 0 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cdtk-tabs button.chon { color: var(--brand-ink); border-bottom-color: var(--brand); }
.cdtk-nguoi { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cdtk-nguoi b { display: block; font-size: 16px; font-weight: 500; }
.cdtk-nguoi span { color: var(--muted); font-size: 14px; }
.cdtk-anh { position: relative; cursor: pointer; border-radius: 50%; display: block; flex: none; }
.cdtk-anh .avatar, .cdtk-anh img { display: grid; place-items: center; }
.cdtk-anh-doi { position: absolute; inset: auto 0 0 0; height: 32px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(0,0,0,.55); color: #fff !important; font-size: 11.5px !important; border-radius: 0 0 45px 45px; }
.cdtk-anh-doi svg { width: 13px; height: 13px; }
.cdtk-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cdtk-moc { margin: 16px 0 26px; font-size: 14.5px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cdtk-moc .cam { color: var(--amber); } .cdtk-moc i { color: var(--muted); font-style: normal; }
.cdtk-dong { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cdtk-dong b { display: block; font-weight: 500; font-size: 15px; } .cdtk-dong i { color: var(--muted); font-size: 13px; }
.cdtk-mau { display: flex; flex-wrap: wrap; gap: 10px; }
.cdtk-mau button { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; }
.cdtk-mau button.chon { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px currentColor; outline: 2px solid var(--brand); outline-offset: 2px; }
.cdtk-mau button svg { width: 18px; height: 18px; stroke-width: 2.6; }
.cdtk-ghi { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--card-2);
  border-radius: var(--r-md); padding: 10px 12px; margin: 12px 0; }
.cdtk-ghi svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--muted); }
.cdtk-the { display: flex; gap: 16px; align-items: center; border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 18px 22px; }
.cdtk-the b { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 15.5px; }
.cdtk-the i { color: var(--muted); font-size: 13px; }
.cdtk-khien { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); flex: none; }
.cdtk-khien svg { width: 34px; height: 34px; }
.cdtk-muc { font-size: 15.5px; margin: 22px 0 10px; }
.cdtk-ds { border-radius: var(--r-md); box-shadow: var(--shadow-1); border: 1px solid var(--line-2); }
.cdtk-hang { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; flex-wrap: wrap; }
.cdtk-hang:last-child { border-bottom: 0; }
.cdtk-hang > svg { width: 19px; height: 19px; color: var(--ink-2); flex: none; }
.cdtk-hang > b { font-weight: 400; flex: 1; }
.cdtk-hang > span:first-of-type:not(.cdtk-thieu) { flex: 1; }
.cdtk-thieu { display: flex; align-items: center; gap: 6px; color: var(--muted); flex: 1; }
.cdtk-thieu svg { width: 18px; height: 18px; color: var(--red); }
.cdtk-gio { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: pre; }
.cdtk-quyen { display: grid; gap: 8px; }
.cdtk-q { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 10px 14px; }
.cdtk-q b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.cdtk-q b svg { width: 16px; height: 16px; color: var(--brand); }
.cdtk-q span { font-size: 13px; color: var(--muted); }
.cdtk-trong { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 30px 0; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.cdtk-trong svg { width: 40px; height: 40px; color: var(--line); }
@media (max-width: 700px) { .cdtk-hai, .cdtk-dong { grid-template-columns: 1fr; } .cdtk-tabs { gap: 18px; } }
.cdtk, .cdtk-tabs, .cdtk-than { min-width: 0; max-width: 100%; }

/* Hàng công cụ bảng kiểu 1O: mỏng, chữ nhỏ, sát hàng tab và sát bảng (boss 26/09) */
.cv-tabs + .cv-cc { margin-top: -20px; }
.cv-cc { padding: 2px 0; gap: 2px; min-height: 36px; margin-bottom: -6px; }
.cv-cc-nut { width: 30px; height: 30px; border-radius: 6px; color: var(--muted); }
.cv-cc-nut svg { width: 17px; height: 17px; }
.cv-cc .lh-dem { font-size: 13px; color: var(--muted); margin-left: 8px; }
.cv-cc-tim { padding: 4px 10px; max-width: 230px; }
.cv-cc-tim svg { width: 14px; height: 14px; }
.cv-cc-tim input { font-size: 12.5px; }
.cv-cc-chu { font-size: 12.5px; color: var(--muted); padding: 5px 8px; gap: 5px; }
.cv-cc-chu svg { width: 15px; height: 15px; }
.cv-cc .chip-loc { font-size: 12px; padding: 2px 8px; }
@media (max-width: 700px) { .cv-cc-tim { max-width: 160px; } .cv-cc-chu { padding: 5px 6px; } }
@media (max-width: 700px) { .cv-cc .cv-cc-tim { flex: 0 1 150px; width: 150px; max-width: 150px; min-width: 0; } }

/* Nút Nhãn trên hàng công cụ (như 1O) */
.cv-cc-chu.dang { color: var(--brand-ink); background: var(--brand-soft); }
.nhan-loc { position: fixed; z-index: 120; width: 290px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 10px; box-shadow: var(--shadow-2); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.nhan-loc-trong { margin: 0; padding: 6px 4px 10px; color: var(--muted); font-size: 13.5px; border-bottom: 1px solid var(--line-2); }
.nhan-loc-ds { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.nhan-loc-ds label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.nhan-loc-ds label:hover { background: var(--card-2); }
.nhan-loc-ds input { accent-color: var(--brand); }
.nhan-loc-ds .cv-nhan { margin: 0; }
.nhan-loc-va { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.nhan-loc-va .cv-cong-tac { width: 32px; height: 18px; }
.nhan-loc-va .cv-cong-tac::after { width: 12px; height: 12px; }
.nhan-loc-va .cv-cong-tac:checked::after { left: 17px; }
.nhan-loc-va .cv-cong-tac:checked { background: var(--brand); }
.nhan-loc-nut { width: 100%; justify-content: center; font-size: 12.5px; }

/* Ô Tìm kiếm trên cùng: tìm trong mục đang mở */
.q-dem { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; }
.q-dem:empty { display: none; }
.q-dong, .nut-tim-dd { display: none; }
.q-dong { border: 0; background: none; padding: 2px; color: var(--muted); cursor: pointer; }
.q-dong svg { width: 15px; height: 15px; }
mark.tim-trang { background: #FFE58A; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.tim-trang.dang { background: #FFB020; }
@media (max-width: 560px) {
  .nut-tim-dd { display: grid; }
  .topbar .search.mo-dd { display: flex; position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); z-index: 30;
    background: var(--card); box-shadow: var(--shadow-2); }
  .search.mo-dd .q-dong { display: grid; }
  .topbar { position: relative; }
}
/* Cột Thảo luận ghim bên phải bảng */
table.grid .ghim-phai { position: sticky; right: 0; z-index: 2; background: var(--card); box-shadow: -8px 0 10px -8px rgba(29,35,46,.18); text-align: center; }
table.grid thead .ghim-phai { background: var(--card-2); z-index: 3; }
table.grid tbody tr:hover .ghim-phai { background: var(--card-2); }

/* Bảng kiểu 1O gọn: tên việc xuống dòng thay vì kéo dài, thanh tiến độ ngắn, tiêu đề cột 2 dòng khi cần */
table.lh-bang.gon td, table.lh-bang.gon th { font-size: 13px; padding-left: 10px; padding-right: 10px; }
table.lh-bang.gon th { white-space: normal; line-height: 1.3; vertical-align: middle; }
table.lh-bang.gon th .th-sap { white-space: normal; text-align: left; }
table.lh-bang.gon td[data-cot="ten"] { min-width: 190px; max-width: 250px; white-space: normal; }
table.lh-bang.gon td[data-cot="ten"] .cv-ten-o { white-space: normal; text-align: left; }
table.lh-bang.gon th[data-cot="batDau"], table.lh-bang.gon th[data-cot="batDauThat"],
table.lh-bang.gon th[data-cot="han"], table.lh-bang.gon th[data-cot="xongLuc"] { min-width: 76px; max-width: 92px; }
table.lh-bang.gon td[data-cot="batDau"], table.lh-bang.gon td[data-cot="batDauThat"],
table.lh-bang.gon td[data-cot="han"], table.lh-bang.gon td[data-cot="xongLuc"] { white-space: nowrap; }
table.lh-bang.gon .cv-td { min-width: 110px; gap: 6px; }
table.lh-bang.gon td[data-cot="uuTien"], table.lh-bang.gon td[data-cot="trangThai"] { white-space: nowrap; }
table.lh-bang.gon th[data-cot="thaoluan"] { min-width: 0; width: 64px; }
/* Bỏ ghim cột Thảo luận (đè lên cột khác khi màn hẹp); bảng Công việc để nút thảo luận cạnh tên việc */
table.grid .ghim-phai { position: static; box-shadow: none; }
.cv-ten-hang { display: flex; align-items: flex-start; gap: 8px; }
.cv-ten-chu { flex: 1; min-width: 0; }
.cv-ten-hang > button:last-child, .cv-ten-hang > .nut-tl { flex: none; margin-top: -2px; }
table.lh-bang.gon th { white-space: nowrap; }
table.lh-bang.gon th[data-cot="batDau"], table.lh-bang.gon th[data-cot="batDauThat"],
table.lh-bang.gon th[data-cot="han"], table.lh-bang.gon th[data-cot="xongLuc"] { white-space: normal; }
table.lh-bang.gon td[data-cot="ten"] { min-width: 220px; max-width: 280px; }
table.lh-bang.gon th .th-sap { white-space: nowrap; }
table.lh-bang.gon th[data-cot="batDau"] .th-sap, table.lh-bang.gon th[data-cot="batDauThat"] .th-sap,
table.lh-bang.gon th[data-cot="han"] .th-sap, table.lh-bang.gon th[data-cot="xongLuc"] .th-sap { white-space: normal; }

/* ---------- Trang chi tiết công việc như 1O ---------- */
.cvd-thanh { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); margin: -6px 0 -2px; min-height: 42px; flex-wrap: wrap; }
.cvd-tabs button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--brand-ink); padding: 11px 2px; border-bottom: 2px solid var(--brand); margin-bottom: -1px; cursor: default; }
.cvd-nuts { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cvd-nut { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink-2);
  padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.cvd-nut:hover:not(:disabled) { background: var(--card-2); color: var(--ink); }
.cvd-nut:disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }
.cvd-nut svg { width: 15px; height: 15px; }
.cvd-them { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); margin-left: 4px; }
.cvd-them svg { width: 14px; height: 14px; }
.cvd-them:hover { border-color: var(--brand); color: var(--brand); }
.cv-ct.cvd { background: #F3F5F8; border-radius: var(--r-lg); padding: 12px; }
.cvd .card { border: 0; box-shadow: none; border-radius: 6px; }
.cvd-khoi > header, .cvd .cv-khoi > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.cvd-khoi > header h3 { margin: 0; font-size: 15px; font-weight: 500; }
.cvd-thu { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; position: relative; border-radius: 4px; }
.cvd-thu::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; background: var(--muted); }
.cvd-khoi.thu .cvd-thu::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1.5px; background: var(--muted); }
.cvd-thu:hover { background: var(--card-2); }
.cvd-khoi.thu .cvd-luoi { display: none; }
.cvd-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding: 18px 16px 22px; }
.cvd-o { min-width: 0; }
.cvd-o.rong { grid-column: 1 / -1; }
.cvd-o > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.cvd-o > div { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cvd-o > div > .nt-chu { width: 100%; }
.cvd-o .cv-td { width: 100%; max-width: 220px; min-width: 150px; }
.cvd-o .cell-sub { font-size: 12.5px; }
.cvd-lk { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-ink); cursor: pointer; text-align: left; }
.cvd-lk:hover { text-decoration: underline; }
.cvd-ngs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cvd-ng { display: inline-flex; align-items: center; gap: 7px; background: var(--card-2); border-radius: 999px; padding: 3px 12px 3px 3px; }
.cvd-ng b { font-weight: 400; font-size: 13.5px; }
.cvd-uu { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cvd-uu svg { width: 15px; height: 15px; color: var(--orange); }
.cvd-uu.red svg { color: var(--red); } .cvd-uu.grey svg { color: var(--muted); }
.cvd-quyen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cvd-quyen li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.cvd-quyen li > svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
@media (max-width: 700px) {
  .cvd-luoi { grid-template-columns: 1fr; gap: 16px; }
  .cv-ct.cvd { padding: 8px; margin: 0 -8px; }
  .cvd-nuts { width: 100%; }
}
.cvd-thanh .grow, .cvd .grow { flex: 1; }
.topbar .nhan-mau { white-space: nowrap; flex: none; }
table.lh-bang.gon th[data-cot="batDau"], table.lh-bang.gon th[data-cot="batDauThat"],
table.lh-bang.gon th[data-cot="han"], table.lh-bang.gon th[data-cot="xongLuc"] { min-width: 90px; }
/* Ô gõ thảo luận có định dạng thật (đậm, nghiêng, gạch chân, danh sách) */
.nt-o .nt-o-soan { flex: 1; min-width: 0; outline: none; font-size: 13.5px; line-height: 1.45; padding: 7px 0; max-height: 180px;
  overflow-y: auto; color: var(--ink); overflow-wrap: anywhere; cursor: text; }
.nt-o-soan:empty::before { content: attr(data-cho); color: var(--muted); pointer-events: none; }
.nt-o-soan ul, .nt-o-soan ol { margin: 2px 0; padding-left: 20px; }

/* Việc con trong việc lớn: tích hoàn thành, người làm, hạn, báo cáo */
.cvc-ds { display: flex; flex-direction: column; }
.cvc { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.cvc > input { accent-color: var(--green); width: 17px; height: 17px; flex: none; cursor: pointer; }
.cvc-ten { flex: 1; min-width: 160px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--ink); }
.cvc-ten:hover { color: var(--brand-ink); text-decoration: underline; }
.cvc.xong .cvc-ten { color: var(--muted); text-decoration: line-through; }
.cvc-phai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cvc-td { font-size: 12.5px; color: var(--ink-2); min-width: 34px; text-align: right; }
.cvc-them { padding: 10px 16px; }
.cvc-them select, .cvc-them .ngay-bao { flex: none; max-width: 170px; }
.cvc-them select { border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 8px; font: inherit; font-size: 13px; background: var(--card); }
.cvc-them .ngay-bao { width: 140px !important; }
@media (max-width: 700px) { .cvc-them { flex-wrap: wrap; } .cvc-them #cvc-ten { flex: 1 1 100%; } }
/* Bảng Công việc thẳng cột: tiêu đề một dòng, mũi tên sắp xếp sát chữ, ô tên việc canh giữa như các ô khác */
table.lh-bang.gon th, table.lh-bang.gon th .th-sap,
table.lh-bang.gon th[data-cot="batDau"] .th-sap, table.lh-bang.gon th[data-cot="batDauThat"] .th-sap,
table.lh-bang.gon th[data-cot="han"] .th-sap, table.lh-bang.gon th[data-cot="xongLuc"] .th-sap { white-space: nowrap; }
table.lh-bang.gon th[data-cot="batDau"], table.lh-bang.gon th[data-cot="batDauThat"],
table.lh-bang.gon th[data-cot="han"], table.lh-bang.gon th[data-cot="xongLuc"] { white-space: nowrap; min-width: 0; max-width: none; }
table.lh-bang.gon td, table.lh-bang.gon th { vertical-align: middle; }
table.lh-bang.gon .cv-ten-hang { align-items: center; }
table.lh-bang.gon .cv-ten-chu .cv-mau, table.lh-bang.gon .cv-ten-chu .cv-nhan { vertical-align: middle; }
table.lh-bang.gon td[data-cot="ten"] { min-width: 200px; max-width: 260px; }
table.lh-bang.gon td, table.lh-bang.gon th { padding-left: 8px; padding-right: 8px; }
table.lh-bang.gon td[data-cot="ten"] { min-width: 180px; max-width: 230px; }
table.lh-bang.gon .cv-td { min-width: 92px; }
/* Như 1O: tiêu đề cột không có mũi tên, chỉ cột đang sắp xếp mới hiện ↑ ↓ (bấm tiêu đề vẫn sắp xếp) */
table.lh-bang.gon th { font-size: 12.5px; }
table.lh-bang.gon .th-sap:not(.dang) i { display: none; }
table.lh-bang.gon td, table.lh-bang.gon th { padding-left: 7px; padding-right: 7px; }
table.lh-bang.gon th { font-size: 12px; }
table.lh-bang.gon .cv-td { min-width: 84px; }
table.lh-bang.gon th[data-cot="thaoluan"], table.lh-bang.gon td[data-cot="thaoluan"] { width: 40px; text-align: center; }
.th-ic svg { width: 16px; height: 16px; vertical-align: middle; }
/* Chọn người làm việc con: tìm tên, gửi thông báo */
.cvc-ng { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 4px 8px 4px 5px; font: inherit; font-size: 13px; cursor: pointer; max-width: 200px; flex: none; }
.cvc-ng span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvc-ng > svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.cvc-ng:hover { border-color: var(--brand); }
.cvc-tat-bao { color: var(--muted); display: grid; place-items: center; position: relative; }
.cvc-tat-bao svg { width: 13px; height: 13px; }
.cvc-tat-bao::after { content: ""; position: absolute; width: 16px; height: 1.5px; background: var(--muted); transform: rotate(-45deg); }
.cvc-pk { position: fixed; z-index: 130; width: 300px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; }
.cvc-pk-tim { border: 0; border-bottom: 1px solid var(--line-2); padding: 12px 14px; font: inherit; font-size: 14px; outline: none; }
.cvc-pk-ds { max-height: 260px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cvc-pk-ds button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; text-align: left; padding: 6px 8px;
  border-radius: 8px; cursor: pointer; color: var(--ink); }
.cvc-pk-ds button:hover, .cvc-pk-ds button.chon { background: var(--card-2); }
.cvc-pk-ds button span { display: flex; flex-direction: column; min-width: 0; }
.cvc-pk-ds b { font-weight: 500; font-size: 14px; }
.cvc-pk-ds i { font-style: normal; font-size: 12px; color: var(--muted); }
.cvc-pk-ds .trong { padding: 10px; margin: 0; }
.cvc-pk-bao { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 13.5px; cursor: pointer; }
.cvc-pk-bao input { accent-color: var(--blue); width: 16px; height: 16px; }
.cvc-ai { flex-basis: 100%; padding-left: 27px; font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 4px; }
.cvc-ai svg { width: 13px; height: 13px; }
.cvc label.cvd-nut { cursor: pointer; }
.cvc-xoa:hover { color: var(--red) !important; background: var(--red-soft) !important; }
/* Hộp Cập nhật người tham gia như 1O */
.cvng { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.cvng .cvp-o-nhan { display: flex !important; align-items: center; gap: 4px; pointer-events: auto; }
.cvng .cvp-o-nhan .cvp-hoi { border-color: var(--amber); color: var(--amber); width: 15px; height: 15px; font-size: 10px; margin: 0; }
.cvng-o { min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
.cvng .cvp-chip { background: var(--card-2); padding: 5px 6px 5px 12px; font-size: 13.5px; }
/* Hộp báo cáo: tách hàng Tình trạng / % khỏi ô Báo cáo tiến độ cho thoáng */
.bc-hang { margin-bottom: 22px; align-items: start; }
.bc-noi-o { margin-top: 4px; }
.bc-noi-o > span { margin-bottom: 8px; display: block; }
.bc-pt.xong input[type=range] { accent-color: var(--green); }
.bc-pt.xong b { color: var(--green); }
.bc-pt-xanh { display: none; flex: 1; height: 8px; border-radius: 4px; background: var(--green); position: relative; }
.bc-pt-xanh i { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.bc-pt.xong input[type=range] { display: none; }
.bc-pt.xong .bc-pt-xanh { display: block; }
/* Chỉnh lại: vừa đủ tách hàng Tình trạng, chữ "Báo cáo tiến độ" sát ô gõ như các ô khác */
.bc-hang { margin-bottom: 12px; }
.bc-noi-o { margin-top: 0; }
.bc-noi-o > span { margin-bottom: 0; display: inline; }
/* Hộp báo cáo như 1O: ô soạn thảo + khung đính kèm */
.hop .rt { margin-top: 4px; }
.bc-dinh { margin-top: 18px; }
.bc-tep-ds { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.bc-tep-ds .bl-anh-xem img { max-height: 120px; }
/* Đối tượng liên quan: loại + tìm bản ghi */
.cvp-dt-dong .dt-loai { flex: 0 0 34%; }
.cvp-dt-dong .dt-ban { flex: 1; }
@media (max-width: 700px) { .cvp-dt-dong { flex-wrap: wrap; } .cvp-dt-dong .dt-loai { flex: 1 1 100%; } }

/* ---------- Trang chi tiết dự án như 1O ---------- */
.da-so5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; background: #F3F5F8; padding: 12px 12px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.da-so5 + .cv-ct.cvd { border-top-left-radius: 0; border-top-right-radius: 0; }
.da-so1 { background: var(--card); border-radius: 6px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.da-so1 b { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.da-so1 div > span { font-size: 13px; color: var(--ink-2); }
.da-so-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.da-so-ic svg { width: 22px; height: 22px; }
.da-so-ic.cam { background: var(--orange-soft); color: var(--orange); } b.cam { color: var(--orange); }
.da-so-ic.do { background: var(--red-soft); color: var(--red); } b.do { color: var(--red); }
.da-so-ic.xanh { background: var(--blue-soft); color: var(--blue); } b.xanh { color: var(--blue); }
.da-so-ic.la { background: var(--green-soft); color: var(--green); } b.la { color: var(--green); }
.da-so-ic.vang { background: var(--amber-soft); color: var(--amber); } b.vang { color: var(--amber); }
.da-them { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--ink-2); }
.da-phai { display: flex; flex-direction: column; gap: 14px; height: auto; position: static; }
.da-tl { height: 520px; }
.da-tl .ngan-tl.nhung { height: 100%; }
.da-dinh { padding: 12px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.da-dinh .cdtk-trong { width: 100%; border: 0; }
.da-wl-o { display: block; }
.da-wl { display: flex; flex-direction: column; gap: 8px; }
.da-wl-dau, .da-wl-dong { display: grid; grid-template-columns: minmax(0, 2.2fr) 0.8fr 0.8fr minmax(0, 2fr); gap: 12px; align-items: center; }
.da-wl-dau { font-size: 12.5px; color: var(--muted); padding: 0 12px 6px; border-bottom: 1px solid var(--line-2); }
.da-wl-dong { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; }
.da-wl-ng { display: flex; align-items: center; gap: 10px; min-width: 0; }
.da-wl-ng > span { display: flex; flex-direction: column; min-width: 0; }
.da-wl-ng b { font-weight: 500; font-size: 13.5px; }
.da-wl-ng i { font-style: normal; font-size: 12px; color: var(--muted); }
.da-wl-so { font-style: normal; display: inline-flex; align-items: center; gap: 5px; background: var(--card-2); border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.da-wl-so svg { width: 15px; height: 15px; color: var(--purple); }
.da-wl-so.cam svg { color: var(--orange); }
.da-wl-thanh { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2); }
.da-wl-thanh i.la, .da-wl-chu i.la { background: var(--green); } .da-wl-thanh i.xanh, .da-wl-chu i.xanh { background: var(--blue); }
.da-wl-thanh i.cam, .da-wl-chu i.cam { background: var(--amber); }
.da-wl-chu { display: flex; justify-content: center; gap: 22px; font-size: 13px; color: var(--ink-2); padding-top: 6px; }
.da-wl-chu span { display: inline-flex; align-items: center; gap: 6px; }
.da-wl-chu i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 900px) { .da-so5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .da-wl-dau { display: none; } .da-wl-dong { grid-template-columns: 1fr 1fr; } .da-wl-ng, .da-wl-thanh { grid-column: 1 / -1; } }
.da-tabs { display: flex; gap: 22px; }
.da-tabs button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-2); padding: 11px 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.da-tabs button.chon { color: var(--brand-ink); border-bottom-color: var(--brand); }
.cvd-tabs.da-tabs button:not(.chon) { cursor: pointer; }
.da-dinh-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.da-bc .table-wrap { margin: 12px 16px 16px; }
.da-bc-bang th, .da-bc-bang td { border: 1px solid var(--line-2); text-align: center; }
.da-bc-bang th.giua { text-align: center; }
.da-bc-bang td:nth-child(2), .da-bc-bang td:nth-child(3), .da-bc-bang td:nth-child(4) { text-align: left; }
.da-bc-bang td i { font-style: italic; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .da-dinh-2 { grid-template-columns: 1fr; } }
.da-so5.da-so3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); padding-bottom: 12px; margin-bottom: 12px; }
.da-dt-bang tfoot td { border-top: 2px solid var(--line); background: var(--card-2); }
@media (max-width: 700px) { .da-so5.da-so3 { grid-template-columns: 1fr; } }
.cvd-khoi > header .grow { flex: 1; }
.da-dt-bang td.cv-lap-nut { white-space: nowrap; }
.da-dt-bang td.cv-lap-nut .icon-btn { display: inline-grid; }
/* Tiến độ dự án trong hộp báo cáo: thanh tự tính, Hoàn thành thì xanh lá 100% */
.bc-pt-tinh { flex: 1; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bc-pt-tinh i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.bc-pt.xong .bc-pt-tinh { display: none; }
.da-bc-ds { padding: 12px 16px 16px; }

/* Dấu + thêm người nhanh ở chi tiết dự án */
.da-ng-them{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.da-cong{width:30px;height:30px;border-radius:50%;border:1px dashed var(--line-strong,#c9ccd3);background:transparent;color:var(--muted);display:inline-grid;place-items:center;cursor:pointer;flex:none}
.da-cong:hover{border-color:var(--brand);color:var(--brand);border-style:solid}
.da-cong svg{width:14px;height:14px}

/* Ô nhập tiền có đuôi đ */
.o-tien{position:relative;display:flex;align-items:center}
.o-tien > input{width:100%;padding-right:30px;text-align:left;font-variant-numeric:tabular-nums}
.o-tien > span{position:absolute;right:12px;color:var(--muted);pointer-events:none}

/* Chi, nạp, duyệt chi trong dự toán dự án */
.da-cho{color:#b7791f;font-style:normal;font-size:12px}
.da-cho-bao{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.da-cho-bao > span{flex:1;min-width:200px}
.da-lan-mo{display:flex;align-items:center;gap:4px;border:0;background:none;padding:2px 0 0;color:var(--muted);font-size:12px;cursor:pointer}
.da-lan-mo svg{width:12px;height:12px;transition:transform .15s}
.da-lan-mo[aria-expanded="true"] svg{transform:rotate(180deg)}
.da-lan-mo:hover{color:var(--brand)}
.da-dt-nut{white-space:nowrap}
.da-dt-nut .btn.nho{padding:4px 8px}
tr.da-dt-mo > td{border-bottom-color:transparent}
tr.da-lan-hang > td{background:var(--bg-soft,#f7f8fa);padding:10px 14px}
.da-lan{display:flex;flex-direction:column;gap:8px}
.da-lan1{background:var(--card,#fff);border:1px solid var(--line);border-left:3px solid #f59e0b;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.da-lan1.nap{border-left-color:#16a34a}
.da-lan-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.da-lan-tien.chi{color:#c2410c}
.da-lan-tien.nap{color:#15803d}
.da-lan-gc{font-size:13px}
.da-lan-hd{display:flex;flex-wrap:wrap;gap:6px}
.da-lan-hd .cvp-tep{cursor:pointer;border:1px solid var(--line);background:none}
.da-lan-hd .cvp-tep:hover{border-color:var(--brand);color:var(--brand)}
.da-lan-nut{display:flex;gap:6px;flex-wrap:wrap}
.da-tu-choi{color:#dc2626}

/* Lịch sử hoạt động như 1O: đường dọc nối các chấm, ảnh người bên phải */
.nt-hd { gap: 14px; }
.nt-hd-1 { position: relative; gap: 12px; }
.nt-hd-1:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: -14px; width: 2px;
  background: var(--line); border-radius: 1px; }
.nt-hd-cham { position: relative; z-index: 1; margin-top: 12px; box-shadow: 0 0 0 3px var(--card, #fff); }
.nt-hd-cham.tao { background: #22c55e; }
.nt-hd-cham.sua { background: #ec4899; }
.nt-hd-cham.xong { background: #3b82f6; }
.nt-hd-cham.xoa { background: #ef4444; }
.nt-hd-1 > div { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; min-width: 0; }
.nt-hd-noi { flex: 1; min-width: 0; }
.nt-hd-1 p { overflow-wrap: anywhere; }
.nt-hd-1 p span { color: var(--muted); }
.nt-hd-1 small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.nt-hd-1 > div > .anh-tron, .nt-hd-1 > div > span:last-child { flex: none; }
.da-k-hd{margin-top:4px}
.da-k-hd .cvp-tep{font-size:12px;padding:2px 8px}
.cvng-gy-dau{padding:8px 12px 4px;font-size:12px;color:var(--muted);font-weight:600}
.cvng .cvng-o + .cvng-o{margin-top:16px}

/* Trang tạo việc lặp như 1O */
.lf .cvp-khoi-than > .cvp-nhan { margin-top: 14px; }
.lf .cvp-khoi-than > .cvp-nhan:first-child { margin-top: 0; }
.lf-hang { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lf-thu { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lf-thu .cvp-tick { margin: 0; }
.lf-ngan { max-width: 260px; }
.lf-kt { display: flex; flex-direction: column; gap: 10px; }
.lf-kt-hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf-kt-hang .cvp-radio { min-width: 92px; margin: 0; }
.lf-kt-hang .ngay-o { width: 200px; margin: 0; }
.lf-kt-hang .ngay-o.tat { opacity: .55; pointer-events: none; background: var(--card-2); }
.lf-solan { width: 80px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 10px; text-align: right;
  font: inherit; background: var(--card); color: var(--ink); }
.lf-solan:disabled { background: var(--card-2); opacity: .6; }
.lf-tomtat { background: var(--card-2); border-radius: var(--r-md); padding: 12px 14px; color: var(--muted); font-size: 13.5px; margin: 14px 0 6px; }
.lf-lich { display: block; white-space: normal; min-width: 240px; max-width: 360px; font-size: 13px; line-height: 1.45; }
.lf-thu .cvp-tick { border: 0; padding: 0; background: none; gap: 8px; }

/* Dashboard công việc như 1O */
.db-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.db-loc.dang { color: var(--brand); }
.da-so5.db-so4 { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg); padding: 12px; margin-bottom: 12px; }
.db-o { padding: 22px 20px; gap: 18px; }
.db-o .da-so-ic { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.db-o .da-so-ic svg { width: 30px; height: 30px; }
.db-o div > span { font-size: 15px; color: var(--ink); display: block; }
.db-o b { font-size: 34px; margin-top: 6px; }
.da-so-ic.tim { background: #EEEBFF; color: #6D5DF5; } b.tim { color: #6D5DF5; }
.db-tang { display: inline-block; font-style: normal; font-size: 12px; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 6px; margin-top: 4px; }
.db-tang.giam { color: var(--red); background: var(--red-soft); }
.db-hai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.db-bd { padding: 18px; min-width: 0; }
.db-bd-ten { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.db-bd-ten.trai { text-align: left; color: var(--ink); font-weight: 600; }
.db-banh { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.db-banh svg { width: min(280px, 70vw); height: auto; flex: none; }
.db-bam { cursor: pointer; }
path.db-bam:hover { opacity: .85; }
.db-chu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.db-chu li { display: grid; grid-template-columns: 12px 1fr auto 42px; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.db-chu li.db-bam:hover { background: var(--card-2); }
.db-chu i { width: 12px; height: 12px; border-radius: 3px; }
.db-chu em { font-style: normal; color: var(--muted); text-align: right; }
.db-rong { text-align: center; margin: 8px 0 0; }
.db-bang .table-wrap { max-height: 420px; overflow: auto; }
.db-bang td .bar, .db-bang td .cv-thanh { min-width: 120px; }
.db-dem { margin-top: 10px; }
.db-cot { display: flex; gap: 8px; height: 300px; padding: 6px 4px 0; }
.db-truc { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); padding-bottom: 38px; text-align: right; min-width: 22px; }
.db-truc span { transform: translateY(-50%); }
.db-truc span:last-child { transform: translateY(50%); }
.db-cot-than { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 38px; min-width: 0; }
.db-luoi { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2, #EEF0F3); margin-bottom: 38px; }
.db-cot1 { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.db-cot-bar { width: min(64px, 70%); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.db-cot-bar b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.db-cot1 > span { position: absolute; bottom: -34px; font-size: 11.5px; color: var(--muted); text-align: center; width: 100%; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.db-luoi4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.db-luoi4 .db-o { background: var(--card); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.05)); }
@media (max-width: 900px) {
  .da-so5.db-so4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-hai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .da-so5.db-so4, .db-luoi4 { grid-template-columns: minmax(0, 1fr); }
  .db-o b { font-size: 26px; }
}

/* Tổng quan: sơ đồ cách dùng (chỉ boss) */
.tq { padding: 0; overflow: hidden; background: #F3F5F8; }
.tq-cu { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.tq-vung { overflow: auto; padding: 20px; max-height: calc(100vh - 220px); }
.tq-khung { min-width: 980px; text-align: center; }
.tq-khung h2 { font-size: 17px; margin: 4px 0 8px; letter-spacing: .02em; }
.tq-mo { max-width: 760px; margin: 0 auto 24px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.tq-so { display: flex; align-items: center; justify-content: center; gap: 0; text-align: left; }
.tq-cot { display: flex; flex-direction: column; gap: 16px; align-items: stretch; width: 250px; flex: none; }
.tq-mui { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; color: #9AA3AE; font-size: 22px; }
.tq-mui em { font-size: 12px; color: var(--muted); }
.tq-the { background: var(--card); border-radius: 8px; padding: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.tq-dau { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; }
.tq-dau b { display: block; font-size: 14px; }
.tq-dau i { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tq-dau i svg { width: 12px; height: 12px; }
.tq-ic { width: 44px; height: 44px; border-radius: 8px; background: var(--red-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.tq-ic svg { width: 22px; height: 22px; }
.tq-the ul { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tq-the li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.tq-the li svg { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 2px; }
.tq-nut { margin-top: 10px; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 0 0; width: 100%; text-align: left;
  color: var(--brand); font: inherit; font-size: 13.5px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tq-nut svg { width: 15px; height: 15px; }
.tq-nut:hover { text-decoration: underline; }
.tq-the.do .tq-dau { background: var(--brand); color: #fff; margin: -14px -14px 0; padding: 14px; border-radius: 8px 8px 0 0; }
.tq-the.do .tq-dau i { color: #fff; opacity: .9; }
.tq-the.do .tq-ic { background: rgba(255,255,255,.2); color: #fff; }
.tq-the.do ul { border-top: 0; padding-top: 12px; }
.tq-nguoi { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tq-nguoi span { width: 42px; height: 42px; border: 1px solid var(--brand); border-radius: 8px; display: grid; place-items: center; color: var(--brand); background: var(--card); }
.tq-nguoi span svg { width: 20px; height: 20px; }
.tq-nguoi i { font-style: normal; font-size: 13px; color: var(--muted); text-align: center; }
.tq-khac { border: 1.5px dashed var(--brand); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tq-khac > b { text-align: center; font-size: 13px; }
.db-dau { border-bottom: 1px solid var(--line); }
.db-dau .grow, .tq-cu .grow { flex: 1; }
.db-bang table.grid { min-width: 560px; }
.db-bang th { white-space: nowrap; }
.tq-chon { gap: 18px; }
/* Sơ đồ Quy trình: cột thẻ bên trái, bảng lưu đồ ở giữa, ô Hoàn thành bên phải */
.tq-qt-chon { max-width: 260px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 8px; background: var(--card); font: inherit; font-size: 13px; }
.tq-qt-tat { max-width: 640px; margin: 0 auto 18px; text-align: left; }
.tq-so-qt { align-items: center; }
.tq-cot-qt { gap: 0; width: 260px; }
.tq-mui-doc { display: flex; justify-content: center; color: #9AA3AE; font-size: 20px; line-height: 1; padding: 6px 0; }
.tq-qt-giua { width: 560px; flex: none; background: var(--card); border: 1.5px solid var(--purple); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.tq-qt-ten { background: var(--purple); color: #fff; font-weight: 600; font-size: 14px; padding: 12px; text-align: center; }
.tq-qt-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.tq-qt-bang th, .tq-qt-bang td { border: 1px solid var(--purple-soft); padding: 8px 10px; text-align: center; vertical-align: middle; }
.tq-qt-bang th { font-weight: 600; background: #FAF8FF; }
.tq-qt-bang th:first-child, .tq-qt-stt { width: 44px; }
.tq-qt-bang th:last-child { width: 130px; }
.tq-qt-luu { position: relative; padding: 14px 16px !important; }
.tq-qt-luu::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px solid var(--purple); opacity: .45; }
.tq-qt-luu.dau::before { top: 50%; }
.tq-qt-luu.cuoi::before { bottom: 50%; }
.tq-qt-luu.dau.cuoi::before { display: none; }
.tq-qt-hop { position: relative; display: inline-block; max-width: 320px; background: var(--card); border: 1.5px solid var(--purple); border-radius: 4px; padding: 7px 12px; line-height: 1.4; }
.tq-qt-hop.tron { border-radius: 18px; }
.tq-qt-rong { padding: 28px 16px; color: var(--muted); font-size: 13px; }
.tq-qt-rong .tq-nut { border-top: 0; text-align: center; justify-content: center; }
.tq-qt-xong { flex: none; display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 8px; padding: 12px 18px; font-size: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.tq-qt-xong svg { width: 16px; height: 16px; color: var(--brand); }
@media (max-width: 560px) {
  .da-so5.db-so4, .db-luoi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .db-o { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
  .db-o .da-so-ic { width: 40px; height: 40px; }
  .db-o .da-so-ic svg { width: 20px; height: 20px; }
  .db-o div > span { font-size: 12.5px; }
  .db-o b { font-size: 24px; margin-top: 2px; }
}

/* ---------- Báo cáo như 1O: danh sách + bảng số kiểu Excel ---------- */
.bcv { padding: 0; overflow: hidden; }
.bcv-cu { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bcv-cu .grow { flex: 1; }
.bcv-tieu { font-size: 15px; margin: 0; font-weight: 600; }
.bcv-ds { width: 100%; }
.bcv-ds td, .bcv-ds th { padding-left: 16px; }
.bcv-dong { cursor: pointer; }
.bcv-dong:hover td { background: var(--card-2); }
.bcv-ten { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.bcv-xem-cot { width: 200px; text-align: center !important; }
.bcv-chan { margin: 0; padding: 10px 16px; }
.bcv-vung { border-radius: 0; }
.bcv-bang { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 13px; }
.bcv-bang th, .bcv-bang td { border: 1px solid var(--line-2); padding: 9px 10px; text-align: center; vertical-align: middle; }
.bcv-bang th { background: #F7F7F8; font-weight: 500; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.bcv-bang .trai { text-align: left; }
.bcv-bang td i { font-style: italic; color: var(--ink-2); }
.bcv-bang .bcv-do, .bcv-bang .bcv-do i { color: var(--red); }
.bcv-bang tr.bcv-nhom td { background: #EDEDEF; font-weight: 600; }
.bcv-rong { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; color: var(--muted); font-size: 14px; }
.bcv-rong svg { width: 28px; height: 28px; }
.bcv-nhanh { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 560px) { .bcv-tieu { font-size: 14px; flex-basis: calc(100% - 50px); } .bcv-cu .grow { display: none; } }

/* ---------- Tài liệu công ty như 1O (nhóm ADVANCE) ---------- */
.tlv { padding: 0; overflow: hidden; display: flex; min-height: calc(100vh - 120px); }
.tlv-khu { flex: none; width: 72px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; }
.tlv-khu button { border: 0; background: none; border-radius: 8px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.tlv-khu button svg { width: 20px; height: 20px; }
.tlv-khu button.dang { background: var(--brand-soft); color: var(--brand-ink); }
.tlv-chinh { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tlv-giua { flex: 1; display: flex; min-height: 0; }
.tlv-tt { flex: none; width: 340px; max-width: 100%; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.tlv-tt-dau { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.tlv-tt-dau b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlv-tt-dau .grow { flex: 1; }
.tlv-tt-tab { padding: 0 14px; border-bottom: 1px solid var(--line); }
.tlv-tt-tab span { display: inline-block; padding: 8px 0; color: var(--brand-ink); border-bottom: 2px solid var(--brand); font-size: 13.5px; }
.tlv-tt-than { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.tlv-tt-tong, .tlv-tt-dong { display: flex; align-items: center; gap: 12px; }
.tlv-tt-tong .grow, .tlv-tt-dong .grow { flex: 1; }
.tlv-tt-than b { color: var(--brand-ink); font-weight: 500; }
.tlv-tt-thanh { height: 12px; border-radius: 6px; background: #D9DBE0; display: flex; overflow: hidden; }
.tlv-tt-thanh i { display: block; height: 100%; }
.tlv-tt-dong > i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tlv-nhan { display: flex; gap: 4px; flex-wrap: wrap; }
.tlv-nhan span { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.tl-nhan-ds { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.tl-nhan-ds label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tl-nhan-ds input { accent-color: var(--brand); }
.tlv-duong .chip-xoa { margin-left: 4px; }
.tlv-cu { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tlv-cu .grow { flex: 1; }
.tlv-duong { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; font-size: 14px; }
.tlv-duong > span { color: var(--muted); }
.tlv-goc { border: 0; background: none; padding: 2px; cursor: pointer; color: #7C8CF8; display: grid; }
.tlv-goc svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.tlv-tim { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; width: 220px; color: var(--muted); background: var(--card); }
.tlv-tim svg { width: 15px; height: 15px; flex: none; }
.tlv-tim input { border: 0; outline: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink); flex: 1; min-width: 0; }
.cv-cc-chu.dang { color: var(--brand-ink); }
.tlv-nhac { margin: 10px 14px 0; display: flex; gap: 6px; align-items: center; }
.tlv-nhac svg { width: 15px; height: 15px; flex: none; }
.tlv-than { flex: 1; background: #EEF2F8; padding: 16px; display: flex; flex-direction: column; }
.tlv-than > * { flex: 1; }
.tlv-luoi { align-content: start; }
.tlv-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; background: var(--card); padding: 16px; border-radius: 6px; }
.tlv-o { position: relative; background: #F4F5F7; border-radius: 6px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tlv-o.la-thumuc { background: #EEF0FD; }
.tlv-o:hover, .tlv-o:focus-visible { box-shadow: 0 0 0 1.5px var(--brand) inset; outline: none; }
.tlv-hinh { height: 104px; display: grid; place-items: center; margin-bottom: 8px; }
.tlv-thumuc { color: #7C8CF8; display: grid; }
.tlv-thumuc svg { width: 46px; height: 46px; fill: currentColor; stroke: none; }
.tlv-thumuc.nho svg { width: 22px; height: 22px; }
.tlv-anh { max-width: 100%; max-height: 104px; border-radius: 4px; object-fit: cover; }
.tep-duoi.lon { min-width: 52px; height: 30px; font-size: 13px; }
.tlv-o-ten { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlv-o-phu { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.tlv-o-phu span { white-space: nowrap; }
.tlv-menu { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 18px; color: var(--muted); }
.tlv-menu:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.tlv-bang .tlv-menu { position: static; }
.tlv-rac-nut { display: flex; gap: 6px; flex-wrap: wrap; }
.tlv-o .tlv-rac-nut { order: 9; margin-top: 6px; }
.tlv .table-wrap { background: var(--card); border-radius: 6px; }
.tlv-bang { width: 100%; min-width: 640px; }
.tlv-bang td { vertical-align: middle; }
.tlv-dong { cursor: pointer; }
.tlv-dong:hover td { background: var(--card-2); }
.tlv-ten { display: flex; align-items: center; gap: 10px; }
.tlv-ten b { font-weight: 500; }
.tlv-nut { white-space: nowrap; text-align: right; width: 1%; }
.tlv-ng { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tlv-rong { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--muted); text-align: center; background: var(--card); border-radius: 6px; }
.tlv-rong svg { width: 34px; height: 34px; }
.tlv-rong b { color: var(--ink); }
.tlv-chan { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.tlv-chan b { color: var(--brand-ink); font-weight: 500; }
/* Trình xem file */
.tlx { position: fixed; inset: 0; z-index: 105; background: #F1F2F4; display: flex; flex-direction: column; }
.tlx-dau { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); min-width: 0; }
.tlx-dau b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tlx-dau .grow { flex: 1; }
.tlx-zoom { display: inline-flex; align-items: center; gap: 4px; }
.tlx-zoom i { font-style: normal; font-size: 12.5px; min-width: 40px; text-align: center; }
.tlx-than { flex: 1; overflow: auto; }
.tlx-cho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 60%; padding: 32px 16px; color: var(--muted); text-align: center; }
.tlx-cho svg { width: 36px; height: 36px; }
.tlx-cho b { color: var(--ink); font-weight: 500; max-width: 460px; }
.tlx-pdf { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.tlx-pdf canvas { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); max-width: none; }
.tlx-anh { display: block; max-width: calc(100% - 32px); max-height: calc(100% - 32px); margin: 16px auto; object-fit: contain; }
.tlx-video { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; }
.tlx-chu { margin: 16px; padding: 16px; background: #fff; border-radius: 6px; white-space: pre-wrap; font-size: 13px; }
@media (max-width: 760px) { .tlv-tt { position: fixed; inset: auto 0 0 0; width: auto; max-height: 70vh; z-index: 104; border-left: 0; border-top: 1px solid var(--line); box-shadow: var(--shadow-2); } }
@media (max-width: 560px) {
  .tlv { flex-direction: column; }
  .tlv-khu { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; }
  .tlv-khu button { flex-direction: row; font-size: 13px; padding: 6px 12px; }
  .tlv-khu button svg { width: 16px; height: 16px; }
  .tlv-tim { width: auto; flex: 1 1 100%; order: 5; }
  .tlv-cu .grow { display: none; }
  .tlv-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .tlv-than { padding: 10px; }
  .tlx-dau .btn { padding: 0 8px; }
  .tlx-zoom { display: none; }
}

/* ---------- Lịch cá nhân như 1O (boss 27/09) ---------- */
.ll-thanh.purple { background: var(--purple); }
.ll-thanh.amber { background: var(--amber); } .ll-thanh.green { background: var(--green); }
.ll-thanh.pink { background: var(--pink); }
.ll-sk.pink, .ll-chip.pink { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }
i.cham.pink, .ll i.pink, .ll-pop i.pink { background: var(--pink); }
.ll-thanh.grey { background: #9A9DA3; }
.ll-menu { width: auto; min-width: 180px; padding: 6px; gap: 2px; }
.ll-menu button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-size: 13.5px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); text-align: left; }
.ll-menu button:hover { background: var(--card-2); }
.ll-menu button svg { width: 16px; height: 16px; color: var(--muted); }
.ll-pop-mota { max-height: 160px; overflow-y: auto; padding: 8px 10px; background: var(--card-2); border-radius: var(--r-md);
  color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.ll-pop-dong a { color: var(--blue); }
.lc-form { display: grid; gap: 14px; min-width: 0; }
.lc-form .cvp-tabs { margin-bottom: 0; }
.lc-tick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.lc-tick .cvp-tick { align-items: center; }
.lc-trang { display: grid; gap: 14px; min-width: 0; }
.lc-trang[hidden], .lc-thu-khoi[hidden], .lc-thang-khoi[hidden], #lc-tg[hidden], #lc-link-o[hidden] { display: none; }
.lc-gio { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr minmax(96px, 1fr) 2fr; gap: 10px; }
.lc-gio input[type=time] { border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--card); min-width: 0; min-height: 42px; }
.lc-gio input[type=time]:disabled { background: var(--card-2); color: var(--muted); }
.lc-gio .ngay-o { min-width: 0; }
.lc-canngay { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; width: max-content; }
.lc-songuoi { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; }
.lc-nhan-dd { margin: 0 0 -6px; color: var(--ink); font-size: 14px; }
#lc-dds { display: grid; gap: 10px; }
.lc-dd { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; }
.lc-them-dd { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brand); background: var(--card); color: var(--brand);
  display: grid; place-items: center; cursor: pointer; }
.lc-them-dd svg { width: 16px; height: 16px; }
.lc-lap { display: grid; gap: 10px; }
.lc-lap.tat { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
  .lc-gio { grid-template-columns: minmax(90px, 1fr) 1.6fr; }
  .lc-tick { grid-template-columns: 1fr; }
  .lc-dd { grid-template-columns: 1fr auto; }
  .lc-dd > .cvp-o.chon { grid-column: 1 / -1; }
}

/* ---------- Văn bản (boss 27/09): VB nội bộ + Đề xuất ---------- */
.vbv-tieu { font-size: 15px; }
.vbv-tab { display: flex; gap: 4px; flex-wrap: wrap; }
.vbv-tab button { border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-2); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.vbv-tab button:hover { background: var(--card-2); }
.vbv-tab button.dang { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
.tlv-khu button { position: relative; }
.vbv-so { position: absolute; top: 4px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red);
  color: #fff; font-size: 10.5px; font-style: normal; display: grid; place-items: center; }
.vbv-khung { background: var(--card); border-radius: 6px; }
.vbv-bang td { vertical-align: middle; }
.vbv-ten { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.vbv-ten .cell-sub { display: flex; align-items: center; gap: 4px; }
.vbv-ten .cell-sub svg { width: 13px; height: 13px; }
.vbv-moi td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.vbv-dem { font-weight: 600; color: var(--amber); }
.vbv-dem.du { color: var(--green); }
.vbx { display: grid; gap: 14px; min-width: 0; }
.vbx-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 18px; }
.vbx-o { display: grid; gap: 3px; min-width: 0; }
.vbx-o > span { font-size: 12px; color: var(--muted); }
.vbx-o > b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.vbx-o small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.vbx-noidung { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); line-height: 1.6; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.vbx-muc { font-weight: 600; color: var(--brand-ink); font-size: 14px; margin-bottom: -6px; }
.vbx-tep { display: grid; gap: 6px; }
.vbx-tep-1, .vbf-tep-1 { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; min-width: 0; color: var(--ink); }
.vbx-tep-1:hover { background: var(--card-2); }
.vbx-tep-1 > span:nth-child(2), .vbf-tep-1 > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbx-tep-1 i, .vbf-tep-1 i { font-style: normal; color: var(--muted); font-size: 12px; }
.vbf-tep-1 { cursor: default; }
.vbx-doc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.vbx-doc-1 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.vbx-doc-1 .grow { flex: 1; }
.vbx-doc-1 small { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.vbx-doc-1 small svg { width: 13px; height: 13px; }
.vbx-doc .chu-xanh { color: var(--green); }
.vbx-doc .chu-do { color: var(--red); }
.vbx-lydo { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--red-soft); color: var(--red); font-size: 13.5px; }
.vbx-lydo svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.vbx-tuchoi { display: grid; gap: 8px; }
.vbx-tuchoi[hidden], #vbf-nhan[hidden], #vbf-loaimoi-o[hidden] { display: none; }
.vbx-tuchoi-nut { display: flex; justify-content: flex-end; gap: 8px; }
.vbf { display: grid; gap: 14px; min-width: 0; }
.vbf-khoi { display: flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 600; font-size: 14px; }
.vbf-khoi svg { width: 14px; height: 14px; }
.vbf-ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vbf-tep { display: grid; gap: 8px; }
.vbf-keo { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 18px 12px; border: 1px dashed var(--line);
  border-radius: var(--r-md); cursor: pointer; color: var(--ink-2); font-size: 13.5px; text-align: center; }
.vbf-keo > svg { width: 22px; height: 22px; color: var(--brand); }
.vbf-keo.keo { border-color: var(--brand); background: var(--brand-soft); }
.vbf-ds { display: grid; gap: 6px; }
.vbf-ds:empty { display: none; }
@media (max-width: 640px) {
  .vbf-ba { grid-template-columns: 1fr; }
  .vbv .tlv-khu button { white-space: nowrap; }
  .vbv-so { position: static; }
}

/* ---------- Bảng ứng dụng: thu gọn từng nhóm (boss 27/09) ---------- */
button.app-nhom { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font-family: inherit;
  cursor: pointer; text-align: left; border-radius: 8px; }
button.app-nhom:hover { color: var(--brand-ink); }
button.app-nhom svg { width: 15px; height: 15px; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.app-khoi.thu button.app-nhom svg { transform: rotate(-90deg); }
.app-luoi-bao { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.app-luoi-bao > .app-luoi { overflow: hidden; min-height: 0; }
.app-khoi.thu .app-luoi-bao { grid-template-rows: 0fr; }
/* Boss 29/09: bỏ đường kẻ ngang giữa các nhóm */
.app-khoi.thu .app-nhom-hang { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .app-luoi-bao, button.app-nhom svg { transition: none; } }
/* Kéo thả thứ tự nhóm (boss 27/09) */
.app-nhom-hang { display: flex; align-items: center; gap: 2px; padding: 22px 0 12px; }
.app-nhom-hang button.app-nhom { flex: 1; min-width: 0; padding-top: 0; padding-bottom: 0; line-height: 26px; }
.app-keo { flex: none; display: grid; place-items: center; width: 26px; height: 30px; margin-left: -8px; border-radius: 6px; color: var(--muted);
  cursor: grab; touch-action: none; user-select: none; }
.app-keo:hover { background: var(--card-2); color: var(--ink); }
.app-keo svg { width: 16px; height: 16px; stroke-width: 2.1; }   /* 6 chấm, nhạt bằng mũi tên thả xuống (boss 27/09) */
.app-than.dang-sap .app-luoi-bao { display: none; }
.app-than.dang-sap { user-select: none; }
.app-than.dang-sap .app-nhom-hang { padding-top: 14px; padding-bottom: 14px; }
.app-khoi.dang-keo { background: var(--brand-soft); border-radius: 10px; box-shadow: var(--shadow-2); position: relative; z-index: 1; }
.app-khoi.dang-keo .app-keo { cursor: grabbing; color: var(--brand); }

/* ---------- Check out: chụp, quay tại chỗ + link, mã QR (boss 27/09) ---------- */
.pn-chup { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-chup .cc-them { flex: 1 1 140px; justify-content: center; }
.mobilebar .mb-checkout { color: var(--brand-ink); }
.mobilebar .mb-checkout svg { color: var(--brand); }
.pn-qr { display: grid; gap: 12px; justify-items: center; text-align: center; }
.pn-qr-anh { min-height: 200px; display: grid; place-items: center; }
.pn-qr-anh img { width: min(260px, 70vw); height: auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 12px; }
.pn-qr-link { display: flex; gap: 8px; width: 100%; }
.pn-qr-link input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; font: inherit; font-size: 13px; background: var(--card-2); color: var(--ink); }

/* ---------- Trò chuyện (boss 27/09): chat gọn, tin tự xoá sau 7 ngày ---------- */
.tnv { padding: 0; overflow: hidden; display: flex; height: calc(100dvh - 118px); min-height: 420px; }
.tnv-ds { flex: none; width: 320px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tnv-ds-dau { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.tnv-ds-dau b { font-size: 16px; }
.tnv-ds-dau .grow, .tnv-dau .grow { flex: 1; }
.tnv-tim { margin: 0 14px 8px; width: auto; }
.tnv-list { flex: 1; overflow-y: auto; padding: 0 6px; }
.tnv-1 { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; text-align: left;
  padding: 9px 8px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.tnv-1:hover { background: var(--card-2); }
.tnv-1.dang { background: var(--brand-soft); }
.tnv-1-giua { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tnv-1-giua b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnv-1-giua span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnv-1.moi .tnv-1-giua b, .tnv-1.moi .tnv-1-giua span { font-weight: 600; color: var(--ink); }
.tnv-1-phai { display: grid; justify-items: end; gap: 4px; flex: none; }
.tnv-1-phai i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tnv-1-phai em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; display: grid; place-items: center; }
.tnv-rong { padding: 16px 10px; font-size: 13px; }
.tnv-luat { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tnv-luat svg { width: 14px; height: 14px; }
.tn-anh-nhom { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex: none; }
.tn-anh-nhom.lon { width: 38px; height: 38px; font-size: 14px; }
.tn-anh-nhom.he { background: var(--green-soft); color: var(--green); }
.tn-anh-nhom svg { width: 18px; height: 18px; }
.tnv-khung { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.tnv-trong { margin: auto; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--muted); padding: 24px; max-width: 360px; }
.tnv-trong svg { width: 34px; height: 34px; }
.tnv-trong b { color: var(--ink); }
.tnv-dau { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tnv-dau-ten { display: grid; min-width: 0; }
.tnv-dau-ten b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnv-dau-ten span { font-size: 12px; color: var(--muted); }
.tnv-lui { display: none; }
.tnv-than { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #F7F8FA; }
.tn-tin { position: relative; }
.tn-tin p { white-space: normal; overflow-wrap: anywhere; }
.tn-thuhoi { font-style: italic; opacity: .7; }
.tn-nut-thuhoi { align-self: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; opacity: 0; }
.tn-tin:hover .tn-nut-thuhoi, .tn-nut-thuhoi:focus { opacity: 1; }
.tn-nut-thuhoi svg { width: 15px; height: 15px; }
@media (hover: none) { .tn-nut-thuhoi { opacity: .6; } }
.tn-tep { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 4px; }  /* ô file không bị kéo cao theo ảnh cùng hàng */
.tn-tep img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; display: block; }
.tn-tep video { width: 220px; max-width: 100%; border-radius: 12px; }
.tn-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  font: inherit; font-size: 13px; cursor: pointer; max-width: 260px; color: var(--ink); text-align: left; }
.tn-file > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-file i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tn-the { align-self: flex-start; width: min(520px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tn-the-dau { padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.tn-the.green .tn-the-dau { background: var(--green-soft); color: var(--green); }
.tn-the.amber .tn-the-dau { background: var(--amber-soft); color: var(--amber); }
.tn-the-than { padding: 10px 14px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.tn-the-than p { margin: 0; overflow-wrap: anywhere; }
.tn-the > i { display: block; padding: 0 14px 8px; font-style: normal; font-size: 11px; color: var(--muted); }
.tn-cho { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.tn-cho-1 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--card-2); font-size: 12.5px; max-width: 220px; }
.tn-cho-1 button { border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; }
.tn-cho-1 svg { width: 13px; height: 13px; }
.tnv-soan { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); }
.tnv-soan label.icon-btn { cursor: pointer; }
.tnv-soan textarea { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font: inherit; font-size: 14px;
  resize: none; max-height: 120px; background: var(--card-2); color: var(--ink); outline: none; }
.tnv-soan textarea:focus { border-color: var(--brand); background: var(--card); }
.tn-chon-ng { display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; }
.tn-chon-ng button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; text-align: left; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.tn-chon-ng button:hover { background: var(--card-2); }
.tn-chon-ng span { display: grid; }
.tn-chon-ng i { font-style: normal; font-size: 12px; color: var(--muted); }
.tn-cd { display: grid; gap: 14px; }
.tn-cd-dau { display: flex; align-items: center; gap: 12px; }
.tn-cd-dau > div { display: grid; }
.tn-cd-dau span { font-size: 12.5px; color: var(--muted); }
.tn-cd-tv { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tn-cd-tv span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tn-cd-tv i { font-style: normal; font-size: 11px; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 6px; border-radius: 999px; }
@media (max-width: 760px) {
  .tnv { height: calc(100dvh - 176px); }
  .tnv-ds { width: 100%; border-right: 0; }
  .tnv.co-mo .tnv-ds { display: none; }
  .tnv:not(.co-mo) .tnv-khung { display: none; }
  .tnv-lui { display: grid; }
  .tn-tep img { width: 110px; height: 110px; }
}

/* ---------- Dịch vụ & sản phẩm (boss 29/09) ---------- */
.dv-ten { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink, inherit);
  cursor: pointer; text-align: left; }
.dv-ten:hover { color: var(--brand); text-decoration: underline; }
.dv-canh { font-size: 12px; cursor: help; }
.dv-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 4px 0 14px; }
.dv-dau > b { font-size: 22px; color: var(--brand); }
.dv-muc { margin: 18px 0 8px; font-size: 14px; }
.dv-ds { margin: 0; padding-left: 20px; line-height: 1.6; }
.dv-ds-canh li { color: #B45309; }
table.grid.dv-pp { width: 100%; min-width: 0; }  /* table.grid mặc định rộng tối thiểu 720px, bảng nhỏ này không cần */
.dv-pp td { padding: 7px 10px; vertical-align: top; }
.dv-pp td.num { white-space: nowrap; text-align: right; }
@media (max-width: 600px) { .dv-pp td.num { white-space: normal; } }

/* ---------- Màn đăng nhập (bản Netlify, boss 29/09) ---------- */
.dn-nen { grid-column: 1 / -1; min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.dn-hop { width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 28px 24px; display: grid; gap: 14px; }
.dn-logo { display: flex; align-items: center; gap: 10px; }
.dn-logo img { width: 40px; height: auto; }
.dn-logo b { font-size: 16px; letter-spacing: .02em; }
.dn-hop h1 { margin: 4px 0 0; font-size: 20px; }
.dn-o { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.dn-o input { font: inherit; font-size: 15px; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); }
.dn-o input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
.dn-loi { margin: 0; min-height: 18px; color: var(--brand); font-size: 13px; }
.dn-nut { justify-content: center; padding: 11px; font-size: 15px; }
.dn-nho { margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }

/* File trong chat bản Netlify (boss 29/09): nút tải là thẻ a, file quá 3 ngày hiện mờ */
a.tn-file { color: inherit; text-decoration: none; }
a.tn-file:hover { border-color: var(--brand); }
.tn-file.tn-het { opacity: .65; cursor: default; }
.tn-file.tn-het svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
/* Nút "Tạo việc" trên từng tin chat (boss 29/09) */
.tn-nut-viec:hover { color: var(--brand); }
.tn-the-dau { display: flex; align-items: center; gap: 6px; }
.tn-the-dau .tn-nut-viec { margin-left: auto; }
.tn-the:hover .tn-nut-viec { opacity: 1; }

/* Boss 29/09: hai nút Tạo việc / Xoá cạnh tin hạ xuống ngang bong bóng (trước nằm ngang dòng giờ, lệch lên trên) */
.tn-tin > .tn-nut-thuhoi { align-self: flex-end; margin-bottom: 8px; }
/* Ảnh nhóm */
.tn-anh-nhom { overflow: hidden; }
.tn-anh-nhom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-cd-anh { position: relative; cursor: pointer; flex: none; }
.tn-cd-anh .tn-anh-nhom.lon { width: 56px; height: 56px; font-size: 20px; }
.tn-cd-anh i { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.tn-cd-anh i svg { width: 13px; height: 13px; }
.tn-cd-anh:hover i { color: var(--brand); border-color: var(--brand); }
.tn-cd-ten { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tn-cd-ten-o { display: flex; gap: 6px; }
.tn-cd-ten-o input { flex: 1; min-width: 0; font: inherit; font-weight: 600; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.tn-cd-ten-o input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.tn-cd-ten > span { font-size: 12px; color: var(--muted); }
/* Hộp xoá tin */
.tn-xoa-giai { margin: 0; line-height: 1.6; font-size: 13.5px; }
/* Emoji */
.tn-nut-emoji { font-size: 18px; line-height: 1; }
.tn-emoji { position: fixed; z-index: 120; width: min(300px, calc(100vw - 16px)); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); }
.tn-emoji button { border: 0; background: none; font-size: 21px; line-height: 1; padding: 5px 0; border-radius: 8px; cursor: pointer; }
.tn-emoji button:hover { background: var(--brand-soft); }
/* Ô tìm trong bảng emoji (boss 29/09) */
.bi-tim { display: flex; align-items: center; gap: 6px; margin: 2px 2px 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); }
.bi-tim:focus-within { border-color: var(--brand); }
.bi-tim svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.bi-tim input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; padding: 8px 0; color: var(--ink); outline: none; }
.bi-tab[hidden] { display: none; }
/* 29/09: khung chat là cột flex nên thẻ, tin bị co lại khi nhiều tin (thẻ checkout mất ảnh và giờ) — không cho co */
.tnv-than > * { flex-shrink: 0; }

/* Camera chụp ảnh check out ngay trong web (boss 29/09) */
.pn-cam { position: fixed; inset: 0; z-index: 300; background: #000; display: flex; flex-direction: column; }
.pn-cam video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.pn-cam-loi { position: absolute; inset: 0; margin: auto; height: max-content; max-width: 320px; color: #fff; text-align: center;
  display: grid; gap: 14px; padding: 16px; line-height: 1.5; }
.pn-cam-loi[hidden] { display: none; }
.pn-cam-nut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
.pn-cam-phu { border: 0; background: rgba(255,255,255,.14); color: #fff; font: inherit; padding: 10px 14px; border-radius: 999px; cursor: pointer; min-width: 96px; }
.pn-cam-chup { width: 70px; height: 70px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: inset 0 0 0 3px #000; cursor: pointer; flex: none; }
.pn-cam-chup:active { transform: scale(.94); }
.pn-chup button.cc-them { font: inherit; cursor: pointer; }
/* Tin ghim (boss 29/09) */
.tn-ghim { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.tn-ghim > svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.tn-ghim-noi { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.tn-ghim-noi b { font-size: 12px; color: var(--brand); }
.tn-ghim-noi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-ghim-ds { display: grid; gap: 8px; }
.tn-ghim-ds .tn-ghim { border: 1px solid var(--line); border-radius: 10px; }
.tn-ghim-ai { font-size: 11.5px; color: var(--muted); margin: -4px 0 4px 4px; }
.tn-nut-ghim.dang { color: var(--brand); opacity: 1; }
.tn-tin p a, .tn-ghim a { color: inherit; text-decoration: underline; word-break: break-all; }

/* ---------- Kết sổ cuối ngày (boss 29/09) ---------- */
.pn-quy { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r, 8px); background: var(--bg); }
.pn-quy-dong { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.pn-quy-dong span { display: flex; flex-direction: column; min-width: 0; }
.pn-quy-dong i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pn-quy-dong b { white-space: nowrap; }
.pn-quy-kq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.pn-chia { font-size: 12.5px; color: var(--ink-2); }
/* Ô tìm người kết sổ nằm trong .o của form phiếu: bỏ viền ô nhập thường để giống ô người tham gia của công việc */
.pn-form .cvp-chips input, .pn-form .cvp-chips input:focus { border: 0; outline: 0; box-shadow: none; background: none; padding: 6px 0; min-height: 0; }
.pn-form .cvng-o { min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
.pn-form .cvp-chip { background: var(--card-2); padding: 5px 6px 5px 12px; font-size: 13.5px; }
/* Danh sách "Xem thử web với vai" dài (20 người) thì tự cuộn, nút Đăng xuất nằm trên nên luôn thấy */
.tk-vai { max-height: min(40vh, 360px); overflow-y: auto; }
.dn-nhotk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; user-select: none; }
.dn-nhotk input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
/* Luật đầu form check out / báo cáo tổng thu gọn được (boss 29/09) */
.pn-luat-hop { border: 1px solid var(--line-2); border-radius: var(--r, 8px); background: var(--amber-soft); }
.pn-luat-hop > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; color: var(--ink); }
.pn-luat-hop > summary::-webkit-details-marker { display: none; }
.pn-luat-hop > summary svg { width: 16px; height: 16px; flex: none; color: var(--amber); }
.pn-luat-hop > summary span { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pn-luat-hop > .pn-luat { border: 0; border-top: 1px dashed var(--line); border-radius: 0; margin: 0; }
.pn-luat-hop[open] .lh-dong, .pn-luat-hop:not([open]) .lh-mo { display: none; }