<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TuTaMix</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      :root {
        --bg-main: #f8f9fc;
        --bg-card: #ffffff;
        --text-primary: #1f2937; /* gray-800 */
        --text-secondary: #4b5563; /* gray-600 */
        --accent-primary: #38bdf8; /* sky-400 */
        --accent-secondary: #7dd3fc; /* sky-300 */
        --accent-focus-ring: #0284c7; /* sky-600 */
        --shadow-color: rgba(56, 189, 248, 0.2);
        --glow-color: rgba(56, 189, 248, 0.5);
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-primary);
      }
      .dragging {
        opacity: 0.5;
        cursor: grabbing;
        background: #e5e7eb; /* gray-200 */
      }
      @keyframes sparkle {
        0% { transform: scale(1); opacity: 0.7; }
        50% { transform: scale(1.5); opacity: 1; text-shadow: 0 0 10px var(--accent-secondary); }
        100% { transform: scale(1); opacity: 0.7; }
      }
      .sparkle-on-active:active > svg,
      .sparkle-on-active:focus > svg {
        animation: sparkle 0.4s ease-in-out;
      }
      @keyframes glow {
        from {
          box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color);
        }
        to {
          box-shadow: 0 0 15px var(--glow-color), 0 0 20px var(--glow-color);
        }
      }
      .glow-on-hover:hover {
        animation: glow 1.5s ease-in-out infinite alternate;
      }
      
      @keyframes pulse-warning {
        0%, 100% {
          box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
          border-color: #facc15; /* yellow-400 */
        }
        50% {
          box-shadow: 0 0 0 6px rgba(234, 179, 8, 0);
          border-color: #fbbf24; /* yellow-300 */
        }
      }
      .warning-pulse {
        animation: pulse-warning 2s infinite;
        border: 2px solid #facc15; /* yellow-400 */
        border-radius: 0.5rem; /* match rounded-lg */
      }

      /* Kiểu dáng mới cho các ô nhập liệu */
      textarea,
      input[type="text"],
      input[type="number"],
      input[type="search"],
      select {
        background-color: #FFF5F7 !important;
        color: #1f2937 !important;
        border-color: #FBCFE8 !important;
      }

      textarea::placeholder,
      input[type="text"]::placeholder,
      input[type="number"]::placeholder,
      input[type="search"]::placeholder {
        color: #9ca3af !important;
        opacity: 1;
      }

      textarea:focus,
      input[type="text"]:focus,
      input[type="number"]:focus,
      input[type="search"]:focus,
      select:focus {
        border-color: #EC4899 !important;
        --tw-ring-color: rgba(236, 72, 153, 0.4);
        box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
        outline: 2px solid transparent !important;
        outline-offset: 2px !important;
      }
      
      /* Đồng bộ màu nền cho các tùy chọn trong select */
      select option {
        background-color: #FFF5F7 !important;
        color: #1f2937 !important;
      }
    </style>

<link rel="stylesheet" href="/index.css">
  <script type="importmap">
{
  "imports": {
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
    "react/": "https://aistudiocdn.com/react@^19.1.1/",
    "react": "https://aistudiocdn.com/react@^19.1.1",
    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.16.0"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-CjJVy2D8.js"></script>
</head>
  <body class="bg-gray-100">
    <div id="root"></div>
  </body>
</html>