6. Tối Ưu Responsive Đa Màn Hình (Mobile, Tablet, Desktop) & Chuyển Đổi Dark/Light Mode

// ResponsiveNavbar.tsx
import { useState } from 'react';
import { Menu, X, Sun, Moon } from 'lucide-react';

export function Navbar({ darkMode, setDarkMode }: any) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <nav className="border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur sticky top-0 z-40">
      <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
        <div className="font-extrabold text-xl text-indigo-600 dark:text-indigo-400 tracking-tight">AI TINH GỌN</div>
        
        {/* Desktop Links */}
        <div className="hidden md:flex items-center gap-6 text-sm font-semibold text-slate-600 dark:text-slate-300">
          <a href="#" className="hover:text-indigo-600 dark:hover:text-indigo-400">Khóa học</a>
          <a href="#" className="hover:text-indigo-600 dark:hover:text-indigo-400">Dịch vụ</a>
          <a href="#" className="hover:text-indigo-600 dark:hover:text-indigo-400">Tài nguyên</a>
        </div>

        {/* Action Controls */}
        <div className="flex items-center gap-3">
          <button onClick={() => setDarkMode(!darkMode)} className="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
            {darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
          </button>
          <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 text-slate-700 dark:text-slate-300">
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>
    </nav>
  );
}