:root {
    --primary-accent-rgb: 109, 40, 217;
    --background-color: #0f172a;
    --sidebar-bg: #181f36;
    --card-bg: #181f36;
    --header-bg: rgba(24, 31, 54, 0.6);
    --modal-bg: rgba(24, 31, 54, 0.8);
    --text-primary: #e0e7ef;
    --text-secondary: #b5b8d3;
    --border-color: #334155;
    --primary-accent: #6d28d9;
    --primary-accent-hover: #a78bfa;
    --danger-accent: #ef4444;
    --danger-accent-hover: #dc2626;
    --success-accent: #22c55e;
    --warning-accent: #f59e0b;
    --chat-bubble-me: #4f46e5;
    --chat-bubble-other: #334155;
}

body[data-theme="light"] {
    --background-color: #f1f5f9;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --header-bg: rgba(255, 255, 255, 0.6);
    --modal-bg: rgba(255, 255, 255, 0.8);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border-color: #e2e8f0;
    --chat-bubble-me: #6366f1;
    --chat-bubble-other: #e2e8f0;
}

/* === THÊM MỚI: CHỦ ĐỀ HOLOGRAM === */
body[data-theme="hologram"] {
    --background-color: #0a0a1a;
    --sidebar-bg: rgba(16, 20, 42, 0.75);
    --card-bg: rgba(20, 25, 50, 0.7);
    --header-bg: rgba(10, 10, 26, 0.6);
    --modal-bg: rgba(10, 10, 26, 0.8);
    --text-primary: #00eaff;
    --text-secondary: #a0a0c0;
    --border-color: rgba(0, 234, 255, 0.3);
    --primary-accent: #00eaff;
    --primary-accent-hover: #ff00de;
    --chat-bubble-me: #0084ff;
    --chat-bubble-other: rgba(0, 234, 255, 0.1);
}
/* === KẾT THÚC KHỐI THÊM MỚI === */


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 15px;
    line-height: 1.6;
}

/* === Minimalist & Modern Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* Thêm cho thanh cuộn ngang */
}

::-webkit-scrollbar-track {
  background: transparent; /* Ẩn thanh track đi */
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color); /* Màu xám mờ mặc định */
  border-radius: 10px;
  border: 2px solid var(--background-color); /* Tạo khoảng cách với nội dung */
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-accent); /* Hiện màu chính khi hover */
}

/* Hỗ trợ cho Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--background-color);
}

html {
    overflow-y: scroll;
}

.bg-sidebar {
    background-color: var(--sidebar-bg);
    backdrop-filter: blur(10px);
}

.bg-main {
    background-color: var(--background-color);
}

.bg-card {
    background-color: var(--card-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.bg-header {
    background-color: var(--header-bg);
    backdrop-filter: blur(8px);
}

.bg-modal {
    background-color: var(--modal-bg);
    backdrop-filter: blur(8px);
}

.border-thematic {
    border-color: var(--border-color);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.nav-item.active {
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px -5px rgba(167, 139, 250, 0.6);
}
/* === THÊM MỚI: Style riêng cho theme Hologram === */
body[data-theme="hologram"] .nav-item.active {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
    box-shadow: 0 4px 20px -5px var(--primary-accent);
}
/* === KẾT THÚC KHỐI THÊM MỚI === */


.nav-item.active svg {
    color: #ffffff;
}

.content-page.active {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gradient-btn {
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    color: #fff !important;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -5px rgba(167, 139, 250, 0.6);
}
/* === THÊM MỚI: Style riêng cho theme Hologram === */
body[data-theme="hologram"] .gradient-btn {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
    box-shadow: 0 4px 20px -5px var(--primary-accent);
}
/* === KẾT THÚC KHỐI THÊM MỚI === */


.gradient-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px rgba(167, 139, 250, 0.8);
}

/* --- UI NÂNG CẤP CHO KANBAN BOARD --- */
.kanban-task {
    cursor: grab;
}

.kanban-task:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.4;
    background: #2e395b;
}

.sortable-chosen {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#sidebar {
    transition: width 0.3s ease-in-out;
    will-change: width;
}

#portal-app.sidebar-collapsed #sidebar {
    width: 80px;
}

#portal-app.sidebar-collapsed #sidebar .sidebar-logo-text,
#portal-app.sidebar-collapsed #sidebar .nav-item span,
#portal-app.sidebar-collapsed #sidebar #user-name,
#portal-app.sidebar-collapsed #sidebar #user-role {
    display: none;
}

#portal-app.sidebar-collapsed #sidebar .nav-item {
    justify-content: center;
}

#portal-app.sidebar-collapsed #sidebar #user-menu-button>div {
    display: none;
}

.filter-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background-color: var(--primary-accent);
    color: #fff;
    border-color: var(--primary-accent);
}

.filter-btn.active {
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    color: #fff;
    border-color: transparent;
}
/* === THÊM MỚI: Style riêng cho theme Hologram === */
body[data-theme="hologram"] .filter-btn.active {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
}
/* === KẾT THÚC KHỐI THÊM MỚI === */

/* ===== CSS CHO SPLASH SCREEN NÂNG CẤP ===== */
#loading-screen {
    transition: opacity 0.5s 0.5s ease-out, visibility 0.5s 0.5s ease-out;
}
#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}
.logo-container {
    animation: logo-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 25px var(--primary-accent-hover));
}
.progress-bar-inner {
    animation: progress-load 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes progress-load {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes logo-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/* ===== KẾT THÚC CSS CHO SPLASH SCREEN ===== */
/* Thêm đoạn code này vào cuối file style.css của bạn */

/* ===== HIỆU ỨNG POP-IN CHO MODAL ===== */
@keyframes pop-in {
    from {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.welcome-modal-active {
    animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* Dán vào cuối file style.css */

.form-input {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem; /* 8px */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px var(--primary-accent-hover);
}
/* --- NÂNG CẤP HIỆU ỨNG TRƯỢT CHO SIDEBAR --- */

/* Làm cho các thành phần bên trong sidebar mờ đi/hiện ra mượt mà */
#sidebar nav,
#sidebar .sidebar-logo-text,
#sidebar #user-menu-button div {
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

/* Giữ lại logo và avatar người dùng khi thu gọn */
#portal-app.sidebar-collapsed #sidebar .h-16 a {
    justify-content: center;
}
/* --- NÂNG CẤP GIAO DIỆN SIDEBAR --- */

/* 1. Thiết lập chung cho tooltip và nav-text */
.sidebar-collapsed .nav-item {
    position: relative;
}
.nav-text {
    /* Hiệu ứng mờ dần khi ẩn/hiện */
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
}

/* 2. Quy tắc tạo và hiển thị tooltip */
.sidebar-collapsed .nav-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 70px; /* Vị trí bên phải của icon */
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--primary-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 999;

    /* Hiệu ứng xuất hiện */
    opacity: 1;
    animation: fadeIn 0.2s ease-in-out;
}

/* 3. Thay thế quy tắc ẩn cũ bằng quy tắc mới */
/* Thay vì display: none, ta dùng opacity để có transition */
#portal-app.sidebar-collapsed #sidebar .nav-text {
    opacity: 0;
    pointer-events: none; /* Không cho click vào chữ khi đã ẩn */
}

/* 4. Đảm bảo icon luôn có màu trắng khi mục được chọn */
.nav-item.active svg {
    color: #ffffff;
}

/* 5. Điều chỉnh lại khoảng cách và căn lề khi thu gọn */
#portal-app.sidebar-collapsed #sidebar .nav-item {
    justify-content: center;
    padding-left: 0.5rem; /* 8px */
    padding-right: 0.5rem; /* 8px */
}

#portal-app.sidebar-collapsed #sidebar {
    width: 88px; /* Tăng nhẹ chiều rộng để có không gian */
}

/* === BẮT ĐẦU: CSS CHO CÔNG TẮC THEME ENERGY CORE === */
#theme-switch-container.energy-core-switch {
    --track-width: 95px;
    --track-height: 40px;
    --core-size: 32px;
    --track-bg: rgba(10, 10, 26, 0.7);
    --track-border: rgba(255, 255, 255, 0.2);

    position: relative; /* Đổi thành relative để nằm trong dropdown */
    width: var(--track-width);
    height: var(--track-height);
    cursor: pointer;
    z-index: 1001;
    margin: 8px auto; /* Tự động căn giữa trong dropdown */
}

.switch-track {
    width: 100%;
    height: 100%;
    background-color: var(--track-bg);
    border: 1px solid var(--track-border);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.theme-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.65);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 0px transparent);
}

.energy-core {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--core-size);
    height: var(--core-size);
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.energy-core::before, .energy-core::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Lớp Light (vàng cam) */
.energy-core::before {
    background-color: #f39c12;
    box-shadow: 0 0 10px #f39c12, 0 0 15px #f39c12;
}
/* Lớp Hologram (gradient) */
.energy-core::after {
    background: linear-gradient(45deg, #00eaff, #ff00de);
    box-shadow: 0 0 10px #00eaff, 0 0 15px #ff00de;
    animation: hologram-core-pulse-subtle 2s infinite ease-in-out;
}
@keyframes hologram-core-pulse-subtle {
    50% { transform: scale(0.98); }
}

/* --- Trạng thái 1: DARK (Mặc định) --- */
.energy-core-switch[data-theme-state="dark"] .energy-core {
    left: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #fff, 0 0 15px #fff;
}
.energy-core-switch[data-theme-state="dark"] .icon-dark {
    stroke: #fff;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px #fff);
}

/* --- Trạng thái 2: LIGHT --- */
.energy-core-switch[data-theme-state="light"] .energy-core {
    left: calc(50% - var(--core-size) / 2);
    background-color: transparent;
    box-shadow: none;
}
.energy-core-switch[data-theme-state="light"] .energy-core::before {
    opacity: 1;
}
.energy-core-switch[data-theme-state="light"] .icon-light {
    stroke: #f39c12;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px #f39c12);
}

/* --- Trạng thái 3: HOLOGRAM --- */
.energy-core-switch[data-theme-state="hologram"] .energy-core {
    left: calc(100% - var(--core-size) - 4px);
    background-color: transparent;
    box-shadow: none;
}
.energy-core-switch[data-theme-state="hologram"] .energy-core::after {
    opacity: 1;
}
.energy-core-switch[data-theme-state="hologram"] .icon-hologram {
    stroke: #00eaff;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px #00eaff);
}
/* === KẾT THÚC: CSS CHO CÔNG TẮC THEME ENERGY CORE === */
/* === BẮT ĐẦU: CSS CHO GIAO DIỆN TAB TRONG MODAL === */
.tab-btn {
    padding: 8px 16px;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--primary-accent);
    border-color: var(--primary-accent);
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}
/* === KẾT THÚC: CSS CHO GIAO DIỆN TAB TRONG MODAL === */
/* Dán vào cuối file style.css */
.achievement-badge {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.achievement-badge:hover {
    transform: scale(1.1);
}

.achievement-badge .tooltip {
    visibility: hidden;
    width: 200px;
    background-color: var(--card-bg);
    color: var(--text-primary);
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Vị trí phía trên huy hiệu */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.achievement-badge:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.achievement-badge .tooltip-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-accent-hover);
}

.achievement-badge .tooltip-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
@keyframes breathing-glow {
  0%, 100% {
    box-shadow: 0 0 10px 0px rgba(var(--primary-accent-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(var(--primary-accent-rgb), 0.7);
  }
}

/* 2. Áp dụng hiệu ứng mới */
.user-is-registered {
    border-color: var(--primary-accent-hover) !important;
    /* Áp dụng animation đã định nghĩa */
    animation: breathing-glow 2.5s infinite ease-in-out;
}
/* Dán vào cuối file style.css */

/* Tối ưu hiển thị Kanban trên mobile */
@media (max-width: 768px) {
  #kanban-board {
    flex-direction: column;
    align-items: stretch;
  }
  #kanban-board .flex-1 {
    min-width: 100%;
  }
}

/* Style cho TomSelect để hợp với theme */
.ts-control {
  background-color: var(--background-color) !important;
  border-color: var(--border-color) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
}
.ts-control .item {
    /* Sử dụng màu nền mờ từ biến màu RGB có sẵn */
    background-color: rgba(var(--primary-accent-rgb), 0.3) !important; 
    
    /* Đổi màu chữ thành màu sáng hơn để dễ đọc */
    color: var(--primary-accent-hover) !important; 
    
    /* Thêm một đường viền tinh tế */
    border: 1px solid rgba(var(--primary-accent-rgb), 0.5); 
    
    border-radius: 6px; /* Bo tròn hơn một chút */
    padding: 3px 8px;   /* Tăng nhẹ padding cho cân đối */
    font-weight: 500;   /* Làm chữ đậm hơn một chút */
}
.ts-dropdown {
   background-color: var(--card-bg) !important;
   border-color: var(--border-color) !important;
}
.ts-dropdown .option {
    color: var(--text-primary) !important;
}
.ts-dropdown .active {
    background-color: var(--primary-accent) !important;
}
/* === SỬA LỖI HIỂN THỊ CỬA SỔ XÁC NHẬN === */
#confirm-modal {
    z-index: 60;
}
/* === SỬA MÀU ICON MŨI TÊN TRONG Ô CHỌN (TOM SELECT) === */
.ts-control {
    /* Định nghĩa lại icon mũi tên bằng SVG, sử dụng màu --text-secondary của theme */
    background-image: linear-gradient(to top, rgba(0,0,0,0) 90%, var(--background-color) 90%),
                      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23b5b8d3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem !important; /* Thêm khoảng trống cho icon */
}

/* Ẩn icon mũi tên khi dropdown đang mở */
.ts-control.dropdown-active {
    background-image: none;
}
/* === GIAO DIỆN TỐI CHO FLATPCIKR DATE PICKER === */
.flatpickr-calendar {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3) !important;
    width: 320px !important;
}

/* Màu chữ cho ngày và tháng */
.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-month,
.flatpickr-calendar .numInput {
    color: var(--text-secondary) !important;
}

/* Nút điều hướng tháng */
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    fill: var(--text-secondary) !important;
}
.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--primary-accent) !important;
}

/* Ngày được chọn */
.flatpickr-calendar .flatpickr-day.selected {
    background-color: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    color: #fff !important;
}

/* Ngày hôm nay */
.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--primary-accent-hover) !important;
    color: var(--primary-accent-hover) !important;
}

/* Ngày khi hover */
.flatpickr-calendar .flatpickr-day:hover {
    background-color: var(--border-color) !important;
}

/* Header (Tên tháng và năm) */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
/* Thêm vào cuối tệp webnoibo/style.css */

#pet-bandits-launcher img {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

#pet-bandits-launcher .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* Dán vào cuối file style.css */

/* Lớp phủ mờ cho nội dung chính khi sidebar mobile mở */
#sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 29; /* Dưới sidebar (z-30) */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#portal-app.sidebar-mobile-open #sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Tùy chỉnh responsive cho Sidebar */
@media (max-width: 767px) { /* Áp dụng cho màn hình nhỏ hơn md (768px) */
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%); /* Ẩn sidebar ra khỏi màn hình */
        transition: transform 0.3s ease-in-out;
    }

    #portal-app.sidebar-mobile-open #sidebar {
        transform: translateX(0); /* Hiện sidebar khi cần */
    }

    /* Khi sidebar mở, ẩn thanh cuộn của body */
    body.sidebar-open-no-scroll {
        overflow: hidden;
    }
}
/* Dán vào cuối file style.css */

/* === KANBAN UPGRADE: DUE DATE HIGHLIGHT === */
.task-due-soon .kanban-task {
    border-left: 4px solid #f59e0b; /* Màu vàng */
}
.task-overdue .kanban-task {
    border-left: 4px solid #ef4444; /* Màu đỏ */
}
.task-due-date {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}
.due-soon {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}
.overdue {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* === KANBAN UPGRADE: CHECKLIST === */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.checklist-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.checklist-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.checklist-item label {
    flex-grow: 1;
    cursor: pointer;
    transition: color 0.2s, text-decoration 0.2s;
}
.checklist-item input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    color: var(--text-secondary);
}
.checklist-progress-bar {
    background-color: var(--border-color);
    border-radius: 4px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}
.checklist-progress-bar-inner {
    background-color: var(--success-accent);
    height: 100%;
    transition: width 0.3s ease;
}

/* === KANBAN UPGRADE: ADD TASK BUTTON === */
.add-task-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    border: 1px dashed var(--border-color);
}
.add-task-btn:hover {
    background-color: var(--primary-accent);
    color: white;
    border-style: solid;
}
/* Dán vào cuối file style.css */

/* === BẮT ĐẦU: GIAO DIỆN BÌNH CHỌN SỰ KIỆN === */
.poll-option {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.poll-option.voted-by-user {
    border-color: var(--primary-accent);
    box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.3);
}

.poll-progress-bar {
    height: 10px;
    background-color: var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 8px;
}

.poll-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    border-radius: 5px;
    transition: width 0.5s ease;
}

body[data-theme="hologram"] .poll-progress-bar-inner {
     background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
}

.poll-votes-avatars img {
    border: 2px solid var(--card-bg);
}
/* === KẾT THÚC: GIAO DIỆN BÌNH CHỌN SỰ KIỆN === */
.unvote-btn {
    background-color: transparent !important;
    background-image: none !important; /* Ghi đè gradient */
    border: 1px solid var(--danger-accent);
    color: var(--danger-accent) !important;
    transition: background-color 0.2s;
}
.unvote-btn:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    filter: none; /* Bỏ hiệu ứng brightness */
}

.voter-list-details summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    outline: none;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
}
.voter-list-details summary:hover {
    color: var(--primary-accent-hover);
    background-color: rgba(var(--primary-accent-rgb), 0.1);
}

.voter-list {
    margin-top: 8px;
    padding-left: 16px;
    font-size: 0.85rem;
    color: var(--text-primary);
    max-height: 150px;
    overflow-y: auto;
}
/* === BẮT ĐẦU: NÂNG CẤP GIAO DIỆN THỐNG KÊ === */

/* 1. Giao diện bộ lọc dạng Segmented Control */
.segmented-control {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.segmented-control .filter-btn {
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.segmented-control .filter-btn:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.1);
    color: var(--text-primary);
}

.segmented-control .filter-btn.active {
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px -4px rgba(var(--primary-accent-rgb), 0.5);
}

/* Style riêng cho theme Hologram */
body[data-theme="hologram"] .segmented-control .filter-btn.active {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
    box-shadow: 0 4px 15px -5px var(--primary-accent);
}

/* 2. Tinh chỉnh thanh cuộn bên trong Modal */
/* Trình duyệt Webkit (Chrome, Safari, Edge) */
.modal-scroll-content::-webkit-scrollbar {
    width: 8px;
}
.modal-scroll-content::-webkit-scrollbar-track {
    background: transparent;
}
.modal-scroll-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    /* Dùng màu nền của card để tạo hiệu ứng lề, phù hợp với modal hơn */
    border: 2px solid var(--card-bg); 
}
.modal-scroll-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-accent);
}
/* Trình duyệt Firefox */
.modal-scroll-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--card-bg);
}
/* === KẾT THÚC: NÂNG CẤP GIAO DIỆN THỐNG KÊ === */
/* === BẮT ĐẦU: NÂNG CẤP HIỆU ỨNG CHÀO MỪNG === */

/* Animation mới cho modal, hoành tráng hơn */
@keyframes welcome-dramatic-entry {
    0% {
        transform: scale(0.5) rotate(-15deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.05) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Ghi đè animation cũ */
.welcome-modal-active {
    animation: welcome-dramatic-entry 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Thêm hiệu ứng nền tỏa sáng cho modal */
#welcome-modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
    animation: welcome-glow-pulse 4s infinite ease-in-out;
    z-index: 0;
}

@keyframes welcome-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0.7; }
}

/* Style và animation cho icon chiếc cúp */
#welcome-trophy-svg {
    filter: drop-shadow(0 0 15px #FFD700);
    animation: trophy-float 3s infinite ease-in-out;
}
#welcome-trophy-svg path {
    fill: #FFD700;
}

@keyframes trophy-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Animation cho chữ xuất hiện */
#welcome-title {
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.5s both;
}

@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
/* === KẾT THÚC: NÂNG CẤP HIỆU ỨNG CHÀO MỪNG === */
/* === KANBAN UPGRADE: DUE DATE HIGHLIGHT === */
.kanban-task.task-due-soon {
    border-left: 4px solid var(--warning-accent);
}
.kanban-task.task-overdue {
    border-left: 4px solid var(--danger-accent);
}
.task-due-date {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}
.due-soon {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--warning-accent);
}
.overdue {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--danger-accent);
}

/* === KANBAN UPGRADE: ADD TASK BUTTON === */
.add-task-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    border: 1px dashed var(--border-color);
}
.add-task-btn:hover {
    background-color: var(--primary-accent);
    color: white;
    border-style: solid;
}
/* Dán vào cuối file style.css */

/* === BẮT ĐẦU: NÂNG CẤP GIAO DIỆN BẢNG THỐNG KÊ === */

/* 1. Container bao bọc bảng */
.stats-table-container {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden; /* Quan trọng để bo góc hoạt động */
    background-color: var(--card-bg);
}

.stats-table-container table {
    /* Bỏ các đường viền mặc định của table và Tailwind */
    border-collapse: collapse;
    width: 100%;
}

/* 2. Header của bảng (thead) */
.stats-table-container thead th {
    background-color: var(--background-color);
    padding: 1rem 1.25rem; /* 16px 20px */
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: left;
}

/* Căn lề lại cho các header cần căn giữa/phải */
.stats-table-container thead th:nth-child(3), /* Số ca */
.stats-table-container thead th:nth-child(5) { /* Trạng thái */
    text-align: center;
}

/* 3. Các dòng của thân bảng (tbody) */
.stats-table-container tbody tr {
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--border-color);
}

/* Bỏ đường kẻ của dòng cuối cùng */
.stats-table-container tbody tr:last-child {
    border-bottom: none;
}

/* Hiệu ứng Zebra-striping */
.stats-table-container tbody tr:nth-child(even) {
    background-color: var(--background-color);
}

/* Hiệu ứng Hover */
.stats-table-container tbody tr:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.1);
}

/* 4. Các ô dữ liệu (td) */
.stats-table-container tbody td {
    padding: 0.875rem 1.25rem; /* 14px 20px */
    vertical-align: middle; /* Căn giữa avatar, tên, và các nội dung khác */
}

/* 5. Căn lề lại cho các ô trong thân bảng */
.stats-table-container tbody td:nth-child(3), /* Số ca */
.stats-table-container tbody td:nth-child(5) { /* Trạng thái */
    text-align: center;
}
.stats-table-container tbody td:nth-child(1) { /* Cột STT */
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Thêm hiệu ứng cho avatar */
.stats-table-container tbody img {
    box-shadow: 0 0 0 2px var(--card-bg);
}

/* === KẾT THÚC: NÂNG CẤP GIAO DIỆN BẢNG THỐNG KÊ === */
/* Dán vào cuối file style.css */

/* === NÂNG CẤP HIỆU ỨNG SINH NHẬT HÔM NAY === */

@keyframes breathing-glow-birthday {
  0%, 100% {
    box-shadow: 0 0 10px 0px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(245, 158, 11, 0.5);
  }
}

.birthday-item.is-today {
    /* Thêm animation mới */
    animation: breathing-glow-birthday 2.5s infinite ease-in-out;
}

/* Điều chỉnh lại style của ngày tháng để hiển thị đẹp hơn */
.birthday-item .info .date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px; /* Khoảng cách giữa bánh kem và chữ */
}
/* Dán vào cuối file style.css */

/* === BẮT ĐẦU: NÂNG CẤP GIAO DIỆN THẺ THỐNG KÊ === */

.stat-card {
    position: relative;
    overflow: hidden; /* Quan trọng để hiệu ứng glow không tràn ra ngoài */
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
    padding: 1.5rem; /* 24px */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* 12px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Hiệu ứng Aurora Glow */
.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    z-index: 0;
    filter: blur(80px); /* Tạo độ mờ ảo */
}

.stat-card:hover::before {
    transform: scale(1);
    opacity: 1;
}

/* Định nghĩa màu cho từng loại thẻ */
.stat-card-purple::before {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 40%);
}
.stat-card-blue::before {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 40%);
}
.stat-card-sky::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 40%);
}
.stat-card-green::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.3) 0%, transparent 40%);
}

/* Container cho Icon */
.stat-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 3.5rem; /* 56px */
    height: 3.5rem; /* 56px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(var(--primary-accent-rgb), 0.1);
    color: var(--primary-accent-hover);
}

/* Nội dung (Số & Chữ) */
.stat-content {
    position: relative;
    z-index: 1;
}

.stat-number {
    font-size: 2.25rem; /* 36px */
    font-weight: 800; /* Extra-bold */
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    margin-top: 0.25rem; /* 4px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}
/* === KẾT THÚC: NÂNG CẤP GIAO DIỆN THẺ THỐNG KÊ === */
/* === FIX: HIỂN THỊ TÊN DÀI TRONG LỊCH TRỰC === */
.duty-member-item {
    /* Đảm bảo container có chiều cao tối thiểu để không bị xô lệch */
    min-height: 36px; 
}

.duty-member-item span {
    /* Cho phép văn bản tự động xuống dòng */
    white-space: normal;
    /* Ngắt từ nếu một từ quá dài */
    word-break: break-word;
    /* Cải thiện khoảng cách giữa các dòng chữ */
    line-height: 1.3;
}
/* Animation cho nút loading khi xuất ảnh */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
/* === NÂNG CẤP: GIAO DIỆN THẺ THỐNG KÊ TRONG MODAL === */
.stat-card-mini {
    position: relative;
    overflow: hidden; /* Quan trọng để hiệu ứng glow không tràn ra ngoài */
    padding: 1rem; /* 16px */
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* 12px */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.stat-card-mini .number {
    font-size: 2rem; /* 32px */
    font-weight: 800; /* Extra-bold */
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card-mini .label {
    margin-top: 0.25rem; /* 4px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}

/* Hiệu ứng Aurora Glow */
.stat-card-mini::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 0;
    filter: blur(60px);
}

.stat-card-mini:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Định nghĩa màu cho từng loại thẻ */
.stat-card-mini.purple::before {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, transparent 40%);
}
.stat-card-mini.blue::before {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, transparent 40%);
}
.stat-card-mini.sky::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, transparent 40%);
}
.stat-card-mini.green::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.25) 0%, transparent 40%);
}

/* Làm cho số liệu của thẻ Đạt có màu xanh lá */
.stat-card-mini.green .number {
    color: var(--success-accent);
}
/* === KANBAN UPGRADE: CHECKLIST === */
#task-detail-checklist {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.checklist-progress-bar {
    background-color: var(--border-color);
    border-radius: 4px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}

.checklist-progress-bar-inner {
    background-color: var(--success-accent);
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.checklist-item:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.1);
}

.checklist-item-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary-accent);
}

.checklist-item label {
    flex-grow: 1;
    cursor: pointer;
    transition: color 0.2s, text-decoration 0.2s;
    color: var(--text-primary);
}

.checklist-item input:checked + label {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.delete-checklist-item-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.checklist-item:hover .delete-checklist-item-btn {
    opacity: 1;
}

.delete-checklist-item-btn:hover {
    color: var(--danger-accent);
}
/* === KANBAN CHECKLIST UPGRADE V2 === */

/* Style cho inline editing */
.checklist-item-content {
    cursor: text;
}
.checklist-item-edit-input {
    background-color: var(--background-color);
    border: 1px solid var(--primary-accent);
    border-radius: 4px;
    padding: 2px 6px;
    width: 100%;
    color: var(--text-primary);
    font-size: 1em; /* Giữ kích thước chữ như label */
}
.checklist-item-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-accent-hover);
}

/* Hiệu ứng thêm mục mới */
@keyframes newItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.new-item-added {
  animation: newItemFadeIn 0.4s ease-out forwards;
}

/* Style cho kéo thả (SortableJS) */
.checklist-item.sortable-ghost {
    opacity: 0.4;
    background: rgba(var(--primary-accent-rgb), 0.2);
}
.checklist-item.sortable-chosen {
    background: rgba(var(--primary-accent-rgb), 0.1);
}
/* Dán vào cuối file style.css */

/* === BẮT ĐẦU: NÂNG CẤP GIAO DIỆN THẺ THỐNG KÊ === */

.stat-card {
    position: relative;
    overflow: hidden; /* Quan trọng để hiệu ứng glow không tràn ra ngoài */
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
    padding: 1.5rem; /* 24px */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* 12px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Hiệu ứng Aurora Glow */
.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    z-index: 0;
    filter: blur(80px); /* Tạo độ mờ ảo */
}

.stat-card:hover::before {
    transform: scale(1);
    opacity: 1;
}

/* Định nghĩa màu cho từng loại thẻ */
.stat-card-purple::before {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 40%);
}
.stat-card-blue::before {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 40%);
}
.stat-card-sky::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 40%);
}
.stat-card-green::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.3) 0%, transparent 40%);
}

/* Container cho Icon */
.stat-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 3.5rem; /* 56px */
    height: 3.5rem; /* 56px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(var(--primary-accent-rgb), 0.1);
    color: var(--primary-accent-hover);
}

/* Nội dung (Số & Chữ) */
.stat-content {
    position: relative;
    z-index: 1;
}

.stat-number {
    font-size: 2.25rem; /* 36px */
    font-weight: 800; /* Extra-bold */
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    margin-top: 0.25rem; /* 4px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}
/* === KẾT THÚC: NÂNG CẤP GIAO DIỆN THẺ THỐNG KÊ === */
/* === BẮT ĐẦU: GIAO DIỆN HOÀN CHỈNH CHO TOUR HƯỚNG DẪN (FINAL) === */

@keyframes shepherd-pop-in-final {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* 1. Lớp phủ mờ */
.shepherd-modal-overlay {
    z-index: 48 !important;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
}

/* 2. Pop-up chính */
.shepherd-element {
    position: relative;
    background: var(--modal-bg);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-width: 420px;
    animation: shepherd-pop-in-final 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border: none;
    z-index: 49 !important;
}

/* 3. Viền Gradient (Nằm dưới nội dung) */
.shepherd-element::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-hover)) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1; 
}

/* 4. Nội dung (Nằm trên viền) */
.shepherd-header, .shepherd-text, .shepherd-footer {
    position: relative;
    z-index: 1;
}

/* 5. Căn giữa cho bước không có mục tiêu */
.shepherd-element.shepherd-centered {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* 6. Header */
.shepherd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
    border-bottom: 1px solid rgba(var(--primary-accent-rgb), 0.2);
}
.shepherd-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
}
.shepherd-cancel-icon:hover {
    color: #fff; background-color: rgba(255, 255, 255, 0.1);
}

/* 7. Nội dung & Footer */
.shepherd-text {
    padding: 0.5rem 1.75rem 1.75rem;
    color: var(--text-secondary);
    font-size: 1rem;
}
.shepherd-footer {
    padding: 0 1.75rem 1.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* Các nút bấm (giữ nguyên style cũ) */
.shepherd-button {
    border-radius: 0.6rem; padding: 0.6rem 1.5rem;
    font-weight: 700; transition: all 0.3s ease;
}
.shepherd-button:hover { transform: translateY(-2px); }
.shepherd-button.shepherd-button-secondary {
    background-color: transparent; color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.shepherd-footer .shepherd-button:last-of-type:not(.shepherd-button-secondary) {
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    color: #fff !important;
    box-shadow: 0 4px 15px -5px rgba(167, 139, 250, 0.6);
}
body[data-theme="hologram"] .shepherd-footer .shepherd-button:last-of-type:not(.shepherd-button-secondary) {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
}

/* 8. MŨI TÊN CHỈ DẪN (BẢN SỬA LỖI CUỐI CÙNG) */
.shepherd-arrow {
    width: 16px;
    height: 16px;
    position: absolute;
    /* Đảm bảo mũi tên nằm trên lớp nền mờ */
    z-index: 1; 
}
.shepherd-arrow::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

/* Pop-up ở BÊN TRÊN, mũi tên chỉ xuống */
[data-popper-placement^='bottom'] > .shepherd-arrow {
    top: -8px;
    left: 0;
    transform: translateX(0) !important;
}
[data-popper-placement^='bottom'] > .shepherd-arrow::before {
    top: 0;
    border-width: 0 8px 8px 8px;
    border-bottom-color: var(--modal-bg);
}

/* Pop-up ở BÊN DƯỚI, mũi tên chỉ lên */
[data-popper-placement^='top'] > .shepherd-arrow {
    bottom: -8px;
    left: 0;
    transform: translateX(0) !important;
}
[data-popper-placement^='top'] > .shepherd-arrow::before {
    bottom: 0;
    border-width: 8px 8px 0 8px;
    border-top-color: var(--modal-bg);
}

/* Pop-up ở BÊN PHẢI, mũi tên chỉ sang trái */
[data-popper-placement^='left'] > .shepherd-arrow {
    right: -8px;
    top: 0;
    transform: translateY(0) !important;
}
[data-popper-placement^='left'] > .shepherd-arrow::before {
    right: 0;
    border-width: 8px 0 8px 8px;
    border-left-color: var(--modal-bg);
}

/* Pop-up ở BÊN TRÁI, mũi tên chỉ sang phải */
[data-popper-placement^='right'] > .shepherd-arrow {
    left: -8px;
    top: 0;
    transform: translateY(0) !important;
}
[data-popper-placement^='right'] > .shepherd-arrow::before {
    left: 0;
    border-width: 8px 8px 8px 0;
    border-right-color: var(--modal-bg);
}
@keyframes focus-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(var(--primary-accent-rgb), 0.5), 0 0 0 10px rgba(var(--primary-accent-rgb), 0);
    }
    50% {
        box-shadow: 0 0 0 2px var(--primary-accent-hover), 0 0 0 10px rgba(var(--primary-accent-rgb), 0.3);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(var(--primary-accent-rgb), 0.5), 0 0 0 10px rgba(var(--primary-accent-rgb), 0);
    }
}

/* Áp dụng hiệu ứng cho mục tiêu */
.tutorial-focus-ring {
    position: relative;
    z-index: 50; /* Đảm bảo nó luôn nằm trên lớp phủ (z-49) */
    /* Loại bỏ border mặc định của Shepherd */
    border: none !important; 
    
    /* Áp dụng hiệu ứng động */
    animation: focus-pulse 2s infinite ease-in-out;
    border-radius: 12px;
    transition: transform 0.3s ease;
}
/* === KẾT THÚC: GIAO DIỆN HOÀN CHỈNH CHO TOUR HƯỚNG DẪN === */

/* === DASHBOARD TẬP TRUNG (FOCUSED DASHBOARD) === */

.widget-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* 12px */
    padding: 1.25rem; /* 20px */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.widget-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    border-color: var(--primary-accent);
}

.widget-title {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* Micro-interaction cho danh sách công việc */
#my-tasks-list {
    transition: 0.3s ease;
}

#my-tasks-list .task-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Khi hover vào cả danh sách, làm mờ các item khác */
#my-tasks-list:hover .task-item {
    opacity: 0.6;
    transform: scale(0.98);
}

/* Khi hover vào một item cụ thể, làm nó nổi bật */
#my-tasks-list .task-item:hover {
    opacity: 1;
    transform: scale(1);
    background-color: rgba(var(--primary-accent-rgb), 0.1);
}

/* Hiệu ứng khi hoàn thành công việc */
.task-item.task-completed {
    transition: all 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045); /* easeInBack */
    opacity: 0 !important;
    transform: scale(0.8) !important;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -1px; /* Tránh giật layout */
    overflow: hidden;
    border: none;
}
/* webnoibo/style.css */

/* === BẮT ĐẦU: CSS CHO BẢNG XẾP HẠNG === */
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 4px 8px; /* Giảm padding dọc */
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.leaderboard-item .rank {
    font-size: 1.1rem;
    font-weight: bold;
    width: 35px;
    text-align: center;
    color: var(--text-secondary);
}

.leaderboard-item .rank-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background-color: var(--background-color);
    font-size: 0.8rem;
}

.leaderboard-item .avatar {
    width: 40px; /* Giảm kích thước avatar */
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 12px;
}

.leaderboard-item .name {
    flex-grow: 1;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-item .score {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-accent);
}

/* Tô sáng thành viên hiện tại */
.leaderboard-item.current-user {
    background-color: rgba(var(--primary-accent-rgb), 0.15);
    border: 1px solid var(--primary-accent);
}
.leaderboard-item.current-user .name {
    color: var(--primary-accent-hover);
}
/* === KẾT THÚC: CSS CHO BẢNG XẾP HẠNG === */
/* webnoibo/style.css */
/* Tìm và thay thế toàn bộ khối CSS này */
.birthday-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px; /* <-- Giảm padding cho gọn */
    border-radius: 10px;
    transition: background-color 0.3s ease;
    border: 1px solid transparent;
}

.birthday-item:hover {
    background-color: var(--border-color);
}

.birthday-item.is-today {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border-color: #f59e0b;
    animation: breathing-glow-birthday 2.5s infinite ease-in-out;
}

.birthday-item .avatar {
    width: 40px; /* <-- Giảm kích thước avatar */
    height: 40px; /* <-- Giảm kích thước avatar */
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.birthday-item.is-today .avatar {
    border-color: #f59e0b;
}

.birthday-item .name {
    font-weight: 600;
    color: var(--text-primary);
}

.birthday-item .date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap; /* <-- Đảm bảo ngày không bị xuống dòng */
    flex-shrink: 0; /* <-- Ngăn ngày bị co lại */
}

.birthday-item .date.is-today-text {
    font-weight: 700;
    color: #f59e0b;
    animation: pulse 2s infinite;
}
.agenda-item.event-item:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.1);
}
/* webnoibo/style.css */

/* === NÂNG CẤP: VISUAL PROGRESS INDICATORS === */
/* Style chung cho chấm chỉ báo, đảm bảo nó nằm giữa chiều cao */
.agenda-dot {
    /* Đã được định nghĩa kích thước w-3 h-3 trong HTML */
    display: block;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Các trạng thái màu sắc */
.agenda-dot.is-overdue {
    background-color: var(--danger-accent);
    box-shadow: 0 0 8px var(--danger-accent);
}

.agenda-dot.due-soon {
    background-color: var(--warning-accent);
    box-shadow: 0 0 8px var(--warning-accent);
}

.agenda-dot.on-track {
    background-color: var(--success-accent);
    box-shadow: 0 0 8px var(--success-accent);
}
/* webnoibo/style.css */

/* === NÂNG CẤP NGOẠI HÌNH: BẢNG XẾP HẠNG (GAMER VIBE) === */

/* Tinh chỉnh chung cho score */
.leaderboard-item .score {
    font-size: 1.25rem; /* Tăng kích thước điểm */
    font-weight: 800;
    color: var(--primary-accent-hover);
    text-shadow: 0 0 5px rgba(var(--primary-accent-rgb), 0.5); /* Thêm hiệu ứng phát sáng nhẹ */
}

/* 1. HIỆU ỨNG CHO TOP 3 */
.leaderboard-item.top-rank-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-left: 4px solid #FFD700;
    /* Thêm hiệu ứng chuyển động nhẹ */
    animation: pulse-rank-1 2s infinite ease-in-out; 
}
.leaderboard-item.top-rank-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
    border-left: 4px solid #C0C0C0;
}
.leaderboard-item.top-rank-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
    border-left: 4px solid #CD7F32;
}

/* Hiệu ứng chuyển động nhẹ cho rank 1 */
@keyframes pulse-rank-1 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.005); }
}

/* Style cho số hạng (rank-number) */
.leaderboard-item .rank-number {
    background-color: var(--border-color); /* Thay nền background-color bằng border-color */
    color: var(--text-primary);
    font-weight: 700;
    /* Hiển thị rõ ràng hơn */
}


/* === NÂNG CẤP NGOẠI HÌNH: SINH NHẬT SẮP TỚI (ELEGANT VIBE) === */

/* Cập nhật lại style chính của Birthday Item */
.birthday-item {
    padding: 8px 12px; /* Tăng padding để tạo không gian thoáng */
    align-items: center;
    border: 1px solid var(--border-color);
    background-color: var(--background-color); /* Nền mờ hơn nền card chính */
    transition: all 0.3s ease;
}

.birthday-item:hover {
    transform: translateX(4px); /* Hiệu ứng trượt nhẹ sang phải khi hover */
    background-color: rgba(var(--primary-accent-rgb), 0.05);
    border-color: var(--warning-accent); /* Highlight màu sinh nhật */
}

.birthday-item.is-today:hover {
    transform: translateX(4px) scale(1.01);
}

/* Đóng gói phần thông tin tên và ngày */
.birthday-item .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.birthday-item .info .name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Cải tiến hiển thị ngày tháng */
.birthday-item .info .date {
    font-size: 0.75rem; /* 12px */
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    
    /* Đảm bảo icon lịch luôn hiển thị */
    display: flex;
    align-items: center;
    gap: 4px;
}

.birthday-item .info .date svg {
    color: var(--text-secondary);
    width: 14px;
    height: 14px;
}
.birthday-item .info .date.is-today-text {
    color: var(--warning-accent);
    font-weight: 700;
}
/* webnoibo/style.css */

/* === NÂNG CẤP NGOẠI HÌNH: SINH NHẬT SẮP TỚI (SHINING GIFT BOX) === */

/* Cấu trúc chung: Thiết lập Birthday Item thành một thẻ độc lập */
.birthday-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px; /* Tăng padding để tạo không gian thoáng */
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    position: relative; /* Dùng cho hiệu ứng lấp lánh */
}

/* Hiệu ứng trượt và glow nhẹ khi hover */
.birthday-item:hover {
    transform: translateX(3px); 
    background-color: rgba(var(--primary-accent-rgb), 0.05);
    border-color: var(--warning-accent);
}

/* 1. Hiệu ứng Avatar Vòng sáng */
.birthday-item .avatar {
    width: 44px; /* Kích thước avatar */
    height: 44px; 
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* Tạo border dày hơn và đổ bóng màu vàng */
    border: 3px solid var(--warning-accent); 
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 15px 1px rgba(245, 158, 11, 0.2); 
    transition: all 0.3s ease;
}

/* Avatar thường dùng border-color */
.birthday-item:not(.is-today) .avatar {
     border-color: var(--border-color);
     box-shadow: none;
}


/* 2. Tạo Badge Ngày còn lại */
.birthday-item .date {
    /* Biến thành một pill/badge */
    background-color: var(--card-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    white-space: nowrap;
    flex-shrink: 0;
    
    /* Căn chỉnh icon bánh kem */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 3. HIỆU ỨNG ĐẶC BIỆT CHO SINH NHẬT HÔM NAY */
.birthday-item.is-today {
    /* Bỏ animation cũ và thay thế bằng hiệu ứng viền lấp lánh */
    animation: none !important; 
    border: 1px solid var(--warning-accent); 
    box-shadow: 0 0 20px 0px rgba(245, 158, 11, 0.4);
    overflow: hidden;
}

/* Lớp nền lấp lánh bằng CSS Gradient */
.birthday-item.is-today::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 8px
    );
    opacity: 0.5;
    animation: confetti-border-shine 5s infinite linear;
    z-index: 0;
}

@keyframes confetti-border-shine {
    /* Tạo hiệu ứng chuyển động của các hạt lấp lánh */
    from { background-position: 0 0; }
    to { background-position: 100px 100px; }
}

/* Đảm bảo nội dung và text nằm trên lớp lấp lánh */
.birthday-item.is-today .name,
.birthday-item.is-today .date,
.birthday-item.is-today .avatar {
    position: relative;
    z-index: 2;
}

.birthday-item .name {
    font-weight: 700;
    color: var(--text-primary);
    white-space: normal; /* Cho phép xuống dòng */
    word-break: break-word; /* Ngắt từ nếu cần */
    line-height: 1.2;
}

.birthday-item .date.is-today-text {
    font-weight: 800;
    color: #000; /* Đổi màu chữ sang đen/rất tối để nổi bật trên nền vàng */
    background-color: var(--warning-accent); 
    border-color: var(--warning-accent);
}
/* === PROFILE PAGE AESTHETICS & DETAIL === */

/* 1. Avatar và Hiệu ứng Hover */
#profile-content .avatar-wrapper {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto;
    display: block;
}

#profile-content .avatar-wrapper img {
    border-radius: 50%;
    transition: all 0.3s ease;
}
/* Hiệu ứng Tỏa sáng và Zoom nhẹ khi có thể đổi ảnh */
#profile-content .avatar-wrapper:hover img {
    transform: scale(1.05);
    border-color: var(--primary-accent-hover) !important;
    box-shadow: 0 0 15px rgba(var(--primary-accent-rgb), 0.5);
}

/* 2. Cải thiện danh sách chi tiết (Metadata) */
.profile-metadata {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.95rem;
}
.profile-detail-item strong {
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 100px;
}
.profile-detail-item span {
    color: var(--text-primary);
    text-align: right;
    flex-grow: 1;
}

/* 3. Thẻ hoạt động gần đây */
.activity-item-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.2s;
}
.activity-item-card:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.05);
}
/* webnoibo/style.css */

/* === NÂNG CẤP NGOẠI HÌNH: TÀI LIỆU CLB (DIGITAL ASSET) === */

/* Tinh chỉnh khu vực tìm kiếm/lọc */
.resource-search-input-field {
    /* Đảm bảo style đẹp hơn của form-input được áp dụng */
    padding-left: 1rem;
}
.resource-sort-select-field {
    /* Đảm bảo style đẹp hơn của form-input được áp dụng */
    padding-right: 2.5rem;
}

/* 1. Thẻ Tài liệu (Resource Card) */
.resource-card-container {
    /* Ghi đè lại hiệu ứng hover đã được định nghĩa ở lớp .bg-card */
    transform: none; 
}
.resource-card-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 2. Icon chủ đề */
.resource-icon-box {
    background-color: rgba(var(--primary-accent-rgb), 0.1);
    border: 1px solid rgba(var(--primary-accent-rgb), 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hiệu ứng glow nhẹ */
    box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.15);
}

/* 3. Nút hành động chính */
.resource-action-btn {
    /* Bỏ style gradient-btn mặc định để làm nút nhỏ và tinh tế hơn */
    background: var(--primary-accent);
    color: #fff !important;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px -2px rgba(var(--primary-accent-rgb), 0.4);
    transition: all 0.2s ease;
}

.resource-action-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* 4. Nút Sửa/Xóa */
.edit-resource-btn, .delete-resource-btn {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.edit-resource-btn:hover, .delete-resource-btn:hover {
    opacity: 1;
}

/* 5. Ghi đè hiệu ứng line-clamp cho mô tả ngắn */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* === BẮT ĐẦU: MOBILE-FIRST DESIGN (BOTTOM NAV) === */

/* 1. Đảm bảo footer và nội dung chính được đẩy lên trên thanh nav */
@media (max-width: 767px) {
    #main-content {
        /* Thêm padding dưới cùng để nội dung không bị che bởi Bottom Nav */
        padding-bottom: 72px; /* 16px (Nav Height) + 16px (Footer Height) */
    }
    
    footer {
        /* Đẩy footer lên trên thanh nav */
        margin-bottom: 64px; 
        position: relative;
    }
    
    /* 2. Style cho các mục điều hướng */
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 20%;
        height: 100%;
        color: var(--text-secondary);
        transition: color 0.2s ease;
    }
    .mobile-nav-item.active {
        color: var(--primary-accent-hover);
    }
    
    /* 3. Ẩn avatar người dùng ở sidebar vì đã có ở bottom nav */
    #sidebar #user-menu-button {
        display: none !important;
    }

    /* 4. Điều chỉnh lại z-index của sidebar để không đè lên bottom nav */
    #sidebar {
        z-index: 41; 
    }
    #mobile-fab-btn {
        /* Đảm bảo flexbox căn giữa tuyệt đối */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
@media (max-width: 767px) { 
    /* Chiều cao của Bottom Nav là 64px. Chúng ta đặt button cao hơn 64px + 16px (padding) */
    #pet-bandits-launcher {
        /* Thiết lập lại vị trí cố định trên mobile */
        right: 16px; 
        bottom: calc(64px + 16px); /* 64px (Nav Height) + 16px (Padding) */
        
        /* Đảm bảo nó không bị che bởi FAB Button nếu chúng ta di chuyển FAB */
        z-index: 50; 
        
        /* Điều chỉnh lại transform/animation để trông không bị lỗi */
        transform: none !important; 
    }
    
    /* Điều chỉnh lại vị trí của FAB Button để nó cũng không bị che */
    #mobile-fab-btn {
        /* Giữ nguyên vị trí ở giữa (đã đúng) */
        bottom: 30px; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 50; 
    }
}
/* webnoibo/style.css */

/* === PROFILE PAGE AESTHETICS & DETAIL === */

/* 1. Avatar và Hiệu ứng Hover */
#profile-content .avatar-wrapper {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto;
    display: block;
}

#profile-content .avatar-wrapper img {
    border-radius: 50%;
    transition: all 0.3s ease;
}
/* Hiệu ứng Tỏa sáng và Zoom nhẹ khi có thể đổi ảnh */
#profile-content .avatar-wrapper:hover img {
    transform: scale(1.05);
    border-color: var(--primary-accent-hover) !important;
    box-shadow: 0 0 15px rgba(var(--primary-accent-rgb), 0.5);
}

/* 2. Cải thiện danh sách chi tiết (Metadata) */
.profile-metadata {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.95rem;
}
.profile-detail-item strong {
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 100px;
}
.profile-detail-item span {
    color: var(--text-primary);
    text-align: right;
    flex-grow: 1;
}

/* 3. Thẻ hoạt động gần đây */
.activity-item-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.2s;
}
.activity-item-card:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.05);
}

/* 4. Thẻ thống kê (Tái sử dụng style stat-card-mini từ Duty Stats Modal) */
.stat-card-mini {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.stat-card-mini .number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card-mini .label {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Hiệu ứng Glow cho stat-card-mini (Cần phải copy lại từ khối đã có trong style.css) */
.stat-card-mini::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 0;
    filter: blur(60px);
}

.stat-card-mini:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Định nghĩa màu cho từng loại thẻ (Đã có trong style.css, nhưng ta thêm vào đây để dễ theo dõi) */
.stat-card-mini.purple::before {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, transparent 40%);
}
.stat-card-mini.blue::before {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, transparent 40%);
}
.stat-card-mini.green::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.25) 0%, transparent 40%);
}

.stat-card-mini.green .number {
    color: var(--success-accent);
}
/* webnoibo/style.css */

/* === KANBAN CHECKLIST UPGRADE V2 === */

/* Style cho inline editing */
.checklist-item-content {
    cursor: text;
}
.checklist-item-edit-input {
    background-color: var(--background-color);
    border: 1px solid var(--primary-accent);
    border-radius: 4px;
    padding: 2px 6px;
    width: 100%;
    color: var(--text-primary);
    font-size: 1em; /* Giữ kích thước chữ như label */
}
.checklist-item-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-accent-hover);
}

/* Hiệu ứng thêm mục mới */
@keyframes newItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.new-item-added {
  animation: newItemFadeIn 0.4s ease-out forwards;
}

/* Style cho kéo thả (SortableJS) */
.checklist-item.sortable-ghost {
    opacity: 0.4;
    background: rgba(var(--primary-accent-rgb), 0.2);
}
.checklist-item.sortable-chosen {
    background: rgba(var(--primary-accent-rgb), 0.1);
}
/* webnoibo/style.css - DÁN VÀO CUỐI FILE */