<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quản Lý Nhà Trọ & Căn Hộ Cho Thuê</title>
  <meta name="description" content="Hệ thống quản lý phòng trọ, khách thuê, tính tiền điện nước, xuất phiếu thu hóa đơn VietQR và báo cáo thu chi lợi nhuận cổ đông" />
  <meta property="og:title" content="Quản Lý Nhà Trọ & Căn Hộ Cho Thuê" />
  <meta property="og:description" content="Hệ thống quản lý phòng trọ, khách thuê, tính tiền điện nước, xuất phiếu thu hóa đơn VietQR và báo cáo thu chi lợi nhuận cổ đông" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
  

  <!-- Tailwind CDN dự phòng khi chạy độc lập ngoài Vite -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              50: '#eff6ff',
              100: '#dbeafe',
              500: '#3b82f6',
              600: '#2563eb',
              700: '#1d4ed8',
              900: '#1e3a8a',
            }
          }
        }
      }
    }
  </script>

  <!-- Lucide Icons CDN -->
  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- SheetJS CDN for Excel Import/Export -->
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

  <!-- Firebase Compat CDN (v10) for Realtime Database & Auth -->
  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-database-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/main-Mgk7UivG.css">
  <script>window.__FIREBASE_API_KEY__ = ""; window.VITE_FIREBASE_API_KEY = "";</script>
</head>
<body class="bg-slate-100 text-slate-800 antialiased h-screen overflow-hidden flex flex-col font-sans">

  <!-- ===================================================================== -->
  <!-- 1. MASTER SHELL (SIDEBAR + MASTER HEADER + MAIN CONTENT)              -->
  <!-- ===================================================================== -->
  <div class="flex h-full w-full overflow-hidden">

    <!-- DESKTOP SIDEBAR -->
    <aside id="desktop-sidebar" class="bg-slate-950 text-slate-300 border-r border-slate-800 hidden md:flex flex-col justify-between transition-all duration-300 shrink-0 z-30 w-64">
      <!-- Top Branding -->
      <div class="p-4 border-b border-slate-800/80 flex items-center justify-between">
        <div class="flex items-center gap-2.5 overflow-hidden">
          <div class="w-9 h-9 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white font-black shadow-md shadow-blue-500/20 shrink-0 text-sm">
            ERP
          </div>
          <div class="truncate sidebar-label">
            <div class="text-xs font-black uppercase tracking-wider text-white flex items-center gap-1.5">
              <span>DOANH NGHIỆP</span>
              <span class="text-[9px] px-1.5 py-0.2 bg-amber-400 text-slate-950 rounded-full font-black">PRO</span>
            </div>
            <div class="text-[10px] text-slate-400 truncate">Hệ Thống Quản Trị ERP (HTML)</div>
          </div>
        </div>

        <button id="btn-toggle-sidebar" class="p-1.5 rounded-xl hover:bg-slate-800 text-slate-400 hover:text-white transition cursor-pointer" title="Thu gọn/Mở rộng menu">
          <i data-lucide="chevron-left" class="w-4 h-4"></i>
        </button>
      </div>

      <!-- Navigation Modules List -->
      <nav class="flex-1 p-3 space-y-1.5 overflow-y-auto">
        <div class="px-2 pb-1 text-[10px] font-bold uppercase tracking-wider text-slate-500 sidebar-label">
          Phân Hệ Phòng Ban
        </div>

        <!-- 1. Tổng quan Doanh nghiệp -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left bg-blue-600 text-white shadow-lg shadow-blue-600/30" data-module="overview">
          <div class="shrink-0 text-white"><i data-lucide="layout-dashboard" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Tổng Quan Doanh Nghiệp</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-white/20 text-white">Chỉ huy</span>
          </div>
        </button>

        <!-- 2. Vận hành Tòa nhà -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left hover:bg-slate-900 text-slate-400 hover:text-slate-200" data-module="buildings">
          <div class="shrink-0 text-slate-400 group-hover:text-blue-400"><i data-lucide="building-2" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Vận Hành Tòa Nhà</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-slate-800 text-slate-400">Trọng tâm</span>
          </div>
        </button>

        <!-- 3. Kế toán & Tài chính -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left hover:bg-slate-900 text-slate-400 hover:text-slate-200" data-module="finance">
          <div class="shrink-0 text-slate-400 group-hover:text-blue-400"><i data-lucide="dollar-sign" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Kế Toán & Tài Chính</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-slate-800 text-slate-400">Sổ cái</span>
          </div>
        </button>

        <!-- 4. Nhân sự & Tiền lương -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left hover:bg-slate-900 text-slate-400 hover:text-slate-200" data-module="hr">
          <div class="shrink-0 text-slate-400 group-hover:text-blue-400"><i data-lucide="users" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Nhân Sự & Tiền Lương</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-slate-800 text-slate-400">HRM</span>
          </div>
        </button>

        <!-- 5. Marketing & Bán hàng -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left hover:bg-slate-900 text-slate-400 hover:text-slate-200" data-module="marketing">
          <div class="shrink-0 text-slate-400 group-hover:text-blue-400"><i data-lucide="megaphone" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Marketing & Bán Hàng</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-slate-800 text-slate-400">Lead</span>
          </div>
        </button>

        <!-- 6. Cấu hình & Phân quyền -->
        <button class="nav-module-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs transition cursor-pointer group text-left hover:bg-slate-900 text-slate-400 hover:text-slate-200" data-module="settings">
          <div class="shrink-0 text-slate-400 group-hover:text-blue-400"><i data-lucide="shield-check" class="w-5 h-5"></i></div>
          <div class="flex-1 truncate flex items-center justify-between sidebar-label">
            <span class="truncate">Cấu Hình & Hệ Thống</span>
            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold ml-1.5 shrink-0 bg-slate-800 text-slate-400">Hệ thống</span>
          </div>
        </button>
      </nav>

      <!-- Bottom: User Profile, Cloud Status & Logout (Nằm cuối menu) -->
      <div class="p-3 border-t border-slate-800/80 space-y-2">
        <!-- Cloud Sync & Version Badge -->
        <div class="flex items-center justify-between px-1 text-[11px] sidebar-label">
          <span class="px-2 py-0.5 rounded-lg bg-slate-900 border border-slate-800 text-slate-400 font-mono font-bold text-[10px]" id="app-version-badge">v1.2.5</span>
          <button id="cloud-sync-status-indicator" type="button" title="Bấm để đồng bộ dữ liệu với Firebase Cloud ngay lập tức" class="flex items-center gap-1.5 px-2 py-1 rounded-xl bg-emerald-950/80 text-emerald-400 border border-emerald-800/60 font-bold text-[10px] transition cursor-pointer active:scale-95 hover:bg-emerald-900/80">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" id="cloud-sync-dot"></span>
            <span id="cloud-sync-text">Cloud Realtime</span>
          </button>
        </div>

        <div class="flex items-center gap-2.5 p-1.5 rounded-xl bg-slate-900/90 border border-slate-800/90">
          <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs shadow-xs shrink-0">
            GD
          </div>
          <div class="truncate sidebar-label flex-1 min-w-0">
            <div class="text-xs font-bold text-slate-200 leading-tight truncate" id="header-user-name">Ban Giám Đốc</div>
            <div class="text-[10px] text-slate-400 leading-none truncate" id="header-user-role">Super Admin</div>
          </div>
        </div>

        <button id="btn-master-logout" type="button" class="w-full py-2 px-2.5 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 hover:text-rose-300 border border-rose-500/20 font-bold text-xs flex items-center justify-center gap-2 transition cursor-pointer active:scale-95 shadow-2xs" title="Đăng Xuất Khỏi Hệ Thống">
          <i data-lucide="log-out" class="w-4 h-4 text-rose-400 shrink-0"></i>
          <span class="sidebar-label">Đăng Xuất</span>
        </button>
      </div>
    </aside>

    <!-- MOBILE DRAWER SIDEBAR -->
    <div id="mobile-sidebar-drawer" class="fixed inset-0 z-50 md:hidden hidden">
      <div id="mobile-sidebar-backdrop" class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"></div>
      <div class="relative w-72 max-w-[80vw] h-full bg-slate-950 flex flex-col z-10 animate-in slide-in-from-left duration-200">
        <div class="p-3 flex justify-between items-center border-b border-slate-800">
          <span class="text-xs font-black uppercase text-white">Menu Phân Hệ ERP</span>
          <button id="btn-close-mobile-menu" class="p-1 rounded-xl text-slate-400 hover:text-white">
            <i data-lucide="x" class="w-5 h-5"></i>
          </button>
        </div>
        <div class="flex-1 overflow-y-auto p-3 space-y-1.5">
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-white bg-blue-600" data-module="overview">
            <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
            <span>Tổng Quan Doanh Nghiệp</span>
          </button>
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-slate-400 hover:bg-slate-900" data-module="buildings">
            <i data-lucide="building-2" class="w-5 h-5"></i>
            <span>Vận Hành Tòa Nhà</span>
          </button>
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-slate-400 hover:bg-slate-900" data-module="finance">
            <i data-lucide="dollar-sign" class="w-5 h-5"></i>
            <span>Kế Toán & Tài Chính</span>
          </button>
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-slate-400 hover:bg-slate-900" data-module="hr">
            <i data-lucide="users" class="w-5 h-5"></i>
            <span>Nhân Sự & Tiền Lương</span>
          </button>
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-slate-400 hover:bg-slate-900" data-module="marketing">
            <i data-lucide="megaphone" class="w-5 h-5"></i>
            <span>Marketing & Bán Hàng</span>
          </button>
          <button class="mobile-nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl font-bold text-xs text-slate-400 hover:bg-slate-900" data-module="settings">
            <i data-lucide="shield-check" class="w-5 h-5"></i>
            <span>Cấu Hình & Hệ Thống</span>
          </button>
        </div>
        <!-- Mobile Drawer Bottom: User Profile & Logout -->
        <div class="p-3 border-t border-slate-800 space-y-2">
          <div class="flex items-center gap-2.5 p-1.5 rounded-xl bg-slate-900/90 border border-slate-800/90">
            <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs shadow-xs shrink-0">
              GD
            </div>
            <div class="truncate flex-1 min-w-0">
              <div class="text-xs font-bold text-slate-200 leading-tight truncate">Ban Giám Đốc</div>
              <div class="text-[10px] text-slate-400 leading-none truncate">Super Admin</div>
            </div>
          </div>
          <button type="button" class="btn-mobile-logout-trigger w-full py-2 px-2.5 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 hover:text-rose-300 border border-rose-500/20 font-bold text-xs flex items-center justify-center gap-2 transition cursor-pointer active:scale-95 shadow-2xs">
            <i data-lucide="log-out" class="w-4 h-4 text-rose-400 shrink-0"></i>
            <span>Đăng Xuất</span>
          </button>
        </div>
      </div>
    </div>

    <!-- MAIN RIGHT VIEWPORT -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden relative">

      <!-- Nút mở menu trên Mobile (khi đã ẩn Master Header) -->
      <button id="btn-open-mobile-menu" class="md:hidden fixed top-3 left-3 z-40 p-2 rounded-xl bg-slate-900/90 text-white shadow-lg cursor-pointer backdrop-blur-xs border border-slate-700/80 hover:bg-slate-800 transition active:scale-95" title="Mở menu ERP">
        <i data-lucide="menu" class="w-4 h-4"></i>
      </button>
      <span id="current-module-title" class="hidden">Tổng Quan Doanh Nghiệp</span>

      <!-- DYNAMIC CONTENT PANELS (MỖI PHÂN HỆ LÀ 1 PANE ĐỘC LẬP) -->
      <main id="main-viewport" class="flex-1 overflow-y-auto relative bg-slate-100">

        <!-- ================================================================= -->
        <!-- PHÂN HỆ 1: TỔNG QUAN DOANH NGHIỆP (EXECUTIVE DASHBOARD)           -->
        <!-- ================================================================= -->
        <section id="module-overview" class="module-content-pane active p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
          <!-- 1. TOP HERO BANNER: BAN ĐIỀU HÀNH DOANH NGHIỆP (CEO EXECUTIVE BOARD) CHUẨN GRADIENT XANH ĐEN SANG TRỌNG -->
          <div class="hero-ceo-banner relative overflow-hidden rounded-3xl bg-gradient-to-r from-slate-900 via-indigo-950 to-blue-900 p-6 sm:p-8 text-white shadow-xl border border-slate-800" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;">
            <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
              <div class="space-y-2">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-amber-300 text-xs font-bold">
                  <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-300"></i>
                  <span>Bàn Làm Việc Chỉ Huy Doanh Nghiệp (CEO Executive Board)</span>
                </div>
                <h1 class="text-xl sm:text-2xl md:text-3xl font-black tracking-tight text-white">
                  Trung Tâm Điều Hành Doanh Nghiệp
                </h1>
                <p class="text-slate-300 text-xs sm:text-sm max-w-2xl leading-relaxed">
                  Hệ thống ERP hợp nhất đa phòng ban: Quản lý chuỗi cơ sở tòa nhà, dòng tiền tài chính kế toán, nhân sự và chiến dịch marketing trên một nền tảng duy nhất.
                </p>
              </div>

              <div class="flex flex-wrap items-center gap-3 shrink-0">
                <button
                  id="btn-quick-to-buildings"
                  class="btn-gradient-amber px-5 py-2.5 rounded-2xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-black text-xs uppercase tracking-wider transition shadow-lg shadow-amber-500/30 flex items-center gap-2 cursor-pointer active:scale-95"
                  style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #0f172a !important;"
                >
                  <i data-lucide="building-2" class="w-4 h-4"></i>
                  <span>Vào Vận Hành Tòa Nhà</span>
                </button>
                <button
                  id="btn-quick-to-finance"
                  class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-white font-bold text-xs uppercase tracking-wider transition backdrop-blur-md flex items-center gap-2 cursor-pointer active:scale-95"
                >
                  <i data-lucide="dollar-sign" class="w-4 h-4"></i>
                  <span>Sổ Cái Kế Toán</span>
                </button>
              </div>
            </div>

            <!-- Trang trí nền phát sáng -->
            <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl pointer-events-none"></div>
          </div>

          <!-- 4 Card KPI Tổng thể -->
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- KPI 1: Cơ sở & Lấp đầy -->
            <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Cơ Sở & Phòng</span>
                <div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
                  <i data-lucide="building-2" class="w-4 h-4"></i>
                </div>
              </div>
              <div class="mt-2 flex items-baseline gap-2">
                <span class="text-2xl font-black text-slate-900" id="kpi-total-rooms">22</span>
                <span class="text-xs font-bold text-slate-500">phòng / 1 cơ sở</span>
              </div>
              <div class="mt-3 flex items-center justify-between text-xs font-bold">
                <span class="text-emerald-600 flex items-center gap-1">
                  <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                  <span id="kpi-rented-rooms">18</span> đang thuê
                </span>
                <span class="text-amber-600 flex items-center gap-1">
                  <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                  <span id="kpi-vacant-rooms">4</span> phòng trống
                </span>
              </div>
              <div class="mt-2 w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-blue-600 rounded-full" id="kpi-occupancy-bar" style="width: 82%;"></div>
              </div>
              <div class="mt-1 text-[11px] text-right font-black text-blue-600" id="kpi-occupancy-rate">82% lấp đầy</div>
            </div>

            <!-- KPI 2: Dự thu tháng này -->
            <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Dự Thu Tháng Này</span>
                <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold">
                  <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-2xl font-black text-slate-900" id="kpi-expected-revenue">85,450,000 đ</span>
              </div>
              <div class="mt-3 text-xs text-slate-500 flex items-center justify-between font-bold">
                <span>Đã thu thực tế:</span>
                <span class="text-emerald-600 font-black" id="kpi-collected-revenue">72,100,000 đ</span>
              </div>
              <div class="mt-2 w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-emerald-500 rounded-full" style="width: 84%;"></div>
              </div>
              <div class="mt-1 text-[11px] text-right font-black text-emerald-600">84% đã thanh toán</div>
            </div>

            <!-- KPI 3: Công nợ chưa thu -->
            <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Công Nợ Chưa Thu</span>
                <div class="w-8 h-8 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold">
                  <i data-lucide="alert-circle" class="w-4 h-4"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-2xl font-black text-rose-600" id="kpi-unpaid-debt">13,350,000 đ</span>
              </div>
              <div class="mt-3 text-xs text-slate-500 flex items-center justify-between font-bold">
                <span>Số phòng còn nợ:</span>
                <span class="text-rose-600 font-black">4 phòng</span>
              </div>
              <div class="mt-2 w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-rose-500 rounded-full" style="width: 16%;"></div>
              </div>
              <div class="mt-1 text-[11px] text-right font-black text-rose-600">16% còn đọng</div>
            </div>

            <!-- KPI 4: Ước tính lợi nhuận ròng -->
            <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Ước Tính Lợi Nhuận</span>
                <div class="w-8 h-8 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center font-bold">
                  <i data-lucide="trending-up" class="w-4 h-4"></i>
                </div>
              </div>
              <div class="mt-2">
                <span class="text-2xl font-black text-purple-700" id="kpi-estimated-profit">58,850,000 đ</span>
              </div>
              <div class="mt-3 text-xs text-slate-500 flex items-center justify-between font-bold">
                <span>Biên lợi nhuận:</span>
                <span class="text-purple-600 font-black">~68.8%</span>
              </div>
              <div class="mt-2 w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-purple-600 rounded-full" style="width: 68%;"></div>
              </div>
              <div class="mt-1 text-[11px] text-right font-black text-purple-600">Tỷ suất an toàn</div>
            </div>
          </div>

          <!-- Bảng chi tiết từng cơ sở toàn chuỗi -->
          <div class="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
            <div class="p-4 sm:p-5 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h2 class="text-sm sm:text-base font-black text-slate-900">Danh Sách Cơ Sở Trong Chuỗi</h2>
                <p class="text-xs text-slate-400 mt-0.5">Báo cáo tình hình hoạt động, số phòng và công nợ chi tiết theo từng tòa nhà</p>
              </div>
              <button class="btn-open-create-building px-3.5 py-1.5 rounded-xl bg-gradient-sunsilk text-white font-bold text-xs flex items-center gap-1.5 transition cursor-pointer shadow-xs">
                <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                <span>Thêm Tòa Nhà Mới</span>
              </button>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left border-collapse">
                <thead>
                  <tr class="bg-slate-50 text-[11px] font-black uppercase text-slate-400 border-b border-slate-100 tracking-wider">
                    <th class="py-3 px-4">Tòa Nhà / Địa Chỉ</th>
                    <th class="py-3 px-4">Quản Lý</th>
                    <th class="py-3 px-4 text-center">Phòng Đang Thuê</th>
                    <th class="py-3 px-4 text-center">Tỷ Lệ Lấp Đầy</th>
                    <th class="py-3 px-4 text-right">Dự Thu Tháng</th>
                    <th class="py-3 px-4 text-right">Thực Thu</th>
                    <th class="py-3 px-4 text-right">Công Nợ</th>
                    <th class="py-3 px-4 text-center">Thao Tác</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs" id="overview-buildings-table-body">
                  <tr>
                    <td colspan="8" class="py-8 text-center text-slate-400">
                      Chưa có cơ sở nào trong hệ thống. Hãy bấm "Thêm Tòa" ở menu Vận Hành để bắt đầu.
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>


        <!-- ================================================================= -->
        <!-- PHÂN HỆ 2: VẬN HÀNH TÒA NHÀ (BUILDINGS MODULE)                     -->
        <!-- Gồm 2 góc nhìn: 2.1 TRANG CHỦ CHUỖI & 2.2 QUẢN LÝ TÒA NHÀ         -->
        <!-- ================================================================= -->
        <section id="module-buildings" class="module-content-pane relative">

          <!-- 2.1 GÓC NHÌN: TRANG CHỦ VẬN HÀNH CHUỖI TÒA NHÀ (BUILDING HUB) -->
          <div id="view-building-hub" class="p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
            <!-- 1. TOP HERO BANNER: TỔNG QUAN HỆ THỐNG CHUỖI & NƠI TẠO TÒA NHÀ (GRADIENT CHÌM XANH ĐEN SANG TRỌNG) -->
            <div class="hero-dark-banner hero-building-banner relative overflow-hidden rounded-3xl bg-gradient-to-r from-slate-900 via-indigo-950 to-blue-950 p-6 sm:p-8 text-white shadow-xl border border-slate-800" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #172554 100%) !important;">
              <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div class="space-y-2 max-w-2xl">
                  <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 backdrop-blur-md border border-blue-400/30 text-blue-300 text-xs font-bold">
                    <i data-lucide="building-2" class="w-3.5 h-3.5 text-blue-400"></i>
                    <span>TRANG CHỦ VẬN HÀNH • HỆ THỐNG CHUỖI TOÀN DOANH NGHIỆP</span>
                  </div>
                  <h1 class="text-xl sm:text-3xl font-black tracking-tight text-white">
                    Điều Hành & Vận Hành Chuỗi Cơ Sở
                  </h1>
                  <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
                    Theo dõi toàn diện các chỉ số chuỗi, thêm cơ sở mới vào hệ thống và chọn tòa nhà để
                    trực tiếp quản lý sơ đồ phòng, tính tiền điện nước, thu chi và xuất hóa đơn VietQR.
                  </p>
                </div>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 shrink-0">
                  <input type="file" id="shared-json-file-input" accept=".json" class="hidden" />

                  <button
                    type="button"
                    id="btn-import-backup-json-banner"
                    title="Nạp file JSON đã lưu về máy để phục hồi dữ liệu hệ thống hoặc 3 tòa nhà"
                    class="px-4 py-3 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-white font-black text-xs uppercase tracking-wider flex items-center justify-center gap-2 transition cursor-pointer backdrop-blur-md active:scale-95"
                  >
                    <i data-lucide="upload" class="w-4 h-4 text-emerald-300"></i>
                    <span>Nhập Tệp JSON (Phục Hồi)</span>
                  </button>

                  <button
                    type="button"
                    id="btn-export-backup-json"
                    title="Lưu toàn bộ cơ sở dữ liệu về máy dưới dạng tệp JSON để phục hồi lần sau"
                    class="px-4 py-3 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-white font-black text-xs uppercase tracking-wider flex items-center justify-center gap-2 transition cursor-pointer backdrop-blur-md active:scale-95"
                  >
                    <i data-lucide="download" class="w-4 h-4 text-amber-300"></i>
                    <span>Tải JSON Về Máy</span>
                  </button>

                  <button
                    type="button"
                    class="btn-open-create-building btn-gradient-blue px-5 py-3 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-black text-xs uppercase tracking-wider flex items-center justify-center gap-2 transition cursor-pointer shadow-lg shadow-blue-600/30 active:scale-95"
                    style="background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important; color: #ffffff !important;"
                  >
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>Tạo Mới Tòa Nhà</span>
                  </button>
                </div>
              </div>

              <!-- Decorative background glow -->
              <div class="absolute -right-10 -bottom-10 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl pointer-events-none"></div>
            </div>

            <!-- 2. CHỈ SỐ KPI TỔNG QUAN TOÀN CHUỖI (CHAIN OVERVIEW METRICS) -->
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
              <!-- Card 1: Số cơ sở -->
              <div class="bg-white p-4 sm:p-5 rounded-3xl border border-slate-200/90 shadow-2xs space-y-1.5">
                <div class="flex items-center justify-between text-slate-400">
                  <span class="text-[11px] font-bold uppercase tracking-wider">Cơ Sở Chuỗi</span>
                  <div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                    <i data-lucide="building-2" class="w-4 h-4"></i>
                  </div>
                </div>
                <div class="text-2xl sm:text-3xl font-black text-slate-900" id="hub-kpi-total-buildings">0 tòa</div>
                <div class="text-[11px] text-blue-600 font-bold flex items-center gap-1">
                  <span class="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></span>
                  <span>Đang hoạt động đồng bộ</span>
                </div>
              </div>

              <!-- Card 2: Quy mô phòng & lấp đầy -->
              <div class="bg-white p-4 sm:p-5 rounded-3xl border border-slate-200/90 shadow-2xs space-y-1.5">
                <div class="flex items-center justify-between text-slate-400">
                  <span class="text-[11px] font-bold uppercase tracking-wider">Tỷ Lệ Lấp Đầy</span>
                  <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                    <i data-lucide="percent" class="w-4 h-4"></i>
                  </div>
                </div>
                <div class="flex items-baseline gap-2">
                  <span class="text-2xl sm:text-3xl font-black text-slate-900" id="hub-kpi-occupancy-rate">0%</span>
                  <span class="text-xs font-bold text-slate-500" id="hub-kpi-occupancy-desc">(0/0 phòng)</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-2 overflow-hidden mt-1">
                  <div class="bg-emerald-500 h-full rounded-full transition-all duration-500" id="hub-kpi-occupancy-bar" style="width: 0%;"></div>
                </div>
              </div>

              <!-- Card 3: Doanh thu dự kiến tháng -->
              <div class="bg-white p-4 sm:p-5 rounded-3xl border border-slate-200/90 shadow-2xs space-y-1.5">
                <div class="flex items-center justify-between text-slate-400">
                  <span class="text-[11px] font-bold uppercase tracking-wider">Doanh Thu Dự Kiến</span>
                  <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center">
                    <i data-lucide="trending-up" class="w-4 h-4"></i>
                  </div>
                </div>
                <div class="text-xl sm:text-2xl font-black text-amber-700 truncate" id="hub-kpi-expected-revenue">
                  0 đ
                </div>
                <div class="text-[11px] text-slate-500 font-medium">Toàn bộ phòng đang thuê/tháng</div>
              </div>

              <!-- Card 4: Quản lý & Tình trạng -->
              <div class="bg-white p-4 sm:p-5 rounded-3xl border border-slate-200/90 shadow-2xs space-y-1.5">
                <div class="flex items-center justify-between text-slate-400">
                  <span class="text-[11px] font-bold uppercase tracking-wider">Điều Hành Chuỗi</span>
                  <div class="w-8 h-8 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center">
                    <i data-lucide="users" class="w-4 h-4"></i>
                  </div>
                </div>
                <div class="text-xl sm:text-2xl font-black text-slate-900">Ban Giám Đốc</div>
                <div class="text-[11px] text-emerald-600 font-bold flex items-center gap-1">
                  <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
                  <span>Phân quyền tập trung</span>
                </div>
              </div>
            </div>

            <!-- 3. DANH SÁCH TÒA NHÀ TRONG HỆ THỐNG CHUỖI -->
            <div class="space-y-4">
              <!-- Filter & Search Bar -->
              <div class="bg-white p-3 sm:p-4 rounded-3xl border border-slate-200/90 shadow-2xs flex flex-col sm:flex-row items-center justify-between gap-3">
                <!-- Search box -->
                <div class="relative w-full sm:w-80">
                  <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
                  <input
                    type="text"
                    id="hub-search-input"
                    placeholder="Tìm theo tên, địa chỉ, quản lý..."
                    class="w-full pl-9 pr-3 py-2 rounded-2xl border border-slate-200 text-xs text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-500 bg-slate-50/70"
                  />
                </div>

                <!-- Status Filter Buttons -->
                <div class="flex items-center gap-1.5 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0">
                  <button type="button" data-hub-filter="all" class="btn-hub-filter px-3 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap cursor-pointer bg-blue-600 text-white shadow-xs">
                    Tất cả (<span id="hub-filter-count-all">1</span>)
                  </button>
                  <button type="button" data-hub-filter="vacant" class="btn-hub-filter px-3 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap cursor-pointer bg-slate-100 text-slate-600 hover:bg-slate-200">
                    Còn phòng trống (<span id="hub-filter-count-vacant">0</span>)
                  </button>
                  <button type="button" data-hub-filter="full" class="btn-hub-filter px-3 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap cursor-pointer bg-slate-100 text-slate-600 hover:bg-slate-200">
                    Đã kín 100% (<span id="hub-filter-count-full">0</span>)
                  </button>
                  <button type="button" class="btn-open-create-building ml-auto sm:ml-2 px-3 py-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold transition flex items-center gap-1 shrink-0 cursor-pointer">
                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                    <span>Thêm Tòa</span>
                  </button>
                </div>
              </div>

              <!-- Lưới các thẻ Tòa Nhà (Building Cards Grid) -->
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" id="building-cards-container">
                <div class="col-span-full bg-white rounded-3xl border border-slate-200 p-12 text-center text-slate-500 space-y-3">
                  <i data-lucide="building-2" class="w-12 h-12 text-slate-300 mx-auto"></i>
                  <h3 class="text-base font-bold text-slate-800">Chưa có tòa nhà nào trong hệ thống</h3>
                  <p class="text-xs text-slate-400">Bấm nút "Thêm Tòa" phía trên để tạo cơ sở đầu tiên và bắt đầu quản lý.</p>
                </div>
              </div>
            </div>
          </div>


          <!-- 2.2 GÓC NHÌN: QUẢN LÝ TÒA NHÀ ĐANG CHỌN (BUILDING DETAIL VIEW - PHIÊN BẢN CHUẨN 100% REACT) -->
          <div id="view-building-detail" class="hidden">
            <!-- HEADER TÒA NHÀ (GIỐNG 100% src/components/Header.tsx) -->
            <header class="bg-white border-b border-slate-200/90 shadow-xs sticky top-0 z-40">
              <!-- Top Brand Bar -->
              <div class="max-w-7xl mx-auto px-3 sm:px-6 py-2.5">
                <div class="flex items-center justify-between gap-2">
                  <!-- Building Title & Manager -->
                  <div class="flex items-center gap-2.5 min-w-0">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-sunsilk flex items-center justify-center shadow-md shadow-blue-600/30 text-white font-black shrink-0">
                      <i data-lucide="building-2" class="w-5 h-5"></i>
                    </div>
                    <div class="min-w-0">
                      <div class="flex items-center gap-2 flex-wrap">
                        <div class="flex items-center gap-1.5 min-w-0">
                          <h1 class="text-xs sm:text-sm font-black tracking-tight text-slate-900 uppercase truncate" id="current-building-name">
                            CHỌN TÒA NHÀ
                          </h1>
                          <!-- Dropdown chuyển nhanh tòa nhà -->
                          <div class="relative inline-flex items-center">
                            <select
                              id="header-building-quick-switch"
                              title="Bấm để chuyển nhanh sang cơ sở/tòa nhà khác trong chuỗi"
                              class="appearance-none pl-2 pr-6 py-1 rounded-xl text-[11px] font-black uppercase tracking-wider bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-800 shadow-2xs cursor-pointer outline-none transition"
                            >
                              <option value="">Đổi tòa</option>
                            </select>
                            <i data-lucide="chevron-down" class="w-3.5 h-3.5 text-blue-700 absolute right-1.5 pointer-events-none"></i>
                          </div>
                        </div>
                        <span class="px-1.5 py-0.2 rounded-md text-[9px] font-mono font-bold bg-slate-100 text-slate-600 border border-slate-200 shrink-0">
                          v1.2.4
                        </span>

                        <!-- Popover Info Thông tin cơ sở & Thanh toán (Chuẩn React PopoverInfo) -->
                        <div class="relative inline-flex items-center" id="header-building-popover-container">
                          <button
                            type="button"
                            id="btn-building-popover-info"
                            class="w-4 h-4 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700 hover:text-blue-900 flex items-center justify-center text-[10px] font-bold cursor-pointer transition-colors focus:outline-none shrink-0"
                            title="Bấm để xem thông tin cơ sở & thanh toán"
                          >
                            i
                          </button>
                          <div
                            id="header-building-popover-dropdown"
                            class="hidden fixed md:absolute top-14 md:top-6 left-2 right-2 md:left-auto md:-right-6 md:w-80 max-w-sm sm:max-w-md mx-auto z-80 bg-white border border-blue-200 shadow-2xl rounded-2xl p-3.5 animate-in fade-in zoom-in-95 duration-150 text-slate-800 ring-1 ring-blue-500/10"
                          >
                            <div class="flex items-center justify-between pb-1.5 border-b border-blue-100 mb-2">
                              <span class="text-[10px] sm:text-[11px] font-black uppercase text-blue-800 tracking-wider flex items-center gap-1.5">
                                <span>💡</span>
                                <span>Thông tin cơ sở & Thanh toán</span>
                              </span>
                              <button
                                type="button"
                                id="btn-close-building-popover"
                                class="text-blue-700 hover:text-blue-900 text-xs font-bold p-0.5 leading-none cursor-pointer"
                              >
                                ✕
                              </button>
                            </div>
                            <div class="space-y-1.5 text-xs text-slate-700 leading-relaxed font-normal">
                              <p>🏢 <strong id="popover-bld-name">Tòa Nhà</strong> - <span id="popover-bld-addr">Địa chỉ</span></p>
                              <p>👤 Quản lý: <strong id="popover-bld-manager">Quản lý</strong> (Hotline: <span id="popover-bld-hotline">Hotline</span>)</p>
                              <p>💳 <span id="popover-bld-bank">MB Bank</span>: <strong id="popover-bld-acc">0901234567</strong> - <span id="popover-bld-owner">CONG TY</span></p>
                              <p class="text-[11px] text-amber-800" id="popover-bld-rates">
                                ⚡ Đơn giá: Điện 3.500đ/kWh • Nước/Combo 150k • Xe 100k
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="flex items-center gap-2 text-[10px] sm:text-xs text-slate-500 font-medium truncate mt-0.5" id="header-building-subinfo">
                        <span class="flex items-center gap-0.5 text-slate-700 font-semibold truncate" id="header-manager-name">
                          <i data-lucide="shield-check" class="w-3.5 h-3.5 text-blue-600 shrink-0"></i>
                          <span>QL: Ban Quản Lý</span>
                        </span>
                        <span>•</span>
                        <a href="tel:0900000000" id="header-manager-phone" class="flex items-center gap-0.5 text-slate-600 hover:text-blue-700">
                          <i data-lucide="phone" class="w-3.5 h-3.5 text-sky-600 shrink-0"></i>
                          <span>Liên hệ quản lý</span>
                        </a>
                        <span class="hidden md:inline">•</span>
                        <span class="hidden md:flex items-center gap-0.5 text-slate-600" id="header-bank-info">
                          <i data-lucide="credit-card" class="w-3.5 h-3.5 text-blue-600 shrink-0"></i>
                          <span>STK: <strong class="font-mono text-slate-800" id="header-bank-acc">0901234567</strong> (<span id="header-bank-name">MB Bank</span>)</span>
                        </span>
                      </div>
                    </div>
                  </div>

                  <!-- Quick Action Tools -->
                  <div class="flex items-center gap-1.5 shrink-0">
                    <button id="btn-back-to-hub" title="Quay lại Trang Chủ Vận Hành Chuỗi Tòa Nhà" class="px-2.5 py-1.5 rounded-xl text-[11px] sm:text-xs font-black uppercase tracking-wider bg-slate-900 hover:bg-slate-800 text-white shadow-xs shrink-0 transition cursor-pointer flex items-center gap-1.5 active:scale-95">
                      <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                      <span>Trang Chủ</span>
                    </button>

                    <button id="btn-toggle-viewmode" title="Chuyển chế độ xem Bản ĐT / Bản Web" class="p-1.5 sm:px-2.5 sm:py-1 rounded-lg text-[11px] font-bold transition flex items-center gap-1 cursor-pointer border shadow-2xs bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100">
                      <i data-lucide="smartphone" class="w-3.5 h-3.5 text-blue-600"></i>
                      <span>Bản ĐT</span>
                    </button>

                    <button class="btn-edit-building-config p-1.5 sm:px-2.5 sm:py-1 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-[11px] font-bold transition flex items-center gap-1 shadow-xs cursor-pointer">
                      <i data-lucide="settings" class="w-3.5 h-3.5"></i>
                      <span class="hidden sm:inline">Cài đặt</span>
                    </button>
                  </div>
                </div>
              </div>

              <!-- MAIN NAVIGATION TABS - MOBILE-FIRST HIGH DENSITY VỚI GRADIENT SUNSILK K2 TABS -->
              <div class="max-w-7xl mx-auto px-2 sm:px-6 border-t border-slate-200/70 bg-slate-50/60">
                <nav class="flex space-x-1 sm:space-x-2 overflow-x-auto py-1.5 no-scrollbar" id="building-subtabs-nav">
                  <!-- Tab 0: Tổng quan tòa nhà (Active Mặc Định) -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer bg-gradient-sunsilk text-white shadow-md ring-1 ring-blue-400" data-subtab="overview">
                    <span>📊</span>
                    <span>TỔNG QUAN</span>
                  </button>

                  <!-- Tab 1: Sơ đồ phòng -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer text-slate-600 hover:text-slate-900 hover:bg-slate-200/70" data-subtab="rooms">
                    <span>🏠</span>
                    <span>SƠ ĐỒ PHÒNG</span>
                    <span class="text-[9px] px-1.5 py-0.2 rounded-md font-bold bg-slate-200/80 text-slate-600">22P</span>
                  </button>

                  <!-- Tab 2: Điện nước & Bill -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer text-slate-600 hover:text-slate-900 hover:bg-slate-200/70" data-subtab="billing">
                    <span>⚡</span>
                    <span>ĐIỆN NƯỚC & BILL</span>
                    <span class="text-[9px] px-1.5 py-0.2 rounded-md font-bold bg-slate-200/80 text-slate-600">T09/26</span>
                  </button>

                  <!-- Tab 3: Khách & Hợp đồng -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer text-slate-600 hover:text-slate-900 hover:bg-slate-200/70" data-subtab="tenants">
                    <span>👥</span>
                    <span>KHÁCH & HỢP ĐỒNG</span>
                    <span class="text-[9px] px-1.5 py-0.2 rounded-md font-bold bg-slate-200/80 text-slate-600">18K</span>
                  </button>

                  <!-- Tab 4: Sổ Thu - Chi -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer text-slate-600 hover:text-slate-900 hover:bg-slate-200/70" data-subtab="cashflow">
                    <span>💵</span>
                    <span>SỔ THU - CHI</span>
                    <span class="text-[9px] px-1.5 py-0.2 rounded-md font-bold bg-slate-200/80 text-slate-600">Sổ quỹ</span>
                  </button>

                  <!-- Tab 5: Lợi Nhuận & Cổ Đông -->
                  <button class="building-subtab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-black tracking-wide uppercase transition-all whitespace-nowrap cursor-pointer text-slate-600 hover:text-slate-900 hover:bg-slate-200/70" data-subtab="investor">
                    <span>📊</span>
                    <span>LỢI NHUẬN & CP</span>
                    <span class="text-[9px] px-1.5 py-0.2 rounded-md font-bold bg-slate-200/80 text-slate-600">Cổ đông</span>
                  </button>
                </nav>
              </div>

              <!-- KHỐI THANH CỐ ĐỊNH TRONG HEADER CHO SUBTAB SƠ ĐỒ PHÒNG (NGOÀI VÙNG CUỘN) -->
              <div id="rooms-sticky-header" class="hidden border-t border-slate-200/80 bg-slate-100/95 backdrop-blur-xs px-2 sm:px-6 py-2.5">
                <div class="max-w-7xl mx-auto space-y-2">
                  <!-- HÀNG 1: BANNER THỐNG KÊ (BÊN TRÁI) & KHỐI NÚT THÊM PHÒNG + NHẬP EXCEL (BÊN PHẢI) -->
                  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2.5">
                    <!-- Bên trái: Banner thống kê phòng thuê / tổng phòng, phòng trống (Đồng bộ style với Banner Tab Tổng Quan) -->
                    <div id="rooms-stat-banner" class="bg-gradient-card text-white rounded-2xl px-3.5 py-2 sm:px-4 sm:py-2.5 shadow-md border border-slate-700/60 flex items-center gap-3 sm:gap-4 flex-wrap" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;">
                      <!-- Badge 1: Đang thuê / Tổng phòng -->
                      <div class="flex items-center gap-2">
                        <div class="w-7 h-7 rounded-lg bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 flex items-center justify-center shrink-0">
                          <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-400"></i>
                        </div>
                        <div>
                          <div class="text-[9px] font-bold text-slate-300 uppercase tracking-wider">Phòng thuê / Tổng phòng</div>
                          <div class="text-xs font-black text-white flex items-center gap-1.5">
                            <span id="rooms-stat-rented-fraction" class="text-emerald-400">0 / 0</span>
                            <span id="rooms-stat-occupancy-rate" class="text-[10px] px-1.5 py-0.2 rounded font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">0%</span>
                          </div>
                        </div>
                      </div>

                      <div class="hidden sm:block h-6 w-px bg-white/15"></div>

                      <!-- Badge 2: Phòng trống -->
                      <div class="flex items-center gap-2">
                        <div class="w-7 h-7 rounded-lg bg-amber-500/20 text-amber-400 border border-amber-500/30 flex items-center justify-center shrink-0">
                          <i data-lucide="door-open" class="w-3.5 h-3.5 text-amber-400"></i>
                        </div>
                        <div>
                          <div class="text-[9px] font-bold text-slate-300 uppercase tracking-wider">Phòng trống</div>
                          <div class="text-xs font-black text-amber-400 flex items-center gap-1">
                            <span id="rooms-stat-vacant-count">0</span>
                            <span class="text-[10px] font-normal text-slate-300">phòng sẵn sàng</span>
                          </div>
                        </div>
                      </div>

                      <div class="hidden sm:block h-6 w-px bg-white/15"></div>

                      <!-- Badge 3 (phụ trợ): Cọc & Bảo trì -->
                      <div id="rooms-stat-other-container" class="hidden sm:flex items-center gap-1.5 text-[11px] font-medium">
                        <span id="rooms-stat-deposited-badge" class="px-2 py-0.5 rounded-lg bg-purple-500/20 text-purple-300 border border-purple-500/30 text-[10px] font-bold">Cọc: 0</span>
                        <span id="rooms-stat-maintenance-badge" class="px-2 py-0.5 rounded-lg bg-rose-500/20 text-rose-300 border border-rose-500/30 text-[10px] font-bold">Bảo trì: 0</span>
                      </div>
                    </div>

                    <!-- Bên phải: Nút Thêm phòng và Nhập Excel tách khỏi dòng tìm kiếm và đưa lên đây -->
                    <div class="flex items-center gap-2 shrink-0">
                      <!-- Nút Thêm phòng -->
                      <button type="button" id="btn-open-create-room" class="h-9 sm:h-10 px-3.5 rounded-lg bg-gradient-sunsilk hover:opacity-95 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-1.5 cursor-pointer shrink-0">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        <span>Thêm phòng</span>
                      </button>

                      <!-- Nhập Excel -->
                      <button type="button" id="btn-import-rooms-excel" class="h-9 sm:h-10 px-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs transition shadow-sm flex items-center gap-1.5 cursor-pointer shrink-0" title="Nhập danh sách phòng và khách thuê từ file Excel (.xlsx / .csv)">
                        <i data-lucide="upload" class="w-4 h-4"></i>
                        <span>Nhập Excel</span>
                      </button>
                      <input type="file" id="input-import-rooms-excel" accept=".xlsx, .xls, .csv" class="hidden" />
                    </div>
                  </div>

                  <!-- HÀNG 2: THANH TÌM KIẾM, BỘ LỌC TRẠNG THÁI VÀ NÚT MỞ RỘNG / THU GỌN -->
                  <div id="rooms-search-card" class="flex flex-col sm:flex-row sm:items-center justify-between gap-2.5">
                    <!-- Search input ở đầu dòng chiếm trọn flex-1 -->
                    <div class="relative flex-1">
                      <label class="absolute -top-2 left-2.5 px-1 bg-slate-100/90 rounded text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                        Tìm kiếm phòng / khách / biển số
                      </label>
                      <div class="relative flex items-center">
                        <i data-lucide="search" class="w-3.5 h-3.5 text-blue-600 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                        <input type="text" id="search-room-input" placeholder="Nhập mã phòng (101, G01), tên khách, SĐT, biển số..." class="h-10 pl-8 pr-8 rounded-lg text-xs font-medium border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-800 w-full transition">
                        <button type="button" id="btn-clear-room-search" class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-0.5 cursor-pointer" title="Xóa tìm kiếm">
                          <i data-lucide="x" class="w-3.5 h-3.5"></i>
                        </button>
                      </div>
                    </div>

                    <!-- Filter Status và Nút gom Mở rộng / Thu gọn -->
                    <div class="flex items-center gap-2 shrink-0">
                      <div class="relative min-w-[140px] flex-1 sm:flex-initial">
                        <label class="absolute -top-2 left-2.5 px-1 bg-slate-100/90 rounded text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                          Trạng thái
                        </label>
                        <select id="filter-room-status" class="h-10 px-2.5 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-700 w-full transition cursor-pointer">
                          <option value="all">Tất cả</option>
                          <option value="rented">Đang thuê</option>
                          <option value="vacant">Phòng trống</option>
                          <option value="deposited">Cọc giữ chỗ</option>
                          <option value="maintenance">Đang bảo trì</option>
                        </select>
                      </div>

                      <!-- Nút gom Mở rộng / Thu gọn ở cuối dòng -->
                      <button
                        type="button"
                        id="btn-toggle-expand-rooms"
                        onclick="window.toggleRoomsExpandCollapse ? window.toggleRoomsExpandCollapse(event) : null"
                        class="h-10 px-3.5 rounded-lg bg-white hover:bg-slate-100 text-slate-700 font-bold text-xs border border-slate-300 shadow-2xs transition flex items-center gap-1.5 cursor-pointer shrink-0 active:scale-95"
                        title="Bấm để mở rộng hoặc thu gọn danh sách thẻ phòng"
                      >
                        <i data-lucide="minimize-2" id="icon-toggle-expand-rooms" class="w-4 h-4 text-blue-600"></i>
                        <span id="text-toggle-expand-rooms">Thu gọn</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- KHỐI THANH CỐ ĐỊNH TRONG HEADER CHO SUBTAB ĐIỆN NƯỚC & BILL (NGOÀI VÙNG CUỘN) -->
              <div id="billing-sticky-header" class="hidden border-t border-slate-200/80 bg-slate-100/95 backdrop-blur-xs px-2 sm:px-6 py-2.5">
                <div class="max-w-7xl mx-auto space-y-2.5">
                  <!-- HÀNG 1: BANNER THỐNG KÊ 4 CỘT TỔNG TIỀN, ĐÃ THU, CHƯA THU, ĐIỆN TIÊU THỤ (ĐỒNG BỘ STYLE SANG TRỌNG) -->
                  <div class="bg-gradient-card text-white rounded-2xl p-2.5 sm:p-3 shadow-md border border-slate-700/60" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;">
                    <div class="grid grid-cols-4 divide-x divide-white/15 text-center text-xs">
                      <div class="px-1.5">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-slate-300 block">
                          TỔNG TIỀN KỲ NÀY
                        </span>
                        <span id="billing-summary-total" class="text-[11px] sm:text-[13px] font-black text-white block mt-0.5">
                          0 đ
                        </span>
                      </div>

                      <div class="px-1.5">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-emerald-400 block">
                          ĐÃ THU XONG
                        </span>
                        <span id="billing-summary-paid" class="text-[11px] sm:text-[13px] font-black text-emerald-400 block mt-0.5">
                          0 đ
                        </span>
                      </div>

                      <div class="px-1.5">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-rose-400 block">
                          CHƯA THU
                        </span>
                        <span id="billing-summary-debt" class="text-[11px] sm:text-[13px] font-black text-rose-400 block mt-0.5">
                          0 đ
                        </span>
                      </div>

                      <div class="px-1.5">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-amber-400 block">
                          ĐIỆN TIÊU THỤ
                        </span>
                        <span id="billing-summary-kwh" class="text-[11px] sm:text-[13px] font-black text-amber-300 block mt-0.5">
                          0 kWh
                        </span>
                      </div>
                    </div>
                  </div>

                  <!-- HÀNG 2: THANH CÔNG CỤ: TÌM PHÒNG, LỌC TRẠNG THÁI (ĐẦU DÒNG) & KỲ THU TIỀN, KỲ MỚI (CUỐI DÒNG) -->
                  <div class="flex flex-col md:flex-row md:items-center justify-between gap-2.5 text-xs bg-transparent border-0 shadow-none p-0">
                    <!-- Nhóm đầu dòng: Tìm phòng & Lọc trạng thái -->
                    <div class="flex items-center gap-2 flex-1 flex-wrap sm:flex-nowrap">
                      <!-- Ô tìm phòng -->
                      <div class="relative w-full sm:w-72 md:w-80 flex items-center">
                        <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 pointer-events-none"></i>
                        <input
                          type="text"
                          id="billing-search-input"
                          placeholder="Tìm theo số phòng, tên khách..."
                          class="h-9 sm:h-10 pl-9 pr-8 rounded-xl text-xs font-semibold border border-slate-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none w-full shadow-xs transition"
                        />
                        <button
                          type="button"
                          id="btn-billing-clear-search"
                          title="Xóa tìm kiếm (Esc)"
                          class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-slate-200 text-slate-400 hover:text-slate-600 transition cursor-pointer"
                        >
                          <i data-lucide="x" class="w-3.5 h-3.5"></i>
                        </button>
                      </div>

                      <!-- Dropdown Gom Lọc Trạng Thái -->
                      <div class="relative min-w-[140px] w-full sm:w-auto">
                        <select
                          id="billing-filter-select"
                          class="h-9 sm:h-10 px-3 rounded-xl text-xs font-bold border border-slate-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none text-slate-800 w-full shadow-xs transition cursor-pointer"
                        >
                          <option value="all">Tất cả (0)</option>
                          <option value="paid">Đã thu (0)</option>
                          <option value="unpaid">Chưa thu (0)</option>
                        </select>
                      </div>
                    </div>

                    <!-- Nhóm cuối dòng: Kỳ thu tiền & Nút Kỳ mới -->
                    <div class="flex items-center gap-2 shrink-0 flex-wrap sm:flex-nowrap justify-between sm:justify-end">
                      <!-- Ô kỳ thu tiền -->
                      <div class="relative min-w-[140px]">
                        <label class="absolute -top-2 left-2.5 px-1 bg-slate-100 text-[9px] sm:text-[10px] font-bold text-slate-600 z-10 whitespace-nowrap rounded">
                          Kỳ thu tiền
                        </label>
                        <select
                          id="billing-month-select"
                          class="h-9 sm:h-10 px-3 rounded-xl text-xs font-black border border-slate-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full shadow-xs transition cursor-pointer"
                        >
                          <option value="09/2026">Tháng 09/2026</option>
                          <option value="10/2026">Tháng 10/2026</option>
                          <option value="11/2026">Tháng 11/2026</option>
                          <option value="12/2026">Tháng 12/2026</option>
                        </select>
                      </div>

                      <!-- Nút Kỳ mới -->
                      <button
                        type="button"
                        id="btn-billing-create-next-month"
                        class="h-9 sm:h-10 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs uppercase tracking-wider transition flex items-center gap-1.5 shadow-xs cursor-pointer shrink-0 active:scale-95"
                      >
                        <i data-lucide="plus-circle" class="w-4 h-4 text-amber-400"></i>
                        <span>Kỳ mới</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </header>

            <!-- NỘI DUNG CÁC SUB-TABS CỦA TÒA NHÀ -->
            <div id="building-subtabs-content-container" class="max-w-7xl mx-auto p-3 sm:p-5 space-y-4">

              <!-- ============================================================= -->
              <!-- SUBTAB 0: TỔNG QUAN TÒA NHÀ (BUILDING OVERVIEW & STATISTICS)   -->
              <!-- ============================================================= -->
              <div id="subtab-overview" class="tab-pane active space-y-5 animate-in fade-in duration-150">
                <!-- 1. KHỐI BANNER THỐNG KÊ TOÀN DIỆN CỦA TÒA NHÀ -->
                <div class="bg-gradient-card text-white rounded-3xl p-5 sm:p-6 shadow-xl border border-slate-700/60" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;">
                  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 mb-4 border-b border-white/10">
                    <div>
                      <div class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-blue-500/20 text-blue-300 text-[10px] font-bold uppercase tracking-wider mb-1">
                        <i data-lucide="bar-chart-3" class="w-3 h-3 text-blue-400"></i>
                        <span>BÁO CÁO CHỈ SỐ HOẠT ĐỘNG CƠ SỞ</span>
                      </div>
                      <h2 class="text-base sm:text-xl font-black text-white" id="bld-overview-header-title">
                        Tổng Quan Vận Hành Cơ Sở
                      </h2>
                    </div>
                    <div class="flex items-center gap-2">
                      <button type="button" class="btn-edit-building-config px-3.5 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition flex items-center gap-1.5 border border-white/20 cursor-pointer active:scale-95">
                        <i data-lucide="sliders" class="w-3.5 h-3.5 text-blue-300"></i>
                        <span>Cài đặt cơ sở</span>
                      </button>
                    </div>
                  </div>

                  <!-- 4 Cột chỉ số chính của tòa nhà -->
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 divide-y sm:divide-y-0 sm:divide-x divide-white/15">
                    <!-- Col 1: Phòng thuê -->
                    <div class="p-2 sm:px-3 text-center sm:text-left space-y-1">
                      <div class="text-[10px] sm:text-xs uppercase font-bold tracking-wider text-slate-300 flex items-center justify-center sm:justify-start gap-1">
                        <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-400"></i>
                        <span>PHÒNG THUÊ</span>
                      </div>
                      <div class="text-xl sm:text-2xl font-black text-emerald-400" id="bld-stat-rented-rooms">
                        0 <span class="text-xs font-normal text-slate-300">/0</span>
                      </div>
                      <div class="text-[11px] text-slate-400" id="bld-overview-occupancy-rate">
                        Tỷ lệ lấp đầy: 0%
                      </div>
                    </div>

                    <!-- Col 2: Phòng trống -->
                    <div class="p-2 sm:px-3 text-center sm:text-left space-y-1">
                      <div class="text-[10px] sm:text-xs uppercase font-bold tracking-wider text-slate-300 flex items-center justify-center sm:justify-start gap-1">
                        <i data-lucide="door-open" class="w-3.5 h-3.5 text-amber-400"></i>
                        <span>PHÒNG TRỐNG</span>
                      </div>
                      <div class="text-xl sm:text-2xl font-black text-amber-400" id="bld-stat-vacant-rooms">
                        0 <span class="text-xs font-normal text-slate-300">phòng</span>
                      </div>
                      <div class="text-[11px] text-slate-400">
                        Cần tiếp tục đẩy khách
                      </div>
                    </div>

                    <!-- Col 3: Doanh thu tháng -->
                    <div class="p-2 sm:px-3 text-center sm:text-left space-y-1">
                      <div class="text-[10px] sm:text-xs uppercase font-bold tracking-wider text-slate-300 flex items-center justify-center sm:justify-start gap-1">
                        <i data-lucide="dollar-sign" class="w-3.5 h-3.5 text-blue-300"></i>
                        <span>DOANH THU THÁNG</span>
                      </div>
                      <div class="text-lg sm:text-2xl font-black text-white truncate" id="bld-stat-expected-rev">
                        0 đ
                      </div>
                      <div class="text-[11px] text-slate-400" id="bld-overview-paid-rev">
                        Đã thu: 0 đ
                      </div>
                    </div>

                    <!-- Col 4: Chưa thu (Công nợ) -->
                    <div class="p-2 sm:px-3 text-center sm:text-left space-y-1">
                      <div class="text-[10px] sm:text-xs uppercase font-bold tracking-wider text-rose-300 flex items-center justify-center sm:justify-start gap-1">
                        <i data-lucide="alert-circle" class="w-3.5 h-3.5 text-rose-400"></i>
                        <span>CHƯA THU</span>
                      </div>
                      <div class="text-lg sm:text-2xl font-black text-rose-400 truncate" id="bld-stat-debt-rev">
                        0 đ
                      </div>
                      <div class="text-[11px] text-rose-300/80">
                        Cần đôn đốc thanh toán
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 2. CÁC THẺ CHI TIẾT THỐNG KÊ TOÀN DIỆN CỦA TÒA NHÀ -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <!-- Thẻ 1: Khách thuê & Hợp đồng -->
                  <div class="bg-white rounded-3xl p-5 border border-slate-200/90 shadow-2xs space-y-3">
                    <div class="flex items-center justify-between pb-2 border-b border-slate-100">
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
                          <i data-lucide="users" class="w-4 h-4"></i>
                        </div>
                        <h3 class="text-xs font-black uppercase text-slate-800">Khách & Hợp Đồng</h3>
                      </div>
                      <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-50 text-blue-700" id="bld-overview-tenants-badge">0 khách</span>
                    </div>
                    <div class="space-y-2 text-xs">
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Tổng khách đang ở:</span>
                        <strong class="text-slate-900" id="bld-overview-total-tenants">0 người</strong>
                      </div>
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Tổng tiền cọc đang giữ:</span>
                        <strong class="text-blue-700" id="bld-overview-total-deposit">0 đ</strong>
                      </div>
                      <div class="flex justify-between items-center py-1">
                        <span class="text-slate-500">Hợp đồng sắp hết hạn (30 ngày):</span>
                        <strong class="text-amber-600" id="bld-overview-expiring-contracts">0 HĐ</strong>
                      </div>
                    </div>
                  </div>

                  <!-- Thẻ 2: Điện nước & Dịch vụ gửi xe -->
                  <div class="bg-white rounded-3xl p-5 border border-slate-200/90 shadow-2xs space-y-3">
                    <div class="flex items-center justify-between pb-2 border-b border-slate-100">
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center font-bold">
                          <i data-lucide="zap" class="w-4 h-4"></i>
                        </div>
                        <h3 class="text-xs font-black uppercase text-slate-800">Dịch Vụ & Điện Nước</h3>
                      </div>
                      <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700" id="bld-overview-kwh-badge">0 kWh</span>
                    </div>
                    <div class="space-y-2 text-xs">
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Đơn giá điện:</span>
                        <strong class="text-slate-900" id="bld-overview-elec-rate">3.500 đ/kWh</strong>
                      </div>
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Phí gửi xe:</span>
                        <strong class="text-slate-900" id="bld-overview-veh-rate">100.000 đ/xe</strong>
                      </div>
                      <div class="flex justify-between items-center py-1">
                        <span class="text-slate-500">Combo dịch vụ:</span>
                        <strong class="text-slate-900" id="bld-overview-combo-rate">150.000 đ/người</strong>
                      </div>
                    </div>
                  </div>

                  <!-- Thẻ 3: Thông tin vận hành & Tài khoản nhận tiền -->
                  <div class="bg-white rounded-3xl p-5 border border-slate-200/90 shadow-2xs space-y-3">
                    <div class="flex items-center justify-between pb-2 border-b border-slate-100">
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold">
                          <i data-lucide="credit-card" class="w-4 h-4"></i>
                        </div>
                        <h3 class="text-xs font-black uppercase text-slate-800">Thanh Toán & Quản Lý</h3>
                      </div>
                      <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700">VietQR</span>
                    </div>
                    <div class="space-y-2 text-xs">
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Quản lý cơ sở:</span>
                        <strong class="text-slate-900" id="bld-overview-manager-name">Ban Quản Lý</strong>
                      </div>
                      <div class="flex justify-between items-center py-1 border-b border-slate-50">
                        <span class="text-slate-500">Ngân hàng nhận tiền:</span>
                        <strong class="text-slate-900" id="bld-overview-bank-name">MB Bank</strong>
                      </div>
                      <div class="flex justify-between items-center py-1">
                        <span class="text-slate-500">Số tài khoản:</span>
                        <strong class="font-mono text-emerald-700 font-bold" id="bld-overview-bank-acc">0901234567</strong>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 3. HÀNG NÚT ĐIỀU HƯỚNG NHANH SANG CÁC PHÂN HỆ KHÁC CỦA TÒA NHÀ -->
                <div class="bg-white rounded-3xl p-5 border border-slate-200/90 shadow-2xs space-y-3">
                  <h3 class="text-xs font-black uppercase tracking-wider text-slate-600">
                    Thao tác nhanh cho cơ sở này
                  </h3>
                  <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
                    <button type="button" class="btn-goto-bld-subtab p-3 rounded-2xl bg-blue-50 hover:bg-blue-100 text-blue-900 border border-blue-200 text-xs font-bold transition flex items-center gap-2 cursor-pointer" data-target-subtab="rooms">
                      <i data-lucide="layout-grid" class="w-4 h-4 text-blue-600"></i>
                      <span>Xem Sơ Đồ Phòng</span>
                    </button>
                    <button type="button" class="btn-goto-bld-subtab p-3 rounded-2xl bg-amber-50 hover:bg-amber-100 text-amber-900 border border-amber-200 text-xs font-bold transition flex items-center gap-2 cursor-pointer" data-target-subtab="billing">
                      <i data-lucide="zap" class="w-4 h-4 text-amber-600"></i>
                      <span>Ghi Điện & Thu Tiền</span>
                    </button>
                    <button type="button" class="btn-goto-bld-subtab p-3 rounded-2xl bg-indigo-50 hover:bg-indigo-100 text-indigo-900 border border-indigo-200 text-xs font-bold transition flex items-center gap-2 cursor-pointer" data-target-subtab="tenants">
                      <i data-lucide="users" class="w-4 h-4 text-indigo-600"></i>
                      <span>Quản Lý Hợp Đồng</span>
                    </button>
                    <button type="button" class="btn-goto-bld-subtab p-3 rounded-2xl bg-emerald-50 hover:bg-emerald-100 text-emerald-900 border border-emerald-200 text-xs font-bold transition flex items-center gap-2 cursor-pointer" data-target-subtab="cashflow">
                      <i data-lucide="dollar-sign" class="w-4 h-4 text-emerald-600"></i>
                      <span>Sổ Quỹ Thu Chi</span>
                    </button>
                  </div>
                </div>
              </div>

              <!-- ============================================================= -->
              <!-- SUBTAB 1: SƠ ĐỒ PHÒNG (ROOM MANAGER - CHUẨN 100% REACT)        -->
              <!-- ============================================================= -->
              <div id="subtab-rooms" class="tab-pane">
                <!-- 3. DANH SÁCH PHÒNG (ROOM CARDS CONTAINER - BỎ NỀN TRẮNG VÀ VIỀN CHÍNH) -->
                <div id="rooms-cards-card" class="flex flex-col bg-transparent border-0 shadow-none">
                  <div id="rooms-cards-wrapper" class="p-0 bg-transparent border-0">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 bg-transparent" id="room-cards-container">
                      <div class="col-span-full text-center py-12 bg-white rounded-2xl border border-slate-200 p-6 space-y-2">
                        <i data-lucide="home" class="w-10 h-10 text-slate-300 mx-auto"></i>
                        <div class="text-slate-600 font-bold text-sm">Chưa có phòng nào</div>
                        <p class="text-xs text-slate-400">Bấm nút "+ Thêm phòng" phía trên để tạo phòng cho tòa nhà.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>


              <!-- ============================================================= -->
              <!-- SUBTAB 2: ĐIỆN NƯỚC & BILL (BILLING MANAGER - CHUẨN 100% REACT)-->
              <!-- ============================================================= -->
              <div id="subtab-billing" class="tab-pane space-y-4">

                <!-- 4. High-Density Bills Table (Chuẩn 100% React) -->
                <div id="billing-table-card" class="bg-white rounded-2xl shadow-xs border border-slate-200 overflow-hidden">
                  <div id="billing-table-wrapper" class="overflow-x-auto">
                    <table class="w-full min-w-[980px] text-left text-xs border-separate border-spacing-0">
                      <thead id="billing-table-thead" class="bg-white text-slate-700 uppercase font-black text-[10px] tracking-wider border-b border-slate-200 transition-shadow">
                        <tr>
                          <th class="py-2.5 px-2.5 text-center w-10 bg-white border-b border-slate-200">STT</th>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Phòng</th>
                          <th class="py-2.5 px-2 text-center min-w-[50px] bg-white border-b border-slate-200">Số ngày</th>
                          <th class="py-2.5 px-2 text-center min-w-[70px] bg-white border-b border-slate-200">Người/Xe</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Số cũ</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Số mới</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">kWh</th>
                          <th class="py-2.5 px-2 text-right bg-white border-b border-slate-200">Tiền điện</th>
                          <th class="py-2.5 px-2 text-right bg-white border-b border-slate-200">Combo+Xe</th>
                          <th class="py-2.5 px-2 text-right bg-white border-b border-slate-200">Tiền phòng</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">TỔNG THU</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Trạng thái</th>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">Hóa đơn</th>
                        </tr>
                      </thead>
                      <tbody id="billing-table-body" class="divide-y divide-slate-100">
                        <tr>
                          <td colspan="13" class="py-8 text-center text-slate-400 font-medium">Chưa có hóa đơn nào</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>


              <!-- ============================================================= -->
              <!-- SUBTAB 3: KHÁCH & HỢP ĐỒNG (TENANT MANAGER - CHUẨN 100% REACT)   -->
              <!-- ============================================================= -->
              <div id="subtab-tenants" class="tab-pane space-y-4">
                <!-- 1. Compact Summary Bar (Grid 4 cột) - Đồng bộ style với Banner Tab Sơ đồ phòng & Tổng quan -->
                <div class="bg-gradient-card text-white rounded-2xl p-2.5 sm:p-3 shadow-md border border-slate-700/60" style="background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a8a 100%) !important;">
                  <div class="grid grid-cols-4 divide-x divide-white/15 text-center text-xs">
                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-slate-300 block">
                        TỔNG CƯ DÂN
                      </span>
                      <span id="tenant-stat-residents" class="text-[11px] sm:text-[13px] font-black text-white block mt-0.5">
                        0 người
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-blue-300 block">
                        XE MÁY
                      </span>
                      <span id="tenant-stat-vehicles" class="text-[11px] sm:text-[13px] font-black text-blue-300 block mt-0.5">
                        0 xe
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-purple-300 block">
                        TỔNG CỌC GIỮ
                      </span>
                      <span id="tenant-stat-deposit" class="text-[11px] sm:text-[13px] font-black text-purple-300 block mt-0.5">
                        0 đ
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-amber-400 block">
                        SẮP HẾT HĐ (≤60D)
                      </span>
                      <span id="tenant-stat-expiring" class="text-[11px] sm:text-[13px] font-black text-amber-400 block mt-0.5">
                        0 phòng
                      </span>
                    </div>
                  </div>
                </div>

                <!-- 3. Thanh công cụ: Tìm kiếm (Đầu dòng) & Lọc thời hạn (Cuối dòng) cùng đứng trên 1 dòng -->
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-2.5 text-xs bg-transparent border-0 shadow-none p-0">
                  <!-- Ô tìm kiếm khách/phòng -->
                  <div class="relative w-full sm:w-72 md:w-80 flex items-center">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 pointer-events-none"></i>
                    <input
                      type="text"
                      id="tenant-search-input"
                      placeholder="Tìm theo số phòng, tên khách, SĐT..."
                      class="h-9 sm:h-10 pl-9 pr-8 rounded-xl text-xs font-semibold border border-slate-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none w-full shadow-xs transition"
                    />
                    <button
                      type="button"
                      id="btn-tenant-clear-search"
                      title="Xóa tìm kiếm (Esc)"
                      class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-slate-200 text-slate-400 hover:text-slate-600 transition cursor-pointer"
                    >
                      <i data-lucide="x" class="w-3.5 h-3.5"></i>
                    </button>
                  </div>

                  <!-- Lọc thời hạn -->
                  <div class="flex items-center gap-1.5 flex-wrap text-xs">
                    <span class="text-slate-500 font-bold text-[10px] uppercase">LỌC THỜI HẠN:</span>
                    <button
                      type="button"
                      id="btn-tenant-filter-all"
                      data-filter="all"
                      class="btn-tenant-filter px-2.5 py-1.5 rounded-xl font-black text-[10px] uppercase tracking-wider transition bg-slate-900 text-white cursor-pointer"
                    >
                      Tất cả (<span id="tenant-count-all">0</span>)
                    </button>
                    <button
                      type="button"
                      id="btn-tenant-filter-30"
                      data-filter="30"
                      class="btn-tenant-filter px-2.5 py-1.5 rounded-xl font-black text-[10px] uppercase tracking-wider transition bg-white text-slate-700 border border-slate-200 cursor-pointer"
                    >
                      Sắp hết ≤ 30 ngày (<span id="tenant-count-30">0</span>)
                    </button>
                    <button
                      type="button"
                      id="btn-tenant-filter-60"
                      data-filter="60"
                      class="btn-tenant-filter px-2.5 py-1.5 rounded-xl font-black text-[10px] uppercase tracking-wider transition bg-white text-slate-700 border border-slate-200 cursor-pointer"
                    >
                      31 - 60 ngày (<span id="tenant-count-60">0</span>)
                    </button>
                  </div>
                </div>

                <!-- 4. High-Density Tenants Table -->
                <div id="tenant-table-card" class="bg-white rounded-2xl shadow-xs border border-slate-200 overflow-hidden">
                  <div id="tenant-table-wrapper" class="overflow-x-auto">
                    <table class="w-full min-w-[880px] sm:min-w-full text-left text-xs border-separate border-spacing-0">
                      <thead id="tenant-table-thead" class="bg-white text-slate-700 uppercase font-black text-[10px] tracking-wider border-b border-slate-200">
                        <tr>
                          <th class="py-2.5 px-2.5 text-center w-10 bg-white border-b border-slate-200">STT</th>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Phòng</th>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Khách thuê</th>
                          <th class="py-2.5 px-2 bg-white border-b border-slate-200">Số ĐT</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Người/Xe</th>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Hạn Hợp Đồng</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Tình trạng</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">Tiền cọc</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">Giá thuê</th>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">Thao tác</th>
                        </tr>
                      </thead>
                      <tbody id="tenant-table-body" class="divide-y divide-slate-100">
                        <tr>
                          <td colspan="10" class="py-8 text-center text-slate-400 font-medium">Chưa có khách thuê nào</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>


              <!-- ============================================================= -->
              <!-- SUBTAB 4: SỔ THU - CHI (TRANSACTION MANAGER - CHUẨN 100% REACT)-->
              <!-- ============================================================= -->
              <div id="subtab-cashflow" class="tab-pane space-y-4">
                <!-- 1. Header & Summary: Banner Tổng Thu Chi (Bên Trái) & Khối Nút Thao Tác (Bên Phải) -->
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-white p-3 sm:p-4 rounded-2xl shadow-xs border border-slate-200">
                  <!-- Bên trái: Banner Tổng Thu Chi 3 cột High-Density -->
                  <div class="bg-gradient-card text-white rounded-2xl p-2.5 sm:p-3 shadow-md border border-slate-700/60 flex-1 max-w-xl" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;">
                    <div class="grid grid-cols-3 divide-x divide-white/20 text-center text-xs">
                      <div class="px-2">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-emerald-400 block">
                          TỔNG THU
                        </span>
                        <span id="tx-stat-income" class="text-[13px] sm:text-[15px] font-black text-white block mt-0.5">
                          0 đ
                        </span>
                      </div>

                      <div class="px-2">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-rose-400 block">
                          TỔNG CHI
                        </span>
                        <span id="tx-stat-expense" class="text-[13px] sm:text-[15px] font-black text-rose-300 block mt-0.5">
                          0 đ
                        </span>
                      </div>

                      <div class="px-2">
                        <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-amber-400 block">
                          LỢI NHUẬN RÒNG
                        </span>
                        <span id="tx-stat-profit" class="text-[13px] sm:text-[15px] font-black text-emerald-300 block mt-0.5">
                          0 đ
                        </span>
                      </div>
                    </div>
                  </div>

                  <!-- Bên phải: Khối nút thao tác thu chi + Nút chuyển chế độ xem Tổng quan / Chi tiết -->
                  <div class="flex items-center gap-2 flex-wrap shrink-0">
                    <!-- Nút chuyển giữa Chế độ xem Tổng quan và Chi tiết -->
                    <button
                      type="button"
                      id="btn-toggle-cashflow-view"
                      class="h-10 px-3.5 rounded-xl bg-white hover:bg-slate-50 text-slate-800 border border-slate-300 font-bold text-xs transition shadow-2xs flex items-center gap-1.5 cursor-pointer shrink-0"
                      title="Chuyển đổi giữa Chế độ xem Tổng quan theo nhóm và Chi tiết từng giao dịch"
                    >
                      <i data-lucide="layout-grid" id="icon-toggle-cashflow-view" class="w-4 h-4 text-purple-600"></i>
                      <span id="text-toggle-cashflow-view">Xem tổng quan</span>
                    </button>

                    <!-- Nút Danh mục thu chi -->
                    <button
                      type="button"
                      id="btn-open-tx-categories-modal"
                      class="h-10 px-3.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 hover:text-slate-900 border border-slate-300 font-bold text-xs transition shadow-2xs flex items-center gap-1.5 cursor-pointer shrink-0"
                      title="Cấu hình danh mục và hạng mục thu chi"
                    >
                      <i data-lucide="folder-tree" class="w-4 h-4 text-blue-600"></i>
                      <span>Danh mục thu chi</span>
                    </button>

                    <!-- Nút Thêm thu / chi -->
                    <button
                      type="button"
                      id="btn-open-add-transaction"
                      class="h-10 px-3.5 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-1.5 cursor-pointer shrink-0"
                    >
                      <i data-lucide="plus" class="w-4 h-4"></i>
                      <span>Thêm thu / chi</span>
                    </button>
                  </div>
                </div>

                <!-- 4. Filters -->
                <div class="flex flex-wrap items-center justify-between gap-2 text-xs">
                  <div class="flex items-center gap-1.5 flex-wrap">
                    <span class="text-slate-500 font-bold text-[10px] uppercase">PHÂN LOẠI:</span>
                    <button
                      type="button"
                      id="btn-tx-filter-all"
                      data-filter="all"
                      class="btn-tx-type-filter px-2.5 py-1 rounded-lg font-black text-[10px] uppercase tracking-wider transition bg-gradient-card text-white shadow-xs cursor-pointer"
                    >
                      Tất cả (<span id="tx-count-all">0</span>)
                    </button>
                    <button
                      type="button"
                      id="btn-tx-filter-income"
                      data-filter="thu"
                      class="btn-tx-type-filter px-2.5 py-1 rounded-lg font-black text-[10px] uppercase tracking-wider transition bg-white text-blue-700 border border-blue-200 cursor-pointer"
                    >
                      Khoản Thu
                    </button>
                    <button
                      type="button"
                      id="btn-tx-filter-expense"
                      data-filter="chi"
                      class="btn-tx-type-filter px-2.5 py-1 rounded-lg font-black text-[10px] uppercase tracking-wider transition bg-white text-rose-700 border border-rose-200 cursor-pointer"
                    >
                      Khoản Chi
                    </button>
                  </div>

                  <div class="flex items-center gap-2 flex-wrap sm:flex-nowrap">
                    <!-- Ô chọn Kỳ (tháng) thu chi -->
                    <div class="relative min-w-[135px]">
                      <label class="absolute -top-1.5 left-2 bg-blue-50 px-1 text-[8px] font-bold text-blue-700 rounded-lg z-20 whitespace-nowrap">
                        KỲ (THÁNG)
                      </label>
                      <select
                        id="tx-month-select"
                        class="h-8 px-2.5 rounded-lg text-xs font-black border border-blue-300 bg-white focus:border-blue-500 outline-none w-full cursor-pointer shadow-2xs"
                      >
                        <option value="all">Tất cả các kỳ</option>
                        <option value="09/2026" selected>Tháng 09/2026</option>
                        <option value="10/2026">Tháng 10/2026</option>
                        <option value="11/2026">Tháng 11/2026</option>
                        <option value="12/2026">Tháng 12/2026</option>
                      </select>
                    </div>

                    <!-- Category filter with floating micro-label -->
                    <div class="relative min-w-[135px]">
                      <label class="absolute -top-1.5 left-2 bg-amber-50 px-1 text-[8px] font-bold text-amber-700 rounded-lg z-20 whitespace-nowrap">
                        LỌC NHÓM
                      </label>
                      <select
                        id="tx-category-select"
                        class="h-8 px-2.5 rounded-lg text-xs font-bold border border-amber-300 bg-white focus:border-amber-500 outline-none w-full cursor-pointer shadow-2xs"
                      >
                        <option value="all">Tất cả nhóm</option>
                        <option value="tien_nha">Tiền thuê</option>
                        <option value="tien_coc">Tiền cọc</option>
                        <option value="nha_cung_cap">Nhà cung cấp</option>
                        <option value="nhan_su">Nhân sự tòa nhà</option>
                        <option value="chinh_quyen">Chính quyền</option>
                        <option value="bao_tri_dinh_ky">Bảo trì định kỳ</option>
                        <option value="bao_tri_van_hanh">Bảo trì vận hành</option>
                        <option value="sale_moi_gioi">Sale / Môi giới</option>
                      </select>
                    </div>
                  </div>
                </div>

                <!-- 5. High-Density Transactions Table -->
                <div id="cashflow-table-card" class="bg-white rounded-2xl shadow-xs border border-slate-200 overflow-hidden flex flex-col">
                  <div id="cashflow-table-wrapper" class="overflow-x-auto">
                    <table class="w-full min-w-[760px] text-left text-xs border-separate border-spacing-0">
                      <thead id="cashflow-table-thead" class="bg-white text-slate-700 uppercase font-black text-[10px] tracking-wider border-b border-slate-200 transition-shadow">
                        <tr>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Ngày</th>
                          <th class="py-2.5 px-2 bg-white border-b border-slate-200">Phân loại</th>
                          <th class="py-2.5 px-2 bg-white border-b border-slate-200">Mục</th>
                          <th class="py-2.5 px-3 bg-white border-b border-slate-200">Nội dung chi tiết</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">Khoản Thu</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">Khoản Chi</th>
                          <th class="py-2.5 px-2 text-center bg-white border-b border-slate-200">Xóa</th>
                        </tr>
                      </thead>
                      <tbody id="transaction-table-body" class="divide-y divide-slate-100">
                        <tr>
                          <td colspan="7" class="py-8 text-center text-slate-400 font-medium">Chưa có giao dịch thu chi nào</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- Chân bảng với dòng tổng cộng và trạng thái danh sách trên cùng 1 hàng -->
                  <div class="px-3 sm:px-4 py-2 bg-slate-50 border-t border-slate-200 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
                    <span class="font-semibold text-[11px] text-slate-500 flex items-center gap-1 shrink-0">
                      <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-600"></i>
                      <span>Đã hiển thị toàn bộ danh sách thu chi</span>
                    </span>
                    <div class="flex items-center gap-2.5 sm:gap-4 text-xs font-bold shrink-0">
                      <span class="text-slate-600 text-[10px] sm:text-[11px] uppercase tracking-wider font-black">TỔNG CỘNG:</span>
                      <span class="flex items-center gap-1 text-emerald-700">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">Thu:</span>
                        <span id="tx-foot-total-income" class="font-black text-xs sm:text-sm">0 đ</span>
                      </span>
                      <span class="flex items-center gap-1 text-rose-600">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">Chi:</span>
                        <span id="tx-foot-total-expense" class="font-black text-xs sm:text-sm">0 đ</span>
                      </span>
                    </div>
                  </div>
                </div>

                <!-- CHẾ ĐỘ XEM TỔNG QUAN THEO NHÓM & HẠNG MỤC (BỐ CỤC LẤY TỪ MODAL DANH MỤC THU CHI) -->
                <div id="cashflow-overview-card" class="hidden bg-white rounded-2xl shadow-xs border border-slate-300 overflow-hidden">
                  <div class="p-3.5 bg-slate-100/90 border-b border-slate-300 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <div class="w-6 h-6 rounded-lg bg-purple-100 text-purple-700 flex items-center justify-center font-bold">
                        <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
                      </div>
                      <span class="text-xs font-black uppercase text-slate-900 tracking-wider">
                        BẢNG TỔNG HỢP DÒNG TIỀN THEO NHÓM & HẠNG MỤC
                      </span>
                    </div>
                    <span id="cashflow-overview-summary-text" class="text-xs font-bold text-slate-600">
                      0 nhóm • 0 đ
                    </span>
                  </div>
                  <div id="cashflow-overview-wrapper" class="overflow-x-auto overflow-y-auto">
                    <div id="cashflow-overview-container">
                      <!-- Rendered by renderCashflowOverview() -->
                    </div>
                  </div>
                </div>
              </div>


              <!-- ============================================================= -->
              <!-- SUBTAB 5: LỢI NHUẬN & CỔ ĐÔNG (INVESTOR REPORT - CHUẨN 100% REACT)-->
              <!-- ============================================================= -->
              <div id="subtab-investor" class="tab-pane space-y-4">
                <!-- 1. Top Summary Bar (High-Density Fintech - Chuẩn 100% React bg-gradient-card) -->
                <div class="bg-gradient-card text-white rounded-2xl p-2.5 sm:p-3 shadow-md border border-slate-700/60" style="background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;">
                  <div class="grid grid-cols-4 divide-x divide-white/20 text-center text-xs">
                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-slate-300 block">
                        TỔNG VỐN GÓP
                      </span>
                      <span id="investor-stat-capital" class="text-[11px] sm:text-[13px] font-black text-white block mt-0.5 truncate">
                        1.000.000.000 đ
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span id="investor-stat-net-profit-title" class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-emerald-400 block">
                        LỢI NHUẬN THÁNG
                      </span>
                      <span id="investor-stat-net-profit" class="text-[11px] sm:text-[13px] font-black text-emerald-300 block mt-0.5 truncate">
                        0 đ
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-amber-400 block">
                        TỶ SUẤT LN/VỐN
                      </span>
                      <span class="text-[12px] sm:text-[14px] font-black text-amber-400 block mt-0.5 flex items-center justify-center gap-0.5">
                        <span id="investor-stat-roi">0%</span>
                        <i data-lucide="arrow-up-right" class="w-3.5 h-3.5 text-emerald-400"></i>
                      </span>
                    </div>

                    <div class="px-1.5">
                      <span class="text-[8px] sm:text-[9px] font-black uppercase tracking-wider text-slate-300 block">
                        CỔ ĐÔNG
                      </span>
                      <span id="investor-stat-count" class="text-[12px] sm:text-[14px] font-black text-white block mt-0.5">
                        2 người
                      </span>
                    </div>
                  </div>
                </div>

                <!-- 2. Header Toolbar (Chuẩn 100% React InvestorReport.tsx) -->
                <div class="bg-white p-3 sm:p-4 rounded-2xl shadow-xs border border-slate-200 flex flex-col md:flex-row md:items-center justify-between gap-3">
                  <div>
                    <div class="flex items-center gap-1.5">
                      <span class="text-xs sm:text-sm font-black uppercase tracking-wide text-slate-900 flex items-center gap-1.5">
                        <i data-lucide="coins" class="w-4 h-4 text-amber-600"></i>
                        <span>BÁO CÁO LỢI NHUẬN & PHÂN CHIA CỔ ĐÔNG</span>
                      </span>
                      <!-- PopoverInfo Chuẩn React -->
                      <div class="inline-flex items-center relative" id="investor-popover-container">
                        <button
                          type="button"
                          id="btn-investor-popover-toggle"
                          class="w-4 h-4 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700 hover:text-blue-900 flex items-center justify-center text-[10px] font-bold cursor-pointer transition-colors focus:outline-none shrink-0"
                          title="Bấm để xem chú thích"
                          aria-label="Thông tin chú thích"
                        >
                          i
                        </button>
                        <div
                          id="investor-popover-dropdown"
                          class="hidden fixed md:absolute top-14 md:top-6 left-2 right-2 md:left-auto md:-right-6 md:w-80 max-w-sm sm:max-w-md mx-auto z-80 bg-white border border-blue-200 shadow-2xl rounded-2xl p-3.5 animate-in fade-in zoom-in-95 duration-150 text-slate-800 ring-1 ring-blue-500/10"
                        >
                          <div class="flex items-center justify-between pb-1.5 border-b border-blue-100 mb-2">
                            <span class="text-[10px] sm:text-[11px] font-black uppercase text-blue-800 tracking-wider flex items-center gap-1.5">
                              <span>💡</span>
                              <span>Cơ chế chia lợi nhuận cổ phần</span>
                            </span>
                            <button
                              type="button"
                              id="btn-close-investor-popover"
                              class="text-blue-700 hover:text-blue-900 text-xs font-bold p-0.5 leading-none cursor-pointer"
                            >
                              ✕
                            </button>
                          </div>
                          <div class="text-xs text-slate-700 leading-relaxed font-normal">
                            Lợi nhuận ròng được phân bổ tự động dựa trên tỷ lệ % cổ phần của mỗi nhà đầu tư. Tỷ suất LN/Vốn thể hiện mức sinh lời của dự án trong tháng.
                          </div>
                        </div>
                      </div>
                    </div>
                    <p id="investor-subtitle" class="text-[10px] sm:text-xs text-slate-500 mt-0.5">
                      Tổng vốn góp 1.000.000.000đ • Chia đều cho Anh Tý (50%) & Anh Tuấn (50%)
                    </p>
                  </div>

                  <div class="flex items-center gap-2 flex-wrap sm:flex-nowrap">
                    <!-- Ô chọn Kỳ (tháng) báo cáo cổ đông -->
                    <div class="relative min-w-[135px]">
                      <label class="absolute -top-1.5 left-2 bg-amber-50 px-1 text-[8px] font-bold text-amber-800 rounded-lg z-20 whitespace-nowrap">
                        KỲ (THÁNG)
                      </label>
                      <select
                        id="investor-month-select"
                        class="h-10 px-2.5 rounded-lg text-xs font-black border border-amber-300 bg-white focus:border-amber-500 outline-none w-full cursor-pointer shadow-2xs"
                      >
                        <option value="all">Tất cả các kỳ</option>
                        <option value="09/2026" selected>Tháng 09/2026</option>
                        <option value="10/2026">Tháng 10/2026</option>
                        <option value="11/2026">Tháng 11/2026</option>
                        <option value="12/2026">Tháng 12/2026</option>
                      </select>
                    </div>

                    <button
                      type="button"
                      id="btn-copy-investor-zalo"
                      class="h-10 px-3 rounded-lg bg-gradient-sunsilk hover:opacity-95 text-white shadow-xs text-xs font-black uppercase transition flex items-center gap-1 cursor-pointer shrink-0"
                    >
                      <i data-lucide="share-2" id="icon-copy-investor" class="w-3.5 h-3.5"></i>
                      <span id="text-copy-investor">Báo cáo Zalo</span>
                    </button>

                    <button
                      type="button"
                      id="btn-open-add-shareholder"
                      class="h-10 px-3.5 rounded-lg bg-gradient-sunsilk hover:opacity-95 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-1.5 cursor-pointer shrink-0"
                      title="Cập nhật cơ cấu cổ đông góp vốn của cơ sở"
                    >
                      <i data-lucide="users" class="w-4 h-4"></i>
                      <span>Cập nhật cổ đông</span>
                    </button>
                  </div>
                </div>

                <!-- 3. High-Density Shareholders Table (Chuẩn 100% React InvestorReport.tsx) -->
                <div id="investor-table-card" class="bg-white rounded-2xl shadow-xs border border-slate-200 overflow-hidden flex flex-col">
                  <div id="investor-table-wrapper" class="overflow-x-auto">
                    <table class="w-full min-w-[760px] text-left text-xs border-separate border-spacing-0">
                      <thead id="investor-table-thead" class="bg-white text-slate-700 uppercase font-black text-[10px] tracking-wider border-b border-slate-200 transition-shadow">
                        <tr>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">STT</th>
                          <th class="py-2.5 px-4 bg-white border-b border-slate-200">Nhà Đầu Tư (NĐT)</th>
                          <th class="py-2.5 px-3 text-right bg-white border-b border-slate-200">Vốn Góp</th>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">Cổ Phần</th>
                          <th class="py-2.5 px-4 text-right bg-white border-b border-slate-200">LỢI NHUẬN NHẬN (VNĐ)</th>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">Tỷ suất</th>
                          <th class="py-2.5 px-3 text-center bg-white border-b border-slate-200">Thao tác</th>
                        </tr>
                      </thead>
                      <tbody id="shareholders-table-body" class="divide-y divide-slate-100">
                        <!-- Dữ liệu cổ đông được render từ JavaScript -->
                      </tbody>
                    </table>
                  </div>
                  <!-- Chân bảng với dòng tổng cộng và trạng thái danh sách trên cùng 1 hàng -->
                  <div class="px-3 sm:px-4 py-2 bg-slate-50 border-t border-slate-200 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
                    <span class="font-semibold text-[11px] text-slate-500 flex items-center gap-1 shrink-0">
                      <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-emerald-600"></i>
                      <span>Đã hiển thị toàn bộ danh sách cổ đông</span>
                    </span>
                    <div class="flex items-center gap-2.5 sm:gap-4 text-xs font-bold shrink-0 flex-wrap">
                      <span class="text-slate-600 text-[10px] sm:text-[11px] uppercase tracking-wider font-black">TỔNG CỘNG:</span>
                      <span class="flex items-center gap-1 text-slate-800">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">Vốn:</span>
                        <span id="investor-foot-capital" class="font-black text-xs sm:text-sm text-slate-900">0 đ</span>
                      </span>
                      <span class="flex items-center gap-1 text-emerald-700">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">LN:</span>
                        <span id="investor-foot-profit" class="font-black text-xs sm:text-sm">0 đ</span>
                      </span>
                      <span class="flex items-center gap-1 text-emerald-700">
                        <span class="text-[10px] text-slate-400 font-bold uppercase">Tỷ suất:</span>
                        <span id="investor-foot-roi" class="font-black text-xs sm:text-sm">0%</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </section>


        <!-- ================================================================= -->
        <!-- PHÂN HỆ 3: KẾ TOÁN & TÀI CHÍNH (FINANCE MODULE - CHUẨN 100% REACT) -->
        <!-- ================================================================= -->
        <section id="module-finance" class="module-content-pane p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
          <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-bold mb-1 border border-emerald-200">
                <i data-lucide="dollar-sign" class="w-3.5 h-3.5"></i>
                <span>Phân Hệ Kế Toán & Quản Trị Tài Chính Doanh Nghiệp</span>
              </div>
              <h1 class="text-xl sm:text-2xl font-black text-slate-900">
                Sổ Quỹ Dòng Tiền & Báo Cáo Tài Chính Toàn Chuỗi
              </h1>
              <p class="text-xs text-slate-500">
                Hợp nhất doanh thu tiền phòng, chi phí nhà cung cấp và phân chia lợi nhuận cổ đông
              </p>
            </div>

            <div class="flex flex-wrap items-center gap-2">
              <button
                type="button"
                id="btn-finance-add-tx"
                class="px-4 py-2.5 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white font-black text-xs uppercase tracking-wider flex items-center gap-1.5 transition cursor-pointer shadow-xs"
              >
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Ghi Phiếu Thu / Chi</span>
              </button>
              <button
                type="button"
                id="btn-finance-export-json"
                class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs flex items-center gap-2 transition cursor-pointer"
              >
                <i data-lucide="download" class="w-4 h-4"></i>
                <span>Xuất Sổ Quỹ JSON</span>
              </button>
            </div>
          </div>

          <!-- 3 Thẻ Dòng Tiền Tổng Hợp -->
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-emerald-500 text-white rounded-2xl p-5 shadow-xs space-y-2" style="background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;">
              <div class="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-emerald-100">
                <span>Tổng Tiền Vào (Doanh Thu)</span>
                <i data-lucide="trending-up" class="w-4 h-4"></i>
              </div>
              <div class="text-2xl sm:text-3xl font-black" id="fin-kpi-income">0 đ</div>
              <div class="text-[11px] text-emerald-100">Bao gồm tiền phòng thực thu, cọc & thu khác</div>
            </div>

            <div class="bg-rose-500 text-white rounded-2xl p-5 shadow-xs space-y-2" style="background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%) !important;">
              <div class="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-rose-100">
                <span>Tổng Tiền Ra (Chi Phí)</span>
                <i data-lucide="trending-down" class="w-4 h-4"></i>
              </div>
              <div class="text-2xl sm:text-3xl font-black" id="fin-kpi-expense">0 đ</div>
              <div class="text-[11px] text-rose-100">Bao gồm điện, nước, lương, bảo trì, hoa hồng</div>
            </div>

            <div class="bg-blue-600 text-white rounded-2xl p-5 shadow-xs space-y-2" style="background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;">
              <div class="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-blue-100">
                <span>Dòng Tiền Thặng Dư (Ròng)</span>
                <i data-lucide="dollar-sign" class="w-4 h-4"></i>
              </div>
              <div class="text-2xl sm:text-3xl font-black" id="fin-kpi-net">0 đ</div>
              <div class="text-[11px] text-blue-100">Lợi nhuận sẵn sàng chia cho cổ đông</div>
            </div>
          </div>

          <!-- Khu vực Tài Khoản Doanh Nghiệp & Cổ Đông -->
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
              <h2 class="text-xs font-black uppercase tracking-wider text-slate-800 flex items-center gap-2">
                <i data-lucide="credit-card" class="w-4 h-4 text-blue-600"></i>
                <span>Tài Khoản Nhận Tiền Doanh Nghiệp</span>
              </h2>

              <div class="rounded-2xl bg-gradient-to-br from-slate-900 to-blue-950 text-white p-5 space-y-4 shadow-md" style="background: linear-gradient(135deg, #0f172a 0%, #172554 100%) !important;">
                <div class="flex items-center justify-between text-xs text-slate-300">
                  <span class="font-bold" id="fin-bank-name">MB Bank</span>
                  <span class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full font-mono">
                    Tài Khoản Chính
                  </span>
                </div>

                <div class="font-mono text-xl sm:text-2xl font-black tracking-widest text-amber-300" id="fin-bank-account">
                  0901234567
                </div>

                <div class="flex justify-between items-end text-xs">
                  <div>
                    <div class="text-[10px] text-slate-400 uppercase">Chủ Tài Khoản</div>
                    <div class="font-bold uppercase tracking-wider" id="fin-bank-owner">CONG TY QUAN LY TOA NHA</div>
                  </div>
                  <div class="text-right">
                    <span class="text-[10px] text-emerald-400 font-bold">Auto VietQR</span>
                  </div>
                </div>
              </div>

              <div class="p-3 rounded-xl bg-slate-50 text-xs text-slate-600 space-y-1 border border-slate-200">
                <div class="font-bold text-slate-700">Quy tắc kế toán:</div>
                <p class="text-[11px] text-slate-500">
                  Mọi khoản thanh toán từ khách thuê qua mã VietQR được tự động đối soát vào hóa đơn phòng và ghi nhận vào sổ cái dòng tiền.
                </p>
              </div>
            </div>

            <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
              <div class="flex items-center justify-between">
                <h2 class="text-xs font-black uppercase tracking-wider text-slate-800 flex items-center gap-2">
                  <i data-lucide="user-check" class="w-4 h-4 text-purple-600"></i>
                  <span>Phân Bổ Cổ Đông & Dự Kiến Lợi Nhuận Tháng</span>
                </h2>
                <span class="text-[11px] font-bold text-slate-500">
                  Tổng thặng dư: <span class="text-emerald-600 font-black" id="fin-sh-net">0 đ</span>
                </span>
              </div>

              <div class="divide-y divide-slate-100" id="fin-shareholders-list">
                <!-- Render động -->
              </div>
            </div>
          </div>

          <!-- Sổ Cái Chi Tiết Các Khoản Thu Chi -->
          <div class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-100">
              <div>
                <h2 class="text-xs font-black uppercase tracking-wider text-slate-800">
                  Sổ Quỹ Thu Chi Hợp Nhất (General Ledger)
                </h2>
                <p class="text-[11px] text-slate-500" id="fin-ledger-subtitle">
                  Hiển thị giao dịch sổ cái
                </p>
              </div>

              <div class="flex flex-wrap items-center gap-2">
                <div class="relative">
                  <i data-lucide="search" class="w-3.5 h-3.5 absolute left-2.5 top-2.5 text-slate-400"></i>
                  <input
                    type="text"
                    id="fin-search-input"
                    placeholder="Tìm nội dung, danh mục..."
                    class="pl-8 pr-3 py-1.5 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-blue-400 w-48"
                  />
                </div>

                <div class="inline-flex rounded-xl bg-slate-100 p-0.5 text-xs font-bold">
                  <button type="button" data-fin-filter="all" class="btn-fin-filter px-3 py-1 rounded-lg transition bg-white text-slate-900 shadow-xs cursor-pointer">
                    Tất cả
                  </button>
                  <button type="button" data-fin-filter="thu" class="btn-fin-filter px-3 py-1 rounded-lg transition text-slate-500 cursor-pointer">
                    Khoản Thu
                  </button>
                  <button type="button" data-fin-filter="chi" class="btn-fin-filter px-3 py-1 rounded-lg transition text-slate-500 cursor-pointer">
                    Khoản Chi
                  </button>
                </div>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 text-slate-500 uppercase font-black text-[10px] tracking-wider border-b border-slate-100">
                  <tr>
                    <th class="py-2.5 px-3">Ngày</th>
                    <th class="py-2.5 px-3">Cơ sở</th>
                    <th class="py-2.5 px-2 text-center">Loại</th>
                    <th class="py-2.5 px-3">Danh mục</th>
                    <th class="py-2.5 px-3">Nội dung diễn giải</th>
                    <th class="py-2.5 px-3 text-right">Số tiền</th>
                  </tr>
                </thead>
                <tbody id="fin-ledger-tbody" class="divide-y divide-slate-100">
                  <!-- Render động -->
                </tbody>
              </table>
            </div>
          </div>
        </section>


        <!-- ================================================================= -->
        <!-- PHÂN HỆ 4: NHÂN SỰ & TIỀN LƯƠNG (HR MODULE - CHUẨN 100% REACT)     -->
        <!-- ================================================================= -->
        <section id="module-hr" class="module-content-pane w-full relative">
          <!-- 🧭 Thanh điều hướng 4 Tab cố định gắn liền bên dưới Header (Chuẩn 100% HRModule.tsx) -->
          <div class="sticky top-0 z-30 bg-white/95 backdrop-blur-md border-b border-slate-200/80 px-4 sm:px-6 py-2 shadow-2xs">
            <div class="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center justify-between gap-2.5">
              <div class="flex items-center gap-2 min-w-0">
                <div class="w-7 h-7 rounded-lg bg-purple-100 text-purple-700 flex items-center justify-center shrink-0 font-bold">
                  <i data-lucide="users" class="w-4 h-4"></i>
                </div>
                <span class="font-bold text-slate-900 text-xs sm:text-sm tracking-tight truncate">
                  Quản Trị Tổ Chức & Nhân Sự
                </span>
              </div>

              <!-- Tab Buttons thu nhỏ chiều cao -->
              <div class="flex items-center gap-1 bg-slate-100 p-1 rounded-xl overflow-x-auto shrink-0 border border-slate-200/80" id="hr-subtabs-nav">
                <button
                  type="button"
                  data-hrtab="overview"
                  class="hr-subtab-btn px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer flex items-center gap-1.5 whitespace-nowrap bg-white text-purple-700 shadow-2xs"
                >
                  <i data-lucide="layout-dashboard" class="w-3.5 h-3.5 text-purple-600"></i>
                  <span>Trang Chủ Nhân Sự</span>
                </button>

                <button
                  type="button"
                  data-hrtab="departments"
                  class="hr-subtab-btn px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer flex items-center gap-1.5 whitespace-nowrap text-slate-600 hover:text-slate-900"
                >
                  <i data-lucide="layers" class="w-3.5 h-3.5 text-blue-600"></i>
                  <span>Phòng Ban & Chức Vụ</span>
                  <span id="hr-nav-dept-count" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-200 text-slate-700 font-mono">
                    5
                  </span>
                </button>

                <button
                  type="button"
                  data-hrtab="staff"
                  class="hr-subtab-btn px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer flex items-center gap-1.5 whitespace-nowrap text-slate-600 hover:text-slate-900"
                >
                  <i data-lucide="users" class="w-3.5 h-3.5 text-indigo-600"></i>
                  <span>Nhân Sự</span>
                  <span id="hr-nav-staff-count" class="px-1.5 py-0.2 rounded text-[10px] bg-indigo-100 text-indigo-700 font-mono">
                    0
                  </span>
                </button>

                <button
                  type="button"
                  data-hrtab="assignment"
                  class="hr-subtab-btn px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer flex items-center gap-1.5 whitespace-nowrap text-slate-600 hover:text-slate-900"
                >
                  <i data-lucide="building-2" class="w-3.5 h-3.5 text-emerald-600"></i>
                  <span>Phân Công</span>
                  <span id="hr-nav-bld-count" class="px-1.5 py-0.2 rounded text-[10px] bg-emerald-100 text-emerald-700 font-mono">
                    1
                  </span>
                </button>
              </div>
            </div>
          </div>

          <div class="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
            <!-- HR TAB 1: TỔNG QUAN -->
            <div id="hrtab-overview" class="tab-pane active space-y-4">
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
                  <span class="text-xs font-bold text-slate-400 uppercase">Tổng Nhân Sự Công Ty</span>
                  <div class="text-2xl font-black text-slate-900 mt-1" id="hr-kpi-total-staff">0 nhân sự</div>
                </div>
                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
                  <span class="text-xs font-bold text-slate-400 uppercase">Số Phòng Ban Trực Thuộc</span>
                  <div class="text-2xl font-black text-blue-600 mt-1" id="hr-kpi-total-depts">5 phòng ban</div>
                </div>
                <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
                  <span class="text-xs font-bold text-slate-400 uppercase">Vị Trí Chức Danh</span>
                  <div class="text-2xl font-black text-emerald-600 mt-1" id="hr-kpi-total-positions">8 chức vụ</div>
                </div>
              </div>
              <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-xs space-y-3">
                <h3 class="font-black text-sm text-slate-900">Sơ Đồ Phân Bổ Nhân Sự Theo Phòng Ban</h3>
                <div id="hr-overview-dept-cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-xs">
                  <!-- Render động -->
                </div>
              </div>
            </div>

            <!-- ========================================================================= -->
            <!-- 🏢 HR TAB 2: PHÒNG BAN & CHỨC VỤ (CHUẨN 100% REACT HRModule.tsx)          -->
            <!-- ========================================================================= -->
            <div id="hrtab-departments" class="tab-pane space-y-6">
              <!-- Header Tab -->
              <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-xs font-bold mb-1 border border-blue-200">
                    <i data-lucide="layers" class="w-3.5 h-3.5"></i>
                    <span>Cơ Cấu Tổ Chức: Phòng Ban & Chức Vụ Định Biên</span>
                  </div>
                  <h2 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight">
                    Danh Mục Phòng Ban & Vị Trí Chức Vụ
                  </h2>
                  <p class="text-xs text-slate-500">
                    Quản lý các phòng ban trong công ty và thiết lập các vị trí chức danh công việc trực thuộc từng bộ phận dạng bảng danh sách
                  </p>
                </div>

                <!-- 2 Nút hành động thêm mới -->
                <div class="flex items-center gap-2 shrink-0">
                  <button
                    type="button"
                    id="btn-hr-open-add-dept"
                    class="px-4 py-2.5 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-1.5 cursor-pointer"
                  >
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>+ Thêm Phòng Ban</span>
                  </button>

                  <button
                    type="button"
                    id="btn-hr-open-add-pos"
                    class="px-4 py-2.5 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-1.5 cursor-pointer"
                  >
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>+ Thêm Chức Vụ</span>
                  </button>
                </div>
              </div>

              <!-- 📋 BẢNG DANH SÁCH CÁC PHÒNG BAN & CHỨC VỤ TRỰC THUỘC (SƠ ĐỒ CÂY CHUẨN 100% REACT) -->
              <div class="bg-white rounded-2xl border border-slate-200/90 overflow-hidden shadow-2xs">
                <div class="overflow-x-auto">
                  <table class="w-full text-left border-collapse text-xs">
                    <thead>
                      <tr class="bg-slate-50/90 border-b border-slate-200 text-slate-600 font-bold uppercase text-[10px] tracking-wider">
                        <th class="py-2.5 px-3 w-12 text-center">STT</th>
                        <th class="py-2.5 px-3 w-24 text-center">Mã</th>
                        <th class="py-2.5 px-4 text-left">Phòng Ban</th>
                        <th class="py-2.5 px-4 text-center w-28">Tổng Nhân Sự</th>
                        <th class="py-2.5 px-4 text-right w-24">Thao Tác</th>
                      </tr>
                    </thead>
                    <tbody id="hr-departments-tbody" class="divide-y divide-slate-100">
                      <!-- Render động chuẩn 100% React -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- ========================================================================= -->
            <!-- 👥 HR TAB 3: DANH SÁCH NHÂN SỰ (CHUẨN 100% REACT HRModule.tsx)             -->
            <!-- ========================================================================= -->
            <div id="hrtab-staff" class="tab-pane space-y-6">
              <!-- Thanh công cụ tìm kiếm, bộ lọc & thao tác thêm nhân sự (đã gộp tinh gọn) -->
              <div class="bg-white rounded-2xl p-3 sm:p-4 border border-slate-200/80 shadow-xs flex flex-col lg:flex-row lg:items-center justify-between gap-3">
                <!-- Bộ Lọc & Tìm Kiếm -->
                <div class="flex items-center gap-2.5 flex-1 flex-wrap">
                  <div class="relative flex-1 min-w-[200px] max-w-sm">
                    <i data-lucide="search" class="w-4 h-4 absolute left-3 top-2.5 text-slate-400"></i>
                    <input
                      type="text"
                      id="hr-staff-search"
                      placeholder="Tìm theo tên nhân sự, điện thoại, email..."
                      class="w-full pl-9 pr-3 py-1.5 text-xs rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:outline-none focus:border-purple-400 transition"
                    />
                  </div>

                  <select
                    id="hr-staff-dept-filter"
                    class="px-2.5 py-1.5 text-xs font-bold rounded-xl border border-slate-200 bg-white focus:outline-none focus:border-purple-400 cursor-pointer"
                  >
                    <option value="all">Tất cả phòng ban (5)</option>
                  </select>

                  <select
                    id="hr-staff-role-filter"
                    class="px-2.5 py-1.5 text-xs font-bold rounded-xl border border-slate-200 bg-white focus:outline-none focus:border-purple-400 cursor-pointer"
                  >
                    <option value="all">Tất cả chức danh</option>
                    <option value="director">Giám đốc điều hành</option>
                    <option value="manager">Quản lý tòa nhà</option>
                    <option value="accountant">Kế toán tài chính</option>
                    <option value="shareholder">Cổ đông góp vốn</option>
                    <option value="technician">Kỹ thuật & Bảo trì</option>
                    <option value="receptionist">Lễ tân & CSKH</option>
                    <option value="security">Bảo vệ & An ninh</option>
                    <option value="cleaning">Tạp vụ & Vệ sinh</option>
                  </select>
                </div>

                <!-- Các nút chuyển view & thêm nhân sự -->
                <div class="flex items-center gap-2 flex-wrap shrink-0">
                  <!-- Toggle chế độ xem Dạng Danh Sách vs Dạng Khối -->
                  <div class="flex items-center bg-slate-100 p-0.5 rounded-xl border border-slate-200">
                    <button
                      type="button"
                      id="btn-hr-staff-view-list"
                      data-staff-view="list"
                      class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer bg-white text-purple-700 shadow-2xs"
                      title="Xem dạng danh sách bảng"
                    >
                      <i data-lucide="list" class="w-3.5 h-3.5"></i>
                      <span class="hidden sm:inline">Danh sách</span>
                    </button>
                    <button
                      type="button"
                      id="btn-hr-staff-view-cards"
                      data-staff-view="cards"
                      class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer text-slate-600 hover:text-slate-900"
                      title="Xem dạng khối thẻ"
                    >
                      <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
                      <span class="hidden sm:inline">Khối</span>
                    </button>
                  </div>

                  <!-- Nút Thêm Nhân Sự -->
                  <button
                    type="button"
                    id="btn-hr-open-add-staff"
                    class="px-4 py-1.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-black text-xs uppercase tracking-wider transition shadow-2xs flex items-center gap-1.5 cursor-pointer shrink-0"
                  >
                    <i data-lucide="user-plus" class="w-4 h-4 text-emerald-300"></i>
                    <span>+ Thêm Nhân Sự</span>
                  </button>
                </div>
              </div>

              <!-- TRƯỜNG HỢP DANH SÁCH NHÂN SỰ ĐANG TRỐNG -->
              <div id="hr-staff-empty-state" class="hidden bg-white rounded-3xl border border-dashed border-purple-200 p-8 sm:p-12 text-center space-y-4 shadow-xs">
                <div class="w-16 h-16 rounded-3xl bg-purple-100 text-purple-700 flex items-center justify-center mx-auto shadow-xs">
                  <i data-lucide="users" class="w-8 h-8"></i>
                </div>
                <div class="max-w-md mx-auto space-y-1">
                  <h3 class="text-lg font-black text-slate-900">
                    Danh Sách Nhân Sự Đang Trống
                  </h3>
                  <p class="text-xs text-slate-500">
                    Hiện chưa có hồ sơ nhân sự nào trong hệ thống. Bạn có thể bấm "+ Thêm Nhân Sự" bên dưới để tạo mới nhân sự theo từng phòng ban.
                  </p>
                </div>
                <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
                  <button
                    type="button"
                    id="btn-hr-empty-add-staff"
                    class="px-6 py-2.5 rounded-2xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center gap-2 cursor-pointer"
                  >
                    <i data-lucide="user-plus" class="w-4 h-4 text-emerald-300"></i>
                    <span>+ Thêm Nhân Sự</span>
                  </button>
                </div>
              </div>

              <!-- DANH SÁCH NHÂN SỰ NỔI BẬT THEO NHÓM PHÒNG BAN -->
              <div id="hr-staff-groups-container" class="space-y-6">
                <!-- Render động các nhóm phòng ban (Dạng Danh sách Bảng 8 cột có Accordion hoặc Dạng Khối Thẻ) -->
              </div>
            </div>

            <!-- ========================================================================= -->
            <!-- 🏢 HR TAB 4: PHÂN CÔNG QUẢN LÝ TÒA NHÀ (CHUẨN 100% REACT HRModule.tsx)    -->
            <!-- ========================================================================= -->
            <div id="hrtab-assignment" class="tab-pane space-y-5 animate-in fade-in duration-150">
              <!-- Header Card -->
              <div class="bg-white rounded-3xl border border-slate-200/80 p-6 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-bold mb-1 border border-emerald-200">
                    <i data-lucide="building-2" class="w-3.5 h-3.5"></i>
                    <span>Phân Công Cơ Sở Tòa Nhà & Vận Hành Chuỗi</span>
                  </div>
                  <h2 class="text-xl font-black text-slate-900">
                    Phân Công Quản Lý Cơ Sở Cho Nhân Sự
                  </h2>
                  <p class="text-xs text-slate-500">
                    Chỉ định các cơ sở tòa nhà trong chuỗi mà từng nhân sự phụ trách quản lý khách thuê, chốt chỉ số điện nước và vận hành
                  </p>
                </div>

                <div class="flex items-center gap-2">
                  <span class="text-xs font-bold text-slate-500 bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-200">
                    Chuỗi hiện có: <strong id="hr-assignment-bld-count-label" class="text-emerald-700 font-bold">1 cơ sở</strong>
                  </span>
                </div>
              </div>

              <!-- Toast thông báo lưu phân công (Inline trong Tab Phân Công) -->
              <div id="hr-assignment-inline-toast" class="hidden p-3.5 rounded-2xl bg-emerald-50 text-emerald-800 border border-emerald-200 text-xs font-bold flex items-center gap-2 animate-in slide-in-from-top-2">
                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                <span id="hr-assignment-inline-toast-text"></span>
              </div>

              <!-- Search & Filter -->
              <div class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div class="relative flex-1 max-w-md">
                  <i data-lucide="search" class="w-4 h-4 absolute left-3 top-3 text-slate-400"></i>
                  <input
                    type="text"
                    id="hr-assignment-search"
                    placeholder="Tìm nhân sự theo tên, số điện thoại, chức danh..."
                    class="w-full pl-9 pr-4 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-emerald-400"
                  />
                </div>

                <div class="flex items-center gap-2">
                  <span class="text-xs font-bold text-slate-500">Lọc phòng ban:</span>
                  <select
                    id="hr-assignment-dept-filter"
                    class="px-3 py-2 text-xs font-bold rounded-xl border border-slate-200 bg-white focus:outline-none focus:border-emerald-400"
                  >
                    <option value="all">Tất cả phòng ban (5)</option>
                  </select>
                </div>
              </div>

              <!-- BẢNG DANH SÁCH PHÂN CÔNG -->
              <div class="bg-white rounded-2xl border border-slate-200/90 shadow-xs overflow-hidden">
                <div class="overflow-x-auto">
                  <table class="w-full text-left border-collapse text-xs">
                    <thead>
                      <tr class="bg-slate-50/80 border-b border-slate-200 text-slate-600 font-bold uppercase text-[10px] tracking-wider">
                        <th class="py-3 px-4 w-12 text-center">STT</th>
                        <th class="py-3 px-4 min-w-[200px]">Nhân Sự</th>
                        <th class="py-3 px-4 min-w-[150px]">Chức Danh & Phòng Ban</th>
                        <th class="py-3 px-4 min-w-[140px]">Số Điện Thoại</th>
                        <th class="py-3 px-4 min-w-[240px]">Tòa Nhà / Cơ Sở Quản Lý</th>
                        <th class="py-3 px-4 text-right min-w-[140px]">Thao Tác</th>
                      </tr>
                    </thead>
                    <tbody id="hr-assignment-tbody" class="divide-y divide-slate-100">
                      <!-- Render động chuẩn 100% React HRModule.tsx -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <!-- Toast thông báo lưu phân công (Toàn cục trong phân hệ Nhân Sự) -->
          <div id="hr-assignment-global-toast" class="hidden fixed bottom-6 right-6 z-50 p-3.5 rounded-2xl bg-emerald-600 text-white font-bold text-xs flex items-center gap-2 shadow-xl animate-in slide-in-from-bottom-2">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-white shrink-0"></i>
            <span id="hr-assignment-global-toast-text"></span>
          </div>
        </section>


        <!-- ================================================================= -->
        <!-- PHÂN HỆ 5: MARKETING & BÁN HÀNG (CHUẨN 100% REACT)                 -->
        <!-- ================================================================= -->
        <section id="module-marketing" class="module-content-pane p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
          <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 text-amber-700 text-xs font-bold mb-1 border border-amber-200">
                <i data-lucide="megaphone" class="w-3.5 h-3.5"></i>
                <span>Phân Hệ Marketing & Quản Trị Khách Thuê Tiềm Năng (CRM)</span>
              </div>
              <h1 class="text-xl sm:text-2xl font-black text-slate-900">
                Kênh Tìm Khách & Đẩy Nhanh Lấp Đầy Phòng Trống
              </h1>
              <p class="text-xs text-slate-500">
                Quản lý Lead khách hỏi phòng từ Facebook, Chợ Tốt, Môi giới và tự động tạo bài đăng lấp phòng trống
              </p>
            </div>

            <button
              type="button"
              id="btn-mkt-open-add-lead"
              class="px-5 py-2.5 rounded-2xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-black text-xs uppercase tracking-wider transition shadow-xs flex items-center gap-2 shrink-0 cursor-pointer"
            >
              <i data-lucide="user-plus" class="w-4 h-4"></i>
              <span>+ Nhập Khách Hỏi Thuê (Lead)</span>
            </button>
          </div>

          <!-- 3 Thẻ Trạng Thái Lấp Phòng -->
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-white rounded-2xl p-5 border border-slate-200/80 shadow-xs space-y-2">
              <div class="text-xs font-bold text-slate-400 uppercase tracking-wider">
                Phòng Đang Trống Cần Đẩy Sale
              </div>
              <div class="text-3xl font-black text-rose-600" id="mkt-kpi-vacant-count">0 phòng</div>
              <div class="text-xs text-slate-500" id="mkt-kpi-vacant-loss">
                Tổn thất doanh thu tạm tính: ~0 đ/tháng
              </div>
            </div>

            <div class="bg-white rounded-2xl p-5 border border-slate-200/80 shadow-xs space-y-2">
              <div class="text-xs font-bold text-slate-400 uppercase tracking-wider">
                Lead Khách Đang Xử Lý
              </div>
              <div class="text-3xl font-black text-blue-600" id="mkt-kpi-leads-count">0 khách</div>
              <div class="text-xs text-slate-500">
                Theo dõi sát lịch hẹn xem phòng & đặt cọc
              </div>
            </div>

            <div class="bg-white rounded-2xl p-5 border border-slate-200/80 shadow-xs space-y-2">
              <div class="text-xs font-bold text-slate-400 uppercase tracking-wider">
                Tỷ Lệ Chốt Cọc Thành Công
              </div>
              <div class="text-3xl font-black text-emerald-600" id="mkt-kpi-conversion">0%</div>
              <div class="text-xs text-slate-500">Kênh Facebook & Môi giới đạt hiệu quả cao</div>
            </div>
          </div>

          <!-- Danh sách Phòng Trống Cần Đẩy Sale & Tạo Mẫu Tin Đăng -->
          <div class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-2 border-b border-slate-100">
              <div>
                <h2 class="text-xs font-black uppercase tracking-wider text-slate-800">
                  Danh Sách Phòng Trống Toàn Chuỗi & Tạo Nhanh Bài Đăng
                </h2>
                <p class="text-[11px] text-slate-500">Bấm "Chép Bài Đăng" để lấy nội dung đăng Facebook / Zalo / Chợ Tốt ngay</p>
              </div>
            </div>
            <div id="mkt-vacant-rooms-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-xs">
              <!-- Render động -->
            </div>
          </div>

          <!-- Danh Sách Khách Hỏi Thuê (Leads CRM) -->
          <div class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-100">
              <div>
                <h2 class="text-xs font-black uppercase tracking-wider text-slate-800">
                  Danh Sách Khách Tiềm Năng (Leads Pipeline)
                </h2>
                <p class="text-[11px] text-slate-500">
                  Quản lý tiến độ từ lúc khách nhắn tin đến khi chốt cọc vào ở
                </p>
              </div>

              <div class="flex items-center gap-2">
                <select id="mkt-lead-filter-status" class="px-3 py-1.5 text-xs font-bold rounded-xl border border-slate-200 bg-white">
                  <option value="all">Tất cả trạng thái</option>
                  <option value="new">Mới nhận Lead</option>
                  <option value="contacted">Đã tư vấn</option>
                  <option value="viewing_scheduled">Đã hẹn xem phòng</option>
                  <option value="deposit_paid">Đã cọc thành công</option>
                </select>
              </div>
            </div>

            <div id="mkt-leads-list" class="divide-y divide-slate-100">
              <!-- Render động -->
            </div>
          </div>
        </section>


        <!-- ================================================================= -->
        <!-- PHÂN HỆ 6: CẤU HÌNH & HỆ THỐNG (SETTINGS MODULE - 4 TABS)         -->
        <!-- ================================================================= -->
        <section id="module-settings" class="module-content-pane p-4 sm:p-6 lg:p-8 space-y-5 max-w-7xl mx-auto">
          <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
            <h1 class="text-lg sm:text-xl font-black text-slate-900">Cấu Hình Hệ Thống & Sao Lưu Dữ Liệu</h1>
            <p class="text-xs text-slate-500 mt-1">Phân quyền tài khoản Firebase, sao lưu dữ liệu toàn doanh nghiệp, kết nối đám mây và quản lý kho lưu trữ</p>
          </div>

          <!-- SETTINGS SUBTABS NAV -->
          <div class="flex overflow-x-auto scrollbar-hide space-x-1.5 bg-slate-200/80 p-1 rounded-2xl border border-slate-300/80" id="settings-subtabs-nav">
            <button class="settings-subtab-btn px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-2 bg-white text-blue-700 shadow-xs cursor-pointer" data-settingstab="permissions">
              <i data-lucide="shield-check" class="w-4 h-4"></i>
              <span>Tài Khoản & Quyền Đăng Nhập</span>
            </button>
            <button class="settings-subtab-btn px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-2 text-slate-600 hover:text-slate-900 cursor-pointer" data-settingstab="backup">
              <i data-lucide="database" class="w-4 h-4"></i>
              <span>Sao Lưu & Dữ Liệu Local</span>
            </button>
            <button class="settings-subtab-btn px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-2 text-slate-600 hover:text-slate-900 cursor-pointer" data-settingstab="cloud">
              <i data-lucide="cloud" class="w-4 h-4"></i>
              <span>Kết Nối Firebase Cloud</span>
            </button>
            <button class="settings-subtab-btn px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-2 text-slate-600 hover:text-slate-900 cursor-pointer" data-settingstab="domain">
              <i data-lucide="globe" class="w-4 h-4"></i>
              <span>Đóng Gói Độc Lập 3 File</span>
            </button>
          </div>

          <!-- SETTINGS TAB 0: TÀI KHOẢN & QUYỀN ĐĂNG NHẬP FIREBASE (ACTIVE MẶC ĐỊNH CHUẨN REACT) -->
          <div id="settingstab-permissions" class="tab-pane active space-y-4">
            <!-- Thanh Toolbar gộp: Tìm kiếm & Nút Cấp tài khoản mới -->
            <div class="bg-white rounded-2xl sm:rounded-3xl border border-slate-200/90 p-4 sm:p-5 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-3 sm:gap-4">
              <div class="flex-1 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                <div class="relative flex-1">
                  <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-3 text-slate-400"></i>
                  <input
                    type="text"
                    id="access-search-input"
                    placeholder="Tìm theo tên nhân sự, email đăng nhập, số điện thoại..."
                    class="w-full pl-10 pr-4 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-purple-400 bg-slate-50/70 focus:bg-white transition"
                  />
                </div>

                <div class="flex items-center gap-2 shrink-0">
                  <span class="px-3 py-2 text-xs font-bold rounded-xl bg-purple-50 text-purple-700 border border-purple-200" id="access-granted-count-badge">
                    Đã cấp tài khoản: <strong id="access-granted-count">1</strong> / <span id="access-total-count">1</span> nhân sự
                  </span>
                </div>
              </div>

              <button
                type="button"
                id="btn-open-create-auth-modal"
                class="px-4 py-2.5 rounded-xl font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center justify-center gap-2 shrink-0 active:scale-95 bg-purple-600 hover:bg-purple-700 text-white hover:shadow-md hover:shadow-purple-500/20 cursor-pointer"
              >
                <i data-lucide="user-plus" class="w-4 h-4 text-purple-200"></i>
                <span>+ Cấp Tài Khoản Firebase Mới</span>
              </button>
            </div>

            <!-- Chú thích màu sắc nổi bật và thứ tự sắp xếp -->
            <div class="bg-white rounded-2xl border border-slate-200/90 px-4 py-2.5 shadow-2xs flex flex-wrap items-center justify-between gap-2 text-[11px]">
              <div class="flex flex-wrap items-center gap-3">
                <span class="font-bold text-slate-500 uppercase tracking-wider text-[10px]">
                  Chú thích nổi bật:
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-100/90 text-amber-950 font-bold border border-amber-300">
                  <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                  <span>👑 Dòng Admin Hệ Thống (Đầu danh sách)</span>
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-purple-100/90 text-purple-900 font-bold border border-purple-300">
                  <span class="w-2 h-2 rounded-full bg-purple-600"></span>
                  <span>⚡ Dòng User Full Quyền (Toàn quyền 6 phân hệ)</span>
                </span>
              </div>
              <div class="text-slate-500 font-medium">
                Thứ tự: <strong class="text-amber-800">Admin</strong> &rarr; <strong class="text-indigo-700">Nhóm vị trí nhân sự</strong> &rarr; <strong class="text-slate-700">Người dùng ngoài</strong>
              </div>
            </div>

            <!-- DANH SÁCH DẠNG BẢNG (TABLE LIST VIEW) QUYỀN TRUY CẬP -->
            <div class="bg-white rounded-2xl border border-slate-200/90 shadow-xs overflow-hidden">
              <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse text-xs">
                  <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200 text-slate-600 font-bold uppercase text-[10px] tracking-wider">
                      <th class="py-3 px-4 w-12 text-center">STT</th>
                      <th class="py-3 px-4 min-w-[200px]">Nhân Sự</th>
                      <th class="py-3 px-4 min-w-[160px]">Chức Danh & Phòng Ban</th>
                      <th class="py-3 px-4 min-w-[220px]">Email Đăng Nhập Firebase</th>
                      <th class="py-3 px-4 text-right min-w-[180px]">Thao Tác</th>
                    </tr>
                  </thead>
                  <tbody id="access-permissions-table-body" class="divide-y divide-slate-100">
                    <!-- Được render tự động qua JS -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- SETTINGS TAB 1: SAO LƯU & DỮ LIỆU LOCAL -->
          <div id="settingstab-backup" class="tab-pane space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs space-y-3">
                <h3 class="font-black text-slate-900 text-sm">Tải Bản Sao Lưu JSON Toàn Hệ Thống</h3>
                <p class="text-xs text-slate-500">Xuất toàn bộ hệ thống gồm danh sách tòa nhà, phòng ốc, hóa đơn, khách thuê, sổ quỹ, nhân sự ra file JSON an toàn.</p>
                <button id="btn-settings-export-json" class="w-full py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs transition cursor-pointer flex items-center justify-center gap-2">
                  <i data-lucide="download" class="w-4 h-4"></i>
                  <span>⬇ Tải Tệp Sao Lưu (JSON)</span>
                </button>
              </div>

              <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs space-y-3">
                <h3 class="font-black text-slate-900 text-sm">Phục Hồi Dữ Liệu Từ Tệp JSON</h3>
                <p class="text-xs text-slate-500">Chọn tệp tin JSON đã sao lưu từ trước để khôi phục lại toàn bộ dữ liệu trên máy.</p>
                <input type="file" id="input-settings-restore-json" accept=".json" class="text-xs file:mr-2 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer">
              </div>
            </div>

            <!-- Khởi Tạo Dữ Liệu & Đặt Lại Trắng -->
            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs space-y-3">
              <h3 class="font-black text-slate-900 text-sm">Công Cụ Đặt Lại Hệ Thống (Xóa Trắng)</h3>
              <p class="text-xs text-slate-500">Dùng để xóa trắng dữ liệu để khởi tạo và nhập mới hệ thống tòa nhà từ đầu.</p>
              <div class="flex flex-wrap items-center gap-2.5">
                <button type="button" id="btn-settings-wipe-data" class="px-4 py-2.5 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 font-bold text-xs transition cursor-pointer flex items-center gap-1.5">
                  <i data-lucide="trash-2" class="w-4 h-4"></i>
                  <span>Xóa Trắng Toàn Bộ Dữ Liệu (Blank Database)</span>
                </button>
              </div>
            </div>
          </div>

          <!-- SETTINGS TAB 2: CLOUD FIREBASE -->
          <div id="settingstab-cloud" class="tab-pane space-y-4">
            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs space-y-4">
              <div class="flex items-center justify-between">
                <div>
                  <h3 class="font-black text-slate-900 text-sm">Đồng Bộ Dữ Liệu Firebase Cloud Realtime (Đa Thiết Bị)</h3>
                  <p class="text-xs text-slate-500">Toàn bộ dữ liệu được đồng bộ thời gian thực 2 chiều giữa điện thoại, máy tính và các tab làm việc</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-black bg-emerald-50 text-emerald-700 border border-emerald-200 flex items-center gap-1.5">
                  <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                  <span>Cloud Realtime Sẵn Sàng</span>
                </span>
              </div>

              <!-- Trạng thái và Thông tin Thiết Bị -->
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 p-3.5 rounded-2xl bg-slate-50 border border-slate-200 text-xs">
                <div>
                  <span class="text-[10px] font-bold text-slate-400 uppercase block">Trạng thái kết nối</span>
                  <span id="cloud-info-status" class="font-bold text-emerald-700 flex items-center gap-1 mt-0.5">
                    <span class="w-2 h-2 rounded-full bg-emerald-500"></span> Đang kết nối Realtime
                  </span>
                </div>
                <div>
                  <span class="text-[10px] font-bold text-slate-400 uppercase block">Lần đồng bộ gần nhất</span>
                  <span id="cloud-info-last-sync" class="font-mono font-bold text-slate-800 mt-0.5 block">
                    Vừa xong
                  </span>
                </div>
                <div>
                  <span class="text-[10px] font-bold text-slate-400 uppercase block">Mã thiết bị (Device ID)</span>
                  <span id="cloud-info-device-id" class="font-mono text-[11px] text-slate-600 mt-0.5 block truncate">
                    --
                  </span>
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                <div>
                  <label class="block font-bold text-slate-700 mb-1">Mã đồng bộ chia sẻ (Sync Code):</label>
                  <input type="text" id="settings-sync-code-input" value="CHUOI-NHA-TRO-VN" class="w-full p-2.5 rounded-xl border border-slate-200 font-mono font-bold text-blue-700">
                </div>
                <div>
                  <label class="block font-bold text-slate-700 mb-1">Firebase Database URL:</label>
                  <input type="text" id="settings-fb-project-input" readonly value="quanlytoanha-2t-default-rtdb.asia-southeast1.firebasedatabase.app" class="w-full p-2.5 rounded-xl border border-slate-200 bg-slate-50 font-mono text-slate-600 text-[11px]">
                </div>
              </div>

              <!-- Hàng Nút Thao Tác Nhanh -->
              <div class="flex flex-wrap items-center gap-2 pt-2 border-t border-slate-100">
                <button type="button" id="btn-save-cloud-config" class="px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-black text-xs cursor-pointer shadow-xs flex items-center gap-1.5">
                  <i data-lucide="save" class="w-3.5 h-3.5"></i>
                  <span>Lưu Cấu Hình</span>
                </button>
                <button type="button" id="btn-cloud-push-now" class="px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-black text-xs cursor-pointer shadow-xs flex items-center gap-1.5">
                  <i data-lucide="upload-cloud" class="w-3.5 h-3.5"></i>
                  <span>Đẩy Lên Cloud Ngay (Sync Push)</span>
                </button>
                <button type="button" id="btn-cloud-pull-now" class="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs cursor-pointer shadow-xs flex items-center gap-1.5">
                  <i data-lucide="download-cloud" class="w-3.5 h-3.5"></i>
                  <span>Kéo Dữ Liệu Từ Cloud Về (Sync Pull)</span>
                </button>
                <button type="button" id="btn-cloud-toggle-realtime" class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs cursor-pointer flex items-center gap-1.5 border border-slate-200">
                  <i data-lucide="radio" class="w-3.5 h-3.5 text-blue-600"></i>
                  <span id="btn-cloud-toggle-realtime-text">Khởi Động Lại Realtime</span>
                </button>
              </div>
            </div>
          </div>

          <!-- SETTINGS TAB 3: TÊN MIỀN & ĐÓNG GÓI 3 FILE -->
          <div id="settingstab-domain" class="tab-pane space-y-4">
            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs space-y-3">
              <h3 class="font-black text-slate-900 text-sm">Kiến Trúc Độc Lập 3 File (HTML + CSS + JS)</h3>
              <p class="text-xs text-slate-500">Toàn bộ giao diện và nghiệp vụ của hệ thống được gói gọn hoàn toàn trong 3 file độc lập:</p>
              <div class="space-y-2 text-xs">
                <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <strong class="text-slate-900">1. index.html</strong>
                    <p class="text-slate-500 text-[11px]">Toàn bộ khung giao diện 6 phân hệ & hệ thống Modal</p>
                  </div>
                  <span class="px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 font-bold text-[10px]">Độc lập 100%</span>
                </div>
                <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <strong class="text-slate-900">2. quanlyhethong.css</strong>
                    <p class="text-slate-500 text-[11px]">Toàn bộ định dạng thẩm mỹ, hiệu ứng, màu sắc & responsive</p>
                  </div>
                  <span class="px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 font-bold text-[10px]">Độc lập 100%</span>
                </div>
                <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <strong class="text-slate-900">3. quanlyhethong.js</strong>
                    <p class="text-slate-500 text-[11px]">Toàn bộ dữ liệu mẫu khởi tạo & hàm logic vận hành 6 phân hệ</p>
                  </div>
                  <span class="px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 font-bold text-[10px]">Độc lập 100%</span>
                </div>
              </div>
            </div>
          </div>
        </section>

      </main>
    </div>
  </div>


  <!-- ===================================================================== -->
  <!-- 2. HỆ THỐNG CÁC MODAL DIALOG (CỬA SỔ BẬT LÊN)                         -->
  <!-- ===================================================================== -->

  <!-- MODAL 1: ĐĂNG NHẬP HỆ THỐNG (BÊ NGUYÊN GIAO DIỆN & HIỆU ỨNG TỪ REACT LoginModal.tsx) -->
  <div id="modal-login" class="modal-overlay bg-slate-950 p-3 sm:p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-700/50 max-w-md w-full overflow-hidden my-auto animate-in zoom-in-95 duration-200">
      <!-- Header với Sunsilk Blue Gradient -->
      <div class="bg-gradient-sunsilk p-6 sm:p-7 text-white">
        <div class="flex items-center gap-3.5">
          <div class="w-12 h-12 rounded-2xl bg-white/15 border border-white/20 flex items-center justify-center shadow-md text-white shrink-0">
            <i data-lucide="building-2" class="w-6 h-6"></i>
          </div>
          <div>
            <h2 class="text-base sm:text-lg font-black uppercase tracking-tight text-white">
              Đăng Nhập Quản Lý Tòa Nhà
            </h2>
            <p class="text-xs text-blue-100 mt-1 leading-relaxed">
              Vui lòng đăng nhập bằng tài khoản được cấp bởi Quản trị viên để truy cập hệ thống
            </p>
          </div>
        </div>
      </div>

      <!-- Form Body -->
      <div class="p-6 sm:p-7 space-y-4">
        <!-- Error Message Alert -->
        <div id="login-error-msg" class="hidden p-3.5 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold items-start gap-2 animate-in fade-in">
          <i data-lucide="alert-triangle" class="w-4 h-4 text-rose-600 shrink-0 mt-0.5"></i>
          <span id="login-error-text">Sai email hoặc mật khẩu. Vui lòng kiểm tra lại!</span>
        </div>

        <!-- Success Message Alert -->
        <div id="login-success-msg" class="hidden p-3.5 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold items-center gap-2 animate-in fade-in">
          <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
          <span id="login-success-text">Đăng nhập thành công! Đang vào hệ thống...</span>
        </div>

        <form id="form-login" class="space-y-4 text-xs">
          <!-- Email Field -->
          <div class="space-y-1.5">
            <label class="font-bold text-slate-700 block">
              Email đăng nhập <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none"></i>
              <input
                type="email"
                id="login-email-input"
                required
                placeholder="admin@quanlytoanha.vn"
                class="w-full h-11 pl-10 pr-3 rounded-xl border border-slate-300 bg-white font-medium text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none transition"
              />
            </div>
          </div>

          <!-- Password Field -->
          <div class="space-y-1.5">
            <label class="font-bold text-slate-700 block">
              Mật khẩu <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <i data-lucide="lock" class="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none"></i>
              <input
                type="password"
                id="login-password-input"
                required
                placeholder="Nhập mật khẩu (từ 6 ký tự)"
                class="w-full h-11 pl-10 pr-10 rounded-xl border border-slate-300 bg-white font-medium text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none transition"
              />
              <button
                type="button"
                id="btn-toggle-login-password"
                class="p-1.5 text-slate-400 hover:text-slate-600 absolute right-2.5 transition cursor-pointer"
                tabindex="-1"
                title="Hiện / Ẩn mật khẩu"
              >
                <i data-lucide="eye" class="w-4 h-4" id="login-password-eye-icon"></i>
              </button>
            </div>
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            id="btn-login-submit"
            class="w-full mt-2 h-11 rounded-xl bg-gradient-sunsilk text-white font-black text-xs uppercase tracking-wider shadow-md hover:opacity-95 disabled:opacity-50 transition cursor-pointer flex items-center justify-center gap-2 active:scale-98"
          >
            <i data-lucide="log-in" class="w-4 h-4"></i>
            <span id="login-submit-label">Đăng nhập hệ thống</span>
          </button>
        </form>

        <!-- Quick Demo Access Divider & Button -->
        <div class="pt-3 border-t border-slate-200">
          <button
            type="button"
            id="btn-login-demo"
            class="w-full h-10 rounded-xl border border-blue-200 bg-blue-50/80 hover:bg-blue-100 text-blue-700 font-bold text-xs flex items-center justify-center gap-2 transition cursor-pointer active:scale-98 shadow-xs"
          >
            <i data-lucide="play" class="w-3.5 h-3.5 text-blue-600 fill-blue-600"></i>
            <span>Trải nghiệm ngay (Chế độ Demo / Ngoại tuyến)</span>
          </button>
          <p class="text-[11px] text-slate-500 text-center mt-2">
            Khám phá ngay đầy đủ tính năng Quản lý phòng, Hóa đơn điện nước, Báo cáo cổ đông
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- MODAL CẤP TÀI KHOẢN FIREBASE & QUYỀN TRUY CẬP (CHUẨN 100% REACT SystemSettingsModule.tsx) -->
  <div id="modal-auth-grant" class="modal-overlay bg-slate-900/60 backdrop-blur-xs p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 space-y-4 animate-in zoom-in-95 duration-150 my-auto">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2.5">
          <div class="w-10 h-10 rounded-2xl bg-purple-100 text-purple-700 flex items-center justify-center font-black">
            <i data-lucide="key" class="w-5 h-5"></i>
          </div>
          <div>
            <h3 class="text-sm font-black text-slate-900 uppercase">
              Cấp Tài Khoản Xác Thực Firebase & Quyền Truy Cập
            </h3>
            <p class="text-xs text-purple-600 font-bold">
              Đăng ký tài khoản hệ thống (Firebase Authentication)
            </p>
          </div>
        </div>
        <button type="button" class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-auth-grant" class="space-y-4 text-xs">
        <input type="hidden" id="auth-editing-member-id" value="">

        <!-- Ô tick chọn user ngoài nhân sự -->
        <div class="p-3 rounded-2xl bg-purple-50/70 border border-purple-200/80 flex items-center justify-between">
          <label class="flex items-center gap-2.5 cursor-pointer select-none">
            <input
              type="checkbox"
              id="auth-is-external-user-check"
              class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500 border-slate-300 cursor-pointer"
            />
            <div>
              <div class="font-bold text-xs text-purple-950 flex items-center gap-1.5">
                <span>Thêm user ngoài nhân sự</span>
                <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-purple-200/80 text-purple-800">
                  Khách / Cổ đông / Đối tác / Kiểm toán
                </span>
              </div>
              <p class="text-[10px] text-purple-700">
                Cấp tài khoản cho người dùng ngoài danh mục hồ sơ nhân sự công ty
              </p>
            </div>
          </label>
        </div>

        <!-- Nhóm input cho user ngoài nhân sự -->
        <div id="auth-external-user-fields" class="space-y-2 hidden">
          <div class="space-y-1">
            <label class="font-bold text-slate-700">
              Họ và tên người dùng ngoài <span class="text-rose-500">*</span>
            </label>
            <input
              type="text"
              id="auth-external-user-name"
              placeholder="VD: Cổ đông Nguyễn Văn A, Kiểm toán Trần Thị B..."
              class="w-full px-3 py-2 rounded-xl border border-slate-300 font-bold focus:outline-none focus:border-purple-400 bg-white"
            />
          </div>
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="text-[11px] font-bold text-slate-600">Chức danh / Nhóm đối tượng</label>
              <input
                type="text"
                id="auth-external-user-title"
                placeholder="VD: Cổ đông góp vốn / Kiểm toán"
                class="w-full px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs mt-0.5 font-semibold"
              />
            </div>
            <div>
              <label class="text-[11px] font-bold text-slate-600">Số điện thoại liên hệ</label>
              <input
                type="text"
                id="auth-external-user-phone"
                placeholder="VD: 0912 345 678"
                class="w-full px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs mt-0.5 font-mono"
              />
            </div>
          </div>
        </div>

        <!-- Chọn nhân sự trong danh sách (kèm nút lọc phòng ban) -->
        <div id="auth-internal-staff-fields" class="space-y-2">
          <div class="flex items-center justify-between gap-2">
            <label class="font-bold text-slate-700">
              Nhân sự nhận quyền <span class="text-rose-500">*</span>
            </label>
            <button
              type="button"
              id="btn-open-auth-dept-filter"
              class="px-2.5 py-1 rounded-xl bg-purple-50 hover:bg-purple-100 text-purple-700 font-bold text-[11px] border border-purple-200 flex items-center gap-1.5 transition cursor-pointer active:scale-95 shadow-2xs"
              title="Mở bảng chọn phòng ban để cấp quyền"
            >
              <i data-lucide="folder-tree" class="w-3.5 h-3.5 text-purple-600"></i>
              <span id="auth-dept-filter-btn-label">Chọn phòng ban để cấp quyền</span>
            </button>
          </div>

          <select
            id="auth-select-staff"
            class="w-full px-3 py-2 rounded-xl border border-slate-300 font-bold bg-white focus:outline-none focus:border-purple-400"
          >
            <!-- Render động bằng JS -->
          </select>
        </div>

        <!-- Email đăng nhập Firebase -->
        <div class="space-y-1">
          <label class="font-bold text-slate-700">
            Email đăng nhập Firebase <span class="text-rose-500">*</span>
          </label>
          <input
            type="email"
            id="auth-input-email"
            required
            placeholder="VD: quanly.toanha@congty.com"
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-mono font-bold"
          />
          <p class="text-[10px] text-slate-400">
            Email này sẽ được dùng làm username đăng nhập vào hệ thống ERP
          </p>
        </div>

        <!-- Mật khẩu đăng nhập -->
        <div class="space-y-1">
          <div class="flex items-center justify-between">
            <label class="font-bold text-slate-700">
              Mật khẩu đăng nhập <span class="text-rose-500">*</span>
            </label>
            <button
              type="button"
              id="btn-auth-auto-gen-password"
              class="text-[10px] font-bold text-purple-600 hover:text-purple-800 cursor-pointer"
            >
              ⚡ Tạo mật khẩu tự động
            </button>
          </div>

          <div class="relative">
            <input
              type="password"
              id="auth-input-password"
              required
              placeholder="Tối thiểu 6 ký tự"
              class="w-full px-3 py-2 pr-9 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-mono font-bold"
            />
            <button
              type="button"
              id="btn-auth-toggle-password-eye"
              class="absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600 cursor-pointer"
            >
              <i data-lucide="eye" class="w-4 h-4" id="auth-password-eye-icon"></i>
            </button>
          </div>
        </div>

        <div class="p-3 rounded-2xl bg-purple-50 border border-purple-200/80 text-[11px] text-purple-900 space-y-1">
          <div class="font-black flex items-center gap-1.5">
            <i data-lucide="sparkles" class="w-3.5 h-3.5 text-purple-600"></i>
            <span>Xác thực an toàn với Firebase Authentication:</span>
          </div>
          <p class="text-[10px] text-purple-700 leading-relaxed">
            Tài khoản sẽ được tạo trực tiếp trên dịch vụ xác thực Firebase. Sau khi hoàn tất, nhân sự có thể đăng nhập bằng Email và Mật khẩu vừa tạo. Bạn có thể sử dụng nút <strong>Phân quyền</strong> trên bảng để thiết lập chi tiết phân hệ được xem/sửa bất kỳ lúc nào.
          </p>
        </div>

        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold transition cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            id="btn-auth-submit-grant"
            class="px-5 py-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-black uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5 disabled:opacity-50"
          >
            <i data-lucide="key" class="w-4 h-4"></i>
            <span>Xác Nhận</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL XÁC NHẬN KHI EMAIL ĐÃ TỒN TẠI TRÊN FIREBASE (CHUẨN 100% REACT SystemSettingsModule.tsx) -->
  <div id="modal-confirm-existing-email" class="modal-overlay bg-slate-950/75 backdrop-blur-xs p-4" style="z-index: 60 !important;">
    <div class="bg-white rounded-3xl shadow-2xl border border-amber-200 max-w-md w-full p-6 space-y-4 animate-in zoom-in-95 duration-150 my-auto text-center">
      <div class="w-14 h-14 rounded-2xl bg-amber-100 text-amber-600 mx-auto flex items-center justify-center shadow-inner">
        <i data-lucide="alert-triangle" class="w-7 h-7"></i>
      </div>
      <div class="space-y-1.5">
        <h3 class="text-base font-black text-slate-900 uppercase">
          Email Đã Tồn Tại Trên Firebase!
        </h3>
        <p class="text-xs text-slate-600 leading-relaxed">
          Email <strong class="font-mono text-purple-700" id="confirm-email-val">email@domain.com</strong> đã tồn tại trên hệ thống xác thực Firebase<span id="confirm-email-owner-info" class="hidden"> (hiện đang gắn với tài khoản <strong class="text-slate-900" id="confirm-email-owner-name">...</strong>)</span>.
        </p>
        <p class="text-xs text-amber-800 bg-amber-50 border border-amber-200/80 rounded-xl p-2.5 font-semibold">
          Bạn có chắc chắn muốn tiếp tục sử dụng email này để cấp quyền cho
          <strong class="text-slate-900" id="confirm-email-target-name">"..."</strong> không?
        </p>
      </div>
      <div class="flex items-center gap-2 pt-2">
        <button
          type="button"
          id="btn-cancel-confirm-email"
          class="flex-1 py-2.5 rounded-xl border border-slate-300 font-bold text-xs text-slate-700 hover:bg-slate-100 transition cursor-pointer"
        >
          Hủy Bỏ (Kiểm Tra Lại)
        </button>
        <button
          type="button"
          id="btn-confirm-accept-existing-email"
          class="flex-1 py-2.5 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-black text-xs uppercase tracking-wider transition cursor-pointer shadow-md shadow-purple-500/25 active:scale-95"
        >
          Xác Nhận Cấp
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL CHỌN PHÒNG BAN ĐỂ CẤP QUYỀN (CHUẨN 100% REACT SystemSettingsModule.tsx) -->
  <div id="modal-auth-dept-filter" class="modal-overlay bg-slate-900/60 backdrop-blur-xs p-4" style="z-index: 60 !important;">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-5 sm:p-6 space-y-4 animate-in zoom-in-95 duration-150 my-auto">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2.5">
          <div class="w-10 h-10 rounded-2xl bg-purple-100 text-purple-700 flex items-center justify-center font-black">
            <i data-lucide="folder-tree" class="w-5 h-5"></i>
          </div>
          <div>
            <h3 class="text-sm font-black text-slate-900 uppercase">
              Chọn Phòng Ban Để Cấp Quyền
            </h3>
            <p class="text-xs text-purple-600 font-bold">
              Chỉ nhân sự thuộc các phòng ban này sẽ hiển thị
            </p>
          </div>
        </div>
        <button type="button" class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Thanh tiện ích chọn nhanh -->
      <div class="flex items-center justify-between text-xs pt-1 px-1">
        <span class="font-bold text-slate-600">
          Đã chọn: <strong class="text-purple-700 font-black" id="auth-dept-selected-count">0</strong> / <span id="auth-dept-total-count">0</span> phòng ban
        </span>
        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-auth-dept-select-all"
            class="text-[11px] font-bold text-purple-600 hover:text-purple-800 cursor-pointer"
          >
            Chọn tất cả
          </button>
          <span class="text-slate-300">•</span>
          <button
            type="button"
            id="btn-auth-dept-deselect-all"
            class="text-[11px] font-bold text-slate-500 hover:text-slate-700 cursor-pointer"
          >
            Bỏ chọn hết
          </button>
        </div>
      </div>

      <!-- Danh sách phòng ban dạng checkbox -->
      <div id="auth-dept-checkbox-list" class="max-h-72 overflow-y-auto space-y-2 pr-1">
        <!-- Render động bằng JS -->
      </div>

      <!-- Footer Modal -->
      <div class="flex items-center justify-between gap-2 pt-3 border-t border-slate-100">
        <button
          type="button"
          id="btn-auth-dept-clear-filter"
          class="px-3 py-2 rounded-xl text-slate-500 hover:text-slate-800 text-xs font-bold transition cursor-pointer"
        >
          Xem tất cả (Không lọc)
        </button>
        <button
          type="button"
          id="btn-auth-dept-apply-filter"
          class="px-5 py-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-bold text-xs uppercase tracking-wider transition cursor-pointer active:scale-95 shadow-sm shadow-purple-500/20"
        >
          Xác Nhận & Áp Dụng
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL PHÂN QUYỀN MA TRẬN: HIỆN MENU, ĐƯỢC XEM, ĐƯỢC CHỈNH SỬA (CHUẨN 100% REACT SystemSettingsModule.tsx) -->
  <div id="modal-perm-matrix" class="modal-overlay bg-slate-900/60 backdrop-blur-xs p-3 sm:p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-3xl w-full p-5 sm:p-6 space-y-5 animate-in zoom-in-95 duration-150 my-auto">
      <!-- Header Modal -->
      <div class="flex items-start justify-between pb-4 border-b border-slate-100">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-2xl bg-indigo-100 text-indigo-700 flex items-center justify-center font-black shadow-inner shrink-0">
            <i data-lucide="shield-check" class="w-6 h-6"></i>
          </div>
          <div>
            <div class="flex items-center gap-2 flex-wrap">
              <h3 class="text-sm sm:text-base font-black text-slate-900 uppercase">
                Phân Quyền Ma Trận Cho Nhân Sự
              </h3>
              <span class="px-2 py-0.5 rounded-full text-[10px] font-black uppercase bg-indigo-50 text-indigo-700 border border-indigo-200" id="perm-matrix-badge-role">
                manager
              </span>
            </div>
            <p class="text-xs text-slate-600 mt-0.5">
              <strong class="text-slate-900" id="perm-matrix-staff-name">Nguyễn Văn A</strong> • 
              <span id="perm-matrix-staff-title">Nhân sự</span> (<span id="perm-matrix-staff-dept">Vận hành</span>)
              <span class="font-mono text-purple-700 ml-1.5 font-bold" id="perm-matrix-staff-email">[admin@quanlytoanha.vn]</span>
            </p>
          </div>
        </div>

        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- 1-Click Preset Buttons -->
      <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/90 space-y-2">
        <div class="text-[11px] font-bold text-slate-700 flex items-center gap-1.5">
          <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-500"></i>
          <span>Bộ mẫu quyền áp dụng nhanh (1-Click Presets):</span>
        </div>
        <div class="flex flex-wrap gap-2">
          <button
            type="button"
            id="btn-perm-preset-full"
            class="px-3 py-1.5 rounded-xl bg-purple-100 hover:bg-purple-200 text-purple-800 font-bold text-xs transition cursor-pointer flex items-center gap-1.5 active:scale-95 shadow-2xs"
          >
            <span>👑 Toàn Quyền (Tất cả 6 Phân Hệ)</span>
          </button>

          <button
            type="button"
            id="btn-perm-preset-view-only"
            class="px-3 py-1.5 rounded-xl bg-blue-100 hover:bg-blue-200 text-blue-800 font-bold text-xs transition cursor-pointer flex items-center gap-1.5 active:scale-95 shadow-2xs"
          >
            <i data-lucide="eye" class="w-3.5 h-3.5 text-blue-600"></i>
            <span>Chỉ Xem (Không Chỉnh Sửa)</span>
          </button>

          <button
            type="button"
            id="btn-perm-preset-buildings-only"
            class="px-3 py-1.5 rounded-xl bg-emerald-100 hover:bg-emerald-200 text-emerald-800 font-bold text-xs transition cursor-pointer flex items-center gap-1.5 active:scale-95 shadow-2xs"
          >
            <i data-lucide="building-2" class="w-3.5 h-3.5 text-emerald-600"></i>
            <span>Chỉ Vận Hành Tòa Nhà</span>
          </button>

          <button
            type="button"
            id="btn-perm-preset-reset"
            class="px-3 py-1.5 rounded-xl bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold text-xs transition cursor-pointer flex items-center gap-1.5 active:scale-95"
          >
            <i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-slate-500"></i>
            <span>Theo Chuẩn Vai Trò</span>
          </button>
        </div>
        <div class="text-[11px] text-slate-500 bg-slate-100/80 p-2.5 rounded-xl border border-slate-200 flex items-center gap-2">
          <i data-lucide="sparkles" class="w-4 h-4 text-purple-600 shrink-0"></i>
          <span>
            <strong>Gợi ý:</strong> Nút <em>"Theo Chuẩn Vai Trò"</em> tự động áp dụng chuẩn phân quyền theo chức vụ. Đối với các <strong>Phòng ban & Chức vụ mới tạo</strong>, bạn có thể thiết lập quy chuẩn vai trò ngay tại <em>Nhân Sự &rarr; Phòng Ban & Chức Vụ &rarr; Sửa Chức Vụ</em>.
          </span>
        </div>
      </div>

      <!-- Table Ma Trận 3 Quyền -->
      <div class="border border-slate-200 rounded-2xl overflow-hidden shadow-2xs">
        <div class="overflow-x-auto">
          <table class="w-full text-left text-xs border-collapse">
            <thead>
              <tr class="bg-slate-100/80 border-b border-slate-200 text-slate-700 font-black uppercase text-[10px] tracking-wider">
                <th class="py-3 px-4">Phân Hệ Chức Năng</th>
                <th class="py-3 px-3 text-center w-32 bg-blue-50/50">
                  <div class="flex items-center justify-center gap-1 text-blue-800">
                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                    <span>Hiện Menu</span>
                  </div>
                </th>
                <th class="py-3 px-3 text-center w-32 bg-emerald-50/50">
                  <div class="flex items-center justify-center gap-1 text-emerald-800">
                    <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
                    <span>Được Xem</span>
                  </div>
                </th>
                <th class="py-3 px-3 text-center w-32 bg-purple-50/50">
                  <div class="flex items-center justify-center gap-1 text-purple-800">
                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                    <span>Được Chỉnh Sửa</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody id="perm-matrix-table-body" class="divide-y divide-slate-100">
              <!-- Render động 6 module với 3 checkbox qua JS -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- Hướng dẫn nghiệp vụ -->
      <div class="p-3.5 rounded-2xl bg-indigo-50/70 border border-indigo-200/80 text-[11px] text-indigo-950 space-y-1">
        <div class="font-black flex items-center gap-1.5">
          <i data-lucide="shield" class="w-3.5 h-3.5 text-indigo-600"></i>
          <span>Ý nghĩa của 3 hình thức cấp quyền với từng user:</span>
        </div>
        <ul class="text-[10px] text-indigo-900 space-y-0.5 list-disc pl-4 leading-relaxed">
          <li>
            <strong>👁️ Hiện menu:</strong> Bật/tắt hiển thị tên module trên thanh điều hướng bên trái (Sidebar). Nếu tắt, user hoàn toàn không thấy menu này trên màn hình.
          </li>
          <li>
            <strong>📖 Được xem:</strong> Cho phép truy cập vào module để xem danh sách phòng, hợp đồng, báo cáo, biểu đồ doanh thu mà không có quyền thay đổi.
          </li>
          <li>
            <strong>✏️ Được chỉnh sửa:</strong> Cấp toàn quyền thao tác thêm mới phòng, nhập chỉ số điện nước, xuất hóa đơn, thu tiền, ghi sổ quỹ và xóa sửa dữ liệu.
          </li>
        </ul>
      </div>

      <!-- Footer Buttons -->
      <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
        <button
          type="button"
          class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold transition cursor-pointer"
        >
          Hủy Bỏ
        </button>

        <button
          type="button"
          id="btn-save-perm-matrix"
          class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-black uppercase tracking-wider transition shadow-sm flex items-center gap-2 cursor-pointer active:scale-95"
        >
          <i data-lucide="shield-check" class="w-4 h-4"></i>
          <span>Lưu Phân Quyền</span>
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL 2: THÊM / SỬA PHÒNG (ROOM MODAL - CHUẨN 100% REACT RoomModal.tsx) -->
  <div id="modal-room" class="modal-overlay">
    <div class="relative w-full max-w-xl bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <!-- Header - Sunsilk Blue Gradient -->
      <div class="flex items-center justify-between px-5 py-3.5 bg-gradient-sunsilk text-white shadow-md">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-xl bg-white/15 text-white flex items-center justify-center font-black">
            <i data-lucide="home" class="w-4 h-4"></i>
          </div>
          <div>
            <h2 class="text-xs sm:text-sm font-black uppercase tracking-wider text-white" id="modal-room-title">
              Cập nhật phòng 101
            </h2>
            <p class="text-[10px] text-white/80" id="modal-room-subtitle">
              Cập nhật thông tin phòng và tiện nghi
            </p>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-switch-to-batch-rooms"
            class="px-2.5 py-1.5 rounded-xl bg-white/20 hover:bg-white/30 text-white font-bold text-xs flex items-center gap-1.5 transition cursor-pointer shadow-2xs"
            title="Chuyển sang thêm 1 lúc nhiều phòng giống modal nhân sự"
          >
            <i data-lucide="layers" class="w-3.5 h-3.5 text-emerald-300"></i>
            <span>Thêm nhiều phòng</span>
          </button>
          <button
            type="button"
            class="btn-close-modal p-1 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition cursor-pointer"
            title="Đóng (Esc)"
          >
            <i data-lucide="x" class="w-4 h-4"></i>
          </button>
        </div>
      </div>

      <!-- Form Body -->
      <form id="form-modal-room" class="p-4 sm:p-5 space-y-4 max-h-[82vh] overflow-y-auto text-xs">
        <!-- Section 1: Basic Room Info -->
        <div>
          <div class="flex items-center justify-between mb-3.5">
            <span class="text-[11px] font-bold tracking-wide flex items-center gap-1.5 text-slate-800 uppercase">
              <i data-lucide="home" class="w-3.5 h-3.5 text-blue-600"></i>
              <span>1. Thông tin cơ bản phòng</span>
            </span>
          </div>

          <div class="grid grid-cols-2 gap-x-3 gap-y-4 pt-1">
            <!-- CỘT 1: Mã phòng -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Mã phòng <span class="text-rose-500">*</span>
              </label>
              <input
                type="text"
                id="room-input-code"
                required
                placeholder="VD: 101, 201..."
                class="h-10 px-3 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full uppercase transition"
              />
            </div>

            <!-- CỘT 2: Trạng thái phòng -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Trạng thái phòng <span class="text-rose-500">*</span>
              </label>
              <select
                id="room-input-status"
                class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-blue-700 w-full transition cursor-pointer"
              >
                <option value="vacant">⚪ Phòng trống</option>
                <option value="rented">🟢 Đang cho thuê</option>
                <option value="reserved">🟡 Đã cọc giữ chỗ</option>
                <option value="maintenance">🔴 Đang sửa chữa / Bảo trì</option>
              </select>
            </div>

            <!-- HÀNG 2 - CỘT 1: Giá thuê niêm yết -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Giá thuê niêm yết (VNĐ) <span class="text-rose-500">*</span>
              </label>
              <div class="relative flex items-center">
                <input
                  type="text"
                  id="room-input-price"
                  inputmode="numeric"
                  placeholder="0"
                  required
                  class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full transition"
                />
                <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                  đ
                </span>
              </div>
            </div>

            <!-- HÀNG 2 - CỘT 2: Tiền cọc quy định -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Tiền cọc quy định (VNĐ)
              </label>
              <div class="relative flex items-center">
                <input
                  type="text"
                  id="room-input-std-deposit"
                  inputmode="numeric"
                  placeholder="0"
                  class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-blue-700 w-full transition"
                />
                <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                  đ
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Section 2: Xếp khách & Hợp đồng (HIỂN THỊ KHI CHỌN TRẠNG THÁI ĐANG CHO THUÊ) -->
        <div id="room-rented-details-section" class="space-y-3.5 hidden">
          <div class="border-t border-slate-200 my-1"></div>
          <div class="flex items-center justify-between mb-1">
            <span class="text-[11px] font-bold tracking-wide flex items-center gap-1.5 text-slate-800 uppercase">
              <i data-lucide="user" class="w-3.5 h-3.5 text-blue-600"></i>
              <span id="room-total-tenants-header">2. Thông tin khách thuê & Cư dân (1 người)</span>
            </span>
          </div>

          <!-- Hợp đồng: Ngày bắt đầu, Số tháng, Hạn HĐ -->
          <div class="grid grid-cols-3 gap-x-2 sm:gap-x-3 gap-y-4 pt-1">
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Ngày bắt đầu HĐ
              </label>
              <input
                type="date"
                id="room-input-start-date"
                class="h-10 px-2 sm:px-3 rounded-lg text-xs font-medium border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-800 w-full transition"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Thời hạn (tháng)
              </label>
              <input
                type="text"
                id="room-input-months"
                inputmode="numeric"
                placeholder=""
                class="h-10 px-2 sm:px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full text-center transition"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap flex items-center gap-1">
                <i data-lucide="lock" class="w-2.5 h-2.5 text-slate-400"></i>
                <span>Hạn HĐ (tự tính)</span>
              </label>
              <input
                type="date"
                id="room-input-end-date"
                readonly
                class="h-10 px-2 sm:px-3 rounded-lg text-xs font-bold border border-slate-300 bg-slate-100 text-slate-600 w-full cursor-not-allowed select-none"
              />
            </div>
          </div>

          <!-- DÒNG KHÁCH ĐẠI DIỆN VỚI NÚT DẤU [+] Ở CUỐI DÒNG ĐỂ THÊM NGƯỜI -->
          <div class="flex items-center gap-2 pt-1">
            <!-- Họ tên khách đại diện -->
            <div class="relative flex-1">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Khách đại diện (Người 1) <span class="text-rose-500">*</span>
              </label>
              <input
                type="text"
                id="room-input-tenant-name"
                placeholder="VD: Nguyễn Văn An..."
                class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full transition"
              />
            </div>

            <!-- Số điện thoại -->
            <div class="relative w-36 sm:w-44 shrink-0">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Số điện thoại
              </label>
              <input
                type="text"
                id="room-input-tenant-phone"
                placeholder="09..."
                class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full font-mono transition"
              />
            </div>

            <!-- Nút dấu + ở cuối dòng để thêm người -->
            <button
              type="button"
              id="btn-room-add-extra-tenant"
              title="Bấm để thêm người ở cùng (Người thứ 2, 3...)"
              class="h-10 px-3 rounded-lg bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 border border-blue-200 text-xs font-black transition flex items-center justify-center gap-1 shrink-0 cursor-pointer shadow-2xs active:scale-95"
            >
              <i data-lucide="plus" class="w-4 h-4"></i>
              <span class="hidden sm:inline">Thêm người</span>
            </button>
          </div>

          <!-- DANH SÁCH NGƯỜI THỨ 2 TRỞ ĐI: CÓ DẤU [-] Ở CUỐI DÒNG ĐỂ XÓA -->
          <div id="room-extra-tenants-list" class="space-y-3 pt-1">
            <!-- Dynamic extra tenants -->
          </div>

          <!-- DÒNG NHẬP BIỂN SỐ XE (TỰ TÍNH SỐ XE TÍNH PHÍ) -->
          <div class="pt-2">
            <div class="relative">
              <div class="flex items-center justify-between absolute top-0 -translate-y-1/2 left-2.5 right-2.5 z-10 pointer-events-none">
                <span class="px-1.5 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 whitespace-nowrap flex items-center gap-1 leading-none">
                  <i data-lucide="car" class="w-3.5 h-3.5 text-slate-400"></i>
                  <span>Biển số xe máy (cách bởi dấu phẩy)</span>
                </span>
                <span
                  id="room-vehicles-badge"
                  class="px-2 py-0.5 rounded-md text-[10px] font-black border shadow-2xs bg-blue-50 text-blue-700 border-blue-200"
                >
                  Số xe tính phí: 0 xe
                </span>
              </div>
              <input
                type="text"
                id="room-input-plates"
                placeholder="VD: 59-X1 234.56, 60-B4 192.48..."
                class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full uppercase transition"
              />
            </div>
          </div>

          <!-- Tiền cọc thực tế đã thu & Số điện bàn giao chìa khóa -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
            <!-- Tiền cọc thực tế đã thu -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Tiền cọc thực tế đã thu (VNĐ) <span class="text-rose-500">*</span>
              </label>
              <div class="relative flex items-center">
                <input
                  type="text"
                  id="room-input-deposit"
                  inputmode="numeric"
                  placeholder="0"
                  class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-blue-700 w-full transition"
                />
                <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                  đ
                </span>
              </div>
            </div>

            <!-- Số điện bàn giao ban đầu -->
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap flex items-center gap-1">
                <i data-lucide="zap" class="w-3 h-3 text-amber-500"></i>
                <span>Số điện bàn giao chìa khóa (kWh)</span>
                <span class="text-rose-500">*</span>
              </label>
              <input
                type="text"
                id="room-input-elec"
                inputmode="numeric"
                placeholder="0"
                class="h-10 px-3 rounded-lg text-xs font-mono font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-amber-900 w-full text-center transition"
              />
            </div>
          </div>
          <p class="text-[10px] text-slate-500 italic">
            * Số điện trên sẽ được dùng làm chỉ số điện đầu kỳ khi lập hóa đơn thu tiền tháng đầu tiên cho khách thuê.
          </p>
        </div>

        <div class="border-t border-slate-200 my-1"></div>

        <!-- Section: Ghi chú nội thất & tiện nghi -->
        <div class="pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Ghi chú nội thất & tiện nghi phòng
            </label>
            <textarea
              id="room-input-note"
              rows="2"
              placeholder="VD: Máy lạnh Daikin, Nệm lò xo, Tủ quần áo, Gác lửng, Ban công thoáng mát..."
              class="p-2.5 pt-3 rounded-lg text-xs font-medium border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-700 w-full transition"
            ></textarea>
          </div>
        </div>

        <!-- Bottom Actions -->
        <div class="flex items-center justify-between pt-3 border-t border-slate-200">
          <button
            type="button"
            id="btn-room-modal-delete"
            class="flex items-center gap-1 px-3 py-2 text-[11px] font-bold text-rose-600 hover:bg-rose-50 rounded-xl transition cursor-pointer"
          >
            <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
            <span>Xóa phòng</span>
          </button>

          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn-close-modal px-4 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition cursor-pointer"
            >
              Đóng (Esc)
            </button>
            <button
              type="submit"
              class="flex items-center gap-1.5 px-5 py-2 text-xs font-black uppercase text-white bg-gradient-sunsilk hover:opacity-95 rounded-xl shadow-md transition cursor-pointer"
            >
              <i data-lucide="save" class="w-4 h-4"></i>
              <span>Lưu thông tin</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 2B: THÊM NHIỀU PHÒNG CÙNG LÚC (BATCH ROOMS MODAL - GIỐNG MODAL THÊM NHÂN SỰ) -->
  <div id="modal-batch-rooms" class="modal-overlay p-3 sm:p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-6xl w-full max-h-[92vh] flex flex-col animate-in zoom-in-95 duration-150 overflow-hidden">
      <!-- Header -->
      <div class="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between shrink-0 bg-gradient-to-r from-slate-900 via-blue-950 to-indigo-950 text-white">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white flex items-center justify-center font-black shadow-sm shrink-0">
            <i data-lucide="layers" class="w-5 h-5 text-emerald-300"></i>
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h3 class="text-base sm:text-lg font-black text-white">
                Thêm Nhiều Phòng Cùng Lúc
              </h3>
              <span id="batch-rooms-row-count-badge" class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-500/30 text-blue-200 border border-blue-400/30">
                1 phòng
              </span>
            </div>
            <p class="text-xs text-slate-300">
              Nhập danh sách phòng mới theo từng dòng. Trạng thái mặc định là <strong class="text-amber-300">Phòng trống</strong>.
            </p>
          </div>
        </div>

        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-switch-to-single-room"
            class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs flex items-center gap-1.5 transition cursor-pointer"
            title="Quay lại thêm từng phòng đơn lẻ"
          >
            <i data-lucide="home" class="w-3.5 h-3.5"></i>
            <span>Thêm phòng đơn lẻ</span>
          </button>
          <button
            type="button"
            class="btn-close-modal p-2 rounded-xl hover:bg-white/10 text-white/80 hover:text-white transition cursor-pointer"
          >
            <i data-lucide="x" class="w-5 h-5"></i>
          </button>
        </div>
      </div>

      <!-- Quick Toolbar -->
      <div class="px-5 py-2.5 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-2 shrink-0">
        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-batch-rooms-add-row"
            class="px-3.5 py-1.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-xs font-black transition cursor-pointer flex items-center gap-1.5 shadow-2xs"
          >
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            <span>+ Thêm 1 dòng</span>
          </button>
          <div class="text-xs text-slate-500">
            (Đang có <strong id="batch-rooms-row-count-inline" class="text-blue-700 font-mono font-bold">1</strong> dòng)
          </div>
        </div>

        <div class="flex items-center gap-2 flex-wrap">
          <!-- Tạo nhanh dãy phòng tự động -->
          <button
            type="button"
            id="btn-batch-rooms-quick-generate"
            class="px-3 py-1.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold transition cursor-pointer flex items-center gap-1 shadow-2xs"
            title="Tự động sinh nhanh dãy phòng (VD: Phòng 101 đến 105)"
          >
            <i data-lucide="wand-2" class="w-3.5 h-3.5"></i>
            <span>+ Tạo nhanh dãy phòng</span>
          </button>

          <button
            type="button"
            id="btn-batch-rooms-clear"
            class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-100 text-slate-600 text-xs font-bold border border-slate-300 transition cursor-pointer flex items-center gap-1"
          >
            <i data-lucide="rotate-ccw" class="w-3.5 h-3.5 text-slate-400"></i>
            <span>Xóa trắng</span>
          </button>
        </div>
      </div>

      <!-- Table Form (Scrollable) -->
      <form id="form-modal-batch-rooms" class="flex-1 flex flex-col overflow-hidden">
        <div class="flex-1 overflow-y-auto p-4 sm:p-5">
          <div class="border border-slate-200 rounded-2xl overflow-hidden shadow-2xs">
            <div class="overflow-x-auto">
              <table class="w-full text-left border-collapse text-xs">
                <thead class="sticky top-0 z-10">
                  <tr class="bg-slate-100 border-b border-slate-200 text-slate-600 uppercase font-black text-[10px] tracking-wider">
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 min-w-[120px]">Mã phòng <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[80px]">Tầng</th>
                    <th class="py-2.5 px-3 min-w-[140px]">Đơn giá thuê (đ/tháng)</th>
                    <th class="py-2.5 px-3 min-w-[140px]">Tiền cọc (đ)</th>
                    <th class="py-2.5 px-3 min-w-[90px]">Diện tích (m²)</th>
                    <th class="py-2.5 px-3 min-w-[130px]">Trạng thái</th>
                    <th class="py-2.5 px-3 min-w-[180px]">Tiện nghi / Ghi chú</th>
                    <th class="py-2.5 px-3 w-10 text-center">Xóa</th>
                  </tr>
                </thead>
                <tbody id="batch-rooms-tbody" class="divide-y divide-slate-200 bg-white">
                  <!-- Dynamic rows generated by renderBatchRoomsTable() -->
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="p-4 sm:px-6 bg-slate-50 border-t border-slate-200 flex flex-wrap items-center justify-between gap-3 shrink-0">
          <div class="flex items-center gap-2">
            <button
              type="button"
              id="btn-batch-rooms-add-row-bottom"
              class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-100 text-slate-700 text-xs font-bold border border-slate-300 transition cursor-pointer flex items-center gap-1 shadow-2xs"
            >
              <i data-lucide="plus" class="w-3.5 h-3.5 text-blue-600"></i>
              <span>+ Thêm dòng</span>
            </button>
            <span class="text-xs text-slate-500">
              Tổng số phòng: <strong id="batch-rooms-row-count-footer" class="text-blue-700 font-mono font-bold">1 phòng</strong>
            </span>
          </div>

          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn-close-modal px-4 py-2 rounded-xl bg-white hover:bg-slate-100 text-slate-700 text-xs font-bold border border-slate-300 transition cursor-pointer"
            >
              Hủy bỏ
            </button>
            <button
              type="submit"
              id="btn-batch-rooms-save"
              class="px-5 py-2 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white text-xs font-black uppercase tracking-wider transition shadow-sm flex items-center gap-2 cursor-pointer active:scale-95"
            >
              <i data-lucide="check" class="w-4 h-4"></i>
              <span>Lưu danh sách phòng</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 3: CHI TIẾT PHÒNG (ROOM DETAIL MODAL - CHUẨN 100% REACT RoomDetailModal.tsx) -->
  <div id="modal-room-detail" class="modal-overlay">
    <div class="bg-white rounded-3xl max-w-lg w-full shadow-2xl border border-slate-200 overflow-hidden max-h-[90vh] flex flex-col animate-in fade-in zoom-in-95 duration-150">
      <!-- Header -->
      <div class="bg-gradient-card text-white p-3.5 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-2.5">
          <div class="w-9 h-9 rounded-xl bg-white/15 flex items-center justify-center border border-white/25">
            <i data-lucide="home" class="w-5 h-5 text-amber-300"></i>
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h3 class="font-black text-sm uppercase tracking-wider" id="modal-detail-room-code">
                PHÒNG 101
              </h3>
              <span
                id="modal-detail-status-badge"
                class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider bg-emerald-400/20 text-emerald-200 border border-emerald-300/40"
              >
                Đang thuê
              </span>
            </div>
            <p class="text-[10px] text-white/75 mt-0.5">
              Thông tin chi tiết phòng, nội thất & khách thuê
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-lg hover:bg-white/10 text-white/80 hover:text-white transition cursor-pointer"
          title="Đóng (Esc)"
        >
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <!-- Body -->
      <div class="p-4 overflow-y-auto space-y-4 text-xs">
        <!-- 1. Giá & Cọc & Điện -->
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-blue-50/70 border border-blue-200/80 p-2.5 rounded-xl text-center">
            <span class="text-[9px] font-black uppercase text-blue-700 block">Giá phòng</span>
            <span class="text-xs sm:text-sm font-black text-blue-900 mt-0.5 block" id="detail-room-price">
              0 đ
            </span>
          </div>
          <div class="bg-indigo-50/70 border border-indigo-200/80 p-2.5 rounded-xl text-center">
            <span class="text-[9px] font-black uppercase text-indigo-700 block" id="detail-room-deposit-label">
              Tiền cọc giữ
            </span>
            <span class="text-xs sm:text-sm font-black text-indigo-900 mt-0.5 block" id="detail-room-deposit">
              0 đ
            </span>
          </div>
          <div class="bg-amber-50/70 border border-amber-200/80 p-2.5 rounded-xl text-center">
            <span class="text-[9px] font-black uppercase text-amber-800 block">Số điện hiện tại</span>
            <span class="text-xs sm:text-sm font-black text-amber-900 mt-0.5 block" id="detail-room-elec">
              0 kWh
            </span>
          </div>
        </div>

        <!-- 2. Trang thiết bị & Nội thất trong phòng -->
        <div class="bg-slate-50 border border-slate-200/80 rounded-2xl p-3 space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-[10px] font-black uppercase tracking-wider text-slate-700 flex items-center gap-1">
              <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-500"></i>
              <span>Trang thiết bị & Nội thất trong phòng</span>
            </span>
          </div>
          <div class="flex flex-wrap gap-1.5" id="detail-amenities-container">
            <!-- Dynamic amenities chips -->
          </div>
        </div>

        <!-- 3. Thông tin khách thuê & Hợp đồng (if rented) -->
        <div id="detail-rented-container" class="space-y-3">
          <!-- Khách thuê -->
          <div class="bg-white border border-slate-200 rounded-2xl p-3 space-y-2.5 shadow-2xs">
            <div class="flex items-center justify-between border-b border-slate-100 pb-2">
              <span class="text-[10px] font-black uppercase tracking-wider text-blue-800 flex items-center gap-1">
                <i data-lucide="user" class="w-3.5 h-3.5 text-blue-600"></i>
                <span>Người thuê phòng</span>
              </span>
              <span id="detail-total-people-badge" class="px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 font-black text-[10px] flex items-center gap-1">
                <i data-lucide="users" class="w-3 h-3"></i>
                <span>Tổng 1 người ở</span>
              </span>
            </div>

            <!-- Người đại diện -->
            <div class="flex items-center justify-between bg-blue-50/40 p-2.5 rounded-xl border border-blue-100">
              <div>
                <div class="text-[10px] text-slate-400 font-semibold">Người đại diện ký HĐ</div>
                <div class="font-black text-slate-900 text-xs mt-0.5" id="detail-tenant-name">
                  Chưa cập nhật tên
                </div>
              </div>
              <a
                id="detail-tenant-phone-link"
                href="#"
                class="px-2.5 py-1.5 rounded-lg bg-blue-600 text-white font-bold text-[11px] flex items-center gap-1 shadow-2xs hover:bg-blue-700 transition"
              >
                <i data-lucide="phone" class="w-3 h-3"></i>
                <span id="detail-tenant-phone-text">Chưa có SĐT</span>
              </a>
            </div>

            <!-- Danh sách người ở cùng -->
            <div id="detail-extra-tenants-section" class="space-y-1.5 pt-1 hidden">
              <div class="text-[10px] font-bold text-slate-500" id="detail-extra-tenants-title">
                Thành viên ở cùng (0 người):
              </div>
              <div id="detail-extra-tenants-list" class="grid grid-cols-1 gap-1.5">
                <!-- Dynamic extra tenants -->
              </div>
            </div>

            <!-- Thông tin xe & Biển số -->
            <div class="pt-2 border-t border-slate-100 flex items-center justify-between gap-2">
              <span class="flex items-center gap-1 font-bold text-slate-700">
                <i data-lucide="bike" class="w-3.5 h-3.5 text-indigo-600"></i>
                <span id="detail-vehicle-count-label">Xe máy (0 chiếc):</span>
              </span>
              <div class="flex flex-wrap gap-1 justify-end" id="detail-plates-container">
                <!-- Dynamic plates -->
              </div>
            </div>
          </div>

          <!-- Hợp đồng thuê phòng -->
          <div class="bg-white border border-slate-200 rounded-2xl p-3 space-y-2 shadow-2xs">
            <div class="flex items-center justify-between">
              <span class="text-[10px] font-black uppercase tracking-wider text-slate-700 flex items-center gap-1">
                <i data-lucide="calendar" class="w-3.5 h-3.5 text-blue-600"></i>
                <span>Thời hạn hợp đồng</span>
              </span>
              <span id="detail-contract-days-badge" class="px-2 py-0.5 rounded-full text-[10px] font-black bg-emerald-100 text-emerald-700">
                HĐ còn 300 ngày
              </span>
            </div>

            <div class="grid grid-cols-3 gap-2 bg-slate-50 p-2 rounded-xl text-center">
              <div>
                <span class="text-[9px] text-slate-400 block font-semibold">Ngày bắt đầu</span>
                <span class="font-bold text-slate-800 text-[11px]" id="detail-contract-start">--/--/----</span>
              </div>
              <div>
                <span class="text-[9px] text-slate-400 block font-semibold">Thời hạn</span>
                <span class="font-bold text-blue-700 text-[11px]" id="detail-contract-months">12 tháng</span>
              </div>
              <div>
                <span class="text-[9px] text-slate-400 block font-semibold">Ngày kết thúc</span>
                <span class="font-bold text-slate-800 text-[11px]" id="detail-contract-end">--/--/----</span>
              </div>
            </div>
          </div>

          <!-- Ghi chú -->
          <div id="detail-room-note-box" class="bg-amber-50/70 border border-amber-200/80 rounded-xl p-2.5 text-[11px] text-amber-900 hidden">
            <span class="font-black">Ghi chú phòng: </span>
            <span id="detail-room-note-text"></span>
          </div>
        </div>

        <!-- 4. Phần phòng trống -->
        <div id="detail-vacant-container" class="py-6 text-center bg-amber-50/50 border border-dashed border-amber-200 rounded-2xl space-y-2 hidden">
          <p class="font-black text-amber-800 text-sm">Phòng đang trống sẵn sàng đón khách</p>
          <p class="text-[11px] text-slate-500 max-w-xs mx-auto" id="detail-vacant-note">
            Bạn có thể bấm nút "Xếp khách vào phòng" bên dưới để làm hợp đồng nhanh.
          </p>
        </div>
      </div>

      <!-- Footer Actions -->
      <div class="p-3 border-t border-slate-200 bg-slate-50 flex flex-wrap items-center justify-between gap-2 shrink-0">
        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-detail-delete-room"
            class="px-3 py-2 rounded-xl border border-rose-200 bg-rose-50 hover:bg-rose-100 text-rose-700 font-bold text-xs flex items-center gap-1.5 transition cursor-pointer"
            title="Xóa phòng này khỏi tòa nhà"
          >
            <i data-lucide="trash-2" class="w-3.5 h-3.5 text-rose-600"></i>
            <span>Xóa phòng</span>
          </button>

          <button
            type="button"
            id="btn-detail-open-edit"
            class="px-3 py-2 rounded-xl border border-slate-300 bg-white hover:bg-slate-100 text-slate-700 font-bold text-xs flex items-center gap-1.5 transition cursor-pointer"
          >
            <i data-lucide="edit" class="w-3.5 h-3.5 text-amber-600"></i>
            <span>Sửa thông tin</span>
          </button>
        </div>

        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-detail-checkout"
            class="px-3.5 py-2 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 font-bold text-xs flex items-center gap-1.5 transition cursor-pointer"
            title="Khách trả phòng và thanh lý hợp đồng"
          >
            <i data-lucide="user-minus" class="w-3.5 h-3.5 text-rose-600"></i>
            <span>Trả phòng</span>
          </button>
          <button
            type="button"
            id="btn-detail-open-invoice"
            class="px-3.5 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-black text-xs flex items-center gap-1.5 shadow-xs transition cursor-pointer"
          >
            <i data-lucide="receipt" class="w-3.5 h-3.5"></i>
            <span>Phiếu thu QR</span>
          </button>
          <button
            type="button"
            id="btn-detail-open-assign"
            class="px-3.5 py-2 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white font-black text-xs flex items-center gap-1.5 shadow-xs transition cursor-pointer"
          >
            <i data-lucide="user-plus" class="w-3.5 h-3.5"></i>
            <span id="btn-detail-open-assign-text">Cập nhật HĐ</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- MODAL 4: XẾP KHÁCH & BÀN GIAO PHÒNG (ASSIGN ROOM MODAL - CHUẨN 100% REACT AssignRoomModal.tsx) -->
  <div id="modal-assign-room" class="modal-overlay">
    <div class="bg-white rounded-3xl max-w-xl w-full shadow-2xl border border-slate-200 overflow-hidden max-h-[92vh] flex flex-col animate-in fade-in zoom-in-95 duration-150">
      <!-- Header -->
      <div class="bg-gradient-card text-white p-3.5 flex items-center justify-between sticky top-0 z-20 shrink-0">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-xl bg-white/15 flex items-center justify-center border border-white/25">
            <i data-lucide="user-plus" class="w-4 h-4 text-amber-300"></i>
          </div>
          <div>
            <h3 class="font-black text-xs sm:text-sm uppercase tracking-wider" id="modal-assign-title">
              Bàn giao & Xếp khách vào Phòng 101
            </h3>
            <p class="text-[10px] text-white/80" id="modal-assign-subtitle">
              Giá chuẩn: 4.200.000 đ/tháng • Cọc chuẩn: 4.200.000 đ
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1 rounded-lg hover:bg-white/10 text-white/80 hover:text-white transition cursor-pointer"
          title="Đóng (Esc)"
        >
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <!-- Form -->
      <form id="form-modal-assign-room" class="p-4 overflow-y-auto space-y-4 text-xs">
        <!-- 1. Người đại diện & Danh sách người ở cùng -->
        <div class="bg-blue-50/40 p-3.5 rounded-2xl border border-blue-200/80 space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-[11px] font-black text-blue-900 uppercase tracking-wider flex items-center gap-1.5">
              <i data-lucide="user" class="w-3.5 h-3.5 text-blue-600"></i>
              <span>1. Thông tin người thuê</span>
            </span>
            <span id="assign-total-tenants-badge" class="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 font-black text-[10px] flex items-center gap-1">
              <i data-lucide="users" class="w-3 h-3"></i>
              <span>Tổng cộng: 1 người ở</span>
            </span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Họ tên người đại diện ký HĐ *
              </label>
              <input
                type="text"
                id="assign-input-tenant-name"
                required
                placeholder="Nguyễn Văn A"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-bold text-slate-900 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Số điện thoại Zalo / Liên hệ *
              </label>
              <input
                type="text"
                id="assign-input-tenant-phone"
                placeholder="0901234567"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-bold text-slate-900 focus:border-blue-500 outline-none"
              />
            </div>
          </div>

          <!-- Danh sách người ở cùng -->
          <div class="space-y-2 pt-1">
            <div class="flex items-center justify-between">
              <span class="text-[11px] font-bold text-slate-600">
                Danh sách người ở cùng (nếu có):
              </span>
              <button
                type="button"
                id="btn-assign-add-extra-tenant"
                class="px-2.5 py-1 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold text-[10px] flex items-center gap-1 transition cursor-pointer shadow-2xs"
              >
                <i data-lucide="plus" class="w-3 h-3"></i>
                <span>Thêm người ở cùng</span>
              </button>
            </div>

            <div id="assign-extra-tenants-list" class="space-y-2">
              <!-- Dynamic extra tenants rows -->
            </div>
          </div>
        </div>

        <!-- 2. Hợp đồng & Tiền phòng / Tiền cọc -->
        <div class="bg-slate-50 p-3.5 rounded-2xl border border-slate-200 space-y-3">
          <div class="text-[11px] font-black text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
            <i data-lucide="calendar" class="w-3.5 h-3.5 text-blue-600"></i>
            <span>2. Hợp đồng & Tiền phòng / Tiền cọc</span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-1">
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Ngày bắt đầu tính tiền
              </label>
              <input
                type="date"
                id="assign-input-start-date"
                class="w-full h-10 px-2.5 rounded-lg border border-slate-300 bg-white font-bold text-slate-800 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Thời hạn hợp đồng
              </label>
              <select
                id="assign-input-months"
                class="w-full h-10 px-2.5 rounded-lg border border-slate-300 bg-white font-bold text-blue-700 focus:border-blue-500 outline-none cursor-pointer"
              >
                <option value="">-- Chọn thời hạn --</option>
                <option value="3">3 tháng</option>
                <option value="6">6 tháng</option>
                <option value="12">12 tháng (1 năm)</option>
                <option value="24">24 tháng (2 năm)</option>
              </select>
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Ngày kết thúc HĐ (Tự tính)
              </label>
              <input
                type="date"
                id="assign-input-end-date"
                class="w-full h-10 px-2.5 rounded-lg border border-slate-300 bg-slate-100 font-bold text-slate-700 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Giá thuê chốt (đ/tháng)
              </label>
              <input
                type="text"
                inputmode="numeric"
                id="assign-input-price"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-black text-blue-700 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
                Tiền cọc thực thu (đ)
              </label>
              <input
                type="text"
                inputmode="numeric"
                id="assign-input-deposit"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-black text-indigo-700 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10 flex items-center gap-0.5">
                <i data-lucide="zap" class="w-2.5 h-2.5 text-amber-500"></i>
                <span>Số điện bàn giao (kWh)</span>
              </label>
              <input
                type="text"
                inputmode="numeric"
                id="assign-input-elec"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-black text-amber-700 focus:border-blue-500 outline-none"
              />
            </div>
          </div>
        </div>

        <!-- 3. Xe máy & Biển số -->
        <div class="bg-indigo-50/40 p-3.5 rounded-2xl border border-indigo-200/80 space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-[11px] font-black text-indigo-900 uppercase tracking-wider flex items-center gap-1.5">
              <i data-lucide="bike" class="w-3.5 h-3.5 text-indigo-600"></i>
              <span>3. Đăng ký xe máy (100.000đ/xe/tháng)</span>
            </span>
            <span id="assign-vehicles-badge" class="px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-800 font-black text-[10px]">
              Số xe: 0 chiếc
            </span>
          </div>

          <div class="pt-1">
            <div class="relative">
              <label class="absolute top-0 -translate-y-1/2 left-2.5 px-1.5 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 leading-none">
                Biển số các xe (cách nhau dấu phẩy ,)
              </label>
              <input
                type="text"
                id="assign-input-plates"
                placeholder="VD: 59X1-123.45, 59Y2-678.90"
                class="w-full h-10 px-3 rounded-lg border border-slate-300 bg-white font-bold text-indigo-900 focus:border-indigo-500 outline-none uppercase"
              />
            </div>
          </div>
        </div>

        <!-- Ghi chú -->
        <div class="relative pt-1">
          <label class="absolute -top-1 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10">
            Ghi chú hợp đồng / Cam kết riêng
          </label>
          <textarea
            id="assign-input-note"
            rows="2"
            placeholder="Nhập ghi chú nếu có..."
            class="w-full p-3 rounded-xl border border-slate-300 bg-white text-slate-700 focus:border-blue-500 outline-none"
          ></textarea>
        </div>

        <!-- Footer -->
        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-200">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl border border-slate-300 text-slate-600 font-bold hover:bg-slate-100 transition cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-sunsilk text-white font-black uppercase tracking-wider shadow-sm hover:opacity-95 transition flex items-center gap-1.5 cursor-pointer"
          >
            <i data-lucide="save" class="w-4 h-4"></i>
            <span>Xác nhận bàn giao phòng</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 5: PHIẾU THU TIỀN PHÒNG & VIETQR (INVOICE MODAL - CHUẨN 100% REACT InvoiceModal.tsx) -->
  <div id="modal-invoice" class="modal-overlay">
    <div class="bg-white rounded-3xl max-w-xl w-full shadow-2xl border border-slate-200 overflow-hidden max-h-[94vh] flex flex-col animate-in fade-in zoom-in-95 duration-150">
      <!-- Modal Action Header (Hidden when printing) -->
      <div class="bg-gradient-card text-white p-3 sm:p-4 flex items-center justify-between print:hidden shrink-0">
        <div class="flex items-center gap-2">
          <span class="font-black text-xs sm:text-sm uppercase tracking-wider" id="modal-invoice-title">
            PHIẾU THU PHÒNG 101
          </span>
          <span
            id="modal-invoice-badge"
            class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-emerald-400/20 text-emerald-200 border border-emerald-300/40"
          >
            Đã thu xong
          </span>
        </div>

        <div class="flex items-center gap-1.5">
          <button
            type="button"
            id="btn-invoice-toggle-paid"
            class="px-2.5 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-wider transition flex items-center gap-1 cursor-pointer bg-emerald-500 text-white hover:bg-emerald-600 shadow-xs"
          >
            <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
            <span id="btn-invoice-toggle-text">Xác nhận ĐÃ THU TIỀN</span>
          </button>

          <button
            type="button"
            id="btn-invoice-copy-zalo"
            class="px-2.5 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-wider transition flex items-center gap-1 cursor-pointer bg-white/15 hover:bg-white/25 text-white border border-white/25"
          >
            <i data-lucide="copy" class="w-3.5 h-3.5" id="icon-copy-zalo"></i>
            <span id="btn-copy-zalo-text">Chép tin Zalo</span>
          </button>

          <button
            type="button"
            id="btn-invoice-print"
            class="px-2.5 py-1.5 rounded-lg bg-white text-blue-800 hover:bg-blue-50 font-black text-[10px] uppercase tracking-wider transition flex items-center gap-1 cursor-pointer"
          >
            <i data-lucide="printer" class="w-3.5 h-3.5"></i>
            <span class="hidden sm:inline">In / Lưu PDF</span>
          </button>

          <button
            type="button"
            class="btn-close-modal p-1.5 rounded-lg hover:bg-white/10 text-white/80 hover:text-white transition cursor-pointer"
            title="Đóng (Esc)"
          >
            <i data-lucide="x" class="w-4 h-4"></i>
          </button>
        </div>
      </div>

      <!-- Printable Invoice Content -->
      <div class="p-4 sm:p-6 overflow-y-auto space-y-4 text-xs text-slate-800 print:p-0 print:overflow-visible">
        <!-- 1. Building Header -->
        <div class="border-b-2 border-slate-800 pb-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
          <div>
            <div class="flex items-center gap-1.5 text-blue-800 font-black text-sm sm:text-base uppercase">
              <i data-lucide="building-2" class="w-4 h-4 text-blue-600"></i>
              <span id="invoice-building-name">TÒA NHÀ QUẢN LÝ</span>
            </div>
            <p class="text-[11px] text-slate-500 mt-0.5" id="invoice-building-address">
              Địa chỉ cơ sở quản lý
            </p>
          </div>
          <div class="sm:text-right">
            <div class="inline-block px-3 py-1 rounded-lg bg-blue-900 text-white font-black text-xs uppercase tracking-wider">
              PHIẾU BÁO TIỀN PHÒNG
            </div>
            <div class="text-[11px] font-bold text-slate-600 mt-1">
              Kỳ thu: <span class="text-blue-700 font-black" id="invoice-month-badge">Tháng 09/2026</span>
            </div>
            <div class="text-[10px] text-slate-400">
              QL: <strong class="text-slate-600" id="invoice-manager-name">Trần Quản Lý</strong> - <span id="invoice-hotline">0901.234.567</span>
            </div>
          </div>
        </div>

        <!-- 2. Room & Tenant Info Bar -->
        <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 grid grid-cols-2 sm:grid-cols-3 gap-2">
          <div>
            <span class="text-[10px] text-slate-400 font-bold uppercase block">Phòng</span>
            <span class="text-sm font-black text-blue-800" id="invoice-room-code">P.101</span>
          </div>
          <div>
            <span class="text-[10px] text-slate-400 font-bold uppercase block">Khách đại diện</span>
            <span class="font-black text-slate-900 text-xs block truncate" id="invoice-tenant-name">
              Khách thuê
            </span>
          </div>
          <div class="col-span-2 sm:col-span-1 flex sm:flex-col justify-between">
            <span class="text-[10px] text-slate-400 font-bold uppercase block">Nhân khẩu & Xe</span>
            <span class="font-bold text-slate-700 text-xs" id="invoice-scale-summary">
              1 người • 1 xe máy
            </span>
          </div>
        </div>

        <!-- 3. Detailed Table -->
        <div class="border border-slate-200 rounded-xl overflow-hidden">
          <table class="w-full text-left border-collapse">
            <thead>
              <tr class="bg-slate-100 border-b border-slate-200 text-[10px] font-black uppercase text-slate-600">
                <th class="py-2 px-3">Chi tiết khoản thu</th>
                <th class="py-2 px-2 text-center">Số lượng / Chỉ số</th>
                <th class="py-2 px-2 text-right">Đơn giá</th>
                <th class="py-2 px-3 text-right">Thành tiền</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200 text-xs">
              <tr>
                <td class="py-2.5 px-3 font-bold text-slate-800">1. Tiền thuê phòng cố định</td>
                <td class="py-2.5 px-2 text-center text-slate-600" id="invoice-row-room-qty">1 tháng</td>
                <td class="py-2.5 px-2 text-right text-slate-600" id="invoice-row-room-unit">0 đ</td>
                <td class="py-2.5 px-3 text-right font-black text-slate-900" id="invoice-row-room-price">0 đ</td>
              </tr>

              <tr>
                <td class="py-2.5 px-3">
                  <div class="font-bold text-slate-800 flex items-center gap-1">
                    <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
                    <span>2. Tiền điện sinh hoạt</span>
                  </div>
                  <div class="text-[10px] text-slate-500 mt-0.5" id="invoice-row-elec-subtext">
                    Số cũ: 0 ➔ Số mới: 0
                  </div>
                </td>
                <td class="py-2.5 px-2 text-center font-black text-amber-700" id="invoice-row-elec-usage">
                  0 kWh
                </td>
                <td class="py-2.5 px-2 text-right text-slate-600" id="invoice-row-elec-rate">
                  3.500 đ
                </td>
                <td class="py-2.5 px-3 text-right font-black text-slate-900" id="invoice-row-elec-amount">
                  0 đ
                </td>
              </tr>

              <tr>
                <td class="py-2.5 px-3">
                  <div class="font-bold text-slate-800 flex items-center gap-1">
                    <i data-lucide="droplets" class="w-3.5 h-3.5 text-cyan-600"></i>
                    <span>3. Combo dịch vụ (Nước, Wifi, Rác, VS)</span>
                  </div>
                </td>
                <td class="py-2.5 px-2 text-center text-slate-600" id="invoice-row-combo-qty">1 gói</td>
                <td class="py-2.5 px-2 text-right text-slate-600" id="invoice-row-combo-rate">150.000 đ</td>
                <td class="py-2.5 px-3 text-right font-black text-slate-900" id="invoice-row-combo-amount">150.000 đ</td>
              </tr>

              <tr>
                <td class="py-2.5 px-3">
                  <div class="font-bold text-slate-800 flex items-center gap-1">
                    <i data-lucide="bike" class="w-3.5 h-3.5 text-indigo-600"></i>
                    <span>4. Phí gửi xe máy</span>
                  </div>
                </td>
                <td class="py-2.5 px-2 text-center text-slate-600" id="invoice-row-vehicle-count">1 xe</td>
                <td class="py-2.5 px-2 text-right text-slate-600" id="invoice-row-vehicle-rate">100.000 đ</td>
                <td class="py-2.5 px-3 text-right font-black text-slate-900" id="invoice-row-vehicle-amount">100.000 đ</td>
              </tr>

              <tr id="invoice-row-other-fee-tr" class="hidden">
                <td class="py-2.5 px-3 font-bold text-slate-800">5. Phụ phí / Giảm trừ khác</td>
                <td class="py-2.5 px-2 text-center text-slate-600">--</td>
                <td class="py-2.5 px-2 text-right text-slate-600" id="invoice-row-other-fee-unit">0 đ</td>
                <td class="py-2.5 px-3 text-right font-black text-slate-900" id="invoice-row-other-fee-amount">0 đ</td>
              </tr>

              <tr class="bg-blue-50/80 border-t-2 border-blue-200">
                <td colspan="3" class="py-3 px-3 font-black text-blue-900 uppercase text-xs">
                  TỔNG CỘNG THANH TOÁN
                </td>
                <td class="py-3 px-3 text-right font-black text-base text-rose-600" id="invoice-grand-total">
                  0 đ
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 4. Payment Info & VietQR -->
        <div class="bg-blue-50/70 border border-blue-200 rounded-2xl p-3.5 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div class="space-y-1.5 flex-1">
            <div class="text-[10px] font-black uppercase tracking-wider text-blue-800">
              THÔNG TIN CHUYỂN KHOẢN THANH TOÁN
            </div>
            <div class="grid grid-cols-1 gap-1 text-xs">
              <div>
                <span class="text-slate-500">Ngân hàng: </span>
                <strong class="text-slate-900 font-black" id="invoice-bank-name">MB Bank</strong>
              </div>
              <div>
                <span class="text-slate-500">Số tài khoản: </span>
                <strong class="text-blue-700 font-black text-sm tracking-wider" id="invoice-bank-account">
                  0901234567
                </strong>
              </div>
              <div>
                <span class="text-slate-500">Chủ tài khoản: </span>
                <strong class="text-slate-900 font-bold uppercase" id="invoice-bank-owner">
                  CONG TY QUAN LY TOA NHA
                </strong>
              </div>
              <div>
                <span class="text-slate-500">Nội dung CK: </span>
                <span class="px-2 py-0.5 rounded bg-amber-100 text-amber-900 font-black text-[11px]" id="invoice-memo">
                  PHONG 101 THANG 092026
                </span>
              </div>
            </div>
            <p class="text-[10px] text-slate-500 pt-1 flex items-center gap-1">
              <i data-lucide="phone" class="w-3 h-3 text-blue-600 shrink-0"></i>
              <span>Hotline / Zalo đối soát: <strong id="invoice-hotline-footer">0901.234.567</strong></span>
            </p>
          </div>

          <div class="bg-white p-2 rounded-xl border border-slate-200 shadow-xs text-center shrink-0">
            <img
              id="invoice-vietqr-image"
              src=""
              alt="VietQR"
              class="w-32 h-32 object-contain mx-auto"
            />
            <span class="text-[9px] font-bold text-slate-500 block mt-1">
              Quét mã VietQR tự động điền số tiền
            </span>
          </div>
        </div>

        <!-- 5. Footer Note -->
        <p class="text-[10px] text-slate-500 italic text-center" id="invoice-payment-notice">
          Quý khách vui lòng thanh toán đúng hạn từ ngày 01 đến ngày 05 hàng tháng. Trân trọng cảm ơn!
        </p>
      </div>
    </div>
  </div>

  <!-- MODAL XÁC NHẬN THAO TÁC PHÒNG (TRẢ PHÒNG / XÓA PHÒNG) -->
  <div id="modal-confirm-action" class="modal-overlay">
    <div class="bg-white rounded-3xl max-w-md w-full p-5 shadow-2xl border border-slate-200 space-y-4 animate-in fade-in zoom-in-95 duration-150">
      <div class="flex items-start gap-3">
        <div id="confirm-modal-icon-box" class="w-10 h-10 rounded-2xl bg-rose-50 text-rose-600 flex items-center justify-center shrink-0">
          <i data-lucide="alert-triangle" class="w-5 h-5"></i>
        </div>
        <div class="space-y-1">
          <h3 class="font-black text-slate-900 text-sm uppercase tracking-wide" id="confirm-modal-title">
            Xác nhận thao tác
          </h3>
          <p class="text-xs text-slate-600 leading-relaxed" id="confirm-modal-message">
            Bạn có chắc chắn muốn thực hiện thao tác này?
          </p>
        </div>
      </div>
      <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
        <button type="button" class="btn-close-modal px-4 py-2 rounded-xl border border-slate-300 text-slate-600 font-bold text-xs hover:bg-slate-100 transition cursor-pointer">
          Hủy bỏ
        </button>
        <button type="button" id="btn-confirm-modal-ok" class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-black text-xs uppercase tracking-wider shadow-xs transition cursor-pointer">
          Xác nhận
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL 5: THÊM / CẤU HÌNH TÒA NHÀ (BUILDING CONFIG MODAL - CHUẨN 100% REACT BuildingConfigModal.tsx) -->
  <div id="modal-building-config" class="modal-overlay">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-xl w-full my-auto overflow-hidden animate-in zoom-in-95 duration-200">
      <!-- Modal Header -->
      <div class="bg-gradient-to-r from-blue-700 to-indigo-700 p-5 sm:p-6 text-white flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-white/20 flex items-center justify-center font-bold shrink-0">
            <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
          </div>
          <div>
            <h3 id="modal-building-title" class="text-base font-black uppercase tracking-tight text-white">
              Tạo Mới Tòa Nhà Vào Chuỗi
            </h3>
            <p id="modal-building-subtitle" class="text-xs text-blue-100 mt-0.5">
              Khai báo cơ sở mới và cấu hình bảng giá thu tiền
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-2 rounded-xl bg-white/10 hover:bg-white/20 text-white transition cursor-pointer"
          title="Đóng (Esc)"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Modal Form -->
      <form id="form-building-config" class="p-5 sm:p-6 space-y-4 max-h-[80vh] overflow-y-auto text-xs">
        <!-- 1. THÔNG TIN CƠ SỞ -->
        <div class="space-y-3">
          <div class="font-black text-slate-800 uppercase tracking-wider text-[11px] pb-1 border-b border-slate-100 flex items-center gap-1.5">
            <i data-lucide="map-pin" class="w-3.5 h-3.5 text-blue-600"></i>
            <span>1. Thông Tin Cơ Sở</span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label class="font-bold text-slate-700 block mb-1">
                Mã Tòa Nhà (Slug) <span class="text-rose-500">*</span>
              </label>
              <input
                type="text"
                id="cfg-bld-code"
                required
                placeholder="VD: 550-truong-chinh"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 font-mono text-slate-800 disabled:bg-slate-100 disabled:opacity-70 focus:border-blue-500 outline-none"
              />
            </div>

            <div>
              <label class="font-bold text-slate-700 block mb-1">
                Tên Tòa Nhà <span class="text-rose-500">*</span>
              </label>
              <input
                type="text"
                id="cfg-bld-name"
                required
                placeholder="VD: Tòa nhà 550 Trường Chinh"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:border-blue-500 font-bold text-slate-900 outline-none"
              />
            </div>

            <div class="sm:col-span-2">
              <label class="font-bold text-slate-700 block mb-1">Địa Chỉ Chi Tiết</label>
              <input
                type="text"
                id="cfg-bld-address"
                placeholder="VD: 550 Trường Chinh, P.13, Q.Tân Bình, TP.HCM"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:border-blue-500 outline-none"
              />
            </div>

            <div class="sm:col-span-2">
              <label class="font-bold text-slate-700 block mb-1 flex items-center gap-1">
                <i data-lucide="phone" class="w-3 h-3 text-sky-600"></i>
                <span>Hotline Liên Hệ / Hỗ Trợ Tòa Nhà</span>
              </label>
              <input
                type="text"
                id="cfg-bld-hotline"
                placeholder="VD: 0909 550 550"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:border-blue-500 font-mono outline-none"
              />
            </div>
          </div>
        </div>

        <!-- 2. TÀI KHOẢN VIETQR & NGÂN HÀNG -->
        <div class="space-y-3 pt-2">
          <div class="font-black text-slate-800 uppercase tracking-wider text-[11px] pb-1 border-b border-slate-100 flex items-center gap-1.5">
            <i data-lucide="credit-card" class="w-3.5 h-3.5 text-blue-600"></i>
            <span>2. Tài Khoản Ngân Hàng Nhận Tiền Thuê (Mã VietQR)</span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
            <div>
              <label class="font-bold text-slate-700 block mb-1">Tên Ngân Hàng</label>
              <input
                type="text"
                id="cfg-bld-bank-name"
                placeholder="VD: MB Bank"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs outline-none"
              />
            </div>
            <div>
              <label class="font-bold text-slate-700 block mb-1">Số Tài Khoản</label>
              <input
                type="text"
                id="cfg-bld-bank-acc"
                placeholder="Số tài khoản"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs font-mono outline-none"
              />
            </div>
            <div>
              <label class="font-bold text-slate-700 block mb-1">Chủ Tài Khoản</label>
              <input
                type="text"
                id="cfg-bld-bank-owner"
                placeholder="Tên chủ tài khoản"
                class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs uppercase outline-none"
              />
            </div>
          </div>
        </div>

        <!-- 3. BIỂU PHÍ MẶC ĐỊNH CỦA TÒA -->
        <div class="space-y-3 pt-2">
          <div class="font-black text-slate-800 uppercase tracking-wider text-[11px] pb-1 border-b border-slate-100 flex items-center gap-1.5">
            <i data-lucide="zap" class="w-3.5 h-3.5 text-amber-500"></i>
            <span>3. Biểu Phí Mặc Định Của Tòa</span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
            <div>
              <label class="text-[10px] font-bold text-slate-700 block mb-1">
                Điện (đ/kWh) <span class="text-rose-500">*</span>
              </label>
              <input
                type="number"
                id="cfg-bld-rate-elec"
                required
                min="0"
                step="100"
                placeholder="VD: 3500"
                class="w-full px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs font-mono font-bold outline-none focus:border-blue-500"
              />
            </div>
            <div>
              <label class="text-[10px] font-bold text-slate-700 block mb-1">
                Combo Dịch Vụ (đ/phòng) <span class="text-rose-500">*</span>
              </label>
              <input
                type="number"
                id="cfg-bld-rate-combo"
                required
                min="0"
                step="10000"
                placeholder="VD: 150000"
                class="w-full px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs font-mono font-bold outline-none focus:border-blue-500"
              />
              <div class="text-[9px] text-slate-400 mt-0.5 italic">Đã gồm nước, wifi, rác, vệ sinh</div>
            </div>
            <div>
              <label class="text-[10px] font-bold text-slate-700 block mb-1">
                Xe (đ/chiếc) <span class="text-rose-500">*</span>
              </label>
              <input
                type="number"
                id="cfg-bld-rate-bike"
                required
                min="0"
                step="10000"
                placeholder="VD: 100000"
                class="w-full px-2.5 py-1.5 rounded-lg border border-slate-300 text-xs font-mono font-bold outline-none focus:border-blue-500"
              />
            </div>
          </div>

          <div>
            <label class="font-bold text-slate-700 block mb-1">Ghi Chú Đóng Tiền</label>
            <textarea
              id="cfg-bld-payment-notice"
              rows="2"
              class="w-full px-3 py-2 rounded-xl border border-slate-300 text-xs leading-relaxed outline-none"
              placeholder="Ghi chú in trên hóa đơn và thông báo cho khách thuê..."
            ></textarea>
          </div>
        </div>

        <!-- Nút hành động modal & Xóa tòa nhà -->
        <div class="pt-4 border-t border-slate-200 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2.5">
          <div id="cfg-bld-delete-wrap">
            <button
              type="button"
              id="btn-delete-building-modal"
              class="py-2.5 px-3 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-600 font-bold text-xs flex items-center justify-center gap-1.5 transition cursor-pointer border border-rose-200 shrink-0"
              title="Xóa tòa nhà này khỏi danh sách quản lý chuỗi"
            >
              <i data-lucide="trash-2" class="w-4 h-4 text-rose-500"></i>
              <span>Xóa Tòa Nhà Này</span>
            </button>
          </div>

          <div class="flex items-center gap-2 justify-end">
            <button
              type="button"
              class="btn-close-modal flex-1 sm:flex-none py-2.5 px-4 rounded-xl border border-slate-300 font-bold text-slate-700 hover:bg-slate-100 cursor-pointer"
            >
              Hủy Bỏ
            </button>
            <button
              type="submit"
              id="btn-submit-building-config"
              class="flex-1 sm:flex-none py-2.5 px-5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-wider flex items-center justify-center gap-1.5 shadow-md shadow-blue-500/20 cursor-pointer transition"
            >
              <i data-lucide="save" class="w-4 h-4"></i>
              <span id="btn-submit-building-text">Tạo Mới Tòa Nhà</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 5B: XÁC NHẬN XÓA TÒA NHÀ (CONFIRM DELETE BUILDING MODAL - CHUẨN 100% REACT) -->
  <div id="modal-confirm-delete-building" class="modal-overlay">
    <div class="bg-white rounded-3xl p-6 max-w-sm w-full shadow-2xl space-y-4 animate-in zoom-in-95 duration-150 my-auto">
      <div class="w-12 h-12 rounded-2xl bg-rose-100 text-rose-600 flex items-center justify-center mx-auto">
        <i data-lucide="alert-circle" class="w-6 h-6"></i>
      </div>
      <div class="text-center space-y-1">
        <h3 class="font-black text-slate-900 text-base">Xác Nhận Xóa Tòa Nhà?</h3>
        <p id="delete-building-confirm-desc" class="text-xs text-slate-500">
          Bạn có chắc chắn muốn xóa tòa nhà này khỏi danh sách quản lý không? Toàn bộ sơ đồ phòng và hóa đơn của cơ sở này sẽ bị xóa.
        </p>
      </div>
      <div class="flex gap-2 pt-2">
        <button
          type="button"
          id="btn-cancel-delete-building"
          class="flex-1 py-2.5 rounded-xl border border-slate-300 font-bold text-xs text-slate-700 hover:bg-slate-100 cursor-pointer"
        >
          Hủy
        </button>
        <button
          type="button"
          id="btn-confirm-delete-building-submit"
          class="flex-1 py-2.5 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs cursor-pointer shadow-md shadow-rose-500/25"
        >
          Xác Nhận Xóa
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL: CẤU HÌNH DANH MỤC & HẠNG MỤC THU CHI -->
  <div id="modal-tx-categories" class="modal-overlay">
    <div class="relative w-full max-w-3xl bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150 flex flex-col max-h-[92vh]">
      <!-- Header Modal -->
      <div class="px-5 py-3.5 bg-gradient-sunsilk text-white shadow-md flex items-center justify-between shrink-0">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
            <i data-lucide="folder-tree" class="w-4 h-4 text-white"></i>
          </div>
          <div>
            <h3 class="text-xs sm:text-sm font-black uppercase tracking-wider">
              NHÓM & HẠNG MỤC THU CHI
            </h3>
            <p class="text-[10px] text-blue-100 font-medium">
              Quản lý phân loại nhóm (cột Phân loại) và hạng mục (cột Mục) trong Sổ thu chi
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal text-white/80 hover:text-white transition cursor-pointer font-bold text-base leading-none p-1.5 rounded-lg hover:bg-white/10"
          title="Đóng (Esc)"
        >
          ✕
        </button>
      </div>

      <!-- Action Toolbar -->
      <div class="px-4 sm:px-5 py-3 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-2.5 shrink-0">
        <div class="flex items-center gap-2 flex-wrap">
          <button
            type="button"
            id="btn-add-new-category"
            class="px-3.5 py-1.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-black text-xs flex items-center gap-1.5 transition cursor-pointer shadow-xs"
          >
            <i data-lucide="folder-plus" class="w-4 h-4"></i>
            <span>+ Thêm Nhóm Mới</span>
          </button>
          <button
            type="button"
            id="btn-add-new-subcategory"
            class="px-3.5 py-1.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs flex items-center gap-1.5 transition cursor-pointer shadow-xs"
            title="Thêm hạng mục mới vào một nhóm tùy chọn"
          >
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
            <span>+ Thêm Hạng Mục Mới</span>
          </button>
          <button
            type="button"
            id="btn-reset-categories-default"
            onclick="window.resetTxCategoriesToDefault ? window.resetTxCategoriesToDefault() : null"
            class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 font-bold text-xs flex items-center gap-1.5 transition cursor-pointer active:scale-95"
            title="Khôi phục lại 9 nhóm và hạng mục chuẩn ban đầu"
          >
            <i data-lucide="rotate-ccw" class="w-3.5 h-3.5 text-slate-500"></i>
            <span>Khôi phục mặc định</span>
          </button>
        </div>
        <span class="text-[11px] font-bold text-slate-600 bg-white px-2.5 py-1 rounded-lg border border-slate-200" id="categories-summary-count">
          9 nhóm • 36 hạng mục
        </span>
      </div>

      <!-- Inline Form Thêm/Sửa Nhóm -->
      <div id="cat-form-box" class="hidden px-4 sm:px-5 py-3 bg-blue-50/90 border-b border-blue-200 shrink-0">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-black uppercase text-blue-900" id="cat-form-title">
            Thêm Nhóm Mới
          </span>
          <button type="button" id="btn-cancel-cat-form" class="text-xs font-bold text-slate-400 hover:text-slate-600 cursor-pointer">
            ✕ Hủy
          </button>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
          <input
            type="text"
            id="input-cat-name"
            placeholder="Tên nhóm (VD: Tiền thuê, Nhà cung cấp...)"
            class="sm:col-span-2 h-9 px-3 rounded-lg text-xs font-bold border border-blue-300 bg-white outline-none focus:ring-2 focus:ring-blue-400"
          />
          <button
            type="button"
            id="btn-save-cat-form"
            class="h-9 px-4 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-black text-xs transition cursor-pointer shadow-xs"
          >
            Lưu Nhóm
          </button>
        </div>
      </div>

      <!-- Inline Form Thêm/Sửa Hạng Mục (Có Dropdown Chọn Nhóm Sẵn Có) -->
      <div id="subcat-form-box" class="hidden px-4 sm:px-5 py-3 bg-emerald-50/90 border-b border-emerald-200 shrink-0">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-black uppercase text-emerald-900" id="subcat-form-title">
            Thêm Hạng Mục Mới
          </span>
          <button type="button" id="btn-cancel-subcat-form" class="text-xs font-bold text-slate-400 hover:text-slate-600 cursor-pointer">
            ✕ Hủy
          </button>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-5 gap-2.5">
          <!-- Dropdown chọn Nhóm có sẵn -->
          <div class="sm:col-span-2">
            <label class="block text-[10px] font-bold text-emerald-800 mb-0.5">Thuộc Nhóm</label>
            <select
              id="select-subcat-cat"
              class="w-full h-9 px-3 rounded-lg text-xs font-bold border border-emerald-300 bg-white outline-none focus:ring-2 focus:ring-emerald-400 cursor-pointer"
            >
              <!-- Render động danh sách nhóm có sẵn -->
            </select>
          </div>
          <!-- Ô nhập tên hạng mục -->
          <div class="sm:col-span-2">
            <label class="block text-[10px] font-bold text-emerald-800 mb-0.5">Tên Hạng Mục</label>
            <input
              type="text"
              id="input-subcat-name"
              placeholder="VD: Tiền nhà, Điện, Nước..."
              class="w-full h-9 px-3 rounded-lg text-xs font-bold border border-emerald-300 bg-white outline-none focus:ring-2 focus:ring-emerald-400"
            />
          </div>
          <!-- Nút lưu -->
          <div class="sm:col-span-1 flex items-end">
            <button
              type="button"
              id="btn-save-subcat-form"
              class="w-full h-9 px-3 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs transition cursor-pointer shadow-xs whitespace-nowrap"
            >
              Lưu Hạng Mục
            </button>
          </div>
        </div>
      </div>

      <!-- Scrollable Categories Content View matching the user's table screenshot -->
      <div class="p-3 sm:p-5 overflow-y-auto flex-1 bg-slate-100/60" id="categories-catalog-container">
        <!-- Rendered by JS -->
      </div>

      <!-- Modal Footer -->
      <div class="px-5 py-2.5 bg-white border-t border-slate-200 flex items-center justify-between shrink-0 text-xs">
        <div class="text-[11px] text-slate-500 font-medium hidden sm:flex items-center gap-1.5">
          <i data-lucide="info" class="w-3.5 h-3.5 text-blue-500"></i>
          <span>Bấm vào tên để sửa, bấm nút dấu cộng để thêm hạng mục con.</span>
        </div>
        <button
          type="button"
          class="btn-close-modal px-5 py-2 rounded-xl bg-slate-800 hover:bg-slate-900 text-white font-bold text-xs transition cursor-pointer ml-auto"
        >
          Hoàn Tất
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL 6: THÊM THU / CHI MỚI (TRANSACTION MODAL - CHUẨN 100% REACT TransactionManager.tsx) -->
  <div id="modal-transaction" class="modal-overlay">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <div class="px-5 py-3.5 bg-gradient-sunsilk text-white shadow-md flex items-center justify-between">
        <span class="text-xs sm:text-sm font-black uppercase tracking-wider">
          THÊM GIAO DỊCH THU / CHI
        </span>
        <button
          type="button"
          class="btn-close-modal text-white/80 hover:text-white transition cursor-pointer font-bold text-base leading-none"
          title="Đóng (Esc)"
        >
          ✕
        </button>
      </div>

      <form id="form-modal-transaction" class="p-4 sm:p-5 space-y-4 text-xs">
        <div class="grid grid-cols-2 gap-3 pt-1">
          <!-- Loại -->
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Loại giao dịch <span class="text-rose-500">*</span>
            </label>
            <select
              id="tx-input-type"
              class="h-10 px-3 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            >
              <option value="chi">🔴 Khoản chi (Xuất tiền)</option>
              <option value="thu">🟢 Khoản thu (Vào tiền)</option>
            </select>
          </div>

          <!-- Ngày -->
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Ngày thực hiện <span class="text-rose-500">*</span>
            </label>
            <input
              type="date"
              id="tx-input-date"
              required
              class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            />
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3 pt-1">
          <!-- Nhóm -->
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Nhóm thu / chi
            </label>
            <select
              id="tx-input-category"
              class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            >
              <option value="nha_cung_cap">Nhà cung cấp (Điện, nước, rác)</option>
              <option value="nhan_su">Nhân sự tòa nhà</option>
              <option value="bao_tri_dinh_ky">Bảo trì định kỳ</option>
              <option value="bao_tri_van_hanh">Bảo trì vận hành</option>
              <option value="chinh_quyen">Chính quyền</option>
              <option value="sale_moi_gioi">Sale / Hoa hồng</option>
              <option value="tien_nha">Tiền thuê nhà</option>
              <option value="tien_coc">Tiền cọc</option>
              <option value="chi_khac">Chi khác</option>
              <option value="thu_khac">Thu khác</option>
            </select>
          </div>

          <!-- Khoản mục phụ -->
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Khoản mục phụ
            </label>
            <input
              type="text"
              id="tx-input-subcategory"
              list="tx-subcategory-datalist"
              placeholder="Chọn hoặc nhập hạng mục..."
              class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            />
            <datalist id="tx-subcategory-datalist"></datalist>
          </div>
        </div>

        <!-- Số tiền with unit suffix - Tự động có dấu chấm .000, xóa được toàn bộ -->
        <div class="pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Số tiền (VNĐ) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="tx-input-amount"
                inputmode="numeric"
                required
                placeholder="0"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-slate-900 w-full transition"
              />
              <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                đ
              </span>
            </div>
          </div>
        </div>

        <!-- Nội dung -->
        <div class="pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Nội dung chi tiết <span class="text-rose-500">*</span>
            </label>
            <input
              type="text"
              id="tx-input-desc"
              required
              placeholder="VD: Chi tiền điện PE16000211577..."
              class="h-10 px-3 rounded-lg text-xs font-medium border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            />
          </div>
        </div>

        <!-- Ghi chú -->
        <div class="pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Ghi chú thêm
            </label>
            <input
              type="text"
              id="tx-input-note"
              placeholder="Mã hóa đơn, thông tin người nhận..."
              class="h-10 px-3 rounded-lg text-xs font-medium border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full transition"
            />
          </div>
        </div>

        <div class="flex justify-end gap-2 pt-2 border-t border-slate-200">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold cursor-pointer"
          >
            Hủy (Esc)
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white font-black uppercase text-xs shadow-md transition cursor-pointer"
          >
            Lưu giao dịch
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7A: THÊM CỔ ĐÔNG GÓP VỐN DẠNG DANH SÁCH (BATCH SHAREHOLDERS MODAL) -->
  <div id="modal-batch-shareholders" class="modal-overlay p-3 sm:p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-6xl w-full max-h-[92vh] flex flex-col animate-in zoom-in-95 duration-150 overflow-hidden">
      <!-- Header -->
      <div class="p-5 sm:px-6 border-b border-slate-100 flex items-center justify-between shrink-0 bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 text-white">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-white/20 text-white flex items-center justify-center font-black shadow-sm">
            <i data-lucide="users" class="w-5 h-5"></i>
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h3 class="text-base sm:text-lg font-black tracking-wide uppercase">
                Cập Nhật Cổ Đông Góp Vốn
              </h3>
              <span id="batch-sh-row-count-badge" class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-white/25 text-white">
                1 cổ đông
              </span>
            </div>
            <p class="text-xs text-amber-100">
              Quản lý cơ cấu cổ đông góp vốn. Nhập tỷ lệ hoặc số vốn góp của từng cổ đông.
            </p>
          </div>
        </div>

        <button
          type="button"
          class="btn-close-modal p-2 rounded-xl hover:bg-white/20 text-white transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Top Section: Tổng Vốn Đầu Tư Dự Án & Thống kê % -->
      <div class="p-4 sm:px-6 bg-amber-50/60 border-b border-amber-200/70 flex flex-wrap items-center justify-between gap-4 shrink-0">
        <div class="flex items-center gap-3 flex-wrap">
          <div class="relative w-72">
            <label class="block text-[11px] font-bold text-slate-700 uppercase mb-1">
              Tổng Vốn Đầu Tư Dự Án (VNĐ) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="batch-sh-total-capital"
                inputmode="numeric"
                placeholder="VD: 1.000.000.000"
                class="h-10 px-3 pr-7 rounded-xl text-xs font-black border border-amber-300 bg-white focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none text-slate-900 w-full shadow-xs transition"
              />
              <span class="thousand-unit text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                đ
              </span>
            </div>
          </div>
          <div class="text-[11px] text-slate-500 max-w-xs pt-3">
            * Thay đổi tổng vốn sẽ tự động tính lại số vốn góp theo % cổ phần của từng người.
          </div>
        </div>

        <div class="flex items-center gap-3">
          <div class="px-3 py-1.5 rounded-xl bg-white border border-amber-200 text-center shadow-2xs">
            <div class="text-[10px] uppercase font-bold text-slate-400">% Chưa Phân Bổ</div>
            <div id="batch-sh-stat-total-pct" class="text-xs font-black text-indigo-700">100%</div>
          </div>
          <div class="px-3 py-1.5 rounded-xl bg-white border border-amber-200 text-center shadow-2xs">
            <div class="text-[10px] uppercase font-bold text-slate-400">Vốn Chưa Phân Bổ</div>
            <div id="batch-sh-stat-total-capital" class="text-xs font-black text-emerald-700">0 đ</div>
          </div>
        </div>
      </div>

      <!-- Table Form (Scrollable) -->
      <form id="form-modal-batch-shareholders" class="flex-1 flex flex-col overflow-hidden">
        <div class="flex-1 overflow-y-auto p-4 sm:p-6 space-y-3" id="batch-sh-scroll-container">
          <div class="border border-slate-200 rounded-2xl overflow-hidden shadow-2xs">
            <div class="overflow-x-auto">
              <table class="w-full text-left border-collapse text-xs">
                <thead class="sticky top-0 z-10">
                  <tr class="bg-slate-100 border-b border-slate-200 text-slate-700 font-bold uppercase text-[10px] tracking-wider">
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 min-w-[160px]">Họ Tên Cổ Đông <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[110px]">Tỷ Lệ (%) <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[160px]">Số Vốn Góp (VNĐ) <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[130px]">Ngân Hàng</th>
                    <th class="py-2.5 px-3 min-w-[130px]">Số Tài Khoản</th>
                    <th class="py-2.5 px-3 min-w-[150px]">Người Nhận Lợi Tức</th>
                    <th class="py-2.5 px-2 w-10 text-center">Thao Tác</th>
                  </tr>
                </thead>
                <tbody id="batch-sh-tbody" class="divide-y divide-slate-100 bg-white">
                  <!-- Render động các dòng nhập liệu -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- Nút thêm cổ đông trực quan ở cuối danh sách giống modal thêm nhân sự -->
          <button
            type="button"
            id="btn-batch-sh-add-row"
            class="mt-3 w-full py-2.5 rounded-2xl border-2 border-dashed border-amber-300 hover:border-amber-500 bg-amber-50/50 hover:bg-amber-100 text-amber-800 font-bold text-xs transition cursor-pointer flex items-center justify-center gap-2 shadow-2xs"
          >
            <i data-lucide="plus" class="w-4 h-4 text-amber-600"></i>
            <span>+ Thêm Cổ Đông Mới</span>
          </button>
          <div class="flex items-center justify-end pt-1">
            <div class="text-xs text-slate-500">
              (Đang có <strong id="batch-sh-row-count-inline" class="text-amber-700 font-mono font-bold">0</strong> cổ đông đã thêm)
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="p-4 sm:px-6 bg-slate-50 border-t border-slate-200 flex items-center justify-between shrink-0">
          <div class="text-[11px] text-slate-500">
            * Nhập số vốn góp hoặc tỷ lệ % cho từng cổ đông. Thống kê chưa phân bổ sẽ tự động cập nhật.
          </div>
          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn-close-modal px-4 py-2 rounded-xl bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 text-xs font-bold transition cursor-pointer"
            >
              Hủy bỏ
            </button>
            <button
              type="submit"
              class="px-5 py-2 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white text-xs font-black uppercase tracking-wider transition cursor-pointer flex items-center gap-2 shadow-md"
            >
              <i data-lucide="check" class="w-4 h-4"></i>
              <span>Lưu Cập Nhật Cổ Đông</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7B: CHUYỂN NHƯỢNG CỔ PHẦN (SHARE TRANSFER MODAL) -->
  <div id="modal-transfer-shares" class="modal-overlay p-3 sm:p-4">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <!-- Header -->
      <div class="px-5 py-3.5 bg-gradient-to-r from-amber-600 via-orange-600 to-amber-700 text-white shadow-md flex items-center justify-between">
        <div class="flex items-center gap-2">
          <i data-lucide="arrow-left-right" class="w-4 h-4"></i>
          <span class="text-xs sm:text-sm font-black uppercase tracking-wider">
            CHUYỂN NHƯỢNG CỔ PHẦN
          </span>
        </div>
        <button type="button" class="btn-close-modal text-slate-200 hover:text-white cursor-pointer font-bold text-base leading-none">
          ✕
        </button>
      </div>

      <form id="form-modal-transfer-shares" class="p-4 sm:p-5 space-y-4 text-xs">
        <input type="hidden" id="transfer-sh-sender-id" value="">

        <!-- Banner thông tin cổ đông chuyển nhượng (Bên bán/nhượng) -->
        <div class="p-3 rounded-2xl bg-amber-50 border border-amber-200 space-y-1">
          <div class="text-[10px] font-bold uppercase tracking-wider text-amber-800">
            Bên Chuyển Nhượng
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-black text-slate-900" id="transfer-sh-sender-name">-</span>
            <div class="text-right">
              <span class="px-2 py-0.5 rounded-lg text-[10px] font-black uppercase bg-indigo-100 text-indigo-700 border border-indigo-200" id="transfer-sh-sender-pct">0%</span>
              <div class="text-[10px] font-bold text-emerald-700 mt-0.5" id="transfer-sh-sender-capital">0 đ</div>
            </div>
          </div>
        </div>

        <!-- Tỷ lệ % và Số vốn chuyển nhượng -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Tỷ lệ % chuyển nhượng <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="number"
                id="transfer-sh-input-pct"
                required
                min="0.01"
                step="0.01"
                placeholder="VD: 10"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none text-indigo-700 w-full transition"
              />
              <span class="text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                %
              </span>
            </div>
          </div>

          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Giá trị chuyển nhượng (VNĐ) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="transfer-sh-input-capital"
                inputmode="numeric"
                required
                placeholder="VD: 100.000.000"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none text-emerald-800 w-full transition"
              />
              <span class="thousand-unit text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                đ
              </span>
            </div>
          </div>
        </div>

        <!-- Chọn Đối tượng nhận chuyển nhượng -->
        <div class="pt-2 border-t border-slate-200">
          <label class="block text-[11px] font-bold text-slate-700 uppercase mb-2">
            Đối tượng nhận chuyển nhượng:
          </label>
          <div class="grid grid-cols-2 gap-2 mb-3">
            <label class="flex items-center gap-2 p-2.5 rounded-xl border border-slate-300 bg-white hover:bg-slate-50 cursor-pointer transition has-checked:border-amber-500 has-checked:bg-amber-50/50 has-checked:text-amber-900 font-bold text-xs">
              <input type="radio" name="transfer-target-type" value="existing" checked class="text-amber-600 focus:ring-amber-400">
              <span>Cổ đông có sẵn</span>
            </label>
            <label class="flex items-center gap-2 p-2.5 rounded-xl border border-slate-300 bg-white hover:bg-slate-50 cursor-pointer transition has-checked:border-amber-500 has-checked:bg-amber-50/50 has-checked:text-amber-900 font-bold text-xs">
              <input type="radio" name="transfer-target-type" value="new" class="text-amber-600 focus:ring-amber-400">
              <span>Cổ đông mới</span>
            </label>
          </div>

          <!-- Trường hợp A: Cổ đông có sẵn -->
          <div id="transfer-sh-existing-box" class="space-y-2">
            <div class="relative">
              <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                Chọn cổ đông nhận <span class="text-rose-500">*</span>
              </label>
              <select
                id="transfer-sh-select-recipient"
                class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none w-full transition"
              >
                <!-- Render động các cổ đông khác -->
              </select>
            </div>
          </div>

          <!-- Trường hợp B: Cổ đông mới -->
          <div id="transfer-sh-new-box" class="space-y-3 hidden">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
              <div class="relative">
                <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                  Họ tên cổ đông mới <span class="text-rose-500">*</span>
                </label>
                <input
                  type="text"
                  id="transfer-sh-new-name"
                  placeholder="VD: Anh Hoàng..."
                  class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none w-full transition"
                />
              </div>
              <div class="relative">
                <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                  Số điện thoại
                </label>
                <input
                  type="text"
                  id="transfer-sh-new-phone"
                  placeholder="09..."
                  class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none w-full font-mono transition"
                />
              </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
              <div class="relative">
                <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                  Ngân hàng
                </label>
                <input
                  type="text"
                  id="transfer-sh-new-bank-name"
                  placeholder="MB Bank..."
                  class="h-9 px-2.5 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-amber-400 outline-none w-full transition"
                />
              </div>
              <div class="relative">
                <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                  Số tài khoản
                </label>
                <input
                  type="text"
                  id="transfer-sh-new-bank-acc"
                  placeholder="09..."
                  class="h-9 px-2.5 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-amber-400 outline-none w-full font-mono transition"
                />
              </div>
              <div class="relative">
                <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] font-semibold text-slate-600 z-10 whitespace-nowrap">
                  Tên người nhận
                </label>
                <input
                  type="text"
                  id="transfer-sh-new-bank-owner"
                  placeholder="NGUYEN VAN B"
                  class="h-9 px-2.5 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-amber-400 outline-none w-full uppercase transition"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- Ghi chú chuyển nhượng -->
        <div class="relative pt-1">
          <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
            Ghi chú / Nội dung chuyển nhượng
          </label>
          <input
            type="text"
            id="transfer-sh-note"
            placeholder="VD: Chuyển nhượng đợt 1 theo hợp đồng góp vốn..."
            class="h-10 px-3 rounded-lg text-xs border border-slate-300 bg-white focus:border-amber-400 outline-none w-full transition"
          />
        </div>

        <div class="flex justify-end gap-2 pt-2 border-t border-slate-200">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold cursor-pointer"
          >
            Hủy
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white font-black uppercase text-xs shadow-md transition cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="check" class="w-4 h-4"></i>
            <span>Xác nhận chuyển nhượng</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7: THÊM / SỬA CỔ ĐÔNG (SHAREHOLDER MODAL - CHUẨN 100% REACT InvestorReport.tsx) -->
  <div id="modal-shareholder" class="modal-overlay">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <div class="px-5 py-3.5 bg-gradient-sunsilk text-white shadow-md flex items-center justify-between">
        <span class="text-xs sm:text-sm font-black uppercase tracking-wider" id="modal-shareholder-title">
          THÊM CỔ ĐÔNG GÓP VỐN
        </span>
        <button type="button" class="btn-close-modal text-slate-200 hover:text-white cursor-pointer font-bold text-base leading-none">
          ✕
        </button>
      </div>
      <form id="form-modal-shareholder" class="p-4 sm:p-5 space-y-4 text-xs">
        <input type="hidden" id="sh-input-id" value="">

        <!-- Dòng 1: Họ tên cổ đông & Số điện thoại (Cùng dòng) -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Họ tên cổ đông (NĐT) <span class="text-rose-500">*</span>
            </label>
            <input
              type="text"
              id="sh-input-name"
              required
              placeholder="VD: Nguyễn Văn A..."
              class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full capitalize transition"
            />
          </div>

          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Số điện thoại
            </label>
            <input
              type="text"
              id="sh-input-phone"
              placeholder="09..."
              class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full font-mono transition"
            />
          </div>
        </div>

        <!-- Dòng 2: Tổng vốn dự án (VNĐ) -->
        <div class="pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap flex items-center gap-1">
              <span>Tổng vốn dự án (VNĐ)</span>
              <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="sh-input-total-capital"
                inputmode="numeric"
                required
                placeholder="VD: 1.000.000.000"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-blue-800 w-full transition"
              />
              <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                đ
              </span>
            </div>
          </div>
          <p class="text-[10px] text-slate-400 mt-1 italic">
            * Nhập tổng vốn đầu tư của tòa nhà/cơ sở để hệ thống tự động tính tương quan giữa Tỷ lệ % và Số vốn góp.
          </p>
        </div>

        <!-- Dòng 3: Tỷ lệ cổ phần (%) & Số vốn góp (VNĐ) - Tự động tương hỗ -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Tỷ lệ cổ phần (%) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="number"
                id="sh-input-pct"
                required
                min="0"
                max="100"
                step="0.01"
                placeholder="VD: 30"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-indigo-700 w-full transition"
              />
              <span class="text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                %
              </span>
            </div>
          </div>

          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Số vốn góp (VNĐ) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="sh-input-capital"
                inputmode="numeric"
                required
                placeholder="VD: 300.000.000"
                class="h-10 px-3 pr-7 rounded-lg text-xs font-black border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none text-emerald-800 w-full transition"
              />
              <span class="thousand-unit text-[10px] sm:text-xs right-2.5 absolute font-bold text-slate-400 pointer-events-none">
                đ
              </span>
            </div>
          </div>
        </div>

        <!-- Dòng 4: Ngân hàng & Số tài khoản & Tên người nhận lợi tức -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-1">
          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Ngân hàng nhận
            </label>
            <input
              type="text"
              id="sh-input-bank-name"
              placeholder="VD: Vietcombank, MB Bank..."
              class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full capitalize transition"
            />
          </div>

          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Số tài khoản nhận
            </label>
            <input
              type="text"
              id="sh-input-bank-acc"
              placeholder="VD: 0987654321..."
              class="h-10 px-3 rounded-lg text-xs font-semibold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full font-mono transition"
            />
          </div>

          <div class="relative">
            <label class="absolute -top-2 left-2.5 px-1 bg-white text-[10px] sm:text-[11px] font-semibold text-slate-600 z-10 whitespace-nowrap">
              Tên người nhận lợi tức
            </label>
            <input
              type="text"
              id="sh-input-bank-owner"
              placeholder="VD: Nguyễn Văn A"
              class="h-10 px-3 rounded-lg text-xs font-bold border border-slate-300 bg-white focus:border-blue-300 focus:ring-2 focus:ring-blue-100 outline-none w-full capitalize transition"
            />
          </div>
        </div>

        <div class="flex justify-end gap-2 pt-2 border-t border-amber-200/70">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold cursor-pointer"
          >
            Hủy
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-sunsilk hover:opacity-95 text-white font-black uppercase text-xs shadow-md transition cursor-pointer"
          >
            Lưu cổ đông
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7A: GIA HẠN HỢP ĐỒNG THUÊ (#modal-contract-extend) -->
  <div id="modal-contract-extend" class="modal-overlay">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <div class="px-5 py-3.5 bg-gradient-to-r from-blue-700 to-indigo-700 text-white shadow-md flex items-center justify-between">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center font-bold shrink-0">
            <i data-lucide="file-signature" class="w-4 h-4 text-white"></i>
          </div>
          <div>
            <h3 class="text-xs sm:text-sm font-black uppercase tracking-wider text-white" id="modal-extend-title">
              GIA HẠN HỢP ĐỒNG THUÊ
            </h3>
            <p class="text-[10px] text-blue-100" id="modal-extend-subtitle">
              Chọn thời hạn gia hạn từ 1 đến 12 tháng
            </p>
          </div>
        </div>
        <button type="button" class="btn-close-modal text-white/80 hover:text-white cursor-pointer font-bold text-base leading-none">
          ✕
        </button>
      </div>

      <form id="form-modal-contract-extend" class="p-4 sm:p-5 space-y-4 text-xs">
        <input type="hidden" id="extend-input-room-id" value="">

        <!-- Tóm tắt hợp đồng hiện tại -->
        <div class="p-3 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
          <div class="flex items-center justify-between">
            <span class="font-black text-slate-800 text-sm flex items-center gap-1.5">
              <span class="px-2 py-0.5 rounded-lg bg-blue-100 text-blue-800 font-mono font-black" id="extend-display-room-code">P.---</span>
              <span id="extend-display-tenant-name">Khách thuê</span>
            </span>
            <span class="text-[11px] font-bold text-slate-500 font-mono" id="extend-display-tenant-phone"></span>
          </div>
          <div class="grid grid-cols-2 gap-2 text-[11px] pt-1 border-t border-slate-200/80">
            <div>
              <span class="text-slate-400 block text-[10px]">Hạn HĐ hiện tại:</span>
              <span class="font-bold text-rose-700" id="extend-display-current-end">--/--/----</span>
            </div>
            <div>
              <span class="text-slate-400 block text-[10px]">Giá thuê hiện tại:</span>
              <span class="font-bold text-slate-700" id="extend-display-current-price">0 đ</span>
            </div>
          </div>
        </div>

        <!-- 1. Thời gian gia hạn (Cho chọn 1-12 tháng) -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="relative">
            <label class="font-bold text-slate-700 block mb-1">
              Thời gian gia hạn <span class="text-rose-500">*</span>
            </label>
            <select
              id="extend-input-months"
              class="w-full h-10 px-3 rounded-xl border border-blue-300 bg-white font-bold text-blue-800 focus:border-blue-500 outline-none cursor-pointer"
            >
              <option value="1">Gia hạn 1 tháng</option>
              <option value="2">Gia hạn 2 tháng</option>
              <option value="3">Gia hạn 3 tháng</option>
              <option value="4">Gia hạn 4 tháng</option>
              <option value="5">Gia hạn 5 tháng</option>
              <option value="6" selected>Gia hạn 6 tháng</option>
              <option value="7">Gia hạn 7 tháng</option>
              <option value="8">Gia hạn 8 tháng</option>
              <option value="9">Gia hạn 9 tháng</option>
              <option value="10">Gia hạn 10 tháng</option>
              <option value="11">Gia hạn 11 tháng</option>
              <option value="12">Gia hạn 12 tháng (1 năm)</option>
            </select>
          </div>

          <div class="relative">
            <label class="font-bold text-slate-700 block mb-1">
              Ngày kết thúc mới <span class="text-rose-500">*</span>
            </label>
            <input
              type="date"
              id="extend-input-new-end-date"
              required
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white font-bold text-slate-900 focus:border-blue-500 outline-none"
            />
          </div>
        </div>

        <!-- 2. Giá thuê mới & Ghi chú -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="relative">
            <label class="font-bold text-slate-700 block mb-1">
              Giá thuê mới (VNĐ/tháng)
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="extend-input-new-price"
                inputmode="numeric"
                placeholder="4.000.000"
                class="w-full h-10 px-3 pr-7 rounded-xl border border-slate-300 bg-white font-bold text-slate-900 focus:border-blue-500 outline-none"
              />
              <span class="text-[10px] right-2.5 absolute font-bold text-slate-400 pointer-events-none">đ</span>
            </div>
          </div>

          <div class="relative">
            <label class="font-bold text-slate-700 block mb-1">
              Ghi chú hợp đồng
            </label>
            <input
              type="text"
              id="extend-input-note"
              placeholder="VD: Khách gia hạn thêm 6 tháng..."
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white text-slate-800 focus:border-blue-500 outline-none"
            />
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold text-slate-700 cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:opacity-95 text-white font-black uppercase text-xs shadow-md transition cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="check-circle" class="w-4 h-4"></i>
            <span>Xác Nhận Gia Hạn</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7B: TRẢ PHÒNG & HOÀN CỌC (#modal-room-checkout) -->
  <div id="modal-room-checkout" class="modal-overlay">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <div class="px-5 py-3.5 bg-gradient-to-r from-rose-600 to-red-700 text-white shadow-md flex items-center justify-between">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center font-bold shrink-0">
            <i data-lucide="user-minus" class="w-4 h-4 text-white"></i>
          </div>
          <div>
            <h3 class="text-xs sm:text-sm font-black uppercase tracking-wider text-white" id="modal-checkout-title">
              TRẢ PHÒNG & HOÀN CỌC
            </h3>
            <p class="text-[10px] text-rose-100">
              Quyết toán chi phí, khấu trừ hư hỏng và hoàn trả tiền cọc cho khách
            </p>
          </div>
        </div>
        <button type="button" class="btn-close-modal text-white/80 hover:text-white cursor-pointer font-bold text-base leading-none">
          ✕
        </button>
      </div>

      <form id="form-modal-room-checkout" class="p-4 sm:p-5 space-y-4 text-xs">
        <input type="hidden" id="checkout-input-room-id" value="">

        <!-- Tóm tắt phòng & Tiền cọc gốc -->
        <div class="p-3.5 rounded-2xl bg-rose-50/50 border border-rose-200/80 space-y-2">
          <div class="flex items-center justify-between">
            <span class="font-black text-slate-900 text-sm flex items-center gap-1.5">
              <span class="px-2 py-0.5 rounded-lg bg-rose-200 text-rose-900 font-mono font-black" id="checkout-display-room-code">P.---</span>
              <span id="checkout-display-tenant-name">Khách thuê</span>
            </span>
            <span class="text-xs font-bold text-slate-600 font-mono" id="checkout-display-tenant-phone"></span>
          </div>
          <div class="grid grid-cols-2 gap-2 pt-1 border-t border-rose-200/60">
            <div>
              <span class="text-slate-500 block text-[10px]">Tiền cọc đã thu:</span>
              <span class="text-sm font-black text-indigo-700" id="checkout-display-deposit">0 đ</span>
            </div>
            <div>
              <span class="text-slate-500 block text-[10px]">Hạn HĐ:</span>
              <span class="text-xs font-bold text-slate-700" id="checkout-display-contract-period">--/--/----</span>
            </div>
          </div>
        </div>

        <!-- 1. Ngày trả phòng & Số điện chốt cuối -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Ngày trả phòng <span class="text-rose-500">*</span>
            </label>
            <input
              type="date"
              id="checkout-input-date"
              required
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white font-bold text-slate-900 focus:border-rose-500 outline-none"
            />
          </div>

          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Chỉ số điện chốt bàn giao (kWh)
            </label>
            <input
              type="number"
              id="checkout-input-final-elec"
              min="0"
              placeholder="VD: 185"
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white font-mono font-bold text-amber-900 focus:border-rose-500 outline-none"
            />
          </div>
        </div>

        <!-- 2. Khấu trừ chi phí & Lý do khấu trừ -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Tiền khấu trừ (hư hỏng, vệ sinh, bù điện...)
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="checkout-input-deduction"
                inputmode="numeric"
                placeholder="0"
                value="0"
                class="w-full h-10 px-3 pr-7 rounded-xl border border-rose-300 bg-white font-black text-rose-700 focus:border-rose-500 outline-none"
              />
              <span class="text-[10px] right-2.5 absolute font-bold text-slate-400 pointer-events-none">đ</span>
            </div>
          </div>

          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Lý do khấu trừ (nếu có)
            </label>
            <input
              type="text"
              id="checkout-input-deduction-reason"
              placeholder="VD: Sơn sửa tường, vệ sinh phòng..."
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white text-slate-800 focus:border-rose-500 outline-none"
            />
          </div>
        </div>

        <!-- 3. Hộp nổi bật: SỐ TIỀN CỌC THỰC HOÀN TRẢ KHÁCH -->
        <div class="p-3.5 rounded-2xl bg-emerald-50 border border-emerald-200 flex items-center justify-between">
          <div>
            <span class="text-[10px] font-black uppercase tracking-wider text-emerald-800 block">
              SỐ TIỀN CỌC HOÀN TRẢ KHÁCH
            </span>
            <span class="text-[10px] text-emerald-600 block mt-0.5">
              = Tiền cọc đã thu - Tiền khấu trừ
            </span>
          </div>
          <div class="text-right">
            <span class="text-base sm:text-lg font-black text-emerald-700 font-mono" id="checkout-display-refund-amount">
              0 đ
            </span>
          </div>
        </div>

        <!-- 4. Phương thức hoàn cọc & Ghi chú -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Phương thức hoàn trả
            </label>
            <select
              id="checkout-input-method"
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white font-bold text-slate-800 focus:border-rose-500 outline-none cursor-pointer"
            >
              <option value="transfer">Chuyển khoản Ngân hàng (VietQR)</option>
              <option value="cash">Tiền mặt</option>
            </select>
          </div>

          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Ghi chú trả phòng
            </label>
            <input
              type="text"
              id="checkout-input-note"
              placeholder="VD: Đã nhận lại đủ chìa khóa và thẻ xe..."
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white text-slate-800 focus:border-rose-500 outline-none"
            />
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold text-slate-700 cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-gradient-to-r from-rose-600 to-red-700 hover:opacity-95 text-white font-black uppercase text-xs shadow-md transition cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="check" class="w-4 h-4"></i>
            <span>Xác Nhận Trả Phòng & Hoàn Cọc</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 7C: THU TIỀN HÓA ĐƠN & XỬ LÝ ĐÓNG 1 PHẦN / GIA HẠN (#modal-bill-payment) -->
  <div id="modal-bill-payment" class="modal-overlay">
    <div class="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <!-- Modal Header -->
      <div class="px-5 py-3.5 bg-gradient-to-r from-emerald-600 to-teal-700 text-white shadow-md flex items-center justify-between">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-white/20 flex items-center justify-center font-bold shrink-0">
            <i data-lucide="badge-dollar-sign" class="w-4 h-4 text-white"></i>
          </div>
          <div>
            <h3 class="text-xs sm:text-sm font-black uppercase tracking-wider text-white" id="modal-bill-payment-title">
              THU TIỀN HÓA ĐƠN
            </h3>
            <p class="text-[10px] text-emerald-100" id="modal-bill-payment-subtitle">
              Xử lý thu tiền, đóng 1 phần hoặc hẹn ngày đóng trễ
            </p>
          </div>
        </div>
        <button type="button" class="btn-close-modal text-white/80 hover:text-white cursor-pointer font-bold text-base leading-none">
          ✕
        </button>
      </div>

      <form id="form-modal-bill-payment" class="p-4 sm:p-5 space-y-4 text-xs">
        <input type="hidden" id="payment-input-bill-id" value="">

        <!-- Tóm tắt hóa đơn -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2.5">
          <div class="flex items-center justify-between">
            <span class="font-black text-slate-900 text-sm flex items-center gap-1.5">
              <span class="px-2 py-0.5 rounded-lg bg-blue-100 text-blue-800 font-mono font-black" id="payment-display-room-code">P.---</span>
              <span id="payment-display-tenant-name">Khách thuê</span>
            </span>
            <span class="text-xs font-bold text-slate-600 font-mono" id="payment-display-month">Tháng --/----</span>
          </div>

          <div class="grid grid-cols-3 gap-2 pt-2 border-t border-slate-200/80 text-center">
            <div class="p-2 rounded-xl bg-white border border-slate-200">
              <span class="text-[9px] font-bold text-slate-400 uppercase block">Tổng tiền HĐ</span>
              <span class="text-xs sm:text-sm font-black text-blue-800" id="payment-display-total-amount">0 đ</span>
            </div>
            <div class="p-2 rounded-xl bg-white border border-emerald-200">
              <span class="text-[9px] font-bold text-emerald-600 uppercase block">Đã thu</span>
              <span class="text-xs sm:text-sm font-black text-emerald-700" id="payment-display-paid-amount">0 đ</span>
            </div>
            <div class="p-2 rounded-xl bg-white border border-rose-200">
              <span class="text-[9px] font-bold text-rose-600 uppercase block">Còn nợ</span>
              <span class="text-xs sm:text-sm font-black text-rose-700" id="payment-display-remaining-amount">0 đ</span>
            </div>
          </div>
        </div>

        <!-- Chọn hình thức xử lý nhanh -->
        <div>
          <label class="font-bold text-slate-700 block mb-1.5">Hình thức xử lý</label>
          <div class="grid grid-cols-3 gap-1.5">
            <button
              type="button"
              id="btn-pay-mode-full"
              class="btn-pay-mode py-2 px-2 rounded-xl font-black text-[11px] uppercase border transition cursor-pointer text-center bg-emerald-50 border-emerald-500 text-emerald-800 shadow-2xs"
            >
              ✓ Thu Đủ 100%
            </button>
            <button
              type="button"
              id="btn-pay-mode-partial"
              class="btn-pay-mode py-2 px-2 rounded-xl font-black text-[11px] uppercase border transition cursor-pointer text-center bg-white border-slate-200 text-slate-700 hover:border-amber-400"
            >
              ⚡ Đóng 1 Phần
            </button>
            <button
              type="button"
              id="btn-pay-mode-extend"
              class="btn-pay-mode py-2 px-2 rounded-xl font-black text-[11px] uppercase border transition cursor-pointer text-center bg-white border-slate-200 text-slate-700 hover:border-blue-400"
            >
              ⏱ Hẹn Ngày Đóng
            </button>
          </div>
        </div>

        <!-- Số tiền thu đợt này & Phương thức -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Số tiền thu đợt này (VNĐ) <span class="text-rose-500">*</span>
            </label>
            <div class="relative flex items-center">
              <input
                type="text"
                id="payment-input-amount"
                inputmode="numeric"
                required
                placeholder="0"
                class="w-full h-10 px-3 pr-7 rounded-xl border border-slate-300 font-black text-sm text-emerald-700 bg-white focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none"
              />
              <span class="absolute right-2.5 font-bold text-slate-400 pointer-events-none">đ</span>
            </div>
            <div class="flex items-center justify-between text-[10px] mt-1">
              <span class="text-slate-500">Còn nợ sau thu:</span>
              <span id="payment-preview-after-balance" class="font-black text-rose-600">0 đ</span>
            </div>
          </div>

          <div>
            <label class="font-bold text-slate-700 block mb-1">
              Phương thức thanh toán
            </label>
            <select
              id="payment-input-method"
              class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white font-bold text-slate-800 focus:border-emerald-500 outline-none cursor-pointer"
            >
              <option value="transfer">Chuyển khoản (VietQR / MB Bank)</option>
              <option value="cash">Tiền mặt</option>
            </select>
            <div class="mt-1">
              <label class="text-[10px] text-slate-500">Ngày thu tiền:</label>
              <input
                type="date"
                id="payment-input-date"
                class="w-full mt-0.5 px-2 py-1 rounded-lg border border-slate-200 text-xs font-mono font-bold text-slate-700 outline-none"
              />
            </div>
          </div>
        </div>

        <!-- Hẹn ngày đóng trễ (Gia hạn thời gian đóng tiền) -->
        <div id="payment-wrap-due-date" class="p-3 rounded-2xl bg-amber-50/60 border border-amber-200 space-y-2">
          <div class="flex items-center justify-between">
            <label class="font-black text-amber-900 flex items-center gap-1.5">
              <i data-lucide="calendar-clock" class="w-3.5 h-3.5 text-amber-600"></i>
              <span>Hẹn Ngày Đóng Trễ (Gia hạn đóng nợ)</span>
            </label>
            <span class="text-[10px] font-bold text-amber-700">Dành cho nợ / đóng trễ</span>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
            <div>
              <label class="text-[10px] font-bold text-slate-600 block mb-0.5">Ngày hẹn nộp phần còn lại</label>
              <input
                type="date"
                id="payment-input-due-date"
                class="w-full h-9 px-2.5 rounded-lg border border-amber-300 bg-white font-mono text-xs font-bold text-slate-800 outline-none focus:border-amber-500"
              />
            </div>
            <div>
              <label class="text-[10px] font-bold text-slate-600 block mb-0.5">Chọn nhanh ngày hẹn</label>
              <div class="flex items-center gap-1 mt-0.5">
                <button type="button" data-add-days="3" class="btn-quick-due px-2 py-1.5 rounded-lg bg-amber-100 hover:bg-amber-200 font-bold text-[10px] text-amber-900 cursor-pointer">+3 ngày</button>
                <button type="button" data-add-days="7" class="btn-quick-due px-2 py-1.5 rounded-lg bg-amber-100 hover:bg-amber-200 font-bold text-[10px] text-amber-900 cursor-pointer">+7 ngày</button>
                <button type="button" data-add-days="15" class="btn-quick-due px-2 py-1.5 rounded-lg bg-amber-100 hover:bg-amber-200 font-bold text-[10px] text-amber-900 cursor-pointer">+15 ngày</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Ghi chú thanh toán / Lý do trễ -->
        <div>
          <label class="font-bold text-slate-700 block mb-1">
            Ghi chú thanh toán & Lý do hẹn trễ
          </label>
          <input
            type="text"
            id="payment-input-note"
            placeholder="VD: Đã đóng 2 triệu, hẹn ngày 15 nhận lương đóng nốt..."
            class="w-full h-10 px-3 rounded-xl border border-slate-300 bg-white text-xs text-slate-800 focus:border-emerald-500 outline-none"
          />
        </div>

        <!-- Modal Footer Actions -->
        <div class="flex items-center justify-between pt-3 border-t border-slate-100 gap-2">
          <button
            type="button"
            id="btn-payment-reset-unpaid"
            class="px-3 py-2 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-700 font-bold text-xs cursor-pointer border border-rose-200 transition"
            title="Đánh dấu toàn bộ hóa đơn về trạng thái Chưa Thu (0 đ)"
          >
            Đánh dấu Chưa Thu
          </button>

          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold text-slate-700 cursor-pointer"
            >
              Hủy
            </button>
            <button
              type="submit"
              class="px-5 py-2 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-700 hover:opacity-95 text-white font-black uppercase text-xs shadow-md transition cursor-pointer flex items-center gap-1.5"
            >
              <i data-lucide="check-circle" class="w-4 h-4"></i>
              <span>Xác Nhận Thu Tiền</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 8: CHỈNH SỬA HỒ SƠ NHÂN SỰ (CHUẨN 100% REACT HRModule.tsx) -->
  <div id="modal-staff" class="modal-overlay">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 space-y-4 animate-in zoom-in-95 duration-150">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-xl bg-purple-100 text-purple-700 flex items-center justify-center">
            <i data-lucide="user-plus" class="w-4 h-4"></i>
          </div>
          <div>
            <h3 class="text-sm font-black uppercase text-slate-900" id="modal-staff-title">
              Chỉnh Sửa Hồ Sơ Nhân Sự
            </h3>
            <p class="text-[10px] text-slate-400">
              Cập nhật thông tin lý lịch, phòng ban và chức danh công tác
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-modal-staff" class="space-y-4 text-xs">
        <input type="hidden" id="staff-input-id" value="">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="space-y-1">
            <label class="font-bold text-slate-700 block">
              Họ và tên <span class="text-rose-500">*</span>
            </label>
            <input
              type="text"
              id="staff-input-name"
              required
              placeholder="VD: Trần Văn Bình"
              class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-bold text-slate-900"
            />
          </div>

          <div class="space-y-1">
            <label class="font-bold text-slate-700 block">
              Số điện thoại <span class="text-rose-500">*</span>
            </label>
            <input
              type="tel"
              id="staff-input-phone"
              required
              placeholder="VD: 0901234567"
              class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-bold font-mono text-slate-900"
            />
          </div>
        </div>

        <!-- Chọn Phòng Ban & Chức Vụ -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="space-y-1">
            <label class="font-bold text-slate-700 block">Phòng ban trực thuộc</label>
            <select
              id="staff-input-dept"
              class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-bold bg-white text-slate-900"
            ></select>
          </div>

          <div class="space-y-1">
            <label class="font-bold text-slate-700 block">Chức vụ</label>
            <select
              id="staff-input-pos"
              class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 font-bold bg-white text-slate-900"
            ></select>
          </div>
        </div>

        <!-- Email liên hệ -->
        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">
            Email liên hệ
          </label>
          <input
            type="email"
            id="staff-input-email"
            placeholder="VD: quanly@congty.com"
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 text-slate-900"
          />
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Nhiệm vụ & Ghi chú công việc</label>
          <textarea
            id="staff-input-duties"
            rows="2"
            placeholder="Ghi rõ trách nhiệm công việc: thu tiền phòng, giải quyết sự cố, chốt điện nước..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-purple-400 text-slate-900"
          ></textarea>
        </div>

        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold transition cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-6 py-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-black uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="save" class="w-4 h-4"></i>
            <span id="btn-staff-modal-submit-text">Cập Nhật Hồ Sơ</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 8A: THÊM NHÂN SỰ MỚI BẰNG BẢNG NHẬP LIỆU THEO DÒNG (CHUẨN 100% REACT HRModule.tsx) -->
  <div id="modal-hr-batch-staff" class="modal-overlay p-3 sm:p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-6xl w-full max-h-[92vh] flex flex-col animate-in zoom-in-95 duration-150 overflow-hidden">
      <!-- Header -->
      <div class="p-5 sm:px-6 border-b border-slate-100 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-purple-600 to-indigo-600 text-white flex items-center justify-center font-black shadow-sm">
            <i data-lucide="user-plus" class="w-5 h-5 text-emerald-300"></i>
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h3 class="text-base sm:text-lg font-black text-slate-900">
                Thêm Nhân Sự Mới
              </h3>
              <span id="hr-batch-row-count-badge" class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700">
                1 dòng
              </span>
            </div>
            <p class="text-xs text-slate-500">
              Nhập thông tin nhân sự theo từng dòng, nhấn "+ Thêm 1 dòng" để bổ sung thêm nhân sự mới.
            </p>
          </div>
        </div>

        <button
          type="button"
          class="btn-close-modal p-2 rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Quick Toolbar -->
      <div class="px-6 py-2.5 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-2 shrink-0">
        <div class="flex items-center gap-2">
          <button
            type="button"
            id="btn-hr-batch-add-row"
            class="px-3.5 py-1.5 rounded-xl bg-purple-600 hover:bg-purple-700 text-white text-xs font-black transition cursor-pointer flex items-center gap-1.5 shadow-2xs"
          >
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            <span>+ Thêm 1 dòng</span>
          </button>
          <div class="text-xs text-slate-500">
            (Đang có <strong id="hr-batch-row-count-inline" class="text-purple-700 font-mono font-bold">1</strong> dòng)
          </div>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
          <button
            type="button"
            id="btn-hr-batch-clear"
            class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-200 text-slate-700 border border-slate-300 text-xs font-bold transition cursor-pointer flex items-center gap-1"
          >
            <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
            <span>Làm trống</span>
          </button>
        </div>
      </div>

      <!-- Table Form (Scrollable) -->
      <form id="form-modal-hr-batch-staff" class="flex-1 flex flex-col overflow-hidden">
        <div class="flex-1 overflow-y-auto p-4 sm:p-6">
          <div class="border border-slate-200 rounded-2xl overflow-hidden shadow-2xs">
            <div class="overflow-x-auto">
              <table class="w-full text-left border-collapse text-xs">
                <thead class="sticky top-0 z-10">
                  <tr class="bg-slate-100 border-b border-slate-200 text-slate-700 font-bold uppercase text-[10px] tracking-wider">
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 min-w-[170px]">Họ Và Tên <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[150px]">Phòng Ban <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[170px]">Chức Vụ / Vị Trí</th>
                    <th class="py-2.5 px-3 min-w-[130px]">Số Điện Thoại <span class="text-rose-500">*</span></th>
                    <th class="py-2.5 px-3 min-w-[170px]">Email Liên Hệ</th>
                    <th class="py-2.5 px-3 min-w-[170px]">Ghi Chú</th>
                    <th class="py-2.5 px-2 w-10 text-center">Xóa</th>
                  </tr>
                </thead>
                <tbody id="hr-batch-staff-tbody" class="divide-y divide-slate-100 bg-white">
                  <!-- Render động các dòng nhập liệu -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- Nút thêm dòng trực quan ngay dưới bảng -->
          <button
            type="button"
            id="btn-hr-batch-add-row-bottom"
            class="mt-3 w-full py-2.5 rounded-2xl border-2 border-dashed border-purple-200 hover:border-purple-500 bg-purple-50/40 hover:bg-purple-50 text-purple-700 font-bold text-xs transition cursor-pointer flex items-center justify-center gap-2 shadow-2xs"
          >
            <i data-lucide="plus" class="w-4 h-4 text-purple-600"></i>
            <span>+ Thêm 1 Dòng Nhân Sự Mới</span>
          </button>
        </div>

        <!-- Footer -->
        <div class="p-4 sm:px-6 border-t border-slate-200 bg-slate-50 flex items-center justify-between gap-3 shrink-0 text-xs">
          <div class="text-xs text-slate-500">
            Tổng cộng: <strong id="hr-batch-row-count-footer" class="text-purple-700 font-mono font-bold">1 nhân sự</strong> trên biểu mẫu
          </div>
          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-200 font-bold transition cursor-pointer"
            >
              Hủy bỏ
            </button>
            <button
              type="submit"
              class="px-6 py-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-black uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5"
            >
              <i data-lucide="save" class="w-4 h-4"></i>
              <span>Lưu Danh Sách Nhân Sự</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 8D: PHÂN CÔNG QUẢN LÝ TÒA NHÀ CHO NHÂN SỰ (CHUẨN 100% REACT HRModule.tsx) -->
  <div id="modal-hr-assign-buildings" class="modal-overlay p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 space-y-4 animate-in zoom-in-95 duration-150">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2.5">
          <div class="w-10 h-10 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center font-black">
            <i data-lucide="building-2" class="w-5 h-5"></i>
          </div>
          <div>
            <h3 class="text-sm font-black text-slate-900 uppercase">
              Phân Công Quản Lý Tòa Nhà
            </h3>
            <p id="hr-assign-modal-staff-subtitle" class="text-xs text-emerald-700 font-bold">
              Nhân sự: --
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <p class="text-xs text-slate-500">
        Chọn một hoặc nhiều cơ sở tòa nhà trong chuỗi để phân công cho nhân sự phụ trách:
      </p>

      <!-- Checkbox Toàn bộ chuỗi -->
      <div
        id="hr-assign-all-buildings-box"
        class="p-3.5 rounded-2xl border transition cursor-pointer flex items-center justify-between bg-slate-50 border-slate-200 text-slate-700 hover:bg-slate-100"
      >
        <div class="flex items-center gap-3">
          <div
            id="hr-assign-all-buildings-checkbox"
            class="w-5 h-5 rounded-md border flex items-center justify-center border-slate-300 bg-white"
          ></div>
          <div>
            <div class="text-xs font-black">Phân quyền toàn bộ cơ sở trong chuỗi (All)</div>
            <div class="text-[10px] text-slate-500">Phụ trách tất cả các cơ sở hiện tại và tương lai</div>
          </div>
        </div>
      </div>

      <!-- Danh sách từng tòa nhà -->
      <div id="hr-assign-buildings-list" class="space-y-2 max-h-60 overflow-y-auto pr-1">
        <!-- Render động danh sách cơ sở tòa nhà -->
      </div>

      <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
        <button
          type="button"
          class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold text-xs transition cursor-pointer"
        >
          Hủy bỏ
        </button>
        <button
          type="button"
          id="btn-hr-save-assign-buildings"
          class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5"
        >
          <i data-lucide="save" class="w-4 h-4"></i>
          <span>Lưu Phân Công</span>
        </button>
      </div>
    </div>
  </div>

  <!-- MODAL 8B: THÊM / SỬA PHÒNG BAN (CHUẨN 100% REACT HRModule.tsx) -->
  <div id="modal-hr-dept" class="modal-overlay">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-6 space-y-4 animate-in zoom-in-95 duration-150">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center font-bold">
            <i data-lucide="layers" class="w-4 h-4"></i>
          </div>
          <h3 class="text-sm font-black uppercase text-slate-900" id="modal-hr-dept-title">
            Thêm Phòng Ban Mới
          </h3>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-modal-hr-dept" class="space-y-4 text-xs">
        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">
            Tên phòng ban <span class="text-rose-500">*</span>
          </label>
          <input
            type="text"
            id="hr-dept-input-name"
            required
            placeholder="VD: Quản lý tòa nhà, Kế toán tài chính..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-blue-500 font-bold text-slate-900"
          />
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Mã viết tắt</label>
          <input
            type="text"
            id="hr-dept-input-code"
            placeholder="VD: QLTN, KTTC, HCNS..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-blue-500 font-mono font-bold uppercase text-slate-900"
          />
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Màu nhận diện</label>
          <div class="grid grid-cols-4 gap-2" id="hr-dept-color-grid">
            <!-- Render 8 nút màu chuẩn React -->
          </div>
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Mô tả chức năng nhiệm vụ</label>
          <textarea
            id="hr-dept-input-desc"
            rows="2"
            placeholder="Mô tả phạm vi trách nhiệm của phòng ban..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-blue-500 text-slate-800"
          ></textarea>
        </div>

        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold transition cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="save" class="w-4 h-4"></i>
            <span id="btn-hr-dept-submit-text">Lưu Phòng Ban</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 8C: THÊM / SỬA VỊ TRÍ CHỨC VỤ ĐỊNH BIÊN (CHUẨN 100% REACT HRModule.tsx) -->
  <div id="modal-hr-position" class="modal-overlay">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-6 space-y-4 animate-in zoom-in-95 duration-150">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center font-bold">
            <i data-lucide="award" class="w-4 h-4"></i>
          </div>
          <div>
            <h3 class="text-sm font-black uppercase text-slate-900" id="modal-hr-pos-title">
              Thêm Chức Vụ Mới
            </h3>
            <p class="text-[10px] text-slate-400">
              Thiết lập chức danh định biên và phân bổ về phòng ban trực thuộc
            </p>
          </div>
        </div>
        <button
          type="button"
          class="btn-close-modal p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition cursor-pointer"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-modal-hr-position" class="space-y-4 text-xs">
        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">
            Tên chức vụ / vị trí <span class="text-rose-500">*</span>
          </label>
          <input
            type="text"
            id="hr-pos-input-title"
            required
            placeholder="VD: Quản lý cơ sở, Kế toán trưởng, Kỹ thuật viên..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-emerald-500 font-bold text-slate-900"
          />
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Mã chức vụ (viết tắt)</label>
          <input
            type="text"
            id="hr-pos-input-code"
            placeholder="VD: QLTN, KT, KTV, BV..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-emerald-500 font-mono font-bold uppercase text-slate-900"
          />
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">
            Phòng ban trực thuộc <span class="text-rose-500">*</span>
          </label>
          <select
            id="hr-pos-input-dept"
            required
            class="w-full px-3 py-2 rounded-xl border border-slate-300 font-bold bg-white text-slate-900 focus:outline-none focus:border-emerald-500"
          >
            <option value="">-- Chọn phòng ban trực thuộc --</option>
          </select>
        </div>

        <div class="space-y-1">
          <label class="font-bold text-slate-700 block">Mô tả trách nhiệm công việc</label>
          <textarea
            id="hr-pos-input-desc"
            rows="2"
            placeholder="Mô tả phạm vi trách nhiệm của vị trí này..."
            class="w-full px-3 py-2 rounded-xl border border-slate-300 focus:outline-none focus:border-emerald-500 text-slate-800"
          ></textarea>
        </div>

        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
          <button
            type="button"
            class="btn-close-modal px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-bold transition cursor-pointer"
          >
            Hủy bỏ
          </button>
          <button
            type="submit"
            class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase tracking-wider transition shadow-sm cursor-pointer flex items-center gap-1.5"
          >
            <i data-lucide="save" class="w-4 h-4"></i>
            <span id="btn-hr-pos-submit-text">Lưu Chức Vụ</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL 9: THÊM KHÁCH HỎI THUÊ (MARKETING LEAD MODAL) -->
  <div id="modal-mkt-lead" class="modal-overlay">
    <div class="relative w-full max-w-md bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
      <div class="flex items-center justify-between px-5 py-3.5 bg-gradient-sunsilk text-white shadow-md">
        <h2 class="text-xs sm:text-sm font-black uppercase tracking-wider text-white">Ghi Nhận Khách Hỏi Thuê (Lead Mới)</h2>
        <button type="button" class="btn-close-modal p-1 rounded-lg text-white/80 hover:text-white cursor-pointer"><i data-lucide="x" class="w-4 h-4"></i></button>
      </div>
      <form id="form-modal-mkt-lead" class="p-4 sm:p-5 space-y-3 text-xs">
        <div>
          <label class="block font-bold text-slate-700 mb-1">Họ & Tên Khách Hỏi *</label>
          <input type="text" id="lead-input-name" required placeholder="VD: Anh Tuấn, Chị Mai..." class="w-full h-10 px-3 rounded-xl border border-slate-300 font-bold">
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block font-bold text-slate-700 mb-1">Số Điện Thoại *</label>
            <input type="text" id="lead-input-phone" required placeholder="0912.345.678" class="w-full h-10 px-3 rounded-xl border border-slate-300 font-mono font-bold">
          </div>
          <div>
            <label class="block font-bold text-slate-700 mb-1">Ngân Sách Dự Kiến (VNĐ)</label>
            <input type="text" id="lead-input-budget" value="4.500.000" class="w-full h-10 px-3 rounded-xl border border-slate-300 font-bold">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block font-bold text-slate-700 mb-1">Nguồn Kênh</label>
            <select id="lead-input-channel" class="w-full h-10 px-3 rounded-xl border border-slate-300 font-bold bg-white">
              <option value="facebook">Facebook Ads</option>
              <option value="chotot">Chợ Tốt</option>
              <option value="referral">Môi Giới / Giới Thiệu</option>
              <option value="walkin">Khách Vãng Lai</option>
              <option value="tiktok">TikTok Video</option>
            </select>
          </div>
          <div>
            <label class="block font-bold text-slate-700 mb-1">Phòng Quan Tâm</label>
            <input type="text" id="lead-input-room" placeholder="VD: Phòng 104..." class="w-full h-10 px-3 rounded-xl border border-slate-300">
          </div>
        </div>
        <div>
          <label class="block font-bold text-slate-700 mb-1">Ghi Chú Nhu Cầu & Lịch Hẹn</label>
          <textarea id="lead-input-note" rows="2" placeholder="Hẹn 18h30 chiều nay qua xem phòng..." class="w-full p-2.5 rounded-xl border border-slate-300"></textarea>
        </div>
        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
          <button type="button" class="btn-close-modal px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 font-bold text-slate-700 cursor-pointer">Hủy</button>
          <button type="submit" class="px-5 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-black cursor-pointer shadow-xs">Lưu Khách Tiềm Năng</button>
        </div>
      </form>
    </div>
  </div>


  <!-- ===================================================================== -->
  <!-- 3. TOÀN BỘ LOGIC & VẬN HÀNH ĐỘC LẬP TRONG 1 FILE JS DUY NHẤT          -->
  <!-- ===================================================================== -->
  <script src="./quanlyhethong.js"></script>
</body>
</html>
