/* ===================================================================
   BỐ CỤC TRANG — chỉnh đè lên dashboard.css, nạp SAU nó.

   Tách riêng thay vì sửa thẳng dashboard.css (hơn 190 KB, nhiều lớp đè nhau):
   mọi thay đổi bố cục của đợt dọn UI/UX nằm gọn ở đây, đọc một tệp là biết
   đợt đó đổi gì, và gỡ ra là về đúng bản cũ.
   =================================================================== */

/* ---- Nền trời phủ kín trang ----
   `.bs-db` là hộp nền tối; margin-bottom của thân trang lọt ra ngoài nó
   (margin collapse) nên cuối các trang dài luôn có một dải sáng 60px.
   flow-root chặn margin lọt ra, min-height giữ nền kín cả khi trang ngắn. */
.bs-db, .bs-cs { display: flow-root; min-height: 100vh; }

/* ================================================================
   DASHBOARD — tab "Bảng": danh sách trái + ngăn chi tiết phải
   ================================================================ */
.bs-db[data-tab="board"] .bs-db-body {
  width: calc(100% - 32px);
  max-width: 460px;
  margin: 16px 0 24px 16px;
  border-radius: var(--gs-r-lg, 14px);
  min-height: calc(100vh - 60px - 40px);
  box-sizing: border-box;
}
.bs-db[data-tab="board"] .bs-ct:not([hidden]) {
  /* Bám theo danh sách: 16 lề + 460 danh sách + 16 khe. */
  left: 492px; top: 76px; bottom: 16px;
}
.bs-db[data-tab="board"] .bs-ct .bs-ct-khung { border-radius: var(--gs-r-lg, 14px); }
@media (max-width: 1400px) {
  .bs-db[data-tab="board"] .bs-ct:not([hidden]) { right: 16px; }
  .bs-db[data-tab="board"] .bs-ct .bs-ct-khung { border-radius: var(--gs-r-lg, 14px); }
}

/* Màn hẹp: không đủ chỗ cho hai cột. Chi tiết thành một màn riêng phủ kín,
   nằm TRÊN thanh trên (nút đóng của nó ở góc trên là đường về danh sách). */
@media (max-width: 900px) {
  .bs-db[data-tab="board"] .bs-ct:not([hidden]) {
    left: 0; right: 0; top: 0; bottom: 0; z-index: 80;
  }
  .bs-db[data-tab="board"] .bs-ct .bs-ct-khung { border-radius: 0; box-shadow: none; }
}
@media (max-width: 720px) {
  .bs-db[data-tab="board"] .bs-db-body,
  .bs-db-body {
    width: 100%; max-width: none; margin: 0;
    border-radius: 0; min-height: calc(100vh - 104px);
  }
}

/* ---- Trạng thái trống có hướng dẫn ---- */
.gs-trong {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 16px 28px; text-align: center;
  color: var(--gs-ink-2, #4a5261);
  font: 400 14px/1.5 var(--gs-font, system-ui);
}
.gs-trong img { width: 64px; height: 64px; image-rendering: pixelated; opacity: .9; }
.gs-trong b { color: var(--gs-ink, #171a21); font-size: 15px; font-weight: 600; }
.gs-trong p { margin: 0; max-width: 320px; }
.gs-trong a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; margin-top: 4px;
  border-radius: var(--gs-r-sm, 6px); border: 1px solid var(--gs-rule, #dfe1e4);
  background: var(--gs-surface, #fff); color: var(--gs-ink, #171a21);
  font-weight: 500; text-decoration: none;
}
.gs-trong a:hover { border-color: var(--gs-primary, #b54b1a); color: var(--gs-primary, #b54b1a); }

/* Chú thích chân trang: một dòng hướng dẫn, không phải một đoạn luật. */
.bs-db-foot { font-size: 12.5px; line-height: 1.55; color: var(--gs-ink-3, #636b79); }

/* ---- Chip trạng thái + hạn trên hàng việc ---- */
.gs-tt {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: var(--gs-r-pill, 999px);
  font: 600 11.5px/1 var(--gs-font, system-ui);
  background: var(--gs-surface-2, #f0f1ee); color: var(--gs-ink-2, #4a5261);
}
.gs-tt[data-tone="ok"]   { background: var(--gs-ok-sub, #dcebe0);   color: var(--gs-ok, #2f6b4a); }
.gs-tt[data-tone="warn"] { background: var(--gs-warn-sub, #f7eeda); color: var(--gs-warn, #8a6100); }
.gs-tt[data-tone="bad"]  { background: var(--gs-bad-sub, #fbe3e7);  color: var(--gs-bad, #b3213c); }
.gs-tt[data-tone="pri"]  { background: var(--gs-primary-sub, #fdeee4); color: var(--gs-primary, #b54b1a); }
.gs-han { font-size: 12px; color: var(--gs-ink-3, #636b79); }
.bs-ds-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-ds-hang { grid-template-columns: auto auto minmax(0, 1fr); }
/* Không việc nào có việc con thì ô chừa chỗ cho mũi tên mở/gập là khoảng trống vô nghĩa. */
.bs-ds:not(:has(.bs-ds-mui)) .bs-ds-mui-trong { display: none; }
.bs-ds:not(:has(.bs-ds-mui)) .bs-ds-hang { grid-template-columns: auto minmax(0, 1fr); }

/* ================================================================
   BẢNG MÀU GOOSE-UI CHO CÁC TRANG CŨ
   dashboard.css lấy màu nhấn từ LMS2 (--lp-accent, xanh sage) nên nút chính,
   hàng đang chọn và dấu "xong" cùng một màu xanh - không gì nổi lên được.
   Trỏ các biến cũ sang goose-ui: hành động = cam mỏ ngỗng, xanh chỉ còn nghĩa
   "xong" (--green giữ nguyên).
   ================================================================ */
:is(.bs-db, .bs-cs) {
  --primary: var(--gs-primary);
  --primary-nen: var(--gs-primary-sub);
  --page-bg: var(--gs-ground);
  --line: var(--gs-rule);
  --text-strong: var(--gs-ink);
  --text-mid: var(--gs-ink-2);
  --text-muted: var(--gs-ink-3);
}
[data-che-do="thuong"] .bs-ds-hang.is-chon {
  background: var(--gs-primary-sub);
  border-color: var(--gs-primary);
  box-shadow: inset 3px 0 0 var(--gs-primary);
}

/* Một dòng gợi ý dưới tiêu đề mục (thay các hộp giải thích vàng). */
.gs-goi-y { margin: -2px 0 12px; font-size: 13px; line-height: 1.5; color: var(--gs-ink-3, #636b79); }
/* `hidden` phải thắng: vài hộp của trang cũ có display riêng nên hiện ra thành
   một khung rỗng khi chưa có gì bên trong. */
.bs-rv-bang[hidden], .gs-trong[hidden] { display: none; }

/* Công tắc hai mặt trong thân trang (vd. Bảng lương của nhóm / Phiếu của tôi). */
.gs-mat-con {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--gs-r, 10px); background: var(--gs-surface-2, #f0f1ee);
}
.gs-mat-con a {
  padding: 6px 12px; border-radius: 7px;
  font: 500 13px/1.2 var(--gs-font, system-ui);
  color: var(--gs-ink-2, #4a5261); text-decoration: none; white-space: nowrap;
}
.gs-mat-con a:hover { color: var(--gs-ink, #171a21); }
.gs-mat-con a[aria-current] { background: var(--gs-surface, #fff); color: var(--gs-ink, #171a21); box-shadow: var(--gs-sh-1); }

/* ---- Nhân sự: bảng co vừa khung, Lưu chỉ hiện ở hàng vừa sửa ---- */
.bs-ns-bang { width: 100%; }
.bs-ns-bang select { width: 100%; max-width: 230px; min-width: 0; }
.gs-ns-luu { width: 1%; white-space: nowrap; text-align: right; }
.gs-ns-luu [data-luu], .gs-ns-luu .gs-ns-cho { display: none; }
.bs-ns-bang tr[data-sua] { background: var(--gs-warn-sub, #f7eeda); }
.bs-ns-bang tr[data-sua] .gs-ns-luu [data-luu] { display: inline-flex; }
.bs-ns-bang tr[data-sua] .gs-ns-cho { display: inline; margin-right: 8px; font-size: 12px; font-weight: 600; color: var(--gs-warn, #8a6100); }
/* .bs-kpi-bang ép min-width 860px cho bảng lương nhiều cột; bảng nhân sự bốn cột thì
   chỉ tràn khỏi khung 816px và cắt mất cột chức danh. */
.bs-ns-bang { min-width: 640px; }

/* ---- Bộ chọn tháng (src/chung/chonThang.js) ---- */
.gs-thang-goc { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.gs-thang {
  display: inline-flex; align-items: center; height: 36px;
  border: 1px solid var(--gs-rule, #dfe1e4); border-radius: var(--gs-r-sm, 6px);
  background: var(--gs-surface, #fff); overflow: hidden;
}
.gs-thang button {
  height: 100%; border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1 var(--gs-font, system-ui); color: var(--gs-ink, #171a21);
}
.gs-thang [data-lui], .gs-thang [data-tien] { width: 32px; font-size: 18px; color: var(--gs-ink-2, #4a5261); }
.gs-thang .gs-thang-nhan { padding: 0 10px; border-left: 1px solid var(--gs-rule-2, #edeef0); border-right: 1px solid var(--gs-rule-2, #edeef0); }
.gs-thang button:hover { background: var(--gs-surface-2, #f0f1ee); }

/* ---- Lưu ý thu gọn được (thay đoạn giải thích dài) ---- */
.gs-luu-y {
  margin: 0 0 12px; padding: 10px 14px;
  border-radius: var(--gs-r, 10px); background: var(--gs-surface-2, #f0f1ee);
  font: 400 13px/1.55 var(--gs-font, system-ui); color: var(--gs-ink-2, #4a5261);
}
.gs-luu-y summary { cursor: pointer; }
.gs-luu-y summary b { color: var(--gs-ink, #171a21); font-weight: 600; }
.gs-luu-y p { margin: 8px 0 0; }

/* ================================================================
   KHÔNG GIAN HỌC SOP (body.lp) — nối vào thanh trên và bảng màu chung
   ================================================================ */
body.lp {
  --lp-topbar-h: var(--gs-top-h, 60px);
  --lp-accent: var(--gs-primary);
  --lp-accent-ink: #fff;
  --lp-accent-sub: var(--gs-primary-sub);
  --lp-ground: var(--gs-ground);
}
/* Nút mở cây bài nằm trên thanh tối: hiện/ẩn vẫn do .lp-burger quyết định. */
.gs-top .lp-burger {
  width: 36px; height: 36px; padding: 0; margin-right: -4px;
  border: 0; background: transparent; color: var(--gs-night-ink);
}
.gs-top .lp-burger:hover { background: rgba(255, 255, 255, .08); }
.gs-top .lp-burger svg { width: 20px; height: 20px; }

/* ---- Trang Khoá học ---- */
.lp-content.gs-kh { width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 40px 56px; box-sizing: border-box; }
.gs-kh-dau { margin-bottom: 20px; }
.gs-kh-dau h1 { margin: 0 0 6px; font: 700 30px/1.2 var(--gs-font); letter-spacing: -.4px; color: var(--gs-ink); }
.gs-kh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.gs-kh-luoi .lp-card { display: flex; margin: 0; }
.gs-kh-luoi .lp-stack-sm { flex: 1; display: flex; flex-direction: column; }
.gs-kh-luoi .lp-row { margin-top: auto; padding-top: 4px; }
.gs-kh-ten { font-size: 16.5px; line-height: 1.35; color: var(--gs-ink); }
.gs-kh-khoa, .gs-kh-mota, .gs-kh-meta { margin: 0; font-size: 13.5px; line-height: 1.55; }
.gs-kh-pt { font-size: 13px; }
@media (max-width: 640px) {
  .lp-content.gs-kh { padding: 20px 16px 40px; }
  .gs-kh-dau h1 { font-size: 24px; }
  .gs-kh-luoi { grid-template-columns: 1fr; }
}
/* <html> lấy nền từ --lp-ground ở :root (player.css), không thấy bản trỏ lại trên body.lp. */
html:has(> body.lp) { background: var(--gs-ground); }

/* Trang học: cột đọc 690px (--cot-bai) canh GIỮA vùng nội dung thay vì dính mép
   trái cạnh cây bài và bỏ trống ~400px bên phải. Canh bằng padding của vùng
   nội dung nên breadcrumb, bài, nút và pager vẫn thẳng một mép với nhau. */
@media (min-width: 1001px) {
  .bs-hoc-goc .lp-content:has(.lp-article:not(.lp-wide)) {
    padding-left: max(40px, calc((100% - var(--cot-bai, 690px)) / 2));
  }
}

/* ---- Trang Lộ trình ---- */
.gs-lt-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.gs-lt-so .lp-card { margin: 0; }
.gs-lt-h2 { margin: 0 0 12px; font: 650 18px/1.3 var(--gs-font); color: var(--gs-ink); }
.gs-lt-chan { margin-top: 16px; }
.gs-lt-chon { border-color: var(--gs-primary) !important; box-shadow: 0 0 0 3px var(--gs-primary-sub) !important; }
@media (max-width: 640px) { .gs-lt-so { grid-template-columns: 1fr; gap: 10px; } }

/* ---- Tủ đồ ---- */
.gs-cs-dau { max-width: 1180px; margin: 0 auto; padding: 24px 12px 4px; box-sizing: border-box; }
.gs-cs-dau h1 { margin: 0 0 4px; font: 700 26px/1.2 var(--gs-font); letter-spacing: -.3px; color: var(--gs-ink); }
[data-che-do="dep"] .gs-cs-dau h1, [data-che-do="dep"] .gs-cs-dau .gs-goi-y { color: #eef1f7; }
.bs-cs-note.gs-luu-y { font-size: 12.5px; }

/* Chế độ trang trí mượn họ màu xanh dương của mẫu Uiverse (nút chính, hàng đang
   chọn, quầng thẻ). Trỏ sang họ cam mỏ ngỗng để bật/tắt trang trí không đổi màu
   hành động. Giữ tỉ lệ tương phản: --gs-primary trên trắng 5.27:1. */
:root {
  --form-nhan: var(--gs-primary);
  --form-nhan-2: var(--gs-primary-h);
  --viec-quang: rgba(181, 75, 26, .28);
  --viec-nhat: var(--gs-primary-sub);
  --viec-to: #D9713A;
  --viec-to-2: #EFA06A;
  --viec-chu: var(--gs-primary);
  --viec-chu-dam: var(--gs-primary-h);
}

/* Bốn ô tổng quan (lương, KPI) trên điện thoại: lưới 2 cột thay vì bốn hàng dọc. */
@media (max-width: 640px) {
  *:has(> .bs-lg-the) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bs-lg-the { min-width: 0; }
}

/* Ngăn chi tiết việc trên màn rộng: tối đa 900px. Kéo tới mép phải thì trên màn
   2000px ô "Phòng ban" dài 1.200px và nút "Thêm" nằm cách ô nhập cả gang tay.
   Phần trời còn lại bên phải là chỗ con ngỗng đi dạo. */
@media (min-width: 901px) {
  .bs-db[data-tab="board"] .bs-ct:not([hidden]) {
    right: auto;
    width: min(900px, calc(100vw - 508px));
  }
}

/* Nhân sự: nhóm chỉ-xem gập sẵn dưới bảng sửa. */
.gs-ns-khac { margin: 16px 0; }
.gs-ns-khac .bs-lg-cuon { margin-top: 10px; }
.gs-ns-khac .bs-ns-khoa { display: block; margin-top: 2px; }
.bs-ns [data-ns-dau-sua] { margin-top: 8px; }

/* Tiêu đề trang cùng một cỡ ở mọi khu (trang chủ, Học SOP dùng 26-30px; khu Việc
   từng là 17px nằm lọt trong khung). Khung thân trang ở chế độ thường: bóng nhẹ
   + viền mảnh thay cho bóng đổ đậm vốn làm cho nền trời đêm. */
.bs-db-title { font: 700 24px/1.25 var(--gs-font) !important; letter-spacing: -.3px; color: var(--gs-ink); }
[data-che-do="thuong"] .bs-db:not([data-tab]) .bs-db-body {
  box-shadow: var(--gs-sh-1);
  border: 1px solid var(--gs-rule-2);
}
@media (max-width: 720px) { .bs-db-title { font-size: 21px !important; } }

/* Màn chặn (src/chung/manChan.js) */
.gs-chan-goc { min-height: 100vh; background: var(--gs-ground); font-family: var(--gs-font); }
.gs-chan { display: grid; place-items: center; padding: 64px 16px; }
.gs-chan-the { max-width: 460px; background: var(--gs-surface); border: 1px solid var(--gs-rule-2); border-radius: var(--gs-r-lg); box-shadow: var(--gs-sh-2); padding: 40px 28px; }
.gs-chan-the img { width: 80px; height: 80px; }

/* ================================================================
   KHUNG CHI TIẾT VIỆC (taskDetail.js) — chế độ thường
   ================================================================ */
/* Tiêu đề mục: chữ thường có dấu, không VIẾT HOA cả dòng (kéo luôn cả dòng
   chú thích nhỏ thành chữ hoa). */
.bs-ct-the-dau {
  text-transform: none !important; letter-spacing: 0 !important;
  font: 650 15px/1.3 var(--gs-font) !important; color: var(--gs-ink) !important;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.bs-ct-the-dau small, .bs-ct-them-ct summary small {
  font: 400 12.5px/1.3 var(--gs-font); color: var(--gs-ink-3); text-transform: none;
}
[data-che-do="thuong"] .bs-ct-the { padding: 16px 20px; }
[data-che-do="thuong"] .bs-ct-than { gap: 10px; }

/* Đầu khung: trạng thái trước, mã việc mờ sau. */
.bs-ct-dau { gap: 10px; }
.bs-ct-ma { color: var(--gs-ink-3) !important; font-weight: 500 !important; }

/* Tên việc trông như ô sửa được khi rê chuột. */
.bs-ct-ten { border-radius: var(--gs-r-sm); transition: background var(--gs-t), box-shadow var(--gs-t); }
.bs-ct-ten:hover:not(:disabled) { background: var(--gs-surface-2); }
.bs-ct-ten:focus { background: var(--gs-surface); box-shadow: 0 0 0 2px var(--gs-primary); outline: none; }

/* Hai ô ngày có nhãn riêng. */
.gs-ct-ngay { display: inline-flex; flex-direction: column; gap: 3px; }
.gs-ct-ngay small { font-size: 11.5px; color: var(--gs-ink-3); }
.bs-ct-han { align-items: flex-end; flex-wrap: wrap; }

/* Dòng "bước tiếp theo" dưới nút gửi duyệt. */
.gs-ct-buoc { margin: 10px 0 0; font-size: 13px; color: var(--gs-ink-2); }
.gs-ct-buoc:empty { display: none; }
.bs-ct-ai-ava { font-style: normal !important; font-weight: 700; display: inline-grid; place-items: center; }

/* Nút thêm của "Chia thành việc nhỏ" từng là ô vuông cho dấu "+": chữ "Thêm" bị cắt. */
.bs-ct-cvc-them button { width: auto !important; min-width: 64px; padding: 0 14px !important; font: 600 14px/1 var(--gs-font) !important; }

/* Hàng tab Bình luận / Lịch sử làm tiêu đề khối. */
.bs-ct-tab button { font: 600 14px/1 var(--gs-font); padding: 8px 12px; }
.bs-ct-tab button.is-active { color: var(--gs-primary); box-shadow: inset 0 -2px 0 var(--gs-primary); }

/* ================================================================
   KPI & LƯƠNG — bảng nhiều cột cần chỗ: khung 860px buộc bảng KPI (7 cột)
   cuộn ngang và cắt mất cột "Hoàn thành". Nới khung hai trang này.
   ================================================================ */
.bs-db.bs-lg .bs-db-body { max-width: 1160px; }
.gs-kpi-ts { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gs-kpi-ts input { width: 64px; }
.bs-kpi-ten .bs-kpi-o + .bs-kpi-nhom-o { margin-top: 6px; }
.bs-kpi-ten input[data-truong="ten"] { font-weight: 600; }
/* Danh sách người ở mặt duyệt KPI: gọn lại, một người một hàng thấp. */
.bs-kpi-ds-muc { padding: 10px 12px !important; gap: 4px !important; }

/* ================================================================
   KHUNG CHAT VỚI NGỖNG (chat.js) + lời nhắc cạnh con ngỗng
   ================================================================ */
.gs-chat-dau {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 2px 8px 4px; margin-bottom: 6px;
  border-bottom: 1px solid var(--gs-rule-2);
  font: 600 13.5px/1.2 var(--gs-font); color: var(--gs-ink);
}
.gs-chat-dau b { flex: 1; font-weight: 650; }
.gs-chat-dau .bs-chat-zoom { position: static !important; inset: auto !important; }
.gs-chat-dong {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--gs-r-sm); background: transparent;
  color: var(--gs-ink-3); font-size: 20px; line-height: 1; cursor: pointer;
}
.gs-chat-dong:hover { background: var(--gs-surface-2); color: var(--gs-ink); }
.gs-chat-goi-y { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.gs-chat-goi-y button {
  padding: 6px 10px; border: 1px solid var(--gs-rule); border-radius: var(--gs-r-pill);
  background: var(--gs-surface); color: var(--gs-ink);
  font: 500 12.5px/1.2 var(--gs-font); cursor: pointer; text-align: left;
}
.gs-chat-goi-y button:hover { border-color: var(--gs-primary); color: var(--gs-primary); background: var(--gs-primary-sub); }

.gs-ngong-goi-y {
  position: absolute; right: 70%; top: 6%; z-index: 3;
  width: max-content; max-width: 180px; padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
  background: var(--gs-surface); color: var(--gs-ink);
  font: 500 12.5px/1.35 var(--gs-font); box-shadow: var(--gs-sh-3);
  pointer-events: none; animation: gs-nhac 2.4s ease-in-out infinite;
}
.gs-ngong-goi-y[hidden] { display: none; }
@keyframes gs-nhac { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .gs-ngong-goi-y { animation: none; } }
.bs-mascot-stage:focus-visible { outline: 2px solid var(--gs-primary); outline-offset: 4px; border-radius: 12px; }

/* Khung chi tiết trên màn hẹp: nhãn nằm TRÊN ô (cột nhãn 150px ăn nửa bề ngang
   điện thoại), hai ô ngày đứng cạnh nhau, bỏ mũi tên lơ lửng. */
@media (max-width: 560px) {
  .bs-ct-the-dinh .bs-ct-hang:not([hidden]) { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; }
  .bs-ct-the-dinh .bs-ct-hang dd { margin: 0; }
  .bs-ct-han { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bs-ct-han > span[aria-hidden] { display: none; }
  .gs-ct-ngay input { width: 100%; min-width: 0; }
  .bs-ct-thanh { flex-wrap: wrap; row-gap: 8px; }
}