/* ============================================================
   VIETUP 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 VietUp. 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:        #1F8B85;   /* VietUp: teal thương hiệu (logo) — tô nền, kẻ viền, biểu tượng */
  --brand-ink:    #17716C;   /* teal đậm hơn cho chữ, đủ tương phản trên nền trắng */
  --brand-600:    #18756F;   /* nền nút có chữ trắng */
  --brand-soft:   #E8F5F4;   /* nền nhạt */
  --orange:       #EA580C;   /* cam VietUp, chỉ dùng điểm nhấn nhỏ */
  --orange-soft:  #FFF1E8;

  /* --- 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:        #EEF1F7;   /* boss 29/09: bỏ nền be, dùng nền xanh nhạt như 1O */
  --card:      #FFFFFF;
  --card-2:    #F6F6F6;   /* nền mục đang chọn ở menu 1Office */
  --ink:       #1D232E;
  --ink-2:     #4A5160;
  --muted:     #83868C;
  --line:      #DEE2EA;   /* viền xám lạnh cho hợp nền xanh nhạt */
  --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;
}
/* Tiêu đề khu bấm được để thu gọn (boss 30/09) */
button.side-group { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; font-family: inherit;
  text-align: left; cursor: pointer; border-radius: 6px; }
button.side-group:hover { color: var(--ink-2); }
button.side-group span { flex: 1; }
button.side-group svg { width: 14px; height: 14px; flex: none; transition: transform .15s; }
button.side-group.gon svg { transform: rotate(-90deg); }
.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; }
.banh-mi-nut { margin-left: 6px; padding: 4px 12px; border: 0; border-radius: 14px; background: rgba(255,255,255,.16); color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.banh-mi-nut:hover, .banh-mi-nut:focus-visible { background: rgba(255,255,255,.28); outline: none; }

/* --- 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: 19px; font-weight: 800; color: var(--brand-ink);   /* boss 06/10: tiêu đề bài thông báo to, rõ */
  margin-bottom: 10px; 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 VietUp --- */
.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 128px; gap: 8px; padding: 12px 14px; }
/* Nút chấm công vào: cùng khung ô Giờ vào / Giờ ra, nền màu giao diện, chữ không gãy dòng */
.cc-nut-vao {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-md); padding: 10px 6px; border: 1px solid transparent; cursor: pointer;
  background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap;
}
.cc-nut-vao svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand); color: #fff; box-sizing: content-box; }
@media (hover: hover) { .cc-nut-vao:hover { border-color: var(--brand); } }
.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; }
  .cc-nut-vao { grid-column: 1 / -1; flex-direction: row; padding: 11px; font-size: 13.5px; }
  .cc-nut-vao svg { width: 16px; height: 16px; }
}

/* ============================================================
   MENU CHUỘT PHẢI
   ============================================================ */
.menu-chuot {
  position: fixed; z-index: 120;   /* trên khung chi tiết Liên hệ (97) — trước là 90 nên menu ⋯ nằm dưới khung, boss 30/09 */ 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;
  /* Boss 05/10: cột dài (146 đơn cũ) đẩy thanh cuộn ngang xuống tận cuối trang → mỗi cột cao vừa màn hình, tự cuộn dọc bên trong */
  display: flex; flex-direction: column; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
.kb-cot > .kb-dau { flex: none; }
.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-dau.kb-dau-ng { flex-direction: row; align-items: center; gap: 8px; background: var(--kb-nen); border-bottom-color: var(--kb-mau); }
.kb-dau-ng > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-dau-ng b { color: var(--kb-mau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-dau-ng .avatar { flex: none; }
.kb-the-ds { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.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 VietUp 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-hom-nay .cc-khoi { margin: 0; padding: 10px 11px; }   /* ô Giờ vào / Giờ ra trang chủ không ăn margin của khối CCCD cùng tên */
.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; } }
/* Boss 03/10: khung xem nhanh thảo luận mở từ chuông, nổi giữa màn như 1O "Trả lời bình luận" */
.ngan-tl-nen { position: fixed; inset: 0; z-index: 110; background: rgba(15, 18, 24, .38); }
.ngan-tl.noi { z-index: 111; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 24px));
  height: min(82vh, 760px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(29,35,46,.22); animation: none; overflow: hidden; }
.ngan-tl.noi .nt-dau { align-items: center; border-bottom: 1px solid var(--line); }
/* Khối thông tin công việc trong khung thảo luận (boss 03/10: thấy nhanh việc gì, trạng thái, làm được ngay) */
.nt-cv-cha { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.nt-cv-cha b { color: var(--ink-2); font-weight: 600; }
.nt-cv .nt-cap b .pill { vertical-align: 1px; }
.nt-cv-mo { font-size: 13px; color: var(--ink); margin-top: 8px; line-height: 1.45; }
.nt-cv-mo span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 1px; }
.nt-cv .nt-tt-nut { flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.nt-cv .nt-tt-nut button:not(:last-child) { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 4px 10px; border-radius: 14px; }
.nt-cv .nt-tt-nut button:not(:last-child):hover { border-color: var(--brand); color: var(--brand); }
.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; }
/* Boss 01/10: "mấy cái trường đậm lên, nhìn nhạt quá khó nhìn" — nhãn ô nhập cả web sẫm + đậm hơn: ô trống (nhãn nằm trong ô) màu chữ phụ,
   nhãn đã nổi lên viền thì màu chữ chính, đậm, to hơn chút */
.cvp-o > span, .cvp-o-nhan { color: var(--ink-2); font-weight: 500; }
.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 { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.cvp-nhan { color: var(--ink); font-weight: 600; }
.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 { background: var(--card-2); }
/* Boss 02/10 tưởng chỉ chọn được 1 người: người đã chọn có nền đỏ nhạt + dấu tích bên phải */
.cvc-pk-ds button.chon { background: var(--brand-soft); }
.cvc-pk-ds button.chon::after { content: "✓"; margin-left: auto; color: var(--brand); font-weight: 700; font-size: 15px; }
.cvc-pk-goi { padding: 6px 14px 0; font-size: 12px; color: var(--muted); }
.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; }
/* Boss 02/10: con mắt hiện / ẩn mật khẩu */
.dn-mk-o { position: relative; display: grid; }
.dn-mk-o input { padding-right: 44px; }
.dn-mat { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
.dn-mat:hover { color: var(--ink); background: var(--card-2); }
.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; }

/* ---------- Đơn từ, phiếu chi (boss 29/09) ---------- */
.dt-ct { display: flex; flex-direction: column; gap: 10px; }
.dt-ct-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-ct .pn-ds-cau { border: 1px solid var(--line-2); border-radius: var(--r, 8px); overflow: hidden; }
.dt-ct .pn-cau:first-child { border-top: 0; }
.dt-ls { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.dt-ls i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 4px; }
.dt-form .pn-o { margin-top: 4px; }
.db-phu { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Sơ đồ rộng hơn khung thì vẫn cuộn ngang xem được mép trái (trước bị cắt vì căn giữa) */
.tq-so { justify-content: safe center; }
/* Hộp phiếu chi / trang tạo đơn: chừa chỗ cho nhãn nổi, không đè lên dòng nhắc ở trên (boss 29/09 chụp lỗi) */
.ct-ct.dt-form { display: flex; flex-direction: column; gap: 18px; }
.dt-form .pn-o { gap: 8px; }
.dt-form .pn-goi { display: block; margin-top: 2px; }
.dt-form .o-tien > input { border: 1px solid var(--line); border-radius: var(--r-md); min-height: 42px; padding: 0 30px 0 12px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--card); outline: 0; }
.dt-form .o-tien > input:focus { border-color: var(--brand); }

/* ---------- Chấm công (boss 29/09) ---------- */
.cc-hop { display: flex; flex-direction: column; gap: 12px; }
.cc-hop-gio { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.cc-hop-gio b { color: var(--ink); font-size: 15px; }
.cc-hop-dong { display: grid; grid-template-columns: 44px auto 1fr; align-items: baseline; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); }
.cc-hop-dong span { font-size: 12.5px; color: var(--muted); }
.cc-hop-dong b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cc-hop-dong i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.cc-hop-dong.xanh b { color: var(--green); }
.cc-hop-dong.do b { color: var(--red); }
.cc-nut-vao { justify-content: center; padding: 13px; font-size: 15px; }
.cc-cd { display: flex; flex-direction: column; gap: 14px; }
.cc-studio { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.cc-studio p { margin: 0; }
.cc-studio-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cc-lr-dong { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.cc-lr-dong > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-lr-dong i { font-style: normal; font-size: 12px; color: var(--muted); }
.cc-lr { display: flex; flex-direction: column; gap: 8px; }
.cc-lr-thu { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px 10px 96px; align-items: center; gap: 6px; }
.cc-lr-thu select, .cc-lr-thu input { font: inherit; font-size: 13.5px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); min-width: 0; }
.cc-lr-thu:not([data-kieu="rieng"]) input { visibility: hidden; }
@media (max-width: 560px) { .cc-lr-thu { grid-template-columns: 1fr 1fr; } .cc-lr-thu b { grid-column: 1 / -1; } .cc-lr-thu > span { display: none; }
  .cc-lr-thu:not([data-kieu="rieng"]) input { display: none; } }
@keyframes ccNhay { 0%,100% { box-shadow: 0 0 0 0 rgba(224,45,45,.45); } 50% { box-shadow: 0 0 0 8px rgba(224,45,45,0); } }
.cc-nhay { animation: ccNhay 1.2s ease-in-out 4; }
.cc-nds { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dmk { display: grid; gap: 14px; }
.dmk-o { display: grid; gap: 6px; font-size: 13px; color: var(--muted, #667085); }
.dmk-o input { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; color: inherit; background: var(--card, #fff); }
.dmk-o input:focus { outline: none; border-color: var(--brand, #D94B45); }
/* Dòng báo lỗi trong hộp (đổi mật khẩu, cài đặt chấm công, lịch...) — chữ đỏ, không để chữ đen như chữ thường */
.lop-phu .loi { color: var(--red); font-size: 13px; line-height: 1.5; }
.luoi-cap .gia-tri { white-space: pre-line; }
/* Nhân sự tự điền hồ sơ (#tudienhoso) */
.td-form { display: grid; gap: 14px; }
.td-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .td-2 { grid-template-columns: 1fr; } }
.td-o { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.td-o input, .td-o textarea { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--card); width: 100%; box-sizing: border-box; }
.td-o input { height: 40px; padding: 0 12px; }
.td-o textarea { resize: vertical; min-height: 60px; }
.td-o input:focus, .td-o textarea:focus { outline: none; border-color: var(--brand); }
.td-anh { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px;
  border: 1.5px dashed var(--line); border-radius: 10px; cursor: pointer; color: var(--muted); background: var(--card); }
.td-anh:hover { border-color: var(--brand); color: var(--brand-ink); }
.td-anh input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.td-anh svg { width: 22px; height: 22px; flex: none; }
.td-anh b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-anh.co { border-style: solid; border-color: var(--green); color: var(--ink); }
.td-anh img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.td-link { display: grid; gap: 12px; }
.td-link-o { display: flex; gap: 8px; }
.td-link-o input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; color: var(--ink); background: var(--card); }
.hs-nut { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.hs-nut label.btn { cursor: pointer; }
.hs-nut .hs-xoa, .hs-qr-nut .hs-xoa { color: var(--red); }
/* Chỉnh sửa hình thu nhỏ (ảnh đại diện) */
.cat-anh { display: grid; gap: 16px; justify-items: center; padding: 8px 0; }
.cat-khung { position: relative; overflow: hidden; background: #1F2329; border-radius: 6px; touch-action: none; cursor: grab; }
.cat-khung.dang-keo { cursor: grabbing; }
.cat-khung img { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.cat-tron { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(255, 255, 255, .55); pointer-events: none; }
.cat-zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.cat-zoom input { flex: 1; accent-color: var(--brand); }
.cat-zoom button { border: 0; background: none; color: var(--ink); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.cat-zoom button svg { width: 18px; height: 18px; }
/* Avatar là ảnh (avt()): giữ đúng cỡ của .avatar / .avatar.sm / .avatar.to, cắt vừa khung tròn */
img.avatar-anh { object-fit: cover; padding: 0; background: var(--line); display: inline-block; flex: none; }
/* Điều chỉnh tháng (boss 29/09): tô màu nhóm cột — xanh công ty trả, đỏ trừ của nhân sự, hồng công ty nộp nhà nước (BH),
   vàng công ty đang giữ của nhân sự */
:root { --hong: #D6409F; --hong-soft: #FDEEF7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hong: #F28AC8; --hong-soft: #3A1B2E; } }
:root[data-theme="dark"] { --hong: #F28AC8; --hong-soft: #3A1B2E; }
.grid .hang-nhom th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 6px 10px; }
.grid th.dc-cong { background: var(--green-soft); color: var(--green); }
.grid th.dc-tru  { background: var(--red-soft);   color: var(--red); }
.grid th.dc-ct   { background: var(--hong-soft); color: var(--hong); }
.grid th.dc-giu  { background: var(--amber-soft); color: var(--amber); }
.grid td.dc-cong { background: color-mix(in srgb, var(--green-soft) 55%, transparent); }
.grid td.dc-tru  { background: color-mix(in srgb, var(--red-soft) 55%, transparent); }
.grid td.dc-ct   { background: color-mix(in srgb, var(--hong-soft) 55%, transparent); }
.grid td.dc-giu  { background: color-mix(in srgb, var(--amber-soft) 55%, transparent); }
.grid td.dc-cong .o-dc { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.grid td.dc-tru .o-dc  { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.grid td.dc-ct .o-dc   { border-color: color-mix(in srgb, var(--hong) 35%, var(--line)); }
/* Đơn từ: nút Tạo đơn to, nổi bật trên cùng (boss 29/09) */
.dt-tao-to { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; border-radius: 10px; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.dt-tao-to svg { width: 18px; height: 18px; }
/* Ô web tự tính (nền xám): nhãn nổi cùng nền với ô, không thành mảng trắng đè lên (boss 29/09) */
.cvp-o.tat > span { background: linear-gradient(var(--card) 50%, var(--card-2) 50%); }
.cvp-o.tat > input::placeholder { color: var(--muted); font-size: 13px; }
/* Mã QR ngân hàng trong hồ sơ */
.hs-qr { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.hs-qr img, .hs-qr-trong { width: 96px; height: 96px; object-fit: contain; border-radius: 8px; background: var(--card-2); flex: none; display: grid; place-items: center; color: var(--muted); }
.hs-qr > div { display: grid; gap: 6px; justify-items: start; }
.hs-qr label.btn { cursor: pointer; }
.hs-qr-nut { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-qr-hoi { flex-basis: 100%; font-size: 13px; color: var(--red); }
/* Chân khung thông báo: icon (i) nằm giữa theo dòng chữ (boss 29/09) */
.noti-foot .meta-nho { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.noti-foot .meta-nho svg { width: 14px; height: 14px; flex: none; }
/* Thanh toán phiếu chi (boss 29/09): mỗi người một thẻ, QR bên trái, danh sách phiếu + tổng bên phải */
.tt-khung { display: grid; gap: 14px; }
.tt-the { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
@media (max-width: 640px) { .tt-the { grid-template-columns: 1fr; } }
.tt-qr { display: grid; gap: 6px; justify-items: center; align-content: start; }
.tt-qr img { width: 180px; height: 180px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.tt-qr-trong { width: 180px; height: 180px; border-radius: 8px; border: 1.5px dashed var(--line); display: grid; place-items: center; align-content: center; gap: 6px;
  padding: 10px; text-align: center; font-size: 12px; color: var(--muted); background: var(--card-2); }
.tt-than { display: grid; gap: 10px; min-width: 0; align-content: start; }
.tt-dau { display: flex; align-items: center; gap: 8px; }
.tt-tong { font-size: 20px; font-weight: 700; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.tt-ds { display: grid; gap: 4px; }
.tt-dong { display: grid; grid-template-columns: auto 48px 90px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tt-dong:hover { background: var(--card-2); }
.tt-dong .so { font-variant-numeric: tabular-nums; }
.tt-ngay { color: var(--muted); }
.tt-nd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-nut { justify-self: start; cursor: pointer; }
.tt-nut.dang-tai { opacity: .6; pointer-events: none; }
.tt-cuoi { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--card-2); font-weight: 600; }
.tt-cuoi b { font-size: 18px; font-variant-numeric: tabular-nums; }
/* Ô thống kê có dòng phụ (vd số phiếu) */
.tile .txt small { display: block; margin-top: 2px; font-size: 12px; }
/* Trao đổi trong đơn / phiếu (tag tên) */
.dt-bl { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dt-bl textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--card); resize: vertical; }
.dt-bl textarea:focus { outline: none; border-color: var(--brand); }
.dt-bl #dt-bl-gui { justify-self: start; }
.dt-bl-1 { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.dt-bl-chu { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.dt-tag { color: var(--blue); font-weight: 600; }
/* Xem ảnh tại chỗ + nút con mắt trên ảnh nhỏ (boss 29/09) */
.pn-file a, .hd-anh a { position: relative; }
.hd-anh .pn-mat { right: 4px; bottom: 4px; width: 22px; height: 22px; }
.pn-mat { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 22, 26, .62); color: #fff; }
.pn-mat svg { width: 15px; height: 15px; }
.xem-anh { position: fixed; inset: 0; z-index: 3000; background: rgba(12, 14, 18, .86); display: grid; place-items: center; padding: 48px 16px 64px;
  overscroll-behavior: contain; }
.xem-anh img { max-width: min(96vw, 1100px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; background: #fff; }
.xem-anh-dong { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14);
  color: #fff; display: grid; place-items: center; cursor: pointer; }
.xem-anh-dong svg { width: 20px; height: 20px; }
.xem-anh-mo { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: .85; }
/* Nút dạng chữ (việc phụ, vd Huỷ đơn ở chân hộp) */
.btn-chu { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; border-radius: 6px; }
.btn-chu:hover { background: var(--card-2); }
.btn-chu.do { color: var(--red); }
.btn-chu:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tt-cho { font-style: normal; font-size: 11px; color: var(--amber); background: var(--amber-soft); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.tt-anh { width: 48px; height: 48px; }
.tt-anh a { display: block; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.tt-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Di chuột vào ảnh hoá đơn: phủ xám trong + con mắt để biết bấm vào là xem (boss 30/09) */
.tt-anh a { position: relative; cursor: zoom-in; }
.tt-xem { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 22, 26, .45); color: #fff;
  opacity: 0; transition: opacity .15s; pointer-events: none; }
.tt-xem svg { width: 20px; height: 20px; }
.tt-anh a:hover .tt-xem, .tt-anh a:focus-visible .tt-xem { opacity: 1; }
/* Điện thoại: nội dung xuống dòng cho đủ chữ, ngày nằm dưới nội dung */
@media (max-width: 640px) {
  .tt-dong { grid-template-columns: auto 48px 1fr auto; grid-template-areas: "c a nd so" "c a ngay so"; row-gap: 2px; }
  .tt-dong > input { grid-area: c; } .tt-anh { grid-area: a; } .tt-nd { grid-area: nd; white-space: normal; }
  .tt-ngay { grid-area: ngay; font-size: 12px; } .tt-dong .so { grid-area: so; }
}

/* Phiếu chi: ô tìm khoản chi + gợi ý ngay bên dưới (boss 30/09) */
.dt-khoan-o > svg { width: 17px; height: 17px; color: var(--muted); flex: none; margin-left: 12px; }
.dt-khoan-o > input { padding-left: 8px; }
.dt-khoan-o > span { left: 34px; }
.dt-khoan-gy { display: grid; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--shadow-2); padding: 4px; }
.dt-khoan-gy[hidden] { display: none; }
.dt-khoan-gy button { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border: 0; background: none; font: inherit;
  text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.dt-khoan-gy button b { font-weight: 500; font-size: 14px; min-width: 0; }
.dt-khoan-gy button i { font-style: normal; font-size: 12px; color: var(--muted); flex: none; }
.dt-khoan-gy button:hover, .dt-khoan-gy button.dang { background: var(--card-2); }
.dt-khoan-gy .cvp-trong { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); }
/* Phiếu chi: khối "Ai đã trả tiền" (boss 17/10) */
.dt-tt { display: grid; gap: 10px; }
.dt-tt > div[hidden] { display: none; }
.dt-tt-chon { display: grid; gap: 6px; }
.dt-tt-kieu { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--card); }
.dt-tt-kieu:has(input:checked) { border-color: var(--brand); background: var(--card-2); }
.dt-tt-kieu input { margin-top: 3px; flex: none; }
.dt-tt-kieu span { display: grid; gap: 2px; min-width: 0; }
.dt-tt-kieu b { font-weight: 600; font-size: 14px; }
.dt-tt-kieu i { font-style: normal; font-size: 12px; color: var(--muted); }
.dt-tt-cho { font-size: 15px; }

/* Chế độ xem gọn ở đầu hàng "Hiển thị … bản ghi" (boss 30/09) — thay cho hàng riêng */
.bv-chon { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.bv-chon:hover { border-color: var(--brand); }
.bv-chon b { font-weight: 600; color: var(--ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.bv-chon.dang { border-color: var(--brand); background: var(--brand-soft); }
.bv-chon.dang b { color: var(--brand-ink); }
.bv-chon svg { width: 14px; height: 14px; }
.bv-mui { font-size: 10px; color: var(--muted); }

/* =====================================================================
   ĐÀO TẠO (boss 30/09) — như 1O
   ===================================================================== */
.dao-ng { display: inline-flex; }
.dao-ngs { display: inline-flex; gap: 2px; }
.dao-form .dao-tab { padding: 14px 0 4px; }
.dao-cot { display: grid; gap: 12px; max-width: 560px; }
.dao-ma { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.dao-tat { opacity: .45; pointer-events: none; }
.dao-tep { display: grid; gap: 6px; justify-items: start; }
.dao-tep label.btn { cursor: pointer; }
.dao-tep-1 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0 6px 6px 0;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.dao-tep-1 svg { width: 13px; height: 13px; }
.dao-tep-1 button { border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; color: var(--muted); }
.dao-loc { display: grid; gap: 10px; max-width: 720px; margin-bottom: 14px; justify-items: start; }
.dao-loc-dau { color: var(--brand-ink); font-weight: 600; font-size: 13px; }
.dao-loc .cvp-hai { width: 100%; }
.dao-vt-ds { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 4px; }
.dao-vt-1 { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.dao-form .cvng-o { max-width: 720px; }
.dao-bang { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.dao-bang th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dao-bang td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dao-bang .num { text-align: right; }
.dao-bang tr.bam-duoc { cursor: pointer; }
.dao-bang tr.bam-duoc:hover td { background: var(--card-2); }
.dao-trong { padding: 12px 4px; }
.dao-lich-dau, .dao-lich-dong { display: grid; align-items: center; gap: 8px;
  grid-template-columns: 70px minmax(160px, 2fr) 110px minmax(160px, 1.4fr) 140px 96px 96px minmax(120px, 1fr) 30px; }
.dao-lich-dau { font-size: 12px; color: var(--muted); padding: 0 0 6px; }
.dao-lich-dong { margin-bottom: 8px; }
.dao-lich-dong > input, .dao-lich-dong > select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13px; background: var(--card); min-width: 0; }
.dao-lich-dong .cvp-o { margin: 0; min-width: 0; }
.dao-buoi { height: 40px; display: grid; place-items: center; background: var(--card-2); border-radius: var(--r-md); font-size: 12.5px; color: var(--muted); }
.dao-them-dong { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--brand); color: var(--brand);
  background: var(--card); cursor: pointer; display: grid; place-items: center; }
.dao-them-dong svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .dao-ma { grid-template-columns: 1fr; }
  .dao-bang { display: block; overflow-x: auto; }
}
.dao-phieu-khoi { background: var(--card-2); border-radius: var(--r-md); margin-bottom: 12px; }
.dao-phieu-dau { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.dao-phieu-dau label { display: inline-flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.dao-phieu-dau .icon-btn svg { transition: transform .15s; }
.dao-phieu-dau .icon-btn.mo svg { transform: rotate(90deg); }
.dao-phieu-than { padding: 0 14px 12px 40px; display: grid; gap: 10px; }
.dao-tc-nhom { display: grid; gap: 4px; }
.dao-tc-ten { font-weight: 600; font-size: 13px; }
.dao-tc-1 { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; padding-left: 4px; }
.dao-xem { display: grid; gap: 10px; }
.dao-xem-dau { display: flex; align-items: center; gap: 10px; }
.dao-nd { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); padding: 10px 12px; background: var(--card-2); border-radius: var(--r-md); }
.dao-tep-xem { display: flex; flex-wrap: wrap; gap: 6px; }
.dao-h { font-size: 14px; margin: 8px 0 2px; }
.dao-hv-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.dao-dg { display: grid; gap: 8px; }
.dao-dg-1 { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.dao-dg-ten { font-size: 13.5px; }
.dao-dg-so { display: flex; gap: 6px; }
.dao-dg-so button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font: inherit; font-weight: 600; color: var(--ink-2); }
.dao-dg-so button:hover { border-color: var(--brand); }
.dao-dg-so button.chon { background: var(--brand); border-color: var(--brand); color: #fff; }
.dao-dg-mota { grid-column: 1 / -1; min-height: 0; }
.dao-dg-mota:empty { display: none; }
@media (max-width: 560px) { .dao-dg-1 { grid-template-columns: 1fr; } }
.dao-tcf { display: grid; gap: 12px; }
.dao-gat { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.dao-gy { padding: 8px 10px; background: var(--card-2); border-radius: var(--r-md); margin-bottom: 6px; }
.dao-gy p { margin: 4px 0 0; font-size: 13px; }
.dao-bc-ds td .btn { margin-left: 10px; }
/* Boss 30/09 (xem trên Chrome thật): form Đào tạo trải hết màn như 1O — không bó 980px, nút CẬP NHẬT sát đáy */
.cvp.dao-form { max-width: none; min-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.dao-form .cvp-chan { margin-top: auto; }
/* Lịch học: xếp theo bề rộng THẬT của khung (container query), không bắt cuộn ngang.
   Khung đủ rộng: một hàng như 1O. Khung hẹp: mỗi buổi 3 hàng gọn trong một thẻ. */
#dao-lich { container-type: inline-size; }
.dao-lich-dong .cvng-o { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
.dao-lich-dong .cvp-chips { flex-wrap: nowrap; overflow: hidden; }
.dao-lich-dong .cvp-chips input { min-width: 30px; }
@container (max-width: 1080px) {
  .dao-lich-dau { display: none; }
  .dao-lich-dong { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
  .dao-lich-dong > input:first-of-type { grid-column: span 3; }        /* nội dung đào tạo */
  .dao-lich-dong > .cvng-o, .dao-lich-dong > input[id^="dao-l-gvn"] { grid-column: span 2; }   /* giảng viên */
  .dao-lich-dong > input[id^="dao-l-phong"] { grid-column: span 1; }
}
@container (max-width: 560px) {
  .dao-lich-dong { grid-template-columns: 1fr 1fr; }
  .dao-lich-dong > .dao-buoi, .dao-lich-dong > input:first-of-type,
  .dao-lich-dong > .cvng-o, .dao-lich-dong > input[id^="dao-l-gvn"] { grid-column: 1 / -1; }
}
.dao-lich-dong .cvp-chip { white-space: nowrap; }

/* Đơn từ gọn như 1O (boss 30/09): nút ☰ đầu hàng tab để chọn màn Danh sách / Tổng hợp / Tổng quan / Kanban */
.dt-tabs-gon { align-items: center; }
.dt-ham { width: 34px; height: 34px; flex: none; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; margin-right: 4px; }
.dt-ham:hover { background: var(--card-2); }
.dt-ham svg { width: 20px; height: 20px; }

/* =====================================================================
   KPI & OKR (boss 30/09) — như 1O. Form trải hết chiều ngang (boss khoanh khoảng trống ở form Đào tạo)
   ===================================================================== */
.kpi-form { max-width: none; display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
.kpi-form > section { padding: 4px 0; }
.kpi-form .cvp-chan { margin-top: auto; }
.kpi-cot { display: grid; gap: 12px; max-width: 720px; }
.kpi-cot .cvng-o, .kpi-form .cvng-o { max-width: 720px; }
.kpi-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi-ba > div[hidden] { display: none; }
.kpi-h { display: flex; align-items: center; gap: 6px; color: var(--brand-ink); font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.kpi-h svg { width: 15px; height: 15px; }
.kpi-h.do { margin-top: 0; }
.kpi-tong { color: var(--red); font-style: italic; font-size: 13px; margin-bottom: 8px; }
.kpi-tong.du { color: var(--green); }
.kpi-dong-khung { overflow-x: auto; }
.kpi-dong-bang { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.kpi-dong-bang th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px; white-space: nowrap; }
.kpi-dong-bang td { padding: 4px 6px; vertical-align: middle; }
.kpi-dong-bang td:first-child { min-width: 220px; }
.kpi-dong-bang input, .kpi-dong-bang select { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 10px;
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink); min-width: 0; }
.kpi-dong-bang .cvp-o { min-height: 38px; }
.kpi-tat { background: var(--card-2) !important; color: var(--muted) !important; }
.kpi-hep { max-width: 110px; }
.kpi-dong-bang [data-k="chiTieu"] { max-width: 130px; min-width: 110px; }
.kpi-pt { display: flex; align-items: center; gap: 4px; max-width: 90px; }
.kpi-pt span { color: var(--muted); }
.kpi-ct { display: flex; align-items: center; gap: 4px; min-width: 200px; }
.kpi-cham { min-width: 180px; }
.kpi-hop { display: grid; gap: 12px; }
.kpi-ma { grid-template-columns: 150px 1fr; }
.kpi-hd h4 { margin: 12px 0 4px; font-size: 13px; }
.kpi-hd ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.kpi-hd code { background: var(--card-2); padding: 1px 5px; border-radius: 4px; }
.kpi-thanh { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.kpi-thanh i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.kpi-bdg { padding: 16px; }
.kpi-bdg-dau { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.kpi-bdg-dau h3 { margin: 0 0 4px; font-size: 16px; }
.kpi-bdg-bang th { white-space: normal; min-width: 130px; vertical-align: bottom; }
.kpi-bdg-bang th:first-child { min-width: 150px; }
.kpi-o { white-space: nowrap; }
.kpi-nhap { width: 92px; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.kpi-nhap.nho { width: 56px; margin-right: 4px; }
.kpi-nhap:disabled { background: var(--card-2); color: var(--ink-2); }
.kpi-diem1 { display: inline-block; min-width: 32px; margin-left: 6px; font-size: 12px; color: var(--brand-ink); font-weight: 600; }
.kpi-chuyen { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.kpi-chuyen button { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.kpi-chuyen button.chon { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.okr-tong { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.okr-tong .kpi-thanh { width: 160px; height: 8px; }
.okr-them { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.okr-them[hidden] { display: none; }
.okr-kr td { vertical-align: top; }
@media (max-width: 640px) {
  .kpi-ba { grid-template-columns: 1fr; }
  .kpi-ma, .dao-ma { grid-template-columns: 1fr; }
}
/* Mũi tên ▾ cạnh tiêu đề: đổi phần ngay ở thanh trên cùng (boss 30/09), mở cùng menu với nút ☰ */
.gon-mui { width: 28px; height: 28px; flex: none; margin-left: -4px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; }
.gon-mui:hover { background: var(--card-2); color: var(--brand-ink); }
.gon-mui svg { width: 18px; height: 18px; }
/* Tiêu đề nhóm trong menu nhỏ (menu ☰ chia nhóm: Dashboard / KPI / OKR) */
.cv-menu-tieu { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   ĐÁNH GIÁ NĂNG LỰC (boss 30/09) — như 1O, dùng lại khung KPI / Đào tạo
   ===================================================================== */
.dg-nhom { margin-bottom: 12px; }
.dg-nhom > b { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink); }
.dg-tc-ds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dg-ts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dg-ts-1 { max-width: none; }
.dg-ts-1 > span:first-child { font-size: 13px; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.dg-ts-1 input { width: 60px; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; }
.dg-nut { white-space: nowrap; text-align: right; }
.dg-cham { display: grid; gap: 8px; }
.dg-cau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.dg-cau-ten { font-size: 14px; }
.dg-mota { grid-column: 1 / -1; min-height: 0; }
.dg-mota:empty { display: none; }
.dg-diem { display: flex; gap: 6px; }
.dg-diem label { cursor: pointer; }
.dg-diem input { position: absolute; opacity: 0; pointer-events: none; }
.dg-diem span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.dg-diem label:hover span { border-color: var(--brand); color: var(--brand-ink); }
.dg-diem input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.dg-diem input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) { .dg-cau { grid-template-columns: 1fr; } }
.dg-stt { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--card-2); color: var(--muted); }
.dg-hd-bang { min-width: 0; max-width: 720px; }
.dg-hd-bang td:nth-child(2) { min-width: 260px; }
.dg-vai-o { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 240px; }
.dg-ns-bang { min-width: 1000px; }
.dg-ns-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.dg-ns-nhanh select { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--card); }
.kpi-ql { align-items: start; }
.dg-diem span.le { width: 30px; height: 30px; font-size: 11px; }
.dg-diem { flex-wrap: wrap; }
.kpi-cot > * { min-width: 0; }
.dg-hd-bang { min-width: 420px; }
.dg-hd-bang td:nth-child(2) { min-width: 200px; }
.tb-khong-quyen { margin: 4px 0 8px; font-size: 15px; }
/* Bảng lương (boss 30/09): các ô dữ liệu vào ở cột đầu sơ đồ */
.tl-vao-cot { gap: 10px; width: 200px; }
.tl-vao { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); text-align: left; }
.tl-vao:hover { border-color: var(--brand); color: var(--brand-ink); }
.tl-vao svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.tl-data { align-items: center; text-align: center; gap: 6px; background: var(--brand-soft); padding: 20px 16px; }
.tl-data-ic svg { width: 36px; height: 36px; color: var(--brand); }
.tl-data b { font-size: 16px; }

/* =====================================================================
   TÀI CHÍNH (boss 30/09) — như 1O, chỉ boss
   ===================================================================== */
.tc-ct-bang { min-width: 820px; }
.tc-ct-bang td:first-child { min-width: 240px; }
.tc-ct-dau { display: flex; align-items: center; gap: 12px; max-width: 900px; }
.tc-ct-dau .cvp-o { min-width: 140px; }
.tc-tong-cong { margin: 8px 0 4px; font-size: 14px; }
.tc-tong-cong b { font-size: 16px; color: var(--brand-ink); }
.tc-hd-dong { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; max-width: 720px; }
.tc-hd-dong > .cvp-o, .tc-hd-dong > label { flex: 1; }
.tc-hd-dong select, .tc-hd-dong input.kpi-hep { height: 38px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 10px; font: inherit; background: var(--card); }
.tc-luong { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.tc-hd-dong .cvp-o > select, .tc-hd-dong .cvp-o > input { height: auto; border: 0; padding: 11px 0; background: none; }
.tc-hd-dong > .tc-sl { flex: 0 0 110px; }
/* Ô tiền nhãn nổi (oTienNhan) */
.cvp-tien > input { text-align: right; }
.cvp-tien > em { font-style: normal; color: var(--muted); padding: 0 0 0 4px; flex: none; }
.tc-luong-1 { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.tc-chon-thang { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.tc-nho { min-width: 0; max-width: 560px; }
.tc-goi-goi { margin: 0 0 8px; }
.num.do, b.do { color: var(--red); }

/* Tổng đài (boss 30/09): chọn nhà cung cấp như 1O, nội dung cuộc gọi cắt 2 dòng */
.td-ncc { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.td-ncc-1 { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.td-ncc-1:has(input:checked) { border-color: var(--brand); }
.td-ncc-1 > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.td-ncc-1 i { font-style: normal; font-size: 12px; color: var(--muted); }
.td-ncc-logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--card-2); color: var(--brand); font-weight: 700; font-size: 18px; flex: none; }
.td-nd { max-width: 280px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Bán hàng (boss 30/09): khối tổng tiền như 1O — nhãn bên trái, ô số bên phải */
.bh-ct-bang td:first-child { min-width: 240px; }
.bh-ct-bang .bh-ten-sp { margin-top: 4px; }
.bh-tong { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 8px 12px; align-items: center; justify-items: end; margin: 12px 0 4px; max-width: 760px; margin-left: auto; }
.bh-tong > span { color: var(--ink-2); font-size: 13px; text-align: right; }
.bh-tong > b, .bh-tong > div { width: 100%; }
.bh-tong > b { text-align: right; font-size: 15px; }
.bh-tong b.lon { font-size: 17px; color: var(--brand); }
.bh-tong b.xanh { color: var(--green, #16a34a); }
.bh-tong b.do { color: var(--red); }
.bh-tong-hai { display: flex; gap: 8px; align-items: center; }
.bh-tong-hai > * { flex: 1; min-width: 0; }
.bh-tong-hai > .icon-btn { flex: none; }
.bh-tong .bh-pt { flex: 0 0 90px; }
.bh-tong.xem { max-width: 420px; }
.bh-bc tr.bh-bc-tong td { background: var(--card-2); font-weight: 700; }
.bh-bc tr.bh-bc-nhom2 td { background: #F7F8FA; font-weight: 600; }
.bh-bc-nhom td { color: var(--brand); font-weight: 600; background: var(--card-2); }
td.giua { text-align: center; }
/* Khung chi tiết dùng chung (khungCT) như màn chi tiết 1O: trái nhiều khối, phải lịch sử + thảo luận */
.ctk-ve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ctk-ve > b { font-size: 16px; }
.ctk-tabs { flex-wrap: wrap; }
.ctk-nut { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ctk { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.ctk-trai, .ctk-phai { display: grid; gap: 16px; min-width: 0; }
.ctk-khoi { padding: 0; overflow: hidden; }
.ctk-dau { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ctk-dau h3 { margin: 0; font-size: 16px; flex: 1; }
.ctk-than { padding: 14px 16px; }
.ctk-khoi.gon .ctk-than { display: none; }
.ctk-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ctk-luoi > div > span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.ctk-luoi > div > div { word-break: break-word; }
.ctk-sdt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: #FDECEC; color: var(--brand); font-weight: 600; text-decoration: none; }
.ctk-sdt svg { width: 14px; height: 14px; }
.ctk-ls, .ctk-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ctk-ls li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 10px; background: var(--card-2); border-radius: 8px; font-size: 13px; }
.ctk-cham { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; }
.ctk-cham svg { width: 13px; height: 13px; }
.ctk-tl li { display: flex; gap: 10px; font-size: 13px; }
.ctk-tl p { margin: 4px 0 0; white-space: pre-wrap; }
.ctk-viet { display: flex; gap: 6px; align-items: center; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 4px 4px 12px; }
.ctk-viet input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: none; }
@media (max-width: 900px) { .ctk { grid-template-columns: 1fr; } .ctk-luoi { grid-template-columns: 1fr; } .bh-tong { grid-template-columns: 1fr; justify-items: stretch; } .bh-tong > span { text-align: left; } }
.ctk-than table.grid { min-width: 520px; }

/* Liên hệ inbox đọc từ Lark (boss 30/09) */
.lh-mot-dong { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-hai-dong { max-width: 280px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.lh-pre { white-space: pre-wrap; font-size: 13px; }
.lh-them { text-align: center; padding: 12px 0; }
.lh-sua-chan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bh-lh-tim { display: flex; gap: 8px; align-items: center; }
.bh-lh-tim .cvp-o { flex: 1; }
.bh-lh-ds { display: grid; gap: 4px; margin-top: 6px; max-height: 260px; overflow: auto; }
.bh-lh-ds button { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; font: inherit; }
.bh-lh-ds button:hover { border-color: var(--brand); }
.lh-pl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

/* Hàng tab Liên hệ = chế độ xem như Lark */
.lh-view-lark { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.lh-view-lark .tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.lh-view-lark .tab svg { width: 15px; height: 15px; }
.lh-view-them { color: var(--muted); padding-left: 10px; padding-right: 10px; }
.lh-3cham { margin-left: 4px; padding: 0 6px; border-radius: 6px; font-weight: 700; color: var(--brand); cursor: pointer; }
.lh-3cham:hover { background: #FDECEC; }

/* Cột kiểu Lark (boss 30/09): mép kéo độ rộng, kéo thả đổi chỗ, đóng băng tới cột */
table.grid thead th[data-th-cot] { position: relative; }
.th-keo { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 5; }
.th-keo::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 1px; background: var(--line); }
th[data-th-cot]:hover .th-keo::after, .dang-keo-cot .th-keo::after { background: var(--brand); width: 2px; }
.dang-keo-cot, .dang-keo-cot * { cursor: col-resize !important; user-select: none; }
table.grid.co-rong { table-layout: fixed; }
table.grid.co-rong td, table.grid.co-rong th { overflow: hidden; text-overflow: ellipsis; }
/* Ô tích đầu dòng: bảng đã kéo độ rộng thì ô này hẹp, hộp tích tràn ra thành dấu "…" (boss 30/09) — bớt lề, không cắt */
table.grid.co-rong td.o-chon-td, table.grid.co-rong th.o-chon-td { padding-left: 12px; padding-right: 4px; text-overflow: clip; }
th[draggable="true"] { cursor: grab; }
th.th-tha-trai { box-shadow: inset 3px 0 0 var(--brand); }
th.th-tha-phai { box-shadow: inset -3px 0 0 var(--brand); }
table.grid td.o-dong { background: var(--card); }
table.grid thead th.o-dong, table.grid thead th.o-chon-td { background: var(--card-2); }
table.grid tbody tr:hover td.o-dong { background: var(--card-2); }

/* Khung bảng cuộn (boss 30/09, học 1O): thanh cuộn ngang luôn ở đáy màn, tiêu đề đứng yên */
.table-wrap.bang-cuon { max-height: calc(100vh - 230px); overflow: auto; }
.table-wrap.bang-cuon table.grid thead th { position: sticky; top: 0; z-index: 3; background: var(--card-2); }
.table-wrap.bang-cuon table.grid thead th.o-dong, .table-wrap.bang-cuon table.grid thead th.o-chon-td { z-index: 5; }
.lh-trang-gon { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
table.grid.cao-thap td { white-space: nowrap; }
.lh-cs { max-width: 260px; display: inline-block; vertical-align: middle; }
.btn.cong-cu.chi-ic { padding-left: 9px; padding-right: 9px; }
.lh-nut { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.lh-nut::-webkit-scrollbar { display: none; }
.lh-nut > * { flex: none; }
.lh-cach { height: 1px; background: var(--line); margin: 16px 0; }

/* Khung chi tiết khách trượt ra trên trang Liên hệ (boss 30/09) — trái sửa tại chỗ tự lưu, phải Thảo luận / Lịch sử hoạt động như 1O */
.lh-ngan-nen { position: fixed; inset: 0; background: rgba(16,24,40,.28); z-index: 96; }
.lh-ngan { position: fixed; top: 0; right: 0; bottom: 0; width: min(1180px, calc(100vw - 56px)); background: var(--bg); z-index: 97;
  box-shadow: -10px 0 30px rgba(16,24,40,.14); display: flex; flex-direction: column; animation: lhn-vao .18s ease-out; }
@keyframes lhn-vao { from { transform: translateX(48px); opacity: .4; } to { transform: none; opacity: 1; } }
.lhn-dau { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.lhn-ten { flex: 1; min-width: 0; font-size: 17px; }
.lhn-ten b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lhn-nut a.cv-cc-chu { text-decoration: none; }
/* Nút "Chuyển khách hàng" màu cam 1O cho nổi (boss 30/09) */
.lhn-nut-kh { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; margin-right: 4px; }
.lhn-nut-kh:hover { background: var(--orange-soft); }
.lhn-nut-kh svg { width: 15px; height: 15px; }
.lhn-nut { display: flex; gap: 4px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.lhn-luu { font-size: 12.5px; padding: 0 16px; height: 0; overflow: hidden; transition: height .15s; background: var(--card); }
.lhn-luu.xong, .lhn-luu.loi { height: 26px; line-height: 26px; }
.lhn-luu.xong { color: #16a34a; } .lhn-luu.loi { color: var(--red); }
.lhn-than { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; padding: 14px; }
.lhn-trai { overflow: auto; display: grid; gap: 14px; align-content: start; }
.lhn-khoi { background: var(--card); border-radius: var(--r-md, 10px); border: 1px solid var(--line); padding: 14px 16px; }
.lhn-khoi h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; justify-content: space-between; }
.lhn-khoi summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.lhn-khoi details[open] summary { margin-bottom: 10px; }
.lhn-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding-top: 6px; }
.lhn-xem { background: var(--card-2); border-color: transparent; }
/* Ô chỉ xem: nhãn nằm gọn trong ô (không vắt qua mép như ô có viền, boss 30/09 thấy bị đè chữ) */
.cvp-o.co-gt.lhn-xem > span { top: 6px; left: 8px; transform: none; background: none; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.lhn-xem-chu { padding: 20px 0 6px; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ô thả xuống tô màu theo giá trị, cùng màu nhãn ở danh sách */
.lhn-mau > select { font-weight: 600; }
.lhn-mau::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; margin-right: 8px; }
.lhn-mau.red    { background: var(--red-soft);    border-color: transparent; color: var(--red); }
.lhn-mau.green  { background: var(--green-soft);  border-color: transparent; color: var(--green); }
.lhn-mau.amber  { background: var(--amber-soft);  border-color: transparent; color: var(--amber); }
.lhn-mau.blue   { background: var(--blue-soft);   border-color: transparent; color: var(--blue); }
.lhn-mau.purple { background: var(--purple-soft); border-color: transparent; color: var(--purple); }
.lhn-mau.grey   { color: var(--muted); }
/* Chấm màu chỉ ở Tình trạng và Mức độ nóng khi có giá trị (boss 30/09) */
.lhn-mau.grey::before, .lhn-mau.khong-cham::before { display: none; }
.lhn-mau.grey > select { font-weight: 400; }
.lhn-mau > select { color: inherit; }
.lhn-mau:focus-within { border-color: currentColor; }
/* Ô có màu: nhãn nằm gọn trong ô như ô chỉ xem (boss 30/09: nhãn vắt qua mép nhìn như bị lag đè lên) */
.cvp-o.co-gt.lhn-mau:not(.grey) > span { top: 6px; left: 8px; transform: none; background: none; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.cvp-o.chon.co-gt.lhn-mau:not(.grey) > select { padding-top: 21px; padding-bottom: 6px; }
.lhn-mau:not(.grey)::before { align-self: flex-end; margin-bottom: 12px; }
.lhn-pl { grid-column: 1 / -1; }
.lhn-pl > div { display: flex; flex-wrap: wrap; gap: 8px; }
.lhn-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px dashed var(--line-2);
  background: var(--card); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.lhn-chip:hover { border-style: solid; color: var(--ink); }
.lhn-chip svg { width: 14px; height: 14px; }
.lhn-chip.on { border: 1px solid transparent; font-weight: 600; }
.lhn-chip.on.red    { background: var(--red-soft);    color: var(--red); }
.lhn-chip.on.green  { background: var(--green-soft);  color: var(--green); }
.lhn-chip.on.amber  { background: var(--amber-soft);  color: var(--amber); }
.lhn-chip.on.blue   { background: var(--blue-soft);   color: var(--blue); }
.lhn-chip.on.purple { background: var(--purple-soft); color: var(--purple); }
.lhn-chip.on.grey   { background: var(--line-2);      color: var(--ink); }
/* Chăm sóc: ô ghi nhanh hôm nay + toàn bộ ghi chép */
.lhn-cs-them { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.lhn-cs-ngay { flex: none; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--red-soft); color: var(--brand); font-weight: 700; font-size: 13.5px; }
.lhn-cs-them { align-items: flex-start; }
.lhn-cs-them textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 12px; font: inherit; font-size: 14px; background: var(--card); color: var(--ink); resize: none; field-sizing: content; }
.lhn-cs-them textarea:focus { outline: 0; border-color: var(--brand); }
.lhn-cs-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.lhn-cs-ds li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.lhn-cs-ngay.nho { height: 26px; padding: 0 8px; font-size: 12.5px; background: var(--card-2); color: var(--ink); font-weight: 600; }
.lhn-cs-ds li:first-child .lhn-cs-ngay.nho { background: var(--red-soft); color: var(--brand); }
.lhn-cs-ds li > div { padding-top: 3px; }
.lhn-cs-sua { margin-top: 12px; }
.lhn-cs-sua summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.lhn-cs-sua textarea { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  font: inherit; font-size: 14px; background: var(--card); color: var(--ink); resize: vertical; }
.lhn-cs-sua textarea:focus { outline: 0; border-color: var(--brand); }
.lhn-ai { display: grid; gap: 4px; font-size: 13px; } .lhn-ai b { margin-top: 6px; color: var(--muted); font-weight: 600; }
.lhn-phai { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 10px); display: flex; flex-direction: column; min-height: 0; }
.lhn-phai-tab { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.lhn-phai-tab button { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); padding: 13px 0 11px; border-bottom: 2px solid transparent; cursor: pointer; }
.lhn-phai-tab button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.lhn-phai-than { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.lhn-phai-than > .trong { padding: 24px 16px; }
.lhn-tl-ds { flex: 1; overflow: auto; padding: 12px 16px; display: grid; gap: 12px; align-content: start; }
.lhn-tl { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.lhn-tl-bong { background: var(--card-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere; }
.lhn-tl-bong b { color: var(--brand); font-weight: 600; display: block; margin-bottom: 2px; }
.lhn-tl-chan { font-size: 12px; color: var(--muted); padding: 3px 4px 0; }
.lhn-tl-chan .btn-chu { font-size: 12px; padding: 0; }
.lhn-viet { display: flex; gap: 6px; align-items: flex-end; margin: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; }
.lhn-viet textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; background: none; color: var(--ink); padding: 6px 0; max-height: 140px; field-sizing: content; }
.lhn-ls { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 14px; }
.lhn-ls li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13.5px; overflow-wrap: anywhere; }
.lhn-cham { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); color: var(--muted); }
.lhn-cham svg { width: 15px; height: 15px; }
.lhn-ls li.cs .lhn-cham { background: #FDECEC; color: var(--brand); }
.lhn-ls li.ai .lhn-cham { background: #EEF2FF; color: #4F46E5; }
.lh-pancake { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #2563EB; text-decoration: none; white-space: nowrap; }
.lh-pancake svg { width: 14px; height: 14px; }
.lh-pancake:hover { text-decoration: underline; }
.lh-pancake.lhn-link { font-size: 14px; font-weight: 500; padding: 0 8px; }
.lh-pancake.lhn-link svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .lh-ngan { width: auto; left: 0; }
  .lhn-than { grid-template-columns: 1fr; overflow: auto; padding: 10px; }
  .lhn-trai { overflow: visible; }
  .lhn-phai { min-height: 420px; }
  .lhn-luoi { grid-template-columns: 1fr; }
  .lhn-dau { flex-wrap: wrap; position: relative; padding-right: 52px; }
  .lhn-nut { width: 100%; justify-content: flex-start; }
  .lhn-nut > .icon-btn:last-child { position: absolute; top: 10px; right: 8px; }
  .lhn-nut .cv-cc-chu { font-size: 12.5px; }
}

/* Nút gọi ở đầu khung chi tiết: nhãn số điện thoại như ngoài bảng (boss 30/09) */
.lhn-goi { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--green-soft); color: var(--green);
  font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.lhn-goi svg { width: 15px; height: 15px; }
.lhn-goi:hover { background: var(--green); color: #fff; }
.lhn-nhanh .lhn-cs-ds { margin-bottom: 4px; }
.lhn-nhanh .lhn-cs-them { margin-bottom: 2px; }
.lhq-hai { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 600px) { .lhq-hai { grid-template-columns: 1fr; } }
/* Hành động tiếp trong phần Chăm sóc (boss 30/09) */
.lhn-hd { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-2); }
.lhn-hd-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.lhn-hd-them { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.lhn-hd-them[hidden] { display: none; }
.lhn-hd-ds li { opacity: .72; }
.lhn-hd-ds li.dang { opacity: 1; font-weight: 500; }
.lhn-hd-tt { font-size: 12px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.lhn-hd-tt.dang { background: var(--blue-soft); color: var(--blue); }
.lhn-hd-tt.xong { background: var(--green-soft); color: var(--green); }
.lhn-hd-tt.chua { background: var(--line-2); color: var(--muted); }
@media (max-width: 600px) { .lhn-hd-them { grid-template-columns: 1fr; } }
/* ---------- Hộp Lên lịch chụp (boss 30/09) ---------- */
.lc-form { gap: 14px; }
.lc-goi { display: grid; gap: 8px; }
.lc-goi .cvp-nhan { margin: 0; }
.lc-nhom { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-nhom-1 { border: 1px solid color-mix(in srgb, var(--m) 35%, transparent); background: color-mix(in srgb, var(--m) 8%, var(--card)); color: var(--m);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lc-nhom-1.on { background: var(--m); color: #fff; border-color: var(--m); }
.lc-goi-ds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lc-goi-chon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lc-goi-chon:empty { display: none; }
.lc-goi-chon .lc-the { white-space: normal; padding-left: 10px; max-width: 100%; }
.lc-goi-1 { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--m) 30%, var(--line)); background: color-mix(in srgb, var(--m) 5%, var(--card)); color: var(--ink); }
.lc-goi-1 b { font-size: 13.5px; color: var(--m); }
.lc-goi-1 span { font-weight: 700; font-size: 14px; }
.lc-goi-1 i { font-style: normal; font-size: 12px; color: var(--muted); }
.lc-goi-1:hover { border-color: var(--m); }
.lc-goi-1.on { background: var(--m); border-color: var(--m); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--m) 30%, transparent); }
.lc-goi-1.on b, .lc-goi-1.on i { color: #fff; }
.lc-lh { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.lc-lh summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.lc-lh[open] summary { margin-bottom: 8px; }
.lc-lh .lhn-cs-ds { max-height: 220px; }
.lc-coc { display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lc-tong { display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 13.5px; color: var(--muted); }
.lc-tong b { color: var(--ink); font-size: 15px; }
.lc-tha { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
  color: var(--muted); font-size: 13.5px; cursor: pointer; text-align: center; padding: 10px; }
.lc-tha svg { width: 20px; height: 20px; }
.lc-tha:hover, .lc-tha.keo { border-color: var(--brand); color: var(--brand); background: var(--red-soft); }
.lc-anh { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-anh:empty { display: none; }
.lc-anh-1 { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--card-2); display: grid; place-items: center; font-size: 11px; }
.lc-anh-1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-anh-1 button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lc-anh-1 button svg { width: 12px; height: 12px; }
.lc-gio-pop { position: fixed; z-index: 140; max-height: 280px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16,24,40,.14); padding: 6px; display: grid; gap: 2px; }
.lc-gio-1 { display: flex; align-items: baseline; gap: 10px; border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; color: var(--ink); }
.lc-gio-1:hover { background: var(--card-2); }
.lc-gio-1.on { background: var(--blue); color: #fff; }
.lc-gio-1 span { font-size: 12px; color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-gio-1.on span { color: #fff; }
.lc-ng .anh-ns, .lc-ng > img, .lc-ng > .avt { flex: none; margin-right: 8px; }
.lc-ng > svg:last-child { width: 16px; height: 16px; color: var(--muted); flex: none; }
@media (max-width: 700px) { .lc-goi-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lc-tong { justify-content: flex-start; } }
.lc-form.kpi-cot { max-width: none; }
/* Ô Sale nhiều người: thẻ tên có × + ô gõ thêm */
.lc-nhieu { flex-wrap: wrap; gap: 6px; padding: 6px 10px; min-height: 42px; align-items: center; }
.lc-nhieu > input { flex: 1; min-width: 70px; padding: 6px 0; }
.lc-the { display: inline-flex; align-items: center; gap: 6px; background: var(--card-2); border-radius: 999px; padding: 2px 4px 2px 2px; font-size: 13px; white-space: nowrap; }
.lc-the button { border: 0; background: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); padding: 0; }
.lc-the button:hover { background: var(--line-2); color: var(--ink); }
.lc-the button svg { width: 11px; height: 11px; }
/* 4 ô số đầu trang Liên hệ inbox / phone (boss 30/09) — bấm để lọc */
.lh-the { margin-bottom: 14px; }
.lh-the .tile { font: inherit; text-align: left; cursor: pointer; border: 1px solid transparent; }
.lh-the .tile:hover { border-color: var(--line-2); }
.lh-the .tile.dang-loc { border-color: currentColor; box-shadow: 0 0 0 2px var(--blue-soft); }
.lh-nhac-phone { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lh-nhac-phone span { flex: 1; }
.lh-nhac-phone .btn { flex: none; }

/* ---------- Cửa sổ Import chung kiểu 1O (boss 01/10) ---------- */
.n1 { display: flex; flex-direction: column; gap: 12px; }
.n1-chu { margin: 0; font-size: 14px; color: var(--ink); }
.n1-file { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--muted); cursor: pointer; font-size: 14px; }
.n1-file:hover { border-color: var(--brand); }
.n1-file > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.n1-file.co > span { color: var(--ink); }
.n1-file > span i { color: var(--muted); font-style: normal; font-size: 12.5px; }
.n1-file > svg { width: 20px; height: 20px; flex: none; }
.n1-muc { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border: 0; background: none; padding: 4px 0; margin-top: 6px;
  color: var(--brand); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.n1-muc svg { width: 16px; height: 16px; }
.n1-khoi { display: flex; flex-direction: column; gap: 10px; }
.n1-khoi[hidden] { display: none; }
.n1-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.n1-hang input { text-align: right; }
.n1-dong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px) 32px; gap: 10px; align-items: center; }
.n1-dong .cvp-o { min-width: 0; }
.n1-dong .cvp-o > select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.n1-tieu { font-size: 12.5px; color: var(--muted); }
.n1-tieu i { color: var(--red); font-style: normal; }
.n1-bb > select { color: var(--red); }
.n1-ghichu { margin: -4px 42px 0 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--muted); }
.n1-them { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brand); background: none; color: var(--brand); display: grid; place-items: center; cursor: pointer; padding: 0; }
.n1-them svg { width: 16px; height: 16px; }
.n1-muc-phu { margin: 8px 0 0; color: var(--brand); font-weight: 600; }
.n1-kq { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13.5px; }
.n1-kq p { margin: 0 0 6px; }
.n1-kq.co-loi { border-color: var(--red); background: var(--red-soft); }
.n1-bo-qua { color: var(--muted); }
/* Lịch sử import */
.n1-ls-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.n1-ls-bang td, .n1-ls-bang th { white-space: nowrap; font-size: 13px; }
.n1-ls-bang .so { text-align: right; }
.n1-ls-bang .n1-tick { width: 36px; }
.n1-ls-bang .n1-ten-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.n1-ls-bang tr.n1-bam { cursor: pointer; }
.n1-ls-ct td { white-space: normal; }
/* Nút Cập nhật: icon quay khi đang đọc lại */
@keyframes n1-quay { to { transform: rotate(360deg); } }
.dang-quay svg { animation: n1-quay .8s linear infinite; }
.hop:has(.n1) .hop-chan .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .n1-dong { grid-template-columns: minmax(0, 1fr) 84px 26px; gap: 6px; }
  .n1-dong .cvp-o > select { padding-left: 8px; padding-right: 2px; }
  .n1-ghichu { margin-right: 32px; }
  .hop:has(.n1) .hop-chan .btn { padding-left: 10px; padding-right: 10px; }
}
/* Hàng tab Công việc kiểu Lark (boss 01/10) */
.cv-tab-ds .tab, .cv-tabs > .lh-view-them { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-tab-ds .tab svg, .cv-tabs > .lh-view-them svg { width: 15px; height: 15px; }
.cv-tabs > .lh-view-them { flex: none; }
/* Nút riêng của từng bảng gọn (vd chọn tháng hoa hồng) nằm trong hàng nút chung */
.lh-nut-phai { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Chăm sóc: thẻ Việc hẹn + dòng thời gian (boss 01/10) ---------- */
.lhn-hen { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-2); border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.lhn-hen.nay { border-left-color: var(--amber, #D98B1E); }
.lhn-hen.qua { border-left-color: var(--red); }
.lhn-hen.sap { border-left-color: var(--blue, #3B6FD8); }
.lhn-hen-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.lhn-hen.trong .lhn-hen-dau { justify-content: space-between; }
.lhn-hen-ngay { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); }
.lhn-hen-ngay svg { width: 15px; height: 15px; }
.lhn-hen-viec { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lhn-hen-tt { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--muted); }
.lhn-hen.nay .lhn-hen-tt { background: var(--amber-soft, #FFF4E0); color: var(--amber, #B26B00); }
.lhn-hen.qua .lhn-hen-tt { background: var(--red-soft); color: var(--red); }
.lhn-hen.sap .lhn-hen-tt { background: var(--blue-soft, #EAF1FF); color: var(--blue, #3B6FD8); }
.lhn-hen-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.lhn-hen-nut .btn svg { width: 14px; height: 14px; }
.lhn-hen-khung { display: flex; flex-direction: column; gap: 8px; }
.lhn-hen-khung[hidden] { display: none; }
.lhn-hd-them.hai { grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.lhn-dtg-tieu { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lhn-dtg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.lhn-dtg li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.lhn-dtg li > div { padding-top: 3px; }
.lhn-dtg-ai { font-weight: 600; margin-right: 6px; }
.lhn-dtg-ai.doan { font-weight: 500; color: var(--muted); }
.lhn-dtg-ic { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--muted); }
.lhn-dtg-ic svg { width: 14px; height: 14px; }
.lhn-dtg li.lhn-dtg-xong .lhn-dtg-ic { color: var(--green, #1F9D55); }
.lhn-dtg li.lhn-dtg-hen .lhn-dtg-ic { color: var(--blue, #3B6FD8); }
@media (max-width: 600px) { .lhn-hd-them { grid-template-columns: minmax(0, 1fr); } .lhn-hd-them.hai { grid-template-columns: minmax(0, 1fr) auto; } }
/* Chăm sóc bản 2: ô ghi + hẹn việc + tick xong; danh sách việc đang hẹn */
.lhn-csf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lhn-csf .lhn-cs-them { margin: 0; }
.lhn-csf-hen { margin: 0; }
.lhn-csf-xong { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; }
.lhn-csf-xong[hidden] { display: none; }
.lhn-hen-ds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lhn-hen-ds > .lhn-hen { margin: 0; }
.lhn-hen-dau .lhn-hen-nut { margin-left: auto; }
.lhn-nhanh .lhn-csf-xong { margin-top: 4px; }
.nhan-lh.lh-nguon-cu { background: var(--green-soft); color: var(--green); }
.nhan-lh.lh-sn-thang { background: var(--purple-soft, #F3EDFF); color: var(--purple, #7A4DD8); display: inline-flex; align-items: center; gap: 3px; }
.nhan-lh.lh-sn-thang svg { width: 12px; height: 12px; }
/* Sinh nhật bé — lý do lớn nhất để mẹ đi chụp (boss 01/10): tô đậm */
.lh-sn-ngay { font-weight: 700; color: var(--ink); }
.lh-sn-ngay { font-size: 14.5px; color: var(--ink); letter-spacing: .1px; }
/* Hồ sơ liên kết 3 bảng (boss 01/10) */
.lhn-lk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card); border: 1px dashed var(--line); }
.lhn-lk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.lhn-lk-chip:hover { border-color: var(--brand); }
.lhn-lk-chip svg { width: 14px; height: 14px; color: var(--muted); }
.lhn-lk-chip.khach svg { color: var(--green); }
.lhn-dtg-nguon { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--card-2); color: var(--muted); margin-right: 6px; vertical-align: 1px; }
.lhn-dtg li.lhn-dtg-chup .lhn-dtg-ic { color: var(--green); }
.lhn-dtg li.lhn-dtg-tt .lhn-dtg-ic { color: var(--purple); }

/* ---------- Hoá đơn chụp ảnh (boss 01/10) ---------- */
.hd-form .hd-muc { margin: 10px 0 0; font-size: 14px; color: var(--brand); }
.hd-form i.do, .hd-ct i.do { color: var(--red); font-style: normal; }
.hd-goi-tt { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 8px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.hd-tong { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; border-radius: var(--r-md); background: var(--card-2); font-size: 14px; }
.hd-conlai { color: var(--brand); }
.hd-anh-khoi { display: flex; flex-direction: column; gap: 6px; }
.hd-anh-khoi .btn { align-self: flex-start; }
.hd-anh { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-anh img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.hd-anh-o { position: relative; }
.hd-anh-o button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); font-size: 13px; line-height: 20px; cursor: pointer; padding: 0; }
.hd-xem { display: flex; flex-direction: column; gap: 12px; }
.hd-dau { display: flex; align-items: center; gap: 10px; }
.hd-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--green-soft); color: var(--green); }
.hd-link > svg { width: 16px; height: 16px; }
.hd-link > span { color: var(--ink); }
.hd-tab { display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.hd-ct { display: flex; flex-direction: column; }
.hd-dong { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2, var(--line)); font-size: 14px; }
.hd-dong > span { color: var(--muted); }
.hd-dong > b { font-weight: 500; overflow-wrap: anywhere; }
.hd-tien { color: var(--amber); font-weight: 700; font-size: 15px; }
.hd-tien.do, .cell-sub.do { color: var(--red); }
.hd-ls td, .hd-ls th { font-size: 13px; vertical-align: top; }
.hd-nx { display: flex; flex-direction: column; gap: 10px; }
.hd-nx-dong { display: flex; gap: 8px; font-size: 14px; }
.hd-ly { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-md); }
.hd-ly[hidden] { display: none; }
.hd-ly-nut { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 600px) { .hd-dong { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Tuyển dụng: câu trả lời của ứng viên (boss 13/10) */
.uv-hoi { padding: 9px 0; border-bottom: 1px solid var(--line-2, var(--line)); font-size: 14px; }
.uv-hoi > span { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 3px; }
.uv-hoi > p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Tài khoản VietUp Office trong Hồ sơ nhân sự (boss 01/10) */
.hs-tk { display: inline-flex; align-items: center; gap: 4px; }
.hs-tk .tc-nut svg { width: 13px; height: 13px; }
.hs-capmk { font-size: 12.5px; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.hs-capmk svg { width: 13px; height: 13px; }
.hs-mk-chu { font-size: 18px; letter-spacing: .5px; color: var(--brand); }
.hs-mk-tin { white-space: pre-wrap; background: var(--card-2); border-radius: var(--r-md); padding: 10px 12px; font: inherit; font-size: 13.5px; margin: 0; }
/* Boss 01/10 (áp dụng cả web): dòng chữ nhỏ dưới tên trong ô bảng tự xuống dòng, tối đa 2 dòng rồi "…" — không kéo dài cột */
table.grid td div.cell-sub { white-space: normal; max-width: 320px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.grid.co-rong td div.cell-sub { max-width: none; }
/* Boss 01/10 (áp dụng cả web): ô số trên đầu trang thu thành hàng mỏng → bảng bên dưới cao thêm, thấy nhiều dòng hơn */
.tile { padding: 8px 12px; gap: 10px; }
.tile .ring { width: 32px; height: 32px; }
.tile .ring svg { width: 16px; height: 16px; }
.tile .txt { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.tile .txt b { font-size: 20px; line-height: 1.15; }
.tile .txt small { flex-basis: 100%; margin-top: 0; }
/* Khung chi tiết: bảng con (lịch sử chụp…) cuộn trong khung của nó, khung trái không bị cuộn ngang */
.lhn-trai { overflow-x: hidden; }
.lhn-trai .table-wrap { overflow-x: auto; max-width: 100%; }
.lhn-luoi .kh-ghichu { grid-column: 1 / -1; }
.lhn-luoi .kh-ghichu textarea { min-height: 52px; }
/* Kéo thả sắp xếp tab (boss 01/10, như Lark) */
[data-keo-tab] > [data-tab-khoa] { cursor: grab; }
[data-keo-tab] > [data-tab-khoa].dang-keo { opacity: .45; }

/* ===== Voucher khách cũ (boss 01/10): ô số bấm được, mục Voucher trong khung chi tiết, hộp Quét voucher ===== */
button.tile { font: inherit; text-align: left; cursor: pointer; color: inherit; width: 100%; }
button.tile:hover { border-color: var(--line-2); }
button.tile.dang-loc { border-color: currentColor; box-shadow: 0 0 0 2px var(--amber-soft, var(--blue-soft)); }
.vc-dong { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.vc-dong:first-of-type { border-top: 0; }
.vc-dong.da { opacity: .75; }
.vc-gia { display: flex; align-items: center; gap: 6px; min-width: 70px; }
.vc-gia svg { width: 18px; height: 18px; color: var(--amber, #D97706); }
.vc-gia b { font-size: 16px; }
.vc-ttin { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vc-nut { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-nut .btn { white-space: nowrap; }
.vc-hop { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vc-tim-hang { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.vc-tim-hang .cvp-o { flex: 1 1 240px; min-width: 0; }
.vc-cam { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vc-cam[hidden] { display: none; }
.vc-cam video { width: 100%; max-height: 50vh; border-radius: var(--r-md, 10px); background: #000; object-fit: cover; }
#vc-kq { min-height: 40px; }
/* Voucher trong hộp Làm hoá đơn */
.hd-vc { display: flex; flex-direction: column; gap: 8px; }
.hd-vc-hang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-vc-chon { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md, 10px); border: 1px solid var(--amber); background: var(--amber-soft); }
.hd-vc-chon > svg { width: 20px; height: 20px; color: var(--amber); flex: none; }
.hd-vc-chon .grow { min-width: 0; }
.vc-dong .hd-anh img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
/* Hộp Làm hoá đơn hôm nay (ô WORKPLACE) */
.hdn { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hdn .hd-muc { margin: 6px 0 2px; }
.hdn-ca { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--card); flex-wrap: wrap; }
.hdn-gio { display: flex; flex-direction: column; min-width: 52px; font-size: 15px; }
.hdn-tt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hdn-hd { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.hdn-nut { display: flex; gap: 6px; flex-wrap: wrap; }
.hdn-goiy { margin-left: 8px; }
.hd-ghicoc { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: var(--r-md, 10px); background: var(--blue-soft); }
.hd-ghicoc svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
/* Hoá đơn nháp (nhân sự 15/10) */
.hd-nhap-bao { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 8px 10px; border-radius: var(--r-md, 10px); background: var(--green-soft); font-size: 13px; }
.hd-nhap-bao.khac { background: var(--amber-soft); }
.hd-nhap-bao > span { flex: 1 1 200px; min-width: 0; }
.hd-nhap-bao svg { width: 16px; height: 16px; flex: none; }
.hd-nhap-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hop-chan:has(.hd-nhap-tt) .btn { white-space: nowrap; }
@media (max-width: 600px) { .hop-chan:has(.hd-nhap-tt) { flex-wrap: wrap; } .hop-chan .hd-nhap-tt { flex: 1 0 100%; text-align: center; } }
.hdn-nhap { border-color: var(--amber); background: var(--amber-soft); }
/* Up size ảnh in phóng (boss 15/10) */
.hd-up-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hd-up-tinh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.hd-up-tinh > span { flex: 1 1 220px; min-width: 0; }
@media (max-width: 760px) { .hd-up-o { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.hd-anh-tt { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 3px; border-radius: 0 0 10px 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; font-style: normal; line-height: 1.2; text-align: center; pointer-events: none; }
.hd-anh-tt.loi { background: rgba(176,32,32,.85); }
@media (max-width: 600px) { .hdn-goiy { display: none; } .hdn-nut { width: 100%; } .hdn-nut .btn { flex: 1; justify-content: center; } }
/* Dòng "Có bản mới — Tải lại" (boss 01/10) */
.ban-moi { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--ink, #1F2430); color: #fff; font: inherit; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); cursor: pointer; }
.ban-moi svg { width: 16px; height: 16px; flex: none; }
.ban-moi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ban-moi b { color: #FFB4B4; white-space: nowrap; }
/* ===== Form Làm hoá đơn (boss 01/10: "ít màu mè quá, nhìn chán", thừa khoảng trắng bên phải, * bắt buộc màu đỏ) ===== */
.hd-form { max-width: none; gap: 14px; }
.hd-form > p.cell-sub { margin: 0; }
.hd-khoi { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-lg, 14px); border: 1px solid var(--line); background: var(--card); position: relative; overflow: hidden; min-width: 0; }
.hd-khoi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k, var(--brand)); }
.hd-khoi.blue   { --k: var(--blue);   --k-soft: var(--blue-soft); }
.hd-khoi.amber  { --k: var(--amber);  --k-soft: var(--amber-soft); }
.hd-khoi.purple { --k: var(--purple, #7C3AED); --k-soft: var(--purple-soft, #F3EEFF); }
.hd-khoi.green  { --k: var(--green);  --k-soft: var(--green-soft); }
.hd-khoi { background: linear-gradient(180deg, var(--k-soft) 0, var(--card) 64px); }
.hd-form .hd-muc { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.hd-muc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--k); color: #fff; flex: none; }
.hd-muc-ic svg { width: 17px; height: 17px; }
.hd-form .cvp-o > span i.do, .hd-form .cvp-o > span i, .hd-form .cvp-nhan i.do { color: var(--red); font-style: normal; font-weight: 700; }
.hd-goi-ds { display: grid; gap: 10px; }
.hd-goi-dong { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-md, 10px); background: var(--card); border: 1px dashed var(--k); }
.hd-goi-dong:has(input) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) auto; }
.hd-goi-dong .hd-goi-tt b { color: var(--k); font-size: 15px; }
.hd-them-goi { justify-self: start; border-color: var(--k); color: var(--k); }
.hd-form .hd-tong { background: linear-gradient(90deg, var(--brand-soft, #FDECEC), var(--amber-soft)); border: 1px solid var(--line); font-size: 15px; padding: 12px 16px; }
.hd-form .hd-tong .hd-conlai { font-size: 18px; }
@media (max-width: 700px) { .hd-goi-dong, .hd-goi-dong:has(input) { grid-template-columns: minmax(0, 1fr); } .hd-khoi { padding: 12px; } }
/* Ekip theo gói (boss 01/10: 2 gói có thể 2 ekip khác nhau) */
.hd-ekip-goi { display: grid; gap: 10px; }
.hd-ekip-o { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hd-ekip-dong { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md, 10px); background: var(--card); border: 1px dashed var(--k); }
.hd-ekip-ten { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.hd-ekip-ten b { color: var(--k); }
.hd-ekip-ten .btn { margin-left: auto; }
@media (max-width: 700px) { .hd-ekip-o { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Boss 01/10: "không muốn chia thành 4 khúc màu" — máy tính cũng liền một mạch (vẫn xếp ngang 2–3 ô một hàng), bỏ khối màu + tiêu đề khối */
.hd-form { --k: var(--brand); --k-soft: var(--brand-soft); }
.hd-form .hd-khoi { display: contents; --k: var(--brand); --k-soft: var(--brand-soft); }   /* bỏ màu riêng từng khối: nút Thêm gói / Thêm make cùng màu giao diện */
.hd-form .hd-khoi::before, .hd-form .hd-muc { display: none; }
.hd-form .hd-goi-dong, .hd-form .hd-ekip-dong { border: 1px solid var(--line); background: var(--card-2); }
.hd-form .hd-tong { background: var(--card-2); }
/* Ô web tự điền (boss 01/10: "đánh dấu những cái tự fill cho nhân sự biết không phải điền nữa") — nền xanh nhạt + nhãn "tự điền" */
.hd-form .cvp-o.tu-dien { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.hd-form .cvp-o.tu-dien > span { background: linear-gradient(var(--card) 50%, var(--green-soft) 50%); }
.hd-form .cvp-o.tu-dien > span::after { content: "tự điền"; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.hd-tu { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 600; }
/* Dịch vụ thêm: chọn món, giá sửa được, tiền tự cộng */
.hd-dv { display: grid; gap: 8px; }
.hd-dv-dau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd-dv-dau .cvp-nhan { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.hd-dv-chon { flex: 1 1 260px; }
.hd-dv-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--card); }
.hd-dv-dong.tu-dien { background: var(--green-soft); }
.hd-dv-ten { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.hd-dv-ten .hd-tu { align-self: flex-start; margin: 2px 0 0; }
.hd-dv-sl, .hd-dv-gia { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--card); }
.hd-dv-sl input { width: 52px; border: 0; outline: 0; font: inherit; text-align: right; background: none; }
.hd-dv-gia input { width: 96px; border: 0; outline: 0; font: inherit; text-align: right; background: none; }
.hd-dv-sl em, .hd-dv-gia em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.hd-dv-tien { min-width: 90px; text-align: right; color: var(--brand); }
.hd-dv-tong { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--r-md, 10px); background: var(--card-2); }
/* Nút "Bỏ gói" (máy tính) — boss 01/10: "dấu X bị lệch", "chưa đẹp" → nút tròn nhỏ hình thùng rác, xám nhạt, rê chuột thì đỏ; chữ chỉ hiện ở điện thoại */
.hd-bo-goi { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; justify-self: end; transition: background .15s, color .15s; }
.hd-bo-goi:hover, .hd-bo-goi:focus-visible { background: var(--brand-soft); color: var(--red); outline: 0; }
.hd-bo-goi svg { width: 17px; height: 17px; display: block; }
.hd-bo-goi-chu { display: none; }
/* ===== Form Làm hoá đơn KIỂU LARK (boss 01/10: "không thích chia 4 phần, nhân sự dễ bỏ sót; hoá đơn thường làm trên điện thoại → dọc vuốt xuống như Lark")
   Mỗi trường một hàng hết bề ngang: tên trường bên trái (đậm, * đỏ), ô nhập bên phải, các hàng ngăn bằng dải nền xám. Boss 01/10 tiếp: "điện thoại thì dọc, máy tính thì ngang" → chỉ áp dụng màn hẹp ===== */
@media (max-width: 760px) {
  .hop.to:has(.hd-form) { width: min(640px, 100%); }
  .hop-than:has(.hd-form) { padding: 0; background: var(--bg); }
  .hd-form { gap: 0; --k: var(--brand); --k-soft: var(--brand-soft); }
  .hd-form > p.cell-sub { padding: 10px 16px; margin: 0; }
  .hd-form .hd-khoi { display: contents; }
  .hd-form .hd-khoi::before, .hd-form .hd-muc { display: none; }
  .hd-form .cvp-hai, .hd-form .kpi-ba, .hd-form .hd-ekip-o, .hd-form .hd-goi-ds, .hd-form .hd-ekip-goi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hd-form .cvp-o { min-height: 56px; margin: 0; padding: 10px 16px; gap: 12px; border: 0; border-radius: 0; border-bottom: 8px solid var(--bg); background: var(--card); }
  .hd-form .cvp-o:focus-within { border-color: var(--bg); box-shadow: inset 3px 0 0 var(--brand); }
  .hd-form .cvp-o > span { position: static; order: -1; transform: none; flex: 0 1 46%; max-width: 46%; padding: 0; background: none;
    font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: normal; }
  .hd-form .cvp-o:focus-within > span, .hd-form .cvp-o.co-gt > span, .hd-form .cvp-o > input:not(:placeholder-shown) + span { top: auto; font-size: 15px; }
  .hd-form .cvp-o > input, .hd-form .cvp-o > select, .hd-form .cvp-o > textarea { flex: 1 1 auto; min-width: 0; padding: 0 !important; height: auto; text-align: right; font-size: 15px; }
  .hd-form .cvp-o > select { text-align-last: right; }
  .hd-form .cvp-o > input::placeholder, .hd-form .cvp-o > textarea::placeholder { color: var(--muted); }
  .hd-form .cvp-o > em { font-style: normal; color: var(--muted); }
  .hd-form .cvp-o.ngay-o .ngay-nut { flex: none; }
  /* Gói: mỗi gói các hàng nối nhau, hàng thông tin giá ngay dưới */
  .hd-form .hd-goi-dong, .hd-form .hd-goi-dong:has(input) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .hd-form .hd-goi-tt { background: var(--card); padding: 0 16px 12px; margin-top: -8px; border-bottom: 8px solid var(--bg); text-align: right; align-items: flex-end; }
  .hd-form .hd-goi-tt b { color: var(--brand); font-size: 16px; }
  .hd-bo-goi { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; padding: 8px 16px; margin-top: -8px; border: 0; border-bottom: 8px solid var(--bg);
    background: var(--card); color: var(--red); font: inherit; font-size: 13.5px; cursor: pointer; }
  .hd-bo-goi svg { width: 14px; height: 14px; }
  .hd-form .hd-them-goi { justify-self: stretch; justify-content: center; margin: 0; border: 0; border-radius: 0; border-bottom: 8px solid var(--bg); background: var(--card); color: var(--brand); min-height: 48px; font-size: 15px; }
  /* Ekip theo gói: tên gói làm dòng tiêu đề nhỏ */
  .hd-form .hd-ekip-dong { display: grid; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .hd-form .hd-ekip-ten { padding: 10px 16px; background: var(--brand-soft); font-size: 14px; }
  .hd-form .hd-ekip-ten b { color: var(--brand); }
  /* Voucher, tổng tiền, ảnh, ghi chú cọc: mỗi thứ một hàng trắng */
  .hd-form .hd-vc { gap: 0; }
  .hd-form .hd-vc-hang, .hd-form .hd-vc-chon, .hd-form .hd-anh-khoi, .hd-form .hd-ghicoc, .hd-form .vc-cam { padding: 12px 16px; border: 0; border-radius: 0; border-bottom: 8px solid var(--bg); background: var(--card); margin: 0; }
  .hd-form .hd-vc-hang .cvp-nhan, .hd-form .hd-anh-khoi .cvp-nhan { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 auto 0 0; }
  .hd-form .hd-vc-chon { background: var(--amber-soft); }
  .hd-form .hd-tong { border: 0; border-radius: 0; border-bottom: 8px solid var(--bg); padding: 14px 16px; background: var(--card); justify-content: space-between; }
  .hd-form .hd-tong .hd-conlai { font-size: 18px; color: var(--brand); }
  .hd-form .hd-anh-khoi .btn { align-self: flex-start; }
}
/* Thanh dưới điện thoại mới (boss 01/10): Lịch · Đơn từ · Check in / out · Thông báo · Workplace */
.mobilebar button { position: relative; }
.mobilebar .dem-chuong { position: absolute; top: 0; left: calc(50% + 4px); font-style: normal; }
.mb-chon { display: grid; gap: 10px; }
.mb-chon-o { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg, 14px); background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.mb-chon-o:hover { border-color: var(--brand); }
.mb-chon-o .app-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.mb-chon-o .app-icon svg { width: 24px; height: 24px; }
.mb-chon-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-chon-chu b { font-size: 15px; }
.mb-chon-chu i { font-style: normal; font-size: 13px; color: var(--muted); }
/* Dịch vụ thêm + ô tự điền ở bản điện thoại (dọc kiểu Lark) */
@media (max-width: 760px) {
  .hd-form .hd-dv { gap: 0; }
  .hd-form .hd-dv-dau, .hd-form .hd-dv-dong, .hd-form .hd-dv-tong { padding: 12px 16px; border: 0; border-radius: 0; border-bottom: 8px solid var(--bg); background: var(--card); margin: 0; }
  .hd-form .hd-dv-dong.tu-dien { background: var(--green-soft); }
  .hd-form .hd-dv-chon { min-height: 0; padding: 0; border-bottom: 0; background: none; }
  .hd-form .cvp-o.tu-dien { background: var(--green-soft); }
  .hd-form .cvp-o.tu-dien > span { background: none; }
  .hd-form .hd-bo-goi { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; height: auto; border-radius: 0; color: var(--red); }
  .hd-form .hd-bo-goi .hd-bo-goi-chu { display: inline; font-size: 13.5px; }
  .hd-form .hd-bo-goi svg { width: 15px; height: 15px; }
}

/* ===== Boss 01/10: "di chuột vào thì đều hiện nền cam" — mọi nút phụ cả web khi rê chuột: nền cam nhạt (--brand-soft) + chữ / biểu tượng màu thương hiệu,
   giống nút xoá gói. Nút chính (đỏ) giữ nguyên. Không áp cho thiết bị cảm ứng (không có rê chuột) ===== */
@media (hover: hover) {
  .btn:not(.btn-primary):not(:disabled):hover, .icon-btn:not(:disabled):hover, .tc-nut:hover, .btn-chu:hover, .ngay-nut:hover,
  .hd-them-goi:hover, .lh-kieu button:not(.dang):hover, .mb-chon-o:hover {
    background: var(--brand-soft); color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  }
  .ngay-nut:hover { border-radius: 6px; }
  .btn:not(.btn-primary):hover svg, .icon-btn:hover svg, .tc-nut:hover svg, .ngay-nut:hover svg { color: var(--brand-ink); }
  .btn-chu.do:hover, .hd-bo-goi:hover { color: var(--red); }
}
/* Make freelancer (boss 01/10): Tài chính → Make freelancer + dòng make ngoài gói trong hoá đơn */
.mk-trang { display: grid; gap: 12px; }
.mk-bang td, .mk-bang th { white-space: nowrap; }
.mk-qr-nho { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.mk-nghi { opacity: .55; }
.mk-form { max-width: none; }
.mk-qr-khoi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-qr-khoi .cvp-nhan { margin: 0; }
#mk-qr-xem img { width: 120px; height: 120px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.mk-gia { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mk-dl { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mk-loai { display: grid; gap: 8px; }
.mk-loai-dong { display: flex; align-items: center; gap: 8px; }
.mk-loai-dong .cvp-o { flex: 1; }
.hd-mkn { display: grid; gap: 8px; }
.hd-mkn-dong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; }
.hd-mkn-dong .cvp-o { min-width: 0; }
.hd-mkn-dong .cvp-o > select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .hd-form .hd-mkn { gap: 0; }
  .hd-form .hd-mkn-dong { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border-bottom: 8px solid var(--bg); }
  .hd-form .hd-mkn-dong .cvp-o { grid-column: 1 / -1; }
  .hd-form .hd-mkn-dong .cvp-o { border-bottom: 1px solid var(--line); }
}
/* Người upsell trong từng dòng dịch vụ thêm (boss 01/10: 5% hoa hồng, chọn nhiều người) */
.hd-ups { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--line); }
.hd-ups-nhan { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hd-ups-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; }
.hd-ups-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.hd-ups-them { border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink-2); cursor: pointer; }
/* Ô gõ tìm dùng chung (boss 01/10): ô gói, ô thêm dịch vụ… */
.tim-chon { position: relative; }
.tim-chon > input { flex: 1; min-width: 0; }
.tim-chon-ds { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 10px); box-shadow: var(--shadow-2); }
.tim-chon-ds[hidden] { display: none; }
.tim-chon-nhom { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tim-chon-mon { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.tim-chon-mon b { font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.tim-chon-mon:hover, .tim-chon-mon.dang { background: var(--brand-soft); }
.tim-chon-ds .trong { padding: 10px; margin: 0; }
@media (max-width: 760px) { .hd-form .tim-chon > input { text-align: left; } .tim-chon-ds { max-height: 50vh; } }
/* Chuông → tab Duyệt: mục "Đang chờ bạn duyệt" (boss 01/10), mỗi loại một màu: hoá đơn = màu giao diện, phiếu chi xanh lá, đơn từ tím */
.noti-cho { --c: var(--brand); --c-soft: var(--brand-soft); display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin: 0 0 6px;
  border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.noti-cho.pc { --c: var(--green); --c-soft: var(--green-soft); }
.noti-cho.dt { --c: var(--purple, #7C45E6); --c-soft: var(--purple-soft, #F3EDFF); }
.noti-cho.vd { --c: var(--blue); --c-soft: var(--blue-soft); }
.noti-cho.ld { --c: var(--amber); --c-soft: var(--amber-soft); }
.noti-cho:hover { background: var(--c-soft); }
.noti-cho-nhan { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--c-soft); color: var(--c); font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.noti-cho-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.noti-cho-than b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-cho-nut { flex: none; color: var(--c); font-weight: 600; font-size: 13px; }
/* Màn Duyệt hoá đơn (boss 01/10, kiểu trung tâm phê duyệt Lark) */
.hdd { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.hdd-trai { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); overflow: hidden; position: sticky; top: 8px; }
.hdd-tab { padding: 0 10px; }
.hdd-ds { display: flex; flex-direction: column; max-height: calc(100vh - 220px); overflow-y: auto; }
.hdd-the { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.hdd-the:hover { background: var(--brand-soft); }
.hdd-the.dang { background: var(--brand-soft); border-left-color: var(--brand); }
.hdd-the-dau { display: flex; justify-content: space-between; gap: 8px; }
.hdd-tien { font-weight: 700; color: var(--brand-ink); white-space: nowrap; }
.hdd-the-cuoi { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.hdd-the-cuoi .pill { margin-left: auto; }
.hdd-phai { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); min-height: 320px; display: flex; flex-direction: column; }
.hdd-phai > .trong { padding: 40px 16px; text-align: center; }
.hdd-dau { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hdd-dau h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.hdd-than { padding: 14px 16px; flex: 1; }
.hdd-chan { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); border-radius: 0 0 var(--r-lg, 14px) var(--r-lg, 14px); }
.hd-ly { display: grid; gap: 8px; padding: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.hd-ly-nhanh { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }   /* chừa chỗ cho nhãn "Lý do" nổi trên viền ô (boss 01/10: bị dính chữ) */
.hd-ly-chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--card); font: inherit; font-size: 12.5px; cursor: pointer; }
.hd-ly-chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.app-icon { position: relative; }
.app-dem { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 700; font-style: normal; display: grid; place-items: center; border: 2px solid var(--card); }
@media (max-width: 760px) { .hdd { grid-template-columns: minmax(0, 1fr); } .hdd-trai { position: static; } .hdd-ds { max-height: 40vh; } }
/* Màn Phê duyệt gom hoá đơn + phiếu chi + đơn từ (boss 01/10): nhãn loại mỗi loại một màu */
.noti-cho-nhan.hd { --c: var(--brand); --c-soft: var(--brand-soft); }
.noti-cho-nhan.pc { --c: var(--green); --c-soft: var(--green-soft); }
.noti-cho-nhan.dt { --c: var(--purple, #7C45E6); --c-soft: var(--purple-soft, #F3EDFF); }
.hdd-dem { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.hdd-the-dau { align-items: center; }
.hdd-the-ten { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdd-the.pc.dang { border-left-color: var(--green); background: var(--green-soft); }
.hdd-the.dt.dang { border-left-color: var(--purple, #7C45E6); background: var(--purple-soft, #F3EDFF); }

/* =====================================================================
   ONLINE THẬT + CỬA SỔ CHAT NHỎ KIỂU MESSENGER (boss 01/10)
   ===================================================================== */
.on-anh { position: relative; display: inline-flex; flex: none; }
.on-cham { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--card); background: #C4C8CF; box-sizing: content-box; }
.on-cham.on  { background: var(--green); }
.on-cham.roi { background: var(--amber); }
.on-chu { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-chu.on  { color: var(--green); }
.on-chu.roi { color: var(--amber); }
.on-ds { display: grid; gap: 2px; }
.on-dong { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; gap: 10px; }
.on-ten { display: grid; min-width: 0; line-height: 1.3; }
.on-ten b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-nhan { display: inline-flex; color: var(--muted); opacity: 0; transition: opacity .15s; }
.on-nhan svg { width: 16px; height: 16px; }
.on-dong:hover .on-nhan, .on-dong:focus-visible .on-nhan { opacity: 1; color: var(--brand); }
.cc-hom-nay + .on-ds { border-top: 1px solid var(--line-2); }

.mc { position: fixed; right: 16px; bottom: 0; z-index: 90; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.mc .chat-nhom { position: relative; right: auto; bottom: auto; width: 328px; height: 440px; pointer-events: auto; }
.mc .chat-nhom.thu { width: 250px; height: auto; }
.mc .cn-dau { gap: 2px; padding: 6px 6px 6px 8px; }
.mc .chat-nhom.co-moi .cn-dau { background: var(--brand-soft); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mc-dau-ten { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer; padding: 4px; border-radius: var(--r-md); }
.mc-dau-ten > span:not(.on-anh):not(.tn-anh-nhom) { display: grid; min-width: 0; line-height: 1.25; }
.mc-dau-ten b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-dem { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: var(--brand);
  border-radius: 999px; padding: 1px 7px; }
.mc .cn-tin > div { min-width: 0; }
.mc .tn-tep img { max-width: 180px; }
.mc-the { align-self: center; font-size: 12px; color: var(--ink-2); background: var(--green-soft); border-radius: var(--r-md); padding: 6px 10px; text-align: center; }
.mc .cn-chan { align-items: flex-end; }
.mc .cn-chan textarea { flex: 1; min-width: 0; border: 0; background: var(--card-2); border-radius: 18px; padding: 9px 14px;
  font: inherit; font-size: 13.5px; line-height: 1.35; resize: none; outline: none; color: var(--ink); max-height: 110px; }
.mc .cn-chan label.bl-nut { cursor: pointer; }
@media (max-width: 860px) {
  .mc { left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); justify-content: flex-end; padding: 0 8px; }
  .mc .chat-nhom { width: 100%; max-width: 420px; height: 62dvh; border-bottom: 1px solid var(--line); border-radius: var(--r-lg); }
  .mc .chat-nhom.thu { width: 100%; max-width: 420px; }
  .on-nhan { opacity: 1; }
}
/* Đánh giá nhân sự theo tháng (boss 01/10) */
.bcv-top { font-size: 12px; }
.bcv-ghi { margin: 10px 2px 0; }

/* Thu nhập theo tháng (boss 01/10) — trang Thu nhập của tôi */
.tnls { margin-bottom: 14px; }
.tnls .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tnls-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tnls-so > div { background: var(--card-2); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.tnls-so span { font-size: 12px; color: var(--muted); }
.tnls-so b { font-family: var(--font-num); font-size: 18px; }
.tnls-so i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tnls-doi { font-size: 11.5px; font-weight: 600; font-family: var(--font-num); }
.tnls-doi.len { color: var(--green); } .tnls-doi.xuong { color: var(--red); }
.tnls-cuon { overflow-x: auto; padding-bottom: 4px; }
.tnls-chart { height: 170px; }
.tnls-chart .col .fill { background: var(--brand-soft); border: 1px solid var(--brand); border-bottom: 0; }
.tnls-chart .col.now .fill, .tnls-chart .col.cao .fill { background: var(--brand); }
.tnls-bang { margin-top: 12px; }
.tnls-bang summary { cursor: pointer; font-size: 13px; color: var(--brand-ink); font-weight: 500; }
.tnls-bang .table-wrap { margin-top: 8px; }
@media (max-width: 760px) { .tnls-so { grid-template-columns: 1fr 1fr; } .tnls-so > div:last-child { grid-column: 1 / -1; } }
/* Chi tiết thu nhập từng tháng (boss 01/10) */
.tnls-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tnls-chon { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tnct .card-head { display: flex; align-items: center; gap: 10px; }
.tnct-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tnct-so.cham { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.tnct-o { background: var(--card-2); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.tnct-o span { font-size: 12px; color: var(--muted); }
.tnct-o b { font-family: var(--font-num); font-size: 18px; }
.tnct-o i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tnct-o.chinh { background: var(--brand-soft); } .tnct-o.chinh b { color: var(--brand); font-size: 22px; }
.tnct-o.chinh.len i { color: var(--green); } .tnct-o.chinh.xuong i { color: var(--red); }
.tnct-o.tot b { color: var(--green); } .tnct-o.xau b { color: var(--red); }
.tnct-tieu { margin: 16px 0 8px; font-size: 13.5px; font-weight: 600; }
.tnct-vt { display: grid; gap: 8px; }
.tnct-vt-1 { display: grid; grid-template-columns: 96px 64px minmax(0, 1fr) 96px; align-items: center; gap: 10px; font-size: 13px; }
.tnct-vt-1.rong { color: var(--muted); }
.tnct-vt-ca { color: var(--muted); font-size: 12px; }
.tnct-vt-thanh { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.tnct-vt-thanh i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.tnct-vt-1 b { font-family: var(--font-num); text-align: right; }
.tnct-ghi { margin-top: 10px; }
@media (max-width: 760px) {
  .tnct-so, .tnct-so.cham { grid-template-columns: 1fr 1fr; }
  .tnct-vt-1 { grid-template-columns: 78px 54px minmax(0, 1fr) 84px; gap: 8px; }
}

/* Duyệt video (boss 01/10) — Marketing → Video, dữ liệu ở Lark */
.vd-ten { display: inline-flex; align-items: center; gap: 6px; text-align: left; font-weight: 500; }
.vd-ten svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.vd-ct { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.vd-xem { display: grid; gap: 8px; align-content: start; }
.vd-xem video { width: 100%; max-height: 62vh; background: #000; border-radius: var(--r-md); }
.vd-ban { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-ban button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.vd-ban button.dang { background: var(--brand); border-color: var(--brand); color: #fff; }
.vd-khong { display: grid; place-items: center; gap: 6px; min-height: 200px; background: var(--card-2); border-radius: var(--r-md); color: var(--muted); }
.vd-khong svg { width: 32px; height: 32px; }
.vd-tt { display: grid; gap: 8px; align-content: start; }
.vd-dong { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px solid var(--line-2); padding: 5px 0; }
.vd-dong span { color: var(--muted); } .vd-dong b { font-weight: 500; text-align: right; }
.vd-ghi { background: var(--red-soft); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px; }
.vd-khoi { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 8px; }
.vd-khoi h4 { margin: 0; font-size: 13.5px; }
.vd-sao { display: flex; align-items: center; gap: 2px; }
.vd-sao button { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--line); cursor: pointer; padding: 0 2px; }
.vd-sao button.bat { color: #F5A524; }
.vd-sao span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.vd-sao button:hover { transform: scale(1.15); }
.vd-sao button { transition: transform .12s, color .12s; }
.vd-sao.dang button { cursor: progress; animation: vd-nhap 0.9s ease-in-out infinite; }
.vd-sao.dang span { color: var(--amber); font-weight: 600; }
@keyframes vd-nhap { 50% { opacity: .45; } }
.vd-sao.nay button.bat { animation: vd-nay .45s ease-out both; }
.vd-sao.nay button.bat:nth-child(2) { animation-delay: .06s; } .vd-sao.nay button.bat:nth-child(3) { animation-delay: .12s; }
.vd-sao.nay button.bat:nth-child(4) { animation-delay: .18s; } .vd-sao.nay button.bat:nth-child(5) { animation-delay: .24s; }
@keyframes vd-nay { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.vd-xong { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 11px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; animation: vd-hien .25s ease-out; }
.vd-xong.xanh { background: var(--green-soft); color: var(--green); }
.vd-xong.cam { background: var(--amber-soft); color: var(--amber); }
.vd-xong svg { width: 16px; height: 16px; flex: none; }
@keyframes vd-hien { from { opacity: 0; transform: translateY(-4px); } }
.vd-lich { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* Boss 16/10: khối Lịch đăng trong hộp video */
.vd-lichdang h4 { display: flex; align-items: center; gap: 6px; }
.vd-lichdang h4 svg { width: 16px; height: 16px; }
.vd-lich-bai { display: grid; gap: 6px; font-size: 13.5px; }
.vd-lich-bai + .vd-lich-bai { border-top: 1px dashed var(--line-2); padding-top: 8px; }
.vd-lich-bai .hang-nut { flex-wrap: wrap; }
.vd-lich-chu { margin: 0; font-size: 13px; color: var(--ink-2); }
.vd-lich-chu.cam { color: var(--amber-ink, #b45309); }
.vd-lich-chu.do { color: var(--red, #dc2626); }
.vd-tep { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 10px; }
.vd-chon-loai { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; align-items: center; }
.vd-chon-loai > span { width: 100%; font-size: 12px; color: var(--muted); }
.vd-chon-loai label { display: inline-flex; align-items: center; gap: 5px; }
.vd-form { display: grid; gap: 12px; }
@media (max-width: 760px) { .vd-ct { grid-template-columns: 1fr; } }

/* Lịch đăng bài (boss 01/10) — Marketing → Lịch đăng bài, dữ liệu ở Lark */
.ld-cap { text-align: left; font-weight: 500; }
.ld-lich { padding: 10px 12px; overflow-x: auto; }
.ld-lich-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ld-lich-dau b { font-size: 15px; }
.ld-chu { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.ld-chu i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.ld-luoi { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 4px; min-width: 780px; }
.ld-thu { font-size: 11.5px; color: var(--muted); text-align: center; padding: 4px 0; font-weight: 600; }
.ld-luoi > .ld-o { min-height: 130px; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 4px; display: flex; flex-direction: column; gap: 3px; background: var(--card); }
.ld-o.rong { background: transparent; border-style: dashed; }
.ld-o.nay { border-color: var(--brand); }
.ld-luoi .ld-so { font-size: 12px; color: var(--ink-2); font-weight: 700; padding: 0 2px 2px; }
.ld-luoi .ld-o.nay .ld-so { color: var(--brand); }
.ld-bai { border: 0; border-radius: 6px; padding: 3px 5px; font: inherit; font-size: 11.5px; text-align: left; cursor: pointer; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-bai b { font-weight: 600; }
/* Boss 10/10: "màu cho đậm lên cho dễ nhìn" */
.ld-bai.nhap { background: #d97706; color: #fff; }
.ld-bai.cho { background: #2563eb; color: #fff; }
.ld-bai.da { background: #16a34a; color: #fff; }
.ld-bai.loi { background: #dc2626; color: #fff; }
.ld-bai.thieu { background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: default; opacity: .6; }
.ld-chu i.nhap { background: #d97706; } .ld-chu i.cho { background: #2563eb; } .ld-chu i.da { background: #16a34a; } .ld-chu i.loi { background: #dc2626; }
.ld-tep { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.ld-tep img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); display: block; }
.ld-tep video { width: 100%; grid-column: 1 / -1; border-radius: var(--r-md); background: #000; max-height: 55vh; }
.ld-caption { white-space: normal; font-size: 13px; line-height: 1.5; background: var(--card-2); border-radius: var(--r-md); padding: 10px 12px; max-height: 240px; overflow-y: auto; }

/* Kịch bản video (boss 01/10) — Marketing → Kịch bản video, dữ liệu ở Lark */
.kbv-thanh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kb-hook { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.kbv-the { cursor: pointer; display: grid; gap: 6px; }
.kbv-dau { display: flex; align-items: center; gap: 6px; }
.kbv-cao { font-size: 10.5px; font-weight: 700; color: var(--red); }
.kbv-chan { display: flex; align-items: center; gap: 4px; }
.kbv-noi { display: grid; gap: 10px; align-content: start; }
.kbv-the-dau { display: flex; gap: 6px; flex-wrap: wrap; }
.kbv-o span { font-size: 12px; color: var(--muted); font-weight: 600; }
.kbv-o p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; white-space: normal; }
/* Boss 10/10: khung trống màu xám bình thường (không đỏ) */
.ld-bai.trong { background: var(--card-2, #f4f5f7); border: 1px dashed var(--muted); color: var(--ink-2); }
.ld-bai.trong:hover { background: var(--line-2, #e9ebef); color: var(--ink); }
.ld-chu i.trong { background: var(--card-2, #f4f5f7); border: 1px dashed var(--muted); }
.ld-chu i.thieu { background: transparent; border: 1px dashed var(--line); opacity: .6; }
.vd-the-ten { font-size: 12.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kbv-dau svg { width: 14px; height: 14px; color: var(--brand); flex: none; }

/* Máy marketing tự động (boss 01/10) — Marketing → Chiến lược */
.cl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-o { display: block; max-width: 420px; white-space: normal; font-size: 12.5px; line-height: 1.45; }
.mkt .card-head { display: flex; align-items: center; gap: 10px; }
.mkt-buoc { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); margin-top: 10px; }
.mkt-buoc.xong { border-color: var(--green); background: var(--green-soft); }
.mkt-buoc.loi { border-color: var(--red); }
.mkt-so { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); font-weight: 700; }
.mkt-buoc.xong .mkt-so { background: var(--green); color: #fff; } .mkt-so svg { width: 16px; height: 16px; }
.mkt-bt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.mkt-bt span { color: var(--muted); font-size: 12.5px; } .mkt-bt i { font-style: normal; font-size: 12px; color: var(--green); }
.mkt-bt em { font-style: normal; font-size: 12px; color: var(--red); }
.mkt-kh, .mkt-kb { margin: 10px 0 0 40px; display: grid; gap: 8px; font-size: 13px; }
.mkt-kh p { margin: 0; line-height: 1.5; }
.mkt-chi { margin: 8px 0 0 40px; font-size: 12.5px; line-height: 1.5; }
.mkt-chi summary { cursor: pointer; color: var(--brand-ink); font-weight: 500; }
.mkt-chi li { margin: 6px 0; }
.mkt .xanh { color: var(--green); } .mkt .do { color: var(--red); }
@media (max-width: 760px) { .mkt-kh, .mkt-kb, .mkt-chi { margin-left: 0; } }
.lh-khonggio { font-style: normal; color: var(--muted); opacity: .8; }
/* Boss 01/10: nhãn màu hồng / xanh ngọc (bảng màu VIETUP.md) cho các bảng Chiến lược */
.pill.pink { background: var(--pink-soft); color: var(--pink); }
.pill.cyan { background: var(--cyan-soft); color: var(--cyan); }
/* Gợi ý ưu đãi / ngân sách / mục tiêu — bấm chọn mới điền */
.mkt-goiy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--card-2); }
.mkt-goiy > .cell-sub { grid-column: 1 / -1; }
.mkt-goiy-nhom h4 { margin: 0 0 6px; font-size: 13px; }
.mkt-chon { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin-bottom: 6px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font: inherit; font-size: 13px; cursor: pointer; }
.mkt-chon:hover { border-color: var(--brand); }
.mkt-chon.dang { border-color: var(--brand); background: var(--brand-soft); }
.mkt-chon span { font-size: 12px; color: var(--muted); }
/* Cửa sổ trượt của bảng Chiến lược (Giao việc tuần…) — dùng khung .lh-ngan của Liên hệ */
.cl-ngan { width: min(760px, calc(100vw - 56px)); }
.cln-than { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.cln-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.cln-o { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--card-2); border-radius: var(--r-md); min-width: 0; }
.cln-o.dai { grid-column: 1 / -1; }
.cln-o > span { font-size: 12px; color: var(--muted); }
.cln-o > div { font-size: 13.5px; word-break: break-word; }
@media (max-width: 640px) { .cl-ngan { width: auto; left: 0; } .cln-luoi { grid-template-columns: 1fr; } }
tr[data-menu-hang^="cl-"] { cursor: pointer; }
.cln-o.sua { background: none; padding: 0; }
.cln-o.sua .cvp-o { margin: 0; }
.cln-goiy { margin-top: 12px; }
.cl-ngan .lhn-nut .btn-primary { margin-right: 6px; }
.cln-kenh { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cln-kenh h4 { margin: 0 0 2px; font-size: 13px; }
.cln-kenh-dong { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card-2); border-radius: var(--r-md); cursor: pointer; font-size: 13px; min-width: 0; }
.cln-kenh-dong span:not(.pill) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cln-kenh-dong:hover { background: var(--brand-soft); }
.cln-kenh .btn { align-self: flex-start; }
/* Boss 01/10 (như 1O): rê chuột vào ô chăm sóc → khung lịch sử chăm sóc */
.lh-ls-noi { position: fixed; z-index: 120; width: 360px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; background: var(--card);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 12px 14px; pointer-events: none; animation: vd-hien .15s ease-out; }
.lh-ls-noi h4 { margin: 0 0 4px; font-size: 14px; }
.lh-ls-noi ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.lh-ls-noi li { display: flex; gap: 10px; align-items: flex-start; }
.lh-ls-noi li p { margin: 2px 0 0; font-size: 13px; white-space: pre-wrap; }
.lh-ls-trong { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--muted); font-size: 13px; }
.lh-cs-cuoi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lh-cs-cuoi b { font-size: 12.5px; }
/* ==================== SƠ ĐỒ VIỆC (boss 01/10, như sơ đồ 1O) ==================== */
.sd { display: flex; flex-direction: column; gap: 10px; }
.sd-thanh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-chu-giai { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-left: 6px; }
.sd-chu-giai i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.sd-chu-giai i.luot, .sd-viec.luot { --sd-mau: var(--blue); } .sd-chu-giai i.dang, .sd-viec.dang { --sd-mau: var(--purple); }
.sd-chu-giai i.cho, .sd-viec.cho { --sd-mau: var(--muted); } .sd-chu-giai i.xong, .sd-viec.xong { --sd-mau: var(--green); }
.sd-chu-giai i.tre, .sd-viec.tre { --sd-mau: var(--red); } .sd-viec.danhgia { --sd-mau: var(--amber); }
.sd-chu-giai i { background: var(--sd-mau); }
.sd-khung { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); min-height: 420px; max-height: calc(100vh - 230px);
  background-color: var(--card); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.sd.nhung .sd-khung { max-height: calc(100vh - 300px); }
.sd-mat { position: relative; transform-origin: 0 0; }
.sd-svg { position: absolute; inset: 0; overflow: visible; }
.sd-day { color: var(--muted); cursor: pointer; }
.sd-day.xong { color: var(--green); }
.sd-day.chon { color: var(--brand); }
/* .sd-svg đứng trước: sơ đồ tổ chức cũng có lớp .sd-day path (nét 1,6px) đè lên — trước dây chỉ bấm trúng được đúng 1,6px, màu xong không lên */
.sd .sd-svg .sd-day .sd-day-ve { fill: none; stroke: currentColor; stroke-width: 2; }
.sd .sd-svg .sd-day.chon .sd-day-ve, .sd .sd-svg .sd-day:hover .sd-day-ve { stroke-width: 3; }
.sd .sd-svg .sd-day .sd-day-trong { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.sd-day-tam { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 4; color: var(--brand); pointer-events: none; }
.sd-svg .sd-day:hover { color: var(--brand); }
.sd-xoa-day[hidden] { display: none; }
.sd-viec.dang-keo, .sd-nut.dang-keo { box-shadow: var(--shadow-2); z-index: 2; cursor: grabbing; }
/* Boss 02/10: mở sơ đồ ra cả màn hình */
.sd.to { position: fixed; inset: 0; z-index: 95; margin: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.sd.to .sd-khung { flex: 1; min-height: 0; max-height: none; }
.sd-to-ten { font-size: 15px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sd-to-mo { overflow: hidden; }
.sd-nut { position: absolute; user-select: none; touch-action: none; }
.sd-bd { width: 150px; height: 50px; border-radius: 25px; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; cursor: grab; box-shadow: var(--shadow-1); }
.sd-bd svg { width: 18px; height: 18px; }
.sd-ket { width: 56px; height: 56px; border-radius: 50%; background: var(--line); color: #fff; display: flex; align-items: center; justify-content: center; cursor: grab; }
.sd-ket.xong { background: #4CAF50; }
.sd-ket svg { width: 26px; height: 26px; }
.sd-ket label { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.sd-viec { width: 224px; min-height: 112px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sd-mau); border-radius: var(--r-md);
  padding: 8px 10px 8px 12px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow-1); cursor: pointer; font-size: 12.5px; }
.sd-viec:hover { box-shadow: var(--shadow-2); }
.sd-viec.xong { background: var(--green-soft); }
.sd-viec.cho { opacity: .85; }
.sd-viec-dau { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-viec-dau b { color: var(--sd-mau); }
.sd-viec-ng { display: flex; align-items: center; gap: 3px; min-width: 0; }
.sd-viec-ng span { margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.sd-viec-chan { display: flex; align-items: center; gap: 8px; }
.sd-viec-chan .cell-sub svg { width: 12px; height: 12px; vertical-align: -2px; }
.sd-tt { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--sd-mau); background: color-mix(in srgb, var(--sd-mau) 12%, transparent); }
.sd-ngan .sd-tt.luot { --sd-mau: var(--blue); } .sd-ngan .sd-tt.dang { --sd-mau: var(--purple); } .sd-ngan .sd-tt.cho { --sd-mau: var(--muted); }
.sd-ngan .sd-tt.xong { --sd-mau: var(--green); } .sd-ngan .sd-tt.tre { --sd-mau: var(--red); } .sd-ngan .sd-tt.danhgia { --sd-mau: var(--amber); }
.sd-viec-dt { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.sd-viec-dt > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Boss 02/10: nút Đốc thúc nhỏ trên thẻ */
.sd-dt-nut { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--brand); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sd-dt-nut:hover { background: var(--brand-soft); border-color: var(--brand); }
.sd-viec-dt svg { width: 12px; height: 12px; vertical-align: -2px; }
.sd-dau-xong { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.sd-dau-xong svg { width: 12px; height: 12px; }
.sd-cong { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--muted); }
.sd-cong.vao { left: -8px; cursor: crosshair; touch-action: none; }
.sd-cong.vao:hover { border-color: var(--brand); transform: scale(1.25); }
.sd-cong.ra { right: -8px; cursor: crosshair; border-color: var(--brand); touch-action: none; }
.sd-cong.ra:hover { background: var(--brand); transform: scale(1.25); }
.sd-bd .sd-cong.ra { right: -7px; }
.sd-ket .sd-cong.vao { left: -8px; }
.sd-xoa-day { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-1); }
.sd-xoa-day svg { width: 14px; height: 14px; }
.sd-form .cvp-o-nhan, .bb-viec-than .cvp-o-nhan { position: static; transform: none; padding: 0; background: none; font-size: 12.5px; color: var(--muted); margin: 4px 0 -4px; }
.sd-lien { border: 0; background: var(--blue-soft); color: var(--blue); border-radius: 12px; padding: 2px 8px; margin: 0 4px 4px 0; font: inherit; font-size: 12.5px; cursor: pointer; }
.sd-h4 { margin: 16px 0 6px; font-size: 13.5px; }
.sd-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sd-ls li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.gv-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .sd-chu-giai { display: none; } .sd-khung { max-height: 70vh; } }
/* Boss 01/10: màn sửa / tạo việc, dự án, việc lặp trượt ra từ bên phải (như Liên hệ) */
.cvp-ngan { display: block; overflow-y: auto; width: min(1000px, calc(100vw - 56px)); }
.cvp-ngan .cvp { max-width: none; margin: 0; border-radius: 0; min-height: 100%; }
.cvp-dong { position: absolute; top: 12px; right: 14px; z-index: 3; }
/* Điện thoại: màn sửa phủ hết bề ngang (trước bị hở 56px bên phải); hàng tab việc / dự án cuộn ngang, chữ không gãy 3 dòng */
@media (max-width: 900px) { .cvp-ngan { width: auto; left: 0; } }
@media (max-width: 640px) { .da-tabs { gap: 16px; overflow-x: auto; scrollbar-width: none; } .da-tabs button { white-space: nowrap; flex: none; } }
/* Bấm đúp sửa tên việc tại chỗ */
.cv-sua-ten-o { font: inherit; font-size: 14px; padding: 4px 8px; border: 1.5px solid var(--brand); border-radius: var(--r-sm); min-width: 220px; width: 100%; max-width: 520px; background: var(--card); }
[data-sua-ten] { cursor: text; }
.cv-ten-o[data-sua-ten], .cv-g-ten[data-sua-ten] { cursor: pointer; }
/* Boss 02/10: tab "Sơ đồ việc con" cạnh "Chi tiết" trong trang một công việc */
.cvd-sd > .sd, .cvd-sd > .cvc-sd-hint { margin: 10px 16px; }
.cvd-sd > .cvc-sd-hint { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .cvd-sd > .sd, .cvd-sd > .cvc-sd-hint { margin: 8px 10px; } }
.sd-tt-o { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Boss 02/10: Biên bản họp → việc phải làm */
.bb-huong { display: flex; gap: 8px; align-items: flex-start; }
.bb-huong svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bb-ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.bb-ds { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.bb-viec { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--card); }
.bb-viec.bo { opacity: .5; }
.bb-tich { padding-top: 10px; }
.bb-tich input { width: 18px; height: 18px; accent-color: var(--brand); }
.bb-viec-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bb-ds.gom .bb-da-o { opacity: .45; pointer-events: none; }
.bb-trich { font-size: 12.5px; color: var(--muted); font-style: italic; border-left: 3px solid var(--line); padding-left: 8px; }
.bb-gom { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: 13.5px; cursor: pointer; }
.bb-gom input { margin-top: 3px; accent-color: var(--brand); }
.bb-tao { display: flex; flex-direction: column; gap: 6px; }
.bb-tao-hang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--line-2); padding: 6px 0; }
.bb-tao-phai { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-nguyen { margin-top: 14px; }
.bb-nguyen summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.bb-vb { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; background: var(--card-2, var(--card)); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; max-height: 60vh; overflow: auto; }
@media (max-width: 640px) { .bb-viec { padding: 8px; gap: 6px; } }
/* Boss 02/10: Hoàn tác 1 bước — thanh nhỏ góc dưới bên trái (thông báo thường nằm giữa) */
.hoan-tac { position: fixed; z-index: 121; left: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 8px;
  background: var(--ink); color: var(--card); padding: 7px 8px 7px 12px; border-radius: 20px; font-size: 13px; box-shadow: var(--shadow-2); max-width: min(560px, calc(100vw - 32px)); }
.hoan-tac.hien { display: flex; }
.hoan-tac svg { width: 15px; height: 15px; flex: none; }
.hoan-tac > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hoan-tac-nut { border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: 14px; cursor: pointer; flex: none; }
.hoan-tac kbd { font: inherit; font-size: 11px; opacity: .65; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; flex: none; }
.hoan-tac-x { border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; padding: 2px; display: inline-flex; flex: none; }
@media (max-width: 760px) { .hoan-tac { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .hoan-tac kbd { display: none; } }
/* ===== Boss 02/10 (xem trên điện thoại tối 01/10) ===== */
/* Ảnh trong form hoá đơn bấm xem được: link bọc ảnh không đổi kích thước ảnh */
.hd-anh-o > a { display: block; line-height: 0; }
/* Trò chuyện: ô tìm kiếm không bị kiểu ô tìm chung (.tlv-tim: giãn hết chiều cao, xếp xuống cuối) nuốt mất danh sách */
.tnv-ds .tnv-tim { flex: none; order: 0; }
.tnv-nhom-tieu { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
/* Hoá đơn (điện thoại): dòng giá gói ngay dưới ô Gói — trước bị dải 8px của ô Gói (màu xanh khi tự điền) đè mất nửa chữ */
@media (max-width: 760px) {
  .hd-form .hd-goi-dong > .cvp-o, .hd-form .hd-goi-dong > .o-tim-chon, .hd-form .hd-goi-dong .cvp-o.tu-dien { border-bottom: 1px solid var(--line-2); }
  .hd-form .hd-goi-tt { margin-top: 0; padding-top: 8px; }
  .hd-form .cvp-o.tu-dien:not(.hd-goi-dong > .cvp-o) { border-bottom-color: var(--bg); }   /* dải ngăn giữa các ô tự điền giữ màu xám, không thành vạch xanh dày */
}
/* Bảng trên điện thoại (Dịch vụ, Kế hoạch tháng, Lịch dịp, Thư viện chiến dịch…): ô chữ dài không bị ép hẹp thành cột chữ dọc —
   giữ bề ngang tối thiểu, tối đa 3 dòng (bấm vào dòng xem đủ); bảng tự cuộn ngang */
@media (max-width: 760px) {
  table.lh-bang .cl-o { min-width: 150px; max-width: 260px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  table.lh-bang td { padding-top: 10px; padding-bottom: 10px; }
}
/* iPhone tự phóng to trang khi chạm vào ô nhập có chữ nhỏ hơn 16px (hộp Phiếu chi bị cắt bên phải) → ô nhập trên máy cảm ứng chữ 16px */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea, [contenteditable="true"] { font-size: 16px !important; }
}
/* Boss 02/10: Khách đánh giá + feedback (2 bước nhận ảnh tặng) */
.dg-huong { display: flex; gap: 8px; align-items: flex-start; }
.dg-huong svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.dg-qua { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--amber-soft); font-size: 14px; margin-bottom: 6px; }
.dg-qua.du { background: var(--green-soft); }
.dg-qua { flex-wrap: wrap; }
.dg-qua > span { flex: 1 1 200px; min-width: 0; }
.dg-qua > .btn { white-space: nowrap; margin-left: auto; }   /* Phòng chỉnh ảnh: nút "Đã in ảnh tặng" không bị bóp dọc trên điện thoại */
.dg-qua svg { width: 16px; height: 16px; flex: none; }
.dg-kq .hd-dong b { font-weight: 500; }
.dg-dan { margin-top: 10px; min-height: 96px; border: 2px dashed var(--line); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px;
  text-align: center; color: var(--muted); font-size: 14px; cursor: text; caret-color: transparent; background: var(--card); }
.dg-dan:focus { outline: none; border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.dg-dan svg { width: 22px; height: 22px; flex: none; }
.dg-dan i { font-style: normal; font-size: 12.5px; }
.dg-chon { margin-top: 8px; }
.dg-fb-anh { margin: 4px 0; }
.dg-hd .pill { margin-left: 4px; }
.dg-cu { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--card-2, #F2F2F2); border: 1px solid var(--line); font-size: 11px; color: var(--muted); }

/* ---------- Quảng cáo Facebook (boss 02/10): Tổng quan đọc từ 2 bảng QC trên Lark ---------- */
.qc-mo { margin: 0 0 12px; }
.qc-canh { display: grid; gap: 8px; }
.qc-canh > div { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.qc-canh .pill { flex: none; }
.qc-split { margin-top: 12px; }
.qc-split .table-wrap { border-top: 1px solid var(--line-2); }
.qc-tong td { font-weight: 600; border-top: 2px solid var(--line); }
.qc-bc { display: grid; gap: 8px; }
.qc-bc-dong { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.qc-bc-dong > span { flex: 1; display: flex; flex-direction: column; }
.qc-bc-dong > span i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.qc-bc-dong > b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.qc-truoc { margin: 12px 0 8px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.6; }
.qc-truoc .pill { vertical-align: 1px; }
@media (max-width: 900px) { .qc-split { grid-template-columns: minmax(0, 1fr); } }
.qc-huongdan ol { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; }
.qc-huongdan p { margin: 0; font-size: 13px; }
/* Boss 02/10: ảnh phiếu thanh toán gửi mẹ + tiến độ đơn */
.hdp-khung { background: #E9E3DD; border-radius: var(--r-md); padding: 14px 10px; margin: 8px 0; overflow-x: auto; }
.hdp .dg-qua { margin-bottom: 4px; }
.dg-td { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px; }
.dg-td li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.dg-td li.qua { color: var(--ink); }
.dg-td li.dang { color: var(--brand-ink); font-weight: 600; }
.dg-td button { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font: inherit; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; flex: none; padding: 0; }
.dg-td li.qua button { background: var(--green); border-color: var(--green); color: #fff; }
.dg-td li.dang button { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Boss 02/10: mẹ giữ chỗ chụp thêm (từ link riêng của mẹ) */
.dg-giu > summary { cursor: pointer; list-style: none; }
.dg-giu > summary::-webkit-details-marker { display: none; }
.dg-giu-ds { display: flex; flex-direction: column; }
.dg-giu-1 { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.dg-giu-1.xong { opacity: .6; }
.dg-giu-1 > div { min-width: 0; display: grid; gap: 3px; }
.dg-giu-1 .btn { flex: none; }

/* ---------- Phòng chỉnh ảnh (boss 02/10) ---------- */
.pc-the-dong { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pc-the-dong:empty { display: none; }
.pc-sang { margin-top: 8px; width: 100%; justify-content: flex-start; text-align: left; }
.pc-ps { display: grid; margin: 4px 0 6px; }
.pc-ps-1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pc-ps-1 > span:first-child { flex: 1 1 100%; min-width: 0; }
.pc-ps-1 > .so { margin-right: auto; }
.pc-ps-1 .so { font-variant-numeric: tabular-nums; }
.pc-ps-them { margin: 4px 0 10px; }
.pc-ps-them > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.pc-ps-o { display: grid; gap: 16px; margin-top: 14px; }
.pc-ps-o > .btn { justify-self: start; }
.qc-mo .btn-chu { padding: 0; font-size: inherit; color: var(--brand-ink); text-decoration: underline; }
.pc-drive { display: grid; gap: 10px; margin: 8px 0 6px; }
.pc-drive[hidden] { display: none; }
.pc-drive > .btn { justify-self: start; }
.pc-chon .hang-nut { flex-wrap: wrap; }
.pc-chon-ds { display: grid; margin-top: 8px; }
.pc-chon-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pc-chon-1 b { font-variant-numeric: tabular-nums; min-width: 48px; }
.pc-chon-1 .cl-o { flex: 1 1 100%; color: var(--ink-2, inherit); }
/* Phiếu in từng hoá đơn + gửi lab theo lô (boss 02/10) */
.pc-in { display: grid; gap: 8px; margin: 6px 0 4px; }
.pc-in-1 { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg, transparent); }
.pc-in-1.da { opacity: .78; }
.pc-in-o { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.3fr) 56px; gap: 6px; }
.pc-in-1 input, .pc-in-1 select { width: 100%; min-width: 0; font: inherit; font-size: 14px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: inherit; }
@media (pointer: coarse) { .pc-in-1 input, .pc-in-1 select { font-size: 16px; } }
@media (max-width: 520px) { .pc-in-o { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pc-in-chan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-in-chan .icon-btn, .pc-in-chan .btn { margin-left: auto; }
.pc-gi { display: grid; gap: 8px; margin: 8px 0 12px; }
.pc-gi-1 { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; line-height: 1.45; }
.pc-gi-1 input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.pc-gi-1 .hang-nut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-lo-chu { width: 100%; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card, #fff); color: inherit; resize: vertical; }
a.btn { text-decoration: none; }
.pc-cl td, .pc-cl th { white-space: nowrap; }
.pc-cl td.so { text-align: right; font-variant-numeric: tabular-nums; }
.pc-cl-dau { max-width: 260px; margin-bottom: 8px; }
.pc-khach { margin-bottom: 12px; }
.pc-khach-dau { margin-top: 0; }
/* Quét chất lượng bộ ảnh + Studio lọc sẵn */
.ql-thanh { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 8px; }
.ql-thanh i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s ease; }
.ql-tong { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.ql-o { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.ql-o b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.ql-o span { display: block; font-size: 13px; }
.ql-o i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.ql-o.blue b { color: var(--blue); } .ql-o.red b { color: var(--red); } .ql-o.purple b { color: var(--purple); } .ql-o.green b { color: var(--green); }
.ql-tab { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ql-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ql-anh { position: relative; border: 0; padding: 0; background: var(--card-2, #f3f3f3); border-radius: 8px; overflow: hidden; cursor: pointer; text-align: left; font: inherit; }
.ql-anh img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ql-anh span { display: block; font-size: 11.5px; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-anh em { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--green); color: #fff; }
.ql-anh.bo img { opacity: .38; filter: grayscale(.6); }
.ql-anh.bo em { background: var(--red); }
/* Make freelancer: ảnh đại diện (boss 02/10, mẹ thấy khi đánh giá ekip) */
.mk-anh { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.mk-ten { display: flex; align-items: center; gap: 8px; }
/* Lọc ảnh theo mã (boss 02/10) */
.lm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 1100px; }
.lm > * { min-width: 0; }
.lm-buoc h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.lm-buoc h3 i { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; flex: none; }
.lm-buoc h3 i svg { width: 15px; height: 15px; }
.lm-tuy { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0 4px; font-size: 13.5px; }
.lm-tuy label { display: inline-flex; gap: 6px; align-items: center; }
.lm-tuy select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: inherit; }
.lm-drive { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 8px 0; }
@media (max-width: 560px) { .lm-drive { grid-template-columns: 1fr; } }
.lm-ma { width: 100%; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card, #fff); color: inherit; resize: vertical; }
@media (pointer: coarse) { .lm-ma { font-size: 16px; } }
.lm-bang tr.lm-khong td { background: var(--red-soft, #fdecec); }
.lm-bang tr.lm-nhieu td { background: var(--amber-soft, #fff6e5); }
.lm-tep { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.dv-gi th { white-space: normal; min-width: 110px; max-width: 190px; vertical-align: top; }
.dv-gi td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ql-chep { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 10px; }
/* Nhắc mẹ chọn ảnh (boss 02/10) */
.nhac-khu { margin-bottom: 12px; }
.nhac-1 { padding: 10px 0; border-bottom: 1px solid var(--line); }
.nhac-1:last-child { border-bottom: 0; }
.nhac-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nhac-tin summary { cursor: pointer; font-size: 13px; color: var(--blue); margin: 6px 0; }
.nhac-tin pre { white-space: pre-wrap; font: inherit; font-size: 13.5px; background: var(--card-2); padding: 10px; border-radius: var(--r-md); margin: 0; }
/* Boss 03/10: bảng 7 nấc nhắc mẹ + mẫu tin cho nhân sự xem */
.nhac-mau { margin-top: 12px; }
.nhac-mau > summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.nhac-mau > summary svg { width: 16px; height: 16px; }
.nhac-mau-ds { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nhac-mau-1 { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.nhac-mau-dau { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.nhac-mau-tin { min-width: 0; }
.nhac-mau-tin span { font-size: 12px; color: var(--muted); }
.nhac-mau-tin pre { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--card-2); padding: 8px 10px; border-radius: var(--r-md); margin: 4px 0 0; }
@media (max-width: 640px) { .nhac-mau-1 { grid-template-columns: 1fr; } }
/* Boss 03/10: Nhắc lần lượt */
.nhac-khu h4 .nhac-luot-nut { margin-left: 8px; }
.nhac-luot .nhac-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nhac-luot-tin { white-space: pre-wrap; font: inherit; font-size: 14px; background: var(--card-2); padding: 10px 12px; border-radius: var(--r-md); margin: 10px 0; }
.nhac-luot-hd { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: grid; gap: 2px; }
/* Điện thoại: nút chính "Đã nhắc" chiếm cả hàng trên, 2 nút phụ chia đôi hàng dưới */
@media (max-width: 640px) {
  .hop:has(.nhac-luot) .hop-chan { flex-wrap: wrap; }
  .hop:has(.nhac-luot) .hop-chan .grow { display: none; }
  .hop:has(.nhac-luot) .hop-chan .btn { flex: 1 1 40%; justify-content: center; }
  .hop:has(.nhac-luot) .hop-chan .btn-primary { order: -1; flex-basis: 100%; }
  /* Xem đơn / phiếu chi (boss 17/10): 5 nút chân hộp tràn ngang → xuống hàng, nút chính "Duyệt & thanh toán" chiếm cả hàng trên */
  .hop:has(.dt-ct) .hop-chan { flex-wrap: wrap; }
  .hop:has(.dt-ct) .hop-chan .grow { display: none; }
  .hop:has(.dt-ct) .hop-chan .btn-primary { order: -1; flex-basis: 100%; justify-content: center; }
}
.nhac-tc { margin-bottom: 12px; }
.kb-het { padding: 32px; text-align: center; color: var(--muted); }
/* Thư mục của mẹ (Phòng chỉnh ảnh) */
.pc-thu { display: grid; gap: 6px; margin: 4px 0 10px; }
.pc-thu-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.pc-thu-1 > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; flex: 1 1 100%; }
.pc-thu-1 > span svg { width: 16px; height: 16px; }
.pc-duong { flex: 1 1 100%; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: var(--card-2); overflow-wrap: anywhere; }
/* Cửa sổ đơn Phòng chỉnh ảnh (boss 02/10: chữ đang rít, tiến độ chưa đẹp, mở rộng cho nhân sự dễ dùng) — rộng hơn, 2 cột trên máy tính, mỗi khu một thẻ */
.lh-ngan.pc-ngan { width: min(1240px, calc(100vw - 40px)); }
.pc-ngan .cln-than { padding: 16px 20px 28px; }
.pc-luoi { display: grid; gap: 16px; }
@media (min-width: 1100px) { .pc-luoi { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; } }
.pc-cot { display: grid; gap: 16px; min-width: 0; }
.pc-khoi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; line-height: 1.55; }
.pc-khoi > .sd-h4:first-child, .pc-khoi .pc-khach-dau { margin-top: 0; }
.pc-ngan .sd-h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; margin: 22px 0 10px; }
.pc-ngan .hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pc-ngan .dg-qua { margin: 12px 0; padding: 12px 14px; line-height: 1.5; }
.pc-ngan .cell-sub { line-height: 1.6; }
.pc-ngan .hd-dong { padding: 9px 0; }
.pc-ngan .pc-thu { gap: 8px; }
.pc-ngan .pc-thu-1 { padding: 10px 12px; }
/* Tiến độ (boss 02/10): quy trình nối nhau ngang hết bề rộng, bước xong xanh lá + ngày giờ + người, bước hiện tại tô đỏ thương hiệu có vòng;
   dưới là "Việc cần làm bây giờ" + việc nào làm xong thì đơn tự sang bước sau. Màn hẹp chuyển thành dọc */
.pc-tien-do { margin-bottom: 16px; }
.pc-td-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pc-td-dau .sd-h4 { margin: 0; }
.pc-flow { list-style: none; margin: 18px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.pc-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; min-width: 0; }
.pc-flow li:not(:first-child)::before { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 3px; background: var(--line); }
.pc-flow li.qua::before, .pc-flow li.dang::before { background: var(--green); }
.pc-flow-so { position: relative; z-index: 1; width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-flow li.qua .pc-flow-so { background: var(--green); border-color: var(--green); color: #fff; }
.pc-flow li.dang .pc-flow-so { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-soft); }
.pc-flow b { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.3; font-weight: 500; color: var(--muted); text-wrap: balance; }
.pc-flow li.qua b { color: var(--ink); }
.pc-flow li.dang b { color: var(--brand-ink); font-weight: 700; }
.pc-flow i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.pc-flow i em { display: block; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-viec { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 12px; background: var(--card-2); }
.pc-viec.xong { border-left-color: var(--green); }
.pc-viec-chu { min-width: 0; display: grid; gap: 3px; }
.pc-viec-chu small { font-size: 12px; color: var(--muted); }
.pc-viec-chu b { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.pc-viec-chu span { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--green); line-height: 1.45; }
.pc-viec-chu span svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pc-viec-nut { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; flex: none; max-width: 48%; }
.pc-viec-nut .cell-sub { flex-basis: 100%; text-align: right; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.pc-viec-nut .cell-sub svg { width: 14px; height: 14px; color: var(--green); }
.pc-tay { margin-top: 10px; }
.pc-tay summary { cursor: pointer; font-size: 13px; color: var(--muted); width: max-content; }
.pc-tay .hang-nut { margin: 8px 0 0; }
.pc-nhan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-nhan svg { width: 15px; height: 15px; }
.pc-luot { display: grid; gap: 6px; margin-top: 8px; }
.pc-luot > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: var(--card-2); }
.pc-ns-ngay { display: grid; gap: 6px; }
.pc-ns-ngay > div { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.pc-ns-ngay b { width: 48px; flex: none; }
.pc-xong { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-basis: 100%; justify-content: flex-end; }
.pc-xong .cvp-o { flex: 1 1 260px; margin: 0; min-width: 0; }
.pc-xong .cvp-o.loi input { border-color: var(--red); }
.pc-fb { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pc-fb .dg-dan { min-height: 80px; }
@media (max-width: 860px) {
  .pc-flow { grid-template-columns: minmax(0, 1fr); margin: 14px 0; }
  .pc-flow li { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 12px; align-items: start; text-align: left; padding: 0 0 12px; }
  .pc-flow li::before { display: none; }
  .pc-flow li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 35px; bottom: 0; width: 3px; background: var(--line); }
  .pc-flow li.qua::after { background: var(--green); }
  .pc-flow-so { grid-row: span 2; }
  .pc-flow b { margin-top: 7px; font-size: 14px; }
  .pc-flow i { margin-top: 1px; font-size: 12px; }
  .pc-flow i em { display: inline; }
  .pc-flow i em::before { content: " · "; }
  .pc-viec { flex-direction: column; align-items: stretch; }
  .pc-viec-nut { max-width: none; justify-content: flex-start; }
  .pc-viec-nut .cell-sub { justify-content: flex-start; text-align: left; }
}
@media (max-width: 760px) { .lh-ngan.pc-ngan { width: 100vw; } .pc-ngan .cln-than { padding: 12px 12px 24px; } .pc-khoi { padding: 14px; } }

/* Đẩy chiến dịch lên Dự án (boss 02/10) */
.gv-day { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.gv-day > input { width: 18px; height: 18px; flex: none; }
.gv-day .cvp-o { flex: 1; margin: 0; }

.dt-qr-hs { display: block; width: 200px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; margin: 4px 0; }

/* ==================== Đang tải (boss 03/10, như 1O) ==================== */
/* Vòng xoay nhỏ giữa thanh trên khi web đang chờ dữ liệu */
.tai-xoay { position: fixed; top: 16px; left: 50%; z-index: 140; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: var(--card); box-shadow: 0 2px 10px rgba(29,35,46,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }
.tai-xoay::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--brand); animation: tai-xoay .7s linear infinite; }
body.dang-tai .tai-xoay { opacity: 1; }
@keyframes tai-xoay { to { transform: rotate(360deg); } }
/* Vạch chạy dưới hàng tab của chuông */
.noti-tabs { position: relative; }
body.dang-tai .noti-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden;
  background: linear-gradient(90deg, transparent 0, var(--brand) 40%, var(--brand) 60%, transparent 100%) 0 0 / 40% 100% no-repeat; animation: tai-vach 1s ease-in-out infinite; }
@keyframes tai-vach { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* Khung xám chạy trượt thay chữ "Đang tải…" */
.cho-tai { color: var(--muted); font-size: 12.5px; }
.cho-tai::after { content: ""; display: block; height: 70px; margin-top: 8px; border-radius: 8px;
  background: linear-gradient(100deg, var(--card-2) 30%, var(--line) 50%, var(--card-2) 70%) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 18px, transparent 18px 26px, #000 26px 44px, transparent 44px 52px, #000 52px 70px);
          mask: linear-gradient(#000 0 18px, transparent 18px 26px, #000 26px 44px, transparent 44px 52px, #000 52px 70px);
  animation: tai-truot 1.3s ease-in-out infinite; }
@keyframes tai-truot { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tai-xoay::after, .cho-tai::after, body.dang-tai .noti-tabs::after { animation-duration: 3s; } }

/* Boss 03/10: nút Xoá ở từng thông báo (chỉ bấm được khi đã đọc / đã trả lời) */
.noti-nut-hang { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.noti-nut-hang .reply { margin-top: 0; }
.noti-xoa { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: var(--r-sm); width: 26px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.noti-xoa svg { width: 13px; height: 13px; }
.noti-xoa:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.noti-xoa:disabled { opacity: .35; cursor: not-allowed; }
/* Boss 03/10: Trang chủ "VietUp Office nhắc hôm nay" (việc máy tự nhắc, thay chuông) */
.tc-nhac { margin-bottom: 14px; }
.tc-nhac .card-head h3 { display: flex; align-items: center; gap: 6px; }
.tc-nhac .card-head h3 svg { width: 16px; height: 16px; color: var(--brand); }
.tc-nhac-ds { display: flex; flex-direction: column; }
.tc-nhac-1 { display: flex; align-items: center; gap: 10px 14px; padding: 10px 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.tc-nhac-1.tre { box-shadow: inset 3px 0 0 var(--red); }
.tc-nhac-chu { flex: 1 1 280px; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.tc-nhac-nut { display: flex; gap: 6px; flex-wrap: wrap; }

/* Boss 04/10: lịch tháng trên điện thoại như app Lark — chạm ngày mở bảng ca ngay dưới tuần, nút + nổi thêm lịch */
.ll-mb-cong { display: none; }
/* Bảng ca của ngày dưới tuần: máy tính cũng dùng (boss 05/10 bỏ chế độ Ngày / Tuần) */
.ll-thang .ll-o.chon-mb { background: var(--brand-soft); }
.ll-thang.co-bang { height: auto; grid-template-rows: none; grid-auto-rows: auto; }
.ll-thang.co-bang > .ll-o { min-height: 112px; max-height: 150px; }
.ll-mb-bang { grid-column: 1 / -1; background: var(--card-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 14px 10px; }
.ll-mb-dau { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 6px; font-size: 14px; }
.ll-mb-sk { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 2px; font: inherit; cursor: pointer; border-radius: 8px; }
.ll-mb-sk:hover { background: var(--card); }
.ll-mb-sk .cham { flex: none; width: 9px; height: 9px; border-radius: 2px; margin-top: 6px; }
.ll-mb-sk span { display: flex; flex-direction: column; min-width: 0; }
.ll-mb-sk b { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mb-sk small { font-size: 12.5px; color: var(--muted); }
.ll-mb-trong { width: 100%; border: 0; background: none; padding: 14px 0; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.ll-mb-trong b { color: var(--blue); font-weight: 600; }
@media (max-width: 640px) {
  .ll-mb-bang { grid-column: 1 / -1; background: var(--card-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 12px 10px; }
  .ll-mb-dau { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 6px; font-size: 14px; }
  .ll-mb-sk { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 2px; font: inherit; cursor: pointer; }
  .ll-mb-sk .cham { flex: none; width: 9px; height: 9px; border-radius: 2px; margin-top: 6px; }
  .ll-mb-sk span { display: flex; flex-direction: column; min-width: 0; }
  .ll-mb-sk b { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ll-mb-sk small { font-size: 13px; color: var(--muted); }
  .ll-mb-trong { width: 100%; border: 0; background: none; padding: 18px 0; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
  .ll-mb-trong b { color: var(--blue); font-weight: 600; }
  .ll-mb-cong { display: flex; position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: 54px; height: 54px; border-radius: 50%; border: 0;
    background: var(--blue); color: #fff; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(24,119,242,.35); cursor: pointer; }
  .ll-mb-cong svg { width: 26px; height: 26px; }
}
/* Boss 04/10: phụ thu cuối tuần — mục riêng trong hoá đơn và lên lịch chụp (cùng kiểu dòng dịch vụ thêm) */
.hd-ptct, .lc-ct:not(:empty) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-top: 8px; border: 1px dashed var(--green); border-radius: var(--r-md, 10px); background: var(--green-soft, #EAF7EF); }
.hd-ptct .hd-dv-ten, .lc-ct > span:first-child { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.hd-ptct.bo { border-color: var(--line); background: var(--card-2); }
.hd-ptct .hd-dv-gia input, .lc-ct .hd-dv-gia input { width: 96px; border: 0; outline: 0; font: inherit; text-align: right; background: none; }

/* Phòng chỉnh ảnh — khung đơn gọn (boss 04/10): việc cần làm nổi khung, phần xem thu gọn */
.pc-ngan .cln-than { display: grid; gap: 14px; align-content: start; }
.pc-nhanh { margin: 14px 0 0; }
.pc-can { border: 2px solid var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); }
.pc-can-nhan { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.pc-gon-ds { display: grid; gap: 8px; }
.pc-gon { padding: 0; }
.pc-gon > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; cursor: pointer; list-style: none; }
.pc-gon > summary::-webkit-details-marker { display: none; }
.pc-gon > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1; }
.pc-gon[open] > summary::before { content: "−"; }
.pc-gon > summary b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pc-gon-tom { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-gon-than { padding: 0 18px 16px; }
.pc-thu-1.thieu { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.pc-thu-1.thieu > span::after { content: "Cần điền"; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--brand); }
.pc-ghi-me { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--amber, #d97706) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--amber, #d97706) 35%, transparent); }
.pc-ghi-me > b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.pc-ghi-me > div { display: grid; grid-template-columns: minmax(70px, auto) 1fr; gap: 10px; font-size: 13.5px; }
.pc-ghi-me > div span { white-space: pre-wrap; }
.pc-link-anh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.pc-link-anh > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; flex: 1 1 auto; }
.pc-link-anh i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--brand); }
.pc-link-anh.thieu { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.pc-link-anh .pc-drive { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-link-anh .pc-drive[hidden] { display: none; }
.pc-link-anh .pc-drive .cvp-o { flex: 1 1 260px; }
.pc-ten-tm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--bg); }
.pc-ten-tm > span { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.pc-ten-tm i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.pc-ten-tm code { font-size: 14px; padding: 5px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); user-select: all; word-break: break-all; }
.noti-phan { margin: 10px 14px 0; padding: 8px 0 2px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* Boss 05/10: mọi ảnh bấm xem được có con mắt ở góc (không cần sửa từng trang) */
a[href]:has(> img) { position: relative; }
a[href]:has(> img)::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: rgba(20, 22, 26, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 13px no-repeat; }
a[href]:has(> img):has(.pn-mat)::after { display: none; }
.kb-dau-hex { border-bottom: 0; background: var(--kb-hex); color: var(--kb-chu); }
.kb-dau-hex b { color: var(--kb-chu); font-size: 14.5px; font-weight: 800; letter-spacing: .01em; }
.kb-dau-hex span { color: var(--kb-chu); opacity: .85; font-weight: 600; }
.pill.pk-the { background: color-mix(in srgb, var(--pk) 16%, transparent); color: color-mix(in srgb, var(--pk) 80%, var(--ink)); }
.pill.pk-the::before { background: var(--pk); }
.nhac-tu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); }
.nhac-tu.bat { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 7%, var(--card)); }
.nhac-tu > b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.nhac-tu > .cell-sub { flex: 1 1 320px; }
.nhac-tu > details { flex: 1 1 100%; }
.nhac-mau-d { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; }
.hd-ai-bill { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.hd-ai-bill .cho { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.hd-ai-bill .khop, .hd-ai-bill .lech { padding: 8px 12px; border-radius: var(--r-md); border: 1px solid; }
.hd-ai-bill .khop { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 8%, var(--card)); color: var(--ink); }
.hd-ai-bill .khop > b { color: var(--green); }
.hd-ai-bill .lech { border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 9%, var(--card)); }
.hd-ai-bill .lech > b { color: var(--amber); }
.hd-ai-bill ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px; }
.hd-ai-bill li.sai { color: var(--red); }
.hd-ai-bill li i { color: var(--muted); font-style: normal; }
/* Boss 05/10: ảnh xoá được — nút × góc trên (dùng chung) */
.anh-x { position: relative; display: inline-block; }
.anh-x > button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); font-size: 14px; line-height: 22px; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.anh-x > button:hover { background: var(--red); color: #fff; }
.bt-sua-anh { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.bt-sua-anh img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.bt-sua-tep { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; max-width: 180px; }
/* Boss 05/10: nút cần bấm tiếp nhấp nháy nhẹ */
@keyframes nhayNut { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent); } }
.btn.nhay { animation: nhayNut 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn.nhay { animation: none; outline: 2px solid var(--brand); outline-offset: 2px; } }
.pc-tin-me textarea { font-size: 14px; line-height: 1.55; }
/* Boss 05/10: mẹ nhắn mã ảnh qua tin → nhân sự dán mã tay */
.pc-chon-tay{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;margin:8px 0;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--card);font-size:13.5px}
.pc-chon-tay>span{flex:1 1 220px;min-width:0}
.pc-chon-tay svg{flex:none}
/* Boss 06/10: Chốt lương & báo lương + phiếu lương nhân sự */
.cl { display: grid; gap: 14px; }
.cl-dau { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-dau .cvp-o { min-width: 140px; }
.cl-tong { display: grid; } .cl-tong span { font-size: 12px; color: var(--muted); } .cl-tong b { font-size: 22px; }
.cl-khoi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 8px; background: var(--card); }
.cl-khoi .sd-h4 { margin: 0; }
.cl-o-hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-o-hang .cvp-o { flex: 1 1 140px; min-width: 0; }
.cl-lai { margin: 0; font-size: 13.5px; line-height: 1.6; }
.cl-lai .do, .cl-k.tru b { color: var(--red, #dc2626); }
.cl-ds { display: grid; gap: 12px; }
.cl-the { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--card); }
.cl-the-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cl-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.cl-k-ds { display: grid; gap: 3px; font-size: 13px; }
.cl-k { display: flex; justify-content: space-between; gap: 10px; }
.cl-k span { color: var(--muted); min-width: 0; }
.cl-k.tong { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; font-size: 15px; }
.cl-k.tong span, .cl-k.nhan span { color: inherit; font-weight: 600; }
.cl-k.nhan { border-top: 2px solid var(--line); padding-top: 4px; margin-top: 2px; font-size: 16px; }
.cl-o { display: grid; gap: 8px; align-content: start; }
.cl-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
@media (max-width: 760px) { .cl-cot { grid-template-columns: 1fr; } }
.phieu-luong .pl-tong { display: grid; justify-items: center; padding: 10px 0 4px; }
.phieu-luong .pl-tong span { font-size: 13px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.phieu-luong .pl-tong b { font-size: clamp(30px, 8vw, 44px); line-height: 1.15; color: var(--brand, #c2410c); }
.phieu-luong .pl-nhan { display: flex; justify-content: center; gap: 8px; align-items: baseline; margin-bottom: 14px; font-size: 15px; }
.phieu-luong .pl-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.phieu-luong h4 { margin: 0 0 6px; font-size: 13.5px; }
.pl-dong { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.pl-dong span { display: grid; min-width: 0; } .pl-dong i { font-size: 12px; color: var(--muted); font-style: normal; }
.pl-dong.tru b { color: var(--red, #dc2626); }
.pl-nx { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--brand, #c2410c) 7%, var(--card)); }
.pl-nx p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.cl-ai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; background: color-mix(in srgb, var(--blue, #2563eb) 8%, var(--card)); }
.cl-ai span { flex: 1 1 200px; min-width: 0; }
.cl-boss { background: color-mix(in srgb, var(--amber, #d97706) 8%, var(--card)); }
.pl-tang { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--green, #16a34a) 35%, transparent); background: color-mix(in srgb, var(--green, #16a34a) 7%, var(--card)); font-size: 13.5px; line-height: 1.55; }
.pl-tang > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pl-tang p { margin: 6px 0; } .pl-tang ol { margin: 4px 0 6px; padding-left: 20px; } .pl-tang li { margin: 3px 0; }
.cl-ck, .pl-ck { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: 13px; }
.cl-ck.co { border-style: solid; border-color: color-mix(in srgb, var(--green, #16a34a) 40%, transparent); }
.cl-ck span { flex: 1 1 160px; min-width: 0; }
.cl-ck img, .pl-ck img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; background: var(--line-2); }
.pl-ck { margin: 10px 0; } .pl-ck img { width: 96px; height: 96px; }
.pl-giu { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--blue, #2563eb) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue, #2563eb) 25%, transparent); }
.pl-giu span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.pl-giu b { font-size: 18px; }
.pl-giu i { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--muted); }
/* Boss 06/10: KPI tháng của cả team trên Trang chủ */
.kt { margin-bottom: 14px; }
.kt .card-head h3 { display: inline-flex; align-items: center; gap: 6px; }
.kt-show { display: grid; gap: 6px; margin-bottom: 12px; }
.kt-show > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.kt-show span { color: var(--muted); font-size: 13px; }
.kt-show b { font-size: 26px; } .kt-show b i { font-style: normal; font-size: 15px; color: var(--muted); font-weight: 500; }
.kt-thanh { position: relative; height: 6px; border-radius: 99px; background: var(--line-2, #eef0f4); overflow: visible; margin-top: 4px; }
.kt-thanh i { display: block; height: 100%; border-radius: inherit; background: var(--amber, #d97706); }
.kt-thanh.dat i { background: var(--green, #16a34a); } .kt-thanh.pf i { background: var(--blue, #2563eb); } .kt-thanh.pf.dat i { background: var(--green, #16a34a); }
.kt-thanh.to { height: 10px; } .kt-thanh em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink, #222); opacity: .5; }
.kt-ds { display: grid; gap: 8px; margin-bottom: 8px; }
.kt-dong { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(60px, .6fr) minmax(110px, 1fr) minmax(130px, 1.2fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.kt-dong.toi { border-color: color-mix(in srgb, var(--brand, #c2410c) 45%, transparent); background: color-mix(in srgb, var(--brand, #c2410c) 4%, var(--card)); }
.kt-o { min-width: 0; font-size: 13px; } .kt-o b { font-size: 16px; } .kt-o > span:not(.kt-nhan) { color: var(--muted); }
.kt-o i { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.kt-nhan { display: block; font-size: 11.5px; color: var(--muted); }
.kt-o .btn { margin-top: 6px; }
.kt-dat-dong { display: grid; grid-template-columns: minmax(110px, 1fr) 1fr 1fr; gap: 8px; align-items: center; margin-top: 8px; }
@media (max-width: 640px) { .kt-dong { grid-template-columns: 1fr 1fr; } .kt-ten { grid-column: 1 / -1; } }
.cl-chon { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; user-select: none; }
.cl-chon:has(input:checked) { border-color: var(--brand, #c2410c); background: color-mix(in srgb, var(--brand, #c2410c) 8%, var(--card)); font-weight: 600; }
/* /tuan-sau việc 2: nhắc bật thông báo ở Trang chủ */
.push-nhac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--blue, #2563eb) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue, #2563eb) 25%, transparent); font-size: 13.5px; }
.push-nhac span { flex: 1 1 220px; min-width: 0; }
.cl-qr { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.cl-qr img, .cl-qr-trong { width: 110px; height: 110px; object-fit: contain; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: none; border: 1px solid var(--line-2); }
.cl-qr > div { display: grid; gap: 3px; min-width: 0; } .cl-qr b { font-size: 20px; } .cl-qr .btn { justify-self: start; margin-top: 4px; }

@media (max-width: 640px) { .bt-tieu-de { font-size: 17px; } }
.bt-sua-them { margin-top: 8px; }
/* Boss 06/10: lịch đăng bài — kéo thả đổi thứ tự ảnh */
.ld-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ld-ds .ld-o { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--line-2, #eef0f4); cursor: grab; border: 2px solid transparent; padding: 0; min-height: 0; display: block; }
.ld-ds .ld-o.keo { opacity: .45; border-color: var(--brand, #c2410c); }
.ld-ds .ld-o img, .ld-ds .ld-o video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ld-ds .ld-so { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700; border-radius: 99px; min-width: 22px; height: 22px; display: grid; place-items: center; }
.ld-x { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
/* Nhân sự 16/10: tiến độ tải ngầm lên Lark ngay khi chọn file */
.ld-pt { position: absolute; left: 32px; top: 6px; max-width: calc(100% - 64px); overflow: hidden; white-space: nowrap; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; height: 22px; padding: 0 7px; display: grid; place-items: center; }
.ld-pt.xong { background: var(--green, #16a34a); }
.ld-pt.loi { background: var(--red, #dc2626); }
.ld-mui { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 6px; }
.ld-mui button { width: 28px; height: 24px; border-radius: 6px; border: 0; background: rgba(255,255,255,.9); font-size: 16px; font-weight: 700; cursor: pointer; }
.ld-mui button:disabled { opacity: .35; cursor: default; }
/* Boss 06/10: số liệu trong ngày ở báo cáo tổng */
.pn-so-ngay { border: 1px solid color-mix(in srgb, var(--blue, #2563eb) 30%, transparent); background: color-mix(in srgb, var(--blue, #2563eb) 6%, var(--card)); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; }
.pn-so-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-so-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pn-so-o > div { background: var(--card); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.pn-so-o span { font-size: 12px; color: var(--muted); } .pn-so-o b { font-size: 17px; } .pn-so-o i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pn-so-ct summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.pn-so-ca { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.pn-so-ca i { font-style: normal; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Boss 06/10: Marketing → Profile cá nhân */
.pf-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pf-1 { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--card); display: grid; gap: 6px; }
.pf-1.toi { border-color: color-mix(in srgb, var(--brand, #c2410c) 45%, transparent); }
.pf-1 b { font-size: 22px; } .pf-1 b span { font-size: 14px; color: var(--muted); font-weight: 500; }
.pf-dau .cvp-o { flex: 0 0 180px; }
.bao-402 { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 99999; background: #b91c1c; color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.hd-ngay-co-dinh input { background: var(--line-2, #f1f2f5); color: var(--muted); cursor: default; }

/* Boss 08/10: trạng thái máy lọc ảnh trong khung "Ảnh mẹ chọn" — chữ chảy liền một khối (không chia cột như thanh link) */
.pc-link-anh.pc-may > span { display: block; line-height: 1.55; }
.pc-link-anh.pc-may > span svg { vertical-align: -3px; margin-right: 4px; }
.pc-link-anh.pc-may code { white-space: normal; word-break: break-word; }
/* Boss 10/10: trang chủ — mọi khối có tay kéo ⠿ (kéo thả đổi chỗ) + nút — thu gọn */
.tck-khoi { position: relative; margin-bottom: 14px; width: 100%; box-sizing: border-box; }
.tck-khoi > .card { margin: 0 !important; }
.tc-cu { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; align-items: center; z-index: 2; }
.tc-nam { cursor: grab; user-select: none; padding: 2px 6px; border-radius: 6px; color: var(--muted); font-size: 15px; line-height: 1; }
.tc-nam:hover { background: var(--line-2); color: var(--ink); }
.tc-nam:active { cursor: grabbing; }
.tck-khoi-gon .card-body { padding: 10px 70px 10px 16px; }
.tha-den { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 12px; }
.tc-vung-dau, .tc-cot-trai, .tc-cot-phai { min-height: 24px; }
.tc-vung-dau { display: block; width: 100%; align-self: stretch; }
.tck-khoi > .card { width: 100%; box-sizing: border-box; }
.kt .card-body[style*="grid"] { padding-top: 4px !important; }
/* Boss 10/10: phần trên trang chủ 2 khung — trái nhắc + KPI, phải To do list (cao bằng khung trái) */
.tc-tren { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; width: 100%; margin-bottom: 14px; }
.tc-tren > .tc-vung-dau > .tck-khoi:last-child { margin-bottom: 0; }
.tc-vung-dau-phai { display: flex !important; flex-direction: column; }
.tc-vung-dau-phai > .tck-khoi:only-child { flex: 1; display: flex; }
.tc-vung-dau-phai > .tck-khoi:only-child { align-items: stretch; }
.tc-vung-dau-phai > .tck-khoi:only-child > .card { flex: 1; align-self: stretch; }
@media (max-width: 900px) { .tc-tren { grid-template-columns: 1fr; } }
/* Boss 10/10: Bảng điều hành dạng tab, thẻ số to / đậm / màu */
.dh-dau { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dh-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dh-tab { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.dh-tab:hover { border-color: var(--brand); color: var(--brand); }
.dh-tab.dang { background: var(--brand); border-color: var(--brand); color: #fff; }
.dh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.dh-luoi-lon { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dh-o, .dh-lon { border: 1px solid var(--line-2); border-left: 5px solid var(--muted); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; background: var(--card); }
.dh-lon { padding: 16px 18px; gap: 6px; }
.dh-nhan { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.dh-so { font-size: 24px; font-weight: 800; line-height: 1.1; }
.dh-lon .dh-so { font-size: 32px; }
.dh-phu { font-size: 12.5px; color: var(--muted); }
.dh-phu b { color: inherit; }
.dh-green { border-left-color: #16a34a; } .dh-green .dh-so, .dh-green .dh-phu b { color: #16a34a; }
.dh-amber { border-left-color: #f59e0b; } .dh-amber .dh-so, .dh-amber .dh-phu b { color: #d97706; }
.dh-red { border-left-color: #dc2626; } .dh-red .dh-so, .dh-red .dh-phu b { color: #dc2626; }
.dh-blue { border-left-color: #2563eb; } .dh-blue .dh-so { color: #2563eb; }
.dh-purple { border-left-color: #8e4ec6; } .dh-purple .dh-so { color: #8e4ec6; }
.dh-thanh { height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.dh-thanh i { display: block; height: 100%; background: currentColor; border-radius: 99px; }
.dh-green .dh-thanh i { background: #16a34a; } .dh-amber .dh-thanh i { background: #f59e0b; } .dh-red .dh-thanh i { background: #dc2626; }
.dh-chu { margin-top: 10px; } .dh-chu summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
/* Họp tuần (boss 15/10): mỗi người 1 thẻ màu, ô chỉ số có thanh so sánh */
.ht-chon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ht-chon b { font-size: 15px; }
.ht-nhom { margin: 6px 0 0; font-size: 16px; } .ht-nhom span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ht-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.ht-the { min-width: 0; border: 1px solid var(--line); border-top: 5px solid var(--muted); border-radius: 14px; padding: 12px 14px; background: var(--card); display: grid; gap: 10px; }
.ht-the.ht-xanh { border-top-color: var(--green); } .ht-the.ht-vang { border-top-color: var(--amber); } .ht-the.ht-do { border-top-color: var(--red); background: linear-gradient(var(--red-soft), var(--card) 70px); }
.ht-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.ht-nhan { border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ht-nhan-xanh { background: var(--green-soft); color: var(--green); } .ht-nhan-vang { background: var(--amber-soft); color: var(--amber); } .ht-nhan-do { background: var(--red-soft); color: var(--red); }
.ht-muc { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ht-o { min-width: 0; border-radius: 10px; padding: 8px 10px; background: var(--card-2); display: grid; gap: 3px; border-left: 4px solid var(--line); }
.ht-o-xanh { border-left-color: var(--green); background: var(--green-soft); } .ht-o-do { border-left-color: var(--red); background: var(--red-soft); }
.ht-o-nhan { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.ht-o-so { font-size: 20px; font-weight: 800; line-height: 1.15; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ht-o-xanh .ht-o-so { color: var(--green); } .ht-o-do .ht-o-so { color: var(--red); }
.ht-o-phu { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.ht-thanh { display: block; height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; }
.ht-thanh i { display: block; height: 100%; background: var(--ink-2); border-radius: 99px; }
.ht-o-xanh .ht-thanh i { background: var(--green); } .ht-o-do .ht-thanh i { background: var(--red); }
.ht-mt { font-size: 11.5px; font-weight: 700; } .ht-mt.len { color: var(--green); } .ht-mt.xuong { color: var(--red); }
/* Việc hôm nay của sale (boss 16/10): 3 cột Gọi ngay / Chăm sóc / Tiềm năng */
.vs-chon { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-ai { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.vs-ai b { color: var(--muted); font-weight: 700; } .vs-ai:hover { border-color: var(--brand); color: var(--brand); }
.vs-ai.dang { background: var(--brand); border-color: var(--brand); color: #fff; } .vs-ai.dang b { color: #fff; }
.vs-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.vs-cot { min-width: 0; display: grid; gap: 8px; border-radius: 14px; padding: 10px; background: var(--card-2); border-top: 5px solid var(--muted); }
.vs-cot.vs-do { border-top-color: var(--red); } .vs-cot.vs-vang { border-top-color: var(--amber); } .vs-cot.vs-xanh { border-top-color: var(--green); }
.vs-sale { width: auto; }
.vs-chuyen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--blue-soft); }
.vs-chuyen.nhe { background: var(--card-2); }
.vs-chuyen > svg { width: 16px; height: 16px; flex: none; } .vs-chuyen > span:first-of-type { flex: 1 1 220px; min-width: 0; }
.vs-chuyen .o-chon { width: auto; }
.vs-cot { gap: 0; padding: 10px 10px 8px; }
.vs-cot-dau { margin: 0 0 6px; font-size: 16px; } .vs-cot-dau span { font-size: 13px; color: var(--muted); font-weight: 600; }
.vs-dong { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card); border-radius: 10px; margin-top: 6px; }
.vs-ttin { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vs-ten { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .vs-ten:hover { color: var(--brand); text-decoration: underline; }
.vs-ly { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-ly i { font-style: normal; color: var(--muted); font-weight: 500; }
.vs-do .vs-ly { color: var(--red); } .vs-vang .vs-ly { color: var(--amber); } .vs-xanh .vs-ly { color: var(--green); }
.vs-nut { flex: none; display: flex; gap: 4px; }
.vs-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; padding: 0; text-decoration: none; font: inherit; font-size: 13px; }
.vs-icon svg { width: 15px; height: 15px; } .vs-icon:hover { border-color: var(--brand); color: var(--brand); }
.vs-icon.goi { background: var(--red); border-color: var(--red); color: #fff; }
.vs-icon.nhan { width: auto; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.vs-them { justify-self: center; margin-top: 8px; }
.dh-bang th, .dh-bang td { text-align: center !important; }
.dh-bang th:first-child, .dh-bang td:first-child { text-align: left !important; }

/* Bảng thành tích (boss 10/10) */
.tt-hai { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tt-cot { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.tt-cot h4 { margin: 0 0 6px; font-size: 15px; }
.tt-cot ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.tt-duoc { border-left: 5px solid #16a34a; }
.tt-chua { border-left: 5px solid #f59e0b; }
.tt-rieng { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.tt-rieng summary { cursor: pointer; font-weight: 600; }
.tt-rieng p { margin: 8px 0 0; }
.dh-bang tr.tt-toi td { background: rgba(239, 68, 68, .08); font-weight: 600; }
.tt-green { color: #16a34a; } .tt-amber { color: #d97706; } .tt-red { color: #dc2626; } .tt-blue { color: var(--muted); }

/* Khách đang nói gì (Marketing, boss 09/10) */
.kng-thanh { margin-bottom: 12px; }
.kng-the { margin-top: 12px; width: 100%; box-sizing: border-box; }
.kng-luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); margin: 12px 0; }
.kng-luoi > .card { min-width: 0; }
.kng-rc, .kng-hoi { padding: 10px 0; border-bottom: 1px solid var(--line, #eee); }
.kng-rc:last-child, .kng-hoi:last-child { border-bottom: 0; }
.kng-rc-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kng-so { font-weight: 700; white-space: nowrap; }
.kng-doi { font-size: 12px; white-space: nowrap; }
.kng-doi.len { color: #c0392b; }
.kng-doi.xuong { color: #1e8e3e; }
.kng-thanh-do { height: 6px; border-radius: 3px; background: var(--line, #eee); margin: 6px 0; overflow: hidden; }
.kng-thanh-do span { display: block; height: 100%; background: var(--brand, #e58a9b); border-radius: 3px; }
.kng-trich summary { cursor: pointer; font-size: 13px; color: var(--muted, #777); }
.kng-trich p, .kng-hoi p { margin: 4px 0; overflow-wrap: anywhere; }
.kng-nho { font-size: 15px; line-height: 1.3; }
.kng-ds { margin: 0; padding-left: 18px; line-height: 1.7; }
.kng-h4 { margin: 14px 0 6px; font-size: 13px; }
.kng-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.kng-yt-luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.kng-yt { border: 1px solid var(--line, #eee); border-radius: 10px; padding: 12px; min-width: 0; }
.kng-yt p { margin: 6px 0; overflow-wrap: anywhere; }
.kng-chu { margin: 8px 2px 20px; }

/* To do list kiểu tờ giấy (boss 10/10, ảnh mẫu TO DO LIST). Khung giống các khung khác (card thường), chữ cùng bộ font web */
.vn-giay { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
.vn-tieude { margin: 0; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 26px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1; }
.vn-ngay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 12px; }
.vn-ngay span { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.vn-ngay b { flex: 1 1 60px; border-bottom: 1.5px dotted var(--muted); text-align: center; font-weight: 500; padding-bottom: 1px; }
.vn-ngay em { font-style: normal; color: var(--muted); }
.vn-luoi { flex: 1 1 auto; min-height: 170px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.vn-cot { display: flex; flex-direction: column; min-height: 0; }
.vn-nhan { border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.vn-nhan-uu { background: var(--amber-soft); border-color: var(--amber); color: var(--ink); }
.vn-dong { display: flex; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1.5px dotted var(--line); }
/* Kẻ dòng chấm kéo dài tới đáy cột (không phải ô — gõ ở dòng "Gõ việc…" hoặc bấm "+ Thêm việc") */
.vn-ke { flex: 1 1 auto; min-height: 34px; background-image: radial-gradient(circle, var(--line) 1px, transparent 1.2px); background-size: 6px 34px; background-position: 0 33px; }
.vn-them { align-self: flex-start; margin-top: 6px; border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.vn-them:hover { color: var(--brand); border-color: var(--brand); }
.vn-o-tich { position: relative; flex: none; width: 18px; height: 18px; }
.vn-o-tich input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vn-o-tich i { position: absolute; inset: 0; border: 1.5px solid var(--muted); border-radius: 4px; pointer-events: none; }
.vn-o-tich input:checked + i, .vn-o-tich i.co { background: #16a34a; border-color: #16a34a; }
.vn-o-tich input:checked + i::after, .vn-o-tich i.co::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.vn-o-tich input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.vn-chu { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Việc ưu tiên: nền vàng nhạt, viền trái cam, sao, chữ đậm — nhìn khác hẳn việc thường */
.vn-dong.uu { background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: 6px; padding-left: 8px; margin: 3px 0; border-bottom-color: transparent; }
.vn-dong.uu .vn-chu { font-weight: 600; }
.vn-dong.uu .vn-o-tich i { border-color: var(--amber); }
.vn-sao { color: var(--amber); }
.vn-dong.xong .vn-chu { text-decoration: line-through; font-style: italic; color: var(--muted); font-weight: 400; }
.vn-dong.uu.xong { background: none; border-left-color: var(--line); }
.vn-tu { font-size: 11px; color: var(--muted); }
.vn-gio { font-size: 11px; color: #16a34a; white-space: nowrap; }
.vn-nut { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 4px; line-height: 1; }
.vn-nut:hover { color: var(--brand); }
.vn-go { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: 6px 0; outline: none; color: inherit; }
.vn-go::placeholder { color: var(--muted); font-style: italic; }
.vn-hai-hop { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.vn-hop { border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px 10px; }
.vn-hop-ten { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.vn-hop textarea { width: 100%; box-sizing: border-box; border: 0; resize: vertical; background: transparent; font: inherit; color: inherit; outline: none;
  line-height: 28px; padding: 0; margin-top: 2px; min-height: 56px; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px); }
.vn-team summary, .vn-chan { font-size: 12px; color: var(--muted); }
.vn-team summary { cursor: pointer; }
.vn-ng { margin-top: 8px; }
.vn-chan { margin: 0; text-align: center; }
/* Việc làm trên web tự ghi (boss 16/10): mỗi loại 1 dòng đã gạch + số đếm, bấm mở xem từng việc */
details.vn-td { display: block; }
details.vn-td > summary { display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; list-style: none; }
details.vn-td > summary::-webkit-details-marker { display: none; }
.vn-dem { flex: none; font-style: normal; font-weight: 700; color: #16a34a; background: #dcfce7; border-radius: 999px; padding: 1px 8px; font-size: 12px; text-decoration: none; }
.vn-td-ds { margin: 0 0 6px 28px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.vn-td-ds li { padding: 2px 0; overflow-wrap: anywhere; }
.vn-td-ds b { color: var(--ink); font-weight: 500; }
.vn-web { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
/* Boss 10/10 "trống 2 khúc": máy tính — khung To do list KHÔNG đẩy hàng trên cao lên; cao bằng cột trái (tối thiểu 580px),
   nhiều việc thì cuộn trong danh sách. Cột trái: khung đầu giãn ra cho kín, không hở khoảng trắng */
@media (min-width: 901px) {
  .tc-vung-dau-phai { position: relative; min-height: 580px; }
  .tc-vung-dau-phai > .tck-khoi:only-child { position: absolute; inset: 0; margin: 0; }
  .tc-tren > .tc-vung-dau:not(.tc-vung-dau-phai) { display: flex; flex-direction: column; }
  .tc-tren > .tc-vung-dau:not(.tc-vung-dau-phai) > .tck-khoi:first-child { flex: 1 1 auto; display: flex; }
  .tc-tren > .tc-vung-dau:not(.tc-vung-dau-phai) > .tck-khoi:first-child > .card { flex: 1; }
}
/* Phòng chỉnh ảnh: thẻ số bấm được để lọc (boss 10/10) */
button.tile.pc-o { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.tile.pc-o:hover { border-color: var(--brand); }
button.tile.pc-o.dang { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pc-o-dang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; }

/* Trợ lý (boss 09/10): bong bóng chat góc phải dưới trên điện thoại (máy tính dùng nút Trợ lý ở cột trái); nút việc nhanh + nút gợi ý */
.ai-bong { display: none; }
@media (max-width: 860px) {
  .ai-bong { display: grid; place-items: center; position: fixed; z-index: 45; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(15,18,24,.25); cursor: pointer; }
  .ai-bong svg { width: 25px; height: 25px; }
  body.nav-open .ai-bong { display: none; }
}
.ai-nhanh { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-goiy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px;
  padding: 5px 11px; font-size: 13px; cursor: pointer; max-width: 100%; text-align: left; }
.ai-chip svg { width: 15px; height: 15px; flex: none; }
.ai-chip:hover { border-color: var(--brand); color: var(--brand-ink, var(--brand)); }
/* Báo cáo tổng: ca chưa có hoá đơn / mẹ chưa có link ảnh (boss 10/10) */
.pn-so-thieu { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--red-soft); border-left: 4px solid var(--red); font-size: 13px; display: grid; gap: 3px; }
.pn-so-du { margin-top: 8px; padding: 6px 12px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 13px; }

/* Video (boss 10/10): ghi chú người làm tự ghi (không phải boss yêu cầu) màu nhạt; hộp nhận xét của boss */
.vd-ghi.vd-ghi-nl { background: var(--card-2, #f4f5f7); }
.vd-nx { background: var(--blue-soft, #eef4ff); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px; }
.vd-nx p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Liên hệ (boss 13/10): cột Nhu cầu đủ rộng để đọc 2 dòng */
.lh-nhucau { min-width: 200px; max-width: 260px; }

/* AI đuổi khách tự học (boss 13/10): thanh tỉ lệ trả lời từng nấc */
.dk-nac { display: grid; gap: 6px; }
.dk-nac-1 { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(80px, 2fr) 44px minmax(90px, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.dk-thanh { height: 8px; border-radius: 4px; background: var(--line, #eee); overflow: hidden; }
.dk-thanh i { display: block; height: 100%; background: var(--brand, #e58a9b); }
@media (max-width: 640px) { .dk-nac-1 { grid-template-columns: 1fr 44px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #eee); } .dk-nac-1 .dk-thanh, .dk-nac-1 > .cell-sub { grid-column: 1 / -1; }
  .dk-nac-1 > :first-child { order: -2; } .dk-nac-1 > b { order: -1; text-align: right; } }   /* điện thoại: % nằm cùng dòng tên, không rớt dòng riêng */

/* Phòng chỉnh ảnh: Lịch sử hoạt động của đơn (boss 13/10: ai chuyển bước, lúc nào, có bằng tay không) */
.pc-ls-ds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.pc-ls-ds li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--bg-soft, #f6f6f8); }
.pc-ls-ds li i { font-style: normal; color: var(--muted); min-width: 92px; }

/* Đăng tuyển hôm nay (boss 17/10) */
.tdh-tab { gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.tdh-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 0; border-bottom: 1px solid var(--line-2, var(--line)); }
.tdh-dong:last-child { border-bottom: 0; }
.tdh-ten { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.tdh-nut { display: flex; flex-wrap: wrap; gap: 6px; }
.tdh-luat { margin-top: 3px; white-space: pre-line; }
.tdh-form { display: grid; gap: 10px; }
.card-head .tdh-nut { margin-left: auto; }
.bang-so th.num, .bang-so td.num { text-align: right; }
.tdh-bai { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.tdh-bn { flex: 0 1 280px; min-width: 0; }
.tdh-bn img { display: block; width: 100%; height: auto; border-radius: var(--r-md, 10px); border: 1px solid var(--line); }
.tdh-bai-chu { flex: 1 1 260px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.tdh-kho { border-top: 1px solid var(--line-2, var(--line)); padding-top: 6px; margin-top: 6px; }
.tdh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 4px 0 10px; }
.tdh-luoi figure { margin: 0; min-width: 0; }
.tdh-luoi img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md, 10px); border: 1px solid var(--line); background: var(--line-2, #eee); }
.tdh-luoi figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.tdh-cham { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
/* Boss 18/10: vòng tiến độ đơn bấm được để đổi trạng thái */
.pc-flow li.bam { cursor: pointer; }
.pc-flow li.bam:hover .pc-flow-so, .pc-flow li.bam:focus-visible .pc-flow-so { border-color: var(--brand); color: var(--brand); }
.pc-flow li.qua.bam:hover .pc-flow-so { background: var(--brand); border-color: var(--brand); color: #fff; }
.pc-flow li.bam:hover b { color: var(--brand-ink); }

/* Boss 19/10: thẻ Thông tin chuyển khoản ở trang chủ — sale chép gửi khách */
.ck-khoi { display: grid; gap: 6px; padding: 4px 0 2px; }
.ck-dong { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dashed var(--line-2); padding: 3px 0; }
.ck-dong span { color: var(--muted); }
.ck-dong b { font-variant-numeric: tabular-nums; user-select: all; overflow-wrap: anywhere; text-align: right; }
.ck-chua { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0; font-size: 12.5px; color: #B45309; }
.ck-chua svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.ck-khoi .btn { justify-self: start; margin-top: 4px; }
/* Ghi chú của sale trên đơn hàng: nổi lên đầu để người làm đọc trước */
.bh-ghichu { background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; white-space: normal; line-height: 1.55; }
/* Boss 19/10: chọn dịch vụ cần làm trên đơn → tự mở dự án */
.bh-mau { display: grid; gap: 6px; }
.bh-mau-ds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bh-mau-ds label { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }