<!DOCTYPE html>
<html lang="th" class="light" translate="no">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" type="image/webp" href="/logo.webp" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#4f46e5" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/logo.webp" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <title>ระบบทำสัญญาผ่อนสินค้า บริษัท ซอฟต์อุบล จำกัด</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Prompt:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            fontFamily: {
              sans: ['Prompt', 'Sarabun', 'system-ui', '-apple-system', 'sans-serif'],
              thai: ['Prompt', 'Sarabun', 'system-ui', 'sans-serif'],
              display: ['Prompt', 'system-ui', 'sans-serif'],
              body: ['Sarabun', 'system-ui', 'sans-serif'],
            },
            screens: {
              'xs': '475px',
            },
            spacing: {
              'safe-top': 'env(safe-area-inset-top)',
              'safe-bottom': 'env(safe-area-inset-bottom)',
            },
          },
        },
      }
    </script>
  <script type="module" crossorigin src="/assets/index-BOovcF6Z.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-D0bkV-xU.css">
</head>
  <body class="bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-200 transition-colors duration-300">
    <div id="root" translate="no"></div>
    <style>
      #loading-screen {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }
      .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    </style>
    <div id="loading-screen">
      <div class="spinner"></div>
    </div>
    <script>
      window.addEventListener('load', () => {
        setTimeout(() => {
          const loader = document.getElementById('loading-screen');
          if (loader) loader.style.display = 'none';
        }, 500);
      });
    </script>

</body>
</html>