/* ═══════════════════════════════════════════════════════════════
   HAIVAN Management Portal — Premium Dark Theme CSS
   Hải Vân Holding | Module 1
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-card-solid: #111827;
    --bg-hover: rgba(17, 24, 39, 0.9);
    
    --accent-gradient: linear-gradient(135deg, var(--cv-lam-06b8c4), var(--cv-cham-9656f6));
    --accent-gradient-reverse: linear-gradient(135deg, var(--cv-cham-9656f6), var(--cv-lam-06b8c4));
    --gradient-rev: linear-gradient(135deg, var(--cv-lam-00f2fe) 0%, var(--cv-lam-01b8c4) 100%);
    --accent-cyan: var(--cv-lam-06b8c4);
    --accent-purple: var(--cv-cham-9656f6);
    --accent-blue: var(--cv-lam-07949d);
    --accent-green: var(--cv-luc-22c722);
    --accent-rose: var(--cv-do-f44242);
    
    --text-primary: #ffffff;
    --text-secondary: #f8fafc;
    --text-muted: #cbd5e1;
    
    --success: var(--cv-luc-22c722);
    --warning: var(--cv-cam-f69d2f);
    --danger: var(--cv-do-ef4444);
    --info: var(--cv-lam-06b8c4);
    
    /* Dynamic status colors for contrast-safe badges */
    --status-overdue-bg: var(--cv-do-ef4444-a012);
    --status-overdue-color: var(--cv-do-ef4444);
    --status-new-bg: rgba(148, 163, 184, 0.12);
    --status-new-color: #94a3b8;
    --status-inprogress-bg: var(--cv-lam-06b8c4-a012);
    --status-inprogress-color: var(--cv-lam-06b8c4);
    --status-waiting-bg: var(--cv-cam-f69d2f-a012);
    --status-waiting-color: var(--cv-cam-f69d2f);
    --status-approval-bg: var(--cv-cham-9656f6-a012);
    --status-approval-color: var(--cv-cham-9b5df7);
    --status-completed-bg: var(--cv-luc-22c722-a012);
    --status-completed-color: var(--cv-luc-22c722);
    
    --border-subtle: rgba(148, 163, 184, 0.1);
    --border-hover: rgba(148, 163, 184, 0.2);
    
    --bg-pnl-header: #1b2232;
    --bg-pnl-highlight: var(--cv-lam-112a2b);
    --bg-pnl-percent: #112333;
    
    --glass-bg: rgba(17, 24, 39, 0.7);
    --glass-blur: blur(12px);
    --glass-border: 1px solid rgba(148, 163, 184, 0.1);
    
    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;
    --topbar-height: 40px;
    
    --font-body: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--cv-lam-06b8c4-a015);
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
    /* Vuốt ngang trên bàn di (cuộn bảng) hết đường thì KHÔNG được thành cử chỉ "Quay lại / Tiến tới" của trình duyệt — BoD 2/10 "cứ vuốt sang phải là nó lại thoát" */
    overscroll-behavior-x: none;
}

body {
    overscroll-behavior-x: none;
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.4);
    transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--cv-tim-c924c9-a085) !important;
    box-shadow: 0 0 10px var(--cv-tim-c924c9-a050) !important;
}

::selection {
    background: var(--cv-lam-06b8c4-a030);
    color: var(--text-primary);
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 14, 26, 0.98) 100%);
    border-right: var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--transition-normal);
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 16px 16px 8px 20px;
    border-bottom: var(--glass-border);
    min-height: 100px;
    flex-shrink: 0;
}

.logo-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow: hidden;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 16px var(--cv-lam-06b8c4-a030);
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition-normal), width var(--transition-normal);
}

.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
}

.logo-title {
    font-size: 15px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.logo-title-svg {
    height: 15px;
    width: auto;
    display: block;
    margin-bottom: 2px;
}

.logo-title-img {
    height: 55px;
    width: auto;
    display: block;
    margin-bottom: 2px;
}

.logo-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.sidebar-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--cv-lam-06b8c4-a020);
    color: var(--accent-cyan);
}

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.nav-section {
    margin-bottom: 2px;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 20px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    position: relative;
    user-select: none;
}

.nav-section-header:hover {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.05);
}

.nav-section-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.08);
    transition: all var(--transition-fast);
}

.nav-section-header:hover .nav-section-icon {
    background: var(--cv-lam-06b8c4-a015);
    color: var(--accent-cyan);
}

.nav-section.active > .nav-section-header .nav-section-icon {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 0 12px var(--cv-lam-06b8c4-a030);
}

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition-normal);
}

/* BoD 8/10: nhãn "Bảng Điều hành (Dashboard)" hiện ĐÚNG cách viết BoD đặt (viết hoa toàn bộ thì tràn sidebar, bị cắt "…") */
.nav-section[data-section="tongquan"] .nav-section-title { text-transform: none; letter-spacing: 0; font-size: 13px; } /* BoD 9/10: cùng cỡ chữ các mục bên dưới (.nav-item 13px) */
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-chevron {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.nav-chevron {
    font-size: 10px;
    margin-left: auto;
    transition: transform var(--transition-fast), opacity var(--transition-normal);
    flex-shrink: 0;
}

.nav-section.expanded > .nav-section-header .nav-chevron {
    transform: rotate(180deg);
}

.nav-section-items {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.nav-section.expanded > .nav-section-items {
    max-height: 2500px;
}

.sidebar.collapsed .nav-section-items {
    max-height: 0 !important;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 48px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
    transition: all var(--transition-fast);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item i {
    width: 18px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.05);
    padding-left: 52px;
}

.nav-item.active {
    color: var(--accent-cyan);
    background: var(--cv-lam-06b8c4-a008);
    font-weight: 500;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-gradient);
    animation: navGlow 2s ease-in-out 2;   /* (20/9) cấm infinite — animation vô hạn ép vẽ lại mỗi khung hình, kéo cả hệ xuống 7 khung/giây (đo máy BoD) */
    box-shadow: 0 0 6px var(--cv-lam-06b8c4-a030);
}

@keyframes navGlow {
    0%, 100% { box-shadow: 0 0 6px var(--cv-lam-06b8c4-a030); }
    50% { box-shadow: 0 0 12px var(--cv-lam-06b8c4-a060); }
}

/* Sidebar Indented Submenus (Hoạch định P) */
.nav-item.nav-sub-item {
    padding-left: 64px;
    font-size: 12px;
    opacity: 0.9;
}
.nav-item.nav-sub-item:hover {
    padding-left: 68px;
    opacity: 1;
}
.nav-item.nav-sub-item.active {
    opacity: 1;
    font-weight: 500;
}

/* L8: thụt lề KIỂU CÂY cho mục con 3.1/3.2 dưới "3. CCTC".
   Cha (.nav-item) có icon ở ~48px → con phải THỤT VÀO TRONG so với lề cha:
   đường dọc đặt ~54px (ngay dưới/within phần icon cha), chữ con ~72px. */
.nav-item.nav-cctc-child, .nav-item.nav-tree-child {
    padding-left: 72px !important;
    font-size: 12px;
    opacity: 0.9;
    background-image: linear-gradient(rgba(148,163,184,0.28), rgba(148,163,184,0.28));
    background-repeat: no-repeat;
    background-size: 1.5px 100%;
    background-position: 54px 0;   /* đường DỌC của cây (thụt vào so với lề cha) */
}
.nav-item.nav-cctc-child.nav-cctc-last, .nav-item.nav-tree-child.nav-tree-last {
    background-size: 1.5px 50%;     /* nhánh CUỐI: đường dọc chỉ tới giữa */
}
.nav-item.nav-cctc-child::after, .nav-item.nav-tree-child::after {
    content: '';
    position: absolute;
    left: 54px;
    top: 50%;
    width: 14px;
    height: 1.5px;
    background: rgba(148,163,184,0.28); /* nhánh NGANG nối vào mục */
}
.nav-item.nav-cctc-child:hover, .nav-item.nav-tree-child:hover {
    padding-left: 76px !important;
    opacity: 1;
}

/* ── CÂY MENU CHUNG (BoD 10/7): cấp lồng 2 (Dự án OKR/Bảng tính dưới Mục tiêu BOD) — 2 đường dọc ── */
.nav-item.nav-tree-child2 {
    padding-left: 92px !important;
    font-size: 11.5px;
    font-weight: 400;
    opacity: 0.8;
    background-image: linear-gradient(rgba(148,163,184,0.28), rgba(148,163,184,0.28)), linear-gradient(rgba(148,163,184,0.22), rgba(148,163,184,0.22));
    background-repeat: no-repeat, no-repeat;
    background-size: 1.5px 100%, 1.5px 100%;
    background-position: 54px 0, 74px 0;
}
.nav-item.nav-tree-child2.nav-tree-last2 {
    background-size: 1.5px 100%, 1.5px 50%;   /* nhánh cuối cấp 2: đường trong dừng giữa, đường ngoài chạy tiếp */
}
.nav-item.nav-tree-child2::after {
    content: '';
    position: absolute;
    left: 74px;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: rgba(148,163,184,0.22);
}
.nav-item.nav-tree-child2:hover { padding-left: 96px !important; opacity: 1; }
/* Cha đậm — phân tầng đậm/nhạt (con đã 400 sẵn ở .nav-item) */
.nav-item.nav-tree-parent { font-weight: 700; }
/* Chevron thu/xoè ở mục cha */
.nav-tree-chev { margin-left: auto; font-size: 9px; opacity: 0.55; transition: transform 0.2s ease; padding: 3px 5px; }
.nav-tree-chev:hover { opacity: 1; }
/* Lớp ẩn khi THU — !important thắng style.display của gate quyền (gate ẩn vẫn ẩn khi xoè) */
.nav-tree-hide { display: none !important; }

.nav-item.nav-sub-nested-item {
    padding-left: 80px;
    font-size: 11px;
    opacity: 0.75;
}
.nav-item.nav-sub-nested-item:hover {
    padding-left: 84px;
    opacity: 1;
}
.nav-item.nav-sub-nested-item.active {
    opacity: 1;
    font-weight: 500;
}

.nav-item.nav-sub-double-nested-item {
    padding-left: 96px;
    font-size: 10.5px;
    opacity: 0.7;
}
.nav-item.nav-sub-double-nested-item:hover {
    padding-left: 100px;
    opacity: 1;
}
.nav-item.nav-sub-double-nested-item.active {
    opacity: 1;
    font-weight: 500;
}

/* Sidebar Footer */
.sidebar-footer {
    border-top: var(--glass-border);
    padding: 12px 16px 12px 20px;
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--transition-normal);
}

.sidebar.collapsed .user-info {
    opacity: 0;
    width: 0;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    transition: margin-left var(--transition-normal);
    display: flex;
    flex-direction: column;
    overflow-x: clip;   /* 14/9: clip ≠ hidden — không tạo scroll container, sticky (top-bar, thead) mới dính theo trang */
    min-width: 0;
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed);
}

/* Top Bar */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 3100;   /* (BoD 10/10 "lòi chữ khi cuộn") thanh dính đỉnh PHẢI trên thanh tab nội dung .dept-tabbar (3000) và menu xổ của nó (3001) — trước 100 nên thanh tab cuộn lên đè chữ đường dẫn; vẫn dưới popup / modal (5000) */
    height: var(--topbar-height);
    /* (20/9 — ĐO máy BoD: đang CUỘN thư viện 8 khung/giây, 0 animation; tắt hết backdrop-filter → 59) thanh dính đỉnh có mờ nền =
       MỖI khung cuộn phải dựng lại + làm mờ toàn bộ nội dung trôi phía sau. Bỏ mờ, nền gần đặc để chữ phía sau không lộ. */
    background: rgba(10, 14, 26, 0.97);
    border-bottom: var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    align-items: center;
    justify-content: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-sep {
    font-size: 8px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    transition: all var(--transition-fast);
}

.top-bar-search:focus-within {
    border-color: var(--accent-cyan);
    background: var(--cv-lam-06b8c4-a005);
}

.top-bar-search i {
    color: var(--text-muted);
    font-size: 12px;
}

.top-bar-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    width: 160px;
}

.top-bar-search input::placeholder {
    color: var(--text-muted);
}

.top-bar-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.top-bar-btn:hover {
    background: var(--cv-lam-06b8c4-a015);
    color: var(--accent-cyan);
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page Container */
.page-container {
    flex: 1;
    padding: 0px 24px 24px 24px !important;
    overflow-x: clip;   /* 14/9: cùng lý do .main-content */
    min-width: 0;
}

.page {
    display: none;
    animation: pageIn 0.4s ease-out;
}

.page.active {
    display: block;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLASS CARD
   ═══════════════════════════════════════════════════════════════ */

/* (20/9 — ĐO máy BoD qua ?lagdebug=1: gốc 7–8 khung/giây · tắt backdrop-filter 31–38 · tắt cả animation 57–60) NỀN TRANG LÀ MÀU PHẲNG nên
   làm mờ phía sau thẻ KHÔNG đổi hình thức nhưng mỗi khung hình GPU phải trộn lại từng thẻ (~27 lớp). Đã BỎ backdrop-filter ở
   .glass-card · .kpi-card · .hero-badge · .org-node · .sidebar; GIỮ ở .top-bar + lớp phủ modal (có nội dung chạy phía sau). CẤM thêm lại. */
.glass-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    /* (22/8) CHỈ animate viền/bóng — `transition: all` làm thẻ hoạt hình co giãn 0,3s mỗi lần __hvhFitBottom
       đổi max-height inline (click/resize) → rung chồng lên cuộn. */
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

.glass-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.card-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header h3 i {
    color: var(--accent-cyan);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — HERO BANNER
   ═══════════════════════════════════════════════════════════════ */

.dashboard-hero {
    background: linear-gradient(135deg, var(--cv-lam-06b8c4-a012) 0%, var(--cv-cham-9656f6-a012) 100%);
    border: var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, var(--cv-lam-06b8c4-a008) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--cv-cham-9656f6-a008) 0%, transparent 50%);
    pointer-events: none;
}

.hero-bg-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.hero-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.hero-title {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: 1px;
}

.hero-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 0 24px var(--cv-lam-06b8c4-a030);
}

.hero-tagline {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 300;
}

.hero-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.hero-badge {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    text-align: center;
}

.badge-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.badge-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    cursor: default;
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.kpi-card.kpi-revenue::before { background: var(--accent-gradient); }
.kpi-card.kpi-profit::before { background: linear-gradient(135deg, var(--cv-luc-22c722), var(--cv-luc-10bd10)); }
.kpi-card.kpi-ros::before { background: linear-gradient(135deg, var(--cv-cam-f69d2f), var(--cv-cam-e68106)); }
.kpi-card.kpi-netincome::before { background: linear-gradient(135deg, var(--cv-cham-9656f6), var(--cv-tim-e929e9)); }

.kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.kpi-revenue .kpi-icon { background: var(--cv-lam-06b8c4-a012); color: var(--accent-cyan); }
.kpi-profit .kpi-icon { background: var(--cv-luc-22c722-a012); color: var(--success); }
.kpi-ros .kpi-icon { background: var(--cv-cam-f69d2f-a012); color: var(--warning); }
.kpi-netincome .kpi-icon { background: var(--cv-cham-9656f6-a012); color: var(--accent-purple); }

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.2;
}

.kpi-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

.kpi-trend {
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-trend.positive { color: var(--success); }
.kpi-trend.negative { color: var(--danger); }

.kpi-sparkline {
    height: 32px;
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD GRIDS
   ═══════════════════════════════════════════════════════════════ */

.dashboard-mid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   PDCA CYCLE
   ═══════════════════════════════════════════════════════════════ */

.pdca-cycle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.pdca-ring {
    position: relative;
    width: 280px;
    height: 280px;
}

.pdca-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 24px var(--cv-lam-06b8c4-a030);
}

.pdca-center span {
    font-size: 16px;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
}

.pdca-center small {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.3;
    margin-top: 2px;
}

.pdca-segment {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.pdca-segment:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.pdca-p { top: 0; left: 0; background: var(--cv-lam-07949d-a012); }
.pdca-d { top: 0; right: 0; background: var(--cv-luc-22c722-a012); }
.pdca-c { bottom: 0; right: 0; background: var(--cv-cam-f69d2f-a012); }
.pdca-a { bottom: 0; left: 0; background: var(--cv-do-ef4444-a012); }

.pdca-p:hover { border-color: var(--accent-blue); }
.pdca-d:hover { border-color: var(--success); }
.pdca-c:hover { border-color: var(--warning); }
.pdca-a:hover { border-color: var(--danger); }

.pdca-segment.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 16px var(--cv-lam-06b8c4-a020);
}

.pdca-segment-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pdca-segment-inner i {
    font-size: 20px;
    margin-bottom: 2px;
}

.pdca-p .pdca-segment-inner i { color: var(--accent-blue); }
.pdca-d .pdca-segment-inner i { color: var(--success); }
.pdca-c .pdca-segment-inner i { color: var(--warning); }
.pdca-a .pdca-segment-inner i { color: var(--danger); }

.pdca-segment-inner span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pdca-segment-inner small {
    font-size: 10px;
    color: var(--text-muted);
}

.pdca-status {
    margin-top: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.status-active {
    background: var(--success);
    box-shadow: 0 0 8px var(--cv-luc-22c722-a050);
    animation: pulse 2s 3;   /* (20/9) cấm infinite */
}

.status-dot.status-pending {
    background: var(--text-muted);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pdca-arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pdca-arrow {
    position: absolute;
    color: rgba(148, 163, 184, 0.2);
    font-size: 14px;
}

.arrow-1 { top: 48px; left: 50%; transform: translateX(-50%); }
.arrow-2 { top: 50%; right: 48px; transform: translateY(-50%); }
.arrow-3 { bottom: 48px; left: 50%; transform: translateX(-50%); }
.arrow-4 { top: 50%; left: 48px; transform: translateY(-50%); }

/* ═══════════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════════ */

.quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.quicklink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.06);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: var(--text-primary);
}

.quicklink-item:hover {
    background: var(--cv-lam-06b8c4-a008);
    border-color: var(--cv-lam-06b8c4-a020);
    transform: translateY(-2px);
}

.quicklink-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ql-blue { background: var(--cv-lam-07949d-a012); color: var(--accent-blue); }
.ql-purple { background: var(--cv-cham-9656f6-a012); color: var(--accent-purple); }
.ql-green { background: var(--cv-luc-22c722-a012); color: var(--success); }
.ql-amber { background: var(--cv-cam-f69d2f-a012); color: var(--warning); }
.ql-rose { background: var(--cv-do-f44242-a012); color: var(--cv-do-f44242); }
.ql-teal { background: var(--cv-lam-15b5c0-a012); color: var(--cv-lam-15b5c0); }

.quicklink-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════ */

.chart-container {
    width: 100%;
    min-height: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   NEWS / ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-item {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.06);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.news-item:hover {
    background: var(--cv-lam-06b8c4-a006);
    border-color: var(--cv-lam-06b8c4-a015);
}

.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.news-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-tag.tag-important { background: var(--cv-do-ef4444-a015); color: var(--danger); }
.news-tag.tag-info { background: var(--cv-lam-06b8c4-a015); color: var(--accent-cyan); }
.news-tag.tag-update { background: var(--cv-luc-22c722-a015); color: var(--success); }

.news-date {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.news-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.news-excerpt {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════ */

.table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
}

.data-table {
    width: 100%;
    border-collapse: separate;   /* 21/8: sticky th cần separate (cùng lớp) */
    border-spacing: 0;
    font-size: 13px;
}

.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary, #1e293b);
}

body.light-theme .data-table thead th {
    background: #f1f5f9;
}

/* ── Sticky Columns for RACI table (STT + KPI name) ── */
.raci-sticky-col {
    position: sticky;
    z-index: 5;
    background: var(--bg-secondary, #1e293b);
}

.raci-sticky-stt {
    left: 0;
    min-width: 50px;
    max-width: 50px;
}

.raci-sticky-kpi {
    left: 50px;
    min-width: 260px;
    border-right: 2px solid rgba(148, 163, 184, 0.15);
}

/* Thead sticky cols need higher z-index (intersection of sticky row + sticky col) */
thead .raci-sticky-col {
    z-index: 15;
}

body.light-theme .raci-sticky-col {
    background: #ffffff;
}

body.light-theme thead .raci-sticky-col {
    background: #f1f5f9;
}

.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
    color: var(--text-primary);
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--cv-lam-06b8c4-a004);
}

.data-table .number {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.data-table .positive { color: var(--success); }
.data-table .negative { color: var(--danger); }

.data-table .sbu-name {
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.data-table .sbu-name:hover {
    color: var(--accent-cyan);
}

.sparkline-cell {
    width: 80px;
}

.sbu-table-card {
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   ORG CHART
   ═══════════════════════════════════════════════════════════════ */

.orgchart-wrapper {
    overflow-x: auto;
    padding: 20px 0 40px;
}

.orgchart {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 800px;
    padding: 20px;
    position: relative;
}

/* Continuous center line from TGĐ to SBU bottom */
.orgchart::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: calc(100% - 40px);
    background: var(--cv-lam-46cbd4-a060);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}

/* All orgchart children sit above the center line */
.orgchart > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   ORG CHART — Columnar VP Layout
   ═══════════════════════════════════════════════════════════ */
.org-node {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    width: 100%;
    max-width: 190px;
    box-sizing: border-box;
}

.org-node:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-glow);
}

.org-node-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.org-node-role {
    font-size: 9.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

.org-node-name {
    font-size: 10px;
    color: var(--accent-cyan);
    font-weight: 600;
    margin-top: 3px;
}

/* ─── Level-0: TGĐ (CEO) — Red gradient ─── */
.org-node.level-0 {
    background: linear-gradient(135deg, var(--cv-do-b91c1c) 0%, var(--cv-do-dc2626) 50%, var(--cv-do-ef4444) 100%);
    border: none;
    box-shadow: 0 4px 20px var(--cv-do-dc2626-a035);
    max-width: 220px;
    padding: 14px 24px;
}
.org-node.level-0 .org-node-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: white; }
.org-node.level-0 .org-node-role { color: rgba(255,255,255,0.85); }
.org-node.level-0 .org-node-name { color: rgba(255,255,255,0.95); font-style: italic; }

/* ─── Level-assist: Trợ lý/Thư ký ─── */
.org-node.level-assist {
    background: rgba(148, 163, 184, 0.05);
    border-color: rgba(148, 163, 184, 0.15);
    max-width: 280px;
}

/* ─── Level-vp: PTGĐ — Blue left border ─── */
.org-node.level-vp {
    border-left: 3px solid var(--cv-lam-07949d);
    background: var(--cv-lam-07949d-a005);
    padding: 12px 16px;
}
.org-node.level-vp .org-node-title { color: var(--cv-lam-06b4bf); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.org-node.level-vp .org-node-name { color: var(--text-primary); font-size: 11px; font-weight: 700; }

/* ─── Level-dept: Phòng ban — Green accent ─── */
.org-node.level-dept {
    background: var(--cv-luc-22c722-a003);
    border-color: var(--cv-luc-22c722-a015);
    padding: 8px 12px;
}
.org-node.level-dept .org-node-title { font-size: 9.5px; font-weight: 700; color: var(--cv-luc-51df51); }
.org-node.level-dept .org-node-role { font-size: 8.5px; }

/* ─── Level-sbu: SBU — Amber left border ─── */
.org-node.level-sbu {
    border-left: 3px solid var(--cv-cam-f69d2f);
    background: var(--cv-cam-f69d2f-a003);
    padding: 8px 12px;
}
.org-node.level-sbu .org-node-title { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--cv-cam-fcbc6e); }
.org-node.level-sbu .org-node-role { font-size: 8.5px; }

/* ═══ Layout Containers ═══ */

/* Centered row (for TGĐ, Trợ lý) */
.oc-row { display: flex; justify-content: center; }

/* Vertical connector line */
.oc-vline {
    display: block;
    width: 3px;
    height: 30px;
    background: var(--cv-lam-46cbd4-a070);
    margin: 0 auto;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: center;
}
.oc-vline-short { height: 18px; }
.oc-vline-tiny  { height: 12px; }
.oc-vline-tall  { height: 50px; }

/* Horizontal spread line (connects VPs from TGĐ) */
.oc-hline {
    width: 85%;
    max-width: 900px;
    height: 3px;
    background: var(--cv-lam-46cbd4-a070);
    margin: 0 auto;
    border-radius: 2px;
    flex-shrink: 0;
}

/* VP columns container: horizontal row of vertical columns */
.oc-columns {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 0 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* Each VP column: VP node at top, departments stacked vertically */
.oc-vp-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 155px;
    max-width: 210px;
    flex: 1 1 0;
    padding-top: 4px;
}

/* Tree-view children: vertical line on left + horizontal branches */
.oc-vp-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
    padding-top: 10px;
    padding-left: 18px;
    border-left: 3px solid var(--cv-lam-46cbd4-a060);
    margin-left: 10px;
    align-self: stretch;
}

/* Specific styling for SBU column under TGĐ to mask center line */
.oc-tgd-column .oc-vp-children {
    background: var(--bg-primary);
    position: relative;
    z-index: 2;
}

/* Horizontal branch from vertical line to each child node */
.oc-vp-children > .org-node {
    position: relative;
    max-width: none;
    width: auto;
}

.oc-vp-children > .org-node::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 50%;
    width: 15px;
    height: 3px;
    background: var(--cv-lam-46cbd4-a060);
    transform: translateY(-50%);
}

/* Last child: shorten the vertical line to stop at this node */
.oc-vp-children > .org-node:last-child {
    position: relative;
}
.oc-vp-children > .org-node:last-child::after {
    content: '';
    position: absolute;
    left: -21px;
    top: 50%;
    width: 6px;
    height: calc(50% + 6px);
    background: var(--bg-primary, #0f172a);
    z-index: 1;
}

/* Section label for bottom SBU area */
.oc-section-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 8px 16px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.oc-section-label i { font-size: 12px; color: var(--cv-cam-f69d2f); }

/* SBU nodes rendered directly in container — center them */
#orgChart > .org-node.level-sbu {
    max-width: 240px;
    min-width: 200px;
}

/* TGĐ SBU column — same as VP column but wider */
.oc-tgd-column {
    max-width: 280px;
    min-width: 200px;
    margin-top: 20px;
}

/* ─── Staggered entrance ─── */
.org-node {
    opacity: 0;
    animation: orgNodeIn 0.5s ease-out forwards;
}

@keyframes orgNodeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Role Panel */
.role-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.98);   /* (20/9) nền gần đặc → mờ nền vô hình, đã bỏ backdrop-filter */
    border-left: var(--glass-border);
    z-index: 5000;   /* > tab bar 3000 */
    transition: right var(--transition-normal);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.role-panel.open {
    right: 0;
}

.role-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: var(--glass-border);
}

.role-panel-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.role-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.role-panel-close:hover {
    background: var(--cv-do-ef4444-a020);
    color: var(--danger);
}

.role-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.role-detail-section {
    margin-bottom: 20px;
}

.role-detail-section h4 {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.role-detail-section p {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}

.role-detail-section ul {
    list-style: none;
    padding: 0;
}

.role-detail-section ul li {
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-detail-section ul li i {
    color: var(--accent-cyan);
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   SBU DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

.page-header {
    margin-bottom: 24px;
}

.page-header h2 {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.page-header h2 i {
    color: var(--accent-cyan);
}

.page-desc {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 300;
}

/* SBU Info Card */
.sbu-info-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 16px !important;
}

.sbu-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbu-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: white;
    box-shadow: 0 0 12px var(--cv-lam-06b8c4-a025);
    flex-shrink: 0;
}

.sbu-info-text h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.15;
}

.sbu-info-text p {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.sbu-info-text p i {
    color: var(--accent-cyan);
    font-size: 11px;
}

.sbu-info-kpis {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.sbu-mini-kpi {
    text-align: center;
}

.sbu-mini-kpi .mini-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sbu-mini-kpi .mini-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}

.sbu-mini-kpi .mini-value.positive { color: var(--success); }
.sbu-mini-kpi .mini-value.negative { color: var(--danger); }

/* SBU Tabs */
.sbu-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: rgba(148, 163, 184, 0.05);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.sbu-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;   /* KHÔNG wrap chữ 2 dòng → icon khỏi đè (RULE 0A) */
}

.sbu-tab:hover {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.08);
}

.sbu-tab.active {
    background: var(--accent-gradient);
    color: white;
    font-weight: 600;
}

.sbu-tab-content {
    display: none;
    animation: pageIn 0.3s ease-out;
}

.sbu-tab-content.active {
    display: block;
}

.sbu-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
/* Ô của lưới KHÔNG được nở theo nội dung rộng nhất bên trong (bảng KR min 800px…): cột `1fr` mặc định co không nhỏ hơn nội dung → lưới rộng hơn trang,
   phần thừa bị body cắt mất (màn Dự án ở cửa sổ hẹp — BoD 2/10). Bảng rộng thì cuộn trong khung của chính nó. */
.sbu-charts-grid > * {
    min-width: 0;
}

.sbu-general-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.sbu-general-item {
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.06);
}

.sbu-general-item .gen-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

.sbu-general-item .gen-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   DEPARTMENT DETAIL
   ═══════════════════════════════════════════════════════════════ */

.dept-info-card {
    margin-bottom: 24px;
}

.dept-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dept-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.dept-header-row h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.dept-header-row p {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dept-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Menu ngang (tab) trang phòng-ban/đơn-vị */
.dept-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px 8px 0 0;
    transition: color .15s, border-color .15s, background .15s;
}
.dept-tab i { font-size: 12px; }
.dept-tab:hover { color: var(--text-primary); background: var(--bg-hover, rgba(6,184,196,0.06)); }
/* Menu xổ của tab-dropdown (KHCV / Báo cáo) */
/* Thanh tab (KHCV▾…) phải NỔI trên các thẻ content (Việc/Lịch có z-index sticky) — nếu không dropdown xổ ra bị đè.
   Cho thanh tab 1 stacking-context CAO + tab-wrap position:relative để menu absolute neo đúng và thắng z (BoD 14/7). */
.dept-tabbar { position: relative; z-index: 3000; }
.dept-tab-wrap { display: inline-flex; position: relative; }
.dept-tab-menu {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 3001;
    min-width: 210px; margin-top: 2px; padding: 6px;
    background: var(--bg-card-solid, #ffffff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 9px; box-shadow: 0 10px 26px rgba(0,0,0,0.14);
    max-height: min(62vh, 400px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;   /* BOX: cuộn khi dài, mượt cảm ứng iPad. KHÔNG đặt scrollbar-width chuẩn ở đây — Chrome 121+ sẽ VÔ HIỆU các rule ::-webkit-scrollbar bên dưới (lớp lỗi 17/8 thanh cuộn BSC tự ẩn) */
}
.dept-tab-menu::-webkit-scrollbar { width: 8px; }
.dept-tab-menu::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.35); border-radius: 6px; }
.dept-tab-menu::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.55); }
.dept-tab-menu::-webkit-scrollbar-track { background: transparent; }
.dept-tab-menu.open { display: block; }
.dept-tab-menu.open-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px; }   /* gần đáy màn → lật LÊN */
/* Ô LỌC nhanh (khi > 8 mục) — DÍNH đỉnh box khi cuộn */
.dept-menu-search { position: sticky; top: -6px; z-index: 3; background: var(--bg-card-solid,#fff); padding: 4px 2px 6px; margin: -6px -2px 2px; border-bottom: 1px solid var(--border-subtle,#e2e8f0); }
.dept-menu-search input { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 12px; border: 1px solid var(--border-subtle,#e2e8f0); border-radius: 7px; background: #fff; color: var(--text-primary,#0f172a); outline: none; }
.dept-menu-search input:focus { border-color: var(--accent-cyan,#06b8c4); }
.dept-menu-search input::placeholder { color: var(--text-muted,#94a3b8); }
.dept-menu-item.dd-hidden { display: none; }
.dept-menu-empty { padding: 10px 13px; font-size: 12px; color: var(--text-muted,#64748b); }
/* Tiêu đề nhóm DÍNH khi cuộn — chỉ khi KHÔNG có ô lọc (tránh chồng 2 lớp sticky) */
.dept-tab-menu:not(.has-search) .dept-menu-sep { position: sticky; top: -6px; z-index: 2; background: var(--bg-card-solid,#fff); }
.dept-menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px; border-radius: 7px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; min-height: 20px;
    user-select: none;                         /* chống bôi-đen chữ khi bấm nhanh → chọn ăn ngay */
    transition: background 0.08s ease, color 0.08s ease;
}
.dept-menu-item * { pointer-events: none; }     /* mọi click trong hàng đều tính vào hàng (không "lọt" vào icon/chữ) → nhạy hơn */
.dept-menu-item i { font-size: 11.5px; width: 15px; text-align: center; color: var(--text-muted); }
.dept-menu-item:hover, .dept-menu-item:active { background: var(--bg-hover, rgba(6,184,196,0.12)); color: var(--text-primary); }
.dept-menu-item.active { background: var(--cv-lam-06b8c4-a010); color: var(--accent-cyan); }
.dept-menu-item.active i { color: var(--accent-cyan); }
.dept-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.dept-functions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dept-function-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(148, 163, 184, 0.04);
}

.dept-function-item i {
    color: var(--accent-cyan);
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}

.dept-function-item span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.dept-folders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dept-folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.06);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dept-folder-item:hover {
    background: var(--cv-lam-06b8c4-a006);
    border-color: var(--cv-lam-06b8c4-a015);
}

.dept-folder-item i {
    font-size: 28px;
    color: var(--warning);
}

.dept-folder-item span {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.dept-folder-item small {
    font-size: 10px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   STRATEGY PAGE
   ═══════════════════════════════════════════════════════════════ */

.strategy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.strategy-vision {
    grid-column: 1 / -1;
}

.vision-quote {
    font-size: 16px;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.8;
    padding: 20px 24px;
    border-left: 3px solid var(--accent-cyan);
    background: var(--cv-lam-06b8c4-a004);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mission-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mission-list li i {
    color: var(--success);
    font-size: 14px;
    flex-shrink: 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    transition: all var(--transition-fast);
}

.value-item:hover {
    background: var(--cv-lam-06b8c4-a008);
    transform: translateY(-2px);
}

.value-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.value-item span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Goals */
.goals-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.goal-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
}

.goal-progress {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-cyan) var(--progress), rgba(148, 163, 184, 0.1) var(--progress));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.goal-progress::before {
    content: '';
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-secondary);
    position: absolute;
}

.goal-pct {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-cyan);
}

.goal-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.goal-text span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE (Restructure)
   ═══════════════════════════════════════════════════════════════ */

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(148, 163, 184, 0.1);
}

.timeline-item {
    position: relative;
    margin-bottom: 32px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.1);
    border: 2px solid rgba(148, 163, 184, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
}

.timeline-item.completed .timeline-dot {
    background: var(--cv-luc-22c722-a015);
    border-color: var(--success);
    color: var(--success);
}

.timeline-item.active .timeline-dot {
    background: var(--cv-lam-06b8c4-a015);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 12px var(--cv-lam-06b8c4-a030);
}

.timeline-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.timeline-content p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 6px;
}

.timeline-date {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   BOARD MEMBERS
   ═══════════════════════════════════════════════════════════════ */

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.board-member-card {
    text-align: center;
    padding: 32px 24px;
}

.board-member-card.featured {
    border-color: var(--cv-lam-06b8c4-a030);
    background: linear-gradient(135deg, var(--cv-lam-06b8c4-a008), var(--cv-cham-9656f6-a008));
}

.member-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    margin: 0 auto 16px;
    box-shadow: 0 0 20px var(--cv-lam-06b8c4-a020);
}

.board-member-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.member-title {
    display: block;
    font-size: 12px;
    color: var(--accent-cyan);
    font-weight: 500;
    margin-bottom: 12px;
}

.member-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   RACI TABLE
   ═══════════════════════════════════════════════════════════════ */

.raci-badge {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
}

.raci-r { background: var(--cv-lam-07949d-a015); color: var(--accent-blue); }
.raci-a { background: var(--cv-do-ef4444-a015); color: var(--danger); }
.raci-c { background: var(--cv-cam-f69d2f-a015); color: var(--warning); }
.raci-i { background: rgba(148, 163, 184, 0.1); color: var(--text-muted); }

.raci-legend {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.raci-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   FOLDER GRID (PDCA Pages)
   ═══════════════════════════════════════════════════════════════ */

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.06);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.folder-item:hover {
    background: var(--cv-lam-06b8c4-a006);
    border-color: var(--cv-lam-06b8c4-a015);
    transform: translateY(-2px);
}

.folder-icon {
    font-size: 36px;
    color: var(--warning);
}

.folder-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.folder-item small {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PLAN PLACEHOLDER
   ═══════════════════════════════════════════════════════════════ */

.plan-placeholder {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.plan-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
    color: rgba(148, 163, 184, 0.3);
}

.plan-placeholder h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.plan-placeholder p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.6;
}

.plan-placeholder span {
    font-size: 12px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .dashboard-mid-grid,
    .dashboard-bottom-grid,
    .sbu-charts-grid,
    .dept-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay.active {
        display: block;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .top-bar-search {
        display: none;
    }

    /* Fix breadcrumb vỡ trên mobile */
    .top-bar {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 4px;
    }

    .top-bar-left {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .breadcrumb {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: 12px;
    }

    .breadcrumb span, .breadcrumb a {
        white-space: nowrap;
    }

    .top-bar-right {
        flex-shrink: 0;
        gap: 4px;
    }

    .top-bar-user-btn span,
    .top-bar-time,
    .top-bar-clock {
        display: none;
    }

    /* Ẩn debug console trên mobile dù là localhost */
    #debug-console {
        display: none !important;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .strategy-grid {
        grid-template-columns: 1fr;
    }

    .quicklinks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sbu-info-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .sbu-tabs {
        flex-direction: column;
    }

    .page-container {
        padding: 0px 16px 16px 16px !important;
    }

    .dashboard-hero {
        padding: 24px 20px;
    }

    .hero-title {
        font-size: 20px;
    }

    .orgchart-wrapper {
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .folder-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY / COUNT-UP ANIMATION
   ═══════════════════════════════════════════════════════════════ */

.count-up {
    transition: all 0.3s;
}

/* ApexCharts dark theme overrides */
.apexcharts-tooltip {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.apexcharts-tooltip-title {
    background: rgba(148, 163, 184, 0.05) !important;
    border-color: var(--border-subtle) !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.apexcharts-gridline {
    stroke: rgba(148, 163, 184, 0.06);
}

.apexcharts-legend-text {
    color: var(--text-secondary) !important;
}

/* ==================== ACTION TRACKER MODALS & FORM CSS ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(5, 7, 12, 0.7);
    z-index: 5000;   /* > .dept-tabbar 3000 (BoD 18/7 — tab bar từng đè popup) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* (20/9 — GỐC ca "cả HVH giật", đo máy BoD 7–8 khung/giây · tắt backdrop-filter → 59) 8+ lớp phủ này LUÔN nằm trong trang, mỗi lớp
       fixed KÍN MÀN HÌNH + backdrop-filter, chỉ "ẩn" bằng opacity:0 → vẫn là 8 tấm kính mờ toàn màn hình: mỗi khung hình (cuộn/animation)
       GPU làm mờ cả màn hình 8 lần. Lớp phủ ĐÓNG = visibility:hidden (không vẽ, không tách lớp); mờ nền CHỈ khi .active.
       CẤM ẩn phần tử có backdrop-filter bằng opacity:0 — dùng display:none hoặc visibility:hidden. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-container {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 650px;
    max-width: 90%;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--cv-lam-00f2fe-a008);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Túm header kéo modal (BoD 20/7) — JS chung __hvhModalDragInit trong portal.js */
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    color: #f1f5f9;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(15, 23, 42, 0.6);
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    text-align: left;
}

.form-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.form-input, .form-select, .form-textarea {
    background: rgba(9, 13, 22, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}
/* select có mũi tên native → chừa padding-right cho nhãn dài (RULE 0A, cùng lớp .select-custom) */
select.form-select, select.form-input { padding-right: 26px; }

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--cv-lam-06b8c4);
    box-shadow: 0 0 0 1px var(--cv-lam-06b8c4-a020);
}

/* Ô NGÀY CHƯA GÕ THÌ NỔI — 100% HVH (BoD 3/10): ô <input type=date> đang trống (lớp hvh-date-trong do máy quét chung ở portal.js gắn) có viền xanh,
   nền đặc và hiện chữ dd/mm/yyyy như lúc đang bấm vào ô; có ngày thì về kiểu thường của bảng. :not(#_):not(#__) = cho luật này mạnh hơn luật ô nhập
   gắn theo #id của từng bảng (luật 2.12). Ô khoá (disabled / readonly) không nổi. */
input[type="date"].hvh-date-trong:not(:disabled):not([readonly]):not(#_):not(#__) {
    border: 1px solid var(--cv-lam-06b8c4) !important;
    border-radius: 4px !important;
    background: var(--bg-card-solid, #111827) !important;
    box-shadow: 0 0 0 1px var(--cv-lam-06b8c4-a025) !important;
    color: var(--text-primary) !important;
}
input[type="date"].hvh-date-trong:not(:disabled):not([readonly]):not(#_):not(#__)::-webkit-datetime-edit { opacity: 1 !important; }
input[type="date"].hvh-date-trong:not(:disabled):not([readonly]):not(#_):not(#__)::-webkit-calendar-picker-indicator { opacity: 1 !important; }
body.light-theme input[type="date"].hvh-date-trong:not(:disabled):not([readonly]):not(#_):not(#__) {
    border-color: var(--cv-lam-0c767d) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px var(--cv-lam-06b8c4-a018) !important;
    color: #0f172a !important;
}

/* RULE 0A — GỐC: không khai color-scheme nên form theo OS; máy OS dark -> icon native SÁNG -> invert(1) dưới lật thành ĐEN.
   Ép color-scheme:light cho MỌI ô ngày -> icon native TỐI -> invert(1) -> TRẮNG, đồng nhất bất kể OS sáng/tối. */
/* RULE 0A — phủ CẢ type=date LẪN type=month (ô "Kỳ quét lại" Trạm KQ dùng month) — cùng lớp lỗi icon/chữ tối trên nền tối. */
input[type="date"], .form-input[type="date"],
input[type="month"], .form-input[type="month"] { color-scheme: light !important; }

/* Style overrides for native HTML date/month picker calendar icon to ensure high contrast in dark mode */
input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
.form-input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

/* Light theme indicator color reset */
body.light-theme input[type="date"]::-webkit-calendar-picker-indicator,
body.light-theme .form-input[type="date"]::-webkit-calendar-picker-indicator,
body.light-theme input[type="month"]::-webkit-calendar-picker-indicator,
body.light-theme .form-input[type="month"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    opacity: 0.65 !important;
}

body.light-theme input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.light-theme .form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.light-theme input[type="month"]::-webkit-calendar-picker-indicator:hover,
body.light-theme .form-input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.95 !important;
}

/* Icon lịch ô KỲ mục tiêu (MTPN + KHCV) — tương phản rõ ở CẢ 2 theme (ID specificity cao hơn rule chung) */
#mtpn-bod-from::-webkit-calendar-picker-indicator,
#mtpn-bod-to::-webkit-calendar-picker-indicator,
#khcv-bod-from::-webkit-calendar-picker-indicator,
#khcv-bod-to::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6) !important;   /* nền tối → icon SÁNG rõ */
    opacity: 1 !important;
    cursor: pointer !important;
}
body.light-theme #mtpn-bod-from::-webkit-calendar-picker-indicator,
body.light-theme #mtpn-bod-to::-webkit-calendar-picker-indicator,
body.light-theme #khcv-bod-from::-webkit-calendar-picker-indicator,
body.light-theme #khcv-bod-to::-webkit-calendar-picker-indicator {
    filter: invert(0.25) !important;   /* nền trắng → icon TỐI rõ */
    opacity: 0.8 !important;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Kanban Cards interactive hover */
.kanban-card {
    transition: all 0.3s ease;
}
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 8px var(--cv-lam-06b8c4-a015);
    border-color: var(--cv-lam-06b8c4-a030) !important;
}

/* Detailed Task Modal Layout */
.task-detail-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 20px;
}

.task-detail-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-meta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
    text-align: left;
}

/* History logs */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
    color: #94a3b8;
}

.history-item {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.history-time {
    white-space: nowrap;
    font-weight: 600;
    color:var(--text-muted);
}

/* Comments list */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 150px;
    overflow-y: auto;
    padding-right: 5px;
}

.comment-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 10.5px;
    color:var(--text-muted);
}

.comment-author {
    font-weight: 700;
    color: #e2e8f0;
}

.btn-secondary-custom {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-secondary-custom:hover {
    background: rgba(255, 255, 255, 0.08);
}

.btn-primary-custom {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-primary-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--cv-lam-06b8c4-a020);
}

.select-custom {
    outline: none;
    background: rgba(9, 13, 22, 0.6);        /* dark mode: nền TỐI tường minh (đè default trắng của browser → tránh trắng/trắng) */
    color: var(--text-primary, #ffffff);     /* RULE 8B: chữ theo theme — SÁNG ở dark, ĐẬM ở light */
}
/* Options của dropdown chọn — đọc rõ ở cả 2 nền */
.select-custom option { background: #1e293b; color: #f1f5f9; }
body.light-theme .select-custom option { background: #ffffff; color: #0f172a; }
/* #raci-sbu-select gắn cứng nền tối inline (RULE 8B.3) → light theme override về trắng + chữ đậm */
body.light-theme #raci-sbu-select { background: #ffffff !important; color: #0f172a !important; }

/* ═══ QUY TẮC TƯƠNG PHẢN — light theme: ô nhập/chọn/vùng-văn-bản & nút phụ phải SÁNG, chữ ĐẬM ═══
   (ghi đè mọi style nền-tối gắn-inline để KHÔNG có ô tối/chữ chìm trên nền sáng) */
body.light-theme input:not([type="checkbox"]):not([type="radio"]),
body.light-theme select,
body.light-theme textarea {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}
body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
    border-color: var(--cv-lam-018b94) !important;
}
/* Nút PHỤ nền-trong-suốt/tối + chữ trắng → ở light theme cho chữ đậm để không tàng hình */
body.light-theme .btn-secondary-custom {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Pre-meeting Report Styles */
.meeting-decision-box {
    background: var(--cv-lam-06b8c4-a003);
    border: 1px dashed var(--cv-lam-06b8c4-a015);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: left;
}

.meeting-decision-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cv-lam-06b8c4);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM LIGHT THEME — HIGH CONTRAST & READABILITY OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
body.light-theme {
    --bg-primary: #f1f5f9; /* Soft Slate 100 for high-contrast container backing */
    --bg-secondary: #ffffff; /* Clean pure white for primary elements */
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-solid: #ffffff;
    --bg-hover: #f8fafc;
    
    --accent-gradient: linear-gradient(135deg, var(--cv-lam-018b94), var(--cv-cham-6d28d9)); /* Vivid Indigo-Blue for readability */
    --accent-gradient-reverse: linear-gradient(135deg, var(--cv-cham-6d28d9), var(--cv-lam-018b94));
    --accent-cyan: var(--cv-lam-018b94);
    --accent-purple: var(--cv-cham-6d28d9);
    --accent-blue: var(--cv-lam-0e666c);
    
    --text-primary: #0f172a; /* Slate 900 - Dark charcoal for maximum contrast */
    --text-secondary: #334155; /* Slate 700 - Highly readable body copy */
    --text-muted: #475569; /* Slate 600 - High-contrast secondary text */
    
    --success: var(--cv-luc-158115); /* High-contrast Forest Green */
    --warning: var(--cv-cam-a45e08); /* High-contrast Ochre */
    --danger: var(--cv-do-b91c1c); /* High-contrast Crimson */
    --info: var(--cv-lam-026f76);
    
    /* High-contrast status colors for light-theme badges */
    --status-overdue-bg: var(--cv-do-b91c1c-a008);
    --status-overdue-color: var(--cv-do-b91c1c);
    --status-new-bg: rgba(71, 85, 105, 0.08);
    --status-new-color: #475569;
    --status-inprogress-bg: var(--cv-lam-026f76-a008);
    --status-inprogress-color: var(--cv-lam-026f76);
    --status-waiting-bg: var(--cv-cam-a45e08-a008);
    --status-waiting-color: var(--cv-cam-a45e08);
    --status-approval-bg: var(--cv-cham-6d28d9-a008);
    --status-approval-color: var(--cv-cham-6d28d9);
    --status-completed-bg: var(--cv-luc-158115-a008);
    --status-completed-color: var(--cv-luc-158115);
    
    --border-subtle: rgba(15, 23, 42, 0.15); /* More visible borders in light mode */
    --border-hover: rgba(15, 23, 42, 0.25);
    
    --bg-pnl-header: #f1f5f9;
    --bg-pnl-highlight: var(--cv-luc-eefdee);
    --bg-pnl-percent: #f0f9ff;
    
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-blur: blur(16px);
    --glass-border: 1px solid rgba(15, 23, 42, 0.12);
    
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 20px var(--cv-lam-018b94-a010);
}

/* ════ RULE 8B.5/8B.6 — CHỐNG CHỮ MỜ: ép màu chữ XÁM-CỨNG (dark-theme) sang biến đọc-rõ trên light theme.
   Sửa tại ĐIỂM CHUNG (1 khối) thay vì 115 chỗ inline. CHỪA placeholder (::placeholder riêng) + ô disabled
   (mờ là tín hiệu đúng) qua :not(:disabled). KHÔNG đụng layout/logic — chỉ màu chữ. */
body.light-theme [style*="color:#cbd5e1"]:not(:disabled), body.light-theme [style*="color: #cbd5e1"]:not(:disabled),
body.light-theme [style*="color:#94a3b8"]:not(:disabled), body.light-theme [style*="color: #94a3b8"]:not(:disabled),
body.light-theme [style*="color:#e2e8f0"]:not(:disabled), body.light-theme [style*="color: #e2e8f0"]:not(:disabled),
body.light-theme [style*="color:#e5e7eb"]:not(:disabled), body.light-theme [style*="color: #e5e7eb"]:not(:disabled) {
    color: var(--text-muted) !important;   /* Slate-600 ~7:1, đạt AA */
}

/* Light Theme Component Specific Overrides */
body.light-theme .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* ── CÂY MENU trên NỀN TRẮNG (RULE 8B — BoD nhắc 11/7: màu phải đạt cả 2 nền) ──
   1 luật chung: icon accent sáng (chuẩn nền tối) tự TỐI LẠI giữ nguyên tông màu; đường cây đậm hơn. */
body.light-theme .nav-item.nav-tree-child > i,
body.light-theme .nav-item.nav-tree-child2 > i,
body.light-theme .nav-item.nav-cctc-child > i {
    filter: saturate(1.15) brightness(0.62);   /* var(--cv-lam-11d5e2)→~var(--cv-lam-158393), var(--cv-luc-6bed6b)→~var(--cv-luc-239523) … ≥3:1 trên trắng */
}
body.light-theme .nav-item.nav-tree-child,
body.light-theme .nav-item.nav-cctc-child {
    background-image: linear-gradient(rgba(71,85,105,0.35), rgba(71,85,105,0.35));
}
body.light-theme .nav-item.nav-tree-child2 {
    background-image: linear-gradient(rgba(71,85,105,0.35), rgba(71,85,105,0.35)), linear-gradient(rgba(71,85,105,0.28), rgba(71,85,105,0.28));
}
body.light-theme .nav-item.nav-tree-child::after,
body.light-theme .nav-item.nav-cctc-child::after {
    background: rgba(71,85,105,0.35);
}
body.light-theme .nav-item.nav-tree-child2::after {
    background: rgba(71,85,105,0.28);
}

body.light-theme .sidebar-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .top-bar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .logo-title {
    color: #0f172a !important;
}

body.light-theme .nav-section-title {
    color: #475569 !important;
    font-weight: 700 !important;
}

body.light-theme .nav-item {
    color: #334155 !important;
}

body.light-theme .nav-item:hover, 
body.light-theme .nav-item.active,
body.light-theme .sidebar-project-item:hover,
body.light-theme .sidebar-project-item.active {
    background: var(--cv-lam-018b94-a008) !important;
    color: var(--cv-lam-018b94) !important;
}

body.light-theme .nav-item.active i {
    color: var(--cv-lam-018b94) !important;
}

body.light-theme .user-name {
    color: #0f172a !important;
}

body.light-theme .user-role {
    color: #475569 !important;
}

body.light-theme .modal-container {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

body.light-theme .modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .form-textarea,
body.light-theme .select-custom,
body.light-theme .comment-box-input input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
    color: #0f172a !important;
}

body.light-theme .form-input:focus,
body.light-theme .form-select:focus,
body.light-theme .form-textarea:focus,
body.light-theme .select-custom:focus,
body.light-theme .comment-box-input input:focus {
    border-color: var(--cv-lam-018b94) !important;
    box-shadow: 0 0 0 3px var(--cv-lam-018b94-a015) !important;
}

body.light-theme .modal-title {
    color: #0f172a !important;
}

body.light-theme .modal-close-btn {
    color: #475569 !important;
}

body.light-theme .modal-close-btn:hover {
    color: #0f172a !important;
}

body.light-theme .form-label,
body.light-theme .detail-meta-label {
    color: #334155 !important;
    font-weight: 700 !important;
}

body.light-theme .form-input::placeholder,
body.light-theme .form-textarea::placeholder {
    color:var(--text-muted) !important;
}

/* ApexCharts Contrast Adjustments for Light Theme */
body.light-theme .apexcharts-canvas text {
    fill: #0f172a !important;
}

body.light-theme .apexcharts-tooltip {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .apexcharts-tooltip-title {
    background: #f1f5f9 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}

body.light-theme .apexcharts-legend-text {
    color: #334155 !important;
}

body.light-theme .apexcharts-gridline,
body.light-theme .apexcharts-xaxis-tick {
    stroke: rgba(15, 23, 42, 0.08) !important;
}

/* Gantt/Timeline Grid & RACI Matrix Contrast for Light Theme */
body.light-theme .raci-header-cell {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

body.light-theme .raci-cell {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

body.light-theme .raci-cell:hover {
    background: #f8fafc !important;
}

body.light-theme .raci-badge {
    box-shadow: var(--shadow-sm) !important;
}

body.light-theme .task-detail-sidebar {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

/* Glass card styling overrides */
body.light-theme .glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: var(--shadow-sm) !important;
}
/* (20/9 BoD "khung màu bảy sắc cầu vồng đâu rồi") — bản cũ dùng shorthand `border … !important` nên NUỐT viền nhấn màu
   inline (border-top/left: 3px solid <màu>) của 39 thẻ ở nền sáng. Cạnh nào thẻ tự khai viền nhấn thì để nguyên. */
body.light-theme .glass-card:not([style*="border-top"]) { border-top: 1px solid rgba(15, 23, 42, 0.08) !important; }
body.light-theme .glass-card:not([style*="border-left"]) { border-left: 1px solid rgba(15, 23, 42, 0.08) !important; }

body.light-theme .glass-card:hover {
    border-right-color: rgba(15, 23, 42, 0.12) !important;
    border-bottom-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .btn-secondary-custom {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}

body.light-theme .btn-secondary-custom:hover {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}


/* Parent Wrapper Card Transparency to let nested cards stand out */
body.light-theme #asana-main-view-contents-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Specific inner glass cards styling under Việc của tôi to pop with contrast */
body.light-theme #asana-view-mywork .glass-card,
body.light-theme #mywork-report-panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 14px !important;
}

body.light-theme #mywork-dashboard-summary {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 8px 12px !important;
}

/* Remove vertical split border in dashboard stats card under Light Theme */
body.light-theme #mywork-dashboard-summary > div:nth-child(2) {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Scrollbars for Light theme */
body.light-theme ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.4) !important;
    border: 2px solid #ffffff !important;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--cv-tim-c924c9-a085) !important;
    box-shadow: 0 0 10px var(--cv-tim-c924c9-a040) !important;
}

/* ─── NOTIFICATION DROPDOWN ─── */
.notification-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.notification-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: 380px;
    background: var(--bg-card-solid);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 5000;
    display: none;
    animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: var(--glass-border);
    background: rgba(148, 163, 184, 0.04);
}

.notification-header h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.notification-mark-read {
    font-size: 11px;
    color: var(--accent-cyan);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.notification-mark-read:hover {
    color: var(--accent-purple);
    text-decoration: underline;
}

.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
}

.notification-item {
    padding: 14px 18px;
    border-bottom: var(--glass-border);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    gap: 12px;
    text-align: left;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.read {
    opacity: 0.65;
}

.notification-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.notification-item.danger .notification-icon-wrap {
    background: var(--cv-do-ef4444-a015);
    color: var(--danger);
}

.notification-item.warning .notification-icon-wrap {
    background: var(--cv-cam-f69d2f-a015);
    color: var(--warning);
}

.notification-item.success .notification-icon-wrap {
    background: var(--cv-luc-22c722-a015);
    color: var(--success);
}

.notification-info {
    flex: 1;
}

.notification-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.notification-desc {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-time {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.notification-footer {
    padding: 12px;
    text-align: center;
    border-top: var(--glass-border);
    background: rgba(148, 163, 184, 0.02);
}

.notification-view-all {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.notification-view-all:hover {
    color: var(--accent-cyan);
}

/* ─── DUPONT DETAILED BREAKDOWN STYLES ─── */
.dupont-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast) ease;
}

.dupont-sub-item:hover {
    background: var(--bg-hover);
    border-color: var(--cv-lam-06b8c4-a030);
}

.dupont-sub-item.mini {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 6px 10px;
}

.dupont-sub-item .sub-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dupont-sub-item .sub-value {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 600;
}

.dupont-sub-item.mini .sub-label {
    font-size: 9.5px;
    color: var(--text-muted);
}

.dupont-sub-item.mini .sub-value {
    font-size: 10px;
    color: var(--text-primary);
    font-weight: 600;
}

/* Sidebar Drag-Resize Feature */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s, width 0.2s;
    z-index: 1010;
}
.sidebar-resizer:hover, .sidebar-resizer.active {
    background: var(--cv-lam-06b8c4-a040);
    width: 8px;
}
body.resizing {
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}
body.resizing .sidebar,
body.resizing .main-content {
    transition: none !important;
}

/* Custom table styling for Asana view */
.table-custom {
    width: 100%;
    border-collapse: separate;   /* 21/8: sticky th cần separate (lớp "lòi dữ liệu qua khe header") */
    border-spacing: 0;
    text-align: left;
    font-size: 13px;
}

.table-custom th {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.table-custom thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card-solid, #0f172a) !important;   /* 21/8: nền ĐẶC theo theme — hết nhìn xuyên header */
}

body.light-theme .table-custom thead th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.table-custom td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-primary);
}

.table-custom tr:hover td {
    background: rgba(255,255,255,0.01);
}

body.light-theme .table-custom th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .table-custom td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

body.light-theme .table-custom tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}

/* HIGH-CONTRAST ASANA TABLE STYLE FOR LIGHT THEME */
body.light-theme #asana-matrix-scroll-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.light-theme table.table-custom thead tr {
    background: #f1f5f9 !important;
}

body.light-theme table.table-custom th {
    color: #0f172a !important;
    border-bottom: 2px solid rgba(15, 23, 42, 0.15) !important;
}

body.light-theme table.table-custom tr[data-kpi-id] {
    background: var(--cv-lam-06b8c4-a006) !important;
    border-left: 4px solid var(--cv-lam-018b94) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

body.light-theme table.table-custom tr[data-kpi-id] span {
    color: #0f172a !important;
}

body.light-theme table.table-custom tr[data-kpi-id] td {
    color: #334155 !important;
}

body.light-theme table.table-custom tr[data-kpi-id] .toggle-kpi-btn i {
    color: var(--cv-lam-018b94) !important;
}

body.light-theme table.table-custom tr.tree-row {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body.light-theme table.table-custom tr.tree-row:hover td {
    background: #f8fafc !important;
}

body.light-theme table.table-custom tr.tree-row td {
    color: #334155 !important;
}

body.light-theme table.table-custom tr.tree-row td span {
    color: #334155 !important;
}

body.light-theme table.table-custom tr.tree-row .task-title-click-target {
    font-weight: 500 !important;
}

body.light-theme table.table-custom tr.tree-row.depth-1 .task-title-click-target {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 10px !important;
}

body.light-theme table.table-custom tr.tree-row.depth-2 .task-title-click-target {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 9.5px !important;
}

body.light-theme table.table-custom tr.tree-row.depth-3 .task-title-click-target {
    font-weight: 500 !important;
    color: #475569 !important;
    font-size: 9px !important;
}

body.light-theme table.table-custom tr.tree-row td i {
    color: #475569 !important;
}

body.light-theme table.table-custom tr.tree-row .btn-subtask-add {
    color: var(--cv-cham-6d28d9-chu) !important;
}

/* Premium Matrix Horizontal Scroll customizations globally */
#asana-matrix-scroll-wrapper,
.data-table-container,
.table-responsive,
.orgchart-wrapper,
.kpi-quick-filters-scroll,
.oc-columns {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* (17/8) ĐÃ XOÁ scrollbar-width/scrollbar-color chuẩn: Chrome 121+ hễ thấy scrollbar-color ≠ auto là BỎ QUA
       toàn bộ ::-webkit-scrollbar bên dưới → thanh cuộn rơi về overlay macOS tự ẩn (BoD 17/8: "rê chuột không
       thấy thanh cuộn dọc BSC"). Firefox mất màu tuỳ biến — chấp nhận, đổi lại Chrome/Safari LUÔN HIỆN thanh cuộn. */
    transition: border-color 0.3s, box-shadow 0.3s;   /* (22/8) không animate kích thước khung cuộn */
    overflow-x: scroll !important;
}

#asana-matrix-scroll-wrapper,
.data-table-container {
    max-height: 65vh;
    min-height: 300px;
    overflow-y: auto !important;
}

/* BoD 12/8: bảng KHCV thả FULL chiều dọc theo nội dung (trang cuộn) — hết co dọc + đất thừa trên Windows */
#asana-matrix-scroll-wrapper {
    max-height: none !important;
}

#asana-matrix-scroll-wrapper:active,
#asana-matrix-scroll-wrapper.grabbing,
.data-table-container:active,
.data-table-container.grabbing,
.table-responsive:active,
.table-responsive.grabbing,
.orgchart-wrapper:active,
.orgchart-wrapper.grabbing,
.kpi-quick-filters-scroll:active,
.kpi-quick-filters-scroll.grabbing,
.oc-columns:active,
.oc-columns.grabbing {
    cursor: grabbing;
}

#asana-matrix-scroll-wrapper:focus,
.data-table-container:focus,
.table-responsive:focus,
.orgchart-wrapper:focus,
.kpi-quick-filters-scroll:focus,
.oc-columns:focus {
    border-color: var(--cv-lam-00f2fe-a040) !important;
    box-shadow: 0 0 20px var(--cv-lam-00f2fe-a020), inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* Customize scrollbars within the horizontal scroll pane - Made thicker (12px) & highly visible */
#asana-matrix-scroll-wrapper::-webkit-scrollbar,
.data-table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.orgchart-wrapper::-webkit-scrollbar,
.kpi-quick-filters-scroll::-webkit-scrollbar,
.oc-columns::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

#asana-matrix-scroll-wrapper::-webkit-scrollbar-track,
.data-table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.orgchart-wrapper::-webkit-scrollbar-track,
.kpi-quick-filters-scroll::-webkit-scrollbar-track,
.oc-columns::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
}

#asana-matrix-scroll-wrapper::-webkit-scrollbar-thumb,
.data-table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.orgchart-wrapper::-webkit-scrollbar-thumb,
.kpi-quick-filters-scroll::-webkit-scrollbar-thumb,
.oc-columns::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45) !important;
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.4);
    transition: background 0.3s;
}

#asana-matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover,
.data-table-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.orgchart-wrapper::-webkit-scrollbar-thumb:hover,
.kpi-quick-filters-scroll::-webkit-scrollbar-thumb:hover,
.oc-columns::-webkit-scrollbar-thumb:hover {
    background: var(--cv-lam-06b8c4-a075) !important;
    box-shadow: 0 0 8px var(--cv-lam-06b8c4-a035) !important;
}

/* Light Theme Scrollbars Override for perfect contrast
   (17/8) đã xoá block scrollbar-color chuẩn — cùng lớp lỗi Chrome 121+ vô hiệu ::-webkit-scrollbar (xem chú thích trên) */
body.light-theme #asana-matrix-scroll-wrapper::-webkit-scrollbar-track,
body.light-theme .data-table-container::-webkit-scrollbar-track,
body.light-theme .table-responsive::-webkit-scrollbar-track,
body.light-theme .orgchart-wrapper::-webkit-scrollbar-track,
body.light-theme .kpi-quick-filters-scroll::-webkit-scrollbar-track,
body.light-theme .oc-columns::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px;
}

body.light-theme #asana-matrix-scroll-wrapper::-webkit-scrollbar-thumb,
body.light-theme .data-table-container::-webkit-scrollbar-thumb,
body.light-theme .table-responsive::-webkit-scrollbar-thumb,
body.light-theme .orgchart-wrapper::-webkit-scrollbar-thumb,
body.light-theme .kpi-quick-filters-scroll::-webkit-scrollbar-thumb,
body.light-theme .oc-columns::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.4) !important;
    border: 2px solid #ffffff;
    border-radius: 6px;
}

body.light-theme #asana-matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover,
body.light-theme .data-table-container::-webkit-scrollbar-thumb:hover,
body.light-theme .table-responsive::-webkit-scrollbar-thumb:hover,
body.light-theme .orgchart-wrapper::-webkit-scrollbar-thumb:hover,
body.light-theme .kpi-quick-filters-scroll::-webkit-scrollbar-thumb:hover,
body.light-theme .oc-columns::-webkit-scrollbar-thumb:hover {
    background: var(--cv-tim-c924c9-a085) !important;
    box-shadow: 0 0 10px var(--cv-tim-c924c9-a040) !important;
}

/* ═══ Thanh cuốn OVERLAY tự vẽ (MTPN + KHCV…): ngang ở ĐÁY, dọc ở LỀ PHẢI ═══
   Ẩn scrollbar gốc; rê chuột vào sát lề → thanh phủ nổi rõ (.show) để TÚM kéo. JS đồng bộ vị trí núm. */
.mtpn-ovh { scrollbar-width: none !important; -ms-overflow-style: none !important; }   /* ẩn CHỦ ĐÍCH cho máy overlay tự vẽ — ngoại lệ hợp lệ duy nhất của scrollbar-width chuẩn */
.mtpn-ovh::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

.mtpn-ovwrap { position: relative; }
.mtpn-ov {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 40;
}
.mtpn-ov.show { opacity: 1; pointer-events: auto; }
.mtpn-ov.mtpn-ov-fixed { position: fixed; z-index: 60; }   /* thanh ngang dock đáy viewport — JS đặt left/width/top.
   (20/8: từng thử opacity:.45 + pointer-events:auto thường trực — dải 8px cố định đáy màn CHẶN click/scrollbar phía sau → hoàn nguyên) */
.mtpn-ov-x { height: 8px; }
.mtpn-ov-y { top: 4px; bottom: 14px; right: 2px; width: 6px; }   /* BoD 25/7: thanh dọc mảnh 1/2 (12→6px), hết che cột ▾ */
.mtpn-ov-thumb {
    position: absolute;
    border-radius: 7px;
    background: var(--cv-tim-c924c9-a090);
    box-shadow: 0 0 10px var(--cv-tim-c924c9-a050);
    cursor: pointer;
}
.mtpn-ov-x .mtpn-ov-thumb { top: 0; bottom: 0; left: 0; min-width: 32px; }
.mtpn-ov-y .mtpn-ov-thumb { left: 0; right: 0; top: 0; min-height: 32px; }
.mtpn-ov-thumb:hover { background: var(--cv-tim-c924c9); box-shadow: 0 0 14px var(--cv-tim-c924c9-a070); }
body.light-theme .mtpn-ov-thumb { background: var(--cv-tim-ac16ac-a090); box-shadow: 0 0 10px var(--cv-tim-ac16ac-a045); }
body.light-theme .mtpn-ov-thumb:hover { background: var(--cv-tim-ac16ac); }

/* ═══════════════════════════════════════════════════════════════
   3C SCORING TOOL — Interactive Analysis Module
   ═══════════════════════════════════════════════════════════════ */

.c3-panel {
    transition: all 0.3s ease;
}
.c3-panel:hover {
    box-shadow: 0 0 20px var(--cv-lam-06b8c4-a008);
}

.c3-criteria-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c3-criteria-row {
    display: grid;
    grid-template-columns: 1fr 140px 32px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.04);
    transition: background 0.2s;
}
.c3-criteria-row:hover {
    background: rgba(148, 163, 184, 0.08);
}

.c3-criteria-label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c3-weight-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--cv-lam-06b8c4-a015);
    color: var(--cv-lam-06b8c4);
    flex-shrink: 0;
}
.c3-wb-amber {
    background: var(--cv-cam-f69d2f-a015);
    color: var(--cv-cam-f69d2f);
}
.c3-wb-purple {
    background: var(--cv-cham-9656f6-a015);
    color: var(--cv-cham-9656f6-chu);
}

.c3-criteria-val {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
    text-align: right;
    min-width: 28px;
}

/* Range Slider Base */
.c3-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.15);
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}
.c3-slider:hover {
    height: 8px;
}

/* Slider Thumbs */
.c3-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.c3-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.c3-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.3);
}
.c3-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    cursor: grab;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Cyan Theme */
.c3-slider-cyan::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--cv-lam-06b8c4), var(--cv-lam-11d5e2));
    box-shadow: 0 0 10px var(--cv-lam-06b8c4-a050);
}
.c3-slider-cyan::-moz-range-thumb {
    background: linear-gradient(135deg, var(--cv-lam-06b8c4), var(--cv-lam-11d5e2));
    box-shadow: 0 0 10px var(--cv-lam-06b8c4-a050);
}

/* Amber Theme */
.c3-slider-amber::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--cv-cam-f69d2f), var(--cv-cam-fcbc6e));
    box-shadow: 0 0 10px var(--cv-cam-f69d2f-a050);
}
.c3-slider-amber::-moz-range-thumb {
    background: linear-gradient(135deg, var(--cv-cam-f69d2f), var(--cv-cam-fcbc6e));
    box-shadow: 0 0 10px var(--cv-cam-f69d2f-a050);
}

/* Purple Theme */
.c3-slider-purple::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--cv-cham-9656f6), var(--cv-cham-b486fa));
    box-shadow: 0 0 10px var(--cv-cham-9656f6-a050);
}
.c3-slider-purple::-moz-range-thumb {
    background: linear-gradient(135deg, var(--cv-cham-9656f6), var(--cv-cham-b486fa));
    box-shadow: 0 0 10px var(--cv-cham-9656f6-a050);
}

/* Zone Cards */
.c3-zone-card {
    transition: all 0.3s ease;
}
.c3-zone-card.c3-zone-active {
    box-shadow: 0 0 16px var(--cv-luc-22c722-a020);
    border-color: var(--cv-luc-22c722-a050) !important;
    background: var(--cv-luc-22c722-a006);
}
#c3-zc-losing.c3-zone-active {
    box-shadow: 0 0 16px var(--cv-do-ef4444-a020);
    border-color: var(--cv-do-ef4444-a050) !important;
    background: var(--cv-do-ef4444-a006);
}
#c3-zc-risky.c3-zone-active {
    box-shadow: 0 0 16px var(--cv-cam-f69d2f-a020);
    border-color: var(--cv-cam-f69d2f-a050) !important;
    background: var(--cv-cam-f69d2f-a006);
}
#c3-zc-dumb.c3-zone-active {
    box-shadow: 0 0 16px rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: rgba(100, 116, 139, 0.06);
}

/* AI Analysis button hover */
#c3-ai-analyze-btn:hover {
    background: var(--cv-tim-e929e9-a020) !important;
    border-color: var(--cv-tim-e929e9-a060) !important;
    box-shadow: 0 0 12px var(--cv-tim-e929e9-a030);
    transform: translateY(-1px);
}

/* AI Result text animation */
@keyframes c3TypeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.c3-ai-paragraph {
    animation: c3TypeIn 0.4s ease-out forwards;
}

/* Responsive: stack layout on smaller screens */
@media (max-width: 1100px) {
    #page-plan-insight > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
    #page-plan-insight > div:nth-child(3) {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RACI TABLE: COMPACT LAYOUT — fit all 18 KPIs on screen
   ═══════════════════════════════════════════════════════════════ */

/* CRITICAL: border-collapse: collapse breaks position: sticky in Chrome.
   Must use separate + border-spacing: 0 for sticky columns to work. */
.raci-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.raci-table thead th {
    padding: 8px 10px !important;
    font-size: 10.5px !important;
}

.raci-table tbody td {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.3;
}

/* Perspective group header rows — more compact */
.raci-table tbody tr[style*="font-weight: 700"] td {
    padding: 7px 12px !important;
    font-size: 12px !important;
}

/* Smaller STT badges */
.raci-table .raci-sticky-stt span {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
}

/* Smaller RACI badges */
.raci-table .raci-badge {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
}

/* Perspective group header — sticky + solid background */
.raci-perspective-cell {
    background: var(--bg-secondary, #1e293b);
}

body.light-theme .raci-perspective-cell {
    background: #f8fafc;
}

/* ═══ (22/8 — RULE 0A.2 điểm chung) LỚP LỖI "CUỘN LÁC": khung cuộn có sticky header/cột nằm TRONG thẻ
   backdrop-filter → trình duyệt không tách lớp compositor cho khung cuộn lồng, mỗi tick cuộn vẽ lại + làm mờ
   lại cả thẻ trên main-thread. Trước đây vá lẻ 3 trang (#page-raci/#page-employees/#page-board tắt blur);
   nay gom: THẺ GLASS NÀO CHỨA KHUNG CUỘN THÌ KHÔNG BLUR. Blur trên nền phẳng light theme gần như vô hình,
   chỉ tốn GPU. Firefox < 121 không có :has() → rơi về 3 override cũ bên dưới (giữ nguyên). */
.glass-card:has(.khth-scroll, .table-responsive, .data-table-container, #asana-matrix-scroll-wrapper,
                .orgchart-wrapper, .kpi-quick-filters-scroll, .oc-columns, [data-fit-bottom], #cat-scroll) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#page-raci .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 12px !important;
}

#page-raci .page-header {
    margin-bottom: 4px !important;
}

#page-raci .page-header h2 {
    font-size: 15px !important;
    margin-bottom: 0px !important;
}

#page-raci .page-desc {
    display: none !important;
}

#page-raci .card-header {
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
}

#page-raci .card-header h3 {
    font-size: 12.5px !important;
}

#page-raci .sbu-tab {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
}

#page-raci select.select-custom {
    padding: 4px 22px 4px 8px !important;   /* chừa mũi tên native (RULE 0A) */
    font-size: 10.5px !important;
}

#page-raci .raci-legend {
    padding: 4px 8px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    gap: 12px !important;
}

#page-raci .table-responsive {
    margin-top: 2px !important;
    max-height: calc(100vh - 175px) !important;
    max-height: calc(100dvh - 175px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEES DIRECTORY & RBAC STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Status Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-status.active {
    background: var(--cv-luc-22c722-a015);
    color: var(--cv-luc-51df51);
    border: 1px solid var(--cv-luc-22c722-a025);
}

.badge-status.blocked {
    background: var(--cv-do-ef4444-a015);
    color: var(--cv-do-f87171);
    border: 1px solid var(--cv-do-ef4444-a025);
}

/* System Role Badge */
.badge-system-role {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10.5px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Actions styling */
.action-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.action-btn:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.action-btn.btn-perm:hover {
    color: var(--accent-cyan);
    border-color: var(--cv-lam-06b8c4-a030);
    box-shadow: 0 0 8px var(--cv-lam-06b8c4-a020);
}

.action-btn.btn-edit:hover {
    color: var(--warning);
    border-color: var(--cv-cam-f69d2f-a030);
    box-shadow: 0 0 8px var(--cv-cam-f69d2f-a020);
}

.action-btn.btn-delete:hover {
    color: var(--danger);
    border-color: var(--cv-do-ef4444-a030);
    box-shadow: 0 0 8px var(--cv-do-ef4444-a020);
}

/* Light theme overrides */
body.light-theme .badge-status.active {
    background: var(--cv-luc-defcde);
    color: var(--cv-luc-158115);
    border-color: var(--cv-luc-bff7bf);
}

body.light-theme .badge-status.blocked {
    background: var(--cv-do-fee2e2);
    color: var(--cv-do-b91c1c);
    border-color: var(--cv-do-fca5a5);
}

body.light-theme .badge-system-role {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

body.light-theme .action-btn {
    border-color: #e2e8f0;
    background: #f8fafc;
    color:var(--text-muted);
}

body.light-theme .action-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Modern Permission Switch Toggle */
.switch-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.switch-input {
    display: none;
}

.switch-label {
    position: relative;
    width: 36px;
    height: 18px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    transition: background-color 0.2s;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.switch-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #94a3b8;
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
}

.switch-input:checked + .switch-label {
    background: var(--cv-tim-e929e9-a025);
    border-color: var(--cv-tim-e929e9-a035);
}

.switch-input:checked + .switch-label::after {
    transform: translateX(18px);
    background: var(--cv-tim-e929e9);
}

body.light-theme .switch-label {
    background: #cbd5e1;
}

body.light-theme .switch-label::after {
    background: #64748b;
}

body.light-theme .switch-input:checked + .switch-label {
    background: var(--cv-tim-fbcdfb);
}

body.light-theme .switch-input:checked + .switch-label::after {
    background: var(--cv-tim-c922c9);
}

/* Fix backdrop-filter to enable position:sticky on #page-employees */
#page-employees .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TEXT SHARPENING & HIGH CONTRAST PATCH
   ═══════════════════════════════════════════════════════════════ */
body, html, input, select, textarea, button {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Elevate contrast for all text in dark theme to prevent blurriness */
body:not(.light-theme) {
    color: #f8fafc !important; /* Crisp clean off-white */
}

body:not(.light-theme) .page-desc,
body:not(.light-theme) .card-desc,
body:not(.light-theme) .text-muted,
body:not(.light-theme) p {
    color: #cbd5e1 !important; /* High contrast secondary text */
    opacity: 1 !important; /* Prevent opacity-induced blurriness */
}

body:not(.light-theme) td,
body:not(.light-theme) th {
    color: #f1f5f9 !important; /* Very crisp white table text */
}

/* NGUYÊN TẮC MÀU: modal/overlay nền SÁNG cố định phải tự sửa chữ tối (vì rule td/.text-muted/p ở trên ép màu sáng cho theme tối).
   Dùng class .hvh-light-modal trên hộp modal nền trắng → chữ readable. Ô màu ngữ nghĩa (KQ xanh, chênh xanh/đỏ) dùng inline !important để thắng tiếp. */
body:not(.light-theme) .hvh-light-modal td,
body:not(.light-theme) .hvh-light-modal th,
body:not(.light-theme) .hvh-light-modal p,
body:not(.light-theme) .hvh-light-modal .text-muted { color: #334155 !important; }

body:not(.light-theme) .nav-item span {
    color: #e2e8f0 !important;
}

body:not(.light-theme) .nav-item:hover span,
body:not(.light-theme) .nav-item.active span {
    color: #ffffff !important;
    text-shadow: none !important; /* Avoid font blur caused by glows */
}

/* Light theme high contrast overrides */
body.light-theme {
    color: #0f172a !important; /* Crisp slate-900 */
}

body.light-theme .page-desc,
body.light-theme .card-desc,
body.light-theme .text-muted,
body.light-theme p {
    color: #475569 !important; /* Slate-600 */
    opacity: 1 !important;
}

body.light-theme td,
body.light-theme th {
    color: #1e293b !important; /* Slate-800 */
}

/* ═══════════════════════════════════════════════════════════════
   ASANA TREE/TABLE: COMPACT & SCROLL-OPTIMIZED UX/UI (MATCHING RACI)
   ═══════════════════════════════════════════════════════════════ */
#page-board .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 12px !important;
}

#page-board .page-header {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
}

#page-board .page-header h2 {
    font-size: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#page-board .page-desc {
    display: none !important;
}

#asana-hud-dashboard {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

#asana-hud-dashboard .glass-card {
    padding: 6px 10px !important;
}

#asana-hud-dashboard .glass-card div div:first-child {
    font-size: 9px !important;
}

#asana-hud-dashboard .glass-card div div:last-child {
    font-size: 15px !important;
    margin-top: 1px !important;
}

#asana-hud-dashboard .glass-card i {
    font-size: 16px !important;
}

#page-board select.select-custom {
    padding: 4px 22px 4px 8px !important;   /* chừa mũi tên native (RULE 0A) */
    font-size: 10.5px !important;
    height: 30px !important;
}

#asana-view-tabs {
    height: 30px !important;
}

#asana-view-tabs .sbu-tab {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

#btn-asana-new-task {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 30px !important;
}

/* Asana tree container — BoD 12/8: bảng thả FULL chiều dọc theo nội dung (trang cuộn), hết co dọc Windows */
#asana-matrix-scroll-wrapper {
    margin-top: 2px !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* Sticky Headers & Columns styling for Asana Table */
#asana-matrix-scroll-wrapper table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#asana-matrix-scroll-wrapper table thead tr {
    height: 22px !important;
}

#asana-matrix-scroll-wrapper table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    padding: 4px 6px !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    background: #0f172a !important; /* Dark theme default */
    border-bottom: 2px solid var(--cv-lam-06b8c4-a025) !important;
    vertical-align: middle !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

#asana-matrix-scroll-wrapper table thead th i {
    font-size: 8px !important;
    margin-right: 4px !important;
}

body.light-theme #asana-matrix-scroll-wrapper table thead th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-bottom: 2px solid rgba(15, 23, 42, 0.15) !important;
}

/* Sticky Column 1 & 2 for Table Body */
#asana-matrix-scroll-wrapper table tbody td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 15 !important;
}

#asana-matrix-scroll-wrapper table tbody td:nth-child(2) {
    position: sticky !important;
    left: 300px !important;   /* = bề rộng CHỐT cột 1 (renderAsanaTreeView W[0], luật 1.67) */
    z-index: 15 !important;
}

/* Cột 3 ĐVT (BoD 2/10: ĐVT tách cột riêng, đứng sau Mục tiêu) + cột 4 TRỌNG SỐ cũng DÍNH — mốc = 300 (cột 1) + 110 (cột 2) + 58 (cột 3),
   bề rộng chốt ở renderAsanaTreeView W[] */
#asana-matrix-scroll-wrapper table tbody td:nth-child(3) {
    position: sticky !important;
    left: 410px !important;
    z-index: 15 !important;
}
#asana-matrix-scroll-wrapper table thead th:nth-child(3) {
    position: sticky !important;
    top: 0 !important;
    left: 410px !important;
    z-index: 35 !important;
}
/* (BoD 3/10) thêm cột 3 THỰC HIỆN (90px) → ĐVT thành cột 4 (mốc 500), TRỌNG SỐ thành cột 5 (mốc 558) */
#asana-matrix-scroll-wrapper table tbody td:nth-child(4) {
    position: sticky !important;
    left: 500px !important;
    z-index: 15 !important;
}
#asana-matrix-scroll-wrapper table thead th:nth-child(4) {
    position: sticky !important;
    top: 0 !important;
    left: 500px !important;
    z-index: 35 !important;
}
#asana-matrix-scroll-wrapper table tbody td:nth-child(5) {
    position: sticky !important;
    left: 558px !important;
    z-index: 15 !important;
    border-right: 2px solid rgba(148, 163, 184, 0.15) !important;
}
#asana-matrix-scroll-wrapper table thead th:nth-child(5) {
    position: sticky !important;
    top: 0 !important;
    left: 558px !important;
    z-index: 35 !important;
    border-right: 2px solid rgba(148, 163, 184, 0.3) !important;
}

/* Sticky Column 1 & 2 for Table Header - intersection corner stays fixed both ways */
#asana-matrix-scroll-wrapper table thead th:nth-child(1) {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 35 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 8.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

#asana-matrix-scroll-wrapper table thead th:nth-child(2) {
    position: sticky !important;
    top: 0 !important;
    left: 300px !important;   /* = bề rộng CHỐT cột 1 (renderAsanaTreeView W[0], luật 1.67) */
    z-index: 35 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 8.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

/* Light Theme overrides for sticky column headers */
body.light-theme #asana-matrix-scroll-wrapper table thead th:nth-child(1) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    text-shadow: none !important;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #asana-matrix-scroll-wrapper table thead th:nth-child(2) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    text-shadow: none !important;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08) !important;
}

/* Ensure body td padding is compact */
#asana-matrix-scroll-wrapper table tbody td {
    padding: 4px 6px !important;
    font-size: 9px !important;
}

/* Dark Theme backgrounds for sticky columns */
#asana-matrix-scroll-wrapper table tbody tr.tree-row td:nth-child(1),
#asana-matrix-scroll-wrapper table tbody tr.tree-row td:nth-child(2) {
    background: #0a0f1e !important;
}

#asana-matrix-scroll-wrapper table tbody tr[class*="kpi-row-id-"] td:nth-child(1),
#asana-matrix-scroll-wrapper table tbody tr[class*="kpi-row-id-"] td:nth-child(2) {
    background: #1e293b !important;
}

#asana-matrix-scroll-wrapper table tbody tr.tree-row:hover td:nth-child(1),
#asana-matrix-scroll-wrapper table tbody tr.tree-row:hover td:nth-child(2) {
    background: var(--cv-lam-06b8c4-a015) !important;
}

/* Light Theme backgrounds for sticky columns */
body.light-theme #asana-matrix-scroll-wrapper table tbody tr.tree-row td:nth-child(1),
body.light-theme #asana-matrix-scroll-wrapper table tbody tr.tree-row td:nth-child(2) {
    background: #ffffff !important;
}

body.light-theme #asana-matrix-scroll-wrapper table tbody tr[class*="kpi-row-id-"] td:nth-child(1),
body.light-theme #asana-matrix-scroll-wrapper table tbody tr[class*="kpi-row-id-"] td:nth-child(2) {
    background: #f1f5f9 !important;
}

body.light-theme #asana-matrix-scroll-wrapper table tbody tr.tree-row:hover td:nth-child(1),
body.light-theme #asana-matrix-scroll-wrapper table tbody tr.tree-row:hover td:nth-child(2) {
    background: var(--cv-lam-06b8c4-a008) !important;
}

/* Slide-in Details Panel styles */
.asana-details-panel {
    box-sizing: border-box;
}

.asana-details-panel.open {
    right: 0 !important;
}

.asana-details-panel .panel-close-btn:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* Light Theme overrides for details panel */
body.light-theme .asana-details-panel {
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.1) !important;
}

body.light-theme .asana-details-panel .panel-header {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .asana-details-panel .panel-header h4 {
    color: #0f172a !important;
}

body.light-theme .asana-details-panel .panel-close-btn {
    color: #475569 !important;
}

body.light-theme .asana-details-panel .panel-close-btn:hover {
    color: #0f172a !important;
}

body.light-theme .asana-details-panel .panel-body h3 {
    color: #0f172a !important;
}

body.light-theme .asana-details-panel .panel-body {
    color: #1e293b !important;
}

body.light-theme .asana-details-panel .glass-card {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

body.light-theme .asana-details-panel .glass-card div {
    color: #0f172a !important;
}

/* Timeboxing Planner Calendar CSS */
.timebox-calendar-grid {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    background: rgba(9, 13, 22, 0.2);
    overflow: hidden;
}

body.light-theme .timebox-calendar-grid {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
}

.timebox-header {
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(15, 23, 42, 0.4);
    color: var(--text-secondary);
}

body.light-theme .timebox-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    background: #f1f5f9;
    color: #0f172a;
}

.timebox-row-label {
    grid-column: 1;
    padding: 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    background: rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.light-theme .timebox-row-label {
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    background: #f8fafc;
    color: #475569;
}

.timebox-cell {
    min-height: 48px;
    border-right: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: relative;
    padding: 4px;
    transition: all 0.2s;
}

body.light-theme .timebox-cell {
    border-right: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.timebox-cell.drag-hover {
    background: var(--cv-lam-06b8c4-a015) !important;
    border: 1px dashed var(--accent-cyan);
}

/* Personal Planner task cards list */
.mywork-task-card {
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
}

.mywork-task-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px var(--cv-lam-06b8c4-a015);
}

body.light-theme .mywork-task-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
}

body.light-theme .mywork-task-card:hover {
    border-color: var(--cv-lam-018b94);
    box-shadow: 0 4px 12px var(--cv-lam-018b94-a010);
}

.mywork-task-card.active-report {
    border: 1px solid var(--accent-cyan) !important;
    background: var(--cv-lam-06b8c4-a005) !important;
    box-shadow: 0 0 10px var(--cv-lam-06b8c4-a015);
}

body.light-theme .mywork-task-card.active-report {
    border: 1px solid var(--cv-lam-018b94) !important;
    background: var(--cv-lam-018b94-a005) !important;
}

/* Scheduled timebox event pill */
.timebox-event-pill {
    padding: 3px 6px;
    background: var(--cv-lam-06b8c4-a015);
    border: 1px solid var(--cv-lam-06b8c4-a030);
    color: var(--accent-cyan);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.timebox-event-pill:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px var(--cv-lam-06b8c4-a030);
    border-color: var(--accent-cyan);
}

body.light-theme .timebox-event-pill {
    background: var(--cv-lam-018b94-a010);
    border: 1px solid var(--cv-lam-018b94-a030);
    color: var(--cv-lam-018b94);
}

/* =========================================================================
   SYSTEM-WIDE COMPACT TYPOGRAPHY & FONT-SIZE UNIFICATION (8px - 12px RANGE)
   This section guarantees that all fonts, headings, inputs, widgets, and 
   elements are scaled down to 8px - 12px at zoom 100% for extreme space efficiency.
   ========================================================================= */

/* Reduce document base font size */
html {
    font-size: 11px !important;
}

body {
    font-size: 11px !important;
}

/* Page headers, titles, and card headers */
h2, .page-header h2, #page-raci .page-header h2, #page-board .page-header h2 {
    font-size: 12px !important;
    font-weight: 700 !important;
}

h3, .card-header h3, #raci-title, #asana-view-title {
    font-size: 11px !important;
    font-weight: 700 !important;
}

h4, .asana-details-panel .panel-header h4 {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

p, .page-desc, .card-desc {
    font-size: 10px !important;
    line-height: 1.4 !important;
}

/* Form controls, buttons, dropdowns, inputs, selects, textareas */
input, select, textarea, button, .select-custom, .form-input, .form-textarea, .btn-primary-custom, .sbu-tab {
    font-size: 9.5px !important;
}

.sbu-tab {
    padding: 3px 8px !important;
    height: 24px !important;
    line-height: 18px !important;
}

.btn-primary-custom {
    padding: 4px 10px !important;
    height: 24px !important;
}

.form-input {
    height: 24px !important;
    padding: 2px 6px !important;
}
/* <select> native có mũi tên ~18px bên phải → chừa padding-right để nhãn dài
   KHÔNG chạy dưới mũi tên (bằng chứng probe: 6px → "cuộn" đè "⌄"; 24px sạch). RULE 8B/0A. */
.select-custom {
    height: 24px !important;
    padding: 2px 24px 2px 8px !important;
    text-overflow: ellipsis;
}

/* Asana details panel elements */
.asana-details-panel #panel-task-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.asana-details-panel div, 
.asana-details-panel span, 
.asana-details-panel label, 
.asana-details-panel select, 
.asana-details-panel textarea, 
.asana-details-panel input {
    font-size: 9.5px !important;
}

.asana-details-panel select {
    height: 24px !important;
    padding: 2px 22px 2px 4px !important;   /* chừa mũi tên native (RULE 0A) */
}

/* Timebox planner calendar slots, week days, event cards */
.timebox-header {
    font-size: 9.5px !important;
    padding: 4px 2px !important;
}

.timebox-row-label {
    font-size: 9px !important;
    padding: 6px 4px !important;
}

.timebox-event-pill {
    font-size: 8.5px !important;
    padding: 2px 4px !important;
}

.mywork-task-card {
    font-size: 9px !important;
    padding: 6px 8px !important;
}

.mywork-task-card div, 
.mywork-task-card span {
    font-size: 8.5px !important;
}

/* KPI quick filters and action buttons */
.kpi-quick-filter-btn {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
    height: 24px !important;
}

/* Sidebar elements */
.sidebar-brand h3 {
    font-size: 12px !important;
}

.sidebar-menu li a {
    font-size: 10.5px !important;
    padding: 8px 12px !important;
}

.sidebar-menu li a i {
    font-size: 11px !important;
}

/* Gantt timeline view */
#asana-view-timeline .timeline-header-cell,
#asana-view-timeline .timeline-row-title,
#asana-view-timeline .gantt-task-label {
    font-size: 9px !important;
}

/* Placeholder styling for RACI input cells */
.searchable-raci-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
}

body.light-theme .searchable-raci-input::placeholder {
    color: rgba(15, 23, 42, 0.45) !important;
    opacity: 1 !important;
}

.month-resize-handle-left:hover,
.month-resize-handle-right:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 27: EXECUTIVE DEEP ANALYTICS MODAL & STATUS CARD TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */

/* Hover interactions for clickable dashboard cards */
.exec-status-card-clickable {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.exec-status-card-clickable:hover {
    transform: scale(1.02);
    background: var(--cv-lam-06b8c4-a008) !important;
    border-color: var(--cv-lam-06b8c4-a025) !important;
    box-shadow: 0 8px 24px var(--cv-lam-06b8c4-a015) !important;
}

body.light-theme .exec-status-card-clickable:hover {
    background: var(--cv-lam-06b8c4-a006) !important;
    border-color: var(--cv-lam-06b8c4-a030) !important;
    box-shadow: 0 8px 24px var(--cv-lam-06b8c4-a012) !important;
}

/* Overdue Metric Card Glowing Alert Pulse */
/* Nút Thẩm định NỔI BẬT khi vừa nhảy tới từ chip chờ-duyệt (RULE 0A: 1 nơi dùng chung) */
@keyframes bodApprovePulse {
    0%, 100% { box-shadow: 0 0 10px var(--cv-luc-10bd10-a035); transform: scale(1); }
    50%      { box-shadow: 0 0 22px var(--cv-luc-10bd10-a085), 0 0 4px var(--cv-luc-42d642-a090); transform: scale(1.06); }
}
.bod-approve-pulse { animation: bodApprovePulse 1s ease-in-out 4; outline: 2px solid var(--cv-luc-42d642-a090); outline-offset: 2px; }

@keyframes pulse-border-red {
    0%, 100% {
        border-color: var(--cv-do-ef4444-a025);
        box-shadow: 0 0 15px var(--cv-do-ef4444-a015);
    }
    50% {
        border-color: var(--cv-do-ef4444-a060);
        box-shadow: 0 0 25px var(--cv-do-ef4444-a035);
    }
}

.exec-overdue-metric-card {
    animation: pulse-border-red 2s 3 ease-in-out !important;   /* (20/9) cấm infinite — nháy 3 nhịp rồi dừng, viền đỏ tĩnh vẫn còn */
}

/* Tab animations and active states inside modal */
.exec-modal-tab {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-bottom: 2px solid transparent !important;
}

.exec-modal-tab:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
}

body.light-theme .exec-modal-tab:hover {
    background: rgba(15, 23, 42, 0.03) !important;
    color: #0f172a !important;
}

.exec-modal-tab.active {
    font-weight: 800 !important;
}

/* Interactive modal task list cards hover effect */
.exec-modal-task-card {
    transition: all 0.2s ease-in-out !important;
}

.exec-modal-task-card:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light-theme .exec-modal-task-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Executive Urge (Đốc Thúc) Button interactive transitions */
.btn-exec-modal-urge {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-exec-modal-urge:hover {
    transform: scale(1.08);
    background: var(--cv-do-dc2626) !important;
    box-shadow: 0 0 12px var(--cv-do-ef4444-a060) !important;
}

.btn-exec-modal-urge:active {
    transform: scale(0.95);
}

/* Modal Overlay and Window Animation Settings */
#exec-dashboard-modal-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#exec-dashboard-detail-modal {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOARD PAGE: DYNAMIC SCROLL & STICKY HEADER OPTIMIZATION
   ═══════════════════════════════════════════════════════════════ */

/* Enable internal vertical scrolling for all board view panes to keep the corporate header fixed */
#asana-view-kanban,
#asana-view-timeline,
#asana-view-calendar,
#asana-view-mywork {
    max-height: calc(100vh - 240px) !important;
    max-height: calc(100dvh - 240px) !important;
    overflow-y: auto !important;
    padding-right: 4px;
}

/* Enable custom scrollbars for unified look */
#asana-view-kanban::-webkit-scrollbar,
#asana-view-timeline::-webkit-scrollbar,
#asana-view-calendar::-webkit-scrollbar,
#asana-view-mywork::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#asana-view-kanban::-webkit-scrollbar-track,
#asana-view-timeline::-webkit-scrollbar-track,
#asana-view-calendar::-webkit-scrollbar-track,
#asana-view-mywork::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

#asana-view-kanban::-webkit-scrollbar-thumb,
#asana-view-timeline::-webkit-scrollbar-thumb,
#asana-view-calendar::-webkit-scrollbar-thumb,
#asana-view-mywork::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

#asana-view-kanban::-webkit-scrollbar-thumb:hover,
#asana-view-timeline::-webkit-scrollbar-thumb:hover,
#asana-view-calendar::-webkit-scrollbar-thumb:hover,
#asana-view-mywork::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Light Theme Scrollbars */
body.light-theme #asana-view-kanban::-webkit-scrollbar-track,
body.light-theme #asana-view-timeline::-webkit-scrollbar-track,
body.light-theme #asana-view-calendar::-webkit-scrollbar-track,
body.light-theme #asana-view-mywork::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04);
}

body.light-theme #asana-view-kanban::-webkit-scrollbar-thumb,
body.light-theme #asana-view-timeline::-webkit-scrollbar-thumb,
body.light-theme #asana-view-calendar::-webkit-scrollbar-thumb,
body.light-theme #asana-view-mywork::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
}

/* Permanent Top-Bar hiding on Board page to completely eliminate top whitespace and shift content up */
body.page-active-board .top-bar {
    display: none !important;
}

body.page-active-board #hvg-corporate-sticky-header {
    position: sticky !important;
    top: 0px !important;
    z-index: 99 !important;
    background: var(--bg-primary, #0a0e1a) !important;
}

/* Ensure mobile menu button inside board view is only visible on small screens */
body.page-active-board #boardMobileMenuBtn {
    display: none !important;
}

@media (max-width: 991px) {
    body.page-active-board #boardMobileMenuBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none !important;
        color: var(--text-primary) !important;
        font-size: 14px !important;
        padding: 4px !important;
        cursor: pointer;
    }
}

/* Make sure the corporate summary dashboard panel padding and margins are extremely tight */
body.page-active-board #hvg-corporate-dashboard-summary {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Tighten view pane heights since we saved 64px from hiding the topbar! */
body.page-active-board #asana-view-kanban,
body.page-active-board #asana-view-timeline,
body.page-active-board #asana-view-calendar,
body.page-active-board #asana-view-mywork {
    max-height: calc(100vh - 190px) !important;
    max-height: calc(100dvh - 190px) !important;
}
body.page-active-board #asana-matrix-scroll-wrapper {
    max-height: calc(100vh - 190px) !important;
    max-height: calc(100dvh - 190px) !important;
}

/* TIGHTEN ROW HEIGHTS & PADDINGS FOR EMPLOYEES TABLE TO FIT FONT SIZES */
#employees-table {
    height: auto !important;
    table-layout: auto !important;
}

#employees-table tbody tr {
    height: 34px !important;
}

#employees-table tbody td {
    padding: 6px 12px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    height: 34px !important;
}

#employees-table thead th {
    padding: 8px 12px !important;
    line-height: 1.2 !important;
    height: 34px !important;
    vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM GLASSMORPHISM LOGIN OVERLAY SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.login-overlay-container {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #090D16;
    background-image:
        radial-gradient(circle at 10% 20%, var(--cv-lam-00f2fe-a012) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, var(--cv-cham-9b5ef7-a010) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, var(--cv-luc-17fa17-a005) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    font-family: 'Outfit', sans-serif;
    animation: aurora 25s ease-in-out infinite;
}

.login-card {
    width: 100%;
    max-width: 440px;
    padding: 40px !important;
    border-radius: 24px !important;
    background: rgba(17, 25, 40, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    text-align: center;
    animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.login-logo-icon {
    width: 44px;
    height: 44px;
    background: var(--gradient-rev);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #090D16;
    box-shadow: 0 4px 15px var(--cv-lam-00f2fe-a030);
}

.login-logo-text {
    text-align: left;
}

.login-logo-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    background: var(--gradient-rev);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-logo-title-svg {
    height: 18px;
    width: auto;
    display: block;
    margin-bottom: 2px;
}

.login-logo-subtitle {
    display: block;
    font-size: 9.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 1px;
}

.login-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.login-card-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    opacity: 0.7;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-input-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--color-cyan, #06b8c4);
    opacity: 1;
    transition: all 0.3s;
}

/* Ép nền TỐI khi trình duyệt tự điền (autofill) — tránh nền trắng làm chìm icon/chữ */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px rgba(9, 13, 22, 0.92) inset;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.login-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(9, 13, 22, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    outline: none;
    font-family: inherit;
    transition: all 0.3s;
}

.login-input:focus {
    border-color: var(--color-cyan);
    box-shadow: 0 0 15px var(--cv-lam-00f2fe-a015);
    background: rgba(9, 13, 22, 0.6);
}

.login-input:focus + .login-input-icon {
    color: var(--color-cyan);
    opacity: 1;
}

.login-password-toggle {
    position: absolute;
    right: 14px;
    font-size: 15px;
    color: var(--color-cyan, #06b8c4);
    opacity: 0.85;
    cursor: pointer;
    transition: all 0.3s;
}

.login-password-toggle:hover {
    color: var(--color-cyan);
    opacity: 1;
}

.login-remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.login-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.login-checkbox-label input {
    accent-color: var(--color-cyan);
    cursor: pointer;
}

.login-forgot-link {
    color: var(--color-cyan);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.login-forgot-link:hover {
    text-shadow: 0 0 8px var(--cv-lam-00f2fe-a040);
    text-decoration: underline;
}

.btn-login-submit {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #090D16;
    background: var(--gradient-rev);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px var(--cv-lam-00f2fe-a030);
}

.btn-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--cv-lam-00f2fe-a050), 0 0 10px var(--cv-lam-00f2fe-a020);
}

.btn-login-submit:active {
    transform: translateY(0);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.4;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.login-sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-sso {
    width: 100%;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.btn-sso:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.btn-sso-google i {
    color: var(--cv-do-ef4444);
}

.btn-sso-ms i {
    color: var(--cv-lam-07949d);
}

.login-footer {
    margin-top: 30px;
    font-size: 12.5px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.login-contact-admin {
    color: var(--color-cyan);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s;
}

.login-contact-admin:hover {
    text-shadow: 0 0 8px var(--cv-lam-00f2fe-a040);
}

.login-copyright {
    margin-top: 20px;
    font-size: 10.5px;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Tester / Demo Helper Card */
.login-helper-card {
    width: 320px;
    padding: 24px !important;
    border-radius: 20px !important;
    background: rgba(17, 25, 40, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.login-helper-item {
    transition: all 0.3s;
}

.login-helper-item:hover {
    background: var(--cv-lam-06b8c4-a006) !important;
    border-color: var(--cv-lam-06b8c4-a025) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Error message styling */
.login-error-message {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cv-do-ef4444);
    background: var(--cv-do-ef4444-a008);
    border: 1px solid var(--cv-do-ef4444-a015);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeInUp 0.3s;
}

/* Card shake animation on error */
.shake {
    animation: shakeEffect 0.4s ease-in-out;
}

@keyframes shakeEffect {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Responsive adjust for Login container */
@media (max-width: 800px) {
    .login-overlay-container {
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
        padding-top: 40px;
    }
    .login-helper-card {
        width: 100%;
        max-width: 440px;
    }
}

/* Logout Button on Sidebar */
.btn-logout-sidebar:hover {
    background: var(--cv-do-ef4444-a015) !important;
    color: var(--cv-do-ef4444) !important;
    transform: scale(1.08);
}

/* ==================== STRATEGIC COCKPIT TABS & PANELS CSS ==================== */
.strategic-tab-btn.active {
    background: linear-gradient(135deg, var(--cv-lam-00f2fe-a015), var(--cv-lam-07949d-a015)) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid var(--cv-lam-00f2fe-a030) !important;
    box-shadow: 0 0 10px var(--cv-lam-00f2fe-a015);
}
.strategic-tab-btn:hover:not(.active) {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.light-theme .strategic-tabs-bar {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body.light-theme .strategic-tab-btn.active {
    background: linear-gradient(135deg, var(--cv-lam-018b94-a010), var(--cv-cham-6d28d9-a010)) !important;
    color: var(--cv-lam-018b94) !important;
    border: 1px solid var(--cv-lam-018b94-a025) !important;
    box-shadow: 0 0 10px var(--cv-lam-018b94-a010);
}
body.light-theme .strategic-tab-btn:hover:not(.active) {
    background: rgba(15, 23, 42, 0.05) !important;
}





/* ==================== ACTIVE BUSINESS PLAN SIMULATOR STYLES ==================== */
.weekday-checkbox-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    margin: 4px;
}
.weekday-checkbox-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.weekday-checkbox-item .checkbox-label {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    min-width: 45px;
}
.weekday-checkbox-item:hover .checkbox-label {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Low Days Active Checked */
.weekday-checkbox-item.low-day-item input:checked ~ .checkbox-label {
    background: var(--cv-do-ef4444-a015) !important;
    border-color: var(--cv-do-ef4444-a045) !important;
    color: var(--cv-do-f87171) !important;
    box-shadow: 0 0 10px var(--cv-do-ef4444-a020);
}
/* High Days Active Checked */
.weekday-checkbox-item.high-day-item input:checked ~ .checkbox-label {
    background: var(--cv-luc-22c722-a015) !important;
    border-color: var(--cv-luc-22c722-a045) !important;
    color: var(--cv-luc-51df51) !important;
    box-shadow: 0 0 10px var(--cv-luc-22c722-a020);
}

/* Light Theme overrides for Calendar Checkboxes */
body.light-theme .weekday-checkbox-item .checkbox-label {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #475569;
}
body.light-theme .weekday-checkbox-item:hover .checkbox-label {
    background: #e2e8f0;
    color: #0f172a;
}
body.light-theme .weekday-checkbox-item.low-day-item input:checked ~ .checkbox-label {
    background: var(--cv-do-ef4444-a010) !important;
    border-color: var(--cv-do-ef4444-a050) !important;
    color: var(--cv-do-dc2626) !important;
}
body.light-theme .weekday-checkbox-item.high-day-item input:checked ~ .checkbox-label {
    background: var(--cv-luc-22c722-a010) !important;
    border-color: var(--cv-luc-22c722-a050) !important;
    color: var(--cv-luc-16a416) !important;
}

/* Target Spreadsheet Styling */
.bp-spreadsheet-table {
    width: 100%;
    /* 21/8 (BoD: "cố định tiêu đề mà cuộn lên lòi dữ liệu qua khe"): collapse làm Chrome KHÔNG dính viền/nền
       hàng th → hở khe cho hàng chui qua. Sticky bắt buộc separate + spacing 0 (cùng luật .raci-table). */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}
.bp-spreadsheet-table th {
    padding: 10px 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #334155; /* Solid dark background to prevent bleed-through */
    color: var(--text-primary, #ffffff) !important;
}

body.light-theme .bp-spreadsheet-table th {
    background: #cbd5e1; /* Solid Slate-300 in light theme */
    color: #1e293b !important;
}
.bp-spreadsheet-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    vertical-align: middle;
}
.bp-spreadsheet-table tr.depth-1 {
    font-weight: 700;
    background: var(--cv-lam-06b8c4-a005);
    border-top: 1px solid var(--cv-lam-06b8c4-a012);
    border-bottom: 1px solid var(--cv-lam-06b8c4-a012);
}
.bp-spreadsheet-table tr.depth-1 td {
    color: var(--accent-cyan);
}
body.light-theme .bp-spreadsheet-table tr.depth-1 {
    background: var(--cv-lam-018b94-a004);
}
body.light-theme .bp-spreadsheet-table tr.depth-1 td {
    color: var(--cv-lam-018b94);
}

.bp-spreadsheet-table tr.depth-2 {
    font-weight: 600;
    background: rgba(148, 163, 184, 0.02);
}
.bp-spreadsheet-table tr.depth-3 td:first-child {
    padding-left: 28px;
    color: var(--text-secondary);
}
body.light-theme .bp-spreadsheet-table tr.depth-3 td:first-child {
    color: #475569;
}

/* Styled Inputs inside Spreadsheet cells */
.bp-input {
    width: 100%;
    max-width: 140px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    font-family: var(--font-mono, monospace);
    background: rgba(9, 13, 22, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.bp-input:focus {
    border-color: var(--accent-cyan, #00f2fe) !important;
    border-width: 2px !important;
    background: var(--cv-lam-00f2fe-a012) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 3px var(--cv-lam-00f2fe-a045) !important;
    caret-color: var(--cv-cam-f69d2f) !important; /* Chuột nhấp nháy màu vàng cam nổi bật */
}

body.light-theme .bp-input {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

body.light-theme .bp-input:focus {
    border-color: var(--cv-lam-018b94) !important;
    border-width: 2px !important;
    background: var(--cv-lam-018b94-a010) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 3px var(--cv-lam-018b94-a040) !important;
    caret-color: var(--cv-cam-d97706) !important; /* Chuột nhấp nháy màu vàng cam sẫm nổi bật */
}

/* Tags for live simulation changes */
.sim-change-tag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    font-family: var(--font-mono, monospace);
}
.sim-change-tag.positive {
    background: var(--cv-luc-22c722-a015);
    color: var(--cv-luc-22c722);
}
.sim-change-tag.negative {
    background: var(--cv-do-ef4444-a015);
    color: var(--cv-do-ef4444);
}
body.light-theme .sim-change-tag.positive {
    background: var(--cv-luc-22c722-a010);
    color: var(--cv-luc-16a416);
}
body.light-theme .sim-change-tag.negative {
    background: var(--cv-do-ef4444-a010);
    color: var(--cv-do-dc2626);
}

/* Flash animation on cell change */
@keyframes flashUpdate {
    0% { background-color: var(--cv-lam-06b8c4-a035); }
    100% { background-color: transparent; }
}
.cell-updated {
    animation: flashUpdate 0.8s ease-out;
}

/* Premium styling for Readonly spreadsheet cells */
.bp-input-readonly {
    background: rgba(148, 163, 184, 0.03) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
    color: var(--text-muted) !important;
    opacity: 0.65;
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
    font-weight: 500 !important;
}

body.light-theme .bp-input-readonly {
    background: rgba(15, 23, 42, 0.02) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    color:var(--text-muted) !important;
    opacity: 0.7;
}

/* ==========================================
   PREMIUM CALENDAR CONFIG MODAL STYLING
   ========================================== */
#bp-calendar-modal .glass-card {
    background: var(--bg-card-solid, #111827);
    border: 1.5px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.5));
    transition: all 0.3s ease;
}

#bp-calendar-modal-title {
    color: var(--text-primary, #ffffff) !important;
}

.bp-calendar-info-label {
    color: var(--text-muted, #94a3b8) !important;
    font-size: 11.5px;
    font-weight: 500;
}

#bp-calendar-sbu-title {
    color: var(--text-primary, #ffffff) !important;
    font-size: 14px;
    font-weight: 800;
}

#bp-calendar-month-title {
    color: var(--accent-cyan, #06b8c4) !important;
    font-size: 13px;
    font-weight: 700;
}

.bp-calendar-grid-container {
    background: rgba(9, 13, 22, 0.45);
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
    border-radius: 10px;
    padding: 14px;
    transition: all 0.3s ease;
}

body.light-theme .bp-calendar-grid-container {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

.bp-calendar-grid-container th {
    color: var(--text-muted, #94a3b8) !important;
    font-weight: 700;
    font-size: 11px;
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bp-calendar-legend-box {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.03);
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.08));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.light-theme .bp-calendar-legend-box {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.06);
}

.bp-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
}

#bp-calendar-summary-counts {
    border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.1));
    padding-top: 10px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary, #ffffff) !important;
    display: flex;
    justify-content: space-around;
}

/* Button style overrides */
#bp-calendar-btn-cancel {
    padding: 8px 18px;
    border: 1px solid var(--border-subtle, rgba(148,163,184,0.2));
    background: rgba(255,255,255,0.02);
    color: var(--text-primary, #ffffff);
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.light-theme #bp-calendar-btn-cancel {
    background: #ffffff;
    color: #475569;
    border-color: #cbd5e1;
}

#bp-calendar-btn-cancel:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary, #ffffff);
}

body.light-theme #bp-calendar-btn-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
}

#bp-calendar-btn-save {
    padding: 8px 20px;
    border: 1px solid var(--accent-cyan, #06b8c4);
    background: var(--cv-lam-06b8c4-a015);
    color: var(--accent-cyan, #06b8c4);
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.light-theme #bp-calendar-btn-save {
    background: var(--cv-lam-018b94);
    border-color: var(--cv-lam-018b94);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px var(--cv-lam-018b94-a020);
}

#bp-calendar-btn-save:hover {
    background: var(--cv-lam-06b8c4-a025);
}

body.light-theme #bp-calendar-btn-save:hover {
    background: var(--cv-lam-026f76);
    box-shadow: 0 6px 10px -1px var(--cv-lam-018b94-a030);
}

/* Premium Calendar Day Cell Micro-interactions */
.bp-cal-day-cell {
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bp-cal-day-cell:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 12px var(--cv-lam-06b8c4-a025) !important;
    filter: brightness(1.08);
}
.bp-cal-day-cell:active {
    transform: translateY(0) scale(0.95);
}

/* Hide spinner buttons on all year number inputs */
#bp-year-filter::-webkit-outer-spin-button,
#bp-year-filter::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#bp-year-filter {
    -moz-appearance: textfield;
}

/* Premium Month Select in Calendar Modal */
#bp-calendar-month-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #ffffff);
    padding: 6px 28px 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cbd5e1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 8px auto;
}

#bp-calendar-year-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #ffffff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    -moz-appearance: textfield;
}
#bp-calendar-year-select::-webkit-outer-spin-button,
#bp-calendar-year-select::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#bp-calendar-month-select:focus,
#bp-calendar-year-select:focus {
    border-color: var(--accent-cyan, #06b8c4);
    box-shadow: 0 0 0 2px var(--cv-lam-06b8c4-a020);
}

body.light-theme #bp-calendar-month-select {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23475569%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

body.light-theme #bp-calendar-year-select {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

body.light-theme #bp-calendar-month-select:focus,
body.light-theme #bp-calendar-year-select:focus {
    border-color: var(--cv-lam-018b94);
    box-shadow: 0 0 0 2px var(--cv-lam-018b94-a015);
}

/* ══════════════════════════════════════════════════════════
   PROJECT GOVERNANCE OS - BRAND STYLES (2.5.2)
   ══════════════════════════════════════════════════════════ */

/* Global Brand colors variables for Project OS */
:root {
    --prj-primary: #1C3557;
    --prj-secondary: var(--cv-luc-2f7f2f);
    --prj-gold: var(--cv-cam-f4a020);
}

/* Tabs active states */
.project-tab-btn {
    border-bottom: 2px solid transparent;
}
.project-tab-btn:hover {
    color: white !important;
}
.project-tab-btn.active {
    border-bottom: 2px solid var(--accent-cyan) !important;
    color: white !important;
    font-weight: 700 !important;
}

/* Strategic Rings CSS circular layouts */
.ring-gauge-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ring-gauge-label {
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
    font-family: var(--font-mono);
}

/* OKR Cascade Tree style layout */
.okr-node-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    margin-bottom: 6px;
    position: relative;
    transition: all 0.2s ease-in-out;
}
.okr-node-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.okr-objective-card {
    border-left: 4px solid var(--accent-cyan);
}
.okr-kr-card {
    margin-left: 30px;
    border-left: 3px solid var(--accent-purple);
}
.okr-kr-card::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 1px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.okr-initiative-card {
    margin-left: 60px;
    border-left: 3px solid var(--cv-cam-f4a020);
    background: var(--cv-cam-f4a020-a001);
}
.okr-initiative-card::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 1px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.okr-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: var(--text-secondary);
}

/* Timeline animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Editable values */
.editable-field {
    position: relative;
    transition: all 0.2s;
    padding: 2px 4px;
    border-radius: 2px;
}
.editable-field:hover {
    background: rgba(255,255,255,0.08);
}
.editable-field-active-input {
    background: rgba(9, 13, 22, 0.95) !important;
    color: white !important;
    border: 1px solid var(--accent-cyan) !important;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    outline: none;
}

/* KPI Scorecard Grid Status cards */
.kpi-status-box {
    padding: 10px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s;
    cursor: pointer;
}
.kpi-status-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.kpi-status-box {
    padding: 10px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s;
    cursor: pointer;
    border-width: 1.5px !important;
}
.kpi-status-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.kpi-status-green {
    background: var(--cv-luc-22c722-a012) !important;
    border: 1.5px solid var(--cv-luc-22c722-a035) !important;
}
.kpi-status-amber {
    background: var(--cv-cam-f69d2f-a012) !important;
    border: 1.5px solid var(--cv-cam-f69d2f-a035) !important;
}
.kpi-status-red {
    background: var(--cv-do-ef4444-a012) !important;
    border: 1.5px solid var(--cv-do-ef4444-a035) !important;
}

/* ─── High Contrast & Theme Adaptive Overrides for Project Governance OS ─── */

.page-desc {
    font-weight: 500 !important;
}

/* Inactive Tab buttons hover */
.project-tab-btn {
    color: var(--text-secondary) !important;
    transition: all 0.2s ease;
}
.project-tab-btn:hover {
    color: var(--accent-cyan) !important;
}

/* OKR Cascade Tree style layout improvements */
.okr-node-card {
    background: rgba(17, 24, 39, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.okr-node-card:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 25px var(--cv-lam-06b8c4-a015) !important;
}
.okr-task-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}
.okr-task-chip:hover {
    background: var(--cv-lam-06b8c4-a015) !important;
    border-color: var(--accent-cyan) !important;
}
.okr-initiative-card {
    background: var(--cv-cam-f4a020-a005) !important;
}

/* LIGHT THEME OVERRIDES FOR PROJECT OS COMPONENTS */
body.light-theme .project-tabs-nav {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}
body.light-theme .project-tab-btn {
    color: #475569 !important;
}
body.light-theme .project-tab-btn:hover {
    color: var(--accent-cyan) !important;
}
body.light-theme .project-tab-btn.active {
    color: var(--accent-cyan) !important;
    border-bottom: 2px solid var(--accent-cyan) !important;
}
body.light-theme .editable-field {
    color: #0f172a !important;
    border-bottom-color: rgba(15, 23, 42, 0.25) !important;
}
body.light-theme .editable-field:hover {
    background: rgba(15, 23, 42, 0.06) !important;
}
body.light-theme .ring-gauge-label {
    color: #0f172a !important;
}
body.light-theme #okr-rings-container span {
    color: #334155 !important;
}
body.light-theme .glass-card h4 {
    color: #0f172a !important;
}
body.light-theme .kpi-status-box strong {
    color: #0f172a !important;
}
body.light-theme .okr-node-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}
body.light-theme .okr-node-card:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 16px var(--cv-lam-018b94-a010) !important;
}
body.light-theme .okr-node-card strong {
    color: #0f172a !important;
}
body.light-theme .okr-node-card .editable-kr-field {
    color: var(--cv-lam-018b94) !important;
}
body.light-theme .okr-node-card span {
    color: #334155 !important;
}
body.light-theme .okr-task-chip {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #334155 !important;
}
body.light-theme .okr-task-chip:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
body.light-theme .okr-initiative-card {
    background: var(--cv-cam-f4a020-a004) !important;
}
/* #timeline-phases-detail-list ĐÃ XOÁ cùng panel project-panel-timeline (BoD 20/7, RULE 9B.6) */
body.light-theme #kpis-scorecard-table-body td {
    color: #334155 !important;
}
body.light-theme #kpis-scorecard-table-body td.kpi-actual-cell {
    color: #0f172a !important;
}
body.light-theme #project-panel-tasks h4 {
    color: #0f172a !important;
}

/* Light theme overrides for header action buttons and AI actions */
body.light-theme #btn-project-export-json,
body.light-theme #btn-project-export-summary,
body.light-theme #btn-ai-create-task,
body.light-theme #btn-ai-write-review,
body.light-theme #btn-ai-update-kpi {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: #334155 !important;
}
body.light-theme #btn-project-export-json:hover,
body.light-theme #btn-project-export-summary:hover,
body.light-theme #btn-ai-create-task:hover,
body.light-theme #btn-ai-write-review:hover,
body.light-theme #btn-ai-update-kpi:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    color: #0f172a !important;
}
body.light-theme #btn-project-clone {
    background: var(--cv-cam-a45e08-a008) !important;
    border: 1px solid var(--cv-cam-a45e08-a025) !important;
    color: var(--cv-cam-a45e08) !important;
}
body.light-theme #btn-project-clone:hover {
    background: var(--cv-cam-a45e08-a015) !important;
    border-color: var(--cv-cam-a45e08-a045) !important;
    color: var(--cv-cam-683f0d) !important;
}

/* Custom premium scrollbar for task tables */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--cv-lam-06b8c4-a025);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--cv-lam-06b8c4-a045);
}
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--cv-lam-018b94-a020);
}
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--cv-lam-018b94-a040);
}

/* Keyframes for rainbow node active pulsing glow */
@keyframes node-pulse-glow {
    0% {
        transform: scale(1);
        opacity: 0.95;
    }
    100% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* ==========================================
   PDCA FLOW HUB STYLING (2.5.2)
   ========================================== */
.pdca-flow-hub {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
body.light-theme .pdca-flow-hub {
    background: rgba(241, 245, 249, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 15px rgba(15, 23, 42, 0.04);
}
.pdca-flow-title {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
body.light-theme .pdca-flow-title {
    color: #475569;
}
.pdca-flow-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1;
}
.pdca-segment-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    border: 1px solid transparent;
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}
.pdca-segment-btn:hover {
    opacity: 0.85;
    transform: translateY(-0.5px);
}
.pdca-segment-btn:active {
    transform: translateY(0);
}

/* Color schemes for each phase */
.pdca-segment-btn.pdca-p {
    color: var(--cv-lam-06b4bf);
    border-color: var(--cv-lam-07949d-a020);
    background: var(--cv-lam-07949d-a004);
}
.pdca-segment-btn.pdca-p.active {
    border-color: var(--cv-lam-07949d-a060) !important;
    background: var(--cv-lam-07949d-a012) !important;
    box-shadow: 0 0 10px var(--cv-lam-07949d-a020) !important;
    opacity: 1 !important;
}

.pdca-segment-btn.pdca-d {
    color: var(--cv-cam-fcbc6e);
    border-color: var(--cv-cam-f69d2f-a020);
    background: var(--cv-cam-f69d2f-a004);
}
.pdca-segment-btn.pdca-d.active {
    border-color: var(--cv-cam-f69d2f-a060) !important;
    background: var(--cv-cam-f69d2f-a012) !important;
    box-shadow: 0 0 10px var(--cv-cam-f69d2f-a020) !important;
    opacity: 1 !important;
}

.pdca-segment-btn.pdca-c {
    color: var(--cv-luc-42d642);
    border-color: var(--cv-luc-10bd10-a020);
    background: var(--cv-luc-10bd10-a004);
}
.pdca-segment-btn.pdca-c.active {
    border-color: var(--cv-luc-10bd10-a060) !important;
    background: var(--cv-luc-10bd10-a012) !important;
    box-shadow: 0 0 10px var(--cv-luc-10bd10-a020) !important;
    opacity: 1 !important;
}

.pdca-segment-btn.pdca-a {
    color: var(--cv-cham-b688fc);
    border-color: var(--cv-cham-9b5df7-a020);
    background: var(--cv-cham-9b5df7-a004);
}
.pdca-segment-btn.pdca-a.active {
    border-color: var(--cv-cham-9b5df7-a060) !important;
    background: var(--cv-cham-9b5df7-a012) !important;
    box-shadow: 0 0 10px var(--cv-cham-9b5df7-a020) !important;
    opacity: 1 !important;
}

/* Rounded index circles */
.pdca-index-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: white !important;
    border-radius: 50%;
    font-size: 8.5px;
    font-weight: 900;
}
.pdca-p .pdca-index-circle { background: var(--cv-lam-07949d); }
.pdca-d .pdca-index-circle { background: var(--cv-cam-f69d2f); }
.pdca-c .pdca-index-circle { background: var(--cv-luc-10bd10); }
.pdca-a .pdca-index-circle { background: var(--cv-cham-9b5df7); }

/* Subtext bracket styling */
.pdca-subtext {
    font-size: 9px;
    opacity: 0.75;
    font-weight: 500;
}

/* Chevron separator styling */
.pdca-chevron {
    color: var(--text-muted);
    opacity: 0.25;
    font-size: 8.5px;
    user-select: none;
}

/* LIGHT THEME OVERRIDES FOR PDCA SEGMENTS */
body.light-theme .pdca-segment-btn {
    background: #ffffff;
    opacity: 0.6;
}
body.light-theme .pdca-segment-btn:hover {
    opacity: 0.9;
}
body.light-theme .pdca-segment-btn.pdca-p {
    color: var(--cv-lam-0e666c);
    border-color: var(--cv-lam-0e666c-a015);
}
body.light-theme .pdca-segment-btn.pdca-p.active {
    background: var(--cv-lam-0e666c-a008) !important;
    border-color: var(--cv-lam-0e666c-a050) !important;
}
body.light-theme .pdca-segment-btn.pdca-d {
    color: var(--cv-cam-a45e08);
    border-color: var(--cv-cam-a45e08-a015);
}
body.light-theme .pdca-segment-btn.pdca-d.active {
    background: var(--cv-cam-a45e08-a008) !important;
    border-color: var(--cv-cam-a45e08-a050) !important;
}
body.light-theme .pdca-segment-btn.pdca-c {
    color: var(--cv-luc-047b04);
    border-color: var(--cv-luc-047b04-a015);
}
body.light-theme .pdca-segment-btn.pdca-c.active {
    background: var(--cv-luc-047b04-a008) !important;
    border-color: var(--cv-luc-047b04-a050) !important;
}
body.light-theme .pdca-segment-btn.pdca-a {
    color: var(--cv-cham-6f28db-chu);
    border-color: var(--cv-cham-6f28db-a015);
}
body.light-theme .pdca-segment-btn.pdca-a.active {
    background: var(--cv-cham-6f28db-a008) !important;
    border-color: var(--cv-cham-6f28db-a050) !important;
}

/* White-space preservation for multi-line editable fields */
.pillars-editable[data-key="objective"],
.editable-okr-title,
.editable-kr-text,
.editable-task-outcome,
.timeline-editable[data-key="description"] {
    white-space: pre-line !important;
}

/* Sidebar Project Item styles representing double nested menu under 2.5.1 */
.sidebar-project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 6px 96px; /* indent under 2.5.1 */
    cursor: pointer;
    font-size: 10.5px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    margin: 1px 0;
}
.sidebar-project-item:hover {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.05);
    padding-left: 100px; /* shift 4px like standard nav sub item */
}
.sidebar-project-item.active {
    color: var(--accent-cyan);          /* ĐỒNG NHẤT 100% nav-item.active (BoD 09/7) */
    background: var(--cv-lam-06b8c4-a008);
    font-weight: 500;
}
.sidebar-project-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-gradient);   /* SỌC trái như nav-item khác — TĨNH (KHÔNG navGlow, không nhấp nháy) */
}

/* Ô ngày Trạm KQ (4.3): icon do RULE 0A chung (color-scheme:light + invert(1)) lo — không cần rule riêng. */

/* Placeholder cho ô góp ý DuPont (contenteditable) */
#dupont-human-notes:empty:before { content: attr(data-ph); color: var(--text-muted); font-style: italic; }

/* Header Tổng quan: không cho chữ xuống hàng (gộp 1 hàng gọn) */
.dashboard-hero .hero-content span,
.dashboard-hero .hero-badge,
.dashboard-hero .hero-badge span { white-space: nowrap; }

/* ═══ BẢY SẮC tiêu đề "máy cấp nội dung vào tiêu chí" (page_content) — MÀU THEO THEME (RULE 8B):
   nền tối dùng tông SÁNG, body.light-theme dùng tông ĐẬM (≥4.5:1 trên nền trắng — khỏi bị auto_contrast ép về đen). */
.pc-rb-0{color:var(--cv-do-f87171)}.pc-rb-1{color:var(--cv-cam-fa9316)}.pc-rb-2{color:var(--cv-vang-e0d505)}.pc-rb-3{color:var(--cv-luc-42d642)}.pc-rb-4{color:var(--cv-lam-11d5e2)}.pc-rb-5{color:var(--cv-lam-06b4bf)}.pc-rb-6{color:var(--cv-cham-b486fa)}
body.light-theme .pc-rb-0{color:var(--cv-do-b91c1c)}body.light-theme .pc-rb-1{color:var(--cv-cam-a05d0a)}body.light-theme .pc-rb-2{color:var(--cv-cam-a16207)}body.light-theme .pc-rb-3{color:var(--cv-luc-047b04)}body.light-theme .pc-rb-4{color:var(--cv-lam-0c767d)}body.light-theme .pc-rb-5{color:var(--cv-lam-0e666c)}body.light-theme .pc-rb-6{color:var(--cv-cham-6d28d9-chu)}
/* Chỉ số cạnh thanh % theo MỨC (cao/vừa/thấp) — cũng 2 theme */
.pc-lv-hi{color:var(--cv-do-f87171)}.pc-lv-mid{color:var(--cv-cam-fcbc6e)}.pc-lv-lo{color:var(--cv-luc-42d642)}.pc-lv-nt{color:var(--text-muted)}
body.light-theme .pc-lv-hi{color:var(--cv-do-b91c1c)}body.light-theme .pc-lv-mid{color:var(--cv-cam-a45e08)}body.light-theme .pc-lv-lo{color:var(--cv-luc-047b04)}

/* Nút Thẩm định NỔI khi có hồ sơ chờ duyệt tại chỗ đang xem (BoD 08/7) — nhấp nháy liên tục tới khi xử lý */
.bod-approve-alive { animation: bodApprovePulse 1.4s ease-in-out 3; outline: 2px solid var(--cv-luc-42d642-a090); outline-offset: 2px; box-shadow: 0 0 18px var(--cv-luc-10bd10-a065) !important; }


/* ══ LƯỚI THẺ HERO 9 CỘT × 2 HÀNG (BoD 20/8 "sắp xếp lại thành 2 hàng cho đẹp") ══
   Trước: HAI lưới 7 cột liền nhau → 18 thẻ tràn thành 3 hàng, hàng cuối trơ 4 thẻ.
   Nay MỘT lưới 9 cột. Thẻ hẹp hơn ~22% nên siết mật độ TẠI ĐÂY — một điểm chung cho cả 18 thẻ,
   KHÔNG sửa style inline từng thẻ (RULE 0A.2). Thêm/bớt thẻ về sau tự ăn theo, không phải sửa lại.
   Chỉ đụng KÍCH THƯỚC + KHOẢNG CÁCH, không đụng màu (RULE 8B giữ nguyên biến theme). */
#hero-kpi-grid { gap: 4px; }
#hero-kpi-grid > .glass-card { padding: 6px 7px !important; gap: 4px !important; }
/* nhãn tiêu chí: cho xuống 2 dòng thay vì cắt cụt "CHI PHÍ BÁN HÀNG…" khi cột hẹp */
#hero-kpi-grid > .glass-card span:first-child {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    font-size: 8.5px !important; line-height: 1.25; letter-spacing: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
#hero-kpi-grid > .glass-card strong { font-size: 13px !important; }
#hero-kpi-grid > .glass-card svg { width: 33px !important; height: 33px !important; }

/* Màn hẹp: 9 cột sẽ bí — hạ dần bậc, vẫn chia chẵn hàng (18 thẻ) */
@media (max-width: 1600px) { #hero-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 1200px) { #hero-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px)  { #hero-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ══ TOKEN CHỮ NGỮ NGHĨA — biết LẬT theo theme (RULE 8B.5/8B.7 · thêm 20/8) ══
   Chữ trạng thái trước đây dùng pastel khắc cứng (var(--cv-luc-51df51) · var(--cv-cam-fcbc6e) · var(--cv-lam-67e8f9)…): đẹp trên nền TỐI
   nhưng ở light theme chỉ 1,4–1,7:1. Nay 1 cặp token — bản DARK giữ NGUYÊN pastel cũ (dark theme
   không đổi một pixel), bản LIGHT hạ tông đủ ≥5:1 trên nền trắng. */
:root { --ok-text: var(--cv-luc-51df51); --warn-text: var(--cv-cam-fcbc6e); --info-text: var(--cv-lam-67e8f9); }
body.light-theme { --ok-text: var(--cv-luc-158115); --warn-text: var(--cv-cam-a45e08); --info-text: var(--cv-lam-0c767d); }

/* ═══════════════════════════════════════════════════════════════════════════
   CUỘN DỄ DÙNG — MỘT ĐIỂM CHUNG (BoD 20/8: "cuộn ngang/dọc rất rất khó dùng")
   Máy rà audit_scroll.py đếm được: 144 khai báo overflow cuộn · 140 chỗ THIẾU
   -webkit-overflow-scrolling (iPad rê không có quán tính) · 51 chỗ overflow-x
   không giới hạn chiều cao (thanh ngang rơi xuống đáy bảng, ngoài tầm với).
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) QUÁN TÍNH CẢM ỨNG cho MỌI vùng cuộn — thuộc tính này VÔ HẠI với phần tử không cuộn,
   nên khai rộng một lần thay vì đi sửa 140 chỗ (RULE 0A.2 — sửa tại điểm chung). */
div, section, main, aside, tbody, pre, table, .table-responsive, .data-table-container {
    -webkit-overflow-scrolling: touch;
}

/* (2) THANH CUỘN ĐỦ TO ĐỂ TÚM. Trước: vài vùng để 6px — trên màn lớn gần như không trỏ trúng. */
#asana-view-calendar::-webkit-scrollbar,
#asana-view-mywork::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar,
.kpi-quick-filters-scroll::-webkit-scrollbar { width: 11px !important; height: 11px !important; }

/* (3) VÙNG CUỘN NGANG: chừa đáy + luôn hiện thanh trên máy có chuột, để biết là cuộn được.
   (Trên máy cảm ứng trình duyệt tự dùng thanh overlay, không chiếm chỗ.) */
@media (hover: hover) and (pointer: fine) {
    .table-responsive, .data-table-container { scrollbar-gutter: stable; }
}

/* (4) — ĐÃ GỠ 20/8: máy __hvhScrollEasy (đổi lăn dọc thành cuộn ngang) làm ĐƠ trang — bảng chiếm
   gần hết màn nên mọi cú lăn đều bị cướp kèm preventDefault, trang hết cuộn dọc. Bài học: KHÔNG
   ghi đè hành vi con lăn mặc định. Thay bằng thanh overlay dock đáy màn (mtpn-ov-fixed, dưới). */

/* RULE 8L (22/9) — VÙNG CHỌN bảng tính "như Excel" (máy chung __hvhSheet): ô/td trong vùng tô cyan nhạt, viền mảnh. */
table[data-sheet] td.hvh-sel { background: var(--cv-lam-06b8c4-a014) !important; box-shadow: inset 0 0 0 1px var(--cv-lam-06b8c4-a055); }
table[data-sheet] input.hvh-sel { background: var(--cv-lam-06b8c4-a022) !important; }

/* 👥 HIỆN DIỆN MỨC Ô (23/9) — "như Google Sheets": ô người KHÁC đang đứng có viền màu riêng + tên nổi.
   Màu do máy vẽ đặt qua biến --hvh-live-c (băm theo mã NV). Dấu này CHỈ hiển thị, không chặn thao tác. */
table[data-sheet] td.hvh-live-cell { position: relative; box-shadow: inset 0 0 0 2px var(--hvh-live-c, #7c3aed); }
.hvh-live-tag {
    position: absolute; top: -10px; left: -1px; z-index: 6; pointer-events: none;
    font-size: 9px; line-height: 12px; font-weight: 800; color: #fff;
    padding: 0 4px; border-radius: 3px 3px 3px 0; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

/* CCTC — ô trong NHÓM CHỌN (Cmd/Ctrl+bấm · Cmd/Ctrl+A · Shift+kéo khung quét) phải SÁNG rõ (BoD 27/9 "giữ shift không thấy sáng" — trước đây không có kiểu nào) */
.cctc-free-box.cctc-sel{outline:3px solid var(--cv-lam-07949d) !important;outline-offset:2px;box-shadow:0 0 0 7px var(--cv-lam-07949d-a022) !important;}

/* Màn Chính sách · Thang bảng lương (BoD 27/9 "các viên ô trông rối mắt"): ô nhập/ô chọn kiểu BẢNG TÍNH —
   không khung riêng từng ô, chỉ đường lưới của bảng; rê chuột hiện viền mờ, đang gõ viền xanh */
#c3-tg-table input, #c3-tg-table select { border-color: transparent !important; background-color: transparent !important; border-radius: 3px !important; box-shadow: none !important; }
#c3-tg-table input:hover, #c3-tg-table select:hover { border-color: rgba(128,128,128,0.45) !important; }
#c3-tg-table input:focus, #c3-tg-table select:focus { border-color: var(--accent-cyan,#07949d) !important; background-color: var(--bg-card-solid,#fff) !important; outline: none; }
/* BoD 27/9 "bỏ các icon mũi tên, ấn vào giữa thì sổ ra chọn": ô chọn trong bảng này không mũi tên, trông như chữ, bấm là xổ */
#c3-tg-table select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; padding-right: 5px !important; cursor: pointer; }
/* Bảng Thang bảng lương — kiểu ô chung (thay chuỗi kiểu lặp ở từng ô; BoD 27/9 "lác, chậm") */
#c3-tg-table td { padding: 4px 6px; font-size: 11px; color: var(--text-secondary,#334155); border-bottom: 1px solid rgba(128,128,128,0.3); white-space: nowrap; }
#c3-tg-table input.c3-in { width: 100%; box-sizing: border-box; padding: 2px 5px; font-size: 11px; text-align: right; border: 1px solid transparent; border-radius: 3px; color: var(--text-primary,#0f172a); }
/* Bảng Định mức tab Hành chính + CP bán hàng – Marketing (BoD 27/9 "bỏ đường viền ô"): kiểu bảng tính như bảng Chính sách */
/* gắn theo #khkd-dm-host cho MẠNH hơn luật ô nhập giao diện ngày (body.light-theme input … !important ép viền #e2e8f0 — BoD 28/9 "các ô vẫn còn viền") */
#khkd-dm-host table.mkt-dm-table input, #khkd-dm-host table.mkt-dm-table select { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; }
#khkd-dm-host table.mkt-dm-table input:hover, #khkd-dm-host table.mkt-dm-table select:hover { border-color: rgba(128,128,128,0.45) !important; }
#khkd-dm-host table.mkt-dm-table input:focus, #khkd-dm-host table.mkt-dm-table select:focus { border-color: var(--accent-cyan,#07949d) !important; background-color: var(--bg-card-solid,#fff) !important; outline: none; }
/* Ô chọn ĐVT bảng Định mức (Hành chính · CP bán hàng – Marketing) — CÙNG KHUÔN bảng Chính sách (BoD 27/9 "thiếu đồng nhất"): không mũi tên,
   rộng bằng cả cột, cùng cỡ chữ với chữ ĐVT thường, chữ trong ô cách mép ô bảng 12px như chữ thường */
table.mkt-dm-table select[data-mct], table.mkt-dm-table select[data-mdv] { -webkit-appearance: none !important; appearance: none !important; background-image: none !important;
  width: auto; min-width: 100%; box-sizing: border-box; padding: 2px 5px !important; font-size: 10.5px !important; border-radius: 3px !important; cursor: pointer; }
/* rộng = chữ dài nhất của chính ô (không cắt chữ) và giãn đầy cột → mọi ô trong cột bằng nhau */

/* ═══ THANH ĐIỀU KHIỂN + NHÃN DÙNG CHUNG CỦA DASHBOARD KẾT QUẢ (phần bảng "mỗi người một hàng" đã xoá 3/10 — RULE 9B.6) ═══ */
.tdkq-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px;font-size:12px;color:var(--text-muted)}
.tdkq-bar b{color:var(--text-primary);font-size:13px}
.tdkq-pill{border:1px solid var(--border-color,#cbd5e1);border-radius:999px;padding:2px 10px;color:var(--text-primary)}
.tdkq-legend{display:flex;gap:6px;align-items:center;font-size:11px}
.tdkq-code{color:var(--text-muted);font-size:10.5px;margin-right:6px}
.tdkq-me{font-size:10.5px;color:var(--text-muted)}
.tdkq-chip{display:inline-block;min-width:42px;padding:1px 7px;border-radius:6px;font-weight:600;line-height:1.3}
.tdkq-chip.ok{background:var(--cv-luc-defcde);color:var(--cv-luc-158115)}.tdkq-chip.warn{background:var(--cv-vang-fdf78b);color:var(--cv-cam-a16207)}.tdkq-chip.bad{background:var(--cv-do-fee2e2);color:var(--cv-do-b91c1c)}
.tdkq-chip.na{background:transparent;color:#94a3b8;font-weight:400}
body:not(.light-theme) .tdkq-chip.ok{background:var(--cv-luc-0f3c0f);color:var(--cv-luc-51df51)}body:not(.light-theme) .tdkq-chip.warn{background:var(--cv-cam-422a0d);color:var(--cv-cam-fcbc6e)}body:not(.light-theme) .tdkq-chip.bad{background:var(--cv-do-431515);color:var(--cv-do-f87171)}
.tdkq-ky{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--text-primary)}
.tdkq-ky select,.tdkq-ky input,.tdkq-ky button{font-size:12px !important;padding:2px 6px;border-radius:6px;border:1px solid var(--border-color,#cbd5e1);background:var(--bg-card-solid,#fff);color:var(--text-primary);cursor:pointer}
.tdkq-seg{display:inline-flex;border:1px solid var(--border-color,#cbd5e1);border-radius:8px;overflow:hidden}
.tdkq-seg button{border:0;border-right:1px solid var(--border-color,#cbd5e1);background:var(--bg-card-solid,#fff);color:var(--text-primary);padding:5px 10px;font-size:12px !important;font-weight:500;cursor:pointer}
.tdkq-seg button:last-child{border-right:0}
.tdkq-seg button.on{background:var(--cv-lam-0e666c);color:#fff}
/* ═══ VIỆC CỦA TÔI — nhãn vai, nút Thêm việc, dòng nhắc KR chưa có việc, dải đếm (BoD 3/10 "Làm cả 4") ═══ */
.khcv-vai-toi,.khcv-so-viec{flex-shrink:0;font-size:8.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.khcv-vai-toi{background:var(--cv-luc-defcde);color:var(--cv-luc-158115)}
.khcv-so-viec{background:rgba(148,163,184,.2);color:var(--text-muted)}
body:not(.light-theme) .khcv-vai-toi{background:var(--cv-luc-0f3c0f);color:var(--cv-luc-51df51)}
.khcv-btn-themviec{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 10px;border-radius:5px;border:1px solid var(--cv-lam-06b8c4-a055);background:var(--cv-lam-06b8c4-a012);color:var(--cv-lam-0c767d);cursor:pointer}
.khcv-btn-themviec:hover{background:var(--cv-lam-06b8c4-a024)}
body:not(.light-theme) .khcv-btn-themviec{color:var(--cv-lam-11d5e2)}
.khcv-nhac-viec{font-size:10px;font-weight:600;color:var(--cv-cam-a16207);margin-right:10px}
.khcv-btn-dau{border-color:var(--cv-cam-d97706);background:var(--cv-vang-fdf78b);color:var(--cv-cam-804c0c)}
.khcv-btn-dau:hover{background:var(--cv-vang-f7eb04)}
body:not(.light-theme) .khcv-nhac-viec{color:var(--cv-cam-fcbc6e)}
body:not(.light-theme) .khcv-btn-dau{border-color:var(--cv-cam-a45e08);background:var(--cv-cam-422a0d);color:var(--cv-cam-fcbc6e)}
.khcv-addcon-link{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;border-radius:4px;border:1px solid var(--cv-lam-06b8c4-a055);background:var(--cv-lam-06b8c4-a012);color:var(--cv-lam-0c767d);font-size:8px;cursor:pointer;opacity:.3}
tr:hover>td .khcv-addcon-link{opacity:1}
.khcv-addcon-link:hover{background:var(--cv-lam-06b8c4-a030)}
body:not(.light-theme) .khcv-addcon-link{color:var(--cv-lam-11d5e2)}
#khcv-me-dem{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:12px}
#khcv-me-dem span{padding:4px 12px;border-radius:8px;background:var(--bg-card-solid,#fff);border:1px solid var(--border-color,#e2e8f0);color:var(--text-primary)}
#khcv-me-dem span b{font-weight:700;margin-left:4px}
#khcv-me-dem span.canh{background:var(--cv-vang-fdf78b);border-color:var(--cv-cam-d97706);color:var(--cv-cam-804c0c)}
body:not(.light-theme) #khcv-me-dem span.canh{background:var(--cv-cam-422a0d);border-color:var(--cv-cam-a45e08);color:var(--cv-cam-fcbc6e)}
/* ═══ DASHBOARD "KẾT QUẢ" (BoD 3/10 tối) — máy vẽ __kqVe: ba thẻ · so sánh theo nơi · bảng Mục tiêu → KR → Việc ═══ */
.kq-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 10px}
.kq-the,.kq-khoi{background:var(--bg-card-solid,#fff);border:1px solid var(--border-color,#e2e8f0);border-radius:10px;padding:10px 14px}
.kq-khoi{margin:0 0 10px}
.kq-the-t{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kq-the-n{display:flex;align-items:baseline;gap:6px;margin:2px 0 6px}
.kq-the-n b{font-size:26px;font-weight:700;line-height:1.1}
.kq-the-n span{font-size:12px;color:var(--text-muted)}
.kq-the-s{font-size:12px;color:var(--text-secondary,var(--text-muted));margin-top:6px}
.kq-bar{display:inline-block;flex:1 1 auto;min-width:36px;height:6px;border-radius:3px;background:rgba(148,163,184,.25);overflow:hidden;vertical-align:middle}
.kq-bar-l{display:block;height:7px}
.kq-bar i{display:block;height:100%;border-radius:3px}
.kq-bar i.ok{background:var(--cv-luc-16a416)}.kq-bar i.warn{background:var(--cv-cam-d97706)}.kq-bar i.bad{background:var(--cv-do-dc2626)}.kq-bar i.na{background:transparent}
b.ok,.kq-pct.ok{color:var(--cv-luc-158115)}b.warn,.kq-pct.warn{color:var(--cv-cam-a16207)}b.bad,.kq-pct.bad{color:var(--cv-do-b91c1c)}b.na{color:var(--text-muted)}
body:not(.light-theme) b.ok,body:not(.light-theme) .kq-pct.ok{color:var(--cv-luc-51df51)}body:not(.light-theme) b.warn,body:not(.light-theme) .kq-pct.warn{color:var(--cv-cam-fcbc6e)}body:not(.light-theme) b.bad,body:not(.light-theme) .kq-pct.bad{color:var(--cv-do-f87171)}
.kq-pct{display:inline-block;min-width:40px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.kq-pct2{font-size:10.5px;font-weight:400;color:var(--text-muted)}
.kq-ngw{position:relative;display:inline-block}
.kq-ng-btn{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kq-ng-box{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:230px;max-height:min(62vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px;border-radius:8px;border:1px solid var(--border-color,#cbd5e1);background:var(--bg-card-solid,#fff);box-shadow:0 8px 24px rgba(15,23,42,.18)}
.kq-ngw.mo .kq-ng-box{display:block}.kq-ngw.len .kq-ng-box{top:auto;bottom:calc(100% + 4px)}.kq-ngw.phai .kq-ng-box{left:auto;right:0}
.kq-ng-loc{position:sticky;top:-6px;width:100%;box-sizing:border-box;margin:0 0 4px;cursor:text !important}
.kq-ng-it{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:12px;color:var(--text-primary);cursor:pointer;white-space:nowrap}
.kq-ng-it:hover{background:var(--cv-lam-00b7c3-a012)}.kq-ng-it input{margin:0;cursor:pointer;accent-color:var(--cv-lam,#00B7C3)}
.kq-ng-all{border-bottom:1px solid var(--border-color,#e2e8f0);border-radius:6px 6px 0 0;margin-bottom:2px;font-weight:600}
.kq-nguoi{flex-wrap:wrap}.kq-ng1{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.kq-na{font-size:11px;color:var(--text-muted);font-style:italic}
.kq-cmp{display:grid;grid-template-columns:minmax(120px,220px) repeat(3,minmax(0,1fr));gap:14px;align-items:center;padding:5px 0;font-size:12px;color:var(--text-primary);border-top:1px solid var(--border-color,#e2e8f0)}
.kq-cmp>span{display:flex;align-items:center;gap:8px;min-width:0}
.kq-cmp-h{border-top:0;font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:0}
a.kq-noi{color:var(--text-primary);font-weight:600;text-decoration:underline dotted;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.kq-noi:hover{color:var(--accent-cyan,#018b94)}
.kq-ds{overflow-x:auto}
.kq-r{display:grid;grid-template-columns:minmax(260px,1fr) 104px 104px 62px 132px 84px 84px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--border-color,#e2e8f0);font-size:12px;color:var(--text-primary);min-width:880px}
.kq-r-h{border-top:0;font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:0}
.kq-n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-dvt{color:var(--text-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-d{display:flex;align-items:center;gap:8px;min-width:0}
.kq-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kq-o .kq-ten,.kq-o .kq-n{font-weight:600}
.kq-v{color:var(--text-secondary,var(--text-primary))}
.kq-kc{margin-top:8px;padding:5px 0 3px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-cyan,#018b94);border-top:2px solid var(--border-color,#cbd5e1)}
.kq-tg,.kq-tg0{display:inline-block;width:16px;color:var(--text-muted);user-select:none}
.kq-tg{cursor:pointer}
.kq-tag{display:inline-block;font-size:9.5px;font-weight:700;padding:0 5px;border-radius:3px;background:var(--cv-lam-06b8c4-a016);color:var(--cv-lam-07949d);margin-right:6px}
body:not(.light-theme) .kq-tag{color:var(--cv-lam-11d5e2)}
.kq-st{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap}
.kq-st.ok{background:var(--cv-luc-defcde);color:var(--cv-luc-158115)}.kq-st.bad{background:var(--cv-do-fee2e2);color:var(--cv-do-b91c1c)}.kq-st.run{background:#e0f2fe;color:var(--cv-lam-026f76)}.kq-st.na{background:transparent;color:var(--text-muted);font-weight:400}
body:not(.light-theme) .kq-st.ok{background:var(--cv-luc-0f3c0f);color:var(--cv-luc-51df51)}body:not(.light-theme) .kq-st.bad{background:var(--cv-do-431515);color:var(--cv-do-f87171)}body:not(.light-theme) .kq-st.run{background:#0c2f44;color:var(--cv-lam-05ddec)}
.kq-nguoi{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px;color:var(--text-primary)}
.kq-av{width:26px;height:26px;border-radius:50%;background:var(--cv-lam-06b8c4-a018);color:var(--cv-lam-07949d);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.tdkq-tre{color:var(--cv-do-b91c1c);font-weight:600}body:not(.light-theme) .tdkq-tre{color:var(--cv-do-f87171)}
a.tdkq-mo{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor}

/* ── THANH KỲ của bảng Kế hoạch công việc (BoD 4/10 "làm lại cho tinh tế"): ‹ · nhãn kỳ + icon lịch · › + khoảng ngày ── */
#khcv-bod-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; position: sticky; left: 0; z-index: 40; width: max-content; max-width: 100%; }
#khcv-bod-period .khcv-ky-nhom { display: inline-flex; align-items: stretch; border: 1px solid rgba(148, 163, 184, .28); border-radius: 9px; overflow: hidden; background: var(--bg-card-solid, #0f172a); }
#khcv-bod-period .khcv-ky-nut { width: 30px; border: 0; background: transparent; color: var(--text-secondary); font-size: 16px !important; font-weight: 700; cursor: pointer; line-height: 1; }
#khcv-bod-period .khcv-ky-nut:hover, #khcv-bod-period .khcv-ky-nhan:hover { background: var(--cv-lam-20c5cf-a012); }
#khcv-bod-period .khcv-ky-nhan { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 0; border-left: 1px solid rgba(148, 163, 184, .2); border-right: 1px solid rgba(148, 163, 184, .2); background: transparent; color: var(--text-primary); font-size: 12.5px !important; font-weight: 800; cursor: pointer; min-width: 132px; justify-content: center; font-variant-numeric: tabular-nums; }
#khcv-bod-period .khcv-ky-nhan i { color: var(--accent-cyan, #20c5cf); font-size: 13px; }
#khcv-bod-period .khcv-ky-khoang { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; }
#khcv-bod-period .khcv-ky-khoang input[type=date] { padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, .28); background: transparent; color: var(--text-secondary); font-size: 12px !important; font-variant-numeric: tabular-nums; }
body.light-theme #khcv-bod-period .khcv-ky-nhom { background: #fff; border-color: #cbd5e1; }
body.light-theme #khcv-bod-period .khcv-ky-nhan { border-color: #e2e8f0; color: #0f172a; }
body.light-theme #khcv-bod-period .khcv-ky-nhan i { color: var(--cv-lam-0c767d); }
body.light-theme #khcv-bod-period .khcv-ky-nut { color: #334155; }

/* ── BẢNG MÀU 7 SẮC CẦU VỒNG của hệ (BoD 4/10 — RULE 8B.10, BINDING): màu nhấn MỚI chỉ lấy trong 7 màu này ── */
:root { --cv-do: #FF0000; --cv-cam: #FF8C00; --cv-vang: #FFF200; --cv-luc: #008000; --cv-lam: #00B7C3; --cv-cham: #3F0A8F; --cv-tim: #8B0A8B; }
/* ═══ SẮC ĐỘ 7 SẮC CẦU VỒNG — TỰ SINH (BoD 9/10 "làm hết": mọi màu có sắc gõ thẳng trong mã giao diện quy về MỘT chỗ khai này, RULE 8B.10).
   Tên = --cv-<sắc>-<mã màu>[-a<độ đục %>]; giá trị GIỮ NGUYÊN màu cũ (màn không đổi). Mã MỚI: dùng biến 7 sắc gốc hoặc một biến ở đây; cần sắc độ mới thì thêm một dòng vào khối này. */
:root {
  --cv-cam-3a2103: #3a2103;
  --cv-lam-0e2527: #0e2527;
  --cv-cam-422a0d: #422a0d;
  --cv-cam-432806: #432806;
  --cv-cam-653e0f: #653e0f;
  --cv-cam-683f0d: #683f0d;
  --cv-cam-7c4b0f: #7c4b0f;
  --cv-cam-804c0c: #804c0c;
  --cv-cam-9c5b0b: #9c5b0b;
  --cv-cam-a05d0a: #a05d0a;
  --cv-cam-a16207: #a16207;
  --cv-cam-a45e08: #a45e08;
  --cv-cam-a45e08-a008: rgba(164,94,8,0.08);
  --cv-cam-a45e08-a015: rgba(164,94,8,0.15);
  --cv-cam-a45e08-a025: rgba(164,94,8,0.25);
  --cv-cam-a45e08-a045: rgba(164,94,8,0.45);
  --cv-cam-a45e08-a050: rgba(164,94,8,0.5);
  --cv-cam-d97706: #d97706;
  --cv-cam-d97706-a008: rgba(217,119,6,0.08);
  --cv-cam-d97706-a012: rgba(217,119,6,0.12);
  --cv-cam-d97706-a015: rgba(217,119,6,0.15);
  --cv-cam-d97706-a020: rgba(217,119,6,0.2);
  --cv-cam-d97706-a030: rgba(217,119,6,0.3);
  --cv-cam-dc8419: #dc8419;
  --cv-cam-e17d04: #e17d04;
  --cv-cam-e68106: #e68106;
  --cv-cam-e68106-a002: rgba(230,129,6,0.02);
  --cv-cam-f4a020: #f4a020;
  --cv-cam-f4a020-a001: rgba(244,160,32,0.01);
  --cv-cam-f4a020-a004: rgba(244,160,32,0.04);
  --cv-cam-f4a020-a005: rgba(244,160,32,0.05);
  --cv-cam-f4a020-a010: rgba(244,160,32,0.1);
  --cv-cam-f4a020-a020: rgba(244,160,32,0.2);
  --cv-cam-f4a020-a040: rgba(244,160,32,0.4);
  --cv-cam-f69d2f: #f69d2f;
  --cv-cam-f69d2f-a002: rgba(246,157,47,0.02);
  --cv-cam-f69d2f-a003: rgba(246,157,47,0.03);
  --cv-cam-f69d2f-a004: rgba(246,157,47,0.04);
  --cv-cam-f69d2f-a005: rgba(246,157,47,0.05);
  --cv-cam-f69d2f-a006: rgba(246,157,47,0.06);
  --cv-cam-f69d2f-a008: rgba(246,157,47,0.08);
  --cv-cam-f69d2f-a010: rgba(246,157,47,0.1);
  --cv-cam-f69d2f-a012: rgba(246,157,47,0.12);
  --cv-cam-f69d2f-a014: rgba(246,157,47,0.14);
  --cv-cam-f69d2f-a015: rgba(246,157,47,0.15);
  --cv-cam-f69d2f-a016: rgba(246,157,47,0.16);
  --cv-cam-f69d2f-a018: rgba(246,157,47,0.18);
  --cv-cam-f69d2f-a020: rgba(246,157,47,0.2);
  --cv-cam-f69d2f-a022: rgba(246,157,47,0.22);
  --cv-cam-f69d2f-a025: rgba(246,157,47,0.25);
  --cv-cam-f69d2f-a028: rgba(246,157,47,0.28);
  --cv-cam-f69d2f-a030: rgba(246,157,47,0.3);
  --cv-cam-f69d2f-a035: rgba(246,157,47,0.35);
  --cv-cam-f69d2f-a040: rgba(246,157,47,0.4);
  --cv-cam-f69d2f-a045: rgba(246,157,47,0.45);
  --cv-cam-f69d2f-a050: rgba(246,157,47,0.5);
  --cv-cam-f69d2f-a060: rgba(246,157,47,0.6);
  --cv-cam-fa9316: #fa9316;
  --cv-cam-fcbc6e: #fcbc6e;
  --cv-cam-fed7aa: #fed7aa;
  --cv-cam-fef2e3: #fef2e3;
  --cv-cam-ffedd5: #ffedd5;
  --cv-cam-fff7ed: #fff7ed;
  --cv-cham-4c1d95: #4c1d95;
  --cv-cham-5b21b6: #5b21b6;
  --cv-cham-6d28d9: #6d28d9;
  --cv-cham-6d28d9-a008: rgba(109,40,217,0.08);
  --cv-cham-6d28d9-a010: rgba(109,40,217,0.1);
  --cv-cham-6f28db: #6f28db;
  --cv-cham-6f28db-a008: rgba(111,40,219,0.08);
  --cv-cham-6f28db-a015: rgba(111,40,219,0.15);
  --cv-cham-6f28db-a050: rgba(111,40,219,0.5);
  --cv-cham-7c3aed: #7c3aed;
  --cv-cham-7c3aed-a004: rgba(124,58,237,0.04);
  --cv-cham-7c3aed-a006: rgba(124,58,237,0.06);
  --cv-cham-7c3aed-a025: rgba(124,58,237,0.25);
  --cv-cham-9656f6: #9656f6;
  --cv-cham-9656f6-a006: rgba(150,86,246,0.06);
  --cv-cham-9656f6-a008: rgba(150,86,246,0.08);
  --cv-cham-9656f6-a010: rgba(150,86,246,0.1);
  --cv-cham-9656f6-a012: rgba(150,86,246,0.12);
  --cv-cham-9656f6-a014: rgba(150,86,246,0.14);
  --cv-cham-9656f6-a015: rgba(150,86,246,0.15);
  --cv-cham-9656f6-a016: rgba(150,86,246,0.16);
  --cv-cham-9656f6-a018: rgba(150,86,246,0.18);
  --cv-cham-9656f6-a020: rgba(150,86,246,0.2);
  --cv-cham-9656f6-a025: rgba(150,86,246,0.25);
  --cv-cham-9656f6-a030: rgba(150,86,246,0.3);
  --cv-cham-9656f6-a035: rgba(150,86,246,0.35);
  --cv-cham-9656f6-a040: rgba(150,86,246,0.4);
  --cv-cham-9656f6-a045: rgba(150,86,246,0.45);
  --cv-cham-9656f6-a050: rgba(150,86,246,0.5);
  --cv-cham-9656f6-a055: rgba(150,86,246,0.55);
  --cv-cham-9b5df7: #9b5df7;
  --cv-cham-9b5df7-a004: rgba(155,93,247,0.04);
  --cv-cham-9b5df7-a012: rgba(155,93,247,0.12);
  --cv-cham-9b5df7-a015: rgba(155,93,247,0.15);
  --cv-cham-9b5df7-a020: rgba(155,93,247,0.2);
  --cv-cham-9b5df7-a030: rgba(155,93,247,0.3);
  --cv-cham-9b5df7-a040: rgba(155,93,247,0.4);
  --cv-cham-9b5df7-a045: rgba(155,93,247,0.45);
  --cv-cham-9b5df7-a060: rgba(155,93,247,0.6);
  --cv-cham-9b5ef7-a010: rgba(155,94,247,0.1);
  --cv-cham-9b5ef7-a015: rgba(155,94,247,0.15);
  --cv-cham-b486fa: #b486fa;
  --cv-cham-b486fa-a004: rgba(180,134,250,0.04);
  --cv-cham-b688fc: #b688fc;
  --cv-cham-cfb1fd: #cfb1fd;
  --cv-cham-e4d4fe: #e4d4fe;
  --cv-cham-f1e8fe: #f1e8fe;
  --cv-do-2a0f10: #2a0f10;
  --cv-do-431515: #431515;
  --cv-do-7f1d1d: #7f1d1d;
  --cv-do-991b1b: #991b1b;
  --cv-do-b91c1c: #b91c1c;
  --cv-do-b91c1c-a008: rgba(185,28,28,0.08);
  --cv-do-dc2626: #dc2626;
  --cv-do-dc2626-a008: rgba(220,38,38,0.08);
  --cv-do-dc2626-a010: rgba(220,38,38,0.1);
  --cv-do-dc2626-a035: rgba(220,38,38,0.35);
  --cv-do-dc2626-a040: rgba(220,38,38,0.4);
  --cv-do-dc2626-a045: rgba(220,38,38,0.45);
  --cv-do-ef4444: #ef4444;
  --cv-do-ef4444-a002: rgba(239,68,68,0.02);
  --cv-do-ef4444-a003: rgba(239,68,68,0.03);
  --cv-do-ef4444-a004: rgba(239,68,68,0.04);
  --cv-do-ef4444-a005: rgba(239,68,68,0.05);
  --cv-do-ef4444-a006: rgba(239,68,68,0.06);
  --cv-do-ef4444-a008: rgba(239,68,68,0.08);
  --cv-do-ef4444-a010: rgba(239,68,68,0.1);
  --cv-do-ef4444-a012: rgba(239,68,68,0.12);
  --cv-do-ef4444-a014: rgba(239,68,68,0.14);
  --cv-do-ef4444-a015: rgba(239,68,68,0.15);
  --cv-do-ef4444-a018: rgba(239,68,68,0.18);
  --cv-do-ef4444-a020: rgba(239,68,68,0.2);
  --cv-do-ef4444-a025: rgba(239,68,68,0.25);
  --cv-do-ef4444-a030: rgba(239,68,68,0.3);
  --cv-do-ef4444-a035: rgba(239,68,68,0.35);
  --cv-do-ef4444-a040: rgba(239,68,68,0.4);
  --cv-do-ef4444-a045: rgba(239,68,68,0.45);
  --cv-do-ef4444-a050: rgba(239,68,68,0.5);
  --cv-do-ef4444-a060: rgba(239,68,68,0.6);
  --cv-do-f44242: #f44242;
  --cv-do-f44242-a012: rgba(244,66,66,0.12);
  --cv-do-f87171: #f87171;
  --cv-do-fca5a5: #fca5a5;
  --cv-do-fecaca: #fecaca;
  --cv-do-fee2e2: #fee2e2;
  --cv-do-fef2f2: #fef2f2;
  --cv-do-ff4d4d: #ff4d4d;
  --cv-do-ff8080: #ff8080;
  --cv-lam-00767e: #00767e;
  --cv-lam-00b7c3-a012: rgba(0,183,195,0.12);
  --cv-lam-00f2fe: #00f2fe;
  --cv-lam-00f2fe-a006: rgba(0,242,254,0.06);
  --cv-lam-00f2fe-a008: rgba(0,242,254,0.08);
  --cv-lam-00f2fe-a012: rgba(0,242,254,0.12);
  --cv-lam-00f2fe-a015: rgba(0,242,254,0.15);
  --cv-lam-00f2fe-a020: rgba(0,242,254,0.2);
  --cv-lam-00f2fe-a025: rgba(0,242,254,0.25);
  --cv-lam-00f2fe-a030: rgba(0,242,254,0.3);
  --cv-lam-00f2fe-a040: rgba(0,242,254,0.4);
  --cv-lam-00f2fe-a045: rgba(0,242,254,0.45);
  --cv-lam-00f2fe-a050: rgba(0,242,254,0.5);
  --cv-lam-018b94: #018b94;
  --cv-lam-018b94-a004: rgba(1,139,148,0.04);
  --cv-lam-018b94-a005: rgba(1,139,148,0.05);
  --cv-lam-018b94-a008: rgba(1,139,148,0.08);
  --cv-lam-018b94-a010: rgba(1,139,148,0.1);
  --cv-lam-018b94-a015: rgba(1,139,148,0.15);
  --cv-lam-018b94-a020: rgba(1,139,148,0.2);
  --cv-lam-018b94-a025: rgba(1,139,148,0.25);
  --cv-lam-018b94-a030: rgba(1,139,148,0.3);
  --cv-lam-018b94-a040: rgba(1,139,148,0.4);
  --cv-lam-01b8c4: #01b8c4;
  --cv-lam-026f76: #026f76;
  --cv-lam-026f76-a008: rgba(2,111,118,0.08);
  --cv-lam-032325: #032325;
  --cv-lam-04d5e3: #04d5e3;
  --cv-lam-055e63: #055e63;
  --cv-lam-05ddec: #05ddec;
  --cv-lam-06b4bf: #06b4bf;
  --cv-lam-06b4bf-a040: rgba(6,180,191,0.4);
  --cv-lam-06b8c4: #06b8c4;
  --cv-lam-06b8c4-a002: rgba(6,184,196,0.02);
  --cv-lam-06b8c4-a003: rgba(6,184,196,0.03);
  --cv-lam-06b8c4-a004: rgba(6,184,196,0.04);
  --cv-lam-06b8c4-a005: rgba(6,184,196,0.05);
  --cv-lam-06b8c4-a006: rgba(6,184,196,0.06);
  --cv-lam-06b8c4-a007: rgba(6,184,196,0.07);
  --cv-lam-06b8c4-a008: rgba(6,184,196,0.08);
  --cv-lam-06b8c4-a010: rgba(6,184,196,0.1);
  --cv-lam-06b8c4-a012: rgba(6,184,196,0.12);
  --cv-lam-06b8c4-a013: rgba(6,184,196,0.13);
  --cv-lam-06b8c4-a014: rgba(6,184,196,0.14);
  --cv-lam-06b8c4-a015: rgba(6,184,196,0.15);
  --cv-lam-06b8c4-a016: rgba(6,184,196,0.16);
  --cv-lam-06b8c4-a018: rgba(6,184,196,0.18);
  --cv-lam-06b8c4-a020: rgba(6,184,196,0.2);
  --cv-lam-06b8c4-a022: rgba(6,184,196,0.22);
  --cv-lam-06b8c4-a024: rgba(6,184,196,0.24);
  --cv-lam-06b8c4-a025: rgba(6,184,196,0.25);
  --cv-lam-06b8c4-a030: rgba(6,184,196,0.3);
  --cv-lam-06b8c4-a035: rgba(6,184,196,0.35);
  --cv-lam-06b8c4-a040: rgba(6,184,196,0.4);
  --cv-lam-06b8c4-a045: rgba(6,184,196,0.45);
  --cv-lam-06b8c4-a050: rgba(6,184,196,0.5);
  --cv-lam-06b8c4-a055: rgba(6,184,196,0.55);
  --cv-lam-06b8c4-a060: rgba(6,184,196,0.6);
  --cv-lam-06b8c4-a070: rgba(6,184,196,0.7);
  --cv-lam-06b8c4-a075: rgba(6,184,196,0.75);
  --cv-lam-06b8c4-a092: rgba(6,184,196,0.92);
  --cv-lam-07949d: #07949d;
  --cv-lam-07949d-a003: rgba(7,148,157,0.03);
  --cv-lam-07949d-a004: rgba(7,148,157,0.04);
  --cv-lam-07949d-a005: rgba(7,148,157,0.05);
  --cv-lam-07949d-a006: rgba(7,148,157,0.06);
  --cv-lam-07949d-a007: rgba(7,148,157,0.07);
  --cv-lam-07949d-a008: rgba(7,148,157,0.08);
  --cv-lam-07949d-a010: rgba(7,148,157,0.1);
  --cv-lam-07949d-a012: rgba(7,148,157,0.12);
  --cv-lam-07949d-a014: rgba(7,148,157,0.14);
  --cv-lam-07949d-a015: rgba(7,148,157,0.15);
  --cv-lam-07949d-a016: rgba(7,148,157,0.16);
  --cv-lam-07949d-a018: rgba(7,148,157,0.18);
  --cv-lam-07949d-a020: rgba(7,148,157,0.2);
  --cv-lam-07949d-a022: rgba(7,148,157,0.22);
  --cv-lam-07949d-a025: rgba(7,148,157,0.25);
  --cv-lam-07949d-a030: rgba(7,148,157,0.3);
  --cv-lam-07949d-a040: rgba(7,148,157,0.4);
  --cv-lam-07949d-a050: rgba(7,148,157,0.5);
  --cv-lam-07949d-a060: rgba(7,148,157,0.6);
  --cv-lam-07c4d0: #07c4d0;
  --cv-lam-07c4d0-a004: rgba(7,196,208,0.04);
  --cv-lam-07c4d0-a006: rgba(7,196,208,0.06);
  --cv-lam-07c4d0-a025: rgba(7,196,208,0.25);
  --cv-lam-0a3c3f: #0a3c3f;
  --cv-lam-0aa5b0: #0aa5b0;
  --cv-lam-0aa5b0-a012: rgba(10,165,176,0.12);
  --cv-lam-0bacb6: #0bacb6;
  --cv-lam-0bacb6-a002: rgba(11,172,182,0.02);
  --cv-lam-0bacb6-a005: rgba(11,172,182,0.05);
  --cv-lam-0bacb6-a014: rgba(11,172,182,0.14);
  --cv-lam-0bacb6-a020: rgba(11,172,182,0.2);
  --cv-lam-0bacb6-a050: rgba(11,172,182,0.5);
  --cv-lam-0c767d: #0c767d;
  --cv-lam-0c767d-a003: rgba(12,118,125,0.03);
  --cv-lam-0c767d-a006: rgba(12,118,125,0.06);
  --cv-lam-0c767d-a010: rgba(12,118,125,0.1);
  --cv-lam-0c767d-a050: rgba(12,118,125,0.5);
  --cv-lam-0c7980: #0c7980;
  --cv-lam-0d848c: #0d848c;
  --cv-lam-0d848c-a002: rgba(13,132,140,0.02);
  --cv-lam-0d848c-a008: rgba(13,132,140,0.08);
  --cv-lam-0d848c-a015: rgba(13,132,140,0.15);
  --cv-lam-0d848c-a025: rgba(13,132,140,0.25);
  --cv-lam-0d848c-a035: rgba(13,132,140,0.35);
  --cv-lam-0d848c-a050: rgba(13,132,140,0.5);
  --cv-lam-0e666c: #0e666c;
  --cv-lam-0e666c-a008: rgba(14,102,108,0.08);
  --cv-lam-0e666c-a015: rgba(14,102,108,0.15);
  --cv-lam-0e666c-a050: rgba(14,102,108,0.5);
  --cv-lam-10686e: #10686e;
  --cv-lam-112a2b: #112a2b;
  --cv-lam-11d5e2: #11d5e2;
  --cv-lam-11d5e2-a075: rgba(17,213,226,0.75);
  --cv-lam-126065: #126065;
  --cv-lam-135054: #135054;
  --cv-lam-158393: #158393;
  --cv-lam-15b5c0: #15b5c0;
  --cv-lam-15b5c0-a005: rgba(21,181,192,0.05);
  --cv-lam-15b5c0-a012: rgba(21,181,192,0.12);
  --cv-lam-174a4d: #174a4d;
  --cv-lam-183f42: #183f42;
  --cv-lam-1b959d: #1b959d;
  --cv-lam-20c5cf: #20c5cf;
  --cv-lam-20c5cf-a012: rgba(32,197,207,0.12);
  --cv-lam-267379: #267379;
  --cv-lam-46cbd4-a060: rgba(70,203,212,0.6);
  --cv-lam-46cbd4-a070: rgba(70,203,212,0.7);
  --cv-lam-67e8f9: #67e8f9;
  --cv-lam-82ebf2: #82ebf2;
  --cv-lam-cffafe: #cffafe;
  --cv-lam-ecfeff: #ecfeff;
  --cv-luc-047b04: #047b04;
  --cv-luc-047b04-a008: rgba(4,123,4,0.08);
  --cv-luc-047b04-a015: rgba(4,123,4,0.15);
  --cv-luc-047b04-a050: rgba(4,123,4,0.5);
  --cv-luc-059905: #059905;
  --cv-luc-062906: #062906;
  --cv-luc-066106: #066106;
  --cv-luc-0a7c0a: #0a7c0a;
  --cv-luc-0a9c0a: #0a9c0a;
  --cv-luc-0f3c0f: #0f3c0f;
  --cv-luc-0f710f: #0f710f;
  --cv-luc-10bd10: #10bd10;
  --cv-luc-10bd10-a002: rgba(16,189,16,0.02);
  --cv-luc-10bd10-a004: rgba(16,189,16,0.04);
  --cv-luc-10bd10-a005: rgba(16,189,16,0.05);
  --cv-luc-10bd10-a006: rgba(16,189,16,0.06);
  --cv-luc-10bd10-a007: rgba(16,189,16,0.07);
  --cv-luc-10bd10-a010: rgba(16,189,16,0.1);
  --cv-luc-10bd10-a012: rgba(16,189,16,0.12);
  --cv-luc-10bd10-a015: rgba(16,189,16,0.15);
  --cv-luc-10bd10-a016: rgba(16,189,16,0.16);
  --cv-luc-10bd10-a018: rgba(16,189,16,0.18);
  --cv-luc-10bd10-a020: rgba(16,189,16,0.2);
  --cv-luc-10bd10-a022: rgba(16,189,16,0.22);
  --cv-luc-10bd10-a025: rgba(16,189,16,0.25);
  --cv-luc-10bd10-a030: rgba(16,189,16,0.3);
  --cv-luc-10bd10-a035: rgba(16,189,16,0.35);
  --cv-luc-10bd10-a040: rgba(16,189,16,0.4);
  --cv-luc-10bd10-a045: rgba(16,189,16,0.45);
  --cv-luc-10bd10-a060: rgba(16,189,16,0.6);
  --cv-luc-10bd10-a065: rgba(16,189,16,0.65);
  --cv-luc-10bd10-a085: rgba(16,189,16,0.85);
  --cv-luc-158115: #158115;
  --cv-luc-158115-a008: rgba(21,129,21,0.08);
  --cv-luc-166616: #166616;
  --cv-luc-16a416: #16a416;
  --cv-luc-16a416-a006: rgba(22,164,22,0.06);
  --cv-luc-16a416-a007: rgba(22,164,22,0.07);
  --cv-luc-16a416-a008: rgba(22,164,22,0.08);
  --cv-luc-16a416-a010: rgba(22,164,22,0.1);
  --cv-luc-16a416-a012: rgba(22,164,22,0.12);
  --cv-luc-16a416-a040: rgba(22,164,22,0.4);
  --cv-luc-16a416-a050: rgba(22,164,22,0.5);
  --cv-luc-16a416-a055: rgba(22,164,22,0.55);
  --cv-luc-17d617-a002: rgba(23,214,23,0.02);
  --cv-luc-17fa17: #17fa17;
  --cv-luc-17fa17-a005: rgba(23,250,23,0.05);
  --cv-luc-22c722: #22c722;
  --cv-luc-22c722-a002: rgba(34,199,34,0.02);
  --cv-luc-22c722-a003: rgba(34,199,34,0.03);
  --cv-luc-22c722-a004: rgba(34,199,34,0.04);
  --cv-luc-22c722-a005: rgba(34,199,34,0.05);
  --cv-luc-22c722-a006: rgba(34,199,34,0.06);
  --cv-luc-22c722-a008: rgba(34,199,34,0.08);
  --cv-luc-22c722-a010: rgba(34,199,34,0.1);
  --cv-luc-22c722-a012: rgba(34,199,34,0.12);
  --cv-luc-22c722-a014: rgba(34,199,34,0.14);
  --cv-luc-22c722-a015: rgba(34,199,34,0.15);
  --cv-luc-22c722-a020: rgba(34,199,34,0.2);
  --cv-luc-22c722-a025: rgba(34,199,34,0.25);
  --cv-luc-22c722-a030: rgba(34,199,34,0.3);
  --cv-luc-22c722-a035: rgba(34,199,34,0.35);
  --cv-luc-22c722-a040: rgba(34,199,34,0.4);
  --cv-luc-22c722-a045: rgba(34,199,34,0.45);
  --cv-luc-22c722-a050: rgba(34,199,34,0.5);
  --cv-luc-239523: #239523;
  --cv-luc-2f7f2f: #2f7f2f;
  --cv-luc-42d642: #42d642;
  --cv-luc-42d642-a090: rgba(66,214,66,0.9);
  --cv-luc-51df51: #51df51;
  --cv-luc-51df51-a040: rgba(81,223,81,0.4);
  --cv-luc-6bed6b: #6bed6b;
  --cv-luc-7ae97a: #7ae97a;
  --cv-luc-8df08d: #8df08d;
  --cv-luc-aff4af: #aff4af;
  --cv-luc-bff7bf: #bff7bf;
  --cv-luc-d5fad5: #d5fad5;
  --cv-luc-defcde: #defcde;
  --cv-luc-e8f6e8: #e8f6e8;
  --cv-luc-eefdee: #eefdee;
  --cv-luc-f1fdf1: #f1fdf1;
  --cv-tim-a010a0: #a010a0;
  --cv-tim-ac16ac: #ac16ac;
  --cv-tim-ac16ac-a045: rgba(172,22,172,0.45);
  --cv-tim-ac16ac-a090: rgba(172,22,172,0.9);
  --cv-tim-c624c6: #c624c6;
  --cv-tim-c922c9: #c922c9;
  --cv-tim-c924c9: #c924c9;
  --cv-tim-c924c9-a040: rgba(201,36,201,0.4);
  --cv-tim-c924c9-a050: rgba(201,36,201,0.5);
  --cv-tim-c924c9-a070: rgba(201,36,201,0.7);
  --cv-tim-c924c9-a085: rgba(201,36,201,0.85);
  --cv-tim-c924c9-a090: rgba(201,36,201,0.9);
  --cv-tim-e300e3: #e300e3;
  --cv-tim-e300e3-a040: rgba(227,0,227,0.4);
  --cv-tim-e929e9: #e929e9;
  --cv-tim-e929e9-a010: rgba(233,41,233,0.1);
  --cv-tim-e929e9-a016: rgba(233,41,233,0.16);
  --cv-tim-e929e9-a020: rgba(233,41,233,0.2);
  --cv-tim-e929e9-a025: rgba(233,41,233,0.25);
  --cv-tim-e929e9-a030: rgba(233,41,233,0.3);
  --cv-tim-e929e9-a035: rgba(233,41,233,0.35);
  --cv-tim-e929e9-a040: rgba(233,41,233,0.4);
  --cv-tim-e929e9-a060: rgba(233,41,233,0.6);
  --cv-tim-ec26ec: #ec26ec;
  --cv-tim-f100f1: #f100f1;
  --cv-tim-f9a2f9: #f9a2f9;
  --cv-tim-fbcdfb: #fbcdfb;
  --cv-tim-fde6fd: #fde6fd;
  --cv-vang-c9bf07: #c9bf07;
  --cv-vang-c9bf07-a002: rgba(201,191,7,0.02);
  --cv-vang-c9bf07-a015: rgba(201,191,7,0.15);
  --cv-vang-c9bf07-a040: rgba(201,191,7,0.4);
  --cv-vang-e0d505: #e0d505;
  --cv-vang-e7db04: #e7db04;
  --cv-vang-f7eb04: #f7eb04;
  --cv-vang-fdf78b: #fdf78b;
  --cv-vang-fef9c3: #fef9c3;
  --cv-vang-fffdd5: #fffdd5;
}



/* (BoD 11/10 "màn tối mà chữ tím khó nhìn" → "rà các màn khác rồi sửa luôn") MÀU CHỮ cho các sắc tím / chàm đậm: đêm pha trắng (mã tính sẵn — máy tương phản auto_contrast đọc được) vừa đủ tương phản ≥ 4,8:1 trên nền thẻ tối, ngày giữ màu gốc. Chữ dùng biến -chu; nền / viền giữ biến gốc. */
:root{--cv-cham-chu:#a991cd;--cv-tim-chu:#c584c5;--cv-cham-4c1d95-chu:#a68eca;--cv-cham-5b21b6-chu:#a585d7;--cv-cham-6d28d9-chu:#af89ea;--cv-cham-6f28db-chu:#b089eb;--cv-cham-7c3aed-chu:#aa7ff3;--cv-cham-9656f6-chu:#b080f8;--cv-cham-9b5df7-chu:#af7df9;--cv-tim-a010a0-chu:#cb7ccb;--cv-tim-ac16ac-chu:#cd73cd;--cv-tim-c624c6-chu:#da71da;--cv-tim-c922c9-chu:#dc6fdc;--cv-tim-c924c9-chu:#dc71dc;--cv-tim-e300e3-chu:#ed59ed;--cv-tim-e929e9-chu:#ed54ed;--cv-tim-ec26ec-chu:#f051f0;--cv-tim-f100f1-chu:#f54cf5;}
body.light-theme{--cv-cham-chu:var(--cv-cham);--cv-tim-chu:var(--cv-tim);--cv-cham-4c1d95-chu:var(--cv-cham-4c1d95);--cv-cham-5b21b6-chu:var(--cv-cham-5b21b6);--cv-cham-6d28d9-chu:var(--cv-cham-6d28d9);--cv-cham-6f28db-chu:var(--cv-cham-6f28db);--cv-cham-7c3aed-chu:var(--cv-cham-7c3aed);--cv-cham-9656f6-chu:var(--cv-cham-9656f6);--cv-cham-9b5df7-chu:var(--cv-cham-9b5df7);--cv-tim-a010a0-chu:var(--cv-tim-a010a0);--cv-tim-ac16ac-chu:var(--cv-tim-ac16ac);--cv-tim-c624c6-chu:var(--cv-tim-c624c6);--cv-tim-c922c9-chu:var(--cv-tim-c922c9);--cv-tim-c924c9-chu:var(--cv-tim-c924c9);--cv-tim-e300e3-chu:var(--cv-tim-e300e3);--cv-tim-e929e9-chu:var(--cv-tim-e929e9);--cv-tim-ec26ec-chu:var(--cv-tim-ec26ec);--cv-tim-f100f1-chu:var(--cv-tim-f100f1);}

/* (BoD 13/10 "chữ không nét, khó đọc") Bản đồ vùng 3C: chữ SVG đậm + viền nền để nổi trên vòng tròn mờ; màu theo 7 sắc, đậm ở giao diện ngày, sáng ở giao diện đêm */
#c3-venn-svg .c3-lb { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: .5px; paint-order: stroke; stroke: var(--bg-card-solid, #0f172a); stroke-width: 5px; stroke-linejoin: round; }
#c3-venn-svg .c3-lb-cust { fill: color-mix(in srgb, var(--cv-lam) 70%, white); }
#c3-venn-svg .c3-lb-comp, #c3-venn-svg .c3-lb-risk { fill: color-mix(in srgb, var(--cv-cam) 75%, white); }
#c3-venn-svg .c3-lb-corp { fill: var(--cv-cham-9656f6-chu); }
#c3-venn-svg .c3-lb-win { fill: color-mix(in srgb, var(--cv-luc) 55%, white); }
#c3-venn-svg .c3-lb-lose { fill: color-mix(in srgb, var(--cv-do) 70%, white); }
#c3-venn-svg .c3-lb-dumb { fill: var(--text-secondary, #cbd5e1); }
body.light-theme #c3-venn-svg .c3-lb { stroke: #ffffff; }
body.light-theme #c3-venn-svg .c3-lb-cust { fill: color-mix(in srgb, var(--cv-lam) 60%, black); }
body.light-theme #c3-venn-svg .c3-lb-comp, body.light-theme #c3-venn-svg .c3-lb-risk { fill: color-mix(in srgb, var(--cv-cam) 65%, black); }
body.light-theme #c3-venn-svg .c3-lb-win { fill: color-mix(in srgb, var(--cv-luc) 85%, black); }
body.light-theme #c3-venn-svg .c3-lb-lose { fill: color-mix(in srgb, var(--cv-do) 80%, black); }
body.light-theme #c3-venn-svg .c3-lb-dumb { fill: var(--text-secondary, #334155); }

/* ═══ BẢNG ĐIỂM ĐỐI THỦ 3C (13/10 — luật 2.134): ô điểm thang 10, màu theo mức (7 sắc, color-mix) ═══ */
.bdt-sc{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;border-radius:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.bdt-sc-l{min-width:52px;height:34px;font-size:17px}
.bdt-sc-s{min-width:30px;height:22px;font-size:12px}
.bdt-s4{color:var(--cv-luc-10bd10);background:color-mix(in srgb, var(--cv-luc) 14%, transparent)}
.bdt-s3{color:var(--cv-lam);background:color-mix(in srgb, var(--cv-lam) 14%, transparent)}
.bdt-s2{color:var(--cv-cam-f69d2f);background:color-mix(in srgb, var(--cv-cam) 16%, transparent)}
.bdt-s1{color:var(--cv-do-ef4444);background:color-mix(in srgb, var(--cv-do) 14%, transparent)}
.bdt-s0{color:var(--text-muted);border:1px dashed var(--text-muted);font-size:11px;font-weight:600}
body.light-theme .bdt-s4{color:var(--cv-luc)}
body.light-theme .bdt-s3{color:var(--cv-lam-00767e)}
.bdt-sel{font-size:12px !important;padding:4px 8px !important;border:1px solid rgba(148,163,184,.4);border-radius:6px;background:var(--bg-card-solid, var(--bg-secondary));color:var(--text-primary);max-width:320px}

/* ═══ PHÂN TÍCH 3C THEO ĐƠN VỊ (13/10 tối): nhãn AI đề xuất điểm dưới từng thanh kéo + nút Chấp nhận ═══ */
.c3-criteria-row .c3-dx{grid-column:1 / -1;font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5}
.c3-criteria-row .c3-dx b{color:var(--cv-cham-chu)}
.c3-dx-ok{font-size:10.5px !important;padding:1px 8px !important;margin-left:6px;border:1px solid var(--cv-cham-chu);border-radius:6px;background:transparent;color:var(--cv-cham-chu);cursor:pointer}
.c3-dx-ok:hover{background:color-mix(in srgb, var(--cv-cham) 14%, transparent)}

/* ═══ TIMELINE GANTT (14/10 — BoD duyệt bản phác, thang mặc định Ngày): cột trái ghim, trục thời gian cuộn ngang, thanh kéo được, mũi tên phụ thuộc ═══ */
.gt-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,.25)}
.gt-bar .gt-sp{flex:1}
.gt-dem{font-size:10px;color:var(--text-muted);background:rgba(148,163,184,.12);padding:2px 6px;border-radius:4px}
.gt-lbl{font-size:10.5px;color:var(--text-muted)}
.gt-seg{display:inline-flex;border:1px solid rgba(148,163,184,.4);border-radius:7px;overflow:hidden}
.gt-seg button,.gt-today{font-size:10.5px !important;padding:3px 9px !important;border:none;background:transparent;color:var(--text-primary);cursor:pointer}
.gt-seg button[aria-pressed="true"]{background:var(--cv-lam-07949d);color:#fff;font-weight:700}
.gt-today{border:1px solid rgba(148,163,184,.4) !important;border-radius:7px}
.gt-legend{font-size:10px;color:var(--text-muted);display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.gt-legend i{display:inline-block;width:18px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}
.gt-legend .gt-lg-o{background:color-mix(in srgb,var(--cv-cham-9656f6) 40%,transparent);border-left:3px solid var(--cv-cham-9b5df7-chu);border-right:3px solid var(--cv-cham-9b5df7-chu);height:6px}
.gt-legend .gt-lg-kr{background:color-mix(in srgb,var(--cv-lam-07949d) 30%,transparent)}
.gt-legend .gt-lg-ms{width:9px;height:9px;transform:rotate(45deg);background:var(--cv-cam-f69d2f)}
.gt-legend .gt-lg-arr{width:18px;height:0;border-top:2px solid var(--cv-cham-9b5df7-chu);border-radius:0}
.gt-scroll{overflow:auto;max-height:62vh;border:1px solid rgba(148,163,184,.25);border-radius:8px;position:relative;background:var(--bg-card-solid, var(--bg-secondary))}
.gt-row{display:flex;height:34px;border-bottom:1px solid rgba(148,163,184,.14);box-sizing:border-box}
.gt-row.gt-grp{background:rgba(148,163,184,.10);height:30px}
.gt-row.gt-o{background:color-mix(in srgb,var(--cv-cham-9656f6) 5%,transparent)}
.gt-row.gt-o .gt-l{background:color-mix(in srgb,var(--cv-cham-9656f6) 5%,var(--bg-card-solid, var(--bg-secondary)))}
.gt-hdr{position:sticky;top:0;z-index:5;height:48px;background:var(--bg-card-solid, var(--bg-secondary));border-bottom:1px solid rgba(148,163,184,.35)}
.gt-hdr .gt-l{align-items:flex-end;padding-bottom:5px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;height:48px}
.gt-l{position:sticky;left:0;z-index:4;flex:none;display:grid;grid-template-columns:58px 1fr 42px;align-items:center;background:var(--bg-card-solid, var(--bg-secondary));border-right:1px solid rgba(148,163,184,.35);box-sizing:border-box}
.gt-grp .gt-l{display:flex;background:color-mix(in srgb, var(--text-muted) 10%, var(--bg-card-solid, var(--bg-secondary)))}   /* ô ghim PHẢI nền đặc (luật 1.72) — nền trong suốt là vạch Hôm nay / thanh trôi lòi qua khi cuộn ngang (BoD 14/10) */
.gt-gten{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:0 8px;white-space:nowrap}
.gt-l>span{padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.gt-ma{font-family:var(--font-mono);font-size:10px !important;color:var(--text-muted)}
.gt-ten{display:flex;align-items:center;gap:4px;min-width:0;cursor:default}
.gt-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.gt-o .gt-nm{font-weight:700}.gt-kr .gt-nm{font-weight:600}
.gt-tg,.gt-tg0{width:14px;height:14px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;border:1px solid rgba(148,163,184,.4);border-radius:4px;cursor:pointer;color:var(--text-primary)}
.gt-tg0{border:none;cursor:default}
.gt-chip{font-size:9px;font-weight:800;padding:0 4px;border-radius:3px;flex:none}
.gt-chip.o{background:color-mix(in srgb,var(--cv-cham-9656f6) 18%,transparent);color:var(--cv-cham-9b5df7-chu)}
.gt-chip.kr{background:color-mix(in srgb,var(--cv-lam-07949d) 18%,transparent);color:var(--cv-lam-06b8c4)}
.gt-chip.v{background:rgba(148,163,184,.18);color:var(--text-muted)}
.gt-r2,.gt-d{font-size:10px !important;color:var(--text-muted);font-family:var(--font-mono)}
.gt-p{font-size:10.5px !important;font-family:var(--font-mono);font-weight:700;text-align:right}
.gt-r{position:relative;flex:none;height:100%;box-sizing:border-box}
.gt-thead .gt-mo,.gt-thead .gt-dy{position:absolute;box-sizing:border-box;padding:3px 5px;font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden}
.gt-thead .gt-mo{top:0;height:24px;font-weight:800;border-left:1px solid rgba(148,163,184,.35)}
.gt-thead .gt-dy{top:24px;height:24px;border-left:1px solid rgba(148,163,184,.18);font-family:var(--font-mono);line-height:1.1;padding-top:2px;text-align:center}   /* ngày + thứ căn giữa cột (BoD 14/10, áp cả hệ qua máy quét tiêu đề <th>) */
.gt-thead .gt-dy small{display:block;font-size:8.5px;font-family:inherit;font-weight:600}
.gt-thead .gt-dy.we{color:var(--cv-tim-chu)}
.gt-thead .gt-dy.td{color:var(--cv-do-ef4444);font-weight:800}
.gt-today-line{position:absolute;top:0;border-left:2px solid var(--cv-do-ef4444);z-index:3;pointer-events:none}
.gt-today-line::after{content:"Hôm nay";position:absolute;top:26px;left:3px;font-size:8.5px;font-weight:800;color:var(--cv-do-ef4444);background:var(--bg-card-solid, var(--bg-secondary));padding:0 3px;border-radius:3px;white-space:nowrap}
.gt-b{position:absolute;height:16px;top:9px;border-radius:4px;overflow:visible;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);touch-action:none;user-select:none}
.gt-b .gt-f{position:absolute;left:0;top:0;bottom:0;border-radius:4px 0 0 4px;background:var(--c)}
.gt-b .gt-t{position:absolute;left:6px;top:0;line-height:16px;font-size:9.5px;font-weight:700;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none}
.gt-bt{background:color-mix(in srgb,var(--c) 24%,transparent)}
.gt-bkr{height:12px;top:11px;background:color-mix(in srgb,var(--cv-lam-07949d) 22%,transparent)}
.gt-bkr .gt-f{background:var(--cv-lam-07949d)}
.gt-bo{height:8px;top:13px;border-radius:2px;background:color-mix(in srgb,var(--cv-cham-9656f6) 28%,transparent)}
.gt-bo .gt-f{background:var(--cv-cham-9656f6);opacity:.85}
.gt-bo::before,.gt-bo::after{content:"";position:absolute;top:0;width:4px;height:100%;background:var(--cv-cham-9b5df7-chu)}
.gt-bo::after{right:0}
.gt-keo{cursor:grab}.gt-keo.gt-dang{cursor:grabbing;opacity:.85;z-index:3}
.gt-h{position:absolute;top:-3px;bottom:-3px;width:8px;cursor:ew-resize;z-index:2}
.gt-hl{left:-3px}.gt-hr{right:-3px}
.gt-b:hover .gt-h{background:rgba(255,255,255,.18)}
.gt-cn{position:absolute;right:-9px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--cv-cham-9b5df7-chu);border:2px solid var(--bg-card-solid, #fff);cursor:crosshair;opacity:0;z-index:3}
.gt-b:hover .gt-cn{opacity:1}
.gt-ms{position:absolute;top:10px;width:14px;height:14px;transform:rotate(45deg);background:var(--cv-cam-f69d2f);border:1px solid var(--bg-card-solid, #fff);z-index:2}
.gt-pct{position:absolute;top:9px;line-height:16px;font-size:9.5px;font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;pointer-events:none}
.gt-svg{position:absolute;top:0;pointer-events:none;z-index:2;overflow:visible}
.gt-arr{fill:none;stroke-width:1.5;pointer-events:stroke;cursor:pointer}
.gt-arr:hover{stroke-width:3}
.gt-link{position:absolute;height:0;border-top:2px dashed var(--cv-cham-9b5df7-chu);transform-origin:0 0;z-index:7;pointer-events:none}
.gt-note{font-size:10.5px;color:var(--text-muted);margin-top:8px}

/* ═══ TAY NẮM ĐỔI CỠ KHUNG (14/10 — máy __hvhBoxResizeInit gắn cho 100% hộp thoại) ═══ */
.hvh-rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:30;touch-action:none;background:linear-gradient(135deg,transparent 50%,rgba(148,163,184,.55) 50%,rgba(148,163,184,.55) 62%,transparent 62%,transparent 74%,rgba(148,163,184,.55) 74%,rgba(148,163,184,.55) 86%,transparent 86%);border-bottom-right-radius:inherit;opacity:.75}
.hvh-rz:hover{opacity:1;background:linear-gradient(135deg,transparent 50%,var(--cv-lam-07949d) 50%,var(--cv-lam-07949d) 62%,transparent 62%,transparent 74%,var(--cv-lam-07949d) 74%,var(--cv-lam-07949d) 86%,transparent 86%)}