@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
/* =====================================================================
   GIAO DIỆN NỀN SÁNG CHUẨN — theo bảng Timeline (css/timeline.css)
   2026-10-29 (anh Huy): lấy tông màu + cách trình bày của bảng Timeline làm MẪU CHUNG cho chế độ
   sáng. Áp TỰ ĐỘNG cho mọi trang cổng quản trị (kể cả trang tạo mới sau này), trừ vài trang có giao
   diện riêng (mục 1). Hướng dẫn: docs/GIAO_DIEN_NEN_SANG.md · Convention #149.

   NGUYÊN TẮC (đừng phá):
   - CHỈ ĐỔI MÀU / VIỀN / BO GÓC / BÓNG. Không đổi padding, cỡ chữ, chiều cao, bố cục → chức năng
     và kích thước giữ nguyên tuyệt đối.
   - CHỈ áp ở chế độ sáng (:root[data-theme="light"]). Chế độ tối không đổi 1 pixel.
   - Đổi màu bằng cách ĐỊNH NGHĨA LẠI BIẾN (--bg, --text, --border…) trong phạm vi trang — mọi thứ
     đang dùng var() tự đổi theo, khỏi sửa từng chỗ (Convention #74).
   - Màu chữ trên nền đã ĐO tương phản ≥ 4.5:1 (Convention #91).
   ===================================================================== */

/* ---------- 1. Phạm vi: MỌI trang của cổng quản trị, trừ các trang có giao diện riêng ----------
   Cổng quản trị (.main) VÀ cổng nhân viên (.emp-content), kể cả PLAYCHAT (từ 2026-10-29 chiều).
   Trừ: Trang chủ (màn chào), Workflow (đã tông Timeline riêng — css/workflow.css), Playcomment
   (bảng vẽ), Văn phòng AI. Trang nào cần giữ giao diện riêng thì thêm class "ls-off" vào khung trang. */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))){
  /* Bảng màu Timeline. Chỉ đổi màu viền (border-color), KHÔNG đặt lại border — thêm viền là nút/ô to ra. */
  --ls-bg:#FBFAF7; --ls-surface:#FFFFFF; --ls-head:#F7F5F1; --ls-chip:#F1EEE9;
  --ls-line:#ECE8E1; --ls-line2:#F2EFEA; --ls-line3:#E2DDD5;
  --ls-ink:#2B2A28; --ls-ink2:#6B6660; --ls-ink3:#857F77;
  --ls-shadow:0 1px 2px rgba(40,32,24,.06);
  /* Biến chung của app → tông ấm */
  --bg:var(--ls-bg); --bg2:var(--ls-surface); --bg3:var(--ls-head); --bg4:var(--ls-chip);
  --border:var(--ls-line); --border2:var(--ls-line3);
  --text:var(--ls-ink); --text2:var(--ls-ink2); --text3:var(--ls-ink3);
  /* Màu nhấn dịu (đo: chữ trên trắng ≥5:1, trên nền nhạt cùng màu ≥4.5:1) */
  --blue:#3D6A9E; --blue2:#335C8C; --blue-bg:#E6EEF7;
  --green:#2B7050; --green-bg:#E3F1E8;
  --amber:#95600F; --amber-bg:#F8EDD5;
  --red:#A54834;  --red-bg:#F8E5DF;
  --purple:#6B53A3; --purple-bg:#EDE8F6;
  /* Biến riêng một số trang (Bảng tính dùng --surf / --brd) */
  --surf:var(--ls-surface);   /* KHÔNG định nghĩa --brd: viền đang rỗng, có lại sẽ làm ô rộng thêm 2px */
  background:var(--ls-bg); color:var(--ls-ink);
}

/* ---------- 2. Thanh trên trang ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment)))
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar){
  background:var(--ls-surface) !important; border-color:var(--ls-line) !important;
}

/* ---------- 3. Bảng ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .content th{
  background:var(--ls-head); color:var(--ls-ink3); border-bottom-color:var(--ls-line);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .content td{
  border-bottom-color:var(--ls-line2);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .content tr:hover td{
  background:var(--ls-bg);
}

/* ---------- 4. Thẻ / khối gập / ô thống kê ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment)))
  :is(.stat-card,.tc,.acc-item){
  background:var(--ls-surface); border-color:var(--ls-line); box-shadow:var(--ls-shadow);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .acc-item{ border-radius:14px; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .acc-head{ background:var(--ls-head); }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .acc-head:hover{ background:var(--ls-chip); }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .acc-body{ background:var(--ls-surface); }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .slabel{ color:var(--ls-ink3); }

/* ---------- 5. Nút: viên thuốc như Timeline ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn{ border-radius:999px; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn-ghost{
  background:var(--ls-surface); color:var(--ls-ink); border-color:var(--ls-line);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn-ghost:hover{
  background:var(--ls-surface); border-color:var(--ls-ink3);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn-primary{
  background:var(--ls-ink); color:#fff;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn-success{ border-color:#BFDCCB; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .btn-danger{ border-color:#EBC6BC; }
/* Nút Excel / PDF / các nút công cụ Bảng tính: trung tính như nút Timeline (màu cũ gắn thẳng vào thẻ
   làm chữ chìm trên nền sáng — ghi đè bằng !important). Emoji đầu nút vẫn giữ để nhận ra. */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .export-btn{
  background:var(--ls-surface) !important; color:var(--ls-ink) !important; border:1px solid var(--ls-line) !important; border-radius:999px;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .export-btn:hover{
  border-color:var(--ls-ink3) !important; opacity:1;
}

/* ---------- 6. Tab trong trang: đang chọn = nền mực đậm, chưa chọn = nền nhạt ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) :is(.bonus-tab,.att-tab-btn){
  background:var(--ls-chip) !important; color:var(--ls-ink2) !important; border-color:transparent !important; border-radius:999px !important;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) :is(.bonus-tab,.att-tab-btn):hover{
  color:var(--ls-ink) !important;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) :is(.bonus-tab,.att-tab-btn).active{
  background:var(--ls-ink) !important; color:#fff !important; border-color:var(--ls-ink) !important;
}

/* ---------- 7. Ô nhập / ô chọn ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment)))
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar) :is(select,input[type="text"],input[type="search"],input[type="date"],input[type="month"],input[type="number"],input:not([type])){
  background:var(--ls-chip) !important; color:var(--ls-ink) !important; border-color:transparent !important; border-radius:999px !important;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .page :is(input[type="text"],input[type="number"],input:not([type]),select,textarea){
  border-color:var(--ls-line3);
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .page :is(input,select,textarea):focus{
  outline:none; border-color:var(--ls-ink3) !important; box-shadow:0 0 0 3px rgba(43,42,40,.08);
}

/* ---------- 8. Thẻ tên nhân viên trang Bonus: dịu như Workflow ----------
   Màu gốc mỗi người một màu (gắn thẳng vào thẻ) — phủ 72% trắng lên chính màu đó để ra bản pastel CÙNG
   sắc (vẫn phân biệt từng người), chữ mực đậm. Không đổi kích thước. */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .bn-tag{
  background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) !important; color:var(--ls-ink) !important;
}

/* ---------- 9. Lịch làm việc: ngày làm nền trắng, ngày nghỉ nền be (js/70 đọc 2 biến này) ---------- */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))){
  --wc-work-bg:var(--ls-surface); --wc-work-bd:var(--ls-line);
  --wc-off-bg:#F1EEE9; --wc-off-bd:#E2DDD5;
}

/* ---------- 10. Bảng tính BD: đầu bảng sáng ấm thay nền đen, dòng phòng ban xanh dịu, dòng tổng vàng nhạt ----------
   Chỉ đổi MÀU (kẻ ô, nền, chữ) — xuất Excel không bị ảnh hưởng (Excel tự đặt kiểu riêng). */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table thead th{
  background:var(--ls-head) !important; color:var(--ls-ink) !important; box-shadow:inset 0 0 0 1px var(--ls-line3) !important;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) :is(.tx-table th,.tx-table td){ border-right-color:#DDD7CE; border-bottom-color:#DDD7CE; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) :is(.tx-table th:first-child,.tx-table td:first-child){ border-left-color:#DDD7CE; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table thead tr:first-child th{ border-top-color:#DDD7CE; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table .tx-stt-cell{ background:var(--ls-bg); }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table .tx-calc-cell{ background:#F4F2EE; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-dept-row td{ background:#E6EEF7 !important; color:#24405F !important; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-dept-row input{ color:#24405F !important; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-dept-row input:hover{ background:rgba(255,255,255,.55); }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-sum-row td{ background:#F8EDD5 !important; }
/* Ô đầu bảng tô màu nhóm (Phụ cấp / OT…) và dòng TỔNG CỘNG: màu gắn thẳng vào thẻ kèm !important nên không
   đè được nền — phủ một lớp trắng bằng bóng trong (inset) để ra bản dịu CÙNG sắc. Bóng không đổi kích thước. */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table thead th[style*="background"]{
  box-shadow:inset 0 0 0 1px var(--ls-line3), inset 0 0 0 999px rgba(255,255,255,.74) !important;
}
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .tx-table td[style*="#fbbf24"]{
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.6); border-color:#E8C77A !important;
}
/* Ô nhập trong Bảng tính: KHÔNG khung (bảng đã có đường kẻ ô) — chỉ hiện viền mảnh khi rê chuột / đang gõ.
   Đè quy tắc viền ô nhập chung ở mục 7. */
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .page .tx-table input{ border-color:transparent; }
:root[data-theme="light"] :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment))) .page .tx-table input:hover{ border-color:var(--ls-line3); }

/* ---------- 11. THANH BÊN (2026-10-29 anh Huy) ----------
   Mỗi NHÓM (Tổng quan / Tài chính / Nhân sự / Dự án / Trao đổi) một màu riêng lấy từ bảng màu Timeline:
   đầu nhóm = nền pastel đậm, chữ mực cùng sắc · các mục con nằm trên nền NHẠT hơn cùng sắc để nhìn là biết
   thuộc nhóm nào · mục đang mở = nền trắng, chữ đậm, vạch trái cùng sắc. Đo: chữ ≥ 4.8:1 trên mọi nền.
   Chỉ đổi màu / nền / bo góc — không đổi khoảng cách, cỡ chữ. */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] #emp-sidebar{
  background:#FFFFFF; border-right-color:#ECE8E1;
  --bg2:#FFFFFF; --bg3:#F7F5F1; --bg4:#F1EEE9; --border:#ECE8E1; --border2:#E2DDD5;
  --text:#2B2A28; --text2:#6B6660; --text3:#857F77;
}
:root[data-theme="light"] .sidebar .nav-group[data-group="overview"]{ --g-p:#CFE3F3; --g-i:#2E5A7F; --g-n:#EDF4FA; --g-h:#DDEBF7; }
:root[data-theme="light"] .sidebar .nav-group[data-group="finance"]{ --g-p:#D5E8D4; --g-i:#3F6B3D; --g-n:#EFF6EF; --g-h:#E2EFE1; }
:root[data-theme="light"] .sidebar .nav-group[data-group="hr"]{ --g-p:#F9D9C4; --g-i:#8A4B2A; --g-n:#FDF1E9; --g-h:#FBE4D6; }
:root[data-theme="light"] .sidebar .nav-group[data-group="project"]{ --g-p:#E1D9F1; --g-i:#5B4A86; --g-n:#F4F1FA; --g-h:#EAE4F5; }
:root[data-theme="light"] .sidebar .nav-group[data-group="communication"]{ --g-p:#CDEBE4; --g-i:#2F6B5F; --g-n:#ECF7F5; --g-h:#DCF1EC; }
/* Đầu nhóm */
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-head{ background:var(--g-p); }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-head,
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-head .nav-group-label,
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-head:hover{ color:var(--g-i); }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-head:hover{ filter:brightness(.97); }
/* Các mục con: khối nền nhạt cùng sắc */
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-body{ background:var(--g-n); border-radius:8px; }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-body .ni{ color:var(--g-i); }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-body .ni:hover{ background:var(--g-h); color:var(--g-i); }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-body .ni.active{ background:#FFFFFF; color:var(--g-i); font-weight:600; box-shadow:0 1px 2px rgba(40,32,24,.08); }
:root[data-theme="light"] .sidebar .nav-group[data-group] > .nav-group-body .ni.active::before{ background:var(--g-i); }
/* Thanh bên thu gọn (chỉ icon): nhóm đang mở cũng mang màu nhóm */
:root[data-theme="light"] .sidebar.collapsed .nav-group[data-group] > .nav-group-head{ background:var(--g-p); color:var(--g-i); }
:root[data-theme="light"] .sidebar.collapsed .nav-group[data-group].has-active-page > .nav-group-head::before{ background:var(--g-i); }
/* Mục đơn cấp đầu (Trang chủ, Lương của tôi, Quản lý máy…): chữ vàng cam logo như cũ, đang mở = nền be */
:root[data-theme="light"] .sidebar .ni-standalone:hover{ background:#F7F5F1; }
:root[data-theme="light"] .sidebar .ni-standalone.active{ background:#F6E7B8; color:#735A12; }
:root[data-theme="light"] .sidebar .ni-standalone.active::before{ background:#735A12; }
/* Cổng nhân viên (không chia nhóm): mục đang mở nền be, chữ mực */
:root[data-theme="light"] #emp-sidebar .emp-tab-v.active{ background:#F1EEE9; color:#2B2A28; }
:root[data-theme="light"] #emp-sidebar .emp-tab-v.active::before{ background:#2B2A28; }

/* ---------- 12. Mục đơn cấp đầu + ô logo (2026-10-29 anh Huy) ----------
   Mục đơn (Thông báo, Trang chủ, Văn phòng AI, Lương của tôi, Quản lý máy…) cũng mỗi mục một màu pastel riêng
   như đầu nhóm. Các mục này chỉ cách nhau 1px → viền trắng TRONG (box-shadow inset) tạo khe, không đổi kích thước.
   Ô logo: nền mực đậm ấm — dấu hiệu vàng cam nổi hẳn (đo 9:1), khác biệt với phần còn lại của thanh bên. */
:root[data-theme="light"] .sidebar .ni-standalone,
:root[data-theme="light"] .sidebar #sidebar-activity-btn{
  --s-p:#F1EEE9; --s-i:#5E5953;
  background:var(--s-p); color:var(--s-i); box-shadow:inset 0 0 0 1.5px #FFFFFF;
}
:root[data-theme="light"] .sidebar #sidebar-activity-btn{ --s-p:#F7D2C9; --s-i:#8F4535; }
:root[data-theme="light"] .sidebar .ni-standalone[data-page="home"]{ --s-p:#F6E7B8; --s-i:#735A12; }
:root[data-theme="light"] .sidebar .ni-standalone[data-page="ai_office"]{ --s-p:#D6DDF5; --s-i:#3E4F8C; }
:root[data-theme="light"] .sidebar .ni-standalone[data-page="my_salary"]{ --s-p:#F3D3DB; --s-i:#8C3F55; }
:root[data-theme="light"] .sidebar .ni-standalone[data-page="pc_power"]{ --s-p:#E3E8C8; --s-i:#565F22; }
:root[data-theme="light"] .sidebar .ni-standalone:not(.active),
:root[data-theme="light"] .sidebar .ni-standalone:not(.active):hover,
:root[data-theme="light"] .sidebar #sidebar-activity-btn:hover{ color:var(--s-i); }
:root[data-theme="light"] .sidebar .ni-standalone:hover,
:root[data-theme="light"] .sidebar #sidebar-activity-btn:hover{ background:var(--s-p); filter:brightness(.97); }
:root[data-theme="light"] .sidebar .ni-standalone.active{ background:var(--s-p); color:var(--s-i); filter:saturate(1.25) brightness(.95); }
:root[data-theme="light"] .sidebar .ni-standalone.active::before{ background:var(--s-i); }
/* Ô logo */
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo{
  background:linear-gradient(135deg,#2B2A28 0%,#3D352B 100%); border-bottom-color:#2B2A28;
}
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo .logo-text{ color:#FFFFFF; }
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo .logo-sub{ color:#CFC6B8; }

/* ---------- 13. TRANG CHỦ (2026-10-29 anh Huy) ----------
   Chữ "Xin chào…" + "Chúc bạn…" + đồng hồ: phông Barlow kiểu SpaceX (họ DIN, viết hoa giãn chữ). Phông
   SpaceX thật là D-DIN — KHÔNG có dấu tiếng Việt nên dùng Barlow (cùng dáng DIN, đủ dấu). Áp
   áp CẢ HAI chế độ. Chế độ sáng: nền kem ấm, tên người chào tô chuyển màu vàng→cam của logo; 3 ô mỗi ô một màu
   bảng Timeline (đồng hồ chàm · thời tiết ngọc · sự kiện đào), nút vào trang = viên thuốc nền mực. */
.welcome-greeting, .welcome-message, .ww-time .ww-clock{
  font-family:'Barlow', var(--font);
}
.welcome-greeting{ letter-spacing:3px; font-weight:600; text-transform:uppercase; }
.welcome-message{ letter-spacing:1.5px; font-weight:400; }
.ww-time .ww-clock{ letter-spacing:2px; font-weight:600; }
:root[data-theme="light"] .main:has(#page-home.active),
:root[data-theme="light"] .emp-content:has(#emp-pane-home.active){ background:#FBFAF7; }
:root[data-theme="light"] .welcome-greeting{ color:#2B2A28; }
:root[data-theme="light"] .welcome-greeting span{
  background:linear-gradient(90deg,#C98A00 0%,#E06A1B 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
:root[data-theme="light"] .welcome-message{ color:#6B6660; }
:root[data-theme="light"] .ww-card{ --w-p:#F1EEE9; --w-n:#FFFFFF; --w-i:#2B2A28;
  background:var(--w-n); border-color:var(--w-p); box-shadow:0 1px 3px rgba(40,32,24,.06);
}
:root[data-theme="light"] .ww-card:hover{ border-color:var(--w-i); box-shadow:0 6px 18px rgba(40,32,24,.10); }
:root[data-theme="light"] .ww-card.ww-time{ --w-p:#D6DDF5; --w-n:#EEF1FB; --w-i:#3E4F8C; }
:root[data-theme="light"] .ww-card.ww-weather{ --w-p:#CDEBE4; --w-n:#ECF7F5; --w-i:#2F6B5F; }
:root[data-theme="light"] .ww-card.ww-holidays{ --w-p:#F9D9C4; --w-n:#FDF1E9; --w-i:#8A4B2A; }
:root[data-theme="light"] .ww-time .ww-date,
:root[data-theme="light"] .ww-weather-desc,
:root[data-theme="light"] .ww-weather-city,
:root[data-theme="light"] .ww-holidays-title,
:root[data-theme="light"] .ww-holiday-when,
:root[data-theme="light"] .ww-holiday-empty{ color:var(--w-i); opacity:.85; }
:root[data-theme="light"] .ww-time .ww-clock,
:root[data-theme="light"] .ww-weather-temp,
:root[data-theme="light"] .ww-holiday-item{ color:var(--w-i); }
:root[data-theme="light"] .ww-weather-tip{ color:#735A12; background:#FBF1D2; border-left-color:#C98A00; }
:root[data-theme="light"] .ww-holiday-item + .ww-holiday-item{ border-top-color:var(--w-p); }
:root[data-theme="light"] .welcome-scroll-hint{ background:#2B2A28; color:#FFFFFF; border-color:#2B2A28; }
:root[data-theme="light"] .welcome-scroll-hint:hover{ background:#3D352B; color:#FFFFFF; border-color:#3D352B; }

/* PLAYSPACE_SHARED_PANELS_START */
/* ---------- 11. THANH BÊN (2026-10-29 anh Huy) ----------
   Mỗi NHÓM (Tổng quan / Tài chính / Nhân sự / Dự án / Trao đổi) một màu riêng lấy từ bảng màu Timeline:
   đầu nhóm = nền pastel đậm, chữ mực cùng sắc · các mục con nằm trên nền NHẠT hơn cùng sắc để nhìn là biết
   thuộc nhóm nào · mục đang mở = nền trắng, chữ đậm, vạch trái cùng sắc. Đo: chữ ≥ 4.8:1 trên mọi nền.
   Chỉ đổi màu / nền / bo góc — không đổi khoảng cách, cỡ chữ. */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] #emp-sidebar{
  background:#FFFFFF; border-right-color:#ECE8E1;
  --bg2:#FFFFFF; --bg3:#F7F5F1; --bg4:#F1EEE9; --border:#ECE8E1; --border2:#E2DDD5;
  --text:#2B2A28; --text2:#6B6660; --text3:#857F77;
}
:root .sidebar .nav-group[data-group="overview"]{ --g-p:#CFE3F3; --g-i:#2E5A7F; --g-n:#EDF4FA; --g-h:#DDEBF7; }
:root .sidebar .nav-group[data-group="finance"]{ --g-p:#D5E8D4; --g-i:#3F6B3D; --g-n:#EFF6EF; --g-h:#E2EFE1; }
:root .sidebar .nav-group[data-group="hr"]{ --g-p:#F9D9C4; --g-i:#8A4B2A; --g-n:#FDF1E9; --g-h:#FBE4D6; }
:root .sidebar .nav-group[data-group="project"]{ --g-p:#E1D9F1; --g-i:#5B4A86; --g-n:#F4F1FA; --g-h:#EAE4F5; }
:root .sidebar .nav-group[data-group="communication"]{ --g-p:#CDEBE4; --g-i:#2F6B5F; --g-n:#ECF7F5; --g-h:#DCF1EC; }
/* Đầu nhóm */
:root .sidebar .nav-group[data-group] > .nav-group-head{ background:var(--g-p); }
:root .sidebar .nav-group[data-group] > .nav-group-head,
:root .sidebar .nav-group[data-group] > .nav-group-head .nav-group-label,
:root .sidebar .nav-group[data-group] > .nav-group-head:hover{ color:var(--g-i); }
:root .sidebar .nav-group[data-group] > .nav-group-head:hover{ filter:brightness(.97); }
/* Các mục con: khối nền nhạt cùng sắc */
:root .sidebar .nav-group[data-group] > .nav-group-body{ background:var(--g-n); color:var(--g-i); border-radius:8px; }
:root .sidebar .nav-group[data-group] > .nav-group-body .ni{ color:var(--g-i); }
:root .sidebar .nav-group[data-group] > .nav-group-body .ni:hover{ background:var(--g-h); color:var(--g-i); }
:root .sidebar .nav-group[data-group] > .nav-group-body .ni.active{ background:#FFFFFF; color:var(--g-i); font-weight:600; box-shadow:0 1px 2px rgba(40,32,24,.08); }
:root .sidebar .nav-group[data-group] > .nav-group-body .ni.active::before{ background:var(--g-i); }
/* Thanh bên thu gọn (chỉ icon): nhóm đang mở cũng mang màu nhóm */
:root .sidebar.collapsed .nav-group[data-group] > .nav-group-head{ background:var(--g-p); color:var(--g-i); }
:root .sidebar.collapsed .nav-group[data-group].has-active-page > .nav-group-head::before{ background:var(--g-i); }
/* Mục đơn cấp đầu (Trang chủ, Lương của tôi, Quản lý máy…): chữ vàng cam logo như cũ, đang mở = nền be */
:root .sidebar .ni-standalone:hover{ background:#F7F5F1; }
:root .sidebar .ni-standalone.active{ background:#F6E7B8; color:#735A12; }
:root .sidebar .ni-standalone.active::before{ background:#735A12; }
/* Cổng nhân viên (không chia nhóm): mục đang mở nền be, chữ mực */
:root #emp-sidebar .emp-tab-v.active{ background:#F1EEE9; color:#2B2A28; }
:root #emp-sidebar .emp-tab-v.active::before{ background:#2B2A28; }

/* ---------- 12. Mục đơn cấp đầu + ô logo (2026-10-29 anh Huy) ----------
   Mục đơn (Thông báo, Trang chủ, Văn phòng AI, Lương của tôi, Quản lý máy…) cũng mỗi mục một màu pastel riêng
   như đầu nhóm. Các mục này chỉ cách nhau 1px → viền trắng TRONG (box-shadow inset) tạo khe, không đổi kích thước.
   Ô logo: nền mực đậm ấm — dấu hiệu vàng cam nổi hẳn (đo 9:1), khác biệt với phần còn lại của thanh bên. */
:root .sidebar .ni-standalone,
:root .sidebar #sidebar-activity-btn{
  --s-p:#F1EEE9; --s-i:#5E5953;
  background:var(--s-p); color:var(--s-i); box-shadow:inset 0 0 0 1.5px #FFFFFF;
}
:root .sidebar #sidebar-activity-btn{ --s-p:#F7D2C9; --s-i:#8F4535; }
:root .sidebar .ni-standalone[data-page="home"]{ --s-p:#F6E7B8; --s-i:#735A12; }
:root .sidebar .ni-standalone[data-page="ai_office"]{ --s-p:#D6DDF5; --s-i:#3E4F8C; }
:root .sidebar .ni-standalone[data-page="my_salary"]{ --s-p:#F3D3DB; --s-i:#8C3F55; }
:root .sidebar .ni-standalone[data-page="pc_power"]{ --s-p:#E3E8C8; --s-i:#565F22; }
:root .sidebar .ni-standalone:not(.active),
:root .sidebar .ni-standalone:not(.active):hover,
:root .sidebar #sidebar-activity-btn:hover{ color:var(--s-i); }
:root .sidebar .ni-standalone:hover,
:root .sidebar #sidebar-activity-btn:hover{ background:var(--s-p); filter:brightness(.97); }
:root .sidebar .ni-standalone.active{ background:var(--s-p); color:var(--s-i); filter:saturate(1.25) brightness(.95); }
:root .sidebar .ni-standalone.active::before{ background:var(--s-i); }
/* Ô logo */
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo{
  background:linear-gradient(135deg,#2B2A28 0%,#3D352B 100%); border-bottom-color:#2B2A28;
}
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo .logo-text{ color:#FFFFFF; }
:root[data-theme="light"] :is(.sidebar,#emp-sidebar) > .logo .logo-sub{ color:#CFC6B8; }

/* ---------- 13. TRANG CHỦ (2026-10-29 anh Huy) ----------
   Chữ "Xin chào…" + "Chúc bạn…" + đồng hồ: phông Barlow kiểu SpaceX (họ DIN, viết hoa giãn chữ). Phông
   SpaceX thật là D-DIN — KHÔNG có dấu tiếng Việt nên dùng Barlow (cùng dáng DIN, đủ dấu). Áp
   áp CẢ HAI chế độ. Chế độ sáng: nền kem ấm, tên người chào tô chuyển màu vàng→cam của logo; 3 ô mỗi ô một màu
   bảng Timeline (đồng hồ chàm · thời tiết ngọc · sự kiện đào), nút vào trang = viên thuốc nền mực. */
.welcome-greeting, .welcome-message, .ww-time .ww-clock{
  font-family:'Barlow', var(--font);
}
.welcome-greeting{ letter-spacing:3px; font-weight:600; text-transform:uppercase; }
.welcome-message{ letter-spacing:1.5px; font-weight:400; }
.ww-time .ww-clock{ letter-spacing:2px; font-weight:600; }
:root[data-theme="light"] .main:has(#page-home.active),
:root[data-theme="light"] .emp-content:has(#emp-pane-home.active){ background:#FBFAF7; }
:root[data-theme="light"] .welcome-greeting{ color:#2B2A28; }
:root[data-theme="light"] .welcome-greeting span{
  background:linear-gradient(90deg,#C98A00 0%,#E06A1B 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
:root[data-theme="light"] .welcome-message{ color:#6B6660; }
:root .ww-card{ --w-p:#F1EEE9; --w-n:#FFFFFF; --w-i:#2B2A28;
  background:var(--w-n); color:var(--w-i); border-color:var(--w-p); box-shadow:0 1px 3px rgba(40,32,24,.06);
}
:root .ww-card:hover{ border-color:var(--w-i); box-shadow:0 6px 18px rgba(40,32,24,.10); }
:root .ww-card.ww-time{ --w-p:#D6DDF5; --w-n:#EEF1FB; --w-i:#3E4F8C; }
:root .ww-card.ww-weather{ --w-p:#CDEBE4; --w-n:#ECF7F5; --w-i:#2F6B5F; }
:root .ww-card.ww-holidays{ --w-p:#F9D9C4; --w-n:#FDF1E9; --w-i:#8A4B2A; }
:root .ww-time .ww-date,
:root .ww-weather-desc,
:root .ww-weather-city,
:root .ww-holidays-title,
:root .ww-holiday-when,
:root .ww-holiday-empty{ color:var(--w-i); opacity:.85; }
:root .ww-time .ww-clock,
:root .ww-weather-temp,
:root .ww-holiday-item{ color:var(--w-i); }
:root .ww-weather-tip{ color:#735A12; background:#FBF1D2; border-left-color:#C98A00; }
:root .ww-holiday-item + .ww-holiday-item{ border-top-color:var(--w-p); }
:root[data-theme="light"] .welcome-scroll-hint{ background:#2B2A28; color:#FFFFFF; border-color:#2B2A28; }
:root[data-theme="light"] .welcome-scroll-hint:hover{ background:#3D352B; color:#FFFFFF; border-color:#3D352B; }
/* PLAYSPACE_SHARED_PANELS_END */